From 6b6881da7db1f2389478fbd10b7fe305617385e0 Mon Sep 17 00:00:00 2001
From: w1n5t0n <w1n5t0n@lnfinitemonkeys.org>
Date: Sun, 22 Mar 2026 02:11:31 +0200
Subject: [PATCH] fix(playground): fix RL button position on desktop and add
 floating output toggle

- Fix RL buttons stuck high on desktop: media query was overriding
  bottom to 196px, now matches mobile 92px
- Add floating Visual/Synth toggle at top-right of immersive view,
  synced with the existing sheet toggle
---
 playground/a-immersive.html    |  6 ++++++
 playground/css/a-immersive.css | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/playground/a-immersive.html b/playground/a-immersive.html
index ae3f78e..e24ef85 100644
--- a/playground/a-immersive.html
+++ b/playground/a-immersive.html
@@ -30,6 +30,12 @@
     </div>
   </div>
 
+  <!-- Output mode toggle (floating, top-right) -->
+  <div class="output-toggle-float" id="output-toggle-float">
+    <button class="otf-opt active" data-mode="visual">Visual</button>
+    <button class="otf-opt" data-mode="synth">Synth</button>
+  </div>
+
   <!-- Fullscreen flow field canvas -->
   <canvas id="vis-canvas"></canvas>
 
diff --git a/playground/css/a-immersive.css b/playground/css/a-immersive.css
index af0045a..6b78cf7 100644
--- a/playground/css/a-immersive.css
+++ b/playground/css/a-immersive.css
@@ -63,6 +63,38 @@ html, body {
   color: var(--accent);
 }
 
+/* ---- Output mode toggle (floating) ---- */
+.output-toggle-float {
+  position: fixed;
+  top: 30px;
+  right: 12px;
+  z-index: 30;
+  display: flex;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid var(--glass-border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+}
+
+.otf-opt {
+  padding: 6px 14px;
+  font-size: 12px;
+  font-family: inherit;
+  color: var(--text-dim);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.otf-opt.active {
+  background: var(--accent-dim);
+  color: var(--accent);
+  font-weight: 600;
+}
+
 /* ---- Fullscreen canvas ---- */
 #vis-canvas,
 #synth-vis-canvas {
@@ -800,7 +832,7 @@ html, body {
   }
 
   .rl-buttons {
-    bottom: 196px;
+    bottom: 92px;
     gap: 32px;
   }