:root {
  --maroon: #9d1d27;
  --maroon-deep: #5a0f16;
  --gold: #c9a46a;
  --gold-soft: #e9d3a3;
  --cream: #fbf5ea;
  --paper: #f6efe2;
  --ink: #1b2a55;
  --text: #2b1c1a;
  --muted: #6d5a55;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --hand: "Caveat", "Segoe Script", cursive;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --stage-ar: 1.7684; /* generated scene images are 2688×1520 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: #14040a; color: var(--text); font-family: var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; user-select: none; -webkit-user-drag: none; }
[hidden] { display: none !important; }

/* ================= Chrome ================= */
.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(16px, 4vw, 48px);
  pointer-events: none; color: var(--cream); transition: color .6s var(--ease);
}
body[data-tone="light"] .chrome, body[data-tone="end"] .chrome { color: var(--maroon); }
.brand { display: block; pointer-events: auto; line-height: 0; }
.brand img { height: clamp(32px, 3.2vw, 42px); width: auto; }
.brand .logo-std { display: none; }
body[data-tone="light"] .brand .logo-rev, body[data-tone="end"] .brand .logo-rev { display: none; }
body[data-tone="light"] .brand .logo-std, body[data-tone="end"] .brand .logo-std { display: block; }

.progress { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.progress ol { display: flex; gap: 5px; list-style: none; }
.progress li { width: 28px; height: 3px; border-radius: 2px; background: currentColor; opacity: .22; transition: opacity .5s, width .5s var(--ease); }
.progress li.is-done { opacity: .6; }
.progress li.is-active { opacity: 1; width: 48px; }
.progress-label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }

/* ================= Scenes ================= */
main { position: fixed; inset: 0; }
.scene { position: absolute; inset: 0; overflow: hidden; visibility: hidden; opacity: 0; }
.scene.is-active { visibility: visible; opacity: 1; }
.scene[data-tone="dark"] {
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(157,29,39,.55), transparent 70%),
    radial-gradient(ellipse at 50% 120%, #3b0a12, #14040a 70%);
}
.scene[data-tone="light"] {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, #fffdf8, transparent 70%),
    radial-gradient(ellipse at 50% 100%, #f1e4cf, var(--cream) 70%);
}
.scene[data-tone="light"]::before { /* soft paper grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(115deg, rgba(157,29,39,.018) 0 2px, transparent 2px 7px);
}
.dust { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; mix-blend-mode: screen; opacity: 0; transition: opacity .8s; }
body[data-tone="dark"] .dust { opacity: 1; }

.inner {
  position: relative; z-index: 2;
  height: 100%; margin: 0 auto; width: min(760px, calc(100vw - 32px));
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 88px 0 32px; overflow-y: auto; scrollbar-width: none;
}
/* flex spacers: centre when content fits, top-align + scroll when it doesn't (works with hidden children) */
.inner::before { content: ""; margin-top: auto; }
.inner::after { content: ""; margin-bottom: auto; }
.inner::-webkit-scrollbar { display: none; }
.inner.center { align-items: center; text-align: center; }
.wide-inner { width: min(1080px, calc(100vw - 32px)); align-items: center; text-align: center; }
.center-row { display: flex; justify-content: center; margin-top: 28px; }

/* ================= Type ================= */
.num { font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
[data-tone="light"] .num { color: var(--maroon); opacity: .75; }
.num.light { color: var(--gold-soft); }
.kicker { font: 600 clamp(13px, 1.1vw, 15px)/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 10px; }
.kicker.maroon { color: var(--maroon); }
.kicker.gold { color: var(--gold); }
.headline {
  font: 600 clamp(34px, 5vw, 64px)/1.04 var(--serif); letter-spacing: .01em; text-transform: uppercase;
  color: var(--cream); text-wrap: balance;
}
.headline.xl { font-size: clamp(48px, 8vw, 104px); }
.headline.sm { font-size: clamp(26px, 3.2vw, 40px); }
[data-tone="light"] .headline { color: var(--maroon-deep); }
.headline.light { color: var(--cream); text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.lede { margin-top: 16px; font: 500 clamp(18px, 1.7vw, 22px)/1.45 var(--serif); color: rgba(251,245,234,.92); text-wrap: balance; }
.lede.soft { opacity: .75; }
[data-tone="light"] .lede { color: var(--text); }
.lede.light { color: var(--cream); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.gold-text { background: linear-gradient(180deg, #f6e3b5, #c9a46a 70%, #a8804a); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
.display { font: 500 clamp(34px, 5vw, 64px)/1.08 var(--serif); color: var(--cream); text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.sub { margin-top: 14px; font-size: clamp(14px, 1.2vw, 16px); color: rgba(251,245,234,.82); letter-spacing: .02em; }
.eyebrow { font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--maroon); }
.rule { display: block; width: 44px; height: 1.5px; background: var(--maroon); margin: 18px auto; }
.rule.left { margin-left: 0; }
.welcome-line { margin-top: 18px; font: 500 clamp(22px, 2.2vw, 28px)/1.3 var(--hand); color: var(--gold-soft); font-size: clamp(26px, 2.6vw, 34px); }
[data-tone="light"] .welcome-line { color: var(--maroon); }

/* ================= Buttons ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 28px; padding: 16px 28px; border-radius: 3px;
  font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s, background .25s, opacity .25s;
}
.btn-primary { background: var(--maroon); color: #fff; box-shadow: 0 10px 30px -10px rgba(157,29,39,.8); }
.btn-primary:hover { background: #b0222e; transform: translateY(-2px); }
.btn-gold { background: linear-gradient(180deg, #ecd6a4, #c9a46a); color: #3a0a10; box-shadow: 0 10px 30px -12px rgba(201,164,106,.8); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(201,164,106,.9); }
.btn-ghost { color: var(--cream); box-shadow: inset 0 0 0 1px rgba(251,245,234,.55); }
.btn-ghost:hover { background: rgba(251,245,234,.1); }
.btn-link { color: var(--maroon); padding: 14px 10px; letter-spacing: .12em; margin-top: 14px; opacity: .8; }
[data-tone="dark"] .btn-link { color: var(--gold-soft); }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.actions .btn { margin-top: 18px; }
.actions.left { justify-content: flex-start; }

/* ================= 01 Welcome ================= */
.glow-orb { position: absolute; left: 50%; top: 42%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(233,211,163,.18), transparent 65%); filter: blur(10px); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; transform: translate(-50%, -50%) scale(1.08); } }
.triad { list-style: none; margin-top: 18px; display: flex; gap: clamp(10px, 2vw, 28px); flex-wrap: wrap; justify-content: center; }
.triad li { font: italic 500 clamp(18px, 1.8vw, 22px) var(--serif); color: var(--gold-soft); padding: 8px 16px; border: 1px solid rgba(233,211,163,.25); border-radius: 999px; }
.ask-name, .ask-dob { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 10px 0 20px; }
.ask-name label, .ask-dob label { font: 500 clamp(22px, 2.4vw, 30px) var(--serif); color: var(--cream); }
.ask-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.ask-row .btn { margin-top: 0; }
.ask-row input, .ask-row select, .other-dream input {
  font: 500 28px/1.2 var(--hand); color: var(--cream); background: rgba(255,255,255,.06);
  border: 1px solid rgba(233,211,163,.35); border-radius: 3px; padding: 8px 14px; min-width: 220px; outline: none;
}
.ask-row select { font: 500 18px var(--sans); min-width: 0; color-scheme: dark; }

/* ================= 02 Cookie (fixed-aspect stage keeps the cookie glued to the pedestal) ================= */
.stage { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100vh * var(--stage-ar))); width: max(100vw, calc(100dvh * var(--stage-ar))); aspect-ratio: 2688 / 1520; }
.stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg { position: absolute; inset: -2%; background-size: cover; background-position: center; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 55%, transparent 40%, rgba(20,3,5,.65) 100%), linear-gradient(to bottom, rgba(20,3,5,.6), transparent 38%); }
.cookie-copy { position: absolute; left: 0; right: 0; top: clamp(80px, 11vh, 120px); text-align: center; padding: 0 16px; z-index: 3; }
.cookie-copy .num { margin-bottom: 14px; }
.spot { position: absolute; left: 50%; top: 40%; width: 30%; height: 34%; transform: translateX(-50%); background: radial-gradient(closest-side at 50% 60%, rgba(255,200,140,.28), transparent); pointer-events: none; }
.cookie { position: absolute; left: 50%; top: 31.5%; width: 20%; aspect-ratio: 1; z-index: 2; -webkit-tap-highlight-color: transparent; }
.cookie img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 18px 18px rgba(40,5,5,.55)); }
.cookie-cracked { opacity: 0; }
.cookie-glow { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,140,.55), transparent 70%); filter: blur(18px); opacity: .6; animation: glow 2.8s ease-in-out infinite; }
@keyframes glow { 50% { opacity: 1; transform: scale(1.15); } }
.tap-hint { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--cream); font-size: clamp(12px, .95vw, 14px); letter-spacing: .08em; text-shadow: 0 1px 8px rgba(0,0,0,.6); pointer-events: none; z-index: 3; white-space: nowrap; }
.tap-hint svg { animation: tap 1.6s ease-in-out infinite; }
@keyframes tap { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(5px) scale(.94); } }
.crumbs { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.crumb { position: absolute; border-radius: 40% 55% 45% 50%; background: radial-gradient(circle at 35% 30%, #f3c77c, #c98a3c 70%); }
.slip { position: absolute; left: 50%; top: 50%; z-index: 4; width: min(460px, 78vw); padding: 22px 26px; background: linear-gradient(180deg, #fffdf7, #f4ecdc); box-shadow: 0 20px 40px -12px rgba(0,0,0,.55); font: 500 clamp(17px, 1.6vw, 22px)/1.35 var(--serif); color: #2a211d; text-align: center; opacity: 0; }
.fortune-card { position: absolute; left: 50%; top: 50%; z-index: 5; width: min(560px, calc(100vw - 32px)); padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 48px) clamp(28px, 4vw, 40px);
  background: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.9), transparent 60%), linear-gradient(180deg, #fffaf0, #f3e9d6);
  text-align: center; border-radius: 2px; box-shadow: 0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(201,164,106,.35) inset; opacity: 0; visibility: hidden; }
.fortune-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(157,29,39,.18); pointer-events: none; }
.fortune-text { margin-top: 18px; font: 500 clamp(24px, 2.6vw, 34px)/1.25 var(--serif); color: #241a17; }
/* "Tap anywhere to continue" — appears once the fortune card has landed */
.tap-next { position: absolute; left: 50%; bottom: max(28px, 6vh); transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  color: var(--cream); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  background: rgba(20,4,6,.35); box-shadow: inset 0 0 0 1px rgba(251,245,234,.25); backdrop-filter: blur(4px);
  pointer-events: none; opacity: 0; visibility: hidden; }
.tap-next svg { animation: tap 1.6s ease-in-out infinite; }
.tap-next .chev { font-style: normal; font-size: 20px; line-height: 1; animation: nudgeR 1.6s ease-in-out infinite; }
@keyframes nudgeR { 50% { transform: translateX(4px); opacity: .6; } }
#s-cookie.card-ready { cursor: pointer; }
#s-cookie.card-ready .fortune-card .btn-primary { animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(157,29,39,.55), 0 10px 30px -10px rgba(157,29,39,.8); } 70%, 100% { box-shadow: 0 0 0 14px rgba(157,29,39,0), 0 10px 30px -10px rgba(157,29,39,.8); } }
.fortune-foot { font: italic 500 18px/1.4 var(--serif); color: var(--muted); }

/* ================= 03 Family ================= */
.crowd { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.counter { margin-top: 10px; font: 700 clamp(56px, 11vw, 150px)/1 var(--serif); color: var(--maroon); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.counter-label { font: 600 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.one-more { display: flex; flex-direction: column; align-items: center; margin-top: 28px; visibility: hidden; }
.one-more .lede { margin-top: 0; }
.plus-you { margin-top: 10px; font: 700 clamp(44px, 6vw, 76px)/1 var(--serif); color: #fff; background: var(--maroon); padding: 10px 26px 14px; border-radius: 999px; box-shadow: 0 20px 50px -18px rgba(157,29,39,.9); }

/* ================= 04 Sound ================= */
.sound-stage { position: relative; margin-top: 28px; width: min(640px, 100%); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.letters { display: flex; gap: clamp(4px, 1vw, 10px); flex-wrap: wrap; justify-content: center; }
.letters span { font: 600 clamp(34px, 5vw, 60px)/1 var(--serif); color: rgba(233,211,163,.25); text-transform: uppercase; transition: color .25s, transform .25s, text-shadow .25s; display: inline-block; min-width: .3em; }
.letters span.on { color: var(--gold-soft); transform: translateY(-8px) scale(1.12); text-shadow: 0 0 24px rgba(233,211,163,.8); }
.wave { width: 100%; height: 90px; }
.play { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #ecd6a4, #c9a46a); color: #3a0a10; box-shadow: 0 0 0 10px rgba(233,211,163,.12), 0 0 0 22px rgba(233,211,163,.06); transition: transform .25s; }
.play:hover { transform: scale(1.06); }
.play.big { width: 88px; height: 88px; background: rgba(255,255,255,.92); color: var(--maroon); }
.play .i-replay { display: none; }
.play.played .i-play { display: none; }
.play.played .i-replay { display: block; }
.play.playing { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 16px rgba(233,211,163,.18), 0 0 0 34px rgba(233,211,163,.06); } }
.after-sound, .after-video, .after-stars, .after-persona, .after-summary, .after-progress, .after-future { display: flex; flex-direction: column; align-items: center; margin-top: 26px; visibility: hidden; }
.after-sound .kicker, .after-stars .kicker { margin-bottom: 0; }

/* ================= 05 Video ================= */
.video-frame { position: relative; margin-top: 28px; width: min(720px, 100%); aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #1a0508; box-shadow: 0 30px 70px -30px rgba(90,15,22,.8); }
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(ellipse at 30% 20%, rgba(233,211,163,.25), transparent 60%), linear-gradient(135deg, #a3222c, #5a0f16); background-size: cover; background-position: center; }
.video-caption { color: var(--cream); font: 500 16px var(--serif); letter-spacing: .04em; opacity: .9; padding: 0 16px; }
.after-video { margin-top: 18px; }
.after-video .lede { margin-top: 0; }

/* ================= 06 Stars ================= */
.stars-bg { background-image: url(assets/stars.jpg), radial-gradient(ellipse at 50% 110%, #4a0d18, #0d0a24 70%); opacity: .95; }
.zodiac { display: flex; flex-direction: column; align-items: center; margin-top: 18px; visibility: hidden; }
.zodiac .lede { margin-top: 0; }
.z-glyph { font: 400 clamp(76px, 10vw, 120px)/1 "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", serif; margin: 8px 0 0;
  background: linear-gradient(180deg, #fbeccb, #c9a46a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(233,211,163,.45)); }
.z-name { font: 600 clamp(38px, 5vw, 58px)/1 var(--serif); text-transform: uppercase; letter-spacing: .12em; color: var(--cream); }
.z-dates { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }
.z-text { margin-top: 14px; max-width: 520px; font: 500 20px/1.45 var(--serif); color: rgba(251,245,234,.9); }
.traits { list-style: none; display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.traits li { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(233,211,163,.4); color: var(--gold-soft); }
[data-tone="light"] .traits li { border-color: rgba(157,29,39,.3); color: var(--maroon); }
.after-stars .headline { margin-top: 6px; }

/* ================= 07 Quiz ================= */
.quiz { align-items: stretch; text-align: left; width: min(680px, calc(100vw - 32px)); }
.q-head { display: flex; align-items: center; gap: 16px; }
.q-count { font: 600 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--maroon); white-space: nowrap; }
.q-bar { flex: 1; height: 3px; background: rgba(157,29,39,.15); border-radius: 2px; overflow: hidden; }
.q-bar i { display: block; height: 100%; width: 0; background: var(--maroon); transition: width .6s var(--ease); }
.q-lead { margin-top: 28px; font: italic 500 20px var(--serif); color: var(--muted); min-height: 1.3em; }
.q-text { margin-top: 8px; font: 600 clamp(28px, 3.6vw, 44px)/1.12 var(--serif); color: var(--maroon-deep); text-wrap: balance; }
.q-options { margin-top: 26px; display: grid; gap: 12px; }
.q-opt { display: flex; align-items: center; gap: 16px; text-align: left; padding: 16px 18px; border-radius: 6px; background: #fff;
  box-shadow: 0 0 0 1px rgba(157,29,39,.14), 0 8px 24px -18px rgba(90,15,22,.5); font: 500 16px/1.35 var(--sans); color: var(--text);
  transition: transform .2s var(--ease), box-shadow .2s, background .2s, color .2s; }
.q-opt:hover { transform: translateX(4px); box-shadow: 0 0 0 1.5px var(--maroon), 0 10px 24px -16px rgba(90,15,22,.6); }
.q-opt b { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--sans); color: var(--maroon); background: rgba(157,29,39,.08); transition: background .2s, color .2s; }
.q-opt.picked { background: var(--maroon); color: #fff; }
.q-opt.picked b { background: #fff; color: var(--maroon); }

/* ================= 08 Persona ================= */
.deck { position: relative; margin-top: 24px; width: min(460px, 100%); height: 360px; perspective: 1400px; }
.pcard { position: absolute; inset: 0; border-radius: 10px; padding: 34px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.9), transparent 60%), linear-gradient(180deg, #fffaf0, #f1e5cf);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.8), inset 0 0 0 1px rgba(201,164,106,.5); color: var(--text); backface-visibility: hidden; }
.pcard::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(157,29,39,.18); border-radius: 6px; pointer-events: none; }
.pcard .p-icon { width: 54px; height: 54px; color: var(--maroon); }
.pcard .p-name { margin-top: 12px; font: 700 clamp(26px, 3vw, 34px)/1.05 var(--serif); text-transform: uppercase; color: var(--maroon); letter-spacing: .04em; }
.pcard .p-hook { margin-top: 12px; font: 600 12px/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.pcard .p-body { margin-top: 10px; font: 500 18px/1.4 var(--serif); color: var(--text); }
.pcard .traits { margin-top: 14px; }
.pcard .traits li { border-color: rgba(157,29,39,.3); color: var(--maroon); }
.pcard.back { background: linear-gradient(135deg, #a3222c, #5a0f16); box-shadow: 0 30px 60px -25px rgba(0,0,0,.8), inset 0 0 0 1px rgba(233,211,163,.5); }
.pcard.back::before { border-color: rgba(233,211,163,.35); }
.pcard.back .p-name { color: var(--gold-soft); font-size: 22px; }
.pcard.back .p-icon { color: var(--gold-soft); }
.pcard .p-extra { display: none; }
.pcard.chosen .p-extra { display: block; }

/* ================= 09 Dream ================= */
.veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25,8,6,.55), rgba(25,8,6,.35) 40%, rgba(25,8,6,.6)); }
.veil.soft { background: radial-gradient(ellipse at center, rgba(25,8,6,.1), rgba(25,8,6,.6)); }
.dream-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: min(760px, 100%); }
.dream-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 10px; border-radius: 8px;
  background: rgba(251,245,234,.94); color: var(--maroon-deep); box-shadow: 0 16px 40px -20px rgba(0,0,0,.8);
  font: 600 14px/1.2 var(--sans); letter-spacing: .04em; transition: transform .25s var(--ease), background .25s, color .25s; }
.dream-tile svg { width: 36px; height: 36px; color: var(--maroon); transition: color .25s; }
.dream-tile:hover { transform: translateY(-4px); }
.dream-tile.picked { background: var(--maroon); color: #fff; transform: translateY(-4px) scale(1.03); }
.dream-tile.picked svg { color: var(--gold-soft); }
.other-dream { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.other-dream .btn { margin-top: 0; }

/* ================= 10 Amount ================= */
.amount-card { margin-top: 24px; width: min(620px, 100%); padding: 28px clamp(18px, 4vw, 36px) 24px; border-radius: 8px; background: rgba(251,245,234,.96); box-shadow: 0 30px 70px -30px rgba(0,0,0,.85); }
.amt-big { display: flex; align-items: baseline; justify-content: center; gap: 8px; color: var(--maroon-deep); font: 700 clamp(46px, 7vw, 84px)/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.amt-big span { font-size: .6em; color: var(--maroon); }
.amt-words { margin-top: 8px; font: 500 24px/1.2 var(--hand); color: var(--muted); min-height: 1.2em; }
.amt-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.amt-chips button, .years button { padding: 8px 14px; border-radius: 999px; font: 600 13px var(--sans); background: #fff; color: var(--maroon-deep); box-shadow: inset 0 0 0 1px rgba(157,29,39,.2); transition: background .2s, color .2s; }
.amt-chips button.on, .years button.on { background: var(--maroon); color: #fff; box-shadow: none; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin-top: 16px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--maroon) var(--p, 50%), rgba(157,29,39,.18) var(--p, 50%)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(157,29,39,.18); }
input[type=range]::-moz-range-progress { height: 4px; background: var(--maroon); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #fff; border: 2px solid var(--maroon); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--maroon); }
.when { display: flex; flex-direction: column; align-items: center; margin-top: 26px; visibility: hidden; width: 100%; }
.when .headline { font-size: clamp(26px, 3.2vw, 40px); }
.years { display: flex; gap: 8px; margin-top: 14px; max-width: min(720px, 100%); overflow-x: auto; padding: 6px 4px 10px; scrollbar-width: thin; scroll-snap-type: x mandatory; }
.years button { flex: none; scroll-snap-align: center; background: rgba(251,245,234,.94); font-size: 15px; padding: 10px 16px; }

/* ================= 11 Summary ================= */
.stack { position: relative; margin-top: 30px; width: min(520px, 100%); display: flex; flex-direction: column; border-radius: 10px; }
.tile { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 26px; background: rgba(251,245,234,.97); box-shadow: 0 20px 50px -24px rgba(0,0,0,.9); }
.tile + .tile { border-top: 1px dashed rgba(157,29,39,.25); }
.tile:first-child { border-radius: 10px 10px 0 0; }
.tile:last-child { border-radius: 0 0 10px 10px; }
.t-label { font: 600 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.tile b { font: 700 clamp(24px, 3vw, 34px)/1.1 var(--serif); color: var(--maroon-deep); text-align: right; }
.after-summary .lede { margin-top: 0; }

/* ================= 12 Cheque ================= */
.cheque-head { position: absolute; top: 84px; left: 0; right: 0; text-align: center; z-index: 3; }
.cheque-stage { position: absolute; left: 50%; top: 45%; width: min(880px, 94vw); z-index: 2; }
.printer { position: relative; z-index: 3; margin: 0 -3%; height: clamp(26px, 4vw, 40px); border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #7a1219, #4a0b11); box-shadow: 0 14px 30px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.15); }
.printer-slot { position: absolute; left: 3%; right: 3%; bottom: 5px; height: 4px; border-radius: 2px; background: #1c0306; box-shadow: inset 0 1px 2px rgba(0,0,0,.9); }
.printer-light { position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-radius: 50%; background: #4a2a10; }
.printer-light.on { background: #ffd48a; box-shadow: 0 0 10px #ffc15a; }
.paper-window { position: relative; margin-top: -6px; clip-path: inset(0 -60px -120px -60px); }
.cheque {
  position: relative; width: 100%; aspect-ratio: 2.15; container-type: inline-size;
  background: radial-gradient(ellipse at 15% 10%, #fffdf8, transparent 55%), linear-gradient(180deg, #fbf6ec, #f1e8d6);
  border-radius: 0 0 3px 3px; overflow: hidden;
  box-shadow: 0 30px 50px -22px rgba(0,0,0,.75);
  padding: 2.4cqw 4cqw 3.4cqw;
  display: flex; flex-direction: column; justify-content: space-between; color: var(--ink);
}
.cheque::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-radial-gradient(circle at 80% 120%, transparent 0 6px, rgba(157,29,39,.035) 6px 7px), repeating-linear-gradient(-30deg, transparent 0 9px, rgba(201,164,106,.05) 9px 10px); }
.cheque::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .5cqw; background: linear-gradient(90deg, var(--maroon), var(--gold), var(--maroon)); }
.cheque-sky { position: absolute; left: 8%; right: 8%; bottom: 12%; height: 50%; background: center bottom / contain no-repeat; opacity: .32; pointer-events: none; }
.cheque > *:not(.cheque-sky):not(.stamp):not(.cq-micr) { position: relative; }
.cq-top { display: flex; justify-content: space-between; align-items: center; }
.cq-logo { height: 4.2cqw; width: auto; border-radius: .3cqw; }
.cq-title { font: 700 2.2cqw var(--serif); letter-spacing: .35em; text-transform: uppercase; color: var(--maroon); }
.cq-date { display: flex; align-items: center; gap: 1cqw; font-size: 1.3cqw; color: var(--muted); }
.cq-date b { font: 500 1.9cqw var(--sans); letter-spacing: .4cqw; color: var(--ink); display: flex; gap: .6cqw; }
.cq-date b i { font-style: normal; border: .1cqw solid rgba(27,42,85,.35); padding: .2cqw .6cqw; min-width: 3.2cqw; text-align: center; }
.cq-line { display: flex; align-items: flex-end; gap: 1.4cqw; border-bottom: .12cqw solid rgba(27,42,85,.35); padding-bottom: .4cqw; min-height: 3.8cqw; }
.cq-line label, .cq-sign label { font-size: 1.3cqw; color: var(--muted); white-space: nowrap; padding-bottom: .5cqw; }
.ink { font: 500 3.2cqw/1.1 var(--hand); color: var(--ink); white-space: nowrap; clip-path: inset(-40% 100% -40% 0); display: inline-block; padding-right: 1.2cqw; }
.cq-pay .ink { font-size: 4cqw; }
.cq-grid { display: flex; gap: 3cqw; align-items: flex-end; }
.cq-grid .cq-line { flex: 1; min-width: 0; }
.cq-amt { display: flex; align-items: center; gap: 1cqw; border: .15cqw solid rgba(27,42,85,.5); padding: .8cqw 1.6cqw; min-width: 24cqw; font: 500 2.6cqw var(--sans); background: rgba(255,255,255,.55); }
.cq-amt b { font-weight: 600; letter-spacing: .05em; opacity: 0; }
.cq-row2 { display: flex; gap: 4cqw; }
.cq-row2 .cq-for { flex: 1.6; }
.cq-row2 .cq-target { flex: 1; }
.cq-bottom { display: flex; justify-content: space-between; gap: 4cqw; }
.cq-sign { flex: 1; display: flex; align-items: flex-end; gap: 1.4cqw; border-bottom: .12cqw solid rgba(27,42,85,.35); padding-bottom: .3cqw; }
.cq-sign .sig { font: 700 3.3cqw/1.15 var(--hand); }
.cq-micr { position: absolute; left: 4cqw; bottom: .8cqw; font: 500 1.2cqw monospace; letter-spacing: .3cqw; color: rgba(27,42,85,.4); }
.stamp { position: absolute; right: 4cqw; top: 24%; font: 700 1.5cqw var(--sans); letter-spacing: .25em; text-transform: uppercase;
  color: rgba(157,29,39,.8); border: .25cqw double rgba(157,29,39,.7); padding: .8cqw 1.4cqw; transform: rotate(-9deg) scale(2.2); opacity: 0; }
.pen { position: absolute; left: 0; top: 0; width: min(150px, 17vw); z-index: 6; pointer-events: none; transform-origin: 0 50%; opacity: 0; filter: drop-shadow(4px 10px 6px rgba(0,0,0,.35)); }
.cheque-after { position: absolute; left: 0; right: 0; bottom: clamp(18px, 4vh, 48px); z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; opacity: 0; visibility: hidden; }
.cheque-after .lede { margin-top: 6px; }
.fine { margin-top: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,245,234,.55); }
.cheque.exporting { background: #f8f2e6; box-shadow: none; }
.cheque.exporting::before { display: none; }
.cheque.exporting .stamp { border-style: solid; }

/* ================= 13 Moves ================= */
.moves { margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: 100%; text-align: left; }
.move { position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(157,29,39,.12), 0 18px 40px -26px rgba(90,15,22,.6); transition: transform .3s var(--ease), background .3s; }
.move .m-num { font: 700 34px/1 var(--serif); color: rgba(157,29,39,.25); }
.move h3 { margin-top: 12px; font: 700 18px/1.2 var(--serif); text-transform: uppercase; letter-spacing: .04em; color: var(--maroon-deep); }
.move p { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); flex: 1; }
.move .btn { margin-top: 16px; padding: 12px 14px; font-size: 11px; width: 100%; }
.move.done { background: #fbf5ea; }
.move.done .btn { background: #2f7a4b; box-shadow: none; }
.move .check { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; background: #2f7a4b; color: #fff; display: grid; place-items: center; transform: scale(0); transition: transform .35s var(--ease); }
.move.done .check { transform: scale(1); }

/* ================= 14 Timeline ================= */
.timeline { list-style: none; margin-top: 30px; text-align: left; position: relative; padding-left: 4px; }
.timeline::before { content: ""; position: absolute; left: 18px; top: 18px; bottom: 18px; width: 2px; background: rgba(157,29,39,.15); }
.timeline .fill { position: absolute; left: 18px; top: 18px; width: 2px; height: 0; background: var(--maroon); }
.timeline li { position: relative; display: flex; align-items: center; gap: 18px; padding: 10px 0; font: 600 clamp(19px, 2vw, 24px)/1.2 var(--serif); color: var(--maroon-deep); }
.timeline li .dot { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 2px rgba(157,29,39,.25); display: grid; place-items: center; color: #fff; font: 700 14px var(--sans); transition: background .3s, box-shadow .3s; z-index: 1; }
.timeline li.ok .dot { background: var(--maroon); box-shadow: none; }
.timeline li.now .dot { background: var(--cream); box-shadow: inset 0 0 0 2px var(--maroon); }
.timeline li.now .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--maroon); animation: blink 1.4s ease-in-out infinite; }
.timeline li small { display: block; font: 500 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
@keyframes blink { 50% { opacity: .3; } }

/* ================= 15 Envelope ================= */
.envelope { position: relative; margin-top: 34px; width: min(460px, 86vw); aspect-ratio: 1.6; perspective: 1200px; }
.env-back, .env-front, .env-flap { position: absolute; left: 0; right: 0; }
.env-back { inset: 0; border-radius: 6px; background: linear-gradient(180deg, #6e1119, #4a0b11); }
.env-front { inset: 0; border-radius: 6px; z-index: 3; pointer-events: none;
  background: linear-gradient(160deg, #94202a, #6e1119); clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); }
.envelope { filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.env-flap { top: 0; height: 60%; z-index: 4; transform-origin: top center; background: linear-gradient(180deg, #a3222c, #7a1520);
  clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; }
.env-seal { position: absolute; left: 50%; top: 58%; z-index: 5; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #f3dcaa, #c9a46a 60%, #9c7a45); box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.env-seal img { width: 62%; filter: brightness(0) saturate(100%) invert(12%) sepia(40%) saturate(4000%) hue-rotate(340deg); }
.letter { position: absolute; left: 6%; right: 6%; top: 8%; height: 88%; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;
  padding: 24px 26px; text-align: left; border-radius: 3px; background: linear-gradient(180deg, #fffdf6, #f3ead8); box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); color: var(--ink); }
.letter-to { font: 500 22px var(--hand); color: var(--muted); }
.letter-msg { font: 700 clamp(24px, 3vw, 32px)/1.2 var(--hand); color: var(--ink); }
.letter-from { font: 500 20px var(--hand); color: var(--maroon); align-self: flex-end; }
.env-hint { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); white-space: nowrap; animation: blink 1.8s ease-in-out infinite; }

/* ================= 16 Offer ================= */
.offer { position: relative; margin-top: 30px; width: min(520px, 100%); padding: 42px clamp(22px, 4vw, 40px) 34px; border-radius: 10px; text-align: center; overflow: hidden;
  background: radial-gradient(ellipse at 100% 0%, rgba(233,211,163,.35), transparent 55%), linear-gradient(160deg, #a3222c, #5a0f16); color: var(--cream); box-shadow: 0 40px 80px -30px rgba(90,15,22,.9); }
.ribbon { position: absolute; top: 18px; right: -46px; transform: rotate(35deg); background: linear-gradient(180deg, #ecd6a4, #c9a46a); color: #3a0a10; font: 700 10px var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 7px 50px; }
.offer-for { font: 600 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); opacity: .85; }
.offer-tag { margin-top: 18px; display: inline-block; font: 700 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(233,211,163,.5); color: var(--gold-soft); }
.offer-title { margin-top: 14px; font: 600 clamp(28px, 3.4vw, 38px)/1.1 var(--serif); }
.offer-body { margin-top: 10px; font: 500 18px/1.45 var(--serif); opacity: .9; }
.offer .btn-primary { background: var(--cream); color: var(--maroon); }

/* ================= 17 Products ================= */
.products { margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: 100%; }
.product { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 24px 20px; border-radius: 8px; text-decoration: none; color: inherit;
  background: #fff; box-shadow: 0 0 0 1px rgba(157,29,39,.12), 0 18px 40px -26px rgba(90,15,22,.6); transition: transform .3s var(--ease), box-shadow .3s; }
.product:hover { transform: translateY(-5px); box-shadow: 0 0 0 1.5px var(--maroon), 0 24px 40px -24px rgba(90,15,22,.7); }
.product svg { width: 34px; height: 34px; color: var(--maroon); }
.product h3 { margin-top: 14px; font: 700 20px/1.1 var(--serif); text-transform: uppercase; letter-spacing: .06em; color: var(--maroon-deep); }
.product p { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); flex: 1; }
.product span { margin-top: 14px; font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--maroon); }

/* ================= 18 Reward ================= */
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.gift-stage { position: relative; margin-top: 16px; width: min(320px, 70vw); aspect-ratio: 1; }
.gift, .choc { position: absolute; inset: 0; width: 100%; height: 100%; }
.gift img, .choc { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0,0,0,.6)); }
.choc { opacity: 0; pointer-events: none; }
.gift-hint { bottom: -10px; }
.rays { position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.2); opacity: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(233,211,163,.28) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); mask: radial-gradient(circle, #000 20%, transparent 65%); }
.reward { display: flex; flex-direction: column; align-items: center; margin-top: 10px; visibility: hidden; }
.reward .lede { margin-top: 0; }
.coupon { position: relative; margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 34px; border-radius: 8px; background: var(--cream); color: var(--maroon-deep);
  -webkit-mask: radial-gradient(circle 10px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 10px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.coupon-tag { font: 700 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--maroon); }
.coupon-code { font: 700 28px var(--sans); letter-spacing: .18em; color: var(--maroon-deep); border: 1.5px dashed rgba(157,29,39,.45); padding: 6px 16px; border-radius: 4px; }
.coupon-code::after { content: " ⧉"; font-size: 16px; opacity: .6; }
.coupon-note { font-size: 11px; color: var(--muted); }

/* ================= 19 End ================= */
.scene-end { background: var(--cream); }
.door-glow { position: absolute; left: 53%; top: 2%; width: 24%; height: 80%; background: radial-gradient(ellipse at 70% 50%, rgba(255,210,120,.55), transparent 60%); mix-blend-mode: screen; pointer-events: none; animation: glowpulse 5s ease-in-out infinite; }
@keyframes glowpulse { 50% { opacity: .5; } }
.end-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(251,245,234,.95) 0%, rgba(251,245,234,.82) 36%, transparent 56%); pointer-events: none; }
.end-copy { position: absolute; left: clamp(16px, 7vw, 120px); top: 50%; transform: translateY(-50%); width: min(560px, calc(100vw - 32px)); z-index: 2; }
.end-copy .num { color: var(--maroon); opacity: .75; margin-bottom: 16px; }
.end-came { font: 500 clamp(18px, 1.6vw, 21px)/1.45 var(--serif); color: var(--text); }
.end-came b { color: var(--maroon); }
.recap { list-style: none; display: grid; gap: 4px; margin-top: 12px; font-size: clamp(14px, 1.1vw, 16px); color: var(--text); }
.recap li::before { content: "✓  "; color: var(--maroon); font-weight: 700; }
.recap span { color: var(--maroon); }
.and-now { margin-top: 18px; font: italic 500 20px var(--serif); color: var(--muted); }
.end-title { margin-top: 4px; font: 700 clamp(32px, 4vw, 54px)/1.02 var(--serif); color: var(--maroon); text-transform: uppercase; letter-spacing: .02em; }
.end-copy .rule { margin: 18px 0; }
.end-welcome { font: 600 clamp(18px, 1.7vw, 22px) var(--serif); color: var(--maroon-deep); text-transform: uppercase; letter-spacing: .08em; }
.script-note { position: absolute; left: 79%; top: 28%; z-index: 2; font: 500 clamp(22px, 2.2vw, 32px)/1.25 var(--hand); color: #fff8ec; transform: rotate(-8deg); text-shadow: 0 2px 12px rgba(90,15,22,.7); pointer-events: none; }

/* ================= Responsive ================= */
@media (max-width: 900px) {
  .moves, .products { grid-template-columns: repeat(2, 1fr); }
  .dream-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .progress li { width: 16px; }
  .progress li.is-active { width: 28px; }
  .inner { padding-top: 84px; }
  .cookie { width: 15%; top: 40%; }
  .tap-hint { top: 67.5%; }
  .dream-grid { grid-template-columns: repeat(2, 1fr); }
  .dream-tile { padding: 16px 8px; flex-direction: row; justify-content: flex-start; padding-left: 14px; }
  .dream-tile svg { width: 26px; height: 26px; }
  .moves, .products { grid-template-columns: 1fr; gap: 10px; }
  .move { padding: 16px 16px; }
  .move .m-num { font-size: 22px; }
  .move h3 { margin-top: 4px; }
  .product { padding: 16px; }
  .deck { height: 380px; }
  .cheque-stage { top: 42%; width: calc(100vw - 20px); }
  .cheque-head { top: 78px; }
  .scene-end .stage { left: 18%; }
  .end-fade { background: linear-gradient(180deg, rgba(251,245,234,.97) 0%, rgba(251,245,234,.93) 62%, rgba(251,245,234,.3) 85%, transparent); }
  .end-copy { top: 76px; transform: none; }
  .script-note { display: none; }
  .triad { flex-direction: column; align-items: center; gap: 6px; }
  .ask-row input { min-width: 0; width: 100%; }
}

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