/* violin, viola and cello notes */
#bowed-notes .bn-top, #bowed-notes .bn-opts { gap: 8px; }
#bowed-notes .bn-opts { margin-top: 8px; }
#bowed-notes .bn-modef select { max-width: 100%; min-width: 0; }
#bowed-notes .bn-pattern { margin: 10px 0 0; color: var(--body); min-height: 1.6em; }
#bowed-notes .bn-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin-top: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 4px 0; }
#bowed-notes .bn-board, #bowed-notes .bn-staff { display: block; width: 100%; height: auto; }
#bowed-notes .bn-board { max-width: 640px; margin: 0 auto; }
#bowed-notes .bn-staff { max-width: 760px; margin: 0 auto; }
#bowed-notes .bn-wood { fill: var(--board); stroke: var(--line-strong); }
#bowed-notes .bn-nut { fill: var(--ink); }
#bowed-notes .bn-str { stroke: var(--ink); opacity: .75; }
#bowed-notes .bn-hand { fill: var(--family); opacity: .45; }
#bowed-notes .bn-poslbl { fill: var(--muted); font: 600 11px var(--sans); text-anchor: middle; }
#bowed-notes .bn-tape { stroke: var(--card); stroke-width: 5; opacity: .9; }
#bowed-notes .bn-hit { fill: transparent; cursor: pointer; }
#bowed-notes .bn-dot { fill: var(--primary); }
#bowed-notes .bn-txt { fill: var(--on-primary); font: 600 13px var(--sans); text-anchor: middle; pointer-events: none; }
#bowed-notes .bn-tagc { fill: var(--card); stroke: var(--ink); stroke-width: 1; }
#bowed-notes .bn-tag { fill: var(--ink); font: 700 9.5px var(--sans); text-anchor: middle; pointer-events: none; }
#bowed-notes .bn-open .bn-dot { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
#bowed-notes .bn-open .bn-txt { fill: var(--ink); }
#bowed-notes .bn-outkey .bn-dot, #bowed-notes .bn-out .bn-dot { fill: var(--card); stroke: var(--muted); stroke-dasharray: 3 2; }
#bowed-notes .bn-outkey .bn-txt, #bowed-notes .bn-out .bn-txt { fill: var(--muted); }
#bowed-notes .bn-mk:hover .bn-dot { stroke: var(--family); stroke-width: 3; }
#bowed-notes .bn-sel .bn-dot, #bowed-notes .bn-ok .bn-dot { fill: var(--ok); stroke: none; }
#bowed-notes .bn-sel .bn-txt, #bowed-notes .bn-ok .bn-txt { fill: #fff; }
#bowed-notes .bn-bad .bn-dot { fill: var(--bad); stroke: none; }
#bowed-notes .bn-bad .bn-txt { fill: #fff; }
#bowed-notes .bn-q .bn-dot { fill: var(--warn); stroke: var(--ink); stroke-width: 2; }
#bowed-notes .bn-q .bn-txt { fill: #fff; }
#bowed-notes .bn-line { stroke: var(--ink); stroke-width: 1; }
#bowed-notes .bn-clef { stroke: var(--ink); }
#bowed-notes .bn-ink, #bowed-notes .bn-head { fill: var(--ink); }
#bowed-notes .bn-acc { fill: var(--ink); font: 15px serif; text-anchor: middle; pointer-events: none; }
#bowed-notes .bn-slbl { fill: var(--muted); font: 600 8px var(--sans); text-anchor: middle; pointer-events: none; }
#bowed-notes .bn-sn .bn-head, #bowed-notes .bn-sn line, #bowed-notes .bn-sn text { pointer-events: none; }
#bowed-notes .bn-sn:hover .bn-hit { fill: var(--strong); }
#bowed-notes .bn-sn.bn-sel .bn-head { fill: var(--ok); }
#bowed-notes .bn-sn.bn-sel .bn-slbl { fill: var(--ink); }
#bowed-notes .bn-info { display: flex; gap: 14px; align-items: center; margin-top: 10px; min-height: 64px; }
#bowed-notes .bn-name { flex: 0 0 auto; min-width: 72px; text-align: center; font: 600 26px/1 var(--sans); color: var(--ink); background: var(--strong); border-radius: 14px; padding: 12px 10px; }
#bowed-notes .bn-where { margin: 0; color: var(--ink); }
#bowed-notes .bn-freq { margin: 2px 0 0; }
#bowed-notes .bn-piano .kb { margin-top: 8px; }
#bowed-notes .bn-foot { margin-top: 10px; gap: 8px; }
#bowed-notes .bn-quiz { margin-top: 10px; text-align: center; }
#bowed-notes .bn-qtype { justify-content: center; }
#bowed-notes .bn-qtext { font-weight: 600; color: var(--ink); font-size: 18px; margin: 10px 0 8px; min-height: 1.5em; }
#bowed-notes .bn-qtext.ok { color: var(--ok); }
#bowed-notes .bn-qtext.bad { color: var(--bad); }
#bowed-notes .bn-qopts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 480px; margin: 0 auto; }
#bowed-notes .bn-qa { padding: 10px 0; font-size: 18px; min-width: 0; min-height: 48px; position: relative; }
#bowed-notes .bn-qk { position: absolute; top: 3px; left: 10px; font-size: 10px; color: var(--muted); }
#bowed-notes .bn-qa.ok { background: var(--ok); border-color: var(--ok); color: #fff; opacity: 1; }
#bowed-notes .bn-qa.bad { background: var(--bad); border-color: var(--bad); color: #fff; opacity: 1; }
#bowed-notes .bn-qscore { margin: 8px 0 0; }
#bowed-notes .bn-qhelp { margin: 4px 0 0; }
@media (max-width: 560px) {
  #bowed-notes .bn-name { font-size: 22px; min-width: 60px; padding: 10px 6px; }
  #bowed-notes .bn-info { gap: 10px; }
}
#bowed-notes .bn-dot, #bowed-notes .bn-tagc { pointer-events: none; }