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 ? (