.note-naming-label{display:grid;gap:8px;margin:0 0 22px!important}.note-naming-label small{font-size:11px;color:var(--muted)}
#harmony-panel{flex:none;max-height:260px;overflow:auto;padding:16px 20px;background:#1c2018;border-bottom:1px solid #c8a66e55}
.harmony-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.harmony-heading .eyebrow{font-size:9px}.harmony-heading p{font-size:12px;margin:5px 0 12px}.harmony-heading>button{padding:4px 10px;background:transparent;font-size:22px}
.harmony-key{display:flex;flex-wrap:wrap;align-items:end;gap:12px}.harmony-key label{margin:0;display:grid;gap:5px;font-size:11px}.harmony-key select{width:auto;padding:6px;min-height:36px;font-size:12px}#harmony-key-note{font-size:11px;color:var(--muted);flex:1;min-width:130px;line-height:1.5}
#harmony-notes{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0;font-size:12px;color:#c9cdbf}#harmony-notes button{padding:5px 9px;background:#c8a66e20;border-color:#c8a66e80;font-size:12px}.harmony-actions{display:flex;gap:8px;flex-wrap:wrap}.harmony-actions button{font-size:12px;padding:8px 12px;min-height:38px}
#harmony-result{font-size:12px;line-height:1.6;margin-top:12px;color:#d2d6c8}#harmony-result>div{border-top:1px solid #ffffff18;padding:10px 0}#harmony-result b{color:#e9d3ac;font-size:14px}#harmony-result p{margin:5px 0;font-size:12px}.harmony-caveat{color:var(--muted)}
.harmony-selecting .staff-note-target{cursor:crosshair}.harmony-selected{filter:drop-shadow(0 0 4px #d8ac55)!important;outline:2px solid #c39845!important;outline-offset:3px}.reference-note-hints>.harmony-selected{background:#e8b33f66!important}.harmony-selecting .listen-measure-target{visibility:hidden}.harmony-selecting .reference-note-hints{visibility:visible!important}
#harmony-toggle>span:first-child{font-size:22px;line-height:18px}
@media(max-width:600px){#harmony-panel{padding:12px;max-height:260px}.harmony-key{gap:8px}#harmony-key-note{flex-basis:100%}.harmony-heading p{font-size:11px}.harmony-actions button{min-height:44px}#harmony-toggle{width:44px;min-width:44px}body[data-session=listen] #keyboard .key{font-size:8px;writing-mode:vertical-rl;padding-bottom:4px}body[data-session=listen].hide-note-names #keyboard .key{font-size:0}}
body.harmony-selecting[data-session=listen]:not(.immersive) .stage{height:auto;min-height:0}
body.harmony-selecting[data-session=listen]:not(.immersive) #score-wrap{height:340px;min-height:240px;flex:none}
body.harmony-selecting[data-session=listen] #keyboard{display:none}
body.harmony-selecting[data-session=listen] #roll{display:none}
body.harmony-selecting.immersive[data-session=listen] #score-wrap{min-height:80px}
@media(max-width:600px){body.harmony-selecting[data-session=listen]:not(.immersive) #score-wrap{height:300px}#harmony-panel{max-height:300px}}
body:not(.immersive) #harmony-panel{max-height:none;display:grid;grid-template-columns:minmax(260px,1fr) minmax(260px,1fr);gap:0 24px}
body:not(.immersive) #harmony-panel>.harmony-heading,body:not(.immersive) #harmony-panel>.harmony-key,body:not(.immersive) #harmony-panel>#harmony-notes,body:not(.immersive) #harmony-panel>.harmony-actions{grid-column:1}
body:not(.immersive) #harmony-result{grid-column:2;grid-row:1/span 4;margin:0;padding-left:24px;border-left:1px solid #ffffff18;align-self:center}
@media(max-width:700px){body:not(.immersive) #harmony-panel{display:block}body:not(.immersive) #harmony-result{margin-top:14px;padding:12px 0 0;border-left:0;border-top:1px solid #ffffff18}}