@font-face {
  font-family: "Noto Sans Symbols";
  src: url("assets/fonts/NotoSansSymbols-Accidentals.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+266D, U+266F;
}
@font-face {
  font-family: "Noto Sans Symbols";
  src: url("assets/fonts/NotoSansSymbols-Accidentals-800.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  unicode-range: U+266D, U+266F;
}

:root {
  /* Shared palette: change colors here, never in component rules. */
  --color-ink: #172033;
  --color-muted: #4b566a;
  --color-line: #aeb9c8;
  --color-paper: #fff;
  --color-canvas: #edf1f6;
  --color-transparent: transparent;
  --color-accent: #275c8c;
  --color-accent-soft: #c9e0f5;
  --color-positive: #2e6b48;
  --color-positive-soft: #cfe8d9;
  --color-warning: #795a12;
  --color-warning-soft: #f3dfac;
  --color-tonic: #8a3538;
  --color-tonic-soft: #efcfd1;
  --color-shadow: #17203326;
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body { margin: 0; background: var(--color-canvas); color: var(--color-ink); font-family: Arial, Helvetica, sans-serif; }
.accidental { font-family: "Noto Sans Symbols", sans-serif; font-style: normal; font-weight: inherit; }
.accidental.sharp { position: relative; top: -.14em; display: inline-block; vertical-align: baseline; }
.toolbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: .8rem max(1rem, calc((100vw - 1180px) / 2)); background: var(--color-ink); color: var(--color-paper); box-shadow: 0 3px 18px var(--color-shadow); }
.brand { color: var(--color-paper); font-size: 1.1rem; font-weight: 800; text-decoration: none; }
.controls { display: flex; align-items: end; gap: .75rem; }
.controls label { display: grid; gap: .2rem; color: var(--color-line); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
select, button { min-height: 2.35rem; border: 1px solid var(--color-line); border-radius: .45rem; padding: .45rem .7rem; background: var(--color-paper); color: var(--color-ink); font: inherit; font-weight: 700; }
button { cursor: pointer; background: var(--color-accent-soft); border-color: var(--color-accent); }
.sheet { width: min(1120px, calc(100% - 2rem)); margin: 2rem auto; padding: 3rem; background: var(--color-paper); box-shadow: 0 10px 40px var(--color-shadow); }
.page-header { margin-bottom: 1.25rem; }
.header-meta { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.eyebrow { margin: 0; color: var(--color-accent); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.1; }
.version { color: var(--color-muted); font-size: .75rem; font-weight: 800; white-space: nowrap; }
.scale-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 2rem; padding: 0; border: 0; background: var(--color-transparent); }
.scale-column { display: grid; grid-template-rows: auto 1fr; min-width: 0; gap: .4rem; }
.scale-body { display: flex; align-items: center; min-width: 0; min-height: 5.4rem; }
.scale-body .scale-strip { width: 100%; }
.scale-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; color: var(--color-accent); font-size: .72rem; }
.scale-strip { display: flex; align-items: center; justify-content: center; min-width: 0; }
.scale-note { display: flex; flex: 0 0 2.3rem; width: 2.3rem; height: 2.3rem; align-items: center; justify-content: center; border: 1.5px solid var(--color-accent); border-radius: 50%; background: var(--color-accent-soft); font-weight: 800; }
.scale-note.tonic { border-color: var(--color-tonic); background: var(--color-tonic); color: var(--color-paper); }
.interval { display: grid; flex: 1 1 2rem; min-width: 1rem; place-items: center; height: 2px; background: var(--color-line); color: var(--color-muted); }
.interval b { margin-top: -1.4rem; font-size: .72rem; }
.interval small { margin-top: 1.15rem; color: var(--color-accent); font-weight: 800; }
.piano-panel { display: grid; grid-template-rows: auto 1fr; min-width: 0; gap: .4rem; }
.scale-heading, .piano-heading { display: flex; justify-content: space-between; gap: 1rem; color: var(--color-muted); font-size: .68rem; }
.scale-heading { align-items: baseline; justify-content: flex-start; }
.scale-heading strong, .piano-heading strong { color: var(--color-accent); text-transform: uppercase; letter-spacing: .04em; }
.piano-keyboard { position: relative; display: flex; justify-self: center; width: 100%; max-width: 32rem; height: 5.4rem; border: 1px solid var(--color-ink); border-radius: .3rem; background: var(--color-ink); overflow: hidden; }
.piano-key { display: flex; align-items: end; justify-content: center; }
.piano-key b { position: relative; z-index: 2; display: flex; min-width: 1.55rem; min-height: 1.55rem; align-items: center; justify-content: center; border-radius: 50%; font-size: .68rem; line-height: 1; }
.white-key { flex: 1; padding-bottom: .38rem; border-right: 1.5px solid var(--color-ink); background: linear-gradient(90deg, var(--color-paper) 0, var(--color-canvas) 100%); color: var(--color-ink); box-shadow: inset 0 -3px 0 var(--color-line); }
.white-key:last-of-type { border-right: 0; }
.white-key.selected b { border: 1px solid var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.white-key.tonic b { border-color: var(--color-tonic); background: var(--color-tonic); color: var(--color-paper); }
.black-key { position: absolute; z-index: 1; top: 0; left: calc(var(--key-position) * 6.6667%); width: 4.2%; height: 62%; padding-bottom: .35rem; transform: translateX(-50%); border: 1px solid var(--color-ink); border-top: 0; border-radius: 0 0 .25rem .25rem; background: var(--color-ink); color: var(--color-paper); box-shadow: 0 2px 3px var(--color-shadow); }
.black-key.selected { background: var(--color-accent); border-color: var(--color-ink); }
.black-key.tonic { background: var(--color-tonic); border-color: var(--color-ink); outline: 3px solid var(--color-tonic-soft); outline-offset: -3px; }
.black-key b { min-width: auto; min-height: auto; }
.chords-section { margin-top: 1.7rem; }
.table-heading { display: grid; grid-template-columns: 3.25rem minmax(360px, 25rem) 8rem 15.3rem; align-items: center; justify-content: center; gap: 2.8rem; min-height: 3.9rem; padding: .55rem 1rem .55rem .25rem; background: var(--color-ink); color: var(--color-paper); font-size: .78rem; }
.table-heading > strong { text-align: center; }
.construction-heading { display: grid; gap: .38rem; text-align: center; }
.construction-heading p { display: flex; align-items: center; justify-content: center; gap: .28rem; margin: 0; color: var(--color-line); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.chord-heading { display: grid; gap: .38rem; }
.chord-heading small { color: var(--color-line); font-size: .68rem; font-weight: 700; }
.root-dot,.take-dot,.skip-dot { display: inline-block; flex: 0 0 auto; width: .75rem; height: .75rem; border: 1px solid var(--color-paper); border-radius: 50%; vertical-align: -.1rem; }
.root-dot { background: var(--color-tonic); }
.take-dot { background: var(--color-accent); }
.chord-row { display: grid; grid-template-columns: 3.25rem minmax(360px, 25rem) 8rem 15.3rem; align-items: center; justify-content: center; gap: 2.8rem; min-height: 9.1rem; padding: 1rem 1rem 1rem .25rem; border-bottom: 1px solid var(--color-line); }
.chord-row:nth-child(even) { background: var(--color-canvas); }
.degree { font-size: 1.05rem; font-weight: 800; text-align: center; }
.construction { display: flex; width: 100%; min-width: 0; align-items: center; }
.construction-step { display: flex; flex: 1 1 0; height: 0; align-items: center; border-top: 2px solid var(--color-line); }
.construction-step:last-child { flex: 0 0 auto; border-top: 0; }
.construction-note { position: relative; z-index: 1; flex: 0 0 auto; display: flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border: 2px solid var(--color-muted); border-radius: 50%; background: var(--color-paper); font-weight: 800; }
.construction-note.take { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-paper); }
.construction-note.root { border-color: var(--color-tonic); background: var(--color-tonic); color: var(--color-paper); }
.chord-details { display: grid; min-width: 0; grid-template-rows: repeat(3, 1.1rem); row-gap: 12px; }
.chord-title { display: flex; min-width: 0; align-items: center; flex-wrap: nowrap; gap: .45rem; }
.chord-title > strong { flex: 0 0 auto; font-size: 1.1rem; line-height: 1; white-space: nowrap; }
.quality { align-self: center; min-width: 0; max-width: 100%; flex: 0 1 auto; overflow: hidden; border: 1px solid var(--color-line); border-radius: 999px; padding: .18rem .48rem; background: var(--color-paper); font-size: .64rem; font-weight: 700; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.quality.major { color: var(--color-positive); }
.quality.minor { color: var(--color-warning); }
.quality.diminished { color: var(--color-tonic); }
.quality.augmented { color: var(--color-warning); }
.chord-details p, .chord-details small { margin: 0; color: var(--color-muted); font-weight: 800; line-height: 1.1rem; }
.diagram { width: 6.4rem; text-align: center; }
.diagram-set { display: grid; min-width: 0; grid-template-columns: repeat(2, 6.4rem); justify-content: end; gap: 2.5rem; }
.string-labels { position: relative; height: .75rem; margin: 0 .4rem .25rem 1.1rem; font-size: .75rem; font-weight: 800; line-height: 1; }
.string-labels > span { position: absolute; left: calc(var(--string) * 33.333%); transform: translateX(-50%); white-space: nowrap; }
.fretboard { position: relative; height: 5rem; margin: 0 .4rem 0 1.1rem; }
.string-line, .fret-line { position: absolute; z-index: 0; pointer-events: none; }
.string-line { top: 0; bottom: 0; left: calc(var(--line) * 33.333%); border-left: 1px solid var(--color-ink); }
.fret-line { left: 0; right: 0; top: calc(var(--line) * 25%); border-top: 1px solid var(--color-ink); }
.fret-line.nut { border-top-width: 3px; }
.fret-number { position: absolute; left: -1rem; top: calc((var(--fret) - .5) * 25%); width: .65rem; transform: translateY(-50%); color: var(--color-muted); font-size: .55rem; font-weight: 700; text-align: right; }
.fret-dot { --dot: 1.22rem; position: absolute; z-index: 1; left: calc(var(--string) * 33.333% - var(--dot) / 2); top: calc((var(--fret) - .5) * 25% - var(--dot) / 2); display: grid; width: var(--dot); height: var(--dot); place-items: center; border-radius: 50%; background: var(--color-accent); color: var(--color-paper); font-size: .65rem; font-weight: 800; }
.fret-code { display: block; margin: .25rem .4rem 0 1.1rem; color: var(--color-muted); font-size: .75rem; text-align: center; }
.sheet-footer { display: grid; gap: .65rem; padding-top: 1.25rem; }
.progressions { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2rem; }
.progressions h2 { margin: 0; color: var(--color-accent); font-size: 1rem; text-transform: uppercase; }
#progression-list { display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; color: var(--color-muted); font-weight: 800; }
.footer-note { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; color: var(--color-muted); font-size: .75rem; }
.footer-note strong { color: var(--color-accent); text-transform: uppercase; }
#function-list { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-weight: 700; }
.functions-note { grid-template-columns: 9rem 1fr auto; align-items: baseline; }
.page-url { justify-self: end; color: var(--color-muted); font-size: .7rem; white-space: nowrap; }
.page-url a { color: inherit; text-decoration: none; }

@media (min-width: 1071px) {
  .table-heading, .chord-row {
    grid-template-columns: 3.25rem 1rem minmax(360px, 25rem) 2.8rem 9.5rem 2.8rem 15.3rem;
    gap: 0;
  }
  .table-heading > :nth-child(1), .chord-row > :nth-child(1) { grid-column: 1; }
  .table-heading > :nth-child(2), .chord-row > :nth-child(2) { grid-column: 3; }
  .table-heading > :nth-child(3), .chord-row > :nth-child(3) { grid-column: 5; }
  .table-heading > :nth-child(4), .chord-row > :nth-child(4) { grid-column: 7; }
}

@media (max-width: 1070px) {
  .sheet { padding: 1.5rem; }
  .chord-row { grid-template-columns: 2.5rem 1fr 13.4rem; }
  .table-heading { grid-template-columns: 2.5rem 1fr 13.4rem; }
  .table-heading .construction-heading { grid-column: 1 / -1; grid-row: 2; }
  .construction { grid-column: 1 / -1; grid-row: 2; }
  .diagram-set { grid-column: 3; grid-row: 1; }
  .diagram-set { gap: .6rem; }
}
@media (max-width: 700px) {
  .scale-panel { grid-template-columns: 1fr; }
  .piano-keyboard { width: min(100%, 32rem); }
}
@media (max-width: 600px) {
  .toolbar { position: static; display: block; }
  .brand { display: block; margin-bottom: .7rem; }
  .controls { display: grid; grid-template-columns: 1fr 1fr; }
  .controls button { grid-column: 1 / -1; }
  .sheet { width: 100%; margin: 0; padding: 1rem; box-shadow: none; }
  .page-header { display: block; }
  .version { margin: 0; }
  .scale-panel { padding: 0; }
  .scale-note { flex-basis: 1.8rem; width: 1.8rem; height: 1.8rem; font-size: .78rem; }
  .interval { min-width: .3rem; }
  .piano-heading { display: grid; gap: .15rem; }
  .piano-keyboard { width: 100%; height: 4rem; }
  .scale-body { min-height: 4rem; }
  .piano-key b { min-width: 1.1rem; min-height: 1.1rem; font-size: .55rem; }
  .black-key b { min-width: auto; min-height: auto; font-size: .48rem; }
  .table-heading { grid-template-columns: 2.5rem 1fr; grid-template-rows: auto auto; gap: .55rem; padding: .75rem .5rem .75rem .25rem; }
  .table-heading > strong:last-child { display: none; }
  .table-heading .construction-heading { grid-column: 1 / -1; grid-row: 2; }
  .chord-row { grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-rows: auto auto auto; gap: .85rem .5rem; padding: 1rem .5rem 1rem .25rem; }
  .degree { grid-column: 1; grid-row: 1; }
  .chord-details { grid-column: 2; grid-row: 1; }
  .construction { grid-column: 1 / -1; grid-row: 2; }
  .table-heading > strong { font-size: .65rem; text-align: center; }
  .diagram-set { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(2, 6.4rem); justify-content: center; gap: 1.5rem; margin-top: .1rem; }
  .quality { font-size: .62rem; }
  .progressions, .footer-note { grid-template-columns: 1fr; gap: .35rem; }
  .functions-note { grid-template-columns: 1fr; }
  .page-url { font-size: .65rem; }
}
@page { size: A4 portrait; margin: 12mm 8mm 10mm; }
@media print {
  body { background: var(--color-paper); }
  .sheet, .sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .toolbar { display: none; }
  .sheet { width: auto; margin: 0; padding: 0; box-shadow: none; }
  .page-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 3mm; }
  .header-meta { grid-column: 2; grid-row: 1; justify-content: end; margin: 0; }
  .eyebrow { display: none; }
  h1 { grid-column: 1; grid-row: 1; }
  h1 { font-size: 16pt; }
  .version { margin: 0; font-size: 6.5pt; }
  .scale-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; padding: 0; }
  .scale-column { gap: 1mm; }
  .scale-body { min-height: 14mm; }
  .scale-legend { gap: 1mm 4mm; font-size: 5pt; }
  .scale-note { flex-basis: 7mm; width: 7mm; height: 7mm; font-size: 7pt; }
  .interval b, .interval small { font-size: 5.5pt; }
  .piano-panel { gap: 1mm; }
  .piano-heading { font-size: 4.7pt; }
  .piano-keyboard { width: 100%; height: 14mm; border-radius: 1mm; }
  .piano-key b { min-width: 4.5mm; min-height: 4.5mm; font-size: 5pt; }
  .scale-note { flex-basis: 5.5mm; width: 5.5mm; height: 5.5mm; font-size: 6pt; }
  .interval { min-width: 1mm; }
  .white-key { padding-bottom: 1mm; }
  .black-key { padding-bottom: .8mm; border-radius: 0 0 .7mm .7mm; }
  .black-key b { min-width: auto; min-height: auto; }
  .chords-section { margin-top: 3mm; }
  .table-heading { display: flex; justify-content: flex-start; gap: 6.5mm; min-height: 10mm; padding: 1.5mm 2mm 1.5mm 6mm; font-size: 6.5pt; }
  .table-heading > strong:first-child, .degree { flex: 0 0 10mm; }
  .table-heading .construction-heading, .construction { flex: 0 0 64mm; }
  .table-heading .chord-heading, .chord-details { flex: 0 0 26mm; }
  .table-heading > strong:last-child, .diagram-set { flex: 0 0 50mm; }
  .table-heading .construction-heading { gap: 1mm; }
  .construction-heading p { gap: 1mm; font-size: 5.5pt; }
  .chord-heading { gap: 1mm; }
  .chord-heading small { font-size: 5pt; }
  .root-dot, .take-dot, .skip-dot { width: 2.5mm; height: 2.5mm; }
  .chord-row { display: flex; justify-content: flex-start; gap: 6.5mm; min-height: 28.5mm; padding: 1.5mm 2mm 1.5mm 6mm; break-inside: avoid; }
  .construction { justify-content: center; }
  .construction-step { flex: 0 0 14mm; border-top-width: .5mm; border-top-color: var(--color-muted); }
  .construction-step:last-child { flex-basis: 6mm; border-top: 0; }
  .construction-note { width: 6mm; height: 6mm; font-size: 6.5pt; }
  .degree { font-size: 8pt; }
  .chord-title { gap: 1.2mm; }
  .chord-details { grid-template-rows: repeat(3, 3.5mm); row-gap: 2mm; }
  .chord-title > strong { font-size: 8pt; }
  .quality { padding: .7mm 1.4mm; font-size: 5.5pt; }
  .chord-details p { font-size: 7pt; line-height: 3.5mm; }
  .chord-details small { font-size: 6pt; line-height: 3.5mm; }
  .diagram { grid-column: auto; grid-row: auto; width: 24mm; }
  .diagram-set { grid-template-columns: repeat(2, 24mm); gap: 2mm; }
  .string-labels { margin: 0 1mm .5mm 3.5mm; font-size: 5.5pt; }
  .fretboard { height: 16mm; margin: 0 1mm 0 3.5mm; }
  .fret-number { left: -3mm; width: 2mm; font-size: 4.5pt; }
  .fret-dot { --dot: 4mm; font-size: 5pt; }
  .fret-code { margin: .5mm 1mm 0 3.5mm; font-size: 5.5pt; }
  .sheet-footer { gap: 1.5mm; padding-top: 2.5mm; }
  .progressions { grid-template-columns: auto 1fr; gap: 5mm; }
  .progressions h2 { font-size: 7.5pt; }
  #progression-list { gap: 2mm 4mm; font-size: 7pt; }
  .footer-note { grid-template-columns: 30mm 1fr; gap: 3mm; font-size: 5.8pt; }
  .functions-note { grid-template-columns: 30mm 1fr auto; }
  #function-list { gap: 1mm 4mm; }
  .page-url { font-size: 5.8pt; }
}