:root {
  --paper:#e8bb79; --panel:#f0c88f; --ink:#241c18; --muted:#4d3525;
  --burgundy:#411b22; --inverse:#f5e4c5; --rule:#805638;
  --v0:#972c28; --v1:#225363; --v2:#3a501f; --v3:#69401e; --score-divisions:32;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 18px/1.55 Archivo,sans-serif; }
button, input { font:inherit; color:inherit; }
button, a, input { touch-action:manipulation; }
button { min-height:44px; border:1px solid var(--rule); padding:9px 16px; background:transparent; font-size:16px; cursor:pointer; border-radius:2px; }
button:hover { background:#411b2210; }
button:disabled { cursor:default; opacity:.5; }
a { color:inherit; text-underline-offset:5px; }
a:visited { color:var(--muted); }
button:focus-visible, input:focus-visible, a:focus-visible, .score-scroll:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
[hidden] { display:none!important; }
.mono { font-family:'IBM Plex Mono',monospace; font-size:16px; }
.wrap { max-width:1440px; margin:auto; padding-inline:48px; }
.skip { position:absolute; top:-100px; left:16px; z-index:10; background:var(--paper); padding:12px; }
.skip:focus { top:8px; }
header { border-bottom:1px solid var(--rule); }
.header-inner { min-height:88px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.brand { font-size:32px; font-weight:700; letter-spacing:-.055em; text-decoration:none; min-width:0; overflow-wrap:anywhere; }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
nav a { font-size:16px; font-weight:600; min-height:44px; display:inline-flex; align-items:center; }
nav button { border:0; padding-inline:8px; }
.edition { color:var(--muted); }
.opening { padding-top:32px; padding-bottom:40px; }
.title-row { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:24px; }
.kicker { font:500 16px/1.4 'IBM Plex Mono',monospace; }
h1 { margin:6px 0 8px; font-size:clamp(60px,8vw,112px); font-weight:900; line-height:.92; letter-spacing:-.045em; overflow-wrap:anywhere; }
.title-row p { max-width:650px; margin:16px 0 0; color:var(--muted); }
.primary { background:var(--burgundy); color:var(--inverse); border-color:var(--burgundy); font-weight:600; }
.primary:hover { background:#602631; }
#play { padding:16px 24px; margin-bottom:4px; min-height:56px; }
.workspace { border:1px solid var(--rule); background:var(--panel); }
.score-heading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; padding:16px 20px 12px; }
.score-heading .mono { color:var(--muted); }
.score-field { display:flex; min-height:224px; margin:0 20px; border-block:1px solid #80563866; }
.voice-labels { width:116px; flex-shrink:0; display:grid; grid-template-rows:repeat(4,minmax(56px,1fr)); }
.lane-name { display:flex; align-items:center; gap:8px; border-bottom:1px solid #80563833; font-size:16px; }
.lane-name .mark { width:16px; font-size:16px; text-align:center; }
.lane-name .identity { line-height:1.1; min-width:0; overflow-wrap:anywhere; }
.lane-name .identity small { display:block; font:400 16px/1.1 'IBM Plex Mono',monospace; }
.score-scroll { overflow-x:auto; overflow-y:hidden; flex:1; min-width:0; scrollbar-width:none; }
.score-scroll::-webkit-scrollbar { display:none; }
.score-scroll svg { display:block; height:100%; min-height:224px; max-width:none; }
.score-line { stroke:var(--rule); stroke-width:1; opacity:.22; }
.note { rx:1.5; }
.note.is-current { stroke:var(--ink); stroke-width:2; }
.transport { padding:16px 20px 12px; display:grid; grid-template-columns:44px max-content minmax(80px,1fr) minmax(230px,max-content); align-items:center; gap:16px; }
.transport button { padding:8px; font-size:24px; line-height:1; }
.time { white-space:nowrap; }
input[type=range] { width:100%; min-width:0; min-height:44px; accent-color:var(--burgundy); cursor:pointer; margin:0; }
.tempo { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; font-size:16px; }
.tempo output { white-space:nowrap; }
.voice-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0 20px 16px; }
.voice-button { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; background:#e8bb7944; min-width:0; }
.voice-button[aria-pressed=false] { background:transparent; }
.voice-button[aria-pressed=false] .voice-state { text-decoration:line-through; }
.voice-state { font-size:16px; }
.voice-identity { display:flex; align-items:center; gap:8px; min-width:0; }
.voice-identity > span:last-child { min-width:0; overflow-wrap:anywhere; }
.voice-button[aria-pressed=false] .mark { opacity:.3; }
.player-status { min-height:64px; border-top:1px solid #80563866; padding:8px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.player-status p { margin:0; font-size:16px; }
.player-status button { white-space:nowrap; }
.sections { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:16px; }
.sections button { text-align:left; border:0; border-top:1px solid var(--rule); padding:12px 0; font-size:16px; min-width:0; overflow-wrap:anywhere; }
.sections button[aria-current=true] { border-top:3px solid var(--burgundy); padding-top:10px; font-weight:700; }
.overview-area { display:none; padding:12px 20px; border-top:1px solid #80563866; }
.overview-area svg { width:100%; height:54px; display:block; margin-bottom:8px; }
.window-controls { display:flex; flex-wrap:wrap; gap:8px; }
.window-controls button { font-size:16px; padding-inline:12px; }
.window-controls button[aria-pressed=true] { background:var(--burgundy); color:var(--inverse); }
.chapter { padding-block:72px; border-top:1px solid var(--rule); }
.chapter-top { display:grid; grid-template-columns:1fr 3fr; align-items:start; gap:32px; }
.chapter-index { font-size:96px; line-height:.9; font-weight:900; letter-spacing:-.09em; }
.chapter h2 { font-size:clamp(40px,5vw,72px); letter-spacing:-.06em; line-height:1.02; margin:12px 0 20px; max-width:800px; overflow-wrap:anywhere; }
.chapter p { margin:0; max-width:58ch; }
.chapter .actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; align-items:center; }
.chapter-art { margin:40px 0 0; padding:24px; background:#f0c88f88; border-block:1px solid var(--rule); }
.chapter-art svg { width:100%; height:200px; display:block; }
.caption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; margin-top:16px; font-size:16px; color:var(--muted); }
.answer { background:var(--panel); }
.answer .chapter-top { grid-template-columns:2fr 1fr; }
.answer .chapter-index { text-align:right; order:2; }
.answer .chapter-art { margin-left:16%; background:var(--paper); }
.together { background:var(--burgundy); color:var(--inverse); }
.together .chapter-art { background:#f5e4c508; border-color:#f5e4c566; }
.together button { color:var(--inverse); border-color:var(--inverse); }
.together .primary { background:var(--inverse); color:var(--burgundy); }
.together .caption { color:var(--inverse); }
.together button:focus-visible,.together a:focus-visible { outline-color:var(--inverse); }
.work-note { padding-block:40px; display:grid; grid-template-columns:1fr 2fr; gap:32px; }
.work-note h2 { font-size:24px; margin:0; letter-spacing:-.03em; }
.work-note p { font-size:16px; max-width:65ch; margin:0 0 16px; }
.work-note a { display:inline-flex; align-items:center; min-height:44px; }
footer { border-top:1px solid var(--rule); padding-block:24px; font-size:16px; }
footer .wrap { display:flex; gap:24px; justify-content:space-between; }
.trace-ink { fill:none; stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.trace-back { opacity:.18; }
html:not(.motion-off) .motif-accent { transition:stroke-dashoffset 180ms linear; }
.motion-off { scroll-behavior:auto; }
.motion-off * { transition:none!important; animation:none!important; }
.status-actions { display:flex; flex-wrap:wrap; gap:8px; }
.motion-help { font-size:16px; padding-bottom:12px; margin-top:0; }
.legend-voice { display:inline-block; margin-right:16px; }
.caption > span:first-child { display:flex; flex-wrap:wrap; row-gap:6px; }
html:not(.motion-off) .note.is-current { animation:note-accent var(--step-duration,375ms) ease-out; }
@keyframes note-accent { from { opacity:.55; } to { opacity:1; } }
.voice-index { font-size:16px; }
.voice-button .mark { color:var(--voice); }
.voice-button.is-sounding { box-shadow:inset 0 -3px var(--voice); }
.motif-accent.is-sounding { stroke-width:4; }
.score-head { pointer-events:none; }
.voice-button,.note,.motif-accent { transition:opacity 160ms,stroke-width 160ms,box-shadow 160ms; }
.chapter-top { transition:opacity 600ms ease,transform 600ms cubic-bezier(.2,.7,.2,1); }
html.motion-ready:not(.motion-off) .chapter-top:not(.is-visible) { opacity:0; transform:translateY(18px); }
.motion-off .chapter-top { opacity:1; transform:none; }
@media (min-width:1024px) {
 .voice-controls { padding-bottom:12px; }
}
@media (max-width:699px) {
 .status-actions { width:100%; }
 .status-actions button { white-space:normal; text-align:left; }
 .voice-index { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
}
@media (max-width:1023px) {
 :root { --score-divisions:16; }
 .wrap { padding-inline:24px; }
 .edition { display:none; }
 .transport { grid-template-columns:44px max-content minmax(60px,1fr); }
 .tempo { grid-column:2/4; }
 .overview-area { display:block; }
 .voice-button { padding-inline:8px; }
 .voice-button .voice-state { display:none; }
 h1 { font-size:80px; }
}
@media (max-width:699px) {
 :root { --score-divisions:8; }
 .wrap { padding-inline:16px; }
 .header-inner { min-height:104px; flex-wrap:wrap; gap:0; padding-block:12px 4px; }
 .brand { font-size:28px; flex-basis:100%; }
 nav { justify-content:space-between; width:100%; gap:16px; }
 nav button { padding-right:0; }
 .opening { padding-top:24px; padding-bottom:32px; }
 .title-row { display:block; margin-bottom:16px; }
 h1 { font-size:52px; margin-block:8px 0; }
 .title-row p { font-size:16px; line-height:1.5; margin-top:12px; }
 .kicker { font-size:16px; letter-spacing:-.03em; }
 #play { width:100%; padding:10px 16px; min-height:48px; margin-top:16px; margin-bottom:0; }
 .score-heading { padding:12px; gap:4px; font-size:16px; }
 .score-heading .mono { flex-basis:100%; }
 .score-field { margin-inline:12px; }
 .voice-labels { width:104px; }
 .lane-name { gap:4px; font-size:16px; }
 .lane-name .mark { width:16px; font-size:16px; }
 .transport { grid-template-columns:44px 1fr; padding:12px; gap:8px 16px; }
 .transport #seek { grid-column:1/3; }
 .tempo { grid-column:1/3; }
 .voice-controls { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 12px 12px; }
 .voice-button .voice-state { display:inline; }
 .voice-button { padding:8px; }
 .player-status { padding:12px; min-height:96px; flex-wrap:wrap; gap:8px; }
 .overview-area { padding:12px; }
 .window-controls button { flex-grow:1; }
 .sections { gap:8px; }
 .sections button { line-height:1.35; }
 .sections .mono { display:block; margin-bottom:4px; }
 .chapter { padding-block:48px; }
 .chapter-top,.answer .chapter-top { grid-template-columns:1fr; gap:16px; }
 .chapter-index { font-size:64px; }
 .answer .chapter-index { order:0; text-align:left; }
 .chapter h2 { font-size:44px; margin:8px 0 16px; }
 .chapter p { font-size:18px; }
 .chapter .actions { align-items:stretch; }
 .chapter .actions button { width:100%; }
 .chapter-art { padding:16px 0; margin-top:24px; }
 .answer .chapter-art { margin-left:0; }
 .chapter-art svg { height:180px; }
 .caption { flex-direction:column; gap:4px; }
 .work-note { grid-template-columns:1fr; gap:16px; padding-block:32px; }
 footer .wrap { flex-direction:column; gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 * { transition:none!important; animation:none!important; }
}