:root{--chassis-1: #123350;--chassis-2: #061a26;--frame-1: #316f97;--frame-2: #163c56;--panel: #eaf4fa;--panel-dark: #c2dbe8;--panel-shadow: #83abc3;--metal-hi: #ffffff;--accent: #2f7bc4;--accent-hi: #7ec1ec;--led-green: #4ade80;--led-red: #ef4444;--led-yellow: #facc15;--ink: #123049;--ink-dim: #3c6884;--ink-faint: #6d94a8;--black-key-width: 3%}*{box-sizing:border-box}html,body{margin:0;padding:0;background:radial-gradient(ellipse 55% 40% at 18% 8%,rgba(150,205,235,.28),transparent 62%),radial-gradient(ellipse 60% 45% at 85% 95%,rgba(30,90,130,.4),transparent 60%),radial-gradient(ellipse at top,var(--chassis-1),var(--chassis-2) 70%);color:var(--ink);font-family:Segoe UI,Hiragino Sans,Yu Gothic,system-ui,sans-serif;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;height:100%;width:100%}#app{display:flex;flex-direction:column;min-height:100vh;padding:14px;gap:10px;background:radial-gradient(circle at 12% 12%,rgba(255,255,255,.14),transparent 35%),radial-gradient(circle at 92% 15%,rgba(255,255,255,.08),transparent 40%),radial-gradient(circle at 25% 95%,rgba(6,30,45,.4),transparent 48%),repeating-linear-gradient(100deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px),linear-gradient(160deg,var(--frame-1),var(--frame-2) 60%,#0b2334 100%);border:2px solid #071522;box-shadow:inset 0 0 40px #00000080,0 0 30px #00000073}.header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(180deg,var(--metal-hi),var(--panel) 40%,var(--panel-dark));border-radius:10px;padding:10px 14px;border:1px solid #0006;box-shadow:0 3px #0004,inset 0 1px #fff8,inset 0 -3px 6px #0002}.header h1{font-size:20px;font-weight:800;margin:0;color:var(--ink);letter-spacing:.02em;text-shadow:0 1px 0 #fff8}.header h1 span{color:var(--accent);font-weight:300}.header .patch-name{color:var(--ink-dim);font-size:12px;font-family:Consolas,monospace}.vu-meter{display:flex;align-items:center;gap:8px;margin-left:auto;background:#0b222f;border-radius:6px;padding:6px 10px;box-shadow:inset 0 0 6px #000a}.power-led{width:9px;height:9px;border-radius:50%;background:#17303c;box-shadow:inset 0 0 2px #000}.power-led.on{background:var(--led-red);box-shadow:0 0 6px 2px var(--led-red),inset 0 0 2px #fff6}.vu-bars{display:flex;gap:2px}.vu-seg{width:5px;height:14px;border-radius:1px;background:#1a2e1a;opacity:.5}.vu-seg.lit{background:var(--led-green);box-shadow:0 0 4px var(--led-green);opacity:1}.vu-seg-yellow.lit{background:var(--led-yellow);box-shadow:0 0 4px var(--led-yellow)}.vu-seg-red.lit{background:var(--led-red);box-shadow:0 0 4px var(--led-red)}.preset-row,.transport-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.chip{background:linear-gradient(180deg,#23506c,#123145);color:#cfe6f2;border:1px solid #0007;border-radius:8px;padding:7px 12px;font-size:12px;white-space:nowrap;cursor:pointer;flex-shrink:0;box-shadow:0 2px #0006,inset 0 1px #fff2}.chip:active{transform:translateY(1px);box-shadow:0 1px #0006,inset 0 1px #fff2}.chip.selected{background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:var(--ink);font-weight:700}.chip-record.recording{background:linear-gradient(180deg,#ff6b6b,#c62828);color:#fff;animation:pulse-rec 1.1s ease-in-out infinite}@keyframes pulse-rec{0%,to{box-shadow:0 0 #c6282899}50%{box-shadow:0 0 0 6px #c6282800}}.panels-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}.panel{background:linear-gradient(180deg,var(--panel),var(--panel-dark));border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px;flex-shrink:0;min-width:fit-content;border:1px solid #0005;box-shadow:0 3px #0004,inset 0 1px #fff9,inset 0 -6px 10px -6px var(--panel-shadow);position:relative}.panel:before,.panel:after{content:"";position:absolute;top:4px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#eee,#777 70%,#333);box-shadow:0 1px 1px #0006}.panel:before{left:4px}.panel:after{right:4px}.panel-title{color:var(--ink);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #0002;padding-bottom:4px}.choice-row{display:flex;gap:4px}.knob-row{display:flex;gap:8px}.knob{display:flex;flex-direction:column;align-items:center;gap:2px;width:56px}.knob-dial{--angle: -135deg;--norm: 0;width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--norm) * 270deg),#00000030 0);padding:3px;position:relative;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}.knob-dial:before{content:"";position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8 0,#0000 45%),conic-gradient(from 0deg,#6f93a9,#eaf4fa,#6f93a9,#2f4f62,#6f93a9);box-shadow:0 2px 3px #0007,inset 0 -2px 2px #0004}.knob-indicator{position:absolute;width:3px;height:16px;background:var(--accent);top:5px;left:50%;margin-left:-1.5px;border-radius:2px;transform-origin:1.5px 19px;box-shadow:0 0 3px #0006;z-index:2}.knob-label{font-size:10px;font-weight:700;color:#dcedf5;text-shadow:0 1px 1px #000a}.knob-value{font-size:9px;color:#9fc3d6;font-family:Consolas,monospace}.oct-row{display:flex;align-items:center;gap:8px}.oct-row .note-readout{color:#9fc3d6;font-size:12px;font-family:Consolas,monospace}.track-effects-row{display:flex;align-items:flex-start;gap:8px}.track-column{flex:1;min-width:0}.fx-column{flex-shrink:0;width:160px}.fx-list{display:flex;flex-direction:column;gap:8px}.fx-list .panel{min-width:0;width:100%}.fx-list .knob-row{flex-wrap:wrap}@media (max-width: 640px){.track-effects-row{flex-direction:column}.fx-column{width:100%}}.recorder{min-width:0}.recorder-controls{display:flex;align-items:center;gap:10px}.recorder-time{font-family:Consolas,monospace;color:var(--ink-dim);font-size:13px;background:#0000000f;padding:3px 8px;border-radius:4px}.recorder-bpm-label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-dim);font-weight:700}.recorder-bpm-input{width:56px;font-family:Consolas,monospace;font-size:12px;padding:3px 4px;border-radius:4px;border:1px solid #0004;background:#eef7fb;color:var(--ink)}.recorder-mix-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.chip-mix{border-left:3px solid var(--accent)}.chip-mix:disabled{opacity:.45;cursor:default}.recorder-status{font-size:11px;color:var(--ink-dim);font-family:Consolas,monospace}.recorder-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto}.recorder-clip{display:flex;flex-direction:column;gap:4px;background:#0000000f;border-radius:6px;padding:6px}.recorder-clip-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.recorder-clip-label{font-size:11px;color:var(--ink-dim);min-width:52px}.recorder-clip-bpm{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--ink-faint)}.recorder-clip-bpm input{width:44px;font-family:Consolas,monospace;font-size:11px;padding:2px 3px;border-radius:4px;border:1px solid #0003}.chip-sync{border-left:3px solid var(--led-yellow)}.recorder-clip-bottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.recorder-clip audio{height:32px;flex:1;min-width:160px}.clip-menu{position:relative}.clip-menu-btn{padding:7px 10px;font-size:15px;line-height:1;font-weight:700}.clip-menu-dropdown{display:none;position:fixed;z-index:1000;min-width:120px;background:linear-gradient(180deg,#23506c,#123145);border:1px solid #0007;border-radius:8px;box-shadow:0 6px 16px #0008;overflow:hidden;flex-direction:column}.clip-menu-dropdown.open{display:flex}.clip-menu-item{display:block;width:100%;padding:9px 12px;font-size:12px;text-align:left;color:#cfe6f2;background:none;border:none;cursor:pointer;text-decoration:none;box-sizing:border-box}.clip-menu-item:hover,.clip-menu-item:active{background:#ffffff14}.clip-menu-item-danger{color:#ff9d9d}.keyboard{position:relative;height:150px;user-select:none;touch-action:none;border-radius:6px;padding:4px;background:linear-gradient(180deg,#0c2431,#051620);box-shadow:inset 0 3px 8px #000a,0 2px #0006}.keyboard-white-row{display:flex;height:100%}.key-white{flex:1;background:linear-gradient(180deg,#f6fbfd,#d9ecf3);border:1px solid #00000026;border-radius:0 0 4px 4px;box-shadow:inset 0 -6px 8px -6px #0003}.key-white.active{background:linear-gradient(180deg,var(--accent-hi),var(--accent))}.key-black{position:absolute;top:0;width:var(--black-key-width);height:60%;background:linear-gradient(180deg,#16303e,#05141d);border-radius:0 0 3px 3px;z-index:2;box-shadow:0 2px 3px #0008}.key-black.active{background:linear-gradient(180deg,var(--accent-hi),var(--accent))}.install-hint{color:#9fc3d6;font-size:11px}@media (max-width: 640px){.panels-row,.fx-list,.track-effects-row{gap:6px}.panel{padding:8px}}