:root {
  --bg: #f6f4ef; --panel: #fff; --fg: #1d1f24; --muted: #6b6f78; --accent: #c2410c;
  --ok: #15803d; --bad: #b91c1c; --cursor: #c2410c; --key: #eceae4; --border: #d9d6cf;
  --f0: #e11d48; --f1: #f97316; --f2: #eab308; --f3: #22c55e; --f4: #94a3b8;
  --f5: #94a3b8; --f6: #06b6d4; --f7: #3b82f6; --f8: #8b5cf6; --f9: #d946ef;
  --font: 'Iosevka', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --size: 1.6rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="contrast"]) {
    --bg: #15161a; --panel: #1e2026; --fg: #e8e6e1; --muted: #9a9ea8; --key: #2a2d35; --border: #34373f; --accent: #fb923c; --cursor: #fb923c;
  }
}
:root[data-theme="dark"] { --bg: #15161a; --panel: #1e2026; --fg: #e8e6e1; --muted: #9a9ea8; --key: #2a2d35; --border: #34373f; --accent: #fb923c; --cursor: #fb923c; }
:root[data-theme="contrast"] { --bg: #000; --panel: #000; --fg: #fff; --muted: #aaa; --key: #000; --border: #fff; --accent: #ffde00; --ok: #00ff66; --bad: #ff4d4d; --cursor: #ffde00; }
:root[data-large="true"] { --size: 2.3rem; font-size: 120%; }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before { transition: none !important; animation: none !important; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, sans-serif; }
header { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 8px; }
h1 { margin: 0; font: 700 1.5rem var(--font); letter-spacing: -0.02em; }
h1 span { color: var(--accent); }
h2 { font-size: 1.05rem; margin: 28px 0 10px; }
nav button { background: none; border: 0; color: var(--muted); font: inherit; padding: 6px 12px; cursor: pointer; border-radius: 6px; }
nav button[aria-current="page"] { color: var(--fg); background: var(--key); font-weight: 600; }
main { max-width: 980px; margin: 0 auto; padding: 20px 16px 40px; }
footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 16px; }
button, select, input, textarea { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
.danger { color: var(--bad); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--panel); padding: 6px; z-index: 9; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
#custom-wrap textarea { width: 100%; display: block; margin: 6px 0; }
.info { color: var(--muted); min-height: 1.5em; font-size: 0.95rem; }
.info .keys code { padding: 1px 5px; margin: 0 1px; border-radius: 4px; background: var(--key); }
.info .keys code.focus { background: var(--accent); color: var(--bg); }
.live { display: flex; gap: 20px; color: var(--muted); font-family: var(--font); margin: 8px 0; }
.live b { color: var(--fg); }
.typing { font-family: var(--font); font-size: var(--size); line-height: 1.6; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px 22px; min-height: 140px; white-space: pre-wrap; word-break: break-word; cursor: text; color: var(--muted); }
.typing:focus { border-color: var(--accent); outline: none; }
.typing .ok { color: var(--fg); }
.typing .bad { color: var(--bad); text-decoration: underline; background: color-mix(in srgb, var(--bad) 15%, transparent); }
.typing .fixed { color: var(--fg); text-decoration: underline dotted var(--bad); }
.typing .cur { border-left: 2px solid var(--cursor); margin-left: -2px; animation: blink 1s steps(1) infinite; }
.typing.blind .ok, .typing.blind .bad { color: var(--fg); background: none; text-decoration: none; }
.typing .nl::before { content: '⏎'; opacity: 0.35; }
@keyframes blink { 50% { border-color: transparent; } }
.hint { color: var(--muted); font-size: 0.85rem; }
.results:not(:empty) { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; padding: 12px 16px; margin: 12px 0; }
.results dl { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
.results dt { color: var(--muted); font-size: 0.8rem; }
.results dd { margin: 0; font: 600 1.4rem var(--font); }
.keyboard-wrap { margin-top: 18px; }
.kb { width: 100%; max-width: 720px; display: block; margin: 0 auto; }
.kb rect { fill: var(--key); stroke: var(--border); }
.kb text { fill: var(--fg); font: 13px var(--font); pointer-events: none; }
.kb .key rect { stroke-width: 1; }
.kb .key.next rect { stroke-width: 3; }
.kb .finger-0 rect { stroke: var(--f0); } .kb .finger-0.next rect { fill: var(--f0); } .finger-bg-0 { background: var(--f0); }
.kb .finger-1 rect { stroke: var(--f1); } .kb .finger-1.next rect { fill: var(--f1); } .finger-bg-1 { background: var(--f1); }
.kb .finger-2 rect { stroke: var(--f2); } .kb .finger-2.next rect { fill: var(--f2); } .finger-bg-2 { background: var(--f2); }
.kb .finger-3 rect { stroke: var(--f3); } .kb .finger-3.next rect { fill: var(--f3); } .finger-bg-3 { background: var(--f3); }
.kb .finger-4 rect { stroke: var(--f4); } .kb .finger-4.next rect { fill: var(--f4); } .finger-bg-4 { background: var(--f4); }
.kb .finger-5 rect { stroke: var(--f5); } .kb .finger-5.next rect { fill: var(--f5); } .finger-bg-5 { background: var(--f5); }
.kb .finger-6 rect { stroke: var(--f6); } .kb .finger-6.next rect { fill: var(--f6); } .finger-bg-6 { background: var(--f6); }
.kb .finger-7 rect { stroke: var(--f7); } .kb .finger-7.next rect { fill: var(--f7); } .finger-bg-7 { background: var(--f7); }
.kb .finger-8 rect { stroke: var(--f8); } .kb .finger-8.next rect { fill: var(--f8); } .finger-bg-8 { background: var(--f8); }
.kb .finger-9 rect { stroke: var(--f9); } .kb .finger-9.next rect { fill: var(--f9); } .finger-bg-9 { background: var(--f9); }
.kb.needs-shift .key[class*="finger"].next text { text-decoration: underline; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.card b { display: block; font: 600 1.6rem var(--font); }
.card span { color: var(--muted); font-size: 0.85rem; }
.chart { width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.chart .axis { stroke: var(--border); }
.chart .series { fill: none; stroke-width: 2; }
.chart .s0 { stroke: var(--accent); fill: var(--accent); }
.chart polyline.s0, .chart polyline.s1 { fill: none; }
.chart .s1 { stroke: #3b82f6; fill: #3b82f6; }
.chart text { font: 12px system-ui; stroke: none; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.bar-row { display: grid; grid-template-columns: 70px 1fr 50px; gap: 8px; align-items: center; font-size: 0.85rem; }
.bar { background: var(--key); height: 10px; border-radius: 5px; overflow: hidden; }
.bar .fill { height: 100%; }
.file input { max-width: 200px; }
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px 28px; }
.settings fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; display: grid; gap: 8px; }
.settings legend { font-weight: 600; padding: 0 6px; }
.settings label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 58%); gap: 10px; align-items: center; }
.settings label > * { justify-self: end; max-width: 100%; }
.settings fieldset { min-width: 0; }
.settings input[type="number"] { width: 5em; }