.docs-diagram {
 --diagram-text:var(--text); --diagram-note:var(--text-2); --diagram-line:var(--text-2);
 --diagram-accent:var(--accent); --diagram-fill:var(--aster-accent-soft);
 margin:24px 0; container-type:inline-size;
}
.diagram-scroll { overflow-x:auto; border:1px solid var(--rule); border-radius:8px; padding:16px; }
.diagram-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.docs-diagram svg { display:block; width:var(--diagram-width); max-width:none; height:auto; margin:auto; color:var(--diagram-text); font-family:Geist,system-ui,sans-serif; }
.docs-diagram text { fill:var(--diagram-text); font-size:14px; }
.docs-diagram .panel { fill:none; stroke:var(--diagram-line); stroke-width:1; }
.docs-diagram .step { fill:var(--diagram-fill); stroke:var(--diagram-accent); stroke-width:1.5; }
.docs-diagram .arrow { fill:none; stroke:var(--diagram-line); stroke-width:1.5; }
.docs-diagram .arrowhead { fill:var(--diagram-line); }
.docs-diagram .label { font-weight:600; }
.docs-diagram .note { fill:var(--diagram-note); }
.docs-diagram figcaption { margin-top:10px; color:var(--text-2); font-size:14px; }
.diagram-narrow { display:none; }
@container (max-width:600px) {
 .has-narrow .diagram-wide { display:none; }
 .has-narrow .diagram-narrow { display:block; }
}