/* Play the Notes */
.check { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-weight: 500; }
.checks { margin: 14px 0 4px; }
.paper-preview { display: flex; flex-direction: column; align-items: center; gap: 18px; background: #e7e2d8; padding: 18px; border-radius: 12px; }
.sheet { background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.18); width: 100%; max-width: 760px; }
.sheet-svg { display: block; width: 100%; height: auto; }
@media print {
  body * { visibility: hidden; }
  .paper-preview, .paper-preview * { visibility: visible; }
  .paper-preview { position: absolute; left: 0; top: 0; padding: 0; background: none; gap: 0; display: block; }
  .sheet { box-shadow: none; max-width: none; width: auto; page-break-after: always; break-after: page; }
  .sheet-svg { width: auto; height: auto; }
}
.tool-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 800px) { .tool-grid { grid-template-columns: 1fr; } }
.chip { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--surface); border: 1px solid var(--rule); font-weight: 600; margin: 2px; }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.big-notes { font: 700 1.4rem var(--display); letter-spacing: .02em; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seg button { font: 600 .95rem var(--sans); padding: 6px 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; min-height: 40px; }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Circle of fifths */
.cof-svg { width: 100%; max-width: 520px; display: block; margin: 0 auto; font-family: var(--display); }
.cof-seg path { stroke: #fff; stroke-width: 2; cursor: pointer; transition: fill .15s; }
.cof-seg.major path { fill: #dfe5f3; }
.cof-seg.minor path { fill: #eef1f8; }
.cof-seg.related path { fill: #c9d3ec; }
.cof-seg.active path { fill: var(--accent); }
.cof-seg:hover path, .cof-seg:focus-visible path { fill: #b3c1e6; outline: none; }
.cof-seg.active:hover path { fill: var(--accent); }
.cof-label { font-size: 19px; font-weight: 700; fill: var(--ink); pointer-events: none; }
.cof-seg.minor .cof-label { font-size: 14px; }
.cof-alt { font-size: 11px; fill: var(--muted); pointer-events: none; }
.cof-seg.active .cof-label, .cof-seg.active .cof-alt { fill: #fff; }
.cof-sig { font-size: 11px; fill: var(--muted); font-weight: 600; }
.cof-center { fill: var(--surface); stroke: var(--rule); }
.cof-center-label { font-size: 22px; font-weight: 700; fill: var(--accent); }
.cof-staff { width: 100%; max-width: 320px; display: block; }
.cof-chords { display: flex; flex-wrap: wrap; gap: 6px; }
.cof-chord { display: flex; flex-direction: column; align-items: center; padding: 6px 10px; min-width: 58px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.cof-chord:hover { border-color: var(--accent); }
.cof-chord .roman { font-size: .8rem; color: var(--muted); }

/* Chord diagrams and fretboards */
.picker { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.picker > b { min-width: 44px; }
.voicings { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.voicing { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 10px; text-align: center; }
.voicing.main { border-color: var(--accent); }
.voicing figcaption { font: 600 .95rem var(--mono); display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 4px; }
.chord-diagram { display: block; margin: 0 auto; }
.cd-name { font: 700 17px var(--display); fill: var(--ink); }
.cd-line { stroke: #555; stroke-width: 1.2; }
.cd-nut { stroke: #222; stroke-width: 5; }
.cd-fretno { font: 600 10px var(--sans); fill: var(--muted); }
.cd-mark { font: 700 13px var(--sans); fill: #666; }
.cd-open { fill: none; stroke: #333; stroke-width: 1.5; }
.cd-dot { fill: var(--accent); }
.cd-finger { font: 700 10px var(--sans); fill: #fff; }
.cd-string { font: 600 10px var(--sans); fill: var(--muted); }
.common-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.common-cell { display: block; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 4px; }
.common-cell:hover { border-color: var(--accent); }
.fretboard-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 8px; }
.fretboard { display: block; min-width: 760px; width: 100%; height: auto; }
.fb-wood { fill: #f3e6cf; }
.fb-nut { stroke: #222; stroke-width: 6; }
.fb-fret { stroke: #b9a888; stroke-width: 2; }
.fb-string { stroke: #6b6b6b; }
.fb-inlay { fill: #dccaa8; }
.fb-sname, .fb-fretno { font: 600 12px var(--sans); fill: var(--muted); }
.fb-dot circle { fill: #3e5a9c; }
.fb-dot.root circle { fill: #c0392b; }
.fb-dot text { font: 700 10px var(--sans); fill: #fff; }
@media print { .picker, .voicing .btn, .settings { display: none !important; } .common-grid { grid-template-columns: repeat(7, 1fr); } }
.settings { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: .95rem; }
.settings label { display: flex; align-items: center; gap: 6px; }
.settings select, label.settings select { width: auto; min-height: 38px; padding: 4px 8px; }
.capo-table td, .capo-table th { text-align: center; white-space: nowrap; }
table.data tr.best td { background: #eef2fb; font-weight: 600; }
.mono-area { font: 15px/1.45 var(--mono); white-space: pre; overflow: auto; min-height: 320px; }
pre.mono-area { margin: 0; background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 10px; }
.semis { font: 800 1.6rem var(--mono); min-width: 3ch; text-align: center; }
.transpose-info { margin-top: 8px; }
.field > span:first-child { font-weight: 600; }
/* Tempo */
.tempo-top { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-bottom: 18px; }
.tap-pad { width: clamp(180px, 40vw, 260px); aspect-ratio: 1; border-radius: 50%; border: none; background: radial-gradient(circle at 40% 35%, #5474c2, var(--accent)); color: #fff; font: 800 2.2rem var(--sans); letter-spacing: .1em; cursor: pointer; box-shadow: 0 8px 20px rgba(39,64,122,.35); user-select: none; touch-action: manipulation; }
.tap-pad.hit { animation: tap .15s ease-out; }
@keyframes tap { 50% { transform: scale(.94); } }
.bpm-big { font: 800 clamp(3rem, 10vw, 5rem)/1 var(--display); }
.bpm-name { font-size: 1.2rem; color: var(--muted); margin: 4px 0 8px; }
.beats { display: flex; gap: 10px; margin-top: 10px; }
.beat { width: 22px; height: 22px; border-radius: 50%; background: var(--rule); }
.beat.accent { box-shadow: inset 0 0 0 3px #b9c4e3; }
.beat.on { background: var(--accent); }
input[type=range] { flex: 1; min-width: 160px; accent-color: var(--accent); }
/* Drum machine */
.drum-scroll { overflow-x: auto; }
.drum-grid { display: grid; grid-template-columns: 110px repeat(16, minmax(30px, 1fr)); gap: 4px; min-width: 700px; background: #1f2233; padding: 10px; border-radius: 12px; }
.drum-label { background: none; border: none; color: #dfe4f2; font: 600 .85rem var(--sans); text-align: left; cursor: pointer; }
.drum-cell { aspect-ratio: 1; border-radius: 6px; border: none; background: #3a3f57; cursor: pointer; padding: 0; min-height: 30px; }
.drum-cell.downbeat { background: #4a506c; }
.drum-cell.on { background: #f2a93b; }
.drum-cell.on.accent { background: #ff5d4d; }
.drum-cell.now { box-shadow: inset 0 0 0 3px #fff; }
/* Progressions */
.prog-chords { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.prog-chord { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; background: var(--surface); border: 2px solid var(--rule); border-radius: 12px; cursor: pointer; font: inherit; color: var(--ink); }
.prog-chord b { font: 700 1.5rem var(--display); }
.prog-chord .roman { color: var(--muted); font-size: .85rem; }
.prog-chord.now { border-color: var(--accent); background: #eef2fb; }
/* Reading practice */
.reading-stats { display: flex; gap: 16px; align-items: center; font-weight: 600; margin: 6px 0 10px; flex-wrap: wrap; }
.reading-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 16px; text-align: center; max-width: 560px; margin: 0 auto; }
.reading-card.wide { max-width: none; }
.reading-staff { width: 100%; max-width: 460px; display: block; margin: 0 auto; }
.sight-staff { width: 100%; display: block; }
.feedback { font: 700 1.2rem var(--sans); min-height: 1.8em; margin: 6px 0; }
.feedback.ok { color: #2b8a3e; } .feedback.bad { color: #c92a2a; }
.note-buttons { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.note-buttons .btn { font-size: 1.3rem; min-height: 54px; padding: 6px 0; }