.playable-piano[data-astro-cid-752xcj35]{--n:14;--keys-h:clamp(5.75rem, 17svh, 10.5rem);z-index:3;width:100%;position:relative}.piano-keys[data-astro-cid-752xcj35]{height:var(--keys-h);touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#000;position:relative;overflow:clip}.piano-key[data-astro-cid-752xcj35]{transform-origin:50% 0;transition:transform .5s var(--spring-lively), background-color .28s ease;border:0;padding:0;position:absolute;top:0}.piano-key[data-astro-cid-752xcj35]:not(:disabled){cursor:pointer}.white[data-astro-cid-752xcj35]{left:calc(var(--i) / var(--n) * 100%);width:calc(100% / var(--n) - 1px);background:linear-gradient(#cfccc4 0,#f3f1ea 12%,#f8f6f1 86%,#e6e3da 100%);border-radius:0 0 5px 5px;height:100%}.black[data-astro-cid-752xcj35]{left:calc((var(--i) + .72) / var(--n) * 100%);width:calc(.56 / var(--n) * 100%);z-index:1;background:linear-gradient(#050506 0,#1c1c20 70%,#2c2c31 94%,#0c0c0e 100%);border-radius:0 0 4px 4px;height:62%;box-shadow:0 3px 6px #0000008c}.white[data-astro-cid-752xcj35].is-down{background:linear-gradient(#b9b6ae 0,#dcdfe8 40%,#a9c1f7 100%);transition-duration:45ms,80ms;transition-timing-function:ease-out;transform:perspective(620px)rotateX(-5deg)}.black[data-astro-cid-752xcj35].is-down{background:linear-gradient(#050506 0,#1a2547 70%,#3a5cb0 100%);transition-duration:45ms,80ms;transition-timing-function:ease-out;transform:perspective(620px)rotateX(-8deg)}.piano-key[data-astro-cid-752xcj35]:focus-visible{outline-offset:-4px;border-radius:2px 2px 6px 6px;outline:2px solid #3473ff}.black[data-astro-cid-752xcj35]:focus-visible{outline-color:#7fa8ff}.piano-help[data-astro-cid-752xcj35]{right:calc(var(--page-edge) + min(40vw, 540px) + 1rem);pointer-events:none;align-items:flex-end;gap:.35rem;display:flex;position:absolute;bottom:calc(100% + .5rem)}.piano-help[data-astro-cid-752xcj35] svg[data-astro-cid-752xcj35]{flex-shrink:0;translate:0 6px}.piano-hint[data-astro-cid-752xcj35]{left:var(--page-edge);margin:0;position:absolute;bottom:calc(100% + .875rem)}.piano-hint[data-astro-cid-752xcj35] span[data-astro-cid-752xcj35]{display:none}@media (hover:hover) and (pointer:fine){.piano-hint[data-astro-cid-752xcj35] span[data-astro-cid-752xcj35]{display:inline}}html:not(.js) .piano-help[data-astro-cid-752xcj35],html:not(.js) .piano-hint[data-astro-cid-752xcj35]{display:none}.piano-glyphs[data-astro-cid-752xcj35]{pointer-events:none;height:0;position:absolute;inset:auto 0 100%}.piano-glyph{font-family:var(--font-hand);color:#7fa8ff;opacity:0;will-change:transform, opacity;font-size:1.75rem;line-height:1;position:absolute;bottom:0}@keyframes key-rise{0%{translate:0 102%}}@media (prefers-reduced-motion:no-preference){html:not([data-motion=off]) .piano-key[data-astro-cid-752xcj35]{animation:key-rise .95s var(--spring) both;animation-delay:calc(.32s + var(--i) * 26ms)}}@media (width<=760px){.playable-piano[data-astro-cid-752xcj35]{--n:8;--keys-h:clamp(5.5rem, 14svh, 7.25rem)}.piano-high[data-astro-cid-752xcj35]{display:none}.piano-help[data-astro-cid-752xcj35]{left:var(--page-edge);flex-direction:column;align-items:flex-start;gap:0;bottom:calc(100% + .5rem);right:auto}.piano-help[data-astro-cid-752xcj35] .hand[data-astro-cid-752xcj35]{font-size:1.125rem}.piano-help[data-astro-cid-752xcj35] svg[data-astro-cid-752xcj35]{align-self:center;width:30px;height:30px}.piano-hint[data-astro-cid-752xcj35]{display:none}}@media (width>=761px) and (width<=1100px){.piano-hint[data-astro-cid-752xcj35] span[data-astro-cid-752xcj35]{display:none}.piano-help[data-astro-cid-752xcj35]{right:calc(var(--page-edge) + 44vw + 1rem)}}.playable-trombone[data-astro-cid-wbij672d]{width:100%}.trombone-drawing[data-astro-cid-wbij672d]{touch-action:pan-y;width:100%;height:auto;display:block;overflow:visible}.trombone-slide[data-astro-cid-wbij672d]{cursor:grab;touch-action:pan-y}.trombone-slide[data-astro-cid-wbij672d]:active{cursor:grabbing}.trombone-controls[data-astro-cid-wbij672d]{color:var(--color-fg-muted);grid-template-columns:auto 1fr;align-items:center;gap:.875rem;margin-top:1rem;font-size:.875rem;display:grid}input[data-astro-cid-wbij672d]{width:100%;min-width:0;min-height:2.75rem;accent-color:var(--color-accent);cursor:pointer;margin:0}.instrument-panel[data-astro-cid-wbij672d]{flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:.75rem;display:flex}.trombone-play[data-astro-cid-wbij672d]{touch-action:none;-webkit-user-select:none;user-select:none}.playing[data-astro-cid-wbij672d] .trombone-play[data-astro-cid-wbij672d]{background:var(--color-accent);border-color:var(--color-accent);color:#08080a}output[data-astro-cid-wbij672d]{min-width:3rem;font-family:var(--font-sans);color:var(--color-accent);font-size:1.25rem;line-height:1}.partial-controls[data-astro-cid-wbij672d]{align-items:center;gap:.75rem;margin-left:auto;display:flex}.partial-stepper[data-astro-cid-wbij672d]{align-items:center;gap:.625rem;display:flex}.partial-stepper[data-astro-cid-wbij672d] button[data-astro-cid-wbij672d]{border:1px solid var(--color-hairline-strong);width:2.75rem;height:2.75rem;color:var(--color-fg);cursor:pointer;transition:border-color .2s ease, transform .5s var(--spring-lively);border-radius:999px;font-size:1.125rem}.partial-stepper[data-astro-cid-wbij672d] button[data-astro-cid-wbij672d]:hover:not(:disabled){border-color:var(--color-fg-muted)}.partial-stepper[data-astro-cid-wbij672d] button[data-astro-cid-wbij672d]:active:not(:disabled){transition-duration:.2s,50ms;transform:scale(.92)}.partial-stepper[data-astro-cid-wbij672d] button[data-astro-cid-wbij672d]:disabled{opacity:.32;cursor:default}.partial-label[data-astro-cid-wbij672d]{text-align:center;min-width:1ch}.trombone-hint[data-astro-cid-wbij672d]{margin:1rem 0 0}small[data-astro-cid-wbij672d]{margin-top:.25rem;display:block}html:not(.js) .instrument-panel[data-astro-cid-wbij672d],html:not(.js) .trombone-controls[data-astro-cid-wbij672d],html:not(.js) .trombone-hint[data-astro-cid-wbij672d],html:not(.js) .playable-trombone[data-astro-cid-wbij672d] small[data-astro-cid-wbij672d]{display:none}@media (width<=30rem){.partial-controls[data-astro-cid-wbij672d]{margin-left:0}}
