.architecture-diagram {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.diagram-canvas { fill: var(--vs-canvas-deep); stroke: var(--vs-border-strong); }
.diagram-node rect { fill: var(--vs-surface); stroke: var(--vs-border-strong); }
.diagram-node-accent rect { fill: var(--vs-surface-soft); stroke: var(--vs-accent); }
.architecture-diagram text { fill: var(--vs-heading); font-size: 17px; font-weight: 600; }
.architecture-diagram .diagram-sub { fill: var(--vs-copy); font-size: 13px; font-weight: 400; }
.architecture-diagram .diagram-eyebrow,
.architecture-diagram .diagram-foot { fill: var(--vs-muted); font: 11px "DM Mono", monospace; letter-spacing: 1px; }
.diagram-wire, .diagram-flow, .diagram-legacy { fill: none; stroke-width: 2; stroke-linejoin: round; }
.diagram-wire { stroke: var(--vs-border-strong); }
.diagram-flow { stroke: var(--vs-accent); stroke-dasharray: 9 19; animation: architecture-flow 2s linear infinite; }
.diagram-legacy { stroke: var(--vs-muted); stroke-dasharray: 4 7; opacity: 0.45; }
.diagram-status rect { fill: var(--vs-surface-soft); stroke: var(--vs-border); }
.diagram-status text { font-size: 12px; fill: var(--vs-copy); }
.diagram-signal { fill: var(--vs-teal); animation: architecture-signal 2s ease-in-out infinite; }
.architecture-diagram.motion-offscreen .diagram-flow,
.architecture-diagram.motion-offscreen .diagram-signal,
.motion-page-hidden .diagram-flow,
.motion-page-hidden .diagram-signal { animation-play-state: paused; }
@keyframes architecture-flow { to { stroke-dashoffset: -56; } }
@keyframes architecture-signal { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .diagram-flow, .diagram-signal { animation: none; }
  .diagram-flow { stroke-dasharray: none; opacity: 0.8; }
}