.flow{--edge:#9aa1ae;position:relative}.flow-canvas{width:100%}.flow-svg{width:100%;height:auto;font-family:var(--font-body);margin:0 auto;display:block;overflow:visible}.flow:not(.is-seen) .flow-svg{visibility:hidden}.flow-hint{font-family:var(--font-mono);color:var(--ink-2);text-align:center;margin-top:14px;font-size:13px}.flow-top{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 18px;margin-bottom:14px;display:flex}.flow-top:has(.flow-headline[hidden]):has(.flow-status:empty){display:none}.flow-headline{font-family:var(--font-display);letter-spacing:-.02em;font-size:clamp(20px,2.4vw,26px);font-weight:800;line-height:1.15}.flow-status{font-family:var(--font-mono);color:var(--accent);font-size:13px}.flow-status:empty{display:none}.flow.is-loading .flow-status:after{content:"_";animation:1s step-end infinite flow-blink}@keyframes flow-blink{50%{opacity:0}}@keyframes flow-march{to{stroke-dashoffset:-28px}}@keyframes flow-breathe{50%{opacity:.55}}.flow.is-loading .flow-box{stroke:var(--accent);stroke-dasharray:8 6;animation:.9s linear infinite flow-march}.flow.is-loading .flow-title,.flow.is-loading .flow-sub{animation:1.4s ease-in-out infinite flow-breathe}.flow.is-loading .flow-node{pointer-events:none}.flow.is-update .flow-node.is-retitled :is(.flow-title,.flow-sub,.flow-tag){animation:.52s ease-out .2s both flow-retitle}@keyframes flow-retitle{0%{opacity:0;transform:translateY(4px)}}.flow-lane{font-family:var(--font-mono);fill:var(--ink-2);font-size:11px}.flow-line{fill:none;stroke:var(--edge);stroke-width:1.5px;stroke-dasharray:1}.flow-dash{fill:none;stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:3 9;stroke-linecap:round;opacity:0}.flow-arrow{fill:var(--edge)}.flow-edge{transition:opacity .18s}.flow-label{opacity:0;pointer-events:none;transition:opacity .18s}.flow-label.is-shown{opacity:1}.flow-label rect{fill:#fff;stroke:var(--line);stroke-width:1px}.flow-label text{font-family:var(--font-mono);fill:var(--ink-2);font-size:10px}.flow-node{cursor:pointer;outline:none;transition:transform .52s cubic-bezier(.2,.8,.2,1),opacity .18s}.flow-node-in{transition:transform .16s}.flow-box{fill:#fff;stroke:var(--ink);stroke-width:1.5px}.flow-shadow{fill:var(--ink)}.flow-ring{fill:none;stroke:var(--accent);stroke-width:3px;opacity:0}.flow-node:focus-visible .flow-ring{opacity:1}.flow-tag{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;fill:var(--ink-2);font-size:9.5px}.flow-pts{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;fill:var(--accent);font-size:9.5px;font-weight:500}.flow-title{fill:var(--ink);font-size:15px;font-weight:600}.flow-sub{font-family:var(--font-mono);fill:var(--ink-2);font-size:11px}.flow-badge rect{fill:var(--hi);stroke:var(--ink);stroke-width:1px}.flow-badge text{fill:var(--ink);font-size:11px;font-weight:500}.flow-node:hover .flow-node-in,.flow-node.is-open .flow-node-in{transform:translate(-2px,-2px)}.flow-node[data-kind=actor] .flow-box{fill:var(--hi)}.flow-node[data-kind=screen] .flow-shadow{fill:var(--accent)}.flow-node:is([data-tag=view],[data-tag=workflow]) .flow-box,.flow-node[data-kind=output] .flow-box{fill:var(--soft)}.flow-node[data-kind=hub] .flow-box{fill:var(--accent)}.flow-node[data-kind=hub] .flow-title{font-family:var(--font-display);letter-spacing:-.01em;font-weight:800}.flow-node[data-kind=hub] :is(.flow-title,.flow-tag,.flow-sub,.flow-pts){fill:#fff}.flow-node[data-kind=hub] .flow-pts{fill:var(--hi)}.flow-node[data-kind=external] .flow-box{fill:var(--ink)}.flow-node[data-kind=external] .flow-shadow{fill:var(--accent)}.flow-node[data-kind=external] .flow-title{fill:#fff}.flow-node[data-kind=external] :is(.flow-tag,.flow-sub){fill:#b8bfcc}.flow-node[data-kind=external] .flow-pts{fill:var(--hi)}.flow-svg.is-dim .flow-node:not(.is-on){opacity:.28}.flow-svg.is-dim .flow-edge:not(.is-on){opacity:.12}.flow-svg.is-dim .flow-label:not(.is-on){opacity:0}.flow-svg.is-dim .flow-label.is-on{opacity:1}.flow-edge.is-on .flow-line{stroke:var(--ink);stroke-width:2px}.flow-edge.is-on .flow-arrow{fill:var(--ink)}.flow-edge.is-on .flow-dash{stroke-width:2px}.flow-label.is-on rect{stroke:var(--ink)}.flow-label.is-on text{fill:var(--ink)}@keyframes flow-in{0%{opacity:0;transform:translate(-10px,6px)scale(.96)}}@keyframes flow-in-v{0%{opacity:0;transform:translateY(-10px)scale(.96)}}@keyframes flow-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes flow-show{0%{opacity:0}}@keyframes flow-run{0%{stroke-dashoffset:24px}to{stroke-dashoffset:0}}.flow.is-intro .flow-node-in{animation:flow-in .42s cubic-bezier(.2, .8, .2, 1) var(--d) both;transform-box:fill-box;transform-origin:50%}.flow.is-intro[data-orientation=vertical] .flow-node-in{animation-name:flow-in-v}.flow.is-intro .flow-line{animation:flow-draw .52s ease-out var(--d) both}.flow.is-intro .flow-arrow{animation:flow-show .16s ease-out calc(var(--d) + .44s) both}.flow.is-intro .flow-label.is-shown{animation:flow-show .24s ease-out var(--d) both}.flow.is-update .flow-node.is-new .flow-node-in{transform-box:fill-box;transform-origin:50%;animation:.38s cubic-bezier(.2,.8,.2,1) .12s both flow-in}.flow.is-update .flow-line{animation:.42s ease-out .14s both flow-draw}.flow.is-update .flow-arrow{animation:.16s ease-out .48s both flow-show}.flow-dash{animation:1.1s linear infinite flow-run}.flow.is-seen .flow-dash{opacity:.85;transition:opacity .4s 1.1s}.flow-svg.is-dim .flow-edge:not(.is-on) .flow-dash{opacity:0}@media (prefers-reduced-motion:reduce){.flow *,.flow :before,.flow :after{transition:none!important;animation:none!important}.flow-dash{display:none}.flow-node:hover .flow-node-in,.flow-node.is-open .flow-node-in{transform:none}}.flow-card{z-index:5;border:var(--border);max-width:calc(100% - 16px);box-shadow:5px 5px 0 var(--ink);background:#fff;border-radius:14px;padding:18px 18px 16px;font-size:14px;line-height:1.45;position:absolute}.flow-card:focus{outline:none}.flow-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.flow-card-x{border:var(--border);cursor:pointer;background:#fff;border-radius:9px;place-items:center;width:32px;height:32px;padding:0;display:grid;position:absolute;top:10px;right:10px}.flow-card-x:hover{background:var(--soft)}.flow-card-tag{font-family:var(--font-mono);color:var(--ink-2);font-size:12px}.flow-card-title{font-family:var(--font-display);letter-spacing:-.02em;margin:4px 40px 2px 0;font-size:22px;font-weight:800;line-height:1.1}.flow-card-sub{font-family:var(--font-mono);color:var(--ink-2);font-size:12px}.flow-card-desc{color:var(--ink);margin-top:10px}.flow-card-feats{border-top:1.5px solid var(--ink);margin:12px 0 0;padding:0;list-style:none}.flow-card-feats li,.flow-card-total{border-bottom:1px solid var(--line);justify-content:space-between;gap:12px;padding:7px 0;display:flex}.flow-card .pts{font-family:var(--font-mono);white-space:nowrap;color:var(--accent);font-size:12px}.flow-card-total{border-bottom:0;font-weight:600}.flow-card-total .pts{color:var(--ink);background:var(--hi);border-radius:4px;padding:0 6px}.flow-card-note{font-family:var(--font-mono);color:var(--ink-2);margin-top:12px;font-size:12px}