:root{--bg-void: #0a0a09;--bg-stage: #121210;--chassis: #1a1815;--panel: #14120dcc;--panel-line: #2c2820;--brass: #c89a52;--brass-hi: #e8b96a;--amber: #ff9d3c;--cream: #ece3d0;--readout: #f6ecd6;--meter-on: #7bd6a0;--text: #e7e4dd;--text-muted: #8a8170;--text-dim: #6f685c;--fam-kick: #c0563c;--fam-snare: #ff9d3c;--fam-tom: #c97b4a;--fam-cymbal: #86b89a;--font-display: "Space Grotesk", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--r-pad: 11px;--r-panel: 10px;--r-chip: 6px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:var(--font-display);background:radial-gradient(125% 95% at 50% 38%,#1c1b16 0%,var(--bg-stage) 52%,var(--bg-void) 100%);color:var(--text);user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;overscroll-behavior:none}#app{position:relative;width:100%;height:100%}#scene{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none}.hud-top{position:absolute;top:calc(18px + env(safe-area-inset-top));left:calc(24px + env(safe-area-inset-left));pointer-events:none}.hud-top h1{font-size:clamp(20px,4vw,30px);font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#ecd6a6}.subtitle{font-family:var(--font-mono);font-size:clamp(8px,1.4vw,10px);letter-spacing:3px;color:var(--text-muted);margin-top:6px}.mode{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 12px;border:1px solid var(--panel-line);border-radius:var(--r-chip);background:var(--panel);font-family:var(--font-mono);font-size:clamp(10px,1.6vw,12px);letter-spacing:2px;color:#c9c0ae}.mode:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--meter-on);box-shadow:0 0 8px var(--meter-on)}.hud-right{position:absolute;top:calc(16px + env(safe-area-inset-top));right:calc(20px + env(safe-area-inset-right));width:min(232px,42vw);border:1px solid var(--panel-line);border-radius:var(--r-panel);background:var(--panel);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;pointer-events:none;max-height:min(78vh,calc(100dvh - 32px))}.hud-right ul{list-style:none;padding:8px 12px}.hud-right h2{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:#9a8a6e;padding:9px 13px 6px;border-top:1px solid var(--panel-line)}#presets li{font-family:var(--font-mono);font-size:clamp(10px,1.6vw,11px);color:var(--text-muted);padding:4px;border-radius:5px}#presets li.active{color:var(--amber);font-weight:700}#presets li.active:after{content:" ▸"}.hint{font-family:var(--font-mono);font-size:8.5px;color:var(--text-dim);padding:2px 13px 8px}#kits,#fx{display:flex;flex-wrap:wrap;gap:5px;padding:4px 13px 12px}#kits li,#fx li{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);border:1px solid var(--panel-line);padding:3px 8px;border-radius:5px;white-space:nowrap}#fx li.active{color:var(--bg-stage);background:var(--meter-on);border-color:var(--meter-on);font-weight:700}#kits li.active{color:var(--bg-stage);background:var(--amber);border-color:var(--amber);font-weight:700}#presets li,#kits li,#fx li{pointer-events:auto;cursor:pointer}.piece-name{position:absolute;bottom:150px;width:100%;text-align:center;font-family:var(--font-display);font-weight:700;font-size:clamp(28px,6vw,64px);letter-spacing:10px;text-transform:uppercase;color:var(--readout);text-shadow:0 0 34px #ff9d3c55;pointer-events:none}.dyn{position:absolute;bottom:122px;width:100%;display:flex;align-items:center;justify-content:center;gap:9px;pointer-events:none;font-family:var(--font-mono);font-size:9px;letter-spacing:1px;color:var(--text-dim)}.dyn:before{content:"GHOST"}.dyn:after{content:"ACCENT";color:var(--amber)}.dyn i{display:block;width:clamp(120px,22vw,168px);height:6px;border-radius:4px;background:#2a2620;overflow:hidden;position:relative}.dyn i:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;transform:scaleX(var(--vel, 0));background:linear-gradient(90deg,var(--fam-kick),var(--amber) 60%,#ffd08a);box-shadow:0 0 10px #ff9d3c88;transition:transform 80ms ease-out}.hud-bottom{position:absolute;bottom:80px;width:100%;padding:0 calc(26px + env(safe-area-inset-right)) 0 calc(26px + env(safe-area-inset-left));font-family:var(--font-mono);font-size:clamp(9px,1.3vw,10px);line-height:1.8;color:var(--text-muted);pointer-events:none}.hud-bottom b{color:#d9c9aa;font-weight:700}.hud-bottom .accent{color:var(--amber)}.touch-hint{display:none;color:#9a9080;text-align:center}.pad-bar{position:absolute;left:env(safe-area-inset-left);right:env(safe-area-inset-right);bottom:env(safe-area-inset-bottom);display:flex;gap:6px;padding:10px 12px;background:linear-gradient(#0000,#100e0a 55%);z-index:6;touch-action:none}.pad{--fam: var(--brass);flex:1 1 0;min-width:0;min-height:56px;border:none;border-radius:var(--r-pad);background:linear-gradient(#211b15,#161210);box-shadow:inset 0 0 0 2px var(--fam),inset 0 0 18px color-mix(in srgb,var(--fam) 38%,transparent),inset 0 2px 3px #ffffff14;color:var(--cream);font-family:var(--font-mono);font-size:clamp(9px,1.5vw,12px);font-weight:700;letter-spacing:1px;cursor:pointer;touch-action:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:transform 40ms,box-shadow .12s}.pad .key{font-size:.66em;color:var(--text-muted);font-weight:500;letter-spacing:0}.pad-kick{--fam: var(--fam-kick);flex-grow:1.25}.pad-snare{--fam: var(--fam-snare)}.pad-tom{--fam: var(--fam-tom)}.pad-cym{--fam: var(--fam-cymbal)}.pad.active,.pad:active{transform:translateY(2px) scale(.97);box-shadow:inset 0 0 0 2px var(--fam),inset 0 0 28px var(--fam),inset 0 2px 3px #fff2}.pads-toggle{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(80px + env(safe-area-inset-bottom));z-index:7;padding:6px 12px;border:1px solid var(--panel-line);border-radius:var(--r-chip);background:var(--panel);color:var(--amber);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1.5px;cursor:pointer}.pads-toggle:before{content:"▣ "}body.pads-hidden .pad-bar{display:none}body.pads-hidden .pads-toggle{bottom:calc(20px + env(safe-area-inset-bottom));opacity:.75}body.pads-hidden .piece-name{bottom:96px}body.pads-hidden .dyn{bottom:68px}body.pads-hidden .hud-bottom{bottom:26px}.gesture-gate{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:#0a0a09cc;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:pointer;transition:opacity .4s}.gesture-gate span{font-family:var(--font-display);font-weight:700;font-size:clamp(15px,2.4vw,19px);color:#ffd08a;letter-spacing:1px;border:1px solid #ff9d3c55;background:#ff9d3c0f;padding:16px 30px;border-radius:10px;text-align:center;animation:gate-pulse 2.2s ease-out infinite}@keyframes gate-pulse{0%,to{box-shadow:0 0 #ff9d3c44}50%{box-shadow:0 0 0 8px #ff9d3c00}}.gesture-gate.hidden{opacity:0;pointer-events:none}.rotate-hint{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:none;align-items:center;justify-content:center;background:var(--bg-void);text-align:center}.rotate-hint span{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,4vw,24px);color:var(--cream);padding:0 32px}@media (pointer: coarse){.keys-hint{display:none}.touch-hint{display:block}#presets li{min-height:44px;display:flex;align-items:center;padding:8px 10px}#kits li,#fx li{min-height:40px;padding:10px 12px;font-size:11px}#presets li:active,#kits li:active,#fx li:active{background:#ffffff12}.pads-toggle{min-width:44px;min-height:44px;padding:12px 16px}.hud-right{pointer-events:auto}.piece-name{bottom:112px}}@media (max-height: 480px){.pad{min-height:44px}.piece-name{bottom:92px;font-size:clamp(24px,6vw,38px);letter-spacing:6px}.dyn{bottom:72px}.hud-bottom{display:none}.hud-right{max-height:64vh}.pads-toggle{bottom:calc(58px + env(safe-area-inset-bottom))}}@media (orientation: portrait) and (pointer: coarse){.rotate-hint{display:flex}}