@layer components{.wf{--wf-h:148px;--wf-w:clamp(10.5rem, 46vw, 14rem);--wf-rail:1.75rem;--wf-gap:2.5rem;--wf-row:5rem;--wf-pad:1.75rem}.wf-flow{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.wf-step{--nd:calc(var(--n,0) * .34s + 60ms);grid-template-columns:var(--wf-rail) minmax(0, 1fr);padding-bottom:var(--wf-pad);column-gap:.75rem;display:grid;position:relative}.wf-step:last-child{padding-bottom:0}.wf-node{grid-template-columns:var(--wf-w) minmax(0, 1fr);cursor:pointer;align-items:start;column-gap:.875rem;display:grid;position:relative}.wf-widget{height:var(--wf-h);border:1.5px solid var(--color-line);background:var(--color-card);box-shadow:var(--shadow-card);border-radius:1.05rem;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s cubic-bezier(.2,.8,.2,1),border-color .35s;position:relative}.wf-step[data-active=true] .wf-widget,.wf-node:hover .wf-widget{border-color:var(--color-ink);box-shadow:5px 7px 0 0 var(--color-ink);transform:translateY(-6px)}.wf[data-auto=true] .wf-step .wf-widget{transition-delay:.45s}.wf-step[data-outcome=true] .wf-widget{border-color:#17694a8c;box-shadow:0 0 0 4px #57cc9933,0 18px 36px -20px #17694a99}.wf-step[data-outcome=true][data-active=true] .wf-widget,.wf-step[data-outcome=true] .wf-node:hover .wf-widget{border-color:var(--color-mint-ink);box-shadow:5px 7px 0 0 var(--color-mint-ink), 0 0 0 4px #57cc9959}.wf-step[data-outcome=true] .wf-widget:after{content:"";border:2px solid var(--color-mint);border-radius:inherit;opacity:0;pointer-events:none;position:absolute;inset:-3px}.wf[data-run=true] .wf-step[data-outcome=true][data-active=true] .wf-widget:after{animation:1.6s ease-out 2 wf-ping}.wf-badge{z-index:3;background:var(--color-mint-ink);color:#fff;width:1.4rem;height:1.4rem;box-shadow:0 0 0 3px var(--color-paper-2);border-radius:999px;place-items:center;display:grid;position:absolute;top:-.75rem;right:-.75rem}.wf-info{min-width:0;height:var(--wf-h);flex-direction:column;justify-content:flex-start;gap:.55rem;padding-top:.35rem;display:flex}.wf-name-btn{color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:flex-start;gap:.15rem;padding:0;display:inline-flex}.wf-num{font-family:var(--font-mono);letter-spacing:.14em;color:var(--color-muted);font-size:.66rem}.wf-name{background-image:linear-gradient(transparent 62%, var(--color-marker) 62% 94%, transparent 94%);background-repeat:no-repeat;background-size:0% 100%;font-size:.98rem;font-weight:700;line-height:1.2;transition:background-size .4s cubic-bezier(.2,.8,.2,1)}.wf-step[data-active=true] .wf-name{background-size:100% 100%}.wf-tip{border-left:2px solid var(--color-marker);color:var(--color-ink-soft);opacity:0;flex-direction:column;align-items:flex-start;gap:.4rem;padding-left:.6rem;font-size:.78rem;line-height:1.3;transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1);display:flex;transform:translateY(-4px)}.wf-step[data-active=true] .wf-tip,.wf-node:hover .wf-tip{opacity:1;transform:none}.wf-surface{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-brand-deep);align-items:center;gap:.3rem;font-size:.58rem;display:inline-flex}.wf-num{display:none}.wf-rail{grid-area:1/1;position:relative}.wf-step>.wf-node{grid-area:1/2}.wf-bubble{z-index:2;left:0;top:calc(var(--wf-h) / 2 - var(--wf-rail) / 2);width:var(--wf-rail);height:var(--wf-rail);border:1.5px solid var(--color-ink);background:var(--color-ink);color:var(--color-paper);font-family:var(--font-mono);border-radius:999px;place-items:center;font-size:.7rem;font-weight:700;transition:background-color .3s,color .3s,box-shadow .3s;display:grid;position:absolute}.wf-step[data-active=true] .wf-bubble{background:var(--color-marker);color:var(--color-ink);box-shadow:2px 2px 0 0 var(--color-ink)}.wf-step[data-outcome=true] .wf-bubble{border-color:var(--color-mint-ink);background:var(--color-mint-ink);color:#fff}.wf-step[data-outcome=true][data-active=true] .wf-bubble{background:var(--color-mint);color:var(--color-ink);border-color:var(--color-ink)}.wf-vlink{z-index:1;width:2px;left:50%;top:calc(var(--wf-h) / 2 + var(--wf-rail) / 2);bottom:calc(var(--wf-rail) / 2 - var(--wf-h) / 2 - var(--wf-pad));margin-left:-1px;position:absolute;container-type:size}.wf-link,.wf-wrap{display:none}.wf-track{background:#0f223029;border-radius:2px;position:absolute}.wf-dash{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.wf-dash line,.wf-dash path{fill:none;stroke:var(--color-brand);stroke-width:2px;stroke-linecap:round;stroke-dasharray:3 7;vector-effect:non-scaling-stroke}.wf-dash .wf-solid{stroke:#0f223029;stroke-dasharray:none}.wf-arrow{background:var(--color-brand);clip-path:polygon(0 0,100% 50%,0 100%);width:9px;height:11px;position:absolute}.wf-pkt{z-index:2;border:1.5px solid var(--color-ink);background:var(--color-marker);opacity:0;pointer-events:none;border-radius:999px;width:11px;height:11px;position:absolute;box-shadow:0 0 0 3px #ffd84d59}.wf-vlink .wf-track{transform-origin:50% 0;inset:0 0 7px}.wf-vlink .wf-dash{inset:0}.wf-vlink .wf-arrow{margin-left:-4.5px;bottom:0;left:50%;transform:rotate(90deg)}.wf-vlink .wf-pkt{margin-left:-5.5px;animation:.8s cubic-bezier(.5,0,.3,1) both wf-pkt-y;top:0;left:50%}@media (max-width:420px){.wf{--wf-rail:1.5rem}.wf-step{column-gap:.5rem}.wf-node{column-gap:.65rem}.wf-name{font-size:.9rem}}@media (min-width:768px){.wf-flow{justify-content:center;column-gap:var(--wf-gap);row-gap:var(--wf-row);flex-flow:wrap;max-width:780px;margin-inline:auto}.wf-step{flex:0 0 calc((100% - 2 * var(--wf-gap)) / 3);padding-bottom:0;display:block}.wf-rail{display:none}.wf-node{flex-direction:column;align-items:stretch;gap:.85rem;display:flex}.wf-info{align-items:center;height:auto;padding-top:0}.wf-num{display:inline}.wf-name-btn{flex-direction:row;align-items:baseline;gap:.5rem}.wf-tip{z-index:30;background:var(--color-ink);width:max-content;max-width:13rem;color:var(--color-paper);text-align:center;opacity:0;pointer-events:none;border-left:0;border-radius:.8rem;align-items:center;padding:.55rem .75rem;font-size:.82rem;transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1);position:absolute;top:calc(100% + .6rem);left:50%;transform:translate(-50%,-6px);box-shadow:0 16px 30px -14px #0f2230a6}.wf-tip:before{content:"";border:6px solid #0000;border-bottom-color:var(--color-ink);margin-left:-6px;position:absolute;bottom:100%;left:50%}.wf-step[data-active=true] .wf-tip,.wf-node:hover .wf-tip{opacity:1;transform:translate(-50%)}.wf[data-auto=true] .wf-step[data-active=true] .wf-tip{transition-delay:.45s}.wf-surface{color:var(--color-marker)}.wf-vlink{display:none}.wf-link{z-index:0;left:100%;top:calc(var(--wf-h) / 2 - 6px);width:var(--wf-gap);pointer-events:none;height:12px;display:block;position:absolute;container-type:size}.wf-step:last-child .wf-link{display:none}.wf-link .wf-track{transform-origin:0;height:2px;margin-top:-1px;top:50%;left:0;right:7px}.wf-link .wf-arrow{margin-top:-5.5px;top:50%;right:0}.wf-link .wf-pkt{margin-top:-5.5px;animation:.8s cubic-bezier(.5,0,.3,1) both wf-pkt-x;top:50%;left:0}}@media (min-width:768px) and (max-width:1119.98px){.wf-step:nth-child(3) .wf-link{display:none}.wf-step:nth-child(3) .wf-wrap{z-index:0;width:calc(150% + 1.5 * var(--wf-gap));height:var(--wf-row);pointer-events:none;display:block;position:absolute;top:100%;right:50%;container-type:size}.wf-wrap .wf-arrow{margin-left:-4.5px;bottom:0;left:0;transform:rotate(90deg)}.wf-wrap .wf-pkt{margin-right:-5.5px;animation:1.1s cubic-bezier(.5,0,.3,1) both wf-pkt-elbow;top:0;right:0}}@media (min-width:1120px){.wf-flow{flex-wrap:nowrap;max-width:none}.wf-step{flex:1 1 0;min-width:0}}.wf[data-state=armed] .wf-node,.wf[data-state=armed] .wf-bubble,.wf[data-state=armed] .wf-dash,.wf[data-state=armed] .wf-arrow,.wf[data-state=armed] .wf-badge{opacity:0}.wf[data-state=armed] .wf-track{transform:scale(0)}.wf[data-state=live] .wf-node{animation:.62s cubic-bezier(.2,.9,.3,1.12) backwards wf-node-in;animation-delay:var(--nd)}.wf[data-state=live] .wf-bubble{animation:.45s cubic-bezier(.2,.9,.3,1.2) backwards wf-bubble-in;animation-delay:var(--nd)}.wf[data-state=live] .wf-link .wf-track{animation:.38s cubic-bezier(.4,0,.2,1) backwards wf-draw-x;animation-delay:calc(var(--nd) + .42s)}.wf[data-state=live] .wf-vlink .wf-track{animation:.38s cubic-bezier(.4,0,.2,1) backwards wf-draw-y;animation-delay:calc(var(--nd) + .42s)}.wf[data-state=live] .wf-dash,.wf[data-state=live] .wf-arrow{animation:.3s ease-out backwards wf-fade;animation-delay:calc(var(--nd) + .7s)}.wf[data-state=live] .wf-badge{animation:.5s cubic-bezier(.2,.9,.3,1.2) backwards wf-pop;animation-delay:calc(var(--nd) + .9s)}.wf[data-state=armed] .wf-link .wf-track,.wf[data-state=armed] .wf-vlink .wf-track{transform:scale(0)}.wf[data-run=true] .wf-dash line,.wf[data-run=true] .wf-dash path:not(.wf-solid){animation:.9s linear infinite wf-flow}.wf-grow{transform-origin:50% 100%}.wf-fill{transform-origin:0}.wf-pop{transform-origin:50%}.wf[data-state=live] .wf-grow{animation:.7s cubic-bezier(.2,.7,.2,1) backwards wf-grow}.wf[data-state=live] .wf-fill{animation:.8s cubic-bezier(.2,.7,.2,1) backwards wf-fill}.wf[data-state=live] .wf-pop{animation:.45s cubic-bezier(.2,.9,.3,1.2) backwards wf-pop}.wf[data-state=live] .wf-slide{animation:.5s cubic-bezier(.2,.8,.2,1) backwards wf-slide}.wf[data-state=live] .wf-fade{animation:.5s ease-out backwards wf-fade}.wf[data-state=live] .wf-ring{animation:.9s cubic-bezier(.2,.7,.2,1) backwards wf-ring}.wf[data-state=live] .wf-line{stroke-dasharray:1;animation:1s cubic-bezier(.4,0,.2,1) backwards wf-line}.wf[data-state=live] .wf-grow,.wf[data-state=live] .wf-fill,.wf[data-state=live] .wf-pop,.wf[data-state=live] .wf-slide,.wf[data-state=live] .wf-fade,.wf[data-state=live] .wf-ring,.wf[data-state=live] .wf-line{animation-delay:calc(var(--nd) + .38s + var(--d,0) * var(--s,70ms))}.wf-due{opacity:0}.wf[data-state=live] .wf-due{animation:.3s ease-in forwards wf-swap-out;animation-delay:calc(var(--nd) + 1.5s);opacity:1}.wf[data-state=live] .wf-paid{animation:.35s ease-out backwards wf-fade;animation-delay:calc(var(--nd) + 1.7s)}.wf-caret{animation:1s steps(2,start) infinite wf-blink}.wf:not([data-run=true]) .wf-caret{animation:none}@keyframes wf-node-in{0%{opacity:0;transform:translateY(20px)scale(.9)}}@keyframes wf-bubble-in{0%{opacity:0;transform:scale(.4)}}@keyframes wf-draw-x{0%{transform:scaleX(0)}}@keyframes wf-draw-y{0%{transform:scaleY(0)}}@keyframes wf-fade{0%{opacity:0}}@keyframes wf-grow{0%{transform:scaleY(0)}}@keyframes wf-fill{0%{transform:scaleX(0)}}@keyframes wf-pop{0%{opacity:0;transform:scale(0)}65%{transform:scale(1.22)}}@keyframes wf-slide{0%{opacity:0;transform:translate(16px)}}@keyframes wf-ring{0%{stroke-dasharray:0 100}}@keyframes wf-line{0%{stroke-dashoffset:1px}}@keyframes wf-flow{to{stroke-dashoffset:-10px}}@keyframes wf-swap-out{0%{opacity:1}to{opacity:0}}@keyframes wf-blink{to{opacity:0}}@keyframes wf-ping{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.12,1.2)}}@keyframes wf-pkt-x{0%{opacity:0;transform:translate(0)}14%{opacity:1}86%{opacity:1}to{opacity:0;transform:translate(calc(100cqw - 11px))}}@keyframes wf-pkt-y{0%{opacity:0;transform:translateY(0)}14%{opacity:1}86%{opacity:1}to{opacity:0;transform:translateY(calc(100cqh - 11px))}}@keyframes wf-pkt-elbow{0%{opacity:0;transform:translate(0)}10%{opacity:1}30%{transform:translateY(50cqh)}70%{transform:translate(-100cqw,50cqh)}90%{opacity:1}to{opacity:0;transform:translate(-100cqw,calc(100cqh - 11px))}}}