:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#14110f;--surface:#211c19;--surface-hover:#2c2622;--border:#3a332e;--text:#f4efe8;--text-muted:#a89f95;--accent:#eeb35b;--accent-ink:#2a1a05;--left-hand:#4fb8a8;--right-hand:#eeb35b;--radius:10px;--ease-out:cubic-bezier(.23, 1, .32, 1);background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}body{background:var(--bg);min-height:100dvh;margin:0}button,input{font:inherit}.mentor{flex-direction:column;align-items:center;gap:10px;width:min(100%,760px);display:flex}.mentor-head{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 24px;display:flex}.mentor-head select{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);max-width:70vw;height:34px;color:var(--text);font:inherit;padding:0 8px}.ladder{gap:6px;margin:0;padding:0;list-style:none;display:flex}.ladder-phase{border:1px solid var(--border);border-radius:var(--radius);min-width:64px;color:var(--text-muted);flex-direction:column;align-items:center;gap:4px;padding:4px 8px;font-size:.75rem;display:flex}.ladder-phase[data-state=active]{border-color:var(--accent);color:var(--text)}.ladder-phase[data-state=done]{color:var(--left-hand)}.ladder-dots{gap:4px;display:flex}.ladder-dots i{border:1px solid var(--text-muted);border-radius:50%;width:7px;height:7px}.ladder-dots i[data-state=done]{border-color:var(--left-hand);background:var(--left-hand)}.ladder-dots i[data-state=active]{border-color:var(--accent);background:var(--accent)}.mentor-stage{color:var(--text-muted);margin:0;font-size:.8125rem}.mentor-bubble,.mentor-concept{border-radius:var(--radius);background:var(--surface);text-align:left;max-width:62ch;margin:0;padding:10px 14px;font-size:.9375rem;line-height:1.6}.mentor-bubble strong{color:var(--accent)}.mentor-concept{border-left:3px solid var(--accent)}.note-strip{font-variant-numeric:tabular-nums;flex-wrap:wrap;justify-content:center;gap:6px;min-height:2.5rem;font-size:1.375rem;font-weight:600;display:flex}.note-strip span[data-state=done]{color:var(--text-muted)}.note-strip span[data-state=now]{border-bottom:3px solid var(--accent);color:var(--accent);padding:0 6px}.note-prompt b{color:var(--accent);font-size:2.25rem}.mentor-feedback{min-height:1.4em;margin:0;font-size:.9375rem}.mentor-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.btn-primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:600}@media (hover:hover) and (pointer:fine){.btn-primary:hover:not(:disabled){background:#f4c57a}}.btn-quiet{color:var(--text-muted);background:0 0;border-color:#0000}.key-white.is-target{background:linear-gradient(#fff3d9,#f6d79c)}.key-white.is-target[data-target-hand=L]{background:linear-gradient(#e2f6f2,#a9e0d6)}.key-black.is-target{background:linear-gradient(#8a5d22,#4f3410)}.key-black.is-target[data-target-hand=L]{background:linear-gradient(#2f7f73,#17463f)}.key.is-blink{animation:.6s ease-in-out 3 key-blink}@keyframes key-blink{50%{filter:brightness(.75)}}.key-finger{background:var(--accent-ink);width:22px;height:22px;color:var(--accent);pointer-events:none;border-radius:50%;place-items:center;font-size:.75rem;font-weight:700;display:grid;position:absolute;bottom:38%}.key-black .key-finger{width:18px;height:18px;font-size:.6875rem;bottom:30%}.key.flash-ok:after,.key.flash-wrong:after{pointer-events:none;font-size:1.125rem;font-weight:700;position:absolute;top:10px}.key.flash-ok:after{content:"✓";color:#2e9d57}.key.flash-wrong:after{content:"✕";color:#d6453d}.key-white.flash-wrong{background:linear-gradient(#fbe1df,#f2b3ad)}@media (prefers-reduced-motion:reduce){.key.is-blink{outline:3px solid var(--accent);outline-offset:-3px;animation:none}}@media (height<=500px){.mentor-concept,.mentor-stage{display:none}.mentor-bubble{padding:6px 10px;font-size:.8125rem}}.app{box-sizing:border-box;height:100dvh;padding-bottom:env(safe-area-inset-bottom);flex-direction:column;display:flex;overflow:hidden}.topbar{padding:16px max(20px, env(safe-area-inset-left));border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;display:flex}.brand h1{letter-spacing:-.01em;margin:0;font-size:1.25rem}.brand p{color:var(--text-muted);margin:2px 0 0;font-size:.8125rem}.controls{flex-wrap:wrap;align-items:center;gap:10px 20px;display:flex}.control{color:var(--text-muted);align-items:center;gap:8px;font-size:.8125rem;display:flex}.control input[type=range]{width:110px;accent-color:var(--accent)}.btn,.segmented button{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);height:34px;color:var(--text);cursor:pointer;transition:transform .12s var(--ease-out);padding:0 12px}@media (hover:hover) and (pointer:fine){.btn:hover:not(:disabled),.segmented button:hover{background:var(--surface-hover)}}.btn:active:not(:disabled),.segmented button:active{transform:scale(.97)}@media (prefers-reduced-motion:reduce){.btn:active:not(:disabled),.segmented button:active{transform:none}}.btn:disabled{opacity:.4;cursor:default}.btn:focus-visible,.segmented button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-toggle[aria-pressed=true],.segmented button[aria-checked=true]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.stepper{align-items:center;gap:6px;display:flex}.stepper .btn{width:34px;padding:0;font-size:1.125rem}.stepper-value{text-align:center;min-width:64px;color:var(--text);font-variant-numeric:tabular-nums}.segmented{display:inline-flex}.segmented button{border-radius:0}.segmented button+button{margin-left:-1px}.segmented button:first-child{border-radius:var(--radius) 0 0 var(--radius)}.segmented button:last-child{border-radius:0 var(--radius) var(--radius) 0}.stage{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;min-height:0;padding:20px;display:flex}.now-playing{letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-height:1.2em;font-size:clamp(2.25rem,7vw,4.5rem);font-weight:600}.hint{max-width:62ch;color:var(--text-muted);margin:0;font-size:.875rem;line-height:1.7}kbd{border:1px solid var(--border);background:var(--surface);color:var(--text);border-bottom-width:2px;border-radius:6px;padding:1px 6px;font-family:inherit;font-size:.8125rem}.notice{border:1px solid var(--accent);border-radius:var(--radius);max-width:62ch;color:var(--accent);margin:0;padding:10px 14px;font-size:.875rem}.keyboard-wrap{padding:0 max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left))}.keyboard{border-radius:4px 4px var(--radius) var(--radius);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;border-top:6px solid #2a2420;height:clamp(170px,42dvh,340px);display:flex;position:relative;overflow:hidden}.key{box-sizing:border-box;cursor:pointer;flex-direction:column;justify-content:flex-end;align-items:center;display:flex;position:relative}.key-white{color:#7a7066;background:linear-gradient(#fbf8f3,#ece6dd);border-right:1px solid #cfc6ba;border-radius:0 0 6px 6px;flex:1;padding-bottom:12px;box-shadow:inset 0 -6px #ddd5c9}.key-black{z-index:1;color:#cfc6bb;background:linear-gradient(#2e2926,#100e0d);border-radius:0 0 5px 5px;height:62%;padding-bottom:8px;position:absolute;top:0;box-shadow:inset 0 -5px #000,0 2px 3px #0006}.key-white.is-down{background:linear-gradient(#f7dca8,#efbf68);box-shadow:inset 0 -2px #d9a24c}.key-black.is-down{background:linear-gradient(#a8722a,#6f4714);box-shadow:inset 0 -2px #4a2f0c}.key-white.is-ringing:not(.is-target){background:linear-gradient(#f9efdc,#eedcbc)}.key-black.is-ringing:not(.is-target){background:linear-gradient(#4f3d24,#2a1f10)}.key[data-hand]:before{content:"";height:4px;position:absolute;inset:0 0 auto}.key[data-hand=L]:before{background:var(--left-hand)}.key[data-hand=R]:before{background:var(--right-hand)}.key-label{pointer-events:none;font-size:.75rem;font-weight:600;line-height:1.3}.key-black .key-label{font-size:.625rem}@media (height<=500px){.topbar{padding-block:8px}.brand p,.hint{display:none}.stage{padding:8px}.now-playing{font-size:1.75rem}.keyboard{height:58dvh}}