:root{--ink:#f3f6fc;--muted:#9aa7c2;--faint:#6f7c98;--blue:#3b82f6;--indigo:#6366f1;--ok:#34d399;--radius:28px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px;font-family:"General Sans","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:radial-gradient(120% 95% at 50% 42%,#122a4e 0%,#0b1a32 45%,#080f1d 100%);overflow:hidden;position:relative}
body::before{content:"";position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:104vmin;height:76vmin;border-radius:50%;background:radial-gradient(ellipse at center,rgba(74,144,255,.36),rgba(48,100,225,.12) 45%,transparent 68%);filter:blur(50px);z-index:0;pointer-events:none}
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat;background-image:radial-gradient(1px 1px at 8% 12%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 22% 64%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 33% 22%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 47% 8%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 58% 78%,rgba(255,255,255,.55),transparent),radial-gradient(1.5px 1.5px at 66% 35%,rgba(255,255,255,.65),transparent),radial-gradient(1px 1px at 78% 62%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 88% 18%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 15% 88%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 40% 92%,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 73% 88%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 5% 48%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 84% 44%,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 28% 40%,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 62% 14%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 95% 64%,rgba(255,255,255,.5),transparent);animation:twinkle 5s ease-in-out infinite,driftA 75s ease-in-out infinite}
.stars-2{background-image:radial-gradient(2px 2px at 18% 30%,rgba(200,225,255,.85),transparent),radial-gradient(2px 2px at 50% 72%,rgba(200,225,255,.8),transparent),radial-gradient(2px 2px at 80% 26%,rgba(200,225,255,.85),transparent),radial-gradient(2px 2px at 36% 82%,rgba(200,225,255,.75),transparent),radial-gradient(2px 2px at 70% 52%,rgba(200,225,255,.8),transparent),radial-gradient(2px 2px at 12% 70%,rgba(200,225,255,.75),transparent),radial-gradient(2px 2px at 91% 58%,rgba(200,225,255,.8),transparent);animation:twinkle 8s ease-in-out infinite .8s,driftB 95s ease-in-out infinite}
.stars-3{filter:drop-shadow(0 0 4px rgba(130,180,255,.6));background-image:radial-gradient(2.5px 2.5px at 25% 28%,rgba(255,255,255,.95),rgba(150,190,255,.45) 38%,transparent 72%),radial-gradient(2.5px 2.5px at 70% 60%,rgba(255,255,255,.95),rgba(150,190,255,.45) 38%,transparent 72%),radial-gradient(2.5px 2.5px at 86% 30%,rgba(255,255,255,.95),rgba(150,190,255,.45) 38%,transparent 72%),radial-gradient(2.5px 2.5px at 40% 82%,rgba(255,255,255,.95),rgba(150,190,255,.45) 38%,transparent 72%);animation:glowpulse 4.5s ease-in-out infinite,driftA 110s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:.8}}
@keyframes glowpulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes driftA{0%{transform:translate(0,0)}50%{transform:translate(14px,-10px)}100%{transform:translate(0,0)}}
@keyframes driftB{0%{transform:translate(0,0)}50%{transform:translate(-12px,12px)}100%{transform:translate(0,0)}}
.topbar{position:fixed;top:22px;left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:0 26px}
.pill{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;background:rgba(13,22,40,.55);border:1px solid rgba(255,255,255,.08);font-size:.82rem;font-weight:500;color:#c7d2e6;backdrop-filter:blur(10px);max-width:62vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pill-dot{width:15px;height:15px;border-radius:5px;background:linear-gradient(135deg,#34d399,#22d3ee);flex:none}
.card{position:relative;z-index:2;width:min(508px,100%);border-radius:var(--radius);background:linear-gradient(180deg,rgba(24,34,58,.82) 0%,rgba(22,36,70,.72) 60%,rgba(34,70,150,.6) 100%);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);border:1px solid rgba(255,255,255,.16);box-shadow:0 44px 110px -34px rgba(0,0,0,.78),0 0 64px -12px rgba(90,150,255,.42),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -30px 60px -34px rgba(86,152,255,.3);padding:34px 34px 40px;overflow:hidden;animation:cardIn .55s cubic-bezier(.16,1,.3,1)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px);background-size:15px 15px;-webkit-mask-image:linear-gradient(180deg,transparent 28%,#000 100%);mask-image:linear-gradient(180deg,transparent 28%,#000 100%);opacity:.7}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.state{position:relative;z-index:1;animation:fadeUp .4s ease}
.hidden{display:none!important}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{color:var(--muted);font-size:.9rem;font-weight:500;margin-bottom:16px}
h1{font-size:1.88rem;font-weight:600;letter-spacing:-.015em;line-height:1.16;margin:0}
.muted{color:var(--muted);font-size:.98rem;line-height:1.55;margin:8px 0 0}
.sub{margin-top:6px}
.hint{color:var(--faint);font-size:.82rem;margin-top:18px}
a{color:#9bbcff;font-weight:600;text-decoration:none}
a:hover{text-decoration:underline}
.faces{display:flex;justify-content:space-between;gap:12px;margin-top:30px}
.face{width:66px;height:66px;flex:1;max-width:68px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.face svg{width:40px;height:40px}
.face svg path{stroke:rgba(255,255,255,.92);stroke-width:2.4;fill:none;stroke-linecap:round;transition:stroke .18s ease}
.face:hover,.face.active{background:#fff;transform:translateY(-3px) scale(1.06);box-shadow:0 14px 30px -6px rgba(90,150,255,.7),0 0 0 1px rgba(255,255,255,.5)}
.face:hover svg path,.face.active svg path{stroke:#0b1326}
.face:focus-visible{outline:2px solid #7aa6ff}
form{margin-top:22px;text-align:left}
textarea{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:13px 15px;font:inherit;color:var(--ink);background:rgba(255,255,255,.04);resize:vertical;transition:border-color .15s ease,box-shadow .15s ease}
textarea::placeholder{color:#6f7b98}
textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(59,130,246,.18)}
.btn-primary{width:100%;margin-top:13px;border:none;cursor:pointer;padding:14px;border-radius:14px;color:#fff;font:inherit;font-weight:600;font-size:1rem;background:linear-gradient(135deg,var(--blue),var(--indigo));box-shadow:0 14px 28px -10px rgba(59,130,246,.7);transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(59,130,246,.85)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.6;cursor:default;transform:none}
.spinner{width:42px;height:42px;margin:6px auto 16px;border:4px solid rgba(255,255,255,.12);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.check{width:70px;height:70px;margin:4px auto 16px;display:block}
.check-circle{fill:none;stroke:var(--ok);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:draw .5s ease forwards}
.check-mark{fill:none;stroke:var(--ok);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .4s .42s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:440px){.card{padding:26px 22px 32px}.faces{gap:8px}.face{height:56px}.face svg{width:34px;height:34px}h1{font-size:1.5rem}.topbar{padding:0 16px}}
.back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#c7d2e6;cursor:pointer;margin-bottom:18px;transition:background .15s ease,transform .15s ease}
.back:hover{background:rgba(255,255,255,.12);transform:translateX(-3px)}
.back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}