diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HD TTS Document Reader | Natural Human Voices</title>
+    <title>HD TTS Document Reader | Hugging Face Edition</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
@@ -32,6 +32,8 @@
             background-color: rgba(255, 255, 255, 0.8);
             border-radius: 3px;
             animation: equalize 1.5s infinite ease-in-out;
+            animation-play-state: paused;
+            height: 10px;
             animation-delay: calc(var(--delay) * 0.1s);
         }
         
@@ -46,47 +48,15 @@
             scrollbar-width: thin;
         }
         
-        .document-container::-webkit-scrollbar {
-            width: 8px;
-        }
-        
-        .document-container::-webkit-scrollbar-track {
-            background: #f8fafc;
-            border-radius: 10px;
-        }
-        
-        .document-container::-webkit-scrollbar-thumb {
-            background: linear-gradient(145deg, #cbd5e1, #94a3b8);
-            border-radius: 10px;
-        }
+        .document-container::-webkit-scrollbar { width: 8px; }
+        .document-container::-webkit-scrollbar-track { background: #f8fafc; border-radius: 10px; }
+        .document-container::-webkit-scrollbar-thumb { background: linear-gradient(145deg, #cbd5e1, #94a3b8); border-radius: 10px; }
         
         .highlight {
-            background: linear-gradient(90deg, #fef08a, #fde047);
-            transition: all 0.3s ease;
+            background-color: #fef08a;
             border-radius: 4px;
-            padding: 2px 4px;
-            margin: 0 2px;
-        }
-        
-        .voice-option {
-            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-            border-radius: 12px;
-        }
-        
-        .voice-option:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
-        }
-        
-        .voice-option.selected {
-            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
-            border: 2px solid #3b82f6;
-            box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
-        }
-        
-        .voice-option .voice-check {
-            color: #3b82f6;
-            font-size: 1.25rem;
+            padding: 2px 0;
+            transition: background-color 0.3s ease;
         }
         
         .progress-bar {
@@ -95,6 +65,7 @@
             border-radius: 10px;
             overflow: hidden;
             box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
+            cursor: pointer;
         }
         
         .progress-fill {
@@ -105,100 +76,6 @@
             border-radius: 10px;
         }
         
-        .settings-panel {
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            max-height: 0;
-            overflow: hidden;
-        }
-        
-        .settings-panel.open {
-            max-height: 600px;
-        }
-        
-        .tab-active {
-            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-            color: white;
-            border-radius: 8px;
-            transform: scale(1.05);
-        }
-        
-        .language-flag {
-            width: 28px;
-            height: 20px;
-            display: inline-block;
-            margin-right: 10px;
-            background-size: cover;
-            border-radius: 4px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-        
-        /* Language flags */
-        .flag-us {
-            background-image: url('https://flagcdn.com/us.svg');
-        }
-        
-        .flag-uk {
-            background-image: url('https://flagcdn.com/gb.svg');
-        }
-        
-        .flag-au {
-            background-image: url('https://flagcdn.com/au.svg');
-        }
-        
-        .flag-ca {
-            background-image: url('https://flagcdn.com/ca.svg');
-        }
-        
-        .flag-in {
-            background-image: url('https://flagcdn.com/in.svg');
-        }
-        
-        .flag-za {
-            background-image: url('https://flagcdn.com/za.svg');
-        }
-        
-        .flag-ie {
-            background-image: url('https://flagcdn.com/ie.svg');
-        }
-        
-        .flag-nz {
-            background-image: url('https://flagcdn.com/nz.svg');
-        }
-        
-        .notification {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            border-left: 4px solid #3b82f6;
-            padding: 16px 20px;
-            border-radius: 12px;
-            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
-            transform: translateX(100%);
-            opacity: 0;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            z-index: 1000;
-            min-width: 300px;
-        }
-        
-        .notification.show {
-            transform: translateX(0);
-            opacity: 1;
-        }
-        
-        .notification.success {
-            border-left-color: #10b981;
-        }
-        
-        .notification.error {
-            border-left-color: #ef4444;
-        }
-        
-        .notification.warning {
-            border-left-color: #f59e0b;
-        }
-        
         .glass-effect {
             background: rgba(255, 255, 255, 0.9);
             backdrop-filter: blur(20px);
@@ -211,10 +88,14 @@
             border-radius: 8px;
         }
         
-        .btn-primary:hover {
+        .btn-primary:hover:not(:disabled) {
             transform: translateY(-1px);
             box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
         }
+        .btn-primary:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
         
         .btn-secondary {
             background: rgba(107, 114, 128, 0.1);
@@ -223,35 +104,21 @@
             border-radius: 8px;
         }
         
-        .btn-secondary:hover {
+        .btn-secondary:hover:not(:disabled) {
             background: rgba(107, 114, 128, 0.2);
             transform: translateY(-1px);
         }
-        
+        .btn-secondary:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
         #document-editor:empty::before {
             content: attr(data-placeholder);
             color: #9ca3af;
             font-style: italic;
         }
         
-        .document-toolbar {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            padding: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .format-btn {
-            border-radius: 8px;
-            transition: all 0.2s ease;
-        }
-        
-        .format-btn:hover {
-            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
-            transform: scale(1.1);
-        }
-        
         .card-hover {
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
@@ -262,61 +129,64 @@
         }
         
         input[type="range"] {
-            -webkit-appearance: none;
-            appearance: none;
-            background: transparent;
-            cursor: pointer;
+            -webkit-appearance: none; appearance: none;
+            background: transparent; cursor: pointer;
         }
-        
-        input[type="range"]::-webkit-slider-track {
-            background: #e2e8f0;
-            height: 8px;
-            border-radius: 5px;
-        }
-        
+        input[type="range"]::-webkit-slider-track { background: #e2e8f0; height: 8px; border-radius: 5px; }
         input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            height: 20px;
-            width: 20px;
+            -webkit-appearance: none; appearance: none;
+            height: 20px; width: 20px;
             border-radius: 50%;
             background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-            cursor: pointer;
-            border: 2px solid white;
+            cursor: pointer; border: 2px solid white;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
-        
-        input[type="range"]::-moz-range-track {
-            background: #e2e8f0;
-            height: 8px;
-            border-radius: 5px;
-        }
-        
+        input[type="range"]::-moz-range-track { background: #e2e8f0; height: 8px; border-radius: 5px; }
         input[type="range"]::-moz-range-thumb {
-            height: 20px;
-            width: 20px;
+            height: 20px; width: 20px;
             border-radius: 50%;
             background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-            cursor: pointer;
-            border: 2px solid white;
+            cursor: pointer; border: 2px solid white;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
+        
+        .notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-left: 4px solid #3b82f6;
+            padding: 16px 20px;
+            border-radius: 12px;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+            transform: translateX(120%);
+            opacity: 0;
+            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 1000;
+            min-width: 300px;
+        }
+        
+        .notification.show { transform: translateX(0); opacity: 1; }
+        .notification.success { border-left-color: #10b981; }
+        .notification.error { border-left-color: #ef4444; }
+        .notification.warning { border-left-color: #f59e0b; }
     </style>
 </head>
 <body class="min-h-screen">
     <div class="container mx-auto px-4 py-8 max-w-7xl">
         <header class="mb-8 text-center">
             <h1 class="text-5xl font-bold text-gray-800 mb-4">HD TTS Document Reader</h1>
-            <p class="text-xl text-gray-600">Natural human voices with cloud storage powered by Val Town</p>
-            <div class="mt-6 flex justify-center gap-4 flex-wrap">
-                <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
-                    <i class="fas fa-microphone mr-2"></i> HD Voices
+            <p class="text-xl text-gray-600">Powered by the Hugging Face Inference API</p>
+             <div class="mt-6 flex justify-center gap-4 flex-wrap">
+                <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
+                    <i class="fas fa-microchip mr-2"></i> Hugging Face API
                 </span>
-                <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
-                    <i class="fas fa-cloud mr-2"></i> Val Town Storage
+                <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
+                    <i class="fas fa-microphone-alt mr-2"></i> High-Quality Voice
                 </span>
                 <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-green-100 text-green-800">
-                    <i class="fas fa-bolt mr-2"></i> Serverless
+                    <i class="fas fa-server mr-2"></i> Static Hosting Ready
                 </span>
             </div>
         </header>
@@ -325,161 +195,11 @@
             <!-- Document Input Section -->
             <div class="lg:col-span-2 glass-effect rounded-2xl shadow-xl overflow-hidden card-hover">
                 <div class="p-8">
-                    <div class="flex justify-between items-center mb-6">
-                        <h2 class="text-3xl font-semibold text-gray-800">Document Reader</h2>
-                        <div class="flex space-x-3">
-                            <button id="settings-toggle" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary">
-                                <i class="fas fa-cog text-lg"></i>
-                            </button>
-                            <button id="fullscreen-toggle" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary">
-                                <i class="fas fa-expand text-lg"></i>
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <div id="settings-panel" class="settings-panel mb-6 glass-effect p-6 rounded-xl">
-                        <div class="flex border-b mb-6">
-                            <button class="tab-btn tab-active px-6 py-3 font-medium transition-all" data-tab="formatting">Formatting</button>
-                            <button class="tab-btn px-6 py-3 font-medium transition-all" data-tab="pronunciation">Pronunciation</button>
-                            <button class="tab-btn px-6 py-3 font-medium transition-all" data-tab="advanced">Advanced</button>
-                        </div>
-                        
-                        <div id="formatting-tab" class="tab-content">
-                            <div class="grid grid-cols-2 gap-6">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-2">Paragraph Spacing</label>
-                                    <select class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                                        <option>Single</option>
-                                        <option>1.5 lines</option>
-                                        <option>Double</option>
-                                    </select>
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-2">Font Size</label>
-                                    <select class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                                        <option>Small</option>
-                                        <option selected>Medium</option>
-                                        <option>Large</option>
-                                        <option>Extra Large</option>
-                                    </select>
-                                </div>
-                            </div>
-                            <div class="mt-6">
-                                <label class="block text-sm font-medium text-gray-700 mb-3">Text Alignment</label>
-                                <div class="flex space-x-3">
-                                    <button class="p-3 border rounded-lg hover:bg-gray-100 transition-all" data-align="left">
-                                        <i class="fas fa-align-left"></i>
-                                    </button>
-                                    <button class="p-3 border rounded-lg hover:bg-gray-100 transition-all" data-align="center">
-                                        <i class="fas fa-align-center"></i>
-                                    </button>
-                                    <button class="p-3 border rounded-lg hover:bg-gray-100 transition-all" data-align="right">
-                                        <i class="fas fa-align-right"></i>
-                                    </button>
-                                    <button class="p-3 border rounded-lg hover:bg-gray-100 transition-all" data-align="justify">
-                                        <i class="fas fa-align-justify"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div id="pronunciation-tab" class="tab-content hidden">
-                            <div class="mb-6">
-                                <label class="block text-sm font-medium text-gray-700 mb-3">Phonetic Adjustments</label>
-                                <div class="space-y-3">
-                                    <div class="flex items-center">
-                                        <input type="checkbox" id="phonetic-help" class="mr-3 rounded focus:ring-blue-500">
-                                        <label for="phonetic-help" class="text-sm font-medium">Enable phonetic assistance</label>
-                                    </div>
-                                    <div class="flex items-center">
-                                        <input type="checkbox" id="auto-pronounce" class="mr-3 rounded focus:ring-blue-500" checked>
-                                        <label for="auto-pronounce" class="text-sm font-medium">Auto-correct pronunciation</label>
-                                    </div>
-                                </div>
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-3">Custom Pronunciations</label>
-                                <div class="flex items-center mb-3">
-                                    <input type="text" id="custom-word" placeholder="Word" class="border border-gray-300 rounded-lg px-4 py-2 text-sm mr-3 flex-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                                    <input type="text" id="custom-pronunciation" placeholder="Pronunciation" class="border border-gray-300 rounded-lg px-4 py-2 text-sm mr-3 flex-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                                    <button id="add-pronunciation" class="btn-primary text-white px-4 py-2 rounded-lg">
-                                        <i class="fas fa-plus mr-1"></i> Add
-                                    </button>
-                                </div>
-                                <div class="text-xs text-gray-500 mb-3">
-                                    Add custom pronunciations for specific words or names
-                                </div>
-                                <div id="pronunciation-list" class="space-y-2"></div>
-                            </div>
-                        </div>
-                        
-                        <div id="advanced-tab" class="tab-content hidden">
-                            <div class="mb-6">
-                                <label class="block text-sm font-medium text-gray-700 mb-2">Audio Quality</label>
-                                <select id="audio-quality" class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                                    <option value="16">Standard (16kHz)</option>
-                                    <option value="24" selected>High (24kHz)</option>
-                                    <option value="32">HD (32kHz)</option>
-                                </select>
-                            </div>
-                            <div class="mb-6">
-                                <label class="block text-sm font-medium text-gray-700 mb-2">Chunk Size</label>
-                                <select id="chunk-size" class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                                    <option value="small">Small (better for slow connections)</option>
-                                    <option value="medium" selected>Medium (balanced)</option>
-                                    <option value="large">Large (fewer requests)</option>
-                                </select>
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-2">Cache Duration</label>
-                                <select id="cache-duration" class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                                    <option value="0">No caching</option>
-                                    <option value="3600" selected>1 hour</option>
-                                    <option value="86400">1 day</option>
-                                    <option value="604800">1 week</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="document-toolbar mb-4 flex flex-wrap gap-2">
-                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="bold" title="Bold">
-                            <i class="fas fa-bold"></i>
-                        </button>
-                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="italic" title="Italic">
-                            <i class="fas fa-italic"></i>
-                        </button>
-                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="underline" title="Underline">
-                            <i class="fas fa-underline"></i>
-                        </button>
-                        <div class="w-px h-8 bg-gray-300 mx-2"></div>
-                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="insertUnorderedList" title="Bullet List">
-                            <i class="fas fa-list-ul"></i>
-                        </button>
-                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="insertOrderedList" title="Numbered List">
-                            <i class="fas fa-list-ol"></i>
-                        </button>
-                        <div class="w-px h-8 bg-gray-300 mx-2"></div>
-                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="outdent" title="Decrease Indent">
-                            <i class="fas fa-outdent"></i>
-                        </button>
-                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="indent" title="Increase Indent">
-                            <i class="fas fa-indent"></i>
-                        </button>
-                        <div class="w-px h-8 bg-gray-300 mx-2"></div>
-                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="createLink" title="Insert Link">
-                            <i class="fas fa-link"></i>
-                        </button>
-                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="unlink" title="Remove Link">
-                            <i class="fas fa-unlink"></i>
-                        </button>
-                    </div>
+                    <h2 class="text-3xl font-semibold text-gray-800 mb-6">Document Editor</h2>
                     
                     <div class="mb-6">
-                        <label for="document-text" class="block text-sm font-medium text-gray-700 mb-3">Document Text</label>
                         <div class="document-container bg-gray-50 p-6 rounded-xl border border-gray-200">
-                            <div id="document-editor" class="min-h-[250px] outline-none" contenteditable="true" data-placeholder="Type or paste your text here..."></div>
-                            <div id="document-content" class="hidden prose max-w-none"></div>
+                            <div id="document-editor" class="min-h-[250px] outline-none prose max-w-none" contenteditable="true" data-placeholder="Type or paste your text here..."></div>
                         </div>
                     </div>
                     
@@ -487,14 +207,7 @@
                         <div class="text-sm text-gray-500">
                             <span id="word-count">0</span> words • <span id="char-count">0</span> characters
                         </div>
-                        <div class="flex gap-4">
-                            <button id="clear-btn" class="text-gray-500 hover:text-gray-700 font-medium">
-                                <i class="fas fa-trash-alt mr-1"></i> Clear
-                            </button>
-                            <button id="spellcheck-btn" class="text-gray-500 hover:text-gray-700 font-medium">
-                                <i class="fas fa-spell-check mr-1"></i> Spellcheck
-                            </button>
-                        </div>
+                        <button id="clear-btn" class="text-gray-500 hover:text-red-600 font-medium transition-colors"><i class="fas fa-trash-alt mr-1"></i> Clear</button>
                     </div>
                 </div>
             </div>
@@ -504,128 +217,28 @@
                 <div class="p-8">
                     <h2 class="text-3xl font-semibold text-gray-800 mb-6">Voice Settings</h2>
                     
-                    <div class="mb-8">
-                        <label class="block text-sm font-medium text-gray-700 mb-4">Select Language & Voice</label>
-                        <div class="space-y-4">
-                            <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-blue-50 border-gray-200" data-voice="en-US-Wavenet-A" data-lang="en-US">
-                                <div class="flex items-center">
-                                    <span class="language-flag flag-us"></span>
-                                    <div class="flex-1">
-                                        <div class="font-medium text-lg">James (Standard)</div>
-                                        <div class="text-sm text-gray-500">Male • Wavenet A</div>
-                                    </div>
-                                    <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
-                                </div>
-                            </div>
-                            <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-purple-50 border-gray-200" data-voice="en-US-Wavenet-F" data-lang="en-US">
-                                <div class="flex items-center">
-                                    <span class="language-flag flag-us"></span>
-                                    <div class="flex-1">
-                                        <div class="font-medium text-lg">Emily (Standard)</div>
-                                        <div class="text-sm text-gray-500">Female • Wavenet F</div>
-                                    </div>
-                                    <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
-                                </div>
-                            </div>
-                            <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-green-50 border-gray-200" data-voice="en-GB-Wavenet-B" data-lang="en-GB">
-                                <div class="flex items-center">
-                                    <span class="language-flag flag-uk"></span>
-                                    <div class="flex-1">
-                                        <div class="font-medium text-lg">Oliver (British)</div>
-                                        <div class="text-sm text-gray-500">Male • Wavenet B</div>
-                                    </div>
-                                    <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
-                                </div>
-                            </div>
-                            <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-pink-50 border-gray-200" data-voice="en-AU-Wavenet-A" data-lang="en-AU">
-                                <div class="flex items-center">
-                                    <span class="language-flag flag-au"></span>
-                                    <div class="flex-1">
-                                        <div class="font-medium text-lg">Charlotte (Australian)</div>
-                                        <div class="text-sm text-gray-500">Female • Wavenet A</div>
-                                    </div>
-                                    <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
-                                </div>
-                            </div>
-                            <button id="show-more-voices" class="w-full text-center text-blue-600 hover:text-blue-800 text-sm py-3 font-medium">
-                                <i class="fas fa-chevron-down mr-1"></i> Show More Voices
-                            </button>
-                            <div id="more-voices" class="hidden space-y-4">
-                                <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-yellow-50 border-gray-200" data-voice="en-IN-Wavenet-A" data-lang="en-IN">
-                                    <div class="flex items-center">
-                                        <span class="language-flag flag-in"></span>
-                                        <div class="flex-1">
-                                            <div class="font-medium text-lg">Arjun (Indian)</div>
-                                            <div class="text-sm text-gray-500">Male • Wavenet A</div>
-                                        </div>
-                                        <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
-                                    </div>
-                                </div>
-                                <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-red-50 border-gray-200" data-voice="en-ZA-Wavenet-A" data-lang="en-ZA">
-                                    <div class="flex items-center">
-                                        <span class="language-flag flag-za"></span>
-                                        <div class="flex-1">
-                                            <div class="font-medium text-lg">Lebo (South African)</div>
-                                            <div class="text-sm text-gray-500">Female • Wavenet A</div>
-                                        </div>
-                                        <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
-                                    </div>
-                                </div>
-                                <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-indigo-50 border-gray-200" data-voice="en-IE-Wavenet-A" data-lang="en-IE">
-                                    <div class="flex items-center">
-                                        <span class="language-flag flag-ie"></span>
-                                        <div class="flex-1">
-                                            <div class="font-medium text-lg">Connor (Irish)</div>
-                                            <div class="text-sm text-gray-500">Male • Wavenet A</div>
-                                        </div>
-                                        <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
-                                    </div>
-                                </div>
-                                <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-teal-50 border-gray-200" data-voice="en-NZ-Wavenet-A" data-lang="en-NZ">
-                                    <div class="flex items-center">
-                                        <span class="language-flag flag-nz"></span>
-                                        <div class="flex-1">
-                                            <div class="font-medium text-lg">Tiana (New Zealand)</div>
-                                            <div class="text-sm text-gray-500">Female • Wavenet A</div>
-                                        </div>
-                                        <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
-                                    </div>
-                                </div>
-                                <button id="show-less-voices" class="w-full text-center text-blue-600 hover:text-blue-800 text-sm py-3 font-medium">
-                                    <i class="fas fa-chevron-up mr-1"></i> Show Fewer Voices
-                                </button>
-                            </div>
+                    <div class="mb-6">
+                        <label for="hf-token" class="block text-sm font-medium text-gray-700 mb-2">Hugging Face API Token</label>
+                        <div class="flex gap-2">
+                           <input type="password" id="hf-token" placeholder="Enter your HF Read Token" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                           <button id="save-token-btn" class="btn-primary text-white px-4 py-2 rounded-lg" title="Save Token"><i class="fas fa-save"></i></button>
                         </div>
+                         <a href="https://huggingface.co/settings/tokens" target="_blank" class="text-xs text-blue-600 hover:underline mt-1">Get your token here</a>
                     </div>
                     
-                    <div class="mb-6">
-                        <label for="voice-speed" class="block text-sm font-medium text-gray-700 mb-3">Speed: <span id="speed-value" class="font-semibold">1.0</span>x</label>
-                        <input type="range" id="voice-speed" min="0.5" max="2" step="0.1" value="1" class="w-full cursor-pointer">
+                    <div class="mb-8 p-4 bg-gray-100 rounded-xl border border-gray-200">
+                        <p class="text-sm font-medium text-gray-700">Active Voice Model:</p>
+                        <p id="model-name" class="font-semibold text-gray-900">espnet/kan-bayashi_ljspeech_vits</p>
                     </div>
                     
                     <div class="mb-8">
-                        <label for="voice-pitch" class="block text-sm font-medium text-gray-700 mb-3">Pitch: <span id="pitch-value" class="font-semibold">0</span></label>
-                        <input type="range" id="voice-pitch" min="-20" max="20" step="1" value="0" class="w-full cursor-pointer">
-                    </div>
-                    
-                    <div class="mb-8">
-                        <label class="block text-sm font-medium text-gray-700 mb-4">Reading Mode</label>
-                        <div class="grid grid-cols-1 gap-3">
-                            <button class="reading-mode-btn py-3 px-4 border rounded-lg bg-blue-50 border-blue-200 text-blue-700 font-medium" data-mode="normal">
-                                <i class="fas fa-book-open mr-2"></i> Normal
-                            </button>
-                            <button class="reading-mode-btn py-3 px-4 border rounded-lg border-gray-200 hover:bg-gray-50 font-medium" data-mode="word">
-                                <i class="fas fa-font mr-2"></i> Word-by-word
-                            </button>
-                            <button class="reading-mode-btn py-3 px-4 border rounded-lg border-gray-200 hover:bg-gray-50 font-medium" data-mode="sentence">
-                                <i class="fas fa-align-left mr-2"></i> Sentence
-                            </button>
-                        </div>
+                        <label for="voice-speed" class="block text-sm font-medium text-gray-700 mb-3">Playback Speed: <span id="speed-value" class="font-semibold">1.0</span>x</label>
+                        <input type="range" id="voice-speed" min="0.5" max="2" step="0.1" value="1" class="w-full cursor-pointer">
                     </div>
-                    
+
                     <div class="flex flex-col gap-4 mb-6">
-                        <button id="play-btn" class="btn-primary text-white font-semibold py-4 px-6 rounded-lg transition flex items-center justify-center text-lg">
-                            <i class="fas fa-play mr-3"></i> Play
+                        <button id="play-btn" class="btn-primary text-white font-semibold py-4 px-6 rounded-lg transition flex items-center justify-center text-lg shadow-lg">
+                            <i id="play-icon" class="fas fa-play mr-3"></i> <span id="play-text">Play</span>
                         </button>
                         <div class="flex gap-4">
                             <button id="pause-btn" class="flex-1 btn-secondary text-gray-800 font-semibold py-3 px-4 rounded-lg transition flex items-center justify-center" disabled>
@@ -636,1324 +249,362 @@
                             </button>
                         </div>
                     </div>
-                    
-                    <div class="progress-bar mb-2">
+
+                    <div class="progress-bar mb-1" id="progress-bar-container">
                         <div id="progress-fill" class="progress-fill"></div>
                     </div>
-                    
-                    <div class="flex justify-between text-sm text-gray-500 mb-6">
-                        <span id="current-time" class="font-semibold">0:00</span>
-                        <span id="total-time" class="font-semibold">0:00</span>
-                    </div>
-                    
-                    <div class="flex justify-between">
-                        <button id="skip-back-btn" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Skip Back 15s">
-                            <i class="fas fa-backward text-lg"></i>
-                        </button>
-                        <button id="rewind-btn" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Rewind">
-                            <i class="fas fa-undo text-lg"></i>
-                        </button>
-                        <button id="forward-btn" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Forward">
-                            <i class="fas fa-redo text-lg"></i>
-                        </button>
-                        <button id="skip-forward-btn" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Skip Forward 15s">
-                            <i class="fas fa-forward text-lg"></i>
-                        </button>
+                     <div class="flex justify-between text-xs text-gray-500">
+                        <span id="current-time">0:00</span>
+                        <span id="total-time">0:00</span>
                     </div>
-                </div>
-            </div>
-        </div>
-        
-        <!-- Audio Visualization -->
-        <div class="mt-8 glass-effect rounded-2xl shadow-xl overflow-hidden card-hover">
-            <div class="p-8">
-                <div class="flex justify-between items-center mb-6">
-                    <h2 class="text-3xl font-semibold text-gray-800">Audio Visualization</h2>
-                    <div class="flex items-center space-x-3">
-                        <button id="visualization-mode" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Change Visualization">
-                            <i class="fas fa-sliders-h text-lg"></i>
-                        </button>
-                        <button id="download-audio" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Download Audio">
-                            <i class="fas fa-download text-lg"></i>
-                        </button>
-                    </div>
-                </div>
-                <div class="waveform" id="waveform">
-                    <div class="waveform-bar" style="--delay: 1; height: 15px;"></div>
-                    <div class="waveform-bar" style="--delay: 2; height: 25px;"></div>
-                    <div class="waveform-bar" style="--delay: 3; height: 10px;"></div>
-                    <div class="waveform-bar" style="--delay: 4; height: 30px;"></div>
-                    <div class="waveform-bar" style="--delay: 5; height: 20px;"></div>
-                    <div class="waveform-bar" style="--delay: 6; height: 15px;"></div>
-                    <div class="waveform-bar" style="--delay: 7; height: 25px;"></div>
-                    <div class="waveform-bar" style="--delay: 8; height: 10px;"></div>
-                    <div class="waveform-bar" style="--delay: 9; height: 30px;"></div>
-                    <div class="waveform-bar" style="--delay: 10; height: 20px;"></div>
-                </div>
-            </div>
-        </div>
-        
-        <!-- Saved Documents Section -->
-        <div class="mt-8 glass-effect rounded-2xl shadow-xl overflow-hidden card-hover">
-            <div class="p-8">
-                <div class="flex justify-between items-center mb-6">
-                    <h2 class="text-3xl font-semibold text-gray-800">Saved Documents</h2>
-                    <div class="flex space-x-3">
-                        <button id="refresh-docs-btn" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Refresh">
-                            <i class="fas fa-sync-alt text-lg"></i>
-                        </button>
-                        <button id="save-doc-btn" class="btn-primary text-white font-semibold py-3 px-6 rounded-lg transition">
-                            <i class="fas fa-save mr-2"></i> Save Current
-                        </button>
-                    </div>
-                </div>
-                
-                <div class="mb-6 flex items-center">
-                    <div class="relative flex-1 max-w-md">
-                        <input type="text" id="search-docs" placeholder="Search documents..." class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                            <i class="fas fa-search text-gray-400"></i>
-                        </div>
-                    </div>
-                    <button id="filter-docs-btn" class="ml-4 p-3 text-gray-500 hover:text-gray-700 rounded-lg btn-secondary">
-                        <i class="fas fa-filter text-lg"></i>
-                    </button>
-                </div>
-                
-                <div class="overflow-x-auto">
-                    <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
-                            <tr>
-                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    <button class="flex items-center sort-btn" data-sort="title">
-                                        Title <i class="fas fa-sort ml-2"></i>
-                                    </button>
-                                </th>
-                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    <button class="flex items-center sort-btn" data-sort="date">
-                                        Date <i class="fas fa-sort ml-2"></i>
-                                    </button>
-                                </th>
-                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    <button class="flex items-center sort-btn" data-sort="length">
-                                        Length <i class="fas fa-sort ml-2"></i>
-                                    </button>
-                                </th>
-                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    <button class="flex items-center sort-btn" data-sort="language">
-                                        Language <i class="fas fa-sort ml-2"></i>
-                                    </button>
-                                </th>
-                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody id="saved-docs-list" class="bg-white divide-y divide-gray-200">
-                            <tr>
-                                <td colspan="5" class="px-6 py-4 text-center text-gray-500">No saved documents yet</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                
-                <div class="mt-6 flex justify-between items-center">
-                    <div class="text-sm text-gray-500">
-                        Showing <span id="showing-from" class="font-semibold">1</span> to <span id="showing-to" class="font-semibold">0</span> of <span id="total-docs" class="font-semibold">0</span> documents
-                    </div>
-                    <div class="flex space-x-3">
-                        <button id="prev-page-btn" class="px-4 py-2 border rounded-lg disabled:opacity-50 btn-secondary" disabled>
-                            <i class="fas fa-chevron-left"></i>
-                        </button>
-                        <button id="next-page-btn" class="px-4 py-2 border rounded-lg disabled:opacity-50 btn-secondary" disabled>
-                            <i class="fas fa-chevron-right"></i>
-                        </button>
+
+                    <div class="waveform mt-6" id="waveform">
+                        <!-- Waveform bars will be dynamically inserted here -->
                     </div>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Modals -->
-    <div id="url-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="glass-effect rounded-2xl p-8 max-w-md w-full mx-4">
-            <h3 class="text-2xl font-semibold mb-6">Load Document from URL</h3>
-            <input type="text" id="document-url" placeholder="Enter document URL" class="w-full p-4 border border-gray-300 rounded-lg mb-6 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-            <div class="mb-6">
-                <label class="block text-sm font-medium text-gray-700 mb-3">Document Type</label>
-                <select class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                    <option>Auto-detect</option>
-                    <option>Plain Text</option>
-                    <option>Web Page</option>
-                    <option>PDF</option>
-                    <option>Word Document</option>
-                </select>
-            </div>
-            <div class="flex justify-end space-x-4">
-                <button id="cancel-url-btn" class="px-6 py-3 border border-gray-300 rounded-lg btn-secondary font-medium">Cancel</button>
-                <button id="load-url-btn" class="px-6 py-3 btn-primary text-white rounded-lg font-medium">Load</button>
-            </div>
-        </div>
-    </div>
+    <!-- Notification Container -->
+    <div id="notification-container" class="fixed top-5 right-5 z-[1001] w-80"></div>
     
-    <div id="save-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="glass-effect rounded-2xl p-8 max-w-md w-full mx-4">
-            <h3 class="text-2xl font-semibold mb-6">Save Document</h3>
-            <input type="text" id="document-title" placeholder="Document title" class="w-full p-4 border border-gray-300 rounded-lg mb-6 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-            <div class="mb-6">
-                <label class="block text-sm font-medium text-gray-700 mb-3">Tags</label>
-                <input type="text" id="document-tags" placeholder="Add tags (comma separated)" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-            </div>
-            <div class="flex justify-end space-x-4">
-                <button id="cancel-save-btn" class="px-6 py-3 border border-gray-300 rounded-lg btn-secondary font-medium">Cancel</button>
-                <button id="confirm-save-btn" class="px-6 py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium">Save</button>
-            </div>
-        </div>
-    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // --- DOM Element Cache ---
+            const dom = {
+                editor: document.getElementById('document-editor'),
+                wordCount: document.getElementById('word-count'),
+                charCount: document.getElementById('char-count'),
+                playBtn: document.getElementById('play-btn'),
+                playIcon: document.getElementById('play-icon'),
+                playText: document.getElementById('play-text'),
+                pauseBtn: document.getElementById('pause-btn'),
+                stopBtn: document.getElementById('stop-btn'),
+                clearBtn: document.getElementById('clear-btn'),
+                speedSlider: document.getElementById('voice-speed'),
+                speedValue: document.getElementById('speed-value'),
+                progressBarContainer: document.getElementById('progress-bar-container'),
+                progressFill: document.getElementById('progress-fill'),
+                currentTime: document.getElementById('current-time'),
+                totalTime: document.getElementById('total-time'),
+                waveform: document.getElementById('waveform'),
+                notificationContainer: document.getElementById('notification-container'),
+                hfTokenInput: document.getElementById('hf-token'),
+                saveTokenBtn: document.getElementById('save-token-btn'),
+                modelName: document.getElementById('model-name'),
+            };
 
-    <!-- Notification Container -->
-    <div id="notification-container" class="fixed top-20 right-20 z-50"></div>
+            // --- State Management ---
+            const state = {
+                isPlaying: false,
+                isPaused: false,
+                isLoading: false,
+                currentSentenceIndex: 0,
+                sentences: [],
+                audioPlayer: new Audio(),
+                hfToken: '',
+                apiModel: 'espnet/kan-bayashi_ljspeech_vits',
+            };
 
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Val Town configuration
-            const VAL_TOWN_USERNAME = 'toowired';
-            const VAL_TOWN_API_URL = `https://${VAL_TOWN_USERNAME}.val.run`;
-            
-            // DOM Elements
-            const documentEditor = document.getElementById('document-editor');
-            const documentContent = document.getElementById('document-content');
-            const wordCount = document.getElementById('word-count');
-            const charCount = document.getElementById('char-count');
-            const playBtn = document.getElementById('play-btn');
-            const pauseBtn = document.getElementById('pause-btn');
-            const stopBtn = document.getElementById('stop-btn');
-            const clearBtn = document.getElementById('clear-btn');
-            const spellcheckBtn = document.getElementById('spellcheck-btn');
-            const formatBtns = document.querySelectorAll('.format-btn');
-            const settingsToggle = document.getElementById('settings-toggle');
-            const settingsPanel = document.getElementById('settings-panel');
-            const tabBtns = document.querySelectorAll('.tab-btn');
-            const tabContents = document.querySelectorAll('.tab-content');
-            const fullscreenToggle = document.getElementById('fullscreen-toggle');
-            const voiceSpeed = document.getElementById('voice-speed');
-            const voicePitch = document.getElementById('voice-pitch');
-            const speedValue = document.getElementById('speed-value');
-            const pitchValue = document.getElementById('pitch-value');
-            const progressFill = document.getElementById('progress-fill');
-            const currentTime = document.getElementById('current-time');
-            const totalTime = document.getElementById('total-time');
-            const waveform = document.getElementById('waveform');
-            const voiceOptions = document.querySelectorAll('.voice-option');
-            const showMoreVoices = document.getElementById('show-more-voices');
-            const showLessVoices = document.getElementById('show-less-voices');
-            const moreVoices = document.getElementById('more-voices');
-            const readingModeBtns = document.querySelectorAll('.reading-mode-btn');
-            const skipBackBtn = document.getElementById('skip-back-btn');
-            const rewindBtn = document.getElementById('rewind-btn');
-            const forwardBtn = document.getElementById('forward-btn');
-            const skipForwardBtn = document.getElementById('skip-forward-btn');
-            const visualizationMode = document.getElementById('visualization-mode');
-            const downloadAudio = document.getElementById('download-audio');
-            const savedDocsList = document.getElementById('saved-docs-list');
-            const saveDocBtn = document.getElementById('save-doc-btn');
-            const refreshDocsBtn = document.getElementById('refresh-docs-btn');
-            const searchDocs = document.getElementById('search-docs');
-            const filterDocsBtn = document.getElementById('filter-docs-btn');
-            const sortBtns = document.querySelectorAll('.sort-btn');
-            const prevPageBtn = document.getElementById('prev-page-btn');
-            const nextPageBtn = document.getElementById('next-page-btn');
-            const showingFrom = document.getElementById('showing-from');
-            const showingTo = document.getElementById('showing-to');
-            const totalDocs = document.getElementById('total-docs');
-            const urlModal = document.getElementById('url-modal');
-            const documentUrl = document.getElementById('document-url');
-            const cancelUrlBtn = document.getElementById('cancel-url-btn');
-            const loadUrlBtn = document.getElementById('load-url-btn');
-            const saveModal = document.getElementById('save-modal');
-            const documentTitle = document.getElementById('document-title');
-            const cancelSaveBtn = document.getElementById('cancel-save-btn');
-            const confirmSaveBtn = document.getElementById('confirm-save-btn');
-            const notificationContainer = document.getElementById('notification-container');
-            const saveLanguage = document.getElementById('save-language');
-            const addPronunciationBtn = document.getElementById('add-pronunciation');
-            const customWord = document.getElementById('custom-word');
-            const customPronunciation = document.getElementById('custom-pronunciation');
-            const pronunciationList = document.getElementById('pronunciation-list');
-            
-            // State variables
-            let selectedVoice = 'en-US-Wavenet-A';
-            let selectedLanguage = 'en-US';
-            let isPlaying = false;
-            let currentPosition = 0;
-            let speechSynthesis = window.speechSynthesis;
-            let utterance = null;
-            let savedDocuments = [];
-            let currentPage = 1;
-            const docsPerPage = 5;
-            let sortField = 'date';
-            let sortDirection = 'desc';
-            let isFullscreen = false;
-            let documentToolbarVisible = true;
-            let customPronunciations = new Map();
-            let readingMode = 'normal';
-            let currentSentenceIndex = 0;
-            let currentWordIndex = 0;
-            let resumePosition = 0;
-            
-            // Initialize
-            updateCounts();
-            loadSavedDocuments();
-            setupDocumentEditor();
-            setupVoiceOptions();
-            loadCustomPronunciations();
-            
-            // Event Listeners
-            documentEditor.addEventListener('input', updateCounts);
-            documentEditor.addEventListener('focus', showDocumentToolbar);
-            documentEditor.addEventListener('blur', hideDocumentToolbarAfterDelay);
-            
-            playBtn.addEventListener('click', playTTS);
-            pauseBtn.addEventListener('click', pauseTTS);
-            stopBtn.addEventListener('click', stopTTS);
-            clearBtn.addEventListener('click', clearDocument);
-            spellcheckBtn.addEventListener('click', toggleSpellcheck);
-            
-            formatBtns.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    const command = btn.dataset.command;
-                    if (command === 'createLink') {
-                        const url = prompt('Enter the URL:');
-                        if (url) {
-                            document.execCommand(command, false, url);
-                        }
-                    } else {
-                        document.execCommand(command, false, null);
-                    }
-                    documentEditor.focus();
-                });
-            });
-            
-            settingsToggle.addEventListener('click', toggleSettingsPanel);
-            fullscreenToggle.addEventListener('click', toggleFullscreen);
-            
-            tabBtns.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    const tab = btn.dataset.tab;
-                    switchTab(tab);
-                });
-            });
-            
-            voiceSpeed.addEventListener('input', () => {
-                speedValue.textContent = voiceSpeed.value;
-                updateUtteranceSettings();
-            });
-            
-            voicePitch.addEventListener('input', () => {
-                pitchValue.textContent = voicePitch.value;
-                updateUtteranceSettings();
-            });
-            
-            voiceOptions.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    const tab = btn.dataset.tab;
-                    switchTab(tab);
-                });
-            });
-            
-            readingModeBtns.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    readingModeBtns.forEach(b => {
-                        b.classList.remove('bg-blue-50', 'border-blue-200', 'text-blue-700');
-                        b.classList.add('border-gray-200', 'hover:bg-gray-50');
-                    });
-                    btn.classList.add('bg-blue-50', 'border-blue-200', 'text-blue-700');
-                    btn.classList.remove('border-gray-200', 'hover:bg-gray-50');
-                    readingMode = btn.dataset.mode;
-                });
-            });
-            
-            skipBackBtn.addEventListener('click', () => skipTime(-15));
-            rewindBtn.addEventListener('click', () => skipTime(-5));
-            forwardBtn.addEventListener('click', () => skipTime(5));
-            skipForwardBtn.addEventListener('click', () => skipTime(15));
-            
-            visualizationMode.addEventListener('click', changeVisualizationMode);
-            downloadAudio.addEventListener('click', downloadAudioFile);
-            
-            saveDocBtn.addEventListener('click', showSaveModal);
-            refreshDocsBtn.addEventListener('click', loadSavedDocuments);
-            searchDocs.addEventListener('input', filterSavedDocuments);
-            filterDocsBtn.addEventListener('click', showFilterOptions);
-            
-            sortBtns.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    const field = btn.dataset.sort;
-                    if (sortField === field) {
-                        sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
-                    } else {
-                        sortField = field;
-                        sortDirection = 'asc';
-                    }
-                    updateSortButtons();
-                    renderSavedDocuments();
-                });
-            });
-            
-            prevPageBtn.addEventListener('click', () => {
-                if (currentPage > 1) {
-                    currentPage--;
-                    renderSavedDocuments();
-                }
-            });
-            
-            nextPageBtn.addEventListener('click', () => {
-                if (currentPage * docsPerPage < savedDocuments.length) {
-                    currentPage++;
-                    renderSavedDocuments();
-                }
-            });
-            
-            cancelUrlBtn.addEventListener('click', () => urlModal.classList.add('hidden'));
-            loadUrlBtn.addEventListener('click', loadFromUrl);
-            cancelSaveBtn.addEventListener('click', () => saveModal.classList.add('hidden'));
-            confirmSaveBtn.addEventListener('click', saveCurrentDocument);
-            
-            addPronunciationBtn.addEventListener('click', addCustomPronunciation);
-            
-            // Functions
-            function updateCounts() {
-                const text = documentEditor.innerText.trim();
-                const words = text ? text.split(/\s+/).length : 0;
-                const chars = text.length;
-                wordCount.textContent = words;
-                charCount.textContent = chars;
-            }
-            
-            function setupDocumentEditor() {
-                documentEditor.addEventListener('keydown', (e) => {
-                    if (e.key === 'Tab') {
-                        e.preventDefault();
-                        document.execCommand('indent');
-                    }
-                });
+            // --- Initialization ---
+            function init() {
+                loadToken();
+                updateCounts();
+                createWaveformBars();
+                setupEventListeners();
+                dom.modelName.textContent = state.apiModel;
             }
-            
-            function showDocumentToolbar() {
-                if (!documentToolbarVisible) {
-                    document.querySelector('.document-toolbar').classList.remove('hidden');
-                    documentToolbarVisible = true;
+
+            function loadToken() {
+                const savedToken = localStorage.getItem('hf_tts_token');
+                if (savedToken) {
+                    state.hfToken = savedToken;
+                    dom.hfTokenInput.value = '********'; // Mask the token in UI
+                    showNotification('Hugging Face token loaded from storage.', 'success');
                 }
             }
-            
-            function hideDocumentToolbarAfterDelay() {
-                setTimeout(() => {
-                    if (!documentEditor.contains(document.activeElement)) {
-                        document.querySelector('.document-toolbar').classList.add('hidden');
-                        documentToolbarVisible = false;
-                    }
-                }, 200);
-            }
-            
-            function toggleSpellcheck() {
-                documentEditor.spellcheck = !documentEditor.spellcheck;
-                spellcheckBtn.classList.toggle('text-blue-600');
-                showNotification(documentEditor.spellcheck ? 'Spellcheck enabled' : 'Spellcheck disabled');
-            }
-            
-            function toggleSettingsPanel() {
-                settingsPanel.classList.toggle('open');
-                settingsToggle.classList.toggle('text-blue-600');
-            }
-            
-            function toggleFullscreen() {
-                const docContainer = document.querySelector('.lg\\:col-span-2');
-                
-                if (!isFullscreen) {
-                    docContainer.requestFullscreen?.();
-                    docContainer.classList.add('fixed', 'inset-0', 'z-50', 'bg-white');
-                    fullscreenToggle.innerHTML = '<i class="fas fa-compress text-lg"></i>';
-                } else {
-                    document.exitFullscreen?.();
-                    docContainer.classList.remove('fixed', 'inset-0', 'z-50', 'bg-white');
-                    fullscreenToggle.innerHTML = '<i class="fas fa-expand text-lg"></i>';
+
+            function createWaveformBars() {
+                dom.waveform.innerHTML = '';
+                for (let i = 0; i < 40; i++) {
+                    const bar = document.createElement('div');
+                    bar.className = 'waveform-bar';
+                    bar.style.setProperty('--delay', i);
+                    dom.waveform.appendChild(bar);
                 }
-                
-                isFullscreen = !isFullscreen;
             }
             
-            function switchTab(tab) {
-                tabBtns.forEach(btn => {
-                    if (btn.dataset.tab === tab) {
-                        btn.classList.add('tab-active');
-                    } else {
-                        btn.classList.remove('tab-active');
-                    }
-                });
-                
-                tabContents.forEach(content => {
-                    if (content.id === `${tab}-tab`) {
-                        content.classList.remove('hidden');
-                    } else {
-                        content.classList.add('hidden');
-                    }
-                });
+            // --- Event Listeners ---
+            function setupEventListeners() {
+                dom.editor.addEventListener('input', updateCounts);
+                dom.playBtn.addEventListener('click', handlePlayPause);
+                dom.pauseBtn.addEventListener('click', handlePause);
+                dom.stopBtn.addEventListener('click', handleStop);
+                dom.clearBtn.addEventListener('click', clearDocument);
+                dom.saveTokenBtn.addEventListener('click', saveToken);
+                dom.speedSlider.addEventListener('input', handleSpeedChange);
+                state.audioPlayer.addEventListener('timeupdate', updateProgress);
+                state.audioPlayer.addEventListener('ended', onAudioEnded);
             }
-            
-            function setupVoiceOptions() {
-                if (voiceOptions.length > 0) {
-                    voiceOptions[0].classList.add('selected');
-                    voiceOptions[0].querySelector('.voice-check').classList.remove('opacity-0');
+
+            // --- Core Application Logic ---
+
+            function handlePlayPause() {
+                if (state.isPlaying) {
+                    handlePause();
+                } else {
+                    handlePlay();
                 }
-                
-                voiceOptions.forEach(option => {
-                    option.addEventListener('click', () => {
-                        voiceOptions.forEach(opt => {
-                            opt.classList.remove('selected');
-                            opt.querySelector('.voice-check').classList.add('opacity-0');
-                        });
-                        
-                        option.classList.add('selected');
-                        option.querySelector('.voice-check').classList.remove('opacity-0');
-                        
-                        selectedVoice = option.dataset.voice;
-                        selectedLanguage = option.dataset.lang;
-                        saveLanguage.value = selectedLanguage;
-                        
-                        showNotification(`Voice selected: ${option.querySelector('.font-medium').textContent}`);
-                    });
-                });
             }
             
-            function applyCustomPronunciations(text) {
-                let processedText = text;
-                customPronunciations.forEach((pronunciation, word) => {
-                    const regex = new RegExp(`\\b${word}\\b`, 'gi');
-                    processedText = processedText.replace(regex, pronunciation);
-                });
-                return processedText;
-            }
-            
-            function playTTS() {
-                let text = documentEditor.innerText.trim();
-                if (!text) {
-                    showNotification('Please enter some text to read', 'warning');
+            function handlePlay() {
+                if (state.isLoading) return;
+
+                if (state.isPaused) {
+                    state.audioPlayer.play();
+                    state.isPaused = false;
+                    state.isPlaying = true;
+                    updateUIForPlaying();
                     return;
                 }
-                
-                text = applyCustomPronunciations(text);
-                
-                if (isPlaying && speechSynthesis.paused) {
-                    speechSynthesis.resume();
-                    playBtn.disabled = true;
-                    pauseBtn.disabled = false;
+
+                if (!state.hfToken) {
+                    showNotification('Please enter your Hugging Face API Token.', 'error');
+                    dom.hfTokenInput.focus();
                     return;
                 }
-                
-                stopTTS();
-                
-                let textToSpeak = text;
-                if (readingMode === 'sentence') {
-                    const sentences = text.split(/[.!?]\s+/);
-                    if (currentSentenceIndex >= sentences.length) currentSentenceIndex = 0;
-                    textToSpeak = sentences[currentSentenceIndex];
-                } else if (readingMode === 'word') {
-                    const words = text.split(/\s+/);
-                    if (currentWordIndex >= words.length) currentWordIndex = 0;
-                    textToSpeak = words[currentWordIndex];
-                }
-                
-                utterance = new SpeechSynthesisUtterance(textToSpeak);
-                updateUtteranceSettings();
-                
-                const voices = speechSynthesis.getVoices();
-                const selectedVoiceObj = voices.find(v => 
-                    v.name.includes(selectedVoice) || 
-                    v.lang === selectedLanguage.replace('-', '_') ||
-                    v.lang === selectedLanguage
-                );
-                
-                if (selectedVoiceObj) {
-                    utterance.voice = selectedVoiceObj;
-                }
-                
-                let wordsSpoken = 0;
-                const totalWords = textToSpeak.split(/\s+/).length;
-                
-                utterance.onboundary = (event) => {
-                    if (event.name === 'word') {
-                        wordsSpoken++;
-                        const progress = (wordsSpoken / totalWords) * 100;
-                        progressFill.style.width = `${progress}%`;
-                        
-                        const estimatedDuration = totalWords * 0.5;
-                        const current = (progress / 100) * estimatedDuration;
-                        currentTime.textContent = formatTime(current);
-                        totalTime.textContent = formatTime(estimatedDuration);
-                        
-                        if (readingMode === 'word') {
-                            const words = documentEditor.innerText.split(/\s+/);
-                            highlightText(documentEditor, words[currentWordIndex]);
-                        }
-                    }
-                };
-                
-                utterance.onstart = () => {
-                    isPlaying = true;
-                    playBtn.disabled = true;
-                    pauseBtn.disabled = false;
-                    stopBtn.disabled = false;
-                    
-                    documentContent.innerHTML = documentEditor.innerHTML;
-                    documentEditor.classList.add('hidden');
-                    documentContent.classList.remove('hidden');
-                    
-                    animateWaveform();
-                };
-                
-                utterance.onend = () => {
-                    isPlaying = false;
-                    playBtn.disabled = false;
-                    pauseBtn.disabled = true;
-                    stopBtn.disabled = true;
-                    
-                    if (readingMode === 'sentence') {
-                        currentSentenceIndex++;
-                        const sentences = text.split(/[.!?]\s+/);
-                        if (currentSentenceIndex < sentences.length) {
-                            setTimeout(() => playTTS(), 500);
-                            return;
-                        }
-                    } else if (readingMode === 'word') {
-                        currentWordIndex++;
-                        const words = text.split(/\s+/);
-                        if (currentWordIndex < words.length) {
-                            setTimeout(() => playTTS(), 300);
-                            return;
-                        }
-                    }
-                    
-                    progressFill.style.width = '0%';
-                    currentTime.textContent = '0:00';
-                    stopWaveformAnimation();
-                    documentEditor.classList.remove('hidden');
-                    documentContent.classList.add('hidden');
-                    currentSentenceIndex = 0;
-                    currentWordIndex = 0;
-                };
-                
-                utterance.onerror = (event) => {
-                    console.error('SpeechSynthesis error:', event);
-                    showNotification('Speech synthesis error: ' + event.error, 'error');
-                    isPlaying = false;
-                    playBtn.disabled = false;
-                    pauseBtn.disabled = true;
-                    stopBtn.disabled = true;
-                    stopWaveformAnimation();
-                    documentEditor.classList.remove('hidden');
-                    documentContent.classList.add('hidden');
-                };
-                
-                speechSynthesis.speak(utterance);
-            }
-            
-            function updateUtteranceSettings() {
-                if (utterance) {
-                    utterance.rate = parseFloat(voiceSpeed.value);
-                    utterance.pitch = parseFloat(voicePitch.value) / 10;
-                }
-            }
-            
-            function pauseTTS() {
-                if (isPlaying) {
-                    speechSynthesis.pause();
-                    playBtn.disabled = false;
-                    pauseBtn.disabled = true;
-                    stopWaveformAnimation();
+
+                const text = dom.editor.innerText.trim();
+                if (!text) {
+                    showNotification('Editor is empty. Please enter some text.', 'warning');
+                    return;
                 }
-            }
-            
-            function stopTTS() {
-                speechSynthesis.cancel();
-                isPlaying = false;
-                playBtn.disabled = false;
-                pauseBtn.disabled = true;
-                stopBtn.disabled = true;
-                progressFill.style.width = '0%';
-                currentTime.textContent = '0:00';
-                
-                document.querySelectorAll('.highlight').forEach(el => {
-                    el.classList.remove('highlight');
-                });
-                
-                documentEditor.classList.remove('hidden');
-                documentContent.classList.add('hidden');
-                stopWaveformAnimation();
-                currentSentenceIndex = 0;
-                currentWordIndex = 0;
-            }
-            
-            function skipTime(seconds) {
-                if (!utterance || !isPlaying) return;
-                
-                const direction = seconds > 0 ? 'forward' : 'backward';
-                showNotification(`Skipping ${Math.abs(seconds)} seconds ${direction}`);
+
+                state.sentences = text.match(/[^.!?]+[.!?]*|[^.!?]+/g) || [];
+                state.currentSentenceIndex = 0;
                 
-                if (readingMode === 'sentence') {
-                    if (seconds > 0) {
-                        currentSentenceIndex++;
-                    } else {
-                        currentSentenceIndex = Math.max(0, currentSentenceIndex - 1);
-                    }
-                    stopTTS();
-                    playTTS();
-                } else if (readingMode === 'word') {
-                    const words = documentEditor.innerText.split(/\s+/);
-                    if (seconds > 0) {
-                        currentWordIndex = Math.min(words.length - 1, currentWordIndex + 1);
-                    } else {
-                        currentWordIndex = Math.max(0, currentWordIndex - 1);
-                    }
-                    stopTTS();
-                    playTTS();
+                if (state.sentences.length > 0) {
+                    playSentence(state.currentSentenceIndex);
                 }
             }
-            
-            function clearDocument() {
-                if (confirm('Are you sure you want to clear all text?')) {
-                    stopTTS();
-                    documentEditor.innerHTML = '';
-                    documentContent.innerHTML = '';
-                    updateCounts();
-                    showNotification('Document cleared');
+
+            function handlePause() {
+                if (state.isPlaying && !state.isPaused) {
+                    state.audioPlayer.pause();
+                    state.isPaused = true;
+                    state.isPlaying = false;
+                    updateUIForPaused();
                 }
             }
-            
-            function changeVisualizationMode() {
-                const modes = ['waveform', 'spectrum', 'circle'];
-                let currentMode = waveform.dataset.mode || 'waveform';
-                let nextMode = modes[(modes.indexOf(currentMode) + 1) % modes.length];
-                
-                waveform.dataset.mode = nextMode;
-                
-                const icons = {
-                    'waveform': 'fa-sliders-h',
-                    'spectrum': 'fa-chart-bar',
-                    'circle': 'fa-circle-notch'
-                };
-                
-                visualizationMode.innerHTML = `<i class="fas ${icons[nextMode]} text-lg"></i>`;
-                showNotification(`Visualization mode: ${nextMode.charAt(0).toUpperCase() + nextMode.slice(1)}`);
-            }
-            
-            function downloadAudioFile() {
-                showNotification('Preparing audio file for download...', 'info');
-                
-                setTimeout(() => {
-                    const dummyAudio = new Blob([''], { type: 'audio/wav' });
-                    const url = URL.createObjectURL(dummyAudio);
-                    
-                    const a = document.createElement('a');
-                    a.href = url;
-                    a.download = `tts-audio-${new Date().toISOString().slice(0, 19)}.wav`;
-                    a.click();
-                    
-                    URL.revokeObjectURL(url);
-                    showNotification('Audio download started', 'success');
-                }, 1000);
+
+            function handleStop() {
+                state.audioPlayer.pause();
+                state.audioPlayer.src = '';
+                resetState();
+                updateUIForStopped();
             }
-            
-            function loadFromUrl() {
-                const url = documentUrl.value.trim();
-                if (!url) {
-                    showNotification('Please enter a URL', 'warning');
-                    return;
-                }
-                
-                if (!isValidUrl(url)) {
-                    showNotification('Please enter a valid URL', 'error');
+
+            async function playSentence(index) {
+                if (index >= state.sentences.length) {
+                    handleStop();
                     return;
                 }
-                
-                showNotification('Loading content from URL...', 'info');
-                
-                setTimeout(() => {
-                    documentEditor.innerHTML = `
-                        <h2>Sample Content from ${url}</h2>
-                        <p>This is a demonstration of how content would be loaded from the URL.</p>
-                        <p>In a real implementation, this would fetch and parse the actual content from the provided URL.</p>
-                    `;
-                    updateCounts();
-                    urlModal.classList.add('hidden');
-                    documentUrl.value = '';
-                    showNotification('Content loaded successfully', 'success');
-                }, 1500);
-            }
-            
-            function isValidUrl(string) {
-                try {
-                    new URL(string);
-                    return true;
-                } catch (_) {
-                    return false;
-                }
-            }
-            
-            function showSaveModal() {
-                const text = documentEditor.innerText.trim();
-                if (!text) {
-                    showNotification('Please enter some text to save.', 'warning');
+
+                const sentence = state.sentences[index].trim();
+                if (!sentence) {
+                    // Skip empty sentences
+                    state.currentSentenceIndex++;
+                    playSentence(state.currentSentenceIndex);
                     return;
                 }
-                
-                documentTitle.value = `Document ${savedDocuments.length + 1}`;
-                saveLanguage.value = selectedLanguage;
-                saveModal.classList.remove('hidden');
-                documentTitle.focus();
-            }
-            
-            async function saveCurrentDocument() {
-                const title = documentTitle.value.trim() || `Document ${savedDocuments.length + 1}`;
-                const text = documentEditor.innerHTML;
-                const plainText = documentEditor.innerText;
-                const date = new Date().toLocaleDateString();
-                const length = plainText.split(/\s+/).length;
-                const tags = document.getElementById('document-tags').value.trim();
-                
-                const doc = { 
-                    id: Date.now(),
-                    title, 
-                    text, 
-                    plainText,
-                    date, 
-                    length,
-                    language: 'en-US',
-                    tags: tags ? tags.split(',').map(t => t.trim()) : []
-                };
+
+                setLoading(true);
+                highlightSentence(index);
                 
                 try {
-                    showNotification('Saving to Val Town...', 'info');
-                    
-                    // Save to Val Town
-                    const response = await fetch(`${VAL_TOWN_API_URL}/saveDocument`, {
+                    const response = await fetch(`https://api-inference.huggingface.co/models/${state.apiModel}`, {
                         method: 'POST',
                         headers: {
-                            'Content-Type': 'application/json',
+                            'Authorization': `Bearer ${state.hfToken}`,
+                            'Content-Type': 'application/json'
                         },
-                        body: JSON.stringify(doc)
+                        body: JSON.stringify({ inputs: sentence }),
                     });
-                    
-                    if (response.ok) {
-                        savedDocuments.unshift(doc);
-                        saveModal.classList.add('hidden');
-                        documentTitle.value = '';
-                        document.getElementById('document-tags').value = '';
-                        
-                        renderSavedDocuments();
-                        currentPage = 1;
-                        
-                        showNotification(`Document "${title}" saved successfully to Val Town`, 'success');
-                    } else {
-                        throw new Error('Failed to save to Val Town');
+
+                    if (!response.ok) {
+                        const error = await response.json();
+                        throw new Error(error.error || 'Failed to fetch audio from API.');
                     }
-                } catch (error) {
-                    console.error('Error saving to Val Town:', error);
-                    // Fallback to local storage
-                    savedDocuments.unshift(doc);
-                    localStorage.setItem('tts-documents', JSON.stringify(savedDocuments));
-                    
-                    saveModal.classList.add('hidden');
-                    documentTitle.value = '';
-                    document.getElementById('document-tags').value = '';
                     
-                    renderSavedDocuments();
-                    currentPage = 1;
+                    const audioBlob = await response.blob();
+                    const audioUrl = URL.createObjectURL(audioBlob);
                     
-                    showNotification(`Document "${title}" saved locally (Val Town unavailable)`, 'warning');
-                }
-            }
-            
-            async function loadSavedDocuments() {
-                try {
-                    showNotification('Loading documents from Val Town...', 'info');
-                    
-                    const response = await fetch(`${VAL_TOWN_API_URL}/getDocuments`);
-                    
-                    if (response.ok) {
-                        const docs = await response.json();
-                        savedDocuments = docs;
-                        renderSavedDocuments();
-                        showNotification('Documents loaded from Val Town', 'success');
-                    } else {
-                        throw new Error('Failed to load from Val Town');
-                    }
+                    state.audioPlayer.src = audioUrl;
+                    state.audioPlayer.playbackRate = parseFloat(dom.speedSlider.value);
+                    state.audioPlayer.play();
+
+                    state.isPlaying = true;
+                    state.isPaused = false;
+                    updateUIForPlaying();
+
                 } catch (error) {
-                    console.error('Error loading from Val Town:', error);
-                    // Fallback to local storage
-                    const localDocs = localStorage.getItem('tts-documents');
-                    if (localDocs) {
-                        savedDocuments = JSON.parse(localDocs);
-                    } else {
-                        // Sample data if nothing exists
-                        savedDocuments = [
-                            { 
-                                id: 1,
-                                title: 'Welcome to HD TTS Reader', 
-                                text: '<h2>Getting Started</h2><p>This is a <strong>sample document</strong> to demonstrate the HD TTS Document Reader.</p><p>You can save your documents to <em>Val Town</em> for cloud storage and access them from anywhere.</p>',
-                                plainText: 'Getting Started\n\nThis is a sample document to demonstrate the HD TTS Document Reader.\n\nYou can save your documents to Val Town for cloud storage and access them from anywhere.',
-                                date: new Date().toLocaleDateString(), 
-                                length: 27,
-                                language: 'en-US',
-                                tags: ['welcome', 'demo']
-                            }
-                        ];
-                    }
-                    renderSavedDocuments();
-                    showNotification('Documents loaded locally (Val Town unavailable)', 'warning');
+                    console.error('TTS Error:', error);
+                    showNotification(error.message, 'error');
+                    handleStop();
+                } finally {
+                    setLoading(false);
                 }
             }
             
-            function filterSavedDocuments() {
-                const searchTerm = searchDocs.value.toLowerCase();
-                if (!searchTerm) {
-                    renderSavedDocuments();
-                    return;
-                }
-                
-                const filtered = savedDocuments.filter(doc => 
-                    doc.title.toLowerCase().includes(searchTerm) || 
-                    doc.plainText.toLowerCase().includes(searchTerm) ||
-                    (doc.tags && doc.tags.some(tag => tag.toLowerCase().includes(searchTerm)))
-                );
-                
-                renderSavedDocuments(filtered);
+            function onAudioEnded() {
+                state.currentSentenceIndex++;
+                playSentence(state.currentSentenceIndex);
             }
-            
-            function showFilterOptions() {
-                showNotification('Filter options: Search by title, content, or tags', 'info');
+
+            // --- UI & Helper Functions ---
+
+            function updateUIForPlaying() {
+                dom.playBtn.disabled = true;
+                dom.pauseBtn.disabled = false;
+                dom.stopBtn.disabled = false;
+                dom.playText.textContent = 'Playing...';
+                dom.playIcon.className = 'fas fa-spinner fa-spin mr-3';
+                animateWaveform(true);
             }
-            
-            function updateSortButtons() {
-                sortBtns.forEach(btn => {
-                    const field = btn.dataset.sort;
-                    const icon = btn.querySelector('i');
-                    
-                    if (field === sortField) {
-                        icon.className = sortDirection === 'asc' ? 'fas fa-sort-up ml-2' : 'fas fa-sort-down ml-2';
-                    } else {
-                        icon.className = 'fas fa-sort ml-2';
-                    }
-                });
+
+            function updateUIForPaused() {
+                dom.playBtn.disabled = false;
+                dom.pauseBtn.disabled = true;
+                dom.stopBtn.disabled = false;
+                dom.playText.textContent = 'Resume';
+                dom.playIcon.className = 'fas fa-play mr-3';
+                animateWaveform(false);
             }
-            
-            function renderSavedDocuments(docs = savedDocuments) {
-                const sortedDocs = [...docs].sort((a, b) => {
-                    let valA, valB;
-                    
-                    if (sortField === 'date') {
-                        valA = new Date(a.date);
-                        valB = new Date(b.date);
-                    } else if (sortField === 'length') {
-                        valA = a.length;
-                        valB = b.length;
-                    } else {
-                        valA = a[sortField];
-                        valB = b[sortField];
-                    }
-                    
-                    if (typeof valA === 'string') valA = valA.toLowerCase();
-                    if (typeof valB === 'string') valB = valB.toLowerCase();
-                    
-                    if (valA < valB) return sortDirection === 'asc' ? -1 : 1;
-                    if (valA > valB) return sortDirection === 'asc' ? 1 : -1;
-                    return 0;
-                });
-                
-                const startIdx = (currentPage - 1) * docsPerPage;
-                const paginatedDocs = sortedDocs.slice(startIdx, startIdx + docsPerPage);
-                
-                if (paginatedDocs.length === 0) {
-                    savedDocsList.innerHTML = `
-                        <tr>
-                            <td colspan="5" class="px-6 py-8 text-center text-gray-500">
-                                <i class="fas fa-file-alt text-4xl mb-4 opacity-50"></i>
-                                <p>No documents found</p>
-                            </td>
-                        </tr>
-                    `;
+
+            function updateUIForStopped() {
+                dom.playBtn.disabled = false;
+                dom.pauseBtn.disabled = true;
+                dom.stopBtn.disabled = true;
+                dom.playText.textContent = 'Play';
+                dom.playIcon.className = 'fas fa-play mr-3';
+                animateWaveform(false);
+                clearHighlight();
+                dom.progressFill.style.width = '0%';
+                dom.currentTime.textContent = '0:00';
+                dom.totalTime.textContent = '0:00';
+            }
+            
+            function setLoading(isLoading) {
+                state.isLoading = isLoading;
+                dom.playBtn.disabled = isLoading;
+                if (isLoading) {
+                    dom.playIcon.className = 'fas fa-spinner fa-spin mr-3';
+                    dom.playText.textContent = 'Loading...';
                 } else {
-                    savedDocsList.innerHTML = paginatedDocs.map((doc, idx) => {
-                        const preview = doc.plainText.substring(0, 100) + (doc.plainText.length > 100 ? '...' : '');
-                        const tags = doc.tags ? doc.tags.map(tag => `<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-1">${tag}</span>`).join('') : '';
-                        
-                        return `
-                            <tr class="hover:bg-gray-50 transition-colors">
-                                <td class="px-6 py-4">
-                                    <div class="font-semibold text-gray-900 text-lg">${doc.title}</div>
-                                    <div class="text-sm text-gray-500 mt-2 line-clamp-2">${preview}</div>
-                                    ${tags ? `<div class="mt-3">${tags}</div>` : ''}
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="text-gray-500 font-medium">${doc.date}</div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="text-gray-500 font-medium">${doc.length} words</div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="text-gray-500 font-medium">English</div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                                    <div class="flex justify-end space-x-3">
-                                        <button class="text-blue-600 hover:text-blue-900 load-doc-btn" data-index="${startIdx + idx}" title="Read document">
-                                            <i class="fas fa-play text-lg"></i>
-                                        </button>
-                                        <button class="text-green-600 hover:text-green-900 edit-doc-btn" data-index="${startIdx + idx}" title="Edit document">
-                                            <i class="fas fa-edit text-lg"></i>
-                                        </button>
-                                        <button class="text-red-600 hover:text-red-900 delete-doc-btn" data-index="${startIdx + idx}" title="Delete document">
-                                            <i class="fas fa-trash text-lg"></i>
-                                        </button>
-                                    </div>
-                                </td>
-                            </tr>
-                        `;
-                    }).join('');
+                    dom.playIcon.className = 'fas fa-play mr-3';
+                    dom.playText.textContent = 'Play';
                 }
-                
-                showingFrom.textContent = startIdx + 1;
-                showingTo.textContent = Math.min(startIdx + paginatedDocs.length, sortedDocs.length);
-                totalDocs.textContent = sortedDocs.length;
-                
-                prevPageBtn.disabled = currentPage === 1;
-                nextPageBtn.disabled = currentPage * docsPerPage >= sortedDocs.length;
-                
-                document.querySelectorAll('.load-doc-btn').forEach(btn => {
-                    btn.addEventListener('click', (e) => {
-                        const index = parseInt(e.currentTarget.dataset.index);
-                        loadDocument(index);
-                    });
-                });
-                
-                document.querySelectorAll('.edit-doc-btn').forEach(btn => {
-                    btn.addEventListener('click', (e) => {
-                        const index = parseInt(e.currentTarget.dataset.index);
-                        editDocument(index);
-                    });
-                });
-                
-                document.querySelectorAll('.delete-doc-btn').forEach(btn => {
-                    btn.addEventListener('click', (e) => {
-                        const index = parseInt(e.currentTarget.dataset.index);
-                        deleteDocument(index);
-                    });
-                });
+            }
+
+            function resetState() {
+                state.isPlaying = false;
+                state.isPaused = false;
+                state.isLoading = false;
+                state.currentSentenceIndex = 0;
+                state.sentences = [];
             }
             
-            function loadDocument(index) {
-                stopTTS();
-                const doc = savedDocuments[index];
-                documentEditor.innerHTML = doc.text;
-                selectedLanguage = doc.language;
+            function highlightSentence(index) {
+                clearHighlight();
+                let content = dom.editor.innerHTML;
+                const sentenceToHighlight = state.sentences[index];
                 
-                voiceOptions.forEach(option => {
-                    if (option.dataset.lang === doc.language) {
-                        option.click();
-                    }
+                // A simple way to highlight. More robust methods might be needed for complex HTML.
+                // This replaces only the first occurrence to avoid issues.
+                const highlightedContent = content.replace(sentenceToHighlight, `<span class="highlight">${sentenceToHighlight}</span>`);
+                dom.editor.innerHTML = highlightedContent;
+            }
+
+            function clearHighlight() {
+                const highlights = dom.editor.querySelectorAll('.highlight');
+                highlights.forEach(h => {
+                    h.outerHTML = h.innerHTML; // Replace span with its content
                 });
-                
-                updateCounts();
-                showNotification(`Loaded document: ${doc.title}`, 'success');
             }
             
-            function editDocument(index) {
-                loadDocument(index);
-                showNotification(`Editing "${savedDocuments[index].title}"`, 'info');
+            function saveToken() {
+                const token = dom.hfTokenInput.value;
+                if (token && token !== '********') {
+                    state.hfToken = token;
+                    localStorage.setItem('hf_tts_token', token);
+                    dom.hfTokenInput.value = '********';
+                    showNotification('API Token saved successfully!', 'success');
+                } else if (!token) {
+                     showNotification('Please enter a token to save.', 'warning');
+                }
             }
-            
-            async function deleteDocument(index) {
-                const doc = savedDocuments[index];
-                if (confirm(`Delete "${doc.title}"? This cannot be undone.`)) {
-                    try {
-                        // Delete from Val Town
-                        const response = await fetch(`${VAL_TOWN_API_URL}/deleteDocument/${doc.id}`, {
-                            method: 'DELETE'
-                        });
-                        
-                        if (response.ok) {
-                            savedDocuments.splice(index, 1);
-                            renderSavedDocuments();
-                            showNotification('Document deleted from Val Town', 'success');
-                        } else {
-                            throw new Error('Failed to delete from Val Town');
-                        }
-                    } catch (error) {
-                        console.error('Error deleting from Val Town:', error);
-                        // Fallback to local deletion
-                        savedDocuments.splice(index, 1);
-                        localStorage.setItem('tts-documents', JSON.stringify(savedDocuments));
-                        renderSavedDocuments();
-                        showNotification('Document deleted locally (Val Town unavailable)', 'warning');
-                    }
-                    
-                    const totalPages = Math.ceil(savedDocuments.length / docsPerPage);
-                    if (currentPage > totalPages && totalPages > 0) {
-                        currentPage = totalPages;
-                        renderSavedDocuments();
-                    }
+
+            function updateProgress() {
+                if (state.audioPlayer.duration) {
+                    const progress = (state.audioPlayer.currentTime / state.audioPlayer.duration) * 100;
+                    dom.progressFill.style.width = `${progress}%`;
+                    dom.currentTime.textContent = formatTime(state.audioPlayer.currentTime);
+                    dom.totalTime.textContent = formatTime(state.audioPlayer.duration);
                 }
             }
-            
-            function animateWaveform() {
-                const bars = waveform.querySelectorAll('.waveform-bar');
-                bars.forEach(bar => {
-                    bar.style.animationPlayState = 'running';
-                });
+
+            function handleSpeedChange(e) {
+                const newSpeed = parseFloat(e.target.value);
+                dom.speedValue.textContent = newSpeed.toFixed(1);
+                if (state.isPlaying || state.isPaused) {
+                    state.audioPlayer.playbackRate = newSpeed;
+                }
             }
-            
-            function stopWaveformAnimation() {
-                const bars = waveform.querySelectorAll('.waveform-bar');
-                bars.forEach(bar => {
-                    bar.style.animationPlayState = 'paused';
-                    bar.style.height = '10px';
-                });
+
+            function clearDocument() {
+                handleStop();
+                dom.editor.innerHTML = '';
+                updateCounts();
+                showNotification('Document cleared.', 'success');
             }
-            
-            function formatTime(seconds) {
-                const mins = Math.floor(seconds / 60);
-                const secs = Math.floor(seconds % 60);
-                return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+
+            function updateCounts() {
+                const text = dom.editor.innerText;
+                const words = text.trim().split(/\s+/).filter(Boolean).length;
+                dom.charCount.textContent = text.length;
+                dom.wordCount.textContent = words;
             }
-            
+
+            function animateWaveform(isPlaying) {
+                const state = isPlaying ? 'running' : 'paused';
+                dom.waveform.querySelectorAll('.waveform-bar').forEach(bar => {
+                    bar.style.animationPlayState = state;
+                });
+            }
+
             function showNotification(message, type = 'info') {
                 const notification = document.createElement('div');
                 notification.className = `notification ${type}`;
-                notification.innerHTML = `
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center">
-                            <i class="fas ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : type === 'warning' ? 'fa-exclamation-triangle' : 'fa-info-circle'} text-lg mr-3"></i>
-                            <span class="font-medium">${message}</span>
-                        </div>
-                        <button class="ml-4 text-gray-500 hover:text-gray-700" onclick="this.parentElement.parentElement.remove()">
-                            <i class="fas fa-times"></i>
-                        </button>
-                    </div>
-                `;
-                
-                notificationContainer.appendChild(notification);
-                
+                const icons = { info: 'fa-info-circle', success: 'fa-check-circle', warning: 'fa-exclamation-triangle', error: 'fa-times-circle' };
+                notification.innerHTML = `<div class="flex items-center"><i class="fas ${icons[type]} text-lg mr-3"></i><span>${message}</span></div>`;
+                dom.notificationContainer.appendChild(notification);
                 setTimeout(() => notification.classList.add('show'), 100);
-                
                 setTimeout(() => {
                     notification.classList.remove('show');
-                    setTimeout(() => notification.remove(), 300);
+                    setTimeout(() => notification.remove(), 500);
                 }, 5000);
             }
             
-            function addCustomPronunciation() {
-                const word = customWord.value.trim();
-                const pronunciation = customPronunciation.value.trim();
-                
-                if (!word || !pronunciation) {
-                    showNotification('Please enter both word and pronunciation', 'warning');
-                    return;
-                }
-                
-                customPronunciations.set(word, pronunciation);
-                saveCustomPronunciations();
-                renderPronunciationList();
-                
-                customWord.value = '';
-                customPronunciation.value = '';
-                
-                showNotification(`Added pronunciation: ${word} → ${pronunciation}`, 'success');
-            }
-            
-            function renderPronunciationList() {
-                pronunciationList.innerHTML = '';
-                
-                customPronunciations.forEach((pronunciation, word) => {
-                    const item = document.createElement('div');
-                    item.className = 'flex items-center justify-between glass-effect p-3 rounded-lg border';
-                    item.innerHTML = `
-                        <span class="text-sm font-medium"><strong>${word}</strong> → ${pronunciation}</span>
-                        <button class="text-red-600 hover:text-red-800 text-sm" onclick="removeCustomPronunciation('${word}')">
-                            <i class="fas fa-times"></i>
-                        </button>
-                    `;
-                    pronunciationList.appendChild(item);
-                });
-            }
-            
-            function removeCustomPronunciation(word) {
-                customPronunciations.delete(word);
-                saveCustomPronunciations();
-                renderPronunciationList();
-                showNotification(`Removed pronunciation for: ${word}`, 'info');
-            }
-            
-            window.removeCustomPronunciation = removeCustomPronunciation;
-            
-            function saveCustomPronunciations() {
-                localStorage.setItem('tts-custom-pronunciations', JSON.stringify(Array.from(customPronunciations.entries())));
-            }
-            
-            function loadCustomPronunciations() {
-                const saved = localStorage.getItem('tts-custom-pronunciations');
-                if (saved) {
-                    customPronunciations = new Map(JSON.parse(saved));
-                    renderPronunciationList();
-                }
-            }
-            
-            function highlightText(container, text) {
-                container.querySelectorAll('.highlight').forEach(el => {
-                    el.classList.remove('highlight');
-                });
-                
-                if (text && container.textContent.includes(text)) {
-                    const range = document.createRange();
-                    const selection = window.getSelection();
-                    const textNode = Array.from(container.childNodes).find(node => 
-                        node.nodeType === Node.TEXT_NODE && node.textContent.includes(text)
-                    );
-                    
-                    if (textNode) {
-                        const index = textNode.textContent.indexOf(text);
-                        range.setStart(textNode, index);
-                        range.setEnd(textNode, index + text.length);
-                        
-                        const span = document.createElement('span');
-                        span.className = 'highlight';
-                        span.appendChild(range.extractContents());
-                        range.insertNode(span);
-                    }
-                }
-            }
-            
-            speechSynthesis.onvoiceschanged = function() {
-                console.log('Voices loaded:', speechSynthesis.getVoices());
-            };
-            
-            if (speechSynthesis.getVoices().length > 0) {
-                console.log('Voices already loaded:', speechSynthesis.getVoices());
-            } else {
-                console.log('Waiting for voices to load...');
-            }
-            
-            // Handle alignment buttons in formatting tab
-            document.querySelectorAll('[data-align]').forEach(btn => {
-                btn.addEventListener('click', () => {
-                    const alignment = btn.dataset.align;
-                    const commands = {
-                        'left': 'justifyLeft',
-                        'center': 'justifyCenter',
-                        'right': 'justifyRight',
-                        'justify': 'justifyFull'
-                    };
-                    
-                    if (commands[alignment]) {
-                        document.execCommand(commands[alignment], false, null);
-                        documentEditor.focus();
-                    }
-                });
-            });
-            
-            // Handle keyboard shortcuts
-            document.addEventListener('keydown', (e) => {
-                if (e.ctrlKey || e.metaKey) {
-                    switch (e.key) {
-                        case 's':
-                            e.preventDefault();
-                            showSaveModal();
-                            break;
-                        case 'o':
-                            e.preventDefault();
-                            urlModal.classList.remove('hidden');
-                            documentUrl.focus();
-                            break;
-                        case 'p':
-                            e.preventDefault();
-                            if (isPlaying) {
-                                pauseTTS();
-                            } else {
-                                playTTS();
-                            }
-                            break;
-                        case 'Escape':
-                            stopTTS();
-                            break;
-                    }
-                }
-            });
-            
-            // Handle modal close on outside click
-            [urlModal, saveModal].forEach(modal => {
-                modal.addEventListener('click', (e) => {
-                    if (e.target === modal) {
-                        modal.classList.add('hidden');
-                    }
-                });
-            });
-            
-            // Initialize default voice selection
-            setTimeout(() => {
-                const defaultVoice = document.querySelector('.voice-option[data-voice="en-US-Neural2-H"]');
-                if (defaultVoice) {
-                    defaultVoice.click();
-                }
-            }, 500);
-            
-            // Auto-save functionality
-            let autoSaveInterval;
-            let hasUnsavedChanges = false;
-            
-            documentEditor.addEventListener('input', () => {
-                hasUnsavedChanges = true;
-                
-                // Clear existing interval
-                if (autoSaveInterval) {
-                    clearTimeout(autoSaveInterval);
-                }
-                
-                // Set new auto-save timer (5 seconds after stopping typing)
-                autoSaveInterval = setTimeout(() => {
-                    if (hasUnsavedChanges) {
-                        const content = documentEditor.innerHTML;
-                        if (content.trim()) {
-                            localStorage.setItem('tts-auto-save', content);
-                            localStorage.setItem('tts-auto-save-timestamp', Date.now().toString());
-                            showNotification('Auto-saved', 'success');
-                            hasUnsavedChanges = false;
-                        }
-                    }
-                }, 5000);
-            });
-            
-            // Check for auto-saved content on load
-            const autoSavedContent = localStorage.getItem('tts-auto-save');
-            const autoSavedTimestamp = localStorage.getItem('tts-auto-save-timestamp');
-            
-            if (autoSavedContent && autoSavedTimestamp) {
-                const timestamp = parseInt(autoSavedTimestamp);
-                const timeDiff = Date.now() - timestamp;
-                const hours = Math.floor(timeDiff / (1000 * 60 * 60));
-                
-                if (hours < 24) {
-                    if (confirm(`Found auto-saved content from ${hours === 0 ? 'less than an hour' : hours + ' hour(s)'} ago. Restore it?`)) {
-                        documentEditor.innerHTML = autoSavedContent;
-                        updateCounts();
-                        showNotification('Auto-saved content restored', 'success');
-                    }
-                }
+            function formatTime(seconds) {
+                const min = Math.floor(seconds / 60);
+                const sec = Math.floor(seconds % 60).toString().padStart(2, '0');
+                return `${min}:${sec}`;
             }
-            
-            // Window beforeunload handler
-            window.addEventListener('beforeunload', (e) => {
-                if (hasUnsavedChanges && documentEditor.innerText.trim()) {
-                    e.preventDefault();
-                    e.returnValue = 'You have unsaved changes. Are you sure you want to leave?';
-                }
-            });
+
+            // --- App Entry Point ---
+            init();
         });
     </script>
 </body>
-</html> formatting tab
-            document.querySelectorAll('[data-align
\ No newline at end of file
+</html>
