:root{--bg: #0d0d12;--surface: #17171f;--surface-2: #21212c;--border: #2e2e3c;--text: #f2f2f7;--text-dim: #9a9aae;--accent: #7c6cff;--accent-dim: #4b40a8;--correct: #32d67c;--wrong: #ff5c68;--amber: #ffb340;--staff-ink: #f2f2f7;--staff-paper: transparent;--radius: 16px;--radius-sm: 11px;--tap: 56px;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px)}@media(prefers-color-scheme:light){:root{--bg: #f6f6f8;--surface: #ffffff;--surface-2: #eeeef3;--border: #dcdce4;--text: #14141a;--text-dim: #6c6c7e;--accent: #5b48e8;--accent-dim: #cdc6ff;--correct: #12a557;--wrong: #d92d3c;--amber: #b8730a;--staff-ink: #14141a}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,system-ui,sans-serif;font-size:17px;line-height:1.4;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}#app{height:100dvh;display:flex;flex-direction:column}.screen{flex:1;min-height:0;display:flex;flex-direction:column}.topbar{flex:none;padding:calc(var(--safe-t) + 10px) calc(var(--safe-r) + 8px) 10px calc(var(--safe-l) + 8px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:calc(var(--safe-t) + 52px)}.topbar__title{grid-column:2;font-size:17px;font-weight:600;text-align:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar__left{grid-column:1;justify-self:start}.topbar__right{grid-column:3;justify-self:end}.pane{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 20px) calc(var(--safe-l) + 16px)}.pane--fixed{overflow:hidden}.stack{display:flex;flex-direction:column;gap:12px}.section-label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);padding:16px 4px 2px}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;touch-action:manipulation}a{color:inherit;text-decoration:none;touch-action:manipulation}.btn{min-height:var(--tap);padding:0 18px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .09s ease,background-color .12s ease}.btn:active{transform:scale(.96);background:var(--border)}.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn--primary:active{background:var(--accent-dim)}.btn--ghost{background:none;border-color:transparent;color:var(--accent);min-height:48px;padding:0 14px;white-space:nowrap}.btn--wide{width:100%}.grid{display:grid;gap:8px}.grid--7,.grid--4{grid-template-columns:repeat(4,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--2{grid-template-columns:repeat(2,1fr)}.choice{min-height:var(--tap);border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;transition:transform .09s ease,background-color .12s ease,border-color .12s ease}.choice:active{transform:scale(.95)}.choice[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.choice[data-state=correct]{background:var(--correct);border-color:var(--correct);color:#05210f}.choice[data-state=wrong]{background:var(--wrong);border-color:var(--wrong);color:#2a0508}.choice[data-state=reveal]{border-color:var(--correct);color:var(--correct)}.choice:disabled{opacity:.45}.pianopad{display:grid;grid-template-columns:repeat(14,1fr);gap:6px}.pianopad__key{min-height:var(--tap);border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;font-weight:600;transition:transform .09s ease,background-color .12s ease,border-color .12s ease}.pianopad__key:active{transform:scale(.95)}.pianopad__key--black{min-height:46px;background:var(--bg)}.pianopad__name{font-size:19px}.pianopad__key--black .pianopad__name{font-size:15px}.pianopad__alt{font-size:12px;font-weight:500;color:var(--text-dim)}.pianopad__key[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.pianopad__key[aria-pressed=true] .pianopad__alt{color:inherit;opacity:.85}.pianopad__key[data-state=correct]{background:var(--correct);border-color:var(--correct);color:#05210f}.pianopad__key[data-state=wrong]{background:var(--wrong);border-color:var(--wrong);color:#2a0508}.pianopad__key[data-state=reveal]{border-color:var(--correct);color:var(--correct)}.pianopad__key[data-state] .pianopad__alt{color:inherit;opacity:.8}.pianopad__key:disabled{opacity:.45}.segmented{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px;gap:3px}.segmented button{flex:1;min-height:42px;border-radius:8px;font-size:15px;font-weight:600;color:var(--text-dim);transition:background-color .12s ease,color .12s ease}.segmented button[aria-pressed=true]{background:var(--accent);color:#fff}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.row{position:relative;display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:10px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:left;width:100%;transition:transform .09s ease}.row:active{transform:scale(.985)}.row__body,.row__main{flex:1;min-width:0}.row__main:after{content:"";position:absolute;inset:0;border-radius:inherit}.row__title,.row__sub{display:block}.row__title{font-weight:600}.row__sub{font-size:14px;color:var(--text-dim);margin-top:1px}.row__chev{color:var(--text-dim);font-size:20px}.badge{flex:none;min-width:30px;height:24px;padding:0 8px;border-radius:12px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}.badge--quiet{background:var(--surface-2);color:var(--text-dim)}.badge--action{position:relative;z-index:1;min-width:44px;height:34px;border-radius:17px;font-size:15px;transition:transform .09s ease}.badge--action:active{transform:scale(.92)}.drill{flex:1;min-height:0;display:flex;flex-direction:column}.drill__prompt{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px 16px;overflow:hidden}.drill__answers{flex:none;padding:8px calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px);display:flex;flex-direction:column;gap:8px}.drill__feedback{flex:none;min-height:30px;text-align:center;font-weight:600;font-size:15px}.drill__feedback[data-state=correct]{color:var(--correct)}.drill__feedback[data-state=wrong]{color:var(--wrong)}.progressbar{flex:none;height:3px;background:var(--surface-2);border-radius:2px;overflow:hidden;margin:0 16px}.progressbar__fill{height:100%;background:var(--accent);border-radius:2px;transition:width .25s ease}.symbol{font-size:clamp(56px,22vw,120px);font-weight:700;letter-spacing:-.02em;line-height:1}.staff-host{width:100%;max-width:380px;max-height:100%;min-height:0;display:flex;justify-content:center}.staff-host svg{display:block;width:100%;height:auto;max-height:100%}.keyboard-host{width:100%}.stack--tight{gap:8px}.grid__spacer{visibility:hidden}.choice--stacked{flex-direction:column;gap:1px;line-height:1.15}.choice__main{font-size:19px;font-weight:700}.choice__sub{font-size:11px;font-weight:500;color:var(--text-dim)}.choice[aria-pressed=true] .choice__sub,.choice[data-state] .choice__sub{color:inherit;opacity:.8}.choice--row{justify-content:flex-start;padding:0 16px;font-size:17px}.btn--danger{color:var(--wrong);border-color:var(--border)}.section-note{font-size:13px;color:var(--text-dim);padding:0 4px 8px}.card--row{display:flex;align-items:center;gap:14px}.field__label{font-size:15px;font-weight:600;margin-bottom:8px}.card--row .field__label{margin-bottom:0}.field__help{font-size:13px;color:var(--text-dim);margin-top:8px;line-height:1.35}.card--row .field__help{margin-top:3px}.switch{flex:none;width:52px;height:32px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border);padding:2px;display:flex;transition:background-color .18s ease}.switch[aria-checked=true]{background:var(--correct);border-color:var(--correct)}.switch__knob{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000004d;transition:transform .18s ease}.switch[aria-checked=true] .switch__knob{transform:translate(20px)}.boxrow{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px;font-variant-numeric:tabular-nums}.boxrow__name{width:48px;color:var(--text-dim)}.boxrow__wait{width:34px;color:var(--text-dim);text-align:right;opacity:.7}.boxrow__bar{flex:1;height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}.boxrow__fill{display:block;height:100%;border-radius:5px;background:var(--accent)}.boxrow__fill[data-learned=true]{background:var(--correct)}.boxrow__count{width:26px;text-align:right}.summary{text-align:center}.summary__score{font-size:72px;font-weight:700;letter-spacing:-.03em;line-height:1}.summary__detail{margin-top:8px;color:var(--text-dim)}@keyframes screen-push{0%{transform:translate(22px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes screen-pop{0%{transform:translate(-22px);opacity:0}to{transform:translate(0);opacity:1}}.screen--push{animation:screen-push .22s cubic-bezier(.32,.72,0,1)}.screen--pop{animation:screen-pop .22s cubic-bezier(.32,.72,0,1)}.keys-answer{display:flex;flex-direction:column;gap:8px}.keys-answer__hint{font-size:13px;color:var(--text-dim);text-align:center;min-height:18px}.keys-answer__board{display:flex;justify-content:center}.keys-answer__board svg{max-height:210px}.calib__title{font-size:22px;font-weight:700;text-align:center}.calib__instruction{font-size:15px;color:var(--text-dim);text-align:center;line-height:1.4;min-height:20px}.calib__board{display:flex;flex-direction:column;gap:10px}.calib__names{text-align:center;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}.calib__heard{text-align:center;font-size:14px;color:var(--text-dim);min-height:20px;font-variant-numeric:tabular-nums}.calib__dots{display:flex;gap:6px;justify-content:center}.calib__dot{width:26px;height:4px;border-radius:2px;background:var(--surface-2)}.calib__dot[data-state=active]{background:var(--accent)}.calib__dot[data-state=done]{background:var(--correct)}.calib__dot[data-state=failed]{background:var(--wrong)}.play{display:flex;flex-direction:column;gap:10px}.play__status{font-size:14px;font-weight:600;text-align:center;color:var(--text-dim)}.play__status[data-tone=live]{color:var(--correct)}.play__status[data-tone=error]{color:var(--wrong)}.play__level{height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden}.play__level-fill{height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .06s linear}.play__board{width:100%}.play__hint{min-height:20px;font-size:14px;text-align:center;color:var(--amber)}.play__controls{display:flex;flex-direction:column;gap:8px}.card--warn{border-color:var(--amber);color:var(--amber)}.mic__row{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:4px 0;color:var(--text-dim)}.mic__row span:last-child{color:var(--text);font-variant-numeric:tabular-nums}.mic__mono{font-size:24px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}.mic__cents{position:relative;height:8px;margin-top:10px;border-radius:4px;background:var(--surface-2)}.mic__cents-centre{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:var(--text-dim);transform:translate(-1px)}.mic__cents-fill{position:absolute;top:-2px;bottom:-2px;width:4px;border-radius:2px;background:var(--accent);transform:translate(-2px);transition:left .08s linear,opacity .15s ease}.mic__pitches{display:flex;flex-direction:column;gap:6px;min-height:24px}.mic__pitch{display:flex;align-items:center;gap:10px;font-size:14px;font-variant-numeric:tabular-nums}.mic__pitch-name{width:44px;font-weight:700}.mic__pitch-bar{flex:1;height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}.mic__pitch-bar-fill{display:block;height:100%;background:var(--accent);border-radius:4px}.mic__pitch-value{width:38px;text-align:right;color:var(--text-dim)}.mic__stats{margin-top:10px;font-size:12px;color:var(--text-dim);text-align:center;font-variant-numeric:tabular-nums}.keyboard{display:block;width:100%;height:auto;overflow:visible}.keyboard__key rect{transition:fill .12s ease}.keyboard__key--white rect{fill:#f4f4f8;stroke:#c3c3d2;stroke-width:.6}.keyboard__key--black rect{fill:#16161d;stroke:#000;stroke-width:.6}.keyboard__key[data-state=target] rect,.keyboard__key[data-state=selected] rect{fill:var(--accent);stroke:var(--accent)}.keyboard__key[data-state=correct] rect{fill:var(--correct);stroke:var(--correct)}.keyboard__key[data-state=wrong] rect{fill:var(--wrong);stroke:var(--wrong)}.keyboard__key[data-state=hint] rect{fill:var(--amber);stroke:var(--amber)}.keyboard__key--tappable{cursor:pointer}.keyboard--interactive .keyboard__key--white:active rect{fill:#d8d8e6}.keyboard--interactive .keyboard__key--black:active rect{fill:#33334a}.keyboard__octave{font-size:9px;font-weight:600;text-anchor:middle;fill:var(--text-dim)}.pane,.drill__answers,.progressbar{max-width:var(--content-max, none);margin-inline:auto;width:100%}@media(min-width:700px){:root{--content-max: 620px;--tap: 60px;--radius: 18px}body{font-size:18px}.topbar{max-width:620px;margin-inline:auto;width:100%}.staff-host{max-width:520px}.keyboard-host{max-width:660px}.choice,.choice__main{font-size:22px}.choice__sub{font-size:12px}}@media(orientation:landscape)and (max-height:560px){.drill__prompt{padding:2px 12px}.staff-host{max-width:260px}.keyboard-host{max-width:520px}.symbol{font-size:clamp(40px,12vh,72px)}.drill__feedback{min-height:22px;font-size:14px}:root{--tap: 46px}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}}.shake{animation:shake .32s ease}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}