From afaa768c6c00c400b24e308da6d0e13bb3f68d80 Mon Sep 17 00:00:00 2001
From: a-baran-orhan <a.baranorhan@gmail.com>
Date: Sat, 11 Jul 2026 13:05:13 +0300
Subject: [PATCH] Use clean playground URLs

---
 playground/index.html                         |  8 ++--
 playground/play.html                          |  2 +-
 playground/public/llm-guide.html              |  2 +-
 playground/public/moves/arm-circles.html      |  4 +-
 playground/public/moves/bent-over-row.html    |  4 +-
 playground/public/moves/biceps.html           |  4 +-
 playground/public/moves/bicycle-crunch.html   |  4 +-
 playground/public/moves/bow.html              |  4 +-
 playground/public/moves/box-squat.html        |  4 +-
 playground/public/moves/box-step-taps.html    |  4 +-
 playground/public/moves/box-step.html         |  4 +-
 playground/public/moves/calf-raise.html       |  4 +-
 playground/public/moves/chair.html            |  4 +-
 playground/public/moves/chasse.html           |  4 +-
 playground/public/moves/chest-opener.html     |  4 +-
 playground/public/moves/cobra.html            |  4 +-
 playground/public/moves/cross-body-reach.html |  4 +-
 playground/public/moves/crunch.html           |  4 +-
 playground/public/moves/dance-phrase.html     |  4 +-
 playground/public/moves/dead-bug.html         |  4 +-
 playground/public/moves/dead-hang.html        |  4 +-
 playground/public/moves/deadlift.html         |  4 +-
 playground/public/moves/demi-plie.html        |  4 +-
 playground/public/moves/elbow-forearm.html    |  4 +-
 playground/public/moves/finger-spell.html     |  4 +-
 playground/public/moves/fold.html             |  4 +-
 playground/public/moves/forward-lunge.html    |  4 +-
 playground/public/moves/front-kick.html       |  4 +-
 playground/public/moves/glute-bridge.html     |  4 +-
 playground/public/moves/good-morning.html     |  4 +-
 playground/public/moves/grapevine.html        |  4 +-
 playground/public/moves/hamstring-curl.html   |  4 +-
 playground/public/moves/hand-wave.html        |  4 +-
 .../public/moves/hanging-knee-raise.html      |  4 +-
 playground/public/moves/heel-raises.html      |  4 +-
 playground/public/moves/high-knee-march.html  |  4 +-
 playground/public/moves/hip-abduction.html    |  4 +-
 playground/public/moves/hip-flexion.html      |  4 +-
 playground/public/moves/horse-stance.html     |  4 +-
 playground/public/moves/index.html            |  4 +-
 playground/public/moves/jab-cross.html        |  4 +-
 playground/public/moves/jumping-jacks.html    |  4 +-
 playground/public/moves/knee-flexion.html     |  4 +-
 playground/public/moves/lateral.html          |  4 +-
 playground/public/moves/make-a-fist.html      |  4 +-
 playground/public/moves/mountain-climber.html |  4 +-
 .../public/moves/neck-side-stretch.html       |  4 +-
 playground/public/moves/neck.html             |  4 +-
 playground/public/moves/overhead-reach.html   |  4 +-
 playground/public/moves/pinch-grip.html       |  4 +-
 playground/public/moves/pirouette.html        |  4 +-
 playground/public/moves/plank-hold.html       |  4 +-
 playground/public/moves/port-de-bras.html     |  4 +-
 playground/public/moves/posture.html          |  4 +-
 playground/public/moves/pull-up.html          |  4 +-
 playground/public/moves/quad-stretch.html     |  4 +-
 playground/public/moves/quarter-turns.html    |  4 +-
 playground/public/moves/releve.html           |  4 +-
 .../public/moves/seated-forward-fold.html     |  4 +-
 .../public/moves/shoulder-abduction.html      |  4 +-
 playground/public/moves/shoulder-rolls.html   |  4 +-
 playground/public/moves/shoulder.html         |  4 +-
 playground/public/moves/sidebend.html         |  4 +-
 playground/public/moves/sit-to-stand.html     |  4 +-
 playground/public/moves/spine-rotation.html   |  4 +-
 playground/public/moves/squat.html            |  4 +-
 playground/public/moves/step-up.html          |  4 +-
 playground/public/moves/superman.html         |  4 +-
 playground/public/moves/supine-leg-raise.html |  4 +-
 playground/public/moves/tendu.html            |  4 +-
 playground/public/moves/touch-toes.html       |  4 +-
 playground/public/moves/triceps-dips.html     |  4 +-
 playground/public/moves/twist.html            |  4 +-
 playground/public/moves/walk-cycle.html       |  4 +-
 playground/public/moves/wall-sit.html         |  4 +-
 playground/public/moves/waltz-box.html        |  4 +-
 playground/public/spec.html                   |  2 +-
 playground/src/landing.ts                     |  7 ++--
 playground/src/main.ts                        | 37 ++++++++++++++-----
 playground/src/nice-share.ts                  | 21 ++++++++++-
 playground/vite.config.ts                     |  2 +-
 scratch_capture_deadlift.js                   |  2 +-
 scripts/capture-gifs.mjs                      |  2 +-
 scripts/generate-content-pages.mjs            |  5 +--
 scripts/lib/shell.mjs                         |  2 +-
 vercel.json                                   |  9 ++++-
 86 files changed, 217 insertions(+), 176 deletions(-)

diff --git a/playground/index.html b/playground/index.html
index db84aca..2f5db1c 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -130,7 +130,7 @@
 
     <!-- Nav -->
     <header class="nav">
-      <a class="brand" href="./index.html" aria-label="Posecode home">
+      <a class="brand" href="/" aria-label="Posecode home">
         <svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="19" height="19" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg>
         <span class="wordmark">Posecode</span>
       </a>
@@ -142,7 +142,7 @@
         <a href="mailto:hello@posecode.org?subject=Posecode%20Feedback">Feedback</a>
         <a href="https://github.com/posecode-dev/posecode" target="_blank" rel="noopener">GitHub</a>
       </nav>
-      <a class="btn primary nav-cta" href="./play.html">Open playground&nbsp;→</a>
+      <a class="btn primary nav-cta" href="/play">Open playground&nbsp;→</a>
     </header>
 
     <!-- Hero -->
@@ -159,7 +159,7 @@ <h1 class="headline">
           is always anatomically plausible.
         </p>
         <div class="hero-cta">
-          <a class="btn primary lg" href="./play.html">Open the playground&nbsp;→</a>
+          <a class="btn primary lg" href="/play">Open the playground&nbsp;→</a>
           <button id="copy-prompt" class="btn ghost lg">
             <span class="lbl">Copy LLM prompt</span>
           </button>
@@ -265,7 +265,7 @@ <h3>Three.js renders it</h3>
         <h2>An open core you can build on</h2>
       </header>
       <div class="dev-grid">
-        <a class="dev-card reveal" href="./play.html">
+        <a class="dev-card reveal" href="/play">
           <h3>Playground →</h3>
           <p>Live editor, 3D viewport, syntax highlighting, inline range-of-motion diagnostics.</p>
         </a>
diff --git a/playground/play.html b/playground/play.html
index d5e99de..4e7fbf0 100644
--- a/playground/play.html
+++ b/playground/play.html
@@ -53,7 +53,7 @@
     <div class="bg-fx" aria-hidden="true"></div>
 
     <header class="topbar">
-      <a class="brand" href="./index.html" aria-label="Posecode home">
+      <a class="brand" href="/" aria-label="Posecode home">
         <svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg>
         <span class="wordmark">Posecode</span>
         <span class="tag">playground</span>
diff --git a/playground/public/llm-guide.html b/playground/public/llm-guide.html
index ecc5ad1..725d552 100644
--- a/playground/public/llm-guide.html
+++ b/playground/public/llm-guide.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
diff --git a/playground/public/moves/arm-circles.html b/playground/public/moves/arm-circles.html
index 2432181..226a0e8 100644
--- a/playground/public/moves/arm-circles.html
+++ b/playground/public/moves/arm-circles.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Arm circles</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=arm-circles">▶ Open Arm circles in the playground →</a>
+      <a class="btn" href="/play/arm-circles">▶ Open Arm circles in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/bent-over-row.html b/playground/public/moves/bent-over-row.html
index 04bff67..ff9ed68 100644
--- a/playground/public/moves/bent-over-row.html
+++ b/playground/public/moves/bent-over-row.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Bent-over row</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=bent-over-row">▶ Open Bent-over row in the playground →</a>
+      <a class="btn" href="/play/bent-over-row">▶ Open Bent-over row in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/biceps.html b/playground/public/moves/biceps.html
index a3907f6..bbe2e7a 100644
--- a/playground/public/moves/biceps.html
+++ b/playground/public/moves/biceps.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Biceps curl</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=biceps">▶ Open Biceps curl in the playground →</a>
+      <a class="btn" href="/play/biceps">▶ Open Biceps curl in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/bicycle-crunch.html b/playground/public/moves/bicycle-crunch.html
index e33a9ee..6f2ca5c 100644
--- a/playground/public/moves/bicycle-crunch.html
+++ b/playground/public/moves/bicycle-crunch.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Bicycle crunch</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=bicycle-crunch">▶ Open Bicycle crunch in the playground →</a>
+      <a class="btn" href="/play/bicycle-crunch">▶ Open Bicycle crunch in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/bow.html b/playground/public/moves/bow.html
index 8aa3827..72bd84b 100644
--- a/playground/public/moves/bow.html
+++ b/playground/public/moves/bow.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Standing bow</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=bow">▶ Open Standing bow in the playground →</a>
+      <a class="btn" href="/play/bow">▶ Open Standing bow in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/box-squat.html b/playground/public/moves/box-squat.html
index a453158..b77c729 100644
--- a/playground/public/moves/box-squat.html
+++ b/playground/public/moves/box-squat.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Box squat</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=box-squat">▶ Open Box squat in the playground →</a>
+      <a class="btn" href="/play/box-squat">▶ Open Box squat in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/box-step-taps.html b/playground/public/moves/box-step-taps.html
index e333881..a069274 100644
--- a/playground/public/moves/box-step-taps.html
+++ b/playground/public/moves/box-step-taps.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Box step taps</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=box-step-taps">▶ Open Box step taps in the playground →</a>
+      <a class="btn" href="/play/box-step-taps">▶ Open Box step taps in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/box-step.html b/playground/public/moves/box-step.html
index 86e74bb..7e5cd8c 100644
--- a/playground/public/moves/box-step.html
+++ b/playground/public/moves/box-step.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Box step</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=box-step">▶ Open Box step in the playground →</a>
+      <a class="btn" href="/play/box-step">▶ Open Box step in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/calf-raise.html b/playground/public/moves/calf-raise.html
index 60f0ea1..ea118f3 100644
--- a/playground/public/moves/calf-raise.html
+++ b/playground/public/moves/calf-raise.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Single-leg calf raise</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=calf-raise">▶ Open Single-leg calf raise in the playground →</a>
+      <a class="btn" href="/play/calf-raise">▶ Open Single-leg calf raise in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/chair.html b/playground/public/moves/chair.html
index cc0ec57..4fbe1fe 100644
--- a/playground/public/moves/chair.html
+++ b/playground/public/moves/chair.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Chair pose</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=chair">▶ Open Chair pose in the playground →</a>
+      <a class="btn" href="/play/chair">▶ Open Chair pose in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/chasse.html b/playground/public/moves/chasse.html
index 8dba1fb..942ddaa 100644
--- a/playground/public/moves/chasse.html
+++ b/playground/public/moves/chasse.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Chassé</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=chasse">▶ Open Chassé in the playground →</a>
+      <a class="btn" href="/play/chasse">▶ Open Chassé in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/chest-opener.html b/playground/public/moves/chest-opener.html
index 92cbef5..7a03131 100644
--- a/playground/public/moves/chest-opener.html
+++ b/playground/public/moves/chest-opener.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Chest opener</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=chest-opener">▶ Open Chest opener in the playground →</a>
+      <a class="btn" href="/play/chest-opener">▶ Open Chest opener in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/cobra.html b/playground/public/moves/cobra.html
index e47268c..8943fd7 100644
--- a/playground/public/moves/cobra.html
+++ b/playground/public/moves/cobra.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Cobra</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=cobra">▶ Open Cobra in the playground →</a>
+      <a class="btn" href="/play/cobra">▶ Open Cobra in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/cross-body-reach.html b/playground/public/moves/cross-body-reach.html
index 4675627..84c6fef 100644
--- a/playground/public/moves/cross-body-reach.html
+++ b/playground/public/moves/cross-body-reach.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Cross-body reach</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=cross-body-reach">▶ Open Cross-body reach in the playground →</a>
+      <a class="btn" href="/play/cross-body-reach">▶ Open Cross-body reach in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/crunch.html b/playground/public/moves/crunch.html
index df42895..add258a 100644
--- a/playground/public/moves/crunch.html
+++ b/playground/public/moves/crunch.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Crunch</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=crunch">▶ Open Crunch in the playground →</a>
+      <a class="btn" href="/play/crunch">▶ Open Crunch in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/dance-phrase.html b/playground/public/moves/dance-phrase.html
index 0b8732f..1ba636b 100644
--- a/playground/public/moves/dance-phrase.html
+++ b/playground/public/moves/dance-phrase.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Dance phrase</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=dance-phrase">▶ Open Dance phrase in the playground →</a>
+      <a class="btn" href="/play/dance-phrase">▶ Open Dance phrase in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/dead-bug.html b/playground/public/moves/dead-bug.html
index 42c9854..1e53281 100644
--- a/playground/public/moves/dead-bug.html
+++ b/playground/public/moves/dead-bug.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Dead bug</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=dead-bug">▶ Open Dead bug in the playground →</a>
+      <a class="btn" href="/play/dead-bug">▶ Open Dead bug in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/dead-hang.html b/playground/public/moves/dead-hang.html
index 6199490..6379c7d 100644
--- a/playground/public/moves/dead-hang.html
+++ b/playground/public/moves/dead-hang.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Dead hang</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=dead-hang">▶ Open Dead hang in the playground →</a>
+      <a class="btn" href="/play/dead-hang">▶ Open Dead hang in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/deadlift.html b/playground/public/moves/deadlift.html
index 5b173d0..ea88965 100644
--- a/playground/public/moves/deadlift.html
+++ b/playground/public/moves/deadlift.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Deadlift</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=deadlift">▶ Open Deadlift in the playground →</a>
+      <a class="btn" href="/play/deadlift">▶ Open Deadlift in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/demi-plie.html b/playground/public/moves/demi-plie.html
index 61956f7..54575a0 100644
--- a/playground/public/moves/demi-plie.html
+++ b/playground/public/moves/demi-plie.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Demi-plié</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=demi-plie">▶ Open Demi-plié in the playground →</a>
+      <a class="btn" href="/play/demi-plie">▶ Open Demi-plié in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/elbow-forearm.html b/playground/public/moves/elbow-forearm.html
index 758920e..8c0c88f 100644
--- a/playground/public/moves/elbow-forearm.html
+++ b/playground/public/moves/elbow-forearm.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Elbow flexion &amp; forearm rotation</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=elbow-forearm">▶ Open Elbow flexion &amp; forearm rotation in the playground →</a>
+      <a class="btn" href="/play/elbow-forearm">▶ Open Elbow flexion &amp; forearm rotation in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/finger-spell.html b/playground/public/moves/finger-spell.html
index 882c88a..2caf7b4 100644
--- a/playground/public/moves/finger-spell.html
+++ b/playground/public/moves/finger-spell.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Finger-spelling</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=finger-spell">▶ Open Finger-spelling in the playground →</a>
+      <a class="btn" href="/play/finger-spell">▶ Open Finger-spelling in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/fold.html b/playground/public/moves/fold.html
index 72a1c2e..ac60921 100644
--- a/playground/public/moves/fold.html
+++ b/playground/public/moves/fold.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Standing roll-down</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=fold">▶ Open Standing roll-down in the playground →</a>
+      <a class="btn" href="/play/fold">▶ Open Standing roll-down in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/forward-lunge.html b/playground/public/moves/forward-lunge.html
index 4e0f041..da5f379 100644
--- a/playground/public/moves/forward-lunge.html
+++ b/playground/public/moves/forward-lunge.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Forward lunge</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=forward-lunge">▶ Open Forward lunge in the playground →</a>
+      <a class="btn" href="/play/forward-lunge">▶ Open Forward lunge in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/front-kick.html b/playground/public/moves/front-kick.html
index 6c1a23d..cb12fd4 100644
--- a/playground/public/moves/front-kick.html
+++ b/playground/public/moves/front-kick.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Front kick</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=front-kick">▶ Open Front kick in the playground →</a>
+      <a class="btn" href="/play/front-kick">▶ Open Front kick in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/glute-bridge.html b/playground/public/moves/glute-bridge.html
index d7c6843..4a7fb54 100644
--- a/playground/public/moves/glute-bridge.html
+++ b/playground/public/moves/glute-bridge.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Glute bridge</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=glute-bridge">▶ Open Glute bridge in the playground →</a>
+      <a class="btn" href="/play/glute-bridge">▶ Open Glute bridge in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/good-morning.html b/playground/public/moves/good-morning.html
index d1148fb..5aecd07 100644
--- a/playground/public/moves/good-morning.html
+++ b/playground/public/moves/good-morning.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Good morning</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=good-morning">▶ Open Good morning in the playground →</a>
+      <a class="btn" href="/play/good-morning">▶ Open Good morning in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/grapevine.html b/playground/public/moves/grapevine.html
index 1348013..554e014 100644
--- a/playground/public/moves/grapevine.html
+++ b/playground/public/moves/grapevine.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Grapevine</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=grapevine">▶ Open Grapevine in the playground →</a>
+      <a class="btn" href="/play/grapevine">▶ Open Grapevine in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/hamstring-curl.html b/playground/public/moves/hamstring-curl.html
index 6f98884..51e9794 100644
--- a/playground/public/moves/hamstring-curl.html
+++ b/playground/public/moves/hamstring-curl.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Standing hamstring curl</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=hamstring-curl">▶ Open Standing hamstring curl in the playground →</a>
+      <a class="btn" href="/play/hamstring-curl">▶ Open Standing hamstring curl in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/hand-wave.html b/playground/public/moves/hand-wave.html
index 982b55f..ec42faa 100644
--- a/playground/public/moves/hand-wave.html
+++ b/playground/public/moves/hand-wave.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Hand wave</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=hand-wave">▶ Open Hand wave in the playground →</a>
+      <a class="btn" href="/play/hand-wave">▶ Open Hand wave in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/hanging-knee-raise.html b/playground/public/moves/hanging-knee-raise.html
index ffd78d4..14b106f 100644
--- a/playground/public/moves/hanging-knee-raise.html
+++ b/playground/public/moves/hanging-knee-raise.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Hanging knee raise</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=hanging-knee-raise">▶ Open Hanging knee raise in the playground →</a>
+      <a class="btn" href="/play/hanging-knee-raise">▶ Open Hanging knee raise in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/heel-raises.html b/playground/public/moves/heel-raises.html
index 88ed54c..807a9e7 100644
--- a/playground/public/moves/heel-raises.html
+++ b/playground/public/moves/heel-raises.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Heel raises</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=heel-raises">▶ Open Heel raises in the playground →</a>
+      <a class="btn" href="/play/heel-raises">▶ Open Heel raises in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/high-knee-march.html b/playground/public/moves/high-knee-march.html
index 69dc957..580d2f3 100644
--- a/playground/public/moves/high-knee-march.html
+++ b/playground/public/moves/high-knee-march.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>High-knee march</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=high-knee-march">▶ Open High-knee march in the playground →</a>
+      <a class="btn" href="/play/high-knee-march">▶ Open High-knee march in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/hip-abduction.html b/playground/public/moves/hip-abduction.html
index 09a4cc4..66ef23c 100644
--- a/playground/public/moves/hip-abduction.html
+++ b/playground/public/moves/hip-abduction.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Standing hip abduction</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=hip-abduction">▶ Open Standing hip abduction in the playground →</a>
+      <a class="btn" href="/play/hip-abduction">▶ Open Standing hip abduction in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/hip-flexion.html b/playground/public/moves/hip-flexion.html
index cf51b6a..461e7dd 100644
--- a/playground/public/moves/hip-flexion.html
+++ b/playground/public/moves/hip-flexion.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Hip flexion</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=hip-flexion">▶ Open Hip flexion in the playground →</a>
+      <a class="btn" href="/play/hip-flexion">▶ Open Hip flexion in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/horse-stance.html b/playground/public/moves/horse-stance.html
index cff86b1..6b57a53 100644
--- a/playground/public/moves/horse-stance.html
+++ b/playground/public/moves/horse-stance.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Horse stance</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=horse-stance">▶ Open Horse stance in the playground →</a>
+      <a class="btn" href="/play/horse-stance">▶ Open Horse stance in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/index.html b/playground/public/moves/index.html
index a12b530..27ab6e2 100644
--- a/playground/public/moves/index.html
+++ b/playground/public/moves/index.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -125,7 +125,7 @@ <h1>72 movements, written as text</h1>
       <p>Every example in the Posecode library, grouped by practice. Each page shows the phases,
         coaching cues, and the exact <code>.posecode</code> source, plus a live 3D playback.
         Prefer to search and filter interactively? Use the
-        <a href="/play.html">playground's movement library</a> instead.</p>
+        <a href="/play">playground's movement library</a> instead.</p>
       
       <div class="domain-group">
         <h2>Fitness</h2>
diff --git a/playground/public/moves/jab-cross.html b/playground/public/moves/jab-cross.html
index 186b1ee..d18874f 100644
--- a/playground/public/moves/jab-cross.html
+++ b/playground/public/moves/jab-cross.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Jab-cross</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=jab-cross">▶ Open Jab-cross in the playground →</a>
+      <a class="btn" href="/play/jab-cross">▶ Open Jab-cross in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/jumping-jacks.html b/playground/public/moves/jumping-jacks.html
index ca6f6f1..45f9bdc 100644
--- a/playground/public/moves/jumping-jacks.html
+++ b/playground/public/moves/jumping-jacks.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Jumping jacks</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=jumping-jacks">▶ Open Jumping jacks in the playground →</a>
+      <a class="btn" href="/play/jumping-jacks">▶ Open Jumping jacks in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/knee-flexion.html b/playground/public/moves/knee-flexion.html
index c5f5202..442c870 100644
--- a/playground/public/moves/knee-flexion.html
+++ b/playground/public/moves/knee-flexion.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Knee flexion</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=knee-flexion">▶ Open Knee flexion in the playground →</a>
+      <a class="btn" href="/play/knee-flexion">▶ Open Knee flexion in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/lateral.html b/playground/public/moves/lateral.html
index eec599e..d0872de 100644
--- a/playground/public/moves/lateral.html
+++ b/playground/public/moves/lateral.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Lateral raise</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=lateral">▶ Open Lateral raise in the playground →</a>
+      <a class="btn" href="/play/lateral">▶ Open Lateral raise in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/make-a-fist.html b/playground/public/moves/make-a-fist.html
index 80d43d1..52c8d0c 100644
--- a/playground/public/moves/make-a-fist.html
+++ b/playground/public/moves/make-a-fist.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Make a fist</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=make-a-fist">▶ Open Make a fist in the playground →</a>
+      <a class="btn" href="/play/make-a-fist">▶ Open Make a fist in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/mountain-climber.html b/playground/public/moves/mountain-climber.html
index e69a044..e07bda4 100644
--- a/playground/public/moves/mountain-climber.html
+++ b/playground/public/moves/mountain-climber.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Mountain climber</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=mountain-climber">▶ Open Mountain climber in the playground →</a>
+      <a class="btn" href="/play/mountain-climber">▶ Open Mountain climber in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/neck-side-stretch.html b/playground/public/moves/neck-side-stretch.html
index 6201d21..3da4fb7 100644
--- a/playground/public/moves/neck-side-stretch.html
+++ b/playground/public/moves/neck-side-stretch.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Neck side stretch</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=neck-side-stretch">▶ Open Neck side stretch in the playground →</a>
+      <a class="btn" href="/play/neck-side-stretch">▶ Open Neck side stretch in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/neck.html b/playground/public/moves/neck.html
index 267dc23..37e929b 100644
--- a/playground/public/moves/neck.html
+++ b/playground/public/moves/neck.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Neck rotation</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=neck">▶ Open Neck rotation in the playground →</a>
+      <a class="btn" href="/play/neck">▶ Open Neck rotation in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/overhead-reach.html b/playground/public/moves/overhead-reach.html
index 7ca7a48..43d89e4 100644
--- a/playground/public/moves/overhead-reach.html
+++ b/playground/public/moves/overhead-reach.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Overhead reach reset</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=overhead-reach">▶ Open Overhead reach reset in the playground →</a>
+      <a class="btn" href="/play/overhead-reach">▶ Open Overhead reach reset in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/pinch-grip.html b/playground/public/moves/pinch-grip.html
index f033c33..f54e51f 100644
--- a/playground/public/moves/pinch-grip.html
+++ b/playground/public/moves/pinch-grip.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Pinch grip</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=pinch-grip">▶ Open Pinch grip in the playground →</a>
+      <a class="btn" href="/play/pinch-grip">▶ Open Pinch grip in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/pirouette.html b/playground/public/moves/pirouette.html
index b97f617..cd6202f 100644
--- a/playground/public/moves/pirouette.html
+++ b/playground/public/moves/pirouette.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Pirouette</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=pirouette">▶ Open Pirouette in the playground →</a>
+      <a class="btn" href="/play/pirouette">▶ Open Pirouette in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/plank-hold.html b/playground/public/moves/plank-hold.html
index 0749cc8..ae6b4a8 100644
--- a/playground/public/moves/plank-hold.html
+++ b/playground/public/moves/plank-hold.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Plank hold</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=plank-hold">▶ Open Plank hold in the playground →</a>
+      <a class="btn" href="/play/plank-hold">▶ Open Plank hold in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/port-de-bras.html b/playground/public/moves/port-de-bras.html
index a9a2e5e..d889086 100644
--- a/playground/public/moves/port-de-bras.html
+++ b/playground/public/moves/port-de-bras.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Port de bras</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=port-de-bras">▶ Open Port de bras in the playground →</a>
+      <a class="btn" href="/play/port-de-bras">▶ Open Port de bras in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/posture.html b/playground/public/moves/posture.html
index 0e5fb9d..528a452 100644
--- a/playground/public/moves/posture.html
+++ b/playground/public/moves/posture.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Desk posture reset</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=posture">▶ Open Desk posture reset in the playground →</a>
+      <a class="btn" href="/play/posture">▶ Open Desk posture reset in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/pull-up.html b/playground/public/moves/pull-up.html
index bcedd9a..e1c13fa 100644
--- a/playground/public/moves/pull-up.html
+++ b/playground/public/moves/pull-up.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Pull-up</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=pull-up">▶ Open Pull-up in the playground →</a>
+      <a class="btn" href="/play/pull-up">▶ Open Pull-up in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/quad-stretch.html b/playground/public/moves/quad-stretch.html
index 3319741..05725ea 100644
--- a/playground/public/moves/quad-stretch.html
+++ b/playground/public/moves/quad-stretch.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Standing quad stretch</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=quad-stretch">▶ Open Standing quad stretch in the playground →</a>
+      <a class="btn" href="/play/quad-stretch">▶ Open Standing quad stretch in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/quarter-turns.html b/playground/public/moves/quarter-turns.html
index f66a2c9..11f2a28 100644
--- a/playground/public/moves/quarter-turns.html
+++ b/playground/public/moves/quarter-turns.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Quarter turns</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=quarter-turns">▶ Open Quarter turns in the playground →</a>
+      <a class="btn" href="/play/quarter-turns">▶ Open Quarter turns in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/releve.html b/playground/public/moves/releve.html
index 0040c9a..0307073 100644
--- a/playground/public/moves/releve.html
+++ b/playground/public/moves/releve.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Relevé</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=releve">▶ Open Relevé in the playground →</a>
+      <a class="btn" href="/play/releve">▶ Open Relevé in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/seated-forward-fold.html b/playground/public/moves/seated-forward-fold.html
index f9d612c..58adce8 100644
--- a/playground/public/moves/seated-forward-fold.html
+++ b/playground/public/moves/seated-forward-fold.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Seated forward fold</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=seated-forward-fold">▶ Open Seated forward fold in the playground →</a>
+      <a class="btn" href="/play/seated-forward-fold">▶ Open Seated forward fold in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/shoulder-abduction.html b/playground/public/moves/shoulder-abduction.html
index 16e8245..5b3f64a 100644
--- a/playground/public/moves/shoulder-abduction.html
+++ b/playground/public/moves/shoulder-abduction.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Shoulder abduction</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=shoulder-abduction">▶ Open Shoulder abduction in the playground →</a>
+      <a class="btn" href="/play/shoulder-abduction">▶ Open Shoulder abduction in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/shoulder-rolls.html b/playground/public/moves/shoulder-rolls.html
index 998bebb..95ec11a 100644
--- a/playground/public/moves/shoulder-rolls.html
+++ b/playground/public/moves/shoulder-rolls.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Shoulder rolls</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=shoulder-rolls">▶ Open Shoulder rolls in the playground →</a>
+      <a class="btn" href="/play/shoulder-rolls">▶ Open Shoulder rolls in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/shoulder.html b/playground/public/moves/shoulder.html
index 3668761..93dc7b0 100644
--- a/playground/public/moves/shoulder.html
+++ b/playground/public/moves/shoulder.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Shoulder flexion</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=shoulder">▶ Open Shoulder flexion in the playground →</a>
+      <a class="btn" href="/play/shoulder">▶ Open Shoulder flexion in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/sidebend.html b/playground/public/moves/sidebend.html
index d79181f..e8133d2 100644
--- a/playground/public/moves/sidebend.html
+++ b/playground/public/moves/sidebend.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Standing side bend</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=sidebend">▶ Open Standing side bend in the playground →</a>
+      <a class="btn" href="/play/sidebend">▶ Open Standing side bend in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/sit-to-stand.html b/playground/public/moves/sit-to-stand.html
index 9ddc95f..0fde2c9 100644
--- a/playground/public/moves/sit-to-stand.html
+++ b/playground/public/moves/sit-to-stand.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Sit to stand</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=sit-to-stand">▶ Open Sit to stand in the playground →</a>
+      <a class="btn" href="/play/sit-to-stand">▶ Open Sit to stand in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/spine-rotation.html b/playground/public/moves/spine-rotation.html
index 615d8c0..08a2d72 100644
--- a/playground/public/moves/spine-rotation.html
+++ b/playground/public/moves/spine-rotation.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Spine rotation</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=spine-rotation">▶ Open Spine rotation in the playground →</a>
+      <a class="btn" href="/play/spine-rotation">▶ Open Spine rotation in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/squat.html b/playground/public/moves/squat.html
index fcf2713..3e6cd67 100644
--- a/playground/public/moves/squat.html
+++ b/playground/public/moves/squat.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Body-weight squat</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=squat">▶ Open Body-weight squat in the playground →</a>
+      <a class="btn" href="/play/squat">▶ Open Body-weight squat in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/step-up.html b/playground/public/moves/step-up.html
index b4c04eb..ab7b294 100644
--- a/playground/public/moves/step-up.html
+++ b/playground/public/moves/step-up.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Step-up</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=step-up">▶ Open Step-up in the playground →</a>
+      <a class="btn" href="/play/step-up">▶ Open Step-up in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/superman.html b/playground/public/moves/superman.html
index 4d1bc0b..9a6e50a 100644
--- a/playground/public/moves/superman.html
+++ b/playground/public/moves/superman.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Superman</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=superman">▶ Open Superman in the playground →</a>
+      <a class="btn" href="/play/superman">▶ Open Superman in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/supine-leg-raise.html b/playground/public/moves/supine-leg-raise.html
index e512f4b..680a1c9 100644
--- a/playground/public/moves/supine-leg-raise.html
+++ b/playground/public/moves/supine-leg-raise.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Lying leg raise</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=supine-leg-raise">▶ Open Lying leg raise in the playground →</a>
+      <a class="btn" href="/play/supine-leg-raise">▶ Open Lying leg raise in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/tendu.html b/playground/public/moves/tendu.html
index 60fe146..5a270f9 100644
--- a/playground/public/moves/tendu.html
+++ b/playground/public/moves/tendu.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Tendu</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=tendu">▶ Open Tendu in the playground →</a>
+      <a class="btn" href="/play/tendu">▶ Open Tendu in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/touch-toes.html b/playground/public/moves/touch-toes.html
index 2deb68e..bf9eeab 100644
--- a/playground/public/moves/touch-toes.html
+++ b/playground/public/moves/touch-toes.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Touch your toes</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=touch-toes">▶ Open Touch your toes in the playground →</a>
+      <a class="btn" href="/play/touch-toes">▶ Open Touch your toes in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/triceps-dips.html b/playground/public/moves/triceps-dips.html
index 3148b6e..b5c73e5 100644
--- a/playground/public/moves/triceps-dips.html
+++ b/playground/public/moves/triceps-dips.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Triceps dips</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=triceps-dips">▶ Open Triceps dips in the playground →</a>
+      <a class="btn" href="/play/triceps-dips">▶ Open Triceps dips in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/twist.html b/playground/public/moves/twist.html
index 4ff0e78..e5d6329 100644
--- a/playground/public/moves/twist.html
+++ b/playground/public/moves/twist.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Standing spinal twist</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=twist">▶ Open Standing spinal twist in the playground →</a>
+      <a class="btn" href="/play/twist">▶ Open Standing spinal twist in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/walk-cycle.html b/playground/public/moves/walk-cycle.html
index bd0a248..4142292 100644
--- a/playground/public/moves/walk-cycle.html
+++ b/playground/public/moves/walk-cycle.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Walk &amp; turn</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=walk-cycle">▶ Open Walk &amp; turn in the playground →</a>
+      <a class="btn" href="/play/walk-cycle">▶ Open Walk &amp; turn in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/wall-sit.html b/playground/public/moves/wall-sit.html
index d8c2fb5..7ecd69a 100644
--- a/playground/public/moves/wall-sit.html
+++ b/playground/public/moves/wall-sit.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Wall sit</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=wall-sit">▶ Open Wall sit in the playground →</a>
+      <a class="btn" href="/play/wall-sit">▶ Open Wall sit in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/moves/waltz-box.html b/playground/public/moves/waltz-box.html
index 0a1b5e9..33f2bb6 100644
--- a/playground/public/moves/waltz-box.html
+++ b/playground/public/moves/waltz-box.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
@@ -129,7 +129,7 @@ <h1>Waltz box step</h1>
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html#doc=waltz-box">▶ Open Waltz box step in the playground →</a>
+      <a class="btn" href="/play/waltz-box">▶ Open Waltz box step in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
diff --git a/playground/public/spec.html b/playground/public/spec.html
index 4c862f2..3e61d41 100644
--- a/playground/public/spec.html
+++ b/playground/public/spec.html
@@ -109,7 +109,7 @@
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
diff --git a/playground/src/landing.ts b/playground/src/landing.ts
index 17dbc43..2152d20 100644
--- a/playground/src/landing.ts
+++ b/playground/src/landing.ts
@@ -7,7 +7,6 @@
 
 import { parse } from "posecode-parser";
 import { inject } from "@vercel/analytics";
-import { buildNiceShareHash } from "./nice-share.js";
 import { PRESETS } from "./presets.js";
 import llmPrompt from "../../spec/llm-authoring.md?raw";
 
@@ -15,7 +14,7 @@ inject();
 
 // Preserve permalinks shared before the tool moved from `/` to `/play`.
 if (location.hash.startsWith("#doc=")) {
-  location.replace(`play.html${location.hash}`);
+  location.replace(`/play${location.hash}`);
 }
 
 const prefersReducedMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -73,7 +72,7 @@ if (grid) {
     if (!preset) continue;
     const card = document.createElement("a");
     card.className = "example-card";
-    card.href = `play.html${buildNiceShareHash(preset.source)}`;
+    card.href = `/play/${preset.id}`;
     card.innerHTML = `
       <span class="example-kind">${preset.domain}</span>
       <span class="example-name">${preset.label}</span>
@@ -84,7 +83,7 @@ if (grid) {
   const remaining = PRESETS.length - HIGHLIGHT_IDS.length;
   const more = document.createElement("a");
   more.className = "example-card example-more";
-  more.href = "play.html";
+  more.href = "/play";
   more.innerHTML = `
     <span class="example-kind">Full library</span>
     <span class="example-name">+${remaining} more movements</span>
diff --git a/playground/src/main.ts b/playground/src/main.ts
index 27bcca8..4e32bea 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -10,7 +10,12 @@
 import { parse } from "posecode-parser";
 import { inject } from "@vercel/analytics";
 import type { Viewer } from "posecode-render";
-import { buildNiceShareHash, resolveSharedSource } from "./nice-share.js";
+import {
+  buildNicePlayPath,
+  buildNiceShareHash,
+  resolveSharedPath,
+  resolveSharedSource,
+} from "./nice-share.js";
 import type { PosecodeEditor } from "./editor.js";
 import { PRESETS } from "./presets.js";
 import { renderWarnings } from "./warnings.js";
@@ -157,6 +162,16 @@ function scheduleRecompile(): void {
   debounce = window.setTimeout(recompile, 250);
 }
 
+/** Keep the address bar and library label in sync with editor changes. */
+function handleEditorChange(source: string): void {
+  const preset = PRESETS.find((p) => p.source === source);
+  currentPresetId = preset?.id ?? null;
+  libCurrent.textContent =
+    preset?.label ?? (source.trim() ? "Custom movement" : "New movement");
+  history.replaceState(null, "", buildNicePlayPath(source));
+  scheduleRecompile();
+}
+
 function recompile(): void {
   window.clearTimeout(debounce); // cancel any pending run; we're compiling now
   // Captured once so control-flow narrowing survives the calls below; a null
@@ -334,6 +349,7 @@ function loadPreset(id: string): void {
   currentPresetId = preset.id;
   libCurrent.textContent = preset.label;
   editorApi?.setValue(preset.source);
+  history.replaceState(null, "", buildNicePlayPath(preset.source));
   recompile();
   setMobileView("viewer"); // on phones, jump to the figure after picking
 }
@@ -353,6 +369,7 @@ $<HTMLButtonElement>("new-doc").addEventListener("click", () => {
   currentPresetId = null;
   libCurrent.textContent = "New movement";
   editorApi?.setValue("");
+  history.replaceState(null, "", "/play");
   recompile(); // swaps the status row to the blank-editor hint immediately
   setMobileView("editor"); // the paste target, front and center on phones
   editorApi?.focus();
@@ -411,9 +428,11 @@ copyBtn.addEventListener("click", () => copyPrompt(copyBtn));
 async function shareLink(): Promise<void> {
   if (!editorApi) return; // editor still loading; nothing to snapshot yet
   try {
-    const hash = buildNiceShareHash(editorApi.getValue());
-    const url = `${location.origin}${location.pathname}${hash}`;
-    history.replaceState(null, "", hash);
+    const source = editorApi.getValue();
+    const path = buildNicePlayPath(source);
+    const hash = path === "/play" ? buildNiceShareHash(source) : "";
+    const url = `${location.origin}${path}${hash}`;
+    history.replaceState(null, "", `${path}${hash}`);
     await navigator.clipboard.writeText(url);
     flash(shareBtn, "Link copied ✓");
   } catch (err) {
@@ -474,10 +493,10 @@ $<HTMLButtonElement>("intro-dismiss").addEventListener("click", () => {
   intro.hidden = true;
 });
 
-// Boot: a shared link (?#doc=…) wins over the default preset. A link built
-// from a known movement (`#doc=squat`) resolves straight to that preset, so
-// it opens exactly like picking it from the library would.
-const sharedSource = resolveSharedSource(window.location.hash);
+// Boot: an old-style shared hash or a friendly `/play/:movement` route wins
+// over the default preset, opening exactly like a library selection.
+const sharedSource =
+  resolveSharedSource(window.location.hash) ?? resolveSharedPath(window.location.pathname);
 let initialDoc: string;
 if (sharedSource) {
   const preset = PRESETS.find((p) => p.source === sharedSource);
@@ -500,7 +519,7 @@ if (sharedSource) {
 void import("./editor.js").then(({ createPosecodeEditor }) => {
   editorApi = createPosecodeEditor($("editor"), {
     doc: initialDoc,
-    onChange: scheduleRecompile,
+    onChange: handleEditorChange,
   });
   recompile();
 });
diff --git a/playground/src/nice-share.ts b/playground/src/nice-share.ts
index 55805fc..96e5cc8 100644
--- a/playground/src/nice-share.ts
+++ b/playground/src/nice-share.ts
@@ -1,6 +1,6 @@
 /**
- * A readable share link for the 70+ built-in movements: `#doc=squat` instead
- * of a base64 blob of the whole document. posecode-share stays preset-agnostic
+ * Readable routes for the 70+ built-in movements: `/play/squat` instead of a
+ * base64 blob of the whole document. posecode-share stays preset-agnostic
  * (it's also used by posecode-embed and posecode-mcp, which know nothing about
  * this app's catalogue), so the preset shortcut lives here instead, one layer
  * up. Anything edited or custom still falls back to the full encoded token.
@@ -11,6 +11,23 @@ import { PRESETS } from "./presets.js";
 
 const presetsById = new Map(PRESETS.map((p) => [p.id, p]));
 
+/** Return the built-in movement encoded by a friendly `/play/:id` path. */
+export function resolveSharedPath(pathname: string): string | null {
+  const match = pathname.match(/^\/play\/([^/]+)\/?$/);
+  if (!match) return null;
+  try {
+    return presetsById.get(decodeURIComponent(match[1]!))?.source ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/** Canonical playground path for a document (custom documents live at `/play`). */
+export function buildNicePlayPath(source: string): string {
+  const preset = PRESETS.find((p) => p.source === source);
+  return preset ? `/play/${encodeURIComponent(preset.id)}` : "/play";
+}
+
 /** Build the URL hash for a document, preferring a preset's short id. */
 export function buildNiceShareHash(source: string): string {
   const preset = PRESETS.find((p) => p.source === source);
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index 918d95a..076bb7c 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -18,7 +18,7 @@ export default defineConfig({
   build: {
     rollupOptions: {
       input: {
-        // Two pages: the landing (/) and the playground (/play.html).
+        // Build files behind the public `/` and `/play[/movement]` routes.
         main: resolve(here, "index.html"),
         play: resolve(here, "play.html"),
       },
diff --git a/scratch_capture_deadlift.js b/scratch_capture_deadlift.js
index 85b43c9..98f8b87 100644
--- a/scratch_capture_deadlift.js
+++ b/scratch_capture_deadlift.js
@@ -34,7 +34,7 @@ async function capture() {
   const page = await browser.newPage({ viewport: { width: 1024, height: 768 } });
 
   console.log("Navigating to Deadlift...");
-  await page.goto(`${origin}/play.html#doc=deadlift`, { waitUntil: "load" });
+  await page.goto(`${origin}/play/deadlift`, { waitUntil: "load" });
   await page.reload({ waitUntil: "load" });
   await page.waitForFunction(() => window.__posecodeViewer?.duration > 0, null, { timeout: 30000 });
   await page.waitForTimeout(2000); // let auto-camera settle
diff --git a/scripts/capture-gifs.mjs b/scripts/capture-gifs.mjs
index a699b74..ac5c96d 100644
--- a/scripts/capture-gifs.mjs
+++ b/scripts/capture-gifs.mjs
@@ -66,7 +66,7 @@ page.on("pageerror", (e) => console.error("[page]", e.message));
 
 for (const t of targets) {
   const [w, h] = t.size;
-  await page.goto(`${origin}/play.html#doc=${t.id}`, { waitUntil: "load" });
+  await page.goto(`${origin}/play/${t.id}`, { waitUntil: "load" });
   await page.reload({ waitUntil: "load" });
   await page.waitForFunction(() => window.__posecodeViewer?.duration > 0, null, {
     timeout: 60000,
diff --git a/scripts/generate-content-pages.mjs b/scripts/generate-content-pages.mjs
index 9fefa69..b118633 100644
--- a/scripts/generate-content-pages.mjs
+++ b/scripts/generate-content-pages.mjs
@@ -87,7 +87,6 @@ async function main() {
     const steps = parseSteps(p.source);
     const repeat = parseRepeat(p.source);
     const name = slugTitle(p.label);
-    const hash = `#doc=${p.id}`;
     const url = `/moves/${p.id}.html`;
 
     const stepsHtml = steps
@@ -129,7 +128,7 @@ async function main() {
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html${hash}">▶ Open ${esc(name)} in the playground →</a>
+      <a class="btn" href="/play/${p.id}">▶ Open ${esc(name)} in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
@@ -189,7 +188,7 @@ ${stepsHtml}
       <p>Every example in the Posecode library, grouped by practice. Each page shows the phases,
         coaching cues, and the exact <code>.posecode</code> source, plus a live 3D playback.
         Prefer to search and filter interactively? Use the
-        <a href="/play.html">playground's movement library</a> instead.</p>
+        <a href="/play">playground's movement library</a> instead.</p>
       ${groupsHtml}
     `,
   });
diff --git a/scripts/lib/shell.mjs b/scripts/lib/shell.mjs
index 0c9abd9..6718c26 100644
--- a/scripts/lib/shell.mjs
+++ b/scripts/lib/shell.mjs
@@ -140,7 +140,7 @@ export function pageShell({ title, description, canonicalPath, jsonLd, bodyHtml,
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>
diff --git a/vercel.json b/vercel.json
index f2d7049..62b7d5d 100644
--- a/vercel.json
+++ b/vercel.json
@@ -4,5 +4,12 @@
   "installCommand": "npm install",
   "buildCommand": "npm run build -w playground",
   "outputDirectory": "playground/dist",
-  "rewrites": [{ "source": "/play", "destination": "/play.html" }]
+  "redirects": [
+    { "source": "/index.html", "destination": "/", "permanent": true },
+    { "source": "/play.html", "destination": "/play", "permanent": true }
+  ],
+  "rewrites": [
+    { "source": "/play", "destination": "/play.html" },
+    { "source": "/play/:movement", "destination": "/play.html" }
+  ]
 }