@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.header{padding:1.5rem 1rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #262626;gap:1rem}.color-dark{color:#6a6a6a}.color-green{color:#16a34a}.color-yellow{color:#eab308}.color-red{color:#dc2626}@media(max-width:767px){.header{padding:1rem;gap:.75rem}}@media(min-width:768px){.header{padding:2rem;flex-direction:row;align-items:center;max-height:110px}}.title{font-size:1.5rem;font-weight:600;letter-spacing:-.025em;color:#fff;display:flex;align-items:center;gap:.75rem;margin:0;max-height:60px}@media(max-width:767px){.title{font-size:1.25rem;gap:.5rem}}@media(min-width:768px){.title{font-size:1.875rem}}.icon{color:#eab308;width:24px;height:24px}@media(min-width:768px){.icon{width:32px;height:42px}}.subtitle{font-size:.75rem;color:#737373;margin-top:.25rem;font-weight:500;letter-spacing:.05em}@media(max-width:767px){.subtitle{font-size:.625rem}}@media(min-width:768px){.subtitle{font-size:.875rem}}.patch-selection{background-color:#0a0a0a80;padding:.375rem;border-radius:.5rem;border:1px solid #262626;display:flex;gap:.25rem;width:100%}@media(max-width:767px){.patch-selection{padding:.5rem;gap:.375rem}}@media(min-width:768px){.patch-selection{width:auto}}.patch-label{cursor:pointer;position:relative;flex:1}@media(min-width:768px){.patch-label{flex:none}}.patch-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.patch-button{width:100%;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:.375rem;background-color:#262626;color:#a3a3a3;font-size:.875rem;font-weight:600;transition:all .2s}@media(max-width:767px){.patch-button{height:3rem;font-size:1rem;border-radius:.5rem}}@media(min-width:768px){.patch-button{width:2rem;height:2rem;font-size:.75rem;border-radius:.25rem}}.patch-input:checked+.patch-button{background-color:#fff;color:#000}.patch-label:hover .patch-button{background-color:#404040}.patch-input:checked+.patch-button:hover{background-color:#fff}@media(max-width:767px){.patch-label:active .patch-button{transform:scale(.95)}}.waveform-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem;padding:.25rem;background-color:#171717;border-radius:.5rem;border:1px solid #262626}.carrier-section .waveform-selector,.waveform-selector.modulator{margin-top:83px}@media(max-width:767px){.waveform-selector{gap:.25rem;padding:.25rem;border-radius:.5rem}}.waveform-label{cursor:pointer}.waveform-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.waveform-button{height:2rem;border-radius:.25rem;display:flex;align-items:center;justify-content:center;color:#737373;transition:all .2s}@media(max-width:767px){.waveform-button{height:2.25rem;border-radius:.375rem}}.waveform-button:hover{background-color:#262626}.waveform-button.red.active{background-color:#dc2626;color:#fff}.waveform-button.yellow.active{background-color:#eab308;color:#000}.waveform-button.green.active{background-color:#16a34a;color:#fff}.waveform-icon{font-size:1rem;font-weight:700}@media(max-width:767px){.waveform-icon{font-size:1.125rem}}@media(max-width:767px){.waveform-label:active .waveform-button{transform:scale(.95)}.waveform-button.red.active{box-shadow:0 2px 8px #dc262666}.waveform-button.yellow.active{box-shadow:0 2px 8px #eab30866}.waveform-button.green.active{box-shadow:0 2px 8px #16a34a66}}.param-group{position:relative;border-radius:.75rem;background-color:#0a0a0a;border:1px solid #262626;padding:1.25rem;transition:border-color .3s}@media(max-width:767px){.param-group{padding:.75rem;border-radius:.625rem}}.carrier-section:hover{border-color:#dc262680}.param-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}@media(max-width:767px){.param-header{margin-bottom:.625rem}}.param-title{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:.5rem}@media(max-width:767px){.param-title{font-size:.75rem;gap:.375rem}.param-title svg{width:16px;height:16px}}.param-title.red{color:#ef4444}.param-controls{display:flex;flex-direction:column;gap:1.5rem}@media(max-width:767px){.param-controls{gap:.75rem}}.param-label{font-size:.75rem;font-weight:500;color:#737373;margin-bottom:.5rem;display:block}@media(max-width:767px){.param-label{font-size:.625rem;margin-bottom:.375rem}}.slider-container{display:flex;align-items:center;gap:.75rem}@media(max-width:767px){.slider-container{gap:.5rem}}.slider-label{font-size:.75rem;font-family:Courier New,monospace;color:#525252}@media(max-width:767px){.slider-label{font-size:.625rem}}.slider{flex:1;height:.5rem;background-color:#262626;border-radius:9999px;appearance:none;cursor:pointer}@media(max-width:767px){.slider{height:.625rem}}.slider::-webkit-slider-thumb{appearance:none;width:1rem;height:1rem;border-radius:50%;background-color:#ef4444;cursor:pointer;transition:background-color .2s}.slider::-moz-range-thumb{width:1rem;height:1rem;border-radius:50%;background-color:#ef4444;cursor:pointer;border:none;transition:background-color .2s}@media(max-width:767px){.slider::-webkit-slider-thumb{width:1.25rem;height:1.25rem}.slider::-moz-range-thumb{width:1.25rem;height:1.25rem}}.slider.red-slider::-webkit-slider-thumb{background-color:#dc2626}.slider.red-slider::-moz-range-thumb{background-color:#dc2626}.slider.red-slider:hover::-webkit-slider-thumb{background-color:#ef4444}.slider.red-slider:hover::-moz-range-thumb{background-color:#ef4444}@media(max-width:767px){.slider.red-slider:active::-webkit-slider-thumb{background-color:#ef4444;transform:scale(1.1)}.slider.red-slider:active::-moz-range-thumb{background-color:#ef4444;transform:scale(1.1)}}.lfo-section:hover{border-color:#eab30880}.param-title.yellow{color:#eab308}.toggle-container{display:flex;align-items:center;gap:.5rem;cursor:pointer}@media(max-width:767px){.toggle-container{gap:.375rem}}.toggle-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.toggle-track{width:2rem;height:1rem;background-color:#262626;border-radius:9999px;position:relative;transition:background-color .3s}@media(max-width:767px){.toggle-track{width:2.25rem;height:1.125rem}}.toggle-input:checked+.toggle-track.yellow-toggle{background-color:#ca8a04}.toggle-thumb{position:absolute;top:.125rem;left:.125rem;width:.75rem;height:.75rem;background-color:#fff;border-radius:9999px;transition:transform .3s}@media(max-width:767px){.toggle-thumb{width:.875rem;height:.875rem}}.toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(1rem)}@media(max-width:767px){.toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(1.125rem)}}.toggle-label{font-size:.625rem;text-transform:uppercase;font-weight:700;color:#525252;transition:color .3s}@media(max-width:767px){.toggle-label{font-size:.5rem}}.toggle-label.active{color:#eab308}.param-label-row{display:flex;justify-content:space-between;margin-bottom:.5rem}@media(max-width:767px){.param-label-row{margin-bottom:.375rem}}.param-value{font-size:.75rem;font-family:Courier New,monospace}@media(max-width:767px){.param-value{font-size:.625rem;font-weight:600}}.param-value.yellow{color:#eab308}.slider.yellow-slider::-webkit-slider-thumb{background-color:#eab308}.slider.yellow-slider::-moz-range-thumb{background-color:#eab308}.slider.yellow-slider:hover::-webkit-slider-thumb{background-color:#facc15}.slider.yellow-slider:hover::-moz-range-thumb{background-color:#facc15}@media(max-width:767px){.slider.yellow-slider:active::-webkit-slider-thumb{background-color:#facc15;transform:scale(1.1)}.slider.yellow-slider:active::-moz-range-thumb{background-color:#facc15;transform:scale(1.1)}}.echo-section{grid-column:1 / -1}@media(min-width:1024px){.echo-section{grid-column:span 1}}.echo-section:hover{border-color:#16a34a80}.param-title.green{color:#16a34a}.toggle-input:checked+.toggle-track.green-toggle{background-color:#15803d}.toggle-label.active-green{color:#16a34a}.delay-factor-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background-color:#262626;border-radius:.5rem;overflow:hidden;border:1px solid #262626}@media(max-width:767px){.delay-factor-grid{gap:.375rem;padding:.375rem;border-radius:.75rem;background-color:#171717}}.delay-factor-label{cursor:pointer;position:relative;background-color:#171717}.delay-factor-label:hover{background-color:#262626}.delay-factor-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.delay-factor-button{display:flex;align-items:center;justify-content:center;height:2rem;font-size:.625rem;font-family:Courier New,monospace;color:#a3a3a3;transition:all .2s;background-color:#262626;border-radius:.25rem}@media(max-width:767px){.delay-factor-button{height:2.75rem;font-size:.875rem;font-weight:700;border-radius:.5rem}}.delay-factor-button.active{background-color:#16a34a;color:#fff}@media(max-width:767px){.delay-factor-button.active{box-shadow:0 4px 12px #16a34a66}.delay-factor-label:active .delay-factor-button{transform:scale(.95)}}.echo-controls-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media(max-width:767px){.echo-controls-row{grid-template-columns:1fr;gap:1.5rem}}.slider.green-slider::-webkit-slider-thumb{background-color:#16a34a}.slider.green-slider::-moz-range-thumb{background-color:#16a34a}.slider.green-slider:hover::-webkit-slider-thumb{background-color:#22c55e}.slider.green-slider:hover::-moz-range-thumb{background-color:#22c55e}@media(max-width:767px){.slider.green-slider:active::-webkit-slider-thumb{background-color:#22c55e;transform:scale(1.1)}.slider.green-slider:active::-moz-range-thumb{background-color:#22c55e;transform:scale(1.1)}}.output-section{background-color:#0a0a0a80;border-radius:.75rem;padding:1.25rem;border:1px solid #262626;display:flex;flex-direction:column;justify-content:center}@media(max-width:767px){.output-section{padding:1rem;border-radius:.75rem}}.output-title{font-size:.75rem;font-weight:600;color:#a3a3a3;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}@media(max-width:767px){.output-title{font-size:.875rem;margin-bottom:.75rem}}.output-controls{display:flex;align-items:center;gap:1rem}@media(max-width:767px){.output-controls{gap:.75rem}}.volume-control{flex:1}.slider.white-slider::-webkit-slider-thumb{background-color:#fff}.slider.white-slider::-moz-range-thumb{background-color:#fff}@media(max-width:767px){.slider.white-slider:active::-webkit-slider-thumb{transform:scale(1.1)}.slider.white-slider:active::-moz-range-thumb{transform:scale(1.1)}}.visualizer-container{background-color:#171717;border-radius:.25rem;border:1px solid #262626;overflow:hidden;width:100px;height:24px}@media(max-width:767px){.visualizer-container{width:80px;height:28px;border-radius:.375rem}}.visualizer-canvas{width:100%;height:100%;opacity:.8}.action-buttons{display:flex;align-items:center;gap:1rem}@media(max-width:767px){.action-buttons{flex-direction:column;gap:.75rem}}.tap-tempo-container{flex:1;background-color:#0a0a0a80;border-radius:.75rem;border:1px solid #262626;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}@media(max-width:767px){.tap-tempo-container{width:100%;padding:.75rem 1rem;border-radius:.75rem}}.tap-tempo-button{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#a3a3a3;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.75rem .5rem;transition:color .2s}@media(max-width:767px){.tap-tempo-button{font-size:.875rem;padding:.5rem}}.tap-tempo-button:hover{color:#fff}@media(max-width:767px){.tap-tempo-button:active{transform:scale(.95)}}.bpm-display{display:flex;align-items:baseline;gap:.25rem}.bpm-value{font-size:1.25rem;font-family:Courier New,monospace;font-weight:700;color:#fff}@media(max-width:767px){.bpm-value{font-size:1.5rem}}.bpm-unit{font-size:.625rem;color:#737373;font-weight:700}@media(max-width:767px){.bpm-unit{font-size:.75rem}}.control-buttons{display:flex;gap:.5rem}@media(max-width:767px){.control-buttons{width:100%;gap:.75rem}}.play-button{height:3.5rem;padding-left:2rem;padding-right:2rem;border-radius:.5rem;background-color:#16a34a;color:#000;font-weight:700;letter-spacing:-.025em;box-shadow:0 10px 15px -3px #16a34a33;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s}@media(max-width:767px){.play-button{flex:1;height:4rem;font-size:1.125rem;border-radius:.75rem;box-shadow:0 8px 20px #16a34a4d}}.play-button:hover{background-color:#22c55e}.play-button:active{transform:scale(.95)}.play-button.playing{background-color:#dc2626;box-shadow:0 10px 15px -3px #dc262633}@media(max-width:767px){.play-button.playing{box-shadow:0 8px 20px #dc262666}}.play-button.playing:hover{background-color:#ef4444}.panic-button{height:3.5rem;width:3.5rem;border-radius:.5rem;background-color:#262626;color:#a3a3a3;border:1px solid #404040;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}@media(max-width:767px){.panic-button{height:4rem;width:4rem;border-radius:.75rem}}.panic-button:hover{background-color:#7f1d1dcc;color:#fca5a5}.panic-button:active{transform:scale(.95)}.footer{background-color:#0a0a0a;border-top:1px solid #262626;padding:1rem 2rem;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:1rem;font-size:.625rem;color:#737373;font-weight:500}@media(max-width:767px){.footer{padding:.75rem 1rem;gap:.5rem;font-size:.5rem}}@media(min-width:768px){.footer{flex-direction:row}}.keyboard-shortcuts{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}@media(max-width:767px){.keyboard-shortcuts{gap:.375rem;justify-content:center}}.shortcut-item{display:flex;align-items:center;gap:.25rem}.donate-button{display:inline-flex;align-items:center;gap:.25rem;background:linear-gradient(135deg,#ff5f6d,#ffc371);color:#fff!important;padding:.25rem .75rem;border-radius:9999px;text-decoration:none;font-weight:600;font-size:.7rem;transition:all .2s ease;border:none;cursor:pointer;box-shadow:0 2px 4px #0003}.donate-button:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0003;background:linear-gradient(135deg,#ff4b5c,#ffb347)}.donate-button:active{transform:translateY(0);box-shadow:0 2px 4px #0003}@media(max-width:767px){.donate-button{padding:.2rem .6rem;font-size:.6rem}}kbd{background-color:#262626;padding:.125rem .375rem;border-radius:.25rem;color:#d4d4d4;font-family:Courier New,monospace;font-size:.625rem}@media(max-width:767px){kbd{padding:.0625rem .25rem;font-size:.5rem}}.credits{display:flex;align-items:center;gap:1rem}@media(max-width:767px){.credits{gap:.5rem;font-size:.5rem}}.credits p{margin:0}.credit-link{color:#737373;text-decoration:underline;text-decoration-color:#404040;transition:color .2s}.credit-link:hover{color:#fff}.logo-link{opacity:.5;transition:opacity .2s;display:flex;align-items:center;color:#737373}.logo-link:hover{opacity:1}@media(max-width:767px){.logo-link svg{width:12px;height:12px}}body{font-family:Inter,sans-serif;margin:0;padding:0}input[type=range]{-webkit-appearance:none;background:#202020;height:27px;padding:0 10px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}input[type=range]:focus{outline:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#171717}::-webkit-scrollbar-thumb{background:#404040;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#525252}.app-container{background-color:#0a0a0a;color:#d4d4d4;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0}@media(max-width:767px){.app-container{padding:0;height:100vh;overflow:hidden}}@media(min-width:768px){.app-container{padding:3rem 1rem;justify-content:center}}.app-container ::selection{background-color:#eab3084d;color:#fef08a}.main-container{width:100%;background-color:#171717cc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #262626;overflow:hidden;position:relative;display:flex;flex-direction:column}@media(max-width:767px){.main-container{border-radius:0;border-left:none;border-right:none;height:100vh;max-width:100%;overflow-y:auto}}@media(min-width:768px){.main-container{max-width:80rem;border-radius:.75rem;box-shadow:0 25px 50px -12px #00000040}}.decorative-border{position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(to right,#dc2626,#eab308,#16a34a)}@media(max-width:767px){.decorative-border{height:3px}}.controls-grid{padding:1rem;display:grid;grid-template-columns:1fr;gap:1rem;flex:1;overflow-y:auto}@media(max-width:767px){.controls-grid{padding:.75rem;gap:.75rem;grid-template-columns:repeat(2,1fr)}}@media(min-width:768px){.controls-grid{padding:2rem;gap:1.5rem;grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.controls-grid{grid-template-columns:repeat(3,1fr)}}.output-actions-container{grid-column:1 / -1;display:grid;grid-template-columns:1fr;gap:1rem;padding-top:.5rem}@media(max-width:767px){.output-actions-container{gap:.75rem;padding-top:.75rem;grid-template-columns:1fr}}@media(min-width:768px){.output-actions-container{grid-template-columns:repeat(2,1fr);gap:1.5rem}}