@layer components{.acid-deck{display:flex;flex-direction:column;gap:1rem;background:var(--color-void);isolation:isolate;min-width:0;max-width:100%}.acid-group,.acid-group__grid{min-width:0;max-width:100%}.acid-deck__defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.acid-hairline{height:1px;border:0;margin:.25rem 0;background:color-mix(in srgb,var(--color-ink) 90%,var(--color-haze));opacity:.7}.acid-group{--knob-accent: var(--color-acid);--ak-tint: var(--knob-accent);display:flex;flex-direction:column;gap:.5rem}.acid-group--trip{--knob-accent: var(--color-trip);--ak-tint: var(--color-trip)}.acid-group--trip-2{--knob-accent: var(--color-trip-2);--ak-tint: var(--color-trip-2)}.acid-group--acid{--knob-accent: var(--color-acid);--ak-tint: var(--color-acid)}.acid-group__header{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}.acid-group__label{font-family:var(--font-mono);font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.2em;color:#fff6;margin:0}.acid-group__reset{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:color-mix(in srgb,var(--color-acid) 70%,var(--color-haze));background:none;border:0;padding:2px 4px;cursor:pointer;border-radius:3px;transition:color .12s ease,text-shadow .12s ease}.acid-group__reset:hover{color:var(--color-acid);text-shadow:0 0 8px color-mix(in srgb,var(--color-acid) 60%,transparent)}.acid-group__reset:focus-visible{outline:2px solid var(--color-acid);outline-offset:2px}.acid-group__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;justify-items:center}@media(min-width:640px){.acid-group__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.acid-knob{--knob-fill: 0;--knob-accent: var(--color-acid);--ak-blur: calc(1 + var(--y-bass, 0) * 2);display:inline-flex;flex-direction:column;align-items:center;gap:.375rem;padding:2px;border:0;background:none;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:12px}.acid-knob:active{cursor:grabbing}.acid-knob__svg{display:block;width:96px;height:96px;overflow:visible;mix-blend-mode:screen;filter:brightness(calc(1 + var(--y-drop, 0) * .5))}.acid-knob__label{font-family:var(--font-display);font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:var(--color-haze);color:color-mix(in srgb,var(--color-haze) 30%,#ece9f5);text-align:center;max-width:96px}.ak-aura{transform-box:fill-box;transform-origin:center;transform:scale(calc(1 + var(--y-beat, 0) * .03));filter:drop-shadow(0 0 calc(var(--y-beat, 0) * 8px) color-mix(in srgb,var(--knob-accent) 80%,transparent))}.ak-track{fill:none;stroke:var(--color-ink);stroke:color-mix(in srgb,var(--color-ink) 40%,#ece9f5);stroke-width:3;stroke-linecap:round;opacity:calc(.4 + var(--y-trail, 0) * .3)}.ak-arc{fill:none;stroke:url(#ak-arc);stroke-width:4;stroke-linecap:round;stroke-dasharray:calc(var(--knob-fill, 0) * 75) 100}.ak-head{fill:var(--color-acid);filter:url(#ak-glow);transition:transform .18s cubic-bezier(.34,1.56,.64,1)}.ak-hit{fill:transparent;stroke:none;cursor:grab}.ak-core-shape{fill:url(#ak-core);stroke:var(--color-ink);stroke:color-mix(in srgb,var(--color-ink) 55%,#ece9f5);stroke-width:calc(1px + var(--y-bass, 0) * 2px)}.ak-readout{fill:var(--color-haze);fill:color-mix(in srgb,var(--color-haze) 15%,#ece9f5);font-family:var(--font-mono);font-size:13px;text-anchor:middle;dominant-baseline:central;pointer-events:none}.ak-detent{stroke:var(--color-acid);stroke-width:2;stroke-linecap:round;opacity:.65}.acid-knob:hover .ak-core-shape{stroke:color-mix(in srgb,var(--knob-accent) 60%,#ece9f5)}.acid-knob:hover .ak-head{filter:url(#ak-glow) drop-shadow(0 0 5px color-mix(in srgb,var(--color-acid) 70%,transparent))}.acid-knob:focus{outline:none}.acid-knob:focus-visible{outline:2px solid var(--color-acid);outline-offset:2px}.acid-knob:focus-visible .acid-knob__svg{filter:brightness(calc(1 + var(--y-drop, 0) * .5)) drop-shadow(0 0 6px var(--color-acid))}.acid-knob:active .ak-head{fill:var(--color-acid);filter:url(#ak-glow) drop-shadow(0 0 7px var(--color-acid))}.acid-knob:active .ak-head{transition:none}.acid-knob--core{align-self:center}.acid-knob--core .acid-knob__svg{width:140px;height:140px}.acid-knob--core .acid-knob__label{font-size:12px;letter-spacing:.14em;max-width:160px}.acid-knob--core .ak-aura{transform:scale(calc(1 + var(--y-beat, 0) * .06));filter:drop-shadow(0 0 calc(var(--y-beat, 0) * 14px) color-mix(in srgb,var(--color-acid) 85%,transparent))}.acid-knob--core .ak-core-shape{fill:url(#ak-core-hot);stroke-width:calc(1px + var(--y-bass, 0) * 4px)}.acid-knob--core .ak-readout{font-size:18px;fill:#ece9f5}.acid-knob--core .ak-flare{fill:none;stroke:var(--color-acid);stroke-width:2;filter:url(#ak-bloom);opacity:calc(var(--y-drop, 0));transform-box:fill-box;transform-origin:center;transform:scale(calc(1 + var(--y-drop, 0) * .12));pointer-events:none}@media(prefers-reduced-motion:reduce){.acid-knob__svg,.acid-knob:focus-visible .acid-knob__svg{filter:none}.acid-knob:focus-visible .acid-knob__svg{filter:drop-shadow(0 0 6px var(--color-acid))}.ak-aura,.acid-knob--core .ak-aura{transform:none;filter:none}.ak-track{opacity:.4}.ak-core-shape,.acid-knob--core .ak-core-shape{stroke-width:1px}.ak-head,.acid-knob:active .ak-head{transition:none}.acid-knob--core .ak-flare{opacity:0;transform:none}.acid-group__reset{transition:none}}}