:root{color-scheme:dark;--acid:#c0ff00;--black:#080a08}*{box-sizing:border-box}body,html{margin:0;overflow:hidden;background:var(--black);font-family:Arial,Helvetica,sans-serif}body,canvas,html{width:100%;height:100%}canvas{display:block;outline:none;touch-action:none;cursor:none}main{position:fixed;inset:0}.status{position:absolute;inset:0;display:grid;place-content:center;gap:20px;color:var(--acid);background:#080a08;text-align:center}.status strong{font-size:clamp(40px,7vw,100px);font-weight:900;letter-spacing:-.07em}.status span{font:12px monospace;letter-spacing:.14em}.error{max-width:600px;padding:24px;color:#d6ddcd;line-height:1.6}.material-instrument{position:absolute;left:50%;top:50%;width:min(calc(100vw - 32px),calc((100vh - 24px)*1.5),1536px);aspect-ratio:3/2;transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none}.material-chassis{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;clip-path:inset(7% 1.45% 7.45% 1.45% round 1.5%)}.material-control{position:absolute;transform:translate(-50%,-50%);padding:0;border:0;background:none;touch-action:none;outline:none}.material-control:focus-visible{outline:1px solid #c6ff34;outline-offset:2px;border-radius:8%}.material-key{cursor:pointer}.dial-cap,.material-key img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.material-key .key-on-window{clip-path:inset(42% 33% 43% 33% round 6%)}.material-dial{cursor:ns-resize;border-radius:50%}.material-dial:focus-visible{outline:none}.dial-marker-orbit{position:absolute;inset:0;pointer-events:none}.dial-marker-orbit img{position:absolute;top:3%;left:43%;width:14%;height:30%;object-fit:fill}.material-tempo{position:absolute;left:86.2%;top:12.6%;width:4.4%;height:4.8%;border:0;background:transparent;color:#c6ff34;text-align:center;font-family:Arial,Helvetica,sans-serif;font-size:clamp(10px,1.5vw,24px);font-weight:500;appearance:textfield;outline:none;padding:0}.material-tempo:focus-visible{outline:1px solid #c6ff34}.material-tempo::-webkit-inner-spin-button{appearance:none}.material-key.modifier-key .key-on-window{clip-path:circle(29% at 50% 50%)}.audio-screen{position:absolute;left:29.2%;top:10.6%;width:56.2%;height:8%;padding:0;border:0;background:#080e08;cursor:pointer;border-radius:3px;overflow:hidden}.audio-screen canvas{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}.audio-screen:focus-visible{outline:1px solid #c6ff34;outline-offset:3px}.screen-pause,.screen-play{position:absolute;left:8px;top:8px;width:0;height:0;border-left:7px solid #c6ff34;border-top:4px solid transparent;border-bottom:4px solid transparent;opacity:.7;pointer-events:none}.screen-pause{width:7px;height:8px;border:0;border-inline:2px solid #c6ff34}.material-key[data-current=true]:after{content:"";position:absolute;inset:6%;border:1px solid #c6ff34;border-radius:7%;pointer-events:none}.audio-error{position:absolute;top:20%;left:29%;max-width:55%;padding:10px;background:#111b0b;color:#c6ff34;font-size:12px}.dial-cap.control-sprite,.material-key .control-sprite{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;background-size:contain;background-position:50%;background-repeat:no-repeat}.modifier-key:focus-visible{border-radius:50%}.pattern-anchor{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 25%,#eee,#999 55%,#494949);pointer-events:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.liquid-interaction-plane{position:absolute;left:50%;top:50%;width:max(100vw,150vh);height:max(100vh,66.666667vw);transform:translate(-50%,-50%) scale(var(--material-zoom,1));pointer-events:none}.liquid-start{position:absolute;left:41%;top:66%;width:26%;height:15%;border:0;background:transparent;cursor:pointer;border-radius:50%;pointer-events:auto}.liquid-start:focus-visible{outline:1px solid #c6ff34;outline-offset:8px}.liquid-demo{position:absolute;border-radius:50%;padding:0;border:0;background:transparent;pointer-events:auto;outline:none}.liquid-demo,.liquid-page,.liquid-page .liquid-start,.liquid-page canvas{cursor:default}.mobile-liquid{height:100dvh}.mobile-demo{left:40%;top:60%;width:20%;height:auto;aspect-ratio:109/122;transform:translateY(-50%);min-width:44px;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.mobile-demo:focus-visible{outline:1px solid #d7ff71;outline-offset:5px}.mobile-liquid .audio-error{left:8%;right:8%;top:auto;bottom:5%;max-width:none;text-align:center;background:#050a02cc}.fluid-instrument{position:absolute;left:50%;top:50%;width:100vw;height:100vh;transform:translate(-50%,-50%);pointer-events:none}.fluid-instrument .audio-screen,.fluid-instrument .material-control,.fluid-modifiers,.fluid-step,.fluid-tempo-digit{pointer-events:auto}.fluid-step{position:absolute;background:none;border:0;padding:0;cursor:pointer;border-radius:45%}.fluid-step:focus-visible{outline:1px solid #e0ff7b;outline-offset:3px}.fluid-hit .fluid-value{position:absolute;left:50%;top:12%;transform:translateX(-50%);font:600 13px monospace;color:#eaffb0;opacity:0;pointer-events:none;text-shadow:0 0 8px #baff08}.fluid-hit:focus .fluid-value,.fluid-hit:hover .fluid-value{opacity:1}.fluid-instrument .audio-screen{left:36%;top:8%;width:37%;height:13%;background:#020500;border-radius:46%}.fluid-instrument .audio-screen canvas{border-radius:46%}.fluid-instrument .screen-pause,.fluid-instrument .screen-play{display:none}.fluid-play{left:88%;top:8%;width:9%;height:13%}.fluid-tempo-digits{position:absolute;inset:0;pointer-events:none}.fluid-tempo-digit{position:absolute;cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}.fluid-play:focus-visible{outline:none}.fluid-jam,.fluid-jam:focus-visible{outline:none;box-shadow:none;touch-action:none}.fluid-section,.fluid-section:focus-visible{outline:none;box-shadow:none}.fluid-modifiers{position:absolute;display:flex;justify-content:center;gap:5px}.fluid-modifiers button{border:0;background:#050a00bb;color:#607526;border-radius:45%;font:700 10px monospace;cursor:pointer}.fluid-modifiers button[aria-pressed=true]{color:#dcff83;text-shadow:0 0 7px #baff08}.fluid-instrument .audio-screen canvas,.fluid-instrument .fluid-value{visibility:hidden}.fluid-instrument .audio-screen{background:transparent}.fluid-modifiers button,.fluid-modifiers button[aria-pressed=true]{background:transparent;color:transparent;text-shadow:none}.background-canvas{cursor:default}.fluid-pages{inset:0;transform:translate3d(0,calc(var(--design-depth,0) * var(--sound-travel,1.25) * -100vh),0);will-change:transform}.fluid-pages,.sound-design{position:absolute;pointer-events:none}.sound-design{top:calc(var(--sound-travel,1.25) * 100vh);left:0;width:100vw;height:100vh}.sound-design .fluid-step,.sound-design .material-control{pointer-events:auto}.sound-back{left:90.1%;top:4.7%;width:7%;height:10%}.sound-design .fluid-value{visibility:hidden}.acid-loading{position:absolute;inset:0;z-index:20;isolation:isolate;display:grid;place-items:center;overflow:hidden;background:#030403;color:#c0ff00;cursor:default;opacity:1;transition:opacity .72s cubic-bezier(.25,.65,.3,1)}.acid-loading:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.2' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.acid-loading.is-leaving{opacity:0;pointer-events:none}.acid-loading-content{display:flex;flex-direction:column;align-items:center;width:min(88vw,640px);transform:translateY(-2vh);animation:acid-loading-appear .42s cubic-bezier(.22,.61,.36,1) both}@keyframes acid-loading-appear{0%{opacity:0}to{opacity:1}}.acid-loading-logo{display:block;width:100%;aspect-ratio:1220/440;background:url(/branding/loading-liquid-wordmark.svg) 50%/contain no-repeat}@font-face{font-family:AcidLoadingInk;src:url(/fonts/Fredoka.ttf) format("truetype");font-weight:300 700;font-style:normal;font-display:swap}.acid-loading-label{display:block;margin-top:20px;font:400 10px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.14em;color:#bfff18}.acid-loading-lettering{display:block;width:132px;height:auto;overflow:visible;fill:currentColor}.acid-loading-lettering text{font:500 32px AcidLoadingInk,sans-serif;letter-spacing:.035em}.acid-loading-error{max-width:360px;margin:24px 0 0;font:400 13px/1.6 Arial,Helvetica,sans-serif;color:#c3c8ba;text-align:center;overflow-wrap:anywhere}@media (prefers-reduced-motion:reduce){.acid-loading{transition-duration:1ms}.acid-loading-content{animation:none}}