Enable automatic transitions on node hover

assets/css/custom.css

@@ -7,6 +7,28 @@
     font-weight: 400;
     font-style: normal;
     font-display: swap;
+n/* Noto Sans SC — self-hosted */
+@font-face {
+    font-family: "Noto Sans SC";
+    src: url("/fonts/noto-sans-sc-400.ttf") format("truetype");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: "Noto Sans SC";
+    src: url("/fonts/noto-sans-sc-500.ttf") format("truetype");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: "Noto Sans SC";
+    src: url("/fonts/noto-sans-sc-700.ttf") format("truetype");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
 }
 
 /* Global font stack: English → Chinese → system fallback */

layouts/_partials/custom/head-end.html

@@ -1,11 +1,3 @@
-<!-- Custom fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-    href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
-    rel="stylesheet"
-/>
-
 <!-- Expand sidebar tree by default -->
 <script>
     document.addEventListener("DOMContentLoaded", function () {
@@ -18,7 +10,7 @@
     });
 </script>
 
-<!-- Mermaid config + viewBox from g bounds -->
+<!-- Mermaid config + viewBox from all g elements -->
 <script>
     (function () {
         function patch() {
@@ -29,7 +21,8 @@
                 cfg.flowchart = cfg.flowchart || {};
                 cfg.flowchart.useMaxWidth = true;
                 cfg.flowchart.wrappingWidth = 180;
-                cfg.theme = "neutral";
+                cfg.theme = "base";
+                cfg.themeVariables = cfg.themeVariables || {};
                 return orig.call(this, cfg);
             };
         }
@@ -37,20 +30,30 @@
 
         function fixViewBox() {
             document.querySelectorAll(".mermaid svg").forEach(function (svg) {
-                var g = svg.querySelector("g");
+                if (svg.getAttribute("aria-roledescription") === "pie") return;
-                if (!g) return;
+                var groups = svg.querySelectorAll("g");
-                var bb = g.getBBox();
+                if (!groups.length) return;
-                if (!bb || bb.width === 0 || bb.height === 0)
+                var minX = Infinity,
-                    return setTimeout(fixViewBox, 200);
+                    minY = Infinity,
-                var px = 16,
+                    maxX = -Infinity,
-                    py = 16;
+                    maxY = -Infinity;
+                groups.forEach(function (g) {
+                    var bb = g.getBBox();
+                    if (bb.width === 0 || bb.height === 0) return;
+                    if (bb.x < minX) minX = bb.x;
+                    if (bb.y < minY) minY = bb.y;
+                    if (bb.x + bb.width > maxX) maxX = bb.x + bb.width;
+                    if (bb.y + bb.height > maxY) maxY = bb.y + bb.height;
+                });
+                if (!isFinite(minX)) return setTimeout(fixViewBox, 200);
+                var pad = 16;
                 svg.setAttribute(
                     "viewBox",
                     [
-                        bb.x - px,
+                        minX - pad,
-                        bb.y - py,
+                        minY - pad,
-                        bb.width + px * 2,
+                        maxX - minX + pad * 2,
-                        bb.height + py * 2,
+                        maxY - minY + pad * 2,
                     ].join(" "),
                 );
             });