diff --git a/playground/play.html b/playground/play.html
index 87479a4..405c120 100644
--- a/playground/play.html
+++ b/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"
diff --git a/playground/src/style.css b/playground/src/style.css
index 0c5708d..a3a3b6c 100644
--- a/playground/src/style.css
+++ b/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,13 @@ select:hover {
     grid-row: 2;
     min-height: 42px;
   }
+  /* Motion export (BVH / glTF) is a desktop-pipeline action — a downloaded
+     .bvh/.glb is only useful in Blender, a Three.js project, or a game engine,
+     none of which live on the phone. Hide it on mobile to keep the toolbar to
+     the two rows that matter (movement + primary CTA); it stays on desktop. */
+  .tb-downloads {
+    display: none;
+  }
   .intro { padding-left: 12px; padding-right: 12px; }
   .layout { grid-template-columns: 1fr; }
   .floor-guide-key {