/* Inline SVG schematics: one shared grid, card, and connector system.
   Voidline: mint marks the one live path, ink the secondary path, hairline
   strokes, mono labels on the void dot-mesh stage. */
.system-diagram { margin:26px 0 30px; border:1px solid var(--rule); border-radius:var(--r-plate); background-color:var(--panel); background-image:radial-gradient(circle, rgba(255,255,255,.07) 1.1px, transparent 1.1px); background-size:16px 16px; background-position:8px 8px; padding:16px; max-width:100%; }
.system-diagram svg { display:block; width:100%; height:auto; max-width:100%; }
.system-diagram figcaption { color:var(--muted); border-top:1px solid var(--rule); margin-top:13px; padding:11px 2px 0; font-family:var(--font-mono); font-size:10px; line-height:1.6; }
.system-diagram figcaption span { color:var(--dim); display:block; font-size:9px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; }
.diagram-zone { fill:rgba(11,12,11,.82); stroke:rgba(255,255,255,.13); stroke-dasharray:5 5; }.diagram-zone-title { fill:#808080; font:10px ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace; letter-spacing:1.1px; }.diagram-card { fill:var(--hover); stroke:rgba(255,255,255,.13); stroke-width:1; }.diagram-card.acid { stroke:#5BE49B; }.diagram-card.blue { stroke:#F5F5F5; }.diagram-card-title { fill:#F5F5F5; font:600 14px -apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif; letter-spacing:.3px; }.diagram-card-copy { fill:#A3A3A3; font:11px ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace; letter-spacing:.1px; }.diagram-kicker { fill:#808080; font:10px ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace; letter-spacing:1.2px; }.diagram-connector { fill:none; stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter; }.diagram-bus { fill:none; stroke-width:1.35; stroke-linecap:square; stroke-linejoin:miter; }.diagram-connector.green,.diagram-bus.green { stroke:#5BE49B; }.diagram-connector.blue,.diagram-bus.blue { stroke:#F5F5F5; }.diagram-marker-green { fill:#5BE49B; stroke:none; }.diagram-marker-blue { fill:#F5F5F5; stroke:none; }.diagram-connector-label { fill:#808080; font:10px ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace; letter-spacing:.45px; }.blue-text { fill:#F5F5F5; }.diagram-lane { stroke:rgba(255,255,255,.13); stroke-width:1; }.diagram-bar { stroke-width:1; }.acid-fill { fill:#5BE49B; stroke:#5BE49B; }.blue-fill { fill:#F5F5F5; stroke:#F5F5F5; }.muted-fill { fill:var(--raised); stroke:#F5F5F5; }.diagram-bar-text { fill:var(--panel); font:700 11px ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace; letter-spacing:.4px; }
@media (max-width:760px) { .system-diagram { margin:20px 0 24px; padding:12px; }.system-diagram svg { display:none; }.system-diagram::before { content:attr(data-mobile-flow); display:block; color:var(--ink); padding:15px; border:1px solid var(--rule-bright); background:var(--hover); font:12px/1.7 ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }.system-diagram figcaption { margin-top:10px; font-size:9px; } }