:root{--deep:#1a0a3a;--lilac:#d8c4ff;--mist:#f4edff;--gold:#ffd66b;--ok:#8ff0b5;--bad:#ffb3c1;--glass:rgba(255,255,255,.11);--line:rgba(255,255,255,.28)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--mist);line-height:1.5;
 background:radial-gradient(1200px 700px at 15% -10%,#7c3aed 0%,transparent 60%),radial-gradient(900px 600px at 100% 100%,#a855f7 0%,transparent 55%),linear-gradient(160deg,var(--deep),#2e1065);
 background-attachment:fixed;display:flex;flex-direction:column;align-items:center;padding:16px}
.bar{width:100%;max-width:960px;height:8px;border-radius:99px;background:var(--glass);overflow:hidden;margin-bottom:16px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lilac),var(--gold));transition:width .3s linear}
.card{width:100%;max-width:960px;min-height:420px;padding:clamp(18px,4vw,44px);background:var(--glass);border:1px solid var(--line);border-radius:28px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(10,0,40,.45)}
.view,.step{display:none}.view.on,.step.on{display:block;animation:in .3s ease}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1,h2{line-height:1.15;margin:0 0 14px;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,7vw,3.8rem)}h2{font-size:clamp(1.5rem,4.5vw,2.3rem)}
p{margin:0 0 12px;font-size:clamp(1rem,2.4vw,1.15rem);max-width:64ch}
ul{padding-left:1.2em;margin:0 0 12px;max-width:64ch}li{margin-bottom:8px}
.chip{display:inline-block;padding:4px 14px;border-radius:99px;background:rgba(255,255,255,.16);font-size:.95rem;margin-bottom:12px}
.big{font-size:clamp(2.6rem,11vw,5.5rem);font-weight:800;color:var(--gold);line-height:1;margin:0 0 8px;letter-spacing:.04em}
.nav{width:100%;max-width:960px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.dots{display:flex;gap:8px}
.dots button{width:14px;height:14px;padding:0;border-radius:50%;border:2px solid var(--lilac);background:transparent;cursor:pointer}
.dots button[aria-current="true"]{background:var(--gold);border-color:var(--gold)}
.btn{font:inherit;font-weight:700;padding:12px 26px;border-radius:99px;border:0;cursor:pointer;background:var(--lilac);color:var(--deep);min-height:46px;transition:transform .15s}
.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--mist);border:2px solid var(--line)}.btn.main{background:var(--gold)}
input{font:inherit;width:100%;max-width:340px;padding:12px 16px;margin:0 0 12px;border-radius:14px;border:2px solid var(--line);background:rgba(0,0,0,.25);color:#fff;display:block}
label.l{display:block;margin-bottom:4px;font-weight:600}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.err{color:var(--bad);min-height:1.5em}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.ans{display:flex;align-items:center;gap:12px;min-height:76px;padding:14px 18px;border-radius:18px;border:3px solid transparent;font:inherit;font-weight:700;font-size:1.1rem;text-align:left;color:#fff}
button.ans{cursor:pointer}button.ans:hover:not(:disabled){filter:brightness(1.12)}
.ans .shape{font-size:1.6rem;flex:none}
.a0{background:#7c3aed}.a1{background:#be185d}.a2{background:#f59e0b;color:var(--deep)}.a3{background:#0f766e}
.ans.dim{opacity:.35}.ans.right{border-color:#fff;box-shadow:0 0 0 4px var(--ok)}.ans.picked{border-color:var(--gold)}
.ans small{margin-left:auto;font-size:1rem;opacity:.9}
.timer{font-size:2rem;font-weight:800;color:var(--gold)}
.row{display:flex;gap:12px;padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.09);margin-bottom:6px}
.row span{flex:1;overflow:hidden;text-overflow:ellipsis}.row em{font-style:normal;font-weight:800;color:var(--gold)}
.names{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.names span{padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.16)}
.ok{color:var(--ok)}.bad{color:var(--bad)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:9}
@media(prefers-reduced-motion:reduce){.view.on,.step.on{animation:none}}