/* clef notes chart */
#clef-notes .cn-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 4px 0; }
#clef-notes .cn-svg { display: block; width: 100%; max-width: 720px; margin: 0 auto; height: auto; }
#clef-notes .cn-line, #clef-notes .cn-ledger { stroke: var(--ink); stroke-width: 1; }
#clef-notes .cn-clef { stroke: var(--ink); }
#clef-notes .cn-ink { fill: var(--ink); }
#clef-notes .cn-head { fill: var(--ink); }
#clef-notes .cn-hit { fill: transparent; cursor: pointer; }
#clef-notes .cn-hit:hover { fill: var(--strong); }
#clef-notes .cn-note { pointer-events: none; }
#clef-notes .cn-hi .cn-head { fill: var(--primary); stroke: var(--family); stroke-width: 3; paint-order: stroke; }
#clef-notes .cn-dim { opacity: .28; }
#clef-notes .cn-midc .cn-head { fill: var(--warn); }
#clef-notes .cn-sel .cn-head { fill: var(--ok); }
#clef-notes .cn-lbl { fill: var(--muted); font: 600 9px var(--sans); text-anchor: middle; pointer-events: none; }
#clef-notes .cn-info { display: flex; gap: 14px; align-items: center; margin-top: 10px; min-height: 64px; }
#clef-notes .cn-name { flex: 0 0 auto; min-width: 72px; text-align: center; font: 600 28px/1 var(--sans); color: var(--ink); background: var(--strong); border-radius: 14px; padding: 12px 10px; }
#clef-notes .cn-where { margin: 0; color: var(--ink); }
#clef-notes .cn-freq { margin: 2px 0 0; }
#clef-notes .cn-piano .kb { margin-top: 8px; }
#clef-notes .cn-foot { margin-top: 8px; }
#clef-notes .cn-sum { margin: 0; }
#clef-notes .cn-qstaff { max-width: 300px; margin: 12px auto 0; }
#clef-notes .cn-qsvg { display: block; width: 100%; height: auto; }
#clef-notes .cn-qtext { text-align: center; font-weight: 600; color: var(--ink); font-size: 18px; margin: 8px 0; min-height: 1.5em; }
#clef-notes .cn-qtext.ok { color: var(--ok); } #clef-notes .cn-qtext.bad { color: var(--bad); }
#clef-notes .cn-qopts { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 480px; margin: 0 auto; }
#clef-notes .cn-qa { padding: 10px 0; font-size: 18px; min-width: 0; }
#clef-notes .cn-qa.ok { background: var(--ok); border-color: var(--ok); color: #fff; opacity: 1; }
#clef-notes .cn-qa.bad { background: var(--bad); border-color: var(--bad); color: #fff; opacity: 1; }
#clef-notes .cn-qscore { text-align: center; margin: 8px 0 0; }
#clef-notes .cn-more { text-align: center; margin: 6px 0 0; }
@media (max-width: 560px) {
  #clef-notes .cn-name { font-size: 22px; min-width: 60px; padding: 10px 6px; }
  #clef-notes .cn-info { gap: 10px; }
}