diff --git a/.github/e2e-shard-capacity.json b/.github/e2e-shard-capacity.json
index a280a3b9..f694a539 100644
--- a/.github/e2e-shard-capacity.json
+++ b/.github/e2e-shard-capacity.json
@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "selectedShards": 16,
+  "selectedShards": 12,
   "workersPerShard": 2,
   "retriesDuringBenchmark": 0,
   "benchmark": {
@@ -10,24 +10,46 @@
         "url": "https://github.com/msrivas-7/CodeTutor-AI/actions/runs/33385421742",
         "headSha": "ced40c1b465cfeddba37c6299e4668a38d235139",
         "topologies": [16, 20]
+      },
+      {
+        "runId": 34688798759,
+        "url": "https://github.com/msrivas-7/CodeTutor-AI/actions/runs/34688798759",
+        "headSha": "144335888eb1129dfd8e4bc6f0fbc47644308af8",
+        "topologies": [16, 20]
       }
     ],
-    "method": "After the account moved to GitHub Pro, 16 and 20 shards ran sequentially on the same stable commit with two workers per shard and no retries. All jobs started without an account queue and every shard passed; 16 had both the faster retry-free test critical path and the faster topology completion.",
-    "totalTests": 439,
+    "method": "On the exact PR head, 16 and 20 Chromium shards ran sequentially against one frozen 484-test inventory with two workers per shard and no retries. All 16-shard jobs passed in isolation. Six of 20-shard jobs failed after the shared development database reached its 200-client connection ceiling. The normal E2E workflow then proved that 16 Chromium shards plus four concurrently running support stacks reproduces the same ceiling, so the operational workflow reserves those four stacks and selects 12 Chromium shards.",
+    "totalTests": 484,
     "topologies": [
-      { "shards": 16, "modeledTestCriticalPathSeconds": 160, "topologyReadySeconds": 379, "reliable": true },
-      { "shards": 20, "modeledTestCriticalPathSeconds": 198, "topologyReadySeconds": 416, "reliable": true }
+      {
+        "shards": 16,
+        "modeledTestCriticalPathSeconds": 160,
+        "topologyReadySeconds": 289,
+        "reliable": true
+      },
+      {
+        "shards": 20,
+        "modeledTestCriticalPathSeconds": 151,
+        "topologyReadySeconds": 287,
+        "reliable": false
+      }
     ],
-    "selectedModeledTestCriticalPathSeconds": 160,
-    "selectedTopologyReadySeconds": 379,
-    "selectedAverageTestsPerShard": 27.4,
-    "measuredAt": "2026-08-31T11:20:21Z"
+    "bestReliableIsolatedModeledTestCriticalPathSeconds": 160,
+    "bestReliableIsolatedTopologyReadySeconds": 289,
+    "selectedAverageTestsPerShard": 40.3,
+    "measuredAt": "2026-09-12T10:44:41Z"
   },
   "rebenchmark": {
-    "atOrBelowTests": 411,
-    "atOrAboveTests": 467,
+    "atOrBelowTests": 443,
+    "atOrAboveTests": 525,
     "rule": "Rebenchmark when the suite changes by one selected shard's measured average workload."
   },
+  "operationalTopology": {
+    "maximumReliableConcurrentStacks": 16,
+    "evidenceRunId": 34690166145,
+    "url": "https://github.com/msrivas-7/CodeTutor-AI/actions/runs/34690166145",
+    "method": "The normal exact-head workflow launched 16 blocking Chromium shards and four support stacks together. Backend logs recorded EMAXCONN at the shared 200-client database ceiling and unrelated browser lanes flaked. The capacity guard now derives every Compose-backed job and matrix cardinality from the workflow itself, then fails if their total exceeds the proven reliable 16-stack boundary."
+  },
   "selectionPolicy": {
     "minimumAbsoluteGainSeconds": 20,
     "minimumRelativeGain": 0.05,
@@ -48,9 +70,24 @@
       "selected": true
     },
     "workerCandidates": [
-      { "workers": 2, "testCriticalPathSeconds": 190, "reliable": true, "selected": true },
-      { "workers": 3, "testCriticalPathSeconds": 160, "reliable": false, "selected": false },
-      { "workers": 4, "testCriticalPathSeconds": null, "reliable": false, "selected": false }
+      {
+        "workers": 2,
+        "testCriticalPathSeconds": 190,
+        "reliable": true,
+        "selected": true
+      },
+      {
+        "workers": 3,
+        "testCriticalPathSeconds": 160,
+        "reliable": false,
+        "selected": false
+      },
+      {
+        "workers": 4,
+        "testCriticalPathSeconds": null,
+        "reliable": false,
+        "selected": false
+      }
     ],
     "maximumChromiumShards": 20,
     "method": "Three images prepared in parallel, then local-build and digest-pinned 16-shard stages ran sequentially on the same commit with zero retries. Higher worker counts were eligible only when every shard passed."
diff --git a/.github/scripts/e2e-shard-benchmark.test.mjs b/.github/scripts/e2e-shard-benchmark.test.mjs
index 543f32a5..3447096e 100644
--- a/.github/scripts/e2e-shard-benchmark.test.mjs
+++ b/.github/scripts/e2e-shard-benchmark.test.mjs
@@ -102,6 +102,21 @@ test("workflow benchmarks the complete measured range under the account ceiling"
   assert.match(topologyWorkflow, /--shard=\$\{\{ matrix\.shard }}\/\$\{\{ inputs\.total }}/);
 });
 
+test("capacity candidates share one frozen history and use the normal duration planner", () => {
+  assert.match(benchmarkWorkflow, /for total in 16 20; do/);
+  assert.match(benchmarkWorkflow, /node \.github\/scripts\/e2e-duration-plan\.mjs/);
+  assert.match(benchmarkWorkflow, /--history e2e\/shard-capacity-plans\/history\.json/);
+  assert.match(benchmarkWorkflow, /needs: plan/);
+  assert.match(benchmarkWorkflow, /needs: \[plan, benchmark-sixteen\]/);
+  assert.match(benchmarkWorkflow, /needs\.plan\.result == 'success'/);
+  assert.equal((benchmarkWorkflow.match(/duration_plan_artifact: shard-capacity-plans/g) ?? []).length, 2);
+  assert.match(topologyWorkflow, /if: inputs\.duration_plan_artifact != ''/);
+  assert.match(topologyWorkflow, /test -s "\$plan"/);
+  assert.match(topologyWorkflow, /--test-list="\$plan" --workers=\$\{\{ inputs\.workers }} --retries=0/);
+  // Older worker/image experiments retain their explicit native-shard control.
+  assert.match(topologyWorkflow, /else\n\s+npx playwright test --project=chromium --shard=/);
+});
+
 test("does not treat preceding-experiment wait time as test work", () => {
   const result = compareShardTopologies({
     benchmarkRun,
diff --git a/.github/scripts/e2e-shard-capacity.mjs b/.github/scripts/e2e-shard-capacity.mjs
index 05c59c1d..c53a2c05 100644
--- a/.github/scripts/e2e-shard-capacity.mjs
+++ b/.github/scripts/e2e-shard-capacity.mjs
@@ -22,12 +22,58 @@ export function deriveRebenchmarkBounds(totalTests, selectedShards) {
   };
 }
 
-export function evaluateShardCapacity({ record, totalTests, activeShards }) {
+export function deriveDatabaseStackFanout(workflowSource) {
+  if (typeof workflowSource !== "string" || workflowSource.trim() === "") {
+    throw new Error("workflow source must be a non-empty string");
+  }
+
+  const jobs = [...workflowSource.matchAll(
+    /^  ([A-Za-z0-9_-]+):\s*\n([\s\S]*?)(?=^  [A-Za-z0-9_-]+:\s*\n|(?![\s\S]))/gm,
+  )]
+    .filter(([, , body]) => /\bdocker compose[^\n]*\bup\b/.test(body))
+    .map(([, name, body]) => {
+      const matrixBlock = body.match(
+        /^      matrix:\s*\n((?:        [^\n]+\n?)*)/m,
+      )?.[1];
+      if (!matrixBlock) return { name, instances: 1 };
+
+      const dimensions = [...matrixBlock.matchAll(
+        /^        ([A-Za-z0-9_-]+):\s*\[([^\]]+)]\s*$/gm,
+      )];
+      if (dimensions.length === 0) {
+        throw new Error(
+          `database-backed job ${name} must use inline matrix lists so fan-out can be verified`,
+        );
+      }
+      const instances = dimensions.reduce((product, [, dimension, values]) => {
+        const count = values.split(",").map((value) => value.trim()).filter(Boolean).length;
+        if (count === 0) {
+          throw new Error(`database-backed job ${name} has an empty ${dimension} matrix`);
+        }
+        return product * count;
+      }, 1);
+      return { name, instances };
+    });
+
+  if (jobs.length === 0) {
+    throw new Error("workflow has no database-backed docker compose jobs");
+  }
+  return {
+    jobs,
+    totalConcurrentStacks: jobs.reduce((sum, job) => sum + job.instances, 0),
+  };
+}
+
+export function evaluateShardCapacity({ record, totalTests, activeShards, workflowSource }) {
   if (record?.schemaVersion !== 1) {
     throw new Error("capacity record schemaVersion must be 1");
   }
   requirePositiveInteger(record.selectedShards, "selectedShards");
   requirePositiveInteger(record?.benchmark?.totalTests, "benchmark.totalTests");
+  requirePositiveInteger(
+    record?.operationalTopology?.maximumReliableConcurrentStacks,
+    "operationalTopology.maximumReliableConcurrentStacks",
+  );
   requirePositiveInteger(totalTests, "totalTests");
   requirePositiveInteger(activeShards, "activeShards");
 
@@ -37,6 +83,22 @@ export function evaluateShardCapacity({ record, totalTests, activeShards }) {
     );
   }
 
+  const fanout = deriveDatabaseStackFanout(workflowSource);
+  const blockingJob = fanout.jobs.find(({ name }) => name === "e2e");
+  if (!blockingJob || blockingJob.instances !== activeShards) {
+    throw new Error(
+      "workflow e2e matrix must match the active blocking Chromium shard count",
+    );
+  }
+  if (
+    fanout.totalConcurrentStacks
+    > record.operationalTopology.maximumReliableConcurrentStacks
+  ) {
+    throw new Error(
+      `operational workflow requests ${fanout.totalConcurrentStacks} concurrent stacks but the measured reliable limit is ${record.operationalTopology.maximumReliableConcurrentStacks}`,
+    );
+  }
+
   const expectedBounds = deriveRebenchmarkBounds(
     record.benchmark.totalTests,
     record.selectedShards,
@@ -65,6 +127,7 @@ export function evaluateShardCapacity({ record, totalTests, activeShards }) {
     benchmarkTests: record.benchmark.totalTests,
     allowedMinimum: expectedBounds.atOrBelowTests + 1,
     allowedMaximum: expectedBounds.atOrAboveTests - 1,
+    totalConcurrentStacks: fanout.totalConcurrentStacks,
     ...expectedBounds,
   };
 }
@@ -75,7 +138,7 @@ function parseArgs(argv) {
     const key = argv[index];
     const value = argv[index + 1];
     if (!key?.startsWith("--") || value === undefined) {
-      throw new Error("expected --record, --total-tests, and --active-shards arguments");
+      throw new Error("expected --record, --workflow, --total-tests, and --active-shards arguments");
     }
     args[key.slice(2)] = value;
   }
@@ -84,15 +147,20 @@ function parseArgs(argv) {
 
 async function main() {
   const args = parseArgs(process.argv.slice(2));
-  if (!args.record || !args["total-tests"] || !args["active-shards"]) {
-    throw new Error("expected --record, --total-tests, and --active-shards arguments");
+  if (!args.record || !args.workflow || !args["total-tests"] || !args["active-shards"]) {
+    throw new Error("expected --record, --workflow, --total-tests, and --active-shards arguments");
   }
 
-  const record = JSON.parse(await readFile(args.record, "utf8"));
+  const [recordText, workflowSource] = await Promise.all([
+    readFile(args.record, "utf8"),
+    readFile(args.workflow, "utf8"),
+  ]);
+  const record = JSON.parse(recordText);
   const result = evaluateShardCapacity({
     record,
     totalTests: Number(args["total-tests"]),
     activeShards: Number(args["active-shards"]),
+    workflowSource,
   });
 
   if (!result.eligible) {
@@ -103,7 +171,7 @@ async function main() {
   }
 
   console.log(
-    `Playwright shard capacity is current: ${result.totalTests} tests, ${result.selectedShards} shards, rebenchmark outside ${result.allowedMinimum}-${result.allowedMaximum} tests.`,
+    `Playwright shard capacity is current: ${result.totalTests} tests, ${result.selectedShards} Chromium shards, ${result.totalConcurrentStacks} total database stacks, rebenchmark outside ${result.allowedMinimum}-${result.allowedMaximum} tests.`,
   );
 }
 
diff --git a/.github/scripts/e2e-shard-capacity.test.mjs b/.github/scripts/e2e-shard-capacity.test.mjs
index 4d8791a1..baf67ac9 100644
--- a/.github/scripts/e2e-shard-capacity.test.mjs
+++ b/.github/scripts/e2e-shard-capacity.test.mjs
@@ -3,44 +3,84 @@ import { readFileSync } from "node:fs";
 import test from "node:test";
 
 import {
+  deriveDatabaseStackFanout,
   deriveRebenchmarkBounds,
   evaluateShardCapacity,
 } from "./e2e-shard-capacity.mjs";
 
-const record = JSON.parse(readFileSync(new URL("../e2e-shard-capacity.json", import.meta.url), "utf8"));
-const workflow = readFileSync(new URL("../workflows/e2e.yml", import.meta.url), "utf8");
+const record = JSON.parse(
+  readFileSync(new URL("../e2e-shard-capacity.json", import.meta.url), "utf8"),
+);
+const workflow = readFileSync(
+  new URL("../workflows/e2e.yml", import.meta.url),
+  "utf8",
+);
 
 test("derives a one-shard-workload rebenchmark band", () => {
-  assert.deepEqual(deriveRebenchmarkBounds(439, 16), {
-    atOrBelowTests: 411,
-    atOrAboveTests: 467,
+  assert.deepEqual(deriveRebenchmarkBounds(484, 12), {
+    atOrBelowTests: 443,
+    atOrAboveTests: 525,
   });
 });
 
 test("tracked decision preserves the clean controlled benchmark evidence", () => {
   assert.deepEqual(
-    record.benchmark.runs.map(({ runId, headSha, topologies }) => ({ runId, headSha, topologies })),
+    record.benchmark.runs.map(({ runId, headSha, topologies }) => ({
+      runId,
+      headSha,
+      topologies,
+    })),
     [
       {
         runId: 33385421742,
         headSha: "ced40c1b465cfeddba37c6299e4668a38d235139",
         topologies: [16, 20],
       },
+      {
+        runId: 34688798759,
+        headSha: "144335888eb1129dfd8e4bc6f0fbc47644308af8",
+        topologies: [16, 20],
+      },
     ],
   );
   assert.deepEqual(
-    record.benchmark.topologies.map(({ shards, modeledTestCriticalPathSeconds, topologyReadySeconds, reliable }) => ({
-      shards,
-      modeledTestCriticalPathSeconds,
-      topologyReadySeconds,
-      reliable,
-    })),
+    record.benchmark.topologies.map(
+      ({
+        shards,
+        modeledTestCriticalPathSeconds,
+        topologyReadySeconds,
+        reliable,
+      }) => ({
+        shards,
+        modeledTestCriticalPathSeconds,
+        topologyReadySeconds,
+        reliable,
+      }),
+    ),
     [
-      { shards: 16, modeledTestCriticalPathSeconds: 160, topologyReadySeconds: 379, reliable: true },
-      { shards: 20, modeledTestCriticalPathSeconds: 198, topologyReadySeconds: 416, reliable: true },
+      {
+        shards: 16,
+        modeledTestCriticalPathSeconds: 160,
+        topologyReadySeconds: 289,
+        reliable: true,
+      },
+      {
+        shards: 20,
+        modeledTestCriticalPathSeconds: 151,
+        topologyReadySeconds: 287,
+        reliable: false,
+      },
     ],
   );
-  assert.equal(record.benchmark.selectedModeledTestCriticalPathSeconds, 160);
+  assert.equal(record.benchmark.totalTests, 484);
+  assert.equal(record.benchmark.bestReliableIsolatedModeledTestCriticalPathSeconds, 160);
+  assert.equal(record.benchmark.selectedAverageTestsPerShard, 40.3);
+  assert.deepEqual(record.operationalTopology, {
+    maximumReliableConcurrentStacks: 16,
+    evidenceRunId: 34690166145,
+    url: "https://github.com/msrivas-7/CodeTutor-AI/actions/runs/34690166145",
+    method: record.operationalTopology.method,
+  });
   assert.deepEqual(record.runtimeOptimization.imageReuse, {
     localBuildEndToEndSeconds: 369,
     prebuiltEndToEndSecondsIncludingPreparation: 338,
@@ -62,27 +102,92 @@ test("tracked decision preserves the clean controlled benchmark evidence", () =>
   assert.equal(record.runtimeOptimization.maximumChromiumShards, 20);
 });
 
-test("blocking workflow uses the selected matrix and derives its denominator", () => {
-  const exhaustiveJob = workflow.match(/\n  e2e:\n([\s\S]+?)\n  cross-browser-core:/)?.[1] ?? "";
-  const shardMatrix = exhaustiveJob.match(/matrix:\n\s+shard: \[([^\]]+)]/)?.[1]
+test("blocking workflow uses the selected matrix and complete planned inventory", () => {
+  const exhaustiveJob =
+    workflow.match(/\n  e2e:\n([\s\S]+?)\n  cross-browser-core:/)?.[1] ?? "";
+  const shardMatrix = exhaustiveJob
+    .match(/matrix:\n\s+shard: \[([^\]]+)]/)?.[1]
     .split(",")
     .map((value) => Number(value.trim()));
-  assert.deepEqual(shardMatrix, Array.from({ length: record.selectedShards }, (_, index) => index + 1));
-  assert.match(exhaustiveJob, /--active-shards "\$\{\{ strategy\.job-total }}/);
-  assert.match(workflow, /--output e2e\/duration-plan\/full[\s\S]+--shards 16/);
-  assert.match(exhaustiveJob, /--test-list=duration-plan-artifact\/full\/shard-\$\{\{ matrix\.shard }}\.txt/);
+  assert.deepEqual(
+    shardMatrix,
+    Array.from({ length: record.selectedShards }, (_, index) => index + 1),
+  );
+  assert.match(workflow, /--output e2e\/duration-plan\/full[\s\S]+--shards 12/);
+  assert.match(
+    exhaustiveJob,
+    /--test-list=duration-plan-artifact\/full\/shard-\$\{\{ matrix\.shard }}\.txt/,
+  );
   assert.match(exhaustiveJob, /name: Upload test-duration evidence/);
+  assert.doesNotMatch(exhaustiveJob, /e2e-shard-capacity\.mjs/);
 });
 
 test("advisory critical coverage is split across two isolated duration-balanced jobs", () => {
-  assert.match(workflow, /--output e2e\/duration-plan\/critical[\s\S]+--shards 2[\s\S]+--tag lane:critical/);
+  assert.match(
+    workflow,
+    /--output e2e\/duration-plan\/critical[\s\S]+--shards 2[\s\S]+--tag lane:critical/,
+  );
   assert.match(workflow, /critical-shadow:[\s\S]+matrix:\n\s+shard: \[1, 2]/);
   assert.doesNotMatch(workflow, /critical-shadow-summary:/);
-  assert.match(workflow, /shadow-evidence:[\s\S]+needs: \[duration-plan, critical-shadow, e2e, cross-browser-core][\s\S]+files\.length!==2/);
+  assert.match(
+    workflow,
+    /shadow-evidence:[\s\S]+needs: \[duration-plan, critical-shadow, e2e, cross-browser-core][\s\S]+files\.length!==2/,
+  );
+});
+
+test("derives every concurrent database stack from the workflow", () => {
+  assert.deepEqual(deriveDatabaseStackFanout(workflow), {
+    jobs: [
+      { name: "critical-shadow", instances: 2 },
+      { name: "e2e", instances: 12 },
+      { name: "cross-browser-core", instances: 2 },
+    ],
+    totalConcurrentStacks: 16,
+  });
+});
+
+test("capacity gate runs before any database-backed job can launch", () => {
+  const planningJob =
+    workflow.match(/\n  duration-plan:\n([\s\S]+?)\n  prepare-backend:/)?.[1] ??
+    "";
+  assert.match(planningJob, /name: Enforce measured database fan-out/);
+  assert.match(planningJob, /--workflow \.github\/workflows\/e2e\.yml/);
+  assert.match(planningJob, /--active-shards 12/);
+  assert.match(
+    planningJob,
+    /Build coverage-complete duration plan[\s\S]+Enforce measured database fan-out[\s\S]+Upload duration plan/,
+  );
+  for (const job of ["critical-shadow", "e2e", "cross-browser-core"]) {
+    assert.match(workflow, new RegExp(`\\n  ${job}:[\\s\\S]+?needs: \\[[^\\]]*duration-plan`));
+  }
+});
+
+test("recognizes docker compose flags before the up command", () => {
+  const workflowWithComposeFlags = workflow.replace(
+    "docker compose up -d --no-build backend frontend",
+    "docker compose --project-name isolated up -d --no-build backend frontend",
+  );
+  assert.deepEqual(
+    deriveDatabaseStackFanout(workflowWithComposeFlags),
+    deriveDatabaseStackFanout(workflow),
+  );
+});
+
+test("fails closed when a database-backed matrix cannot be counted", () => {
+  const dynamicMatrix = workflow.replace(
+    "browser: [firefox, webkit]",
+    "browser: ${{ fromJSON(needs.plan.outputs.browsers) }}",
+  );
+  assert.throws(
+    () => deriveDatabaseStackFanout(dynamicMatrix),
+    /cross-browser-core must use inline matrix lists/,
+  );
 });
 
 test("duration planning receives the authenticated fixture environment required for discovery", () => {
-  const planningJob = workflow.match(/\n  duration-plan:\n([\s\S]+?)\n  prepare-backend:/)?.[1] ?? "";
+  const planningJob =
+    workflow.match(/\n  duration-plan:\n([\s\S]+?)\n  prepare-backend:/)?.[1] ??
+    "";
   for (const variable of [
     "SUPABASE_URL",
     "SUPABASE_ANON_KEY",
@@ -92,37 +197,93 @@ test("duration planning receives the authenticated fixture environment required
     "DATABASE_URL",
     "BYOK_ENCRYPTION_KEY",
   ]) {
-    assert.match(planningJob, new RegExp(`${variable}: \\$\\{\\{ secrets\\.${variable} }}`));
+    assert.match(
+      planningJob,
+      new RegExp(`${variable}: \\$\\{\\{ secrets\\.${variable} }}`),
+    );
   }
 });
 
 test("accepts the measured inventory and normal growth", () => {
-  assert.equal(evaluateShardCapacity({ record, totalTests: 439, activeShards: 16 }).eligible, true);
-  assert.equal(evaluateShardCapacity({ record, totalTests: 466, activeShards: 16 }).eligible, true);
-  assert.equal(evaluateShardCapacity({ record, totalTests: 412, activeShards: 16 }).eligible, true);
+  assert.equal(
+    evaluateShardCapacity({ record, totalTests: 484, activeShards: 12, workflowSource: workflow })
+      .eligible,
+    true,
+  );
+  assert.equal(
+    evaluateShardCapacity({ record, totalTests: 524, activeShards: 12, workflowSource: workflow })
+      .eligible,
+    true,
+  );
+  assert.equal(
+    evaluateShardCapacity({ record, totalTests: 444, activeShards: 12, workflowSource: workflow })
+      .eligible,
+    true,
+  );
 });
 
 test("requires a new benchmark at either capacity boundary", () => {
-  const upper = evaluateShardCapacity({ record, totalTests: 467, activeShards: 16 });
-  const lower = evaluateShardCapacity({ record, totalTests: 411, activeShards: 16 });
-  assert.deepEqual({ eligible: upper.eligible, direction: upper.direction }, { eligible: false, direction: "upper" });
-  assert.deepEqual({ eligible: lower.eligible, direction: lower.direction }, { eligible: false, direction: "lower" });
+  const upper = evaluateShardCapacity({
+    record,
+    totalTests: 525,
+    activeShards: 12,
+    workflowSource: workflow,
+  });
+  const lower = evaluateShardCapacity({
+    record,
+    totalTests: 443,
+    activeShards: 12,
+    workflowSource: workflow,
+  });
+  assert.deepEqual(
+    { eligible: upper.eligible, direction: upper.direction },
+    { eligible: false, direction: "upper" },
+  );
+  assert.deepEqual(
+    { eligible: lower.eligible, direction: lower.direction },
+    { eligible: false, direction: "lower" },
+  );
 });
 
 test("fails closed when workflow topology drifts from the measured record", () => {
   assert.throws(
-    () => evaluateShardCapacity({ record, totalTests: 437, activeShards: 10 }),
+    () => evaluateShardCapacity({
+      record,
+      totalTests: 437,
+      activeShards: 10,
+      workflowSource: workflow,
+    }),
     /active workflow has 10 shards/,
   );
 });
 
-test("fails closed when recorded boundaries are stale or hand-edited", () => {
+test("fails closed when the complete workflow exceeds measured database fan-out", () => {
   assert.throws(
     () => evaluateShardCapacity({
-      record: { ...record, rebenchmark: { atOrBelowTests: 1, atOrAboveTests: 999 } },
-      totalTests: 439,
+      record: { ...record, selectedShards: 16 },
+      totalTests: 484,
       activeShards: 16,
+      workflowSource: workflow.replace(
+        "shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]",
+        "shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]",
+      ),
     }),
-    /capacity record bounds must be 411\/467/,
+    /requests 20 concurrent stacks.*reliable limit is 16/,
+  );
+});
+
+test("fails closed when recorded boundaries are stale or hand-edited", () => {
+  assert.throws(
+    () =>
+      evaluateShardCapacity({
+        record: {
+          ...record,
+          rebenchmark: { atOrBelowTests: 1, atOrAboveTests: 999 },
+        },
+        totalTests: 484,
+        activeShards: 12,
+        workflowSource: workflow,
+      }),
+    /capacity record bounds must be 443\/525/,
   );
 });
diff --git a/.github/workflows/e2e-shard-benchmark.yml b/.github/workflows/e2e-shard-benchmark.yml
index 1a6e3578..6a00c163 100644
--- a/.github/workflows/e2e-shard-benchmark.yml
+++ b/.github/workflows/e2e-shard-benchmark.yml
@@ -26,23 +26,77 @@ permissions:
   pull-requests: read
 
 jobs:
+  plan:
+    name: Freeze duration-balanced benchmark plans
+    if: github.event.label.name == 'ci-shard-benchmark'
+    runs-on: ubuntu-latest
+    env:
+      SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+      SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
+      SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: '20'
+          cache: npm
+          cache-dependency-path: e2e/package-lock.json
+      - name: Restore one timing baseline for both candidates
+        uses: actions/cache/restore@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
+        with:
+          path: .e2e-duration
+          key: e2e-duration-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
+          restore-keys: |
+            e2e-duration-${{ runner.os }}-
+      - name: Install e2e deps
+        working-directory: e2e
+        run: npm ci
+      - name: Plan every test with the normal CI algorithm
+        run: |
+          set -euo pipefail
+          mkdir -p e2e/shard-capacity-plans .e2e-duration
+          if [ ! -s .e2e-duration/history.json ]; then
+            cp .github/e2e-duration-seed.json .e2e-duration/history.json
+          fi
+          cp .e2e-duration/history.json e2e/shard-capacity-plans/history.json
+          cd e2e
+          npx playwright test --list --project=chromium --reporter=json > shard-capacity-plans/inventory.json
+          cd ..
+          for total in 16 20; do
+            node .github/scripts/e2e-duration-plan.mjs \
+              --inventory e2e/shard-capacity-plans/inventory.json \
+              --history e2e/shard-capacity-plans/history.json \
+              --output "e2e/shard-capacity-plans/$total" \
+              --shards "$total"
+          done
+      - name: Preserve frozen plans and timing provenance
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        with:
+          name: shard-capacity-plans
+          path: e2e/shard-capacity-plans
+          retention-days: 90
+          if-no-files-found: error
+
   benchmark-sixteen:
     if: github.event.label.name == 'ci-shard-benchmark'
+    needs: plan
     uses: ./.github/workflows/e2e-shard-topology.yml
     with:
       total: 16
       shards: '[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]'
       max_parallel: 16
+      duration_plan_artifact: shard-capacity-plans
     secrets: inherit
 
   benchmark-twenty:
-    if: always() && github.event.label.name == 'ci-shard-benchmark'
-    needs: benchmark-sixteen
+    if: always() && github.event.label.name == 'ci-shard-benchmark' && needs.plan.result == 'success'
+    needs: [plan, benchmark-sixteen]
     uses: ./.github/workflows/e2e-shard-topology.yml
     with:
       total: 20
       shards: '[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]'
       max_parallel: 20
+      duration_plan_artifact: shard-capacity-plans
     secrets: inherit
 
   compare:
diff --git a/.github/workflows/e2e-shard-topology.yml b/.github/workflows/e2e-shard-topology.yml
index 76aa9983..4cc68045 100644
--- a/.github/workflows/e2e-shard-topology.yml
+++ b/.github/workflows/e2e-shard-topology.yml
@@ -28,6 +28,11 @@ on:
         required: false
         default: 2
         type: number
+      duration_plan_artifact:
+        description: Optional frozen duration-balanced plans for all candidate counts
+        required: false
+        default: ''
+        type: string
       backend_image_ref:
         description: Optional immutable backend image reference
         required: false
@@ -89,6 +94,7 @@ jobs:
       BACKEND_IMAGE: ${{ inputs.backend_image_ref }}
       RUNNER_IMAGE: ${{ inputs.runner_image_ref }}
       FRONTEND_IMAGE: ${{ inputs.frontend_image_ref }}
+      DURATION_PLAN_ARTIFACT: ${{ inputs.duration_plan_artifact }}
     steps:
       - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
 
@@ -119,6 +125,12 @@ jobs:
       - name: Install e2e deps
         working-directory: e2e
         run: npm ci
+      - name: Download frozen duration-balanced benchmark plans
+        if: inputs.duration_plan_artifact != ''
+        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
+        with:
+          name: ${{ inputs.duration_plan_artifact }}
+          path: e2e/duration-plan
       - name: Cache Playwright browser
         uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
         with:
@@ -131,7 +143,15 @@ jobs:
         run: npx playwright install --with-deps chromium
       - name: Run identical full suite without retries
         working-directory: e2e
-        run: npx playwright test --shard=${{ matrix.shard }}/${{ inputs.total }} --workers=${{ inputs.workers }} --retries=0
+        run: |
+          set -euo pipefail
+          if [ -n "$DURATION_PLAN_ARTIFACT" ]; then
+            plan="duration-plan/${{ inputs.total }}/shard-${{ matrix.shard }}.txt"
+            test -s "$plan"
+            npx playwright test --project=chromium --test-list="$plan" --workers=${{ inputs.workers }} --retries=0
+          else
+            npx playwright test --project=chromium --shard=${{ matrix.shard }}/${{ inputs.total }} --workers=${{ inputs.workers }} --retries=0
+          fi
       - name: Dump docker-compose logs on failure
         if: failure()
         run: docker compose logs --no-color --tail=300
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 3ba9666a..e096ea1c 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -103,13 +103,23 @@ jobs:
             --inventory e2e/duration-plan/inventory.json \
             --history .e2e-duration/history.json \
             --output e2e/duration-plan/full \
-            --shards 16
+            --shards 12
           node .github/scripts/e2e-duration-plan.mjs \
             --inventory e2e/duration-plan/inventory.json \
             --history .e2e-duration/history.json \
             --output e2e/duration-plan/critical \
             --shards 2 \
             --tag lane:critical
+      - name: Enforce measured database fan-out
+        run: |
+          set -euo pipefail
+          total_tests=$(node -e 'const fs=require("fs"); const value=JSON.parse(fs.readFileSync("e2e/duration-plan/full/manifest.json","utf8")); process.stdout.write(String(value.testCount))')
+          test -n "$total_tests"
+          node .github/scripts/e2e-shard-capacity.mjs \
+            --record .github/e2e-shard-capacity.json \
+            --workflow .github/workflows/e2e.yml \
+            --total-tests "$total_tests" \
+            --active-shards 12
       - name: Validate critical metadata and frozen regression coverage
         id: contract
         continue-on-error: true
@@ -397,19 +407,20 @@ jobs:
     needs: [duration-plan, prepare-backend, prepare-runner, prepare-frontend]
     runs-on: ubuntu-latest
     # Sharding splits the exhaustive suite across isolated runners. The
-    # capacity record owns the measured decision and the shard-1 guard below
-    # forces a new benchmark after one shard-equivalent of suite growth or
-    # shrinkage. Runs 33377525950 and 33381912250 selected 16×2 workers:
-    # 178s of modeled retry-free test work versus 233s for 14, 241s for 17,
-    # and 170s for 20. The eight-second 20-shard gain missed the required
-    # 20-second / 5% adoption threshold and consumed the account ceiling.
+    # capacity record owns the measured decision; the duration-planning gate
+    # verifies this complete workflow before any database-backed job launches
+    # and forces a new benchmark after one shard-equivalent of suite growth or
+    # shrinkage. The isolated capacity benchmark proved 16 stacks reliable,
+    # but this workflow also runs Firefox, WebKit, and two critical-shadow
+    # stacks concurrently. Twelve Chromium shards reserve those four slots and
+    # keep the complete database-backed fan-out at the proven 16-stack limit.
     strategy:
       fail-fast: false
       matrix:
-        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
+        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
     # Bumped from 15 → 25 in Phase 22C: full e2e sweep grew past the 15-min
     # ceiling once the marketing specs landed. Sharding (Phase 27-v2.2)
-    # each shard now runs ~1/16 of the suite, so 25 stays generous.
+    # each shard now runs ~1/12 of the suite, so 25 stays generous.
     timeout-minutes: 25
     # Phase 18d: cloud-only Supabase model. These feed both docker compose
     # (which reads process env for ${VAR} interpolation in docker-compose.yml)
@@ -501,18 +512,6 @@ jobs:
           name: e2e-duration-plan
           path: e2e/duration-plan-artifact
 
-      - name: Enforce measured shard capacity
-        if: matrix.shard == 1
-        working-directory: e2e
-        run: |
-          set -euo pipefail
-          total_tests=$(node -e 'const fs=require("fs"); const value=JSON.parse(fs.readFileSync("duration-plan-artifact/full/manifest.json","utf8")); process.stdout.write(String(value.testCount))')
-          test -n "$total_tests"
-          node ../.github/scripts/e2e-shard-capacity.mjs \
-            --record ../.github/e2e-shard-capacity.json \
-            --total-tests "$total_tests" \
-            --active-shards "${{ strategy.job-total }}"
-
       - name: Cache Playwright browsers
         uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
         with:
diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md
new file mode 100644
index 00000000..eff6cdcd
--- /dev/null
+++ b/docs/DESIGN_SYSTEM.md
@@ -0,0 +1,111 @@
+# CodeTutor design system
+
+The homepage anchors the public brand. Shared decisions must have one owner;
+page-specific composition must not become a second theme. This guide describes
+the local implementation, not evidence that its latest visual changes are released.
+See [the public continuity ledger](PUBLIC_THEME_CONTINUITY.md) for verification.
+
+## Architecture and ownership
+
+| Layer | Source of truth | Responsibility |
+| --- | --- | --- |
+| Public values | `frontend/src/design-system/tokens.ts` | Palette, named surface/text roles, shared header/control sizing, reading protection and field arrival duration |
+| First paint | `frontend/scripts/vitePluginDesignTokens.ts` | Inline the same token output into Vite HTML before the bootstrap; no extra request or runtime theme generator |
+| Static documents | `frontend/scripts/discoverySite.ts` | Inline the same tokens and derive browser chrome from the same canvas value; works without JavaScript |
+| Shared public materials/components | `frontend/src/features/marketing/public/theme.css`, `frontend/src/features/marketing/public/PublicPage.tsx`, `frontend/src/auth/AuthShell.tsx` | Navigation geometry, display-copy treatment and reusable page/form boundaries |
+| Public family composition | `frontend/src/features/marketing/public/public-page.css`, `frontend/src/features/marketing/public/discovery-theme.css`, `frontend/src/features/marketing/study/study.css` | Reading widths, editorial layouts and responsive arrangements; consume roles instead of copying values |
+| Shared motion | `frontend/src/features/marketing/public/PublicMotionWorld.tsx`, `frontend/src/features/marketing/study/ParticleField.tsx`, adjacent scene/geometry modules | Retained renderer and existing motion physics; page descriptors supply composition, not another engine |
+| Workspace themes | `frontend/src/index.css`, `frontend/tailwind.config.js` | Existing light/dark semantic colors and typography; unchanged by the public palette migration |
+
+The dependency direction is **values → purpose-based roles → materials/components
+→ page composition**. `--study-*` names remain compatibility aliases, not another
+palette. Tailwind's space-separated RGB channel variables and ordinary CSS colors
+are derived from the same public values. Existing light-study overrides are
+centralized too; this does not introduce a new user-facing theme control.
+
+This is an incremental system, not a claim that every legacy style is migrated.
+Workspace roles already centralize theme colors. Bespoke typography, spacing,
+shadows, syntax colors, graphics material constants and component motion still
+have existing owners. Migrate those by a coherent, browser-verified slice when
+needed; do not copy them into a second registry or silently restyle the workspace.
+
+Public pages own their `.public-surface` typography boundary, not the initial
+entry router: direct loading, auth-to-home navigation and history must render
+the same fonts. Public auth dividers and recovery instructions share the scoped
+supporting-copy recipe; workspace signup retains its own existing styling.
+Browser share comments consume the readable faint text role. The image export's
+fixed palette remains a separate output contract, not a second web theme.
+
+## Surface rules
+
+- **World:** the shared near-black canvas and living glyph field.
+- **Layout:** transparent spacing/alignment wrappers. A layout box is not a card.
+- **Display copy:** large, brief headings can use `brand-display-copy`; letterform
+  shadows and a local elliptical fade avoid painting a hard rectangle. Currently applied only to
+  the walkthrough heading as a local visual experiment. Moving readability needs
+  actual-browser acceptance before broader adoption.
+- **Reading:** dense prose uses a solid canvas core with the shared
+  `--brand-reading-shadow` edge. Do not put animated glyphs through paragraphs.
+- **Objects:** code, tutor content, controls, tables and actionable cards remain
+  stable surfaces. Do not make everything transparent or apply glass everywhere.
+  Public filled actions use `public-action`; `public-action--accent` swaps its
+  resting and hover fills while keeping the paired foreground. Do not combine
+  page-level link-hover colors with independent workspace button utilities.
+
+The walkthrough keeps its code/tutor body and controls opaque. Its outer layout
+and explanatory interval are open; actual explanation text keeps local backing.
+No content, demo stages, geometry, navigation or particle physics change with this
+material experiment. Focus outlines must remain outside protective paint layers.
+
+Mobile story pacing belongs to `study.css`: artwork reserves bounded stable-
+viewport space so the scroll-driven renderer can form, linger and disperse before
+reading clusters. Chapter/closing frames share `--study-phone-art-space`; the
+opening has its own larger interval. Do not shrink these to decorative icons or
+compensate by slowing pointer physics or intercepting native scroll. Validate
+short/tall phones, reverse scrolling, reduced motion and physical swipe feel.
+
+## How to make a change
+
+1. Read the approved brand direction and start the harness. Material redesigns
+   need Mehul's approval; token centralization is not permission to redesign.
+2. If a decision is shared, change its existing token or component. Add a token
+   only for a real reusable role, not every arbitrary number. Distinguish surfaces
+   such as `field` and `object` even if they later share a value.
+3. Components consume CSS roles such as `var(--study-ink)` or Tailwind `text-ink`.
+   Do not import the token generator into React or copy raw palette values into
+   route files. The build owns serialization and first-paint injection.
+4. Do not change a role's meaning between themes. Keep text, control, focus,
+   disabled, hover, error and loading states coherent. Component behavior and
+   authorization remain outside the theme layer.
+5. Run token/public-theme unit tests and build/asset budgets. The public E2E
+   contract tests mutate tokens to prove real SPA and static consumers inherit
+   them, check first paint with the app blocked, and protect workspace isolation.
+6. Rebuild local services; inspect affected routes plus adjacent consumers in the
+   actual browser. Include motion, reduced motion, keyboard/focus, long/error
+   content, narrow/large displays and reload. Automated checks support, but never
+   replace, this gate. Update the finding ledger with exact evidence and limits.
+
+Do not create a catch-all configurable component, another CSS framework, or a
+global selector that changes every button/dialog. Reuse existing components when
+semantics and behavior match; extract a primitive only when duplication warrants it.
+For a future workspace migration, preserve values first, verify dark/light states,
+then propose any actual visual change separately.
+
+## Research and tradeoffs
+
+[IBM Carbon's theming model](https://carbondesignsystem.com/elements/themes/overview/)
+uses stable purpose-based token names whose values vary by theme, including color,
+spacing and typography. That is the basis for role ownership here, not a proposal
+to adopt Carbon's visual style or component package.
+
+[Adobe Spectrum's design tokens](https://spectrum.adobe.com/page/design-tokens/)
+also separate reusable values and their semantic use. We apply that separation
+without adding an unused catalog of hundreds of tokens.
+
+[DTCG 2025.10](https://www.designtokens.org/tr/2025.10/format/) standardizes a token
+interchange format, including types and aliases; it is a Community Group report,
+not a W3C Recommendation or a prescribed application architecture. Our small
+TypeScript source is **not claimed to be DTCG-format JSON**. It fits the current
+single web-codebase build. If design-tool/native exports become real requirements,
+migrate the canonical source to DTCG with generated consumers rather than maintain
+two editable copies. No new dependency or token service is needed now.
diff --git a/docs/DEVELOPMENT.md b/docs/DEVELOPMENT.md
index 93b3c666..0b0f799f 100644
--- a/docs/DEVELOPMENT.md
+++ b/docs/DEVELOPMENT.md
@@ -426,14 +426,14 @@ Use the existing abstraction before creating another version of the same behavio
 | [`backend/src/services/ai/canonicalTutorContext.ts`](../backend/src/services/ai/canonicalTutorContext.ts) | Server-authoritative guided tutor context |
 | [`backend/src/db/aiReservations.ts`](../backend/src/db/aiReservations.ts) | Atomic platform AI admission and settlement |
 
-Frontend color and surface styling uses semantic Tailwind tokens (`bg`, `panel`, `elevated`, `ink`, `muted`, `border`, `accent`, `success`, `warn`, `danger`, `violet`) backed by CSS variables in [`frontend/src/index.css`](../frontend/src/index.css). Do not introduce raw palette shades into product components; semantic tokens preserve contrast across light and dark themes.
+Follow the [design system](DESIGN_SYSTEM.md) for ownership and change rules. Public brand values live in [`frontend/src/design-system/tokens.ts`](../frontend/src/design-system/tokens.ts); both SPA first paint and generated static documents consume that source. Workspace styling retains semantic Tailwind tokens (`bg`, `panel`, `elevated`, `ink`, `muted`, `border`, `accent`, `success`, `warn`, `danger`, `violet`) backed by [`frontend/src/index.css`](../frontend/src/index.css). Do not introduce raw palette shades into product components; semantic tokens preserve contrast across light and dark themes.
 
 ## CI and release gates
 
 The repository's workflow files are the source of truth:
 
 - [CI](../.github/workflows/ci.yml) runs release-contract checks, harness doctor, secret scanning, cross-platform builds/tests, content and solution gates, share-function tests, performance budgets, and shell/PowerShell validation.
-- [E2E](../.github/workflows/e2e.yml) runs exhaustive Chromium in sixteen measured shards with two workers each, an advisory metadata-owned critical shadow, and focused Firefox/WebKit journeys. The tracked [capacity record](../.github/e2e-shard-capacity.json) forces a controlled rebenchmark after one shard-equivalent of suite growth or shrinkage; it never authorizes selecting tests away. The benchmark evaluates the practical range through the account-concurrency ceiling and adopts more shards only when every shard passes and the modeled retry-free Playwright critical path improves by at least 20 seconds and 5%. Queue-inclusive wall time and Docker/setup overhead remain reported operational evidence, but one hosted-runner startup outlier does not choose the topology.
+- [E2E](../.github/workflows/e2e.yml) runs exhaustive Chromium in twelve measured shards with two workers each, an advisory two-shard critical shadow, and focused Firefox/WebKit journeys. These sixteen concurrent database-backed stacks are the proven reliable limit; the tracked [capacity record](../.github/e2e-shard-capacity.json) reserves the four support stacks and fails closed if the workflow exceeds that limit. It also forces a controlled rebenchmark after one Chromium-shard equivalent of suite growth or shrinkage and never authorizes selecting tests away.
 - [Security](../.github/workflows/security.yml) runs isolated execution and abuse scenarios on relevant pull requests, on schedule, and as a release-callable gate.
 - [Production release](../.github/workflows/release.yml) builds immutable candidate artifacts, invokes the validation workflows against those artifacts, verifies migration state, then promotes the VM and Static Web App surfaces.
 
@@ -473,6 +473,33 @@ must use a reviewed forward compensating migration.
 | Node behavior differs inside a harness composite | Use a non-login shell, check `node --version`, and keep package `--cwd` explicit. |
 | ACI does not activate locally | Expected unless the flag and complete Azure target configuration are present; the factory falls back to local-only mode. |
 
+## Local phone access
+
+- [ ] Add authenticated device pairing/revocation and encrypted transport to the
+      machine-local development gateway. Reserved-IP filtering is not device auth.
+      Keep databases, Docker controls and unrelated internal services private unless
+      separately approved. This is a local developer-tooling task, not production auth.
+- Owner-approved preview access uses a machine-local gateway restricted to
+  the phone's reserved LAN source IP; app authentication remains unchanged. A DHCP
+  reservation is not cryptographic device authentication. Do not widen the rule to
+  the subnet, publish it to the internet, or commit machine addresses/configuration.
+  Phone verification remains required; a successful request from the Mac is not proof
+  of successful phone access.
+- On the owner's Mac, `~/.local/bin/phone-dev list` shows registered projects;
+  `phone-dev add NAME PORT [TARGET_PORT]` registers a development website/API once,
+  and `phone-dev remove NAME` revokes its forwarding. Use the full executable path
+  if it is not on your PATH. Only registered loopback targets are exposed, not every
+  listening port. New projects should bind to loopback; an independently wildcard-
+  bound server is not protected by this gateway.
+- The per-user `local.development.phone-access` LaunchAgent starts at login,
+  restarts on exit, and reloads registrations/retries network binding automatically.
+  Installation, configuration, tests and recovery instructions live outside the repo
+  at `~/Library/Application Support/Phone Dev Access/README.md`. Do not revive the
+  old temporary `.agent-harness/local-phone-preview.mjs` alongside this service.
+  The Mac must be awake and the project (including any SSH tunnel) running. This
+  service does not start projects or change sleep settings. HTTPS-only browser
+  features and OAuth may still require explicit development origin configuration.
+
 ## Manual QA entry points
 
 - Product: [http://localhost:5173](http://localhost:5173)
diff --git a/docs/PUBLIC_BRAND_CONTINUITY_DESIGN.md b/docs/PUBLIC_BRAND_CONTINUITY_DESIGN.md
new file mode 100644
index 00000000..186886e1
--- /dev/null
+++ b/docs/PUBLIC_BRAND_CONTINUITY_DESIGN.md
@@ -0,0 +1,354 @@
+# Public brand continuity — design reset
+
+Status: **phone-reviewed auth direction approved for rollout; local implementation in progress**.
+Approval covers the described direction, not acceptance of an unseen rendered result.
+The prior local treatment is rejected; its functional fixes and tests remain useful,
+but are not evidence that its visual design is acceptable.
+
+### Latest moving-prototype feedback
+
+Mehul has now reviewed login/signup on his phone: they look better, but navbar
+sizes and other elements jump between routes. He explicitly requested correcting
+those seams and extending this direction to the remaining public pages, including
+privacy. Implementation and supporting checks may proceed while the Mac is locked;
+final actual-browser verification waits for unlock. This advances the rollout
+approval, not the release/quality gates or approval of unrelated design changes.
+
+Earlier feedback rejected the first motion treatment (historical prototype):
+public pages must feel like different parts of one living body, not a static glyph
+shape using matching colors. Reduced-motion emulation was briefly active during
+recovery-page QA and has been cleared; that test state does not explain away the
+design feedback. In that prototype's normal motion, the auth scene fixed its
+assembly and scale, with only the shared small yaw and pointer displacement.
+It did not deliver the planned arrival, redistribution or route persistence;
+the current connected-world implementation is described below.
+
+Keep the improved surface treatment and centered forms. Next evaluate connected
+field behavior, not additional standalone sculptures: material carries momentum
+between public SPA routes and redistributes into the available space around each
+task. Avoid a permanently outlined bracket frame, arbitrary timed shape carousel,
+or moving form controls. Preserve the homepage's established pacing and physics;
+prove the effect through homepage → login → signup/recovery and back, as a moving
+journey, before accepting this as the shared brand contract.
+
+**Current local experiment:** `PublicMotionWorld` now owns the renderer above
+route Suspense boundaries; pages register presentation-only scene descriptors.
+The auth experiment uses the living-clearing alternative: seeded glyphs flow
+through a broad stream on the same retained clock, instead of holding a stretched
+code contour. Target interpolation shares the CPU pointer projection and shader
+geometry. The phone review authorizes extension; it is not a released design.
+The original homepage chapter solver and pointer spring remain the reference.
+
+**Latest local surface refinement (UX-212):** Mehul requested improving the
+opaque “From why to I see it” area and centralizing design decisions. The local
+study uses letterform shadows plus a small elliptical fade for that brief display
+heading, not rectangular backing. Dense explanation copy keeps local protection;
+the actual demo controls/code/tutor body remain solid. Desktop/phone supporting
+captures prompted the added fade after the unprotected phone heading looked busy.
+Mehul explicitly approved this current design after viewing the local study-demo
+page on his phone on September 8. This does not authorize making dense prose
+transparent or substitute for final actual-browser readability/recovery checks.
+The [design system](DESIGN_SYSTEM.md) now owns shared token and material conventions.
+
+## Decision in plain language
+
+The homepage is the brand. Moving to another public page should feel like entering
+another part of the same living environment, not leaving it for a dark form template.
+Keep its near-black canvas, luminous code-symbol material, depth, spectral variation,
+inertial pointer response, deliberate pacing, typography and action language.
+Change the composition to support the page's task—not the material or physics.
+
+**Recommended first study: the surface-and-field relationship on the homepage
+and centered login together.** Remove unnecessary background-blocking wrappers,
+not every useful surface. Preserve the homepage's story and motion. Then evaluate
+login's proposed open code contours within that same material system—not a fixed
+bracket ornament. Mehul approves the actual moving desktop and phone experience
+before it becomes the shared design contract.
+
+## What failed, and what the evidence proves
+
+| Evidence | Consequence |
+| --- | --- |
+| `AuthShell` chooses `ambient`; `ParticleField` forces `spread=1`, `opacity=.35` | The foreground never gathers into a meaningful composition. |
+| Auth CSS multiplies canvas opacity by `.5` | Foreground maximum alpha is `.175` before texture/brightness attenuation. |
+| Desktop hides a 500px central strip; phone hides everything except 20px edges | Little visible space remains for interaction. |
+| Public foreground count is 240 versus homepage 420; `createScatter` puts foreground at extreme edges | The visual weight and distribution differ before any masking. More particles alone cannot fix this. |
+| Page components own their renderer; changing route replaces those components | Clock, spring displacement and canvas are discarded. Sharing component code is not continuous motion. |
+| Actual in-app homepage → Sign in showed a full-screen skeleton before the new scene | Correct background color alone does not preserve the experience. |
+
+Source anchors: `frontend/src/features/marketing/study/ParticleField.tsx:419`,
+`frontend/src/features/marketing/study/geometry.ts:130`,
+`frontend/src/features/marketing/public/public-page.css:147`,
+`frontend/src/features/marketing/public/PublicPage.tsx:98`,
+`frontend/src/auth/AuthShell.tsx:17`, and `frontend/src/PublicApp.tsx:47`.
+Diagnosis refers to the uncommitted `dev/public-theme-continuity` worktree based
+on `690c767`; line anchors may move during the design reset.
+Actual browser comparison: 1159×863 desktop, approved homepage versus rejected login.
+Machine-local evidence:
+`.agent-harness/browser-evidence/5c7d75ed-22d3-41db-bfc3-857daf5b8b6f/login-rejected-treatment-desktop.png`.
+That gitignored evidence is not portable with a clone; capture fresh proof when
+reviewing the prototype and attach appropriate public-safe evidence to its PR.
+Numeric causes are source-derived; motion quality still needs moving-browser proof.
+
+## Surface review: what should cover the field?
+
+Mehul's follow-up reopens **surface treatment** on the homepage as well as public
+pages for review. It does not approve changing the homepage's layout, narrative,
+typography, glyph identity, pointer physics or scroll choreography. The three
+returning reviewers (product, motion/UX and frontend feasibility) agree that the
+previous proposal did not distinguish protective surfaces precisely enough.
+
+| Current surface / source | Proposed treatment | Reason |
+| --- | --- | --- |
+| Homepage hero, chapter and closing copy; footer (`study.css`, `.study-solid`) | Transparent layout; localized protection for actual text/link clusters | Whole wrappers hide field in otherwise empty space. |
+| Homepage artwork caption and navigation backing | Protect caption text and navigation controls; evaluate removing excess full-width backing | Avoid a visible strip cutting through the shared world; maintain legible navigation. |
+| Homepage walkthrough (`.study-demo-surface`) | Keep a stable, explicit product surface | Code, output and tutor conversation should read as one usable product demonstration. |
+| Login/signup/reset intro, form wrapper and full-height canvas mask (`public-page.css`) | Remove broad masks; centered content with local text/control protection | The environment should surround the form, not survive only in edge slivers. Inputs stay solid. |
+| Legal/support/comparison headings and broad reading wrappers | Transparent section layout; paragraph/heading-cluster protection with open section intervals | Keep sustained reading safe without turning the whole page into an opaque slab. |
+| Discovery hero/main shells (`discovery-theme.css`) | Remove broad shell backing; preserve authored grouping | Expose real space between sections and cards without adding artificial whitespace. |
+| Discovery course cards, method articles, notes, code and tables | Retain useful local grouping; distinguish clickable cards from noninteractive articles | Shared `.course-card` styling does not mean every item is interactive. Do not add false hover affordances. |
+| Share outer artifact/recovery wrappers (`SharePage.tsx`) | Remove redundant outer backing where local protection suffices; retain actual code/artifact panel | Avoid nested slabs. Preserve protection throughout the existing opacity/scale reveal, not just at rest. |
+| Errors, loading and footer states | Same localized material rules; status and actions remain immediately readable | No separate visual language for exceptional states. |
+
+### Material contract
+
+1. **World:** one near-black base and a connected, living glyph field.
+2. **Layout:** ordinary alignment/spacing wrappers are transparent, not cards.
+3. **Reading:** small protected text/control clusters have an opaque core and a
+   short, feathered outer transition where needed. Do not fade directly under
+   letters, create per-line stripes, or replace visible slabs with equally large
+   invisible rectangular holes.
+4. **Objects:** inputs, buttons, active states, real code/output, tables and the
+   demo retain stable surfaces. Clickable collections keep recognizable boundaries
+   and keyboard focus. Surface reduction must not remove information hierarchy.
+
+Compose particles in connected available space **first**; protection is a safety
+net for motion near content, not a substitute for composition. Do not maximize
+transparency as a metric. At dense text, small screens, zoom or an open keyboard,
+readability wins; do not force extra scrolling merely to exhibit more particles.
+
+**Rejected defaults:** blanket transparency (moving glyphs behind text), frosted
+glass everywhere (the same rectangles with moving blur), giant central exclusion
+zones (the rejected edge-only field), and a new particle collision/obstacle solver.
+Subtle local backing is the first prototype, not an assertion that its appearance
+has already passed review.
+
+### Evidence and acceptance
+
+In-app inspection at 1280×720 confirmed opaque homepage copy/caption wrappers and
+the purposeful walkthrough surface; the actual **02 Ask** demo was exercised.
+Comparison and discovery were also inspected, including navigation to the real
+course-card collection. These are current-state observations, not validation of
+the proposed materials. Source review covers the remaining wrappers listed above.
+The homepage hero-copy box measured 640×470 and its caption backing 700×17 in this
+viewport: paint hides the complete rectangles, not only their text. Shared base
+color can conceal the rectangle's outline without restoring the field behind it.
+
+The first approval comparison must show the unchanged homepage beside the local
+proposal, plus centered login: idle, scroll, pointer circles across edges and soft
+release. Check visible continuity **and** text contrast; no rectangular cutouts,
+halos, shimmer, clipped focus or glyphs leaking through code. Include phone,
+200%/400% zoom, wrapped/long text, expanded errors, keyboard, reduced motion,
+slow graphics and failure fallback. Verify the share reveal separately before
+propagating its treatment. Screenshots alone cannot establish moving readability.
+
+## Shared design rules
+
+- One visual world, one maintained renderer/interaction model, no new animation
+  engine, paid service, AI-generated asset or reference-site code copied into the repo.
+- Recognizable foreground glyphs plus persistent distant particles. Preserve size,
+  depth and color variation; do not reduce the whole scene to faint edge dust.
+- Protect actual text, controls, focus outlines and expanded errors using the
+  material contract above. Measured composition clearances must not become broad
+  invisible holes or a full-height center strip.
+- Do not solve every page with a floating illustration or identical loop. A shape
+  must explain the composition or the learning context, not merely fill space.
+- Forms, reading and navigation work immediately. Motion never gates entry, fakes
+  progress, moves a control away from the pointer or reacts to credentials.
+- Touch scrolling and text selection stay native. No scroll-jacking, trapped drag
+  gestures, forced introductory delays or required decorative interaction.
+- Existing public copy, claims, concessions, CTAs, auth handlers, return targets,
+  authorization, lesson content, metadata and internal workspaces remain unchanged.
+
+## Login study: options and recommendation
+
+| Option | Composition | Decision |
+| --- | --- | --- |
+| Open code contours | Loose `< >` strands belong to one surrounding field; the form is its center | Recommended study: strongest connection to the existing homepage motif. |
+| Living clearing | A distributed field flows around a form-sized clear region, without a stable contour | Fallback if contours feel decorative or overbearing; must not repeat the rejected dust treatment. |
+| Separate chapter moments | Above/below-form shapes respond to scrolling | Do not lead with this: desktop login should not gain unnecessary scrolling or another hero section. |
+
+The recommended study must **not** look like two side illustrations or a rigid
+box enclosing a form. Use the homepage's code topology as loose connected material:
+wide surrounding space, visible upper/lower connections, dimensional depth and
+responsive local movement. The form stays centered at its current usable width.
+If the available viewport cannot support that composition, recompose it—do not
+crop it into slivers or shrink glyphs into illegibility.
+
+### Behavior storyboard
+
+1. **Homepage → login:** retain the living background while content changes. Glyphs
+   settle toward the login composition; no empty-canvas flash or full-screen scene
+   replacement. The form does not wait for the particles to finish.
+2. **Direct load:** correct canvas and an intentional static starting composition
+   appear before the graphics download. First animated frame joins that composition,
+   avoiding an unrelated scatter → sudden shape jump. Graphics failure retains it.
+3. **Idle:** preserve the homepage's gentle dimensional motion and distant field.
+   Do not introduce an automatic 20-second shape carousel or periodic pulse just to
+   prove something is animated. Judge presence at actual viewing size.
+4. **Pointer:** curved strokes carry nearby glyphs into a visible swirl; release
+   retains momentum and returns softly. The surrounding field—not a tiny invisible
+   hit area—is responsive. Entering a form stops new forces, not existing momentum.
+5. **Typing, validation, submission:** inputs remain stable and legible. No password
+   influence on the scene, validation checkmark sculpture, red-particle error storm,
+   focus-triggered global dimming, or login-success choreography added to the flow.
+6. **Signup/reset navigation:** preserve material, clock and motion; update scene
+   clearances when content grows. History, return targets and focus retain their
+   intended behavior. Background persistence must not preserve credentials across
+   routes or defeat the forms' existing cleanup.
+7. **Phone/virtual keyboard:** use available upper/lower and surrounding space with
+   readable glyph sizes. Keep native scrolling and inputs visible; keyboard resize
+   must not restart/recenter the scene violently or cause horizontal overflow.
+8. **Reduced motion:** equally intentional static composition, not a blank page.
+   Preserve the approved preference behavior. A new pause button is **not approved**.
+   Review the applicable motion-accessibility requirements separately; never claim
+   reduced-motion handling alone proves all WCAG motion criteria are satisfied.
+
+## Other page families, after login approval
+
+| Family | Purpose and composition | Must remain primary |
+| --- | --- | --- |
+| Signup/reset/callback | Same welcoming environment; composition follows changing form/recovery bounds | Current authentication, errors and recovery actions |
+| Privacy/terms | Field continues around headings and section intervals; meaningful reading contours can gather between sections | Legal text, anchor navigation and sustained readability |
+| Support | Same environment and recognizable orientation; no service-status-like animation | Existing help and contact paths |
+| Why not ChatGPT | Continuous material accompanies argument and section transitions; no extra product demo | Balanced comparison and existing concessions |
+| Catalog/course/lesson discovery | Shared glyph material connects overview, course structure and authored reading | Complete static content, code/tables, canonical metadata and links |
+| Public share | Field supports the real learner artifact; coordinate with its existing reveal rather than layering competing shows | Actual code, accomplishment and share controls |
+| 404/unavailable | World remains present; composition feels settled and recoverable, never broken or punitive | Clear error meaning and immediate navigation |
+
+The latest phone review authorizes extending the same system to these families.
+Validate representative reading, discovery and share pages before publication;
+any different layout model or new motion language still requires approval.
+
+## Engineering strategy and constraints
+
+**App-rendered routes:** use one lazy, presentation-only motion host above the
+changing PublicApp/FullApp and content-Suspense boundary. Pages register a scene
+descriptor (composition targets, content-cluster bounds and readiness),
+not their own WebGL renderer. Keep GPU resources, seeded identities, elapsed time
+and pointer springs stable; blend updated targets without recreating the engine.
+Resolve and release route anchors on navigation, not just window resize. Late route
+registration must not overwrite a newer scene. Unregister on workspace entry and
+dispose/pause resources without decorating or changing internal pages.
+
+Extract the existing homepage scene solver as the unchanged story descriptor.
+Maintain its choreography, demo controls, density rules and pointer response as the
+golden reference. Only the separately approved surface treatment may change;
+renderer extraction is not permission for a broader homepage redesign. React's lifetime model explains why
+the host must survive route replacement: [preserving state](https://react.dev/learn/preserving-and-resetting-state).
+
+**Paint and protection:** make ownership explicit: base → field → transparent route
+layout → local protective backing → text/controls/focus. Hoisting the canvas behind
+today's opaque route roots would hide it. Use ordinary CSS backing/pseudo-elements
+first; they follow wrapping, errors and transforms without per-frame layout reads.
+They must not intercept input or obscure focus. Keep share code protected during
+its existing `.55` opacity entry and parent scaling, using independent backing if
+necessary. A stationary final-state mask is not proof for an animated artifact.
+
+Keep placement, visibility and interaction physics separate. Cache scene bounds
+on registration, resize, font readiness and content resize; never read DOM geometry
+per particle/frame. Do not add obstacle forces or shader-only position avoidance:
+CPU pointer projection and shader placement must remain consistent. Only if the
+CSS prototype fails, evaluate visibility-only shader fading after final projection,
+accounting for full glyph/glow size. That is a fallback experiment with extra
+scroll/DPR/zoom risk, not a second simultaneous implementation.
+
+**Static discovery:** its normal links perform document navigation. Preserve that
+architecture and no-JavaScript content; reuse scene definitions and a deterministic
+first-paint composition with matched arrival. Do not promise cross-document GPU
+state continuity, hijack links, or convert discovery to an SPA for decoration.
+
+**Budget and recovery:** retain bounded particle pools, area-based density, DPR cap
+1.5, hidden-tab suspension, lazy graphics and context-loss recovery. Measure frame
+times during pointer bursts and navigation before raising counts. Preserve current
+production asset budgets and public-entry avoidance of eager editor/admin downloads.
+No exact count or timing is a design success criterion by itself.
+
+## Review decisions and open questions
+
+- Motion/UX proposed open contours, a living clearing and chapter moments; product
+  agreed the world must surround the task, not compete with it. Frontend review
+  judged reuse feasible; persistent-host extraction, first-paint matching and
+  keyboard recomposition are prototype risks, not demonstrated results.
+- Do **not** adopt a periodic 20-second loop suggested during review; preserve the
+  approved interaction language first. Do **not** introduce the suggested pause
+  control without Mehul's approval.
+- Product review correctly separates perceptual continuity from literal GPU-state
+  persistence. Persist the SPA host where useful; use coherent new-document arrival
+  for static discovery. Do not expand routing scope to chase an illusion.
+- Generic skill-generated font/palette/horizontal-scroll recommendations were
+  rejected: the approved homepage already supplies the brand. Skills inform the
+  design-review and accessibility checklist, not a replacement aesthetic.
+- Motion accessibility requires explicit review: W3C distinguishes
+  [automatic movement](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)
+  from [interaction-triggered animation](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html).
+  Do not cite another site's missing control as compliance evidence. Resolve any
+  needed user-facing policy change before implementation/shipping; no silent
+  motion restriction or new control.
+
+**D1 — motion policy (release design approved; conformance not established):** this prototype
+retains the existing automatic, indefinite low-speed drift and intentional pointer/
+keyboard response; it adds no periodic shape carousel, delay, or new motion control.
+Reduced motion remains static. W3C 2.2.2 covers automatic motion over five seconds
+alongside other content, so absence of a pause control is not evidence of compliance.
+The owner approved retaining the current design after the phone preview was
+restored and the pending motion decision was surfaced. No new control or motion
+restriction is introduced. This is product approval, not an accessibility ruling
+or permission to make an unsupported WCAG claim.
+
+September 8 standards follow-up: the [normative definition of mechanism](https://www.w3.org/TR/WCAG22/#dfn-mechanism)
+allows platform/user-agent mechanisms, so a visible in-page pause button is not
+inherently required. However, W3C's [C39 technique](https://www.w3.org/WAI/WCAG22/Techniques/css/C39)
+is expressly sufficient for interaction-triggered motion (2.3.3), not a blanket
+determination for automatic animation (2.2.2). The working group's exact question
+about OS Reduce Motion and 2.2.2 remains [open in issue 4319](https://github.com/w3c/wcag/issues/4319).
+An open discussion is evidence of uncertainty, not a ruling that this implementation
+passes or fails. Our live preference-change checks prove that the artwork stops
+and content remains usable; they do not settle that interpretation. Further generic
+searching is unlikely to resolve this gate. Preserve the approved no-new-button
+design; obtain an explicit release disposition acknowledging the limitation, or
+approval for a different mechanism. Do not change the Mac's system preferences
+or substitute another site's design as conformance evidence.
+
+For subsequent proposed behaviors, the implementing agent records whether each proposed
+behavior is automatic or deliberately activated, its duration, preference response
+and applicable accessibility criterion. Review this before implementing the motion
+study. Mehul approves any resulting visible control or changed motion policy before
+it is applied. The current no-new-pause-button direction is not permission to claim
+unproven compliance; an unresolved conflict must be surfaced, not silently worked
+around. This decision belongs here rather than becoming a fabricated confirmed bug.
+
+## Approval and delivery gates
+
+- [x] Mehul approves the revised material contract and study direction ("Approved").
+- [x] D1 motion-policy classification reviewed for the local prototype; no policy change.
+- [x] Owner approved current release design; preserve D1 limitation without claiming conformance.
+- [x] Local direction approved for extension after Mehul's phone login/signup review: wrapper reduction,
+      protected text/controls and solid demo, with unchanged homepage story/physics.
+      Navigation seam correction is explicitly required before readiness.
+- [x] Complete moving login study and persistent-host work; desktop/phone evidence is in the delivery ledger.
+- [x] Mehul reviewed login/signup in his phone browser and authorized extension;
+      final moving-browser regression verification remains a separate gate.
+- [x] Extend the agreed composition to signup/reset/callback; test real input,
+      keyboard/focus, expanded errors, interruption/recovery, browser history,
+      reduced motion, graphics failure and phone widths. Owner phone acceptance
+      supplements emulation; this is not exhaustive device/virtual-keyboard proof.
+- [x] Verify the authorized reading/discovery/share extension in the actual local browser.
+- [x] Complete scoped public-route and adjacent-workspace local checks; production verification remains separate.
+- [x] Final source/deterministic/browser/harness gates passed for implementation `ee325f3`.
+- [ ] Separate PR: brief before-to-after journeys, green CI **and** clean Codex
+      review on final head, then authorized merge, deployment and production proof.
+
+Functional checks are necessary but cannot override a failed visual review. Keep
+the existing [delivery checklist](PUBLIC_THEME_CONTINUITY.md) as the single finding
+ledger; this document owns the proposed design reset, not duplicated fix status.
diff --git a/docs/PUBLIC_THEME_CONTINUITY.md b/docs/PUBLIC_THEME_CONTINUITY.md
new file mode 100644
index 00000000..c058475c
--- /dev/null
+++ b/docs/PUBLIC_THEME_CONTINUITY.md
@@ -0,0 +1,235 @@
+# Public theme continuity
+
+**September 12: design approved; implementation and local browser verification complete.**
+[PR #51](https://github.com/msrivas-7/CodeTutor-AI/pull/51), branch
+`dev/public-theme-continuity`, implementation `ee325f3`, based on homepage release
+`690c767`. Not merged or production-deployed.
+
+**31 of 31 findings are locally verified; owner approved the phone experience.** “Local”
+never means merged or production-verified. This checklist is the status source;
+[the design plan](PUBLIC_BRAND_CONTINUITY_DESIGN.md) records decisions and
+[the design system](DESIGN_SYSTEM.md) owns shared tokens/components.
+
+## Approved scope
+
+Continue the homepage's near-black, living code-glyph world across centered auth,
+legal/support, comparison, generated discovery, shares, loading and public errors.
+One renderer; open composition around protected text; solid forms/code/controls;
+aligned navigation. No detached auth sculpture, static replacement theme, broad
+opaque slabs, new pause button or mobile motion disable. OS Reduce Motion gets
+a static composition; graphics failure must not block tasks.
+
+Mehul approved phone login/signup for extension, the homepage demo materials,
+a four-to-five-second share reveal cap, and the phone spacing refinement. Further
+material design changes require approval. Auth/access rules, legal meaning,
+authored lessons, metadata and signed-in workspaces stay intact. The anonymous
+editor remains a workspace, without marketing decoration.
+
+## Current verification
+
+- **UX-225 locally closed:** two CI runs missed the completion dialog's first
+  Escape. A regression reproduced the unhandled DOM-commit-boundary event before
+  passive effects installed keyboard ownership. The shared modal now establishes
+  keyboard, focus and background blocking before paint; focused regression and
+  actual-browser completion/recovery checks pass. Fresh final-head review and CI
+  remain required. The historical 96-case result below predates this repair.
+- **UX-226 locally closed:** direct login, signup, recovery, callback, public
+  share and anonymous-lesson entries now paint through the lightweight public
+  route tree. The full route tree retains those routes for workspace-originated
+  navigation. Real-browser blocking of the full App module still produced a
+  working login; pre-app paint, protected redirect, share recovery, anonymous
+  handoff, 404, desktop, 390px and reduced-motion checks pass. The complete
+  58-case Chromium/WebKit public-theme matrix passes without retries.
+- **UX-227/228 locally closed:** final-head review found that a quick homepage
+  transition could retain the five-second deferred-auth timer, and that the
+  public bootstrap did not mirror React Router's case/trailing-slash matching.
+  Auth-dependent navigation now cancels the delay immediately, while a shared
+  normalized pathname classifies both exact and prefixed public routes. Actual
+  browser homepage → login/trial and direct `/Signup/` checks pass; the focused
+  25-case bootstrap contract and frontend typecheck pass.
+- **UX-229 locally closed:** the lightweight anonymous lesson omitted the full app's
+  global shortcut owner, so `?` and Cmd/Ctrl+K stopped working after the
+  cinematic. The anonymous product route now mounts that same owner without
+  loading it on acquisition/trust pages. In the rebuilt local in-app browser,
+  `?` opened and Escape closed the shortcuts dialog, Cmd+K focused the Tutor,
+  typed question marks stayed in the composer, and Privacy remained shortcut-free.
+  The retry-disabled Chromium regression and 39 focused frontend contracts pass.
+- **PR gate:** Full cross-platform CI is green. Capacity run `34688798759`
+  proved 16 isolated database stacks reliable and 20 unreliable. Exact-head E2E
+  run `34690166145` then exposed that the normal workflow also added Firefox,
+  WebKit and two critical stacks to its 16 Chromium shards, recreating the same
+  20-stack overload. The workflow now reserves those four support stacks and
+  runs 12 exhaustive Chromium shards, keeping all coverage inside the proven
+  16-stack limit; exact-head E2E confirmation is pending.
+  A final review found that encoded public paths selected the full application
+  tree; the shared normalizer and exact browser contract now match the guarded
+  pre-paint decoder. Exact-head review/E2E, merge, deployment and focused
+  production browser verification remain pending.
+- **Hosted preview:** actual browser catalog → Python Intermediate → Mini ORM
+  capstone, narrow-screen lists/code and invalid discovery → catalog recovery
+  pass. Invalid paths return HTTP 404. This is preview evidence, not production.
+- **Latest product source:** 663 frontend tests, production build/typecheck and
+  unchanged asset budgets pass. The final 98-case public/marketing/share matrix
+  passed 97 cases directly; the one local Supabase-outage case passed on its exact
+  zero-retry rerun after the stack recovered. These supplement real browsing.
+  September 8 source snapshot: 44 changed/untracked frontend and E2E files;
+  SHA-256 `2e8c21a6458aa40316121c86fd9642d4ae9a7a6a49eae8e8af3c4aab1f7a745a`
+  over sorted path-NUL/content-NUL pairs. This identifies the reviewed local
+  source, not a commit or the harness's final staged fingerprint.
+- **Actual desktop journey:** homepage → Privacy → Terms → Support → comparison
+  → catalog/course → Mini ORM capstone → Hello World trial → Back. Reading,
+  focus, scroll restoration and public/workspace theme separation checked.
+- **Actual phone-width journey:** auth modes/recovery/callback, legal reading,
+  support keyboard focus, comparison → trial → Back, catalog, valid/invalid share,
+  blocked lookup → keyboard Retry → recovered share. Dense paragraphs, lists,
+  code and controls inspected while the glyph field moved.
+- **Cold paint/history:** held app JavaScript leaves a near-black login; reload
+  recovers. Fresh auth/legal Back/Forward and static discovery/home/trial returns
+  retain theme tokens. A documented dev account successfully signed in; saved
+  Light survives public Privacy → Start → reload, without changing preferences
+  or progress. One earlier anomalous history entry remains unexplained (UX-199).
+- **Motion/resilience:** actual short/fast/reversed scrolling, Read/Ask/Check,
+  keyboard artwork input, live Reduce Motion changes and blocked-renderer recovery
+  checked. Scoped checks also cover 320px, tablet, 4K, no-JavaScript discovery,
+  route-loading focus and long-share reveal.
+- **Scope preservation:** legal text/section-title AST comparison against base
+  passes. No backend, migration, authored-course or auth-handler changes.
+  Final boundary review additionally confirms entry-document metadata is unchanged
+  and login/reset/signup function bodies differ only in CSS classes (AST-backed
+  comparison recorded in the parent harness). Shared route/loading/world code
+  was inspected separately; this is not a production-hosting claim.
+  Static production hosting still requires deployed verification.
+- **Resumed final browser pass:** access returned after manual unlock. Signup's
+  Privacy link opens a readable separate tab and leaves signup intact; the test
+  tab was closed. Held-script signup first paint stays near-black. Fresh
+  Back/Forward retains tokens/bootstrap and restores a measured Privacy reading
+  position of 863px. Phone Terms remains readable during motion and live Reduce
+  Motion; Support keyboard focus and blocked graphics → usable homepage Ask →
+  Reload recovery pass. Viewport/network/media overrides were restored.
+
+No email or personal messaging app was opened. Browser wheel/viewport emulation
+does not prove physical iPhone swipe momentum, virtual keyboard or feel.
+
+## Finding checklist
+
+Checked means the bounded finding has local browser evidence, not whole-release acceptance.
+
+| Status            | Finding | Change / remaining work                                                                                                                                                                                                                                                                                                                                    |
+| ----------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [x] Local         | UX-198  | Center auth; remove purposeless split-layout sculpture.                                                                                                                                                                                                                                                                                                    |
+| [x] Local         | UX-199  | Initial document/loading/settled colors aligned. Fresh cold loads, saved-Light and resumed Back/Forward journeys pass. The earlier missing-token/bootstrap history anomaly has not reproduced on the final source; retain it as an unexplained historical observation, not a claimed root-cause fix or browser defect. Recheck deployed cold load/history. |
+| [x] Local         | UX-200  | Main-content focus appears on the heading, unobscured by child surfaces.                                                                                                                                                                                                                                                                                   |
+| [x] Local         | UX-201  | Repair trust dividers and protect contact-link readability.                                                                                                                                                                                                                                                                                                |
+| [x] Local         | UX-202  | New public navigation starts at destination top; explicit anchors and Back retain their own behavior.                                                                                                                                                                                                                                                      |
+| [x] Local         | UX-203  | Router selects trust content; `/privacy/` no longer becomes Support.                                                                                                                                                                                                                                                                                       |
+| [x] Local         | UX-204  | Malformed shares show unavailable; actual lookup failures retain working Retry.                                                                                                                                                                                                                                                                            |
+| [x] Local         | UX-205  | Themed static discovery 404 with real error status and no-JavaScript recovery; production host unverified.                                                                                                                                                                                                                                                 |
+| [x] Local         | UX-206  | Living world, readable materials and persistent SPA renderer implemented. Connected desktop/phone family reading/navigation, auth and share recovery, workspace isolation, and resumed graphics interruption/recovery pass. Final harness phase/production gates remain separate.                                                                          |
+| [x] Local         | UX-207  | Disabled auth controls use opaque state colors instead of letting glyphs bleed through opacity.                                                                                                                                                                                                                                                            |
+| [x] Local         | UX-208  | Bound auth foreground at 4K; preserve full-screen ambient density.                                                                                                                                                                                                                                                                                         |
+| [x] Local         | UX-209  | Restore homepage graphics-download notice and Reload recovery after renderer extraction.                                                                                                                                                                                                                                                                   |
+| [x] Local         | UX-210  | Align header/wordmark/action geometry; auth heading no longer recenters with form height.                                                                                                                                                                                                                                                                  |
+| [x] Local         | UX-211  | Live Reduce Motion settles share code/count/timeline without replaying on restoration.                                                                                                                                                                                                                                                                     |
+| [x] Local         | UX-212  | Open homepage explanation area; keep demo functional surfaces solid. Owner approved.                                                                                                                                                                                                                                                                       |
+| [x] Local         | UX-213  | Support action retains readable normal/hover/focus colors; no mail app used.                                                                                                                                                                                                                                                                               |
+| [x] Local         | UX-214  | Lazy public loading retains escape navigation and focus through nested fallbacks.                                                                                                                                                                                                                                                                          |
+| [x] Local         | UX-215  | Long lesson inline code wraps without phone-wide document overflow.                                                                                                                                                                                                                                                                                        |
+| [x] Local         | UX-216  | Omit empty concept panels; retain populated ones.                                                                                                                                                                                                                                                                                                          |
+| [x] Local         | UX-217  | Mixed text/code objective chips wrap as one text flow.                                                                                                                                                                                                                                                                                                     |
+| [x] Local         | UX-218  | Direct `/#study-demo` arrives after lazy loading; user interruption cancels pending handoff.                                                                                                                                                                                                                                                               |
+| [x] Local         | UX-219  | Homepage loading handoff retains skip/home/main focus without unwanted page movement.                                                                                                                                                                                                                                                                      |
+| [x] Local         | UX-220  | Mobile homepage typography agrees across direct entry, auth return, reload and Back.                                                                                                                                                                                                                                                                       |
+| [x] Local         | UX-221  | Public share comments use readable faint-text role (at least 4.5:1); image-export palette unchanged.                                                                                                                                                                                                                                                       |
+| [x] Local         | UX-222  | Auth supporting copy shares 14px/21px recipe; workspace signup unchanged. Intercepted recovery responses prove presentation, not delivery.                                                                                                                                                                                                                 |
+| [x] Local         | UX-223  | Long reveal ends within five seconds of typing start and reserves line/footer space; short cadence retained. Network loading/later celebration excluded.                                                                                                                                                                                                   |
+| [x] Local + owner | UX-224  | More phone formation space: hero departure interval at 390×844 increases from about 1px to 351px. Local adversarial scroll/recovery checks pass; after restored phone access Mehul confirmed it works and approved the experience.                                                                                                                         |
+| [x] Closed        | UX-225  | Completion dialog now owns Escape at first mount and closes safely before checkout gates; the browser evidence now confirms the first-commit close path, with modal-level regression checked and happy-path recovery preserved.                                                                                                                            |
+| [x] Closed        | UX-226  | Direct auth, recovery, callback, share and anonymous-lesson entries use the lightweight public bootstrap while retaining the same routes in the full app for later SPA navigation. Rebuilt real-browser and retry-disabled Chromium/WebKit proof pass.                                                                                                     |
+| [x] Closed        | UX-227  | Auth-dependent navigation from a deferred public page cancels the five-second hydration delay immediately; homepage → login/trial are ready without the stale waiting state.                                                                                                                                                                               |
+| [x] Closed        | UX-228  | Public bootstrap classification now matches React Router for case, trailing slashes and guarded percent decoding across exact, share and anonymous-lesson routes.                                                                                                                                                                                          |
+
+## Evidence map
+
+Screenshots and detailed chronological audits are machine-local, not included in
+a fresh clone. Root: `.agent-harness/browser-evidence/`.
+
+| Session directory                       | Evidence                                                                                                                                                                                              |
+| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `5c7d75ed-22d3-41db-bfc3-857daf5b8b6f/` | Parent audits; `UX199-*`, `UX204-*`, `UX205-*`, `UX206-final-*`, `UX210-final-*`, `UX212-*`, `UX214-final-*`, `UX215-*`–`UX219-*`.                                                                    |
+| Same parent, `connected-*.png`          | Final desktop family/long-lesson journey and auth recovery.                                                                                                                                           |
+| Same parent, `dev-account-*.png`        | Dev-account sign-in and saved-Light/public-dark/workspace-Light boundaries.                                                                                                                           |
+| Same parent, `final-*.png`              | Latest cold login, phone legal/support/comparison/trial, share failure/retry, callback/reset and static-history checks.                                                                               |
+| Same parent, `resumed-*.png`            | Post-unlock signup privacy-tab, held-script first paint, history/863px reading restoration, phone Terms/preferences/Support focus and graphics recovery.                                              |
+| Parent finding audits                   | UX-199: `79a1d45e-a40e-458c-a867-cb5f07479852`; UX-206: `2a8377ee-db89-4806-9a3f-bb86f86c3ecf`.                                                                                                       |
+| Final local phase                       | `b293581c-f3e4-4a7f-a724-50f5daf20165`; staging-only fingerprint refresh `459bb440-e310-4631-8bea-f4d73cd38a85`. Parent harness finished and pre-commit live-browser gate passed.                     |
+| `693b16bc-7909-40fc-b51d-b531f67fe84d/` | UX-213 action states.                                                                                                                                                                                 |
+| `e2880cbd-d263-4e58-abb7-5cf88b8809d6/` | UX-220–222 typography/contrast/supporting-copy repairs.                                                                                                                                               |
+| `dd56a6ef-9a6c-4f6c-b414-2092b1522ef6/` | UX-223 reveal/interruption/recovery. Failed audit retained, incident resolved; passing audit `b56570ef-8eeb-48e6-9d83-d9b79bc31021`.                                                                  |
+| `e61236d8-3b68-4c1c-84a7-f704c6045827/` | UX-224 formation/dwell, reversal, keyboard, preferences and graphics recovery. Finding audit `cc2ea60a-4a6a-4502-ae3e-4b3de4e43d7a`.                                                                  |
+| `b3564266-122c-439e-92c9-2dd55e3c4e3e/` | Independent design review of 27 primary-agent captures and source; reviewers did not run separate browser sessions.                                                                                   |
+| `825e4a74-2653-4b04-ae59-269a8bc6f90f/` | Final-head UX-225/226 browser replay: direct auth without App, pre-app paint, protected redirect, phone/reduced-motion recovery, share-to-anonymous handoff, completion Escape and focus restoration. |
+| `a6c213ed-476c-4201-a428-ebe6b7ea02d4/` | UX-227/228 review follow-up: immediate homepage-to-auth/product hydration and normalized direct public entry.                                                                                         |
+
+Historical prototype captures do not establish acceptance of later edits.
+Named final checks supersede them only for their stated scope. The anomalous
+history capture is `UX199-restored-document-missing-theme.png`; do not discard it.
+UX-220–224 finding evidence is also indexed in the parent harness session, with
+original audit IDs, timestamps and fingerprints preserved in its notes. This is
+evidence consolidation, not a new browser execution or physical-phone acceptance.
+
+## Design review disposition
+
+Product/brand, motion/UX and design-system reviewers agreed on one recognizable
+family; keep the direction. Confirmed typography, share contrast and auth hierarchy
+inconsistencies became UX-220–222. Heavy-text browsing found no through-letter
+glyph collision; protect reading locally rather than broadly dimming the world.
+
+Optional, **not approved for this phase**: shorten desktop hero to expose CTA
+earlier; link Lessons to the course anchor; reconcile method/demo wording; soften
+comparison copy; quiet peripheral glow. Transparent pager/secondary-control
+consistency merits inspection, not redesign based on an assumed defect.
+
+## Remaining release gates
+
+- [x] After manual unlock, inspect signup's new privacy tab, restore viewport and
+      finish the connected browser pass and UX-199/206 disposition. Retain relevant
+      keyboard, loading/error/recovery, moving readability, responsive, preference
+      and adjacent-workspace coverage.
+- [x] Get physical-phone feedback for UX-224 through the registered local preview.
+      The temporary gateway stopped while localhost remained healthy. It has been
+      replaced with the owner-requested persistent, reserved-phone project gateway;
+      automatic process restart, allowed/denied peers, registration/removal and local
+      browser rendering pass. The service remains running on recheck. See
+      [local phone access](DEVELOPMENT.md#local-phone-access). This is not a production
+      deployment. Mehul subsequently confirmed: “Yeah it worked and I like it approved
+      from me.” This closes owner phone acceptance, not production verification.
+- [x] Retain the approved [D1 motion policy](PUBLIC_BRAND_CONTINUITY_DESIGN.md#review-decisions-and-open-questions):
+      current design approved after the pending decisions were surfaced; OS Reduce
+      Motion works and no pause button is added. Accessibility conformance remains
+      unproven and must not be advertised as established by product approval.
+- [x] Record final finding/whole-phase evidence; inspect the full diff, stage only
+      this phase, run final deterministic checks, doctor and harness finish on the
+      exact intended phase. Any subsequent product-source change invalidates the
+      affected evidence and requires revalidation.
+- [x] Publish separate PR with before→after journey notes: PR #51.
+- [ ] Require **green CI AND
+      clean Codex review** on final head: reviewer has completed its review with no
+      outstanding actionable findings, not merely no pending comment request.
+      Answer/resolve actionable threads and obtain a fresh review after fixes.
+- [ ] Merge after those gates, verify deployment SHA and changed/adjacent
+      production browser journeys, then complete the goal.
+
+PR journey notes: independent page themes → shared living brand; old scroll
+retained → new destination at top; stalled loading without escape → retained
+navigation/focus; direct walkthrough at top → correct delayed anchor; malformed
+share “connection failure” → unavailable; long reveal hides lines/moves footer →
+capped stable reveal; phone shapes rush away → longer native formation space.
+Direct logged-out entries waited on the authenticated application route tree →
+auth, recovery, callback, share and anonymous-lesson entries load through the
+lightweight public route tree while protected-entry navigation remains intact.
+Auth/access rules are unchanged.
+
+Separate follow-up approved: automatically choose the shard count from trusted
+runtime history, measured setup cost and safe concurrency bounds. Preserve the
+full suite, stable fallback and a minimum meaningful gain; validate predictions
+against real runs before enabling. This is not part of PR #51.
diff --git a/e2e/README.md b/e2e/README.md
index 6b7a964b..ef27e4cf 100644
--- a/e2e/README.md
+++ b/e2e/README.md
@@ -61,17 +61,17 @@ npm run test:real
 
 ## Fixtures
 
-| Fixture | Purpose |
-| --- | --- |
-| `fixtures/boot.ts` | globalSetup; asserts frontend + backend reachable |
-| `fixtures/profiles.ts` | `loadProfile(page, id)` + `seedApiKey(page)` + `clearAppStorage(page)` |
-| `fixtures/monaco.ts` | `waitForMonacoReady` / `setMonacoValue` / `getMonacoValue` (uses `window.monaco` global) |
-| `fixtures/aiMocks.ts` | SSE scenario frames for `/api/ai/ask/stream` — matches production `data: {...}\n\n` wire format |
-| `fixtures/harnessResults.ts` | Canned `TestReport` payloads for `/api/execute/tests` |
-| `fixtures/testMetadata.ts` | Required risk/owner/browser/device/quarantine metadata for the advisory critical lane |
-| `fixtures/seeds/*.json` | Serialized `__dev__` profile localStorage seeds |
-| `utils/selectors.ts` | Centralized Playwright locators (role + aria-label first) |
-| `utils/assertions.ts` | Domain-level expects (`expectLessonComplete`, `expectStdoutContains`, …) |
+| Fixture                      | Purpose                                                                                         |
+| ---------------------------- | ----------------------------------------------------------------------------------------------- |
+| `fixtures/boot.ts`           | globalSetup; asserts frontend + backend reachable                                               |
+| `fixtures/profiles.ts`       | `loadProfile(page, id)` + `seedApiKey(page)` + `clearAppStorage(page)`                          |
+| `fixtures/monaco.ts`         | `waitForMonacoReady` / `setMonacoValue` / `getMonacoValue` (uses `window.monaco` global)        |
+| `fixtures/aiMocks.ts`        | SSE scenario frames for `/api/ai/ask/stream` — matches production `data: {...}\n\n` wire format |
+| `fixtures/harnessResults.ts` | Canned `TestReport` payloads for `/api/execute/tests`                                           |
+| `fixtures/testMetadata.ts`   | Required risk/owner/browser/device/quarantine metadata for the advisory critical lane           |
+| `fixtures/seeds/*.json`      | Serialized `__dev__` profile localStorage seeds                                                 |
+| `utils/selectors.ts`         | Centralized Playwright locators (role + aria-label first)                                       |
+| `utils/assertions.ts`        | Domain-level expects (`expectLessonComplete`, `expectStdoutContains`, …)                        |
 
 ## Conventions
 
@@ -106,12 +106,16 @@ npm run test:real
 
 See `.github/workflows/e2e.yml`. The current PR model is:
 
-- sixteen blocking Chromium shards for all 439 tests, selected by a same-commit,
-  zero-retry capacity benchmark with no regression-coverage reduction;
+- twelve blocking Chromium shards for all 484 tests, plus four concurrent
+  Firefox, WebKit and critical support stacks, with no coverage reduction;
 - blocking Firefox and WebKit focused journeys;
 - one advisory, zero-retry Chromium critical lane (currently 41 tests in 15 files);
 - CI retries retain diagnostic traces, but `failOnFlakyTests` makes a flaky
   result fail its shard so a targeted rerun cannot erase the original signal;
+- disposable-user provisioning retries only the Supabase SDK's explicit
+  `AuthRetryableFetchError`, whether thrown or returned in the SDK response,
+  with a four-attempt exponential equal-jitter bound; ordinary auth errors and
+  every browser assertion still fail immediately;
 - each lane, shard, attempt, and benchmark stage receives a stable synthetic
   address from the reserved `2001:db8::/32` range through the Vite proxy, so
   the real per-IP abuse controls are tested without unrelated jobs sharing one
@@ -120,20 +124,20 @@ See `.github/workflows/e2e.yml`. The current PR model is:
 
 `e2e/shadow/regression-corpus.json` freezes the initial P0/P1 catch corpus.
 `e2e/shadow/migration-pilots.json` records the three lower-layer pilots and the
-browser boundary retained for each. The earlier shard benchmark measured four,
-six, and eight shards on commit `c6aa5f0`; at the then-smaller suite size, six
-was fastest at 316 seconds versus 340 for eight and 495 for four. The suite has
-since grown to 439 Chromium tests, so the capacity benchmark compared 16 and 20
-shards sequentially on the same stable GitHub Pro commit and without retries. Run
-[`33385421742`](https://github.com/msrivas-7/CodeTutor-AI/actions/runs/33385421742)
-selected sixteen shards: its retry-free test critical path was 160 seconds and
-its topology completed in 379 seconds, versus 198 and 416 seconds for 20
-shards. Every shard passed and all 439 tests remained blocking. The benchmark
-reports end-to-end completion, slowest test time, shard imbalance, aggregate
-runner time, setup overhead, and tests per shard. A larger topology is
-recommended only when every shard passes and it improves completion by at least
-20 seconds and 5%; this avoids buying more runner/setup overhead for a noisy or
-negligible gain.
+browser boundary retained for each. The latest capacity run
+[`34688798759`](https://github.com/msrivas-7/CodeTutor-AI/actions/runs/34688798759)
+compared 16 and 20 Chromium shards sequentially on the exact 484-test PR head
+with two workers per shard and no retries. All 16 shards passed in isolation;
+20 failed after the shared development database reached its 200-client
+connection ceiling. Exact-head normal run `34690166145` showed that 16 Chromium
+shards plus Firefox, WebKit and two critical support stacks also reaches 20
+database stacks and reproduces that failure. The operational workflow
+therefore uses 12 Chromium shards and reserves four support slots, keeping the
+full run at the proven 16-stack limit. All 484 tests remain blocking. The
+benchmark reports end-to-end completion, slowest test time, shard imbalance,
+aggregate runner time, setup overhead, and tests per shard. A larger topology
+is recommended only when every shard passes and it improves completion by at
+least 20 seconds and 5%.
 
 After the account moved to GitHub Pro, the controlled capacity pass narrowed to
 a fresh same-commit comparison of the 16-shard incumbent and 20 shards. The
@@ -157,13 +161,16 @@ workers on the reused images. Each stage is sequential, retry-free, and must be
 fully green. Image reuse is adopted only from a material end-to-end gain;
 worker count is selected independently from the Playwright test critical path.
 
-`.github/e2e-shard-capacity.json` records the measured decision. Shard 1 counts
-the live Chromium inventory and fails closed when it reaches 467 tests or falls
-to 411, one measured shard-workload from the 439-test baseline. Re-run the
-benchmark and update the record at that point instead of guessing a new shard
-count or selecting tests away.
+`.github/e2e-shard-capacity.json` records the measured decision. The
+duration-planning gate counts the live Chromium inventory and derives every
+database-backed job's matrix cardinality from the workflow before any of those
+jobs can launch. It fails closed if the complete fan-out exceeds the measured
+16-stack limit, or if the suite reaches 525 tests or falls to 443—one selected
+shard-workload from the 484-test baseline. Re-run the benchmark and update the
+record at that point instead of guessing a new shard count or selecting tests
+away.
 
-The blocking 16-shard lane uses a duration-aware plan rather than Playwright's
+The blocking 12-shard lane uses a duration-aware plan rather than Playwright's
 test-count-only partition. `.github/e2e-duration-seed.json` is the cold-start
 baseline from a clean 439-test run. Before each workflow, the planner enumerates
 the current Chromium inventory and assigns the longest predicted test to the
diff --git a/e2e/fixtures/auth.ts b/e2e/fixtures/auth.ts
index 11a0e1d1..be198021 100644
--- a/e2e/fixtures/auth.ts
+++ b/e2e/fixtures/auth.ts
@@ -23,6 +23,7 @@ import {
   buildWorkerTestEmail,
   listAllUsers,
 } from "./testIdentity";
+import { withAuthProvisioningRetry } from "./authRetry";
 
 const BACKEND_URL = process.env.E2E_API_URL ?? "http://localhost:4000";
 const APP_ORIGIN = process.env.E2E_APP_ORIGIN ?? "http://localhost:5173";
@@ -77,18 +78,25 @@ async function createOrReuseUser(email: string): Promise<string> {
   // design — this endpoint is idempotent on the email key as of GoTrue
   // 2.x). We still rely on email_confirm:true so the session we issue
   // downstream lands with email_verified = true.
-  const { data, error } = await admin.auth.admin.createUser({
-    email,
-    password: PASSWORD,
-    email_confirm: true,
-  });
+  const { data, error } = await withAuthProvisioningRetry(
+    "create test user",
+    () =>
+      admin.auth.admin.createUser({
+        email,
+        password: PASSWORD,
+        email_confirm: true,
+      }),
+  );
   if (error) {
     // Supabase returns 422 with "User already registered" when the email
     // exists. We can still sign in, so treat this as a non-fatal reuse.
     const isDuplicate = /already registered|already exists/i.test(error.message);
     if (!isDuplicate) throw error;
     // Look the user up so we can track the id for teardown.
-    const users = await listAllUsers(admin);
+    const users = await withAuthProvisioningRetry(
+      "find existing test user",
+      () => listAllUsers(admin),
+    );
     const existing = users.find((u) => u.email === email);
     if (!existing) throw error;
     return existing.id;
@@ -114,10 +122,14 @@ async function freshSession(email: string): Promise<Session> {
       },
     },
   });
-  const { data, error } = await anon.auth.signInWithPassword({
-    email,
-    password: PASSWORD,
-  });
+  const { data, error } = await withAuthProvisioningRetry(
+    "sign in test user",
+    () =>
+      anon.auth.signInWithPassword({
+        email,
+        password: PASSWORD,
+      }),
+  );
   if (error) throw error;
   if (!data.session) throw new Error("signIn returned no session");
   return data.session;
@@ -237,9 +249,13 @@ export async function getAdminWorkerUser(workerIndex: number): Promise<CachedUse
   const email = buildCurrentRunTestEmail(`admin-w${workerIndex}`);
   const promise = (async () => {
     const userId = await createOrReuseUser(email);
-    const { error: metadataError } = await admin.auth.admin.updateUserById(userId, {
-      app_metadata: { role: "admin" },
-    });
+    const { error: metadataError } = await withAuthProvisioningRetry(
+      "grant test admin metadata",
+      () =>
+        admin.auth.admin.updateUserById(userId, {
+          app_metadata: { role: "admin" },
+        }),
+    );
     if (metadataError) throw metadataError;
     const { error: roleError } = await admin.from("user_roles").upsert({
       user_id: userId,
diff --git a/e2e/fixtures/authRetry.ts b/e2e/fixtures/authRetry.ts
new file mode 100644
index 00000000..f9f5220e
--- /dev/null
+++ b/e2e/fixtures/authRetry.ts
@@ -0,0 +1,109 @@
+export type AuthProvisioningRetryOptions = {
+  maxAttempts?: number;
+  baseDelayMs?: number;
+  maxDelayMs?: number;
+  sleep?: (delayMs: number) => Promise<void>;
+  random?: () => number;
+  onRetry?: (event: {
+    operation: string;
+    attempt: number;
+    maxAttempts: number;
+    delayMs: number;
+    status: number | undefined;
+  }) => void;
+};
+
+const DEFAULT_MAX_ATTEMPTS = 4;
+const DEFAULT_BASE_DELAY_MS = 250;
+const DEFAULT_MAX_DELAY_MS = 2_000;
+
+function sleep(delayMs: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, delayMs));
+}
+
+type RetryableAuthProvisioningError = {
+  name: "AuthRetryableFetchError";
+  status?: unknown;
+};
+
+export function isRetryableAuthProvisioningError(
+  error: unknown,
+): error is RetryableAuthProvisioningError {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "name" in error &&
+    error.name === "AuthRetryableFetchError"
+  );
+}
+
+function returnedRetryableAuthProvisioningError(
+  result: unknown,
+): RetryableAuthProvisioningError | undefined {
+  if (typeof result !== "object" || result === null || !("error" in result)) {
+    return undefined;
+  }
+  return isRetryableAuthProvisioningError(result.error)
+    ? result.error
+    : undefined;
+}
+
+/**
+ * Absorb only Supabase Auth failures that the SDK explicitly classifies as
+ * retryable. Playwright retries remain a signal for product/test flakes; this
+ * narrow boundary prevents a transient provisioning request from rerunning an
+ * otherwise-complete browser journey.
+ */
+export async function withAuthProvisioningRetry<T>(
+  operation: string,
+  run: () => Promise<T>,
+  options: AuthProvisioningRetryOptions = {},
+): Promise<T> {
+  const maxAttempts = options.maxAttempts ?? DEFAULT_MAX_ATTEMPTS;
+  const baseDelayMs = options.baseDelayMs ?? DEFAULT_BASE_DELAY_MS;
+  const maxDelayMs = options.maxDelayMs ?? DEFAULT_MAX_DELAY_MS;
+  const wait = options.sleep ?? sleep;
+  const random = options.random ?? Math.random;
+  const onRetry =
+    options.onRetry ??
+    ((event) => {
+      console.warn(
+        `[auth fixture] ${event.operation} received a retryable Auth response` +
+          ` (status=${event.status ?? "network"}); retrying ${event.attempt + 1}/${event.maxAttempts}` +
+          ` after ${event.delayMs}ms`,
+      );
+    });
+
+  if (!Number.isSafeInteger(maxAttempts) || maxAttempts < 1) {
+    throw new Error("Auth provisioning maxAttempts must be a positive integer");
+  }
+  if (baseDelayMs < 0 || maxDelayMs < baseDelayMs) {
+    throw new Error("Auth provisioning retry delays are invalid");
+  }
+
+  for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
+    try {
+      const result = await run();
+      const returnedError = returnedRetryableAuthProvisioningError(result);
+      if (returnedError) throw returnedError;
+      return result;
+    } catch (error) {
+      if (!isRetryableAuthProvisioningError(error) || attempt === maxAttempts) {
+        throw error;
+      }
+
+      const ceiling = Math.min(maxDelayMs, baseDelayMs * 2 ** (attempt - 1));
+      // Equal jitter prevents all hosted workers from retrying in lockstep
+      // while retaining a meaningful lower bound between attempts.
+      const delayMs = Math.round(ceiling / 2 + random() * (ceiling / 2));
+      const status =
+        "status" in error && typeof error.status === "number"
+          ? error.status
+          : undefined;
+      onRetry({ operation, attempt, maxAttempts, delayMs, status });
+      await wait(delayMs);
+    }
+  }
+
+  throw new Error("Auth provisioning retry loop exited unexpectedly");
+}
diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
index 7d0deaba..29debf1c 100644
--- a/e2e/playwright.config.ts
+++ b/e2e/playwright.config.ts
@@ -69,7 +69,7 @@ export default defineConfig({
   // "Waiting for session". Two preserves useful parallelism without turning
   // infrastructure capacity into false product failures.
   //
-  // CI parallelism comes from sharding (16 matrix shards × 2 workers = 32
+  // CI parallelism comes from sharding (12 matrix shards × 2 workers = 24
   // effective workers across separate ubuntu-latest runners) — see
   // .github/workflows/e2e.yml. The measured topology and rebenchmark band live
   // in .github/e2e-shard-capacity.json. Larger
diff --git a/e2e/specs/anon-celebration-dismiss-lock.spec.ts b/e2e/specs/anon-celebration-dismiss-lock.spec.ts
index 701916b6..d12bd5d4 100644
--- a/e2e/specs/anon-celebration-dismiss-lock.spec.ts
+++ b/e2e/specs/anon-celebration-dismiss-lock.spec.ts
@@ -52,6 +52,30 @@ test.describe("Phase A-Q — celebration dismissal and continuation", () => {
     await expect(page.getByRole("button", { name: /check/i }).first()).toBeEnabled();
   });
 
+  test("Escape is owned from the first committed completion dialog", async ({ page }) => {
+    await page.goto(PATH);
+    await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
+    await page.getByRole("button", { name: /run/i }).first().click();
+    await expect(page.getByText(/Hello, Maya!/).last()).toBeVisible();
+    await page.evaluate(() => {
+      // Exercise the DOM-commit boundary without a timing sleep or a poll that
+      // could let passive effects catch up before the one-shot key arrives.
+      const observer = new MutationObserver(() => {
+        if (!document.querySelector('[role="dialog"][aria-labelledby="lesson-complete-title"]')) return;
+        observer.disconnect();
+        const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
+        window.dispatchEvent(event);
+        document.documentElement.dataset.earlyDialogEscape = String(event.defaultPrevented);
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+    });
+    await page.getByRole("button", { name: /check/i }).first().click();
+    await expect(page.locator("html")).toHaveAttribute("data-early-dialog-escape", "true");
+    await expect(page.getByRole("dialog", { name: /lesson complete/i })).toHaveCount(0);
+    await expect(page.getByText(/Lesson 2 is queued up/i)).toHaveCount(0);
+    await expect(page.getByRole("button", { name: /check/i }).first()).toBeEnabled();
+  });
+
   test("Keep practicing has a distinct outcome from Next Lesson", async ({ page }) => {
     const celebration = await openCelebration(page);
     await celebration.getByRole("button", { name: /keep practicing/i }).click();
diff --git a/e2e/specs/anon-lesson.spec.ts b/e2e/specs/anon-lesson.spec.ts
index 81aa3d0c..c09d0d1a 100644
--- a/e2e/specs/anon-lesson.spec.ts
+++ b/e2e/specs/anon-lesson.spec.ts
@@ -81,6 +81,30 @@ test.describe("anonymous lesson 1 (Phase 27 §3a)", () => {
     await expect(page.getByLabel(/ask the tutor/i)).toBeVisible();
   });
 
+  test("anonymous lesson retains product shortcuts after the cinematic", async ({ page }) => {
+    await page.addInitScript(() => {
+      window.sessionStorage.setItem("codetutor.anonChoreographyDone", "1");
+    });
+    await page.goto(ALLOWED_PATH);
+    const composer = page.getByLabel(/ask the tutor/i);
+    await expect(composer).toBeVisible();
+
+    await page.keyboard.press("?");
+    const dialog = page.getByRole("dialog", { name: /keyboard shortcuts/i });
+    await expect(dialog).toBeVisible();
+    await page.keyboard.press("Escape");
+    await expect(dialog).toHaveCount(0);
+
+    await page.getByRole("main").focus();
+    await page.keyboard.press("Control+K");
+    await expect(composer).toBeFocused();
+
+    await composer.fill("Does ? stay in the question?");
+    await page.keyboard.press("?");
+    await expect(dialog).toHaveCount(0);
+    await expect(composer).toHaveValue("Does ? stay in the question??");
+  });
+
   test("anonymous tutor preserves the same Socratic first-turn proof flow", async ({ page }) => {
     await page.addInitScript(() => {
       window.sessionStorage.setItem("codetutor.anonChoreographyDone", "1");
diff --git a/e2e/specs/auth-retry-contract.spec.ts b/e2e/specs/auth-retry-contract.spec.ts
new file mode 100644
index 00000000..a194e447
--- /dev/null
+++ b/e2e/specs/auth-retry-contract.spec.ts
@@ -0,0 +1,141 @@
+import { test, expect } from "@playwright/test";
+import {
+  isRetryableAuthProvisioningError,
+  withAuthProvisioningRetry,
+} from "../fixtures/authRetry";
+
+test.describe("E2E auth provisioning retry contract", () => {
+  test("retries the SDK's explicit retryable failure with bounded equal jitter", async () => {
+    const delays: number[] = [];
+    let attempts = 0;
+
+    const value = await withAuthProvisioningRetry(
+      "create user",
+      async () => {
+        attempts += 1;
+        if (attempts < 3) {
+          throw { name: "AuthRetryableFetchError", status: 503 };
+        }
+        return "ready";
+      },
+      {
+        baseDelayMs: 200,
+        random: () => 0,
+        sleep: async (delayMs) => void delays.push(delayMs),
+        onRetry: () => undefined,
+      },
+    );
+
+    expect(value).toBe("ready");
+    expect(attempts).toBe(3);
+    expect(delays).toEqual([100, 200]);
+  });
+
+  test("does not retry ordinary auth or assertion failures", async () => {
+    const failure = new Error("invalid fixture input");
+    let attempts = 0;
+
+    await expect(
+      withAuthProvisioningRetry(
+        "create user",
+        async () => {
+          attempts += 1;
+          throw failure;
+        },
+        {
+          sleep: async () => undefined,
+          onRetry: () => undefined,
+        },
+      ),
+    ).rejects.toBe(failure);
+
+    expect(attempts).toBe(1);
+    expect(isRetryableAuthProvisioningError(failure)).toBe(false);
+  });
+
+  test("retries a retryable error returned in a Supabase SDK response", async () => {
+    const failure = { name: "AuthRetryableFetchError" as const, status: 503 };
+    let attempts = 0;
+
+    const value = await withAuthProvisioningRetry(
+      "create user",
+      async () => {
+        attempts += 1;
+        return attempts === 1
+          ? { data: null, error: failure }
+          : { data: { id: "user-1" }, error: null };
+      },
+      {
+        sleep: async () => undefined,
+        onRetry: () => undefined,
+      },
+    );
+
+    expect(attempts).toBe(2);
+    expect(value).toEqual({ data: { id: "user-1" }, error: null });
+  });
+
+  test("returns ordinary Supabase SDK errors for the caller to handle", async () => {
+    const failure = { name: "AuthApiError", status: 422 };
+    let attempts = 0;
+
+    const value = await withAuthProvisioningRetry(
+      "create user",
+      async () => {
+        attempts += 1;
+        return { data: null, error: failure };
+      },
+      {
+        sleep: async () => undefined,
+        onRetry: () => undefined,
+      },
+    );
+
+    expect(attempts).toBe(1);
+    expect(value.error).toBe(failure);
+  });
+
+  test("preserves the final retryable failure after the fixed attempt bound", async () => {
+    const failure = { name: "AuthRetryableFetchError", status: 0 };
+    let attempts = 0;
+
+    await expect(
+      withAuthProvisioningRetry(
+        "sign in",
+        async () => {
+          attempts += 1;
+          throw failure;
+        },
+        {
+          maxAttempts: 3,
+          sleep: async () => undefined,
+          onRetry: () => undefined,
+        },
+      ),
+    ).rejects.toBe(failure);
+
+    expect(attempts).toBe(3);
+  });
+
+  test("preserves a returned retryable failure after the fixed attempt bound", async () => {
+    const failure = { name: "AuthRetryableFetchError" as const, status: 503 };
+    let attempts = 0;
+
+    await expect(
+      withAuthProvisioningRetry(
+        "update user",
+        async () => {
+          attempts += 1;
+          return { data: null, error: failure };
+        },
+        {
+          maxAttempts: 3,
+          sleep: async () => undefined,
+          onRetry: () => undefined,
+        },
+      ),
+    ).rejects.toBe(failure);
+
+    expect(attempts).toBe(3);
+  });
+});
diff --git a/e2e/specs/marketing.spec.ts b/e2e/specs/marketing.spec.ts
index 72cf41c3..b1ae57cf 100644
--- a/e2e/specs/marketing.spec.ts
+++ b/e2e/specs/marketing.spec.ts
@@ -338,7 +338,9 @@ test.describe("marketing page (Phase 22C) — mobile viewport", () => {
     await artwork.focus();
     for (const viewport of [
       { width: 844, height: 390 },
+      { width: 320, height: 568 },
       { width: 320, height: 740 },
+      { width: 430, height: 932 },
       { width: 390, height: 844 },
     ]) {
       await page.setViewportSize(viewport);
@@ -349,6 +351,23 @@ test.describe("marketing page (Phase 22C) — mobile viewport", () => {
           () => document.documentElement.scrollWidth <= innerWidth + 1,
         ),
       ).toBe(true);
+      if (viewport.width <= 640) {
+        // UX-224: the old 210px hero collapsed the renderer's departure
+        // interval to 1px. Protect usable scroll space, not a CSS constant.
+        const pacing = await page.evaluate(() => {
+          const hero = document.querySelector(".study-hero-art")!.getBoundingClientRect();
+          const copy = document.querySelector(".study-hero-copy")!.getBoundingClientRect();
+          const assembledAt = Math.max(0, hero.top + scrollY + hero.height / 2 - innerHeight / 2);
+          const clearAt = Math.max(assembledAt + 1, copy.top + scrollY - innerHeight * 0.55);
+          return {
+            departure: (clearAt - assembledAt) / innerHeight,
+            chapters: [...document.querySelectorAll(".study-chapter-art, .study-closing-art")]
+              .map(element => element.getBoundingClientRect().height / innerHeight),
+          };
+        });
+        expect(pacing.departure).toBeGreaterThan(0.3);
+        expect(pacing.chapters.every(height => height >= 0.6)).toBe(true);
+      }
     }
     // The artwork must not capture vertical touch scrolling.
     await expect(artwork).toHaveCSS("touch-action", "pan-y");
diff --git a/e2e/specs/phase-aq-cross-browser.spec.ts b/e2e/specs/phase-aq-cross-browser.spec.ts
index 540fa00f..9f55155b 100644
--- a/e2e/specs/phase-aq-cross-browser.spec.ts
+++ b/e2e/specs/phase-aq-cross-browser.spec.ts
@@ -275,26 +275,24 @@ test.describe(
     await expect(continuation).toHaveCount(0);
   });
 
-  test("a native viewport reflow consumes Escape before the product modal", async ({ page }) => {
+  test("Escape closes the product modal through a native viewport reflow", async ({ page }) => {
     await page.setViewportSize({ width: 1280, height: 720 });
     await seedFirstRun(page, true);
     await openLesson(page);
-    await page.getByRole("button", { name: /sign up to save/i }).click();
+    const returnFocus = page.getByRole("button", { name: /sign up to save/i });
+    await returnFocus.click();
     const continuation = page.getByRole("dialog", { name: /sign up to save/i });
     await expect(continuation).toBeVisible();
 
-    await page.evaluate(() => {
-      window.dispatchEvent(new KeyboardEvent("keydown", {
-        key: "Escape",
-        bubbles: true,
-      }));
-    });
-    await page.setViewportSize({ width: 900, height: 720 });
-    await page.waitForTimeout(180);
-    await expect(continuation).toBeVisible();
-
-    await page.keyboard.press("Escape");
+    // Safari can apply this same physical Escape to its native fullscreen
+    // transition. The product modal must still close and restore its trigger
+    // after the resulting viewport reflow.
+    await Promise.all([
+      page.keyboard.press("Escape"),
+      page.setViewportSize({ width: 900, height: 720 }),
+    ]);
     await expect(continuation).toHaveCount(0);
+    await expect(returnFocus).toBeFocused();
   });
   },
 );
diff --git a/e2e/specs/phase-aq-visual-quality.spec.ts b/e2e/specs/phase-aq-visual-quality.spec.ts
index 5d574388..8fd87d34 100644
--- a/e2e/specs/phase-aq-visual-quality.spec.ts
+++ b/e2e/specs/phase-aq-visual-quality.spec.ts
@@ -44,72 +44,61 @@ test.describe("Phase A-Q — visual viewport matrix", () => {
     await page.setViewportSize({ width: 1440, height: 900 });
     await page.goto("/login");
 
-    const field = page.getByTestId("ambient-glyph-field");
-    const glyphs = field.locator("[data-floating-glyph]");
+    await expect(page.getByRole("heading", { name: "Sign in", exact: true })).toBeVisible();
+    await expect(page.locator(".public-page")).toHaveAttribute("data-motion", "ready");
+    const field = page.locator(".public-motion-world > .motion-study-canvas");
+    const canvas = field.locator("canvas");
     await expect(field).toBeVisible();
-    await expect(glyphs).toHaveCount(7);
-    await expect(field).toHaveClass(/ambient-glyph-field--center-safe/);
-
-    const sample = () =>
-      glyphs.evaluateAll((elements) =>
-        elements.map((element) => {
-          const style = getComputedStyle(element);
-          return `${style.transform}|${style.opacity}`;
-        }),
-      );
+    await expect(canvas).toHaveCount(1);
+    await page.evaluate(() => document.fonts.ready);
+
+    // The approved public world is rendered, not seven independent DOM
+    // glyphs. Compare actual frames so a mounted but frozen canvas fails.
+    const sample = () => canvas.screenshot({ caret: "hide" });
     const initialMotion = await sample();
     await expect
-      .poll(async () => JSON.stringify(await sample()), { timeout: 5_000 })
-      .not.toBe(JSON.stringify(initialMotion));
+      .poll(async () => (await sample()).equals(initialMotion), { timeout: 5_000 })
+      .toBe(false);
 
-    const contentLayer = page
-      .locator("div.relative.z-10")
-      .filter({ has: page.getByRole("heading", { name: "Sign in", exact: true }) })
-      .first();
+    const contentLayer = page.locator(".public-page");
     await expect(contentLayer).toBeVisible();
     expect(await field.evaluate((element) => getComputedStyle(element).zIndex)).toBe("0");
-    expect(await contentLayer.evaluate((element) => getComputedStyle(element).zIndex)).toBe(
-      "10",
-    );
+    // The page is an isolated stacking context painted after the fixed world;
+    // it need not invent a positive z-index to protect its content.
+    await expect(contentLayer).toHaveCSS("isolation", "isolate");
+    await expect(contentLayer).toHaveCSS("position", "relative");
+    expect(await field.evaluate(element => Boolean(
+      element.compareDocumentPosition(document.querySelector(".public-page")!) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ))).toBe(true);
     expect(await field.evaluate((element) => getComputedStyle(element).pointerEvents)).toBe(
       "none",
     );
+    await page.getByLabel("Email", { exact: true }).click();
+    await expect(page.getByLabel("Email", { exact: true })).toBeFocused();
 
-    await page.evaluate(() => {
-      document.documentElement.dataset.theme = "light";
-      document.documentElement.style.colorScheme = "light";
-    });
+    // Public pages intentionally retain their approved dark brand even when
+    // the OS is light; changing system preference must not stop the field.
+    await page.emulateMedia({ colorScheme: "light", reducedMotion: "no-preference" });
+    await expect(page.locator("html")).toHaveAttribute("data-public-theme");
     await expect(field).toBeVisible();
-    expect(await field.evaluate((element) => getComputedStyle(element).mixBlendMode)).toBe(
-      "multiply",
-    );
-    const lightGlyphColor = await glyphs.first().evaluate(
-      (element) => getComputedStyle(element).color,
-    );
-    expect(lightGlyphColor).toMatch(/rgba?\(2, 132, 199(?:, 0\.55)?\)/);
-    const centerMask = await field.evaluate((element) => {
-      const style = getComputedStyle(element);
-      return style.maskImage || style.webkitMaskImage;
-    });
-    expect(centerMask).toMatch(/transparent|rgba\(0, 0, 0, 0\)/);
     const lightMotion = await sample();
     await expect
-      .poll(async () => JSON.stringify(await sample()), { timeout: 5_000 })
-      .not.toBe(JSON.stringify(lightMotion));
+      .poll(async () => (await sample()).equals(lightMotion), { timeout: 5_000 })
+      .toBe(false);
 
     await page.emulateMedia({ colorScheme: "dark", reducedMotion: "reduce" });
-    await page.reload();
-    await expect(field).toBeVisible();
-    await expect
-      .poll(
-        async () =>
-          (await sample()).every((value) => value === "none|0.35"),
-        { timeout: 5_000 },
-      )
-      .toBe(true);
-    const stillStart = await sample();
+    await expect(canvas).toHaveCount(0);
+    const still = page.locator(".public-auth-still");
+    await expect(still).toBeVisible();
+    // A focused input caret is unrelated motion over the still artwork.
+    await page.getByRole("heading", { name: "Sign in", exact: true }).click();
+    const stillStart = await still.screenshot({ caret: "hide" });
     await page.waitForTimeout(400);
-    expect(await sample()).toEqual(stillStart);
+    expect((await still.screenshot({ caret: "hide" })).equals(stillStart), "reduced-motion artwork remains still").toBe(true);
+    await page.reload();
+    await expect(page.getByRole("heading", { name: "Sign in", exact: true })).toBeVisible();
+    await expect(canvas).toHaveCount(0);
+    await expect(still).toBeVisible();
   });
 
   test("phone auth and recovery controls keep a 44px interaction floor", async ({
diff --git a/e2e/specs/public-theme.spec.ts b/e2e/specs/public-theme.spec.ts
new file mode 100644
index 00000000..96900478
--- /dev/null
+++ b/e2e/specs/public-theme.spec.ts
@@ -0,0 +1,796 @@
+import { expect, test } from "@playwright/test";
+
+test("public mobile typography is independent of the document entry shell", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  for (const path of ["/", "/privacy", "/why-not-chatgpt"]) {
+    const title = path === "/" ? "AI that builds you, not the code"
+      : path === "/privacy" ? "Privacy, in plain language." : "Why not just use ChatGPT?";
+    const heading = page.getByRole("heading", { level: 1, name: title, exact: true });
+    const typography = async () => {
+      await expect(heading).toBeVisible();
+      await page.evaluate(() => document.fonts.ready);
+      return page.locator("h1, h2.font-display").evaluateAll(elements => elements.map(element => {
+        const style = getComputedStyle(element);
+        return { text: element.textContent, font: style.fontFamily, weight: style.fontWeight,
+          width: element.getBoundingClientRect().width, height: element.getBoundingClientRect().height };
+      }));
+    };
+    await page.goto(path);
+    const baseline = await typography();
+    // A fresh auth document selects FullApp, not the acquisition entry shell.
+    await page.goto("/login");
+    await expect(page.getByRole("heading", { name: "Sign in", exact: true })).toBeVisible();
+    if (path === "/") await page.getByRole("link", { name: "CodeTutor AI home" }).click();
+    else if (path === "/privacy") await page.getByRole("link", { name: "Privacy", exact: true }).click();
+    else {
+      await page.getByRole("link", { name: "CodeTutor AI home" }).click();
+      await page.getByRole("link", { name: "Why not ChatGPT?", exact: true }).click();
+    }
+    await expect(page).toHaveURL(new RegExp(`${path === "/" ? "/" : path}$`));
+    expect(await typography()).toEqual(baseline);
+    await page.reload();
+    expect(await typography()).toEqual(baseline);
+    await page.getByRole("link", { name: path === "/" ? "Privacy" : "CodeTutor AI home", exact: true }).click();
+    await page.goBack();
+    expect(await typography()).toEqual(baseline);
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(390);
+  }
+  await page.goto("/try/lesson/python-fundamentals/hello-world");
+  await expect(page.locator(".public-surface")).toHaveCount(0);
+});
+
+test("public auth supporting copy uses one readable role", async ({ page }) => {
+  await page.setViewportSize({ width: 320, height: 844 });
+  for (const route of ["/login", "/signup"]) {
+    await page.goto(route);
+    const divider = page.getByText(/or sign (?:in|up) with email/);
+    await expect(divider).toBeVisible();
+    await expect(divider).toHaveCSS("font-size", "14px");
+  }
+  // Controlled transport response: exercise the real form's recovery state
+  // without sending mail or changing an account.
+  await page.route("**/auth/v1/recover*", route => route.fulfill({ json: {} }));
+  await page.goto("/reset-password");
+  await page.getByLabel("Email", { exact: true }).fill("typography-review@example.com");
+  await page.getByRole("button", { name: "Send reset link" }).click();
+  const detail = page.getByText("The link expires in an hour.", { exact: true });
+  await expect(detail).toBeVisible();
+  await expect(detail).toHaveCSS("font-size", "14px");
+  await expect(detail).toHaveCSS("line-height", "21px");
+  expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(320);
+});
+
+test("public share comments retain readable contrast in normal and reduced motion", async ({ page }) => {
+  const comment = "# Read the result before changing the code.";
+  await page.route("**/api/shares/aaaaaaaaaaaa", route => route.fulfill({ json: {
+    shareToken: "aaaaaaaaaaaa", courseId: "python-fundamentals", lessonId: "hello-world",
+    lessonTitle: "Hello, World!", lessonOrder: 1, courseTitle: "Python Fundamentals",
+    courseTotalLessons: 12, mastery: "strong", timeSpentMs: 60000, attemptCount: 1,
+    codeSnippet: `print("Hello!")\n${comment}`, displayName: null, ogImageUrl: null,
+    ogStoryImageUrl: null, viewCount: 1, createdAt: "2026-09-01T00:00:00Z",
+  } }));
+  for (const width of [390, 1440]) {
+    await page.setViewportSize({ width, height: 900 });
+    for (const reducedMotion of ["no-preference", "reduce"] as const) {
+      await page.emulateMedia({ reducedMotion });
+      await page.goto("/s/aaaaaaaaaaaa");
+      const text = page.getByText(comment, { exact: true });
+      await expect(text).toBeVisible();
+      const contrast = await text.evaluate(element => {
+        let ancestor: Element | null = element;
+        let background = "rgba(0, 0, 0, 0)";
+        while (ancestor && background === "rgba(0, 0, 0, 0)") {
+          background = getComputedStyle(ancestor).backgroundColor;
+          ancestor = ancestor.parentElement;
+        }
+        const lum = (color: string) => {
+          const channels = color.match(/[\d.]+/g)!.slice(0, 3).map(Number).map(value => {
+            const c = value / 255;
+            return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+          });
+          return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
+        };
+        const a = lum(getComputedStyle(element).color), b = lum(background);
+        return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+      });
+      expect(contrast).toBeGreaterThanOrEqual(4.5);
+    }
+  }
+});
+
+test("support action keeps readable contrast and stable geometry through pointer and keyboard states", async ({ page }) => {
+  await page.goto("/support");
+  const action = page.getByRole("link", { name: /^Email / });
+  await expect(action).toBeVisible();
+  await expect(action).toHaveAttribute("href", /^mailto:.*\?subject=CodeTutor%20support$/);
+  const contrast = () => action.evaluate(element => {
+    const style = getComputedStyle(element);
+    const luminance = (color: string) => {
+      const channels = color.match(/[\d.]+/g)!.slice(0, 3).map(Number).map(channel => {
+        const value = channel / 255;
+        return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+      });
+      return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
+    };
+    const foreground = luminance(style.color);
+    const background = luminance(style.backgroundColor);
+    return (Math.max(foreground, background) + 0.05) / (Math.min(foreground, background) + 0.05);
+  });
+  for (const reducedMotion of ["reduce", "no-preference"] as const) {
+    await page.emulateMedia({ reducedMotion });
+    for (const width of [320, 1440]) {
+      await page.setViewportSize({ width, height: 900 });
+      await action.scrollIntoViewIfNeeded();
+      await page.mouse.move(0, 0);
+      await expect.poll(contrast).toBeGreaterThanOrEqual(4.5);
+      const initial = await action.boundingBox();
+      for (let repeat = 0; repeat < 2; repeat++) {
+        await action.hover();
+        // Assert the foreground too: a transition must not briefly satisfy a
+        // contrast poll before the broken final hover color takes effect.
+        await expect(action).toHaveCSS("color", "rgb(5, 7, 9)");
+        await expect.poll(contrast).toBeGreaterThanOrEqual(4.5);
+        expect(await action.boundingBox()).toEqual(initial);
+        await page.mouse.move(0, 0);
+      }
+      await action.focus();
+      await expect(action).toBeFocused();
+      await expect(action).toHaveCSS("outline-style", "solid");
+      await expect(action).toHaveCSS("outline-width", "2px");
+      await expect.poll(contrast).toBeGreaterThanOrEqual(4.5);
+      await page.keyboard.press("Tab");
+      await expect(action).not.toBeFocused();
+      expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
+    }
+  }
+});
+
+test("public token edits reach SPA and static surfaces without recoloring the workspace", async ({ page }) => {
+  for (const route of ["/", "/login", "/privacy", "/learn-to-code/"]) {
+    await page.goto(route);
+    await expect(page.getByRole("heading", { level: 1 }).first()).toBeVisible();
+    await expect(page.locator("#design-system-tokens")).toHaveCount(1);
+    const header = page.locator(".brand-header");
+    await expect(header).toHaveCSS("min-height", "88px");
+    // Verify inheritance through the real consumers, not just string presence.
+    await page.evaluate(() => {
+      document.documentElement.style.setProperty("--brand-header-height", "96px");
+      document.documentElement.style.setProperty("--brand-text", "rgb(220, 230, 240)");
+    });
+    await expect(header).toHaveCSS("min-height", "96px");
+    await expect(header.getByRole("link", { name: "CodeTutor AI home" })).toHaveCSS("color", "rgb(220, 230, 240)");
+    await page.reload();
+    await expect(header).toHaveCSS("min-height", "88px");
+  }
+  await page.goto("/try/lesson/python-fundamentals/hello-world");
+  await expect(page.locator("html")).not.toHaveAttribute("data-public-theme");
+  expect(await page.evaluate(() => getComputedStyle(document.documentElement).getPropertyValue("--color-bg").trim())).not.toBe("5 7 9");
+});
+
+test("walkthrough opens surrounding space but keeps all demo states protected", async ({ page }) => {
+  for (const reducedMotion of ["reduce", "no-preference"] as const) {
+    await page.emulateMedia({ reducedMotion });
+    for (const width of [320, 1440]) {
+      await page.setViewportSize({ width, height: 1000 });
+      await page.goto("/#study-demo");
+      await expect(page.locator("#study-demo-title")).toBeVisible();
+      await expect(page.locator("#study-demo-title")).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
+      await expect(page.locator(".study-demo-surface")).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
+      for (const stage of ["Ask", "Check", "Read", "Ask"]) {
+        const button = page.getByRole("button", { name: new RegExp(stage) });
+        await button.focus();
+        await page.keyboard.press("Enter");
+        await expect(button).toHaveAttribute("aria-pressed", "true");
+        await expect(button).toBeFocused();
+        await expect(page.locator(".study-demo-body")).toHaveCSS("background-color", "rgb(5, 7, 9)");
+        await expect(page.locator(".study-demo-explanation > p")).toHaveCSS("background-color", "rgb(5, 7, 9)");
+        await expect(page.locator(".study-code pre")).toHaveAttribute("aria-label", `Code example, ${stage} stage`);
+        expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
+      }
+    }
+  }
+});
+
+for (const checkpoint of ["during typing", "after reveal"] as const) {
+test(`a live reduced-motion change settles the entire public share ${checkpoint}`, async ({ page }) => {
+  const errors: string[] = [];
+  page.on('pageerror', error => errors.push(error.message));
+  const code = 'print("' + 'learning '.repeat(checkpoint === "during typing" ? 60 : 1) + '")';
+  await page.route('**/api/shares/aaaaaaaaaaaa', route => route.fulfill({ json: {
+    shareToken: 'aaaaaaaaaaaa', courseId: 'python-fundamentals', lessonId: 'hello-world',
+    lessonTitle: 'Hello, World!', lessonOrder: 1, courseTitle: 'Python Fundamentals',
+    courseTotalLessons: 12, mastery: 'strong', timeSpentMs: 60000, attemptCount: 1,
+    codeSnippet: code, displayName: null, ogImageUrl: null, ogStoryImageUrl: null,
+    viewCount: 25, createdAt: '2026-09-01T00:00:00Z',
+  }}));
+  await page.emulateMedia({ reducedMotion: 'no-preference' });
+  await page.goto('/s/aaaaaaaaaaaa');
+  await expect(page.getByRole('heading', { name: 'Hello, World!' })).toBeVisible();
+  if (checkpoint === "during typing") {
+    await expect(page.locator('.public-share-artifact')).not.toContainText(code);
+  } else {
+    await expect(page.getByText(code, { exact: true })).toBeVisible();
+    await expect(page.getByText('25 readers', { exact: true })).toBeVisible();
+  }
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await expect(page.locator('.motion-study-canvas canvas')).toHaveCount(0);
+  await expect(page.getByText(code, { exact: true })).toBeVisible({ timeout: 1500 });
+  await expect(page.getByText('25 readers', { exact: true })).toBeVisible();
+  const cta = page.getByRole('link', { name: /Try this lesson/ });
+  await expect(cta.locator('..')).toHaveCSS('opacity', '1');
+  await expect(cta.locator('..')).toHaveCSS('transform', 'none');
+  await cta.hover();
+  await expect(cta).toHaveCSS('transform', 'none');
+  await cta.focus();
+  await expect(cta).toBeFocused();
+  await page.emulateMedia({ reducedMotion: 'no-preference' });
+  await expect(page.locator('.public-page')).toHaveAttribute('data-motion', 'ready');
+  await expect(page.getByText(code, { exact: true })).toBeVisible();
+  await expect(page.getByText('25 readers', { exact: true })).toBeVisible();
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await expect(page.locator('.motion-study-canvas canvas')).toHaveCount(0);
+  await expect(page.getByText(code, { exact: true })).toBeVisible();
+  await expect(cta).toBeFocused();
+  expect(errors).toEqual([]);
+});
+}
+
+test("public navigation keeps its geometry across page families and auth steps", async ({ page }) => {
+  for (const width of [320, 390, 768, 1440]) {
+    await page.setViewportSize({ width, height: 900 });
+    let baseline: { height: number; logoX: number; logoY: number } | undefined;
+    let authHeadingY: number | undefined;
+    for (const route of ["/", "/login", "/signup", "/reset-password", "/privacy", "/terms", "/support", "/why-not-chatgpt", "/learn-to-code/"]) {
+      await page.goto(route);
+      // The shared loading shell has its own accessible heading. Measure only
+      // after the actual destination replaces it, not during that handoff.
+      await expect(page.getByRole("heading", { level: 1 }).filter({ hasNotText: "Loading page" }).first()).toBeVisible();
+      await page.evaluate(() => document.fonts.ready);
+      const header = page.locator(".study-nav, .public-header, .site-nav");
+      const box = (await header.boundingBox())!;
+      const logo = (await header.getByRole("link", { name: "CodeTutor AI home" }).boundingBox())!;
+      const geometry = { height: box.height, logoX: logo.x, logoY: logo.y + logo.height / 2 };
+      baseline ??= geometry;
+      for (const key of ["height", "logoX", "logoY"] as const) {
+        expect(Math.abs(geometry[key] - baseline[key]), `${route} ${width}px ${key}`).toBeLessThan(1);
+      }
+      expect(await page.evaluate(() => document.documentElement.scrollWidth), route).toBeLessThanOrEqual(width);
+      if (["/login", "/signup", "/reset-password"].includes(route)) {
+        const heading = (await page.getByRole("heading", { level: 1 }).boundingBox())!;
+        authHeadingY ??= heading.y;
+        expect(Math.abs(heading.y - authHeadingY), `${route} auth heading jumps`).toBeLessThan(1);
+      }
+    }
+  }
+});
+
+test("one public field survives the homepage and auth journey without keeping form state", async ({page}) => {
+  await page.emulateMedia({reducedMotion: "no-preference"});
+  await page.goto("/");
+  await expect(page.locator(".study-ready")).toBeVisible();
+  const original = await page.locator(".motion-study-canvas canvas").elementHandle();
+  expect(original).not.toBeNull();
+  const sameField = async () => {
+    await expect(page.locator(".motion-study-canvas canvas")).toHaveCount(1);
+    expect(await original!.evaluate(node => node.isConnected && node === document.querySelector(".motion-study-canvas canvas"))).toBe(true);
+  };
+  await page.getByRole("navigation", {name: "Main navigation"}).getByRole("link", {name: "Sign in"}).click();
+  await expect(page.getByRole("heading", {name: "Sign in", exact:true})).toBeVisible();
+  await sameField();
+  await page.getByLabel("Email", {exact:true}).fill("invalid");
+  await page.getByRole("link", {name:"Create one"}).click();
+  await expect(page).toHaveURL(/\/signup/);
+  await expect(page.getByLabel("Email", {exact:true})).toHaveValue("");
+  await sameField();
+  await page.getByRole("link", {name:"Sign in", exact:true}).click();
+  await page.getByRole("link", {name:"Forgot password?"}).click();
+  await expect(page.getByRole("heading", {name:"Reset your password"})).toBeVisible();
+  await sameField();
+  await page.getByRole("link", {name:"CodeTutor AI home"}).click();
+  await expect(page.locator(".study-ready")).toBeVisible();
+  await sameField();
+  await page.getByRole("link", {name:"Try your first lesson"}).first().click();
+  await expect(page).toHaveURL(/\/try\/lesson\//);
+  await expect(page.locator(".motion-study-canvas")).toHaveCount(0);
+});
+
+test("reading routes retain the field and protect text without an opaque page slab", async ({ page }, testInfo) => {
+  await page.emulateMedia({ reducedMotion: "no-preference" });
+  await page.goto("/login");
+  await expect(page.getByRole('heading', { name: 'Sign in', exact: true })).toBeVisible();
+  await expect(page.locator('.public-page')).toHaveAttribute('data-motion', 'ready');
+  const original = await page.locator('.motion-study-canvas canvas').elementHandle();
+  for (const name of ['Privacy', 'Terms', 'Support']) {
+    await page.getByRole('navigation', { name: 'Trust and support' }).getByRole('link', { name, exact: true }).click();
+    await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
+    expect(await original!.evaluate(node => node === document.querySelector('.motion-study-canvas canvas'))).toBe(true);
+    await expect(page.locator('.public-reading-body')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+    await expect(page.locator('.public-reading-body section p').first()).toHaveCSS('background-color', 'rgb(5, 7, 9)');
+    await expect(page.locator('.public-content')).toBeFocused();
+  }
+  for (const width of [1440, 390]) {
+    await page.setViewportSize({ width, height: 900 });
+    await page.getByRole('navigation', { name: 'Trust and support' }).getByRole('link', { name: 'Privacy', exact: true }).click();
+    await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
+    await page.evaluate(() => document.fonts.ready);
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
+    await page.screenshot({ path: testInfo.outputPath(`reading-${width}.png`) });
+  }
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await expect(page.locator('.motion-study-canvas canvas')).toHaveCount(0);
+  await expect(page.locator('.public-flow-still')).toBeVisible();
+  await page.getByRole('heading', { name: 'How code and AI requests are used' }).scrollIntoViewIfNeeded();
+  await page.emulateMedia({ reducedMotion: 'no-preference' });
+  await expect(page.locator('.public-page')).toHaveAttribute('data-motion', 'ready');
+  await expect(page.getByRole('heading', { name: 'How code and AI requests are used' })).toBeInViewport();
+  await page.goto('/learn-to-code/');
+  await expect(page.locator('body')).toHaveAttribute('data-motion', 'ready');
+  await expect(page.locator('.motion-study-canvas canvas')).toHaveCount(1);
+  for (const width of [390, 1440]) {
+    await page.setViewportSize({ width, height: 900 });
+    for (const id of ['method-title', 'courses-title']) {
+      const heading = page.locator(`#${id}`);
+      await expect(heading).toHaveCSS('background-color', 'rgb(5, 7, 9)');
+      await expect(heading.locator('..')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+      if (width === 1440) {
+        expect((await heading.boundingBox())!.width).toBeLessThan((await heading.locator('..').boundingBox())!.width);
+      }
+    }
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
+  }
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await expect(page.locator('.public-flow-still')).toBeVisible();
+  await expect(page.locator('.motion-study-canvas canvas')).toHaveCount(0);
+});
+
+test("cold public loading retains the header without adding it to workspace loading", async ({ page }) => {
+  let releasePublic!: () => void;
+  let releaseWorkspace!: () => void;
+  const heldPublic = new Promise<void>(resolve => { releasePublic = resolve; });
+  const heldWorkspace = new Promise<void>(resolve => { releaseWorkspace = resolve; });
+  await page.route(/\/(?:src\/pages\/LoginPage\.tsx|assets\/LoginPage-[^/]+\.js)(?:\?|$)/, async route => {
+    await heldPublic;
+    await route.continue();
+  });
+  await page.route(/\/(?:src\/App\.tsx|assets\/App-[^/]+\.js)(?:\?|$)/, async route => {
+    await heldWorkspace;
+    await route.continue();
+  });
+  try {
+    await page.setViewportSize({ width: 320, height: 844 });
+    await page.goto("/login", { waitUntil: "domcontentloaded" });
+    await expect(page.locator(".public-route-loading")).toBeVisible();
+    await expect(page.getByRole("status")).toContainText("Loading");
+    const header = page.locator(".brand-header");
+    const initial = await header.boundingBox();
+    await expect(page.getByRole("link", { name: "Back to CodeTutor" })).toBeVisible();
+    await expect(page.locator("html")).toHaveAttribute("data-public-theme", "");
+    await page.goto("/editor", { waitUntil: "domcontentloaded" });
+    await expect(page.locator(".route-loading")).toBeVisible();
+    await expect(page.locator(".brand-header")).toHaveCount(0);
+    await expect(page.locator("html")).not.toHaveAttribute("data-public-theme");
+    await page.goto("/login", { waitUntil: "domcontentloaded" });
+    await expect(page.locator(".public-route-loading")).toBeVisible();
+    await page.getByRole("link", { name: "Back to CodeTutor" }).focus();
+    releasePublic();
+    await expect(page.getByRole("heading", { name: "Sign in", exact: true })).toBeVisible();
+    await expect(page.getByRole("link", { name: "Back to CodeTutor" })).toBeFocused();
+    expect(await header.boundingBox()).toEqual(initial);
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(320);
+  } finally {
+    releasePublic();
+    releaseWorkspace();
+    await page.unrouteAll({ behavior: "wait" });
+  }
+});
+
+test("direct auth entry does not wait for the authenticated application bundle", async ({ page }) => {
+  let fullAppRequests = 0;
+  await page.route(/\/(?:src\/App\.tsx|assets\/App-[^/]+\.js)(?:\?|$)/, route => {
+    fullAppRequests += 1;
+    return route.abort();
+  });
+
+  await page.goto("/login");
+  await expect(page.getByRole("heading", { name: "Sign in", exact: true })).toBeVisible();
+  await expect(page.locator("html")).toHaveAttribute("data-public-theme", "");
+  expect(fullAppRequests).toBe(0);
+});
+
+test("nested auth loading can be left through its header and completed without stale navigation", async ({ page }) => {
+  let release!: () => void;
+  const held = new Promise<void>(resolve => { release = resolve; });
+  await page.route(/\/(?:src\/pages\/LoginPage\.tsx|assets\/LoginPage-[^/]+\.js)(?:\?|$)/, async route => {
+    await held;
+    await route.continue();
+  });
+  try {
+    await page.goto("/login", { waitUntil: "domcontentloaded" });
+    await expect(page.locator(".public-route-loading")).toBeVisible();
+    const header = page.locator(".brand-header");
+    const initial = await header.boundingBox();
+    await page.getByRole("link", { name: "Back to CodeTutor" }).click();
+    await expect(page.locator(".study-ready")).toBeVisible();
+    release();
+    await page.getByRole("navigation", { name: "Main navigation" }).getByRole("link", { name: "Sign in" }).click();
+    await expect(page.getByRole("heading", { name: "Sign in", exact: true })).toBeVisible();
+    expect(await header.boundingBox()).toEqual(initial);
+  } finally {
+    release();
+    await page.unrouteAll({ behavior: "wait" });
+  }
+});
+
+test("a canceled slow auth load keeps public navigation and cannot replace the restored homepage field", async ({page}) => {
+  let release!: () => void;
+  let intercepted = false;
+  const held = new Promise<void>(resolve => { release = resolve; });
+  await page.route(/\/(?:src\/pages\/LoginPage\.tsx|assets\/LoginPage-[^/]+\.js)(?:\?|$)/, async route => {
+    intercepted = true;
+    await held;
+    await route.continue();
+  });
+  try {
+    await page.emulateMedia({reducedMotion:"no-preference"});
+    await page.goto("/");
+    await expect(page.locator(".study-ready")).toBeVisible();
+    const original = await page.locator(".motion-study-canvas canvas").elementHandle();
+    await page.getByRole("navigation", {name:"Main navigation"}).getByRole("link", {name:"Sign in"}).click();
+    // React may retain the outgoing page during a transition instead of showing
+    // Suspense's fallback. Assert the held request, not that presentation choice.
+    await expect.poll(() => intercepted).toBe(true);
+    await expect(page).toHaveURL(/\/login$/);
+    await expect(page.locator(".public-auth")).toHaveCount(0);
+    await expect(page.locator(".brand-header:visible")).toHaveCount(1);
+    await expect(page.getByRole("link", { name: "CodeTutor AI home" })).toBeVisible();
+    expect(await original!.evaluate(node => node.isConnected)).toBe(true);
+    await page.goBack();
+    release();
+    await expect(page.locator(".study-ready")).toBeVisible();
+    await expect(page.locator(".public-auth")).toHaveCount(0);
+    expect(await original!.evaluate(node => node === document.querySelector(".motion-study-canvas canvas"))).toBe(true);
+    await page.getByRole("navigation", {name:"Main navigation"}).getByRole("link", {name:"Sign in"}).click();
+    await expect(page.getByRole("heading", {name:"Sign in",exact:true})).toBeVisible();
+    expect(await original!.evaluate(node => node === document.querySelector(".motion-study-canvas canvas"))).toBe(true);
+  } finally {
+    release();
+    await page.unrouteAll({behavior:"wait"});
+  }
+});
+
+test("malformed public shares are unavailable links, not retryable connection failures", async ({ page }) => {
+  let lookups = 0;
+  page.on("request", request => { if (request.url().includes("/api/shares/")) lookups += 1; });
+  for (const token of ["not-a-real-share", "short", "012345678901", "mine"]) {
+    await page.goto(`/s/${token}`);
+    const heading = page.getByRole("heading", { name: "Share not found", exact: true });
+    await expect(heading).toBeVisible();
+    await expect(heading).toBeFocused();
+    await expect(page.getByRole("button", { name: "Try again" })).toHaveCount(0);
+  }
+  expect(lookups).toBe(0);
+  await page.route("**/api/shares/aaaaaaaaaaaa", route => route.fulfill({ status: 503, json: { error: "unavailable" } }));
+  await page.goto("/s/aaaaaaaaaaaa");
+  await expect(page.getByRole("button", { name: "Try again" })).toBeVisible();
+});
+
+test("missing discovery documents remain themed real 404s without JavaScript", async ({ browser }) => {
+  const context = await browser.newContext({ javaScriptEnabled: false, viewport: { width: 320, height: 800 } });
+  try {
+    const page = await context.newPage();
+    for (const path of ["/learn-to-code/missing-course/", "/lessons/python-fundamentals/missing-lesson/", "/lessons/malformed/path/extra/"]) {
+      const response = await page.goto(path);
+      expect(response?.status()).toBe(404);
+      await expect(page.getByRole("heading", { level: 1 })).toHaveText("This page isn't here.");
+      await expect(page.locator("body")).toHaveCSS("background-color", "rgb(5, 7, 9)");
+      await expect(page.locator('meta[name="robots"]')).toHaveAttribute("content", "noindex,follow");
+      expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(320);
+    }
+    await page.getByRole("link", { name: "Browse public lessons" }).click();
+    await expect(page).toHaveURL(/\/learn-to-code\/$/);
+    await expect(page.getByRole("heading", { level: 1 })).toContainText("Built to teach");
+  } finally { await context.close(); }
+});
+
+test("static discovery is readable without JavaScript and motion stays optional", async ({ browser, page }) => {
+  const staticContext = await browser.newContext({ javaScriptEnabled: false, viewport: { width: 390, height: 844 } });
+  try {
+    const staticPage = await staticContext.newPage();
+    await staticPage.goto("/lessons/python-intermediate/file-io/");
+    await expect(staticPage.getByRole("heading", { level: 1 })).toContainText("File");
+    await expect(staticPage.locator("article table")).toBeVisible();
+    await expect(staticPage.locator("body")).toHaveCSS("background-color", "rgb(5, 7, 9)");
+    await expect(staticPage.locator("canvas")).toHaveCount(0);
+  } finally { await staticContext.close(); }
+  const errors: string[] = [];
+  page.on("pageerror", error => errors.push(error.message));
+  await page.goto("/learn-to-code/");
+  await expect(page.locator("body")).toHaveAttribute("data-motion", "ready");
+  await expect(page.locator("canvas")).toHaveCount(1);
+  for (const width of [1440, 390, 320]) {
+    await page.setViewportSize({ width, height: 900 });
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
+  }
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await expect(page.locator("canvas")).toHaveCount(0);
+  await page.emulateMedia({ reducedMotion: "no-preference" });
+  await expect(page.locator("body")).toHaveAttribute("data-motion", "ready");
+  await expect(page.locator("canvas")).toHaveCount(1);
+  await expect(page.locator("#root")).toHaveCount(0);
+  expect(errors).toEqual([]);
+});
+
+test("a cold homepage fragment waits for content without replaying on later interaction", async ({ page, browserName }) => {
+  let release!: () => void;
+  const held = new Promise<void>(resolve => { release = resolve; });
+  await page.route("**/MarketingHomepage.tsx*", async route => { await held; await route.continue(); });
+  try {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto("/#study-demo", { waitUntil: "domcontentloaded" });
+    await expect(page.getByRole("heading", { name: "Loading page", exact: true })).toBeAttached();
+  } finally { release(); }
+  await expect(page.locator("#study-demo-title")).toBeVisible();
+  const anchorError = () => page.locator("#study-demo").evaluate(el =>
+    Math.abs(el.getBoundingClientRect().top - parseFloat(getComputedStyle(el).scrollMarginTop)),
+  );
+  await expect.poll(anchorError).toBeLessThan(2);
+  const nextControl = browserName === "webkit" && process.platform === "darwin" ? "Alt+Tab" : "Tab";
+  await page.keyboard.press(nextControl);
+  await expect(page.getByRole("button", { name: "01 Read", exact: true })).toBeFocused();
+  await page.keyboard.press(nextControl);
+  await expect(page.getByRole("button", { name: "02 Ask", exact: true })).toBeFocused();
+  await page.keyboard.press("Space");
+  const offset = await page.evaluate(() => scrollY);
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await expect(page.getByRole("button", { name: "02 Ask", exact: true })).toBeFocused();
+  await expect(page.getByRole("button", { name: "02 Ask", exact: true })).toHaveAttribute("aria-pressed", "true");
+  expect(await page.evaluate(() => scrollY)).toBe(offset);
+  await page.setViewportSize({ width: 1440, height: 1000 });
+  await page.reload();
+  await expect.poll(anchorError).toBeLessThan(2);
+  await page.goto("/support");
+  await page.goto("/#%E0%A4%A");
+  await expect(page.locator("#study-title")).toBeVisible();
+  expect(await page.evaluate(() => scrollY)).toBe(0);
+});
+
+test("a pending homepage fragment yields to visitor intent and later history", async ({ page, browserName }) => {
+  let release!: () => void;
+  const held = new Promise<void>(resolve => { release = resolve; });
+  await page.route("**/MarketingHomepage.tsx*", async route => { await held; await route.continue(); });
+  try {
+    await page.goto("/#study-demo", { waitUntil: "domcontentloaded" });
+    await expect(page.getByRole("heading", { name: "Loading page", exact: true })).toBeAttached();
+    await page.keyboard.press(browserName === "webkit" && process.platform === "darwin" ? "Alt+Tab" : "Tab");
+  } finally { release(); }
+  await expect(page.locator("#study-title")).toBeVisible();
+  await page.evaluate(() => document.fonts.ready);
+  expect(await page.evaluate(() => scrollY)).toBe(0);
+  await expect(page.getByRole("link", { name: "Skip to the product walkthrough", exact: true })).toBeFocused();
+  await page.getByRole("link", { name: "See how learning happens", exact: true }).click();
+  await expect.poll(() => page.locator("#study-demo").evaluate(el =>
+    Math.abs(el.getBoundingClientRect().top - parseFloat(getComputedStyle(el).scrollMarginTop)),
+  )).toBeLessThan(2);
+  // Observe only programmatic replay; native Back may restore the fragment
+  // rather than the footer's offset, and remains owned by the browser.
+  await page.evaluate(() => {
+    const original = Element.prototype.scrollIntoView;
+    Element.prototype.scrollIntoView = function (...args) {
+      this.setAttribute("data-test-programmatic-scroll", "true");
+      return original.apply(this, args);
+    };
+  });
+  await page.getByRole("navigation", { name: "Footer", exact: true }).getByRole("link", { name: "Sign in", exact: true }).click();
+  await expect(page).toHaveURL(/\/login$/);
+  await page.goBack();
+  await expect(page.locator("#study-title")).toBeAttached();
+  await expect(page.locator("#study-demo")).not.toHaveAttribute("data-test-programmatic-scroll");
+});
+
+for (const destination of ["main", "home"] as const) {
+  test(`homepage loading hands ${destination} focus to its final equivalent`, async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 600 });
+    let release!: () => void;
+    const held = new Promise<void>(resolve => { release = resolve; });
+    await page.route("**/MarketingHomepage.tsx*", async route => { await held; await route.continue(); });
+    try {
+      await page.goto("/#study-demo", { waitUntil: "domcontentloaded" });
+      await expect(page.getByRole("heading", { name: "Loading page", exact: true })).toBeAttached();
+      if (destination === "main") {
+        await page.getByRole("link", { name: "Skip to content", exact: true }).focus();
+        await page.keyboard.press("Enter");
+        await expect(page.locator("#public-content")).toBeFocused();
+      } else {
+        await page.keyboard.press("Tab"); // Cancel the pending automatic fragment.
+        await page.getByRole("link", { name: "Back to CodeTutor", exact: true }).focus();
+      }
+    } finally { release(); }
+    const target = destination === "main"
+      ? page.locator("#study-title")
+      : page.getByRole("link", { name: "CodeTutor AI home", exact: true });
+    await expect(target).toBeFocused();
+    if (destination === "main") {
+      await expect(target).toBeInViewport();
+    } else {
+      expect(await page.evaluate(() => scrollY)).toBe(0);
+    }
+  });
+}
+
+test("long discovery code stays within narrow reading widths without empty concept panels", async ({ page }) => {
+  await page.goto("/lessons/python-intermediate/capstone-mini-orm/");
+  await expect(page.getByRole("heading", { level: 1 })).toContainText("Mini In-Memory ORM");
+  await page.evaluate(() => document.fonts.ready);
+  for (const width of [320, 390, 1440]) {
+    await page.setViewportSize({ width, height: 844 });
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
+    await expect(page.locator("article code").filter({ hasText: 'User.objects.filter(role="admin")' })).toContainText('.order_by("-age").first()');
+    expect(await page.locator(".hero .chip").evaluateAll(chips => chips.every(chip =>
+      chip.getBoundingClientRect().width <= chip.parentElement!.getBoundingClientRect().width + 1,
+    ))).toBe(true);
+  }
+  await expect(page.locator(".side .note").filter({ hasText: "Concepts in this lesson" })).toHaveCount(0);
+  await expect(page.locator(".side").getByRole("link", { name: "Start with lesson 1 — required first →" })).toBeVisible();
+});
+
+test("comparison keeps readable columns, navigation and the anonymous trial", async ({
+  page,
+}) => {
+  await page.goto("/why-not-chatgpt");
+  for (const width of [1440, 390, 320]) {
+    await page.setViewportSize({ width, height: 900 });
+    await expect(page.locator(".public-comparison-row")).toHaveCount(4);
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth),
+    ).toBeLessThanOrEqual(width);
+    const columns = page
+      .locator(".public-comparison-pair")
+      .first()
+      .locator(":scope > div");
+    const first = (await columns.nth(0).boundingBox())!;
+    const second = (await columns.nth(1).boundingBox())!;
+    if (width > 760) expect(second.x).toBeGreaterThan(first.x + first.width);
+    else expect(second.y).toBeGreaterThanOrEqual(first.y + first.height);
+  }
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await expect(page.locator("canvas")).toHaveCount(0);
+  await expect(
+    page.getByRole("heading", { name: "When ChatGPT is the better tool" }),
+  ).toBeAttached();
+  await expect(
+    page
+      .getByRole("navigation", { name: "Product links" })
+      .getByRole("link", { name: "Lessons", exact: true }),
+  ).toHaveAttribute("href", "/learn-to-code/");
+  await page
+    .getByRole("link", {
+      name: "Judge for yourself — try lesson 1, no signup →",
+    })
+    .click();
+  await expect(page).toHaveURL(
+    /\/try\/lesson\/python-fundamentals\/hello-world$/,
+  );
+  await expect(page.locator(".public-page")).toHaveCount(0);
+  await expect(page.locator("html")).not.toHaveAttribute("data-public-theme");
+});
+
+test("trust route aliases keep their content and malformed anchors cannot crash it", async ({
+  page,
+}) => {
+  const errors: string[] = [];
+  const fullAppRequests: string[] = [];
+  page.on("pageerror", (error) => errors.push(error.message));
+  page.on("request", (request) => {
+    if (new URL(request.url()).pathname === "/src/App.tsx") {
+      fullAppRequests.push(request.url());
+    }
+  });
+  for (const path of [
+    "/privacy/",
+    "/Privacy",
+    "/%70rivacy",
+    "/privacy#%E0%A4%A",
+  ]) {
+    await page.goto(path);
+    await expect(
+      page.getByRole("heading", { name: "How code and AI requests are used" }),
+    ).toBeAttached();
+    await expect(page.locator("html")).toHaveAttribute("data-public-theme", "");
+    await expect(page).toHaveTitle(/Privacy/);
+  }
+  expect(errors).toEqual([]);
+  expect(fullAppRequests).toEqual([]);
+});
+
+for (const [path, heading] of [
+  ["/login", "Sign in"],
+  ["/this-route-does-not-exist", "This page isn't here."],
+] as const) {
+  test(`public document ${path} paints correctly before the application can load`, async ({
+    page,
+  }) => {
+    const appScript = /\/(?:src\/main\.tsx|assets\/index-[^/]+\.js)(?:\?|$)/;
+    await page.route(appScript, (route) => route.abort());
+    await page.goto(path, { waitUntil: "domcontentloaded" });
+    await expect(page.locator("#root")).toBeEmpty();
+    await expect(page.locator("html")).toHaveAttribute("data-public-theme", "");
+    await expect(page.locator("body")).toHaveCSS(
+      "background-color",
+      "rgb(5, 7, 9)",
+    );
+    await page.unroute(appScript);
+    await page.reload();
+    await expect(
+      page.getByRole("heading", { name: heading, exact: true }),
+    ).toBeVisible();
+    await expect(page.locator("body")).toHaveCSS(
+      "background-color",
+      "rgb(5, 7, 9)",
+    );
+  });
+}
+
+test("auth remains centered and usable through motion and mode changes", async ({
+  page,
+}) => {
+  await page.goto("/login");
+  await expect(
+    page.getByRole("heading", { name: "Sign in", exact: true }),
+  ).toBeVisible();
+  await expect(page.locator(".public-glyph")).toHaveCount(0);
+  await expect(page.locator('.public-auth-still svg')).toHaveCount(1);
+  await expect(page.locator('.public-auth-form')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+  await expect(page.getByRole('button', { name: 'Sign in', exact: true })).toHaveCSS('opacity', '1');
+  for (const width of [1440, 390, 320]) {
+    await page.setViewportSize({ width, height: 900 });
+    const box = await page.locator(".public-auth-form").boundingBox();
+    expect(box).not.toBeNull();
+    expect(Math.abs(box!.x + box!.width / 2 - width / 2)).toBeLessThan(2);
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth),
+    ).toBeLessThanOrEqual(width);
+  }
+  await page.getByLabel("Email", { exact: true }).fill("invalid");
+  await expect(page.getByText("Enter a valid email address.")).toBeVisible();
+  await page.emulateMedia({ reducedMotion: "reduce", colorScheme: "light" });
+  await expect(page.locator(".public-page")).toHaveAttribute(
+    "data-motion",
+    "static",
+  );
+  await expect(page.locator("canvas")).toHaveCount(0);
+  await expect(page.locator('.public-auth-still')).toBeVisible();
+  await expect(page.getByLabel("Email", { exact: true })).toHaveValue(
+    "invalid",
+  );
+  await page
+    .getByRole("button", { name: "Prefer not to use a password?" })
+    .click();
+  await expect(
+    page.getByRole("button", { name: "Send magic link" }),
+  ).toBeDisabled();
+  await page.getByRole("button", { name: "Use a password instead" }).click();
+  await expect(page.getByLabel("Password", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Email", { exact: true })).toHaveValue(
+    "invalid",
+  );
+});
+
+test("public footer navigation starts at the heading and explicit anchors still focus", async ({
+  page,
+}) => {
+  await page.goto("/privacy");
+  await page
+    .getByRole("navigation", { name: "Trust and support" })
+    .getByRole("link", { name: "Support", exact: true })
+    .click();
+  await expect(
+    page.getByRole("heading", { name: "Let's get you unstuck.", exact: true }),
+  ).toBeInViewport();
+  await expect.poll(() => page.evaluate(() => window.scrollY)).toBe(0);
+  await expect(page.getByRole("main")).toBeFocused();
+  await page.goto("/privacy#ai");
+  await expect(page.locator("#ai")).toBeFocused();
+  await expect(
+    page.getByRole("heading", { name: "How code and AI requests are used" }),
+  ).toBeInViewport();
+});
diff --git a/e2e/specs/share-mobile.spec.ts b/e2e/specs/share-mobile.spec.ts
index c391e1dd..5c58a1a3 100644
--- a/e2e/specs/share-mobile.spec.ts
+++ b/e2e/specs/share-mobile.spec.ts
@@ -97,7 +97,7 @@ test.describe("Phase 22E: SharePage at iPhone 13 portrait", () => {
     await page.goto(`/s/${shareToken}`);
 
     // Lesson title — the H1, gradient sweep settles within ~2.5s.
-    const title = page.getByRole("heading", { level: 1 });
+    const title = page.getByRole("heading", { level: 1, name: "Hello, World!", exact: true });
     await expect(title).toBeVisible({ timeout: 10_000 });
 
     // Wait for the typewriter to finish typing — `print(greet("Mehul"))`
@@ -134,7 +134,7 @@ test.describe("Phase 22E: SharePage at iPhone 13 portrait", () => {
     await page.goto(`/s/${shareToken}`);
     // Wait for content to render so visibility checks aren't racing
     // the lazy chrome.
-    await expect(page.getByRole("heading", { level: 1 })).toBeVisible({
+    await expect(page.getByRole("heading", { level: 1, name: "Hello, World!", exact: true })).toBeVisible({
       timeout: 10_000,
     });
 
@@ -170,7 +170,7 @@ test.describe("Phase 22E: SharePage reduced-motion at iPhone 13", () => {
     // dynamic-chunk time are not animation time; once the heading renders,
     // reduced motion must expose the full code in the same settled state
     // rather than starting the typewriter timeline.
-    await expect(page.getByRole("heading", { level: 1 })).toBeVisible({
+    await expect(page.getByRole("heading", { level: 1, name: "Hello, World!", exact: true })).toBeVisible({
       timeout: 10_000,
     });
     await expect(
diff --git a/e2e/specs/share-reveal.spec.ts b/e2e/specs/share-reveal.spec.ts
new file mode 100644
index 00000000..3ca07e10
--- /dev/null
+++ b/e2e/specs/share-reveal.spec.ts
@@ -0,0 +1,87 @@
+import { expect, test } from "@playwright/test";
+
+const longCode = Array.from({ length: 9 }, (_, i) =>
+  `# Step ${i + 1}: ${"Read, predict, run, and compare. ".repeat(4)}`,
+).concat('print("Finished learning")').join("\n");
+
+test("short, empty and truncated shares preserve their content boundaries", async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: "no-preference" });
+  let snippet = 'print("Hi!")';
+  await page.route("**/api/shares/bbbbbbbbbbbb", route => route.fulfill({ json: {
+    shareToken: "bbbbbbbbbbbb", courseId: "python-fundamentals", lessonId: "hello-world",
+    lessonTitle: "Hello, World!", lessonOrder: 1, courseTitle: "Python Fundamentals",
+    courseTotalLessons: 12, mastery: "strong", timeSpentMs: 60000, attemptCount: 1,
+    codeSnippet: snippet, displayName: null, ogImageUrl: null, ogStoryImageUrl: null,
+    viewCount: 1, createdAt: "2026-09-01T00:00:00Z",
+  } }));
+  const code = page.locator(".public-share-artifact .overflow-x-auto > div");
+  for (const source of ['print("Hi!")', "", Array.from({ length: 12 }, (_, i) => `# line ${i + 1}`).join("\n")]) {
+    snippet = source;
+    await page.goto("/s/bbbbbbbbbbbb");
+    await expect(code).toBeVisible();
+    await expect(code.locator(".animate-pulse")).toHaveCount(0, { timeout: 4000 });
+    if (!source) await expect(code).toHaveText("");
+    else if (source.startsWith("print")) await expect(code).toHaveText(source);
+    else {
+      await expect(code).toContainText("# line 10");
+      await expect(code).not.toContainText("# line 11");
+      await expect(code.getByText("…", { exact: true })).toBeVisible();
+      const height = await code.evaluate(element => element.clientHeight);
+      await page.reload();
+      await expect(code.locator(".animate-pulse")).toHaveCount(1);
+      await expect(code.getByText("…", { exact: true })).toBeHidden();
+      expect(await code.evaluate(element => element.clientHeight)).toBe(height);
+      await page.emulateMedia({ reducedMotion: "reduce" });
+      await expect(code.getByText("…", { exact: true })).toBeVisible();
+      expect(await code.evaluate(element => element.clientHeight)).toBe(height);
+    }
+  }
+});
+
+for (const width of [390, 1440]) {
+  test(`long shares reserve their footprint and finish typing within five seconds at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.emulateMedia({ reducedMotion: "no-preference" });
+    await page.route("**/api/shares/aaaaaaaaaaaa", route => route.fulfill({ json: {
+      shareToken: "aaaaaaaaaaaa", courseId: "python-fundamentals", lessonId: "hello-world",
+      lessonTitle: "Hello, World!", lessonOrder: 1, courseTitle: "Python Fundamentals",
+      courseTotalLessons: 12, mastery: "strong", timeSpentMs: 60000, attemptCount: 1,
+      codeSnippet: longCode, displayName: null, ogImageUrl: null, ogStoryImageUrl: null,
+      viewCount: 1, createdAt: "2026-09-01T00:00:00Z",
+    } }));
+    await page.goto("/s/aaaaaaaaaaaa");
+    const code = page.locator(".public-share-artifact .overflow-x-auto > div");
+    await expect(code).toBeVisible();
+    await page.evaluate(() => document.fonts.ready);
+    const cursor = code.locator(".animate-pulse");
+    await expect(cursor).toHaveCount(1);
+    // Layout coordinates ignore the existing celebratory scale transform.
+    const footprint = () => code.evaluate(element => ({
+      height: (element as HTMLElement).offsetHeight,
+      panelHeight: (element.parentElement!.parentElement as HTMLElement).offsetHeight,
+      footerTop: (element.closest(".public-share-artifact")!.querySelector(".border-t") as HTMLElement).offsetTop,
+    }));
+    const initial = await footprint();
+    // Fine-grained observation: the default one-second late polling interval
+    // can miss completion near this deliberately tight five-second deadline.
+    await expect.poll(() => cursor.count(), { timeout: 5500, intervals: [50] }).toBe(0);
+    await expect(code).toContainText('"Finished learning"');
+    expect(await footprint()).toEqual(initial);
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
+    // Replay must start again with the same reserved footprint.
+    await page.reload();
+    await expect(cursor).toHaveCount(1);
+    expect(await footprint()).toEqual(initial);
+    await page.emulateMedia({ reducedMotion: "reduce" });
+    await expect(cursor).toHaveCount(0);
+    await expect(code).toContainText('"Finished learning"');
+    await page.emulateMedia({ reducedMotion: "no-preference" });
+    await expect(cursor).toHaveCount(0);
+    expect(await footprint()).toEqual(initial);
+    const cta = page.getByRole("link", { name: /Try this lesson/ });
+    await cta.focus();
+    await page.keyboard.press("Enter");
+    await expect(page).toHaveURL(/\/try\/lesson\/python-fundamentals\/hello-world/);
+    await expect(page.locator("html")).not.toHaveAttribute("data-public-theme");
+  });
+}
diff --git a/frontend/index.html b/frontend/index.html
index 16e3ef82..b828f733 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,8 +3,61 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="theme-color" content="#0f172a" />
+    <!-- design-system:tokens -->
+    <!-- Critical public canvas: painted before lazy routes/CSS, including when
+         the learner has a saved light workspace preference. Never change that
+         preference. The inline bootstrap also handles SPA route changes and
+         needs no extra network request or independently cached JS file. -->
+    <style>
+      html[data-public-theme],
+      html[data-public-theme] body {
+        background: var(--brand-canvas) !important;
+        color-scheme: dark !important;
+      }
+      html[data-public-theme] .route-loading {
+        background: var(--brand-canvas);
+        color: var(--brand-muted);
+        min-height: 100svh;
+      }
+      html[data-public-theme] .route-loading .skeleton {
+        background: var(--brand-line);
+      }
+    </style>
+    <script id="public-theme-bootstrap">
+      // One classifier for pre-paint, React navigation and browser Back.
+      (function () {
+        var chromeTheme = document.querySelector('meta[name="theme-color"]');
+        var workspaceChrome = chromeTheme && chromeTheme.content;
+        function syncPublicTheme() {
+          var path = window.location.pathname;
+          try {
+            path = decodeURI(path);
+          } catch {
+            // Leave malformed URLs to the router; never fail pre-paint.
+          }
+          path = path.replace(/\/+$/, "") || "/";
+          // Match workspace routes from App.tsx. Everything else is either
+          // a public page or the public 404 recovery page. This affects paint
+          // only: React Router and server guards still own access decisions.
+          var isWorkspace =
+            /^\/(?:start|welcome|editor|learn(?:\/saved|\/course\/[^/]+(?:\/lesson\/[^/]+)?)?|try\/lesson\/[^/]+\/[^/]+|admin(?:\/(?:overview|sessions|users|project|email|audit|anon|eval-quality))?|dev\/content)$/i.test(
+              path,
+            );
+          var isPublic = !isWorkspace;
+          document.documentElement.toggleAttribute(
+            "data-public-theme",
+            isPublic,
+          );
+          if (chromeTheme)
+            chromeTheme.content = isPublic ? "__PUBLIC_CANVAS_COLOR__" : workspaceChrome;
+        }
+        syncPublicTheme();
+        window.addEventListener("codetutor:route-change", syncPublicTheme);
+        window.addEventListener("popstate", syncPublicTheme);
+      })();
+    </script>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>AI that builds you, not the code · CodeTutor AI</title>
     <meta
       name="description"
@@ -21,10 +74,16 @@
       property="og:description"
       content="An AI coding tutor for beginners. Walks you to the answer with hints and questions, never gives it away. Python, JavaScript, and a 9-language editor."
     />
-    <meta property="og:image" content="https://codetutor.msrivas.com/og-image.png?v=4" />
+    <meta
+      property="og:image"
+      content="https://codetutor.msrivas.com/og-image.png?v=4"
+    />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="662" />
-    <meta property="og:image:alt" content="CodeTutor AI: an AI coding tutor that builds you, not the code" />
+    <meta
+      property="og:image:alt"
+      content="CodeTutor AI: an AI coding tutor that builds you, not the code"
+    />
 
     <!-- Twitter Card. Read by Twitter's crawler and used as fallback by a few other unfurlers -->
     <!-- (iMessage, some Slack configs) when OG data is ambiguous. No Twitter account required. -->
@@ -34,8 +93,14 @@
       name="twitter:description"
       content="An AI coding tutor for beginners. Walks you to the answer with hints and questions, never gives it away. Python, JavaScript, and a 9-language editor."
     />
-    <meta name="twitter:image" content="https://codetutor.msrivas.com/og-image.png?v=4" />
-    <meta name="twitter:image:alt" content="CodeTutor AI: an AI coding tutor that builds you, not the code" />
+    <meta
+      name="twitter:image"
+      content="https://codetutor.msrivas.com/og-image.png?v=4"
+    />
+    <meta
+      name="twitter:image:alt"
+      content="CodeTutor AI: an AI coding tutor that builds you, not the code"
+    />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <!-- Brand fonts enhance wider screens but never block first paint.
diff --git a/frontend/scripts/discoverySite.test.ts b/frontend/scripts/discoverySite.test.ts
index 550dd7f5..489fbc34 100644
--- a/frontend/scripts/discoverySite.test.ts
+++ b/frontend/scripts/discoverySite.test.ts
@@ -16,7 +16,7 @@ let output = "";
 
 beforeAll(async () => {
   output = mkdtempSync(path.join(os.tmpdir(), "codetutor-discovery-"));
-  await generateDiscoverySite({ coursesDir: COURSES, outDir: output, renderImages: false });
+  await generateDiscoverySite({ coursesDir: COURSES, outDir: output, renderImages: false, motionScript: "/assets/discovery-motion-test.js" });
 });
 
 afterAll(() => {
@@ -24,6 +24,34 @@ afterAll(() => {
 });
 
 describe("B4 discovery build", () => {
+  it("emits a usable non-indexable static error document and preserves host 404 status", () => {
+    const html = readFileSync(path.join(output, "404.html"), "utf8");
+    expect(html).toContain("This page isn't here.");
+    expect(html).toContain('<meta name="robots" content="noindex,follow">');
+    expect(html).not.toContain('rel="canonical"');
+    expect(html).not.toContain('application/ld+json');
+    expect(html).toContain('href="/learn-to-code/">Browse public lessons');
+    expect(html).toMatch(/href="\/try\/lesson\/python-fundamentals\/hello-world"[^>]*aria-label="Try the first lesson"/);
+    expect(html).toContain('<main id="main" tabindex="-1">');
+    const config = JSON.parse(readFileSync("staticwebapp.config.json", "utf8"));
+    expect(config.responseOverrides["404"]).toEqual({ rewrite: "/404.html", statusCode: 404 });
+    expect(config.navigationFallback.exclude).toContain("/lessons/*");
+    expect(config.navigationFallback.exclude).toContain("/learn-to-code/*");
+  });
+  it("keeps the authored document independent from optional animation", () => {
+    const html = readFileSync(path.join(output, "learn-to-code/index.html"), "utf8");
+    expect(html).toContain('<body class="public-theme">');
+    expect(html).toContain('html,body{background:var(--brand-canvas);color-scheme:dark}');
+    expect(html).toContain('--brand-canvas: #050709');
+    expect(html.indexOf('id="design-system-tokens"')).toBeLessThan(html.indexOf('</head>'));
+    expect(html).toContain('<script type="module" src="/assets/discovery-motion-test.js"></script>');
+    expect(html).not.toContain('/src/main.tsx');
+    expect(html).not.toContain('id="root"');
+    expect(html).toContain('Built to teach,<br>not to autocomplete.');
+    const css = readFileSync(path.join(output, "discovery.css"), "utf8");
+    expect(html).toContain('--study-bg: var(--brand-canvas)');
+    expect(css).toContain('body.public-theme');
+  });
   it("derives the complete public catalog and excludes internal fixtures", () => {
     const catalog = loadDiscoveryCatalog(COURSES);
     expect(catalog.publicCourses.map((course) => course.id)).toEqual([
@@ -59,6 +87,7 @@ describe("B4 discovery build", () => {
             : "Start with lesson 1 — required first",
         );
         expect(html).toContain('<main id="main" tabindex="-1">');
+        expect(html.includes('Concepts in this lesson')).toBe(lesson.teachesConceptTags.length > 0);
         expect(html).toContain("event.preventDefault();history.replaceState(null,'','#main')");
         expect(html).toContain("main.focus({preventScroll:true})");
         expect(html).not.toContain(
diff --git a/frontend/scripts/discoverySite.ts b/frontend/scripts/discoverySite.ts
index 61e35b3b..ccba19f9 100644
--- a/frontend/scripts/discoverySite.ts
+++ b/frontend/scripts/discoverySite.ts
@@ -10,6 +10,7 @@ import {
 import path from "node:path";
 import { renderLessonOgPng } from "./discoveryOg";
 import { FIRST_LESSON_CONTRACT } from "../src/productContract";
+import { designTokenCss, publicCanvasColor } from "../src/design-system/tokens";
 
 export const SITE_ORIGIN = "https://codetutor.msrivas.com";
 export const CATEGORY_PATH = "/learn-to-code/";
@@ -271,6 +272,8 @@ function documentShell(options: {
   ogAlt: string;
   body: string;
   structuredData: unknown[];
+  motionScript?: string;
+  noindex?: boolean;
 }): string {
   const canonical = `${SITE_ORIGIN}${options.canonicalPath}`;
   const og = `${SITE_ORIGIN}${options.ogPath}`;
@@ -279,10 +282,12 @@ function documentShell(options: {
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="theme-color" content="#080d1b">
+  <meta name="theme-color" content="${publicCanvasColor}">
+  <style id="design-system-tokens">${designTokenCss()}</style>
+  <style>html,body{background:var(--brand-canvas);color-scheme:dark}</style>
   <title>${escapeHtml(options.title)}</title>
   <meta name="description" content="${escapeHtml(options.description)}">
-  <link rel="canonical" href="${canonical}">
+  ${options.noindex ? '<meta name="robots" content="noindex,follow">' : `<link rel="canonical" href="${canonical}">
   <meta property="og:type" content="article">
   <meta property="og:site_name" content="CodeTutor AI">
   <meta property="og:url" content="${canonical}">
@@ -296,7 +301,7 @@ function documentShell(options: {
   <meta name="twitter:title" content="${escapeHtml(options.title)}">
   <meta name="twitter:description" content="${escapeHtml(options.description)}">
   <meta name="twitter:image" content="${og}">
-  <meta name="twitter:image:alt" content="${escapeHtml(options.ogAlt)}">
+  <meta name="twitter:image:alt" content="${escapeHtml(options.ogAlt)}">`}
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -304,23 +309,41 @@ function documentShell(options: {
   <link rel="stylesheet" href="/discovery.css">
   ${options.structuredData.map((item) => `<script type="application/ld+json">${jsonLd(item)}</script>`).join("\n  ")}
 </head>
-<body>
-  <a class="skip" href="#main">Skip to lesson</a>
+<body class="public-theme">
+  <div id="discovery-motion" aria-hidden="true"></div>
+  <a class="skip" href="#main">${options.noindex ? 'Skip to content' : 'Skip to lesson'}</a>
   ${options.body.replace('<main id="main">', '<main id="main" tabindex="-1">')}
+  ${options.motionScript ? `<script type="module" src="${escapeHtml(options.motionScript)}"></script>` : ""}
   <script>(function(){var skip=document.querySelector('.skip');var main=document.getElementById('main');if(!skip||!main)return;skip.addEventListener('click',function(event){event.preventDefault();history.replaceState(null,'','#main');main.scrollIntoView({block:'start'});main.focus({preventScroll:true});requestAnimationFrame(function(){main.focus({preventScroll:true})})})})()</script>
 </body>
 </html>\n`;
 }
 
 function header(trial: string): string {
-  return `<header class="shell site-nav"><a class="wordmark" href="/" aria-label="CodeTutor AI home">CodeTutor AI</a><nav class="nav-links" aria-label="Public learning"><a class="quiet-link" href="${CATEGORY_PATH}">Explore lessons</a><a class="primary-link" href="${trial}">Try the first lesson →</a></nav></header>`;
+  return `<header class="brand-header site-nav"><a class="wordmark" href="/" aria-label="CodeTutor AI home">CodeTutor AI</a><nav class="nav-links" aria-label="Public learning"><a class="quiet-link" href="${CATEGORY_PATH}">Explore lessons</a><a class="brand-header-action" href="${trial}" aria-label="Try the first lesson"><span class="brand-header-long">Try the first lesson</span><span class="brand-header-short" aria-hidden="true">Try lesson 1</span><span aria-hidden="true">→</span></a></nav></header>`;
 }
 
 function footer(): string {
   return `<footer class="footer"><div class="shell footer-row"><span>© ${new Date().getUTCFullYear()} Mehul Srivastava · CodeTutor AI</span><span><a href="/why-not-chatgpt">Why not ChatGPT?</a> · <a href="/privacy">Privacy</a> · <a href="/terms">Terms</a> · <a href="/support">Support</a></span></div></footer>`;
 }
 
-export function renderLessonPage(course: DiscoveryCourse, lesson: DiscoveryLesson): string {
+// A real static error document: recovery remains usable without the app or
+// animation bundle. Hosts must retain status 404 rather than redirect to 200.
+export function renderDiscoveryNotFound(motionScript?: string): string {
+  return documentShell({
+    title: "Page not found · CodeTutor AI",
+    description: "This page isn't here. Browse the public lessons or return to CodeTutor AI.",
+    canonicalPath: "/404.html",
+    ogPath: "",
+    ogAlt: "",
+    noindex: true,
+    structuredData: [],
+    motionScript,
+    body: `${header(FIRST_LESSON_CONTRACT.route)}<main id="main"><section class="hero recovery"><div class="shell"><div class="eyebrow">404 · Page not found</div><h1>This page isn't here.</h1><p class="lede">The link may have changed, or the page may no longer be available.</p><div class="hero-actions"><a class="primary-link" href="${CATEGORY_PATH}">Browse public lessons →</a><a class="quiet-link" href="/">Back to CodeTutor AI</a></div></div></section></main>${footer()}`,
+  });
+}
+
+export function renderLessonPage(course: DiscoveryCourse, lesson: DiscoveryLesson, motionScript?: string): string {
   const lessonIndex = course.lessons.findIndex((item) => item.id === lesson.id);
   const previous = course.lessons[lessonIndex - 1];
   const next = course.lessons[lessonIndex + 1];
@@ -345,8 +368,12 @@ export function renderLessonPage(course: DiscoveryCourse, lesson: DiscoveryLesso
     new RegExp(`^#\\s+${lesson.title.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s*(?:\\r?\\n)+`),
     "",
   );
-  const body = `${header(trial)}<main id="main" tabindex="-1"><section class="hero"><div class="shell"><div class="eyebrow"><a href="${course.publicPath}">${escapeHtml(course.title)}</a> / Lesson ${lesson.order}</div><h1>${escapeHtml(lesson.title)}</h1><p class="lede">${escapeHtml(lesson.description)}</p><div class="meta-row"><span>${escapeHtml(lesson.language)}</span><span>·</span><span>~${lesson.estimatedMinutes} minutes</span><span>·</span><span>Lesson ${lesson.order} of ${course.lessons.length}</span></div><div class="chips" style="margin-top:1rem">${lesson.objectives.slice(0, 4).map((objective) => `<span class="chip">${inlineMarkdown(objective)}</span>`).join("")}</div><div class="hero-actions"><a class="primary-link" href="${trial}">${trialLabel}</a><a class="quiet-link" href="${course.publicPath}">See the full course</a></div></div></section><div class="shell content-grid"><article class="prose" aria-label="Lesson walkthrough">${renderMarkdown(authoredBody)}<nav class="pager" aria-label="Adjacent lessons">${pager}</nav></article><aside class="side" aria-label="About this lesson"><section class="note"><div class="note-label">Actual course material</div><h2>Read the field note. Then make it run.</h2><p>This public walkthrough comes from the same structured lesson used inside CodeTutor. Anonymous interactive access starts with lesson 1; this field note remains here when you return.</p><a class="primary-link" href="${trial}">${trialLabel}</a></section><section class="note"><div class="note-label">Concepts in this lesson</div><div class="chips" style="margin-top:.8rem">${lesson.teachesConceptTags.map((tag) => `<span class="chip">${escapeHtml(tag.replaceAll("-", " "))}</span>`).join("")}</div></section></aside></div></main>${footer()}`;
+  const conceptsPanel = lesson.teachesConceptTags.length > 0
+    ? `<section class="note"><div class="note-label">Concepts in this lesson</div><div class="chips" style="margin-top:.8rem">${lesson.teachesConceptTags.map((tag) => `<span class="chip">${escapeHtml(tag.replaceAll("-", " "))}</span>`).join("")}</div></section>`
+    : "";
+  const body = `${header(trial)}<main id="main" tabindex="-1"><section class="hero"><div class="shell"><div class="eyebrow"><a href="${course.publicPath}">${escapeHtml(course.title)}</a> / Lesson ${lesson.order}</div><h1>${escapeHtml(lesson.title)}</h1><p class="lede">${escapeHtml(lesson.description)}</p><div class="meta-row"><span>${escapeHtml(lesson.language)}</span><span>·</span><span>~${lesson.estimatedMinutes} minutes</span><span>·</span><span>Lesson ${lesson.order} of ${course.lessons.length}</span></div><div class="chips" style="margin-top:1rem">${lesson.objectives.slice(0, 4).map((objective) => `<span class="chip">${inlineMarkdown(objective)}</span>`).join("")}</div><div class="hero-actions"><a class="primary-link" href="${trial}">${trialLabel}</a><a class="quiet-link" href="${course.publicPath}">See the full course</a></div></div></section><div class="shell content-grid"><article class="prose" aria-label="Lesson walkthrough">${renderMarkdown(authoredBody)}<nav class="pager" aria-label="Adjacent lessons">${pager}</nav></article><aside class="side" aria-label="About this lesson"><section class="note"><div class="note-label">Actual course material</div><h2>Read the field note. Then make it run.</h2><p>This public walkthrough comes from the same structured lesson used inside CodeTutor. Anonymous interactive access starts with lesson 1; this field note remains here when you return.</p><a class="primary-link" href="${trial}">${trialLabel}</a></section>${conceptsPanel}</aside></div></main>${footer()}`;
   return documentShell({
+    motionScript,
     title,
     description,
     canonicalPath: lesson.publicPath,
@@ -384,11 +411,12 @@ export function renderLessonPage(course: DiscoveryCourse, lesson: DiscoveryLesso
   });
 }
 
-export function renderCoursePage(course: DiscoveryCourse): string {
+export function renderCoursePage(course: DiscoveryCourse, motionScript?: string): string {
   const trial = trialHref("category_page", course.id);
   const title = `${course.title} course — learn by doing | CodeTutor AI`;
   const body = `${header(trial)}<main id="main"><section class="hero"><div class="shell"><div class="eyebrow"><a href="${CATEGORY_PATH}">Learn to code</a> / ${escapeHtml(course.language)}</div><h1>${escapeHtml(course.title)}</h1><p class="lede">${escapeHtml(course.description)}</p><div class="meta-row"><span>${course.lessons.length} lessons</span><span>·</span><span>${course.lessons.reduce((sum, lesson) => sum + lesson.estimatedMinutes, 0)} guided minutes</span><span>·</span><span>Real checks, not completion clicks</span></div><div class="hero-actions"><a class="primary-link" href="${trial}">Try the first lesson →</a><a class="quiet-link" href="${CATEGORY_PATH}">All courses</a></div></div></section><section class="shell lesson-list" aria-label="Course lessons">${course.lessons.map((lesson) => `<a class="lesson-card" href="${lesson.publicPath}"><span class="lesson-number">${String(lesson.order).padStart(2, "0")}</span><span><h2>${escapeHtml(lesson.title)}</h2><p>${escapeHtml(lesson.description)}</p></span><span class="lesson-time">~${lesson.estimatedMinutes} min →</span></a>`).join("")}</section></main>${footer()}`;
   return documentShell({
+    motionScript,
     title,
     description: cleanDescription(course.description),
     canonicalPath: course.publicPath,
@@ -407,12 +435,13 @@ export function renderCoursePage(course: DiscoveryCourse): string {
   });
 }
 
-export function renderCategoryPage(catalog: DiscoveryCatalog): string {
+export function renderCategoryPage(catalog: DiscoveryCatalog, motionScript?: string): string {
   const trial = trialHref("category_page", "learn-to-code");
   const title = "Learn coding with an AI tutor that makes you think | CodeTutor AI";
   const description = "Structured Python and JavaScript lessons with a real editor, runnable checks, and an AI tutor built to teach—not autocomplete.";
   const body = `${header(trial)}<main id="main"><section class="hero"><div class="shell"><div class="eyebrow">A different kind of AI coding course</div><h1>Built to teach,<br>not to autocomplete.</h1><p class="lede">Read a real lesson. Write the code yourself. Run it, inspect what happened, and prove it with checks. The tutor asks and hints without quietly taking the keyboard away from you.</p><div class="hero-actions"><a class="primary-link" href="${trial}">Try the first lesson — about ${FIRST_LESSON_CONTRACT.estimatedMinutes} minutes →</a><a class="quiet-link" href="#courses">Browse ${catalog.publicCourses.reduce((sum, course) => sum + course.lessons.length, 0)} public lessons</a></div></div></section><section class="shell" aria-labelledby="method-title" style="padding-top:4rem"><div class="eyebrow">The CodeTutor loop</div><h2 id="method-title">You do the part that changes you.</h2><div class="course-grid"><article class="course-card"><div class="eyebrow">01 / Read</div><h2>One idea, in context.</h2><p>Every public field note comes directly from the structured course material—not an SEO-only paraphrase.</p></article><article class="course-card"><div class="eyebrow">02 / Make</div><h2>Your code. Your evidence.</h2><p>The interactive lesson gives you an editor and runner. A completion is earned by the authored checks.</p></article><article class="course-card"><div class="eyebrow">03 / Ask</div><h2>Help that leaves work for you.</h2><p>The tutor points to evidence and asks the next useful question. It is designed to build judgment, not output.</p></article></div></section><section id="courses" class="shell" aria-labelledby="courses-title" style="padding-top:2rem"><div class="eyebrow">Public course library</div><h2 id="courses-title">Choose a trail.</h2><div class="course-grid">${catalog.publicCourses.map((course) => `<a class="course-card" href="${course.publicPath}"><div class="eyebrow">${escapeHtml(course.language)} · ${course.lessons.length} lessons</div><h2>${escapeHtml(course.title)}</h2><p>${escapeHtml(course.description)}</p><span class="arrow">Open the course →</span></a>`).join("")}</div></section></main>${footer()}`;
   return documentShell({
+    motionScript,
     title,
     description,
     canonicalPath: CATEGORY_PATH,
@@ -457,17 +486,19 @@ export async function generateDiscoverySite(options: {
   coursesDir: string;
   outDir: string;
   renderImages?: boolean;
+  motionScript?: string;
 }): Promise<DiscoveryCatalog> {
   const catalog = loadDiscoveryCatalog(options.coursesDir);
-  write(options.outDir, "discovery.css", DISCOVERY_CSS.trimStart());
-  write(options.outDir, "learn-to-code/index.html", renderCategoryPage(catalog));
+  write(options.outDir, "discovery.css", discoveryCss());
+  write(options.outDir, "404.html", renderDiscoveryNotFound(options.motionScript));
+  write(options.outDir, "learn-to-code/index.html", renderCategoryPage(catalog, options.motionScript));
   write(options.outDir, "sitemap.xml", renderSitemap(catalog));
   write(options.outDir, "robots.txt", renderRobots());
 
   for (const course of catalog.publicCourses) {
-    write(options.outDir, `learn-to-code/${course.id}/index.html`, renderCoursePage(course));
+    write(options.outDir, `learn-to-code/${course.id}/index.html`, renderCoursePage(course, options.motionScript));
     for (const lesson of course.lessons) {
-      write(options.outDir, `lessons/${course.id}/${lesson.id}/index.html`, renderLessonPage(course, lesson));
+      write(options.outDir, `lessons/${course.id}/${lesson.id}/index.html`, renderLessonPage(course, lesson, options.motionScript));
       if (options.renderImages !== false) {
         const png = await renderLessonOgPng({
           courseTitle: course.title,
@@ -500,5 +531,8 @@ export async function generateDiscoverySite(options: {
 }
 
 export function discoveryCss(): string {
-  return DISCOVERY_CSS.trimStart();
+  // Config-side imports are bundled into a temporary directory by Vite;
+  // resolve authored assets from the frontend package, not import.meta.url.
+  const publicStyles = path.resolve(process.cwd(), "src/features/marketing/public");
+  return [DISCOVERY_CSS.trimStart(), readFileSync(path.join(publicStyles, "theme.css"), "utf8"), readFileSync(path.join(publicStyles, "discovery-theme.css"), "utf8")].join("\n");
 }
diff --git a/frontend/scripts/vitePluginDesignTokens.ts b/frontend/scripts/vitePluginDesignTokens.ts
new file mode 100644
index 00000000..0e1a8845
--- /dev/null
+++ b/frontend/scripts/vitePluginDesignTokens.ts
@@ -0,0 +1,10 @@
+import type { Plugin } from "vite";
+import { renderDesignTokensHtml } from "../src/design-system/tokens";
+
+/** Imported by Vite config, so editing tokens also restarts the dev server. */
+export function designTokensPlugin(): Plugin {
+  return {
+    name: "codetutor-design-tokens",
+    transformIndexHtml: { order: "pre", handler: renderDesignTokensHtml },
+  };
+}
diff --git a/frontend/scripts/vitePluginDiscovery.ts b/frontend/scripts/vitePluginDiscovery.ts
index afdaf5db..0bf38b6d 100644
--- a/frontend/scripts/vitePluginDiscovery.ts
+++ b/frontend/scripts/vitePluginDiscovery.ts
@@ -7,6 +7,7 @@ import {
   renderCategoryPage,
   renderCoursePage,
   renderLessonPage,
+  renderDiscoveryNotFound,
   renderRobots,
   renderSitemap,
 } from "./discoverySite";
@@ -33,6 +34,7 @@ export function isReservedDiscoveryPath(pathname: string): boolean {
 }
 
 export function discoverySitePlugin(): Plugin {
+  const motionScript = "/src/features/marketing/public/DiscoveryMotion.tsx";
   const frontendRoot = process.cwd();
   const coursesDir = path.join(frontendRoot, "public", "courses");
   return {
@@ -47,8 +49,19 @@ export function discoverySitePlugin(): Plugin {
         const catalog = loadDiscoveryCatalog(coursesDir);
         let body: string | Buffer | null = null;
         let contentType = "text/html; charset=utf-8";
+        let statusCode = 200;
 
-        if (pathname === "/learn-to-code/") body = renderCategoryPage(catalog);
+        async function notFound() {
+          res.statusCode = 404;
+          res.setHeader("Content-Type", "text/html; charset=utf-8");
+          res.setHeader("Cache-Control", "no-cache");
+          res.end(await server.transformIndexHtml(pathname, renderDiscoveryNotFound(motionScript)));
+        }
+
+        if (pathname === "/404.html") {
+          body = renderDiscoveryNotFound(motionScript);
+          statusCode = 404;
+        } else if (pathname === "/learn-to-code/") body = renderCategoryPage(catalog, motionScript);
         else if (pathname === "/sitemap.xml") {
           body = renderSitemap(catalog);
           contentType = "application/xml; charset=utf-8";
@@ -64,10 +77,9 @@ export function discoverySitePlugin(): Plugin {
           const ogMatch = pathname.match(/^\/lesson-og\/([a-z0-9][a-z0-9_-]*)\/([a-z0-9][a-z0-9_-]*)\.png$/);
           if (courseMatch) {
             const course = catalog.publicCourses.find((item) => item.id === courseMatch[1]);
-            if (course) body = renderCoursePage(course);
+            if (course) body = renderCoursePage(course, motionScript);
             else {
-              res.statusCode = 404;
-              res.end("Not found");
+              await notFound();
               return;
             }
           } else if (lessonMatch || ogMatch) {
@@ -75,11 +87,10 @@ export function discoverySitePlugin(): Plugin {
             const course = catalog.publicCourses.find((item) => item.id === match[1]);
             const lesson = course?.lessons.find((item) => item.id === match[2]);
             if (!course || !lesson) {
-              res.statusCode = 404;
-              res.end("Not found");
+              await notFound();
               return;
             }
-            if (lessonMatch) body = renderLessonPage(course, lesson);
+            if (lessonMatch) body = renderLessonPage(course, lesson, motionScript);
             else {
               let png = pngCache.get(pathname);
               if (!png) {
@@ -101,13 +112,14 @@ export function discoverySitePlugin(): Plugin {
         }
 
         if (body === null && isReservedDiscoveryPath(pathname)) {
-          res.statusCode = 404;
-          res.setHeader("Content-Type", "text/plain; charset=utf-8");
-          res.end("Not found");
+          await notFound();
           return;
         }
         if (body === null) return next();
-        res.statusCode = 200;
+        if (typeof body === "string" && contentType.startsWith("text/html")) {
+          body = await server.transformIndexHtml(pathname, body);
+        }
+        res.statusCode = statusCode;
         res.setHeader("Content-Type", contentType);
         res.setHeader("Cache-Control", contentType === "image/png" ? "public, max-age=3600" : "no-cache");
         res.end(body);
@@ -118,14 +130,23 @@ export function discoverySitePlugin(): Plugin {
 
 export function discoveryBuildPlugin(): Plugin {
   const frontendRoot = process.cwd();
+  let motionEntry: string;
+  let motionScript: string;
   return {
     name: "codetutor:discovery-build",
     apply: "build",
+    buildStart() {
+      motionEntry = this.emitFile({ type: "chunk", id: path.join(frontendRoot, "src/features/marketing/public/DiscoveryMotion.tsx"), name: "discovery-motion" });
+    },
+    generateBundle() {
+      motionScript = `/${this.getFileName(motionEntry)}`;
+    },
     async closeBundle() {
       const outDir = path.resolve(frontendRoot, "dist");
       const catalog = await generateDiscoverySite({
         coursesDir: path.join(frontendRoot, "public", "courses"),
         outDir,
+        motionScript,
       });
       const lessonCount = catalog.publicCourses.reduce((sum, course) => sum + course.lessons.length, 0);
       this.info(`[discovery] emitted ${catalog.publicCourses.length} course pages, ${lessonCount} lesson pages, and ${lessonCount} OG images`);
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 135d5ca7..4e94e899 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import { Routes, Route, Navigate, Outlet } from "react-router-dom";
 import { lazy, Suspense, useEffect } from "react";
+import { RouteLoading } from "./features/marketing/public/RouteLoading";
 import { initAuth } from "./auth/authStore";
 import { StorageQuotaBanner } from "./components/StorageQuotaBanner";
 import { FrozenAccountBanner } from "./components/FrozenAccountBanner";
@@ -75,14 +76,6 @@ const ContentHealthPage = import.meta.env.DEV
   ? lazy(() => import("./__dev__/ContentHealthPage"))
   : null;
 
-function Loading() {
-  return (
-    <div className="flex h-full items-center justify-center bg-bg text-muted">
-      <span className="skeleton h-4 w-32 rounded" />
-    </div>
-  );
-}
-
 // Layout route wrapping RequireAuth + HydrationGate — both stay mounted
 // across navigations so the AuthLoader doesn't re-run on every route
 // change. No page-level transition animation: the shared bg-bg
@@ -136,7 +129,7 @@ export default function App() {
   useEffect(() => initAuth(), []);
 
   return (
-    <Suspense fallback={<Loading />}>
+    <Suspense fallback={<RouteLoading />}>
       <StorageQuotaBanner />
       <GlobalShortcuts />
       <InviteCapture />
@@ -150,9 +143,9 @@ export default function App() {
             Answers the honest "why not just ChatGPT?" question in the
             open, including where ChatGPT wins. */}
         <Route path="/why-not-chatgpt" element={<WhyNotChatGPTPage />} />
-        <Route path="/privacy" element={<TrustPage />} />
-        <Route path="/terms" element={<TrustPage />} />
-        <Route path="/support" element={<TrustPage />} />
+        <Route path="/privacy" element={<TrustPage pageKey="privacy" />} />
+        <Route path="/terms" element={<TrustPage pageKey="terms" />} />
+        <Route path="/support" element={<TrustPage pageKey="support" />} />
 
         {/* Public auth routes — no layout wrapper, no RequireAuth. */}
         <Route path="/login" element={<LoginPage />} />
diff --git a/frontend/src/PublicApp.tsx b/frontend/src/PublicApp.tsx
index e4ce8d97..456e7fc7 100644
--- a/frontend/src/PublicApp.tsx
+++ b/frontend/src/PublicApp.tsx
@@ -1,12 +1,23 @@
 import { lazy, Suspense } from "react";
 import { Route, Routes } from "react-router-dom";
-import type { ReactNode } from "react";
 import WhyNotChatGPTPage from "./pages/WhyNotChatGPTPage";
+import { RouteLoading } from "./features/marketing/public/RouteLoading";
 
 const MarketingHomepage = lazy(
   () => import("./features/marketing/study/MarketingHomepage"),
 );
 const TrustPage = lazy(() => import("./pages/TrustPage"));
+const LoginPage = lazy(() => import("./pages/LoginPage"));
+const SignupPage = lazy(() => import("./pages/SignupPage"));
+const ResetPasswordPage = lazy(() => import("./pages/ResetPasswordPage"));
+const AuthCallbackPage = lazy(() => import("./pages/AuthCallbackPage"));
+const AnonLessonPage = lazy(() => import("./features/learning/pages/AnonLessonPage"));
+const GlobalShortcuts = lazy(() =>
+  import("./components/GlobalShortcuts").then((module) => ({
+    default: module.GlobalShortcuts,
+  })),
+);
+const SharePage = lazy(() => import("./features/share/pages/SharePage"));
 const FullApp = lazy(async () => {
   const [appModule, { initAuth }] = await Promise.all([
     import("./App"),
@@ -20,18 +31,6 @@ const FullApp = lazy(async () => {
   return appModule;
 });
 
-function Loading() {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-bg text-muted">
-      <span className="skeleton h-4 w-32 rounded" />
-    </div>
-  );
-}
-
-function PublicSurface({ children }: { children: ReactNode }) {
-  return <div className="public-surface contents">{children}</div>;
-}
-
 /**
  * Lightweight route shell for acquisition and trust surfaces.
  *
@@ -42,47 +41,41 @@ function PublicSurface({ children }: { children: ReactNode }) {
  */
 export default function PublicApp() {
   return (
-    <Suspense fallback={<Loading />}>
+    <Suspense fallback={<RouteLoading fullHeight />}>
       <Routes>
         <Route
           path="/"
-          element={
-            <PublicSurface>
-              <MarketingHomepage />
-            </PublicSurface>
-          }
+          element={<MarketingHomepage />}
         />
         <Route
           path="/why-not-chatgpt"
-          element={
-            <PublicSurface>
-              <WhyNotChatGPTPage />
-            </PublicSurface>
-          }
+          element={<WhyNotChatGPTPage />}
         />
         <Route
           path="/privacy"
-          element={
-            <PublicSurface>
-              <TrustPage />
-            </PublicSurface>
-          }
+          element={<TrustPage pageKey="privacy" />}
         />
         <Route
           path="/terms"
-          element={
-            <PublicSurface>
-              <TrustPage />
-            </PublicSurface>
-          }
+          element={<TrustPage pageKey="terms" />}
         />
         <Route
           path="/support"
-          element={
-            <PublicSurface>
-              <TrustPage />
-            </PublicSurface>
-          }
+          element={<TrustPage pageKey="support" />}
+        />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/signup" element={<SignupPage />} />
+        <Route path="/reset-password" element={<ResetPasswordPage />} />
+        <Route path="/auth/callback" element={<AuthCallbackPage />} />
+        <Route path="/s/:token" element={<SharePage />} />
+        <Route
+          path="/try/lesson/:courseId/:lessonId"
+          element={(
+            <>
+              <GlobalShortcuts />
+              <AnonLessonPage />
+            </>
+          )}
         />
         <Route path="*" element={<FullApp />} />
       </Routes>
diff --git a/frontend/src/auth/AuthShell.tsx b/frontend/src/auth/AuthShell.tsx
index 009cf11d..8b4407ec 100644
--- a/frontend/src/auth/AuthShell.tsx
+++ b/frontend/src/auth/AuthShell.tsx
@@ -1,30 +1,7 @@
 import type { ReactNode } from "react";
-import { Link } from "react-router-dom";
-import { motion, useReducedMotion } from "framer-motion";
-import { MeshGradient } from "@paper-design/shaders-react";
-import { AmbientGlyphField } from "../components/AmbientGlyphField";
-import { CinematicLighting } from "../components/cinema/CinematicLighting";
-import { FilmGrain } from "../components/cinema/FilmGrain";
-import { Wordmark } from "../components/Wordmark";
+import { PublicPage } from "../features/marketing/public/PublicPage";
 
-// Shared layout for /login, /signup, /reset-password, /auth/callback. Keeps
-// the header branding + card chrome consistent across auth routes so the
-// user sees the same visual frame regardless of which entry point they land
-// on (direct link, redirect from RequireAuth, etc.).
-//
-// Phase B: pulled into the same visual language as the rest of the
-// product. Previous version looked like a generic SaaS auth card —
-// after the 14s cinematic, a returning user signing back in tomorrow
-// hit chrome that read like a different product. Now the auth shell
-// has AmbientGlyphField + scene-tier FilmGrain underfoot, the
-// Wordmark is sized hero, and the form fades up on mount.
-//
-// Phase 22C: bridge to the marketing page. The MarketingPage backdrop
-// is a WebGL mesh gradient; without it here, a visitor crossing from
-// /  → /signup hits a visible color jump. We render the SAME mesh at
-// reduced opacity so the auth pages feel from the same world. The
-// auth chrome (form card + key-light) sits on top, so the form still
-// reads as the focus.
+/** Presentation only: auth handlers, return targets and form state stay in their owners. */
 export function AuthShell({
   title,
   subtitle,
@@ -36,84 +13,20 @@ export function AuthShell({
   children: ReactNode;
   footer?: ReactNode;
 }) {
-  const reduce = useReducedMotion();
   return (
-    // No `bg-bg` — the WebGL mesh + lighting stack is the background.
-    // A solid color layer here would paint over the mesh.
-    <div className="relative isolate flex min-h-screen flex-col overflow-hidden text-ink">
-      {/* Atmospheric backdrop — same palette as MarketingPage at 50%
-          opacity. The dimming turns the mesh into "shared world"
-          texture without competing with the form for attention. */}
-      {!reduce ? (
-        <div
-          aria-hidden="true"
-          className="pointer-events-none fixed inset-0 -z-30 opacity-50"
-        >
-          <MeshGradient
-            colors={[
-              "#0a0e22",
-              "#1d1758",
-              "#5b2cb0",
-              "#1d5b9e",
-            ]}
-            distortion={0.7}
-            swirl={0.6}
-            speed={0.18}
-            scale={1.3}
-            style={{ width: "100%", height: "100%" }}
-          />
-        </div>
-      ) : (
-        <div
-          aria-hidden="true"
-          className="pointer-events-none fixed inset-0 -z-30 bg-gradient-to-br from-[#0a0e22] via-[#1d1758] to-[#1d5b9e] opacity-60"
-        />
-      )}
-      {/* On narrow auth screens isolated edge glyphs read like clipped form
-          content. Keep the atmospheric detail where there is enough negative
-          space for it to register as a deliberate background layer. */}
-      <div className="hidden sm:block">
-        <AmbientGlyphField occludeCenter />
+    <PublicPage
+      className="public-auth"
+      composition="auth"
+      focusOnNavigation={false}
+    >
+      <div className="public-auth-intro">
+        <h1>{title}</h1>
+        {subtitle && <p>{subtitle}</p>}
       </div>
-      {/* Soft key light + vignette — `key-only` + `soft` intensity
-          gives the auth surface a subtle warm accent glow with the
-          vignette pulling the eye toward the form, without going to
-          the full three-point cinematic rig (which stays scoped to
-          the cinematic itself). */}
-      <CinematicLighting variant="key-only" intensity="soft" />
-      <FilmGrain intensity="hero" />
-      <div className="relative z-10 flex flex-1 items-center justify-center px-4 py-10">
-        <motion.div
-          className="w-full max-w-sm"
-          initial={{ opacity: 0, y: 8 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
-        >
-          <div className="mb-6 flex flex-col items-center gap-3">
-            <Wordmark size="hero" />
-            <h2 className="font-display text-[20px] font-medium tracking-tight text-ink">
-              {title}
-            </h2>
-            {subtitle && (
-              <p className="text-center text-[13px] leading-relaxed text-muted">{subtitle}</p>
-            )}
-          </div>
-          <div className="rounded-xl border border-border bg-panel/80 p-5 shadow-sm backdrop-blur">
-            {children}
-          </div>
-          {footer && (
-            <div className="mt-4 text-center text-sm text-muted [&_a]:inline-flex [&_a]:min-h-11 [&_a]:items-center [&_a]:rounded-lg [&_a]:px-2 [&_a]:focus-visible:outline-none [&_a]:focus-visible:ring-2 [&_a]:focus-visible:ring-accent [&_button]:inline-flex [&_button]:min-h-11 [&_button]:items-center [&_button]:rounded-lg [&_button]:px-2 [&_button]:focus-visible:outline-none [&_button]:focus-visible:ring-2 [&_button]:focus-visible:ring-accent">
-              {footer}
-            </div>
-          )}
-        </motion.div>
+      <div className="public-auth-form">
+        {children}
+        {footer && <div className="public-auth-footer">{footer}</div>}
       </div>
-      <footer className="relative z-10 flex flex-wrap items-center justify-center gap-x-4 border-t border-border-soft/60 bg-panel/40 px-4 py-2 text-center text-[10px] text-faint backdrop-blur-sm">
-        <span>© {new Date().getFullYear()} Mehul Srivastava</span>
-        <Link to="/privacy" className="inline-flex min-h-11 items-center hover:text-muted">Privacy</Link>
-        <Link to="/terms" className="inline-flex min-h-11 items-center hover:text-muted">Terms</Link>
-        <Link to="/support" className="inline-flex min-h-11 items-center hover:text-muted">Support</Link>
-      </footer>
-    </div>
+    </PublicPage>
   );
 }
diff --git a/frontend/src/auth/PasswordSignupForm.tsx b/frontend/src/auth/PasswordSignupForm.tsx
index dbabebef..0644637c 100644
--- a/frontend/src/auth/PasswordSignupForm.tsx
+++ b/frontend/src/auth/PasswordSignupForm.tsx
@@ -88,7 +88,7 @@ export function PasswordSignupForm({
     <div>
       <OAuthButtons disabled={submitting} returnTo={returnTo} />
 
-      <div className="my-4 flex items-center gap-2 text-sm text-faint">
+      <div className="auth-email-divider my-4 flex items-center gap-2 text-sm text-faint">
         <div className="h-px flex-1 bg-border" />
         <span>{emailDividerLabel}</span>
         <div className="h-px flex-1 bg-border" />
diff --git a/frontend/src/components/GlobalShortcuts.tsx b/frontend/src/components/GlobalShortcuts.tsx
index 63f51c8f..987fd851 100644
--- a/frontend/src/components/GlobalShortcuts.tsx
+++ b/frontend/src/components/GlobalShortcuts.tsx
@@ -27,7 +27,8 @@ export function openKeyboardShortcuts(returnFocus?: HTMLElement): void {
 //   Esc       → close the cheatsheet when it's open; everything else keeps
 //               its own Esc handling (SSE abort, dialog dismiss, etc.).
 //
-// Mounted once at the app root — there's no route that shouldn't have these.
+// Mounted once by the active product shell. Public acquisition/trust pages do
+// not need it, but the lightweight anonymous lesson route does.
 
 export function isTypingTarget(el: EventTarget | null): boolean {
   if (!(el instanceof HTMLElement)) return false;
diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index 90535242..32443e25 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -1,6 +1,7 @@
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
   type ReactNode,
@@ -136,8 +137,9 @@ export function Modal({
     return () => window.clearTimeout(fallback);
   }, [exiting, finishClose]);
 
-  useEffect(() => {
-    let escapeTimer: number | null = null;
+  // Input ownership must be ready in the same commit as the dialog. A passive
+  // effect leaves a visible modal that can miss the first Escape/Tab under load.
+  useLayoutEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (e.key !== "Escape") return;
       const layers = Array.from(
@@ -154,26 +156,22 @@ export function Modal({
       // The product owns Escape while a dialog is the top interactive layer.
       // This prevents cancellable browser defaults from competing with the
       // dialog close; non-cancellable Safari fullscreen exits may still
-      // reflow the viewport, which the delayed close below tolerates.
+      // reflow the viewport; exit completion has its own bounded fallback.
       e.preventDefault();
       e.stopPropagation();
 
-      // Safari may also use this Escape to leave browser fullscreen. The
-      // product layer must still close; preserving it after the native reflow
-      // leaves the learner in a smaller layout with stale modal focus.
-      escapeTimer = window.setTimeout(() => {
-        escapeTimer = null;
-        closeWithExit();
-      }, 100);
+      // Capture the close intent synchronously. A timer owned by this effect
+      // can be cancelled by setup/cleanup replay before it updates state,
+      // swallowing an Escape that the dialog has already acknowledged.
+      closeWithExit();
     };
     window.addEventListener("keydown", onKey);
     return () => {
       window.removeEventListener("keydown", onKey);
-      if (escapeTimer !== null) window.clearTimeout(escapeTimer);
     };
   }, [closeWithExit]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const previouslyFocused = document.activeElement as HTMLElement | null;
     const panel = panelRef.current;
     const first = panel?.querySelector<HTMLElement>(
@@ -211,7 +209,7 @@ export function Modal({
   // behind the backdrop. This also composes for stacked modals: a share dialog
   // temporarily inerts the completion dialog beneath it, then restores that
   // layer when it closes while the completion dialog keeps the app inert.
-  useEffect(() => {
+  useLayoutEffect(() => {
     const backdrop = backdropRef.current;
     if (!backdrop) return;
 
@@ -232,7 +230,7 @@ export function Modal({
   // that can move focus out of the document before our old edge-only trap ever
   // ran. A modal must remain fully keyboard-operable regardless of that host
   // preference, so advance explicitly through its visible controls.
-  useEffect(() => {
+  useLayoutEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (e.key !== "Tab") return;
       const layers = Array.from(
diff --git a/frontend/src/design-system/tokens.test.ts b/frontend/src/design-system/tokens.test.ts
new file mode 100644
index 00000000..151a7617
--- /dev/null
+++ b/frontend/src/design-system/tokens.test.ts
@@ -0,0 +1,35 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+import { designTokenCss, publicBrand, publicCanvasColor, renderDesignTokensHtml } from "./tokens";
+
+describe("shared public design tokens", () => {
+  it("derives both CSS color formats and browser chrome from one value", () => {
+    const css = designTokenCss();
+    expect(css).toContain(`--brand-canvas-rgb: ${publicBrand.dark.canvas.join(" ")}`);
+    expect(css).toContain(`--brand-canvas: ${publicCanvasColor}`);
+    expect(css).toContain("--study-bg: var(--brand-canvas)");
+    expect(css).toContain("--color-bg: var(--brand-canvas-rgb)");
+  });
+
+  it("resolves every referenced brand token and scopes public aliases", () => {
+    const css = designTokenCss();
+    const definitions = new Set([...css.matchAll(/(--[\w-]+):/g)].map((m) => m[1]));
+    for (const [, token] of css.matchAll(/var\((--[\w-]+)\)/g)) {
+      expect(definitions.has(token), token).toBe(true);
+    }
+    const root = css.slice(0, css.indexOf("}"));
+    expect(root).not.toContain("--color-");
+    expect(css).toContain(".motion-study, .public-theme");
+    expect(css).toContain(".motion-study.study-light");
+  });
+
+  it("injects one critical source before bootstrap, without another request", () => {
+    const template = readFileSync(new URL("../../index.html", import.meta.url), "utf8");
+    const html = renderDesignTokensHtml(template);
+    expect(html.match(/id="design-system-tokens"/g)).toHaveLength(1);
+    expect(html).not.toContain("__PUBLIC_CANVAS_COLOR__");
+    expect(html).not.toContain("<!-- design-system:tokens -->");
+    expect(html.indexOf('id="design-system-tokens"')).toBeLessThan(html.indexOf('id="public-theme-bootstrap"'));
+    expect(html).toContain(`isPublic ? "${publicCanvasColor}"`);
+  });
+});
diff --git a/frontend/src/design-system/tokens.ts b/frontend/src/design-system/tokens.ts
new file mode 100644
index 00000000..dad48360
--- /dev/null
+++ b/frontend/src/design-system/tokens.ts
@@ -0,0 +1,102 @@
+/** Public brand decisions. CSS, first paint and static documents derive from
+ * this source; components consume roles, never a second copy of the palette.
+ * Workspace dark/light roles remain in index.css until separately migrated. */
+const dark = {
+  canvas: [5, 7, 9],
+  text: [236, 239, 241],
+  muted: [160, 168, 177],
+  faint: [140, 150, 160],
+  line: [37, 42, 48],
+  object: [16, 19, 22],
+  field: [12, 15, 18],
+  elevated: [19, 23, 27],
+  border: [49, 56, 64],
+  accent: [160, 217, 237],
+  code: [16, 25, 31],
+  tableHeader: [23, 28, 33],
+} as const;
+
+const light = {
+  ...dark,
+  canvas: [248, 250, 252],
+  text: [15, 23, 42],
+  muted: [71, 85, 105],
+  line: [203, 213, 225],
+  object: [255, 255, 255],
+  accent: [8, 107, 145],
+} as const;
+
+export const publicBrand = {
+  dark,
+  light,
+  headerHeight: "88px",
+  targetMin: "44px",
+  controlHeight: "48px",
+  controlRadius: "10px",
+  pillRadius: "24px",
+  readingFeather: "12px",
+  readingSpread: "8px",
+  fontUi: "Inter, system-ui, sans-serif",
+  fieldArrival: "800ms",
+} as const;
+
+const hex = (rgb: readonly number[]) =>
+  `#${rgb.map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+
+export const publicCanvasColor = hex(publicBrand.dark.canvas);
+
+function paletteCss(palette: typeof dark | typeof light) {
+  return Object.entries(palette).map(([role, rgb]) =>
+    `--brand-${role}-rgb: ${rgb.join(" ")};\n--brand-${role}: ${hex(rgb)};`,
+  ).join("\n");
+}
+
+/** Inline before first paint: no theme-fetch race or runtime token generator. */
+export function designTokenCss() {
+  return `:root {
+${paletteCss(publicBrand.dark)}
+--brand-header-height: ${publicBrand.headerHeight};
+--brand-target-min: ${publicBrand.targetMin};
+--brand-control-height: ${publicBrand.controlHeight};
+--brand-control-radius: ${publicBrand.controlRadius};
+--brand-pill-radius: ${publicBrand.pillRadius};
+--brand-reading-feather: ${publicBrand.readingFeather};
+--brand-reading-spread: ${publicBrand.readingSpread};
+--brand-font-ui: ${publicBrand.fontUi};
+--brand-field-arrival: ${publicBrand.fieldArrival};
+}
+.motion-study.study-light { ${paletteCss(publicBrand.light)} }
+.motion-study, .public-theme {
+--color-bg: var(--brand-canvas-rgb);
+--color-ink: var(--brand-text-rgb);
+--color-muted: var(--brand-muted-rgb);
+--study-bg: var(--brand-canvas);
+--study-ink: var(--brand-text);
+--study-muted: var(--brand-muted);
+--study-line: var(--brand-line);
+--study-panel: var(--brand-object);
+--study-accent: var(--brand-accent);
+--brand-reading-shadow: 0 0 var(--brand-reading-feather) var(--brand-reading-spread) var(--study-bg);
+--brand-display-shadow: 0 1px 3px var(--study-bg), 0 0 12px var(--study-bg);
+--brand-display-backing: radial-gradient(ellipse at center, var(--study-bg) 45%, transparent 75%);
+}
+.public-page {
+--color-panel: var(--brand-field-rgb);
+--color-elevated: var(--brand-elevated-rgb);
+--color-border: var(--brand-border-rgb);
+--color-border-soft: var(--brand-line-rgb);
+--color-faint: var(--brand-faint-rgb);
+--color-accent: var(--brand-accent-rgb);
+--color-accent-ink: var(--brand-accent-rgb);
+--color-success: 52 211 153;
+--color-warn: 251 191 36;
+--color-warn-ink: 251 191 36;
+--color-danger: 248 113 113;
+}`;
+}
+
+export function renderDesignTokensHtml(html: string) {
+  return html
+    .replace("<!-- design-system:tokens -->", `<style id="design-system-tokens">${designTokenCss()}</style>`)
+    .replaceAll("__PUBLIC_CANVAS_COLOR__", publicCanvasColor);
+}
diff --git a/frontend/src/features/marketing/public/AuthFieldStill.tsx b/frontend/src/features/marketing/public/AuthFieldStill.tsx
new file mode 100644
index 00000000..09672810
--- /dev/null
+++ b/frontend/src/features/marketing/public/AuthFieldStill.tsx
@@ -0,0 +1,63 @@
+import { useLayoutEffect, useState } from "react";
+import { authContour, readingBounds, type AuthBounds } from "./authComposition";
+import { particleIdentity, particleSeed } from "../study/geometry";
+
+const glyphs = ["{", "}", "<", ">", "[", "]", ";", "+"];
+
+/** Geometry fallback exists before WebGL and survives reduced motion or failure. */
+export function AuthFieldStill({ root, reading = false }: { root: HTMLElement; reading?: boolean }) {
+  const [layout, setLayout] = useState<{
+    width: number;
+    height: number;
+    content: AuthBounds;
+  } | null>(null);
+  useLayoutEffect(() => {
+    const content = root.querySelector<HTMLElement>(".public-content, main");
+    if (!content) return;
+    let alive = true;
+    const measure = () => {
+      if (!alive) return;
+      const page = root.getBoundingClientRect();
+      const rect = content.getBoundingClientRect();
+      setLayout(reading ? {
+        width: innerWidth, height: innerHeight,
+        content: readingBounds(innerWidth, innerHeight, rect.width),
+      } : {
+        width: page.width,
+        height: page.height,
+        content: { left: rect.left - page.left, top: rect.top - page.top,
+          width: rect.width, height: rect.height },
+      });
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(root);
+    observer.observe(content);
+    window.addEventListener("resize", measure);
+    void document.fonts.ready.then(measure);
+    measure();
+    return () => {
+      alive = false;
+      observer.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [root, reading]);
+  if (!layout) return null;
+  const points = authContour(160, layout.width, layout.content);
+  const cx = layout.content.left + layout.content.width / 2;
+  const cy = layout.content.top + layout.content.height / 2;
+  return (
+    <div className={reading ? "public-flow-still" : "public-auth-still"} aria-hidden="true">
+      <svg viewBox={`0 0 ${layout.width} ${layout.height}`}>
+        <g fontFamily="monospace" textAnchor="middle" dominantBaseline="middle">
+          {Array.from({ length: 160 }, (_, i) => (
+            <text key={i} x={cx + points[i * 3]!} y={cy - points[i * 3 + 1]!}
+              fill={particleIdentity(i)[1] < 0.7 ? "currentColor" : "#c4a7e7"}
+              opacity={0.35 + particleSeed(i) * 0.45} fontSize={4 + particleSeed(i) ** 2 * 16}>
+              {glyphs[Math.floor(particleIdentity(i)[0] * 8)]}
+            </text>
+          ))}
+        </g>
+      </svg>
+    </div>
+  );
+}
diff --git a/frontend/src/features/marketing/public/DiscoveryMotion.tsx b/frontend/src/features/marketing/public/DiscoveryMotion.tsx
new file mode 100644
index 00000000..10c4c49c
--- /dev/null
+++ b/frontend/src/features/marketing/public/DiscoveryMotion.tsx
@@ -0,0 +1,40 @@
+import { Component, lazy, Suspense, useEffect, useState, type ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import { AuthFieldStill } from "./AuthFieldStill";
+
+const ParticleField = lazy(() => import("../study/ParticleField"));
+
+// The authored document is not hydrated or owned by React. A failed download
+// or renderer can only remove decoration, never lesson content or navigation.
+class DecorationBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {
+  state = { failed: false };
+  static getDerivedStateFromError() { return { failed: true }; }
+  render() { return this.state.failed ? null : this.props.children; }
+}
+
+function DiscoveryMotion() {
+  const [reduced, setReduced] = useState(() => matchMedia("(prefers-reduced-motion: reduce)").matches);
+  useEffect(() => {
+    const media = matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduced(media.matches);
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+  useEffect(() => {
+    if (reduced) document.body.dataset.motion = "static";
+  }, [reduced]);
+  return <>
+    <AuthFieldStill root={document.body} reading />
+    {!reduced && (
+    <DecorationBoundary>
+      <Suspense fallback={null}>
+        <ParticleField root={document.body} light={false} count={420} composition="ambient"
+          onStatus={(status) => { document.body.dataset.motion = status; }} />
+      </Suspense>
+    </DecorationBoundary>
+    )}
+  </>;
+}
+
+const mount = document.getElementById("discovery-motion");
+if (mount) createRoot(mount).render(<DiscoveryMotion />);
diff --git a/frontend/src/features/marketing/public/PublicMotionWorld.tsx b/frontend/src/features/marketing/public/PublicMotionWorld.tsx
new file mode 100644
index 00000000..9f3c25d7
--- /dev/null
+++ b/frontend/src/features/marketing/public/PublicMotionWorld.tsx
@@ -0,0 +1,68 @@
+import { Component, createContext, lazy, Suspense, useCallback, useContext,
+  useEffect, useLayoutEffect, useMemo, useState, type ReactNode } from "react";
+import { useLocation } from "react-router-dom";
+import type { ParticleScene } from "../study/ParticleField";
+import "./world.css";
+
+const ParticleField = lazy(() => import("../study/ParticleField"));
+type Status = "loading" | "ready" | "unavailable";
+const World = createContext<{
+  register: (scene: ParticleScene) => () => void;
+  status: Status; reduced: boolean; loadFailed: boolean; retry: () => void;
+}>({ register: () => () => {}, status: "loading", reduced: false, loadFailed: false, retry: () => {} });
+
+class GraphicsBoundary extends Component<{
+  children: ReactNode; onFailure: () => void;
+}, { failed: boolean }> {
+  state = { failed: false };
+  static getDerivedStateFromError() { return { failed: true }; }
+  componentDidCatch() { this.props.onFailure(); }
+  render() { return this.state.failed ? null : this.props.children; }
+}
+
+/** Only presentation lives here. Page components retain their own form state,
+ * guards, focus and cleanup; this host survives public route Suspense boundaries. */
+export function PublicMotionWorld({ children }: { children: ReactNode }) {
+  const { key } = useLocation();
+  const [root, setRoot] = useState<HTMLDivElement | null>(null);
+  const [scene, setScene] = useState<ParticleScene | null>(null);
+  const [status, setStatus] = useState<Status>("loading");
+  const [attempt, setAttempt] = useState(0);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [isPublic, setPublic] = useState(() => document.documentElement.hasAttribute("data-public-theme"));
+  const [reduced, setReduced] = useState(() => matchMedia("(prefers-reduced-motion: reduce)").matches);
+  useLayoutEffect(() => {
+    setPublic(document.documentElement.hasAttribute("data-public-theme"));
+  }, [key]);
+  useEffect(() => {
+    const query = matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => { setStatus("loading"); setReduced(query.matches); };
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+  const register = useCallback((next: ParticleScene) => {
+    setScene(next);
+    // An outgoing page cannot unregister a more recently mounted destination.
+    return () => setScene(current => current === next ? null : current);
+  }, []);
+  const retry = useCallback(() => { setStatus("loading"); setAttempt(n => n + 1); }, []);
+  const failed = useCallback(() => { setLoadFailed(true); setStatus("unavailable"); }, []);
+  const value = useMemo(() => ({register, status, reduced, loadFailed, retry}), [register, status, reduced, loadFailed, retry]);
+  return <World.Provider value={value}>
+    <div ref={setRoot} className="public-motion-world">
+      {root && isPublic && !reduced && <GraphicsBoundary key={attempt} onFailure={failed}>
+        <Suspense fallback={null}>
+          <ParticleField root={root} scene={scene} light={false} count={420} onStatus={setStatus} />
+        </Suspense>
+      </GraphicsBoundary>}
+      {children}
+    </div>
+  </World.Provider>;
+}
+
+export function usePublicMotionScene(root: HTMLElement | null, composition: ParticleScene["composition"]) {
+  const world = useContext(World);
+  const { register } = world;
+  useLayoutEffect(() => root ? register({root, composition}) : undefined, [root, composition, register]);
+  return world;
+}
diff --git a/frontend/src/features/marketing/public/PublicPage.tsx b/frontend/src/features/marketing/public/PublicPage.tsx
new file mode 100644
index 00000000..6a97aad2
--- /dev/null
+++ b/frontend/src/features/marketing/public/PublicPage.tsx
@@ -0,0 +1,84 @@
+import {
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { Link, useLocation, useNavigationType } from "react-router-dom";
+import { Wordmark } from "../../../components/Wordmark";
+import { AuthFieldStill } from "./AuthFieldStill";
+import { usePublicMotionScene } from "./PublicMotionWorld";
+import "./public-page.css";
+
+export function PublicPage({
+  children,
+  className = "",
+  composition = "ambient",
+  focusOnNavigation = true,
+  headerAction,
+  footerLinks,
+  documentNavigation = false,
+}: {
+  children: ReactNode;
+  className?: string;
+  composition?: "ambient" | "auth";
+  focusOnNavigation?: boolean;
+  headerAction?: ReactNode;
+  footerLinks?: ReactNode;
+  documentNavigation?: boolean;
+}) {
+  const main = useRef<HTMLElement>(null);
+  const { key, hash } = useLocation();
+  const navigationType = useNavigationType();
+  useLayoutEffect(() => {
+    if (focusOnNavigation && navigationType !== "POP" && !hash) {
+      main.current?.focus({ preventScroll: true });
+    }
+  }, [key, hash, navigationType, focusOnNavigation]);
+  const [root, setRoot] = useState<HTMLDivElement | null>(null);
+  const {status, reduced} = usePublicMotionScene(root, composition);
+  // A loading fallback must be escapable even if the full app bundle never
+  // arrives. Its navigation uses ordinary documents, not that pending router.
+  const publicLink = (href: string, children: ReactNode, props = {}) =>
+    documentNavigation ? <a href={href} {...props}>{children}</a> : <Link to={href} {...props}>{children}</Link>;
+  return (
+    <div
+      ref={setRoot}
+      className={`public-theme public-page ${className}`}
+      data-motion={reduced ? "static" : status}
+    >
+      {root && composition === "auth" && <AuthFieldStill root={root} />}
+      {root && composition === "ambient" && <AuthFieldStill root={root} reading />}
+      <a href="#public-content" className="public-skip">
+        Skip to content
+      </a>
+      <header className="brand-header public-header">
+        {publicLink("/", <Wordmark size="md" />, { "aria-label": "CodeTutor AI home" })}
+        {headerAction ?? (
+          publicLink("/", <>
+            <span className="brand-header-long">Back to CodeTutor</span>
+            <span className="brand-header-short" aria-hidden="true">Back home</span>
+            <span aria-hidden="true">↗</span>
+          </>, { className: "brand-header-action public-back", "aria-label": "Back to CodeTutor" })
+        )}
+      </header>
+      <main
+        ref={main}
+        id="public-content"
+        tabIndex={-1}
+        className="public-content"
+      >
+        {children}
+      </main>
+      <footer className="public-footer">
+        <span>© {new Date().getFullYear()} Mehul Srivastava</span>
+        {footerLinks}
+        <nav aria-label="Trust and support">
+          {publicLink("/privacy", "Privacy")}
+          {publicLink("/terms", "Terms")}
+          {publicLink("/support", "Support")}
+        </nav>
+      </footer>
+    </div>
+  );
+}
diff --git a/frontend/src/features/marketing/public/PublicThemeSync.tsx b/frontend/src/features/marketing/public/PublicThemeSync.tsx
new file mode 100644
index 00000000..1087faac
--- /dev/null
+++ b/frontend/src/features/marketing/public/PublicThemeSync.tsx
@@ -0,0 +1,103 @@
+import { useLayoutEffect, useRef, useSyncExternalStore } from "react";
+import { useLocation, useNavigationType } from "react-router-dom";
+
+function subscribePublicTheme(notify: () => void) {
+  window.addEventListener("codetutor:route-change", notify);
+  window.addEventListener("popstate", notify);
+  return () => {
+    window.removeEventListener("codetutor:route-change", notify);
+    window.removeEventListener("popstate", notify);
+  };
+}
+
+/** Reuse the pre-paint classifier; don't maintain a second workspace route list. */
+export function useIsPublicTheme() {
+  return useSyncExternalStore(
+    subscribePublicTheme,
+    () => document.documentElement.hasAttribute("data-public-theme"),
+    () => false,
+  );
+}
+
+/** The inline pre-paint script owns the classifier, including on reload. */
+export function PublicThemeSync() {
+  const location = useLocation();
+  const { pathname, hash, key } = location;
+  const navigationType = useNavigationType();
+  const initialLocation = useRef(location);
+  const fragmentSettled = useRef(false);
+  useLayoutEffect(() => {
+    if (fragmentSettled.current) return;
+    const initial = initialLocation.current;
+    const navigation = performance.getEntriesByType("navigation")[0] as
+      | PerformanceNavigationTiming
+      | undefined;
+    if (
+      initial.pathname !== "/" || !initial.hash ||
+      location.key !== initial.key || location.pathname !== initial.pathname ||
+      location.search !== initial.search || location.hash !== initial.hash ||
+      navigation?.type === "back_forward"
+    ) {
+      fragmentSettled.current = true;
+      return;
+    }
+    let id: string;
+    try {
+      id = decodeURIComponent(initial.hash.slice(1));
+    } catch {
+      fragmentSettled.current = true;
+      return;
+    }
+
+    // Native fragment scrolling can run before the lazy homepage exists.
+    // Wait for its actual content, not its graphics, and never replay a scroll
+    // after the visitor takes control or navigates elsewhere (including Back).
+    const events = ["pointerdown", "touchstart", "wheel", "keydown"] as const;
+    const cleanup = () => {
+      observer.disconnect();
+      events.forEach(event => window.removeEventListener(event, cancel, true));
+    };
+    const cancel = () => {
+      fragmentSettled.current = true;
+      cleanup();
+    };
+    const restore = () => {
+      const homepage = document.querySelector('[data-marketing="glyph-homepage"]');
+      if (!homepage) return;
+      cancel();
+      const target = document.getElementById(id);
+      if (target && homepage.contains(target)) {
+        target.scrollIntoView({ behavior: "instant", block: "start" });
+        // WebKit does not move its sequential keyboard starting point when a
+        // late fragment is only scrolled. Match the native anchor handoff.
+        // Focus the section's heading, not its full multi-screen layout box.
+        const focusTarget = target.matches("section")
+          ? target.querySelector<HTMLElement>("h1, h2") ?? target
+          : target;
+        if (!focusTarget.hasAttribute("tabindex")) focusTarget.tabIndex = -1;
+        focusTarget.focus({ preventScroll: true });
+      }
+    };
+    const observer = new MutationObserver(restore);
+    observer.observe(document.body, { childList: true, subtree: true });
+    events.forEach(event => window.addEventListener(event, cancel, { capture: true, passive: true }));
+    restore();
+    // StrictMode may re-arm an unfulfilled request; only fulfillment or actual
+    // visitor intent consumes it, not effect cleanup itself.
+    return cleanup;
+  }, [location]);
+  useLayoutEffect(() => {
+    window.dispatchEvent(new Event("codetutor:route-change"));
+    // New public destinations start with their heading, even when the link
+    // was in a long page's footer. Leave history restoration and explicit
+    // anchors to the browser/owning page; never move an internal workspace.
+    if (
+      navigationType !== "POP" &&
+      !hash &&
+      document.documentElement.hasAttribute("data-public-theme")
+    ) {
+      window.scrollTo({ top: 0, left: 0, behavior: "instant" });
+    }
+  }, [pathname, hash, key, navigationType]);
+  return null;
+}
diff --git a/frontend/src/features/marketing/public/RouteLoading.tsx b/frontend/src/features/marketing/public/RouteLoading.tsx
new file mode 100644
index 00000000..c2519f34
--- /dev/null
+++ b/frontend/src/features/marketing/public/RouteLoading.tsx
@@ -0,0 +1,73 @@
+import { useLayoutEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { PublicPage } from "./PublicPage";
+import { useIsPublicTheme } from "./PublicThemeSync";
+
+/** Public route waits keep the same navigation and canvas as the destination.
+ * Workspace waits retain their existing presentation; no auth state is read. */
+export function RouteLoading({ fullHeight = false }: { fullHeight?: boolean }) {
+  const isPublic = useIsPublicTheme();
+  const { pathname, search, hash } = useLocation();
+  useLayoutEffect(() => {
+    if (!isPublic) return;
+    return () => {
+      const active = document.activeElement;
+      if (!(active instanceof HTMLElement) || !active.closest(".public-route-loading")) return;
+      const link = active instanceof HTMLAnchorElement ? active : null;
+      const mainFocused = active.id === "public-content";
+      if (!link && !mainFocused) return;
+      // Suspense replaces its fallback in the same commit. Restore only an
+      // equivalent control on this destination, and never override new focus.
+      requestAnimationFrame(() => {
+        if (window.location.pathname + window.location.search + window.location.hash !== pathname + search + hash) return;
+        if (document.activeElement !== document.body) return;
+        // Nested lazy boundaries can replace one fallback with another before
+        // the destination is ready. Hand focus through that shell too; its own
+        // cleanup will transfer it when the final page arrives.
+        const page = Array.from(document.querySelectorAll<HTMLElement>('.public-page, [data-marketing="glyph-homepage"]'))
+          .find(candidate => candidate.getClientRects().length > 0);
+        let target = mainFocused
+          ? page?.querySelector<HTMLElement>("#public-content")
+          : Array.from(page?.querySelectorAll<HTMLAnchorElement>("a") ?? []).find(candidate =>
+              candidate.href === link!.href &&
+              candidate.getAttribute("aria-label") === link!.getAttribute("aria-label") &&
+              candidate.textContent === link!.textContent,
+            );
+        // The homepage deliberately has its own editorial layout, but its
+        // skip, home and main destinations are equivalents of this shell's.
+        if (!target && page?.matches('[data-marketing="glyph-homepage"]')) {
+          if (mainFocused) target = page.querySelector<HTMLElement>("#study-title");
+          else if (link?.classList.contains("public-skip")) target = page.querySelector<HTMLElement>(".study-skip");
+          else if (link?.origin === window.location.origin && link.pathname === "/" && !link.search && !link.hash) {
+            target = page.querySelector<HTMLElement>('[aria-label="CodeTutor AI home"]');
+          }
+        }
+        // An activated skip requested readable content, not just offscreen
+        // focus below the homepage artwork. Equivalent header links stay put.
+        const revealHomepageMain = mainFocused && page?.matches('[data-marketing="glyph-homepage"]');
+        target?.focus({ preventScroll: !revealHomepageMain });
+      });
+    };
+  }, [isPublic, pathname, search, hash]);
+  if (!isPublic) {
+    return (
+      <div className={`route-loading flex ${fullHeight ? "min-h-screen" : "h-full"} items-center justify-center bg-bg text-muted`}>
+        <span className="skeleton h-4 w-32 rounded" />
+      </div>
+    );
+  }
+  const auth = /^\/(?:login|signup|reset-password|auth\/callback)\/?$/i.test(pathname);
+  return (
+    <PublicPage
+      className="public-route-loading"
+      composition={auth ? "auth" : "ambient"}
+      focusOnNavigation={false}
+      documentNavigation
+    >
+      <div role="status" className="text-muted">
+        <h1 className="sr-only">Loading page</h1>
+        <p>Loading…</p>
+      </div>
+    </PublicPage>
+  );
+}
diff --git a/frontend/src/features/marketing/public/authComposition.test.ts b/frontend/src/features/marketing/public/authComposition.test.ts
new file mode 100644
index 00000000..84b6423e
--- /dev/null
+++ b/frontend/src/features/marketing/public/authComposition.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { authContour, readingBounds } from "./authComposition";
+
+describe("public reading composition", () => {
+  it.each([[320, 740], [1440, 900], [3840, 2160]])("keeps the living field centered and bounded at %i x %i", (width, height) => {
+    const bounds = readingBounds(width, height, 760);
+    expect(bounds.left + bounds.width / 2).toBe(width / 2);
+    expect(bounds.top + bounds.height / 2).toBe(height / 2);
+    expect(bounds.width).toBeLessThanOrEqual(width - 40);
+    expect(bounds.height).toBeLessThanOrEqual(960);
+    const points = authContour(420, width, bounds, 40);
+    expect(points).not.toEqual(authContour(420, width, bounds, 45));
+    expect(Array.from(points).every(Number.isFinite)).toBe(true);
+  });
+});
+
+describe("centered auth composition", () => {
+  it.each([[390, 600], [1280, 620], [3840, 760], [320, 1200]])(
+    "keeps finite deterministic surrounding material at width %i and content height %i",
+    (width, height) => {
+      const bounds = { left: 20, top: 88, width: Math.min(420, width - 40), height };
+      const points = authContour(420, width, bounds);
+      expect(points).toEqual(authContour(420, width, bounds));
+      expect(points.length).toBe(1260);
+      expect(Array.from(points).every(Number.isFinite)).toBe(true);
+      const xs = Array.from(points).filter((_, i) => i % 3 === 0);
+      const ys = Array.from(points).filter((_, i) => i % 3 === 1);
+      expect(Math.min(...xs)).toBeLessThan(-Math.min(width * 0.3, 300));
+      expect(Math.max(...xs)).toBeGreaterThan(Math.min(width * 0.3, 300));
+      expect(Math.max(...xs.map(Math.abs))).toBeLessThan(width / 2);
+      expect(Math.min(...ys)).toBeLessThan(-height * 0.4);
+      expect(Math.max(...ys)).toBeGreaterThan(height * 0.4);
+    },
+  );
+  it("does not stretch a short form's contour across a 4K display", () => {
+    const bounds = { left: 0, top: 0, width: 420, height: 480 };
+    expect(authContour(160, 3840, bounds)).toEqual(authContour(160, 1920, bounds));
+  });
+  it("adapts to expanded content without changing horizontal identity", () => {
+    const base = { left: 430, top: 120, width: 420, height: 550 };
+    const a = authContour(160, 1280, base);
+    const b = authContour(160, 1280, { ...base, height: 850 });
+    for (let i = 0; i < 160; i++) {
+      expect(a[i * 3]).toBe(b[i * 3]);
+      expect(a[i * 3 + 2]).toBe(b[i * 3 + 2]);
+      expect(Math.abs(b[i * 3 + 1]!)).toBeGreaterThanOrEqual(Math.abs(a[i * 3 + 1]!));
+    }
+  });
+  it("flows continuously without resetting identities or allocating a new pool", () => {
+    const bounds = {left:0, top:0, width:420, height:620};
+    const a = authContour(420, 1280, bounds, 30);
+    const b = authContour(420, 1280, bounds, 30 + 1 / 60);
+    const later = authContour(420, 1280, bounds, 35);
+    expect(Math.max(...a.map((v,i) => Math.abs(v-b[i]!)))).toBeLessThan(3);
+    expect(Math.max(...a.map((v,i) => Math.abs(v-later[i]!)))).toBeGreaterThan(20);
+    const output = new Float32Array(420 * 3);
+    expect(authContour(420, 1280, bounds, 35, output)).toBe(output);
+    expect(output).toEqual(later);
+  });
+});
diff --git a/frontend/src/features/marketing/public/authComposition.ts b/frontend/src/features/marketing/public/authComposition.ts
new file mode 100644
index 00000000..913fb12b
--- /dev/null
+++ b/frontend/src/features/marketing/public/authComposition.ts
@@ -0,0 +1,41 @@
+import { particleSeed } from "../study/geometry";
+
+export interface AuthBounds {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+/** Reading pages keep the field in the current viewport, not stretched around
+ * a multi-screen document. They share auth's material, clock and pointer physics. */
+export function readingBounds(width: number, height: number, contentWidth: number): AuthBounds {
+  const readingWidth = Math.max(1, Math.min(contentWidth, width - 40));
+  const readingHeight = Math.max(1, Math.min(height * 0.82, 960));
+  return { left: (width - readingWidth) / 2, top: (height - readingHeight) / 2,
+    width: readingWidth, height: readingHeight };
+}
+
+/** The homepage material opens into a living clearing, not a second sculpture.
+ * Each seeded glyph travels with the shared clock through a broad, uneven stream.
+ * No form values, input state, timers or per-page animation clocks are involved.
+ * The fallback is the same field at time zero. */
+export function authContour(count: number, viewportWidth: number, content: AuthBounds, seconds = 0, output?: Float32Array) {
+  const points = output ?? new Float32Array(count * 3);
+  // Foreground belongs to the centered task, not the monitor's outer edges.
+  // The distant field independently retains the homepage's area-based density.
+  const horizontal = Math.max(1, Math.min(viewportWidth * 0.48, content.width * 1.55));
+  const vertical = Math.max(180, content.height * 0.76);
+  for (let i = 0; i < count; i++) {
+    const seed = particleSeed(i);
+    const angle = i * 2.399963229728653 + seconds * (0.025 + seed * 0.009);
+    const depth = 0.57 + particleSeed(i + 7919) * 0.38;
+    const x = Math.sin(angle);
+    const y = Math.cos(angle);
+    // Softly squared flow gives text room without tracing a rigid frame.
+    points[i * 3] = Math.sign(x) * Math.pow(Math.abs(x), 0.65) * horizontal * depth;
+    points[i * 3 + 1] = y * vertical * depth;
+    points[i * 3 + 2] = Math.sin(angle + seed * 6.28) * 120 * depth;
+  }
+  return points;
+}
diff --git a/frontend/src/features/marketing/public/discovery-theme.css b/frontend/src/features/marketing/public/discovery-theme.css
new file mode 100644
index 00000000..a7362cf2
--- /dev/null
+++ b/frontend/src/features/marketing/public/discovery-theme.css
@@ -0,0 +1,63 @@
+/* Shared tokens are embedded ahead of this sheet by the static generator. */
+body.public-theme {
+  --bg: var(--study-bg);
+  --panel: var(--study-panel);
+  --ink: var(--study-ink);
+  --muted: var(--study-muted);
+  --faint: var(--brand-faint);
+  --line: var(--study-line);
+  --accent: var(--study-accent);
+  background: var(--bg);
+  isolation: isolate;
+}
+#discovery-motion { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
+.motion-study-canvas { position: fixed; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--brand-field-arrival) ease; }
+body[data-motion="ready"] .motion-study-canvas { opacity: 1; }
+.public-theme .shell { width: min(1120px, calc(100% - 80px)); }
+.public-theme :is(h1,h2,h3) { font-weight: 500; }
+.public-theme h1 { font-size: clamp(40px, 6vw, 76px); max-width: 18ch; text-wrap: balance; }
+.public-theme .primary-link { background: var(--ink); color: var(--bg); text-align: center; justify-content: center; text-wrap: balance; }
+.public-theme .primary-link:hover { background: var(--accent); }
+.public-theme a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
+.public-theme :is(.hero,.footer) { border-color: var(--line); }
+.public-theme :is(.hero > .shell, main > .shell) { background: transparent; }
+.public-theme .hero > .shell > *,
+.public-theme main > section.shell > :is(.eyebrow,h2),
+.public-theme .prose > :is(h1,h2,h3,p,ul,ol,blockquote),
+.public-theme .footer-row > *,
+.public-theme .nav-links > .quiet-link {
+  background: var(--bg);
+  box-shadow: var(--brand-reading-shadow);
+}
+/* Protect section text, not the open interval around the course library. */
+.public-theme main > section.shell > :is(.eyebrow,h2) {
+  width: fit-content;
+  max-width: 100%;
+}
+.public-theme .hero { border: 0; }
+.public-theme .recovery { min-height: 60vh; display: grid; align-items: center; }
+.public-theme .hero > .shell { padding-block: 24px; }
+.public-theme .content-grid { padding-inline: 24px; width: min(1168px, calc(100% - 32px)); }
+.public-theme :is(.course-card,.lesson-card,.note,.prose pre,.prose table) { background: var(--panel); box-shadow: none; }
+.public-theme .course-card { min-height: 260px; }
+.public-theme :is(a.course-card,a.lesson-card):hover { border-color: var(--accent); }
+.public-theme :is(article.course-card,article.lesson-card):hover { transform: none; border-color: var(--line); }
+.public-theme :is(.prose p,.prose li,.prose th,.prose td) { color: var(--ink); }
+.public-theme .prose code { color: var(--accent); background: var(--brand-code); border-color: var(--line); }
+.public-theme .prose pre code { color: var(--ink); background: none; }
+/* Long inline expressions wrap as prose; preformatted examples keep scrolling. */
+.public-theme .prose :not(pre) > code { overflow-wrap: anywhere; }
+/* Markdown inside a chip is one text flow, not anonymous flex columns. */
+.public-theme .chip { display: block; max-width: 100%; overflow-wrap: anywhere; }
+.public-theme .prose th { background: var(--brand-tableHeader); }
+.public-theme .footer { background: transparent; }
+.public-theme .footer a { display: inline-flex; align-items: center; min-height: 44px; }
+.public-theme #main:focus { outline: none; }
+.public-theme #main:focus-visible h1 { outline: 2px solid var(--accent); outline-offset: 8px; }
+@media(max-width:760px) {
+  .public-theme .shell { width: calc(100% - 40px); }
+  .public-theme .hero { padding-block: 24px; }
+  .public-theme .content-grid { padding-inline: 12px; width: calc(100% - 16px); }
+  .public-theme h1 { font-size: clamp(40px, 10vw, 60px); }
+}
+@media(prefers-reduced-motion:reduce) { .motion-study-canvas { transition: none; } }
diff --git a/frontend/src/features/marketing/public/public-page.css b/frontend/src/features/marketing/public/public-page.css
new file mode 100644
index 00000000..e36bba59
--- /dev/null
+++ b/frontend/src/features/marketing/public/public-page.css
@@ -0,0 +1,358 @@
+@import "./theme.css";
+.public-page {
+  position: relative;
+  isolation: isolate;
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  color-scheme: dark;
+  color: var(--study-ink);
+  background: var(--study-bg);
+  overflow: clip;
+}
+.public-footer {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 40px;
+  background: transparent;
+}
+.public-footer a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  border-radius: 24px;
+}
+.public-footer {
+  border-top: 1px solid var(--study-line);
+  font-size: 12px;
+  color: var(--study-muted);
+}
+.public-footer nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 24px;
+}
+.public-page :is(a, button, input, textarea):focus-visible {
+  outline: 2px solid var(--study-accent);
+  outline-offset: 4px;
+}
+.public-page :is(a, button) {
+  -webkit-tap-highlight-color: transparent;
+}
+.public-page a:hover {
+  color: var(--study-accent);
+}
+.public-content {
+  width: min(1120px, calc(100% - 80px));
+  margin: auto;
+  padding-block: 72px;
+  flex: 1;
+  outline: none;
+}
+.public-route-loading .public-content {
+  display: grid;
+  place-items: center;
+}
+.public-route-loading [role="status"] {
+  background: var(--study-bg);
+  box-shadow: var(--brand-reading-shadow);
+}
+.public-content:focus-visible h1 {
+  outline: 2px solid var(--study-accent);
+  outline-offset: 8px;
+  border-radius: 2px;
+}
+.public-page h1 {
+  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
+  font-size: clamp(40px, 5vw, 68px);
+  font-weight: 500;
+  line-height: 1.08;
+  letter-spacing: -0.035em;
+  text-wrap: balance;
+}
+.public-eyebrow {
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--study-accent);
+}
+.public-skip {
+  position: absolute;
+  left: 16px;
+  top: 12px;
+  z-index: 10;
+  padding: 12px 18px;
+  transform: translateY(-180%);
+  background: var(--study-panel);
+  border-radius: 8px;
+}
+.public-skip:focus {
+  transform: none;
+}
+.public-auth .public-content {
+  width: min(420px, calc(100% - 40px));
+  margin: 0 auto;
+  flex: none;
+  padding-block: 48px;
+}
+.public-auth .public-footer { margin-top: auto; }
+.public-auth-intro {
+  text-align: center;
+}
+.public-auth-intro h1 {
+  font-size: clamp(36px, 5vw, 48px);
+}
+.public-auth-intro > p {
+  margin-top: 16px;
+  color: var(--study-muted);
+  font-size: 16px;
+  line-height: 1.65;
+  overflow-wrap: anywhere;
+}
+.public-auth-form {
+  position: relative;
+  min-width: 0;
+  padding: 24px 0;
+}
+/* Reading/control clusters, not the form's full bounding box, own protection. */
+.public-auth-intro > *,
+.public-auth-form > :not(form),
+.public-auth-form form > *,
+.public-footer > span,
+.public-footer nav > *,
+.public-reading-header > div:first-child > *,
+.public-reading-body section > h2,
+.public-reading-body section > div > :is(p, ul, ol),
+.public-reading-body > a,
+.public-recovery-copy > :is(h1, p, .public-eyebrow),
+.public-comparison-copy > :is(h1, p),
+.public-comparison-copy section > :is(h2, p, ul),
+.public-comparison-pair > div > *,
+.public-comparison-copy > div:last-child > p {
+  background-color: var(--study-bg);
+  box-shadow: var(--brand-reading-shadow);
+}
+.public-auth :is(.public-header, .public-footer) {
+  background: transparent;
+}
+.public-auth-still {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  overflow: hidden;
+  color: var(--study-accent);
+}
+.public-auth-still svg {
+  width: 100%;
+  height: 100%;
+}
+.public-auth[data-motion="ready"] .public-auth-still {
+  visibility: hidden;
+}
+.public-auth-form input:not([type="checkbox"]):not([type="radio"]) {
+  font-size: 16px;
+  min-height: var(--brand-control-height);
+  border-radius: var(--brand-control-radius);
+}
+.public-auth-form label {
+  font-size: 14px;
+}
+/* Equivalent instructions share a role across auth modes. Scope the recipe
+   to the public form: the signup component also serves workspace dialogs. */
+.public-auth-form :is(.auth-email-divider, .auth-supporting-copy) {
+  font-size: 14px;
+  line-height: 1.5;
+}
+.public-auth-form :is(.text-danger, [role="alert"]) {
+  font-size: 14px;
+  line-height: 1.5;
+}
+.public-auth-form button[type="submit"] {
+  background: var(--study-ink);
+  color: var(--study-bg);
+  border-radius: var(--brand-pill-radius);
+  min-height: var(--brand-control-height);
+}
+.public-auth-form button[type="submit"]:disabled {
+  opacity: 1;
+  background: color-mix(in srgb, var(--study-ink) 38%, var(--study-bg));
+  color: var(--study-bg);
+}
+.public-auth-footer {
+  border-top: 1px solid var(--study-line);
+  margin-top: 28px;
+  padding-top: 16px;
+  text-align: center;
+  color: var(--study-muted);
+  font-size: 14px;
+}
+.public-auth-footer :is(a, button) {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding-inline: 6px;
+  border-radius: 8px;
+}
+.public-reading-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  max-width: 760px;
+  gap: 48px;
+  align-items: center;
+}
+.public-reading-header h1 {
+  margin-top: 18px;
+}
+.public-reading-header .public-intro {
+  margin-top: 24px;
+  color: var(--study-muted);
+  font-size: 18px;
+  line-height: 1.8;
+}
+.public-reading-body {
+  position: relative;
+  max-width: 760px;
+  padding: 40px 32px;
+  margin: 32px -32px 0;
+  background: transparent;
+}
+.public-reading-body h2 {
+  font-family: "Fraunces", Georgia, serif;
+  font-weight: 500;
+}
+.public-action {
+  --public-action-fill: var(--study-ink);
+  --public-action-hover-fill: var(--study-accent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: 12px 24px;
+  border: 1px solid var(--public-action-fill);
+  border-radius: 32px;
+  background: var(--public-action-fill);
+  color: var(--study-bg);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.6;
+  text-align: center;
+  text-wrap: balance;
+  transition: background-color 160ms ease, border-color 160ms ease;
+}
+.public-action--accent {
+  --public-action-fill: var(--study-accent);
+  --public-action-hover-fill: var(--study-ink);
+}
+.public-page .public-action:hover {
+  color: var(--study-bg);
+  background: var(--public-action-hover-fill);
+  border-color: var(--public-action-hover-fill);
+}
+.public-recovery .public-content {
+  display: flex;
+  align-items: center;
+}
+.public-recovery-copy {
+  position: relative;
+  padding: 16px;
+  margin: -16px;
+  background: transparent;
+}
+.public-share .public-content {
+  max-width: 1000px;
+  min-width: 0;
+}
+.public-share-artifact {
+  min-width: 0;
+  padding: 24px;
+  margin: -24px;
+  background: var(--study-bg);
+  overflow-wrap: anywhere;
+}
+.public-share h1 {
+  font-size: clamp(36px, 5vw, 60px);
+}
+.share-recovery {
+  max-width: 760px;
+  margin-block: 48px;
+}
+.public-comparison .public-content {
+  max-width: 920px;
+}
+.public-comparison-copy {
+  padding: 0 24px;
+  margin-inline: -24px;
+  background: transparent;
+  line-height: 1.85;
+}
+.public-comparison-copy .public-intro {
+  max-width: 740px;
+  color: var(--study-muted);
+  font-size: 18px;
+}
+.public-comparison-copy h2 {
+  font-family: "Fraunces", Georgia, serif;
+  font-size: clamp(24px, 3vw, 30px);
+  line-height: 1.35;
+  font-weight: 500;
+}
+.public-comparison-rows {
+  margin-top: 64px;
+}
+.public-comparison-row {
+  padding-block: 32px;
+  border-top: 1px solid var(--study-line);
+}
+.public-comparison-pair {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  margin-top: 24px;
+}
+.public-comparison-concession {
+  margin-block: 32px;
+  padding-block: 32px;
+  border-block: 1px solid var(--study-line);
+}
+@media (max-width: 760px) {
+  .public-comparison-copy {
+    margin-inline: -12px;
+    padding-inline: 12px;
+  }
+  .public-comparison-pair {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+  .public-footer {
+    padding: 14px 20px;
+  }
+  .public-content {
+    width: calc(100% - 40px);
+    padding-block: 36px;
+  }
+  .public-auth .public-content {
+    padding-block: 36px;
+  }
+  .public-reading-header {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  .public-reading-body {
+    margin: 16px -12px 0;
+    padding: 16px 12px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .public-page *,
+  .public-page *::before,
+  .public-page *::after {
+    scroll-behavior: auto !important;
+    transition: none !important;
+  }
+}
diff --git a/frontend/src/features/marketing/public/publicBootstrap.test.ts b/frontend/src/features/marketing/public/publicBootstrap.test.ts
new file mode 100644
index 00000000..30a2ea4f
--- /dev/null
+++ b/frontend/src/features/marketing/public/publicBootstrap.test.ts
@@ -0,0 +1,84 @@
+import { describe, expect, it } from "vitest";
+import {
+  shouldDeferAuthHydration,
+  shouldUsePublicApp,
+} from "./publicBootstrap";
+
+describe("public route bootstrap", () => {
+  it.each([
+    "/",
+    "/why-not-chatgpt",
+    "/privacy",
+    "/terms",
+    "/support",
+    "/login",
+    "/signup",
+    "/reset-password",
+    "/auth/callback",
+    "/s/qd99cvtcbwdn",
+    "/try/lesson/python-fundamentals/hello-world",
+  ])("uses the lightweight public route tree for direct entry %s", (path) => {
+    expect(shouldUsePublicApp(path)).toBe(true);
+  });
+
+  it.each([
+    "/login/",
+    "/Signup",
+    "/AUTH/CALLBACK/",
+    "/%70rivacy",
+    "/%53/qd99cvtcbwdn",
+    "/%54RY/LESSON/python-fundamentals/hello-world/",
+    "/S/qd99cvtcbwdn/",
+    "/TRY/LESSON/python-fundamentals/hello-world/",
+  ])(
+    "matches React Router's casing and trailing-slash behavior for %s",
+    (path) => {
+      expect(shouldUsePublicApp(path)).toBe(true);
+    },
+  );
+
+  it.each([
+    "/editor",
+    "/start",
+    "/learn/course/python-fundamentals",
+    "/admin/project",
+    "/this-route-does-not-exist",
+  ])("keeps the full route tree for %s", (path) => {
+    expect(shouldUsePublicApp(path)).toBe(false);
+  });
+
+  it("leaves malformed percent escapes to the full router without throwing", () => {
+    expect(shouldUsePublicApp("/%E0%A4%A")).toBe(false);
+    expect(shouldDeferAuthHydration("/%E0%A4%A")).toBe(false);
+  });
+
+  it("defers auth only on acquisition and trust entries", () => {
+    for (const path of [
+      "/",
+      "/why-not-chatgpt",
+      "/privacy",
+      "/terms",
+      "/support",
+    ]) {
+      expect(shouldDeferAuthHydration(path), path).toBe(true);
+    }
+
+    for (const path of [
+      "/login",
+      "/signup",
+      "/reset-password",
+      "/auth/callback",
+      "/s/qd99cvtcbwdn",
+      "/try/lesson/python-fundamentals/hello-world",
+    ]) {
+      expect(shouldDeferAuthHydration(path), path).toBe(false);
+    }
+  });
+
+  it.each(["/PRIVACY", "/terms/", "/Support/", "/%70rivacy"])(
+    "normalizes deferred auth path %s",
+    (path) => {
+      expect(shouldDeferAuthHydration(path)).toBe(true);
+    },
+  );
+});
diff --git a/frontend/src/features/marketing/public/publicBootstrap.ts b/frontend/src/features/marketing/public/publicBootstrap.ts
new file mode 100644
index 00000000..217ebac9
--- /dev/null
+++ b/frontend/src/features/marketing/public/publicBootstrap.ts
@@ -0,0 +1,54 @@
+const PUBLIC_APP_EXACT_PATHS = new Set([
+  "/",
+  "/why-not-chatgpt",
+  "/privacy",
+  "/terms",
+  "/support",
+  "/login",
+  "/signup",
+  "/reset-password",
+  "/auth/callback",
+]);
+
+const PUBLIC_APP_PREFIXES = ["/s/", "/try/lesson/"];
+
+const DEFERRED_AUTH_PATHS = new Set([
+  "/",
+  "/why-not-chatgpt",
+  "/privacy",
+  "/terms",
+  "/support",
+]);
+
+function normalizePublicPathname(pathname: string): string {
+  let decodedPathname = pathname;
+  try {
+    decodedPathname = decodeURI(pathname);
+  } catch {
+    // Match the pre-paint classifier: malformed escapes stay router-owned.
+  }
+  const lowerPathname = decodedPathname.toLowerCase();
+  if (lowerPathname === "/") return lowerPathname;
+  return lowerPathname.replace(/\/+$/, "");
+}
+
+/**
+ * Direct entries that can paint through the lightweight public route tree.
+ *
+ * The anonymous lesson deliberately uses the workspace visual theme, but it is
+ * still a logged-out direct entry and does not need the authenticated app shell.
+ * App.tsx retains the same public routes for SPA navigation after a workspace
+ * entry has already selected the full route tree.
+ */
+export function shouldUsePublicApp(pathname: string): boolean {
+  const normalizedPathname = normalizePublicPathname(pathname);
+  if (PUBLIC_APP_EXACT_PATHS.has(normalizedPathname)) return true;
+  return PUBLIC_APP_PREFIXES.some((prefix) =>
+    normalizedPathname.startsWith(prefix),
+  );
+}
+
+/** Acquisition and trust pages can defer session hydration until entry intent. */
+export function shouldDeferAuthHydration(pathname: string): boolean {
+  return DEFERRED_AUTH_PATHS.has(normalizePublicPathname(pathname));
+}
diff --git a/frontend/src/features/marketing/public/publicTheme.test.ts b/frontend/src/features/marketing/public/publicTheme.test.ts
new file mode 100644
index 00000000..d058535d
--- /dev/null
+++ b/frontend/src/features/marketing/public/publicTheme.test.ts
@@ -0,0 +1,103 @@
+import { readFileSync } from "node:fs";
+import { runInNewContext } from "node:vm";
+import { describe, expect, it } from "vitest";
+import { renderDesignTokensHtml } from "../../../design-system/tokens";
+
+const html = renderDesignTokensHtml(readFileSync(
+  new URL("../../../../index.html", import.meta.url),
+  "utf8",
+));
+const bootstrap = html.match(
+  /<script id="public-theme-bootstrap">([\s\S]*?)<\/script>/,
+)![1];
+
+function boot(pathname: string) {
+  const attributes = new Map<string, string>([["data-theme", "light"]]);
+  const listeners = new Map<string, () => void>();
+  const location = { pathname };
+  const chromeTheme = { content: "#0f172a" };
+  runInNewContext(bootstrap, {
+    window: {
+      location,
+      addEventListener: (event: string, fn: () => void) =>
+        listeners.set(event, fn),
+    },
+    document: {
+      querySelector: () => chromeTheme,
+      documentElement: {
+        toggleAttribute: (key: string, on: boolean) =>
+          on ? attributes.set(key, "") : attributes.delete(key),
+      },
+    },
+  });
+  return { attributes, location, listeners, chromeTheme };
+}
+
+describe("public pre-paint theme", () => {
+  it.each([
+    "/",
+    "/login",
+    "/login/",
+    "/signup",
+    "/reset-password",
+    "/auth/callback",
+    "/privacy",
+    "/privacy/",
+    "/Privacy",
+    "/%70rivacy",
+    "/terms",
+    "/support",
+    "/why-not-chatgpt",
+    "/s/example",
+    "/learn-to-code",
+    "/learn-to-code/python-fundamentals",
+    "/lessons/python-fundamentals/hello-world/",
+    "/this-route-does-not-exist",
+    "/login-extra",
+    "/%E0%A4%A",
+  ])("paints %s before the app and preserves the saved theme", (path) => {
+    const { attributes, chromeTheme } = boot(path);
+    expect(attributes.has("data-public-theme")).toBe(true);
+    expect(attributes.get("data-theme")).toBe("light");
+    expect(chromeTheme.content).toBe("#050709");
+  });
+  it.each([
+    "/start",
+    "/Start/",
+    "/welcome",
+    "/editor",
+    "/learn",
+    "/learn/saved",
+    "/admin/project",
+    "/admin",
+    "/admin/eval-quality",
+    "/dev/content",
+    "/learn/course/python-fundamentals",
+    "/learn/course/python-fundamentals/lesson/hello-world",
+    "/try/lesson/python-fundamentals/hello-world",
+  ])("does not recolor workspace route %s", (path) => {
+    expect(boot(path).attributes.has("data-public-theme")).toBe(false);
+  });
+  it.each(["codetutor:route-change", "popstate"])(
+    "restores workspace preference on %s and can reenter public pages",
+    (event) => {
+      const { attributes, location, listeners, chromeTheme } = boot("/login");
+      location.pathname = "/editor";
+      listeners.get(event)!();
+      expect(attributes.has("data-public-theme")).toBe(false);
+      expect(attributes.get("data-theme")).toBe("light");
+      expect(chromeTheme.content).toBe("#0f172a");
+      location.pathname = "/privacy";
+      listeners.get(event)!();
+      expect(attributes.has("data-public-theme")).toBe(true);
+      expect(chromeTheme.content).toBe("#050709");
+    },
+  );
+  it("runs inline in the head before React without a separately cached script", () => {
+    expect(bootstrap).toBeTruthy();
+    expect(html.indexOf('id="public-theme-bootstrap"')).toBeLessThan(
+      html.indexOf("</head>"),
+    );
+    expect(html).not.toContain('src="/public-theme.js"');
+  });
+});
diff --git a/frontend/src/features/marketing/public/theme.css b/frontend/src/features/marketing/public/theme.css
new file mode 100644
index 00000000..346d6d9e
--- /dev/null
+++ b/frontend/src/features/marketing/public/theme.css
@@ -0,0 +1,96 @@
+/* Values live in design-system/tokens.ts, inlined by both HTML entry paths.
+   This sheet owns reusable public components/materials, not a second palette. */
+
+/* Display copy protects letterforms rather than hiding a rectangular panel.
+   Not for dense reading, controls, code or tables: those keep solid backing. */
+.brand-display-copy {
+  position: relative;
+  isolation: isolate;
+  text-shadow: var(--brand-display-shadow);
+}
+.brand-display-copy::before {
+  content: "";
+  position: absolute;
+  inset: -16px -24px;
+  z-index: -1;
+  pointer-events: none;
+  background: var(--brand-display-backing);
+}
+.brand-display-copy > :is(h1, h2, p) {
+  background: transparent;
+  box-shadow: none;
+}
+
+/* One navigation geometry for the SPA and authored static documents. */
+.brand-header {
+  box-sizing: border-box;
+  position: relative;
+  z-index: 5;
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 20px;
+  width: 100%;
+  min-height: var(--brand-header-height);
+  margin: 0;
+  padding: 16px 40px;
+  border-bottom: 1px solid var(--study-line);
+  background: transparent;
+}
+.brand-header > a:first-child {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--brand-target-min);
+  flex: none;
+  font: 600 20px/1 var(--brand-font-ui);
+  letter-spacing: -0.025em;
+  text-decoration: none;
+  color: var(--study-ink);
+  background: var(--study-bg);
+  box-shadow: var(--brand-reading-shadow);
+  border-radius: 4px;
+}
+.brand-header nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+.brand-header .brand-header-action {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: var(--brand-target-min);
+  padding: 8px 14px;
+  border: 1px solid var(--study-line);
+  border-radius: var(--brand-pill-radius);
+  font: 500 13px/20px var(--brand-font-ui);
+  text-decoration: none;
+  color: var(--study-ink);
+  background: var(--study-panel);
+}
+.brand-header-short { display: none; }
+.public-flow-still {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  overflow: hidden;
+  color: var(--study-accent);
+}
+.public-flow-still svg { width: 100%; height: 100%; }
+[data-motion="ready"] .public-flow-still { visibility: hidden; }
+@media (max-width: 900px) {
+  .brand-header { padding-inline: 24px; }
+}
+@media (max-width: 640px) {
+  .brand-header { padding: 14px 20px; gap: 8px; }
+  .brand-header .brand-header-long { display: none; }
+  .brand-header-short { display: inline; }
+  .brand-header .brand-header-action { padding-inline: 12px; }
+  .brand-header .nav-links .quiet-link { display: none; }
+}
diff --git a/frontend/src/features/marketing/public/world.css b/frontend/src/features/marketing/public/world.css
new file mode 100644
index 00000000..3e59d569
--- /dev/null
+++ b/frontend/src/features/marketing/public/world.css
@@ -0,0 +1,18 @@
+.public-motion-world { display: contents; }
+.public-motion-world > .motion-study-canvas {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+/* Existing local content protection remains above the shared world. */
+.public-motion-world .motion-study,
+.public-motion-world .public-page {
+  background: transparent;
+}
+html:not([data-public-theme]) .public-motion-world > .motion-study-canvas {
+  display: none;
+}
+html[data-public-theme] .public-motion-world .route-loading {
+  background: transparent;
+}
diff --git a/frontend/src/features/marketing/study/MarketingHomepage.tsx b/frontend/src/features/marketing/study/MarketingHomepage.tsx
index 30abbb3b..57a00f87 100644
--- a/frontend/src/features/marketing/study/MarketingHomepage.tsx
+++ b/frontend/src/features/marketing/study/MarketingHomepage.tsx
@@ -1,18 +1,15 @@
 import {
-  Component,
-  lazy,
-  Suspense,
   useCallback,
   useEffect,
   useRef,
   useState,
-  type ReactNode,
 } from "react";
 import { Link } from "react-router-dom";
 import { Wordmark } from "../../../components/Wordmark";
 import { FIRST_LESSON_CONTRACT } from "../../../productContract";
 import { pickHeroCopy } from "../heroCopy";
 import { useMarketingAuth } from "../useMarketingAuth";
+import { usePublicMotionScene } from "../public/PublicMotionWorld";
 import {
   createShape,
   particleIdentity,
@@ -21,28 +18,6 @@ import {
 } from "./geometry";
 import "./study.css";
 
-const ParticleField = lazy(() => import("./ParticleField"));
-class MotionBoundary extends Component<
-  { children: ReactNode },
-  { failed: boolean }
-> {
-  state = { failed: false };
-  static getDerivedStateFromError() {
-    return { failed: true };
-  }
-  render() {
-    return this.state.failed ? (
-      <p className="study-motion-notice" role="status">
-        Motion could not load. The walkthrough is still available.{" "}
-        <button type="button" onClick={() => location.reload()}>
-          Reload page
-        </button>
-      </p>
-    ) : (
-      this.props.children
-    );
-  }
-}
 const stages = [
   {
     name: "Read",
@@ -132,7 +107,8 @@ export default function MarketingHomepage() {
     },
     [handOffArtworkFocus],
   );
-  const [attempt, setAttempt] = useState(0);
+  const world = usePublicMotionScene(root, "story");
+  useEffect(() => handleStatus(world.status), [world.status, handleStatus]);
   const [stage, setStage] = useState(0);
   const { isLoggedIn } = useMarketingAuth();
   const copy = pickHeroCopy();
@@ -152,31 +128,18 @@ export default function MarketingHomepage() {
   return (
     <main
       ref={setRoot}
-      className={`motion-study ${animate && status === "ready" ? "study-ready" : ""}`}
+      className={`public-surface motion-study ${animate && status === "ready" ? "study-ready" : ""}`}
       data-marketing="glyph-homepage"
     >
       <a className="study-skip" href="#study-demo">
         Skip to the product walkthrough
       </a>
-      {root && animate && (
-        <MotionBoundary>
-          <Suspense fallback={null}>
-            <ParticleField
-              key={attempt}
-              root={root}
-              light={false}
-              count={420}
-              onStatus={handleStatus}
-            />
-          </Suspense>
-        </MotionBoundary>
-      )}
-      <header className="study-nav">
+      <header className="brand-header study-nav">
         <Link to="/" aria-label="CodeTutor AI home">
           <Wordmark size="md" />
         </Link>
         <nav aria-label="Main navigation">
-          <Link to={isLoggedIn ? "/start" : "/login"}>
+          <Link className="brand-header-action" to={isLoggedIn ? "/start" : "/login"}>
             {isLoggedIn ? "Dashboard" : "Sign in"}{" "}
             <span aria-hidden="true">↗</span>
           </Link>
@@ -184,16 +147,19 @@ export default function MarketingHomepage() {
       </header>
       {animate && status === "unavailable" && (
         <p className="study-motion-notice" role="status">
-          Motion is unavailable. You can still explore the walkthrough.{" "}
+          {world.loadFailed
+            ? "Motion could not load. The walkthrough is still available."
+            : "Motion is unavailable. You can still explore the walkthrough."}{" "}
           <button
             type="button"
             onClick={() => {
+              if (world.loadFailed) { location.reload(); return; }
               headline.current?.focus();
               setStatus("loading");
-              setAttempt((v) => v + 1);
+              world.retry();
             }}
           >
-            Retry motion
+            {world.loadFailed ? "Reload page" : "Retry motion"}
           </button>
         </p>
       )}
@@ -248,7 +214,7 @@ export default function MarketingHomepage() {
         aria-labelledby="study-demo-title"
       >
         <div className="study-chapter-top">
-          <div className="study-solid">
+          <div className="study-solid brand-display-copy">
             <p className="study-eyebrow">01 — The learning loop</p>
             <h2 id="study-demo-title" className="font-display">
               From “why?”
diff --git a/frontend/src/features/marketing/study/ParticleField.tsx b/frontend/src/features/marketing/study/ParticleField.tsx
index 5cb4f5f1..2170895c 100644
--- a/frontend/src/features/marketing/study/ParticleField.tsx
+++ b/frontend/src/features/marketing/study/ParticleField.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 import * as THREE from "three";
 import {
   createScatter,
@@ -16,11 +16,18 @@ import {
   curveCarry,
   type PointerStroke,
 } from "./interaction";
+import { authContour, readingBounds, type AuthBounds } from "../public/authComposition";
 
+export interface ParticleScene {
+  root: HTMLElement;
+  composition: "story" | "ambient" | "auth";
+}
 interface Props {
   root: HTMLElement;
   light: boolean;
   count: number;
+  composition?: "story" | "ambient" | "auth";
+  scene?: ParticleScene | null;
   onStatus: (status: "loading" | "ready" | "unavailable") => void;
 }
 
@@ -30,12 +37,14 @@ const vertexShader = `
   attribute vec3 askShape;
   attribute vec3 checkShape;
   attribute vec3 scatter;
+  attribute vec3 authShape;
   attribute float seed;
   attribute vec2 identity;
   attribute float background;
   attribute vec2 displacement;
   uniform vec4 weights;
   uniform float spread;
+  uniform float authMix;
   uniform vec2 viewport;
   uniform float clock;
   uniform float scale;
@@ -52,6 +61,7 @@ const vertexShader = `
   varying float ambientGlyph;
   void main() {
     vec3 p = position * weights.x + readShape * weights.y + askShape * weights.z + checkShape * weights.w;
+    p = mix(p, authShape, authMix);
     float yaw = sin(clock * .16) * .035 + tilt.x;
     float pitch = tilt.y;
     p = vec3(p.x*cos(yaw)+p.z*sin(yaw), p.y, -p.x*sin(yaw)+p.z*cos(yaw));
@@ -111,8 +121,21 @@ const fragmentShader = `
   }
 `;
 
-export default function ParticleField({ root, light, count, onStatus }: Props) {
+export default function ParticleField({
+  root,
+  light,
+  count,
+  onStatus,
+  composition: initialComposition = "story",
+  scene: sceneDescriptor,
+}: Props) {
   const host = useRef<HTMLDivElement>(null);
+  const descriptor = useRef(sceneDescriptor);
+  const changeScene = useRef<((scene: ParticleScene | null | undefined) => void) | null>(null);
+  useLayoutEffect(() => {
+    descriptor.current = sceneDescriptor;
+    changeScene.current?.(sceneDescriptor);
+  }, [sceneDescriptor]);
   useEffect(() => {
     const element = host.current;
     if (!element) return;
@@ -129,6 +152,8 @@ export default function ParticleField({ root, light, count, onStatus }: Props) {
       return;
     }
     element.appendChild(renderer.domElement);
+    let composition = descriptor.current?.composition ?? initialComposition;
+    let sceneRoot = descriptor.current === undefined ? root : descriptor.current?.root ?? null;
     const scene = new THREE.Scene();
     const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 2000);
     camera.position.z = 1000;
@@ -164,6 +189,9 @@ export default function ParticleField({ root, light, count, onStatus }: Props) {
       scattered[i * 3 + 1] = particleSeed(i * 3 + 1) * 2.4 - 1.2;
     }
     geometry.setAttribute("scatter", new THREE.BufferAttribute(scattered, 3));
+    const authPoints = new Float32Array(total * 3);
+    const authTarget = new Float32Array(total * 3);
+    geometry.setAttribute("authShape", new THREE.BufferAttribute(authPoints, 3).setUsage(THREE.DynamicDrawUsage));
     geometry.setAttribute(
       "seed",
       new THREE.BufferAttribute(
@@ -225,7 +253,8 @@ export default function ParticleField({ root, light, count, onStatus }: Props) {
       glyphAtlas: { value: atlas },
       highlight: { value: light ? 0 : 1 },
       weights: { value: new THREE.Vector4(1, 0, 0, 0) },
-      spread: { value: 1 },
+      spread: { value: composition === "auth" || composition === "ambient" ? 0 : 1 },
+      authMix: { value: composition === "auth" || composition === "ambient" ? 1 : 0 },
       viewport: { value: new THREE.Vector2() },
       clock: { value: 0 },
       scale: { value: 180 },
@@ -269,6 +298,21 @@ export default function ParticleField({ root, light, count, onStatus }: Props) {
       element: HTMLElement;
     } | null = null;
     let anchors: HTMLElement[] = [];
+    let authCenter = { x: 0, pageY: 0 };
+    let authContent: HTMLElement | null = null;
+    let authBounds: AuthBounds | null = null;
+    const authScratch = new Float32Array(count * 3);
+    const measureAuth = () => {
+      if (!authContent || disposed) return;
+      const measured = authContent.getBoundingClientRect();
+      const rect = composition === "ambient" ? readingBounds(width, height, measured.width) : measured;
+      authBounds = rect;
+      const contour = authContour(count, width, rect, elapsed, authScratch);
+      for (let i = 0; i < contour.length; i++) authTarget[i] = contour[i]! / 200;
+      if (!ready) authPoints.set(authTarget);
+      authCenter = { x: rect.left + rect.width / 2 - width / 2,
+        pageY: rect.top + scrollY + rect.height / 2 };
+    };
     const resize = () => {
       width = innerWidth;
       height = innerHeight;
@@ -284,8 +328,9 @@ export default function ParticleField({ root, light, count, onStatus }: Props) {
       camera.bottom = -height / 2;
       camera.updateProjectionMatrix();
       anchors = Array.from(
-        root.querySelectorAll<HTMLElement>("[data-particle-shape]"),
+        sceneRoot?.querySelectorAll<HTMLElement>("[data-particle-shape]") ?? [],
       );
+      measureAuth();
     };
     const move = (event: PointerEvent) => {
       pointerPosition.set(
@@ -293,7 +338,9 @@ export default function ParticleField({ root, light, count, onStatus }: Props) {
         height / 2 - event.clientY,
       );
       const target = event.target instanceof Element ? event.target : null;
-      const control = target?.closest("a,button,input,select,pre");
+      const control = target?.closest(
+        "a,button,input,select,textarea,pre,[contenteditable],form",
+      );
       pointerTarget =
         event.pointerType === "mouse" &&
         (!control || control.hasAttribute("data-field-interaction"))
@@ -389,7 +436,7 @@ export default function ParticleField({ root, light, count, onStatus }: Props) {
       elapsed += dt;
       uniforms.clock.value = elapsed;
       uniforms.scrollOffset.value = scrollY;
-      const states = anchors.map((anchor) => {
+      const states = anchors.filter(anchor => anchor.isConnected).map((anchor) => {
         const rect = anchor.getBoundingClientRect();
         return {
           shape: (anchor.dataset.particleShape || "code") as Shape,
@@ -401,13 +448,24 @@ export default function ParticleField({ root, light, count, onStatus }: Props) {
         };
       });
       const [hero, demo, closing] = states;
-      const demoSurface = root
-        .querySelector(".study-demo-surface")
+      const demoSurface = sceneRoot
+        ?.querySelector(".study-demo-surface")
         ?.getBoundingClientRect();
-      const heroCopy = root
-        .querySelector(".study-hero-copy")
+      const heroCopy = sceneRoot
+        ?.querySelector(".study-hero-copy")
         ?.getBoundingClientRect();
-      if (hero && demo && closing && demoSurface && heroCopy) {
+      if (sceneRoot?.isConnected && (composition === "auth" || composition === "ambient")) {
+        // Same glyph identities and inertial interaction, arranged around the
+        // centered task. No full-height mask or permanently dispersed edge dust.
+        const blend = 1 - Math.exp(-dt * 3);
+        uniforms.spread.value += (0 - uniforms.spread.value) * blend;
+        uniforms.scale.value += (200 - uniforms.scale.value) * blend;
+        uniforms.weights.value.lerp(new THREE.Vector4(1, 0, 0, 0), blend);
+        uniforms.center.value.lerp(new THREE.Vector2(authCenter.x,
+          composition === "ambient" ? 0 : height / 2 - authCenter.pageY + scrollY), blend);
+        uniforms.opacity.value += (0.9 - uniforms.opacity.value) * blend;
+      } else if (hero && demo && closing && demoSurface && heroCopy) {
+        uniforms.opacity.value += (1 - uniforms.opacity.value) * (1 - Math.exp(-dt * 3));
         // Continuous keyframes, not nearest-anchor selection. Between chapters the
         // same particles remain visible in a quiet edge field around the content.
         // Every sculpture is central. The field retreats to the margins only
@@ -476,6 +534,17 @@ export default function ParticleField({ root, light, count, onStatus }: Props) {
         uniforms.scale.value +=
           (a.size + (b.size - a.size) * p - uniforms.scale.value) * blend;
       }
+      if (sceneRoot?.isConnected) {
+        uniforms.authMix.value += ((composition === "auth" || composition === "ambient" ? 1 : 0) - uniforms.authMix.value) * (1 - Math.exp(-dt * 3));
+      }
+      if (authBounds && (composition === "auth" || composition === "ambient")) {
+        authContour(count, width, authBounds, elapsed, authScratch);
+        for (let i = 0; i < count * 3; i++) authTarget[i] = authScratch[i]! / 200;
+      }
+      for (let i = 0; i < count * 3; i++) {
+        authPoints[i] += (authTarget[i]! - authPoints[i]!) * (1 - Math.exp(-dt * 3));
+      }
+      geometry.getAttribute("authShape").needsUpdate = true;
       uniforms.pointerActive.value +=
         (pointerTarget - uniforms.pointerActive.value) * Math.min(1, dt * 8);
       uniforms.pointer.value.lerp(pointerPosition, 1 - Math.exp(-dt * 6));
@@ -507,11 +576,15 @@ export default function ParticleField({ root, light, count, onStatus }: Props) {
           shapes.read[j + 1]! * weights.y +
           shapes.ask[j + 1]! * weights.z +
           shapes.check[j + 1]! * weights.w;
-        const z =
+        let z =
           shapes.code[j + 2]! * weights.x +
           shapes.read[j + 2]! * weights.y +
           shapes.ask[j + 2]! * weights.z +
           shapes.check[j + 2]! * weights.w;
+        const authBlend = uniforms.authMix.value;
+        x += (authPoints[j]! - x) * authBlend;
+        y += (authPoints[j + 1]! - y) * authBlend;
+        z += (authPoints[j + 2]! - z) * authBlend;
         const rotatedZ = -x * Math.sin(yaw) + z * Math.cos(yaw);
         x = x * Math.cos(yaw) + z * Math.sin(yaw);
         y = y * Math.cos(pitch) - rotatedZ * Math.sin(pitch);
@@ -582,7 +655,23 @@ export default function ParticleField({ root, light, count, onStatus }: Props) {
       resize();
       visibility();
     };
-    resize();
+    const authObserver = new ResizeObserver(measureAuth);
+    const selectScene = (next: ParticleScene | null | undefined) => {
+      authObserver.disconnect();
+      sceneRoot = next === undefined ? root : next?.root ?? null;
+      composition = next?.composition ?? initialComposition;
+      authContent = composition === "auth" || composition === "ambient"
+        ? sceneRoot?.querySelector<HTMLElement>(".public-content, main") ?? sceneRoot : null;
+      authBounds = null;
+      if (authContent && sceneRoot) {
+        authObserver.observe(authContent);
+        authObserver.observe(sceneRoot);
+      }
+      resize();
+    };
+    changeScene.current = selectScene;
+    selectScene(descriptor.current);
+    void document.fonts.ready.then(() => { if (!disposed) resize(); });
     frame = requestAnimationFrame(render);
     window.addEventListener("resize", resize);
     root.addEventListener("pointermove", move, { passive: true });
@@ -597,6 +686,8 @@ export default function ParticleField({ root, light, count, onStatus }: Props) {
     renderer.domElement.addEventListener("webglcontextrestored", restored);
     return () => {
       disposed = true;
+      changeScene.current = null;
+      authObserver?.disconnect();
       cancelAnimationFrame(frame);
       window.removeEventListener("resize", resize);
       root.removeEventListener("pointermove", move);
@@ -615,6 +706,6 @@ export default function ParticleField({ root, light, count, onStatus }: Props) {
       renderer.dispose();
       renderer.domElement.remove();
     };
-  }, [root, light, count, onStatus]);
+  }, [root, light, count, onStatus, initialComposition]);
   return <div ref={host} className="motion-study-canvas" aria-hidden="true" />;
 }
diff --git a/frontend/src/features/marketing/study/study.css b/frontend/src/features/marketing/study/study.css
index 77a76d80..200ed9bc 100644
--- a/frontend/src/features/marketing/study/study.css
+++ b/frontend/src/features/marketing/study/study.css
@@ -1,30 +1,12 @@
+@import "../public/theme.css";
+
 .motion-study {
-  --color-bg: 5 7 9;
-  --color-ink: 236 239 241;
-  --color-muted: 160 168 177;
-  --study-bg: #050709;
-  --study-ink: #eceff1;
-  --study-muted: #a0a8b1;
-  --study-line: #252a30;
-  --study-panel: #101316;
-  --study-accent: #a0d9ed;
   position: relative;
   isolation: isolate;
   background: var(--study-bg);
   color: var(--study-ink);
   overflow: clip;
 }
-.motion-study.study-light {
-  --color-bg: 248 250 252;
-  --color-ink: 15 23 42;
-  --color-muted: 71 85 105;
-  --study-bg: #f8fafc;
-  --study-ink: #0f172a;
-  --study-muted: #475569;
-  --study-line: #cbd5e1;
-  --study-panel: #fff;
-  --study-accent: #086b91;
-}
 .motion-study a,
 .motion-study button,
 .motion-study select {
@@ -59,47 +41,26 @@
 }
 .study-solid {
   position: relative;
-  background: var(--study-bg);
   z-index: 2;
 }
+/* Layout remains open to the field. Only the actual reading clusters paint;
+   margins between them are not a continuous opaque rectangle. */
+.study-solid:not(.brand-display-copy) > :is(h1, h2, p, .study-text-link),
+.study-demo-explanation > *,
+.study-footer > :first-child,
+.study-footer nav > *,
+.study-nav > a,
+.study-art-caption > span {
+  background: var(--study-bg);
+  box-shadow: var(--brand-reading-shadow);
+  border-radius: 4px;
+}
 .motion-study-canvas {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 0;
 }
-.study-nav {
-  position: relative;
-  z-index: 5;
-  min-height: 88px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 20px;
-  padding: 16px 40px;
-  background: var(--study-bg);
-  border-bottom: 1px solid var(--study-line);
-}
-.study-nav nav {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  font-size: 13px;
-}
-.study-nav nav :is(a, button) {
-  display: inline-flex;
-  align-items: center;
-  min-height: 44px;
-  padding: 8px 14px;
-  border-radius: 24px;
-}
-.study-nav nav a {
-  background: var(--study-panel);
-  border: 1px solid var(--study-line);
-}
-.study-nav button:hover {
-  background: var(--study-panel);
-}
 .study-skip {
   position: absolute;
   top: 10px;
@@ -240,7 +201,6 @@
   font-size: 11px;
   letter-spacing: 0.02em;
   color: var(--study-muted);
-  background: var(--study-bg);
 }
 .study-walkthrough {
   padding-top: 88px;
@@ -272,6 +232,12 @@
   z-index: 2;
   border-top: 1px solid var(--study-line);
   border-bottom: 1px solid var(--study-line);
+  background: transparent;
+}
+/* The interactive artifact stays solid. Its explanatory footer belongs to the
+   surrounding page, with local reading protection rather than a full slab. */
+.study-demo-nav,
+.study-demo-body {
   background: var(--study-bg);
 }
 .study-demo-nav {
@@ -451,9 +417,6 @@
   .study-wrap {
     width: calc(100% - 48px);
   }
-  .study-nav {
-    padding-inline: 24px;
-  }
   .study-hero-art {
     height: 480px;
   }
@@ -476,22 +439,15 @@
   }
 }
 @media (max-width: 640px) {
+  .motion-study {
+    /* Scroll is the story clock. Give each mobile sculpture a real interval
+       to assemble before the next reading cluster asks it to disperse.
+       Stable viewport units avoid retiming on browser-toolbar expansion. */
+    --study-phone-art-space: clamp(320px, 64svh, 600px);
+  }
   .study-wrap {
     width: calc(100% - 40px);
   }
-  .study-nav {
-    padding: 14px 20px;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-  .study-nav nav {
-    gap: 0;
-    flex-wrap: wrap;
-  }
-  .study-nav nav :is(a, button) {
-    padding: 8px 10px;
-    font-size: 11px;
-  }
   .study-hero {
     display: flex;
     flex-direction: column;
@@ -506,7 +462,7 @@
     font-size: 16px;
   }
   .study-hero-art {
-    height: 210px;
+    height: clamp(380px, 78svh, 740px);
   }
   .study-art-caption {
     bottom: -5px;
@@ -515,15 +471,15 @@
     padding-top: 80px;
   }
   .study-chapter-top {
-    gap: 8px;
+    gap: 32px;
     padding-bottom: 32px;
   }
   .motion-study h2 {
     font-size: 40px;
   }
   .study-chapter-art {
-    width: 95px;
-    height: 110px;
+    width: min(440px, 100%);
+    height: var(--study-phone-art-space);
     flex-shrink: 0;
     margin: 0;
   }
@@ -560,7 +516,7 @@
     align-items: stretch;
   }
   .study-closing-art {
-    height: 180px;
+    height: var(--study-phone-art-space);
   }
   .study-footer nav {
     gap: 18px;
diff --git a/frontend/src/features/share/components/CodeTypewriter.tsx b/frontend/src/features/share/components/CodeTypewriter.tsx
index b3647180..afa8396c 100644
--- a/frontend/src/features/share/components/CodeTypewriter.tsx
+++ b/frontend/src/features/share/components/CodeTypewriter.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useRef, useState } from "react";
-import { useReducedMotion } from "framer-motion";
+import { codeRevealTimeline, revealedCodeLength } from "./codeRevealTiming";
 
 // Phase 21C: 4-color tokenizer + typewriter for the SharePage. Mirrors
 // backend/src/services/share/og/OgArtifact.tsx so the page reads as the
-// same artifact the OG card promised — same colors, same line breaks,
-// same truncation behavior.
+// same artifact the OG card promised — same syntax roles, line breaks and
+// truncation. Browser comments consume the readable public faint role rather
+// than the fixed image palette; export artwork keeps its separate owner.
 //
 // Pacing — logarithmic deceleration, not uniform. Uniform 18ms/char
 // drags. Real film typesetting decelerates: the eye scans the first
@@ -12,7 +13,7 @@ import { useReducedMotion } from "framer-motion";
 //   First 30% of chars: 8ms/char
 //   Middle 40%:        14ms/char
 //   Final 30%:         22ms/char
-// Total: ~14ms/char average, ~1300ms for ~95 chars.
+// Long snippets compress this same cadence to at most five seconds.
 
 const KEYWORDS = new Set([
   "def", "return", "if", "else", "elif", "for", "while", "in", "and", "or", "not",
@@ -67,12 +68,14 @@ function tokenizeLine(line: string): Token[] {
 function tokenColor(kind: Token["kind"]): string {
   if (kind === "kw") return "rgb(56 189 248)";
   if (kind === "str") return "rgba(52 211 153 / 0.85)";
-  if (kind === "cmt") return "rgb(100 116 139)";
+  if (kind === "cmt") return "rgb(var(--color-faint))";
   return "rgba(230 236 245 / 0.92)";
 }
 
 interface CodeTypewriterProps {
   code: string;
+  /** Owned by the share reveal so resuming motion never rewinds visible code. */
+  reduceMotion: boolean;
   /** Delay before typing starts (ms from mount). */
   startDelayMs?: number;
   /** Max number of source lines kept; the rest is replaced by a single
@@ -86,12 +89,11 @@ interface CodeTypewriterProps {
 
 export function CodeTypewriter({
   code,
+  reduceMotion: reduce,
   startDelayMs = 0,
   maxLines = 10,
   onDone,
 }: CodeTypewriterProps) {
-  const reduce = useReducedMotion();
-
   // Truncate first — the typewriter only ever types the visible slice.
   const allLines = code.split("\n");
   const lines = allLines.slice(0, maxLines);
@@ -127,45 +129,27 @@ export function CodeTypewriter({
       onDoneRef.current?.();
       return;
     }
-    let cancelled = false;
-    let timeoutId: ReturnType<typeof setTimeout> | undefined;
-
-    const total = visible.length;
-    const tickFor = (i: number): number => {
-      // i = chars typed so far (0-based, before the next paint).
-      const pct = i / Math.max(1, total);
-      if (pct < 0.3) return 8;
-      if (pct < 0.7) return 14;
-      return 22;
-    };
-
-    const start = () => {
-      let i = 0;
-      const tick = () => {
-        if (cancelled) return;
-        i += 1;
-        setRevealed(i);
-        if (i >= total) {
-          onDoneRef.current?.();
-          return;
-        }
-        timeoutId = setTimeout(tick, tickFor(i));
-      };
-      timeoutId = setTimeout(tick, tickFor(0));
-    };
-
-    timeoutId = setTimeout(start, startDelayMs);
-    return () => {
-      cancelled = true;
-      if (timeoutId) clearTimeout(timeoutId);
+    const deadlines = codeRevealTimeline(visible.length);
+    const startsAt = performance.now() + startDelayMs;
+    let frame: number;
+    const tick = (now: number) => {
+      const count = revealedCodeLength(deadlines, now - startsAt);
+      setRevealed(count);
+      if (count === visible.length) {
+        onDoneRef.current?.();
+        return;
+      }
+      frame = requestAnimationFrame(tick);
     };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
   }, [visible, startDelayMs, reduce]);
 
   // Render: walk the visible string char-by-char, but maintain
   // line/token structure so colors stay correct as the cursor moves.
   // Strategy: compute token list per line (full), then for each render
   // pass include only the prefix of (line+separators) up to `revealed`.
-  const slice = visible.slice(0, revealed);
+  const slice = reduce ? visible : visible.slice(0, revealed);
   const renderedLines = slice.split("\n");
   const showCursor = !reduce && revealed < visible.length;
 
@@ -177,14 +161,14 @@ export function CodeTypewriter({
     // overflow-x-auto so the very rare 50+ char line still renders
     // intact and the user can swipe to read.
     <div className="font-mono text-[13.5px] leading-[1.5] sm:text-[17px] sm:leading-[1.55] md:text-[19px]">
-      {renderedLines.map((rendered, lineIdx) => {
+      {/* Mount all line boxes immediately: typing must not push the CTA down. */}
+      {lines.map((fullLine, lineIdx) => {
         // Full line — drives the color tokens. Then we trim each token
         // text to fit the rendered prefix.
-        const fullLine = lines[lineIdx] ?? "";
         const tokens = tokenizeLine(fullLine);
-        let remaining = rendered.length;
+        let remaining = renderedLines[lineIdx]?.length ?? 0;
         return (
-          <div key={lineIdx} className="min-h-[1.55em]">
+          <div key={lineIdx} className="min-h-[1.55em] whitespace-nowrap">
             {tokens.length === 0 && remaining === 0 ? (
               <span>&nbsp;</span>
             ) : (
@@ -225,8 +209,11 @@ export function CodeTypewriter({
           </div>
         );
       })}
-      {truncated && revealed >= visible.length && (
-        <div className="mt-1 text-[13px] text-faint sm:text-[15px]">…</div>
+      {truncated && (
+        <div
+          className="mt-1 text-[13px] text-faint sm:text-[15px]"
+          style={{ visibility: reduce || revealed >= visible.length ? "visible" : "hidden" }}
+        >…</div>
       )}
     </div>
   );
diff --git a/frontend/src/features/share/components/codeRevealTiming.test.ts b/frontend/src/features/share/components/codeRevealTiming.test.ts
new file mode 100644
index 00000000..5a5cd3e4
--- /dev/null
+++ b/frontend/src/features/share/components/codeRevealTiming.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { codeRevealTimeline, MAX_CODE_REVEAL_MS, revealedCodeLength } from "./codeRevealTiming";
+
+describe("shared-code reveal timeline", () => {
+  it("retains every existing short-snippet character deadline", () => {
+    const length = 95;
+    const timeline = codeRevealTimeline(length);
+    let elapsed = 0;
+    for (let i = 0; i < length; i++) {
+      elapsed += i / length < 0.3 ? 8 : i / length < 0.7 ? 14 : 22;
+      expect(timeline[i]).toBe(elapsed);
+      expect(revealedCodeLength(timeline, elapsed - 0.1)).toBe(i);
+      expect(revealedCodeLength(timeline, elapsed)).toBe(i + 1);
+    }
+  });
+
+  it.each([1, 95, 340, 341, 1189, 4096, 12000])("bounds a %i-character snippet and preserves monotonic pacing", length => {
+    const timeline = codeRevealTimeline(length);
+    expect(timeline.at(-1)).toBeLessThanOrEqual(MAX_CODE_REVEAL_MS);
+    expect(timeline.every((value, i) => i === 0 || value > timeline[i - 1])).toBe(true);
+    expect(revealedCodeLength(timeline, -1)).toBe(0);
+    expect(revealedCodeLength(timeline, 0)).toBe(0);
+    expect(revealedCodeLength(timeline, MAX_CODE_REVEAL_MS)).toBe(length);
+    expect(revealedCodeLength(timeline, 60000)).toBe(length);
+  });
+
+  it("keeps long snippets decelerating rather than revealing uniformly", () => {
+    const timeline = codeRevealTimeline(1000);
+    expect(timeline.at(-1)).toBe(5000);
+    const first = timeline[1] - timeline[0];
+    const middle = timeline[501] - timeline[500];
+    const last = timeline[999] - timeline[998];
+    expect(middle / first).toBeCloseTo(14 / 8);
+    expect(last / first).toBeCloseTo(22 / 8);
+  });
+
+  it("catches up after a missed frame without replaying skipped ticks", () => {
+    const timeline = codeRevealTimeline(1189);
+    expect(revealedCodeLength(timeline, 16)).toBeGreaterThan(0);
+    expect(revealedCodeLength(timeline, 4800)).toBeGreaterThan(1000);
+    expect(revealedCodeLength(timeline, 9000)).toBe(1189);
+  });
+
+  it("settles empty code without a deadline", () => {
+    expect(codeRevealTimeline(0)).toEqual([]);
+    expect(revealedCodeLength([], 0)).toBe(0);
+  });
+});
diff --git a/frontend/src/features/share/components/codeRevealTiming.ts b/frontend/src/features/share/components/codeRevealTiming.ts
new file mode 100644
index 00000000..2158b0fa
--- /dev/null
+++ b/frontend/src/features/share/components/codeRevealTiming.ts
@@ -0,0 +1,25 @@
+/** Preserve the authored three-speed cadence, compressing only long reveals. */
+export const MAX_CODE_REVEAL_MS = 5000;
+
+export function codeRevealTimeline(length: number): number[] {
+  let elapsed = 0;
+  const deadlines = Array.from({ length }, (_, index) => {
+    const progress = index / length;
+    elapsed += progress < 0.3 ? 8 : progress < 0.7 ? 14 : 22;
+    return elapsed;
+  });
+  if (elapsed <= MAX_CODE_REVEAL_MS) return deadlines;
+  return deadlines.map(time => time / elapsed * MAX_CODE_REVEAL_MS);
+}
+
+/** Absolute time prevents slow frames or a hidden tab accumulating timer drift. */
+export function revealedCodeLength(deadlines: readonly number[], elapsedMs: number): number {
+  let low = 0;
+  let high = deadlines.length;
+  while (low < high) {
+    const middle = Math.floor((low + high) / 2);
+    if (deadlines[middle] <= elapsedMs) low = middle + 1;
+    else high = middle;
+  }
+  return low;
+}
diff --git a/frontend/src/features/share/pages/SharePage.tsx b/frontend/src/features/share/pages/SharePage.tsx
index 7c5cb687..45a75c6a 100644
--- a/frontend/src/features/share/pages/SharePage.tsx
+++ b/frontend/src/features/share/pages/SharePage.tsx
@@ -1,15 +1,14 @@
 import { useEffect, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
-import { motion, useReducedMotion } from "framer-motion";
+import { motion } from "framer-motion";
+import { useReducedMotionPreference } from "../../../hooks/useReducedMotionPreference";
 import { api } from "../../../api/client";
 import type { SharedLessonCompletion } from "../../../api/client";
 import { ApiError } from "../../../api/ApiError";
-import { CinematicLighting } from "../../../components/cinema/CinematicLighting";
-import { FilmGrain } from "../../../components/cinema/FilmGrain";
+import { PublicPage } from "../../marketing/public/PublicPage";
 import { CodeTypewriter } from "../components/CodeTypewriter";
 import { masteryLabel } from "../components/MasteryRing";
 import { FIRST_LESSON_CONTRACT } from "../../../productContract";
-import { Wordmark } from "../../../components/Wordmark";
 
 // Phase 21C: cinematic share page at /s/:token. Public route — no auth
 // required. Renders a slow, choreographed reveal of the learner's
@@ -71,30 +70,11 @@ function ShareRecovery({
     };
   }, [title]);
 
-  const primaryClasses =
-    "inline-flex min-h-11 items-center justify-center rounded-full bg-gradient-to-r from-violet to-accent px-5 py-2.5 text-sm font-bold text-bg shadow-glow transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg";
+  const primaryClasses = "public-action";
 
   return (
-    <div className="relative min-h-screen overflow-hidden bg-bg text-ink">
-      <CinematicLighting
-        variant="three-point"
-        fadeInMs={300}
-        keyColor="accent"
-        intensity="soft"
-      />
-      <FilmGrain intensity="hero" fadeInMs={300} />
-      <header className="relative mx-auto max-w-5xl px-5 pt-7 sm:px-10 sm:pt-10">
-        <a
-          href="/"
-          aria-label="CodeTutor AI home"
-          className="inline-flex rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-4 focus-visible:ring-offset-bg"
-        >
-          <Wordmark size="md" />
-        </a>
-      </header>
-      <main className="relative mx-auto flex min-h-[calc(100vh-5rem)] max-w-5xl items-center px-5 py-12 sm:px-10 sm:py-16">
-        <section className="w-full max-w-2xl">
-          <div className="font-mono text-xs font-semibold uppercase tracking-[0.2em] text-accent">
+        <section className="share-recovery public-recovery-copy">
+          <div className="public-eyebrow">
             {eyebrow}
           </div>
           <h1
@@ -129,12 +109,18 @@ function ShareRecovery({
             </a>
           </div>
         </section>
-      </main>
-    </div>
   );
 }
 
 export default function SharePage() {
+  return (
+    <PublicPage className="public-share" composition="ambient" focusOnNavigation={false}>
+      <ShareContent />
+    </PublicPage>
+  );
+}
+
+function ShareContent() {
   const { token } = useParams<{ token: string }>();
   const [share, setShare] = useState<SharedLessonCompletion | null>(null);
   const [error, setError] = useState<"not_found" | "load_failed" | null>(null);
@@ -144,7 +130,12 @@ export default function SharePage() {
   // but the api.getShare wrapper attaches the bearer token if a session
   // exists (which is fine; the backend ignores it on this route).
   useEffect(() => {
-    if (!token) {
+    // Match the server-generated token shape (shares.ts). Malformed paths
+    // fall through the public API router to protected routes; their 401 is
+    // not a connection failure or a reason to ask a public visitor to log in.
+    // This is only a UX preflight, never an authorization decision.
+    if (!token || !/^[a-z2-9]{12}$/i.test(token)) {
+      setShare(null);
       setError("not_found");
       return;
     }
@@ -276,18 +267,13 @@ export default function SharePage() {
     // a blank atmospheric canvas reads as a broken link on slow networks.
     return (
       <div
-        className="relative min-h-screen overflow-hidden bg-bg text-ink"
+        className="public-share-artifact"
         role="status"
         aria-live="polite"
       >
-        <CinematicLighting variant="three-point" fadeInMs={400} keyColor="accent" intensity="soft" />
-        <FilmGrain intensity="hero" fadeInMs={400} />
-        <div className="relative mx-auto max-w-5xl px-5 pt-8 sm:px-10 sm:pt-10">
-          <Wordmark size="md" />
-          <main className="pt-12 sm:pt-16">
-            <div className="text-xs font-medium uppercase tracking-wider text-muted">
+            <h1>
               Shared lesson
-            </div>
+            </h1>
             <div className="mt-4 h-12 w-3/4 max-w-xl animate-pulse rounded-xl bg-elevated/80" />
             <div className="mt-6 rounded-2xl border border-border bg-panel/90 p-5 shadow-2xl sm:p-8">
               <div className="h-3 w-28 animate-pulse rounded-full bg-elevated" />
@@ -295,8 +281,6 @@ export default function SharePage() {
               <div className="mt-3 h-3 w-1/2 animate-pulse rounded-full bg-elevated" />
             </div>
             <p className="mt-6 text-sm text-muted">Loading this learner's project…</p>
-          </main>
-        </div>
       </div>
     );
   }
@@ -309,7 +293,14 @@ interface SharePageReadyProps {
 }
 
 function SharePageReady({ share }: SharePageReadyProps) {
-  const reduce = useReducedMotion();
+  const prefersReducedMotion = useReducedMotionPreference();
+  // A revealed artifact must never rewind when the OS preference is restored.
+  // Background motion can resume independently of this one-shot reveal.
+  const [revealSettled, setRevealSettled] = useState(prefersReducedMotion);
+  const reduce = prefersReducedMotion || revealSettled;
+  useEffect(() => {
+    if (prefersReducedMotion) setRevealSettled(true);
+  }, [prefersReducedMotion]);
   // Coordinated timeline. Reduced-motion users skip past the staggered
   // beats and reveal everything statically — we keep the same hierarchy
   // but drop the typewriter and the zoom hold.
@@ -329,7 +320,10 @@ function SharePageReady({ share }: SharePageReadyProps) {
     timersRef.current.push(t);
   };
   useEffect(() => {
-    if (reduce) return;
+    if (reduce) {
+      setPhase("idle");
+      return;
+    }
     // UX polish: typewriter starts at 900ms (was 1200) so it overlaps
     // the title gradient sweep tail rather than pausing after it. The
     // first ~1.4s used to feel stalled.
@@ -349,7 +343,10 @@ function SharePageReady({ share }: SharePageReadyProps) {
     reduce ? share.viewCount : 0,
   );
   useEffect(() => {
-    if (reduce) return;
+    if (reduce) {
+      setAnimatedViews(share.viewCount);
+      return;
+    }
     if (phase !== "footer" && phase !== "idle") return;
     const target = share.viewCount;
     if (target <= 0) return;
@@ -383,7 +380,7 @@ function SharePageReady({ share }: SharePageReadyProps) {
 
   // Whether the page is past the money-shot beat — used to dim
   // peripheral chrome briefly during the hold.
-  const inMoneyShot = phase === "moneyShot";
+  const inMoneyShot = !reduce && phase === "moneyShot";
 
   const ringColor = TIER_COLOR[share.mastery];
   const timeSpentLabel = fmtTimeSpent(share.timeSpentMs);
@@ -392,15 +389,7 @@ function SharePageReady({ share }: SharePageReadyProps) {
     share.lessonId === FIRST_LESSON_CONTRACT.lessonId;
 
   return (
-    <div className="relative min-h-screen overflow-hidden bg-bg text-ink">
-      {/* Lighting + grain — atmosphere from t=0. */}
-      <CinematicLighting
-        variant="three-point"
-        fadeInMs={reduce ? 0 : 400}
-        keyColor="accent"
-        intensity={inMoneyShot ? "full" : "soft"}
-      />
-      <FilmGrain intensity="hero" fadeInMs={reduce ? 0 : 400} />
+    <div className="public-share-artifact">
 
       {/* Header row — wordmark + share URL.
           Phase 22E: at iPhone-13-class widths (≤640px) the full
@@ -408,8 +397,8 @@ function SharePageReady({ share }: SharePageReadyProps) {
           fitting beside a 24px-padded wordmark. Hide the URL on narrow
           and rely on the address bar for the link — saves a horizontal-
           overflow risk and keeps the header airy. */}
-      <motion.header
-        className="relative mx-auto flex max-w-5xl items-center justify-between px-5 pt-8 sm:px-10 sm:pt-10"
+      <motion.div
+        className="mb-6 hidden text-right font-mono text-xs text-faint sm:block"
         initial={reduce ? false : { opacity: 0.65, y: -4 }}
         animate={
           inMoneyShot
@@ -422,18 +411,13 @@ function SharePageReady({ share }: SharePageReadyProps) {
           ease: [0.22, 1, 0.36, 1],
         }}
       >
-        <div className="font-display text-xl font-semibold tracking-tight text-ink sm:text-2xl">
-          CodeTutor AI
-        </div>
-        <div className="hidden font-mono text-xs text-faint sm:block sm:text-sm">
           codetutor.msrivas.com/s/{share.shareToken}
-        </div>
-      </motion.header>
+      </motion.div>
 
       {/* Body — title + code, the centered headline.
           Phase 22E: tighter horizontal padding on mobile so the code
           panel + title get every pixel of usable width. */}
-      <main className="relative mx-auto max-w-5xl px-5 pt-8 pb-12 sm:px-10 sm:pt-10 sm:pb-16">
+      <div>
         {/* Course context eyebrow */}
         <motion.div
           className="text-xs font-medium uppercase tracking-wider text-muted sm:text-sm"
@@ -453,50 +437,23 @@ function SharePageReady({ share }: SharePageReadyProps) {
           {share.courseTotalLessons}
         </motion.div>
 
-        {/* Lesson title — ONE gradient on the page. Sweeps in via
-            backgroundPosition on a 200% gradient. Money-shot beat
-            scales the title+code group. */}
+        {/* Preserve the earned-completion reveal within the public theme. */}
         <motion.div
           className="mt-3"
           animate={inMoneyShot ? { scale: 1.02 } : { scale: 1 }}
           transition={{
-            duration: 0.6,
+            duration: reduce ? 0 : 0.6,
             ease: [0.22, 1, 0.36, 1],
           }}
         >
           <motion.h1
-            // text-balance keeps long titles from sprawling unevenly.
-            // For very long titles (50+ chars — "Why Mutability
-            // Matters in Python (and Other Languages)" type), step
-            // the size DOWN one bracket instead of clamping with an
-            // ellipsis — losing characters reads worse than smaller
-            // type. line-clamp-3 catches the rare extreme case where
-            // even at the smaller size the title still wraps long.
-            className={`bg-gradient-to-r from-success via-accent to-violet bg-clip-text font-display font-semibold leading-tight tracking-tight text-transparent [text-wrap:balance] line-clamp-3 ${
-              share.lessonTitle.length > 50
-                ? "text-3xl sm:text-4xl md:text-5xl"
-                : "text-4xl sm:text-5xl md:text-6xl"
-            }`}
-            style={{
-              backgroundSize: "200% 100%",
-            }}
-            initial={
-              reduce
-                ? { opacity: 1, backgroundPosition: "0% 50%" }
-                : { opacity: 0.65, backgroundPosition: "100% 50%" }
-            }
-            animate={{ opacity: 1, backgroundPosition: "0% 50%" }}
+            className="text-ink [text-wrap:balance]"
+            initial={reduce ? false : { opacity: 0.65 }}
+            animate={{ opacity: 1 }}
             transition={{
-              opacity: {
                 duration: reduce ? 0 : 0.5,
                 delay: reduce ? 0 : 0.7,
                 ease: [0.22, 1, 0.36, 1],
-              },
-              backgroundPosition: {
-                duration: reduce ? 0 : 1.2,
-                delay: reduce ? 0 : 1,
-                ease: [0.22, 1, 0.36, 1],
-              },
             }}
           >
             {share.lessonTitle}
@@ -511,7 +468,7 @@ function SharePageReady({ share }: SharePageReadyProps) {
               mid-token (which would break the 4-color tokenization
               colors across visual lines). */}
           <motion.div
-            className="mt-5 rounded-2xl border border-border bg-panel/95 p-4 shadow-2xl sm:mt-6 sm:p-6 md:p-8"
+            className="mt-5 rounded-2xl border border-borderSoft bg-panel p-4 sm:mt-6 sm:p-6 md:p-8"
             initial={reduce ? false : { opacity: 0.55, y: 8 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{
@@ -523,6 +480,7 @@ function SharePageReady({ share }: SharePageReadyProps) {
             <div className="overflow-x-auto">
               <CodeTypewriter
                 code={share.codeSnippet}
+                reduceMotion={reduce}
                 // Typewriter starts immediately on phase=typing (the
                 // outer schedule fires that at t=900ms post-mount).
                 // Prior 200ms padding made the first ~1.4s feel stalled.
@@ -542,7 +500,7 @@ function SharePageReady({ share }: SharePageReadyProps) {
               ? { opacity: 1, y: 0 }
               : { opacity: 0.72, y: 0 }
           }
-          transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
+          transition={{ duration: reduce ? 0 : 0.5, ease: [0.22, 1, 0.36, 1] }}
         >
           <div className="flex items-center gap-3">
             {/* Mastery ring — strokes in via stroke-dashoffset on the
@@ -611,8 +569,8 @@ function SharePageReady({ share }: SharePageReadyProps) {
               : { opacity: 0.65, y: 8 }
           }
           transition={{
-            duration: 0.5,
-            delay: 0.2,
+            duration: reduce ? 0 : 0.5,
+            delay: reduce ? 0 : 0.2,
             ease: [0.22, 1, 0.36, 1],
           }}
         >
@@ -625,6 +583,7 @@ function SharePageReady({ share }: SharePageReadyProps) {
             href={`${window.location.origin}${FIRST_LESSON_CONTRACT.route}?utm_source=share&utm_medium=lesson_share&utm_campaign=${encodeURIComponent(share.courseId)}&utm_content=${encodeURIComponent(share.lessonId)}&share_ref=${encodeURIComponent(share.shareToken)}`}
             label={`${isFirstLesson ? "Try this lesson" : "Start with lesson 1"} — about ${FIRST_LESSON_CONTRACT.estimatedMinutes} minutes →`}
             breathe={phase === "idle" && !reduce}
+            reduceMotion={reduce}
           />
           <div className="text-sm text-faint">
             No signup needed for the first lesson.
@@ -643,7 +602,7 @@ function SharePageReady({ share }: SharePageReadyProps) {
             </div>
           )}
         </motion.div>
-      </main>
+      </div>
     </div>
   );
 }
@@ -741,12 +700,13 @@ function SaveImageButton({ storyImageUrl, authorLabel }: SaveImageButtonProps) {
 interface CtaButtonProps {
   href: string;
   label: string;
+  reduceMotion: boolean;
   /** When true, fires a single 800ms breath at t=0 (one-shot, not
    *  looped). Looped CTA-pulse reads as desperate. */
   breathe?: boolean;
 }
 
-function CtaButton({ href, label, breathe }: CtaButtonProps) {
+function CtaButton({ href, label, breathe, reduceMotion }: CtaButtonProps) {
   // The button has a tactile press: hover lifts borderColor + bg,
   // press collapses translate + scale 0.985. Breath is opt-in by the
   // parent and runs once when phase reaches idle.
@@ -754,7 +714,9 @@ function CtaButton({ href, label, breathe }: CtaButtonProps) {
     <motion.a
       href={href}
       animate={
-        breathe
+        reduceMotion
+          ? { scale: 1, y: 0, transition: { duration: 0 } }
+          : breathe
           ? {
               scale: [1, 1.02, 1],
               transition: {
@@ -766,9 +728,9 @@ function CtaButton({ href, label, breathe }: CtaButtonProps) {
             }
           : undefined
       }
-      whileHover={{ y: -1 }}
-      whileTap={{ y: 0, scale: 0.985 }}
-      className="inline-flex min-h-11 items-center rounded-full border border-borderSoft bg-panel px-5 py-2.5 text-sm font-medium text-ink transition hover:border-accent/40 hover:bg-accent/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+      whileHover={reduceMotion ? undefined : { y: -1 }}
+      whileTap={reduceMotion ? undefined : { y: 0, scale: 0.985 }}
+      className="public-action"
     >
       {label}
     </motion.a>
diff --git a/frontend/src/hooks/useReducedMotionPreference.ts b/frontend/src/hooks/useReducedMotionPreference.ts
new file mode 100644
index 00000000..8df3f9f1
--- /dev/null
+++ b/frontend/src/hooks/useReducedMotionPreference.ts
@@ -0,0 +1,18 @@
+import { useSyncExternalStore } from "react";
+
+const query = "(prefers-reduced-motion: reduce)";
+
+function subscribe(onChange: () => void) {
+  const media = window.matchMedia(query);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+
+/** Unlike a mount-time preference snapshot, follows live OS setting changes. */
+export function useReducedMotionPreference() {
+  return useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(query).matches,
+    () => false,
+  );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a93fe6bf..2257702e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -130,7 +130,8 @@ code, pre, .font-mono {
    360–640 px hero causes a late whole-screen type swap on throttled mobile
    connections; the native fallbacks preserve the visual hierarchy without
    resetting the page's largest paint. Desktop keeps the full Fraunces +
-   JetBrains Mono brand treatment. */
+   JetBrains Mono brand treatment. Acquisition page roots own public-surface,
+   never an entry-router wrapper: returning from auth must keep the same fonts. */
 @media (max-width: 640px) {
   .public-surface {
     font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 2b4f8d4b..e9a8ce5f 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,7 +1,14 @@
 import React, { lazy, Suspense, useEffect } from "react";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, useLocation } from "react-router-dom";
 import PublicApp from "./PublicApp";
+import { PublicThemeSync } from "./features/marketing/public/PublicThemeSync";
+import { PublicMotionWorld } from "./features/marketing/public/PublicMotionWorld";
+import { RouteLoading } from "./features/marketing/public/RouteLoading";
+import {
+  shouldDeferAuthHydration,
+  shouldUsePublicApp,
+} from "./features/marketing/public/publicBootstrap";
 import "./index.css";
 // Side-effect import: applies `data-theme` on <html> from the stored preference
 // at module load. Routes that don't transitively import theme.ts (e.g. the
@@ -18,33 +25,26 @@ const FullApp = lazy(() => import("./App"));
 // address bar while preserving unrelated query flags.
 captureDistributionAttribution();
 
-const PUBLIC_PATHS = new Set([
-  "/",
-  "/why-not-chatgpt",
-  "/privacy",
-  "/terms",
-  "/support",
-]);
-const startsOnPublicSurface = PUBLIC_PATHS.has(window.location.pathname);
+const initialPathname = window.location.pathname;
+const startsOnPublicSurface = shouldUsePublicApp(initialPathname);
 
 function Bootstrap() {
+  const { pathname } = useLocation();
+  const deferAuthHydration = shouldDeferAuthHydration(pathname);
+
   useEffect(() => {
     const timer = setTimeout(
       () => {
         void import("./auth/authStore").then(({ initAuth }) => initAuth());
       },
-      startsOnPublicSurface ? 5000 : 0,
+      startsOnPublicSurface && deferAuthHydration ? 5000 : 0,
     );
     return () => clearTimeout(timer);
-  }, []);
+  }, [deferAuthHydration]);
 
   return (
     <Suspense
-      fallback={
-        <div className="flex min-h-screen items-center justify-center bg-bg text-muted">
-          <span className="skeleton h-4 w-32 rounded" />
-        </div>
-      }
+      fallback={<RouteLoading fullHeight />}
     >
       {startsOnPublicSurface ? <PublicApp /> : <FullApp />}
     </Suspense>
@@ -54,7 +54,8 @@ function Bootstrap() {
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <BrowserRouter>
-      <Bootstrap />
+      <PublicThemeSync />
+      <PublicMotionWorld><Bootstrap /></PublicMotionWorld>
     </BrowserRouter>
   </React.StrictMode>
 );
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index fa2473db..e5a06a41 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -112,7 +112,7 @@ export default function LoginPage() {
           </button>
         }
       >
-        <p className="text-center text-[11px] text-muted">
+        <p className="auth-supporting-copy text-center text-muted">
           The link expires in an hour. Spam folder is worth a check too.
         </p>
         <div className="mt-3 flex justify-center">
@@ -143,7 +143,7 @@ export default function LoginPage() {
           </button>
         }
       >
-        <p className="text-center text-[11px] text-muted">
+        <p className="auth-supporting-copy text-center text-muted">
           The link expires in an hour. You can close this tab once you've
           clicked it.
         </p>
@@ -191,7 +191,7 @@ export default function LoginPage() {
           divider, so first-time visitors don't scan past the 2-click option. */}
       <OAuthButtons disabled={submitting} returnTo={returnTo} />
 
-      <div className="my-4 flex items-center gap-2 text-[10px] text-faint">
+      <div className="auth-email-divider my-4 flex items-center gap-2 text-faint">
         <div className="h-px flex-1 bg-border" />
         <span>or sign in with email</span>
         <div className="h-px flex-1 bg-border" />
diff --git a/frontend/src/pages/NotFoundPage.tsx b/frontend/src/pages/NotFoundPage.tsx
index ed20c1d2..04d59cca 100644
--- a/frontend/src/pages/NotFoundPage.tsx
+++ b/frontend/src/pages/NotFoundPage.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useRef } from "react";
 import { Link } from "react-router-dom";
-import { CinematicLighting } from "../components/cinema/CinematicLighting";
-import { FilmGrain } from "../components/cinema/FilmGrain";
-import { Wordmark } from "../components/Wordmark";
+import {
+  PublicPage,
+} from "../features/marketing/public/PublicPage";
 import { FIRST_LESSON_CONTRACT } from "../productContract";
 
 export default function NotFoundPage() {
@@ -18,30 +18,10 @@ export default function NotFoundPage() {
   }, []);
 
   return (
-    <div className="relative min-h-screen overflow-hidden bg-bg text-ink">
-      <CinematicLighting
-        variant="three-point"
-        fadeInMs={300}
-        keyColor="accent"
-        intensity="soft"
-      />
-      <FilmGrain intensity="hero" fadeInMs={300} />
-
-      <header className="relative mx-auto flex max-w-5xl items-center px-5 pt-7 sm:px-10 sm:pt-10">
-        <Link
-          to="/"
-          aria-label="CodeTutor AI home"
-          className="rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-4 focus-visible:ring-offset-bg"
-        >
-          <Wordmark size="md" />
-        </Link>
-      </header>
-
-      <main className="relative mx-auto flex min-h-[calc(100vh-5rem)] max-w-5xl items-center px-5 py-12 sm:px-10 sm:py-16">
-        <section className="w-full max-w-2xl">
-          <div className="font-mono text-xs font-semibold uppercase tracking-[0.2em] text-accent">
-            Route not found · 404
-          </div>
+    <PublicPage className="public-recovery" focusOnNavigation={false}>
+      <div className="public-reading-header">
+        <section className="public-recovery-copy">
+          <div className="public-eyebrow">Route not found · 404</div>
           <h1
             ref={headingRef}
             tabIndex={-1}
@@ -55,10 +35,7 @@ export default function NotFoundPage() {
           </p>
 
           <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
-            <Link
-              to="/"
-              className="inline-flex min-h-11 items-center justify-center rounded-full bg-gradient-to-r from-violet to-accent px-5 py-2.5 text-sm font-bold text-bg shadow-glow transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
-            >
+            <Link to="/" className="public-action">
               Go to homepage
             </Link>
             <a
@@ -75,7 +52,7 @@ export default function NotFoundPage() {
             </Link>
           </div>
         </section>
-      </main>
-    </div>
+      </div>
+    </PublicPage>
   );
 }
diff --git a/frontend/src/pages/ResetPasswordPage.tsx b/frontend/src/pages/ResetPasswordPage.tsx
index 493eb03a..aa0e10c9 100644
--- a/frontend/src/pages/ResetPasswordPage.tsx
+++ b/frontend/src/pages/ResetPasswordPage.tsx
@@ -92,7 +92,7 @@ export default function ResetPasswordPage() {
           </Link>
         }
       >
-        <p className="text-center text-[11px] text-muted">
+        <p className="auth-supporting-copy text-center text-muted">
           The link expires in an hour.
         </p>
         <div className="mt-3 flex justify-center">
@@ -120,7 +120,7 @@ export default function ResetPasswordPage() {
           </button>
         }
       >
-        <p className="text-center text-[11px] text-muted">
+        <p className="auth-supporting-copy text-center text-muted">
           For security, other devices signed in with the old password will
           need to sign in again.
         </p>
diff --git a/frontend/src/pages/TrustPage.tsx b/frontend/src/pages/TrustPage.tsx
index b8210b93..e5ae37de 100644
--- a/frontend/src/pages/TrustPage.tsx
+++ b/frontend/src/pages/TrustPage.tsx
@@ -1,8 +1,8 @@
 import { useEffect, type ReactNode } from "react";
-import { Link, useLocation } from "react-router-dom";
-import { CinematicLighting } from "../components/cinema/CinematicLighting";
-import { FilmGrain } from "../components/cinema/FilmGrain";
-import { Wordmark } from "../components/Wordmark";
+import { useLocation } from "react-router-dom";
+import {
+  PublicPage,
+} from "../features/marketing/public/PublicPage";
 
 const UPDATED = "July 31, 2026";
 const SUPPORT_EMAIL = "support@msrivas.com";
@@ -15,7 +15,10 @@ interface SectionProps {
 
 function Section({ id, title, children }: SectionProps) {
   return (
-    <section id={id} className="scroll-mt-24 border-t border-border-soft/70 pt-8">
+    <section
+      id={id}
+      className="scroll-mt-24 border-t border-borderSoft/70 pt-8"
+    >
       <h2 className="font-display text-2xl font-semibold tracking-tight text-ink">
         {title}
       </h2>
@@ -31,94 +34,114 @@ function PrivacyContent() {
     <>
       <Section title="The short version">
         <p>
-          CodeTutor stores what it needs to run your account and learning workspace. We do
-          not sell personal information and we do not use it for targeted advertising.
+          CodeTutor stores what it needs to run your account and learning
+          workspace. We do not sell personal information and we do not use it
+          for targeted advertising.
         </p>
       </Section>
       <Section title="Information we collect">
         <ul className="list-disc space-y-2 pl-5 marker:text-accent">
-          <li>Account details such as your name, email address, and sign-in provider.</li>
-          <li>Your code, lesson progress, preferences, tutor conversations, feedback, and projects.</li>
-          <li>Service and security data such as request timing, usage counts, errors, and abuse signals.</li>
           <li>
-            For the signed-out trial, a one-way hash derived from the network address is used
-            for rate limits and short-lived learning continuity. The raw address is not stored in
-            those trial ledgers.
+            Account details such as your name, email address, and sign-in
+            provider.
+          </li>
+          <li>
+            Your code, lesson progress, preferences, tutor conversations,
+            feedback, and projects.
+          </li>
+          <li>
+            Service and security data such as request timing, usage counts,
+            errors, and abuse signals.
+          </li>
+          <li>
+            For the signed-out trial, a one-way hash derived from the network
+            address is used for rate limits and short-lived learning continuity.
+            The raw address is not stored in those trial ledgers.
           </li>
         </ul>
       </Section>
       <Section id="ai" title="How code and AI requests are used">
         <p>
-          When you ask the tutor for help, the relevant prompt, lesson context, and code are
-          sent through CodeTutor's server to OpenAI to generate the response. Code you run is
-          sent to an isolated execution environment so the program can be evaluated.
+          When you ask the tutor for help, the relevant prompt, lesson context,
+          and code are sent through CodeTutor's server to OpenAI to generate the
+          response. Code you run is sent to an isolated execution environment so
+          the program can be evaluated.
         </p>
         <p>
-          If you save your own OpenAI API key, CodeTutor encrypts it at rest and uses it only
-          to make tutor requests you initiate. The interface never returns the stored key.
+          If you save your own OpenAI API key, CodeTutor encrypts it at rest and
+          uses it only to make tutor requests you initiate. The interface never
+          returns the stored key.
         </p>
         <p>
-          Signed-out learners can separately choose to help improve tutor quality. This choice
-          is off by default. When enabled, 5% of successful, CodeTutor-funded anonymous tutor
-          turns are selected. Before anything is saved, CodeTutor removes source code, files,
-          selections, terminal input and output, paths, contact details, secrets, and unknown
-          identifiers. Raw history and network addresses are not included. Conversations made
-          with your own API key are never part of this program.
+          Signed-out learners can separately choose to help improve tutor
+          quality. This choice is off by default. When enabled, 5% of
+          successful, CodeTutor-funded anonymous tutor turns are selected.
+          Before anything is saved, CodeTutor removes source code, files,
+          selections, terminal input and output, paths, contact details,
+          secrets, and unknown identifiers. Raw history and network addresses
+          are not included. Conversations made with your own API key are never
+          part of this program.
         </p>
         <p>
-          These redacted quality samples expire within 30 days and are available only through
-          audited administrator review. Turning the choice off stops new sampling and requests
-          deletion of retained samples from that browser. If you later create an account, any
-          retained samples from that browser are linked only so they appear in your export and
-          are removed when your account is deleted. Sampled traffic never enters the protected
-          evaluation holdout directly; reviewers can use a redacted pattern to author a new
-          synthetic test instead.
+          These redacted quality samples expire within 30 days and are available
+          only through audited administrator review. Turning the choice off
+          stops new sampling and requests deletion of retained samples from that
+          browser. If you later create an account, any retained samples from
+          that browser are linked only so they appear in your export and are
+          removed when your account is deleted. Sampled traffic never enters the
+          protected evaluation holdout directly; reviewers can use a redacted
+          pattern to author a new synthetic test instead.
         </p>
       </Section>
       <Section title="Service providers">
         <p>
-          CodeTutor relies on service providers to operate the product: Microsoft Azure for
-          hosting, execution, monitoring, and email; Supabase for authentication and database
-          services; OpenAI for tutor responses; and Google or GitHub when you choose one of
-          those sign-in methods. They receive only the information needed to perform those
+          CodeTutor relies on service providers to operate the product:
+          Microsoft Azure for hosting, execution, monitoring, and email;
+          Supabase for authentication and database services; OpenAI for tutor
+          responses; and Google or GitHub when you choose one of those sign-in
+          methods. They receive only the information needed to perform those
           services under their own terms and privacy commitments.
         </p>
       </Section>
       <Section title="Public sharing">
         <p>
-          A lesson share is public to anyone with its link. It can include the code snippet,
-          lesson, completion details, and a display name only when that name is included in the
-          share. Do not publish secrets or personal information in code. Signed-in learners can
-          revoke their shares.
+          A lesson share is public to anyone with its link. It can include the
+          code snippet, lesson, completion details, and a display name only when
+          that name is included in the share. Do not publish secrets or personal
+          information in code. Signed-in learners can revoke their shares.
         </p>
       </Section>
       <Section title="Retention and control">
         <p>
-          Account data is kept while the account is active. You can download a JSON copy of
-          your data and permanently delete your account from Settings. Deletion removes active
-          account data; limited copies may remain temporarily in protected backups and security
-          records until they age out through normal operations or must be kept for legal reasons.
+          Account data is kept while the account is active. You can download a
+          JSON copy of your data and permanently delete your account from
+          Settings. Deletion removes active account data; limited copies may
+          remain temporarily in protected backups and security records until
+          they age out through normal operations or must be kept for legal
+          reasons.
         </p>
         <p>
-          Anonymous usage ledgers and anonymous shares have a 30-day retention target, and
-          some short-lived handoff records expire sooner. Cleanup may not happen immediately
-          at the boundary. You can ask us to access, correct, or delete information by
-          contacting support.
+          Anonymous usage ledgers and anonymous shares have a 30-day retention
+          target, and some short-lived handoff records expire sooner. Cleanup
+          may not happen immediately at the boundary. You can ask us to access,
+          correct, or delete information by contacting support.
         </p>
       </Section>
       <Section title="Browser storage and tracking">
         <p>
-          CodeTutor uses browser storage and essential authentication data to keep you signed
-          in, preserve the signed-out lesson handoff, and remember interface state. It does not
-          use third-party advertising trackers. Because there is no targeted-ad tracking, the
-          service does not currently change behavior in response to Do Not Track signals.
+          CodeTutor uses browser storage and essential authentication data to
+          keep you signed in, preserve the signed-out lesson handoff, and
+          remember interface state. It does not use third-party advertising
+          trackers. Because there is no targeted-ad tracking, the service does
+          not currently change behavior in response to Do Not Track signals.
         </p>
       </Section>
       <Section title="Children and changes">
         <p>
-          CodeTutor is not directed to children under 13. If you believe a child provided
-          personal information, contact us so we can review and remove it. Material changes to
-          this notice will be reflected here with a new updated date.
+          CodeTutor is not directed to children under 13. If you believe a child
+          provided personal information, contact us so we can review and remove
+          it. Material changes to this notice will be reflected here with a new
+          updated date.
         </p>
       </Section>
     </>
@@ -130,18 +153,20 @@ function TermsContent() {
     <>
       <Section title="Using CodeTutor">
         <p>
-          CodeTutor is an educational coding service. By creating an account or using the
-          service, you agree to these terms and the Privacy notice. You must be at least 13 and
-          able to enter this agreement where you live; if you are under the age of majority,
-          use the service with a parent or guardian's permission.
+          CodeTutor is an educational coding service. By creating an account or
+          using the service, you agree to these terms and the Privacy notice.
+          You must be at least 13 and able to enter this agreement where you
+          live; if you are under the age of majority, use the service with a
+          parent or guardian's permission.
         </p>
       </Section>
       <Section title="Your account and content">
         <p>
-          Keep your account secure and provide accurate account information. You retain your
-          rights in code and other content you submit. You give CodeTutor permission to host,
-          process, transmit, and display that content only as needed to provide, secure, and
-          improve the service or when you deliberately create a public share.
+          Keep your account secure and provide accurate account information. You
+          retain your rights in code and other content you submit. You give
+          CodeTutor permission to host, process, transmit, and display that
+          content only as needed to provide, secure, and improve the service or
+          when you deliberately create a public share.
         </p>
       </Section>
       <Section title="Responsible use">
@@ -149,40 +174,53 @@ function TermsContent() {
         <ul className="list-disc space-y-2 pl-5 marker:text-accent">
           <li>break laws, infringe rights, or harm another person;</li>
           <li>probe, bypass, overload, or disrupt security and rate limits;</li>
-          <li>run malware, mine cryptocurrency, attack networks, or access systems without permission;</li>
-          <li>publish credentials, private data, or content you do not have permission to share; or</li>
-          <li>automate account creation or resell access without written permission.</li>
+          <li>
+            run malware, mine cryptocurrency, attack networks, or access systems
+            without permission;
+          </li>
+          <li>
+            publish credentials, private data, or content you do not have
+            permission to share; or
+          </li>
+          <li>
+            automate account creation or resell access without written
+            permission.
+          </li>
         </ul>
       </Section>
       <Section title="AI and code execution">
         <p>
-          Tutor responses and program output can be incomplete or wrong. Review important code
-          yourself; CodeTutor is not a substitute for professional, security, legal, medical,
-          or financial advice. If you connect your own OpenAI key, charges from that provider
-          are your responsibility.
+          Tutor responses and program output can be incomplete or wrong. Review
+          important code yourself; CodeTutor is not a substitute for
+          professional, security, legal, medical, or financial advice. If you
+          connect your own OpenAI key, charges from that provider are your
+          responsibility.
         </p>
       </Section>
       <Section title="Availability and changes">
         <p>
-          The service may change, pause, impose limits, or discontinue features. There is no
-          guaranteed uptime or permanent free allowance. We may suspend access that threatens
-          the service or violates these terms, and we will use reasonable judgment when doing so.
+          The service may change, pause, impose limits, or discontinue features.
+          There is no guaranteed uptime or permanent free allowance. We may
+          suspend access that threatens the service or violates these terms, and
+          we will use reasonable judgment when doing so.
         </p>
       </Section>
       <Section title="Warranty and responsibility">
         <p>
-          CodeTutor is provided on an “as available” basis without promises that every feature,
-          lesson, response, or execution result will be uninterrupted or error-free. To the
-          extent permitted by law, CodeTutor and its operator are not responsible for indirect,
-          incidental, or consequential losses arising from use of the service. Nothing here
+          CodeTutor is provided on an “as available” basis without promises that
+          every feature, lesson, response, or execution result will be
+          uninterrupted or error-free. To the extent permitted by law, CodeTutor
+          and its operator are not responsible for indirect, incidental, or
+          consequential losses arising from use of the service. Nothing here
           limits rights or remedies that cannot legally be limited.
         </p>
       </Section>
       <Section title="Ending use and updates">
         <p>
-          You can stop using CodeTutor and delete your account at any time. We may update these
-          terms as the product changes; the updated date and revised terms will appear here.
-          Continuing to use the service after an update means you accept the revised terms.
+          You can stop using CodeTutor and delete your account at any time. We
+          may update these terms as the product changes; the updated date and
+          revised terms will appear here. Continuing to use the service after an
+          update means you accept the revised terms.
         </p>
       </Section>
     </>
@@ -194,28 +232,31 @@ function SupportContent() {
     <>
       <Section title="Get help">
         <p>
-          Tell us what you were trying to do, what happened instead, and the device and browser
-          you used. Do not include passwords, API keys, authentication links, or other secrets.
+          Tell us what you were trying to do, what happened instead, and the
+          device and browser you used. Do not include passwords, API keys,
+          authentication links, or other secrets.
         </p>
         <a
           href={`mailto:${SUPPORT_EMAIL}?subject=CodeTutor%20support`}
-          className="inline-flex min-h-11 items-center rounded-full bg-accent px-5 py-2 text-sm font-semibold text-bg transition hover:bg-accentMuted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+          className="public-action public-action--accent"
         >
           Email {SUPPORT_EMAIL}
         </a>
       </Section>
       <Section title="Account and privacy requests">
         <p>
-          Signed-in learners can export their data or delete their account from Settings. For
-          access, correction, privacy, safety, or public-share concerns, email support from the
-          address on your account when possible so we can verify the request safely.
+          Signed-in learners can export their data or delete their account from
+          Settings. For access, correction, privacy, safety, or public-share
+          concerns, email support from the address on your account when possible
+          so we can verify the request safely.
         </p>
       </Section>
       <Section title="Something broken right now?">
         <p>
-          Preserve your code locally, refresh once, and try again. If the secure runner is
-          starting from cold, the first run can take around 20 seconds. Include the exact error
-          text and approximate time in your support message.
+          Preserve your code locally, refresh once, and try again. If the secure
+          runner is starting from cold, the first run can take around 20
+          seconds. Include the exact error text and approximate time in your
+          support message.
         </p>
       </Section>
     </>
@@ -226,27 +267,33 @@ const PAGE_COPY = {
   privacy: {
     eyebrow: "Trust center",
     title: "Privacy, in plain language.",
-    intro: "What CodeTutor collects, why it needs it, and the controls you have.",
+    intro:
+      "What CodeTutor collects, why it needs it, and the controls you have.",
     content: <PrivacyContent />,
   },
   terms: {
     eyebrow: "Trust center",
     title: "Terms of use.",
-    intro: "The practical rules for learning, building, and sharing with CodeTutor.",
+    intro:
+      "The practical rules for learning, building, and sharing with CodeTutor.",
     content: <TermsContent />,
   },
   support: {
     eyebrow: "Help",
     title: "Let's get you unstuck.",
-    intro: "A direct path for product help, account questions, and privacy requests.",
+    intro:
+      "A direct path for product help, account questions, and privacy requests.",
     content: <SupportContent />,
   },
 } as const;
 
-export default function TrustPage() {
+export default function TrustPage({
+  pageKey,
+}: {
+  pageKey: keyof typeof PAGE_COPY;
+}) {
   const location = useLocation();
-  const key = location.pathname.slice(1) as keyof typeof PAGE_COPY;
-  const page = PAGE_COPY[key] ?? PAGE_COPY.support;
+  const page = PAGE_COPY[pageKey];
 
   useEffect(() => {
     const previous = document.title;
@@ -258,46 +305,43 @@ export default function TrustPage() {
 
   useEffect(() => {
     if (!location.hash) return;
-    const id = decodeURIComponent(location.hash.slice(1));
+    let id: string;
+    try {
+      id = decodeURIComponent(location.hash.slice(1));
+    } catch {
+      // A malformed URL fragment must not take the legal page down.
+      return;
+    }
     const target = document.getElementById(id);
     if (!target) return;
     const frame = window.requestAnimationFrame(() => {
       target.scrollIntoView({ block: "start" });
-      if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
+      if (!target.hasAttribute("tabindex"))
+        target.setAttribute("tabindex", "-1");
       target.focus({ preventScroll: true });
     });
     return () => window.cancelAnimationFrame(frame);
   }, [location.hash, page]);
 
   return (
-    <div className="relative min-h-screen overflow-hidden bg-bg text-ink">
-      <CinematicLighting variant="key-only" intensity="soft" />
-      <FilmGrain intensity="ambient" />
-      <header className="relative mx-auto flex max-w-5xl items-center justify-between px-5 py-6 sm:px-8">
-        <Link to="/" aria-label="CodeTutor home" className="rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">
-          <Wordmark size="md" />
-        </Link>
-        <Link to="/" className="inline-flex min-h-11 items-center rounded-md px-3 text-sm text-muted transition hover:bg-elevated hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">
-          Back to CodeTutor
-        </Link>
-      </header>
-      <main className="relative mx-auto max-w-3xl px-5 pb-20 pt-10 sm:px-8 sm:pt-16">
-        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-accent">{page.eyebrow}</p>
-        <h1 className="mt-4 text-balance font-display text-4xl font-semibold leading-tight tracking-tight sm:text-6xl">
-          {page.title}
-        </h1>
-        <p className="mt-5 max-w-2xl text-lg leading-8 text-muted">{page.intro}</p>
-        <p className="mt-3 text-xs text-faint">Updated {UPDATED}</p>
-        <div className="mt-12 space-y-10">{page.content}</div>
-      </main>
-      <footer className="relative border-t border-border-soft/70 bg-panel/30 px-5 py-8 text-sm text-muted">
-        <nav aria-label="Trust and support" className="mx-auto flex max-w-3xl flex-wrap items-center gap-x-5 gap-y-2">
-          <Link className="inline-flex min-h-11 items-center hover:text-ink" to="/privacy">Privacy</Link>
-          <Link className="inline-flex min-h-11 items-center hover:text-ink" to="/terms">Terms</Link>
-          <Link className="inline-flex min-h-11 items-center hover:text-ink" to="/support">Support</Link>
-          <a className="inline-flex min-h-11 items-center hover:text-ink" href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a>
-        </nav>
-      </footer>
-    </div>
+    <PublicPage className="public-surface public-reading">
+      <div className="public-reading-header">
+        <div>
+          <p className="public-eyebrow">{page.eyebrow}</p>
+          <h1>{page.title}</h1>
+          <p className="public-intro">{page.intro}</p>
+          <p className="mt-3 text-xs text-faint">Updated {UPDATED}</p>
+        </div>
+      </div>
+      <div className="public-reading-body space-y-10">
+        {page.content}
+        <a
+          className="inline-flex min-h-11 items-center text-muted"
+          href={`mailto:${SUPPORT_EMAIL}`}
+        >
+          {SUPPORT_EMAIL}
+        </a>
+      </div>
+    </PublicPage>
   );
 }
diff --git a/frontend/src/pages/WhyNotChatGPTPage.tsx b/frontend/src/pages/WhyNotChatGPTPage.tsx
index dda7f981..96404181 100644
--- a/frontend/src/pages/WhyNotChatGPTPage.tsx
+++ b/frontend/src/pages/WhyNotChatGPTPage.tsx
@@ -1,6 +1,5 @@
 import { Link } from "react-router-dom";
-import { SimpleMarketingNav } from "../features/marketing/components/SimpleMarketingNav";
-import { MarketingFooter } from "../features/marketing/components/MarketingFooter";
+import { PublicPage } from "../features/marketing/public/PublicPage";
 import { FIRST_LESSON_CONTRACT } from "../productContract";
 
 // Phase A — A7 (per competitive-intel): the public /why-not-chatgpt page.
@@ -11,8 +10,8 @@ import { FIRST_LESSON_CONTRACT } from "../productContract";
 // conversion comes from naming the difference between GETTING an answer
 // and being able to PRODUCE one.
 //
-// Deliberately a calm, mostly-static reading page — no WebGL/lighting
-// stack. This is an argument, not a trailer. "Python" stays in the SEO
+// Deliberately a calm reading page with quiet shared background atmosphere.
+// This is an argument, not a trailer. "Python" stays in the SEO
 // title/meta surface per growth-marketing's nuance; body copy talks
 // about learning to code.
 
@@ -41,47 +40,58 @@ const DIFFERENCES: Array<{ title: string; them: string; us: string }> = [
 
 export default function WhyNotChatGPTPage() {
   return (
-    <div className="min-h-screen bg-bg text-ink">
-      <SimpleMarketingNav />
-      <main className="mx-auto max-w-3xl px-5 pb-8 pt-28 sm:px-8">
-        <p className="text-[12px] font-semibold uppercase tracking-wider text-accent">
-          The honest question
-        </p>
-        <h1 className="mt-3 font-display text-4xl font-semibold tracking-tight sm:text-5xl">
-          Why not just use ChatGPT?
-        </h1>
-        <p className="mt-5 text-base leading-relaxed text-muted">
-          Fair question — ChatGPT is easy to open, remarkably capable, and
-          can be an excellent learning partner. The difference is the product
-          contract: a flexible assistant can help you learn, while CodeTutor
-          is built to make practice, proof, and progression unavoidable.
+    <PublicPage
+      className="public-surface public-comparison"
+      composition="ambient"
+      headerAction={
+        <Link to="/login" className="brand-header-action public-back">
+          Sign in
+        </Link>
+      }
+      footerLinks={
+        <nav aria-label="Product links">
+          <Link to="/why-not-chatgpt">Why not ChatGPT?</Link>
+          <a href="/learn-to-code/">Lessons</a>
+          <Link to="/login">Sign in</Link>
+          <a
+            href="https://github.com/msrivas-7/CodeTutor-AI"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub
+          </a>
+          <a
+            href="https://www.linkedin.com/in/msrivas7/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            LinkedIn
+          </a>
+        </nav>
+      }
+    >
+      <div className="public-comparison-copy">
+        <p className="public-eyebrow">The honest question</p>
+        <h1 className="mt-5">Why not just use ChatGPT?</h1>
+        <p className="public-intro mt-6">
+          Fair question — ChatGPT is easy to open, remarkably capable, and can
+          be an excellent learning partner. The difference is the product
+          contract: a flexible assistant can help you learn, while CodeTutor is
+          built to make practice, proof, and progression unavoidable.
         </p>
 
-        <div className="mt-12 flex flex-col gap-6">
+        <div className="public-comparison-rows">
           {DIFFERENCES.map((d) => (
-            <section
-              key={d.title}
-              className="rounded-xl border border-border bg-panel p-5"
-            >
-              <h2 className="text-base font-bold text-ink sm:text-sm">
-                {d.title}
-              </h2>
-              <div className="mt-3 grid gap-3 sm:grid-cols-2">
-                <div className="rounded-lg bg-elevated/60 p-3">
-                  <p className="text-xs font-semibold uppercase tracking-wider text-faint">
-                    ChatGPT
-                  </p>
-                  <p className="mt-1.5 text-base leading-relaxed text-muted sm:text-sm">
-                    {d.them}
-                  </p>
+            <section key={d.title} className="public-comparison-row">
+              <h2>{d.title}</h2>
+              <div className="public-comparison-pair">
+                <div>
+                  <p className="public-eyebrow text-faint">ChatGPT</p>
+                  <p className="mt-3 text-muted">{d.them}</p>
                 </div>
-                <div className="rounded-lg bg-accent/5 p-3 ring-1 ring-accent/20">
-                  <p className="text-xs font-semibold uppercase tracking-wider text-accent">
-                    CodeTutor
-                  </p>
-                  <p className="mt-1.5 text-base leading-relaxed text-ink/90 sm:text-sm">
-                    {d.us}
-                  </p>
+                <div>
+                  <p className="public-eyebrow">CodeTutor</p>
+                  <p className="mt-3 text-ink">{d.us}</p>
                 </div>
               </div>
             </section>
@@ -89,54 +99,49 @@ export default function WhyNotChatGPTPage() {
         </div>
 
         {/* The concession — this is what makes the rest believable. */}
-        <section className="mt-12 rounded-xl border border-border-soft/60 bg-panel/60 p-5">
-          <h2 className="text-base font-bold text-ink sm:text-sm">
+        <section className="public-comparison-concession">
+          <h2>
             When ChatGPT <em>is</em> the better tool
           </h2>
-          <p className="mt-2 text-base leading-relaxed text-muted sm:text-sm">
-            If you already know how to code and need a one-off script, a
-            regex, or a rubber duck at 2am — use ChatGPT. It's excellent at
-            that, and pretending otherwise would be silly. This product is
-            for the different job: going from "I can't code" to "I can" —
-            which happens through your fingers, not your clipboard.
+          <p className="mt-4 text-muted">
+            If you already know how to code and need a one-off script, a regex,
+            or a rubber duck at 2am — use ChatGPT. It's excellent at that, and
+            pretending otherwise would be silly. This product is for the
+            different job: going from "I can't code" to "I can" — which happens
+            through your fingers, not your clipboard.
           </p>
         </section>
 
         {/* Receipts, not vibes: the standing refusals. */}
         <section className="mt-8">
-          <h2 className="text-base font-bold text-ink sm:text-sm">
-            Promises we've made in writing
-          </h2>
-          <ul className="mt-3 flex flex-col gap-2 text-base leading-relaxed text-muted sm:text-sm">
+          <h2>Promises we've made in writing</h2>
+          <ul className="mt-4 flex flex-col gap-3 text-muted">
             <li>
               — There is no "give me the answer" button in the tutor. There
               never will be.
             </li>
             <li>
-              — No streak-shame mechanics. Your streak is a fact we show
-              you, not a leash.
+              — No streak-shame mechanics. Your streak is a fact we show you,
+              not a leash.
             </li>
             <li>
-              — A lesson is complete when you can do the thing, not when
-              you've clicked through it.
+              — A lesson is complete when you can do the thing, not when you've
+              clicked through it.
             </li>
           </ul>
         </section>
 
         <div className="mt-12 flex flex-col items-start gap-3">
-          <Link
-            to={FIRST_LESSON_CONTRACT.route}
-            className="inline-flex min-h-11 items-center rounded-lg bg-gradient-to-r from-accent to-violet px-6 py-3 text-sm font-bold text-bg shadow-glow transition hover:opacity-90"
-          >
+          <Link to={FIRST_LESSON_CONTRACT.route} className="public-action">
             Judge for yourself — try lesson 1, no signup →
           </Link>
           <p className="text-sm leading-relaxed text-muted">
-            About {FIRST_LESSON_CONTRACT.estimatedMinutes} minutes, in your browser. The tutor is designed to guide the
-            next thought without replacing your work — that's the point.
+            About {FIRST_LESSON_CONTRACT.estimatedMinutes} minutes, in your
+            browser. The tutor is designed to guide the next thought without
+            replacing your work — that's the point.
           </p>
         </div>
-      </main>
-      <MarketingFooter />
-    </div>
+      </div>
+    </PublicPage>
   );
 }
diff --git a/frontend/src/productContract.test.ts b/frontend/src/productContract.test.ts
index 1577cda1..ab3fa32d 100644
--- a/frontend/src/productContract.test.ts
+++ b/frontend/src/productContract.test.ts
@@ -85,4 +85,20 @@ describe("public product contract v1", () => {
     expect(publicApp).toContain('import("./auth/authStore")');
     expect(publicApp).toMatch(/initAuth\(\);\s+return appModule;/);
   });
+
+  it("keeps logged-out direct routes in both bootstrap route trees", () => {
+    const publicApp = read("src/PublicApp.tsx");
+    const fullApp = read("src/App.tsx");
+    for (const path of [
+      "/login",
+      "/signup",
+      "/reset-password",
+      "/auth/callback",
+      "/s/:token",
+      "/try/lesson/:courseId/:lessonId",
+    ]) {
+      expect(publicApp, `PublicApp route ${path}`).toContain(`path="${path}"`);
+      expect(fullApp, `App route ${path}`).toContain(`path="${path}"`);
+    }
+  });
 });
diff --git a/frontend/staticwebapp.config.json b/frontend/staticwebapp.config.json
index 62e0f3d7..324399e0 100644
--- a/frontend/staticwebapp.config.json
+++ b/frontend/staticwebapp.config.json
@@ -25,5 +25,11 @@
   },
   "mimeTypes": {
     ".json": "application/json"
+  },
+  "responseOverrides": {
+    "404": {
+      "rewrite": "/404.html",
+      "statusCode": 404
+    }
   }
 }
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 9f03e429..a6c482b8 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -2,6 +2,7 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { fileURLToPath } from "node:url";
 import { courseRegistryPlugin } from "./scripts/vitePluginCourseRegistry";
+import { designTokensPlugin } from "./scripts/vitePluginDesignTokens";
 import {
   discoveryBuildPlugin,
   discoverySitePlugin,
@@ -11,6 +12,7 @@ const e2eForwardedFor = process.env.E2E_FORWARDED_FOR?.trim();
 
 export default defineConfig({
   plugins: [
+    designTokensPlugin(),
     react(),
     courseRegistryPlugin(),
     discoverySitePlugin(),