diff --git a/.config/dotnet-tools.json b/.config/dotnet-tools.json
index 10dd1fa134..c2c0482149 100644
--- a/.config/dotnet-tools.json
+++ b/.config/dotnet-tools.json
@@ -10,14 +10,14 @@
       "rollForward": false
     },
     "fantomas": {
-      "version": "8.0.0-beta-001",
+      "version": "8.0.0-beta-003",
       "commands": [
         "fantomas"
       ],
       "rollForward": false
     },
     "fsdocs-tool": {
-      "version": "23.0.0-alpha.1",
+      "version": "23.0.0-alpha.4",
       "commands": [
         "fsdocs"
       ],
@@ -38,4 +38,4 @@
       "rollForward": false
     }
   }
-}
+}
\ No newline at end of file
diff --git a/docs/_body.html b/docs/_body.html
index 8793272d6c..7f888857dd 100644
--- a/docs/_body.html
+++ b/docs/_body.html
@@ -3,7 +3,23 @@
     menuHeaders.forEach(nv => {
         nv.addEventListener("click", () => {
             nv.classList.toggle("active");
-        })
+        });
+        // A link in a folded section can still receive the focus, from Tab or from the j / k
+        // hotkeys of fsdocs. Unfold the section so the reader sees where the focus went.
+        const items = nv.nextElementSibling;
+        items?.addEventListener("focusin", ev => {
+            if (nv.classList.contains("active")) return;
+            nv.classList.add("active");
+            // The section grows over its transition, and a scroll made while it was still folded
+            // could not reach a link below the folded height. Scroll again once it is fully open.
+            const link = ev.target;
+            const unfolded = e => {
+                if (e.target !== items) return;
+                items.removeEventListener("transitionend", unfolded);
+                link.scrollIntoView({ block: "nearest" });
+            };
+            items.addEventListener("transitionend", unfolded);
+        });
     })
 </script>
 <script type="module">
diff --git a/docs/_menu_template.html b/docs/_menu_template.html
index 9fdd67ff53..d8e5bae10b 100644
--- a/docs/_menu_template.html
+++ b/docs/_menu_template.html
@@ -1,6 +1,6 @@
 <li class="nav-header {{fsdocs-menu-header-active-class}}" id="{{fsdocs-menu-header-id}}">
     {{fsdocs-menu-header-content}}
-    <iconify-icon icon="fluent:chevron-up-24-regular" width="32" height="32" rotate="180deg"></iconify-icon>
+    <iconify-icon icon="fluent:chevron-up-24-regular" rotate="180deg"></iconify-icon>
 </li>
 <div class="menu-items">
     {{fsdocs-menu-items}}
diff --git a/docs/content/docs-setup.js b/docs/content/docs-setup.js
deleted file mode 100644
index 32c7e1c208..0000000000
--- a/docs/content/docs-setup.js
+++ /dev/null
@@ -1,31 +0,0 @@
-addEventListener('load', (event) => {
-
-    // Activate icon recommendation tooltips
-    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
-
-    // get body element
-    const body = document.getElementsByTagName('body')[0];
-    
-    document
-        .querySelectorAll("#toggle-mobile-menu, #close-mobile-menu")
-        .forEach(element => {
-            element.addEventListener("click", () => {
-                body.classList.toggle("open-menu");
-            });
-        })
-
-    // Opening/collapsing menu items of sidebar depending on the current page section
-    const activeMenuSection = location.pathname.startsWith("/reference") ? document.querySelector("#api_reference-wrapper") : document.querySelector(".accordion-item.active");
-    
-    if (activeMenuSection) {
-        const accordion = activeMenuSection.querySelector(".accordion-collapse");
-        if (accordion) {
-            accordion.classList.add('show');
-        }
-        const button = activeMenuSection.querySelector("button");
-        if (button) {
-            button.classList.remove('collapsed');
-        }
-    }
-});
diff --git a/docs/content/fsdocs-theme.css b/docs/content/fsdocs-theme.css
index 863c4b570c..15758e2e12 100644
--- a/docs/content/fsdocs-theme.css
+++ b/docs/content/fsdocs-theme.css
@@ -20,6 +20,7 @@
   --aside-background: light-dark(var(--primary), var(--fantomas-700));
   --menu-color: var(--white);
   --link-hover: #2fbadc;
+  --main-menu-width: 288px;
   --page-menu-width: 400px;
   --configuration-icon-size: 24px;
   --mobile-menu-background: light-dark(var(--fantomas-400), var(--fantomas-700));
@@ -41,72 +42,149 @@ h6 {
 }
 
 #fsdocs-main-menu {
-  padding: 0;
+  padding: var(--spacing-100) 0 var(--spacing-500);
+  /* The hotkeys outline their target in the primary colour, which is the colour of this panel. */
+  --hotkey-focus-color: var(--white);
+  --hotkey-focus-offset: -2px;
 }
 
 #fsdocs-main-menu,
 header {
   .menu {
+    /* Lets height animate between 0 and auto when a section folds; other browsers snap. */
+    interpolate-size: allow-keywords;
+    --menu-inset: var(--spacing-200);
+    --menu-text: rgba(255, 255, 255, 0.88);
+    --menu-hover: rgba(255, 255, 255, 0.1);
+    --menu-highlight: rgba(255, 255, 255, 0.18);
+    --menu-rail: rgba(255, 255, 255, 0.28);
+
     .nav-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      cursor: pointer;
+      gap: var(--spacing-100);
+      margin: var(--spacing-400) var(--menu-inset) var(--spacing-50);
       padding: var(--spacing-50) var(--spacing-100);
-      margin-top: var(--spacing-400);
+      font-size: var(--font-100);
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--menu-text);
+      border-radius: var(--radius);
+      user-select: none;
+      transition:
+        background-color 150ms,
+        color 150ms;
+
+      &:first-child {
+        margin-top: var(--spacing-100);
+      }
 
       & iconify-icon {
-        margin-right: var(--spacing-50);
+        /* Sized here rather than in the template: the icon takes 1em when it has no attributes. */
+        font-size: var(--font-300);
+        margin: 0;
+        opacity: 0.7;
+        transition:
+          transform 200ms ease,
+          opacity 150ms;
+      }
+
+      /* Only the section headers fold; the Links header has no id and no chevron. */
+      &[id] {
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--menu-hover);
+          color: var(--white);
+
+          & iconify-icon {
+            opacity: 1;
+          }
+        }
       }
 
       &.active {
-        background-color: var(--fantomas-700);
-        transition: all 200ms;
+        color: var(--white);
 
         & iconify-icon {
           transform: rotate(-180deg);
+          opacity: 1;
         }
       }
     }
 
+    /* A folded section keeps its links focusable (no visibility: hidden), so Tab and the j / k
+       hotkeys of fsdocs can reach them; _body.html unfolds the section when one gets the focus. */
     .nav-header + .menu-items {
-      visibility: hidden;
       height: 0;
-      overflow-y: hidden;
+      overflow: hidden;
       opacity: 0;
-      transition: all 200ms;
-      padding-left: var(--spacing-50);
-    }
-
-    .nav-header.active {
-      background-color: var(--fantomas-700);
+      margin: 0 var(--menu-inset) 0 calc(var(--menu-inset) + var(--spacing-100));
+      padding-left: var(--spacing-100);
+      border-left: 1px solid var(--menu-rail);
+      transition:
+        height 200ms ease,
+        opacity 200ms ease;
     }
 
     .nav-header.active + .menu-items {
-      visibility: visible;
-      height: initial;
+      height: auto;
       opacity: 1;
-      overflow-y: initial;
+    }
+
+    /* The Links items sit directly in the menu, outside any section. */
+    > .nav-item {
+      margin: 0 var(--menu-inset);
     }
 
     .nav-item {
+      position: relative;
       border: none;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
 
       .nav-link {
+        display: block;
+        margin: 1px 0;
+        padding: var(--spacing-100) var(--spacing-200);
+        font-size: var(--font-200);
         font-weight: 400;
+        line-height: 1.4;
+        color: var(--menu-text);
+        border-radius: var(--radius);
+        transition:
+          background-color 150ms,
+          color 150ms;
+
         &:hover {
-          background-color: var(--fantomas-300);
+          background-color: var(--menu-hover);
+          color: var(--white);
         }
 
-        &:focus {
-          background-color: var(--fantomas-600);
+        &:focus-visible {
+          outline: 2px solid var(--white);
+          outline-offset: -2px;
         }
       }
 
       &.active {
-        border-left: var(--spacing-100) solid var(--fantomas-300);
-        background-color: var(--fantomas-600);
+        .nav-link {
+          background-color: var(--menu-highlight);
+          color: var(--white);
+          font-weight: 500;
+        }
+
+        /* Marks the current page on the section rail. */
+        &::before {
+          content: "";
+          position: absolute;
+          left: calc(-1 * var(--spacing-100) - 1px);
+          top: var(--spacing-100);
+          bottom: var(--spacing-100);
+          width: 2px;
+          border-radius: 2px;
+          background-color: var(--white);
+        }
       }
     }
   }