:root{--bg:#0d1117;--bg-elevated:#161b22;--border:#61676e;--text:#c9d1d9;--text-dim:#7d8590;--text-done:#3fb950;--cursor:#58a6ff;--error:#f85149;--accent:#d29922;--finger-l-pinky:#f97583;--finger-l-ring:#ffab70;--finger-l-middle:#ffea7f;--finger-l-index:#85e89d;--finger-r-index:#79b8ff;--finger-r-middle:#b392f0;--finger-r-ring:#d2a8ff;--finger-r-pinky:#f692ce;--finger-thumb:#8b949e;--font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;--font-size-drill:32px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background-color:var(--bg);color:var(--text);font-family:var(--font-mono)}.home{flex-direction:column;gap:16px;width:100%;max-width:720px;margin:0 auto;padding:16px;display:flex}.home__header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding-bottom:12px;display:flex}.home__prompt{color:var(--text);font-size:18px;font-weight:700}.home__header-actions{gap:8px;display:flex}.home__nav-button{font-family:var(--font-mono);color:var(--text);background-color:var(--bg-elevated);border:1px solid var(--border);cursor:pointer;border-radius:4px;padding:6px 12px;font-size:14px}.home__nav-button:hover{border-color:var(--cursor)}.home__summary{background-color:var(--bg-elevated);border:1px solid var(--border);color:var(--text);border-radius:8px;flex-wrap:wrap;gap:16px;padding:12px 16px;font-size:14px;display:flex}.home__section-title{letter-spacing:.05em;color:var(--text);margin:0 0 8px;font-size:14px;font-weight:700}.home__curriculum,.home__weakness{background-color:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:12px 16px}.home__level-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.home__level-button{width:100%;font-family:var(--font-mono);color:var(--text);text-align:left;cursor:pointer;background-color:#0000;border:1px solid #0000;border-radius:4px;align-items:center;gap:10px;padding:8px 10px;font-size:14px;display:flex}.home__level-button:not(:disabled):hover{border-color:var(--cursor);background-color:var(--bg)}.home__level-button:disabled{cursor:not-allowed;opacity:.6}.home__level-icon{text-align:center;flex:none;width:1.5em}.home__level--cleared .home__level-icon{color:var(--text-done)}.home__level--active .home__level-icon{color:var(--cursor)}.home__level-name{flex:auto}.home__level-status{color:var(--text);flex:none;font-size:13px}.home__weakness-body{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.home__weakness-text{color:var(--text);flex-wrap:wrap;align-items:center;gap:6px;margin:0;display:flex}.home__weakness-key{font-family:var(--font-mono);color:var(--accent);background-color:var(--bg);border:1px solid var(--border);border-radius:4px;padding:2px 8px;font-weight:700}.home__weakness-empty{color:var(--text);margin:0}.home__weakness-button{font-family:var(--font-mono);color:var(--bg);background-color:var(--accent);cursor:pointer;border:none;border-radius:4px;flex:none;padding:8px 16px;font-size:14px;font-weight:700}.home__weakness-button:disabled{color:var(--text);background-color:var(--bg);border:1px solid var(--border);cursor:not-allowed;opacity:.7}.home__nav-button:focus-visible,.home__level-button:focus-visible,.home__weakness-button:focus-visible{outline:2px solid var(--cursor);outline-offset:2px}.keycap{border:1px solid var(--border);background-color:var(--bg-elevated);min-width:0;height:40px;color:var(--text);font-family:var(--font-mono);-webkit-user-select:none;user-select:none;cursor:default;flex-grow:var(--keycap-width,1);border-radius:4px;flex-basis:0;justify-content:center;align-items:center;padding:0 2px;font-size:14px;line-height:1;transition:background-color .1s,color .1s,box-shadow .1s;display:flex}.keycap__label{white-space:nowrap;text-overflow:ellipsis;pointer-events:none;overflow:hidden}.keycap--special .keycap__label{font-size:11px}.keycap--finger{border-bottom:3px solid var(--keycap-finger-color,var(--border))}.keycap--next{background-color:var(--cursor);color:var(--bg);box-shadow:0 0 0 2px var(--cursor)}.keycap--shift{background-color:var(--accent);color:var(--bg);box-shadow:0 0 0 2px var(--accent)}.keycap--miss{box-shadow:0 0 0 2px var(--error);animation:.12s ease-out keycap-miss-flash}@keyframes keycap-miss-flash{0%{background-color:var(--error);color:var(--bg)}to{background-color:var(--bg-elevated);color:var(--text)}}.keycap--alert{animation:.15s ease-in-out infinite alternate keycap-alert-blink}@keyframes keycap-alert-blink{0%{background-color:var(--bg-elevated);color:var(--text);box-shadow:none}to{background-color:var(--error);color:var(--bg);box-shadow:0 0 0 3px var(--error)}}@media (prefers-reduced-motion:reduce){.keycap--miss{background-color:var(--error);color:var(--bg);animation:none}.keycap--alert{background-color:var(--error);color:var(--bg);box-shadow:0 0 0 3px var(--error);animation:none}}.keyboard{background-color:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:10px;width:100%;max-width:920px;margin:0 auto;padding:12px;display:flex}.keyboard__rows{flex-direction:column;gap:4px;display:flex}.keyboard__row{gap:4px;width:100%;display:flex}.keyboard__row--space{justify-content:center}.keyboard__row--space .keycap{flex:0 0 41.6667%}.keyboard__legend{border-top:1px solid var(--border);flex-wrap:wrap;gap:6px 18px;margin:0;padding:8px 4px 0;list-style:none;display:flex}.keyboard__legend-item{color:var(--text);align-items:center;gap:6px;font-size:12px;display:flex}.keyboard__legend-swatch{border-radius:2px;flex-shrink:0;width:10px;height:10px}.keyboard__legend-label{white-space:nowrap}.drilltext{flex-direction:column;gap:8px;padding:16px 0;display:flex}.drilltext__line{font-family:var(--font-mono);font-size:var(--font-size-drill);white-space:pre;line-height:1.4;animation:.15s ease-out drilltext-line-enter;overflow-x:auto}.drilltext__char{color:var(--text);display:inline-block}.drilltext__char--pending{color:var(--text)}.drilltext__char--done{color:var(--text-done)}.drilltext__char--current{color:var(--cursor);position:relative}.drilltext__char--current:after{content:"";background-color:var(--cursor);height:2px;animation:1s step-end infinite drilltext-blink;position:absolute;bottom:-4px;left:0;right:0}.drilltext__char--flash{animation:.12s ease-out drilltext-flash}.drilltext__line--shake{animation:.15s ease-in-out drilltext-shake}.drilltext__hint{color:var(--text);margin:0;font-size:16px}@keyframes drilltext-blink{0%,49%{opacity:1}50%,to{opacity:0}}@keyframes drilltext-flash{0%{background-color:var(--error);color:var(--bg)}to{color:inherit;background-color:#0000}}@keyframes drilltext-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes drilltext-line-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.statsbar{font-family:var(--font-mono);color:var(--text);flex-wrap:wrap;align-items:baseline;gap:24px;font-size:16px;display:flex}.statsbar__item{align-items:baseline;gap:8px;display:inline-flex}.statsbar__label{color:var(--text);font-weight:400}.statsbar__value{font-variant-numeric:tabular-nums;min-width:4ch;color:var(--text);font-weight:600;display:inline-block}.practice{outline:none;flex-direction:column;gap:16px;max-width:960px;margin:0 auto;padding:20px;display:flex;position:relative}.practice:focus-visible{outline:2px solid var(--cursor);outline-offset:4px}.practice__header{border-bottom:1px solid var(--border);font-family:var(--font-mono);justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;display:flex}.practice__level-name{color:var(--text);font-size:18px;font-weight:600}.practice__progress{color:var(--text);font-variant-numeric:tabular-nums}.practice__escape-hint{color:var(--text);font-size:14px}.practice__banner{border:1px solid var(--accent);color:var(--accent);background-color:var(--bg-elevated);border-radius:4px;margin:0;padding:8px 12px;font-size:14px;font-weight:600}.practice__drill{background-color:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;min-width:0;min-height:100px;padding:16px}.practice__drill-complete{color:var(--text-done);font-family:var(--font-mono);margin:0;font-size:20px;font-weight:600}.practice__overlay{z-index:10;background-color:#0009;border-radius:8px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.practice__overlay-box{background-color:var(--bg-elevated);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);cursor:pointer;border-radius:8px;padding:16px 24px;font-size:16px}.practice__dialog{background-color:var(--bg-elevated);border:1px solid var(--border);max-width:360px;font-family:var(--font-mono);border-radius:8px;flex-direction:column;gap:16px;padding:20px 24px;display:flex}.practice__dialog-message{color:var(--text);margin:0;font-size:16px;line-height:1.6}.practice__dialog-actions{justify-content:flex-end;gap:12px;display:flex}.practice__dialog-btn{border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);cursor:pointer;background-color:#0000;border-radius:4px;padding:8px 16px;font-size:14px}.practice__dialog-btn:focus-visible{outline:2px solid var(--cursor);outline-offset:2px}.practice__dialog-btn--danger{background-color:var(--error);border-color:var(--error);color:var(--bg);font-weight:600}.resultscreen{justify-content:center;padding:24px 16px;display:flex}.resultscreen__panel{background-color:var(--bg-elevated);border:1px solid var(--border);text-align:center;border-radius:8px;flex-direction:column;gap:12px;width:100%;max-width:480px;padding:24px;display:flex}.resultscreen__eyebrow{color:var(--text);letter-spacing:.1em;margin:0;font-size:14px;font-weight:700}.resultscreen__level-title{color:var(--text);margin:0;font-size:13px}.resultscreen__badge{justify-content:center;padding:8px 0 0;display:flex}.resultscreen__badge-text{white-space:nowrap;font-size:24px;font-weight:700;display:inline-block;position:relative}.resultscreen__badge--passed .resultscreen__badge-text{color:var(--text-done)}.resultscreen__badge--failed .resultscreen__badge-text{color:var(--error)}.resultscreen__badge-text:after{content:"";background-color:var(--bg-elevated);border-left:2px solid;width:100%;animation:.64s steps(8,end) forwards resultscreen-typewriter-mask,.48s step-end 3 resultscreen-caret-blink;position:absolute;top:0;bottom:0;right:0}@keyframes resultscreen-typewriter-mask{0%{width:100%}to{width:0%}}@keyframes resultscreen-caret-blink{0%,to{border-left-color:currentColor}50%{border-left-color:#0000}}@media (prefers-reduced-motion:reduce){.resultscreen__badge-text:after{display:none}}.resultscreen__unlock-message{color:var(--text-done);margin:0;font-size:15px;font-weight:600}.resultscreen__retry-note{color:var(--text);margin:0;font-size:13px}.resultscreen__weakness-note{color:var(--accent);margin:0;font-size:12px}.resultscreen__metrics{background-color:var(--bg);border:1px solid var(--border);border-radius:6px;flex-direction:column;gap:6px;margin:8px 0 0;padding:12px;display:flex}.resultscreen__metric-row{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.resultscreen__metric-row dt{color:var(--text);text-align:left;font-size:13px;font-weight:600}.resultscreen__metric-row dd{color:var(--text);font-variant-numeric:tabular-nums;align-items:baseline;gap:6px;margin:0;font-size:15px;display:flex}.resultscreen__metric-baseline{color:var(--text);font-size:12px}.resultscreen__mark{font-weight:700}.resultscreen__mark--ok{color:var(--text-done)}.resultscreen__mark--ng{color:var(--error)}.resultscreen__visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.resultscreen__summary-line{color:var(--text);font-variant-numeric:tabular-nums;justify-content:center;gap:16px;margin:0;font-size:13px;display:flex}.resultscreen__miss-keys{text-align:left;flex-direction:column;gap:6px;margin-top:4px;display:flex}.resultscreen__miss-keys-title{color:var(--text);margin:0;font-size:13px;font-weight:600}.resultscreen__miss-keys-empty{color:var(--text);margin:0;font-size:13px}.resultscreen__miss-key-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.resultscreen__miss-key-item{grid-template-columns:1.5em 1fr 3.5em;align-items:center;gap:8px;display:grid}.resultscreen__miss-key-label{color:var(--text);text-align:center;font-weight:700}.resultscreen__miss-key-bar-track{background-color:var(--bg);border:1px solid var(--border);border-radius:4px;height:10px;display:block;overflow:hidden}.resultscreen__miss-key-bar-fill{background-color:var(--error);height:100%;transition:width .15s;display:block}.resultscreen__miss-key-count{color:var(--text);text-align:right;font-variant-numeric:tabular-nums;font-size:12px}.resultscreen__actions{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;display:flex}.resultscreen__button{color:var(--text);font-family:var(--font-mono);background-color:var(--bg);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:10px 16px;font-size:14px;transition:background-color .1s,border-color .1s}.resultscreen__button:hover{border-color:var(--cursor)}.resultscreen__button:focus-visible{outline:2px solid var(--cursor);outline-offset:2px}.resultscreen__button--primary{color:var(--bg);background-color:var(--cursor);border-color:var(--cursor);font-weight:700}.settingsscreen{flex-direction:column;gap:16px;width:100%;max-width:640px;margin:0 auto;padding:16px;display:flex}.settingsscreen__header{justify-content:space-between;align-items:center;gap:12px;display:flex}.settingsscreen__title{margin:0;font-size:20px}.settingsscreen__back,.settingsscreen__reset-button,.settingsscreen__confirm-cancel,.settingsscreen__confirm-ok{font-family:var(--font-mono);border:1px solid var(--border);color:var(--text);cursor:pointer;background-color:#0000;border-radius:6px;padding:8px 14px;font-size:14px}.settingsscreen__back:hover,.settingsscreen__reset-button:hover,.settingsscreen__confirm-cancel:hover{border-color:var(--cursor)}.settingsscreen__back:focus-visible,.settingsscreen__reset-button:focus-visible,.settingsscreen__confirm-cancel:focus-visible,.settingsscreen__confirm-ok:focus-visible,.settingsscreen__select:focus-visible,.settingsscreen__checkbox:focus-visible{outline:2px solid var(--cursor);outline-offset:2px}.settingsscreen__section{background-color:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:8px;padding:14px 16px;display:flex}.settingsscreen__section-title{color:var(--text);margin:0;font-size:15px}.settingsscreen__field{cursor:pointer;align-items:center;gap:10px;display:flex}.settingsscreen__field--toggle{justify-content:space-between}.settingsscreen__label{color:var(--text);font-size:14px}.settingsscreen__select{font-family:var(--font-mono);background-color:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;margin-left:auto;padding:6px 8px;font-size:14px}.settingsscreen__checkbox{width:16px;height:16px;accent-color:var(--cursor);flex-shrink:0}.settingsscreen__state{text-align:right;letter-spacing:.05em;min-width:32px;margin-left:8px;font-size:12px;font-weight:700}.settingsscreen__state--on{color:var(--text-done)}.settingsscreen__state--off{color:var(--text)}.settingsscreen__hint{color:var(--text);margin:0;font-size:12px}.settingsscreen__section--danger{border-color:var(--error)}.settingsscreen__savestatus{background-color:var(--bg);border-radius:6px;flex-direction:column;gap:4px;margin:0;padding:8px 10px;font-size:13px;display:flex}.settingsscreen__savestatus-label{font-weight:700}.settingsscreen__savestatus--ok{color:var(--text-done)}.settingsscreen__savestatus--warning{color:var(--accent)}.settingsscreen__savestatus--error{color:var(--error)}.settingsscreen__reset-button{border-color:var(--error);color:var(--error);align-self:flex-start}.settingsscreen__confirm{background-color:var(--bg);border:1px solid var(--error);border-radius:6px;flex-direction:column;gap:8px;padding:12px;display:flex}.settingsscreen__confirm-title{color:var(--text);margin:0;font-weight:700}.settingsscreen__confirm-body{color:var(--text);margin:0;font-size:13px}.settingsscreen__confirm-actions{justify-content:flex-end;gap:8px;display:flex}.settingsscreen__confirm-ok{border-color:var(--error);background-color:var(--error);color:var(--bg);font-weight:700}.chart{width:100%;max-width:480px;font-family:var(--font-mono);flex-direction:column;gap:8px;display:flex}.chart__svg{width:100%;height:auto;display:block}.chart__grid-line{stroke:var(--border);stroke-width:1px}.chart__axis-label{fill:var(--text);font-size:9px;font-family:var(--font-mono)}.chart__line{fill:none;stroke-width:2px}.chart__point{stroke:none}.chart__empty{color:var(--text);margin:0;font-size:14px}.chart__x-labels{color:var(--text);justify-content:space-between;font-size:10px;display:flex}.chart__legend{color:var(--text);flex-wrap:wrap;gap:12px;margin:0;padding:0;font-size:12px;list-style:none;display:flex}.chart__legend-item{align-items:center;gap:6px;display:inline-flex}.chart__legend-swatch{border-radius:2px;width:10px;height:10px;display:inline-block}.stats{flex-direction:column;gap:16px;width:100%;max-width:860px;margin:0 auto;padding:16px;display:flex}.stats__header{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding-bottom:12px;display:flex}.stats__back-button{font-family:var(--font-mono);color:var(--text);background-color:var(--bg-elevated);border:1px solid var(--border);cursor:pointer;border-radius:4px;padding:6px 12px;font-size:14px}.stats__back-button:hover{border-color:var(--cursor)}.stats__back-button:focus-visible{outline:2px solid var(--cursor);outline-offset:2px}.stats__title{color:var(--text);margin:0;font-size:18px;font-weight:700}.stats__empty-banner{background-color:var(--bg-elevated);border:1px dashed var(--border);color:var(--text);border-radius:8px;margin:0;padding:12px 16px;font-size:14px}.stats__section{background-color:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:12px 16px}.stats__section-title{letter-spacing:.05em;color:var(--text);margin:0 0 8px;font-size:14px;font-weight:700}.stats__section-caption{color:var(--text);margin:0 0 10px;font-size:12px}.stats__section-empty{color:var(--text);margin:0;font-size:13px}.stats__charts{flex-wrap:wrap;gap:16px;display:flex}.stats__chart-block{flex:260px;min-width:220px}.stats__chart-title{color:var(--text);margin:0 0 4px;font-size:12px}.stats__totals{color:var(--text);flex-wrap:wrap;gap:16px;font-size:14px;display:flex}.stats__total-item strong{color:var(--cursor)}.stats__table-wrap{width:100%;overflow-x:auto}.stats__level-table{border-collapse:collapse;width:100%;color:var(--text);font-size:13px}.stats__level-table th,.stats__level-table td{text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;padding:6px 8px}.stats__level-table th{border-bottom:2px solid var(--border);font-weight:700}.stats__level-table th:not(:first-child),.stats__level-table td:not(:first-child){text-align:right}.stats__heatmap{flex-direction:column;gap:4px;display:flex}.stats__heatmap-row{gap:4px;width:100%;display:flex}.stats__heatmap-key{border:1px solid var(--border);background-color:var(--bg);min-width:0;height:40px;color:var(--text);font-family:var(--font-mono);border-radius:4px;flex-direction:column;flex-basis:0;justify-content:center;align-items:center;gap:1px;padding:2px;font-size:10px;line-height:1.2;display:flex}.stats__heatmap-label{white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}.stats__heatmap-value{color:var(--text);font-size:9px}.stats__heatmap-key--special{color:var(--text);opacity:.5;background-color:#0000;border-style:dotted}.stats__heatmap-key--none{background-color:var(--bg-elevated);color:var(--text);border-style:dashed}.stats__heatmap-key--low{background-color:color-mix(in srgb, var(--error) 15%, var(--bg-elevated));color:var(--text)}.stats__heatmap-key--mid{background-color:color-mix(in srgb, var(--error) 30%, var(--bg-elevated));color:var(--text)}.stats__heatmap-key--high{background-color:color-mix(in srgb, var(--error) 42%, var(--bg-elevated));color:var(--text)}.stats__heatmap-key--severe{background-color:color-mix(in srgb, var(--error) 50%, var(--bg-elevated));color:var(--text)}.app{flex-direction:column;min-height:100vh;display:flex}.app__save-banner{background-color:var(--bg-elevated);border-bottom:1px solid var(--accent);color:var(--text);justify-content:center;align-items:center;gap:16px;padding:10px 16px;font-size:14px;display:flex}.app__save-banner-text{text-align:center;flex:1;max-width:720px}.app__save-banner-dismiss{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:4px;flex-shrink:0;padding:4px 10px;font-family:inherit;font-size:13px}.app__save-banner-dismiss:hover{border-color:var(--accent)}.app__save-banner-dismiss:focus-visible{outline:2px solid var(--cursor);outline-offset:2px}