/* Shared Four-Finger Echo Box instrument/fingering system. */
.echo-box-instrument{margin:1.2rem 0;display:grid;gap:.8rem}
.echo-box-instrument__visual{
  position:relative;overflow:hidden;border:1px solid #6f5745;border-radius:7px;
  background:#ddd2c5;min-height:260px;
}
.echo-box-instrument__visual img{display:block;width:100%;height:auto;object-fit:cover}
.echo-box-instrument figcaption,.cutaway-explainer figcaption{
  margin:.1rem 0;color:var(--muted);font-size:.85rem;line-height:1.45;
}
.instrument-callout{
  position:absolute;display:grid;gap:.08rem;padding:.42rem .55rem;border:1px solid rgba(255,255,255,.75);
  border-radius:4px;background:rgba(37,28,22,.88);color:white;box-shadow:0 3px 12px rgba(0,0,0,.22);
}
.instrument-callout strong{font-size:.68rem;letter-spacing:.11em}
.instrument-callout small{font-size:.67rem;color:#d9e8ef}
.instrument-callout--inlet{left:4.5%;top:8%}
.instrument-callout--keys{left:43%;top:5%}
.instrument-callout--outlet{right:3.5%;bottom:15%}
.instrument-state-badge{
  position:absolute;left:50%;bottom:3%;transform:translateX(-50%);
  padding:.45rem .7rem;border-radius:999px;background:#f5eee2;color:#36271d;border:1px solid #5a4333;
  font-size:.68rem;letter-spacing:.08em;font-weight:950;white-space:nowrap;
}

.key-grid.physical-key-deck{
  margin:.25rem 0;padding:.8rem;border:1px solid #9b8773;border-radius:6px;
  background:linear-gradient(180deg,#6a4935,#4b3427);color:#f8f3ed;
}
.physical-key-deck__mode{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-bottom:.7rem}
.physical-key-deck__mode strong{font-size:.7rem;letter-spacing:.12em}
.physical-key-deck__mode span{font-size:.78rem;color:#ded2c6;max-width:700px}
.physical-key-deck__keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}
.physical-key{
  display:grid;grid-template-rows:auto auto 1fr;gap:.38rem;min-width:0;padding:.62rem;
  border:1px solid rgba(255,255,255,.24);border-radius:5px;background:rgba(16,11,8,.16);
}
.physical-key__number{font-size:.64rem;letter-spacing:.12em;font-weight:900;color:#dfd1c4}
.physical-key__control{
  position:relative;display:grid;place-items:center;gap:.34rem;min-height:88px;width:100%;
  border:1px solid #3c332d;border-radius:6px;padding:.45rem;color:#1f1b17;
  background:linear-gradient(145deg,#f0eee8 0%,#aaa9a2 42%,#e5e2db 64%,#8c8c86 100%);
  box-shadow:inset 0 1px white,0 3px 0 #33271f;
  cursor:default;
}
button.physical-key__control{cursor:pointer}
.physical-key__control strong{font-size:.78rem;letter-spacing:.08em}
.steel-paddle{
  display:block;width:64%;max-width:78px;height:26px;border-radius:58% 58% 42% 42%;
  border:1px solid #5e5e59;background:linear-gradient(135deg,#eceae3,#aaa9a3 45%,#f1efe9 67%,#878781);
  box-shadow:inset 0 1px rgba(255,255,255,.9);
  transform-origin:18% 50%;transition:transform 160ms ease;
}
.physical-key.is-closed .steel-paddle{transform:rotate(8deg)}
.physical-key.is-open .steel-paddle{transform:rotate(-20deg) translateY(-4px)}
.physical-key small{font-size:.68rem;line-height:1.35;color:#e1d7cd}
.physical-key-deck__code{margin:.7rem 0 0;padding-top:.65rem;border-top:1px solid rgba(255,255,255,.25);font-weight:800}
.physical-key-deck__code code{font-size:1.05rem}
.physical-key-deck.is-compact .physical-key small{display:none}
.physical-key-deck.is-compact .physical-key__control{min-height:70px}
.physical-key-deck.is-compact .physical-key-deck__mode{margin-bottom:.45rem}

.fingering-glyph{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.18rem;align-items:end;min-width:112px;
}
.fingering-glyph__key{
  min-width:0;height:42px;display:grid;place-items:center;align-content:end;gap:.05rem;
  border:1px solid #9d9387;border-radius:3px;background:#f3efe7;padding:.16rem;
}
.fingering-glyph__paddle{
  width:80%;height:10px;border:1px solid #77766f;border-radius:999px;
  background:linear-gradient(135deg,#f0eee8,#9f9e98 55%,#dedbd4);
  transform-origin:20% 50%;
}
.fingering-glyph__key.is-open .fingering-glyph__paddle{transform:rotate(-22deg)}
.fingering-glyph__key.is-closed .fingering-glyph__paddle{transform:rotate(6deg)}
.fingering-glyph__key small{font-size:.53rem;line-height:1;color:#594f47}
.fingering-glyph>code{grid-column:1/-1;justify-self:center;background:transparent;padding:.1rem 0;font-weight:950;font-size:.83rem}

.fingering-atlas{
  margin:1.15rem 0;border:1px solid #8d7b69;border-radius:6px;background:#e9e0d3;overflow:hidden;
}
.fingering-atlas__heading{
  display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:.75rem .85rem;
  background:#3b2a20;color:#fff;
}
.fingering-atlas__heading>div{display:grid;gap:.18rem}
.fingering-atlas__heading strong{font-size:.72rem;letter-spacing:.12em}
.fingering-atlas__heading span{font-size:.72rem;color:#dfd2c7;line-height:1.35}
.atlas-legend{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
.fingering-atlas__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#b9aa99}
.fingering-tile{
  appearance:none;border:0;border-radius:0;margin:0;min-width:0;min-height:112px;
  display:grid;gap:.28rem;place-items:center;align-content:center;padding:.55rem;background:#fbf8f1;color:var(--ink);
  text-align:center;transition:background 120ms ease,box-shadow 120ms ease,transform 120ms ease;
}
button.fingering-tile{cursor:pointer}
.fingering-tile:hover,.fingering-tile:focus-visible,.fingering-tile.is-selected{
  background:#dcebf0;box-shadow:inset 0 0 0 3px var(--acoustic);z-index:1;
}
.fingering-tile:active{transform:translateY(1px)}
.fingering-tile__status{font-size:.58rem;letter-spacing:.09em;font-weight:900;color:#6d655d}
.fingering-tile__score{font-size:.62rem;font-weight:900;color:#244f63}
.atlas-play-note,.atlas-preview-panel{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:.75rem 0;padding:.7rem .8rem;
  border-left:4px solid var(--acoustic);background:#edf4f6;
}
.atlas-preview-panel span{max-width:760px}

.cutaway-details{
  margin:1rem 0;border:1px solid #8d7b69;border-radius:6px;background:#eee5d9;
}
.cutaway-details>summary{
  cursor:pointer;padding:.8rem .9rem;font-weight:950;letter-spacing:.07em;background:#4a3528;color:white;
}
.cutaway-explainer{padding:.9rem}
.cutaway-explainer__heading{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.cutaway-explainer__heading>span{font-size:.66rem;font-weight:900;letter-spacing:.08em}
.cutaway-explainer__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;align-items:start}
.cutaway-explainer figure{margin:0}
.cutaway-explainer img{display:block;width:100%;height:auto;border:1px solid #8c7764;border-radius:4px}
.branch-logic{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.branch-logic article{display:grid;gap:.25rem;padding:.75rem;border:1px solid #b9aa98;background:#fbf8f1;border-radius:4px}
.branch-logic article strong{letter-spacing:.1em}
.branch-logic article span{font-size:.82rem}
.branch-logic p,.airflow-line{grid-column:1/-1}
.airflow-line{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.38rem;padding:.65rem;
  background:#dceaf0;border:1px solid #9bbac8;border-radius:4px;font-size:.72rem;font-weight:900;letter-spacing:.04em;color:#234d62;
}
.airflow-line b{font-size:1.1rem}
.schematic-detail{grid-column:1/-1;margin-top:.7rem}
.schematic-detail summary{cursor:pointer;font-weight:900;padding:.6rem 0}
.schematic-detail p{margin:.6rem 0 0}

@media(max-width:900px){
  .cutaway-explainer__grid{grid-template-columns:1fr}
  .fingering-atlas__grid{grid-template-columns:repeat(4,minmax(130px,1fr));overflow-x:auto}
}
@media(max-width:720px){
  .physical-key-deck__keys{grid-template-columns:repeat(2,1fr)}
  .physical-key-deck__mode,.fingering-atlas__heading,.cutaway-explainer__heading{display:block}
  .physical-key-deck__mode span,.fingering-atlas__heading span{display:block;margin-top:.3rem}
  .instrument-callout--keys{display:none}
}
@media(max-width:480px){
  .physical-key-deck__keys{grid-template-columns:1fr 1fr}
  .physical-key small{display:none}
  .fingering-atlas__grid{grid-template-columns:repeat(2,minmax(125px,1fr))}
  .instrument-callout{padding:.3rem .4rem}
  .instrument-callout small{display:none}
  .instrument-state-badge{max-width:92%;white-space:normal;text-align:center}
  .branch-logic{grid-template-columns:1fr}
  .branch-logic p,.airflow-line{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  .steel-paddle,.fingering-tile{transition:none!important}
  .fingering-tile:active{transform:none}
}