*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:Segoe UI,system-ui,sans-serif;background:linear-gradient(#0e0b1a,#34183a);color:#d8d2eb;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(16px + env(safe-area-inset-top));left:calc(20px + env(safe-area-inset-left));pointer-events:none}.hud-top h1{font-size:clamp(22px,4vw,32px);color:#ffd678;letter-spacing:1px}.subtitle{font-size:clamp(11px,1.6vw,13px);color:#c8b4dcbb}.mode{margin-top:10px;font-size:clamp(14px,2vw,18px);color:#8cebbe;font-weight:600}.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:70vh}.hud-right ul{list-style:none}#presets li{font-size:clamp(13px,1.8vw,15px);color:#aaa0beaa;padding:3px 6px;border-radius:6px}#presets li.active{color:#ffd678;font-weight:700}.hint{font-size:11px;color:#82789699;margin:4px 0 14px}.hud-right h2{font-size:13px;color:#c8b4dccc;letter-spacing:2px}#fx li{font-size:clamp(12px,1.6vw,13px);color:#96c8e6cc;padding:2px 6px;white-space:pre;border-radius:6px}#fx li.accent{color:#ffd678}.note-name{position:absolute;bottom:150px;width:100%;text-align:center;font-size:clamp(38px,9vw,64px);font-weight:800;color:#ffe696;pointer-events:none;text-shadow:0 0 24px #ff9a3c66}.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:#00000059;font-size:clamp(11px,1.5vw,14px);line-height:1.7;pointer-events:none}.hud-bottom b{color:#ffe6b4}.touch-hint{display:none;color:#c8b4dccc}.keybar{position:absolute;left:env(safe-area-inset-left);right:env(safe-area-inset-right);bottom:env(safe-area-inset-bottom);height:clamp(96px,17vh,132px);display:flex;gap:6px;padding:6px;background:linear-gradient(#0000,#000a 26%);z-index:6;touch-action:none}.oct-btn{flex:0 0 auto;width:clamp(58px,9vw,96px);border:1px solid #ffd67855;border-radius:12px;background:linear-gradient(#3a2d4a,#241a31);color:#ffd678;font-size:clamp(12px,1.8vw,16px);font-weight:800;letter-spacing:1px;cursor:pointer;touch-action:none}.oct-btn.active{filter:brightness(1.7);transform:scale(.97)}.piano{position:relative;flex:1 1 auto}.white-row{display:flex;height:100%;gap:4px}.skey{cursor:pointer;touch-action:none;border:none}.skey.white{flex:1 1 0;min-width:0;border-radius:0 0 10px 10px;background:linear-gradient(#f4eefb,#d9cfe8);color:#5a4a70;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-size:clamp(11px,1.6vw,15px);font-weight:700;box-shadow:inset 0 -3px #0002}.skey.white.active{background:linear-gradient(#ffe9a8,#ffcf5e)}.skey.black{position:absolute;top:0;width:7.2%;height:60%;transform:translate(-50%);border-radius:0 0 7px 7px;background:linear-gradient(#2a2238,#100c18);box-shadow:0 3px 4px #000a;z-index:2}.skey.black.active{background:linear-gradient(#a06adf,#6e3fb0)}.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 #ffd67855;border-radius:999px;background:#1a1320cc;color:#ffd678;font-size:12px;font-weight:700;letter-spacing:1px;cursor:pointer}body.keys-hidden .keybar{display:none}body.keys-hidden .pads-toggle{bottom:calc(70px + env(safe-area-inset-bottom));opacity:.75}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:#0e0b1acc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;z-index:20;transition:opacity .4s}.gesture-gate span{font-size:clamp(16px,2.4vw,20px);color:#ffd678;border:1px solid #ffd67866;padding:16px 32px;border-radius:12px;text-align:center}.gesture-gate.hidden{opacity:0;pointer-events:none}.rotate-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:#0e0b1aee;z-index:30;text-align:center}.rotate-hint span{font-size:clamp(18px,4vw,26px);color:#ffe696;padding:0 32px;font-weight:700}@media (pointer: coarse){.keys-hint{display:none}.touch-hint{display:block}#presets li,#fx li{pointer-events:auto;padding:8px 10px;cursor:pointer}#presets li:active,#fx li:active{background:#ffffff1a}}@media (max-height: 480px){.keybar{height:clamp(74px,26vh,96px)}.note-name{bottom:104px;font-size:clamp(28px,7vw,44px)}.hud-bottom{display:none}}@media (orientation: portrait) and (max-width: 620px){.rotate-hint{display:flex}}