:root{--bg: #0b1220;--card: #0f172a;--card-2: #0b1327;--text: #e5e7eb;--muted: #9ca3af;--accent: #60a5fa;--accent-2: #22d3ee;--border: rgba(255, 255, 255, .08);--shadow: 0 18px 50px rgba(0, 0, 0, .45);--pad: linear-gradient(180deg, #0f1b33, #0b1220);--pad-hover: linear-gradient(180deg, #162342, #0f172a);--pad-active: linear-gradient(180deg, #1f2f55, #121a2d);--pad-glow: 0 0 0 0 rgba(96, 165, 250, 0);--switch-bg: #111827;--range-track: #1b2540;--range-thumb: #8ab8ff;--range-track-fill: linear-gradient(90deg, var(--accent), var(--accent-2))}html,body,#root{height:100%;margin:0}body{min-height:100svh;place-items:center;background:radial-gradient(90vmax 90vmax at 10% 10%,#16223b 0%,transparent 48%),radial-gradient(80vmax 80vmax at 90% 0%,#0b3a5c 0%,transparent 42%),var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background-attachment:fixed;overflow-x:hidden;padding:16px}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.dm-header{width:min(1000px,96vw);margin-inline:auto;display:flex;align-items:center;gap:10px;margin-bottom:12px}.dm-title{font-weight:900;letter-spacing:.4px;opacity:.95;position:relative;padding-left:10px;font-size:clamp(1rem,2.6vw,1.25rem)}.theme-icon{margin-left:auto;font-size:18px;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;padding:6px;border-radius:8px}.theme-icon:focus-visible{outline:2px solid rgba(96,165,250,.6);outline-offset:2px}#drum-machine{border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,var(--card),var(--card-2));box-shadow:var(--shadow);padding:14px;-webkit-backdrop-filter:saturate(110%) blur(4px);backdrop-filter:saturate(110%) blur(4px)}#display{background:linear-gradient(180deg,#0e1627,#0b1220);border:1px solid var(--border);border-radius:12px;padding:10px 12px;min-height:42px;margin-bottom:12px;display:grid;place-items:center;font-weight:800;letter-spacing:.3px;text-shadow:0 2px 10px rgba(0,0,0,.35);color:#fff;text-align:center;font-size:clamp(.9rem,2.2vw,1rem)}.controls{display:grid;gap:12px 16px;align-items:center;grid-template-columns:1fr;margin-bottom:12px}.controls .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}@media (min-width:700px){.controls{grid-template-columns:1fr auto}.controls .row:first-child{justify-content:flex-start}}label.switch{display:inline-flex;align-items:center;gap:10px;background:var(--switch-bg);border:1px solid var(--border);border-radius:999px;padding:8px 12px;-webkit-user-select:none;user-select:none;box-shadow:inset 0 1px #ffffff0a}label.switch span{font-weight:700;letter-spacing:.25px;color:var(--muted);font-size:.95rem}label.switch input[type=checkbox]{appearance:none;width:42px;height:22px;cursor:pointer;background:#1e2a46;border:1px solid var(--border);border-radius:999px;position:relative;outline:none;transition:background .2s ease,border-color .2s ease}label.switch input[type=checkbox]:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#e5e7eb;box-shadow:0 2px 8px #0006;transition:transform .22s cubic-bezier(.2,.8,.2,1)}label.switch input[type=checkbox]:checked{background:#1f3a68;border-color:#93c5fd59}label.switch input[type=checkbox]:checked:after{transform:translate(18px)}label.switch:has(input[type=checkbox]:checked) span:after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9be7ff,#29b6f6 60%,#0284c7);box-shadow:0 0 12px #60a5fabf,0 0 24px #22d3ee59}label.switch:not(:has(input[type=checkbox]:checked)) span:after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:#334155}.bank-name{margin-left:auto;font-weight:800;letter-spacing:.35px;color:var(--muted);background:#94a3b814;border:1px solid var(--border);padding:6px 10px;border-radius:999px}.controls label[for=volume]{font-size:12px;color:var(--muted);letter-spacing:.35px;text-transform:uppercase;flex:0 0 100%;text-align:center}#volume{appearance:none;width:100%;max-width:480px;height:12px;border-radius:999px;background:var(--range-track);border:1px solid var(--border);outline:none;box-shadow:inset 0 1px #ffffff0a;--vol: 50%;margin-inline:auto;display:block}#volume::-webkit-slider-runnable-track{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2)) 0 / var(--vol) 100% no-repeat,var(--range-track)}#volume::-moz-range-track{height:12px;border-radius:999px;background:var(--range-track)}#volume::-moz-range-progress{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}#volume::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--range-thumb);border:2px solid #0b1220;box-shadow:0 3px 10px #00000073;margin-top:-3px}#volume::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--range-thumb);border:2px solid #0b1220}.vol-val{font-weight:800;color:#fff;background:linear-gradient(180deg,#0e1627,#0b1220);border:1px solid var(--border);border-radius:999px;padding:6px 10px;min-width:56px;text-align:center;margin-top:6px;margin-inline:auto;display:block}@media (min-width:700px){.controls .row:has(#volume){justify-content:flex-end}.controls label[for=volume]{flex:0 0 auto;text-align:left;margin:0}#volume{width:min(420px,58vw);display:inline-block;margin:0 10px}.vol-val{display:inline-block;margin:0}}@media (min-width:960px){#volume{width:min(520px,48vw)}}.pad-grid{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:360px){.pad-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.drum-pad{appearance:none;cursor:pointer;border:1px solid var(--border);border-radius:14px;background:var(--pad);color:var(--text);padding:18px 0;min-height:64px;font-size:clamp(1rem,4.5vw,1.25rem);font-weight:900;letter-spacing:.6px;box-shadow:0 12px 24px #00000059,inset 0 1px #ffffff0d;transition:transform .08s ease,box-shadow .12s ease,background .2s ease,filter .2s ease;position:relative;overflow:hidden;text-align:center}.drum-pad:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--pad-glow);transition:box-shadow .18s ease}.drum-pad:hover{background:var(--pad-hover)}.drum-pad:active,.drum-pad.active{background:var(--pad-active);transform:translateY(1px);--pad-glow: 0 0 0 6px rgba(96, 165, 250, .18), 0 0 30px rgba(34, 211, 238, .25);box-shadow:0 10px 20px #00000080,inset 0 1px #ffffff0f}.drum-pad.off{filter:grayscale(.75) brightness(.85);cursor:default}:root[data-theme=light]{--bg: #f4f6fb;--card: #ffffff;--card-2: #f4f7fc;--text: #0f172a;--muted: #475569;--accent: #2563eb;--accent-2: #06b6d4;--border: rgba(0, 0, 0, .08);--shadow: 0 14px 32px rgba(0, 0, 0, .12);--pad: linear-gradient(180deg, #ffffff, #f2f6fb);--pad-hover: linear-gradient(180deg, #ffffff, #eaf0f8);--pad-active: linear-gradient(180deg, #eef3fb, #e6ecf7);--switch-bg: #eef2f7;--range-track: #e6edf7;--range-thumb: #3b82f6}:root[data-theme=light] body{background:radial-gradient(90vmax 90vmax at 12% 8%,#e7efff 0%,transparent 45%),radial-gradient(80vmax 80vmax at 90% 0%,#e0fbff 0%,transparent 40%),var(--bg);color:var(--text);background-attachment:fixed}