mermaid js

assets/styles/style.css

@@ -799,11 +799,14 @@ body.no-sidenotes {
 
 /* Mermaid container for zooming and panning */
 .mermaid-container {
-  overflow: auto;           /* allow scrolling */
+  overflow: auto;
   width: 100%;
-  max-height: 800px;        /* adjust to your page */
-  border: 1px solid #ccc;   /* optional, visual boundary */
+  max-height: 800px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: color-mix(in oklab, var(--surface) 88%, var(--bg) 12%);
   position: relative;
+  margin: 1.5rem 0;
 }
 
 /* Make SVG scale properly */
@@ -825,13 +828,14 @@ body.no-sidenotes {
 .mermaid-zoom-controls button {
   padding: 5px 10px;
   margin-left: 5px;
-  background: #007bff;
-  color: white;
-  border: none;
+  background: var(--surface);
+  color: var(--fg);
+  border: 1px solid var(--border);
   border-radius: 4px;
   cursor: pointer;
 }
 
 .mermaid-zoom-controls button:hover {
-  background: #0056b3;
+  background: var(--accent);
+  color: var(--surface);
 }