:root{--metal-light:#3e3e42;--metal-dark:#242427;--chassis-gradient:linear-gradient(160deg, var(--metal-light) 0%, var(--metal-dark) 100%);--panel-bg:#2c2c30;--rivet:#111;--screen-bezel:#17171a;--screen-bg-1:#3a2a18;--screen-bg-2:#1a140c;--text-primary:#d8d3c8;--text-muted:#9a8f7e;--text-dim:#7a756a;--amber:#e8b85c;--amber-glow:#e8b85c99;--success:#6bcb77;--success-glow:#6bcb7799;--error:#d9695a;--action:#b5502a;--action-shadow:#7a3719;--led-off:#3a5a3e;--radius-panel:14px;--radius-unit:8px;--radius-control:6px;--font-mono:"Space Mono", ui-monospace, "SF Mono", monospace}body{color:var(--text-primary);font-family:var(--font-mono);background:#0f0f10;margin:0}*{box-sizing:border-box}.app-root{background:#0f0f10;justify-content:center;align-items:center;min-height:100vh;padding:40px;display:flex}.rack-body{align-items:stretch;gap:20px;height:68vh;display:flex}.knob-column-wrapper{flex-direction:column;flex:1;min-width:280px;max-width:340px;min-height:0;display:flex;position:relative}.knob-column{scrollbar-width:thin;scrollbar-color:var(--amber) #1c1c1e;flex-direction:column;flex:1;gap:12px;min-height:0;display:flex;overflow-y:auto}.knob-column::-webkit-scrollbar{width:6px}.knob-column::-webkit-scrollbar-track{background:#1c1c1e;border-radius:3px}.knob-column::-webkit-scrollbar-thumb{background:var(--amber);border-radius:3px}.knob-column-wrapper.is-scrollable:after{content:"";background:linear-gradient(to bottom, transparent, var(--panel-bg));pointer-events:none;height:24px;position:absolute;bottom:0;left:0;right:6px}.small-knob-row{justify-content:space-around;gap:8px;display:flex}.export-row{gap:8px;display:flex}.export-row .hardware-button{flex:1;width:auto}.inline-error{color:var(--error);border-radius:var(--radius-control);background:#d9695a1a;margin:0;padding:10px 14px;font-size:13px}.unit-caption{color:var(--text-dim);text-align:center;margin:0;font-size:10px}.text-link-button{color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;background:0 0;border:none;margin:8px auto 0;padding:2px 8px;font-size:10px;display:block}.text-link-button:hover:not(:disabled){color:var(--text-primary);text-decoration:underline}.text-link-button:disabled{opacity:.4;cursor:not-allowed}.inline-success{color:var(--success);border-radius:var(--radius-control);background:#6bcb771a;margin:0;padding:10px 14px;font-size:13px}@media (width<=980px){.rack-body{flex-direction:column}.knob-column-wrapper{max-width:none}.knob-column{flex-flow:wrap}}.rack-chassis{background:var(--chassis-gradient);background-image:repeating-linear-gradient(100deg, #ffffff08 0px, #ffffff08 1px, transparent 2px, transparent 4px), var(--chassis-gradient);border-radius:var(--radius-panel);flex-direction:column;gap:18px;width:min(1440px,94vw);padding:24px;display:flex;position:relative;box-shadow:inset 0 1px #ffffff0f,inset 0 -1px #0006,0 20px 50px #00000073}.rivet{background:var(--rivet);border-radius:50%;width:5px;height:5px;position:absolute;box-shadow:0 1px #ffffff26}.rivet-tl{top:10px;left:10px}.rivet-tr{top:10px;right:10px}.rivet-bl{bottom:10px;left:10px}.rivet-br{bottom:10px;right:10px}.led-indicator{align-items:center;gap:7px;display:inline-flex}.led-dot{background:var(--led-off);border-radius:50%;flex-shrink:0;width:7px;height:7px}.led-dot.on.led-success{background:var(--success);box-shadow:0 0 5px var(--success-glow)}.led-dot.on.led-amber{background:var(--amber);box-shadow:0 0 5px var(--amber-glow)}.led-dot.on.led-error{background:var(--error);box-shadow:0 0 5px #d9695a99}.led-label{color:var(--text-dim);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;font-size:9px}.rack-header{justify-content:space-between;align-items:center;padding:6px 10px 4px;display:flex}.rack-brand{color:var(--text-primary);letter-spacing:.06em;font-size:16px}.rack-brand b{color:var(--amber)}.rack-header-right{align-items:center;gap:18px;display:flex}.visually-hidden{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.import-label{font-family:var(--font-mono);letter-spacing:.04em;color:var(--text-primary);background:var(--panel-bg);border-radius:var(--radius-control);cursor:pointer;border:1px solid #4a4a4e;padding:10px 16px;font-size:12px}.import-label:hover{background:#34343a}.import-label.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.layer-filmstrip{z-index:2;background:var(--screen-bezel);scrollbar-width:thin;scrollbar-color:var(--metal-light) transparent;border:1px solid #ffffff0f;border-radius:6px;flex-direction:column;gap:8px;width:180px;padding:6px;display:flex;position:absolute;top:16px;bottom:16px;right:16px;overflow-y:auto}.layer-filmstrip::-webkit-scrollbar{width:6px}.layer-filmstrip::-webkit-scrollbar-track{background:0 0}.layer-filmstrip::-webkit-scrollbar-thumb{background:var(--metal-light);border-radius:3px}.layer-filmstrip::-webkit-scrollbar-thumb:hover{background:var(--amber)}.layer-tile{background:#ffffff0a;border-radius:6px;flex-direction:column;flex:0 0 130px;gap:6px;padding:6px;transition:opacity .2s;display:flex}.layer-tile--empty{opacity:.4}.layer-tile-header{align-items:center;gap:6px;display:flex}.layer-tile-label{color:var(--text-muted);font-size:10px}.layer-preview{background:var(--screen-bezel);border-radius:4px;flex:1;min-height:0;position:relative;overflow:hidden}.layer-preview-canvas{width:100%;height:100%;display:block}.screen-bezel{background:var(--screen-bezel);border-radius:var(--radius-unit);flex-direction:column;flex:2.4;min-width:0;padding:14px;display:flex;box-shadow:inset 0 2px 8px #000000b3}.screen{background:linear-gradient(to right, transparent 0, transparent calc(100% - 220px), var(--screen-bezel) calc(100% - 220px), var(--screen-bezel) 100%), radial-gradient(circle at 30% 22%, var(--screen-bg-1) 0%, var(--screen-bg-2) 70%);border-radius:6px;flex:1;min-height:0;padding-right:220px;position:relative;overflow:hidden}.screen:after{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#0000001f 0 1px,#0000 2px 3px);position:absolute;inset:0}.screen canvas{display:block}.screen--drag-active{outline:2px dashed var(--success);outline-offset:-2px}.screen-drop-overlay{pointer-events:none;background:var(--success-glow);opacity:.1;position:absolute;inset:0}.no-signal{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.no-signal-static{opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:.4s steps(2,end) infinite static-flicker;position:absolute;inset:0}@keyframes static-flicker{0%{opacity:.04}50%{opacity:.09}to{opacity:.05}}.no-signal-text{color:var(--text-dim);letter-spacing:.05em;font-size:11px;position:relative}.screen-caption{color:var(--text-dim);justify-content:space-between;padding:12px 6px 0;font-size:11px;display:flex}.rack-unit-row{background:var(--panel-bg);border-radius:var(--radius-unit);padding:18px}.rack-unit-row.empty{opacity:.5}.rack-unit-title{align-items:center;gap:8px;margin-bottom:14px;display:flex}.rack-unit-title b{color:var(--amber);letter-spacing:.05em;font-size:11px}.rack-unit-title span{color:var(--text-muted);font-size:10px}.empty-slot{border-radius:var(--radius-control);text-align:center;color:#6a655a;border:1px dashed #4a4a4e;padding:22px 10px;font-size:10px}.knob-control{flex-direction:column;align-items:center;gap:10px;display:flex}.knob-control.disabled{opacity:.45}.knob-ring{border-radius:50%;width:88px;height:88px;padding:7px;transition:background .2s}.knob-ring-idle{background:#3a3a3e}.knob-ring-running{background:conic-gradient(var(--amber) 0deg 260deg, #3a3a3e 260deg 360deg);animation:1.2s linear infinite knob-spin}.knob-ring-done{background:#4a7a4e}.knob-ring-error{background:var(--error)}@keyframes knob-spin{to{transform:rotate(360deg)}}.knob-face{cursor:pointer;touch-action:none;background:radial-gradient(circle at 35% 30%,#55555a,#1c1c1e);border:3px solid #111;border-radius:50%;width:100%;height:100%;position:relative;box-shadow:0 3px 6px #00000080}.knob-control.disabled .knob-face{cursor:not-allowed}.knob-indicator{background:var(--amber);width:3px;height:26px;box-shadow:0 0 6px var(--amber-glow);transform-origin:50% 28px;position:absolute;top:9px;left:50%}.knob-title{color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin:2px 0 0;font-size:12px}.knob-status{color:var(--text-dim);text-align:center;min-height:13px;margin:0;font-size:10px}.knob-cancel{color:var(--error);font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;background:0 0;border:none;margin:-2px 0 0;padding:2px 8px;font-size:10px}.knob-cancel:hover{text-decoration:underline}.small-knob-control{flex-direction:column;align-items:center;gap:6px;display:flex}.small-knob-control.disabled{opacity:.45}.small-knob-face{cursor:pointer;touch-action:none;background:radial-gradient(circle at 35% 30%,#55555a,#1c1c1e);border:2px solid #111;border-radius:50%;width:44px;height:44px;position:relative;box-shadow:0 2px 4px #00000080}.small-knob-control.disabled .small-knob-face{cursor:not-allowed}.small-knob-indicator{background:var(--amber);width:2px;height:14px;box-shadow:0 0 4px var(--amber-glow);transform-origin:50% 15px;position:absolute;top:5px;left:50%}.small-knob-title{color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;margin:0;font-size:10px}.hardware-button{font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:#f3e6d0;background:var(--action);border-radius:var(--radius-control);box-shadow:0 3px 0 var(--action-shadow), inset 0 1px 0 #ffffff40;cursor:pointer;border:none;width:100%;padding:11px 14px;font-size:11px;transition:transform 80ms,box-shadow 80ms}.hardware-button:active:not(:disabled){box-shadow:0 1px 0 var(--action-shadow), inset 0 1px 0 #ffffff40;transform:translateY(2px)}.hardware-button:disabled{opacity:.5;cursor:not-allowed}.signal-bridge{border-radius:var(--radius-unit);background:#1c1c1e;align-items:center;gap:18px;padding:14px 18px;display:flex;box-shadow:inset 0 2px 6px #00000080}.signal-label,.signal-value{color:var(--text-muted);letter-spacing:.05em;white-space:nowrap;font-size:11px}.signal-bars{flex:1;align-items:flex-end;gap:4px;height:34px;display:flex}.signal-bar{background:#3a3228;border-radius:1px;flex:1;transition:height .15s}.signal-bar.lit{background:var(--amber)}.signal-bar.peak{box-shadow:0 0 6px var(--amber-glow)}