.sf-graph-canvas .react-flow{--xy-background-color:var(--app-canvas);--xy-background-pattern-dots-color:var(--app-line);--xy-edge-stroke:var(--ink-soft);--xy-edge-stroke-selected:var(--ink);--xy-edge-label-background-color:var(--app-canvas);--xy-edge-label-color:var(--ink);--xy-controls-button-background-color:var(--app-panel);--xy-controls-button-background-color-hover:var(--app-row-hover);--xy-controls-button-color:var(--ink);--xy-controls-button-border-color:var(--app-line);--xy-minimap-background-color:var(--app-panel);--xy-minimap-mask-background-color:color-mix(in oklch, var(--app-canvas) 75%, transparent);--xy-minimap-node-background-color:var(--ink-soft)}.sf-graph-canvas .react-flow__attribution{background:var(--app-canvas);font-size:.625rem}.sf-graph-canvas .react-flow__attribution a{color:var(--ink-soft)}.sf-graph-canvas .react-flow__node{border-radius:8px;width:160px}.sf-graph-canvas .react-flow__node:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.sf-graph-node .react-flow__handle{opacity:0;pointer-events:none;top:19px}.sf-graph-node .react-flow__handle-left{left:61px}.sf-graph-node .react-flow__handle-right{right:61px}.sf-graph-edge .react-flow__edge-path{stroke-width:1.1px;opacity:.38}.sf-graph-edge.is-unresolved .react-flow__edge-path{stroke-dasharray:5 5}.sf-graph-edge.is-highlighted .react-flow__edge-path{opacity:1;stroke-width:1.8px;stroke:var(--ink)}.sf-graph-edge .react-flow__edge-text{font-size:.625rem}@layer components{.sf-graph-canvas .sf-graph-minimap{border:1px solid var(--app-line);border-radius:6px;width:128px;height:84px;bottom:14px}.sf-graph-node{text-align:center;cursor:pointer;flex-direction:column;align-items:center;width:160px;font-size:.75rem;line-height:1.35;display:flex;position:relative}.sf-graph-node-dot{width:38px;height:38px;color:var(--sf-node-color);border:1.5px solid var(--sf-node-color);background:color-mix(in oklch, var(--sf-node-color) 12%, var(--app-canvas));border-radius:50%;place-items:center;transition:background .15s ease-out;display:grid}.sf-graph-node:hover .sf-graph-node-dot,.sf-graph-node.is-selected .sf-graph-node-dot{background:color-mix(in oklch, var(--sf-node-color) 25%, var(--app-canvas))}.sf-graph-node.is-selected .sf-graph-node-dot{outline:2px solid var(--sf-node-color);outline-offset:4px}.sf-graph-node.is-external .sf-graph-node-dot{border-style:dashed}.sf-graph-node-name{text-overflow:ellipsis;white-space:nowrap;max-width:160px;color:var(--ink);background:var(--app-canvas);border-radius:4px;margin-top:8px;padding:1px 4px;font-weight:500;overflow:hidden}.sf-graph-node-kind{color:var(--ink-soft);background:var(--app-canvas);padding:0 4px;font-size:.625rem}.sf-family-code{--sf-node-color:color-mix(in oklch, var(--chart-1) 78%, var(--ink))}.sf-family-automation{--sf-node-color:color-mix(in oklch, var(--chart-3) 78%, var(--ink))}.sf-family-data{--sf-node-color:color-mix(in oklch, var(--chart-2) 78%, var(--ink))}.sf-family-experience{--sf-node-color:color-mix(in oklch, var(--chart-4) 78%, var(--ink))}.sf-family-access{--sf-node-color:color-mix(in oklch, var(--chart-5) 78%, var(--ink))}.sf-family-metadata{--sf-node-color:var(--ink-soft)}.sf-graph-dot{background:var(--sf-node-color,var(--ink-soft));border-radius:50%;flex:0 0 7px;width:7px;height:7px;display:inline-block}}.sf-graph-page :is(button,select,summary):focus-visible,.sf-graph-sidebar :is(button,select):focus-visible{outline:2px solid var(--ink);outline-offset:2px}@media (width<=900px){.sf-graph-canvas .sf-graph-minimap{display:none}}@media (pointer:coarse){.sf-graph-page button,.sf-graph-page select,.sf-graph-sidebar button,.sf-graph-sidebar select{min-height:44px}}@media (prefers-reduced-motion:reduce){.sf-graph-node-dot{transition:none}}
