:root{color:#252525;font-synthesis:none;background:#f3f3f1;font-family:Arial,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}main{max-width:1040px;margin:0 auto;padding:28px 24px}header{margin-bottom:22px}h1{margin:0 0 8px;font-size:24px;font-weight:600}.subtitle{color:#666;margin:0;font-size:13px}button,input{font:inherit}button{color:#252525;cursor:pointer;background:#fff;border:1px solid #aaa;border-radius:3px;padding:8px 14px;font-size:13px}button:hover:not(:disabled){background:#eaeae7}button:disabled{color:#888;cursor:default;border-color:#ccc}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline-offset:3px;outline:2px solid #333}.transport{background:#e8e8e5;border:1px solid #bbb;flex-wrap:wrap;align-items:center;gap:12px;padding:14px;display:flex}.transport-buttons{gap:8px;display:flex}.status-wrap{flex:1;min-width:180px}#status{color:#555;margin:0;font-size:12px;line-height:1.5}.tempo{white-space:nowrap;font-size:12px}.tracks{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;display:grid}.track{background:#fff;border:1px solid #bbb;min-width:0;padding:16px}.track-top{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px;display:flex}h2{margin:0;font-size:17px;font-weight:600}.mute-button{min-width:76px;padding:6px 8px;font-size:11px}.track-subtitle{color:#666;min-height:32px;margin:0 0 18px;font-size:12px;line-height:1.5}.level-header{justify-content:space-between;align-items:baseline;margin-bottom:12px;font-size:13px;display:flex}output{font-variant-numeric:tabular-nums}input[type=range]{accent-color:#505b55;cursor:pointer;width:100%;height:20px;margin:0;display:block}.range-labels{color:#777;justify-content:space-between;margin-top:5px;font-size:10px;display:flex}.meter{background:#e3e3df;height:4px;margin-top:20px;overflow:hidden}.meter span{background:#65776b;width:0;height:100%;display:block}.signal-route{color:#777;margin:12px 0 0;font-size:11px;line-height:1.6}.is-muted .mute-button{color:#777;background:#ecece8}.is-muted h2{color:#888}.hint{color:#666;margin:18px 0;font-size:12px;line-height:1.7}footer{color:#666;border-top:1px solid #ccc;flex-wrap:wrap;align-items:baseline;gap:24px;padding-top:14px;font-size:11px;display:flex}#position{font-variant-numeric:tabular-nums}details{max-width:600px}summary{cursor:pointer}details p{line-height:1.6}a{color:#394f40}@media (width<=660px){main{padding:20px 14px}.tracks{grid-template-columns:1fr}.track-subtitle{min-height:0}.status-wrap{flex-basis:100%;order:3}.tempo{margin-left:auto}}main{max-width:1360px}.tracks{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}.track-top{flex-direction:row;justify-content:space-between;align-items:center;gap:6px}.parameter-groups{gap:12px;margin-top:18px;display:grid}.control-group{border:0;border-top:1px solid #ddd;flex-wrap:wrap;gap:12px;min-width:0;margin:0;padding:10px 0 0;display:flex}.control-group legend{text-transform:uppercase;letter-spacing:.7px;color:#777;padding:0 8px 0 0;font-size:10px}.parameter{flex:100%;gap:5px;min-width:0;display:grid}.parameter label{color:#444;font-size:11px}.parameter output{color:#666;text-align:right;font-size:10px}.parameter select{color:#333;width:100%;font:inherit;background:#fff;border:1px solid #bbb;border-radius:3px;padding:6px;font-size:11px}.parameter-range{grid-template-columns:1fr auto}.parameter-range input{grid-area:2/1/auto/-1}.parameter-range output{grid-area:1/2}.parameter-knob{text-align:center;flex:0 0 calc(33.3333% - 8px);align-content:start;justify-items:center}.parameter-knob output{text-align:center}.knob{touch-action:none;cursor:ns-resize;background:#e5e6e2;border:1px solid #888;border-radius:50%;width:42px;height:42px;padding:0;position:relative}.knob:hover:not(:disabled){background:#d8dad5}.knob-indicator{transform:rotate(var(--angle));pointer-events:none;position:absolute;inset:4px}.knob-indicator:before{content:"";background:#455249;border-radius:1px;width:3px;height:11px;position:absolute;top:0;left:calc(50% - 1.5px)}.knob:focus-visible,select:focus-visible{outline-offset:3px;outline:2px solid #333}@media (width<=1100px){.tracks{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=600px){.tracks{grid-template-columns:1fr}}@font-face{font-family:Hoves Expanded;src:url(/synthesizer-done/fonts/hoves-expanded-bold.ttf)format("truetype");font-weight:700;font-display:swap}:root{--kit-paper:#fdfaf3;--kit-ink:#373232;--kit-soft-ink:#6f6767;--kit-shadow:0 2px 3.05px #00000040}body{background:#373232}main>header h1{color:#fdfaf3;text-transform:uppercase;font-family:Hoves Expanded,sans-serif}.transport{background:0 0;border:0;gap:24px;padding:0}.transport .kit-button{width:254px}.kit-button{background:var(--kit-paper);min-width:0;height:80px;box-shadow:var(--kit-shadow);color:var(--kit-ink);text-transform:uppercase;cursor:pointer;border:0;border-radius:4px;padding:0 16px;font-family:Hoves Expanded,sans-serif;font-size:20px;font-weight:700;line-height:1;position:relative}.kit-button:before{content:"";pointer-events:none;border-radius:4px;position:absolute;inset:5px}.kit-button[aria-pressed=true],.kit-button.is-active{color:var(--kit-soft-ink)}.kit-button[aria-pressed=true]:before,.kit-button.is-active:before,.kit-button:active:before{box-shadow:inset 0 1px 4px #00000040}.kit-button:hover:not(:disabled){background:var(--kit-paper)}.kit-button:disabled{color:var(--kit-soft-ink);opacity:.65}.main-synth{box-sizing:border-box;width:100%;max-width:1192px;color:var(--kit-ink);background:#d4d4d4;border-radius:25px;flex-direction:column;gap:54px;padding:40px;font-family:Hoves Expanded,sans-serif;font-weight:700;display:flex;container-type:inline-size}.main-synth-header{justify-content:space-between;align-items:flex-end;width:min(524px,100%);min-height:96.982px;display:flex}.main-synth h2{letter-spacing:-.8px;text-transform:uppercase;width:156px;margin:0;font-family:inherit;font-size:40px;font-weight:700;line-height:1}.kit-switch{width:140.455px;height:96.982px;box-shadow:none;cursor:pointer;background:0 0;border:0;flex:0 0 140.455px;padding:0;position:relative}.kit-switch:hover:not(:disabled){background:0 0}.switch-art{pointer-events:none;position:absolute;top:0;left:-6px}.switch-on,.switch-off{transition:opacity .12s}.kit-switch[aria-checked=true] .switch-off,.kit-switch[aria-checked=false] .switch-on{opacity:0}.main-source{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;display:grid}.main-source-left{flex-direction:column;gap:54px;display:flex}.main-envelope{flex-direction:column;gap:48px;display:flex}.main-synth label,.main-synth legend{letter-spacing:-.4px;text-transform:uppercase;font-size:20px;line-height:20px}.kit-slider-field{flex-direction:column;gap:16px;min-width:0;display:flex}.kit-slider{background:var(--kit-paper);width:100%;height:80px;box-shadow:var(--kit-shadow);border-radius:4px;flex-shrink:0;position:relative}.kit-slider:before,.kit-meter:before{content:"";pointer-events:none;border-radius:4px;position:absolute;inset:5px;box-shadow:inset 0 1px 4px #00000040}.kit-slider-rail{background:var(--kit-soft-ink);border-radius:7px;height:8px;position:absolute;top:36px;left:7.061%;right:5.725%}.kit-slider-handle{top:-20px;left:calc(11.5px + (100% - 23px) * var(--value));pointer-events:none;position:absolute;transform:translate(-50%)}.kit-slider input[type=range]{opacity:0;cursor:ew-resize;width:100%;height:64px;margin:0;position:absolute;inset:-28px 0}.kit-slider:focus-within{outline:2px solid var(--kit-ink);outline-offset:5px}.kit-meter{background:var(--kit-paper);height:80px;box-shadow:var(--kit-shadow);border-radius:4px;position:relative}.kit-meter-bars{grid-template-columns:repeat(57,minmax(0,1fr));gap:4px;display:grid;position:absolute;inset:27px 6.87% 28px}.kit-meter-bars span{background:#d3d3d3}.kit-meter-bars .lit{background:var(--kit-soft-ink)}.main-wave{border:0;min-width:0;margin:0;padding:0}.main-wave legend{margin-bottom:16px;padding:0}.main-wave-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.main-separator{background:#c6c6c6;border-radius:7px;width:100%;height:8px}.main-effects{grid-template-columns:minmax(0,524px) minmax(0,516px);gap:54px;display:grid}.main-knobs{grid-template-columns:repeat(3,minmax(0,1fr));gap:27px;display:grid}.main-synth .kit-knob-field{flex-direction:column;align-items:center;gap:25px;min-width:0;display:flex}.main-synth .kit-knob-field label{text-align:center;color:#000;white-space:nowrap}.kit-knob-field output{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.main-synth .kit-knob{touch-action:none;cursor:ns-resize;background:0 0;border:0;border-radius:0;flex-shrink:0;width:124.573px;height:131.306px;padding:0;position:relative}.main-synth .kit-knob:hover{background:0 0}.kit-knob-rotor{transform:rotate(var(--angle));transform-origin:50%;pointer-events:none;filter:drop-shadow(0 2.831px 1.416px #00000040);position:absolute;inset:0}.knob-body{position:absolute;top:0;left:0}.knob-marker{position:absolute;top:0;left:45.93%}.knob-cap{position:absolute;inset:25% 23.65%;transform:rotate(180deg)}.knob-center{position:absolute;top:0;left:-1.63%}.kit-toggle{background:#fdfaf3;border:0;border-radius:100px;width:118px;height:54px;padding:4px;position:relative;box-shadow:0 1px 4px #00000040}.kit-toggle:hover:not(:disabled){background:#fdfaf3}.toggle-well{border-radius:100px;height:46px;display:block;box-shadow:inset 0 1px 4px #00000040}.toggle-ball{background:linear-gradient(#ae4949,#7a0f0f);border-radius:50%;width:40px;height:40px;transition:left .15s,background .15s;position:absolute;top:7px;left:8px;box-shadow:0 2px 2.2px #b1b0af}.kit-toggle[aria-checked=true] .toggle-ball{background:linear-gradient(#4ea245,#226218);left:70px}.kit-demo{background:#e0e0e0;border-radius:25px;grid-template-columns:repeat(2,minmax(0,524px));gap:40px;padding:40px;font-family:Hoves Expanded,sans-serif;display:grid}.kit-demo .kit-knob-field{flex-direction:column;align-items:center;gap:25px;display:flex}.kit-demo .kit-knob{background:0 0;border:0;border-radius:0;width:124.573px;height:131.306px}main{max-width:1800px;padding:clamp(12px,2.4vw,40px)}main>header h1{font-size:clamp(22px,2.4vw,38px)}.tracks{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:clamp(16px,2.2vw,36px)}.main-synth{border-radius:clamp(16px,2vw,25px);gap:clamp(22px,2.5vw,40px);min-width:0;max-width:none;padding:clamp(18px,2.3vw,36px)}.main-synth-header{align-items:center;gap:16px;width:100%;min-height:0}.main-synth h2{letter-spacing:-.02em;width:auto;max-width:70%;font-size:clamp(23px,5cqw,36px)}.main-synth label,.main-synth legend{letter-spacing:-.02em;font-size:clamp(11px,2.8cqw,18px);line-height:1.15}.main-source{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,4cqw,32px)}.main-source-left,.main-envelope{gap:clamp(18px,4cqw,32px)}.sample-source{grid-template-columns:1fr}.kit-slider-field{gap:clamp(8px,2cqw,14px)}.kit-slider,.kit-meter{height:clamp(44px,10cqw,68px)}.kit-slider-rail{height:6px;top:calc(50% - 3px)}.kit-slider-handle{transform:translate(-50%, -50%) scale(var(--handle-scale,.5));top:3px}.kit-slider input[type=range]{height:46px;top:-20px;bottom:auto}.kit-meter-bars{gap:clamp(1px,.6cqw,4px);top:34%;bottom:34%}.main-wave legend{margin-bottom:clamp(8px,2cqw,14px)}.main-wave-buttons{gap:clamp(8px,2cqw,14px)}.kit-button{height:clamp(44px,10cqw,68px);padding:0 8px;font-size:clamp(10px,2.5cqw,18px)}.kit-button:active{color:var(--kit-soft-ink)}.kit-button:disabled{opacity:1}.transport{gap:16px}.transport-buttons{gap:clamp(10px,1.5vw,20px)}.transport .kit-button{width:clamp(110px,18vw,230px);height:clamp(48px,5vw,72px);font-size:clamp(14px,1.6vw,20px)}.main-effects{grid-template-columns:1fr;gap:clamp(20px,4cqw,32px)}.main-knobs{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3cqw,24px)}.main-synth .kit-knob-field{gap:clamp(10px,2.5cqw,20px)}.main-synth .kit-knob-field label{white-space:normal;overflow-wrap:anywhere;font-size:clamp(10px,2.5cqw,17px)}.main-synth .kit-knob{width:clamp(60px,18cqw,110px);height:clamp(63.25px,18.973cqw,115.95px);margin:0;transform:none}.main-synth .kit-knob-rotor{width:124.573px;height:131.306px;scale:var(--knob-scale,.7);transform-origin:50%;top:calc(50% - 65.653px);left:calc(50% - 62.2865px)}.kit-switch{flex:0 0 clamp(73px,16.53cqw,112.36px);width:clamp(73px,16.53cqw,112.36px);height:clamp(50.43px,11.41cqw,77.59px)}.switch-art{scale:var(--switch-scale);transform-origin:50% 46.53%;top:calc(50% - 48.491px);left:calc(50% - 76.009px)}.switch-on,.switch-off{transform:none}.main-separator{height:6px}@container (width<=420px){.main-source{grid-template-columns:1fr}}@media (width<=1000px){.tracks{grid-template-columns:1fr}}@media (width<=480px){.main-synth{gap:24px;padding:18px}.status-wrap{min-width:0}.transport-buttons{width:100%}.transport .kit-button{flex:1;width:auto}}@container (width<=420px){.main-envelope{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;display:grid}.main-envelope>:last-child{grid-column:1/-1}.main-source-left{gap:18px}}.switch-off{transform:scaleX(-1)}.main-synth h2{color:var(--kit-ink);transition:color .18s ease-out}.main-synth .kit-button,.main-synth .kit-slider,.main-synth .kit-meter{transition:background-color .18s ease-out}.main-synth.main-muted h2{color:#6f6767}.main-synth.main-muted .kit-button,.main-synth.main-muted .kit-button:hover:not(:disabled),.main-synth.main-muted .kit-slider,.main-synth.main-muted .kit-meter{background:#fdfaf373}@media (prefers-reduced-motion:reduce){.main-synth h2,.main-synth .kit-button,.main-synth .kit-slider,.main-synth .kit-meter{transition:none}}main>header{justify-content:space-between;align-items:center;gap:20px;display:flex}main>header h1{min-width:0;margin:0}main>header .kit-toggle{cursor:pointer;flex:0 0 118px}body.is-intro main{justify-content:center;align-items:center;max-width:none;min-height:100svh;display:flex}body.is-intro main>header{z-index:5;justify-content:center;width:max-content;max-width:calc(100vw - 32px);margin:0;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}body.is-intro main>header h1{flex:0 auto;font-size:clamp(30px,5vw,72px)}body.is-intro .tracks,body.is-entering .tracks{opacity:0;pointer-events:none;transform:translateY(24px)}body.is-intro .tracks{visibility:hidden}body.is-entering .tracks{visibility:visible}body.is-ready .tracks{opacity:1;transition:opacity .42s,transform .42s;transform:translateY(0)}body.is-intro main>header .kit-toggle{flex:0 0 2.5em;width:2.5em;height:1.14407em}body.is-intro main>header .toggle-well{height:auto;position:absolute;inset:7.407% 3.39%}body.is-intro main>header .toggle-ball{aspect-ratio:1;width:33.898%;height:auto;top:50%;left:6.78%;transform:translateY(-50%)}body.is-intro main>header .kit-toggle[aria-checked=true] .toggle-ball{left:59.322%}body.is-intro .kit-toggle:disabled{opacity:1;cursor:wait}@media (width<=700px){body.is-intro main>header{gap:12px}body.is-intro main>header h1{font-size:clamp(26px,5.6vw,38px)}body.is-intro main>header .kit-toggle{flex-basis:clamp(73px,14vw,98px);width:clamp(73px,14vw,98px);height:clamp(33.407px,6.407vw,44.847px)}}@media (width<=380px){body.is-intro main>header h1{font-size:clamp(22px,5.6vw,26px)}}@media (prefers-reduced-motion:no-preference){body.is-ready .tracks{transition:opacity .42s,transform .42s}}@media (prefers-reduced-motion:reduce){body.is-ready .tracks{transition:none}}.toggle-ball{transition:left .18s ease-out;overflow:hidden}.toggle-ball:after{content:"";border-radius:inherit;opacity:0;background:linear-gradient(#4ea245,#226218);transition:opacity .18s ease-out;position:absolute;inset:0}.kit-toggle[aria-checked=true] .toggle-ball{background:linear-gradient(#ae4949,#7a0f0f)}.kit-toggle[aria-checked=true] .toggle-ball:after{opacity:1}.main-synth .kit-button:disabled{color:var(--kit-ink);cursor:default}.main-synth .kit-button[aria-pressed=true]:disabled{color:var(--kit-soft-ink)}@media (width<=480px){main>header{gap:12px}main>header h1{font-size:clamp(18px,5vw,24px)}}@media (prefers-reduced-motion:reduce){.toggle-ball,.toggle-ball:after{transition:none}}main>header{justify-content:flex-start;gap:.6em;font-size:clamp(18px,5vw,72px)}main>header h1{font-size:inherit;letter-spacing:-.02em;line-height:1}main>header .kit-toggle{font-size:inherit;flex:0 0 2.5em;width:2.5em;height:1.14407em;padding:0}main>header .toggle-well{height:auto;position:absolute;inset:7.407% 3.39%}main>header .toggle-ball{width:33.898%;height:74.074%;top:12.963%;left:6.78%}main>header .kit-toggle[aria-checked=true] .toggle-ball{left:59.322%}main>header .kit-toggle:before{content:"";height:44px;position:absolute;top:calc(50% - 22px);left:0;right:0}main>header .toggle-ball{aspect-ratio:1;height:auto;top:50%;transform:translateY(-50%)}@media (width<=700px){main>header{justify-content:space-between;gap:12px;font-size:clamp(26px,5.6vw,38px)}main>header h1{font-size:inherit;line-height:1.06}main>header h1 span{white-space:nowrap;display:block}main>header .kit-toggle{flex-basis:clamp(73px,14vw,98px);width:clamp(73px,14vw,98px);height:clamp(33.407px,6.407vw,44.847px)}}@media (width<=360px){main>header{gap:8px;font-size:24px}}@media (width<=700px){main>header h1{flex:1}}.main-synth{isolation:isolate;position:relative;overflow:hidden}.main-synth:before{content:"";z-index:-1;pointer-events:none;aspect-ratio:1575/2363;mix-blend-mode:overlay;opacity:1;background:url(/synthesizer-done/figma/panel-dirt.png) 50%/cover no-repeat;width:260.762%;position:absolute;top:-2.1523cqw;left:-17.8808%}.main-synth[data-track=birds]:before{transform:scaleY(-1)}.main-synth .kit-knob-rotor{width:176px;height:185.513px;scale:calc(var(--knob-scale,.7) * .707798);top:calc(50% - 92.7565px);left:calc(50% - 88px)}.switch-light{transform-origin:50% 44.967%;opacity:0;transition:opacity 35ms linear;top:calc(50% - 80.491px);left:calc(50% - 113px)}.kit-switch[aria-checked=true]:not(:disabled) .switch-light{opacity:1}.kit-switch.switch-flicker-off[aria-checked=true]:not(:disabled) .switch-light,.kit-switch[aria-checked=false] .switch-light{opacity:0}@media (prefers-reduced-motion:reduce){.switch-light{transition:none}}.main-synth[data-track=drone]:before{transform:scaleX(-1)}.main-separator{background:#a4a4a4}.knob-cap{transform:none}