
/* Diagrams: scale nicely, center, keep aspect */
img.diagram {
  display: block;
  margin: 1.25rem auto;
  max-width: 90%;        /* responsive within column */
  height: auto;
}

/* If you sometimes embed big raw <svg> blocks */
svg.diagram {
  display: block;
  margin: 1.25rem auto;
  max-width: 90%;
  height: auto;
}

/* Optional: only shrink SVGs, leave PNGs alone */
img[src$=".svg"].diagram { max-width: 100%; }

/* Optional dark-mode tweaks for diagram backgrounds, if needed */
@media (prefers-color-scheme: dark) {
  .page { color-scheme: dark; }
  /* If your SVGs have transparent backgrounds and look too stark, soften the page bg */
  :root { --diagram-bg: rgba(255,255,255,0.02); }
  img.diagram { background: var(--diagram-bg); border-radius: 6px; }
}