diff --git a/src/astro.config.ts b/src/astro.config.ts
index 76ac6eb..9b62644 100644
--- a/src/astro.config.ts
+++ b/src/astro.config.ts
@@ -110,6 +110,20 @@ export default defineConfig({
       customCss: ['./src/styles/global.css'],
       expressiveCode: {
         themes: ['starlight-light', 'starlight-dark'],
+        styleOverrides: {
+          borderRadius: '0.75rem',
+          codeFontFamily: 'var(--font-mono)',
+          uiFontFamily: 'var(--font-sans)',
+          frames: {
+            // Literal hex, not `var(--color-brand)`: Expressive Code parses these
+            // as colors (e.g. for opacity/contrast math), which breaks on CSS
+            // custom properties. #8b3dff is the brand purple in both themes.
+            editorActiveTabIndicatorTopColor: '#8b3dff',
+            editorActiveTabIndicatorBottomColor: '#8b3dff',
+            terminalTitlebarDotsForeground: '#8b3dff',
+            terminalTitlebarDotsOpacity: '0.6',
+          },
+        },
       },
       components: {
         Header: './src/components/starlight/Header.astro',
@@ -117,6 +131,7 @@ export default defineConfig({
         EditLink: './src/components/starlight/EditLink.astro',
         PageTitle: './src/components/starlight/PageTitle.astro',
         Search: './src/components/starlight/Search.astro',
+        Sidebar: './src/components/starlight/Sidebar.astro',
       },
       plugins: [
         starlightSidebarTopics(sidebarTopics),
diff --git a/src/src/components/SiteFooter.astro b/src/src/components/SiteFooter.astro
index d661e88..d6ccbec 100644
--- a/src/src/components/SiteFooter.astro
+++ b/src/src/components/SiteFooter.astro
@@ -1,13 +1,20 @@
 ---
 import SiteBrand from '~/components/SiteBrand.astro';
 import { NAV_ITEMS } from '~/components/SiteNav.astro';
+import { loadProjects } from '~/lib/manifest/load';
 import { SITE } from '~/lib/site';
 import { withBase } from '~/lib/urls';
+
+// Shuffled at build time so the footer doesn't always spotlight the same projects.
+const footerProjects = loadProjects()
+  .filter((project) => project.status !== 'archived')
+  .toSorted(() => Math.random() - 0.5)
+  .slice(0, 3);
 ---
 
 <footer class="border-t border-border bg-surface">
   <div class="pv-container py-10">
-    <div class="grid gap-8 md:grid-cols-[2fr_1fr_1fr_1fr]">
+    <div class="grid gap-8 md:grid-cols-[2fr_1fr_1fr_1fr_1fr]">
       <div class="max-w-sm space-y-3">
         <SiteBrand />
         <p class="text-sm text-muted">
@@ -35,15 +42,15 @@ import { withBase } from '~/lib/urls';
       <nav aria-label="Projects">
         <h2 class="text-xs font-semibold uppercase tracking-wider text-muted">Projects</h2>
         <ul class="mt-3 list-none space-y-2 text-sm">
-          <li>
-            <a href="https://github.com/purview-dev/telemetry-sourcegenerator" class="pv-link"
-              >Telemetry SourceGenerator</a>
-          </li>
-          <li>
-            <a href="https://github.com/purview-dev/event-sourcing" class="pv-link"
-              >Event Sourcing</a>
-          </li>
-          <li><a href="https://github.com/purview-dev/zodsharp" class="pv-link">Purview.ZodSharp</a></li>
+          {
+            footerProjects.map((project) => (
+              <li>
+                <a href={withBase(`/projects/${project.id}/`)} class="pv-link">
+                  {project.name}
+                </a>
+              </li>
+            ))
+          }
           <li><a href={withBase('/projects/')} class="pv-link">All projects</a></li>
         </ul>
       </nav>
@@ -57,6 +64,15 @@ import { withBase } from '~/lib/urls';
           <li><a href={withBase('/about/')} class="pv-link">About</a></li>
         </ul>
       </nav>
+
+      <nav aria-label="For LLMs">
+        <h2 class="text-xs font-semibold uppercase tracking-wider text-muted">For LLMs</h2>
+        <ul class="mt-3 list-none space-y-2 text-sm">
+          <li><a href={withBase('/llms.txt')} class="pv-link">llms.txt</a></li>
+          <li><a href={withBase('/llms-small.txt')} class="pv-link">llms-small.txt</a></li>
+          <li><a href={withBase('/llms-full.txt')} class="pv-link">llms-full.txt</a></li>
+        </ul>
+      </nav>
     </div>
 
     <div
diff --git a/src/src/components/islands/InstallPanel.tsx b/src/src/components/islands/InstallPanel.tsx
index 99c1630..be1492d 100644
--- a/src/src/components/islands/InstallPanel.tsx
+++ b/src/src/components/islands/InstallPanel.tsx
@@ -2,7 +2,18 @@ import type { InstallOption, InstallTab } from '~/lib/install';
 
 import { useState } from 'preact/hooks';
 
-function CodeBlock({ code }: { code: string }) {
+/** macOS-style traffic light dots that frame the code window, matching Expressive Code. */
+function FrameDots() {
+  return (
+    <span class="flex shrink-0 gap-1.5" aria-hidden="true">
+      <span class="h-2.5 w-2.5 rounded-full bg-[#ff5f56]" />
+      <span class="h-2.5 w-2.5 rounded-full bg-[#ffbd2e]" />
+      <span class="h-2.5 w-2.5 rounded-full bg-[#27c93f]" />
+    </span>
+  );
+}
+
+function CodeBlock({ code, title }: { code: string; title?: string }) {
   const [copied, setCopied] = useState(false);
 
   const copy = async () => {
@@ -18,17 +29,28 @@ function CodeBlock({ code }: { code: string }) {
   };
 
   return (
-    <div class="border-border bg-code-bg flex items-start justify-between gap-3 rounded-lg border px-4 py-3">
-      <pre class="min-w-0 flex-1 overflow-x-auto text-sm leading-relaxed">
+    <div class="pv-code-frame">
+      <div class="pv-code-frame-header">
+        <FrameDots />
+        <span class="min-w-0 flex-1 truncate text-center text-xs font-medium text-white/50">
+          {title}
+        </span>
+        <button
+          type="button"
+          onClick={copy}
+          class={[
+            'shrink-0 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors',
+            copied
+              ? 'border-[#27c93f]/40 bg-[#27c93f]/15 text-[#7ee89a]'
+              : 'border-white/10 bg-white/5 text-white/70 hover:border-white/25 hover:bg-white/10 hover:text-white',
+          ].join(' ')}
+        >
+          {copied ? 'Copied ✓' : 'Copy'}
+        </button>
+      </div>
+      <pre class="pv-code-frame-body">
         <code>{code}</code>
       </pre>
-      <button
-        type="button"
-        onClick={copy}
-        class="border-border bg-surface hover:border-brand/40 shrink-0 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors"
-      >
-        {copied ? 'Copied ✓' : 'Copy'}
-      </button>
     </div>
   );
 }
@@ -41,7 +63,7 @@ function CopyBlock({ label, detail, code }: InstallOption) {
         {detail && <p class="text-muted text-xs">{detail}</p>}
       </div>
       <div class="mt-2">
-        <CodeBlock code={code} />
+        <CodeBlock code={code} title={label} />
       </div>
     </div>
   );
@@ -79,7 +101,7 @@ export default function InstallPanel({ tabs }: Props) {
         aria-label="Install options"
         onKeyDown={onKeyDown}
         tabIndex={-1}
-        class="border-border flex flex-wrap gap-x-1 border-b"
+        class="flex flex-wrap gap-1 px-1"
       >
         {tabs.map((tabOption, index) => (
           <button
@@ -92,10 +114,8 @@ export default function InstallPanel({ tabs }: Props) {
             tabIndex={active === index ? 0 : -1}
             onClick={() => setActive(index)}
             class={[
-              '-mb-px border-b-2 px-3 py-2 text-sm font-medium transition-colors',
-              active === index
-                ? 'border-brand text-brand-emphasis'
-                : 'border-transparent text-muted hover:border-border hover:text-foreground',
+              'pv-install-tab',
+              active === index ? 'pv-install-tab-active' : 'pv-install-tab-inactive',
             ].join(' ')}
           >
             {tabOption.label}
@@ -106,7 +126,7 @@ export default function InstallPanel({ tabs }: Props) {
         role="tabpanel"
         id={`install-panel-${active}`}
         aria-labelledby={`install-tab-${active}`}
-        class="mt-4 space-y-4"
+        class="pv-install-panel-body space-y-4"
       >
         {tab.snippets.length > 1 ? (
           tab.snippets.map((snippet) => (
@@ -115,7 +135,7 @@ export default function InstallPanel({ tabs }: Props) {
         ) : (
           <div>
             {tab.detail && <p class="text-muted mb-2 text-xs">{tab.detail}</p>}
-            <CodeBlock code={tab.snippets[0]?.code ?? ''} />
+            <CodeBlock code={tab.snippets[0]?.code ?? ''} title={tab.label} />
           </div>
         )}
       </div>
diff --git a/src/src/components/islands/PackageVersions.tsx b/src/src/components/islands/PackageVersions.tsx
index 27c0a07..4d962d1 100644
--- a/src/src/components/islands/PackageVersions.tsx
+++ b/src/src/components/islands/PackageVersions.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useMemo, useState } from 'preact/hooks';
 import { compare, valid } from 'semver';
 
 export interface PackageRow {
@@ -10,6 +10,7 @@ export interface PackageRow {
   totalDownloads: number | null;
   nugetUrl: string;
   projectUrl: string;
+  deprecated?: boolean;
 }
 
 type SortKey = 'package' | 'project' | 'stable' | 'prerelease' | 'downloads';
@@ -17,6 +18,8 @@ type SortDir = 'asc' | 'desc';
 
 interface Props {
   packages: PackageRow[];
+  /** Show the project column and allow grouping by project. Set to false on a single-project page, where the project is already implicit. */
+  showProject?: boolean;
 }
 
 function normalizeVersion(version: string | null): string | null {
@@ -39,20 +42,53 @@ function compareVersions(a: string | null, b: string | null): number {
   return (va ?? '').localeCompare(vb ?? '');
 }
 
-const COLUMNS: { key: SortKey; label: string; title: string }[] = [
-  { key: 'package', label: 'Package', title: 'Sort by package name' },
-  { key: 'project', label: 'Project', title: 'Sort by project name' },
-  { key: 'stable', label: 'Stable', title: 'Sort by latest stable version' },
-  { key: 'prerelease', label: 'Prerelease', title: 'Sort by latest prerelease version' },
-  { key: 'downloads', label: 'Downloads', title: 'Sort by total downloads' },
-];
+function formatDownloads(value: number | null): string {
+  return value == null ? '—' : value.toLocaleString('en-US');
+}
 
-export default function PackageVersions({ packages }: Props) {
+function VersionBadge({
+  version,
+  tone,
+}: {
+  version: string | null;
+  tone: 'stable' | 'prerelease';
+}) {
+  if (!version) {
+    return <span class="text-muted text-xs">—</span>;
+  }
+  return (
+    <span
+      class={[
+        'inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-xs',
+        tone === 'stable'
+          ? 'border-success/30 bg-success/10 text-success'
+          : 'border-warning/30 bg-warning/10 text-warning',
+      ].join(' ')}
+    >
+      {version}
+    </span>
+  );
+}
+
+export default function PackageVersions({ packages, showProject = true }: Props) {
   const [search, setSearch] = useState('');
   const [sortKey, setSortKey] = useState<SortKey>('project');
   const [sortDir, setSortDir] = useState<SortDir>('asc');
+  const [groupByProject, setGroupByProject] = useState(true);
 
   const query = search.trim().toLowerCase();
+  const canGroup = showProject && new Set(packages.map((row) => row.projectId)).size > 1;
+  const isGrouped = canGroup && groupByProject;
+  const showProjectColumn = showProject && !isGrouped;
+  const columns: { key: SortKey; label: string; title: string }[] = [
+    { key: 'package', label: 'Package', title: 'Sort by package name' },
+    ...(showProjectColumn
+      ? ([{ key: 'project', label: 'Project', title: 'Sort by project name' }] as const)
+      : []),
+    { key: 'stable', label: 'Stable', title: 'Sort by latest stable version' },
+    { key: 'prerelease', label: 'Prerelease', title: 'Sort by latest prerelease version' },
+    { key: 'downloads', label: 'Downloads', title: 'Sort by total downloads' },
+  ];
 
   const rows = packages
     .filter(
@@ -88,6 +124,29 @@ export default function PackageVersions({ packages }: Props) {
       }
     });
 
+  const groups = useMemo(() => {
+    if (!canGroup || !groupByProject) {
+      return null;
+    }
+    const byProject = new Map<
+      string,
+      { projectName: string; projectUrl: string; rows: PackageRow[] }
+    >();
+    for (const row of rows) {
+      const existing = byProject.get(row.projectId);
+      if (existing) {
+        existing.rows.push(row);
+      } else {
+        byProject.set(row.projectId, {
+          projectName: row.projectName,
+          projectUrl: row.projectUrl,
+          rows: [row],
+        });
+      }
+    }
+    return [...byProject.values()].toSorted((a, b) => a.projectName.localeCompare(b.projectName));
+  }, [canGroup, groupByProject, rows]);
+
   function toggleSort(key: SortKey) {
     if (sortKey === key) {
       setSortDir((current) => (current === 'asc' ? 'desc' : 'asc'));
@@ -97,6 +156,49 @@ export default function PackageVersions({ packages }: Props) {
     setSortDir(key === 'downloads' ? 'desc' : 'asc');
   }
 
+  const colSpan = columns.length;
+
+  function renderRow(row: PackageRow) {
+    return (
+      <tr key={row.packageId} class="border-border hover:bg-surface/60 border-b last:border-0">
+        <td class="px-4 py-3">
+          <a
+            href={row.nugetUrl}
+            rel="noopener noreferrer"
+            target="_blank"
+            class="pv-link break-all"
+          >
+            {row.packageId}
+          </a>
+          {row.deprecated && (
+            <span class="border-warning/40 bg-warning/10 text-warning ml-2 rounded-full border px-2 py-0.5 text-xs">
+              deprecated
+            </span>
+          )}
+        </td>
+        {showProjectColumn && (
+          <td class="px-4 py-3">
+            <a href={row.projectUrl} class="pv-link">
+              {row.projectName}
+            </a>
+          </td>
+        )}
+        <td class="px-4 py-3">
+          <VersionBadge version={row.latestStable} tone="stable" />
+        </td>
+        <td class="px-4 py-3">
+          <VersionBadge version={row.latestPrerelease} tone="prerelease" />
+        </td>
+        <td
+          class="text-muted px-4 py-3 text-xs"
+          title={row.totalDownloads == null ? 'Not yet indexed by NuGet search' : undefined}
+        >
+          {formatDownloads(row.totalDownloads)}
+        </td>
+      </tr>
+    );
+  }
+
   return (
     <div>
       <div class="flex flex-wrap items-center gap-3">
@@ -126,16 +228,28 @@ export default function PackageVersions({ packages }: Props) {
             class="w-full bg-transparent text-sm outline-none"
           />
         </label>
+        {canGroup && (
+          <label class="text-muted flex items-center gap-2 text-sm" htmlFor="package-group">
+            <input
+              id="package-group"
+              type="checkbox"
+              checked={groupByProject}
+              onChange={(event) => setGroupByProject((event.target as HTMLInputElement).checked)}
+              class="border-border text-brand focus:ring-focus rounded"
+            />
+            Group by project
+          </label>
+        )}
         <p class="text-muted text-sm" aria-live="polite">
           {rows.length} package{rows.length === 1 ? '' : 's'}
         </p>
       </div>
 
-      <div class="border-border mt-4 overflow-x-auto rounded-xl border">
+      <div class="pv-card mt-4 overflow-hidden overflow-x-auto">
         <table class="w-full min-w-[52rem] text-left text-sm">
-          <thead class="border-border bg-surface border-b">
+          <thead class="border-border bg-surface/80 border-b backdrop-blur">
             <tr>
-              {COLUMNS.map((column) => (
+              {columns.map((column) => (
                 <th
                   key={column.key}
                   scope="col"
@@ -164,34 +278,37 @@ export default function PackageVersions({ packages }: Props) {
             </tr>
           </thead>
           <tbody>
-            {rows.map((row) => (
-              <tr key={row.packageId} class="border-border border-b last:border-0">
-                <td class="px-4 py-3">
-                  <a
-                    href={row.nugetUrl}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    class="pv-link break-all"
-                  >
-                    {row.packageId}
-                  </a>
-                </td>
-                <td class="px-4 py-3">
-                  <a href={row.projectUrl} class="pv-link">
-                    {row.projectName}
-                  </a>
-                </td>
-                <td class="px-4 py-3 font-mono text-xs">
-                  {row.latestStable ?? <span class="text-muted">—</span>}
-                </td>
-                <td class="px-4 py-3 font-mono text-xs">
-                  {row.latestPrerelease ?? <span class="text-muted">—</span>}
-                </td>
-                <td class="text-muted px-4 py-3 text-xs">
-                  {row.totalDownloads == null ? '—' : row.totalDownloads.toLocaleString('en-US')}
-                </td>
-              </tr>
-            ))}
+            {groups
+              ? groups.map((group) => {
+                  const subtotal = group.rows.reduce(
+                    (sum, row) => (row.totalDownloads == null ? sum : sum + row.totalDownloads),
+                    0,
+                  );
+                  const hasAnyDownloads = group.rows.some((row) => row.totalDownloads != null);
+                  return (
+                    <>
+                      <tr
+                        key={`group-${group.projectName}`}
+                        class="border-border bg-brand/5 border-b"
+                      >
+                        <th
+                          scope="colgroup"
+                          colspan={colSpan - 1}
+                          class="px-4 py-2 text-left text-xs font-semibold tracking-wider uppercase"
+                        >
+                          <a href={group.projectUrl} class="text-brand-emphasis hover:underline">
+                            {group.projectName}
+                          </a>
+                        </th>
+                        <td class="text-muted px-4 py-2 text-right text-xs font-semibold">
+                          {hasAnyDownloads ? `${formatDownloads(subtotal)} total` : '—'}
+                        </td>
+                      </tr>
+                      {group.rows.map((row) => renderRow(row))}
+                    </>
+                  );
+                })
+              : rows.map((row) => renderRow(row))}
           </tbody>
         </table>
       </div>
diff --git a/src/src/components/islands/ProjectFilter.tsx b/src/src/components/islands/ProjectFilter.tsx
index 02d2ade..b391489 100644
--- a/src/src/components/islands/ProjectFilter.tsx
+++ b/src/src/components/islands/ProjectFilter.tsx
@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'preact/hooks';
 
-const STORAGE_KEY = 'purview.project-filter.v1';
+const STORAGE_KEY = 'purview.project-filter.v2';
 
 interface FilterState {
   search: string;
   category: string;
   status: string;
+  showArchived: boolean;
 }
 
 interface Props {
@@ -15,7 +16,7 @@ interface Props {
 
 function initialFilters(): FilterState {
   if (typeof window === 'undefined') {
-    return { search: '', category: 'all', status: 'all' };
+    return { search: '', category: 'all', status: 'all', showArchived: false };
   }
   try {
     const raw = window.localStorage.getItem(STORAGE_KEY);
@@ -25,12 +26,13 @@ function initialFilters(): FilterState {
         search: typeof parsed.search === 'string' ? parsed.search : '',
         category: typeof parsed.category === 'string' ? parsed.category : 'all',
         status: typeof parsed.status === 'string' ? parsed.status : 'all',
+        showArchived: typeof parsed.showArchived === 'boolean' ? parsed.showArchived : false,
       };
     }
   } catch {
     // Ignore unreadable storage; fall back to defaults.
   }
-  return { search: '', category: 'all', status: 'all' };
+  return { search: '', category: 'all', status: 'all', showArchived: false };
 }
 
 export default function ProjectFilter({ categories, statuses }: Props) {
@@ -54,7 +56,8 @@ export default function ProjectFilter({ categories, statuses }: Props) {
       const matchesCategory = filters.category === 'all' || category === filters.category;
       const matchesStatus = filters.status === 'all' || status === filters.status;
       const matchesSearch = query === '' || searchText.includes(query);
-      const show = matchesCategory && matchesStatus && matchesSearch;
+      const matchesArchived = filters.showArchived || status !== 'archived';
+      const show = matchesCategory && matchesStatus && matchesSearch && matchesArchived;
       card.hidden = !show;
       if (show) {
         visible += 1;
@@ -144,6 +147,22 @@ export default function ProjectFilter({ categories, statuses }: Props) {
         ))}
       </select>
 
+      <label class="text-muted flex items-center gap-2 text-sm" htmlFor="filter-archived">
+        <input
+          id="filter-archived"
+          type="checkbox"
+          checked={filters.showArchived}
+          onChange={(event) =>
+            setFilters((current) => ({
+              ...current,
+              showArchived: (event.target as HTMLInputElement).checked,
+            }))
+          }
+          class="border-border text-brand focus:ring-focus rounded"
+        />
+        Show archived
+      </label>
+
       <p class="text-muted text-sm" aria-live="polite">
         {visibleCount} project{visibleCount === 1 ? '' : 's'}
       </p>
diff --git a/src/src/components/starlight/Sidebar.astro b/src/src/components/starlight/Sidebar.astro
new file mode 100644
index 0000000..2406900
--- /dev/null
+++ b/src/src/components/starlight/Sidebar.astro
@@ -0,0 +1,9 @@
+---
+import Default from '@astrojs/starlight/components/Sidebar.astro';
+import TopicSelect from './TopicSelect.astro';
+
+const { hasSidebar } = Astro.locals.starlightRoute;
+---
+
+{hasSidebar && <TopicSelect />}
+<Default><slot /></Default>
diff --git a/src/src/components/starlight/TopicSelect.astro b/src/src/components/starlight/TopicSelect.astro
new file mode 100644
index 0000000..ae5c132
--- /dev/null
+++ b/src/src/components/starlight/TopicSelect.astro
@@ -0,0 +1,67 @@
+---
+const { topics, isPageWithTopic } = Astro.locals.starlightSidebarTopics;
+
+if (!isPageWithTopic) {
+  return null;
+}
+---
+
+<label class="topic-select">
+  <span class="sr-only">Select a project</span>
+  <select onchange="window.location.assign(this.value)">
+    {
+      topics.map((topic) => (
+        <option value={topic.link} selected={topic.isCurrent}>
+          {topic.label}
+        </option>
+      ))
+    }
+  </select>
+  <svg
+    class="topic-select-caret"
+    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    aria-hidden="true"
+  >
+    <path stroke-linecap="round" stroke-linejoin="round" d="m6 9 6 6 6-6"></path>
+  </svg>
+</label>
+
+<style>
+  .topic-select {
+    position: relative;
+    display: block;
+    margin-bottom: 1rem;
+  }
+
+  select {
+    width: 100%;
+    appearance: none;
+    border: 1px solid var(--sl-color-hairline);
+    border-radius: 0.5rem;
+    background-color: var(--sl-color-bg-nav);
+    color: var(--sl-color-white);
+    font-family: inherit;
+    font-size: var(--sl-text-sm);
+    font-weight: 600;
+    padding: 0.5rem 2rem 0.5rem 0.75rem;
+    cursor: pointer;
+  }
+
+  select:hover {
+    border-color: var(--sl-color-accent);
+  }
+
+  .topic-select-caret {
+    position: absolute;
+    top: 50%;
+    inset-inline-end: 0.625rem;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--sl-color-gray-3);
+  }
+</style>
diff --git a/src/src/data/projects.yml b/src/src/data/projects.yml
index c93f7a8..d690390 100644
--- a/src/src/data/projects.yml
+++ b/src/src/data/projects.yml
@@ -79,7 +79,7 @@ projects:
     discussions: false
 
   - id: zodsharp
-    name: Purview.ZodSharp
+    name: ZodSharp
     shortDescription: Zero-allocation schema validation for C# — a Zod port.
     description: >-
       A high-performance schema validation library for C#, ported from
diff --git a/src/src/lib/site.ts b/src/src/lib/site.ts
index 49bf367..7c43702 100644
--- a/src/src/lib/site.ts
+++ b/src/src/lib/site.ts
@@ -2,7 +2,7 @@ export const SITE = {
   name: 'Purview',
   fullName: 'Purview Dev',
   orgName: 'Purview Development',
-  tagline: 'Excellent useful tools.',
+  tagline: 'Making development easier.',
   domain: 'purview.dev',
   url: process.env.SITE_URL ?? 'https://purview.dev',
   githubOrg: 'purview-dev',
diff --git a/src/src/pages/index.astro b/src/src/pages/index.astro
index c9fddc1..5c1579f 100644
--- a/src/src/pages/index.astro
+++ b/src/src/pages/index.astro
@@ -36,10 +36,7 @@ const organizationStructuredData = {
   url: SITE.url,
   logo: absoluteUrl('/branding/icon-light-512.png'),
   description: SITE.description,
-  sameAs: [
-    SITE.githubUrl,
-    `${SITE.nugetUrl}/search?q=purview`,
-  ],
+  sameAs: [SITE.githubUrl, `${SITE.nugetUrl}/search?q=purview`],
 };
 ---
 
@@ -57,16 +54,19 @@ const organizationStructuredData = {
         width="1280"
         height="320"
       />
-      <div class="absolute inset-0 bg-gradient-to-b from-background/30 via-background/70 to-background" />
+      <div
+        class="absolute inset-0 bg-gradient-to-b from-background/30 via-background/70 to-background"
+      >
+      </div>
     </div>
-<div class="pv-container py-20 md:py-28">
+    <div class="pv-container py-20 md:py-28">
       <div class="max-w-3xl">
         <p
           class="mb-6 flex flex-wrap items-center gap-2 rounded-lg border border-border bg-surface/80 px-4 py-2.5 text-sm text-muted backdrop-blur"
         >
           <span class="beta-badge">Beta</span>
-          This site is in beta — release data and documentation are refreshed
-          from the source repositories on an ongoing basis.
+          This site is in beta — release data and documentation are refreshed from the source repositories
+          on an ongoing basis.
         </p>
         <p class="pv-chip mb-5 border-brand/30 bg-brand/5 text-brand">
           {SITE.tagline}
@@ -75,29 +75,26 @@ const organizationStructuredData = {
           Developer tooling for .NET that gets out of your way.
         </h1>
         <p class="mt-6 max-w-2xl text-lg text-muted">
-          Purview Dev builds the pieces that .NET projects need but rarely want to
-          write by hand — event sourcing, telemetry, schema validation, source
-          generators, and build automation — designed to be fast, typed, and
-          painless to adopt.
+          Purview Dev builds the pieces that .NET projects need but rarely want to write by hand —
+          event sourcing, telemetry, schema validation, source generators, and build automation —
+          designed to be fast, typed, and painless to adopt.
         </p>
         <div class="mt-8 flex flex-wrap gap-3">
-          <a
-            href={withBase('/projects/')}
-            class="rounded-lg bg-brand px-5 py-2.5 font-medium text-white transition-colors hover:bg-brand-emphasis"
-          >
-            Browse projects
-          </a>
-          <a
-            href={withBase('/docs/')}
-            class="rounded-lg border border-border bg-surface px-5 py-2.5 font-medium text-foreground transition-colors hover:border-brand/40"
-          >
-            Read the documentation
-          </a>
-          <a
-            href={withBase('/releases/')}
-            class="rounded-lg px-5 py-2.5 font-medium text-accent underline decoration-1 underline-offset-4 hover:decoration-2"
-          >
+          <a href={withBase('/projects/')} class="pv-btn pv-btn-primary"> Browse projects </a>
+          <a href={withBase('/docs/')} class="pv-btn pv-btn-secondary"> Read the documentation </a>
+          <a href={withBase('/releases/')} class="pv-btn pv-btn-ghost">
             View releases
+            <svg
+              viewBox="0 0 24 24"
+              width="16"
+              height="16"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              aria-hidden="true"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14m-6-6 6 6-6 6"></path>
+            </svg>
           </a>
         </div>
       </div>
@@ -109,24 +106,24 @@ const organizationStructuredData = {
       <div>
         <h2 class="text-xl font-semibold">Source generators, done deliberately</h2>
         <p class="mt-3 text-muted">
-          Several Purview projects are built on Roslyn source generators to move
-          work from runtime to compile time — zero allocations, no reflection,
-          and APIs that are impossible to wire up wrong.
+          Several Purview projects are built on Roslyn source generators to move work from runtime
+          to compile time — zero allocations, no reflection, and APIs that are impossible to wire up
+          wrong.
         </p>
       </div>
       <div>
         <h2 class="text-xl font-semibold">One coherent product family</h2>
         <p class="mt-3 text-muted">
-          The projects share conventions, a common build pipeline
-          ({`Purview.Build`}), and integration points — for example
+          The projects share conventions, a common build pipeline ({`Purview.Build`}), and
+          integration points — for example
           {`Purview.EventSourcing`} validates aggregates with {`Purview.ZodSharp`}.
         </p>
       </div>
       <div>
         <h2 class="text-xl font-semibold">Provider-agnostic by design</h2>
         <p class="mt-3 text-muted">
-          Storage, serialization, and validation choices stay swappable. Adopt
-          the parts you need without rewriting the parts you already have.
+          Storage, serialization, and validation choices stay swappable. Adopt the parts you need
+          without rewriting the parts you already have.
         </p>
       </div>
     </div>
@@ -137,8 +134,8 @@ const organizationStructuredData = {
       <div>
         <h2 class="text-2xl font-bold tracking-tight md:text-3xl">Featured projects</h2>
         <p class="mt-2 max-w-2xl text-muted">
-          The foundations of the Purview product family. Every project is open
-          source, MIT licensed, and published to NuGet.
+          The foundations of the Purview product family. Every project is open source, MIT licensed,
+          and published to NuGet.
         </p>
       </div>
       <a href={withBase('/projects/')} class="pv-link hidden shrink-0 sm:inline">
@@ -155,8 +152,8 @@ const organizationStructuredData = {
       <div>
         <h2 class="text-2xl font-bold tracking-tight md:text-3xl">Package status</h2>
         <p class="mt-2 max-w-2xl text-muted">
-          The latest stable and prerelease version of every NuGet package at a
-          glance. Search, or click a column to sort.
+          The latest stable and prerelease version of every NuGet package at a glance. Search, or
+          click a column to sort.
         </p>
       </div>
       <a href={withBase('/releases/')} class="pv-link hidden shrink-0 sm:inline">
@@ -178,41 +175,36 @@ const organizationStructuredData = {
         <div class="rounded-xl border border-border p-6">
           <p class="text-sm font-semibold text-brand">1 · Pick a project</p>
           <p class="mt-2 text-muted">
-            Explore the {active.length} active projects in the catalogue and find
-            the one that solves your problem.
+            Explore the {active.length} active projects in the catalogue and find the one that solves
+            your problem.
           </p>
         </div>
         <div class="rounded-xl border border-border p-6">
           <p class="text-sm font-semibold text-brand">2 · Add the package</p>
           <p class="mt-2 text-muted">
-            Every project ships real NuGet packages. {`dotnet add package`} and a
-            source generator or two is usually all it takes.
+            Every project ships real NuGet packages. {`dotnet add package`} and a source generator or
+            two is usually all it takes.
           </p>
         </div>
         <div class="rounded-xl border border-border p-6">
           <p class="text-sm font-semibold text-brand">3 · Read the docs</p>
           <p class="mt-2 text-muted">
-            Full documentation is aggregated here from each repository — guides,
-            provider matrices, guarantees, and examples.
+            Full documentation is aggregated here from each repository — guides, provider matrices,
+            guarantees, and examples.
           </p>
         </div>
       </div>
       <div class="mt-10 flex flex-wrap gap-3">
-        <a
-          href={withBase('/projects/')}
-          class="rounded-lg bg-brand px-5 py-2.5 font-medium text-white transition-colors hover:bg-brand-emphasis"
-        >
-          Open the catalogue
-        </a>
+        <a href={withBase('/projects/')} class="pv-btn pv-btn-primary"> Open the catalogue </a>
         <a
           href={SITE.githubUrl}
           rel="noopener noreferrer"
           target="_blank"
-          class="rounded-lg border border-border bg-surface px-5 py-2.5 font-medium transition-colors hover:border-brand/40"
+          class="pv-btn pv-btn-secondary"
         >
           Visit the GitHub organisation
         </a>
       </div>
     </div>
   </section>
-</SiteLayout>
\ No newline at end of file
+</SiteLayout>
diff --git a/src/src/pages/projects/[project].astro b/src/src/pages/projects/[project].astro
index cd8ed7f..a1a9df4 100644
--- a/src/src/pages/projects/[project].astro
+++ b/src/src/pages/projects/[project].astro
@@ -1,6 +1,7 @@
 ---
 import SiteLayout from '~/layouts/SiteLayout.astro';
 import InstallPanel from '~/components/islands/InstallPanel.tsx';
+import PackageVersions, { type PackageRow } from '~/components/islands/PackageVersions.tsx';
 import StatusBadge from '~/components/StatusBadge.astro';
 import { buildBadge, nugetDownloadsBadge, nugetVersionBadge, actionsUrl } from '~/lib/badges';
 import { installKindFor, installTabs } from '~/lib/install';
@@ -27,37 +28,48 @@ const releaseIndex = getReleaseIndex();
 const releases = projectReleaseSummary(project, releaseIndex.data, releaseIndex.source);
 const { tags, repoDescription } = projectRepoEnrichment(project, releaseIndex.data);
 const supplementalRepoDescription =
-  repoDescription &&
-  repoDescription !== project.shortDescription &&
-  repoDescription !== project.description
-    ? repoDescription
-    : null;
+  (
+    repoDescription &&
+    repoDescription !== project.shortDescription &&
+    repoDescription !== project.description
+  ) ?
+    repoDescription
+  : null;
 const related = project.related
   .map((id) => loadProjects().find((candidate) => candidate.id === id))
   .filter((candidate) => candidate !== undefined);
-const supersededBy = project.supersededBy
-  ? loadProjects().find((candidate) => candidate.id === project.supersededBy)
+const supersededBy =
+  project.supersededBy ?
+    loadProjects().find((candidate) => candidate.id === project.supersededBy)
   : undefined;
 const primaryPackage = project.packages.find((pkg) => pkg.primary) ?? project.packages[0];
 const docsPath = project.docs ? withBase(`/docs/${project.id}/`) : null;
 const targetFrameworks = project.targetFrameworks ?? [];
-const primaryRelease = primaryPackage
-  ? releases.packages.find((pkg) => pkg.packageId === primaryPackage.id)
-  : undefined;
+const primaryRelease =
+  primaryPackage ? releases.packages.find((pkg) => pkg.packageId === primaryPackage.id) : undefined;
 const installTabsOptions =
-  primaryPackage && project.status !== 'archived'
-    ? installTabs(
-        installKindFor(project),
-        primaryPackage.id,
-        primaryRelease?.latestStable ?? primaryRelease?.latestPrerelease ?? null,
-      )
-    : [];
+  primaryPackage && project.status !== 'archived' ?
+    installTabs(
+      installKindFor(project),
+      primaryPackage.id,
+      primaryRelease?.latestStable ?? primaryRelease?.latestPrerelease ?? null,
+    )
+  : [];
+const projectUrl = withBase(`/projects/${project.id}/`);
+const packageRows: PackageRow[] = releases.packages.map((pkg) => ({
+  projectId: project.id,
+  projectName: project.name,
+  projectUrl,
+  packageId: pkg.packageId,
+  latestStable: pkg.latestStable,
+  latestPrerelease: pkg.latestPrerelease,
+  totalDownloads: pkg.totalDownloads,
+  nugetUrl: pkg.nugetUrl,
+  deprecated: pkg.deprecated,
+}));
 ---
 
-<SiteLayout
-  title={`${project.name} — ${SITE.fullName}`}
-  description={project.shortDescription}
->
+<SiteLayout title={`${project.name} — ${SITE.fullName}`} description={project.shortDescription}>
   <div class="pv-container py-12 md:py-16">
     <nav aria-label="Breadcrumb" class="mb-6 text-sm text-muted">
       <a href={withBase('/projects/')} class="pv-link">Projects</a>
@@ -88,17 +100,16 @@ const installTabsOptions =
         project.status === 'archived' && (
           <div class="mt-6 rounded-lg border border-error/40 bg-error/10 p-4 text-sm">
             <strong>Archived.</strong> This project is no longer actively developed.
-            {
-              supersededBy && (
-                <>
-                  {' '}It has been superseded by{' '}
-                  <a href={withBase(`/projects/${supersededBy.id}/`)} class="pv-link">
-                    {supersededBy.name}
-                  </a>
-                  .
-                </>
-              )
-            }
+            {supersededBy && (
+              <>
+                {' '}
+                It has been superseded by{' '}
+                <a href={withBase(`/projects/${supersededBy.id}/`)} class="pv-link">
+                  {supersededBy.name}
+                </a>
+                .
+              </>
+            )}
           </div>
         )
       }
@@ -156,38 +167,36 @@ const installTabsOptions =
         {
           project.status !== 'archived' && (
             <>
-              {
-                primaryPackage && (
-                  <>
-                    <a
-                      href={nugetPackageUrl(primaryPackage.id)}
-                      rel="noopener noreferrer"
-                      target="_blank"
-                      class="inline-flex"
-                    >
-                      <img
-                        src={nugetVersionBadge(primaryPackage.id)}
-                        alt={`NuGet version of ${primaryPackage.id}`}
-                        loading="lazy"
-                        class="h-5 w-auto"
-                      />
-                    </a>
-                    <a
-                      href={nugetPackageUrl(primaryPackage.id)}
-                      rel="noopener noreferrer"
-                      target="_blank"
-                      class="inline-flex"
-                    >
-                      <img
-                        src={nugetDownloadsBadge(primaryPackage.id)}
-                        alt={`NuGet downloads of ${primaryPackage.id}`}
-                        loading="lazy"
-                        class="h-5 w-auto"
-                      />
-                    </a>
-                  </>
-                )
-              }
+              {primaryPackage && (
+                <>
+                  <a
+                    href={nugetPackageUrl(primaryPackage.id)}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    class="inline-flex"
+                  >
+                    <img
+                      src={nugetVersionBadge(primaryPackage.id)}
+                      alt={`NuGet version of ${primaryPackage.id}`}
+                      loading="lazy"
+                      class="h-5 w-auto"
+                    />
+                  </a>
+                  <a
+                    href={nugetPackageUrl(primaryPackage.id)}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    class="inline-flex"
+                  >
+                    <img
+                      src={nugetDownloadsBadge(primaryPackage.id)}
+                      alt={`NuGet downloads of ${primaryPackage.id}`}
+                      loading="lazy"
+                      class="h-5 w-auto"
+                    />
+                  </a>
+                </>
+              )}
               <a
                 href={actionsUrl(project.repository)}
                 rel="noopener noreferrer"
@@ -215,7 +224,8 @@ const installTabsOptions =
           {
             supplementalRepoDescription && (
               <p class="mt-3 text-sm text-muted">
-                From the repository: <span class="text-foreground">{supplementalRepoDescription}</span>
+                From the repository:{' '}
+                <span class="text-foreground">{supplementalRepoDescription}</span>
               </p>
             )
           }
@@ -225,53 +235,8 @@ const installTabsOptions =
           project.packages.length > 0 && (
             <section>
               <h2 class="text-xl font-semibold">Packages</h2>
-              <div class="mt-4 overflow-x-auto rounded-xl border border-border">
-                <table class="w-full min-w-[32rem] text-left text-sm">
-                  <thead class="border-b border-border bg-surface">
-                    <tr>
-                      <th scope="col" class="px-4 py-3 font-semibold">Package</th>
-                      <th scope="col" class="px-4 py-3 font-semibold">Stable</th>
-                      <th scope="col" class="px-4 py-3 font-semibold">Prerelease</th>
-                      <th scope="col" class="px-4 py-3 font-semibold">Downloads</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {
-                      releases.packages.map((pkg) => (
-                        <tr class="border-b border-border last:border-0">
-                          <td class="px-4 py-3">
-                            <a
-                              href={pkg.nugetUrl}
-                              rel="noopener noreferrer"
-                              target="_blank"
-                              class="pv-link break-all"
-                            >
-                              {pkg.packageId}
-                            </a>
-                            {
-                              pkg.deprecated && (
-                                <span class="ml-2 rounded-full border border-warning/40 bg-warning/10 px-2 py-0.5 text-xs text-warning">
-                                  deprecated
-                                </span>
-                              )
-                            }
-                          </td>
-                          <td class="px-4 py-3 font-mono text-xs">
-                            {pkg.latestStable ?? <span class="text-muted">—</span>}
-                          </td>
-                          <td class="px-4 py-3 font-mono text-xs">
-                            {pkg.latestPrerelease ?? <span class="text-muted">—</span>}
-                          </td>
-                          <td class="px-4 py-3 text-muted">
-                            {pkg.totalDownloads != null
-                              ? pkg.totalDownloads.toLocaleString('en-US')
-                              : '—'}
-                          </td>
-                        </tr>
-                      ))
-                    }
-                  </tbody>
-                </table>
+              <div class="mt-4">
+                <PackageVersions client:visible packages={packageRows} showProject={false} />
               </div>
             </section>
           )
@@ -336,24 +301,26 @@ const installTabsOptions =
             <div class="rounded-xl border border-border bg-surface p-5">
               <h2 class="text-sm font-semibold uppercase tracking-wider text-muted">Related</h2>
               <ul class="mt-4 list-none space-y-2 text-sm">
-                {
-                  related.map((relatedProject) => (
-                    <li>
-                      <a href={withBase(`/projects/${relatedProject.id}/`)} class="pv-link">
-                        {relatedProject.name}
-                      </a>
-                    </li>
-                  ))
-                }
+                {related.map((relatedProject) => (
+                  <li>
+                    <a href={withBase(`/projects/${relatedProject.id}/`)} class="pv-link">
+                      {relatedProject.name}
+                    </a>
+                  </li>
+                ))}
               </ul>
             </div>
           )
         }
 
         <p class="text-xs text-muted">
-          Release data retrieved {releases.retrievedAt ? `on ${releases.retrievedAt.slice(0, 10)}` : 'from committed fixtures'}.
+          Release data retrieved {
+            releases.retrievedAt ?
+              `on ${releases.retrievedAt.slice(0, 10)}`
+            : 'from committed fixtures'
+          }.
         </p>
       </aside>
     </div>
   </div>
-</SiteLayout>
\ No newline at end of file
+</SiteLayout>
diff --git a/src/src/pages/projects/index.astro b/src/src/pages/projects/index.astro
index a4744db..5e9e76e 100644
--- a/src/src/pages/projects/index.astro
+++ b/src/src/pages/projects/index.astro
@@ -12,7 +12,7 @@ const projects = loadProjects();
 const externalProjects = loadExternalProjects();
 const releaseIndex = getReleaseIndex();
 const categories = [...new Set(projects.map((project) => project.category))].toSorted();
-const statuses = ['stable', 'preview', 'archived'];
+const statuses = ['stable', 'preview'];
 ---
 
 <SiteLayout
@@ -24,8 +24,8 @@ const statuses = ['stable', 'preview', 'archived'];
       <p class="pv-chip mb-4 border-brand/30 bg-brand/5 text-brand">Catalogue</p>
       <h1 class="text-3xl font-bold tracking-tight md:text-4xl">Projects</h1>
       <p class="mt-4 text-lg text-muted">
-        The complete Purview-Dev product family — open source, MIT licensed, and
-        published to NuGet. Every project is documented and actively developed.
+        The complete Purview-Dev product family — open source, MIT licensed, and published to NuGet.
+        Every project is documented and actively developed.
       </p>
     </div>
 
@@ -56,35 +56,31 @@ const statuses = ['stable', 'preview', 'archived'];
         <section class="mt-16">
           <h2 class="text-2xl font-bold tracking-tight md:text-3xl">Collaborations</h2>
           <p class="mt-2 max-w-2xl text-muted">
-            Open-source projects outside the Purview organisation that the team
-            helps build. They link to their own sites and repositories.
+            Open-source projects outside the Purview organisation that the team helps build. They
+            link to their own sites and repositories.
           </p>
           <div class="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
-            {
-              externalProjects.map((project) => (
-                <a
-                  href={project.url}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  class="pv-card pv-card-interactive flex flex-col gap-3 p-5 no-underline"
-                >
-                  <div class="flex items-start justify-between gap-3">
-                    <h3 class="text-lg font-semibold leading-snug">{project.name}</h3>
-                    {
-                      project.status && <StatusBadge status={project.status} />
-                    }
-                  </div>
-                  <p class="text-sm text-muted">{project.shortDescription}</p>
-                  <div class="mt-auto flex flex-wrap items-center gap-2 pt-2">
-                    <span class="pv-chip">{project.category}</span>
-                    <span class="pv-chip">External ↗</span>
-                  </div>
-                </a>
-              ))
-            }
+            {externalProjects.map((project) => (
+              <a
+                href={project.url}
+                rel="noopener noreferrer"
+                target="_blank"
+                class="pv-card pv-card-interactive flex flex-col gap-3 p-5 no-underline"
+              >
+                <div class="flex items-start justify-between gap-3">
+                  <h3 class="text-lg font-semibold leading-snug">{project.name}</h3>
+                  {project.status && <StatusBadge status={project.status} />}
+                </div>
+                <p class="text-sm text-muted">{project.shortDescription}</p>
+                <div class="mt-auto flex flex-wrap items-center gap-2 pt-2">
+                  <span class="pv-chip">{project.category}</span>
+                  <span class="pv-chip">External ↗</span>
+                </div>
+              </a>
+            ))}
           </div>
         </section>
       )
     }
   </div>
-</SiteLayout>
\ No newline at end of file
+</SiteLayout>
diff --git a/src/src/styles/global.css b/src/src/styles/global.css
index 3d64aac..216a67f 100644
--- a/src/src/styles/global.css
+++ b/src/src/styles/global.css
@@ -79,6 +79,26 @@
   --color-info: #a78bfa;
 }
 
+/* ---------------------------------------------------------------------------
+ * Starlight token bridge — supplies `--sl-color-*` variables that Starlight's
+ * component styles (Select/ThemeSelect, Search, PageFrame) read but that
+ * `@astrojs/starlight-tailwind` doesn't map, and that are otherwise undefined
+ * on pages outside Starlight's own routing (e.g. the homepage), where
+ * Starlight's base stylesheet isn't injected. Mapping these to our semantic
+ * tokens means they automatically follow the light/dark overrides above.
+ * ------------------------------------------------------------------------- */
+:root {
+  --sl-color-bg-nav: var(--color-surface-elevated);
+  --sl-color-bg-sidebar: var(--color-surface);
+  --sl-color-hairline: var(--color-border);
+  --sl-color-hairline-shade: var(--color-border);
+  --sl-color-backdrop-overlay: color-mix(in oklab, var(--color-ink) 55%, transparent);
+  --sl-color-red-high: var(--color-error);
+  --sl-color-text: var(--color-foreground);
+  --sl-color-text-accent: var(--color-brand-emphasis);
+  --sl-color-text-invert: var(--color-background);
+}
+
 /* ---------------------------------------------------------------------------
  * Base styles
  * ------------------------------------------------------------------------- */
@@ -244,6 +264,151 @@
     text-transform: uppercase;
     white-space: nowrap;
   }
+
+  /* Install panel: a terminal-like frame in the spirit of Expressive Code,
+   * with folder-style tabs that visually connect to the panel beneath them. */
+  .pv-code-frame {
+    overflow: hidden;
+    border-radius: 0.75rem;
+    background-color: #1e1b2e;
+    box-shadow:
+      0 1px 2px rgb(0 0 0 / 0.3),
+      0 8px 24px rgb(0 0 0 / 0.18);
+  }
+
+  .pv-code-frame-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    border-bottom: 1px solid rgb(255 255 255 / 0.08);
+    background: linear-gradient(
+      to bottom,
+      color-mix(in oklab, var(--color-brand) 22%, #26223a),
+      #201d30
+    );
+    padding: 0.625rem 0.875rem;
+  }
+
+  .pv-code-frame-body {
+    margin: 0;
+    overflow-x: auto;
+    padding: 1rem;
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    line-height: 1.6;
+    color: #e7e3f5;
+  }
+
+  .pv-install-tab {
+    position: relative;
+    z-index: 1;
+    border-radius: 0.625rem 0.625rem 0 0;
+    padding: 0.5rem 1rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    transition:
+      color 150ms ease,
+      background-color 150ms ease,
+      transform 150ms ease;
+  }
+
+  .pv-install-tab-inactive {
+    color: var(--color-muted);
+    background-color: transparent;
+  }
+
+  .pv-install-tab-inactive:hover {
+    color: var(--color-foreground);
+    background-color: color-mix(in oklab, var(--color-border) 60%, transparent);
+    transform: translateY(-1px);
+  }
+
+  .pv-install-tab-active {
+    color: var(--color-brand-emphasis);
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-bottom-color: var(--color-surface);
+    margin-bottom: -1px;
+    box-shadow: 0 -2px 8px rgb(0 0 0 / 0.05);
+  }
+
+  .pv-install-panel-body {
+    position: relative;
+    z-index: 0;
+    border: 1px solid var(--color-border);
+    border-radius: 0 0.75rem 0.75rem 0.75rem;
+    background-color: var(--color-surface);
+    padding: 1.25rem;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .pv-install-tab {
+      transition: none;
+    }
+
+    .pv-install-tab-inactive:hover {
+      transform: none;
+    }
+  }
+
+  /* Shared button system for prominent calls to action (e.g. the hero). */
+  .pv-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 0.625rem;
+    padding: 0.625rem 1.25rem;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    text-decoration: none;
+    transition:
+      transform 150ms ease,
+      box-shadow 150ms ease,
+      background-color 150ms ease,
+      border-color 150ms ease,
+      color 150ms ease;
+  }
+
+  .pv-btn:hover {
+    transform: translateY(-1px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .pv-btn:hover {
+      transform: none;
+    }
+  }
+
+  .pv-btn-primary {
+    background-color: var(--color-brand);
+    color: white;
+    box-shadow: 0 4px 16px color-mix(in oklab, var(--color-brand) 35%, transparent);
+  }
+
+  .pv-btn-primary:hover {
+    background-color: var(--color-brand-emphasis);
+    box-shadow: 0 8px 24px color-mix(in oklab, var(--color-brand) 45%, transparent);
+  }
+
+  .pv-btn-secondary {
+    border: 1px solid var(--color-border);
+    background-color: var(--color-surface);
+    color: var(--color-foreground);
+  }
+
+  .pv-btn-secondary:hover {
+    border-color: color-mix(in oklab, var(--color-brand) 45%, var(--color-border));
+    box-shadow: 0 6px 20px color-mix(in oklab, var(--color-brand) 10%, transparent);
+  }
+
+  .pv-btn-ghost {
+    color: var(--color-accent);
+    padding-inline: 0.75rem;
+  }
+
+  .pv-btn-ghost:hover {
+    background-color: color-mix(in oklab, var(--color-brand) 8%, transparent);
+  }
 }
 
 /* ---------------------------------------------------------------------------