Getting there

src/style/_config-pane.scss

@@ -41,6 +41,9 @@
   touch-action: pan-y;
   -webkit-overflow-scrolling: touch;
 
+  // Tweakpane v4 internal classes — re-verify on upgrade.
+  // No public theming hook exists for label padding or the slider/number
+  // flex ratio; if a fourth override appears here, switch to a custom plugin.
   .tp-lblv_l {
     padding-right: 10px;
   }
@@ -139,6 +142,7 @@
 
     font-size: 11px;
 
+    // Tweakpane v4 internal class — re-verify on upgrade.
     .tp-sldtxtv_t {
       flex-basis: 48px;
     }

src/style/toolbar/_layout.scss

@@ -5,16 +5,20 @@
   --toolbar-background-strength: 0;
   --toolbar-divider-space: clamp(6px, 1.8vw, 14px);
   --toolbar-top-max-width: 594px;
+  --vibe-button-hit-size: 64px;
 
   display: grid;
   grid-template-areas:
     'previous controls next'
     'previous divider next'
     'previous buttons next';
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns:
+    var(--vibe-button-hit-size)
+    minmax(0, var(--toolbar-top-max-width))
+    var(--vibe-button-hit-size);
   align-items: stretch;
   justify-content: center;
-  width: 100%;
+  width: fit-content;
   max-width: 100%;
   margin: 0 auto;
   padding-inline: clamp(8px, 1.4vw, 14px);
@@ -85,9 +89,9 @@
     position: relative;
     display: grid;
     place-items: center;
-    width: 52px;
+    width: var(--vibe-button-hit-size);
     height: auto;
-    min-height: 66px;
+    min-height: 72px;
     flex: 0 0 auto;
     padding: 0;
     border-radius: 0;

src/style/toolbar/_responsive.scss

@@ -4,6 +4,7 @@
   @include on-small-screen {
     --toolbar-divider-space: 4px;
     --toolbar-top-max-width: 329px;
+    --vibe-button-hit-size: 44px;
 
     grid-template-areas:
       'previous controls next'
@@ -15,7 +16,7 @@
     row-gap: 0;
 
     > .vibe-button {
-      width: 36px;
+      width: var(--vibe-button-hit-size);
       min-height: 44px;
 
       &::before {