html .architecture-graphic{--dg-bg:var(--surface);--dg-panel:var(--subtle);--dg-ink:var(--text);--dg-muted:var(--muted);--dg-core:var(--accent-soft);--dg-border:var(--line);--dg-data:var(--accent)}
html[data-theme=light] .architecture-graphic{--dg-write:#197d79;--dg-optional:#8762a9;--dg-exec:#e1f5f0;--dg-store:#fff0d5;--dg-service:#f1eafa}
html[data-theme=dark] .architecture-graphic{--dg-write:#6dd1c2;--dg-optional:#c2a1e1;--dg-exec:#173e3d;--dg-store:#413725;--dg-service:#352b45}
.architecture-figure{margin:25px 0;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.diagram-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.diagram-toolbar>strong{font-size:13px;white-space:nowrap}.diagram-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}.diagram-controls button{display:none;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:3px 7px;border-radius:4px;font-size:11px}.architecture-figure[data-interactive] .diagram-controls button{display:block}.diagram-controls button:disabled{opacity:.4;cursor:default}.diagram-controls a{font-size:11px;color:var(--accent);white-space:nowrap}.diagram-controls output{display:none;font:10px var(--mono);color:var(--muted);min-width:34px;text-align:center}.architecture-figure[data-interactive] .diagram-controls output{display:block}
.diagram-viewport{overflow:auto;max-height:none;overscroll-behavior:contain;scrollbar-gutter:stable}.architecture-figure[data-zoomed]:not(:fullscreen) .diagram-viewport{max-height:650px}.diagram-canvas{width:100%;min-width:0}.diagram-canvas>svg.architecture-graphic{display:block;width:100%;height:auto;max-width:none}.architecture-figure figcaption{padding:10px 14px;font-size:11px;line-height:1.8;color:var(--muted);border-top:1px solid var(--line)}
.architecture-figure:fullscreen{display:flex;flex-direction:column;border:0;border-radius:0;width:100%;height:100%;margin:0;padding:16px;background:var(--bg)}.architecture-figure:fullscreen .diagram-viewport{flex:1;max-height:none;min-height:0}.architecture-figure:fullscreen .diagram-toolbar{flex-shrink:0}
@media(max-width:700px){.diagram-toolbar{align-items:flex-start;flex-direction:column;gap:8px;padding:11px}.diagram-controls{justify-content:flex-start;gap:5px}.diagram-toolbar>strong{font-size:12px}.architecture-figure figcaption{padding:9px 11px;font-size:10px}.architecture-figure[data-zoomed]:not(:fullscreen) .diagram-viewport{max-height:480px}.architecture-figure:fullscreen{padding:8px}}