.vg-process-flow { margin: 0 0 2.5rem; border: 1px solid #dededb; border-radius: 18px; background: #faf9f6; overflow: hidden; color: #172334; }
.vg-flow-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px 0; }
.vg-flow-toolbar p { margin: 0; font-size: 13px; line-height: 1.6; color: #586273; }
.vg-flow-toolbar .vg-flow-eyebrow { font-size: 10px; letter-spacing: .1em; color: #26384f; margin-bottom: 5px; }
#vgFlowScene { display: block; width: 100%; height: auto; }
#vgFlowScene text { stroke: none; fill: currentColor; text-anchor: middle; font-family: "Plus Jakarta Sans", sans-serif; }
.flow-number { font-size: 11px; fill: #69758a !important; letter-spacing: .12em; }
.flow-title { font-size: 20px; font-weight: 600; }
.flow-output { font-size: 15px; font-weight: 600; }
.flow-detail { font-size: 12px; fill: #586273 !important; }
.flow-heading-hit { fill: transparent; stroke: none; }
.flow-card { fill: #fff; stroke: #a6afbc; }
.flow-snapshot { opacity: .85; transition: opacity 150ms ease; }
.flow-station.is-done .flow-snapshot { opacity: 1; }
.flow-station.is-active .flow-heading { color: #345f93; }
.flow-station.is-done .flow-card { stroke: #54708e; }
.flow-drawing { stroke: #334e6d; }
.flow-highlight { stroke: #345f93; }
.flow-success { fill: #e3eee8; stroke: #327255; }
.flow-check { stroke: #327255; }
.flow-link { stroke: #c4cbd3; stroke-dasharray: .05 .05; transition: stroke 150ms ease; }
.flow-link.is-done { stroke: #54708e; stroke-dasharray: none; }
.flow-link.is-active { stroke: #345f93; stroke-dasharray: 1; animation: vg-flow-connect 230ms ease-out both; }
.flow-packet { transform: translate(var(--packet-x), var(--packet-y)); transition: transform var(--travel-time, 100ms) linear; pointer-events: none; }
.flow-inlet rect, .flow-outlet rect { fill: #d6dbe1; stroke: #8795a5; }
.flow-gear { fill: #f0f2f5; stroke: #697e96; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
.flow-core { fill: #55cb91; stroke: none; opacity: 0; }
.flow-station.is-active .flow-snapshot { opacity: 1; }
.flow-station.is-active .flow-card { stroke: #327255; stroke-width: 2; }
.flow-station.is-active .flow-inlet rect, .flow-station.is-done .flow-inlet rect, .flow-station.is-done .flow-outlet rect { fill: #172334; stroke: #172334; }
.flow-station.is-active .flow-gear { animation-duration: 1.4s; stroke: #327255; }
.flow-station.is-done .flow-core { opacity: 1; }
.is-complete [data-stage="4"] .flow-card { stroke: #327255; }
.is-complete [data-stage="4"] .flow-gear { stroke: #327255; }
@keyframes vg-gear-turn { to { transform: rotate(360deg); } }
.vg-flow-caption { display: flex; align-items: center; gap: 10px; margin: 0 28px; padding: 17px 0; border-top: 1px solid #dededb; }
.vg-flow-caption p { flex: 1; margin: 0; color: #465467; font-size: 12px; line-height: 1.6; }
.vg-flow-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #54708e; }
.is-complete .vg-flow-dot { background: #327255; }
.vg-flow-duration { white-space: nowrap; font-size: 10px; color: #647084; }
@keyframes vg-flow-connect { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 680px) {
 .vg-flow-toolbar { padding: 20px 18px 8px; align-items: flex-start; flex-direction: column; gap: 12px; }
 .vg-flow-caption { margin: 0 18px; align-items: flex-start; }
 .vg-flow-dot { margin-top: 6px; }
 .vg-flow-duration { display: none; }
 .flow-heading-hit { x: 0; y: -52; width: 168px; height: 52px; }
 #vgFlowScene .flow-heading text, #vgFlowScene .flow-output, #vgFlowScene .flow-detail { text-anchor: start; }
 .flow-title { font-size: 18px; }
 .flow-output { font-size: 14px; }
 .flow-detail { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
 .vg-process-flow *, .vg-process-flow *::before { animation: none !important; transition: none !important; }
}

.flow-fragment { transform-box: fill-box; transform-origin: center; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.flow-fragment-float { transform-box: fill-box; transform-origin: center; animation: vg-fragment-float 3.6s ease-in-out var(--delay, 0s) infinite; }
.flow-station.is-active .flow-fragment, .flow-station.is-done .flow-fragment { transform: translate(0, 0) rotate(0); }
.flow-station.is-active .flow-fragment-float, .flow-station.is-done .flow-fragment-float { animation-name: vg-fragment-work; animation-duration: 2.4s; }
.flow-assembly-link { opacity: .2; stroke: #327255; stroke-dasharray: 2 4; transition: opacity 500ms; }
.flow-station.is-active .flow-assembly-link, .flow-station.is-done .flow-assembly-link { opacity: 1; stroke-dasharray: none; }
.flow-signal { fill: #55cb91; stroke: #327255; }
.flow-gear { animation: vg-gear-turn 12s linear infinite; }
.flow-station.is-done .flow-gear { animation-duration: 6s; }
.flow-station.is-active .flow-highlight { stroke: #327255; }
.flow-ai { animation: vg-ai-breathe 2s ease-in-out infinite; }
.flow-ai-body { fill: #172334; stroke: #62dfa2; stroke-width: 1.2; }
.flow-ai-circuit { stroke: #62dfa2; stroke-width: 1; }
.flow-ai-light { fill: #82ffc0; stroke: none; filter: drop-shadow(0 0 2px #3fd78d); }
.flow-ai-orbit { stroke: #3fab76; stroke-width: 1; stroke-dasharray: 5 7; opacity: .7; animation: vg-gear-turn 5s linear infinite; }
.vg-process-flow:not(.is-visible) * { animation-play-state: paused; }
@keyframes vg-fragment-float { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 50% { transform: translate(1px, -3px) rotate(2deg); } }
@keyframes vg-fragment-work { 0%, 100% { transform: translateY(0); stroke-opacity: 1; } 50% { transform: translateY(-1px); stroke-opacity: .7; } }
@keyframes vg-ai-breathe { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.06); } }