*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0f;--surface:#13131a;--surface-2:#1c1c26;--border:hsla(0,0%,100%,.08);--accent:#f5a623;--accent-2:#7c3aed;--correct:#22c55e;--wrong:#f43f5e;--text-1:#f4f4f5;--text-2:#a1a1aa;--text-3:#71717a;--font-display:"Syne",sans-serif;--font-body:"DM Sans",sans-serif;--radius:16px;--radius-sm:8px;--radius-lg:24px}body,html{height:100%;background:var(--bg);color:var(--text-1);font-family:var(--font-body);-webkit-font-smoothing:antialiased}.app-shell{min-height:100vh;justify-content:center;padding:24px;background:radial-gradient(ellipse 60% 40% at 20% 10%,rgba(245,166,35,.08) 0,transparent 60%),radial-gradient(ellipse 50% 50% at 80% 90%,rgba(124,58,237,.1) 0,transparent 60%),var(--bg)}.app-shell,.setup-screen{display:flex;align-items:center}.setup-screen{width:100%;max-width:440px;flex-direction:column;gap:32px;animation:fadeUp .5s ease both}.logo-mark{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;letter-spacing:-.5px}.app-title,.logo-mark{font-family:var(--font-display);font-weight:800}.app-title{font-size:clamp(36px,8vw,52px);letter-spacing:-2px;line-height:1;background:linear-gradient(135deg,var(--text-1) 40%,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-top:-8px}.app-subtitle{font-size:16px;color:var(--text-2);text-align:center;line-height:1.5;margin-top:-16px}.setup-group{width:100%;display:flex;flex-direction:column;gap:10px}.setup-label{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-3)}.toggle-row{display:flex;gap:8px}.toggle-btn{flex:1 1;padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease}.toggle-btn:hover{border-color:rgba(245,166,35,.3);color:var(--text-1)}.toggle-btn.active{background:rgba(245,166,35,.12);border-color:var(--accent);color:var(--accent);font-weight:600}.grade-hint{font-size:12px;color:var(--text-3);margin-top:2px}.start-btn{width:100%;padding:16px 24px;border-radius:var(--radius);border:none;background:linear-gradient(135deg,var(--accent),#e8940f);color:#0a0a0f;font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.3px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 4px 24px rgba(245,166,35,.3)}.start-btn:hover{transform:translateY(-1px);box-shadow:0 6px 32px rgba(245,166,35,.4)}.start-btn:active{transform:translateY(0)}.start-arrow{font-size:18px;transition:transform .15s ease}.start-btn:hover .start-arrow{transform:translateX(3px)}.elevenlabs-credit{font-size:12px;color:var(--text-3)}.elevenlabs-credit a{color:var(--text-2);text-decoration:none;transition:color .15s}.elevenlabs-credit a:hover{color:var(--text-1)}.session-screen{width:100%;max-width:440px;display:flex;flex-direction:column;gap:20px;animation:fadeUp .4s ease both}.progress-track{height:4px;background:var(--surface-2);border-radius:99px;position:relative;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px;transition:width .6s cubic-bezier(.34,1.56,.64,1)}.progress-label{position:absolute;right:0;top:-20px;font-size:11px;color:var(--text-3);font-family:var(--font-display);font-weight:600}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px 32px;min-height:360px;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease,box-shadow .3s ease;position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 0,rgba(245,166,35,.04),transparent);pointer-events:none}.card--correct{border-color:var(--correct);box-shadow:0 0 40px rgba(34,197,94,.12)}.card--wrong{border-color:var(--wrong);box-shadow:0 0 40px rgba(244,63,94,.12)}.card--finished{border-color:var(--accent);box-shadow:0 0 60px rgba(245,166,35,.15)}.question-inner{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.op-badge{width:40px;height:40px;border-radius:10px;background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.2);font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--accent)}.numbers-display,.op-badge{display:flex;align-items:center;justify-content:center}.numbers-display{gap:12px;flex-wrap:wrap}.number-a,.number-b{font-size:clamp(40px,10vw,64px);font-weight:800;color:var(--text-1);letter-spacing:-2px}.number-a,.number-b,.op-symbol{font-family:var(--font-display);line-height:1}.op-symbol{font-size:clamp(28px,6vw,40px);font-weight:600;color:var(--accent)}.number-answer{font-family:var(--font-display);font-size:clamp(40px,10vw,64px);font-weight:800;color:var(--text-3);letter-spacing:-2px;line-height:1}.number-answer--blank{color:var(--accent);animation:pulse 1.2s ease infinite}.question-text{font-size:18px;color:var(--text-2);text-align:center;font-weight:300;letter-spacing:-.2px}.phase-label{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.5px;color:var(--text-3);text-align:center;min-height:20px}.waveform{display:flex;align-items:center;gap:4px;height:32px}.waveform-bar{width:3px;height:6px;background:var(--text-3);border-radius:99px;transition:background .2s}.waveform--active .waveform-bar{background:var(--accent);animation:wave .8s ease infinite alternate}@keyframes wave{0%{height:6px}to{height:28px}}.finished-inner{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.finished-emoji{font-size:56px;line-height:1;animation:pop .4s cubic-bezier(.34,1.56,.64,1) both}.finished-score{font-family:var(--font-display);font-size:72px;font-weight:800;color:var(--text-1);letter-spacing:-3px;line-height:1;animation:fadeUp .4s ease .1s both}.finished-total{font-size:36px;color:var(--text-3);font-weight:600}.finished-text{font-size:16px;color:var(--text-2);max-width:280px;line-height:1.5;font-weight:300;animation:fadeUp .4s ease .2s both}.restart-btn{margin-top:8px;padding:12px 28px;border-radius:var(--radius-sm);border:1px solid var(--accent);background:transparent;color:var(--accent);font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.3px;cursor:pointer;transition:all .15s ease;animation:fadeUp .4s ease .3s both}.restart-btn:hover{background:rgba(245,166,35,.1)}.score-strip{display:flex;justify-content:center;gap:8px}.score-dot{width:8px;height:8px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);transition:all .3s ease}.score-dot--done{background:var(--accent);border-color:var(--accent)}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.countdown-wrapper{position:relative;width:72px;height:72px;display:flex;align-items:center;justify-content:center}.countdown-number{position:absolute;font-family:var(--font-display);font-size:22px;font-weight:800;line-height:1}.how-it-works{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;display:flex;flex-direction:column;gap:8px}.how-it-works-title{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}.how-it-works-step{font-size:14px;color:var(--text-2);line-height:1.4}@media (max-width:480px){.card{padding:28px 20px;min-height:300px}.numbers-display{gap:8px}}