.content-templates { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 24px; }
/* Showcase is an emphasis layer over the same mounted nodes and live content. */
.mesh-view-switch { position:absolute; top:14px; left:14px; z-index:30; display:flex; gap:3px; padding:4px; border:1px solid var(--line); border-radius:9px; background:var(--toolbar); box-shadow:var(--shadow); backdrop-filter:blur(15px); cursor:default; }
.mesh-view-switch button { min-height:34px; padding:0 12px; border:0; border-radius:5px; background:transparent; color:var(--muted); font-size:12px; font-weight:500; line-height:1.2; font-family:inherit; cursor:pointer; }
.mesh-view-switch button[aria-pressed="true"] { background:var(--paper-solid); color:var(--ink); box-shadow:0 1px 3px #0002; }
.mesh-view-switch button:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
.node { transition:opacity .2s ease,box-shadow .16s ease,border-color .16s ease; }
.edges g, .stack-header, .stack-outputs { transition:opacity .2s ease; }
body.showcase .node[data-showcase="fade"] { opacity:.12; }
body.showcase .node[data-showcase="fade"]:hover { opacity:.7; }
body.showcase .node[data-showcase="fade"]:is(:focus-within,.selected,.stack-drop-target,.node-traced) { opacity:1; }
body.showcase .node-stack[data-showcase="fade"] { background:color-mix(in srgb,var(--paper-solid) 12%,transparent); border-color:color-mix(in srgb,var(--line) 12%,transparent); box-shadow:none; }
body.showcase .node-stack[data-showcase="fade"] :is(.stack-header,.stack-outputs) { opacity:.12; }
body.showcase .node-stack[data-showcase="fade"]:is(:hover,:focus-within,.stack-drop-target,.node-traced) :is(.stack-header,.stack-outputs) { opacity:1; }
body.showcase .edges g[data-showcase="fade"] { opacity:.055; }
body.showcase .edges g[data-showcase="emphasise"] { opacity:.32; }
body.showcase .port { opacity:.18; }
body.showcase .node:is(:hover,:focus-within,.selected,.node-traced) .port, body.showcase .node-stack:is(:hover,:focus-within,.node-traced) .port { opacity:1; }
@media (max-width:760px) { body.editing.inspector-open .mesh-view-switch { display:none; } }
body.editing.showcase .node, body.editing.showcase .stack-header { cursor:pointer; }
body.editing.showcase .resize-handle { display:none; }
@media (prefers-reduced-motion:reduce) { .node, .edges g, .stack-header, .stack-outputs { transition:none; } }
/* Shared node anatomy: header, stable labelled sockets, collapsible options. */
.node.node-panel { border-radius:9px; background:var(--paper-solid); backdrop-filter:none; -webkit-backdrop-filter:none; }
.node-header { height:38px; display:flex; align-items:center; gap:5px; padding:0 8px 0 5px; border-radius:8px 8px 0 0; background:var(--node-header); border-bottom:1px solid var(--line); }
.node-header-icon { display:grid; place-items:center; flex:0 0 20px; width:20px; height:20px; margin-right:3px; }
.node-header-icon :is(svg,img) { width:20px; height:20px; object-fit:contain; }
.node-header-icon .app-monogram { font-size:13px; }
.node-panel .node-header .node-title { flex:1; min-width:0; margin:0; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.node-collapse,.node-panel .node-header .node-menu { position:static; display:grid; place-items:center; flex:0 0 26px; width:26px; height:28px; padding:0; border:0; border-radius:5px; color:var(--muted); background:transparent; cursor:pointer; opacity:1; font:inherit; }
.node-panel .node-header .node-menu { font-size:20px; letter-spacing:1px; }
.node-collapse:hover,.node-panel .node-header .node-menu:hover { color:var(--ink); background:color-mix(in srgb,var(--ink) 9%,transparent); }
.node-collapse:focus-visible,.node-panel .node-menu:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
.node-port-rows { height:var(--port-rows); }
.node-body { height:calc(100% - 38px - var(--port-rows)); min-height:0; border-top:1px solid var(--line); border-radius:0 0 8px 8px; overflow:hidden; }
.node-body[hidden] { display:none; }
.node.node-panel .node-body .node-inner { display:flex; flex-direction:column; align-items:stretch; gap:8px; height:100%; padding:12px; border-radius:0; }
.node.node-panel .node-body .node-subtitle { display:block; margin:0; font-size:11px; line-height:1.5; font-weight:400; letter-spacing:0; white-space:normal; overflow-wrap:anywhere; flex-shrink:0; }
.node.node-panel .node-body .node-media { width:100%; height:auto; flex:1; min-height:0; margin:0; border-radius:5px; background:var(--bg); box-shadow:none; }
.node-panel .node-body .node-icon { width:28px; height:28px; flex-basis:28px; border-radius:4px; }
.node-panel .node-body .node-icon :is(svg,img) { width:25px; height:25px; }
.node-panel .node-tags { position:static; width:auto; gap:4px; flex-shrink:0; }
.node-panel .node-tag { padding:3px 6px; box-shadow:none; font-size:8px; letter-spacing:.03em; }
.node-panel .example-selected { font-size:13px; margin:0; }
.node-panel .example-sample-controls { font-size:11px; gap:4px; }
.node-panel .example-sample-controls :is(button,select) { font-size:10px; padding:6px 8px; }
.node-panel .example-samples { margin:0; padding-left:15px; font-size:11px; line-height:1.7; color:var(--muted); }
.node-panel.collapsed { box-shadow:0 2px 6px #0002; }
body.editing .node-panel.collapsed .resize-handle { display:none; }
.node-stack { position:absolute; border:1px solid var(--line); border-radius:10px; background:var(--paper-solid); box-shadow:var(--shadow); }
.stack-header { height:42px; display:flex; align-items:center; gap:9px; padding:0 10px; background:var(--node-header); border-radius:9px 9px 0 0; color:var(--muted); font-size:12px; }
body.editing .stack-header { cursor:grab; }
.stack-header strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-weight:600; }
.stack-header button { border:0; border-radius:5px; background:transparent; color:var(--muted); width:28px; height:28px; font-size:20px; cursor:pointer; }
body:not(.editing) .stack-header button { display:none; }
.stack-outputs { position:absolute; left:0; width:100%; pointer-events:none; }
.stack-outputs::before { content:""; position:absolute; inset:38px 0 0; border-top:1px solid var(--line); border-radius:0 0 9px 9px; background:var(--node-header); }
body.editing .stack-outputs .port { pointer-events:auto; }
body.editing :is(.node,.node-stack).stack-drop-target { outline:2px solid var(--blue); outline-offset:5px; box-shadow:0 0 0 9px color-mix(in srgb,var(--blue) 14%,transparent); }
.stack-confirm { width:420px; }
.stack-confirm h2 { margin:0 0 16px; }
.stack-confirm label { display:block; font-size:12px; margin:18px 0; }
.stack-confirm input { display:block; width:100%; min-height:38px; margin-top:7px; border:1px solid var(--line); border-radius:6px; padding:9px; background:var(--paper); color:var(--ink); font:inherit; }
.shared-port-description { font-size:13px; margin:0 0 12px; }
.shared-port-members { padding-left:18px; font-size:11px; line-height:1.6; color:var(--muted); margin-bottom:14px; }
.stack-count { font-size:10px; }
.node.node-panel.stack-member { border-radius:0; border-left-color:transparent; border-right-color:transparent; box-shadow:none; }
.stack-member .node-header { border-radius:0; }
body.editing .stack-member .resize-handle { display:none; }
.stack-dialog { width:480px; }
.stack-dialog label { display:block; font-size:12px; margin:14px 0 8px; }
.stack-dialog input { display:block; width:100%; min-height:38px; margin-top:7px; border:1px solid var(--line); border-radius:6px; padding:9px; background:var(--paper); color:var(--ink); font:inherit; }
.stack-members,.stack-candidates { max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:6px; }
.stack-member-choice,.stack-candidates button { display:flex; align-items:center; gap:7px; min-height:42px; padding:5px 9px; border-bottom:1px solid var(--line); font-size:12px; }
.stack-member-choice:last-child,.stack-candidates button:last-child { border-bottom:0; }
.stack-member-choice > span:nth-child(2),.stack-candidates button > span:first-child { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stack-order { color:var(--muted); width:18px; }
.stack-member-choice button { width:30px; height:30px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); cursor:pointer; }
.stack-candidates button { width:100%; border:0; border-bottom:1px solid var(--line); color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
.stack-candidates button:hover,.stack-header button:hover { background:color-mix(in srgb,var(--ink) 8%,transparent); }
.stack-candidates small { font-size:10px; color:var(--muted); }
.stack-form-actions { display:flex; justify-content:flex-end; gap:8px; }
.stack-form-actions button { min-height:38px; padding:8px 12px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); cursor:pointer; }
.stack-dialog button:disabled { opacity:.4; cursor:default; }
.stack-dialog :focus-visible,.stack-header button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.node-panel .port { width:var(--socket-size,12px); height:var(--socket-size,12px); border-color:var(--port-color); background:var(--port-color); }
.node-panel .port.in { background:var(--paper-solid); }
body.editing .node-panel .port { box-shadow:none; }
body.editing .node-panel .port.pending { box-shadow:0 0 0 7px color-mix(in srgb,var(--port-color) 25%,transparent); }
.node-panel .port-label { max-width:calc((var(--node-width) - 32px) / 2); padding:0; background:transparent; border-radius:0; font-size:11px; font-weight:400; line-height:20px; color:var(--ink); }
.node-panel .side-left .port-label { left:calc(var(--socket-size,12px) / 2 + 8px); right:auto; }
.node-panel .side-right .port-label { right:calc(var(--socket-size,12px) / 2 + 8px); left:auto; text-align:right; }
.node-panel .side-top .port-label { bottom:auto; top:12px; }
.node-panel .side-bottom .port-label { top:auto; bottom:12px; }
.mesh-theme-dialog { width:520px; }
.mesh-theme-dialog h3 { margin:22px 0 12px; font-size:13px; }
.theme-mode-label { display:flex; align-items:center; gap:12px; font-size:12px; margin-top:18px; }
.theme-mode-label select { padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--paper-solid); color:var(--ink); font:inherit; }
.theme-colors { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin-bottom:20px; }
.theme-colors label { display:flex; align-items:center; gap:10px; font-size:12px; min-height:35px; }
.theme-colors input { padding:2px; width:34px; height:30px; border:1px solid var(--line); border-radius:5px; background:var(--paper-solid); cursor:pointer; }
@media(max-width:380px) { .theme-colors { column-gap:6px; }.theme-colors label { font-size:11px; } }
.content-templates[hidden] { display:none; }
.content-templates button { min-width:0; text-align:left; padding:16px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--paper-solid); cursor:pointer; }
.content-templates button:hover { border-color:var(--blue); }
.content-templates strong,.content-templates small { display:block; }
.content-templates small { color:var(--muted); margin-top:6px; font-size:11px; line-height:1.5; }
.content-picker label { display:block; font-size:12px; }
.content-picker input { display:block; width:100%; min-width:0; margin:8px 0 12px; padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper-solid); }
.content-picker form > button { padding:10px 14px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper-solid); cursor:pointer; }
.content-picker form > button:hover { border-color:var(--blue); }
.content-size-buttons { display:flex; gap:6px; margin:14px 0; }
.content-size-buttons button { flex:1; }
.node:is(.kind-social,.kind-embed,.kind-files,.kind-model,.kind-collection,.kind-operator,.kind-container) .node-inner { flex-direction:column; align-items:stretch; gap:10px; padding:14px; }
.rich-heading { display:flex; align-items:center; gap:10px; min-height:36px; padding-right:20px; flex-shrink:0; }
.rich-heading .node-icon { width:30px; height:30px; flex-basis:30px; }
.rich-heading .node-icon :is(svg,img) { width:28px; height:28px; }
.rich-content { flex:1; min-height:0; min-width:0; position:relative; display:flex; flex-direction:column; gap:8px; overflow:auto; border-radius:9px; }
.rich-content p { margin:0; font-size:12px; line-height:1.5; color:var(--muted); }
.rich-content a,.rich-content button { font:inherit; font-size:12px; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:9px 12px; background:var(--paper-solid); cursor:pointer; text-decoration:none; }
.rich-content a:hover,.rich-content button:hover { border-color:var(--accent); }
.embed-shell { flex:1; min-height:100px; position:relative; display:grid; place-items:center; background:color-mix(in srgb,var(--paper-solid) 85%,var(--accent)); border-radius:9px; overflow:hidden; }
.embed-shell iframe { display:block; width:100%; height:100%; border:0; }
.embed-shell .twitter-tweet { margin:0 !important; }
.embed-shell.embed-x { display:block; overflow:auto; }
.embed-shell img,.rich-poster { width:100%; height:100%; min-height:0; object-fit:contain; }
.embed-actions { display:flex; gap:7px; align-items:center; flex-shrink:0; }
.embed-actions a { margin-left:auto; }
.file-drop-target { flex:1; min-height:50px; display:grid; place-items:center; text-align:center; padding:12px; border:1px dashed var(--line); border-radius:9px; }
.node.drop-active { outline:3px solid var(--accent); outline-offset:4px; }
.video-stage { flex:1; min-height:90px; display:grid; place-items:center; overflow:hidden; border-radius:6px; background:var(--bg); position:relative; }
.video-stage video { width:100%; height:100%; min-height:0; object-fit:contain; }
.rich-content .video-thumbnail { position:relative; width:100%; height:100%; min-height:90px; padding:0; overflow:hidden; border:0; background:var(--bg); }
.video-thumbnail img { display:block; width:100%; height:100%; object-fit:contain; }
.video-play-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; color:#fff; background:#0004; text-shadow:0 1px 3px #000; }
.video-upload-progress,#video-upload-progress { width:100%; height:8px; accent-color:var(--blue); flex-shrink:0; }
.video-upload-progress[hidden],#video-upload-progress[hidden] { display:none; }
.video-error { position:absolute; bottom:0; padding:10px; background:var(--paper-solid); }
#video-settings .checkbox-field { display:flex; align-items:center; gap:8px; }
#video-settings .checkbox-field input { width:auto; margin:0; }
.file-entry { display:flex; align-items:center; gap:8px; flex-shrink:0; padding:8px 0; border-bottom:1px solid var(--line); font-size:12px; }
.file-entry span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-entry small { display:block; color:var(--muted); margin-top:4px; }
.asset-terms { white-space:pre-wrap; }
.asset-badge { color:var(--muted); font-size:10px; flex-shrink:0; }
.model-stage { position:relative; flex:1; min-height:100px; border-radius:9px; overflow:hidden; background:#10182b; display:grid; place-items:center; }
.model-stage canvas { display:block; width:100%; height:100%; touch-action:none; }
.model-stage button,.model-stage p { position:absolute; z-index:1; text-align:center; max-width:90%; }
.model-stage p { color:#d6deef; }
.model-stage .model-reset { top:8px; right:8px; padding:5px 8px; font-size:10px; }
.model-stage:focus-visible { outline:2px solid var(--blue); outline-offset:-3px; }
.node-content-page { height:550px; margin:24px 0; padding:16px; border:1px solid var(--line); border-radius:12px; }
.node-content-page .rich-content { height:100%; }
.node-content-page { --paper-solid:var(--paper); --blue:var(--accent); }
.project > .context { margin-right:16px; }
.content-edge { stroke-width:calc(2px / var(--wire-scale,1)); }
.flow-content { overflow:hidden; }
.flow-summary { display:flex; align-items:baseline; gap:8px; color:var(--muted); font-size:11px; flex-shrink:0; }
.flow-summary strong { color:var(--ink); font-size:25px; font-weight:650; }
.flow-collection-preview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; flex:1; min-height:0; overflow:hidden; }
.flow-collection-item { display:flex; flex-direction:column; min-width:0; min-height:0; gap:4px; }
.flow-collection-item img,.flow-placeholder { display:grid; place-items:center; width:100%; height:48px; border-radius:5px; object-fit:cover; background:color-mix(in srgb,var(--paper-solid) 90%,var(--accent)); color:var(--accent); font-size:22px; }
.flow-collection-item > span:last-child { font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flow-empty { display:grid; place-items:center; text-align:center; flex:1; min-height:40px; padding:12px; border:1px dashed var(--line); border-radius:8px; }
.flow-pick-label { font-size:9px !important; letter-spacing:.12em; }
.flow-picked-title { flex:1; font-size:16px; overflow:hidden; overflow-wrap:anywhere; }
.flow-controls { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.flow-controls button { padding:7px 10px; }
.flow-controls button:disabled { opacity:.45; cursor:default; }
.flow-position { margin-left:auto; font-size:10px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.flow-stage { flex:1; min-height:0; min-width:0; overflow:hidden; border-radius:8px; background:color-mix(in srgb,var(--paper-solid) 94%,var(--accent)); }
.flow-stage > img,.flow-stage > video { display:block; width:100%; height:100%; object-fit:contain; }
.flow-stage > .rich-content { height:100%; }
.flow-stage-project { display:flex; flex-direction:column; gap:9px; overflow:auto; padding:14px; }
.flow-stage-project .flow-project-image { height:110px; flex-shrink:0; border-radius:5px; }
.flow-project-title { font-size:20px; line-height:1.2; overflow-wrap:anywhere; }
.flow-project-description { white-space:pre-wrap; }
.flow-caption { display:flex; align-items:center; gap:8px; flex-shrink:0; font-size:11px; }
.flow-caption > span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.flow-caption a { margin-left:auto; padding:5px 8px; font-size:10px; white-space:nowrap; }
.flow-add-actions { margin:10px 0; }
.flow-add-actions button { width:100%; min-height:36px; }
.flow-source-list { max-height:230px; overflow:auto; border:1px solid var(--line); border-radius:8px; padding:4px; margin-bottom:10px; }
.inspector .flow-source-option { display:flex; align-items:center; gap:9px; padding:8px; margin:0; border-radius:5px; cursor:pointer; color:var(--ink); font-weight:500; }
.flow-source-option:hover { background:color-mix(in srgb,var(--paper-solid) 90%,var(--blue)); }
.inspector .flow-source-option input { flex:0 0 16px; width:16px; min-height:16px; margin:0; accent-color:var(--blue); }
.flow-source-option span { min-width:0; overflow-wrap:anywhere; }
.flow-source-option small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.flow-content :is(button,a):focus-visible,.flow-add-actions button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
@media(max-width:450px) { .content-templates { grid-template-columns:1fr; } .node-content-page { height:480px; } }