diff --git a/.gitignore b/.gitignore
index 4c6cefd..db70a18 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,3 +31,7 @@ web-ext.config.ts
 *.njsproj
 *.sln
 *.sw?
+
+# Scratch and raw store captures
+.tmp
+store/raw
diff --git a/e2e/extension.spec.ts b/e2e/extension.spec.ts
index a306415..306d6a7 100644
--- a/e2e/extension.spec.ts
+++ b/e2e/extension.spec.ts
@@ -379,6 +379,9 @@ test('full preview executes public repository scripts only inside sandbox', asyn
     );
     const sandbox = await sandboxElement?.contentFrame();
     expect(sandbox).not.toBeNull();
+    // The frame fills the tab below the header instead of the 150px default.
+    const frameBox = await sandboxElement!.boundingBox();
+    expect(frameBox!.height).toBeGreaterThan(fullPage.viewportSize()!.height / 2);
     await expect
       .poll(() => requested.includes(`${rawBase}/reports/weekly/app.js`))
       .toBe(true);
@@ -1574,7 +1577,7 @@ test('popup enable setting updates an already-open GitHub page', async () => {
     const popup = await context.newPage();
     await popup.goto(`chrome-extension://${extensionId}/popup.html`);
     const enabled = popup.getByRole('checkbox', {
-      name: 'Show previews on GitHub HTML files and pull requests',
+      name: 'Show previews',
     });
     await expect(enabled).toBeChecked();
     await enabled.uncheck();
@@ -1852,10 +1855,15 @@ test('blob view choice survives different files and reloads without loading hidd
     await settings.goto('chrome-extension://' + extensionId + '/popup.html');
     await page.goto(firstUrl, { waitUntil: 'domcontentloaded' });
     await expect(page.getByRole('tab', { name: 'Preview' })).toHaveAttribute('aria-selected', 'true');
+    // Primer paints the selected segment from aria-pressed.
+    await expect(page.getByRole('tab', { name: 'Preview' })).toHaveAttribute('aria-pressed', 'true');
+    await expect(page.getByRole('button', { name: 'Code', exact: true })).toHaveAttribute('aria-pressed', 'false');
     await expect(page.locator('iframe[title="Executable HTML preview"]').contentFrame().locator('#view-title')).toHaveText('Saved view');
     expect(await settings.evaluate("chrome.storage.local.get('blobViewMode')")).toEqual({});
 
     await page.getByRole('button', { name: 'Code', exact: true }).click();
+    await expect(page.getByRole('button', { name: 'Code', exact: true })).toHaveAttribute('aria-pressed', 'true');
+    await expect(page.getByRole('tab', { name: 'Preview' })).toHaveAttribute('aria-pressed', 'false');
     await expect.poll(() => settings.evaluate("chrome.storage.local.get('blobViewMode')")).toEqual({ blobViewMode: 'source' });
     const requestsBeforeCode = scriptRequests;
     // GitHub replaces its DOM while keeping the extension's content script alive.
@@ -1979,12 +1987,12 @@ function githubBlobFixture(
       <div class="react-blob-view-header-sticky">
         <ul class="SegmentedControl" aria-label="File view">
           <li class="native-segment" data-selected data-component="SegmentedControl.Button">
-            <button class="native-segment-button" type="button" aria-current="true" style="--separator-color:transparent">
+            <button class="native-segment-button" type="button" aria-pressed="true" style="--separator-color:transparent">
               <span class="segmentedControl-content"><span class="segmentedControl-text" data-text="Code">Code</span></span>
             </button>
           </li>
           <li class="native-segment" data-component="SegmentedControl.Button">
-            <button class="native-segment-button" type="button" aria-current="false" style="--separator-color:var(--borderColor-default)">
+            <button class="native-segment-button" type="button" aria-pressed="false" style="--separator-color:var(--borderColor-default)">
               <span class="segmentedControl-content"><span class="segmentedControl-text" data-text="Blame">Blame</span></span>
             </button>
           </li>
diff --git a/entrypoints/content.ts b/entrypoints/content.ts
index d43f85f..c67ed5d 100644
--- a/entrypoints/content.ts
+++ b/entrypoints/content.ts
@@ -34,6 +34,7 @@ interface RouteState {
   readonly tab: HTMLElement;
   readonly tabButton: HTMLButtonElement;
   readonly tabBar: HTMLElement;
+  readonly nativeSelectedButton: HTMLButtonElement | null;
   readonly nativeListenerCleanup: Array<() => void>;
   readonly container: HTMLElement;
   readonly previewArea: HTMLElement;
@@ -80,6 +81,9 @@ export default defineContentScript({
       state.render?.destroy();
       void removePreviewSnapshot(state.snapshotId);
       state.nativeListenerCleanup.forEach((cleanup) => cleanup());
+      if (state.active && state.tabBar.isConnected) {
+        setSelectedTab(state.tabBar, state.nativeSelectedButton);
+      }
       if (state.codeView.isConnected) state.codeView.style.removeProperty('display');
       state.tab.remove();
       state.container.remove();
@@ -92,7 +96,7 @@ export default defineContentScript({
       void blobViewModeStorage.setValue(next);
     };
 
-    const showCode = () => {
+    const showCode = (nativeButton: HTMLButtonElement) => {
       if (!state) return;
       state.active = false;
       if (state.resolving && !state.render) {
@@ -100,15 +104,9 @@ export default defineContentScript({
         state.controller = new AbortController();
         state.resolving = null;
       }
-      // Only deselect the Preview tab; GitHub's React state manages native
-      // tab buttons and overrides aria-current/data-selected on re-render.
-      state.tabButton.setAttribute('aria-current', 'false');
-      state.tabButton.setAttribute('aria-selected', 'false');
-      state.tabButton.style.setProperty(
-        '--separator-color',
-        'var(--borderColor-default)',
-      );
-      state.tab.removeAttribute('data-selected');
+      // React only writes aria-pressed when its own selection changes, so a
+      // click on the already-selected native tab must restore it here.
+      setSelectedTab(state.tabBar, nativeButton);
       state.container.style.setProperty('display', 'none', 'important');
       state.codeView.style.removeProperty('display');
       debugLog('blob', 'show-code', { path: state.repoRef.path });
@@ -184,6 +182,13 @@ export default defineContentScript({
       container.append(header, details, previewArea);
       blob.appendChild(container);
 
+      const nativeSelectedButton =
+        Array.from(tabBar.querySelectorAll<HTMLButtonElement>('button')).find(
+          (candidate) =>
+            candidate !== button &&
+            (candidate.getAttribute('aria-pressed') === 'true' ||
+              candidate.getAttribute('aria-current') === 'true'),
+        ) ?? null;
       const nativeListenerCleanup: Array<() => void> = [];
       state = {
         generation: routeGeneration,
@@ -196,6 +201,7 @@ export default defineContentScript({
         tab,
         tabButton: button,
         tabBar,
+        nativeSelectedButton,
         nativeListenerCleanup,
         container,
         previewArea,
@@ -223,7 +229,7 @@ export default defineContentScript({
         if (nativeButton === button) continue;
         const listener = () => {
           rememberViewMode('source');
-          showCode();
+          showCode(nativeButton);
         };
         nativeButton.addEventListener('click', listener);
         nativeListenerCleanup.push(() =>
@@ -582,6 +588,7 @@ function createPreviewTab(
   button.setAttribute('aria-controls', previewId);
   button.setAttribute('aria-selected', 'false');
   button.setAttribute('aria-current', 'false');
+  button.setAttribute('aria-pressed', 'false');
   button.style.setProperty(
     '--separator-color',
     'var(--borderColor-default)',
@@ -612,6 +619,8 @@ function setSelectedTab(
     tabBar.querySelectorAll<HTMLButtonElement>('button'),
   )) {
     const selected = button === selectedButton;
+    // Primer styles the selected segment from aria-pressed.
+    button.setAttribute('aria-pressed', String(selected));
     button.setAttribute('aria-current', String(selected));
     if (button.closest('li')?.classList.contains(PREVIEW_TAB_CLASS)) {
       button.setAttribute('aria-selected', String(selected));
diff --git a/entrypoints/popup/App.css b/entrypoints/popup/App.css
index 5a82c3e..bee8005 100644
--- a/entrypoints/popup/App.css
+++ b/entrypoints/popup/App.css
@@ -3,33 +3,32 @@
 }
 
 :root {
-  --gh-bg-default: #ffffff;
-  --gh-bg-muted: #f6f8fa;
-  --gh-bg-inset: #f6f8fa;
-  --gh-fg-default: #1f2328;
-  --gh-fg-muted: #59636e;
-  --gh-fg-accent: #0969da;
-  --gh-border-default: #d1d9e0;
-  --gh-border-muted: #d1d9e0;
-  --gh-warning-fg: #9a6700;
-  --gh-warning-bg: #fff8c5;
-  --gh-shadow-rest: 0 1px 0 rgba(31, 35, 40, 0.04);
+  --bg: #ffffff;
+  --surface: #f4f3f8;
+  --fg: #1d1a2c;
+  --fg-muted: #6b6880;
+  --fg-subtle: #9a97ab;
+  --brand: #ff714f;
+  --brand-soft: rgba(255, 113, 79, 0.1);
+  --brand-ink: #e0502f;
+  --switch-off: #d6d4e0;
+  --warning: #e08a1e;
+  --danger: #cf222e;
   color-scheme: light;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --gh-bg-default: #0d1117;
-    --gh-bg-muted: #161b22;
-    --gh-bg-inset: #010409;
-    --gh-fg-default: #c9d1d9;
-    --gh-fg-muted: #8b949e;
-    --gh-fg-accent: #58a6ff;
-    --gh-border-default: #30363d;
-    --gh-border-muted: #21262d;
-    --gh-warning-fg: #d29922;
-    --gh-warning-bg: rgba(210, 153, 34, 0.15);
-    --gh-shadow-rest: 0 1px 0 rgba(240, 246, 252, 0.04);
+    --bg: #12101c;
+    --surface: #1c1929;
+    --fg: #f1eef9;
+    --fg-muted: #a39fb8;
+    --fg-subtle: #6f6a88;
+    --brand-soft: rgba(255, 113, 79, 0.14);
+    --brand-ink: #ffb17a;
+    --switch-off: #383352;
+    --warning: #ffb17a;
+    --danger: #ff7b72;
     color-scheme: dark;
   }
 }
@@ -38,91 +37,247 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
     Helvetica, Arial, sans-serif;
-  color: var(--gh-fg-default);
-  background: var(--gh-bg-default);
+  color: var(--fg);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
 }
 
 .popup {
-  width: 380px;
-  padding: 16px;
+  width: 320px;
+  padding: 18px 18px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
-.popup-header {
+.brand {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--gh-border-muted);
+  gap: 12px;
+}
+
+.brand img {
+  flex: none;
+  display: block;
 }
 
-.popup-header h1 {
+.brand h1 {
   margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--gh-fg-default);
+  font-size: 15px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
 }
 
-.row {
+.brand p {
+  margin: 1px 0 0;
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+
+.toggle {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: var(--surface);
   cursor: pointer;
+  transition: background-color 180ms ease;
+}
+
+.toggle.is-on {
+  background: var(--brand-soft);
+}
+
+.toggle-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.toggle-title {
   font-size: 13px;
-  color: var(--gh-fg-default);
+  font-weight: 600;
 }
 
-.row input[type='checkbox'] {
-  width: 16px;
-  height: 16px;
+.toggle-hint {
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+
+.switch {
+  appearance: none;
+  flex: none;
+  position: relative;
+  width: 36px;
+  height: 20px;
   margin: 0;
-  accent-color: var(--gh-fg-accent);
+  border-radius: 999px;
+  background: var(--switch-off);
   cursor: pointer;
+  transition: background-color 180ms ease;
 }
 
-.section {
-  margin-bottom: 12px;
-  padding: 12px;
-  background: var(--gh-bg-muted);
-  border: 1px solid var(--gh-border-muted);
-  border-radius: 8px;
-  box-shadow: var(--gh-shadow-rest);
+.switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  transition: transform 180ms cubic-bezier(0.3, 0.7, 0.4, 1.2);
 }
 
-.section strong {
-  display: block;
+.switch:checked {
+  background: var(--brand);
+}
+
+.switch:checked::after {
+  transform: translateX(16px);
+}
+
+.switch:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.switch:focus-visible,
+.action:focus-visible {
+  outline: 2px solid var(--brand);
+  outline-offset: 2px;
+}
+
+.actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  border-radius: 10px;
+  background: var(--surface);
+  color: var(--fg);
   font-size: 12px;
   font-weight: 600;
-  margin-bottom: 6px;
-  color: var(--gh-fg-muted);
+  text-decoration: none;
+  transition: filter 150ms ease, transform 150ms ease;
 }
 
+.action:hover {
+  filter: brightness(0.97);
+}
 
-input:focus-visible {
-  outline: 2px solid var(--gh-fg-accent);
-  outline-offset: 2px;
+.action:active {
+  transform: scale(0.98);
+}
+
+.action-primary {
+  background: linear-gradient(135deg, #ffb17a, #ff714f);
+  color: #2a1408;
+  box-shadow: 0 6px 16px -8px rgba(255, 113, 79, 0.8);
 }
 
-.section p {
+.action-primary:hover {
+  filter: brightness(1.05);
+}
+
+.steps {
+  list-style: none;
   margin: 0;
-  color: var(--gh-fg-muted);
+  padding: 0 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.steps li {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
   font-size: 12px;
-  line-height: 1.45;
+  line-height: 1.4;
 }
 
-.row input[type='checkbox']:disabled + span {
-  opacity: 0.6;
-  cursor: not-allowed;
+.steps li > span:last-child {
+  display: flex;
+  flex-direction: column;
+  color: var(--fg-muted);
+}
+
+.steps strong {
+  color: var(--fg);
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.step-index {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+  border-radius: 50%;
+  background: var(--brand-soft);
+  color: var(--brand-ink);
+  font-size: 11px;
+  font-weight: 700;
 }
 
-.status {
-  min-height: 18px;
+.notes {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 2px;
+}
+
+.notes p {
+  display: flex;
+  gap: 10px;
   margin: 0;
-  font-size: 12px;
-  color: var(--gh-fg-muted);
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--fg-muted);
+}
+
+.notes strong {
+  color: var(--fg);
+  font-weight: 600;
+}
+
+.note-icon {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  margin: 1px 3px 0;
+  fill: var(--fg-subtle);
+}
+
+.note-icon.note-warning {
+  fill: var(--warning);
+}
+
+.note-icon .note-glyph {
+  fill: var(--bg);
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 14px;
+  font-size: 11px;
+  color: var(--fg-subtle);
 }
 
 .status-error {
-  color: #cf222e;
+  color: var(--danger);
 }
diff --git a/entrypoints/popup/App.tsx b/entrypoints/popup/App.tsx
index 547bbc5..8f3e627 100644
--- a/entrypoints/popup/App.tsx
+++ b/entrypoints/popup/App.tsx
@@ -1,14 +1,33 @@
 import { useEffect, useState } from 'react';
 import { enabledStorage, purgeLegacyCredentials } from '@/utils/storage';
+import logo from '@/assets/logo.svg';
 import './App.css';
 
 type SaveState = 'idle' | 'saving' | 'saved' | 'error';
 
+const EXAMPLE_FILE_URL =
+  'https://github.com/tnfssc/github-html-preview/blob/develop/examples/demo/index.html';
+const EXAMPLE_PR_URL =
+  'https://github.com/tnfssc/github-html-preview/pull/28/files';
+
+const steps = [
+  { title: 'Open any .html file', body: 'Choose Preview next to Code.' },
+  {
+    title: 'Review pull requests',
+    body: 'Before and after render side by side.',
+  },
+  {
+    title: 'Go full screen',
+    body: 'Run the page in its own tab.',
+  },
+];
+
 export default function App(): React.JSX.Element {
   const [enabled, setEnabled] = useState(true);
   const [loaded, setLoaded] = useState(false);
   const [saveState, setSaveState] = useState<SaveState>('idle');
   const [message, setMessage] = useState('');
+  const version = browser.runtime.getManifest().version;
 
   useEffect(() => {
     async function load() {
@@ -43,64 +62,115 @@ export default function App(): React.JSX.Element {
 
   return (
     <div className="popup">
-      <div className="popup-header">
-        <h1>GitHub HTML Preview</h1>
-      </div>
+      <header className="brand">
+        <img src={logo} alt="" width={36} height={36} />
+        <div>
+          <h1>GitHub HTML Preview</h1>
+          <p>See the page, not the markup.</p>
+        </div>
+      </header>
 
-      <label className="row">
+      <label className={`toggle${enabled ? ' is-on' : ''}`}>
+        <span className="toggle-text">
+          <span className="toggle-title" id="toggle-title">
+            Show previews
+          </span>
+          <span className="toggle-hint" id="toggle-hint">
+            {enabled
+              ? 'On for HTML files and pull requests.'
+              : 'Off. GitHub shows source only.'}
+          </span>
+        </span>
         <input
           type="checkbox"
+          className="switch"
           checked={enabled}
+          aria-labelledby="toggle-title"
+          aria-describedby="toggle-hint"
           onChange={(event) => void updateEnabled(event.target.checked)}
           disabled={!loaded || saveState === 'saving'}
         />
-        <span>Show previews on GitHub HTML files and pull requests</span>
       </label>
 
-      <div className="section">
-        <strong>Executable previews</strong>
-        <p>
-          HTML previews run repository scripts in isolated frames. Scripts can
-          send preview data to external services. Only preview code you trust.
-        </p>
+      <div className="actions">
+        <a
+          className="action action-primary"
+          href={EXAMPLE_FILE_URL}
+          target="_blank"
+          rel="noreferrer"
+        >
+          Open example
+        </a>
+        <a
+          className="action"
+          href={EXAMPLE_PR_URL}
+          target="_blank"
+          rel="noreferrer"
+        >
+          Open example PR
+        </a>
       </div>
 
-      <div className="section">
-        <strong>How to use</strong>
+      <ol className="steps">
+        {steps.map((step, index) => (
+          <li key={step.title}>
+            <span className="step-index" aria-hidden="true">
+              {index + 1}
+            </span>
+            <span>
+              <strong>{step.title}</strong>
+              <span>{step.body}</span>
+            </span>
+          </li>
+        ))}
+      </ol>
+
+      <div className="notes">
         <p>
-          Open an .html or .htm file on GitHub and choose Preview beside Code.
-          Use the same Preview control on pull requests, commits, and
-          comparisons.
+          <svg className="note-icon note-warning" viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M8 1.5 15 14H1z" />
+            <path className="note-glyph" d="M7.25 6h1.5v4h-1.5zM7.25 11h1.5v1.5h-1.5z" />
+          </svg>
+          <span>
+            <strong>Previews run the file’s scripts.</strong> They run in an
+            isolated frame but can reach the network. Only preview code you
+            trust.
+          </span>
         </p>
-      </div>
-
-      <div className="section">
-        <strong>Private and organization repositories</strong>
         <p>
-          Private files use your current signed-in GitHub browser session. Sign
-          into organization SSO in the GitHub tab before choosing Preview. The
-          extension never asks for or stores a personal access token.
+          <svg className="note-icon" viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M4 7V5a4 4 0 0 1 8 0v2h1v8H3V7zm2 0h4V5a2 2 0 0 0-4 0z" />
+          </svg>
+          <span>
+            <strong>Private repos use your GitHub sign-in.</strong> Finish
+            organization SSO in the GitHub tab first. The extension never asks
+            for or stores a personal access token.
+          </span>
         </p>
-      </div>
-
-      {import.meta.env.MODE === 'debug' && (
-        <div className="section">
-          <strong>Diagnostic build</strong>
+        {import.meta.env.MODE === 'debug' && (
           <p>
-            Open GitHub DevTools and extension-page DevTools, reproduce the
-            problem, then copy console entries filtered by{' '}
-            <code>[gh-html-preview:debug]</code>. Session cookies and file
-            contents are never logged.
+            <svg className="note-icon" viewBox="0 0 16 16" aria-hidden="true">
+              <circle cx="8" cy="8" r="6" />
+            </svg>
+            <span>
+              <strong>Diagnostic build.</strong> Open GitHub DevTools and
+              extension-page DevTools, reproduce the problem, then copy console
+              entries filtered by <code>[gh-html-preview:debug]</code>. Session
+              cookies and file contents are never logged.
+            </span>
           </p>
-        </div>
-      )}
+        )}
+      </div>
 
-      <p
-        className={`status status-${saveState}`}
-        role={saveState === 'error' ? 'alert' : 'status'}
-      >
-        {message}
-      </p>
+      <footer className="footer">
+        <span>v{version}</span>
+        <span
+          className={`status status-${saveState}`}
+          role={saveState === 'error' ? 'alert' : 'status'}
+        >
+          {message}
+        </span>
+      </footer>
     </div>
   );
 }
diff --git a/entrypoints/preview/style.css b/entrypoints/preview/style.css
index cbe6ace..5bfa071 100644
--- a/entrypoints/preview/style.css
+++ b/entrypoints/preview/style.css
@@ -42,6 +42,7 @@ body,
 }
 
 main {
+  height: 100%;
   min-height: 100%;
   display: flex;
   flex-direction: column;
diff --git a/examples/demo/index.html b/examples/demo/index.html
new file mode 100644
index 0000000..e8c5f79
--- /dev/null
+++ b/examples/demo/index.html
@@ -0,0 +1,188 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="color-scheme" content="dark">
+  <meta name="theme-color" content="#14112a">
+  <title>This page lives in a GitHub repo · GitHub HTML Preview</title>
+  <meta name="description" content="A live demo rendered by the GitHub HTML Preview extension: index.html, style.css and main.js, straight from the repository.">
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+  <canvas id="ribbons" class="ribbons" aria-hidden="true"></canvas>
+  <div class="grain" aria-hidden="true"></div>
+  <div class="cursor-glow" aria-hidden="true"></div>
+
+  <header class="topbar">
+    <div class="brand">
+      <svg class="brand-mark" viewBox="0 0 128 128" aria-hidden="true">
+        <rect x="4" y="4" width="120" height="120" rx="28" fill="#262144"/>
+        <g transform="rotate(-28 64 64)">
+          <path d="M34 29 82 25Q86 25 89 29L104 47 55 66 86 97 54 108 27 88 23 63Q22 59 24 54Z" fill="#FF714F"/>
+          <path d="M34 29 82 25Q86 25 89 29L104 47 55 66 23 63Q22 59 24 54Z" fill="#FFB17A"/>
+        </g>
+      </svg>
+      <span>GitHub HTML Preview</span>
+    </div>
+    <div class="live-pill" title="This page is running JavaScript right now">
+      <span class="live-dot"></span>
+      <span>Live</span>
+      <span class="live-sep">·</span>
+      <span id="pill-fps">-- fps</span>
+    </div>
+  </header>
+
+  <main>
+    <section class="hero" id="top">
+      <div class="hero-inner">
+        <p class="kicker reveal-now"><span class="path">examples/demo/</span><b>index.html</b></p>
+        <h1 class="headline" data-split aria-label="This page lives in a GitHub repo.">
+          <span class="line">This page lives</span>
+          <span class="line">in a <em>GitHub repo.</em></span>
+        </h1>
+        <p class="lede reveal-now">
+          You’re not looking at a screenshot. This is <code>index.html</code> from the repository,
+          with its own <code>style.css</code> and <code>main.js</code>, rendered live in a sandboxed
+          frame right here on GitHub.
+        </p>
+        <div class="hero-actions reveal-now">
+          <p class="code-hint">
+            Want to see the source? Press <kbd>Code</kbd> above this frame.
+          </p>
+          <ul class="files" aria-label="Files that make up this page">
+            <li class="file magnetic" style="--c: var(--apricot)"><span class="dot"></span>index.html</li>
+            <li class="file magnetic" style="--c: var(--persimmon)"><span class="dot"></span>style.css</li>
+            <li class="file magnetic" style="--c: var(--lilac)"><span class="dot"></span>main.js</li>
+          </ul>
+        </div>
+      </div>
+      <p class="tap-hint reveal-now" aria-hidden="true"><span class="tap-ring"></span>Move or tap to fold the ribbons</p>
+      <div class="scroll-cue" aria-hidden="true"><span></span></div>
+    </section>
+
+    <section class="band" aria-hidden="true">
+      <div class="marquee" data-marquee="1"><span>Blob pages · Pull requests · Before &amp; after · Commit-pinned · Sandboxed · Private repos ·&nbsp;</span><span>Blob pages · Pull requests · Before &amp; after · Commit-pinned · Sandboxed · Private repos ·&nbsp;</span></div>
+      <div class="marquee outline" data-marquee="-1"><span>index.html + style.css + main.js = one live page ·&nbsp;</span><span>index.html + style.css + main.js = one live page ·&nbsp;</span></div>
+    </section>
+
+    <section class="section" id="how">
+      <header class="section-head reveal">
+        <p class="eyebrow">How this frame got here</p>
+        <h2>Three files. <em>One exact commit.</em></h2>
+      </header>
+      <ol class="pipeline">
+        <li class="step reveal" data-tilt style="--d: 0ms">
+          <span class="step-n">01</span>
+          <h3>Read at the commit</h3>
+          <p>The extension takes <code>index.html</code> from the exact commit this GitHub page shows, not the latest branch tip.</p>
+        </li>
+        <li class="step reveal" data-tilt style="--d: 120ms">
+          <span class="step-n">02</span>
+          <h3>Resolve its files</h3>
+          <p>Relative links to <code>style.css</code> and <code>main.js</code> are pinned to that same commit and packaged with the page.</p>
+        </li>
+        <li class="step reveal" data-tilt style="--d: 240ms">
+          <span class="step-n">03</span>
+          <h3>Run it in a sandbox</h3>
+          <p>Everything executes in an isolated frame with an opaque origin, so it can’t touch GitHub’s page or the extension.</p>
+        </li>
+      </ol>
+    </section>
+
+    <section class="section" id="proof">
+      <header class="section-head reveal">
+        <p class="eyebrow">Proof, measured by <code>main.js</code></p>
+        <h2>Running right now, <em>not a picture.</em></h2>
+      </header>
+      <div class="proof-grid">
+        <article class="stat reveal" data-tilt>
+          <p class="stat-label">Frames rendered</p>
+          <p class="stat-value" id="stat-frames">0</p>
+          <p class="stat-note">by the ribbon shader behind this text</p>
+        </article>
+        <article class="stat reveal" data-tilt style="--d: 80ms">
+          <p class="stat-label">Frame rate</p>
+          <p class="stat-value"><span id="stat-fps">--</span><small>fps</small></p>
+          <p class="stat-note">paused while you’re not looking</p>
+        </article>
+        <article class="stat reveal" data-tilt style="--d: 160ms">
+          <p class="stat-label">This frame’s origin</p>
+          <p class="stat-value mono" id="stat-origin">…</p>
+          <p class="stat-note" id="stat-origin-note">read from <code>self.origin</code></p>
+        </article>
+        <article class="stat reveal" data-tilt style="--d: 240ms">
+          <p class="stat-label">Viewport</p>
+          <p class="stat-value mono" id="stat-viewport">…</p>
+          <p class="stat-note">resize the window and watch it change</p>
+        </article>
+      </div>
+
+      <div class="resolved reveal" id="resolved">
+        <div class="resolved-head">
+          <p class="eyebrow">Where this page’s files came from</p>
+          <p class="pin" id="pin" hidden>Pinned to <span id="pin-sha" class="mono"></span></p>
+        </div>
+        <ul class="resolved-list" id="resolved-list">
+          <li><span class="rf">style.css</span><span class="rv mono">checking…</span></li>
+          <li><span class="rf">main.js</span><span class="rv mono">checking…</span></li>
+        </ul>
+        <p class="resolved-note" id="resolved-note">Read live from this document’s own <code>&lt;link&gt;</code> and <code>&lt;script&gt;</code>.</p>
+      </div>
+    </section>
+
+    <section class="section" id="where">
+      <header class="section-head reveal">
+        <p class="eyebrow">Where it works</p>
+        <h2>Everywhere HTML <em>shows up on GitHub.</em></h2>
+      </header>
+      <div class="features">
+        <article class="feature reveal" data-tilt>
+          <div class="feature-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24"><path d="M5 3h9l5 5v13H5z"/><path d="M14 3v5h5"/></svg>
+          </div>
+          <h3>Blob pages</h3>
+          <p>A <b>Preview</b> tab next to Code and Blame, plus a full-tab preview of the same commit.</p>
+        </article>
+        <article class="feature reveal" data-tilt style="--d: 80ms">
+          <div class="feature-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24"><rect x="3" y="4" width="8" height="16" rx="1.5"/><rect x="13" y="4" width="8" height="16" rx="1.5"/></svg>
+          </div>
+          <h3>Before &amp; after</h3>
+          <p>Pull requests, commits and compares render base and head side by side, with scrolling kept in sync.</p>
+        </article>
+        <article class="feature reveal" data-tilt style="--d: 160ms">
+          <div class="feature-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
+          </div>
+          <h3>Private repos</h3>
+          <p>Uses the GitHub session you’re already signed into. No tokens to paste, nothing stored.</p>
+        </article>
+        <article class="feature reveal" data-tilt style="--d: 240ms">
+          <div class="feature-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z"/></svg>
+          </div>
+          <h3>Executable, isolated</h3>
+          <p>Scripts and network access are on, walled off from GitHub and the extension. Preview code you trust.</p>
+        </article>
+      </div>
+    </section>
+
+    <section class="outro" id="outro">
+      <svg class="outro-mark reveal" viewBox="0 0 128 128" aria-hidden="true">
+        <g transform="rotate(-28 64 64)">
+          <path class="fold-under" d="M34 29 82 25Q86 25 89 29L104 47 55 66 86 97 54 108 27 88 23 63Q22 59 24 54Z" fill="#FF714F"/>
+          <path class="fold-top" d="M34 29 82 25Q86 25 89 29L104 47 55 66 23 63Q22 59 24 54Z" fill="#FFB17A"/>
+        </g>
+      </svg>
+      <h2 class="outro-title reveal" data-split aria-label="Now press Code.">
+        <span class="line">Now press <em>Code.</em></span>
+      </h2>
+      <p class="outro-copy reveal">Every pixel above came from three plain files in this folder. Flip back to Preview any time.</p>
+      <p class="footnote reveal">examples/demo · index.html · style.css · main.js</p>
+    </section>
+  </main>
+
+  <script src="./main.js" defer></script>
+</body>
+</html>
diff --git a/examples/demo/main.js b/examples/demo/main.js
new file mode 100644
index 0000000..d9a04c4
--- /dev/null
+++ b/examples/demo/main.js
@@ -0,0 +1,638 @@
+// GitHub HTML Preview demo: script resolved from the same commit as index.html.
+// Classic deferred script so it also runs when index.html is opened from disk.
+// Draws folded ribbons with a WebGL fragment shader, then layers kinetic type,
+// scroll-driven motion and a few live readouts on top. No dependencies.
+
+const SCRIPT_URL = document.currentScript ? document.currentScript.src : '';
+const root = document.documentElement;
+const reduceMotionQuery = matchMedia('(prefers-reduced-motion: reduce)');
+let reduceMotion = reduceMotionQuery.matches;
+const finePointer = matchMedia('(hover: hover) and (pointer: fine)').matches;
+
+const state = {
+  frames: 0,
+  fps: 0,
+  running: true,
+  visible: !document.hidden,
+  onScreen: true,
+  scroll: 0,
+  mouse: { x: 0.25, y: -0.05, tx: 0.25, ty: -0.05, active: 0, tActive: 0 },
+  pulse: { x: 0, y: 0, start: -100 },
+};
+
+/* ------------------------------------------------------------------ */
+/* Ribbon shader                                                       */
+/* ------------------------------------------------------------------ */
+
+const VERT = `
+attribute vec2 aPos;
+void main() { gl_Position = vec4(aPos, 0.0, 1.0); }
+`;
+
+const FRAG = `
+precision highp float;
+uniform vec2 uRes;
+uniform float uTime;
+uniform vec2 uMouse;
+uniform float uMouseOn;
+uniform float uScroll;
+uniform vec3 uPulse;
+uniform float uWide;
+
+const vec3 INK = vec3(0.078, 0.067, 0.165);
+const vec3 VIOLET = vec3(0.149, 0.129, 0.267);
+const vec3 APRICOT = vec3(1.0, 0.694, 0.478);
+const vec3 PERSIMMON = vec3(1.0, 0.443, 0.310);
+const vec3 CREAM = vec3(1.0, 0.92, 0.84);
+const vec3 LILAC = vec3(0.56, 0.48, 0.95);
+const int RIBBONS = 7;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+}
+
+float centerY(float x, float fi, float t) {
+  float base = (fi - 3.0) * 0.085 * uWide;
+  float y = base
+    + 0.16 * sin(x * 1.15 + t * 0.32 + fi * 0.9)
+    + 0.06 * sin(x * 2.7 - t * 0.47 + fi * 1.7)
+    + 0.025 * sin(x * 5.3 + t * 0.8 + fi * 2.3);
+  // Cursor pushes nearby ribbons apart.
+  float dx = x - uMouse.x;
+  float dy = y - uMouse.y;
+  float infl = exp(-dx * dx * 9.0) * uMouseOn;
+  y += infl * 0.11 * sign(dy) * exp(-abs(dy) * 7.0);
+  // Tap ripple.
+  float pt = uPulse.z;
+  vec2 pp = vec2(x, y) - uPulse.xy;
+  float pr = length(pp);
+  y += 0.05 * sin(pr * 26.0 - pt * 9.0) * exp(-pr * 3.5) * exp(-pt * 1.4) * step(0.0, pt);
+  return y;
+}
+
+void main() {
+  vec2 frag = gl_FragCoord.xy;
+  vec2 uv = (frag - 0.5 * uRes) / uRes.y;
+  float px = 1.0 / uRes.y;
+
+  // Background: deep violet with a warm bloom on the right.
+  float glow = smoothstep(1.2, 0.0, length((uv - vec2(0.45, 0.1)) * vec2(0.7, 1.1)));
+  vec3 col = mix(INK, VIOLET, glow * 0.9);
+  col += LILAC * 0.05 * smoothstep(0.9, 0.0, length(uv - vec2(-0.6, -0.5)));
+
+  // Field rotation follows scroll; ribbons drift up and away.
+  float ang = -0.42 + uScroll * 0.55;
+  float ca = cos(ang), sa = sin(ang);
+  vec2 shift = vec2(0.22 * uWide, -0.08 - uScroll * 0.35);
+  vec2 p = mat2(ca, sa, -sa, ca) * (uv - shift);
+  float t = uTime;
+
+  for (int i = 0; i < RIBBONS; i++) {
+    float fi = float(i);
+    float depth = fi / float(RIBBONS - 1);
+    float scale = mix(0.62, 1.12, depth);
+    vec2 q = p / scale + vec2(fi * 0.37, 0.0);
+    float x = q.x;
+
+    float cy = centerY(x, fi, t);
+    float slope = (centerY(x + 0.01, fi, t) - cy) / 0.01;
+    float norm = inversesqrt(1.0 + slope * slope);
+
+    float twist = x * (1.25 + 0.18 * fi) - t * (0.38 + 0.03 * fi) + fi * 2.1;
+    float c = cos(twist);
+    float s = sin(twist);
+    float halfW = mix(0.022, 0.07, depth) * (0.16 + 0.84 * abs(c));
+    float d = (q.y - cy) * norm / halfW;
+    float aa = (1.6 * px / scale) / halfW;
+
+    // Soft contact shadow on whatever is behind.
+    float sh = exp(-pow((q.y - cy + 0.035) * norm / (halfW * 2.4 + 0.02), 2.0));
+    col *= 1.0 - 0.38 * sh * mix(0.4, 1.0, depth);
+
+    float a = 1.0 - smoothstep(1.0 - aa, 1.0 + aa, abs(d));
+    if (a > 0.0) {
+      // Two-tone fold, like the logo: apricot face over persimmon underside.
+      float face = smoothstep(-0.08, 0.08, c);
+      vec3 rc = mix(PERSIMMON * vec3(0.95, 0.85, 0.9), APRICOT, face);
+      float along = 0.5 + 0.5 * sin(x * 0.7 + fi);
+      rc = mix(rc, mix(PERSIMMON, CREAM, face * 0.4), along * 0.25);
+      float light = 0.5 + 0.5 * abs(c);
+      rc *= light;
+      // Glint slides across the band as it turns.
+      float glint = exp(-pow((d + 0.55 * s) * 2.6, 2.0)) * pow(abs(c), 3.0);
+      rc += CREAM * glint * 0.42;
+      // Rolled edges and a crease where it folds.
+      rc *= 0.82 + 0.18 * (1.0 - d * d);
+      rc *= mix(0.72, 1.0, smoothstep(0.0, 0.35, abs(c)));
+      // Atmospheric depth.
+      rc = mix(VIOLET * 1.1, rc, mix(0.42, 1.0, depth));
+      col = mix(col, rc, a);
+    }
+    // Faint halo.
+    col += mix(PERSIMMON, APRICOT, 0.5) * 0.035 * depth * exp(-abs(d) * 0.9) * (0.4 + 0.6 * abs(c));
+  }
+
+  // Vignette, scroll dimming, grain.
+  float vig = smoothstep(1.35, 0.25, length(uv * vec2(0.9, 1.25)));
+  col *= mix(0.55, 1.0, vig);
+  col = mix(col, INK, clamp(uScroll * 0.55, 0.0, 0.5));
+  col += (hash(frag + fract(t * 7.0) * 91.0) - 0.5) * 0.035;
+  gl_FragColor = vec4(col, 1.0);
+}
+`;
+
+function createRibbons(canvas) {
+  const gl = canvas.getContext('webgl', {
+    antialias: false,
+    alpha: false,
+    depth: false,
+    stencil: false,
+    powerPreference: 'high-performance',
+    preserveDrawingBuffer: false,
+  });
+  if (!gl) return null;
+
+  const compile = (type, source) => {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      console.warn('[demo] shader:', gl.getShaderInfoLog(shader));
+      return null;
+    }
+    return shader;
+  };
+
+  const vs = compile(gl.VERTEX_SHADER, VERT);
+  const fs = compile(gl.FRAGMENT_SHADER, FRAG);
+  if (!vs || !fs) return null;
+  const program = gl.createProgram();
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return null;
+  gl.useProgram(program);
+
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+  const aPos = gl.getAttribLocation(program, 'aPos');
+  gl.enableVertexAttribArray(aPos);
+  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+
+  const u = {};
+  for (const name of ['uRes', 'uTime', 'uMouse', 'uMouseOn', 'uScroll', 'uPulse', 'uWide']) {
+    u[name] = gl.getUniformLocation(program, name);
+  }
+
+  // Keep fill cost bounded: cap DPR and total pixel count.
+  const MAX_PIXELS = 1.8e6;
+  let width = 0;
+  let height = 0;
+  const resize = () => {
+    const cssW = canvas.clientWidth || innerWidth;
+    const cssH = canvas.clientHeight || innerHeight;
+    let ratio = Math.min(devicePixelRatio || 1, 1.5);
+    const pixels = cssW * cssH * ratio * ratio;
+    if (pixels > MAX_PIXELS) ratio *= Math.sqrt(MAX_PIXELS / pixels);
+    const w = Math.max(1, Math.round(cssW * ratio));
+    const h = Math.max(1, Math.round(cssH * ratio));
+    if (w !== width || h !== height) {
+      width = canvas.width = w;
+      height = canvas.height = h;
+      gl.viewport(0, 0, w, h);
+    }
+  };
+
+  let lost = false;
+  canvas.addEventListener('webglcontextlost', (event) => {
+    event.preventDefault();
+    lost = true;
+  });
+
+  return {
+    resize,
+    aspect: () => width / Math.max(1, height),
+    draw(time, view) {
+      if (lost) return;
+      gl.uniform2f(u.uRes, width, height);
+      gl.uniform1f(u.uTime, time);
+      gl.uniform2f(u.uMouse, view.mx, view.my);
+      gl.uniform1f(u.uMouseOn, view.mouseOn);
+      gl.uniform1f(u.uScroll, view.scroll);
+      gl.uniform3f(u.uPulse, view.px, view.py, view.pt);
+      gl.uniform1f(u.uWide, view.wide);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    },
+  };
+}
+
+const canvas = document.getElementById('ribbons');
+let ribbons = null;
+try {
+  ribbons = createRibbons(canvas);
+} catch (error) {
+  console.warn('[demo] WebGL unavailable:', error);
+}
+if (!ribbons) root.classList.add('no-gl');
+
+/* Pointer position in shader space (field-rotated coordinates). */
+function toField(clientX, clientY) {
+  const h = innerHeight;
+  const w = innerWidth;
+  const ux = (clientX - w / 2) / h;
+  const uy = (h / 2 - clientY) / h;
+  const wide = wideFactor();
+  const ang = -0.42 + state.scroll * 0.55;
+  const sx = ux - 0.22 * wide;
+  const sy = uy - (-0.08 - state.scroll * 0.35);
+  const ca = Math.cos(ang);
+  const sa = Math.sin(ang);
+  // GLSL mat2(ca, sa, -sa, ca) * v  ->  (ca*x - sa*y, sa*x + ca*y)
+  return { x: ca * sx - sa * sy, y: sa * sx + ca * sy };
+}
+
+function wideFactor() {
+  // Spread ribbons a little more on wide screens; tighten on phones.
+  const aspect = innerWidth / Math.max(1, innerHeight);
+  return Math.min(1.25, Math.max(0.55, aspect * 0.75));
+}
+
+/* ------------------------------------------------------------------ */
+/* Kinetic headline                                                    */
+/* ------------------------------------------------------------------ */
+
+function splitText(el) {
+  let index = 0;
+  const walk = (node) => {
+    for (const child of [...node.childNodes]) {
+      if (child.nodeType === Node.TEXT_NODE) {
+        const frag = document.createDocumentFragment();
+        const parts = child.textContent.split(/(\s+)/);
+        for (const part of parts) {
+          if (!part) continue;
+          if (/^\s+$/.test(part)) {
+            frag.append(document.createTextNode(' '));
+            continue;
+          }
+          const word = document.createElement('span');
+          word.className = 'word';
+          for (const ch of part) {
+            const span = document.createElement('span');
+            span.className = 'char';
+            span.textContent = ch;
+            span.style.setProperty('--i', String(index++));
+            word.append(span);
+          }
+          frag.append(word);
+        }
+        child.replaceWith(frag);
+      } else if (child.nodeType === Node.ELEMENT_NODE) {
+        walk(child);
+      }
+    }
+  };
+  walk(el);
+  for (const em of el.querySelectorAll('em')) {
+    const chars = em.querySelectorAll('.char');
+    chars.forEach((c, j) => {
+      c.style.setProperty('--j', String(j));
+      c.style.setProperty('--n', String(chars.length));
+    });
+  }
+  for (const child of el.children) child.setAttribute('aria-hidden', 'true');
+  el.classList.add('split-ready');
+}
+
+const splitTargets = [...document.querySelectorAll('[data-split]')];
+splitTargets.forEach(splitText);
+
+const heroChars = [...document.querySelectorAll('.headline .char')];
+let charBoxes = [];
+const measureChars = () => {
+  charBoxes = heroChars.map((c) => {
+    const r = c.getBoundingClientRect();
+    return { x: r.left + r.width / 2 + scrollX, y: r.top + r.height / 2 + scrollY };
+  });
+};
+
+function updateChars(clientX, clientY, strength) {
+  if (reduceMotion || !charBoxes.length) return;
+  const px = clientX + scrollX;
+  const py = clientY + scrollY;
+  for (let i = 0; i < heroChars.length; i++) {
+    const b = charBoxes[i];
+    const dx = b.x - px;
+    const dy = b.y - py;
+    const f = Math.exp(-(dx * dx + dy * dy) / 26000) * strength;
+    heroChars[i].style.setProperty('--lift', (f * 22).toFixed(2));
+    heroChars[i].style.setProperty('--tilt', (f * Math.sign(dx || 1) * 7).toFixed(2));
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Pointer, tilt, magnetic chips                                       */
+/* ------------------------------------------------------------------ */
+
+let pointerFrame = 0;
+let lastPointer = null;
+
+function onPointerMove(event) {
+  lastPointer = event;
+  if (event.pointerType === 'mouse') root.classList.add('has-pointer');
+  if (pointerFrame) return;
+  pointerFrame = requestAnimationFrame(() => {
+    pointerFrame = 0;
+    const e = lastPointer;
+    const f = toField(e.clientX, e.clientY);
+    state.mouse.tx = f.x;
+    state.mouse.ty = f.y;
+    state.mouse.tActive = 1;
+    root.style.setProperty('--mx', `${e.clientX}px`);
+    root.style.setProperty('--my', `${e.clientY}px`);
+    updateChars(e.clientX, e.clientY, 1);
+  });
+}
+
+addEventListener('pointermove', onPointerMove, { passive: true });
+document.addEventListener('pointerleave', () => {
+  state.mouse.tActive = 0;
+  root.classList.remove('has-pointer');
+  updateChars(-9999, -9999, 0);
+});
+
+addEventListener('pointerdown', (event) => {
+  if (event.target.closest('a, button, kbd')) return;
+  const f = toField(event.clientX, event.clientY);
+  state.pulse.x = f.x;
+  state.pulse.y = f.y;
+  state.pulse.start = clock;
+  state.mouse.tx = f.x;
+  state.mouse.ty = f.y;
+  state.mouse.tActive = 1;
+});
+
+if (finePointer && !reduceMotion) {
+  for (const card of document.querySelectorAll('[data-tilt]')) {
+    card.addEventListener('pointermove', (event) => {
+      const r = card.getBoundingClientRect();
+      const nx = (event.clientX - r.left) / r.width;
+      const ny = (event.clientY - r.top) / r.height;
+      card.style.setProperty('--ry', `${((nx - 0.5) * 10).toFixed(2)}deg`);
+      card.style.setProperty('--rx', `${((0.5 - ny) * 10).toFixed(2)}deg`);
+      card.style.setProperty('--gx', `${(nx * 100).toFixed(1)}%`);
+      card.style.setProperty('--gy', `${(ny * 100).toFixed(1)}%`);
+    });
+    card.addEventListener('pointerleave', () => {
+      card.style.setProperty('--rx', '0deg');
+      card.style.setProperty('--ry', '0deg');
+    });
+  }
+
+  for (const chip of document.querySelectorAll('.magnetic')) {
+    chip.addEventListener('pointermove', (event) => {
+      const r = chip.getBoundingClientRect();
+      const dx = event.clientX - (r.left + r.width / 2);
+      const dy = event.clientY - (r.top + r.height / 2);
+      chip.style.setProperty('--tx', `${(dx * 0.25).toFixed(1)}px`);
+      chip.style.setProperty('--ty', `${(dy * 0.35).toFixed(1)}px`);
+    });
+    chip.addEventListener('pointerleave', () => {
+      chip.style.setProperty('--tx', '0px');
+      chip.style.setProperty('--ty', '0px');
+    });
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Scroll-driven motion                                                */
+/* ------------------------------------------------------------------ */
+
+const marquees = [...document.querySelectorAll('[data-marquee]')];
+const band = document.querySelector('.band');
+
+function onScroll() {
+  const vh = innerHeight || 1;
+  state.scroll = Math.min(1.5, scrollY / vh);
+  root.style.setProperty('--scroll', Math.min(1, state.scroll).toFixed(4));
+}
+addEventListener('scroll', onScroll, { passive: true });
+onScroll();
+
+function updateMarquees(time) {
+  if (!band) return;
+  const r = band.getBoundingClientRect();
+  if (r.bottom < -50 || r.top > innerHeight + 50) return;
+  const progress = (innerHeight - r.top) / (innerHeight + r.height);
+  const drift = reduceMotion ? 0 : time * 14;
+  for (const m of marquees) {
+    const dir = Number(m.dataset.marquee);
+    const half = m.scrollWidth / 2 || 1;
+    let x = (progress * 900 + drift) * dir;
+    x = ((x % half) + half) % half;
+    m.style.transform = `translate3d(${-x}px, 0, 0)`;
+  }
+}
+
+const revealObserver = new IntersectionObserver(
+  (entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('is-in');
+        revealObserver.unobserve(entry.target);
+      }
+    }
+  },
+  { rootMargin: '0px 0px -8% 0px', threshold: 0.12 },
+);
+document.querySelectorAll('.reveal').forEach((el) => revealObserver.observe(el));
+
+/* ------------------------------------------------------------------ */
+/* Live readouts                                                       */
+/* ------------------------------------------------------------------ */
+
+const $ = (id) => document.getElementById(id);
+const fpsEls = [$('pill-fps'), $('stat-fps')];
+const framesEl = $('stat-frames');
+const viewportEl = $('stat-viewport');
+
+function renderViewport() {
+  viewportEl.textContent = `${innerWidth}×${innerHeight}`;
+}
+
+function renderOrigin() {
+  let origin = 'unknown';
+  try {
+    origin = String(self.origin);
+  } catch {
+    // Some embedders hide it; keep the fallback.
+  }
+  $('stat-origin').textContent = origin;
+  let framed = false;
+  try {
+    framed = window.top !== window.self;
+  } catch {
+    framed = true;
+  }
+  if (!framed) {
+    const hint = document.querySelector('.code-hint');
+    if (hint) hint.innerHTML = 'Opened directly. On GitHub, press <kbd>Code</kbd> to read the source.';
+  }
+  const note = $('stat-origin-note');
+  if (origin === 'null' && framed) {
+    note.innerHTML = 'opaque sandbox: no cookies, no access to GitHub’s page';
+  } else if (framed) {
+    note.innerHTML = 'running inside a frame';
+  }
+}
+
+function describeUrl(url) {
+  if (!url) return { text: 'not found', sha: null };
+  if (url.startsWith('data:')) {
+    const comma = url.indexOf(',');
+    const meta = url.slice(5, comma).replace(';base64', '');
+    const bytes = url.includes(';base64,') ? Math.round(((url.length - comma - 1) * 3) / 4) : url.length - comma - 1;
+    return { text: `packaged inline as ${meta} · ${(bytes / 1024).toFixed(1)} KB`, sha: null, kind: 'data' };
+  }
+  const sha = (url.match(/@([0-9a-f]{40}|[0-9a-f]{7,12})\//) || url.match(/\/([0-9a-f]{40})\//) || [])[1] || null;
+  return { text: url, sha, kind: 'url' };
+}
+
+function renderResolved() {
+  const link = document.querySelector('link[rel~="stylesheet"]');
+  const css = describeUrl(link ? link.href : '');
+  const js = describeUrl(SCRIPT_URL);
+  const rows = document.querySelectorAll('#resolved-list .rv');
+  const paint = (el, info) => {
+    el.textContent = '';
+    if (info.sha && info.kind === 'url') {
+      const [before, after] = info.text.split(info.sha);
+      el.append(before);
+      const mark = document.createElement('mark');
+      mark.textContent = info.sha;
+      el.append(mark, after ?? '');
+    } else {
+      el.textContent = info.text;
+    }
+    el.title = info.kind === 'data' ? '' : info.text;
+  };
+  paint(rows[0], css);
+  paint(rows[1], js);
+
+  const sha = css.sha || js.sha;
+  if (sha) {
+    $('pin').hidden = false;
+    $('pin-sha').textContent = sha.slice(0, 7);
+    $('pin-sha').title = sha;
+  }
+  const note = $('resolved-note');
+  if (css.kind === 'data' || js.kind === 'data') {
+    note.innerHTML = 'Fetched from this exact commit and packaged into the sandbox, so the preview can\u2019t drift with the branch. Read live from this document’s own <code>&lt;link&gt;</code> and <code>&lt;script&gt;</code>.';
+  } else if (sha) {
+    note.innerHTML = 'Rewritten to commit-pinned URLs, so this preview can’t drift with the branch. Read live from this document’s own <code>&lt;link&gt;</code> and <code>&lt;script&gt;</code>.';
+  } else if (location.protocol === 'file:' || /^https?:\/\/(localhost|127\.)/.test(location.href)) {
+    note.innerHTML = 'Opened directly, outside the extension: these are plain relative files. On GitHub, the extension pins them to a commit.';
+  }
+}
+
+renderViewport();
+renderOrigin();
+renderResolved();
+addEventListener('resize', () => {
+  renderViewport();
+  measureChars();
+  if (ribbons) ribbons.resize();
+});
+
+/* ------------------------------------------------------------------ */
+/* Animation loop                                                      */
+/* ------------------------------------------------------------------ */
+
+let clock = 0;
+let last = performance.now();
+let fpsAccum = 0;
+let fpsFrames = 0;
+let rafId = 0;
+let uiTick = 0;
+
+function frame(now) {
+  rafId = 0;
+  const dt = Math.min(0.05, (now - last) / 1000);
+  last = now;
+  const speed = reduceMotion ? 0.18 : 1;
+  clock += dt * speed;
+
+  const m = state.mouse;
+  const k = 1 - Math.pow(0.002, dt);
+  m.x += (m.tx - m.x) * k;
+  m.y += (m.ty - m.y) * k;
+  m.active += (m.tActive - m.active) * (1 - Math.pow(0.05, dt));
+
+  if (ribbons) {
+    ribbons.resize();
+    const pt = clock - state.pulse.start;
+    ribbons.draw(clock + 40, {
+      mx: m.x,
+      my: m.y,
+      mouseOn: reduceMotion ? 0 : m.active,
+      scroll: state.scroll,
+      px: state.pulse.x,
+      py: state.pulse.y,
+      pt: pt < 6 ? pt : -1,
+      wide: wideFactor(),
+    });
+  }
+  updateMarquees(clock);
+
+  state.frames++;
+  fpsAccum += dt;
+  fpsFrames++;
+  if (fpsAccum >= 0.5) {
+    state.fps = Math.round(fpsFrames / fpsAccum);
+    fpsAccum = 0;
+    fpsFrames = 0;
+    for (const el of fpsEls) el.textContent = el.id === 'pill-fps' ? `${state.fps} fps` : String(state.fps);
+  }
+  if (++uiTick % 6 === 0) framesEl.textContent = state.frames.toLocaleString('en-US');
+
+  schedule();
+}
+
+function schedule() {
+  if (!rafId && state.visible && state.onScreen) {
+    last = performance.now();
+    rafId = requestAnimationFrame(frame);
+  }
+}
+
+document.addEventListener('visibilitychange', () => {
+  state.visible = !document.hidden;
+  if (state.visible) schedule();
+  else if (rafId) {
+    cancelAnimationFrame(rafId);
+    rafId = 0;
+  }
+});
+
+// Pause when this frame is scrolled out of GitHub's viewport.
+new IntersectionObserver((entries) => {
+  state.onScreen = entries[entries.length - 1].isIntersecting;
+  if (state.onScreen) schedule();
+  else if (rafId) {
+    cancelAnimationFrame(rafId);
+    rafId = 0;
+  }
+}).observe(canvas.isConnected && ribbons ? canvas : document.querySelector('.hero'));
+
+reduceMotionQuery.addEventListener?.('change', (event) => {
+  reduceMotion = event.matches;
+});
+
+requestAnimationFrame(() => {
+  measureChars();
+  // Re-measure after the intro letters have settled.
+  setTimeout(measureChars, 1800);
+});
+document.fonts?.ready?.then(measureChars).catch(() => {});
+
+schedule();
diff --git a/examples/demo/style.css b/examples/demo/style.css
new file mode 100644
index 0000000..51c7d0f
--- /dev/null
+++ b/examples/demo/style.css
@@ -0,0 +1,887 @@
+/* GitHub HTML Preview demo: styles resolved from the same commit as index.html. */
+
+:root {
+  --violet: #262144;
+  --ink: #14112a;
+  --ink-2: #1b1736;
+  --apricot: #ffb17a;
+  --persimmon: #ff714f;
+  --lilac: #b7a9ff;
+  --cream: #fff3e6;
+  --text: #f4efff;
+  --muted: #b9b2d6;
+  --line: rgba(255, 255, 255, 0.1);
+  --glass: rgba(27, 23, 54, 0.55);
+  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
+  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --pad: clamp(20px, 5vw, 72px);
+  --scroll: 0;
+  --mx: 50vw;
+  --my: 40vh;
+  color-scheme: dark;
+}
+
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+html {
+  background: var(--ink);
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--text);
+  font-family: var(--sans);
+  font-size: clamp(15px, 0.6vw + 12px, 18px);
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  background:
+    radial-gradient(120% 80% at 80% 10%, #2f2858 0%, transparent 60%),
+    radial-gradient(90% 70% at 0% 100%, #231d47 0%, transparent 60%),
+    var(--ink);
+}
+
+::selection { background: var(--persimmon); color: var(--ink); }
+
+code, kbd, .mono { font-family: var(--mono); }
+
+code {
+  font-size: 0.86em;
+  padding: 0.1em 0.38em;
+  border-radius: 6px;
+  background: rgba(255, 177, 122, 0.12);
+  color: var(--apricot);
+  white-space: nowrap;
+}
+
+em {
+  font-family: var(--serif);
+  font-style: italic;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  background: linear-gradient(100deg, var(--apricot) 10%, var(--persimmon) 60%, var(--apricot) 110%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: sheen 7s linear infinite;
+  padding-right: 0.06em;
+}
+
+@keyframes sheen { to { background-position: -200% 0; } }
+
+/* ---------- Background layers ---------- */
+
+.ribbons {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  display: block;
+  pointer-events: none;
+  transition: opacity 1.4s var(--ease-out);
+}
+
+.no-gl .ribbons { display: none; }
+
+.no-gl body::before {
+  content: "";
+  position: fixed;
+  inset: -20%;
+  z-index: 0;
+  background:
+    linear-gradient(160deg, transparent 52%, rgba(255, 177, 122, 0.55) 53%, rgba(255, 113, 79, 0.65) 60%, transparent 61%),
+    linear-gradient(150deg, transparent 64%, rgba(255, 113, 79, 0.4) 65%, rgba(255, 177, 122, 0.4) 70%, transparent 71%);
+  filter: blur(1px);
+}
+
+.grain {
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0.09;
+  mix-blend-mode: overlay;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+.cursor-glow {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 520px;
+  height: 520px;
+  margin: -260px 0 0 -260px;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, rgba(255, 177, 122, 0.16), rgba(255, 113, 79, 0.06) 45%, transparent 70%);
+  transform: translate3d(var(--mx), var(--my), 0);
+  opacity: 0;
+  transition: opacity 0.6s ease;
+  mix-blend-mode: screen;
+}
+
+.has-pointer .cursor-glow { opacity: 1; }
+
+/* ---------- Top bar ---------- */
+
+.topbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px var(--pad);
+  pointer-events: none;
+}
+
+.topbar::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 -28px;
+  z-index: -1;
+  background: linear-gradient(180deg, rgba(20, 17, 42, 0.92) 0%, rgba(20, 17, 42, 0.7) 55%, transparent);
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
+  mask-image: linear-gradient(180deg, #000 60%, transparent);
+  opacity: clamp(0, calc(var(--scroll) * 3 - 0.3), 1);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 650;
+  font-size: 14px;
+  letter-spacing: 0.01em;
+  color: var(--text);
+}
+
+.brand-mark {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+
+.live-pill {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--cream);
+  background: rgba(20, 17, 42, 0.6);
+  border: 1px solid var(--line);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  font-variant-numeric: tabular-nums;
+}
+
+.live-sep { opacity: 0.4; }
+
+.live-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--persimmon);
+  box-shadow: 0 0 0 0 rgba(255, 113, 79, 0.7);
+  animation: pulse 1.8s ease-out infinite;
+}
+
+@keyframes pulse {
+  0% { box-shadow: 0 0 0 0 rgba(255, 113, 79, 0.65); }
+  80%, 100% { box-shadow: 0 0 0 10px rgba(255, 113, 79, 0); }
+}
+
+/* ---------- Layout ---------- */
+
+main {
+  position: relative;
+  z-index: 2;
+  overflow-x: clip;
+}
+
+.hero {
+  position: relative;
+  min-height: 100vh;
+  min-height: 100svh;
+  display: flex;
+  align-items: center;
+  padding: 96px var(--pad) 120px;
+}
+
+.hero-inner {
+  position: relative;
+  max-width: 1120px;
+  width: 100%;
+  transform: translate3d(0, calc(var(--scroll) * -60px), 0);
+  opacity: calc(1 - var(--scroll) * 1.1);
+}
+
+.hero-inner::before {
+  /* Soft shade so copy stays readable over the brightest ribbons. */
+  content: "";
+  position: absolute;
+  z-index: -1;
+  left: -18%;
+  top: -12%;
+  width: 100%;
+  height: 128%;
+  pointer-events: none;
+  background: radial-gradient(closest-side, rgba(14, 11, 32, 0.78), rgba(14, 11, 32, 0.45) 55%, transparent);
+  filter: blur(10px);
+}
+
+.kicker {
+  margin: 0 0 22px;
+  font-family: var(--mono);
+  font-size: 13px;
+  letter-spacing: 0.02em;
+  color: var(--muted);
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  padding: 6px 12px;
+  border-radius: 8px;
+  background: rgba(20, 17, 42, 0.55);
+  border: 1px solid var(--line);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+
+.kicker b { color: var(--apricot); font-weight: 600; }
+
+.headline {
+  margin: 0;
+  font-size: clamp(44px, 8.6vw, 132px);
+  line-height: 0.95;
+  font-weight: 760;
+  letter-spacing: -0.045em;
+  text-wrap: balance;
+  text-shadow: 0 10px 50px rgba(10, 8, 25, 0.55);
+}
+
+.headline .line,
+.outro-title .line {
+  display: block;
+  white-space: nowrap;
+}
+
+.headline em { font-weight: 500; letter-spacing: -0.03em; }
+
+/* Split text (built by main.js) */
+.word { display: inline-block; white-space: nowrap; }
+
+.char {
+  display: inline-block;
+  will-change: transform;
+  transform: translate3d(0, calc(var(--lift, 0) * -1px), 0) rotate(calc(var(--tilt, 0) * 1deg));
+  transition: transform 0.5s var(--ease-out);
+}
+
+.split-ready .char {
+  animation: char-in 1.1s var(--ease-out) both;
+  animation-delay: calc(var(--i) * 32ms + 120ms);
+}
+
+.split-ready em { animation: none; background: none; color: inherit; }
+
+.split-ready em .char {
+  /* One gradient spread across the letters of the word. */
+  background: linear-gradient(100deg, var(--apricot) 0%, var(--persimmon) 55%, #ff9a6a 100%);
+  background-size: calc(var(--n, 1) * 100%) 100%;
+  background-position: calc(var(--j, 0) / max(var(--n, 1) - 1, 1) * 100%) 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  padding-right: 0.04em;
+  margin-right: -0.04em;
+}
+
+@keyframes char-in {
+  0% { opacity: 0; transform: translate3d(0, 0.7em, 0) rotate(8deg) scale(0.9); filter: blur(12px); }
+  60% { filter: blur(0); }
+  100% { opacity: 1; transform: translate3d(0, calc(var(--lift, 0) * -1px), 0) rotate(calc(var(--tilt, 0) * 1deg)); }
+}
+
+.lede {
+  max-width: 38em;
+  margin: 28px 0 0;
+  font-size: clamp(16px, 0.7vw + 13px, 21px);
+  color: #ddd6f3;
+  text-shadow: 0 2px 20px rgba(10, 8, 25, 0.8);
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 14px 22px;
+  margin-top: 30px;
+}
+
+.code-hint {
+  margin: 0;
+  font-size: 15px;
+  color: var(--muted);
+}
+
+kbd {
+  display: inline-block;
+  padding: 2px 9px;
+  border-radius: 7px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ink);
+  background: linear-gradient(180deg, var(--cream), var(--apricot));
+  box-shadow: 0 2px 0 #c97a4a, 0 6px 18px rgba(255, 140, 90, 0.35);
+  animation: nudge 3.2s ease-in-out infinite 2.4s;
+}
+
+@keyframes nudge {
+  0%, 82%, 100% { transform: translateY(0); }
+  88% { transform: translateY(-4px); }
+  94% { transform: translateY(1px); }
+}
+
+.files {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.file {
+  --c: var(--apricot);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 13px;
+  border-radius: 999px;
+  font-family: var(--mono);
+  font-size: 13px;
+  color: var(--text);
+  background: rgba(20, 17, 42, 0.6);
+  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  transition: transform 0.4s var(--ease-out), border-color 0.3s, background 0.3s;
+  transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
+}
+
+.file:hover {
+  border-color: var(--c);
+  background: color-mix(in srgb, var(--c) 14%, rgba(20, 17, 42, 0.7));
+}
+
+.file .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--c);
+  box-shadow: 0 0 12px var(--c);
+}
+
+.tap-hint {
+  position: absolute;
+  right: var(--pad);
+  bottom: 34px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(244, 239, 255, 0.6);
+  opacity: calc(1 - var(--scroll) * 4);
+}
+
+.tap-ring {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 1.5px solid var(--apricot);
+  animation: ring 2.4s var(--ease-out) infinite;
+}
+
+@keyframes ring {
+  0% { transform: scale(0.6); opacity: 1; }
+  100% { transform: scale(1.8); opacity: 0; }
+}
+
+.scroll-cue {
+  position: absolute;
+  left: var(--pad);
+  bottom: 28px;
+  width: 22px;
+  height: 36px;
+  border-radius: 12px;
+  border: 1.5px solid rgba(244, 239, 255, 0.35);
+  opacity: calc(1 - var(--scroll) * 4);
+}
+
+.scroll-cue span {
+  position: absolute;
+  left: 50%;
+  top: 7px;
+  width: 3px;
+  height: 7px;
+  margin-left: -1.5px;
+  border-radius: 2px;
+  background: var(--apricot);
+  animation: wheel 1.8s var(--ease-out) infinite;
+}
+
+@keyframes wheel {
+  0% { transform: translateY(0); opacity: 1; }
+  100% { transform: translateY(12px); opacity: 0; }
+}
+
+/* Entry fades for hero copy */
+.reveal-now {
+  animation: rise 1.2s var(--ease-out) both;
+}
+
+.kicker.reveal-now { animation-delay: 0.05s; }
+.lede.reveal-now { animation-delay: 0.75s; }
+.hero-actions.reveal-now { animation-delay: 0.95s; }
+.tap-hint.reveal-now { animation-delay: 1.6s; }
+
+@keyframes rise {
+  from { opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(6px); }
+  to { opacity: 1; transform: none; filter: none; }
+}
+
+/* ---------- Marquee band ---------- */
+
+.band {
+  position: relative;
+  padding: 36px 0;
+  overflow: hidden;
+  transform: rotate(-3deg);
+  margin: 0 -4vw;
+}
+
+.marquee {
+  display: flex;
+  width: max-content;
+  white-space: nowrap;
+  font-size: clamp(40px, 7vw, 104px);
+  font-weight: 780;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
+  will-change: transform;
+}
+
+.marquee span {
+  background: linear-gradient(90deg, var(--apricot), var(--persimmon), var(--apricot));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.marquee.outline span {
+  background: none;
+  color: transparent;
+  -webkit-text-stroke: 1.2px rgba(244, 239, 255, 0.45);
+}
+
+/* ---------- Sections ---------- */
+
+.section {
+  position: relative;
+  padding: clamp(72px, 12vh, 140px) var(--pad);
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.section-head { max-width: 860px; margin-bottom: clamp(32px, 5vw, 56px); }
+
+.eyebrow {
+  margin: 0 0 12px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--apricot);
+}
+
+.eyebrow code { text-transform: none; letter-spacing: 0; }
+
+h2 {
+  margin: 0;
+  font-size: clamp(34px, 5.2vw, 76px);
+  line-height: 1;
+  font-weight: 740;
+  letter-spacing: -0.04em;
+  text-wrap: balance;
+}
+
+h3 {
+  margin: 0 0 8px;
+  font-size: 20px;
+  letter-spacing: -0.01em;
+}
+
+.reveal {
+  opacity: 0;
+  transform: translate3d(0, 40px, 0) scale(0.98);
+  transition:
+    opacity 1s var(--ease-out) var(--d, 0ms),
+    transform 1.1s var(--ease-out) var(--d, 0ms);
+}
+
+.reveal.is-in { opacity: 1; transform: none; }
+
+/* Tilt cards share a glass surface */
+[data-tilt] {
+  --rx: 0deg;
+  --ry: 0deg;
+  --gx: 50%;
+  --gy: 50%;
+  position: relative;
+  border-radius: 22px;
+  background:
+    radial-gradient(400px circle at var(--gx) var(--gy), rgba(255, 177, 122, 0.14), transparent 45%),
+    var(--glass);
+  border: 1px solid var(--line);
+  -webkit-backdrop-filter: blur(18px) saturate(140%);
+  backdrop-filter: blur(18px) saturate(140%);
+  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+[data-tilt].is-in {
+  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
+  transition:
+    opacity 1s var(--ease-out) var(--d, 0ms),
+    transform 0.5s var(--ease-out);
+}
+
+.pipeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: clamp(14px, 2vw, 28px);
+  position: relative;
+}
+
+.pipeline::before {
+  content: "";
+  position: absolute;
+  left: 8%;
+  right: 8%;
+  top: 46px;
+  height: 2px;
+  background:
+    linear-gradient(90deg, transparent, var(--apricot) 50%, transparent) 0 0 / 30% 100% no-repeat,
+    linear-gradient(90deg, rgba(255, 177, 122, 0.05), rgba(255, 177, 122, 0.35), rgba(255, 113, 79, 0.05));
+  animation: travel 2.6s linear infinite;
+  z-index: -1;
+}
+
+@keyframes travel {
+  from { background-position: -40% 0, 0 0; }
+  to { background-position: 140% 0, 0 0; }
+}
+
+.step { padding: 28px 26px 30px; }
+
+.step-n {
+  display: inline-grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  margin-bottom: 20px;
+  border-radius: 12px;
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--ink);
+  background: linear-gradient(135deg, var(--apricot), var(--persimmon));
+  box-shadow: 0 8px 24px rgba(255, 113, 79, 0.35);
+}
+
+.step p,
+.feature p { margin: 0; color: var(--muted); }
+
+.proof-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: clamp(12px, 1.6vw, 22px);
+}
+
+.stat { padding: 22px 22px 24px; min-width: 0; }
+
+.stat-label {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.stat-value {
+  margin: 10px 0 6px;
+  font-size: clamp(30px, 3.6vw, 52px);
+  font-weight: 760;
+  line-height: 1;
+  letter-spacing: -0.03em;
+  font-variant-numeric: tabular-nums;
+  color: var(--cream);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stat-value.mono { font-size: clamp(24px, 2.8vw, 40px); letter-spacing: -0.02em; }
+
+.stat-value small {
+  font-size: 0.4em;
+  margin-left: 6px;
+  letter-spacing: 0;
+  color: var(--apricot);
+}
+
+.stat-note { margin: 0; font-size: 13px; color: var(--muted); }
+
+.resolved {
+  margin-top: clamp(16px, 2vw, 24px);
+  padding: 24px 26px;
+  border-radius: 22px;
+  background: rgba(14, 12, 30, 0.72);
+  border: 1px solid var(--line);
+  -webkit-backdrop-filter: blur(18px);
+  backdrop-filter: blur(18px);
+}
+
+.resolved-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px 20px;
+}
+
+.pin {
+  margin: 0 0 12px;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.pin span {
+  margin-left: 6px;
+  padding: 3px 9px;
+  border-radius: 7px;
+  color: var(--ink);
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--apricot), var(--persimmon));
+}
+
+.resolved-list {
+  list-style: none;
+  margin: 4px 0 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.resolved-list li {
+  display: grid;
+  grid-template-columns: 7.5em minmax(0, 1fr);
+  align-items: center;
+  gap: 14px;
+  padding: 10px 14px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.rf { font-family: var(--mono); font-size: 14px; color: var(--apricot); }
+
+.rv {
+  font-size: 13px;
+  color: #d9d2f0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rv mark {
+  background: rgba(255, 113, 79, 0.22);
+  color: var(--cream);
+  border-radius: 4px;
+  padding: 0 3px;
+}
+
+.resolved-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: clamp(12px, 1.6vw, 22px);
+}
+
+.feature { padding: 26px 24px 28px; }
+
+.feature-icon {
+  width: 46px;
+  height: 46px;
+  display: grid;
+  place-items: center;
+  margin-bottom: 22px;
+  border-radius: 14px;
+  background: rgba(255, 177, 122, 0.1);
+  border: 1px solid rgba(255, 177, 122, 0.25);
+}
+
+.feature-icon svg {
+  width: 22px;
+  height: 22px;
+  fill: none;
+  stroke: var(--apricot);
+  stroke-width: 1.7;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+/* ---------- Outro ---------- */
+
+.outro {
+  position: relative;
+  min-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 100px var(--pad) 80px;
+}
+
+.outro-mark {
+  width: clamp(110px, 14vw, 170px);
+  height: auto;
+  overflow: visible;
+  filter: drop-shadow(0 20px 50px rgba(255, 113, 79, 0.45));
+  margin-bottom: 26px;
+}
+
+.outro-mark.is-in {
+  animation: float 6s ease-in-out infinite;
+}
+
+.outro-mark .fold-top {
+  animation: shimmer 6s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
+  50% { transform: translate3d(0, -14px, 0) rotate(4deg); }
+}
+
+@keyframes shimmer {
+  0%, 100% { fill: #ffb17a; }
+  50% { fill: #ffd2a8; }
+}
+
+.outro-title {
+  font-size: clamp(48px, 10vw, 150px);
+  line-height: 0.95;
+  font-weight: 780;
+  letter-spacing: -0.05em;
+}
+
+.outro-copy {
+  max-width: 30em;
+  margin: 24px auto 0;
+  font-size: clamp(16px, 0.6vw + 13px, 20px);
+  color: #ddd6f3;
+}
+
+.footnote {
+  margin: 48px 0 0;
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  color: rgba(185, 178, 214, 0.65);
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 980px) {
+  .proof-grid,
+  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 760px) {
+  .pipeline { grid-template-columns: 1fr; }
+  .pipeline::before { display: none; }
+  .tap-hint { display: none; }
+}
+
+@media (max-width: 520px) {
+  .topbar { padding-top: 12px; }
+  .brand span { display: none; }
+  .hero { padding-top: 84px; padding-bottom: 96px; align-items: flex-start; }
+  .headline { font-size: 10.6vw; }
+  .headline .line { white-space: normal; }
+  .outro-title { font-size: 14vw; }
+  .outro-title .line { white-space: normal; }
+  .rv { white-space: normal; overflow-wrap: anywhere; }
+  .proof-grid { grid-template-columns: 1fr 1fr; }
+  .features { grid-template-columns: 1fr; }
+  .stat { padding: 18px 16px; }
+  .resolved { padding: 18px 16px; }
+  .resolved-list li { grid-template-columns: 1fr; gap: 2px; }
+  .code-hint { font-size: 14px; }
+}
+
+@media (max-height: 560px) and (min-width: 700px) {
+  .hero { padding-top: 70px; padding-bottom: 70px; }
+  .headline { font-size: clamp(40px, 7vw, 96px); }
+  .lede { margin-top: 18px; }
+  .hero-actions { margin-top: 18px; }
+}
+
+/* ---------- Reduced motion: calmer, still lit ---------- */
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  em,
+  .live-dot,
+  kbd,
+  .tap-ring,
+  .scroll-cue span,
+  .pipeline::before,
+  .outro-mark .fold-top,
+  .outro-mark.is-in { animation: none; }
+  .split-ready .char,
+  .reveal-now { animation-duration: 0.01s; animation-delay: 0s; }
+  .reveal { transform: none; transition: opacity 0.6s ease; }
+  .char { transition: none; }
+  .cursor-glow { display: none; }
+}
diff --git a/package.json b/package.json
index 63331e7..cdff679 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "github-html-preview",
   "description": "Safely preview public HTML files and pull-request changes on GitHub",
   "private": true,
-  "version": "0.6.7",
+  "version": "0.6.8",
   "type": "module",
   "scripts": {
     "dev": "wxt",
diff --git a/store/capture.mjs b/store/capture.mjs
new file mode 100644
index 0000000..7d9fb2c
--- /dev/null
+++ b/store/capture.mjs
@@ -0,0 +1,234 @@
+// Captures raw store screenshots from live public GitHub pages with the built
+// extension loaded. Fresh, unauthenticated, throwaway profile per run.
+//
+//   corepack pnpm build && node store/capture.mjs [shot ...]
+//
+// Writes store/raw/<shot>.png at deviceScaleFactor 2.
+import { chromium } from '@playwright/test';
+import path from 'node:path';
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+
+const root = path.resolve(import.meta.dirname, '..');
+const ext = path.join(root, '.output/chrome-mv3');
+const rawDir = path.join(root, 'store/raw');
+const tmpDir = path.join(root, '.tmp/screenshots');
+mkdirSync(rawDir, { recursive: true });
+mkdirSync(tmpDir, { recursive: true });
+
+const VIEWPORT = { width: 1440, height: 900 };
+const LIVE = 45_000;
+
+const BLOB_CARDS =
+  'https://github.com/bradtraversy/50projects50days/blob/master/expanding-cards/index.html';
+const BLOB_METRIK =
+  'https://github.com/Crepify/metrik/blob/ee22dcaa0716d2ebea3915a8d4083bce25ee53fc/index.html';
+const BLOB_FINALE =
+  'https://github.com/nrubin29/finale-landing/blob/61a6a930c6c29dddf3ec8cc09b12bc296cebb456/index.html';
+const PR_URL = 'https://github.com/bwghughes/cognitivelayer/pull/2/files';
+
+async function launch(colorScheme) {
+  const profile = mkdtempSync(path.join(tmpDir, 'profile-'));
+  const context = await chromium.launchPersistentContext(profile, {
+    headless: false,
+    colorScheme,
+    viewport: VIEWPORT,
+    deviceScaleFactor: 2,
+    args: [
+      '--headless=new',
+      `--disable-extensions-except=${ext}`,
+      `--load-extension=${ext}`,
+    ],
+  });
+  const close = async () => {
+    await context.close();
+    rmSync(profile, { recursive: true, force: true });
+  };
+  const page = context.pages()[0] ?? (await context.newPage());
+  return { context, page, close };
+}
+
+// Strip GitHub signed-out marketing chrome and cookie banners.
+const CLEANUP_CSS = `
+  .js-cookie-consent-banner, cookie-consent-banner, [data-testid="cookie-banner"],
+  .flash-full, .js-notice, .Popover, tool-tip { display: none !important; }
+`;
+
+async function settle(page, ms = 4000) {
+  await page.addStyleTag({ content: CLEANUP_CSS }).catch(() => {});
+  await page.mouse.move(0, VIEWPORT.height - 1);
+  await page.waitForTimeout(ms);
+}
+
+async function collapseFileTree(page) {
+  const btn = page
+    .locator(
+      'button[aria-label="Collapse file tree"], button[aria-label*="Collapse file tree"], button[data-testid="collapse-file-tree-button"]',
+    )
+    .first();
+  if (await btn.isVisible().catch(() => false)) {
+    await btn.click();
+    await page.waitForTimeout(600);
+  }
+}
+
+async function openBlobPreview(page, url) {
+  await page.goto(url, { waitUntil: 'domcontentloaded', timeout: LIVE });
+  const tab = page.getByRole('tab', { name: 'Preview' });
+  await tab.waitFor({ timeout: LIVE });
+  await collapseFileTree(page);
+  await tab.click();
+  const iframe = page.locator(
+    '.gh-html-preview-container iframe[title="Executable HTML preview"]',
+  );
+  await iframe.waitFor({ timeout: LIVE });
+  await page
+    .locator('.gh-html-preview-container a', { hasText: 'Open full preview' })
+    .and(page.locator(':not([aria-disabled="true"])'))
+    .waitFor({ timeout: LIVE })
+    .catch(() => {});
+  await settle(page, 6000);
+}
+
+// Record CSS-pixel boxes of key UI so templates can place callouts.
+async function saveBoxes(page, name, locators) {
+  const out = { viewport: VIEWPORT };
+  for (const [key, locator] of Object.entries(locators)) {
+    out[key] = await locator.first().boundingBox().catch(() => null);
+  }
+  writeFileSync(`${rawDir}/${name}.json`, JSON.stringify(out, null, 2) + '\n');
+}
+
+const blobTabs = (page) => ({
+  previewTab: page.getByRole('tab', { name: 'Preview' }),
+  codeTab: page.getByRole('button', { name: 'Code', exact: true }),
+  tabBar: page.locator('ul[class*="SegmentedControl"][aria-label="File view"]'),
+});
+
+const shots = {
+  // Blob page, Preview tab, light GitHub.
+  async 'blob-preview-light'() {
+    const { page, close } = await launch('light');
+    try {
+      await openBlobPreview(page, BLOB_CARDS);
+      await page.screenshot({ path: `${rawDir}/blob-preview-light.png` });
+      await saveBoxes(page, 'blob-preview-light', blobTabs(page));
+      // Same route, Code tab, for the Code <-> Preview pair.
+      await page.getByRole('button', { name: 'Code', exact: true }).first().click();
+      await settle(page, 1500);
+      await page.screenshot({ path: `${rawDir}/blob-code-light.png` });
+      await saveBoxes(page, 'blob-code-light', blobTabs(page));
+    } finally {
+      await close();
+    }
+  },
+
+  // Blob page, Preview tab, dark GitHub.
+  async 'blob-preview-dark'() {
+    const { page, close } = await launch('dark');
+    try {
+      await openBlobPreview(page, BLOB_METRIK);
+      await page.screenshot({ path: `${rawDir}/blob-preview-dark.png` });
+      await saveBoxes(page, 'blob-preview-dark', blobTabs(page));
+    } finally {
+      await close();
+    }
+  },
+
+  // PR Files changed, before/after side by side.
+  async 'pr-split-light'() {
+    const { page, close } = await launch('light');
+    try {
+      await page.goto(process.env.PR_URL ?? PR_URL, { waitUntil: 'domcontentloaded', timeout: LIVE });
+      await page
+        .getByRole('tab', { name: 'Display before and after previews' })
+        .first()
+        .waitFor({ timeout: LIVE });
+      await collapseFileTree(page);
+      const frames = page.locator('iframe[title$="HTML preview for index.html"]');
+      await frames.nth(1).waitFor({ timeout: LIVE });
+      await settle(page, 7000);
+      const card = page.locator('[data-path="index.html"]').first();
+      const box = await card.boundingBox();
+      if (box) {
+        // Park the file card just below GitHub's sticky PR header.
+        await page.evaluate((y) => window.scrollBy(0, y - 64), box.y);
+        await settle(page, 2000);
+      }
+      await page.screenshot({ path: `${rawDir}/pr-split-light.png` });
+      await saveBoxes(page, 'pr-split-light', {
+        previewTab: page.getByRole('tab', { name: 'Display before and after previews' }),
+        codeTab: page.getByRole('tab', { name: 'Display code diff' }),
+        before: page.locator('iframe[title^="Before HTML preview"]'),
+        after: page.locator('iframe[title^="After HTML preview"]'),
+      });
+    } finally {
+      await close();
+    }
+  },
+
+  // Dedicated full-tab preview opened from "Open full preview".
+  async 'full-preview'() {
+    const { context, page, close } = await launch('dark');
+    try {
+      await openBlobPreview(page, BLOB_FINALE);
+      const link = page.locator('.gh-html-preview-container a', {
+        hasText: 'Open full preview',
+      });
+      await page.waitForFunction(
+        () =>
+          document
+            .querySelector('.gh-html-preview-container a')
+            ?.getAttribute('aria-disabled') !== 'true',
+        null,
+        { timeout: LIVE },
+      );
+      // Same URL the link opens in a new tab; the source tab stays open so
+      // the session snapshot remains valid.
+      const href = await link.getAttribute('href');
+      let [sw] = context.serviceWorkers();
+      sw ??= await context.waitForEvent('serviceworker');
+      const id = new URL(sw.url()).host;
+      const full = await context.newPage();
+      await full.goto(href.replace(/^chrome-extension:\/\/[^/]+/, `chrome-extension://${id}`), {
+        waitUntil: 'domcontentloaded',
+      });
+      await full.waitForTimeout(7000);
+      await full.screenshot({ path: `${rawDir}/full-preview.png` });
+      console.log('full preview url', full.url().replace(/#.*/, ''));
+    } finally {
+      await close();
+    }
+  },
+
+  // Toolbar popup rendered as a page.
+  async popup() {
+    for (const scheme of ['light', 'dark']) {
+      const { context, page, close } = await launch(scheme);
+      try {
+        let [sw] = context.serviceWorkers();
+        sw ??= await context.waitForEvent('serviceworker');
+        const id = new URL(sw.url()).host;
+        await page.setViewportSize({ width: 340, height: 640 });
+        await page.goto(`chrome-extension://${id}/popup.html`);
+        await page.waitForTimeout(1200);
+        await page.locator('.popup').screenshot({
+          path: `${rawDir}/popup-${scheme}.png`,
+        });
+      } finally {
+        await close();
+      }
+    }
+  },
+};
+
+const wanted = process.argv.slice(2);
+for (const name of wanted.length ? wanted : Object.keys(shots)) {
+  const t = Date.now();
+  try {
+    await shots[name]();
+    console.log(`ok   ${name} ${Date.now() - t}ms`);
+  } catch (error) {
+    console.error(`FAIL ${name}: ${error.message.split('\n')[0]}`);
+    process.exitCode = 1;
+  }
+}
diff --git a/store/fonts/InterVariable.woff2 b/store/fonts/InterVariable.woff2
new file mode 100644
index 0000000..d15208d
Binary files /dev/null and b/store/fonts/InterVariable.woff2 differ
diff --git a/store/fonts/OFL.txt b/store/fonts/OFL.txt
new file mode 100644
index 0000000..9b2ca37
--- /dev/null
+++ b/store/fonts/OFL.txt
@@ -0,0 +1,92 @@
+Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/store/render.mjs b/store/render.mjs
new file mode 100644
index 0000000..daaba36
--- /dev/null
+++ b/store/render.mjs
@@ -0,0 +1,56 @@
+// Renders store/templates/*.html to store/screenshots/*.png from captures in
+// store/raw/. Run `node store/capture.mjs` first to refresh raw captures.
+//
+//   node store/render.mjs [template-name ...]
+import { chromium } from '@playwright/test';
+import path from 'node:path';
+import { execFileSync } from 'node:child_process';
+import { mkdirSync, readFileSync, readdirSync } from 'node:fs';
+import { pathToFileURL } from 'node:url';
+
+const storeDir = import.meta.dirname;
+const templatesDir = path.join(storeDir, 'templates');
+const rawDir = path.join(storeDir, 'raw');
+const outDir = path.join(storeDir, 'screenshots');
+mkdirSync(outDir, { recursive: true });
+
+const meta = Object.fromEntries(
+  readdirSync(rawDir)
+    .filter((f) => f.endsWith('.json'))
+    .map((f) => [f.replace(/\.json$/, ''), JSON.parse(readFileSync(path.join(rawDir, f), 'utf8'))]),
+);
+
+const wanted = process.argv.slice(2);
+const templates = readdirSync(templatesDir)
+  .filter((f) => f.endsWith('.html'))
+  .filter((f) => !wanted.length || wanted.some((w) => f.startsWith(w)));
+
+const browser = await chromium.launch();
+try {
+  for (const file of templates) {
+    const html = readFileSync(path.join(templatesDir, file), 'utf8');
+    const [, w, h] = html.match(/<meta name="size" content="(\d+)x(\d+)">/) ?? [];
+    if (!w) throw new Error(`${file}: missing <meta name="size">`);
+    const page = await browser.newPage({
+      viewport: { width: Number(w), height: Number(h) },
+      deviceScaleFactor: 1,
+    });
+    page.on('pageerror', (e) => console.error(`${file}: ${e.message}`));
+    await page.addInitScript((m) => { window.STORE_META = m; }, meta);
+    await page.goto(pathToFileURL(path.join(templatesDir, file)).href);
+    await page.waitForFunction(() => window.STORE_READY);
+    await page.evaluate(() => window.STORE_READY);
+    const out = path.join(outDir, file.replace(/\.html$/, '.png'));
+    await page.screenshot({ path: out, omitBackground: false });
+    await page.close();
+    // Store wants 24-bit PNG without alpha.
+    try {
+      execFileSync('magick', [out, '-background', '#15122a', '-alpha', 'remove', '-alpha', 'off', `PNG24:${out}`]);
+    } catch {
+      console.warn('ImageMagick not found; PNG may keep an alpha channel.');
+    }
+    console.log(`${path.relative(process.cwd(), out)} ${w}x${h}`);
+  }
+} finally {
+  await browser.close();
+}
diff --git a/store/screenshots/01-preview-tab.png b/store/screenshots/01-preview-tab.png
new file mode 100644
index 0000000..1215de9
Binary files /dev/null and b/store/screenshots/01-preview-tab.png differ
diff --git a/store/screenshots/02-before-after.png b/store/screenshots/02-before-after.png
new file mode 100644
index 0000000..ba67ec7
Binary files /dev/null and b/store/screenshots/02-before-after.png differ
diff --git a/store/screenshots/03-code-preview.png b/store/screenshots/03-code-preview.png
new file mode 100644
index 0000000..8728823
Binary files /dev/null and b/store/screenshots/03-code-preview.png differ
diff --git a/store/screenshots/04-full-preview.png b/store/screenshots/04-full-preview.png
new file mode 100644
index 0000000..d0680d3
Binary files /dev/null and b/store/screenshots/04-full-preview.png differ
diff --git a/store/screenshots/05-private-sandboxed.png b/store/screenshots/05-private-sandboxed.png
new file mode 100644
index 0000000..f85ccc6
Binary files /dev/null and b/store/screenshots/05-private-sandboxed.png differ
diff --git a/store/screenshots/marquee-1400x560.png b/store/screenshots/marquee-1400x560.png
new file mode 100644
index 0000000..1ecff70
Binary files /dev/null and b/store/screenshots/marquee-1400x560.png differ
diff --git a/store/screenshots/promo-small-440x280.png b/store/screenshots/promo-small-440x280.png
new file mode 100644
index 0000000..e612d56
Binary files /dev/null and b/store/screenshots/promo-small-440x280.png differ
diff --git a/store/templates/01-preview-tab.html b/store/templates/01-preview-tab.html
new file mode 100644
index 0000000..217977f
--- /dev/null
+++ b/store/templates/01-preview-tab.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="size" content="1280x800">
+<link rel="stylesheet" href="base.css">
+<style>:root { --w: 1280px; --h: 800px; }</style>
+</head>
+<body>
+  <div class="hero">
+    <span class="brand"><img src="../../assets/logo.svg" alt="">GitHub HTML Preview</span>
+    <h1>See the page, <em>not the markup</em></h1>
+    <p class="sub">A Preview tab on every .html file on GitHub, rendered at the exact commit.</p>
+  </div>
+  <div class="window light" style="left:90px; top:262px; width:1100px;">
+    <div class="chrome"><i></i><i></i><i></i><span class="url">github.com/bradtraversy/50projects50days/blob/master/expanding-cards/index.html</span></div>
+    <div class="shot" data-src="blob-preview-light" data-crop="330,180,1090,640" data-ring="previewTab" data-ring-pad="1" style="width:1100px"></div>
+  </div>
+  <script src="shot.js"></script>
+</body>
+</html>
diff --git a/store/templates/02-before-after.html b/store/templates/02-before-after.html
new file mode 100644
index 0000000..cb57243
--- /dev/null
+++ b/store/templates/02-before-after.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="size" content="1280x800">
+<link rel="stylesheet" href="base.css">
+<style>:root { --w: 1280px; --h: 800px; }
+.tag { top: 270px; transform: translateX(-50%); }
+</style>
+</head>
+<body>
+  <div class="hero">
+    <span class="brand"><img src="../../assets/logo.svg" alt="">GitHub HTML Preview</span>
+    <h1>Review HTML changes <em>side by side</em></h1>
+    <p class="sub">Before and after previews in pull requests, scrolled in sync.</p>
+  </div>
+  <div class="window light" style="left:80px; top:330px; width:1120px;">
+    <div class="chrome"><i></i><i></i><i></i><span class="url">github.com/bwghughes/cognitivelayer/pull/2/files</span></div>
+    <div class="shot" data-src="pr-split-light" data-crop="345,64,1047,800" data-ring="previewTab" data-ring-pad="3" style="width:1120px"></div>
+  </div>
+  <span class="pill tag" style="left:359px;"><b>●</b> Before</span>
+  <span class="pill tag" style="left:919px;"><b>●</b> After</span>
+  <script src="shot.js"></script>
+</body>
+</html>
diff --git a/store/templates/03-code-preview.html b/store/templates/03-code-preview.html
new file mode 100644
index 0000000..3fabc4e
--- /dev/null
+++ b/store/templates/03-code-preview.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="size" content="1280x800">
+<link rel="stylesheet" href="base.css">
+<style>:root { --w: 1280px; --h: 800px; }
+.back { opacity: 1; }
+</style>
+</head>
+<body>
+  <div class="hero">
+    <span class="brand"><img src="../../assets/logo.svg" alt="">GitHub HTML Preview</span>
+    <h1>Code and Preview, <em>one click apart</em></h1>
+    <p class="sub">Switch views on files and pull requests. Your last choice sticks.</p>
+  </div>
+  <div class="window light back" style="left:70px; top:262px; width:760px;">
+    <div class="chrome"><i></i><i></i><i></i><span class="url">…/expanding-cards/index.html</span></div>
+    <div class="shot" data-src="blob-code-light" data-crop="337,298,1072,586" data-ring="codeTab" data-ring-pad="1" style="width:760px"></div>
+  </div>
+  <div class="window light" style="left:450px; top:340px; width:760px;">
+    <div class="chrome"><i></i><i></i><i></i><span class="url">…/expanding-cards/index.html</span></div>
+    <div class="shot" data-src="blob-preview-light" data-crop="337,298,1072,700" data-ring="previewTab" data-ring-pad="-1" style="width:760px"></div>
+  </div>
+  <script src="shot.js"></script>
+</body>
+</html>
diff --git a/store/templates/04-full-preview.html b/store/templates/04-full-preview.html
new file mode 100644
index 0000000..b579abd
--- /dev/null
+++ b/store/templates/04-full-preview.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="size" content="1280x800">
+<link rel="stylesheet" href="base.css">
+<style>:root { --w: 1280px; --h: 800px; }
+</style>
+</head>
+<body>
+  <div class="hero">
+    <span class="brand"><img src="../../assets/logo.svg" alt="">GitHub HTML Preview</span>
+    <h1>Run the whole page <em>in its own tab</em></h1>
+    <p class="sub">Open full preview gives any HTML file a dedicated, commit-pinned sandbox.</p>
+  </div>
+  <div class="window" style="left:90px; top:262px; width:1100px;">
+    <div class="chrome"><i></i><i></i><i></i><span class="url">GitHub HTML Preview · nrubin29/finale-landing/index.html</span></div>
+    <div class="shot" data-src="full-preview" data-crop="0,0,1425,900" style="width:1100px"></div>
+  </div>
+  <script src="shot.js"></script>
+</body>
+</html>
diff --git a/store/templates/05-private-sandboxed.html b/store/templates/05-private-sandboxed.html
new file mode 100644
index 0000000..02c9f4e
--- /dev/null
+++ b/store/templates/05-private-sandboxed.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="size" content="1280x800">
+<link rel="stylesheet" href="base.css">
+<style>:root { --w: 1280px; --h: 800px; }
+.popup { position:absolute; border-radius:12px; overflow:hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 70px -10px rgba(0,0,0,.8); }
+</style>
+</head>
+<body>
+  <div class="hero">
+    <span class="brand"><img src="../../assets/logo.svg" alt="">GitHub HTML Preview</span>
+    <h1>Private repos. <em>No tokens.</em></h1>
+    <p class="sub">Uses your signed-in GitHub session. Previews run in an isolated sandbox.</p>
+  </div>
+  <div class="window" style="left:70px; top:262px; width:900px;">
+    <div class="chrome"><i></i><i></i><i></i><span class="url">github.com/Crepify/metrik/blob/ee22dca/index.html</span></div>
+    <div class="shot" data-src="blob-preview-dark" data-crop="330,290,1090,610" data-ring="previewTab" style="width:900px"></div>
+  </div>
+  <div class="popup" style="left:880px; top:262px; width:330px;">
+    <div class="shot" data-src="popup-dark" data-crop="0,0,320,512" style="width:330px"></div>
+  </div>
+  <script src="shot.js"></script>
+</body>
+</html>
diff --git a/store/templates/base.css b/store/templates/base.css
new file mode 100644
index 0000000..dde85f4
--- /dev/null
+++ b/store/templates/base.css
@@ -0,0 +1,179 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/InterVariable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-display: block;
+}
+
+:root {
+  --violet: #262144;
+  --ink: #15122a;
+  --apricot: #ffb17a;
+  --persimmon: #ff714f;
+  --text: #fff6ef;
+  --muted: #b6b0d4;
+  --frame: #221e3d;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  width: var(--w);
+  height: var(--h);
+  overflow: hidden;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  font-feature-settings: 'ss01', 'cv11';
+  -webkit-font-smoothing: antialiased;
+  color: var(--text);
+  background:
+    radial-gradient(900px 520px at 12% -8%, rgba(255, 113, 79, 0.22), transparent 70%),
+    radial-gradient(800px 600px at 105% 20%, rgba(255, 177, 122, 0.12), transparent 70%),
+    radial-gradient(1200px 700px at 50% 130%, rgba(92, 78, 170, 0.45), transparent 70%),
+    var(--ink);
+  position: relative;
+}
+
+/* Faint dot grid for texture. */
+body::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
+  background-size: 24px 24px;
+  mask-image: linear-gradient(to bottom, black, transparent 65%);
+  pointer-events: none;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 17px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--muted);
+}
+.brand img { width: 28px; height: 28px; }
+
+h1 {
+  margin: 0;
+  font-weight: 750;
+  letter-spacing: -0.035em;
+  line-height: 1.04;
+  color: var(--text);
+}
+h1 em {
+  font-style: normal;
+  background: linear-gradient(92deg, var(--apricot), var(--persimmon));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.sub {
+  margin: 0;
+  color: var(--muted);
+  font-weight: 450;
+  letter-spacing: -0.01em;
+  line-height: 1.4;
+}
+
+/* Centered headline over a bleeding browser frame. */
+.hero {
+  position: absolute;
+  top: 56px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+}
+.hero h1 { font-size: 58px; }
+.hero .sub { font-size: 22px; max-width: 880px; }
+
+/* Browser-like window around a raw capture. */
+.window {
+  position: absolute;
+  border-radius: 14px;
+  background: var(--frame);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.08),
+    0 30px 80px -20px rgba(0, 0, 0, 0.7),
+    0 12px 30px -10px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+.window.light { background: #eceaf3; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 30px 80px -20px rgba(0,0,0,.75), 0 12px 30px -10px rgba(0,0,0,.5); }
+.chrome {
+  height: 38px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px;
+}
+.chrome i {
+  width: 11px; height: 11px; border-radius: 50%;
+  background: rgba(255, 255, 255, 0.16);
+}
+.light .chrome i { background: rgba(38, 33, 68, 0.18); }
+.chrome .url {
+  margin-left: 14px;
+  flex: 0 1 560px;
+  height: 24px;
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.07);
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 12.5px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.light .chrome .url { background: rgba(38, 33, 68, 0.07); color: rgba(38, 33, 68, 0.6); }
+
+.shot {
+  position: relative;
+  overflow: hidden;
+}
+.shot > img.raw {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 0 0;
+  image-rendering: auto;
+}
+
+/* Callout ring around a UI element in a capture. */
+.ring {
+  position: absolute;
+  border-radius: 10px;
+  box-shadow:
+    0 0 0 2.5px var(--persimmon),
+    0 0 0 6px rgba(255, 113, 79, 0.22),
+    0 0 26px 2px rgba(255, 113, 79, 0.4);
+  pointer-events: none;
+}
+
+.pill {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px;
+  border-radius: 999px;
+  background: var(--violet);
+  color: var(--text);
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  box-shadow: 0 0 0 1px rgba(255, 177, 122, 0.35), 0 10px 30px -6px rgba(0, 0, 0, 0.6);
+  white-space: nowrap;
+}
+.pill b { color: var(--apricot); font-weight: 650; }
diff --git a/store/templates/marquee-1400x560.html b/store/templates/marquee-1400x560.html
new file mode 100644
index 0000000..f5ddd0d
--- /dev/null
+++ b/store/templates/marquee-1400x560.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="size" content="1400x560">
+<link rel="stylesheet" href="base.css">
+<style>
+:root { --w: 1400px; --h: 560px; }
+.copy { position:absolute; left:84px; top:0; bottom:0; width:470px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
+.copy .brand { font-size:19px; }
+.copy .brand img { width:36px; height:36px; }
+.copy h1 { font-size:60px; }
+.copy .sub { font-size:21px; }
+</style>
+</head>
+<body>
+  <div class="copy">
+    <span class="brand"><img src="../../assets/logo.svg" alt="">GitHub HTML Preview</span>
+    <h1>See the page, <em>not the markup</em></h1>
+    <p class="sub">Run and compare HTML files right on GitHub, pinned to the exact commit.</p>
+  </div>
+  <div class="window light" style="left:610px; top:70px; width:900px;">
+    <div class="chrome"><i></i><i></i><i></i><span class="url">github.com/bwghughes/cognitivelayer/pull/2/files</span></div>
+    <div class="shot" data-src="pr-split-light" data-crop="345,64,1047,800" data-ring="previewTab" data-ring-pad="3" style="width:900px"></div>
+  </div>
+  <script src="shot.js"></script>
+</body>
+</html>
diff --git a/store/templates/promo-small-440x280.html b/store/templates/promo-small-440x280.html
new file mode 100644
index 0000000..dd46c6a
--- /dev/null
+++ b/store/templates/promo-small-440x280.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="size" content="440x280">
+<link rel="stylesheet" href="base.css">
+<style>
+:root { --w: 440px; --h: 280px; }
+body::before { background-size: 16px 16px; }
+.mark { position:absolute; left:26px; top:28px; width:52px; height:52px; }
+.copy { position:absolute; left:26px; top:96px; width:212px; }
+.copy .name { font-size:13px; font-weight:600; color:var(--muted); letter-spacing:-0.005em; margin-bottom:8px; }
+.copy h1 { font-size:28px; line-height:1.06; letter-spacing:-0.035em; }
+.window { border-radius:10px; }
+.chrome { height:22px; gap:5px; padding:0 9px; }
+.chrome i { width:7px; height:7px; }
+</style>
+</head>
+<body>
+  <img class="mark" src="../../assets/logo.svg" alt="">
+  <div class="copy">
+    <div class="name">GitHub HTML Preview</div>
+    <h1>See the page, <em>not the markup</em></h1>
+  </div>
+  <div class="window light" style="left:252px; top:58px; width:290px;">
+    <div class="chrome"><i></i><i></i><i></i></div>
+    <div class="shot" data-src="blob-preview-light" data-crop="337,298,560,560" data-ring="previewTab" data-ring-pad="0" style="width:290px"></div>
+  </div>
+  <script src="shot.js"></script>
+</body>
+</html>
diff --git a/store/templates/shot.js b/store/templates/shot.js
new file mode 100644
index 0000000..9b1ddf5
--- /dev/null
+++ b/store/templates/shot.js
@@ -0,0 +1,38 @@
+// Places raw captures inside .shot elements.
+//   <div class="shot" data-src="blob-preview-light" data-crop="x,y,w,h" style="width:Npx">
+// Crop is in CSS pixels of the raw capture (captured at deviceScaleFactor 2).
+// Optional data-ring="key[,key]" draws a callout around boxes from raw/<src>.json
+// (injected as window.STORE_META by render.mjs).
+(() => {
+  const RAW_DPR = 2;
+  const meta = window.STORE_META ?? {};
+  const pending = [];
+  for (const el of document.querySelectorAll('.shot')) {
+    const src = el.dataset.src;
+    const [cx, cy, cw, ch] = el.dataset.crop.split(',').map(Number);
+    const width = parseFloat(el.style.width);
+    const scale = width / cw;
+    el.style.height = `${Math.round(ch * scale)}px`;
+    const img = new Image();
+    img.className = 'raw';
+    img.src = `../raw/${src}.png`;
+    pending.push(img.decode().catch(() => { throw new Error(`missing raw ${src}`); }));
+    img.style.transform = `translate(${-cx * scale}px, ${-cy * scale}px) scale(${scale / RAW_DPR})`;
+    el.appendChild(img);
+    const pad = Number(el.dataset.ringPad ?? 4);
+    for (const key of (el.dataset.ring ?? '').split(',').filter(Boolean)) {
+      const box = meta[src]?.[key];
+      if (!box) throw new Error(`missing box ${src}.${key}`);
+      const ring = document.createElement('div');
+      ring.className = 'ring';
+      Object.assign(ring.style, {
+        left: `${(box.x - cx) * scale - pad}px`,
+        top: `${(box.y - cy) * scale - pad}px`,
+        width: `${box.width * scale + pad * 2}px`,
+        height: `${box.height * scale + pad * 2}px`,
+      });
+      el.appendChild(ring);
+    }
+  }
+  window.STORE_READY = Promise.all([document.fonts.ready, ...pending]);
+})();
diff --git a/wisdom/blob-tab-pressed-state.md b/wisdom/blob-tab-pressed-state.md
new file mode 100644
index 0000000..81f8285
--- /dev/null
+++ b/wisdom/blob-tab-pressed-state.md
@@ -0,0 +1,7 @@
+# Blob tab pressed state
+
+Live GitHub (Primer React, checked 2026-10-17) paints the selected File view segment from the button's `aria-pressed`, not `aria-current` or the item's `data-selected`. The blob script only flipped the latter, so Preview rendered while Code still looked selected, on public and private repos alike.
+
+`setSelectedTab` now writes `aria-pressed` with the others. React writes `aria-pressed` only when its own selection changes, so a click on the already-selected native tab cannot restore it: the native click listener reselects the clicked button itself, and teardown of an active preview reselects the native button that was pressed at mount.
+
+The e2e blob fixture mirrors Primer's `aria-pressed` markup, and the view-choice test asserts the pressed state both ways. Verified live on an MDN blob page: Preview, Code, Preview, and reload all show the matching tab.
diff --git a/wisdom/example-links.md b/wisdom/example-links.md
new file mode 100644
index 0000000..99f4f77
--- /dev/null
+++ b/wisdom/example-links.md
@@ -0,0 +1,7 @@
+# Popup example links
+
+The popup has two links: **Open example**, which goes to `examples/demo/index.html` on `develop`, and **Open example PR**, which goes to [#28](https://github.com/tnfssc/github-html-preview/pull/28/files).
+
+#28 stays open on purpose. Its base branch `example/base` holds the demo as it was first added. Its head branch `example/after` swaps the ribbon palette and changes the headline, so the PR shows a visible Before/After. Never merge it, and never delete either branch: the popup link would break. The PR does not touch `develop`, so it worked before the demo was merged.
+
+The demo (`index.html`, `style.css`, `main.js`) is plain files with no CDN and no fonts. It loads a classic deferred script, not an ES module, so a clone opened over `file://` still runs.