.flow-diagram{--flow-forest:#0f2a22;--flow-pine:#1f4d3d;--flow-paper:#eef1ea;--flow-moss:#a9bdb2;--flow-signal:#5ccfb5;--flow-human:#e0b65c;--flow-state:paused;--flow-cycle:6.4s;--flow-io:cubic-bezier(.65, 0, .35, 1);border:1px solid var(--flow-pine);background:var(--flow-forest);min-width:0;max-width:100%;color:var(--flow-paper);border-radius:10px;margin:24px 0;padding:24px;font-family:inherit}.flow-diagram[data-playing=true]{--flow-state:running}.flow-continuity{--flow-cycle:5.2s}.flow-track{grid-template-columns:repeat(var(--flow-count), minmax(0, 1fr));gap:0;min-width:0;margin:0;padding:12px 0;list-style:none;display:grid;position:relative}.flow-step{z-index:1;text-align:center;flex-direction:column;align-items:center;gap:12px;min-width:0;padding:0 4px;display:flex;position:relative}.flow-node{border:1px solid var(--flow-pine);background:var(--flow-forest);width:48px;height:48px;color:var(--flow-paper);border-radius:6px;flex:none;place-items:center;font-size:16px;font-weight:500;line-height:1;display:grid;position:relative}.flow-node svg{width:24px;height:24px}.flow-label{max-width:100%;color:var(--flow-paper);overflow-wrap:anywhere;font-size:14px;font-weight:500;line-height:1.6}.flow-step-human .flow-node{border-color:var(--flow-human);color:var(--flow-human)}.flow-step-human .flow-label{color:var(--flow-human)}.flow-edge{z-index:-1;background:var(--flow-pine);transform-origin:0;width:calc(100% - 48px);height:1px;position:absolute;top:24px;left:calc(50% + 24px)}.flow-step:last-of-type .flow-edge,.flow-step:nth-last-child(2) .flow-edge{display:none}.flow-linear .flow-step:nth-last-child(2) .flow-edge{display:block}.flow-node:after{content:"";border:2px solid var(--flow-signal);border-radius:inherit;opacity:0;pointer-events:none;position:absolute;inset:-1px}.flow-step-human .flow-node:after{border-color:var(--flow-human)}.flow-diagram[data-loop=true] .flow-node:after{animation:flow-production-node-flash var(--flow-cycle) steps(1, end) var(--flow-phase) infinite forwards;animation-play-state:var(--flow-state)}.flow-continuity[data-loop=true] .flow-node:after{animation-name:flow-continuity-node-flash}.flow-production .flow-step-human .flow-node:after{animation-name:flow-production-human}.flow-continuity .flow-step-human .flow-node:after{animation-name:flow-continuity-human}.flow-token{z-index:2;top:var(--flow-start-y,36px);left:var(--flow-start-x,24px);background:var(--flow-signal);opacity:0;pointer-events:none;width:8px;height:8px;animation:flow-production-token var(--flow-cycle) var(--flow-io) infinite both;animation-play-state:var(--flow-state);border-radius:50%;margin:-4px 0 0 -4px;list-style:none;display:block;position:absolute}.flow-continuity .flow-token{animation-name:flow-continuity-token}.flow-token:after{content:"";border-radius:inherit;background:var(--flow-human);opacity:0;animation:flow-token-human var(--flow-cycle) steps(1, end) infinite both;animation-play-state:var(--flow-state);position:absolute;inset:0}.flow-continuity .flow-token:after{animation-name:flow-continuity-token-human}.flow-token-label{border:1px solid var(--flow-signal);background:var(--flow-forest);color:var(--flow-paper);white-space:nowrap;border-radius:4px;padding:2px 6px;font-size:14px;line-height:1.5;position:absolute;bottom:13px;left:50%;transform:translate(-50%)}.flow-outputs{animation:flow-output-arrival 6.4s var(--flow-io) infinite both;animation-play-state:var(--flow-state);flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px;display:flex}.flow-outputs span{border:1px solid var(--flow-signal);color:var(--flow-paper);border-radius:999px;padding:4px 9px;font-size:14px;line-height:1.6}.flow-controls{border-top:1px solid var(--flow-pine);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;padding-top:16px;display:flex}.flow-caption{color:var(--flow-moss);margin:0;font-size:14px;line-height:1.6}.flow-pause{border:1px solid var(--flow-pine);min-width:88px;min-height:44px;color:var(--flow-paper);font:inherit;cursor:pointer;background:0 0;border-radius:6px;justify-content:center;align-items:center;padding:8px 12px;font-size:14px;line-height:1.4;display:inline-flex}.flow-pause:focus-visible{outline:2px solid var(--flow-signal);outline-offset:3px}.flow-lanes{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.flow-lane{border:1px solid var(--flow-pine);min-width:0;color:var(--flow-paper);overflow-wrap:anywhere;border-radius:6px;padding:16px;font-size:15px;line-height:1.7}.flow-lane-mark{background:var(--flow-signal);width:24px;height:2px;margin-bottom:12px;display:block}.flow-parallel[data-enhanced=true][data-intro-started=false][data-reduced-motion=false] .flow-lane{opacity:0}.flow-parallel[data-intro-started=true][data-reduced-motion=false] .flow-lane{animation:.7s cubic-bezier(.16,1,.3,1) both flow-lane-intro;animation-play-state:var(--flow-state)}.flow-linear[data-intro-started=true][data-reduced-motion=false] .flow-node{animation:flow-line-intro .45s cubic-bezier(.16, 1, .3, 1) calc(var(--flow-order) * .15s) both;animation-play-state:var(--flow-state)}.flow-matrix-visual{flex-wrap:wrap;align-items:center;gap:24px;display:flex}.flow-matrix{flex:none;grid-template-columns:repeat(4,20px);gap:5px;display:grid}.flow-matrix span{border:1px solid var(--flow-moss);border-radius:3px;width:20px;height:20px}.flow-matrix-labels{min-width:0;color:var(--flow-moss);flex-wrap:wrap;align-items:baseline;gap:8px 16px;font-size:14px;line-height:1.6;display:flex}.flow-matrix-labels strong{color:var(--flow-paper);font-variant-numeric:tabular-nums;font-size:24px;font-weight:600}.flow-matrix-labels time{font-variant-numeric:tabular-nums}.flow-history-note{color:var(--flow-moss);margin:20px 0 0;font-size:14px;line-height:1.8}@keyframes flow-production-node-flash{0%{opacity:1}9.375%,to{opacity:0}}@keyframes flow-continuity-node-flash{0%{opacity:1}11.5385%,to{opacity:0}}@keyframes flow-production-human{0%{opacity:1}12.5%,to{opacity:0}}@keyframes flow-continuity-human{0%{opacity:1}19.2308%,to{opacity:0}}@keyframes flow-token-human{0%{opacity:0}43.75%{opacity:1}56.25%,to{opacity:0}}@keyframes flow-continuity-token-human{0%{opacity:0}61.5385%{opacity:1}80.7692%,to{opacity:0}}@keyframes flow-output-arrival{0%{opacity:0;animation-timing-function:step-end;transform:translateY(4px)}65.625%,84.375%{opacity:1;transform:translateY(0)}90.625%,to{opacity:0;transform:translateY(0)}}@keyframes flow-lane-intro{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes flow-line-intro{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes flow-production-token{0%{opacity:0;animation-timing-function:step-end;transform:translate(0)}6.25%{opacity:1;transform:translate(0)}15.625%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .2), calc(var(--flow-travel-y,0px) * .2))}25%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .4), calc(var(--flow-travel-y,0px) * .4))}34.375%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .6), calc(var(--flow-travel-y,0px) * .6))}43.75%,56.25%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .8), calc(var(--flow-travel-y,0px) * .8))}65.625%,84.375%{opacity:1;transform:translate(var(--flow-travel-x,0px), var(--flow-travel-y,0px))}90.625%,to{opacity:0;transform:translate(var(--flow-travel-x,0px), var(--flow-travel-y,0px))}}@keyframes flow-continuity-token{0%{opacity:0;animation-timing-function:step-end;transform:translate(0)}15.3846%{opacity:1;transform:translate(0)}26.9231%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .25), calc(var(--flow-travel-y,0px) * .25))}38.4615%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .5), calc(var(--flow-travel-y,0px) * .5))}50%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .75), calc(var(--flow-travel-y,0px) * .75))}61.5385%,80.7692%{opacity:1;transform:translate(var(--flow-travel-x,0px), var(--flow-travel-y,0px))}88.4615%,to{opacity:0;transform:translate(var(--flow-travel-x,0px), var(--flow-travel-y,0px))}}@keyframes flow-production-token-phone{0%{opacity:0;animation-timing-function:step-end;transform:translate(0)}15.625%{opacity:1;transform:translate(0)}23.4375%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .2), calc(var(--flow-travel-y,0px) * .2))}31.25%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .4), calc(var(--flow-travel-y,0px) * .4))}39.0625%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .6), calc(var(--flow-travel-y,0px) * .6))}46.875%,59.375%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .8), calc(var(--flow-travel-y,0px) * .8))}67.1875%,85.9375%{opacity:1;transform:translate(var(--flow-travel-x,0px), var(--flow-travel-y,0px))}92.1875%,to{opacity:0;transform:translate(var(--flow-travel-x,0px), var(--flow-travel-y,0px))}}@keyframes flow-continuity-token-phone{0%{opacity:0;animation-timing-function:step-end;transform:translate(0)}25%{opacity:1;transform:translate(0)}34.6154%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .25), calc(var(--flow-travel-y,0px) * .25))}44.2308%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .5), calc(var(--flow-travel-y,0px) * .5))}53.8462%{opacity:1;transform:translate(calc(var(--flow-travel-x,0px) * .75), calc(var(--flow-travel-y,0px) * .75))}63.4615%,82.6923%{opacity:1;transform:translate(var(--flow-travel-x,0px), var(--flow-travel-y,0px))}90.3846%,to{opacity:0;transform:translate(var(--flow-travel-x,0px), var(--flow-travel-y,0px))}}@keyframes flow-token-human-phone{0%{opacity:0}46.875%{opacity:1}59.375%,to{opacity:0}}@keyframes flow-continuity-token-human-phone{0%{opacity:0}63.4615%{opacity:1}82.6923%,to{opacity:0}}@keyframes flow-output-arrival-phone{0%{opacity:0;animation-timing-function:step-end;transform:translateY(4px)}67.1875%,85.9375%{opacity:1;transform:translateY(0)}92.1875%,to{opacity:0;transform:translateY(0)}}.flow-diagram[data-reduced-motion=true] .flow-token{display:none}.flow-diagram[data-reduced-motion=true] .flow-node:after,.flow-diagram[data-reduced-motion=true] .flow-outputs,.flow-diagram[data-reduced-motion=true] .flow-lane,.flow-diagram[data-reduced-motion=true] .flow-node{animation:none}.flow-diagram[data-reduced-motion=true] .flow-outputs{opacity:1;transform:none}@media (width<=767px){.flow-diagram{padding:20px 16px}.flow-track{grid-template-columns:minmax(0,1fr);gap:0;padding:8px 0}.flow-step{text-align:left;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:20px;min-height:88px;padding:0 0 40px;display:grid}.flow-step:last-of-type,.flow-step:nth-last-child(2){min-height:48px;padding-bottom:0}.flow-linear .flow-step:nth-last-child(2){min-height:88px;padding-bottom:40px}.flow-label{font-size:14px}.flow-token-label,.flow-caption,.flow-outputs span{font-size:13px}.flow-linear[data-intro-started=true][data-reduced-motion=false] .flow-node{animation-delay:calc(var(--flow-order) * .1s)}.flow-diagram[data-loop=true] .flow-node:after{animation-delay:var(--flow-phone-phase)}.flow-production .flow-token{animation-name:flow-production-token-phone}.flow-continuity .flow-token{animation-name:flow-continuity-token-phone}.flow-production .flow-token:after{animation-name:flow-token-human-phone}.flow-continuity .flow-token:after{animation-name:flow-continuity-token-human-phone}.flow-edge{transform-origin:top;width:1px;height:calc(100% - 48px);top:48px;left:24px}.flow-lanes{grid-template-columns:minmax(0,1fr);gap:12px}.flow-lane{padding:14px}.flow-controls{margin-top:16px}.flow-outputs{justify-content:flex-start;animation-name:flow-output-arrival-phone}}@media (prefers-reduced-motion:reduce){.flow-diagram .flow-token,.flow-diagram .flow-pause{display:none}.flow-diagram *,.flow-diagram :after{animation:none!important}.flow-diagram .flow-outputs,.flow-diagram .flow-lane{opacity:1!important;transform:none!important}}