:root{color-scheme:dark;--bg:#171b22;--surface:#222935;--text:#e6e9ef;--muted:#b8c3d3;--line:#465267;--action:#b8d4ff;--good:#96d9bd;--error:#ffb8b8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui}button,input,select{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:7px 10px;min-height:36px}button{cursor:pointer}button:hover{background:#303c50}button:disabled{opacity:.5;cursor:default}button.primary{background:#b8d4ff;color:#15243a;border-color:#b8d4ff}button.live{background:#9dddbf;color:#122b22;border-color:#9dddbf}button[aria-pressed=true]{border-color:var(--action);background:#344b69}:focus-visible{outline:2px solid var(--action);outline-offset:3px}a{color:var(--action);text-underline-offset:4px}::selection{background:#426292;color:white}*{scrollbar-color:#65738a #171b22}input{caret-color:var(--action)}header,.project-bar,.run-bar{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}header strong{font-size:18px}header a{margin-left:auto}#resources,#ownership,#save-state,.muted{color:var(--muted);font-variant-numeric:tabular-nums}#project-name{margin-right:auto}#ownership{font-size:12px}#notice{margin:0;padding:0 18px;color:var(--error);min-height:26px;max-height:72px;overflow:auto}.workspace{display:grid;grid-template-columns:190px minmax(0,1fr) 300px;height:calc(100dvh - 195px);min-height:350px}.workspace.library-closed{grid-template-columns:0 minmax(0,1fr) 300px}#library,#inspector{overflow:auto;padding:16px;border-right:1px solid var(--line)}#inspector{border-right:0;border-left:1px solid var(--line);padding-bottom:90px}h2{font-size:17px;margin:0 0 12px}h3{font-size:14px;margin:20px 0 8px}p{max-width:72ch}#library p{font-size:12px;color:var(--muted)}#node-library{display:grid;gap:6px}#node-library button{text-align:left}#node-library .group-label{color:var(--muted);font-size:12px;margin:14px 0 2px}.canvas-region{min-width:0;display:flex;flex-direction:column;position:relative}.canvas-tools{padding:8px 12px;display:flex;gap:6px;align-items:center;border-bottom:1px solid var(--line)}#graph-summary{margin-right:auto;color:var(--muted);font-size:12px}#canvas{overflow:auto;flex:1;position:relative;background-color:#131820;background-image:radial-gradient(#3a4455 .7px,transparent .7px);background-size:20px 20px;overscroll-behavior:contain}#world-space{width:3200px;height:2400px}#world{width:3200px;height:2400px;position:relative;transform-origin:0 0}#wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.wire{stroke:#8499b7;stroke-width:2.5;fill:none;pointer-events:stroke;cursor:pointer}.wire:hover,.wire.selected{stroke:var(--action);stroke-width:5}.node{position:absolute;width:224px;background:var(--surface);border:1px solid #65738a;border-radius:12px;touch-action:none;padding:0;text-align:left;user-select:none}.node.selected{border:2px solid var(--action);z-index:2}.node header{padding:10px 12px;display:block;cursor:grab;border-bottom:1px solid var(--line)}.node header strong{font-size:14px;display:block;overflow-wrap:anywhere}.node-kind{font-size:11px;color:var(--muted)}.node .metrics{padding:8px 12px;display:block;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.flow{font-size:11px;display:block;padding:0 12px 8px;color:var(--muted)}.flow[data-health=flowing]{color:var(--good)}.flow[data-health=failed],.flow[data-health=stale]{color:var(--error)}.ports{display:flex;justify-content:space-between;gap:8px;padding:0 7px 8px}.ports>div{display:grid;gap:4px}.port{padding:2px 7px;font-size:11px;min-height:28px;border-radius:12px}.port[data-direction=out]{border-color:#839abc}.port[aria-pressed=true]{background:#426292}.node-warning{color:var(--error);font-size:11px;padding:0 12px 8px;display:block}#context{position:absolute;width:248px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#283244;z-index:3}#context .actions{gap:4px}#context button{min-height:36px}#context label{font-size:12px}#canvas-empty{position:absolute;top:80px;left:60px;font-size:21px;color:var(--muted);pointer-events:none}label{display:block;margin:10px 0;color:var(--muted);font-size:13px}label input:not([type=checkbox]),label select{display:block;width:100%;margin-top:5px}label:has(input[type=checkbox]){display:flex;gap:8px;align-items:center}input[type=checkbox]{min-height:20px;min-width:20px;accent-color:var(--action)}fieldset{border:0;padding:0;margin:0;min-width:0}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.rect-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}.connections{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}.connections p{font-size:12px;overflow-wrap:anywhere}.connections button{font-size:12px}#validation{max-height:170px;overflow:auto;border-top:1px solid var(--line);padding:12px;background:var(--bg)}#validation button{display:block;width:100%;text-align:left;margin:4px 0;font-size:12px}#validation .error{color:var(--error)}#stop-options{display:flex;gap:6px}#work-status{color:var(--muted)}#monitor{position:fixed;bottom:12px;right:12px;width:430px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;z-index:8}#monitor-head{display:flex;align-items:center;gap:12px;padding:8px 12px}#monitor-head strong{margin-right:auto}#monitor-body{padding:0 12px 12px}#monitor video{width:100%;aspect-ratio:16/9;background:#090c11;display:block;margin-top:12px}#monitor select{width:100%}#monitor-status{font-size:12px;color:var(--muted);margin-bottom:0}dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:24px;max-width:680px;width:calc(100% - 32px);max-height:85dvh;overflow:auto}dialog::backdrop{background:#070b12bb}dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:50vh;overflow:auto;font:12px/1.6 ui-monospace,monospace}.close-dialog,#close-details{float:right}.plan{border-bottom:1px solid var(--line);padding:12px 0}.plan p{font-size:13px;margin:6px 0}#project-list button{display:block;width:100%;text-align:left;margin:10px 0}[hidden]{display:none!important}@media(max-width:1050px){.workspace{grid-template-columns:155px minmax(0,1fr) 270px}.workspace.library-closed{grid-template-columns:0 minmax(0,1fr) 270px}header{gap:8px}#resources{font-size:12px}}@media(max-width:700px){header,.project-bar,.run-bar{padding:8px;gap:6px}header strong{font-size:16px}header a{font-size:12px}#resources{width:100%}#ownership{width:100%}.workspace,.workspace.library-closed{display:flex;flex-direction:column;height:auto;min-height:70dvh}#library{max-height:200px;flex:none;border-bottom:1px solid var(--line)}#node-library{grid-template-columns:1fr 1fr}.group-label{grid-column:1/-1}.canvas-region{height:440px;flex:none}#inspector{border-top:1px solid var(--line);border-left:0;padding:16px 16px 100px}#context{width:224px}.canvas-tools{flex-wrap:wrap}#graph-summary{width:100%}#monitor{width:360px}#project-name{max-width:170px;overflow-wrap:anywhere}.project-bar #save-state{font-size:12px}#stop-options{flex-wrap:wrap}.node{touch-action:pan-x pan-y}}

/* Constrain the graph to its viewport; controls remain at reading size. */
.canvas-region,#canvas{min-height:0}.ports>div{align-content:start}#context{max-height:calc(100% - 70px);overflow:auto;line-height:1.5}#context p{font-size:12px}button,input,select{line-height:1.5}#monitor-head{padding:10px 14px}#stop-options{padding:4px}@media(max-width:700px){#context{width:min(290px,calc(100% - 16px))}.canvas-region{height:520px}}

body{height:100dvh;display:flex;flex-direction:column}body>header,body>nav,#notice{flex-shrink:0}.workspace{height:auto;min-height:0;flex:1}@media(max-width:700px){body{height:auto;min-height:100dvh}.workspace,.workspace.library-closed{height:auto;flex:none;min-height:70dvh}}

#node-library button[draggable=true]:enabled{cursor:grab}.drop-hint{position:absolute;width:224px;min-height:155px;padding:12px;border:2px dashed var(--action);border-radius:12px;background:#26384d;color:var(--text);pointer-events:none;z-index:5}.accept-drop{outline:2px solid var(--action);outline-offset:-2px}

/* Narrow-screen operations flow above the graph. The expanded player reserves
   its own space so it cannot cover selected source controls. */
@media(max-width:700px){.canvas-region{height:auto;min-height:520px}#canvas{height:440px;min-height:440px;flex:none}#context{position:relative;left:auto;top:auto;width:calc(100% - 24px);max-height:none;overflow:visible;margin:12px;flex:none;scroll-margin-top:12px}#monitor:has(#monitor-body:not([hidden])){position:relative;bottom:auto;right:auto;width:360px;margin:12px auto;flex:none}}

/* Node controls travel in unscaled scroll content; the player docks to its viewport. */
#world-space{position:relative}#context{max-height:500px}.context-heading{display:flex;align-items:center;gap:8px}.context-heading strong{flex:1}.context-close{color:#ffb8b8;padding:7px;flex:none;width:36px;height:36px}.context-close svg{display:block;width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}.wire-draft{pointer-events:none;stroke:var(--action);stroke-dasharray:6 4}.port[data-direction=out]:enabled{cursor:crosshair;touch-action:none}#monitor{position:absolute;width:320px;max-width:calc(100% - 24px)}#monitor-head{padding:8px 10px;gap:8px}#monitor-head strong{font-size:13px}
@media(max-width:700px){#context{max-height:none}#monitor:has(#monitor-body:not([hidden])){bottom:auto!important}}

/* A hidden library leaves its track empty; never auto-place the canvas in it. */
@media(min-width:701px){
  #library{grid-column:1;grid-row:1}
  .canvas-region{grid-column:2;grid-row:1}
  #inspector{grid-column:3;grid-row:1}
}

/* Dots travel along the authored source-to-input path. Selection stays independent. */
.wire.flow-active{stroke:var(--good)}
.wire.flow-ready{stroke:#ffc27a}
.wire:is(.flow-active,.flow-ready).selected,.wire:is(.flow-active,.flow-ready):hover{stroke:var(--action)}
.wire-flow{fill:none;stroke:var(--good);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 17;pointer-events:none;visibility:hidden}
.wire-flow.flow-ready{stroke:#ffc27a}
.wire-flow:is(.flow-active,.flow-ready){visibility:visible}
.wire-flow:is(.flow-active,.flow-ready).in-view{animation:media-flow .7s linear infinite}
#wires.flow-paused .wire-flow{animation-play-state:paused}
@keyframes media-flow{to{stroke-dashoffset:-18}}
@media(prefers-reduced-motion:reduce){.wire-flow:is(.flow-active,.flow-ready).in-view{animation:none}}