@domphy/press 0.19.2 → 0.20.1

package/dist/{build-DKE372GH.js → build-UHQ4PZ25.js}

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 // src/build.ts
+import { execSync } from "child_process";
 import {
   cpSync,
   existsSync,
@@ -11,7 +12,6 @@ import {
 } from "fs";
 import { dirname as dirname2, join as join2, relative as relative2, resolve as resolve2 } from "path";
 import { fileURLToPath } from "url";
-import { execSync } from "child_process";
 import { createApp, defineRoutes } from "@domphy/app";
 import { themeCSS } from "@domphy/theme";
 
@@ -52,8 +52,8 @@ var ALIASES = {
   py: "python"
 };
 var pending = null;
-function escapeHtml(text2) {
-  return text2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+function escapeHtml(text3) {
+  return text3.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 function unwrapCode(html) {
   const match = html.match(/<code[^>]*>([\s\S]*)<\/code>/);
@@ -65,13 +65,15 @@ function parseFenceInfo(info) {
   const lineNumbers = info.includes(":line-numbers");
   const titleMatch = info.match(/\[([^\]]*[a-zA-Z.][^\]]*)\]/);
   const title = titleMatch ? titleMatch[1] : null;
-  const rangeMatch = info.match(/\{([0-9,\s\-]+)\}/);
+  const rangeMatch = info.match(/\{([0-9,\s-]+)\}/);
   const highlightLines = /* @__PURE__ */ new Set();
   if (rangeMatch) {
     for (const part of rangeMatch[1].split(",")) {
       const range = part.trim().split("-").map(Number);
-      if (range.length === 1 && !isNaN(range[0])) highlightLines.add(range[0]);
-      else if (range.length === 2) for (let i = range[0]; i <= range[1]; i++) highlightLines.add(i);
+      if (range.length === 1 && !Number.isNaN(range[0]))
+        highlightLines.add(range[0]);
+      else if (range.length === 2)
+        for (let i = range[0]; i <= range[1]; i++) highlightLines.add(i);
     }
   }
   return { lang, highlightLines, lineNumbers, title };
@@ -126,7 +128,9 @@ async function createHighlighter() {
   return (code, lang) => {
     const resolved = ALIASES[lang?.toLowerCase()] ?? lang?.toLowerCase();
     if (!resolved || !loaded.has(resolved)) return escapeHtml(code);
-    return unwrapCode(highlighter.codeToHtml(code, { lang: resolved, theme: THEME }));
+    return unwrapCode(
+      highlighter.codeToHtml(code, { lang: resolved, theme: THEME })
+    );
   };
 }
 function renderFence(code, info, highlight) {
@@ -136,7 +140,13 @@ function renderFence(code, info, highlight) {
   }
   const { cleanCode, lineClasses, hasFocus } = extractAnnotations(code);
   const innerHtml = highlight(cleanCode.trimEnd(), lang);
-  const annotated = annotateLines(innerHtml, lineClasses, highlightLines, hasFocus, lineNumbers);
+  const annotated = annotateLines(
+    innerHtml,
+    lineClasses,
+    highlightLines,
+    hasFocus,
+    lineNumbers
+  );
   const hasAnnotations = highlightLines.size > 0 || lineClasses.size > 0;
   const titleHtml = title ? `<div class="code-block-title"><span>${escapeHtml(title)}</span></div>` : "";
   const preClass = [
@@ -150,52 +160,10 @@ function renderFence(code, info, highlight) {
 
 // src/layout.ts
 import { navLink } from "@domphy/app";
+import { themeColor, themeSpacing } from "@domphy/theme";
 import { toolbar, toolbarSpacer } from "@domphy/ui";
 
-// src/routes.ts
-import { readdirSync, statSync } from "fs";
-import { join, posix, relative, sep } from "path";
-var NON_PAGE_DIRS = /* @__PURE__ */ new Set(["snippets", "demos", "node_modules", ".git"]);
-function routeForFile(srcRelativePath) {
-  const posixPath = srcRelativePath.split(sep).join(posix.sep);
-  const withoutExt = posixPath.replace(/\.md$/, "");
-  const segments = withoutExt.split("/");
-  const last = segments[segments.length - 1];
-  if (last === "index") {
-    segments.pop();
-    return segments.length === 0 ? "/" : `/${segments.join("/")}/`;
-  }
-  return `/${segments.join("/")}`;
-}
-function outFileForRoute(route) {
-  if (route === "/") return "index.html";
-  const trimmed = route.replace(/^\/+/, "").replace(/\/+$/, "");
-  return `${trimmed}/index.html`;
-}
-function listMarkdown(dir) {
-  const found = [];
-  for (const name of readdirSync(dir)) {
-    const full = join(dir, name);
-    const stats = statSync(full);
-    if (stats.isDirectory()) {
-      if (NON_PAGE_DIRS.has(name) || name.startsWith(".")) continue;
-      found.push(...listMarkdown(full));
-    } else if (name.endsWith(".md") && name.toLowerCase() !== "readme.md") {
-      found.push(full);
-    }
-  }
-  return found;
-}
-function discoverPages(srcDir) {
-  const files = listMarkdown(srcDir);
-  const pages = files.map((filePath) => {
-    const rel = relative(srcDir, filePath);
-    const route = routeForFile(rel);
-    return { route, outFile: outFileForRoute(route), filePath };
-  });
-  pages.sort((a, b) => a.route.localeCompare(b.route));
-  return pages;
-}
+// src/routes-browser.ts
 function flattenSidebar(items) {
   const out = [];
   for (const item of items) {
@@ -226,6 +194,22 @@ function prevNextForRoute(route, config) {
 }
 
 // src/layout.ts
+var style = (obj) => obj;
+var tc = (tone, color) => themeColor(null, tone, color);
+var ts = (n) => themeSpacing(n);
+var bg = tc("inherit");
+var bgSoft = tc("shift-1");
+var bgMute = tc("shift-2");
+var border = tc("shift-3");
+var textSoft = tc("shift-6");
+var text = tc("shift-9");
+var textStrong = tc("shift-11");
+var brand = tc("shift-9", "primary");
+var brandHover = tc("shift-10", "primary");
+var headerH = ts(14);
+var sidebarW = ts(62);
+var asideW = ts(56);
+var contentMax = ts(190);
 var SOCIAL_LABELS = {
   github: "GitHub",
   twitter: "Twitter",
@@ -239,42 +223,140 @@ var SOCIAL_LABELS = {
 function socialLinkEl(social) {
   const name = social.icon.toLowerCase();
   const isUrl = social.icon.startsWith("http") || social.icon.startsWith("/");
-  const innerEl = isUrl ? { img: null, src: social.icon, alt: social.ariaLabel ?? name, width: "18", height: "18" } : { span: "", class: `dp-social-icon dp-icon-${name}`, ariaHidden: "true" };
+  const innerEl = isUrl ? {
+    img: null,
+    src: social.icon,
+    alt: social.ariaLabel ?? name,
+    width: "18",
+    height: "18"
+  } : (
+    // dp-social-icon dp-icon-* classes drive SVG mask-image in pressCSS
+    {
+      span: "",
+      class: `dp-social-icon dp-icon-${name}`,
+      ariaHidden: "true"
+    }
+  );
   return {
     a: [innerEl],
     href: social.link,
-    class: `dp-social-link dp-social-${name}`,
     ariaLabel: social.ariaLabel ?? SOCIAL_LABELS[name] ?? social.icon,
     target: "_blank",
-    rel: "noopener noreferrer"
+    rel: "noopener noreferrer",
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: ts(8.5),
+      height: ts(8.5),
+      borderRadius: ts(2),
+      color: textSoft,
+      background: bgSoft,
+      border: `1px solid ${border}`,
+      fontSize: "10px",
+      fontWeight: "700",
+      flexShrink: "0",
+      "&:hover": { color: text, borderColor: textSoft, textDecoration: "none" }
+    }
   };
 }
-function pageLink(text2, href, className) {
-  return { a: text2, href, class: className, $: [navLink({ href })] };
+function pageLink(text3, href) {
+  return { a: text3, href, $: [navLink({ href })] };
 }
 function navDropdown(item) {
+  const menuStyle = style({
+    display: "none",
+    position: "absolute",
+    top: `calc(100% + ${ts(2)})`,
+    right: "0",
+    background: bgSoft,
+    border: `1px solid ${border}`,
+    borderRadius: ts(2),
+    padding: ts(1.5),
+    minWidth: ts(40),
+    zIndex: "100",
+    flexDirection: "column",
+    gap: ts(0.5),
+    boxShadow: "0 4px 16px rgba(0,0,0,.1)",
+    "& a": {
+      display: "block",
+      padding: `${ts(1.25)} ${ts(2.5)}`,
+      borderRadius: ts(1.25),
+      fontSize: "13px"
+    },
+    "& a:hover": { background: bgMute }
+  });
   return {
     div: [
-      { span: item.text, class: "dp-nav-dropdown-label" },
-      { div: item.items.map((child) => pageLink(child.text, child.link)), class: "dp-nav-dropdown-menu" }
+      {
+        span: item.text,
+        style: {
+          color: textSoft,
+          fontSize: "14px",
+          fontWeight: "500",
+          cursor: "pointer",
+          userSelect: "none",
+          "&::after": { content: '" \u25BE"', fontSize: "10px", opacity: ".6" }
+        }
+      },
+      {
+        div: item.items.map((child) => pageLink(child.text, child.link)),
+        style: menuStyle
+      }
     ],
-    class: "dp-nav-dropdown"
+    style: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      "&:hover > div:last-child, &:focus-within > div:last-child": {
+        display: "flex"
+      }
+    }
   };
 }
 function announcementBar(config) {
   const bar = config.themeConfig.announcementBar;
   if (!bar) return null;
   const idAttr = bar.id ? bar.id : "";
-  const children = [
-    { span: bar.text, class: "dp-announcement-text" }
-  ];
+  const children = [{ span: bar.text }];
   if (bar.dismissible !== false) {
-    children.push({ button: "\u2715", type: "button", class: "dp-announcement-close", dataDismissAnnouncement: "", ariaLabel: "Dismiss" });
+    children.push({
+      button: "\u2715",
+      type: "button",
+      dataDismissAnnouncement: "",
+      ariaLabel: "Dismiss",
+      style: {
+        background: "none",
+        border: "none",
+        color: bg,
+        cursor: "pointer",
+        fontSize: "14px",
+        opacity: ".7",
+        padding: `${ts(0.5)} ${ts(1.5)}`,
+        borderRadius: ts(1),
+        flexShrink: "0",
+        "&:hover": { opacity: "1" }
+      }
+    });
   }
   return {
     div: children,
     class: "dp-announcement",
-    ...idAttr ? { dataId: idAttr } : {}
+    // kept: JS uses querySelector('.dp-announcement')
+    ...idAttr ? { dataId: idAttr } : {},
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: ts(3),
+      padding: `${ts(2.5)} ${ts(6)}`,
+      background: brand,
+      color: bg,
+      fontSize: "14px",
+      fontWeight: "500",
+      textAlign: "center",
+      "& a": { color: bg, fontWeight: "700" }
+    }
   };
 }
 function localeSwitcher(ctx) {
@@ -296,33 +378,116 @@ function localeSwitcher(ctx) {
   const links = entries.map(([key, locale]) => {
     const prefix = key === "/" ? "" : key.replace(/\/$/, "");
     const href = prefix + (barePath === "/" ? "/" : barePath);
+    const isActive = key === currentKey;
     return {
       a: locale.label,
       href,
-      class: `dp-locale-option${key === currentKey ? " active" : ""}`,
-      ...key === currentKey ? { ariaCurrent: "true" } : {},
-      lang: locale.lang
+      ...isActive ? { ariaCurrent: "true" } : {},
+      lang: locale.lang,
+      style: {
+        display: "block",
+        padding: `${ts(1.25)} ${ts(2.5)}`,
+        borderRadius: ts(1.25),
+        fontSize: "13px",
+        color: textSoft,
+        ...isActive ? { color: brand, fontWeight: "600" } : {},
+        "&:hover": { background: bgMute, color: text, textDecoration: "none" }
+      }
     };
   });
+  const menuStyle = style({
+    display: "none",
+    position: "absolute",
+    top: `calc(100% + ${ts(2)})`,
+    right: "0",
+    background: bgSoft,
+    border: `1px solid ${border}`,
+    borderRadius: ts(2),
+    padding: ts(1.5),
+    minWidth: ts(32),
+    zIndex: "200",
+    flexDirection: "column",
+    gap: ts(0.5),
+    boxShadow: "0 4px 16px rgba(0,0,0,.1)"
+  });
   return {
     div: [
-      { span: ["\u{1F310} ", currentLocale.label], class: "dp-locale-current" },
-      { div: links, class: "dp-locale-menu" }
+      {
+        span: ["\u{1F310} ", currentLocale.label],
+        style: {
+          color: textSoft,
+          fontSize: "13px",
+          fontWeight: "500",
+          cursor: "pointer",
+          userSelect: "none",
+          padding: `${ts(1)} ${ts(2)}`,
+          border: `1px solid ${border}`,
+          borderRadius: ts(1.5),
+          background: bgSoft,
+          whiteSpace: "nowrap",
+          display: "flex",
+          alignItems: "center",
+          gap: ts(1),
+          "&::after": { content: '" \u25BE"', fontSize: "10px", opacity: ".6" }
+        }
+      },
+      { div: links, style: menuStyle }
     ],
-    class: "dp-locale-switcher",
-    ariaLabel: "Select language"
+    ariaLabel: "Select language",
+    style: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      "&:hover > div:last-child, &:focus-within > div:last-child": {
+        display: "flex"
+      }
+    }
   };
 }
 function header(ctx) {
   const { config } = ctx;
   const searchEnabled = config.themeConfig.search !== false;
   const logo = config.themeConfig.logo;
-  const logoInner = logo ? typeof logo === "string" ? [{ img: null, src: logo, alt: config.title, class: "dp-logo-img" }] : [
-    { img: null, src: logo.light, alt: config.title, class: "dp-logo-img dp-logo-light" },
-    { img: null, src: logo.dark, alt: config.title, class: "dp-logo-img dp-logo-dark" }
+  const logoInner = logo ? typeof logo === "string" ? [
+    {
+      img: null,
+      src: logo,
+      alt: config.title,
+      style: { height: ts(7), width: "auto", display: "block" }
+    }
+  ] : [
+    {
+      img: null,
+      src: logo.light,
+      alt: config.title,
+      class: "dp-logo-light",
+      style: { height: ts(7), width: "auto", display: "block" }
+    },
+    {
+      img: null,
+      src: logo.dark,
+      alt: config.title,
+      class: "dp-logo-dark",
+      style: { height: ts(7), width: "auto", display: "block" }
+    }
   ] : [];
-  const logoEl = logo ? { a: logoInner, href: config.base, class: "dp-logo" } : { a: config.title, href: config.base, class: "dp-logo" };
-  const socialEls = (config.themeConfig.socialLinks ?? []).map(socialLinkEl);
+  const logoStyle = {
+    fontWeight: "700",
+    fontSize: "18px",
+    color: textStrong,
+    whiteSpace: "nowrap",
+    flexShrink: "0",
+    textDecoration: "none",
+    "&:hover": { textDecoration: "none" }
+  };
+  const logoEl = logo ? { a: logoInner, href: config.base, style: logoStyle } : {
+    a: config.title,
+    href: config.base,
+    style: logoStyle
+  };
+  const socialEls = (config.themeConfig.socialLinks ?? []).map(
+    socialLinkEl
+  );
   const localeEl = localeSwitcher(ctx);
   return {
     header: [
@@ -330,48 +495,153 @@ function header(ctx) {
       toolbarSpacer(),
       {
         nav: config.themeConfig.nav.map(
-          (item) => item.items ? navDropdown(item) : pageLink(item.text, item.link)
+          (item) => item.items ? navDropdown(
+            item
+          ) : pageLink(item.text, item.link)
         ),
         $: [toolbar({ gap: 4 })],
-        class: "dp-nav",
-        ariaLabel: "Primary"
+        ariaLabel: "Primary",
+        style: {
+          "& a": {
+            color: textSoft,
+            fontSize: "14px",
+            fontWeight: "500",
+            whiteSpace: "nowrap",
+            lineHeight: "1"
+          },
+          "& a:hover, & a[aria-current='page']": {
+            color: brand,
+            textDecoration: "none"
+          },
+          "@media (max-width: 860px)": { display: "none" }
+        }
       },
       {
         div: [
-          ...searchEnabled ? [{
-            div: [{
-              input: null,
-              type: "search",
-              placeholder: typeof config.themeConfig.search === "object" && config.themeConfig.search.placeholder || "Search...",
-              class: "dp-search-static",
-              ariaLabel: "Search documentation"
-            }],
-            dataIsland: "search",
-            class: "dp-search-slot"
-          }] : [],
+          ...searchEnabled ? [
+            {
+              div: [
+                {
+                  input: null,
+                  type: "search",
+                  placeholder: typeof config.themeConfig.search === "object" && config.themeConfig.search.placeholder || "Search...",
+                  ariaLabel: "Search documentation",
+                  style: {
+                    width: "100%",
+                    height: ts(8),
+                    padding: `0 ${ts(2.5)}`,
+                    border: `1px solid ${border}`,
+                    borderRadius: ts(1.5),
+                    background: bgSoft,
+                    color: textSoft,
+                    fontSize: "13px",
+                    fontFamily: "inherit",
+                    outline: "none",
+                    cursor: "pointer",
+                    "&::placeholder": { color: textSoft }
+                  }
+                }
+              ],
+              dataIsland: "search",
+              style: {
+                width: ts(50),
+                "@media (max-width: 860px)": { width: ts(35) }
+              }
+            }
+          ] : [],
           ...socialEls,
           ...localeEl ? [localeEl] : [],
-          { button: "\u25D0", type: "button", class: "dp-theme-toggle", ariaLabel: "Toggle dark mode", dataThemeToggle: "" },
-          { button: "\u2630", type: "button", class: "dp-menu-toggle", ariaLabel: "Toggle menu", dataMenuToggle: "" }
+          {
+            button: "\u25D0",
+            type: "button",
+            ariaLabel: "Toggle dark mode",
+            dataThemeToggle: "",
+            style: {
+              border: `1px solid ${border}`,
+              background: bgSoft,
+              color: text,
+              borderRadius: ts(2),
+              width: ts(8.5),
+              height: ts(8.5),
+              cursor: "pointer",
+              fontSize: "16px",
+              flexShrink: "0"
+            }
+          },
+          {
+            button: "\u2630",
+            type: "button",
+            ariaLabel: "Toggle menu",
+            dataMenuToggle: "",
+            style: {
+              border: `1px solid ${border}`,
+              background: bgSoft,
+              color: text,
+              borderRadius: ts(2),
+              width: ts(8.5),
+              height: ts(8.5),
+              cursor: "pointer",
+              fontSize: "16px",
+              flexShrink: "0",
+              display: "none",
+              "@media (max-width: 860px)": { display: "block" }
+            }
+          }
         ],
         $: [toolbar({ gap: 2 })],
-        class: "dp-header-actions"
+        style: { flexShrink: "0" }
       }
     ],
     $: [toolbar({ gap: 4 })],
-    class: "dp-header"
+    style: {
+      position: "sticky",
+      top: "0",
+      height: headerH,
+      background: bg,
+      borderBottom: `1px solid ${border}`,
+      zIndex: "100",
+      padding: `0 ${ts(6)}`,
+      "@media (max-width: 860px)": { padding: `0 ${ts(3)}` }
+    }
   };
 }
-function sidebarBadge(badge) {
-  return { span: badge.text, class: `dp-badge dp-badge-${badge.type ?? "tip"}` };
+function badgeEl(badge) {
+  const colorMap = {
+    tip: brand,
+    info: textSoft,
+    warning: tc("shift-9", "warning"),
+    danger: tc("shift-9", "danger")
+  };
+  const bgMap = {
+    tip: `color-mix(in srgb,${brand} 12%,${bg})`,
+    info: bgMute,
+    warning: `color-mix(in srgb,${tc("shift-9", "warning")} 12%,${bg})`,
+    danger: `color-mix(in srgb,${tc("shift-9", "danger")} 12%,${bg})`
+  };
+  const type = badge.type ?? "tip";
+  return {
+    span: badge.text,
+    style: {
+      display: "inline-block",
+      padding: `${ts(0.5)} ${ts(1.75)}`,
+      borderRadius: ts(2.5),
+      fontSize: "11px",
+      fontWeight: "700",
+      lineHeight: "1.4",
+      whiteSpace: "nowrap",
+      verticalAlign: "middle",
+      background: bgMap[type] ?? bgMute,
+      color: colorMap[type] ?? textSoft
+    }
+  };
 }
-function pageLinkWithBadge(text2, href, badge) {
-  if (!badge) return pageLink(text2, href);
+function pageLinkWithBadge(text3, href, badge) {
+  if (!badge) return pageLink(text3, href);
   return {
-    a: [{ span: text2 }, sidebarBadge(badge)],
+    a: [{ span: text3 }, badgeEl(badge)],
     href,
     $: [navLink({ href })],
-    class: "dp-sidebar-link-with-badge"
+    style: { display: "flex", alignItems: "center" }
   };
 }
 function sidebarGroup(group) {
@@ -383,63 +653,215 @@ function sidebarGroup(group) {
     const titleChildren = [
       { span: group.text }
     ];
-    if (group.badge) titleChildren.push(sidebarBadge(group.badge));
+    if (group.badge) titleChildren.push(badgeEl(group.badge));
     if (isCollapsible) {
       titleChildren.push({
         button: group.collapsed ? "\u203A" : "\u2039",
         type: "button",
-        class: "dp-sidebar-toggle",
         ariaLabel: group.collapsed ? "Expand" : "Collapse",
-        dataSidebarToggle: ""
+        dataSidebarToggle: "",
+        style: {
+          marginLeft: "auto",
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          color: textSoft,
+          fontSize: "14px",
+          padding: `0 ${ts(1)}`,
+          lineHeight: "1",
+          "&:hover": { color: text }
+        }
       });
     }
-    children.push({ div: titleChildren, class: "dp-sidebar-title" });
+    children.push({
+      div: titleChildren,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: ts(1.5),
+        fontSize: "13px",
+        fontWeight: "700",
+        color: textStrong,
+        margin: `${ts(2)} 0 ${ts(1)}`
+      }
+    });
   }
   if (group.items) {
     const itemsEl = [];
     for (const item of group.items) {
       if (item.items) {
-        itemsEl.push({ div: item.text, class: "dp-sidebar-subtitle" });
+        itemsEl.push({
+          div: item.text,
+          style: {
+            fontSize: "12px",
+            color: textSoft,
+            padding: `${ts(1)} ${ts(3)}`,
+            fontWeight: "600"
+          }
+        });
         for (const leaf of item.items) {
-          if (leaf.link) itemsEl.push(pageLinkWithBadge(leaf.text, leaf.link, leaf.badge));
+          if (leaf.link)
+            itemsEl.push(pageLinkWithBadge(leaf.text, leaf.link, leaf.badge));
         }
       } else if (item.link) {
         itemsEl.push(pageLinkWithBadge(item.text, item.link, item.badge));
       }
     }
-    children.push({ div: itemsEl, class: "dp-sidebar-items" });
+    children.push({
+      div: itemsEl,
+      class: "dp-sidebar-items",
+      style: { display: "flex", flexDirection: "column" }
+    });
   }
-  const groupClass = ["dp-sidebar-group", isCollapsible && group.collapsed ? "collapsed" : ""].filter(Boolean).join(" ");
-  return { div: children, class: groupClass };
+  const groupClass = [
+    "dp-sidebar-group",
+    isCollapsible && group.collapsed ? "collapsed" : ""
+  ].filter(Boolean).join(" ");
+  return {
+    div: children,
+    class: groupClass,
+    style: { marginBottom: ts(3.5) }
+  };
 }
 function sidebar(ctx) {
   const groups = sidebarForRoute(ctx.route, ctx.config);
-  return { nav: groups.map(sidebarGroup), class: "dp-sidebar", ariaLabel: "Documentation" };
+  return {
+    nav: groups.map(sidebarGroup),
+    ariaLabel: "Documentation",
+    // used as stable selector in pressCSS mobile-open rule
+    style: {
+      position: "sticky",
+      top: headerH,
+      maxHeight: `calc(100vh - ${headerH})`,
+      overflowY: "auto",
+      padding: `${ts(6)} ${ts(3)} ${ts(12)} ${ts(6)}`,
+      borderRight: `1px solid ${border}`,
+      "& a": {
+        display: "flex",
+        alignItems: "center",
+        gap: ts(1.5),
+        padding: `${ts(1.25)} ${ts(3)}`,
+        fontSize: "14px",
+        color: textSoft,
+        borderRadius: ts(1.5)
+      },
+      "& a:hover": { color: text, textDecoration: "none" },
+      "& a[aria-current='page']": {
+        color: brand,
+        fontWeight: "600",
+        background: bgSoft
+      },
+      "@media (max-width: 860px)": {
+        position: "fixed",
+        top: headerH,
+        left: "0",
+        bottom: "0",
+        width: "80%",
+        maxWidth: ts(80),
+        background: bg,
+        zIndex: "25",
+        transform: "translateX(-100%)",
+        transition: "transform .2s ease",
+        maxHeight: "none"
+      }
+    }
+  };
 }
 function tocAside(ctx) {
   if (ctx.frontmatter.aside === false) return null;
   const [minLevel, maxLevel] = ctx.config.themeConfig.outline?.level ?? [2, 3];
-  const entries = ctx.toc.filter((e) => e.level >= minLevel && e.level <= maxLevel);
+  const entries = ctx.toc.filter(
+    (e) => e.level >= minLevel && e.level <= maxLevel
+  );
   if (entries.length === 0) return null;
   const tocTitle = ctx.config.themeConfig.tocTitle ?? "On this page";
+  const indentMap = { 2: "0", 3: ts(3), 4: ts(6) };
   return {
     aside: [
-      { div: tocTitle, class: "dp-aside-title" },
-      { nav: entries.map((e) => ({ a: e.text, href: `#${e.slug}`, class: `dp-toc-${e.level}` })), class: "dp-toc" }
+      {
+        div: tocTitle,
+        style: { fontWeight: "700", marginBottom: ts(2), color: text }
+      },
+      {
+        nav: entries.map((e) => ({
+          a: e.text,
+          href: `#${e.slug}`,
+          style: {
+            display: "block",
+            padding: `${ts(0.75)} 0`,
+            color: textSoft,
+            paddingLeft: indentMap[e.level] ?? "0",
+            "&:hover": { color: brand, textDecoration: "none" }
+          }
+        }))
+      }
     ],
-    class: "dp-aside"
+    style: {
+      position: "sticky",
+      top: headerH,
+      maxHeight: `calc(100vh - ${headerH})`,
+      overflowY: "auto",
+      padding: `${ts(8)} ${ts(6)}`,
+      fontSize: "13px"
+    }
   };
 }
 function prevNext(ctx) {
   const { prev, next } = prevNextForRoute(ctx.route, ctx.config);
   if (!prev && !next) return null;
+  const linkStyle = style({
+    display: "block",
+    padding: `${ts(3)} ${ts(4)}`,
+    border: `1px solid ${border}`,
+    borderRadius: ts(2),
+    fontWeight: "600",
+    flex: "1",
+    "&:hover": { borderColor: brand, textDecoration: "none" }
+  });
   return {
     nav: [
-      prev ? { a: [{ small: "Previous" }, { span: prev.text }], href: prev.link, class: "prev" } : { span: "" },
-      next ? { a: [{ small: "Next" }, { span: next.text }], href: next.link, class: "next" } : { span: "" }
+      prev ? {
+        a: [
+          {
+            small: "Previous",
+            style: {
+              display: "block",
+              color: textSoft,
+              fontWeight: "400",
+              fontSize: "12px"
+            }
+          },
+          { span: prev.text }
+        ],
+        href: prev.link,
+        style: linkStyle
+      } : { span: "" },
+      next ? {
+        a: [
+          {
+            small: "Next",
+            style: {
+              display: "block",
+              color: textSoft,
+              fontWeight: "400",
+              fontSize: "12px"
+            }
+          },
+          { span: next.text }
+        ],
+        href: next.link,
+        style: { ...linkStyle, textAlign: "right" }
+      } : { span: "" }
     ],
-    class: "dp-prevnext",
-    ariaLabel: "Page navigation"
+    ariaLabel: "Page navigation",
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      gap: ts(4),
+      marginTop: ts(12),
+      paddingTop: ts(6),
+      borderTop: `1px solid ${border}`
+    }
   };
 }
 function docFooter(ctx) {
@@ -451,82 +873,361 @@ function docFooter(ctx) {
   const children = [];
   if (hasDate) {
     const date = new Date(ctx.lastUpdated);
-    const formatted = date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });
-    children.push({ span: [`Last updated: `, { time: formatted, dateTime: ctx.lastUpdated, class: "dp-last-updated-date" }], class: "dp-last-updated" });
+    const formatted = date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    });
+    children.push({
+      span: [`Last updated: `, { time: formatted, dateTime: ctx.lastUpdated }]
+    });
   }
   if (ctx.readingTime) {
-    children.push({ span: `${ctx.readingTime} min read`, class: "dp-reading-time" });
+    children.push({ span: `\u{1F4D6} ${ctx.readingTime} min read` });
   }
   if (hasEdit) {
     const pattern = editLink.pattern;
     const href = pattern.replace(/:path/g, ctx.filePath);
-    children.push({ a: editLink.text ?? "Edit this page", href, class: "dp-edit-link", target: "_blank", rel: "noopener noreferrer" });
+    children.push({
+      a: editLink.text ?? "Edit this page",
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: { fontWeight: "500", fontSize: "13px" }
+    });
   }
-  return { div: children, class: "dp-doc-footer" };
+  return {
+    div: children,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: ts(4),
+      flexWrap: "wrap",
+      marginTop: ts(8),
+      paddingTop: ts(5),
+      borderTop: `1px solid ${border}`,
+      fontSize: "13px",
+      color: textSoft
+    }
+  };
 }
 function pageBadge(frontmatter) {
   const badge = frontmatter.badge;
   if (!badge) return null;
-  const text2 = typeof badge === "string" ? badge : badge.text ?? "";
+  const text22 = typeof badge === "string" ? badge : badge.text ?? "";
   const type = typeof badge === "object" ? badge.type ?? "tip" : "tip";
-  if (!text2) return null;
-  return { span: text2, class: `dp-badge dp-badge-${type} dp-page-badge` };
+  if (!text22) return null;
+  return badgeEl({
+    text: text22,
+    type
+  });
 }
 function resolveSlot(ctx, key, fallback) {
   const override = ctx.config.themeConfig.slots?.[key];
   return override ? override(ctx) : fallback(ctx);
 }
+function contentDiv(body) {
+  return {
+    div: body,
+    style: {
+      maxWidth: contentMax,
+      "& h1": {
+        fontSize: "30px",
+        fontWeight: "700",
+        lineHeight: "1.25",
+        margin: `0 0 ${ts(6)}`,
+        letterSpacing: "-.02em",
+        color: textStrong
+      },
+      "& h2": {
+        fontSize: "22px",
+        fontWeight: "700",
+        margin: `${ts(11)} 0 ${ts(4)}`,
+        paddingTop: ts(5),
+        borderTop: `1px solid ${border}`,
+        letterSpacing: "-.01em",
+        color: textStrong
+      },
+      "& h3": {
+        fontSize: "18px",
+        fontWeight: "600",
+        margin: `${ts(7)} 0 ${ts(3)}`,
+        color: textStrong
+      },
+      "& h4": {
+        fontSize: "16px",
+        fontWeight: "600",
+        margin: `${ts(5.5)} 0 ${ts(2)}`,
+        color: textStrong
+      },
+      "& p": { margin: `${ts(4)} 0` },
+      "& ul, & ol": { margin: `${ts(4)} 0`, paddingLeft: "1.4em" },
+      "& li": { margin: `${ts(1.5)} 0` },
+      "& a": { fontWeight: "500" },
+      "& a[target='_blank']::after": {
+        content: '" \u2197"',
+        fontSize: ".75em",
+        opacity: ".6"
+      },
+      "& strong": { fontWeight: "600", color: textStrong },
+      "& em": { fontStyle: "italic" },
+      "& mark": {
+        background: `color-mix(in srgb,${tc("shift-6", "warning")} 40%,${bg})`,
+        color: "inherit",
+        padding: `${ts(0.25)} ${ts(0.75)}`,
+        borderRadius: ts(0.75)
+      },
+      "& sup": { fontSize: ".75em", verticalAlign: "super" },
+      "& sub": { fontSize: ".75em", verticalAlign: "sub" },
+      "& del": { opacity: ".5" },
+      "& blockquote": {
+        margin: `${ts(4)} 0`,
+        padding: `0 ${ts(4)}`,
+        borderLeft: `3px solid ${border}`,
+        color: textSoft
+      },
+      "& img": { maxWidth: "100%", height: "auto", borderRadius: ts(1.5) },
+      "& hr": {
+        border: "none",
+        borderTop: `1px solid ${border}`,
+        margin: `${ts(8)} 0`
+      },
+      "& :not(pre)>code": {
+        fontFamily: `ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace`,
+        fontSize: ".85em",
+        background: bgMute,
+        padding: `${ts(0.75)} ${ts(1.5)}`,
+        borderRadius: ts(1)
+      },
+      "& pre": {
+        margin: `${ts(4)} 0`,
+        padding: `${ts(4)} ${ts(5)}`,
+        background: bgSoft,
+        border: `1px solid ${border}`,
+        borderRadius: ts(2),
+        overflowX: "auto",
+        fontSize: "13.5px",
+        lineHeight: "1.5"
+      },
+      "& pre code": {
+        fontFamily: `ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace`,
+        background: "none",
+        padding: "0"
+      },
+      "& table": {
+        borderCollapse: "collapse",
+        margin: `${ts(4)} 0`,
+        display: "block",
+        overflowX: "auto"
+      },
+      "& th, & td": {
+        border: `1px solid ${border}`,
+        padding: `${ts(2)} ${ts(3.5)}`,
+        textAlign: "left"
+      },
+      "& th": { background: bgSoft, fontWeight: "600" }
+    }
+  };
+}
 function pageShell(ctx) {
-  const slots = ctx.config.themeConfig.slots;
   const showSidebar = ctx.frontmatter.sidebar !== false;
   const main = [];
   const badge = pageBadge(ctx.frontmatter);
-  if (badge) main.push({ div: [badge], class: "dp-page-badge-row" });
-  main.push({ div: ctx.body, class: "dp-content" });
+  if (badge)
+    main.push({
+      div: [badge],
+      style: { marginBottom: ts(-2) }
+    });
+  main.push(contentDiv(ctx.body));
   const pn = resolveSlot(ctx, "prevNext", prevNext);
   if (pn) main.push(pn);
   const docFooterEl = resolveSlot(ctx, "docFooter", docFooter);
   if (docFooterEl) main.push(docFooterEl);
   const sidebarEl = showSidebar ? resolveSlot(ctx, "sidebar", sidebar) : null;
+  const mainStyle = showSidebar ? {
+    padding: `${ts(8)} ${ts(12)} ${ts(20)}`,
+    minWidth: "0",
+    "@media (max-width: 860px)": { padding: `${ts(6)} ${ts(5)} ${ts(16)}` }
+  } : {
+    padding: `${ts(8)} ${ts(12)} ${ts(20)}`,
+    gridColumn: "1 / -1",
+    maxWidth: contentMax,
+    margin: "0 auto",
+    "@media (max-width: 860px)": { padding: `${ts(6)} ${ts(5)} ${ts(16)}` }
+  };
   const shellChildren = [
     ...sidebarEl ? [sidebarEl] : [],
-    { main, class: `dp-main${showSidebar ? "" : " dp-main-full"}` }
+    { main, style: mainStyle }
   ];
   const asideEl = resolveSlot(ctx, "aside", tocAside);
   if (asideEl && showSidebar) shellChildren.push(asideEl);
   const headerEl = resolveSlot(ctx, "header", header);
   const bar = announcementBar(ctx.config);
-  const footerContent = slots?.footer ? slots.footer(ctx) : { footer: ctx.config.themeConfig.footerMessage ?? "", class: "dp-footer" };
+  const slots = ctx.config.themeConfig.slots;
+  const footerContent = slots?.footer ? slots.footer(ctx) : {
+    footer: ctx.config.themeConfig.footerMessage ?? "",
+    style: {
+      padding: `${ts(6)} ${ts(12)}`,
+      borderTop: `1px solid ${border}`,
+      color: textSoft,
+      fontSize: "13px"
+    }
+  };
   return {
     div: [
       ...bar ? [bar] : [],
       ...headerEl ? [headerEl] : [],
-      { div: shellChildren, class: "dp-shell" },
+      {
+        div: shellChildren,
+        style: {
+          display: "grid",
+          gridTemplateColumns: showSidebar ? `${sidebarW} minmax(0,1fr) ${asideW}` : "1fr",
+          alignItems: "start",
+          maxWidth: "1440px",
+          margin: "0 auto",
+          "@media (max-width: 1200px)": showSidebar ? { gridTemplateColumns: `${sidebarW} minmax(0,1fr)` } : {},
+          "@media (max-width: 860px)": { gridTemplateColumns: "1fr" }
+        }
+      },
       ...footerContent ? [footerContent] : []
     ]
   };
 }
 function heroSection(hero) {
   const children = [];
-  if (hero.name) children.push({ div: hero.name, class: "dp-hero-name" });
-  if (hero.text) children.push({ h1: hero.text, class: "dp-hero-text" });
-  if (hero.tagline) children.push({ p: hero.tagline, class: "dp-hero-tagline" });
+  if (hero.name)
+    children.push({
+      div: hero.name,
+      style: {
+        fontSize: "56px",
+        fontWeight: "800",
+        lineHeight: "1.1",
+        letterSpacing: "-.03em",
+        background: `linear-gradient(120deg,${brand},${tc("shift-7", "secondary")})`,
+        WebkitBackgroundClip: "text",
+        backgroundClip: "text",
+        color: "transparent"
+      }
+    });
+  if (hero.text)
+    children.push({
+      h1: hero.text,
+      style: {
+        fontSize: "30px",
+        fontWeight: "700",
+        margin: `${ts(3)} 0 0`,
+        color: textStrong
+      }
+    });
+  if (hero.tagline)
+    children.push({
+      p: hero.tagline,
+      style: {
+        fontSize: "18px",
+        color: textSoft,
+        maxWidth: ts(160),
+        margin: `${ts(5)} auto 0`
+      }
+    });
   if (hero.actions?.length) {
-    children.push({ div: hero.actions.map((a) => ({ a: a.text, href: a.link, class: `dp-hero-action ${a.theme ?? "brand"}` })), class: "dp-hero-actions" });
+    const actionStyle = (theme) => {
+      if (!theme || theme === "brand")
+        return {
+          padding: `${ts(2.5)} ${ts(5.5)}`,
+          borderRadius: ts(5.5),
+          fontWeight: "600",
+          fontSize: "15px",
+          background: brand,
+          color: bg,
+          "&:hover": { background: brandHover, textDecoration: "none" }
+        };
+      return {
+        padding: `${ts(2.5)} ${ts(5.5)}`,
+        borderRadius: ts(5.5),
+        fontWeight: "600",
+        fontSize: "15px",
+        background: bgSoft,
+        color: text,
+        border: `1px solid ${border}`,
+        "&:hover": { borderColor: brand, textDecoration: "none" }
+      };
+    };
+    children.push({
+      div: hero.actions.map(
+        (a) => ({
+          a: a.text,
+          href: a.link,
+          style: actionStyle(a.theme)
+        })
+      ),
+      style: {
+        display: "flex",
+        gap: ts(3),
+        justifyContent: "center",
+        marginTop: ts(7),
+        flexWrap: "wrap"
+      }
+    });
   }
-  return { section: children, class: "dp-hero" };
+  return {
+    section: children,
+    style: { textAlign: "center", padding: `${ts(10)} 0 ${ts(6)}` }
+  };
 }
 function featuresSection(features) {
   return {
     div: features.map((f) => {
       const inner = [];
-      if (f.icon) inner.push({ div: f.icon, class: "dp-feature-icon" });
-      inner.push({ div: f.title, class: "dp-feature-title" });
-      inner.push({ p: f.details, class: "dp-feature-details" });
-      const el = { div: inner, class: "dp-feature" };
-      return f.link ? { a: [el], href: f.link, class: "dp-feature-link" } : el;
+      if (f.icon)
+        inner.push({
+          div: f.icon,
+          style: { fontSize: "28px", marginBottom: ts(3) }
+        });
+      inner.push({
+        div: f.title,
+        style: {
+          fontWeight: "700",
+          fontSize: "17px",
+          marginBottom: ts(2),
+          color: textStrong
+        }
+      });
+      inner.push({
+        p: f.details,
+        style: {
+          fontSize: "14px",
+          color: textSoft,
+          margin: "0",
+          lineHeight: "1.5"
+        }
+      });
+      const featureStyle = {
+        padding: ts(5),
+        background: bgSoft,
+        border: `1px solid ${border}`,
+        borderRadius: ts(3)
+      };
+      const el = {
+        div: inner,
+        style: featureStyle
+      };
+      return f.link ? {
+        a: [el],
+        href: f.link,
+        style: {
+          display: "block",
+          color: "inherit",
+          "&:hover": { textDecoration: "none" },
+          "&:hover > div": { borderColor: brand }
+        }
+      } : el;
     }),
-    class: "dp-features"
+    style: {
+      display: "grid",
+      gridTemplateColumns: `repeat(auto-fit,minmax(${ts(60)},1fr))`,
+      gap: ts(4),
+      margin: `${ts(10)} 0`
+    }
   };
 }
 function homeShell(ctx) {
@@ -535,14 +1236,29 @@ function homeShell(ctx) {
   const features = ctx.frontmatter.features;
   if (hero) main.push(heroSection(hero));
   if (features?.length) main.push(featuresSection(features));
-  main.push({ div: ctx.body, class: "dp-content dp-home" });
+  main.push(contentDiv(ctx.body));
   const bar = announcementBar(ctx.config);
   return {
     div: [
       ...bar ? [bar] : [],
       header(ctx),
-      { main, class: "dp-main dp-main-home" },
-      { footer: ctx.config.themeConfig.footerMessage ?? "", class: "dp-footer" }
+      {
+        main,
+        style: {
+          maxWidth: "1100px",
+          margin: "0 auto",
+          padding: `${ts(12)} ${ts(6)} ${ts(20)}`
+        }
+      },
+      {
+        footer: ctx.config.themeConfig.footerMessage ?? "",
+        style: {
+          padding: `${ts(6)} ${ts(12)}`,
+          borderTop: `1px solid ${border}`,
+          color: textSoft,
+          fontSize: "13px"
+        }
+      }
     ]
   };
 }
@@ -550,14 +1266,17 @@ function homeShell(ctx) {
 // src/pipeline.ts
 import { readFileSync } from "fs";
 import { dirname, extname, isAbsolute, resolve } from "path";
-import { splitFrontmatter, tokensToDomphy } from "@domphy/markdown";
+import {
+  splitFrontmatter,
+  tokensToDomphy
+} from "@domphy/markdown";
 import MarkdownIt from "markdown-it";
 import container from "markdown-it-container";
+import emojiPkg from "markdown-it-emoji";
+import includeUntyped from "markdown-it-include";
 import markUntyped from "markdown-it-mark";
 import subUntyped from "markdown-it-sub";
 import supUntyped from "markdown-it-sup";
-import includeUntyped from "markdown-it-include";
-import emojiPkg from "markdown-it-emoji";
 var include = includeUntyped;
 var markPlugin = markUntyped;
 var subPlugin = subUntyped;
@@ -591,19 +1310,22 @@ function resolveSpecifier(spec, fileDir, docsDir) {
   return resolve(fileDir, spec);
 }
 function expandCodeImports(body, fileDir, docsDir) {
-  return body.replace(CODE_IMPORT_PATTERN, (_whole, rawPath, label) => {
-    const absolute = resolveSpecifier(rawPath, fileDir, docsDir);
-    const fence = "```";
-    let contents;
-    try {
-      contents = readFileSync(absolute, "utf8");
-    } catch {
-      return [fence, `Could not import: ${rawPath}`, fence].join("\n");
+  return body.replace(
+    CODE_IMPORT_PATTERN,
+    (_whole, rawPath, label) => {
+      const absolute = resolveSpecifier(rawPath, fileDir, docsDir);
+      const fence = "```";
+      let contents;
+      try {
+        contents = readFileSync(absolute, "utf8");
+      } catch {
+        return [fence, `Could not import: ${rawPath}`, fence].join("\n");
+      }
+      const language = EXT_LANG[extname(absolute).toLowerCase()] ?? "";
+      const info = label ? `${language} [${label}]` : language;
+      return [fence + info, contents.trimEnd(), fence].join("\n");
     }
-    const language = EXT_LANG[extname(absolute).toLowerCase()] ?? "";
-    const info = label ? `${language} [${label}]` : language;
-    return [fence + info, contents.trimEnd(), fence].join("\n");
-  });
+  );
 }
 function stripScriptBlocks(source) {
   return source.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "").replace(/^\s*\n/, "");
@@ -632,9 +1354,9 @@ function buildTitleTokens(Token, tag, openType, closeType, className, title) {
   const inline = new Token("inline", "", 0);
   inline.content = title;
   inline.children = [];
-  const text2 = new Token("text", "", 0);
-  text2.content = title;
-  inline.children.push(text2);
+  const text3 = new Token("text", "", 0);
+  text3.content = title;
+  inline.children.push(text3);
   const close = new Token(closeType, tag, -1);
   close.block = true;
   return [open, inline, close];
@@ -658,7 +1380,10 @@ function buildCodeGroupTokens(Token, tokens, openIndex, closeIndex, groupId) {
     const info = (token.info ?? "").trim();
     const labelMatch = info.match(/\[([^\]]+)\]/);
     const language = info.split(/\s+/, 1)[0] ?? "";
-    fences.push({ token, label: labelMatch ? labelMatch[1] : language || "Code" });
+    fences.push({
+      token,
+      label: labelMatch ? labelMatch[1] : language || "Code"
+    });
   }
   if (fences.length === 0) return tokens.slice(openIndex, closeIndex + 1);
   const inputsHtml = fences.map(
@@ -685,7 +1410,9 @@ function shapeContainers(tokens) {
   let groupCounter = 0;
   const ALL_ADMONITIONS = Object.keys(ADMONITION_TITLES).join("|");
   const admonitionRe = new RegExp(`^container_(${ALL_ADMONITIONS})_open$`);
-  const admonitionCloseRe = new RegExp(`^container_(${ALL_ADMONITIONS})_close$`);
+  const admonitionCloseRe = new RegExp(
+    `^container_(${ALL_ADMONITIONS})_close$`
+  );
   for (let i = 0; i < tokens.length; i++) {
     const token = tokens[i];
     const admonition = token.type.match(admonitionRe);
@@ -695,7 +1422,16 @@ function shapeContainers(tokens) {
       token.attrSet("class", `custom-block ${type}`);
       const custom = containerTitle(token.info.trim(), type);
       output.push(token);
-      output.push(...buildTitleTokens(Token, "p", "paragraph_open", "paragraph_close", "custom-block-title", custom || ADMONITION_TITLES[type] || type.toUpperCase()));
+      output.push(
+        ...buildTitleTokens(
+          Token,
+          "p",
+          "paragraph_open",
+          "paragraph_close",
+          "custom-block-title",
+          custom || ADMONITION_TITLES[type] || type.toUpperCase()
+        )
+      );
       continue;
     }
     if (admonitionCloseRe.test(token.type)) {
@@ -707,7 +1443,16 @@ function shapeContainers(tokens) {
       token.tag = "details";
       token.attrSet("class", "custom-block details");
       output.push(token);
-      output.push(...buildTitleTokens(Token, "summary", "summary_open", "summary_close", null, containerTitle(token.info.trim(), "details") || "Details"));
+      output.push(
+        ...buildTitleTokens(
+          Token,
+          "summary",
+          "summary_open",
+          "summary_close",
+          null,
+          containerTitle(token.info.trim(), "details") || "Details"
+        )
+      );
       continue;
     }
     if (token.type === "container_details_close") {
@@ -742,7 +1487,17 @@ function shapeContainers(tokens) {
       token.attrSet("class", "custom-block card");
       const title = containerTitle(token.info.trim(), "card");
       output.push(token);
-      if (title) output.push(...buildTitleTokens(Token, "p", "paragraph_open", "paragraph_close", "card-title", title));
+      if (title)
+        output.push(
+          ...buildTitleTokens(
+            Token,
+            "p",
+            "paragraph_open",
+            "paragraph_close",
+            "card-title",
+            title
+          )
+        );
       continue;
     }
     if (token.type === "container_card_close") {
@@ -759,7 +1514,17 @@ function shapeContainers(tokens) {
       token.attrSet("class", "custom-block link-card");
       token.attrSet("href", href);
       output.push(token);
-      if (title) output.push(...buildTitleTokens(Token, "p", "paragraph_open", "paragraph_close", "link-card-title", title));
+      if (title)
+        output.push(
+          ...buildTitleTokens(
+            Token,
+            "p",
+            "paragraph_open",
+            "paragraph_close",
+            "link-card-title",
+            title
+          )
+        );
       continue;
     }
     if (token.type === "container_link-card_close") {
@@ -783,7 +1548,9 @@ function shapeContainers(tokens) {
         output.push(token);
         continue;
       }
-      output.push(...buildCodeGroupTokens(Token, tokens, i, closeIndex, groupCounter++));
+      output.push(
+        ...buildCodeGroupTokens(Token, tokens, i, closeIndex, groupCounter++)
+      );
       i = closeIndex;
       continue;
     }
@@ -801,13 +1568,16 @@ function shapeTaskLists(tokens) {
     if (prev?.type !== "list_item_open") continue;
     const firstChild = token.children[0];
     if (firstChild.type !== "text") continue;
-    const text2 = firstChild.content;
-    const isTask = text2.startsWith("[ ] ") || text2.startsWith("[x] ") || text2.startsWith("[X] ");
+    const text3 = firstChild.content;
+    const isTask = text3.startsWith("[ ] ") || text3.startsWith("[x] ") || text3.startsWith("[X] ");
     if (!isTask) continue;
-    const checked = text2[1].toLowerCase() === "x";
-    firstChild.content = text2.slice(4);
+    const checked = text3[1].toLowerCase() === "x";
+    firstChild.content = text3.slice(4);
     token.content = token.content.replace(/^\[[ xX]\] /, "");
-    prev.attrSet("class", ((prev.attrGet("class") ?? "") + " task-list-item").trim());
+    prev.attrSet(
+      "class",
+      `${prev.attrGet("class") ?? ""} task-list-item`.trim()
+    );
     const checkToken = new Token("html_inline", "", 0);
     checkToken.content = `<input type="checkbox"${checked ? " checked" : ""} disabled class="task-list-check" aria-label="${checked ? "done" : "todo"}">`;
     token.children.unshift(checkToken);
@@ -824,7 +1594,15 @@ function createParser(docsDir, highlight) {
   md.use(emojiPlugin);
   const noopRender = () => "";
   const ADMONITION_NAMES = Object.keys(ADMONITION_TITLES);
-  for (const name of [...ADMONITION_NAMES, "details", "code-group", "steps", "card", "card-grid", "link-card"]) {
+  for (const name of [
+    ...ADMONITION_NAMES,
+    "details",
+    "code-group",
+    "steps",
+    "card",
+    "card-grid",
+    "link-card"
+  ]) {
     md.use(container, name, { render: noopRender });
   }
   md.core.ruler.push("press_containers", (state) => {
@@ -890,12 +1668,22 @@ function injectHeadingAnchors(elements) {
     if (tag && typeof rec.id === "string") {
       const id = rec.id;
       const children = Array.isArray(rec[tag]) ? [...rec[tag]] : rec[tag] != null ? [rec[tag]] : [];
-      children.push({ a: "#", href: `#${id}`, class: "header-anchor", ariaHidden: "true" });
+      children.push({
+        a: "#",
+        href: `#${id}`,
+        class: "header-anchor",
+        ariaHidden: "true"
+      });
       return { ...rec, [tag]: children };
     }
-    const tag2 = Object.keys(rec).find((k) => /^[a-z][a-z0-9]*$/.test(k) && k !== "style" && k !== "class" && !k.startsWith("data") && !k.startsWith("on") && !k.startsWith("aria") && !k.startsWith("_") && k !== "$" && k !== "href" && k !== "src" && k !== "id" && k !== "type" && k !== "name");
+    const tag2 = Object.keys(rec).find(
+      (k) => /^[a-z][a-z0-9]*$/.test(k) && k !== "style" && k !== "class" && !k.startsWith("data") && !k.startsWith("on") && !k.startsWith("aria") && !k.startsWith("_") && k !== "$" && k !== "href" && k !== "src" && k !== "id" && k !== "type" && k !== "name"
+    );
     if (tag2 && Array.isArray(rec[tag2])) {
-      return { ...rec, [tag2]: injectHeadingAnchors(rec[tag2]) };
+      return {
+        ...rec,
+        [tag2]: injectHeadingAnchors(rec[tag2])
+      };
     }
     return el;
   });
@@ -915,29 +1703,80 @@ async function renderDoc(source, options) {
   return { frontmatter, body: withAnchors, toc, islands: [], title };
 }
 
+// src/routes.ts
+import { readdirSync, statSync } from "fs";
+import { join, relative } from "path";
+function listMarkdown(dir) {
+  const found = [];
+  for (const name of readdirSync(dir)) {
+    const full = join(dir, name);
+    const stats = statSync(full);
+    if (stats.isDirectory()) {
+      const NON_PAGE_DIRS = /* @__PURE__ */ new Set([
+        "snippets",
+        "demos",
+        "node_modules",
+        ".git"
+      ]);
+      if (NON_PAGE_DIRS.has(name) || name.startsWith(".")) continue;
+      found.push(...listMarkdown(full));
+    } else if (name.endsWith(".md") && name.toLowerCase() !== "readme.md") {
+      found.push(full);
+    }
+  }
+  return found;
+}
+function routeForFile(srcRelativePath) {
+  const posixPath = srcRelativePath.replace(/\\/g, "/");
+  const withoutExt = posixPath.replace(/\.md$/, "");
+  const segments = withoutExt.split("/");
+  const last = segments[segments.length - 1];
+  if (last === "index") {
+    segments.pop();
+    return segments.length === 0 ? "/" : `/${segments.join("/")}/`;
+  }
+  return `/${segments.join("/")}`;
+}
+function outFileForRoute(route) {
+  if (route === "/") return "index.html";
+  const trimmed = route.replace(/^\/+/, "").replace(/\/+$/, "");
+  return `${trimmed}/index.html`;
+}
+function discoverPages(srcDir) {
+  const files = listMarkdown(srcDir);
+  const pages = files.map((filePath) => {
+    const rel = relative(srcDir, filePath);
+    const route = routeForFile(rel);
+    return { route, outFile: outFileForRoute(route), filePath };
+  });
+  pages.sort((a, b) => a.route.localeCompare(b.route));
+  return pages;
+}
+
 // src/search.ts
 import { ElementNode, RecordState } from "@domphy/core";
-import { themeColor, themeSpacing } from "@domphy/theme";
+import { themeColor as themeColor2, themeSpacing as themeSpacing2 } from "@domphy/theme";
 import { card, inputSearch, link, menu, small } from "@domphy/ui";
 var FIELD_TITLE = 3;
 var FIELD_HEADING = 2;
 var FIELD_BODY = 1;
-function tokenize(text2) {
+function tokenize(text3) {
   const tokens = [];
-  for (const raw of text2.toLowerCase().split(/[^\p{L}\p{N}]+/u)) {
+  for (const raw of text3.toLowerCase().split(/[^\p{L}\p{N}]+/u)) {
     if (raw.length >= 2) tokens.push(raw);
   }
   return tokens;
 }
-function indexText(postings, entryIndex, text2, fieldWeight) {
-  for (const term of tokenize(text2)) {
+function indexText(postings, entryIndex, text3, fieldWeight) {
+  for (const term of tokenize(text3)) {
     let perEntry = postings.get(term);
     if (!perEntry) {
       perEntry = /* @__PURE__ */ new Map();
       postings.set(term, perEntry);
     }
     const existing = perEntry.get(entryIndex);
-    if (existing === void 0 || fieldWeight > existing) perEntry.set(entryIndex, fieldWeight);
+    if (existing === void 0 || fieldWeight > existing)
+      perEntry.set(entryIndex, fieldWeight);
   }
 }
 function buildSearchIndex(docs) {
@@ -945,284 +1784,155 @@ function buildSearchIndex(docs) {
   const postings = /* @__PURE__ */ new Map();
   for (const doc of docs) {
     const pageIndex = entries.length;
-    entries.push({ route: doc.route, pageTitle: doc.title, heading: doc.title, slug: "", isPage: true });
+    entries.push({
+      route: doc.route,
+      pageTitle: doc.title,
+      heading: doc.title,
+      slug: "",
+      isPage: true
+    });
     indexText(postings, pageIndex, doc.title, FIELD_TITLE);
     indexText(postings, pageIndex, doc.text, FIELD_BODY);
     for (const entry of doc.toc) {
       const sectionIndex = entries.length;
-      entries.push({ route: doc.route, pageTitle: doc.title, heading: entry.text, slug: entry.slug, isPage: false });
+      entries.push({
+        route: doc.route,
+        pageTitle: doc.title,
+        heading: entry.text,
+        slug: entry.slug,
+        isPage: false
+      });
       indexText(postings, sectionIndex, entry.text, FIELD_HEADING);
     }
   }
   const serializedPostings = {};
-  for (const [term, perEntry] of Array.from(postings.entries()).sort((a, b) => a[0] < b[0] ? -1 : 1)) {
+  for (const [term, perEntry] of Array.from(postings.entries()).sort(
+    (a, b) => a[0] < b[0] ? -1 : 1
+  )) {
     serializedPostings[term] = Array.from(perEntry.entries()).sort((a, b) => a[0] - b[0]).map(([i, w]) => [i, w]);
   }
-  return JSON.stringify({ entries, postings: serializedPostings });
+  return JSON.stringify({
+    entries,
+    postings: serializedPostings
+  });
 }
 
 // src/theme.ts
-import { themeColor as themeColor2, themeSpacing as themeSpacing2 } from "@domphy/theme";
-var tc = (tone, color) => themeColor2(null, tone, color);
-var ts = (n) => themeSpacing2(n);
-var bg = tc("inherit");
-var bgSoft = tc("shift-1");
-var bgMute = tc("shift-2");
-var border = tc("shift-3");
-var textSoft = tc("shift-6");
-var text = tc("shift-9");
-var textStrong = tc("shift-11");
-var brand = tc("shift-9", "primary");
-var brandHover = tc("shift-10", "primary");
-var headerH = ts(14);
-var sidebarW = ts(62);
-var asideW = ts(56);
-var contentMax = ts(190);
+import { themeColor as themeColor3, themeSpacing as themeSpacing3 } from "@domphy/theme";
+var tc2 = (tone, color) => themeColor3(null, tone, color);
+var ts2 = (n) => themeSpacing3(n);
+var bg2 = tc2("inherit");
+var bgSoft2 = tc2("shift-1");
+var bgMute2 = tc2("shift-2");
+var border2 = tc2("shift-3");
+var textSoft2 = tc2("shift-6");
+var text2 = tc2("shift-9");
+var textStrong2 = tc2("shift-11");
+var brand2 = tc2("shift-9", "primary");
+var headerH2 = ts2(14);
 function pressCSS() {
   return `
 /* ------------------------------------------------------------------ reset */
 *,*::before,*::after{box-sizing:border-box}
-html{scroll-behavior:smooth;scroll-padding-top:calc(${headerH} + ${ts(4)})}
-body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:${bg};color:${text};line-height:1.6;font-size:16px}
-a{color:${brand};text-decoration:none}
+html{scroll-behavior:smooth;scroll-padding-top:calc(${headerH2} + ${ts2(4)})}
+body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:${bg2};color:${text2};line-height:1.6;font-size:16px}
+a{color:${brand2};text-decoration:none}
 a:hover{text-decoration:underline}
 
-/* -------------------------------------------------------- announcement bar */
-.dp-announcement{display:flex;align-items:center;justify-content:center;gap:${ts(3)};padding:${ts(2.5)} ${ts(6)};background:${brand};color:${bg};font-size:14px;font-weight:500;text-align:center}
-.dp-announcement a{color:${bg};font-weight:700}
-.dp-announcement-close{background:none;border:none;color:${bg};cursor:pointer;font-size:14px;opacity:.7;padding:${ts(0.5)} ${ts(1.5)};border-radius:${ts(1)};flex-shrink:0}
-.dp-announcement-close:hover{opacity:1}
-
-/* ------------------------------------------------------------------ header */
-.dp-logo{font-weight:700;font-size:18px;color:${textStrong};white-space:nowrap;flex-shrink:0}
-.dp-logo:hover{text-decoration:none}
-.dp-logo-img{height:${ts(7)};width:auto;display:block}
-.dp-nav a{color:${textSoft};font-size:14px;font-weight:500;white-space:nowrap;line-height:1}
-.dp-nav a:hover,.dp-nav a[aria-current="page"]{color:${brand};text-decoration:none}
-.dp-nav-dropdown{position:relative;display:flex;align-items:center}
-.dp-nav-dropdown-label{color:${textSoft};font-size:14px;font-weight:500;cursor:pointer;user-select:none}
-.dp-nav-dropdown-label::after{content:" \u25BE";font-size:10px;opacity:.6}
-.dp-nav-dropdown-menu{display:none;position:absolute;top:calc(100% + ${ts(2)});right:0;background:${bgSoft};border:1px solid ${border};border-radius:${ts(2)};padding:${ts(1.5)};min-width:${ts(40)};z-index:100;flex-direction:column;gap:${ts(0.5)};box-shadow:0 4px 16px rgba(0,0,0,.1)}
-.dp-nav-dropdown-menu a{display:block;padding:${ts(1.25)} ${ts(2.5)};border-radius:${ts(1.25)};font-size:13px}
-.dp-nav-dropdown-menu a:hover{background:${bgMute}}
-.dp-nav-dropdown:hover .dp-nav-dropdown-menu,.dp-nav-dropdown:focus-within .dp-nav-dropdown-menu{display:flex}
-.dp-header-actions{flex-shrink:0}
-.dp-search-slot{width:${ts(50)}}
-.dp-search-static{width:100%;height:${ts(8)};padding:0 ${ts(2.5)};border:1px solid ${border};border-radius:${ts(1.5)};background:${bgSoft};color:${textSoft};font-size:13px;font-family:inherit;outline:none;cursor:pointer}
-.dp-search-static::placeholder{color:${textSoft}}
-.dp-theme-toggle,.dp-menu-toggle{border:1px solid ${border};background:${bgSoft};color:${text};border-radius:${ts(2)};width:${ts(8.5)};height:${ts(8.5)};cursor:pointer;font-size:16px}
-.dp-menu-toggle{display:none}
-
-/* --------------------------------------------------------- locale switcher */
-.dp-locale-switcher{position:relative;display:flex;align-items:center}
-.dp-locale-current{color:${textSoft};font-size:13px;font-weight:500;cursor:pointer;user-select:none;padding:${ts(1)} ${ts(2)};border:1px solid ${border};border-radius:${ts(1.5)};background:${bgSoft};white-space:nowrap;display:flex;align-items:center;gap:${ts(1)}}
-.dp-locale-current::after{content:" \u25BE";font-size:10px;opacity:.6}
-.dp-locale-menu{display:none;position:absolute;top:calc(100% + ${ts(2)});right:0;background:${bgSoft};border:1px solid ${border};border-radius:${ts(2)};padding:${ts(1.5)};min-width:${ts(32)};z-index:200;flex-direction:column;gap:${ts(0.5)};box-shadow:0 4px 16px rgba(0,0,0,.1)}
-.dp-locale-switcher:hover .dp-locale-menu,.dp-locale-switcher:focus-within .dp-locale-menu{display:flex}
-.dp-locale-option{display:block;padding:${ts(1.25)} ${ts(2.5)};border-radius:${ts(1.25)};font-size:13px;color:${textSoft}}
-.dp-locale-option:hover{background:${bgMute};color:${text};text-decoration:none}
-.dp-locale-option.active{color:${brand};font-weight:600}
-
-/* -------------------------------------------------- logo light/dark variant */
+/* -------------------------------------------------------- logo theme variants */
+/* dp-logo-light/dark classes set in layout.ts img elements */
 [data-theme="dark"] .dp-logo-light{display:none}
 [data-theme="light"] .dp-logo-dark,.dp-logo-dark{display:none}
 [data-theme="dark"] .dp-logo-dark{display:block}
 
-/* ------------------------------------------------------------ social links */
-.dp-social-link{display:inline-flex;align-items:center;justify-content:center;width:${ts(8.5)};height:${ts(8.5)};border-radius:${ts(2)};color:${textSoft};background:${bgSoft};border:1px solid ${border};font-size:10px;font-weight:700;flex-shrink:0}
-.dp-social-link:hover{color:${text};border-color:${textSoft};text-decoration:none}
-.dp-social-icon{display:block;width:${ts(4)};height:${ts(4)};background:currentColor;flex-shrink:0}
+/* ---------------------------------------------------------- social icon masks */
+/* dp-social-icon + dp-icon-* classes set in layout.ts socialLinkEl */
+.dp-social-icon{display:block;width:${ts2(4)};height:${ts2(4)};background:currentColor;flex-shrink:0}
 .dp-icon-github{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.741 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.741 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z'/%3E%3C/svg%3E") center/contain no-repeat}
 .dp-icon-twitter{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center/contain no-repeat}
 .dp-icon-discord{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057c.01.044.032.084.064.107a19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01 10.2 10.2 0 0 0 .373.292.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057c.01.044.032.084.064.107a19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01 10.2 10.2 0 0 0 .373.292.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z'/%3E%3C/svg%3E") center/contain no-repeat}
 
-/* ------------------------------------------------------------------ layout */
-.dp-shell{display:grid;grid-template-columns:${sidebarW} minmax(0,1fr) ${asideW};align-items:start;max-width:1440px;margin:0 auto}
-.dp-sidebar{position:sticky;top:${headerH};max-height:calc(100vh - ${headerH});overflow-y:auto;padding:${ts(6)} ${ts(3)} ${ts(12)} ${ts(6)};border-right:1px solid ${border}}
-.dp-sidebar-group{margin-bottom:${ts(3.5)}}
-.dp-sidebar-title{display:flex;align-items:center;gap:${ts(1.5)};font-size:13px;font-weight:700;color:${textStrong};margin:${ts(2)} 0 ${ts(1)}}
-.dp-sidebar-subtitle{font-size:12px;color:${textSoft};padding:${ts(1)} ${ts(3)};font-weight:600}
-.dp-sidebar-items{display:flex;flex-direction:column}
-.dp-sidebar-toggle{margin-left:auto;background:none;border:none;cursor:pointer;color:${textSoft};font-size:14px;padding:0 ${ts(1)};line-height:1}
-.dp-sidebar-toggle:hover{color:${text}}
+/* ------- sidebar collapsed state (JS toggles 'collapsed' class on group) ------- */
 .dp-sidebar-group.collapsed .dp-sidebar-items{display:none}
-.dp-sidebar a{display:flex;align-items:center;gap:${ts(1.5)};padding:${ts(1.25)} ${ts(3)};font-size:14px;color:${textSoft};border-radius:${ts(1.5)}}
-.dp-sidebar a:hover{color:${text};text-decoration:none}
-.dp-sidebar a[aria-current="page"]{color:${brand};font-weight:600;background:${bgSoft}}
-.dp-sidebar-link-with-badge{display:flex;align-items:center}
-.dp-main{padding:${ts(8)} ${ts(12)} ${ts(20)};min-width:0}
-.dp-main-full{grid-column:1 / -1;max-width:${contentMax};margin:0 auto}
-.dp-content{max-width:${contentMax}}
-.dp-aside{position:sticky;top:${headerH};max-height:calc(100vh - ${headerH});overflow-y:auto;padding:${ts(8)} ${ts(6)};font-size:13px}
-.dp-aside-title{font-weight:700;margin-bottom:${ts(2)};color:${text}}
-.dp-toc a{display:block;padding:${ts(0.75)} 0;color:${textSoft}}
-.dp-toc a:hover{color:${brand};text-decoration:none}
-.dp-toc-2{padding-left:0}
-.dp-toc-3{padding-left:${ts(3)}}
-.dp-toc-4{padding-left:${ts(6)}}
 
-/* -------------------------------------------------- card / link-card / card-grid */
-.custom-block.card{background:${bgSoft};border:1px solid ${border};border-radius:${ts(3)};padding:${ts(5)} ${ts(6)};margin:${ts(3)} 0}
-.custom-block.card .card-title{font-size:16px;font-weight:600;color:${textStrong};margin:0 0 ${ts(2)}}
-.custom-block.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(${ts(56)},1fr));gap:${ts(4)};margin:${ts(4)} 0}
-a.custom-block.link-card{display:block;background:${bgSoft};border:1px solid ${border};border-radius:${ts(3)};padding:${ts(5)} ${ts(6)};margin:${ts(3)} 0;transition:border-color .15s,background .15s;text-decoration:none;color:${text}}
-a.custom-block.link-card:hover{border-color:${brand};background:${bgMute};text-decoration:none}
-a.custom-block.link-card .link-card-title{font-size:16px;font-weight:600;color:${brand};margin:0 0 ${ts(2)}}
-.custom-block.card-grid .custom-block.card,.custom-block.card-grid a.custom-block.link-card{margin:0}
-
-/* ------------------------------------------------------------------ badges */
-.dp-badge{display:inline-block;padding:${ts(0.5)} ${ts(1.75)};border-radius:${ts(2.5)};font-size:11px;font-weight:700;line-height:1.4;white-space:nowrap;vertical-align:middle}
-.dp-badge-tip{background:color-mix(in srgb,${brand} 12%,${bg});color:${brand}}
-.dp-badge-info{background:${bgMute};color:${textSoft}}
-.dp-badge-warning{background:color-mix(in srgb,${tc("shift-9", "warning")} 12%,${bg});color:${tc("shift-9", "warning")}}
-.dp-badge-danger{background:color-mix(in srgb,${tc("shift-9", "danger")} 12%,${bg});color:${tc("shift-9", "danger")}}
-.dp-page-badge{margin-left:${ts(2)}}
-.dp-page-badge-row{margin-bottom:${ts(-2)}}
-
-/* ------------------------------------------------------------------- prose */
-.dp-content h1{font-size:30px;font-weight:700;line-height:1.25;margin:0 0 ${ts(6)};letter-spacing:-.02em;color:${textStrong}}
-.dp-content h2{font-size:22px;font-weight:700;margin:${ts(11)} 0 ${ts(4)};padding-top:${ts(5)};border-top:1px solid ${border};letter-spacing:-.01em;color:${textStrong}}
-.dp-content h3{font-size:18px;font-weight:600;margin:${ts(7)} 0 ${ts(3)};color:${textStrong}}
-.dp-content h4{font-size:16px;font-weight:600;margin:${ts(5.5)} 0 ${ts(2)};color:${textStrong}}
-.dp-content p{margin:${ts(4)} 0}
-.dp-content ul,.dp-content ol{margin:${ts(4)} 0;padding-left:1.4em}
-.dp-content li{margin:${ts(1.5)} 0}
-.dp-content a{font-weight:500}
-.dp-content strong{font-weight:600;color:${textStrong}}
-.dp-content em{font-style:italic}
-.dp-content mark{background:color-mix(in srgb,${tc("shift-6", "warning")} 40%,${bg});color:inherit;padding:${ts(0.25)} ${ts(0.75)};border-radius:${ts(0.75)}}
-.dp-content sup{font-size:.75em;vertical-align:super}
-.dp-content sub{font-size:.75em;vertical-align:sub}
-.dp-content del{opacity:.5}
-.dp-content blockquote{margin:${ts(4)} 0;padding:0 ${ts(4)};border-left:3px solid ${border};color:${textSoft}}
-.dp-content img{max-width:100%;height:auto;border-radius:${ts(1.5)}}
-.dp-content hr{border:none;border-top:1px solid ${border};margin:${ts(8)} 0}
-.dp-content :not(pre)>code{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;font-size:.85em;background:${bgMute};padding:${ts(0.75)} ${ts(1.5)};border-radius:${ts(1)}}
-.dp-content pre{margin:${ts(4)} 0;padding:${ts(4)} ${ts(5)};background:${bgSoft};border:1px solid ${border};border-radius:${ts(2)};overflow-x:auto;font-size:13.5px;line-height:1.5}
-.dp-content pre code{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;background:none;padding:0}
-.dp-content table{border-collapse:collapse;margin:${ts(4)} 0;display:block;overflow-x:auto}
-.dp-content th,.dp-content td{border:1px solid ${border};padding:${ts(2)} ${ts(3.5)};text-align:left}
-.dp-content th{background:${bgSoft};font-weight:600}
+/* ------- sidebar open state on mobile (JS sets html[data-sidebar="open"]) ------ */
+@media(max-width:860px){
+  html[data-sidebar="open"] nav[aria-label="Documentation"]{transform:translateX(0)}
+}
 
 /* -------------------------------------------------------- heading anchors */
-.header-anchor{opacity:0;margin-left:${ts(2)};font-weight:400;font-size:.85em;color:${textSoft};transition:opacity .15s}
+.header-anchor{opacity:0;margin-left:${ts2(2)};font-weight:400;font-size:.85em;color:${textSoft2};transition:opacity .15s}
 :is(h1,h2,h3,h4,h5,h6):hover .header-anchor{opacity:1}
-.header-anchor:hover{color:${brand};text-decoration:none}
-
-/* -------------------------------------------------------- external links */
-.dp-content a[target="_blank"]::after{content:" \u2197";font-size:.75em;opacity:.6}
-
-/* --------------------------------------------------------------- task lists */
-.task-list-item{list-style:none;margin-left:-1.4em;padding-left:1.8em;position:relative}
-.task-list-check{position:absolute;left:0;top:.25em;width:14px;height:14px;cursor:default;accent-color:${brand}}
+.header-anchor:hover{color:${brand2};text-decoration:none}
 
 /* ------------------------------------------------------------ code blocks */
-.code-block{margin:${ts(4)} 0;border:1px solid ${border};border-radius:${ts(2)};overflow:hidden}
-.code-block-title{display:flex;align-items:center;padding:${ts(1.5)} ${ts(4)};background:${bgMute};border-bottom:1px solid ${border};font-size:12px;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;color:${textSoft}}
+.code-block{margin:${ts2(4)} 0;border:1px solid ${border2};border-radius:${ts2(2)};overflow:hidden}
+.code-block-title{display:flex;align-items:center;padding:${ts2(1.5)} ${ts2(4)};background:${bgMute2};border-bottom:1px solid ${border2};font-size:12px;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;color:${textSoft2}}
 .code-block-inner{position:relative}
-.code-block pre{margin:0;padding:${ts(4)} ${ts(5)};background:${bgSoft};border:none;border-radius:0;overflow-x:auto;font-size:13.5px;line-height:1.5;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace}
+.code-block pre{margin:0;padding:${ts2(4)} ${ts2(5)};background:${bgSoft2};border:none;border-radius:0;overflow-x:auto;font-size:13.5px;line-height:1.5;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace}
 .code-block code{font-family:inherit;background:none;padding:0;font-size:inherit}
 .code-block .line{display:inline-block;width:100%}
-.code-block .line.highlighted{background:color-mix(in srgb,${brand} 10%,transparent)}
-.code-block .line.diff.add{background:color-mix(in srgb,${tc("shift-7", "success")} 12%,transparent)}
-.code-block .line.diff.add::before{content:"+ ";color:${tc("shift-7", "success")}}
-.code-block .line.diff.remove{background:color-mix(in srgb,${tc("shift-9", "danger")} 10%,transparent);opacity:.7}
-.code-block .line.diff.remove::before{content:"- ";color:${tc("shift-9", "danger")}}
-.code-block .line.highlighted.error{background:color-mix(in srgb,${tc("shift-9", "error")} 10%,transparent)}
-.code-block .line.highlighted.warning{background:color-mix(in srgb,${tc("shift-7", "warning")} 10%,transparent)}
+.code-block .line.highlighted{background:color-mix(in srgb,${brand2} 10%,transparent)}
+.code-block .line.diff.add{background:color-mix(in srgb,${tc2("shift-7", "success")} 12%,transparent)}
+.code-block .line.diff.add::before{content:"+ ";color:${tc2("shift-7", "success")}}
+.code-block .line.diff.remove{background:color-mix(in srgb,${tc2("shift-9", "danger")} 10%,transparent);opacity:.7}
+.code-block .line.diff.remove::before{content:"- ";color:${tc2("shift-9", "danger")}}
+.code-block .line.highlighted.error{background:color-mix(in srgb,${tc2("shift-9", "error")} 10%,transparent)}
+.code-block .line.highlighted.warning{background:color-mix(in srgb,${tc2("shift-7", "warning")} 10%,transparent)}
 .code-block pre.has-focus .line:not(.focus){opacity:.4;filter:blur(.4px);transition:opacity .2s,filter .2s}
 .code-block pre.has-focus:hover .line{opacity:1;filter:none}
-.code-block .line-number{display:inline-block;min-width:2.5em;margin-right:1em;color:${textSoft};text-align:right;user-select:none;font-size:.9em}
-.code-copy-btn{position:absolute;top:${ts(2)};right:${ts(2)};padding:${ts(1)} ${ts(2)};border-radius:${ts(1.25)};border:1px solid ${border};background:${bgSoft};color:${textSoft};cursor:pointer;font-size:13px;opacity:0;transition:opacity .15s}
+.code-block .line-number{display:inline-block;min-width:2.5em;margin-right:1em;color:${textSoft2};text-align:right;user-select:none;font-size:.9em}
+.code-copy-btn{position:absolute;top:${ts2(2)};right:${ts2(2)};padding:${ts2(1)} ${ts2(2)};border-radius:${ts2(1.25)};border:1px solid ${border2};background:${bgSoft2};color:${textSoft2};cursor:pointer;font-size:13px;opacity:0;transition:opacity .15s}
 .code-block-inner:hover .code-copy-btn{opacity:1}
-.code-copy-btn:hover{background:${bgMute};color:${text}}
+.code-copy-btn:hover{background:${bgMute2};color:${text2}}
 
 /* ------------------------------------------------------------- code groups */
-.code-group{margin:${ts(4)} 0;border:1px solid ${border};border-radius:${ts(2)};overflow:hidden}
+.code-group{margin:${ts2(4)} 0;border:1px solid ${border2};border-radius:${ts2(2)};overflow:hidden}
 .code-group>input[type="radio"]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
-.code-group .tabs{display:flex;gap:${ts(0.5)};padding:${ts(1.5)} ${ts(2)};background:${bgSoft};border-bottom:1px solid ${border};flex-wrap:wrap}
-.code-group .tabs label{padding:${ts(1)} ${ts(3)};font-size:13px;font-weight:500;color:${textSoft};border-radius:${ts(1.25)};cursor:pointer}
+.code-group .tabs{display:flex;gap:${ts2(0.5)};padding:${ts2(1.5)} ${ts2(2)};background:${bgSoft2};border-bottom:1px solid ${border2};flex-wrap:wrap}
+.code-group .tabs label{padding:${ts2(1)} ${ts2(3)};font-size:13px;font-weight:500;color:${textSoft2};border-radius:${ts2(1.25)};cursor:pointer}
 .code-group .blocks>.code-block{display:none;margin:0;border:none;border-radius:0}
 .code-group .blocks>.code-block pre{border-radius:0}
 ${Array.from({ length: 8 }, (_, i) => `.code-group>input:nth-of-type(${i + 1}):checked~.blocks>.code-block:nth-child(${i + 1})`).join(",\n")}{display:block}
-${Array.from({ length: 8 }, (_, i) => `.code-group>input:nth-of-type(${i + 1}):checked~.tabs>label:nth-child(${i + 1})`).join(",\n")}{color:${brand};background:${bgMute}}
+${Array.from({ length: 8 }, (_, i) => `.code-group>input:nth-of-type(${i + 1}):checked~.tabs>label:nth-child(${i + 1})`).join(",\n")}{color:${brand2};background:${bgMute2}}
+
+/* ---------------------------------------------------------- card containers */
+.custom-block.card{background:${bgSoft2};border:1px solid ${border2};border-radius:${ts2(3)};padding:${ts2(5)} ${ts2(6)};margin:${ts2(3)} 0}
+.custom-block.card .card-title{font-size:16px;font-weight:600;color:${textStrong2};margin:0 0 ${ts2(2)}}
+.custom-block.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(${ts2(56)},1fr));gap:${ts2(4)};margin:${ts2(4)} 0}
+a.custom-block.link-card{display:block;background:${bgSoft2};border:1px solid ${border2};border-radius:${ts2(3)};padding:${ts2(5)} ${ts2(6)};margin:${ts2(3)} 0;transition:border-color .15s,background .15s;text-decoration:none;color:${text2}}
+a.custom-block.link-card:hover{border-color:${brand2};background:${bgMute2};text-decoration:none}
+a.custom-block.link-card .link-card-title{font-size:16px;font-weight:600;color:${brand2};margin:0 0 ${ts2(2)}}
+.custom-block.card-grid .custom-block.card,.custom-block.card-grid a.custom-block.link-card{margin:0}
 
 /* --------------------------------------------------------- custom blocks */
-.custom-block{margin:${ts(4)} 0;padding:${ts(3)} ${ts(4)};border-radius:${ts(2)};border:1px solid transparent;font-size:14.5px}
-.custom-block p{margin:${ts(2)} 0}
-.custom-block-title{font-weight:700;margin:0 0 ${ts(1)} !important;font-size:13px}
-.custom-block.tip,.custom-block.success{background:color-mix(in srgb,${brand} 8%,${bg});border-color:color-mix(in srgb,${brand} 28%,transparent)}
-.custom-block.info,.custom-block.note,.custom-block.abstract{background:${bgSoft};border-color:${border}}
-.custom-block.warning,.custom-block.question{background:color-mix(in srgb,${tc("shift-6", "warning")} 10%,${bg});border-color:${tc("shift-6", "warning")}}
-.custom-block.danger,.custom-block.failure,.custom-block.bug{background:color-mix(in srgb,${tc("shift-7", "danger")} 10%,${bg});border-color:${tc("shift-7", "danger")}}
-.custom-block.example{background:color-mix(in srgb,${tc("shift-7", "secondary")} 10%,${bg});border-color:${tc("shift-7", "secondary")}}
-.custom-block.quote{background:${bgSoft};border-color:${border};border-left-width:4px;border-radius:0 ${ts(2)} ${ts(2)} 0}
+.custom-block{margin:${ts2(4)} 0;padding:${ts2(3)} ${ts2(4)};border-radius:${ts2(2)};border:1px solid transparent;font-size:14.5px}
+.custom-block p{margin:${ts2(2)} 0}
+.custom-block-title{font-weight:700;margin:0 0 ${ts2(1)} !important;font-size:13px}
+.custom-block.tip,.custom-block.success{background:color-mix(in srgb,${brand2} 8%,${bg2});border-color:color-mix(in srgb,${brand2} 28%,transparent)}
+.custom-block.info,.custom-block.note,.custom-block.abstract{background:${bgSoft2};border-color:${border2}}
+.custom-block.warning,.custom-block.question{background:color-mix(in srgb,${tc2("shift-6", "warning")} 10%,${bg2});border-color:${tc2("shift-6", "warning")}}
+.custom-block.danger,.custom-block.failure,.custom-block.bug{background:color-mix(in srgb,${tc2("shift-7", "danger")} 10%,${bg2});border-color:${tc2("shift-7", "danger")}}
+.custom-block.example{background:color-mix(in srgb,${tc2("shift-7", "secondary")} 10%,${bg2});border-color:${tc2("shift-7", "secondary")}}
+.custom-block.quote{background:${bgSoft2};border-color:${border2};border-left-width:4px;border-radius:0 ${ts2(2)} ${ts2(2)} 0}
 details.custom-block summary{cursor:pointer;font-weight:600}
 
 /* ------------------------------------------------------------------- steps */
 .custom-block.steps{background:none;border:none;padding:0}
 .custom-block.steps>ol{counter-reset:step;list-style:none;padding:0;margin:0}
-.custom-block.steps>ol>li{counter-increment:step;display:grid;grid-template-columns:${ts(9)} 1fr;gap:0 ${ts(4)};margin-bottom:${ts(6)}}
-.custom-block.steps>ol>li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:${ts(7.5)};height:${ts(7.5)};border-radius:50%;background:${brand};color:${bg};font-size:13px;font-weight:700;flex-shrink:0}
+.custom-block.steps>ol>li{counter-increment:step;display:grid;grid-template-columns:${ts2(9)} 1fr;gap:0 ${ts2(4)};margin-bottom:${ts2(6)}}
+.custom-block.steps>ol>li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:${ts2(7.5)};height:${ts2(7.5)};border-radius:50%;background:${brand2};color:${bg2};font-size:13px;font-weight:700;flex-shrink:0}
 
 /* ----------------------------------------------------------------- mermaid */
-.dp-mermaid{margin:${ts(5)} 0;text-align:center;overflow-x:auto}
+.dp-mermaid{margin:${ts2(5)} 0;text-align:center;overflow-x:auto}
 .dp-mermaid svg{max-width:100%;height:auto}
 
-/* --------------------------------------------------------------- doc footer */
-.dp-doc-footer{display:flex;align-items:center;gap:${ts(4)};flex-wrap:wrap;margin-top:${ts(8)};padding-top:${ts(5)};border-top:1px solid ${border};font-size:13px;color:${textSoft}}
-.dp-edit-link{font-weight:500;font-size:13px}
-.dp-reading-time::before{content:"\u{1F4D6} "}
-
-/* --------------------------------------------------------------- prev/next */
-.dp-prevnext{display:flex;justify-content:space-between;gap:${ts(4)};margin-top:${ts(12)};padding-top:${ts(6)};border-top:1px solid ${border}}
-.dp-prevnext a{display:block;padding:${ts(3)} ${ts(4)};border:1px solid ${border};border-radius:${ts(2)};font-weight:600;flex:1}
-.dp-prevnext a:hover{border-color:${brand};text-decoration:none}
-.dp-prevnext .next{text-align:right}
-.dp-prevnext small{display:block;color:${textSoft};font-weight:400;font-size:12px}
-
-/* ----------------------------------------------------------------- footer */
-.dp-footer{padding:${ts(6)} ${ts(12)};border-top:1px solid ${border};color:${textSoft};font-size:13px}
-
-/* ---------------------------------------------------------------- home page */
-.dp-main-home{max-width:1100px;margin:0 auto;padding:${ts(12)} ${ts(6)} ${ts(20)}}
-.dp-hero{text-align:center;padding:${ts(10)} 0 ${ts(6)}}
-.dp-hero-name{font-size:56px;font-weight:800;line-height:1.1;letter-spacing:-.03em;background:linear-gradient(120deg,${brand},${tc("shift-7", "secondary")});-webkit-background-clip:text;background-clip:text;color:transparent}
-.dp-hero-text{font-size:30px;font-weight:700;margin:${ts(3)} 0 0;color:${textStrong}}
-.dp-hero-tagline{font-size:18px;color:${textSoft};max-width:${ts(160)};margin:${ts(5)} auto 0}
-.dp-hero-actions{display:flex;gap:${ts(3)};justify-content:center;margin-top:${ts(7)};flex-wrap:wrap}
-.dp-hero-action{padding:${ts(2.5)} ${ts(5.5)};border-radius:${ts(5.5)};font-weight:600;font-size:15px}
-.dp-hero-action.brand{background:${brand};color:${bg}}
-.dp-hero-action.brand:hover{background:${brandHover};text-decoration:none}
-.dp-hero-action.alt{background:${bgSoft};color:${text};border:1px solid ${border}}
-.dp-hero-action.alt:hover{border-color:${brand};text-decoration:none}
-.dp-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(${ts(60)},1fr));gap:${ts(4)};margin:${ts(10)} 0}
-.dp-feature{padding:${ts(5)};background:${bgSoft};border:1px solid ${border};border-radius:${ts(3)}}
-.dp-feature-icon{font-size:28px;margin-bottom:${ts(3)}}
-.dp-feature-title{font-weight:700;font-size:17px;margin-bottom:${ts(2)};color:${textStrong}}
-.dp-feature-details{font-size:14px;color:${textSoft};margin:0;line-height:1.5}
-.dp-feature-link{display:block;color:inherit}
-.dp-feature-link:hover{text-decoration:none}
-.dp-feature-link:hover .dp-feature{border-color:${brand}}
-.dp-home{max-width:${contentMax};margin:0 auto}
+/* --------------------------------------------------------------- task lists */
+.task-list-item{list-style:none;margin-left:-1.4em;padding-left:1.8em;position:relative}
+.task-list-check{position:absolute;left:0;top:.25em;width:14px;height:14px;cursor:default;accent-color:${brand2}}
 
 /* ---------------------------------------------------------------- shiki dark */
 html[data-theme="dark"] .shiki,html[data-theme="dark"] .shiki span{color:var(--shiki-dark,inherit) !important}
-
-/* -------------------------------------------------------------- responsive */
-@media(max-width:1200px){
-  .dp-shell{grid-template-columns:${sidebarW} minmax(0,1fr)}
-  .dp-aside{display:none}
-}
-@media(max-width:860px){
-  .dp-shell{grid-template-columns:1fr}
-  .dp-menu-toggle{display:block}
-  .dp-sidebar{position:fixed;top:${headerH};left:0;bottom:0;width:80%;max-width:${ts(80)};background:${bg};z-index:25;transform:translateX(-100%);transition:transform .2s ease;max-height:none}
-  html[data-sidebar="open"] .dp-sidebar{transform:translateX(0)}
-  .dp-nav{display:none}
-  .dp-main{padding:${ts(6)} ${ts(5)} ${ts(16)}}
-  .dp-search-slot{width:${ts(35)}}
-}
 `;
 }
 
@@ -1243,24 +1953,27 @@ function flattenText(node, out) {
     return;
   }
   if (typeof node === "object") {
-    for (const [key, value] of Object.entries(node)) {
+    for (const [key, value] of Object.entries(
+      node
+    )) {
       if (key.startsWith("_") || key === "$" || key === "style") continue;
-      if (key === "class" || key.startsWith("data") || key === "href" || key === "id") continue;
+      if (key === "class" || key.startsWith("data") || key === "href" || key === "id")
+        continue;
       flattenText(value, out);
     }
   }
 }
 function parseStyleString(value) {
-  const style = {};
+  const style2 = {};
   for (const decl of value.split(";")) {
     const colon = decl.indexOf(":");
     if (colon === -1) continue;
     const prop = decl.slice(0, colon).trim();
     const val = decl.slice(colon + 1).trim();
     if (!prop || !val) continue;
-    style[prop.replace(/-([a-z])/g, (_m, c) => c.toUpperCase())] = val;
+    style2[prop.replace(/-([a-z])/g, (_m, c) => c.toUpperCase())] = val;
   }
-  return style;
+  return style2;
 }
 function sanitizeStyles(node) {
   if (Array.isArray(node)) {
@@ -1269,9 +1982,11 @@ function sanitizeStyles(node) {
   }
   if (!node || typeof node !== "object") return;
   const record = node;
-  if (typeof record.style === "string") record.style = parseStyleString(record.style);
+  if (typeof record.style === "string")
+    record.style = parseStyleString(record.style);
   for (const value of Object.values(record)) {
-    if (value && (typeof value === "object" || Array.isArray(value))) sanitizeStyles(value);
+    if (value && (typeof value === "object" || Array.isArray(value)))
+      sanitizeStyles(value);
   }
 }
 function firstParagraphText(body) {
@@ -1281,8 +1996,8 @@ function firstParagraphText(body) {
     if ("p" in record) {
       const parts = [];
       flattenText(record.p, parts);
-      const text2 = parts.join(" ").replace(/\s+/g, " ").trim();
-      if (text2.length > 10) return text2.slice(0, 160);
+      const text3 = parts.join(" ").replace(/\s+/g, " ").trim();
+      if (text3.length > 10) return text3.slice(0, 160);
     }
   }
   return "";
@@ -1327,7 +2042,7 @@ async function buildIslandsBundle(outDir, searchEnabled) {
 }
 function buildSitemap(routes, hostname) {
   const urls = routes.map((route) => {
-    const loc = route === "/" ? `${hostname}/` : `${hostname}${route}`.replace(/\/+$/, "") + "/";
+    const loc = route === "/" ? `${hostname}/` : `${`${hostname}${route}`.replace(/\/+$/, "")}/`;
     return `  <url><loc>${loc}</loc></url>`;
   });
   return `<?xml version="1.0" encoding="UTF-8"?>
@@ -1386,13 +2101,21 @@ async function buildSite(options) {
   const pages = discoverPages(srcDir);
   const localePages = pages.map((p) => ({ ...p, localeKey: "/" }));
   if (config.locales) {
-    for (const [localeKey, locale] of Object.entries(config.locales)) {
+    for (const [localeKey, _locale] of Object.entries(config.locales)) {
       if (localeKey === "/") continue;
-      const localeDir = resolve2(srcDir, localeKey.replace(/^\//, "").replace(/\/$/, ""));
+      const localeDir = resolve2(
+        srcDir,
+        localeKey.replace(/^\//, "").replace(/\/$/, "")
+      );
       if (!existsSync(localeDir)) continue;
       for (const p of discoverPages(localeDir)) {
         const prefix = localeKey.replace(/\/$/, "");
-        localePages.push({ filePath: p.filePath, route: prefix + p.route, outFile: p.outFile === "index.html" ? localeKey.replace(/^\//, "") + "index.html" : localeKey.replace(/^\//, "") + p.outFile, localeKey });
+        localePages.push({
+          filePath: p.filePath,
+          route: prefix + p.route,
+          outFile: p.outFile === "index.html" ? `${localeKey.replace(/^\//, "")}index.html` : localeKey.replace(/^\//, "") + p.outFile,
+          localeKey
+        });
       }
     }
   }
@@ -1403,7 +2126,12 @@ async function buildSite(options) {
   const searchDocs = [];
   for (const page of localePages) {
     const source = readFileSync2(page.filePath, "utf8");
-    const doc = await renderDoc(source, { filePath: page.filePath, docsDir: srcDir, repoRoot: srcDir, highlight });
+    const doc = await renderDoc(source, {
+      filePath: page.filePath,
+      docsDir: srcDir,
+      repoRoot: srcDir,
+      highlight
+    });
     if (doc.frontmatter.draft === true) {
       console.log(`  \u21B7 ${page.route} (draft, skipped)`);
       continue;
@@ -1415,8 +2143,23 @@ async function buildSite(options) {
     const readingTime = estimateReadingTime(textContent);
     const lastUpdated = showLastUpdated ? getLastUpdated(page.filePath) : void 0;
     const relPath = relative2(srcDir, page.filePath).replace(/\\/g, "/");
-    built.push({ route: page.route, outFile: page.outFile, title: doc.title, localeKey: page.localeKey, doc, lastUpdated, readingTime, filePath: page.filePath, relPath });
-    searchDocs.push({ route: page.route, title: doc.title, text: textContent.slice(0, 2e4), toc: doc.toc });
+    built.push({
+      route: page.route,
+      outFile: page.outFile,
+      title: doc.title,
+      localeKey: page.localeKey,
+      doc,
+      lastUpdated,
+      readingTime,
+      filePath: page.filePath,
+      relPath
+    });
+    searchDocs.push({
+      route: page.route,
+      title: doc.title,
+      text: textContent.slice(0, 2e4),
+      toc: doc.toc
+    });
   }
   const pageHeadMap = /* @__PURE__ */ new Map();
   const pageLangMap = /* @__PURE__ */ new Map();
@@ -1442,7 +2185,9 @@ async function buildSite(options) {
       const siteTitle = localeConfig?.title ?? config.title;
       const pageTitle = page.title === siteTitle ? siteTitle : `${page.title} | ${siteTitle}`;
       const canonical = page.route === "/" ? `${config.hostname}/` : `${config.hostname}${page.route}/`;
-      const pageHead = Array.isArray(page.doc.frontmatter.head) ? page.doc.frontmatter.head.filter((s) => typeof s === "string") : [];
+      const pageHead = Array.isArray(page.doc.frontmatter.head) ? page.doc.frontmatter.head.filter(
+        (s) => typeof s === "string"
+      ) : [];
       pageHeadMap.set(page.route, pageHead);
       pageLangMap.set(page.route, lang);
       return {
@@ -1451,7 +2196,13 @@ async function buildSite(options) {
           title: pageTitle,
           description,
           metadataBase: config.hostname,
-          openGraph: { title: pageTitle, description, url: page.route === "/" ? "/" : `${page.route}/`, siteName: siteTitle, type: "website" },
+          openGraph: {
+            title: pageTitle,
+            description,
+            url: page.route === "/" ? "/" : `${page.route}/`,
+            siteName: siteTitle,
+            type: "website"
+          },
           twitter: { card: "summary", title: pageTitle, description },
           alternates: { canonical }
         },
@@ -1469,28 +2220,54 @@ async function buildSite(options) {
       const result = await app.renderToString(page.route);
       const pageHead = pageHeadMap.get(page.route) ?? [];
       const lang = pageLangMap.get(page.route) ?? "en";
-      const html = htmlDocument(result, config, searchEnabled, generatedCss, pageHead, lang);
+      const html = htmlDocument(
+        result,
+        config,
+        searchEnabled,
+        generatedCss,
+        pageHead,
+        lang
+      );
       const outPath = join2(outDir, page.outFile);
       mkdirSync(dirname2(outPath), { recursive: true });
       writeFileSync(outPath, html, "utf8");
       totalBytes += html.length;
-      if (result.status !== 200) console.warn(`  ! ${page.route} -> status ${result.status}`);
+      if (result.status !== 200)
+        console.warn(`  ! ${page.route} -> status ${result.status}`);
     } catch (error) {
-      failures.push({ route: page.route, error: String(error.message || error) });
+      failures.push({
+        route: page.route,
+        error: String(error.message || error)
+      });
     }
   }
   if (failures.length > 0) {
     console.warn(`
 ${failures.length} page(s) failed:`);
-    for (const failure of failures) console.warn(`  \u2717 ${failure.route}: ${failure.error}`);
+    for (const failure of failures)
+      console.warn(`  \u2717 ${failure.route}: ${failure.error}`);
   }
   await buildIslandsBundle(outDir, searchEnabled);
-  writeFileSync(join2(outDir, "search-index.json"), buildSearchIndex(searchDocs), "utf8");
-  if (publicDir && existsSync(publicDir)) cpSync(publicDir, outDir, { recursive: true });
+  writeFileSync(
+    join2(outDir, "search-index.json"),
+    buildSearchIndex(searchDocs),
+    "utf8"
+  );
+  if (publicDir && existsSync(publicDir))
+    cpSync(publicDir, outDir, { recursive: true });
   if (config.hostname) {
-    writeFileSync(join2(outDir, "sitemap.xml"), buildSitemap(built.map((p) => p.route), config.hostname), "utf8");
+    writeFileSync(
+      join2(outDir, "sitemap.xml"),
+      buildSitemap(
+        built.map((p) => p.route),
+        config.hostname
+      ),
+      "utf8"
+    );
   }
-  console.log(`Built ${built.length} pages (${(totalBytes / 1024).toFixed(0)} KB) \u2192 ${outDir}`);
+  console.log(
+    `Built ${built.length} pages (${(totalBytes / 1024).toFixed(0)} KB) \u2192 ${outDir}`
+  );
 }
 export {
   buildSite