.drum-slider-hw{appearance:none;cursor:pointer;background:0 0;outline:none;width:100%;height:26px}.drum-slider-hw::-webkit-slider-runnable-track{background:linear-gradient(#d8dce0 0%,#eef0f2 50%,#c4c8cc 100%);border:1px solid #00000073;border-radius:999px;height:4px;box-shadow:inset 0 1px #ffffff8c,inset 0 -1px 1px #00000040,0 0 6px #e6eef88c,0 0 12px #b4d2ff47}.drum-slider-hw::-moz-range-track{background:linear-gradient(#d8dce0 0%,#eef0f2 50%,#c4c8cc 100%);border:1px solid #00000073;border-radius:999px;height:4px;box-shadow:inset 0 1px #ffffff8c,inset 0 -1px 1px #00000040,0 0 6px #e6eef88c,0 0 12px #b4d2ff47}.drum-slider-hw::-webkit-slider-thumb{-webkit-appearance:none;cursor:grab;background:radial-gradient(90% 50%,#ff466ed9 0%,#ff466e8c 18%,#ff466e40 35%,#0000 60%),linear-gradient(#0000 0 44%,#ff3a60 44% 47%,#ff6080 47% 53%,#ff3a60 53% 56%,#0000 56% 100%),linear-gradient(90deg,#ffffff2e 0%,#0000 15% 85%,#0000004d 100%),linear-gradient(#f0dfb4 0%,#d8c692 45%,#b8a674 90%,#8c7a4c 100%);border:1px solid #000;border-radius:3px;width:14px;height:24px;margin-top:-11px;transition:box-shadow .12s,transform 80ms;box-shadow:inset 0 1px #fff5d78c,inset 0 -1px #0000008c,inset 1px 0 #fff0c840,inset -1px 0 #00000059,0 2px 4px #000c,0 4px 10px #00000080,0 0 6px #f4e6c226}.drum-slider-hw::-moz-range-thumb{cursor:grab;background:linear-gradient(#0000 0 45%,#e0b878d9 45% 55%,#0000 55% 100%),linear-gradient(90deg,#ffffff14 0%,#0000 15% 85%,#00000040 100%),linear-gradient(#3a3a44 0%,#22222a 45%,#15151c 90%,#0c0c12 100%);border:1px solid #000;border-radius:3px;width:14px;height:24px;transition:box-shadow .12s,transform 80ms;box-shadow:inset 0 1px #fff5d78c,inset 0 -1px #0000008c,inset 1px 0 #fff0c840,inset -1px 0 #00000059,0 2px 4px #000c,0 4px 10px #00000080,0 0 6px #f4e6c226}.drum-slider-hw:hover::-webkit-slider-thumb{box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #0009,inset 1px 0 #ffffff14,inset -1px 0 #0006,0 2px 5px #000c,0 5px 10px #00000080,0 0 10px #f4e6c266}.drum-slider-hw:hover::-moz-range-thumb{box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #0009,inset 1px 0 #ffffff14,inset -1px 0 #0006,0 2px 5px #000c,0 5px 10px #00000080,0 0 10px #f4e6c266}.drum-slider-hw:active::-webkit-slider-thumb{cursor:grabbing;transform:translateY(1px)}.drum-slider-hw:active::-moz-range-thumb{cursor:grabbing;transform:translateY(1px)}.drum-slider-hw:disabled{opacity:.4;cursor:not-allowed}.drum-slider-hw:disabled::-webkit-slider-thumb{cursor:not-allowed}.drum-btn-hw{color:#c8c8d0;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 1px #000000b3;border:1px solid var(--border);cursor:pointer;background:linear-gradient(135deg,#ffffff0d 0%,#0000 45%,#00000026 100%),linear-gradient(#2a2a30 0%,#1e1e22 100%);border-bottom:2px solid #0e0e11;border-radius:4px;justify-content:center;align-items:center;padding:.375rem .75rem;font-size:.8125rem;font-weight:600;transition:transform .1s,background .1s,box-shadow .1s,color .1s,border-color .1s;display:inline-flex;position:relative;transform:perspective(500px)rotateX(0)translateZ(0);box-shadow:inset 0 1px #ffffff17,inset 0 -1px #0000008c,inset 0 -4px 8px #00000040,0 1px 2px #0000008c,0 4px 10px #00000059}.drum-btn-hw:before{content:"";pointer-events:none;opacity:.8;background:linear-gradient(#ffffff1f 0%,#ffffff05 60%,#0000 100%);border-radius:3px 3px 8px 8px/3px 3px 20px 20px;height:45%;transition:opacity .1s;position:absolute;top:1px;left:3px;right:3px}.drum-btn-hw:hover{color:var(--foreground);border-color:var(--border-light);background:linear-gradient(135deg,#ffffff12 0%,#0000 45%,#00000026 100%),linear-gradient(#32323a 0%,#24242a 100%);transform:perspective(500px)rotateX(-1.5deg)translateZ(1px);box-shadow:inset 0 1px #ffffff1f,inset 0 -1px #0000008c,inset 0 -4px 8px #00000038,0 3px 6px #00000080,0 8px 16px #0006,0 0 6px #c49a6c4d,0 0 14px #c49a6c2e,0 0 28px #c49a6c14}.drum-btn-hw:hover:before{opacity:1}.drum-btn-hw:active{border-bottom-width:1px;transform:perspective(500px)rotateX(1deg)translateY(1px)translateZ(-1px);box-shadow:inset 0 2px 5px #0000008c,inset 0 -1px #ffffff0a,0 1px 1px #0000004d}.drum-btn-hw:active:before{opacity:.4}.drum-btn-hw.drum-active{color:var(--accent);box-shadow:0 0 8px var(--accent-glow), inset 0 1px 0 var(--metal-highlight);border-color:#c49a6c4d}.drum-btn-hw.drum-btn-burgundy{color:#f1d4d8;background:linear-gradient(135deg,#ffffff0d 0%,#0000 45%,#0000002e 100%),linear-gradient(#5b1f2a 0%,#3d1219 100%);border-color:#2a0a10}.drum-btn-hw.drum-btn-burgundy:hover{color:#ffe4e8;background:linear-gradient(135deg,#ffffff12 0%,#0000 45%,#00000026 100%),linear-gradient(#6b2632 0%,#491721 100%);border-color:#3a1018}.drum-btn-hw.drum-btn-vernil{color:#fff;text-shadow:0 1px 1px #0000008c;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#ffffff0f 0%,#0000 45%,#0000002e 100%),linear-gradient(#6c9c78 0%,#4d7a58 100%);border-color:#2e4a36;box-shadow:inset 0 1px #ffffff1f,inset 0 -1px #0000008c,0 0 4px #7fee9c4d,0 0 10px #7fee9c33,0 0 22px #7fee9c1a}.drum-btn-hw.drum-btn-vernil:hover{color:#fff;background:linear-gradient(135deg,#ffffff14 0%,#0000 45%,#00000026 100%),linear-gradient(#7eb086 0%,#58886a 100%);border-color:#3a5e44;box-shadow:inset 0 1px #ffffff29,inset 0 -1px #00000080,0 0 6px #96ffb45c,0 0 14px #7fee9c3d,0 0 28px #7fee9c1f}.drum-panel{background:linear-gradient(135deg, #ffffff0a 0%, transparent 35%, #0000001f 100%), linear-gradient(180deg, var(--surface) 0%, var(--metal-dark) 100%);border:1px solid var(--border-subtle);border-radius:8px;position:relative;box-shadow:inset 0 1px #ffffff14,inset 1px 0 #ffffff05,inset 0 -1px #00000080,inset 0 -8px 20px #0000002e,0 1px 2px #00000080,0 6px 16px #00000059,0 0 0 1px #0003}.drum-panel:after{content:"";border-radius:inherit;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:480px 52px;position:absolute;inset:0}.drum-panel-inset{background:linear-gradient(#101013 0%,#0e0e11 100%);border:1px solid #1a1a1e;border-radius:6px;box-shadow:inset 0 2px 6px #00000080}.drum-lcd-display{color:var(--accent);font-family:var(--font-geist-mono);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:linear-gradient(#080a09 0%,#0c0f0d 100%);border:1px solid #1a1d1b;border-radius:6px;box-shadow:inset 0 2px 6px #0009}select.drum-lcd-display option{color:var(--accent);background-color:#0a0c0b}.drum-led{background:radial-gradient(circle at 40% 35%, #e8c090, var(--accent) 60%);width:6px;height:6px;box-shadow:0 0 3px var(--accent), 0 0 8px var(--accent-dim), 0 0 16px var(--accent-glow);border:1px solid #c49a6c4d;border-radius:50%}.drum-led-green{background:radial-gradient(circle at 40% 35%, #90e8a0, var(--green) 60%);width:6px;height:6px;box-shadow:0 0 3px var(--green), 0 0 8px var(--green-dim), 0 0 16px #5fa86e0f;border:1px solid #5fa86e4d;border-radius:50%}.drum-led-red{background:radial-gradient(circle at 40% 35%, #e89090, var(--red) 60%);width:6px;height:6px;box-shadow:0 0 3px var(--red), 0 0 8px var(--red-dim);border:1px solid #c46b6b4d;border-radius:50%}.drum-led-amber{background:radial-gradient(circle at 40% 35%, #e8c090, var(--accent) 60%);box-shadow:0 0 4px var(--accent), 0 0 8px var(--accent-dim)}.drum-led-strip{align-items:center;gap:3px;display:flex}.drum-led-strip-dot{background:var(--border);border-radius:50%;width:3px;height:3px}.drum-led-strip-dot.drum-active{background:var(--accent);box-shadow:0 0 4px var(--accent-dim)}.drum-knob-ring{background:conic-gradient(from 225deg, var(--accent) 0%, var(--accent-bright) var(--drum-knob-value,60%), #0000008c var(--drum-knob-value,60%), #0000008c 75%, transparent 75% 100%);border-radius:50%;width:48px;height:48px;padding:4px;position:relative;box-shadow:0 0 0 1px #0009,0 0 8px #c49a6c47,0 3px 6px #0000008c,0 6px 14px #0006}.drum-knob-ring .drum-knob-inner{background:radial-gradient(circle at 32% 28%,#ffffff38 0%,#ffffff0f 18%,#0000 45%),radial-gradient(circle at 70% 80%,#0000008c 0%,#0000 55%),linear-gradient(160deg,#45454c 0%,#2c2c32 45%,#1a1a1e 100%);border:1px solid #000c;border-radius:50%;width:100%;height:100%;transition:transform 80ms;position:relative;box-shadow:inset 0 1px #ffffff38,inset 0 -2px 4px #0000008c,inset 0 6px 12px #ffffff08,0 2px 3px #000000b3}.drum-knob-inner:after{content:"";background:linear-gradient(180deg, #ffdca0 0%, var(--accent-bright) 55%, var(--accent) 100%);border-radius:1.5px;width:2.5px;height:9px;position:absolute;top:3px;left:50%;transform:translate(-50%);box-shadow:0 0 4px #ffd296b3,0 1px 2px #0000008c}.drum-knob-inner:before{content:"";background:radial-gradient(circle at 35% 30%,#5a5a62 0%,#2a2a2e 65%,#111 100%);border-radius:50%;position:absolute;inset:40%;box-shadow:inset 0 1px #ffffff2e,inset 0 -1px #00000080,0 0 2px #0009}.drum-label-engraved{letter-spacing:.14em;text-transform:uppercase;color:#b4b4bc;text-shadow:0 1px #0000008c,0 0 1px #0009,0 0 6px #b4b4c81f;font-size:.75rem;font-weight:600}