/* Answer on the notes; whole-example playback has its own control. */
.scale-quiz .practice-card { max-width:660px; }
.scale-quiz #notation svg { width:560px; height:190px; }
.scale-quiz .quiz-score-row { display:flex; align-items:flex-start; gap:8px; }
.scale-quiz #play-example { width:44px; height:44px; flex:0 0 44px; padding:0; margin-top:88px; font-size:18px; }
.scale-quiz #score-scroll { flex:1; min-width:0; border-radius:4px; }
.scale-quiz .quiz-canvas { position:relative; width:560px; height:190px; }
.scale-quiz #note-controls { position:absolute; inset:0; pointer-events:none; }
.scale-quiz .quiz-note-button { position:absolute; top:54px; width:44px; height:124px; min-height:0; background:transparent; border:0; padding:0; border-radius:4px; pointer-events:auto; }
.scale-quiz .quiz-note-button::before { content:''; position:absolute; inset:0 0 12px; border-radius:4px; pointer-events:none; }
.scale-quiz .quiz-note-button[aria-pressed=true]::before { background:rgba(33,70,93,.12); border:2px solid #21465d; }
.scale-quiz .quiz-note-button:focus-visible { outline:2px solid #21465d; outline-offset:-2px; }
.scale-quiz .quiz-caption { font:14px system-ui,sans-serif; fill:currentColor; }
.scale-quiz .quiz-mark { stroke:var(--gold); stroke-width:2; }
.scale-quiz .removed :is(.notehead,.accidental,.ledger) { opacity:.35; }
.scale-quiz .removed .pitch-label { text-decoration:line-through; }
.scale-quiz #sound-status { display:block; min-height:1.4em; font-size:14px; line-height:1.4; text-align:center; margin:4px 0 8px; }
.scale-quiz #selection-instruction { font-size:14px; text-align:center; color:var(--muted); margin:6px 0 0; }
.scale-quiz .choices { border:0; min-inline-size:0; padding:0; margin:0; }
.scale-quiz #inputs { display:flex; flex-direction:column; gap:6px; }
.scale-quiz #inputs label { display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:.9rem; line-height:1.4; }
.scale-quiz #inputs label:has(input:checked) { background:#edf3f5; border-color:#21465d; }
.scale-quiz input { width:20px; height:20px; flex:0 0 20px; margin:0; }
.scale-quiz input:focus-visible { outline:2px solid #21465d; outline-offset:3px; }
.scale-quiz .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:440px) { .scale-quiz #sound-status { min-height:2.8em; } }
@media(forced-colors:active) { .scale-quiz .quiz-note-button[aria-pressed=true]::before { border:2px solid Highlight; forced-color-adjust:none; } }