diff --git a/website/src/routes/liveline.tsx b/website/src/routes/liveline.tsx
index 3ef9d0c..89b2c6c 100644
--- a/website/src/routes/liveline.tsx
+++ b/website/src/routes/liveline.tsx
@@ -652,20 +652,20 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
             back.
           </Paragraph>
 
-          <CodeBlock lang="bash">{`+---------------------+     +-------------------+     +-----------------+
-|   BROWSER           |     |   LOCALHOST        |     |   CLIENT        |
-|                     |     |                    |     |                 |
-|  +---------------+  |     | WebSocket Server   |     |  +-----------+ |
-|  |   Extension   |<--------->  :19988          |     |  | CLI / MCP | |
-|  +-------+-------+  | WS  |                    |     |  +-----------+ |
-|          |          |     |  /extension        |     |        |       |
-|    chrome.debugger  |     |       |            |     |        v       |
-|          v          |     |       v            |     |  +-----------+ |
-|  +---------------+  |     |  /cdp/:id <------------> |  | execute   | |
-|  | Tab 1 (green) |  |     +--------------------+  WS |  +-----------+ |
-|  | Tab 2 (green) |  |                                |        |       |
-|  | Tab 3 (gray)  |  |     Tab 3 not controlled       | Playwright API |
-+---------------------+     (extension not clicked)    +-----------------+`}</CodeBlock>
+          <CodeBlock lang="bash">{`┌─────────────────────┐     ┌─────────────────────┐     ┌─────────────────┐
+│   BROWSER           │     │   LOCALHOST          │     │   CLIENT        │
+│                     │     │                      │     │                 │
+│  ┌───────────────┐  │     │ WebSocket Server     │     │  ┌───────────┐ │
+│  │   Extension   │<----------->  :19988          │     │  │ CLI / MCP │ │
+│  └───────┬───────┘  │ WS  │                      │     │  └───────────┘ │
+│          │          │     │  /extension           │     │        │       │
+│    chrome.debugger  │     │       │               │     │        v       │
+│          v          │     │       v               │     │  ┌───────────┐ │
+│  ┌───────────────┐  │     │  /cdp/:id <--------------->│  │ execute   │ │
+│  │ Tab 1 (green) │  │     └──────────────────────┘  WS │  └───────────┘ │
+│  │ Tab 2 (green) │  │                                  │        │       │
+│  │ Tab 3 (gray)  │  │     Tab 3 not controlled         │ Playwright API │
+└─────────────────────┘     (extension not clicked)      └─────────────────┘`}</CodeBlock>
 
           <Paragraph>
             No Chrome restart required. No <InlineCode>--remote-debugging-port</InlineCode>{" "}
diff --git a/website/src/styles/liveline-prism.css b/website/src/styles/liveline-prism.css
index a14305a..3e087df 100644
--- a/website/src/styles/liveline-prism.css
+++ b/website/src/styles/liveline-prism.css
@@ -17,8 +17,8 @@ pre[class*="language-"] {
   color: #1f2328;
   background: none;
   text-shadow: none;
-  font-family: "SF Mono", "SFMono-Regular", "Consolas", "Liberation Mono",
-    Menlo, Courier, monospace;
+  font-family: var(--ll-font-code, "SF Mono", "SFMono-Regular", "Consolas",
+    "Liberation Mono", Menlo, Courier, monospace);
   font-size: 12px;
   line-height: 18px;
   text-align: left;
@@ -136,95 +136,93 @@ pre[class*="language-"] {
 
 /* ======================================================================
    Dark mode - GitHub Dark inspired palette.
-   Uses @variant dark so it follows whatever strategy is configured
-   in @custom-variant dark (globals.css).
+   Plain CSS (not processed by Tailwind), uses .dark ancestor selector
+   matching @custom-variant dark in globals.css.
    ====================================================================== */
 
-@variant dark {
-  code[class*="language-"],
-  pre[class*="language-"] {
-    color: #e6edf3;
-  }
-
-  .token.keyword,
-  .token.module,
-  .token.imports,
-  .token.control-flow {
-    color: #ff7b72;
-  }
-
-  .token.string,
-  .token.template-string,
-  .token.attr-value {
-    color: #a5d6ff;
-  }
-
-  .token.function,
-  .token.class-name {
-    color: #d2a8ff;
-  }
-
-  .token.property,
-  .token.parameter {
-    color: #ffa657;
-  }
-
-  .token.tag .token.tag {
-    color: #7ee787;
-  }
-
-  .token.tag .token.class-name {
-    color: #7ee787;
-  }
-
-  .token.tag .token.attr-name,
-  .token.attr-name {
-    color: #79c0ff;
-  }
-
-  .token.number {
-    color: #79c0ff;
-  }
-
-  .token.operator {
-    color: #ff7b72;
-  }
-
-  .token.punctuation {
-    color: #e6edf3;
-  }
-
-  .token.boolean,
-  .token.constant,
-  .token.builtin {
-    color: #79c0ff;
-  }
-
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: #8b949e;
-    font-style: italic;
-  }
-
-  .token.tag .token.punctuation {
-    color: #e6edf3;
-  }
-
-  .token.spread {
-    color: #ff7b72;
-  }
-
-  .token.plain-text {
-    color: #e6edf3;
-  }
-
-  .token.regex {
-    color: #a5d6ff;
-  }
-
-  .language-bash .token.function {
-    color: #79c0ff;
-  }
+.dark code[class*="language-"],
+.dark pre[class*="language-"] {
+  color: #e6edf3;
+}
+
+.dark .token.keyword,
+.dark .token.module,
+.dark .token.imports,
+.dark .token.control-flow {
+  color: #ff7b72;
+}
+
+.dark .token.string,
+.dark .token.template-string,
+.dark .token.attr-value {
+  color: #a5d6ff;
+}
+
+.dark .token.function,
+.dark .token.class-name {
+  color: #d2a8ff;
+}
+
+.dark .token.property,
+.dark .token.parameter {
+  color: #ffa657;
+}
+
+.dark .token.tag .token.tag {
+  color: #7ee787;
+}
+
+.dark .token.tag .token.class-name {
+  color: #7ee787;
+}
+
+.dark .token.tag .token.attr-name,
+.dark .token.attr-name {
+  color: #79c0ff;
+}
+
+.dark .token.number {
+  color: #79c0ff;
+}
+
+.dark .token.operator {
+  color: #ff7b72;
+}
+
+.dark .token.punctuation {
+  color: #e6edf3;
+}
+
+.dark .token.boolean,
+.dark .token.constant,
+.dark .token.builtin {
+  color: #79c0ff;
+}
+
+.dark .token.comment,
+.dark .token.prolog,
+.dark .token.doctype,
+.dark .token.cdata {
+  color: #8b949e;
+  font-style: italic;
+}
+
+.dark .token.tag .token.punctuation {
+  color: #e6edf3;
+}
+
+.dark .token.spread {
+  color: #ff7b72;
+}
+
+.dark .token.plain-text {
+  color: #e6edf3;
+}
+
+.dark .token.regex {
+  color: #a5d6ff;
+}
+
+.dark .language-bash .token.function {
+  color: #79c0ff;
 }
diff --git a/website/src/styles/liveline.css b/website/src/styles/liveline.css
index 2ece015..5f5a17a 100644
--- a/website/src/styles/liveline.css
+++ b/website/src/styles/liveline.css
@@ -14,6 +14,20 @@
  * - Small font sizes (14px body) for editorial/compact aesthetic
  */
 
+/* ========================================================================
+   JetBrainsMono Nerd Font Mono — patched with box-drawing glyphs that
+   tile perfectly (no gaps). Only load regular 400 to keep payload small.
+   Source: github.com/ryanoasis/nerd-fonts
+   ======================================================================== */
+
+@font-face {
+  font-family: "JetBrainsMono NF Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://raw.githubusercontent.com/ryanoasis/nerd-fonts/refs/tags/v3.3.0/patched-fonts/JetBrainsMono/Ligatures/Regular/JetBrainsMonoNerdFontMono-Regular.ttf") format("truetype");
+}
+
 /* ========================================================================
    Design tokens
    ======================================================================== */
@@ -22,8 +36,8 @@
   --ll-font-primary: "Inter var", "Inter", system-ui, -apple-system,
     BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --ll-font-secondary: "Newsreader", Georgia, "Times New Roman", serif;
-  --ll-font-code: "SF Mono", "SFMono-Regular", "Consolas", "Liberation Mono",
-    Menlo, Courier, monospace;
+  --ll-font-code: "JetBrainsMono NF Mono", "JetBrains Mono", "SF Mono",
+    "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, Courier, monospace;
 
   /* Bleed: code blocks & images extend beyond prose column.
      36px = 8px div padding-left + 28px line-number span (border-box includes its 20px paddingRight) */