.classroom-instrument{display:block;width:100%;height:auto;max-height:170px;overflow:visible;shape-rendering:geometricPrecision}
.classroom-key{touch-action:manipulation;cursor:pointer;outline:none;--key-color:#87ad65}
.instrument-hit-area{fill:transparent;stroke:transparent;stroke-width:2}
.classroom-key:focus-visible .instrument-hit-area{stroke:var(--instrument-ink);stroke-dasharray:3 3}
.tube-body,.bell-body{fill:var(--key-color);stroke:var(--instrument-ink);stroke-width:1.8;stroke-linejoin:round}
.tube-opening,.tube-bottom{fill:var(--key-color);stroke:var(--instrument-ink);stroke-width:1.5}
.tube-bore{fill:var(--key-shade);stroke:var(--instrument-ink);stroke-width:.7}
.instrument-shine,.bell-highlight{stroke:var(--instrument-paper);stroke-width:2.2;opacity:.55;fill:none;stroke-linecap:round}
.octavator-cap rect{fill:#222b2e;stroke:#172022;stroke-width:1.7}.octavator-cap path{fill:none;stroke:#687374;stroke-width:1.4}
.tube-table{fill:none;stroke:var(--instrument-ink);stroke-width:2;stroke-linecap:round;opacity:.45}
.tube-impact,.bell-waves{opacity:0;fill:none;stroke:var(--instrument-gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.tube-impact .tube-zap{stroke:#3a8c96;stroke-width:1.8}
.bell-shadow{fill:var(--instrument-ink);opacity:.14}
.bell-handle{fill:var(--instrument-paper);stroke:var(--instrument-ink);stroke-width:1.6}.bell-handle-top{fill:#d9e0d5;stroke:var(--instrument-ink);stroke-width:1}
.bell-mouth{fill:var(--key-shade);stroke:var(--instrument-ink);stroke-width:1.5}.bell-clapper{fill:var(--instrument-paper);stroke:var(--instrument-ink);stroke-width:1}.bell-clapper-stem{stroke:var(--instrument-ink);stroke-width:1.3}
.classroom-key.sounding .tube-body,.classroom-key.sounding .bell-body,.classroom-key.chord-tone .tube-body,.classroom-key.chord-tone .bell-body{stroke-width:3;filter:drop-shadow(0 0 3px var(--instrument-gold))}
.classroom-key.muted{opacity:.3}.classroom-key[aria-disabled=true]{cursor:default}
.boomwhacker.striking .tube-motion{animation:compatura-tube-hit .2s ease-out}
.boomwhacker.striking .tube-impact{opacity:1}
.handbell.sounding .bell-motion{transform:translateY(-4px)}
.handbell.striking .bell-motion{transform-box:fill-box;transform-origin:center 10%;animation:compatura-bell-ring .2s ease-out}
.handbell.striking .bell-waves{opacity:1}
@keyframes compatura-tube-hit{0%{transform:translateY(-5px)}35%{transform:translateY(10px)}70%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@keyframes compatura-bell-ring{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-10px) rotate(-11deg)}65%{transform:translateY(-8px) rotate(9deg)}100%{transform:translateY(-4px) rotate(0)}}
@media(prefers-reduced-motion:reduce){.classroom-key .tube-motion,.classroom-key .bell-motion{animation:none!important;transform:none!important}}
@media print{.tube-impact,.bell-waves{display:none!important}.classroom-key{opacity:1!important}.classroom-instrument{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

.metallo-waves{opacity:0;fill:none;stroke:var(--instrument-gold,#e5ca70);stroke-width:2.4;stroke-linecap:round;pointer-events:none;transition:opacity .18s ease-out}
.metallo-bar.striking .metallo-waves{opacity:1;transition:none}
@media print{.metallo-waves{display:none!important}}

.keyboard-case-shadow{fill:var(--instrument-ink);opacity:.12}
.keyboard-case{fill:var(--keyboard-case);stroke:var(--instrument-ink);stroke-width:2;stroke-linejoin:round}
.keyboard-panel{fill:none;stroke:var(--instrument-ink);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.piano-top{fill:var(--keyboard-case-light)}
.piano-trim,.keyboard-front-trim{fill:none;stroke:var(--instrument-gold);stroke-width:2;stroke-linecap:round}
.keyboard-knob{fill:var(--instrument-gold)}.keyboard-knob.second{fill:#d76a59}
.keyboard-slider{stroke:var(--keyboard-case-light)}.keyboard-slider-cap{stroke:var(--instrument-paper);stroke-width:3}
.keyboard-display{fill:var(--instrument-ink)}.keyboard-display-wave{stroke:#c5ddd0;stroke-width:1.4}.keyboard-panel-line{stroke:var(--keyboard-case-light)}
.keyboard-key-face{fill:var(--instrument-paper);stroke:var(--instrument-ink);stroke-width:1.2;transition:fill .07s}
.black-key .keyboard-key-face{fill:#263c43}
.keyboard-key-edge{fill:none;stroke:#d5d8cc;stroke-width:2;stroke-linecap:round}
.black-key .keyboard-key-edge{stroke:#708087}
.keyboard-pitch-mark{fill:var(--key-color);stroke:var(--key-shade);stroke-width:.7;opacity:0;pointer-events:none}
.black-key .keyboard-pitch-mark{stroke:var(--instrument-paper)}
.keyboard-key.in-score .keyboard-pitch-mark{opacity:1}
.keyboard-key-motion{transition:transform .06s ease-out}
.keyboard-key.sounding .keyboard-key-motion,.keyboard-key.chord-tone .keyboard-key-motion{transform:translateY(3px)}
/* A black key pivots at its attached rear edge; translating the whole key
   would expose the white keys behind it and make it appear to float. */
.black-key .keyboard-key-motion{transform-box:fill-box;transform-origin:center top}
.black-key.sounding .keyboard-key-motion,.black-key.chord-tone .keyboard-key-motion{transform:scaleY(1.04)}
.keyboard-key.sounding .keyboard-key-face,.keyboard-key.chord-tone .keyboard-key-face{fill:var(--key-color);stroke-width:1.8}
.keyboard-key:focus-visible .keyboard-key-face{stroke:var(--instrument-gold);stroke-width:3}
.keyboard-key[aria-disabled=false]:hover .keyboard-key-face{stroke:var(--instrument-gold);stroke-width:2}
.keyboard-waves{opacity:0;fill:none;stroke:var(--instrument-gold);stroke-width:2.4;stroke-linecap:round;pointer-events:none}
.keyboard-key.striking .keyboard-waves{opacity:1}
@media(prefers-reduced-motion:reduce){.keyboard-key-motion,.keyboard-key-face{transition:none}.keyboard-key.sounding .keyboard-key-motion,.keyboard-key.chord-tone .keyboard-key-motion{transform:none}}
@media print{.keyboard-waves{display:none!important}.keyboard-key .keyboard-key-face{fill:var(--instrument-paper)}.keyboard-key.black-key .keyboard-key-face{fill:#263c43}.keyboard-key .keyboard-key-motion{transform:none!important}}

/* Wood and metal share the same physical bar/rail geometry in both sizes. */
.xylophone-illustration .instrument-frame.unified-frame{fill:var(--art-wood-dark)!important}
.xylophone-illustration .metallo-bar .bar-face{fill:var(--art-wood)}
.xylophone-illustration .metallo-bar.shown-note .bar-face{fill:color-mix(in srgb,var(--bar-color) 78%,var(--art-wood))}
.bar-grain{fill:none;stroke:var(--art-paper);stroke-width:1;opacity:.38;pointer-events:none}

/* Print the selected header instrument at rest. Keep the SVG placement
   transforms and the permanent pitch colours; suppress only playback cues. */
@media print {
  #metallophone :is(.metallo-guide,.metallo-mallet,.metallo-waves,.bar-halo,.tube-impact,.bell-waves,.keyboard-waves) {display:none!important}
  #metallophone :is(.metallo-bar,.classroom-key,.ocarina-body,.kalimba-metal,.tube-body,.bell-body) {filter:none!important;box-shadow:none!important;outline:none!important}
  #metallophone :is(.tube-motion,.bell-motion,.keyboard-key-motion) {animation:none!important;transition:none!important;transform:none!important}
  #metallophone :is(.metallo-bar,.classroom-key,.ocarina-fingering) {opacity:1!important}
  #metallophone :is(.tube-body,.bell-body) {stroke-width:1.8}
  #metallophone .keyboard-key-face {fill:var(--instrument-paper);stroke:var(--instrument-ink);stroke-width:1.2;transition:none!important}
  #metallophone .black-key .keyboard-key-face {fill:#263c43}
  #metallophone .kalimba-metal {fill:var(--art-paper);stroke-width:1.2}
  #metallophone :is(.instrument-hit-area,.kalimba-hit) {stroke:transparent}
}