Playground sub-headings: h2 → h3 to nest under the section h2

The playground section uses h2 "Run the complete example", and
each runner-panel inside it previously used h2 for "Example code"
and "Expected output" — three peers at the same heading level
where the document structure is actually nested:

  h2  Run the complete example
    ├── h2  Example code     ← should be h3
    └── h2  Expected output  ← should be h3

Screen-readers and outline algorithms now read the nesting
correctly. No visible change — .runner-panel h3 inherits the same
1.05rem / -0.02em / hairline underline styling that .runner-panel
h2 had.

Three files touched together so the template, prototype mirror,
CSS rule, and assertion all match:

  src/templates/example.html       h2 → h3 for Example code and OUTPUT_HEADING
  scripts/build_prototypes.py      same change in the prototype mirror
  public/site.css                  .runner-panel h2 → .runner-panel h3
  tests/test_app.py                assertion updated to .runner-panel h3

Author: claude

public/site.ad38e31469d2.css public/site.9ad0aa5c4ab6.csspublic/site.ad38e31469d2.css renamed to public/site.9ad0aa5c4ab6.css

@@ -108,7 +108,7 @@
     .runner-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); gap: var(--space-4); align-items: stretch; }
     @media (max-width: 980px) { .runner-grid { grid-template-columns: 1fr; } }
     .runner-panel { min-height: 18rem; display: flex; flex-direction: column; border: 1px dashed var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface); }
-    .runner-panel h2 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-soft); font-size: 1.05rem; letter-spacing: -0.02em; }
+    .runner-panel h3 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-soft); font-size: 1.05rem; letter-spacing: -0.02em; }
     .runner-panel pre { flex: 1; min-height: 0; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
     .runner-editor { border-style: solid; background: var(--surface-2); cursor: text; transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1); }
     .runner-editor:focus-within { box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.12); }

public/site.css

@@ -108,7 +108,7 @@
     .runner-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); gap: var(--space-4); align-items: stretch; }
     @media (max-width: 980px) { .runner-grid { grid-template-columns: 1fr; } }
     .runner-panel { min-height: 18rem; display: flex; flex-direction: column; border: 1px dashed var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface); }
-    .runner-panel h2 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-soft); font-size: 1.05rem; letter-spacing: -0.02em; }
+    .runner-panel h3 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-soft); font-size: 1.05rem; letter-spacing: -0.02em; }
     .runner-panel pre { flex: 1; min-height: 0; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
     .runner-editor { border-style: solid; background: var(--surface-2); cursor: text; transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1); }
     .runner-editor:focus-within { box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.12); }

scripts/build_prototypes.py

@@ -115,10 +115,10 @@ def render_article(example: dict, *, banners: dict[str, str] | None = None) -> s
     <h2>Run the complete example</h2>
     <div class="runner-grid">
       <div class="runner-panel runner-editor">
-        <h2>Example code</h2>
+        <h3>Example code</h3>
         <pre><code class="language-python">{code}</code></pre>
       </div>
-      <section class="runner-panel output-panel"><h2>Expected output</h2><pre><code>{output}</code></pre></section>
+      <section class="runner-panel output-panel"><h3>Expected output</h3><pre><code>{output}</code></pre></section>
     </div>
   </section>
 </article>

src/asset_manifest.py

@@ -1,3 +1,3 @@
 # Generated by scripts/fingerprint_assets.py. Do not edit by hand.
-ASSET_PATHS = {'SITE_CSS': '/site.ad38e31469d2.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
-HTML_CACHE_VERSION = '01251bd4beba'
+ASSET_PATHS = {'SITE_CSS': '/site.9ad0aa5c4ab6.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
+HTML_CACHE_VERSION = 'eaa23cebb468'

src/templates/example.html

@@ -14,14 +14,14 @@ <h1>__TITLE__</h1>
     <h2>Run the complete example</h2>
     <div class="runner-grid">
       <form class="runner-panel runner-editor" method="post" action="/examples/__SLUG__">
-        <h2>Example code</h2>
+        <h3>Example code</h3>
         <textarea name="code" id="code-editor" spellcheck="false" rows="__EDITOR_ROWS__">__EDITABLE_CODE__</textarea>
         <div class="playground-toolbar">
           <button class="button" type="submit">Run</button>
           <button class="tool-button" type="button" data-reset onclick="resetCode()">Reset</button>
         </div>
       </form>
-      <section class="runner-panel output-panel" aria-live="polite"__OUTPUT_PLACEHOLDER__><h2>__OUTPUT_HEADING__</h2><pre><code>__SHOWN_OUTPUT__</code></pre><p class="execution-time">__EXECUTION_TIME__</p></section>
+      <section class="runner-panel output-panel" aria-live="polite"__OUTPUT_PLACEHOLDER__><h3>__OUTPUT_HEADING__</h3><pre><code>__SHOWN_OUTPUT__</code></pre><p class="execution-time">__EXECUTION_TIME__</p></section>
     </div>
   </section>
 </article>

tests/test_app.py

@@ -321,7 +321,7 @@ def test_cf_workers_design_system_and_playground_lessons(self):
         self.assertNotIn('data-share', html)
         self.assertIn('output-panel', html)
         self.assertIn(".runner-panel", css)
-        self.assertIn(".runner-panel h2", css)
+        self.assertIn(".runner-panel h3", css)
         self.assertIn("text-underline-offset", css)
         self.assertIn('aria-live="polite"', html)
         self.assertIn('min-height: 18rem', css)