:root{--ink:#1e3f8f;--mut:#4d6aa8;--card:rgba(255,255,255,.55);--pop:#f4f8ff;--line:rgba(255,255,255,.8);--acc:#2f5fc4;--chip:rgba(120,160,235,.2);--hair:#1e3a8a;--c2:#3b66c9;--c3:#4a78d8;--c4:#2c4fa6;--gh:#b4cdfa;--sh:0 18px 40px -18px rgba(40,80,170,.55)}
[data-theme=dark]{--ink:#e4edff;--mut:#9fb6e6;--card:rgba(22,36,78,.6);--pop:#16244d;--line:rgba(130,165,255,.25);--acc:#8db4ff;--chip:rgba(130,165,255,.16);--hair:#0a1233;--c2:#2a3f86;--c3:#32499a;--c4:#1b2a62;--gh:#8fa8e6;--sh:0 18px 40px -18px rgba(0,0,0,.8)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:500 16px/1.65 Raleway,system-ui,sans-serif;color:var(--ink);min-height:100vh;overflow-x:hidden;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
body *{transition:background-color .7s,color .7s,border-color .7s,box-shadow .7s}
.sky,.sky i{position:fixed;inset:0;z-index:-2}
.sky.d{background:linear-gradient(180deg,#0b1437,#1a2c6b 60%,#2a438f);opacity:0;transition:opacity 1s}
.sky.l{background:linear-gradient(180deg,#dbe9ff,#bcd3fb 55%,#9dbdf4)}
[data-theme=dark] .sky.d{opacity:1}
.sky.d i{inset:auto;width:3px;height:3px;border-radius:50%;background:#fff;animation:tw 3s ease-in-out infinite}
@keyframes tw{50%{opacity:.15;transform:scale(.5)}}
.cl{position:fixed;z-index:-1;border-radius:50%;background:#fff;filter:blur(40px);opacity:.55;animation:dr 30s ease-in-out infinite alternate}
[data-theme=dark] .cl{opacity:.07}
@keyframes dr{to{transform:translateX(80px)}}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
nav{display:flex;align-items:center;gap:8px;padding:14px 4vw;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;font:italic 800 1.9rem/1 'Playfair Display',serif;background:none;border:0;margin-right:auto;text-align:left}
.logo small{display:block;font:700 .62rem Raleway;letter-spacing:.3em;font-style:normal}
.tabs{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.tab{background:none;border:0;padding:8px 16px;border-radius:999px;font-weight:700;color:var(--mut)}
.tab:hover{background:var(--chip)}
.tab[aria-current=page]{background:linear-gradient(135deg,#3b73e0,#2a56b8);color:#fff;box-shadow:0 8px 20px -6px rgba(42,86,184,.7)}
.more{position:relative}
.menu{position:absolute;right:0;top:110%;background:var(--pop);border:1px solid var(--line);border-radius:16px;padding:6px;min-width:220px;box-shadow:var(--sh);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s;z-index:20}
.more.o .menu{opacity:1;visibility:visible;transform:none}
.menu .tab{display:block;width:100%;text-align:left;border-radius:10px}
#th{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);backdrop-filter:blur(8px);display:grid;place-items:center;overflow:hidden}
#th svg{width:24px;height:24px;transition:transform .8s cubic-bezier(.5,1.6,.4,1)}
[data-theme=dark] #th svg{transform:rotate(360deg)}
.sun{display:block}.moon{display:none}[data-theme=dark] .sun{display:none}[data-theme=dark] .moon{display:block}
.view{animation:in .6s cubic-bezier(.2,.8,.3,1)}
@keyframes in{from{opacity:0;transform:translateY(16px)}}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:2vh 5vw 0;min-height:70vh;gap:10px}
.hl{text-align:center;max-width:560px;margin:auto}
h1{margin:0;font:italic 800 clamp(3.6rem,9vw,7rem)/.95 'Playfair Display',serif;color:var(--ink);text-shadow:0 6px 30px rgba(60,110,220,.25)}
h1 span{display:block;font-size:.5em;margin-top:.1em}
.tag{font:600 clamp(.95rem,2.2vw,1.35rem) Raleway;letter-spacing:.22em;margin:1.2rem 0}
.sub{color:var(--mut);max-width:380px;margin:0 auto 1.6rem}
.cta{border:0;border-radius:999px;padding:16px 36px;font-weight:700;color:#fff;background:linear-gradient(135deg,#3c78e6,#2650b0);box-shadow:0 14px 30px -10px rgba(38,80,176,.8);animation:gl 3s ease-in-out infinite;transition:transform .25s}
.cta:hover{transform:translateY(-3px) scale(1.04)}
@keyframes gl{50%{box-shadow:0 14px 44px -4px rgba(90,150,255,.95)}}
.art{width:100%;max-height:68vh;overflow:visible;transform:translate(var(--px,0),var(--py,0));transition:transform .4s ease-out}
.fl8{animation:fl 6s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-12px)}}
.hr{transform-origin:230px 90px;animation:sw 5s ease-in-out infinite}
@keyframes sw{50%{transform:rotate(1.8deg)}}
.gst{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-9px) rotate(3deg)}}
.spk{animation:tw 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.glass{background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:32px;box-shadow:var(--sh)}
.why{max-width:1000px;margin:4vh auto 8vh;padding:30px 5vw;text-align:center}
h2{font:italic 800 clamp(1.7rem,4vw,2.4rem) 'Playfair Display',serif;margin:0 0 .4em}
.wrap{max-width:680px;margin:0 auto;padding:10px 16px 70px}
.wrap>p.lead{color:var(--mut);text-align:center;margin:0 0 20px}
.box{padding:20px;margin-bottom:18px}
textarea,input[type=text],select{width:100%;border:1px solid var(--line);background:var(--chip);color:var(--ink);border-radius:16px;padding:12px 14px;font:inherit}
textarea{min-height:110px;resize:vertical;margin:10px 0}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.pill{border:1px solid var(--line);background:var(--chip);border-radius:999px;padding:6px 14px;font-weight:600;font-size:.9rem}
.pill[aria-pressed=true]{background:var(--acc);color:#fff;border-color:var(--acc)}
[data-theme=dark] .pill[aria-pressed=true]{color:#0b1437}
.btn{border:0;border-radius:999px;padding:10px 24px;font-weight:700;color:#fff;background:linear-gradient(135deg,#3c78e6,#2650b0)}
.btn:disabled{opacity:.45}
.gh{background:none;border:0;color:var(--mut);font-weight:700}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hint{font-size:.82rem;color:var(--mut)}
.card{padding:18px 18px 10px;margin-bottom:16px;animation:in .6s both;animation-delay:var(--d,0s)}
.meta{display:flex;gap:8px;align-items:center;font-size:.84rem;color:var(--mut);flex-wrap:wrap}
.tg{background:var(--chip);border-radius:999px;padding:1px 12px;font-weight:700;color:var(--ink)}
.txt{margin:10px 0 12px;white-space:pre-wrap;overflow-wrap:anywhere}
.sum{display:flex;flex-wrap:wrap;gap:6px;min-height:30px;align-items:center}
.chip{display:inline-flex;gap:5px;background:var(--chip);border:1px solid transparent;border-radius:999px;padding:1px 10px 1px 7px;font-size:.9rem}
.chip.me{border-color:var(--acc)}
.act{border-top:1px solid var(--line);margin-top:8px;padding-top:4px}
.rw{position:relative;display:inline-block}
.main{display:flex;align-items:center;gap:8px;background:none;border:0;border-radius:12px;padding:6px 14px 6px 8px;font-weight:700;color:var(--mut);user-select:none;-webkit-user-select:none;touch-action:manipulation}
.main:hover{background:var(--chip)}
.ic{display:inline-block;font-size:1.5rem;line-height:1}.ic.off{filter:grayscale(1);opacity:.6}
.pick{position:absolute;left:0;bottom:calc(100% + 8px);display:flex;gap:2px;padding:6px 8px;background:var(--pop);border:1px solid var(--line);border-radius:999px;box-shadow:0 18px 40px -10px rgba(20,50,130,.55);visibility:hidden;opacity:0;transform:translateY(10px) scale(.85);transform-origin:left bottom;transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1),visibility 0s .3s;z-index:5}
.pick::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.rw.open .pick{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.opt{position:relative;background:none;border:0;font-size:1.85rem;line-height:1;padding:6px;border-radius:50%;opacity:0;transform:translateY(24px) scale(.2) rotate(-25deg);transition:opacity .2s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.rw.open .opt{opacity:1;transform:none;transition-delay:calc(var(--i)*45ms)}
.rw.open .opt:hover,.rw.open .opt:focus-visible{transform:translateY(-14px) scale(1.5);transition-delay:0s;z-index:2}
.opt.sel{background:var(--chip)}
.opt::after{content:attr(data-l);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(.6);font:700 .72rem Raleway;white-space:nowrap;background:#1e3a8a;color:#fff;padding:2px 9px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s}
.opt:hover::after,.opt:focus-visible::after{opacity:1;transform:translateX(-50%)}
.fx{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.pt,.fly,.ring{position:absolute;line-height:1;will-change:transform,opacity}
.fly{font-size:2rem}.ring{width:44px;height:44px;border-radius:50%;border:2px solid}
.say{text-align:center;padding:34px 24px;font:italic 700 1.5rem/1.5 'Playfair Display',serif;min-height:170px;display:grid;place-items:center;perspective:800px}
.say small{display:block;font:600 .8rem Raleway;color:var(--mut);margin-top:12px}
.flip{animation:fp .7s cubic-bezier(.3,1.3,.5,1)}
@keyframes fp{from{opacity:0;transform:rotateX(70deg) scale(.9)}}
.mini{display:flex;gap:6px;margin-left:auto}
.mini button{background:none;border:0;color:var(--mut);padding:2px 8px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:#1e3a8a;color:#fff;padding:10px 20px;border-radius:999px;opacity:0;transition:.4s cubic-bezier(.34,1.56,.64,1);z-index:70;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
dialog{border:0;border-radius:28px;padding:24px;width:min(440px,92vw);background:var(--pop);color:var(--ink);box-shadow:0 30px 80px -20px rgba(10,30,100,.7)}
dialog[open]{animation:pop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.9)}}
dialog::backdrop{background:rgba(10,30,80,.45);backdrop-filter:blur(6px)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.stats b{display:block;font:italic 800 1.8rem 'Playfair Display',serif}
.foot{text-align:center;font-size:.8rem;color:var(--mut);padding:0 20px 40px;max-width:560px;margin:0 auto}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}
@media(max-width:820px){.hero{grid-template-columns:1fr;padding-top:0}.art{max-height:44vh;order:-1}.logo{font-size:1.5rem}}
@media(max-width:420px){.opt{font-size:1.6rem;padding:5px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* ===== Online version additions ===== */
h1{position:relative}
.hero{grid-template-columns:1fr 1.15fr}
.art{max-height:74vh}
.cta{display:inline-flex;align-items:center;gap:10px}
.why{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:22px;position:relative;z-index:1}
.why-ic{width:130px;overflow:visible}
.why h2{margin-bottom:.3em}
.wave{display:block;width:100%;height:110px;margin-top:-50px;position:relative;z-index:0}
.c{text-align:center;justify-content:center}
.pills.c{display:flex}
.cfg{margin:0 4vw 10px;padding:12px 20px;border-radius:18px}
dialog input{width:100%;margin:6px 0;border:1px solid var(--line);background:var(--chip);color:var(--ink);border-radius:14px;padding:12px 14px;font:inherit}
.err{color:#d6455d;min-height:1.4em;margin:2px 0}
.card.mc{background:var(--mb);color:#2a3550;border-color:color-mix(in srgb,var(--ma) 30%,#fff)}
.mc .meta,.mc .hint,.mc .main,.mc .mini button{color:var(--ma)}
.mc .tg{background:rgba(255,255,255,.7);color:var(--ma)}
.mc .chip{background:rgba(255,255,255,.7);color:#2a3550}
.mc .chip.me{border-color:var(--ma)}
.mc .main:hover{background:rgba(255,255,255,.6)}
.mc .act{border-color:color-mix(in srgb,var(--ma) 25%,transparent)}
.pill[aria-pressed=true]{background:var(--pa,var(--acc));border-color:var(--pa,var(--acc))}
.pill[style*="--pa"][aria-pressed=true]{color:#fff!important}
.pill[style*="--pa"]:not([aria-pressed=true]){border-color:var(--pa)}
.pill{transition:transform .2s,background-color .3s}
.pill:hover,.btn:hover{transform:translateY(-2px)}
.btn:active,.pill:active,.tab:active,.cta:active{transform:scale(.95)}
.sk{height:96px;border-radius:22px;margin-bottom:14px;background:linear-gradient(90deg,var(--chip),rgba(255,255,255,.45),var(--chip));background-size:200% 100%;animation:shim 1.4s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.bn{display:none}
#ab{border:1px solid var(--line);background:var(--card)}
@media(max-width:820px){
 nav{padding:10px 14px;flex-wrap:nowrap}.tabs{display:none}
 #ab{padding:8px 14px;font-size:.9rem}
 .hero{grid-template-columns:1fr;padding:0 16px;min-height:0;gap:0}
 .art{max-height:46vh;margin-bottom:-8px}
 h1{font-size:clamp(3.2rem,16vw,4.6rem)}
 .tag{letter-spacing:.12em}
 .why{grid-template-columns:1fr;padding:22px 18px;margin:4vh 12px 6vh}
 .why-ic{width:90px;margin:0 auto}
 .bn{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:26px;padding:6px;box-shadow:var(--sh);justify-content:space-around}
 .bn button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:0;font:700 .68rem Raleway;color:var(--mut);padding:6px 12px;border-radius:20px;line-height:1.3}
 .bn i{font-style:normal;font-size:1.3rem}
 .bn button[aria-current=page]{color:#fff;background:linear-gradient(135deg,#3b73e0,#2a56b8)}
 body{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
 .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
 .wrap{padding:6px 12px 40px}.card{padding:16px 14px 8px}.say{font-size:1.25rem;padding:26px 16px}
}

/* ===== v2: starry hero, emoji-only reactions ===== */
.hero{position:relative}
.opt::after{display:none!important}
.pulse{animation:pls 5s ease-in-out infinite;transform-origin:260px 250px}
@keyframes pls{50%{transform:scale(1.1);opacity:.7}}
.shoots{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.shoots i{position:absolute;width:130px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));opacity:0;animation:shoot 7s linear infinite;filter:drop-shadow(0 0 4px #fff)}
.shoots i:nth-child(1){right:6%;top:10%}.shoots i:nth-child(2){right:32%;top:4%;animation-delay:2.6s}.shoots i:nth-child(3){right:0;top:38%;animation-delay:4.9s}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(-30deg)}4%{opacity:1}22%{opacity:0;transform:translate(-460px,265px) rotate(-30deg)}100%{opacity:0}}
.sky.l i{position:absolute;inset:auto;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px #fff;animation:tw 3.4s ease-in-out infinite}
@media(max-width:420px){.opt{font-size:1.4rem;padding:4px}.pick{padding:5px 4px;gap:0}}
@media(prefers-reduced-motion:reduce){.shoots,.pulse{display:none}}

/* ===== v3: calmer stars, no swirl/moon, stable mobile nav ===== */
@keyframes soft{50%{opacity:.35}}
.spk{animation:soft 9s ease-in-out infinite}
.sky.d i,.sky.l i{animation:soft 10s ease-in-out infinite}
.pulse{animation:pls 10s ease-in-out infinite}
@keyframes pls{50%{transform:scale(1.06);opacity:.8}}
.fl8{animation-duration:8s}
.clw{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.clw .cl{position:absolute}
.sky{overflow:hidden}
.hero{overflow-x:clip}
@media(max-width:820px){
 .bn{flex-wrap:nowrap;gap:0;margin:0;width:auto;max-width:calc(100vw - 20px);transform:translate3d(0,0,0);backface-visibility:hidden;will-change:transform}
 .bn button{flex:1 1 0;min-width:0;padding:6px 2px}
}

/* v4: dashboard has 2 stats now */
.stats{grid-template-columns:repeat(2,1fr)}

/* v5: share form inside "I Need to Hear Something" */
details.box summary{cursor:pointer;font-weight:700;list-style:none}
details.box summary::-webkit-details-marker{display:none}
details.box[open] summary{margin-bottom:8px}
.qi{padding:10px 0;border-top:1px solid var(--line);font-size:.92rem;overflow-wrap:anywhere}