:root{--jam-level:0;--jam-bass:0;--jam-high:0;--jam-hue:210;--jam-active:0}.jam-breathe{position:relative;isolation:isolate}.jam-breathe:before{content:"";position:absolute;inset:-12%;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 50% 42%,hsla(var(--jam-hue),85%,58%,calc(.05 + var(--jam-level) * .2)) 0,hsla(calc(var(--jam-hue) + 40),80%,46%,calc(.02 + var(--jam-level) * .1)) 45%,transparent 72%);opacity:calc(.35 + var(--jam-level) * .65);transform:scale(calc(1 + var(--jam-level) * .05 + var(--jam-bass) * .03));transition:opacity .12s linear;will-change:transform,opacity}.jam-ambient{background-image:radial-gradient(120% 80% at 50% 0,hsla(var(--jam-hue),70%,30%,calc(.16 + var(--jam-level) * .22)) 0,hsla(calc(var(--jam-hue) + 55),65%,18%,.1) 55%,transparent 85%);transition:background-image .9s linear}.jam-react-scale{transition:transform .14s cubic-bezier(.22,1,.36,1),box-shadow .16s ease;will-change:transform}.jam-react-scale.is-sounding{transform:scale(calc(1 + var(--jam-level) * .04));box-shadow:0 0 0 1px hsla(var(--jam-hue),90%,65%,calc(.25 + var(--jam-level) * .5)),0 6px 22px -8px hsla(var(--jam-hue),90%,55%,calc(var(--jam-level) * .7))}.jam-press{transition:transform .16s cubic-bezier(.22,1,.36,1);will-change:transform}.jam-press:active{transform:scale(.97)}.jam-door{position:relative;overflow:hidden}.jam-door:after{content:"";position:absolute;inset-inline:14px;bottom:0;height:2px;pointer-events:none;border-radius:999px;background:linear-gradient(90deg,transparent 0,rgb(var(--jam-door-accent,124 92 246)/.22) 26%,rgb(var(--jam-door-accent,124 92 246)/.92) 50%,rgb(var(--jam-door-accent,124 92 246)/.22) 74%,transparent 100%);background-size:42% 100%;background-repeat:no-repeat;animation:jam-door-signal 5.8s ease-in-out infinite;animation-delay:calc(var(--jam-i, 0) * -.73s)}.jam-door-tools{scroll-snap-type:inline proximity;scrollbar-width:none;overscroll-behavior-inline:contain}.jam-door-tools::-webkit-scrollbar{display:none}@keyframes jam-door-signal{0%,15%{background-position:-45% 0;opacity:.35}48%,62%{background-position:50% 0;opacity:.9}to{background-position:145% 0;opacity:.35}}.jam-eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px;width:14px;flex:none;vertical-align:middle}.jam-eq>i{display:block;width:3px;border-radius:1px;background:currentColor;height:22%;transform-origin:bottom;transition:height 90ms linear}.jam-eq.is-playing>i:first-child{height:calc(22% + var(--jam-bass) * 78%)}.jam-eq.is-playing>i:nth-child(2){height:calc(22% + var(--jam-level) * 78%)}.jam-eq.is-playing>i:nth-child(3){height:calc(22% + var(--jam-high) * 78%)}.jam-key{position:relative;overflow:hidden}.jam-key:after{content:"";position:absolute;left:50%;bottom:14%;width:140%;aspect-ratio:1;translate:-50% 50%;border-radius:9999px;pointer-events:none;background:radial-gradient(circle,hsla(var(--jam-hue),95%,70%,.55) 0,hsla(var(--jam-hue),95%,65%,.18) 40%,transparent 68%);opacity:0;transform:scale(.2)}.jam-key.is-pressed:after{animation:jam-key-ripple .52s cubic-bezier(.22,1,.36,1)}@keyframes jam-key-ripple{0%{opacity:.9;transform:scale(.2)}to{opacity:0;transform:scale(1)}}.jam-enter{animation:jam-enter-in .42s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--jam-i, 0) * 40ms)}@keyframes jam-enter-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.jam-tab-in{animation:jam-tab-in .18s cubic-bezier(.22,1,.36,1) both}@keyframes jam-tab-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.jam-ambient,.jam-breathe:before,.jam-eq>i,.jam-press,.jam-react-scale{transition:none!important;transform:none!important;animation:none!important}.jam-door:after,.jam-enter,.jam-key.is-pressed:after,.jam-tab-in{animation:none!important}.jam-enter,.jam-tab-in{opacity:1;transform:none}}