:root{--bg:#000;--panel:#0a0a0a;--panel-2:#161616;--border:#2e2e2e;--border-soft:#1c1c1c;--text:#f5f5f5;--text-dim:#7a7a7a;--white:#fff;--gray:#9a9a9a;--gray-dim:#555;--grid-soft:#ffffff0b;--grid-strong:#ffffff17;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Segoe UI,system-ui,-apple-system,sans-serif}:root[data-theme=light]{--bg:#f1f1ef;--panel:#fff;--panel-2:#ebebe9;--border:#d6d6d3;--border-soft:#e4e4e1;--text:#17171a;--text-dim:#5a5a5e;--grid-soft:#0000000d;--grid-strong:#0000001a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-user-select:none;user-select:none;margin:0;overflow:hidden}#app{width:100vw;height:100vh}.app-root{flex-direction:column;height:100%;display:flex}.app-header{border-bottom:1px solid var(--border);background:var(--panel);flex-shrink:0;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:10px 18px;display:grid}.header-left{justify-self:start;align-items:baseline;gap:16px;display:flex}.header-center{justify-content:center;justify-self:center;display:flex}.app-header h1{color:var(--text);letter-spacing:.5px;margin:0;font-family:Playfair Display,Segoe UI,serif;font-size:1.5rem;font-style:italic;font-weight:600}.app-status{color:var(--text-dim);font-size:.8rem}.body-row{flex:1;min-height:0;display:flex}.main-col{flex-direction:column;flex:1;min-width:0;display:flex}.sidebar-wrap{flex-shrink:0;position:relative}.sidebar-container{border-right:1px solid var(--border);background:var(--panel);flex-direction:column;flex-shrink:0;width:210px;height:100%;transition:width .18s;display:flex;overflow:hidden}.sidebar-container.collapsed{border-right:none;width:0}.sidebar-tabbar{border-bottom:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:2px;padding:6px;display:flex}.sidebar-tab{color:var(--text-dim);cursor:pointer;text-align:left;background:0 0;border:none;border-left:2px solid #0000;border-radius:0 4px 4px 0;align-items:center;gap:9px;padding:8px 9px;font-size:.76rem;display:flex}.sidebar-tab-icon{flex-shrink:0;display:flex}.sidebar-tab-icon svg{width:15px;height:15px}.sidebar-tab:hover{color:var(--text);background:var(--panel-2)}.sidebar-tab.active{color:var(--text);background:var(--panel-2);border-left-color:var(--text)}.sidebar-tab-content{flex:1;overflow:hidden auto}.module-sidebar{flex-direction:column;width:100%;padding:4px 0 16px;display:flex}.sidebar-toggle-btn{z-index:5;background:var(--panel-2);border:1px solid var(--text-dim);width:22px;height:22px;color:var(--text-dim);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;margin-left:6px;padding:0;display:flex;position:absolute;top:8px;left:100%}.sidebar-toggle-btn:hover{color:var(--text);background:var(--panel-2)}.sidebar-toggle-btn svg{width:11px;height:11px;transition:transform .18s}.sidebar-toggle-btn.collapsed svg{transform:rotate(180deg)}.sidebar-category{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;padding:10px 10px 5px;font-size:.58rem}.sidebar-grid{grid-template-columns:repeat(2,1fr);gap:6px;padding:0 8px;display:grid}.sidebar-item{background:var(--panel-2);border:1px solid var(--border);color:var(--text);cursor:grab;border-radius:5px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:8px 4px;transition:background .12s,border-color .12s;display:flex}.sidebar-item:hover:not(:disabled){background:var(--white);border-color:var(--white);color:#000}.sidebar-item:hover:not(:disabled) .sidebar-label{color:#000}.sidebar-item-dragging{opacity:.4}.drag-preview{opacity:.7;pointer-events:none}.module-inspect{color:var(--text-dim);cursor:pointer;background:0 0;border:none;flex-shrink:0;width:18px;height:18px;padding:0}.module-inspect svg{width:100%;height:100%}.module-inspect:hover{color:var(--text)}.inspect-popup{z-index:20;background:var(--panel);border:1px solid var(--border);border-radius:8px;width:460px;position:absolute;box-shadow:0 12px 32px #0009}.inspect-popup-header{border-bottom:1px solid var(--border);letter-spacing:.5px;color:var(--text);text-transform:uppercase;justify-content:space-between;align-items:center;padding:8px 10px;font-size:.7rem;display:flex}.inspect-popup-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;font-size:1rem;line-height:1}.inspect-popup-close:hover{color:var(--text)}.inspect-diagram{flex-direction:column;gap:10px;padding:14px;display:flex}.inspect-canvas-wrap{background-color:var(--bg);background-image:radial-gradient(circle, var(--border-soft) 1px, transparent 1px);border:1px solid var(--border-soft);background-size:16px 16px;border-radius:6px;padding:18px 10px;position:relative}.inspect-canvas{zoom:.52;flex-direction:column;align-items:center;gap:10px;display:flex}.inspect-cable-layer{pointer-events:none;position:absolute;inset:0;overflow:visible}.inspect-cable{fill:none;stroke:var(--text);stroke-width:2.4px;opacity:.95}.inspect-cable-dashed{stroke:var(--gray);stroke-dasharray:5 4;opacity:1}.inspect-canvas-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;display:flex}.inspect-canvas-col{flex-direction:column;align-items:center;gap:10px;display:flex}.inspect-canvas .inspect-mini-block{position:relative;top:auto;left:auto}.inspect-canvas .module-header{cursor:default}.inspect-canvas .port-dot{cursor:default;pointer-events:none}.inspect-io{border:1px dashed var(--border);color:var(--text-dim);border-radius:5px;align-items:center;gap:5px;padding:5px 9px;font-size:.62rem;display:flex}.sidebar-item:disabled{opacity:.3;cursor:not-allowed}.sidebar-icon{justify-content:center;align-items:center;width:22px;height:22px;display:flex}.sidebar-icon svg{width:100%;height:100%}.sidebar-label{text-align:center;color:var(--text-dim);font-size:.58rem;line-height:1.15}.header-right{justify-self:end;align-items:center;gap:10px;display:flex}.header-actions{align-items:center;gap:4px;display:flex}.icon-btn{width:30px;height:30px;color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;transition:background .12s,color .12s;display:flex}.icon-btn svg{width:17px;height:17px}.icon-btn:hover:not(:disabled){background:var(--panel-2);color:var(--text)}.icon-btn:disabled{opacity:.3;cursor:not-allowed}.icon-btn-danger:hover:not(:disabled){color:var(--white);background:#262626}.rack-viewport{background-color:var(--bg);background-image:linear-gradient(to right, var(--grid-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-soft) 1px, transparent 1px), linear-gradient(to right, var(--grid-strong) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-strong) 1px, transparent 1px);background-size:20px 20px,20px 20px,100px 100px,100px 100px;flex:1;position:relative;overflow:hidden}.rack-viewport.pannable{cursor:grab}.rack-viewport.pannable.panning{cursor:grabbing}.rack-canvas{width:0;height:0;position:relative}.rack-fit-btn{z-index:5;background:var(--panel);border:1px solid var(--border);position:absolute;bottom:14px;right:14px}.rack-fit-btn:hover:not(:disabled){background:var(--white);color:#000}.cable-layer{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.cable{fill:none;stroke-width:2.5px;pointer-events:stroke;cursor:pointer;opacity:.9}.cable:hover{opacity:1;stroke-width:3.5px}.cable-audio{stroke:var(--text)}.cable-pitch{stroke:var(--gray);stroke-dasharray:8 5}.cable-gate{stroke:var(--gray-dim);stroke-dasharray:2 4}.cable-drag{pointer-events:none;opacity:.5}.module-block{background:var(--panel);border:1px solid var(--border);-webkit-user-select:none;user-select:none;border-radius:4px;width:220px;position:absolute}.module-block.dragging{border-color:var(--text);z-index:10}.module-header{background:var(--panel-2);border-bottom:1px solid var(--border);cursor:grab;letter-spacing:1.5px;color:var(--text);justify-content:space-between;align-items:center;padding:7px 10px;font-size:.7rem;font-weight:700;display:flex}.module-header:active{cursor:grabbing}.module-remove{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:1rem;line-height:1}.module-remove:hover{color:var(--text)}.module-body{padding:10px}.module-controls{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.meter-canvas{border:1px solid var(--border);border-radius:2px;width:100%;height:18px;margin:10px auto 0;display:block}.scope-canvas{border:1px solid var(--border);border-radius:2px;width:100%;height:70px;margin:4px auto 0;display:block}.module-ports{border-top:1px solid var(--border);justify-content:space-between;padding:6px 0 10px;display:flex}.ports-col{flex-direction:column;gap:5px;padding:6px 8px;display:flex}.ports-in{align-items:flex-start}.ports-out{align-items:flex-end}.port-row{color:var(--text-dim);letter-spacing:.4px;align-items:center;gap:5px;font-size:.6rem;display:flex}.port-dot{border:2px solid var(--text);background:var(--panel);cursor:crosshair;border-radius:50%;flex-shrink:0;width:10px;height:10px}.port-dot:hover{transform:scale(1.3)}.port-pitch .port-dot{border-color:var(--gray);border-style:dashed}.port-gate .port-dot{border-color:var(--gray-dim);border-radius:2px}.port-dot.connected{background:var(--text)}.port-pitch .port-dot.connected{background:var(--gray)}.port-gate .port-dot.connected{background:var(--gray-dim)}.knob-wrap{flex-direction:column;align-items:center;gap:3px;width:54px;display:flex}.knob{background:var(--panel-2);border:1px solid var(--border);cursor:ns-resize;touch-action:none;border-radius:50%;width:40px;height:40px;position:relative}.knob:focus{outline:1px solid var(--text)}.knob.dragging{border-color:var(--text)}.knob-readonly{cursor:default;opacity:.85;border-style:dashed}.knob-indicator{background:var(--text);transform-origin:50% 17px;pointer-events:none;width:2px;height:15px;position:absolute;top:3px;left:50%;transform:translate(-50%)rotate(0)}.knob-value{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:.6rem}.knob-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px;font-size:.6rem}.select-wrap{flex-direction:column;align-items:center;gap:3px;display:flex}.select-input{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:3px;padding:3px 4px;font-size:.68rem}.select-label{color:var(--text-dim);text-transform:uppercase;font-size:.6rem}.keyboard-mini-preview{justify-content:center;margin-top:10px;display:flex}.piano.piano-mini{pointer-events:none;opacity:.8;height:22px}.piano-mini .piano-key{cursor:default;border-color:var(--border)}.keyboard-inspect-content{flex-direction:column;align-items:center;gap:12px;padding:14px;display:flex}.keyboard-controls{flex-shrink:0;align-items:center;gap:10px;display:flex}.oct-btn-wrap{flex-direction:column;align-items:center;gap:3px;display:flex}.oct-btn{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:3px;width:24px;height:24px;font-size:1rem}.oct-btn:hover{background:var(--white);color:#000}.oct-key-hint{color:var(--text-dim);letter-spacing:.5px;font-size:.56rem}.oct-label{color:var(--text-dim);text-align:center;width:44px;font-size:.76rem}.io-module-preview{flex-direction:column;align-items:flex-start;gap:6px;padding:2px 0 4px;display:flex}.io-status{color:var(--text-dim);font-size:.72rem}.midi-last-note{color:var(--text-dim);min-height:.9em;font-size:.64rem}.io-connect-btn{white-space:nowrap;width:auto;height:22px;padding:0 10px;font-size:.68rem}.io-connect-btn:disabled{opacity:.4;cursor:default}.io-connect-btn:disabled:hover{color:var(--text);background:0 0}.io-device-select{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:3px;max-width:150px;padding:2px 4px;font-size:.66rem}.piano{flex-shrink:0;height:84px;position:relative}.piano-key{cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #000;justify-content:center;align-items:flex-end;padding-bottom:6px;font-size:.6rem;display:flex;position:absolute;top:0;bottom:0}.piano-key-white{background:var(--white);color:#000;z-index:1}.piano-key-white.active{background:var(--gray)}.piano-key-black{color:var(--text-dim);z-index:2;background:#000;border:1px solid #333;height:60%}.piano-key-black.active{background:var(--panel-2);color:var(--text)}.account-popup{z-index:30;background:var(--panel);border:1px solid var(--border);border-radius:8px;width:360px;max-height:70vh;position:fixed;overflow-y:auto;box-shadow:0 12px 32px #0009}.account-popup-body{flex-direction:column;gap:12px;padding:12px;display:flex}.account-note{color:var(--text-dim);font-size:.68rem;line-height:1.5}.account-auth-row{align-items:center;gap:8px;display:flex}.account-btn-avatar{object-fit:cover;border-radius:50%;width:24px;height:24px}.account-avatar{border-radius:50%;width:24px;height:24px}.account-name{color:var(--text);flex:1;font-size:.76rem}.account-github-btn{align-items:center;gap:7px;display:flex}.account-github-btn svg{width:15px;height:15px}.info-popup{width:260px}.info-title{color:var(--text);font-family:Playfair Display,Segoe UI,serif;font-size:1.1rem;font-style:italic;font-weight:600}.info-row{justify-content:space-between;align-items:baseline;gap:10px;font-size:.76rem;display:flex}.info-label{color:var(--text-dim)}.info-value{color:var(--text)}.info-link{color:var(--text);text-underline-offset:2px;text-decoration:underline}.info-link:hover{color:var(--white)}.account-name-input{background:var(--panel-2);border:1px solid var(--border);min-width:0;color:var(--text);border-radius:4px;flex:1;padding:6px 8px;font-size:.74rem}.account-public-label{color:var(--text-dim);white-space:nowrap;align-items:center;gap:4px;font-size:.68rem;display:flex}.account-section-title{text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);padding-top:4px;font-size:.62rem}.account-preset-list{flex-direction:column;gap:6px;display:flex}.account-preset-row{background:var(--panel-2);border-radius:5px;flex-direction:column;gap:6px;padding:7px 8px;display:flex}.account-preset-name{min-width:0;color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;overflow:hidden}.account-preset-actions{gap:6px;display:flex}.account-preset-actions .toolbar-btn{flex:1;padding:4px 6px;font-size:.66rem}.account-empty{color:var(--text-dim);font-size:.68rem;font-style:italic}.patches-panel{padding:10px 8px}.save-dialog{z-index:30;background:var(--panel);border:1px solid var(--border);border-radius:8px;width:220px;position:fixed;box-shadow:0 12px 32px #0009}.save-dialog-body{flex-direction:column;gap:10px;padding:12px;display:flex}.save-dialog-input{width:100%}.save-dialog-footer{justify-content:space-between;align-items:center;gap:8px;display:flex}.toolbar-btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:4px;padding:6px 10px;font-size:.72rem}.toolbar-btn:hover:not(:disabled){background:var(--white);color:#000;border-color:var(--white)}.toolbar-btn:disabled{opacity:.4;cursor:not-allowed}.toolbar-btn-danger:hover:not(:disabled){background:var(--panel);color:var(--text)}