:root{--bg: #050308;--glass: rgba(14, 10, 20, .62);--glass-strong: rgba(14, 10, 20, .86);--line: rgba(255, 255, 255, .09);--line-strong: rgba(255, 255, 255, .18);--text: #ece6f5;--muted: #9a90ad;--accent: #ff7a1a;--accent-2: #b45cff;--ok: #4dff88;--warn: #ffb347;--err: #ff4d6d;--radius: 12px;--font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--mono: "JetBrains Mono", ui-monospace, Consolas, monospace;--spooky: "Creepster", "Inter", cursive;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 var(--font);overflow:hidden;-webkit-font-smoothing:antialiased}#stage{position:fixed;inset:0;width:100vw;height:100vh;display:block;outline:none}#ui{position:fixed;inset:0;pointer-events:none}#ui>*{pointer-events:auto}.glass{background:var(--glass);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 40px #00000073}.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:12px}.btn,select{font:500 13px/1 var(--font);color:var(--text);background:#ffffff0f;border:1px solid var(--line-strong);border-radius:8px;padding:8px 11px;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;white-space:nowrap}select{padding-right:26px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%;background-size:5px 5px;background-repeat:no-repeat}select option{background:#140f1c;color:var(--text)}.btn:hover,select:hover{border-color:var(--accent);background:#ffffff1a}.btn:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn.primary{background:var(--accent);border-color:var(--accent);color:#140800;font-weight:700}.btn.primary:hover{filter:brightness(1.1)}.btn.on{background:color-mix(in srgb,var(--accent) 28%,transparent);border-color:var(--accent);color:#fff}.btn.icon{padding:8px 10px;min-width:36px}.btn.small{padding:6px 9px;font-size:12px}.btn.big{font-size:16px;padding:14px 22px;border-radius:12px}.link{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:3px}.link:hover{color:var(--text)}kbd{font:600 11px var(--mono);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;padding:1px 5px;background:#ffffff0f}.rec-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--err);vertical-align:middle}#recBtn.on .rec-dot{animation:blink 1s infinite}@keyframes blink{50%{opacity:.2}}#topbar{position:absolute;top:14px;left:14px;right:14px;display:flex;align-items:center;gap:18px;padding:9px 12px;flex-wrap:wrap}.brand{display:flex;align-items:baseline;gap:10px}.logo{font:800 18px var(--font);letter-spacing:.22em}.theme-name{font:26px/1 var(--spooky);color:var(--accent);text-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);letter-spacing:.04em}.transport{display:flex;align-items:center;gap:12px;padding:0 14px;border-left:1px solid var(--line);border-right:1px solid var(--line)}.t-state{font-size:15px;width:18px;text-align:center;color:var(--muted)}.t-state[data-state=play]{color:var(--ok);text-shadow:0 0 10px var(--ok)}.bpm{display:flex;align-items:baseline;gap:5px;font-family:var(--mono)}.bpm span{font-size:22px;font-weight:600;min-width:4.2ch;text-align:right;font-variant-numeric:tabular-nums}.bpm small{color:var(--muted);font-size:11px}.badge{font:600 10px var(--mono);padding:3px 6px;border-radius:5px;border:1px solid var(--line-strong);color:var(--muted);letter-spacing:.06em}.badge.clock{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent)}.badge.tap{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent)}.beats{display:flex;gap:5px}.beats i{width:10px;height:10px;border-radius:50%;background:#ffffff1f;transition:background .06s,box-shadow .06s}.beats i.on{background:var(--accent);box-shadow:0 0 10px var(--accent)}.beats i.on:first-child{background:#fff;box-shadow:0 0 12px #fff}.barpos{font:600 14px var(--mono);color:var(--muted);min-width:4ch;font-variant-numeric:tabular-nums}.device{display:flex;align-items:center;gap:8px}.led{width:10px;height:10px;border-radius:50%;background:#332a3d;box-shadow:inset 0 0 2px #000;transition:background .05s}.led.ok{background:#2d5a3c}.led.hit{background:var(--ok);box-shadow:0 0 10px var(--ok)}#deviceSel{max-width:210px}#audioBtn{opacity:.55}#audioBtn.on{opacity:1}.meter3{display:flex;align-items:flex-end;gap:2px;height:20px;padding:0 2px}.meter3 i{width:4px;height:8%;border-radius:1px;background:#ff7a1a;transition:height .05s}.meter3 i:nth-child(2){background:#ffd23f}.meter3 i:nth-child(3){background:#45c8ff}.actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}#tracks{position:absolute;left:14px;bottom:70px;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100vw - 28px)}.chip{--c: #fff;position:relative;min-width:128px;padding:8px 11px 10px;border-radius:10px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);overflow:hidden;transition:border-color .1s,box-shadow .1s}.chip .row1{display:flex;align-items:baseline;gap:7px}.chip .tn{font:800 15px var(--font);color:var(--c);text-shadow:0 0 10px color-mix(in srgb,var(--c) 60%,transparent)}.chip .role{font-size:12px;font-weight:600}.chip .ch{font:11px var(--mono);color:var(--muted);margin-left:auto}.chip .row2{display:flex;justify-content:space-between;margin-top:3px;font:11px var(--mono);color:var(--muted)}.chip .meter{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#ffffff0d}.chip .meter b{display:block;height:100%;width:0;background:var(--c);box-shadow:0 0 10px var(--c)}.chip.hot{border-color:color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--c) 30%,transparent)}.chip.silent{opacity:.55}#piano{position:absolute;left:14px;right:14px;bottom:14px;height:46px;width:calc(100vw - 28px);border-radius:8px;border:1px solid var(--line);background:#0a070eb3}.panel{position:absolute;top:calc(var(--topbar-bottom, 70px) + 8px);right:14px;bottom:136px;width:min(440px,calc(100vw - 28px));display:flex;flex-direction:column;background:var(--glass-strong);z-index:5}.panel-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}.panel-head h3{margin:0;font-size:14px;letter-spacing:.04em}.panel-head .close{margin-left:auto}.panel-tools{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap;font-size:12px;color:var(--muted)}.panel-tools label,.checks label{display:flex;align-items:center;gap:6px;cursor:pointer}.panel-body{overflow:auto;padding:4px 16px 18px}.panel-body h4{margin:18px 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}.grid2 label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;font-size:13px}input[type=range]{accent-color:var(--accent);width:100%}input[type=checkbox]{accent-color:var(--accent)}.log{flex:1;overflow:auto;font:12px/1.5 var(--mono);padding:6px 0}.log .r{display:grid;grid-template-columns:64px 34px 92px 1fr;gap:6px;padding:1px 14px;white-space:nowrap}.log .r:hover{background:#ffffff0a}.log .t{color:var(--muted)}.log .raw{color:#5d5470}.log .noteon{color:#7cc4ff}.log .noteoff{color:#4f7ea6}.log .cc{color:#d59cff}.log .step{color:#8a6fb0}.log .sys{color:#ff7b9c}.log .clock{color:#5a6070}.log .other{color:var(--warn)}.channel-table{display:grid;grid-template-columns:54px 14px 1fr 46px;gap:6px 8px;align-items:center;margin:8px 0 12px;font-size:12px}.channel-table .lbl{font-family:var(--mono);color:var(--muted)}.channel-table .act{width:9px;height:9px;border-radius:50%;background:#2a2333}.channel-table select{padding:6px 26px 6px 8px;font-size:12px}.channel-table .slot{font:600 11px var(--mono);text-align:center;border-radius:5px;padding:3px 0}.keys{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:12px;color:var(--muted)}#toasts{position:absolute;top:calc(var(--topbar-bottom, 70px) + 14px);left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:20}.toast{pointer-events:none;padding:9px 16px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--line-strong);font-size:13px;font-weight:500;animation:toast-in .25s ease-out;backdrop-filter:blur(10px)}.toast.ok{border-color:color-mix(in srgb,var(--ok) 60%,transparent)}.toast.err{border-color:color-mix(in srgb,var(--err) 70%,transparent)}.toast.out{opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}}#fps{position:absolute;right:16px;bottom:70px;font:600 12px var(--mono);color:var(--muted);background:var(--glass);padding:4px 8px;border-radius:6px;pointer-events:none}#pianoHint{position:absolute;left:50%;bottom:70px;transform:translate(-50%);padding:8px 14px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--accent);font-size:12px;pointer-events:none}#splash{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 60%,#05030826,#050308d1 70%);z-index:30;transition:opacity .7s}#splash.out{opacity:0;pointer-events:none}.splash-inner{text-align:center;max-width:720px;padding:32px 24px}.kicker{font:600 12px var(--mono);letter-spacing:.4em;color:var(--muted)}.title{margin:6px 0 0;font:800 clamp(64px,12vw,132px)/.9 var(--font);letter-spacing:.18em;padding-left:.18em;background:linear-gradient(180deg,#fff 30%,color-mix(in srgb,var(--accent) 80%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px color-mix(in srgb,var(--accent) 45%,transparent))}.subtitle{margin:8px 0 18px;font:clamp(40px,7vw,72px)/1 var(--spooky);font-weight:400;color:var(--accent);text-shadow:0 0 22px color-mix(in srgb,var(--accent) 80%,transparent),0 0 60px color-mix(in srgb,var(--accent) 40%,transparent);letter-spacing:.04em}.lede{margin:0 auto 26px;max-width:600px;color:#d6cde6;font-size:15px;line-height:1.6}.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.hint{margin-top:22px;color:var(--muted);font-size:12px}#splashSkip{margin-top:6px}#fatal{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;background:var(--bg);color:var(--text);font-size:15px;z-index:50}body.idle .autohide{opacity:0;transform:translateY(-4px);pointer-events:none}body.idle #tracks,body.idle #piano{transform:translateY(6px)}.autohide{transition:opacity .6s,transform .6s}body.idle{cursor:none}body.ui-off #topbar,body.ui-off #tracks,body.ui-off #piano,body.ui-off .panel,body.ui-off #fps{display:none!important}@media (max-width: 900px){#topbar{gap:10px}.transport{border:0;padding:0}.actions{margin-left:0}.chip{min-width:100px}.panel{bottom:70px}}