.wfv{--wfv-gap-x:clamp(.875rem, 1.6vw, 1.5rem);--wfv-gap-y:2.75rem;--wfv-col-min:6rem;--wfv-radius:.75rem;--wfv-gold:var(--p-gold-400);--wfv-blue:var(--p-blue-400);font-family:var(--font-text);border-radius:var(--radius-lg);border:1px solid var(--wfv-border);background:var(--wfv-bg);color:var(--wfv-text);isolation:isolate;padding:clamp(1.25rem,2.5vw,2rem);position:relative}.wfv--night,.wfv--light{--wfv-bg:linear-gradient(180deg, #0b3541a6, #051f27d9);--wfv-border:#ffffff1f;--wfv-node-bg:#0b3541eb;--wfv-node-bg-raised:#114757;--wfv-node-border:#ffffff29;--wfv-text:var(--p-paper-050);--wfv-text-soft:#f2f8faa8;--wfv-edge:#7ecdff8c;--wfv-edge-live:var(--p-blue-300);--wfv-halo:#0a3340;--wfv-ok:#7fe0a0;--wfv-warn:#ffcf6b;--wfv-bad:#ff9b8f;--wfv-info:var(--p-teal-300);--wfv-chip-bg:#ffffff14;--wfv-chip-border:#ffffff24;--wfv-log-bg:#051f2799;--color-focus:var(--p-gold-400)}.wfv__head{justify-content:space-between;align-items:flex-start;gap:var(--space-6);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.wfv__title{font-family:var(--font-display);font-size:var(--text-h3);line-height:var(--leading-snug);margin-bottom:var(--space-2);max-width:34rem}.wfv__meta{gap:var(--space-2);flex-wrap:wrap;margin:0;display:flex}.wfv__meta-chip{letter-spacing:.02em;border:1px solid var(--wfv-chip-border);background:var(--wfv-chip-bg);color:var(--wfv-text-soft);border-radius:999px;padding:.2rem .55rem;font-size:.72rem;font-weight:600}.wfv__controls{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.wfv__scenarios{background:var(--wfv-chip-bg);border:1px solid var(--wfv-chip-border);border-radius:999px;flex-wrap:wrap;gap:.35rem;padding:.3rem;display:inline-flex}.wfv__scenario{font:inherit;font-size:var(--text-small);color:var(--wfv-text-soft);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-out);background:0 0;border:1px solid #0000;border-radius:999px;min-height:2.5rem;padding:.5rem .9rem;font-weight:600}.wfv__scenario:hover{color:var(--wfv-text)}.wfv__scenario[aria-selected=true]{background:var(--wfv-gold);color:var(--p-night-900)}.wfv__replay{font:inherit;font-size:var(--text-small);border:1px solid var(--wfv-chip-border);background:var(--wfv-node-bg);min-height:2.75rem;color:var(--wfv-text);cursor:pointer;transition:border-color var(--duration-fast), transform var(--duration-fast) var(--ease-out);border-radius:999px;align-items:center;gap:.5rem;padding:.55rem 1rem;font-weight:700;display:inline-flex}.wfv__replay:hover{border-color:var(--wfv-gold)}.wfv__replay svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:1rem;height:1rem}.wfv__replay.is-playing svg{animation:1.4s linear infinite wfvSpin}@keyframes wfvSpin{to{transform:rotate(360deg)}}.wfv__summary{color:var(--wfv-text-soft);font-size:var(--text-small);line-height:var(--leading-normal);max-width:52rem;margin:0 0 var(--space-4);min-height:2.4em}.wfv__statusbar{display:none}.wfv__stage{-webkit-overflow-scrolling:touch;scrollbar-width:thin;border-radius:var(--wfv-radius);border:1px solid var(--wfv-chip-border);background:radial-gradient(circle at 1px 1px, var(--wfv-chip-border) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--wfv-log-bg);position:relative;overflow:auto hidden}.wfv__stage:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.wfv__canvas{min-width:calc(var(--cols) * var(--wfv-col-min) + (var(--cols) - 1) * var(--wfv-gap-x) + 2 * var(--space-4));padding:calc(var(--wfv-gap-y) * .9) var(--space-4) var(--space-8);position:relative}.wfv__edges{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.wfv__grid{grid-template-columns:repeat(var(--cols), minmax(var(--wfv-col-min), 1fr));column-gap:var(--wfv-gap-x);row-gap:var(--wfv-gap-y);z-index:1;grid-auto-rows:minmax(5.25rem,auto);display:grid;position:relative}.wfv__lane{grid-column:1/-1;grid-row:var(--r);transform:translateY(calc(var(--wfv-gap-y) * -.78));letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--wfv-text-soft);border-top:1px dashed var(--wfv-chip-border);pointer-events:none;z-index:0;place-self:start stretch;padding-top:.3rem;font-size:.68rem;font-weight:700}.wfv__node{grid-column:var(--c) / span var(--cs);grid-row:var(--r) / span var(--rs);border-radius:var(--wfv-radius);border:1px solid var(--wfv-node-border);background:var(--wfv-node-bg);min-width:0;color:var(--wfv-text);transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-standard);overflow-wrap:anywhere;flex-direction:column;align-self:center;gap:.2rem;padding:.7rem .75rem .75rem;display:flex;position:relative;box-shadow:0 1px #0000000f}.wfv__node:hover{border-color:var(--wfv-edge-live);z-index:3}.wfv__icon{background:var(--wfv-chip-bg);width:1.6rem;height:1.6rem;color:var(--wfv-text-soft);transition:color var(--duration-fast), background-color var(--duration-fast);border-radius:.45rem;place-items:center;margin-bottom:.15rem;display:inline-grid}.wfv__icon svg{fill:none;stroke:currentColor;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round;width:.95rem;height:.95rem}.wfv__label{letter-spacing:-.005em;font-size:.78rem;font-weight:700;line-height:1.25}.wfv__sub{color:var(--wfv-text-soft);font-size:.68rem;line-height:1.3}.wfv__node--webhook .wfv__icon{color:var(--wfv-gold)}.wfv__node--decision{background:linear-gradient(135deg, transparent 0 .6rem, var(--wfv-node-bg) .6rem), var(--wfv-node-bg);border-style:solid}.wfv__node--decision .wfv__icon{color:var(--wfv-blue)}.wfv__node--store .wfv__icon,.wfv__node--status .wfv__icon{color:var(--wfv-info)}.wfv__node--email .wfv__icon{color:var(--wfv-edge-live)}.wfv__node--respond{border-style:dashed}.wfv__node--wait .wfv__icon{color:var(--wfv-gold)}.wfv__node--stop,.wfv__node--external{background:0 0;border-style:dashed}.wfv__node--stop .wfv__icon{color:var(--wfv-warn)}.wfv__node--external .wfv__icon{color:var(--wfv-text-soft)}.wfv__node--virtual .wfv__label{font-weight:600}.wfv__node--status{border-color:color-mix(in srgb, var(--wfv-info) 55%, transparent);background:linear-gradient(180deg, color-mix(in srgb, var(--wfv-info) 12%, transparent), transparent 70%), var(--wfv-node-bg);justify-content:center;align-self:stretch}.wfv__status-value{background:var(--p-night-900);color:var(--wfv-gold);transition:transform var(--duration-fast) var(--ease-out);border:1px solid #ffde5959;border-radius:.4rem;align-self:flex-start;margin-top:.35rem;padding:.3rem .55rem;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:.78rem;font-weight:700;display:inline-block}.wfv--light .wfv__status-value{background:var(--p-night-900)}.wfv__node--status.is-flash .wfv__status-value{animation:wfvFlash .7s var(--ease-out)}@keyframes wfvFlash{0%{transform:scale(1);box-shadow:0 0 #ffde59b3}40%{transform:scale(1.08)}to{transform:scale(1);box-shadow:0 0 0 14px #ffde5900}}.wfv__wait-ring{background:conic-gradient(var(--wfv-gold) var(--sweep,0deg), #ffffff1a 0);opacity:0;width:1.35rem;height:1.35rem;transition:opacity var(--duration-fast);border-radius:50%;position:absolute;top:.55rem;right:.55rem;mask:radial-gradient(circle,#0000 46%,#000 48%)}.wfv__node.is-wait .wfv__wait-ring,.wfv__node.is-waited .wfv__wait-ring{opacity:1}.wfv__node.is-active{border-color:var(--wfv-gold);z-index:3;transform:translateY(-2px);box-shadow:0 0 0 3px #ffde5938,0 12px 28px -14px #0000008c}.wfv__node.is-active .wfv__icon{background:var(--wfv-gold);color:var(--p-night-900)}.wfv__node.is-done{border-color:var(--wfv-edge-live)}.wfv__node.is-done[data-tone=ok]{border-color:var(--wfv-ok)}.wfv__node.is-done[data-tone=warn]{border-color:var(--wfv-warn)}.wfv__node.is-done[data-tone=bad]{border-color:var(--wfv-bad)}.wfv__node.is-done[data-tone=info]{border-color:var(--wfv-info)}.wfv__node.is-muted{opacity:.38;border-style:dashed}.wfv__badge{background:var(--wfv-node-bg-raised);border:1px solid var(--wfv-node-border);opacity:0;width:1.3rem;height:1.3rem;transition:opacity var(--duration-fast), transform var(--duration-base) var(--ease-emphasized);border-radius:50%;place-items:center;display:grid;position:absolute;top:-.55rem;right:-.55rem;transform:scale(.4)}.wfv__badge svg{fill:none;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;width:.8rem;height:.8rem;display:none}.wfv__node.is-done[data-tone=ok] .wfv__badge,.wfv__node.is-done[data-tone=warn] .wfv__badge,.wfv__node.is-done[data-tone=bad] .wfv__badge{opacity:1;transform:scale(1)}.wfv__node[data-tone=ok] .wfv__badge{color:var(--wfv-ok);border-color:var(--wfv-ok)}.wfv__node[data-tone=warn] .wfv__badge{color:var(--wfv-warn);border-color:var(--wfv-warn)}.wfv__node[data-tone=bad] .wfv__badge{color:var(--wfv-bad);border-color:var(--wfv-bad)}.wfv__node[data-tone=ok] .wfv__badge-ok,.wfv__node[data-tone=warn] .wfv__badge-warn,.wfv__node[data-tone=bad] .wfv__badge-bad{display:block}.wfv__skipped{letter-spacing:.06em;text-transform:uppercase;background:var(--wfv-node-bg-raised);border:1px solid var(--wfv-node-border);color:var(--wfv-text-soft);opacity:0;transition:opacity var(--duration-fast);border-radius:999px;padding:.1rem .4rem;font-size:.6rem;font-weight:700;position:absolute;top:-.6rem;left:.6rem}.wfv__node.is-muted .wfv__skipped{opacity:1}.wfv__edge{fill:none;stroke:var(--wfv-edge);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--duration-fast), stroke-width var(--duration-fast), opacity var(--duration-base)}.wfv__edge--branch-no{stroke-dasharray:5 5}.wfv__edge--parallel{stroke:var(--wfv-edge-live);stroke-width:1.8px}.wfv__edge--query{stroke:color-mix(in srgb, var(--wfv-info) 65%, transparent);stroke-dasharray:3 4}.wfv__edge--write{stroke:color-mix(in srgb, var(--wfv-gold) 55%, transparent);stroke-dasharray:3 4}.wfv__edge--external{stroke:var(--wfv-text-soft);stroke-dasharray:2 6;opacity:.7}.wfv__edge.is-live{stroke:var(--wfv-gold);stroke-width:2.6px;stroke-dasharray:none;opacity:1}.wfv__edge.is-live.wfv__edge--query{stroke:var(--wfv-info)}.wfv__edge.is-live.wfv__edge--external{stroke:var(--wfv-text-soft);stroke-width:2px;stroke-dasharray:2 6}.wfv__edge.is-dropped{opacity:.22;stroke-dasharray:4 6}.wfv__edge.is-hover{stroke:var(--wfv-edge-live);stroke-width:2.4px}.wfv__edge.is-hidden{display:none}.wfv__arrowhead{fill:var(--wfv-edge)}.wfv__edge-label{font-family:var(--font-text);letter-spacing:.01em;fill:var(--wfv-text-soft);paint-order:stroke;stroke:var(--wfv-halo);stroke-width:5px;stroke-linejoin:round;text-anchor:middle;dominant-baseline:middle;transition:fill var(--duration-fast);font-size:10.5px;font-weight:700}.wfv__edge-label.is-live{fill:var(--wfv-gold)}.wfv__edge-label.is-dropped{opacity:.4}.wfv__edge-label.is-hidden{display:none}.wfv__packet{opacity:0;transition:opacity var(--duration-fast)}.wfv__packet.is-visible{opacity:1}.wfv__packet-glow{fill:var(--wfv-gold);opacity:.28;transform-origin:50%;transform-box:fill-box;animation:1.6s ease-in-out infinite wfvPulse}.wfv__packet-core{fill:var(--wfv-gold);stroke:var(--p-night-900);stroke-width:2px}.wfv__packet--ok .wfv__packet-core,.wfv__packet--ok .wfv__packet-glow{fill:var(--wfv-ok)}.wfv__packet--warn .wfv__packet-core,.wfv__packet--warn .wfv__packet-glow{fill:var(--wfv-warn)}.wfv__packet--bad .wfv__packet-core,.wfv__packet--bad .wfv__packet-glow{fill:var(--wfv-bad)}.wfv__packet--neutral .wfv__packet-core,.wfv__packet--neutral .wfv__packet-glow{fill:var(--wfv-edge-live)}@keyframes wfvPulse{0%,to{opacity:.28;transform:scale(1)}50%{opacity:.1;transform:scale(1.5)}}.wfv__scroll-hint{letter-spacing:.06em;text-transform:uppercase;color:var(--wfv-text-soft);opacity:0;pointer-events:none;transition:opacity var(--duration-fast);margin:0;font-size:.68rem;font-weight:700;position:absolute;bottom:.5rem;right:.75rem}.wfv__scroll-hint.is-visible{opacity:1}.wfv__footer{gap:var(--space-6);margin-top:var(--space-6);grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start;display:grid}.wfv__log-wrap{border-radius:var(--wfv-radius);border:1px solid var(--wfv-chip-border);background:var(--wfv-log-bg);overflow:hidden}.wfv__log-title{justify-content:space-between;align-items:center;gap:var(--space-3);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--wfv-text-soft);border-bottom:1px solid var(--wfv-chip-border);margin:0;padding:.6rem .9rem;font-size:.7rem;font-weight:700;display:flex}.wfv__log-progress{font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}.wfv__log{scrollbar-width:thin;max-height:12.5rem;font-size:var(--text-small);line-height:var(--leading-normal);margin:0;padding:.4rem 0;list-style:none;overflow-y:auto}.wfv__log-item{color:var(--wfv-text-soft);transition:color var(--duration-fast), background-color var(--duration-fast);padding:.4rem .9rem .4rem 1.6rem;position:relative}.wfv__log-item:before{content:"";background:var(--wfv-edge-live);border-radius:50%;width:.4rem;height:.4rem;position:absolute;top:.95rem;left:.75rem}.wfv__log-item[data-tone=ok]:before{background:var(--wfv-ok)}.wfv__log-item[data-tone=warn]:before{background:var(--wfv-warn)}.wfv__log-item[data-tone=bad]:before{background:var(--wfv-bad)}.wfv__log-item[data-tone=info]:before{background:var(--wfv-info)}.wfv__log-item[data-tone=neutral]:before{background:var(--wfv-text-soft)}.wfv__log-item--current{color:var(--wfv-text);background:var(--wfv-chip-bg)}.wfv__log-item--idle,.wfv__log-item--external{font-style:italic}.wfv__notes{gap:var(--space-3);font-size:var(--text-small);line-height:var(--leading-normal);color:var(--wfv-text-soft);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.wfv__notes li{padding-left:1.1rem;position:relative}.wfv__notes li:before{content:"";background:var(--wfv-gold);border-radius:2px;width:.5rem;height:.5rem;position:absolute;top:.55em;left:0;transform:rotate(45deg)}@media (prefers-reduced-motion:no-preference){.wfv:not(.is-revealed) .wfv__node{opacity:0;transform:translateY(10px)}.wfv.is-revealed .wfv__node{animation:wfvNodeIn .6s var(--ease-out) both;animation-delay:calc(var(--c) * 55ms + var(--r) * 35ms)}.wfv:not(.is-revealed) .wfv__edges{opacity:0}.wfv.is-revealed .wfv__edges{animation:wfvFade .8s var(--ease-out) .35s both}}@keyframes wfvNodeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes wfvFade{0%{opacity:0}to{opacity:1}}@media (width<=1023px){.wfv__footer{grid-template-columns:1fr}}@media (width<=767px){.wfv{padding:var(--space-4);--wfv-gap-y:1.6rem}.wfv__head{flex-direction:column}.wfv__scenarios{border-radius:var(--wfv-radius)}.wfv__scenario{text-align:center;flex:auto}.wfv__replay{justify-content:center;width:100%}.wfv__canvas{min-width:0;padding:var(--space-6) var(--space-3) var(--space-6)}.wfv__grid{grid-template-columns:repeat(var(--mcols), minmax(0, 1fr));grid-auto-rows:minmax(4.25rem,auto);column-gap:.75rem}.wfv__node{grid-column:var(--mc) / span 1;grid-row:var(--mr) / span 1;padding:.6rem .65rem}.wfv__node--status{flex-flow:wrap;grid-column:1/-1;align-self:center;align-items:center;gap:.5rem .75rem}.wfv__node--status .wfv__status-value{margin-top:0;margin-left:auto}.wfv__lane{grid-row:var(--mr);transform:translateY(calc(var(--wfv-gap-y) * -.72))}.wfv__lane[data-has-mobile=false]{display:none}.wfv__statusbar.is-enabled{z-index:5;margin-bottom:var(--space-3);border-radius:var(--wfv-radius);border:1px solid color-mix(in srgb, var(--wfv-info) 55%, transparent);background:var(--p-night-900);color:var(--p-paper-050);font-size:var(--text-small);flex-direction:column;gap:.35rem;padding:.55rem .75rem;display:flex;position:sticky;top:5.25rem;box-shadow:0 10px 24px -12px #0009}.wfv__statusbar-now{-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:1.35em;line-height:1.35;display:-webkit-box;overflow:hidden}.wfv__statusbar-now:empty:before{content:"Press Play, or scroll — the first scenario starts automatically.";color:#f2f8fa99;font-style:italic}.wfv__statusbar-sheet{justify-content:space-between;align-items:center;gap:var(--space-3);border-top:1px solid #ffffff1f;padding-top:.35rem;display:flex}.wfv__statusbar-sheet[hidden]{display:none}.wfv__statusbar-key{letter-spacing:.03em;text-transform:uppercase;color:#f2f8fab3;font-size:.68rem;font-weight:700}.wfv__statusbar-value{color:var(--wfv-gold);font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-weight:700}.wfv__statusbar.is-flash .wfv__statusbar-value{animation:wfvFlash .7s var(--ease-out)}.wfv__log{max-height:10rem}}