:root{--bg-main: #080808;--bg-panel: #121212;--pad-surface: #1c1c1c;--pad-surface-active: #2a2118;--text-main: #f3efe7;--text-muted: #a9a095;--accent-warm: #d99a3d;--accent-hot: #ffbf5a;--danger: #ff5c5c;--border-soft: rgba(255, 255, 255, .12)}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;background:radial-gradient(circle at top,rgba(217,154,61,.12),transparent 35%),var(--bg-main);color:var(--text-main);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overscroll-behavior:none;-webkit-font-smoothing:antialiased}#app{min-height:100%;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border-soft);background:#0000004d}.app-title{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);margin:0}.app-controls{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text-muted)}.app-controls input[type=range]{accent-color:var(--accent-warm)}.kit-host{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}.app-legend{border-top:1px solid var(--border-soft);padding:10px 20px;font-size:11px;color:var(--text-muted);text-align:center}.app-legend kbd{background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:4px;padding:2px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-main);margin:0 4px}.status-panel{position:fixed;inset:0;background:#080808e0;backdrop-filter:blur(6px);display:grid;place-items:center;z-index:10;padding:20px}.status-panel.is-hidden{display:none}.status-card{max-width:420px;width:100%;background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:16px;padding:28px;text-align:center}.status-title{font-size:22px;letter-spacing:.3em;margin:0 0 6px;color:var(--accent-hot)}.status-subtitle{margin:0 0 18px;color:var(--text-muted);font-size:13px}.status-enable{background:var(--accent-warm);color:#1a1208;border:none;border-radius:999px;padding:12px 24px;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .12s linear,transform 60ms linear}.status-enable:hover:not(:disabled){background:var(--accent-hot)}.status-enable:active:not(:disabled){transform:scale(.97)}.status-enable:disabled{opacity:.6;cursor:default}.status-tip{margin:18px 0 0;font-size:11px;color:var(--text-muted);line-height:1.5}.status-error{color:var(--danger);font-size:13px;margin:0 0 18px}.status-loadlist{list-style:none;padding:0;margin:0 0 18px;text-align:left;font-size:12px;color:var(--text-muted);max-height:200px;overflow-y:auto}.status-loadlist li{padding:2px 0}.status-loadlist li[data-ok=false]{color:var(--danger)}.debug-panel{position:fixed;bottom:10px;right:10px;background:#000000bf;border:1px solid var(--border-soft);border-radius:8px;padding:8px 12px;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-muted);z-index:20;pointer-events:none;min-width:200px}.debug-panel span{color:var(--accent-hot)}.drum-kit{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(3,minmax(110px,1fr));gap:14px;width:min(960px,100%);aspect-ratio:16 / 9;max-height:70vh}.drum-pad{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;background:linear-gradient(145deg,#222,#111);border:1px solid var(--border-soft);border-radius:18px;color:var(--text-main);display:grid;place-items:center;grid-template-rows:1fr auto;padding:14px;cursor:pointer;font:inherit;transform:translateZ(0);will-change:transform;transition:transform 45ms linear,border-color 45ms linear,background-color 45ms linear;position:relative;overflow:hidden}.drum-pad:focus-visible{outline:2px solid var(--accent-hot);outline-offset:2px}.drum-pad.is-hit{transform:scale(.97);border-color:var(--accent-hot);background:var(--pad-surface-active)}.drum-label{font-size:14px;font-weight:600;letter-spacing:.04em;align-self:end;color:var(--text-main)}.drum-key{font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-muted);border:1px solid var(--border-soft);border-radius:4px;padding:2px 6px;margin-top:6px}.drum-crash,.drum-ride{border-radius:50%;background:linear-gradient(145deg,#2a2418,#1a1610);border-color:#d99a3d40}.drum-hihat,.drum-hihat-open{border-radius:50%;background:linear-gradient(145deg,#1f1f1f,#101010)}.drum-tom-high,.drum-tom-mid,.drum-tom-floor{border-radius:22px;background:linear-gradient(145deg,#242021,#131111)}.drum-snare{border-radius:22px;background:linear-gradient(145deg,#2c2826,#181412);border-color:#ffffff2e}.drum-kick{border-radius:22px;background:linear-gradient(145deg,#1a1a1a,#050505);border-color:#d99a3d4d}.zone-cymbal-left{grid-column:1 / span 2;grid-row:1}.zone-cymbal-right{grid-column:5 / span 2;grid-row:1}.zone-tom-high{grid-column:2 / span 1;grid-row:2}.zone-tom-mid{grid-column:3 / span 1;grid-row:2}.zone-tom-floor{grid-column:5 / span 2;grid-row:2}.zone-hihat-closed{grid-column:1 / span 1;grid-row:2}.zone-hihat-open{grid-column:4 / span 1;grid-row:2}.zone-snare{grid-column:2 / span 2;grid-row:3}.zone-kick{grid-column:4 / span 3;grid-row:3}@media (max-width: 720px){.drum-kit{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,minmax(80px,1fr));aspect-ratio:auto;max-height:none}.zone-cymbal-left{grid-column:1 / span 1;grid-row:1}.zone-cymbal-right{grid-column:3 / span 1;grid-row:1}.zone-tom-high{grid-column:1 / span 1;grid-row:2}.zone-tom-mid{grid-column:2 / span 1;grid-row:2}.zone-tom-floor{grid-column:3 / span 1;grid-row:2}.zone-hihat-closed{grid-column:1 / span 1;grid-row:3}.zone-hihat-open{grid-column:2 / span 2;grid-row:3}.zone-snare{grid-column:1 / span 3;grid-row:4}.zone-kick{grid-column:1 / span 3;grid-row:5}.drum-label{font-size:12px}.drum-key{font-size:10px}.app-header{padding:8px 12px}.kit-host{padding:10px}.app-legend{display:none}}@media (prefers-reduced-motion: reduce){.drum-pad{transition-duration:1ms}}