diff --git a/src/components/demo/DemoShell.tsx b/src/components/demo/DemoShell.tsx
index e160da1..befd147 100644
--- a/src/components/demo/DemoShell.tsx
+++ b/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 ? (
diff --git a/src/components/demo/PlayYourself.tsx b/src/components/demo/PlayYourself.tsx
index 4c2cc1d..213695c 100644
--- a/src/components/demo/PlayYourself.tsx
+++ b/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
diff --git a/src/demos/wordle/surface.tsx b/src/demos/wordle/surface.tsx
index 0b9a4d2..63f8f10 100644
--- a/src/demos/wordle/surface.tsx
+++ b/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