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>

js/renderer.js

@@ -15,7 +15,9 @@ export function initRenderer() {
 }
 
 export function resize() {
-    canvas.width = window.innerWidth;
+    const sidebarOpen = document.body.classList.contains('puzzle-sidebar-open');
+    const sidebarW = sidebarOpen ? 340 : 0;
+    canvas.width = window.innerWidth - sidebarW;
     const waveH = state.waveformVisible ? state.waveformHeight : 0;
     canvas.height = window.innerHeight - 48 - waveH;
 }