:root { color-scheme: dark; --bg:#191d20; --text:#d8dfdf; --muted:#879292; --pending:#778182; --accent:#88cbbb; --error:#ed8e95; font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace; background:var(--bg); color:var(--text); }
* { box-sizing:border-box; }
body { margin:0; min-width:280px; }
main { width:min(1100px,calc(100% - 96px)); margin:0 auto; padding:clamp(48px,13vh,140px) 0 60px; }
.logo { display:block; margin:0 0 52px; }
button { color:var(--muted); background:transparent; border:0; font:inherit; cursor:pointer; border-radius:4px; transition:color .15s,background .15s; }
button:hover:not(:disabled) { color:var(--text); background:#252c2e; }
button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
button:disabled { cursor:default; }
.settings { display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start; margin:0; }
fieldset { margin:0; padding:0; border:0; min-width:0; }
legend { color:var(--muted); font-size:10px; letter-spacing:.04em; padding:0; margin-bottom:11px; }
legend span { font-size:0; }
.choices { display:flex; gap:2px; }
.choices button { padding:7px 8px; font-size:13px; }
.choices button:first-child { margin-left:-8px; }
button[aria-pressed="true"] { color:var(--accent); }
fieldset:disabled { opacity:.35; }
.toggle { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13px; }
.toggle i { display:block; width:21px; height:12px; border-radius:10px; background:#3f494a; position:relative; }
.toggle i:after { content:""; display:block; width:6px; height:6px; border-radius:100%; background:var(--bg); position:absolute; top:3px; left:3px; transition:transform .15s; }
.toggle[aria-pressed="true"] i { background:var(--accent); }
.toggle[aria-pressed="true"] i:after { transform:translateX(9px); }
.test,.results { margin-top:66px; }
.test-status { display:flex; align-items:center; justify-content:space-between; min-height:30px; margin-bottom:18px; font-size:12px; color:var(--muted); }
#progress { font-size:23px; color:var(--accent); font-variant-numeric:tabular-nums; }
#progress span { font-size:12px; margin-left:6px; color:var(--muted); }
.typing-area { position:relative; min-height:156px; }
.words { height:156px; overflow:hidden; font-size:27px; line-height:52px; letter-spacing:.015em; color:var(--pending); overflow-wrap:anywhere; scroll-behavior:smooth; }
.word { display:inline-block; margin-right:.65em; position:relative; max-width:100%; overflow-wrap:anywhere; }
.char { position:relative; }
.char.correct { color:var(--text); }
.char.wrong { color:var(--error); }
.char.extra { color:var(--error); opacity:.65; }
.word.skipped { text-decoration:underline; text-decoration-color:var(--error); text-decoration-thickness:1px; text-underline-offset:8px; }
.caret:before { content:""; position:absolute; left:0; top:-3px; height:1.3em; width:2px; background:var(--accent); border-radius:1px; }
.typing-area:focus-within .caret:before { opacity:1; }
.typing-area.running:focus-within .caret:before { animation:none; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.2; } }
#input { position:absolute; inset:0; width:100%; height:100%; resize:none; border:0; padding:0; opacity:.015; color:transparent; caret-color:transparent; background:transparent; font:inherit; font-size:16px; outline:0; overflow:hidden; }
.typing-area:focus-within { outline:1px solid transparent; }
.typing-area.keyboard-focus { outline:1px solid #536762; outline-offset:12px; border-radius:2px; }
.focus-message { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; background:#191d20e8; color:var(--text); font-size:14px; pointer-events:none; text-align:center; }
.focus-message span { color:var(--muted); font-size:11px; }
.test-actions { display:flex; justify-content:center; margin-top:30px; }
.restart { padding:12px; display:flex; }
.restart svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hint { font-size:10px; color:var(--muted); text-align:center; margin-top:30px; }
.hint span { margin-left:12px; }
kbd { font:inherit; background:#262e30; padding:3px 5px; border-radius:3px; }
.result-heading { color:var(--muted); font-size:12px; margin:0 0 32px; outline:none; }
.metrics { display:grid; grid-template-columns:1.3fr 1.3fr 1fr 1fr; gap:30px; margin:0; }
dt { font-size:12px; color:var(--muted); margin-bottom:12px; }
dd { font-size:44px; margin:0; line-height:1.3; font-variant-numeric:tabular-nums; }
.primary dd { color:var(--accent); }
dd small { font-size:14px; margin-left:7px; color:var(--muted); }
.result-note { font-size:11px; color:var(--muted); margin:30px 0; }
.result-actions { display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
.result-actions button { font-size:12px; padding:11px 0; }
.result-actions button span { margin-left:12px; }
.result-actions .primary-action { color:var(--accent); }
.results .hint { margin-top:48px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none !important; }
@media(max-width:1000px) { .settings { gap:22px 26px; } }
@media(max-width:600px) { main { width:calc(100% - 40px); padding-top:34px; } .logo { width:40px; height:40px; margin-bottom:36px; } .settings { display:grid; grid-template-columns:1fr 1fr; gap:24px 16px; } .choices button { padding:7px; font-size:12px; } .choices button:first-child { margin-left:-7px; } .test,.results { margin-top:42px; } .words { font-size:23px; line-height:45px; height:180px; } .typing-area { min-height:180px; } .test-status { font-size:10px; } .metrics { grid-template-columns:1fr 1fr; gap:26px 16px; } dd { font-size:36px; } .result-actions { gap:12px 24px; } .hint { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }