/* SVG の図（learn_gen.py figures が描く）。色は class だけで決めるので明暗どちらでも読める */
.fig { margin: var(--space-4) 0; }
.fig svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; font-family: var(--font-ui); }
.fig figcaption { font-size: var(--text-sm); color: var(--muted); text-align: center; margin-top: var(--space-2); }
.fig .box { fill: var(--surface); stroke: var(--border); stroke-width: 1.2; }
.fig .box2 { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 1.2; }
.fig .boxok { fill: color-mix(in srgb, var(--success) 16%, var(--surface)); stroke: var(--success); stroke-width: 1.2; }
.fig .boxng { fill: color-mix(in srgb, var(--error) 16%, var(--surface)); stroke: var(--error); stroke-width: 1.2; }
.fig .line { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.fig .line2 { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.fig .dash { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 3; }
.fig .arrowhead { fill: var(--muted); stroke: none; }
.fig .txt { fill: var(--fg); }
.fig .txt2 { fill: var(--accent-text); font-weight: 600; }
.fig .muted { fill: var(--muted); }
.fig .head { fill: var(--fg); font-weight: 700; }