trysem
/

4kaudio

Model card Files Files and versions

xet

Community

trysem commited on Apr 18

Commit

5e6dfa9

verified ·

1 Parent(s): a52782c

Create m4pro_running_copy_best_rightside_allignment

Browse files

Files changed (1) hide show

m4pro_running_copy_best_rightside_allignment +1216 -0

m4pro_running_copy_best_rightside_allignment ADDED Viewed

	@@ -0,0 +1,1216 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>4K Transparent Audio Visualizer</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <style>
+        body { margin: 0; padding: 0; background-color: #020617; color: #e2e8f0; }
+        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
+        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+        .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: #0f172a; }
+        ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #334155; }
+        /* Range slider customizations */
+        input[type=range] {
+            -webkit-appearance: none;
+            background: transparent;
+        }
+        input[type=range]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            height: 14px;
+            width: 14px;
+            border-radius: 50%;
+            background: #06b6d4;
+            cursor: pointer;
+            margin-top: -5px;
+            box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
+        }
+        input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 4px;
+            cursor: pointer;
+            background: #1e293b;
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+        const { useState, useRef, useEffect, useCallback } = React;
+        // --- SVG Icons ---
+        const Upload = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>;
+        const Play = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>;
+        const Pause = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>;
+        const ImageIcon = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>;
+        const Video = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>;
+        const Settings2 = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>;
+        const Loader2 = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>;
+        const StopCircle = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><rect x="9" y="9" width="6" height="6"/></svg>;
+        const Sparkles = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>;
+        const Monitor = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>;
+        const ImagePlus = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/><circle cx="9" cy="9" r="2"/><path d="M19 3v6"/><path d="M16 6h6"/></svg>;
+        const RotateCcw = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>;
+        const Lock = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>;
+        const Unlock = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>;
+        const Activity = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>;
+        const Scissors = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="20" y1="4" x2="8.12" y2="15.88"/><line x1="14.47" y1="14.48" x2="20" y2="20"/><line x1="8.12" y1="8.12" x2="12" y2="12"/></svg>;
+        const Type = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>;
+        const Zap = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>;
+        const Save = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>;
+        const Maximize = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>;
+        const FlipHorizontal = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3"/><path d="M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3"/><path d="M12 20v2"/><path d="M12 14v2"/><path d="M12 8v2"/><path d="M12 2v2"/></svg>;
+        const FlipVertical = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3"/><path d="M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3"/><path d="M4 12H2"/><path d="M10 12H8"/><path d="M16 12h-2"/><path d="M22 12h-2"/></svg>;
+        const RefreshCw = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>;
+        const ChevronDown = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>;
+        const ChevronUp = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="18 15 12 9 6 15"/></svg>;
+        // UI Component for Slider Headers with Reset
+        const ControlHeader = ({ label, valueDisplay, onReset, extra }) => (
+            <div className="flex justify-between items-end mb-2">
+                <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-slate-400">{label}</span>
+                    {extra}
+                </div>
+                <div className="flex items-center gap-2">
+                    {valueDisplay !== undefined && <span className="text-xs text-slate-500 font-mono">{valueDisplay}</span>}
+                    {onReset && (
+                        <button onClick={onReset} className="text-slate-500 hover:text-cyan-400 transition-colors focus:outline-none" title={`Reset ${label}`}>
+                            <RotateCcw className="w-3 h-3" />
+                        </button>
+                    )}
+                </div>
+            </div>
+        );
+        function App() {
+          const canvasRef = useRef(null);
+          const audioRef = useRef(null);
+          const audioCtxRef = useRef(null);
+          const analyserRef = useRef(null);
+          const sourceRef = useRef(null);
+          const destRef = useRef(null);
+          const reqIdRef = useRef(null);
+          const mediaRecorderRef = useRef(null);
+          const chunksRef = useRef([]);
+          const bgImgRef = useRef(null);
+          // Two separate arrays: one for visualizer (time or freq), one strictly for bass detection
+          const dataArrayRef = useRef(new Uint8Array(2048));
+          const bassArrayRef = useRef(new Uint8Array(10));
+          const lastDrawTimeRef = useRef(0);
+          // --- Audio Player State ---
+          const [audioSrc, setAudioSrc] = useState(null);
+          const [fileName, setFileName] = useState('');
+          const [isPlaying, setIsPlaying] = useState(false);
+          const [isExportingVideo, setIsExportingVideo] = useState(false);
+          const [exportProgress, setExportProgress] = useState(0);
+          const [audioTime, setAudioTime] = useState(0);
+          const [audioDuration, setAudioDuration] = useState(0);
+          // --- Visual Settings ---
+          const [vizType, setVizType] = useState('bars');
+          const [color, setColor] = useState('#00ffcc');
+          const [thickness, setThickness] = useState(12);
+          const [spacing, setSpacing] = useState(8);
+          const [sensitivity, setSensitivity] = useState(1.5);
+          const [smoothing, setSmoothing] = useState(0.85);
+          // --- Transform Settings ---
+          const [offsetX, setOffsetX] = useState(0);
+          const [offsetY, setOffsetY] = useState(0);
+          const [scale, setScale] = useState(1.0);
+          const [scaleX, setScaleX] = useState(1.0);
+          const [scaleY, setScaleY] = useState(1.0);
+          const [rotation, setRotation] = useState(0);
+          const offsetRef = useRef({ x: 0, y: 0 });
+          // Drag State
+          const [isDragging, setIsDragging] = useState(false);
+          const dragRef = useRef({ startX: 0, startY: 0, initX: 0, initY: 0 });
+          // --- Advanced Features States ---
+          const [colorMode, setColorMode] = useState('solid');
+          const [color2, setColor2] = useState('#b829ff');
+          const [glow, setGlow] = useState(false);
+          const [taperEdges, setTaperEdges] = useState(false);
+          const [resolution, setResolution] = useState('4k_16_9');
+          const [bgType, setBgType] = useState('transparent');
+          const [bgColor, setBgColor] = useState('#000000');
+          const [bgImageSrc, setBgImageSrc] = useState(null);
+          const [bgImageFit, setBgImageFit] = useState('contain');
+          const [exportFormat, setExportFormat] = useState('mp4');
+          const [exportFps, setExportFps] = useState(30);
+          const [scaleLock, setScaleLock] = useState(false);
+          const scaleRatioRef = useRef(1.0);
+          const [mirrorX, setMirrorX] = useState(false);
+          const [mirrorY, setMirrorY] = useState(false);
+          const [isFilled, setIsFilled] = useState(false);
+          const [bgBeatReactive, setBgBeatReactive] = useState(false);
+          const [overlayText1, setOverlayText1] = useState('');
+          const [overlayText2, setOverlayText2] = useState('');
+          const [overlayTextSize, setOverlayTextSize] = useState(60);
+          const [overlayTextColor, setOverlayTextColor] = useState('#ffffff');
+          const [overlayTextPos, setOverlayTextPos] = useState('bottom');
+          const [freqBand, setFreqBand] = useState('all');
+          const [flashOnBeat, setFlashOnBeat] = useState(false);
+          const [flashColor, setFlashColor] = useState('#ffffff');
+          const [flashThreshold, setFlashThreshold] = useState(230);
+          const [exportStart, setExportStart] = useState(0);
+          const [exportEnd, setExportEnd] = useState(0);
+          const [safeZone, setSafeZone] = useState('none');
+          // --- Minimize section states ---
+          const [minStates, setMinStates] = useState({
+              audio: false, visual: false, transform: false, text: false, output: false, export: false
+          });
+          const toggleMin = function(key) {
+              setMinStates(function(prev) { return {...prev, [key]: !prev[key]}; });
+          };
+          const playButtonRef = useRef(null);
+          const RESOLUTIONS = {
+            '4k_16_9': { w: 3840, h: 2160, label: '4K (16:9)', isVertical: false },
+            '1080p_16_9': { w: 1920, h: 1080, label: '1080p (16:9)', isVertical: false },
+            '4k_9_16': { w: 2160, h: 3840, label: '4K Vertical (9:16)', isVertical: true },
+            '1080p_9_16': { w: 1080, h: 1920, label: '1080p Vertical (9:16)', isVertical: true }
+          };
+          // --- Preset & Reset Logic ---
+          const savePreset = function() {
+              const preset = { vizType, color, thickness, spacing, sensitivity, smoothing, colorMode, color2, glow, taperEdges, resolution, bgType, bgColor, bgImageFit, scale, scaleX, scaleY, rotation, offsetX, offsetY, mirrorX, mirrorY, isFilled, bgBeatReactive, freqBand, flashOnBeat, flashColor, flashThreshold, overlayText1, overlayText2, overlayTextSize, overlayTextColor, overlayTextPos };
+              localStorage.setItem('viz_preset_v4', JSON.stringify(preset));
+              alert('Settings saved as Preset!');
+          };
+          const loadPreset = function() {
+              const str = localStorage.getItem('viz_preset_v4');
+              if (str) {
+                  try {
+                      const p = JSON.parse(str);
+                      if (p.vizType !== undefined) setVizType(p.vizType);
+                      if (p.color !== undefined) setColor(p.color);
+                      if (p.thickness !== undefined) setThickness(p.thickness);
+                      if (p.spacing !== undefined) setSpacing(p.spacing);
+                      if (p.sensitivity !== undefined) setSensitivity(p.sensitivity);
+                      if (p.smoothing !== undefined) setSmoothing(p.smoothing);
+                      if (p.colorMode !== undefined) setColorMode(p.colorMode);
+                      if (p.color2 !== undefined) setColor2(p.color2);
+                      if (p.glow !== undefined) setGlow(p.glow);
+                      if (p.taperEdges !== undefined) setTaperEdges(p.taperEdges);
+                      if (p.resolution !== undefined) setResolution(p.resolution);
+                      if (p.bgType !== undefined) setBgType(p.bgType);
+                      if (p.bgColor !== undefined) setBgColor(p.bgColor);
+                      if (p.bgImageFit !== undefined) setBgImageFit(p.bgImageFit);
+                      if (p.scale !== undefined) setScale(p.scale);
+                      if (p.scaleX !== undefined) setScaleX(p.scaleX);
+                      if (p.scaleY !== undefined) setScaleY(p.scaleY);
+                      if (p.rotation !== undefined) setRotation(p.rotation);
+                      if (p.offsetX !== undefined) { setOffsetX(p.offsetX); offsetRef.current.x = p.offsetX; }
+                      if (p.offsetY !== undefined) { setOffsetY(p.offsetY); offsetRef.current.y = p.offsetY; }
+                      if (p.mirrorX !== undefined) setMirrorX(p.mirrorX);
+                      if (p.mirrorY !== undefined) setMirrorY(p.mirrorY);
+                      if (p.isFilled !== undefined) setIsFilled(p.isFilled);
+                      if (p.bgBeatReactive !== undefined) setBgBeatReactive(p.bgBeatReactive);
+                      if (p.freqBand !== undefined) setFreqBand(p.freqBand);
+                      if (p.flashOnBeat !== undefined) setFlashOnBeat(p.flashOnBeat);
+                      if (p.flashColor !== undefined) setFlashColor(p.flashColor);
+                      if (p.flashThreshold !== undefined) setFlashThreshold(p.flashThreshold);
+                      if (p.overlayText1 !== undefined) setOverlayText1(p.overlayText1);
+                      if (p.overlayText2 !== undefined) setOverlayText2(p.overlayText2);
+                      if (p.overlayTextSize !== undefined) setOverlayTextSize(p.overlayTextSize);
+                      if (p.overlayTextColor !== undefined) setOverlayTextColor(p.overlayTextColor);
+                      if (p.overlayTextPos !== undefined) setOverlayTextPos(p.overlayTextPos);
+                  } catch (e) { console.error("Failed to load preset"); }
+              } else { alert('No preset found!'); }
+          };
+          const handleResetAll = function() {
+              if (confirm("Are you sure you want to reset all settings to defaults?")) {
+                  setVizType('bars'); setColor('#00ffcc'); setThickness(12); setSpacing(8); setSensitivity(1.5); setSmoothing(0.85);
+                  setColorMode('solid'); setColor2('#b829ff'); setGlow(false); setTaperEdges(false); setResolution('4k_16_9');
+                  setBgType('transparent'); setBgColor('#000000'); setBgImageSrc(null); setBgImageFit('contain');
+                  setScale(1.0); setScaleX(1.0); setScaleY(1.0); setRotation(0); setOffsetX(0); setOffsetY(0); offsetRef.current = {x: 0, y: 0};
+                  setMirrorX(false); setMirrorY(false); setIsFilled(false); setBgBeatReactive(false);
+                  setOverlayText1(''); setOverlayText2(''); setOverlayTextSize(60); setOverlayTextColor('#ffffff'); setOverlayTextPos('bottom');
+                  setFreqBand('all'); setFlashOnBeat(false); setFlashColor('#ffffff'); setFlashThreshold(230); setExportStart(0); setExportEnd(0);
+              }
+          };
+          // --- Sidebar Section Header ---
+          const SectionHeader = ({ title, icon: Icon, sectionKey }) => (
+              <div className={`flex justify-between items-center ${minStates[sectionKey] ? '' : 'mb-4'}`}>
+                  <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-500 flex items-center gap-2">
+                      <Icon className="w-4 h-4" /> {title}
+                  </h2>
+                  <button onClick={function() { toggleMin(sectionKey); }} className="p-1.5 text-slate-500 hover:text-slate-300 hover:bg-slate-800 rounded transition-colors" title={minStates[sectionKey] ? "Expand" : "Minimize"}>
+                      {minStates[sectionKey] ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
+                  </button>
+              </div>
+          );
+          useEffect(() => {
+            if (bgImageSrc) {
+              const img = new Image();
+              img.onload = () => { bgImgRef.current = img; };
+              img.src = bgImageSrc;
+            } else { bgImgRef.current = null; }
+          }, [bgImageSrc]);
+          const handleBgUpload = function(e) {
+            const file = e.target.files[0];
+            if (file) {
+              if (bgImageSrc) URL.revokeObjectURL(bgImageSrc);
+              setBgImageSrc(URL.createObjectURL(file));
+              setBgType('image');
+            }
+          };
+          const initAudio = useCallback(() => {
+            if (!audioCtxRef.current) {
+              const AudioContext = window.AudioContext || window.webkitAudioContext;
+              audioCtxRef.current = new AudioContext();
+              analyserRef.current = audioCtxRef.current.createAnalyser();
+              destRef.current = audioCtxRef.current.createMediaStreamDestination();
+              if (!sourceRef.current && audioRef.current) {
+                sourceRef.current = audioCtxRef.current.createMediaElementSource(audioRef.current);
+                sourceRef.current.connect(analyserRef.current);
+                analyserRef.current.connect(audioCtxRef.current.destination);
+                analyserRef.current.connect(destRef.current);
+              }
+            }
+            if (audioCtxRef.current.state === 'suspended') {
+              audioCtxRef.current.resume();
+            }
+          }, []);
+          const handleFileUpload = function(e) {
+            const file = e.target.files[0];
+            if (file) {
+              if (audioSrc) URL.revokeObjectURL(audioSrc);
+              const url = URL.createObjectURL(file);
+              setAudioSrc(url);
+              setFileName(file.name);
+              setIsPlaying(false);
+              setAudioTime(0);
+              if (audioRef.current) {
+                audioRef.current.pause();
+                audioRef.current.currentTime = 0;
+              }
+            }
+          };
+          const togglePlay = function() {
+            if (!audioSrc) return;
+            initAudio();
+            if (isPlaying) audioRef.current.pause();
+            else audioRef.current.play();
+            setIsPlaying(!isPlaying);
+          };
+          const handleTimeUpdate = function() { if (audioRef.current) setAudioTime(audioRef.current.currentTime); };
+          const handleLoadedMetadata = function() { if (audioRef.current) setAudioDuration(audioRef.current.duration); };
+          const handleSeek = function(e) {
+            const time = Number(e.target.value);
+            if (audioRef.current) audioRef.current.currentTime = time;
+            setAudioTime(time);
+          };
+          const formatTime = function(time) {
+            if (isNaN(time)) return "0:00";
+            const m = Math.floor(time / 60);
+            const s = Math.floor(time % 60).toString().padStart(2, '0');
+            return `${m}:${s}`;
+          };
+          // --- Drag Logic ---
+          const handleMouseDown = function(e) {
+            setIsDragging(true);
+            dragRef.current = { startX: e.clientX, startY: e.clientY, initX: offsetRef.current.x, initY: offsetRef.current.y };
+          };
+          const handleMouseMove = function(e) {
+            if (!isDragging || !canvasRef.current) return;
+            const rect = canvasRef.current.getBoundingClientRect();
+            const deltaX = e.clientX - dragRef.current.startX;
+            const deltaY = e.clientY - dragRef.current.startY;
+            const percentX = (deltaX / rect.width) * 100;
+            const percentY = (deltaY / rect.height) * 100;
+            const newX = Math.max(-50, Math.min(50, dragRef.current.initX + percentX));
+            const newY = Math.max(-50, Math.min(50, dragRef.current.initY + percentY));
+            offsetRef.current.x = newX; offsetRef.current.y = newY;
+            setOffsetX(newX); setOffsetY(newY);
+          };
+          const handleMouseUpOrLeave = function() { setIsDragging(false); };
+          const handleScaleXChange = function(val) {
+              setScaleX(val);
+              if (scaleLock) setScaleY(Math.max(0.1, Math.min(5.0, val / scaleRatioRef.current)));
+          };
+          const handleScaleYChange = function(val) {
+              setScaleY(val);
+              if (scaleLock) setScaleX(Math.max(0.1, Math.min(5.0, val * scaleRatioRef.current)));
+          };
+          const toggleScaleLock = function() {
+              if (!scaleLock) scaleRatioRef.current = scaleX / scaleY;
+              setScaleLock(!scaleLock);
+          };
+          useEffect(() => {
+            const handleKeyDown = (e) => {
+              if (e.code === 'Space' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
+                e.preventDefault();
+                playButtonRef.current?.click();
+              }
+            };
+            window.addEventListener('keydown', handleKeyDown);
+            return () => window.removeEventListener('keydown', handleKeyDown);
+          }, []);
+          const getSafeZoneStyle = function(zone, canvasW, canvasH) {
+              const canvasRatio = canvasW / canvasH;
+              let targetRatio = canvasRatio;
+              if (zone === '1:1') targetRatio = 1;
+              else if (zone === '4:5') targetRatio = 4/5;
+              else if (zone === '9:16') targetRatio = 9/16;
+              else if (zone === '16:9') targetRatio = 16/9;
+              else if (zone === 'title_safe') return { width: '90%', height: '90%' };
+              if (targetRatio > canvasRatio) return { width: '100%', aspectRatio: `${targetRatio}` };
+              else return { height: '100%', aspectRatio: `${targetRatio}` };
+          };
+          // --- CORE DRAW LOOP ---
+          const draw = useCallback(() => {
+            if (!canvasRef.current) {
+              reqIdRef.current = requestAnimationFrame(draw);
+              return;
+            }
+            const now = performance.now();
+            if (isExportingVideo && exportFps < 60) {
+              const msPerFrame = 1000 / exportFps;
+              if (now - lastDrawTimeRef.current < msPerFrame) {
+                reqIdRef.current = requestAnimationFrame(draw);
+                return;
+              }
+            }
+            lastDrawTimeRef.current = now;
+            const canvas = canvasRef.current;
+            const ctx = canvas.getContext('2d', { alpha: bgType === 'transparent', willReadFrequently: false });
+            const res = RESOLUTIONS[resolution] || RESOLUTIONS['4k_16_9'];
+            if (canvas.width !== res.w || canvas.height !== res.h) {
+               canvas.width = res.w; canvas.height = res.h;
+            }
+            const width = canvas.width;
+            const height = canvas.height;
+            ctx.clearRect(0, 0, width, height);
+            // Fetch Data First
+            let bassAvg = 0;
+            if (analyserRef.current) {
+              analyserRef.current.smoothingTimeConstant = smoothing;
+              analyserRef.current.fftSize = 2048;
+              const dataArray = dataArrayRef.current;
+              const bassArray = bassArrayRef.current;
+              // Always get frequency data for accurate bass detection regardless of visualizer mode
+              analyserRef.current.getByteFrequencyData(bassArray);
+              for(let i=0; i<10; i++) bassAvg += bassArray[i];
+              bassAvg /= 10;
+              // Get visualizer specific data
+              if (vizType === 'bars' || vizType === 'circle' || vizType === 'symmetric_wave') {
+                analyserRef.current.getByteFrequencyData(dataArray);
+              } else if (vizType === 'wave') {
+                analyserRef.current.getByteTimeDomainData(dataArray);
+              }
+            }
+            // Draw Background
+            if (bgType === 'color') {
+              ctx.fillStyle = bgColor;
+              ctx.fillRect(0, 0, width, height);
+            } else if (bgType === 'image' && bgImgRef.current) {
+              const img = bgImgRef.current;
+              const imgRatio = img.width / img.height;
+              const canvasRatio = width / height;
+              let drawW, drawH, drawX, drawY;
+              if (bgImageFit === 'stretch') { drawW = width; drawH = height; drawX = 0; drawY = 0; }
+              else if (bgImageFit === 'cover') {
+                if (imgRatio > canvasRatio) { drawH = height; drawW = height * imgRatio; drawX = (width - drawW) / 2; drawY = 0; }
+                else { drawW = width; drawH = width / imgRatio; drawX = 0; drawY = (height - drawH) / 2; }
+              } else if (bgImageFit === 'fit-width') {
+                drawW = width; drawH = width / imgRatio; drawX = 0; drawY = (height - drawH) / 2;
+              } else {
+                if (imgRatio > canvasRatio) { drawW = width; drawH = width / imgRatio; drawX = 0; drawY = (height - drawH) / 2; }
+                else { drawH = height; drawW = height * imgRatio; drawX = (width - drawW) / 2; drawY = 0; }
+              }
+              // Apply Beat-Reactive Background Scale
+              if (bgBeatReactive) {
+                const bgScale = 1.0 + (bassAvg / 255) * 0.08;
+                const scaledW = drawW * bgScale;
+                const scaledH = drawH * bgScale;
+                const scaledX = drawX - (scaledW - drawW) / 2;
+                const scaledY = drawY - (scaledH - drawH) / 2;
+                ctx.drawImage(img, scaledX, scaledY, scaledW, scaledH);
+              } else {
+                ctx.drawImage(img, drawX, drawY, drawW, drawH);
+              }
+            }
+            if (analyserRef.current) {
+              const bufferLength = analyserRef.current.frequencyBinCount;
+              const dataArray = dataArrayRef.current;
+              ctx.save();
+              const centerX = width / 2 + (width * (offsetRef.current.x / 100));
+              const centerY = height / 2 + (height * (offsetRef.current.y / 100));
+              ctx.translate(centerX, centerY);
+              ctx.scale(scale * scaleX, scale * scaleY);
+              ctx.rotate((rotation * Math.PI) / 180);
+              // Set Colors & Flashes
+              let activeColor = color;
+              if (colorMode === 'gradient') {
+                const grad = ctx.createLinearGradient(-width/2, -height/2, width/2, height/2);
+                grad.addColorStop(0, color); grad.addColorStop(1, color2);
+                activeColor = grad;
+              } else if (colorMode === 'rainbow') {
+                const grad = ctx.createLinearGradient(-width/2, 0, width/2, 0);
+                grad.addColorStop(0, '#ff0000'); grad.addColorStop(0.16, '#ffff00'); grad.addColorStop(0.33, '#00ff00');
+                grad.addColorStop(0.5, '#00ffff'); grad.addColorStop(0.66, '#0000ff'); grad.addColorStop(0.83, '#ff00ff');
+                grad.addColorStop(1, '#ff0000'); activeColor = grad;
+              }
+              if (flashOnBeat && bassAvg > flashThreshold) { activeColor = flashColor; }
+              ctx.strokeStyle = activeColor;
+              ctx.fillStyle = activeColor;
+              ctx.lineCap = 'round';
+              ctx.lineJoin = 'round';
+              // Frequency Band Isolation
+              let startIndex = 0;
+              let bandLength = Math.floor(bufferLength * 0.75);
+              if (freqBand === 'bass') { startIndex = 0; bandLength = Math.floor(bufferLength * 0.08); }
+              else if (freqBand === 'mid') { startIndex = Math.floor(bufferLength * 0.08); bandLength = Math.floor(bufferLength * 0.3); }
+              else if (freqBand === 'treble') { startIndex = Math.floor(bufferLength * 0.38); bandLength = Math.floor(bufferLength * 0.37); }
+              const drawVisualizerPath = () => {
+                const buildShapes = () => {
+                    ctx.beginPath();
+                    if (vizType === 'bars') {
+                      const step = thickness + spacing;
+                      const maxBars = Math.floor((width / 2) / step);
+                      const numBars = Math.min(maxBars, bandLength);
+                      for (let i = 0; i < numBars; i++) {
+                        const dataIndex = startIndex + Math.floor((i / numBars) * bandLength);
+                        const boost = Math.pow(1 + (i / numBars), 1.5);
+                        let edgeMultiplier = 1;
+                        if (taperEdges) edgeMultiplier = Math.pow(1 - (i / numBars), 2);
+                        const value = dataArray[dataIndex] * boost * sensitivity * edgeMultiplier;
+                        const barHeight = Math.max(thickness / 2, (value / 255) * height * 0.8);
+                        const xOffset = i * step + (step / 2);
+                        if (isFilled) {
+                            ctx.rect(xOffset - thickness/2, height/2 - barHeight, thickness, barHeight);
+                            ctx.rect(-xOffset - thickness/2, height/2 - barHeight, thickness, barHeight);
+                        } else {
+                            ctx.moveTo(xOffset, height / 2 - (thickness / 2)); ctx.lineTo(xOffset, height / 2 - barHeight);
+                            ctx.moveTo(-xOffset, height / 2 - (thickness / 2)); ctx.lineTo(-xOffset, height / 2 - barHeight);
+                        }
+                      }
+                    } else if (vizType === 'symmetric_wave') {
+                      // Frequency domain discrete wave (symmetric top/bottom AND left/right)
+                      const step = thickness + spacing;
+                      const maxBars = Math.floor((width / 2) / step);
+                      const usefulLength = Math.floor(bandLength * 0.75);
+                      const numBars = Math.min(maxBars, usefulLength);
+                      for (let i = 0; i < numBars; i++) {
+                        const dataIndex = startIndex + Math.floor((i / numBars) * usefulLength);
+                        const boost = Math.pow(1 + (i / numBars), 1.5);
+                        let edgeMultiplier = 1;
+                        if (taperEdges) edgeMultiplier = Math.pow(1 - (i / numBars), 2);
+                        const value = dataArray[dataIndex] * boost * sensitivity * edgeMultiplier;
+                        const barHeight = Math.max(thickness / 2, (value / 255) * height * 0.4);
+                        const xOffset = i * step + (step / 2);
+                        if (isFilled) {
+                            ctx.rect(xOffset - thickness/2, -barHeight, thickness, barHeight * 2);
+                            ctx.rect(-xOffset - thickness/2, -barHeight, thickness, barHeight * 2);
+                        } else {
+                            ctx.moveTo(xOffset, -barHeight); ctx.lineTo(xOffset, barHeight);
+                            ctx.moveTo(-xOffset, -barHeight); ctx.lineTo(-xOffset, barHeight);
+                        }
+                      }
+                    } else if (vizType === 'wave') {
+                      const sliceWidth = width / bandLength;
+                      let x = -width / 2;
+                      if (isFilled) ctx.moveTo(-width/2, height/2);
+                      for (let i = 0; i < bandLength; i++) {
+                        const dataIndex = startIndex + i;
+                        const normalized = (dataArray[dataIndex] / 128.0) - 1;
+                        let edgeMultiplier = 1;
+                        if (taperEdges) edgeMultiplier = Math.pow(1 - (Math.abs(i - bandLength/2) / (bandLength/2)), 2);
+                        const y = normalized * sensitivity * (height / 2) * edgeMultiplier;
+                        if (i === 0 && !isFilled) ctx.moveTo(x, y);
+                        else ctx.lineTo(x, y);
+                        x += sliceWidth;
+                      }
+                      if (isFilled) { ctx.lineTo(width/2, height/2); ctx.closePath(); }
+                    } else if (vizType === 'circle') {
+                      const radius = height / 4;
+                      const circumference = 2 * Math.PI * radius;
+                      const stepSize = thickness + spacing;
+                      const bars = Math.min(180, Math.floor(circumference / stepSize));
+                      const step = (Math.PI * 2) / bars;
+                      for (let i = 0; i < bars; i++) {
+                        const dataIndex = startIndex + Math.floor((i / bars) * bandLength);
+                        const value = (dataArray[dataIndex] / 255) * sensitivity;
+                        const barHeight = Math.max(thickness / 2, value * (height / 3));
+                        const angle = i * step;
+                        const x1 = Math.cos(angle) * radius; const y1 = Math.sin(angle) * radius;
+                        const x2 = Math.cos(angle) * (radius + barHeight); const y2 = Math.sin(angle) * (radius + barHeight);
+                        ctx.moveTo(x1, y1); ctx.lineTo(x2, y2);
+                      }
+                    }
+                    if (isFilled && vizType !== 'circle') ctx.fill(); else ctx.stroke();
+                    if (vizType === 'circle' && !isFilled) {
+                      const radius = height / 4;
+                      ctx.beginPath();
+                      ctx.arc(0, 0, radius - thickness, 0, Math.PI * 2);
+                      const originalWidth = ctx.lineWidth; ctx.lineWidth = originalWidth / 2; ctx.stroke(); ctx.lineWidth = originalWidth;
+                    }
+                };
+                // Apply mirroring
+                buildShapes();
+                if (mirrorX) { ctx.save(); ctx.scale(-1, 1); buildShapes(); ctx.restore(); }
+                if (mirrorY) { ctx.save(); ctx.scale(1, -1); buildShapes(); ctx.restore(); }
+                if (mirrorX && mirrorY) { ctx.save(); ctx.scale(-1, -1); buildShapes(); ctx.restore(); }
+              };
+              // Glow logic
+              if (glow) {
+                ctx.globalCompositeOperation = 'lighter';
+                ctx.lineWidth = thickness * 3; ctx.globalAlpha = 0.15; drawVisualizerPath();
+                ctx.lineWidth = thickness * 1.5; ctx.globalAlpha = 0.4; drawVisualizerPath();
+                ctx.lineWidth = thickness; ctx.globalAlpha = 1.0; drawVisualizerPath();
+                ctx.globalCompositeOperation = 'source-over';
+              } else {
+                ctx.lineWidth = thickness; ctx.globalAlpha = 1.0; drawVisualizerPath();
+              }
+              ctx.restore();
+            }
+            // Overlay Text
+            if (overlayText1 || overlayText2) {
+                ctx.save(); ctx.fillStyle = overlayTextColor; ctx.textAlign = 'center';
+                const scaleFactor = res.w / 3840;
+                const fSize1 = overlayTextSize * scaleFactor * 3;
+                const fSize2 = fSize1 * 0.6;
+                let startY = res.h / 2;
+                if (overlayTextPos === 'top') startY = res.h * 0.15;
+                if (overlayTextPos === 'bottom') startY = res.h * 0.85;
+                ctx.shadowColor = 'rgba(0,0,0,0.8)'; ctx.shadowBlur = 15 * scaleFactor;
+                ctx.shadowOffsetX = 3 * scaleFactor; ctx.shadowOffsetY = 3 * scaleFactor;
+                if (overlayText1) { ctx.font = `bold ${fSize1}px sans-serif`; ctx.fillText(overlayText1, res.w / 2, startY); }
+                if (overlayText2) { ctx.font = `600 ${fSize2}px sans-serif`; ctx.fillText(overlayText2, res.w / 2, startY + fSize1 * 1.2); }
+                ctx.restore();
+            }
+            reqIdRef.current = requestAnimationFrame(draw);
+          }, [vizType, color, thickness, spacing, sensitivity, smoothing, colorMode, color2, glow, taperEdges, resolution, bgType, bgColor, bgImageFit, scale, scaleX, scaleY, rotation, isExportingVideo, exportFps, mirrorX, mirrorY, isFilled, bgBeatReactive, freqBand, flashOnBeat, flashColor, flashThreshold, overlayText1, overlayText2, overlayTextSize, overlayTextColor, overlayTextPos]);
+          useEffect(() => {
+            reqIdRef.current = requestAnimationFrame(draw);
+            return () => cancelAnimationFrame(reqIdRef.current);
+          }, [draw]);
+          const handleAudioEnded = function() {
+            setIsPlaying(false);
+            if (isExportingVideo) stopVideoExport();
+          };
+          const exportImage = function() {
+            if (!canvasRef.current) return;
+            const link = document.createElement('a');
+            link.download = `visualizer_${Date.now()}.png`;
+            link.href = canvasRef.current.toDataURL('image/png');
+            link.click();
+          };
+          const startVideoExport = async function() {
+            if (!audioSrc || !canvasRef.current || !audioCtxRef.current) {
+              alert("Please upload an audio file and press play at least once to initialize.");
+              return;
+            }
+            setIsExportingVideo(true); setExportProgress(0); chunksRef.current = [];
+            audioRef.current.pause();
+            audioRef.current.currentTime = exportStart > 0 ? exportStart : 0;
+            const canvasStream = canvasRef.current.captureStream(exportFps);
+            const audioStream = destRef.current.stream;
+            const combinedStream = new MediaStream([...canvasStream.getTracks(), ...audioStream.getAudioTracks()]);
+            let options = {}; let ext = 'webm';
+            const targetBitrate = resolution.startsWith('4k') ? 15000000 : 8000000;
+            if (exportFormat === 'mp4') {
+              if (MediaRecorder.isTypeSupported('video/mp4; codecs=h264')) { options = { mimeType: 'video/mp4; codecs=h264', videoBitsPerSecond: targetBitrate }; ext = 'mp4'; }
+              else if (MediaRecorder.isTypeSupported('video/mp4')) { options = { mimeType: 'video/mp4', videoBitsPerSecond: targetBitrate }; ext = 'mp4'; }
+              else { alert("Browser doesn't support MP4. Falling back to WebM."); options = { mimeType: 'video/webm; codecs=vp9', videoBitsPerSecond: targetBitrate }; }
+            } else {
+              options = { mimeType: 'video/webm; codecs=vp9', videoBitsPerSecond: targetBitrate };
+              if (!MediaRecorder.isTypeSupported(options.mimeType)) options = { mimeType: 'video/webm; codecs=vp8', videoBitsPerSecond: targetBitrate };
+              if (!MediaRecorder.isTypeSupported(options.mimeType)) options = { videoBitsPerSecond: targetBitrate };
+            }
+            try { mediaRecorderRef.current = new MediaRecorder(combinedStream, options); } catch (e) { alert("Recorder error."); setIsExportingVideo(false); return; }
+            mediaRecorderRef.current.ondataavailable = function(e) { if (e.data && e.data.size > 0) chunksRef.current.push(e.data); };
+            mediaRecorderRef.current.onstop = function() {
+              const blob = new Blob(chunksRef.current, { type: mediaRecorderRef.current.mimeType || 'video/mp4' });
+              const url = URL.createObjectURL(blob);
+              const link = document.createElement('a'); link.download = `viz_${Date.now()}.${ext}`; link.href = url; link.click(); URL.revokeObjectURL(url);
+              setIsExportingVideo(false); setExportProgress(0);
+            };
+            const duration = audioRef.current.duration;
+            const progressInterval = setInterval(function() {
+              if (audioRef.current && !audioRef.current.paused) {
+                const current = audioRef.current.currentTime;
+                const end = (exportEnd > 0 && exportEnd < duration) ? exportEnd : duration;
+                const start = exportStart > 0 ? exportStart : 0;
+                setExportProgress(Math.min(100, Math.max(0, ((current - start) / (end - start)) * 100)));
+                if (current >= end) stopVideoExport();
+              } else { clearInterval(progressInterval); }
+            }, 250);
+            mediaRecorderRef.current.start(1000);
+            await audioRef.current.play(); setIsPlaying(true);
+          };
+          const stopVideoExport = function() {
+            if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') mediaRecorderRef.current.stop();
+            audioRef.current.pause(); setIsPlaying(false);
+          };
+          return (
+            <div className="min-h-screen bg-slate-950 text-slate-200 font-sans selection:bg-cyan-500/30">
+              <header className="border-b border-slate-800 bg-slate-900/50 p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+                <div className="flex items-center gap-3">
+                  <div className="bg-cyan-500/20 p-2 rounded-lg">
+                    <Video className="w-6 h-6 text-cyan-400" />
+                  </div>
+                  <h1 className="text-xl font-bold tracking-tight text-white">4K Transparent Visualizer</h1>
+                </div>
+                <div className="flex items-center gap-3">
+                  <button onClick={handleResetAll} className="flex items-center gap-2 bg-slate-800 hover:bg-slate-700 border border-slate-700 px-3 py-1.5 rounded-lg text-sm text-slate-300 font-medium transition-colors" title="Reset all settings to default">
+                     <RefreshCw className="w-4 h-4" /> Reset All
+                  </button>
+                </div>
+              </header>
+              <main className="w-full max-w-[1800px] mx-auto p-4 sm:p-6 flex flex-col lg:grid lg:grid-cols-12 gap-6 lg:gap-8">
+                {/* --- LEFT SIDEBAR (Settings) --- */}
+                <div className="order-3 lg:order-1 lg:col-span-3 space-y-6 overflow-y-auto pr-2 custom-scrollbar" style={{maxHeight: 'calc(100vh - 8rem)'}}>
+                  <section className="bg-slate-900 p-5 sm:p-6 rounded-2xl border border-slate-800 shadow-xl transition-all">
+                    <SectionHeader title="Visual Settings" icon={Settings2} sectionKey="visual" />
+                    {!minStates.visual && (
+                      <div className="space-y-5 animate-in fade-in slide-in-from-top-2 duration-200">
+                        <div>
+                          <ControlHeader label="Style & Fill"
+                             extra={
+                               <label className="flex items-center gap-2 cursor-pointer group ml-4">
+                                 <span className="text-xs font-medium text-slate-500 group-hover:text-cyan-400 transition-colors">Fill Shapes</span>
+                                 <div className={`w-8 h-4 rounded-full transition-colors relative ${isFilled ? 'bg-cyan-500' : 'bg-slate-700'}`}>
+                                   <div className={`w-3 h-3 bg-white rounded-full absolute top-0.5 transition-transform ${isFilled ? 'left-4.5 translate-x-[14px]' : 'left-0.5'}`}></div>
+                                 </div>
+                                 <input type="checkbox" className="hidden" checked={isFilled} onChange={function(e) { setIsFilled(e.target.checked); }} />
+                               </label>
+                             }
+                          />
+                          <div className="grid grid-cols-2 gap-2">
+                            {[ {id: 'bars', label: 'Bars (Freq)'}, {id: 'symmetric_wave', label: 'Wave (Bars)'}, {id: 'wave', label: 'Wave (Line)'}, {id: 'circle', label: 'Circle'} ].map(function(type) {
+                              return <button key={type.id} onClick={function() { setVizType(type.id); }} className={`py-2 px-3 rounded-lg text-sm font-medium transition-all ${vizType === type.id ? 'bg-slate-700 text-white shadow-inner border border-slate-600' : 'bg-slate-950 text-slate-400 border border-slate-800 hover:border-slate-600'}`}>{type.label}</button>;
+                            })}
+                          </div>
+                        </div>
+                        <div>
+                          <ControlHeader label="Frequency Band Isolation" />
+                          <select value={freqBand} onChange={function(e) { setFreqBand(e.target.value); }} className="w-full bg-slate-950 border border-slate-700 text-slate-300 text-sm rounded-lg px-3 py-2 outline-none">
+                            <option value="all">All Frequencies (Default)</option>
+                            <option value="bass">Bass Only (Kick/Sub)</option>
+                            <option value="mid">Mids Only (Vocals/Melody)</option>
+                            <option value="treble">Treble Only (Hi-Hats)</option>
+                          </select>
+                        </div>
+                        <div className="p-3 bg-slate-950 rounded-xl border border-slate-800 space-y-3">
+                          <ControlHeader label="Color Style" />
+                          <div className="flex items-center gap-3 mb-4">
+                            <select value={colorMode} onChange={function(e) { setColorMode(e.target.value); }} className="bg-slate-900 border border-slate-700 text-slate-300 text-xs rounded px-2 py-2 outline-none">
+                              <option value="solid">Solid</option><option value="gradient">Gradient</option><option value="rainbow">Rainbow</option>
+                            </select>
+                            {colorMode !== 'rainbow' && <input type="color" value={color} onChange={function(e) { setColor(e.target.value); }} className="h-8 w-12 rounded cursor-pointer bg-slate-900 border border-slate-700 shrink-0" />}
+                            {colorMode === 'gradient' && <><span className="text-slate-500 text-xs font-medium">to</span><input type="color" value={color2} onChange={function(e) { setColor2(e.target.value); }} className="h-8 w-12 rounded cursor-pointer bg-slate-900 border border-slate-700 shrink-0" /></>}
+                            {colorMode === 'solid' && <input type="text" value={color} onChange={function(e) { setColor(e.target.value); }} className="flex-1 bg-slate-900 border border-slate-800 rounded-lg px-2 py-1.5 text-sm focus:ring-1 focus:ring-cyan-500 outline-none uppercase font-mono" />}
+                          </div>
+                          {/* Beat Flashes */}
+                          <div className="pt-3 border-t border-slate-800">
+                             <ControlHeader label="Beat Flash"
+                               extra={<Zap className="w-4 h-4 text-yellow-400 ml-2" />}
+                             />
+                             <div className="flex items-center justify-between mb-2">
+                               <span className="text-xs text-slate-500">Enable rhythmic flashing on heavy bass</span>
+                               <label className="relative inline-flex items-center cursor-pointer">
+                                 <input type="checkbox" checked={flashOnBeat} onChange={function(e) { setFlashOnBeat(e.target.checked); }} className="sr-only peer" />
+                                 <div className="w-9 h-5 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-yellow-500"></div>
+                               </label>
+                             </div>
+                             {flashOnBeat && (
+                                <div className="flex items-center gap-3 animate-in fade-in slide-in-from-top-2 mt-3 bg-slate-900 p-2 rounded-lg">
+                                   <input type="color" value={flashColor} onChange={function(e) { setFlashColor(e.target.value); }} className="h-8 w-10 rounded cursor-pointer bg-slate-950 border border-slate-700 shrink-0" title="Flash Color" />
+                                   <div className="flex-1">
+                                      <div className="flex justify-between items-center text-xs text-slate-500 mb-1">
+                                        <span>Sensitivity</span>
+                                        <button onClick={function() { setFlashThreshold(230); }} className="hover:text-cyan-400 transition-colors focus:outline-none" title="Reset Sensitivity"><RotateCcw className="w-3 h-3" /></button>
+                                      </div>
+                                      <input type="range" min="150" max="250" value={250 - (flashThreshold - 150)} onChange={function(e) { setFlashThreshold(250 - (Number(e.target.value) - 150)); }} className="w-full accent-yellow-500" />
+                                   </div>
+                                </div>
+                             )}
+                          </div>
+                        </div>
+                        <div className="space-y-4">
+                           <div>
+                             <ControlHeader label="Neon Glow Effect" extra={<Sparkles className="w-4 h-4 text-amber-400 ml-2" />} />
+                             <label className="relative inline-flex items-center cursor-pointer mt-1">
+                               <input type="checkbox" checked={glow} onChange={function(e) { setGlow(e.target.checked); }} className="sr-only peer" />
+                               <div className="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500"></div>
+                             </label>
+                           </div>
+                           <div>
+                             <ControlHeader label="Taper Edges (Minimal Spikes)" extra={<Activity className="w-4 h-4 text-emerald-400 ml-2" />} />
+                             <label className="relative inline-flex items-center cursor-pointer mt-1">
+                               <input type="checkbox" checked={taperEdges} onChange={function(e) { setTaperEdges(e.target.checked); }} className="sr-only peer" />
+                               <div className="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
+                             </label>
+                           </div>
+                        </div>
+                        <div>
+                          <ControlHeader label="Line Thickness" valueDisplay={`${thickness}px`} onReset={function() { setThickness(12); }} />
+                          <input type="range" min="2" max="64" value={thickness} onChange={function(e) { setThickness(Number(e.target.value)); }} className="w-full" />
+                        </div>
+                        <div>
+                          <ControlHeader label="Space Between Lines" valueDisplay={`${spacing}px`} onReset={function() { setSpacing(8); }} />
+                          <input type="range" min="0" max="64" value={spacing} onChange={function(e) { setSpacing(Number(e.target.value)); }} className="w-full" />
+                        </div>
+                        <div>
+                          <ControlHeader label="Amplitude (Height)" valueDisplay={`${sensitivity.toFixed(1)}x`} onReset={function() { setSensitivity(1.5); }} />
+                          <input type="range" min="0.5" max="3.0" step="0.1" value={sensitivity} onChange={function(e) { setSensitivity(Number(e.target.value)); }} className="w-full" />
+                        </div>
+                        <div>
+                          <ControlHeader label="Motion Smoothing" valueDisplay={`${Math.round(smoothing * 100)}%`} onReset={function() { setSmoothing(0.85); }} />
+                          <input type="range" min="0.1" max="0.99" step="0.01" value={smoothing} onChange={function(e) { setSmoothing(Number(e.target.value)); }} className="w-full" />
+                        </div>
+                      </div>
+                    )}
+                  </section>
+                  <section className="bg-slate-900 p-5 sm:p-6 rounded-2xl border border-slate-800 shadow-xl transition-all">
+                    <SectionHeader title="Text Overlay" icon={Type} sectionKey="text" />
+                    {!minStates.text && (
+                      <div className="space-y-4 animate-in fade-in slide-in-from-top-2 duration-200">
+                         <ControlHeader label="Custom Text Lines" />
+                         <input type="text" placeholder="Artist Name (Line 1)" value={overlayText1} onChange={function(e) { setOverlayText1(e.target.value); }} className="w-full bg-slate-950 border border-slate-700 text-slate-300 text-sm rounded-lg px-3 py-2.5 outline-none focus:ring-1 focus:ring-cyan-500" />
+                         <input type="text" placeholder="Track Title (Line 2)" value={overlayText2} onChange={function(e) { setOverlayText2(e.target.value); }} className="w-full bg-slate-950 border border-slate-700 text-slate-300 text-sm rounded-lg px-3 py-2.5 outline-none focus:ring-1 focus:ring-cyan-500" />
+                         <div className="flex items-center gap-3">
+                            <input type="color" value={overlayTextColor} onChange={function(e) { setOverlayTextColor(e.target.value); }} className="h-10 w-12 rounded cursor-pointer bg-slate-950 border border-slate-700 shrink-0" />
+                            <select value={overlayTextPos} onChange={function(e) { setOverlayTextPos(e.target.value); }} className="flex-1 bg-slate-950 border border-slate-700 text-slate-300 text-sm rounded-lg px-3 py-2.5 outline-none focus:ring-1 focus:ring-cyan-500">
+                               <option value="top">Top Centered</option>
+                               <option value="center">Middle Centered</option>
+                               <option value="bottom">Bottom Centered</option>
+                            </select>
+                         </div>
+                      </div>
+                    )}
+                  </section>
+                  <section className="bg-slate-900 p-5 sm:p-6 rounded-2xl border border-slate-800 shadow-xl transition-all">
+                    <SectionHeader title="Save & Export" icon={Save} sectionKey="export" />
+                    {!minStates.export && (
+                      <div className="animate-in fade-in slide-in-from-top-2 duration-200">
+                        <div className="flex flex-col gap-3 mb-6">
+                           <label className="block text-sm font-medium text-slate-400 mb-1">Local Configuration</label>
+                           <div className="flex gap-2">
+                             <button onClick={savePreset} className="flex-1 bg-slate-800 hover:bg-slate-700 text-slate-300 py-2 rounded-lg text-sm font-medium border border-slate-700 transition-colors">Save Preset</button>
+                             <button onClick={loadPreset} className="flex-1 bg-slate-800 hover:bg-slate-700 text-slate-300 py-2 rounded-lg text-sm font-medium border border-slate-700 transition-colors">Load Preset</button>
+                           </div>
+                        </div>
+                        <div className="flex flex-col gap-3">
+                          <div className="bg-slate-950 p-4 rounded-xl border border-slate-800 mb-2">
+                            <ControlHeader label="Video Format & Framerate" />
+                            <div className="flex flex-col 2xl:flex-row gap-3">
+                              <select value={exportFormat} onChange={function(e) { setExportFormat(e.target.value); }} className="w-full bg-slate-900 border border-slate-700 text-slate-300 text-sm rounded-lg px-3 py-2.5 outline-none focus:ring-1 focus:ring-cyan-500">
+                                <option value="webm">WebM (Transparent)</option>
+                                <option value="mp4">MP4 (Solid BG / DaVinci)</option>
+                              </select>
+                              <select value={exportFps} onChange={function(e) { setExportFps(Number(e.target.value)); }} className="w-full 2xl:w-32 bg-slate-900 border border-slate-700 text-slate-300 text-sm rounded-lg px-3 py-2.5 outline-none focus:ring-1 focus:ring-cyan-500">
+                                <option value={30}>30 FPS</option>
+                                <option value={60}>60 FPS</option>
+                              </select>
+                            </div>
+                            <div className="mt-4 pt-4 border-t border-slate-800">
+                               <ControlHeader label="Time Range (Clipping)" extra={<Scissors className="w-4 h-4 ml-2 text-slate-500" />} />
+                               <div className="flex gap-3 items-center">
+                                  <div className="flex-1">
+                                     <span className="text-xs text-slate-500 block mb-1">Start (Seconds)</span>
+                                     <input type="number" min="0" value={exportStart} onChange={function(e) { setExportStart(Number(e.target.value)); }} className="w-full bg-slate-900 border border-slate-700 text-slate-300 text-sm rounded-lg px-2 py-2 outline-none" />
+                                  </div>
+                                  <span className="text-slate-600 mt-5">to</span>
+                                  <div className="flex-1">
+                                     <span className="text-xs text-slate-500 block mb-1">End (0 = Full Track)</span>
+                                     <input type="number" min="0" value={exportEnd} onChange={function(e) { setExportEnd(Number(e.target.value)); }} className="w-full bg-slate-900 border border-slate-700 text-slate-300 text-sm rounded-lg px-2 py-2 outline-none" />
+                                  </div>
+                               </div>
+                            </div>
+                            <div className="mt-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
+                              <p className="text-xs text-red-400 leading-relaxed">
+                                <strong>Video Freezing/Crashing?</strong> Real-time encoding is heavy. To fix this:<br/>
+                                1. Set Framerate to <strong>30 FPS</strong>.<br/>
+                                2. Turn off <strong>Neon Glow Effect</strong>.<br/>
+                                3. Lower Resolution to <strong>1080p</strong>.
+                              </p>
+                            </div>
+                          </div>
+                          <button onClick={exportImage} disabled={isExportingVideo} className="w-full bg-slate-800 hover:bg-slate-700 text-white font-medium py-3 px-4 rounded-xl flex items-center justify-center gap-2 transition-colors disabled:opacity-50">
+                            <ImageIcon className="w-4 h-4" /> Save Snapshot (PNG)
+                          </button>
+                          {isExportingVideo ? (
+                            <div className="w-full space-y-3 mt-2">
+                              <button onClick={stopVideoExport} className="w-full bg-red-500/10 hover:bg-red-500/20 text-red-500 border border-red-500/20 font-bold py-3 px-4 rounded-xl flex items-center justify-center gap-2 transition-colors">
+                                <StopCircle className="w-5 h-5" /> Stop & Save Early
+                              </button>
+                              <div className="w-full bg-slate-950 rounded-full h-2.5 border border-slate-800 overflow-hidden">
+                                <div className="bg-cyan-500 h-2.5 rounded-full transition-all duration-300" style={{ width: `${exportProgress}%` }}></div>
+                              </div>
+                              <p className="text-xs text-center text-slate-400">Recording video... {Math.round(exportProgress)}%</p>
+                            </div>
+                          ) : (
+                            <button onClick={startVideoExport} disabled={!audioSrc} className="w-full bg-gradient-to-r from-indigo-500 to-cyan-500 hover:from-indigo-400 hover:to-cyan-400 text-white font-bold py-3 px-4 rounded-xl flex items-center justify-center gap-2 transition-all shadow-lg shadow-cyan-500/20 disabled:opacity-50 disabled:shadow-none mt-2">
+                              <Video className="w-5 h-5" /> Export Video ({exportFormat.toUpperCase()})
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </section>
+                </div>
+                {/* --- CENTER CANVAS PREVIEW SECTION --- */}
+                <div className="order-2 lg:order-2 lg:col-span-6 flex flex-col gap-4 lg:sticky lg:top-6 lg:h-[calc(100vh-3rem)]">
+                  <div className="bg-slate-900 rounded-2xl border border-slate-800 shadow-xl overflow-hidden flex-1 relative flex flex-col min-h-0">
+                    <div className="p-4 border-b border-slate-800 bg-slate-900/80 flex flex-wrap justify-between items-center z-10 shrink-0 gap-3">
+                      <span className="text-sm font-semibold text-slate-300 flex items-center gap-2">
+                        Live Preview
+                        <span className="bg-slate-800 text-xs px-2 py-0.5 rounded text-slate-400 border border-slate-700">
+                          {RESOLUTIONS[resolution]?.w}x{RESOLUTIONS[resolution]?.h}
+                        </span>
+                      </span>
+                      <div className="flex items-center gap-3">
+                         <span className="text-xs text-slate-500 font-medium">Safe Zone:</span>
+                         <select
+                             value={safeZone}
+                             onChange={function(e) { setSafeZone(e.target.value); }}
+                             className="bg-slate-950 border border-slate-700 text-slate-300 text-xs rounded px-2 py-1 outline-none cursor-pointer"
+                         >
+                             <option value="none">Off</option>
+                             <option value="1:1">1:1 (Square)</option>
+                             <option value="4:5">4:5 (Portrait)</option>
+                             <option value="9:16">9:16 (Vertical)</option>
+                             <option value="16:9">16:9 (Landscape)</option>
+                             <option value="title_safe">Title Safe (10%)</option>
+                         </select>
+                      </div>
+                    </div>
+                    <div className="flex-1 w-full relative flex items-center justify-center p-4 sm:p-6 overflow-hidden bg-black/50 min-h-0"
+                      style={ bgType === 'transparent' ? { backgroundImage: 'repeating-linear-gradient(45deg, #0f172a 25%, transparent 25%, transparent 75%, #0f172a 75%, #0f172a), repeating-linear-gradient(45deg, #0f172a 25%, #1e293b 25%, #1e293b 75%, #0f172a 75%, #0f172a)', backgroundPosition: '0 0, 10px 10px', backgroundSize: '20px 20px' } : {}}
+                    >
+                      <div className="relative flex items-center justify-center shadow-2xl ring-1 ring-white/10"
+                           style={{
+                               aspectRatio: `${RESOLUTIONS[resolution]?.w} / ${RESOLUTIONS[resolution]?.h}`,
+                               maxHeight: '100%',
+                               maxWidth: '100%'
+                           }}>
+                          <canvas
+                            key={bgType === 'transparent' ? 'alpha' : 'solid'}
+                            ref={canvasRef}
+                            width={RESOLUTIONS[resolution]?.w || 3840}
+                            height={RESOLUTIONS[resolution]?.h || 2160}
+                            onMouseDown={handleMouseDown}
+                            onMouseMove={handleMouseMove}
+                            onMouseUp={handleMouseUpOrLeave}
+                            onMouseLeave={handleMouseUpOrLeave}
+                            className={`w-full h-full bg-transparent ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`}
+                          />
+                          {/* Pixel Perfect Bound Safe Zones */}
+                          {safeZone !== 'none' && (
+                              <div
+                                className="absolute pointer-events-none border-[3px] border-dashed border-red-500/80 bg-red-500/10 flex items-center justify-center z-30"
+                                style={getSafeZoneStyle(safeZone, RESOLUTIONS[resolution]?.w || 3840, RESOLUTIONS[resolution]?.h || 2160)}
+                              >
+                                 <span className="absolute top-2 left-2 text-[10px] font-bold text-red-300 bg-slate-900/90 px-2 py-1 rounded border border-red-500/30 shadow-lg">
+                                    {safeZone === 'title_safe' ? 'Title' : safeZone} Safe Area
+                                 </span>
+                                 <div className="w-4 h-[1px] bg-red-500/50 absolute"></div>
+                                 <div className="h-4 w-[1px] bg-red-500/50 absolute"></div>
+                              </div>
+                          )}
+                      </div>
+                      {!audioSrc && (
+                        <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none bg-slate-900/80 backdrop-blur-sm z-20">
+                          <Loader2 className="w-12 h-12 text-slate-500 animate-spin mb-4 opacity-50" />
+                          <p className="text-slate-400 font-medium">Awaiting Audio Input</p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  {/* Playback Controls */}
+                  <div className="bg-slate-900 p-4 sm:p-5 rounded-2xl border border-slate-800 shadow-xl shrink-0 flex flex-col gap-3">
+                    <div className="flex items-center gap-4">
+                      <button ref={playButtonRef} onClick={togglePlay} disabled={!audioSrc || isExportingVideo} className="w-12 h-12 shrink-0 bg-cyan-500 hover:bg-cyan-400 text-slate-950 rounded-full flex items-center justify-center transition-colors disabled:opacity-50 disabled:hover:bg-cyan-500">
+                        {isPlaying ? <Pause className="w-6 h-6 fill-current" /> : <Play className="w-6 h-6 fill-current ml-1" />}
+                      </button>
+                      <div className="flex-1 flex flex-col gap-2">
+                        <div className="flex justify-between text-xs font-mono text-slate-400">
+                          <span>{formatTime(audioTime)}</span>
+                          <span className="text-slate-300 font-sans truncate px-4">{fileName || 'No audio selected'}</span>
+                          <span>{formatTime(audioDuration)}</span>
+                        </div>
+                        <input type="range" min="0" max={audioDuration || 100} value={audioTime} onChange={handleSeek} disabled={!audioSrc || isExportingVideo} className="w-full" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                {/* --- RIGHT SIDEBAR (Input & Setup) --- */}
+                <div className="order-1 lg:order-3 lg:col-span-3 space-y-6 overflow-y-auto pr-2 custom-scrollbar" style={{maxHeight: 'calc(100vh - 8rem)'}}>
+                  <section className="bg-slate-900 p-5 sm:p-6 rounded-2xl border border-slate-800 shadow-xl transition-all">
+                    <SectionHeader title="Audio Input" icon={Upload} sectionKey="audio" />
+                    {!minStates.audio && (
+                      <div className="animate-in fade-in slide-in-from-top-2 duration-200">
+                        <ControlHeader label="Upload File" />
+                        <label className="block w-full cursor-pointer bg-slate-800 hover:bg-slate-700 transition-colors border-2 border-dashed border-slate-600 rounded-xl p-6 sm:p-8 text-center group">
+                          <input type="file" accept="audio/*" onChange={handleFileUpload} className="hidden" disabled={isExportingVideo} />
+                          <div className="mx-auto w-12 h-12 bg-slate-900 rounded-full flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
+                            <Upload className="w-6 h-6 text-cyan-400" />
+                          </div>
+                          <p className="font-medium text-slate-300">{fileName ? fileName : 'Click to browse audio file'}</p>
+                          <p className="text-xs text-slate-500 mt-2">MP3, WAV, FLAC</p>
+                        </label>
+                        <audio ref={audioRef} src={audioSrc} onEnded={handleAudioEnded} onPlay={function() { setIsPlaying(true); }} onPause={function() { setIsPlaying(false); }} onTimeUpdate={handleTimeUpdate} onLoadedMetadata={handleLoadedMetadata} />
+                      </div>
+                    )}
+                  </section>
+                  <section className="bg-slate-900 p-5 sm:p-6 rounded-2xl border border-slate-800 shadow-xl transition-all">
+                    <SectionHeader title="Transform & Symmetry" icon={RotateCcw} sectionKey="transform" />
+                    {!minStates.transform && (
+                      <div className="space-y-5 animate-in fade-in slide-in-from-top-2 duration-200">
+                        <div>
+                           <ControlHeader label="Symmetry / Mirror" />
+                           <div className="grid grid-cols-2 gap-3 mt-2">
+                             <label className={`flex items-center justify-center gap-2 py-2 px-3 rounded-lg border cursor-pointer transition-colors ${mirrorX ? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-300' : 'bg-slate-950 border-slate-800 text-slate-400 hover:border-slate-600'}`}>
+                               <input type="checkbox" className="hidden" checked={mirrorX} onChange={function(e){setMirrorX(e.target.checked);}} />
+                               <FlipHorizontal className="w-4 h-4" /> <span className="text-sm font-medium">Mirror X</span>
+                             </label>
+                             <label className={`flex items-center justify-center gap-2 py-2 px-3 rounded-lg border cursor-pointer transition-colors ${mirrorY ? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-300' : 'bg-slate-950 border-slate-800 text-slate-400 hover:border-slate-600'}`}>
+                               <input type="checkbox" className="hidden" checked={mirrorY} onChange={function(e){setMirrorY(e.target.checked);}} />
+                               <FlipVertical className="w-4 h-4" /> <span className="text-sm font-medium">Mirror Y</span>
+                             </label>
+                           </div>
+                        </div>
+                        <div>
+                          <ControlHeader label="Size (Global Scale)" valueDisplay={`${scale.toFixed(2)}x`} onReset={function() { setScale(1.0); }} />
+                          <input type="range" min="0.1" max="3.0" step="0.1" value={scale} onChange={function(e) { setScale(Number(e.target.value)); }} className="w-full" />
+                        </div>
+                        <div>
+                          <ControlHeader label="Horizontal Size (Width)" valueDisplay={`${scaleX.toFixed(2)}x`} onReset={function() { handleScaleXChange(1.0); if(scaleLock) handleScaleYChange(1.0); }}
+                             extra={
+                               <button onClick={toggleScaleLock} title={scaleLock ? "Unlock Aspect Ratio" : "Lock Aspect Ratio"} className={`p-1 ml-2 rounded transition-colors ${scaleLock ? 'text-cyan-400 bg-cyan-400/10' : 'text-slate-500 hover:text-cyan-400'}`}>
+                                 {scaleLock ? <Lock className="w-3 h-3" /> : <Unlock className="w-3 h-3" />}
+                               </button>
+                             }
+                          />
+                          <input type="range" min="0.1" max="5.0" step="0.1" value={scaleX} onChange={function(e) { handleScaleXChange(Number(e.target.value)); }} className="w-full" />
+                        </div>
+                        <div>
+                          <ControlHeader label="Vertical Size (Height)" valueDisplay={`${scaleY.toFixed(2)}x`} onReset={function() { handleScaleYChange(1.0); if(scaleLock) handleScaleXChange(1.0); }}
+                             extra={
+                               <button onClick={toggleScaleLock} title={scaleLock ? "Unlock Aspect Ratio" : "Lock Aspect Ratio"} className={`p-1 ml-2 rounded transition-colors ${scaleLock ? 'text-cyan-400 bg-cyan-400/10' : 'text-slate-500 hover:text-cyan-400'}`}>
+                                 {scaleLock ? <Lock className="w-3 h-3" /> : <Unlock className="w-3 h-3" />}
+                               </button>
+                             }
+                          />
+                          <input type="range" min="0.1" max="5.0" step="0.1" value={scaleY} onChange={function(e) { handleScaleYChange(Number(e.target.value)); }} className="w-full" />
+                        </div>
+                        <div>
+                          <ControlHeader label="Rotation" valueDisplay={`${rotation}°`} onReset={function() { setRotation(0); }} />
+                          <input type="range" min="0" max="360" step="1" value={rotation} onChange={function(e) { setRotation(Number(e.target.value)); }} className="w-full" />
+                        </div>
+                        <div>
+                          <ControlHeader label="Horizontal Position" valueDisplay={`${Math.round(offsetX)}%`} onReset={function() { setOffsetX(0); offsetRef.current.x = 0; }} />
+                          <input type="range" min="-50" max="50" step="1" value={offsetX} onChange={function(e) { const val = Number(e.target.value); setOffsetX(val); offsetRef.current.x = val; }} className="w-full" />
+                        </div>
+                        <div>
+                          <ControlHeader label="Vertical Position" valueDisplay={`${Math.round(offsetY)}%`} onReset={function() { setOffsetY(0); offsetRef.current.y = 0; }} />
+                          <input type="range" min="-50" max="50" step="1" value={offsetY} onChange={function(e) { const val = Number(e.target.value); setOffsetY(val); offsetRef.current.y = val; }} className="w-full" />
+                        </div>
+                      </div>
+                    )}
+                  </section>
+                  <section className="bg-slate-900 p-5 sm:p-6 rounded-2xl border border-slate-800 shadow-xl transition-all">
+                    <SectionHeader title="Output Setup" icon={Monitor} sectionKey="output" />
+                    {!minStates.output && (
+                      <div className="space-y-5 animate-in fade-in slide-in-from-top-2 duration-200">
+                        <div>
+                          <ControlHeader label="Resolution & Ratio" />
+                          <select value={resolution} onChange={function(e) { setResolution(e.target.value); }} disabled={isExportingVideo} className="w-full bg-slate-950 border border-slate-700 text-slate-300 text-sm rounded-lg px-3 py-2.5 outline-none focus:ring-1 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed">
+                            <option value="4k_16_9">4K Landscape (3840x2160)</option>
+                            <option value="1080p_16_9">1080p Landscape (1920x1080)</option>
+                            <option value="4k_9_16">4K Vertical / Reels (2160x3840)</option>
+                            <option value="1080p_9_16">1080p Vertical / Reels (1080x1920)</option>
+                          </select>
+                        </div>
+                        <div>
+                          <ControlHeader label="Background Environment" />
+                          <div className="flex gap-2 mb-3">
+                            {['transparent', 'color', 'image'].map(function(type) {
+                              return <button key={type} onClick={function() { setBgType(type); }} className={`flex-1 py-2 px-2 rounded-lg text-xs font-medium capitalize transition-all ${bgType === type ? 'bg-slate-700 text-white shadow-inner border border-slate-600' : 'bg-slate-950 text-slate-400 border border-slate-800 hover:border-slate-600'}`}>{type}</button>;
+                            })}
+                          </div>
+                          {bgType === 'color' && (
+                            <div className="flex items-center gap-3 mt-2 bg-slate-950 p-2 rounded-lg border border-slate-800">
+                              <input type="color" value={bgColor} onChange={function(e) { setBgColor(e.target.value); }} className="h-8 w-12 rounded cursor-pointer bg-slate-950 border border-slate-700" />
+                              <span className="text-sm font-mono text-slate-400 uppercase">{bgColor}</span>
+                            </div>
+                          )}
+                          {bgType === 'image' && (
+                            <div className="mt-2 space-y-3">
+                              <label className="flex items-center justify-center gap-2 w-full cursor-pointer bg-slate-950 hover:bg-slate-800 transition-colors border border-dashed border-slate-600 rounded-lg p-3 text-center text-sm text-slate-300">
+                                <ImagePlus className="w-4 h-4" /> {bgImageSrc ? 'Change Image' : 'Upload Background Image'}
+                                <input type="file" accept="image/*" onChange={handleBgUpload} className="hidden" />
+                              </label>
+                              {bgImageSrc && (
+                                <div className="space-y-2">
+                                    <div className="flex justify-between items-center bg-slate-950 p-2 rounded-lg border border-slate-800">
+                                      <span className="text-xs font-medium text-slate-400">Image Fit</span>
+                                      <select value={bgImageFit} onChange={function(e) { setBgImageFit(e.target.value); }} className="bg-slate-900 border border-slate-700 text-slate-300 text-xs rounded px-2 py-1 outline-none">
+                                        <option value="contain">Contain (No Crop)</option>
+                                        <option value="cover">Cover (Fill Canvas)</option>
+                                        <option value="fit-width">Fit to Width</option>
+                                        <option value="stretch">Stretch (Exact Fit)</option>
+                                      </select>
+                                    </div>
+                                    <label className="flex justify-between items-center bg-slate-950 p-2 rounded-lg border border-slate-800 cursor-pointer">
+                                        <span className="text-xs font-medium text-slate-400 flex items-center gap-2"><Zap className="w-3 h-3 text-cyan-400" /> Beat Reactive Pulse</span>
+                                        <input type="checkbox" checked={bgBeatReactive} onChange={function(e) { setBgBeatReactive(e.target.checked); }} className="accent-cyan-500" />
+                                    </label>
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </section>
+                </div>
+              </main>
+            </div>
+          );
+        }
+        const root = ReactDOM.createRoot(document.getElementById('root'));
+        root.render(<App />);
+    </script>
+</body>
+</html>