diff --git a/src/components/demo/PlayYourself.tsx b/src/components/demo/PlayYourself.tsx
index 213695c..8cf660b 100644
--- a/src/components/demo/PlayYourself.tsx
+++ b/src/components/demo/PlayYourself.tsx
@@ -44,10 +44,12 @@ export function PlayYourself<TState>({
   const Controls = interactive.Controls;
 
   return (
-    // 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)}>
+    // The SHELL does not decide how wide a demo's play surface is. A word grid
+    // wants a narrow column with its keyboard beside it; an analyst screen full
+    // of tables wants most of the page. So this is a generous ceiling and each
+    // demo's Surface and Controls cap themselves — wordle's keyboard carries
+    // its own max width for exactly that reason.
+    <div className={cn('w-full max-w-4xl 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/keyboard.tsx b/src/demos/wordle/keyboard.tsx
index 97bf093..4e04bfe 100644
--- a/src/demos/wordle/keyboard.tsx
+++ b/src/demos/wordle/keyboard.tsx
@@ -83,7 +83,9 @@ export function Keyboard({
   const hint = solver.state;
 
   return (
-    <div className="grid gap-1 sm:gap-1.5" style={{ paddingBottom: 'max(0px, var(--safe-bottom))' }}>
+    // Own cap, not the shell's. Unconstrained, these flex rows stretch to the
+    // page and the keys drift a screen away from the board they belong to.
+    <div className="grid w-full max-w-md gap-1 sm:gap-1.5" style={{ paddingBottom: 'max(0px, var(--safe-bottom))' }}>
       {/* The solver, live, on whatever word you picked — not a recording. This
           is the difference between a demo and a video: it answers for boards no
           rollout on this site ever covered. */}