From 155341c2bb6f115478e533d543127478d8c11d18 Mon Sep 17 00:00:00 2001
From: Micah <micahscopes@gmail.com>
Date: Tue, 31 Mar 2026 14:23:38 -0500
Subject: [PATCH 1/5] Wait for stylesheet load before adopting into shadow DOM

---
 crates/fe-web/assets/fe-code-block.js | 40 ++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/crates/fe-web/assets/fe-code-block.js b/crates/fe-web/assets/fe-code-block.js
index 50c9cf7ff8..cff4c51cf8 100644
--- a/crates/fe-web/assets/fe-code-block.js
+++ b/crates/fe-web/assets/fe-code-block.js
@@ -161,16 +161,7 @@ class FeCodeBlock extends HTMLElement {
     // Create shadow root once
     if (!this.shadowRoot) {
       this.attachShadow({ mode: "open" });
-      var sheet = _getCodeBlockSheet();
-      if (sheet) {
-        this.shadowRoot.adoptedStyleSheets = [sheet];
-      } else {
-        // Fallback: clone page styles into shadow root
-        var pageStyles = document.querySelectorAll("style");
-        for (var i = 0; i < pageStyles.length; i++) {
-          this.shadowRoot.appendChild(pageStyles[i].cloneNode(true));
-        }
-      }
+      this._adoptStyles();
     }
 
     this._render();
@@ -201,6 +192,35 @@ class FeCodeBlock extends HTMLElement {
     });
   }
 
+  /** Adopt highlight styles into shadow root, waiting for stylesheet if needed. */
+  _adoptStyles() {
+    var sheet = _getCodeBlockSheet();
+    if (sheet) {
+      this.shadowRoot.adoptedStyleSheets = [sheet];
+      return;
+    }
+    // Stylesheet not ready — find the <link> that loads it and wait for load
+    var self = this;
+    var links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (var i = 0; i < links.length; i++) {
+      var href = links[i].getAttribute("href") || "";
+      if (href.indexOf("highlight") !== -1) {
+        links[i].addEventListener("load", function onLoad() {
+          this.removeEventListener("load", onLoad);
+          _invalidateCodeBlockSheet();
+          self._adoptStyles();
+          self._render();
+        });
+        return;
+      }
+    }
+    // No highlight <link> found — clone page <style> tags as fallback
+    var pageStyles = document.querySelectorAll("style");
+    for (var j = 0; j < pageStyles.length; j++) {
+      this.shadowRoot.appendChild(pageStyles[j].cloneNode(true));
+    }
+  }
+
   /** Look up an item by path in per-component or global index. */
   _findItem(path) {
     var index = this._index || window.FE_DOC_INDEX;

From d4a4593069d95c7f718df39d8ef5876528f2f060 Mon Sep 17 00:00:00 2001
From: Micah <micahscopes@gmail.com>
Date: Tue, 31 Mar 2026 14:36:48 -0500
Subject: [PATCH 2/5] Catppuccin Mocha/Latte in source fe-highlight.css with
 data-theme support

---
 crates/fe-web/assets/fe-highlight.css | 195 ++++++++++++++++----------
 1 file changed, 123 insertions(+), 72 deletions(-)

diff --git a/crates/fe-web/assets/fe-highlight.css b/crates/fe-web/assets/fe-highlight.css
index 2fa36b69de..d8721a607d 100644
--- a/crates/fe-web/assets/fe-highlight.css
+++ b/crates/fe-web/assets/fe-highlight.css
@@ -1,57 +1,120 @@
-/* Fe syntax highlighting (tree-sitter) — One Dark inspired
-   Standalone version with hardcoded colors for embedding in Starlight/Astro.
-   Override these CSS custom properties to theme the syntax colors:
-     --fe-hl-keyword, --fe-hl-type, --fe-hl-type-interface, --fe-hl-type-variant,
-     --fe-hl-function, --fe-hl-string, --fe-hl-string-escape, --fe-hl-number,
-     --fe-hl-comment, --fe-hl-operator, --fe-hl-variable, --fe-hl-attribute,
-     --fe-hl-constant, --fe-hl-punctuation,
-     --fe-code-bg, --fe-code-border, --fe-code-text, --fe-code-font,
-     --fe-code-size, --fe-code-line-height */
-
-/* Light mode syntax colors */
-.hl-keyword { color: var(--fe-hl-keyword, #7c3aed); }
-.hl-type, .hl-type-builtin { color: var(--fe-hl-type, #b45309); }
-.hl-type-interface { color: var(--fe-hl-type-interface, #9333ea); }
-.hl-type-enum-variant { color: var(--fe-hl-type-variant, #a16207); }
-.hl-function, .hl-function-definition, .hl-function-method { color: var(--fe-hl-function, #2563eb); }
-.hl-string { color: var(--fe-hl-string, #16a34a); }
-.hl-string-escape { color: var(--fe-hl-string-escape, #0d9488); }
-.hl-number { color: var(--fe-hl-number, #c2410c); }
-.hl-comment, .hl-comment-doc { color: var(--fe-hl-comment, #6b7280); font-style: italic; }
-.hl-operator { color: var(--fe-hl-operator, #475569); }
-.hl-property, .hl-variable-parameter { color: var(--fe-hl-variable, #dc2626); }
-.hl-variable { color: var(--fe-hl-variable, #dc2626); }
-.hl-attribute { color: var(--fe-hl-attribute, #c2410c); }
-.hl-constant { color: var(--fe-hl-constant, #c2410c); font-weight: bold; }
-.hl-punctuation-bracket, .hl-punctuation-delimiter, .hl-punctuation-special { color: var(--fe-hl-punctuation, #64748b); }
-
-/* Dark mode syntax colors */
-@media (prefers-color-scheme: dark) {
-    .hl-keyword { color: var(--fe-hl-keyword, #c678dd); }
-    .hl-type, .hl-type-builtin { color: var(--fe-hl-type, #e5c07b); }
-    .hl-type-interface { color: var(--fe-hl-type-interface, #e77ee7); }
-    .hl-type-enum-variant { color: var(--fe-hl-type-variant, #e7c77e); }
-    .hl-function, .hl-function-definition, .hl-function-method { color: var(--fe-hl-function, #61afef); }
-    .hl-string { color: var(--fe-hl-string, #98c379); }
-    .hl-string-escape { color: var(--fe-hl-string-escape, #56b6c2); }
-    .hl-number { color: var(--fe-hl-number, #d19a66); }
-    .hl-comment, .hl-comment-doc { color: var(--fe-hl-comment, #5c6370); font-style: italic; }
-    .hl-operator { color: var(--fe-hl-operator, #abb2bf); }
-    .hl-property, .hl-variable-parameter { color: var(--fe-hl-variable, #e06c75); }
-    .hl-variable { color: var(--fe-hl-variable, #e06c75); }
-    .hl-attribute { color: var(--fe-hl-attribute, #d19a66); }
-    .hl-constant { color: var(--fe-hl-constant, #d19a66); font-weight: bold; }
-    .hl-punctuation-bracket, .hl-punctuation-delimiter, .hl-punctuation-special { color: var(--fe-hl-punctuation, #abb2bf); }
+/* Fe syntax highlighting — CSS custom properties define all colors.
+   Default: Catppuccin Mocha (dark). Light override via prefers-color-scheme
+   or data-theme="light". Host pages can override any --fe-* variable. */
+
+/* ============================================================================
+   Color variables
+   ============================================================================ */
+
+/* Default: Catppuccin Mocha (dark) */
+:root {
+    --fe-hl-keyword: #cba6f7;
+    --fe-hl-variable-builtin: #94e2d5;
+    --fe-hl-type: #f9e2af;
+    --fe-hl-type-interface: #cba6f7;
+    --fe-hl-type-variant: #f9e2af;
+    --fe-hl-function: #89b4fa;
+    --fe-hl-string: #a6e3a1;
+    --fe-hl-string-escape: #94e2d5;
+    --fe-hl-number: #94e2d5;
+    --fe-hl-comment: #6c7086;
+    --fe-hl-operator: #94e2d5;
+    --fe-hl-variable: #a6e3a1;
+    --fe-hl-attribute: #cba6f7;
+    --fe-hl-constant: #94e2d5;
+    --fe-hl-punctuation: #6c7086;
+
+    --fe-code-bg: #1e1e2e;
+    --fe-code-border: #313244;
+    --fe-code-text: #cdd6f4;
+    --fe-code-line-number: #6c7086;
+    --fe-code-font: "JetBrains Mono", "Fira Code", monospace;
+    --fe-code-size: 0.8rem;
+    --fe-code-line-height: 1.6;
+    --fe-code-radius: 6px;
+}
+
+/* Light override: Catppuccin Latte — via OS preference */
+@media (prefers-color-scheme: light) {
+    :root:not([data-theme="dark"]) {
+        --fe-hl-keyword: #7c3aed;
+        --fe-hl-variable-builtin: #0891b2;
+        --fe-hl-type: #b08800;
+        --fe-hl-type-interface: #7c3aed;
+        --fe-hl-type-variant: #b08800;
+        --fe-hl-function: #2563eb;
+        --fe-hl-string: #16a34a;
+        --fe-hl-string-escape: #0d9488;
+        --fe-hl-number: #0891b2;
+        --fe-hl-comment: #9ca0b0;
+        --fe-hl-operator: #0891b2;
+        --fe-hl-variable: #0d9488;
+        --fe-hl-attribute: #7c3aed;
+        --fe-hl-constant: #0891b2;
+        --fe-hl-punctuation: #6b7280;
+
+        --fe-code-bg: #eff1f5;
+        --fe-code-border: #ccd0da;
+        --fe-code-text: #4c4f69;
+        --fe-code-line-number: #9ca0b0;
+    }
+}
+
+/* Light override: explicit toggle */
+:root[data-theme="light"] {
+    --fe-hl-keyword: #7c3aed;
+    --fe-hl-variable-builtin: #0891b2;
+    --fe-hl-type: #b08800;
+    --fe-hl-type-interface: #7c3aed;
+    --fe-hl-type-variant: #b08800;
+    --fe-hl-function: #2563eb;
+    --fe-hl-string: #16a34a;
+    --fe-hl-string-escape: #0d9488;
+    --fe-hl-number: #0891b2;
+    --fe-hl-comment: #9ca0b0;
+    --fe-hl-operator: #0891b2;
+    --fe-hl-variable: #0d9488;
+    --fe-hl-attribute: #7c3aed;
+    --fe-hl-constant: #0891b2;
+    --fe-hl-punctuation: #6b7280;
+
+    --fe-code-bg: #eff1f5;
+    --fe-code-border: #ccd0da;
+    --fe-code-text: #4c4f69;
+    --fe-code-line-number: #9ca0b0;
 }
 
-/* Smooth transition for SCIP symbol hover highlights.
-   feHighlight() sets inline styles; the browser tweens the change. */
+/* ============================================================================
+   Syntax highlight rules — read variables, no fallbacks
+   ============================================================================ */
+
+.hl-keyword { color: var(--fe-hl-keyword); }
+.hl-variable-builtin { color: var(--fe-hl-variable-builtin); font-style: italic; }
+.hl-type, .hl-type-builtin { color: var(--fe-hl-type); }
+.hl-type-interface { color: var(--fe-hl-type-interface); }
+.hl-type-enum-variant { color: var(--fe-hl-type-variant); }
+.hl-function, .hl-function-definition, .hl-function-method { color: var(--fe-hl-function); }
+.hl-string { color: var(--fe-hl-string); }
+.hl-string-escape { color: var(--fe-hl-string-escape); }
+.hl-number { color: var(--fe-hl-number); }
+.hl-comment, .hl-comment-doc { color: var(--fe-hl-comment); font-style: italic; }
+.hl-operator { color: var(--fe-hl-operator); }
+.hl-property, .hl-variable-parameter { color: var(--fe-hl-variable); }
+.hl-variable { color: var(--fe-hl-variable); }
+.hl-attribute { color: var(--fe-hl-attribute); }
+.hl-constant { color: var(--fe-hl-constant); font-weight: bold; }
+.hl-punctuation-bracket, .hl-punctuation-delimiter, .hl-punctuation-special { color: var(--fe-hl-punctuation); }
+
+/* SCIP symbol hover highlight transitions */
 [class*="sym-"] {
     transition: background 0.2s ease-out, text-decoration 0.2s ease-out,
                 text-decoration-color 0.2s ease-out;
 }
 
-/* <fe-code-block> custom element */
+/* ============================================================================
+   <fe-code-block> component layout
+   ============================================================================ */
+
 fe-code-block {
     display: block;
     margin: 1rem 0;
@@ -59,24 +122,18 @@ fe-code-block {
 
 .fe-code-block-wrapper {
     display: flex;
-    background: var(--fe-code-bg, #0d1117);
-    border: 1px solid var(--fe-code-border, #2d3748);
-    border-radius: var(--fe-code-radius, 6px);
+    background: var(--fe-code-bg);
+    border: 1px solid var(--fe-code-border);
+    border-radius: var(--fe-code-radius);
     overflow-x: auto;
 }
 
-/* Tighter margins in inline contexts (member headers, code headers, etc.)
-   These target the fe-code-block element in the light DOM. The shadow DOM
-   wrapper styles (border, background) are controlled via CSS custom
-   properties that inherit through the shadow boundary. */
 .member-header fe-code-block,
 .code-header fe-code-block,
 .implementor-sig fe-code-block {
     margin: 0;
 }
 
-/* Inline signature contexts: suppress border, keep code background.
-   (these inherit into the shadow root where .fe-code-block-wrapper reads them). */
 .member-header,
 .code-header,
 .implementor-sig {
@@ -87,17 +144,17 @@ fe-code-block {
     display: flex;
     flex-direction: column;
     padding: 0.75rem 0.5rem;
-    border-right: 1px solid var(--fe-code-border, #2d3748);
+    border-right: 1px solid var(--fe-code-border);
     text-align: right;
     user-select: none;
-    color: var(--fe-code-line-number, #9ba3af);
-    font-family: var(--fe-code-font, "JetBrains Mono", "Fira Code", monospace);
-    font-size: var(--fe-code-size, 0.8rem);
-    line-height: var(--fe-code-line-height, 1.6);
+    color: var(--fe-code-line-number);
+    font-family: var(--fe-code-font);
+    font-size: var(--fe-code-size);
+    line-height: var(--fe-code-line-height);
 }
 
 .fe-line-numbers span {
-    line-height: var(--fe-code-line-height, 1.6);
+    line-height: var(--fe-code-line-height);
 }
 
 .fe-code-pre {
@@ -106,20 +163,14 @@ fe-code-block {
     padding: 0.75rem 1rem;
     background: transparent;
     overflow-x: auto;
-    font-family: var(--fe-code-font, "JetBrains Mono", "Fira Code", monospace);
-    font-size: var(--fe-code-size, 0.8rem);
-    line-height: var(--fe-code-line-height, 1.6);
+    font-family: var(--fe-code-font);
+    font-size: var(--fe-code-size);
+    line-height: var(--fe-code-line-height);
 }
 
 .fe-code-pre code {
     font-family: inherit;
     font-size: inherit;
     line-height: inherit;
-    color: var(--fe-code-text, #334155);
-}
-
-@media (prefers-color-scheme: dark) {
-    .fe-code-pre code {
-        color: var(--fe-code-text, #e4e4e4);
-    }
+    color: var(--fe-code-text);
 }

From 29a7412ccac837dfe08729b5a7d1491b532beac3 Mon Sep 17 00:00:00 2001
From: Micah <micahscopes@gmail.com>
Date: Tue, 31 Mar 2026 15:05:00 -0500
Subject: [PATCH 3/5] Fix iOS TextAutoSizing, mobile button top-right, overflow
 fixes

---
 crates/fe-web/assets/fe-code-block.js | 28 +++++++++++++++++++++++++++
 crates/fe-web/assets/fe-highlight.css | 13 +++++++++++++
 crates/fe-web/assets/styles.css       | 23 ++++++++++++++++------
 3 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/crates/fe-web/assets/fe-code-block.js b/crates/fe-web/assets/fe-code-block.js
index cff4c51cf8..5edfa10862 100644
--- a/crates/fe-web/assets/fe-code-block.js
+++ b/crates/fe-web/assets/fe-code-block.js
@@ -80,6 +80,34 @@ function _invalidateCodeBlockSheet() {
   _codeBlockSheet = null;
 }
 
+// Shared list of code blocks waiting for the highlight stylesheet to load.
+var _pendingStyleAdoptions = [];
+var _stylesheetWatchStarted = false;
+
+function _waitForHighlightStylesheet(codeBlock) {
+  _pendingStyleAdoptions.push(codeBlock);
+  if (_stylesheetWatchStarted) return;
+  _stylesheetWatchStarted = true;
+
+  var links = document.querySelectorAll('link[rel="stylesheet"]');
+  for (var i = 0; i < links.length; i++) {
+    var href = links[i].getAttribute("href") || "";
+    if (href.indexOf("highlight") !== -1) {
+      links[i].addEventListener("load", function onLoad() {
+        this.removeEventListener("load", onLoad);
+        _invalidateCodeBlockSheet();
+        var pending = _pendingStyleAdoptions;
+        _pendingStyleAdoptions = [];
+        for (var j = 0; j < pending.length; j++) {
+          pending[j]._adoptStyles();
+          pending[j]._render();
+        }
+      });
+      return;
+    }
+  }
+}
+
 /**
  * Extract a named region from source text.
  * Regions are delimited by `// #region name` and `// #endregion name` comments.
diff --git a/crates/fe-web/assets/fe-highlight.css b/crates/fe-web/assets/fe-highlight.css
index d8721a607d..47205cebbc 100644
--- a/crates/fe-web/assets/fe-highlight.css
+++ b/crates/fe-web/assets/fe-highlight.css
@@ -126,6 +126,7 @@ fe-code-block {
     border: 1px solid var(--fe-code-border);
     border-radius: var(--fe-code-radius);
     overflow-x: auto;
+    max-width: 100%;
 }
 
 .member-header fe-code-block,
@@ -151,6 +152,8 @@ fe-code-block {
     font-family: var(--fe-code-font);
     font-size: var(--fe-code-size);
     line-height: var(--fe-code-line-height);
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
 }
 
 .fe-line-numbers span {
@@ -159,6 +162,7 @@ fe-code-block {
 
 .fe-code-pre {
     flex: 1;
+    min-width: 0;
     margin: 0;
     padding: 0.75rem 1rem;
     background: transparent;
@@ -166,6 +170,13 @@ fe-code-block {
     font-family: var(--fe-code-font);
     font-size: var(--fe-code-size);
     line-height: var(--fe-code-line-height);
+    /* Prevent iOS Safari TextAutoSizing from inflating font-size in code blocks.
+       Without this, the algorithm selectively enlarges text in blocks whose
+       intrinsic width exceeds the viewport (timing-dependent on first load),
+       causing inconsistent sizes across code blocks with identical styles.
+       Using 100% (not none) preserves user zoom and accessibility settings. */
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
 }
 
 .fe-code-pre code {
@@ -173,4 +184,6 @@ fe-code-block {
     font-size: inherit;
     line-height: inherit;
     color: var(--fe-code-text);
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
 }
diff --git a/crates/fe-web/assets/styles.css b/crates/fe-web/assets/styles.css
index c60d098403..6ba6abdb7d 100644
--- a/crates/fe-web/assets/styles.css
+++ b/crates/fe-web/assets/styles.css
@@ -1148,16 +1148,16 @@ fe-doc-viewer, .fe-doc-viewer {
 .mobile-menu-btn {
     display: none;
     position: fixed;
-    bottom: 1rem;
-    right: 1rem;
+    top: 0.5rem;
+    right: 0.75rem;
     z-index: 1001;
-    width: 3rem;
-    height: 3rem;
-    border-radius: 50%;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 6px;
     border: none;
     background: var(--accent);
     color: white;
-    font-size: 1.25rem;
+    font-size: 1.1rem;
     cursor: pointer;
     box-shadow: 0 2px 8px rgba(0,0,0,0.3);
 }
@@ -1354,4 +1354,15 @@ fe-doc-viewer, .fe-doc-viewer {
     .page-outline {
         display: none;
     }
+    /* Prevent code blocks from blowing up on mobile */
+    .fe-doc-viewer-content {
+        overflow-x: hidden;
+    }
+    fe-code-block {
+        max-width: 100%;
+        overflow-x: auto;
+    }
+    .member-item, .impl-block, .method-item {
+        overflow-x: auto;
+    }
 }

From 6e11879aeac8f5b22a19a650712e724d46219b55 Mon Sep 17 00:00:00 2001
From: Micah <micahscopes@gmail.com>
Date: Tue, 31 Mar 2026 15:11:33 -0500
Subject: [PATCH 4/5] Remove duplicate old mobile button styles

---
 crates/fe-web/assets/styles.css | 22 +---------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/crates/fe-web/assets/styles.css b/crates/fe-web/assets/styles.css
index 6ba6abdb7d..77aba7e6c8 100644
--- a/crates/fe-web/assets/styles.css
+++ b/crates/fe-web/assets/styles.css
@@ -881,27 +881,7 @@ fe-code-block {
     color: var(--text);
 }
 
-/* Mobile hamburger button */
-.mobile-menu-btn {
-    display: none;
-    position: fixed;
-    top: 0.75rem;
-    left: 0.75rem;
-    z-index: 101;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    color: var(--text);
-    padding: 0.375rem 0.5rem;
-    cursor: pointer;
-    font-size: 1.25rem;
-    line-height: 1;
-}
-
-.mobile-menu-btn:hover {
-    border-color: var(--accent);
-    color: var(--accent);
-}
+/* Old mobile menu styles removed — see fe-doc-viewer component styles below */
 
 .sidebar-backdrop {
     display: none;

From 4dc98cb98d9eafbf46453c81235ef311829d92c9 Mon Sep 17 00:00:00 2001
From: Micah <micahscopes@gmail.com>
Date: Tue, 31 Mar 2026 17:52:28 -0500
Subject: [PATCH 5/5] Fix styles.css: Catppuccin Mocha page colors, data-theme
 support

---
 crates/fe-web/assets/styles.css | 98 +++++++++++++++++++++++----------
 1 file changed, 68 insertions(+), 30 deletions(-)

diff --git a/crates/fe-web/assets/styles.css b/crates/fe-web/assets/styles.css
index 77aba7e6c8..41dd88ec4c 100644
--- a/crates/fe-web/assets/styles.css
+++ b/crates/fe-web/assets/styles.css
@@ -1,3 +1,5 @@
+/* Page layout variables. Code/syntax variables in fe-highlight.css. */
+
 /* Light mode (default) */
 :root {
     --bg: #ffffff;
@@ -8,7 +10,6 @@
     --accent-hover: #6366f1;
     --text-accent: #4f46e5;
     --border: #e2e8f0;
-    --fe-code-bg: #f1f5f9;
     --code-bg: var(--fe-code-bg);
 
     --hl-ref-bg: rgba(79, 70, 229, 0.08);
@@ -17,18 +18,17 @@
     --target-bg: rgba(79, 70, 229, 0.06);
 }
 
-/* Dark mode */
+/* Dark mode via OS preference */
 @media (prefers-color-scheme: dark) {
-    :root {
-        --bg: #0f0f1a;
-        --bg-secondary: #16162a;
-        --text: #e2e8f0;
-        --text-muted: #9ba3af;
-        --accent: #6366f1;
-        --accent-hover: #c7d2fe;
-        --text-accent: #a5b4fc;
-        --border: #2d3748;
-        --fe-code-bg: #0d1117;
+    :root:not([data-theme="light"]) {
+        --bg: #1e1e2e;
+        --bg-secondary: #181825;
+        --text: #cdd6f4;
+        --text-muted: #9399b2;
+        --accent: #89b4fa;
+        --accent-hover: #b4d0fb;
+        --text-accent: #89b4fa;
+        --border: #313244;
         --code-bg: var(--fe-code-bg);
 
         --hl-ref-bg: rgba(99, 102, 241, 0.18);
@@ -38,6 +38,24 @@
     }
 }
 
+/* Dark mode via explicit toggle */
+:root[data-theme="dark"] {
+    --bg: #1e1e2e;
+    --bg-secondary: #181825;
+    --text: #cdd6f4;
+    --text-muted: #9399b2;
+    --accent: #89b4fa;
+    --accent-hover: #b4d0fb;
+    --text-accent: #89b4fa;
+    --border: #313244;
+    --code-bg: var(--fe-code-bg);
+
+    --hl-ref-bg: rgba(99, 102, 241, 0.18);
+    --hl-def-bg: rgba(99, 102, 241, 0.30);
+    --hl-def-underline: rgba(99, 102, 241, 0.6);
+    --target-bg: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary));
+}
+
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 body {
@@ -288,15 +306,27 @@ body {
 .kind-badge.const { background: #ede9fe; color: #5b21b6; }
 
 @media (prefers-color-scheme: dark) {
-    .kind-badge.struct { background: #2d4a3e; color: #7ee787; }
-    .kind-badge.enum { background: #3d3a2d; color: #e7c77e; }
-    .kind-badge.function, .kind-badge.fn { background: #2d3a4a; color: #7eb8e7; }
-    .kind-badge.trait { background: #4a2d4a; color: #e77ee7; }
-    .kind-badge.module, .kind-badge.mod { background: #2d2d4a; color: #9d7ee7; }
-    .kind-badge.contract { background: #4a3d2d; color: #e7b87e; }
-    .kind-badge.type { background: #2d4a4a; color: #7ee7e7; }
-    .kind-badge.const { background: #3a2d4a; color: #b87ee7; }
-}
+    :root:not([data-theme="light"]) .kind-badge.struct { background: #2d4a3e; color: #7ee787; }
+    :root:not([data-theme="light"]) .kind-badge.enum { background: #3d3a2d; color: #e7c77e; }
+    :root:not([data-theme="light"]) .kind-badge.function,
+    :root:not([data-theme="light"]) .kind-badge.fn { background: #2d3a4a; color: #7eb8e7; }
+    :root:not([data-theme="light"]) .kind-badge.trait { background: #4a2d4a; color: #e77ee7; }
+    :root:not([data-theme="light"]) .kind-badge.module,
+    :root:not([data-theme="light"]) .kind-badge.mod { background: #2d2d4a; color: #9d7ee7; }
+    :root:not([data-theme="light"]) .kind-badge.contract { background: #4a3d2d; color: #e7b87e; }
+    :root:not([data-theme="light"]) .kind-badge.type { background: #2d4a4a; color: #7ee7e7; }
+    :root:not([data-theme="light"]) .kind-badge.const { background: #3a2d4a; color: #b87ee7; }
+}
+:root[data-theme="dark"] .kind-badge.struct { background: #2d4a3e; color: #7ee787; }
+:root[data-theme="dark"] .kind-badge.enum { background: #3d3a2d; color: #e7c77e; }
+:root[data-theme="dark"] .kind-badge.function,
+:root[data-theme="dark"] .kind-badge.fn { background: #2d3a4a; color: #7eb8e7; }
+:root[data-theme="dark"] .kind-badge.trait { background: #4a2d4a; color: #e77ee7; }
+:root[data-theme="dark"] .kind-badge.module,
+:root[data-theme="dark"] .kind-badge.mod { background: #2d2d4a; color: #9d7ee7; }
+:root[data-theme="dark"] .kind-badge.contract { background: #4a3d2d; color: #e7b87e; }
+:root[data-theme="dark"] .kind-badge.type { background: #2d4a4a; color: #7ee7e7; }
+:root[data-theme="dark"] .kind-badge.const { background: #3a2d4a; color: #b87ee7; }
 
 /* Main item signature at top of page. The wrapper provides the visual
    box; the inner fe-code-block border is suppressed to avoid doubling. */
@@ -1289,15 +1319,23 @@ fe-doc-viewer, .fe-doc-viewer {
 .fe-nav-badge.const { background: #ede9fe; color: #5b21b6; }
 
 @media (prefers-color-scheme: dark) {
-    .fe-nav-badge.struct { background: #2d4a3e; color: #7ee787; }
-    .fe-nav-badge.enum { background: #3d3a2d; color: #e7c77e; }
-    .fe-nav-badge.fn { background: #2d3a4a; color: #7eb8e7; }
-    .fe-nav-badge.trait { background: #4a2d4a; color: #e77ee7; }
-    .fe-nav-badge.mod { background: #2d2d4a; color: #9d7ee7; }
-    .fe-nav-badge.contract { background: #4a3d2d; color: #e7b87e; }
-    .fe-nav-badge.type { background: #2d4a4a; color: #7ee7e7; }
-    .fe-nav-badge.const { background: #3a2d4a; color: #b87ee7; }
-}
+    :root:not([data-theme="light"]) .fe-nav-badge.struct { background: #2d4a3e; color: #7ee787; }
+    :root:not([data-theme="light"]) .fe-nav-badge.enum { background: #3d3a2d; color: #e7c77e; }
+    :root:not([data-theme="light"]) .fe-nav-badge.fn { background: #2d3a4a; color: #7eb8e7; }
+    :root:not([data-theme="light"]) .fe-nav-badge.trait { background: #4a2d4a; color: #e77ee7; }
+    :root:not([data-theme="light"]) .fe-nav-badge.mod { background: #2d2d4a; color: #9d7ee7; }
+    :root:not([data-theme="light"]) .fe-nav-badge.contract { background: #4a3d2d; color: #e7b87e; }
+    :root:not([data-theme="light"]) .fe-nav-badge.type { background: #2d4a4a; color: #7ee7e7; }
+    :root:not([data-theme="light"]) .fe-nav-badge.const { background: #3a2d4a; color: #b87ee7; }
+}
+:root[data-theme="dark"] .fe-nav-badge.struct { background: #2d4a3e; color: #7ee787; }
+:root[data-theme="dark"] .fe-nav-badge.enum { background: #3d3a2d; color: #e7c77e; }
+:root[data-theme="dark"] .fe-nav-badge.fn { background: #2d3a4a; color: #7eb8e7; }
+:root[data-theme="dark"] .fe-nav-badge.trait { background: #4a2d4a; color: #e77ee7; }
+:root[data-theme="dark"] .fe-nav-badge.mod { background: #2d2d4a; color: #9d7ee7; }
+:root[data-theme="dark"] .fe-nav-badge.contract { background: #4a3d2d; color: #e7b87e; }
+:root[data-theme="dark"] .fe-nav-badge.type { background: #2d4a4a; color: #7ee7e7; }
+:root[data-theme="dark"] .fe-nav-badge.const { background: #3a2d4a; color: #b87ee7; }
 
 /* Scroll offset for anchored elements (clears sticky headers) */
 .member-item[id], .impl-block[id], .method-item[id], .children-section h2[id],