logiguard fork v3: full patch set on verified 8c74db0 tree

Includes prior-session patches (carry forward so the app compiles):
  - crates/gpui/build.rs: cross-compile manifest fix
  - crates/gpui/src/platform.rs: PlatformWindow::activate_with_token trait method
  - crates/gpui/src/window.rs: Window::activate_with_token public API
  - crates/gpui_linux/src/linux/wayland/window.rs: WaylandWindow::activate_with_token + activate() keyboard-serial fix

Plus the focus-serial fix:
  - serial.rs: SerialKind::KeyboardEnter
  - client.rs: store wl_keyboard.enter serial; latest_serial_of()

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

docs/theme/analytics.js

@@ -0,0 +1,93 @@
+const amplitudeKey = document.querySelector(
+  'meta[name="amplitude-key"]',
+)?.content;
+const consentInstance = document.querySelector(
+  'meta[name="consent-io-instance"]',
+)?.content;
+
+document.addEventListener("DOMContentLoaded", () => {
+  if (!consentInstance || consentInstance.length === 0) return;
+  const { getOrCreateConsentRuntime } = window.c15t;
+
+  const { consentStore } = getOrCreateConsentRuntime({
+    mode: "c15t",
+    backendURL: consentInstance,
+    consentCategories: ["necessary", "measurement", "marketing"],
+    storageConfig: {
+      crossSubdomain: true,
+    },
+    scripts: [
+      {
+        id: "amplitude",
+        src: `https://cdn.amplitude.com/script/${amplitudeKey}.js`,
+        category: "measurement",
+        onLoad: () => {
+          window.amplitude.init(amplitudeKey, {
+            fetchRemoteConfig: true,
+            autocapture: true,
+          });
+        },
+      },
+    ],
+  });
+
+  let previousActiveUI = consentStore.getState().activeUI;
+  const banner = document.getElementById("c15t-banner");
+  const configureSection = document.getElementById("c15t-configure-section");
+  const configureBtn = document.getElementById("c15t-configure-btn");
+  const measurementToggle = document.getElementById("c15t-toggle-measurement");
+  const marketingToggle = document.getElementById("c15t-toggle-marketing");
+
+  const toggleConfigureMode = () => {
+    const currentConsents = consentStore.getState().consents;
+    measurementToggle.checked = currentConsents
+      ? (currentConsents.measurement ?? false)
+      : false;
+    marketingToggle.checked = currentConsents
+      ? (currentConsents.marketing ?? false)
+      : false;
+    configureSection.style.display = "flex";
+    configureBtn.innerHTML = "Save";
+    configureBtn.className = "c15t-button secondary";
+    configureBtn.title = "";
+  };
+
+  consentStore.subscribe((state) => {
+    const hideBanner =
+      state.activeUI === "none" ||
+      (state.activeUI === "banner" && state.model === "opt-out");
+    banner.style.display = hideBanner ? "none" : "block";
+
+    if (state.activeUI === "dialog" && previousActiveUI !== "dialog") {
+      toggleConfigureMode();
+    }
+
+    previousActiveUI = state.activeUI;
+  });
+
+  configureBtn.addEventListener("click", () => {
+    if (consentStore.getState().activeUI === "dialog") {
+      consentStore
+        .getState()
+        .setConsent("measurement", measurementToggle.checked);
+      consentStore.getState().setConsent("marketing", marketingToggle.checked);
+      consentStore.getState().saveConsents("custom");
+    } else {
+      consentStore.getState().setActiveUI("dialog");
+    }
+  });
+
+  document.getElementById("c15t-accept").addEventListener("click", () => {
+    consentStore.getState().saveConsents("all");
+  });
+
+  document.getElementById("c15t-decline").addEventListener("click", () => {
+    consentStore.getState().saveConsents("necessary");
+  });
+
+  document
+    .getElementById("c15t-manage-consent-btn")
+    .addEventListener("click", () => {
+      consentStore.getState().setActiveUI("dialog");
+    });
+});

docs/theme/consent-banner.css

@@ -0,0 +1,292 @@
+#c15t-banner {
+  --color-offgray-50: hsl(218, 12%, 95%);
+  --color-offgray-100: hsl(218, 12%, 88%);
+  --color-offgray-200: hsl(218, 12%, 80%);
+  --color-offgray-300: hsl(218, 12%, 75%);
+  --color-offgray-400: hsl(218, 12%, 64%);
+  --color-offgray-500: hsl(218, 12%, 56%);
+  --color-offgray-600: hsl(218, 12%, 48%);
+  --color-offgray-700: hsl(218, 12%, 40%);
+  --color-offgray-800: hsl(218, 12%, 34%);
+  --color-offgray-900: hsl(218, 12%, 24%);
+  --color-offgray-950: hsl(218, 12%, 15%);
+  --color-offgray-1000: hsl(218, 12%, 5%);
+
+  --color-blue-50: oklch(97% 0.014 254.604);
+  --color-blue-100: oklch(93.2% 0.032 255.585);
+  --color-blue-200: oklch(88.2% 0.059 254.128);
+  --color-blue-300: oklch(80.9% 0.105 251.813);
+  --color-blue-400: oklch(70.7% 0.165 254.624);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-blue-600: oklch(54.6% 0.245 262.881);
+  --color-blue-700: oklch(48.8% 0.243 264.376);
+  --color-blue-800: oklch(42.4% 0.199 265.638);
+  --color-blue-900: oklch(37.9% 0.146 265.522);
+  --color-blue-950: oklch(28.2% 0.091 267.935);
+
+  --color-accent-blue: hsla(218, 93%, 42%, 1);
+
+  position: fixed;
+  z-index: 9999;
+  bottom: 16px;
+  right: 16px;
+  border-radius: 4px;
+  max-width: 300px;
+  background: white;
+  border: 1px solid
+    color-mix(in oklab, var(--color-offgray-200) 50%, transparent);
+  box-shadow: 6px 6px 0
+    color-mix(in oklab, var(--color-accent-blue) 6%, transparent);
+}
+
+.dark #c15t-banner {
+  border-color: color-mix(in oklab, var(--color-offgray-600) 14%, transparent);
+  background: var(--color-offgray-1000);
+  box-shadow: 5px 5px 0
+    color-mix(in oklab, var(--color-accent-blue) 8%, transparent);
+}
+
+#c15t-banner > div:first-child {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+}
+
+#c15t-banner a {
+  color: var(--links);
+  text-decoration: underline;
+  text-decoration-color: var(--link-line-decoration);
+}
+
+#c15t-banner a:hover {
+  text-decoration-color: var(--link-line-decoration-hover);
+}
+
+#c15t-description {
+  font-size: 12px;
+  margin: 0;
+  margin-top: 4px;
+}
+
+#c15t-configure-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-top: 1px solid var(--divider);
+  padding: 12px;
+}
+
+#c15t-configure-section > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+#c15t-configure-section label {
+  text-transform: uppercase;
+  font-size: 11px;
+}
+
+#c15t-footer {
+  padding: 12px;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid var(--divider);
+  background-color: color-mix(
+    in oklab,
+    var(--color-offgray-50) 50%,
+    transparent
+  );
+}
+
+.dark #c15t-footer {
+  background-color: color-mix(
+    in oklab,
+    var(--color-offgray-600) 4%,
+    transparent
+  );
+}
+
+.c15t-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-height: 28px;
+  color: black;
+  padding: 4px 8px;
+  font-size: 14px;
+  border-radius: 4px;
+  background: transparent;
+  border: 1px solid transparent;
+  transition: 100ms;
+  transition-property: box-shadow, border-color, background-color;
+}
+
+.c15t-button:hover {
+  background: color-mix(in oklab, var(--color-offgray-100) 50%, transparent);
+}
+
+.dark .c15t-button {
+  color: var(--color-offgray-50);
+}
+
+.dark .c15t-button:hover {
+  background: color-mix(in oklab, var(--color-offgray-500) 10%, transparent);
+}
+
+.c15t-button.icon {
+  padding: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.c15t-button.primary {
+  color: var(--color-blue-700);
+  background: color-mix(in oklab, var(--color-blue-50) 60%, transparent);
+  border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
+  box-shadow: color-mix(in oklab, var(--color-blue-400) 10%, transparent) 0 -2px
+    0 0 inset;
+}
+
+.c15t-button.primary:hover {
+  background: color-mix(in oklab, var(--color-blue-100) 50%, transparent);
+  box-shadow: none;
+}
+
+.dark .c15t-button.primary {
+  color: var(--color-blue-50);
+  background: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
+  border-color: color-mix(in oklab, var(--color-blue-300) 10%, transparent);
+  box-shadow: color-mix(in oklab, var(--color-blue-300) 8%, transparent) 0 -2px
+    0 0 inset;
+}
+
+.dark .c15t-button.primary:hover {
+  background: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
+  box-shadow: none;
+}
+
+.c15t-button.secondary {
+  background: color-mix(in oklab, var(--color-offgray-50) 60%, transparent);
+  border-color: color-mix(in oklab, var(--color-offgray-200) 50%, transparent);
+  box-shadow: color-mix(in oklab, var(--color-offgray-500) 10%, transparent)
+    0 -2px 0 0 inset;
+}
+
+.c15t-button.secondary:hover {
+  background: color-mix(in oklab, var(--color-offgray-100) 50%, transparent);
+  box-shadow: none;
+}
+
+.dark .c15t-button.secondary {
+  background: color-mix(in oklab, var(--color-offgray-300) 5%, transparent);
+  border-color: color-mix(in oklab, var(--color-offgray-400) 20%, transparent);
+  box-shadow: color-mix(in oklab, var(--color-offgray-300) 8%, transparent)
+    0 -2px 0 0 inset;
+}
+
+.dark .c15t-button.secondary:hover {
+  background: color-mix(in oklab, var(--color-offgray-200) 10%, transparent);
+  box-shadow: none;
+}
+
+.c15t-switch {
+  position: relative;
+  display: inline-block;
+  width: 32px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.c15t-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.c15t-slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background-color: color-mix(
+    in oklab,
+    var(--color-offgray-100) 80%,
+    transparent
+  );
+  border-radius: 20px;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 5%, transparent);
+  transition: background-color 0.2s;
+}
+
+.c15t-slider:hover {
+  background-color: var(--color-offgray-100);
+}
+
+.dark .c15t-slider {
+  background-color: color-mix(in oklab, #fff 5%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 15%, transparent);
+}
+
+.dark .c15t-slider:hover {
+  background-color: color-mix(in oklab, #fff 10%, transparent);
+}
+
+.c15t-slider:before {
+  position: absolute;
+  content: "";
+  height: 14px;
+  width: 14px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  box-shadow:
+    0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px -1px rgb(0 0 0 / 0.1);
+  transition: transform 0.2s;
+}
+
+.c15t-switch input:checked + .c15t-slider {
+  background-color: var(--color-accent-blue);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 5%, transparent);
+}
+
+.c15t-switch input:checked + .c15t-slider:hover {
+  background-color: var(--color-accent-blue);
+}
+
+.dark .c15t-switch input:checked + .c15t-slider {
+  background-color: var(--color-accent-blue);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 15%, transparent);
+}
+
+.c15t-switch input:checked + .c15t-slider:before {
+  transform: translateX(12px);
+}
+
+.c15t-switch input:disabled + .c15t-slider {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
+}
+
+.c15t-switch input:disabled + .c15t-slider:hover {
+  background-color: color-mix(
+    in oklab,
+    var(--color-offgray-100) 80%,
+    transparent
+  );
+}
+
+#c15t-manage-consent-btn {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+#c15t-manage-consent-btn:hover {
+  text-decoration-color: var(--link-line-decoration-hover);
+}

docs/theme/css/chrome.css

@@ -0,0 +1,867 @@
+/* CSS for UI elements (a.k.a. chrome) */
+
+@import "variables.css";
+
+html {
+  background-color: var(--bg);
+  scrollbar-color: var(--scrollbar) var(--bg);
+}
+#searchresults a,
+.content a:link,
+a:visited,
+a > .hljs {
+  color: var(--links);
+}
+
+.icon-logo-img {
+  display: block;
+}
+
+.icon-button {
+  position: relative;
+  height: 28px;
+  width: 28px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: color 0.5s;
+  border: 0;
+  background-color: transparent;
+  border-radius: 4px;
+  color: var(--icons);
+}
+
+.icon-button:hover {
+  color: var(--icons-hover);
+  background-color: var(--icon-btn-bg-hover);
+}
+
+.ib-hidden-desktop {
+  display: none;
+}
+
+.header-bar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  padding: 12px 16px;
+  background-color: var(--sidebar-bg);
+  border-bottom: 1px solid var(--divider);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.header-bar .left-container {
+  width: 160px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-bar .right-container {
+  width: 160px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.logo-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  filter: var(--logo-brightness);
+}
+
+.nav-chapters {
+  font-size: 2.5em;
+  text-align: center;
+  text-decoration: none;
+
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  margin: 0;
+  max-width: 150px;
+  min-width: 90px;
+
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+}
+
+.nav-chapters:hover {
+  text-decoration: none;
+  background-color: var(--theme-hover);
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+
+.nav-wrapper {
+  margin-block-start: 50px;
+  display: none;
+}
+
+.footer-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 24px 0;
+}
+
+.footer-button {
+  width: 100%;
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  background-color: var(--footer-btn-bg);
+  border: 1px solid var(--footer-btn-border);
+  border-radius: 0.5rem;
+  font-size: 0.9em;
+}
+
+.footer-button:hover {
+  background-color: var(--footer-btn-bg-hover);
+  border-color: var(--footer-btn-border-hover);
+}
+
+.footer-button i {
+  text-decoration: underline !important;
+  text-decoration-color: transparent !important;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 24px 0;
+  border-top: 1px dashed var(--border-footer);
+}
+
+.footer-link {
+  font-size: 1.25rem;
+  color: var(--links);
+  text-decoration: underline;
+  text-decoration-color: var(--link-line-decoration);
+  text-wrap-mode: nowrap;
+
+  :hover {
+    text-decoration-color: var(--link-line-decoration-hover);
+  }
+}
+
+.footer-separator {
+  color: var(--border-light);
+  font-size: 0.8em;
+}
+
+.footer-logo {
+  height: 16px;
+  border-radius: 0 !important;
+  border: none !important;
+  background: transparent !important;
+}
+
+.mobile-nav-chapters {
+  font-size: 2.5em;
+  text-align: center;
+  text-decoration: none;
+  width: 90px;
+  border-radius: 5px;
+  background-color: var(--sidebar-bg);
+}
+
+/* Only Firefox supports flow-relative values */
+.previous {
+  float: left;
+}
+[dir="rtl"] .previous {
+  float: right;
+}
+
+/* Only Firefox supports flow-relative values */
+.next {
+  float: right;
+  right: var(--page-padding);
+}
+[dir="rtl"] .next {
+  float: left;
+  right: unset;
+  left: var(--page-padding);
+}
+
+/* Use the correct buttons for RTL layouts*/
+[dir="rtl"] .previous i.fa-angle-left:before {
+  content: "\f105";
+}
+[dir="rtl"] .next i.fa-angle-right:before {
+  content: "\f104";
+}
+
+@media only screen and (max-width: 1080px) {
+  .nav-wide-wrapper {
+    display: none;
+  }
+  .nav-wrapper {
+    display: block;
+  }
+}
+
+/* sidebar-visible */
+@media only screen and (max-width: 1380px) {
+  #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper {
+    display: none;
+  }
+  #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper {
+    display: block;
+  }
+}
+
+/* Inline code */
+
+:not(pre) > .hljs {
+  display: inline;
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}
+
+:not(pre):not(a) > .hljs {
+  color: var(--inline-code-color);
+  overflow-x: initial;
+}
+
+a:hover > .hljs {
+  text-decoration: underline;
+}
+
+pre {
+  background-color: var(--pre-bg);
+  border: 1px solid;
+  border-color: var(--pre-border);
+  box-shadow: var(--pre-shadow) 4px 4px 0px 0px;
+  position: relative;
+}
+pre > .hljs {
+  background-color: initial;
+}
+pre > .buttons {
+  position: absolute;
+  z-index: 100;
+  right: 0px;
+  top: 2px;
+  margin: 0px;
+  padding: 2px 0px;
+
+  color: var(--sidebar-fg);
+  cursor: pointer;
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    visibility 0.1s linear,
+    opacity 0.1s linear;
+}
+pre:hover > .buttons {
+  visibility: visible;
+  opacity: 1;
+}
+pre > .buttons :hover {
+  color: var(--sidebar-active);
+  border-color: var(--border-hover);
+  background-color: var(--theme-hover);
+}
+pre > .buttons i {
+  margin-inline-start: 8px;
+}
+pre > .buttons button {
+  cursor: inherit;
+  margin: 0 4px;
+  height: 26px;
+  width: 26px;
+  font-size: 14px;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 4px;
+  border-color: var(--border);
+  background-color: var(--popover-bg);
+  transition: 100ms;
+  transition-property: color, border-color, background-color;
+  color: var(--icons);
+}
+
+pre > .playground {
+  border: none;
+  margin: 0;
+  box-shadow: none;
+  /* HACK: This serves to visually hide nested <pre> elements in "playground" code snippets.
+  A more robust solution would involve modifying the rendered HTML. */
+}
+
+@media (pointer: coarse) {
+  pre > .buttons button {
+    /* On mobile, make it easier to tap buttons. */
+    padding: 0.3rem 1rem;
+  }
+
+  .sidebar-resize-indicator {
+    /* Hide resize indicator on devices with limited accuracy */
+    display: none;
+  }
+}
+pre > code {
+  display: block;
+  padding: 1rem;
+}
+
+/* TODO: ACE editors overlap their buttons because ACE does absolute
+   positioning within the code block which breaks padding. The only solution I
+   can think of is to move the padding to the outer pre tag (or insert a div
+   wrapper), but that would require fixing a whole bunch of CSS rules.
+*/
+.hljs.ace_editor {
+  padding: 0rem 0rem;
+}
+
+pre > .result {
+  margin-block-start: 10px;
+}
+
+/* Search */
+
+#searchresults a {
+  text-decoration: none;
+}
+
+mark {
+  border-radius: 2px;
+  padding-block-start: 0;
+  padding-block-end: 1px;
+  padding-inline-start: 3px;
+  padding-inline-end: 3px;
+  margin-block-start: 0;
+  margin-block-end: -1px;
+  margin-inline-start: -3px;
+  margin-inline-end: -3px;
+  background-color: var(--search-mark-bg);
+  transition: background-color 300ms linear;
+  cursor: pointer;
+}
+
+mark.fade-out {
+  background-color: rgba(0, 0, 0, 0) !important;
+  cursor: auto;
+}
+
+.searchbar-outer {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  width: 100%;
+  max-width: var(--content-max-width);
+  box-sizing: border-box;
+  padding: 16px;
+}
+
+#searchbar {
+  width: 100%;
+  margin-block-start: 5px;
+  margin-block-end: 0;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  padding: 10px 16px;
+  transition: box-shadow 300ms ease-in-out;
+  border: 1px solid var(--searchbar-border-color);
+  border-radius: 3px;
+  background-color: var(--searchbar-bg);
+  color: var(--searchbar-fg);
+}
+#searchbar:focus,
+#searchbar.active {
+  box-shadow: 0 0 3px var(--searchbar-shadow-color);
+  outline: none;
+  border-color: var(--search-mark-bg);
+}
+
+.searchresults-header {
+  font-weight: bold;
+  font-size: 1em;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  color: var(--searchresults-header-fg);
+}
+
+ul#searchresults {
+  list-style: none;
+  padding-inline-start: 0;
+  margin-block-end: 0;
+}
+ul#searchresults li {
+  margin: 10px 0px;
+  padding: 2px;
+  border-radius: 2px;
+  scroll-margin-block-end: 10px;
+}
+ul#searchresults li.focus {
+  background-color: var(--searchresults-li-bg);
+}
+ul#searchresults span.teaser {
+  display: block;
+  font-size: 0.8em;
+  margin-block-start: 5px;
+  margin-inline-start: 4px;
+  padding-inline-start: 2ch;
+  border-left: 1px solid var(--divider);
+}
+ul#searchresults span.teaser em {
+  font-weight: bold;
+  color: var(--full-contrast);
+  background: var(--code-bg);
+}
+
+/* Sidebar */
+
+.sidebar {
+  position: relative;
+  width: var(--sidebar-width);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.875em;
+  box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: none;
+  overflow: hidden;
+  background-color: var(--sidebar-bg);
+  color: var(--sidebar-fg);
+  border-right: 1px solid var(--divider);
+}
+
+[dir="rtl"] .sidebar {
+  left: unset;
+  right: 0;
+}
+.sidebar-resizing {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.no-js .sidebar,
+.js:not(.sidebar-resizing) .sidebar {
+  transition: transform 0.3s; /* Animation: slide away */
+}
+.sidebar code {
+  line-height: 2em;
+}
+.sidebar .sidebar-scrollbox {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.sidebar .sidebar-resize-handle {
+  position: absolute;
+  cursor: col-resize;
+  width: 0;
+  right: calc(var(--sidebar-resize-indicator-width) * -1);
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+}
+
+.sidebar-resize-handle .sidebar-resize-indicator {
+  width: 100%;
+  height: 12px;
+  background-color: var(--icons);
+  margin-inline-start: var(--sidebar-resize-indicator-space);
+}
+
+[dir="rtl"] .sidebar .sidebar-resize-handle {
+  left: calc(var(--sidebar-resize-indicator-width) * -1);
+  right: unset;
+}
+.js .sidebar .sidebar-resize-handle {
+  cursor: col-resize;
+  width: calc(
+    var(--sidebar-resize-indicator-width) -
+      var(--sidebar-resize-indicator-space)
+  );
+}
+.sidebar::-webkit-scrollbar {
+  background: var(--sidebar-bg);
+}
+.sidebar::-webkit-scrollbar-thumb {
+  background: var(--scrollbar);
+}
+
+@media only screen and (max-width: 780px) {
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    padding-top: 57px; /* Account for header height */
+    transform: translateX(-100%);
+    z-index: 99;
+    transition: transform 0.1s ease;
+  }
+
+  [dir="rtl"] .sidebar {
+    left: unset;
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  body.sidebar-open .sidebar {
+    box-shadow: var(--sidebar-mobile-shadow);
+    transform: translateX(0);
+  }
+}
+
+.chapter {
+  list-style: none outside none;
+  padding: 16px;
+  padding-top: 8px;
+  line-height: 2.2em;
+  margin: 0;
+}
+
+.chapter ol {
+  width: 100%;
+}
+
+.chapter li {
+  display: flex;
+  color: var(--sidebar-non-existant);
+}
+
+.chapter li a {
+  display: block;
+  padding: 0 4px;
+  text-decoration: none;
+  color: var(--sidebar-fg);
+}
+
+.chapter li a:hover {
+  color: var(--sidebar-active);
+}
+
+.chapter li a.active {
+  color: var(--sidebar-active);
+  background-color: var(--sidebar-active-bg);
+}
+
+.chapter li > a.toggle {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-start: auto;
+  user-select: none;
+  opacity: 0.5;
+  border-radius: 4px;
+  transition:
+    opacity 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.chapter li > a.toggle:hover {
+  opacity: 1;
+  background-color: var(--theme-hover);
+}
+
+.chapter li.chapter-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  line-height: 1.5em;
+  margin-block-start: 0.6em;
+}
+
+.section li.chapter-item {
+  margin-block-start: 0;
+}
+
+.chapter li.part-title + li.chapter-item {
+  margin-block-start: 0.2em;
+}
+
+.chapter li.chapter-item > a:first-child {
+  flex: 1;
+  min-width: 0;
+}
+
+.chapter li.expanded > a.toggle div {
+  transform: rotate(90deg);
+}
+
+.chapter li.part-title {
+  font-size: 1.4rem;
+  padding: 0 8px 0 4px;
+  color: var(--title-color);
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: auto;
+  border-radius: 2px;
+}
+
+.chapter li.part-title.collapsible:hover {
+  background-color: var(--hover-section-title);
+}
+
+.chapter li.part-title.collapsible::after {
+  content: "❯";
+  display: inline-block;
+  font-size: 1rem;
+  opacity: 0.6;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.chapter li.part-title.collapsible.expanded::after {
+  transform: rotate(90deg);
+}
+
+.chapter li.section-spacer {
+  height: 1.5rem;
+  list-style: none;
+}
+
+.chapter li.section-hidden {
+  display: none !important;
+}
+
+.section {
+  list-style: none outside none;
+  padding-inline-start: 1.5ch;
+  margin-inline-start: 1ch;
+  margin-top: 6px;
+  border-left: 1px solid var(--border-light);
+  line-height: 1.9em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6em;
+}
+
+.theme-popup {
+  position: absolute;
+  right: 155px;
+  top: calc(var(--menu-bar-height) - 18px);
+  z-index: 1000;
+  border-radius: 4px;
+  font-size: 1.4rem;
+  color: var(--fg);
+  background: var(--popover-bg);
+  border: 1px solid var(--popover-border);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: none;
+  overflow: hidden;
+}
+
+[dir="rtl"] .theme-popup {
+  left: unset;
+  right: 10px;
+}
+.theme-popup .default {
+  color: var(--icons);
+}
+.theme-popup .theme {
+  width: 100%;
+  border: 0;
+  margin: 0;
+  padding: 2px 24px;
+  line-height: 25px;
+  white-space: nowrap;
+  text-align: start;
+  cursor: pointer;
+  color: inherit;
+  background: inherit;
+  font-size: inherit;
+  font-family: inherit;
+}
+.theme-popup .theme:hover {
+  background-color: var(--theme-hover);
+}
+
+.theme-selected::before {
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: center;
+  display: inline-block;
+  content: "✓";
+  margin-inline-start: -20px;
+  width: 20px;
+}
+
+.download-button {
+  max-height: 28px;
+  margin-left: 8px;
+  background: var(--download-btn-bg);
+  color: var(--download-btn-color);
+  padding: 4px 8px;
+  border: 1px solid;
+  border-color: var(--download-btn-border);
+  font-size: 1.4rem;
+  border-radius: 4px;
+  box-shadow: var(--download-btn-shadow) 0px -2px 0px 0px inset;
+  text-decoration: none;
+  transition: 100ms;
+  transition-property: box-shadow, border-color, background-color;
+}
+
+.download-button:hover {
+  background: var(--download-btn-bg);
+  border-color: var(--download-btn-border-hover);
+  box-shadow: none;
+}
+
+.search-button {
+  min-width: 100px;
+  max-width: 300px;
+  height: 28px;
+  width: 100%;
+  padding: 4px 4px 4px 8px;
+  display: flex;
+  gap: 8px;
+  background: var(--search-btn-bg);
+  border: 1px solid;
+  border-color: var(--search-btn-border);
+  font-size: 1.4rem;
+  font-family: var(--font);
+  color: var(--icons);
+  border-radius: 4px;
+  transition: 100ms;
+  transition-property: box-shadow, border-color, background-color;
+}
+
+.search-button:hover {
+  background: var(--search-btn-bg-hover);
+}
+
+.search-button .icon {
+  width: 12px;
+  height: 12px;
+  transform: translateY(10%);
+  scale: 0.9;
+}
+
+.search-content-desktop {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.search-content-mobile {
+  display: none;
+}
+
+.search-container {
+  box-sizing: border-box;
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  padding: 24px;
+  padding-top: 72px;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: none;
+  justify-content: center;
+}
+
+.search-container:has(#search-wrapper:not(.hidden)) {
+  display: flex;
+}
+
+.search-modal {
+  box-sizing: border-box;
+
+  max-width: 600px;
+  min-width: 600px;
+  height: fit-content;
+  max-height: 600px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+
+  border-radius: 8px;
+  background: var(--popover-bg);
+  border: 1px solid var(--popover-border);
+  box-shadow: var(--popover-shadow);
+}
+
+.searchresults-outer {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0px 22px 22px 22px;
+}
+
+#searchbar {
+  margin: 0;
+}
+
+@media only screen and (max-width: 780px) {
+  .header-bar {
+    padding: 16px;
+    justify-content: start;
+  }
+
+  .download-button {
+    display: none;
+  }
+
+  .ib-hidden-mobile {
+    display: none;
+  }
+
+  .header-bar .left-container {
+    width: fit-content;
+  }
+
+  .header-bar .right-container {
+    width: fit-content;
+  }
+
+  .search-button {
+    width: 100px;
+    margin-left: auto;
+    margin-right: 8px;
+  }
+
+  .ib-hidden-desktop {
+    display: block;
+  }
+
+  .search-modal {
+    width: 90vw;
+    min-width: auto;
+  }
+
+  .search-content-desktop {
+    display: none;
+  }
+
+  .search-content-mobile {
+    display: flex;
+  }
+
+  .theme-popup {
+    right: 15px;
+  }
+}

docs/theme/css/general.css

@@ -0,0 +1,473 @@
+/* Base styles and content styles */
+
+@import "variables.css";
+
+:root {
+  /* Browser default font-size is 16px, this way 1 rem = 10px */
+  font-size: 62.5%;
+  color-scheme: var(--color-scheme);
+}
+
+html {
+  font-family: var(--font);
+  color: var(--fg);
+  background-color: var(--bg);
+  text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+
+  text-rendering: geometricPrecision !important;
+  -webkit-font-smoothing: antialiased !important;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.005);
+}
+
+body {
+  margin: 0;
+  font-size: 1.6rem;
+  overflow: hidden;
+  height: 100vh;
+  overscroll-behavior-y: none;
+}
+
+#body-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+code {
+  font-family: var(--mono-font) !important;
+  font-size: var(--code-font-size);
+  direction: ltr !important;
+}
+
+/* make long words/inline code not x overflow */
+main {
+  overflow-wrap: break-word;
+}
+
+.noise-pattern {
+  pointer-events: none;
+  user-select: none;
+  z-index: 105;
+  position: absolute;
+  inset: 0;
+  background-size: 180px;
+  background-repeat: repeat;
+  opacity: var(--noise-opacity);
+}
+
+/* make wide tables scroll if they overflow */
+.table-wrapper {
+  overflow-x: auto;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  position: relative;
+  font-family: var(--title-font);
+  font-weight: 400;
+}
+
+h1 {
+  color: var(--title-color);
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--full-contrast);
+}
+
+/* Don't change font size in headers. */
+h1 code,
+h2 code,
+h3 code,
+h4 code,
+h5 code,
+h6 code {
+  font-size: unset;
+}
+
+.left {
+  float: left;
+}
+.right {
+  float: right;
+}
+.boring {
+  opacity: 0.6;
+}
+.hide-boring .boring {
+  display: none;
+}
+.hidden {
+  display: none !important;
+}
+
+h1 {
+  font-size: 3.4rem;
+}
+
+h2 {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid;
+  border-color: var(--border-light);
+}
+
+h3 {
+  font-size: 2rem;
+  padding-bottom: 0.8rem;
+  border-bottom: 1px dashed;
+  border-color: var(--border-light);
+}
+
+h4 {
+  font-size: 1.8rem;
+}
+
+h5 {
+  font-size: 1.6rem;
+}
+
+h2,
+h3,
+h4,
+h5 {
+  margin-block-start: 1.5em;
+  margin-block-end: 0;
+}
+
+strong {
+  color: var(--full-contrast);
+}
+
+code:focus-visible,
+pre:focus-visible,
+li:focus-visible,
+button:focus-visible,
+a:focus-visible {
+  outline: 3px solid #094ece80;
+}
+
+.header + .header h3,
+.header + .header h4,
+.header + .header h5 {
+  margin-block-start: 1em;
+}
+
+h1:target::before,
+h2:target::before,
+h3:target::before,
+h4:target::before,
+h5:target::before,
+h6:target::before {
+  content: "»";
+  position: absolute;
+  left: -1.5ch;
+}
+
+hr {
+  border: 0px solid;
+  color: transparent;
+  width: 100%;
+  height: 1px;
+  background-color: var(--border-light);
+}
+
+/* This is broken on Safari as of version 14, but is fixed
+   in Safari Technology Preview 117 which I think will be Safari 14.2.
+   https://bugs.webkit.org/show_bug.cgi?id=218076
+*/
+:target {
+  /* Safari does not support logical properties */
+  scroll-margin-top: calc(var(--menu-bar-height) + 2rem);
+}
+
+.page-wrapper {
+  box-sizing: border-box;
+  background-color: var(--bg);
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.page {
+  outline: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-y: none;
+  min-width: 0;
+  position: relative;
+}
+
+.no-js .page-wrapper,
+.js:not(.sidebar-resizing) .page-wrapper {
+  transition:
+    margin-left 0.3s ease,
+    transform 0.3s ease; /* Animation: slide away */
+}
+[dir="rtl"] .js:not(.sidebar-resizing) .page-wrapper {
+  transition:
+    margin-right 0.3s ease,
+    transform 0.3s ease; /* Animation: slide away */
+}
+
+.content {
+  padding: 32px 32px 0 32px;
+  display: flex;
+  justify-content: space-between;
+  gap: 36px;
+}
+
+.content main {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  max-width: var(--content-max-width);
+}
+
+.content p {
+  line-height: 1.625em;
+}
+.content div.video {
+  z-index: 150;
+  margin-top: 1rem;
+  border: 1px solid;
+  border-color: var(--border);
+  border-radius: 8px;
+  overflow: clip;
+}
+.content div.video iframe {
+  margin: 0;
+}
+.content ol {
+  marker: none;
+  line-height: 1.8;
+  padding-left: 2em;
+  ::marker {
+    font-size: 1.4rem;
+  }
+  li {
+    padding-left: 0;
+  }
+}
+.content ul {
+  line-height: 1.8;
+  padding-left: 1.8em;
+}
+.content a {
+  text-decoration: underline;
+  text-decoration-color: var(--link-line-decoration);
+}
+.content a:hover {
+  text-decoration-color: var(--link-line-decoration-hover);
+}
+.content img,
+.content video {
+  position: relative;
+  z-index: 150;
+  max-width: 100%;
+  background-color: var(--media-bg);
+  border: 1px solid;
+  border-color: var(--border);
+  border-radius: 8px;
+  overflow: clip;
+}
+.content h1 .header:link,
+.content h1 .header:visited {
+  color: var(--title-color);
+}
+.content :is(h2, h3, h4, h5, h6) .header:link,
+.content :is(h2, h3, h4, h5, h6) .header:visited {
+  color: var(--full-contrast);
+}
+.content .header:link,
+.content .header:visited:hover {
+  text-decoration: none;
+}
+
+iframe {
+  margin-top: 1rem;
+  margin-bottom: 10rem;
+}
+
+table {
+  margin-top: 1.4rem;
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 1.4rem;
+}
+table td {
+  padding: 4px 12px;
+  border: 1px var(--table-border-color) solid;
+}
+table thead {
+  background: var(--table-header-bg);
+}
+table thead td {
+  font-weight: 700;
+  border: none;
+}
+table thead th {
+  padding: 6px 12px;
+  color: var(--full-contrast);
+  text-align: left;
+  border: 1px var(--table-border-color) solid;
+}
+table thead tr {
+  border: 1px var(--table-border-color) solid;
+}
+/* Alternate background colors for rows */
+table tbody tr:nth-child(2n) {
+  background: var(--table-alternate-bg);
+}
+
+blockquote {
+  margin: auto;
+  margin-top: 1rem;
+  padding: 1rem 1.25rem;
+  color: var(--full-contrast);
+  background-color: var(--quote-bg);
+  border: 1px solid var(--quote-border);
+}
+
+blockquote > p {
+  margin: 0;
+  padding-left: 2.6rem;
+  font-size: 1.4rem;
+}
+
+blockquote:before {
+  --size: 1.4rem;
+  position: absolute;
+  content: "ⓘ";
+  margin: 0.3rem 0;
+  width: var(--size);
+  height: var(--size);
+  font-size: var(--size);
+  font-weight: bold;
+  color: var(--icons);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.625em;
+}
+
+blockquote .warning:before {
+  background-color: var(--quote-bg);
+}
+
+.warning {
+  margin: auto;
+  padding: 1rem 1.25rem;
+  color: var(--full-contrast);
+  background-color: var(--warning-bg);
+  border: 1px solid var(--warning-border);
+}
+
+.warning > p {
+  margin: 0;
+  padding-left: 2.6rem;
+  font-size: 1.4rem;
+}
+
+.warning:before {
+  --size: 1.4rem;
+  position: absolute;
+  content: "ⓘ";
+  margin: 0.3rem 0;
+  width: var(--size);
+  height: var(--size);
+  font-size: var(--size);
+  font-weight: bold;
+  color: var(--warning-icon);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.625em;
+}
+
+kbd {
+  background-color: var(--keybinding-bg);
+  padding: 4px 4px 6px 4px;
+  border-radius: 4px;
+  font-family: var(--mono-font);
+  display: inline-block;
+  margin: 0 2px;
+  border: solid 1px var(--popover-border);
+  box-shadow: inset 0 -1px 0 var(--theme-hover);
+  font-size: var(--code-font-size);
+  color: var(--full-contrast);
+  line-height: 10px;
+  vertical-align: middle;
+}
+
+:not(.footnote-definition) + .footnote-definition,
+.footnote-definition + :not(.footnote-definition) {
+  margin-block-start: 2em;
+}
+.footnote-definition {
+  font-size: 1.4rem;
+  margin: 0.5em 0;
+  border-bottom: 1px solid;
+  border-color: var(--divider);
+}
+.footnote-definition p {
+  display: inline;
+}
+
+.tooltiptext {
+  position: absolute;
+  visibility: hidden;
+  color: #fff;
+  background-color: #333;
+  transform: translateX(
+    -50%
+  ); /* Center by moving tooltip 50% of its width left */
+  left: -8px; /* Half of the width of the icon */
+  top: -35px;
+  font-size: 0.8em;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 8px;
+  margin: 5px;
+  z-index: 1000;
+}
+.tooltipped .tooltiptext {
+  visibility: visible;
+}
+
+.result-no-output {
+  font-style: italic;
+}
+
+code:not(pre code).hljs {
+  color: var(--code-text) !important;
+  background-color: var(--code-bg) !important;
+}
+
+@media only screen and (max-width: 1020px) {
+  .content {
+    padding: 16px 32px 0 32px;
+  }
+
+  .content main {
+    width: 100%;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .content {
+    padding: 16px 16px 0 16px;
+  }
+}

docs/theme/css/variables.css

@@ -0,0 +1,211 @@
+/* Globals */
+
+:root {
+  --color-scheme: light;
+
+  --logo-brightness: brightness(1);
+
+  --sidebar-width: 280px;
+  --sidebar-resize-indicator-width: 0px;
+  --sidebar-resize-indicator-space: 2px;
+  --page-padding: 15px;
+  --content-max-width: 690px;
+  --menu-bar-height: 64px;
+  --font: "iA Writer Quattro S", sans-serif;
+  --title-font:
+    "IBM Plex Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --mono-font:
+    "Lilex", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    Liberation Mono, Courier New, monospace;
+  --code-font-size: 0.875em
+    /* please adjust the ace font size accordingly in editor.js */;
+
+  --noise-opacity: 0.024;
+  --bg: hsla(50, 25%, 96%);
+  --fg: hsl(220, 13%, 34%);
+  --title-color: hsl(220, 92%, 42%);
+
+  --border: hsl(220, 13%, 80%);
+  --border-light: hsl(220, 13%, 90%);
+  --border-hover: hsl(220, 13%, 70%);
+  --border-footer: hsl(220, 13%, 91%);
+
+  --media-bg: hsl(50, 25%, 92%);
+
+  --sidebar-bg: hsla(50, 25%, 94%);
+  --sidebar-fg: hsl(0, 0%, 0%);
+  --sidebar-non-existant: #aaaaaa;
+  --sidebar-active: hsl(220, 93%, 42%);
+  --sidebar-active-bg: hsl(220, 93%, 42%, 0.1);
+  --sidebar-mobile-shadow: 0px 16px 16px hsl(0, 0%, 0%, 0.1);
+
+  --divider: hsl(220, 50%, 45%, 0.1);
+  --scrollbar: #8f8f8f;
+
+  --icons: #747474;
+  --icons-hover: #000000;
+  --icon-btn-bg-hover: hsl(220, 93%, 42%, 0.15);
+
+  --links: hsl(220, 92%, 42%);
+  --link-line-decoration: hsl(220, 93%, 42%, 0.2);
+  --link-line-decoration-hover: hsl(220, 93%, 42%, 0.5);
+
+  --full-contrast: #000;
+
+  --inline-code-color: #301900;
+  --code-text: hsl(220, 13%, 10%);
+  --code-bg: hsl(220, 93%, 42%, 0.1);
+  --keybinding-bg: hsl(0, 0%, 94%);
+
+  --pre-bg: #fff;
+  --pre-border: hsla(220, 93%, 42%, 0.3);
+  --pre-shadow: hsla(220, 93%, 42%, 0.07);
+
+  --popover-bg: #fafafa;
+  --popover-border: #cccccc;
+  --popover-shadow:
+    0 10px 15px -3px hsl(0, 0%, 0%, 0.1), 0 4px 6px -4px hsl(0, 0%, 0%, 0.1);
+
+  --theme-hover: #e6e6e6;
+  --hover-section-title: hsl(50, 25%, 88%);
+
+  --quote-bg: hsl(197, 37%, 96%);
+  --quote-border: hsl(197, 37%, 84%);
+
+  --warning-border: hsl(25, 100%, 85%);
+  --warning-bg: hsl(42, 100%, 60%, 0.1);
+  --warning-icon: hsl(42, 100%, 30%);
+
+  --table-header-bg: hsl(220, 50%, 90%, 0.4);
+  --table-border-color: hsl(220, 93%, 42%, 0.15);
+  --table-alternate-bg: hsl(220, 10%, 90%, 0.4);
+
+  --toc-link-underline: hsl(0, 0%, 0%, 0.1);
+  --toc-link-underline-hover: hsl(0, 0%, 0%, 0.5);
+
+  --searchbar-border-color: #aaa;
+  --searchbar-bg: #fafafa;
+  --searchbar-fg: #000;
+  --searchbar-shadow-color: #aaa;
+  --searchresults-header-fg: #666;
+  --searchresults-li-bg: #e4f2fe;
+  --search-mark-bg: #a2cff5;
+
+  --download-btn-bg: hsl(220, 60%, 95%);
+  --download-btn-bg-hover: hsl(220, 60%, 93%);
+  --download-btn-color: hsl(220, 60%, 30%);
+  --download-btn-border: hsla(220, 60%, 40%, 0.2);
+  --download-btn-border-hover: hsla(220, 60%, 50%, 0.2);
+  --download-btn-shadow: hsla(220, 40%, 60%, 0.1);
+
+  --search-btn-bg: hsl(220, 100%, 100%);
+  --search-btn-bg-hover: hsla(50, 25%, 97%);
+  --search-btn-border: hsl(220, 50%, 45%, 0.2);
+
+  --toast-bg: hsla(220, 93%, 98%);
+  --toast-border: hsla(220, 93%, 42%, 0.3);
+  --toast-border-success: hsla(120, 73%, 42%, 0.3);
+  --toast-border-error: hsla(0, 90%, 50%, 0.3);
+
+  --footer-btn-bg: hsl(220, 60%, 98%, 0.4);
+  --footer-btn-bg-hover: hsl(220, 60%, 93%, 0.5);
+  --footer-btn-border: hsla(220, 60%, 40%, 0.15);
+  --footer-btn-border-hover: hsla(220, 60%, 50%, 0.2);
+}
+
+.dark {
+  --color-scheme: dark;
+
+  --logo-brightness: brightness(2);
+
+  --noise-opacity: 0.012;
+  --bg: hsl(220, 13%, 7.5%);
+  --fg: hsl(220, 14%, 70%);
+  --title-color: hsl(220, 92%, 80%);
+
+  --border: hsl(220, 13%, 20%);
+  --border-light: hsl(220, 13%, 15%);
+  --border-hover: hsl(220, 13%, 40%);
+  --border-footer: hsl(220, 13%, 12%);
+
+  --media-bg: hsl(220, 13%, 8%);
+
+  --sidebar-bg: hsl(220, 13%, 6.5%);
+  --sidebar-fg: hsl(220, 14%, 71%);
+  --sidebar-non-existant: #505254;
+  --sidebar-active: hsl(220, 92%, 75%);
+  --sidebar-active-bg: hsl(220, 93%, 42%, 0.25);
+  --sidebar-mobile-shadow: 0px 16px 16px hsl(0, 0%, 0%, 0.6);
+
+  --divider: hsl(220, 13%, 12%);
+  --scrollbar: hsl(220, 13%, 30%);
+
+  --icons: hsl(220, 14%, 71%);
+  --icons-hover: hsl(220, 14%, 90%);
+  --icon-btn-bg-hover: hsl(220, 93%, 42%, 0.4);
+
+  --links: hsl(220, 93%, 75%);
+  --link-line-decoration: hsl(220, 92%, 80%, 0.4);
+  --link-line-decoration-hover: hsl(220, 92%, 80%, 0.8);
+  --full-contrast: #fff;
+
+  --inline-code-color: hsl(40, 100%, 80%);
+  --code-text: hsl(220, 13%, 95%);
+  --code-bg: hsl(220, 93%, 50%, 0.2);
+  --keybinding-bg: hsl(220, 20%, 10%);
+
+  --pre-bg: hsl(220, 13%, 5%);
+  --pre-border: hsla(220, 93%, 70%, 0.3);
+  --pre-shadow: hsla(220, 93%, 70%, 0.1);
+
+  --popover-bg: hsl(220, 13%, 8%);
+  --popover-border: hsl(220, 13%, 20%);
+  --popover-shadow:
+    0 10px 15px -3px hsl(0, 0%, 0%, 0.1), 0 4px 6px -4px hsl(0, 0%, 0%, 0.1);
+
+  --theme-hover: hsl(220, 13%, 20%);
+  --hover-section-title: hsl(220, 13%, 11%);
+
+  --quote-bg: hsl(220, 13%, 25%, 0.4);
+  --quote-border: hsl(220, 13%, 32%, 0.5);
+
+  --table-border-color: hsl(220, 13%, 30%, 0.5);
+  --table-header-bg: hsl(220, 13%, 25%, 0.5);
+  --table-alternate-bg: hsl(220, 13%, 20%, 0.4);
+
+  --toc-link-underline: hsl(255, 100%, 100%, 0.1);
+  --toc-link-underline-hover: hsl(255, 100%, 100%, 0.4);
+
+  --warning-border: hsl(25, 100%, 85%, 0.2);
+  --warning-bg: hsl(42, 100%, 40%, 0.1);
+  --warning-icon: hsl(42, 100%, 80%);
+
+  --searchbar-border-color: hsl(220, 13%, 30%);
+  --searchbar-bg: hsl(220, 13%, 22%, 0.5);
+  --searchbar-fg: hsl(220, 14%, 71%);
+  --searchbar-shadow-color: hsl(220, 13%, 15%);
+  --searchresults-header-fg: hsl(220, 14%, 60%);
+  --searchresults-li-bg: hsl(220, 13%, 25%);
+  --search-mark-bg: hsl(220, 93%, 60%);
+
+  --download-btn-bg: hsl(220, 90%, 30%, 0.5);
+  --download-btn-bg-hover: hsl(220, 90%, 50%, 0.4);
+  --download-btn-color: hsl(220, 90%, 95%);
+  --download-btn-border: hsla(220, 90%, 80%, 0.2);
+  --download-btn-border-hover: hsla(220, 90%, 80%, 0.4);
+  --download-btn-shadow: hsla(220, 50%, 60%, 0.15);
+
+  --search-btn-bg: hsl(220, 90%, 90%, 0.05);
+  --search-btn-bg-hover: hsl(220, 90%, 90%, 0.1);
+  --search-btn-border: hsla(220, 90%, 80%, 0.1);
+
+  --toast-bg: hsla(220, 20%, 98%, 0.05);
+  --toast-border: hsla(220, 93%, 70%, 0.2);
+  --toast-border-success: hsla(120, 90%, 60%, 0.3);
+  --toast-border-error: hsla(0, 90%, 80%, 0.3);
+
+  --footer-btn-bg: hsl(220, 90%, 95%, 0.01);
+  --footer-btn-bg-hover: hsl(220, 90%, 50%, 0.05);
+  --footer-btn-border: hsla(220, 90%, 90%, 0.05);
+  --footer-btn-border-hover: hsla(220, 90%, 80%, 0.2);
+}

docs/theme/fonts/fonts.css

@@ -0,0 +1,39 @@
+/* Open Sans is licensed under the Apache License, Version 2.0. See http://www.apache.org/licenses/LICENSE-2.0 */
+/* Source Code Pro is under the Open Font License. See https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL */
+/* open-sans-300 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+
+@font-face {
+  font-family: "iA Writer Quattro S";
+  src: url("https://cdn.zed.dev/fonts/iAWriterQuattroV.woff2")
+    format("woff2-variations");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "iA Writer Quattro S";
+  src: url("https://cdn.zed.dev/fonts/iAWriterQuattroV-Italic.woff2")
+    format("woff2-variations");
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "IBM Plex Serif";
+  src: url("https://cdn.zed.dev/fonts/IBMPlexSerif-Var.woff2")
+    format("woff2-variations");
+  font-weight: 400 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lilex";
+  src: url("https://cdn.zed.dev/fonts/Lilex-Regular.woff2")
+    format("woff2-variations");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}

docs/theme/highlight.css

@@ -0,0 +1,252 @@
+/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/
+
+.hljs {
+  color: #24292e;
+  background: #ffffff;
+  overflow-x: auto;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #d73a49;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #6f42c1;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #005cc5;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #032f62;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209;
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #6a737d;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #22863a;
+}
+
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e;
+}
+
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold;
+}
+
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #735c0f;
+}
+
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
+  font-style: italic;
+}
+
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
+  font-weight: bold;
+}
+
+.hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4;
+}
+
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+}
+
+/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+
+.dark .hljs {
+  color: #c9d1d9;
+  background: #0d1117;
+}
+
+.dark .hljs-doctag,
+.dark .hljs-keyword,
+.dark .hljs-meta .hljs-keyword,
+.dark .hljs-template-tag,
+.dark .hljs-template-variable,
+.dark .hljs-type,
+.dark .hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #ff7b72;
+}
+
+.dark .hljs-title,
+.dark .hljs-title.class_,
+.dark .hljs-title.class_.inherited__,
+.dark .hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #d2a8ff;
+}
+
+.dark .hljs-attr,
+.dark .hljs-attribute,
+.dark .hljs-literal,
+.dark .hljs-meta,
+.dark .hljs-number,
+.dark .hljs-operator,
+.dark .hljs-variable,
+.dark .hljs-selector-attr,
+.dark .hljs-selector-class,
+.dark .hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #79c0ff;
+}
+
+.dark .hljs-regexp,
+.dark .hljs-string,
+.dark .hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #a5d6ff;
+}
+
+.dark .hljs-built_in,
+.dark .hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #ffa657;
+}
+
+.dark .hljs-comment,
+.dark .hljs-code,
+.dark .hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #8b949e;
+}
+
+.dark .hljs-name,
+.dark .hljs-quote,
+.dark .hljs-selector-tag,
+.dark .hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #7ee787;
+}
+
+.dark .hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #c9d1d9;
+}
+
+.dark .hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #1f6feb;
+  font-weight: bold;
+}
+
+.dark .hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #f2cc60;
+}
+
+.dark .hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #c9d1d9;
+  font-style: italic;
+}
+
+.dark .hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #c9d1d9;
+  font-weight: bold;
+}
+
+.dark .hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #aff5b4;
+  background-color: #033a16;
+}
+
+.dark .hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+
+.dark .hljs-char.escape_,
+.dark .hljs-link,
+.dark .hljs-params,
+.dark .hljs-property,
+.dark .hljs-punctuation,
+.dark .hljs-tag {
+  /* purposely ignored */
+}

docs/theme/index.hbs

@@ -0,0 +1,560 @@
+<!DOCTYPE HTML>
+<html lang="{{ language }}" dir="{{ text_direction }}">
+    <head>
+        <!-- Book generated using mdBook -->
+        <meta charset="UTF-8">
+        <style>
+            @view-transition {
+                navigation: auto;
+            }
+            ::view-transition-old(root),
+            ::view-transition-new(root) {
+                animation-duration: 0.05s;
+            }
+        </style>
+        <!-- Theme initialization - must run before any CSS loads to prevent flicker -->
+        <script>
+            (function() {
+                var theme;
+                try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
+                if (theme === null || theme === undefined) {
+                    theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+                }
+                var html = document.documentElement;
+                html.setAttribute('data-theme', theme);
+                html.setAttribute('data-color-scheme', theme);
+                html.className = theme;
+            })();
+        </script>
+        <title>{{ title }}</title>
+        {{#if is_print }}
+        <meta name="robots" content="noindex">
+        {{/if}}
+        #noindex#
+        {{#if base_url}}
+        <base href="{{ base_url }}">
+        {{/if}}
+
+
+        <!-- Custom HTML head -->
+        {{> head}}
+
+        <meta name="description" content="#description#">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="theme-color" content="#ffffff">
+
+        <link rel="shortcut icon" href="{{ path_to_root }}favicon.png">
+        <link rel="stylesheet" href="{{ path_to_root }}css/variables.css">
+        <link rel="stylesheet" href="{{ path_to_root }}css/general.css">
+        <link rel="stylesheet" href="{{ path_to_root }}css/chrome.css">
+        {{#if print_enable}}
+        <link rel="stylesheet" href="{{ path_to_root }}css/print.css" media="print">
+        {{/if}}
+
+        <!-- Fonts -->
+        <link rel="stylesheet" href="{{ path_to_root }}FontAwesome/css/font-awesome.css">
+        {{#if copy_fonts}}
+        <link rel="stylesheet" href="{{ path_to_root }}fonts/fonts.css">
+        {{/if}}
+
+        <!-- Highlight.js Stylesheets -->
+        <link rel="stylesheet" href="{{ path_to_root }}highlight.css">
+        <link rel="stylesheet" href="{{ path_to_root }}tomorrow-night.css">
+        <link rel="stylesheet" href="{{ path_to_root }}ayu-highlight.css">
+
+        <!-- Custom theme stylesheets -->
+        {{#each additional_css}}
+        <link rel="stylesheet" href="{{ ../path_to_root }}{{ this }}">
+        {{/each}}
+
+        {{#if mathjax_support}}
+        <!-- MathJax -->
+        <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+        {{/if}}
+        <meta name="amplitude-key" content="#amplitude_key#" />
+        <meta name="consent-io-instance" content="#consent_io_instance#" />
+    </head>
+    <body class="no-js">
+    <div id="body-container">
+        <div class="noise-pattern" style="background-image: url('https://cdn.zed.dev/images/noise.png');"></div>
+
+        <!-- Provide site root to javascript -->
+        <script>
+            var path_to_root = "{{ path_to_root }}";
+            var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}";
+            // Mark as JS-enabled
+            document.body.classList.remove('no-js');
+            document.body.classList.add('js');
+        </script>
+
+        <header class="header-bar">
+            <div class="left-container">
+                <a href="/" class="logo-nav">
+                    <img src="https://zed.dev/logo_icon.webp" class="icon-logo-img" alt="Zed Industries" style="height: 26px;">
+                </a>
+                <button id="sidebar-toggle" class="icon-button ib-hidden-desktop" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar" aria-expanded="false">
+                    <i class="fa fa-bars"></i>
+                </button>
+            </div>
+            {{#if search_enabled}}
+            <button id="search-toggle" class="search-button" type="button" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
+                <i class="icon fa fa-search"></i>
+                <span class="search-content-desktop">
+                    <span class="placeholder">Search docs…</span>
+                    <kbd>S</kbd>
+                </span>
+                <span class="search-content-mobile">
+                    <span class="placeholder">Search…</span>
+                </span>
+            </button>
+            {{/if}}
+            <div class="right-container">
+                <button id="theme-toggle" class="icon-button" type="button" title="Change Theme" aria-label="Change Theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
+                    <i class="fa fa-paint-brush"></i>
+                </button>
+
+                <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
+                    <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
+                    <li role="none"><button role="menuitem" class="theme" id="dark">Dark</button></li>
+                </ul>
+
+                <button id="copy-markdown-toggle" class="icon-button ib-hidden-mobile" type="button" title="Copy Page as Markdown" aria-label="Copy page as markdown">
+                    <i class="fa fa-copy"></i>
+                </button>
+
+                <a class="download-button" href="https://zed.dev/download" title="Download Zed" aria-label="Download Zed">
+                    Download
+                </a>
+                {{#if git_repository_url}}
+                <a href="{{git_repository_url}}" title="Git repository" aria-label="Git repository">
+                    <i id="git-repository-button" class="fa {{git_repository_icon}}"></i>
+                </a>
+                {{/if}}
+                {{#if git_repository_edit_url}}
+                <a href="{{git_repository_edit_url}}" title="Suggest an edit" aria-label="Suggest an edit">
+                    <i id="git-edit-button" class="fa fa-edit"></i>
+                </a>
+                {{/if}}
+            </div>
+        </header>
+
+        <div id="page-wrapper" class="page-wrapper">
+
+            {{#if search_enabled}}
+            <div class="search-container">
+                <div id="search-wrapper" class="search-modal hidden">
+                    <form id="searchbar-outer" class="searchbar-outer">
+                        <input type="search" id="searchbar" name="searchbar" placeholder="Search…" aria-controls="searchresults-outer" aria-describedby="searchresults-header">
+                    </form>
+                    <div id="searchresults-outer" class="searchresults-outer">
+                        <div id="searchresults-header" class="searchresults-header"></div>
+                        <ul id="searchresults">
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            {{/if}}
+
+            <nav id="sidebar" class="sidebar" aria-label="Table of contents">
+                <div class="sidebar-scrollbox">
+                    {{#toc}}{{/toc}}
+                </div>
+                <div style="display: none;" id="sidebar-resize-handle" class="sidebar-resize-handle">
+                    <div class="sidebar-resize-indicator"></div>
+                </div>
+            </nav>
+
+            <!-- Mobile sidebar toggle -->
+            <script>
+                (function() {
+                    var sidebarToggle = document.getElementById('sidebar-toggle');
+                    var sidebar = document.getElementById('sidebar');
+
+                    sidebarToggle.addEventListener('click', function() {
+                        var isOpen = document.body.classList.toggle('sidebar-open');
+                        sidebarToggle.setAttribute('aria-expanded', isOpen);
+                        sidebar.setAttribute('aria-hidden', !isOpen);
+                    });
+
+                    // Close sidebar when clicking a link inside it (on mobile)
+                    sidebar.addEventListener('click', function(e) {
+                        if (e.target.tagName === 'A' && window.innerWidth < 620) {
+                            document.body.classList.remove('sidebar-open');
+                            sidebarToggle.setAttribute('aria-expanded', 'false');
+                            sidebar.setAttribute('aria-hidden', 'true');
+                        }
+                    });
+                })();
+            </script>
+
+            <!-- Search backdrop handlers -->
+            <script>
+                (function() {
+                    var searchWrapper = document.getElementById('search-wrapper');
+                    var searchContainer = document.querySelector('.search-container');
+                    var searchResults = document.getElementById('searchresults');
+
+                    if (!searchWrapper || !searchContainer) return;
+
+                    searchContainer.addEventListener('click', function(e) {
+                        if (e.target === searchContainer) {
+                            searchWrapper.classList.add('hidden');
+                        }
+                    });
+
+                    if (searchResults) {
+                        searchResults.addEventListener('click', function(e) {
+                            if (e.target.tagName === 'A' || e.target.closest('a')) {
+                                searchWrapper.classList.add('hidden');
+                            }
+                        });
+                    }
+                })();
+            </script>
+
+            <!-- Insert section spacers and apply collapsed state before scroll restoration to prevent layout shift/flicker -->
+            <script>
+                (function() {
+                    var chapterList = document.querySelector('#sidebar ol.chapter');
+                    if (!chapterList) return;
+
+                    var collapsedSections = [];
+                    try {
+                        var stored = sessionStorage.getItem('sidebar-collapsed-sections');
+                        if (stored) {
+                            collapsedSections = JSON.parse(stored);
+                        }
+                    } catch (e) {}
+
+                    var partTitles = chapterList.querySelectorAll('li.part-title');
+                    var previousPartTitle = null;
+
+                    partTitles.forEach(function(partTitle, index) {
+                        partTitle._sectionName = partTitle.textContent.trim();
+
+                        // Insert a spacer before this part-title (except for the first one)
+                        if (index > 0) {
+                            var spacer = document.createElement('li');
+                            spacer.className = 'section-spacer';
+                            partTitle.parentNode.insertBefore(spacer, partTitle);
+
+                            if (previousPartTitle) {
+                                previousPartTitle._spacerAfter = spacer;
+                            }
+                        }
+
+                        var isCollapsed = collapsedSections.includes(partTitle._sectionName);
+                        if (isCollapsed) {
+                            // Hide all siblings until next part-title
+                            var sibling = partTitle.nextElementSibling;
+                            while (sibling && !sibling.classList.contains('part-title')) {
+                                sibling.classList.add('section-hidden');
+                                sibling = sibling.nextElementSibling;
+                            }
+                            // Hide the spacer after this section (will be set on next iteration)
+                            partTitle._isCollapsed = true;
+                        }
+
+                        // If previous section was collapsed, hide its spacer
+                        if (previousPartTitle && previousPartTitle._isCollapsed && previousPartTitle._spacerAfter) {
+                            previousPartTitle._spacerAfter.classList.add('section-hidden');
+                        }
+
+                        previousPartTitle = partTitle;
+                    });
+
+                    // Handle the last section's spacer if it was collapsed
+                    if (previousPartTitle && previousPartTitle._isCollapsed && previousPartTitle._spacerAfter) {
+                        previousPartTitle._spacerAfter.classList.add('section-hidden');
+                    }
+                })();
+            </script>
+
+            <!-- Track and set sidebar scroll position -->
+            <script>
+                var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
+                sidebarScrollbox.addEventListener('click', function(e) {
+                    if (e.target.tagName === 'A') {
+                        sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
+                    }
+                }, { passive: true });
+                var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
+                sessionStorage.removeItem('sidebar-scroll');
+                if (sidebarScrollTop) {
+                    // preserve sidebar scroll position when navigating via links within sidebar
+                    sidebarScrollbox.scrollTop = sidebarScrollTop;
+                } else {
+                    // scroll sidebar to current active section when navigating via "next/previous chapter" buttons
+                    var activeSection = document.querySelector('#sidebar .active');
+                    if (activeSection) {
+                        activeSection.scrollIntoView({ block: 'center' });
+                    }
+                }
+            </script>
+
+            <div class="page">
+                <div id="content" class="content">
+                    <main>
+                      {{{ content }}}
+                        <div class="footer-buttons">
+                            {{#previous}}
+                            <a rel="prev" href="{{ path_to_root }}{{link}}" class="footer-button" title="{{title}}">
+                                <i class="fa fa-angle-left"></i>
+                                {{title}}
+                            </a>
+                            {{/previous}}
+                            {{#next}}
+                            <a rel="next" href="{{ path_to_root }}{{link}}" class="footer-button" title="{{title}}">
+                                {{title}}
+                                <i class="fa fa-angle-right"></i>
+                            </a>
+                            {{/next}}
+                        </div>
+                        <footer class="footer">
+                            <a href="/" class="logo-nav">
+                                <img
+                                    src="https://zed.dev/logo_icon.webp"
+                                    class="footer-logo"
+                                    alt="Zed Industries"
+                                />
+                            </a>
+                            <span class="footer-separator">•</span>
+                            <a class="footer-link" href="https://zed.dev"
+                                >Back to Site</a
+                            >
+                            <span class="footer-separator">•</span>
+                            <a
+                                class="footer-link"
+                                href="https://zed.dev/releases"
+                                >Releases</a
+                            >
+                            <span class="footer-separator">•</span>
+                            <a
+                                class="footer-link"
+                                href="https://zed.dev/roadmap"
+                                >Roadmap</a
+                            >
+                            <span class="footer-separator">•</span>
+                            <a
+                                class="footer-link"
+                                href="https://github.com/zed-industries/zed"
+                                >GitHub</a
+                            >
+                            <span class="footer-separator">•</span>
+                            <a
+                                class="footer-link"
+                                href="https://zed.dev/blog"
+                                >Blog</a
+                            >
+                            <span class="footer-separator">•</span>
+                            <button
+                                id="c15t-manage-consent-btn"
+                                class="footer-link"
+                            >
+                                Manage Site Cookies
+                            </button>
+                        </footer>
+                    </main>
+                    <div class="toc-container">
+                        <nav class="pagetoc"></nav>
+                    </div>
+                    <!-- Immediately detect if page has headins that are not h1 to prevent flicker -->
+                    <script>
+                        (function() {
+                            var tocContainer = document.querySelector('.toc-container');
+                            var headers = document.querySelectorAll('.header');
+                            var hasNonH1Headers = false;
+                            for (var i = 0; i < headers.length; i++) {
+                                var parent = headers[i].parentElement;
+                                if (parent && !parent.tagName.toLowerCase().startsWith('h1')) {
+                                    hasNonH1Headers = true;
+                                    break;
+                                }
+                            }
+                            if (hasNonH1Headers) {
+                                tocContainer.classList.add('has-toc');
+                            } else {
+                                tocContainer.classList.add('no-toc');
+                            }
+                        })();
+                    </script>
+                </div>
+            </div>
+        </div>
+
+        {{#if live_reload_endpoint}}
+        <!-- Livereload script (if served using the cli tool) -->
+        <script>
+            const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const wsAddress = wsProtocol + "//" + location.host + "/" + "{{{live_reload_endpoint}}}";
+            const socket = new WebSocket(wsAddress);
+            socket.onmessage = function (event) {
+                if (event.data === "reload") {
+                    socket.close();
+                    location.reload();
+                }
+            };
+
+            window.onbeforeunload = function() {
+                socket.close();
+            }
+        </script>
+        {{/if}}
+
+        {{#if playground_line_numbers}}
+        <script>
+            window.playground_line_numbers = true;
+        </script>
+        {{/if}}
+
+        {{#if playground_copyable}}
+        <script>
+            window.playground_copyable = true;
+        </script>
+        {{/if}}
+
+        {{#if playground_js}}
+        <script src="{{ path_to_root }}ace.js"></script>
+        <script src="{{ path_to_root }}editor.js"></script>
+        <script src="{{ path_to_root }}mode-rust.js"></script>
+        <script src="{{ path_to_root }}theme-dawn.js"></script>
+        <script src="{{ path_to_root }}theme-tomorrow_night.js"></script>
+        {{/if}}
+
+        {{#if search_js}}
+        <script src="{{ path_to_root }}elasticlunr.min.js"></script>
+        <script src="{{ path_to_root }}mark.min.js"></script>
+        <script src="{{ path_to_root }}searcher.js"></script>
+
+        <script>
+           (function () {
+                // Check for focused search result and bring into the view
+                const ensureVisible = () => {
+                    const focused = document.querySelector("#searchresults li.focus");
+
+                    if (focused) {
+                        focused.scrollIntoView({
+                            block: "nearest",
+                            inline: "nearest"
+                        });
+                    }
+                };
+
+                // 1. Listen for arrow key events
+                // 2. Wait for DOM to update
+                // 3. Call envsureVisible
+                document.addEventListener("keydown", function (e) {
+                    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                        requestAnimationFrame(ensureVisible);
+                    }
+                });
+            })();
+        </script>
+        {{/if}}
+
+        <script src="{{ path_to_root }}clipboard.min.js"></script>
+        <script src="{{ path_to_root }}highlight.js"></script>
+        <script src="{{ path_to_root }}book.js"></script>
+
+        <!-- Custom JS scripts -->
+        {{#each additional_js}}
+        <script src="{{ ../path_to_root }}{{this}}"></script>
+        {{/each}}
+
+        {{#if is_print}}
+        {{#if mathjax_support}}
+        <script>
+        window.addEventListener('load', function() {
+            MathJax.Hub.Register.StartupHook('End', function() {
+                window.setTimeout(window.print, 100);
+            });
+        });
+        </script>
+        {{else}}
+        <script>
+        window.addEventListener('load', function() {
+            window.setTimeout(window.print, 100);
+        });
+        </script>
+        {{/if}}
+        {{/if}}
+
+        <!-- c15t Consent Banner -->
+        <div id="c15t-banner" style="display: none;">
+            <div>
+                <p id="c15t-description">
+                    Zed uses cookies to improve your experience and for marketing. Read <a href="https://zed.dev/cookie-policy">our cookie policy</a> for more details.
+                </p>
+            </div>
+            <div id="c15t-configure-section" style="display: none">
+                <div>
+                    <label for="c15t-toggle-necessary"
+                        >Strictly Necessary</label
+                    >
+                    <label class="c15t-switch">
+                        <input
+                            type="checkbox"
+                            id="c15t-toggle-necessary"
+                            checked
+                            disabled
+                        />
+                        <span class="c15t-slider"></span>
+                    </label>
+                </div>
+                <div>
+                    <label for="c15t-toggle-measurement">Analytics</label>
+                    <label class="c15t-switch">
+                        <input
+                            type="checkbox"
+                            id="c15t-toggle-measurement"
+                        />
+                        <span class="c15t-slider"></span>
+                    </label>
+                </div>
+                <div>
+                    <label for="c15t-toggle-marketing">Marketing</label>
+                    <label class="c15t-switch">
+                        <input
+                            type="checkbox"
+                            id="c15t-toggle-marketing"
+                        />
+                        <span class="c15t-slider"></span>
+                    </label>
+                </div>
+            </div>
+            <div id="c15t-footer">
+                <button
+                    id="c15t-configure-btn"
+                    class="c15t-button icon"
+                    title="Configure"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <path d="M20 7h-9" />
+                        <path d="M14 17H5" />
+                        <circle cx="17" cy="17" r="3" />
+                        <circle cx="7" cy="7" r="3" />
+                    </svg>
+                </button>
+                <div>
+                    <button id="c15t-decline" class="c15t-button">
+                        Reject all
+                    </button>
+                    <button id="c15t-accept" class="c15t-button primary">
+                        Accept all
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    </body>
+</html>

docs/theme/page-toc.css

@@ -0,0 +1,79 @@
+.pagetoc {
+  box-sizing: border-box;
+  position: sticky;
+  top: 50px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 16px 0 120px 0;
+  width: 200px;
+  max-height: calc(100svh - 50px);
+  overflow-x: hidden;
+}
+.pagetoc > :last-child {
+  margin-bottom: 16px;
+}
+.pagetoc a {
+  width: fit-content;
+  font-size: 1.4rem;
+  color: var(--fg) !important;
+  display: inline-block;
+  padding: 2px 0;
+  text-align: left;
+  text-decoration: underline;
+  text-decoration-color: var(--toc-link-underline);
+}
+.pagetoc a:hover {
+  text-decoration-color: var(--toc-link-underline-hover);
+}
+.pagetoc a.active {
+  background-color: var(--sidebar-active-bg);
+  color: var(--sidebar-active) !important;
+  text-decoration-color: hsl(219, 93%, 42%, 0.1);
+}
+.pagetoc a.active:hover {
+  text-decoration-color: hsl(219, 93%, 42%, 0.8);
+}
+.pagetoc .active {
+  background: var(--sidebar-bg);
+  color: var(--sidebar-fg);
+}
+.pagetoc .pagetoc-H1 {
+  display: none;
+}
+.pagetoc .pagetoc-H3 {
+  margin-left: 2ch;
+}
+.pagetoc .pagetoc-H4 {
+  margin-left: 4ch;
+}
+.pagetoc .pagetoc-H5 {
+  display: none;
+}
+.pagetoc .pagetoc-H6 {
+  display: none;
+}
+.toc-title {
+  margin: 0;
+  margin-bottom: 6px;
+  font-size: 1.4rem;
+  color: var(--full-contrast);
+}
+
+.toc-container {
+  visibility: hidden;
+}
+
+.toc-container.has-toc {
+  visibility: visible;
+}
+
+.toc-container.no-toc {
+  display: none;
+}
+
+@media only screen and (max-width: 1200px) {
+  .toc-container {
+    display: none;
+  }
+}

docs/theme/page-toc.js

@@ -0,0 +1,112 @@
+let scrollTimeout;
+
+const listenActive = () => {
+  const elems = document.querySelector(".pagetoc").children;
+  [...elems].forEach((el) => {
+    el.addEventListener("click", (_) => {
+      clearTimeout(scrollTimeout);
+      [...elems].forEach((el) => el.classList.remove("active"));
+      el.classList.add("active");
+
+      scrollTimeout = setTimeout(() => {
+        scrollTimeout = null;
+      }, 100);
+    });
+  });
+};
+
+const autoCreatePagetoc = () => {
+  const main = document.querySelector("#content > main");
+  const content = Object.assign(document.createElement("div"), {
+    className: "content-wrap",
+  });
+  content.append(...main.childNodes);
+  main.prepend(content);
+  main.insertAdjacentHTML(
+    "afterbegin",
+    '<div class="toc-container"><nav class="pagetoc"></nav></div>',
+  );
+  return document.querySelector(".pagetoc");
+};
+
+const getPagetoc = () =>
+  document.querySelector(".pagetoc") || autoCreatePagetoc();
+
+const updateFunction = () => {
+  if (scrollTimeout) return;
+
+  const headers = [...document.getElementsByClassName("header")];
+  if (headers.length === 0) return;
+
+  const threshold = 100;
+  let activeHeader = null;
+
+  for (const header of headers) {
+    const rect = header.getBoundingClientRect();
+
+    if (rect.top <= threshold) {
+      activeHeader = header;
+    }
+  }
+
+  if (!activeHeader && headers.length > 0) {
+    activeHeader = headers[0];
+  }
+
+  const pagetocLinks = [...document.querySelector(".pagetoc").children];
+  pagetocLinks.forEach((link) => link.classList.remove("active"));
+
+  if (activeHeader) {
+    const activeLink = pagetocLinks.find(
+      (link) => activeHeader.href === link.href,
+    );
+    if (activeLink) activeLink.classList.add("active");
+  }
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  const pagetoc = getPagetoc();
+  const headers = [...document.getElementsByClassName("header")];
+
+  const nonH1Headers = headers.filter(
+    (header) => !header.parentElement.tagName.toLowerCase().startsWith("h1"),
+  );
+  const tocContainer = document.querySelector(".toc-container");
+
+  if (nonH1Headers.length === 0) {
+    if (tocContainer) {
+      tocContainer.classList.add("no-toc");
+    }
+    return;
+  }
+
+  if (tocContainer) {
+    tocContainer.classList.add("has-toc");
+  }
+
+  const tocTitle = Object.assign(document.createElement("p"), {
+    className: "toc-title",
+    textContent: "On This Page",
+  });
+
+  pagetoc.appendChild(tocTitle);
+
+  headers.forEach((header) => {
+    const link = Object.assign(document.createElement("a"), {
+      textContent: header.text,
+      href: header.href,
+      className: `pagetoc-${header.parentElement.tagName}`,
+    });
+    pagetoc.appendChild(link);
+  });
+
+  updateFunction();
+  listenActive();
+
+  const pageElement = document.querySelector(".page");
+  if (pageElement) {
+    pageElement.addEventListener("scroll", updateFunction);
+  } else {
+    window.addEventListener("scroll", updateFunction);
+  }
+});

docs/theme/plugins.css

@@ -0,0 +1,45 @@
+kbd.keybinding {
+  background-color: var(--keybinding-bg);
+  padding: 4px 4px 6px 4px;
+  border-radius: 4px;
+  font-family: var(--mono-font);
+  display: inline-block;
+  margin: 0 2px;
+}
+
+#copy-markdown-toggle i {
+  font-weight: 500 !important;
+  -webkit-text-stroke: 0.5px currentColor;
+}
+
+.copy-toast {
+  position: fixed;
+  top: 72px;
+  right: 16px;
+  padding: 12px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--fg);
+  background: var(--toast-bg);
+  border: 1px solid var(--toast-border);
+  z-index: 1000;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: all 0.1s ease-in-out;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  max-width: 280px;
+}
+
+.copy-toast.success {
+  border-color: var(--toast-border-success);
+}
+
+.copy-toast.error {
+  border-color: var(--toast-border-error);
+}
+
+.copy-toast.show {
+  opacity: 1;
+  transform: translateY(0);
+}

docs/theme/plugins.js

@@ -0,0 +1,321 @@
+function detectOS() {
+  var userAgent = navigator.userAgent;
+
+  var platform = navigator.platform;
+  var macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"];
+  var windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"];
+  var iosPlatforms = ["iPhone", "iPad", "iPod"];
+
+  if (macosPlatforms.indexOf(platform) !== -1) {
+    return "Mac";
+  } else if (iosPlatforms.indexOf(platform) !== -1) {
+    return "iOS";
+  } else if (windowsPlatforms.indexOf(platform) !== -1) {
+    return "Windows";
+  } else if (/Android/.test(userAgent)) {
+    return "Android";
+  } else if (/Linux/.test(platform)) {
+    return "Linux";
+  }
+
+  return "Unknown";
+}
+
+var os = detectOS();
+console.log("Operating System:", os);
+
+// Defer keybinding processing to avoid blocking initial render
+function updateKeybindings() {
+  const os = detectOS();
+  const isMac = os === "Mac" || os === "iOS";
+
+  function processKeybinding(element) {
+    const [macKeybinding, linuxKeybinding] = element.textContent.split("|");
+    element.textContent = isMac ? macKeybinding : linuxKeybinding;
+    element.classList.add("keybinding");
+  }
+
+  // Process all kbd elements at once (more efficient than walking entire DOM)
+  const kbdElements = document.querySelectorAll("kbd");
+  kbdElements.forEach(processKeybinding);
+}
+
+// Use requestIdleCallback if available, otherwise requestAnimationFrame
+if (typeof requestIdleCallback === "function") {
+  requestIdleCallback(updateKeybindings);
+} else {
+  requestAnimationFrame(updateKeybindings);
+}
+
+function darkModeToggle() {
+  var html = document.documentElement;
+
+  function setTheme(theme) {
+    html.setAttribute("data-theme", theme);
+    html.setAttribute("data-color-scheme", theme);
+    html.className = theme;
+    localStorage.setItem("mdbook-theme", theme);
+  }
+
+  // Set initial theme
+  var currentTheme = localStorage.getItem("mdbook-theme");
+  if (currentTheme) {
+    setTheme(currentTheme);
+  } else {
+    // If no theme is set, use the system's preference
+    var systemPreference = window.matchMedia("(prefers-color-scheme: dark)")
+      .matches
+      ? "dark"
+      : "light";
+    setTheme(systemPreference);
+  }
+
+  // Listen for system's preference changes
+  const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  darkModeMediaQuery.addEventListener("change", function (e) {
+    if (!localStorage.getItem("mdbook-theme")) {
+      setTheme(e.matches ? "dark" : "light");
+    }
+  });
+}
+
+const copyMarkdown = () => {
+  const copyButton = document.getElementById("copy-markdown-toggle");
+  if (!copyButton) return;
+
+  // Store the original icon class, loading state, and timeout reference
+  const originalIconClass = "fa fa-copy";
+  let isLoading = false;
+  let iconTimeoutId = null;
+
+  const getCurrentPagePath = () => {
+    const pathname = window.location.pathname;
+
+    // Handle root docs path
+    if (pathname === "/docs/" || pathname === "/docs") {
+      return "getting-started.md";
+    }
+
+    // Remove /docs/ prefix and .html suffix, then add .md
+    const cleanPath = pathname
+      .replace(/^\/docs\//, "")
+      .replace(/\.html$/, "")
+      .replace(/\/$/, "");
+
+    return cleanPath ? cleanPath + ".md" : "getting-started.md";
+  };
+
+  const showToast = (message, isSuccess = true) => {
+    // Remove existing toast if any
+    const existingToast = document.getElementById("copy-toast");
+    existingToast?.remove();
+
+    const toast = document.createElement("div");
+    toast.id = "copy-toast";
+    toast.className = `copy-toast ${isSuccess ? "success" : "error"}`;
+    toast.textContent = message;
+
+    document.body.appendChild(toast);
+
+    // Show toast with animation
+    setTimeout(() => {
+      toast.classList.add("show");
+    }, 10);
+
+    // Hide and remove toast after 2 seconds
+    setTimeout(() => {
+      toast.classList.remove("show");
+      setTimeout(() => {
+        toast.parentNode?.removeChild(toast);
+      }, 300);
+    }, 2000);
+  };
+
+  const changeButtonIcon = (iconClass, duration = 1000) => {
+    const icon = copyButton.querySelector("i");
+    if (!icon) return;
+
+    // Clear any existing timeout
+    if (iconTimeoutId) {
+      clearTimeout(iconTimeoutId);
+      iconTimeoutId = null;
+    }
+
+    icon.className = iconClass;
+
+    if (duration > 0) {
+      iconTimeoutId = setTimeout(() => {
+        icon.className = originalIconClass;
+        iconTimeoutId = null;
+      }, duration);
+    }
+  };
+
+  const fetchAndCopyMarkdown = async () => {
+    // Prevent multiple simultaneous requests
+    if (isLoading) return;
+
+    try {
+      isLoading = true;
+      changeButtonIcon("fa fa-spinner fa-spin", 0); // Don't auto-restore spinner
+
+      const pagePath = getCurrentPagePath();
+      const rawUrl = `https://raw.githubusercontent.com/zed-industries/zed/main/docs/src/${pagePath}`;
+
+      const response = await fetch(rawUrl);
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch markdown: ${response.status} ${response.statusText}`,
+        );
+      }
+
+      const markdownContent = await response.text();
+
+      // Copy to clipboard using modern API
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(markdownContent);
+      } else {
+        // Fallback: throw error if clipboard API isn't available
+        throw new Error("Clipboard API not supported in this browser");
+      }
+
+      changeButtonIcon("fa fa-check", 1000);
+      showToast("Page content copied to clipboard!");
+    } catch (error) {
+      console.error("Error copying markdown:", error);
+      changeButtonIcon("fa fa-exclamation-triangle", 2000);
+      showToast("Failed to copy markdown. Please try again.", false);
+    } finally {
+      isLoading = false;
+    }
+  };
+
+  copyButton.addEventListener("click", fetchAndCopyMarkdown);
+};
+
+// Initialize functionality when DOM is loaded
+document.addEventListener("DOMContentLoaded", () => {
+  darkModeToggle();
+  copyMarkdown();
+});
+
+// Collapsible sidebar navigation for entire sections
+// Note: Initial collapsed state is applied in index.hbs to prevent flicker
+function initCollapsibleSidebar() {
+  var sidebar = document.getElementById("sidebar");
+  if (!sidebar) return;
+
+  var chapterList = sidebar.querySelector("ol.chapter");
+  if (!chapterList) return;
+
+  var partTitles = Array.from(chapterList.querySelectorAll("li.part-title"));
+
+  partTitles.forEach(function (partTitle) {
+    // Get all sibling elements that belong to this section
+    var sectionItems = getSectionItems(partTitle);
+
+    if (sectionItems.length > 0) {
+      setupCollapsibleSection(partTitle, sectionItems);
+    }
+  });
+}
+
+// Saves the list of collapsed section names to sessionStorage
+// This gets reset when the tab is closed and opened again
+function saveCollapsedSections() {
+  var collapsedSections = [];
+  var partTitles = document.querySelectorAll(
+    "#sidebar li.part-title.collapsible",
+  );
+
+  partTitles.forEach(function (partTitle) {
+    if (!partTitle.classList.contains("expanded")) {
+      collapsedSections.push(partTitle._sectionName);
+    }
+  });
+
+  try {
+    sessionStorage.setItem(
+      "sidebar-collapsed-sections",
+      JSON.stringify(collapsedSections),
+    );
+  } catch (e) {
+    // sessionStorage might not be available
+  }
+}
+
+function getSectionItems(partTitle) {
+  var items = [];
+  var sibling = partTitle.nextElementSibling;
+
+  while (sibling) {
+    // Stop when we hit another part-title
+    if (sibling.classList.contains("part-title")) {
+      break;
+    }
+    items.push(sibling);
+    sibling = sibling.nextElementSibling;
+  }
+
+  return items;
+}
+
+function setupCollapsibleSection(partTitle, sectionItems) {
+  partTitle.classList.add("collapsible");
+  partTitle.setAttribute("role", "button");
+  partTitle.setAttribute("tabindex", "0");
+  partTitle._sectionItems = sectionItems;
+
+  var isCurrentlyCollapsed = partTitle._isCollapsed;
+  if (isCurrentlyCollapsed) {
+    partTitle.setAttribute("aria-expanded", "false");
+  } else {
+    partTitle.classList.add("expanded");
+    partTitle.setAttribute("aria-expanded", "true");
+  }
+
+  partTitle.addEventListener("click", function (e) {
+    e.preventDefault();
+    toggleSection(partTitle);
+  });
+
+  // a11y: Add keyboard support (Enter and Space)
+  partTitle.addEventListener("keydown", function (e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggleSection(partTitle);
+    }
+  });
+}
+
+function toggleSection(partTitle) {
+  var isExpanded = partTitle.classList.contains("expanded");
+  var sectionItems = partTitle._sectionItems;
+  var spacerAfter = partTitle._spacerAfter;
+
+  if (isExpanded) {
+    partTitle.classList.remove("expanded");
+    partTitle.setAttribute("aria-expanded", "false");
+    sectionItems.forEach(function (item) {
+      item.classList.add("section-hidden");
+    });
+    if (spacerAfter) {
+      spacerAfter.classList.add("section-hidden");
+    }
+  } else {
+    partTitle.classList.add("expanded");
+    partTitle.setAttribute("aria-expanded", "true");
+    sectionItems.forEach(function (item) {
+      item.classList.remove("section-hidden");
+    });
+    if (spacerAfter) {
+      spacerAfter.classList.remove("section-hidden");
+    }
+  }
+
+  saveCollapsedSections();
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  initCollapsibleSidebar();
+});