:root{--ink: #0b0a10;--ink2: #15101e;--stage: #120c1c;--surface: rgba(28, 22, 40, .5);--surface2: rgba(20, 16, 30, .72);--hair: rgba(255, 200, 150, .13);--hair2: rgba(255, 200, 150, .22);--text: #e7e2ec;--muted: #9b8fae;--brass: #e8b873;--accent: #ff4d8d;--accent2: #ffb24d;--skin: #e8b873;--cool: #9fb6c8;--mode: #4fd4e6;--on-accent: #170810;--note: #ffd9a0;--note-glow: rgba(255, 77, 141, .5);--env: 0;--r-panel: 16px;--r-chip: 8px;--r-pill: 999px;--gap-hud: clamp(12px, 2vw, 20px);--pad-edge: 16px;--keybar-h: clamp(96px, 17vh, 132px);--font-display: "Bricolage Grotesque", system-ui, sans-serif;--font-mono: "Space Mono", ui-monospace, monospace}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:var(--font-display);background:var(--ink);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%}.stage:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,var(--stage) 0%,var(--ink2) 38%,var(--ink) 78%)}#scene{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;z-index:1}.env-glow{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;opacity:var(--env);background:radial-gradient(60% 55% at 50% 60%,color-mix(in srgb,var(--accent) 40%,transparent),transparent 70%);mix-blend-mode:screen;transition:opacity .08s linear}.hud-top{position:absolute;top:calc(16px + env(safe-area-inset-top));left:calc(20px + env(safe-area-inset-left));pointer-events:none;z-index:5}.hud-top h1{font-family:var(--font-display);font-size:clamp(22px,4vw,34px);color:var(--brass);letter-spacing:.5px;text-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent)}.subtitle{font-family:var(--font-mono);font-size:clamp(11px,1.6vw,13px);letter-spacing:.06em;color:var(--muted)}.mode{margin-top:10px;font-family:var(--font-mono);font-size:clamp(13px,2vw,17px);letter-spacing:.12em;color:var(--mode);font-weight:700;text-shadow:0 0 16px color-mix(in srgb,var(--mode) 55%,transparent)}.hud-right{position:absolute;top:calc(16px + env(safe-area-inset-top));right:calc(20px + env(safe-area-inset-right));text-align:left;pointer-events:none;max-height:min(78vh,calc(100dvh - var(--keybar-h) - 32px));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:5}body.keys-hidden .hud-right{max-height:min(78vh,calc(100dvh - 32px))}.glass-panel{pointer-events:auto;padding:14px 16px;border-radius:var(--r-panel);background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--hair2);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 20px 50px #0006}.hud-right ul{list-style:none}.panel-head{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}.panel-head+ul{margin-bottom:4px}#presets li{display:flex;gap:11px;align-items:baseline;font-family:var(--font-mono);font-size:clamp(12px,1.7vw,14px);color:var(--muted);font-weight:500;padding:3px 9px;border-radius:var(--r-chip);cursor:pointer;transition:all .15s}#presets li:hover{color:var(--text)}#presets li .ord{font-size:10px;opacity:.55;min-width:18px}#presets li.active{color:var(--accent);font-weight:700;background:color-mix(in srgb,var(--accent) 12%,transparent)}#presets li.active .ord{opacity:.9}#voices{margin-bottom:4px}#voices li{font-family:var(--font-mono);font-size:clamp(11px,1.6vw,13px);color:var(--muted);padding:3px 9px;border-radius:var(--r-chip);cursor:pointer;transition:all .15s}#voices li:hover{color:var(--text)}#voices li.active{color:var(--accent);font-weight:700;background:color-mix(in srgb,var(--accent) 12%,transparent)}.hint{font-family:var(--font-mono);font-size:10px;color:var(--muted);opacity:.7;margin:4px 0 14px 9px}.hud-right h2{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.16em}#fx li{display:flex;justify-content:space-between;gap:16px;align-items:center;font-family:var(--font-mono);font-size:clamp(11px,1.6vw,13px);color:var(--muted);padding:3px 9px;border-radius:var(--r-chip);cursor:pointer;transition:all .15s}#fx li .fx-label{letter-spacing:.12em;color:var(--muted)}#fx li .fx-val{font-weight:700;color:var(--muted);opacity:.6}#fx li.accent .fx-val{color:var(--accent2);opacity:1;text-shadow:0 0 12px color-mix(in srgb,var(--accent2) 60%,transparent)}.note-name{position:absolute;bottom:150px;width:100%;text-align:center;font-family:var(--font-display);font-size:clamp(38px,9vw,72px);font-weight:800;color:var(--note);pointer-events:none;z-index:4;text-shadow:0 0 18px var(--note-glow),0 0 40px var(--note-glow)}.hud-bottom{position:absolute;bottom:0;width:100%;padding:10px calc(24px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));background:linear-gradient(transparent,#0000008c 30%);font-family:var(--font-mono);font-size:clamp(11px,1.5vw,13px);letter-spacing:.03em;line-height:1.7;pointer-events:none;z-index:4}.hud-bottom b{color:var(--brass)}.touch-hint{display:none;color:var(--muted)}.keybar{position:absolute;left:env(safe-area-inset-left);right:env(safe-area-inset-right);bottom:env(safe-area-inset-bottom);height:var(--keybar-h);display:flex;gap:6px;padding:8px;background:linear-gradient(transparent,#0000009e 24%);border-top:1px solid var(--hair);box-shadow:inset 0 16px 26px -18px #000000d9;z-index:6;touch-action:none}.oct-btn{flex:0 0 auto;width:clamp(58px,9vw,96px);border:1px solid var(--hair2);border-radius:12px;background:linear-gradient(color-mix(in srgb,var(--skin) 26%,#1a1320),var(--ink2));color:var(--skin);font-family:var(--font-mono);font-size:clamp(12px,1.8vw,16px);font-weight:800;letter-spacing:.1em;cursor:pointer;touch-action:none;box-shadow:inset 0 2px #ffffff1f,inset 0 -4px 8px #00000073,0 2px 6px #0006;transition:all .15s}.oct-btn.active{filter:brightness(1.5);box-shadow:0 0 18px color-mix(in srgb,var(--skin) 50%,transparent);transform:scale(.97)}.piano{position:relative;flex:1 1 auto}.white-row{display:flex;height:100%;gap:0}.skey{cursor:pointer;touch-action:none;border:none}.skey.white{flex:1 1 0;min-width:0;border-radius:3px 3px 9px 9px;background:linear-gradient(180deg,#fbf8ff,#ece6f3 44%,#d4cae4);color:#5a4a70;display:flex;align-items:flex-end;justify-content:center;padding-bottom:9px;font-family:var(--font-mono);font-size:clamp(11px,1.6vw,15px);font-weight:700;box-shadow:inset 0 2px #ffffffe6,inset 0 -11px 14px #5a4a702e,inset 0 -3px #00000038,inset 1px 0 #5a4a7047,0 2px 6px #0006;transition:transform .06s,box-shadow .12s,filter .1s,background .08s}.skey.white:hover{filter:brightness(1.04)}.skey.white.active{background:linear-gradient(180deg,color-mix(in srgb,var(--skin) 80%,#fff),var(--skin));color:var(--on-accent);transform:translateY(2px);box-shadow:inset 0 2px #fff9,inset 0 0 18px color-mix(in srgb,var(--skin) 55%,transparent),0 0 22px color-mix(in srgb,var(--skin) 55%,transparent)}.skey.black{position:absolute;top:0;width:7.2%;height:60%;transform:translate(-50%);border-radius:2px 2px 7px 7px;background:linear-gradient(180deg,#3a3050,#1a1426 46%,#07050c);box-shadow:inset 0 1px #ffffff2e,inset 0 -5px 7px #0009,0 4px 7px #000000b3;z-index:2;transition:transform .06s,box-shadow .12s,background .08s}.skey.black.active{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff),color-mix(in srgb,var(--accent) 52%,#000));transform:translate(-50%) translateY(2px);box-shadow:inset 0 1px #ffffff4d,0 0 20px color-mix(in srgb,var(--accent) 70%,transparent)}.skin-toggle{flex:0 0 auto;display:flex;align-items:center;gap:2px;align-self:center;padding:3px;border:1px solid var(--hair2);border-radius:var(--r-pill);background:var(--surface2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.skin-opt{border:none;cursor:pointer;background:transparent;color:var(--muted);font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.04em;padding:7px 11px;min-width:38px;border-radius:var(--r-pill);transition:all .18s}.skin-opt.active{background:var(--skin);color:var(--on-accent);font-weight:700}.pads-toggle{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(150px + env(safe-area-inset-bottom));z-index:7;padding:8px 14px;border:1px solid var(--hair2);border-radius:var(--r-pill);background:var(--surface2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--accent);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;cursor:pointer;transition:all .3s}.help-btn{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(196px + env(safe-area-inset-bottom));z-index:7;width:30px;height:30px;border:1px solid var(--hair2);border-radius:50%;background:var(--surface2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--muted);font-family:var(--font-mono);font-size:13px;font-weight:700;cursor:pointer;transition:all .3s}.help-btn:hover{color:var(--text);border-color:var(--accent)}.help-popover{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(232px + env(safe-area-inset-bottom));z-index:8;max-width:min(360px,80vw);padding:14px 16px;border-radius:var(--r-panel);background:var(--surface2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--hair2);box-shadow:0 20px 50px #00000080;font-family:var(--font-mono);font-size:clamp(11px,1.4vw,13px);line-height:1.8;color:var(--muted)}.help-popover[hidden]{display:none}.help-popover .legend-title{color:var(--brass);letter-spacing:.1em;margin-bottom:6px;font-size:11px}.help-popover b{color:var(--brass)}body.keys-hidden .keybar{display:none}body.keys-hidden .pads-toggle{bottom:calc(20px + env(safe-area-inset-bottom));opacity:.8}body.keys-hidden .help-btn{bottom:calc(60px + env(safe-area-inset-bottom))}body.keys-hidden .help-popover{bottom:calc(96px + env(safe-area-inset-bottom))}body.keys-hidden .note-name{bottom:96px}.gesture-gate{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ink) 80%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;z-index:20;transition:opacity .4s}.gesture-gate span{font-family:var(--font-mono);font-size:clamp(15px,2.4vw,19px);letter-spacing:.04em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);padding:16px 32px;border-radius:var(--r-panel);text-align:center;box-shadow:0 0 24px color-mix(in srgb,var(--accent) 30%,transparent);animation:neonPulse 2.6s ease-in-out infinite}.gesture-gate.hidden{opacity:0;pointer-events:none}@keyframes neonPulse{0%,to{box-shadow:0 0 16px color-mix(in srgb,var(--accent) 25%,transparent)}50%{box-shadow:0 0 30px color-mix(in srgb,var(--accent) 60%,transparent)}}.rotate-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:color-mix(in srgb,var(--ink) 94%,transparent);z-index:30;text-align:center}.rotate-hint .phone-glyph{font-size:clamp(40px,9vw,64px);color:var(--brass);animation:phoneFloat 2.6s ease-in-out infinite}.rotate-hint span:not(.phone-glyph){font-family:var(--font-display);font-size:clamp(18px,4vw,26px);color:var(--note);padding:0 32px;font-weight:700}@keyframes phoneFloat{0%,to{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(6deg)}}@media (pointer: coarse){.keys-hint{display:none}.touch-hint{display:block}.help-btn,.help-popover{display:none}#presets li,#fx li,#voices li{pointer-events:auto;padding:10px 12px;cursor:pointer}#presets li:active,#fx li:active,#voices li:active{background:#ffffff1a}.oct-btn,.skin-opt,.pads-toggle,.skey{min-height:44px}.skin-opt{min-width:44px}}@media (max-height: 480px){:root{--keybar-h: clamp(74px, 26vh, 96px)}.keybar{height:var(--keybar-h)}.note-name{bottom:104px;font-size:clamp(28px,7vw,44px)}.hud-bottom{display:none}}@media (orientation: portrait) and (pointer: coarse){.rotate-hint{display:flex}}