:root{--brown-g: linear-gradient(0deg, #744210, #b7791f, #ecc94b);--pink-g: linear-gradient(0deg, #b83280, #ed64a6, #fbb6ce);--white-g: linear-gradient(0deg, #4a5568, #a0aec0, #e2e8f0);--blue-g: linear-gradient(0deg, #1e3a8a, #3b82f6, #bfdbfe);--violet-g: linear-gradient(0deg, #4c1d95, #8b5cf6, #ddd6fe);--idle-g: linear-gradient(0deg, #000000, #0a0a0a);--ink: #fff}:root[data-ink=dark]{--ink: #0f172a }*{box-sizing:border-box}html,body{margin:0;height:100dvh;overflow:hidden;overscroll-behavior:none;background:#050505;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}.layers,.layer,#surface,#spec,#fx{position:fixed;inset:0}#spec,#fx{width:100%;height:100%}#fx{pointer-events:none}.layer{opacity:0;transition:opacity var(--blend, .6s) ease}.layer[data-id=brown]{background:var(--brown-g)}.layer[data-id=pink]{background:var(--pink-g)}.layer[data-id=white]{background:var(--white-g)}.layer[data-id=blue]{background:var(--blue-g)}.layer[data-id=violet]{background:var(--violet-g)}.layer.idle{background:var(--idle-g);opacity:1}.playing .layer.idle{opacity:0}#surface{touch-action:none;color:var(--ink)}@media(hover:hover)and (pointer:fine){#surface[data-zone=synth]{cursor:ns-resize}#surface[data-zone=colour]{cursor:pointer}#surface[data-drag=colour]{cursor:ew-resize}}.hit{position:absolute;padding:0;border:0;border-radius:2px;background:none;cursor:pointer;touch-action:none}.hit:after{content:"";position:absolute;inset:-6px}:focus{outline:none}:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#insets{position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}html.desktop.mac .titlebar{position:fixed;inset:0 0 auto;height:32px;-webkit-app-region:drag}html.desktop.mac .hit{-webkit-app-region:no-drag}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01s!important}}