Upload folder using huggingface_hub

index.html

@@ -11,11 +11,21 @@
         :root {
             --bg: #0a0a0a;
             --surface: #111111;
+            --surface-elevated: #161616;
             --border: #1a1a1a;
+            --border-hover: #2a2a2a;
             --text: #e0e0e0;
             --text-dim: #666666;
-            --accent: #888888;
-            --accent-dim: #444444;
+            --text-dimmer: #444444;
+            --accent: #999999;
+            --accent-dim: #555555;
+            --stage-0: #888888;
+            --stage-1: #777777;
+            --stage-2: #666666;
+            --stage-3: #555555;
+            --stage-4: #444444;
+            --stage-5: #333333;
+            --stage-6: #222222;
         }
 
         * {
@@ -24,63 +34,118 @@
             box-sizing: border-box;
         }
 
+        html {
+            scroll-behavior: smooth;
+        }
+
         body {
-            font-family: 'Courier New', monospace;
+            font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
             background: var(--bg);
             color: var(--text);
             min-height: 100vh;
             display: flex;
             flex-direction: column;
             overflow-x: hidden;
+            line-height: 1.5;
+        }
+
+        /* Animated background */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: 
+                radial-gradient(ellipse at 20% 20%, rgba(30, 30, 30, 0.3) 0%, transparent 50%),
+                radial-gradient(ellipse at 80% 80%, rgba(20, 20, 20, 0.3) 0%, transparent 50%);
+            pointer-events: none;
+            z-index: -1;
         }
 
         header {
-            padding: 1rem;
+            padding: 1.5rem 1rem;
             text-align: center;
             border-bottom: 1px solid var(--border);
+            background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, transparent 100%);
         }
 
         header h1 {
-            font-size: 0.9rem;
-            font-weight: 300;
-            letter-spacing: 0.3em;
+            font-size: 0.85rem;
+            font-weight: 400;
+            letter-spacing: 0.4em;
             text-transform: uppercase;
             color: var(--text-dim);
+            margin-bottom: 0.5rem;
         }
 
         header a {
-            color: var(--text-dim);
+            color: var(--text-dimmer);
             text-decoration: none;
-            font-size: 0.7rem;
-            letter-spacing: 0.1em;
-            transition: color 0.3s;
+            font-size: 0.65rem;
+            letter-spacing: 0.15em;
+            transition: color 0.3s ease;
+            display: inline-block;
+            padding: 0.25rem 0.5rem;
+            border: 1px solid transparent;
         }
 
         header a:hover {
             color: var(--accent);
+            border-color: var(--border);
+            background: var(--surface);
         }
 
-        .stage-title {
+        .stage-display {
+            padding: 2rem 1rem;
             text-align: center;
-            padding: 1.5rem 1rem;
-            min-height: 80px;
+            min-height: 140px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: relative;
         }
 
-        .stage-title h2 {
+        .stage-display::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 60%;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--border), transparent);
+        }
+
+        .stage-number {
+            font-size: 3rem;
+            font-weight: 200;
+            color: var(--text-dim);
+            opacity: 0.3;
+            position: absolute;
+            top: 1rem;
+            left: 50%;
+            transform: translateX(-50%);
+            letter-spacing: 0.2em;
+        }
+
+        .stage-name {
             font-size: 1rem;
             font-weight: 400;
-            letter-spacing: 0.2em;
-            transition: opacity 0.5s;
+            letter-spacing: 0.25em;
+            text-transform: uppercase;
+            margin-bottom: 0.75rem;
+            transition: all 0.5s ease;
         }
 
-        .stage-title p {
+        .stage-desc {
             font-size: 0.7rem;
             color: var(--text-dim);
-            margin-top: 0.5rem;
-            max-width: 300px;
-            margin-left: auto;
-            margin-right: auto;
-            line-height: 1.6;
+            max-width: 320px;
+            line-height: 1.7;
+            font-style: italic;
         }
 
         main {
@@ -89,15 +154,30 @@
             flex-direction: column;
             padding: 1rem;
             gap: 1.5rem;
+            max-width: 600px;
+            margin: 0 auto;
+            width: 100%;
         }
 
+        /* Visualizer */
         .visualizer-container {
             width: 100%;
-            height: 100px;
+            height: 120px;
             background: var(--surface);
             border: 1px solid var(--border);
             position: relative;
             overflow: hidden;
+            border-radius: 2px;
+        }
+
+        .visualizer-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
         }
 
         #visualizer {
@@ -106,20 +186,19 @@
             display: block;
         }
 
+        /* Controls */
         .controls {
             display: flex;
             flex-direction: column;
             gap: 1rem;
         }
 
-        .file-input-container {
+        .file-input-wrapper {
             position: relative;
-            overflow: hidden;
-            display: inline-block;
             width: 100%;
         }
 
-        .file-input-container input[type="file"] {
+        .file-input-wrapper input[type="file"] {
             position: absolute;
             left: 0;
             top: 0;
@@ -127,38 +206,63 @@
             width: 100%;
             height: 100%;
             cursor: pointer;
+            z-index: 2;
         }
 
         .btn {
             background: var(--surface);
             border: 1px solid var(--border);
             color: var(--text);
-            padding: 1rem;
+            padding: 0.9rem 1.2rem;
             font-family: inherit;
-            font-size: 0.8rem;
-            letter-spacing: 0.15em;
+            font-size: 0.7rem;
+            letter-spacing: 0.2em;
             text-transform: uppercase;
             cursor: pointer;
-            transition: all 0.3s;
+            transition: all 0.25s ease;
             width: 100%;
             text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
+            transition: left 0.5s ease;
+        }
+
+        .btn:hover::before {
+            left: 100%;
         }
 
         .btn:hover:not(:disabled) {
-            border-color: var(--accent);
-            background: var(--border);
+            border-color: var(--accent-dim);
+            background: var(--surface-elevated);
+            transform: translateY(-1px);
+        }
+
+        .btn:active:not(:disabled) {
+            transform: translateY(0);
         }
 
         .btn:disabled {
-            opacity: 0.3;
+            opacity: 0.25;
             cursor: not-allowed;
         }
 
         .btn.active {
             background: var(--accent-dim);
             border-color: var(--accent);
+            color: #fff;
         }
 
+        /* Playback controls */
         .playback-controls {
             display: flex;
             gap: 0.5rem;
@@ -168,16 +272,34 @@
             flex: 1;
         }
 
-        .progress-container {
+        /* Progress */
+        .progress-section {
             width: 100%;
         }
 
         .progress-bar {
             width: 100%;
-            height: 4px;
+            height: 3px;
             background: var(--border);
             cursor: pointer;
             position: relative;
+            border-radius: 1px;
+            overflow: hidden;
+        }
+
+        .progress-bar::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: transparent;
+            transition: background 0.3s;
+        }
+
+        .progress-bar:hover::after {
+            background: rgba(255,255,255,0.02);
         }
 
         .progress-fill {
@@ -185,36 +307,125 @@
             background: var(--accent);
             width: 0%;
             transition: width 0.1s linear;
+            position: relative;
+        }
+
+        .progress-fill::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 8px;
+            height: 8px;
+            background: var(--accent);
+            border-radius: 50%;
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+
+        .progress-bar:hover .progress-fill::after {
+            opacity: 1;
         }
 
         .time-display {
             display: flex;
             justify-content: space-between;
+            font-size: 0.6rem;
+            color: var(--text-dimmer);
+            margin-top: 0.6rem;
+            font-variant-numeric: tabular-nums;
+            letter-spacing: 0.05em;
+        }
+
+        /* Chaos slider */
+        .chaos-control {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            padding: 0.75rem 1rem;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 2px;
+        }
+
+        .chaos-control label {
             font-size: 0.65rem;
             color: var(--text-dim);
-            margin-top: 0.5rem;
+            white-space: nowrap;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+        }
+
+        .chaos-control input[type="range"] {
+            flex: 1;
+            -webkit-appearance: none;
+            appearance: none;
+            background: var(--border);
+            height: 2px;
+            outline: none;
+            border-radius: 1px;
+        }
+
+        .chaos-control input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 14px;
+            height: 14px;
+            background: var(--accent);
+            cursor: pointer;
+            border-radius: 50%;
+            transition: transform 0.2s, background 0.2s;
+        }
+
+        .chaos-control input[type="range"]::-webkit-slider-thumb:hover {
+            transform: scale(1.2);
+            background: var(--text);
+        }
+
+        .chaos-value {
+            font-size: 0.6rem;
+            color: var(--text-dimmer);
+            min-width: 2.5em;
+            text-align: right;
             font-variant-numeric: tabular-nums;
         }
 
+        /* Stage buttons */
+        .stages-section {
+            margin-top: 0.5rem;
+        }
+
+        .stages-label {
+            font-size: 0.6rem;
+            color: var(--text-dimmer);
+            letter-spacing: 0.15em;
+            text-transform: uppercase;
+            text-align: center;
+            margin-bottom: 0.75rem;
+        }
+
         .stages-container {
             display: grid;
             grid-template-columns: repeat(7, 1fr);
-            gap: 0.25rem;
+            gap: 0.3rem;
         }
 
         .stage-btn {
-            padding: 0.75rem 0.25rem;
-            font-size: 0.65rem;
+            padding: 0.8rem 0.25rem;
+            font-size: 0.7rem;
             background: var(--surface);
             border: 1px solid var(--border);
             color: var(--text-dim);
             cursor: pointer;
-            transition: all 0.3s;
+            transition: all 0.3s ease;
             text-align: center;
+            font-family: inherit;
+            position: relative;
         }
 
-        .stage-btn:hover {
+        .stage-btn:hover:not(.active) {
             border-color: var(--accent-dim);
+            background: var(--surface-elevated);
         }
 
         .stage-btn.active {
@@ -223,73 +434,86 @@
             color: var(--text);
         }
 
-        .stage-btn[data-stage="0"] { border-left: 2px solid var(--accent); }
-        .stage-btn[data-stage="6"] { border-right: 2px solid var(--accent); }
+        .stage-btn[data-stage="0"].active { border-left: 2px solid var(--stage-0); }
+        .stage-btn[data-stage="6"].active { border-right: 2px solid var(--stage-6); }
 
-        .chaos-control {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            padding: 0.5rem;
-            background: var(--surface);
+        .stage-btn::after {
+            content: attr(data-desc);
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--surface-elevated);
             border: 1px solid var(--border);
-        }
-
-        .chaos-control label {
-            font-size: 0.7rem;
-            color: var(--text-dim);
+            padding: 0.4rem 0.6rem;
+            font-size: 0.55rem;
             white-space: nowrap;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.2s, transform 0.2s;
+            z-index: 10;
+            margin-bottom: 0.5rem;
         }
 
-        .chaos-control input[type="range"] {
-            flex: 1;
-            -webkit-appearance: none;
-            background: var(--border);
-            height: 2px;
-            outline: none;
-        }
-
-        .chaos-control input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 12px;
-            height: 12px;
-            background: var(--accent);
-            cursor: pointer;
+        .stage-btn:hover::after {
+            opacity: 1;
         }
 
+        /* Status */
         .status {
             text-align: center;
-            font-size: 0.65rem;
-            color: var(--text-dim);
-            padding: 0.5rem;
+            font-size: 0.6rem;
+            color: var(--text-dimmer);
+            padding: 0.75rem;
+            letter-spacing: 0.05em;
+            border-top: 1px solid var(--border);
+            background: var(--surface);
         }
 
         .status.error {
-            color: #884444;
+            color: #996666;
+            background: rgba(153, 102, 102, 0.1);
         }
 
         .status.success {
-            color: #448844;
+            color: #669966;
+            background: rgba(102, 153, 102, 0.1);
+        }
+
+        .status.processing {
+            color: var(--accent);
         }
 
+        /* Offline badge */
         .offline-badge {
             position: fixed;
-            bottom: 1rem;
-            right: 1rem;
+            bottom: 1.5rem;
+            right: 1.5rem;
             background: var(--surface);
             border: 1px solid var(--border);
-            padding: 0.5rem;
-            font-size: 0.6rem;
-            color: var(--text-dim);
+            padding: 0.5rem 0.75rem;
+            font-size: 0.55rem;
+            color: var(--text-dimmer);
             opacity: 0;
-            transition: opacity 0.3s;
+            transition: opacity 0.4s ease;
+            letter-spacing: 0.1em;
         }
 
         .offline-badge.visible {
             opacity: 1;
         }
 
-        @media (max-width: 400px) {
+        /* Tips */
+        .tips {
+            font-size: 0.55rem;
+            color: var(--text-dimmer);
+            text-align: center;
+            padding: 0.5rem;
+            font-style: italic;
+        }
+
+        /* Responsive */
+        @media (max-width: 480px) {
             .stages-container {
                 grid-template-columns: repeat(4, 1fr);
             }
@@ -299,6 +523,38 @@
             .stages-container .stage-btn:nth-child(7) {
                 grid-column: span 1;
             }
+
+            .stage-display {
+                padding: 1.5rem 1rem;
+                min-height: 120px;
+            }
+
+            .stage-number {
+                font-size: 2.5rem;
+            }
+
+            .stage-name {
+                font-size: 0.9rem;
+            }
+
+            .stage-desc {
+                font-size: 0.65rem;
+            }
+
+            .visualizer-container {
+                height: 100px;
+            }
+        }
+
+        /* Animations */
+        @keyframes pulse {
+            0%, 100% { opacity: 0.3; }
+            50% { opacity: 0.5; }
+        }
+
+        .status.processing::before {
+            content: '● ';
+            animation: pulse 1.5s infinite;
         }
     </style>
 </head>
@@ -308,9 +564,10 @@
         <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
     </header>
 
-    <div class="stage-title">
-        <h2 id="stageName">Estágio 0</h2>
-        <p id="stageDesc">Áudio puro</p>
+    <div class="stage-display">
+        <span class="stage-number" id="stageNumber">0</span>
+        <h2 class="stage-name" id="stageName">Estágio 0</h2>
+        <p class="stage-desc" id="stageDesc">Áudio puro e inalterado</p>
     </div>
 
     <main>
@@ -319,18 +576,20 @@
         </div>
 
         <div class="controls">
-            <div class="file-input-container">
-                <button class="btn" id="loadBtn">Carregar Áudio</button>
-                <input type="file" id="fileInput" accept=".flac,.mp3,.wav,.ogg,.m4a,.aac">
+            <div class="file-input-wrapper">
+                <button class="btn" id="loadBtn">
+                    <span>Carregar Áudio</span>
+                </button>
+                <input type="file" id="fileInput" accept=".flac,.mp3,.wav,.ogg,.m4a,.aac,.wma,.aiff">
             </div>
 
             <div class="playback-controls">
-                <button class="btn" id="playBtn" disabled>Play</button>
-                <button class="btn" id="pauseBtn" disabled>Pausa</button>
-                <button class="btn" id="restartBtn" disabled>Reiniciar</button>
+                <button class="btn" id="playBtn" disabled>▶ Reproduzir</button>
+                <button class="btn" id="pauseBtn" disabled>⏸ Pausar</button>
+                <button class="btn" id="restartBtn" disabled>↺ Reiniciar</button>
             </div>
 
-            <div class="progress-container">
+            <div class="progress-section">
                 <div class="progress-bar" id="progressBar">
                     <div class="progress-fill" id="progressFill"></div>
                 </div>
@@ -341,18 +600,26 @@
             </div>
 
             <div class="chaos-control">
-                <label>Entrada/Saída</label>
+                <label>Caos</label>
                 <input type="range" id="chaosSlider" min="0" max="100" value="0">
+                <span class="chaos-value" id="chaosValue">0%</span>
+            </div>
+
+            <div class="stages-section">
+                <div class="stages-label">Selecione o estágio de degradação</div>
+                <div class="stages-container">
+                    <button class="stage-btn active" data-stage="0" data-desc="Áudio puro">0</button>
+                    <button class="stage-btn" data-stage="1" data-desc="Nostalgia doce">1</button>
+                    <button class="stage-btn" data-stage="2" data-desc="Fragmentação">2</button>
+                    <button class="stage-btn" data-stage="3" data-desc="Última lucidez">3</button>
+                    <button class="stage-btn" data-stage="4" data-desc="Colapso">4</button>
+                    <button class="stage-btn" data-stage="5" data-desc="Agonia">5</button>
+                    <button class="stage-btn" data-stage="6" data-desc="Dissolução">6</button>
+                </div>
             </div>
 
-            <div class="stages-container">
-                <button class="stage-btn active" data-stage="0">0</button>
-                <button class="stage-btn" data-stage="1">1</button>
-                <button class="stage-btn" data-stage="2">2</button>
-                <button class="stage-btn" data-stage="3">3</button>
-                <button class="stage-btn" data-stage="4">4</button>
-                <button class="stage-btn" data-stage="5">5</button>
-                <button class="stage-btn" data-stage="6">6</button>
+            <div class="tips">
+                Dica: Use fones de ouvido para melhor experiência
             </div>
         </div>
 
@@ -362,9 +629,19 @@
     <div class="offline-badge" id="offlineBadge">Modo Offline</div>
 
     <script>
-        // ==================== SERVICE WORKER ====================
+        // ==================== SERVICE WORKER REGISTRATION ====================
+        if ('serviceWorker' in navigator) {
+            const swBlob = new Blob([`${swCode}`], { type: 'application/javascript' });
+            const swUrl = URL.createObjectURL(swBlob);
+            
+            navigator.serviceWorker.register(swUrl)
+                .then(reg => console.log('SW registered'))
+                .catch(err => console.log('SW registration failed:', err));
+        }
+
+        // ==================== SERVICE WORKER CODE ====================
         const swCode = `
-            const CACHE_NAME = 'everywhere-v1';
+            const CACHE_NAME = 'everywhere-v2';
             const urlsToCache = ['./'];
             
             self.addEventListener('install', event => {
@@ -394,18 +671,14 @@
                 event.respondWith(
                     caches.match(event.request)
                         .then(response => {
-                            if (response) {
-                                return response;
-                            }
+                            if (response) return response;
                             return fetch(event.request).then(response => {
                                 if (!response || response.status !== 200 || response.type !== 'basic') {
                                     return response;
                                 }
                                 const responseToCache = response.clone();
                                 caches.open(CACHE_NAME)
-                                    .then(cache => {
-                                        cache.put(event.request, responseToCache);
-                                    });
+                                    .then(cache => cache.put(event.request, responseToCache));
                                 return response;
                             });
                         })
@@ -415,7 +688,7 @@
 
         // ==================== INDEXEDDB ====================
         const DB_NAME = 'EverywhereAudioDB';
-        const DB_VERSION = 1;
+        const DB_VERSION = 2;
         const STORE_NAME = 'audioFiles';
 
         let db = null;
@@ -460,17 +733,14 @@
             });
         }
 
-        // ==================== CACHE API ====================
-        async function cacheAudioFile(file) {
-            try {
-                const cache = await caches.open('audio-cache-v1');
-                const response = new Response(file, {
-                    headers: { 'Content-Type': file.type }
-                });
-                await cache.put('/cached-audio', response);
-            } catch (e) {
-                console.log('Cache API not available');
-            }
+        async function clearAudioFromDB(id) {
+            return new Promise((resolve, reject) => {
+                const transaction = db.transaction([STORE_NAME], 'readwrite');
+                const store = transaction.objectStore(STORE_NAME);
+                const request = store.delete(id);
+                request.onsuccess = () => resolve();
+                request.onerror = () => reject(request.error);
+            });
         }
 
         // ==================== AUDIO ENGINE ====================
@@ -489,10 +759,12 @@
         // Auxiliary source pool for Stage 4+
         let auxiliarySources = [];
         let auxiliaryPool = [];
-        const POOL_SIZE = 3;
+        const POOL_SIZE = 4;
 
-        // LFO oscillators
+        // LFO oscillators array
         let lfos = [];
+        
+        // Noise and drone for later stages
         let noiseSource = null;
         let noiseGain = null;
         let droneOscillator = null;
@@ -506,17 +778,18 @@
         let pauseTime = 0;
         let chaosLevel = 0;
         let lastStageTime = 0;
-        let stageTransitionDuration = 3;
+        let stage6EndScheduled = false;
+        let animationFrameId = null;
 
         // Stage descriptions
         const stageData = [
-            { name: 'Estágio 0', desc: 'Áudio puro' },
-            { name: 'Estágio 1', desc: 'Uma nostalgia doce e borrada que, sob uma superfície calma e repetitiva, esconde os primeiros sinais sutis da demência.' },
-            { name: 'Estágio 2', desc: 'Uma melancólica recusa em aceitar o esquecimento, onde memórias claras começam a se fragmentar sob estática crescente.' },
-            { name: 'Estágio 3', desc: 'A última tentativa desesperada da memória em manter a lucidez antes de sucumbir totalmente ao caos e à desorientação.' },
-            { name: 'Estágio 4', desc: 'A ruptura final da consciência, transformando memórias em ruídos caóticos e desoladores.' },
-            { name: 'Estágio 5', desc: 'O estágio 5 é a agonia da mente em ruínas, onde fragmentos musicais distorcidos dão lugar a um vazio de puro horror e desorientação.' },
-            { name: 'Estágio 6', desc: 'A dissolução completa do self em silêncio e caos ambientais, marcando o fim definitivo da memória.' }
+            { name: 'Estágio 0', desc: 'Áudio puro e inalterado', number: '0' },
+            { name: 'Estágio 1', desc: 'Uma nostalgia doce e borrada que, sob uma superfície calma e repetitiva, esconde os primeiros sinais sutis da demência.', number: '1' },
+            { name: 'Estágio 2', desc: 'Uma melancólica recusa em aceitar o esquecimento, onde memórias claras começam a se fragmentar sob estática crescente.', number: '2' },
+            { name: 'Estágio 3', desc: 'A última tentativa desesperada da memória em manter a lucidez antes de sucumbir totalmente ao caos e à desorientação.', number: '3' },
+            { name: 'Estágio 4', desc: 'A ruptura final da consciência, transformando memórias em ruídos caóticos e desoladores.', number: '4' },
+            { name: 'Estágio 5', desc: 'O estágio 5 é a agonia da mente em ruínas, onde fragmentos musicais distorcidos dão lugar a um vazio de puro horror e desorientação.', number: '5' },
+            { name: 'Estágio 6', desc: 'A dissolução completa do self em silêncio e caos ambientais, marcando o fim definitivo da memória.', number: '6' }
         ];
 
         function initAudioContext() {
@@ -527,12 +800,12 @@
         }
 
         // Create impulse response for reverb
-        function createImpulseResponse(duration, decay) {
+        function createImpulseResponse(duration, decay, channels = 2) {
             const sampleRate = audioContext.sampleRate;
-            const length = sampleRate * duration;
-            const impulse = audioContext.createBuffer(2, length, sampleRate);
+            const length = Math.floor(sampleRate * duration);
+            const impulse = audioContext.createBuffer(channels, length, sampleRate);
             
-            for (let channel = 0; channel < 2; channel++) {
+            for (let channel = 0; channel < channels; channel++) {
                 const channelData = impulse.getChannelData(channel);
                 for (let i = 0; i < length; i++) {
                     channelData[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, decay);
@@ -578,6 +851,23 @@
             return noiseBuffer;
         }
 
+        // Create brown noise
+        function createBrownNoise() {
+            const bufferSize = 2 * audioContext.sampleRate;
+            const noiseBuffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
+            const output = noiseBuffer.getChannelData(0);
+            
+            let lastOut = 0;
+            for (let i = 0; i < bufferSize; i++) {
+                const white = Math.random() * 2 - 1;
+                output[i] = (lastOut + (0.02 * white)) / 1.02;
+                lastOut = output[i];
+                output[i] *= 3.5;
+            }
+            
+            return noiseBuffer;
+        }
+
         function createAudioGraph() {
             const ctx = audioContext;
             
@@ -591,7 +881,7 @@
             filterNode = ctx.createBiquadFilter();
             filterNode.type = 'lowpass';
             filterNode.frequency.value = 20000;
-            filterNode.Q.value = 1;
+            filterNode.Q.value = 0.7;
             
             convolverNode = ctx.createConvolver();
             convolverNode.buffer = createImpulseResponse(2, 2);
@@ -609,6 +899,7 @@
             // Analyser
             analyserNode = ctx.createAnalyser();
             analyserNode.fftSize = 2048;
+            analyserNode.smoothingTimeConstant = 0.8;
             
             // Master gain
             masterGain = ctx.createGain();
@@ -631,6 +922,8 @@
             for (let i = 0; i < POOL_SIZE; i++) {
                 auxiliaryPool.push({
                     source: null,
+                    gain: null,
+                    filter: null,
                     inUse: false
                 });
             }
@@ -642,7 +935,13 @@
             noiseSource.loop = true;
             noiseGain = ctx.createGain();
             noiseGain.gain.value = 0;
-            noiseSource.connect(noiseGain);
+            
+            const noiseFilter = ctx.createBiquadFilter();
+            noiseFilter.type = 'lowpass';
+            noiseFilter.frequency.value = 1000;
+            
+            noiseSource.connect(noiseFilter);
+            noiseFilter.connect(noiseGain);
             noiseGain.connect(masterGain);
             noiseSource.start();
 
@@ -652,7 +951,13 @@
             droneOscillator.frequency.value = 55;
             droneGain = ctx.createGain();
             droneGain.gain.value = 0;
-            droneOscillator.connect(droneGain);
+            
+            const droneFilter = ctx.createBiquadFilter();
+            droneFilter.type = 'lowpass';
+            droneFilter.frequency.value = 200;
+            
+            droneOscillator.connect(droneFilter);
+            droneFilter.connect(droneGain);
             droneGain.connect(masterGain);
             droneOscillator.start();
         }
@@ -668,129 +973,164 @@
             const range = max - min;
             lfoGain.gain.value = range / 2;
             
+            // Center value
+            const centerValue = (min + max) / 2;
+            
             lfo.connect(lfoGain);
             lfoGain.connect(targetParam);
             
             // Set initial value
-            targetParam.setValueAtTime((min + max) / 2, audioContext.currentTime);
+            targetParam.setValueAtTime(centerValue, audioContext.currentTime);
             
             lfo.start();
             
-            return { lfo, lfoGain, targetParam, min, max };
+            return { lfo, lfoGain, targetParam, min, max, centerValue };
         }
 
-        function updateLFOsForStage(stage, chaos) {
-            // Clear existing LFOs
-            lfos.forEach(lfo => {
-                try { lfo.lfo.stop(); } catch(e) {}
+        function clearLFOs() {
+            lfos.forEach(lfoObj => {
+                try {
+                    if (lfoObj.lfo) lfoObj.lfo.stop();
+                } catch(e) {}
             });
             lfos = [];
+        }
 
-            if (!audioBuffer) return;
+        function updateLFOsForStage(stage, chaos) {
+            clearLFOs();
+
+            if (!audioBuffer || !gainNode) return;
 
-            const bufferDuration = audioBuffer.duration;
             const chaosFactor = chaos / 100;
+            const ctx = audioContext;
+            const now = ctx.currentTime;
 
             switch(stage) {
                 case 0:
                     // Pure audio - minimal processing
+                    gainNode.gain.setTargetAtTime(1, now, 0.5);
+                    filterNode.frequency.setTargetAtTime(20000, now, 0.5);
+                    filterNode.Q.setTargetAtTime(0.7, now, 0.5);
+                    waveShaperNode.curve = makeDistortionCurve(0);
+                    convolverNode.buffer = createImpulseResponse(1, 4);
+                    delayNode.delayTime.setTargetAtTime(0.3, now, 0.5);
+                    feedbackGain.gain.setTargetAtTime(0.2, now, 0.5);
+                    masterGain.gain.setTargetAtTime(1, now, 0.5);
+                    noiseGain.gain.setTargetAtTime(0, now, 0.5);
+                    droneGain.gain.setTargetAtTime(0, now, 0.5);
+                    if (sourceNode && sourceNode.playbackRate) {
+                        sourceNode.playbackRate.setTargetAtTime(1, now, 0.5);
+                    }
                     break;
                     
                 case 1:
                     // Stage 1: Subtle warmth, slight blur
-                    gainNode.gain.setTargetAtTime(0.95, audioContext.currentTime, 1);
-                    filterNode.frequency.setTargetAtTime(8000, audioContext.currentTime, 2);
-                    convolverNode.buffer = createImpulseResponse(1.5, 3);
+                    gainNode.gain.setTargetAtTime(0.95, now, 1);
+                    filterNode.frequency.setTargetAtTime(8000 + chaosFactor * 2000, now, 2);
+                    filterNode.Q.setTargetAtTime(1, now, 1);
+                    convolverNode.buffer = createImpulseResponse(1.5 + chaosFactor, 3 - chaosFactor);
+                    delayNode.delayTime.setTargetAtTime(0.35, now, 1);
+                    feedbackGain.gain.setTargetAtTime(0.25 + chaosFactor * 0.1, now, 1);
+                    waveShaperNode.curve = makeDistortionCurve(chaosFactor * 5);
+                    
+                    // Subtle LFO for warmth
+                    lfos.push(createLFO(gainNode.gain, 0.08, 0.92, 0.98, 'sine'));
                     break;
                     
                 case 2:
                     // Stage 2: Fragmentation begins
-                    gainNode.gain.setTargetAtTime(0.9, audioContext.currentTime, 1);
-                    filterNode.frequency.setTargetAtTime(4000 + Math.random() * 2000, audioContext.currentTime, 1);
-                    filterNode.Q.setTargetAtTime(2, audioContext.currentTime, 1);
-                    delayNode.delayTime.setTargetAtTime(0.4 + Math.random() * 0.2, audioContext.currentTime, 1);
-                    feedbackGain.gain.setTargetAtTime(0.4, audioContext.currentTime, 1);
+                    gainNode.gain.setTargetAtTime(0.88 - chaosFactor * 0.05, now, 0.8);
+                    filterNode.frequency.setTargetAtTime(5000 - chaosFactor * 1500, now, 0.8);
+                    filterNode.Q.setTargetAtTime(2 + chaosFactor * 2, now, 0.8);
+                    delayNode.delayTime.setTargetAtTime(0.4 + chaosFactor * 0.15, now, 0.8);
+                    feedbackGain.gain.setTargetAtTime(0.35 + chaosFactor * 0.15, now, 0.8);
+                    waveShaperNode.curve = makeDistortionCurve(5 + chaosFactor * 15);
+                    convolverNode.buffer = createImpulseResponse(2 + chaosFactor, 2);
                     
-                    // Add subtle LFOs
-                    lfos.push(createLFO(gainNode.gain, 0.1 + Math.random() * 0.1, 0.85, 0.95, 'sine'));
-                    lfos.push(createLFO(filterNode.frequency, 0.05, 3000, 6000, 'triangle'));
+                    // LFOs for instability
+                    lfos.push(createLFO(gainNode.gain, 0.12, 0.82, 0.92, 'sine'));
+                    lfos.push(createLFO(filterNode.frequency, 0.06, 3500, 6000, 'triangle'));
                     break;
                     
                 case 3:
                     // Stage 3: Desperate lucidity
-                    gainNode.gain.setTargetAtTime(0.85, audioContext.currentTime, 0.5);
-                    filterNode.frequency.setTargetAtTime(2500 + Math.random() * 1500, audioContext.currentTime, 0.5);
-                    filterNode.Q.setTargetAtTime(4, audioContext.currentTime, 0.5);
-                    waveShaperNode.curve = makeDistortionCurve(10 + chaosFactor * 20);
+                    gainNode.gain.setTargetAtTime(0.8 - chaosFactor * 0.1, now, 0.5);
+                    filterNode.frequency.setTargetAtTime(3000 - chaosFactor * 1000, now, 0.5);
+                    filterNode.Q.setTargetAtTime(4 + chaosFactor * 3, now, 0.5);
+                    waveShaperNode.curve = makeDistortionCurve(20 + chaosFactor * 30);
                     convolverNode.buffer = createImpulseResponse(2.5, 1.5);
+                    delayNode.delayTime.setTargetAtTime(0.45 + chaosFactor * 0.15, now, 0.5);
+                    feedbackGain.gain.setTargetAtTime(0.45 + chaosFactor * 0.15, now, 0.5);
                     
-                    lfos.push(createLFO(gainNode.gain, 0.2, 0.7, 0.9, 'sine'));
+                    // More aggressive LFOs
+                    lfos.push(createLFO(gainNode.gain, 0.2, 0.65, 0.85, 'sine'));
                     lfos.push(createLFO(filterNode.frequency, 0.15, 2000, 4000, 'sawtooth'));
-                    lfos.push(createLFO(waveShaperNode.curve ? waveShaperNode : { setValueAtTime: () => {} }, 0.08, 5, 30, 'square'));
                     break;
                     
                 case 4:
-                    // Stage 4: Collapse of linearity - chaos injection
-                    gainNode.gain.setTargetAtTime(0.7 - chaosFactor * 0.3, audioContext.currentTime, 0.3);
-                    filterNode.frequency.setTargetAtTime(1500 * (1 - chaosFactor * 0.5), audioContext.currentTime, 0.3);
-                    filterNode.Q.setTargetAtTime(6 + chaosFactor * 4, audioContext.currentTime, 0.3);
-                    waveShaperNode.curve = makeDistortionCurve(30 + chaosFactor * 50);
-                    delayNode.delayTime.setTargetAtTime(0.5 + chaosFactor * 0.3, audioContext.currentTime, 0.2);
-                    feedbackGain.gain.setTargetAtTime(0.5 + chaosFactor * 0.3, audioContext.currentTime, 0.2);
+                    // Stage 4: Collapse of linearity
+                    gainNode.gain.setTargetAtTime(0.7 - chaosFactor * 0.25, now, 0.3);
+                    filterNode.frequency.setTargetAtTime(1800 - chaosFactor * 800, now, 0.3);
+                    filterNode.Q.setTargetAtTime(6 + chaosFactor * 4, now, 0.3);
+                    waveShaperNode.curve = makeDistortionCurve(40 + chaosFactor * 40);
+                    delayNode.delayTime.setTargetAtTime(0.5 + chaosFactor * 0.25, now, 0.3);
+                    feedbackGain.gain.setTargetAtTime(0.5 + chaosFactor * 0.25, now, 0.3);
+                    convolverNode.buffer = createImpulseResponse(3, 1);
                     
-                    // Activate auxiliary sources for overlapping fragments
+                    // Activate auxiliary sources
                     activateAuxiliarySources(1 + Math.floor(chaosFactor * 2), chaosFactor);
                     
-                    lfos.push(createLFO(gainNode.gain, 0.3 + Math.random() * 0.3, 0.5, 0.8, 'sine'));
-                    lfos.push(createLFO(filterNode.frequency, 0.2, 800, 2000, 'triangle'));
+                    lfos.push(createLFO(gainNode.gain, 0.3, 0.45, 0.75, 'sine'));
+                    lfos.push(createLFO(filterNode.frequency, 0.2, 800, 2200, 'triangle'));
                     break;
                     
                 case 5:
                     // Stage 5: Agony, horror, disorientation
-                    gainNode.gain.setTargetAtTime(0.5 - chaosFactor * 0.2, audioContext.currentTime, 0.2);
-                    filterNode.frequency.setTargetAtTime(800 * (1 - chaosFactor * 0.3), audioContext.currentTime, 0.2);
-                    filterNode.Q.setTargetAtTime(8, audioContext.currentTime, 0.2);
+                    gainNode.gain.setTargetAtTime(0.5 - chaosFactor * 0.15, now, 0.2);
+                    filterNode.frequency.setTargetAtTime(900 - chaosFactor * 300, now, 0.2);
+                    filterNode.Q.setTargetAtTime(8 + chaosFactor * 2, now, 0.2);
                     waveShaperNode.curve = makeDistortionCurve(80 + chaosFactor * 70);
-                    delayNode.delayTime.setTargetAtTime(0.6 + chaosFactor * 0.4, audioContext.currentTime, 0.15);
-                    feedbackGain.gain.setTargetAtTime(0.7, audioContext.currentTime, 0.15);
+                    delayNode.delayTime.setTargetAtTime(0.55 + chaosFactor * 0.35, now, 0.2);
+                    feedbackGain.gain.setTargetAtTime(0.65, now, 0.2);
+                    convolverNode.buffer = createImpulseResponse(3.5, 0.8);
                     
                     // More auxiliary sources
-                    activateAuxiliarySources(2, chaosFactor);
+                    activateAuxiliarySources(2 + Math.floor(chaosFactor), chaosFactor);
                     
                     // Increase noise
-                    noiseGain.gain.setTargetAtTime(0.05 + chaosFactor * 0.1, audioContext.currentTime, 0.5);
+                    noiseGain.gain.setTargetAtTime(0.04 + chaosFactor * 0.08, now, 0.5);
                     
-                    lfos.push(createLFO(gainNode.gain, 0.5, 0.3, 0.6, 'sawtooth'));
-                    lfos.push(createLFO(filterNode.frequency, 0.3, 400, 1200, 'square'));
+                    lfos.push(createLFO(gainNode.gain, 0.5, 0.3, 0.55, 'sawtooth'));
+                    lfos.push(createLFO(filterNode.frequency, 0.3, 400, 1100, 'square'));
                     break;
                     
                 case 6:
-                    // Stage 6: Dissolution - drone, pink noise, ghost notes
-                    gainNode.gain.setTargetAtTime(0.3 - chaosFactor * 0.2, audioContext.currentTime, 1);
-                    filterNode.frequency.setTargetAtTime(110, audioContext.currentTime, 2);
-                    filterNode.Q.setTargetAtTime(10, audioContext.currentTime, 2);
+                    // Stage 6: Dissolution
+                    gainNode.gain.setTargetAtTime(0.3 - chaosFactor * 0.15, now, 1);
+                    filterNode.frequency.setTargetAtTime(100, now, 2);
+                    filterNode.Q.setTargetAtTime(10, now, 2);
                     waveShaperNode.curve = makeDistortionCurve(150);
-                    masterGain.gain.setTargetAtTime(0.5, audioContext.currentTime, 2); // -6dB
+                    masterGain.gain.setTargetAtTime(0.6 - chaosFactor * 0.2, now, 2);
                     
                     // Drone
-                    droneGain.gain.setTargetAtTime(0.15, audioContext.currentTime, 3);
-                    droneOscillator.frequency.setTargetAtTime(55 * (1 - chaosFactor * 0.1), audioContext.currentTime, 1);
+                    droneGain.gain.setTargetAtTime(0.12 + chaosFactor * 0.08, now, 3);
+                    droneOscillator.frequency.setTargetAtTime(55 * (1 - chaosFactor * 0.15), now, 1);
                     
-                    // Pink noise as floor
-                    noiseGain.gain.setTargetAtTime(0.15, audioContext.currentTime, 2);
+                    // Brown noise floor
+                    noiseGain.gain.setTargetAtTime(0.12, now, 2);
                     
-                    // Slow playback for main source
-                    if (sourceNode.playbackRate) {
-                        sourceNode.playbackRate.setTargetAtTime(0.12, audioContext.currentTime, 3);
+                    // Extremely slow playback
+                    if (sourceNode && sourceNode.playbackRate) {
+                        sourceNode.playbackRate.setTargetAtTime(0.08 + Math.random() * 0.08, now, 2);
                     }
                     
-                    // Ghost notes - sporadic triggering
+                    // Ghost notes
                     clearInterval(ghostNotesInterval);
                     ghostNotesInterval = setInterval(() => {
-                        if (Math.random() < 0.1) {
+                        if (Math.random() < 0.08) {
                             triggerGhostNote(chaosFactor);
                         }
-                    }, 2000);
+                    }, 2500);
                     
                     // Reset auxiliary
                     deactivateAuxiliarySources();
@@ -803,397 +1143,23 @@
 
         function activateAuxiliarySources(count, chaos) {
             for (let i = 0; i < count && i < auxiliaryPool.length; i++) {
-                if (!auxiliaryPool[i].inUse && audioBuffer) {
+                if (!auxiliaryPool[i].inUse && audioBuffer && audioContext) {
                     const auxSource = audioContext.createBufferSource();
                     auxSource.buffer = audioBuffer;
                     
-                    // Random start position
                     const startOffset = Math.random() * audioBuffer.duration;
                     auxSource.start(0, startOffset);
                     
-                    // Modulated playback rate
-                    const pitchMod = 0.65 + Math.random() * 0.7; // 0.65 to 1.35
+                    const pitchMod = 0.5 + Math.random() * 0.8;
                     auxSource.playbackRate.value = pitchMod;
                     
-                    // Individual gain
                     const auxGain = audioContext.createGain();
-                    auxGain.gain.value = 0.3 + Math.random() * 0.2;
+                    auxGain.gain.value = 0.25 + Math.random() * 0.2;
                     
-                    // Connect through filter
                     const auxFilter = audioContext.createBiquadFilter();
                     auxFilter.type = 'lowpass';
-                    auxFilter.frequency.value = 2000 + Math.random() * 3000;
+                    auxFilter.frequency.value = 1500 + Math.random() * 2500;
+                    auxFilter.Q.value = 2 + Math.random() * 3;
                     
                     auxSource.connect(auxGain);
-                    auxGain.connect(auxFilter);
-                    auxFilter.connect(analyserNode);
-                    
-                    auxiliaryPool[i] = {
-                        source: auxSource,
-                        gain: auxGain,
-                        filter: auxFilter,
-                        inUse: true
-                    };
-                    
-                    // Store in active array
-                    auxiliarySources.push(auxiliaryPool[i]);
-                }
-            }
-        }
-
-        function deactivateAuxiliarySources() {
-            auxiliarySources.forEach(aux => {
-                if (aux && aux.gain) {
-                    aux.gain.gain.setTargetAtTime(0, audioContext.currentTime, 0.5);
-                    setTimeout(() => {
-                        try { aux.source.stop(); } catch(e) {}
-                    }, 2000);
-                }
-            });
-            auxiliarySources = [];
-            
-            auxiliaryPool.forEach(poolItem => {
-                poolItem.inUse = false;
-            });
-        }
-
-        function triggerGhostNote(chaos) {
-            if (!audioBuffer) return;
-            
-            const ghostSource = audioContext.createBufferSource();
-            ghostSource.buffer = audioBuffer;
-            
-            const ghostGain = audioContext.createGain();
-            ghostGain.gain.value = 0;
-            
-            const ghostFilter = audioContext.createBiquadFilter();
-            ghostFilter.type = 'bandpass';
-            ghostFilter.frequency.value = 300 + Math.random() * 500;
-            ghostFilter.Q.value = 10;
-            
-            ghostSource.connect(ghostGain);
-            ghostGain.connect(ghostFilter);
-            ghostFilter.connect(masterGain);
-            
-            const startTime = Math.random() * (audioBuffer.duration - 2);
-            ghostSource.start(0, startTime, 4);
-            
-            // Extremely slow fade in/out
-            const now = audioContext.currentTime;
-            ghostGain.gain.setValueAtTime(0, now);
-            ghostGain.gain.linearRampToValueAtTime(0.2, now + 2);
-            ghostGain.gain.linearRampToValueAtTime(0, now + 4);
-            
-            setTimeout(() => {
-                try { ghostSource.stop(); } catch(e) {}
-            }, 4500);
-        }
-
-        let stage6EndScheduled = false;
-
-        function scheduleStage6End() {
-            if (stage6EndScheduled) return;
-            stage6EndScheduled = true;
-            
-            // 6 minutes fade
-            const fadeDuration = 360; // seconds
-            const now = audioContext.currentTime;
-            
-            masterGain.gain.setValueAtTime(masterGain.gain.value, now);
-            masterGain.gain.linearRampToValueAtTime(0, now + fadeDuration);
-            
-            // After fade, 1 minute silence then restart
-            setTimeout(() => {
-                // Stop everything
-                try { sourceNode.stop(); } catch(e) {}
-                deactivateAuxiliarySources();
-                clearInterval(ghostNotesInterval);
-                
-                // 1 minute silence
-                setTimeout(() => {
-                    // Soft restart
-                    stage6EndScheduled = false;
-                    if (audioBuffer) {
-                        playAudio(0);
-                        changeStage(0);
-                    }
-                }, 60000);
-                
-            }, fadeDuration * 1000);
-        }
-
-        function changeStage(stage) {
-            currentStage = stage;
-            lastStageTime = Date.now();
-            
-            // Update UI
-            document.getElementById('stageName').textContent = stageData[stage].name;
-            document.getElementById('stageDesc').textContent = stageData[stage].desc;
-            
-            document.querySelectorAll('.stage-btn').forEach(btn => {
-                btn.classList.toggle('active', parseInt(btn.dataset.stage) === stage);
-            });
-            
-            // Update audio processing
-            if (audioContext && audioBuffer) {
-                updateLFOsForStage(stage, chaosLevel);
-            }
-        }
-
-        async function loadAudioFile(file) {
-            const ctx = initAudioContext();
-            
-            try {
-                document.getElementById('status').textContent = 'Carregando áudio...';
-                document.getElementById('status').className = 'status';
-                
-                const arrayBuffer = await file.arrayBuffer();
-                audioBuffer = await ctx.decodeAudioData(arrayBuffer);
-                
-                // Save to IndexedDB
-                await saveAudioToDB('current-audio', arrayBuffer, file.name);
-                
-                // Cache it
-                await cacheAudioFile(file);
-                
-                document.getElementById('status').textContent = `Carregado: ${file.name}`;
-                document.getElementById('status').className = 'status success';
-                
-                document.getElementById('duration').textContent = formatTime(audioBuffer.duration);
-                
-                // Enable controls
-                document.getElementById('playBtn').disabled = false;
-                document.getElementById('pauseBtn').disabled = false;
-                document.getElementById('restartBtn').disabled = false;
-                
-                // Create audio graph
-                createAudioGraph();
-                
-                // Reset stage
-                changeStage(0);
-                
-            } catch (error) {
-                console.error('Error loading audio:', error);
-                document.getElementById('status').textContent = 'Erro ao carregar áudio: ' + error.message;
-                document.getElementById('status').className = 'status error';
-            }
-        }
-
-        function playAudio(offset = 0) {
-            if (!audioBuffer) return;
-            
-            const ctx = audioContext;
-            
-            if (ctx.state === 'suspended') {
-                ctx.resume();
-            }
-            
-            // Stop existing source
-            if (sourceNode) {
-                try { sourceNode.stop(); } catch(e) {}
-            }
-            
-            // Create new source
-            sourceNode = ctx.createBufferSource();
-            sourceNode.buffer = audioBuffer;
-            sourceNode.loop = true;
-            
-            // Reconnect
-            sourceNode.connect(gainNode);
-            
-            // Start from offset
-            sourceNode.start(0, offset);
-            startTime = ctx.currentTime - offset;
-            isPlaying = true;
-            
-            // Update processing
-            updateLFOsForStage(currentStage, chaosLevel);
-            
-            // Start visualization
-            drawVisualization();
-        }
-
-        function pauseAudio() {
-            if (sourceNode && isPlaying) {
-                try { sourceNode.stop(); } catch(e) {}
-                pauseTime = audioContext.currentTime - startTime;
-                isPlaying = false;
-            }
-        }
-
-        function stopAudio() {
-            if (sourceNode) {
-                try { sourceNode.stop(); } catch(e) {}
-            }
-            deactivateAuxiliarySources();
-            isPlaying = false;
-            pauseTime = 0;
-            updateProgress(0);
-        }
-
-        function getCurrentTime() {
-            if (!audioContext || !isPlaying) return pauseTime;
-            return audioContext.currentTime - startTime;
-        }
-
-        function formatTime(seconds) {
-            const mins = Math.floor(seconds / 60);
-            const secs = Math.floor(seconds % 60);
-            return `${mins}:${secs.toString().padStart(2, '0')}`;
-        }
-
-        function updateProgress(time) {
-            if (!audioBuffer) return;
-            
-            const percent = (time / audioBuffer.duration) * 100;
-            document.getElementById('progressFill').style.width = `${percent}%`;
-            document.getElementById('currentTime').textContent = formatTime(time);
-        }
-
-        // ==================== VISUALIZATION ====================
-        const canvas = document.getElementById('visualizer');
-        const ctx = canvas.getContext('2d');
-
-        function resizeCanvas() {
-            const rect = canvas.parentElement.getBoundingClientRect();
-            canvas.width = rect.width * window.devicePixelRatio;
-            canvas.height = rect.height * window.devicePixelRatio;
-            ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-        }
-
-        resizeCanvas();
-        window.addEventListener('resize', resizeCanvas);
-
-        function drawVisualization() {
-            if (!analyserNode) return;
-            
-            requestAnimationFrame(drawVisualization);
-            
-            const bufferLength = analyserNode.frequencyBinCount;
-            const dataArray = new Uint8Array(bufferLength);
-            analyserNode.getByteTimeDomainData(dataArray);
-            
-            const width = canvas.width / window.devicePixelRatio;
-            const height = canvas.height / window.devicePixelRatio;
-            
-            // Clear with background
-            ctx.fillStyle = '#111111';
-            ctx.fillRect(0, 0, width, height);
-            
-            // Draw waveform
-            ctx.lineWidth = 1.5;
-            ctx.strokeStyle = '#888888';
-            ctx.beginPath();
-            
-            const sliceWidth = width / bufferLength;
-            let x = 0;
-            
-            for (let i = 0; i < bufferLength; i++) {
-                const v = dataArray[i] / 128.0;
-                const y = (v * height) / 2;
-                
-                if (i === 0) {
-                    ctx.moveTo(x, y);
-                } else {
-                    ctx.lineTo(x, y);
-                }
-                
-                x += sliceWidth;
-            }
-            
-            ctx.lineTo(width, height / 2);
-            ctx.stroke();
-            
-            // Update progress
-            if (isPlaying && audioBuffer) {
-                updateProgress(getCurrentTime());
-            }
-        }
-
-        // ==================== EVENT HANDLERS ====================
-        document.getElementById('fileInput').addEventListener('change', async (e) => {
-            const file = e.target.files[0];
-            if (file) {
-                await loadAudioFile(file);
-            }
-        });
-
-        document.getElementById('playBtn').addEventListener('click', () => {
-            if (!audioContext) initAudioContext();
-            playAudio(pauseTime);
-        });
-
-        document.getElementById('pauseBtn').addEventListener('click', pauseAudio);
-
-        document.getElementById('restartBtn').addEventListener('click', () => {
-            stopAudio();
-            if (audioBuffer) playAudio(0);
-            changeStage(0);
-        });
-
-        document.getElementById('progressBar').addEventListener('click', (e) => {
-            if (!audioBuffer) return;
-            
-            const rect = e.target.getBoundingClientRect();
-            const percent = (e.clientX - rect.left) / rect.width;
-            const newTime = percent * audioBuffer.duration;
-            
-            if (isPlaying) {
-                pauseTime = newTime;
-                playAudio(newTime);
-            } else {
-                pauseTime = newTime;
-                updateProgress(newTime);
-            }
-        });
-
-        document.getElementById('chaosSlider').addEventListener('input', (e) => {
-            chaosLevel = parseInt(e.target.value);
-            if (audioBuffer && isPlaying) {
-                updateLFOsForStage(currentStage, chaosLevel);
-            }
-        });
-
-        document.querySelectorAll('.stage-btn').forEach(btn => {
-            btn.addEventListener('click', () => {
-                const stage = parseInt(btn.dataset.stage);
-                changeStage(stage);
-            });
-        });
-
-        // ==================== OFFLINE DETECTION ====================
-        function updateOnlineStatus() {
-            const badge = document.getElementById('offlineBadge');
-            if (!navigator.onLine) {
-                badge.classList.add('visible');
-            } else {
-                badge.classList.remove('visible');
-            }
-        }
-
-        window.addEventListener('online', updateOnlineStatus);
-        window.addEventListener('offline', updateOnlineStatus);
-        updateOnlineStatus();
-
-        // ==================== INITIALIZATION ====================
-        async function init() {
-            try {
-                // Open database
-                await openDatabase();
-                
-                // Try to load cached audio
-                const cached = await getAudioFromDB('current-audio');
-                if (cached && cached.data) {
-                    document.getElementById('status').textContent = 'Carregando áudio salvo...';
-                    document.getElementById('status').className = 'status';
-                    
-                    const ctx = initAudioContext();
-                    audioBuffer = await ctx.decodeAudioData(cached.data);
-                    
-                    document.getElementById('status').textContent = `Carregado: ${cached.name}`;
-                    document.getElementById('status').className = 'status success';
-                    document.getElementById('duration').textContent = formatTime(audioBuffer.duration);
-                    
-                    document.getElementById('playBtn').disabled = false;
-                    document.getElementById('pauseBtn').disabled = false;
-                    document.getElementById('
+                    aux