.compare-panel{padding:12px 20px}.compare-panel .music-row{display:block}.compare-score{position:relative;width:390px;margin:auto}
.compare-panel .tonic-control{position:absolute;z-index:1;left:6px;top:44px;margin:0;width:64px}.compare-panel .tonic-control select{width:64px;padding:6px 4px}
.compare-panel .row-name{display:block;min-height:32px;padding:0 8px;margin:0 0 0 12px;border:0;border-radius:0;background:transparent;font-size:16px;font-weight:600;text-align:left}
.compare-panel .row-name:hover{text-decoration:underline}.compare-panel .row-name.playing{border-left:3px solid var(--accent);padding-left:5px;text-decoration:underline}
.compare-panel svg{display:block;overflow:visible}.compare-panel .changed .pitch-label{font-weight:700}
.compare-panel .scale-staff-note.selected .pitch-label{text-decoration:underline;text-underline-offset:4px}.compare-panel .scale-staff-note.sounding .degree{text-decoration:underline;font-weight:800}
.compare-panel .scale-staff-note:focus-visible .note-hit{stroke:var(--accent);stroke-width:2}
.compare-panel .change-caption{font-size:14px;color:var(--muted);text-align:center;margin:2px 0 4px}
.compare-panel .toolbar .play{min-width:100px}.compare-panel .status{display:block;min-height:14px;text-align:center;margin-top:5px}.compare-panel details{margin-top:6px}
.compare-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){.compare-panel{padding:10px}.compare-score{margin:0}.compare-panel .change-caption{text-align:left}}