:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#eef1f4;--panel:#fff;--panel-2:#f7f8fa;--ink:#17202a;--muted:#667085;--line:#d5dbe3;--line-strong:#aeb8c6;--accent:#0f766e;--accent-2:#be123c;--gold:#b45309;--blue:#2563eb;--shadow:0 18px 38px #141f2c1f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:linear-gradient(180deg, #ffffffb8, transparent 280px), var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;padding:18px}.topbar{color:#fff;background:#111827;justify-content:space-between;align-items:center;min-height:78px;padding:14px 18px;display:flex}.topbar h1,.panel h2,.score-panel h2,.manual-strip h3{margin:0}.topbar h1{font-size:1.65rem;font-weight:760;line-height:1}.eyebrow{color:#9ed7d1;letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;font-size:.74rem;font-weight:700}.transport{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.workspace-grid{grid-template-columns:minmax(280px,340px) minmax(420px,1fr) minmax(270px,330px);gap:14px;margin-top:14px;display:grid}.panel,.score-panel{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);min-width:0;padding:16px}.panel-header,.score-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.panel h2,.score-panel h2{font-size:1rem;font-weight:780}.panel-section{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}.section-title{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.section-title h3{text-transform:uppercase;margin:0;font-size:.84rem}.field,.compact-field{gap:6px;margin-bottom:12px;display:grid}.field span,.compact-field span,.switch-row span{color:var(--muted);font-size:.78rem;font-weight:700}.compact-field{align-items:center;gap:8px;margin:0;display:flex}.compact-field input{width:74px}.compact-field select{max-width:210px;min-height:38px}.sample-field{min-width:190px}.sample-load-progress{color:var(--muted);align-items:center;gap:4px;min-width:150px;font-size:.78rem;font-weight:700;display:grid}.sample-load-progress[hidden]{display:none}.sample-load-progress progress{accent-color:var(--accent);width:150px;height:8px}.language-field{min-width:145px}select,textarea,input[type=number]{border:1px solid var(--line-strong);color:var(--ink);background:#fff;outline:none;min-height:38px;padding:8px 10px}select:focus,textarea:focus,input[type=number]:focus{border-color:var(--accent);box-shadow:0 0 0 3px #0f766e29}textarea{resize:vertical;line-height:1.45}.icon-button,.text-button{border:1px solid var(--line-strong);color:var(--ink);background:#fff;justify-content:center;align-items:center;min-height:38px;font-weight:760;transition:transform .12s,border-color .12s,background .12s;display:inline-flex}.icon-button{min-width:38px;padding:0 10px}.text-button{padding:0 13px}.icon-button:hover,.text-button:hover{border-color:var(--accent);background:#f7fbfb}.icon-button:active,.text-button:active,.rn-pad button:active,.solution-card:active{transform:translateY(1px)}.primary,.accent{background:var(--accent);border-color:var(--accent);color:#fff}.primary:hover,.accent:hover{color:#fff;background:#0b615b}.segmented{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:12px;display:grid}.segmented button{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);white-space:nowrap;min-height:34px;padding:6px 7px}.segmented button.selected{border-color:var(--accent);color:#0b615b;background:#e7f5f3}.rn-pad{background:#23303d;border:1px solid #18232d;padding:10px}.rn-row{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;display:grid}.rn-row+.rn-row{margin-top:6px}.rn-row:last-child{grid-template-columns:repeat(7,minmax(0,1fr))}.rn-pad button{color:#17202a;background:#fff;border:1px solid #c9d3dd;min-width:0;min-height:32px;padding:4px 3px;font-weight:760}.rn-pad button.rn-roman-key.is-diatonic{color:#17202a;background:#fff;border-color:#c9d3dd}.rn-pad button.rn-roman-key.is-chromatic{color:#526170;background:#d7dde4;border-color:#aeb9c5}.rn-pad button:hover{background:#fff7df}.rn-pad button.rn-roman-key.is-chromatic:hover{background:#e3e8ee}.syntax-indicator{--syntax-green:#15803d;--syntax-yellowgreen:#65a30d;--syntax-yellow:#ca8a04;--syntax-orange:#ea580c;--syntax-red:#dc2626}.syntax-status{margin-bottom:10px}.syntax-error{color:#b42318}.syntax-list{gap:8px;max-height:330px;padding-right:2px;display:grid;overflow:auto}.syntax-suggestion{border:1px solid var(--line);border-left:6px solid var(--syntax-color,var(--line-strong));color:var(--ink);text-align:left;background:#fff;gap:6px;width:100%;padding:10px;display:grid}.syntax-suggestion:hover{border-color:var(--syntax-color,var(--accent));background:#fbfdfc}.syntax-suggestion-top,.syntax-suggestion-meta{justify-content:space-between;align-items:center;gap:8px;min-width:0;display:flex}.syntax-suggestion-top strong{overflow-wrap:anywhere;font-size:.92rem}.syntax-score{color:#344054;text-transform:uppercase;background:#f3f4f6;flex:none;padding:3px 7px;font-size:.72rem;font-weight:850}.syntax-suggestion-meta,.syntax-suggestion-reason{color:var(--muted);font-size:.74rem;font-weight:700}.syntax-suggestion-meta{flex-wrap:wrap}.syntax-suggestion-reason{line-height:1.35}.syntax-level-green{--syntax-color:var(--syntax-green)}.syntax-level-yellowgreen{--syntax-color:var(--syntax-yellowgreen)}.syntax-level-yellow{--syntax-color:var(--syntax-yellow)}.syntax-level-orange{--syntax-color:var(--syntax-orange)}.syntax-level-red{--syntax-color:var(--syntax-red)}.switch-row{align-items:center;gap:10px;min-height:32px;display:flex}.switch-row input{accent-color:var(--accent);width:18px;height:18px}.score-panel{flex-direction:column;min-height:720px;display:flex}.score-actions{gap:8px;display:flex}.muted{color:var(--muted);margin:4px 0 0;font-size:.82rem}.status-banner{margin-bottom:12px;padding:10px 12px;display:none}.status-banner.show{display:block}.status-banner.warn{background:#fff8df;border:1px solid #e7c15d}.status-banner.error{background:#fff0f0;border:1px solid #ef9a9a}.status-banner.ok{background:#e8f7ef;border:1px solid #84c9a4}.score-output{border:1px solid var(--line);background:#f9fafb;flex:1;justify-content:center;align-items:center;min-height:300px;padding:12px;display:flex;overflow-x:auto}.empty-state{color:var(--muted);font-weight:700}.score-svg{min-width:min(760px,100%);max-width:100%;height:auto;display:block}.keyboard-section{border:1px solid var(--line);background:#f6f8fb;margin-top:12px;padding:12px}.keyboard-strip{background:0 0;border:0;margin:0 0 10px;padding:0}.keyboard-body{align-items:stretch;gap:12px;min-width:0;display:flex}.keyboard-chord-indicator{border:1px solid var(--line);color:var(--muted);background:#fffefa;flex-direction:column;flex:0 0 128px;justify-content:center;align-items:flex-start;gap:4px;min-height:123px;padding:14px;font-size:.82rem;font-weight:700;display:flex}.keyboard-chord-index{color:var(--muted);text-transform:uppercase;font-size:.78rem;font-weight:800}.keyboard-chord-main{color:var(--ink);overflow-wrap:anywhere;font-size:1.7rem;font-weight:850;line-height:1.05}.keyboard-chord-sub{color:var(--muted);overflow-wrap:anywhere;font-size:1rem;font-weight:800}.keyboard-output{background:0 0;border:0;flex:auto;min-height:149px;margin-top:0;padding:0;overflow-x:auto}.keyboard-svg{width:1144px;min-width:1144px;height:auto;margin:0 auto;display:block}.keyboard-surface{fill:#f6f8fb}.keyboard-legend{color:var(--muted)}.keyboard-legend-chip{color:var(--muted);align-items:center;gap:6px;min-height:26px;font-size:.78rem;font-weight:700;display:inline-flex}.keyboard-voice-dot{color:#fff;border-radius:999px;justify-content:center;align-items:center;width:22px;height:22px;font-size:.78rem;font-weight:800;display:inline-flex}.keyboard-voice-dot.soprano{background:#be123c}.keyboard-voice-dot.alto{background:#b45309}.keyboard-voice-dot.tenor{background:#0f766e}.keyboard-voice-dot.bass{background:#2563eb}.keyboard-white-key{fill:#fffefa;stroke:#9aa4b2;stroke-width:1px}.keyboard-black-key{fill:#111827;stroke:#111827;stroke-width:1px}.keyboard-octave{fill:#667085;font-size:12px;font-weight:700}.keyboard-marker circle{stroke:#fff;stroke-width:2px}.keyboard-marker text{fill:#fff;pointer-events:none;text-anchor:middle;font-size:12px;font-weight:900}.keyboard-empty{align-items:center;min-height:123px;display:flex}.score-paper{fill:#fffefa}.staff-line,.ledger,.barline{stroke:#17202a;stroke-width:1.2px}.barline.faint{opacity:.18}.clef-label{fill:#475467;font-size:28px;font-weight:800}.roman-label{fill:#17202a;font-size:16px;font-weight:780}.lead-label{fill:#667085;font-size:11px;font-weight:700}.function-badge{opacity:.95;stroke-width:1px}.function-badge.function-t{fill:#e7f5f3;stroke:#8fc9c2}.function-badge.function-s{fill:#fff4e6;stroke:#e7b566}.function-badge.function-d{fill:#feecef;stroke:#e8a4af}.function-label{fill:#17202a;text-anchor:middle;font-size:13px;font-weight:900}.note-head{stroke:#111827;stroke-width:1px}.note-head.is-playing{filter:drop-shadow(0 0 6px #be123c73);stroke-width:2px}.active-chord .function-badge{stroke:var(--accent-2);stroke-width:1.6px}.stem{stroke:#111827;stroke-width:1.5px}.voice-tag,.accidental{font-size:12px;font-weight:800}.active-chord .roman-label{fill:var(--accent-2)}.manual-strip{border:1px solid var(--line);background:#f6f8fb;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding:12px;display:flex}.manual-controls{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.manual-controls select{max-width:220px}.manual-output{margin-top:12px}.manual-card{border:1px solid var(--line);grid-template-columns:minmax(0,1fr);gap:12px;padding:10px;display:grid}.manual-score{overflow-x:auto}.manual-reports{gap:6px;margin:0;padding:0;list-style:none;display:grid}.manual-report{background:#eef8f1;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;display:flex}.manual-report.has-issues{background:#fff4e6}.count-pill,.issue-pill{color:#0b615b;background:#e7f5f3;padding:4px 8px;font-size:.78rem;font-weight:800;display:inline-flex}.voice-mix{background:var(--panel-2);border:1px solid var(--line);gap:8px;margin-bottom:12px;padding:10px;display:grid}.voice-mix label{grid-template-columns:22px minmax(0,1fr);align-items:center;gap:8px;display:grid}.voice-mix span{color:var(--muted);font-size:.78rem;font-weight:800}.voice-mix input{accent-color:var(--blue);min-width:0}.solution-list{gap:8px;max-height:600px;padding-right:2px;display:grid;overflow:auto}.solution-browser{gap:12px;display:grid}.solution-browser-column{min-width:0}.solution-browser-title{color:var(--muted);text-transform:uppercase;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.78rem;font-weight:850;display:flex}.opening-list{max-height:220px}.setting-list{max-height:420px}.opening-card,.setting-card,.solution-card{border:1px solid var(--line);color:var(--ink);text-align:left;background:#fff;gap:7px;width:100%;padding:10px;display:grid}.opening-card:hover,.setting-card:hover,.solution-card:hover{border-color:var(--accent)}.opening-card.selected,.setting-card.selected,.solution-card.selected{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);background:#f0fbfa}.solution-card-top,.opening-card-top,.motion-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.solution-card-top span,.opening-card-top span,.opening-card-sub,.motion-row span,.solution-card-notes{color:var(--muted);font-size:.76rem;font-weight:700}.solution-card-notes{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.motion-explain{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.motion-explain>span{border:1px solid var(--line);background:#f6f8fb;gap:2px;min-height:46px;padding:7px;display:grid}.motion-explain strong{color:var(--ink);font-size:.95rem;line-height:1}.motion-explain span span{color:var(--muted);font-size:.72rem;font-weight:760;line-height:1.15}@media (width<=1180px){.workspace-grid{grid-template-columns:minmax(280px,340px) minmax(420px,1fr)}.solutions-panel{grid-column:1/-1}.solution-list{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));max-height:none}.solution-browser{grid-template-columns:minmax(230px,.8fr) minmax(320px,1.2fr)}.opening-list,.setting-list{grid-template-columns:minmax(0,1fr);max-height:520px}}@media (width<=760px){.app-shell{padding:10px}.topbar,.manual-strip{flex-direction:column;align-items:stretch}.transport,.manual-controls{justify-content:flex-start}.workspace-grid{grid-template-columns:minmax(0,1fr)}.score-panel{min-height:560px}.segmented{grid-template-columns:minmax(0,1fr)}.rn-row,.rn-row:last-child{grid-template-columns:repeat(4,minmax(0,1fr))}.solution-browser{grid-template-columns:minmax(0,1fr)}.opening-list{max-height:260px}}