Add reproducible runner visual evidence

Author: adewale

docs/pr-evidence/README.md

@@ -0,0 +1,18 @@
+# PR #6 visual evidence
+
+These captures show `/examples/values` at a 1200×900 desktop viewport, clipped to the `.playground` runner. The review point is the Run control: the PR changes its action color from `#FF4801` to the WCAG-AA `#C83800` while preserving the editor/output layout.
+
+| Capture | Commit | SHA-256 |
+| --- | --- | --- |
+| [Before](pr-6-before-runner.png) | `b61edf1` (`origin/main`) | `be773336d14f1b819ade1a22f6308573b5e26148ec37b322f73ad1d2de232b34` |
+| [After](pr-6-after-runner.png) | `742ae7d` | `281db8bb44daa94af2d99b689b1177fb21427b0051679a3e1de3a56bc4831b04` |
+
+Regenerate each page with its commit checked out, serve the rendered `/examples/values` HTML plus `public/` on a local HTTP server, then run:
+
+```bash
+TARGET_URL=http://127.0.0.1:<port>/examples/values/ \
+CAPTURE_SELECTOR=.playground WIDTH=1200 HEIGHT=900 \
+OUTPUT=<output>.png node scripts/capture_browser_screenshot.mjs
+```
+
+The captures use the repository's headless-Chrome script; it waits for the selected element and writes the selector's rendered bounding box.

docs/pr-evidence/pr-6-after-runner.png

@@ -13,6 +13,7 @@ const output = process.env.OUTPUT || (args.has('--inject-shiki') ? '/tmp/pythonb
 const url = `${target}${target.includes('?') ? '&' : '?'}screenshot_test=${Date.now()}`;
 const width = Number(process.env.WIDTH || 2040);
 const height = Number(process.env.HEIGHT || 626);
+const captureSelector = process.env.CAPTURE_SELECTOR || '.literate-program';
 const port = 9444 + Math.floor(Math.random() * 1000);
 const profile = await mkdtemp(path.join(tmpdir(), 'pythonbyexample-shot-chrome-'));
 
@@ -85,7 +86,7 @@ try {
 
   for (let i = 0; i < 100; i++) {
     const ready = await client.send('Runtime.evaluate', {
-      expression: "document.readyState === 'complete' && !!document.querySelector('.literate-program')",
+      expression: `document.readyState === 'complete' && !!document.querySelector(${JSON.stringify(captureSelector)})`,
       returnByValue: true,
     });
     if (ready.result.value) break;
@@ -119,7 +120,8 @@ try {
   const data = await client.send('Runtime.evaluate', {
     returnByValue: true,
     expression: `(() => {
-      const program = document.querySelector('.literate-program');
+      const program = document.querySelector(${JSON.stringify(captureSelector)});
+      if (!program) throw new Error('capture selector did not match an element');
       const rect = program.getBoundingClientRect();
       const steps = [...document.querySelectorAll('.lesson-step')].map((step, index) => {
         const pre = step.querySelector('pre');