:root{--bg:#050506;--panel:#0d0d11;--panel2:#14141a;--text:#f7f7f8;--muted:#a7a4ae;--line:#29262f;--lilac:#d8b4fe;--pink:#f5c2e7;--green:#b7e4c7}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 10%,rgba(216,180,254,.09),transparent 28%),radial-gradient(circle at 85% 88%,rgba(245,194,231,.07),transparent 30%),var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif}
.app{width:min(100%,620px);margin:auto;padding:18px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:4px 3px 14px}.brand{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#cbc6d2}.lang{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:#0b0b0e}.lang button{border:0;background:transparent;color:var(--muted);padding:8px 11px;border-radius:999px;font-weight:800}.lang button.active{background:linear-gradient(135deg,var(--lilac),var(--pink));color:#080809}
.card{position:relative;overflow:hidden;min-height:760px;border-radius:32px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(16,16,20,.97),rgba(8,8,10,.995));box-shadow:0 28px 90px rgba(0,0,0,.56)}.progress{height:4px;background:#1b1a20}.progress>div{height:100%;background:linear-gradient(90deg,var(--lilac),var(--pink));transition:.35s}
.screen{display:none;padding:44px 34px 38px;min-height:730px}.screen.active{display:block;animation:in .45s ease}@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.center{text-align:center}.eyebrow{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#c7becc;margin-bottom:18px}h1,h2{margin:0;line-height:1.06;letter-spacing:-.04em}h1{font-size:50px}h2{font-size:37px}p{color:var(--muted);line-height:1.72;font-size:16px;margin:18px 0 0}
.hero{width:78px;height:78px;margin:28px auto 30px;border-radius:28px;display:grid;place-items:center;font-size:42px;background:linear-gradient(135deg,rgba(216,180,254,.14),rgba(245,194,231,.08));border:1px solid rgba(216,180,254,.24);animation:float 3s ease-in-out infinite}@keyframes float{50%{transform:translateY(-7px)}}.typewriter{min-height:205px;max-width:460px;margin:0 auto;font-size:21px;line-height:1.72;font-weight:560;letter-spacing:-.015em;color:#f1eef4}.actions{display:flex;gap:10px;margin-top:30px}.btn{border:0;border-radius:17px;padding:15px 19px;font-size:15px;font-weight:850;cursor:pointer}.primary{flex:1;background:linear-gradient(135deg,var(--lilac),var(--pink));color:#080809}.secondary{background:#18181e;color:#ddd9e2;border:1px solid var(--line)}.ghost{background:transparent;color:#c9c4ce;border:1px solid var(--line)}
.timeline,.choices{display:grid;gap:12px;margin-top:28px}.tl,.choice{border:1px solid var(--line);background:#101015;border-radius:19px;padding:17px}.tl{display:grid;grid-template-columns:42px 1fr;gap:14px;text-align:left}.num{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--lilac),var(--pink));color:#080809;font-weight:900}.tl small{display:block;color:var(--muted);margin-top:6px;line-height:1.5}.choice{width:100%;color:var(--text);text-align:left;font-size:15px;cursor:pointer}.choice.selected{border-color:var(--lilac);background:linear-gradient(135deg,rgba(216,180,254,.16),rgba(245,194,231,.09))}
.gift{width:120px;height:95px;margin:35px auto;position:relative;cursor:pointer}.box{position:absolute;left:8px;right:8px;bottom:0;height:65px;border-radius:12px;background:#18181f;border:1px solid #403a49}.lid{position:absolute;left:0;right:0;top:10px;height:25px;border-radius:10px;background:#232129;border:1px solid #4d4554;transition:.45s}.gift.open .lid{transform:translateY(-26px) rotate(-8deg)}.ribbon{position:absolute;left:50%;top:0;bottom:0;width:12px;transform:translateX(-50%);background:linear-gradient(var(--lilac),var(--pink))}
label{display:block;color:#ddd9e3;font-size:13px;margin:18px 0 8px}input,select{width:100%;border:1px solid var(--line);background:#0b0b0e;color:#fff;border-radius:16px;padding:15px 16px;font-size:16px}.date-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}.picker{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:21px;background:#0b0b0e}
.clock{width:250px;height:250px;margin:18px auto;position:relative;border-radius:50%;background:radial-gradient(circle at center,#15151b 0 49%,#101014 50%);border:1px solid #34303a;touch-action:none}.clock-number{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;display:grid;place-items:center;font-size:13px;color:#dad5df;pointer-events:none}.hand{position:absolute;left:50%;top:50%;height:80px;width:3px;background:linear-gradient(var(--pink),var(--lilac));transform-origin:50% 100%;translate:-50% -100%;border-radius:999px;transition:.2s}.dot{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:linear-gradient(135deg,var(--lilac),var(--pink))}.clockDisplay{text-align:center;font-size:29px;font-weight:900}.pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.pills button{border:1px solid var(--line);background:#15151a;color:#cbc5d0;border-radius:999px;padding:8px 13px;font-weight:800}.pills button.active{border-color:var(--lilac);background:rgba(216,180,254,.12);color:#fff}
.summary{margin-top:25px;border:1px solid var(--line);border-radius:18px;overflow:hidden}.row{display:flex;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}.row span{color:var(--muted)}.apology{font-size:17px;line-height:1.8;color:#ddd9e2}.question{margin-top:28px;padding:22px;border-radius:21px;border:1px solid #3b3541;background:#0c0c10}.question h3{margin:0}.final{padding-top:80px}.big{font-size:68px}.status{margin:22px auto 0;max-width:390px;border:1px solid var(--line);border-radius:18px;overflow:hidden}.status div{padding:13px 15px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.status div:last-child{border-bottom:0}.status span{color:var(--muted)}.status b{color:var(--green)}.joke{margin-top:26px;padding:15px;border:1px dashed #51495a;border-radius:16px;color:#c8c0cd;background:rgba(216,180,254,.05)}
.confetti{position:fixed;width:8px;height:12px;border-radius:2px;z-index:20;pointer-events:none;animation:fall 1.5s ease-out forwards}@keyframes fall{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
@media(max-width:650px){.app{padding:0}.topbar{padding:14px 16px 8px}.card{border-radius:0;border-left:0;border-right:0;border-bottom:0;min-height:calc(100vh - 58px)}.screen{padding:34px 22px 28px;min-height:calc(100vh - 62px)}h1{font-size:42px}h2{font-size:31px}}

.screen[data-step="0"]{padding-top:62px}
.screen[data-step="0"] .eyebrow{margin-bottom:24px;color:#cfc5d8}
.screen[data-step="0"] .actions{margin-top:34px}
.screen[data-step="0"] .primary{max-width:420px;margin:0 auto}
@media(max-width:650px){
  .screen[data-step="0"]{padding-top:46px}
  .typewriter{font-size:19px;line-height:1.68;min-height:190px}
}


.error-box{
  display:none;
  margin-top:12px;
  padding:11px 13px;
  border-radius:14px;
  border:1px solid rgba(245,194,231,.38);
  background:rgba(245,194,231,.07);
  color:#f6d8eb;
  font-size:13px;
  line-height:1.45;
}
.error-box.show{display:block;animation:errorIn .22s ease}
@keyframes errorIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.shake{animation:shake .34s ease}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-7px)}
  50%{transform:translateX(6px)}
  75%{transform:translateX(-4px)}
}
.invalid{
  border-color:#f5c2e7 !important;
  box-shadow:0 0 0 2px rgba(245,194,231,.08);
}
.choice.correct-joke{
  border-color:var(--green);
  background:rgba(183,228,199,.08);
}


.fun-message{
  display:none;
  margin-top:12px;
  padding:12px 14px;
  border-radius:15px;
  border:1px solid rgba(216,180,254,.34);
  background:rgba(216,180,254,.07);
  color:#e8dff0;
  font-size:13px;
  line-height:1.45;
  text-align:center;
}
.fun-message.show{display:block;animation:errorIn .22s ease}
.choice.wrong-pick{animation:wrongPick .35s ease}
@keyframes wrongPick{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  50%{transform:translateX(5px)}
  75%{transform:translateX(-3px)}
}


.music-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:#0b0b0e;color:#d8d1df;font-size:19px;font-weight:900;cursor:pointer;
  transition:.2s ease;box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.music-btn:hover{border-color:var(--lilac);transform:translateY(-1px)}
.music-btn.on{
  color:#080809;border-color:transparent;
  background:linear-gradient(135deg,var(--lilac),var(--pink));
  box-shadow:0 0 24px rgba(216,180,254,.18);
}
.music-note{
  position:fixed;right:20px;top:70px;z-index:30;
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  background:#111117;color:#cfc8d5;font-size:12px;opacity:0;transform:translateY(-5px);
  pointer-events:none;transition:.22s ease;
}
.music-note.show{opacity:1;transform:none}


body.entry-locked{overflow:hidden}
.entry-gate{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(216,180,254,.11),transparent 27%),
    radial-gradient(circle at 50% 74%,rgba(245,194,231,.06),transparent 34%),
    #050506;
  transition:opacity .9s cubic-bezier(.2,.75,.2,1),filter .9s ease,transform .9s cubic-bezier(.2,.75,.2,1);
}
.entry-gate.leaving{opacity:0;filter:blur(12px);transform:scale(1.035);pointer-events:none}
#entryCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.86}
.entry-content{position:relative;z-index:2;text-align:center;width:min(92vw,560px);padding:34px 24px}
.entry-kicker{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:#d9cfdf;margin-bottom:18px;opacity:0;animation:gateRise .7s .12s forwards}
.entry-title{font-size:clamp(30px,5vw,46px);line-height:1.08;font-weight:720;letter-spacing:-.035em;opacity:0;animation:gateRise .75s .2s forwards}
.entry-subtitle{margin-top:13px;color:#aaa5b0;font-size:14px;opacity:0;animation:gateRise .75s .28s forwards}
@keyframes gateRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.entry-play{position:relative;width:190px;height:190px;margin:46px auto 26px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;opacity:0;animation:gatePlayIn .85s .38s cubic-bezier(.2,.85,.2,1) forwards}
@keyframes gatePlayIn{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:scale(1)}}
.entry-button-core{
  position:absolute;z-index:5;width:94px;height:94px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.2),transparent 28%),linear-gradient(145deg,rgba(216,180,254,.99),rgba(245,194,231,.95));
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 0 36px rgba(216,180,254,.2),0 20px 60px rgba(0,0,0,.45);
  transition:transform .25s ease,box-shadow .25s ease;
}
.entry-play:hover .entry-button-core{transform:scale(1.06);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 0 52px rgba(216,180,254,.28),0 22px 64px rgba(0,0,0,.5)}
.entry-play:active .entry-button-core{transform:scale(.97)}
.play-triangle{width:0;height:0;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:21px solid #09090b;margin-left:6px;transition:opacity .25s ease,transform .25s ease}
.play-heart{position:absolute;font-size:34px;opacity:0;transform:scale(.55);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.2,1.1)}
.entry-play.played .play-triangle{opacity:0;transform:scale(.55)}
.entry-play.played .play-heart{opacity:1;transform:scale(1)}

.entry-ring{position:absolute;border-radius:50%;border:1px solid rgba(216,180,254,.25);box-shadow:0 0 30px rgba(216,180,254,.05) inset}
.r1{width:126px;height:126px;animation:ringPulse 2.8s ease-in-out infinite}
.r2{width:154px;height:154px;border-color:rgba(245,194,231,.14);animation:ringPulse 2.8s .55s ease-in-out infinite}
.r3{width:184px;height:184px;border-color:rgba(255,255,255,.07);animation:ringPulse 2.8s 1.1s ease-in-out infinite}
@keyframes ringPulse{0%,100%{transform:scale(.94);opacity:.38}50%{transform:scale(1.04);opacity:.95}}
.entry-orbit{position:absolute;border-radius:50%;border:1px dashed rgba(255,255,255,.09)}
.o1{width:174px;height:174px;animation:orbitSpin 18s linear infinite}
.o2{width:145px;height:145px;animation:orbitSpin 13s linear infinite reverse}
.entry-orbit::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--lilac);box-shadow:0 0 12px rgba(216,180,254,.8);left:50%;top:-3px}
.o2::after{background:var(--pink)}
@keyframes orbitSpin{to{transform:rotate(360deg)}}

.eq{position:absolute;bottom:12px;width:3px;border-radius:999px;background:linear-gradient(var(--lilac),var(--pink));opacity:.6;transform-origin:bottom;animation:eqPulse 1.2s ease-in-out infinite}
.eq1{left:74px;height:9px;animation-delay:-.2s}.eq2{left:84px;height:15px;animation-delay:-.5s}.eq3{left:94px;height:21px;animation-delay:-.8s}.eq4{left:104px;height:15px;animation-delay:-.35s}.eq5{left:114px;height:9px;animation-delay:-.65s}
@keyframes eqPulse{0%,100%{transform:scaleY(.55);opacity:.28}50%{transform:scaleY(1.45);opacity:.95}}

.entry-cta{font-size:15px;font-weight:760;letter-spacing:.02em;opacity:0;animation:gateRise .7s .5s forwards}
.entry-note{margin-top:9px;color:#77717e;font-size:11px;opacity:0;animation:gateRise .7s .58s forwards}
.entry-lang{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;z-index:4;display:flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.09);background:rgba(9,9,12,.7);backdrop-filter:blur(18px);border-radius:999px}
.entry-lang button{border:0;background:transparent;color:#9d98a4;padding:8px 11px;border-radius:999px;font-weight:800;cursor:pointer}
.entry-lang button.active{background:linear-gradient(135deg,var(--lilac),var(--pink));color:#09090b}
.entry-gate.flash::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.3),transparent 34%);animation:gateFlash .75s ease-out forwards}
@keyframes gateFlash{from{opacity:1;transform:scale(.5)}to{opacity:0;transform:scale(1.5)}}
@media(max-width:650px){
  .entry-play{width:176px;height:176px;margin-top:40px}
  .entry-button-core{width:88px;height:88px}
  .r1{width:120px;height:120px}.r2{width:148px;height:148px}.r3{width:174px;height:174px}
  .o1{width:165px;height:165px}.o2{width:140px;height:140px}
  .entry-title{font-size:34px}
}


/* ===== V6 Mobile-first polish ===== */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-height:100dvh;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
button,input,select{font:inherit}
button{touch-action:manipulation}
.story-lead{max-width:520px}

.preplanned-note{
  margin-top:22px;
  padding:16px;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  border:1px solid rgba(216,180,254,.22);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(216,180,254,.08),rgba(245,194,231,.035));
}
.preplanned-icon{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  color:#0a090b;font-weight:950;
  background:linear-gradient(135deg,var(--lilac),var(--pink));
  box-shadow:0 10px 26px rgba(216,180,254,.12);
}
.preplanned-note strong{display:block;font-size:14px;line-height:1.35}
.preplanned-note p{font-size:13px;line-height:1.62;margin:6px 0 0;color:#aaa3b0}

.plan-proof{
  margin-top:18px;
  padding:16px;
  border:1px solid rgba(216,180,254,.18);
  border-radius:22px;
  background:
    radial-gradient(circle at 92% 8%,rgba(216,180,254,.08),transparent 28%),
    rgba(7,7,10,.68);
  box-shadow:0 18px 50px rgba(0,0,0,.20);
}
.plan-proof-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px
}
.plan-proof-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(183,228,199,.25);
  background:rgba(183,228,199,.055);
  color:#ccebd7;
  font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase
}
.plan-proof-sub{font-size:10px;color:#77717d}
.plan-proof-list{display:grid;gap:8px}
.plan-proof-item{
  display:grid;grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;gap:9px;
  padding:11px 10px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.018);
  opacity:0;transform:translateY(8px)
}
.screen.active .plan-proof-item{animation:planItemIn .48s cubic-bezier(.2,.8,.2,1) forwards}
.screen.active .plan-proof-item:nth-child(1){animation-delay:.06s}
.screen.active .plan-proof-item:nth-child(2){animation-delay:.12s}
.screen.active .plan-proof-item:nth-child(3){animation-delay:.18s}
.screen.active .plan-proof-item:nth-child(4){animation-delay:.24s}
.screen.active .plan-proof-item:nth-child(5){animation-delay:.30s}
@keyframes planItemIn{to{opacity:1;transform:none}}
.plan-proof-icon{font-size:17px;text-align:center}
.plan-proof-name{font-size:12.5px;font-weight:820;line-height:1.3}
.plan-proof-note{font-size:10.5px;color:#8f8994;line-height:1.35;margin-top:3px}
.plan-proof-status{
  max-width:92px;
  text-align:center;
  font-size:8.8px;font-weight:900;letter-spacing:.055em;text-transform:uppercase;
  color:#c8c0ce;border:1px solid rgba(255,255,255,.08);
  padding:5px 6px;border-radius:999px;line-height:1.15
}
.plan-proof-status.secret-status{color:#f1d8e8;border-color:rgba(245,194,231,.17)}
.plan-proof-status.website-status{color:#dfcdf0;border-color:rgba(216,180,254,.20)}

@media(max-width:650px){
  body{
    background:
      radial-gradient(circle at 50% -8%,rgba(216,180,254,.13),transparent 31%),
      radial-gradient(circle at 110% 80%,rgba(245,194,231,.08),transparent 38%),
      #050506;
  }

  .app{
    width:100%;
    padding:0;
    min-height:100dvh;
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:40;
    min-height:62px;
    padding:max(10px,env(safe-area-inset-top)) 14px 9px;
    background:linear-gradient(180deg,rgba(5,5,6,.96),rgba(5,5,6,.82),transparent);
    backdrop-filter:blur(14px);
  }
  .brand{
    font-size:9px;
    letter-spacing:.13em;
    max-width:44vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .music-btn{width:40px;height:40px;min-width:40px}
  .lang button{min-height:36px;padding:7px 10px}

  .card{
    width:100%;
    min-height:calc(100dvh - 62px);
    border:0;
    border-radius:0;
    box-shadow:none;
    background:
      radial-gradient(circle at 90% 8%,rgba(216,180,254,.045),transparent 30%),
      linear-gradient(180deg,rgba(14,14,18,.96),rgba(7,7,9,.995));
  }
  .progress{
    position:sticky;
    top:62px;
    z-index:38;
    height:3px;
    background:rgba(28,27,32,.86);
  }

  .screen{
    min-height:calc(100dvh - 65px);
    padding:28px 18px calc(108px + env(safe-area-inset-bottom));
  }
  .screen.center{padding-left:20px;padding-right:20px}
  .screen[data-step="0"]{padding-top:36px}

  .eyebrow{
    font-size:9.5px;
    letter-spacing:.145em;
    margin-bottom:14px;
  }
  h2{
    font-size:clamp(28px,8.1vw,34px);
    line-height:1.08;
    letter-spacing:-.035em;
  }
  p{
    font-size:14.5px;
    line-height:1.66;
    margin-top:14px;
  }
  .typewriter{
    min-height:180px;
    font-size:18px;
    line-height:1.62;
    padding:0 2px;
  }
  .hero{
    width:68px;height:68px;
    margin:20px auto 24px;
    border-radius:23px;
    font-size:35px;
  }

  .screen > .actions{
    position:sticky;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:25;
    margin:28px -4px -84px;
    padding:8px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:20px;
    background:rgba(12,12,16,.88);
    backdrop-filter:blur(20px);
    box-shadow:0 16px 46px rgba(0,0,0,.42);
  }
  .screen[data-step="9"] > .actions{position:static}
  .btn{
    min-height:50px;
    border-radius:15px;
    padding:14px 16px;
    font-size:14px;
  }
  .btn:active,.choice:active,.pills button:active{transform:scale(.975)}

  .timeline,.choices{gap:9px;margin-top:20px}
  .tl,.choice{border-radius:17px;padding:14px}
  .tl{grid-template-columns:38px 1fr;gap:11px}
  .num{width:38px;height:38px;border-radius:12px;font-size:12px}
  .tl strong{font-size:13px}
  .tl small{font-size:11px;line-height:1.45;margin-top:4px}

  .preplanned-note{margin-top:18px;padding:14px;border-radius:18px}
  .preplanned-note p{font-size:12px;line-height:1.58}
  .plan-proof{padding:13px;margin-top:14px;border-radius:19px}
  .plan-proof-head{align-items:flex-start;flex-direction:column;gap:7px}
  .plan-proof-badge{font-size:8.8px;padding:6px 8px}
  .plan-proof-sub{font-size:9px}
  .plan-proof-item{grid-template-columns:28px minmax(0,1fr) auto;padding:10px 8px;gap:8px}
  .plan-proof-icon{font-size:15px}
  .plan-proof-name{font-size:11.5px}
  .plan-proof-note{font-size:9.5px}
  .plan-proof-status{font-size:7.5px;max-width:76px;padding:4px 5px}

  input,select{
    min-height:50px;
    border-radius:14px;
    padding:13px 12px;
    font-size:16px;
  }
  .date-row{gap:6px}
  .date-row select{padding-left:8px;padding-right:5px}
  .picker{
    margin-top:16px;
    padding:14px;
    border-radius:18px;
  }

  .clock{
    width:min(72vw,255px);
    height:min(72vw,255px);
    margin:16px auto;
  }
  .clockDisplay{font-size:27px}
  .pills button{min-height:42px;padding:8px 14px}

  .summary{margin-top:19px;border-radius:17px}
  .row{padding:13px 12px;gap:16px;font-size:13px}
  .row strong{text-align:right;max-width:60%}

  .apology{
    font-size:15px;
    line-height:1.72;
  }
  .question{
    margin-top:22px;
    padding:17px 14px;
    border-radius:18px;
  }
  .question .actions{
    flex-direction:column;
    margin-top:17px;
  }
  .question .btn{width:100%}

  .final{padding-top:46px}
  .big{font-size:58px}
  .status{border-radius:17px}
  .status div{font-size:12px;gap:14px}
  .joke{font-size:12px;line-height:1.55;margin-top:20px}

  .gift{margin:28px auto 30px}
  .error-box,.fun-message{font-size:12px}

  .music-note{
    top:calc(62px + env(safe-area-inset-top));
    right:12px;
    font-size:11px;
  }

  .entry-content{
    width:100%;
    padding:
      max(36px,env(safe-area-inset-top))
      22px
      max(30px,env(safe-area-inset-bottom));
  }
  .entry-kicker{font-size:9.5px;margin-bottom:14px}
  .entry-title{
    font-size:clamp(30px,9vw,38px);
    max-width:330px;
    margin:0 auto;
  }
  .entry-subtitle{
    font-size:13px;
    line-height:1.5;
    max-width:290px;
    margin:11px auto 0;
  }
  .entry-play{
    width:170px;height:170px;
    margin:36px auto 22px;
  }
  .entry-button-core{width:86px;height:86px}
  .r1{width:116px;height:116px}
  .r2{width:143px;height:143px}
  .r3{width:168px;height:168px}
  .o1{width:160px;height:160px}
  .o2{width:136px;height:136px}
  .entry-cta{font-size:14px}
  .entry-note{font-size:10.5px}
  .entry-lang{
    top:max(12px,env(safe-area-inset-top));
    right:12px;
  }
}

@media(max-width:380px){
  .screen{padding-left:15px;padding-right:15px}
  h2{font-size:27px}
  .plan-proof-item{grid-template-columns:25px minmax(0,1fr)}
  .plan-proof-status{
    grid-column:2;
    justify-self:start;
    max-width:none;
    margin-top:2px;
  }
  .date-row{grid-template-columns:.8fr 1.25fr 1fr}
  .entry-title{font-size:29px}
}

@media(hover:none) and (pointer:coarse){
  .entry-play:hover .entry-button-core{transform:none}
  .choice:hover,.btn:hover{transform:none}
}


/* ===== V6.1 cleaner Step 01 ===== */
.plan-proof{display:none!important}
.preplanned-note{
  margin-top:16px;
  padding:13px 14px;
  grid-template-columns:32px 1fr;
  gap:10px;
  border-radius:17px;
}
.preplanned-icon{width:32px;height:32px;border-radius:11px;font-size:13px}
.preplanned-note strong{font-size:13px}
.preplanned-note p{font-size:11.5px;line-height:1.5;margin-top:4px}

.plan-strip{
  margin-top:12px;
  padding:12px 13px;
  border:1px solid rgba(216,180,254,.16);
  border-radius:17px;
  background:rgba(255,255,255,.018);
}
.plan-strip-top{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  font-size:10px;
  letter-spacing:.08em;
  color:#d8d0dd;
}
.plan-strip-check{
  width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(183,228,199,.09);
  border:1px solid rgba(183,228,199,.22);
  color:#ccebd7;
  font-size:11px;
}
.plan-strip-items{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.plan-strip-items span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:30px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.018);
  color:#9e98a4;
  font-size:10.5px;
}
.plan-strip-items b{
  color:#d9d2df;
  font-weight:760;
}
.screen[data-step="1"] .timeline{
  margin-top:16px;
}
.screen[data-step="1"] .tl{
  padding:12px 13px;
}
.screen[data-step="1"] .tl small{
  margin-top:2px;
}
@media(max-width:650px){
  .screen[data-step="1"]{
    padding-top:22px;
  }
  .screen[data-step="1"] h2{
    font-size:29px;
  }
  .screen[data-step="1"] > p.story-lead{
    font-size:13.5px;
    line-height:1.55;
    margin-top:10px;
  }
  .preplanned-note{
    margin-top:13px;
    padding:12px;
  }
  .plan-strip{
    padding:11px 12px;
  }
  .plan-strip-top{
    margin-bottom:8px;
  }
  .plan-strip-items{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  .plan-strip-items span{
    width:100%;
    justify-content:center;
    padding:6px 7px;
    min-height:29px;
  }
  .screen[data-step="1"] .timeline{
    gap:7px;
    margin-top:13px;
  }
  .screen[data-step="1"] .tl{
    padding:11px 12px;
    border-radius:15px;
  }
  .screen[data-step="1"] .num{
    width:34px;height:34px;
  }
}


/* ===== V6.2 smooth opening choreography ===== */
.entry-gate{
  transition:
    opacity 1.05s cubic-bezier(.22,.72,.18,1),
    filter 1.05s ease,
    transform 1.05s cubic-bezier(.22,.72,.18,1);
}
.entry-gate.entry-playing .entry-title,
.entry-gate.entry-playing .entry-subtitle,
.entry-gate.entry-playing .entry-kicker,
.entry-gate.entry-playing .entry-cta,
.entry-gate.entry-playing .entry-note{
  transition:opacity .55s ease,transform .55s ease;
}
.entry-gate.entry-playing .entry-title,
.entry-gate.entry-playing .entry-subtitle,
.entry-gate.entry-playing .entry-kicker{
  opacity:.58;
  transform:translateY(-3px);
}
.entry-gate.entry-playing .entry-cta,
.entry-gate.entry-playing .entry-note{
  opacity:.18;
}
.entry-gate.leaving{
  opacity:0;
  filter:blur(16px);
  transform:scale(1.045);
}

.screen[data-step="0"]{
  opacity:1;
}
.screen[data-step="0"] .eyebrow,
.screen[data-step="0"] .hero,
.screen[data-step="0"] .typewriter{
  opacity:0;
  transform:translateY(10px);
}
.screen[data-step="0"].intro-visible .eyebrow{
  animation:introElementIn .65s .04s ease forwards;
}
.screen[data-step="0"].intro-visible .hero{
  animation:introElementIn .72s .15s cubic-bezier(.2,.8,.2,1) forwards;
}
.screen[data-step="0"].intro-visible .typewriter{
  animation:introElementIn .70s .30s ease forwards;
}
@keyframes introElementIn{
  to{opacity:1;transform:none}
}

/* Reserve the whole text area from the first frame, so typing begins at the top
   and the page never looks like it starts halfway through a paragraph. */
.screen[data-step="0"] .typewriter{
  min-height:225px;
  display:block;
  text-align:center;
  padding-top:0;
}
.screen[data-step="0"] .actions{
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);
}
.screen[data-step="0"].intro-ready .actions{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

@media(max-width:650px){
  .screen[data-step="0"]{
    padding-top:38px;
  }
  .screen[data-step="0"] .hero{
    margin-top:18px;
    margin-bottom:28px;
  }
  .screen[data-step="0"] .typewriter{
    min-height:238px;
    max-width:340px;
    font-size:18px;
    line-height:1.68;
    margin-left:auto;
    margin-right:auto;
  }
  .screen[data-step="0"] .actions{
    margin-top:18px;
  }
}


/* ===== V6.3 refined final question ===== */
.question{
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.01));
  border-color:rgba(216,180,254,.15);
}
.question h2,
.question strong{
  letter-spacing:-.02em;
}
#yesBtn{
  background:linear-gradient(135deg,rgba(216,180,254,.95),rgba(245,194,231,.92));
}
#notYetBtn{
  background:rgba(255,255,255,.018);
  border-color:rgba(255,255,255,.10);
  color:#d7d0dd;
}
#notYetBtn:hover{
  border-color:rgba(216,180,254,.24);
  background:rgba(216,180,254,.035);
}
.screen[data-step="10"] .hero{
  font-size:30px;
  background:rgba(216,180,254,.05);
  border-color:rgba(216,180,254,.13);
}
@media(max-width:650px){
  .question{
    padding:16px 13px;
  }
  .question h2{
    font-size:24px;
    line-height:1.22;
  }
  .question .actions{
    gap:9px;
  }
  #yesBtn,#notYetBtn{
    font-size:13.5px;
  }
}


/* ===== V6.4 intro typography fix ===== */
.screen[data-step="0"] .typewriter{
  min-height:255px;
  max-width:620px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  padding:0 12px;
  text-align:center;
  font-size:22px;
  line-height:1.45;
  letter-spacing:-.02em;
}
.intro-line{
  width:100%;
  min-height:1.45em;
  opacity:.98;
}
.intro-line:first-child{
  font-weight:700;
  font-size:1.12em;
  margin-bottom:3px;
}
.intro-line:nth-child(2){
  margin-top:2px;
}
.intro-line.complete{
  animation:introLineSettle .22s ease;
}
@keyframes introLineSettle{
  from{opacity:.7;transform:translateY(2px)}
  to{opacity:.98;transform:none}
}

@media(max-width:650px){
  .screen[data-step="0"] .typewriter{
    min-height:270px;
    max-width:340px;
    gap:12px;
    padding:0 4px;
    font-size:18px;
    line-height:1.48;
  }
  .intro-line:first-child{
    font-size:1.15em;
    margin-bottom:2px;
  }
}


/* ===== V6.5 personal opening copy ===== */
.entry-title{
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
  letter-spacing:-.04em;
}
.entry-subtitle{
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.55;
}
.entry-cta{
  margin-top:2px;
  font-size:14px;
  letter-spacing:.015em;
}
.entry-note{
  margin-top:8px;
  color:#8d8793;
}
@media(max-width:650px){
  .entry-title{
    max-width:330px;
    font-size:clamp(31px,9vw,38px);
    line-height:1.08;
  }
  .entry-subtitle{
    max-width:310px;
    font-size:13px;
    line-height:1.52;
  }
  .entry-cta{
    max-width:290px;
    margin-left:auto;
    margin-right:auto;
  }
}


/* ===== V6.6 — clean original-plan page ===== */
.plan-clean{
  max-width:860px;
  margin:0 auto;
}
.plan-clean-copy{
  max-width:680px;
}
.plan-clean .story-lead{
  max-width:650px;
  margin-top:14px;
  font-size:17px;
  line-height:1.65;
}

.plan-line{
  position:relative;
  margin-top:34px;
  padding-left:34px;
  display:grid;
  gap:0;
}
.plan-line::before{
  content:"";
  position:absolute;
  left:16px;
  top:18px;
  bottom:18px;
  width:1px;
  background:linear-gradient(
    180deg,
    rgba(216,180,254,.08),
    rgba(216,180,254,.42) 25%,
    rgba(245,194,231,.28) 72%,
    rgba(216,180,254,.06)
  );
}
.plan-line-item{
  position:relative;
  min-height:88px;
  display:grid;
  grid-template-columns:44px 1fr;
  align-items:center;
  gap:15px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.plan-line-item:last-child{border-bottom:0}
.plan-dot{
  position:relative;
  z-index:2;
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:14px;
  background:#111116;
  border:1px solid rgba(216,180,254,.18);
  font-size:19px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.plan-line-item strong{
  display:block;
  font-size:16px;
  line-height:1.3;
}
.plan-line-item small{
  display:block;
  margin-top:5px;
  color:#8f8995;
  font-size:13px;
  line-height:1.45;
}

.website-aside{
  margin-top:24px;
  display:flex;
  align-items:flex-start;
  gap:11px;
  max-width:650px;
  padding:15px 16px;
  border-radius:17px;
  border:1px solid rgba(216,180,254,.11);
  background:rgba(216,180,254,.025);
}
.website-aside-icon{
  flex:0 0 auto;
  font-size:17px;
  line-height:1.5;
}
.website-aside p{
  margin:0;
  color:#aaa3ae;
  font-size:13px;
  line-height:1.55;
}

.plan-clean > .actions{
  margin-top:30px;
}

@media(max-width:650px){
  .plan-clean{
    padding-top:23px;
  }
  .plan-clean h2{
    max-width:330px;
    font-size:31px;
    line-height:1.06;
  }
  .plan-clean .story-lead{
    margin-top:12px;
    max-width:335px;
    font-size:14px;
    line-height:1.58;
  }
  .plan-line{
    margin-top:24px;
    padding-left:25px;
  }
  .plan-line::before{
    left:12px;
    top:17px;
    bottom:17px;
  }
  .plan-line-item{
    min-height:74px;
    grid-template-columns:37px minmax(0,1fr);
    gap:12px;
    padding:9px 0;
  }
  .plan-dot{
    width:36px;height:36px;
    border-radius:12px;
    font-size:16px;
  }
  .plan-line-item strong{
    font-size:13.5px;
  }
  .plan-line-item small{
    margin-top:3px;
    font-size:11.5px;
  }
  .website-aside{
    margin-top:18px;
    padding:12px 13px;
    border-radius:15px;
  }
  .website-aside p{
    font-size:11.5px;
    line-height:1.5;
  }
  .plan-clean > .actions{
    margin-top:22px;
  }
}


/* ===== V6.7 more emotional apology ===== */
.screen[data-step="7"] .apology{
  max-width:700px;
  margin:24px auto 0;
  font-size:16px;
  line-height:1.82;
}
.screen[data-step="7"] .apology p{
  margin:0 0 14px;
}
.screen[data-step="7"] .question{
  margin-top:28px;
}
@media(max-width:650px){
  .screen[data-step="7"] .apology{
    max-width:340px;
    margin-top:18px;
    font-size:14px;
    line-height:1.72;
  }
  .screen[data-step="7"] .apology p{
    margin-bottom:12px;
  }
  .screen[data-step="7"] .question{
    margin-top:22px;
  }
}


/* ===== V6.8 serious Not Yet path ===== */
#notYetBtn{
  background:transparent;
  border-color:rgba(255,255,255,.12);
  color:#d7d0dd;
}
#notYetBtn:hover{
  background:rgba(255,255,255,.025);
  border-color:rgba(216,180,254,.20);
}
.screen[data-step="10"] .hero{
  font-size:28px;
  background:rgba(216,180,254,.045);
  border-color:rgba(216,180,254,.12);
}
.screen[data-step="10"] .joke{
  color:#9f98a5;
  font-style:normal;
}


/* ===== V6.9 Not Yet refinement ===== */
.screen[data-step="10"] .hero{
  font-size:34px;
  background:linear-gradient(180deg,rgba(216,180,254,.055),rgba(245,194,231,.025));
  border-color:rgba(216,180,254,.14);
}


/* ===== V6.12 — MOBILE LAYOUT AUDIT / SAFARI FIX ===== */
*,*::before,*::after{box-sizing:border-box}

@media(max-width:650px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  /* Safari's collapsing address bar + position:sticky caused the progress
     line to cross headings after Next/Back. Keep header/progress in normal flow. */
  .topbar{
    position:relative !important;
    top:auto !important;
    z-index:20;
    min-height:60px;
    padding:
      max(11px,env(safe-area-inset-top))
      14px
      9px !important;
    background:#070708;
    backdrop-filter:none;
  }

  .progress{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    z-index:3;
    width:100%;
    height:3px;
    margin:0;
  }

  .card{
    overflow:visible;
    min-height:calc(100dvh - 60px);
  }

  .screen,
  .screen.center,
  .plan-clean{
    width:100%;
    max-width:100%;
    min-height:calc(100dvh - 63px);
    margin:0;
    padding:
      24px
      max(18px,env(safe-area-inset-left))
      calc(112px + env(safe-area-inset-bottom))
      max(18px,env(safe-area-inset-right)) !important;
    overflow:visible;
  }

  .screen[data-step="0"]{
    padding-top:34px !important;
  }

  /* Keep every text block safely inside the viewport. */
  .screen h1,
  .screen h2,
  .screen h3,
  .screen p,
  .screen strong,
  .screen small,
  .screen .apology,
  .screen .question,
  .screen .website-aside,
  .screen .fun-message,
  .screen .error-box{
    max-width:100%;
    overflow-wrap:break-word;
    word-break:normal;
  }

  .screen h2{
    margin-top:0;
    margin-bottom:0;
  }

  .eyebrow{
    display:block;
    width:100%;
    margin:0 0 16px;
    line-height:1.35;
  }

  /* Original-plan page */
  .plan-clean{
    padding-top:26px !important;
  }
  .plan-clean-copy{
    width:100%;
    max-width:100%;
  }
  .plan-clean h2{
    width:100%;
    max-width:360px;
    font-size:clamp(29px,8.8vw,36px) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em;
  }
  .plan-clean .story-lead{
    width:100%;
    max-width:360px !important;
    margin-top:14px !important;
    font-size:14px !important;
    line-height:1.58 !important;
  }

  .plan-line{
    width:100%;
    margin-top:25px;
    padding-left:24px;
  }
  .plan-line::before{left:11px}
  .plan-line-item{
    width:100%;
    min-width:0;
    grid-template-columns:38px minmax(0,1fr);
  }
  .plan-line-item > div:last-child{
    min-width:0;
  }
  .plan-line-item strong,
  .plan-line-item small{
    white-space:normal;
  }

  .website-aside{
    width:100%;
    max-width:none;
  }

  /* Inputs / controls */
  .date-row,
  .choices,
  .summary,
  .question,
  .picker{
    width:100%;
    max-width:100%;
  }

  .date-row{
    grid-template-columns:.82fr 1.18fr 1fr;
  }

  input,select{
    max-width:100%;
    min-width:0;
  }

  /* Long apology should flow naturally without a fixed visual squeeze. */
  .screen[data-step="7"] .apology{
    width:100%;
    max-width:100% !important;
    font-size:14px !important;
    line-height:1.7 !important;
  }

  /* Navigation dock stays usable, but never covers the last content line. */
  .screen > .actions{
    width:calc(100% + 8px);
    max-width:none;
    margin-left:-4px;
    margin-right:-4px;
    bottom:calc(8px + env(safe-area-inset-bottom));
  }

  .question .actions{
    width:100%;
    margin-left:0;
    margin-right:0;
  }

  /* Review rows */
  .row{
    min-width:0;
  }
  .row strong{
    min-width:0;
    overflow-wrap:anywhere;
  }

  /* Final screens */
  .screen[data-step="8"],
  .screen[data-step="9"],
  .screen[data-step="10"]{
    padding-top:32px !important;
  }
}

@media(max-width:390px){
  .screen,
  .screen.center,
  .plan-clean{
    padding-left:15px !important;
    padding-right:15px !important;
  }

  .brand{max-width:38vw}

  .plan-clean h2{
    font-size:28px !important;
  }

  .plan-line{
    padding-left:21px;
  }

  .plan-line-item{
    grid-template-columns:35px minmax(0,1fr);
    gap:10px;
  }

  .date-row{
    grid-template-columns:.78fr 1.22fr 1fr;
    gap:5px;
  }
}


/* ===== V6.13 — response box + autosave ===== */
.message-box{
  width:min(100%,620px);
  margin:26px auto 0;
  text-align:left;
}
.message-box label{
  display:block;
  margin:0 0 9px;
  color:#e4dde8;
  font-size:13px;
  font-weight:760;
  line-height:1.45;
}
.message-box textarea{
  width:100%;
  min-height:150px;
  resize:vertical;
  padding:15px 16px;
  border-radius:18px;
  border:1px solid rgba(216,180,254,.18);
  outline:none;
  background:rgba(255,255,255,.025);
  color:#f2edf4;
  font:inherit;
  font-size:15px;
  line-height:1.6;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.message-box textarea::placeholder{color:#6f6975}
.message-box textarea:focus{
  border-color:rgba(216,180,254,.42);
  background:rgba(216,180,254,.035);
  box-shadow:0 0 0 3px rgba(216,180,254,.055);
}
.autosave-row{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:9px;
  color:#8e8794;
  font-size:10.5px;
}
.autosave-dot{
  width:7px;height:7px;border-radius:50%;
  background:#77717d;
  transition:.2s ease;
}
.autosave-dot.saving{
  background:#d8b4fe;
  box-shadow:0 0 12px rgba(216,180,254,.5);
  animation:autoPulse .85s ease-in-out infinite;
}
.autosave-dot.saved{
  background:#b7e4c7;
  box-shadow:0 0 10px rgba(183,228,199,.28);
}
@keyframes autoPulse{50%{opacity:.35;transform:scale(.82)}}
.autosave-disclosure{
  display:block;
  margin-top:7px;
  color:#6f6975;
  font-size:10px;
  line-height:1.45;
}
.message-actions{
  width:min(100%,620px);
  margin:18px auto 0;
  display:flex;
  gap:10px;
  justify-content:center;
}
.message-actions .btn{flex:1}
.send-confirmation{
  width:min(100%,620px);
  margin:12px auto 0;
  min-height:20px;
  opacity:0;
  transform:translateY(4px);
  color:#ccebd7;
  font-size:12px;
  transition:.3s ease;
}
.send-confirmation.show{opacity:1;transform:none}

@media(max-width:650px){
  .screen[data-step="10"]{
    text-align:left;
  }
  .screen[data-step="10"] .hero{
    margin-left:0;
    margin-right:0;
  }
  .screen[data-step="10"] h2{
    font-size:29px;
  }
  .screen[data-step="10"] > p{
    font-size:14px;
    line-height:1.65;
  }
  .message-box{
    margin-top:22px;
  }
  .message-box textarea{
    min-height:170px;
    font-size:16px; /* prevents iOS focus zoom */
    border-radius:17px;
  }
  .message-actions{
    flex-direction:column;
  }
  .message-actions .btn{
    width:100%;
  }
  .send-confirmation{text-align:center}
}

/* V6.14 */
.field-label{display:block;margin:24px 0 10px;color:#ded7e4;font-size:12px;font-weight:800;letter-spacing:.04em}
.activity-label{margin-top:26px}
@media(max-width:650px){
.plan-clean .plan-line{margin-top:22px}.plan-clean .plan-line-item{padding-top:10px;padding-bottom:10px}
.plan-clean .plan-line-item small{line-height:1.48}.screen[data-step="4"] .choices{margin-top:9px}
.screen[data-step="4"] .field-label{margin-top:20px}.screen[data-step="7"] .apology{max-width:350px!important;font-size:13.5px!important;line-height:1.68!important}
.screen[data-step="7"] .apology p{margin-bottom:13px!important}
}

/* ===== V6.16 — cinematic ambient background for all pages ===== */
.ambient-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity .8s ease;
}
.ambient-canvas.visible{opacity:.7}
.ambient-vignette{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 38%, rgba(216,180,254,.04), transparent 42%),
    radial-gradient(circle at 18% 72%, rgba(245,194,231,.025), transparent 36%),
    linear-gradient(180deg, rgba(4,4,7,.04), rgba(4,4,7,.34));
}
.entry-gate{z-index:1000}
.card,.topbar,.progress,.music-note{position:relative;z-index:2}
.screen{position:relative;z-index:2}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 20% 20%, rgba(216,180,254,.025), transparent 26%),
    radial-gradient(circle at 84% 76%, rgba(245,194,231,.018), transparent 28%);
}

@media(max-width:650px){
  .ambient-canvas.visible{opacity:.62}
}


/* ===== V6.20 — visible moving stars on every inner page ===== */
/*
  The ambient canvas existed before, but the card itself was almost opaque and
  sat above it. These overrides put the stars above the card background and
  keep all text/buttons above the stars.
*/
.ambient-vignette{
  z-index:0 !important;
}

body::before{
  z-index:0 !important;
}

.ambient-canvas{
  z-index:1 !important;
}

.ambient-canvas.visible{
  opacity:.88 !important;
}

/* Do not let the card create a stacking layer that hides the star canvas. */
.card{
  z-index:auto !important;
  background:
    radial-gradient(circle at 88% 10%,rgba(216,180,254,.055),transparent 30%),
    linear-gradient(180deg,rgba(14,14,18,.72),rgba(7,7,9,.84)) !important;
}

/* Content always stays crisp and readable above the moving background. */
.screen{
  position:relative !important;
  z-index:2 !important;
}

.topbar,
.progress,
.music-note{
  position:relative;
  z-index:4 !important;
}

@media(max-width:650px){
  .ambient-canvas.visible{
    opacity:.82 !important;
  }

  .card{
    background:
      radial-gradient(circle at 90% 8%,rgba(216,180,254,.05),transparent 30%),
      linear-gradient(180deg,rgba(14,14,18,.76),rgba(7,7,9,.87)) !important;
  }
}


/* ===== V6.21 — REAL stars inside the content card ===== */
.card{
  position:relative !important;
  isolation:isolate;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 88% 10%,rgba(216,180,254,.045),transparent 30%),
    linear-gradient(180deg,rgba(12,12,16,.86),rgba(6,6,8,.91)) !important;
}

.card-stars{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.95;
}

.card > .progress,
.card > .screen{
  position:relative !important;
  z-index:2 !important;
}

@media(max-width:650px){
  .card{
    overflow:hidden !important;
    background:
      radial-gradient(circle at 88% 8%,rgba(216,180,254,.04),transparent 30%),
      linear-gradient(180deg,rgba(11,11,15,.88),rgba(6,6,8,.93)) !important;
  }
  .card-stars{opacity:.92}
}