playground: balance the mobile toolbar export buttons

The two motion-export buttons (Download BVH / Download glTF) auto-flowed into
the mobile toolbar grid and landed in the left half of a row, leaving the
right half empty and the cluster looking ragged.

Group them in a `.tb-downloads` wrapper that is `display: contents` on desktop
(so the desktop flex toolbar is unchanged) and becomes a single full-width
grid row split into two equal halves on mobile. No design-language changes:
same buttons, colours, and radius, just a balanced layout.

Signed-off-by: Claude <noreply@anthropic.com>

Author: claude

playground/play.html

@@ -119,22 +119,24 @@
           <span class="ico-link" aria-hidden="true"></span
           ><span class="lbl" aria-live="polite">Share</span>
         </button>
-        <button
-          id="download-bvh"
-          class="btn ghost"
-          aria-label="Download BVH"
-          title="Download the movement as a .bvh motion file for Blender and other tools"
-        >
-          <span class="lbl" aria-live="polite">Download BVH</span>
-        </button>
-        <button
-          id="download-gltf"
-          class="btn ghost"
-          aria-label="Download glTF"
-          title="Download the movement as a .glb glTF asset (rig + animation) for Three.js and web pipelines"
-        >
-          <span class="lbl" aria-live="polite">Download glTF</span>
-        </button>
+        <div class="tb-downloads">
+          <button
+            id="download-bvh"
+            class="btn ghost"
+            aria-label="Download BVH"
+            title="Download the movement as a .bvh motion file for Blender and other tools"
+          >
+            <span class="lbl" aria-live="polite">Download BVH</span>
+          </button>
+          <button
+            id="download-gltf"
+            class="btn ghost"
+            aria-label="Download glTF"
+            title="Download the movement as a .glb glTF asset (rig + animation) for Three.js and web pipelines"
+          >
+            <span class="lbl" aria-live="polite">Download glTF</span>
+          </button>
+        </div>
         <button
           id="copy-prompt"
           class="btn primary"

playground/src/style.css

@@ -301,6 +301,14 @@ select:hover {
   align-items: center;
 }
 
+/* The two motion-export buttons are grouped so mobile can lay them out as one
+   balanced row. On desktop the wrapper is transparent (`display: contents`),
+   so the buttons stay direct children of the flex toolbar and the desktop row
+   is unchanged. */
+.tb-downloads {
+  display: contents;
+}
+
 /* Movement-library trigger — the one content control in the topbar. Reads like
    a select (kicker, current movement, caret) but opens the full browse panel. */
 .lib-btn {
@@ -1599,6 +1607,20 @@ select:hover {
     grid-row: 2;
     min-height: 42px;
   }
+  /* Motion-export buttons: one full-width row, split into two equal halves so
+     they read as a balanced pair instead of hugging the left of the grid. */
+  .tb-downloads {
+    display: flex;
+    grid-column: 1 / -1;
+    grid-row: 3;
+    gap: 6px;
+  }
+  .tb-downloads > .btn {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 42px;
+    justify-content: center;
+  }
   .intro { padding-left: 12px; padding-right: 12px; }
   .layout { grid-template-columns: 1fr; }
   .floor-guide-key {