:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--serif:"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--bg:#efe7d7;--bg-grain:#e9dfcc;--paper:#fbf7ee;--paper-2:#f5efe3;--card:#fffcf5;--ink:#2a2420;--ink-2:#5c5248;--ink-3:#8b7f71;--rule:#dccfb9;--rule-2:#e8dcc8;--accent:#8c2f22;--accent-2:#b4513f;--accent-soft:#8c2f221a;--gold:#b07d1f;--ok:#2f7d4f;--ok-soft:#2f7d4f29;--warn:#b7791f;--bad:#c0392b;--bad-soft:#c0392b29;--label:#6d5f50;--cursor:#8c2f221f;--cursor-edge:#8c2f228c;--shadow:0 1px 0 #ffffffb3 inset, 0 1px 2px #3c281414, 0 6px 18px -8px #3c28142e;--radius:12px;--radius-sm:8px;--key-white:#fffdf8;--key-white-edge:#d8ccb7;--key-black:#2b2521;--key-black-top:#3d3530;--key-held:#e7b9a9;--key-expected:#e9d79c;--key-correct:#a9d3b5}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#171412;--bg-grain:#1c1916;--paper:#221e1a;--paper-2:#2a2520;--card:#26211d;--ink:#ede4d3;--ink-2:#c4b8a5;--ink-3:#8f8473;--rule:#3b342d;--rule-2:#332d27;--accent:#e08a6f;--accent-2:#f0a58d;--accent-soft:#e08a6f24;--gold:#d9a646;--ok:#6cc28c;--ok-soft:#6cc28c2e;--warn:#e0a84a;--bad:#ef7466;--bad-soft:#ef74662e;--label:#b9a990;--cursor:#e08a6f24;--cursor-edge:#e08a6f99;--shadow:0 1px 2px #0006, 0 8px 24px -10px #0009;--key-white:#e9e1d2;--key-white-edge:#a89c88;--key-black:#12100e;--key-black-top:#2a2521;--key-held:#d98f77;--key-expected:#cdb768;--key-correct:#7fbf95}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--sans);color:var(--ink);background:radial-gradient(1200px 600px at 20% -10%, #ffffff59, transparent 60%), var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;font-size:14px;line-height:1.4}button,select,input{font:inherit;color:inherit}button{cursor:pointer}kbd{font-family:var(--mono);border:1px solid var(--rule);background:var(--paper);color:var(--ink-2);white-space:nowrap;border-bottom-width:2px;border-radius:4px;padding:1px 5px;font-size:10.5px}.muted{color:var(--ink-3);font-weight:400}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.splash{height:100%;font-family:var(--serif);color:var(--ink-2);place-content:center;justify-items:center;gap:12px;font-size:18px;display:grid}.app{height:100dvh;padding-top:env(safe-area-inset-top);grid-template-rows:58px minmax(0,1fr);grid-template-columns:minmax(0,1fr);display:grid}.topbar{border-bottom:1px solid var(--rule);background:color-mix(in srgb, var(--paper) 85%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);align-items:center;gap:18px;min-width:0;padding:0 18px;display:flex;overflow:hidden}.brand{align-items:center;gap:10px;min-width:0;display:flex}.brand-mark{background:linear-gradient(90deg, transparent 0 22%, var(--ink) 22% 34%, transparent 34% 56%, var(--ink) 56% 68%, transparent 68%) top / 100% 58% no-repeat, linear-gradient(90deg, var(--paper) 0 30%, var(--rule) 30% 33%, var(--paper) 33% 63%, var(--rule) 63% 66%, var(--paper) 66%);border:2px solid var(--accent);border-radius:8px;flex:none;width:28px;height:28px;box-shadow:0 1px 3px #00000026}.brand-name{font-family:var(--serif);letter-spacing:.01em;white-space:nowrap;font-size:19px;font-weight:600}.brand-tld{color:var(--accent)}.topbar-right{align-items:center;gap:8px;margin-left:auto;display:flex}.chip{border:1px solid var(--rule);background:var(--card);height:30px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:0 11px;font-size:12.5px;font-weight:600;display:inline-flex}.chip-icon,.chip-xp{color:var(--gold)}.chip-midi{max-width:230px}.chip-midi-name{text-overflow:ellipsis;overflow:hidden}.chip-midi .dot{background:var(--ink-3);border-radius:50%;flex:none;width:8px;height:8px}.chip-midi.is-on .dot{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}.icon-btn{border:1px solid var(--rule);background:var(--card);border-radius:10px;place-items:center;width:34px;height:34px;font-size:16px;display:grid}.drawer-toggle,.drawer-backdrop{display:none}.workspace{grid-template-columns:340px minmax(0,1fr);min-height:0;display:grid}.sidebar{border-right:1px solid var(--rule);background:var(--paper-2);flex-direction:column;min-height:0;display:flex}.sidebar-tabs{border-bottom:1px solid var(--rule);grid-template-columns:repeat(3,1fr);gap:4px;padding:10px 12px 0;display:grid}.sidebar-tabs button{color:var(--ink-3);background:0 0;border:0;border-bottom:2px solid #0000;margin-bottom:-1px;padding:9px 4px 10px;font-size:12.5px;font-weight:600}.sidebar-tabs button.is-active{color:var(--ink);border-bottom-color:var(--accent)}.sidebar-scroll{scrollbar-gutter:stable;flex:1;overflow-y:auto}.panel-body{padding:6px 14px 28px}.panel-section{border-bottom:1px solid var(--rule-2);gap:12px;padding:14px 0;display:grid}.panel-section:last-child{border-bottom:0}.section-title{font-family:var(--serif);font-size:15px;font-weight:600}.field{gap:6px;display:grid}.field-label,.select-field label,.slider-head label{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-size:11.5px;font-weight:700}.field-hint{color:var(--ink-3);margin:0;font-size:12.5px;line-height:1.5}.status-line{color:var(--ink-2);border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--rule-2);margin:0;padding:8px 10px;font-size:12.5px}.status-line.is-ok{border-color:color-mix(in srgb, var(--ok) 40%, transparent)}.grid-2{grid-template-columns:1fr 1fr;gap:10px;display:grid}.button-row{flex-wrap:wrap;gap:8px;display:flex}.btn{border:1px solid var(--rule);background:var(--card);white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:8px;height:36px;padding:0 14px;font-size:13px;font-weight:600;display:inline-flex;box-shadow:0 1px #00000008}.btn:hover:not(:disabled){border-color:var(--ink-3)}.btn:disabled{opacity:.45;cursor:default}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff8f0}.btn-primary:hover:not(:disabled){border-color:var(--accent);filter:brightness(1.07)}.btn-primary kbd{color:inherit;background:#ffffff29;border-color:#ffffff4d}[data-theme=dark] .btn-primary{color:#1b1310}.btn-block{width:100%}.btn-small{height:30px;padding:0 10px;font-size:12px}.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}.btn-ghost-danger{color:var(--bad);justify-self:start}.segmented{background:var(--rule-2);border:1px solid var(--rule);border-radius:10px;gap:2px;padding:3px;display:flex}.segmented button{min-width:0;height:30px;color:var(--ink-2);white-space:nowrap;background:0 0;border:0;border-radius:7px;flex:1 1 0;padding:0 10px;font-size:12.5px;font-weight:600}.segmented button.is-active{background:var(--card);color:var(--ink);box-shadow:0 1px 2px #0000001f}.topbar-lesson .segmented{width:330px}.topbar-mode .segmented{width:140px}.topbar-mode.is-hidden{visibility:hidden}.label-short{display:none}.btn-start.is-playing{background:var(--gold);border-color:var(--gold)}.ear-profile{min-height:2.9em}.select-field{gap:5px;min-width:0;display:grid}.select-field select{border:1px solid var(--rule);background:var(--card);border-radius:9px;width:100%;min-width:0;height:34px;padding:0 8px}.slider-field{gap:6px;display:grid}.slider-head{justify-content:space-between;align-items:baseline;display:flex}.slider-value{font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right;min-width:4ch;font-size:13px;font-weight:600}.difficulty-slider .slider-value .level-num{font-family:var(--serif);color:var(--accent);text-align:right;min-width:3ch;font-size:26px;line-height:1;display:inline-block}input[type=range]{appearance:none;touch-action:pan-y;background:0 0;width:100%;height:22px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent) 0 var(--fill), var(--rule) var(--fill) 100%);border-radius:3px;height:6px}input[type=range]::-moz-range-track{background:linear-gradient(90deg, var(--accent) 0 var(--fill), var(--rule) var(--fill) 100%);border-radius:3px;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--card);border:2px solid var(--accent);border-radius:50%;width:20px;height:20px;margin-top:-7px;box-shadow:0 1px 3px #0003}input[type=range]::-moz-range-thumb{background:var(--card);border:2px solid var(--accent);border-radius:50%;width:18px;height:18px}.tier-line{gap:2px;min-height:38px;display:grid}.tier-name{font-family:var(--serif);white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:600;overflow:hidden}.tier-summary{color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;overflow:hidden}.tier-progress{grid-template-columns:1fr 70px;align-items:center;gap:10px;display:grid}.tier-count{color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums;font-size:12px;font-weight:600}.progress-track{background:var(--rule);border-radius:3px;height:6px;overflow:hidden}.progress-fill{background:var(--gold);border-radius:3px;height:100%;transition:width .4s}.progress-fill.is-mastered{background:var(--ok)}.toggle-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.toggle-label{cursor:pointer;gap:1px;font-size:13px;font-weight:600;display:grid}.toggle-label small{color:var(--ink-3);font-size:12px;font-weight:400}.switch{border:1px solid var(--rule);background:var(--rule);border-radius:12px;flex:none;width:40px;height:24px;padding:0;transition:background .15s;position:relative}.switch-knob{background:var(--card);border-radius:50%;width:18px;height:18px;transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #00000040}.switch.is-on{background:var(--accent);border-color:var(--accent)}.switch.is-on .switch-knob{transform:translate(16px)}details.advanced summary,details.help summary{cursor:pointer;justify-content:space-between;font-size:13px;font-weight:600;list-style:none;display:flex}details.advanced summary::-webkit-details-marker{display:none}details.help summary::-webkit-details-marker{display:none}details.advanced summary:before{content:"▸";color:var(--ink-3);margin-right:6px}details.advanced[open] summary:before{content:"▾"}details.advanced summary{justify-content:flex-start}details.advanced summary .muted{margin-left:auto;font-size:12px}details.advanced[open]{gap:12px}details.help{color:var(--ink-2);font-size:12.5px}details.help p{margin:8px 0 0;line-height:1.5}.bpm-row{grid-template-columns:1fr auto;align-items:end;gap:10px;display:grid}.stage{padding:12px 16px calc(12px + env(safe-area-inset-bottom));grid-template-rows:54px minmax(0,1fr) 62px auto;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0;min-height:0;display:grid}.meta-strip{border-radius:var(--radius);background:var(--card);border:1px solid var(--rule);box-shadow:var(--shadow);grid-template-columns:minmax(170px,1.3fr) repeat(6,minmax(0,1fr)) auto;align-items:center;gap:4px;padding:0 6px 0 14px;display:grid;overflow:hidden}.meta-tier{align-items:baseline;gap:10px;min-width:0;display:flex}.meta-level{font-family:var(--serif);color:var(--accent);font-variant-numeric:tabular-nums;min-width:2.6em;font-size:22px;font-weight:600}.meta-tier-name{font-family:var(--serif);white-space:nowrap;text-overflow:ellipsis;font-size:14.5px;font-weight:600;overflow:hidden}.meta-item{border-left:1px solid var(--rule-2);gap:1px;min-width:0;padding-left:12px;display:grid}.meta-k{letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-size:10.5px;font-weight:700}.meta-v{white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;overflow:hidden}.meta-badges{justify-content:flex-end;gap:6px;width:190px;display:flex}.badge{white-space:nowrap;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700}.badge-sight{background:color-mix(in srgb, var(--gold) 18%, transparent);color:var(--gold)}.badge-sight.is-off{background:var(--rule-2);color:var(--ink-3)}.badge-focus{background:var(--accent-soft);color:var(--accent)}.badge.is-hidden{visibility:hidden}.score-card{border-radius:var(--radius);background:linear-gradient(180deg, #ffffff80, transparent 120px), var(--paper);border:1px solid var(--rule);min-height:0;box-shadow:var(--shadow);display:flex;position:relative;overflow:hidden}[data-theme=dark] .score-card{background:var(--paper)}.practice-bar{border-radius:var(--radius);background:var(--card);border:1px solid var(--rule);box-shadow:var(--shadow);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:0 12px;display:grid}.pb-actions{gap:8px;display:flex}.btn-start{min-width:132px}.btn-start.is-stop{background:var(--ink);border-color:var(--ink);color:var(--paper)}.pb-status{border-radius:10px;align-items:center;gap:14px;min-width:0;height:40px;padding:0 12px;transition:background .2s;display:flex}.pb-status.is-wrong{background:var(--bad-soft)}.pb-message{white-space:nowrap;text-overflow:ellipsis;min-width:0;color:var(--ink-2);flex:1;font-weight:500;overflow:hidden}.pb-status.is-wrong .pb-message{color:var(--bad);font-weight:600}.beat-dots{flex:none;gap:6px;width:112px;display:flex}.beat-dot{border:2px solid var(--rule);background:0 0;border-radius:50%;width:12px;height:12px;transition:background 60ms,transform 60ms}.beat-dot.is-downbeat{border-color:var(--ink-3)}.beat-dot.is-on{background:var(--accent);border-color:var(--accent);transform:scale(1.15)}.beat-dots.is-countin .beat-dot.is-on{background:var(--gold);border-color:var(--gold)}.beat-dot.is-idle{opacity:.5}.grade-chip{text-align:center;font-variant-numeric:tabular-nums;border-radius:999px;flex:none;width:110px;padding:4px 8px;font-size:12px;font-weight:700}.grade-chip.is-hidden{visibility:hidden}.grade-chip.is-perfect,.grade-chip.is-good{background:var(--ok-soft);color:var(--ok)}.grade-chip.is-early,.grade-chip.is-late{background:color-mix(in srgb, var(--warn) 20%, transparent);color:var(--warn)}.pb-stats{gap:4px;margin:0;display:flex}.pb-stats div{justify-items:center;width:76px;display:grid}.pb-stats dt{letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-size:10.5px;font-weight:700}.pb-stats dd{font-family:var(--serif);font-variant-numeric:tabular-nums;margin:0;font-size:20px;font-weight:600}.results-backdrop{background:color-mix(in srgb, var(--paper) 55%, transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:5;place-items:center;padding:12px;animation:.2s fade-in;display:grid;position:absolute;inset:0}.results-card{background:var(--card);border:1px solid var(--rule);border-radius:16px;gap:14px;width:min(480px,100%);max-height:100%;padding:0 22px 20px;display:grid;overflow:auto;box-shadow:0 24px 60px -20px #28190a73}.results-ribbon{border-radius:16px 16px 0 0;margin:0 -22px;padding:7px 22px;font-size:12px;font-weight:700}.results-ribbon.is-pass{background:var(--ok-soft);color:var(--ok)}.results-ribbon.is-fail{background:var(--rule-2);color:var(--ink-3)}.results-card h2{font-family:var(--serif);margin:0;font-size:26px}.results-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.rg-item{background:var(--paper-2);text-align:center;border-radius:10px;gap:2px;padding:10px 8px;display:grid}.rg-v{font-family:var(--serif);font-variant-numeric:tabular-nums;font-size:22px;font-weight:600}.rg-main .rg-v{color:var(--accent)}.rg-v.rg-v-small{align-self:center;place-items:center;min-height:29px;font-size:16px;display:grid}.rg-wide{grid-column:1/-1;padding:7px 8px}.rg-wide b{color:var(--ink)}.rg-k{color:var(--ink-3);font-size:11px;font-weight:600}.results-xp{gap:3px;display:grid}.xp-total{font-family:var(--serif);color:var(--gold);font-size:22px;font-weight:700}.xp-bonus{color:var(--gold);font-size:12.5px;font-weight:600}.xp-note{color:var(--ink-3);font-size:12px}.results-tier{gap:6px;display:grid}.rt-head{justify-content:space-between;font-size:12.5px;font-weight:600;display:flex}.rt-mastered{color:var(--ok);font-size:13px;font-weight:700}.results-actions{justify-content:flex-end;gap:8px;display:flex}@keyframes fade-in{0%{opacity:0}}.monitor{align-items:center;gap:10px;min-width:0;min-height:28px;display:flex}.pedal{color:var(--ink-3);flex:none;align-items:center;gap:6px;width:98px;font-size:12px;font-weight:600;display:inline-flex}.pedal-icon{border:2px solid;border-radius:3px 3px 6px 6px;width:22px;height:12px;transition:transform 80ms,background 80ms}.pedal.is-down{color:var(--gold)}.pedal.is-down .pedal-icon{background:currentColor;transform:translateY(2px)scaleY(.8)}.held-notes{flex-wrap:nowrap;gap:4px;min-width:0;font-size:12px;display:flex;overflow:hidden}.note-chip{font-variant-numeric:tabular-nums;background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:2px 7px;font-weight:700}.note-chip.is-sustained{background:color-mix(in srgb, var(--gold) 16%, transparent);color:var(--gold)}.stat-tiles{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.tile{background:var(--card);border:1px solid var(--rule-2);border-radius:10px;gap:2px;padding:10px;display:grid}.tile-v{font-family:var(--serif);font-variant-numeric:tabular-nums;font-size:20px;font-weight:600}.tile-k{color:var(--ink-3);font-size:11px;font-weight:600}.weak-list{gap:4px;margin:0;padding:0;list-style:none;display:grid}.weak-list li{background:var(--card);border-radius:8px;grid-template-columns:52px 1fr 48px 40px;gap:6px;padding:5px 8px;font-size:12.5px;display:grid}.weak-note{color:var(--accent);font-weight:700}.clef-bars{gap:6px;display:grid}.clef-bar{grid-template-columns:52px 1fr 40px;align-items:center;gap:8px;font-size:12px;font-weight:600;display:grid}.heatmap{gap:4px;display:grid}.heatmap-label{color:var(--ink-2);font-size:12px;font-weight:600}.heatmap-keys{border:1px solid var(--rule);border-radius:6px;height:38px;display:flex;overflow:hidden}.heat-key{background:var(--card);border-right:1px solid var(--rule-2);color:var(--ink-3);flex:1;justify-content:center;align-items:flex-end;font-size:8px;display:flex;position:relative}.heat-key span{padding-bottom:2px}.heat-sharp{z-index:1;border-radius:0 0 2px 2px;width:60%;height:55%;position:absolute;top:0;right:-30%}.tier-ladder{gap:3px;margin:0;padding:0;list-style:none;display:grid}.tier-ladder li{border-radius:8px;grid-template-columns:54px 1fr 40px;gap:8px;padding:5px 8px;font-size:12.5px;display:grid}.tier-ladder li.is-current{background:var(--accent-soft);font-weight:600}.tier-ladder li.is-mastered .tl-state{color:var(--gold)}.tl-range{color:var(--ink-3);font-variant-numeric:tabular-nums}.tl-state{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-3)}@media (max-width:1240px){.meta-strip{grid-template-columns:minmax(150px,1.3fr) repeat(4,minmax(0,1fr)) auto}.meta-item:nth-of-type(n+6){display:none}}@media (max-width:1080px){.workspace{grid-template-columns:minmax(0,1fr)}.sidebar{z-index:20;top:calc(58px + env(safe-area-inset-top));width:min(380px,92vw);transition:transform .22s;position:fixed;bottom:0;left:0;transform:translate(-102%);box-shadow:0 0 40px #00000040}.sidebar.is-open{transform:none}.drawer-backdrop{z-index:19;background:#140c0640;display:block;position:fixed;inset:0}.drawer-toggle{display:grid}}@media (max-width:900px){.chip-streak{display:none}}@media (max-width:760px){.topbar{gap:10px;padding:0 10px}.brand-name,.chip-xp,.chip-streak{display:none}.topbar-lesson .segmented{width:190px}.topbar-mode .segmented{width:110px}.label-long,.topbar-mode.is-hidden{display:none}.label-short{display:inline}.chip-midi{max-width:34px;padding:0 12px}.chip-midi-name{display:none}.stage{grid-template-rows:50px minmax(0,1fr) auto auto;gap:8px;padding:8px}.meta-strip{grid-template-columns:minmax(120px,1fr) repeat(2,minmax(0,1fr))}.meta-item:nth-of-type(n+4),.meta-badges{display:none}.practice-bar{grid-template-columns:1fr auto;padding:8px}.pb-status{order:-1;grid-column:1/-1}.pb-actions .btn{padding:0 10px}.btn-start{min-width:0}.pb-stats div{width:52px}.pb-stats dd{font-size:17px}.results-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.pb-actions .btn kbd,.pb-stats div:nth-child(2){display:none}.meta-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.meta-item:nth-of-type(n+3){display:none}}.piano-legend{background:var(--paper-2);border-radius:10px;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;font-size:12px;font-weight:600;display:flex}.legend-item{align-items:center;gap:5px;display:inline-flex}.legend-key{border:1px solid var(--key-white-edge);background:var(--key-white);width:20px;height:26px;color:var(--accent);border-radius:0 0 4px 4px;place-items:center;font-size:11px;font-weight:800;display:inline-grid;box-shadow:inset 0 -3px #0000000f}.btn-ghost{background:0 0;border-color:#0000;margin-right:auto}.btn.is-selected{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.modal-backdrop{z-index:40;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#1e140c59;place-items:center;padding:16px;animation:.15s fade-in;display:grid;position:fixed;inset:0}.modal-card{background:var(--card);border:1px solid var(--rule);border-radius:16px;width:min(520px,100%);max-height:100%;padding:18px 22px 20px;overflow:auto;box-shadow:0 30px 80px -20px #1e120880}.modal-head{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.modal-head h2{font-family:var(--serif);margin:0;font-size:22px}.modal-actions{justify-content:flex-end;gap:8px;margin-top:6px;display:flex}.calib-body{gap:12px;font-size:14px;line-height:1.55;display:grid}.calib-body p{margin:0}.calib-warn{color:var(--warn);font-weight:600}.calib-running{text-align:center;align-content:center;justify-items:center;min-height:300px}.calib-running .progress-track{width:100%}.calib-instruction{font-family:var(--serif);font-size:19px;font-weight:600}.calib-count{font-variant-numeric:tabular-nums}.calib-ear{width:120px;height:120px;color:var(--ink-3);background:var(--paper-2);border:2px dashed var(--rule);border-radius:50%;place-items:center;font-size:54px;display:grid}.calib-flash{background:var(--paper-2);border:2px solid var(--rule);border-radius:50%;width:120px;height:120px}.calib-flash.is-on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 12px var(--accent-soft)}.calib-results{grid-template-columns:1fr 1fr;gap:10px;margin:0;display:grid}.calib-results>div{background:var(--paper-2);border-radius:12px;gap:2px;padding:12px;display:grid}.calib-results dt{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-size:11px;font-weight:700}.calib-results dd{font-family:var(--serif);color:var(--accent);font-variant-numeric:tabular-nums;margin:0;font-size:28px;font-weight:600}.calib-quality{color:var(--ink-3);font-size:12px}.calib-quality.is-good{color:var(--ok)}.calib-quality.is-poor{color:var(--warn)}.key-assign{background:var(--paper-2);border-radius:9px;grid-template-columns:1fr auto auto auto;align-items:center;gap:8px;padding:6px 8px;display:grid}.key-assign+.key-assign{margin-top:6px}.key-assign.is-learning{box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--accent-soft)}.key-assign-hand{color:var(--ink-2);font-size:12.5px;font-weight:600}.key-assign-note{font-family:var(--serif);font-size:15px;font-weight:700}.key-assign.is-learning .key-assign-note{font-family:var(--sans);color:var(--accent);font-size:12px}.time-bars .clef-bar{grid-template-columns:minmax(0,132px) 1fr 40px}.time-bars .clef-bar>span:first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.score-scroll{scrollbar-gutter:stable;overscroll-behavior:contain;flex:1;overflow:hidden auto}.score-canvas{min-height:100%;position:relative}.score-host{position:relative}.score-host svg{display:block}.score-svg,.score-svg [fill]:not([fill=none]){fill:var(--ink)}.score-svg [stroke]:not([stroke=none]){stroke:var(--ink)}.score-svg .vf-stave [fill]:not([fill=none]),.score-svg .vf-stave [stroke]:not([stroke=none]){fill:var(--ink-2);stroke:var(--ink-2)}.score-svg .vf-pp-note [fill]:not([fill=none]),.score-svg .vf-pp-note [stroke]:not([stroke=none]){transition:fill .12s,stroke .12s}.score-svg .vf-pp-note.is-current,.score-svg .vf-pp-note.is-current [fill]:not([fill=none]){fill:var(--accent)}.score-svg .vf-pp-note.is-current [stroke]:not([stroke=none]){stroke:var(--accent)}.score-svg .vf-pp-note.is-good,.score-svg .vf-pp-note.is-good [fill]:not([fill=none]){fill:var(--ok)}.score-svg .vf-pp-note.is-good [stroke]:not([stroke=none]){stroke:var(--ok)}.score-svg .vf-pp-note.is-ok,.score-svg .vf-pp-note.is-ok [fill]:not([fill=none]){fill:var(--warn)}.score-svg .vf-pp-note.is-ok [stroke]:not([stroke=none]){stroke:var(--warn)}.score-svg .vf-pp-note.is-bad,.score-svg .vf-pp-note.is-missed,.score-svg .vf-pp-note.is-bad [fill]:not([fill=none]),.score-svg .vf-pp-note.is-missed [fill]:not([fill=none]){fill:var(--bad)}.score-svg .vf-pp-note.is-bad [stroke]:not([stroke=none]),.score-svg .vf-pp-note.is-missed [stroke]:not([stroke=none]){stroke:var(--bad)}.score-svg .vf-pp-note.is-missed{opacity:.55}.score-svg .pp-label{font-family:var(--sans);fill:var(--label);stroke:none;letter-spacing:.02em;font-size:11px;font-weight:700}.score-svg .pp-bar-number{font-family:var(--serif);fill:var(--ink-3);stroke:none;font-size:11px;font-style:italic}.score-cursor,.score-playhead{pointer-events:none;opacity:0;will-change:transform;position:absolute;top:0;left:0}.score-cursor{background:var(--cursor);width:30px;box-shadow:inset 0 0 0 1.5px var(--cursor-edge);border-radius:8px;transition:transform .16s cubic-bezier(.3,.7,.3,1),opacity .2s,height .16s}.score-cursor.is-wrong{animation:.45s cursor-wrong}@keyframes cursor-wrong{0%,to{background:var(--cursor)}20%{background:var(--bad-soft);box-shadow:inset 0 0 0 2px var(--bad);translate:-3px}45%{translate:3px}70%{translate:-2px}}.score-playhead{background:var(--accent);width:3px;box-shadow:0 0 0 3px var(--accent-soft);border-radius:2px}.score-error{color:var(--bad);place-items:center;font-weight:600;display:grid;position:absolute;inset:16px}.score-svg .vf-pp-note.is-hidden,.score-svg .pp-label.is-hidden,.score-svg .vf-pp-measure.is-hidden{opacity:0}.score-svg .vf-pp-measure{transition:opacity .25s}.score-svg .vf-pp-note.is-call,.score-svg .vf-pp-note.is-call [fill]:not([fill=none]){fill:var(--ink-3)}.score-svg .vf-pp-note.is-call [stroke]:not([stroke=none]){stroke:var(--ink-3)}.score-svg .pp-hand-label{font-family:var(--sans);letter-spacing:.06em;fill:var(--ink-3);stroke:none;font-size:10px;font-weight:700}.score-svg .pp-placeholder{display:none}.score-svg .pp-placeholder.is-shown{display:inline}.score-svg .pp-placeholder rect{fill:var(--accent-soft);stroke:var(--cursor-edge);stroke-width:1.2px;stroke-dasharray:3 2}.score-svg .pp-placeholder-mark{font-family:var(--serif);fill:var(--accent);stroke:none;font-size:16px;font-weight:700}.keyboard-dock{border-radius:var(--radius);height:196px;box-shadow:var(--shadow);background:linear-gradient(#3a312b,#2a231f);grid-template-rows:30px 1fr;gap:6px;padding:8px 10px 10px;display:grid}[data-theme=dark] .keyboard-dock{background:linear-gradient(#2a2420,#15110f)}.keyboard-head{color:#e8dcc8;justify-content:space-between;align-items:center;gap:10px;padding:0 4px;display:flex}.keyboard-head .muted{color:#a89880;font-variant-numeric:tabular-nums;font-size:12px}.keyboard-head .pedal{color:#a89880}.keyboard-head .pedal.is-down{color:#e6b450}.keyboard-head .note-chip{color:#ffd9c8;background:#ffdcc824}.keyboard-head .note-chip.is-sustained{color:#e6b450;background:#e6b45029}.keyboard-head .muted:not(.kb-range){font-size:12px}.piano{touch-action:none;-webkit-user-select:none;user-select:none;border-top:3px solid #8c2f22;border-radius:2px 2px 6px 6px;height:100%;min-height:0;position:relative;overflow:hidden}.key{cursor:pointer;flex-direction:column;justify-content:flex-end;align-items:center;transition:background 50ms;display:flex;position:absolute;top:0}.key-white{background:linear-gradient(180deg, #f3eee4 0%, var(--key-white) 12%, var(--key-white) 92%, #ece4d6 100%);border-left:1px solid var(--key-white-edge);border-bottom:1px solid var(--key-white-edge);z-index:1;border-radius:0 0 5px 5px;height:100%}.key-black{background:linear-gradient(180deg, var(--key-black-top), var(--key-black) 85%, #000 100%);z-index:2;border-radius:0 0 4px 4px;height:62%;box-shadow:inset 0 -4px #ffffff14,0 2px 3px #00000073}.key-white.is-expected{background:linear-gradient(180deg, #f3eee4, var(--key-expected) 30%)}.key-black.is-expected{background:linear-gradient(#6b5a26,#a8913f)}.key-white.is-held{background:linear-gradient(180deg, #e6dccb, var(--key-held) 40%)}.key-black.is-held{background:linear-gradient(#7a3426,#a24633)}.key-white.is-sustained{background:linear-gradient(180deg, #f3eee4, color-mix(in srgb, var(--key-held) 45%, var(--key-white)) 40%)}.key-white.is-correct{background:linear-gradient(180deg, #e6dccb, var(--key-correct) 40%)}.key-black.is-correct{background:linear-gradient(#2c5a3c,#3f7d55)}.key.is-wrong{animation:.45s key-wrong}.key-white.is-wrong{background:linear-gradient(#f0d5cf,#e88c7f 40%)}.key-black.is-wrong{background:linear-gradient(#8a2216,#c0392b)}@keyframes key-wrong{25%{transform:translate(-1px)}50%{transform:translate(1px)}}.key-label{font-size:clamp(8px, calc(100vw / var(--white-count) / 3.4), 12px);color:#9a8c7a;pointer-events:none;white-space:nowrap;margin-bottom:7px;font-weight:700}.key-label.is-c{color:#8c2f22}.key-label-black{color:#f1e4cc;margin-bottom:5px}.key-qwerty{font-family:var(--mono);color:#b2a48f;pointer-events:none;margin-bottom:2px;font-size:9.5px}.key-black .key-qwerty{color:#8a7c68}.key-heat{border-radius:3px;height:6px;position:absolute;top:6px;left:15%;right:15%}@media (max-height:780px){.keyboard-dock{height:160px}}@media (max-width:760px){.keyboard-dock{height:150px;padding:6px}.keyboard-head .kb-range{display:none}}.key-white.is-action{background:linear-gradient(180deg, #f3eee4, color-mix(in srgb, var(--accent) 14%, var(--key-white)) 45%)}.key-action{letter-spacing:.02em;color:#fff8f0;white-space:nowrap;pointer-events:none;background:#8c2f22;border-radius:5px;padding:2px 5px;font-size:10px;font-weight:800;position:absolute;bottom:28px;left:50%;translate:-50%}.key-white.is-marked:not(.is-held):not(.is-expected){background:linear-gradient(180deg, #f3eee4, color-mix(in srgb, var(--accent) 10%, var(--key-white)) 45%)}.key-marker{letter-spacing:.03em;background:var(--accent);color:#fff8f0;white-space:nowrap;pointer-events:none;z-index:3;border-radius:5px;padding:2px 5px;font-size:9.5px;font-weight:800;position:absolute;bottom:28px;left:50%;translate:-50%}.key-black .key-marker{bottom:12px}.key-marker small{font-size:inherit}@media (max-width:760px){.key-marker small{display:none}.key-marker{padding:2px 3px}}