diff --git a/script.js b/script.js
index 229afc6..558c13f 100644
--- a/script.js
+++ b/script.js
@@ -322,8 +322,14 @@ function animateVUMeters() {
     const anyPlaying = decks.A.playing || decks.B.playing;
     const isListener = window.location.port === '5001' || window.location.search.includes('listen=true');
 
-    // Skip rendering if nothing is happening to save battery
-    if (!anyPlaying && !isListener) return;
+    // When nothing is playing, clear canvases to transparent so they don't show as dark blocks
+    if (!anyPlaying && !isListener) {
+        ['A', 'B'].forEach(id => {
+            const canvas = document.getElementById('viz-' + id);
+            if (canvas) canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+        });
+        return;
+    }
 
     ['A', 'B'].forEach(id => {
         const canvas = document.getElementById('viz-' + id);
diff --git a/style.css b/style.css
index ed7ae3a..2ebbf43 100644
--- a/style.css
+++ b/style.css
@@ -222,6 +222,7 @@ header h1 {
     /* Adjust based on header height */
     min-height: 0;
     overflow: hidden;
+    background: var(--bg-dark); /* Prevent deck box-shadows bleeding into padding gaps */
 }
 
 /* LIBRARY SECTION */
@@ -546,6 +547,16 @@ canvas {
     border: 1px solid #333;
 }
 
+/* VU meter canvases — transparent when idle so they don't show as black blocks */
+#viz-A,
+#viz-B {
+    background: transparent !important;
+    border: none !important;
+    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+    margin: 2px 0 6px 0 !important;
+}
+
 
 @keyframes pulse {