Mobile layout: stacked panels, horizontal tool rail, scrolling page

studio.html

@@ -154,6 +154,24 @@
     opacity: 0; transition: opacity .15s;
   }
   .example:hover .ex-run { opacity: 1; }
+
+  /* ---------- mobile: stack everything, page scrolls ---------- */
+  @media (max-width: 900px) {
+    body { overflow: auto; }
+    header { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px; }
+    #main { flex-direction: column; height: auto; }
+    #rail {
+      order: 1; width: 100%; flex-direction: row; padding: 8px 10px; gap: 6px;
+      overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border);
+    }
+    .tool-sep { display: none; }
+    #side { order: 2; width: 100%; min-width: 0; }
+    #viewport { order: 3; min-height: 0; }
+    #stage-wrap { flex: none; height: 62vh; margin: 10px 10px 0 10px; }
+    #code-panel { height: 170px; margin: 10px 10px 0 10px; }
+    #statusbar { position: sticky; bottom: 0; }
+    #signin { padding: 7px 12px; }
+  }
 </style>
 </head>
 <body>