@import"https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";:root{--unitPadding: 5px;--unitMargin: 5px}html,body{background-color:#444;background-color:#aeb59e;font-family:Roboto Mono,ui-monospace,system-ui,sans-serif;height:100%;margin:0;padding:0;text-transform:uppercase}@media screen and (min-width:768px){body{background-color:#444}}body *{line-height:1;margin:0;padding:0}#root{background-color:#aeb59e;box-sizing:border-box;height:100%;width:100%}@media screen and (min-width:768px){#root{background-color:#444}}.overlay{outline:5px solid red;pointer-events:none;position:absolute;top:0;left:0;z-index:1}.overlay img{display:block;opacity:0;width:100%}.app{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;width:100%}@media screen and (min-width:768px){.app{justify-content:center;min-height:100vh}}.bgb{background-color:#000}.bgw{background-color:#fff}.bgc{background-color:#0ff}.bgf{background-color:#f0f}.bgl{background-color:#0f0}.bgr{background-color:red}.oc{outline:1px solid cyan}.of{outline:1px solid fuchsia}.ol{outline:1px solid lime}.or{outline:1px solid red}.inverse{background-color:#fff4}.ma025{margin:.25rem}.ma050{margin:.5rem}.ma100{margin:1rem}.ma150{margin:1.5rem}.ma200{margin:2rem}.mt025{margin-top:.25rem}.mt050{margin-top:.5rem}.mt100{margin-top:1rem}.mt150{margin-top:1.5rem}.mt200{margin-top:2rem}.mr025{margin-right:.25rem}.mr050{margin-right:.5rem}.mr100{margin-right:1rem}.mr150{margin-right:1.5rem}.mr200{margin-right:2rem}.mb025{margin-bottom:.25rem}.mb050{margin-bottom:.5rem}.mb100{margin-bottom:1rem}.mb150{margin-bottom:1.5rem}.mb200{margin-bottom:2rem}.ml025{margin-left:.25rem}.ml050{margin-left:.5rem}.ml075{margin-left:.75rem}.ml100{margin-left:1rem}.ml150{margin-left:1.5rem}.ml200{margin-left:2rem}.pa025{padding:.25rem}.pa050{padding:.5rem}.pa100{padding:1rem}.pa200{padding:2rem}.pt050{padding-top:.5rem}.pt100{padding-top:1rem}.pt150{padding-top:1.5rem}.pt200{padding-top:2rem}.pr050{padding-right:.5rem}.pr100{padding-right:1rem}.pr150{padding-right:1.5rem}.pr200{padding-right:2rem}.pb050{padding-bottom:.5rem}.pb100{padding-bottom:1rem}.pb150{padding-bottom:1.5rem}.pb200{padding-bottom:2rem}.pl050{padding-left:.5rem}.pl100{padding-left:1rem}.pl150{padding-left:1.5rem}.pl200{padding-left:2rem}.abs{position:absolute}.rel{position:relative}.w10{width:10%}.w25{width:25%}.w50{width:50%}.w75{width:75%}.w100{width:100%}.h10{height:10%}.h25{height:25%}.h50{height:50%}.h75{height:75%}.h90{height:90%}.h100{height:100%}.flex{display:flex}.flex1{flex:1}.flex2{flex:2}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.gap025{gap:.25rem}.gap050{gap:.5rem}.gap075{gap:.75rem}.gap100{gap:1rem}.no-highlights{user-select:none;-webkit-user-select:none}.pointer{cursor:pointer}.centered,.text-center{text-align:center}.left,.text-left{text-align:left}.right,.text-right{text-align:right}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.db{display:block}.di{display:inline}.dib{display:inline-block}.dif{display:inline-flex}.dn{display:none!important}.disabled{opacity:.5;pointer-events:none}.invisible{opacity:0;pointer-events:none}.knob{cursor:pointer;margin:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.knob-face{position:relative;width:100%;aspect-ratio:1;min-height:0}.knob-img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center center;pointer-events:none}.knob.w-1-1{box-sizing:border-box;width:calc((100vw - 2 * var(--knob-side, 1rem)) / 1);max-width:min(24rem,100%)}.knob.w-1-2{box-sizing:border-box;width:calc((100vw - 2 * var(--knob-side, 1rem) - 1 * var(--knob-col-gap, 1rem)) / 2);max-width:200px}.knob.w-1-3{box-sizing:border-box;width:calc((100vw - 2 * var(--knob-side, 1rem) - 2 * var(--knob-col-gap, 1rem)) / 3);max-width:120px}.knob.w-1-4{box-sizing:border-box;width:calc((100vw - 2 * var(--knob-side, 1rem) - 3 * var(--knob-col-gap, 1rem)) / 4);max-width:100px}.knob.w-1-5{box-sizing:border-box;width:calc((100vw - 2 * var(--knob-side, 1rem) - 4 * var(--knob-col-gap, 1rem)) / 5);max-width:80px}.pushbutton{background:transparent;border:none;cursor:pointer;display:inline-block;padding:0;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.pushbutton img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center center;pointer-events:none}.pushbutton.w-1-1{box-sizing:border-box;width:calc((100vw - 2 * var(--knob-side, 1rem)) / 1);max-width:min(24rem,100%);margin-inline:auto}.pushbutton.w-1-2{box-sizing:border-box;width:calc((100vw - 2 * var(--knob-side, 1rem) - 1 * var(--knob-col-gap, 1rem)) / 2);max-width:200px;margin-inline:auto}.pushbutton.w-1-3{box-sizing:border-box;width:calc((100vw - 2 * var(--knob-side, 1rem) - 2 * var(--knob-col-gap, 1rem)) / 3);max-width:120px;margin-inline:auto}.pushbutton.w-1-4{box-sizing:border-box;width:calc((100vw - 2 * var(--knob-side, 1rem) - 3 * var(--knob-col-gap, 1rem)) / 4);max-width:100px;margin-inline:auto}.pushbutton.w-1-5{box-sizing:border-box;width:calc((100vw - 2 * var(--knob-side, 1rem) - 4 * var(--knob-col-gap, 1rem)) / 5);max-width:80px;margin-inline:auto}@media(max-width:430px){.knob{padding:2px}}html,body{background-color:#444}#root{background-color:#444;box-sizing:border-box;height:100%;width:100%}.synth{background-color:#bad1dd;box-sizing:border-box;height:100%;padding:1rem;position:relative;width:100%}@media screen and (min-width:768px){.synth{border:8px solid #000;border-radius:16px;height:unset;max-width:350px}}.synth *{user-select:none;-webkit-user-select:none}.header{display:flex;align-items:center;flex-direction:row;justify-content:space-between;margin-bottom:1rem}.header .version{font-size:.8rem;font-weight:700;position:absolute;top:10px;left:10px;transform:rotate(270deg)}.header h1{font-size:32px;font-weight:900}.header .pushbutton{aspect-ratio:1 / 1;height:44px}.header,.body{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.header{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.5rem}.header>*,.body>*{ooutline:1px solid #000}.row{display:flex}.panel{background-color:#fff4;border:1px solid #0004;border-radius:5px;box-sizing:border-box;display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0rem .25rem .25rem;text-align:center}.panel.horizontal{flex-direction:row}.panel .title{border-right:1px solid #0004;border-bottom:1px solid #0004;border-left:1px solid #0004;color:#000;font-size:.85rem;font-weight:700;line-height:1;margin-bottom:.125rem;padding:.25rem;pointer-events:none;position:relative;top:-1px;user-select:none;-webkit-user-select:none}.label{border-radius:0 0 8px 8px;color:#000;display:inline-block;font-family:Roboto Mono,ui-monospace,system-ui,sans-serif;font-weight:700;font-size:.75rem;line-height:1;margin-bottom:.125rem;pointer-events:none;user-select:none;-webkit-user-select:none;text-align:center}.label.inverse{border-radius:0;color:#fff;background-color:#000;padding:1px 2px}.label.inverse.red{background-color:#a00}.label .group-label{background-color:#000;padding:.25rem 0;width:100%}.knob{width:60px}.pushbutton{width:40px}.knob-cell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.2rem;width:fit-content}.w-1-4{width:calc(25% - 6px)}.w-1-2{width:calc(50% - 5px)}.w-3-4{width:calc(75% - 2px)}.w-100{width:calc(100% - var(--unitPadding))}