diff --git a/assets/landing.css b/assets/landing.css
new file mode 100644
index 0000000..68846fc
--- /dev/null
+++ b/assets/landing.css
@@ -0,0 +1,101 @@
+/*
+ * Landing page styles, layered on top of TypeDoc's generated style.css
+ * (copied to assets/style.css at build time). TypeDoc wraps its rules in
+ * @layer typedoc, so these unlayered rules win without specificity hacks.
+ * Only TypeDoc's unprefixed --color-* variables are used, so the landing
+ * page tracks the docs' light/dark/os theming automatically.
+ */
+
+.landing-cards {
+    list-style: none;
+    margin: 1rem 0 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1rem;
+}
+
+.landing-card {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    background-color: var(--color-background-secondary);
+    border: 1px solid var(--color-accent);
+    border-radius: 0.5rem;
+}
+
+.landing-card h3 {
+    margin: 0 0 0.75rem;
+    font-size: 1rem;
+}
+
+.landing-card-version {
+    display: inline-block;
+    margin-left: 0.25rem;
+    padding: 0 0.4rem;
+    border: 1px solid var(--color-accent);
+    border-radius: 0.25rem;
+    color: var(--color-text-aside);
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.landing-card p {
+    flex: 1;
+    margin: 0 0 1rem;
+    color: var(--color-text-aside);
+    font-size: 0.875rem;
+}
+
+.landing-card-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.landing-link {
+    display: inline-block;
+    padding: 0.375rem 0.75rem;
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
+    background-color: var(--color-link);
+    color: var(--color-background);
+    font-size: 0.875rem;
+}
+
+.landing-link:hover {
+    filter: brightness(1.1);
+}
+
+.landing-link.legacy {
+    background-color: transparent;
+    border-color: var(--color-accent);
+    color: var(--color-text-aside);
+}
+
+/* Single ↗ indicator in the button's text color; suppress TypeDoc's
+   black/white a.external[target="_blank"] background icon */
+.landing-link.external {
+    background-image: none;
+    padding-right: 0.75rem;
+}
+
+.landing-link.external::after {
+    content: " ↗";
+}
+
+.landing-nav-category {
+    margin: 1rem 0 0.25rem;
+    color: var(--color-text-aside);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.site-menu .landing-nav-category:first-child {
+    margin-top: 0;
+}
diff --git a/build.mjs b/build.mjs
index fd38743..c644712 100644
--- a/build.mjs
+++ b/build.mjs
@@ -25,9 +25,12 @@ try {
  */
 function parseBranchArgs() {
   const args = process.argv.slice(2);
-  
+
   // Process arguments in the format: repo=branch (e.g., engine=dev)
   for (const arg of args) {
+    if (arg === '--landing-only') {
+      continue;
+    }
     const match = arg.match(/^([^=]+)=(.+)$/);
     if (match) {
       const [, repoName, branchName] = match;
@@ -96,6 +99,149 @@ function copyDirContents(src, dest) {
   }
 }
 
+/**
+ * Read the version of each cloned repository from its package.json
+ */
+function getRepoVersions() {
+  const versions = {};
+
+  for (const repo of REPOS) {
+    const packagePath = path.join('repos', repo.name, 'package.json');
+    try {
+      const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf8'));
+      versions[repo.name] = packageJson.version || '';
+    } catch (error) {
+      console.warn(`Warning: Could not read version for ${repo.name}: ${error.message}`);
+      versions[repo.name] = '';
+    }
+  }
+
+  return versions;
+}
+
+/**
+ * Generate the landing page from the index.html template, injecting the
+ * build date and per-repository version numbers
+ */
+function generateLandingPage(versions) {
+  const sourceIndexPath = path.join(__dirname, 'index.html');
+  if (!fs.existsSync(sourceIndexPath)) {
+    throw new Error(`Source index.html not found: ${sourceIndexPath}`);
+  }
+
+  let html = fs.readFileSync(sourceIndexPath, 'utf8');
+
+  const buildDate = new Date().toLocaleDateString('en-US', {
+    year: 'numeric', month: 'long', day: 'numeric'
+  });
+  html = html.replace(/\{\{BUILD_DATE\}\}/g, buildDate);
+
+  html = html.replace(/v\{\{VERSION:([\w-]+)\}\}/g, (match, name) => {
+    return versions[name] ? `v${versions[name]}` : '';
+  });
+
+  // Remove version badges left empty by missing versions
+  html = html.replace(/\s*<span class="landing-card-version">\s*<\/span>/g, '');
+
+  fs.writeFileSync(path.join('docs', 'index.html'), html);
+  console.log('Generated landing page with build date and versions');
+}
+
+/**
+ * Copy TypeDoc's generated stylesheet and icons into docs/assets so the
+ * landing page shares the exact theme of the product references
+ */
+function copySharedAssets() {
+  const engineAssets = path.join('docs', 'engine', 'assets');
+  const stylePath = path.join(engineAssets, 'style.css');
+  if (!fs.existsSync(stylePath)) {
+    throw new Error(`TypeDoc stylesheet not found: ${stylePath}. Run a full build first.`);
+  }
+
+  ensureDir(path.join('docs', 'assets'));
+  fs.copyFileSync(stylePath, path.join('docs', 'assets', 'style.css'));
+  fs.copyFileSync(path.join(engineAssets, 'icons.svg'), path.join('docs', 'assets', 'icons.svg'));
+  console.log('Copied shared TypeDoc assets (style.css, icons.svg)');
+}
+
+/**
+ * Post-process the generated TypeDoc pages so the way back to the landing
+ * page is obvious: turn the toolbar title into a breadcrumb (PlayCanvas /
+ * <product>) and rename the sidebar "Home" link. All replacements are
+ * idempotent so this can re-run over already-processed docs.
+ */
+function postProcessProductDocs() {
+  const breadcrumb = '<a href="/" class="title-home">Home</a><span class="title-sep" aria-hidden="true">/</span>';
+  const breadcrumbCss = `
+/* api-reference: toolbar breadcrumb back to the landing page */
+.tsd-toolbar-contents > .title-home {
+    font-weight: bold;
+    white-space: nowrap;
+}
+.tsd-toolbar-contents > .title-sep {
+    margin: 0 0.5rem;
+    color: var(--color-text-aside);
+}
+@media (max-width: 769px) {
+    .tsd-toolbar-contents > .title-home,
+    .tsd-toolbar-contents > .title-sep {
+        display: none;
+    }
+}
+`;
+
+  const processHtml = (file) => {
+    const html = fs.readFileSync(file, 'utf8');
+    let updated = html;
+
+    // Each replacement is independently idempotent
+    if (!updated.includes('class="title-home"')) {
+      updated = updated.replace(/<a href="[^"]*" class="title">/, match => breadcrumb + match);
+    }
+    updated = updated.replace(
+      /(<nav id="tsd-sidebar-links" class="tsd-navigation"><a href="[^"]*">)Home(<\/a>)/,
+      '$1← All API References$2'
+    );
+
+    if (updated === html) {
+      return false;
+    }
+    fs.writeFileSync(file, updated);
+    return true;
+  };
+
+  const walk = (dir) => {
+    let count = 0;
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      const entryPath = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        count += walk(entryPath);
+      } else if (entry.name.endsWith('.html')) {
+        count += processHtml(entryPath) ? 1 : 0;
+      }
+    }
+    return count;
+  };
+
+  for (const repo of REPOS) {
+    const targetFolderName = repo.name === 'editor-api' ? 'editor' : repo.name;
+    const targetDir = path.join('docs', targetFolderName);
+    if (!fs.existsSync(targetDir)) {
+      console.warn(`Warning: No docs found for ${repo.name} at ${targetDir}`);
+      continue;
+    }
+
+    const count = walk(targetDir);
+
+    const stylePath = path.join(targetDir, 'assets', 'style.css');
+    if (fs.existsSync(stylePath) && !fs.readFileSync(stylePath, 'utf8').includes('title-home')) {
+      fs.appendFileSync(stylePath, breadcrumbCss);
+    }
+
+    console.log(`Post-processed ${count} pages in ${targetFolderName}`);
+  }
+}
+
 /**
  * Combine sitemap.xml files from all repositories
  */
@@ -362,22 +508,28 @@ function generateRedirects() {
  */
 async function buildDocs() {
   try {
+    // Skip cloning/building repos and only regenerate the landing page from
+    // an existing docs directory (fast local iteration)
+    const landingOnly = process.argv.includes('--landing-only');
+
     // Parse command line arguments for branch overrides
     parseBranchArgs();
-    
+
     // Create docs directory if it doesn't exist
     ensureDir('docs');
-    
+
     // Create .nojekyll file to prevent GitHub Pages from using Jekyll
     console.log('Creating .nojekyll file...');
     fs.writeFileSync(path.join('docs', '.nojekyll'), '');
-    
-    // Remove existing repos directory and create a new one
-    deleteDir('repos');
-    ensureDir('repos');
-    
+
+    if (!landingOnly) {
+      // Remove existing repos directory and create a new one
+      deleteDir('repos');
+      ensureDir('repos');
+    }
+
     // Process each repository
-    for (const repo of REPOS) {
+    for (const repo of landingOnly ? [] : REPOS) {
       console.log(`\n========== Processing ${repo.name} (branch: ${repo.branch}) ==========`);
       
       // Change to repos directory
@@ -412,33 +564,39 @@ async function buildDocs() {
       console.log(`Completed processing ${repo.name}`);
     }
     
-    // Copy the index.html to the docs directory
-    console.log('\nCopying index.html file...');
-    const sourceIndexPath = path.join(__dirname, 'index.html');
-    if (!fs.existsSync(sourceIndexPath)) {
-      throw new Error(`Source index.html not found: ${sourceIndexPath}`);
-    }
-    fs.copyFileSync(sourceIndexPath, path.join('docs', 'index.html'));
-    
+    // Make the route back to the landing page obvious on every product page
+    console.log('\nPost-processing product docs...');
+    postProcessProductDocs();
+
+    // Copy TypeDoc's stylesheet and icons for the landing page to share
+    console.log('\nCopying shared TypeDoc assets...');
+    copySharedAssets();
+
+    // Generate the landing page with build date and repo versions
+    console.log('Generating landing page...');
+    generateLandingPage(getRepoVersions());
+
     // Copy favicon
     console.log('Copying favicon...');
     fs.copyFileSync('favicon.ico', path.join('docs', 'favicon.ico'));
-    
+
     // Copy assets directory if it exists
     if (fs.existsSync('assets')) {
       console.log('Copying assets directory...');
       ensureDir(path.join('docs', 'assets'));
       copyDirContents('assets', path.join('docs', 'assets'));
     }
-    
-    // Generate combined sitemap
-    console.log('\nGenerating combined sitemap...');
-    combineSitemaps();
-    
-    // Generate redirects for old URLs
-    console.log('\nGenerating redirects for old URL structure...');
-    generateRedirects();
-    
+
+    if (!landingOnly) {
+      // Generate combined sitemap
+      console.log('\nGenerating combined sitemap...');
+      combineSitemaps();
+
+      // Generate redirects for old URLs
+      console.log('\nGenerating redirects for old URL structure...');
+      generateRedirects();
+    }
+
     console.log('\nDocumentation build complete. Run "npm run serve" to view it.');
   } catch (error) {
     console.error(`\nError: ${error.message}`);
diff --git a/index.html b/index.html
index 6bf85b0..ef3039b 100644
--- a/index.html
+++ b/index.html
@@ -1,909 +1,179 @@
 <!DOCTYPE html>
-<html class="default" data-theme="dark" lang="en">
+<html class="default" lang="en" data-base="./">
 <head>
     <meta charset="utf-8">
+    <link rel="canonical" href="https://api.playcanvas.com/">
     <meta http-equiv="x-ua-compatible" content="IE=edge">
     <title>PlayCanvas API Reference</title>
     <meta name="description" content="API Reference for the PlayCanvas libraries">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" href="favicon.ico">
-    <style>
-        :root {
-            --light-color-background: #fff;
-            --light-color-background-secondary: #fbfbfb;
-            --light-color-warning-text: #222;
-            --light-color-background-warning: #f0ad4e;
-            --light-color-text: #222;
-            --light-color-text-aside: #707070;
-            --light-color-link: #4da6ff;
-            --light-color-menu-divider: #eee;
-            --light-color-menu-divider-focus: #000;
-            --light-color-menu-label: #707070;
-            --light-color-panel: #fbfbfb;
-            --light-color-panel-divider: #eee;
-            --light-color-comment-tag: #707070;
-            --light-color-comment-tag-text: #fff;
-            --light-color-ts: #9600ff;
-            --light-color-ts-interface: #647f1b;
-            --light-color-ts-enum: #937210;
-            --light-color-ts-class: #0672de;
-            --light-color-ts-private: #707070;
-            --light-color-toolbar: #fbfbfb;
-            --light-color-toolbar-text: #333;
-            --light-icon-filter: invert(0);
-            --light-external-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='10' height='10'><path fill-opacity='0' stroke='%23000' stroke-width='10' d='m43,35H5v60h60V57M45,5v10l10,10-30,30 20,20 30-30 10,10h10V5z'/></svg>");
-
-            --dark-color-background: #1e1e1e;
-            --dark-color-background-secondary: #2d2d2d;
-            --dark-color-warning-text: #222;
-            --dark-color-background-warning: #f0ad4e;
-            --dark-color-text: #e3e3e3;
-            --dark-color-text-aside: #9b9b9b;
-            --dark-color-link: #4da6ff;
-            --dark-color-menu-divider: #424242;
-            --dark-color-menu-divider-focus: #fff;
-            --dark-color-menu-label: #9b9b9b;
-            --dark-color-panel: #2d2d2d;
-            --dark-color-panel-divider: #424242;
-            --dark-color-comment-tag: #9b9b9b;
-            --dark-color-comment-tag-text: #fff;
-            --dark-color-ts: #b382ff;
-            --dark-color-ts-interface: #a5c261;
-            --dark-color-ts-enum: #daa520;
-            --dark-color-ts-class: #4da6ff;
-            --dark-color-ts-private: #9b9b9b;
-            --dark-color-toolbar: #2d2d2d;
-            --dark-color-toolbar-text: #e3e3e3;
-            --dark-icon-filter: invert(1);
-            --dark-external-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='10' height='10'><path fill-opacity='0' stroke='%23fff' stroke-width='10' d='m43,35H5v60h60V57M45,5v10l10,10-30,30 20,20 30-30 10,10h10V5z'/></svg>");
-        }
-
-        /* Default dark theme to match TypeDoc */
-        html {
-            color-scheme: dark;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            font-size: 16px;
-            line-height: 1.6;
-            margin: 0;
-            padding: 0;
-            color: var(--dark-color-text);
-            background-color: var(--dark-color-background);
-        }
-
-        html[data-theme="light"] body {
-            color: var(--light-color-text);
-            background-color: var(--light-color-background);
-            color-scheme: light;
-        }
-
-        .tsd-page-toolbar {
-            position: fixed;
-            z-index: 1;
-            top: 0;
-            left: 0;
-            width: 100%;
-            color: var(--dark-color-toolbar-text);
-            background-color: var(--dark-color-toolbar);
-            border-bottom: 1px solid var(--dark-color-panel-divider);
-            transition: transform 0.3s ease-in-out;
-        }
-
-        html[data-theme="light"] .tsd-page-toolbar {
-            color: var(--light-color-toolbar-text);
-            background-color: var(--light-color-toolbar);
-            border-bottom-color: var(--light-color-panel-divider);
-        }
-
-        .tsd-page-toolbar a {
-            color: var(--dark-color-toolbar-text);
-            text-decoration: none;
-        }
-
-        html[data-theme="light"] .tsd-page-toolbar a {
-            color: var(--light-color-toolbar-text);
-        }
-
-        .tsd-page-toolbar a:hover {
-            text-decoration: underline;
-        }
-
-        .tsd-page-toolbar .tsd-toolbar-contents {
-            display: flex;
-            min-height: 40px;
-            padding: 8px 16px;
-            align-items: center;
-            justify-content: space-between;
-        }
-
-        .title {
-            font-size: 16px;
-            font-weight: normal;
-            flex: 1;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .title a {
-            display: flex;
-            align-items: center;
-        }
-
-        .title em {
-            font-style: normal;
-            font-weight: bold;
-        }
-
-        .tsd-toolbar-links {
-            display: flex;
-            gap: 16px;
-            font-size: 14px;
-            margin: 0 20px;
-        }
-
-        .tsd-toolbar-links a {
-            white-space: nowrap;
-        }
-
-        .tsd-widget {
-            cursor: pointer;
-            opacity: 0.7;
-            transition: opacity 0.2s;
-            margin-left: 16px;
-        }
-
-        .tsd-widget:hover {
-            opacity: 1;
-        }
-
-        .tsd-widget.search {
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" fill="%23e3e3e3"></path></svg>') 0 0 no-repeat;
-            filter: var(--dark-icon-filter);
-            height: 16px;
-            width: 16px;
-        }
-
-        html[data-theme="light"] .tsd-widget.search {
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" fill="%23333"></path></svg>') 0 0 no-repeat;
-            filter: var(--light-icon-filter);
-        }
-
-        .tsd-widget.menu {
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23e3e3e3" d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>') 0 0 no-repeat;
-            filter: var(--dark-icon-filter);
-            height: 16px;
-            width: 16px;
-        }
-
-        html[data-theme="light"] .tsd-widget.menu {
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23333" d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>') 0 0 no-repeat;
-            filter: var(--light-icon-filter);
-        }
-
-        .tsd-widget.theme {
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23e3e3e3" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Zm0-1.5v-17a8.5 8.5 0 0 1 0 17Z"/></svg>') 0 0 no-repeat;
-            filter: var(--dark-icon-filter);
-            height: 16px;
-            width: 16px;
-        }
-
-        html[data-theme="light"] .tsd-widget.theme {
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23333" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Zm0-1.5v-17a8.5 8.5 0 0 1 0 17Z"/></svg>') 0 0 no-repeat;
-            filter: var(--light-icon-filter);
-        }
-
-        .tsd-page-title {
-            padding: 70px 0 20px;
-            margin: 0 0 40px;
-            background-color: var(--dark-color-panel);
-            border-bottom: 1px solid var(--dark-color-panel-divider);
-        }
-
-        html[data-theme="light"] .tsd-page-title {
-            background-color: var(--light-color-panel);
-            border-bottom-color: var(--light-color-panel-divider);
-        }
-
-        .tsd-page-title .container {
-            padding: 0 20px;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .tsd-page-title h1 {
-            font-size: 32px;
-            font-weight: 600;
-            margin: 0;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
-        }
-
-        .row {
-            display: flex;
-            position: relative;
-        }
-
-        .col-4 {
-            flex: 0 0 25%;
-            max-width: 25%;
-            padding: 0 10px;
-            position: relative;
-        }
-
-        .col-8 {
-            flex: 0 0 75%;
-            max-width: 75%;
-            padding: 0 10px;
-            position: relative;
-        }
-
-        .tsd-navigation {
-            padding: 0 0 0 20px;
-            margin: 0 0 40px;
-        }
-        
-        .tsd-navigation.primary {
-            padding-bottom: 40px;
-            position: sticky;
-            top: 70px;
-            z-index: 0;
-        }
-
-        .tsd-navigation a {
-            display: block;
-            padding: 4px 0;
-            color: var(--dark-color-text);
-            text-decoration: none;
-        }
-
-        html[data-theme="light"] .tsd-navigation a {
-            color: var(--light-color-text);
-        }
-
-        .tsd-navigation a:hover {
-            color: var(--light-color-link);
-            text-decoration: underline;
-        }
-
-        html[data-theme="light"] .tsd-navigation a:hover {
-            color: var(--dark-color-link);
-        }
-        
-        .tsd-navigation h3 {
-            margin: 0;
-            padding: 0;
-            font-size: 16px;
-            font-weight: 600;
-            margin-bottom: 10px;
-        }
-        
-        .tsd-navigation ul {
-            margin: 0;
-            padding: 0;
-            list-style: none;
-        }
-        
-        .tsd-navigation li {
-            margin: 0 0 8px;
-            position: relative;
-        }
-
-        .tsd-panel {
-            background-color: var(--dark-color-background-secondary);
-            border-radius: 4px;
-            box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
-            padding: 20px;
-            position: relative;
-            margin-bottom: 20px;
-        }
-
-        html[data-theme="light"] .tsd-panel {
-            background-color: var(--light-color-background-secondary);
-            box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
-        }
-
-        .tsd-panel.tsd-module {
-            margin-bottom: 20px;
-        }
-
-        .tsd-panel h3 {
-            margin-top: 0;
-            margin-bottom: 12px;
-            font-size: 20px;
-            font-weight: 600;
-        }
-
-        .tsd-panel-group {
-            margin-bottom: 40px;
-        }
-
-        .tsd-module-index {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 20px;
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        .tsd-panel-margin {
-            margin-bottom: 20px;
-        }
-
-        .tsd-panel > h1, .tsd-panel > h2, .tsd-panel > h3, .tsd-panel > h4 {
-            margin-top: 0;
-            margin-bottom: 12px;
-            font-weight: 600;
-        }
-
-        .tsd-flag {
-            display: inline-block;
-            padding: 2px 6px;
-            margin-top: -2px;
-            margin-left: 8px;
-            color: var(--light-color-comment-tag-text);
-            background-color: var(--light-color-comment-tag);
-            font-weight: 500;
-            font-size: 12px;
-            border-radius: 4px;
-            vertical-align: middle;
-        }
-
-        html[data-theme="light"] .tsd-flag {
-            color: var(--dark-color-comment-tag-text);
-            background-color: var(--dark-color-comment-tag);
-        }
-
-        .tsd-anchor {
-            position: absolute;
-            top: -100px;
-        }
-
-        .tsd-footer {
-            background-color: var(--dark-color-panel);
-            border-top: 1px solid var(--dark-color-panel-divider);
-            padding: 20px 0;
-            margin-top: 60px;
-            text-align: center;
-            font-size: 14px;
-            color: var(--dark-color-text-aside);
-        }
-
-        html[data-theme="light"] .tsd-footer {
-            background-color: var(--light-color-panel);
-            border-top-color: var(--light-color-panel-divider);
-            color: var(--light-color-text-aside);
-        }
-
-        .tsd-footer .container {
-            padding: 0 20px;
-        }
-
-        .tsd-footer a {
-            color: var(--dark-color-link);
-            text-decoration: none;
-        }
-
-        html[data-theme="light"] .tsd-footer a {
-            color: var(--light-color-link);
-        }
-
-        .tsd-footer a:hover {
-            text-decoration: underline;
-        }
-
-        .tsd-search {
-            position: fixed;
-            top: 0;
-            right: 0;
-            left: 0;
-            background-color: var(--light-color-panel);
-            opacity: 0;
-            visibility: hidden;
-            transition: opacity 0.2s, visibility 0.2s;
-            border-bottom: 1px solid var(--light-color-panel-divider);
-            z-index: 2;
-        }
-
-        html[data-theme="light"] .tsd-search {
-            background-color: var(--dark-color-panel);
-            border-bottom-color: var(--dark-color-panel-divider);
-        }
-
-        .tsd-search.active {
-            opacity: 1;
-            visibility: visible;
-        }
-
-        .tsd-search .container {
-            display: flex;
-            padding: 12px 20px;
-            position: relative;
-            height: 40px;
-        }
-
-        .tsd-search input {
-            flex: 1;
-            border: 0;
-            background: transparent;
-            padding: 0;
-            font-family: inherit;
-            font-size: 16px;
-            color: var(--light-color-text);
-            outline: 0;
-        }
-
-        html[data-theme="light"] .tsd-search input {
-            color: var(--dark-color-text);
-        }
-
-        .tsd-search input::-webkit-input-placeholder {
-            color: var(--light-color-text-aside);
-        }
-
-        html[data-theme="light"] .tsd-search input::-webkit-input-placeholder {
-            color: var(--dark-color-text-aside);
-        }
-
-        .tsd-search-close {
-            position: absolute;
-            right: 20px;
-            top: 12px;
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path d="M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z" fill="%23333"></path></svg>') 0 0 no-repeat;
-            filter: var(--light-icon-filter);
-            height: 16px;
-            width: 16px;
-            opacity: 0.7;
-            cursor: pointer;
-            transition: opacity 0.2s;
-        }
-
-        html[data-theme="light"] .tsd-search-close {
-            filter: var(--dark-icon-filter);
-        }
-
-        .tsd-search-close:hover {
-            opacity: 1;
-        }
-
-        .tsd-search-results {
-            position: absolute;
-            top: 41px;
-            width: 100%;
-            left: 0;
-            box-sizing: border-box;
-            background-color: var(--light-color-background);
-            border-bottom: 1px solid var(--light-color-panel-divider);
-            border-left: 1px solid var(--light-color-panel-divider);
-            border-right: 1px solid var(--light-color-panel-divider);
-            padding: 10px 20px;
-            display: none;
-            max-height: 75vh;
-            overflow-y: auto;
-        }
-
-        html[data-theme="light"] .tsd-search-results {
-            background-color: var(--dark-color-background);
-            border-color: var(--dark-color-panel-divider);
-        }
-
-        .tsd-search.has-results .tsd-search-results {
-            display: block;
-        }
-
-        .tsd-search-result-group {
-            margin: 0 0 12px;
-        }
-
-        .tsd-search-result-group > h2 {
-            font-size: 16px;
-            font-weight: 600;
-            margin: 0 0 8px;
-        }
-
-        .tsd-search-result-item {
-            padding: 4px 0;
-        }
-
-        .tsd-search-result-item a {
-            color: var(--light-color-text);
-            text-decoration: none;
-            display: block;
-        }
-
-        html[data-theme="light"] .tsd-search-result-item a {
-            color: var(--dark-color-text);
-        }
-
-        .tsd-search-result-item a:hover {
-            color: var(--light-color-link);
-            text-decoration: underline;
-        }
-
-        html[data-theme="light"] .tsd-search-result-item a:hover {
-            color: var(--dark-color-link);
-        }
-
-        .tsd-search-result-item .tsd-kind-icon {
-            margin-right: 8px;
-            opacity: 0.7;
-        }
-
-        .tsd-filter-options {
-            display: flex;
-            gap: 12px;
-            margin-bottom: 16px;
-        }
-
-        .tsd-filter-group {
-            background-color: var(--light-color-background-secondary);
-            border-radius: 4px;
-            padding: 8px 12px;
-            border: 1px solid var(--light-color-panel-divider);
-        }
-
-        html[data-theme="light"] .tsd-filter-group {
-            background-color: var(--dark-color-background-secondary);
-            border-color: var(--dark-color-panel-divider);
-        }
-
-        .tsd-filter-group h5 {
-            margin: 0 0 8px;
-            font-size: 14px;
-            font-weight: 600;
-        }
-
-        .tsd-filter-item {
-            display: flex;
-            align-items: center;
-            margin-bottom: 4px;
-        }
-
-        .tsd-filter-input {
-            margin-right: 6px;
-        }
-
-        /* Module-specific adjustments for our content */
-        .module-item {
-            background-color: var(--dark-color-background-secondary);
-            border-radius: 4px;
-            padding: 20px;
-            border: 1px solid var(--dark-color-panel-divider);
-            transition: transform 0.2s, box-shadow 0.2s;
-        }
-
-        html[data-theme="light"] .module-item {
-            background-color: var(--light-color-background-secondary);
-            border-color: var(--light-color-panel-divider);
-        }
-
-        .module-item:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-        }
-
-        html[data-theme="light"] .module-item:hover {
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-        }
-
-        .module-item h3 {
-            margin-top: 0;
-            color: var(--dark-color-text);
-        }
-
-        html[data-theme="light"] .module-item h3 {
-            color: var(--light-color-text);
-        }
-
-        .module-item p {
-            margin-bottom: 20px;
-            color: var(--dark-color-text-aside);
-        }
-
-        html[data-theme="light"] .module-item p {
-            color: var(--light-color-text-aside);
-        }
-
-        .module-link {
-            display: inline-block;
-            padding: 8px 16px;
-            background-color: var(--dark-color-link);
-            color: #fff;
-            text-decoration: none;
-            border-radius: 4px;
-            transition: background-color 0.2s;
-            margin-right: 8px;
-            min-width: 145px;
-            text-align: center;
-            margin-bottom: 8px;
-        }
-
-        .module-link.external::after {
-            content: ' ↗';
-            padding-left: 8px;
-            vertical-align: middle;
-        }
-
-        .module-link.legacy {
-            background-color: rgba(77, 166, 255, 0.3);
-            color: rgba(255, 255, 255, 0.8);
-        }
-
-        html[data-theme="light"] .module-link.legacy {
-            background-color: rgba(0, 102, 204, 0.3);
-            color: rgba(0, 0, 0, 0.6);
-        }
-
-        .module-link:hover {
-            background-color: #2a80e9;
-            text-decoration: none;
-        }
-
-        html[data-theme="light"] .module-link:hover {
-            background-color: #0066cc;
-        }
-        
-        /* Mobile responsiveness */
-        @media (max-width: 900px) {
-            .row {
-                flex-direction: column;
-            }
-            
-            .col-4, .col-8 {
-                flex: 0 0 100%;
-                max-width: 100%;
-            }
-            
-            .tsd-navigation.primary {
-                position: static;
-            }
-
-            .tsd-toolbar-links {
-                display: none;
-            }
-
-            .title {
-                max-width: 70%;
-            }
-        }
-
-        @media (max-width: 600px) {
-            .title {
-                font-size: 14px;
-            }
-        }
-    </style>
-    <script>
-        // Function to set theme - use TypeDoc's localStorage key for consistency
-        function setTheme(theme) {
-            document.documentElement.setAttribute('data-theme', theme);
-            localStorage.setItem('tsd-theme', theme);
-        }
-
-        // Check for saved theme preference in TypeDoc's localStorage key
-        const savedTheme = localStorage.getItem('tsd-theme');
-        if (savedTheme === 'light' || savedTheme === 'dark') {
-            setTheme(savedTheme);
-        } else {
-            // Check for system preference
-            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
-                setTheme('light');
-            } else {
-                setTheme('dark');
-            }
-        }
-
-        // Listen for system theme changes if no saved preference
-        if (window.matchMedia) {
-            window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
-                if (!localStorage.getItem('tsd-theme')) {
-                    setTheme(e.matches ? 'light' : 'dark');
-                }
-            });
-        }
-
-        // Add theme toggle functionality
-        document.addEventListener('DOMContentLoaded', () => {
-            const themeToggle = document.querySelector('.tsd-widget.theme');
-            if (themeToggle) {
-                themeToggle.addEventListener('click', () => {
-                    const currentTheme = document.documentElement.getAttribute('data-theme');
-                    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-                    setTheme(newTheme);
-                });
-            }
-        });
-    </script>
+    <link rel="stylesheet" href="assets/style.css">
+    <link rel="stylesheet" href="assets/landing.css">
 </head>
 <body>
-    <a class="tsd-anchor" id="top"></a>
-    
+    <script>(() => {
+        const theme = localStorage.getItem("tsd-theme");
+        document.documentElement.dataset.theme = ["os", "light", "dark"].includes(theme) ? theme : "os";
+    })();</script>
     <header class="tsd-page-toolbar">
         <div class="tsd-toolbar-contents container">
-            <div class="title">
-                <a href="./index.html">
-                    <em>PlayCanvas</em> API Reference
-                </a>
-            </div>
-            <div class="tsd-toolbar-links">
-                <a href="https://developer.playcanvas.com" target="_blank">Developer Site</a>
-                <a href="https://forum.playcanvas.com" target="_blank">Forum</a>
-                <a href="https://blog.playcanvas.com" target="_blank">Blog</a>
-                <a href="https://github.com/playcanvas" target="_blank">GitHub</a>
-                <a href="https://discord.gg/RSaMRzg" target="_blank">Discord</a>
-            </div>
-            <div id="tsd-widgets">
-                <a href="#" class="tsd-widget search" data-show=".tsd-search" title="Search"></a>
-                <a href="#" class="tsd-widget menu" data-show=".menu-popup" title="Menu"></a>
-                <a href="#" class="tsd-widget theme" data-show=".theme-popup" title="Theme"></a>
+            <a href="./" class="title">PlayCanvas API Reference</a>
+            <div id="tsd-toolbar-links">
+                <a href="https://developer.playcanvas.com/">Developer Site</a>
+                <a href="https://blog.playcanvas.com/">Blog</a>
+                <a href="https://discord.gg/RSaMRzg">Discord</a>
+                <a href="https://forum.playcanvas.com/">Forum</a>
+                <a href="https://github.com/playcanvas">GitHub</a>
             </div>
+            <a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu" aria-expanded="false"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-menu"></use></svg></a>
         </div>
     </header>
-    
-    <div class="tsd-search">
-        <div class="container">
-            <input type="text" class="tsd-search-field" placeholder="Search..." id="searchInput">
-            <div class="tsd-search-close" id="searchClose"></div>
-        </div>
-        <div class="tsd-search-results container"></div>
-    </div>
-
-    <div class="tsd-page-title">
-        <div class="container">
-            <h1>PlayCanvas API Reference</h1>
-        </div>
-    </div>
-    
-    <div class="container">
-        <div class="row">
-            <div class="col-4">
-                <nav class="tsd-navigation primary">
-                    <h3>API References</h3>
-                    <ul>
-                        <li><a href="./engine/">Engine</a></li>
-                        <li><a href="./web-components/">Web Components</a></li>
-                        <li><a href="./editor/">Editor</a></li>
-                        <li><a href="./observer/">Observer</a></li>
-                        <li><a href="./pcui/">PCUI</a></li>
-                        <li><a href="./pcui-graph/">PCUI Graph</a></li>
-                        <li><a href="./splat-transform/">Splat Transform</a></li>
-                    </ul>
-                </nav>
+    <div class="container container-main">
+        <div class="col-content">
+            <div class="tsd-page-title">
+                <h1>PlayCanvas API Reference</h1>
             </div>
-            
-            <div class="col-8">
-                <div class="tsd-panel-group">
-                    <div class="tsd-panel tsd-typography">
-                        <p>Welcome to the PlayCanvas API references. These API documentation sets provide detailed information about the various PlayCanvas libraries and tools. Select one of the modules below to explore its API reference.</p>
-                    </div>
-                
-                    <section class="tsd-panel-group tsd-module">
-                        <h2>Available API References</h2>
-                        <ul class="tsd-module-index" id="searchableModules">
-                            <li class="module-item" data-name="engine">
-                                <h3>📖 Engine</h3>
-                                <p>The core PlayCanvas engine featuring rendering, physics, animation, sound, and more.</p>
-                                <a href="./engine/" class="module-link">v2.x API (current)</a>
-                                <a href="./engine-v1/" class="module-link legacy">v1.x API (legacy)</a>
-                            </li>
-                            <li class="module-item" data-name="editor">
-                                <h3>📖 Editor</h3>
-                                <p>API for interfacing with the PlayCanvas Editor.</p>
-                                <a href="./editor/" class="module-link">View API Reference</a>
-                            </li>
-                            <li class="module-item" data-name="react">
-                                <h3>📖 React</h3>
-                                <p>Use React’s declarative power to build PlayCanvas apps with components, hooks, and JSX.</p>
-                                <a href="https://developer.playcanvas.com/user-manual/react/api" class="module-link external">View API Reference</a>
-                            </li>
-                            <li class="module-item" data-name="web-components">
-                                <h3>📖 Web Components</h3>
-                                <p>Custom HTML elements for building declarative PlayCanvas applications.</p>
-                                <a href="./web-components/" class="module-link">View API Reference</a>
-                            </li>
-                            <li class="module-item" data-name="pcui">
-                                <h3>📖 PCUI</h3>
-                                <p>User interface component library for creating tools and editors.</p>
-                                <a href="./pcui/" class="module-link">View API Reference</a>
-                            </li>
-                            <li class="module-item" data-name="pcui-graph">
-                                <h3>📖 PCUI Graph</h3>
-                                <p>Graph user interface components for creating node-based editors.</p>
-                                <a href="./pcui-graph/" class="module-link">View API Reference</a>
-                            </li>
-                            <li class="module-item" data-name="observer">
-                                <h3>📖 Observer</h3>
-                                <p>Reactive data observation and binding system.</p>
-                                <a href="./observer/" class="module-link">View API Reference</a>
-                            </li>
-                            <li class="module-item" data-name="splat-transform">
-                                <h3>📖 Splat Transform</h3>
-                                <p>Library and CLI tool for converting and editing 3D Gaussian splats.</p>
-                                <a href="./splat-transform/" class="module-link">View API Reference</a>
-                            </li>
-                        </ul>
-                    </section>
+            <section class="tsd-panel tsd-typography">
+                <p>Welcome to the PlayCanvas API references. These API documentation sets provide detailed
+                information about the various PlayCanvas libraries and tools. Select a product below to
+                explore its API reference.</p>
+            </section>
+            <section class="tsd-panel">
+                <h2>PlayCanvas Development</h2>
+                <ul class="landing-cards">
+                    <li class="landing-card">
+                        <h3>📖 Engine <span class="landing-card-version">v{{VERSION:engine}}</span></h3>
+                        <p>The core PlayCanvas engine featuring rendering, physics, animation, sound, and more.</p>
+                        <div class="landing-card-links">
+                            <a href="engine/" class="landing-link">View API Reference</a>
+                            <a href="engine-v1/" class="landing-link legacy">v{{VERSION:engine-v1}} (legacy)</a>
+                        </div>
+                    </li>
+                    <li class="landing-card">
+                        <h3>📖 Editor <span class="landing-card-version">v{{VERSION:editor-api}}</span></h3>
+                        <p>API for interfacing with the PlayCanvas Editor.</p>
+                        <div class="landing-card-links">
+                            <a href="editor/" class="landing-link">View API Reference</a>
+                        </div>
+                    </li>
+                    <li class="landing-card">
+                        <h3>📖 React <span class="landing-card-version">External</span></h3>
+                        <p>Use React’s declarative power to build PlayCanvas apps with components, hooks, and JSX.</p>
+                        <div class="landing-card-links">
+                            <a href="https://developer.playcanvas.com/user-manual/react/api" target="_blank" rel="noopener noreferrer" class="landing-link external">View API Reference</a>
+                        </div>
+                    </li>
+                    <li class="landing-card">
+                        <h3>📖 Web Components <span class="landing-card-version">v{{VERSION:web-components}}</span></h3>
+                        <p>Custom HTML elements for building declarative PlayCanvas applications.</p>
+                        <div class="landing-card-links">
+                            <a href="web-components/" class="landing-link">View API Reference</a>
+                        </div>
+                    </li>
+                </ul>
+            </section>
+            <section class="tsd-panel">
+                <h2>Foundational Libraries</h2>
+                <ul class="landing-cards">
+                    <li class="landing-card">
+                        <h3>📖 PCUI <span class="landing-card-version">v{{VERSION:pcui}}</span></h3>
+                        <p>User interface component library for creating tools and editors.</p>
+                        <div class="landing-card-links">
+                            <a href="pcui/" class="landing-link">View API Reference</a>
+                        </div>
+                    </li>
+                    <li class="landing-card">
+                        <h3>📖 PCUI Graph <span class="landing-card-version">v{{VERSION:pcui-graph}}</span></h3>
+                        <p>Graph user interface components for creating node-based editors.</p>
+                        <div class="landing-card-links">
+                            <a href="pcui-graph/" class="landing-link">View API Reference</a>
+                        </div>
+                    </li>
+                    <li class="landing-card">
+                        <h3>📖 Observer <span class="landing-card-version">v{{VERSION:observer}}</span></h3>
+                        <p>Reactive data observation and binding system.</p>
+                        <div class="landing-card-links">
+                            <a href="observer/" class="landing-link">View API Reference</a>
+                        </div>
+                    </li>
+                    <li class="landing-card">
+                        <h3>📖 Splat Transform <span class="landing-card-version">v{{VERSION:splat-transform}}</span></h3>
+                        <p>Library and CLI tool for converting and editing 3D Gaussian splats.</p>
+                        <div class="landing-card-links">
+                            <a href="splat-transform/" class="landing-link">View API Reference</a>
+                        </div>
+                    </li>
+                </ul>
+            </section>
+        </div>
+        <div class="col-sidebar">
+            <div class="page-menu">
+                <div class="tsd-navigation settings">
+                    <details class="tsd-accordion">
+                        <summary class="tsd-accordion-summary">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg>
+                            <h3>Settings</h3>
+                        </summary>
+                        <div class="tsd-accordion-details">
+                            <div class="tsd-theme-toggle">
+                                <label class="settings-label" for="tsd-theme">Theme</label>
+                                <select id="tsd-theme">
+                                    <option value="os">OS</option>
+                                    <option value="light">Light</option>
+                                    <option value="dark">Dark</option>
+                                </select>
+                            </div>
+                        </div>
+                    </details>
                 </div>
             </div>
+            <div class="site-menu">
+                <nav id="tsd-sidebar-links" class="tsd-navigation">
+                    <a href="https://developer.playcanvas.com/" class="tsd-nav-link">Developer Site</a>
+                    <a href="https://blog.playcanvas.com/" class="tsd-nav-link">Blog</a>
+                    <a href="https://discord.gg/RSaMRzg" class="tsd-nav-link">Discord</a>
+                    <a href="https://forum.playcanvas.com/" class="tsd-nav-link">Forum</a>
+                    <a href="https://github.com/playcanvas" class="tsd-nav-link">GitHub</a>
+                </nav>
+                <nav class="tsd-navigation">
+                    <h4 class="landing-nav-category">PlayCanvas Development</h4>
+                    <a href="engine/">Engine</a>
+                    <a href="editor/">Editor</a>
+                    <a href="https://developer.playcanvas.com/user-manual/react/api" target="_blank" rel="noopener noreferrer">React</a>
+                    <a href="web-components/">Web Components</a>
+                    <h4 class="landing-nav-category">Foundational Libraries</h4>
+                    <a href="pcui/">PCUI</a>
+                    <a href="pcui-graph/">PCUI Graph</a>
+                    <a href="observer/">Observer</a>
+                    <a href="splat-transform/">Splat Transform</a>
+                </nav>
+            </div>
         </div>
     </div>
-
-    <footer class="tsd-footer">
-        <div class="container">
-            <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
-            <p>Documentation generated on <span id="current-date"></span></p>
-        </div>
+    <footer>
+        <p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank" rel="noopener noreferrer">TypeDoc</a> on {{BUILD_DATE}}</p>
     </footer>
-    
+    <div class="overlay"></div>
     <script>
-        // Set current date in footer
-        document.getElementById('current-date').textContent = new Date().toLocaleDateString();
-        
-        // Search functionality
-        const searchBtn = document.querySelector('.tsd-widget.search');
-        const searchDiv = document.querySelector('.tsd-search');
-        const searchInput = document.getElementById('searchInput');
-        const searchClose = document.getElementById('searchClose');
-        const moduleItems = document.querySelectorAll('.module-item');
-        
-        searchBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            searchDiv.classList.toggle('active');
-            if (searchDiv.classList.contains('active')) {
-                searchInput.focus();
-            }
-        });
-        
-        searchClose.addEventListener('click', () => {
-            searchDiv.classList.remove('active');
-        });
-        
-        searchInput.addEventListener('input', () => {
-            const searchTerm = searchInput.value.toLowerCase().trim();
-            
-            if (searchTerm) {
-                searchDiv.classList.add('has-results');
-            } else {
-                searchDiv.classList.remove('has-results');
-            }
-            
-            moduleItems.forEach(item => {
-                const moduleName = item.getAttribute('data-name').toLowerCase();
-                const moduleTitle = item.querySelector('h3').textContent.toLowerCase();
-                const moduleDesc = item.querySelector('p').textContent.toLowerCase();
-                
-                if (moduleName.includes(searchTerm) || 
-                    moduleTitle.includes(searchTerm) || 
-                    moduleDesc.includes(searchTerm)) {
-                    item.style.display = '';
-                } else {
-                    item.style.display = 'none';
-                }
-            });
+        const themeSelect = document.getElementById("tsd-theme");
+        // dataset.theme was validated against os/light/dark on load
+        themeSelect.value = document.documentElement.dataset.theme;
+        themeSelect.addEventListener("change", () => {
+            localStorage.setItem("tsd-theme", themeSelect.value);
+            document.documentElement.dataset.theme = themeSelect.value;
         });
-        
-        // Close search on escape
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && searchDiv.classList.contains('active')) {
-                searchDiv.classList.remove('active');
-                searchDiv.classList.remove('has-results');
-            }
-        });
-        
-        // Menu toggle functionality
-        const menuBtn = document.querySelector('.tsd-widget.menu');
-        
-        menuBtn.addEventListener('click', (e) => {
+
+        const menuTrigger = document.getElementById("tsd-toolbar-menu-trigger");
+        menuTrigger.addEventListener("click", (e) => {
             e.preventDefault();
-            document.querySelector('.col-4').classList.toggle('visible');
+            const open = document.documentElement.classList.toggle("has-menu");
+            menuTrigger.setAttribute("aria-expanded", String(open));
+        });
+        document.querySelector(".overlay").addEventListener("click", () => {
+            document.documentElement.classList.remove("has-menu");
+            menuTrigger.setAttribute("aria-expanded", "false");
         });
     </script>
 </body>
-</html> 
+</html>
diff --git a/package.json b/package.json
index 2f82eec..475240f 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   },
   "scripts": {
     "build": "node build.mjs",
+    "build:landing": "node build.mjs --landing-only",
     "serve": "serve docs",
     "test": "echo \"Error: no test specified\" && exit 1"
   }