diff --git a/src/components.css b/src/components.css
index 276a1c42..51d4b7be 100644
--- a/src/components.css
+++ b/src/components.css
@@ -57,9 +57,9 @@ mc-diorama canvas {
 }
 
 .visualizer-ui {
-    pointer-events: auto;
+    pointer-events: none; /* Let clicks pass through the empty space by default */
     font-family: sans-serif;
-    background: rgba(20, 20, 20, 0.85);
+    background: transparent;
     padding: 12px;
     border-radius: 8px;
     display: flex;
@@ -67,9 +67,16 @@ mc-diorama canvas {
     gap: 12px;
     color: white;
     user-select: none;
+    border: 1px solid transparent;
+    transition: all 0.2s ease;
+}
+
+.spacetime-container:hover .visualizer-ui {
+    background: rgba(20, 20, 20, 0.85);
     backdrop-filter: blur(4px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    pointer-events: auto; /* Catch clicks on the panel background */
 }
 
 .scrubber-row {
@@ -177,7 +184,7 @@ mc-diorama canvas {
 
 .spacetime-indicator {
     position: absolute;
-    left: 33px;
+    right: 33px;
     bottom: 29px;
     display: flex;
     gap: 12px;
diff --git a/src/controller.js b/src/controller.js
index f35c883b..91e76ea1 100644
--- a/src/controller.js
+++ b/src/controller.js
@@ -52,7 +52,7 @@ export class SpacetimeController {
 
         // --- Feature Indicator (Bottom Left) ---
         const activeFeatures = [];
-        if (this.opts.timeline) activeFeatures.push('t');
+        // 't' is removed; the permanent Play button is now the timeline indicator!
         if (this.opts.pan) activeFeatures.push('p');
         if (this.opts.zoom) activeFeatures.push('z');
         if (this.opts.orbit) activeFeatures.push('o');
@@ -62,12 +62,12 @@ export class SpacetimeController {
         this.indicator.innerHTML = activeFeatures.map(f => `<span>${f}</span>`).join('');
         this.overlay.appendChild(this.indicator);
 
-        // --- Top: Reset Button (Only if spatial tools are enabled) ---
+        // --- Top: Reset Button ---
         if (this.hasSpatial) {
             const topWrapper = document.createElement('div');
             topWrapper.className = 'reset-wrapper';
             this.resetBtn = document.createElement('button');
-            this.resetBtn.className = 'reset-btn spacetime-hover-reveal';
+            this.resetBtn.className = 'reset-btn';
             this.resetBtn.textContent = 'Reset View';
 
             this.resetBtn.addEventListener('click', () => {
@@ -82,11 +82,13 @@ export class SpacetimeController {
         // --- Bottom: Timeline Controls ---
         if (this.opts.timeline) {
             this.uiContainer = document.createElement('div');
-            this.uiContainer.className = 'visualizer-ui spacetime-hover-reveal';
+            // Removed spacetime-hover-reveal from the wrapper
+            this.uiContainer.className = 'visualizer-ui';
 
             if (this.opts.subticks) {
                 this.subRow = document.createElement('div');
-                this.subRow.className = 'scrubber-row';
+                // The entire subtick row hides on idle
+                this.subRow.className = 'scrubber-row spacetime-hover-reveal';
                 this.subRow.innerHTML = `
                     <div class="btn" id="btn-play-sub" title="Animate Events">S&gt;</div>
                     <div class="btn" id="btn-prev-sub" title="Previous Event">&lt;</div>
@@ -105,11 +107,12 @@ export class SpacetimeController {
 
             this.tickRow = document.createElement('div');
             this.tickRow.className = 'scrubber-row';
+            // Only the play button remains fully visible and clickable
             this.tickRow.innerHTML = `
-                <div class="btn" id="btn-play" title="Play Realtime">R&gt;</div>
-                <div class="btn" id="btn-loop" title="Toggle Loop">Loop</div>
-                <div class="btn" id="btn-prev" title="Previous Tick">&lt;&lt;</div>
-                <div class="track-container" id="track-tick-container">
+                <div class="btn" id="btn-play" title="Play Realtime" style="pointer-events: auto;">R&gt;</div>
+                <div class="btn spacetime-hover-reveal" id="btn-loop" title="Toggle Loop">Loop</div>
+                <div class="btn spacetime-hover-reveal" id="btn-prev" title="Previous Tick">&lt;&lt;</div>
+                <div class="track-container spacetime-hover-reveal" id="track-tick-container">
                     <div class="track-inner" id="track-tick-inner">
                         <div class="track-bg"></div>
                         <div class="track-fill" id="fill-tick"></div>
@@ -117,7 +120,7 @@ export class SpacetimeController {
                         <div class="track-handle" id="handle-tick"></div>
                     </div>
                 </div>
-                <div class="btn" id="btn-next" title="Next Tick">&gt;&gt;</div>
+                <div class="btn spacetime-hover-reveal" id="btn-next" title="Next Tick">&gt;&gt;</div>
             `;
             this.uiContainer.appendChild(this.tickRow);
             this.overlay.appendChild(this.uiContainer);