/* Beethoven, Symphony No. 5 — piece styles layered on book.css. Prefix: bt- */
.bt-book{--bt-gold:#d9a441;--bt-gold-soft:#f6e3b8;--bt-coral:#c7654a;--bt-coral-soft:#f3d6ca;--bt-night:#24433f}
.bt-cover-art>img{object-position:50% 30%}
.bt-recording-art{object-position:50% 38%}

/* chapter 4 shell */
.bt-tabs .lesson-symbol{font-size:26px}
.bt-workshop{min-height:430px}
.bt-workshop .lesson-text h3 em{color:var(--rust)}
.bt-canvas{justify-content:flex-start;gap:4px}
.bt-load{display:flex;align-items:center;gap:14px;min-height:0;font-size:13px;color:var(--muted);padding:0 3px}
.bt-load[data-state=loading],.bt-load[data-state=error],.bt-load[data-state=partial]{min-height:48px;padding-top:10px}
.bt-load[data-state=loading] span:before{content:'';display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:50%;background:var(--bt-gold);animation:bt-pulse 1s ease-in-out infinite}
.bt-load[data-state=error]{color:var(--rust)}
.bt-load .quiet-action{min-height:48px;font-size:13px}
@keyframes bt-pulse{50%{opacity:.25}}
.bt-cue-progress{height:4px;border-radius:3px;background:#e6e3d3;overflow:hidden;margin:0 3px}
.bt-cue-progress i{display:block;height:100%;width:0;background:var(--teal);transition:width .12s linear}
.bt-learn{display:inline-flex;align-items:center;min-height:48px;font-size:14px;font-weight:600}

/* predict → reveal → name */
.bt-predict{margin-top:18px}
.bt-predict .lesson-question{margin:0 0 12px}
.bt-choice-row{display:flex;flex-wrap:wrap;gap:8px}
.bt-choice-row button{font-size:13px;background:var(--sheet)}
.bt-choice-row button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}
.bt-reveal{margin-top:14px;padding:14px 16px;border-left:3px solid var(--bt-gold);background:#fbf3df;border-radius:0 12px 12px 0}
.bt-reveal p{font-size:14px;color:var(--ink);margin-bottom:10px}
.bt-reveal .quiet-action{min-height:48px;font-size:13px;padding:6px 0}
.bt-reveal .bt-choice-row{margin-bottom:10px}
.bt-name{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--sheet);border:1px dashed #d8cfb2}
.bt-name span{color:var(--bt-gold);font-size:18px;line-height:1.3}
.bt-name p{margin:0;font-size:13px;line-height:1.5}
.bt-name strong{color:var(--rust)}

/* 1. the knock blocks */
.bt-knock-editor{padding:14px 0 4px}
.bt-cell{display:flex;gap:6px;align-items:stretch;min-height:96px}
.bt-block{min-width:48px;min-height:88px;border-radius:14px;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 18px var(--serif);color:#fffaf0;padding:0 4px;position:relative;transition:transform .15s,box-shadow .15s,background .15s}
.bt-short{background:var(--bt-coral);box-shadow:0 6px 0 #9c4832}
.bt-long{background:var(--bt-gold);box-shadow:0 6px 0 #aa7a26;color:#3b2a10}
.bt-held{background:linear-gradient(90deg,var(--bt-gold) 55%,#f1cf7f);}
.bt-rest{min-width:26px;background:transparent;border:2px dashed #cdbf9c;box-shadow:none}
.bt-fermata{font-style:normal;font-size:22px;line-height:1}
button.bt-block:hover{filter:brightness(1.05)}
.bt-block.bt-on,.bt-dot.bt-on{transform:translateY(-6px);box-shadow:0 12px 0 #273c3630}
.bt-rest.bt-on{background:#fff4d8}

/* 2. the ladder */
.bt-ladder{display:grid;gap:3px;padding:8px 0}
.bt-rung{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px;min-height:26px}
.bt-rung-name{font:600 13px var(--serif);color:var(--muted);text-align:right}
.bt-rung-track{position:relative;height:24px;border-bottom:1px solid #dcd7c2}
.bt-dot{position:absolute;top:2px;height:20px;border-radius:10px;background:var(--bt-coral);box-shadow:0 3px 0 #9c4832;margin-left:2px;transition:transform .15s}
.bt-dot.bt-long{background:var(--bt-gold);box-shadow:0 3px 0 #aa7a26}
.bt-now{text-align:center;margin:8px 0 0;font-size:14px}
.bt-now strong{font:600 20px var(--serif);display:block}
.bt-now span{color:var(--muted);font-size:12px}

/* 3 & 4. lanes */
.bt-lanes{position:relative;display:grid;gap:8px;padding:6px 0}
.bt-lane{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:center}
.bt-lane-toggle{min-height:52px;padding:6px 10px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:var(--sheet);font-size:13px;line-height:1.2}
.bt-lane-toggle small{font-weight:400;font-size:11px;color:var(--teal)}
.bt-lane-toggle[aria-pressed=false]{background:transparent;border-style:dashed;color:var(--muted)}
.bt-lane-toggle[aria-pressed=false] small{color:var(--muted)}
.bt-lane-track{position:relative;height:40px;border-radius:10px;background:#e8e4d2}
.bt-muted .bt-lane-track{opacity:.35}
.bt-note{position:absolute;top:7px;height:26px;border-radius:8px;display:flex;align-items:center;padding-left:6px;font:600 12px var(--serif);overflow:hidden;white-space:nowrap;transition:transform .12s}
.bt-eighth{background:var(--bt-coral);border:1px solid #fffaf0}
.bt-hold{background:var(--bt-gold-soft);border:1px solid #d9b870;color:#5d4418}
.bt-lane-low .bt-hold{background:#d4e2d6;border-color:#9fbca8;color:var(--teal)}
.bt-knock.bt-eighth{background:var(--rust)}
.bt-knock.bt-hold{background:var(--bt-coral-soft);border-color:var(--bt-coral);color:#7a3522}
.bt-lane-knock .bt-lane-track{box-shadow:inset 0 0 0 2px #e7b9a8}
.bt-note.bt-on{transform:scaleY(1.25);filter:brightness(1.08);z-index:1}
.bt-eighth.bt-on{background:var(--bt-night)}
.bt-lanes{--bt-label:128px}
.bt-playhead{position:absolute;top:0;bottom:0;width:2px;left:calc(var(--bt-label) + (100% - var(--bt-label)) * var(--p,0));background:var(--teal);opacity:0;pointer-events:none}
.bt-playhead.bt-visible{opacity:.8}
.bt-sub{font:500 20px var(--serif);margin:22px 0 4px;letter-spacing:-.02em}
.bt-two-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.bt-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:96px;text-align:left;padding:14px 16px;border-radius:16px}
.bt-card .bt-dyn{font:italic 600 24px/1 var(--serif);color:var(--rust)}
.bt-card strong{font:500 19px var(--serif)}
.bt-card small{font-weight:400;font-size:12px;color:var(--muted)}
.bt-loud{background:var(--bt-gold-soft);border-color:#dfc07a}
.bt-soft{background:#e2ece4;border-color:#b9d0bf}

@media(max-width:820px){.bt-lane{grid-template-columns:96px 1fr}.bt-lanes{--bt-label:106px}.bt-lane-toggle{font-size:12px}}
@media(max-width:600px){
  .bt-cell{gap:4px}
  .bt-block{min-width:48px;font-size:15px}
  .bt-rest{min-width:18px}
  .bt-lane{grid-template-columns:84px 1fr;gap:6px}
  .bt-lanes{--bt-label:90px}
  .bt-lane-toggle{padding:6px 8px;font-size:11px}
  .bt-two-cards{grid-template-columns:1fr}
  .bt-card{min-height:72px}
}
@media(prefers-reduced-motion:reduce){
  .bt-block,.bt-dot,.bt-note,.bt-cue-progress i{transition:none}
  .bt-block.bt-on,.bt-dot.bt-on{transform:none;outline:3px solid var(--bt-night);outline-offset:2px}
  .bt-note.bt-on{transform:none;outline:2px solid var(--bt-night)}
  .bt-load[data-state=loading] span:before{animation:none}
}
.bt-walk-art>img{object-position:42% 18%}
.bt-closing-art>img{object-position:12% 30%}