diff --git a/index.html b/index.html
index a909506..f24cbfb 100644
--- a/index.html
+++ b/index.html
@@ -35,6 +35,26 @@
             border-bottom: 1px solid rgba(230, 223, 209, 0.3);
             padding-bottom: 4px;
             margin-bottom: 6px;
+            cursor: pointer;
+            user-select: none;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .debug-title-toggle {
+            font-size: 0.8em;
+            color: var(--icon);
+            margin-left: 8px;
+        }
+        .debug-content {
+            overflow: hidden;
+            transition: max-height 0.3s ease;
+        }
+        .debug-content.collapsed {
+            max-height: 0;
+            padding-top: 0;
+            padding-bottom: 0;
+            margin: 0;
         }
         .debug-section {
             font-size: 1em;
@@ -268,26 +288,28 @@
 <body>
     <div id="vanta"></div>
     <div id="debug-panel">
-        <div class="debug-title">DEBUG - Palette: Ash</div>
-        <div class="debug-row"><span class="debug-label">Time:</span> <span id="dbg-time">--</span></div>
-        <div class="debug-row"><span class="debug-label">Day%:</span> <span id="dbg-day">--</span></div>
-        <div class="debug-row"><span class="debug-label">Weather:</span> <span id="dbg-weather">--</span></div>
-        <div class="debug-row"><span class="debug-label">Theme:</span> <span id="dbg-theme">--</span></div>
-        <div class="debug-row"><span class="debug-label">Speed:</span> <span id="dbg-speed">--</span></div>
-        <div class="debug-row"><span class="debug-label">Transition:</span> <span id="dbg-trans">--</span></div>
-        <div class="debug-section">Effective theme</div>
-        <div class="debug-row"><span class="libel">skyColor</span> <div class="swatch" id="dbg-t-sky"></div> <span class="hex" id="dbg-h-sky">--</span></div>
-        <div class="debug-row"><span class="libel">cloudColor</span> <div class="swatch" id="dbg-t-cloud"></div> <span class="hex" id="dbg-h-cloud">--</span></div>
-        <div class="debug-row"><span class="libel">lightColor</span> <div class="swatch" id="dbg-t-sunLight"></div> <span class="hex" id="dbg-h-sunLight">--</span></div>
-        <div class="debug-row"><span class="libel">bgColor</span> <div class="swatch" id="dbg-t-bg"></div> <span class="hex" id="dbg-h-bg">--</span></div>
-        <div class="debug-section">Vanta colors</div>
-        <div class="debug-row"><span class="libel">skyColor</span> <div class="swatch" id="dbg-v-sky"></div> <span class="hex" id="dbg-vh-sky">--</span></div>
-        <div class="debug-row"><span class="libel">cloudColor</span> <div class="swatch" id="dbg-v-cloud"></div> <span class="hex" id="dbg-vh-cloud">--</span></div>
-        <div class="debug-row"><span class="libel">lightColor</span> <div class="swatch" id="dbg-v-sunLight"></div> <span class="hex" id="dbg-vh-sunLight">--</span></div>
-        <div class="debug-row"><span class="libel">bgColor</span> <div class="swatch" id="dbg-v-bg"></div> <span class="hex" id="dbg-vh-bg">--</span></div>
-        <div class="debug-section">Theme table</div>
-        <div id="dbg-theme-table" class="theme-table"></div>
-        <div id="dbg-color-table" class="theme-table"></div>
+        <div class="debug-title" onclick="toggleDebugPanel()"><span>DEBUG - Palette: Ash</span><span class="debug-title-toggle" id="debug-toggle-icon">▼</span></div>
+        <div id="debug-content" class="debug-content">
+            <div class="debug-row"><span class="debug-label">Time:</span> <span id="dbg-time">--</span></div>
+            <div class="debug-row"><span class="debug-label">Day%:</span> <span id="dbg-day">--</span></div>
+            <div class="debug-row"><span class="debug-label">Weather:</span> <span id="dbg-weather">--</span></div>
+            <div class="debug-row"><span class="debug-label">Theme:</span> <span id="dbg-theme">--</span></div>
+            <div class="debug-row"><span class="debug-label">Speed:</span> <span id="dbg-speed">--</span></div>
+            <div class="debug-row"><span class="debug-label">Transition:</span> <span id="dbg-trans">--</span></div>
+            <div class="debug-section">Effective theme</div>
+            <div class="debug-row"><span class="libel">skyColor</span> <div class="swatch" id="dbg-t-sky"></div> <span class="hex" id="dbg-h-sky">--</span></div>
+            <div class="debug-row"><span class="libel">cloudColor</span> <div class="swatch" id="dbg-t-cloud"></div> <span class="hex" id="dbg-h-cloud">--</span></div>
+            <div class="debug-row"><span class="libel">lightColor</span> <div class="swatch" id="dbg-t-sunLight"></div> <span class="hex" id="dbg-h-sunLight">--</span></div>
+            <div class="debug-row"><span class="libel">bgColor</span> <div class="swatch" id="dbg-t-bg"></div> <span class="hex" id="dbg-h-bg">--</span></div>
+            <div class="debug-section">Vanta colors</div>
+            <div class="debug-row"><span class="libel">skyColor</span> <div class="swatch" id="dbg-v-sky"></div> <span class="hex" id="dbg-vh-sky">--</span></div>
+            <div class="debug-row"><span class="libel">cloudColor</span> <div class="swatch" id="dbg-v-cloud"></div> <span class="hex" id="dbg-vh-cloud">--</span></div>
+            <div class="debug-row"><span class="libel">lightColor</span> <div class="swatch" id="dbg-v-sunLight"></div> <span class="hex" id="dbg-vh-sunLight">--</span></div>
+            <div class="debug-row"><span class="libel">bgColor</span> <div class="swatch" id="dbg-v-bg"></div> <span class="hex" id="dbg-vh-bg">--</span></div>
+            <div class="debug-section">Theme table</div>
+            <div id="dbg-theme-table" class="theme-table"></div>
+            <div id="dbg-color-table" class="theme-table"></div>
+        </div>
     </div>
     <div id="info-panel">
         <svg id="analog-clock" viewBox="0 0 280 280">
@@ -1117,6 +1139,18 @@ var weatherThemes = {
             return (now.getTime() - startOfDay.getTime()) / 86400000;
         }
 
+        function toggleDebugPanel() {
+            var content = document.getElementById('debug-content');
+            var icon = document.getElementById('debug-toggle-icon');
+            if (content.style.display === 'none') {
+                content.style.display = '';
+                icon.textContent = '▼';
+            } else {
+                content.style.display = 'none';
+                icon.textContent = '▶';
+            }
+        }
+
         function updateDebug(t, palette, vantaColors, themeName, realDayProgress) {
             var now = new Date();
             var hh = now.getHours(), mm = now.getMinutes(), ss = now.getSeconds();