.graph-toolbar{flex-wrap:wrap;margin-bottom:10px}.graph-help{font-size:11px;color:var(--muted);line-height:1.8;margin-bottom:12px}.graph-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;min-height:590px;border:1px solid var(--border);border-radius:8px;overflow:hidden}.node-viewport{height:620px;overflow:hidden;position:relative;touch-action:none;background-color:#171b1e;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);outline:none}.node-viewport:focus{box-shadow:inset 0 0 0 1px #829c65}.node-world{position:absolute;left:0;top:0;transform-origin:0 0;width:1px;height:1px}.node-wires{position:absolute;width:1px;height:1px;overflow:visible;pointer-events:none}.node-wires path{stroke:#94a49b;stroke-width:1.5;fill:none}.graph-node{position:absolute;width:170px;height:58px;padding:8px 12px;border-radius:4px;border:1px solid #617382;background:#334351;box-shadow:0 2px 6px #0005;cursor:grab;user-select:none;touch-action:none}.graph-node small{display:block;font-size:9px;color:#d3e1eb;letter-spacing:.7px;margin-bottom:4px}.graph-node strong{display:block;font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f0f2f3}.graph-node[data-kind="Reference Set"]{background:#514335;border-color:#8d7357}.graph-node[data-kind="Prompt"]{background:#4b3c58;border-color:#7e628e}.graph-node[data-kind="Note"]{background:#454732;border-color:#72764e}.graph-node[data-kind="Read Sequence"]{background:#315153;border-color:#507e83}.graph-node.selected{outline:2px solid #dabe73;outline-offset:2px}.graph-node.connecting{box-shadow:0 0 0 4px #b7db7999}.node-port{position:absolute;left:calc(50% - 10px);width:20px;height:20px;border:0;padding:0;background:transparent;z-index:2;cursor:crosshair}.node-port:after{content:'';display:block;width:8px;height:8px;background:#b7c5cb;border:1px solid #20282b;margin:5px;border-radius:2px}.node-port:hover:after{background:#eed38f}.node-port.input{top:-12px}.node-port.output{bottom:-12px}.node-properties{background:#1d2422;border-left:1px solid var(--border);padding:16px;overflow:auto;overscroll-behavior:contain;max-height:620px;font-size:12px}.node-properties h3{font-size:13px}.node-properties h4{margin:20px 0 10px}.node-properties p{font-size:11px;line-height:1.8;overflow-wrap:anywhere;margin:12px 0}.node-properties textarea{font-size:12px}.property-preview{width:100%;max-height:150px;object-fit:contain;background:#121616;margin-top:16px}.property-preview[hidden]{display:none}.property-actions{flex-wrap:wrap;gap:6px;margin-top:18px}.sequence-properties{border-bottom:1px solid var(--border);padding-bottom:12px}.reference-input{padding:12px 0;border-bottom:1px solid var(--border)}.reference-input strong,.reference-input small{display:block;overflow-wrap:anywhere;margin-bottom:8px}.reference-input .toolbar{margin-top:8px;flex-wrap:wrap}.graph-empty{width:300px;padding:20px;color:var(--muted);font-size:12px}.graph-layout input{font-size:12px}#graph-zoom{font-size:10px;color:var(--muted)}
@media(max-width:1000px){.graph-layout{grid-template-columns:minmax(0,1fr) 240px}.node-properties{padding:12px}}
@media(max-width:700px){.graph-layout{display:flex;flex-direction:column}.node-viewport{height:52dvh;min-height:320px}.node-properties{max-height:none;border-left:0;border-top:1px solid var(--border)}.graph-help{font-size:10px}}
.typed-input{position:absolute;left:0;right:0;height:24px;display:flex;align-items:center;gap:7px;padding:0 9px 0 16px;font-size:10px;color:#e2e8df}.typed-input>span{min-width:48px}.typed-input small{margin:0;letter-spacing:0;font-size:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;color:#acb5b8}.typed-input.occupied{background:#ffffff06}.node-port.side{left:-11px;top:2px}.node-port.image:after{background:#81c6ed}.node-port.media:after{background:#cf9df0}.node-port.compatible:after{box-shadow:0 0 0 4px #c6e88770}.port-disconnect{padding:0;width:20px;height:20px;font-size:17px;flex-shrink:0;color:#f0c3a3}.node-wires .wire-hit{stroke:transparent;stroke-width:14;pointer-events:stroke;cursor:pointer}.node-wires .wire-line{pointer-events:none;stroke-width:2}.node-wires .selected .wire-line{stroke:#f3cc78;stroke-width:3}.node-wires .wire-preview{stroke:#f3cc78;stroke-width:2;stroke-dasharray:5 4;pointer-events:none}.graph-node[data-kind="Reference Set"]{padding-bottom:0}
.typed-top{position:absolute;top:0;width:56px;transform:translateX(-50%);text-align:center;font-size:9px;color:#d8e0e2}.typed-top>span{display:block;margin-top:10px;white-space:nowrap}.typed-top.occupied>span{color:#fff}.graph-node.has-inputs{padding-top:34px}.node-thumb{height:64px;position:relative;background:#131a1f;border-radius:3px;overflow:hidden;margin:0 0 7px;pointer-events:none}.node-thumb>span{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;color:#9ca8b1}.node-thumb img,.node-thumb video{position:relative;width:100%;height:100%;object-fit:contain;display:block}.node-thumb [hidden]{display:none}.graph-selection-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}.graph-selection-bar>span{font-size:11px;color:#d7dfd0;margin-right:auto}.graph-marquee{position:absolute;border:1px solid #d8bf76;background:#ddc57422;pointer-events:none;z-index:5}.graph-marquee[hidden]{display:none}.wire-control{overflow:visible;pointer-events:auto}.node-wires .wire-hit{stroke-width:16}.graph-node img{-webkit-user-drag:none}

.wire-buttons{position:absolute;width:1px;height:1px;overflow:visible;pointer-events:none;z-index:3}

.wire-dot{display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}.wire-dot span{width:var(--dot-size);height:var(--dot-size);border-radius:50%;background:#84938f;opacity:.55;box-shadow:0 0 0 1px #182320}.wire-dot:hover span,.wire-dot:focus-visible span,.selected .wire-dot span{opacity:1;background:#e3c37b}.wire-menu{position:fixed;inset:auto;margin:0;padding:5px;min-width:135px;border:1px solid #536058;border-radius:7px;background:#222b26;color:#e2e8e0;box-shadow:0 5px 18px #0007}.wire-menu button{display:block;width:100%;text-align:left;padding:8px 12px;border:0;border-radius:4px;background:transparent;color:inherit;font-size:12px;cursor:pointer}.wire-menu button:hover,.wire-menu button:focus-visible{background:#3b493e}.wire-menu button[data-wire-action=disconnect]{color:#e9b6a1}.wire-style-label{display:flex;align-items:center;gap:6px;margin:0;font-size:11px;color:var(--muted)}.wire-style-label select{width:auto;padding:5px 22px 5px 8px;font-size:11px}
.application-properties{border-top:1px solid var(--border,#383838);margin-top:14px;padding-top:10px}.application-properties h4{margin:12px 0 6px}.application-properties p{font-size:12px;line-height:1.6;overflow-wrap:anywhere}.scene-roadmap section{padding:16px 0;border-bottom:1px solid #383838}.roadmap-work{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.roadmap-work>div{display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid #444;border-radius:8px;max-width:100%}.roadmap-work small{color:#a9a9b6}
.node-search{position:fixed;inset:auto;margin:0;padding:12px;width:280px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;border:1px solid #637061;border-radius:8px;background:#202923;color:#e6ede2;box-shadow:0 8px 28px #0009}.node-search label{display:block;font-size:11px;color:#bdc9b7}.node-search input{display:block;width:100%;margin:8px 0;font-size:13px}.node-search [role=listbox]{max-height:270px;overflow:auto}.node-search [role=option]{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;border:0;background:transparent;color:inherit;padding:8px;border-radius:4px;cursor:pointer}.node-search [role=option][aria-selected=true],.node-search [role=option]:hover{background:#3b4b3c}.node-search small{display:block;font-size:10px;color:#abb8a6}.node-search>small{margin-top:10px}.node-search [role=option] span{font-size:12px;overflow-wrap:anywhere}
.subgraph-node{padding-top:32px!important;padding-bottom:24px;background:#33463f!important;border-color:#739d85!important}.subgraph-open{font-size:10px;position:absolute;right:8px;top:49px;padding:2px 5px}.typed-bottom{position:absolute;bottom:0;transform:translateX(-50%);width:78px;text-align:center;font-size:9px}.typed-bottom>span{display:block;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-port-row{display:grid;grid-template-columns:1fr 1.5fr auto;gap:8px;margin:10px 0}.graph-breadcrumb{margin-bottom:12px}.subgraph-node .typed-top{width:78px;overflow:visible}.subgraph-node .typed-top>span{overflow:hidden;text-overflow:ellipsis}

.graph-add-menu{position:relative}.graph-add-menu>summary{list-style:none;cursor:pointer}.graph-add-options{position:absolute;top:100%;left:0;z-index:20;min-width:240px;padding:12px;background:#202923;border:1px solid #637061;border-radius:8px;box-shadow:0 8px 28px #0009;display:grid;gap:6px}.graph-add-options small{font-size:11px;color:var(--muted);margin:0 0 7px}.graph-add-options .btn{justify-content:flex-start}.graph-help summary,.connection-settings summary,.application-properties summary{cursor:pointer}.connection-settings{margin:12px 0}.subgraph-node strong{padding-right:0}

.work-file{padding:10px 0;border-bottom:1px solid var(--border)}.work-file strong,.work-file small{display:block;overflow-wrap:anywhere}.work-file small{color:var(--muted);margin:4px 0}.application-properties .toolbar{flex-wrap:wrap;gap:6px}


/* The canvas is a bounded workspace: tools left, graph center, properties right. */
body:has(.graph-workspace){overflow:hidden}
.shell:has(.graph-workspace){height:100dvh;min-height:0}
.main-wrap:has(.graph-workspace){display:flex;flex-direction:column;min-height:0}
.workspace:has(.graph-workspace){flex:1;min-height:0;overflow:hidden}
.content:has(.graph-workspace){display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden}
.graph-workspace{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px;flex:1;min-height:0}
.graph-rail{display:flex;flex-direction:column;align-items:center;gap:8px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border:1px solid var(--border);border-radius:8px;background:#1d2422;padding:6px 4px;scrollbar-width:thin}
.graph-rail .toolbar,.graph-rail .graph-selection-bar{display:flex;flex-direction:column;gap:5px;width:100%;margin:0;padding-bottom:8px;border-bottom:1px solid var(--border)}
.graph-rail .graph-tool{display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:7px;border:0;background:transparent;border-radius:5px;list-style:none;cursor:pointer}
.graph-tool::-webkit-details-marker{display:none}.graph-tool:hover,.graph-tool:focus-visible{background:#3b4b3c}
.graph-tool svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.graph-rail #graph-selection{font-size:9px;overflow-wrap:anywhere;text-align:center;margin:0}.graph-rail #graph-zoom{font-size:9px}
.graph-rail .wire-style-label{font-size:9px;display:flex;flex-direction:column;gap:3px}.graph-rail .wire-style-label select{width:43px;font-size:9px;padding:3px 0}
.graph-rail .graph-help{margin:0;font-size:10px;width:100%}.graph-rail .graph-help p{width:100%;overflow-wrap:anywhere}
.graph-rail .graph-breadcrumb strong{font-size:9px;overflow-wrap:anywhere;width:100%}
.graph-rail .graph-add-options{position:fixed;left:auto;top:auto;margin-left:42px;margin-top:-36px;z-index:30}
.graph-layout{height:100%;min-height:0;grid-template-rows:minmax(0,1fr)}
.node-viewport{height:100%;min-height:0}.node-properties{height:100%;min-height:0;max-height:100%;scrollbar-gutter:stable}
@media(max-width:700px){
.graph-workspace{grid-template-columns:46px minmax(0,1fr);gap:5px}.graph-rail{padding:4px 2px}
.graph-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,.7fr)}
.node-viewport{height:100%;min-height:0}.node-properties{height:100%;max-height:100%;padding:10px}
}

.graph-rail #graph-selection{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.graph-rail .graph-help p{position:fixed;bottom:24px;margin-left:44px;width:min(360px,65vw);padding:14px;background:#202923;border:1px solid var(--border);border-radius:8px;z-index:30;box-shadow:0 8px 28px #0009}
.main-wrap:has(.graph-workspace)>.topbar,.content:has(.graph-workspace)>.detail-header,.content:has(.graph-workspace)>.note{flex-shrink:0}

/* Shared shot/asset header: all detail tabs keep the same content origin. */
html:has(.detail-header){scrollbar-gutter:stable}
.content:has(>.detail-header){padding:24px}
.content:has(>.detail-header)>.note{font-size:11px;margin-bottom:12px!important;line-height:1.6}
.content:has(>.detail-header)>.detail-header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px;row-gap:8px;margin-bottom:16px;min-width:0;flex-shrink:0}
.content:has(>.detail-header)>.detail-header h1{font-size:22px;line-height:1.35;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content:has(>.detail-header) .detail-meta{grid-column:2;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:11px;margin:0}
.content:has(>.detail-header)>.tabs{flex-shrink:0;margin-bottom:16px;gap:22px}
@media(max-width:700px){
.content:has(>.detail-header){padding:14px 12px}
.content:has(>.detail-header)>.detail-header{column-gap:8px;row-gap:6px;margin-bottom:12px}
.content:has(>.detail-header)>.detail-header h1{font-size:17px}
.content:has(>.detail-header) .detail-meta{gap:8px;font-size:10px}
.content:has(>.detail-header)>.tabs{gap:18px;margin-bottom:12px}
}
/* Keep the mobile inspector present with a stable footprint, including empty selection. */
@media(max-width:700px){
 .graph-layout{grid-template-rows:minmax(180px,1fr) 240px;min-height:420px}
 .graph-workspace{min-height:420px}
 .node-properties{box-sizing:border-box;height:240px;min-height:240px;max-height:240px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding-bottom:20px}
 .node-properties input,.node-properties textarea,.node-properties select{font-size:16px}
 .node-properties button{min-height:40px}
 .graph-rail .graph-tool{width:40px;height:40px;min-height:40px}
}
#sync-status{white-space:nowrap;font-size:11px}
#sync-status[data-phase="login"],#sync-status[data-phase="offline"]{color:#f1bd86;border-color:#94643b}
#sync-status[data-phase="pending"]{color:#e2cc82}
@media(max-width:700px){
 body:has(.graph-workspace){overflow:auto}
 .shell:has(.graph-workspace){height:auto;min-height:100svh}
 .workspace:has(.graph-workspace),.content:has(.graph-workspace){height:auto;overflow:visible}
 .graph-workspace{height:max(480px,calc(100svh - 230px));min-height:0;flex:none}
}