.flow{margin:var(--q-space-6) 0;border:1px solid var(--q-line);border-radius:var(--q-radius-lg);background:var(--q-bg-raised);overflow:hidden}.flow-stage{width:100%;position:relative}.flow-svg{width:100%;height:100%;font-family:var(--q-font-text);display:block;overflow:visible}.flow-gridline{stroke:var(--q-grid);stroke-width:1px}.flow-arrowhead{fill:var(--q-line-strong)}.fnode{transition:opacity var(--q-dur-slow) var(--q-ease)}.fnode-body{fill:var(--q-panel);stroke:var(--q-line-strong);stroke-width:1.25px;transition:stroke var(--q-dur) var(--q-ease), fill var(--q-dur) var(--q-ease)}.fnode-rim{fill:none;stroke:var(--q-line-strong);stroke-width:1.25px}.fnode-ghost .fnode-body{fill:#0000;stroke-dasharray:4 4}.fnode-note .fnode-body{fill:var(--q-amber-soft);stroke:color-mix(in srgb, var(--q-amber) 55%, transparent)}.fnode-label{fill:var(--q-fg);text-anchor:middle;letter-spacing:-.01em;font-size:15px;font-weight:600}.fnode-sub{fill:var(--q-fg-muted);font-family:var(--q-font-mono);text-anchor:middle;font-size:11px}.fnode.is-hot .fnode-body,.fnode.is-hot .fnode-rim{stroke:var(--q-amber);stroke-width:2px}.fnode.is-hot .fnode-body{fill:color-mix(in srgb, var(--q-amber) 9%, var(--q-panel))}.flabel{fill:var(--q-fg-subtle);letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:600}.ftext{fill:var(--q-fg-muted);font-size:12px}.fmono{font-family:var(--q-font-mono)}.fregion{fill:none;stroke:var(--q-line);stroke-width:1px;stroke-dasharray:2 5}.fwire{fill:none;stroke:var(--q-line-strong);stroke-width:1.5px;transition:stroke var(--q-dur) var(--q-ease)}.fwire.is-hot{stroke:var(--q-accent);stroke-width:2px}.fwire-secret{stroke-dasharray:3 4}.chip rect{stroke-width:1px}.chip text{font-family:var(--q-font-mono);text-anchor:middle;font-size:11px;font-weight:500}.chip-row rect{fill:color-mix(in srgb, var(--q-flow-row) 18%, var(--q-panel));stroke:color-mix(in srgb, var(--q-flow-row) 70%, transparent)}.chip-row text{fill:var(--q-flow-row)}.chip-doc rect{fill:color-mix(in srgb, var(--q-flow-doc) 16%, var(--q-panel));stroke:color-mix(in srgb, var(--q-flow-doc) 70%, transparent)}.chip-doc text{fill:var(--q-flow-doc)}.chip-key rect{fill:color-mix(in srgb, var(--q-flow-key) 16%, var(--q-panel));stroke:color-mix(in srgb, var(--q-flow-key) 70%, transparent)}.chip-key text{fill:var(--q-flow-key)}.chip-secret rect{fill:color-mix(in srgb, var(--q-flow-secret) 16%, var(--q-panel));stroke:color-mix(in srgb, var(--q-flow-secret) 70%, transparent)}.chip-secret text{fill:var(--q-amber-text)}.chip-sql rect,.chip-plain rect{fill:var(--q-panel-2);stroke:var(--q-line-strong)}.chip-sql text,.chip-plain text{fill:var(--q-fg)}.flow-live [data-on]{transition:opacity var(--q-dur-slow) var(--q-ease), transform var(--q-dur-slow) var(--q-ease)}.flow-live [data-on]:not(.is-on){opacity:0}.flow-live .particle{opacity:0;pointer-events:none}.flow:not(.flow-live) .particle,.flow:not(.flow-live) [data-final=hide]{display:none}.flow-caption{border-top:1px solid var(--q-line);padding:var(--q-space-3) var(--q-space-4) var(--q-space-4);background:var(--q-panel)}.flow-bar{justify-content:space-between;align-items:center;gap:var(--q-space-3);display:flex}.flow-title{font-size:var(--q-text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--q-fg-subtle);font-weight:600;margin:0!important}.flow-controls{gap:var(--q-space-1);display:flex}.flow-controls[hidden]{display:none}.flow-btn{border-radius:var(--q-radius-sm);border:1px solid var(--q-line-strong);background:var(--q-bg-raised);width:2rem;height:2rem;color:var(--q-fg-muted);cursor:pointer;transition:color var(--q-dur-fast) var(--q-ease), border-color var(--q-dur-fast) var(--q-ease);place-items:center;padding:0;display:grid}.flow-btn:hover{color:var(--q-fg);border-color:var(--q-fg-subtle)}.flow-btn svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px}.flow-play .icon-play{fill:currentColor;stroke:none}.flow[data-state=playing] .icon-play,.flow:not([data-state=playing]) .icon-pause{display:none}.flow-steps{gap:var(--q-space-2);list-style:none;display:grid;margin:var(--q-space-3) 0 0!important;padding:0!important}.flow-steps>li{gap:var(--q-space-3);font-size:var(--q-text-sm);color:var(--q-fg-muted);align-items:baseline;line-height:1.5;display:flex;margin:0!important}.flow-step-num{width:1.4rem;height:1.4rem;font-size:var(--q-text-xs);font-variant-numeric:tabular-nums;color:var(--q-amber-text);background:var(--q-amber-soft);border-radius:5px;flex:none;place-items:center;font-weight:700;display:inline-grid}.flow-live .flow-steps{grid-template-areas:"step";min-height:3em;display:grid}.flow-live .flow-steps>li{opacity:0;visibility:hidden;transition:opacity var(--q-dur) var(--q-ease), transform var(--q-dur) var(--q-ease), visibility 0s linear var(--q-dur);cursor:default;grid-area:step;transform:translateY(4px)}.flow-live .flow-steps>li.is-current{opacity:1;visibility:visible;color:var(--q-fg);transition:opacity var(--q-dur) var(--q-ease), transform var(--q-dur) var(--q-ease), visibility 0s;transform:none}.flow-progress{display:none}.flow-live .flow-progress{margin-top:var(--q-space-3);gap:4px;display:flex}.flow-progress span{background:var(--q-line);height:3px;transition:background var(--q-dur) var(--q-ease);border-radius:2px;flex:1}.flow-progress span.is-done{background:color-mix(in srgb, var(--q-amber) 45%, var(--q-line))}.flow-progress span.is-current{background:var(--q-amber)}.flow-landing{background:0 0;border:0;border-radius:0}.flow-landing .flow-caption{background:0 0;border-top:0;padding-inline:0}@media (width<=640px){.flow-stage{overflow-x:auto;aspect-ratio:auto!important}.flow-svg{width:600px;max-width:none;height:auto}}