feat: initialize Next.js 16 project with Tailwind CSS 4 and Docker support

Phase 1 Implementation:
- Set up Next.js 16 with React 19, TypeScript 5, and Turbopack
- Configure Tailwind CSS 4 with OKLCH color system
- Implement dark/light theme support
- Create core UI components: Button, Card, Slider, Progress, Toast
- Add ThemeToggle component for theme switching
- Set up project directory structure for audio editor
- Create storage utilities for settings management
- Add Dockerfile with multi-stage build (Node + nginx)
- Configure nginx for static file serving with caching
- Add docker-compose.yml for easy deployment
- Configure static export mode for production

Tech Stack:
- Next.js 16 with Turbopack
- React 19
- TypeScript 5
- Tailwind CSS 4
- pnpm 9.0.0
- nginx 1.27 (for Docker deployment)

Build verified and working ✓

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

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

components/ui/Progress.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: number;
+  max?: number;
+  showValue?: boolean;
+  variant?: 'default' | 'success' | 'warning' | 'destructive';
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  (
+    {
+      className,
+      value = 0,
+      max = 100,
+      showValue = false,
+      variant = 'default',
+      ...props
+    },
+    ref
+  ) => {
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+
+    return (
+      <div ref={ref} className={cn('w-full', className)} {...props}>
+        {showValue && (
+          <div className="flex justify-between mb-1">
+            <span className="text-sm font-medium text-foreground">
+              Progress
+            </span>
+            <span className="text-sm text-muted-foreground">
+              {Math.round(percentage)}%
+            </span>
+          </div>
+        )}
+        <div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
+          <div
+            className={cn(
+              'h-full transition-all duration-300 ease-in-out',
+              {
+                'bg-primary': variant === 'default',
+                'bg-success': variant === 'success',
+                'bg-warning': variant === 'warning',
+                'bg-destructive': variant === 'destructive',
+              }
+            )}
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+Progress.displayName = 'Progress';
+
+export { Progress };