:root{--paper:#faf8f2;--ink:#202a33;--muted:#56656d;--line:#d7d9d5;--accent:#246c71;--wash:#e4efed}
*{box-sizing:border-box}html,body{margin:0;background:transparent;color:var(--ink)}body{font:17px/1.45 "Gill Sans","Gill Sans MT",Calibri,"Segoe UI",sans-serif}main{padding:4px;max-width:720px;margin:auto}.major-panel{position:relative;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.music-row{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0}.tonic-control{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 86px}.signature{font-size:13px;text-align:center;line-height:1.2;color:var(--muted);max-width:86px}
select,button,summary{font:inherit}button,select{min-height:40px;border:1px solid #afbcbe;border-radius:7px;color:var(--ink);background:#fff;padding:6px 13px;cursor:pointer}select{max-width:100%}button:hover,select:hover{border-color:var(--accent)}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.score-scroll{overflow-x:auto;min-width:0;max-width:100%;scrollbar-width:thin}#staff-maj{width:390px;height:210px;margin:auto;color:var(--ink)}#staff-maj svg{display:block;overflow:visible}.music-glyph{font-family:Bravura;font-size:48px;fill:currentColor}.staff-line,.ledger{fill:none;stroke:currentColor;stroke-width:1}
.degree,.pitch-label,.key-indicator{font-size:14px;fill:currentColor}.degree-caret{font-size:13px;fill:currentColor}.degree{font-weight:500}.step-label{font-size:13px;fill:var(--muted)}.scale-staff-note{cursor:pointer}.scale-staff-note:focus{outline:none}.scale-staff-note:focus-visible .pitch-label{stroke:var(--accent);stroke-width:.4px;text-decoration:underline}.scale-staff-note.selected .pitch-label{font-weight:700}.scale-staff-note.sounding .notehead{fill:var(--accent)}.scale-staff-note.sounding .pitch-label{text-decoration:underline;font-weight:700;text-underline-offset:4px}
.note-hit{pointer-events:all}.pitch-label,.degree,.degree-caret,.notehead,.accidental,.ledger{pointer-events:none}.toolbar{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;flex-wrap:wrap}.toolbar .play{background:#21495c;border-color:#21495c;color:#fff;min-width:74px}.play-dropdown{display:flex;align-items:center}.help-toggle{background:transparent;border-color:transparent;font-size:15px;padding:6px 8px}.status{font-size:13px;color:var(--muted);line-height:1.2}.status:empty{display:none}.selection{color:var(--muted);font-size:14px;margin:0}
details{margin:10px 0 0}summary{font-size:15px;cursor:pointer;color:var(--muted);width:max-content;padding:4px 0}details[open]>summary{color:var(--ink)}.piano-scroll{overflow-x:auto;max-width:100%;margin:8px 0;scrollbar-width:thin}.piano-keys{position:relative;width:600px;height:122px}
.piano-key{position:absolute;top:0;padding:0 0 5px;min-height:0;border:1px solid #aaa99e;border-radius:0 0 4px 4px;display:flex;align-items:end;justify-content:center;font-size:12px;font-weight:400}.piano-key.white{height:116px;background:#fffef9;color:#27313a;z-index:1}.piano-key.black{height:72px;z-index:2;background:#282a2b;color:white;border-color:#282a2b}.piano-key.white.member{background:#e2efeb}.piano-key.black.member{background:#376967}.piano-key.selected{box-shadow:inset 0 -4px 0 #a26b26}.piano-key.sounding{background:#f0bd62!important}.piano-key:focus-visible{outline:3px solid #9f6026;outline-offset:-3px}
.piano-footer{display:flex;justify-content:space-between;align-items:center;gap:10px}.piano-footer span{font-size:13px;color:var(--muted)}.piano-footer button{font-size:14px;min-height:36px;padding:4px 9px}.text-version p{font-size:14px;white-space:pre-line;margin:8px 0}
.help-panel{position:absolute;z-index:5;left:16px;right:16px;top:24px;padding:16px 20px;background:#fffef9;border:1px solid #8ba6a6;border-radius:10px;box-shadow:0 8px 24px #17393e22;font-size:15px}.help-panel[hidden]{display:none}.help-panel h2{font-size:18px;margin:0 40px 8px 0}.help-panel p{margin:8px 0}.help-close{position:absolute;top:6px;right:8px;min-height:32px;padding:2px 9px;background:transparent;border-color:transparent}
@media(max-width:520px){.major-panel{padding:12px}.music-row{display:block}.tonic-control{flex-direction:row;justify-content:center;width:auto;max-width:none;margin-bottom:4px}.signature{max-width:160px;text-align:left}#staff-maj{margin:0 auto}.toolbar{margin-top:4px}.help-panel{left:8px;right:8px;top:12px;padding:16px}.piano-footer{align-items:start}.piano-footer span{max-width:145px}}
.help-panel{position:relative;inset:auto;margin-top:12px}
.scale-staff-note:focus-visible .note-hit{stroke:var(--accent);stroke-width:2;rx:5}
.piano-key.white.member{background:#c6ddd5}.piano-key.black.member{background:#30615c}
.piano-key.member::before{content:"";position:absolute;left:calc(50% - 3px);top:8px;width:6px;height:6px;border-radius:50%;background:currentColor}
.piano-key.sounding{color:#202a33;outline:3px solid #202a33;outline-offset:-4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}