Revert layout to original output card; keep timing order only

book_display and coloring_display back inside the right output column.
The output card layout is restored to: audio → PDF buttons → book pages.
The three-step TIMING remains: audio appears first, then PDF download
button, then book pages — just all within the same column as before.

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

ui/layout.py

@@ -370,12 +370,6 @@ 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;
@@ -558,7 +552,7 @@ def create_layout(load_sample_fn=None, create_book_fn=None):
                     label="Try an example",
                 )
 
-            # AUDIO + DOWNLOADS — right column, always at eye level
+            # OUTPUT CARD — right column
             with gr.Column(scale=2, elem_classes=["output-card"]):
                 audio_narration = gr.Audio(
                     label="🎧 Listen to your story",
@@ -572,25 +566,17 @@ def create_layout(load_sample_fn=None, create_book_fn=None):
                     coloring_pdf_download = gr.DownloadButton(
                         "⬇ Coloring PDF", visible=False, elem_classes=["btn-pdf"],
                     )
-                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"])
+                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"]):