Size the play column so the board and keyboard read as one object

The interactive board collapsed to a stub: an empty board has no intrinsic
width, so `w-full` inside a shrink-to-fit card resolved to nothing — and empty
is exactly the state it starts in, so it was only ever seen broken. It now
carries an explicit width.

The keyboard stretched to the full page because its parent was unconstrained,
putting the keys a screen away from the board they belong to. The play column
is capped at 28rem, and the agent's replay moved below its own heading instead
of sitting beside a lone paragraph.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019mt6sHQHEnEYrJZvoMCJSB

src/components/demo/DemoShell.tsx

@@ -353,16 +353,16 @@ function DemoBody({ bundle }: { bundle: DemoBundle }) {
         return (
           <div className="space-y-3">
             {demo.interactive ? (
-              <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 lg:items-start">
+              <>
                 <PlayYourself demo={demo} seed={run.seed} />
-                <div className="space-y-2">
+                <div className="space-y-1 pt-4">
                   <h3 className={st.h3}>What the model did</h3>
-                  <p className={cn(st.prose, 'text-sm')}>
-                    Same hidden answer, same rules, same budget. Its attempt is
-                    below, replayed at the speed it actually happened.
+                  <p className={cn(st.prose, 'max-w-prose text-sm')}>
+                    Same hidden answer, same rules, same budget — replayed at the
+                    speed it actually happened.
                   </p>
                 </div>
-              </div>
+              </>
             ) : null}
 
             {runs.length > 1 ? (

src/components/demo/PlayYourself.tsx

@@ -44,7 +44,10 @@ export function PlayYourself<TState>({
   const Controls = interactive.Controls;
 
   return (
-    <div className={cn('space-y-3', className)}>
+    // Capped, not full-bleed. The keyboard is a grid of flex rows, so an
+    // unconstrained parent stretches it to the page width and the keys drift
+    // far from the board they belong to.
+    <div className={cn('w-full max-w-md space-y-3', className)}>
       <div className="flex items-baseline justify-between gap-3">
         <h3 className={st.h3}>Your attempt</h3>
         <button

src/demos/wordle/surface.tsx

@@ -118,7 +118,14 @@ export const Board = memo(function Board({
 
   return (
     <div
-      className={cn('grid gap-1 sm:gap-1.5', compact ? 'w-full max-w-[7rem]' : 'w-full max-w-sm')}
+      className={cn(
+        'grid gap-1 sm:gap-1.5',
+        // An explicit width, not `w-full max-w-sm`. An empty board has no
+        // intrinsic width, so inside a shrink-to-fit parent `w-full` resolves
+        // to nothing and the board collapses to a stub — which is exactly the
+        // state the interactive board starts in.
+        compact ? 'w-[7rem]' : 'w-[min(100%,20rem)] min-w-[15rem]',
+      )}
       role="img"
       aria-label={
         rows.length === 0