fix: puzzle sidebar integrates into layout instead of overlapping waveform

- Puzzle panel now shifts canvas and waveform viewer right (340px) instead of
  overlapping them, using body class toggle and CSS transitions
- Canvas resize accounts for sidebar width
- Progress (completed/unlocked levels, custom components) persists in localStorage
- Level cards refresh on each panel open to reflect current progress

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

css/style.css

@@ -73,6 +73,7 @@ body {
     position: fixed;
     top: 48px; left: 0; right: 0; bottom: 0;
     cursor: default;
+    transition: left 0.2s ease;
 }
 
 /* ==================== Waveform Panel ==================== */
@@ -85,6 +86,7 @@ body {
     border-top: 2px solid #00e599;
     z-index: 90;
     flex-direction: column;
+    transition: left 0.2s ease;
 }
 #waveform-panel.visible { display: flex; }
 
@@ -248,14 +250,13 @@ body {
     position: fixed;
     top: 48px;
     left: 0;
-    width: 380px;
+    width: 340px;
     height: calc(100vh - 48px);
     background: #12121a;
     border-right: 1px solid #2a2a3a;
     z-index: 95;
     flex-direction: column;
     overflow-y: auto;
-    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
 }
 
 .puzzle-panel.visible {
@@ -267,6 +268,16 @@ body {
     width: 340px;
 }
 
+/* When puzzle panel is visible, shift canvas and waveform */
+.puzzle-panel.visible ~ #canvas,
+body.puzzle-sidebar-open #canvas {
+    left: 340px;
+}
+
+body.puzzle-sidebar-open #waveform-panel {
+    left: 340px;
+}
+
 .puzzle-header {
     padding: 16px;
     background: #0a0a0f;