:root{--bg: #0f0d0a;--panel: #1c1812;--line: #38301f;--ink: #f4ede0;--dim: #b39f82;--accent: #c0843a;--accent2: #6f8fc0;--good: #3f7a4a;--bad: #7a2f33}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(900px 560px at 50% -8%,#221b12,var(--bg));color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex;justify-content:center}#app{width:100%;max-width:560px;padding:14px 14px 28px}header{text-align:center;margin-bottom:8px}h1{margin:0;font-size:30px;letter-spacing:5px;font-weight:800;color:var(--accent)}.sub{margin:4px 0 0;color:var(--dim);font-size:13px}.bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center;margin:12px 0}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{background:none;border:none;color:var(--dim);padding:6px 13px;font:600 13px system-ui;cursor:pointer}.seg button.active{background:var(--accent);color:#1a1206}.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:8px 16px;border-radius:999px;font:700 13px system-ui;cursor:pointer}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:#1a1206;border-color:var(--accent)}.tracks{display:grid;gap:8px;margin:10px 0 14px}.track{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:10px}.track .label{font:700 12px system-ui;letter-spacing:1px;text-align:right}.track.you .label{color:var(--accent)}.track.cpu .label{color:var(--accent2)}.meter{height:18px;background:#0a0805;border:1px solid var(--line);border-radius:999px;overflow:hidden;position:relative}.fill{height:100%;width:0%;transition:width .25s ease}.track.you .fill{background:linear-gradient(90deg,#8a5a22,var(--accent))}.track.cpu .fill{background:linear-gradient(90deg,#41598a,var(--accent2))}.scoreboard{display:flex;gap:10px;justify-content:center;margin:8px 0 12px}.readout{background:#0a0805;border:1px solid var(--line);border-radius:8px;padding:6px 16px;font:800 18px ui-monospace,monospace;color:var(--accent);min-width:86px;text-align:center}.readout.time{color:#e6c07a}.readout span{color:var(--dim);font-size:11px;display:block;font-weight:600;letter-spacing:.5px}.card-q{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 16px;text-align:center}.firstletter{font:800 40px ui-monospace,monospace;color:var(--accent);letter-spacing:2px}.firstletter small{font-size:16px;color:var(--dim);font-weight:600}.definition{margin:10px 4px 0;font-size:18px;line-height:1.4;min-height:50px}.answer{display:flex;gap:8px;margin:14px 0 0}#answer{flex:1;background:#0a0805;border:1px solid var(--line);border-radius:10px;color:var(--ink);font:700 20px ui-monospace,monospace;padding:10px 14px;outline:none}#answer:focus{border-color:var(--accent)}#answer.flash-good{border-color:var(--good);background:#112;box-shadow:0 0 0 2px var(--good) inset}#answer.flash-bad{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad) inset}.feedback{text-align:center;min-height:22px;margin-top:10px;font:700 14px system-ui;color:var(--dim)}.feedback.good{color:#7fd28e}.feedback.bad{color:#e08a8e}.controls{display:flex;gap:8px;justify-content:center;margin-top:12px}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#080604b8;padding:20px}.overlay.hidden{display:none}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;max-width:380px;width:100%;text-align:center}.card h2{margin:0 0 6px;font-size:24px;color:var(--accent)}.card p{color:var(--dim);margin:6px 0}.card .big{font:800 30px ui-monospace,monospace;color:var(--ink);margin:8px 0}.card .controls{margin-top:16px}