/* Open canvas: the site is the background, never an embedded blue dashboard. */
.builder-section,.circuit-studio,.studio-toolbar,.studio-workspace,.component-library,.canvas-column,.canvas-heading,.circuit-canvas,.circuit-foundation,.foundation-label,.circuit-sidebar,.copilot-panel,.studio-footer,.seams-details,.sidebar-tabs{background:transparent!important;background-image:none!important;box-shadow:none!important}
.circuit-studio{border:0!important;border-radius:0!important}.studio-demo-badge{display:none!important}.component-svg{width:20px;height:20px;flex-shrink:0}.category-icon .component-svg{width:16px;height:16px}.template-mini .component-svg{width:15px;height:15px}
.empty-circuit-art{display:none;position:absolute;pointer-events:none;inset:0;width:100%;height:100%;opacity:.6}.circuit-canvas.is-empty .empty-circuit-art{display:block}.circuit-canvas.is-empty .circuit-wires{display:none}.empty-circuit-art path{fill:none;stroke:#364c66;stroke-width:1}.empty-circuit-art .empty-main{stroke:#6e9dcb;stroke-width:1.5}.empty-circuit-art circle{fill:var(--bg);stroke:#5c83ad;stroke-width:1.3}.empty-circuit-art .empty-dot{fill:#8abfff;stroke:none}.empty-circuit-art rect{fill:var(--bg);stroke:#587ca4}.empty-circuit-art text{fill:#89a8ca;font-family:var(--mono);font-size:19px;letter-spacing:3px}.inspector-close{position:absolute;right:12px;top:10px;background:transparent;color:var(--muted);font-size:24px;padding:3px 8px;z-index:3}
.circuit-sidebar.showing-details{background:#10151c!important}
/* Examples are a lightweight gallery, not large product cards. */
.circuit-templates{gap:24px!important}.template-card{background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;border-bottom:1px solid #28313b!important;border-radius:0!important;min-height:0!important;height:116px!important;padding:14px 0!important;flex:0 0 205px!important;min-width:185px!important;overflow:hidden!important}.template-card:before,.template-card:after{display:none!important}.template-card:hover{border-bottom-color:var(--blue)!important;transform:none!important}.template-card>p,.template-card .template-meta{display:none!important}.template-card h4{font-size:14px!important;margin:8px 0!important;line-height:1.3!important}.template-card-top{gap:10px!important}.template-icon{width:22px!important;height:22px!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}.template-domain{font-size:8px!important;color:#8b98a8!important}.template-mini{gap:7px!important;margin-top:9px!important}.template-mini>span{width:19px!important;height:19px!important;padding:0!important;background:transparent!important;border:0!important}.template-mini i{font-size:9px!important;color:#4d6074!important}.template-mini .component-svg{width:13px!important;height:13px!important}.library-card,.category-button,.component-icon,.node-icon,.foundation-chip{background:transparent!important;box-shadow:none!important}.library-card{border:0!important;border-bottom:1px solid #222e3b!important;border-radius:0!important}.component-icon,.node-icon{border:0!important}.category-button[aria-pressed=true]{color:var(--blue)!important;background:transparent!important}.lane-placeholder{background:transparent!important;box-shadow:none!important}.studio-toolbar{border-top:0!important}.circuit-node{background:var(--bg)!important;background-image:none!important;box-shadow:none!important}
/* Open composition: canvas, one prompt, then a component gallery. */
.studio-workspace{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:visible!important}.canvas-column{order:0;min-width:0!important;border:0!important;width:100%!important}.component-library{order:2;width:100%!important;border:0!important;padding:32px 0 12px!important;display:grid!important;grid-template-columns:1fr auto!important;gap:16px!important;max-height:none!important}.library-title{grid-column:1;align-self:center}.component-search{grid-column:2;grid-row:1;width:260px!important}.component-categories{grid-column:1/-1;display:flex!important;flex-wrap:wrap;gap:6px!important}.category-button{width:auto!important;min-height:34px!important;padding:7px 13px!important;gap:8px!important;border:0!important;border-bottom:1px solid transparent!important;border-radius:0!important;font-size:12px!important}.category-button[aria-pressed=true]{border-bottom-color:var(--blue)!important}.category-count{font-size:9px!important;margin-left:2px!important}.library-hint{display:none!important}.component-list{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(auto-fill,minmax(175px,1fr))!important;gap:8px 20px!important;overflow:visible!important;max-height:none!important;padding:0!important}.library-card{display:flex!important;align-items:center!important;height:60px!important;min-height:60px!important;padding:9px 0!important;gap:12px!important}.library-card-copy{min-width:0}.library-card-copy strong{font-size:12px!important}.library-card-copy small{display:none!important}.component-icon{width:24px!important;height:24px!important;min-width:24px!important;flex-shrink:0}.add-component{margin-left:auto!important;background:transparent!important;border:0!important;width:27px!important;height:27px!important;color:#7f9fbf!important}.circuit-sidebar{order:1;width:100%!important;max-width:750px!important;align-self:center!important;border:0!important;padding:20px 0!important;min-height:0!important}.sidebar-tabs,.copilot-intro{display:none!important}.copilot-panel{padding:0!important;display:flex!important;flex-direction:column!important;min-height:0!important;max-height:none!important}.copilot-panel[hidden]{display:none!important}.copilot-suggestions{display:flex!important;gap:14px!important;flex-wrap:wrap!important;margin:12px 0!important;order:2}.copilot-suggestions[hidden]{display:none!important}.copilot-suggestions button{background:transparent!important;border:0!important;font-size:10px!important;padding:3px 0!important;min-height:0!important;width:auto!important;display:inline-flex!important;gap:10px!important}.circuit-chat{max-height:160px!important;overflow:auto!important;margin:0!important}.circuit-chat:empty{display:none!important}#circuit-chat-form{margin:0!important;background:transparent!important;border:1px solid #354355!important;border-radius:8px!important;padding:13px 16px!important}#circuit-prompt{min-height:44px!important;height:44px!important;padding:0!important;background:transparent!important;font-size:15px!important}#circuit-chat-form>div{padding:0!important;border:0!important}#copilot-hint{font-size:9px!important}.studio-footer{border:0!important;padding:24px 0!important}.circuit-foundation{padding:16px 0!important;border:0!important;min-height:0!important}.foundation-label{padding:0!important}.foundation-nodes{padding:10px 0 0!important}.seams-details{border:0!important}.canvas-heading{border:0!important;padding:20px 0!important}.circuit-canvas{border:0!important;min-height:290px!important;padding:0!important}.circuit-lanes{padding:0 20px!important;gap:48px!important;min-height:0!important;max-width:1100px!important;margin:auto!important}.lane-placeholder{min-height:70px!important;height:70px!important;border:0!important;padding:10px!important;max-width:200px!important;margin:30px auto 0!important;font-size:11px!important}.lane-placeholder>span{width:28px!important;height:28px!important;font-size:20px!important;border:1px solid #3b5674!important;border-radius:50%!important;margin-bottom:6px!important}.lane-placeholder small{display:none!important}.canvas-empty-note{padding:18px 0!important;margin:0!important}.canvas-empty-note>span,.canvas-empty-note>p,.canvas-empty-note>button{display:none!important}.canvas-empty-note>strong{font-size:11px!important;font-weight:400!important;color:#697e96!important}.circuit-node{min-height:88px!important;padding:12px 14px!important;border:1px solid #2a3a4e!important;border-radius:5px!important;max-width:240px!important;margin-inline:auto!important}.node-top{gap:8px!important}.node-name{font-size:13px!important;margin:7px 0 4px!important}.node-description{font-size:10px!important;display:-webkit-box!important;-webkit-line-clamp:1!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.node-category,.node-edit{display:none!important}.node-icon{width:20px!important;height:20px!important}.circuit-sidebar.showing-details{position:absolute!important;top:80px!important;right:0!important;z-index:20!important;width:320px!important;max-width:calc(100% - 24px)!important;max-height:610px!important;overflow:auto!important;background:#10151c!important;border:1px solid #364250!important;border-radius:8px!important;padding:20px!important;box-shadow:0 18px 60px #0008!important}.circuit-studio{position:relative!important}.circuit-canvas.is-empty [data-lane=process] .lane-placeholder{margin-top:175px!important}.circuit-canvas.is-empty [data-lane=input] .lane-placeholder,.circuit-canvas.is-empty [data-lane=output] .lane-placeholder{margin-top:90px!important}
@media(max-width:760px){.component-library{grid-template-columns:1fr!important}.component-search{grid-column:1!important;grid-row:2!important;width:100%!important}.component-categories{gap:3px!important}.category-button{font-size:10px!important;padding:7px!important}.component-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px 14px!important}.library-card-copy strong{font-size:11px!important}.component-categories .category-icon{display:none}.component-categories .category-count{display:none}.circuit-lanes{gap:20px!important;padding-inline:12px!important}.circuit-canvas{overflow-x:auto!important}.circuit-sidebar{max-width:100%!important}.circuit-sidebar.showing-details{right:0!important;top:80px!important}.studio-actions{gap:7px!important}.studio-actions .button{padding:10px 12px!important;font-size:10px!important}.template-card{flex-basis:180px!important}.copilot-suggestions{gap:9px!important}.circuit-templates.is-expanded{grid-template-columns:repeat(2,minmax(0,1fr))!important}.circuit-templates.is-expanded .template-card{min-width:0!important}.template-domain{font-size:7px!important}}
/* Keep the copilot beside the circuit, without an application sidebar. */
@media(min-width:1101px){.studio-workspace{display:grid!important;grid-template-columns:minmax(0,1fr) 270px!important;gap:0 34px!important;align-items:start!important}.canvas-column{grid-column:1!important;grid-row:1!important}.circuit-sidebar{grid-column:2!important;grid-row:1!important;align-self:start!important;padding-top:70px!important;max-width:270px!important}.component-library{grid-column:1/-1!important;grid-row:2!important}.circuit-sidebar.showing-details{padding:20px!important}.copilot-suggestions{display:grid!important;gap:7px!important}.copilot-suggestions button{justify-content:space-between!important;text-align:left!important;line-height:1.6!important}.studio-footer{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:20px!important}#circuit-chat-form{padding:13px!important}#circuit-prompt{height:70px!important;min-height:70px!important;font-size:13px!important}}
#circuit-chat-form{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important}#circuit-prompt{width:100%!important;min-width:0!important;flex:none!important;resize:vertical!important}#circuit-chat-form>div{width:100%!important;justify-content:space-between!important}#copilot-hint{text-align:left!important;max-width:185px!important}.circuit-sidebar{margin:0!important}.circuit-studio.is-focused{position:fixed!important;background:var(--bg)!important;inset:0!important;z-index:150!important}.circuit-studio.is-focused .studio-workspace{overflow:auto!important;min-height:0!important}.circuit-sidebar.showing-details{background:var(--bg)!important}.canvas-empty-note>strong{display:block!important}.chat-message.user{background:transparent!important}

/* Final polish: one open surface, a quiet schematic, and a compact assistant. */
.circuit-canvas.is-empty { height: 286px !important; min-height: 286px !important; overflow: hidden !important; }
.circuit-canvas.is-empty .empty-circuit-art { inset: 16px 0 auto; height: 244px; opacity: 1; }
.empty-circuit-art .empty-traces { opacity: .32; }
.empty-circuit-art .empty-main { stroke: #536b84; stroke-width: 1; }
.empty-circuit-art .empty-return { stroke: #334453; opacity: .55; }
.empty-circuit-art .empty-dot { fill: #809cb8; }
.circuit-canvas.is-empty .circuit-lanes { position: absolute; inset: 0; width: 100%; height: 250px; max-width: none !important; min-width: 0 !important; padding: 0 !important; gap: 0 !important; }
.circuit-canvas.is-empty .circuit-lane { height: 250px; border: 0; }
.circuit-canvas.is-empty .circuit-lane h4 { margin: 4px 0 0; font-size: 10px; }
.circuit-canvas.is-empty .circuit-lane .lane-placeholder { position: absolute; top: 96px; margin: 0 !important; width: min(158px, 82%) !important; max-width: none !important; height: 84px !important; min-height: 84px !important; border: 1px dashed #354250 !important; border-radius: 7px !important; background: var(--bg) !important; gap: 8px; color: #a5b5c6; }
.circuit-canvas.is-empty .lane-placeholder:hover { border-color: #8eaecf !important; color: #e1edfa; }
.circuit-canvas.is-empty .lane-placeholder::before,.circuit-canvas.is-empty .lane-placeholder::after { content: ''; position: absolute; width: 5px; height: 5px; border: 1px solid #627c94; border-radius: 50%; background: var(--bg); top: calc(50% - 3px); }
.circuit-canvas.is-empty .lane-placeholder::before { left: -3px; }
.circuit-canvas.is-empty .lane-placeholder::after { right: -3px; }
.circuit-canvas.is-empty .lane-placeholder>span { border: 0 !important; border-radius: 0 !important; width: 28px !important; height: 24px !important; margin: 0 !important; font-size: 22px !important; color: #92b5d9; }
.circuit-canvas.is-empty .lane-placeholder>.empty-core-mark { width: 42px !important; font-family: var(--mono); font-size: 21px !important; letter-spacing: -2px; }
.circuit-canvas.is-empty [data-lane=process] .lane-placeholder { border-style: solid !important; border-color: #526a82 !important; }
.circuit-canvas.is-empty .canvas-empty-note { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px 0 !important; }
.canvas-empty-note[hidden] { display: none !important; }
.circuit-lane .lane-placeholder.compact { height: 28px !important; min-height: 28px !important; margin-top: 8px !important; padding: 0 !important; }
.lane-placeholder.compact .empty-core-mark { font-size: 13px !important; font-family: var(--mono); }
.copilot-heading { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; }
.agent-symbol { display: flex; color: #a7c9ed; }
.agent-symbol svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.copilot-heading h3 { font-size: 14px; font-weight: 500; letter-spacing: -.2px; }
.copilot-heading p { font-size: 11px; line-height: 1.5; color: #7f91a5; margin-top: 3px; }
#circuit-chat-form { border-color: #343c47 !important; border-radius: 7px !important; padding: 13px !important; }
#circuit-chat-form:focus-within { border-color: #829eb9 !important; }
#circuit-prompt { height: 64px !important; min-height: 64px !important; font-size: 13px !important; line-height: 1.7; }
#circuit-prompt::placeholder { color: #8d9cad; }
#copilot-hint { display: flex; align-items: center; gap: 6px; color: #788d9b; font-size: 9px !important; }
#copilot-hint::before { content: ''; width: 4px; height: 4px; background: #9cbea9; border-radius: 50%; }
#circuit-send { width: 28px; height: 28px; font-size: 19px; background: #aecbe7; }
.copilot-suggestions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; margin: 17px 0 0 !important; }
.copilot-suggestions::before { content: 'A FEW IDEAS'; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: #637588; margin-bottom: 5px; }
.copilot-suggestions button { display: flex !important; width: 100% !important; justify-content: space-between !important; text-align: left !important; padding: 7px 0 !important; font-size: 11px !important; line-height: 1.5 !important; color: #91a4b9; }
.copilot-suggestions button span { color: #607890; }
.circuit-chat { max-height: 225px !important; margin: 0 0 14px !important; gap: 12px; padding: 0; }
.chat-message { width: 100%; max-width: 100%; padding: 0 0 0 10px; font-size: 11px; line-height: 1.75; border: 0; border-left: 1px solid #364351; border-radius: 0 !important; background: transparent; }
.chat-message.user { border-color: #6b829b; color: #d0deec; }
.chat-message.assistant { border-color: #344b40; }
.circuit-sidebar,.circuit-sidebar.showing-details { position: static !important; inset: auto !important; width: 100% !important; max-width: 750px !important; max-height: none !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 26px 0 !important; }
.details-panel { position: relative; padding: 0 !important; }
#close-inspector { position: static; display: inline-flex; width: auto; height: auto; padding: 0; margin: 0 0 20px; border: 0; border-radius: 0; color: #849aaf; font-size: 11px; line-height: 1.5; }
#close-inspector:hover { color: #d5e6f7; }
.inspector-head { padding-left: 35px; padding-right: 0; margin-bottom: 20px; min-height: 32px; }
.inspector-head .component-icon { top: 4px; width: 22px !important; height: 22px !important; }
.inspector-head .mono { font-size: 8px; letter-spacing: .05em; color: #75889c; }
.inspector-head h3 { font-size: 16px; font-weight: 500; line-height: 1.4; margin-top: 3px; }
#component-edit-form .inspector-field { margin-bottom: 14px; }
#component-edit-form .inspector-field label { font-size: 10px; color: #8598ac; margin-bottom: 6px; }
#component-edit-form input,#component-edit-form textarea { padding: 8px 10px; font-size: 13px; line-height: 1.6; background: transparent; border: 1px solid #303b47; border-radius: 5px; }
#component-edit-form input { height: 37px; }
#component-edit-form textarea { min-height: 84px; }
.details-panel .small-button { font-size: 11px; min-height: 30px; padding: 5px 9px; border-color: #374554; }
.details-panel .inspector-save { background: #c0d3e5; border-color: #c0d3e5; color: #121b24; }
.details-panel .generate-logic { width: auto; padding: 0; margin: 13px 0 0; background: transparent; border: 0; color: #9fbdd9; }
.logic-editor { margin-top: 20px; padding-top: 11px; border-color: #28313b; }
.logic-editor summary { list-style: none; display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.logic-editor summary::-webkit-details-marker { display: none; }
.logic-editor summary>span { font-size: 12px; }
.logic-editor textarea { background: transparent; border-color: #303b47; }
.inspector-seams { margin-top: 12px; }
.inspector-seams summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: 10px; color: #7c93aa; }
.inspector-seams summary::-webkit-details-marker { display: none; }
.inspector-seams summary>span { font-family: var(--mono); font-size: 9px; color: #5e758b; }
.inspector-actions { margin-top: 18px; padding-top: 11px; border-top: 1px solid #28313b; gap: 13px; }
.inspector-actions .small-button { padding: 2px 0; min-height: 24px; border: 0; color: #8196ab; font-size: 10px; }
.inspector-actions .danger { margin-left: auto; color: #c78f98; }
@media(min-width:1101px) {
  .studio-workspace { grid-template-columns: minmax(0,1fr) 286px !important; gap: 0 38px !important; }
  .circuit-sidebar,.circuit-sidebar.showing-details { padding-top: 43px !important; max-width: 286px !important; }
}
@media(max-width:760px) {
  .circuit-sidebar,.circuit-sidebar.showing-details { max-width: none !important; }
  .circuit-canvas.is-empty .circuit-lane h4 { font-size: 8px; gap: 3px; }
  .circuit-canvas.is-empty .circuit-lane h4>span { display: none; }
  .circuit-canvas.is-empty .lane-placeholder { font-size: 10px !important; }
  #component-edit-form input,#component-edit-form textarea,#circuit-prompt { font-size: 16px !important; }
  .copilot-suggestions button { white-space: normal; }
}

/* The assistant fills its column; its state stays visible while it works. */
.circuit-sidebar { align-self: stretch !important; display: flex; }
.copilot-panel { width: 100%; min-height: 370px !important; }
.copilot-heading { order: 0; position: relative; }
.circuit-chat { order: 1; flex: 1; max-height: 360px !important; }
.copilot-suggestions { order: 2 !important; margin-top: auto !important; padding-top: 12px; }
#circuit-chat-form { order: 3; margin-top: 14px !important; }
#circuit-chat-form>div { justify-content: flex-end !important; }
.copilot-heading h3,.agent-symbol,#circuit-chat-form { transition: color .25s ease, border-color .25s ease; }
#agent-state { position: absolute; left: 36px; top: 46px; font-size: 10px; color: #b8a6dc; }
#agent-state:empty { display: none; }
.copilot-panel[data-state=thinking] .copilot-heading { margin-bottom: 36px; }
.copilot-panel[data-state=thinking] .agent-symbol,.copilot-panel[data-state=thinking] h3 { color: #bdace5; }
.copilot-panel[data-state=thinking] #circuit-chat-form { border-color: #74618d !important; }
.copilot-panel[data-state=thinking] .agent-symbol { animation: agent-thought 1.6s ease-in-out infinite; }
.copilot-panel[data-state=acting] .copilot-heading { margin-bottom: 36px; }
.copilot-panel[data-state=acting] .agent-symbol,.copilot-panel[data-state=acting] h3,.copilot-panel[data-state=acting] #agent-state { color: #9bd2b7; }
.copilot-panel[data-state=acting] #circuit-chat-form { border-color: #648e78 !important; }
.agent-drag-ghost { position: fixed; z-index: 180; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid #9bd2b7; border-radius: 7px; background: var(--bg); box-shadow: 0 8px 25px #0005; color: #d3ebdf; font-family: var(--display); font-size: 12px; }
.agent-drag-ghost .component-icon { color: #9bd2b7; }
.agent-drag-ghost .component-svg { width: 20px; height: 20px; }
.agent-drag-ghost .library-card-copy small,.agent-drag-ghost .add-component { display: none; }
.circuit-node.agent-landing,.foundation-chip.agent-landing { border-color: #a0d3b9 !important; }
@keyframes agent-thought { 50% { opacity: .5; transform: scale(.94); } }
@media(min-width:1101px) {
  .studio-workspace { grid-template-columns: minmax(0,1fr) 310px !important; }
  .circuit-sidebar,.circuit-sidebar.showing-details { max-width: 310px !important; }
}
@media(max-width:1100px) {
  .copilot-panel { min-height: 300px !important; }
  .circuit-chat { flex: 0 1 auto; max-height: 300px !important; }
}
@media(prefers-reduced-motion:reduce) {
  .copilot-panel[data-state=thinking] .agent-symbol { animation: none; }
}
.circuit-canvas.is-empty .circuit-lanes { margin: 0 !important; }
.details-panel { width: 100%; }
.circuit-wires .wire-signal { fill: none; stroke: none; }

body.studio-focused { overflow: hidden; }
.studio-clear { width: auto; gap: 6px; padding: 0 9px; font-size: 11px; }
.studio-clear>span { font-size: 17px; }
@media(max-width:760px) { .studio-clear { width: auto; font-size: 10px; padding-inline: 5px; } .studio-identity input { max-width: 160px; } }

/* Quiet live events travel through the same connections as the circuit. */
.circuit-wires .wire-signal { fill: none; stroke: #85baff; stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 100; opacity: 0; }
.circuit-node { transition: border-color .25s ease, box-shadow .25s ease; }
.circuit-node.signal-active { border-color: #8abfff !important; box-shadow: 0 0 14px #6daaff15 !important; }
.circuit-node.signal-active .node-status::before { background: #91c1ff; box-shadow: 0 0 7px #85baff65; }
.circuit-node.signal-active .node-port { background: #b4d7ff; }
.circuit-node.signal-active .node-icon { color: #add2ff; }
@media(prefers-reduced-motion:reduce) { .circuit-node { transition: none; } }
.studio-workspace { grid-auto-rows: max-content !important; align-content: start !important; }
.circuit-sidebar { min-height: auto !important; }
.agent-drag-ghost.library-card { padding: 10px 14px !important; border: 1px solid #83bda0 !important; border-radius: 6px !important; background: var(--bg) !important; box-shadow: 0 10px 28px #0005 !important; }

/* Show a component's core connections beside its identity. */
.inspector-header-seams { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 12px 0 0 -35px; }
.inspector-seam-label { font-family: var(--mono); font-size: 8px; letter-spacing: .06em; color: #71869a; margin-right: 3px; }
.inspector-seam-tag { display: inline-flex; align-items: center; gap: 5px; min-height: 23px; padding: 3px 6px; border: 1px solid #303d4c; border-radius: 4px; background: transparent; color: #a6bed6; font-size: 9px; line-height: 1.4; transition: border-color .2s, color .2s; }
.inspector-seam-tag>span { font-family: var(--mono); font-size: 8px; color: #708aa3; }
.inspector-seam-tag:hover,.inspector-seam-tag[aria-pressed=true] { border-color: #688bac; color: #d1e5fa; }
.inspector-seam-note { margin: 9px 0 0 -35px; color: #93a8bc; font-size: 11px; line-height: 1.6; }

/* Drop affordances only appear while a component is being carried. */
.storage-drop-hint { margin-left: 14px; margin-right: auto; font-size: 10px; line-height: 1.6; color: #bbcaab; }
.storage-layer.drop-ready { border-top-color: #6e8d9f; }
.storage-layer.drop-ready .native-store { border-color: #8cae9e; }
.storage-layer.drag-over .native-store { border-color: #c1e1c9; outline: 1px solid #c1e1c92b; outline-offset: 3px; }
.circuit-lane.drop-ready { border-color: #54718b; border-style: dashed; }
.circuit-foundation.drop-ready .foundation-label { color: #accde8; }
.circuit-foundation.drop-ready { outline: 1px dashed #48637b; outline-offset: 4px; }
.is-dragging-replication .circuit-lane.drop-ready { border-color: #8daece; }
@media(max-width:760px) { .infrastructure-heading:has(.storage-drop-hint:not([hidden])) { flex-wrap: wrap; gap: 8px; } .storage-drop-hint { order: 3; width: 100%; margin: 0; font-size: 10px; } }

/* Storage is infrastructure; replication gives every component a stacked silhouette. */
.library-title { grid-column: 1 / -1 !important; }
[data-color="storage"] { --component-color: #8daec5; }
[data-color="integrity"] { --component-color: #d2bd94; }
.replica-surface { position: relative; }
.replica-layers { display: none; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.is-replicated .replica-layers { display: block; }
.replica-layers i { position: absolute; inset: 0; border: 1px solid #526d86; border-radius: inherit; opacity: .85; transform: translate(6px,-6px); clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - 6px) 100%,calc(100% - 6px) 6px,0 6px); }
.replica-layers i+i { opacity: .55; transform: translate(12px,-12px); clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - 12px) 100%,calc(100% - 12px) 12px,0 12px); }
.is-replicated .circuit-lane h4 { margin-bottom: 26px; }
.is-replicated .lane-nodes { gap: 23px; }
.replication-status { display: inline-flex; align-items: center; color: #8eacc4; font-family: var(--mono); font-size: 9px; margin-left: auto; }
.replication-status::before { content: '×3'; font-family: var(--display); font-size: 11px; color: #b2d1eb; margin-right: 7px; }
.storage-layer { margin-top: 18px; padding: 17px 0 14px; border-top: 1px solid #26303b; }
.infrastructure-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.infrastructure-heading>.mono { color: #788da3; font-size: 9px; }
.infrastructure-heading .builder-text-button { font-size: 10px; padding: 0; color: #89a0b7; }
.infrastructure-heading .builder-text-button>span { font-size: 15px; }
.storage-rail { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 5px 11px 4px 0; }
.native-store { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #354351; border-radius: 5px; color: #9bb3ca; }
.native-store>.component-svg { width: 24px; height: 24px; }
.native-store strong,.storage-capability strong { display: block; font-size: 11px; font-weight: 400; color: #b8cadb; line-height: 1.5; }
.native-store small,.storage-capability small { display: block; font-size: 9px; color: #748b9f; line-height: 1.5; margin-top: 3px; }
.native-store-tag { font-family: var(--mono); font-size: 7px; color: #5d778e; margin-left: 8px; }
.storage-nodes { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.storage-branch { display: flex; align-items: center; gap: 13px; }
.storage-link { color: #506980; font-size: 15px; }
.storage-capability { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: transparent; border: 1px solid #344554; border-radius: 5px; text-align: left; cursor: grab; }
.storage-capability-icon { color: #8faec5; }
.storage-capability:hover,.storage-capability.selected { border-color: #91b1d0; }
.integrity-nodes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 17px; }
.integrity-label { color: #7a8490; font-family: var(--mono); font-size: 8px; margin-right: 3px; }
.foundation-chip { gap: 7px; }
.foundation-chip .foundation-chip-icon { color: var(--component-color,#97bada); }
.foundation-chip .foundation-chip-name { font-size: 10px; color: #a4c0db; }
.foundation-chip .foundation-chip-arrow { color: #6985a1; font-size: 11px; }
.is-replicated .foundation-nodes { gap: 12px !important; }
.is-replicated .integrity-nodes { padding-top: 5px; gap: 14px; }
@media(max-width:760px) {
  .storage-rail { align-items: flex-start; gap: 14px; }
  .storage-nodes { gap: 14px; }
  .native-store { width: 100%; }
  .replication-status { margin-left: 0; }
  .studio-actions { flex-wrap: wrap; }
  .studio-actions .button { flex: 1 1 calc(50% - 8px); }
}

.replication-status::before { content: none; }

/* Three quiet lines of example activity, on the same open page surface. */
.node-with-stream { min-width: 0; width: 100%; max-width: 240px; margin-inline: auto; }
.node-with-stream>.circuit-node { width: 100%; }
.node-stream { margin: 10px 0 2px; min-width: 0; text-align: left; user-select: none; }
.stream-heading { font: 7px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #5f748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.stream-rows { position: relative; height: 66px; overflow: hidden; mask-image: linear-gradient(transparent, #000 9px, #000 100%); }
.stream-row { position: absolute; inset-inline: 0; height: 22px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #21314370; font: 9px/1.4 var(--mono); color: #a0cbf2; }
.stream-row::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: #8cbeef; flex-shrink: 0; }
.stream-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.stream-detail { max-width: 43%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; color: #8aa3ba; }
.stream-waiting { position: absolute; bottom: 8px; font-size: 9px; color: #52677c; }
[data-lane="output"] .stream-row { color: #a1c7d8; }
@media(max-width:760px) { .node-with-stream { max-width: 176px; } .stream-row { font-size: 8px; gap: 5px; } .stream-detail { max-width: 32%; font-size: 7px; } }
@media(max-width:1100px) {
  .circuit-studio.is-focused .studio-workspace > * { flex-shrink: 0; }
  .circuit-studio.is-focused .canvas-column { overflow: visible; }
}
@media(max-width:760px) {
  .circuit-studio.is-focused .studio-actions .button { flex: 1 1 calc(50% - 8px); }
}
.stream-row[data-position="1"] { color: #b6dafa; }
.stream-row[data-position="1"] .stream-detail { color: #a4bdd2; }
.stream-row[data-position="1"]::before { box-shadow: 0 0 5px #8cbeef55; }
@media(max-width:760px) {
  [data-lane="input"] .stream-label { font-size: 8px; }
}
:is([data-lane="input"],[data-lane="output"]) .lane-placeholder.compact { margin-top: 24px !important; }
.node-with-code { min-width: 0; }
.node-code-preview { margin: 12px 0 3px; min-width: 0; position: relative; }
.node-code-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0; margin-bottom: 9px; border: 0; background: transparent; color: #738599; cursor: pointer; font-family: var(--mono); font-size: 8px; letter-spacing: .045em; }
.node-code-heading span:last-child { color: #94b6d1; font-size: 8px; letter-spacing: 0; }
.node-code-heading:hover { color: #b6dafa; }
.node-code-heading:focus-visible { outline: 1px solid #8cbeef; outline-offset: 5px; }
.node-code-preview pre { margin: 0; padding: 0; background: transparent; border: 0; color: #9aafc1; font-family: var(--mono); font-size: 8px; line-height: 1.8; text-align: left; }
.node-code-preview code { font: inherit; }
.node-code-preview code>span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.node-code-preview code>span:first-child { color: #baafd7; }
.node-code-more { display: block; color: #63768b; font-family: var(--mono); font-size: 10px; line-height: 1; margin-top: 2px; }
.node-with-code+.node-with-code { margin-top: 4px; }
.library-card[data-module-drag] { touch-action: none; -webkit-user-select: none; user-select: none; }
.node-runtime { position: absolute; top: 6px; right: 8px; color: #7e8c9a; font-family: var(--mono); font-size: 7px; font-weight: 400; letter-spacing: .015em; line-height: 1.2; opacity: .8; pointer-events: none; }
.circuit-node.signal-active .node-runtime { color: #abcbea; }