Playground panels stack earlier — runner-grid collapses at 980px

The unified 780px breakpoint was right for the lp-cell layout
(prose 38ch + code stack 72ch ≈ 656 px minimum content) but too
narrow for the playground: the editor needs ≥ 18rem (288 px) and
the output panel min-height is 18rem too. At 781-980 px viewport
the two runner-panel columns each got squeezed to ~150 px wide,
which wrapped code into 4-character lines (the user's screenshot
showed "missing = None" with every word on its own line).

Added a dedicated breakpoint:

  @media (max-width: 980px) { .runner-grid { grid-template-columns: 1fr; } }

Below 980 px viewport the editor and output stack vertically; the
editor gets the full column width. Above 980 px the original
1.25fr / 0.75fr split holds.

The 780 px cell-collapse breakpoint is unchanged — the cells have
different content minima and the right-hand boundary for their
collapse is genuinely 780, not 980. Two breakpoints, each fired by
its content's actual minimum width, which is the impeccable rule.

Author: claude

public/site.css

@@ -106,6 +106,7 @@
     .playground { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
     .playground > h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -0.03em; margin-bottom: var(--space-3); }
     .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 pre { flex: 1; min-height: 0; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

public/site.b5d5cf89f344.css public/site.ec7d95a7e8bc.csspublic/site.b5d5cf89f344.css renamed to public/site.ec7d95a7e8bc.css

@@ -106,6 +106,7 @@
     .playground { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
     .playground > h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -0.03em; margin-bottom: var(--space-3); }
     .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 pre { flex: 1; min-height: 0; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

src/asset_manifest.py

@@ -1,3 +1,3 @@
 # Generated by scripts/fingerprint_assets.py. Do not edit by hand.
-ASSET_PATHS = {'SITE_CSS': '/site.b5d5cf89f344.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
-HTML_CACHE_VERSION = 'b61de6981e3d'
+ASSET_PATHS = {'SITE_CSS': '/site.ec7d95a7e8bc.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
+HTML_CACHE_VERSION = '6e47ba57c311'