@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";:root{--color-gold: #FFD700;--color-yellow: #FFFF00;--color-light-yellow: #FFFFE0;--color-lemon-chiffon: #FFFACD;--color-goldenrod: #DAA520;--color-dark-goldenrod: #B8860B;--color-khaki: #F0E68C;--color-dark-khaki: #BDB76B;--color-orange: #FFA500;--color-dark-orange: #FF8C00;--color-sandy-brown: #F4A460;--color-dim-gray: #696969;--color-charcoal: #444;--color-dark-slate-gray: #2F4F4F;--color-black-tape: #121210;--color-black: #000;--color-white: #FFF;--bg-primary: #444;--text-primary: #FFF;--gradient-primary: #000;--gradient-secondary: #FFF;--border-primary: #000;--border-radius: 8px;--font-sans: system-ui, sans-serif;--font-mono: courier, sans-serif;--font-roboto: "Roboto Mono", monospace}#root{display:flex;align-items:center;justify-content:center;height:100%;width:100%}html,body{background-color:var(--bg-primary);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}.synth{background-image:linear-gradient(180deg,var(--color-gradient-primary),var(--color-gradient-secondary));color:var(--color-text-primary);display:flex;align-items:center;flex-direction:column;justify-content:center;font-family:var(--font-sans);margin:0 auto;padding:2rem;position:relative;text-align:center;width:100%;height:100%;min-width:320px}@media(orientation:landscape){.synth{flex-direction:row;gap:2rem}}@media(min-width:480px)and (orientation:portrait){.synth{border:8px solid #000;border-radius:16px;width:auto;height:auto}}@media(min-width:768px)and (orientation:landscape){.synth{border:8px solid #000;border-radius:16px;width:auto;height:auto}}a{margin-right:1rem}.row{display:flex;align-items:flex-start;flex-direction:row;gap:1rem;justify-content:space-evenly;margin:.5rem 0;width:100%}@media(orientation:landscape){.row{flex-direction:column}}.row--border{border:2px ridge var(--border-primary);border-radius:var(--border-radius);padding:4px 12px 12px}.label{color:var(--text-primary);font-size:16px;font-weight:500;letter-spacing:.5px;line-height:32px;text-transform:uppercase}.sticker{background-color:var(--color-black-tape);color:var(--text-primary);font-size:16px;padding:5px 8px 5px 6px;position:absolute;top:12px;left:12px;transform:rotate(-.5deg)}.version{color:#000;font-size:14px;position:absolute;bottom:16px;left:16px;opacity:.4;text-transform:lowercase}a.brand{color:var(--text-primary);font-size:14px;margin:unset;opacity:.5;position:absolute;right:16px;bottom:16px;text-decoration:none}.flex{display:flex!important}.row{flex-direction:row!important}.col{flex-direction:column!important}.gap025{gap:.25rem!important}.gap050{gap:.5rem!important}.gap100{gap:1rem!important}.gap200{gap:2rem!important}.ma025{margin:.25rem!important}.ma050{margin:.5rem!important}.ma075{margin:.75rem!important}.ma100{margin:1rem!important}.ma200{margin:2rem!important}.mt025{margin-top:.25rem!important}.mt050{margin-top:.5rem!important}.mt075{margin-top:.75rem!important}.mt100{margin-top:1rem!important}.mt200{margin-top:2rem!important}.mr025{margin-right:.25rem!important}.mr050{margin-right:.5rem!important}.mr075{margin-right:.75rem!important}.mr100{margin-right:1rem!important}.mr200{margin-right:2rem!important}.mb025{margin-bottom:.25rem!important}.mb050{margin-bottom:.5rem!important}.mb075{margin-bottom:.75rem!important}.mb100{margin-bottom:1rem!important}.mb200{margin-bottom:2rem!important}.ml025{margin-left:.25rem!important}.ml050{margin-left:.5rem!important}.ml075{margin-left:.75rem!important}.ml100{margin-left:1rem!important}.ml200{margin-left:2rem!important}.pa025{padding:.25rem!important}.pa050{padding:.5rem!important}.pa075{padding:.75rem!important}.pa100{padding:1rem!important}.pa200{padding:2rem!important}.pt025{padding-top:.25rem!important}.pt050{padding-top:.5rem!important}.pt075{padding-top:.75rem!important}.pt100{padding-top:1rem!important}.pt200{padding-top:2rem!important}.pr025{padding-right:.25rem!important}.pr050{padding-right:.5rem!important}.pr075{padding-right:.75rem!important}.pr100{padding-right:1rem!important}.pr200{padding-right:2rem!important}.pb025{padding-bottom:.25rem!important}.pb050{padding-bottom:.5rem!important}.pb075{padding-bottom:.75rem!important}.pb100{padding-bottom:1rem!important}.pb200{padding-bottom:2rem!important}.pl025{padding-left:.25rem!important}.pl050{padding-left:.5rem!important}.pl075{padding-left:.75rem!important}.pl100{padding-left:1rem!important}.pl200{padding-left:2rem!important}.oc{outline:2px solid cyan}.or{outline:2px solid red}:root{--color-gradient-primary: #BE8C9A;--color-gradient-secondary: #526866;--text-primary: var(--color-white)}.synth{font-family:var(--font-mono);position:relative}@media(min-width:768px)and (orientation:landscape){.synth{min-width:640px!important;min-height:250px!important}}.sticker{transform:unset}.controls>.group{margin-bottom:1rem}@media(orientation:landscape){.controls{display:flex}.controls>.group{margin-bottom:unset;margin-right:2rem}}.version{color:var(--text-primary)}a.brand{opacity:.4}.wrapper{display:flex;align-items:center;flex-direction:column;justify-content:center;min-width:85px;.knob{cursor:ns-resize;overflow:hidden;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;&.knob:focus-visible{outline:3px solid #335d92;outline-offset:4px}&.knob--sm{width:50px}&.knob--md{width:75px}&.knob--lg{width:100px}&.knob--xl{width:150px}&.knob--xxl{width:175px}img{display:block;object-fit:contain;pointer-events:none;transform-origin:center center;width:100%;height:100%;&.highlight{filter:opacity(.8) blur(9px);mix-blend-mode:luminosity;position:absolute;top:-8px;left:5px;z-index:1}}}}.wrapper{display:flex;align-items:center;flex-direction:column;justify-content:center;min-width:85px;.switch{aspect-ratio:1;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0 auto;min-width:32px;padding:0;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;&.switch--sm{width:24px}&.switch--md{width:36px}&.switch--lg{width:48px}&.switch--xl{width:64px}&.switch--xxl{width:72px}img{display:block;filter:contrast(1.4);object-fit:contain;pointer-events:none;width:100%;height:auto}}}