fix: iframe test min-width 1024px; correct bar offset to 32px; note canvas min-width in README

Author: stephenliang

README.md

@@ -6,7 +6,7 @@ A self-contained, embeddable web app that sequences the five interactive modes o
 
 ```html
 <!-- padding-top = 9/16 canvas + 52px progress bar -->
-<div style="position:relative; width:100%; padding-top:calc(56.25% + 48px);">
+<div style="position:relative; width:100%; padding-top:calc(56.25% + 32px);">
   <iframe
     src="https://code-dot-org.github.io/ai-literacy-oceans/"
     style="position:absolute; top:0; left:0; width:100%; height:100%; border:none;"
@@ -15,7 +15,9 @@ A self-contained, embeddable web app that sequences the five interactive modes o
 </div>
 ```
 
-The canvas is always 16:9. The progress bar sits above it — the iframe is taller than 16:9 by the bar's height (52px).
+The canvas is always 16:9. The progress bar sits above it — the iframe is taller than 16:9 by the bar's height (~32px).
+The iframe container should be at least **1024px wide** so the 16:9 canvas reaches 576px height,
+which is OceansLab's designed canvas height. Below 1024px the word-selection scene clips.
 
 ### Contract
 

public/iframe-test.html

@@ -14,7 +14,9 @@
     }
     h1 { font-size: 20px; margin-bottom: 8px; }
     p  { font-size: 14px; color: #4a5568; margin-bottom: 20px; }
-    .embed-container { width: 100%; max-width: 960px; margin: 0 auto; }
+    /* 1024px minimum: OceansLab's word scene is designed for a 1024×576 canvas.
+       At narrower widths the 16:9 canvas is shorter than 576px and clips buttons. */
+    .embed-container { width: 100%; max-width: 1280px; min-width: 1024px; margin: 0 auto; overflow-x: auto; }
 
     /*
      * Responsive wrapper for the iframe.
@@ -28,7 +30,7 @@
     .iframe-wrapper {
       position: relative;
       width: 100%;
-      padding-top: calc(56.25% + 48px);
+      padding-top: calc(56.25% + 32px);
       border-radius: 8px;
       overflow: hidden;
       box-shadow: 0 4px 24px rgba(0,0,0,0.15);