.pf{--pf-connector:2rem;--pf-join:calc(var(--pf-connector) / 2);--pf-gap:.75rem;--pf-line:var(--color-fg-muted);--pf-stagger:.28s;--pf-loop:1.75rem;--pf-loop-offset:1.2rem;container:pf/inline-size}.pf-steps{flex-direction:column;align-items:center;display:flex;position:relative}.pf-item{flex-direction:column;align-items:center;width:min(100%,20rem);display:flex;position:relative}.pf-steps:has(>:nth-child(3):last-child){--pf-n:3}.pf-steps:has(>:nth-child(4):last-child){--pf-n:4}.pf-steps:has(>:nth-child(5):last-child){--pf-n:5}.pf-steps:has(>:nth-child(6):last-child){--pf-n:6}.pf-steps:has(>:nth-child(7):last-child){--pf-n:7}.pf-steps:has(>:nth-child(8):last-child){--pf-n:8}.pf-connector{width:1px;height:var(--pf-connector);background-color:var(--pf-line);flex:none;display:block;position:relative}.pf-connector:after{content:"";border-inline:4px solid #0000;border-top:6px solid var(--pf-line);position:absolute;bottom:0;left:50%;translate:-50%}.pf-steps>.pf-item:first-child>.pf-connector{display:none}.pf-condition{color:var(--color-fg-muted);font-family:var(--font-mono);font-size:var(--text-label);line-height:var(--text-label--line-height);letter-spacing:.04em;text-align:center;text-transform:uppercase;padding-block:.25rem}.pf-node{border:1px solid var(--color-line);border-radius:var(--radius-md);background-color:var(--color-panel);flex-direction:column;gap:.25rem;width:100%;padding:.75rem 1rem;display:flex}.pf-meta{align-items:center;gap:.4375rem;display:inline-flex}.pf-kind{color:var(--color-fg-muted);font-family:var(--font-mono);font-size:var(--text-label);line-height:var(--text-label--line-height);letter-spacing:.06em;text-transform:uppercase}.pf-glyph{width:.4375rem;height:.4375rem;color:var(--color-fg-muted);border:1.5px solid;flex:none}.pf-title{color:var(--color-fg);font-size:1rem;font-weight:600;line-height:1.3}.pf-description{color:var(--color-fg-muted);font-size:var(--text-small);line-height:1.45}.pf-item[data-kind=input]>.pf-node{background-color:#0000}:is(.pf-item,.pf-option)[data-kind=input] .pf-glyph{border-radius:50%}.pf-item[data-kind=ai]>.pf-node{border-color:var(--color-accent)}.pf-item[data-kind=ai] .pf-kind,:is(.pf-item,.pf-option)[data-kind=ai] .pf-glyph{color:var(--color-accent)}:is(.pf-item,.pf-option)[data-kind=ai] .pf-glyph{background-color:currentColor}.pf-item[data-kind=decision]>.pf-node{border-style:dashed;border-color:var(--color-fg-muted)}:is(.pf-item,.pf-option)[data-kind=decision] .pf-glyph{rotate:45deg;scale:.85}.pf-item[data-kind=system]>.pf-node{border-color:var(--color-fg);background-color:var(--color-fg)}.pf-item[data-kind=system] .pf-title{color:var(--color-bg)}.pf-item[data-kind=system] .pf-kind,.pf-item[data-kind=system] .pf-glyph,.pf-item[data-kind=system] .pf-description{color:color-mix(in srgb, var(--color-bg) 78%, var(--color-fg))}:is(.pf-item,.pf-option)[data-kind=system] .pf-glyph{background-color:currentColor}.pf-item[data-kind=human]>.pf-node{border:3px double var(--color-fg-muted)}:is(.pf-item,.pf-option)[data-kind=human] .pf-glyph{background-color:currentColor;border-radius:50%}.pf-item[data-kind=output]>.pf-node{border-color:var(--color-fg);background-color:#0000}:is(.pf-item,.pf-option)[data-kind=output] .pf-glyph{color:var(--color-fg);background:radial-gradient(circle,currentColor 0 30%,#0000 36%);border-radius:50%}.pf[data-density=compact]{--pf-connector:1.25rem}.pf[data-density=compact] .pf-node{flex-direction:row;align-items:center;gap:.5rem;padding:.5625rem .75rem}.pf[data-density=compact] .pf-meta{display:contents}.pf[data-density=compact] .pf-kind{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.pf[data-density=compact] .pf-title{font-family:var(--font-mono);font-size:var(--text-label);font-weight:500;line-height:var(--text-label--line-height);letter-spacing:.04em;text-transform:uppercase;overflow-wrap:normal;hyphens:none}.pf-options{width:min(100%,28rem)}.pf-options-box{border:1px dashed var(--color-fg-muted);border-radius:var(--radius-md);background-color:var(--color-panel);flex-direction:column;gap:.75rem;width:100%;padding:.875rem 1rem;display:flex}.pf-options-title{color:var(--color-fg-muted);font-family:var(--font-mono);font-size:var(--text-label);line-height:var(--text-label--line-height);letter-spacing:.04em;text-transform:uppercase}.pf-options-list{flex-wrap:wrap;gap:.5rem;display:flex}.pf-option{border:1px solid var(--color-line);border-radius:var(--radius-sm);background-color:var(--color-bg);color:var(--color-fg);font-family:var(--font-mono);font-size:var(--text-label);font-weight:500;line-height:var(--text-label--line-height);letter-spacing:.04em;text-transform:uppercase;align-items:center;gap:.4375rem;padding:.375rem .625rem;display:inline-flex}.pf-branch{width:min(100%,36rem)}.pf-branch>.pf-connector:after{display:none}.pf-paths{gap:var(--pf-gap);grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid;position:relative}.pf-paths:has(>:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}.pf-paths:before{content:"";top:0;inset-inline:calc(25% - var(--pf-gap) / 4);background-color:var(--pf-line);height:1px;position:absolute}.pf-paths:has(>:nth-child(3)):before{inset-inline:calc(100% / 6 - var(--pf-gap) / 3)}.pf-paths>.pf-item{width:100%}.pf-paths>.pf-item>.pf-node{flex:auto}.pf-branch:not(:last-child) .pf-paths>.pf-item{padding-bottom:var(--pf-join)}.pf-branch:not(:last-child) .pf-paths>.pf-item:after{content:"";width:1px;height:var(--pf-join);background-color:var(--pf-line);position:absolute;bottom:0;left:50%}.pf-branch:not(:last-child) .pf-paths:after{content:"";bottom:0;inset-inline:calc(25% - var(--pf-gap) / 4);background-color:var(--pf-line);height:1px;position:absolute}.pf-branch:not(:last-child) .pf-paths:has(>:nth-child(3)):after{inset-inline:calc(100% / 6 - var(--pf-gap) / 3)}@container pf (width<32rem){.pf-paths:has(>:nth-child(3)){flex-direction:column;padding-block-start:var(--pf-join);padding-inline-start:1.5rem;display:flex}.pf-paths:has(>:nth-child(3)):before{top:0;bottom:var(--pf-loop-offset);width:1px;height:auto;left:.5rem;right:auto}.pf .pf-branch .pf-paths:has(>:nth-child(3)):after{content:"";background-color:var(--pf-line);width:auto;height:1px;position:absolute;inset:0 50% auto .5rem}.pf-paths:has(>:nth-child(3))>.pf-item{flex-direction:row;align-items:center;gap:.5rem;padding-bottom:0}.pf-paths:has(>:nth-child(3))>.pf-item:after{display:none}.pf-paths:has(>:nth-child(3))>.pf-item>.pf-connector{width:1rem;height:1px;position:absolute;top:50%;left:-1rem}.pf-paths:has(>:nth-child(3))>.pf-item>.pf-connector:after{border:4px solid #0000;border-inline:0;border-left:6px solid var(--pf-line);inset:50% 0 auto auto;translate:0 -50%}.pf-paths:has(>:nth-child(3))>.pf-item>.pf-condition{text-align:start;flex:none;width:4.75rem}.pf-paths:has(>:nth-child(3))>.pf-item>.pf-node{min-width:0}}.pf[data-loop] .pf-steps{align-items:stretch;padding-inline-start:var(--pf-loop)}.pf[data-loop] .pf-steps>.pf-item{width:auto}.pf[data-loop] .pf-steps:after{content:"";top:var(--pf-loop-offset);bottom:var(--pf-loop-offset);width:calc(var(--pf-loop) - .5rem);border:1px solid var(--pf-line);border-radius:var(--radius-sm) 0 0 var(--radius-sm);border-right:0;position:absolute;left:.5rem}.pf[data-loop] .pf-steps:before{content:"";top:var(--pf-loop-offset);left:var(--pf-loop);border-block:4px solid #0000;border-left:6px solid var(--pf-line);position:absolute;translate:-100% -50%}@container pf (width>=56rem){.pf[data-orientation=horizontal] .pf-steps{flex-direction:row;align-items:stretch;padding-inline-start:0}.pf[data-orientation=horizontal] .pf-steps>.pf-item{flex-direction:row;flex:1 1 0;align-items:center;width:auto;min-width:0}.pf[data-orientation=horizontal] .pf-steps>.pf-item>.pf-connector{width:var(--pf-connector);height:1px}.pf[data-orientation=horizontal] .pf-steps>.pf-item>.pf-connector:after{border:4px solid #0000;border-inline:0;border-left:6px solid var(--pf-line);inset:50% 0 auto auto;translate:0 -50%}.pf[data-orientation=horizontal] .pf-steps>.pf-item>.pf-node{flex:auto;align-self:stretch;width:auto;min-width:0}.pf[data-orientation=horizontal][data-loop] .pf-steps{padding-block-end:var(--pf-loop)}.pf[data-orientation=horizontal][data-loop] .pf-steps:after{top:auto;bottom:0;left:calc(100% / var(--pf-n,5) / 2);right:calc((100% / var(--pf-n,5) - var(--pf-connector)) / 2);width:auto;height:var(--pf-loop);border:1px solid var(--pf-line);border-radius:0 0 var(--radius-sm) var(--radius-sm);border-top:0}.pf[data-orientation=horizontal][data-loop] .pf-steps:before{top:auto;bottom:calc(var(--pf-loop) - 6px);left:calc(100% / var(--pf-n,5) / 2);border:4px solid #0000;border-top:0;border-bottom:6px solid var(--pf-line);translate:-50%}}.pf-item[data-planned]>.pf-node{background-color:#0000;border-style:dashed}.pf-planned{border:1px solid var(--color-line);border-radius:var(--radius-sm);color:var(--color-fg-muted);font-family:var(--font-mono);font-size:var(--text-label);line-height:var(--text-label--line-height);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;margin-inline-start:auto;padding:.0625rem .375rem}.pf-caption{color:var(--color-fg-muted);font-size:var(--text-small);text-align:center;margin-top:1.5rem}.pf-steps>:first-child{--pf-step:0}.pf-steps>:nth-child(2){--pf-step:1}.pf-steps>:nth-child(3){--pf-step:2}.pf-steps>:nth-child(4){--pf-step:3}.pf-steps>:nth-child(5){--pf-step:4}.pf-steps>:nth-child(6){--pf-step:5}.pf-steps>:nth-child(7){--pf-step:6}.pf-steps>:nth-child(n+8){--pf-step:7}@media (prefers-reduced-motion:no-preference){.pf[data-animated] .pf-connector{transform-origin:top;animation:pf-draw-y var(--duration-slow) var(--ease-standard) both;animation-delay:calc(var(--pf-step,0) * var(--pf-stagger))}.pf[data-animated] .pf-node{animation:pf-reveal var(--duration-slow) var(--ease-standard) both;animation-delay:calc(var(--pf-step,0) * var(--pf-stagger) + .16s)}.pf[data-animated] .pf-paths .pf-connector,.pf[data-animated] .pf-paths .pf-node,.pf[data-animated] .pf-branch~.pf-item .pf-connector,.pf[data-animated] .pf-branch~.pf-item .pf-node{animation-delay:calc((var(--pf-step,0) + 1) * var(--pf-stagger) + .16s)}@container pf (width>=56rem){.pf[data-animated][data-orientation=horizontal] .pf-steps>.pf-item>.pf-connector{transform-origin:0;animation-name:pf-draw-x}}}@keyframes pf-draw-y{0%{scale:1 0}}@keyframes pf-draw-x{0%{scale:0 1}}@keyframes pf-reveal{0%{opacity:0;translate:0 .25rem}}