.agent-flow-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.agent-flow[data-variant="a"] .agent-flow-art,
.agent-flow:not([data-variant="a"]) #agent-flow-canvas { display: none; }
.agent-flow-art svg { display: block; width: 100%; height: 100%; }
.agent-flow[data-variant="b"] .agent-flow-art,
.agent-flow[data-variant="c"] .agent-flow-art { pointer-events: auto; }

.agent-art-grid { opacity: .74; }
.agent-art-word { font-family: Inter, Arial, sans-serif; font-size: 42px; font-weight: 570; letter-spacing: -1.8px; text-anchor: middle; }
.agent-art-b-outline { fill: transparent; stroke: #aeb8c0; stroke-width: 1.05px; stroke-opacity: .54; }
.agent-art-b-fill { fill: #414b54; opacity: 0; transition: opacity 180ms cubic-bezier(.22, 1, .36, 1); }
.agent-flow-art--b.is-hovered .agent-art-b-fill { opacity: .94; }
.agent-overview.is-paused .agent-art-b-fill { opacity: 0; }

.agent-art-c-base { fill: #b9c3ca; opacity: .22; font-size: 41px; font-weight: 570; letter-spacing: -1.7px; text-anchor: middle; }
.agent-art-c-refracted { fill: #3d4b56; opacity: .88; font-size: 42.5px; font-weight: 580; letter-spacing: -1.8px; text-anchor: middle; }
.agent-art-c-prism { transition: transform 180ms cubic-bezier(.22, 1, .36, 1); }

.agent-flow-art--d { display: flex; align-items: center; justify-content: center; }
.agent-d-stage { position: relative; flex: 0 0 400px; width: 400px; height: 168px; transform: scale(var(--agent-d-scale, 1)); transform-origin: center center; }
.agent-d-links { position: absolute; inset: 0; width: 400px; height: 168px; overflow: visible; }
.agent-d-path { fill: none; stroke: #90b4bc; stroke-width: .9; stroke-linecap: round; opacity: .31; transition: opacity 200ms ease-out, stroke 200ms ease-out; }
.agent-d-path.is-active { stroke: #70aeba; opacity: .56; }
.agent-d-path.is-active.is-outbound { stroke: #358fa3; opacity: .76; }
.agent-d-packet { fill: #2d9ead; opacity: 0; }
.agent-d-packet[data-direction="outbound"] { fill: #1e8797; }
.agent-d-node { position: absolute; width: 40px; height: 40px; transform: translate(-50%, -50%); perspective: 280px; }
.agent-d-node--left-top { left: 106px; top: 51px; }
.agent-d-node--left-bottom { left: 106px; top: 117px; }
.agent-d-node--center { left: 200px; top: 84px; }
.agent-d-node--right-top { left: 294px; top: 51px; }
.agent-d-node--right-bottom { left: 294px; top: 117px; }
.agent-d-cube { position: absolute; top: 4px; left: 4px; width: 32px; height: 32px; transform-style: preserve-3d; transform: rotateX(-27deg) rotateY(45deg); transition: transform 540ms cubic-bezier(.22, 1, .36, 1); }
.agent-d-node--center::before { content: ""; position: absolute; left: 6px; top: 31px; width: 28px; height: 7px; border-radius: 50%; background: rgba(57, 113, 128, .07); filter: blur(5px); pointer-events: none; }
.agent-d-node--center .agent-d-cube { top: 2px; left: 2px; width: 36px; height: 36px; }
.agent-d-face { position: absolute; inset: 0; border: 1px solid rgba(84, 134, 146, .18); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .54); backface-visibility: hidden; transition: filter 220ms ease-out; }
.agent-d-face::after { content: ""; position: absolute; inset: 0; background: var(--agent-d-face-tint); opacity: 0; transition: opacity 300ms cubic-bezier(.22, 1, .36, 1); }
.agent-d-node[data-surface="accent"] .agent-d-face::after { opacity: .22; }
.agent-d-node--center[data-surface="accent"] .agent-d-face::after { opacity: .38; }
.agent-d-face--front { --agent-d-face-tint: #93cbd5; transform: translateZ(16px); background: linear-gradient(135deg, #fff, #f2f7f8); }
.agent-d-face--back { --agent-d-face-tint: #6baab8; transform: rotateY(180deg) translateZ(16px); background: #edf3f4; }
.agent-d-face--right { --agent-d-face-tint: #8ac3ce; transform: rotateY(90deg) translateZ(16px); background: #f1f6f7; }
.agent-d-face--left { --agent-d-face-tint: #6fa9b6; transform: rotateY(-90deg) translateZ(16px); background: #eaf1f3; }
.agent-d-face--top { --agent-d-face-tint: #d2ebef; transform: rotateX(90deg) translateZ(16px); background: linear-gradient(130deg, #fff, #f7fafb); }
.agent-d-face--bottom { --agent-d-face-tint: #77aebb; transform: rotateX(-90deg) translateZ(16px); background: #e9f0f2; }
.agent-d-node--center .agent-d-face { border-color: rgba(52, 109, 125, .24); }
.agent-d-node--center .agent-d-face--front { --agent-d-face-tint: #4f9aa9; transform: translateZ(18px); }
.agent-d-node--center .agent-d-face--back { --agent-d-face-tint: #3f8191; transform: rotateY(180deg) translateZ(18px); }
.agent-d-node--center .agent-d-face--right { --agent-d-face-tint: #5c9fac; transform: rotateY(90deg) translateZ(18px); }
.agent-d-node--center .agent-d-face--left { --agent-d-face-tint: #438593; transform: rotateY(-90deg) translateZ(18px); }
.agent-d-node--center .agent-d-face--top { --agent-d-face-tint: #b9e0e7; transform: rotateX(90deg) translateZ(18px); }
.agent-d-node--center .agent-d-face--bottom { --agent-d-face-tint: #508d9a; transform: rotateX(-90deg) translateZ(18px); }
.agent-d-node--center.is-processing .agent-d-face { filter: brightness(1.01); }

@media (min-width: 841px) and (max-width: 960px) {
  .agent-flow-art--b svg, .agent-flow-art--c svg { transform: translateY(-8px) scale(.9); transform-origin: center top; }
  .agent-flow-art--d { align-items: flex-start; }
  .agent-d-stage { transform-origin: center top; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-art-b-fill, .agent-art-c-prism, .agent-d-path, .agent-d-cube, .agent-d-face, .agent-d-face::after { transition: none; }
}