body{background:#181818;color:#fff;font-family:Press Start\ 2P,monospace;justify-content:center;margin:0;min-height:100vh}#drum-machine,body{align-items:center;display:flex}#drum-machine{background:#232323;border-radius:16px;box-shadow:0 4px 24px #000a;flex-direction:column;padding:32px 40px}#display{background:#333;border:2px solid #444;border-radius:8px;font-size:1.5rem;margin-bottom:24px;min-width:200px;padding:16px 32px;text-align:center}.controls{gap:0;justify-content:space-between;margin-bottom:40px;max-width:340px;width:100%}.controls,.controls label{align-items:center;display:flex}.controls label{flex:1 1;flex-direction:column;font-size:1rem;gap:8px}.pad-bank{grid-gap:28px;display:grid;gap:28px;grid-template-columns:repeat(3,105px)}.drum-pad,.pad-bank{justify-content:center}.drum-pad{align-items:center;background:#444;border:2px solid #888;border-radius:14px;box-shadow:0 2px 8px #111;cursor:pointer;display:flex;font-size:2.2rem;height:105px;transition:background .2s,transform .1s;-webkit-user-select:none;user-select:none;width:105px}.drum-pad:active,.drum-pad:focus{background:#39ff14;color:#000;outline:2px solid #fff;transform:scale(.97)}input[type=range]{width:100px}.toggle-switch{display:inline-block;height:25px;position:relative;width:53px}.toggle-switch input[type=checkbox]{height:0;opacity:0;width:0}.toggle-slider{background:#000;border:2px solid #fff;border-radius:6px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:background .2s}.toggle-switch input:checked+.toggle-slider{background:#ff1493}.toggle-slider:before{background:#fff;border-radius:4px;bottom:2px;box-shadow:0 1px 4px #0003;content:"";height:16px;left:2px;position:absolute;right:1px;top:2px;transform:translateX(0);transition:transform .2s;width:18px}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(26px)}input[type=range]{appearance:none;-webkit-appearance:none;background:#0000;height:18px;margin-top:8px;width:120px}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#ff1493 0 50%,#888 50% 100%),repeating-linear-gradient(90deg,#0000 0 0,#0000 0 8px,#181818 8px 12px);background:linear-gradient(to right,#ff1493 0 var(--percent,50%),#888 var(--percent,50%) 100%),repeating-linear-gradient(to right,#0000 0 0,#0000 0 8px,#181818 8px 12px);border-radius:4px;box-sizing:border-box;height:18px}input[type=range]::-moz-range-track{background:linear-gradient(90deg,#ff1493 0 50%,#888 50% 100%),repeating-linear-gradient(90deg,#0000 0 0,#0000 0 8px,#181818 8px 12px);background:linear-gradient(to right,#ff1493 0 var(--percent,50%),#888 var(--percent,50%) 100%),repeating-linear-gradient(to right,#0000 0 0,#0000 0 8px,#181818 8px 12px);border-radius:4px;box-sizing:border-box;height:18px}input[type=range]::-ms-fill-lower{background:#ff1493;border-radius:4px}input[type=range]::-ms-fill-upper{background:#888;border-radius:4px}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:#ff1493;border:2px solid #fff;border-radius:4px;box-shadow:0 2px 6px #0003;cursor:pointer;height:18px;-webkit-transition:background .2s;transition:background .2s;width:18px}input[type=range]:focus::-webkit-slider-thumb{background:#ff69b4}input[type=range]::-moz-range-thumb{background:#ff1493;border:2px solid #fff;border-radius:4px;box-shadow:0 2px 6px #0003;cursor:pointer;height:18px;-moz-transition:background .2s;transition:background .2s;width:18px}input[type=range]:focus::-moz-range-thumb{background:#ff69b4}input[type=range]::-ms-thumb{background:#ff1493;border:2px solid #fff;border-radius:4px;box-shadow:0 2px 6px #0003;cursor:pointer;height:18px;-ms-transition:background .2s;transition:background .2s;width:18px}input[type=range]:focus::-ms-thumb{background:#ff69b4}input[type=range]:focus{outline:none}input[type=range]{scrollbar-width:none}
/*# sourceMappingURL=main.8b1d4e57.css.map*/