diff --git a/.gitea/workflows/html-docs.yml b/.gitea/workflows/html-docs.yml
index fac9cd5..0d64fbd 100644
--- a/.gitea/workflows/html-docs.yml
+++ b/.gitea/workflows/html-docs.yml
@@ -25,7 +25,8 @@ jobs:
 
       - name: Generate chunked HTML docs
         run: |
-          pandoc -f gfm -t chunkedhtml --split-level=1 --toc -V toc=true \
+          pandoc -f gfm -t chunkedhtml --split-level=1 \
+                 --include-in-header docs/html-style.html \
                  docs/fish-config.md \
                  -o docs/html/
 
diff --git a/docs/fish-config.md b/docs/fish-config.md
index 1170a03..439cf3e 100644
--- a/docs/fish-config.md
+++ b/docs/fish-config.md
@@ -1268,3 +1268,4 @@ a completely separate command. Do not mix them up.
     help config fish-deps
 
 The keyword is matched case-insensitively against section headings.
+
diff --git a/docs/html-style.html b/docs/html-style.html
new file mode 100644
index 0000000..a4cbda4
--- /dev/null
+++ b/docs/html-style.html
@@ -0,0 +1,154 @@
+<style>
+/* Catppuccin Latte (light) / Mocha (dark) — auto via prefers-color-scheme */
+:root {
+  --bg:       #eff1f5;
+  --surface:  #e6e9ef;
+  --overlay:  #ccd0da;
+  --text:     #4c4f69;
+  --subtext:  #6c6f85;
+  --blue:     #1e66f5;
+  --lavender: #7287fd;
+  --green:    #40a02b;
+  --red:      #d20f39;
+  --yellow:   #df8e1d;
+  --peach:    #fe640b;
+  --code-bg:  #dce0e8;
+  --border:   #bcc0cc;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg:       #1e1e2e;
+    --surface:  #313244;
+    --overlay:  #45475a;
+    --text:     #cdd6f4;
+    --subtext:  #a6adc8;
+    --blue:     #89b4fa;
+    --lavender: #b4befe;
+    --green:    #a6e3a1;
+    --red:      #f38ba8;
+    --yellow:   #f9e2af;
+    --peach:    #fab387;
+    --code-bg:  #181825;
+    --border:   #45475a;
+  }
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+body {
+  background-color: var(--bg);
+  color: var(--text);
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-size: 16px;
+  line-height: 1.7;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 1.5rem 2rem 4rem;
+}
+
+a            { color: var(--blue); text-decoration: none; }
+a:hover      { color: var(--lavender); text-decoration: underline; }
+a:visited    { color: var(--lavender); }
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--lavender);
+  margin-top: 1.8em;
+  margin-bottom: 0.4em;
+  line-height: 1.3;
+}
+h1 { font-size: 2em;   border-bottom: 2px solid var(--border); padding-bottom: 0.3em; }
+h2 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; }
+h3 { font-size: 1.2em; }
+
+p  { margin: 0.75em 0; }
+
+code {
+  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
+  background: var(--code-bg);
+  color: var(--peach);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  font-size: 0.875em;
+}
+
+pre {
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 1em 1.25em;
+  overflow-x: auto;
+  line-height: 1.5;
+}
+pre code {
+  background: none;
+  color: var(--text);
+  padding: 0;
+  font-size: 0.9em;
+}
+
+blockquote {
+  border-left: 3px solid var(--blue);
+  margin: 1.2em 0;
+  padding: 0.6em 1.2em;
+  background: var(--surface);
+  color: var(--subtext);
+  border-radius: 0 6px 6px 0;
+}
+blockquote p { margin: 0; }
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1.2em 0;
+  font-size: 0.95em;
+}
+th, td {
+  border: 1px solid var(--border);
+  padding: 0.5em 0.85em;
+  text-align: left;
+}
+th { background: var(--surface); color: var(--lavender); font-weight: 600; }
+tr:nth-child(even) { background: var(--surface); }
+tr:hover           { background: var(--overlay); }
+
+hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
+
+ul, ol { padding-left: 1.5em; }
+li { margin: 0.3em 0; }
+
+/* ── Chunk navigation (prev / up / next) ──────────────────────── */
+nav {
+  display: flex;
+  align-items: center;
+  gap: 0.75em;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.6em 1em;
+  margin: 1.5em 0;
+  font-size: 0.9em;
+  flex-wrap: wrap;
+}
+nav a {
+  color: var(--blue);
+  white-space: nowrap;
+}
+nav a:hover { color: var(--lavender); }
+
+/* ── Table of contents (index page) ──────────────────────────── */
+nav#toc, nav[role="doc-toc"] {
+  display: block;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 1em 1.5em;
+}
+nav#toc ul, nav[role="doc-toc"] ul {
+  padding-left: 1.2em;
+  margin: 0.4em 0;
+}
+nav#toc li, nav[role="doc-toc"] li {
+  margin: 0.2em 0;
+}
+</style>