@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{text-transform:uppercase;background-color:#444;min-height:100vh;margin:0;padding:0;font-family:Roboto Mono,ui-monospace,system-ui,sans-serif}body *{margin:0;padding:0;line-height:1}#root{box-sizing:border-box;background-color:#aeb59e;width:100%;height:100%;min-height:100vh}@media screen and (width>=800px){#root{background-color:#444}}.app{flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:100%;min-height:100vh;display:flex}@media screen and (width>=800px){.app{justify-content:center}}.oc{outline:1px solid #0ff}.of{outline:1px solid #f0f}.ol{outline:1px solid #0f0}.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}.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%}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap025{gap:.25rem}.gap050{gap:.5rem}.gap075{gap:.75rem}.gap100{gap:1rem}.no-highlights{-webkit-user-select:none;user-select:none}.pointer{cursor:pointer}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.knob{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;padding:4px}.knob-face{aspect-ratio:1;width:100%;min-height:0;position:relative}.knob-img{object-fit:contain;transform-origin:50%;pointer-events:none;width:100%;height:100%;display:block}.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}@media (width<=430px){.knob{padding:2px}}.pushbutton{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:0 0;border:none;max-width:40px;padding:0;display:inline-block}.pushbutton img{object-fit:contain;transform-origin:50%;pointer-events:none;width:100%;height:100%;display:block}.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 (width<=430px){.knob{padding:2px}}.toggle-switch-hit{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:0 0;border:none;padding:0;display:block}.toggle-switch-img{filter:contrast(1.4);object-fit:contain;pointer-events:none;width:100%;height:auto;display:block}.synth{background-color:#aeb59e;padding:1rem;position:relative}@media screen and (width>=800px){.synth{border:8px solid #000;border-radius:16px;max-width:350px;padding:1rem}}.synth *{-webkit-user-select:none;user-select:none}.version{position:absolute;top:5px;left:8px}.version span{font-size:.75rem;font-weight:700;line-height:.75rem}.header{grid-template-columns:repeat(4,1fr);place-items:center;column-gap:0;display:grid}.header h1{grid-column:1/4;justify-self:start;height:40px;margin-left:.5rem;font-size:40px;font-weight:900}.pushbutton{grid-column:4}.body{flex-wrap:wrap;gap:.5rem;display:flex}.row{justify-content:space-between;display:flex}.panel{box-sizing:border-box;background-color:#fff4;border:1px solid #0004;border-radius:2px;flex-direction:column;justify-content:space-between;align-items:center;padding:0 .25rem .5rem;display:inline-flex}.panel .title{color:#000;pointer-events:none;text-align:center;-webkit-user-select:none;user-select:none;border-bottom:1px solid #0004;border-left:1px solid #0004;border-right:1px solid #0004;margin-bottom:.5rem;font-size:1rem;font-weight:700;line-height:1;position:relative;top:-1px}.label{color:#000;pointer-events:none;-webkit-user-select:none;user-select:none;text-align:center;border-radius:0 0 8px 8px;font-family:Roboto Mono,ui-monospace,system-ui,sans-serif;font-size:.85rem;font-weight:700;line-height:1}.label .group-label{background-color:#000;width:100%;padding:.25rem 0}.knob-cell{flex-direction:column;justify-content:flex-start;align-items:center;gap:.2rem;width:fit-content;display:flex}.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))}