html,body{background-color:#444;box-sizing:border-box;display:flex;justify-content:center;align-items:center;margin:0;width:100%;height:100%}body *{box-sizing:border-box;line-height:1;margin:0;padding:0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#root{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.synth{background-image:linear-gradient(180deg,#16386b,#97c8f0);display:flex;align-items:center;flex-direction:column;justify-content:center;font-family:courier,sans-serif;margin:0 auto;padding:2rem;position:relative;text-align:center;width:100%;height:100%}@media(orientation:landscape){.synth{flex-direction:row;gap:3rem}}@media(min-width:480px)and (orientation:portrait){.synth{border:8px solid #000;border-radius:16px;height:auto;max-width:350px}}@media(min-width:768px)and (orientation:landscape){.synth{border:8px solid #000;border-radius:16px;height:auto;max-width:550px}}a{margin-right:1rem}a.brand{color:#fffcea88;font-size:14px;position:absolute;right:5px;bottom:15px;text-decoration:none}.group{display:flex;flex-direction:row;gap:1rem;justify-content:space-evenly;margin:.5rem 0;width:100%}@media(orientation:landscape){.group{flex-direction:column}}.border{border:2px solid #121210;border:2px ridge #FFFCEA;border-radius:8px;padding:4px 12px 12px}.label{color:#fffcea;font-size:16px;letter-spacing:.5px;line-height:32px;text-transform:uppercase}.sticker{background-color:#121210;color:#fffcea;font-size:16px;padding:2px 7px 3px;position:absolute;top:10px;left:9px;transform:rotate(-.5deg)}.toggleswitch{aspect-ratio:1;background:#d26169;border:4px solid #25271F;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:auto;width:24px}.toggleswitch.on{background:#b7ed71}.toggleswitch .text{color:#25271f;color:#fff;font-family:Barlow Condensed,sans-serif;font-size:16px;font-weight:600;font-style:normal;letter-spacing:.5px}.retro .toggleswitch{background:transparent;border:none;cursor:pointer;display:block;padding:0;min-width:32px;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.retro .toggleswitch img{display:block;filter:contrast(1.4);width:100%;height:auto;object-fit:contain;pointer-events:none}.knob-wrapper{display:flex;align-items:center;flex-direction:column;justify-content:center;min-width:85px}.knob{aspect-ratio:1;border:4px solid #25271f;border-radius:50%;background:#5d634d;background:#4d5f63;background:#d9d7c9;cursor:ns-resize;overflow:hidden;position:relative;user-select:none;touch-action:none}.knob:focus-visible{outline:3px solid #335d92;outline-offset:4px}.knob--lg{width:100px;box-shadow:0 10px 12px #0000004d}.knob--md{width:75px;box-shadow:0 7px 9px #00000047}.knob--sm{width:50px;box-shadow:0 4px 6px #00000040}.knob-indicator{position:absolute;inset:0;transform-origin:center}.knob-dot{position:absolute;top:10%;left:calc(50% - 8px);width:10px;aspect-ratio:1;border-radius:50%;background:#fff;background:#000;box-shadow:0 1px 2px #00000040}.retro .knob{border:unset;border-radius:unset;background:unset;box-shadow:unset;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.retro .knob .highlight{position:absolute;z-index:1;filter:opacity(.8) blur(9px);top:-8px;left:5px;mix-blend-mode:luminosity}.retro .knob img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center center;pointer-events:none}.hidden{display:none!important}.flex{display:flex}.flex.col{flex-direction:column}.flex.row{flex-direction:row}.gap-rem-025{gap:.25rem}.gap-rem-050{gap:.5rem}.gap-rem-100{gap:1rem}.gap-rem-200{gap:2rem}.gap-rem-300{gap:3rem}.mb1{margin-bottom:1rem}.mb2{margin-bottom:2rem}.mb3{margin-bottom:3rem}