/* SuperIntelligence node canvas styles — shared by live.superintel.com and superintel.com/me */
:root{--bg:#161616;--layer:#1c1c1c;--layer2:#262626;--layer3:#2e2e2e;--text:#f4f4f4;--t2:#c6c6c6;--t3:#8d8d8d;--link:#78a9ff;--blue:#0f62fe;--rule:#393939;--ok:#42be65;--warn:#f1c21b;--bad:#ff8389;--green:#42be65;--red:#ff8389;--bstrong:#525252}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(66,190,101,.6)}70%{box-shadow:0 0 0 10px rgba(66,190,101,0)}100%{box-shadow:0 0 0 0 rgba(66,190,101,0)}}
.node{background:var(--layer2);border:1px solid var(--rule);padding:12px 10px;min-height:118px;position:relative;transition:box-shadow .2s,border-color .2s}
.node.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 0 24px rgba(15,98,254,.35)}
.node .n{font-family:"IBM Plex Mono",Menlo,monospace;font-size:.68rem;color:var(--link);letter-spacing:.14em}
.node b{display:block;font-weight:500;font-size:.88rem;margin:.3rem 0 .2rem;line-height:1.25}
.node p{margin:0;color:var(--t3);font-size:.74rem;line-height:1.35}
.node::after{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:.8rem;background:var(--layer);padding:0 1px}
.node:last-child::after{content:""}
.node::after{content:""}
@keyframes in{from{background:rgba(15,98,254,.25)}to{background:transparent}}
.canvas{position:relative;height:60vh;min-height:420px;border:1px solid var(--rule);background:var(--bg);overflow:hidden;cursor:grab;margin-bottom:20px}
.canvas svg.graph{width:100%;height:100%;display:block}
.canvas svg.dragging{cursor:grabbing}
.canvas .legend{position:absolute;left:12px;bottom:10px;display:flex;gap:1rem;font-family:"IBM Plex Mono",Menlo,monospace;font-size:.7rem;color:var(--t3);pointer-events:none}
.canvas .legend i{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:-1px;margin-right:.35rem}
.group{fill:rgba(255,255,255,.02);stroke:var(--border);stroke-dasharray:4 4}
.group-l{fill:var(--t3);font-size:11px;letter-spacing:.32px;text-transform:uppercase;font-family:"IBM Plex Mono",Menlo,monospace}
.edge{fill:none;stroke:#4c4c4c;stroke-width:1.2;transition:stroke .2s,stroke-width .2s}
.edge.dashed{stroke-dasharray:5 4}
.edge.hot{stroke:var(--link);stroke-width:2}
.edge:hover{stroke:var(--text)}
.elabel{fill:var(--t3);font-family:"IBM Plex Mono",Menlo,monospace;font-size:9.5px;pointer-events:none}
.node{cursor:default}
.node .box{fill:var(--layer);stroke:var(--border);transition:fill .2s}
.node:hover .box{fill:var(--layer2)}
.node .rule{fill:var(--bstrong)}
.node.svc .rule{fill:var(--blue)}
.node.hard .rule{fill:var(--purple)}
.node.state .rule{fill:var(--teal)}
.node.ext .rule{fill:var(--t3)}
.node.tenant .rule{fill:#33b1ff}
.node.ext .box{stroke-dasharray:4 3}
.node .nl{fill:var(--text);font-size:13px;font-weight:600}
.node .ns{fill:var(--t2);font-size:10px}
.node .nc{fill:var(--t3);font-family:"IBM Plex Mono",Menlo,monospace;font-size:10px}
.node .dot{fill:var(--bstrong)}
.node.s-ok .dot{fill:var(--green)}
.node.s-bad .dot{fill:var(--red)}
.node.s-warn .dot{fill:var(--warn)}
.node.pulse .box{fill:#2a3550;stroke:var(--link)}
.badge rect{fill:var(--green-bg);stroke:var(--green)}
.badge text{fill:var(--green);font-size:9px;font-weight:600;letter-spacing:.4px;font-family:"IBM Plex Mono",Menlo,monospace}
.packet circle{fill:var(--link)}
.packet.answer circle{fill:var(--green)}
.packet.fail circle{fill:var(--red)}
.packet.memory circle{fill:var(--warn)}
.packet .glyph{fill:#000}
.packet.done{opacity:0;transition:opacity .35s}
.packet.burst circle{animation:pburst .5s ease}
@keyframes pburst{0%{r:6}50%{r:14;opacity:.5}100%{r:6}}
@keyframes prise{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-18px)}}