:root{--bg:#0a0f15;--panel:#121a26;--border:#1e293b;--muted:#8aa3c1;--text:#eaf1ff;--good:#22c55e;--warn:#f59e0b;--bad:#ef4444}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:radial-gradient(1200px 600px at 10% -10%,#0e1625 0%,#0a0f15 60%,#0a0f15 100%)}
.wrap{max-width:1200px;margin:0 auto;padding:16px}.top{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.brand{font-weight:900;letter-spacing:.8px;font-size:18px}.pill{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.04);border:1px solid var(--border);padding:8px 12px;border-radius:999px;color:var(--muted)}
.kbd{border:1px solid var(--border);background:#0b111a;padding:2px 6px;border-radius:6px;font-size:12px;color:#a1b8d9}.rec{display:flex;gap:10px;align-items:center}
.btn{appearance:none;border:1px solid var(--border);background:linear-gradient(180deg,#172234,#111827);color:var(--text);padding:9px 12px;border-radius:12px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04)}
.btn:hover{filter:brightness(1.05)}.btn.play{background:linear-gradient(180deg,#1f6e3f,#17452a)}.btn.stop{background:linear-gradient(180deg,#7a2733,#4d171e)}.btn.cue{background:linear-gradient(180deg,#1b365a,#12223c)}.btn.load{background:linear-gradient(180deg,#2a2a72,#1a1a45)}
.grid{display:grid;grid-template-columns:1fr 300px 1fr;gap:16px;align-items:stretch}.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid var(--border);border-radius:18px;padding:14px;box-shadow:0 12px 40px rgba(0,0,0,.35);backdrop-filter:saturate(110%) blur(6px)}
.deck .header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.deck .title{font-weight:800}.tiny{font-size:12px;color:var(--muted)}
.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.controls2{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.mixerBox{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center}
canvas{width:100%;height:120px;background:linear-gradient(180deg,#0a1018,#0c1320);border-radius:12px;border:1px solid var(--border);margin-bottom:10px;touch-action:none;cursor:crosshair}
.rangeWrap{display:flex;flex-direction:column;gap:6px}label{font-size:12px;color:#9db2cf}
input[type=range]{width:100%;appearance:none;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,#1f2a3a,#22304a);border-radius:999px}
input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(180deg,#5ad2ff,#a1a1ff);margin-top:-6px;border:1px solid #2b3750;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.rangeVal{font-size:12px;color:#b8c9e3;text-align:right}.vuBar{height:10px;width:100%;border-radius:999px;background:linear-gradient(90deg,#1e293b,#0f172a);border:1px solid var(--border);position:relative}
.vuBar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--vu,0%);background:linear-gradient(90deg,var(--good),var(--warn) 70%,var(--bad) 95%);border-radius:999px;box-shadow:0 0 8px rgba(34,197,94,.25)}
.tag{font-size:11px;color:#a8b8d6;background:#0e1523;border:1px solid #223049;border-radius:8px;padding:4px 8px;text-align:center}
.padGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pad{user-select:none;text-align:center;padding:18px 10px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg,#152033,#0f1828);box-shadow:0 10px 30px rgba(0,0,0,.35);cursor:pointer}
.pad:active{filter:brightness(1.08)}.pad .name{font-weight:800}.pad .hint{font-size:11px;color:#99b}
.pad.kick{background:linear-gradient(180deg,#1f2937,#101722)}.pad.snare{background:linear-gradient(180deg,#2a2135,#171221)}.pad.hat{background:linear-gradient(180deg,#202b22,#111a13)}.pad.clap{background:linear-gradient(180deg,#2a2620,#14120f)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:.5px}
.overlay .card{padding:18px}
.footer{margin-top:16px;text-align:center;color:#9fb2ce}
@media(max-width:1000px){.grid{grid-template-columns:1fr;gap:14px}}