:root{--color-bg:#08090d;--color-surface:#0f1218d1;--color-surface-strong:#14181feb;--color-text:#f5f0e8;--color-text-muted:#f5f0e8a8;--color-acid:#c2ff37;--color-cobalt:#4b78ff;--color-sodium:#ffbb70;--color-border:#ffffff1f;--font-display:"Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;--font-body:"Avenir Next", "IBM Plex Sans", "Segoe UI", sans-serif;--font-mono:"IBM Plex Mono", "SFMono-Regular", monospace;--space-2:.75rem;--space-4:1.5rem;--space-5:2rem;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{min-height:100%;color:var(--color-text);font-family:var(--font-body);background:radial-gradient(circle at top,#415cbc2e,#0000 38%),linear-gradient(#0a0c11 0%,#07080b 100%);margin:0}body{min-height:100vh}button,kbd{font:inherit}button{transition:transform .16s,border-color .16s,background .16s}button:hover{transform:translateY(-1px)}.app-shell{min-height:100vh;position:relative;overflow:hidden}.scene-viewport{filter:saturate(.92)contrast(.96);background:radial-gradient(circle at 50% 18%,#4c72ff26,#0000 42%),linear-gradient(#080a104d,#080a10e6);transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .8s;position:absolute;inset:0;overflow:hidden;transform:scale(1)}.scene-viewport.mode-city{filter:saturate(1.28)contrast(1.08);transform:scale(1.09)}.scene-sky,.scene-fog{position:absolute;inset:0}.scene-sky{background:radial-gradient(circle at 30% 18%,#4e75ff38,#0000 25%),radial-gradient(circle at 72% 12%,#c2ff3724,#0000 20%);transition:opacity .22s}.scene-fog{background:linear-gradient(#0000 0%,#05060a66 55%,#05060aeb 100%);transition:opacity .22s}.scene-copy{z-index:2;box-sizing:border-box;min-width:13.5rem;font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-muted);pointer-events:none;background:#07090d94;border:1px solid #ffffff14;gap:.2rem;padding:.75rem .9rem;font-size:.72rem;display:grid;position:absolute;bottom:1rem;right:1.5rem}.scene-copy p{white-space:nowrap;margin:0}.instrument-board{z-index:1;min-height:100vh;position:relative}.instrument-shell{gap:var(--space-5);grid-template-columns:minmax(320px,420px) 1fr;min-height:100vh;padding:2rem;transition:transform .3s,opacity .22s;display:grid;position:relative}.board-copy-shell,.board-stage-shell{transform-origin:50%;min-width:0;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .62s,filter .78s}.board-copy{border:1px solid var(--color-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(#101319e6,#0c0e12bf);align-self:start;height:100%;padding:1.25rem 1.35rem 1.5rem}.eyebrow{font-family:var(--font-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--color-acid);margin:0 0 .75rem;font-size:.72rem}.board-copy h1{font-family:var(--font-display);margin:0;font-size:clamp(2.75rem,5vw,4.5rem);font-weight:500;line-height:.94}.lede{max-width:30rem;color:var(--color-text-muted);margin:1rem 0 0;line-height:1.6}.board-actions{gap:var(--space-2);flex-wrap:wrap;margin-top:1.5rem;display:flex}.board-actions button{border:1px solid var(--color-border);color:var(--color-text);cursor:pointer;background:#0c0f15e6;padding:.7rem 1rem}.board-actions button:hover{border-color:#c2ff3757}.board-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1.4rem 0 0;display:grid}.board-stats div{border-top:1px solid #ffffff14;padding-top:.75rem}.board-stats dt{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-muted);font-size:.65rem}.board-stats dd{font-family:var(--font-display);margin:.35rem 0 0;font-size:1.05rem}.board-stage{cursor:grab;background:linear-gradient(#0000 23px,#ffffff0b 24px) 0 0/24px 24px,linear-gradient(90deg,#0000 23px,#ffffff0b 24px) 0 0/24px 24px,radial-gradient(circle at top,#4a6eff14,#0000 35%),#07090cc7;border:1px solid #ffffff14;height:calc(100vh - 4rem);min-height:720px;position:relative;overflow:hidden}.board-stage:active{cursor:grabbing}.board-world{transform-origin:0 0;width:1440px;height:960px;position:relative}.board-cables{width:100%;height:100%;position:absolute;inset:0}.board-cables path{fill:none;stroke:#c2ff37c7;stroke-linecap:round;stroke-width:3px;stroke-dasharray:2 12}.board-cables .route-warm{stroke:#ffbb70f0;stroke-width:4px}.board-cables .route-cool{stroke:#c2ff37d6}.route-handle{z-index:2;cursor:grab;touch-action:none;background:0 0;border:0;border-radius:999px;width:62px;height:62px;padding:0;position:absolute}.route-handle:after{content:"";background:radial-gradient(circle at 30% 30%,#fffffff2,#ffbb708c 35%,#0a0b0eeb 100%);border:1px solid #ffffff42;border-radius:999px;width:18px;height:18px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 24px #ffbb704d}.route-handle:focus-visible{outline:2px solid var(--color-acid);outline-offset:-8px}.route-handle:active{cursor:grabbing}.signal-card{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:linear-gradient(#0e1118eb,#0a0c11d6);border:1px solid #ffffff1a;border-radius:1rem;align-content:start;gap:.58rem;padding:1rem;display:grid;position:absolute;box-shadow:inset 0 0 0 1px #ffffff08}.signal-card.route-destination{border-color:#ffbb7052;box-shadow:inset 0 0 0 1px #ffbb700d,0 0 34px #ffbb7017}.signal-card.route-hovered{border-color:#c2ff37d1;box-shadow:0 0 42px #c2ff372e}.signal-port{background:#ffbb70f2;border-radius:999px;width:8px;height:8px;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 0 14px #ffbb70b8}.signal-port-in{left:-5px}.signal-port-out{background:#c2ff37f2;right:-5px;box-shadow:0 0 14px #c2ff37b8}.signal-card.selected{border-color:#c2ff376b;box-shadow:0 0 0 1px #c2ff3714,0 18px 36px #00000057}.signal-card strong{font-family:var(--font-display);font-size:1.5rem;font-weight:500}.signal-card p{color:var(--color-text-muted);margin:0;font-size:.88rem;line-height:1.38}.signal-card-meta{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:#ffffff8f;justify-content:space-between;font-size:.68rem;display:flex}.signal-patch-button{font:inherit;letter-spacing:inherit;text-transform:uppercase;color:#ffffff94;cursor:pointer;background:0 0;border:0;margin:-.3rem -.35rem -.3rem 0;padding:.3rem .35rem;position:relative}.signal-patch-button:before{content:"";position:absolute;inset:-26px -12px}.signal-patch-button:hover,.signal-patch-button:focus-visible{color:var(--color-acid);outline-offset:1px;outline:1px solid #c2ff3761}.signal-card-readout{font-family:var(--font-mono);letter-spacing:.16em;color:#ffffff85;margin-top:auto;font-size:.68rem}.signal-targets{gap:1.1rem;width:176px;display:grid;position:absolute;top:104px;right:32px}.target-slot{font-family:var(--font-mono);text-transform:uppercase;text-align:left;color:var(--color-text);cursor:pointer;background:#0c0f14e0;border:1px solid #ffffff1a;border-radius:.9rem;gap:.15rem;padding:.9rem;font-size:.72rem;display:grid}.target-slot strong{color:var(--color-sodium)}.target-slot.active{border-color:#ffbb7057;box-shadow:0 0 0 1px #ffbb7014}.target-slot.hovered{transform:translate(-4px)}.help-overlay{z-index:2;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#08090cd6;border:1px solid #ffffff1f;width:min(28rem,100vw - 4rem);padding:1rem 1.1rem;position:absolute;bottom:2rem;left:2rem}.help-overlay ul{color:var(--color-text-muted);margin:0;padding-left:1.2rem;line-height:1.7}.help-overlay kbd{min-width:3.1rem;font-family:var(--font-mono);color:var(--color-text);border:1px solid #ffffff24;margin-right:.35rem;padding:.08rem .3rem;font-size:.72rem;display:inline-block}.city-mode .instrument-board{pointer-events:none}.city-mode .instrument-shell{transform:none}.city-mode .board-copy-shell{opacity:0;filter:blur(12px);transform:perspective(1200px)translate(-118%)rotateY(18deg)}.city-mode .board-stage-shell{opacity:.04;filter:blur(10px)saturate(1.8);transform:perspective(1200px)translateZ(180px)scale(1.14)}.city-mode .scene-copy{color:#f5f0e8c7;background:#05070ab3;border-color:#c2ff372e}@media (width<=960px){.instrument-shell{grid-template-columns:1fr}.board-stage{height:66vh;min-height:620px}.board-copy h1{font-size:clamp(3rem,12vw,5.6rem)}.signal-targets{width:min(220px,100% - 56px);inset:auto auto 28px 28px}.help-overlay{width:auto;bottom:1rem;left:1rem;right:1rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}.scene-viewport.mode-city{transform:scale(1.01)}}