.step-flow-steps{grid-template-columns:repeat(var(--steps), minmax(0, 1fr));gap:24px;margin:0;padding:0;list-style:none;display:grid;position:relative}.step-flow-step{align-content:start;gap:8px;padding-top:64px;display:grid;position:relative}.step-flow-step:before{content:"";background:var(--border);height:2px;position:absolute;top:21px;left:44px;right:-24px}.step-flow-step:last-child:before{display:none}.step-flow-step.state-done:before,.step-flow-step.state-active:before{background:linear-gradient(90deg, var(--primary-text), var(--border))}.step-flow-step.state-done:before{background:var(--primary-text)}.step-flow-node{border:1px solid var(--border);background:var(--card);width:44px;height:44px;font-family:var(--font-mono);color:var(--muted-foreground);border-radius:999px;place-items:center;font-size:13px;font-weight:600;display:grid;position:absolute;top:0;left:0}.state-done .step-flow-node{background:var(--primary-text);border-color:var(--primary-text);color:var(--background)}.state-active .step-flow-node{border:2px solid var(--primary-text);color:var(--primary-text);box-shadow:0 0 0 6px color-mix(in oklch, var(--primary-text) 16%, transparent)}@media (width<=760px){.step-flow-steps{grid-template-columns:minmax(0,1fr);gap:28px}.step-flow-step{padding:4px 0 0 64px}.step-flow-step:before{width:2px;height:auto;inset:48px auto -28px 21px}}