:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--font-mono:ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;--font-sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--bg:#2a1d16;--bg-grain:#35251c;--bg-elevated:#3a2a20;--fg:#f0e7dc;--fg-muted:#b09a89;--fg-faint:#8a7364;--rule:#4a352a;--case:#eceae6;--case-edge:#cfccc6;--case-shadow:#00000073;--key-bg:#f4f2ed;--key-side:#d9d5cd;--key-border:#c8c3b9;--key-fg:#4c4742;--key-fg-muted:#8d867d;--key-mod-bg:#cdcac4;--key-mod-side:#b3afa8;--key-mod-border:#a5a099;--key-mod-fg:#3f3b37;--key-accent-red-bg:#d8402e;--key-accent-red-fg:#fff4f0;--key-accent-blue-bg:#7fa8d8;--key-accent-blue-fg:#16233a;--key-next-ring:#4d84c4;--key-pressed-bg:#f2b21f;--key-pressed-side:#c98d10;--key-pressed-border:#a97400;--key-pressed-fg:#2b1d05;--accent:#f2b21f;--accent-cool:#7fa8d8;--accent-warm:#d8402e;--finger-pinky:#d8402e;--finger-ring:#e08a2e;--finger-middle:#4f9d5d;--finger-index:#4d84c4;--finger-thumb:#8d6bc4;--finger-tint:11%}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(ellipse 120% 80% at 50% 0%, var(--bg-grain), transparent 70%), var(--bg);color:var(--fg);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}a{color:var(--fg-muted);border-bottom:1px solid #0000;text-decoration:none}a:hover{color:var(--fg);border-bottom-color:currentColor}kbd{border:1px solid var(--key-mod-border);background:var(--key-mod-bg);min-width:1.6em;color:var(--key-mod-fg);font-family:var(--font-mono);text-align:center;border-bottom-width:3px;border-radius:6px;margin:0 .1em;padding:.05em .45em;font-size:.85em;display:inline-block}.app{grid-template-rows:auto 1fr auto;gap:1.75rem;max-width:1120px;min-height:100%;margin:0 auto;padding:2rem 1.5rem;display:grid}.app-header{text-align:center}.brand{font-family:var(--font-mono);letter-spacing:.04em;margin:0;font-size:clamp(2rem,6vw,3rem);font-weight:600}.brand-accent{color:var(--accent)}.tagline{color:var(--fg-muted);margin:.25rem 0 0}.app-main{flex-direction:column;align-items:center;gap:1.25rem;display:flex}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem 1.5rem;display:flex}.control{color:var(--fg-muted);align-items:center;gap:.5rem;font-size:.85rem;display:inline-flex}.segmented{border:1px solid var(--rule);background:var(--bg-elevated);border-radius:8px;padding:2px;display:inline-flex}.segmented button{color:var(--fg-muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:.35rem .75rem;font-size:.85rem;transition:background-color .12s ease-out,color .12s ease-out}.segmented button:hover{color:var(--fg)}.segmented button[aria-pressed=true]{background:var(--accent);color:var(--key-pressed-fg);font-weight:600}.segmented button:focus-visible{outline:2px solid var(--accent-cool);outline-offset:1px}.switch{cursor:pointer;align-items:center;gap:.4rem;display:inline-flex}.switch input{accent-color:var(--accent)}.stage{border:1px solid #0000;border-radius:16px;outline:none;justify-content:center;gap:1.25rem;width:100%;padding:.75rem;transition:border-color .12s ease-out,box-shadow .12s ease-out;display:flex}.stage--drill{flex-direction:column;align-items:center}.stage[data-capture]{border-color:color-mix(in oklab, var(--accent), transparent 55%);box-shadow:0 0 0 4px color-mix(in oklab, var(--accent), transparent 88%)}.hint{min-height:2.2em;color:var(--fg-muted);text-align:center;margin:0}.legend{color:var(--fg-muted);flex-wrap:wrap;justify-content:center;gap:.5rem 1.25rem;margin:0;padding:0;font-size:.85rem;list-style:none;display:flex}.legend-item{align-items:center;gap:.4rem;display:inline-flex}.legend-swatch{background:var(--swatch,currentColor);border-radius:3px;width:.8em;height:.8em}.legend-item[data-finger=pinky]{--swatch:var(--finger-pinky)}.legend-item[data-finger=ring]{--swatch:var(--finger-ring)}.legend-item[data-finger=middle]{--swatch:var(--finger-middle)}.legend-item[data-finger=index]{--swatch:var(--finger-index)}.legend-item[data-finger=thumb]{--swatch:var(--finger-thumb)}.app-footer{color:var(--fg-faint);font-family:var(--font-mono);justify-content:center;gap:.6rem;font-size:.8rem;display:flex}.drill{flex-direction:column;gap:.75rem;width:100%;display:flex}.text{border:1px solid var(--rule);background:var(--bg-elevated);font-family:var(--font-mono);white-space:pre;border-radius:12px;padding:1.25rem 1.5rem;font-size:1.05rem;line-height:1.9;overflow-x:auto}.text-line{min-height:1.9em}.text-indent{color:#0000}.text-char{color:var(--fg-faint);transition:color 60ms linear;position:relative}.text-char[data-mark="1"]{color:var(--fg)}.text-char[data-mark="2"]{color:var(--accent);text-underline-offset:.3em;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.text-char[data-mark="3"]{color:var(--key-pressed-fg);background:var(--accent-warm);border-radius:2px}.text-char[data-space][data-mark="3"]:after{content:"␣";text-align:center;position:absolute;inset:0}.text-char[data-cursor]{box-shadow:inset 0 -2px 0 0 var(--accent-cool);animation:1.1s step-end infinite cursor-blink}@keyframes cursor-blink{0%,55%{box-shadow:inset 0 -2px 0 0 var(--accent-cool)}56%,to{box-shadow:inset 0 -2px #0000}}@media (prefers-reduced-motion:reduce){.text-char[data-cursor]{animation:none}}.text-newline{opacity:.35}.text-newline[data-cursor]{opacity:1}.drill-hud{color:var(--fg-muted);font-family:var(--font-mono);justify-content:center;align-items:baseline;gap:1.75rem;font-size:.85rem;display:flex}.drill-stat b{color:var(--fg);font-size:1.15rem;font-weight:600}.drill-title{color:var(--fg-muted);text-align:center;font-size:.85rem}.drill-progress{background:var(--rule);border-radius:999px;height:3px;overflow:hidden}.drill-progress-fill{background:var(--accent);height:100%;transition:width .12s ease-out}.drill-result{border:1px solid color-mix(in oklab, var(--accent), transparent 70%);background:var(--bg-elevated);border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem;padding:1rem 1.25rem;display:flex}.drill-result .drill-stat b{font-size:1.5rem}.drill-note{color:var(--fg-muted);text-align:center;font-size:.85rem}.drill-warn{color:var(--accent)}button.drill-next{border:1px solid var(--accent);background:var(--accent);color:var(--key-pressed-fg);font:inherit;cursor:pointer;border-radius:8px;padding:.5rem 1rem;font-weight:600}button.drill-next:hover{background:color-mix(in oklab, var(--accent), white 12%)}.kbd{-webkit-user-select:none;user-select:none;width:100%;max-width:1000px;height:auto;filter:drop-shadow(0 10px 24px var(--case-shadow));display:block}.kbd-case{fill:var(--case);stroke:var(--case-edge);stroke-width:2px}.kbd-side{fill:var(--key-side)}.kbd-cap{fill:var(--key-bg);stroke:var(--key-border);stroke-width:.75px}.kbd-side,.kbd-cap{transition:fill 90ms ease-out,stroke 90ms ease-out}.kbd-legend{fill:var(--key-fg);font-family:var(--font-mono);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-weight:500}.kbd-legend--single{font-size:19px}.kbd-legend--shift,.kbd-legend--base{font-size:15px}.kbd-legend--shift,.kbd-homing{fill:var(--key-fg-muted)}.kbd-key[data-kind=mod] .kbd-cap{fill:var(--key-mod-bg);stroke:var(--key-mod-border)}.kbd-key[data-kind=mod] .kbd-side{fill:var(--key-mod-side)}.kbd-key[data-kind=mod] .kbd-legend{fill:var(--key-mod-fg);font-size:14px}.kbd-key[data-kind=aux] .kbd-legend{fill:var(--key-fg-muted)}.kbd-key[data-kind=red] .kbd-cap{fill:var(--key-accent-red-bg);stroke:color-mix(in oklab, var(--key-accent-red-bg), black 18%)}.kbd-key[data-kind=red] .kbd-side{fill:color-mix(in oklab, var(--key-accent-red-bg), black 22%)}.kbd-key[data-kind=red] .kbd-legend{fill:var(--key-accent-red-fg);font-size:14px}.kbd-key[data-kind=blue] .kbd-cap{fill:var(--key-accent-blue-bg);stroke:color-mix(in oklab, var(--key-accent-blue-bg), black 18%)}.kbd-key[data-kind=blue] .kbd-side{fill:color-mix(in oklab, var(--key-accent-blue-bg), black 22%)}.kbd-key[data-kind=blue] .kbd-legend{fill:var(--key-accent-blue-fg);font-size:14px}.kbd[data-fingers] .kbd-key[data-kind=alpha][data-finger=pinky] .kbd-cap{fill:color-mix(in oklab, var(--key-bg), var(--finger-pinky) var(--finger-tint))}.kbd[data-fingers] .kbd-key[data-kind=alpha][data-finger=ring] .kbd-cap{fill:color-mix(in oklab, var(--key-bg), var(--finger-ring) var(--finger-tint))}.kbd[data-fingers] .kbd-key[data-kind=alpha][data-finger=middle] .kbd-cap{fill:color-mix(in oklab, var(--key-bg), var(--finger-middle) var(--finger-tint))}.kbd[data-fingers] .kbd-key[data-kind=alpha][data-finger=leftIndex] .kbd-cap,.kbd[data-fingers] .kbd-key[data-kind=alpha][data-finger=rightIndex] .kbd-cap{fill:color-mix(in oklab, var(--key-bg), var(--finger-index) var(--finger-tint))}.kbd[data-fingers] .kbd-key[data-kind=alpha][data-finger=thumb] .kbd-cap{fill:color-mix(in oklab, var(--key-bg), var(--finger-thumb) var(--finger-tint))}.kbd[data-fingers] .kbd-key[data-kind=alpha][data-finger=pinky] .kbd-side{fill:color-mix(in oklab, var(--key-side), var(--finger-pinky) var(--finger-tint))}.kbd[data-fingers] .kbd-key[data-kind=alpha][data-finger=ring] .kbd-side{fill:color-mix(in oklab, var(--key-side), var(--finger-ring) var(--finger-tint))}.kbd[data-fingers] .kbd-key[data-kind=alpha][data-finger=middle] .kbd-side{fill:color-mix(in oklab, var(--key-side), var(--finger-middle) var(--finger-tint))}.kbd[data-fingers] .kbd-key[data-kind=alpha][data-finger=leftIndex] .kbd-side,.kbd[data-fingers] .kbd-key[data-kind=alpha][data-finger=rightIndex] .kbd-side{fill:color-mix(in oklab, var(--key-side), var(--finger-index) var(--finger-tint))}.kbd[data-fingers] .kbd-key[data-kind=alpha][data-finger=thumb] .kbd-side{fill:color-mix(in oklab, var(--key-side), var(--finger-thumb) var(--finger-tint))}.kbd-key[data-next] .kbd-cap{stroke:var(--key-next-ring);stroke-width:2.5px}.kbd-key[data-next] .kbd-side{fill:color-mix(in oklab, var(--key-next-ring), black 25%)}.kbd-key[data-pressed] .kbd-cap,.kbd-key[data-pressed] .kbd-legend,.kbd-key[data-pressed] .kbd-homing{transform:translateY(3px)}.kbd-key[data-pressed] .kbd-cap{stroke:var(--key-pressed-border);fill:var(--key-pressed-bg)!important}.kbd-key[data-pressed] .kbd-side{fill:var(--key-pressed-side)}.kbd-key[data-pressed] .kbd-legend,.kbd-key[data-pressed] .kbd-homing{fill:var(--key-pressed-fg)}@media (prefers-reduced-motion:reduce){.kbd-side,.kbd-cap{transition:none}}