diff --git a/apps/www/src/app/docs/[[...slug]]/page.module.css b/apps/www/src/app/docs/[[...slug]]/page.module.css
index 3a724d3dd..91e429e40 100644
--- a/apps/www/src/app/docs/[[...slug]]/page.module.css
+++ b/apps/www/src/app/docs/[[...slug]]/page.module.css
@@ -38,3 +38,26 @@
   letter-spacing: var(--docs-lede-tracking);
   max-width: 42rem;
 }
+
+/*
+  The rail sits beside the article and stays put while it scrolls. Its width
+  matches the sidebar's, so the article sits in the middle of equal gutters,
+  and it is fixed so the text keeps the same measure on every page regardless
+  of how many headings that page has.
+*/
+.toc {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  height: calc(100vh - 50px);
+  position: sticky;
+  top: 50px;
+  /*
+    The rail's inner edge, matching the one on the sidebar. It starts below the
+    navbar rather than at the top of the screen, because above that line the
+    navbar is one strip running the width of the article — there is nothing
+    there for the rule to divide.
+  */
+  border-left: 0.5px solid var(--rs-color-border-base-primary);
+}
diff --git a/apps/www/src/app/docs/[[...slug]]/page.tsx b/apps/www/src/app/docs/[[...slug]]/page.tsx
index 0b70d3356..b49a82823 100644
--- a/apps/www/src/app/docs/[[...slug]]/page.tsx
+++ b/apps/www/src/app/docs/[[...slug]]/page.tsx
@@ -64,28 +64,8 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
               <DocsFooter url={page.url} />
             </Flex>
           </Flex>
-          <aside
-            style={{
-              width: '300px',
-              height: 'calc(100vh - 50px)',
-              position: 'sticky',
-              top: '50px',
-              padding: '40px 0',
-              paddingRight: 'var(--rs-space-7)',
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              alignItems: 'center'
-            }}
-          >
-            <div
-              style={{
-                width: '100%',
-                height: '70vh'
-              }}
-            >
-              <TableOfContents headings={page.data.toc} />
-            </div>
+          <aside className={styles.toc}>
+            <TableOfContents headings={page.data.toc} />
           </aside>
         </Flex>
       </Flex>
diff --git a/apps/www/src/app/docs/layout.module.css b/apps/www/src/app/docs/layout.module.css
index 946033346..79679513f 100644
--- a/apps/www/src/app/docs/layout.module.css
+++ b/apps/www/src/app/docs/layout.module.css
@@ -1,8 +1,61 @@
+/*
+  The ground the shell sits on. It only shows past the shell's outer rules on a
+  display wide enough for the cap to bite, where it separates the page from the
+  space around it. Scoped to the docs rather than set on body, which the
+  marketing pages share.
+*/
+.surround {
+  flex: 1;
+  background: var(--rs-color-background-base-secondary);
+}
+
+/*
+  The shell fills the window up to `--docs-shell-max`, then centers itself.
+  Without the cap the sidebar and the table of contents stay pinned to the
+  screen edges on a wide display, leaving the text column marooned between two
+  large empty gaps.
+
+  `width` is set explicitly because body is a flex container: a bare
+  `margin-inline: auto` would disable the default stretch and leave the shell
+  shrink-to-fitting, which caps the width by accident rather than by intent.
+*/
 .container {
+  --docs-shell-max: 1440px;
+
+  background: var(--rs-color-background-base-primary);
+
   display: flex;
   flex-direction: row;
   position: relative;
+  width: 100%;
+  max-width: var(--docs-shell-max);
+  margin-inline: auto;
+  /*
+    The outer edges of the shell, matching the rule between the sidebar and the
+    article. They run the height of the page, so the layout reads as a panel
+    rather than as content that ran out of room. Drawn here rather than on the
+    sidebar and the contents rail so both sides cannot drift apart.
+  */
+  border-inline: 0.5px solid var(--rs-color-border-base-primary);
+}
+
+/*
+  The bar across the top of the page is drawn once, here, rather than as a
+  border on the navbar and the sidebar header. Those two sit inside the centered
+  shell, so their borders stop at its edges; this one is fixed to the viewport
+  and runs the full width behind them.
+*/
+.container::before {
+  content: "";
+  position: fixed;
+  top: 50px;
+  left: 0;
+  right: 0;
+  border-top: 0.5px solid var(--rs-color-border-base-primary);
+  z-index: var(--rs-z-index-portal);
+  pointer-events: none;
 }
+
 .sidebar {
   height: 100vh;
   position: sticky;
diff --git a/apps/www/src/app/docs/layout.tsx b/apps/www/src/app/docs/layout.tsx
index 7c447f5a4..73c6bdbe0 100644
--- a/apps/www/src/app/docs/layout.tsx
+++ b/apps/www/src/app/docs/layout.tsx
@@ -6,9 +6,11 @@ import styles from './layout.module.css';
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <Flex className={styles.container}>
-      <DocsSidebar pageTree={docs.pageTree} className={styles.sidebar} />
-      <main className={styles.content}>{children}</main>
-    </Flex>
+    <div className={styles.surround}>
+      <Flex className={styles.container}>
+        <DocsSidebar pageTree={docs.pageTree} className={styles.sidebar} />
+        <main className={styles.content}>{children}</main>
+      </Flex>
+    </div>
   );
 }
diff --git a/apps/www/src/components/docs/navbar.module.css b/apps/www/src/components/docs/navbar.module.css
index 3cae32775..110cdd28e 100644
--- a/apps/www/src/components/docs/navbar.module.css
+++ b/apps/www/src/components/docs/navbar.module.css
@@ -3,22 +3,14 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--rs-space-4) var(--rs-space-7);
-  backdrop-filter: blur(1px);
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
   position: sticky;
   top: 0;
-  backdrop-filter: blur(1px);
-  border-bottom: 0.5px solid var(--rs-color-border-base-primary, #e8e8e8);
-  position: relative;
   width: 100%;
-  box-sizing: border-box;
-  position: sticky;
-  top: 0;
-  z-index: var(--rs-z-index-portal);
   height: 50px;
+  box-sizing: border-box;
+  backdrop-filter: blur(1px);
   background: #fcfcfce6;
+  z-index: var(--rs-z-index-portal);
 }
 
 [data-theme="dark"] .navbar {
diff --git a/apps/www/src/components/docs/sidebar.module.css b/apps/www/src/components/docs/sidebar.module.css
index 77aecc645..8a966901a 100644
--- a/apps/www/src/components/docs/sidebar.module.css
+++ b/apps/www/src/components/docs/sidebar.module.css
@@ -5,7 +5,6 @@
 .header {
   height: 50px;
   padding: 0 var(--rs-space-5);
-  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
   border-radius: 0;
   margin-bottom: 0;
 }
diff --git a/apps/www/src/components/mdx/mdx-components.module.css b/apps/www/src/components/mdx/mdx-components.module.css
index b3978e824..53e894c75 100644
--- a/apps/www/src/components/mdx/mdx-components.module.css
+++ b/apps/www/src/components/mdx/mdx-components.module.css
@@ -30,6 +30,8 @@
   color: var(--rs-color-foreground-base-primary);
   font-family: var(--rs-font-body);
   text-wrap: balance;
+  /* Clears the 50px sticky navbar when a heading is jumped to by anchor. */
+  scroll-margin-top: var(--rs-space-13);
 }
 
 .prose-h1 {
diff --git a/apps/www/src/components/toc/toc.module.css b/apps/www/src/components/toc/toc.module.css
index 121682675..cfcf85554 100644
--- a/apps/www/src/components/toc/toc.module.css
+++ b/apps/www/src/components/toc/toc.module.css
@@ -1,146 +1,70 @@
-.container {
-  position: relative;
-  z-index: 10;
-  height: 100%;
-}
-
-.inner {
-  position: absolute;
-  inset: 0;
-}
-
-.tickContainer {
-  position: absolute;
-  right: 0;
-  display: grid;
-  width: 6rem;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.tickLine {
-  height: 1px;
-  width: 0.5rem;
-  transition: all 100ms;
-}
-
-.tickLineBefore {
-  background-color: var(--rs-color-background-neutral-tertiary);
-}
-
-.tickLineAfter {
-  background-color: var(--rs-color-background-neutral-tertiary);
-}
-
-.tickContainer:hover .tickLine {
-  width: 1rem;
-}
-
-.tickClickable {
-  position: absolute;
-  inset-inline: 0;
-  height: 0.5rem;
-  cursor: pointer;
+/*
+  A flat list of the page's headings, indented by heading level. Sizes come from
+  the docs typeset: the eyebrow uses the label layer (mono, uppercase, tracked
+  out) and the links use the caption size, so the rail reads as chrome rather
+  than competing with the prose beside it.
+*/
+.rail {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+  padding-block: var(--rs-space-9);
+  padding-left: var(--rs-space-7);
+  padding-right: var(--rs-space-5);
+  overscroll-behavior: contain;
+  scrollbar-width: none;
 }
 
-.headingContainer {
-  transition: transform 150ms;
+.rail::-webkit-scrollbar {
+  display: none;
 }
 
-.headingContainer:hover {
-  transform: translateX(-0.125rem);
+.eyebrow {
+  padding-bottom: var(--rs-space-3);
+  color: var(--rs-color-foreground-base-tertiary);
+  font-family: var(--rs-font-mono);
+  font-size: var(--docs-label-size);
+  line-height: var(--docs-label-leading);
+  letter-spacing: var(--docs-label-tracking);
+  font-weight: var(--docs-label-weight);
+  text-transform: uppercase;
 }
 
-.headingLabel {
-  position: absolute;
+.list {
   display: flex;
-  height: 0.75rem;
-  align-items: center;
-  font-family: var(--rs-font-mono);
-  font-size: var(--rs-font-size-mono-small);
-  line-height: var(--rs-line-height-mono-small);
-  color: var(--rs-color-foreground-base-primary);
-  text-transform: capitalize;
-  opacity: 0;
-  transition: opacity 300ms;
-}
-.headingLink {
-  color: var(--rs-color-foreground-base-primary);
-  text-align: right;
-  font-family: var(--rs-font-body);
-  font-size: var(--rs-font-size-mini);
-  font-style: normal;
-  font-weight: var(--rs-font-weight-regular);
-  line-height: var(--rs-line-height-mini);
-  letter-spacing: var(--rs-letter-spacing-mini);
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.link {
+  display: block;
+  padding-block: var(--rs-space-2);
+  color: var(--rs-color-foreground-base-secondary);
+  font-size: var(--docs-caption-size);
+  line-height: var(--docs-caption-leading);
+  letter-spacing: var(--docs-caption-tracking);
   text-decoration: none;
+  text-wrap: pretty;
 }
 
-.container:hover .headingLabel {
-  opacity: 1;
+/* Entries sit under their section, sub-entries under those. */
+.link[data-depth="3"] {
+  padding-left: var(--rs-space-4);
 }
 
-@media (max-width: 640px) {
-  .headingLabel {
-    opacity: 1;
-  }
+.link[data-depth="4"] {
+  padding-left: var(--rs-space-7);
 }
 
-.headingLink {
-  cursor: pointer;
-}
-
-.headingLink:hover {
-  color: var(--rs-color-cobalt-600, #0066cc);
-}
-
-.connectingLine {
-  position: absolute;
-  right: 0;
-  height: 1px;
-  background-color: var(--rs-color-background-neutral-emphasis);
-}
-
-.scrollMarkerContainer {
-  position: absolute;
-  right: 0;
-  z-index: 20;
-  transition: opacity 300ms;
-  pointer-events: none;
-}
-
-.scrollMarkerContainerReady {
-  opacity: 1;
-}
-
-.scrollMarkerContainerNotReady {
-  opacity: 0;
-}
-
-.scrollMarkerLine {
-  height: 1px;
-  width: 1rem;
-  background-color: var(--rs-color-cobalt-600, #0066cc);
-}
-
-.scrollMarkerText {
-  position: absolute;
-  top: 0;
-  left: -2.5rem;
-  transform: translateY(-50%);
-  font-family: var(--rs-font-mono);
-  font-size: var(--rs-font-size-mono-small);
-  line-height: var(--rs-line-height-mono-small);
-  color: var(--rs-color-cobalt-600, #0066cc);
-  transition: opacity 300ms;
-}
-
-.container:hover .scrollMarkerText {
-  opacity: 0;
+.link:hover {
+  color: var(--rs-color-foreground-base-primary);
 }
 
-@media (max-width: 640px) {
-  .scrollMarkerText {
-    opacity: 0;
-  }
+.linkActive {
+  color: var(--rs-color-foreground-base-primary);
 }
diff --git a/apps/www/src/components/toc/toc.tsx b/apps/www/src/components/toc/toc.tsx
index 283dbdc59..37a35806f 100644
--- a/apps/www/src/components/toc/toc.tsx
+++ b/apps/www/src/components/toc/toc.tsx
@@ -1,370 +1,113 @@
 'use client';
+
 import { cx } from 'class-variance-authority';
 import { TOCItemType } from 'fumadocs-core/toc';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styles from './toc.module.css';
 
-interface Heading {
-  title: React.ReactNode;
-  level: number;
-  id: string;
-  url: string;
-  yPosition: number;
-}
-
-const ARTICLE_SELECTOR = '[data-article-content]';
-const TICK_HEIGHT = 20;
-const NAV_HEIGHT = 60;
-
-/**
- * Calculate the number of ticks and max position that fit within container height.
- * This ensures all positions stay confined within the tick range.
- */
-function calculateTickBounds(containerHeight: number) {
-  // Number of ticks that fit (including tick at position 0)
-  const numTicks = Math.floor(containerHeight / TICK_HEIGHT) + 1;
-  // Maximum valid position (last tick position)
-  const maxPosition = (numTicks - 1) * TICK_HEIGHT;
-  return { numTicks, maxPosition };
-}
-
-/**
- * Snap a value to the nearest tick position, clamped within valid range.
- */
-function snapToTick(value: number, maxPosition: number): number {
-  const snapped = Math.round(value / TICK_HEIGHT) * TICK_HEIGHT;
-  return Math.max(0, Math.min(snapped, maxPosition));
-}
-
-/**
- * Measure the article and container, and derive the tick bounds from the
- * container's live height. Shared by the position and scroll callbacks so the
- * DOM reads and tick-bounds math live in one place. Returns null if either
- * element is missing.
- */
-function measureLayout(container: HTMLElement | null) {
-  const article = document.querySelector(ARTICLE_SELECTOR);
-  if (!article || !container) return null;
-
-  const articleBox = article.getBoundingClientRect();
-  const containerBox = container.getBoundingClientRect();
-  const { maxPosition } = calculateTickBounds(containerBox.height);
-
-  return { container, articleBox, containerBox, maxPosition };
-}
-
-/**
- * Resolve overlapping heading positions by ensuring each heading
- * is at least one tick apart from the previous one.
- * Uses a two-pass algorithm:
- * 1. Push down any overlapping headings
- * 2. If any exceed maxPosition, push back from the end
- */
-function resolveOverlaps(headings: Heading[], maxPosition: number): Heading[] {
-  if (headings.length <= 1) return headings;
-
-  // First pass: push down to create gaps
-  const resolved: Heading[] = [];
-  let lastUsedPos = -TICK_HEIGHT;
+// The navbar is 50px and sticky, so a heading scrolled to the very top would
+// sit under it. Everything above this line in the viewport counts as covered.
+const NAV_OFFSET = 64;
 
-  for (const heading of headings) {
-    let newPos = heading.yPosition;
-
-    // If this position would overlap with the last used, bump it down
-    if (newPos <= lastUsedPos) {
-      newPos = lastUsedPos + TICK_HEIGHT;
-    }
-
-    resolved.push({ ...heading, yPosition: newPos });
-    lastUsedPos = newPos;
-  }
-
-  // Second pass: if any exceed maxPosition, push back from the end
-  for (let i = resolved.length - 1; i >= 0; i--) {
-    const maxAllowed =
-      i === resolved.length - 1
-        ? maxPosition
-        : resolved[i + 1].yPosition - TICK_HEIGHT;
-
-    if (resolved[i].yPosition > maxAllowed) {
-      resolved[i] = { ...resolved[i], yPosition: Math.max(0, maxAllowed) };
-    }
-  }
-
-  return resolved;
+function idOf(url: string) {
+  return url.startsWith('#') ? url.slice(1) : url;
 }
 
 /**
- * A lightweight Table of Contents (ToC) sidebar.
- * Automatically detects h2–h4 headings inside an element marked with [data-article-content].
- * Displays a scroll-progress bar with clickable section anchors.
+ * The list of headings on the current page, with the one being read marked.
+ *
+ * Active heading is resolved from scroll position rather than an
+ * IntersectionObserver: the reader is "at" the last heading that has passed
+ * under the navbar, which is a question about where the page is scrolled to,
+ * not about which headings happen to be on screen. An observer answers the
+ * second question and leaves nothing marked whenever a section is taller than
+ * the viewport.
  */
 export default function TableOfContents({
-  headings: tocHeadings
+  headings
 }: {
   headings: TOCItemType[];
 }) {
-  const [headings, setHeadings] = useState<Heading[]>([]);
-  const [containerHeight, setContainerHeight] = useState<number>(0);
-  const [ready, setReady] = useState<boolean>(false);
-  const [isScrollable, setIsScrollable] = useState<boolean>(true);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const scrollMarkerRef = useRef<HTMLDivElement>(null);
-  const scrollPosRef = useRef<number>(0);
-
-  // Derive tick bounds from container height
-  const { numTicks, maxPosition } = useMemo(
-    () => calculateTickBounds(containerHeight),
-    [containerHeight]
-  );
+  const [activeId, setActiveId] = useState<string | null>(null);
 
-  /** Recalculate heading positions within the article */
-  const recalcHeadings = useCallback(() => {
-    const layout = measureLayout(containerRef.current);
-    if (!layout || !tocHeadings.length) return;
-
-    const { articleBox, containerBox, maxPosition: maxPos } = layout;
-    const articleTop = articleBox.top + window.scrollY;
-
-    // Check if content is scrollable (article height > viewport height)
-    const hasScroll = articleBox.height > window.innerHeight;
-    setIsScrollable(hasScroll);
-
-    // Store container height - tick bounds are derived via useMemo
-    setContainerHeight(containerBox.height);
-
-    const items = tocHeadings
-      .map(tocItem => {
-        // Extract id from url (url is like "#heading-id" or "heading-id")
-        const id = tocItem.url.startsWith('#')
-          ? tocItem.url.slice(1)
-          : tocItem.url;
-        const node = document.getElementById(id);
-        if (!node) return null;
-
-        const { top } = node.getBoundingClientRect();
-        // Calculate heading's position within the article
-        const headingPosInArticle = top + window.scrollY - articleTop;
-        // Map heading position [0, articleHeight] to tick range [0, maxPos]
-        // Using articleHeight ensures headings are distributed across ALL ticks
-        const progress = headingPosInArticle / articleBox.height;
-        const rawY = progress * maxPos;
-        const yPos = snapToTick(rawY, maxPos);
-
-        return {
-          title: tocItem.title,
-          level: tocItem.depth,
-          id: id,
-          url: tocItem.url,
-          yPosition: yPos
-        };
-      })
-      .filter((item): item is Heading => item !== null);
-
-    // Resolve any overlapping positions so headings don't stack on same tick
-    const resolvedItems = resolveOverlaps(items, maxPos);
-
-    setHeadings(resolvedItems);
-  }, [tocHeadings]);
-
-  /** Update scroll marker position via direct DOM manipulation (no state update) */
-  const handleScroll = useCallback(() => {
-    const layout = measureLayout(containerRef.current);
-    const scrollMarker = scrollMarkerRef.current;
-    if (!layout || !scrollMarker) return;
-
-    const { container, articleBox, maxPosition: maxPos } = layout;
-    const { top, height } = articleBox;
-    const viewportHeight = window.innerHeight;
-
-    let newScrollPos: number;
-    if (top > 0) {
-      newScrollPos = 0;
-    } else {
-      const scrolled = Math.abs(top);
-      const scrollRange = height - viewportHeight;
-      // Map scroll progress [0, 1] to tick range [0, maxPos]
-      const progress =
-        scrollRange > 0 ? Math.min(1, scrolled / scrollRange) : 0;
-      const rawPos = progress * maxPos;
-      newScrollPos = snapToTick(rawPos, maxPos);
-    }
+  useEffect(() => {
+    if (!headings.length) return;
+
+    const update = () => {
+      const positions = headings
+        .map(heading => {
+          const node = document.getElementById(idOf(heading.url));
+          if (!node) return null;
+          return {
+            id: idOf(heading.url),
+            top: node.getBoundingClientRect().top
+          };
+        })
+        .filter(
+          (entry): entry is { id: string; top: number } => entry !== null
+        );
 
-    const prevScrollPos = scrollPosRef.current;
+      if (!positions.length) return;
 
-    // Only update DOM if position changed
-    if (newScrollPos !== prevScrollPos) {
-      scrollPosRef.current = newScrollPos;
+      // The bottom of the page can't scroll far enough to bring the last
+      // headings under the navbar, so once there they take the mark.
+      const atBottom =
+        window.innerHeight + window.scrollY >= document.body.scrollHeight - 2;
 
-      // Update scroll marker position and text directly
-      scrollMarker.style.top = `${newScrollPos}px`;
-      const textEl = scrollMarker.querySelector('[data-scroll-text]');
-      if (textEl) {
-        textEl.textContent = (maxPos > 0 ? newScrollPos / maxPos : 0).toFixed(
-          2
-        );
+      if (atBottom) {
+        setActiveId(positions[positions.length - 1].id);
+        return;
       }
 
-      // Update tick line classes based on new scroll position
-      const tickLines = container.querySelectorAll('[data-tick-line]');
-      tickLines.forEach(tick => {
-        const tickPos = Number(tick.getAttribute('data-tick-pos'));
-        if (tickPos < newScrollPos) {
-          tick.classList.remove(styles.tickLineAfter);
-          tick.classList.add(styles.tickLineBefore);
-        } else {
-          tick.classList.remove(styles.tickLineBefore);
-          tick.classList.add(styles.tickLineAfter);
-        }
-      });
-    }
-  }, []);
+      const passed = positions.filter(entry => entry.top <= NAV_OFFSET);
+      setActiveId(
+        passed.length ? passed[passed.length - 1].id : positions[0].id
+      );
+    };
 
-  /** Setup listeners */
-  useEffect(() => {
-    const init = setTimeout(() => {
-      recalcHeadings();
-      handleScroll();
-      setReady(true);
-    }, 250);
+    update();
 
-    window.addEventListener('resize', recalcHeadings);
-    window.addEventListener('scroll', handleScroll, { passive: true });
+    // Landing on a #hash scrolls the page after this effect has run, and the
+    // jump does not always announce itself as a scroll, so re-read once the
+    // browser has settled.
+    const settle = window.setTimeout(update, 200);
 
+    window.addEventListener('scroll', update, { passive: true });
+    window.addEventListener('resize', update);
+    window.addEventListener('hashchange', update);
     return () => {
-      clearTimeout(init);
-      window.removeEventListener('resize', recalcHeadings);
-      window.removeEventListener('scroll', handleScroll);
+      window.clearTimeout(settle);
+      window.removeEventListener('scroll', update);
+      window.removeEventListener('resize', update);
+      window.removeEventListener('hashchange', update);
     };
-  }, [recalcHeadings, handleScroll]);
-
-  /** Scroll to a position based on tick Y coordinate (for tick clicks) */
-  const scrollToTick = (y: number): void => {
-    const article = document.querySelector(ARTICLE_SELECTOR);
-    if (!article || maxPosition === 0) return;
-
-    const articleBox = article.getBoundingClientRect();
-    const articleTop = articleBox.top + window.scrollY;
-
-    // Map tick position to article position using the SAME mapping as headings:
-    //   Headings: tickPos = (headingPosInArticle / articleHeight) * maxPosition
-    //   Reverse:  articlePos = (tickPos / maxPosition) * articleHeight
-    // This ensures clicking a tick near a heading scrolls to show that heading
-    const progress = y / maxPosition;
-    const articlePos = progress * articleBox.height;
-    const targetScroll = articleTop + articlePos - NAV_HEIGHT;
-
-    window.scrollTo({
-      top: Math.max(0, targetScroll),
-      behavior: 'smooth'
-    });
-  };
-
-  /** Scroll directly to a heading element by ID (for heading clicks) */
-  const scrollToHeading = (id: string): void => {
-    const element = document.getElementById(id);
-    if (!element) return;
+  }, [headings]);
 
-    const elementTop = element.getBoundingClientRect().top + window.scrollY;
-
-    window.scrollTo({
-      top: Math.max(0, elementTop - NAV_HEIGHT),
-      behavior: 'smooth'
-    });
-  };
-
-  /** Generate tick positions */
-  const ticks = useMemo(
-    () => Array.from({ length: numTicks }, (_, i) => i * TICK_HEIGHT),
-    [numTicks]
-  );
-
-  // Don't render TOC if content is not scrollable
-  if (!isScrollable || ticks.length < 2) {
-    return <div ref={containerRef} className={styles.container} />;
-  }
+  if (!headings.length) return null;
 
   return (
-    <div ref={containerRef} className={styles.container} id='toc-container'>
-      <div className={styles.inner}>
-        {/* Tick marks */}
-        {ticks.map((y, i) => (
-          <div
-            key={`tick-${i}`}
-            style={{ top: `${y}px` }}
-            className={styles.tickContainer}
-          >
-            <div
-              data-tick-line
-              data-tick-pos={y}
-              className={cx(styles.tickLine, styles.tickLineAfter)}
-            />
-            <div
-              className={styles.tickClickable}
-              onClick={() => scrollToTick(y)}
-            />
-          </div>
-        ))}
-
-        {/* Heading labels - positioned at snapped tick positions */}
-        {headings.map((h, i) => (
-          <div key={h.id || i} className={styles.headingContainer}>
-            <div
-              className={styles.headingLabel}
-              style={{
-                // Center label vertically on tick (label height ~12px, so offset by half)
-                top: `${h.yPosition - 6}px`,
-                right: '24px',
-                zIndex: 10 * (h.level < 4 ? 1 : 0),
-                transitionDelay: `${50 * i}ms`
-              }}
-            >
+    <nav className={styles.rail} aria-label='On this page'>
+      <span className={styles.eyebrow}>On this page</span>
+      <ul className={styles.list}>
+        {headings.map(heading => {
+          const id = idOf(heading.url);
+          return (
+            <li key={id}>
               <a
-                href={h.url}
-                className={styles.headingLink}
-                onClick={e => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  scrollToHeading(h.id);
-                }}
+                href={heading.url}
+                data-depth={heading.depth}
+                className={cx(
+                  styles.link,
+                  activeId === id && styles.linkActive
+                )}
+                aria-current={activeId === id ? 'location' : undefined}
               >
-                {h.title}
+                {heading.title}
               </a>
-            </div>
-          </div>
-        ))}
-
-        {/* Connecting lines - positioned exactly at tick positions */}
-        {headings.map((h, i) => (
-          <div
-            key={`line-${i}`}
-            className={styles.connectingLine}
-            style={{
-              // Line sits exactly on the tick
-              top: `${h.yPosition}px`,
-              // Width based on heading level (h2 longest, h4 shortest)
-              width: `${(3 - h.level) * 4 + 12}px`
-            }}
-          />
-        ))}
-
-        {/* Scroll marker - position updated via direct DOM manipulation */}
-        <div
-          ref={scrollMarkerRef}
-          className={cx(
-            styles.scrollMarkerContainer,
-            ready
-              ? styles.scrollMarkerContainerReady
-              : styles.scrollMarkerContainerNotReady
-          )}
-          style={{ top: '0px' }}
-        >
-          <div className={styles.scrollMarkerLine} />
-          <span data-scroll-text className={styles.scrollMarkerText}>
-            0.00
-          </span>
-        </div>
-      </div>
-    </div>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
   );
 }