:root { --bg:#0b1220; --text:#e5f1ff; --muted:#9fb0c5; --card:#111827; --radius:16px; }
*{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Ubuntu,Inter}
.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#0c1526;position:sticky;top:0}
main{max-width:820px;margin:24px auto;padding:0 16px}
form#controls{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-bottom:18px}
.turnstile{grid-column:1/-1}
button{padding:10px 14px;border-radius:12px;border:0;background:#2a68ff;color:#fff;cursor:pointer}
.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.choices{list-style:none;padding:0;margin:14px 0;display:grid;gap:10px}
.choices li{padding:10px 12px;border-radius:12px;background:#152033;cursor:pointer}
.choices li.correct{outline:2px solid #10b981}
.choices li.wrong{outline:2px solid #ef4444}
.muted{color:var(--muted)}
.loader{display:grid;place-items:center;padding:40px 0}
.loader[hidden]{display:none!important}
.dots{display:inline-flex;gap:6px;align-items:center;margin-bottom:6px}
.dots span{width:8px;height:8px;border-radius:50%;background:#222;display:inline-block;animation:b 1.2s infinite ease-in-out}
.dots span:nth-child(2){animation-delay:.15s}
.dots span:nth-child(3){animation-delay:.3s}
@keyframes b{0%,80%,100%{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}