.music-page {
  --subtle: #526d81;
  --body: #354f62;
  --line-strong: #6b8ca4;
  --music-blue: #1d5f96;
  --music-cyan: #2d87bd;
  --music-rust: #a94f3d;
  --music-purple: #6a68a7;
  --music-green: #39806f;
  --music-grid: rgba(29, 95, 150, 0.12);
  --music-wash: rgba(255, 255, 255, 0.48);
}

.music-page .page-shell { width: min(1320px, calc(100% - 64px)); }
.music-header { gap: 1.25rem; }

.music-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.7rem, 2.1vw, 1.8rem);
  margin-left: auto;
  margin-right: auto;
}

.music-nav a,
.header-index {
  color: var(--subtle);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.music-nav a:hover,
.music-nav a:focus-visible,
.music-text-link:hover,
.music-text-link:focus-visible { color: var(--accent-2); }
.header-index { color: var(--accent); }

.music-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
  align-items: center;
  gap: 3.5rem clamp(2rem, 6vw, 6rem);
  padding: clamp(3.7rem, 7vw, 6.5rem) 0 1.25rem;
}

.music-hero-copy h1 {
  margin-bottom: 1.2rem;
  font-size: clamp(3.3rem, 7vw, 6.7rem);
  line-height: 0.9;
}

.music-hero-copy h1 span { color: var(--accent); }

.music-lede {
  max-width: 600px;
  margin: 0;
  color: var(--body);
  font-size: clamp(0.88rem, 1.4vw, 1.02rem);
  line-height: 1.8;
}

.music-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line-strong);
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.hero-equation {
  min-width: 0;
  padding: 1.1rem 1.25rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--music-wash);
}

.equation-kicker,
.equation-legend,
.equation-foot,
.experiment-heading,
.plot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--subtle);
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.equation-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 1vw, 0.8rem);
  min-height: 96px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.7vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.equation-main sup { color: var(--accent); font-size: 0.58em; }
.equation-main sub { font-size: 0.58em; }
.equation-sine { color: var(--accent); }

.equation-frac { display: inline-grid; justify-items: center; gap: 0.08rem; font-size: 0.78em; }
.equation-frac i { width: 100%; border-top: 1px solid currentColor; }
.equation-legend { justify-content: flex-start; gap: 1rem; font-size: 0.52rem; }
.legend-mark { display: inline-block; width: 14px; height: 2px; margin-right: 0.35rem; vertical-align: middle; background: var(--music-blue); }
.legend-mark.wave { background: var(--music-cyan); }

.hero-wave { display: block; width: 100%; height: auto; margin: 0.5rem 0 0.1rem; }
.hero-wave path { fill: none; vector-effect: non-scaling-stroke; }
.hero-wave .hero-envelope { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 5; }
.hero-wave .hero-wave-line { stroke: var(--music-cyan); stroke-width: 2.2; }
.hero-wave .hero-axis { stroke: var(--line); stroke-width: 1; }
.equation-foot { padding-top: 0.25rem; font-size: 0.52rem; }

.music-hero-meta {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--subtle);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.lab-section { padding: clamp(3.8rem, 7vw, 6.2rem) 0 0; scroll-margin-top: 1rem; }
.music-section-heading { display: block; margin: 0 0 1.7rem; padding-bottom: 1rem; }
.music-section-heading .eyebrow { margin-bottom: 0.55rem; }
.music-section-heading h2 { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; text-transform: none; }
.section-deck { max-width: 780px; margin: 0.8rem 0 0; color: var(--body); font-family: var(--mono); font-size: 0.75rem; line-height: 1.75; }

.control-deck {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(180px, 0.95fr) minmax(330px, 1.2fr);
  gap: 1.3rem 1.8rem;
  align-items: end;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.control-field { display: grid; min-width: 0; gap: 0.55rem; color: var(--subtle); font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; }
.control-field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem; }
.control-field strong { color: var(--accent); font-size: 0.59rem; font-weight: 800; white-space: nowrap; }
.control-field output { color: var(--ink); font-variant-numeric: tabular-nums; }

.music-page .form-select {
  width: 100%;
  min-height: 40px;
  padding: 0.55rem 2.1rem 0.55rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink);
  background: rgba(255,255,255,0.62);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0;
}

.music-page .form-select:focus-visible,
.music-page .form-range:focus-visible,
.model-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.music-page .form-range { width: 100%; min-height: 24px; margin: 0; accent-color: var(--music-blue); }

.model-switch { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.model-choice {
  min-height: 38px;
  padding: 0.5rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--body);
  background: transparent;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.model-choice:hover { border-color: var(--line-strong); color: var(--accent); }
.model-choice.is-active { border-color: var(--music-blue); color: #fff; background: var(--music-blue); }

.model-definition {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0 0.9rem;
}

.model-definition p { display: flex; align-items: baseline; gap: 0.8rem; margin: 0; color: var(--body); font-size: 0.68rem; line-height: 1.55; }
.definition-tag { flex: 0 0 auto; color: var(--accent); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; }
.definition-formula { color: var(--ink); font-family: var(--display); font-size: clamp(0.9rem, 1.5vw, 1.15rem); font-weight: 700; white-space: nowrap; }

.model-figure { margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.24); }
.plot-header { min-height: 37px; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--line); font-size: 0.52rem; }
.plot-header span:first-child { color: var(--accent); }
.plot-scroll { width: 100%; overflow-x: auto; }
#model-plot { display: block; width: 100%; min-width: 760px; height: auto; }
#model-plot text { font-family: var(--mono); }
#model-plot .plot-grid { stroke: var(--music-grid); stroke-width: 1; }
#model-plot .plot-axis { stroke: var(--line-strong); stroke-width: 1; }
#model-plot .plot-tick { fill: var(--subtle); font-size: 11px; }
#model-plot .plot-row-label { fill: var(--subtle); font-size: 10px; font-weight: 700; letter-spacing: 0.07em; }
#model-plot .plot-wave { fill: none; stroke: var(--music-cyan); stroke-width: 2; vector-effect: non-scaling-stroke; }
#model-plot .plot-envelope { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
#model-plot .plot-zero { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
#model-plot .plot-observed { fill: var(--music-rust); stroke: var(--paper); stroke-width: 2; vector-effect: non-scaling-stroke; }
#model-plot .plot-candidate { fill: var(--music-purple); stroke: var(--paper); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
#model-plot .plot-retained { fill: var(--music-blue); stroke: var(--paper); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
#model-plot .plot-filtered { fill: var(--line-strong); stroke: var(--paper); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
#model-plot .plot-owens { fill: var(--music-green); stroke: var(--paper); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
#model-plot .plot-index { fill: var(--ink); font-size: 9px; font-weight: 800; }
#model-plot .plot-model-label { fill: var(--body); font-size: 10px; }
#model-plot .plot-subtle { fill: var(--subtle); font-size: 9px; }
#model-plot .plot-mark { cursor: help; }
.plot-caption { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.7rem; color: var(--subtle); font-size: 0.56rem; line-height: 1.5; }
.plot-caption span:last-child { text-align: right; font-size: 0.5rem; font-weight: 800; letter-spacing: 0.06em; }

.model-readouts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.2rem; padding: 1.2rem 0 1.4rem; border-bottom: 1px solid var(--line); }
.readout-item { display: grid; gap: 0.25rem; min-width: 0; }
.readout-item span { color: var(--subtle); font-size: 0.52rem; font-weight: 800; letter-spacing: 0.07em; }
.readout-item strong { color: var(--ink); font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.readout-item small { color: var(--body); font-size: 0.56rem; line-height: 1.4; }

.evidence-block { padding-top: 1.7rem; }
.evidence-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 0.5rem; }
.evidence-heading .eyebrow { margin-bottom: 0.4rem; }
.evidence-heading h3 { margin: 0; color: var(--ink); font-family: var(--display); font-size: 1.4rem; letter-spacing: -0.025em; }
.evidence-heading > p { max-width: 470px; margin: 0; color: var(--subtle); font-size: 0.59rem; line-height: 1.55; text-align: right; }
.music-page .table { width: 100%; border-collapse: collapse; color: var(--body); font-size: 0.62rem; text-align: left; }
.music-page .table th { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line-strong); color: var(--subtle); font-size: 0.52rem; font-weight: 800; letter-spacing: 0.07em; white-space: nowrap; }
.music-page .table td { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.music-page .table td:first-child { color: var(--accent); font-weight: 800; }
.music-page .table tr.is-miss td:last-child { color: var(--music-rust); font-weight: 800; }
.music-page .table tr.is-hit td:last-child { color: var(--music-green); font-weight: 700; }

.rotation-section { padding-bottom: 0.25rem; }
.rotation-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,0.65fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.circle-controls { display: grid; grid-template-columns: minmax(190px,1fr) minmax(180px,0.8fr); gap: 1.4rem; align-items: end; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); }
.circle-figure { margin: 0; }
#circle-plot { display: block; width: 100%; max-height: 390px; }
#circle-plot .circle-outline { fill: rgba(255,255,255,0.32); stroke: var(--line-strong); stroke-width: 1.2; }
#circle-plot .circle-cross { stroke: var(--music-grid); stroke-width: 1; }
#circle-plot .gap-arc { fill: none; stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#circle-plot .gap-arc.gap-short { stroke: var(--music-cyan); }
#circle-plot .gap-arc.gap-mid { stroke: var(--music-purple); }
#circle-plot .gap-arc.gap-long { stroke: var(--music-rust); }
#circle-plot .circle-point { fill: var(--music-blue); stroke: var(--paper); stroke-width: 2; vector-effect: non-scaling-stroke; }
#circle-plot .circle-origin { fill: var(--music-rust); stroke: var(--paper); stroke-width: 2; }
#circle-plot .circle-center { fill: var(--subtle); }
#circle-plot .circle-label { fill: var(--subtle); font-family: var(--mono); font-size: 10px; }
#circle-plot .point-label { fill: var(--ink); font-family: var(--mono); font-size: 9px; font-weight: 700; }
#circle-plot .point-mark { cursor: help; }
.circle-figure figcaption { padding: 0.15rem 0 0.8rem; color: var(--subtle); font-size: 0.57rem; text-align: center; }
.point-coordinates { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.25rem 0.7rem; padding: 0.1rem 0.5rem 0.5rem; color: var(--subtle); font-size: 0.5rem; font-variant-numeric: tabular-nums; }
.gap-reading { align-self: stretch; padding: 1.2rem 0 0.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gap-reading > .eyebrow { margin-bottom: 0.6rem; }
.gap-reading h3 { margin: 0; color: var(--ink); font-family: var(--display); font-size: 1.65rem; letter-spacing: -0.03em; }
.gap-intro { margin: 0.55rem 0 1rem; color: var(--body); font-size: 0.65rem; line-height: 1.6; }
.gap-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.gap-list li { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; gap: 0.55rem; align-items: center; color: var(--body); font-size: 0.61rem; font-variant-numeric: tabular-nums; }
.gap-swatch { width: 10px; height: 3px; background: var(--music-cyan); }
.gap-swatch.gap-mid { background: var(--music-purple); }
.gap-swatch.gap-long { background: var(--music-rust); }
.gap-list strong { color: var(--ink); font-weight: 700; }
.theorem-note { margin: 1.1rem 0; padding-left: 0.75rem; border-left: 2px solid var(--music-cyan); color: var(--body); font-size: 0.61rem; line-height: 1.65; }
.point-sample { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0; border-top: 1px solid var(--line); color: var(--subtle); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.06em; }
.point-sample strong { color: var(--accent); font-size: 0.58rem; text-align: right; }
.cutoff-note { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 1rem; align-items: center; margin-top: 1.8rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cutoff-symbol { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-strong); color: var(--accent); font-family: var(--display); font-size: 1.3rem; font-weight: 700; }
.cutoff-note p { margin: 0; color: var(--body); font-size: 0.66rem; line-height: 1.65; }
.cutoff-note strong { color: var(--ink); }

.geometry-section { padding-bottom: 0.25rem; }
.geometry-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.7rem, 4.5vw, 4rem); }
.geometry-experiment { min-width: 0; padding: 1rem 0 1.1rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.experiment-heading { color: var(--accent); font-size: 0.53rem; }
.experiment-copy { min-height: 3.4rem; margin: 0.8rem 0 0.25rem; color: var(--body); font-size: 0.65rem; line-height: 1.65; }
#triangle-plot, #projection-plot { display: block; width: 100%; height: auto; }
#triangle-plot text, #projection-plot text { font-family: var(--mono); }
#triangle-plot .triangle-edge { fill: rgba(45,135,189,0.07); stroke: var(--music-blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
#triangle-plot .triangle-base { stroke: var(--music-rust); stroke-width: 2; vector-effect: non-scaling-stroke; }
#triangle-plot .diagram-guide, #projection-plot .diagram-guide { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
#triangle-plot .diagram-label, #projection-plot .diagram-label { fill: var(--body); font-size: 11px; }
#triangle-plot .diagram-value, #projection-plot .diagram-value { fill: var(--accent); font-size: 10px; font-weight: 700; }
#projection-plot .unit-circle { fill: rgba(255,255,255,0.28); stroke: var(--line-strong); stroke-width: 1.2; }
#projection-plot .radius-line { stroke: var(--music-blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
#projection-plot .projection-line { stroke: var(--music-rust); stroke-width: 2; vector-effect: non-scaling-stroke; }
#projection-plot .radius-dot { fill: var(--music-blue); }
.geometry-range { margin-top: 0.3rem; }
.geometry-values { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.7rem; margin-top: 0.95rem; padding: 0.75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.geometry-values div { display: grid; gap: 0.3rem; }
.geometry-values span { color: var(--subtle); font-size: 0.49rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.35; }
.geometry-values span small { display: block; font-size: 0.48rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.geometry-values strong { color: var(--ink); font-size: clamp(0.75rem, 1.25vw, 1rem); font-variant-numeric: tabular-nums; }
.experiment-foot { margin: 0.7rem 0 0; color: var(--subtle); font-size: 0.57rem; line-height: 1.6; }

.reading-section { padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.reading-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.3rem; }
.reading-grid article { display: grid; grid-template-columns: 25px minmax(0,1fr); column-gap: 0.5rem; align-content: start; padding-top: 0.8rem; border-top: 1px solid var(--line-strong); }
.reading-number { grid-row: span 2; color: var(--accent); font-size: 0.58rem; font-weight: 800; }
.reading-grid h3 { margin: 0 0 0.45rem; color: var(--ink); font-family: var(--display); font-size: 1.08rem; letter-spacing: -0.02em; }
.reading-grid p { grid-column: 2; margin: 0; color: var(--body); font-size: 0.6rem; line-height: 1.65; }
.source-line { display: grid; grid-template-columns: 70px minmax(0,1fr) auto; gap: 1rem; align-items: start; margin-top: 2rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.source-line > span { color: var(--accent); font-size: 0.54rem; font-weight: 800; letter-spacing: 0.08em; }
.source-line p { margin: 0; color: var(--body); font-size: 0.6rem; line-height: 1.6; }
.source-line a { color: var(--accent); font-size: 0.52rem; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; }
.music-footer { min-height: 76px; border-bottom: 0; }
.music-footer a { color: var(--accent); font-size: 0.57rem; font-weight: 800; letter-spacing: 0.07em; }
.music-footer p { margin: 0; color: var(--subtle); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.07em; }

@media (max-width: 940px) {
  .music-hero { grid-template-columns: minmax(0,1fr) minmax(320px,0.9fr); gap: 2.5rem; }
  .music-nav { gap: 0.8rem; }
  .music-nav a { font-size: 0.52rem; }
  .control-deck { grid-template-columns: minmax(200px,1fr) minmax(180px,0.8fr); }
  .model-field { grid-column: 1 / -1; }
  .model-switch { display: grid; grid-template-columns: repeat(3, 1fr); }
  .model-choice { white-space: nowrap; }
  .reading-grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 1.5rem; }
}

@media (max-width: 680px) {
  .music-page .page-shell { width: min(100% - 32px, 1120px); }
  .music-header { flex-wrap: wrap; justify-content: space-between; padding: 0.6rem 0; }
  .music-nav { order: 3; width: 100%; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0 0.1rem; }
  .music-nav a { font-size: 0.48rem; }
  .header-index { font-size: 0.52rem; }
  .music-hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 3.3rem; }
  .music-hero-copy h1 { font-size: clamp(3.25rem, 15vw, 5.2rem); }
  .hero-equation { padding: 0.9rem 0.8rem 0.65rem; }
  .equation-main { min-height: 80px; font-size: clamp(1.2rem, 6vw, 1.8rem); }
  .equation-legend { flex-wrap: wrap; font-size: 0.49rem; }
  .music-hero-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); font-size: 0.49rem; }
  .music-section-heading h2 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .control-deck { grid-template-columns: 1fr; gap: 1rem; }
  .model-field { grid-column: auto; }
  .model-switch { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .model-choice { padding: 0.5rem 0.3rem; font-size: 0.48rem; }
  .model-definition { align-items: start; flex-direction: column; gap: 0.4rem; }
  .model-definition p { align-items: start; flex-direction: column; gap: 0.25rem; }
  .definition-formula { white-space: normal; }
  .plot-header { align-items: start; flex-direction: column; gap: 0.2rem; padding: 0.5rem 0.65rem; }
  .plot-caption { flex-direction: column; gap: 0.2rem; }
  .plot-caption span:last-child { text-align: left; }
  .model-readouts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
  .evidence-heading { align-items: start; flex-direction: column; gap: 0.5rem; }
  .evidence-heading > p { text-align: left; }
  .rotation-layout { grid-template-columns: 1fr; gap: 1.2rem; }
  .circle-controls { grid-template-columns: 1fr; gap: 1rem; }
  .gap-reading { padding-top: 0.9rem; }
  .geometry-grid { grid-template-columns: 1fr; gap: 2rem; }
  .experiment-copy { min-height: 0; }
  .reading-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .source-line { grid-template-columns: 50px minmax(0,1fr); }
  .source-line a { grid-column: 2; }
  .music-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Long-form study chapters */
.argument-rail { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.argument-rail a { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 0.16rem 0.6rem; align-content: start; padding: 0.9rem 0.7rem 1rem 0; color: inherit; }
.argument-rail a + a { padding-left: 0.9rem; border-left: 1px solid var(--line); }
.argument-rail a > span { grid-row: span 2; color: var(--accent); font-size: 0.56rem; font-weight: 800; }
.argument-rail strong { color: var(--ink); font-family: var(--display); font-size: 0.95rem; }
.argument-rail small { color: var(--subtle); font-size: 0.54rem; }
.argument-rail a:hover strong, .argument-rail a:focus-visible strong { color: var(--accent); }

.study-chapter { padding: clamp(4rem,7vw,6.4rem) 0 0; scroll-margin-top: 1rem; }
.chapter-heading { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(280px,1.2fr); column-gap: clamp(1.5rem,5vw,5rem); align-items: start; margin-bottom: 1.6rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.chapter-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 0.6rem; }
.chapter-heading h2 { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(1.9rem,4vw,3.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
.chapter-heading > p:last-child { max-width: 630px; margin: 0.15rem 0 0; color: var(--body); font-size: 0.76rem; line-height: 1.8; }
.compact-heading { display: block; margin: 0 0 1rem; padding: 0; border: 0; }
.compact-heading h3 { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(1.35rem,2vw,1.9rem); letter-spacing: -0.03em; }
.compact-heading > p:last-child { max-width: 700px; margin-top: 0.55rem; font-size: 0.68rem; }
.step-label { color: var(--accent); font-size: 0.52rem; font-weight: 800; letter-spacing: 0.09em; }
.derivation-grid, .approximation-layout { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: clamp(1.5rem,4vw,4rem); align-items: stretch; }
.derivation-copy, .angle-workbench, .approximation-copy, .mini-chart-figure { min-width: 0; padding: 1rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.derivation-copy h3, .approximation-copy h3 { margin: 0.55rem 0 0.6rem; color: var(--ink); font-family: var(--display); font-size: 1.35rem; letter-spacing: -0.025em; }
.derivation-copy > p, .approximation-copy > p { margin: 0; color: var(--body); font-size: 0.67rem; line-height: 1.72; }
.equation-stack { display: grid; gap: 0; margin-top: 1rem; border-top: 1px solid var(--line); }
.equation-stack > div { display: grid; grid-template-columns: minmax(100px,0.45fr) minmax(0,1fr); gap: 0.8rem; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.equation-stack span, .scale-result > div > span { color: var(--subtle); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.07em; }
.equation-stack strong { color: var(--ink); font-family: var(--display); font-size: 1rem; font-weight: 700; }
.angle-workbench { padding: 1rem; background: rgba(255,255,255,0.32); }
.chapter-small-copy { color: var(--body); font-size: 0.65rem; line-height: 1.7; }
#angle-match-plot { display: block; width: 100%; margin: 0.25rem 0 0.5rem; }
#angle-match-plot .angle-dial { fill: rgba(255,255,255,0.38); stroke: var(--line-strong); stroke-width: 1; }
#angle-match-plot .angle-tick { stroke: var(--line-strong); stroke-width: 1; }
#angle-match-plot .angle-ray { stroke-width: 1.4; vector-effect: non-scaling-stroke; }
#angle-match-plot .angle-ray-selected { stroke: var(--music-blue); stroke-width: 2; }
#angle-match-plot .angle-ray-a1 { stroke: var(--music-rust); stroke-dasharray: 3 3; }
#angle-match-plot .angle-ray-a2 { stroke: var(--music-purple); stroke-dasharray: 3 3; }
#angle-match-plot .angle-point-selected { fill: var(--music-blue); }
#angle-match-plot .angle-point-a1 { fill: var(--music-rust); }
#angle-match-plot .angle-point-a2 { fill: var(--music-purple); }
#angle-match-plot .angle-center { fill: var(--ink); }
#angle-match-plot .angle-axis-label { fill: var(--subtle); font-family: var(--mono); font-size: 10px; }
#angle-match-plot .angle-dial-label { fill: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 800; }
.angle-distances { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.angle-distances div { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--subtle); font-size: 0.55rem; }
.angle-distances strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.scale-result { display: grid; grid-template-columns: 1.1fr 0.8fr 0.7fr minmax(180px,1.3fr); gap: 1rem; align-items: center; margin-top: 1.5rem; padding: 1rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.scale-result > div { display: grid; gap: 0.35rem; }
.scale-result > div > strong { color: var(--ink); font-family: var(--display); font-size: clamp(0.92rem,1.5vw,1.25rem); letter-spacing: -0.02em; }
.scale-result > p { margin: 0; color: var(--body); font-size: 0.59rem; line-height: 1.6; }
.single-scale { grid-template-columns: 1.3fr 0.8fr; margin-top: 1rem; }
.single-scale > p { grid-column: 1 / -1; }
.sequence-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(250px,0.65fr); gap: clamp(1.6rem,4vw,4rem); align-items: center; margin-top: 2rem; }
.sequence-figure { min-width: 0; margin: 0; padding: 0.8rem 0 0.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.23); }
.mini-figure-heading { display: flex; justify-content: space-between; gap: 1rem; color: var(--accent); font-size: 0.53rem; font-weight: 800; letter-spacing: 0.08em; }
#owens-story-plot { display: block; width: 100%; }
#owens-story-plot .sequence-axis { stroke: var(--line-strong); stroke-width: 1; }
#owens-story-plot .sequence-guide { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
#owens-story-plot .sequence-curve { fill: none; stroke: var(--music-green); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
#owens-story-plot .sequence-dot { fill: var(--music-green); stroke: var(--paper); stroke-width: 2; }
#owens-story-plot .sequence-label { fill: var(--ink); font-family: var(--mono); font-size: 10px; }
#owens-story-plot .sequence-tick { fill: var(--subtle); font-family: var(--mono); font-size: 10px; }
.sequence-figure figcaption, .mini-chart-figure figcaption { padding: 0.55rem 0; color: var(--subtle); font-size: 0.56rem; line-height: 1.55; }
.recurrence-note { padding: 1rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.recurrence-note h3 { margin: 0.5rem 0; color: var(--ink); font-family: var(--display); font-size: 1.28rem; letter-spacing: -0.03em; }
.recurrence-note p { color: var(--body); font-size: 0.65rem; line-height: 1.72; }
.recurrence-equation { margin: 0.7rem 0; padding: 0.75rem 0.9rem; border-left: 2px solid var(--music-green); color: var(--body); font-family: var(--display); font-size: 1rem; line-height: 1.7; }
.recurrence-equation strong { color: var(--ink); font-size: 1.25rem; }
.boundary-examples { display: grid; grid-template-columns: 220px minmax(0,1fr) auto; gap: 1rem; align-items: center; margin-top: 1.2rem; padding: 0.8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.boundary-examples p { margin: 0; color: var(--body); font-size: 0.62rem; line-height: 1.65; }
.boundary-examples a { color: var(--accent); font-size: 0.53rem; font-weight: 800; white-space: nowrap; }

.approximation-layout { grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); align-items: stretch; }
.mini-chart-figure { margin: 0; background: rgba(255,255,255,0.23); }
.mini-chart-figure > .mini-figure-heading { padding: 0 0.7rem; }
#nearby-sine-plot { display: block; width: 100%; }
#nearby-sine-plot .nearby-grid { stroke: var(--music-grid); stroke-width: 1; }
#nearby-sine-plot .nearby-axis { stroke: var(--line-strong); stroke-width: 1; }
#nearby-sine-plot .nearby-curve { fill: none; stroke: var(--music-cyan); stroke-width: 2.3; vector-effect: non-scaling-stroke; }
#nearby-sine-plot .nearby-marker { stroke-width: 1; stroke-dasharray: 4 4; }
#nearby-sine-plot .pi-marker { stroke: var(--music-green); }
#nearby-sine-plot .phi-marker { stroke: var(--music-rust); }
#nearby-sine-plot .pi-dot { fill: var(--music-green); }
#nearby-sine-plot .phi-dot { fill: var(--music-rust); }
#nearby-sine-plot .nearby-tick, #nearby-sine-plot .nearby-axis-label { fill: var(--subtle); font-family: var(--mono); font-size: 10px; }
#nearby-sine-plot .nearby-label { font-family: var(--mono); font-size: 12px; font-weight: 800; }
#nearby-sine-plot .pi-label { fill: var(--music-green); }
#nearby-sine-plot .phi-label { fill: var(--music-rust); }
.candidate-workbench { margin-top: 2rem; padding: 1rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.candidate-workbench-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.candidate-workbench-heading h3 { margin: 0.4rem 0 0; color: var(--ink); font-family: var(--display); font-size: 1.65rem; letter-spacing: -0.03em; }
.candidate-switch { flex: 0 0 auto; }
.candidate-view { min-height: 35px; padding: 0.45rem 0.65rem; border: 1px solid var(--line); border-radius: 0; color: var(--body); background: transparent; font-family: var(--mono); font-size: 0.51rem; font-weight: 800; letter-spacing: 0.06em; cursor: pointer; }
.candidate-view:hover { border-color: var(--line-strong); color: var(--accent); }
.candidate-view.is-active { border-color: var(--music-blue); color: #fff; background: var(--music-blue); }
.candidate-workbench > .chapter-small-copy { margin: 0.6rem 0 0.3rem; }
.candidate-formula { padding: 0.5rem 0.7rem; color: var(--ink); background: rgba(255,255,255,0.43); font-family: var(--display); font-size: 1.03rem; font-weight: 700; }
.candidate-chart { padding-top: 0.35rem; border-top: 0; }
#candidate-generation-plot { display: block; width: 100%; }
#candidate-generation-plot .candidate-grid { stroke: var(--music-grid); stroke-width: 1; }
#candidate-generation-plot .candidate-zero { stroke: var(--line-strong); }
#candidate-generation-plot .candidate-wave { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
#candidate-generation-plot .candidate-sine { stroke: var(--music-blue); }
#candidate-generation-plot .candidate-cosine { stroke: var(--music-purple); stroke-dasharray: 5 3; }
#candidate-generation-plot .candidate-four { stroke: var(--music-cyan); }
#candidate-generation-plot .candidate-mark { stroke: var(--paper); stroke-width: 1.5; }
#candidate-generation-plot .candidate-seed { fill: var(--music-rust); }
#candidate-generation-plot .candidate-kept { fill: var(--music-blue); }
#candidate-generation-plot .candidate-raw { fill: var(--line-strong); }
#candidate-generation-plot .candidate-index { fill: var(--ink); font-family: var(--mono); font-size: 9px; font-weight: 800; }
#candidate-generation-plot .candidate-tick, #candidate-generation-plot .candidate-axis-label { fill: var(--subtle); font-family: var(--mono); font-size: 10px; }
.candidate-method-note { padding: 0.8rem 0; border-top: 1px solid var(--line); color: var(--body); font-size: 0.63rem; line-height: 1.7; }
.candidate-method-note strong { color: var(--ink); }

.formal-derivation { margin: 0 0 1.2rem; padding: 1rem; border: 1px solid var(--line); background: rgba(255,255,255,0.34); }
.formal-heading { display: flex; justify-content: space-between; gap: 1rem; color: var(--accent); font-size: 0.53rem; font-weight: 800; letter-spacing: 0.08em; }
.formal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.9rem; margin-top: 0.75rem; }
.formal-equation { display: grid; align-content: start; gap: 0.5rem; padding: 0.7rem 0; border-top: 1px solid var(--line-strong); }
.formal-equation > span { color: var(--subtle); font-size: 0.49rem; font-weight: 800; letter-spacing: 0.07em; }
.formal-equation > strong { color: var(--ink); font-family: var(--display); font-size: clamp(0.87rem,1.4vw,1.15rem); line-height: 1.4; overflow-wrap: anywhere; }
.formal-equation > strong sup { font-size: 0.65em; }
.formal-equation small { color: var(--body); font-size: 0.56rem; line-height: 1.5; }
.formal-result { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 1.2rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.formal-parameters { display: grid; grid-template-columns: 95px 1fr; align-content: start; gap: 0.48rem 0.65rem; }
.formal-parameters span, .ordered-candidates > span { color: var(--subtle); font-size: 0.49rem; font-weight: 800; letter-spacing: 0.05em; }
.formal-parameters strong { color: var(--ink); font-size: 0.63rem; font-variant-numeric: tabular-nums; }
.ordered-candidates > span { display: block; margin-bottom: 0.55rem; }
#ordered-root-list { display: flex; flex-wrap: wrap; gap: 0.42rem; }
.ordered-candidate { display: grid; grid-template-columns: auto auto; gap: 0.12rem 0.45rem; min-width: 72px; padding: 0.37rem 0.45rem; border-left: 2px solid var(--line-strong); background: rgba(255,255,255,0.42); }
.ordered-candidate.is-retained { border-color: var(--music-blue); }
.ordered-candidate b { color: var(--accent); font-size: 0.52rem; }
.ordered-candidate strong { color: var(--ink); font-size: 0.57rem; font-variant-numeric: tabular-nums; }
.ordered-candidate small { grid-column: 1 / -1; color: var(--subtle); font-size: 0.46rem; font-weight: 800; text-transform: uppercase; }
.ordered-candidate.is-retained small { color: var(--music-blue); }
.formal-explanation { margin: 0.85rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--line); color: var(--body); font-size: 0.61rem; line-height: 1.65; }
.control-deck { grid-template-columns: minmax(190px,1.1fr) minmax(160px,0.9fr) minmax(280px,1.3fr) minmax(205px,1.05fr) minmax(155px,0.85fr); gap: 1rem; }
.model-choice { padding-inline: 0.52rem; }
.offset-definition { margin: 0.8rem 0; color: var(--body); font-size: 0.62rem; line-height: 1.7; }
.offset-definition strong { color: var(--ink); }
.precision-panel { display: grid; grid-template-columns: minmax(210px,1.5fr) repeat(4,minmax(110px,0.7fr)); gap: 0.9rem 1.2rem; align-items: center; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line-strong); background: rgba(255,255,255,0.43); }
.precision-intro .step-label { display: block; }
.precision-intro p, .precision-caveat { margin: 0.45rem 0 0; color: var(--body); font-size: 0.59rem; line-height: 1.6; }
.precision-stat { display: grid; gap: 0.3rem; }
.precision-stat > span { color: var(--subtle); font-size: 0.48rem; font-weight: 800; letter-spacing: 0.06em; }
.precision-stat > strong { color: var(--ink); font-family: var(--display); font-size: clamp(1.15rem,2vw,1.65rem); font-variant-numeric: tabular-nums; letter-spacing: -0.025em; white-space: nowrap; }
.precision-stat > small { color: var(--subtle); font-size: 0.49rem; }
.precision-caveat { grid-column: 1 / -1; padding-top: 0.65rem; border-top: 1px solid var(--line); }
.precision-panel + .comparison-figure { margin-top: 1rem; }
.comparison-figure { margin: 1.2rem 0 0; padding: 0.9rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.34); }
.comparison-legend { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; color: var(--subtle); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.06em; }
.metric-key { display: inline-block; width: 14px; height: 3px; margin-right: 0.4rem; vertical-align: middle; background: var(--music-blue); }
.metric-key.rounded { background: var(--music-rust); }
.comparison-bars { display: grid; gap: 0.6rem; margin-top: 0.8rem; }
.comparison-row { display: grid; grid-template-columns: minmax(180px,0.65fr) minmax(0,1fr) minmax(0,1fr); gap: 0.75rem; align-items: center; padding: 0.45rem 0; border-top: 1px solid var(--line); }
.comparison-row:last-child { border-bottom: 1px solid var(--line); }
.comparison-row:last-child .comparison-name { color: var(--ink); font-weight: 800; }
.comparison-name { color: var(--body); font-size: 0.6rem; font-weight: 700; }
.comparison-measure { display: grid; grid-template-columns: 10px minmax(60px,1fr) auto; gap: 0.45rem; align-items: center; }
.comparison-measure > span { color: var(--subtle); font-size: 0.54rem; font-weight: 800; }
.comparison-track { height: 7px; overflow: hidden; background: rgba(29,95,150,0.11); }
.comparison-fill { display: block; height: 100%; min-width: 1px; background: var(--music-blue); }
.comparison-fill.rounded { background: var(--music-rust); }
.comparison-measure > strong { min-width: 85px; color: var(--ink); font-size: 0.55rem; font-variant-numeric: tabular-nums; text-align: right; }
.comparison-caption { margin: 0.65rem 0 0; color: var(--subtle); font-size: 0.56rem; line-height: 1.6; }
.score-results-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(1.5rem,4vw,4rem); margin-top: 1.7rem; }
.result-note { padding: 1rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.result-note h3 { margin: 0.5rem 0; color: var(--ink); font-family: var(--display); font-size: 1.35rem; letter-spacing: -0.03em; }
.result-note > p { color: var(--body); font-size: 0.65rem; line-height: 1.7; }
.score-result-list { margin-top: 0.85rem; border-top: 1px solid var(--line); }
.score-result-list div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.59rem; }
.score-result-list span { color: var(--body); }
.score-result-list strong { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.uncertainty-note > p strong { color: var(--ink); }
.interval-rail { position: relative; height: 68px; margin: 1rem 0 0.3rem; }
.interval-axis { position: absolute; top: 25px; left: 0; right: 0; height: 1px; background: var(--line-strong); }
.interval-span { position: absolute; top: 21px; left: 39.3%; width: 32.5%; height: 9px; background: rgba(45,135,189,0.3); }
.interval-point { position: absolute; top: 16px; left: calc(56.3% - 1px); width: 2px; height: 18px; background: var(--music-blue); }
.interval-label { position: absolute; top: 40px; color: var(--subtle); font-size: 0.52rem; }
.interval-label.low { left: calc(39.3% - 20px); }
.interval-label.high { left: calc(71.8% - 20px); }
.interval-rail > strong { position: absolute; top: 0; left: calc(56.3% - 22px); color: var(--accent); font-size: 0.61rem; }
.boundary-reading-block { margin-top: 2rem; padding: 1rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.boundary-reading-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(1.4rem,4vw,4rem); margin-top: 1rem; }
.boundary-reading-grid article h3 { margin: 0 0 0.6rem; color: var(--ink); font-family: var(--display); font-size: 1.25rem; }
.boundary-reading-grid ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.boundary-reading-grid li { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 0.55rem; align-items: baseline; padding: 0.55rem 0.4rem 0.55rem 0; border-bottom: 1px solid var(--line); }
.boundary-reading-grid li b { color: var(--accent); font-size: 0.58rem; font-variant-numeric: tabular-nums; }
.boundary-reading-grid li span { color: var(--body); font-size: 0.57rem; line-height: 1.55; }
.boundary-reading-block > .chapter-small-copy { max-width: 850px; margin: 1rem 0 0; }
.method-log { margin-top: 2rem; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.method-log ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.6rem 1.3rem; margin: 0.75rem 0 0; padding: 0; list-style: none; counter-reset: paper-step; }
.method-log li { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 0.5rem; align-content: start; padding: 0.55rem 0; border-top: 1px solid var(--line); counter-increment: paper-step; }
.method-log li::before { content: "0" counter(paper-step); color: var(--accent); font-size: 0.51rem; font-weight: 800; }
.method-log li b { color: var(--ink); font-size: 0.61rem; }
.method-log li span { grid-column: 2; color: var(--body); font-size: 0.56rem; line-height: 1.55; }

.pitch-bridge { margin-top: 2rem; padding: 1.2rem 0 0; border-top: 1px solid var(--line-strong); }
.log-pipeline { display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr); gap: 0.7rem; align-items: center; }
.log-pipeline > div { display: grid; gap: 0.4rem; min-height: 86px; align-content: center; padding: 0.75rem; border: 1px solid var(--line); background: rgba(255,255,255,0.33); }
.log-pipeline > div > span { color: var(--subtle); font-size: 0.48rem; font-weight: 800; letter-spacing: 0.07em; }
.log-pipeline strong { color: var(--ink); font-family: var(--display); font-size: 1.05rem; }
.log-pipeline small { color: var(--body); font-size: 0.54rem; }
.pipeline-arrow { color: var(--accent); font-size: 1.1rem; text-align: center; }
.pitch-example { display: grid; grid-template-columns: minmax(230px,0.8fr) minmax(0,1.2fr); gap: 1.4rem; align-items: center; margin-top: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pitch-example-math > span { color: var(--accent); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.07em; }
.pitch-example-math > strong { display: block; margin: 0.45rem 0; color: var(--ink); font-family: var(--display); font-size: 1.35rem; }
.pitch-example-math > p, .pitch-caveat { margin: 0; color: var(--body); font-size: 0.6rem; line-height: 1.65; }
.pitch-names { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0.3rem; }
.pitch-names > span { display: grid; gap: 0.14rem; padding: 0.35rem 0.45rem; border-left: 1px solid var(--line-strong); background: rgba(255,255,255,0.31); }
.pitch-names b { color: var(--subtle); font-size: 0.47rem; }
.pitch-names strong { color: var(--accent); font-family: var(--display); font-size: 0.88rem; }
.pitch-names small { color: var(--body); font-size: 0.49rem; font-variant-numeric: tabular-nums; }
.pitch-caveat { max-width: 950px; margin-top: 0.85rem; }

.practice-chapter { padding-bottom: 1rem; }
.practice-chapter .chapter-heading h2 { color: var(--accent); }
.reading-section .music-section-heading { display: block; }

.correlation-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.65rem 1.2rem; margin-top: 1.1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.correlation-strip > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0.7rem; align-items: baseline; }
.correlation-strip > div > span { color: var(--subtle); font-size: 0.51rem; font-weight: 800; letter-spacing: 0.04em; }
.correlation-strip > div > strong { color: var(--accent); font-family: var(--display); font-size: 0.77rem; white-space: nowrap; }
.correlation-strip > p { grid-column: 1 / -1; max-width: 920px; margin: 0; color: var(--body); font-size: 0.58rem; line-height: 1.6; }
.plot-legend { display: flex; flex-wrap: wrap; gap: 0.55rem 1.1rem; margin: 0.55rem 0 0.2rem; color: var(--subtle); font-size: 0.48rem; font-weight: 800; letter-spacing: 0.05em; }
.plot-legend > span { display: inline-flex; gap: 0.4rem; align-items: center; }
.plot-legend-mark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.plot-legend-mark.observed { background: var(--music-rust); }
.plot-legend-mark.retained { background: var(--music-blue); }
.plot-legend-mark.filtered { background: var(--subtle); }
.plot-legend-mark.owens { border: 1px solid var(--music-rust); background: var(--paper); }

@media (max-width: 1050px) {
  .music-nav { gap: 0.52rem; }
  .music-nav a { font-size: 0.47rem; }
  .control-deck { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .model-field { grid-column: auto; }
  .comparison-field { grid-column: 1 / 3; }
  .tolerance-field { grid-column: 3; }
  .precision-panel { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .precision-intro { grid-column: 1 / -1; }
  .precision-caveat { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .argument-rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .argument-rail a:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .argument-rail a:nth-child(4) { border-top: 1px solid var(--line); }
  .chapter-heading { grid-template-columns: 1fr; row-gap: 0.7rem; }
  .chapter-heading .eyebrow { grid-column: auto; }
  .derivation-grid, .approximation-layout, .sequence-layout, .score-results-grid, .boundary-reading-grid { grid-template-columns: 1fr; }
  .scale-result { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .scale-result > p { grid-column: 1 / -1; }
  .single-scale { grid-template-columns: 1fr; }
  .formal-grid { grid-template-columns: 1fr; gap: 0; }
  .formal-result { grid-template-columns: 1fr; }
  .control-deck { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .model-field { grid-column: 1 / -1; }
  .comparison-field { grid-column: auto; }
  .tolerance-field { grid-column: auto; }
  .precision-panel { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .precision-intro, .precision-caveat { grid-column: 1 / -1; }
  .comparison-row { grid-template-columns: minmax(130px,0.7fr) minmax(0,1fr); }
  .comparison-row .comparison-measure:last-child { grid-column: 2; }
  .boundary-examples { grid-template-columns: 1fr; gap: 0.5rem; }
  .log-pipeline { grid-template-columns: 1fr; }
  .pipeline-arrow { transform: rotate(90deg); }
  .pitch-example { grid-template-columns: 1fr; }
  .method-log ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 520px) {
  .music-nav { justify-content: flex-start; overflow-x: auto; gap: 0.9rem; }
  .music-nav a { font-size: 0.48rem; }
  .control-deck { grid-template-columns: 1fr; }
  .model-field { grid-column: auto; }
  .correlation-strip { grid-template-columns: 1fr; }
  .correlation-strip > p { grid-column: auto; }
  .correlation-strip > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .argument-rail strong { font-size: 0.82rem; }
  .equation-stack > div { grid-template-columns: 1fr; gap: 0.22rem; }
  .scale-result { grid-template-columns: 1fr; }
  .comparison-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .comparison-row .comparison-measure:last-child { grid-column: auto; }
  .comparison-measure { grid-template-columns: 9px minmax(45px,1fr) auto; gap: 0.3rem; }
  .comparison-measure > strong { min-width: 75px; font-size: 0.49rem; }
  .boundary-reading-grid ul { grid-template-columns: 1fr; }
  .method-log ol { grid-template-columns: 1fr; }
  .precision-panel { padding: 0.75rem; gap: 0.75rem; }
  .precision-stat > strong { font-size: 1.2rem; }
  .pitch-names { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .candidate-workbench-heading { align-items: flex-start; flex-direction: column; }
  .candidate-switch { width: 100%; }
  .candidate-view { flex: 1; padding-inline: 0.35rem; font-size: 0.45rem; }
}

/* Paper edition: a restrained, monochrome typeset treatment based on the source PDF. */
.music-page {
  --ink: #111;
  --body: #252525;
  --subtle: #555;
  --paper: #fff;
  --surface: #fff;
  --surface-hi: #fff;
  --line: #c7c7c7;
  --line-strong: #444;
  --accent: #111;
  --accent-2: #333;
  --display: "Latin Modern Roman", "CMU Serif", "Computer Modern", "Times New Roman", serif;
  --mono: "Latin Modern Roman", "CMU Serif", "Times New Roman", serif;
  --subtle: #555;
  --body: #242424;
  --line-strong: #3b3b3b;
  --music-blue: #222;
  --music-cyan: #555;
  --music-rust: #777;
  --music-purple: #999;
  --music-green: #444;
  --music-grid: #e2e2e2;
  --music-wash: #fff;
  min-height: 100vh;
  color: var(--ink);
  background: #fff;
  background-image: none;
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.6;
}

.music-page html,
.music-page .page-shell,
.music-page main { background: #fff; }
.music-page .page-shell { width: min(960px, calc(100% - 48px)); }
.music-page .site-header,
.music-page footer { min-height: 54px; border-color: #bdbdbd; }
.music-page .music-header { gap: 1rem; }
.music-page .wordmark { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; }
.music-page .wordmark-mark { width: 24px; height: 24px; border-color: #111; color: #111; }
.music-page .header-index { color: #444; font-family: var(--mono); font-size: 0.65rem; font-weight: 400; letter-spacing: 0.03em; }
.music-page main { display: block; max-width: 790px; margin: 0 auto; }
.music-page main p { color: var(--body); font-family: var(--display); font-size: 0.94rem; font-weight: 400; line-height: 1.72; }
.music-page main h1,
.music-page main h2,
.music-page main h3,
.music-page main h4 { color: #111; font-family: var(--display); font-weight: 600; letter-spacing: 0; text-transform: none; }
.music-page .eyebrow,
.music-page .step-label,
.music-page .experiment-heading,
.music-page .mini-figure-heading,
.music-page .plot-header,
.music-page .equation-kicker,
.music-page .equation-foot,
.music-page .equation-legend { color: #444; font-family: var(--mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.035em; }

/* Cover leaf */
.music-page .music-hero {
  position: relative;
  display: flex;
  min-height: min(780px, max(600px, 78svh));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 5rem 0 6rem;
  text-align: center;
}
.music-page .cover-title-block { width: 100%; margin: auto; }
.music-page .cover-title-block > .eyebrow { margin: 0 0 2rem; color: #333; }
.music-page .music-hero-copy h1,
.music-page .cover-title-block h1 {
  max-width: 740px;
  margin: 0 auto 1.65rem;
  color: #111;
  font-family: var(--display);
  font-size: clamp(2rem, 5.2vw, 3rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.3;
  text-transform: uppercase;
}
.music-page .cover-subtitle { margin: 0 0 0.65rem; font-size: 1.14rem; }
.music-page .cover-description { margin: 0; font-size: 1rem; }
.music-page .cover-authors { display: grid; gap: 0.12rem; margin-top: 3.1rem; font-size: 1rem; }
.music-page .cover-date { margin: 1.2rem 0 0; font-size: 0.94rem; }
.music-page .cover-page-number { position: absolute; bottom: 1.1rem; left: 50%; color: #222; font-family: var(--display); font-size: 0.82rem; transform: translateX(-50%); }

/* Paper contents: nested entries and dotted leaders with the PDF's page references. */
.music-page .paper-contents { margin: 0 0 2.6rem; padding: 1.6rem 0 2rem; border-top: 1px solid #222; border-bottom: 1px solid #222; }
.music-page .contents-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.music-page .contents-heading h2 { margin: 0; font-size: 1.35rem; font-weight: 500; }
.music-page .contents-heading > span { color: #555; font-size: 0.78rem; font-style: italic; }
.music-page .contents-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.music-page .contents-list li { min-width: 0; margin: 0; }
.music-page .contents-list a { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; padding: 0.14rem 0; color: #111; font-size: 0.82rem; line-height: 1.42; text-decoration: none; }
.music-page .contents-list a:hover .contents-title,
.music-page .contents-list a:focus-visible .contents-title { text-decoration: underline; text-underline-offset: 0.16em; }
.music-page .contents-number { flex: 0 0 2.7rem; font-variant-numeric: tabular-nums; }
.music-page .contents-title { display: flex; flex: 1 1 auto; align-items: baseline; min-width: 0; gap: 0.38rem; }
.music-page .contents-title::after { flex: 1 1 1rem; min-width: 1rem; border-bottom: 1px dotted #777; content: ""; }
.music-page .contents-title small { color: #555; font-size: 0.72rem; font-style: italic; }
.music-page .contents-page { flex: 0 0 auto; min-width: 2.1rem; text-align: right; font-variant-numeric: tabular-nums; }
.music-page .contents-sub a { padding-left: 1.35rem; }
.music-page .contents-deep a { padding-left: 2.8rem; font-size: 0.77rem; }
.music-page .contents-source { margin-top: 0.38rem !important; padding-top: 0.38rem; border-top: 1px solid #bbb; }
.music-page .contents-note { margin: 0.85rem 0 0; color: #555; font-size: 0.75rem; font-style: italic; }

/* Numbered article sections, restrained rules, and readable prose. */
.music-page .intro-section,
.music-page .study-chapter,
.music-page .lab-section { padding-top: 2.4rem; scroll-margin-top: 1.3rem; }
.music-page .intro-section { padding-top: 0; margin-bottom: 0.4rem; }
.music-page .intro-section > .eyebrow,
.music-page .chapter-heading > .eyebrow,
.music-page .music-section-heading > .eyebrow { margin: 0 0 0.55rem; }
.music-page .intro-section h2,
.music-page .chapter-heading h2,
.music-page .music-section-heading h2 { margin: 0 0 0.65rem; font-size: 1.5rem; font-weight: 600; line-height: 1.25; }
.music-page .intro-section h2 { padding-bottom: 0.48rem; border-bottom: 1px solid #555; }
.music-page .intro-section p { max-width: 760px; margin: 0.75rem 0; text-align: justify; }
.music-page .chapter-heading,
.music-page .music-section-heading { display: block; margin-bottom: 1.35rem; padding-bottom: 0.7rem; border-bottom: 1px solid #555; }
.music-page .chapter-heading > p:last-child,
.music-page .music-section-heading > p:last-child { max-width: 760px; margin: 0.6rem 0 0; color: #242424; font-size: 0.94rem; line-height: 1.72; text-align: justify; }
.music-page .study-chapter h3,
.music-page .lab-section h3 { margin-top: 0.8rem; font-size: 1.05rem; font-weight: 600; line-height: 1.42; }
.music-page .study-chapter p,
.music-page .lab-section p { text-align: justify; }
.music-page .chapter-small-copy,
.music-page .experiment-copy,
.music-page .experiment-foot,
.music-page .section-deck,
.music-page .comparison-caption,
.music-page .candidate-method-note,
.music-page .offset-definition,
.music-page .formal-explanation,
.music-page .pitch-caveat { color: #292929; font-size: 0.88rem; line-height: 1.68; }
.music-page .section-deck { margin: 0.55rem 0 0; }
.music-page .study-chapter > *,
.music-page .lab-section > * { scroll-margin-top: 1rem; }
.music-page .derivation-grid,
.music-page .approximation-layout,
.music-page .sequence-layout,
.music-page .geometry-grid,
.music-page .score-results-grid { gap: 1.25rem; }

/* Display mathematics and figure captions echo the centered equations and captions in the paper. */
.music-page .equation-stack,
.music-page .scale-result,
.music-page .formal-derivation,
.music-page .formal-grid,
.music-page .formal-equation,
.music-page .formal-result,
.music-page .formal-parameters,
.music-page .candidate-formula,
.music-page .recurrence-equation,
.music-page .pitch-example,
.music-page .log-pipeline > div { color: #111; background: #fff; }
.music-page .equation-stack { margin-top: 0.8rem; border-top: 1px solid #555; }
.music-page .equation-stack > div { grid-template-columns: minmax(130px,0.6fr) minmax(0,1.4fr); padding: 0.55rem 0; border-bottom: 1px solid #ccc; }
.music-page .equation-stack strong,
.music-page .definition-formula,
.music-page .formal-equation > strong,
.music-page .candidate-formula,
.music-page .recurrence-equation,
.music-page .pitch-example-math > strong,
.music-page .log-pipeline strong { color: #111; font-family: var(--display); font-weight: 500; letter-spacing: 0; }
.music-page .scale-result,
.music-page .formal-derivation,
.music-page .formal-result,
.music-page .pitch-bridge,
.music-page .boundary-reading-block,
.music-page .method-log,
.music-page .correlation-strip { border-color: #666; }
.music-page .formal-equation { border-color: #777; }
.music-page .formal-equation > span,
.music-page .formal-equation small,
.music-page .formal-parameters span { color: #444; }
.music-page .formal-equation > strong { font-size: 1rem; }
.music-page .formal-parameters strong { color: #111; }
.music-page .formal-explanation { margin-top: 0.9rem; }
.music-page figure { margin-top: 1rem; margin-bottom: 1rem; }
.music-page main { counter-reset: paper-figure; }
.music-page figure { counter-increment: paper-figure; }
.music-page figure figcaption { padding: 0.45rem 0; color: #333; font-family: var(--display); font-size: 0.8rem; font-style: normal; line-height: 1.5; text-align: center; }
.music-page figure figcaption::before { content: "Figure " counter(paper-figure) ": "; font-style: normal; font-weight: 600; }
.music-page .plot-caption { color: #333; font-style: italic; }
.music-page .plot-caption > span:last-child { font-family: var(--mono); font-size: 0.63rem; font-style: normal; }
.music-page svg { max-width: 100%; }
.music-page svg text { font-family: var(--display); }
.music-page .recurrence-note { border-color: #aaa; }
.music-page .recurrence-equation { padding: 0.55rem 0.3rem; border-left: 0; text-align: center; }
.music-page .recurrence-equation strong { color: #111; }

/* Grayscale instruments and data displays; interactions and their live readouts remain intact. */
.music-page .control-field > span,
.music-page .readout-item > span,
.music-page .readout-item > small,
.music-page .geometry-values span,
.music-page .point-sample > span,
.music-page .precision-stat > span,
.music-page .metric-key,
.music-page .comparison-legend,
.music-page .plot-legend,
.music-page .evidence-heading > p,
.music-page .definition-tag { color: #444; font-family: var(--mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.02em; }
.music-page .form-select,
.music-page .model-switch button,
.music-page .candidate-view,
.music-page .candidate-switch button { color: #111; border-color: #777; background: #fff; font-family: var(--display); }
.music-page .form-select { min-height: 2.5rem; font-size: 0.9rem; }
.music-page .form-range { accent-color: #111; }
.music-page .form-select:focus-visible,
.music-page .form-range:focus-visible,
.music-page .model-switch button:focus-visible,
.music-page .candidate-view:focus-visible,
.music-page a:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.music-page .model-switch button.is-active,
.music-page .candidate-view.is-active { color: #fff; border-color: #111; background: #111; }
.music-page .candidate-formula { border-top: 1px solid #777; border-bottom: 1px solid #777; text-align: center; }
.music-page .readout-item strong,
.music-page .precision-stat > strong,
.music-page .geometry-values strong,
.music-page .scale-result > div > strong,
.music-page .pitch-names strong,
.music-page .angle-distances strong { color: #111; }
.music-page .table th { color: #333; border-color: #555; font-family: var(--mono); font-weight: 500; }
.music-page .table td { color: #222; border-color: #ccc; }
.music-page .table tr.is-hit td:last-child,
.music-page .table tr.is-miss td:last-child { color: #111; }
.music-page .table tr.is-hit td:last-child::after { content: " ✓"; }
.music-page .table tr.is-miss td:last-child::after { content: " —"; }
.music-page .comparison-fill,
.music-page .comparison-fill.rounded { background: #555; }
.music-page .comparison-track { background: #eee; }
.music-page .interval-span { background: #bbb; }
.music-page .interval-point,
.music-page .interval-rail > strong { background: #111; color: #111; }
.music-page .metric-key.continuous::before,
.music-page .metric-key.rounded::before { border-color: #111; background: #555; }
.music-page .cutoff-symbol { border-color: #333; color: #111; }
.music-page .cutoff-note,
.music-page .candidate-method-note,
.music-page .model-definition,
.music-page .precision-panel,
.music-page .comparison-figure,
.music-page .result-note,
.music-page .geometry-experiment { border-color: #777; background: #fff; }
.music-page .plot-legend-mark,
.music-page .plot-legend-mark.observed,
.music-page .plot-legend-mark.retained,
.music-page .plot-legend-mark.filtered { background: #555; }
.music-page .plot-legend-mark.owens { border-color: #111; background: #fff; }
.music-page .music-footer { margin-top: 3rem; padding: 0.8rem 0; border-top: 1px solid #999; border-bottom: 0; }
.music-page .music-footer > * { color: #333; font-family: var(--mono); font-size: 0.64rem; font-weight: 400; letter-spacing: 0.025em; }
.music-page .source-line { border-color: #555; }
.music-page .source-line > span { color: #333; }
.music-page .source-line > p { color: #222; font-family: var(--display); font-size: 0.86rem; line-height: 1.65; text-align: left; }
.music-page .appendix-source-note { flex-basis: 100%; color: #555; font-size: 0.75rem; font-style: italic; }
.music-page .derivation-grid,
.music-page .approximation-layout,
.music-page .sequence-layout,
.music-page .rotation-layout,
.music-page .geometry-grid,
.music-page .score-results-grid,
.music-page .reading-grid,
.music-page .formal-grid { grid-template-columns: minmax(0, 1fr); }
.music-page .sequence-layout > .paper-subsection-label { grid-column: 1 / -1; }
.music-page .scale-result > .paper-subsection-label { grid-column: 1 / -1; margin: 0; }
.music-page .paper-subsection-label { margin: 1rem 0 0.35rem; color: #333; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.02em; }
.music-page .practice-chapter > .paper-subsection-label { margin: 1.1rem 0 0.35rem; }
.music-page .boundary-reading-grid { grid-template-columns: minmax(0, 1fr); }
.music-page .geometry-experiment { padding: 0.8rem 0; border: 0; border-top: 1px solid #777; box-shadow: none; }
.music-page .result-note,
.music-page .reading-grid article { padding: 0.8rem 0; border: 0; border-top: 1px solid #777; box-shadow: none; }
.music-page .reading-grid { gap: 0; }
.music-page .reading-number { color: #111; font-family: var(--display); font-size: 0.9rem; }
.music-page #overall-precision { margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px solid #333; }
.music-page #overall-precision .step-label { display: block; margin-bottom: 0.45rem; color: #333; }
.music-page #overall-precision h3 { margin-top: 0; }
.music-page .precision-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.music-page .precision-intro,
.music-page .precision-caveat { grid-column: 1 / -1; }
.music-page .control-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.music-page .comparison-figure { padding: 0.75rem 0; border: 0; border-top: 1px solid #777; box-shadow: none; }
.music-page .score-result-list { border-color: #777; }
.music-page .score-result-list > div { font-size: 0.85rem; }
.music-page .boundary-reading-grid ul { border-color: #777; }
.music-page .boundary-reading-grid li { font-size: 0.85rem; }
.music-page .source-line { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; }
.music-page .source-line > p { grid-column: 1 / -1; }
.music-page .source-line > a { grid-column: 2; grid-row: 1; }
.music-page .source-line .appendix-source-note { grid-column: 1 / -1; }
.music-page .music-footer { justify-content: center; }
.music-page .music-footer > p { display: none; }

@media (max-width: 760px) {
  .music-page .page-shell { width: min(100% - 32px, 790px); }
  .music-page main { width: 100%; }
  .music-page .music-hero { min-height: 70svh; padding: 4rem 0; }
  .music-page .chapter-heading h2,
  .music-page .music-section-heading h2,
  .music-page .intro-section h2 { font-size: 1.35rem; }
  .music-page .contents-list a { font-size: 0.77rem; }
  .music-page .contents-number { flex-basis: 2.25rem; }
  .music-page .contents-sub a { padding-left: 0.8rem; }
  .music-page .contents-deep a { padding-left: 1.6rem; }
  .music-page .contents-title::after { min-width: 0.4rem; }
  .music-page .chapter-heading,
  .music-page .music-section-heading { display: block; }
  .music-page .control-deck { grid-template-columns: 1fr; }
  .music-page .precision-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .music-page .chapter-heading > p:last-child,
  .music-page .music-section-heading > p:last-child { margin-top: 0.65rem; }
}

@media (max-width: 520px) {
  .music-page .page-shell { width: calc(100% - 28px); }
  .music-page .contents-heading { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
  .music-page .contents-list a { gap: 0.25rem; font-size: 0.72rem; }
  .music-page .contents-number { flex-basis: 1.9rem; }
  .music-page .contents-page { min-width: 1.75rem; }
  .music-page .contents-deep a { font-size: 0.68rem; }
  .music-page .contents-title small { display: none; }
  .music-page main p,
  .music-page .chapter-heading > p:last-child,
  .music-page .music-section-heading > p:last-child { font-size: 0.88rem; }
  .music-page .equation-stack > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .music-page .music-footer { align-items: flex-start; flex-direction: column; gap: 0.3rem; }
}

@media print {
  .music-page { color: #000; background: #fff; font-size: 10pt; }
  .music-page .site-header,
  .music-page .music-footer,
  .music-page .control-deck,
  .music-page .circle-controls,
  .music-page .form-range,
  .music-page .form-select,
  .music-page .model-switch { display: none !important; }
  .music-page .page-shell,
  .music-page main { width: 100%; max-width: 100%; }
  .music-page .music-hero { min-height: 90vh; break-after: page; }
  .music-page .paper-contents { break-after: page; }
  .music-page .study-chapter,
  .music-page .lab-section { break-inside: avoid; }
  .music-page figure,
  .music-page .formal-derivation,
  .music-page .evidence-block { break-inside: avoid; }
  .music-page a { color: #000; text-decoration: none; }
}
