.blues-panel{--blue:#1273de;font-size:16px;padding:12px 20px}.blues-controls{display:flex;justify-content:center;margin-bottom:4px}.blues-score{position:relative;width:512px;height:230px;margin:auto}.blues-panel svg{display:block;overflow:visible}.blues-panel .music-glyph{font-size:38px}.blues-panel .degree,.blues-panel .pitch-label{font-size:14px}.blues-panel .scale-staff-note .pitch-label{font-family:"Gill Sans","Gill Sans MT",Calibri,"Segoe UI",Arial,Bravura,sans-serif;font-weight:400}.blues-panel .scale-staff-note.selected .pitch-label{text-decoration:underline;text-underline-offset:4px}.blues-panel .scale-staff-note.sounding .degree{font-weight:800;text-decoration:underline}.blue-note .degree,.blue-note .pitch-label,.blue-note .notehead{fill:var(--blue)}.blues-panel .removed .notehead,.blues-panel .removed .accidental,.blues-panel .removed .ledger{opacity:.32}.blues-panel .removed.sounding .notehead{opacity:1}.blues-panel .removed-strike{fill:none;stroke:var(--muted);stroke-width:1.3;stroke-dasharray:3 2;pointer-events:none}.blues-panel .removed-label{font-size:12px;fill:var(--muted);pointer-events:none}
.blues-add{position:absolute;width:42px;height:42px;min-height:42px;padding:0;font-size:23px;line-height:1;background:transparent;border-color:#8ba6a6}.blues-add[aria-pressed=true]{background:var(--wash)}.blues-add:focus-visible{outline-offset:2px}.blues-panel .score-scroll{scrollbar-width:auto}.blues-panel .score-scroll::-webkit-scrollbar{height:8px}.blues-panel .score-scroll::-webkit-scrollbar-track{background:var(--line)}.blues-panel .score-scroll::-webkit-scrollbar-thumb{background:#819092;border-radius:4px}
.blues-panel h2{font-size:18px;font-weight:600;text-align:center;margin:8px 0 2px;line-height:1.3}.blues-caption{font-size:14px;color:var(--muted);text-align:center;margin:0}.blues-panel .toolbar{margin-top:8px}.blues-panel .status{display:block;text-align:center;min-height:16px;margin-top:4px}.blues-panel details{margin-top:6px}.blues-panel .help-panel{font-size:14px;line-height:1.35;padding:12px 14px}.blues-panel .help-panel h2{text-align:left;margin:0 32px 8px 0}
/* Preferred visual reference, corrected to an equal-width piano pitch map. */
.blues-panel .piano-key.white{--face:#fffdf8;background:var(--face);color:#56656d;border-color:#b9b4a8}.blues-panel .piano-key.black{--face:#33302b;background:var(--face);color:white;border-color:#33302b}.blues-panel .piano-key.white.member{--face:#ffd98b;background:var(--face);color:#8a5a00;font-weight:600}.blues-panel .piano-key.black.member{--face:#e07a3f;background:var(--face);color:#202a33;font-weight:600}.blues-panel .piano-key.member.blue-key{--face:#1273de;background:var(--face);color:white}.blues-panel .piano-key.member::before{display:none}.blues-panel .piano-key.selected{box-shadow:inset 0 -3px 0 #8a5a00}.blues-panel .piano-key.sounding{background:var(--face)!important;outline:3px solid #202a33;outline-offset:-4px}.blues-panel .piano-key.sounding:focus-visible{outline:3px solid #9f6026;outline-offset:-3px;box-shadow:inset 0 0 0 5px #202a33}
@media(max-width:520px){.blues-panel{padding:10px}.blues-score{margin:0}.blues-panel .toolbar{gap:6px}.blues-panel .toolbar select{font-size:15px;padding:6px}}

.blues-panel .blue-note .notehead{fill:var(--blue)}