:root{color:#272d33;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#272d33;--muted:#727b84;--line:#dce0e3;--accent:#465f75;--accent-soft:#e5ebf0;--red:#a35151;--music-font:"Cambria", "Times New Roman", "SimSun", serif;--motion-ease:cubic-bezier(.22, .68, .24, 1);background:#f2f3f4;font-family:Segoe UI,Microsoft YaHei,sans-serif;font-size:13px}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px}button,input,select,textarea{font:inherit;border-radius:2px}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input[type=checkbox],input[type=range]{accent-color:var(--accent)}select,input:not([type=checkbox]):not([type=range]):not([type=file]){border:1px solid var(--line);min-height:32px;color:var(--ink);background:#fff;min-width:0;padding:5px 8px}input[type=file]{width:100%;color:var(--muted);font-size:11px}input::file-selector-button{border:1px solid var(--line);color:var(--ink);background:#fff;margin-right:8px;padding:7px}h1,h2,h3,p{margin:0}h2{font-size:15px;font-weight:600}h3{font-size:13px;font-weight:600}.eyebrow{color:var(--muted);letter-spacing:.12em;font-size:10px;line-height:1.5}.music-type,.practice-target,.practice-step strong,.keyboard-note-summary,.chord-resolved-notes strong,.chord-live-heading>strong,.chord-theory-grid dd{font-family:var(--music-font);font-weight:400}[hidden]{display:none!important}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.app-shell{grid-template-rows:58px minmax(0,1fr) auto 24px;height:100dvh;padding:0 24px;display:grid}.topbar{border-bottom:1px solid var(--line);align-items:center;gap:14px;min-width:0;display:flex}.brand{color:var(--ink);white-space:nowrap;align-items:center;gap:9px;font-size:12px;font-weight:600;text-decoration:none;display:inline-flex}.brand-mark{color:#fff;width:26px;height:26px;font-family:var(--music-font);background:#303b46;place-items:center;font-size:18px;display:grid}.topbar-spacer{flex:1}.mode-switch{align-items:stretch;gap:5px;height:58px;margin-left:20px;display:flex}.mode-switch button{color:var(--muted);background:0 0;border:0;border-bottom:2px solid #0000;border-radius:0;padding:0 15px;font-size:12px}.mode-switch button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}.button{border:1px solid var(--line);white-space:nowrap;min-height:32px;color:var(--ink);background:#fff;padding:6px 11px;font-size:12px;font-weight:500}.button:hover:not(:disabled){border-color:#8f9ba5}.button-primary{background:var(--accent);border-color:var(--accent);color:#fff}.button-primary:hover:not(:disabled){background:#374e62}.button-muted{background:0 0}.button-panic{color:#835252;background:0 0;border-color:#d8caca}.volume-control{color:var(--muted);align-items:center;gap:7px;font-size:11px;display:flex}.volume-control input{width:65px}.top-audio-status,.connection-badge{color:var(--muted);align-items:center;gap:6px;font-size:11px;display:inline-flex}.status-dot{background:#a9afb4;border-radius:50%;width:5px;height:5px;display:inline-block}.status-dot.is-live,.is-connected .status-dot{background:var(--accent)}.workspace-body{min-height:0;transition:grid-template-columns .24s var(--motion-ease), gap .24s var(--motion-ease);grid-template-columns:0 minmax(0,1fr);gap:0;padding:16px 0 12px;display:grid}.is-sidebar-open .workspace-body{grid-template-columns:310px minmax(0,1fr);gap:18px}.workspace-stage,.practice-mode{min-width:0;height:100%;min-height:0}.workspace-stage{grid-column:2}.chord-mode{height:100%;min-height:0}.chord-mode[hidden]{display:none}.workspace-sidebar{border-right:1px solid var(--line);opacity:1;min-width:0;min-height:0;transition:opacity .18s ease, transform .24s var(--motion-ease), display .24s allow-discrete;flex-direction:column;padding-right:16px;display:flex;transform:translate(0)}.workspace-sidebar[hidden]{opacity:0;transform:translate(-10px)}@starting-style{.workspace-sidebar:not([hidden]){opacity:0;transform:translate(-10px)}}.sidebar-heading{color:var(--muted);letter-spacing:.08em;justify-content:space-between;align-items:center;padding:0 0 10px;font-size:11px;display:flex}.sidebar-content{scrollbar-width:thin;scrollbar-color:#c7cdd2 transparent;overscroll-behavior:contain;flex-direction:column;min-height:0;display:flex;overflow:auto}.sidebar-content>.device-disclosure{order:0}.sidebar-content>:has(>.practice-import-card){order:1}.sidebar-content>:has(>.practice-settings){order:2}.sidebar-content>:has(>.fingering-settings){order:2}.sidebar-content>:has(>.local-library){order:3}.sidebar-content>:has(>.practice-step-list){order:4}.sidebar-content>.shortcut-disclosure{order:5}.sidebar-content>.hardware-boundary-notice{order:6}.sidebar-content>.baseline-details{order:7}.workspace-disclosure{border:1px solid var(--line);background:#f9fafb;min-width:0;margin-bottom:10px}.workspace-disclosure>summary,.baseline-details>summary{cursor:pointer;color:var(--ink);align-items:center;gap:8px;padding:12px 10px;font-size:12px;font-weight:500;list-style:none;display:flex}.workspace-disclosure>summary::-webkit-details-marker{display:none}.workspace-disclosure>summary:before{content:"+";color:var(--muted);width:10px}.workspace-disclosure[open]>summary:before{content:"−"}.workspace-disclosure>summary>span:not(.help-tip){color:var(--muted);margin-left:auto;font-size:9px;font-weight:400}.workspace-disclosure[open]>summary{border-bottom:1px solid var(--line)}.disclosure-content,.control-grid,.practice-settings .practice-buttons,.practice-step-list nav,.local-library>:not(summary),.shortcut-disclosure p,.hardware-boundary-notice>div,.baseline-content{padding:12px}.control-grid{gap:20px;display:grid}.control-card{min-width:0}.card-heading,.section-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.card-heading{flex-wrap:wrap;margin-bottom:12px}.card-heading .eyebrow{display:none}.card-description{color:var(--muted);margin:8px 0;font-size:11px;line-height:1.65}.connect-button{width:100%;margin:8px 0}.input-list{gap:5px;margin-top:8px;display:grid}.input-row{border-bottom:1px solid var(--line);align-items:center;gap:8px;padding:10px 0;display:flex}.input-main{flex:1;gap:3px;min-width:0;display:grid}.input-main strong{overflow-wrap:anywhere;font-size:11px}.input-main small,.input-state{color:var(--muted);font-size:10px}.input-row.is-disconnected{opacity:.5}.message-monitor,.pedal-monitor{color:var(--muted);gap:6px;margin-top:12px;font-size:10px;display:grid}.message-monitor strong,.pedal-monitor strong{color:var(--ink);overflow-wrap:anywhere;font-size:11px;font-weight:400}.pedal-monitor div{gap:6px;display:grid}.audio-visual,.audio-note-icon{display:none}.audio-note{color:var(--muted);font-size:10px}.empty-state{color:var(--muted);padding:12px 0;font-size:12px;line-height:1.6}.hardware-boundary-notice h2{margin-bottom:6px;font-size:12px}.hardware-boundary-notice p{color:var(--muted);margin:6px 0;font-size:10px;line-height:1.65}.hardware-boundary-notice .eyebrow{display:none}.hardware-boundary-dismiss{color:var(--accent);background:0 0;border:0;margin:0 12px 12px;padding:0;font-size:11px}.library-actions{flex-wrap:wrap;gap:7px;display:flex}.backup-import{color:var(--muted);gap:7px;font-size:11px;display:grid}.library-list{gap:8px;margin:0;list-style:none;display:grid}.library-list li{border-top:1px solid var(--line);align-items:center;gap:5px;padding-top:8px;display:flex}.library-open{color:var(--ink);text-align:left;background:0 0;border:0;flex:1;gap:5px;display:grid}.library-open small{color:var(--muted);font-size:9px}.baseline-details{border:1px solid var(--line);background:#f9fafb;margin-top:10px}.baseline-content{gap:15px;display:grid}.contract-values{gap:15px;display:flex}.contract-values dt{color:var(--muted);font-size:10px}.contract-values dd{font-family:var(--music-font);margin:5px 0;font-size:18px}.practice-workspace{grid-template-rows:minmax(0,1fr) auto;gap:10px;height:100%;min-height:0;display:grid}.practice-title-row{display:none}.practice-layout{min-width:0;min-height:0;display:flex}.practice-score-card{border:1px solid var(--line);background:#fff;flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.practice-score-card>.section-heading{border-bottom:1px solid #edf0f2;flex:0 0 42px;padding:8px 18px}.practice-score-card h3{font-family:var(--music-font);font-size:15px;font-weight:400}.unit-pill{color:var(--muted);white-space:nowrap;align-items:center;gap:8px;font-size:10px;display:inline-flex}.score-preview{background:#fff;min-width:0;position:relative}.score-canvas{width:100%}.score-canvas svg{display:block}.practice-score-card>.score-preview{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cad0d5 transparent;flex:1;min-height:0;padding:10px 14px;overflow:hidden auto}.practice-score-card>.preview-caption{color:var(--muted);border-top:1px solid #edf0f2;padding:6px 18px;font-size:10px}.preview-message,.preview-error{color:var(--muted);padding:15px;font-size:12px}.preview-error{color:var(--red)}.preview-caption{color:var(--muted);font-size:10px}.score-canvas [data-mpt-note-ids]{cursor:pointer}.score-canvas svg .is-practice-current,.score-canvas svg .is-practice-current *{fill:#126f98!important;stroke:#126f98!important}.practice-focus-layer{pointer-events:none}.practice-focus-layer rect{fill:#eaf3f8;stroke:#83aebf;stroke-width:1px}.score-canvas [data-mpt-note-ids]:focus-visible{outline-offset:4px;outline:2px solid #126f98}.practice-controls{align-items:center;gap:20px;min-height:48px;display:flex}.practice-buttons{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.hint-toggle,.rootless-option{color:var(--muted);align-items:center;gap:5px;font-size:11px;display:inline-flex}.practice-target-card{flex:1;justify-content:flex-end;align-items:center;gap:24px;display:flex}.practice-target-card .eyebrow{letter-spacing:.04em;font-size:9px}.practice-target{font-size:21px;line-height:1.35;display:block}.practice-feedback{color:var(--muted);gap:4px;font-size:10px;display:grid}.practice-feedback strong{font-family:var(--music-font);margin-left:4px;font-size:12px;font-weight:400}.practice-feedback .is-extra{color:var(--red)}.hints-hidden{visibility:hidden}.practice-option{color:var(--muted);gap:5px;font-size:11px;display:grid}.fingering-status{color:var(--muted);margin:0;padding:12px;font-size:11px;line-height:1.6}.fingering-status p{margin:0 0 6px}.fingering-options,.fingering-editor,.fingering-alternative{flex-wrap:wrap;align-items:end;gap:8px;margin-top:8px;display:flex}.fingering-options .practice-option,.fingering-editor .practice-option{flex:100%;width:100%;min-width:0}.fingering-status select{width:100%;min-width:0}.fingering-status .fingering-budget-hint{margin-top:8px;font-size:10px}.fingering-settings{scroll-margin-top:8px}.fingering-editor{border-top:1px solid var(--line);align-items:center;padding-top:8px}.fingering-editor .fingering-reason{overflow-wrap:anywhere;flex:100%}.fingering-alternative{border-top:1px solid var(--line);justify-content:space-between;align-items:center;padding-top:6px}[data-mpt-fingering-note-id]{cursor:pointer}[data-mpt-fingering-note-id]:focus-visible{outline-offset:2px;outline:2px solid #1765ad}.loop-controls{flex-wrap:wrap;align-items:center;gap:8px;padding:0 12px 12px;font-size:11px;display:flex}.text-button,.release-virtual{color:var(--accent);background:0 0;border:0;padding:4px;font-size:11px}.seek-control{align-items:center;gap:6px;font-size:11px;display:flex}.seek-control input{width:56px}.step-list-heading{color:var(--muted);justify-content:space-between;margin:12px 0;font-size:9px;display:flex}.step-list-items{grid-template-columns:1fr 1fr;gap:6px;display:grid}.practice-step{text-align:left;border:1px solid var(--line);background:#fff;gap:5px;min-width:0;padding:8px;display:grid}.practice-step small{color:var(--muted);font-size:9px}.practice-step strong{overflow-wrap:anywhere;font-size:12px}.practice-step.is-current{background:var(--accent-soft);border-color:var(--accent)}.step-list-ellipsis{color:var(--muted)}.sample-select select{width:100%;max-width:140px;font-size:10px}.practice-import-card .section-heading{flex-wrap:wrap;margin-bottom:12px}.practice-import-card .eyebrow{display:none}.musicxml-import,.midi-import{border-bottom:1px solid var(--line);gap:8px;margin-bottom:12px;padding-bottom:12px;display:grid}.musicxml-file-label{gap:8px;font-size:11px;display:grid}.musicxml-file-name{color:var(--muted);overflow-wrap:anywhere;font-size:10px}.musicxml-staff-selection,.midi-track-mapping{border:1px solid var(--line);gap:8px;margin:0;padding:8px;font-size:11px;display:grid}.musicxml-staff-selection label{align-items:center;gap:5px;display:flex}fieldset legend{color:var(--muted);padding:0 4px;font-size:10px}.midi-option,.midi-track-mapping label{color:var(--muted);gap:5px;font-size:10px;display:grid}.midi-preview-options{gap:8px;display:grid}.midi-preview-summary{color:var(--muted);gap:8px;font-size:10px;display:grid}.midi-preview-card .score-preview{max-height:240px;margin:10px 0;overflow:auto}.mpt-editor{resize:vertical;border:1px solid var(--line);color:#4c5964;background:#fff;width:100%;min-height:170px;max-height:420px;padding:10px;font:10px/1.65 Consolas,monospace}.import-actions{gap:8px;margin-top:8px;display:grid}.import-actions>span,.import-progress{color:var(--muted);font-size:10px}.diagnostic-list{color:#806b49;overflow-wrap:anywhere;background:#f1ede6;margin:8px 0;padding:10px 10px 10px 22px;font-size:10px;line-height:1.6}.diagnostic-list.is-error{color:var(--red);background:#f6ecec}.chord-library{grid-template-rows:32px minmax(0,1fr);gap:12px;height:100%;min-height:0;display:grid}.chord-library-heading{justify-content:space-between;align-items:center;display:flex}.chord-library-heading h2{align-items:center;gap:7px;font-size:12px;font-weight:500;display:flex}.chord-workspace{grid-template-columns:minmax(280px,.85fr) minmax(440px,1.15fr);gap:20px;min-height:0;display:grid}.chord-notation{border:1px solid var(--line);scrollbar-width:thin;background:#fff;flex-direction:column;justify-content:center;gap:22px;min-width:0;min-height:0;padding:20px 24px;display:flex;overflow:auto}.chord-staff-panel{min-width:0}.chord-comparison-viewport{overscroll-behavior-x:contain;scrollbar-width:thin;width:100%;overflow-x:auto}.chord-comparison-content{position:relative}.chord-comparison-help{color:var(--muted);margin-top:8px;font-size:9px;line-height:1.5}.is-comparison-score{padding-bottom:38px}.score-canvas .is-chord-hover{opacity:.32}.score-canvas .is-chord-selected,.score-canvas .is-chord-selected *{fill:var(--accent)!important;stroke:var(--accent)!important}.score-column-layer{pointer-events:none;position:absolute;inset:0}.score-column{color:var(--ink);background:0 0;border:0;border-bottom:2px solid #0000;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;padding:4px 6px;display:flex;position:absolute;top:0;bottom:0}button.score-column{pointer-events:auto}.score-column .music-type{font-size:17px}.score-column-label{white-space:nowrap;justify-items:center;gap:3px;display:grid;position:absolute;bottom:4px;transform:translate(-50%)}.score-column-indicator{color:var(--muted);letter-spacing:1px;font-size:8px}.score-column.is-selected{color:var(--accent)}.score-column.is-selected .score-column-label:after{content:"";background:var(--accent);width:56px;height:2px;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)}.score-column.is-hover{opacity:.4}.score-column:hover,.score-column:focus-visible{background:#465f750d}.staff-panel-heading{justify-content:space-between;align-items:center;gap:15px;min-height:28px;padding:0 10px;display:flex}.staff-panel-heading .music-type{font-size:20px}.staff-panel-heading>.eyebrow{align-items:center;gap:5px;display:flex}.chord-staff-panel+.chord-staff-panel{border-top:1px solid var(--line);padding-top:18px}.chord-inspector{grid-template-rows:auto minmax(0,1fr);gap:12px;min-width:0;min-height:0;display:grid}.chord-live-card{min-width:0}.chord-live-heading{justify-content:space-between;align-items:center;gap:10px;padding-bottom:6px;display:flex}.chord-live-heading h3{align-items:center;gap:6px;font-size:11px;display:flex}.chord-live-heading>strong{font-size:15px}.chord-live-card>.card-description{margin:8px 0}.chord-candidate-list{scrollbar-width:thin;max-height:104px;margin:0 0 7px;padding:0;list-style:none;overflow:auto}.chord-candidate-list li{border-bottom:1px solid var(--line);align-items:center;gap:10px;padding:5px 0;display:flex}.candidate-rank{color:var(--muted);width:12px;font-size:9px}.chord-candidate-list li>div{flex:1;align-items:baseline;gap:12px;min-width:0;display:flex}.chord-candidate-list strong{font-family:var(--music-font);min-width:50px;font-size:19px;font-weight:400}.chord-candidate-list li>div>span{color:var(--muted);font-size:10px}.chord-candidate-list li>small{color:var(--muted);font-size:9px}.chord-interval-readout{font-family:var(--music-font);color:var(--muted);margin:8px 0;font-size:12px}.rootless-option{font-size:10px}.chord-browser-layout{border-top:1px solid var(--line);grid-template-columns:minmax(160px,.7fr) minmax(220px,1fr);gap:14px;min-width:0;min-height:0;padding-top:12px;display:grid}.chord-browser-card{flex-direction:column;min-width:0;min-height:0;display:flex}.chord-browser-filters{grid-template-columns:58px minmax(0,1fr);gap:8px;padding-bottom:10px;display:grid}.chord-browser-filters label,.chord-voicing-controls label{color:var(--muted);gap:5px;min-width:0;font-size:10px;display:grid}.chord-browser-filters .chord-search{grid-column:1/-1}.chord-browser-filters select,.chord-browser-filters input,.chord-voicing-controls select{width:100%;font-size:11px}.chord-pattern-list{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cad0d5 transparent;flex:1;min-height:0;overflow-y:auto}.chord-pattern-option{text-align:left;border:0;border-bottom:1px solid var(--line);width:100%;color:var(--ink);background:0 0;align-items:center;gap:8px;padding:10px;display:flex}.chord-pattern-option>span{flex:1;gap:3px;display:grid}.chord-pattern-option strong{font-size:18px;font-weight:400}.chord-pattern-option small{color:var(--muted);font-size:10px}.chord-pattern-option>small{max-width:60px;font-size:9px}.chord-pattern-option.is-selected{background:var(--accent-soft);box-shadow:inset 2px 0 var(--accent)}.chord-pattern-option:hover{background:#e9edf0}.chord-detail-card{scrollbar-width:thin;border-left:1px solid var(--line);min-width:0;min-height:0;padding-left:14px;overflow-y:auto}.chord-detail-title{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.chord-detail-title h3{flex-wrap:wrap;align-items:baseline;gap:8px;display:flex}.chord-detail-title .music-type{font-size:28px}.chord-type-name{color:var(--muted);font-size:11px;font-weight:400}.chord-voicing-controls{grid-template-columns:1fr 1fr;gap:8px;display:grid}.chord-voicing-controls>:last-child{grid-column:1/-1}.voicing-picker{color:var(--muted);gap:5px;min-width:0;font-size:10px;display:grid}.voicing-picker>button{border:1px solid var(--line);width:100%;min-height:32px;color:var(--ink);text-align:left;background:#fff;justify-content:space-between;align-items:center;gap:6px;padding:5px 8px;font-size:11px;display:flex}.voicing-picker-popup{z-index:30;scrollbar-width:thin;background:#fff;border:1px solid #c6cfd6;padding:4px;position:fixed;overflow-y:auto;box-shadow:0 6px 18px #272d331f}.voicing-picker-popup button{text-align:left;width:100%;color:var(--ink);background:0 0;border:0;padding:7px 8px;font-size:11px;display:block}.voicing-picker-popup button:hover,.voicing-picker-popup button:focus,.voicing-picker-popup button[aria-selected=true]{background:var(--accent-soft);outline-offset:-2px}.chord-detail-actions .is-pinned{background:var(--accent-soft);color:var(--accent);border-color:#b4c2cd}.chord-omit-options{border:0;flex-wrap:wrap;gap:6px;margin:12px 0;padding:0;display:flex}.chord-omit-options label{color:var(--muted);align-items:center;gap:4px;font-size:10px;display:inline-flex}.chord-theory-grid{gap:9px;margin:14px 0;display:grid}.chord-theory-grid>div{min-width:0}.chord-theory-grid dt{color:var(--muted);margin-bottom:4px;font-size:9px}.chord-theory-grid dd{overflow-wrap:anywhere;margin:0;font-size:13px}.chord-resolved-notes{border-top:1px solid var(--line);gap:6px;margin:14px 0;padding-top:12px;display:grid}.chord-resolved-notes>span{color:var(--muted);font-size:9px}.chord-resolved-notes strong{font-size:16px}.chord-detail-actions{flex-wrap:wrap;gap:6px;display:flex}.chord-detail-actions .button{padding:6px 9px;font-size:11px}.chord-resolution-error{color:var(--red);margin:12px 0;font-size:11px}.chord-added-notice{color:var(--accent);margin-top:10px;font-size:11px}.chord-ambiguity-note{color:var(--muted);font-size:10px;line-height:1.6}.keyboard-card{border-top:1px solid var(--line);background:#f2f3f4;grid-template-rows:23px auto;grid-template-columns:auto 1fr;gap:4px 20px;min-width:0;padding-top:9px;display:grid}.keyboard-heading{grid-row:1;align-items:center;gap:15px;display:flex}.keyboard-heading h2{font-size:10px;font-weight:500}.keyboard-heading .eyebrow,.keyboard-range,.keyboard-help{display:none}.keyboard-legend{min-width:0;color:var(--muted);grid-row:1;justify-content:flex-end;align-items:center;gap:15px;font-size:9px;display:flex}.keyboard-legend>span{white-space:nowrap;align-items:center;gap:5px;display:inline-flex}.legend-swatch{border:1px solid #9ea9b3;width:7px;height:7px;display:inline-block}.legend-swatch.is-down{background:var(--accent);border-color:var(--accent)}.legend-swatch.is-target{background:var(--accent-soft);border-color:#728ca2}.legend-swatch.is-target-satisfied{background:#70897e;border-color:#70897e}.legend-swatch.is-sustained{background:#cbd1d6}.legend-swatch.is-extra{background:#c8a2a2;border-color:#a97272}.release-virtual{color:var(--muted);font-size:9px}.keyboard-note-summary{display:none}.keyboard-scroll{grid-column:1/-1;width:100%;overflow:hidden}.piano-keys{touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #aab2b9;width:100%;height:clamp(88px,16vh,152px);position:relative;overflow:hidden}.piano-key{touch-action:none;-webkit-user-select:none;user-select:none;border-radius:0;justify-content:center;align-items:flex-end;padding:0;display:flex;position:absolute}.white-key{z-index:1;color:#8b9299;background:#fcfcfc;border:0;border-right:1px solid #bfc6cc;top:0;bottom:0}.white-key span{font-family:var(--music-font);pointer-events:none;padding-bottom:7px;font-size:8px}.black-key{z-index:2;background:#30373d;border:1px solid #242b31;border-top:0;height:62%;top:0;transform:translate(-50%)}.white-key.is-target{background:#e2eaf1;box-shadow:inset 0 -5px #839bb0}.black-key.is-target{background:#60798f;box-shadow:inset 0 -4px #a6b8c7}.white-key.is-sustained{background:#dce1e5;box-shadow:inset 0 -4px #b1bac2}.black-key.is-sustained{background:#78838d}.white-key.is-down{background:var(--accent);color:#fff;box-shadow:inset 0 -4px #334c60}.black-key.is-down{background:#465f75;border-color:#94aabd;box-shadow:inset 0 -4px #b1c1ce}.white-key.is-target-satisfied{color:#fff;background:#718b7f;box-shadow:inset 0 -4px #4e685c}.black-key.is-target-satisfied{background:#597469;box-shadow:inset 0 -4px #afc4b9}.white-key.is-extra{color:#fff;background:#b78383}.black-key.is-extra{background:#945e5e}.piano-key:focus-visible{z-index:3;outline-offset:-3px;outline-color:#91aabe}.storage-status{color:var(--muted);pointer-events:none;font-size:9px;line-height:16px;position:absolute;bottom:4px;left:24px}.page-footer{color:#9199a0;justify-content:flex-end;align-items:center;gap:12px;font-size:9px;display:flex}.page-footer a{color:var(--muted);text-decoration:none}.page-footer>span,.feedback-row:empty{display:none}.feedback-row{z-index:8;pointer-events:none;max-width:380px;position:absolute;bottom:200px;right:30px}.feedback-message{background:#f4f7f9;border:1px solid #cbd6df;margin-top:6px;padding:10px;font-size:11px;line-height:1.5}.feedback-message.is-error{color:var(--red)}.feedback-message.is-warning{color:#826c4e}.feedback-notice{opacity:1;transition:opacity .16s ease, transform .18s var(--motion-ease);align-items:flex-start;gap:12px;display:flex;transform:translateY(0)}.feedback-dismiss{pointer-events:auto;color:var(--muted);background:0 0;border:0;flex:none;padding:0 3px;font-size:16px;line-height:1}@keyframes feedback-appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.feedback-notice{animation:none}}.help-tip{vertical-align:middle;letter-spacing:0;font-family:Segoe UI,Microsoft YaHei,sans-serif;font-weight:400;display:inline-flex;position:relative}.help-trigger{color:#7c8893;background:0 0;border:1px solid #9aa4ad;border-radius:50%;place-items:center;width:15px;height:15px;padding:0;font-size:10px;line-height:1;display:grid}.help-content{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .16s ease, transform .18s var(--motion-ease), visibility .18s;z-index:30;color:#52616d;text-align:left;white-space:normal;background:#fafcfd;border:1px solid #bdc8d1;width:min(330px,100vw - 48px);padding:14px 16px;font-size:11px;line-height:1.8;position:fixed;transform:translateY(4px);box-shadow:0 4px 16px #24344212}.help-tip:hover .help-content,.help-tip:focus-within .help-content{visibility:visible;opacity:1;transition-delay:0s;transform:translateY(0)}@media (width<=1100px){.app-shell{padding:0 16px}.topbar{gap:9px}.top-audio-status{display:none}.mode-switch{margin-left:0}.chord-workspace{grid-template-columns:minmax(220px,.7fr) minmax(390px,1fr);gap:14px}.chord-notation{gap:12px;padding:12px}.is-sidebar-open .workspace-body{grid-template-columns:270px minmax(0,1fr);gap:12px}.keyboard-legend{gap:10px}.storage-status{left:16px}}@media (width<=800px){.app-shell{grid-template-rows:50px minmax(0,1fr) auto 22px;padding:0 12px}.brand>span:last-child,.volume-control,.keyboard-heading{display:none}.topbar{gap:6px}.mode-switch{gap:0;height:50px}.mode-switch button{padding:0 9px;font-size:11px}.topbar .button{padding:6px 8px;font-size:10px}.workspace-body{padding-top:10px}.is-sidebar-open .workspace-body{grid-template-columns:220px minmax(0,1fr);gap:10px}.keyboard-legend{grid-column:1/-1;justify-content:space-between;gap:6px}.chord-workspace{grid-template-columns:minmax(160px,.65fr) minmax(300px,1fr);gap:10px}.chord-notation{padding:6px}.staff-panel-heading{flex-wrap:wrap;gap:4px;padding:0 4px}.staff-panel-heading .music-type{font-size:15px}.chord-browser-layout{grid-template-rows:minmax(110px,.7fr) minmax(0,1fr);grid-template-columns:1fr;gap:8px}.chord-browser-card{grid-template-columns:110px minmax(0,1fr);gap:10px;display:grid}.chord-browser-filters{align-content:start}.chord-pattern-option{padding:6px}.chord-pattern-option>small{display:none}.chord-detail-card{border-left:0;border-top:1px solid var(--line);padding:8px 0 0}.chord-detail-title{margin-bottom:8px}.chord-detail-title .music-type{font-size:22px}.chord-voicing-controls{grid-template-columns:1fr 1fr 1fr}.chord-voicing-controls label:last-child{grid-column:auto}.chord-theory-grid{gap:6px;margin:8px 0}.chord-resolved-notes{margin:8px 0;padding-top:8px}.chord-candidate-list{max-height:68px}.practice-controls,.practice-target-card{gap:10px}.practice-target{font-size:17px}.practice-feedback{display:none}.storage-status{left:12px}}@media (width<=540px){.app-shell{padding:0 8px}.brand{display:none}.topbar .button-panic{padding:6px}.keyboard-legend{gap:4px;font-size:8px}.keyboard-legend>span:nth-child(3){display:none}.release-virtual{font-size:8px}.chord-workspace{grid-template-rows:minmax(230px,.6fr) minmax(0,1fr);grid-template-columns:1fr}.chord-notation{flex-direction:row;align-items:flex-start;gap:4px;padding:4px;overflow:hidden}.chord-staff-panel{width:50%}.chord-staff-panel+.chord-staff-panel{border-top:0;border-left:1px solid var(--line);padding-top:0}.chord-inspector{grid-template-rows:auto minmax(0,1fr);gap:5px}.chord-live-heading>strong{font-size:12px}.chord-browser-layout{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(130px,.85fr) minmax(160px,1fr);padding-top:6px}.chord-browser-card{display:flex}.chord-browser-filters{gap:4px;padding-bottom:4px}.chord-detail-card{border-left:1px solid var(--line);border-top:0;padding-left:8px}.chord-detail-title .music-type{font-size:20px}.chord-type-name{font-size:10px}.chord-voicing-controls{grid-template-columns:1fr 1fr}.chord-voicing-controls label:last-child{grid-column:1/-1}.chord-candidate-list{max-height:45px}.chord-candidate-list li>small{display:none}.practice-controls{flex-wrap:wrap;gap:5px}.practice-target-card{flex:1}.practice-buttons{gap:5px}.practice-buttons .button{padding:5px 8px;font-size:10px}.hint-toggle{font-size:9px}.practice-target{font-size:14px}.practice-score-card>.section-heading{padding:8px}.practice-score-card .unit-pill{white-space:normal;font-size:8px}.practice-score-card>.score-preview{padding:4px}}@media (height<=650px){.workspace-body{padding-top:8px;padding-bottom:6px}.chord-notation{gap:5px;padding-top:6px;padding-bottom:6px}.chord-staff-panel+.chord-staff-panel{padding-top:5px}.chord-candidate-list{max-height:45px}.piano-keys{height:85px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.workspace-stage{container-type:inline-size}@container (width<=850px){.chord-workspace{grid-template-columns:minmax(200px,.7fr) minmax(310px,1fr);gap:12px}.chord-browser-layout{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(130px,.7fr) minmax(170px,1fr);gap:8px}.chord-browser-card{display:flex}.chord-browser-filters{align-content:start}.chord-detail-card{border-left:1px solid var(--line);border-top:0;padding:0 0 0 8px}.chord-voicing-controls{grid-template-columns:1fr 1fr}.chord-voicing-controls label:last-child{grid-column:1/-1}.chord-resolved-notes{margin:8px 0;padding-top:8px}.chord-theory-grid{margin:8px 0}}@container (width<=560px){.chord-workspace{grid-template-rows:minmax(230px,.6fr) minmax(0,1fr);grid-template-columns:minmax(0,1fr);gap:8px}.chord-notation{flex-direction:row;align-items:flex-start;gap:4px;padding:4px}.chord-staff-panel{width:50%}.chord-staff-panel+.chord-staff-panel{border-top:0;border-left:1px solid var(--line);padding-top:0}.chord-browser-layout{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(110px,.8fr) minmax(150px,1fr);padding-top:6px}.chord-browser-card{display:flex}.chord-detail-card{border-top:0;border-left:1px solid var(--line);padding:0 0 0 8px}.chord-voicing-controls{grid-template-columns:1fr 1fr}.chord-voicing-controls label:last-child{grid-column:1/-1}.chord-candidate-list{max-height:44px}}@media (width<=620px){.workspace-sidebar{z-index:12;background:#f2f3f4;border:1px solid #bdc8d1;width:min(310px,100vw - 24px);padding:14px;position:absolute;top:60px;bottom:calc(16vh + 62px);left:12px}[data-workspace-mode=practice] .workspace-sidebar{bottom:calc(100% - var(--practice-controls-top,65vh) + 8px)}.workspace-body,.is-sidebar-open .workspace-body{grid-template-columns:0 minmax(0,1fr);gap:0}}.hand-switch{border:1px solid var(--line);align-items:stretch;gap:2px;padding:2px;display:inline-flex}.hand-switch button{color:var(--muted);background:0 0;border:0;padding:4px 9px;font-size:11px;transition:color .14s,background-color .14s}.hand-switch button[aria-pressed=true]{color:var(--accent);background:var(--accent-soft)}.voice-hand-assignments{padding:0 12px 12px}.voice-hand-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:9px;font-size:11px;display:grid}.voice-hand-row small{color:var(--muted);margin-top:3px;font-size:9px;line-height:1.6;display:block}.voice-hand-row select{max-width:110px;font-size:10px}.soundfont-select{gap:6px;display:grid}.piano-load-status{color:var(--muted);font-size:10px;line-height:1.6}.voicing-picker-popup{opacity:1;transition:opacity .16s ease, transform .18s var(--motion-ease);transform:translateY(0)}.voicing-picker-popup[data-motion=closed],.feedback-notice[data-motion=closed]{opacity:0;pointer-events:none;transform:translateY(4px)}@starting-style{.voicing-picker-popup[data-motion=open],.feedback-notice[data-motion=open]{opacity:0;transform:translateY(4px)}}@supports selector(details::details-content){.workspace-disclosure,.baseline-details{interpolate-size:allow-keywords}.workspace-disclosure::details-content{opacity:0;block-size:0;transition:block-size .24s var(--motion-ease), opacity .18s ease, content-visibility .24s allow-discrete;overflow:clip}.baseline-details::details-content{opacity:0;block-size:0;transition:block-size .24s var(--motion-ease), opacity .18s ease, content-visibility .24s allow-discrete;overflow:clip}.workspace-disclosure[open]::details-content{opacity:1;block-size:auto}.baseline-details[open]::details-content{opacity:1;block-size:auto}}@supports (appearance:base-select){select{appearance:base-select}select::picker(select){appearance:base-select}select::picker(select){color:var(--ink);opacity:0;transition:opacity .16s ease, transform .18s var(--motion-ease), display .18s allow-discrete, overlay .18s allow-discrete;background:#fff;border:1px solid #c6cfd6;padding:4px;transform:translateY(-4px);box-shadow:0 6px 18px #272d331a}select:open::picker(select){opacity:1;transform:translateY(0)}select option{padding:7px 9px;font-size:11px}select option:checked,select option:hover{background:var(--accent-soft)}select::picker-icon{transition:rotate .18s var(--motion-ease)}select:open::picker-icon{rotate:180deg}@starting-style{select:open::picker(select){opacity:0;transform:translateY(-4px)}}}@media (width<=540px){.hand-switch button{padding:3px 6px;font-size:10px}}@media (prefers-reduced-motion:reduce){.workspace-disclosure::details-content{transition:none!important}.baseline-details::details-content{transition:none!important}select::picker(select){transition:none!important}select::picker-icon{transition:none!important}}