feat(ui): add responsive mobile menu with animated hamburger icon

- Add hamburger icon that morphs to X when menu is open
- Full-screen mobile menu overlay with backdrop blur
- Staggered fade-in animation for menu items
- Desktop navigation unchanged (hidden on mobile)
- Close menu via X button, backdrop click, or ESC key

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

assets/css/main.css

@@ -161,6 +161,46 @@ html {
     transform-origin: left;
   }
 
+  /* Hamburger Menu Icon */
+  .hamburger {
+    width: 20px;
+    height: 14px;
+    position: relative;
+    cursor: pointer;
+  }
+  .hamburger span {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    background: var(--color-text-primary);
+    border-radius: var(--radius-full);
+    transition: all var(--duration-normal) var(--ease-out);
+  }
+  .hamburger span:nth-child(1) {
+    top: 0;
+  }
+  .hamburger span:nth-child(2) {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .hamburger span:nth-child(3) {
+    bottom: 0;
+  }
+  /* Active state - transforms to X */
+  .hamburger.is-active span:nth-child(1) {
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+  .hamburger.is-active span:nth-child(2) {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  .hamburger.is-active span:nth-child(3) {
+    bottom: 50%;
+    transform: translateY(50%) rotate(-45deg);
+  }
+
   /* Audio Player */
   .audio-player {
     background: var(--color-surface-1);