@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --brand: #bd4d79;
  --brand-strong: #a63868;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --ink: #29202b;
  --muted: #675b63;
  --line: #eadde3;
  --line-strong: #d6c1cb;
  --accent: var(--brand);
  --accent-strong: var(--brand-strong);
  --rose: #a96377;
  --sage: #54766b;
  --gold: #b98d46;
  --danger: #7f2e59;
  --danger: oklch(0.43 0.115 351);
  --danger-surface: #fff3f7;
  --danger-surface: oklch(0.975 0.018 351);
  --danger-border: rgba(189, 77, 121, 0.36);
  --danger-border: oklch(0.68 0.13 351 / 0.38);
  --danger-ring: rgba(189, 77, 121, 0.14);
  --danger-ring: oklch(0.62 0.15 351 / 0.14);
  --focus: rgba(189, 77, 121, 0.24);
  --control-bg: #f7f3f5;
  --control-bg-soft: rgba(247, 243, 245, 0.72);
  --control-bg-hover: #f8e7ee;
  --control-text: #7f2e59;
  --control-muted: #8a6172;
  --control-primary: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
  --control-radius: 22px;
  --control-radius-sm: 18px;
  --control-height: 48px;
  --control-height-lg: 52px;
  --panel-radius: 28px;
  --panel-border: 1px solid var(--line);
  --blush-bg: #f8e7ee;
  --step-surface: var(--bg);
  --page-gutter: 20px;
  --page-content-width: calc(100vw - (var(--page-gutter) * 2));
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --shadow: none;
  --radius: 8px;
  --input-radius: 28px;
  --mobile-browser-bottom-gap: 56px;
  --body-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-display-size: clamp(28px, 7.2vw, 36px);
  --type-title-size: clamp(24px, 6vw, 29px);
  --type-body-size: 17px;
  --type-caption-size: 14px;
  --type-display-weight: 700;
  --type-body-weight: 400;
  --type-display-leading: 1.06;
  --type-body-leading: 1.45;
  font-family:
    var(--body-font);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--step-surface);
}

body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ink);
  background: var(--step-surface);
}

.device-gate {
  display: none;
}

html.is-non-phone-device body > :not(.desktop-gate):not(script) {
  display: none !important;
}

.device-gate {
  width: 100%;
  height: 100%;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 32px;
  color: #ffffff;
  background: var(--brand);
  text-align: center;
}

html.is-non-phone-device .desktop-gate {
  display: grid;
}

.device-gate__device {
  position: relative;
  width: 72px;
  height: 124px;
  margin-bottom: 8px;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 19px;
}

.device-gate__device::before,
.device-gate__device::after {
  position: absolute;
  left: 50%;
  content: "";
  background: rgba(255, 255, 255, 0.92);
  transform: translateX(-50%);
}

.device-gate__device::before {
  top: 9px;
  width: 22px;
  height: 3px;
  border-radius: 2px;
}

.device-gate__device::after {
  bottom: 9px;
  width: 24px;
  height: 3px;
  border-radius: 2px;
}

.device-gate h1,
.device-gate p {
  margin: 0;
}

.device-gate h1 {
  max-width: 420px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.12;
}

.device-gate p {
  max-width: 430px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
}

.orientation-gate {
  gap: 10px;
  padding:
    max(20px, env(safe-area-inset-top, 0px))
    max(24px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px))
    max(24px, env(safe-area-inset-left, 0px));
  color: var(--ink);
  background: var(--bg);
}

.orientation-gate__visual {
  width: 112px;
  height: 118px;
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
}

.orientation-gate .device-gate__device {
  z-index: 1;
  width: 58px;
  height: 98px;
  margin: 0;
  border-width: 2.5px;
  border-color: var(--brand);
  border-radius: 17px;
  animation: orientation-phone-turn 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
  transform-origin: center;
}

.orientation-gate .device-gate__device::before,
.orientation-gate .device-gate__device::after {
  height: 2px;
  background: var(--brand);
}

.orientation-gate .device-gate__device::before {
  top: 8px;
  width: 18px;
}

.orientation-gate .device-gate__device::after {
  bottom: 8px;
  width: 19px;
}

.orientation-gate h1 {
  max-width: 360px;
  color: var(--ink);
  font-family: var(--display-font);
  font-size: clamp(27px, 5.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.orientation-gate p {
  max-width: 440px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.4;
}

.orientation-gate strong {
  color: var(--brand-strong);
  font-weight: 600;
}

@media (orientation: landscape) {
  html.is-phone-device body > :not(.orientation-gate):not(script) {
    display: none !important;
  }

  html.is-phone-device .orientation-gate {
    display: grid;
  }
}

@supports (height: 100svh) {
  html,
  body,
  .workspace,
  .questionnaire,
  .builder-form {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
  }
}

button,
input,
textarea {
  font: inherit;
}

button,
a,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.input-stack input:focus-visible,
.input-stack textarea:focus-visible {
  outline: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.eyebrow {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
}

.button,
.icon-button {
  min-height: 54px;
  border: 1px solid var(--accent);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.button {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: var(--control-radius);
  color: var(--surface);
  background: var(--control-primary);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.icon-button {
  width: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  border-color: var(--line-strong);
  font-size: 22px;
}

.button:disabled,
.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
  transform: none;
}

.button[aria-busy="true"] {
  position: relative;
  color: rgba(255, 250, 245, 0.82);
}

.button:active,
.icon-button:active {
  transform: scale(0.98);
}

.button--ghost {
  color: var(--control-text);
  background: var(--control-bg);
  border-color: transparent;
}

.button--wide {
  width: 100%;
}

.workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--step-surface);
}

.questionnaire {
  min-width: 0;
  min-inline-size: 0;
}

.questionnaire {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--step-surface);
}

.result-card h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display-font);
  font-weight: 400;
  line-height: 1.04;
}

.result-card {
  background: #ffffff;
}

.builder-form {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100dvh;
  background: var(--step-surface);
  overflow: clip;
  overscroll-behavior: none;
}

.browser-safe-area {
  min-height: calc(var(--mobile-browser-bottom-gap) + env(safe-area-inset-bottom, 0px));
  background: var(--step-surface);
  pointer-events: none;
}

.builder-form:has(fieldset[data-step]:not([hidden]) > .step-back-row) .browser-safe-area {
  min-height: env(safe-area-inset-bottom, 0px);
}

html.is-guest-form-step {
  --step-surface: #ffffff;
}

html.is-guest-form-step .form-nav .button:not(.button--ghost) {
  color: #ffffff;
  background: var(--control-primary);
  border-color: transparent;
}

.result-card {
  margin: 14px;
  border: 1px solid rgba(205, 183, 173, 0.78);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

fieldset {
  min-width: 0;
  min-inline-size: 0;
  min-height: 0;
  max-width: 100%;
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
  margin: 0;
  padding:
    26px max(var(--page-gutter), env(safe-area-inset-right, 0px))
    26px max(var(--page-gutter), env(safe-area-inset-left, 0px));
  border: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

fieldset > * {
  min-width: 0;
  max-width: 100%;
}

fieldset[hidden],
.result-card[hidden],
.form-error[hidden] {
  display: none;
}

legend {
  display: block;
  width: 100%;
  max-width: min(520px, var(--page-content-width));
  padding: 0;
  color: var(--ink);
  font-family: var(--display-font);
  font-size: clamp(33px, 8.5vw, 46px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.02;
  overflow-wrap: break-word;
  text-wrap: balance;
  white-space: normal;
}

.step-note {
  width: 100%;
  max-width: 300px;
  margin: -2px 0 8px;
  padding: 0 0 0 13px;
  border-left: 3px solid rgba(185, 141, 70, 0.76);
  color: var(--muted);
  font-size: 17px;
  line-height: 1.48;
  overflow-wrap: break-word;
}

fieldset[data-step="0"],
fieldset[data-step="1"],
fieldset[data-step="2"],
fieldset[data-step="3"],
fieldset[data-step="4"],
fieldset[data-step="5"],
fieldset[data-step="6"],
fieldset[data-step="gallery"],
fieldset[data-step="copy"],
fieldset[data-step="7"] {
  align-content: center;
  align-content: safe center;
  justify-items: stretch;
  gap: var(--space-5);
  padding:
    28px max(var(--page-gutter), env(safe-area-inset-right, 0px))
    28px max(var(--page-gutter), env(safe-area-inset-left, 0px));
}

.intro-heading {
  --intro-image-frame: min(188px, 48vw);
  display: grid;
  justify-self: center;
  justify-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
}

.intro-heading--compact {
  gap: var(--space-4);
  margin-bottom: 0;
}

.intro-heading__image {
  width: var(--intro-image-frame);
  height: var(--intro-image-frame);
  display: none;
  object-fit: contain;
  object-position: center;
  view-transition-name: slide-photo;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.intro-heading--compact .intro-heading__image {
  width: var(--intro-image-frame);
  height: var(--intro-image-frame);
}

.intro-heading__image--place {
  width: var(--intro-image-frame);
  height: var(--intro-image-frame);
}

.intro-heading__image--dress {
  width: var(--intro-image-frame);
  height: var(--intro-image-frame);
  border: 0;
  border-radius: 0;
  object-fit: contain;
}

.intro-heading__image--cover {
  width: var(--intro-image-frame);
  height: var(--intro-image-frame);
  border-radius: var(--panel-radius);
  object-fit: cover;
}

html.is-step-transitioning .builder-form {
  pointer-events: none;
}

.step-transition-ghost {
  position: fixed !important;
  z-index: 22;
  box-sizing: border-box;
  pointer-events: none !important;
  user-select: none;
  contain: layout paint style;
  will-change: opacity, transform, filter;
  transform-origin: 50% 44%;
}

.step-transition-ghost--nav {
  z-index: 23;
}

.intro-heading > h1 {
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-family: var(--display-font);
  font-size: clamp(27px, 6.9vw, 34px);
  font-weight: var(--type-display-weight);
  letter-spacing: 0;
  line-height: var(--type-display-leading);
  text-wrap: pretty;
}

.intro-heading > p:first-of-type {
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--muted);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  text-wrap: pretty;
}

fieldset[data-step="0"] .input-stack {
  width: 100%;
  max-width: none;
  justify-self: center;
  gap: var(--space-3);
  padding: 0;
}

fieldset[data-step="0"] .intro-heading {
  width: 100%;
  max-width: none;
  gap: var(--space-4);
  margin-bottom: 0;
}

fieldset[data-step="0"] .intro-heading h1 {
  width: 100%;
  max-width: none;
  min-height: 2.12em;
  display: grid;
  align-items: center;
  font-size: clamp(27px, 6.9vw, 34px);
  text-wrap: pretty;
}

fieldset[data-step="0"] .intro-heading p {
  min-height: 4.35em;
  display: grid;
  align-items: center;
  width: 100%;
  max-inline-size: none;
  max-width: none;
  text-wrap: wrap;
}

fieldset[data-step="0"] {
  gap: var(--space-6);
}

fieldset[data-step="0"]:not([hidden]) {
  animation: none;
}

html:not(.builder-has-started) fieldset[data-step="0"]:not([hidden]) .intro-heading h1,
html:not(.builder-has-started) fieldset[data-step="0"]:not([hidden]) .intro-heading p,
html:not(.builder-has-started) fieldset[data-step="0"]:not([hidden]) .intro-heading__personal,
html:not(.builder-has-started) fieldset[data-step="0"]:not([hidden]) .input-stack > label,
html:not(.builder-has-started) fieldset[data-step="0"]:not([hidden]) .input-stack__button {
  animation: intro-airy-enter 0.82s cubic-bezier(0.37, 0, 0.63, 1) backwards;
}

html:not(.builder-has-started) fieldset[data-step="0"]:not([hidden]) .intro-heading h1 {
  animation-delay: 0.04s;
}

html:not(.builder-has-started) fieldset[data-step="0"]:not([hidden]) .intro-heading p {
  animation-delay: 0.16s;
}

html:not(.builder-has-started) fieldset[data-step="0"]:not([hidden]) .intro-heading__personal {
  animation-name: intro-accent-reveal;
  animation-duration: 0.78s;
  animation-delay: 0.34s;
}

html:not(.builder-has-started) fieldset[data-step="0"]:not([hidden]) .input-stack > label:nth-of-type(1) {
  animation-delay: 0.4s;
}

html:not(.builder-has-started) fieldset[data-step="0"]:not([hidden]) .input-stack > label:nth-of-type(2) {
  animation-delay: 0.51s;
}

html:not(.builder-has-started) fieldset[data-step="0"]:not([hidden]) .input-stack__button {
  animation-delay: 0.63s;
}

.intro-heading__personal {
  display: inline-block;
  justify-self: center;
  width: fit-content;
  padding: 2px 8px 3px;
  border-radius: 0;
  color: #ffffff;
  background: var(--brand);
  font-weight: 600;
}

.template-picker {
  display: grid;
  gap: 8px;
}

.template-choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.template-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.template-choice > span {
  position: relative;
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 16px 12px 48px;
  border: 1px solid rgba(111, 42, 78, 0.16);
  border-radius: var(--control-radius-sm);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 22px rgba(76, 28, 54, 0.06);
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}

.template-choice > span::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(111, 42, 78, 0.36);
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
}

.template-choice > span::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translateY(-50%) scale(0.7);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.template-choice strong {
  font-size: 14px;
  line-height: 1.15;
}

.template-choice small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
}

.template-choice:has(input:checked) > span {
  border-color: rgba(111, 42, 78, 0.38);
  background: #fff8fb;
}

.template-choice:has(input:checked) > span::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.template-choice:focus-within > span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

fieldset[data-step] > .input-stack {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  gap: var(--space-3);
  padding: 0;
  border-radius: 0;
  background: transparent;
}

fieldset[data-step="7"] > .input-stack--guest-form {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  gap: var(--space-3);
  padding: 0;
  border-radius: 0;
}

fieldset[data-step="6"] {
  align-content: center;
  align-content: safe center;
}

fieldset[data-step="6"] > .input-stack--cover-media {
  display: contents;
}

fieldset[data-step="6"] .intro-heading--cover {
  --cover-media-width: min(150px, 39vw);
  width: 100%;
  max-width: none;
  min-height: 0;
  align-content: start;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.cover-media-next-panel {
  width: 100%;
  max-width: none;
  display: grid;
  justify-self: stretch;
  margin-top: 0;
}

.cover-media-next-panel:has([data-cover-media-next][hidden]) {
  display: none;
}

.cover-media-placeholder {
  width: var(--cover-media-width);
  aspect-ratio: 9 / 16;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 1px solid rgba(189, 77, 121, 0.2);
  border-radius: 28px;
  padding: 12px 18px;
  background:
    linear-gradient(135deg, rgba(255, 248, 252, 0.94), rgba(246, 231, 239, 0.94)),
    var(--control-bg);
  overflow: hidden;
}

.cover-media-placeholder[hidden] {
  display: none;
}

.cover-media-placeholder__image {
  width: auto;
  height: min(178px, 42vw);
  max-width: 100%;
  max-height: calc(100% - 8px);
  object-fit: contain;
  display: block;
  filter: grayscale(1) saturate(0) contrast(0.92) brightness(0.92);
  opacity: 0.58;
  pointer-events: none;
  user-select: none;
}

fieldset[data-step="6"]:has(.cover-media-preview:not([hidden])) .cover-media-placeholder {
  display: none;
}

.cover-media-upload-button {
  width: 100%;
  min-height: var(--control-height-lg);
  justify-self: stretch;
  border: 0;
  border-radius: var(--control-radius);
  color: #ffffff;
  background: var(--control-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.cover-media-upload-button[hidden] {
  display: none;
}

.cover-media-upload-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

fieldset[data-step="6"] .cover-media-upload-button {
  margin-top: 2px;
  margin-bottom: 0;
}

.cover-media-upload-note {
  width: min(318px, calc(100vw - 56px));
  max-width: min(318px, calc(100vw - 56px));
  justify-self: center;
  margin: 0 0 6px;
  color: rgba(103, 91, 99, 0.78);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.36;
  text-align: center;
}

fieldset[data-step="6"]:has(.cover-media-preview:not([hidden])) .cover-media-upload-note {
  display: none;
}

fieldset[data-step="6"]:not(:has(.cover-media-preview:not([hidden]))) [data-cover-media-next] {
  display: none;
}

fieldset[data-step="6"]:not(:has(.cover-media-preview:not([hidden]))) .input-stack--cover-media {
  display: contents;
}

fieldset[data-step="6"] .cover-media-preview--hero {
  width: var(--cover-media-width);
  justify-self: center;
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  cursor: pointer;
  outline-offset: 4px;
}

.cover-media-preview--hero:focus-visible,
.cover-media-preview--crop:focus-visible {
  outline: 3px solid var(--focus);
}

.cover-media-preview--crop.is-dragging {
  cursor: grabbing;
}

.cover-crop-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 31;
  width: min(354px, var(--page-content-width));
  max-height: calc(100dvh - 42px);
  overflow-y: auto;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px;
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 251, 0.98)),
    #ffffff;
  box-shadow: none;
  transform: translate3d(-50%, -50%, 0) scale(1);
  will-change: opacity, transform;
  -webkit-overflow-scrolling: touch;
}

.cover-crop-modal[hidden] {
  display: none;
}

.cover-crop-modal:not([hidden]) {
  animation: picker-modal-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center;
}

.cover-crop-modal h2,
.cover-crop-modal p {
  margin: 0;
  text-align: center;
}

.cover-crop-modal h2 {
  color: var(--accent-strong);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.16;
}

.cover-crop-modal p {
  width: 100%;
  max-width: 320px;
  color: #8a6172;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.34;
}

.cover-media-preview--crop {
  width: min(252px, 66vw);
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  background: #2b2028;
  cursor: grab;
  touch-action: none;
  outline-offset: 4px;
}

.cover-crop-modal__actions {
  width: 100%;
  display: grid;
  gap: 8px;
}

.cover-crop-modal__button {
  min-height: var(--control-height);
  border: 0;
  border-radius: var(--control-radius-sm);
  color: var(--control-text);
  background: var(--control-bg);
  font-size: 16px;
  font-weight: 600;
}

.cover-crop-modal__button--primary {
  color: #ffffff;
  background: var(--control-primary);
}

.cover-crop-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: inherit;
  pointer-events: none;
}

.cover-crop-frame::before,
.cover-crop-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.38;
  pointer-events: none;
}

.cover-crop-frame::before {
  display: none;
}

.cover-crop-frame::after {
  box-shadow: inset 0 0 0 999px rgba(20, 12, 16, 0.04);
}

.cover-crop-hint {
  width: 100%;
  max-width: 320px;
  color: #8a6172;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.28;
  text-align: center;
  pointer-events: none;
}

.cover-crop-hint[hidden] {
  display: none;
}

fieldset[data-step="6"] .intro-heading--cover h1 {
  margin-top: 0;
  color: var(--ink);
}

fieldset[data-step="6"] .intro-heading--cover p {
  color: var(--muted);
}

fieldset[data-step="6"]:has(.cover-media-preview:not([hidden])) .intro-heading--cover {
  --cover-media-width: min(158px, 41vw);
  min-height: 0;
}

.dress-harmony {
  display: grid;
  min-width: 0;
  width: 100%;
  gap: 0;
}

.dress-code-lock {
  --dress-orbit-size: min(500px, 128vw, 56dvh);
  --dress-orbit-overhang: clamp(140px, 42vw, 190px);
  --dress-ring-padding: clamp(4px, 0.7dvh, 6px);
  --dress-ring-width: min(48px, 12.3vw, 5.36dvh);
  --dress-ring-gap: 1px;
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: 100vw;
  max-width: none;
  height: var(--dress-orbit-size);
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  overflow: clip;
}

.dress-code-lock__types {
  display: none;
}

.dress-code-lock__wheels {
  position: absolute;
  top: 0;
  right: calc(0px - var(--dress-orbit-overhang));
  width: var(--dress-orbit-size);
  height: var(--dress-orbit-size);
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
  outline: 0;
  background:
    radial-gradient(
      circle at 28% 24%,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.4) 34%,
      transparent 56%
    ),
    #f3e8ed;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset -20px -16px 40px rgba(145, 72, 105, 0.035);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.dress-code-lock__wheels::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.2), transparent 48%);
  pointer-events: none;
}

.dress-code-lock__wheels::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(135, 72, 99, 0.045),
    inset 10px 0 26px rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.dress-code-lock__wheels:focus-visible {
  box-shadow:
    inset 0 0 0 3px rgba(166, 56, 104, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.dress-code-lock__wheels.is-dragging {
  cursor: grabbing;
}

.dress-code-wheel {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border-radius: 50%;
  padding: 0;
  pointer-events: none;
  transform: rotate(var(--dress-disc-rotation, 0deg));
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--dress-ring-width)),
    #000 calc(100% - var(--dress-ring-width) + 1px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--dress-ring-width)),
    #000 calc(100% - var(--dress-ring-width) + 1px)
  );
}

.dress-code-wheel:nth-child(1) {
  inset: var(--dress-ring-padding);
}

.dress-code-wheel:nth-child(2) {
  inset: calc(var(--dress-ring-padding) + var(--dress-ring-width) + var(--dress-ring-gap));
}

.dress-code-wheel:nth-child(3) {
  inset: calc(
    var(--dress-ring-padding) +
    var(--dress-ring-width) + var(--dress-ring-gap) +
    var(--dress-ring-width) + var(--dress-ring-gap)
  );
}

.dress-code-wheel:nth-child(4) {
  inset: calc(
    var(--dress-ring-padding) +
    var(--dress-ring-width) + var(--dress-ring-gap) +
    var(--dress-ring-width) + var(--dress-ring-gap) +
    var(--dress-ring-width) + var(--dress-ring-gap)
  );
}

.dress-code-wheel:nth-child(5) {
  inset: calc(
    var(--dress-ring-padding) +
    var(--dress-ring-width) + var(--dress-ring-gap) +
    var(--dress-ring-width) + var(--dress-ring-gap) +
    var(--dress-ring-width) + var(--dress-ring-gap) +
    var(--dress-ring-width) + var(--dress-ring-gap)
  );
  -webkit-mask: none;
  mask: none;
}

.dress-code-lock__wheels:is(.is-dragging, .is-positioning) .dress-code-wheel {
  transition: none;
}

.dress-palette {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 3;
}

.dress-palette__swatch {
  position: static;
}

label {
  display: grid;
  gap: 8px;
}

.input-stack {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: var(--panel-radius);
  background: #ffffff;
}

fieldset[data-step="3"] .input-stack--dress {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-self: stretch;
  gap: 14px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.event-basics {
  display: block;
}

.schedule-composer {
  display: grid;
  gap: 9px;
}

.schedule-composer__heading {
  display: grid;
  gap: 4px;
  padding: 0 4px;
}

.schedule-composer__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.schedule-composer__heading h2,
.schedule-composer__heading p {
  margin: 0;
}

.schedule-composer__heading h2 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
}

.schedule-composer__count {
  flex: 0 0 auto;
  color: var(--control-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
}

.schedule-composer__heading p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.3;
}

.schedule-editor {
  display: grid;
  gap: 7px;
}

.schedule-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 0;
  min-width: 0;
  min-height: 48px;
  overflow: hidden;
  border-radius: var(--control-radius);
  background: var(--control-bg);
  animation: schedule-row-enter 0.18s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.schedule-row:focus-within {
  background: var(--control-bg-hover);
  box-shadow: inset 0 0 0 2px rgba(189, 77, 121, 0.22);
}

.schedule-composer .schedule-row__field {
  min-width: 0;
  display: block;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}

.schedule-row__time {
  grid-column: 1;
  align-self: stretch;
  display: flex;
  align-items: stretch;
}

.schedule-row__time-button {
  position: relative;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: inherit;
  padding: 0 10px;
  color: var(--control-muted);
  background: transparent;
  font-family: var(--body-font);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1;
  text-align: center;
}

.schedule-row__time-button::after {
  position: absolute;
  top: 12px;
  right: 0;
  bottom: 12px;
  width: 1px;
  background: var(--line);
  content: "";
}

.schedule-row__time-button.has-value {
  color: var(--control-text);
}

.schedule-row__time-button:focus-visible {
  outline: 0;
}

.schedule-row__title {
  grid-column: 2;
}

.schedule-composer .schedule-row__field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.schedule-composer .schedule-row__field input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 0;
  padding: 0 13px;
  color: var(--ink);
  background: transparent;
  font-family: var(--body-font);
  font-size: 16px;
}

.schedule-composer .schedule-row__title input {
  text-overflow: ellipsis;
}

.schedule-row__remove {
  grid-column: 3;
  width: 42px;
  min-width: 42px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  color: var(--control-muted);
  background: transparent;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
}

.schedule-row__remove:is(:hover, :focus-visible) {
  color: var(--accent-strong);
  background: var(--control-bg-hover);
}

.schedule-row__remove[hidden] {
  visibility: hidden;
  display: grid;
}

.schedule-add-button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--control-radius);
  padding: 0 16px;
  color: var(--control-text);
  background: var(--control-bg-soft);
  font-size: 15px;
  font-weight: 600;
}

.schedule-add-button__icon {
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

.schedule-add-button:is(:hover, :focus-visible) {
  background: var(--control-bg-hover);
}

.schedule-add-button[hidden] {
  display: none;
}

fieldset[data-step="1"] .input-stack__button {
  min-height: var(--control-height-lg);
  border-radius: var(--control-radius);
  font-size: 16px;
}

fieldset[data-step="3"] .input-stack--dress > .input-stack__actions {
  width: 100%;
  max-width: var(--page-content-width);
  justify-self: center;
}

.step-back-row {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  margin-top: calc(var(--space-2) * -1);
}

fieldset[data-step]:has(> .step-back-row) {
  padding-bottom: calc(28px + var(--control-height) + var(--space-4));
}

fieldset[data-step] > .step-back-row {
  position: absolute;
  left: max(var(--page-gutter), env(safe-area-inset-left, 0px));
  right: max(var(--page-gutter), env(safe-area-inset-right, 0px));
  z-index: 2;
  bottom: 28px;
  width: auto;
  margin: 0;
}

.step-back-button {
  width: 100%;
  min-height: var(--control-height);
  border: 0;
  border-radius: var(--control-radius);
  color: var(--control-text);
  background: var(--control-bg);
  font-weight: 600;
}

.input-stack label {
  min-width: 0;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--control-radius);
  background: var(--control-bg);
  transition:
    background-color 0.24s ease,
    box-shadow 0.24s ease;
}

.input-stack label + label {
  border-top: 0;
}

.input-stack label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.input-stack input {
  min-height: var(--control-height-lg);
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  box-shadow: none;
}

.input-stack input:focus {
  background: var(--control-bg-hover);
  box-shadow: none;
}

.input-stack label:focus-within {
  background: var(--control-bg-hover);
  box-shadow: inset 0 0 0 2px rgba(189, 77, 121, 0.22);
}

.input-stack .template-picker {
  display: grid;
  gap: 8px;
}

.input-stack .template-choice {
  min-width: 0;
  position: relative;
  display: block;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.input-stack .template-choice input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
}

.input-stack .template-choice > span {
  position: relative;
  width: auto;
  height: auto;
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 4px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  padding: 12px 16px 12px 48px;
  border: 1px solid rgba(111, 42, 78, 0.16);
  border-radius: var(--control-radius-sm);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 22px rgba(76, 28, 54, 0.06);
  white-space: normal;
}

.input-stack--with-labels label {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
}

.input-stack--with-labels label > span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  color: var(--control-muted);
  font-size: 13px;
  white-space: normal;
}

.input-stack--with-labels input {
  min-height: 40px;
  padding: 0;
}

.input-stack--date-time label:not(.date-picker-field)::after {
  content: attr(data-placeholder);
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 1;
  color: var(--control-muted);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.18s ease;
}

.input-stack--date-time label:not(.date-picker-field):focus-within::after,
.input-stack--date-time label:not(.date-picker-field):has(input:valid)::after {
  opacity: 0;
}

.input-stack--date-time input:invalid {
  color: transparent;
}

.input-stack--date-time input:focus,
.input-stack--date-time input:valid {
  color: var(--ink);
}

.input-stack--date-time input:invalid::-webkit-datetime-edit {
  color: transparent;
}

.input-stack--date-time input:valid::-webkit-datetime-edit {
  color: var(--ink);
}

.input-stack .date-picker-field,
.input-stack .time-picker-field {
  min-width: 0;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--control-radius);
  padding: 0;
  background: var(--control-bg);
}

fieldset[data-step-key="date-time"] {
  align-content: center;
  gap: 14px;
  padding-top: 18px;
  padding-bottom: calc(18px + var(--control-height) + var(--space-3));
}

fieldset[data-step-key="date-time"] > .intro-heading {
  gap: 7px;
}

fieldset[data-step-key="date-time"] > .intro-heading h1 {
  font-size: clamp(26px, 6.6vw, 32px);
}

fieldset[data-step-key="date-time"] > .intro-heading p {
  font-size: 15px;
  line-height: 1.34;
}

fieldset[data-step-key="date-time"] > .input-stack--date-time {
  gap: 14px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.input-stack .date-picker-field__label,
.input-stack .time-picker-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
}

.input-stack .date-picker-field__value,
.input-stack .time-picker-field__value {
  position: absolute;
  width: 1px;
  min-height: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.date-picker-trigger,
.time-picker-trigger {
  width: 100%;
  min-height: var(--control-height-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: var(--control-radius);
  padding: 0 14px;
  color: var(--control-muted);
  background: transparent;
  font-size: 18px;
  text-align: left;
}

fieldset[data-step="1"] .date-picker-trigger,
fieldset[data-step="1"] .time-picker-trigger,
fieldset[data-step="1"] .input-stack__button {
  min-height: var(--control-height-lg);
  border-radius: var(--control-radius);
  font-size: 17px;
}

fieldset[data-step-key="date-time"] .date-picker-trigger,
fieldset[data-step-key="date-time"] .time-picker-trigger {
  min-height: 52px;
  justify-content: center;
  padding-inline: 16px;
  font-size: 16px;
  font-weight: 550;
  line-height: 1.16;
  text-align: center;
  white-space: normal;
}

fieldset[data-step-key="date-time"] .date-picker-trigger::after,
fieldset[data-step-key="date-time"] .time-picker-trigger::after {
  display: none;
}

fieldset[data-step="2"] .input-stack input,
fieldset[data-step="2"] .input-stack textarea,
fieldset[data-step="5"] .input-stack textarea,
fieldset[data-step="3"] .input-stack__button,
fieldset[data-step="2"] .input-stack__button,
fieldset[data-step="4"] .input-stack__button,
fieldset[data-step="5"] .input-stack__button,
fieldset[data-step="6"] .input-stack__button,
.location-address-trigger,
.location-cover-trigger,
.cover-media-trigger {
  border-radius: var(--control-radius);
  font-size: 16px;
}

fieldset[data-step="2"] .input-stack input {
  min-height: var(--control-height);
}

.location-address-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.location-address-grid input {
  padding-inline: 12px;
}

.address-suggestions {
  position: fixed;
  z-index: 36;
  display: grid;
  gap: 4px;
  max-height: 218px;
  overflow-y: auto;
  padding: 6px;
  border: var(--panel-border);
  border-radius: var(--control-radius-sm);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 251, 0.98)),
    #ffffff;
  box-shadow: none;
  -webkit-overflow-scrolling: touch;
}

.address-suggestions[hidden] {
  display: none;
}

.address-suggestions__item {
  min-height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: var(--control-radius-sm);
  padding: 9px 11px;
  color: var(--ink);
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  overflow-wrap: anywhere;
}

.address-suggestions__item:is(:hover, :focus-visible),
.address-suggestions__item.is-active {
  outline: 0;
  color: var(--accent-strong);
  background: var(--control-bg-hover);
}

fieldset[data-step="2"] .input-stack textarea {
  min-height: 118px;
  max-height: 118px;
  resize: none;
  line-height: 1.38;
}

fieldset[data-step="5"] .input-stack textarea {
  min-height: 132px;
  max-height: 132px;
  resize: none;
  line-height: 1.38;
}

.input-stack--gift-text label:focus-within {
  background: var(--control-bg);
  box-shadow: none;
}

.input-stack--gift-text textarea:focus {
  background: transparent;
}

fieldset[data-step="2"] .input-stack__button,
fieldset[data-step="3"] .input-stack__button,
fieldset[data-step="4"] .input-stack__button,
fieldset[data-step="5"] .input-stack__button,
fieldset[data-step="6"] .input-stack__button {
  min-height: var(--control-height-lg);
}

fieldset[data-step="1"] .input-stack__actions {
  gap: var(--space-3);
}

fieldset[data-step="2"] .input-stack__actions {
  gap: var(--space-3);
}

fieldset[data-step="3"] .input-stack__actions {
  gap: var(--space-3);
}

fieldset[data-step="4"] .input-stack__actions {
  gap: var(--space-3);
}

fieldset[data-step="5"] .input-stack__actions {
  gap: var(--space-3);
}

fieldset[data-step="6"] .input-stack__actions {
  gap: var(--space-3);
}

.date-picker-trigger::after,
.time-picker-trigger::after {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.72;
  transform: translateY(-2px) rotate(45deg);
}

.date-picker-field:has(.date-picker-field__value:valid) .date-picker-trigger,
.time-picker-field:has(.time-picker-field__value:valid) .time-picker-trigger {
  color: var(--ink);
}

.date-picker-trigger[aria-expanded="true"]::after,
.time-picker-trigger[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(225deg);
}

.date-picker-trigger[aria-invalid="true"],
.time-picker-trigger[aria-invalid="true"] {
  outline: 0;
  color: var(--danger);
  background: var(--danger-surface);
  box-shadow:
    inset 0 0 0 1.5px var(--danger-border),
    0 0 0 3px var(--danger-ring);
}

.picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.56);
  -webkit-backdrop-filter: blur(14px) saturate(0.94);
  backdrop-filter: blur(14px) saturate(0.94);
  will-change: opacity, backdrop-filter;
  pointer-events: auto;
}

.picker-backdrop[hidden] {
  display: none;
}

html.is-picker-backdrop-open .picker-backdrop {
  display: block;
  opacity: 1;
  -webkit-backdrop-filter: blur(14px) saturate(0.94);
  backdrop-filter: blur(14px) saturate(0.94);
}

.calendar-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 40;
  width: min(334px, var(--page-content-width));
  max-height: calc(100dvh - 80px);
  overflow: hidden;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 0;
  border-radius: var(--panel-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 251, 0.98)),
    #ffffff;
  box-shadow: 0 20px 56px rgba(41, 32, 43, 0.14);
  transform: translate(-50%, -50%);
}

.calendar-panel[hidden] {
  display: none;
}

.calendar-panel__header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
}

.calendar-panel__month {
  margin: 0;
  color: var(--accent-strong);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-transform: capitalize;
}

.calendar-panel__nav,
.calendar-panel__day {
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: var(--control-radius-sm);
  color: var(--accent);
  background: var(--control-bg);
  font-size: 17px;
  font-weight: 400;
}

.calendar-panel__nav {
  width: 44px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
}

.calendar-panel__weekdays,
.calendar-panel__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.calendar-panel__weekdays span {
  color: #9b6b7d;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.calendar-panel__day {
  padding: 0;
  color: #5b3b4a;
  background: transparent;
  font-size: 15px;
}

.calendar-panel__day.is-outside {
  color: rgba(91, 59, 74, 0.38);
}

.calendar-panel__day.is-today {
  outline: 1px solid rgba(189, 77, 121, 0.34);
  outline-offset: -1px;
}

.calendar-panel__day.is-selected {
  color: #ffffff;
  background: var(--control-primary);
  box-shadow: none;
}

.time-picker-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 40;
  width: min(334px, var(--page-content-width));
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 0;
  border-radius: var(--panel-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 251, 0.98)),
    #ffffff;
  box-shadow: 0 20px 56px rgba(41, 32, 43, 0.14);
  transform: translate(-50%, -50%);
}

.calendar-panel,
.time-picker-panel {
  will-change: opacity, transform;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.calendar-panel:not([hidden]),
.time-picker-panel:not([hidden]) {
  animation: picker-modal-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center;
}

.time-picker-panel[hidden] {
  display: none;
}

.time-picker-panel__title {
  margin: 0;
  color: var(--accent-strong);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.time-picker-panel__wheels {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-height: 196px;
}

.time-picker-panel__wheels::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  border-radius: var(--control-radius-sm);
  background: var(--control-bg);
  transform: translateY(-50%);
  pointer-events: none;
}

.time-picker-wheel {
  position: relative;
  z-index: 1;
  height: 196px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 76px 0;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.time-picker-wheel::-webkit-scrollbar {
  display: none;
}

.time-picker-wheel:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: var(--control-radius-sm);
}

.time-picker-wheel__option {
  width: 100%;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--control-radius-sm);
  padding: 0;
  color: rgba(91, 59, 74, 0.48);
  background: transparent;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  scroll-snap-align: center;
}

.time-picker-wheel__option.is-selected {
  color: var(--accent-strong);
}

.time-picker-panel__separator {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--accent-strong);
  font-size: 24px;
  font-weight: 600;
}

.calendar-panel__actions,
.time-picker-panel__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.calendar-panel__actions {
  margin-top: 2px;
}

.picker-panel__button {
  min-height: var(--control-height);
  border: 0;
  border-radius: var(--control-radius-sm);
  color: var(--control-text);
  background: var(--control-bg);
  font-size: 16px;
  font-weight: 600;
}

.picker-panel__button--primary {
  color: #ffffff;
  background: var(--control-primary);
}

.picker-panel__button:disabled {
  cursor: not-allowed;
  opacity: 0.44;
}

.location-address-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 31;
  width: min(354px, var(--page-content-width));
  max-height: calc(100dvh - 42px);
  overflow-y: auto;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 0;
  border-radius: var(--panel-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 251, 0.98)),
    #ffffff;
  box-shadow: 0 20px 56px rgba(41, 32, 43, 0.14);
  transform: translate3d(-50%, -50%, 0) scale(1);
  will-change: opacity, transform;
  -webkit-overflow-scrolling: touch;
}

.location-address-modal[hidden] {
  display: none;
}

.location-address-modal:not([hidden]) {
  animation: picker-modal-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center;
}

.location-address-modal h2 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.16;
  text-align: center;
}

.location-address-modal .input-stack {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.location-photo-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  border-radius: var(--control-radius);
  background: var(--control-bg);
}

.location-photo-preview[hidden] {
  display: none;
}

.location-photo-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.location-photo-preview__change {
  position: absolute;
  left: 50%;
  bottom: 12px;
  min-width: 118px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: var(--control-radius-sm);
  padding: 0 18px;
  color: #ffffff;
  background: rgba(127, 46, 89, 0.58);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.location-photo-preview__change[hidden] {
  display: none;
}

.location-photo-preview__change:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.cover-media-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  border-radius: var(--control-radius);
  background: var(--control-bg);
}

.cover-crop-modal .cover-media-preview--crop {
  width: min(252px, 66vw);
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  background: #2b2028;
  cursor: grab;
  touch-action: none;
}

.cover-media-preview[hidden] {
  display: none;
}

.cover-media-preview img,
.cover-media-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

fieldset[data-step="6"] .cover-media-preview--hero img,
fieldset[data-step="6"] .cover-media-preview--hero video,
.cover-media-preview--crop img,
.cover-media-preview--crop video {
  pointer-events: none;
  user-select: none;
}

.cover-media-preview video[hidden],
.cover-media-preview img[hidden] {
  display: none;
}

.cover-media-preview__edit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  border-radius: inherit;
  padding: 0;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

.cover-media-preview__edit:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.cover-media-preview__change {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 3;
  min-width: 118px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: var(--control-radius-sm);
  padding: 0 18px;
  color: #ffffff;
  background: rgba(127, 46, 89, 0.58);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.cover-media-preview__change[hidden] {
  display: none;
}

.cover-media-preview__change:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.location-followup-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 32;
  width: min(334px, var(--page-content-width));
  display: grid;
  gap: 12px;
  padding: 18px;
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 251, 0.98)),
    #ffffff;
  box-shadow: none;
  transform: translate3d(-50%, -50%, 0) scale(1);
  will-change: opacity, transform;
}

.location-followup-modal[hidden] {
  display: none;
}

.location-followup-modal:not([hidden]) {
  animation: picker-modal-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center;
}

.location-followup-modal h2 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.16;
  text-align: center;
  text-wrap: balance;
}

.location-followup-modal p {
  margin: 0;
  color: #8a6172;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.36;
  text-align: center;
}

.location-followup-modal__actions {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.location-followup-modal__button {
  min-height: var(--control-height);
  border: 0;
  border-radius: var(--control-radius-sm);
  color: var(--control-text);
  background: var(--control-bg);
  font-size: 16px;
  font-weight: 600;
}

.location-followup-modal__button--primary {
  color: #ffffff;
  background: var(--control-primary);
}

.location-pager {
  min-height: var(--control-height);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: var(--control-radius);
  background: var(--control-bg);
}

.location-pager[hidden] {
  display: none;
}

.location-pager__button {
  width: 38px;
  min-height: 38px;
  border: 0;
  border-radius: var(--control-radius-sm);
  color: var(--control-text);
  background: #ffffff;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.location-pager__button:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.location-pager__label {
  min-width: 0;
  color: var(--control-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.input-stack--place-cta {
  padding: 0;
}

.input-stack--place-cta .input-stack__button,
.input-stack--place-cta .location-address-trigger {
  min-height: var(--control-height-lg);
}

.location-list {
  display: grid;
  gap: 6px;
}

.location-list[hidden] {
  display: none;
}

.location-address-trigger,
.location-cover-trigger,
.cover-media-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  padding: 0 14px;
  color: var(--control-muted);
  background: var(--control-bg);
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
}

.location-cover-trigger,
.cover-media-trigger {
  min-height: var(--control-height);
}

.location-cover-trigger[hidden],
.cover-media-trigger[hidden] {
  display: none;
}

.location-cover-trigger:disabled,
.cover-media-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.location-address-trigger span,
.location-cover-trigger span,
.cover-media-trigger span {
  min-width: 0;
}

.location-address-trigger[hidden] {
  display: none;
}

.location-address-trigger--add {
  color: var(--control-text);
}

.location-address-trigger::after {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.72;
  transform: translateY(-2px) rotate(45deg);
}

.location-cover-trigger::after,
.cover-media-trigger::after {
  content: "+";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--control-primary);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.location-address-trigger[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(225deg);
}

.input-stack__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.input-stack__button {
  width: 100%;
  min-height: var(--control-height-lg);
  border: 0;
  border-radius: var(--control-radius);
  color: #ffffff;
  background: var(--control-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
}

.input-stack__button.button--ghost {
  color: var(--control-text);
  background: var(--control-bg);
  border: 0;
}

label span,
.location-set__title {
  color: #5e525a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

input,
textarea {
  width: 100%;
  max-width: 100%;
  min-height: var(--control-height-lg);
  border: 0;
  border-radius: var(--control-radius);
  padding: 14px 14px;
  color: var(--ink);
  background: var(--control-bg);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.25;
  transition:
    background-color 0.18s ease;
}

input::placeholder,
textarea::placeholder {
  color: #80747b;
  opacity: 1;
}

textarea {
  min-height: 112px;
  resize: vertical;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
}

input:focus,
textarea:focus {
  background: var(--control-bg-hover);
  box-shadow: none;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  background: var(--danger-surface);
  box-shadow: inset 0 0 0 1.5px var(--danger-border);
}

.input-stack label:has(input[aria-invalid="true"]),
.input-stack label:has(textarea[aria-invalid="true"]) {
  background: var(--danger-surface);
  box-shadow: inset 0 0 0 1.5px var(--danger-border);
}

.input-stack label:has(input[aria-invalid="true"]):focus-within,
.input-stack label:has(textarea[aria-invalid="true"]):focus-within {
  box-shadow:
    inset 0 0 0 1.5px var(--danger-border),
    0 0 0 3px var(--danger-ring);
}

.field-grid,
.location-set {
  display: grid;
  gap: 12px;
}

.location-set {
  padding: 14px;
  border: 1px solid rgba(234, 219, 210, 0.95);
  border-radius: var(--input-radius);
  background: rgba(255, 255, 255, 0.58);
}

.location-set__title {
  margin: 0;
  font-weight: 700;
}

.gift-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.input-stack .gift-choice {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--control-radius);
  padding: 8px 11px;
  background: var(--control-bg);
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.input-stack .gift-choice:has(input:checked) {
  background: var(--control-bg-hover);
}

.input-stack .gift-choice:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.input-stack .gift-choice input {
  width: 18px;
  min-height: 18px;
  flex: 0 0 auto;
  border-radius: 4px;
  padding: 0;
  background: transparent;
  accent-color: var(--accent-strong);
}

.input-stack .gift-choice span {
  position: static;
  width: auto;
  height: auto;
  min-width: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  color: var(--control-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.12;
  overflow-wrap: anywhere;
  white-space: normal;
}

.wish-options {
  display: grid;
  gap: 6px;
}

.input-stack--gallery,
.input-stack--copy {
  gap: var(--space-3);
}

.gallery-editor {
  display: grid;
  gap: 9px;
}

.gallery-editor__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gallery-editor__grid:empty {
  display: none;
}

.gallery-editor__item {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: var(--control-radius-sm);
  background: var(--control-bg);
}

.gallery-editor__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gallery-editor__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  color: #ffffff;
  background: rgba(41, 32, 43, 0.72);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

.gallery-add-button {
  width: 100%;
  min-height: var(--control-height-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--control-radius);
  padding: 0 16px;
  color: var(--control-text);
  background: var(--control-bg);
  font-size: 15px;
  font-weight: 600;
}

.gallery-add-button__icon {
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

.gallery-add-button.is-limit .gallery-add-button__icon {
  display: none;
}

.gallery-add-button:disabled {
  opacity: 0.68;
}

.gallery-editor__note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.input-stack--copy textarea {
  min-height: 104px;
  max-height: 104px;
  resize: none;
}

.input-stack--copy label:last-of-type textarea {
  min-height: 76px;
  max-height: 76px;
}

.input-stack .wish-choice {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  border-radius: var(--control-radius);
  padding: 10px 11px;
  background: var(--control-bg);
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.input-stack .wish-choice:has(input:checked) {
  background: var(--control-bg-hover);
}

.input-stack .wish-choice:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.input-stack .wish-choice input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
  background: transparent;
  accent-color: var(--accent-strong);
}

.input-stack .wish-choice span {
  position: static;
  width: auto;
  height: auto;
  min-width: 0;
  display: grid;
  gap: 3px;
  overflow: visible;
  clip: auto;
  clip-path: none;
}

.input-stack .wish-choice strong {
  color: var(--control-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.18;
}

.input-stack .wish-choice small {
  color: #8a6172;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.24;
}

.guest-form-presets,
.guest-question-list {
  display: grid;
  gap: 6px;
}

.guest-form-section {
  display: grid;
  gap: 6px;
  animation: guest-panel-enter 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.guest-form-section[hidden] {
  display: none;
}

.guest-form-section + .guest-form-section {
  padding-top: 4px;
  border-top: 1px solid rgba(189, 77, 121, 0.12);
}

.guest-form-section__title {
  margin: 2px 4px 0;
  color: #8a6172;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.16;
}

.input-stack .guest-preset-choice,
.input-stack .guest-question-choice {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  border-radius: var(--control-radius);
  padding: 10px 11px;
  background: var(--control-bg);
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.input-stack .guest-question-choice {
  align-items: center;
  min-height: 44px;
  padding-block: 8px;
}

.input-stack .guest-preset-choice:has(input:checked),
.input-stack .guest-question-choice:has(input:checked) {
  background: var(--control-bg-hover);
}

.input-stack .guest-preset-choice:focus-within,
.input-stack .guest-question-choice:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.input-stack .guest-preset-choice input,
.input-stack .guest-question-choice input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
  background: transparent;
  accent-color: var(--accent-strong);
}

.input-stack .guest-question-choice input {
  margin-top: 0;
}

.input-stack .guest-preset-choice span,
.input-stack .guest-question-choice span {
  position: static;
  width: auto;
  height: auto;
  min-width: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

.input-stack .guest-preset-choice span {
  display: grid;
  gap: 3px;
}

.input-stack .guest-preset-choice strong {
  color: var(--control-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.18;
}

.input-stack .guest-preset-choice small {
  color: #8a6172;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.24;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.input-stack .guest-question-choice span {
  color: var(--control-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.14;
}

.guest-response-deadline {
  align-content: center;
  gap: 12px;
}

.guest-response-deadline .guest-form-section__title {
  margin-inline: 0;
  font-size: 15px;
}

.guest-form-section__note {
  margin: 0;
  color: #725966;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.38;
  text-align: left;
  text-wrap: pretty;
}

.input-stack .guest-deadline-value span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  color: var(--control-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: normal;
}

.input-stack .guest-deadline-value {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 10px 12px 6px;
}

@keyframes guest-panel-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.input-stack .guest-deadline-value input {
  min-height: 48px;
  padding: 4px 0 8px;
  font-size: 16px;
  text-align: center;
}

.form-error {
  position: relative;
  z-index: 36;
  width: min(354px, var(--page-content-width));
  justify-self: center;
  display: block;
  margin: 0 0 14px;
  padding: 2px 4px;
  border: 0;
  border-radius: 0;
  color: var(--danger);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.32;
  text-align: left;
  animation: form-error-enter 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.input-stack > .form-error,
.calendar-panel > .form-error,
.time-picker-panel > .form-error,
.intro-heading > .form-error {
  width: 100%;
  margin: -6px 0 2px;
  padding-inline: 6px;
}

.form-nav {
  position: relative;
  z-index: 5;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  justify-self: center;
  justify-content: center;
  gap: 8px;
  width: var(--page-content-width);
  max-width: none;
  margin-bottom: 18px;
  padding: 12px 0 8px;
  border-top: 0;
  background: transparent;
  backdrop-filter: none;
}

.form-nav .button {
  width: 100%;
  border-radius: var(--control-radius);
  padding-inline: 12px;
}

.form-nav .button:not(.button--ghost) {
  order: -1;
  color: #ffffff;
  background: var(--control-primary);
  border-color: transparent;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
}

.form-nav .button[hidden] {
  display: none;
}

.form-nav[hidden] {
  display: none;
}

.form-nav .button--wide {
  grid-column: 1 / -1;
}

.result-card {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 40;
  width: var(--page-content-width);
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5) 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  transform: translate(-50%, -50%);
}

.result-card h2 {
  font-family: var(--display-font);
  font-size: clamp(27px, 6.9vw, 34px);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-leading);
  text-align: center;
}

.share-field {
  display: grid;
  gap: 8px;
}

.share-field input {
  font-size: 13px;
}

.result-card__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.result-card__owner-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 759px) {
  .form-nav {
    grid-template-columns: 1fr;
  }

  .form-nav .button:not([hidden]) {
    width: 100%;
  }

  .form-nav .button:not(.button--ghost) {
    order: -1;
  }
}

@media (max-width: 340px) {
  fieldset[data-step-key="date-time"] {
    --page-gutter: 16px;
  }

  .schedule-row {
    grid-template-columns: 68px minmax(0, 1fr) 42px;
  }

  .schedule-composer .schedule-row__field input {
    padding-inline: 7px;
  }

  .schedule-row__time-button {
    padding-inline: 6px;
  }
}

@media (max-height: 700px) {
  fieldset[data-step="0"],
  fieldset[data-step="1"],
  fieldset[data-step="2"],
  fieldset[data-step="3"],
  fieldset[data-step="4"],
  fieldset[data-step="5"],
  fieldset[data-step="6"],
  fieldset[data-step="gallery"],
  fieldset[data-step="copy"],
  fieldset[data-step="7"] {
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  fieldset[data-step]:has(> .step-back-row) {
    padding-bottom: calc(20px + var(--control-height) + var(--space-3));
  }

  fieldset[data-step] > .step-back-row {
    bottom: 20px;
  }

  fieldset[data-step="0"] {
    gap: var(--space-5);
  }

  fieldset[data-step="7"] {
    align-content: start;
  }

  .schedule-editor {
    gap: 6px;
  }

  .schedule-composer .schedule-row__field input {
    min-height: 42px;
  }

  .schedule-row {
    min-height: 42px;
  }

  .schedule-row__time-button,
  .schedule-row__remove {
    min-height: 42px;
    height: 42px;
  }

  fieldset[data-step-key="date-time"] {
    gap: 10px;
    padding-top: 12px;
    padding-bottom: calc(12px + var(--control-height) + var(--space-2));
  }

  fieldset[data-step-key="date-time"] > .intro-heading p {
    font-size: 14px;
  }

  fieldset[data-step-key="date-time"] .schedule-composer__heading p {
    display: none;
  }

  fieldset[data-step-key="date-time"] .schedule-add-button {
    min-height: 42px;
  }

  fieldset[data-step="7"] > .intro-heading {
    gap: 10px;
  }

  fieldset[data-step="7"] > .input-stack--guest-form,
  .guest-form-presets {
    gap: var(--space-2);
  }

  .input-stack .guest-preset-choice {
    padding: 7px 10px;
  }

  .input-stack .guest-preset-choice small {
    font-size: 12px;
    line-height: 1.2;
  }

  .input-stack .gift-choice {
    min-height: 44px;
    padding: 7px 9px;
  }

  .input-stack .gift-choice span {
    font-size: 12px;
  }

  .form-nav {
    gap: 6px;
    margin-bottom: 0;
    padding: 6px 0;
  }
}

@media (max-height: 620px) {
  fieldset[data-step="3"] {
    gap: 6px;
  }

  fieldset[data-step="3"] .intro-heading--dress {
    gap: 10px;
  }

  fieldset[data-step="3"] .intro-heading--dress p {
    font-size: 15px;
    line-height: 1.3;
  }

  fieldset[data-step="3"] .input-stack--dress {
    gap: 6px;
  }

  fieldset[data-step="3"] .dress-code-lock {
    --dress-orbit-size: min(340px, 110vw, 54dvh);
    --dress-orbit-overhang: clamp(88px, 32vw, 128px);
    --dress-ring-padding: 4px;
    --dress-ring-width: min(32px, 10.5vw, 5.15dvh);
    --dress-ring-gap: 1px;
  }

  fieldset[data-step="3"] > .step-back-row {
    bottom: 12px;
  }
}

@media (min-width: 640px) {
  .field-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .questionnaire {
    width: min(100%, 560px);
    margin: 0 auto;
  }
}

@keyframes form-error-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes schedule-row-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes intro-airy-enter {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 20px, 0) scale(0.985);
  }

  72% {
    opacity: 1;
    filter: blur(0.5px);
    transform: translate3d(0, -1px, 0) scale(1);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes intro-accent-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: blur(4px);
    transform: translate3d(-6px, 4px, 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0);
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dress-palette-soft-in {
  from {
    opacity: 0.62;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes orientation-phone-turn {
  0%,
  18% {
    opacity: 1;
    transform: rotate(90deg) scale(0.96);
  }

  48%,
  72% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  82% {
    opacity: 0;
    transform: rotate(0deg) scale(1);
  }

  83% {
    opacity: 0;
    transform: rotate(90deg) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: rotate(90deg) scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orientation-gate .device-gate__device {
    animation: none !important;
    transform: rotate(0);
  }

  fieldset[data-step="0"]:not([hidden]) .intro-heading h1,
  fieldset[data-step="0"]:not([hidden]) .intro-heading p,
  fieldset[data-step="0"]:not([hidden]) .intro-heading__personal,
  fieldset[data-step="0"]:not([hidden]) .input-stack > label,
  fieldset[data-step="0"]:not([hidden]) .input-stack__button {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}