.carousel{display:flex;flex-direction:column;align-items:stretch;gap:1rem;position:relative;padding:var(--s-4) var(--s-2) var(--s-3)}.carousel-viewport{position:relative;width:100%;height:36rem;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;touch-action:pan-y}.carousel-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;opacity:0;pointer-events:none;transform:translate(0)}.carousel-slide:not([inert]){opacity:1;pointer-events:auto}.carousel-slide .paper-svg{width:auto;height:34rem;max-width:100%;overflow:visible}.carousel-slide.exit-left{animation:slide-exit-left var(--dur-slide) var(--ease-in) forwards}.carousel-slide.exit-right{animation:slide-exit-right var(--dur-slide) var(--ease-in) forwards}.carousel-slide.enter-left{animation:slide-enter-left var(--dur-slide) var(--ease-out) forwards}.carousel-slide.enter-right{animation:slide-enter-right var(--dur-slide) var(--ease-out) forwards}@keyframes slide-exit-left{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-60px)}}@keyframes slide-exit-right{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(60px)}}@keyframes slide-enter-left{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:translate(0)}}@keyframes slide-enter-right{0%{opacity:0;transform:translate(-60px)}to{opacity:1;transform:translate(0)}}.thumb-strip{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;gap:.75rem;padding-top:1rem}.thumb{appearance:none;background:transparent;border:2px solid transparent;padding:6px 8px 4px;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;color:var(--ink);transition:transform var(--dur-quick) var(--ease-press),background var(--dur-quick) var(--ease-drift),border-color var(--dur-quick) var(--ease-drift);border-radius:4px}.thumb svg{display:block;width:4rem;height:auto}@media(hover:hover){.thumb:hover{background:var(--cream-deep);transform:translateY(-3px)}}.thumb:focus-visible{outline:2px dashed var(--lavender);outline-offset:3px}.thumb[aria-current=true]{background:var(--cream-deep);border-color:var(--ink);transform:translateY(-4px);box-shadow:3px 3px 0 0 var(--ink)}.thumb svg *{vector-effect:non-scaling-stroke}.thumb svg .thumb-fill{fill:var(--cream-deep);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}.thumb[aria-current=true] svg .thumb-fill{fill:var(--cream)}.thumb svg .thumb-stand{stroke:var(--ink);stroke-width:1.4}.thumb svg .thumb-stroke{stroke:var(--ink);stroke-width:1.2}.thumb svg .thumb-cymbal{fill:var(--ochre);stroke:var(--ink);stroke-width:1.4}.thumb svg .thumb-kick{fill:var(--offwhite)}.thumb svg .thumb-snare{fill:var(--cream)}.thumb svg .thumb-piano-body{fill:var(--lavender);stroke:var(--ink);stroke-width:1.6}.thumb svg .thumb-piano-lid{fill:var(--ink);stroke:var(--ink);stroke-width:1.2}.thumb svg .thumb-piano-shelf{fill:var(--ink)}.thumb svg .thumb-piano-leg{fill:var(--ink)}.thumb svg .thumb-piano-keys{fill:var(--offwhite);stroke:var(--ink);stroke-width:1.4}.thumb svg .thumb-piano-black{fill:var(--ink)}.thumb svg .thumb-neck{fill:#8c8479;stroke:var(--ink);stroke-width:1.2}.thumb svg .thumb-bass-head{fill:var(--ink);stroke:var(--ink);stroke-width:1.2}.thumb svg .thumb-bass-body{fill:#b3382e;stroke:var(--ink);stroke-width:1.6}.thumb svg .thumb-pickguard{fill:var(--offwhite);stroke:var(--ink);stroke-width:1.2}.thumb svg .thumb-uke-head{fill:var(--ink);stroke:var(--ink);stroke-width:1.2}.thumb svg .thumb-uke-body{fill:var(--ochre);stroke:var(--ink);stroke-width:1.6}.thumb svg .thumb-soundhole{fill:var(--ink)}.thumb svg .thumb-kick-hole{fill:var(--lavender)}.paper-svg *{vector-effect:non-scaling-stroke}.paper-svg path,.paper-svg rect,.paper-svg circle,.paper-svg ellipse,.paper-svg line{stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.paper-shadow{fill:var(--ink);stroke:none;transform:translate(6px,7px);opacity:.94}.paper-shadow *{stroke:none}.paper-svg .hit-pad,.hit-pad{fill:transparent!important;stroke:none!important;pointer-events:none;cursor:pointer}.carousel-slide:not([inert]) .hit-pad{pointer-events:all}.drums-svg .cymbal-stand{stroke-width:2.4}.drums-svg .cymbal{fill:var(--ochre);stroke-width:2.4}.drums-svg .cymbal-line{fill:none;stroke-width:1.4;opacity:.7}.drums-svg .tom-body,.drums-svg .snare-body,.drums-svg .kick-body{fill:var(--cream);stroke-width:2.6}.drums-svg .kick-body{fill:var(--offwhite)}.drums-svg .tom-head,.drums-svg .snare-head{fill:var(--cream-deep);stroke-width:2.2}.drums-svg .tom-band,.drums-svg .snare-band{stroke-width:1.8;opacity:.55}.drums-svg .kick-hole{fill:var(--lavender);stroke-width:2.4}.drum-part{cursor:pointer;transform-box:fill-box;transform-origin:center bottom;transition:transform var(--dur-quick) var(--ease-press)}.drum-part:focus{outline:none}.drum-part:focus-visible{outline:none;filter:drop-shadow(0 0 3px var(--lavender))}.drum-part.hit{animation:drum-squash var(--dur-slide) var(--ease-press) 1}@keyframes drum-squash{0%{transform:scale(1) translateY(0)}35%{transform:scale(1.08,.88) translateY(2px)}70%{transform:scale(.98,1.04) translateY(-1px)}to{transform:scale(1) translateY(0)}}.drum-part[data-part=crash].hit,.drum-part[data-part=hat].hit{animation:cymbal-tilt var(--dur-deal) var(--ease-press) 1}@keyframes cymbal-tilt{0%{transform:rotate(0)}30%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}to{transform:rotate(0)}}.ripples{opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:center}.ripples .ripple{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}.drum-part.hit .ripples{animation:ripple-pop .36s ease-out 1}@keyframes ripple-pop{0%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.25)}}.piano-svg .piano-body{fill:var(--lavender);stroke-width:2.8}.piano-svg .piano-lid{fill:var(--ink);stroke-width:2.4}.piano-svg .music-sheet{fill:var(--offwhite);stroke-width:2}.piano-svg .staff-line{stroke:var(--ink);stroke-width:1;opacity:.55}.piano-svg .treble-clef{font-family:Bravura,Apple Symbols,Noto Music,Segoe UI Symbol,Times New Roman,serif;font-size:56px;fill:var(--ink);stroke:none;opacity:.85}.piano-svg .piano-shelf{fill:var(--ink);stroke-width:2.2}.piano-svg .piano-leg{fill:var(--ink);stroke-width:2}.piano-svg .key{cursor:pointer;transform-box:fill-box;transform-origin:center top}.piano-svg .key-white .key-rect{fill:var(--offwhite);stroke-width:2}.piano-svg .key-black .key-rect{fill:var(--ink);stroke:var(--ink);stroke-width:1.6}.piano-svg .key:focus{outline:none}.piano-svg .key:focus-visible{outline:none;stroke:var(--lavender);stroke-width:3}.piano-svg .key.hit{animation:key-press var(--dur-drop) var(--ease-press) 1}@keyframes key-press{0%{transform:translateY(0)}35%{transform:translateY(3px)}to{transform:translateY(0)}}.piano-svg .key-white.hit .key-rect{fill:var(--ochre)}.piano-svg .key-black.hit .key-rect{fill:var(--lavender)}.music-note-display .note-glyph{pointer-events:none;opacity:0;transform-origin:center;transform-box:fill-box;animation:note-display 1.6s ease-out forwards}.music-note-display .note-head{fill:var(--ink);stroke:var(--ink);stroke-width:1}.music-note-display .note-stem{stroke:var(--ink);stroke-width:1.8}.music-note-display .note-accidental{font-family:Times New Roman,Georgia,serif;font-size:10px;fill:var(--ink);stroke:none}.music-note-display .note-letter{font-family:var(--font-display);font-size:var(--fs-small);fill:var(--brick);stroke:var(--ink);stroke-width:.5;paint-order:stroke fill}@keyframes note-display{0%{opacity:0;transform:translateY(0)}12%{opacity:1;transform:translateY(0)}72%{opacity:1;transform:translateY(-2px)}to{opacity:0;transform:translateY(-12px)}}.bass-svg .bass-neck,.uke-svg .uke-neck{fill:#8c8479;stroke-width:2.2}.bass-svg .bass-head,.uke-svg .uke-head{fill:var(--ink);stroke-width:2.2}.fret{stroke:var(--cream);stroke-width:1.6;opacity:.85}.peg{fill:var(--ochre);stroke-width:1.6}.pickup{fill:var(--ink);stroke-width:1.8}.pickup-mm{stroke-width:2}.knob{fill:var(--cream);stroke-width:1.8}.bridge{fill:var(--ink);stroke-width:1.8}.bridge-saddle{stroke:var(--cream);stroke-width:1.2;opacity:.7}.bass-svg .bass-body{fill:#b3382e;stroke-width:2.8}.bass-svg .bass-pickguard{fill:var(--offwhite);stroke:var(--ink);stroke-width:1.6}.bass-svg .pole-piece{fill:var(--cream);stroke:none}.uke-svg .uke-body{fill:var(--ochre);stroke-width:2.8}.uke-svg .soundhole{fill:var(--ink);stroke-width:2}.uke-svg .soundhole-rim{stroke:var(--ink);stroke-width:1.2;opacity:.6}.strings .string{fill:none;stroke:var(--ink);stroke-width:1.6;cursor:pointer;stroke-linecap:round;transition:stroke-width .1s ease,stroke .1s ease}@media(hover:hover){.strings .string:hover{stroke-width:2.4}}.strings .string:focus{outline:none}.strings .string:focus-visible{outline:none;stroke:var(--lavender);stroke-width:3.5}.strings .string.plucked{animation:string-flash var(--dur-drift) var(--ease-out) 1}@keyframes string-flash{0%{stroke-width:2.6;stroke:var(--lavender)}to{stroke-width:1.6;stroke:var(--ink)}}.paper-svg .strum-zone,.strum-zone{cursor:pointer;pointer-events:none;fill:transparent!important;stroke:none!important}.carousel-slide:not([inert]) .strum-zone{pointer-events:all}.strum-zone:focus{outline:none}.strum-zone:focus-visible{outline:2px dashed var(--lavender);outline-offset:2px}.note-glyphs text{font-family:var(--font-display);font-size:22px;fill:var(--lavender);stroke:var(--ink);stroke-width:1;paint-order:stroke fill}.note-float{animation:note-rise 1.1s ease-out forwards}@keyframes note-rise{0%{opacity:0;transform:translate(0) rotate(-4deg)}20%{opacity:1}to{opacity:0;transform:translate(8px,-60px) rotate(8deg)}}.carousel-slide.self-playing .sp{stroke-dasharray:var(--pl, 600);stroke-dashoffset:var(--pl, 600);animation:sp-redraw .7s cubic-bezier(.65,.05,.36,1) forwards}.carousel-slide.self-playing .sp-fade{opacity:0;animation:sp-fadein var(--dur-drift) var(--ease-out) 80ms forwards}@keyframes sp-redraw{to{stroke-dashoffset:0}}@keyframes sp-fadein{to{opacity:1}}.carousel-slide.self-playing{pointer-events:none}@media(prefers-reduced-motion:reduce){.carousel-slide,.carousel-slide.exit-left,.carousel-slide.exit-right,.carousel-slide.enter-left,.carousel-slide.enter-right{animation:none!important;transition:none!important}.carousel-slide.self-playing .sp,.carousel-slide.self-playing .sp-fade{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important;opacity:1!important}.carousel-slide.color-flash .paper-svg{animation:color-flash .32s ease-out 1}@keyframes color-flash{0%{filter:drop-shadow(0 0 0 var(--lavender))}50%{filter:drop-shadow(0 0 12px var(--lavender))}to{filter:drop-shadow(0 0 0 var(--lavender))}}.drum-part.hit,.piano-svg .key.hit,.strings .string.plucked,.note-float,.music-note-display .note-glyph{animation:none!important}.music-note-display .note-glyph{opacity:1}.drum-part.hit .tom-body,.drum-part.hit .snare-body,.drum-part.hit .kick-body,.drum-part.hit .cymbal{stroke:var(--lavender)!important}.piano-svg .key-white.hit .key-rect{fill:var(--ochre)!important}.piano-svg .key-black.hit .key-rect{fill:var(--lavender)!important}.strings .string.plucked{stroke:var(--lavender)!important}}@media(max-width:640px){.carousel-viewport{height:26rem}.carousel-slide .paper-svg{height:24rem}.thumb svg{width:3rem}}@media(max-width:360px){.carousel,.thumb-strip{gap:.25rem}.thumb{padding:4px 4px 2px}}
