.flow-line{--node-top:1.5rem}@media (min-width:40rem){.flow-line{--node-top:6.5rem}}@media not (min-width:22.5rem){.flow-node>.text-label{font-size:var(--text-caption);line-height:var(--text-caption--line-height)}}.flow-track,.flow-progress{top:var(--node-top);background:var(--color-line-strong);width:75%;height:1px;position:absolute;left:12.5%}.flow-progress{background:var(--color-accent);transform-origin:0;height:2px;scale:calc(var(--at) / 3) 1;transition:scale 1.1s var(--ease-move);margin-top:-.5px}.flow-dot-lane{top:var(--node-top);width:25%;translate:calc(var(--at) * 100%) 0;transition:translate 1.1s var(--ease-move), opacity var(--duration-fast) var(--ease-out);position:absolute;left:0}.flow-dot{border-radius:var(--radius-full);background:var(--color-accent);width:.75rem;height:.75rem;box-shadow:0 0 0 4px var(--color-accent-soft);position:absolute;top:0;left:50%;translate:-50% -50%}.flow-line[data-holding] .flow-dot-lane{opacity:0}.flow-line[data-holding] .flow-progress{opacity:0;transition:opacity var(--duration-surface) var(--ease-exit)}.flow-line[data-restart] .flow-dot-lane,.flow-line[data-restart] .flow-progress{transition:opacity var(--duration-fast) var(--ease-out)}.flow-node-disc{border-radius:var(--radius-full);background:var(--color-surface-raised);width:3rem;height:3rem;box-shadow:var(--shadow-ring), var(--shadow-soft);color:var(--color-ink-muted);transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-surface) var(--ease-out);place-items:center;display:grid}.flow-node:hover .flow-node-disc{color:var(--color-ink)}.flow-node[data-active] .flow-node-disc{box-shadow:var(--shadow-ring-accent), 0 0 0 6px var(--color-accent-soft);color:var(--color-ink)}.flow-node[data-selected] .flow-node-disc{background:var(--color-ink);color:var(--color-canvas)}.flow-node:focus-visible,.flow-cloud:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}.flow-event{border-radius:var(--radius-md);background:var(--color-surface-raised);width:100%;box-shadow:var(--shadow-ring), var(--shadow-soft);text-align:left;opacity:0;transition:opacity var(--duration-surface) var(--ease-enter), translate var(--duration-surface) var(--ease-enter);align-items:flex-start;gap:.5rem;padding:.5rem .625rem;display:flex;translate:0 .375rem}.flow-event[data-shown]{opacity:1;transition-delay:.6s;translate:0}.flow-cloud{border:1px dashed var(--color-line-strong);color:var(--color-ink-muted);transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out)}.flow-cloud:hover{color:var(--color-ink)}.flow-cloud[data-selected]{border-style:solid;border-color:var(--color-ink);background:var(--color-surface-raised);color:var(--color-ink)}