diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk
index e7192a0..17cfcfd 100644
--- a/docs/_includes/default.njk
+++ b/docs/_includes/default.njk
@@ -95,16 +95,17 @@
     </aside>
 
     {# Menu overlay #}
-    <a class="menu-overlay" href="#"></a>
+    <a class="menu-overlay" href="#close"></a>
 
     {# Page content #}
     <main>
       <article id="content">
         <div>
-          {% block content %}
-            {{ content | safe }}
-          {% endblock %}
+          {{ content | safe }}
         </div>
+        {% if not notoc %}
+          {{ content | toc | safe }}
+        {% endif %}
       </article>
 
       <footer>
diff --git a/docs/assets/scripts/docs.js b/docs/assets/scripts/docs.js
index eb6a4ce..2ea5b9a 100644
--- a/docs/assets/scripts/docs.js
+++ b/docs/assets/scripts/docs.js
@@ -73,7 +73,7 @@ const invalidInput = document.querySelector('#invalid-input');
 invalidInput?.setCustomValidity("Invalid field.");
 
 // Component: Toast
-const toast = document.querySelector('#toast');
+const toast = document.querySelector('#toast-demo');
 const toggleToast = () => toast.classList.toggle('active');
 const toastPositions = ['br', 'tr', 'tl', 'bl'];
 const positionToast = (pos) => {
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 2758961..247cfb8 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -1,5 +1,6 @@
 html {
   scrollbar-width: thin;
+  scroll-behavior: smooth;
 }
 
 /* Page layout with collapsible sidebar menu (CSS only) */
@@ -214,15 +215,52 @@ body {
     } 
   }
 
-  &>main {
-    padding: 4rem 1rem 1rem 1rem;
+  & > main {
+    padding: 5rem 1rem 1rem 1rem;
     max-width: 1260px;
     width: 100%;
     box-sizing: border-box;
     transition: var(--transition-spacing);
 
     #content {
-      transition: opacity .15s ease;;
+      position: relative;
+      
+      .toc {
+        display: none;
+        font-size: .875rem;
+        position: absolute;
+        top: 5rem;
+        right: -16rem;
+        width: 14rem;
+        height: 100%;
+        
+        & > ul {
+          position: sticky;
+          top: 5rem;
+          border-left: 1px solid var(--color-border);
+          list-style-type: none;
+          padding: .5rem 0 .5rem 1rem;
+          
+          ul {
+            list-style-type: none;
+            padding: 0;
+
+            li {
+              padding: .125rem 0;
+
+              a {
+                &:not(:hover) {
+                  color: var(--color-text-muted);
+                }
+                
+                &:hover {
+                  text-decoration-style: dashed;
+                }
+              }
+            }
+          }
+        }
+      }
     }
 
     footer {
@@ -230,7 +268,7 @@ body {
     }
   }
 
-  &>.menu-overlay {
+  & > .menu-overlay {
     position: fixed;
     background: #00000077;
     border: none;
@@ -244,17 +282,18 @@ body {
   }
 }
 
+/* Responsiveness */
 @media (min-width: 1024px) {
   body {
-    &>.menu-trigger {
+    & > .menu-trigger {
       display: none;
     }
 
-    &>aside {
+    & > aside {
       transform: none;
     }
 
-    &>header {
+    & > header {
       background-color: transparent;
       backdrop-filter: initial;
 
@@ -265,16 +304,21 @@ body {
       }
     }
 
-    &>main {
+    & > main {
       padding-top: 2rem;
       padding-left: 18rem;
     }
 
-    &>.menu-overlay {
+    & > .menu-overlay {
       display: none;
     }
   }
 }
+@media (min-width: 1500px) {
+  body > main #content .toc {
+    display: block;
+  }
+}
 
 /* Code examples */
 .demo {
diff --git a/docs/pages/components/badge.md b/docs/pages/components/badge.md
index d825ad7..06088b5 100644
--- a/docs/pages/components/badge.md
+++ b/docs/pages/components/badge.md
@@ -26,7 +26,9 @@ Use the `badge` class to add a small bubble indicator at the top right corner of
 <span class="badge" data-badge="new">CSS4 now available!</span>
 ```
 
-> Note that the badge element itself is by design not part of the text flow to keep spacing between elements consistent. Therefore long badge contents should be avoided or only used where appropriate.
+<p class="callout accent">
+  Note that the badge element itself is by design not part of the text flow to keep spacing between elements consistent. Therefore long badge contents should be avoided or only used where appropriate.
+</p>
 
 ### Badge variants
 
diff --git a/docs/pages/components/separator.md b/docs/pages/components/separator.md
index b5f5a35..0866052 100644
--- a/docs/pages/components/separator.md
+++ b/docs/pages/components/separator.md
@@ -34,7 +34,9 @@ Use the `separator` class to add a horizontal line. Every content added to that
 
 Use the `separator` and the `vertical` class to add a vertical line. Every content added to that element appears as its label. No content will result in a single vertical line.
 
-> Note that vertical separators only work in a flex container with flex direction row. If you're using utility classes, you can just give it the `flex` class or set `display: flex;` on it.
+<p class="callout accent">
+  Note that vertical separators only work in a flex container with flex direction row. If you're using utility classes, you can just give it the <code>flex</code> class or set <code>display: flex;</code> on it.
+</p>
 
 <div class="demo">
   <div class="max-w-screen-md flex">
diff --git a/docs/pages/components/toast.md b/docs/pages/components/toast.md
index 67c5f81..e596abe 100644
--- a/docs/pages/components/toast.md
+++ b/docs/pages/components/toast.md
@@ -8,7 +8,9 @@ tags: callout position variants neutral accent success alert
 
 A toast notificataion is a dynamic message component, that is only visible after a certain action. For this use case, the <a href="/components/callout">Callout</a> component is used and extended to show up on a fixed position.
 
-> Sloth.css is a CSS only library and does not ship any JavaScript. To handle appearance, and manual or autmatic closing of toast messages, you'll need to implement that with JavaScript.
+<p class="callout accent">
+  Sloth.css is a CSS only library and does not ship any JavaScript. To handle appearance, and manual or autmatic closing of toast messages, you'll need to implement that with JavaScript.
+</p>
 
 ### Basic toast
 
@@ -19,7 +21,7 @@ Use the `toast callout` classes to create a toast notification. The toast elemen
   <div class="flex gap-2">
     <button onclick="toggleToast()">Toggle</button>
   </div>
-  <div class="toast callout active" id="toast">
+  <div class="toast callout active" id="toast-demo">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
 </div>
diff --git a/docs/pages/getting-started/changelog.md b/docs/pages/getting-started/changelog.md
index 7e88c4d..e74a8b6 100644
--- a/docs/pages/getting-started/changelog.md
+++ b/docs/pages/getting-started/changelog.md
@@ -8,6 +8,26 @@ tags: release version changes
 
 Sloth.css uses [semantic versioning](https://semver.org/) to indicate breaking changes, major changes with downward compatibility or minor changes.
 
-### 0.1.0
+### 0.2.0-beta
+
+- 📜 Add documentation ([#1](https://github.com/devmount/sloth.css/pull/1), [#32](https://github.com/devmount/sloth.css/pull/32), [#38](https://github.com/devmount/sloth.css/pull/38))
+- 🚀 Build tool ([#2](https://github.com/devmount/sloth.css/pull/2), [#15](https://github.com/devmount/sloth.css/pull/15))
+- 📜 Code of conduct ([#7](https://github.com/devmount/sloth.css/pull/7))
+- 📜 Organize repository ([#8](https://github.com/devmount/sloth.css/pull/8), [#9](https://github.com/devmount/sloth.css/pull/9), [#10](https://github.com/devmount/sloth.css/pull/10), [#13](https://github.com/devmount/sloth.css/pull/13))
+- 📜 Contribution guidelines ([#11](https://github.com/devmount/sloth.css/pull/11))
+- 🔨 Fix deprecated overlow class ([#14](https://github.com/devmount/sloth.css/pull/14))
+- ➕ Component: Badge ([#16](https://github.com/devmount/sloth.css/pull/16))
+- ➕ Component: Separator ([#18](https://github.com/devmount/sloth.css/pull/18))
+- ➕ Component: Callout ([#25](https://github.com/devmount/sloth.css/pull/25))
+- ➕ Component: Breadcrumb ([#26](https://github.com/devmount/sloth.css/pull/26))
+- ➕ Component: State ([#27](https://github.com/devmount/sloth.css/pull/27))
+- ➕ Component: Toast ([#28](https://github.com/devmount/sloth.css/pull/28))
+- 💚 Color improvements ([#29](https://github.com/devmount/sloth.css/pull/29))
+- ➕ Component: Button ([#30](https://github.com/devmount/sloth.css/pull/30), [#34](https://github.com/devmount/sloth.css/pull/34))
+- ➕ Component: Loader ([#31](https://github.com/devmount/sloth.css/pull/31))
+- ⚡️ Performance optimizations ([#33](https://github.com/devmount/sloth.css/pull/33))
+- ➕ Input invalid state ([#39](https://github.com/devmount/sloth.css/pull/39))
+
+### 0.1.0-beta
 
 - 🚀 Initial release
diff --git a/docs/pages/getting-started/contributing.md b/docs/pages/getting-started/contributing.md
index f5940d4..2a4d3e0 100644
--- a/docs/pages/getting-started/contributing.md
+++ b/docs/pages/getting-started/contributing.md
@@ -31,7 +31,7 @@ Enhancement suggestions are also tracked as [GitHub issues]({{ repoUrl }}/issues
 - [CSS component request]({{ repoUrl }}/issues/new?assignees=&labels=enhancement%2Ccomponent&projects=&template=css_component_request.md&title=New+CSS+component%3A+)
 - [Utility class request]({{ repoUrl }}/issues/new?assignees=&labels=enhancement%2Cutility&projects=&template=utility_class_request.md&title=New+utility+class%3A+)
 
-### Provide code changes via pull requests
+### Code changes via pull requests
 
 Complete the required template. Please do not include issue numbers in the PR title, but mention it in the PR body.
 
@@ -52,7 +52,7 @@ Complete the required template. Please do not include issue numbers in the PR ti
   - 👕 `:shirt:` when refactoring or removing linter warnings
   - ❌ `:x:` when removing code or files
 
-## Beta-Testing
+### Beta-Testing
 
 Testing the current state and reporting bugs is a great way to help! Here's how:
 
diff --git a/docs/pages/getting-started/usage.md b/docs/pages/getting-started/usage.md
index 4bcf605..b073bda 100644
--- a/docs/pages/getting-started/usage.md
+++ b/docs/pages/getting-started/usage.md
@@ -58,7 +58,7 @@ Here is an example of the badge component with a pulse variation:
 <span class="badge pulse" data-badge="99+">Inbox</span>
 ```
 
-## Customizing
+### Customizing
 
 Sloth.css uses CSS custom properties for core styles. You can customize and override them by using a `:root` selector, e.g.:
 
diff --git a/docs/pages/index.md b/docs/pages/index.md
index 311d4c3..940380f 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -1,6 +1,7 @@
 ---
 title: 'Sloth.css: A drop-in utility component CSS library for lazy mammals.'
 description: Hand-crafted core styles, utility classes and components for dropping in
+notoc: true
 ---
 
 <header role="banner" class="text-center">
@@ -49,7 +50,9 @@ If you want to create quick mockups without leaving your markup, you can use Slo
 
 If you need more advanced elements on your page, you can use Sloth.css with prestyled components included. Badges, Cards, Modals, Tooltips and more - take a look at the complete list in the docs.
 
-> This is work-in-progress. There will be more components soon<sup><small>TM</small></sup>
+<p class="callout accent">
+  This is still work-in-progress. There will be more components coming soon<sup><small>TM</small></sup>
+</p>
 
 ## License
 
diff --git a/docs/pages/utilities/color.md b/docs/pages/utilities/color.md
index 93c977e..a836dda 100644
--- a/docs/pages/utilities/color.md
+++ b/docs/pages/utilities/color.md
@@ -30,7 +30,9 @@ Text is colored according to the color scheme per default. Use the `text-inverte
 <p class="text-inverted">Inverted color</p>
 ```
 
-> Note that you can use `text-light` and `text-dark` to keep the text color despite the color scheme. But please only use this with sufficient contrast to the background.
+<p class="callout accent">
+  Note that you can use <code>text-light</code> and <code>text-dark</code> to keep the text color despite the color scheme. But please only use this with sufficient contrast to the background.
+</p>
 
 Colors can be overwritten by the corresponding custom property:
 
diff --git a/docs/pages/utilities/cursor.md b/docs/pages/utilities/cursor.md
index 1c742ff..7af2716 100644
--- a/docs/pages/utilities/cursor.md
+++ b/docs/pages/utilities/cursor.md
@@ -2,6 +2,7 @@
 title: 'Utilities: Cursor - Sloth.css'
 description: Controlling cursor types
 tags: default pointer help not-allowed
+notoc: true
 ---
 
 ## Cursor
diff --git a/docs/pages/utilities/display.md b/docs/pages/utilities/display.md
index 3958b50..0b0d059 100644
--- a/docs/pages/utilities/display.md
+++ b/docs/pages/utilities/display.md
@@ -57,7 +57,9 @@ Elements can also be position underneath each other (column direction) instead o
 }
 ```
 
-> Note that `flex-col` is a display utility and already includes the `display: flex;` rule. So there's no need to use two classes like in Tailwind <del>`flex flex-column`</del>. Just use <ins>`flex-col`</ins>.
+<p class="callout accent">
+  Note that <code>flex-col</code> is a display utility and already includes the <code>display: flex;</code> rule. So there's no need to use two classes like in Tailwind <del><code>flex flex-column</code></del>. Just use <ins><code>flex-col</code></ins>.
+</p>
 
 User the `flex-wrap` class, if you want your flex items to break onto a new line when the container limit is reached.
 
diff --git a/docs/pages/utilities/positioning.md b/docs/pages/utilities/positioning.md
index 8caff6e..9b68bac 100644
--- a/docs/pages/utilities/positioning.md
+++ b/docs/pages/utilities/positioning.md
@@ -59,7 +59,9 @@ The following 4 values of positions are supported.
 .sticky   { position: sticky;   }
 ```
 
-> Note that `sticky` always needs a value for the [top property](https://developer.mozilla.org/en-US/docs/Web/CSS/top), hence `top-0` or `top-4` need to be set too.
+<p class="callout accent">
+  Note that <code>sticky</code> always needs a value for the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/top" target="_blank">top property</a>, hence <code>top-0</code> or <code>top-4</code> need to be set too.
+</p>
 
 ### Alignment
 
@@ -175,7 +177,9 @@ For centering content horizontally and vertically, the special utility class `fl
 }
 ```
 
-> Note that `flex-center` is a display utility and already includes the `display: flex;` rule. So there's no need to use three classes like in Tailwind <del>`flex justify-center items-center`</del>. Just use <ins>`flex-center`</ins>.
+<p class="callout accent">
+  Note that <code>flex-center</code> is a display utility and already includes the <code>display: flex;</code> rule. So there's no need to use three classes like in Tailwind <del><code>flex justify-center items-center</code></del>. Just use <ins><code>flex-center</code></ins>.
+</p>
 
 ### Overflow
 
diff --git a/eleventy.config.js b/eleventy.config.js
index dce35c5..f3f3214 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,8 +1,12 @@
-const fs = require('fs');
-const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+import fs from 'fs';
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+import markdownit from "markdown-it";
+import anchor from "markdown-it-anchor";
+import tocPlugin from "eleventy-plugin-toc";
+
 const VERSION = '0.2.0';
 
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
   // Get utility sections
   // Those can be retrieved from the single _utilities.css file.
   // Every section is a single line CSS comment
@@ -20,6 +24,11 @@ module.exports = function(eleventyConfig) {
 
   // Init plugins
   eleventyConfig.addPlugin(syntaxHighlight);
+  eleventyConfig.setLibrary("md", markdownit().set({ html: true }).use(anchor));
+  eleventyConfig.addPlugin(tocPlugin, {
+    tags: ["h2", "h3"],
+    ul: true,
+  });
 
   // Build search index
   const index = [];
@@ -57,7 +66,6 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addGlobalData('creatorUrl', 'https://devmount.com');
   eleventyConfig.addGlobalData('donationUrl', 'https://paypal.me/devmount');
   eleventyConfig.addGlobalData('layout', 'default');
-  eleventyConfig.addGlobalData('toc', true);
   eleventyConfig.addGlobalData('meta', {
     title: 'Sloth.css',
     version: VERSION,
diff --git a/package-lock.json b/package-lock.json
index a61d36f..6c077f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,20 +1,27 @@
 {
-  "name": "sloth.css",
-  "version": "0.1.0",
+  "name": "@devmount/sloth.css",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "sloth.css",
-      "version": "0.1.0",
+      "name": "@devmount/sloth.css",
+      "version": "0.2.0",
       "license": "MIT",
       "devDependencies": {
         "@11ty/eleventy": "^3.0.0",
         "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "cssnano": "^7.0.6",
+        "eleventy-plugin-toc": "^1.1.5",
+        "markdown-it": "^14.1.0",
+        "markdown-it-anchor": "^9.2.0",
         "postcss": "^8.4.47",
         "postcss-cli": "^11.0.0",
         "postcss-import": "^16.1.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/devmount"
       }
     },
     "node_modules/@11ty/dependency-tree": {
@@ -373,6 +380,34 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@@ -690,6 +725,162 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cheerio": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz",
+      "integrity": "sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "encoding-sniffer": "^0.2.0",
+        "htmlparser2": "^9.1.0",
+        "parse5": "^7.1.2",
+        "parse5-htmlparser2-tree-adapter": "^7.0.0",
+        "parse5-parser-stream": "^7.1.2",
+        "undici": "^6.19.5",
+        "whatwg-mimetype": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18.17"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/htmlparser2": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "entities": "^4.5.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -1286,6 +1477,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/eleventy-plugin-toc": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-toc/-/eleventy-plugin-toc-1.1.5.tgz",
+      "integrity": "sha512-Fo5AZZSBH8CKvz0axJQA9nmnTFOflAMFrngaKER4rOz3C6oDwqxK8N+kNFepmIsieTPkrH+iREWLJ+/9j5JjUg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cheerio": "^1.0.0-rc.10"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -1303,6 +1504,20 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/encoding-sniffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.0.tgz",
+      "integrity": "sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "whatwg-encoding": "^3.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -1914,6 +2129,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2246,6 +2474,17 @@
         "markdown-it": "bin/markdown-it.mjs"
       }
     },
+    "node_modules/markdown-it-anchor": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-9.2.0.tgz",
+      "integrity": "sha512-sa2ErMQ6kKOA4l31gLGYliFQrMKkqSO0ZJgGhDHKijPf0pNFM9vghjAh3gn26pS4JDRs7Iwa9S36gxm3vgZTzg==",
+      "dev": true,
+      "license": "Unlicense",
+      "peerDependencies": {
+        "@types/markdown-it": "*",
+        "markdown-it": "*"
+      }
+    },
     "node_modules/maximatch": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
@@ -2532,6 +2771,62 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/parse5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz",
+      "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
+      "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -3488,6 +3783,13 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -3925,6 +4227,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/undici": {
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.20.1.tgz",
+      "integrity": "sha512-AjQF1QsmqfJys+LXfGTNum+qw4S88CojRInG/6t31W/1fk6G59s92bnAvGz5Cmur+kQv2SURXEvvudLmbrE8QA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
     "node_modules/unicorn-magic": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz",
@@ -4003,6 +4315,29 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 4b012c9..bae6c80 100644
--- a/package.json
+++ b/package.json
@@ -46,8 +46,12 @@
     "@11ty/eleventy": "^3.0.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "cssnano": "^7.0.6",
+    "eleventy-plugin-toc": "^1.1.5",
+    "markdown-it": "^14.1.0",
+    "markdown-it-anchor": "^9.2.0",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0"
-  }
+  },
+  "type": "module"
 }
diff --git a/src/core/_text.css b/src/core/_text.css
index b8dff22..a41f724 100644
--- a/src/core/_text.css
+++ b/src/core/_text.css
@@ -43,7 +43,7 @@ a {
   &:hover, &:focus, &:focus-within {
     color: var(--color-link-hover);
     text-decoration: underline;
-    text-underline-offset: 10%;
+    text-underline-offset: .125rem;
   }
   &:focus, &:focus-within {
     outline: 4px solid var(--color-outline);