From 063ae125276738e578a28483f218a8049979b1bc Mon Sep 17 00:00:00 2001
From: TMHSDigital <154358121+TMHSDigital@users.noreply.github.com>
Date: Tue, 22 Sep 2026 20:04:11 -0400
Subject: [PATCH] fix(site): finish the Pages review follow-ups

The first pass left the landing page cutting 19 skill and rule
descriptions mid-clause, listing all 28 showcase props (10k px of page),
and the gallery with three identical links per card, a zoom overlay that
let focus escape behind it, and no 404 page for renamed examples.

- build_site: descriptions shown whole up to 340 chars, else cut at a
  sentence boundary; backtick spans render as <code>; showcase honors
  featured_rank like examples; generate a root-absolute 404.html
- showcase/gallery.json: feature six varied pieces on the landing page
- build_gallery: zoom overlay is a <dialog> (focus trap, Esc, focus
  return, Close button); the image link on each card leaves the tab
  order; "View" links carry the entry name; the Tags toggle names the
  active tag on narrow screens; footer names the right source JSON;
  README content is substituted last so it can't hit other placeholders
- both templates declare color-scheme: dark

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Signed-off-by: TMHSDigital <154358121+TMHSDigital@users.noreply.github.com>
---
 .gitignore                                    |   1 +
 docs/gallery/anvil/index.html                 |  31 +-
 docs/gallery/armature-bend/index.html         |  29 +-
 .../gallery/attribute-domain-shear/index.html |  29 +-
 .../bake-normal-high-to-low/index.html        |  29 +-
 docs/gallery/bmesh-gear/index.html            |  29 +-
 docs/gallery/campfire/index.html              |  31 +-
 docs/gallery/car-mirror-symmetry/index.html   |  29 +-
 docs/gallery/cart/index.html                  |  31 +-
 docs/gallery/chopping-block/index.html        |  31 +-
 docs/gallery/collision-hull-proxy/index.html  |  29 +-
 docs/gallery/color-attribute-wheel/index.html |  29 +-
 docs/gallery/compositor-glare/index.html      |  29 +-
 docs/gallery/crate-stack/index.html           |  31 +-
 .../cross-version-property-delete/index.html  |  29 +-
 docs/gallery/curve-bevel-arc/index.html       |  29 +-
 docs/gallery/custom-normals-shade/index.html  |  29 +-
 docs/gallery/damped-track-aim/index.html      |  29 +-
 docs/gallery/degenerate-bevel-weld/index.html |  29 +-
 docs/gallery/depsgraph-export/index.html      |  29 +-
 docs/gallery/driver-wave/index.html           |  29 +-
 docs/gallery/export-preset-axis/index.html    |  29 +-
 docs/gallery/fence-kit/index.html             |  31 +-
 docs/gallery/gltf-export-roundtrip/index.html |  29 +-
 docs/gallery/gltf-skin-roundtrip/index.html   |  29 +-
 docs/gallery/gn-instance-grid/index.html      |  29 +-
 docs/gallery/gn-modifier-inputs/index.html    |  29 +-
 docs/gallery/gn-sdf-remesh/index.html         |  29 +-
 docs/gallery/gn-socket-rename/index.html      |  29 +-
 docs/gallery/gn-zone-iterate/index.html       |  29 +-
 docs/gallery/gp-lineart-contour/index.html    |  29 +-
 docs/gallery/grease-pencil-rosette/index.html |  29 +-
 docs/gallery/grindstone/index.html            |  31 +-
 docs/gallery/hand-pump/index.html             |  31 +-
 docs/gallery/hay-bale/index.html              |  31 +-
 docs/gallery/hitching-post/index.html         |  31 +-
 docs/gallery/image-pixels-testcard/index.html |  29 +-
 docs/gallery/index.html                       | 336 +++++++++---------
 docs/gallery/iron-cauldron/index.html         |  31 +-
 docs/gallery/light-link-studio/index.html     |  29 +-
 docs/gallery/lightmap-uv-channel/index.html   |  29 +-
 docs/gallery/lod-decimate-chain/index.html    |  29 +-
 docs/gallery/market-stall/index.html          |  31 +-
 docs/gallery/mesh-hygiene-audit/index.html    |  29 +-
 docs/gallery/modular-kit-snap/index.html      |  29 +-
 docs/gallery/parent-inverse-orrery/index.html |  29 +-
 docs/gallery/park-bench/index.html            |  31 +-
 docs/gallery/png-exr-alpha/index.html         |  29 +-
 docs/gallery/prop-origin-transform/index.html |  29 +-
 docs/gallery/shader-node-group/index.html     |  29 +-
 docs/gallery/shape-key-blend/index.html       |  29 +-
 docs/gallery/shipping-crate/index.html        |  31 +-
 docs/gallery/signpost/index.html              |  31 +-
 .../sky-texture-sun-elevation/index.html      |  29 +-
 docs/gallery/soccer-ball-goldberg/index.html  |  29 +-
 docs/gallery/socket-attach-points/index.html  |  29 +-
 docs/gallery/stone-archway/index.html         |  31 +-
 docs/gallery/stone-well/index.html            |  31 +-
 docs/gallery/street-lantern/index.html        |  31 +-
 docs/gallery/swatch-grid/index.html           |  29 +-
 docs/gallery/tavern-stool/index.html          |  31 +-
 docs/gallery/temp-override-join/index.html    |  29 +-
 docs/gallery/terrain-scatter/index.html       |  31 +-
 docs/gallery/text-version-stamp/index.html    |  29 +-
 docs/gallery/treasure-chest/index.html        |  31 +-
 docs/gallery/triangulate-tangents/index.html  |  29 +-
 docs/gallery/turntable/index.html             |  29 +-
 .../usd-export-evaluation-mode/index.html     |  29 +-
 docs/gallery/uv-layer-grid/index.html         |  29 +-
 docs/gallery/vertex-color-ao/index.html       |  29 +-
 docs/gallery/vertex-weight-limit/index.html   |  29 +-
 docs/gallery/vse-cut-list/index.html          |  29 +-
 docs/gallery/vse-gamma-cross/index.html       |  29 +-
 docs/gallery/wall-torch/index.html            |  31 +-
 docs/gallery/watchtower/index.html            |  31 +-
 docs/gallery/water-trough/index.html          |  31 +-
 docs/gallery/wave-displace/index.html         |  29 +-
 docs/gallery/wheelbarrow/index.html           |  31 +-
 docs/gallery/wooden-barrel/index.html         |  31 +-
 docs/gallery/wooden-bucket/index.html         |  31 +-
 docs/gallery/wooden-ladder/index.html         |  31 +-
 scripts/build_gallery.py                      |  52 ++-
 scripts/site/404.html.j2                      |  51 +++
 scripts/site/build_site.py                    |  49 ++-
 scripts/site/template.html.j2                 |  15 +-
 showcase/gallery.json                         |  18 +-
 86 files changed, 1860 insertions(+), 1009 deletions(-)
 create mode 100644 scripts/site/404.html.j2

diff --git a/.gitignore b/.gitignore
index 47f3c444..2300d9b6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,6 +36,7 @@ docs/site-upgrade-plan.md
 # Landing-page build outputs (generated at deploy time by scripts/site/build_site.py;
 # docs/gallery/ stays committed)
 docs/index.html
+docs/404.html
 docs/fonts/
 docs/assets/
 
diff --git a/docs/gallery/anvil/index.html b/docs/gallery/anvil/index.html
index 138aaa6f..339f2475 100644
--- a/docs/gallery/anvil/index.html
+++ b/docs/gallery/anvil/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/anvil/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="anvil — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural blacksmith anvil on a timber stump through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1661,12 +1670,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/anvil-hero.webp" alt="anvil render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1677,11 +1687,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/armature-bend/index.html b/docs/gallery/armature-bend/index.html
index c62f3ae1..aa610b62 100644
--- a/docs/gallery/armature-bend/index.html
+++ b/docs/gallery/armature-bend/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/armature-bend/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="armature-bend — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Rigging end to end in the data API — edit_bones chain construction, name-bound vertex groups with smoothstep blend zones, posing, and depsgraph evaluation — bending a tapered tube through rest, half, and full curl." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -620,9 +629,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/armature-bend-hero.webp" alt="armature-bend render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -636,11 +646,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/attribute-domain-shear/index.html b/docs/gallery/attribute-domain-shear/index.html
index 1c4ca6a8..03119b2d 100644
--- a/docs/gallery/attribute-domain-shear/index.html
+++ b/docs/gallery/attribute-domain-shear/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/attribute-domain-shear/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="attribute-domain-shear — Examples — Blender Developer Tools" />
   <meta property="og:description" content="POINT vs CORNER color-attribute domains on a shared-vertex pinwheel: CORNER stays exact per face while a naive per-wedge POINT loop shears to the last write at the hub. Crisp petals versus a smeared swirl in one frame; the measured shear equals the palette closed form." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -706,9 +715,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/attribute-domain-shear-hero.webp" alt="attribute-domain-shear render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -722,11 +732,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/bake-normal-high-to-low/index.html b/docs/gallery/bake-normal-high-to-low/index.html
index 08c3a996..c1765f72 100644
--- a/docs/gallery/bake-normal-high-to-low/index.html
+++ b/docs/gallery/bake-normal-high-to-low/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/bake-normal-high-to-low/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="bake-normal-high-to-low — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A collapse-decimated hatch plate receiving a Cycles cage-baked tangent normal map from a ribbed high-poly source" />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -824,9 +833,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/bake-normal-high-to-low-hero.webp" alt="bake-normal-high-to-low render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -840,11 +850,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/bmesh-gear/index.html b/docs/gallery/bmesh-gear/index.html
index 51f25143..135578d3 100644
--- a/docs/gallery/bmesh-gear/index.html
+++ b/docs/gallery/bmesh-gear/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/bmesh-gear/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="bmesh-gear — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A 14-tooth gear built entirely with bmesh — profile ring, face, extrude — with bm.free() in a try/finally, exactly as the ownership contract demands." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -515,9 +524,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/bmesh-gear-hero.webp" alt="bmesh-gear render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -531,11 +541,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/campfire/index.html b/docs/gallery/campfire/index.html
index 97a29401..da71af9f 100644
--- a/docs/gallery/campfire/index.html
+++ b/docs/gallery/campfire/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/campfire/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="campfire — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural campfire through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1482,12 +1491,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/campfire-hero.webp" alt="campfire render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1498,11 +1508,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/car-mirror-symmetry/index.html b/docs/gallery/car-mirror-symmetry/index.html
index 428ef85a..040fffc5 100644
--- a/docs/gallery/car-mirror-symmetry/index.html
+++ b/docs/gallery/car-mirror-symmetry/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/car-mirror-symmetry/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="car-mirror-symmetry — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A generic hatchback lofted as one half (14 stations, 9-point rings) and completed by the Mirror modifier, evaluated through the depsgraph. Wheels and lamps mirror about object origins parked on the symmetry plane." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -833,9 +842,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/car-mirror-symmetry-hero.webp" alt="car-mirror-symmetry render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -849,11 +859,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/cart/index.html b/docs/gallery/cart/index.html
index 12a6b136..dd6e143f 100644
--- a/docs/gallery/cart/index.html
+++ b/docs/gallery/cart/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/cart/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="cart — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural two-wheel wooden cart through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1684,12 +1693,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/cart-hero.webp" alt="cart render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1700,11 +1710,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/chopping-block/index.html b/docs/gallery/chopping-block/index.html
index f66bc77f..c1ccac8d 100644
--- a/docs/gallery/chopping-block/index.html
+++ b/docs/gallery/chopping-block/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/chopping-block/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="chopping-block — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural log-round chopping block with a riveted iron hoop and a felling axe buried in the sawn face, through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -2272,12 +2281,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/chopping-block-hero.webp" alt="chopping-block render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -2288,11 +2298,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/collision-hull-proxy/index.html b/docs/gallery/collision-hull-proxy/index.html
index a0854696..9e1fa8d7 100644
--- a/docs/gallery/collision-hull-proxy/index.html
+++ b/docs/gallery/collision-hull-proxy/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/collision-hull-proxy/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="collision-hull-proxy — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A fire hydrant street prop inside its compound collision shell: four convex pieces hulled by bmesh.ops.convex_hull from a coarse inflated cage. The dense render mesh is never hulled - its hull would measure 380 faces, over the 255-face per-piece engine budget. Closed-form plane tests prove containment, convexity, watertightness, outward winding, and Euler characteristic 2 per piece." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -820,9 +829,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/collision-hull-proxy-hero.webp" alt="collision-hull-proxy render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -836,11 +846,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/color-attribute-wheel/index.html b/docs/gallery/color-attribute-wheel/index.html
index 65793aab..8ebcb6ce 100644
--- a/docs/gallery/color-attribute-wheel/index.html
+++ b/docs/gallery/color-attribute-wheel/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/color-attribute-wheel/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="color-attribute-wheel — Examples — Blender Developer Tools" />
   <meta property="og:description" content="The modern color-attributes API — mesh.color_attributes.new() on the CORNER domain, filled by expanding per-vertex HSV across face corners with foreach_get/foreach_set, then wired into a shader Attribute node." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -602,9 +611,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/color-attribute-wheel-hero.webp" alt="color-attribute-wheel render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -618,11 +628,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/compositor-glare/index.html b/docs/gallery/compositor-glare/index.html
index 0e1378c8..0f202566 100644
--- a/docs/gallery/compositor-glare/index.html
+++ b/docs/gallery/compositor-glare/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/compositor-glare/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="compositor-glare — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Bloom where it actually lives — a compositor Glare (Fog Glow) node fed by Render Layers, wired via scene.compositing_node_group on 5.x and scene.node_tree on 4.x, with the Glare node&#x27;s legacy properties vs 5.x menu sockets." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -670,9 +679,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/compositor-glare-hero.webp" alt="compositor-glare render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -686,11 +696,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/crate-stack/index.html b/docs/gallery/crate-stack/index.html
index 0502f579..5c2bf3e6 100644
--- a/docs/gallery/crate-stack/index.html
+++ b/docs/gallery/crate-stack/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/crate-stack/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="crate-stack — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A stack of three procedural shipping crates built by one generator called three times with a per-instance seed, carried through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1721,12 +1730,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/crate-stack-hero.webp" alt="crate-stack render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1737,11 +1747,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/cross-version-property-delete/index.html b/docs/gallery/cross-version-property-delete/index.html
index c245a70d..76f88a4e 100644
--- a/docs/gallery/cross-version-property-delete/index.html
+++ b/docs/gallery/cross-version-property-delete/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/cross-version-property-delete/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="cross-version-property-delete — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Custom ID properties are removed with del, not property_unset. The IDs are built through bpy.data.objects.new so the check does not depend on active_object." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -630,9 +639,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/cross-version-property-delete-hero.webp" alt="cross-version-property-delete render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -646,11 +656,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/curve-bevel-arc/index.html b/docs/gallery/curve-bevel-arc/index.html
index 7f11fcd5..457e6e4d 100644
--- a/docs/gallery/curve-bevel-arc/index.html
+++ b/docs/gallery/curve-bevel-arc/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/curve-bevel-arc/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="curve-bevel-arc — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A beveled Bezier semicircle authored on bpy.types.Curve — splines.new(&#x27;BEZIER&#x27;), bezier_points, bevel_depth, use_fill_caps — so the curve renders as a solid tube without a prior mesh conversion." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -553,9 +562,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/curve-bevel-arc-hero.webp" alt="curve-bevel-arc render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -569,11 +579,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/custom-normals-shade/index.html b/docs/gallery/custom-normals-shade/index.html
index a1c1698c..93a544b2 100644
--- a/docs/gallery/custom-normals-shade/index.html
+++ b/docs/gallery/custom-normals-shade/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/custom-normals-shade/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="custom-normals-shade — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A jerry can prop shaded three ways to prove the post-4.1 shading contract: hard edges are mesh data, landing exactly where the dihedral crosses. Face smooth flags plus a sharp_edge attribute, verified against an independently recomputed dihedral test, and per-loop custom normals surviving depsgraph evaluation within their int16 storage quantization (1.407e-04, not float-exact)." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -894,9 +903,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/custom-normals-shade-hero.webp" alt="custom-normals-shade render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -910,11 +920,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/damped-track-aim/index.html b/docs/gallery/damped-track-aim/index.html
index 2a34c345..1d1712f5 100644
--- a/docs/gallery/damped-track-aim/index.html
+++ b/docs/gallery/damped-track-aim/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/damped-track-aim/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="damped-track-aim — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Aim constraints via the data API — Object.constraints.new(&#x27;DAMPED_TRACK&#x27;) with target and TRACK_Z, not bpy.ops.object.constraint_add in a headless loop. Gallery still: brass spike cage around an ember core." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -703,9 +712,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/damped-track-aim-hero.webp" alt="damped-track-aim render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -719,11 +729,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/degenerate-bevel-weld/index.html b/docs/gallery/degenerate-bevel-weld/index.html
index 59f33028..2f36533d 100644
--- a/docs/gallery/degenerate-bevel-weld/index.html
+++ b/docs/gallery/degenerate-bevel-weld/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/degenerate-bevel-weld/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="degenerate-bevel-weld — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Bevel offset &gt;= half the min box dimension collapses the band into zero-area faces — and they ship: a stdlib GLB re-parse counts the degenerate triangles crossing the export boundary. Dual tray: rounded edge versus knife seam, markers from live mesh data." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -712,9 +721,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/degenerate-bevel-weld-hero.webp" alt="degenerate-bevel-weld render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -728,11 +738,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/depsgraph-export/index.html b/docs/gallery/depsgraph-export/index.html
index a9102d14..339e63b8 100644
--- a/docs/gallery/depsgraph-export/index.html
+++ b/docs/gallery/depsgraph-export/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/depsgraph-export/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="depsgraph-export — Examples — Blender Developer Tools" />
   <meta property="og:description" content="The depsgraph lifetime contract — evaluated_get().to_mesh() paired with to_mesh_clear() — measured against an OBJ export of the same object." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -538,9 +547,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/depsgraph-export-hero.webp" alt="depsgraph-export render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -554,11 +564,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/driver-wave/index.html b/docs/gallery/driver-wave/index.html
index 3a354ef6..6070e6e6 100644
--- a/docs/gallery/driver-wave/index.html
+++ b/docs/gallery/driver-wave/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/driver-wave/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="driver-wave — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A driver_namespace function driving sixteen column heights through SCRIPTED drivers — the sine skyline is entirely driver-evaluated." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -512,9 +521,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/driver-wave-hero.webp" alt="driver-wave render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -528,11 +538,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/export-preset-axis/index.html b/docs/gallery/export-preset-axis/index.html
index 73c586c8..de9333a8 100644
--- a/docs/gallery/export-preset-axis/index.html
+++ b/docs/gallery/export-preset-axis/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/export-preset-axis/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="export-preset-axis — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A radio beacon exported under Unity and Godot glTF presets and re-imported, proving the two files have different vertex orientation" />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -807,9 +816,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/export-preset-axis-hero.webp" alt="export-preset-axis render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -823,11 +833,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/fence-kit/index.html b/docs/gallery/fence-kit/index.html
index d5cb7831..b7e7f804 100644
--- a/docs/gallery/fence-kit/index.html
+++ b/docs/gallery/fence-kit/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/fence-kit/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="fence-kit — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural post-and-rail fence section whose brace is an oriented box between named post stations, through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1388,12 +1397,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/fence-kit-hero.webp" alt="fence-kit render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1404,11 +1414,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/gltf-export-roundtrip/index.html b/docs/gallery/gltf-export-roundtrip/index.html
index 01842965..f3c6c70c 100644
--- a/docs/gallery/gltf-export-roundtrip/index.html
+++ b/docs/gallery/gltf-export-roundtrip/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/gltf-export-roundtrip/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="gltf-export-roundtrip — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A sci-fi supply crate exported to glTF and re-imported, verifying the round-trip against the depsgraph-evaluated mesh within float tolerances. Positions, loop normals, box-mapped UVs, and per-triangle material bindings must all survive; the on-disk JSON proves the +Y-up conversion and the V-flipped UV layout." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -930,9 +939,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/gltf-export-roundtrip-hero.webp" alt="gltf-export-roundtrip render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -946,11 +956,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/gltf-skin-roundtrip/index.html b/docs/gallery/gltf-skin-roundtrip/index.html
index b360c4e0..dc845fad 100644
--- a/docs/gallery/gltf-skin-roundtrip/index.html
+++ b/docs/gallery/gltf-skin-roundtrip/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/gltf-skin-roundtrip/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="gltf-skin-roundtrip — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A rigged mech scorpion exported to glTF with skins and re-imported, verifying the skinning contract the geometry round-trip left uncovered. Skeleton, weights, and deformation must all survive the format." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -903,9 +912,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/gltf-skin-roundtrip-hero.webp" alt="gltf-skin-roundtrip render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -919,11 +929,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/gn-instance-grid/index.html b/docs/gallery/gn-instance-grid/index.html
index 60fe46a2..fc260eda 100644
--- a/docs/gallery/gn-instance-grid/index.html
+++ b/docs/gallery/gn-instance-grid/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/gn-instance-grid/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="gn-instance-grid — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A generative Geometry Nodes tree — Mesh Grid → Instance on Points → Realize Instances → Set Shade Smooth — attached as a NODES modifier with no Group Input geometry." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -568,9 +577,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/gn-instance-grid-hero.webp" alt="gn-instance-grid render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -584,11 +594,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/gn-modifier-inputs/index.html b/docs/gallery/gn-modifier-inputs/index.html
index e65729e2..4db10826 100644
--- a/docs/gallery/gn-modifier-inputs/index.html
+++ b/docs/gallery/gn-modifier-inputs/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/gn-modifier-inputs/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="gn-modifier-inputs — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Per-modifier Geometry Nodes Float inputs on a shared tree — 4.5/5.1 write mod[identifier], 5.2 writes mod.properties.inputs.Socket_1.value." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -702,9 +711,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/gn-modifier-inputs-hero.webp" alt="gn-modifier-inputs render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -718,11 +728,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/gn-sdf-remesh/index.html b/docs/gallery/gn-sdf-remesh/index.html
index 7321fc7b..76a81e20 100644
--- a/docs/gallery/gn-sdf-remesh/index.html
+++ b/docs/gallery/gn-sdf-remesh/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/gn-sdf-remesh/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="gn-sdf-remesh — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A Geometry Nodes SDF remesh (MeshToSDFGrid → GridToMesh at the SDF zero-level), with a Set Material node carrying the material through the remesh." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -447,9 +456,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/gn-sdf-remesh-hero.webp" alt="gn-sdf-remesh render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -463,11 +473,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/gn-socket-rename/index.html b/docs/gallery/gn-socket-rename/index.html
index 426b230e..ee0ab024 100644
--- a/docs/gallery/gn-socket-rename/index.html
+++ b/docs/gallery/gn-socket-rename/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/gn-socket-rename/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="gn-socket-rename — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Compare and Random Value socket identifiers collapsed onto reused names in 5.2; enabled-name lookup wires on 4.5, 5.1, and 5.2" />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -858,9 +867,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/gn-socket-rename-hero.webp" alt="gn-socket-rename render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -874,11 +884,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/gn-zone-iterate/index.html b/docs/gallery/gn-zone-iterate/index.html
index fa70feea..139be942 100644
--- a/docs/gallery/gn-zone-iterate/index.html
+++ b/docs/gallery/gn-zone-iterate/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/gn-zone-iterate/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="gn-zone-iterate — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Repeat Zone and For Each Element only iterate after pair_with_output. Evaluated cube counts follow 8 times (1+N) and 8 times P, not tree structure." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -715,9 +724,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/gn-zone-iterate-hero.webp" alt="gn-zone-iterate render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -731,11 +741,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/gp-lineart-contour/index.html b/docs/gallery/gp-lineart-contour/index.html
index 5d5b7b75..9989880b 100644
--- a/docs/gallery/gp-lineart-contour/index.html
+++ b/docs/gallery/gp-lineart-contour/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/gp-lineart-contour/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="gp-lineart-contour — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Grease Pencil LINEART modifier contours via the depsgraph on a faceted crystal. source_object is load-bearing (clear yields 0 strokes); contour+crease off yields 0; restore recovers 10 strokes / 34 points on both 4.5.11 and 5.1.2. Stroke width: thickness exists on 4.5, AttributeError on 5.1 — portable path is radius." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -750,9 +759,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/gp-lineart-contour-hero.webp" alt="gp-lineart-contour render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -766,11 +776,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/grease-pencil-rosette/index.html b/docs/gallery/grease-pencil-rosette/index.html
index efaeca17..d0e5de6e 100644
--- a/docs/gallery/grease-pencil-rosette/index.html
+++ b/docs/gallery/grease-pencil-rosette/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/grease-pencil-rosette/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="grease-pencil-rosette — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Grease Pencil v3&#x27;s attribute-based API — layer → frames.new(1).drawing → add_strokes → per-point position/radius/opacity/vertex_color — drawing five nested neon rose curves." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -592,9 +601,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/grease-pencil-rosette-hero.webp" alt="grease-pencil-rosette render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -608,11 +618,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/grindstone/index.html b/docs/gallery/grindstone/index.html
index 263f5ace..60efc65c 100644
--- a/docs/gallery/grindstone/index.html
+++ b/docs/gallery/grindstone/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/grindstone/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="grindstone — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural grindstone on a timber trestle through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1714,12 +1723,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/grindstone-hero.webp" alt="grindstone render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1730,11 +1740,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/hand-pump/index.html b/docs/gallery/hand-pump/index.html
index 4e428bbb..e42e396b 100644
--- a/docs/gallery/hand-pump/index.html
+++ b/docs/gallery/hand-pump/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/hand-pump/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="hand-pump — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural village hand pump whose gooseneck is a 6-gon tube from the lower-column radius, through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1548,12 +1557,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/hand-pump-hero.webp" alt="hand-pump render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1564,11 +1574,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/hay-bale/index.html b/docs/gallery/hay-bale/index.html
index 84f88339..9f3bd849 100644
--- a/docs/gallery/hay-bale/index.html
+++ b/docs/gallery/hay-bale/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/hay-bale/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="hay-bale — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A bound hay bale whose twine belts follow the loaf&#x27;s own raycast cross-section, asserting recomputed geometry budgets, not an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1770,12 +1779,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/hay-bale-hero.webp" alt="hay-bale render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1786,11 +1796,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/hitching-post/index.html b/docs/gallery/hitching-post/index.html
index fb537f50..ddb10461 100644
--- a/docs/gallery/hitching-post/index.html
+++ b/docs/gallery/hitching-post/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/hitching-post/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="hitching-post — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural hitching post (eaved cap, one rail, cup shoe, rings hung through eyes) through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1694,12 +1703,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/hitching-post-hero.webp" alt="hitching-post render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1710,11 +1720,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/image-pixels-testcard/index.html b/docs/gallery/image-pixels-testcard/index.html
index f6d95481..3df97d27 100644
--- a/docs/gallery/image-pixels-testcard/index.html
+++ b/docs/gallery/image-pixels-testcard/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/image-pixels-testcard/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="image-pixels-testcard — Examples — Blender Developer Tools" />
   <meta property="og:description" content="The Image pixel-buffer contract — a procedural broadcast test card written into bpy.data.images.new() with one pixels.foreach_set (589,824 floats), byte vs float_buffer storage, scale() reallocation, and the save() vs save_render() lifecycle." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -698,9 +707,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/image-pixels-testcard-hero.webp" alt="image-pixels-testcard render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -714,11 +724,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/index.html b/docs/gallery/index.html
index 61e0ec12..08a9383f 100644
--- a/docs/gallery/index.html
+++ b/docs/gallery/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/" />
   <link rel="icon" href="../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="Examples and Showcase — Blender Developer Tools" />
   <meta property="og:description" content="Runnable, smoke-gated Blender Python examples — each executed headless on Blender 5.2 LTS and 4.5 LTS (5.1 on the weekly cron), so every render reflects code that actually runs. Showcase pieces share the grid and carry the &#x27;showcase&#x27; tag; they are budget-conformance props, not examples." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -330,872 +339,872 @@ <h1>Examples and Showcase</h1>
   <main id="main">
     <div class="grid" id="grid">
       <article class="card" data-tags="materials rendering">
-        <a class="card-media" href="swatch-grid/" aria-label="swatch-grid example detail page">
+        <a class="card-media" href="swatch-grid/" tabindex="-1" aria-hidden="true">
           <img src="assets/swatch-grid-hero.webp" alt="swatch-grid — Procedural Principled materials — metal and dielectric, the emission pattern, and the cross-version set_specular shim." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="swatch-grid/">swatch-grid</a></h2>
           <p class="teaches">Procedural Principled materials — metal and dielectric, the emission pattern, and the cross-version set_specular shim.</p>
           <p class="witnesses"><span class="tag">witnesses</span> EEVEE engine-id mapping: BLENDER_EEVEE on 5.x, BLENDER_EEVEE_NEXT on 4.2–4.5.</p>
-          <a class="card-link" href="swatch-grid/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="swatch-grid/">View example<span class="sr-only"> swatch-grid</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="animation">
-        <a class="card-media" href="turntable/" aria-label="turntable example detail page">
+        <a class="card-media" href="turntable/" tabindex="-1" aria-hidden="true">
           <img src="assets/turntable-hero.webp" alt="turntable — A slotted-actions Z-rotation turntable keyed through the cross-version channelbag path (get_channelbag_for_slot)." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="turntable/">turntable</a></h2>
           <p class="teaches">A slotted-actions Z-rotation turntable keyed through the cross-version channelbag path (get_channelbag_for_slot).</p>
           <p class="witnesses"><span class="tag">witnesses</span> Slotted-actions boundary: ensure-helper channelbag on 5.x, strip.channelbag on 4.4/4.5.</p>
-          <a class="card-link" href="turntable/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="turntable/">View example<span class="sr-only"> turntable</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="geometry-nodes materials">
-        <a class="card-media" href="gn-sdf-remesh/" aria-label="gn-sdf-remesh example detail page">
+        <a class="card-media" href="gn-sdf-remesh/" tabindex="-1" aria-hidden="true">
           <img src="assets/gn-sdf-remesh-hero.webp" alt="gn-sdf-remesh — A Geometry Nodes SDF remesh (MeshToSDFGrid → GridToMesh at the SDF zero-level), with a Set Material node carrying the material through the remesh." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="gn-sdf-remesh/">gn-sdf-remesh</a></h2>
           <p class="teaches">A Geometry Nodes SDF remesh (MeshToSDFGrid → GridToMesh at the SDF zero-level), with a Set Material node carrying the material through the remesh.</p>
           <p class="witnesses"><span class="tag">witnesses</span> An SDF grid is meshed with Grid to Mesh, not Volume to Mesh; GN geometry needs Set Material or it renders untextured.</p>
-          <a class="card-link" href="gn-sdf-remesh/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="gn-sdf-remesh/">View example<span class="sr-only"> gn-sdf-remesh</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="depsgraph export">
-        <a class="card-media" href="depsgraph-export/" aria-label="depsgraph-export example detail page">
+        <a class="card-media" href="depsgraph-export/" tabindex="-1" aria-hidden="true">
           <img src="assets/depsgraph-export-hero.webp" alt="depsgraph-export — The depsgraph lifetime contract — evaluated_get().to_mesh() paired with to_mesh_clear() — measured against an OBJ export of the same object." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="depsgraph-export/">depsgraph-export</a></h2>
           <p class="teaches">The depsgraph lifetime contract — evaluated_get().to_mesh() paired with to_mesh_clear() — measured against an OBJ export of the same object.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Exports ship evaluated geometry: the exported vertex count equals the subsurf-applied count and is strictly greater than the base mesh.</p>
-          <a class="card-link" href="depsgraph-export/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="depsgraph-export/">View example<span class="sr-only"> depsgraph-export</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh performance">
-        <a class="card-media" href="wave-displace/" aria-label="wave-displace example detail page">
+        <a class="card-media" href="wave-displace/" tabindex="-1" aria-hidden="true">
           <img src="assets/wave-displace-hero.webp" alt="wave-displace — Bulk vertex IO at real scale — 9,409 vertices displaced into a standing wave with one foreach_get and one foreach_set, no per-vertex access." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="wave-displace/">wave-displace</a></h2>
           <p class="teaches">Bulk vertex IO at real scale — 9,409 vertices displaced into a standing wave with one foreach_get and one foreach_set, no per-vertex access.</p>
           <p class="witnesses"><span class="tag">witnesses</span> The bulk path is correct, not just fast: the Z span matches the wave amplitude and every vertex matches the closed-form wave, so a stride bug in the flat buffer cannot hide.</p>
-          <a class="card-link" href="wave-displace/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="wave-displace/">View example<span class="sr-only"> wave-displace</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="drivers animation">
-        <a class="card-media" href="driver-wave/" aria-label="driver-wave example detail page">
+        <a class="card-media" href="driver-wave/" tabindex="-1" aria-hidden="true">
           <img src="assets/driver-wave-hero.webp" alt="driver-wave — A driver_namespace function driving sixteen column heights through SCRIPTED drivers — the sine skyline is entirely driver-evaluated." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="driver-wave/">driver-wave</a></h2>
           <p class="teaches">A driver_namespace function driving sixteen column heights through SCRIPTED drivers — the sine skyline is entirely driver-evaluated.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Driven values appear after a view-layer update in two places that must agree: the evaluated copy and the original datablock the animation system flushes for display.</p>
-          <a class="card-link" href="driver-wave/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="driver-wave/">View example<span class="sr-only"> driver-wave</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh bmesh">
-        <a class="card-media" href="bmesh-gear/" aria-label="bmesh-gear example detail page">
+        <a class="card-media" href="bmesh-gear/" tabindex="-1" aria-hidden="true">
           <img src="assets/bmesh-gear-hero.webp" alt="bmesh-gear — A 14-tooth gear built entirely with bmesh — profile ring, face, extrude — with bm.free() in a try/finally, exactly as the ownership contract demands." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="bmesh-gear/">bmesh-gear</a></h2>
           <p class="teaches">A 14-tooth gear built entirely with bmesh — profile ring, face, extrude — with bm.free() in a try/finally, exactly as the ownership contract demands.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Parametric bmesh topology is exactly predictable: verts, edges, and faces match their closed forms, and every edge borders exactly two faces (watertight).</p>
-          <a class="card-link" href="bmesh-gear/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="bmesh-gear/">View example<span class="sr-only"> bmesh-gear</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="materials node-groups">
-        <a class="card-media" href="shader-node-group/" aria-label="shader-node-group example detail page">
+        <a class="card-media" href="shader-node-group/" tabindex="-1" aria-hidden="true">
           <img src="assets/shader-node-group-hero.webp" alt="shader-node-group — One reusable shader group declared via tree.interface.new_socket, instanced in two materials with different Tint values — two spheres, one group, two colors." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="shader-node-group/">shader-node-group</a></h2>
           <p class="teaches">One reusable shader group declared via tree.interface.new_socket, instanced in two materials with different Tint values — two spheres, one group, two colors.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Grouping contract: interface sockets appear on every instance, both materials share one group datablock (users == 2), and per-material parameters live on the group node, not inside the tree.</p>
-          <a class="card-link" href="shader-node-group/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="shader-node-group/">View example<span class="sr-only"> shader-node-group</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="operators context">
-        <a class="card-media" href="temp-override-join/" aria-label="temp-override-join example detail page">
+        <a class="card-media" href="temp-override-join/" tabindex="-1" aria-hidden="true">
           <img src="assets/temp-override-join-hero.webp" alt="temp-override-join — Join three unit cubes into a staircase under bpy.context.temp_override — the supported replacement for the removed context.copy() dict-pass form." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="temp-override-join/">temp-override-join</a></h2>
           <p class="teaches">Join three unit cubes into a staircase under bpy.context.temp_override — the supported replacement for the removed context.copy() dict-pass form.</p>
           <p class="witnesses"><span class="tag">witnesses</span> temp_override actually applies: join consumes the sources, exactly one mesh remains, topology is verts = 8 × steps, and local Z spans all three steps.</p>
-          <a class="card-link" href="temp-override-join/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="temp-override-join/">View example<span class="sr-only"> temp-override-join</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="geometry-nodes instancing">
-        <a class="card-media" href="gn-instance-grid/" aria-label="gn-instance-grid example detail page">
+        <a class="card-media" href="gn-instance-grid/" tabindex="-1" aria-hidden="true">
           <img src="assets/gn-instance-grid-hero.webp" alt="gn-instance-grid — A generative Geometry Nodes tree — Mesh Grid → Instance on Points → Realize Instances → Set Shade Smooth — attached as a NODES modifier with no Group Input…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="gn-instance-grid/">gn-instance-grid</a></h2>
           <p class="teaches">A generative Geometry Nodes tree — Mesh Grid → Instance on Points → Realize Instances → Set Shade Smooth — attached as a NODES modifier with no Group Input geometry.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Realized instances produce closed-form topology (72 verts, 54 faces), Set Material carries Lime, and the corner instance center sits at its closed-form grid coordinate.</p>
-          <a class="card-link" href="gn-instance-grid/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="gn-instance-grid/">View example<span class="sr-only"> gn-instance-grid</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="geometry-nodes modifiers">
-        <a class="card-media" href="gn-modifier-inputs/" aria-label="gn-modifier-inputs example detail page">
+        <a class="card-media" href="gn-modifier-inputs/" tabindex="-1" aria-hidden="true">
           <img src="assets/gn-modifier-inputs-hero.webp" alt="gn-modifier-inputs — Per-modifier Geometry Nodes Float inputs on a shared tree — 4.5/5.1 write mod[identifier], 5.2 writes mod.properties.inputs.Socket_1.value." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="gn-modifier-inputs/">gn-modifier-inputs</a></h2>
           <p class="teaches">Per-modifier Geometry Nodes Float inputs on a shared tree — 4.5/5.1 write mod[identifier], 5.2 writes mod.properties.inputs.Socket_1.value.</p>
           <p class="witnesses"><span class="tag">witnesses</span> The 5.1 dict form raises TypeError on 5.2 rather than silently no-opping; RNA properties are AttributeError on 4.5. Readback and evaluated Z-extent match written scales 1/2/3.</p>
-          <a class="card-link" href="gn-modifier-inputs/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="gn-modifier-inputs/">View example<span class="sr-only"> gn-modifier-inputs</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh shape-keys">
-        <a class="card-media" href="shape-key-blend/" aria-label="shape-key-blend example detail page">
+        <a class="card-media" href="shape-key-blend/" tabindex="-1" aria-hidden="true">
           <img src="assets/shape-key-blend-hero.webp" alt="shape-key-blend — A relative Tall shape key that lifts and flares the top face — authored via shape_key_add / key_blocks / .value — read back from the depsgraph-evaluated mesh." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="shape-key-blend/">shape-key-blend</a></h2>
           <p class="teaches">A relative Tall shape key that lifts and flares the top face — authored via shape_key_add / key_blocks / .value — read back from the depsgraph-evaluated mesh.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Shape keys do not rewrite mesh.vertices: every evaluated vert matches basis + value × (key − basis), including the flared top half-extent.</p>
-          <a class="card-link" href="shape-key-blend/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="shape-key-blend/">View example<span class="sr-only"> shape-key-blend</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="curves bevel">
-        <a class="card-media" href="curve-bevel-arc/" aria-label="curve-bevel-arc example detail page">
+        <a class="card-media" href="curve-bevel-arc/" tabindex="-1" aria-hidden="true">
           <img src="assets/curve-bevel-arc-hero.webp" alt="curve-bevel-arc — A beveled Bezier semicircle authored on bpy.types.Curve — splines.new(&#x27;BEZIER&#x27;), bezier_points, bevel_depth, use_fill_caps — so the curve renders as a solid…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="curve-bevel-arc/">curve-bevel-arc</a></h2>
           <p class="teaches">A beveled Bezier semicircle authored on bpy.types.Curve — splines.new(&#x27;BEZIER&#x27;), bezier_points, bevel_depth, use_fill_caps — so the curve renders as a solid tube without a prior mesh conversion.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Curve tubes are curve datablocks: eight Bezier points, bevel_depth == 0.15, filled caps, and the evaluated mesh has deterministic topology (1044 verts, 1028 faces) resting on the floor.</p>
-          <a class="card-link" href="curve-bevel-arc/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="curve-bevel-arc/">View example<span class="sr-only"> curve-bevel-arc</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="compositor rendering">
-        <a class="card-media" href="compositor-glare/" aria-label="compositor-glare example detail page">
+        <a class="card-media" href="compositor-glare/" tabindex="-1" aria-hidden="true">
           <img src="assets/compositor-glare-hero.webp" alt="compositor-glare — Bloom where it actually lives — a compositor Glare (Fog Glow) node fed by Render Layers, wired via scene.compositing_node_group on 5.x and scene.node_tree on…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="compositor-glare/">compositor-glare</a></h2>
           <p class="teaches">Bloom where it actually lives — a compositor Glare (Fog Glow) node fed by Render Layers, wired via scene.compositing_node_group on 5.x and scene.node_tree on 4.x, with the Glare node&#x27;s legacy properties vs 5.x menu sockets.</p>
           <p class="witnesses"><span class="tag">witnesses</span> scene.node_tree is gone in 5.x and EEVEE has no use_bloom on either side: the halo beyond the ring silhouette falls off strictly with the compositor on and is exactly zero with it off.</p>
-          <a class="card-link" href="compositor-glare/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="compositor-glare/">View example<span class="sr-only"> compositor-glare</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="constraints animation">
-        <a class="card-media" href="damped-track-aim/" aria-label="damped-track-aim example detail page">
+        <a class="card-media" href="damped-track-aim/" tabindex="-1" aria-hidden="true">
           <img src="assets/damped-track-aim-hero.webp" alt="damped-track-aim — Aim constraints via the data API — Object.constraints.new(&#x27;DAMPED_TRACK&#x27;) with target and TRACK_Z, not bpy.ops.object.constraint_add in a headless loop." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="damped-track-aim/">damped-track-aim</a></h2>
           <p class="teaches">Aim constraints via the data API — Object.constraints.new(&#x27;DAMPED_TRACK&#x27;) with target and TRACK_Z, not bpy.ops.object.constraint_add in a headless loop. Gallery still: brass spike cage around an ember core.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Every needle has one unmuted DAMPED_TRACK on the core; evaluated local +Z aligns toward the core (dot ≥ 0.998). TRACK_TO stand-ins and flipped axes fail.</p>
-          <a class="card-link" href="damped-track-aim/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="damped-track-aim/">View example<span class="sr-only"> damped-track-aim</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh materials attributes">
-        <a class="card-media" href="color-attribute-wheel/" aria-label="color-attribute-wheel example detail page">
+        <a class="card-media" href="color-attribute-wheel/" tabindex="-1" aria-hidden="true">
           <img src="assets/color-attribute-wheel-hero.webp" alt="color-attribute-wheel — The modern color-attributes API — mesh.color_attributes.new() on the CORNER domain, filled by expanding per-vertex HSV across face corners with…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="color-attribute-wheel/">color-attribute-wheel</a></h2>
           <p class="teaches">The modern color-attributes API — mesh.color_attributes.new() on the CORNER domain, filled by expanding per-vertex HSV across face corners with foreach_get/foreach_set, then wired into a shader Attribute node.</p>
           <p class="witnesses"><span class="tag">witnesses</span> CORNER-domain attributes are sized to loop count, not vertex count; the check asserts the sizing, that active_color points at it, and that the Attribute node is actually linked to Base Color, not just present.</p>
-          <a class="card-link" href="color-attribute-wheel/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="color-attribute-wheel/">View example<span class="sr-only"> color-attribute-wheel</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="objects transforms">
-        <a class="card-media" href="parent-inverse-orrery/" aria-label="parent-inverse-orrery example detail page">
+        <a class="card-media" href="parent-inverse-orrery/" tabindex="-1" aria-hidden="true">
           <img src="assets/parent-inverse-orrery-hero.webp" alt="parent-inverse-orrery — Data-API parenting for a brass orrery — the keep-world idiom (child.parent = pivot; child.matrix_parent_inverse = pivot.matrix_world.inverted()) carrying arms…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="parent-inverse-orrery/">parent-inverse-orrery</a></h2>
           <p class="teaches">Data-API parenting for a brass orrery — the keep-world idiom (child.parent = pivot; child.matrix_parent_inverse = pivot.matrix_world.inverted()) carrying arms, planets, and a two-level moon through spinning pivots.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Bare `.parent =` really does teleport the child; the idiom restores world position exactly; matrix_world stays stale until view_layer.update(); every orbit lands on its closed form.</p>
-          <a class="card-link" href="parent-inverse-orrery/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="parent-inverse-orrery/">View example<span class="sr-only"> parent-inverse-orrery</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="grease-pencil attributes">
-        <a class="card-media" href="grease-pencil-rosette/" aria-label="grease-pencil-rosette example detail page">
+        <a class="card-media" href="grease-pencil-rosette/" tabindex="-1" aria-hidden="true">
           <img src="assets/grease-pencil-rosette-hero.webp" alt="grease-pencil-rosette — Grease Pencil v3&#x27;s attribute-based API — layer → frames.new(1).drawing → add_strokes → per-point position/radius/opacity/vertex_color — drawing five nested…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="grease-pencil-rosette/">grease-pencil-rosette</a></h2>
           <p class="teaches">Grease Pencil v3&#x27;s attribute-based API — layer → frames.new(1).drawing → add_strokes → per-point position/radius/opacity/vertex_color — drawing five nested neon rose curves.</p>
           <p class="witnesses"><span class="tag">witnesses</span> The GPv3 address break: 4.5 keeps GPv3 at grease_pencils_v3 while grease_pencils is still legacy GPencil (frame.strokes, no .drawing); 5.x deletes legacy and GPv3 takes over the grease_pencils name. Point writes lazily materialize attribute layers, and every position round-trips through the raw POINT buffer.</p>
-          <a class="card-link" href="grease-pencil-rosette/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="grease-pencil-rosette/">View example<span class="sr-only"> grease-pencil-rosette</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="armature depsgraph">
-        <a class="card-media" href="armature-bend/" aria-label="armature-bend example detail page">
+        <a class="card-media" href="armature-bend/" tabindex="-1" aria-hidden="true">
           <img src="assets/armature-bend-hero.webp" alt="armature-bend — Rigging end to end in the data API — edit_bones chain construction, name-bound vertex groups with smoothstep blend zones, posing, and depsgraph evaluation…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="armature-bend/">armature-bend</a></h2>
           <p class="teaches">Rigging end to end in the data API — edit_bones chain construction, name-bound vertex groups with smoothstep blend zones, posing, and depsgraph evaluation — bending a tapered tube through rest, half, and full curl.</p>
           <p class="witnesses"><span class="tag">witnesses</span> edit_bones exists only in edit mode (empty in object mode), vertex groups bind to bones strictly by name, and the armature modifier is exactly linear blend skinning: every evaluated vertex must equal Σ wᵢ·(pose_bone.matrix @ bone.matrix_local.inverted()) @ rest, root ring pinned, tip deflected — a straight tube fails.</p>
-          <a class="card-link" href="armature-bend/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="armature-bend/">View example<span class="sr-only"> armature-bend</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="curves depsgraph rendering">
-        <a class="card-media" href="text-version-stamp/" aria-label="text-version-stamp example detail page">
+        <a class="card-media" href="text-version-stamp/" tabindex="-1" aria-hidden="true">
           <img src="assets/text-version-stamp-hero.webp" alt="text-version-stamp — The TextCurve data API — curves.new(type=&#x27;FONT&#x27;), live body text from bpy.app.version_string, extrude and bevel_depth solids, and evaluated-mesh conversion…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="text-version-stamp/">text-version-stamp</a></h2>
           <p class="teaches">The TextCurve data API — curves.new(type=&#x27;FONT&#x27;), live body text from bpy.app.version_string, extrude and bevel_depth solids, and evaluated-mesh conversion — so every render self-documents which Blender produced it.</p>
           <p class="witnesses"><span class="tag">witnesses</span> TextCurve solids are exactly predictable: evaluated z-extent = 2 × (extrude + bevel_depth), bevel widens the outline by 2 × bevel_depth, editing body regenerates geometry — and version_string is not bare semver on LTS (&quot;4.5.11 LTS&quot;), so parse bpy.app.version instead.</p>
-          <a class="card-link" href="text-version-stamp/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="text-version-stamp/">View example<span class="sr-only"> text-version-stamp</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="images performance rendering">
-        <a class="card-media" href="image-pixels-testcard/" aria-label="image-pixels-testcard example detail page">
+        <a class="card-media" href="image-pixels-testcard/" tabindex="-1" aria-hidden="true">
           <img src="assets/image-pixels-testcard-hero.webp" alt="image-pixels-testcard — The Image pixel-buffer contract — a procedural broadcast test card written into bpy.data.images.new() with one pixels.foreach_set (589,824 floats), byte vs…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="image-pixels-testcard/">image-pixels-testcard</a></h2>
           <p class="teaches">The Image pixel-buffer contract — a procedural broadcast test card written into bpy.data.images.new() with one pixels.foreach_set (589,824 floats), byte vs float_buffer storage, scale() reallocation, and the save() vs save_render() lifecycle.</p>
           <p class="witnesses"><span class="tag">witnesses</span> pixels is always flat RGBA (channels == 4 even with alpha=False), byte storage quantizes at exactly ≤ 0.5/255 and strictly &gt; 0, stale-size bulk reads raise after scale() — and save() silently flips source to FILE and drops the buffer, so later pixels reads come from whatever sits on disk (proven with an imposter file).</p>
-          <a class="card-link" href="image-pixels-testcard/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="image-pixels-testcard/">View example<span class="sr-only"> image-pixels-testcard</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="images rendering alpha">
-        <a class="card-media" href="png-exr-alpha/" aria-label="png-exr-alpha example detail page">
+        <a class="card-media" href="png-exr-alpha/" tabindex="-1" aria-hidden="true">
           <img src="assets/png-exr-alpha-hero.webp" alt="png-exr-alpha — Float-image PNG save trap — float_buffer=True Image.save() writes RGBA16 and unpremultiplies as if associated-alpha, clamping straight-authored dark values at…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="png-exr-alpha/">png-exr-alpha</a></h2>
           <p class="teaches">Float-image PNG save trap — float_buffer=True Image.save() writes RGBA16 and unpremultiplies as if associated-alpha, clamping straight-authored dark values at low alpha to white (closed-form err 0.98 at RGB 0.02 / a=1/255).</p>
           <p class="witnesses"><span class="tag">witnesses</span> float→PNG IHDR is RGBA16 and matches q16(min(1, c/q16(a))); OpenEXR round-trips within 1e-5; byte→PNG is straight RGBA8; EXR color_mode=RGB drops alpha to opaque.</p>
-          <a class="card-link" href="png-exr-alpha/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="png-exr-alpha/">View example<span class="sr-only"> png-exr-alpha</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh bmesh uv materials">
-        <a class="card-media" href="uv-layer-grid/" aria-label="uv-layer-grid example detail page">
+        <a class="card-media" href="uv-layer-grid/" tabindex="-1" aria-hidden="true">
           <img src="assets/uv-layer-grid-hero.webp" alt="uv-layer-grid — The UV-layer authoring hazard — bmesh.ops.create_grid(..., calc_uvs=True) is a silent no-op unless a UV layer already exists; without one an Image Texture…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="uv-layer-grid/">uv-layer-grid</a></h2>
           <p class="teaches">The UV-layer authoring hazard — bmesh.ops.create_grid(..., calc_uvs=True) is a silent no-op unless a UV layer already exists; without one an Image Texture samples texel (0,0) everywhere.</p>
           <p class="witnesses"><span class="tag">witnesses</span> calc_uvs=True alone leaves 0 UV layers; pre-create + calc_uvs fills loops to the closed-form grid UVs ((x/size+1)/2, (y/size+1)/2) within 1e-6; explicit loop assignment is the calc_uvs-free fallback. The still is self-witnessing: the script re-reads its render and exits non-zero unless the hazard panel is one flat teal and the repaired panel a high-contrast checker.</p>
-          <a class="card-link" href="uv-layer-grid/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="uv-layer-grid/">View example<span class="sr-only"> uv-layer-grid</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="sequencer rendering">
-        <a class="card-media" href="vse-cut-list/" aria-label="vse-cut-list example detail page">
+        <a class="card-media" href="vse-cut-list/" tabindex="-1" aria-hidden="true">
           <img src="assets/vse-cut-list-hero.webp" alt="vse-cut-list — The sequencer API rename from 4.5 LTS to 5.x — strips (never .sequences), new_effect ending in length= vs frame_end=, and left_handle/right_handle/duration…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="vse-cut-list/">vse-cut-list</a></h2>
           <p class="teaches">The sequencer API rename from 4.5 LTS to 5.x — strips (never .sequences), new_effect ending in length= vs frame_end=, and left_handle/right_handle/duration replacing the deprecated frame_final_*. A deterministic cut list — color programs, a clamped GAMMA_CROSS, a scene strip, a text strip — asserted before and after save/reload.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Each side hard-fails the other&#x27;s spelling: TypeError on the wrong end kwarg, AttributeError on .sequences. The cross clamps to the source overlap, effect strips consume their inputs only when stacked above them, and a same-scene scene strip renders transparent.</p>
-          <a class="card-link" href="vse-cut-list/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="vse-cut-list/">View example<span class="sr-only"> vse-cut-list</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="export uv">
-        <a class="card-media" href="gltf-export-roundtrip/" aria-label="gltf-export-roundtrip example detail page">
+        <a class="card-media" href="gltf-export-roundtrip/" tabindex="-1" aria-hidden="true">
           <img src="assets/gltf-export-roundtrip-hero.webp" alt="gltf-export-roundtrip — A sci-fi supply crate exported to glTF and re-imported, verifying the round-trip against the depsgraph-evaluated mesh within float tolerances." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="gltf-export-roundtrip/">gltf-export-roundtrip</a></h2>
           <p class="teaches">A sci-fi supply crate exported to glTF and re-imported, verifying the round-trip against the depsgraph-evaluated mesh within float tolerances. Positions, loop normals, box-mapped UVs, and per-triangle material bindings must all survive; the on-disk JSON proves the +Y-up conversion and the V-flipped UV layout.</p>
           <p class="witnesses"><span class="tag">witnesses</span> export_yup bakes (x, y, z) -&gt; (x, z, -y) into the vertex data with no node rotation (probed identical on 4.5.11 and 5.1.2); export_apply ships the evaluated mesh, not the base cage; exporter/importer RNA is guarded so a future kwarg rename fails loudly.</p>
-          <a class="card-link" href="gltf-export-roundtrip/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="gltf-export-roundtrip/">View example<span class="sr-only"> gltf-export-roundtrip</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="export">
-        <a class="card-media" href="export-preset-axis/" aria-label="export-preset-axis example detail page">
+        <a class="card-media" href="export-preset-axis/" tabindex="-1" aria-hidden="true">
           <img src="assets/export-preset-axis-hero.webp" alt="export-preset-axis — A radio beacon exported under Unity and Godot glTF presets and re-imported, proving the two files have different vertex orientation" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="export-preset-axis/">export-preset-axis</a></h2>
           <p class="teaches">A radio beacon exported under Unity and Godot glTF presets and re-imported, proving the two files have different vertex orientation</p>
           <p class="witnesses"><span class="tag">witnesses</span> Unity export_yup=True round-trips standing (x,y,z); Godot export_yup=False reimports lying along -Y as (x,-z,y); --same-axis exits 9; exporter RNA is guarded so a future kwarg rename fails loudly</p>
-          <a class="card-link" href="export-preset-axis/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="export-preset-axis/">View example<span class="sr-only"> export-preset-axis</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="depsgraph mesh">
-        <a class="card-media" href="lod-decimate-chain/" aria-label="lod-decimate-chain example detail page">
+        <a class="card-media" href="lod-decimate-chain/" tabindex="-1" aria-hidden="true">
           <img src="assets/lod-decimate-chain-hero.webp" alt="lod-decimate-chain — A retro rocket at LOD0/1/2 via the Decimate modifier evaluated through the depsgraph." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="lod-decimate-chain/">lod-decimate-chain</a></h2>
           <p class="teaches">A retro rocket at LOD0/1/2 via the Decimate modifier evaluated through the depsgraph. The check proves the reduction is non-destructive, the triangle count hits ratio x base within bounds, and silhouette-critical dimensions survive.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Evaluated-vs-original: the depsgraph carries the reduction while obj.data keeps the closed-form counts. A stacked Decimate halves the effective ratio (caught); an aggressive ratio collapses the nose tip (caught).</p>
-          <a class="card-link" href="lod-decimate-chain/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="lod-decimate-chain/">View example<span class="sr-only"> lod-decimate-chain</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="armature mesh">
-        <a class="card-media" href="vertex-weight-limit/" aria-label="vertex-weight-limit example detail page">
+        <a class="card-media" href="vertex-weight-limit/" tabindex="-1" aria-hidden="true">
           <img src="assets/vertex-weight-limit-hero.webp" alt="vertex-weight-limit — A rigged mech arm pruned to the game-engine cap of four bone influences per vertex, through the data API." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="vertex-weight-limit/">vertex-weight-limit</a></h2>
           <p class="teaches">A rigged mech arm pruned to the game-engine cap of four bone influences per vertex, through the data API. The check proves no vertex exceeds the cap, weights still sum to one, the pose survives pruning, and the modifier is still exact linear blend skinning.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Limit-total and normalize without bpy.ops: keep the top four groups, VertexGroup.remove the rest, renormalize. LBS is verified against the weights read back from the mesh&#x27;s own deform layer, not the authoring function.</p>
-          <a class="card-link" href="vertex-weight-limit/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="vertex-weight-limit/">View example<span class="sr-only"> vertex-weight-limit</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh uv">
-        <a class="card-media" href="triangulate-tangents/" aria-label="triangulate-tangents example detail page">
+        <a class="card-media" href="triangulate-tangents/" tabindex="-1" aria-hidden="true">
           <img src="assets/triangulate-tangents-hero.webp" alt="triangulate-tangents — A machined buckler verifying the tangent-space contract a game engine&#x27;s normal mapping depends on." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="triangulate-tangents/">triangulate-tangents</a></h2>
           <p class="teaches">A machined buckler verifying the tangent-space contract a game engine&#x27;s normal mapping depends on. Deterministic triangulation, unit orthogonal tangent frames, and the edge/UV-delta formula matching mikktspace within welding tolerance.</p>
           <p class="witnesses"><span class="tag">witnesses</span> calc_tangents aborts on any ngon; planar UVs on a cylindrical wall collapse tangents onto normals; a MeshUVLoopLayer handle held across calc_tangents dangles on 4.5 (471 phantom flips, silent exit 0) while the mikktspace math is byte-identical on both versions.</p>
-          <a class="card-link" href="triangulate-tangents/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="triangulate-tangents/">View example<span class="sr-only"> triangulate-tangents</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="export armature">
-        <a class="card-media" href="gltf-skin-roundtrip/" aria-label="gltf-skin-roundtrip example detail page">
+        <a class="card-media" href="gltf-skin-roundtrip/" tabindex="-1" aria-hidden="true">
           <img src="assets/gltf-skin-roundtrip-hero.webp" alt="gltf-skin-roundtrip — A rigged mech scorpion exported to glTF with skins and re-imported, verifying the skinning contract the geometry round-trip left uncovered." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="gltf-skin-roundtrip/">gltf-skin-roundtrip</a></h2>
           <p class="teaches">A rigged mech scorpion exported to glTF with skins and re-imported, verifying the skinning contract the geometry round-trip left uncovered. Skeleton, weights, and deformation must all survive the format.</p>
           <p class="witnesses"><span class="tag">witnesses</span> skins[0].joints names every bone; JOINTS_0/WEIGHTS_0 per primitive with unit sums; weights bit-exact on re-import; deformation matches within 4.8e-07. The mesh must be parented to the armature or the exporter binds by name.</p>
-          <a class="card-link" href="gltf-skin-roundtrip/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="gltf-skin-roundtrip/">View example<span class="sr-only"> gltf-skin-roundtrip</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="sequencer rendering">
-        <a class="card-media" href="vse-gamma-cross/" aria-label="vse-gamma-cross example detail page">
+        <a class="card-media" href="vse-gamma-cross/" tabindex="-1" aria-hidden="true">
           <img src="assets/vse-gamma-cross-hero.webp" alt="vse-gamma-cross — The GAMMA_CROSS fade is not the naive linear mix: it blends in a gamma-0.5 space, so the mid-cross dips below the sRGB lerp." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="vse-gamma-cross/">vse-gamma-cross</a></h2>
           <p class="teaches">The GAMMA_CROSS fade is not the naive linear mix: it blends in a gamma-0.5 space, so the mid-cross dips below the sRGB lerp. Tiny per-frame renders are asserted against the closed form per frame.</p>
           <p class="witnesses"><span class="tag">witnesses</span> out = ((1-t)*sqrt(A) + t*sqrt(B))^2 with t = (frame - start) / duration, never 1 inside the effect. The mid lerp deviation is 0.115; AgX-default sampling poisons the fit (Standard is mandatory).</p>
-          <a class="card-link" href="vse-gamma-cross/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="vse-gamma-cross/">View example<span class="sr-only"> vse-gamma-cross</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="rendering objects">
-        <a class="card-media" href="light-link-studio/" aria-label="light-link-studio example detail page">
+        <a class="card-media" href="light-link-studio/" tabindex="-1" aria-hidden="true">
           <img src="assets/light-link-studio-hero.webp" alt="light-link-studio — One key, one hero: a light linked to a receiver collection lights only the hero, proven by two pixel renders in one pass." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="light-link-studio/">light-link-studio</a></h2>
           <p class="teaches">One key, one hero: a light linked to a receiver collection lights only the hero, proven by two pixel renders in one pass. Linked: 3.6x luminance ratio; unlinked in the same check: the decoy rises 233% while the hero holds at 0.3% drift.</p>
           <p class="witnesses"><span class="tag">witnesses</span> The API is obj.light_linking on the light OBJECT (ld.light_linking is an AttributeError). Luminance is sampled at each sphere&#x27;s projected center; EEVEE honors linking too (probe-measured 3.8x on 4.5.11 EEVEE Next and 5.1.2 EEVEE), Cycles pinned for deterministic samples.</p>
-          <a class="card-link" href="light-link-studio/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="light-link-studio/">View example<span class="sr-only"> light-link-studio</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="bmesh mesh">
-        <a class="card-media" href="collision-hull-proxy/" aria-label="collision-hull-proxy example detail page">
+        <a class="card-media" href="collision-hull-proxy/" tabindex="-1" aria-hidden="true">
           <img src="assets/collision-hull-proxy-hero.webp" alt="collision-hull-proxy — A fire hydrant street prop inside its compound collision shell: four convex pieces hulled by bmesh.ops.convex_hull from a coarse inflated cage." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="collision-hull-proxy/">collision-hull-proxy</a></h2>
           <p class="teaches">A fire hydrant street prop inside its compound collision shell: four convex pieces hulled by bmesh.ops.convex_hull from a coarse inflated cage. The dense render mesh is never hulled - its hull would measure 380 faces, over the 255-face per-piece engine budget. Closed-form plane tests prove containment, convexity, watertightness, outward winding, and Euler characteristic 2 per piece.</p>
           <p class="witnesses"><span class="tag">witnesses</span> A hull of the dense render mesh measures 380 faces, over the 255-face per-piece budget - the cage is a coarser lathe with rings inflated by sec(pi/n) so each cage ring circumscribes its render ring exactly (containment 4.4e-08). Proud details cost cage rows; concave grooves are free under the hull. Piece budgets: body 70, caps 60+60+60, compound 250.</p>
-          <a class="card-link" href="collision-hull-proxy/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="collision-hull-proxy/">View example<span class="sr-only"> collision-hull-proxy</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh attributes">
-        <a class="card-media" href="custom-normals-shade/" aria-label="custom-normals-shade example detail page">
+        <a class="card-media" href="custom-normals-shade/" tabindex="-1" aria-hidden="true">
           <img src="assets/custom-normals-shade-hero.webp" alt="custom-normals-shade — A jerry can prop shaded three ways to prove the post-4.1 shading contract: hard edges are mesh data, landing exactly where the dihedral crosses." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="custom-normals-shade/">custom-normals-shade</a></h2>
           <p class="teaches">A jerry can prop shaded three ways to prove the post-4.1 shading contract: hard edges are mesh data, landing exactly where the dihedral crosses. Face smooth flags plus a sharp_edge attribute, verified against an independently recomputed dihedral test, and per-loop custom normals surviving depsgraph evaluation within their int16 storage quantization (1.407e-04, not float-exact).</p>
           <p class="witnesses"><span class="tag">witnesses</span> use_auto_smooth, use_custom_normals and calc_normals are AttributeError on BOTH 4.5 LTS and 5.1 - AI code still emits them. The legacy shade_auto_smooth operator CANCELS headless on 4.5 (asset load never finishes; mesh untouched; no exception) while 5.1 FINISHES with the Smooth by Angle NODES modifier. By-angle sharp sets match the independent dihedral recompute exactly (188 of 388 edges over 3 meshes).</p>
-          <a class="card-link" href="custom-normals-shade/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="custom-normals-shade/">View example<span class="sr-only"> custom-normals-shade</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="world sky render">
-        <a class="card-media" href="sky-texture-sun-elevation/" aria-label="sky-texture-sun-elevation example detail page">
+        <a class="card-media" href="sky-texture-sun-elevation/" tabindex="-1" aria-hidden="true">
           <img src="assets/sky-texture-sun-elevation-hero.webp" alt="sky-texture-sun-elevation — World ShaderNodeTexSky driving Background Color — the sky contract across 4.5 LTS and 5.1." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="sky-texture-sun-elevation/">sky-texture-sun-elevation</a></h2>
           <p class="teaches">World ShaderNodeTexSky driving Background Color — the sky contract across 4.5 LTS and 5.1. sky_type is NISHITA on 4.5 and MULTIPLE_SCATTERING on 5.1 (NISHITA gone); dust_density exists only on 4.5 (aerosol_density on 5.1). Two tiny Cycles OPEN_EXR zenith probes prove sun_elevation 8 deg to 55 deg brightens zenith (rise 2.25x on 5.1.2, 1.50x on 4.5.11, gate &gt;= 1.25).</p>
           <p class="witnesses"><span class="tag">witnesses</span> AI code still assigns sky_type=&#x27;NISHITA&#x27; and dust_density on 5.1 — both are wrong (NISHITA removed; dust_density is AttributeError; use MULTIPLE_SCATTERING + aerosol_density). A near-black Background Strength alone is not a sky: Sky must link into Background Color. Elevation that does not brighten zenith fails the rise gate.</p>
-          <a class="card-link" href="sky-texture-sun-elevation/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="sky-texture-sun-elevation/">View example<span class="sr-only"> sky-texture-sun-elevation</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="grease-pencil line-art modifiers">
-        <a class="card-media" href="gp-lineart-contour/" aria-label="gp-lineart-contour example detail page">
+        <a class="card-media" href="gp-lineart-contour/" tabindex="-1" aria-hidden="true">
           <img src="assets/gp-lineart-contour-hero.webp" alt="gp-lineart-contour — Grease Pencil LINEART modifier contours via the depsgraph on a faceted crystal." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="gp-lineart-contour/">gp-lineart-contour</a></h2>
           <p class="teaches">Grease Pencil LINEART modifier contours via the depsgraph on a faceted crystal. source_object is load-bearing (clear yields 0 strokes); contour+crease off yields 0; restore recovers 10 strokes / 34 points on both 4.5.11 and 5.1.2. Stroke width: thickness exists on 4.5, AttributeError on 5.1 — portable path is radius.</p>
           <p class="witnesses"><span class="tag">witnesses</span> AI code still sets LINEART.thickness on 5.1 (AttributeError) or hand-draws strokes / enables Freestyle instead of modifiers.new(..., &#x27;LINEART&#x27;). Clearing source_object or leaving contour+crease off silently yields an empty drawing — the check proves both failure modes and recovery.</p>
-          <a class="card-link" href="gp-lineart-contour/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="gp-lineart-contour/">View example<span class="sr-only"> gp-lineart-contour</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="bmesh mesh game-pipeline">
-        <a class="card-media" href="mesh-hygiene-audit/" aria-label="mesh-hygiene-audit example detail page">
+        <a class="card-media" href="mesh-hygiene-audit/" tabindex="-1" aria-hidden="true">
           <img src="assets/mesh-hygiene-audit-hero.webp" alt="mesh-hygiene-audit — Engine-ingest mesh hygiene on an octagonal street valve: no ngons, no loose verts, manifold edges, no zero-area faces, positive signed volume, Euler V-E+F==2." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="mesh-hygiene-audit/">mesh-hygiene-audit</a></h2>
           <p class="teaches">Engine-ingest mesh hygiene on an octagonal street valve: no ngons, no loose verts, manifold edges, no zero-area faces, positive signed volume, Euler V-E+F==2. Dual-panel still shows a through-hole and loose-vert bead derived from live mesh incidence — same brass on both so color alone cannot carry the proof.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Pipelines that skip topology gates ship open boundaries, loose verts, or non-sphere Euler into engine ingest. The still makes the boundary hole and loose vert readable; ngon / zero-area / full winding invert remain check-only.</p>
-          <a class="card-link" href="mesh-hygiene-audit/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="mesh-hygiene-audit/">View example<span class="sr-only"> mesh-hygiene-audit</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="transform parenting game-pipeline">
-        <a class="card-media" href="prop-origin-transform/" aria-label="prop-origin-transform example detail page">
+        <a class="card-media" href="prop-origin-transform/" tabindex="-1" aria-hidden="true">
           <img src="assets/prop-origin-transform-hero.webp" alt="prop-origin-transform — Street pedestal origin-to-base-center + data-API scale apply + matrix_parent_inverse for a flanged conduit accessory." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="prop-origin-transform/">prop-origin-transform</a></h2>
           <p class="teaches">Street pedestal origin-to-base-center + data-API scale apply + matrix_parent_inverse for a flanged conduit accessory. After bake: scale (1,1,1), local min.z==0, world AABB unchanged. Bare parent jumps the accessory off an empty mount socket; MPI keeps it seated.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Bare child.parent = parent teleports accessories off their mounts; skipping view_layer.update() before matrix_world, or leaving non-uniform scale / centered origin, breaks engine ingest placement.</p>
-          <a class="card-link" href="prop-origin-transform/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="prop-origin-transform/">View example<span class="sr-only"> prop-origin-transform</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="bmesh mesh">
-        <a class="card-media" href="soccer-ball-goldberg/" aria-label="soccer-ball-goldberg example detail page">
+        <a class="card-media" href="soccer-ball-goldberg/" tabindex="-1" aria-hidden="true">
           <img src="assets/soccer-ball-goldberg-hero.webp" alt="soccer-ball-goldberg — A soccer ball as a Goldberg polyhedron: a bmesh icosphere truncated at 1/3 per edge, faces ordered by link-topology walks, panels bound by face vertex count." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="soccer-ball-goldberg/">soccer-ball-goldberg</a></h2>
           <p class="teaches">A soccer ball as a Goldberg polyhedron: a bmesh icosphere truncated at 1/3 per edge, faces ordered by link-topology walks, panels bound by face vertex count.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Goldberg invariants are closed forms — counts, degree 3, uniform edges, planar faces, one circumsphere — and panels bind by vertex count, never enumeration order.</p>
-          <a class="card-link" href="soccer-ball-goldberg/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="soccer-ball-goldberg/">View example<span class="sr-only"> soccer-ball-goldberg</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="modifiers depsgraph">
-        <a class="card-media" href="car-mirror-symmetry/" aria-label="car-mirror-symmetry example detail page">
+        <a class="card-media" href="car-mirror-symmetry/" tabindex="-1" aria-hidden="true">
           <img src="assets/car-mirror-symmetry-hero.webp" alt="car-mirror-symmetry — A generic hatchback lofted as one half (14 stations, 9-point rings) and completed by the Mirror modifier, evaluated through the depsgraph." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="car-mirror-symmetry/">car-mirror-symmetry</a></h2>
           <p class="teaches">A generic hatchback lofted as one half (14 stations, 9-point rings) and completed by the Mirror modifier, evaluated through the depsgraph. Wheels and lamps mirror about object origins parked on the symmetry plane.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Mirror is a modifier, not applied data: the original keeps the authored half while the evaluated mesh is the welded, watertight, exactly symmetric whole.</p>
-          <a class="card-link" href="car-mirror-symmetry/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="car-mirror-symmetry/">View example<span class="sr-only"> car-mirror-symmetry</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="attributes mesh rendering">
-        <a class="card-media" href="attribute-domain-shear/" aria-label="attribute-domain-shear example detail page">
+        <a class="card-media" href="attribute-domain-shear/" tabindex="-1" aria-hidden="true">
           <img src="assets/attribute-domain-shear-hero.webp" alt="attribute-domain-shear — POINT vs CORNER color-attribute domains on a shared-vertex pinwheel: CORNER stays exact per face while a naive per-wedge POINT loop shears to the last write at…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="attribute-domain-shear/">attribute-domain-shear</a></h2>
           <p class="teaches">POINT vs CORNER color-attribute domains on a shared-vertex pinwheel: CORNER stays exact per face while a naive per-wedge POINT loop shears to the last write at the hub. Crisp petals versus a smeared swirl in one frame; the measured shear equals the palette closed form.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Authoring per-face colors into a POINT-domain attribute overwrites shared vertices once per neighbor; the last write wins and intended colors shear across every shared vertex.</p>
-          <a class="card-link" href="attribute-domain-shear/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="attribute-domain-shear/">View example<span class="sr-only"> attribute-domain-shear</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="bmesh mesh game-pipeline">
-        <a class="card-media" href="degenerate-bevel-weld/" aria-label="degenerate-bevel-weld example detail page">
+        <a class="card-media" href="degenerate-bevel-weld/" tabindex="-1" aria-hidden="true">
           <img src="assets/degenerate-bevel-weld-hero.webp" alt="degenerate-bevel-weld — Bevel offset &gt;= half the min box dimension collapses the band into zero-area faces — and they ship: a stdlib GLB re-parse counts the degenerate triangles…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="degenerate-bevel-weld/">degenerate-bevel-weld</a></h2>
           <p class="teaches">Bevel offset &gt;= half the min box dimension collapses the band into zero-area faces — and they ship: a stdlib GLB re-parse counts the degenerate triangles crossing the export boundary. Dual tray: rounded edge versus knife seam, markers from live mesh data.</p>
           <p class="witnesses"><span class="tag">witnesses</span> At offset == min_dimension/2 the bevel band pinches to exactly 12 zero-area faces (4 edges x 3 segments); 32 degenerate triangles cross into the exported GLB, waiting for any merge-by-distance to weld them.</p>
-          <a class="card-link" href="degenerate-bevel-weld/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="degenerate-bevel-weld/">View example<span class="sr-only"> degenerate-bevel-weld</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh bmesh game-pipeline instancing">
-        <a class="card-media" href="modular-kit-snap/" aria-label="modular-kit-snap example detail page">
+        <a class="card-media" href="modular-kit-snap/" tabindex="-1" aria-hidden="true">
           <img src="assets/modular-kit-snap-hero.webp" alt="modular-kit-snap — A tiling corridor kit whose open-end boundary verts snap to the tile grid, so instances at 4 m multiples join with zero gap or overlap." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="modular-kit-snap/">modular-kit-snap</a></h2>
           <p class="teaches">A tiling corridor kit whose open-end boundary verts snap to the tile grid, so instances at 4 m multiples join with zero gap or overlap.</p>
           <p class="witnesses"><span class="tag">witnesses</span> 16 boundary verts on x∈{0,4} within 1e-6 m, linked-duplicate joint deviation 0.0, bbox == declared tile; unsnapped probe fails at 3e-3 m.</p>
-          <a class="card-link" href="modular-kit-snap/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="modular-kit-snap/">View example<span class="sr-only"> modular-kit-snap</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="uv game-pipeline render">
-        <a class="card-media" href="lightmap-uv-channel/" aria-label="lightmap-uv-channel example detail page">
+        <a class="card-media" href="lightmap-uv-channel/" tabindex="-1" aria-hidden="true">
           <img src="assets/lightmap-uv-channel-hero.webp" alt="lightmap-uv-channel — A market cart carrying the two-channel UV contract for baked lighting: UV0 untouched, UVLight packed with no overlaps and a respected margin." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="lightmap-uv-channel/">lightmap-uv-channel</a></h2>
           <p class="teaches">A market cart carrying the two-channel UV contract for baked lighting: UV0 untouched, UVLight packed with no overlaps and a respected margin.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Per-part UVMap/UVLight with active vs active_render pinned (ops clear both flags), UV0 drift 0.0, 3680 islands with 0 SAT overlaps, min island distance 0.00401.</p>
-          <a class="card-link" href="lightmap-uv-channel/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="lightmap-uv-channel/">View example<span class="sr-only"> lightmap-uv-channel</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh transforms game-pipeline instancing">
-        <a class="card-media" href="socket-attach-points/" aria-label="socket-attach-points example detail page">
+        <a class="card-media" href="socket-attach-points/" tabindex="-1" aria-hidden="true">
           <img src="assets/socket-attach-points-hero.webp" alt="socket-attach-points — A survey drone whose named SKT_ empties are the spawn contract: modules parented with an identity local transform seat exactly on their mount pads." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="socket-attach-points/">socket-attach-points</a></h2>
           <p class="teaches">A survey drone whose named SKT_ empties are the spawn contract: modules parented with an identity local transform seat exactly on their mount pads.</p>
           <p class="witnesses"><span class="tag">witnesses</span> 7 socket world matrices within 1.788e-07 of the authored transform, socket +Z == the pad&#x27;s Newell normal (1.794e-07), seating offset 0.0; the no-parent-inverse probe jumps 0.690128 m.</p>
-          <a class="card-link" href="socket-attach-points/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="socket-attach-points/">View example<span class="sr-only"> socket-attach-points</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh attributes game-pipeline render">
-        <a class="card-media" href="vertex-color-ao/" aria-label="vertex-color-ao example detail page">
+        <a class="card-media" href="vertex-color-ao/" tabindex="-1" aria-hidden="true">
           <img src="assets/vertex-color-ao-hero.webp" alt="vertex-color-ao — A stone well carrying baked ambient occlusion in a colour attribute, with the bake held to the closed-form hemisphere integral rather than to a captured value." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="vertex-color-ao/">vertex-color-ao</a></h2>
           <p class="teaches">A stone well carrying baked ambient occlusion in a colour attribute, with the bake held to the closed-form hemisphere integral rather than to a captured value.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Integrator matches 1 - 0.5(1 - 1/sqrt(1+k^2)) to 6.760e-04, unoccluded plate exactly 1.0, FLOAT_COLOR exact vs BYTE_COLOR sRGB-quantised (model agreement 3.189e-07), evaluated deviation 0.0.</p>
-          <a class="card-link" href="vertex-color-ao/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="vertex-color-ao/">View example<span class="sr-only"> vertex-color-ao</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="context properties">
-        <a class="card-media" href="cross-version-property-delete/" aria-label="cross-version-property-delete example detail page">
+        <a class="card-media" href="cross-version-property-delete/" tabindex="-1" aria-hidden="true">
           <img src="assets/cross-version-property-delete-hero.webp" alt="cross-version-property-delete — Custom ID properties are removed with del, not property_unset." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="cross-version-property-delete/">cross-version-property-delete</a></h2>
           <p class="teaches">Custom ID properties are removed with del, not property_unset. The IDs are built through bpy.data.objects.new so the check does not depend on active_object.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Factory-empty has no active_object; property_unset raises TypeError and leaves the key; del removes it (clear_has=False). --skip-delete and --unset-instead exit 7.</p>
-          <a class="card-link" href="cross-version-property-delete/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="cross-version-property-delete/">View example<span class="sr-only"> cross-version-property-delete</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="depsgraph export">
-        <a class="card-media" href="usd-export-evaluation-mode/" aria-label="usd-export-evaluation-mode example detail page">
+        <a class="card-media" href="usd-export-evaluation-mode/" tabindex="-1" aria-hidden="true">
           <img src="assets/usd-export-evaluation-mode-hero.webp" alt="usd-export-evaluation-mode — The USD exporter evaluation_mode chooses viewport versus render modifier quality." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="usd-export-evaluation-mode/">usd-export-evaluation-mode</a></h2>
           <p class="teaches">The USD exporter evaluation_mode chooses viewport versus render modifier quality. TESSELLATE makes the split observable; BEST_MATCH writes the cage and the mode is silent.</p>
           <p class="witnesses"><span class="tag">witnesses</span> TESSELLATE+VIEWPORT writes 26/24; TESSELLATE+RENDER writes 98/96 subdivisionScheme=none; BEST_MATCH writes the 8-vert catmullClark cage. --evaluation-mode VIEWPORT and --subdivision BEST_MATCH exit 4.</p>
-          <a class="card-link" href="usd-export-evaluation-mode/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="usd-export-evaluation-mode/">View example<span class="sr-only"> usd-export-evaluation-mode</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="geometry-nodes">
-        <a class="card-media" href="gn-zone-iterate/" aria-label="gn-zone-iterate example detail page">
+        <a class="card-media" href="gn-zone-iterate/" tabindex="-1" aria-hidden="true">
           <img src="assets/gn-zone-iterate-hero.webp" alt="gn-zone-iterate — Repeat Zone and For Each Element only iterate after pair_with_output." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="gn-zone-iterate/">gn-zone-iterate</a></h2>
           <p class="teaches">Repeat Zone and For Each Element only iterate after pair_with_output. Evaluated cube counts follow 8 times (1+N) and 8 times P, not tree structure.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Repeat 32/24 verts/faces with X-centers at k*1.2; For Each 48/36 with Z-centers at i*0.6+0.21. Unpaired evaluates empty; For Each main Geometry passthrough is 6 verts.</p>
-          <a class="card-link" href="gn-zone-iterate/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="gn-zone-iterate/">View example<span class="sr-only"> gn-zone-iterate</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh">
-        <a class="card-media" href="bake-normal-high-to-low/" aria-label="bake-normal-high-to-low example detail page">
+        <a class="card-media" href="bake-normal-high-to-low/" tabindex="-1" aria-hidden="true">
           <img src="assets/bake-normal-high-to-low-hero.webp" alt="bake-normal-high-to-low — A collapse-decimated hatch plate receiving a Cycles cage-baked tangent normal map from a ribbed high-poly source" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="bake-normal-high-to-low/">bake-normal-high-to-low</a></h2>
           <p class="teaches">A collapse-decimated hatch plate receiving a Cycles cage-baked tangent normal map from a ribbed high-poly source</p>
           <p class="witnesses"><span class="tag">witnesses</span> Statistical gates not byte-identity: detail frac 0.7211 / MAD 0.09356 vs flat 0.0000 / 0.00277; --flat-source exits 5; type=NORMAL not bake_type; RNA identical on 4.5.11, 5.1.2, 5.2.1</p>
-          <a class="card-link" href="bake-normal-high-to-low/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="bake-normal-high-to-low/">View example<span class="sr-only"> bake-normal-high-to-low</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="geometry-nodes">
-        <a class="card-media" href="gn-socket-rename/" aria-label="gn-socket-rename example detail page">
+        <a class="card-media" href="gn-socket-rename/" tabindex="-1" aria-hidden="true">
           <img src="assets/gn-socket-rename-hero.webp" alt="gn-socket-rename — Compare and Random Value socket identifiers collapsed onto reused names in 5.2; enabled-name lookup wires on 4.5, 5.1, and 5.2" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="gn-socket-rename/">gn-socket-rename</a></h2>
           <p class="teaches">Compare and Random Value socket identifiers collapsed onto reused names in 5.2; enabled-name lookup wires on 4.5, 5.1, and 5.2</p>
           <p class="witnesses"><span class="tag">witnesses</span> A_INT and Min_001 present on 4.5.11 and 5.1.2, absent on 5.2.1. --legacy-ids exits 5 only on 5.2. Evaluated 16 verts and gauge_h 1.80 on eight column verts; the still draws the column graduations from gauge_h, so an unwired Random Value renders a blank column</p>
-          <a class="card-link" href="gn-socket-rename/">View example <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="gn-socket-rename/">View example<span class="sr-only"> gn-socket-rename</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="shipping-crate/" aria-label="shipping-crate showcase piece detail page">
+        <a class="card-media" href="shipping-crate/" tabindex="-1" aria-hidden="true">
           <img src="assets/shipping-crate-hero.webp" alt="shipping-crate — A procedural shipping crate through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="shipping-crate/">shipping-crate</a></h2>
           <p class="teaches">A procedural shipping crate through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 2508 tris, two materials with 1170 wood and 280 metal faces, UVs in 0..1 with zero AABB overlap, outer AABB 1.146×0.726×0.612 m, grounded zmin, 3 skids, handle-end and slat-post join 0, mesh hygiene all zero, LOD ratios in band (5.2 COLLAPSE leaner on LOD2), convex collider 76 tris, non-empty glTF. --skip-decimate exits 9; --stray-vert 15; --lift-z/--short-skids 16; --float-handle 17; --omit-slats 18.</p>
-          <a class="card-link" href="shipping-crate/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="shipping-crate/">View showcase piece<span class="sr-only"> shipping-crate</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="stone-well/" aria-label="stone-well showcase piece detail page">
+        <a class="card-media" href="stone-well/" tabindex="-1" aria-hidden="true">
           <img src="assets/stone-well-hero.webp" alt="stone-well — A procedural stone well through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="stone-well/">stone-well</a></h2>
           <p class="teaches">A procedural stone well through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 9380 tris, three materials with face floors, UVs in 0..1 with zero AABB overlap, outer AABB 1.312×1.312×1.761 m, LOD ratios in band, convex collider 346 tris, hygiene zero (loose, non-manifold, doubles, n-gons), zero coplanar cross-shell face pairs, all 12 bottom-course stones on the floor, each post tenoned 18 mm into the measured coping and standing under a roof hip corner, the bucket hanging 0.10 m clear of the coping, grounded zmin, non-empty glTF. --stand-posts exits 15 on the z-fight budget; --float-stone exits 16 on the named-support budget; --shallow-tenon and --drop-bucket exit 18; --turn-posts exits 19 on post placement; --skip-decimate exits 9 on the LOD1 ratio budget; --lift-z exits 16 on the grounded budget.</p>
-          <a class="card-link" href="stone-well/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="stone-well/">View showcase piece<span class="sr-only"> stone-well</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="wooden-barrel/" aria-label="wooden-barrel showcase piece detail page">
+        <a class="card-media" href="wooden-barrel/" tabindex="-1" aria-hidden="true">
           <img src="assets/wooden-barrel-hero.webp" alt="wooden-barrel — A procedural wine-cask with croze-seated heads and chord-lofted hoops through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="wooden-barrel/">wooden-barrel</a></h2>
           <p class="teaches">A procedural wine-cask with croze-seated heads and chord-lofted hoops through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 7216 tris, two materials with 2512 wood and 1440 metal faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.722×0.714×0.880 m, 20 grounded staves, hoop bite 0.003 m, head-croze gap 0.007 m, LOD ratios in band, convex collider 238 tris, non-empty glTF. --skip-decimate exits 9; --round-band exits 18 on the hoop-seat budget.</p>
-          <a class="card-link" href="wooden-barrel/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="wooden-barrel/">View showcase piece<span class="sr-only"> wooden-barrel</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="campfire/" aria-label="campfire showcase piece detail page">
+        <a class="card-media" href="campfire/" tabindex="-1" aria-hidden="true">
           <img src="assets/campfire-hero.webp" alt="campfire — A procedural campfire through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="campfire/">campfire</a></h2>
           <p class="teaches">A procedural campfire through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 2200 tris, three materials with 216 wood, 48 ash and 1304 stone faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.807×0.808×0.404 m, LOD ratios in band, convex collider 198 tris, hygiene 0, 14 grounded bottom stones, teepee kiss 0.00001 m, course seat 0, non-empty glTF. --skip-decimate exits 9; --stray-vert 15; --lift-z/--short-stones 16; --float-logs 17; --gap-courses 18.</p>
-          <a class="card-link" href="campfire/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="campfire/">View showcase piece<span class="sr-only"> campfire</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="market-stall/" aria-label="market-stall showcase piece detail page">
+        <a class="card-media" href="market-stall/" tabindex="-1" aria-hidden="true">
           <img src="assets/market-stall-hero.webp" alt="market-stall — A procedural timber market stall through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="market-stall/">market-stall</a></h2>
           <p class="teaches">A procedural timber market stall through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 4324 tris, three materials with 34 faces per awning stripe slot, UVs in 0..1 with zero AABB overlap, outer AABB 1.389×1.011×1.740 m, grounded zmin, 4 wrap feet, brace-counter overlap 0, awning seat 4 mm, post plumb 0, LOD ratios in band, convex collider 58 tris, non-empty glTF. Hygiene all zero. --skip-decimate exits 9; --stray-vert 15; --lift-z/--short-feet 16; --low-brace 17; --float-awning 18; --rake-posts 19.</p>
-          <a class="card-link" href="market-stall/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="market-stall/">View showcase piece<span class="sr-only"> market-stall</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="street-lantern/" aria-label="street-lantern showcase piece detail page">
+        <a class="card-media" href="street-lantern/" tabindex="-1" aria-hidden="true">
           <img src="assets/street-lantern-hero.webp" alt="street-lantern — A procedural hanging street lantern through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="street-lantern/">street-lantern</a></h2>
           <p class="teaches">A procedural hanging street lantern through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 3338 tris, three materials with 1530 metal, 24 glass and 209 brass faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.300×0.786×1.287 m, zmin 0, hygiene 0, brace BVH gap 0, hanger-roof gap −1 mm, post 0.100×1.120 m plumb 0, LOD ratios in band (5.2 COLLAPSE 2 tris leaner on LOD2), convex collider 78 tris, non-empty glTF. --skip-decimate exits 9; --stray-vert 15; --lift-z 16; --float-brace 17; --sink-arm 18; --rake-post 19.</p>
-          <a class="card-link" href="street-lantern/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="street-lantern/">View showcase piece<span class="sr-only"> street-lantern</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="treasure-chest/" aria-label="treasure-chest showcase piece detail page">
+        <a class="card-media" href="treasure-chest/" tabindex="-1" aria-hidden="true">
           <img src="assets/treasure-chest-hero.webp" alt="treasure-chest — A procedural iron-bound chest with a lofted barrel-vault lid, U-wrap bands, and hinge knuckles through UVs, bake, LOD, collider, and Unity glTF, asserting…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="treasure-chest/">treasure-chest</a></h2>
           <p class="teaches">A procedural iron-bound chest with a lofted barrel-vault lid, U-wrap bands, and hinge knuckles through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 3852 tris, two materials with 1608 wood and 318 metal faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.764×0.542×0.691 m, LOD ratios in band, convex collider 176 tris, non-empty glTF. Hygiene all zero, four feet at zmin 0, lid-knuckle to hinge barrel 7 mm, band-wall gap 0. --float-hinge exits 17 on the hinge join; --narrow-bands exits 18 on the band seat.</p>
-          <a class="card-link" href="treasure-chest/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="treasure-chest/">View showcase piece<span class="sr-only"> treasure-chest</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="terrain-scatter/" aria-label="terrain-scatter showcase piece detail page">
+        <a class="card-media" href="terrain-scatter/" tabindex="-1" aria-hidden="true">
           <img src="assets/terrain-scatter-hero.webp" alt="terrain-scatter — A Geometry Nodes hill tile with seated icosphere scatter through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="terrain-scatter/">terrain-scatter</a></h2>
           <p class="teaches">A Geometry Nodes hill tile with seated icosphere scatter through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 1758 tris, two materials with 720 stone faces, UVs in 0..1 with zero AABB overlap, outer AABB 1.800×1.800×0.552 m, grounded zmin, 9 stones of ≥80 faces seated on sampled dirt Z (offset −35 mm, floor zmin 0.113 m), LOD ratios in band, convex collider 81 tris, hygiene zero, non-empty glTF. --skip-decimate exits 9; --stray-vert 15; --lift-z 16; --poke-rock 17; --float-rocks 18; --box-rocks 19.</p>
-          <a class="card-link" href="terrain-scatter/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="terrain-scatter/">View showcase piece<span class="sr-only"> terrain-scatter</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="fence-kit/" aria-label="fence-kit showcase piece detail page">
+        <a class="card-media" href="fence-kit/" tabindex="-1" aria-hidden="true">
           <img src="assets/fence-kit-hero.webp" alt="fence-kit — A procedural post-and-rail fence section whose brace is an oriented box between named post stations, through UVs, bake, LOD, collider, and Unity glTF…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="fence-kit/">fence-kit</a></h2>
           <p class="teaches">A procedural post-and-rail fence section whose brace is an oriented box between named post stations, through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 1092 tris, two materials with 156 metal and 390 wood faces, UVs in 0..1 with zero AABB overlap, outer AABB 1.624×0.134×1.232 m, grounded zmin, 2 iron shoes, brace-to-post gap 2.4 mm on both posts, rail-to-post gap 0.93 mm, rail span 1.390 m, LOD ratios in band (5.2 COLLAPSE leaner on LOD2), convex collider 32 tris, hygiene all zero, non-empty glTF. --skip-decimate exits 9; --stray-vert 15; --lift-z/--short-shoes 16; --short-brace 17; --gap-rails 18; --long-rails 19.</p>
-          <a class="card-link" href="fence-kit/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="fence-kit/">View showcase piece<span class="sr-only"> fence-kit</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="watchtower/" aria-label="watchtower showcase piece detail page">
+        <a class="card-media" href="watchtower/" tabindex="-1" aria-hidden="true">
           <img src="assets/watchtower-hero.webp" alt="watchtower — A procedural timber watchtower through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="watchtower/">watchtower</a></h2>
           <p class="teaches">A procedural timber watchtower through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 6408 tris, three materials with 300 metal and 126 roof faces, UVs in 0..1 with zero AABB overlap, outer AABB 1.594×1.594×2.973 m, grounded zmin, 4 iron shoes, rail engage 18 mm, collar standoff 2 mm, post plumb 0, LOD ratios in band (5.2 COLLAPSE leaner on LOD2), convex collider 150 tris, non-empty glTF. Hygiene all zero. --skip-decimate exits 9; --stray-vert 15; --lift-z/--short-shoes 16; --short-rails 17; --float-band 18; --rake-posts 19.</p>
-          <a class="card-link" href="watchtower/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="watchtower/">View showcase piece<span class="sr-only"> watchtower</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="cart/" aria-label="cart showcase piece detail page">
+        <a class="card-media" href="cart/" tabindex="-1" aria-hidden="true">
           <img src="assets/cart-hero.webp" alt="cart — A procedural two-wheel wooden cart through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="cart/">cart</a></h2>
           <p class="teaches">A procedural two-wheel wooden cart through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 2856 tris, two materials with metal and wood face floors, UVs in 0..1 with zero AABB overlap, outer AABB 1.539×0.749×0.640 m, LOD ratios in band, convex collider 154 tris, hygiene zero (loose, non-manifold, doubles, n-gons), zero coplanar cross-shell face pairs, both tyres grounded, tyre seat depth in band over 48 angular stations, the two wheels mirrored within 5e-5 m, grounded zmin, non-empty glTF. --flush-tyre exits 15 on the z-fight budget; --sink-tyre exits 18 on the tyre seat band; --float-wheel exits 16 on the named-support budget; --skew-wheel exits 19 on the wheel mirror; --skip-decimate exits 9 on the LOD1 ratio budget; --lift-z exits 16 on the grounded budget.</p>
-          <a class="card-link" href="cart/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="cart/">View showcase piece<span class="sr-only"> cart</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="park-bench/" aria-label="park-bench showcase piece detail page">
+        <a class="card-media" href="park-bench/" tabindex="-1" aria-hidden="true">
           <img src="assets/park-bench-hero.webp" alt="park-bench — A procedural wrought-iron park bench with tangent tube scroll feet through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="park-bench/">park-bench</a></h2>
           <p class="teaches">A procedural wrought-iron park bench with tangent tube scroll feet through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 2520 tris, two materials with 540 metal and 756 wood faces, UVs in 0..1 with zero AABB overlap, outer AABB 1.295×0.632×0.884 m, grounded zmin, 4 named toes, stretcher gap 1.2 mm, slat gap 0.3 mm, seat span 1.272 m, LOD ratios in band, convex collider 82 tris, hygiene zero, non-empty glTF. --skip-decimate exits 9; --stray-vert 15; --lift-z/--short-feet 16; --float-stretcher 17; --gap-slats 18; --narrow-seat 19.</p>
-          <a class="card-link" href="park-bench/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="park-bench/">View showcase piece<span class="sr-only"> park-bench</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="wheelbarrow/" aria-label="wheelbarrow showcase piece detail page">
+        <a class="card-media" href="wheelbarrow/" tabindex="-1" aria-hidden="true">
           <img src="assets/wheelbarrow-hero.webp" alt="wheelbarrow — A procedural wooden wheelbarrow through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="wheelbarrow/">wheelbarrow</a></h2>
           <p class="teaches">A procedural wooden wheelbarrow through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 2500 tris, two materials with 1094 wood and 190 metal faces, UVs in 0..1 with zero AABB overlap, outer AABB 1.556×0.630×0.572 m, zmin 0, hygiene 0, wall-floor seat 12 mm, spoke clearance 40 mm, LOD ratios in band (5.2 COLLAPSE leaner on LOD2), convex collider 90 tris, non-empty glTF. --skip-decimate exits 9 on LOD1; --stray-vert exits 15 on hygiene; --lift-z / --short-legs exit 16 on grounded; --fat-spokes / --float-walls exit 17 on joint fit; --pipe-rim exits 18 on tread aspect.</p>
-          <a class="card-link" href="wheelbarrow/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="wheelbarrow/">View showcase piece<span class="sr-only"> wheelbarrow</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="anvil/" aria-label="anvil showcase piece detail page">
+        <a class="card-media" href="anvil/" tabindex="-1" aria-hidden="true">
           <img src="assets/anvil-hero.webp" alt="anvil — A procedural blacksmith anvil on a timber stump through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="anvil/">anvil</a></h2>
           <p class="teaches">A procedural blacksmith anvil on a timber stump through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 2988 tris, two materials with 1040 wood and 822 metal faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.621×0.414×0.489 m, LOD ratios in band, convex collider 134 tris, hygiene 0, 16 grounded staves, hoop bite 0.003 m, foot-on-head gap 0.003 m, non-empty glTF. --skip-decimate exits 9; --stray-vert 15; --lift-z/--short-staves 16; --float-anvil 17; --round-band 18.</p>
-          <a class="card-link" href="anvil/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="anvil/">View showcase piece<span class="sr-only"> anvil</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="water-trough/" aria-label="water-trough showcase piece detail page">
+        <a class="card-media" href="water-trough/" tabindex="-1" aria-hidden="true">
           <img src="assets/water-trough-hero.webp" alt="water-trough — A procedural watertight water trough through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="water-trough/">water-trough</a></h2>
           <p class="teaches">A procedural watertight water trough through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 3700 tris, three materials with 1674 wood, 156 metal and 29 water faces, UVs in 0..1 with zero AABB overlap, outer AABB 1.093×0.552×0.504 m, zmin 0, four shoes planted, U end-cap rim span 5 mm, strap BVH gap 0, water-hull gap 2.6 mm, hull 1.045×0.466 m, LOD ratios in band, convex collider 64 tris, non-empty glTF. --skip-decimate exits 9; --stray-vert 15; --lift-z/--short-legs 16; --box-ends 17; --float-strap 18; --narrow-hull 19.</p>
-          <a class="card-link" href="water-trough/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="water-trough/">View showcase piece<span class="sr-only"> water-trough</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="hitching-post/" aria-label="hitching-post showcase piece detail page">
+        <a class="card-media" href="hitching-post/" tabindex="-1" aria-hidden="true">
           <img src="assets/hitching-post-hero.webp" alt="hitching-post — A procedural hitching post (eaved cap, one rail, cup shoe, rings hung through eyes) through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="hitching-post/">hitching-post</a></h2>
           <p class="teaches">A procedural hitching post (eaved cap, one rail, cup shoe, rings hung through eyes) through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 1680 tris, two materials with 114 wood and 742 metal faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.500×0.149×1.246 m, zmin 0, hygiene and coplanar pairs 0, post seated at z 0.010, ring centerline error 0, LOD ratios in band, convex collider 80 tris, non-empty glTF. --skip-decimate exits 9; --stray-vert and --twin-sole exit 15; --lift-z exits 16; --clip-ring exits 18; --short-post exits 19.</p>
-          <a class="card-link" href="hitching-post/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="hitching-post/">View showcase piece<span class="sr-only"> hitching-post</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="grindstone/" aria-label="grindstone showcase piece detail page">
+        <a class="card-media" href="grindstone/" tabindex="-1" aria-hidden="true">
           <img src="assets/grindstone-hero.webp" alt="grindstone — A procedural grindstone on a timber trestle through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="grindstone/">grindstone</a></h2>
           <p class="teaches">A procedural grindstone on a timber trestle through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 928 tris, three materials with 216 wood / 160 stone / 180 metal faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.710×0.419×0.610 m, zmin 0, hygiene 0, four shoes planted, trough seated in the sills, stone dip 26 mm, LOD ratios in band (5.2 COLLAPSE leaner on LOD2), convex collider 198 tris, non-empty glTF. --skip-decimate exits 9 on LOD1; --stray-vert exits 15 on hygiene; --lift-z / --short-legs exit 16 on grounded; --float-crank / --float-legs exit 17 on joint fit; --no-dip / --narrow-trough exit 18 on seat.</p>
-          <a class="card-link" href="grindstone/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="grindstone/">View showcase piece<span class="sr-only"> grindstone</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="hand-pump/" aria-label="hand-pump showcase piece detail page">
+        <a class="card-media" href="hand-pump/" tabindex="-1" aria-hidden="true">
           <img src="assets/hand-pump-hero.webp" alt="hand-pump — A procedural village hand pump whose gooseneck is a 6-gon tube from the lower-column radius, through UVs, bake, LOD, collider, and Unity glTF, asserting…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="hand-pump/">hand-pump</a></h2>
           <p class="teaches">A procedural village hand pump whose gooseneck is a 6-gon tube from the lower-column radius, through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 1064 tris, two materials with 564 metal and 144 wood faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.610×0.382×1.052 m, grounded zmin, spout-to-column gap 2.7 mm, flange-to-plinth gap 6.0 mm, column radius 62 mm, LOD ratios in band, convex collider 114 tris, hygiene all zero, non-empty glTF. --skip-decimate exits 9; --stray-vert 15; --lift-z 16; --float-spout 17; --float-flange 18; --skinny-col 19.</p>
-          <a class="card-link" href="hand-pump/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="hand-pump/">View showcase piece<span class="sr-only"> hand-pump</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="signpost/" aria-label="signpost showcase piece detail page">
+        <a class="card-media" href="signpost/" tabindex="-1" aria-hidden="true">
           <img src="assets/signpost-hero.webp" alt="signpost — A procedural timber fingerboard signpost through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="signpost/">signpost</a></h2>
           <p class="teaches">A procedural timber fingerboard signpost through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 376 tris, three materials with 108 metal, 22 board and 60 wood faces, UVs in 0..1 with zero AABB overlap, outer AABB 1.260×0.142×1.551 m at zmin 0, LOD ratios in band (5.2 COLLAPSE leaner on LOD1/LOD2), convex collider 52 tris, non-empty glTF. Hygiene all zero. Board-to-post gap 5 mm, strap gap 3 mm, board AABB Y 28 mm. --skip-decimate exits 9; --stray-vert 15; --lift-z / --short-shoe 16; --gap-board 17; --float-strap 18; --yaw-boards 19.</p>
-          <a class="card-link" href="signpost/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="signpost/">View showcase piece<span class="sr-only"> signpost</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="chopping-block/" aria-label="chopping-block showcase piece detail page">
+        <a class="card-media" href="chopping-block/" tabindex="-1" aria-hidden="true">
           <img src="assets/chopping-block-hero.webp" alt="chopping-block — A procedural log-round chopping block with a riveted iron hoop and a felling axe buried in the sawn face, through UVs, bake, LOD, collider, and Unity glTF…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="chopping-block/">chopping-block</a></h2>
           <p class="teaches">A procedural log-round chopping block with a riveted iron hoop and a felling axe buried in the sawn face, through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 1800 tris, four materials with 180 bark / 216 grain / 404 metal / 176 haft faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.526 x 0.526 x 1.006 m, LOD ratios in band, convex collider 538 tris, non-empty glTF. Hygiene: zero non-manifold edges, loose geometry, doubles, zero-area faces, n-gons and coplanar disjoint face pairs, grounded at zmin 0, log plumb to 1e-7, oval haft 1.35 wide-to-thick. Joint fit: six shells, 18.0 mm haft clearance in the eye, 78.7 mm bit bury, hoop biting 3.7-4.2 mm into the log on every segment, two lap rivets seated 1.50 and 1.54 mm. --fat-haft exits 17 on eye clearance; --round-band and --float-rivets exit 18 on their seats; --round-haft exits 19 on the haft section.</p>
-          <a class="card-link" href="chopping-block/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="chopping-block/">View showcase piece<span class="sr-only"> chopping-block</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="wooden-bucket/" aria-label="wooden-bucket showcase piece detail page">
+        <a class="card-media" href="wooden-bucket/" tabindex="-1" aria-hidden="true">
           <img src="assets/wooden-bucket-hero.webp" alt="wooden-bucket — A procedural coopered pail with a croze-seated floor, chord-lofted hoops, and a round bail through the ear rings through UVs, bake, LOD, collider, and Unity…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="wooden-bucket/">wooden-bucket</a></h2>
           <p class="teaches">A procedural coopered pail with a croze-seated floor, chord-lofted hoops, and a round bail through the ear rings through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 4872 tris, three materials with 1424 wood, 1020 metal, and 208 rope faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.383×0.346×0.527 m, 16 grounded staves, hoop bite 0.0025 m, bail-ear gap 0.0013 m, LOD ratios in band, convex collider 302 tris, non-empty glTF. --skip-decimate exits 9; --float-handle exits 17 on the bail-ear budget.</p>
-          <a class="card-link" href="wooden-bucket/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="wooden-bucket/">View showcase piece<span class="sr-only"> wooden-bucket</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="wall-torch/" aria-label="wall-torch showcase piece detail page">
+        <a class="card-media" href="wall-torch/" tabindex="-1" aria-hidden="true">
           <img src="assets/wall-torch-hero.webp" alt="wall-torch — A procedural wall-mounted torch sconce with a dressed stone plaque, iron bracket, wooden haft, and emissive flame through UVs, bake, LOD, collider, and Unity…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="wall-torch/">wall-torch</a></h2>
           <p class="teaches">A procedural wall-mounted torch sconce with a dressed stone plaque, iron bracket, wooden haft, and emissive flame through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 1528 tris, four materials with 540 stone, 228 metal and 78 flame faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.304×0.293×0.424 m at zmin 0, LOD ratios in band, convex collider 60 tris, non-empty glTF. Hygiene all zero. Arm-to-cup gap 0.87 mm, plate-to-plaque gap 4 mm, plaque width 0.280 m. --skip-decimate exits 9; --stray-vert 15; --lift-z 16; --float-arm 17; --float-plate 18; --skinny-plaque 19.</p>
-          <a class="card-link" href="wall-torch/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="wall-torch/">View showcase piece<span class="sr-only"> wall-torch</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="tavern-stool/" aria-label="tavern-stool showcase piece detail page">
+        <a class="card-media" href="tavern-stool/" tabindex="-1" aria-hidden="true">
           <img src="assets/tavern-stool-hero.webp" alt="tavern-stool — A procedural tavern stool with a lathed seat, turned splayed legs, tenoned stretchers, and iron ferrule cups through UVs, bake, LOD, collider, and Unity glTF…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="tavern-stool/">tavern-stool</a></h2>
           <p class="teaches">A procedural tavern stool with a lathed seat, turned splayed legs, tenoned stretchers, and iron ferrule cups through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 2528 tris, two materials with 1168 wood and 256 metal faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.340×0.340×0.470 m, LOD ratios in band, convex collider 396 tris, non-empty glTF. Hygiene all zero, four ferrule cups at zmin 0, stretcher-leg gap 0, ferrule clearance −1.25 mm. --float-stretchers exits 17 on the stretcher join; --pipe-ferrule exits 18 on the ferrule bite band.</p>
-          <a class="card-link" href="tavern-stool/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="tavern-stool/">View showcase piece<span class="sr-only"> tavern-stool</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="iron-cauldron/" aria-label="iron-cauldron showcase piece detail page">
+        <a class="card-media" href="iron-cauldron/" tabindex="-1" aria-hidden="true">
           <img src="assets/iron-cauldron-hero.webp" alt="iron-cauldron — A procedural hanging iron cauldron with a bulged open pot, bail, and timber tripod through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="iron-cauldron/">iron-cauldron</a></h2>
           <p class="teaches">A procedural hanging iron cauldron with a bulged open pot, bail, and timber tripod through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 3664 tris, two materials with 224 wood and 1768 metal faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.987×0.961×0.860 m, pot–leg clearance 0.046 m, 3 coaxial ferrules at zmin 0, ferrule bite −0.00185 m, hook-bail join 0, mesh hygiene all zero, LOD ratios in band, convex collider 250 tris, non-empty glTF. --skip-decimate exits 9; --stray-vert 15; --lift-z/--short-legs 16; --float-hook 17; --pipe-ferrule 18.</p>
-          <a class="card-link" href="iron-cauldron/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="iron-cauldron/">View showcase piece<span class="sr-only"> iron-cauldron</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="wooden-ladder/" aria-label="wooden-ladder showcase piece detail page">
+        <a class="card-media" href="wooden-ladder/" tabindex="-1" aria-hidden="true">
           <img src="assets/wooden-ladder-hero.webp" alt="wooden-ladder — A procedural timber ladder with raked tapered stiles, six turned rungs, ferrule caps, and level shoe plates through UVs, bake, LOD, collider, and Unity glTF…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="wooden-ladder/">wooden-ladder</a></h2>
           <p class="teaches">A procedural timber ladder with raked tapered stiles, six turned rungs, ferrule caps, and level shoe plates through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 2536 tris, two materials with 612 wood and 736 metal faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.490×0.376×1.487 m, zmin 0, hygiene and coplanar pairs 0, tenon clearance 8 mm, shoe bite 20 mm, LOD ratios in band, convex collider 24 tris, non-empty glTF. --skip-decimate exits 9; --stray-vert and --twin-sole exit 15; --lift-z exits 16; --fat-rungs exits 17; --short-stile exits 18.</p>
-          <a class="card-link" href="wooden-ladder/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="wooden-ladder/">View showcase piece<span class="sr-only"> wooden-ladder</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="hay-bale/" aria-label="hay-bale showcase piece detail page">
+        <a class="card-media" href="hay-bale/" tabindex="-1" aria-hidden="true">
           <img src="assets/hay-bale-hero.webp" alt="hay-bale — A bound hay bale whose twine belts follow the loaf&#x27;s own raycast cross-section, asserting recomputed geometry budgets, not an API contract." loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="hay-bale/">hay-bale</a></h2>
           <p class="teaches">A bound hay bale whose twine belts follow the loaf&#x27;s own raycast cross-section, asserting recomputed geometry budgets, not an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 2012 tris, two materials with 712 hay and 304 twine faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.921x0.530x0.409 m, zmin 0, hygiene and cross-shell z-fight 0, 5 shells, each belt wrapping under the loaf at zmin 2.6 mm, banded belt seat depth 4.0-16.8 mm over 20/20 stations on both belts, belt mirror error 0, cinch depth 14.2 mm, LOD ratios in band, convex collider 156 tris, non-empty glTF. --skip-decimate exits 9; --stray-vert 15; --lift-z and --float-belts 16; --slack-belt 18; --skew-belt 19.</p>
-          <a class="card-link" href="hay-bale/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="hay-bale/">View showcase piece<span class="sr-only"> hay-bale</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="crate-stack/" aria-label="crate-stack showcase piece detail page">
+        <a class="card-media" href="crate-stack/" tabindex="-1" aria-hidden="true">
           <img src="assets/crate-stack-hero.webp" alt="crate-stack — A stack of three procedural shipping crates built by one generator called three times with a per-instance seed, carried through UVs, bake, LOD, collider, and…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="crate-stack/">crate-stack</a></h2>
           <p class="teaches">A stack of three procedural shipping crates built by one generator called three times with a per-instance seed, carried through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 4380 tris, two materials with 216 iron and 2436 timber faces, UVs in 0..1 with zero AABB overlap, outer AABB 0.658×0.524×0.704 m, zmin 0, hygiene 0 including zero coplanar disjoint pairs, three ground runners at z=0, both crate-to-crate seats overlapping, each crate&#x27;s own footprint 0.585×0.425 m measured in its own frame, yaw spread 0.026 rad and plank spread 2.05 mm across instances, LOD ratios in band, convex collider 202 tris, non-empty glTF. --float-stack exits 18 on the seat; --same-seed exits 20 on per-instance variation.</p>
-          <a class="card-link" href="crate-stack/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="crate-stack/">View showcase piece<span class="sr-only"> crate-stack</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
       <article class="card" data-tags="mesh export showcase">
-        <a class="card-media" href="stone-archway/" aria-label="stone-archway showcase piece detail page">
+        <a class="card-media" href="stone-archway/" tabindex="-1" aria-hidden="true">
           <img src="assets/stone-archway-hero.webp" alt="stone-archway — A procedural masonry archway — coursed piers, projecting imposts, nine voussoirs and a proud keystone — carried through UVs, bake, LOD, collider, and Unity…" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="stone-archway/">stone-archway</a></h2>
           <p class="teaches">A procedural masonry archway — coursed piers, projecting imposts, nine voussoirs and a proud keystone — carried through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
           <p class="witnesses"><span class="tag">witnesses</span> Recomputed: 924 tris, two materials with 182 dressed and 364 ashlar faces re-stamped after the chamfer, UVs in 0..1 with zero AABB overlap, outer AABB 1.644×0.510×2.057 m, clear opening 1.203 m, zmin 0, hygiene 0 including zero coplanar disjoint pairs, both piers grounded, the springing joint an overlap, all eight mortar joints at 9.70 mm inside the 6–17 mm band, and every intrados vertex within 0.97 mm of the declared 0.60 m radius over 178°. --off-circle exits 19 on the circle fit; --wide-mortar exits 18 on the joint band.</p>
-          <a class="card-link" href="stone-archway/">View showcase piece <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="stone-archway/">View showcase piece<span class="sr-only"> stone-archway</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>
     </div>
@@ -1205,7 +1214,7 @@ <h2><a href="stone-archway/">stone-archway</a></h2>
   <button class="to-top" id="toTop" type="button"><span aria-hidden="true">&uarr;</span> Top</button>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>examples/gallery.json</code> + <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1261,6 +1270,9 @@ <h2><a href="stone-archway/">stone-archway</a></h2>
           c.classList.toggle('active', (c.getAttribute('data-tag') || '') === state.tag);
         });
         tagsToggle.classList.toggle('has-active', !!state.tag);
+        // The chip row is collapsed on narrow screens; name the active tag
+        // on the toggle so a shared #tag= link is visibly filtered.
+        tagsToggle.textContent = state.tag ? 'Tags: ' + state.tag : 'Tags';
       }
 
       function applyDensity() {
diff --git a/docs/gallery/iron-cauldron/index.html b/docs/gallery/iron-cauldron/index.html
index 8ebf5548..7f8876c8 100644
--- a/docs/gallery/iron-cauldron/index.html
+++ b/docs/gallery/iron-cauldron/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/iron-cauldron/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="iron-cauldron — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural hanging iron cauldron with a bulged open pot, bail, and timber tripod through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1721,12 +1730,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/iron-cauldron-hero.webp" alt="iron-cauldron render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1737,11 +1747,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/light-link-studio/index.html b/docs/gallery/light-link-studio/index.html
index 7cb6ea61..ad2ff9bd 100644
--- a/docs/gallery/light-link-studio/index.html
+++ b/docs/gallery/light-link-studio/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/light-link-studio/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="light-link-studio — Examples — Blender Developer Tools" />
   <meta property="og:description" content="One key, one hero: a light linked to a receiver collection lights only the hero, proven by two pixel renders in one pass. Linked: 3.6x luminance ratio; unlinked in the same check: the decoy rises 233% while the hero holds at 0.3% drift." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -724,9 +733,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/light-link-studio-hero.webp" alt="light-link-studio render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -740,11 +750,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/lightmap-uv-channel/index.html b/docs/gallery/lightmap-uv-channel/index.html
index 9b385151..3c678cbf 100644
--- a/docs/gallery/lightmap-uv-channel/index.html
+++ b/docs/gallery/lightmap-uv-channel/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/lightmap-uv-channel/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="lightmap-uv-channel — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A market cart carrying the two-channel UV contract for baked lighting: UV0 untouched, UVLight packed with no overlaps and a respected margin." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1129,9 +1138,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/lightmap-uv-channel-hero.webp" alt="lightmap-uv-channel render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -1145,11 +1155,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/lod-decimate-chain/index.html b/docs/gallery/lod-decimate-chain/index.html
index 7b9bea40..6cacb442 100644
--- a/docs/gallery/lod-decimate-chain/index.html
+++ b/docs/gallery/lod-decimate-chain/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/lod-decimate-chain/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="lod-decimate-chain — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A retro rocket at LOD0/1/2 via the Decimate modifier evaluated through the depsgraph. The check proves the reduction is non-destructive, the triangle count hits ratio x base within bounds, and silhouette-critical dimensions survive." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -730,9 +739,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/lod-decimate-chain-hero.webp" alt="lod-decimate-chain render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -746,11 +756,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/market-stall/index.html b/docs/gallery/market-stall/index.html
index c6178d4f..99fb29be 100644
--- a/docs/gallery/market-stall/index.html
+++ b/docs/gallery/market-stall/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/market-stall/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="market-stall — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural timber market stall through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1600,12 +1609,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/market-stall-hero.webp" alt="market-stall render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1616,11 +1626,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/mesh-hygiene-audit/index.html b/docs/gallery/mesh-hygiene-audit/index.html
index 78ff362f..4478a7f4 100644
--- a/docs/gallery/mesh-hygiene-audit/index.html
+++ b/docs/gallery/mesh-hygiene-audit/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/mesh-hygiene-audit/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="mesh-hygiene-audit — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Engine-ingest mesh hygiene on an octagonal street valve: no ngons, no loose verts, manifold edges, no zero-area faces, positive signed volume, Euler V-E+F==2. Dual-panel still shows a through-hole and loose-vert bead derived from live mesh incidence — same brass on both so color alone cannot carry the proof." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -903,9 +912,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/mesh-hygiene-audit-hero.webp" alt="mesh-hygiene-audit render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -919,11 +929,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/modular-kit-snap/index.html b/docs/gallery/modular-kit-snap/index.html
index 3352aca3..d1f0374a 100644
--- a/docs/gallery/modular-kit-snap/index.html
+++ b/docs/gallery/modular-kit-snap/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/modular-kit-snap/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="modular-kit-snap — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A tiling corridor kit whose open-end boundary verts snap to the tile grid, so instances at 4 m multiples join with zero gap or overlap." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -978,9 +987,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/modular-kit-snap-hero.webp" alt="modular-kit-snap render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -994,11 +1004,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/parent-inverse-orrery/index.html b/docs/gallery/parent-inverse-orrery/index.html
index bfbf1d3b..2d71d2df 100644
--- a/docs/gallery/parent-inverse-orrery/index.html
+++ b/docs/gallery/parent-inverse-orrery/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/parent-inverse-orrery/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="parent-inverse-orrery — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Data-API parenting for a brass orrery — the keep-world idiom (child.parent = pivot; child.matrix_parent_inverse = pivot.matrix_world.inverted()) carrying arms, planets, and a two-level moon through spinning pivots." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -647,9 +656,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/parent-inverse-orrery-hero.webp" alt="parent-inverse-orrery render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -663,11 +673,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/park-bench/index.html b/docs/gallery/park-bench/index.html
index dfedceb7..e3b1bc09 100644
--- a/docs/gallery/park-bench/index.html
+++ b/docs/gallery/park-bench/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/park-bench/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="park-bench — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural wrought-iron park bench with tangent tube scroll feet through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1459,12 +1468,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/park-bench-hero.webp" alt="park-bench render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1475,11 +1485,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/png-exr-alpha/index.html b/docs/gallery/png-exr-alpha/index.html
index 33c887d9..7b339f29 100644
--- a/docs/gallery/png-exr-alpha/index.html
+++ b/docs/gallery/png-exr-alpha/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/png-exr-alpha/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="png-exr-alpha — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Float-image PNG save trap — float_buffer=True Image.save() writes RGBA16 and unpremultiplies as if associated-alpha, clamping straight-authored dark values at low alpha to white (closed-form err 0.98 at RGB 0.02 / a=1/255)." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -981,9 +990,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/png-exr-alpha-hero.webp" alt="png-exr-alpha render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -997,11 +1007,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/prop-origin-transform/index.html b/docs/gallery/prop-origin-transform/index.html
index a0bf3769..ab38a04a 100644
--- a/docs/gallery/prop-origin-transform/index.html
+++ b/docs/gallery/prop-origin-transform/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/prop-origin-transform/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="prop-origin-transform — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Street pedestal origin-to-base-center + data-API scale apply + matrix_parent_inverse for a flanged conduit accessory. After bake: scale (1,1,1), local min.z==0, world AABB unchanged. Bare parent jumps the accessory off an empty mount socket; MPI keeps it seated." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -935,9 +944,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/prop-origin-transform-hero.webp" alt="prop-origin-transform render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -951,11 +961,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/shader-node-group/index.html b/docs/gallery/shader-node-group/index.html
index 0d455fba..97b7e68b 100644
--- a/docs/gallery/shader-node-group/index.html
+++ b/docs/gallery/shader-node-group/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/shader-node-group/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="shader-node-group — Examples — Blender Developer Tools" />
   <meta property="og:description" content="One reusable shader group declared via tree.interface.new_socket, instanced in two materials with different Tint values — two spheres, one group, two colors." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -522,9 +531,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/shader-node-group-hero.webp" alt="shader-node-group render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -538,11 +548,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/shape-key-blend/index.html b/docs/gallery/shape-key-blend/index.html
index e611078c..13492bb5 100644
--- a/docs/gallery/shape-key-blend/index.html
+++ b/docs/gallery/shape-key-blend/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/shape-key-blend/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="shape-key-blend — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A relative Tall shape key that lifts and flares the top face — authored via shape_key_add / key_blocks / .value — read back from the depsgraph-evaluated mesh." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -565,9 +574,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/shape-key-blend-hero.webp" alt="shape-key-blend render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -581,11 +591,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/shipping-crate/index.html b/docs/gallery/shipping-crate/index.html
index a7308f34..be2695bb 100644
--- a/docs/gallery/shipping-crate/index.html
+++ b/docs/gallery/shipping-crate/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/shipping-crate/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="shipping-crate — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural shipping crate through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1565,12 +1574,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/shipping-crate-hero.webp" alt="shipping-crate render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1581,11 +1591,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/signpost/index.html b/docs/gallery/signpost/index.html
index 68f927ca..0970afb4 100644
--- a/docs/gallery/signpost/index.html
+++ b/docs/gallery/signpost/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/signpost/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="signpost — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural timber fingerboard signpost through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1375,12 +1384,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/signpost-hero.webp" alt="signpost render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1391,11 +1401,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/sky-texture-sun-elevation/index.html b/docs/gallery/sky-texture-sun-elevation/index.html
index 879272ef..2e2b54d7 100644
--- a/docs/gallery/sky-texture-sun-elevation/index.html
+++ b/docs/gallery/sky-texture-sun-elevation/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/sky-texture-sun-elevation/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="sky-texture-sun-elevation — Examples — Blender Developer Tools" />
   <meta property="og:description" content="World ShaderNodeTexSky driving Background Color — the sky contract across 4.5 LTS and 5.1. sky_type is NISHITA on 4.5 and MULTIPLE_SCATTERING on 5.1 (NISHITA gone); dust_density exists only on 4.5 (aerosol_density on 5.1). Two tiny Cycles OPEN_EXR zenith probes prove sun_elevation 8 deg to 55 deg brightens zenith (rise 2.25x on 5.1.2, 1.50x on 4.5.11, gate &gt;= 1.25)." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -842,9 +851,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/sky-texture-sun-elevation-hero.webp" alt="sky-texture-sun-elevation render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -858,11 +868,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/soccer-ball-goldberg/index.html b/docs/gallery/soccer-ball-goldberg/index.html
index 9b4d9394..55224ec1 100644
--- a/docs/gallery/soccer-ball-goldberg/index.html
+++ b/docs/gallery/soccer-ball-goldberg/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/soccer-ball-goldberg/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="soccer-ball-goldberg — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A soccer ball as a Goldberg polyhedron: a bmesh icosphere truncated at 1/3 per edge, faces ordered by link-topology walks, panels bound by face vertex count." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -715,9 +724,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/soccer-ball-goldberg-hero.webp" alt="soccer-ball-goldberg render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -731,11 +741,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/socket-attach-points/index.html b/docs/gallery/socket-attach-points/index.html
index b98a15aa..d3faf698 100644
--- a/docs/gallery/socket-attach-points/index.html
+++ b/docs/gallery/socket-attach-points/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/socket-attach-points/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="socket-attach-points — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A survey drone whose named SKT_ empties are the spawn contract: modules parented with an identity local transform seat exactly on their mount pads." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1433,9 +1442,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/socket-attach-points-hero.webp" alt="socket-attach-points render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -1449,11 +1459,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/stone-archway/index.html b/docs/gallery/stone-archway/index.html
index dd27d9ab..8e71bb52 100644
--- a/docs/gallery/stone-archway/index.html
+++ b/docs/gallery/stone-archway/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/stone-archway/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="stone-archway — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural masonry archway — coursed piers, projecting imposts, nine voussoirs and a proud keystone — carried through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1533,12 +1542,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/stone-archway-hero.webp" alt="stone-archway render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1549,11 +1559,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/stone-well/index.html b/docs/gallery/stone-well/index.html
index d8d0cad1..793bb1fe 100644
--- a/docs/gallery/stone-well/index.html
+++ b/docs/gallery/stone-well/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/stone-well/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="stone-well — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural stone well through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1850,12 +1859,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/stone-well-hero.webp" alt="stone-well render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1866,11 +1876,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/street-lantern/index.html b/docs/gallery/street-lantern/index.html
index 5315d12b..287f70b6 100644
--- a/docs/gallery/street-lantern/index.html
+++ b/docs/gallery/street-lantern/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/street-lantern/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="street-lantern — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural hanging street lantern through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1675,12 +1684,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/street-lantern-hero.webp" alt="street-lantern render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1691,11 +1701,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/swatch-grid/index.html b/docs/gallery/swatch-grid/index.html
index f814ea41..d8871ee9 100644
--- a/docs/gallery/swatch-grid/index.html
+++ b/docs/gallery/swatch-grid/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/swatch-grid/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="swatch-grid — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Procedural Principled materials — metal and dielectric, the emission pattern, and the cross-version set_specular shim." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -632,9 +641,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/swatch-grid-hero.webp" alt="swatch-grid render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -648,11 +658,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/tavern-stool/index.html b/docs/gallery/tavern-stool/index.html
index 5edcf79d..773df4cb 100644
--- a/docs/gallery/tavern-stool/index.html
+++ b/docs/gallery/tavern-stool/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/tavern-stool/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="tavern-stool — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural tavern stool with a lathed seat, turned splayed legs, tenoned stretchers, and iron ferrule cups through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1531,12 +1540,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/tavern-stool-hero.webp" alt="tavern-stool render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1547,11 +1557,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/temp-override-join/index.html b/docs/gallery/temp-override-join/index.html
index df35978d..676cdbbb 100644
--- a/docs/gallery/temp-override-join/index.html
+++ b/docs/gallery/temp-override-join/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/temp-override-join/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="temp-override-join — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Join three unit cubes into a staircase under bpy.context.temp_override — the supported replacement for the removed context.copy() dict-pass form." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -530,9 +539,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/temp-override-join-hero.webp" alt="temp-override-join render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -546,11 +556,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/terrain-scatter/index.html b/docs/gallery/terrain-scatter/index.html
index 0056ec49..ee480e9c 100644
--- a/docs/gallery/terrain-scatter/index.html
+++ b/docs/gallery/terrain-scatter/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/terrain-scatter/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="terrain-scatter — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A Geometry Nodes hill tile with seated icosphere scatter through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1481,12 +1490,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/terrain-scatter-hero.webp" alt="terrain-scatter render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1497,11 +1507,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/text-version-stamp/index.html b/docs/gallery/text-version-stamp/index.html
index 49580076..948c6fb6 100644
--- a/docs/gallery/text-version-stamp/index.html
+++ b/docs/gallery/text-version-stamp/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/text-version-stamp/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="text-version-stamp — Examples — Blender Developer Tools" />
   <meta property="og:description" content="The TextCurve data API — curves.new(type=&#x27;FONT&#x27;), live body text from bpy.app.version_string, extrude and bevel_depth solids, and evaluated-mesh conversion — so every render self-documents which Blender produced it." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -609,9 +618,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/text-version-stamp-hero.webp" alt="text-version-stamp render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -625,11 +635,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/treasure-chest/index.html b/docs/gallery/treasure-chest/index.html
index 7b5be2e8..e60e8016 100644
--- a/docs/gallery/treasure-chest/index.html
+++ b/docs/gallery/treasure-chest/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/treasure-chest/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="treasure-chest — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural iron-bound chest with a lofted barrel-vault lid, U-wrap bands, and hinge knuckles through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1617,12 +1626,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/treasure-chest-hero.webp" alt="treasure-chest render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1633,11 +1643,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/triangulate-tangents/index.html b/docs/gallery/triangulate-tangents/index.html
index bac9f1ab..f6f71868 100644
--- a/docs/gallery/triangulate-tangents/index.html
+++ b/docs/gallery/triangulate-tangents/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/triangulate-tangents/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="triangulate-tangents — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A machined buckler verifying the tangent-space contract a game engine&#x27;s normal mapping depends on. Deterministic triangulation, unit orthogonal tangent frames, and the edge/UV-delta formula matching mikktspace within welding tolerance." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -755,9 +764,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/triangulate-tangents-hero.webp" alt="triangulate-tangents render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -771,11 +781,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/turntable/index.html b/docs/gallery/turntable/index.html
index 01674264..3dde05d3 100644
--- a/docs/gallery/turntable/index.html
+++ b/docs/gallery/turntable/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/turntable/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="turntable — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A slotted-actions Z-rotation turntable keyed through the cross-version channelbag path (get_channelbag_for_slot)." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -453,9 +462,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/turntable-hero.webp" alt="turntable render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -469,11 +479,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/usd-export-evaluation-mode/index.html b/docs/gallery/usd-export-evaluation-mode/index.html
index 49d5ad92..76686ca9 100644
--- a/docs/gallery/usd-export-evaluation-mode/index.html
+++ b/docs/gallery/usd-export-evaluation-mode/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/usd-export-evaluation-mode/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="usd-export-evaluation-mode — Examples — Blender Developer Tools" />
   <meta property="og:description" content="The USD exporter evaluation_mode chooses viewport versus render modifier quality. TESSELLATE makes the split observable; BEST_MATCH writes the cage and the mode is silent." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -633,9 +642,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/usd-export-evaluation-mode-hero.webp" alt="usd-export-evaluation-mode render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -649,11 +659,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/uv-layer-grid/index.html b/docs/gallery/uv-layer-grid/index.html
index 2b2ae921..b2134cc1 100644
--- a/docs/gallery/uv-layer-grid/index.html
+++ b/docs/gallery/uv-layer-grid/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/uv-layer-grid/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="uv-layer-grid — Examples — Blender Developer Tools" />
   <meta property="og:description" content="The UV-layer authoring hazard — bmesh.ops.create_grid(..., calc_uvs=True) is a silent no-op unless a UV layer already exists; without one an Image Texture samples texel (0,0) everywhere." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -833,9 +842,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/uv-layer-grid-hero.webp" alt="uv-layer-grid render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -849,11 +859,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/vertex-color-ao/index.html b/docs/gallery/vertex-color-ao/index.html
index 1d9f96ef..7dafe494 100644
--- a/docs/gallery/vertex-color-ao/index.html
+++ b/docs/gallery/vertex-color-ao/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/vertex-color-ao/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="vertex-color-ao — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A stone well carrying baked ambient occlusion in a colour attribute, with the bake held to the closed-form hemisphere integral rather than to a captured value." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1249,9 +1258,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/vertex-color-ao-hero.webp" alt="vertex-color-ao render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -1265,11 +1275,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/vertex-weight-limit/index.html b/docs/gallery/vertex-weight-limit/index.html
index 1fb77289..dc074ef0 100644
--- a/docs/gallery/vertex-weight-limit/index.html
+++ b/docs/gallery/vertex-weight-limit/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/vertex-weight-limit/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="vertex-weight-limit — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A rigged mech arm pruned to the game-engine cap of four bone influences per vertex, through the data API. The check proves no vertex exceeds the cap, weights still sum to one, the pose survives pruning, and the modifier is still exact linear blend skinning." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -814,9 +823,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/vertex-weight-limit-hero.webp" alt="vertex-weight-limit render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -830,11 +840,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/vse-cut-list/index.html b/docs/gallery/vse-cut-list/index.html
index 4f6ad0c0..7ef29aaa 100644
--- a/docs/gallery/vse-cut-list/index.html
+++ b/docs/gallery/vse-cut-list/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/vse-cut-list/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="vse-cut-list — Examples — Blender Developer Tools" />
   <meta property="og:description" content="The sequencer API rename from 4.5 LTS to 5.x — strips (never .sequences), new_effect ending in length= vs frame_end=, and left_handle/right_handle/duration replacing the deprecated frame_final_*. A deterministic cut list — color programs, a clamped GAMMA_CROSS, a scene strip, a text strip — asserted before and after save/reload." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1038,9 +1047,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/vse-cut-list-hero.webp" alt="vse-cut-list render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -1054,11 +1064,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/vse-gamma-cross/index.html b/docs/gallery/vse-gamma-cross/index.html
index 8c50ec08..245f792e 100644
--- a/docs/gallery/vse-gamma-cross/index.html
+++ b/docs/gallery/vse-gamma-cross/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/vse-gamma-cross/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="vse-gamma-cross — Examples — Blender Developer Tools" />
   <meta property="og:description" content="The GAMMA_CROSS fade is not the naive linear mix: it blends in a gamma-0.5 space, so the mid-cross dips below the sRGB lerp. Tiny per-frame renders are asserted against the closed form per frame." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -752,9 +761,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/vse-gamma-cross-hero.webp" alt="vse-gamma-cross render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -768,11 +778,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/wall-torch/index.html b/docs/gallery/wall-torch/index.html
index 12cbe307..c24d070d 100644
--- a/docs/gallery/wall-torch/index.html
+++ b/docs/gallery/wall-torch/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/wall-torch/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="wall-torch — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural wall-mounted torch sconce with a dressed stone plaque, iron bracket, wooden haft, and emissive flame through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1408,12 +1417,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/wall-torch-hero.webp" alt="wall-torch render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1424,11 +1434,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/watchtower/index.html b/docs/gallery/watchtower/index.html
index 4d21a982..50b7920f 100644
--- a/docs/gallery/watchtower/index.html
+++ b/docs/gallery/watchtower/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/watchtower/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="watchtower — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural timber watchtower through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1671,12 +1680,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/watchtower-hero.webp" alt="watchtower render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1687,11 +1697,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/water-trough/index.html b/docs/gallery/water-trough/index.html
index a34d720c..e37dc3ab 100644
--- a/docs/gallery/water-trough/index.html
+++ b/docs/gallery/water-trough/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/water-trough/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="water-trough — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural watertight water trough through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1567,12 +1576,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/water-trough-hero.webp" alt="water-trough render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1583,11 +1593,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/wave-displace/index.html b/docs/gallery/wave-displace/index.html
index f2b5c7da..dd6de8a9 100644
--- a/docs/gallery/wave-displace/index.html
+++ b/docs/gallery/wave-displace/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/wave-displace/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="wave-displace — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Bulk vertex IO at real scale — 9,409 vertices displaced into a standing wave with one foreach_get and one foreach_set, no per-vertex access." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -453,9 +462,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/wave-displace-hero.webp" alt="wave-displace render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -469,11 +479,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/wheelbarrow/index.html b/docs/gallery/wheelbarrow/index.html
index 68a05e2d..6ac0a725 100644
--- a/docs/gallery/wheelbarrow/index.html
+++ b/docs/gallery/wheelbarrow/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/wheelbarrow/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="wheelbarrow — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural wooden wheelbarrow through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1814,12 +1823,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/wheelbarrow-hero.webp" alt="wheelbarrow render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1830,11 +1840,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/wooden-barrel/index.html b/docs/gallery/wooden-barrel/index.html
index 5dfa7542..9b3d6640 100644
--- a/docs/gallery/wooden-barrel/index.html
+++ b/docs/gallery/wooden-barrel/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/wooden-barrel/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="wooden-barrel — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural wine-cask with croze-seated heads and chord-lofted hoops through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1499,12 +1508,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/wooden-barrel-hero.webp" alt="wooden-barrel render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1515,11 +1525,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/wooden-bucket/index.html b/docs/gallery/wooden-bucket/index.html
index 8082e3cc..18818e64 100644
--- a/docs/gallery/wooden-bucket/index.html
+++ b/docs/gallery/wooden-bucket/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/wooden-bucket/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="wooden-bucket — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural coopered pail with a croze-seated floor, chord-lofted hoops, and a round bail through the ear rings through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1652,12 +1661,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/wooden-bucket-hero.webp" alt="wooden-bucket render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1668,11 +1678,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/docs/gallery/wooden-ladder/index.html b/docs/gallery/wooden-ladder/index.html
index ec0ecf77..c7b1ee80 100644
--- a/docs/gallery/wooden-ladder/index.html
+++ b/docs/gallery/wooden-ladder/index.html
@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/wooden-ladder/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="wooden-ladder — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural timber ladder with raked tapered stiles, six turned rungs, ferrule caps, and level shoe plates through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1690,12 +1699,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/wooden-ladder-hero.webp" alt="wooden-ladder render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1706,11 +1716,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
diff --git a/scripts/build_gallery.py b/scripts/build_gallery.py
index d0f6f9d2..657a0738 100644
--- a/scripts/build_gallery.py
+++ b/scripts/build_gallery.py
@@ -139,6 +139,7 @@ def assert_alts_survive_dotted_paths(examples: list) -> None:
   <link rel="canonical" href="__CANONICAL__" />
   <link rel="icon" href="__SITEROOT__assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="__TITLE__" />
   <meta property="og:description" content="__DESC__" />
@@ -161,6 +162,7 @@ def assert_alts_survive_dotted_paths(examples: list) -> None:
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -302,6 +304,8 @@ def assert_alts_survive_dotted_paths(examples: list) -> None:
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -344,10 +348,15 @@ def assert_alts_survive_dotted_paths(examples: list) -> None:
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -383,7 +392,7 @@ def assert_alts_survive_dotted_paths(examples: list) -> None:
 __CONTENT__
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from __SOURCE__</span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -467,6 +476,9 @@ def assert_alts_survive_dotted_paths(examples: list) -> None:
           c.classList.toggle('active', (c.getAttribute('data-tag') || '') === state.tag);
         });
         tagsToggle.classList.toggle('has-active', !!state.tag);
+        // The chip row is collapsed on narrow screens; name the active tag
+        // on the toggle so a shared #tag= link is visibly filtered.
+        tagsToggle.textContent = state.tag ? 'Tags: ' + state.tag : 'Tags';
       }
 
       function applyDensity() {
@@ -571,11 +583,10 @@ def assert_alts_survive_dotted_paths(examples: list) -> None:
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {
@@ -591,14 +602,14 @@ def assert_alts_survive_dotted_paths(examples: list) -> None:
 """
 
 CARD = """      <article class="card" data-tags="__TAGS__">
-        <a class="card-media" href="__HREF__" aria-label="__NAME__ __KIND__ detail page">
+        <a class="card-media" href="__HREF__" tabindex="-1" aria-hidden="true">
           <img src="__HERO__" alt="__ALT__" loading="lazy" decoding="async" />
         </a>
         <div class="card-body">
           <h2><a href="__HREF__">__NAME__</a></h2>
           <p class="teaches">__TEACHES__</p>
           <p class="witnesses"><span class="tag">witnesses</span> __WITNESSES__</p>
-          <a class="card-link" href="__HREF__">View __KIND__ <span aria-hidden="true">&rarr;</span></a>
+          <a class="card-link" href="__HREF__">View __KIND__<span class="sr-only"> __NAME__</span> <span aria-hidden="true">&rarr;</span></a>
         </div>
       </article>"""
 
@@ -828,7 +839,8 @@ def resolve(url: str) -> str:
 
 def shell(*, title: str, desc: str, canonical: str, og_image: str,
           site_root: str, back_href: str, back_label: str, repo_url: str,
-          content: str, page_js: str, head_js: str = "") -> str:
+          content: str, page_js: str, head_js: str = "",
+          sources: tuple[str, ...] = ("examples/gallery.json",)) -> str:
     return (SHELL
             .replace("__TITLE__", html.escape(title))
             .replace("__DESC__", html.escape(desc, quote=True))
@@ -838,9 +850,13 @@ def shell(*, title: str, desc: str, canonical: str, og_image: str,
             .replace("__BACKHREF__", back_href)
             .replace("__BACKLABEL__", html.escape(back_label))
             .replace("__REPO__", html.escape(repo_url, quote=True))
-            .replace("__CONTENT__", content)
+            .replace("__SOURCE__", " + ".join(
+                f"<code>{html.escape(s)}</code>" for s in sources))
             .replace("__PAGEJS__", page_js)
-            .replace("__HEADJS__", head_js))
+            .replace("__HEADJS__", head_js)
+            # Content last, so README and source text are never scanned for
+            # the other placeholders.
+            .replace("__CONTENT__", content))
 
 
 def build_detail(ex: dict, *, base: str, repo_root_url: str, site: str) -> str:
@@ -889,9 +905,10 @@ def build_detail(ex: dict, *, base: str, repo_root_url: str, site: str) -> str:
         parts.append("    </section>")
 
     parts.append("  </main>")
-    parts.append('  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">')
+    parts.append('  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">')
+    parts.append('    <button class="lightbox-close" type="button" autofocus>Close</button>')
     parts.append(f'    <img src="../assets/{html.escape(hero_file)}" alt="{html.escape(name)} render, full size" />')
-    parts.append("  </div>")
+    parts.append("  </dialog>")
 
     return shell(
         title=f"{name} — {kind_title} — Blender Developer Tools",
@@ -904,6 +921,8 @@ def build_detail(ex: dict, *, base: str, repo_root_url: str, site: str) -> str:
         repo_url=repo_root_url,
         content="\n".join(parts),
         page_js=DETAIL_JS,
+        sources=(("showcase/gallery.json",) if noun == "showcase piece"
+                 else ("examples/gallery.json",)),
     )
 
 
@@ -1001,6 +1020,7 @@ def build_index(data: dict, *, base: str, repo_root_url: str, site: str) -> str:
         content=content,
         page_js=INDEX_JS.replace("__COUNT_LABEL__", count_label),
         head_js=INDEX_HEADJS,
+        sources=("examples/gallery.json", "showcase/gallery.json"),
     )
 
 
diff --git a/scripts/site/404.html.j2 b/scripts/site/404.html.j2
new file mode 100644
index 00000000..f36c1df5
--- /dev/null
+++ b/scripts/site/404.html.j2
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Not found — {{ plugin.displayName }}</title>
+  <meta name="robots" content="noindex" />
+  {% if site.favicon %}<link rel="icon" href="{{ base }}{{ site.favicon }}" />{% endif %}
+  <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
+  <style>
+    /* Served for any missing path at any depth, so every URL is root-absolute. */
+    @font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap;
+      src: url('{{ base }}fonts/barlow-condensed-600.woff2') format('woff2'); }
+    @font-face { font-family: 'Inter'; font-weight: 400; font-display: swap;
+      src: url('{{ base }}fonts/inter-regular.woff2') format('woff2'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap;
+      src: url('{{ base }}fonts/jetbrains-mono-regular.woff2') format('woff2'); }
+    :root { color-scheme: dark; --bg: #1a1b1e; --panel: #232428; --border: #3a3b40;
+      --text: #e8e9eb; --dim: #9698a0; --select: #ff8c19; }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { background: var(--bg); color: var(--text); min-height: 100vh; display: flex;
+      align-items: center; justify-content: center; padding: 1.25rem;
+      font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; line-height: 1.6; }
+    main { max-width: 34rem; width: 100%; background: var(--panel); border: 1px solid var(--border);
+      border-radius: 6px; padding: 2rem 1.75rem; }
+    .hud { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 0.6875rem;
+      letter-spacing: 0.04em; color: var(--dim); text-transform: uppercase; }
+    h1 { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 600;
+      text-transform: uppercase; font-size: 2.4rem; line-height: 1; margin: 0.5rem 0 0.75rem; }
+    p { color: var(--dim); }
+    nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
+    nav a { color: var(--select); text-decoration: none; font-weight: 500; padding: 0.25rem 0; }
+    nav a:hover { text-decoration: underline; }
+    :focus-visible { outline: 2px solid var(--select); outline-offset: 2px; border-radius: 2px; }
+  </style>
+</head>
+<body>
+  <main>
+    <p class="hud">exit 1 &middot; 404</p>
+    <h1>Nothing at this path.</h1>
+    <p>The page may have moved, or an example may have been renamed. The gallery lists
+      every example and showcase piece that ships today.</p>
+    <nav>
+      <a href="{{ base }}gallery/">Open the gallery &rarr;</a>
+      <a href="{{ base }}">Home</a>
+      <a href="{{ site.links.github | default(plugin.repository) }}">GitHub</a>
+    </nav>
+  </main>
+</body>
+</html>
diff --git a/scripts/site/build_site.py b/scripts/site/build_site.py
index 096375c8..f95e30a9 100644
--- a/scripts/site/build_site.py
+++ b/scripts/site/build_site.py
@@ -12,8 +12,10 @@
 import shutil
 import sys
 from pathlib import Path
+from urllib.parse import urlparse
 
 from jinja2 import Environment, FileSystemLoader
+from markupsafe import Markup, escape
 
 
 def load_json(path: Path) -> dict | list:
@@ -99,6 +101,38 @@ def _truncate_words(text: str, limit: int) -> str:
     return cut + "…"
 
 
+# Sentence end: terminal punctuation followed by whitespace and a capital,
+# backtick or bracket. Dotted API paths (`bpy.types.Operator`) and "e.g."
+# never match, so they cannot end a sentence early.
+_SENTENCE_END = re.compile(r"(?<!\be\.g)(?<!\bi\.e)(?<!\bvs)[.!?](?=\s+[A-Z`(\"'])")
+
+DESCRIPTION_LIMIT = 340
+
+
+def _summarize(text: str, limit: int = DESCRIPTION_LIMIT) -> str:
+    """Return *text* whole when it fits, else the longest run of whole
+    sentences under *limit*; a single over-long sentence falls back to a
+    word-boundary cut with an ellipsis."""
+    text = text.strip().strip("\"'")
+    if len(text) <= limit:
+        return text
+    fit = ""
+    for m in _SENTENCE_END.finditer(text):
+        if m.end() > limit:
+            break
+        fit = text[:m.end()]
+    return fit or _truncate_words(text, limit)
+
+
+def inline_code(text: str) -> Markup:
+    """Escape *text* and render its `backtick` spans as <code> elements."""
+    parts = str(escape(text)).split("`")
+    if len(parts) % 2 == 0:  # unbalanced backticks: leave them literal
+        return Markup("`".join(parts))
+    return Markup("".join(
+        f"<code>{part}</code>" if i % 2 else part for i, part in enumerate(parts)))
+
+
 def parse_skills(repo_root: Path) -> list[dict]:
     skills_dir = repo_root / "skills"
     if not skills_dir.is_dir():
@@ -116,7 +150,7 @@ def parse_skills(repo_root: Path) -> list[dict]:
         name = meta.get("name", "").replace("-", " ").replace("_", " ").title()
         if not name:
             name = skill_dir.name.replace("-", " ").replace("_", " ").title()
-        description = _truncate_words(meta.get("description", ""), 200)
+        description = _summarize(meta.get("description", ""))
 
         if not description:
             for line in body.splitlines():
@@ -163,7 +197,7 @@ def parse_rules(repo_root: Path) -> list[dict]:
         fm_lines = text[: len(text) - len(body)].splitlines()
 
         name = rule_file.stem.replace("-", " ").replace("_", " ").title()
-        description = _truncate_words(meta.get("description", ""), 200)
+        description = _summarize(meta.get("description", ""))
         if not description:
             for line in body.splitlines():
                 stripped = line.strip()
@@ -416,6 +450,7 @@ def main():
         "featured_count": len(featured),
         "showcase": showcase,
         "showcase_count": len(showcase),
+        "featured_showcase": pick_featured(showcase),
         "snippet_count": len(plugin.get("snippets", [])),
         "template_count": len(plugin.get("templates", [])),
         # basenames for display: snippets/foo-bar.py -> foo-bar
@@ -440,6 +475,7 @@ def main():
         autoescape=True,
         keep_trailing_newline=True,
     )
+    env.filters["inline_code"] = inline_code
     template = env.get_template("template.html.j2")
     html = template.render(**context)
 
@@ -447,6 +483,15 @@ def main():
     (out_dir / "index.html").write_text(html, encoding="utf-8")
     print(f"Wrote {out_dir / 'index.html'}")
 
+    # GitHub Pages serves 404.html for any missing path at any depth, so its
+    # links are root-absolute: the path component of the canonical URL.
+    base = urlparse(site.get("canonical", "")).path or "/"
+    if not base.endswith("/"):
+        base += "/"
+    not_found = env.get_template("404.html.j2").render(site=site, plugin=plugin, base=base)
+    (out_dir / "404.html").write_text(not_found, encoding="utf-8")
+    print(f"Wrote {out_dir / '404.html'}")
+
     fonts_src = template_dir / "fonts"
     fonts_dst = out_dir / "fonts"
     if fonts_src.is_dir():
diff --git a/scripts/site/template.html.j2 b/scripts/site/template.html.j2
index 9e6f4b88..707aaa2b 100644
--- a/scripts/site/template.html.j2
+++ b/scripts/site/template.html.j2
@@ -8,6 +8,7 @@
   {% if site.canonical %}<link rel="canonical" href="{{ site.canonical }}" />{% endif %}
   {% if site.favicon %}<link rel="icon" href="{{ site.favicon }}" />{% endif %}
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="{{ plugin.displayName }} — Blender Python that actually runs" />
   <meta property="og:description" content="{{ plugin.description }}" />
@@ -36,6 +37,7 @@
     /* ---- tokens: Blender's own UI grays; selection orange is THE accent;
            axis colors appear only in the gizmo and the grid origin lines ---- */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --panel: #222327; --panel-2: #2a2b30; --border: #3a3b40;
       --text: #e8e9eb; --dim: #9698a0;
       --select: #ff8c19;
@@ -164,6 +166,8 @@
     .skill-row { display: flex; flex-direction: column; padding: 0.55rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
     .skill-row .name { font-family: var(--font-mono); font-size: 0.8rem; color: var(--select); }
     .skill-row .desc { color: var(--dim); font-size: 0.85rem; margin-top: 0.15rem; }
+    .skill-row .desc code, .rules-table td code { font-family: var(--font-mono); font-size: 0.85em;
+      color: var(--text); }
 
     /* rules */
     .rules-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
@@ -321,20 +325,21 @@
   {% endif %}
 
   {% if showcase %}
+  {% set shown_showcase = featured_showcase if featured_showcase else showcase %}
   <section class="panel" id="showcase">
     <div class="panel-head">
       <span class="caret" aria-hidden="true">&#9662;</span>
       <span class="hud">Showcase</span>
-      <span class="hud count">{{ showcase_count }} pieces</span>
+      <span class="hud count">{% if featured_showcase %}{{ featured_showcase | length }} of {% endif %}{{ showcase_count }} pieces</span>
     </div>
     <div class="panel-body">
       <h2>Budget-conformance props, not API contracts.</h2>
       <p class="lede">Showcase pieces compose shipped skills into a recognizable asset and assert
         declared budgets — triangle counts, materials, UVs, LODs, colliders, exports. They are not
         examples. A still that merely rendered is not an assertion.</p>
-      <p class="cta-row"><a class="btn-cta" href="gallery/#tag=showcase">Open the showcase in the gallery &rarr;</a></p>
+      <p class="cta-row"><a class="btn-cta" href="gallery/#tag=showcase">See all {{ showcase_count }} showcase pieces in the gallery &rarr;</a></p>
       <div class="render-grid">
-        {% for ex in showcase %}
+        {% for ex in shown_showcase %}
         <a class="render-card" href="gallery/{{ ex.name }}/">
           <img src="{{ ex.heroSite }}" alt="{{ ex.name }} render" loading="lazy" width="1280" height="720" />
           <div class="render-meta">
@@ -364,7 +369,7 @@
         {% for skill in skills %}
         <div class="skill-row">
           <span class="name">{{ skill.category }}</span>
-          <span class="desc">{{ skill.description }}</span>
+          <span class="desc">{{ skill.description | inline_code }}</span>
         </div>
         {% endfor %}
       </div>
@@ -390,7 +395,7 @@
           <tr>
             <td class="r-name">{{ rule.slug | default(rule.name) }}</td>
             <td class="r-scope">{{ rule.scope }}</td>
-            <td>{{ rule.description }}</td>
+            <td>{{ rule.description | inline_code }}</td>
           </tr>
           {% endfor %}
         </tbody>
diff --git a/showcase/gallery.json b/showcase/gallery.json
index 4a300f2f..0d809a8b 100644
--- a/showcase/gallery.json
+++ b/showcase/gallery.json
@@ -27,7 +27,8 @@
       "tags": [
         "mesh",
         "export"
-      ]
+      ],
+      "featured_rank": 1
     },
     {
       "name": "wooden-barrel",
@@ -63,7 +64,8 @@
       "tags": [
         "mesh",
         "export"
-      ]
+      ],
+      "featured_rank": 2
     },
     {
       "name": "street-lantern",
@@ -135,7 +137,8 @@
       "tags": [
         "mesh",
         "export"
-      ]
+      ],
+      "featured_rank": 4
     },
     {
       "name": "park-bench",
@@ -147,7 +150,8 @@
       "tags": [
         "mesh",
         "export"
-      ]
+      ],
+      "featured_rank": 5
     },
     {
       "name": "wheelbarrow",
@@ -267,7 +271,8 @@
       "tags": [
         "mesh",
         "export"
-      ]
+      ],
+      "featured_rank": 3
     },
     {
       "name": "tavern-stool",
@@ -339,7 +344,8 @@
       "tags": [
         "mesh",
         "export"
-      ]
+      ],
+      "featured_rank": 6
     }
   ]
 }