Mobile + tablet responsive layout

Three breakpoints: 900px (tablet), 600px (phone), 380px (small phone).

Phone (< 600px):
- Top bar: drop the "Session" project info, keep just the brand and
the Ready/Rendering status pill
- Stage: tighter padding, 22px type, more vertical room
- Transport: full-width skip/play buttons with 44px tap targets,
voice info row hidden
- Console source row stacks vertically (mode toggle full-width,
voice select full-width below, Advanced toggle as its own row)
- Advanced panel single-column sliders
- Examples wrap above the render button; render is full-width
primary CTA with a 12px vertical padding
- Toast slides up from the bottom as a fixed bar so it stays
visible above the on-screen keyboard

Tablet (< 900px): tighter margins, 2-column advanced summary

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

index.html

@@ -454,6 +454,110 @@
     color: #b91c1c;
   }
   .toast.hidden { display: none; }
+
+  /* ===== Mobile / Tablet ===== */
+  @media (max-width: 900px) {
+    .viewport { margin: 12px 12px 0; border-radius: 14px; }
+    .viewport-head { padding: 10px 14px; }
+    .console { margin: 12px 12px 12px; border-radius: 14px; }
+    .advanced-summary { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 600px) {
+    html, body { font-size: 15px; }
+    body { padding-bottom: env(safe-area-inset-bottom); }
+
+    /* Top bar — drop the project info, keep brand + stage pill */
+    .topbar { height: 48px; padding: 0 14px; }
+    .project-info { display: none; }
+
+    /* Viewport */
+    .viewport { margin: 8px 8px 0; border-radius: 12px; }
+    .viewport-head { padding: 10px 14px; }
+    .viewport-head .label { font-size: 10px; }
+    #voice-info { display: none; }
+
+    /* Stage — tighter padding, smaller type, more vertical room */
+    .stage { min-height: 240px; }
+    .stage .text {
+      padding: 40px 22px 36px;
+      font-size: 22px;
+      line-height: 1.5;
+      min-height: 240px;
+    }
+
+    /* Transport — full-width layout, info row hidden */
+    .transport { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
+    .transport-btns .skip { width: 36px; height: 36px; font-size: 12px; }
+    .transport-btns .play { width: 42px; height: 42px; font-size: 14px; }
+    .transport .spacer { flex: 1; }
+    .transport .info { display: none; }
+    .timecode { font-size: 14px; }
+    .timecode #dur-text { font-size: 12px; }
+
+    /* Console */
+    .console { margin: 10px 8px 12px; border-radius: 12px; }
+    .console-body { padding: 14px; gap: 12px; }
+
+    /* Source row — stack vertically */
+    .row-source {
+      grid-template-columns: 1fr;
+      gap: 8px;
+    }
+    .row-source .seg { width: 100%; }
+    .row-source .seg button { flex: 1; padding: 8px 12px; }
+    .row-source select { width: 100%; padding: 10px 14px; }
+    .row-source .advanced-toggle {
+      width: 100%;
+      justify-content: center;
+      padding: 10px 12px;
+      background: var(--bg-elev-2);
+      border-radius: var(--radius-sm);
+    }
+
+    /* Reference uploader */
+    .ref-inline {
+      grid-template-columns: 1fr;
+      gap: 6px;
+    }
+    .file-drop { padding: 12px; font-size: 13px; }
+
+    /* Advanced panel — single column */
+    .advanced-summary { grid-template-columns: repeat(2, 1fr); gap: 6px 10px; padding: 10px 12px; }
+    .advanced-summary .item { font-size: 11px; }
+    .advanced-sliders { grid-template-columns: 1fr; }
+
+    /* Actions row — examples wrap above, render full-width */
+    .row-actions {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 10px;
+    }
+    .examples { order: 1; }
+    .example-chip { padding: 6px 11px; font-size: 12px; }
+    .render-btn {
+      order: 2;
+      width: 100%;
+      padding: 12px 16px;
+      font-size: 14px;
+      justify-content: center;
+    }
+    .toast { order: 3; }
+
+    /* Toast — slide up from bottom on mobile for visibility */
+    .toast {
+      position: fixed;
+      left: 12px; right: 12px; bottom: 12px;
+      margin: 0;
+      padding: 12px 16px;
+      border-radius: var(--radius);
+      box-shadow: var(--shadow-lg);
+      z-index: 20;
+    }
+  }
+  @media (max-width: 380px) {
+    .stage .text { font-size: 19px; padding: 32px 16px 28px; }
+    .advanced-summary { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>