:root{--bg:#0e1620;--surface:#15202c;--edge:#24344a;--text:#edeae2;--sub:#7d93a6;--sub-dim:#44576b;--accent:#ff7a1c;--accent-ink:#0e1620;--blue:#85bcd8;--danger:#ef5a63;--danger-dim:#96454c;--font-display:"Chakra Petch", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box}html{height:100%}body{background:var(--bg);min-height:100%;color:var(--text);font-family:var(--font-mono);flex-direction:column;margin:0;font-size:16px;line-height:1.5;display:flex}.site-header{border-bottom:1px solid var(--edge);align-items:baseline;gap:1rem;padding:1.25rem clamp(1rem,4vw,2.5rem);display:flex}.logo{color:var(--text);align-items:center;gap:.6rem;text-decoration:none;display:inline-flex}.logo .flag{background:repeating-conic-gradient(var(--text) 0% 25%, var(--bg) 0% 50%) 0 0 / 9px 9px;border:1px solid var(--edge);border-bottom:3px solid var(--accent);width:27px;height:18px;transform:skew(-12deg)}.logo-text{font-family:var(--font-display);letter-spacing:.14em;font-size:1.3rem;font-style:italic;font-weight:700}.logo-text em{color:var(--blue);font-style:inherit}.tagline{color:var(--sub);letter-spacing:.04em;font-size:.78rem}main{flex:1;width:min(62rem,100% - 2rem);margin:0 auto;padding:clamp(1.5rem,6vh,4rem) 0 2rem}.site-footer{border-top:1px solid var(--edge);color:var(--sub-dim);letter-spacing:.04em;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem clamp(1rem,4vw,2.5rem);font-size:.75rem;display:flex}.brand-link{color:var(--sub);flex-direction:column;align-items:center;gap:.2rem;text-decoration:none;display:inline-flex}.brand-logo{opacity:.85;width:80px;height:auto;transition:opacity .15s}.brand-link:hover,.brand-link:focus-visible{color:var(--text)}.brand-link:hover .brand-logo,.brand-link:focus-visible .brand-logo{opacity:1}.brand-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.brand-version{color:var(--sub-dim);font-size:.68rem}@media (width<=720px){.site-footer{flex-direction:column}}.about{border-top:1px solid var(--edge);color:var(--sub);margin-top:clamp(4rem,14vh,8rem);padding-top:2rem;font-size:.85rem;line-height:1.7}.about h1{font-family:var(--font-display);letter-spacing:.02em;color:var(--text);margin:0 0 1rem;font-size:1.35rem;font-style:italic;font-weight:700;line-height:1.3}.about h2{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 .35rem;font-size:.95rem;font-style:italic;font-weight:700}.about p{max-width:68ch;margin:0 0 1rem}.about-modes{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem 2rem;margin:1.75rem 0;display:grid}.about-modes>div{border-left:3px solid var(--accent);padding-left:.9rem}.about-modes p{margin:0}.config{flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;margin-bottom:2.5rem;transition:opacity .25s;display:flex}.config.faded{opacity:0;pointer-events:none}.config-group{background:var(--surface);border:1px solid var(--edge);gap:.15rem;padding:.2rem;display:flex}.config button{appearance:none;color:var(--sub);font-family:var(--font-mono);cursor:pointer;background:0 0;border:0;padding:.35rem .7rem;font-size:.8rem;transition:color .15s,background .15s}.config button:hover{color:var(--text)}.config button.active{background:var(--accent);color:var(--accent-ink);font-weight:700}.config .unit{color:var(--sub-dim);align-self:center;padding:0 .5rem 0 .25rem;font-size:.72rem}.race-track{background:var(--surface);border:1px solid var(--edge);margin-bottom:1.75rem;position:relative;overflow:hidden}.start-line,.finish-line,.runoff,.tick{pointer-events:none;position:absolute;top:0;bottom:0}.start-line{background:var(--edge);width:2px}.finish-line{background:repeating-conic-gradient(var(--text) 0% 25%, var(--bg) 0% 50%) 0 0 / 10px 10px;opacity:.85;width:10px;animation:.4s ease-out track-fade-in}.runoff{background:repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 8%, transparent) 0 6px, transparent 6px 14px);animation:.4s ease-out track-fade-in;right:0}.tick{background:linear-gradient(to bottom, var(--edge) 0 7px, transparent 7px calc(100% - 7px), var(--edge) calc(100% - 7px));will-change:transform;width:1px;left:0}@keyframes track-fade-in{0%{opacity:0}}.place{color:var(--text);margin-right:.45em}.place.p1{color:var(--accent)}.flash{z-index:3;background:color-mix(in srgb, var(--bg) 55%, transparent);pointer-events:none;justify-content:center;align-items:center;gap:.7rem;animation:2s cubic-bezier(.2,.8,.2,1) forwards flash-call;display:flex;position:absolute;inset:0}.flash-text{font-family:var(--font-display);color:var(--text);font-size:3.6rem;font-style:italic;font-weight:700;line-height:1}.flash.win .flash-text{color:var(--accent)}.flash-sub{font-family:var(--font-display);color:var(--sub);font-size:1.1rem}@keyframes flash-call{0%{opacity:0;transform:translate(-48px)skew(-10deg)}14%{opacity:1;transform:translate(0)skew(-10deg)}72%{opacity:1;transform:translate(8px)skew(-10deg)}to{opacity:0;transform:translate(28px)skew(-10deg)}}@keyframes flash-fade{0%,70%{opacity:1}to{opacity:0}}.lane{height:46px;position:relative}.lane+.lane{border-top:2px dashed var(--edge)}.lane.you-lane{background:color-mix(in srgb, var(--accent) 5%, transparent)}.lane-label{letter-spacing:.08em;text-transform:uppercase;color:var(--sub);z-index:1;font-size:.62rem;position:absolute;top:3px;left:10px}.car-slot{will-change:transform;position:absolute;top:13px;left:0}.speedlines{background:repeating-linear-gradient(to bottom, var(--blue) 0 2px, transparent 2px 5px);width:26px;height:11px;animation:.3s linear infinite speedlines;position:absolute;top:7px;right:calc(100% + 2px)}@keyframes speedlines{0%{opacity:.9;transform:translate(5px)}to{opacity:0;transform:translate(-9px)}}.race-banner{background:var(--surface);border:1px solid var(--edge);border-left:4px solid var(--sub-dim);align-items:baseline;gap:.75rem;padding:.75rem 1.25rem;display:flex}.race-banner.won{border-left-color:var(--accent)}.race-banner .pos{font-family:var(--font-display);color:var(--sub);font-size:1.6rem;font-style:italic;font-weight:700}.race-banner.won .pos{color:var(--accent)}.banner-note{color:var(--sub);font-size:.85rem}.goal{color:var(--sub);align-items:center;gap:.4rem;padding:0 .5rem;font-size:.8rem;display:inline-flex}.goal-input{background:var(--bg);border:1px solid var(--edge);width:3.4rem;color:var(--text);font-family:var(--font-mono);text-align:center;padding:.25rem .35rem;font-size:.8rem}.goal-input:focus{outline:2px solid var(--accent);outline-offset:-1px}.live{opacity:0;min-height:2.2rem;font-family:var(--font-display);align-items:baseline;gap:1.5rem;margin-bottom:.6rem;padding:0 .25rem;transition:opacity .2s;display:flex}.live.visible{opacity:1}.live-progress{color:var(--blue);font-size:1.5rem;font-weight:700}.live-wpm{color:var(--sub);font-size:1rem}.words-wrap{cursor:text;position:relative}.words-viewport{height:7.8rem;overflow:hidden}.words{user-select:none;flex-wrap:wrap;column-gap:1ch;font-size:1.5rem;line-height:2.6rem;transition:transform .15s ease-out;display:flex;position:relative}.words-wrap.unfocused .words{filter:blur(5px);opacity:.5}.word{white-space:nowrap;display:inline-block}.word.flawed{text-decoration:underline;text-decoration-color:var(--danger);text-underline-offset:6px;text-decoration-thickness:2px}.char{transition:color 50ms linear}.char.pending{color:var(--sub-dim)}.char.correct{color:var(--text)}.char.wrong{color:var(--danger)}.char.extra{color:var(--danger-dim)}.caret{background:var(--accent);will-change:transform;width:3px;height:1.7rem;transition:transform 70ms linear;position:absolute;top:.5rem;left:0}.caret.blink{animation:1.1s step-end infinite caret-blink}@keyframes caret-blink{50%{opacity:0}}.focus-note{color:var(--text);letter-spacing:.05em;pointer-events:none;place-items:center;font-size:.9rem;display:grid;position:absolute;inset:0}.hints{text-align:center;color:var(--sub-dim);margin-top:2rem;font-size:.75rem}.hints kbd{font-family:var(--font-mono);background:var(--surface);border:1px solid var(--edge);border-bottom-width:2px;margin:0 .15rem;padding:.1rem .45rem}.hint-sep{margin:0 .5rem}.quote-source{color:var(--sub);font-style:italic}.results{flex-direction:column;gap:1.75rem;display:flex}.results-main{grid-template-columns:auto 1fr;align-items:center;gap:2.5rem;display:grid}@media (width<=720px){.results-main{grid-template-columns:1fr}}.results-headline{flex-direction:column;gap:.75rem;display:flex}.stat-big{flex-direction:column;display:flex}.stat-big .stat-label{color:var(--sub);font-size:.9rem}.stat-big .stat-value{font-family:var(--font-display);color:var(--accent);font-size:3.6rem;font-style:italic;font-weight:700;line-height:1.05}.stat-unit{font-size:2rem}.results-row{background:var(--surface);border:1px solid var(--edge);border-left:4px solid var(--accent);flex-wrap:wrap;gap:1rem 2.5rem;padding:1rem 1.25rem;display:flex}.stat-small{flex-direction:column;font-size:1rem;display:flex}.stat-small .stat-label{color:var(--sub);letter-spacing:.06em;text-transform:uppercase;font-size:.72rem}.results-actions{align-items:center;gap:1.25rem;display:flex}.results-actions .hints{margin:0}.btn-primary{appearance:none;background:var(--accent);color:var(--accent-ink);font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);border:0;padding:.65rem 1.5rem;font-size:.95rem;font-weight:700;transition:filter .15s}.btn-primary:hover{filter:brightness(1.1)}.wpm-graph{width:100%;height:auto;display:block}.wpm-graph .grid{stroke:var(--edge);stroke-width:1px}.wpm-graph .axis{fill:var(--sub-dim);font-size:11px;font-family:var(--font-mono)}.wpm-graph .line-raw{fill:none;stroke:var(--blue);stroke-width:1.5px;stroke-opacity:.55;stroke-linejoin:round}.wpm-graph .line-net{fill:none;stroke:var(--accent);stroke-width:2.5px;stroke-linejoin:round}.wpm-graph .err line{stroke:var(--danger);stroke-width:1.8px}@media (prefers-reduced-motion:reduce){.words,.caret,.char{transition:none}.car-slot,.tick{transition:none!important}.speedlines{display:none}.flash{animation-name:flash-fade}}