@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(./bricolage-grotesque-vietnamese-standard-normal-Br4FGdAc.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(./bricolage-grotesque-latin-ext-standard-normal-qp-RdZgh.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(./bricolage-grotesque-latin-standard-normal-C5Lc8Qmc.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--paper: #e9eef0;--paper-2: #dde5e9;--ink: #14304a;--ink-soft: #4a6276;--rule: #b9c7cf;--accent: #b3263e;--display: "Bricolage Grotesque Variable", system-ui, sans-serif;--purple: #9a7ad6;--yellow: #f6d531;--green: #5fcf4c;--blue: #3c9fd8;--orange: #ff5b3d;--plastic: #f8f8f5;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--paper: #0f2233;--paper-2: #16304a;--ink: #dce6ea;--ink-soft: #94aab8;--rule: #2b465d;--accent: #f0798d;--plastic: #ecece7}}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:var(--paper);color:var(--ink);font-family:system-ui,sans-serif;line-height:1.5}main{width:min(100%,44rem);margin:0 auto;padding:1.5rem 1rem 3rem}.back{color:var(--ink-soft);font-family:var(--display);font-size:.875rem;text-decoration-color:var(--accent);text-underline-offset:.18em}h1{margin:.5rem 0 .75rem;font-family:var(--display);font-size:clamp(2.25rem,7vw,3rem);font-weight:800;font-stretch:82%;letter-spacing:-.04em;line-height:1}.lede{color:var(--ink-soft);margin:0 0 1.5rem;max-width:38rem}a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:.18em}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.stage{width:min(100%,34rem);margin:0 auto}.synth{position:relative;container-type:inline-size;aspect-ratio:1.16;border-radius:8%/9.3%;background:radial-gradient(120% 90% at 30% 10%,#fff 0%,transparent 60%),var(--plastic);box-shadow:inset 0 0 0 1px #0000000a,inset 0 -.8cqw 1.2cqw #0000000d,0 1.2cqw #d7d7cf,0 3cqw 5cqw #00000038;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.slot{position:absolute;display:grid;justify-items:center;gap:.8cqw;transform:translate(-50%,-50%)}.engraving{position:absolute;top:100%;margin-top:.6cqw;font-family:var(--display);font-size:2.6cqw;font-weight:600;letter-spacing:.04em;color:#a9a9a1;text-shadow:0 1px 0 #fff;white-space:nowrap}.knob{position:relative;width:14cqw;aspect-ratio:1;border-radius:50%;touch-action:none;cursor:grab;box-shadow:0 1.2cqw color-mix(in srgb,var(--c) 60%,#222),0 2.2cqw 2.6cqw #00000047}.knob.held{cursor:grabbing}.knob:focus-visible{outline-offset:.8cqw;border-radius:50%}.knob-cap{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 42% 36%,color-mix(in srgb,var(--c) 70%,#fff) 0%,var(--c) 45%,transparent 66%),radial-gradient(circle,transparent 64%,rgb(0 0 0 / .08) 66%,transparent 70%),repeating-conic-gradient(var(--c) 0deg 6deg,color-mix(in srgb,var(--c) 78%,#000) 6deg 10deg);transition:transform 80ms ease-out}.knob-mark{position:absolute;left:50%;top:6%;width:1.1cqw;height:3.6cqw;border-radius:1cqw;background:#fff;transform:translate(-50%);box-shadow:0 0 0 .15cqw #00000014}.screen{position:absolute;left:50%;top:4.5%;width:28cqw;aspect-ratio:2;padding:1cqw;border:0;border-radius:1.2cqw;background:#0b0e13;box-shadow:inset 0 0 0 .4cqw #1b2028,0 .3cqw #fff;transform:translate(-50%)}.screen canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.lanes{position:absolute;inset:31% 21% 4%;display:grid;grid-template-columns:repeat(4,1fr)}.lane{display:grid;grid-template-rows:auto 1fr;justify-items:center;gap:1.2cqw;min-height:0}.led{width:3cqw;aspect-ratio:1;border-radius:50%;background:#cfcfc6;box-shadow:inset 0 .4cqw .6cqw #0000004d;transition:background-color .12s,box-shadow .12s}.led.on{background:var(--c);box-shadow:inset 0 .3cqw .4cqw #ffffff80,0 0 2.4cqw var(--c);transition:none}.fader{--slot-end: 4.5cqw;--cap-h: 6cqw;position:relative;width:100%;height:100%;touch-action:none;cursor:pointer}.fader:focus-visible{outline-offset:-.4cqw;border-radius:1cqw}.fader:before,.fader:after{content:"";position:absolute;left:50%;width:2cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#555 0 20%,#111 60%);transform:translate(-50%)}.fader:before{top:.6cqw}.fader:after{bottom:.6cqw}.fader-slot{position:absolute;left:50%;top:var(--slot-end);bottom:var(--slot-end);width:1.2cqw;border-radius:.6cqw;background:#111;transform:translate(-50%)}.fader-cap{position:absolute;left:50%;top:calc(var(--slot-end) + (1 - var(--p)) * (100% - 2 * var(--slot-end)) - var(--cap-h) / 2);width:12.5cqw;height:var(--cap-h);border-radius:.8cqw;background:linear-gradient(#fff,#fff) center / 72% .7cqw no-repeat,linear-gradient(color-mix(in srgb,var(--c) 82%,#fff),var(--c) 40%);box-shadow:0 1cqw color-mix(in srgb,var(--c) 62%,#222),0 2cqw 2.2cqw #00000040;transform:translate(-50%);transition:top 70ms ease-out}.fader.held .fader-cap{transform:translate(-50%) scale(1.04)}.grille{position:absolute;left:12%;top:86%;width:16cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#8f8f88 .32cqw,transparent .42cqw) center / 1.7cqw 1.7cqw;-webkit-mask:radial-gradient(circle,#000 66%,transparent 70%);mask:radial-gradient(circle,#000 66%,transparent 70%);transform:translate(-50%,-50%)}@media(prefers-reduced-motion:reduce){.knob-cap,.fader-cap,.led{transition:none}}.transport{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin:2.25rem 0 1.5rem}.play{min-width:7rem;padding:.6rem 1.4rem;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--display);font-weight:600}.play[aria-pressed=true]{background:var(--accent)}.quiet{padding:.6rem 1.1rem;border:1px solid var(--rule);border-radius:999px;background:transparent;font-family:var(--display);font-weight:600}.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.4rem 1rem;margin:0;padding:1rem 0;border-block:1px solid var(--rule);font-size:.9375rem}.legend div{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}.legend dt{align-self:center}.legend dt{display:flex;align-items:center;gap:.5rem;color:var(--ink-soft)}.legend dd{margin:0;font-weight:600}.legend i{width:.8rem;height:.8rem;border-radius:50%;background:var(--c);flex:none}.help{margin-top:1.5rem;color:var(--ink-soft);font-size:.875rem}