.graph-explorer{--ge-accent: var(--sl-color-accent);position:relative;margin:1.5rem 0;background:var(--sl-color-bg-sidebar);border:1px solid var(--sl-color-gray-5);border-radius:14px;padding:16px 18px 18px}.graph-explorer .ge-title{font:600 16px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-text);letter-spacing:-.005em;margin-bottom:12px}.graph-explorer .ge-tabs[hidden]{display:none}.graph-explorer .ge-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.graph-explorer .ge-tab{display:inline-flex;align-items:center;gap:7px;font:600 14px ui-sans-serif,system-ui,sans-serif;padding:6px 12px 6px 10px;border:1px solid var(--sl-color-hairline);border-radius:7px;background:var(--sl-color-bg);color:var(--sl-color-text);cursor:pointer;transition:color .14s,background-color .14s,border-color .14s}.graph-explorer .ge-tab:hover{border-color:var(--ge-accent);background:color-mix(in srgb,var(--ge-accent) 8%,var(--sl-color-bg))}.graph-explorer .ge-tab:focus-visible{outline:2px solid var(--ge-accent);outline-offset:2px}.graph-explorer .ge-tab[data-playing=true]{background:var(--ge-accent);color:#fff;border-color:var(--ge-accent)}.graph-explorer .ge-tab svg{width:13px;height:13px;flex:0 0 auto}.graph-explorer .ge-tab .ge-icon-pause,.graph-explorer .ge-tab[data-playing=true] .ge-icon-play{display:none}.graph-explorer .ge-tab[data-playing=true] .ge-icon-pause{display:inline}.graph-explorer .ge-stage{position:relative;background:var(--sl-color-bg);border:1px solid var(--sl-color-hairline);border-radius:10px;min-height:220px;padding:16px;display:flex;justify-content:center;align-items:center;overflow:auto}.graph-explorer .ge-stage[data-ge-state=loading]:after{content:"Laying out…";position:absolute;inset:0;display:grid;place-items:center;font:500 12px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-gray-4);pointer-events:none}.graph-explorer .ge-stage[data-ge-state=error]{justify-content:stretch;align-items:stretch}.graph-explorer .ge-stage svg{max-width:100%;height:auto}.graph-explorer .ge-stage g.node{cursor:pointer}.graph-explorer .ge-stage g.node:hover>rect,.graph-explorer .ge-stage g.node:hover>polygon,.graph-explorer .ge-stage g.node:hover>circle,.graph-explorer .ge-stage g.node:hover>ellipse,.graph-explorer .ge-stage g.node:hover>path{stroke:var(--ge-accent);stroke-width:2px}.graph-explorer .ge-stage g.node.is-active>rect,.graph-explorer .ge-stage g.node.is-active>polygon,.graph-explorer .ge-stage g.node.is-active>circle,.graph-explorer .ge-stage g.node.is-active>ellipse,.graph-explorer .ge-stage g.node.is-active>path{fill:var(--ge-accent)!important;stroke:var(--ge-accent)!important}.graph-explorer .ge-stage g.node.is-active foreignObject *,.graph-explorer .ge-stage g.node.is-active .nodeLabel,.graph-explorer .ge-stage g.node.is-active .nodeLabel *{color:#fff!important;fill:#fff!important}.graph-explorer .ge-stage g.edgeLabel.ge-clickable{cursor:pointer}.graph-explorer .ge-stage g.edgeLabel.ge-clickable foreignObject *,.graph-explorer .ge-stage g.edgeLabel.ge-clickable .edgeLabel{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ge-accent) 50%,transparent);text-underline-offset:3px;transition:color .14s,text-decoration-color .14s}.graph-explorer .ge-stage g.edgeLabel.ge-clickable:hover foreignObject *,.graph-explorer .ge-stage g.edgeLabel.ge-clickable:hover .edgeLabel{color:var(--ge-accent)!important;text-decoration-color:var(--ge-accent)}.graph-explorer .ge-stage g.edgeLabel.is-active.is-active foreignObject .labelBkg{background:var(--ge-accent)!important;border-radius:4px}.graph-explorer .ge-stage g.edgeLabel.is-active.is-active foreignObject .edgeLabel,.graph-explorer .ge-stage g.edgeLabel.is-active.is-active foreignObject p{background:transparent!important}.graph-explorer .ge-stage g.edgeLabel.is-active.is-active foreignObject *,.graph-explorer .ge-stage g.edgeLabel.is-active.is-active foreignObject .edgeLabel{color:#fff!important;text-decoration:none!important}.graph-explorer .ge-stage g.edgePaths>path.is-active{stroke:var(--ge-accent)!important;stroke-width:2.5px!important}.graph-explorer .ge-panel[hidden]{display:none}.graph-explorer .ge-panel{margin-top:12px;background:var(--sl-color-bg);border:1px solid var(--sl-color-hairline);border-radius:10px;padding:12px 14px}.graph-explorer .ge-panel-head{display:flex;align-items:center;gap:10px;font:600 15px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sl-color-text);padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--sl-color-hairline)}.graph-explorer .ge-panel-kind{display:inline-flex;align-items:center;font:600 11px ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--ge-accent);background:color-mix(in srgb,var(--ge-accent) 12%,transparent);border-radius:999px;padding:3px 9px}.graph-explorer .ge-panel-arrow,.graph-explorer .ge-panel-edge-label{color:var(--sl-color-gray-3);font-weight:400}.graph-explorer .ge-panel-placeholder{color:var(--sl-color-gray-3);font-style:italic;font-weight:400}.graph-explorer .ge-panel-body{font:400 15.5px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-text);line-height:1.6}.graph-explorer .ge-panel-body>*:first-child{margin-top:0}.graph-explorer .ge-panel-body>*:last-child{margin-bottom:0}.graph-explorer .ge-panel-body p{margin:0 0 .6em}.graph-explorer .ge-panel-body code{font-size:.92em;background:var(--sl-color-bg-sidebar);border:1px solid var(--sl-color-hairline);border-radius:4px;padding:0 4px}.graph-explorer .ge-panel-body pre{background:var(--sl-color-bg-sidebar);border:1px solid var(--sl-color-hairline);border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:13.5px;line-height:1.55}.graph-explorer .ge-panel-body ul{padding-left:1.1em;margin:0 0 .6em}