Debug panel: hide border when collapsed, arrow points right when collapsed

index.html

@@ -32,7 +32,6 @@
             font-size: 1.2em;
             font-weight: bold;
             color: var(--orange);
-            border-bottom: 1px solid rgba(230, 223, 209, 0.3);
             padding-bottom: 4px;
             margin-bottom: 6px;
             cursor: pointer;
@@ -41,21 +40,15 @@
             justify-content: space-between;
             align-items: center;
         }
+        .debug-title.expanded {
+            border-bottom: 1px solid rgba(230, 223, 209, 0.3);
+            margin-bottom: 6px;
+        }
         .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;
             color: var(--icon);
@@ -288,7 +281,7 @@
 <body>
     <div id="vanta"></div>
     <div id="debug-panel">
-        <div class="debug-title" onclick="toggleDebugPanel()"><span>DEBUG - Palette: Ash</span><span class="debug-title-toggle" id="debug-toggle-icon">▼</span></div>
+        <div class="debug-title expanded" 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>
@@ -1141,12 +1134,15 @@ var weatherThemes = {
 
         function toggleDebugPanel() {
             var content = document.getElementById('debug-content');
+            var title = document.querySelector('.debug-title');
             var icon = document.getElementById('debug-toggle-icon');
             if (content.style.display === 'none') {
                 content.style.display = '';
+                title.classList.add('expanded');
                 icon.textContent = '▼';
             } else {
                 content.style.display = 'none';
+                title.classList.remove('expanded');
                 icon.textContent = '▶';
             }
         }