diff --git a/assets/app.js b/assets/app.js
index 646f20d..bcbdacd 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -3,6 +3,13 @@ var ICONS = {
   system: '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>',
   light: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4"/>',
   dark: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
+  midnight: '<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 1 12 2Z"/>',
+  nord: '<path d="m2 12 5-5 5 5 5-5 5 5"/><path d="M12 7v14"/>',
+  dracula: '<path d="M7 3v7l5 3 5-3V3"/><path d="M7 14l5 7 5-7"/>',
+  forest: '<path d="m12 2 7 12h-4l3 6H6l3-6H5z"/>',
+  sunset: '<path d="M17 18a5 5 0 0 0-10 0"/><path d="M12 2v4M4.22 10.22l2.83 2.83M1 18h4M19 18h4M16.95 13.05l2.83-2.83M12 13a5 5 0 0 0-5 5h10a5 5 0 0 0-5-5z"/>',
+  cyberpunk: '<path d="M4 4h16v16H4z"/><path d="M4 9h16M9 4v16"/>',
+  halloween: '<circle cx="12" cy="12" r="9"/><path d="M9 10h.01M15 10h.01M8 15s1.5 2 4 2 4-2 4-2"/><path d="M12 3v3"/>',
   search: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
   menu: '<path d="M4 6h16M4 12h10M4 18h16"/>',
   doc: '<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h6"/>',
@@ -14,6 +21,33 @@ var ICONS = {
   chevronRight: '<path d="m9 18 6-6-6-6"/>'
 };
 
+var THEMES_GENERAL = [
+  { id: "dark", label: "Dark" },
+  { id: "light", label: "Light" },
+  { id: "midnight", label: "Midnight" },
+  { id: "nord", label: "Nord" },
+  { id: "dracula", label: "Dracula" },
+  { id: "forest", label: "Forest" },
+  { id: "sunset", label: "Sunset" },
+  { id: "cyberpunk", label: "Cyberpunk" }
+];
+
+var THEMES_SEASONAL = [
+  { id: "halloween", label: "Halloween" }
+];
+
+var THEME_VIDEOS = {
+  halloween: "https://www.pexels.com/download/video/5605039/",
+  dark: "https://www.pexels.com/download/video/31270356/",
+  light: "https://www.pexels.com/download/video/13956986/",
+  midnight: "https://www.pexels.com/download/video/15860507/",
+  nord: "https://www.pexels.com/download/video/31468607/",
+  dracula: "https://www.pexels.com/download/video/8116002/",
+  forest: "https://www.pexels.com/download/video/11265968/",
+  sunset: "https://www.pexels.com/download/video/855437/",
+  cyberpunk: "https://www.pexels.com/download/video/32336464/"
+};
+
 var SITE_TREE = [
   {
     id: "vyla",
@@ -116,25 +150,32 @@ function esc(s) {
 }
 
 function getThemeMode() {
-  var v = localStorage.getItem(THEME_KEY);
-  return v === "light" || v === "dark" ? v : "system";
+  return localStorage.getItem(THEME_KEY) || "halloween";
 }
 
 function applyTheme() {
   var mode = getThemeMode();
-  var dark = mode === "dark" || (mode === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
-  document.documentElement.classList.toggle("dark", dark);
+  document.documentElement.setAttribute("data-theme", mode);
   var logo = document.getElementById("brand-logo");
-  if (logo) logo.src = dark ? "/assets/images/logo.png" : "/assets/images/dark_logo.png";
+  if (logo) logo.src = mode === "light" ? "/assets/images/dark_logo.png" : "/assets/images/logo.png";
+  var targetSrc = THEME_VIDEOS[mode] || THEME_VIDEOS.halloween;
+  document.querySelectorAll(".body-blurred-video, .header-video").forEach(function (v) {
+    if (v.getAttribute("src") !== targetSrc) {
+      v.src = targetSrc;
+      v.load();
+      v.play().catch(function () { });
+    }
+  });
 }
 
 function setTheme(mode) {
-  if (mode === "system") localStorage.removeItem(THEME_KEY);
-  else localStorage.setItem(THEME_KEY, mode);
+  localStorage.setItem(THEME_KEY, mode);
   applyTheme();
   refreshThemeUI();
   var menu = document.getElementById("theme-menu");
   if (menu) menu.classList.remove("open");
+  var segMenu = document.getElementById("theme-seg-menu");
+  if (segMenu) segMenu.classList.remove("open");
 }
 
 function toggleThemeMenu(e) {
@@ -146,10 +187,16 @@ function toggleThemeMenu(e) {
 function refreshThemeUI() {
   var mode = getThemeMode();
   var btn = document.getElementById("theme-toggle");
-  if (btn) btn.innerHTML = icon(mode);
-  document.querySelectorAll("#theme-menu button, #theme-seg button").forEach(function (b) {
+  if (btn) btn.innerHTML = icon(ICONS[mode] ? mode : "dark");
+  document.querySelectorAll("#theme-menu button, #theme-seg button[data-mode], #theme-seg-menu button").forEach(function (b) {
     b.classList.toggle("on", b.getAttribute("data-mode") === mode);
   });
+  var moreBtn = document.getElementById("theme-seg-more");
+  if (moreBtn) {
+    var isOther = mode !== "dark" && mode !== "light";
+    moreBtn.classList.toggle("on", isOther);
+    moreBtn.innerHTML = icon(ICONS[mode] ? mode : "halloween");
+  }
 }
 
 function buildThemeControls() {
@@ -160,12 +207,18 @@ function buildThemeControls() {
   wrap.className = "theme-wrap";
   btn.parentNode.insertBefore(wrap, btn);
   wrap.appendChild(btn);
-  var modes = ["system", "light", "dark"];
   var menu = document.createElement("div");
   menu.id = "theme-menu";
-  menu.innerHTML = modes.map(function (m) {
-    return '<button type="button" data-mode="' + m + '">' + icon(m) + '<span>' + m.charAt(0).toUpperCase() + m.slice(1) + '</span><i class="check">✓</i></button>';
-  }).join("");
+  var html = '<div class="theme-menu-label">General</div>';
+  THEMES_GENERAL.forEach(function (t) {
+    html += '<button type="button" data-mode="' + t.id + '">' + icon(t.id) + '<span>' + esc(t.label) + '</span><i class="check">✓</i></button>';
+  });
+  html += '<div class="theme-menu-divider"></div>';
+  html += '<div class="theme-menu-label">Seasonal</div>';
+  THEMES_SEASONAL.forEach(function (t) {
+    html += '<button type="button" data-mode="' + t.id + '">' + icon(t.id) + '<span>' + esc(t.label) + '</span><i class="check">✓</i></button>';
+  });
+  menu.innerHTML = html;
   wrap.appendChild(menu);
   menu.addEventListener("click", function (e) {
     var b = e.target.closest("button");
@@ -586,16 +639,35 @@ function buildMobileBar(currentTab, currentItem) {
     var sideLinks = document.createElement("div");
     sideLinks.className = "side-links";
 
-    var modes = ["system", "light", "dark"];
     var seg = document.createElement("div");
     seg.id = "theme-seg";
-    seg.innerHTML = modes.map(function (m) {
-      return '<button type="button" data-mode="' + m + '" aria-label="' + m + '">' + icon(m) + '</button>';
-    }).join("");
+    var segHtml = '<button type="button" data-mode="dark" aria-label="Dark">' + icon("dark") + '</button>' +
+      '<button type="button" data-mode="light" aria-label="Light">' + icon("light") + '</button>' +
+      '<button type="button" id="theme-seg-more" aria-label="All themes">' + icon("halloween") + '</button>' +
+      '<div id="theme-seg-menu">' +
+      '<div class="theme-menu-label">General</div>';
+    THEMES_GENERAL.forEach(function (t) {
+      segHtml += '<button type="button" data-mode="' + t.id + '">' + icon(t.id) + '<span>' + esc(t.label) + '</span><i class="check">✓</i></button>';
+    });
+    segHtml += '<div class="theme-menu-divider"></div><div class="theme-menu-label">Seasonal</div>';
+    THEMES_SEASONAL.forEach(function (t) {
+      segHtml += '<button type="button" data-mode="' + t.id + '">' + icon(t.id) + '<span>' + esc(t.label) + '</span><i class="check">✓</i></button>';
+    });
+    segHtml += '</div>';
+    seg.innerHTML = segHtml;
 
     seg.addEventListener("click", function (e) {
-      var btn = e.target.closest("button");
-      if (btn) setTheme(btn.getAttribute("data-mode"));
+      var moreBtn = e.target.closest("#theme-seg-more");
+      var segMenu = document.getElementById("theme-seg-menu");
+      if (moreBtn && segMenu) {
+        segMenu.classList.toggle("open");
+        return;
+      }
+      var btn = e.target.closest("button[data-mode]");
+      if (btn) {
+        setTheme(btn.getAttribute("data-mode"));
+        if (segMenu) segMenu.classList.remove("open");
+      }
     });
 
     sideLinks.appendChild(seg);
@@ -812,6 +884,7 @@ function loadPage() {
         })
         .then(function (html) {
           contentEl.innerHTML = html;
+          applyTheme();
           window.scrollTo(0, 0);
         })
         .catch(function () {
@@ -1152,7 +1225,9 @@ document.addEventListener("DOMContentLoaded", function () {
 
     var sidebar = document.getElementById("sidebar");
     var menu = document.getElementById("theme-menu");
+    var segMenu = document.getElementById("theme-seg-menu");
     if (menu && !e.target.closest(".theme-wrap")) menu.classList.remove("open");
+    if (segMenu && !e.target.closest("#theme-seg")) segMenu.classList.remove("open");
     if (
       sidebar &&
       sidebar.classList.contains("open") &&
diff --git a/assets/images/themes/halloween/cobweb.png b/assets/images/themes/halloween/cobweb.png
new file mode 100644
index 0000000..403f6fb
Binary files /dev/null and b/assets/images/themes/halloween/cobweb.png differ
diff --git a/assets/styling/404.css b/assets/styling/404.css
index c938933..2e614f2 100644
--- a/assets/styling/404.css
+++ b/assets/styling/404.css
@@ -33,7 +33,7 @@ body.is-404 .error-container {
 
 body.is-404 .error-code {
     margin: 0 0 16px;
-    color: var(--color-text-primary);
+    color: var(--text-heading);
     font-size: clamp(74px, 14vw, 112px);
     font-weight: 700;
     line-height: 1;
@@ -42,7 +42,7 @@ body.is-404 .error-code {
 
 body.is-404 .error-title {
     margin: 0 0 24px;
-    color: var(--color-text-primary);
+    color: var(--text-heading);
     font-size: 18px;
     font-weight: 800;
     letter-spacing: 0.12em;
@@ -52,30 +52,21 @@ body.is-404 .error-title {
 body.is-404 .error-desc {
     max-width: 440px;
     margin: 0 0 32px;
-    color: var(--muted-light);
+    color: var(--muted);
     font-size: 15.5px;
     line-height: 1.6;
 }
 
-html.dark body.is-404 .error-desc {
-    color: var(--muted-dark);
-}
-
 body.is-404 .btn-home {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 28px;
     border-radius: 9999px;
-    background: var(--bg-dark);
-    color: var(--bg-light) !important;
+    background: var(--btn-home-bg);
+    color: var(--btn-home-text) !important;
     font-size: 14.5px;
     font-weight: 500;
     text-decoration: none !important;
     transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
-}
-
-html.dark body.is-404 .btn-home {
-    background: var(--bg-light);
-    color: var(--bg-dark) !important;
 }
\ No newline at end of file
diff --git a/assets/styling/components.css b/assets/styling/components.css
index 30101af..2abffd7 100644
--- a/assets/styling/components.css
+++ b/assets/styling/components.css
@@ -11,22 +11,18 @@
     display: flex;
     align-items: center;
     gap: 10px;
-    background: rgba(0, 0, 0, 0.05);
+    background: var(--search-bg);
     width: min(440px, 40vw);
     height: 36px;
     padding: 0 12px;
     border: none;
     border-radius: 100px;
-    color: var(--muted-light);
+    color: var(--muted);
     font: inherit;
     font-size: 14px;
     cursor: pointer;
 }
 
-html.dark #search-trigger {
-    background: rgba(50, 50, 50, 0.1);
-}
-
 #search-trigger kbd {
     margin-left: auto;
     font: 600 11px var(--font);
@@ -50,16 +46,13 @@ html.dark #search-trigger {
     margin: 52px auto 0;
     border-radius: 20px;
     overflow: hidden;
-    background: rgb(210, 210, 210, 0.1) !important;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    background: var(--search-panel-bg) !important;
+    border: 1px solid var(--border);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }
 
-html.dark .search-panel {
-    background: rgb(10, 10, 10, 0.2) !important;
-}
-
 .search-input-row {
     display: flex;
     align-items: center;
@@ -70,7 +63,7 @@ html.dark .search-panel {
 .search-input-row .ico {
     width: 18px;
     height: 18px;
-    color: var(--muted-light);
+    color: var(--muted);
 }
 
 #search-input {
@@ -78,7 +71,7 @@ html.dark .search-panel {
     border: none;
     outline: none;
     background: transparent;
-    color: inherit;
+    color: var(--text-heading);
     font: inherit;
     font-size: 18px;
 }
@@ -92,11 +85,7 @@ html.dark .search-panel {
 .search-label {
     padding: 8px 14px;
     font-size: 12px;
-    color: var(--muted-light);
-}
-
-html.dark .search-label {
-    color: var(--muted-dark);
+    color: var(--muted);
 }
 
 .sr {
@@ -109,10 +98,11 @@ html.dark .search-label {
 
 .sr>.ico {
     margin-top: 3px;
+    color: var(--muted);
 }
 
 .sr.on {
-    background: rgba(0, 0, 0, 0.06);
+    background: var(--hover-bg);
 }
 
 .sr-body {
@@ -123,6 +113,7 @@ html.dark .search-label {
     font-size: 14px;
     font-weight: 600;
     line-height: 1.35;
+    color: var(--text-heading);
 }
 
 .sr .s {
@@ -130,7 +121,7 @@ html.dark .search-label {
     margin-top: 2px;
     font-size: 12.5px;
     line-height: 1.4;
-    color: var(--muted-light);
+    color: var(--muted);
     overflow: hidden;
     -webkit-line-clamp: 2;
     line-clamp: 2;
@@ -141,17 +132,12 @@ html.dark .search-label {
     margin-top: 2px;
     font-size: 12px;
     line-height: 1.35;
-    color: var(--muted-light);
+    color: var(--muted);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-html.dark .sr .s,
-html.dark .sr .p {
-    color: var(--muted-dark);
-}
-
 .sr .sep {
     margin: 0 6px;
     opacity: 0.7;
@@ -159,11 +145,7 @@ html.dark .sr .p {
 
 .sr .hit {
     font-weight: 700;
-    color: var(--text-light);
-}
-
-html.dark .sr .hit {
-    color: var(--text-dark);
+    color: var(--text-heading);
 }
 
 .search-footer {
@@ -171,11 +153,8 @@ html.dark .sr .hit {
     gap: 18px;
     padding: 12px 20px;
     font-size: 12px;
-    color: var(--muted-light);
-}
-
-html.dark .search-footer {
-    color: var(--muted-dark);
+    color: var(--muted);
+    border-top: 1px solid var(--border-subtle);
 }
 
 .search-footer .close-hint {
@@ -202,34 +181,22 @@ html.dark .search-footer {
     border: none;
     border-radius: 8px;
     background: none;
-    color: var(--muted-light);
+    color: var(--muted);
     cursor: pointer;
 }
 
 .code-wrap .copy-btn:hover {
-    background: rgba(0, 0, 0, 0.06);
-}
-
-html.dark .code-wrap .copy-btn {
-    color: var(--muted-dark);
-}
-
-html.dark .code-wrap .copy-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--hover-bg);
 }
 
 .code-group {
     position: relative;
     margin: 16px 0;
     border-radius: 20px;
-    background: #f4f4f5;
+    background: var(--code-group-bg);
     padding: 6px 4px 4px;
 }
 
-html.dark .code-group {
-    background: #0d0d0d;
-}
-
 .code-group-tabs {
     display: flex;
     align-items: center;
@@ -247,15 +214,11 @@ html.dark .code-group {
     border: none;
     background: none;
     cursor: pointer;
-    color: #71717a;
+    color: var(--muted);
 }
 
 .code-group-tab.active {
-    color: var(--text-light);
-}
-
-html.dark .code-group-tab.active {
-    color: #ffffff;
+    color: var(--code-tab-active);
 }
 
 .code-group-tab.active::after {
@@ -265,25 +228,16 @@ html.dark .code-group-tab.active {
     right: 0;
     bottom: 0;
     height: 2px;
-    background: var(--text-light);
+    background: var(--code-tab-active);
     border-radius: 2px;
 }
 
-html.dark .code-group-tab.active::after {
-    background: #ffffff;
-}
-
 .code-group-panels {
-    background: #ffffff;
+    background: var(--code-group-panel-bg);
     border-radius: 14px;
     overflow: hidden;
 }
 
-html.dark .code-group-panels {
-    background: #000000;
-    border-color: rgba(255, 255, 255, 0.06);
-}
-
 .cg-copy-btn {
     position: absolute;
     top: 10px;
@@ -295,16 +249,12 @@ html.dark .code-group-panels {
     border: none;
     border-radius: 6px;
     background: none;
-    color: #71717a;
+    color: var(--muted);
     cursor: pointer;
 }
 
 .cg-copy-btn:hover {
-    color: var(--text-light);
-}
-
-html.dark .cg-copy-btn:hover {
-    color: #ffffff;
+    color: var(--text-heading);
 }
 
 .code-group-panel {
@@ -321,7 +271,7 @@ main.prose .code-group pre {
     border: none;
     border-radius: 0;
     background: transparent;
-    color: #e6edf3;
+    color: inherit;
 }
 
 main.prose .code-group pre code {
@@ -331,13 +281,8 @@ main.prose .code-group pre code {
 main.prose blockquote {
     margin: 16px 0;
     padding: 4px 0 4px 16px;
-    border-left: 3px solid var(--border-light);
-    color: var(--muted-light);
-}
-
-html.dark main.prose blockquote {
-    border-left-color: var(--border-dark);
-    color: var(--muted-dark);
+    border-left: 3px solid var(--border);
+    color: var(--muted);
 }
 
 main.prose blockquote p {
@@ -351,18 +296,12 @@ main.prose blockquote p {
 
 .skeleton-line,
 .skeleton-media {
-    background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.05) 63%);
+    background: linear-gradient(90deg, var(--skeleton-pulse-1) 25%, var(--skeleton-pulse-2) 37%, var(--skeleton-pulse-1) 63%);
     background-size: 400% 100%;
     animation: skeletonPulse 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     border-radius: 8px;
 }
 
-html.dark .skeleton-line,
-html.dark .skeleton-media {
-    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.12) 37%, rgba(255, 255, 255, 0.05) 63%);
-    background-size: 400% 100%;
-}
-
 @keyframes skeletonPulse {
     0% {
         background-position: 100% 50%;
@@ -513,10 +452,6 @@ html.dark .skeleton-media {
         height: 1.3rem;
     }
 
-    html.dark #search-trigger {
-        background: transparent;
-    }
-
     #search-trigger span,
     #search-trigger kbd {
         display: none;
diff --git a/assets/styling/highlight.css b/assets/styling/highlight.css
index 002416b..fcfc269 100644
--- a/assets/styling/highlight.css
+++ b/assets/styling/highlight.css
@@ -1,140 +1,72 @@
-html.dark pre[class*="language-"],
-html.dark code[class*="language-"] {
-  color: #abb2bf;
+pre[class*="language-"],
+code[class*="language-"] {
+  color: var(--code-text);
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #6a737d;
-  font-style: italic;
-}
-
-html.dark .token.comment,
-html.dark .token.prolog,
-html.dark .token.doctype,
-html.dark .token.cdata {
-  color: #5c6370;
+  color: var(--hl-comment);
   font-style: italic;
 }
 
 .token.punctuation {
-  color: #24292e;
-}
-
-html.dark .token.punctuation {
-  color: #abb2bf;
+  color: var(--hl-punct);
 }
 
 .token.function,
 .token.function-name {
-  color: #6f42c1;
-  font-weight: 500;
-}
-
-html.dark .token.function,
-html.dark .token.function-name {
-  color: #61afef;
+  color: var(--hl-func);
   font-weight: 500;
 }
 
 .token.keyword,
 .token.selector {
-  color: #d73a49;
-  font-weight: 600;
-}
-
-html.dark .token.keyword,
-html.dark .token.selector {
-  color: #c678dd;
+  color: var(--hl-keyword);
   font-weight: 600;
 }
 
 .token.string,
 .token.url {
-  color: #22863a;
-}
-
-html.dark .token.string,
-html.dark .token.url {
-  color: #98c379;
+  color: var(--hl-string);
 }
 
 .token.variable,
 .token.attr-name,
 .token.property {
-  color: #e36209;
-}
-
-html.dark .token.variable,
-html.dark .token.attr-name,
-html.dark .token.property {
-  color: #e06c75;
+  color: var(--hl-var);
 }
 
 .token.operator,
 .token.entity {
-  color: #d73a49;
-}
-
-html.dark .token.operator,
-html.dark .token.entity {
-  color: #56b6c2;
+  color: var(--hl-op);
 }
 
 .token.number,
 .token.boolean,
 .token.constant {
-  color: #005cc5;
-}
-
-html.dark .token.number,
-html.dark .token.boolean,
-html.dark .token.constant {
-  color: #d19a66;
+  color: var(--hl-num);
 }
 
 .token.parameter {
-  color: #b08800;
-}
-
-html.dark .token.parameter {
-  color: #d19a66;
+  color: var(--hl-param);
 }
 
 .token.class-name {
-  color: #6f42c1;
-}
-
-html.dark .token.class-name {
-  color: #e5c07b;
+  color: var(--hl-class);
 }
 
 .token.tag {
-  color: #22863a;
-}
-
-html.dark .token.tag {
-  color: #e06c75;
+  color: var(--hl-tag);
 }
 
 .token.deleted {
-  color: #b31d28;
-  background-color: #ffeef0;
-}
-
-html.dark .token.deleted {
-  color: #e06c75;
-  background-color: rgba(224, 108, 117, 0.15);
+  color: var(--hl-deleted-color);
+  background-color: var(--hl-deleted-bg);
 }
 
 .token.inserted {
-  color: #22863a;
-  background-color: #f0fff4;
-}
-
-html.dark .token.inserted {
-  color: #98c379;
-  background-color: rgba(152, 195, 121, 0.15);
+  color: var(--hl-inserted-color);
+  background-color: var(--hl-inserted-bg);
 }
\ No newline at end of file
diff --git a/assets/styling/layout.css b/assets/styling/layout.css
index 8c335bf..556a2c3 100644
--- a/assets/styling/layout.css
+++ b/assets/styling/layout.css
@@ -43,11 +43,7 @@
 
 #banner-close:hover {
     opacity: 1;
-    background: rgba(0, 0, 0, 0.06);
-}
-
-html.dark #banner-close:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--hover-bg);
 }
 
 #navbar {
@@ -98,31 +94,19 @@ html.dark #banner-close:hover {
     padding: 6px 14px;
     font-size: 14px;
     font-weight: 500;
-    color: var(--muted-light);
+    color: var(--muted);
     white-space: nowrap;
 }
 
-html.dark #navbar .tabs a {
-    color: var(--muted-dark);
-}
-
 #navbar .tabs a:hover {
-    color: var(--text-light);
-}
-
-html.dark #navbar .tabs a:hover {
-    color: var(--text-dark);
+    color: var(--text-heading);
 }
 
 #navbar .tabs a.active {
-    color: var(--text-light);
+    color: var(--text-heading);
     font-weight: 600;
 }
 
-html.dark #navbar .tabs a.active {
-    color: var(--text-dark);
-}
-
 #layout {
     display: flex;
     max-width: 1400px;
@@ -151,14 +135,10 @@ html.dark #navbar .tabs a.active {
     font-size: 14px;
     font-weight: 600;
     line-height: 23px;
-    color: var(--text-light);
+    color: var(--text);
     margin: 0 0 10px 16px;
 }
 
-html.dark #sidebar .group-title {
-    color: var(--text-dark);
-}
-
 #sidebar ul {
     list-style: none;
     margin: 0;
@@ -171,29 +151,16 @@ html.dark #sidebar .group-title {
     border-radius: 12px;
     font-size: 14px;
     line-height: 21px;
-    color: var(--muted-light);
-}
-
-html.dark #sidebar li a {
-    color: var(--muted-dark);
+    color: var(--muted);
 }
 
 #sidebar li a.active {
-    color: var(--text-light);
-}
-
-html.dark #sidebar li a.active {
-    color: var(--text-dark);
+    color: var(--text-heading);
 }
 
 #sidebar li a:hover {
-    background: rgba(0, 0, 0, 0.05);
-    color: var(--text-light);
-}
-
-html.dark #sidebar li a:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: var(--text-dark);
+    background: var(--hover-bg);
+    color: var(--text-heading);
 }
 
 #content-col {
@@ -246,14 +213,10 @@ footer#site-footer {
     gap: 8px;
     font-size: 14px;
     font-weight: 600;
-    color: var(--text-light);
+    color: var(--text-heading);
     transition: opacity 0.15s ease;
 }
 
-html.dark .footer-link {
-    color: #ffffff;
-}
-
 .footer-link:hover {
     opacity: 0.8;
 }
@@ -268,14 +231,10 @@ html.dark .footer-link {
 
 .footer-bottom {
     width: 100%;
-    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    border-top: 1px solid var(--footer-border);
     padding-top: 28px;
 }
 
-html.dark .footer-bottom {
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
-}
-
 .footer-socials {
     display: flex;
     gap: 16px;
@@ -284,20 +243,12 @@ html.dark .footer-bottom {
 .footer-socials a {
     display: flex;
     align-items: center;
-    color: var(--muted-light);
+    color: var(--muted);
     transition: color 0.15s ease;
 }
 
-html.dark .footer-socials a {
-    color: var(--muted-dark);
-}
-
 .footer-socials a:hover {
-    color: var(--text-light);
-}
-
-html.dark .footer-socials a:hover {
-    color: #ffffff;
+    color: var(--text-heading);
 }
 
 .footer-icon {
@@ -318,7 +269,7 @@ html.dark .footer-socials a:hover {
     border: none;
     border-radius: 10px;
     background: none;
-    color: var(--muted-light);
+    color: var(--muted);
     cursor: pointer;
 }
 
@@ -328,37 +279,49 @@ html.dark .footer-socials a:hover {
 }
 
 #theme-toggle:hover {
-    background: rgba(0, 0, 0, 0.05);
-}
-
-html.dark #theme-toggle {
-    color: var(--muted-dark);
-}
-
-html.dark #theme-toggle:hover {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--hover-bg);
 }
 
 #theme-menu {
-    display: block;
+    display: flex;
+    flex-direction: column;
     position: absolute;
     right: 0;
     top: 46px;
-    width: 180px;
+    width: 215px;
+    max-height: 75vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
     padding: 8px;
     border-radius: 16px;
-    background: var(--bg-light);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+    background: var(--bg-menu);
+    border: 1px solid var(--border);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
     z-index: 50;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-8px) scale(0.96);
     transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
     pointer-events: none;
+    box-sizing: border-box;
 }
 
-html.dark #theme-menu {
-    background: var(--bg-dark);
+#theme-menu::-webkit-scrollbar,
+#theme-seg-menu::-webkit-scrollbar {
+    width: 4px;
+}
+
+#theme-menu::-webkit-scrollbar-thumb,
+#theme-seg-menu::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+}
+
+#theme-menu::-webkit-scrollbar-track,
+#theme-seg-menu::-webkit-scrollbar-track {
+    background: transparent;
 }
 
 #theme-menu.open {
@@ -368,37 +331,77 @@ html.dark #theme-menu {
     pointer-events: auto;
 }
 
+.theme-menu-divider {
+    height: 1px;
+    margin: 6px 6px;
+    background: var(--border);
+    flex-shrink: 0;
+}
+
+.theme-menu-label {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--muted);
+    padding: 6px 10px 4px;
+    text-align: left;
+    user-select: none;
+}
+
 #theme-menu button {
     display: flex;
     align-items: center;
+    justify-content: flex-start;
+    text-align: left;
     gap: 10px;
     width: 100%;
     padding: 8px 10px;
     border: none;
     border-radius: 10px;
     background: none;
-    color: inherit;
+    color: var(--text);
     font: inherit;
-    font-size: 14px;
+    font-size: 13.5px;
     cursor: pointer;
+    box-sizing: border-box;
+    flex-shrink: 0;
 }
 
 #theme-menu button:hover {
-    background: rgba(0, 0, 0, 0.05);
+    background: var(--hover-bg);
 }
 
-html.dark #theme-menu button:hover {
-    background: rgba(255, 255, 255, 0.08);
+#theme-menu button .ico {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    color: var(--muted);
+}
+
+#theme-menu button span {
+    flex: 1;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 #theme-menu .check {
     margin-left: auto;
+    flex-shrink: 0;
     font-style: normal;
+    font-size: 13px;
     visibility: hidden;
 }
 
 #theme-menu button.on {
     font-weight: 600;
+    color: var(--text-heading);
+}
+
+#theme-menu button.on .ico {
+    color: var(--text-heading);
 }
 
 #theme-menu button.on .check {
@@ -406,11 +409,146 @@ html.dark #theme-menu button:hover {
 }
 
 #theme-seg {
+    position: relative;
     display: none;
     gap: 4px;
 }
 
-#theme-seg button {
+#theme-seg-menu {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    width: 180px;
+    max-height: 320px;
+    overflow-y: auto;
+    padding: 6px;
+    border-radius: 14px;
+    background: var(--bg-menu);
+    border: 1px solid var(--border);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+    z-index: 250;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-6px) scale(0.96);
+    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
+    pointer-events: none;
+}
+
+#theme-seg-menu.open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0) scale(1);
+    pointer-events: auto;
+}
+
+#theme-seg-menu {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    width: 215px;
+    max-height: 340px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+    padding: 6px;
+    border-radius: 14px;
+    background: var(--bg-menu);
+    border: 1px solid var(--border);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+    z-index: 250;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-6px) scale(0.96);
+    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
+    pointer-events: none;
+    box-sizing: border-box;
+}
+
+#theme-seg-menu button {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: left;
+    gap: 10px;
+    width: 100%;
+    height: auto;
+    min-height: 36px;
+    padding: 8px 10px;
+    border: none;
+    border-radius: 8px;
+    background: none;
+    color: var(--text);
+    font: inherit;
+    font-size: 13.5px;
+    cursor: pointer;
+    box-sizing: border-box;
+    flex-shrink: 0;
+}
+
+#theme-seg-menu button:hover {
+    background: var(--hover-bg);
+}
+
+#theme-seg-menu button .ico {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    color: var(--muted);
+}
+
+#theme-seg-menu button span {
+    display: block;
+    flex: 1;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--text);
+}
+
+#theme-seg-menu button.on span {
+    color: var(--text-heading);
+    font-weight: 600;
+}
+
+#theme-seg-menu button.on .ico {
+    color: var(--text-heading);
+}
+
+#theme-seg-menu button .check {
+    margin-left: auto;
+    flex-shrink: 0;
+    font-style: normal;
+    font-size: 13px;
+    visibility: hidden;
+}
+
+#theme-seg-menu button.on .check {
+    visibility: visible;
+    color: var(--text-heading);
+}
+
+#theme-seg-menu button:hover {
+    background: var(--hover-bg);
+}
+
+#theme-seg-menu button.on {
+    font-weight: 600;
+    color: var(--text-heading);
+}
+
+#theme-seg-menu .check {
+    margin-left: auto;
+    font-style: normal;
+    visibility: hidden;
+}
+
+#theme-seg-menu button.on .check {
+    visibility: visible;
+}
+
+#theme-seg>button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -419,22 +557,14 @@ html.dark #theme-menu button:hover {
     border: none;
     border-radius: 50%;
     background: none;
-    color: var(--muted-light);
+    color: var(--muted);
     cursor: pointer;
+    flex-shrink: 0;
 }
 
-html.dark #theme-seg button {
-    color: var(--muted-dark);
-}
-
-#theme-seg button.on {
-    background: rgba(0, 0, 0, 0.07);
-    color: var(--text-light);
-}
-
-html.dark #theme-seg button.on {
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--text-dark);
+#theme-seg>button.on {
+    background: var(--hover-bg);
+    color: var(--text-heading);
 }
 
 #mobile-bar {
@@ -444,14 +574,9 @@ html.dark #theme-seg button.on {
     gap: 8px;
     padding: 10px 20px;
     font-size: 14px;
-    color: var(--muted-light);
+    color: var(--muted);
     background: transparent;
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-html.dark #mobile-bar {
-    color: var(--muted-dark);
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid var(--border-subtle);
 }
 
 #mobile-bar button {
@@ -479,11 +604,7 @@ html.dark #mobile-bar {
 }
 
 .mobile-crumbs .crumb-group {
-    color: var(--muted-light);
-}
-
-html.dark .mobile-crumbs .crumb-group {
-    color: var(--muted-dark);
+    color: var(--muted);
 }
 
 .mobile-crumbs .crumb-sep {
@@ -492,28 +613,19 @@ html.dark .mobile-crumbs .crumb-group {
 }
 
 .mobile-crumbs .crumb-page {
-    color: var(--text-light);
+    color: var(--text);
     font-weight: 600;
     cursor: pointer;
     user-select: none;
 }
 
-html.dark .mobile-crumbs .crumb-page {
-    color: var(--text-dark);
-}
-
 .mobile-crumbs .crumb-page:hover {
     text-decoration: underline;
     text-underline-offset: 3px;
 }
 
 .mobile-crumbs .crumb-page.muted {
-    color: var(--muted-light);
-    font-weight: 400;
-}
-
-html.dark .mobile-crumbs .crumb-page.muted {
-    color: var(--muted-dark);
+    color: var(--muted);
     font-weight: 400;
 }
 
@@ -533,17 +645,13 @@ html.dark .mobile-crumbs .crumb-page.muted {
 }
 
 .mobile-crumbs .crumb-heading {
-    color: var(--text-light);
+    color: var(--text-heading);
     font-weight: 600;
     overflow: hidden;
     text-overflow: ellipsis;
     flex-shrink: 1;
 }
 
-html.dark .mobile-crumbs .crumb-heading {
-    color: var(--text-dark);
-}
-
 .mobile-tabs {
     display: none;
     position: relative;
@@ -557,27 +665,19 @@ html.dark .mobile-crumbs .crumb-heading {
     width: 100%;
     padding: 8px 12px;
     border: none;
-    background: rgba(25, 25, 25, 0.1);
+    background: var(--hover-bg);
     border-radius: 100px;
-    color: var(--text-light);
+    color: var(--text-heading);
     font: inherit;
     font-size: 15px;
     cursor: pointer;
 }
 
-html.dark .mt-btn {
-    color: var(--text-dark);
-}
-
 .mt-btn .ico {
-    color: var(--muted-light);
+    color: var(--muted);
     transition: transform 0.15s ease;
 }
 
-html.dark .mt-btn .ico {
-    color: var(--muted-dark);
-}
-
 .mobile-tabs.open .mt-btn .ico {
     transform: rotate(180deg);
 }
@@ -591,9 +691,9 @@ html.dark .mt-btn .ico {
     z-index: 5;
     padding: 6px;
     border-radius: 16px;
-    background: var(--bg-light);
-    border: 1px solid var(--border-light);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
+    background: var(--bg-menu);
+    border: 1px solid var(--border);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
     opacity: 0;
     visibility: hidden;
     transform: translateY(-8px) scale(0.97);
@@ -601,12 +701,6 @@ html.dark .mt-btn .ico {
     pointer-events: none;
 }
 
-html.dark .mt-menu {
-    background: #000000;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
-}
-
 .mobile-tabs.open .mt-menu {
     opacity: 1;
     visibility: visible;
@@ -626,35 +720,22 @@ html.dark .mt-menu {
     font: inherit;
     font-size: 14px;
     font-weight: 500;
-    color: var(--muted-light);
+    color: var(--muted);
     cursor: pointer;
     text-align: left;
     transition: background 0.15s ease, color 0.15s ease;
 }
 
-html.dark .mt-menu .mt-item {
-    color: #a3a3a3;
-}
-
 .mt-menu .mt-item:hover {
-    background: rgba(0, 0, 0, 0.05);
-    color: var(--text-light);
-}
-
-html.dark .mt-menu .mt-item:hover {
-    background: rgba(255, 255, 255, 0.06);
-    color: #ffffff;
+    background: var(--hover-bg);
+    color: var(--text-heading);
 }
 
 .mt-menu .mt-item.on {
-    color: var(--text-light);
+    color: var(--text-heading);
     font-weight: 600;
 }
 
-html.dark .mt-menu .mt-item.on {
-    color: #ffffff;
-}
-
 .mt-menu .mt-item svg {
     display: none;
     width: 16px;
@@ -762,17 +843,13 @@ body.is-home main.prose {
     #sidebar #theme-seg {
         display: flex;
         align-items: center;
-        background: rgba(0, 0, 0, 0.05);
+        background: var(--hover-bg);
         border-radius: 50px;
         padding: 2px 4px;
         gap: 2px;
     }
 
-    html.dark #sidebar #theme-seg {
-        background: rgba(50, 50, 50, 0.08);
-    }
-
-    #sidebar #theme-seg button {
+    #sidebar #theme-seg>button {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -781,22 +858,14 @@ body.is-home main.prose {
         border: none;
         border-radius: 50%;
         background: none;
-        color: var(--muted-light);
+        color: var(--muted);
         cursor: pointer;
         padding: 0;
+        flex-shrink: 0;
     }
 
-    html.dark #sidebar #theme-seg button {
-        color: var(--muted-dark);
-    }
-
-    #sidebar #theme-seg button.on {
-        color: var(--text-light);
-        font-weight: 900;
-    }
-
-    html.dark #sidebar #theme-seg button.on {
-        color: var(--text-dark);
+    #sidebar #theme-seg>button.on {
+        color: var(--text-heading);
         font-weight: 900;
     }
 
@@ -820,18 +889,14 @@ body.is-home main.prose {
         height: 100dvh !important;
         max-height: 100vh !important;
         padding: 0 16px 20px;
-        background: var(--bg-light);
+        background: var(--bg);
         transform: translateX(-100%);
         transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
         border-radius: 0 35px 35px 0;
         z-index: 200;
     }
 
-    html.dark #sidebar {
-        background: var(--bg-dark);
-    }
-
     #sidebar.open {
         transform: translateX(0);
     }
diff --git a/assets/styling/prose.css b/assets/styling/prose.css
index 7e83520..df87ac4 100644
--- a/assets/styling/prose.css
+++ b/assets/styling/prose.css
@@ -10,11 +10,7 @@ main.prose .eyebrow {
     font-size: 14px;
     font-weight: 600;
     margin: 0 0 8px;
-    color: var(--text-light);
-}
-
-html.dark main.prose .eyebrow {
-    color: var(--text-dark);
+    color: var(--text);
 }
 
 main.prose h1 {
@@ -22,19 +18,15 @@ main.prose h1 {
     font-weight: 700;
     letter-spacing: 0;
     margin: 0 0 6px;
-    color: #111827;
+    color: var(--text-heading);
 }
 
 main.prose .page-description {
-    color: var(--muted-light);
+    color: var(--muted);
     font-size: 18px;
     margin: 0 0 32px;
 }
 
-html.dark main.prose .page-description {
-    color: var(--muted-dark);
-}
-
 main.prose h2 {
     font-size: 22px;
     font-weight: 700;
@@ -56,44 +48,25 @@ main.prose h3 {
 main.prose h2,
 main.prose h3 {
     scroll-margin-top: 130px;
-    color: #111827;
-}
-
-html.dark main.prose h1,
-html.dark main.prose h2,
-html.dark main.prose h3 {
-    color: var(--text-dark);
+    color: var(--text-heading);
 }
 
 main.prose p,
 main.prose li {
-    color: #4b5563;
+    color: var(--text);
     line-height: 1.75;
 }
 
-html.dark main.prose p,
-html.dark main.prose li {
-    color: #a1a1aa;
-}
-
 main.prose strong {
-    color: var(--text-light);
-}
-
-html.dark main.prose strong {
-    color: var(--text-dark);
+    color: var(--text-heading);
 }
 
 main.prose a {
-    color: var(--text-light);
+    color: var(--text);
     font-weight: 600;
     text-decoration: underline;
 }
 
-html.dark main.prose a {
-    color: var(--text-dark);
-}
-
 main.prose ul,
 main.prose ol {
     padding-left: 22px;
@@ -119,23 +92,21 @@ main.prose hr {
 }
 
 main.prose code {
-    background: rgba(250, 250, 250, 0.5);
+    background: var(--code-inline-bg);
+    color: var(--code-inline-text);
     font-family: var(--mono);
     font-size: 13px;
     padding: 2px 6px;
     border-radius: 5px;
 }
 
-html.dark main.prose code {
-    background: rgba(5, 5, 5);
-}
-
 main.prose pre {
     margin: 16px 0;
     padding: 16px 20px;
     border-radius: 25px;
     overflow-x: auto;
-    background: rgba(250, 250, 250);
+    background: var(--bg-code);
+    color: var(--code-text);
     --fade-l: 0px;
     --fade-r: 0px;
     scrollbar-width: none;
@@ -143,14 +114,11 @@ main.prose pre {
     mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
 }
 
-html.dark main.prose pre {
-    background: rgba(5, 5, 5);
-}
-
 main.prose pre code {
     background: none;
     padding: 0;
     font-size: 13px;
+    color: inherit;
 }
 
 .table-wrap {
@@ -185,22 +153,15 @@ th {
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: var(--muted-light);
+    color: var(--muted);
     white-space: nowrap;
 }
 
-html.dark th {
-    color: var(--muted-dark);
-}
-
 td {
     padding: 14px 5px;
     vertical-align: top;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-html.dark td {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--border-subtle);
+    color: var(--text);
 }
 
 tbody tr:last-child td {
@@ -212,7 +173,7 @@ tbody tr {
 }
 
 tbody tr:hover {
-    background: rgba(0, 0, 0, 0.02);
+    background: var(--hover-bg);
 }
 
 td code {
@@ -241,20 +202,16 @@ td code {
 }
 
 .callout-note {
-    background: rgba(5, 5, 5, 0.08);
-}
-
-html.dark .callout-note {
-    background: rgba(50, 50, 50, 0.1);
+    background: var(--callout-note-bg);
 }
 
 .callout-info {
-    background: rgba(39, 39, 39, 0.08);
+    background: var(--callout-info-bg);
 }
 
 .callout-warning {
-    background: #fefce8 !important;
-    color: #854d0e !important;
+    background: var(--callout-warning-bg) !important;
+    color: var(--callout-warning-text) !important;
 }
 
 .callout-warning p,
@@ -262,16 +219,6 @@ html.dark .callout-note {
     color: inherit !important;
 }
 
-html.dark .callout-warning {
-    background: oklab(68.064% 0.0348215 0.137956 / 0.2) !important;
-    color: #fde047 !important;
-}
-
-html.dark .callout-warning p,
-html.dark .callout-warning strong {
-    color: inherit !important;
-}
-
 aside#toc {
     width: var(--toc-width);
     flex-shrink: 0;
@@ -299,7 +246,7 @@ aside#toc .toc-title {
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
-    color: var(--text-light);
+    color: var(--text-heading);
     margin-bottom: 2px;
 }
 
@@ -308,12 +255,8 @@ aside#toc .toc-title::before {
     width: 16px;
     height: 16px;
     background: currentColor;
-    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h14'/%3E%3C/svg%3E") center / contain no-repeat;
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h14'/%3E%3C/svg%3E") center / contain no-repeat;
-}
-
-html.dark aside#toc .toc-title {
-    color: var(--text-dark);
+    -webkit-mask: var(--ico-toc-mask) center / contain no-repeat;
+    mask: var(--ico-toc-mask) center / contain no-repeat;
 }
 
 aside#toc ul {
@@ -327,30 +270,18 @@ aside#toc li a {
     padding: 6px 0;
     font-size: 14px;
     line-height: 20px;
-    color: var(--muted-light);
-}
-
-html.dark aside#toc li a {
-    color: var(--muted-dark);
+    color: var(--muted);
 }
 
 aside#toc li a:hover {
-    color: var(--text-light);
-}
-
-html.dark aside#toc li a:hover {
-    color: var(--text-dark);
+    color: var(--text-heading);
 }
 
 aside#toc li a.active {
-    color: var(--text-light);
+    color: var(--text-heading);
     font-weight: 600;
 }
 
-html.dark aside#toc li a.active {
-    color: var(--text-dark);
-}
-
 @media (max-width: 900px) {
     aside#toc {
         display: none;
diff --git a/assets/styling/roots.css b/assets/styling/roots.css
index 842f7da..e0ff05e 100644
--- a/assets/styling/roots.css
+++ b/assets/styling/roots.css
@@ -1,20 +1,511 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
 
-:root {
-    --bg-light: #ffffff;
-    --bg-dark: #000000;
-    --text-light: #0b0b0c;
-    --text-dark: #f3f3f3;
-    --muted-light: #6b7280;
-    --muted-dark: #a3a3a3;
+:root,
+:root[data-theme="dark"] {
+    --bg: #000000;
+    --text: #f3f3f3;
+    --text-heading: #ffffff;
+    --muted: #a3a3a3;
+    --border: #2b2b2b98;
+    --bg-elevated: rgba(255, 255, 255, 0.08);
+    --bg-card: rgba(25, 25, 25, 0.2);
+    --bg-card-hover: rgba(28, 28, 28, 0.8);
+    --bg-code: #050505;
+    --code-inline-bg: #050505;
+    --code-inline-text: #f3f3f3;
+    --code-text: #abb2bf;
+    --bg-menu: #000000;
+    --bg-modal: rgba(10, 10, 10, 0.35);
+    --hover-bg: rgba(255, 255, 255, 0.08);
+    --search-bg: rgba(50, 50, 50, 0.1);
+    --search-panel-bg: rgba(10, 10, 10, 0.6);
+    --code-group-bg: #0d0d0d;
+    --code-group-panel-bg: #000000;
+    --code-tab-active: #ffffff;
+    --footer-border: rgba(255, 255, 255, 0.08);
+    --border-subtle: rgba(255, 255, 255, 0.05);
+    --btn-primary-bg: #ffffff;
+    --btn-primary-text: #000000;
+    --btn-home-bg: #ffffff;
+    --btn-home-text: #000000;
+    --callout-note-bg: rgba(50, 50, 50, 0.1);
+    --callout-info-bg: rgba(39, 39, 39, 0.08);
+    --callout-warning-bg: rgba(180, 120, 0, 0.18);
+    --callout-warning-text: #fde047;
+    --body-radial-tint: rgba(0, 0, 0, 0.7);
+    --skeleton-pulse-1: rgba(255, 255, 255, 0.05);
+    --skeleton-pulse-2: rgba(255, 255, 255, 0.12);
+    --spider-display: none;
+    --cobweb-display: none;
+    --spider-thread: rgba(255, 255, 255, 0.3);
+
+    --hl-comment: #5c6370;
+    --hl-punct: #abb2bf;
+    --hl-func: #61afef;
+    --hl-keyword: #c678dd;
+    --hl-string: #98c379;
+    --hl-var: #e06c75;
+    --hl-op: #56b6c2;
+    --hl-num: #d19a66;
+    --hl-param: #d19a66;
+    --hl-class: #e5c07b;
+    --hl-tag: #e06c75;
+    --hl-deleted-color: #e06c75;
+    --hl-deleted-bg: rgba(224, 108, 117, 0.15);
+    --hl-inserted-color: #98c379;
+    --hl-inserted-bg: rgba(152, 195, 121, 0.15);
+
     --sidebar-width: 150px;
     --toc-width: 240px;
     --header-height: 148px;
     --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
-    --border-light: #e5e7eb;
-    --border-dark: #2b2b2b98;
-    --bg-elevated: rgba(255, 255, 255, 0.08);
+
+    --ico-toc-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h14'/%3E%3C/svg%3E");
+    --ico-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+    --ico-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    --ico-search-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
+    --ico-close-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
+}
+
+:root[data-theme="light"] {
+    --bg: #ffffff;
+    --text: #0b0b0c;
+    --text-heading: #111827;
+    --muted: #6b7280;
+    --border: #e5e7eb;
+    --bg-elevated: rgba(0, 0, 0, 0.05);
+    --bg-card: rgba(240, 240, 240, 0.85);
+    --bg-card-hover: rgba(225, 225, 225, 0.95);
+    --bg-code: #fafafa;
+    --code-inline-bg: rgba(240, 240, 240, 0.8);
+    --code-inline-text: #0b0b0c;
+    --code-text: #24292e;
+    --bg-menu: #ffffff;
+    --bg-modal: rgba(240, 240, 240, 0.7);
+    --hover-bg: rgba(0, 0, 0, 0.05);
+    --search-bg: rgba(0, 0, 0, 0.05);
+    --search-panel-bg: rgba(255, 255, 255, 0.85);
+    --code-group-bg: #f4f4f5;
+    --code-group-panel-bg: #ffffff;
+    --code-tab-active: #0b0b0c;
+    --footer-border: rgba(0, 0, 0, 0.08);
+    --border-subtle: rgba(0, 0, 0, 0.05);
+    --btn-primary-bg: #000000;
+    --btn-primary-text: #ffffff;
+    --btn-home-bg: #000000;
+    --btn-home-text: #ffffff;
+    --callout-note-bg: rgba(5, 5, 5, 0.06);
+    --callout-info-bg: rgba(39, 39, 39, 0.06);
+    --callout-warning-bg: #fefce8;
+    --callout-warning-text: #854d0e;
+    --body-radial-tint: rgba(255, 255, 255, 0.7);
+    --skeleton-pulse-1: rgba(0, 0, 0, 0.05);
+    --skeleton-pulse-2: rgba(0, 0, 0, 0.12);
+    --spider-display: none;
+    --cobweb-display: none;
+    --spider-thread: rgba(0, 0, 0, 0.3);
+
+    --hl-comment: #6a737d;
+    --hl-punct: #24292e;
+    --hl-func: #6f42c1;
+    --hl-keyword: #d73a49;
+    --hl-string: #22863a;
+    --hl-var: #e36209;
+    --hl-op: #d73a49;
+    --hl-num: #005cc5;
+    --hl-param: #b08800;
+    --hl-class: #6f42c1;
+    --hl-tag: #22863a;
+    --hl-deleted-color: #b31d28;
+    --hl-deleted-bg: #ffeef0;
+    --hl-inserted-color: #22863a;
+    --hl-inserted-bg: #f0fff4;
+}
+
+:root[data-theme="midnight"] {
+    --bg: #070913;
+    --text: #e2e8f0;
+    --text-heading: #f8fafc;
+    --muted: #7f8ea3;
+    --border: #1a2234;
+    --bg-elevated: rgba(30, 41, 59, 0.5);
+    --bg-card: rgba(15, 23, 42, 0.55);
+    --bg-card-hover: rgba(30, 41, 59, 0.7);
+    --bg-code: #0b1120;
+    --code-inline-bg: #0f172a;
+    --code-inline-text: #38bdf8;
+    --code-text: #cbd5e1;
+    --bg-menu: #0b1120;
+    --bg-modal: rgba(11, 17, 32, 0.75);
+    --hover-bg: rgba(56, 189, 248, 0.08);
+    --search-bg: rgba(30, 41, 59, 0.4);
+    --search-panel-bg: rgba(11, 17, 32, 0.85);
+    --code-group-bg: #0b1329;
+    --code-group-panel-bg: #070913;
+    --code-tab-active: #38bdf8;
+    --footer-border: #1e293b;
+    --border-subtle: rgba(255, 255, 255, 0.06);
+    --btn-primary-bg: #38bdf8;
+    --btn-primary-text: #020617;
+    --btn-home-bg: #38bdf8;
+    --btn-home-text: #020617;
+    --callout-note-bg: rgba(56, 189, 248, 0.1);
+    --callout-info-bg: rgba(99, 102, 241, 0.12);
+    --callout-warning-bg: rgba(245, 158, 11, 0.15);
+    --callout-warning-text: #fbbf24;
+    --body-radial-tint: rgba(7, 9, 19, 0.85);
+    --skeleton-pulse-1: rgba(56, 189, 248, 0.05);
+    --skeleton-pulse-2: rgba(56, 189, 248, 0.15);
+    --spider-display: none;
+    --cobweb-display: none;
+    --spider-thread: rgba(56, 189, 248, 0.3);
+
+    --hl-comment: #64748b;
+    --hl-punct: #94a3b8;
+    --hl-func: #38bdf8;
+    --hl-keyword: #818cf8;
+    --hl-string: #34d399;
+    --hl-var: #f472b6;
+    --hl-op: #38bdf8;
+    --hl-num: #fbbf24;
+    --hl-param: #cbd5e1;
+    --hl-class: #67e8f9;
+    --hl-tag: #818cf8;
+    --hl-deleted-color: #f87171;
+    --hl-deleted-bg: rgba(248, 113, 113, 0.15);
+    --hl-inserted-color: #34d399;
+    --hl-inserted-bg: rgba(52, 211, 153, 0.15);
+}
+
+:root[data-theme="nord"] {
+    --bg: #2e3440;
+    --text: #eceff4;
+    --text-heading: #88c0d0;
+    --muted: #d8dee9;
+    --border: #3b4252;
+    --bg-elevated: rgba(67, 76, 94, 0.5);
+    --bg-card: rgba(59, 66, 82, 0.5);
+    --bg-card-hover: rgba(67, 76, 94, 0.7);
+    --bg-code: #242933;
+    --code-inline-bg: #3b4252;
+    --code-inline-text: #eceff4;
+    --code-text: #d8dee9;
+    --bg-menu: #2e3440;
+    --bg-modal: rgba(46, 52, 64, 0.8);
+    --hover-bg: rgba(136, 192, 208, 0.1);
+    --search-bg: rgba(59, 66, 82, 0.5);
+    --search-panel-bg: rgba(46, 52, 64, 0.9);
+    --code-group-bg: #3b4252;
+    --code-group-panel-bg: #2e3440;
+    --code-tab-active: #88c0d0;
+    --footer-border: #3b4252;
+    --border-subtle: rgba(255, 255, 255, 0.05);
+    --btn-primary-bg: #88c0d0;
+    --btn-primary-text: #2e3440;
+    --btn-home-bg: #88c0d0;
+    --btn-home-text: #2e3440;
+    --callout-note-bg: rgba(129, 161, 193, 0.15);
+    --callout-info-bg: rgba(136, 192, 208, 0.15);
+    --callout-warning-bg: rgba(235, 203, 139, 0.15);
+    --callout-warning-text: #ebcb8b;
+    --body-radial-tint: rgba(46, 52, 64, 0.8);
+    --skeleton-pulse-1: rgba(216, 222, 233, 0.05);
+    --skeleton-pulse-2: rgba(216, 222, 233, 0.12);
+    --spider-display: none;
+    --cobweb-display: none;
+    --spider-thread: rgba(236, 239, 244, 0.3);
+
+    --hl-comment: #616e88;
+    --hl-punct: #d8dee9;
+    --hl-func: #88c0d0;
+    --hl-keyword: #81a1c1;
+    --hl-string: #a3be8c;
+    --hl-var: #d08770;
+    --hl-op: #81a1c1;
+    --hl-num: #b48ead;
+    --hl-param: #d8dee9;
+    --hl-class: #8fbcbb;
+    --hl-tag: #81a1c1;
+    --hl-deleted-color: #bf616a;
+    --hl-deleted-bg: rgba(191, 97, 106, 0.15);
+    --hl-inserted-color: #a3be8c;
+    --hl-inserted-bg: rgba(163, 190, 140, 0.15);
+}
+
+:root[data-theme="dracula"] {
+    --bg: #282a36;
+    --text: #f8f8f2;
+    --text-heading: #bd93f9;
+    --muted: #6272a4;
+    --border: #44475a;
+    --bg-elevated: rgba(68, 71, 90, 0.5);
+    --bg-card: rgba(68, 71, 90, 0.4);
+    --bg-card-hover: rgba(68, 71, 90, 0.7);
+    --bg-code: #1e1f29;
+    --code-inline-bg: #44475a;
+    --code-inline-text: #ff79c6;
+    --code-text: #f8f8f2;
+    --bg-menu: #282a36;
+    --bg-modal: rgba(40, 42, 54, 0.85);
+    --hover-bg: rgba(189, 147, 249, 0.12);
+    --search-bg: rgba(68, 71, 90, 0.5);
+    --search-panel-bg: rgba(40, 42, 54, 0.9);
+    --code-group-bg: #44475a;
+    --code-group-panel-bg: #282a36;
+    --code-tab-active: #ff79c6;
+    --footer-border: #44475a;
+    --border-subtle: rgba(255, 255, 255, 0.07);
+    --btn-primary-bg: #bd93f9;
+    --btn-primary-text: #282a36;
+    --btn-home-bg: #bd93f9;
+    --btn-home-text: #282a36;
+    --callout-note-bg: rgba(189, 147, 249, 0.15);
+    --callout-info-bg: rgba(139, 233, 253, 0.15);
+    --callout-warning-bg: rgba(241, 250, 140, 0.15);
+    --callout-warning-text: #f1fa8c;
+    --body-radial-tint: rgba(40, 42, 54, 0.85);
+    --skeleton-pulse-1: rgba(98, 114, 164, 0.08);
+    --skeleton-pulse-2: rgba(98, 114, 164, 0.2);
+    --spider-display: none;
+    --cobweb-display: none;
+    --spider-thread: rgba(189, 147, 249, 0.3);
+
+    --hl-comment: #6272a4;
+    --hl-punct: #f8f8f2;
+    --hl-func: #50fa7b;
+    --hl-keyword: #ff79c6;
+    --hl-string: #f1fa8c;
+    --hl-var: #ffb86c;
+    --hl-op: #ff79c6;
+    --hl-num: #bd93f9;
+    --hl-param: #ffb86c;
+    --hl-class: #8be9fd;
+    --hl-tag: #ff79c6;
+    --hl-deleted-color: #ff5555;
+    --hl-deleted-bg: rgba(255, 85, 85, 0.15);
+    --hl-inserted-color: #50fa7b;
+    --hl-inserted-bg: rgba(80, 250, 123, 0.15);
+}
+
+:root[data-theme="forest"] {
+    --bg: #0d1612;
+    --text: #e2ede5;
+    --text-heading: #86efac;
+    --muted: #739481;
+    --border: #1a2f24;
+    --bg-elevated: rgba(34, 76, 56, 0.35);
+    --bg-card: rgba(20, 42, 31, 0.45);
+    --bg-card-hover: rgba(28, 59, 44, 0.65);
+    --bg-code: #080f0c;
+    --code-inline-bg: #142a1f;
+    --code-inline-text: #86efac;
+    --code-text: #d1fae5;
+    --bg-menu: #0d1612;
+    --bg-modal: rgba(13, 22, 18, 0.85);
+    --hover-bg: rgba(134, 239, 172, 0.08);
+    --search-bg: rgba(26, 47, 36, 0.6);
+    --search-panel-bg: rgba(13, 22, 18, 0.9);
+    --code-group-bg: #15271e;
+    --code-group-panel-bg: #0d1612;
+    --code-tab-active: #86efac;
+    --footer-border: #1a2f24;
+    --border-subtle: rgba(255, 255, 255, 0.05);
+    --btn-primary-bg: #4ade80;
+    --btn-primary-text: #052e16;
+    --btn-home-bg: #4ade80;
+    --btn-home-text: #052e16;
+    --callout-note-bg: rgba(74, 222, 128, 0.12);
+    --callout-info-bg: rgba(45, 212, 191, 0.12);
+    --callout-warning-bg: rgba(250, 204, 21, 0.15);
+    --callout-warning-text: #fde047;
+    --body-radial-tint: rgba(13, 22, 18, 0.85);
+    --skeleton-pulse-1: rgba(134, 239, 172, 0.05);
+    --skeleton-pulse-2: rgba(134, 239, 172, 0.12);
+    --spider-display: none;
+    --cobweb-display: none;
+    --spider-thread: rgba(134, 239, 172, 0.3);
+
+    --hl-comment: #527561;
+    --hl-punct: #d1fae5;
+    --hl-func: #4ade80;
+    --hl-keyword: #2dd4bf;
+    --hl-string: #a7f3d0;
+    --hl-var: #fcd34d;
+    --hl-op: #34d399;
+    --hl-num: #fbbf24;
+    --hl-param: #e2ede5;
+    --hl-class: #6ee7b7;
+    --hl-tag: #2dd4bf;
+    --hl-deleted-color: #f87171;
+    --hl-deleted-bg: rgba(248, 113, 113, 0.15);
+    --hl-inserted-color: #4ade80;
+    --hl-inserted-bg: rgba(74, 222, 128, 0.15);
+}
+
+:root[data-theme="sunset"] {
+    --bg: #180d18;
+    --text: #fce7f3;
+    --text-heading: #fb7185;
+    --muted: #a77c98;
+    --border: #3b1d36;
+    --bg-elevated: rgba(80, 30, 70, 0.35);
+    --bg-card: rgba(50, 20, 45, 0.5);
+    --bg-card-hover: rgba(75, 30, 68, 0.65);
+    --bg-code: #120712;
+    --code-inline-bg: #3b1d36;
+    --code-inline-text: #fda4af;
+    --code-text: #fbcfe8;
+    --bg-menu: #180d18;
+    --bg-modal: rgba(24, 13, 24, 0.85);
+    --hover-bg: rgba(251, 113, 133, 0.1);
+    --search-bg: rgba(59, 29, 54, 0.5);
+    --search-panel-bg: rgba(24, 13, 24, 0.9);
+    --code-group-bg: #2d1329;
+    --code-group-panel-bg: #180d18;
+    --code-tab-active: #fb7185;
+    --footer-border: #3b1d36;
+    --border-subtle: rgba(255, 255, 255, 0.05);
+    --btn-primary-bg: #f43f5e;
+    --btn-primary-text: #ffffff;
+    --btn-home-bg: #f43f5e;
+    --btn-home-text: #ffffff;
+    --callout-note-bg: rgba(251, 113, 133, 0.15);
+    --callout-info-bg: rgba(192, 132, 252, 0.15);
+    --callout-warning-bg: rgba(251, 146, 60, 0.15);
+    --callout-warning-text: #fdba74;
+    --body-radial-tint: rgba(24, 13, 24, 0.85);
+    --skeleton-pulse-1: rgba(251, 113, 133, 0.05);
+    --skeleton-pulse-2: rgba(251, 113, 133, 0.15);
+    --spider-display: none;
+    --cobweb-display: none;
+    --spider-thread: rgba(251, 113, 133, 0.3);
+
+    --hl-comment: #835b77;
+    --hl-punct: #fbcfe8;
+    --hl-func: #fb7185;
+    --hl-keyword: #c084fc;
+    --hl-string: #f472b6;
+    --hl-var: #fb923c;
+    --hl-op: #f43f5e;
+    --hl-num: #facc15;
+    --hl-param: #fce7f3;
+    --hl-class: #e879f9;
+    --hl-tag: #c084fc;
+    --hl-deleted-color: #f87171;
+    --hl-deleted-bg: rgba(248, 113, 113, 0.15);
+    --hl-inserted-color: #4ade80;
+    --hl-inserted-bg: rgba(74, 222, 128, 0.15);
+}
+
+:root[data-theme="cyberpunk"] {
+    --bg: #050508;
+    --text: #00ffcc;
+    --text-heading: #ffe600;
+    --muted: #5e7a75;
+    --border: #1a2a26;
+    --bg-elevated: rgba(0, 255, 204, 0.08);
+    --bg-card: rgba(10, 20, 20, 0.7);
+    --bg-card-hover: rgba(20, 40, 35, 0.85);
+    --bg-code: #020204;
+    --code-inline-bg: rgba(0, 255, 204, 0.12);
+    --code-inline-text: #ffe600;
+    --code-text: #00ffcc;
+    --bg-menu: #08080f;
+    --bg-modal: rgba(5, 5, 8, 0.9);
+    --hover-bg: rgba(0, 255, 204, 0.1);
+    --search-bg: rgba(0, 255, 204, 0.08);
+    --search-panel-bg: rgba(8, 8, 15, 0.95);
+    --code-group-bg: #0e121a;
+    --code-group-panel-bg: #050508;
+    --code-tab-active: #ffe600;
+    --footer-border: #1a2a26;
+    --border-subtle: rgba(0, 255, 204, 0.15);
+    --btn-primary-bg: #ffe600;
+    --btn-primary-text: #000000;
+    --btn-home-bg: #00ffcc;
+    --btn-home-text: #000000;
+    --callout-note-bg: rgba(0, 255, 204, 0.12);
+    --callout-info-bg: rgba(255, 0, 128, 0.15);
+    --callout-warning-bg: rgba(255, 230, 0, 0.15);
+    --callout-warning-text: #ffe600;
+    --body-radial-tint: rgba(5, 5, 8, 0.9);
+    --skeleton-pulse-1: rgba(0, 255, 204, 0.05);
+    --skeleton-pulse-2: rgba(255, 230, 0, 0.12);
+    --spider-display: none;
+    --cobweb-display: none;
+    --spider-thread: rgba(0, 255, 204, 0.3);
+
+    --hl-comment: #3f5e58;
+    --hl-punct: #00ffcc;
+    --hl-func: #ffe600;
+    --hl-keyword: #ff007f;
+    --hl-string: #00f0ff;
+    --hl-var: #ff5500;
+    --hl-op: #ff007f;
+    --hl-num: #00ffcc;
+    --hl-param: #ffffff;
+    --hl-class: #ffe600;
+    --hl-tag: #ff007f;
+    --hl-deleted-color: #ff0055;
+    --hl-deleted-bg: rgba(255, 0, 85, 0.2);
+    --hl-inserted-color: #00ffcc;
+    --hl-inserted-bg: rgba(0, 255, 204, 0.2);
+}
+
+:root[data-theme="halloween"] {
+    --bg: #0a0604;
+    --text: #f5ebe6;
+    --text-heading: #ff7518;
+    --muted: #a37559;
+    --border: #3d1c0c;
+    --bg-elevated: rgba(255, 117, 24, 0.12);
+    --bg-card: rgba(28, 14, 8, 0.6);
+    --bg-card-hover: rgba(46, 21, 10, 0.85);
+    --bg-code: #050201;
+    --code-inline-bg: rgba(255, 117, 24, 0.15);
+    --code-inline-text: #ff944d;
+    --code-text: #fed7aa;
+    --bg-menu: #0e0704;
+    --bg-modal: rgba(10, 6, 4, 0.92);
+    --hover-bg: rgba(255, 117, 24, 0.12);
+    --search-bg: rgba(255, 117, 24, 0.08);
+    --search-panel-bg: rgba(14, 7, 4, 0.95);
+    --code-group-bg: #1c0e07;
+    --code-group-panel-bg: #0a0604;
+    --code-tab-active: #ff7518;
+    --footer-border: #3d1c0c;
+    --border-subtle: rgba(255, 117, 24, 0.15);
+    --btn-primary-bg: #ff7518;
+    --btn-primary-text: #000000;
+    --btn-home-bg: #ff7518;
+    --btn-home-text: #000000;
+    --callout-note-bg: rgba(255, 117, 24, 0.14);
+    --callout-info-bg: rgba(168, 85, 247, 0.15);
+    --callout-warning-bg: rgba(255, 154, 77, 0.18);
+    --callout-warning-text: #ffaa5e;
+    --body-radial-tint: rgba(10, 6, 4, 0.85);
+    --skeleton-pulse-1: rgba(255, 117, 24, 0.06);
+    --skeleton-pulse-2: rgba(255, 117, 24, 0.18);
+    --spider-display: block;
+    --cobweb-display: block;
+    --spider-thread: rgba(255, 154, 77, 0.4);
+
+    --hl-comment: #7c4f34;
+    --hl-punct: #fed7aa;
+    --hl-func: #ff944d;
+    --hl-keyword: #a855f7;
+    --hl-string: #84cc16;
+    --hl-var: #ff7518;
+    --hl-op: #a855f7;
+    --hl-num: #f59e0b;
+    --hl-param: #ffedd5;
+    --hl-class: #c084fc;
+    --hl-tag: #ff7518;
+    --hl-deleted-color: #ef4444;
+    --hl-deleted-bg: rgba(239, 68, 68, 0.2);
+    --hl-inserted-color: #84cc16;
+    --hl-inserted-bg: rgba(132, 204, 22, 0.2);
 }
 
 body.banner-dismissed {
@@ -31,15 +522,14 @@ html {
     overflow-x: hidden;
     scrollbar-width: none;
     -ms-overflow-style: none;
-
 }
 
 body {
     min-height: 100%;
     margin: 0;
     font-family: var(--font);
-    background: var(--bg-light);
-    color: var(--text-light);
+    background: var(--bg);
+    color: var(--text);
     line-height: 1.65;
     overflow-x: hidden;
     -ms-overflow-style: none;
@@ -59,20 +549,7 @@ body::before {
     inset: 0;
     pointer-events: none;
     z-index: -1;
-    background: radial-gradient(ellipse at center,
-            transparent 35%,
-            rgba(255, 255, 255, 0.7) 100%);
-}
-
-html.dark body::before {
-    background: radial-gradient(ellipse at center,
-            transparent 35%,
-            rgba(0, 0, 0, 0.7) 100%);
-}
-
-html.dark body {
-    background: var(--bg-dark);
-    color: var(--text-dark);
+    background: radial-gradient(ellipse at center, transparent 35%, var(--body-radial-tint) 100%);
 }
 
 .video-bg {
@@ -87,4 +564,101 @@ html.dark body {
 a {
     color: inherit;
     text-decoration: none;
+}
+
+.cobweb {
+    display: var(--cobweb-display);
+    position: fixed;
+    width: 160px;
+    height: 160px;
+    pointer-events: none;
+    z-index: 35;
+    opacity: 0.8;
+}
+
+.cobweb-top-left {
+    top: 0;
+    left: 0;
+    transform: scaleX(-1);
+}
+
+.cobweb-top-right {
+    top: 0;
+    right: 0;
+}
+
+.cobweb-media {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+}
+
+.spider-container {
+    display: var(--spider-display);
+    position: fixed;
+    top: 0;
+    right: 12%;
+    pointer-events: none;
+    z-index: 36;
+    animation: spiderDescend 10s ease-in-out infinite;
+}
+
+.spider-thread {
+    width: 1.5px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--spider-thread);
+}
+
+.spider-body {
+    position: relative;
+    width: 48px;
+    height: 48px;
+    margin-top: 100px;
+    animation: spiderSway 3s ease-in-out infinite alternate;
+}
+
+.spider-media {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+    scale: 2;
+    padding-top: 20px;
+}
+
+@keyframes spiderDescend {
+    0% {
+        transform: translateY(-80px);
+    }
+
+    45% {
+        transform: translateY(240px);
+    }
+
+    55% {
+        transform: translateY(240px);
+    }
+
+    90% {
+        transform: translateY(10px);
+    }
+
+    100% {
+        transform: translateY(-80px);
+    }
+}
+
+@keyframes spiderSway {
+    0% {
+        transform: rotate(-10deg);
+    }
+
+    100% {
+        transform: rotate(10deg);
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 5ffa528..9809c39 100644
--- a/index.html
+++ b/index.html
@@ -87,35 +87,26 @@
         src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
     <script>
         (function () {
-            var saved = localStorage.getItem('vyla-theme');
-            var isDark = saved ? saved === 'dark' : true;
-            document.documentElement.classList.toggle('dark', isDark);
+            var saved = localStorage.getItem('vyla-theme') || 'halloween';
+            document.documentElement.setAttribute('data-theme', saved);
         })();
     </script>
 </head>
 
 <body>
+    <div class="cobweb cobweb-top-left" aria-hidden="true">
+        <img class="cobweb-media" src="/assets/images/themes/halloween/cobweb.png" alt="" />
+    </div>
+    <div class="cobweb cobweb-top-right" aria-hidden="true">
+        <img class="cobweb-media" src="/assets/images/themes/halloween/cobweb.png" alt="" />
+    </div>
+    <div class="spider-container" aria-hidden="true">
+        <div class="spider-thread"></div>
+        <div class="spider-body">
+            <img class="spider-media" src="https://www.pngmart.com/files/1/Spider-PNG-File.png" alt="" />
+        </div>
+    </div>
     <video class="video-bg" autoplay muted loop playsinline></video>
-
-    <script>
-        const video = document.querySelector('.video-bg');
-
-        function setVideoBackground() {
-            video.src = document.documentElement.classList.contains('dark')
-                ? ''
-                : '/';
-
-            video.load();
-            video.play().catch(() => { });
-        }
-
-        setVideoBackground();
-
-        new MutationObserver(setVideoBackground).observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ['class']
-        });
-    </script>
     <div id="banner">
         <span>
             Rights holders can request source removal — <a href="/misc/project/dmca">DMCA policy</a>.