feat: add advanced audio effects and improve UI

Phase 6.5 Advanced Effects:
- Add Pitch Shifter with semitones and cents adjustment
- Add Time Stretch with pitch preservation using overlap-add
- Add Distortion with soft/hard/tube types and tone control
- Add Bitcrusher with bit depth and sample rate reduction
- Add AdvancedParameterDialog with real-time waveform visualization
- Add 4 professional presets per effect type

Improvements:
- Fix undefined parameter errors by adding nullish coalescing operators
- Add global custom scrollbar styling with color-mix transparency
- Add custom-scrollbar utility class for side panel
- Improve theme-aware scrollbar appearance in light/dark modes
- Fix parameter initialization when switching effect types

Integration:
- All advanced effects support undo/redo via EffectCommand
- Effects accessible via command palette and side panel
- Selection-based processing support
- Toast notifications for all effects

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

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

app/globals.css

@@ -158,6 +158,41 @@
     @apply bg-background text-foreground;
     font-feature-settings: "rlig" 1, "calt" 1;
   }
+
+  /* Apply custom scrollbar globally */
+  * {
+    scrollbar-width: thin;
+  }
+
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: var(--muted);
+    border-radius: 5px;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: color-mix(in oklch, var(--muted-foreground) 30%, transparent);
+    border-radius: 5px;
+    border: 2px solid var(--muted);
+    transition: background 0.2s ease;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in oklch, var(--muted-foreground) 50%, transparent);
+  }
+
+  *::-webkit-scrollbar-thumb:active {
+    background: color-mix(in oklch, var(--muted-foreground) 70%, transparent);
+  }
+
+  /* Scrollbar corners */
+  *::-webkit-scrollbar-corner {
+    background: var(--muted);
+  }
 }
 
 /* Custom animations */
@@ -290,22 +325,33 @@
 
 /* Custom scrollbar */
 @layer utilities {
+  .custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklch, var(--muted-foreground) 30%, transparent) var(--muted);
+  }
+
   .custom-scrollbar::-webkit-scrollbar {
     width: 8px;
     height: 8px;
   }
 
   .custom-scrollbar::-webkit-scrollbar-track {
-    @apply bg-muted;
+    background: var(--muted);
     border-radius: 4px;
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb {
-    @apply bg-muted-foreground/30;
+    background: color-mix(in oklch, var(--muted-foreground) 30%, transparent);
     border-radius: 4px;
+    border: 2px solid var(--muted);
+    transition: background 0.2s ease;
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    @apply bg-muted-foreground/50;
+    background: color-mix(in oklch, var(--muted-foreground) 50%, transparent);
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb:active {
+    background: color-mix(in oklch, var(--muted-foreground) 70%, transparent);
   }
 }

app/page.tsx

@@ -1,74 +1,17 @@
 'use client';
 
 import * as React from 'react';
-import { Music, Settings } from 'lucide-react';
+import { Music } from 'lucide-react';
 import { ThemeToggle } from '@/components/layout/ThemeToggle';
-import { Button } from '@/components/ui/Button';
 import { ToastProvider } from '@/components/ui/Toast';
 import { AudioEditor } from '@/components/editor/AudioEditor';
 
 export default function Home() {
   return (
     <ToastProvider>
-      <div className="min-h-screen bg-background">
-        {/* Header */}
-        <header className="border-b border-border sticky top-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 z-50">
-          <div className="container mx-auto px-3 sm:px-4 py-3 sm:py-4 flex items-center justify-between gap-2">
-            <div className="min-w-0 flex-1 flex items-center gap-3">
-              <Music className="h-6 w-6 text-primary flex-shrink-0" />
-              <div className="min-w-0">
-                <h1 className="text-xl sm:text-2xl font-bold text-foreground">Audio UI</h1>
-                <p className="text-xs sm:text-sm text-muted-foreground truncate">
-                  Professional audio editing in your browser
-                </p>
-              </div>
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                variant="ghost"
-                size="icon"
-                title="Settings"
-              >
-                <Settings className="h-5 w-5" />
-              </Button>
-              <ThemeToggle />
-            </div>
-          </div>
-        </header>
-
-        {/* Main content */}
-        <main className="container mx-auto px-3 sm:px-4 py-6 sm:py-8">
-          <AudioEditor />
-        </main>
-
-        {/* Footer */}
-        <footer className="border-t border-border mt-8 sm:mt-12">
-          <div className="container mx-auto px-3 sm:px-4 py-6 text-center text-xs sm:text-sm text-muted-foreground">
-            <p>
-              Powered by{' '}
-              <a
-                href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:underline"
-              >
-                Web Audio API
-              </a>
-              {' '}and{' '}
-              <a
-                href="https://nextjs.org"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:underline"
-              >
-                Next.js 16
-              </a>
-            </p>
-            <p className="mt-2">
-              All audio processing happens locally in your browser. No files are uploaded.
-            </p>
-          </div>
-        </footer>
+      <div className="flex flex-col h-screen bg-background overflow-hidden">
+        {/* Audio Editor (includes header) */}
+        <AudioEditor />
       </div>
     </ToastProvider>
   );