From b984b9bcdedd67a9a0b533eceb76b0d9040bb043 Mon Sep 17 00:00:00 2001
From: a-baran-orhan <a.baranorhan@gmail.com>
Date: Sat, 11 Jul 2026 16:42:52 +0300
Subject: [PATCH] Refresh movement pages and mannequin startup

---
 packages/posecode-render/src/index.ts         | 22 +++++++-
 playground/public/content-theme.css           | 52 +++++++++++++++++++
 playground/public/llm-guide.html              |  1 +
 playground/public/moves/arm-circles.html      |  1 +
 playground/public/moves/bent-over-row.html    |  1 +
 playground/public/moves/biceps.html           |  1 +
 playground/public/moves/bicycle-crunch.html   |  1 +
 playground/public/moves/bow.html              |  1 +
 playground/public/moves/box-squat.html        |  1 +
 playground/public/moves/box-step-taps.html    |  1 +
 playground/public/moves/box-step.html         |  1 +
 playground/public/moves/calf-raise.html       |  1 +
 playground/public/moves/chair.html            |  1 +
 playground/public/moves/chasse.html           |  1 +
 playground/public/moves/chest-opener.html     |  1 +
 playground/public/moves/cobra.html            |  1 +
 playground/public/moves/cross-body-reach.html |  1 +
 playground/public/moves/crunch.html           |  1 +
 playground/public/moves/dance-phrase.html     |  1 +
 playground/public/moves/dead-bug.html         |  1 +
 playground/public/moves/dead-hang.html        |  1 +
 playground/public/moves/deadlift.html         |  1 +
 playground/public/moves/demi-plie.html        |  1 +
 playground/public/moves/elbow-forearm.html    |  1 +
 playground/public/moves/finger-spell.html     |  1 +
 playground/public/moves/fold.html             |  1 +
 playground/public/moves/forward-lunge.html    |  1 +
 playground/public/moves/front-kick.html       |  1 +
 playground/public/moves/glute-bridge.html     |  1 +
 playground/public/moves/good-morning.html     |  1 +
 playground/public/moves/grapevine.html        |  1 +
 playground/public/moves/hamstring-curl.html   |  1 +
 playground/public/moves/hand-wave.html        |  1 +
 .../public/moves/hanging-knee-raise.html      |  1 +
 playground/public/moves/heel-raises.html      |  1 +
 playground/public/moves/high-knee-march.html  |  1 +
 playground/public/moves/hip-abduction.html    |  1 +
 playground/public/moves/hip-flexion.html      |  1 +
 playground/public/moves/horse-stance.html     |  1 +
 playground/public/moves/index.html            |  1 +
 playground/public/moves/jab-cross.html        |  1 +
 playground/public/moves/jumping-jacks.html    |  1 +
 playground/public/moves/knee-flexion.html     |  1 +
 playground/public/moves/lateral.html          |  1 +
 playground/public/moves/make-a-fist.html      |  1 +
 playground/public/moves/mountain-climber.html |  1 +
 .../public/moves/neck-side-stretch.html       |  1 +
 playground/public/moves/neck.html             |  1 +
 playground/public/moves/overhead-reach.html   |  1 +
 playground/public/moves/pinch-grip.html       |  1 +
 playground/public/moves/pirouette.html        |  1 +
 playground/public/moves/plank-hold.html       |  1 +
 playground/public/moves/port-de-bras.html     |  1 +
 playground/public/moves/posture.html          |  1 +
 playground/public/moves/pull-up.html          |  1 +
 playground/public/moves/quad-stretch.html     |  1 +
 playground/public/moves/quarter-turns.html    |  1 +
 playground/public/moves/releve.html           |  1 +
 .../public/moves/seated-forward-fold.html     |  1 +
 .../public/moves/shoulder-abduction.html      |  1 +
 playground/public/moves/shoulder-rolls.html   |  1 +
 playground/public/moves/shoulder.html         |  1 +
 playground/public/moves/sidebend.html         |  1 +
 playground/public/moves/sit-to-stand.html     |  1 +
 playground/public/moves/spine-rotation.html   |  1 +
 playground/public/moves/squat.html            |  1 +
 playground/public/moves/step-up.html          |  1 +
 playground/public/moves/superman.html         |  1 +
 playground/public/moves/supine-leg-raise.html |  1 +
 playground/public/moves/tendu.html            |  1 +
 playground/public/moves/touch-toes.html       |  1 +
 playground/public/moves/triceps-dips.html     |  1 +
 playground/public/moves/twist.html            |  1 +
 playground/public/moves/walk-cycle.html       |  1 +
 playground/public/moves/wall-sit.html         |  1 +
 playground/public/moves/waltz-box.html        |  1 +
 playground/public/spec.html                   |  1 +
 playground/src/landing.ts                     |  3 +-
 playground/src/main.ts                        |  9 +++-
 scripts/lib/shell.mjs                         |  1 +
 80 files changed, 158 insertions(+), 4 deletions(-)
 create mode 100644 playground/public/content-theme.css

diff --git a/packages/posecode-render/src/index.ts b/packages/posecode-render/src/index.ts
index 5fc2527..bfad764 100644
--- a/packages/posecode-render/src/index.ts
+++ b/packages/posecode-render/src/index.ts
@@ -83,6 +83,14 @@ export interface ViewerOptions {
    * skeleton, rebuilt to the character's exact proportions (see character.ts).
    */
   characterUrl?: string;
+  /**
+   * Show the procedural figure while `characterUrl` loads. Defaults to true
+   * for embeds and offline-friendly consumers. Set false when a brief empty
+   * stage is preferable to flashing the procedural figure before the skinned
+   * character appears. The procedural figure is still revealed if loading
+   * fails, so the viewer never remains permanently blank.
+   */
+  showProceduralWhileLoading?: boolean;
   /**
    * Mocap clip library: clip name (as written in a document's `clip "<name>"`
    * directive) → FBX/GLB asset URL. When a loaded document names a clip found
@@ -174,6 +182,9 @@ export function createViewer(
 
   let mannequin: Mannequin = buildMannequin();
   enableShadows(mannequin.root);
+  if (opts.characterUrl && opts.showProceduralWhileLoading === false) {
+    setMannequinMeshesVisible(mannequin.root, false);
+  }
   scene.add(mannequin.root);
 
   // Skinned character layer (optional). While loading (and on failure) the
@@ -768,8 +779,9 @@ export function createViewer(
         else char.sync(mannequin);
       })
       .catch(() => {
-        // Keep the procedural figure. Deliberately silent: an offline embed
-        // or a blocked CDN should degrade, not error.
+        // Reveal the fallback if it was hidden during loading. Deliberately
+        // silent: an offline embed or blocked CDN should degrade, not error.
+        setMannequinMeshesVisible(mannequin.root, true);
       });
   }
 
@@ -785,6 +797,12 @@ function enableShadows(root: THREE.Object3D): void {
   });
 }
 
+function setMannequinMeshesVisible(root: THREE.Object3D, visible: boolean): void {
+  root.traverse((obj) => {
+    if ((obj as THREE.Mesh).isMesh) obj.visible = visible;
+  });
+}
+
 /** Free GPU resources for a discarded subtree (prop set swapped on reload). */
 function disposeTree(root: THREE.Object3D): void {
   root.traverse((obj) => {
diff --git a/playground/public/content-theme.css b/playground/public/content-theme.css
new file mode 100644
index 0000000..d97c95a
--- /dev/null
+++ b/playground/public/content-theme.css
@@ -0,0 +1,52 @@
+:root{--bg:#0b0c0d;--panel:#111315;--panel-2:#171a1d;--border:#292d30;--border-2:#3a3f43;
+--text:#f2f1eb;--text-2:#aaa9a2;--muted:#74746f;--accent:#d4ff3f;
+--accent-ink:#0b0c0d;--accent-line:rgba(212,255,63,.42);--radius:3px}
+body{background:var(--bg);color:var(--text)}
+.wrap{max-width:1180px;padding-left:28px;padding-right:28px}
+header.site-nav{position:sticky;top:0;z-index:10;margin-bottom:0;padding:18px 0;
+background:rgba(11,12,13,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
+nav.links{gap:24px}
+main{padding-top:clamp(54px,8vw,96px);padding-bottom:80px}
+.eyebrow{color:var(--text-2);margin-bottom:16px}
+h1{max-width:13ch;font-size:clamp(46px,7vw,82px);letter-spacing:-.055em;line-height:.94;
+margin-bottom:24px;text-wrap:balance}
+h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.035em;margin:58px 0 18px}
+p{max-width:760px;font-size:16px;margin-bottom:18px}
+code{border-radius:2px}
+pre.code-block{background:#0e1011;border-radius:2px;padding:20px 22px}
+.card{border-radius:0;background:transparent}
+.btn{background:var(--accent);border-radius:3px;padding:12px 19px}
+.btn:hover{filter:none;transform:translateY(-1px)}
+.steps{gap:0;border-top:1px solid var(--border)}
+.steps li{border:0;border-bottom:1px solid var(--border);border-radius:0;padding:20px 0;background:transparent}
+.chip-list{gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border)}
+.chip-list a{background:transparent;border:0;border-right:1px solid var(--border);
+border-bottom:1px solid var(--border);border-radius:0;padding:8px 13px}
+.chip-list a:hover{color:var(--bg);background:var(--text);border-color:var(--border)}
+.domain-group{margin:64px 0 0}
+.move-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--border);
+border-left:1px solid var(--border)}
+.move-card{display:flex;min-height:126px;flex-direction:column;justify-content:space-between;
+border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0;
+padding:19px 20px;background:transparent}
+.move-card:hover{background:var(--text);border-color:var(--border)}
+.move-card .mc-name{font-size:16px;letter-spacing:-.2px}
+.move-card .mc-meta{font-family:var(--mono);font-size:10.5px;margin-top:16px}
+.move-card:hover .mc-name{color:var(--bg)}
+.move-card:hover .mc-meta{color:#555853}
+footer.site-footer{padding:34px 0 48px}
+@media(max-width:820px){
+  nav.links a:nth-child(n+4){display:none}
+  .move-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
+}
+@media(max-width:600px){
+  .wrap{padding-left:18px;padding-right:18px}
+  header.site-nav{padding:14px 0}
+  nav.links{gap:14px}
+  nav.links a:nth-child(n+3){display:none}
+  main{padding-top:48px}
+  h1{font-size:clamp(44px,14vw,62px)}
+  .move-grid{grid-template-columns:1fr}
+  .move-card{min-height:104px}
+  .domain-group{margin-top:48px}
+}
diff --git a/playground/public/llm-guide.html b/playground/public/llm-guide.html
index 725d552..dd19a4d 100644
--- a/playground/public/llm-guide.html
+++ b/playground/public/llm-guide.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/arm-circles.html b/playground/public/moves/arm-circles.html
index 226a0e8..052b5f9 100644
--- a/playground/public/moves/arm-circles.html
+++ b/playground/public/moves/arm-circles.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Arm circles","description":"How to do the arm circles (warm-up): 3 phases targeting the deltoids, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Up & forward","text":"Sweep the arms up and forward"},{"@type":"HowToStep","name":"Out to sides","text":"Open the arms out wide to the sides"},{"@type":"HowToStep","name":"Down & round","text":"Lower and continue the circle back to the start"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/bent-over-row.html b/playground/public/moves/bent-over-row.html
index 6d1ad2f..e78bc5d 100644
--- a/playground/public/moves/bent-over-row.html
+++ b/playground/public/moves/bent-over-row.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Bent-over row","description":"How to do the bent-over row (fitness): 4 phases targeting the lats, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Set the hinge","text":"Hinge to a flat back, let the arms hang straight down"},{"@type":"HowToStep","name":"Row","text":"Drive the elbows up past the ribs, squeeze the shoulder blades"},{"@type":"HowToStep","name":"Lower","text":"Lower the bar under control, keep the back flat"},{"@type":"HowToStep","name":"Stand","text":"Stand up tall between sets"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/biceps.html b/playground/public/moves/biceps.html
index 3bc3255..7d76678 100644
--- a/playground/public/moves/biceps.html
+++ b/playground/public/moves/biceps.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Biceps curl","description":"How to do the biceps curl (fitness): 2 phases targeting the biceps, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Curl","text":"Curl up, keep the elbows tucked at your sides"},{"@type":"HowToStep","name":"Lower","text":"Lower under control: don't swing"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/bicycle-crunch.html b/playground/public/moves/bicycle-crunch.html
index 618e1de..da2b243 100644
--- a/playground/public/moves/bicycle-crunch.html
+++ b/playground/public/moves/bicycle-crunch.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Bicycle crunch","description":"How to do the bicycle crunch (fitness): 4 phases targeting the obliques, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Set","text":"Hands by the ears, knees over the hips, shoulders lifted"},{"@type":"HowToStep","name":"Right to left","text":"Right elbow toward the left knee; the right leg extends long"},{"@type":"HowToStep","name":"Left to right","text":"Switch: left elbow toward the right knee"},{"@type":"HowToStep","name":"Center","text":"Return to center, knees stacked over the hips"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/bow.html b/playground/public/moves/bow.html
index 72bd84b..bf1bd2a 100644
--- a/playground/public/moves/bow.html
+++ b/playground/public/moves/bow.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Standing bow","description":"How to do the standing bow (martial arts): 2 phases targeting the hamstrings, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Bow","text":"Hinge forward from the hips into a respectful bow, back flat"},{"@type":"HowToStep","name":"Rise","text":"Return smoothly to standing"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/box-squat.html b/playground/public/moves/box-squat.html
index 4648b64..d336bf1 100644
--- a/playground/public/moves/box-squat.html
+++ b/playground/public/moves/box-squat.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Box squat","description":"How to do the box squat (fitness): 2 phases targeting the quadriceps, chair, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Sit back","text":"Push the hips back and sit lightly onto the box"},{"@type":"HowToStep","name":"Stand","text":"Drive up to standing without bouncing off the box"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/box-step-taps.html b/playground/public/moves/box-step-taps.html
index f309496..9a26790 100644
--- a/playground/public/moves/box-step-taps.html
+++ b/playground/public/moves/box-step-taps.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Box step taps","description":"How to do the box step taps (warm-up): 4 phases targeting the hip flexors, box, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Right tap","text":"Tap the right foot lightly on top of the box"},{"@type":"HowToStep","name":"Right down","text":"Return the right foot to the floor"},{"@type":"HowToStep","name":"Left tap","text":"Tap the left foot on the box"},{"@type":"HowToStep","name":"Left down","text":"Back to the floor: keep a light, quick rhythm"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/box-step.html b/playground/public/moves/box-step.html
index 1ff7c06..b16db4b 100644
--- a/playground/public/moves/box-step.html
+++ b/playground/public/moves/box-step.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Box step","description":"How to do the box step (dance): 4 phases targeting the full body, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Step forward-right","text":"Step the right foot forward and out to the corner"},{"@type":"HowToStep","name":"Close the feet","text":"Bring the left foot to meet it, standing tall on the corner"},{"@type":"HowToStep","name":"Step back-left","text":"Step the left foot back to the start on the diagonal"},{"@type":"HowToStep","name":"Close home","text":"Close the feet together, back home and ready to repeat"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/calf-raise.html b/playground/public/moves/calf-raise.html
index e69b456..641bd6b 100644
--- a/playground/public/moves/calf-raise.html
+++ b/playground/public/moves/calf-raise.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Single-leg calf raise","description":"How to do the single-leg calf raise (fitness): 2 phases targeting the calves, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Rise","text":"Balance on the right foot and rise onto the ball of the foot"},{"@type":"HowToStep","name":"Lower","text":"Lower the right heel slowly under control"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/chair.html b/playground/public/moves/chair.html
index 849a090..cc5f34e 100644
--- a/playground/public/moves/chair.html
+++ b/playground/public/moves/chair.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Chair pose","description":"How to do the chair pose (yoga): 2 phases targeting the quadriceps, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Sink","text":"Sit the hips back and down, reach the arms overhead"},{"@type":"HowToStep","name":"Rise","text":"Press through the feet to stand, arms float down"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/chasse.html b/playground/public/moves/chasse.html
index 9cb8433..3248075 100644
--- a/playground/public/moves/chasse.html
+++ b/playground/public/moves/chasse.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Chassé","description":"How to do the chassé (dance): 4 phases targeting the full body, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Reach & push","text":"Reach the lead foot out and push off to travel sideways"},{"@type":"HowToStep","name":"Gallop close","text":"Chase the trailing foot to the lead: feet meet in the air"},{"@type":"HowToStep","name":"Reach & push back","text":"Change direction and travel back the other way"},{"@type":"HowToStep","name":"Gallop home","text":"Close home, ready to chassé again"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/chest-opener.html b/playground/public/moves/chest-opener.html
index 7a03131..25d2503 100644
--- a/playground/public/moves/chest-opener.html
+++ b/playground/public/moves/chest-opener.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Chest opener","description":"How to do the chest opener (desk & posture): 2 phases targeting the pectorals, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Open","text":"Reach the arms back and lift the chest: open the front line"},{"@type":"HowToStep","name":"Release","text":"Return to neutral, ribs stacked over the hips"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/cobra.html b/playground/public/moves/cobra.html
index b663665..a94b3b0 100644
--- a/playground/public/moves/cobra.html
+++ b/playground/public/moves/cobra.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Cobra","description":"How to do the cobra (yoga): 2 phases targeting the spinal erectors, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Lift","text":"Press the palms into the floor and lift the chest, shoulders rolling back"},{"@type":"HowToStep","name":"Lower","text":"Lower the chest back to the floor with control"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/cross-body-reach.html b/playground/public/moves/cross-body-reach.html
index 84c6fef..a89597d 100644
--- a/playground/public/moves/cross-body-reach.html
+++ b/playground/public/moves/cross-body-reach.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Cross-body reach","description":"How to do the cross-body reach (physiotherapy): 4 phases targeting the obliques, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Reach across right","text":"Pull the right arm across the chest toward the left shoulder"},{"@type":"HowToStep","name":"Return","text":"Release back to center"},{"@type":"HowToStep","name":"Reach across left","text":"Pull the left arm across the chest toward the right shoulder"},{"@type":"HowToStep","name":"Center","text":"Return to center"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/crunch.html b/playground/public/moves/crunch.html
index c3053ad..2e95da7 100644
--- a/playground/public/moves/crunch.html
+++ b/playground/public/moves/crunch.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Crunch","description":"How to do the crunch (fitness): 3 phases targeting the abdominals, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Set up","text":"Set up"},{"@type":"HowToStep","name":"Curl up","text":"Curl the shoulders off the floor, ribs toward the hips"},{"@type":"HowToStep","name":"Lower","text":"Lower the upper back down with control"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/dance-phrase.html b/playground/public/moves/dance-phrase.html
index 7986bf9..4bc86e9 100644
--- a/playground/public/moves/dance-phrase.html
+++ b/playground/public/moves/dance-phrase.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Dance phrase","description":"How to do the dance phrase (dance): 4 phases targeting the full body, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"1-2 - breath, arms to second","text":"Turn out, open the arms to second, lift through the crown"},{"@type":"HowToStep","name":"3-4 - demi-plié","text":"Bend the knees over the toes, arms round down through first"},{"@type":"HowToStep","name":"5-6 - relevé, arms en haut","text":"Press up to relevé and lift the arms into a frame overhead"},{"@type":"HowToStep","name":"7-8 - close","text":"Lower the heels and resolve, arms floating back to the sides"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/dead-bug.html b/playground/public/moves/dead-bug.html
index 67aec43..3eede1f 100644
--- a/playground/public/moves/dead-bug.html
+++ b/playground/public/moves/dead-bug.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Dead bug","description":"How to do the dead bug (physiotherapy): 4 phases targeting the abdominals, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Set","text":"Arms reach to the ceiling, knees stacked over the hips"},{"@type":"HowToStep","name":"Extend right arm & left leg","text":"Lower the right arm overhead and the left leg toward the floor"},{"@type":"HowToStep","name":"Switch","text":"Return and switch: left arm and right leg reach out"},{"@type":"HowToStep","name":"Return","text":"Bring everything back to the start position"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/dead-hang.html b/playground/public/moves/dead-hang.html
index 9da9ca5..b588863 100644
--- a/playground/public/moves/dead-hang.html
+++ b/playground/public/moves/dead-hang.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Dead hang","description":"How to do the dead hang (fitness): 3 phases targeting the lats, bar, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Reach","text":"Reach up and grip the bar"},{"@type":"HowToStep","name":"Hang","text":"Relax into a long, straight-arm hang"},{"@type":"HowToStep","name":"Down","text":"Drop down off the bar and shake out the arms"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/deadlift.html b/playground/public/moves/deadlift.html
index 6c7866c..0ac62aa 100644
--- a/playground/public/moves/deadlift.html
+++ b/playground/public/moves/deadlift.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Deadlift","description":"How to do the deadlift (fitness): 2 phases targeting the hamstrings & glutes, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Lower","text":"Push the hips back and hinge with a flat back: let the arms hang to the bar"},{"@type":"HowToStep","name":"Lift","text":"Drive the hips forward to stand tall, bar close to the body"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/demi-plie.html b/playground/public/moves/demi-plie.html
index b57d31a..9f9c8a3 100644
--- a/playground/public/moves/demi-plie.html
+++ b/playground/public/moves/demi-plie.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Demi-plié","description":"How to do the demi-plié (dance): 2 phases targeting the quadriceps, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Plié","text":"Turn out from the hips and bend the knees over the toes: heels down"},{"@type":"HowToStep","name":"Straighten","text":"Press the floor away and rise to a tall first position"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/elbow-forearm.html b/playground/public/moves/elbow-forearm.html
index 8c0c88f..ee59854 100644
--- a/playground/public/moves/elbow-forearm.html
+++ b/playground/public/moves/elbow-forearm.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Elbow flexion & forearm rotation","description":"How to do the elbow flexion & forearm rotation (education): 2 phases targeting the biceps, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Flex & supinate","text":"Bend the elbows and turn the palms up: flexion with supination"},{"@type":"HowToStep","name":"Extend & pronate","text":"Straighten and turn the palms down: extension with pronation"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/finger-spell.html b/playground/public/moves/finger-spell.html
index 2caf7b4..3a24bc3 100644
--- a/playground/public/moves/finger-spell.html
+++ b/playground/public/moves/finger-spell.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Finger-spelling","description":"How to do the finger-spelling (sign language): 5 phases targeting the forearms, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Present the hand","text":"Bring the hand up in front of the chest, palm forward"},{"@type":"HowToStep","name":"Letter A","text":"A: fingers curled into a fist, thumb resting alongside"},{"@type":"HowToStep","name":"Letter B","text":"B: fingers straight and together, thumb across the palm"},{"@type":"HowToStep","name":"Letter I","text":"I: only the little finger stands up"},{"@type":"HowToStep","name":"Relax","text":"Open the hand and lower the arm"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/fold.html b/playground/public/moves/fold.html
index cc61019..f7e0bc7 100644
--- a/playground/public/moves/fold.html
+++ b/playground/public/moves/fold.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Standing roll-down","description":"How to do the standing roll-down (mobility): 2 phases targeting the spinal erectors, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Roll down","text":"Drop the chin and round down one vertebra at a time"},{"@type":"HowToStep","name":"Roll up","text":"Stack the spine back up to standing"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/forward-lunge.html b/playground/public/moves/forward-lunge.html
index 9eddf18..8c39bd8 100644
--- a/playground/public/moves/forward-lunge.html
+++ b/playground/public/moves/forward-lunge.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Forward lunge","description":"How to do the forward lunge (fitness): 2 phases targeting the quadriceps, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Lunge","text":"Step forward and lower the back knee toward the floor"},{"@type":"HowToStep","name":"Drive up","text":"Push through the front heel to stand tall"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/front-kick.html b/playground/public/moves/front-kick.html
index f7f78d0..f4cdff1 100644
--- a/playground/public/moves/front-kick.html
+++ b/playground/public/moves/front-kick.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Front kick","description":"How to do the front kick (martial arts): 4 phases targeting the hip flexors, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Chamber","text":"Drive the right knee up to chamber the kick"},{"@type":"HowToStep","name":"Extend","text":"Snap the lower leg out: strike with the ball of the foot"},{"@type":"HowToStep","name":"Re-chamber","text":"Snap the foot back to chamber"},{"@type":"HowToStep","name":"Return","text":"Set the foot back down to a fighting stance"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/glute-bridge.html b/playground/public/moves/glute-bridge.html
index cda516f..88541af 100644
--- a/playground/public/moves/glute-bridge.html
+++ b/playground/public/moves/glute-bridge.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Glute bridge","description":"How to do the glute bridge (physiotherapy): 2 phases targeting the glutes, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Bridge up","text":"Press through the feet and lift the hips toward the ceiling"},{"@type":"HowToStep","name":"Lower","text":"Lower the hips back to the floor, one vertebra at a time"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/good-morning.html b/playground/public/moves/good-morning.html
index 32c831d..de2fe58 100644
--- a/playground/public/moves/good-morning.html
+++ b/playground/public/moves/good-morning.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Good morning","description":"How to do the good morning (physiotherapy): 2 phases targeting the hamstrings, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Hinge","text":"Hands behind the head, hinge from the hips with a flat back"},{"@type":"HowToStep","name":"Stand","text":"Squeeze the glutes to return to standing tall"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/grapevine.html b/playground/public/moves/grapevine.html
index 97d7692..db14389 100644
--- a/playground/public/moves/grapevine.html
+++ b/playground/public/moves/grapevine.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Grapevine","description":"How to do the grapevine (dance): 4 phases targeting the full body, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Step out","text":"Step the leading foot out to the side"},{"@type":"HowToStep","name":"Cross behind","text":"Cross the trailing foot behind and keep travelling"},{"@type":"HowToStep","name":"Step out again","text":"Step out to the side once more"},{"@type":"HowToStep","name":"Return home","text":"Travel back the other way to the starting spot"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/hamstring-curl.html b/playground/public/moves/hamstring-curl.html
index 40c5027..f35396f 100644
--- a/playground/public/moves/hamstring-curl.html
+++ b/playground/public/moves/hamstring-curl.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Standing hamstring curl","description":"How to do the standing hamstring curl (physiotherapy): 2 phases targeting the hamstrings, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Curl","text":"Bend the right knee, drawing the heel toward the glute"},{"@type":"HowToStep","name":"Lower","text":"Lower the foot back to the floor"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/hand-wave.html b/playground/public/moves/hand-wave.html
index ec42faa..45d2c7b 100644
--- a/playground/public/moves/hand-wave.html
+++ b/playground/public/moves/hand-wave.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Hand wave","description":"How to do the hand wave (sign language): 4 phases targeting the forearms, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Raise","text":"Raise the hand up high, palm open"},{"@type":"HowToStep","name":"Wave out","text":"Tip the fingers out..."},{"@type":"HowToStep","name":"Wave in","text":"...and back again: a friendly wave"},{"@type":"HowToStep","name":"Lower","text":"Lower the arm back to your side"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/hanging-knee-raise.html b/playground/public/moves/hanging-knee-raise.html
index a6e6336..a7e2588 100644
--- a/playground/public/moves/hanging-knee-raise.html
+++ b/playground/public/moves/hanging-knee-raise.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Hanging knee raise","description":"How to do the hanging knee raise (fitness): 5 phases targeting the abdominals, bar, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Reach","text":"Reach up and grip the bar"},{"@type":"HowToStep","name":"Grip","text":"Hang from the bar overhead, arms long, body still"},{"@type":"HowToStep","name":"Raise knees","text":"Draw both knees up toward the chest"},{"@type":"HowToStep","name":"Lower","text":"Lower the legs under control, staying in a steady hang"},{"@type":"HowToStep","name":"Release","text":"Drop off the bar and rest"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/heel-raises.html b/playground/public/moves/heel-raises.html
index 807a9e7..55fc048 100644
--- a/playground/public/moves/heel-raises.html
+++ b/playground/public/moves/heel-raises.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Heel raises","description":"How to do the heel raises (physiotherapy): 2 phases targeting the calves, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Rise","text":"Press through the balls of the feet and lift the heels"},{"@type":"HowToStep","name":"Lower","text":"Lower the heels under control"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/high-knee-march.html b/playground/public/moves/high-knee-march.html
index 6e61b61..7c4f293 100644
--- a/playground/public/moves/high-knee-march.html
+++ b/playground/public/moves/high-knee-march.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a High-knee march","description":"How to do the high-knee march (warm-up): 3 phases targeting the hip flexors, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Right knee up","text":"Drive the right knee up to hip height, opposite arm swings"},{"@type":"HowToStep","name":"Switch","text":"Plant and drive the left knee up"},{"@type":"HowToStep","name":"Down","text":"Return to a tall, ready stance"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/hip-abduction.html b/playground/public/moves/hip-abduction.html
index cbd0fb6..e8441b1 100644
--- a/playground/public/moves/hip-abduction.html
+++ b/playground/public/moves/hip-abduction.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Standing hip abduction","description":"How to do the standing hip abduction (physiotherapy): 2 phases targeting the glutes, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Lift","text":"Lift the right leg out to the side, keep the torso tall"},{"@type":"HowToStep","name":"Lower","text":"Lower the leg back to the midline"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/hip-flexion.html b/playground/public/moves/hip-flexion.html
index a102dfe..7c1d721 100644
--- a/playground/public/moves/hip-flexion.html
+++ b/playground/public/moves/hip-flexion.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Hip flexion","description":"How to do the hip flexion (education): 2 phases targeting the hip flexors, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Lift","text":"Raise the straight right leg forward: sagittal-plane hip flexion"},{"@type":"HowToStep","name":"Lower","text":"Lower the leg back under the hip"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/horse-stance.html b/playground/public/moves/horse-stance.html
index 9bf7916..5bb02b0 100644
--- a/playground/public/moves/horse-stance.html
+++ b/playground/public/moves/horse-stance.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Horse stance","description":"How to do the horse stance (martial arts): 2 phases targeting the quadriceps, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Sink","text":"Sink into a wide, low stance: thighs working, back tall, guard up"},{"@type":"HowToStep","name":"Rise","text":"Press the floor away and stand tall"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/index.html b/playground/public/moves/index.html
index 27ab6e2..4c0b6c0 100644
--- a/playground/public/moves/index.html
+++ b/playground/public/moves/index.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/jab-cross.html b/playground/public/moves/jab-cross.html
index b68bc6e..b8bcd02 100644
--- a/playground/public/moves/jab-cross.html
+++ b/playground/public/moves/jab-cross.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Jab-cross","description":"How to do the jab-cross (martial arts): 4 phases targeting the shoulders, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Jab","text":"Snap the lead (left) hand straight out, rotating slightly into it"},{"@type":"HowToStep","name":"Recoil jab","text":"Bring the hand back to guard"},{"@type":"HowToStep","name":"Cross","text":"Drive the rear (right) hand across, rotating the trunk"},{"@type":"HowToStep","name":"Recoil cross","text":"Return to guard, hands high"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/jumping-jacks.html b/playground/public/moves/jumping-jacks.html
index 45f9bdc..1970722 100644
--- a/playground/public/moves/jumping-jacks.html
+++ b/playground/public/moves/jumping-jacks.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Jumping jacks","description":"How to do the jumping jacks (warm-up): 2 phases targeting the full body, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Out","text":"Arms sweep overhead as the feet jump wide"},{"@type":"HowToStep","name":"In","text":"Arms down, feet back together"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/knee-flexion.html b/playground/public/moves/knee-flexion.html
index aaf4cfa..fdbd9f4 100644
--- a/playground/public/moves/knee-flexion.html
+++ b/playground/public/moves/knee-flexion.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Knee flexion","description":"How to do the knee flexion (education): 2 phases targeting the hamstrings, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Flex","text":"Bend the right knee, heel toward the glutes: the knee's single plane"},{"@type":"HowToStep","name":"Extend","text":"Lower the shin back to standing"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/lateral.html b/playground/public/moves/lateral.html
index d0872de..8ed30bd 100644
--- a/playground/public/moves/lateral.html
+++ b/playground/public/moves/lateral.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Lateral raise","description":"How to do the lateral raise (fitness): 2 phases targeting the deltoids, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Raise","text":"Lift out to shoulder height, soft elbows"},{"@type":"HowToStep","name":"Lower","text":"Lower slowly, resist on the way down"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/make-a-fist.html b/playground/public/moves/make-a-fist.html
index 52c8d0c..3286774 100644
--- a/playground/public/moves/make-a-fist.html
+++ b/playground/public/moves/make-a-fist.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Make a fist","description":"How to do the make a fist (hand therapy): 2 phases targeting the forearms, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Close","text":"Curl the fingers and thumb in to make a closed fist"},{"@type":"HowToStep","name":"Open","text":"Spread the fingers wide open"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/mountain-climber.html b/playground/public/moves/mountain-climber.html
index d06e1d1..ff33289 100644
--- a/playground/public/moves/mountain-climber.html
+++ b/playground/public/moves/mountain-climber.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Mountain climber","description":"How to do the mountain climber (fitness): 3 phases targeting the abdominals, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Right knee in","text":"Drive the right knee toward the chest"},{"@type":"HowToStep","name":"Switch","text":"Switch fast: left knee drives in"},{"@type":"HowToStep","name":"Out","text":"Return to a strong plank"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/neck-side-stretch.html b/playground/public/moves/neck-side-stretch.html
index 3da4fb7..eb91226 100644
--- a/playground/public/moves/neck-side-stretch.html
+++ b/playground/public/moves/neck-side-stretch.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Neck side stretch","description":"How to do the neck side stretch (desk & posture): 3 phases targeting the neck, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Ear to right","text":"Gently take the right ear toward the right shoulder"},{"@type":"HowToStep","name":"Ear to left","text":"Pass through center and lengthen to the left"},{"@type":"HowToStep","name":"Center","text":"Float the head back to neutral"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/neck.html b/playground/public/moves/neck.html
index 37e929b..622e9fe 100644
--- a/playground/public/moves/neck.html
+++ b/playground/public/moves/neck.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Neck rotation","description":"How to do the neck rotation (physiotherapy): 3 phases targeting the neck, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Look right","text":"Turn slowly to look over the right shoulder"},{"@type":"HowToStep","name":"Look left","text":"Pass through center and turn to the left"},{"@type":"HowToStep","name":"Center","text":"Return the head to neutral"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/overhead-reach.html b/playground/public/moves/overhead-reach.html
index 43d89e4..5f2ef6a 100644
--- a/playground/public/moves/overhead-reach.html
+++ b/playground/public/moves/overhead-reach.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Overhead reach reset","description":"How to do the overhead reach reset (desk & posture): 2 phases targeting the deltoids, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Reach up","text":"Reach both arms tall overhead and lengthen the spine"},{"@type":"HowToStep","name":"Lower","text":"Float the arms down and stack tall"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/pinch-grip.html b/playground/public/moves/pinch-grip.html
index f54e51f..2800701 100644
--- a/playground/public/moves/pinch-grip.html
+++ b/playground/public/moves/pinch-grip.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Pinch grip","description":"How to do the pinch grip (hand therapy): 2 phases targeting the forearms, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Pinch","text":"Bring the thumb and index fingertip together in a pinch"},{"@type":"HowToStep","name":"Release","text":"Open the hand and release"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/pirouette.html b/playground/public/moves/pirouette.html
index c6c72c7..e36699b 100644
--- a/playground/public/moves/pirouette.html
+++ b/playground/public/moves/pirouette.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Pirouette","description":"How to do the pirouette (dance): 3 phases targeting the full body, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Prep - plié","text":"Plié to load the turn, arms rounded low in first"},{"@type":"HowToStep","name":"Spot & spin","text":"Push up to relevé, pull the arms in, and spin a full turn"},{"@type":"HowToStep","name":"Land","text":"Land softly through the feet, arms floating back to the sides"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/plank-hold.html b/playground/public/moves/plank-hold.html
index c36e167..8ce481c 100644
--- a/playground/public/moves/plank-hold.html
+++ b/playground/public/moves/plank-hold.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Plank hold","description":"How to do the plank hold (fitness): 2 phases targeting the abdominals, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Brace","text":"Lower onto the forearms, elbows directly under the shoulders"},{"@type":"HowToStep","name":"Hold","text":"Brace the core: one straight line from head to heels"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/port-de-bras.html b/playground/public/moves/port-de-bras.html
index d889086..3440d09 100644
--- a/playground/public/moves/port-de-bras.html
+++ b/playground/public/moves/port-de-bras.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Port de bras","description":"How to do the port de bras (dance): 4 phases targeting the deltoids, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"First position","text":"Arms rounded low in front: first position, shoulders soft"},{"@type":"HowToStep","name":"Second position","text":"Open the arms out to the sides: second position, wrists lifted"},{"@type":"HowToStep","name":"Fifth en haut","text":"Float the arms into a rounded frame overhead: fifth position"},{"@type":"HowToStep","name":"Lower","text":"Lower through second back to the start, eyes following the hands"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/posture.html b/playground/public/moves/posture.html
index 528a452..d281751 100644
--- a/playground/public/moves/posture.html
+++ b/playground/public/moves/posture.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Desk posture reset","description":"How to do the desk posture reset (desk & posture): 2 phases targeting the spinal erectors, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Slouch","text":"The collapsed desk posture: rounded back, head drifting forward"},{"@type":"HowToStep","name":"Stack tall","text":"Stack head over ribs over hips, chest open, shoulders soft"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/pull-up.html b/playground/public/moves/pull-up.html
index 8e873af..7fbd542 100644
--- a/playground/public/moves/pull-up.html
+++ b/playground/public/moves/pull-up.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Pull-up","description":"How to do the pull-up (fitness): 5 phases targeting the lats, bar, advanced level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Reach","text":"Reach up and grip the bar"},{"@type":"HowToStep","name":"Hang","text":"Hang from the bar, arms long, shoulders active"},{"@type":"HowToStep","name":"Pull up","text":"Pull the chest toward the bar, driving the elbows down"},{"@type":"HowToStep","name":"Lower","text":"Lower under control back to a full hang"},{"@type":"HowToStep","name":"Release","text":"Drop off the bar and rest"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/quad-stretch.html b/playground/public/moves/quad-stretch.html
index 9bd63a7..8100e7b 100644
--- a/playground/public/moves/quad-stretch.html
+++ b/playground/public/moves/quad-stretch.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Standing quad stretch","description":"How to do the standing quad stretch (mobility): 2 phases targeting the quadriceps, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Catch the foot","text":"Bend the right knee back and reach the hand for the ankle"},{"@type":"HowToStep","name":"Release","text":"Release the foot and return to standing"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/quarter-turns.html b/playground/public/moves/quarter-turns.html
index 59c0041..95cfc98 100644
--- a/playground/public/moves/quarter-turns.html
+++ b/playground/public/moves/quarter-turns.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Quarter turns","description":"How to do the quarter turns (locomotion): 4 phases targeting the full body, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Face right","text":"Small dip and pivot a quarter-turn to the right"},{"@type":"HowToStep","name":"Face back","text":"Rise, then pivot another quarter-turn to face the back"},{"@type":"HowToStep","name":"Face left","text":"Dip and pivot again to face the far side"},{"@type":"HowToStep","name":"Face front","text":"Rise and complete the circle, back to front"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/releve.html b/playground/public/moves/releve.html
index 0307073..601f66a 100644
--- a/playground/public/moves/releve.html
+++ b/playground/public/moves/releve.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Relevé","description":"How to do the relevé (dance): 2 phases targeting the calves, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Rise","text":"Turn out and rise onto the balls of the feet: lengthen up tall"},{"@type":"HowToStep","name":"Lower","text":"Lower the heels with control, staying lifted through the spine"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/seated-forward-fold.html b/playground/public/moves/seated-forward-fold.html
index a9cfdb0..7216777 100644
--- a/playground/public/moves/seated-forward-fold.html
+++ b/playground/public/moves/seated-forward-fold.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Seated forward fold","description":"How to do the seated forward fold (yoga): 2 phases targeting the hamstrings, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Fold","text":"Hinge forward from the hips over the legs, reaching toward the feet"},{"@type":"HowToStep","name":"Rise","text":"Roll back up to a tall seated spine"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/shoulder-abduction.html b/playground/public/moves/shoulder-abduction.html
index 5b3f64a..c498dc0 100644
--- a/playground/public/moves/shoulder-abduction.html
+++ b/playground/public/moves/shoulder-abduction.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Shoulder abduction","description":"How to do the shoulder abduction (education): 2 phases targeting the deltoids, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Abduct","text":"Arms sweep out and up to the sides: frontal-plane abduction"},{"@type":"HowToStep","name":"Adduct","text":"Lower back to the sides through the same arc"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/shoulder-rolls.html b/playground/public/moves/shoulder-rolls.html
index 95ec11a..1a185d1 100644
--- a/playground/public/moves/shoulder-rolls.html
+++ b/playground/public/moves/shoulder-rolls.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Shoulder rolls","description":"How to do the shoulder rolls (desk & posture): 3 phases targeting the trapezius, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Lift & forward","text":"Roll the shoulders up and forward"},{"@type":"HowToStep","name":"Back & down","text":"Squeeze the shoulder blades back and down"},{"@type":"HowToStep","name":"Reset","text":"Return to a tall, neutral posture"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/shoulder.html b/playground/public/moves/shoulder.html
index 93dc7b0..7d3562c 100644
--- a/playground/public/moves/shoulder.html
+++ b/playground/public/moves/shoulder.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Shoulder flexion","description":"How to do the shoulder flexion (physiotherapy): 2 phases targeting the deltoids, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Raise","text":"Reach overhead, keep the ribs down"},{"@type":"HowToStep","name":"Lower","text":"Control the descent back to the sides"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/sidebend.html b/playground/public/moves/sidebend.html
index e8133d2..06433e1 100644
--- a/playground/public/moves/sidebend.html
+++ b/playground/public/moves/sidebend.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Standing side bend","description":"How to do the standing side bend (yoga): 2 phases targeting the obliques, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Reach over","text":"Reach tall, then arc gently over to one side"},{"@type":"HowToStep","name":"Return","text":"Lengthen back up through the crown of the head"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/sit-to-stand.html b/playground/public/moves/sit-to-stand.html
index d80656c..6e4c780 100644
--- a/playground/public/moves/sit-to-stand.html
+++ b/playground/public/moves/sit-to-stand.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Sit to stand","description":"How to do the sit to stand (functional): 2 phases targeting the quadriceps, chair, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Sit","text":"Hinge the hips back and lower with control to sit on the chair"},{"@type":"HowToStep","name":"Stand","text":"Drive through the heels and reach tall to stand"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/spine-rotation.html b/playground/public/moves/spine-rotation.html
index 08a2d72..ae80614 100644
--- a/playground/public/moves/spine-rotation.html
+++ b/playground/public/moves/spine-rotation.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Spine rotation","description":"How to do the spine rotation (education): 3 phases targeting the obliques, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Rotate right","text":"Rotate the trunk to the right: transverse-plane spinal rotation"},{"@type":"HowToStep","name":"Rotate left","text":"Pass through center and rotate to the left"},{"@type":"HowToStep","name":"Center","text":"Return to a neutral facing"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/squat.html b/playground/public/moves/squat.html
index 36f7758..3283212 100644
--- a/playground/public/moves/squat.html
+++ b/playground/public/moves/squat.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Body-weight squat","description":"How to do the body-weight squat (fitness): 2 phases targeting the quadriceps, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Descend","text":"Sit the hips back, chest proud, knees track over the toes"},{"@type":"HowToStep","name":"Drive up","text":"Drive through the heels to stand tall"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/step-up.html b/playground/public/moves/step-up.html
index ecb8184..cefdb0d 100644
--- a/playground/public/moves/step-up.html
+++ b/playground/public/moves/step-up.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Step-up","description":"How to do the step-up (functional): 4 phases targeting the quadriceps, box, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Plant the foot","text":"Plant the right foot up on top of the box"},{"@type":"HowToStep","name":"Drive up","text":"Drive through the top foot to stand tall on the box"},{"@type":"HowToStep","name":"Step down","text":"Lower the trailing foot back to the floor"},{"@type":"HowToStep","name":"Off the box","text":"Step the lead foot down to meet it, standing tall on the floor"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/superman.html b/playground/public/moves/superman.html
index 0553c66..2dc3da1 100644
--- a/playground/public/moves/superman.html
+++ b/playground/public/moves/superman.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Superman","description":"How to do the superman (fitness): 2 phases targeting the spinal erectors, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Lift","text":"Lift the arms, chest, and legs off the floor"},{"@type":"HowToStep","name":"Lower","text":"Lower everything back down with control"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/supine-leg-raise.html b/playground/public/moves/supine-leg-raise.html
index f08685a..9f42a35 100644
--- a/playground/public/moves/supine-leg-raise.html
+++ b/playground/public/moves/supine-leg-raise.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Lying leg raise","description":"How to do the lying leg raise (fitness): 2 phases targeting the abdominals, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Raise","text":"Lift the straight legs toward vertical, low back pressed down"},{"@type":"HowToStep","name":"Lower","text":"Lower the legs slowly without arching the back"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/tendu.html b/playground/public/moves/tendu.html
index f2f123d..64f5127 100644
--- a/playground/public/moves/tendu.html
+++ b/playground/public/moves/tendu.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Tendu","description":"How to do the tendu (dance): 2 phases targeting the hip flexors, body weight, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Point front","text":"Brush the right foot forward to a fully pointed tendu, leg turned out"},{"@type":"HowToStep","name":"Close","text":"Draw the foot back to first position, heel down"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/touch-toes.html b/playground/public/moves/touch-toes.html
index 86ce06e..4410d59 100644
--- a/playground/public/moves/touch-toes.html
+++ b/playground/public/moves/touch-toes.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Touch your toes","description":"How to do the touch your toes (mobility): 2 phases targeting the hamstrings, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Fold","text":"Hinge from the hips, bend the knees, and reach your hands down toward your ankles"},{"@type":"HowToStep","name":"Rise","text":"Stack the spine back up to standing tall"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/triceps-dips.html b/playground/public/moves/triceps-dips.html
index cce8e7b..9e3cd4a 100644
--- a/playground/public/moves/triceps-dips.html
+++ b/playground/public/moves/triceps-dips.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Triceps dips","description":"How to do the triceps dips (fitness): 4 phases targeting the triceps, chair, intermediate level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Support","text":"Press up to a straight-arm support between the bars"},{"@type":"HowToStep","name":"Lower","text":"Bend the elbows to lower the chest, elbows tracking back"},{"@type":"HowToStep","name":"Press","text":"Press through the palms to straighten the arms"},{"@type":"HowToStep","name":"Dismount","text":"Step down and stand tall"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/twist.html b/playground/public/moves/twist.html
index 1f65d58..3b93c92 100644
--- a/playground/public/moves/twist.html
+++ b/playground/public/moves/twist.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Standing spinal twist","description":"How to do the standing spinal twist (desk & posture): 3 phases targeting the obliques, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Twist right","text":"Rotate through the mid-back, arms at shoulder height, hips facing forward"},{"@type":"HowToStep","name":"Twist left","text":"Pass through center and rotate to the other side"},{"@type":"HowToStep","name":"Center","text":"Unwind back to center"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/walk-cycle.html b/playground/public/moves/walk-cycle.html
index 7db147d..81d7328 100644
--- a/playground/public/moves/walk-cycle.html
+++ b/playground/public/moves/walk-cycle.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Walk & turn","description":"How to do the walk & turn (locomotion): 5 phases targeting the full body, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Step right","text":"Walk forward: right foot leads, opposite arm swings through"},{"@type":"HowToStep","name":"Step left","text":"Left foot leads, arms swap: keep travelling forward"},{"@type":"HowToStep","name":"About-face","text":"Plant and turn a half-turn to face back the way you came"},{"@type":"HowToStep","name":"Walk back","text":"Walk back toward the start"},{"@type":"HowToStep","name":"Arrive & square up","text":"Arrive home and turn to face front again"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/wall-sit.html b/playground/public/moves/wall-sit.html
index 95ff58f..376fc8f 100644
--- a/playground/public/moves/wall-sit.html
+++ b/playground/public/moves/wall-sit.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Wall sit","description":"How to do the wall sit (fitness): 2 phases targeting the quadriceps, wall, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"Slide down","text":"Slide the back down the wall until the thighs are parallel"},{"@type":"HowToStep","name":"Hold & rise","text":"Press through the heels and slide back up the wall"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/moves/waltz-box.html b/playground/public/moves/waltz-box.html
index 3ea982f..957895f 100644
--- a/playground/public/moves/waltz-box.html
+++ b/playground/public/moves/waltz-box.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to do a Waltz box step","description":"How to do the waltz box step (dance): 4 phases targeting the full body, body weight, beginner level. Animated 3D guide generated from Posecode, a text-to-motion language for LLMs.","step":[{"@type":"HowToStep","name":"1 - forward, rise","text":"Step forward onto the right foot and rise, arms in a soft frame"},{"@type":"HowToStep","name":"2 - side, lower","text":"Side step to the corner and lower through the heels"},{"@type":"HowToStep","name":"3 - back, rise","text":"Step back onto the left foot and rise again"},{"@type":"HowToStep","name":"4 - close home","text":"Close to the start, completing the box"}]}</script>
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/public/spec.html b/playground/public/spec.html
index 8b9cfe3..4c54ae3 100644
--- a/playground/public/spec.html
+++ b/playground/public/spec.html
@@ -98,6 +98,7 @@
 footer.site-footer p{font-size:12.5px;color:var(--muted);margin:0 0 6px;max-width:70ch}
 @media(max-width:600px){.wrap{padding:0 18px}}
 </style>
+    <link rel="stylesheet" href="/content-theme.css" />
     
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
diff --git a/playground/src/landing.ts b/playground/src/landing.ts
index 2152d20..547b0ce 100644
--- a/playground/src/landing.ts
+++ b/playground/src/landing.ts
@@ -29,8 +29,9 @@ function initHero(): void {
   void import("posecode-render").then(({ createViewer }) => {
     const viewer = createViewer(heroCanvas, {
       autoRotate: !prefersReducedMotion,
-      // Realistic skinned figure; the procedural one covers until it loads.
+      // Realistic skinned figure without flashing the procedural fallback.
       characterUrl: "/models/character.glb",
+      showProceduralWhileLoading: false,
     });
     const phaseEl = document.getElementById("hero-phase");
     viewer.onPhase(({ phaseName }) => {
diff --git a/playground/src/main.ts b/playground/src/main.ts
index 4e32bea..47fbccb 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -535,7 +535,14 @@ void import("posecode-render").then(({ createViewer }) => {
     new URLSearchParams(location.search).get("figure") === "classic";
   viewer = createViewer(canvas, {
     autoRotate: false,
-    ...(classicFigure ? {} : { characterUrl: "/models/character.glb" }),
+    ...(classicFigure
+      ? {}
+      : {
+          characterUrl: "/models/character.glb",
+          // Avoid flashing the procedural/classic figure while the default
+          // mannequin asset loads. It still appears if the GLB genuinely fails.
+          showProceduralWhileLoading: false,
+        }),
     // Mocap-clip library: a document's `clip "<name>"` directive picks a
     // retargeted animation from here, crossfaded over the procedural pose (see
     // clips.ts). Only fetched when a loaded movement names the clip, so this
diff --git a/scripts/lib/shell.mjs b/scripts/lib/shell.mjs
index 6718c26..927d519 100644
--- a/scripts/lib/shell.mjs
+++ b/scripts/lib/shell.mjs
@@ -129,6 +129,7 @@ export function pageShell({ title, description, canonicalPath, jsonLd, bodyHtml,
       rel="stylesheet"
     />
     <style>${BASE_CSS}</style>
+    <link rel="stylesheet" href="/content-theme.css" />
     ${ld}
     <script>
       window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };