/* Lecture-note components for the rewritten supplementary pages (suppA–G). */
figure.diag { margin: 18px 0; }
.diagwrap { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: 8px; overflow-x: auto; }
.diagwrap > svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.diagwrap > svg text { font-family: var(--f-body); font-size: 13px; fill: var(--ink); }
.diagwrap > svg text.m { fill: var(--muted); font-size: 12px; }
figure.diag figcaption { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.65; }
.ex { border-left: 3px solid var(--c3); padding: 4px 0 4px 14px; margin: 16px 0; }
.ex > .t { display: block; font-size: 12px; font-family: var(--f-mono); letter-spacing: .08em; color: var(--c3); margin-bottom: 2px; }
.steps { padding-left: 1.4em; }
.steps > li { margin: 6px 0; }
.tldr { border: 1px solid var(--accent); border-radius: 10px; padding: 8px 14px; margin: 18px 0 12px; font-size: 15px; }
.tldr b { color: var(--accent); }
.guide { font-size: 14.5px; margin: 10px 0 12px; }
.guide > b { color: var(--accent); }
.guide ul { margin: 4px 0; padding-left: 1.3em; }
.warnbox { background: var(--note-soft); border-radius: 10px; padding: 10px 16px; margin: 14px 0; }
.warnbox b { color: var(--note); }
ol.pagetoc { font-size: 14.5px; padding-left: 1.6em; line-height: 1.75; margin: 6px 0; }