:root{--bg:#f7fbff;--card:#ffffffdd;--text:#172033;--muted:#64748b;--brand:#4f46e5;--good:#16a34a;--bad:#dc2626;--line:#dbe4f0}body.dark{--bg:#08111f;--card:#111827dd;--text:#f8fafc;--muted:#94a3b8;--line:#334155}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}.bg{position:fixed;inset:0;background:radial-gradient(circle at 10% 10%,#a5b4fc55,transparent 35%),radial-gradient(circle at 90% 0,#67e8f955,transparent 30%);z-index:-1}.app{max-width:1100px;margin:auto;padding:28px}.hero{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--brand);font-weight:800;font-size:12px}.hero h1{font-size:clamp(36px,6vw,68px);margin:.1em 0}.panel{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:28px;padding:24px;margin:18px 0;box-shadow:0 20px 60px #0f172a18}.grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}label{display:block;font-weight:700;margin:14px 0}input,select{width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--line);font-size:16px;background:var(--card);color:var(--text)}button{border:0;border-radius:999px;padding:13px 20px;font-weight:800;cursor:pointer}.primary{background:var(--brand);color:white}.ghost{background:var(--card);color:var(--text);border:1px solid var(--line)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stat{padding:22px;border-radius:22px;background:linear-gradient(135deg,#eef2ff,#ecfeff);color:#172033}.stat strong{font-size:38px;display:block}.stat span{color:#475569}.hidden{display:none}.quizbar{display:flex;justify-content:space-between;font-weight:900}.progress{height:12px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin:18px 0}.progress div{height:100%;width:0;background:var(--brand);transition:.25s}.question{text-align:center}.visual{min-height:110px;display:grid;place-items:center;font-size:76px}.visual img{max-width:min(440px,90%);max-height:230px;border-radius:16px;box-shadow:0 12px 30px #0002;border:1px solid var(--line);background:white}.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}.answers button{background:var(--card);color:var(--text);border:2px solid var(--line);font-size:17px;min-height:64px}.answers button.correct{background:var(--good);color:white}.answers button.wrong{background:var(--bad);color:white}.resultScore{font-size:64px;font-weight:900;color:var(--brand)}.badges{display:flex;gap:8px;flex-wrap:wrap}.badge{padding:8px 12px;border-radius:99px;background:#fef3c7;color:#78350f;font-weight:800}.tabs{display:flex;gap:10px}.tabs button{background:var(--card);border:1px solid var(--line);color:var(--text)}.tabs .active{background:var(--brand);color:#fff}.row{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}.muted{color:var(--muted)}@media(max-width:750px){.grid,.answers,.cards{grid-template-columns:1fr}.app{padding:16px}.hero{align-items:flex-start}.row{grid-template-columns:30px 1fr}.row .time{grid-column:2}}
.correct-pop{animation:correctPop .55s ease}.wrong-shake{animation:wrongShake .45s ease}.answer-burst{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);font-size:90px;pointer-events:none;z-index:20;animation:burstFloat .9s ease forwards}.finish-celebrate{animation:finishCelebrate 1.1s ease}.finish-celebrate::after{content:'🎊';position:fixed;inset:auto 0 8vh 0;text-align:center;font-size:84px;pointer-events:none;animation:burstFloat 1.1s ease forwards}@keyframes correctPop{0%{transform:scale(1)}45%{transform:scale(1.035);box-shadow:0 0 0 8px #16a34a22}100%{transform:scale(1)}}@keyframes wrongShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}@keyframes burstFloat{0%{opacity:0;transform:translate(-50%,-40%) scale(.65)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%) scale(1.25)}}@keyframes finishCelebrate{0%{transform:scale(.96);opacity:.35}60%{transform:scale(1.02);opacity:1}100%{transform:scale(1)}}

.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.volumeControl{margin:0;display:flex;align-items:center;gap:8px;font-size:13px}.volumeControl input{width:110px;padding:0}.answers button.correct{animation:answerCorrect .55s ease}.answers button.wrong{animation:answerWrong .5s ease}.primary:active,.ghost:active,.answers button:active{transform:scale(.98)}@keyframes answerCorrect{0%{transform:scale(1)}45%{transform:scale(1.06);filter:brightness(1.08)}100%{transform:scale(1)}}@keyframes answerWrong{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}@media(max-width:750px){.top-actions{justify-content:flex-start}.volumeControl{width:100%}.volumeControl input{width:100%}}