Move book pages below audio: audio always visible first

Audio player + download buttons stay in right column at eye level.
Illustrated storybook pages move to a full-width row below both columns,
so users see and use the narration before scrolling to the book pages.
Added a subtle scroll hint arrow between the two sections.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/layout.py

@@ -370,6 +370,12 @@ body, gradio-app {
 .book-empty { text-align: center; padding: 54px 24px; font-family: 'Gaegu', cursive; color: var(--ink-soft); }
 .book-empty .big { font-size: 30px; color: var(--ink); }
 .book-empty .arrow { font-size: 42px; display:block; margin-bottom: 8px; animation: bob 1.6s ease-in-out infinite; }
+.book-scroll-hint {
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 14px 0 4px; font-family: 'Caveat', cursive; font-size: 20px;
+  color: var(--ink-soft); opacity: 0.7;
+}
+.book-scroll-hint .hint-arrow { font-size: 26px; animation: bob 1.8s ease-in-out infinite; }
 @keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
 .engine-badge {
   display:inline-block; margin: 0 auto 4px; padding: 3px 12px;
@@ -552,10 +558,10 @@ def create_layout(load_sample_fn=None, create_book_fn=None):
                     label="Try an example",
                 )
 
-            # OUTPUT CARD
+            # AUDIO + DOWNLOADS — right column, always at eye level
             with gr.Column(scale=2, elem_classes=["output-card"]):
                 audio_narration = gr.Audio(
-                    label="Listen to your story",
+                    label="🎧 Listen to your story",
                     autoplay=False,
                     elem_classes=["audio-player"],
                 )
@@ -566,17 +572,25 @@ def create_layout(load_sample_fn=None, create_book_fn=None):
                     coloring_pdf_download = gr.DownloadButton(
                         "⬇ Coloring PDF", visible=False, elem_classes=["btn-pdf"],
                     )
-                book_display = gr.HTML(
-                    elem_classes=["book-stage"],
-                    value="""
-                    <div class="book-empty">
-                      <span class="arrow">↑</span>
-                      <p class="big">Your storybook appears here</p>
-                      <p>Add a drawing, pick a theme, and tap <b>Make my book!</b></p>
-                    </div>
-                    """,
-                )
-                coloring_display = gr.HTML(visible=False, elem_classes=["book-stage"])
+                gr.HTML("""
+                <div class="book-scroll-hint">
+                  <span class="hint-arrow">↓</span>
+                  <span>Your illustrated storybook appears below</span>
+                </div>
+                """)
+
+        # STORYBOOK PAGES — full width below both columns so audio is seen first
+        book_display = gr.HTML(
+            elem_classes=["book-stage"],
+            value="""
+            <div class="book-empty">
+              <span class="arrow">↑</span>
+              <p class="big">Your storybook appears here</p>
+              <p>Add a drawing, pick a theme, and tap <b>Make my book!</b></p>
+            </div>
+            """,
+        )
+        coloring_display = gr.HTML(visible=False, elem_classes=["book-stage"])
 
         # Behind the magic accordion
         with gr.Accordion("Behind the magic ✨", open=False, elem_classes=["behind-magic"]):