style(mermaid): add dark theme styling with transparent backgrounds

Override mermaid's default white backgrounds to blend with dark theme:
- Transparent SVG background
- Node fills use --bg-sidebar
- Labels use --fg color
- Edges use --fg-muted

docs/static/style.css

@@ -268,6 +268,11 @@ a:hover {
   overflow-x: auto;
 }
 
+/* Hide katex-html (requires CDN fonts), use native MathML rendering instead */
+.katex-html {
+  display: none;
+}
+
 /* Fallback: constrain radical SVG when CDN blocked */
 .hide-tail svg {
   max-width: 100% !important;
@@ -419,6 +424,49 @@ pre code {
   color: #bd93f9;
 }
 
+/* Mermaid diagrams */
+.mermaid-diagram {
+  margin: 1.5rem 0;
+}
+
+.mermaid-diagram svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Hide mermaid's baked-in white background rect */
+.mermaid-diagram svg > rect:first-child {
+  fill: transparent !important;
+}
+
+/* Override mermaid's default white backgrounds */
+.mermaid-diagram .cluster rect,
+.mermaid-diagram .node rect,
+.mermaid-diagram .node circle,
+.mermaid-diagram .node ellipse,
+.mermaid-diagram .node polygon {
+  fill: var(--bg-sidebar) !important;
+  stroke: var(--border) !important;
+}
+
+.mermaid-diagram .edgeLabel {
+  background-color: var(--bg) !important;
+  color: var(--fg) !important;
+}
+
+.mermaid-diagram .label {
+  color: var(--fg) !important;
+}
+
+.mermaid-diagram .edgePath path {
+  stroke: var(--fg-muted) !important;
+}
+
+.mermaid-diagram .arrowheadPath {
+  fill: var(--fg-muted) !important;
+}
+
 /* Section navigation */
 .section-nav {
   display: flex;