.workflow-visual{margin:0;padding:0;min-width:0}

.workflow-visual{--workflow-purple:rgb(122, 77, 255);--workflow-ink:rgb(11, 11, 12);--workflow-card-color:rgb(255, 255, 255);position:relative;width:100%;font-family:var(--sans), system-ui, sans-serif;color:var(--workflow-ink);isolation:isolate}
.workflow-visual .workflow-field{position:absolute;inset:-72px -56px -40px;z-index:-1;background-image:radial-gradient(color-mix(in srgb,var(--workflow-ink) 24%,transparent) 1.6px,transparent 2px);background-size:26px 26px;-webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);pointer-events:none}
.workflow-visual .workflow-heading{display:flex;justify-content:space-between;align-items:center;padding:0 6px 4px;font-family:"Geist Mono", ui-monospace, monospace;font-size:12px;letter-spacing:.02em;color:color-mix(in srgb,var(--workflow-ink) 38%,transparent)}
.workflow-visual .workflow-heading b{font-weight:400;color:var(--workflow-ink)}
.workflow-visual .workflow-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--workflow-purple);margin-right:8px;vertical-align:middle;animation:workflow-ping 2s infinite}
@keyframes workflow-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--workflow-purple) 45%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.workflow-visual svg{display:block;width:100%;height:auto;margin:6px 0;overflow:visible}
.workflow-visual .workflow-card{fill:var(--workflow-card-color);stroke:color-mix(in srgb,var(--workflow-ink) 8%,transparent);stroke-width:1}
.workflow-visual .workflow-node{filter:drop-shadow(0 14px 22px rgba(11,11,12,.10)) drop-shadow(0 2px 4px rgba(11,11,12,.05))}
.workflow-visual .workflow-icon-background{fill:color-mix(in srgb,var(--workflow-ink) 5%,var(--workflow-card-color));stroke:none}
.workflow-visual .workflow-icon-lines{fill:none;stroke:var(--workflow-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.workflow-visual .workflow-node-title{font-family:"Inter Tight", var(--sans), system-ui, sans-serif;font-size:16px;font-weight:500;fill:var(--workflow-ink);letter-spacing:-0.01em}
.workflow-visual .workflow-node-subtitle{font-family:var(--sans), system-ui, sans-serif;font-size:12.5px;fill:color-mix(in srgb,var(--workflow-ink) 58%,transparent)}
.workflow-visual .workflow-wire{fill:none;stroke:color-mix(in srgb,var(--workflow-ink) 18%,transparent);stroke-width:1.5}
.workflow-visual .workflow-flow{fill:none;stroke:var(--workflow-purple);stroke-opacity:.5;stroke-width:1.5;stroke-dasharray:2 9;stroke-linecap:round;animation:workflow-dash 1.6s linear infinite}
@keyframes workflow-dash{to{stroke-dashoffset:-22}}
.workflow-visual .workflow-dot,.workflow-visual .workflow-signal-halo{fill:var(--workflow-purple)}
.workflow-visual .workflow-crm .workflow-card{animation:workflow-crm-pulse 5s infinite}
.workflow-visual .workflow-slack .workflow-card{animation:workflow-slack-pulse 5s infinite}
@keyframes workflow-crm-pulse{0%,64%,82%,100%{stroke:color-mix(in srgb,var(--workflow-ink) 8%,transparent);fill:var(--workflow-card-color)}68%,74%{stroke:var(--workflow-purple);fill:color-mix(in srgb,var(--workflow-purple) 9%,var(--workflow-card-color))}}
@keyframes workflow-slack-pulse{0%,88%,100%{stroke:color-mix(in srgb,var(--workflow-ink) 8%,transparent);fill:var(--workflow-card-color)}91%,96%{stroke:var(--workflow-purple);fill:color-mix(in srgb,var(--workflow-purple) 9%,var(--workflow-card-color))}}
.workflow-visual .workflow-agent{filter:drop-shadow(0 16px 26px color-mix(in srgb,var(--workflow-purple) 25%,transparent))}
.workflow-visual .workflow-agent-halo{fill:var(--workflow-purple);opacity:.06;transform-box:fill-box;transform-origin:center;animation:workflow-agent-pulse 5s infinite}
@keyframes workflow-agent-pulse{0%,26%,60%,100%{opacity:.06;transform:scale(1)}36%,48%{opacity:.16;transform:scale(1.14)}}
.workflow-visual .workflow-agent-ring{fill:none;stroke:var(--workflow-purple);stroke-opacity:.45;stroke-width:1.2;stroke-dasharray:4 6;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;animation:workflow-orbit 14s linear infinite}
@keyframes workflow-orbit{to{transform:rotate(360deg)}}
.workflow-visual .workflow-agent-body{stroke-linejoin:round;stroke-width:8}
.workflow-visual .workflow-agent-body.workflow-glass{fill:url(#workflow-glass-gradient);stroke:var(--workflow-card-color)}
.workflow-visual .workflow-agent-body.workflow-solid{fill:url(#workflow-core-gradient);stroke:url(#workflow-core-gradient)}
.workflow-visual .workflow-agent-edge{fill:none;stroke:var(--workflow-purple);stroke-width:1.5;stroke-linejoin:round}
.workflow-visual .workflow-inner-glass{fill:none;stroke:color-mix(in srgb,var(--workflow-purple) 35%,transparent);stroke-width:1;stroke-dasharray:3 4;stroke-linejoin:round}
.workflow-visual .workflow-inner-solid{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1;stroke-linejoin:round}
.workflow-visual .workflow-solid-layer{opacity:0;transform-box:fill-box;transform-origin:center;animation:workflow-to-solid 5s infinite}
.workflow-visual .workflow-glass-layer{animation:workflow-to-glass 5s infinite}
@keyframes workflow-to-solid{0%,26%{opacity:0;transform:scale(.92)}31%{opacity:1;transform:scale(1.04)}35%,86%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes workflow-to-glass{0%,26%{opacity:1}31%,86%{opacity:0}96%,100%{opacity:1}}
.workflow-visual .workflow-agent-title{font-family:"Inter Tight", var(--sans), system-ui, sans-serif;font-size:17px;font-weight:500;fill:var(--workflow-ink)}
.workflow-visual .workflow-agent-status{font-family:"Geist Mono", ui-monospace, monospace;font-size:11.5px;fill:var(--workflow-purple)}
.workflow-visual .workflow-events{list-style:none;margin:4px 6px 0;padding:14px 0 0;border-top:1px solid color-mix(in srgb,var(--workflow-ink) 9%,transparent);display:grid;gap:8px;font-size:13px}
.workflow-visual .workflow-events li{display:flex;justify-content:space-between;gap:12px}
.workflow-visual .workflow-events li span:first-child{display:inline-flex;gap:10px;align-items:center}
.workflow-visual .workflow-events i{flex:none;width:16px;height:16px;border-radius:50%;background:var(--workflow-ink);display:grid;place-items:center}
.workflow-visual .workflow-events i svg{width:10px;height:10px;margin:0}
.workflow-visual .workflow-events li span:last-child{font-family:"Geist Mono", ui-monospace, monospace;font-size:12px;color:color-mix(in srgb,var(--workflow-ink) 36%,transparent)}
.workflow-visual.reduce .workflow-dot,.workflow-visual.reduce .workflow-signal-halo{display:none}
.workflow-visual.reduce *{animation:none!important}
.workflow-visual.reduce .workflow-solid-layer{opacity:1}.workflow-visual.reduce .workflow-glass-layer{opacity:0}
@media (max-width:809px){.workflow-visual .workflow-field{inset:-24px -10px -10px}}

@media(prefers-reduced-motion:reduce){.workflow-visual *{animation:none!important}.workflow-dot,.workflow-signal-halo{display:none}.workflow-visual .workflow-solid-layer{opacity:1}.workflow-visual .workflow-glass-layer{opacity:0}}

.operations-window { width: 330px; max-width: 100%; padding: 17px 18px 16px; box-sizing: border-box; border: 1px solid #0b0b0c0d; border-radius: 15px; color: #0b0b0c; background: #fff; box-shadow: 0 18px 45px #0b0b0c16, 0 3px 8px #0b0b0c08; font-family: var(--sans, "Inter Tight", sans-serif); }
.operations-window-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #0b0b0c10; font-family: var(--mono, "Geist Mono", monospace); font-size: 10px; line-height: 16px; }
.operations-window-heading b { display: flex; align-items: center; gap: 7px; font-weight: 400; }
.operations-window-heading b i { width: 6px; height: 6px; border-radius: 50%; background: #7b46ff; box-shadow: 0 0 0 3px #7b46ff12; }
.operations-window-heading > span { color: #969698; }
.operations-window ul { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.operations-window li { display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 16px; }
.operations-window li > i { display: grid; place-items: center; flex: none; width: 15px; height: 15px; border-radius: 50%; color: #fff; background: #0b0b0c; }
.operations-window li > i svg { display: block; width: 10px; height: 10px; stroke-width: 2; }
.operations-duration { margin-left: auto; color: #929295; font-family: var(--mono, "Geist Mono", monospace); font-size: 10px; white-space: nowrap; }
.operations-window .operations-pending > i { color: transparent; border: 1.5px solid #7b46ff33; border-top-color: #7b46ff; box-sizing: border-box; background: none; animation: workflow-orbit 1.1s linear infinite; }

/* A signal passes through each stage marker every three seconds. */
.milestone-visual{position:relative;width:100%;height:180px;display:flex;justify-content:center;color:var(--ink)}
.milestone-track{position:relative;width:60px;height:100%}
.milestone-wire,.milestone-signal{position:absolute;inset:0;width:60px;height:100%;overflow:visible}
.milestone-line{fill:none;stroke:#0b0b0c29;stroke-width:1.2;vector-effect:non-scaling-stroke}
.milestone-flow{fill:none;stroke:var(--purple);stroke-opacity:.5;stroke-width:1.2;stroke-dasharray:2 8;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:milestone-dash 1.6s linear infinite}
.milestone-core{position:absolute;left:0;top:50%;width:60px;height:60px;margin-top:-30px;overflow:visible}
.milestone-glass{fill:white;stroke:white;stroke-width:6;stroke-linejoin:round;filter:drop-shadow(0 8px 14px #7a4dff33)}
.milestone-solid{stroke-width:6;stroke-linejoin:round;opacity:0;animation:milestone-fill 3s infinite}
.milestone-spark{fill:var(--purple);animation:milestone-spark 3s infinite}
.milestone-content{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;text-align:left;font-family:var(--sans)}
.milestone-content b{display:block;font:400 12px var(--mono);letter-spacing:.02em;color:var(--purple)}
.milestone-content small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:#0b0b0c94}
@keyframes milestone-dash{to{stroke-dashoffset:-20}}
@keyframes milestone-fill{0%,42%{opacity:0}50%,80%{opacity:1}92%,100%{opacity:0}}
@keyframes milestone-spark{0%,42%{fill:var(--purple)}50%,80%{fill:white}92%,100%{fill:var(--purple)}}
@media(max-width:809px){.milestone-content{white-space:normal;width:calc(50vw - 52px)}.milestone-content small{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){.milestone-visual *{animation:none!important}.milestone-solid{opacity:1}.milestone-spark{fill:white}.milestone-signal{display:none}}

@keyframes workflow-live { 0%, 100% { box-shadow: 0 0 0 0 #7b46ff40; } 70% { box-shadow: 0 0 0 7px #7b46ff00; } }
@keyframes workflow-dash { to { stroke-dashoffset: -22; } }
@keyframes workflow-orbit { to { transform: rotate(360deg); } }





@media (prefers-reduced-motion: reduce) {
  .workflow-live, .workflow-flow, .workflow-agent-ring, .operations-window .operations-pending > i { animation: none; }
  .workflow-signal { display: none; }
  .workflow-node, .workflow-agent-halo { transition: none; }
}

.operations-window{padding:16px;border-radius:20px;background:#ffffffd1;backdrop-filter:blur(18px) saturate(140%);box-shadow:0 20px 40px -20px #0b0b0c59}
.operations-window ul{gap:6px;margin-top:12px}
.operations-window li{font-size:13px;padding:8px 10px;border-radius:12px;background:#f2f2f0cc}
.operations-window .operations-window-heading{border:0;padding:0}
.operations-window .operations-pending>i svg{display:none}
.operations-window li.is-updated{animation:operations-row-in .6s cubic-bezier(.22,1,.36,1)}
@keyframes operations-row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.operations-window li.is-updated{animation:none}}

.operations-window{--workflow-purple:var(--purple);border:0}
.operations-window-heading b>i{animation:workflow-ping 2s infinite}
.operations-window .operations-pending>i{animation-duration:1s}

@media(min-width:810px) and (max-width:1439px){.workflow-visual .workflow-field{left:-32px;right:-32px}}