.sf-grid-hover .sf-dot-field .sf-dot{left:var(--sf-dot-x);top:var(--sf-dot-y);position:absolute;transform:translate(-50%,-50%)}@media (prefers-reduced-motion:no-preference){@keyframes sf-dot-twinkle{0%,to{opacity:var(--sf-dot-lo)}52%{opacity:min(1,calc(var(--sf-dot-lo) + .24))}}.sf-grid-hover .sf-dot-field .sf-dot{opacity:var(--sf-dot-lo)}.sf-grid-hover:is(:hover,:focus-within) .sf-dot-field .sf-dot{animation:sf-dot-twinkle var(--sf-dot-dur)ease-in-out var(--sf-dot-delay)infinite backwards}}@media (prefers-reduced-motion:reduce){.sf-dot-field .sf-dot{animation:none!important}.sf-grid-hover:is(:hover,:focus-within) .sf-dot-field .sf-dot{opacity:var(--sf-dot-lo)}}.sf-sparkle-themed .sf-dot-field .sf-dot.sf-dot-themed{background-color:var(--sf-dot-fill-light)}html:not([data-theme=light]) .sf-sparkle-themed .sf-dot-field .sf-dot.sf-dot-themed{background-color:var(--sf-dot-fill-dark)}
.fw-logo-switch .fw-logo--dark{display:block}.fw-logo-switch .fw-logo--light,:root[data-theme=light] .fw-logo-switch .fw-logo--dark{display:none}:root[data-theme=light] .fw-logo-switch .fw-logo--light{display:block}
.sf-flow{-webkit-user-select:none;user-select:none;background:0 0;border:none;position:relative;overflow:hidden}.sf-flow-status{z-index:4;-webkit-backdrop-filter:none;backdrop-filter:none;font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--secondary);background:0 0;border:none;align-items:center;gap:8px;padding:6px 2px;font-size:10px;font-weight:700;display:inline-flex;position:absolute;top:12px;right:max(16px,min(52px,5vw))}.sf-flow-status-dot{background:var(--accent);width:6px;height:6px;box-shadow:0 0 10px color-mix(in srgb,var(--accent)70%,transparent);border-radius:9999px;animation:3.225s ease-in-out infinite sf-pulse}.sf-flow-axis-wrap{height:360px;position:relative;overflow:hidden}@media (min-width:768px){.sf-flow-axis-wrap{height:400px}}.sf-flow-axis{background:linear-gradient(to right,transparent 0%,color-mix(in srgb,var(--accent)40%,transparent)12%,color-mix(in srgb,var(--accent)65%,transparent)50%,color-mix(in srgb,var(--accent)40%,transparent)88%,transparent 100%);z-index:2;height:1px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.sf-flow-axis-glow{background:var(--accent);opacity:.35;filter:blur(2px);z-index:1;height:2px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.sf-flow-node{z-index:3;pointer-events:none;width:200px;height:110px;animation:39s linear forwards sf-flow-x;position:absolute;top:50%;left:100%;transform:translate(-50%,-50%)}@keyframes sf-flow-x{0%{opacity:0;left:100%}4%{opacity:1}to{opacity:1;left:-85%}}.sf-flow-node-top .sf-flow-card{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-8px)}.sf-flow-node-bottom .sf-flow-card{position:absolute;top:100%;left:50%;transform:translate(-50%,8px)}.sf-flow-connector{width:80px;height:90px;position:absolute;top:50%;left:-80px;overflow:visible;transform:translateY(-50%)}.sf-flow-node-top .sf-flow-connector{transform:translateY(-100%)}.sf-flow-node-bottom .sf-flow-connector{transform:translateY(0)}.sf-flow-connector-path{stroke:var(--accent);opacity:.45;stroke-dasharray:220;stroke-dashoffset:220px;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent)60%,transparent));animation:2.175s ease-out forwards sf-dash}@keyframes sf-dash{to{stroke-dashoffset:0}}.sf-flow-card{border:1px solid var(--border);background:color-mix(in srgb,var(--background)88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;align-items:stretch;gap:8px;min-width:170px;max-width:200px;padding:8px 10px;animation:.9s ease-out .9s forwards sf-card-in;display:flex;box-shadow:0 6px 20px -10px #0009}@keyframes sf-card-in{0%{opacity:0;transform:translate(-50%,var(--sf-card-from,0))}to{opacity:1;transform:translate(-50%,var(--sf-card-to,0))}}.sf-flow-node-top .sf-flow-card{--sf-card-from:-2px;--sf-card-to:-8px}.sf-flow-node-bottom .sf-flow-card{--sf-card-from:2px;--sf-card-to:8px}.sf-flow-card-bar{background:var(--accent);border-radius:1px;flex-shrink:0;width:2px}.sf-flow-card-text{flex-direction:column;gap:2px;min-width:0;display:flex;overflow:hidden}.sf-flow-card-kind{font-family:var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-size:9px;font-weight:700;line-height:1}.sf-flow-card-label{font-family:var(--font-mono);color:var(--foreground);white-space:nowrap;text-overflow:ellipsis;font-size:11px;font-weight:600;line-height:1.2;overflow:hidden}.sf-flow-card-detail{min-width:0;max-width:100%;font-family:var(--font-mono);color:var(--muted);white-space:nowrap;align-items:center;gap:4px;font-size:10px;line-height:1.2;display:inline-flex}.sf-flow-card-detail>.min-w-0{text-overflow:ellipsis;overflow:hidden}.sf-flow-card-detail-icon{object-fit:contain;flex-shrink:0;width:17px;height:17px}.sf-flow-card-sep{color:var(--faint);margin:0 6px}.sf-kind-submit .sf-flow-card-bar{background:#f0abfc}.sf-kind-store .sf-flow-card-bar{background:#d946ef}.sf-kind-email .sf-flow-card-bar{background:#a855f7}.sf-kind-webhook .sf-flow-card-bar{background:#22c55e}.sf-kind-export .sf-flow-card-bar{background:#38bdf8}.sf-kind-submit .sf-flow-card-kind{color:#f0abfc}.sf-kind-webhook .sf-flow-card-kind{color:#22c55e}.sf-kind-email .sf-flow-card-kind{color:#c084fc}.sf-kind-export .sf-flow-card-kind{color:#38bdf8}.sf-flow-legend{background:0 0;border-top:none;flex-wrap:wrap;justify-content:flex-start;gap:18px 22px;padding-block:16px;display:flex}.sf-flow-legend-item{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tertiary);align-items:center;gap:8px;font-size:10px;font-weight:700;display:inline-flex}.sf-flow-legend-dot{background:var(--accent);width:10px;height:2px;display:inline-block}.sf-flow-legend-dot.sf-kind-submit{background:#f0abfc}.sf-flow-legend-dot.sf-kind-store{background:#d946ef}.sf-flow-legend-dot.sf-kind-email{background:#a855f7}.sf-flow-legend-dot.sf-kind-webhook{background:#22c55e}.sf-flow-legend-dot.sf-kind-export{background:#38bdf8}@keyframes sf-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.9)}}@media (prefers-reduced-motion:reduce){.sf-flow-node,.sf-flow-connector-path,.sf-flow-card,.sf-flow-status-dot{animation:none}.sf-flow-card{opacity:1}}