:root{--font-ui:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace}html[data-theme=light]{--page:#eceff4;--text:#2e3440;--muted:#4c566a;--line:#2e344021;--panel:#fff;--panel-line:#2e34401f;--board-bg:#e1e7f0;--key-bg:#fff;--key-line:#2e344029;--key-text:#2e3440;--key-locked:#2e34404d;--key-shadow:0 2px 0 #2e34401a, 0 5px 12px #2e34400d;--accent:#5e81ac;--accent-text:#eceff4;--good:#3b7a57;--bad:#bf616a}html[data-theme=dark]{--page:#2e3440;--text:#eceff4;--muted:#8b95a8;--line:#d8dee91f;--panel:#3b4252;--panel-line:#d8dee91a;--board-bg:#272d38;--key-bg:#3b4252;--key-line:#4c566a;--key-text:#eceff4;--key-locked:#d8dee947;--key-shadow:0 2px 0 #0000004d, inset 0 1px 0 #ffffff08;--accent:#88c0d0;--accent-text:#2e3440;--good:#a3be8c;--bad:#bf616a}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--page);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;margin:0}.kb-wrap{justify-content:center;width:100%;display:flex;overflow:hidden}.kb-board{transform-origin:top;flex-direction:column;flex:none;gap:6px;display:flex}.kb-row{gap:6px;display:flex}.kb-thumb-row{justify-content:center;padding-left:0}.kb-key{background:var(--key-bg);border:1px solid var(--key-line);box-shadow:var(--key-shadow);-webkit-user-select:none;user-select:none;color:var(--key-locked);border-radius:8px;flex:none;justify-content:center;align-items:center;transition:background .12s,border-color .12s,color .12s,transform 60ms;display:flex;position:relative}.kb-base{font-size:19px;font-weight:500;line-height:1}.kb-shift{color:var(--muted);opacity:.5;font-size:11px;position:absolute;top:5px;left:7px}.kb-key.empty{opacity:.35}.kb-key.active{color:var(--key-text);box-shadow:var(--key-shadow), inset 0 -3px 0 var(--finger)}.kb-key.expected{color:var(--key-text);background:color-mix(in oklab, var(--finger) 22%, var(--key-bg));border-color:var(--finger);box-shadow:0 0 0 2px color-mix(in oklab, var(--finger) 55%, transparent), 0 0 16px color-mix(in oklab, var(--finger) 45%, transparent);transform:translateY(-1px)}.kb-key.expected .kb-base{font-weight:700}.kb-space{width:378px;height:36px}.kb-space .kb-base{letter-spacing:.06em;color:var(--muted);font-size:13px}.kb-space.expected .kb-base{color:var(--key-text)}.app{flex-direction:column;min-height:100%;display:flex}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:14px 22px;display:flex}.brand{letter-spacing:-.01em;align-items:baseline;gap:8px;font-size:17px;font-weight:600;display:flex}.brand-mark{font-size:18px}.brand-sub{color:var(--muted);letter-spacing:.02em;font-size:12px;font-weight:500}.icon-btn{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;border-radius:9px;width:38px;height:38px;font-size:17px}.icon-btn:hover{border-color:var(--accent)}.main{flex-direction:column;flex:1;gap:26px;width:100%;max-width:1040px;margin:0 auto;padding:30px 22px 60px;display:flex}.stats{background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;flex-wrap:wrap;align-items:center;gap:18px;padding:12px 16px;display:flex}.level-ctl{align-items:center;gap:12px;display:flex}.step{appearance:none;border:1px solid var(--line);background:var(--page);width:34px;height:34px;color:var(--text);cursor:pointer;border-radius:8px;font-size:20px;line-height:1}.step:disabled{opacity:.35;cursor:default}.step:not(:disabled):hover{border-color:var(--accent)}.level-label{flex-direction:column;min-width:96px;display:flex}.level-n{font-size:15px;font-weight:600}.level-sub{color:var(--muted);font-size:12px}.streak{gap:5px;display:flex}.pip{background:var(--line);border-radius:9px;width:9px;height:9px;transition:background .15s}.pip.on{background:var(--good)}.stats .spacer{flex:1}.metric{flex-direction:column;align-items:flex-end;min-width:56px;display:flex}.m-v{font-variant-numeric:tabular-nums;font-size:20px;font-weight:700}.m-l{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:11px}.line{font-family:var(--font-mono);letter-spacing:.01em;background:var(--panel);border:1px solid var(--panel-line);word-break:break-word;text-align:center;border-radius:14px;min-height:96px;padding:26px 22px;font-size:30px;line-height:1.6}.ch{color:var(--muted);position:relative}.ch.pending{color:var(--muted)}.ch.done{color:var(--good)}.ch.current{color:var(--text);border-bottom:3px solid var(--accent)}.ch.error{color:var(--bad);background:color-mix(in oklab, var(--bad) 24%, transparent);border-radius:3px}.ch.space.current{background:color-mix(in oklab, var(--accent) 22%, transparent);border-radius:3px}.ch.space.error{background:color-mix(in oklab, var(--bad) 30%, transparent)}.tip{color:var(--muted);text-align:center;max-width:620px;margin:0 auto;font-size:13px;line-height:1.55}.tip code{font-family:var(--font-mono);background:var(--panel);border:1px solid var(--panel-line);border-radius:4px;padding:0 2px}.panel-backdrop{z-index:30;background:#0000006b;justify-content:center;align-items:flex-start;padding:40px 16px;display:flex;position:fixed;inset:0;overflow-y:auto}.panel{background:var(--page);border:1px solid var(--line);border-radius:16px;width:100%;max-width:540px;padding:22px 24px 28px}.panel-head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.panel-head h2{margin:0;font-size:20px}.panel section{border-bottom:1px solid var(--line);padding:16px 0}.panel section:last-child{border-bottom:none}.field-label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-size:12px;display:block}.hint{color:var(--muted);margin:0 0 10px;font-size:12.5px;line-height:1.5}.seg,.presets{flex-wrap:wrap;gap:6px;display:flex}.seg button,.presets button{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;border-radius:8px;padding:8px 14px;font-size:14px}.seg button.on,.presets button.on{background:var(--accent);color:var(--accent-text);border-color:#0000}.kbd-area,.order-input{width:100%;font-family:var(--font-mono);background:var(--panel);color:var(--text);border:1px solid var(--panel-line);border-radius:8px;margin-top:10px;padding:10px 12px;font-size:14px}.kbd-area{resize:vertical;white-space:pre;overflow-x:auto}.order-input{letter-spacing:.04em}.apply{appearance:none;background:var(--accent);color:var(--accent-text);cursor:pointer;border:1px solid #0000;border-radius:8px;margin-top:10px;padding:9px 16px;font-size:14px;font-weight:600}.apply.ghost{color:var(--text);border-color:var(--line);background:0 0;font-weight:500}.toggles{flex-direction:column;gap:12px;display:flex}.toggle{color:var(--text);align-items:center;gap:10px;font-size:14px;display:flex}.toggle.num input{background:var(--panel);width:64px;color:var(--text);border:1px solid var(--panel-line);border-radius:6px;padding:6px 8px}@media (width<=540px){.line{padding:20px 14px;font-size:24px}}