/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}

:root {
  --ivory: #f7f3ea;
  --paper: #fbf9f3;
  --paper-deep: #efe8da;
  --ink: #5d5549;
  --ink-soft: #7f7464;
  --muted: #a19582;
  --gold: #b28e48;
  --gold-soft: #d9c38c;
  --gold-pale: #eee1bc;
  --sage: #8b9889;
  --shadow: 0 24px 70px #53432621;
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Great Vibes", "Brush Script MT", cursive;
  --sans: "Montserrat", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ivory);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ivory);
  margin: 0;
  overflow-x: hidden;
}

button, input, textarea, select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #b28e48b8;
}

.app-shell {
  isolation: isolate;
  background: radial-gradient(circle at 50% -8%, #fffffff2, #0000 42%), linear-gradient(#faf8f2 0%, #f6f0e6 100%);
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
}

.app-shell:before {
  content: "";
  z-index: -5;
  opacity: .22;
  mix-blend-mode: multiply;
  background: url("/assets/paper.webp") center / cover;
  position: fixed;
  inset: 0;
}

.paper-noise {
  z-index: -4;
  opacity: .14;
  pointer-events: none;
  background-image: radial-gradient(circle at 20% 30%, #6a573821 0 .5px, #0000 .8px), radial-gradient(circle at 70% 60%, #ffffffe6 0 .6px, #0000 .9px);
  background-size: 8px 8px, 11px 11px;
  position: fixed;
  inset: 0;
}

.decor {
  z-index: -2;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  mix-blend-mode: multiply;
  opacity: .38;
  filter: saturate(.82) contrast(.95);
  animation: 15s ease-in-out infinite alternate floatDecor;
  position: fixed;
}

.decor--top {
  width: min(65vw, 360px);
  animation-delay: -1s;
  top: -10vw;
  left: -12vw;
  transform: rotate(-3deg);
}

.decor--bottom {
  width: min(68vw, 390px);
  animation-delay: -6s;
  bottom: -15vw;
  right: -18vw;
  transform: rotate(2deg);
}

.decor--gold {
  opacity: .18;
  width: min(52vw, 290px);
  animation-delay: -3s;
  bottom: 10vh;
  left: -16vw;
}

.gold-speckles {
  z-index: -3;
  pointer-events: none;
  background: radial-gradient(circle at 92% 16%, #b8934838 0 1px, #0000 2px), radial-gradient(circle at 88% 20%, #b8934824 0 1.5px, #0000 2.5px), radial-gradient(circle at 10% 76%, #b893481f 0 1px, #0000 2px), radial-gradient(circle at 12% 80%, #b8934830 0 1.5px, #0000 2.5px);
  animation: 7.5s ease-in-out infinite goldTwinkle;
  position: fixed;
  inset: 0;
}

.app-stage {
  min-height: 100dvh;
}

.experience {
  width: min(100%, 540px);
  min-height: 100dvh;
  padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  touch-action: pan-y;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  margin: 0 auto;
  display: grid;
}

.progress-wrap {
  padding: 4px 4px 0;
}

.progress-meta {
  color: #8b7d68;
  letter-spacing: .16em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  font-size: 9px;
  display: flex;
}

.progress-track {
  background: #b28e4824;
  border-radius: 99px;
  height: 2px;
  overflow: hidden;
}

.progress-track span {
  border-radius: inherit;
  background: linear-gradient(90deg, #d9c38c, #ab8440);
  height: 100%;
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
  display: block;
}

.scene-slot {
  place-items: center;
  min-height: 0;
  display: grid;
  position: relative;
}

.screen-card {
  scrollbar-width: thin;
  text-align: center;
  width: 100%;
  min-height: calc(100dvh - 156px);
  max-height: calc(100dvh - 156px);
  box-shadow: var(--shadow), inset 0 0 0 8px #ffffff2e;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: linear-gradient(#fffc, #ffffffc2), url("/assets/paper.webp") center / cover;
  border: 1px solid #b28e483d;
  border-radius: 28px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(26px, 7vw, 48px) clamp(20px, 7vw, 46px);
  display: flex;
  position: relative;
  overflow: auto;
}

.screen-card:after {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  opacity: .75;
  background: linear-gradient(135deg, #ffffff38, #0000 34% 66%, #d9c38c1a);
  position: absolute;
  inset: 0;
}

.screen-card--compact {
  justify-content: flex-start;
  padding-top: 22px;
  padding-bottom: 22px;
}

.corner-line {
  pointer-events: none;
  opacity: .62;
  width: 54px;
  height: 54px;
  position: absolute;
}

.corner-line:before, .corner-line:after {
  content: "";
  background: linear-gradient(90deg, transparent, var(--gold-soft));
  position: absolute;
}

.corner-line:before {
  width: 54px;
  height: 1px;
}

.corner-line:after {
  background: linear-gradient(180deg, transparent, var(--gold-soft));
  width: 1px;
  height: 54px;
}

.corner-line--tl {
  top: 12px;
  left: 12px;
  transform: rotate(180deg);
}

.corner-line--br {
  bottom: 12px;
  right: 12px;
}

.corner-line--tl:before, .corner-line--tl:after, .corner-line--br:before, .corner-line--br:after {
  bottom: 0;
  right: 0;
}

.kicker {
  color: var(--gold);
  font-family: var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 8px;
  font-size: 9px;
  font-weight: 500;
}

.script-title {
  color: #61584c;
  font-family: var(--script);
  text-shadow: 0 1px #fffc;
  margin: 0;
  font-size: clamp(45px, 13vw, 72px);
  font-weight: 400;
  line-height: .98;
}

.soft-copy {
  max-width: 31rem;
  color: var(--ink-soft);
  font-family: var(--serif);
  margin: 14px auto 0;
  font-size: clamp(16px, 4.5vw, 20px);
  line-height: 1.55;
}

.soft-copy strong {
  color: #6d5a38;
  font-weight: 600;
}

.gold-divider {
  width: min(74%, 300px);
  color: var(--gold);
  opacity: .68;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 9px;
  margin: 18px auto 10px;
  display: grid;
}

.gold-divider span {
  background: linear-gradient(90deg, #0000, #b28e48cc);
  height: 1px;
}

.gold-divider span:last-child {
  background: linear-gradient(90deg, #b28e48cc, #0000);
}

.gold-divider i {
  font-size: 10px;
  font-style: normal;
}

.gold-divider--compact {
  margin: 12px auto 7px;
}

.floral-crown {
  mix-blend-mode: multiply;
  opacity: .9;
  width: min(77%, 330px);
  height: 130px;
  margin: -18px auto -8px;
  overflow: hidden;
}

.floral-crown img {
  object-fit: cover;
  object-position: 50% 26%;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(#000 55%, #0000 100%);
  mask-image: linear-gradient(#000 55%, #0000 100%);
}

.memory-button {
  color: #7d6946;
  background: #ffffff8a;
  border: 1px solid #b28e4845;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  margin-top: 22px;
  padding: 0 18px;
  display: inline-flex;
  box-shadow: 0 8px 22px #6952290f;
}

.memory-button:hover {
  background: #ffffffe6;
  transform: translateY(-1px);
}

.rings-wrap {
  width: min(70%, 330px);
  height: 190px;
  margin: -14px auto -12px;
}

.rings-wrap img {
  object-fit: contain;
  filter: drop-shadow(0 10px 10px #77531721);
  width: 100%;
  height: 100%;
}

.names {
  color: #705d3c;
  font-family: var(--script);
  gap: 4px;
  margin-top: 10px;
  display: grid;
}

.names strong {
  font-size: clamp(39px, 11vw, 62px);
  font-weight: 400;
  line-height: 1;
}

.names span {
  color: var(--gold);
  font-size: 34px;
  line-height: .72;
}

.portrait-shell {
  background: #fffc;
  border: 1px solid #b28e4894;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  padding: 5px;
  box-shadow: 0 14px 30px #513e1d1a;
}

.portrait-shell img {
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.parents-grid {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  margin-top: 10px;
  display: grid;
}

.parents-grid > div {
  gap: 3px;
  display: grid;
}

.parents-grid span {
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-size: 8px;
}

.parents-grid strong {
  color: #6d5a3d;
  font-family: var(--script);
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 400;
  line-height: 1.18;
}

.invitation-scene:before {
  content: "";
  pointer-events: none;
  border: 1px solid #b28e483b;
  border-radius: 19px;
  position: absolute;
  inset: 22px;
}

.tiny-flower {
  color: #b8995c;
  margin-bottom: 12px;
}

.mini-rings-css {
  width: 92px;
  height: 46px;
  margin: 12px auto 4px;
  position: relative;
}

.mini-rings-css i {
  border: 5px solid #b38a3a;
  border-radius: 50%;
  width: 50px;
  height: 28px;
  position: absolute;
  transform: rotate(-11deg);
  box-shadow: inset 0 0 0 1px #e8d59c, 0 4px 6px #694b1921;
}

.mini-rings-css i:last-child {
  left: 38px;
  transform: rotate(11deg);
}

.invite-names {
  color: #66553a;
  font-family: var(--script);
  gap: 0;
  display: grid;
}

.invite-names strong {
  font-size: clamp(32px, 9vw, 48px);
  font-weight: 400;
  line-height: 1.02;
}

.invite-names span {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
}

.rings-mini-image {
  width: 92px;
  height: 64px;
  margin-bottom: -8px;
}

.rings-mini-image img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.detail-list {
  gap: 9px;
  width: 100%;
  margin-top: 9px;
  display: grid;
}

.detail-row {
  text-align: left;
  border-bottom: 1px solid #b28e4821;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  display: grid;
}

.detail-icon {
  width: 36px;
  height: 36px;
  color: var(--gold);
  background: #d9c38c2b;
  border: 1px solid #b28e4826;
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.detail-row div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.detail-row small {
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 500;
}

.detail-row strong {
  color: #62594d;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.event-actions {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: 100%;
  margin-top: 14px;
  display: grid;
}

.event-actions a, .event-actions button {
  color: #77633f;
  background: #ffffff8a;
  border: 1px solid #b28e4838;
  border-radius: 14px;
  place-items: center;
  gap: 3px;
  min-height: 43px;
  font-size: 9px;
  text-decoration: none;
  display: grid;
}

.event-actions svg {
  color: var(--gold);
}

.heart-medallion {
  color: #b08a44;
  background: radial-gradient(circle, #fff 0, #f4ecdc 70%);
  border: 1px solid #b28e4859;
  border-radius: 50%;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 16px;
  display: grid;
  box-shadow: 0 9px 24px #68502414;
}

.event-date {
  color: #9a8051;
  font-family: var(--serif);
  letter-spacing: .15em;
  margin: 10px 0 0;
  font-size: 18px;
}

.countdown-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  width: 100%;
  margin-top: 24px;
  display: grid;
}

.count-unit {
  background: #ffffff6b;
  border: 1px solid #b28e482e;
  border-radius: 14px;
  min-width: 0;
  padding: 13px 4px 10px;
}

.count-unit strong {
  color: #695b46;
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: clamp(25px, 8vw, 36px);
  font-weight: 500;
  line-height: 1;
  display: block;
}

.count-unit span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 4px;
  font-size: 8px;
  display: block;
}

.countdown-finished {
  font-family: var(--script);
  color: #8f713a;
  font-size: 40px;
}

.story-nav {
  z-index: 12;
  min-height: 72px;
  padding: 8px 2px calc(4px + env(safe-area-inset-bottom));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: linear-gradient(#f7f3ea00, #f7f3ead6 18%, #f7f3eaf5);
  gap: 10px;
  display: grid;
  position: sticky;
  bottom: 0;
}

.story-nav--stack {
  grid-template-columns: 1fr;
}

.story-nav__meta {
  align-items: center;
  gap: 10px;
  display: flex;
}

.nav-circle {
  color: #756342;
  background: #ffffffc7;
  border: 1px solid #b28e483d;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 50px;
  height: 50px;
  display: grid;
  box-shadow: 0 10px 24px #5f492214;
}

.nav-circle:disabled {
  opacity: .22;
}

.story-dots {
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 14px;
  display: flex;
}

.story-dots span {
  background: #b28e4838;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  transition: all .3s;
}

.story-dots span.done {
  background: #b28e487a;
}

.story-dots span.active {
  background: #ad8843;
  border-radius: 99px;
  width: 18px;
}

.primary-button {
  color: #fff;
  background: linear-gradient(135deg, #987538, #c2a05b 55%, #9f7a3d);
  border: 0;
  border-radius: 999px;
  min-height: 50px;
  padding: 0 20px;
  overflow: hidden;
  box-shadow: 0 12px 28px #7e5b262e;
}

.primary-button > span {
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px #7e5b263b;
}

.primary-button:disabled {
  opacity: .58;
  cursor: wait;
}

.nav-confirm {
  min-width: 132px;
}

.nav-confirm--full {
  letter-spacing: .02em;
  width: 100%;
  min-height: 58px;
  font-size: 15px;
  font-weight: 600;
}

.nav-confirm--pulse {
  animation: 2.5s ease-in-out infinite shinePulse;
}

.wizard-nav__hint {
  color: #9f9078;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-left: auto;
  font-size: 10px;
}

.video-modal {
  z-index: 80;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #26211aa8;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.video-modal-card {
  background: #111;
  border: 1px solid #ffffff61;
  border-radius: 26px;
  width: min(92vw, 390px);
  max-height: 86dvh;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 90px #00000059;
}

.video-modal-card video {
  object-fit: contain;
  background: #111;
  width: 100%;
  max-height: 86dvh;
  display: block;
}

.video-close {
  z-index: 2;
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #0000007a;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
  position: absolute;
  top: 10px;
  right: 10px;
}

.envelope-stage {
  z-index: 100;
  perspective: 1400px;
  background: #f7f3ea;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.envelope-stage:before {
  content: "";
  background: radial-gradient(circle, #0000 0 18%, #b197610d 55%, #7b633a1a 100%);
  position: absolute;
  inset: 0;
}

.envelope-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.envelope-panel {
  will-change: transform;
  background-image: url("/assets/envelope-reference.webp");
  background-repeat: no-repeat;
  background-size: 200% 100%;
  width: 50.15%;
  transition: transform 1.25s cubic-bezier(.68, .02, .2, 1);
  position: absolute;
  top: 0;
  bottom: 0;
}

.envelope-panel--left {
  transform-origin: 0;
  background-position: 0;
  left: 0;
}

.envelope-panel--right {
  transform-origin: 100%;
  background-position: 100%;
  right: 0;
}

.envelope-fold {
  opacity: .16;
  filter: blur(.4px);
  pointer-events: none;
  width: 36%;
  transition: transform 1.15s cubic-bezier(.68, .02, .2, 1), opacity .6s;
  position: absolute;
  inset-block: 13%;
}

.envelope-fold--left {
  background: linear-gradient(100deg, #0000 48%, #75603b73 49%, #0000 51%);
  left: 14%;
}

.envelope-fold--right {
  background: linear-gradient(80deg, #0000 48%, #75603b73 49%, #0000 51%);
  right: 14%;
}

.wax-trigger {
  z-index: 4;
  color: #765d34;
  background: none;
  border: 0;
  place-items: center;
  gap: 14px;
  transition: opacity .5s, transform .55s;
  display: grid;
  position: relative;
}

.wax-seal {
  color: #6e4f1b;
  width: 100px;
  height: 100px;
  font-family: var(--script);
  text-shadow: 0 1px #fff6;
  background: radial-gradient(circle at 30% 25%, #ffedb98c, #0000 24%), radial-gradient(circle at 48% 48%, #d0aa5b 0 53%, #9d762d 78%, #d7b86e 100%);
  border: 6px double #69470f61;
  border-radius: 48% 52% 44% 56% / 52% 45% 55% 48%;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-size: 25px;
  animation: 2.4s ease-in-out infinite sealPulse;
  display: flex;
  box-shadow: 0 10px 24px #4c351442, inset 0 0 12px #ffefbb61;
}

.wax-seal b {
  font-weight: 400;
}

.wax-seal i {
  font-family: var(--serif);
  font-size: .7em;
  font-style: italic;
}

.wax-label {
  color: #6d5b3f;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  letter-spacing: .18em;
  text-transform: uppercase;
  background: #ffffffa3;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 9px;
  font-weight: 500;
}

.intro-copy {
  z-index: 4;
  color: #887557;
  place-items: center;
  transition: opacity .4s;
  display: grid;
  position: absolute;
  bottom: max(7vh, 44px);
}

.intro-copy span {
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 9px;
}

.intro-copy strong {
  font-family: var(--script);
  font-size: 32px;
  font-weight: 400;
}

.envelope-stage.is-opening .envelope-panel--left {
  transform: translateX(-102%) rotateY(8deg);
}

.envelope-stage.is-opening .envelope-panel--right {
  transform: translateX(102%) rotateY(-8deg);
}

.envelope-stage.is-opening .envelope-fold--left {
  opacity: 0;
  transform: translateX(-80%) rotate(-4deg);
}

.envelope-stage.is-opening .envelope-fold--right {
  opacity: 0;
  transform: translateX(80%) rotate(4deg);
}

.envelope-stage.is-opening .wax-trigger {
  opacity: 0;
  transform: scale(.68) rotate(-10deg);
}

.envelope-stage.is-opening .intro-copy {
  opacity: 0;
}

.rsvp-experience .scene-slot {
  place-items: stretch center;
}

.wizard-screen {
  place-items: center;
  width: 100%;
  display: grid;
}

.wizard-card {
  min-height: inherit;
  max-height: inherit;
  justify-content: center;
}

.question-icon {
  width: 54px;
  height: 54px;
  color: var(--gold);
  background: #efe2bf2e;
  border: 1px solid #b28e4847;
  border-radius: 50%;
  place-items: center;
  margin: 0 auto 14px;
  display: grid;
}

.wizard-title {
  color: #5f574d;
  max-width: 30rem;
  font-family: var(--serif);
  margin: 0;
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 500;
  line-height: 1.08;
}

.input-wrap {
  text-align: left;
  gap: 7px;
  width: 100%;
  display: grid;
}

.input-wrap--large {
  margin-top: 28px;
}

.input-wrap span, .field-label {
  color: #7e715f;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 500;
}

.input-wrap input, .main-input, .main-textarea {
  color: #514a41;
  width: 100%;
  font-family: var(--serif);
  background: none;
  border: 0;
  border-bottom: 1px solid #b28e486b;
  border-radius: 0;
  outline: none;
  padding: 12px 2px;
  font-size: 20px;
}

.input-wrap input::placeholder, .main-input::placeholder, .main-textarea::placeholder {
  color: #b9ad9c;
}

.input-wrap input:focus, .main-input:focus, .main-textarea:focus {
  border-bottom-color: #a77f39;
  box-shadow: 0 10px 18px -15px #a77f3973;
}

.choice-stack {
  gap: 10px;
  width: 100%;
  margin-top: 28px;
  display: grid;
}

.choice-card {
  text-align: left;
  color: #675d4f;
  background: #ffffff75;
  border: 1px solid #b28e4830;
  border-radius: 18px;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 74px;
  padding: 11px 14px;
  transition: border-color .2s, background .2s, transform .2s;
  display: grid;
}

.choice-card:hover {
  transform: translateY(-1px);
}

.choice-card.selected {
  background: linear-gradient(135deg, #efe1bd57, #ffffff9e);
  border-color: #b28e48a3;
  box-shadow: 0 8px 24px #694f2412;
}

.choice-symbol {
  color: #a27c39;
  width: 40px;
  height: 40px;
  font-family: var(--serif);
  background: #e2d1a936;
  border-radius: 50%;
  place-items: center;
  font-size: 21px;
  display: grid;
}

.choice-card div {
  gap: 2px;
  display: grid;
}

.choice-card strong {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
}

.choice-card small {
  color: #978a79;
  font-size: 10px;
  line-height: 1.35;
}

.counter-control {
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  gap: 12px;
  margin: 26px 0 12px;
  display: grid;
}

.counter-control button {
  color: #896c3d;
  background: #ffffff94;
  border: 1px solid #b28e4840;
  border-radius: 50%;
  place-items: center;
  width: 52px;
  height: 52px;
  display: grid;
}

.counter-control div {
  place-items: center;
  display: grid;
}

.counter-control strong {
  color: #695a44;
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1;
}

.counter-control span {
  color: #9a8e7c;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 9px;
}

.companions-list {
  gap: 12px;
  width: 100%;
  max-height: 210px;
  margin-top: 12px;
  padding-right: 3px;
  display: grid;
  overflow: auto;
}

.form-stack {
  text-align: left;
  gap: 7px;
  width: 100%;
  margin-top: 28px;
  display: grid;
}

.field-label {
  align-items: center;
  gap: 7px;
  display: flex;
}

.field-label em {
  color: #b1a695;
  margin-left: auto;
  font-size: 8px;
  font-style: normal;
}

.main-textarea {
  resize: vertical;
  min-height: 150px;
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.45;
}

.review-card {
  text-align: left;
  border: 1px solid #b28e482e;
  border-radius: 18px;
  gap: 0;
  width: 100%;
  margin-top: 22px;
  display: grid;
  overflow: hidden;
}

.review-card > div {
  background: #fff6;
  border-bottom: 1px solid #b28e481f;
  gap: 3px;
  padding: 11px 13px;
  display: grid;
}

.review-card > div:last-child {
  border-bottom: 0;
}

.review-card span {
  color: #a1937f;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 500;
}

.review-card strong {
  color: #61584c;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.privacy-copy {
  color: #a19584;
  margin: 12px auto 0;
  font-size: 9px;
  line-height: 1.5;
}

.wizard-error {
  color: #8a5145;
  background: #fff4f0ed;
  border: 1px solid #91503e21;
  border-radius: 999px;
  justify-self: center;
  max-width: 90%;
  margin-top: -8px;
  padding: 8px 12px;
  font-size: 10px;
  box-shadow: 0 8px 22px #693c2e12;
}

.wizard-nav {
  padding-top: 0;
}

.success-scene {
  overflow: hidden;
}

.success-check {
  color: #af8844;
  background: radial-gradient(circle, #fff, #f1e6cc);
  border: 1px solid #b28e4857;
  border-radius: 50%;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-bottom: 16px;
  display: grid;
  box-shadow: 0 12px 30px #7756221a;
}

.confirmation-ticket {
  background: #ffffff73;
  border: 1px dashed #b28e4866;
  border-radius: 16px;
  gap: 2px;
  width: min(100%, 320px);
  margin-top: 24px;
  padding: 15px 18px;
  display: grid;
}

.confirmation-ticket span {
  color: #a19179;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: 8px;
}

.confirmation-ticket strong {
  color: #6e5a39;
  font-family: var(--serif);
  letter-spacing: .11em;
  font-size: 25px;
}

.confirmation-ticket small {
  color: #92846f;
  font-family: var(--serif);
  font-size: 13px;
}

.text-link, .nav-secondary {
  color: #8f713c;
  text-underline-offset: 4px;
  background: none;
  border: 0;
  text-decoration: underline;
}

.text-link {
  margin-top: 20px;
  font-size: 11px;
}

.story-nav--single {
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav-secondary {
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 11px;
  text-decoration: none;
  display: inline-flex;
}

.petals {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.petals i {
  top: -10%;
  left: calc((var(--i) * 6.3%) + 1%);
  width: calc(10px * var(--size, 1));
  height: calc(16px * var(--size, 1));
  opacity: .64;
  filter: blur(.1px) drop-shadow(0 4px 10px #a5803f29);
  transform-origin: center;
  animation: petalFall var(--duration, 8s) linear var(--delay, 0s) infinite;
  background: radial-gradient(circle at 35% 25%, #fffaf1f2, #fffaf173 24%, #0000 28%), linear-gradient(#fff1d9f2, #e2c895b8 58%, #b6924f85);
  border-radius: 65% 35% 70% 30%;
  position: absolute;
}

.petals i:after {
  content: "";
  background: #ffffff75;
  border-radius: 999px;
  width: 1px;
  position: absolute;
  inset: 10% 46% 18% auto;
  transform: rotate(20deg);
}

.petals--global {
  z-index: -1;
  opacity: .82;
  position: fixed;
  inset: 0;
}

.petals--global i:nth-child(4n) {
  background: linear-gradient(#fff7eff2, #decfadad 52%, #aa946c70);
}

.petals--success {
  z-index: 3;
}

@keyframes sealPulse {
  0%, 100% {
    transform: scale(1) rotate(-1deg);
  }

  50% {
    transform: scale(1.035) rotate(1deg);
  }
}

@keyframes petalFall {
  0% {
    transform: translate3d(0,-14%,0) rotate(0deg) scale(var(--size, 1));
    opacity: 0;
  }

  10% {
    opacity: .74;
  }

  45% {
    transform: translate3d(calc(var(--drift, 24px) * .45), 40dvh, 0) rotate(120deg) scale(calc(var(--size, 1) * .98));
  }

  100% {
    transform: translate3d(var(--drift, 24px), 112dvh, 0) rotate(315deg) scale(calc(var(--size, 1) * .92));
    opacity: 0;
  }
}

@keyframes shinePulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 12px 28px #7e5b262e, 0 0 #d9c38c2e;
  }

  50% {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px #7e5b2640, 0 0 0 8px #d9c38c00;
  }
}

@keyframes floatDecor {
  0% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }

  50% {
    transform: translate3d(0, -8px, 0) rotate(0);
  }

  100% {
    transform: translate3d(0, 5px, 0) rotate(2deg);
  }
}

@keyframes goldTwinkle {
  0%, 100% {
    opacity: 1;
    filter: saturate();
  }

  50% {
    opacity: .82;
    filter: saturate(1.18);
  }
}

@media (min-width: 560px) {
  .experience {
    width: min(100%, 620px);
    padding-inline: 18px;
  }

  .screen-card {
    border-radius: 34px;
    min-height: calc(100dvh - 168px);
    max-height: calc(100dvh - 168px);
  }

  .details-scene {
    padding-inline: 40px;
  }

  .detail-row strong {
    font-size: 17px;
  }

  .event-actions a, .event-actions button {
    font-size: 10px;
  }

  .decor--top {
    top: -9vw;
    left: -8vw;
  }

  .decor--bottom {
    bottom: -10vw;
    right: -8vw;
  }
}

@media (min-width: 860px) {
  .app-shell {
    place-items: center;
    display: grid;
  }

  .experience {
    width: min(100%, 720px);
  }

  .screen-card {
    min-height: min(76dvh, 780px);
    max-height: min(76dvh, 780px);
  }

  .decor--top {
    width: 420px;
    top: -130px;
    left: -110px;
  }

  .decor--bottom {
    width: 430px;
    bottom: -130px;
    right: -100px;
  }

  .envelope-card {
    border-radius: 24px;
    inset: 4vh max(50vw - 325px, 20px);
    box-shadow: 0 30px 90px #56432424;
  }

  .envelope-panel {
    top: 0;
    bottom: 0;
  }
}

@media (max-height: 720px) {
  .screen-card {
    justify-content: flex-start;
    min-height: 0;
    max-height: calc(100dvh - 166px);
  }

  .welcome-scene, .countdown-scene, .invitation-scene, .success-scene, .wizard-card {
    justify-content: flex-start;
  }

  .floral-crown {
    height: 95px;
  }

  .rings-wrap {
    height: 130px;
  }

  .script-title--hero {
    font-size: 58px;
  }

  .parents-title {
    font-size: 40px;
  }

  .portrait-shell {
    width: 115px;
    height: 115px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

html, body, #root {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

body {
  overscroll-behavior: none;
  min-height: 100dvh;
}

.app-shell, .app-stage {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.experience {
  width: min(100%, 540px);
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(6px, 1.15dvh, 11px);
  display: grid;
  overflow: hidden;
}

.progress-wrap {
  flex: none;
  padding: 2px 4px 0;
}

.scene-slot {
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.scene-slot > * {
  min-height: 0;
  max-height: 100%;
}

.screen-card, .wizard-card {
  overscroll-behavior: none;
  scrollbar-width: none;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: clamp(16px, 3.1dvh, 34px) clamp(17px, 5.2vw, 34px);
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.screen-card::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.wizard-card::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.screen-card--compact, .details-scene {
  justify-content: center;
  padding-top: clamp(13px, 2.1dvh, 24px);
  padding-bottom: clamp(13px, 2.1dvh, 24px);
}

.story-nav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: none;
  min-height: 0;
  max-height: none;
  padding: clamp(5px, .9dvh, 9px) 2px 0;
  position: relative;
  bottom: auto;
}

.story-nav--stack {
  gap: clamp(6px, 1dvh, 10px);
}

.story-nav__meta {
  min-height: 44px;
}

.nav-circle {
  width: clamp(44px, 6.2dvh, 50px);
  height: clamp(44px, 6.2dvh, 50px);
}

.nav-confirm--full {
  border-radius: 999px;
  width: 100%;
  min-height: clamp(54px, 7.2dvh, 62px);
  font-size: clamp(14px, 4vw, 16px);
  font-weight: 600;
}

.floral-crown {
  width: min(74%, 310px);
  height: clamp(74px, 13.2dvh, 118px);
  margin-top: clamp(-18px, -2dvh, -8px);
  margin-bottom: clamp(-10px, -1dvh, -4px);
}

.script-title {
  font-size: clamp(40px, 8.4dvh, 68px);
  line-height: .94;
}

.script-title--hero {
  font-size: clamp(52px, 10.9dvh, 84px);
}

.soft-copy {
  margin-top: clamp(7px, 1.3dvh, 14px);
  font-size: clamp(14px, 2.35dvh, 19px);
  line-height: 1.38;
}

.soft-copy.small {
  font-size: clamp(13px, 2dvh, 16px);
}

.gold-divider {
  margin-top: clamp(8px, 1.45dvh, 16px);
  margin-bottom: clamp(5px, .9dvh, 10px);
}

.memory-button {
  min-height: 42px;
  margin-top: clamp(10px, 1.8dvh, 20px);
}

.rings-wrap {
  width: min(68%, 300px);
  height: clamp(105px, 18dvh, 170px);
  margin-top: clamp(-12px, -1.5dvh, -4px);
  margin-bottom: clamp(-10px, -1dvh, -3px);
}

.names {
  margin-top: clamp(4px, .8dvh, 9px);
}

.names strong {
  font-size: clamp(34px, 7.2dvh, 56px);
}

.names span {
  font-size: clamp(24px, 4.2dvh, 33px);
}

.portrait-shell {
  width: clamp(96px, 16dvh, 138px);
  height: clamp(96px, 16dvh, 138px);
}

.parents-title {
  margin-top: clamp(7px, 1.3dvh, 14px);
  font-size: clamp(36px, 7.2dvh, 56px);
}

.parents-grid {
  gap: clamp(10px, 3vw, 20px);
  margin-top: clamp(5px, 1dvh, 10px);
}

.parents-grid strong {
  font-size: clamp(21px, 4.3dvh, 31px);
  line-height: 1.08;
}

.invitation-scene:before {
  inset: clamp(13px, 2.1dvh, 22px);
}

.tiny-flower {
  margin-bottom: clamp(5px, 1dvh, 10px);
}

.invitation-title {
  font-size: clamp(36px, 7.3dvh, 58px);
}

.mini-rings-css {
  width: 82px;
  height: 39px;
  margin-top: clamp(5px, 1dvh, 10px);
  margin-bottom: 0;
  transform: scale(.88);
}

.invite-names strong {
  font-size: clamp(28px, 5.3dvh, 42px);
}

.rings-mini-image {
  width: clamp(64px, 10dvh, 88px);
  height: clamp(45px, 7.4dvh, 60px);
}

.details-title {
  font-size: clamp(35px, 6.6dvh, 52px);
}

.detail-list {
  gap: clamp(2px, .45dvh, 7px);
  margin-top: clamp(3px, .65dvh, 8px);
}

.detail-row {
  grid-template-columns: clamp(34px, 5.2dvh, 40px) 1fr;
  gap: 8px;
  padding: clamp(4px, .7dvh, 8px) 7px;
}

.detail-icon {
  width: clamp(31px, 4.8dvh, 36px);
  height: clamp(31px, 4.8dvh, 36px);
}

.detail-row strong {
  font-size: clamp(12px, 1.9dvh, 15px);
  line-height: 1.15;
}

.event-actions {
  gap: 5px;
  margin-top: clamp(5px, .8dvh, 11px);
}

.event-actions a, .event-actions button {
  border-radius: 12px;
  min-height: clamp(36px, 5.3dvh, 42px);
  font-size: 8px;
}

.heart-medallion {
  width: clamp(54px, 8.5dvh, 66px);
  height: clamp(54px, 8.5dvh, 66px);
  margin-bottom: clamp(7px, 1.2dvh, 14px);
}

.event-date {
  margin-top: clamp(4px, .7dvh, 8px);
}

.countdown-grid {
  gap: 5px;
  margin-top: clamp(12px, 2dvh, 21px);
}

.count-unit {
  padding: clamp(8px, 1.2dvh, 12px) 3px clamp(7px, 1dvh, 10px);
}

.count-unit strong {
  font-size: clamp(22px, 4.8dvh, 33px);
}

.countdown-copy {
  margin-top: clamp(8px, 1.3dvh, 15px);
}

.question-icon {
  width: clamp(44px, 6.4dvh, 52px);
  height: clamp(44px, 6.4dvh, 52px);
  margin-bottom: clamp(7px, 1.2dvh, 13px);
}

.wizard-title {
  font-size: clamp(24px, 4.7dvh, 36px);
  line-height: 1.02;
}

.input-wrap--large, .choice-stack, .form-stack {
  margin-top: clamp(13px, 2.2dvh, 24px);
}

.choice-stack {
  gap: clamp(6px, 1dvh, 10px);
}

.choice-card {
  min-height: clamp(61px, 9dvh, 72px);
  padding: 8px 12px;
}

.choice-card strong {
  font-size: clamp(16px, 2.7dvh, 19px);
}

.counter-control {
  margin: clamp(10px, 1.7dvh, 20px) 0 8px;
}

.counter-control button {
  width: clamp(44px, 6.4dvh, 52px);
  height: clamp(44px, 6.4dvh, 52px);
}

.counter-control strong {
  font-size: clamp(34px, 5.8dvh, 42px);
}

.companions-list {
  gap: 8px;
  max-height: clamp(100px, 18dvh, 175px);
}

.main-textarea {
  min-height: clamp(92px, 16dvh, 130px);
  margin-top: clamp(12px, 2dvh, 22px);
}

.review-card {
  margin-top: clamp(10px, 1.8dvh, 19px);
}

.review-card > div {
  padding: clamp(7px, 1dvh, 10px) 11px;
}

.privacy-copy {
  margin-top: 7px;
  font-size: 8px;
  line-height: 1.32;
}

.confirmation-ticket {
  margin-top: clamp(12px, 2dvh, 21px);
  padding: 12px 16px;
}

@media (max-height: 760px) {
  .experience {
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    gap: 5px;
  }

  .progress-meta {
    margin-bottom: 4px;
    font-size: 8px;
  }

  .screen-card, .wizard-card {
    padding: 13px 16px;
  }

  .script-title--hero {
    font-size: clamp(48px, 10dvh, 68px);
  }

  .soft-copy {
    font-size: clamp(13px, 2.15dvh, 16px);
  }

  .floral-crown {
    height: clamp(62px, 11dvh, 84px);
  }

  .rings-wrap {
    height: clamp(88px, 15dvh, 122px);
  }

  .portrait-shell {
    width: 92px;
    height: 92px;
  }

  .parents-title {
    font-size: clamp(32px, 6.3dvh, 43px);
  }

  .parents-grid strong {
    font-size: clamp(19px, 3.8dvh, 25px);
  }

  .detail-row {
    padding-block: 3px;
  }

  .event-actions a, .event-actions button {
    min-height: 34px;
  }

  .story-nav__meta {
    min-height: 39px;
  }

  .nav-circle {
    width: 42px;
    height: 42px;
  }

  .nav-confirm--full {
    min-height: 51px;
  }
}

@media (max-height: 620px) {
  .kicker {
    margin-bottom: 4px;
    font-size: 8px;
  }

  .gold-divider {
    margin: 5px auto 3px;
  }

  .soft-copy {
    margin-top: 5px;
    line-height: 1.26;
  }

  .memory-button {
    min-height: 38px;
    margin-top: 7px;
  }

  .floral-crown {
    height: 52px;
  }

  .rings-wrap {
    height: 78px;
  }

  .portrait-shell {
    width: 78px;
    height: 78px;
  }

  .parents-title {
    margin-top: 4px;
  }

  .detail-icon {
    width: 28px;
    height: 28px;
  }

  .detail-row {
    grid-template-columns: 30px 1fr;
  }

  .event-actions a, .event-actions button {
    min-height: 31px;
  }

  .choice-card {
    min-height: 54px;
  }

  .main-textarea {
    min-height: 75px;
  }
}

@media (min-width: 560px) {
  .experience {
    width: min(100%, 620px);
    padding-inline: 18px;
  }
}

@media (min-width: 860px) {
  .experience {
    width: min(100%, 720px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-confirm--pulse, .decor, .gold-speckles, .petals i {
    animation: none !important;
  }
}

.screen-card > * {
  z-index: 1;
  position: relative;
}

.couple-scene:before {
  content: "";
  aspect-ratio: 1;
  z-index: 0;
  opacity: .075;
  background: url("/assets/decor/mandala-gold.png") center / contain no-repeat;
  width: min(54vw, 330px);
  animation: 10s ease-in-out infinite mandalaBreath;
  position: absolute;
  top: -9%;
  right: -15%;
}

.invitation-scene {
  background-image: linear-gradient(#ffffffd6, #fffc), url("/assets/decor/frame-gold.png"), url("/assets/paper.webp");
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-size: cover, calc(100% - 16px) calc(100% - 16px), cover;
}

.countdown-scene:after {
  content: "";
  aspect-ratio: 1;
  opacity: .13;
  z-index: 0;
  background: url("/assets/decor/balloons-gold.png") center / contain no-repeat;
  width: min(34vw, 170px);
  animation: 7s ease-in-out infinite balloonFloat;
  position: absolute;
  bottom: -5%;
  right: -7%;
}

.petals i {
  filter: drop-shadow(0 4px 8px #85533b1f);
  opacity: .58;
  background: url("/assets/decor/petal-pink.png") center / contain no-repeat !important;
}

@keyframes mandalaBreath {
  0%, 100% {
    transform: rotate(-4deg) scale(.97);
  }

  50% {
    transform: rotate(2deg) scale(1.035);
  }
}

@keyframes balloonFloat {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

.portrait-shell--large {
  border-width: 2px;
  width: clamp(150px, 25dvh, 230px);
  height: clamp(150px, 25dvh, 230px);
  box-shadow: 0 18px 42px #5c401926, 0 0 0 7px #ffffff8c;
}

.portrait-shell--parents {
  width: clamp(118px, 19dvh, 175px);
  height: clamp(118px, 19dvh, 175px);
}

.rings-wrap--invite {
  height: clamp(80px, 13dvh, 130px);
  margin: 3px auto -5px;
}

.venue-scene {
  justify-content: center !important;
}

.venue-title {
  font-size: clamp(39px, 7dvh, 58px);
}

.venue-copy {
  margin-top: 4px;
}

.venue-gallery-wrap {
  width: 100%;
  min-height: 0;
  margin-top: clamp(8px, 1.2dvh, 14px);
}

.venue-gallery {
  gap: clamp(7px, 1dvh, 11px);
  width: 100%;
  display: grid;
}

.venue-photo-shell {
  background: #e9e2d5;
  border: 1px solid #b28e4866;
  border-radius: 22px;
  width: 100%;
  height: clamp(260px, 43dvh, 430px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 36px #4b381d21;
}

.venue-photo-shell > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.venue-photo-vignette {
  pointer-events: none;
  background: linear-gradient(#0000 58%, #251d1247);
  position: absolute;
  inset: 0;
}

.venue-expand, .venue-arrow {
  z-index: 4;
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #2d251b73;
  border: 1px solid #ffffff6b;
  place-items: center;
  display: grid;
  position: absolute;
}

.venue-expand {
  border-radius: 50%;
  width: 38px;
  height: 38px;
  top: 10px;
  right: 10px;
}

.venue-arrow {
  border-radius: 999px;
  width: 36px;
  height: 48px;
  top: 50%;
  transform: translateY(-50%);
}

.venue-arrow--left {
  left: 8px;
}

.venue-arrow--right {
  right: 8px;
}

.venue-counter {
  z-index: 4;
  color: #fff;
  letter-spacing: .16em;
  text-shadow: 0 1px 5px #00000080;
  font-size: 10px;
  position: absolute;
  bottom: 10px;
  left: 12px;
}

.venue-thumbs {
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  display: grid;
}

.venue-thumbs button {
  opacity: .62;
  background: none;
  border: 1px solid #0000;
  border-radius: 9px;
  height: clamp(34px, 5.2dvh, 52px);
  padding: 0;
  overflow: hidden;
}

.venue-thumbs button.active {
  opacity: 1;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px #b28e481f;
}

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

.gallery-modal {
  z-index: 120;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #1b1712e0;
  place-items: center;
  padding: 18px;
  display: grid;
  position: fixed;
  inset: 0;
}

.gallery-modal > img {
  object-fit: contain;
  border-radius: 18px;
  max-width: min(94vw, 900px);
  max-height: 90dvh;
  box-shadow: 0 30px 90px #00000073;
}

.gallery-modal-close, .gallery-modal-arrow {
  z-index: 2;
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #ffffff24;
  border: 0;
  place-items: center;
  display: grid;
  position: absolute;
}

.gallery-modal-close {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  top: 18px;
  right: 18px;
}

.gallery-modal-arrow {
  border-radius: 999px;
  width: 46px;
  height: 58px;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-modal-arrow--left {
  left: 12px;
}

.gallery-modal-arrow--right {
  right: 12px;
}

.success-scene--photo {
  padding-top: clamp(12px, 2dvh, 22px);
}

.thanks-photo {
  border: 1px solid #c9a5588c;
  border-radius: 24px;
  width: min(100%, 390px);
  height: clamp(235px, 39dvh, 390px);
  margin-bottom: clamp(8px, 1.2dvh, 14px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px #432f192e;
}

.thanks-photo img {
  object-fit: cover;
  object-position: center 43%;
  width: 100%;
  height: 100%;
  display: block;
}

.thanks-photo:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(#0000 48%, #1d1812ad);
  position: absolute;
  inset: 0;
}

.thanks-photo-overlay {
  z-index: 2;
  text-align: center;
  color: #fff7e8;
  text-shadow: 0 2px 10px #0006;
  display: grid;
  position: absolute;
  inset: auto 18px 16px;
}

.thanks-photo-overlay span {
  font-family: var(--script);
  font-size: clamp(40px, 7dvh, 62px);
  line-height: 1;
}

.thanks-photo-overlay small {
  font-family: var(--serif);
  letter-spacing: .04em;
  font-size: 14px;
}

.success-scene--photo .success-check {
  z-index: 4;
  width: 48px;
  height: 48px;
  margin: 0;
  position: absolute;
  top: clamp(220px, 37dvh, 370px);
  right: 24px;
}

.success-title {
  font-size: clamp(36px, 6dvh, 54px);
}

.success-links {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  display: flex;
}

.success-links .text-link {
  margin-top: 0;
}

.confirmation-modal {
  z-index: 140;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #2a23199e;
  place-items: center;
  padding: 14px;
  display: grid;
  position: fixed;
  inset: 0;
}

.confirmation-modal-card {
  text-align: center;
  background: linear-gradient(#ffffffe8, #fffcf6f0), url("/assets/paper.webp") center / cover;
  border: 1px solid #c4a0556b;
  border-radius: 28px;
  width: min(100%, 460px);
  max-height: 92dvh;
  padding: 28px 22px 22px;
  position: relative;
  overflow: auto;
  box-shadow: 0 30px 90px #2019114d;
}

.confirmation-modal-card:before {
  content: "";
  pointer-events: none;
  border: 1px solid #b78f4038;
  border-radius: 21px;
  position: absolute;
  inset: 9px;
}

.confirmation-modal-close {
  z-index: 3;
  color: #7e6842;
  background: #f8f1e2db;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
  position: absolute;
  top: 12px;
  right: 12px;
}

.confirmation-modal-icon {
  color: #a47c36;
  background: #f4ead2;
  border: 1px solid #b28e4852;
  border-radius: 50%;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  display: grid;
}

.confirmation-modal-title {
  font-size: clamp(42px, 11vw, 58px);
}

.confirmation-details {
  text-align: left;
  border: 1px solid #b28e482e;
  border-radius: 17px;
  margin: 18px 0 0;
  display: grid;
  overflow: hidden;
}

.confirmation-details > div {
  background: #ffffff6b;
  border-bottom: 1px solid #b28e481f;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 9px 12px;
  display: grid;
}

.confirmation-details > div:last-child {
  border-bottom: 0;
}

.confirmation-details dt {
  color: #9c8a70;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 9px;
}

.confirmation-details dd {
  color: #5e5548;
  font-family: var(--serif);
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.confirmation-code {
  letter-spacing: .06em;
  color: #8e6c32 !important;
}

.confirmation-modal-actions {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0 10px;
  display: grid;
}

.confirmation-modal-actions button {
  color: #79623d;
  background: #ffffffa8;
  border: 1px solid #b28e4842;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  display: inline-flex;
}

.modal-primary {
  width: 100%;
}

body.admin-body, body.admin-body #root {
  background: #f5f2ec;
  height: auto;
  min-height: 100dvh;
  overflow: auto !important;
}

.admin-login {
  background: radial-gradient(circle at top, #fff, #efe8db);
  place-items: center;
  min-height: 100dvh;
  padding: 20px;
  display: grid;
}

.admin-login section {
  background: #fffefa;
  border: 1px solid #dfcfaa;
  border-radius: 26px;
  width: min(100%, 430px);
  padding: 34px;
  box-shadow: 0 24px 70px #4336201f;
}

.admin-login h1 {
  font-family: var(--serif);
  margin: 2px 0 10px;
  font-size: 34px;
  font-weight: 600;
}

.admin-login p {
  color: #776d60;
  line-height: 1.5;
}

.admin-login input {
  background: #fff;
  border: 1px solid #dcc99f;
  border-radius: 12px;
  width: 100%;
  min-height: 48px;
  margin: 10px 0;
  padding: 0 13px;
}

.admin-login button {
  color: #fff;
  background: #9b783c;
  border: 0;
  border-radius: 12px;
  width: 100%;
  min-height: 48px;
}

.admin-shell {
  color: #312f2b;
  background: #f5f2ec;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(18px, 3vw, 38px);
  overflow: auto;
}

.admin-shell > header {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: auto;
  display: flex;
}

.admin-shell > header h1 {
  font-family: var(--serif);
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
}

.admin-shell > header button, .admin-toolbar button {
  color: #604e31;
  background: #fff;
  border: 1px solid #d8c59a;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
}

.admin-error {
  color: #874738;
  background: #fff2ee;
  border: 1px solid #e3b5a9;
  border-radius: 12px;
  max-width: 1400px;
  margin: 16px auto 0;
  padding: 12px 15px;
}

.admin-stats {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1400px;
  margin: 22px auto;
  display: grid;
}

.admin-stats article {
  background: #fff;
  border: 1px solid #e1d5bd;
  border-radius: 18px;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 10px;
  padding: 18px;
  display: grid;
  box-shadow: 0 8px 25px #362e210b;
}

.admin-stats article svg {
  color: #9a7539;
  grid-row: 1 / span 3;
}

.admin-stats article span, .admin-stats article small {
  color: #81786c;
  font-size: 11px;
}

.admin-stats article strong {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
}

.admin-table-card {
  background: #fff;
  border: 1px solid #e1d5bd;
  border-radius: 20px;
  max-width: 1400px;
  margin: auto;
  overflow: hidden;
}

.admin-toolbar {
  border-bottom: 1px solid #eee6d6;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 13px;
  display: flex;
}

.admin-toolbar label {
  border: 1px solid #ddd1b8;
  border-radius: 11px;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 420px);
  min-height: 42px;
  padding: 0 11px;
  display: flex;
}

.admin-toolbar input {
  background: none;
  border: 0;
  outline: none;
  width: 100%;
}

.admin-toolbar select {
  color: #5b5144;
  background: #fff;
  border: 1px solid #ddd1b8;
  border-radius: 11px;
  min-height: 42px;
  padding: 0 10px;
}

.admin-table-wrap {
  overflow: auto;
}

.admin-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 820px;
}

.admin-table-wrap th, .admin-table-wrap td {
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #eee8dc;
  padding: 12px 14px;
  font-size: 13px;
}

.admin-table-wrap th {
  color: #786d5e;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #fcfaf6;
  font-size: 10px;
}

.admin-table-wrap td:first-child {
  gap: 2px;
  display: grid;
}

.admin-table-wrap td:first-child small {
  color: #9e927f;
  font-size: 10px;
}

.admin-badge {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.admin-badge.yes {
  color: #41643f;
  background: #eaf4e7;
}

.admin-badge.no {
  color: #7f4d45;
  background: #f9eae6;
}

.icon-button {
  color: #7c6135;
  background: #fff;
  border: 1px solid #e2d5ba;
  border-radius: 9px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.admin-empty {
  color: #8c8170;
  text-align: center !important;
  padding: 30px !important;
}

.admin-modal {
  z-index: 160;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  background: #1e1b1694;
  place-items: center;
  padding: 18px;
  display: grid;
  position: fixed;
  inset: 0;
}

.admin-modal article {
  background: #fff;
  border-radius: 22px;
  width: min(100%, 600px);
  max-height: 88dvh;
  padding: 28px;
  position: relative;
  overflow: auto;
  box-shadow: 0 30px 90px #00000040;
}

.admin-modal h2 {
  font-family: var(--serif);
  margin: 3px 0 18px;
  font-size: 34px;
}

.admin-modal-close {
  background: #f4f0e8;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
  position: absolute;
  top: 12px;
  right: 12px;
}

.admin-modal dl {
  border: 1px solid #eee5d4;
  border-radius: 14px;
  margin: 0;
  display: grid;
  overflow: hidden;
}

.admin-modal dl > div {
  border-bottom: 1px solid #eee5d4;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 10px 12px;
  display: grid;
}

.admin-modal dl > div:last-child {
  border-bottom: 0;
}

.admin-modal dt {
  color: #8a7c69;
  font-size: 11px;
}

.admin-modal dd {
  overflow-wrap: anywhere;
  margin: 0;
}

@media (max-width: 760px) {
  .admin-stats {
    grid-template-columns: 1fr 1fr;
  }

  .admin-toolbar {
    align-items: stretch;
  }

  .admin-toolbar label, .admin-toolbar select, .admin-toolbar button {
    width: 100%;
  }
}

@media (max-height: 760px) {
  .portrait-shell--large {
    width: 124px;
    height: 124px;
  }

  .portrait-shell--parents {
    width: 92px;
    height: 92px;
  }

  .venue-photo-shell {
    height: clamp(210px, 36dvh, 300px);
  }

  .venue-thumbs button {
    height: 31px;
  }

  .thanks-photo {
    height: clamp(180px, 31dvh, 250px);
  }

  .success-scene--photo .success-check {
    top: clamp(165px, 29dvh, 230px);
  }
}

.welcome-scene {
  background-image: linear-gradient(#ffffffe0, #fffdf8d6), url("/assets/floral-top.webp"), url("/assets/paper.webp");
  background-position: center, 50% -52px, center;
  background-repeat: no-repeat;
  background-size: cover, min(108%, 640px), cover;
  justify-content: flex-start !important;
  padding-top: clamp(12px, 1.8dvh, 18px) !important;
  padding-bottom: clamp(14px, 2.1dvh, 22px) !important;
}

.welcome-scene .floral-crown {
  display: none !important;
}

.welcome-couple-shell {
  background: #ffffffe6;
  border: 2px solid #c4a055b8;
  border-radius: 50%;
  width: clamp(190px, 27dvh, 248px);
  height: clamp(190px, 27dvh, 248px);
  margin: 0 auto 8px;
  padding: 6px;
  box-shadow: 0 20px 48px #5c401929, 0 0 0 8px #ffffff8f;
}

.welcome-couple-shell img {
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.welcome-scene .kicker {
  margin-bottom: 7px;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.welcome-scene .script-title--hero {
  line-height: .9;
  font-size: clamp(56px, 9.2dvh, 82px) !important;
}

.welcome-scene .gold-divider {
  margin: 10px auto 8px;
}

.welcome-scene .soft-copy {
  max-width: 29rem;
  margin-top: 0;
  font-size: clamp(15px, 2.05dvh, 18px);
  line-height: 1.4;
}

.welcome-scene .memory-button {
  background: #fffdf8d1;
  min-height: 48px;
  margin-top: 12px;
  padding-inline: 24px;
}

.couple-scene {
  justify-content: flex-start !important;
  padding-top: clamp(16px, 2.2dvh, 26px) !important;
}

.portrait-shell--large {
  border-width: 2px;
  padding: 6px;
  box-shadow: 0 20px 48px #5c401929, 0 0 0 8px #ffffff8f;
  width: clamp(184px, 26dvh, 244px) !important;
  height: clamp(184px, 26dvh, 244px) !important;
}

.couple-scene .kicker {
  margin-top: 10px;
}

.parents-scene {
  justify-content: flex-start !important;
  padding-top: clamp(14px, 1.9dvh, 22px) !important;
  padding-bottom: clamp(14px, 2dvh, 22px) !important;
}

.portrait-shell--parents {
  padding: 5px;
  box-shadow: 0 16px 38px #5c401921, 0 0 0 6px #ffffff7a;
  width: clamp(164px, 23dvh, 210px) !important;
  height: clamp(164px, 23dvh, 210px) !important;
}

.parents-scene .parents-title {
  line-height: .98;
  margin-top: 9px !important;
  font-size: clamp(39px, 6.8dvh, 58px) !important;
}

.parents-scene .gold-divider {
  margin-top: 7px;
  margin-bottom: 7px;
}

.parents-scene .parents-grid {
  gap: clamp(11px, 2.7vw, 20px);
  margin-top: 0 !important;
}

.parents-scene .parents-grid strong {
  font-size: clamp(24px, 3.9dvh, 34px);
  line-height: 1.1;
}

.rsvp-experience .scene-slot, .wizard-screen, .wizard-card {
  min-height: 0 !important;
  overflow: hidden !important;
}

.wizard-card {
  align-content: center;
  justify-content: center !important;
}

.guest-next-copy {
  max-width: 28rem;
  margin-top: 9px !important;
}

.companions-list {
  max-height: none !important;
  overflow: visible !important;
}

.review-card {
  background: #b28e481f;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}

.review-card > div {
  background: #ffffffb8;
  min-width: 0;
  border-bottom: 0 !important;
  padding: 7px 9px !important;
}

.review-card strong {
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px !important;
  line-height: 1.18 !important;
}

.petals--global {
  z-index: 130 !important;
  opacity: .92 !important;
  pointer-events: none !important;
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
}

.petals--global i {
  opacity: .56 !important;
  filter: drop-shadow(0 5px 10px #85533b29) !important;
}

.petals--global i:nth-child(3n) {
  opacity: .38 !important;
}

.video-modal {
  z-index: 160 !important;
}

.gallery-modal {
  z-index: 165 !important;
}

.confirmation-modal {
  z-index: 170 !important;
}

.envelope-stage {
  z-index: 100 !important;
}

@media (max-height: 760px) {
  .welcome-scene {
    background-position: center, 50% -62px, center;
    padding-top: 9px !important;
    padding-bottom: 10px !important;
  }

  .welcome-couple-shell {
    width: clamp(138px, 21dvh, 170px);
    height: clamp(138px, 21dvh, 170px);
    margin-bottom: 6px;
  }

  .welcome-scene .script-title--hero {
    font-size: clamp(48px, 7.5dvh, 64px) !important;
  }

  .welcome-scene .soft-copy {
    font-size: clamp(13px, 1.85dvh, 15px);
  }

  .welcome-scene .memory-button {
    min-height: 42px;
    margin-top: 8px;
  }

  .portrait-shell--large {
    width: clamp(138px, 20dvh, 168px) !important;
    height: clamp(138px, 20dvh, 168px) !important;
  }

  .portrait-shell--parents {
    width: clamp(124px, 18dvh, 150px) !important;
    height: clamp(124px, 18dvh, 150px) !important;
  }

  .parents-scene .parents-title {
    font-size: clamp(33px, 5.4dvh, 43px) !important;
  }

  .review-card strong {
    -webkit-line-clamp: 1;
  }
}

@media (max-width: 360px) {
  .review-card > div {
    padding-inline: 7px !important;
  }

  .review-card strong {
    font-size: 11px !important;
  }
}