:where(.flow-map-surface){position:relative;width:100%;height:100%;min-height:280px;isolation:isolate;overflow:hidden;background-color:#fafbfe;background-image:radial-gradient(#ccd1df 0.75px,transparent 0.75px);background-size:19px 19px}
:where(.flow-map-surface.compact){min-height:140px;background-color:#f7f8fc;background-image:radial-gradient(#d9dce7 .65px,transparent .65px);background-size:14px 14px;pointer-events:none}
.af-map{display:block;width:100%;height:100%;min-height:280px;max-width:none;user-select:none;touch-action:none;cursor:grab;font-family:Inter,Segoe UI,Arial,sans-serif}
.af-map.thumbnail{min-height:140px;cursor:inherit}
.af-map.panning{cursor:grabbing}
.af-node{cursor:pointer;outline:none;transition:opacity .2s ease}
.af-node-shadow{fill:#29375806;pointer-events:none}
.af-node-body{fill:#fff;stroke:#e0e4ed;stroke-width:1.3;transition:stroke .15s,fill .15s}
.af-node:hover .af-node-body,.af-node:focus-visible .af-node-body{stroke:#a18bcd;stroke-width:2}
.af-node.selected .af-node-body,.af-node.highlighted .af-node-body{stroke:#9678d9;stroke-width:2.3;fill:#fdfbff}
.af-node.highlighted .af-node-shadow{fill:#9874da19}
.af-node-name{fill:#283142;font-size:13px;font-weight:600;letter-spacing:-.2px}
.af-node-role{fill:#8590a0;font-size:9.8px;font-weight:400}
.af-node-description{fill:#748091;font-size:9.8px;font-weight:400}
.af-node-status{fill:#556276;font-size:9.8px;font-weight:500}
.af-node-source{fill:#9199a7;font-weight:400}
.af-node-add{opacity:0;transition:opacity .15s;color:#8168ba;outline:none}
.af-node-add circle{fill:#fff;stroke:#b6a2dd;stroke-width:1.3}
.af-node-add path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.af-node:hover .af-node-add,.af-node:focus-within .af-node-add,.af-node.selected .af-node-add,.af-node-add:focus-visible{opacity:1}
.af-node-add:hover circle,.af-node-add:focus-visible circle{fill:#ede6fc;stroke:#8168ba;stroke-width:2}
.af-edge{outline:none;cursor:pointer;transition:opacity .2s ease}
.af-edge-line{fill:none;stroke:#bbc2d0;stroke-width:1.3;stroke-linecap:round;pointer-events:none}
.af-edge-hit{fill:none;stroke:transparent;stroke-width:15;pointer-events:stroke}
.af-edge:hover .af-edge-line,.af-edge:focus-visible .af-edge-line{stroke:#9c85c8;stroke-width:2.5}
.journey .af-edge-line{stroke:#a490c4;stroke-width:1.8}
.af-edge.selected .af-edge-line,.af-edge.highlighted .af-edge-line{stroke:#8064c6;stroke-width:2.6}
.af-edge-label{pointer-events:none}
.af-edge-label rect{fill:#fafbfe;stroke:#e4dced;stroke-width:.7}
.af-edge-label text{font-family:Inter,Segoe UI,Arial,sans-serif;font-size:8.7px;fill:#8a789f;font-weight:450}
.af-edge.selected .af-edge-label rect,.af-edge.highlighted .af-edge-label rect{fill:#f3edfc;stroke:#b7a1d7}
.af-node.dimmed{opacity:.38}
.af-edge.dimmed{opacity:.25}
.af-map-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none;padding:30px;text-align:center}
.af-map-empty>div{display:grid;place-items:center;width:65px;height:65px;background:#efeafa;border:1px solid #e4d9f8;border-radius:18px;margin-bottom:7px;color:#8b73b8}
.af-map-empty strong{font-size:17px;color:#394257;font-weight:550;letter-spacing:-.4px}
.af-map-empty span{font-size:12px;color:#8790a0}
@media(pointer:coarse){.af-node-add{opacity:1}}
@media(prefers-reduced-motion:reduce){.af-node,.af-edge,.af-node-body,.af-node-add{transition:none}}