diff --git "a/app.py" "b/app.py"
--- "a/app.py"
+++ "b/app.py"
@@ -1,8 +1,5 @@
-"""
-Quran Aligner — Automatic Quran recitation segmentation and alignment.
-"""
+"""Quran Aligner — Automatic Quran recitation segmentation and alignment."""
 import sys
-import json
 from pathlib import Path
 
 # Add paths for imports BEFORE importing anything else
@@ -17,3049 +14,7 @@ subprocess.run(
     capture_output=True,
 )
 
-import gradio as gr
-import numpy as np
-import librosa
-
-from config import (
-    PORT, IS_HF_SPACE,
-    get_vad_duration, get_asr_duration,
-    MIN_SILENCE_MIN, MIN_SILENCE_MAX, MIN_SILENCE_STEP,
-    MIN_SPEECH_MIN, MIN_SPEECH_MAX, MIN_SPEECH_STEP,
-    PAD_MIN, PAD_MAX, PAD_STEP,
-    PRESET_MUJAWWAD, PRESET_MURATTAL, PRESET_FAST,
-    CONFIDENCE_HIGH, CONFIDENCE_MED, REVIEW_SUMMARY_MAX_SEGMENTS,
-    UNDERSEG_MIN_WORDS, UNDERSEG_MIN_AYAH_SPAN, UNDERSEG_MIN_DURATION,
-    QURAN_TEXT_SIZE_PX, ARABIC_WORD_SPACING,
-    SURAH_INFO_PATH,
-    PHONEME_ALIGNMENT_PROFILING,
-    RESAMPLE_TYPE,
-    SEGMENT_AUDIO_DIR, DELETE_CACHE_FREQUENCY, DELETE_CACHE_AGE, AUDIO_PRELOAD_COUNT,
-    ANIM_WORD_COLOR, ANIM_STYLE_ROW_SCALES,
-    ANIM_DISPLAY_MODES, ANIM_DISPLAY_MODE_DEFAULT, ANIM_OPACITY_PREV_DEFAULT, ANIM_OPACITY_AFTER_DEFAULT, ANIM_OPACITY_STEP, ANIM_PRESETS,
-    ANIM_GRANULARITIES, ANIM_GRANULARITY_DEFAULT,
-    ANIM_WINDOW_PREV_DEFAULT, ANIM_WINDOW_AFTER_DEFAULT,
-    ANIM_WINDOW_PREV_MIN, ANIM_WINDOW_PREV_MAX,
-    ANIM_WINDOW_AFTER_MIN, ANIM_WINDOW_AFTER_MAX,
-    MEGA_WORD_SPACING_MIN, MEGA_WORD_SPACING_MAX, MEGA_WORD_SPACING_STEP, MEGA_WORD_SPACING_DEFAULT,
-    MEGA_TEXT_SIZE_MIN, MEGA_TEXT_SIZE_MAX, MEGA_TEXT_SIZE_STEP, MEGA_TEXT_SIZE_DEFAULT,
-    MEGA_LINE_SPACING_MIN, MEGA_LINE_SPACING_MAX, MEGA_LINE_SPACING_STEP, MEGA_LINE_SPACING_DEFAULT,
-    MEGA_SURAH_LIGATURE_SIZE,
-    PROGRESS_PROCESS_AUDIO, PROGRESS_RESEGMENT, PROGRESS_RETRANSCRIBE,
-    LEFT_COLUMN_SCALE, RIGHT_COLUMN_SCALE,
-)
-from src.zero_gpu import gpu_with_fallback, ZERO_GPU_AVAILABLE
-from src.segment_processor import (
-    load_segmenter,
-    ensure_models_on_gpu,
-    detect_speech_segments,
-    run_phoneme_matching,
-    test_vad_aoti_export,
-    apply_aoti_compiled,
-    VadSegment, SegmentInfo, ProfilingData
-)
-from config import ANCHOR_SEGMENTS
-from data.font_data import DIGITAL_KHATT_FONT_B64, SURAH_NAME_FONT_B64
-from src.ui.segments import (
-    format_timestamp, get_confidence_class, get_segment_word_stats,
-    check_undersegmented, to_arabic_numeral, format_verse_marker,
-    split_into_char_groups, get_text_with_markers, simplify_ref,
-    render_segment_card, render_segments, encode_segment_audio, is_end_of_verse,
-)
-from src.pipeline.process import (
-    process_audio, resegment_audio, retranscribe_audio,
-    _retranscribe_wrapper, process_audio_json, save_json_export,
-    test_aoti_compilation_gpu,
-)
-from src.mfa.timestamps import compute_mfa_timestamps
-
-# Load surah name ligature map
-with open(Path(__file__).parent / "data" / "ligatures.json") as _f:
-    _SURAH_LIGATURES = json.load(_f)
-
-
-# =============================================================================
-# Build Interface
-# =============================================================================
-
-def build_interface():
-    """Build the Gradio interface."""
-
-    css = f"""
-    /* Font faces */
-    @font-face {{
-        font-family: 'DigitalKhatt';
-        src: url(data:font/otf;base64,{DIGITAL_KHATT_FONT_B64}) format('opentype');
-        font-weight: normal;
-        font-style: normal;
-    }}
-    @font-face {{
-        font-family: 'SurahName';
-        src: url(data:font/truetype;base64,{SURAH_NAME_FONT_B64}) format('truetype');
-        font-weight: normal;
-        font-style: normal;
-    }}
-
-    .arabic-text {{
-        font-family: 'DigitalKhatt', 'Traditional Arabic', sans-serif;
-        direction: rtl;
-        text-align: right;
-    }}
-
-    /* Prevent output area from being in a scrolling box */
-    .gradio-container .prose {{
-        max-height: none !important;
-    }}
-    .output-html {{
-        max-height: none !important;
-        overflow: visible !important;
-    }}
-
-    /* Segment cards - theme adaptive */
-    .segment-card {{
-        border-radius: 8px;
-        padding: 12px 16px;
-        margin-bottom: 12px;
-        border: 2px solid;
-    }}
-    .segment-header {{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 8px;
-    }}
-    .segment-title {{
-        font-size: 13px;
-        opacity: 0.9;
-    }}
-    .segment-badges {{
-        display: flex;
-        gap: 6px;
-        align-items: center;
-    }}
-    .segment-badge {{
-        color: white;
-        padding: 2px 8px;
-        border-radius: 12px;
-        font-size: 12px;
-        font-weight: bold;
-    }}
-    .segment-audio {{
-        margin: 8px 0;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }}
-    .segment-audio audio {{
-        flex: 1;
-        height: 32px;
-        border-radius: 4px;
-    }}
-
-    /* Lazy play button (replaces <audio controls> until clicked) */
-    .play-btn {{
-        flex: 1;
-        height: 32px;
-        border-radius: 4px;
-        border: 1px solid var(--border-color-primary, #ddd);
-        background: var(--block-background-fill, #f7f7f7);
-        cursor: pointer;
-        font-size: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }}
-    .play-btn:hover {{ background: var(--block-background-fill-secondary, #eee); }}
-
-    /* Make color picker popup overlay instead of pushing content down */
-    .gradio-container .color-picker {{
-        position: relative;
-        overflow: visible !important;
-    }}
-    .gradio-container .color-picker .overflow-hidden,
-    .gradio-container .color-picker > div:last-child:not(:first-child) {{
-        position: absolute;
-        z-index: 100;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-        border-radius: 8px;
-        overflow: visible !important;
-        max-height: none !important;
-    }}
-    .gradio-container .color-picker .overflow-hidden {{
-        overflow: visible !important;
-    }}
-    .gradio-container .color-picker *,
-    .gradio-container .color-picker div {{
-        overflow: visible !important;
-        max-height: none !important;
-        scrollbar-width: none !important;
-    }}
-    .gradio-container .color-picker *::-webkit-scrollbar {{
-        display: none !important;
-    }}
-    /* Ensure all color-picker ancestors allow overflow for absolute popup */
-    #anim-settings-accordion,
-    #anim-settings-accordion > *,
-    #anim-style-row,
-    #anim-style-row > * {{
-        overflow: visible !important;
-    }}
-
-
-    /* Animate button */
-    .animate-btn {{
-        background: #4a90d9 !important;
-        color: white !important;
-        border: none;
-        padding: 6px 12px;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 12px;
-        font-weight: bold;
-        white-space: nowrap;
-    }}
-    .animate-btn:hover:not(:disabled) {{ background: #357abd !important; }}
-    .animate-btn.active {{ background: #dc3545 !important; }}
-    .animate-btn:disabled {{ background: #888 !important; cursor: not-allowed; opacity: 0.5; }}
-
-    /* Make the HTML wrapper inside ts-row match the Gradio Button wrapper */
-    #ts-row > .gr-html {{
-        padding: 0;
-        margin: 0;
-        min-width: 0;
-        flex: 1 1 0%;
-    }}
-    #ts-row > div:has(> .animate-all-btn) {{
-        padding: 0;
-        margin: 0;
-        min-width: 0;
-        flex: 1 1 0%;
-    }}
-
-    /* Animate All button — matches Gradio lg button sizing */
-    .animate-all-btn {{
-        display: block;
-        width: 100%;
-        background: var(--button-primary-background-fill, #f97316) !important;
-        color: var(--button-primary-text-color, white) !important;
-        border: var(--button-primary-border, none);
-        padding: var(--size-2, 0.5rem) var(--size-4, 1rem);
-        border-radius: var(--button-large-radius, var(--radius-lg, 8px));
-        cursor: pointer;
-        font-size: var(--button-large-text-size, var(--text-lg, 1.125rem));
-        font-weight: var(--button-large-text-weight, 600);
-        box-sizing: border-box;
-        line-height: var(--line-md, 1.5);
-        min-height: var(--size-10, 40px);
-    }}
-    .animate-all-btn:hover:not(:disabled) {{ background: var(--button-primary-background-fill-hover, #ea6c10) !important; }}
-    .animate-all-btn.active {{ background: #dc3545 !important; }}
-    .animate-all-btn:disabled {{ background: #888 !important; cursor: not-allowed; opacity: 0.5; }}
-
-    /* Mega card for Animate All */
-    .mega-card {{
-        font-family: 'DigitalKhatt', 'Traditional Arabic', sans-serif;
-        font-size: {MEGA_TEXT_SIZE_DEFAULT}px;
-        direction: rtl;
-        text-align: justify;
-        line-height: {MEGA_LINE_SPACING_DEFAULT};
-        word-spacing: {MEGA_WORD_SPACING_DEFAULT}em;
-        padding: 16px;
-        border-radius: 8px;
-        background: var(--block-background-fill);
-        max-height: 70vh;
-        overflow-y: auto;
-        scrollbar-color: rgba(255,255,255,0.2) transparent;
-    }}
-    .mega-card::-webkit-scrollbar {{ width: 8px; }}
-    .mega-card::-webkit-scrollbar-track {{ background: transparent; }}
-    .mega-card::-webkit-scrollbar-thumb {{ background: rgba(255,255,255,0.2); border-radius: 4px; }}
-    .mega-card::-webkit-scrollbar-thumb:hover {{ background: rgba(255,255,255,0.35); }}
-    .mega-text-flow {{
-        display: inline;
-    }}
-    .mega-special-line {{
-        display: block;
-        text-align: center;
-        margin: 8px 0;
-        opacity: 0.7;
-        font-size: 0.85em;
-    }}
-    .mega-surah-separator {{
-        display: block;
-        text-align: center;
-        margin: 8px 0 2px;
-        padding: 4px 0 0;
-        border-top: 1px solid rgba(255,255,255,0.1);
-        opacity: 0.8;
-        font-family: 'SurahName', sans-serif;
-        font-feature-settings: "liga" 1;
-        font-size: {MEGA_SURAH_LIGATURE_SIZE}em;
-        line-height: 1.2;
-        letter-spacing: normal;
-    }}
-    .segment-card.hidden-for-mega {{ display: none; }}
-    #mega-styling-row {{ display: none; }}
-    .mega-top-bar {{
-        display: flex; justify-content: center; gap: 8px;
-        margin-top: 12px; margin-bottom: 8px;
-    }}
-    .mega-top-bar .animate-all-btn {{
-        width: auto; min-width: 0; min-height: auto;
-        padding: 4px 12px;
-        font-size: 12px; font-weight: bold;
-        border-radius: 4px;
-        line-height: normal;
-        box-sizing: border-box;
-        border: none;
-        height: 42px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }}
-    .mega-exit-btn {{
-        background: #6c757d;
-        color: white;
-        border: none;
-        padding: 4px 12px;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 12px;
-        font-weight: bold;
-        min-width: 0; min-height: auto;
-        line-height: normal;
-        box-sizing: border-box;
-        height: 42px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }}
-    .mega-exit-btn:hover {{ background: #5a6268; }}
-    .mega-speed-select {{
-        /* Use Gradio's theme-aware variables */
-        background: var(--input-background-fill) !important;
-        color: var(--body-text-color) !important;
-        border: var(--input-border-width) solid var(--input-border-color) !important;
-        border-radius: var(--input-radius) !important;
-        /* Typography from Gradio */
-        font-size: var(--input-text-size) !important;
-        font-family: var(--font) !important;
-        /* Layout */
-        padding: var(--input-padding) !important;
-        height: 48px !important;
-        min-width: 70px;
-        box-sizing: border-box;
-        /* Dropdown styling */
-        cursor: pointer;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        /* Custom dropdown arrow using theme color */
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%236b7280' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E") !important;
-        background-repeat: no-repeat !important;
-        background-position: right 6px center !important;
-        background-size: 16px !important;
-        padding-right: 28px !important;
-    }}
-    .mega-speed-select:hover {{
-        border-color: var(--input-border-color-hover) !important;
-    }}
-    .mega-speed-select:focus {{
-        border-color: var(--input-border-color-focus) !important;
-        outline: none;
-        box-shadow: var(--input-shadow-focus);
-    }}
-    .mega-speed-select option {{
-        background: var(--input-background-fill);
-        color: var(--body-text-color);
-    }}
-    .mega-tip {{
-        text-align: center; color: #b0b0b0; font-size: 0.95em;
-        padding: 8px 16px; margin-bottom: 6px;
-        background: rgba(255,255,255,0.05); border-radius: 8px;
-        border: 1px solid rgba(255,255,255,0.08);
-        width: fit-content; margin-left: auto; margin-right: auto;
-    }}
-
-    /* Word/char animation coloring — all modes use the window engine (JS-driven inline opacity) */
-    :root {{ --anim-word-color: {ANIM_WORD_COLOR}; }}
-    .word, .char {{
-        color: inherit;
-    }}
-    .word.active, .char.active, .word.active .char {{
-        color: var(--anim-word-color);
-    }}
-    /* Window engine: all hidden by default; JS sets inline opacity for visible window */
-    .anim-window .word {{ opacity: 0; }}
-    .anim-window .word.active {{ opacity: 1; }}
-    /* Character-level Window */
-    .anim-chars.anim-window .word {{ opacity: 1 !important; }}
-    .anim-chars.anim-window .char {{ opacity: 0; }}
-    .anim-chars.anim-window .char.active {{ opacity: 1; }}
-    /* Clickable words and verse markers in mega card */
-    .mega-text-flow .word {{ cursor: pointer; }}
-    .mega-text-flow .verse-marker {{ cursor: pointer; }}
-
-    /* Allow "All" hint below slider track to be visible */
-    #anim-window-prev, #anim-window-after {{ overflow: visible !important; padding-bottom: 1.2em; }}
-    #anim-window-prev *, #anim-window-after * {{ overflow: visible !important; }}
-    #anim-settings-accordion .block {{ border: none; }}
-    #anim-settings-accordion .color-picker {{ border: none !important; }}
-    #anim-settings-accordion .color-picker .block {{ border: none !important; }}
-
-    /* Merge style/granularity/color into one unified row */
-    #anim-style-row {{
-        gap: 0 !important;
-        border: 1px solid var(--border-color-primary, #ddd);
-        border-radius: var(--radius-lg, 8px);
-        overflow: visible;
-    }}
-    #anim-style-row > div {{
-        border: none !important;
-        box-shadow: none !important;
-        background: transparent !important;
-    }}
-    /* Side-by-side label + controls for animation settings */
-    #anim-style-row fieldset,
-    #anim-style-row > div:has(> .dialog-button) {{
-        display: flex !important;
-        flex-direction: row !important;
-        align-items: center !important;
-        gap: 8px;
-    }}
-    #anim-style-row .block-title,
-    #anim-style-row fieldset > span:first-child {{
-        white-space: nowrap;
-        min-width: fit-content;
-        margin: 0 !important;
-        font-size: 0.9em;
-    }}
-
-    .segment-text {{
-        font-family: 'DigitalKhatt', 'Traditional Arabic', sans-serif;
-        font-size: {QURAN_TEXT_SIZE_PX}px;
-        direction: rtl;
-        text-align: right;
-        line-height: 1.8;
-        word-spacing: {ARABIC_WORD_SPACING};
-        padding: 8px;
-        border-radius: 4px;
-        background: var(--block-background-fill);
-    }}
-    .segment-error {{
-        font-size: 12px;
-        margin-top: 4px;
-        color: var(--error-text-color, #dc3545);
-    }}
-    .no-match {{
-        opacity: 0.5;
-    }}
-    .no-segments {{
-        text-align: center;
-        opacity: 0.6;
-        padding: 40px;
-    }}
-    .segments-header {{
-        font-weight: bold;
-        margin-bottom: 16px;
-    }}
-
-
-    /* Confidence colors - light mode */
-    .segment-high {{ background: #d4edda; border-color: #28a745; }}
-    .segment-med {{ background: #fff3cd; border-color: #ffc107; }}
-    .segment-low {{ background: #f8d7da; border-color: #dc3545; }}
-    .segment-high-badge {{ background: #28a745; }}
-    .segment-med-badge {{ background: #ffc107; color: #333 !important; }}
-    .segment-low-badge {{ background: #dc3545; }}
-    .segment-underseg {{ background: #ffe5cc; border-color: #ff8c00; }}
-    .segment-underseg-badge {{ background: #ff8c00; }}
-
-    /* Review summary text colors */
-    .segments-review-summary {{ margin-bottom: 8px; font-size: 14px; }}
-    .segment-med-text {{ color: #856404; }}
-    .segment-low-text {{ color: #721c24; }}
-    .segment-underseg-text {{ color: #b35900; }}
-    @media (prefers-color-scheme: dark) {{
-        .segment-med-text {{ color: #ffc107; }}
-        .segment-low-text {{ color: #f8d7da; }}
-        .segment-underseg-text {{ color: #ff8c00; }}
-    }}
-    .dark .segment-med-text {{ color: #ffc107; }}
-    .dark .segment-low-text {{ color: #f8d7da; }}
-    .dark .segment-underseg-text {{ color: #ff8c00; }}
-
-    /* Confidence colors - dark mode */
-    @media (prefers-color-scheme: dark) {{
-        .segment-high {{ background: rgba(40, 167, 69, 0.2); border-color: #28a745; }}
-        .segment-med {{ background: rgba(255, 193, 7, 0.2); border-color: #ffc107; }}
-        .segment-low {{ background: rgba(220, 53, 69, 0.2); border-color: #dc3545; }}
-        .segment-underseg {{ background: rgba(255, 140, 0, 0.2); border-color: #ff8c00; }}
-    }}
-    /* Also support Gradio's dark class */
-    .dark .segment-high {{ background: rgba(40, 167, 69, 0.2); border-color: #28a745; }}
-    .dark .segment-med {{ background: rgba(255, 193, 7, 0.2); border-color: #ffc107; }}
-    .dark .segment-low {{ background: rgba(220, 53, 69, 0.2); border-color: #dc3545; }}
-    .dark .segment-underseg {{ background: rgba(255, 140, 0, 0.2); border-color: #ff8c00; }}
-
-    """
-
-    js = """
-    <script>
-    (function() {
-        // Warm up browser audio pipeline on first user interaction.
-        // Uses pointerdown (fires ~50-100ms before click) + AudioContext.resume()
-        // to prime the audio hardware before the <audio> element's play fires.
-        var _audioWarmedUp = false;
-        function _warmupAudio() {
-            if (_audioWarmedUp) return;
-            _audioWarmedUp = true;
-            // 1. Resume/create AudioContext — this is what actually initializes audio hardware
-            var ctx = new (window.AudioContext || window.webkitAudioContext)();
-            if (ctx.state === 'suspended') ctx.resume();
-            // Play a single silent sample to force full pipeline init
-            var buf = ctx.createBuffer(1, 1, 22050);
-            var src = ctx.createBufferSource();
-            src.buffer = buf;
-            src.connect(ctx.destination);
-            src.start();
-            // 2. Also prime HTML5 Audio path with a silent WAV
-            var a = new Audio('data:audio/wav;base64,UklGRiYAAABXQVZFZm10IBAAAAABAAEARKwAABCxAgACABAAZGF0YQIAAAAAAA==');
-            a.volume = 0;
-            a.play().catch(function(){});
-            document.removeEventListener('pointerdown', _warmupAudio);
-            document.removeEventListener('touchstart', _warmupAudio);
-        }
-        // pointerdown fires before click, giving audio hardware a head start
-        document.addEventListener('pointerdown', _warmupAudio);
-        document.addEventListener('touchstart', _warmupAudio, {passive: true});
-
-        // Display mode and granularity (updated via Animation Settings radios)
-        window.ANIM_PRESETS = """ + str(ANIM_PRESETS).replace("'", '"') + """;
-        window.ANIM_WINDOW_PREV_MAX = """ + str(ANIM_WINDOW_PREV_MAX) + """;
-        window.ANIM_WINDOW_AFTER_MAX = """ + str(ANIM_WINDOW_AFTER_MAX) + """;
-
-        // --- localStorage persistence helpers ---
-        var _ANIM_STORAGE_KEY = 'quran_anim_settings';
-        function loadAnimSettings() {
-            try {
-                var raw = localStorage.getItem(_ANIM_STORAGE_KEY);
-                return raw ? JSON.parse(raw) : null;
-            } catch(e) { return null; }
-        }
-        function saveAnimSettings() {
-            try {
-                var mode = window.ANIM_DISPLAY_MODE;
-                var s = loadAnimSettings() || {};
-                s.granularity = window.ANIM_GRANULARITY;
-                s.mode = mode;
-                s.verseOnly = !!window.ANIM_VERSE_MODE;
-                s.color = getComputedStyle(document.documentElement).getPropertyValue('--anim-word-color').trim() || '""" + ANIM_WORD_COLOR + """';
-                // Read text styling from slider DOM values (more reliable than mega-card inline styles)
-                var wsEl = document.querySelector('#anim-word-spacing input[type=range],#anim-word-spacing input[type=number]');
-                var tsEl = document.querySelector('#anim-text-size input[type=range],#anim-text-size input[type=number]');
-                var lsEl = document.querySelector('#anim-line-spacing input[type=range],#anim-line-spacing input[type=number]');
-                s.wordSpacing = wsEl ? parseFloat(wsEl.value) : """ + str(MEGA_WORD_SPACING_DEFAULT) + """;
-                s.textSize = tsEl ? parseFloat(tsEl.value) : """ + str(MEGA_TEXT_SIZE_DEFAULT) + """;
-                s.lineSpacing = lsEl ? parseFloat(lsEl.value) : """ + str(MEGA_LINE_SPACING_DEFAULT) + """;
-                // Always keep custom sub-object up to date when in Custom mode
-                if (mode === 'Custom') {
-                    s.custom = {
-                        prevOpacity: window.ANIM_OPACITY_PREV,
-                        afterOpacity: window.ANIM_OPACITY_AFTER,
-                        prevWords: window.ANIM_WINDOW_PREV,
-                        afterWords: window.ANIM_WINDOW_AFTER
-                    };
-                }
-                s.playbackRate = window.ANIM_PLAYBACK_RATE || 1;
-                localStorage.setItem(_ANIM_STORAGE_KEY, JSON.stringify(s));
-            } catch(e) {}
-        }
-
-        // --- Restore from localStorage or use defaults ---
-        var _saved = loadAnimSettings();
-        if (_saved) {
-            window.ANIM_DISPLAY_MODE = _saved.mode || '""" + ANIM_DISPLAY_MODE_DEFAULT + """';
-            window.ANIM_GRANULARITY = _saved.granularity || '""" + ANIM_GRANULARITY_DEFAULT + """';
-            window.ANIM_VERSE_MODE = !!_saved.verseOnly;
-            if (_saved.color) document.documentElement.style.setProperty('--anim-word-color', _saved.color);
-            var _rPreset = window.ANIM_PRESETS[window.ANIM_DISPLAY_MODE];
-            if (_rPreset) {
-                window.ANIM_OPACITY_PREV = _rPreset.prev_opacity;
-                window.ANIM_OPACITY_AFTER = _rPreset.after_opacity;
-                window.ANIM_WINDOW_PREV = _rPreset.prev_words;
-                window.ANIM_WINDOW_AFTER = _rPreset.after_words;
-            } else if (_saved.custom) {
-                window.ANIM_OPACITY_PREV = _saved.custom.prevOpacity;
-                window.ANIM_OPACITY_AFTER = _saved.custom.afterOpacity;
-                window.ANIM_WINDOW_PREV = _saved.custom.prevWords;
-                window.ANIM_WINDOW_AFTER = _saved.custom.afterWords;
-            } else {
-                window.ANIM_OPACITY_PREV = """ + str(ANIM_OPACITY_PREV_DEFAULT) + """;
-                window.ANIM_OPACITY_AFTER = """ + str(ANIM_OPACITY_AFTER_DEFAULT) + """;
-                window.ANIM_WINDOW_PREV = """ + str(ANIM_WINDOW_PREV_DEFAULT) + """;
-                window.ANIM_WINDOW_AFTER = """ + str(ANIM_WINDOW_AFTER_DEFAULT) + """;
-            }
-        } else {
-            window.ANIM_DISPLAY_MODE = '""" + ANIM_DISPLAY_MODE_DEFAULT + """';
-            window.ANIM_GRANULARITY = '""" + ANIM_GRANULARITY_DEFAULT + """';
-            var _initPreset = window.ANIM_PRESETS['""" + ANIM_DISPLAY_MODE_DEFAULT + """'];
-            window.ANIM_OPACITY_PREV = _initPreset ? _initPreset.prev_opacity : """ + str(ANIM_OPACITY_PREV_DEFAULT) + """;
-            window.ANIM_OPACITY_AFTER = _initPreset ? _initPreset.after_opacity : """ + str(ANIM_OPACITY_AFTER_DEFAULT) + """;
-            window.ANIM_WINDOW_PREV = _initPreset ? _initPreset.prev_words : """ + str(ANIM_WINDOW_PREV_DEFAULT) + """;
-            window.ANIM_WINDOW_AFTER = _initPreset ? _initPreset.after_words : """ + str(ANIM_WINDOW_AFTER_DEFAULT) + """;
-            window.ANIM_VERSE_MODE = false;
-        }
-        window.ANIM_PLAYBACK_RATE = (_saved && _saved.playbackRate) ? _saved.playbackRate : 1;
-        window._windowPrevGradient = [];
-        window._windowAfterGradient = [];
-
-        function rebuildWindowGradient() {
-            var basePrev = window.ANIM_OPACITY_PREV;
-            var baseAfter = window.ANIM_OPACITY_AFTER;
-            var pc = window.ANIM_WINDOW_PREV;
-            var ac = window.ANIM_WINDOW_AFTER;
-            window._windowPrevGradient = [];
-            window._windowAfterGradient = [];
-            // At max: empty gradient signals "show all at flat base opacity"
-            if (pc < window.ANIM_WINDOW_PREV_MAX) {
-                for (var d = 1; d <= pc; d++) {
-                    window._windowPrevGradient.push(String(basePrev * (pc - d + 1) / pc));
-                }
-            }
-            if (ac < window.ANIM_WINDOW_AFTER_MAX) {
-                for (var d = 1; d <= ac; d++) {
-                    window._windowAfterGradient.push(String(baseAfter * (ac - d + 1) / ac));
-                }
-            }
-        }
-        rebuildWindowGradient();
-
-        // Activate a lazy-loaded audio element (set src, show controls, hide play button)
-        function activateAudio(audio) {
-            if (audio.hasAttribute('controls')) return audio;
-            audio.src = audio.dataset.src;
-            audio.controls = true;
-            audio.style.display = '';
-            var playBtn = audio.parentElement && audio.parentElement.querySelector('.play-btn');
-            if (playBtn) playBtn.style.display = 'none';
-            return audio;
-        }
-
-        // =====================================================================
-        // Animation Debug Logging
-        // Enable via: window.ANIM_DEBUG = true; in browser console
-        // =====================================================================
-        window.ANIM_DEBUG = false;  // Set to true to enable animation debug logging
-        function animDebug(category, msg, data) {
-            if (!window.ANIM_DEBUG) return;
-            var prefix = '[ANIM:' + category + ']';
-            if (data !== undefined) {
-                console.log(prefix, msg, data);
-            } else {
-                console.log(prefix, msg);
-            }
-        }
-        function dumpCacheTimestamps(cache, label) {
-            if (!window.ANIM_DEBUG) return;
-            console.group('[ANIM:CACHE] ' + label + ' (' + cache.length + ' entries)');
-            cache.forEach(function(item, idx) {
-                var text = item.el.textContent.substring(0, 20);
-                var gid = item.groupId || '-';
-                console.log(idx + ': "' + text + '" start=' + item.start.toFixed(3) + ' end=' + item.end.toFixed(3) + ' groupId=' + gid);
-            });
-            if (cache._groupIndex) {
-                console.log('_groupIndex:', JSON.parse(JSON.stringify(cache._groupIndex)));
-            }
-            console.groupEnd();
-        }
-
-        // Cache elements and timing data for a given selector
-        // Also builds group index for letter groups (chars with same data-group-id)
-        function initCacheFor(card, selector) {
-            var elements = Array.from(card.querySelectorAll(selector));
-            var cache = elements.map(function(el, idx) {
-                return {
-                    el: el,
-                    start: parseFloat(el.dataset.start),
-                    end: parseFloat(el.dataset.end),
-                    groupId: el.dataset.groupId || null,
-                    cacheIdx: idx
-                };
-            });
-            // Build group index: groupId → [cacheIdx, ...]
-            var groupIndex = {};
-            cache.forEach(function(item) {
-                if (item.groupId) {
-                    if (!groupIndex[item.groupId]) {
-                        groupIndex[item.groupId] = [];
-                    }
-                    groupIndex[item.groupId].push(item.cacheIdx);
-                }
-            });
-            cache._groupIndex = groupIndex;
-            animDebug('INIT', 'initCacheFor("' + selector + '"): ' + cache.length + ' elements, ' + Object.keys(groupIndex).length + ' groups');
-            return cache;
-        }
-
-        // Apply class to element and all members of its letter group
-        function applyClassToGroup(cache, idx, className, add) {
-            var item = cache[idx];
-            if (!item) {
-                animDebug('CLASS', 'applyClassToGroup SKIP: no item at idx=' + idx);
-                return;
-            }
-            var text = item.el.textContent.substring(0, 10);
-            animDebug('CLASS', (add ? '+' : '-') + className + ' idx=' + idx + ' "' + text + '" groupId=' + (item.groupId || '-'));
-            if (add) {
-                item.el.classList.add(className);
-            } else {
-                item.el.classList.remove(className);
-            }
-            // Also apply to all group members if this element has a groupId
-            if (item.groupId && cache._groupIndex) {
-                var groupMembers = cache._groupIndex[item.groupId] || [];
-                if (groupMembers.length > 1) {
-                    animDebug('CLASS', '  -> propagating to group members:', groupMembers);
-                }
-                groupMembers.forEach(function(memberIdx) {
-                    if (memberIdx !== idx) {
-                        if (add) {
-                            cache[memberIdx].el.classList.add(className);
-                        } else {
-                            cache[memberIdx].el.classList.remove(className);
-                        }
-                    }
-                });
-            }
-        }
-
-        // Return the active cache based on current granularity setting
-        function getActiveCache(audio) {
-            return window.ANIM_GRANULARITY === 'Characters' ? audio._cacheChars : audio._cacheWords;
-        }
-
-        // Apply opacity to element and all members of its letter group
-        function applyOpacityToGroup(cache, idx, opacity) {
-            var item = cache[idx];
-            if (!item) {
-                animDebug('OPACITY', 'applyOpacityToGroup SKIP: no item at idx=' + idx);
-                return;
-            }
-            var text = item.el.textContent.substring(0, 10);
-            animDebug('OPACITY', 'idx=' + idx + ' "' + text + '" opacity=' + (opacity === null ? 'CLEAR' : opacity) + ' groupId=' + (item.groupId || '-'));
-            if (opacity === null) {
-                item.el.style.removeProperty('opacity');
-            } else {
-                item.el.style.opacity = opacity;
-            }
-            // Also apply to all group members if this element has a groupId
-            if (item.groupId && cache._groupIndex) {
-                var groupMembers = cache._groupIndex[item.groupId] || [];
-                if (groupMembers.length > 1) {
-                    animDebug('OPACITY', '  -> propagating to group members:', groupMembers);
-                }
-                groupMembers.forEach(function(memberIdx) {
-                    if (memberIdx !== idx) {
-                        if (opacity === null) {
-                            cache[memberIdx].el.style.removeProperty('opacity');
-                        } else {
-                            cache[memberIdx].el.style.opacity = opacity;
-                        }
-                    }
-                });
-            }
-        }
-
-        // Build group index for a cache array (extracts groupId and builds _groupIndex)
-        // Used for megacard caches which are built manually without initCacheFor()
-        function buildGroupIndex(cache) {
-            var groupIndex = {};
-            cache.forEach(function(item, idx) {
-                var gid = item.el.dataset.groupId;
-                if (gid) {
-                    item.groupId = gid;
-                    if (!groupIndex[gid]) groupIndex[gid] = [];
-                    groupIndex[gid].push(idx);
-                }
-            });
-            cache._groupIndex = groupIndex;
-            var groupCount = Object.keys(groupIndex).length;
-            animDebug('GROUP', 'buildGroupIndex: ' + cache.length + ' elements, ' + groupCount + ' groups');
-            if (window.ANIM_DEBUG && groupCount > 0) {
-                for (var gid in groupIndex) {
-                    if (groupIndex[gid].length > 1) {
-                        animDebug('GROUP', '  group "' + gid + '": indices ' + JSON.stringify(groupIndex[gid]));
-                    }
-                }
-            }
-        }
-
-        // Window mode: track active state for live slider updates
-        window._windowActiveCache = null;
-        window._windowActiveIdx = -1;
-        window._windowLastPc = 0;
-        window._windowLastAc = 0;
-        window._windowLastPcAll = false;
-        window._windowLastAcAll = false;
-        window._windowSettingsVersion = 0;  // Incremented when sliders change, so tick() can detect
-
-        // Window mode: apply per-element opacity gradient around active index
-        function applyWindowOpacity(cache, newIdx, prevIdx) {
-            animDebug('WINDOW', 'applyWindowOpacity newIdx=' + newIdx + ' prevIdx=' + prevIdx + ' cacheLen=' + cache.length);
-            // If prevIdx is unknown (e.g. after a timing gap between words),
-            // fall back to the last index we applied so the old window gets cleared.
-            if (prevIdx < 0 && window._windowActiveIdx >= 0 && window._windowActiveCache === cache) {
-                animDebug('WINDOW', '  -> using fallback prevIdx=' + window._windowActiveIdx);
-                prevIdx = window._windowActiveIdx;
-            }
-            var prevGrad = window._windowPrevGradient;
-            var afterGrad = window._windowAfterGradient;
-            var pc = prevGrad.length;
-            var ac = afterGrad.length;
-            var pcAll = (window.ANIM_WINDOW_PREV >= window.ANIM_WINDOW_PREV_MAX);
-            var acAll = (window.ANIM_WINDOW_AFTER >= window.ANIM_WINDOW_AFTER_MAX);
-            var oldPcAll = window._windowLastPcAll;
-            var oldAcAll = window._windowLastAcAll;
-            var basePrev = String(window.ANIM_OPACITY_PREV);
-            var baseAfter = String(window.ANIM_OPACITY_AFTER);
-            animDebug('WINDOW', '  verseMode=' + window.ANIM_VERSE_MODE + ' pcAll=' + pcAll + ' acAll=' + acAll + ' basePrev=' + basePrev + ' baseAfter=' + baseAfter);
-            // Verse mode: show only current-verse words, hide everything else
-            if (window.ANIM_VERSE_MODE) {
-                var activeEl = cache[newIdx].el;
-                var activePos = activeEl.dataset.pos || (activeEl.closest('.word') || {}).dataset?.pos || '';
-                var vp = activePos.split(':');
-                var activeVerse = vp.length >= 2 ? vp[0] + ':' + vp[1] : '';
-                // Track which group IDs we've already handled to avoid duplicates
-                var handledGroups = {};
-                for (var i = 0; i < cache.length; i++) {
-                    // Skip if this element's group was already handled
-                    var gid = cache[i].groupId;
-                    if (gid && handledGroups[gid]) continue;
-                    if (gid) handledGroups[gid] = true;
-                    if (i === newIdx) {
-                        applyOpacityToGroup(cache, i, null);
-                        continue;
-                    }
-                    var el = cache[i].el;
-                    var pos = el.dataset.pos || (el.closest('.word') || {}).dataset?.pos || '';
-                    var wp = pos.split(':');
-                    var wverse = wp.length >= 2 ? wp[0] + ':' + wp[1] : '';
-                    if (wverse === activeVerse) {
-                        // Same verse: normal gradient opacity
-                        if (i < newIdx || !cache[i].el.classList.contains('reached')) {
-                            applyOpacityToGroup(cache, i, (i < newIdx) ? basePrev : baseAfter);
-                        }
-                    } else if (i < newIdx) {
-                        // Different verse, before current: always hide past verses
-                        applyOpacityToGroup(cache, i, '0');
-                    } else {
-                        // Different verse, after current: hide future verses in verse-only mode
-                        applyOpacityToGroup(cache, i, '0');
-                    }
-                }
-                window._windowActiveCache = cache;
-                window._windowActiveIdx = newIdx;
-                return;
-            }
-            // Fast path: All→All steady state — only 2 elements change (with group support)
-            if (prevIdx >= 0 && newIdx >= 0 && pcAll && acAll && oldPcAll && oldAcAll) {
-                applyOpacityToGroup(cache, prevIdx, basePrev);
-                applyOpacityToGroup(cache, newIdx, null);
-                window._windowActiveCache = cache;
-                window._windowActiveIdx = newIdx;
-                window._windowLastPc = pc;  window._windowLastAc = ac;
-                window._windowLastPcAll = pcAll;  window._windowLastAcAll = acAll;
-                return;
-            }
-            // Clear old window range
-            if (prevIdx >= 0) {
-                if (oldPcAll || oldAcAll) {
-                    // Previous state had "all" — clear every element
-                    for (var i = 0; i < cache.length; i++) {
-                        cache[i].el.style.removeProperty('opacity');
-                    }
-                } else {
-                    var clearPc = Math.max(pc, window._windowLastPc);
-                    var clearAc = Math.max(ac, window._windowLastAc);
-                    var clearStart = Math.max(0, prevIdx - clearPc);
-                    var clearEnd = Math.min(cache.length - 1, prevIdx + clearAc);
-                    for (var i = clearStart; i <= clearEnd; i++) {
-                        cache[i].el.style.removeProperty('opacity');
-                    }
-                }
-            }
-            // Track state for live slider updates
-            window._windowActiveCache = cache;
-            window._windowActiveIdx = newIdx;
-            window._windowLastPc = pc;
-            window._windowLastAc = ac;
-            window._windowLastPcAll = pcAll;
-            window._windowLastAcAll = acAll;
-            if (newIdx < 0) return;
-            // Apply previous elements (with group support)
-            if (pcAll) {
-                for (var i = 0; i < newIdx; i++) {
-                    applyOpacityToGroup(cache, i, basePrev);
-                }
-            } else {
-                for (var p = 0; p < pc; p++) {
-                    var idx = newIdx - (p + 1);
-                    if (idx < 0) break;
-                    applyOpacityToGroup(cache, idx, prevGrad[p]);
-                }
-            }
-            // Apply after elements (upcoming words always get opacity set for
-            // proper word-by-word animation, even if they have 'reached' from
-            // a previous segment) — with group support
-            if (acAll) {
-                for (var i = newIdx + 1; i < cache.length; i++) {
-                    applyOpacityToGroup(cache, i, baseAfter);
-                }
-            } else {
-                for (var a = 0; a < ac; a++) {
-                    var idx = newIdx + (a + 1);
-                    if (idx >= cache.length) break;
-                    applyOpacityToGroup(cache, idx, afterGrad[a]);
-                }
-            }
-            // Fade previously-active word from full opacity to its new level (with group support)
-            if (prevIdx >= 0 && prevIdx !== newIdx) {
-                var tgt = cache[prevIdx].el.style.opacity || '0';
-                applyOpacityToGroup(cache, prevIdx, tgt);
-            }
-            // Reconcile group opacities: grouped characters should appear as
-            // one visual unit, using the max opacity from any member
-            if (cache._groupIndex) {
-                var gids = Object.keys(cache._groupIndex);
-                for (var g = 0; g < gids.length; g++) {
-                    var members = cache._groupIndex[gids[g]];
-                    if (members.length <= 1) continue;
-                    // If any member is active, set all to full opacity
-                    var anyActive = false;
-                    var maxOp = -1;
-                    for (var m = 0; m < members.length; m++) {
-                        if (cache[members[m]].el.classList.contains('active')) {
-                            anyActive = true;
-                            break;
-                        }
-                        var op = cache[members[m]].el.style.opacity;
-                        if (op !== '') {
-                            var val = parseFloat(op);
-                            if (!isNaN(val) && val > maxOp) maxOp = val;
-                        }
-                    }
-                    if (anyActive) {
-                        for (var m = 0; m < members.length; m++) {
-                            cache[members[m]].el.style.opacity = '1';
-                        }
-                    } else if (maxOp > 0) {
-                        var maxOpStr = String(maxOp);
-                        for (var m = 0; m < members.length; m++) {
-                            cache[members[m]].el.style.opacity = maxOpStr;
-                        }
-                    }
-                    // maxOp <= 0: group is hidden (outside window), leave as-is
-                }
-            }
-        }
-
-        // Re-apply window opacity immediately (called when sliders change mid-animation)
-        function reapplyWindowNow() {
-            var cache = window._windowActiveCache;
-            var idx = window._windowActiveIdx;
-            if (!cache || idx < 0) return;
-            applyWindowOpacity(cache, idx, idx);
-        }
-
-        // Replace numeric value with "All" when slider is at maximum
-        function updateWindowMaxLabel(elemId, val, maxVal) {
-            var el = document.getElementById(elemId);
-            if (!el) return;
-            var numInput = el.querySelector('input[type="number"]');
-            if (!numInput) return;
-            if (val >= maxVal) {
-                numInput.style.display = 'none';
-                var maxSpan = el.querySelector('.max-label');
-                if (!maxSpan) {
-                    maxSpan = document.createElement('span');
-                    maxSpan.className = 'max-label';
-                    maxSpan.style.cssText = 'font-weight: bold; opacity: 0.85;';
-                    numInput.parentNode.insertBefore(maxSpan, numInput.nextSibling);
-                }
-                maxSpan.textContent = 'All';
-                maxSpan.style.display = '';
-            } else {
-                numInput.style.display = '';
-                var maxSpan = el.querySelector('.max-label');
-                if (maxSpan) maxSpan.style.display = 'none';
-            }
-            // Always inject a hint at the right end of the slider track
-            if (!el.querySelector('.max-hint')) {
-                var rangeWrap = el.querySelector('input[type="range"]');
-                if (rangeWrap) {
-                    var hint = document.createElement('span');
-                    hint.className = 'max-hint';
-                    hint.textContent = 'All';
-                    hint.style.cssText = 'position: absolute; right: 0; bottom: -1.2em; font-size: 0.7em; opacity: 0.5;';
-                    var parent = rangeWrap.parentNode;
-                    if (parent) {
-                        parent.style.position = 'relative';
-                        parent.appendChild(hint);
-                    }
-                }
-            }
-        }
-
-        // Expose to global scope so Gradio inline js= callbacks can call them
-        window.rebuildWindowGradient = rebuildWindowGradient;
-        window.reapplyWindowNow = reapplyWindowNow;
-        window.updateWindowMaxLabel = updateWindowMaxLabel;
-        window.saveAnimSettings = saveAnimSettings;
-        window.loadAnimSettings = loadAnimSettings;
-
-        // Inject "All" hints on slider tracks once Gradio renders them
-        setTimeout(function() {
-            updateWindowMaxLabel('anim-window-prev', window.ANIM_WINDOW_PREV, window.ANIM_WINDOW_PREV_MAX);
-            updateWindowMaxLabel('anim-window-after', window.ANIM_WINDOW_AFTER, window.ANIM_WINDOW_AFTER_MAX);
-        }, 500);
-
-        // Clear inline opacity from all words/chars in a card (Window mode cleanup)
-        // Applies mode's prev_opacity instead of removing opacity entirely
-        function clearWindowOpacity(card) {
-            var prevOp = window.ANIM_OPACITY_PREV;
-            card.querySelectorAll('.word, .char').forEach(function(el) {
-                // Apply mode's prev_opacity consistently:
-                // - Reveal/Fade (1.0): full visibility
-                // - Spotlight (0.3): dimmed
-                // - Isolate/Consume (0): hidden/disappear
-                if (prevOp >= 1) {
-                    el.style.removeProperty('opacity');
-                } else {
-                    el.style.opacity = String(prevOp);
-                }
-            });
-        }
-
-        function clearHighlights(card) {
-            card.querySelectorAll('.word.active, .word.reached, .char.active, .char.reached').forEach(function(w) {
-                w.classList.remove('active', 'reached');
-            });
-            clearWindowOpacity(card);
-            card.classList.remove('anim-window', 'anim-chars');
-        }
-
-        function stopAnimation(audio, card) {
-            if (audio._rafId) {
-                cancelAnimationFrame(audio._rafId);
-                audio._rafId = null;
-            }
-            if (card) {
-                // Apply mode's prev_opacity to last active word before clearing
-                var activeEl = card.querySelector('.word.active, .char.active');
-                if (activeEl && window.ANIM_OPACITY_PREV < 1) {
-                    activeEl.style.opacity = String(window.ANIM_OPACITY_PREV);
-                }
-                clearHighlights(card);
-            }
-        }
-
-        function startAnimation(audio, card) {
-            var lastWordIdx = -1;
-            var lastGranularity = window.ANIM_GRANULARITY;
-            var lastOpacityPrev = window.ANIM_OPACITY_PREV;
-            var lastSeenVersion = window._windowSettingsVersion;
-            // Segment audio is trimmed, so currentTime starts at 0.
-            // Word timestamps are absolute, so we need to add segment offset.
-            var segOffset = parseFloat(card.dataset.startTime) || 0;
-
-            function tick() {
-                if (audio.paused || audio.ended) return;
-                var wordCache = getActiveCache(audio);
-                var currentTime = audio.currentTime + segOffset;
-
-                // Granularity switched mid-animation — clear old highlights and reset
-                if (window.ANIM_GRANULARITY !== lastGranularity) {
-                    animDebug('TICK', 'Granularity changed: ' + lastGranularity + ' -> ' + window.ANIM_GRANULARITY);
-                    card.querySelectorAll('.word.active, .word.reached, .char.active, .char.reached').forEach(function(w) {
-                        w.classList.remove('active', 'reached');
-                    });
-                    clearWindowOpacity(card);
-                    lastWordIdx = -1;
-                    lastGranularity = window.ANIM_GRANULARITY;
-                }
-
-                // Mode changed mid-animation — refresh all reached words with new opacity
-                if (window.ANIM_OPACITY_PREV !== lastOpacityPrev) {
-                    animDebug('TICK', 'Mode changed: prevOp ' + lastOpacityPrev + ' -> ' + window.ANIM_OPACITY_PREV);
-                    card.querySelectorAll('.word.reached, .char.reached').forEach(function(el) {
-                        if (window.ANIM_OPACITY_PREV >= 1) {
-                            el.style.removeProperty('opacity');
-                        } else {
-                            el.style.opacity = String(window.ANIM_OPACITY_PREV);
-                        }
-                    });
-                    lastOpacityPrev = window.ANIM_OPACITY_PREV;
-                }
-
-                // Slider settings changed mid-animation — reapply window opacity
-                if (window._windowSettingsVersion !== lastSeenVersion) {
-                    if (lastWordIdx >= 0) {
-                        applyWindowOpacity(wordCache, lastWordIdx, lastWordIdx);
-                    }
-                    lastSeenVersion = window._windowSettingsVersion;
-                }
-
-                var newWordIdx = -1;
-                var searchPath = '';
-                // Fast path: check current word, then next (covers ~99% of frames)
-                if (lastWordIdx >= 0 && lastWordIdx < wordCache.length &&
-                    currentTime >= wordCache[lastWordIdx].start && currentTime < wordCache[lastWordIdx].end) {
-                    newWordIdx = lastWordIdx;
-                    searchPath = 'same';
-                } else if (lastWordIdx + 1 < wordCache.length &&
-                    currentTime >= wordCache[lastWordIdx + 1].start && currentTime < wordCache[lastWordIdx + 1].end) {
-                    newWordIdx = lastWordIdx + 1;
-                    searchPath = 'next';
-                } else {
-                    // Fallback: full scan (seeking, granularity switch, etc.)
-                    searchPath = 'scan';
-                    for (var i = 0; i < wordCache.length; i++) {
-                        if (currentTime >= wordCache[i].start && currentTime < wordCache[i].end) {
-                            newWordIdx = i;
-                            break;
-                        }
-                    }
-                    // Clamp to last word when past its end but audio hasn't ended yet
-                    if (newWordIdx === -1 && wordCache.length > 0 && currentTime >= wordCache[wordCache.length - 1].start) {
-                        newWordIdx = wordCache.length - 1;
-                        searchPath = 'clamp';
-                    }
-                }
-
-                // Only update DOM if word changed
-                if (newWordIdx !== lastWordIdx) {
-                    var newText = newWordIdx >= 0 ? wordCache[newWordIdx].el.textContent.substring(0, 15) : '-';
-                    animDebug('TICK', 'idx change: ' + lastWordIdx + ' -> ' + newWordIdx + ' (' + searchPath + ') t=' + currentTime.toFixed(3) + ' "' + newText + '"');
-                    if (newWordIdx === -1 && wordCache.length > 0) {
-                        // No match - log surrounding timing info
-                        var first = wordCache[0];
-                        var last = wordCache[wordCache.length - 1];
-                        animDebug('TICK', '  NO MATCH: t=' + currentTime.toFixed(3) + ' cache[0]=[' + first.start.toFixed(3) + ',' + first.end.toFixed(3) + '] cache[' + (wordCache.length-1) + ']=[' + last.start.toFixed(3) + ',' + last.end.toFixed(3) + ']');
-                    }
-                    if (lastWordIdx >= 0 && lastWordIdx < wordCache.length) {
-                        applyClassToGroup(wordCache, lastWordIdx, 'active', false);
-                        applyClassToGroup(wordCache, lastWordIdx, 'reached', true);
-                    }
-                    if (newWordIdx >= 0) {
-                        applyClassToGroup(wordCache, newWordIdx, 'active', true);
-                        if (lastWordIdx === -1) {
-                            // First highlight — catch up any skipped words (with group support)
-                            for (var j = 0; j < newWordIdx; j++) {
-                                applyClassToGroup(wordCache, j, 'reached', true);
-                            }
-                        }
-                    }
-                    if (newWordIdx >= 0) {
-                        applyWindowOpacity(wordCache, newWordIdx, lastWordIdx);
-                    }
-                    lastWordIdx = newWordIdx;
-                }
-            }
-
-            function rafLoop() {
-                tick();
-                if (!audio.paused && !audio.ended) {
-                    audio._rafId = requestAnimationFrame(rafLoop);
-                }
-            }
-            audio._rafId = requestAnimationFrame(rafLoop);
-        }
-
-        function toggleAnimation(btn) {
-            var card = btn.closest('.segment-card');
-            if (!card) return;
-            var audio = card.querySelector('audio');
-            if (!audio) return;
-
-            var isActive = btn.classList.toggle('active');
-            if (isActive) {
-                btn.textContent = 'Stop';
-                // Apply window engine class to card
-                card.classList.add('anim-window');
-                if (window.ANIM_GRANULARITY === 'Characters') {
-                    card.classList.add('anim-chars');
-                }
-                // Build both caches upfront for live granularity switching
-                audio._cacheWords = initCacheFor(card, '.segment-text .word');
-                audio._cacheChars = initCacheFor(card, '.segment-text .char');
-                animDebug('START', 'toggleAnimation: words=' + audio._cacheWords.length + ' chars=' + audio._cacheChars.length + ' granularity=' + window.ANIM_GRANULARITY);
-                dumpCacheTimestamps(audio._cacheWords, 'Words');
-                dumpCacheTimestamps(audio._cacheChars, 'Chars');
-                activateAudio(audio);
-                startAnimation(audio, card);
-                audio.play();
-            } else {
-                btn.textContent = 'Animate';
-                audio.pause();
-                stopAnimation(audio, card);
-            }
-        }
-
-
-        // =====================================================================
-        // Surah name ligature map (font triggers)
-        // =====================================================================
-        var surahLigatures = __SURAH_LIGATURES_JSON__;
-
-        // =====================================================================
-        // Animate All — continuous text stream with repetition handling
-        // =====================================================================
-        var animateAllState = {
-            active: false,
-            currentIdx: 0,
-            segments: [],   // [{startTime, endTime, cacheWords, cacheChars, wordEls}]
-            rafId: null,
-            megaCard: null,
-            textFlow: null,  // the unified .mega-text-flow container
-            btn: null,
-            unifiedCacheWords: [],
-            unifiedCacheChars: [],
-            unifiedAudio: null,  // Single audio element for entire recording
-            accordionParent: null,
-            accordionNextSibling: null,
-            completedIdx: -1
-        };
-
-        function buildMegaCard() {
-            var container = document.querySelector('.segments-container');
-            if (!container) return null;
-
-            // Create unified audio element from full audio URL
-            var fullAudioUrl = container.dataset.fullAudio;
-            var unifiedAudio = null;
-            if (fullAudioUrl) {
-                unifiedAudio = document.createElement('audio');
-                unifiedAudio.src = fullAudioUrl;
-                unifiedAudio.preload = 'auto';
-                unifiedAudio.style.display = 'none';
-            }
-
-            var cards = Array.from(container.querySelectorAll('.segment-card'));
-            var mega = document.createElement('div');
-            mega.className = 'mega-card';
-            var textFlow = document.createElement('div');
-            textFlow.className = 'mega-text-flow';
-
-            var renderedPositions = {};  // data-pos string -> DOM element in textFlow
-            var renderedCharEls = {};    // data-pos string -> Array of .char elements
-            var renderedMarkers = {};    // "surah:marker" -> true, to avoid duplicate verse markers
-            var frag = document.createDocumentFragment();
-            var segments = [];
-            var lastSurah = null;
-            var pendingSpecial = null;  // buffered special text to flush after surah separator
-
-            // Helper: flush pending special line into fragment
-            function flushPendingSpecial() {
-                if (!pendingSpecial) return;
-                var prevChild = frag.lastChild;
-                if (prevChild && prevChild.classList && prevChild.classList.contains('mega-special-line')) {
-                    prevChild.textContent += '    ' + pendingSpecial;
-                } else {
-                    var specialLine = document.createElement('div');
-                    specialLine.className = 'mega-special-line';
-                    specialLine.textContent = pendingSpecial;
-                    frag.appendChild(specialLine);
-                }
-                pendingSpecial = null;
-            }
-
-            cards.forEach(function(card) {
-                var btn = card.querySelector('.animate-btn');
-                var ref = (card.dataset.matchedRef || '').trim();
-                var isSpecial = (ref === 'Basmala' || ref === "Isti'adha");
-
-                if (!btn || btn.disabled) {
-                    // Special segment without timestamps — buffer static text
-                    if (isSpecial || ref === '') {
-                        var textEl = card.querySelector('.segment-text');
-                        if (textEl) {
-                            var txt = textEl.textContent.trim();
-                            if (txt) {
-                                if (pendingSpecial) {
-                                    pendingSpecial += '    ' + txt;
-                                } else {
-                                    pendingSpecial = txt;
-                                }
-                            }
-                        }
-                    }
-                    return;
-                }
-
-                // Animated special segment (has timestamps) — centered line with word animation
-                if (isSpecial) {
-                    var textEl = card.querySelector('.segment-text');
-                    if (!textEl) return;
-
-                    // Extract segment boundaries from card data attributes
-                    var segStartTime = parseFloat(card.dataset.startTime) || 0;
-                    var segEndTime = parseFloat(card.dataset.endTime) || 0;
-
-                    // Flush any buffered specials first
-                    flushPendingSpecial();
-
-                    var specialDiv;
-                    var prevChild = frag.lastChild;
-                    if (prevChild && prevChild.classList && prevChild.classList.contains('mega-special-line')) {
-                        specialDiv = prevChild;
-                        specialDiv.appendChild(document.createTextNode('    '));
-                    } else {
-                        specialDiv = document.createElement('div');
-                        specialDiv.className = 'mega-special-line';
-                        frag.appendChild(specialDiv);
-                    }
-
-                    var sourceWords = Array.from(textEl.querySelectorAll('.word'));
-                    var segWordEls = [];
-                    var segWordTimings = [];
-                    var segCharTimings = [];
-                    var unifiedCharEls = {};
-
-                    sourceWords.forEach(function(node) {
-                        var pos = node.dataset.pos;
-                        var clone = node.cloneNode(true);
-                        specialDiv.appendChild(document.createTextNode(' '));
-                        specialDiv.appendChild(clone);
-                        if (pos) renderedPositions[pos] = clone;
-                        segWordEls.push(clone);
-
-                        segWordTimings.push({
-                            start: parseFloat(node.dataset.start) || 0,
-                            end: parseFloat(node.dataset.end) || 0
-                        });
-
-                        var wordIdx = segWordEls.length - 1;
-                        var chars = Array.from(clone.children);
-                        unifiedCharEls[wordIdx] = chars;
-                        if (pos) renderedCharEls[pos] = chars;
-
-                        Array.from(node.children).forEach(function(srcChar) {
-                            segCharTimings.push({
-                                start: parseFloat(srcChar.dataset.start) || 0,
-                                end: parseFloat(srcChar.dataset.end) || 0,
-                                parentWordIdx: wordIdx
-                            });
-                        });
-                    });
-
-                    if (segWordEls.length === 0) return;
-
-                    var cacheWords = segWordEls.map(function(el, j) {
-                        return { el: el, start: segWordTimings[j].start, end: segWordTimings[j].end };
-                    });
-                    var cacheChars = [];
-                    var charCountPerWord = {};
-                    segCharTimings.forEach(function(ct) {
-                        var wIdx = ct.parentWordIdx;
-                        if (charCountPerWord[wIdx] === undefined) charCountPerWord[wIdx] = 0;
-                        var charIdxInWord = charCountPerWord[wIdx]++;
-                        var unifiedChars = unifiedCharEls[wIdx];
-                        if (unifiedChars && charIdxInWord < unifiedChars.length) {
-                            cacheChars.push({ el: unifiedChars[charIdxInWord], start: ct.start, end: ct.end });
-                        }
-                    });
-
-                    segments.push({
-                        startTime: segStartTime,
-                        endTime: segEndTime,
-                        cacheWords: cacheWords,
-                        cacheChars: cacheChars,
-                        wordEls: segWordEls
-                    });
-                    return;
-                }
-
-                var textEl = card.querySelector('.segment-text');
-                if (!textEl) return;
-
-                // Extract segment boundaries from card data attributes
-                var segStartTime = parseFloat(card.dataset.startTime) || 0;
-                var segEndTime = parseFloat(card.dataset.endTime) || 0;
-
-                // Detect fused special prefix: leading .word elements with :0:0: in data-pos
-                var allWords = Array.from(textEl.querySelectorAll('.word'));
-                var fusedWords = [];
-                var fusedHasTimestamps = false;
-                for (var fi = 0; fi < allWords.length; fi++) {
-                    var fpos = allWords[fi].dataset.pos || '';
-                    if (fpos && fpos.indexOf(':0:0:') !== -1) {
-                        fusedWords.push(allWords[fi]);
-                        if (allWords[fi].dataset.start) fusedHasTimestamps = true;
-                    } else if (fpos) {
-                        break;  // stop at first verse word
-                    } else {
-                        // No data-pos at all (old-style) — static fallback
-                        fusedWords = [];
-                        break;
-                    }
-                }
-
-                if (fusedWords.length > 0 && fusedHasTimestamps) {
-                    // Animated fused prefix — clone into a mega-special-line, share audio
-                    flushPendingSpecial();
-                    var fusedDiv;
-                    var prevChild = frag.lastChild;
-                    if (prevChild && prevChild.classList && prevChild.classList.contains('mega-special-line')) {
-                        fusedDiv = prevChild;
-                        fusedDiv.appendChild(document.createTextNode('    '));
-                    } else {
-                        fusedDiv = document.createElement('div');
-                        fusedDiv.className = 'mega-special-line';
-                        frag.appendChild(fusedDiv);
-                    }
-                    var fusedWordEls = [];
-                    var fusedWordTimings = [];
-                    var fusedCharTimings = [];
-                    var fusedCharEls = {};
-                    fusedWords.forEach(function(node) {
-                        var clone = node.cloneNode(true);
-                        fusedDiv.appendChild(document.createTextNode(' '));
-                        fusedDiv.appendChild(clone);
-                        var pos = node.dataset.pos;
-                        if (pos) renderedPositions[pos] = clone;
-                        fusedWordEls.push(clone);
-                        fusedWordTimings.push({
-                            start: parseFloat(node.dataset.start) || 0,
-                            end: parseFloat(node.dataset.end) || 0
-                        });
-                        var wordIdx = fusedWordEls.length - 1;
-                        var chars = Array.from(clone.children);
-                        fusedCharEls[wordIdx] = chars;
-                        if (pos) renderedCharEls[pos] = chars;
-                        Array.from(node.children).forEach(function(srcChar) {
-                            fusedCharTimings.push({
-                                start: parseFloat(srcChar.dataset.start) || 0,
-                                end: parseFloat(srcChar.dataset.end) || 0,
-                                parentWordIdx: wordIdx
-                            });
-                        });
-                    });
-                    // These fused words will be added to the same segment entry below
-                    // (they share the audio with the verse words)
-                } else if (fusedWords.length > 0) {
-                    // Fused prefix without timestamps — static text fallback
-                    var fusedTxt = fusedWords.map(function(w) { return w.textContent; }).join(' ').trim();
-                    if (fusedTxt) {
-                        if (pendingSpecial) {
-                            pendingSpecial += '    ' + fusedTxt;
-                        } else {
-                            pendingSpecial = fusedTxt;
-                        }
-                    }
-                }
-
-                var sourceWords = Array.from(textEl.querySelectorAll('.word'));
-                var segWordEls = [];    // unified DOM elements this segment animates
-                var segWordTimings = []; // {start, end} from source card
-                var segCharTimings = []; // [{start, end, parentWordIdx}, ...]
-                var unifiedCharEls = {};  // wordIdx -> Array of .char elements in unified DOM
-
-                // Iterate source childNodes to copy words + verse markers, deduplicating by data-pos
-                var childNodes = Array.from(textEl.childNodes);
-                var lastWasNew = false;  // track if the last word was newly appended
-                childNodes.forEach(function(node) {
-                    if (node.nodeType === Node.ELEMENT_NODE && node.classList && node.classList.contains('word')) {
-                        var pos = node.dataset.pos;
-                        if (!pos) return;  // skip words without data-pos
-                        if (pos.indexOf(':0:0:') !== -1) return;  // skip fused prefix words (handled above)
-                        if (renderedPositions[pos]) {
-                            // Word already in unified text — reuse existing element
-                            segWordEls.push(renderedPositions[pos]);
-                            lastWasNew = false;
-                        } else {
-                            // New word — clone and append
-                            var clone = node.cloneNode(true);
-                            // Detect surah change for separator
-                            var posParts = pos.split(':');
-                            if (posParts.length >= 1 && posParts[0]) {
-                                var wordSurah = posParts[0];
-                                if (wordSurah !== lastSurah) {
-                                    var sepDiv = document.createElement('div');
-                                    sepDiv.className = 'mega-surah-separator';
-                                    if (lastSurah === null) sepDiv.style.borderTop = 'none';
-                                    var ligKey = 'surah-' + wordSurah;
-                                    sepDiv.textContent = surahLigatures[ligKey] || wordSurah;
-                                    // Insert before any trailing special line so separator comes before basmala
-                                    var trailingSpecial = frag.lastChild;
-                                    if (trailingSpecial && trailingSpecial.classList && trailingSpecial.classList.contains('mega-special-line')) {
-                                        frag.insertBefore(sepDiv, trailingSpecial);
-                                    } else {
-                                        frag.appendChild(sepDiv);
-                                    }
-                                }
-                                lastSurah = wordSurah;
-                            }
-                            // Flush buffered special text after separator, before first word
-                            flushPendingSpecial();
-                            frag.appendChild(document.createTextNode(' '));
-                            frag.appendChild(clone);
-                            if (pos) {
-                                renderedPositions[pos] = clone;
-                            }
-                            segWordEls.push(clone);
-                            lastWasNew = true;
-                        }
-                        // Read timing from source word
-                        segWordTimings.push({
-                            start: parseFloat(node.dataset.start) || 0,
-                            end: parseFloat(node.dataset.end) || 0
-                        });
-                        // Read char timings from source and cache unified char elements
-                        var wordIdx = segWordEls.length - 1;
-                        var pos2 = node.dataset.pos;
-                        if (pos2 && renderedCharEls[pos2]) {
-                            unifiedCharEls[wordIdx] = renderedCharEls[pos2];
-                        } else {
-                            var chars = Array.from(segWordEls[wordIdx].children);
-                            unifiedCharEls[wordIdx] = chars;
-                            if (pos2) renderedCharEls[pos2] = chars;
-                        }
-                        var srcChars = Array.from(node.children);
-                        srcChars.forEach(function(srcChar) {
-                            segCharTimings.push({
-                                start: parseFloat(srcChar.dataset.start) || 0,
-                                end: parseFloat(srcChar.dataset.end) || 0,
-                                parentWordIdx: wordIdx
-                            });
-                        });
-                    } else if (node.nodeType === Node.ELEMENT_NODE && lastWasNew) {
-                        // Verse marker or other non-word element — append only if preceding word was new
-                        var markerText = node.textContent || '';
-                        var markerKey = (lastSurah || '') + ':' + markerText.trim();
-                        if (!markerText.trim() || !renderedMarkers[markerKey]) {
-                            frag.appendChild(document.createTextNode(' '));
-                            var markerSpan = document.createElement('span');
-                            markerSpan.className = 'verse-marker';
-                            markerSpan.title = 'Jump to this verse';
-                            markerSpan.appendChild(node.cloneNode(true));
-                            // Extract verse from preceding word's data-pos (surah:ayah:word)
-                            var lastWordPos = segWordEls.length > 0 ? (segWordEls[segWordEls.length - 1].dataset.pos || '') : '';
-                            var posPartsM = lastWordPos.split(':');
-                            if (posPartsM.length >= 2) markerSpan.dataset.verse = posPartsM[0] + ':' + posPartsM[1];
-                            frag.appendChild(markerSpan);
-                            if (markerText.trim()) renderedMarkers[markerKey] = true;
-                        }
-                    } else if (node.nodeType === Node.TEXT_NODE && lastWasNew) {
-                        // Verse markers are plain text nodes (e.g. ۝٢٥٥), not elements
-                        var txt = node.textContent || '';
-                        if (txt.trim()) {
-                            var markerKey = (lastSurah || '') + ':' + txt.trim();
-                            if (!renderedMarkers[markerKey]) {
-                                frag.appendChild(document.createTextNode(' '));
-                                var markerSpan2 = document.createElement('span');
-                                markerSpan2.className = 'verse-marker';
-                                markerSpan2.title = 'Jump to this verse';
-                                markerSpan2.textContent = txt.trim();
-                                var lastWordPos2 = segWordEls.length > 0 ? (segWordEls[segWordEls.length - 1].dataset.pos || '') : '';
-                                var posPartsM2 = lastWordPos2.split(':');
-                                if (posPartsM2.length >= 2) markerSpan2.dataset.verse = posPartsM2[0] + ':' + posPartsM2[1];
-                                frag.appendChild(markerSpan2);
-                                renderedMarkers[markerKey] = true;
-                            }
-                        }
-                    }
-                });
-
-                if (segWordEls.length === 0) return;
-
-                // Build caches: pair source timings with unified DOM elements
-                var cacheWords = segWordEls.map(function(el, j) {
-                    return {
-                        el: el,
-                        start: segWordTimings[j].start,
-                        end: segWordTimings[j].end
-                    };
-                });
-
-                // Build char cache using pre-collected unified char elements
-                var cacheChars = [];
-                var charCountPerWord = {};
-                segCharTimings.forEach(function(ct) {
-                    var wIdx = ct.parentWordIdx;
-                    if (charCountPerWord[wIdx] === undefined) charCountPerWord[wIdx] = 0;
-                    var charIdxInWord = charCountPerWord[wIdx]++;
-                    var unifiedChars = unifiedCharEls[wIdx];
-                    if (unifiedChars && charIdxInWord < unifiedChars.length) {
-                        cacheChars.push({
-                            el: unifiedChars[charIdxInWord],
-                            start: ct.start,
-                            end: ct.end
-                        });
-                    }
-                });
-
-                // Prepend animated fused prefix words/chars (same audio segment)
-                if (typeof fusedWordEls !== 'undefined' && fusedWordEls.length > 0 && fusedHasTimestamps) {
-                    var fusedCacheWords = fusedWordEls.map(function(el, j) {
-                        return { el: el, start: fusedWordTimings[j].start, end: fusedWordTimings[j].end };
-                    });
-                    var fusedCacheChars = [];
-                    var fusedCharCount = {};
-                    fusedCharTimings.forEach(function(ct) {
-                        var wIdx = ct.parentWordIdx;
-                        if (fusedCharCount[wIdx] === undefined) fusedCharCount[wIdx] = 0;
-                        var charIdx = fusedCharCount[wIdx]++;
-                        var chars = fusedCharEls[wIdx];
-                        if (chars && charIdx < chars.length) {
-                            fusedCacheChars.push({ el: chars[charIdx], start: ct.start, end: ct.end });
-                        }
-                    });
-                    cacheWords = fusedCacheWords.concat(cacheWords);
-                    cacheChars = fusedCacheChars.concat(cacheChars);
-                    segWordEls = fusedWordEls.concat(segWordEls);
-                    // Reset fused state for next card
-                    fusedWordEls = []; fusedHasTimestamps = false;
-                }
-
-                // Build group index for segment caches (for character grouping in animations)
-                buildGroupIndex(cacheWords);
-                buildGroupIndex(cacheChars);
-
-                segments.push({
-                    startTime: segStartTime,
-                    endTime: segEndTime,
-                    cacheWords: cacheWords,
-                    cacheChars: cacheChars,
-                    wordEls: segWordEls
-                });
-            });
-
-            // Flush any remaining buffered special text
-            flushPendingSpecial();
-
-            textFlow.appendChild(frag);
-            // Build unified caches so Window mode spans all segments.
-            // Deduplicate: each DOM element appears once (shared elements from
-            // repeated segments reuse the first segment's unified index).
-            var unifiedWords = [];
-            var unifiedChars = [];
-            var wordElToIdx = new Map();
-            var charElToIdx = new Map();
-            var elToFirstSeg = new Map();
-            segments.forEach(function(seg, sIdx) {
-                seg.sharedEls = new Set();
-                seg.unifiedWordMap = [];
-                seg.unifiedCharMap = [];
-                for (var i = 0; i < seg.cacheWords.length; i++) {
-                    var el = seg.cacheWords[i].el;
-                    if (wordElToIdx.has(el)) {
-                        seg.unifiedWordMap.push(wordElToIdx.get(el));
-                        seg.sharedEls.add(el);
-                        segments[elToFirstSeg.get(el)].sharedEls.add(el);
-                    } else {
-                        var idx = unifiedWords.length;
-                        wordElToIdx.set(el, idx);
-                        elToFirstSeg.set(el, sIdx);
-                        seg.unifiedWordMap.push(idx);
-                        unifiedWords.push(seg.cacheWords[i]);
-                    }
-                }
-                for (var i = 0; i < seg.cacheChars.length; i++) {
-                    var el = seg.cacheChars[i].el;
-                    if (charElToIdx.has(el)) {
-                        seg.unifiedCharMap.push(charElToIdx.get(el));
-                    } else {
-                        var idx = unifiedChars.length;
-                        charElToIdx.set(el, idx);
-                        seg.unifiedCharMap.push(idx);
-                        unifiedChars.push(seg.cacheChars[i]);
-                    }
-                }
-            });
-            // Tag each word/char element with its segment index for click-to-seek
-            segments.forEach(function(seg, sIdx) {
-                seg.cacheWords.forEach(function(c) { c.el.dataset.segIdx = sIdx; });
-                seg.cacheChars.forEach(function(c) { c.el.dataset.segIdx = sIdx; });
-            });
-            // Build group index for unified caches (for character grouping across all segments)
-            buildGroupIndex(unifiedWords);
-            buildGroupIndex(unifiedChars);
-
-            animateAllState.segments = segments;
-            animateAllState.unifiedCacheWords = unifiedWords;
-            animateAllState.unifiedCacheChars = unifiedChars;
-            animateAllState.textFlow = textFlow;
-            animDebug('MEGA', 'buildMegaCard: ' + segments.length + ' segments, unifiedWords=' + unifiedWords.length + ' unifiedChars=' + unifiedChars.length);
-            dumpCacheTimestamps(unifiedWords, 'Unified Words');
-            dumpCacheTimestamps(unifiedChars, 'Unified Chars');
-            mega.appendChild(textFlow);
-
-            // Build top bar with Exit button (placed outside mega card)
-            var topBar = document.createElement('div');
-            topBar.className = 'mega-top-bar';
-            var exitBtn = document.createElement('button');
-            exitBtn.className = 'mega-exit-btn';
-            exitBtn.textContent = 'Exit';
-            exitBtn.title = 'Exit and return to individual segments';
-            topBar.appendChild(exitBtn);
-            // Speed dropdown
-            var speedSelect = document.createElement('select');
-            speedSelect.className = 'mega-speed-select';
-            speedSelect.title = 'Playback speed';
-            [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].forEach(function(r) {
-                var opt = document.createElement('option');
-                opt.value = r;
-                opt.textContent = r + 'x';
-                if (r === (window.ANIM_PLAYBACK_RATE || 1)) opt.selected = true;
-                speedSelect.appendChild(opt);
-            });
-            speedSelect.addEventListener('change', function() {
-                var rate = parseFloat(speedSelect.value);
-                window.ANIM_PLAYBACK_RATE = rate;
-                if (animateAllState.unifiedAudio) {
-                    animateAllState.unifiedAudio.playbackRate = rate;
-                }
-                saveAnimSettings();
-            });
-            topBar.appendChild(speedSelect);
-            return {mega: mega, topBar: topBar, unifiedAudio: unifiedAudio};
-        }
-
-        // Reset highlight state for backward transitions (cache-based, no DOM queries)
-        function resetHighlightsFrom(segIdx) {
-            for (var s = segIdx; s < animateAllState.segments.length; s++) {
-                var seg = animateAllState.segments[s];
-                seg.cacheWords.forEach(function(c) {
-                    c.el.classList.remove('active', 'reached');
-                    c.el.style.removeProperty('opacity');
-                });
-                seg.cacheChars.forEach(function(c) {
-                    c.el.classList.remove('active', 'reached');
-                    c.el.style.removeProperty('opacity');
-                });
-            }
-            // Re-apply 'reached' to shared elements belonging to completed earlier segments
-            for (var s = 0; s < segIdx && s <= animateAllState.completedIdx; s++) {
-                var prev = animateAllState.segments[s];
-                if (!prev.sharedEls || prev.sharedEls.size === 0) continue;
-                prev.cacheWords.forEach(function(c) {
-                    if (prev.sharedEls.has(c.el)) c.el.classList.add('reached');
-                });
-                prev.cacheChars.forEach(function(c) {
-                    if (prev.sharedEls.has(c.el)) c.el.classList.add('reached');
-                });
-            }
-        }
-
-        function startSegmentTick(seg, audio, segStartTime, segEndTime) {
-            var lastWordIdx = -1;
-            var lastGranularity = window.ANIM_GRANULARITY;
-            var lastOpacityPrev = window.ANIM_OPACITY_PREV;
-            var lastSeenVersion = window._windowSettingsVersion;
-            var segIdx = animateAllState.currentIdx;
-            animDebug('MEGA', 'startSegmentTick seg=' + segIdx + ' cacheWords=' + seg.cacheWords.length + ' cacheChars=' + seg.cacheChars.length + ' bounds=[' + segStartTime.toFixed(3) + ',' + segEndTime.toFixed(3) + ']');
-            function tick() {
-                if (audio.paused) return;
-                var currentTime = audio.currentTime;
-
-                // Check segment end boundary (unified audio spans all segments)
-                if (currentTime >= segEndTime) {
-                    onAnimateAllSegmentEnd();
-                    return;
-                }
-
-                var cache = window.ANIM_GRANULARITY === 'Characters' ? seg.cacheChars : seg.cacheWords;
-                if (window.ANIM_GRANULARITY !== lastGranularity) {
-                    animDebug('MEGA', 'Granularity changed: ' + lastGranularity + ' -> ' + window.ANIM_GRANULARITY);
-                    // Granularity changed mid-animation: reset this segment's elements
-                    seg.wordEls.forEach(function(w) {
-                        w.classList.remove('active');
-                        w.style.removeProperty('opacity');
-                        w.querySelectorAll('.char').forEach(function(c) {
-                            c.classList.remove('active');
-                            c.style.removeProperty('opacity');
-                        });
-                    });
-                    // Clear inline opacity across all segments (previous segments may have inline opacity)
-                    animateAllState.unifiedCacheWords.forEach(function(c) { c.el.style.removeProperty('opacity'); });
-                    animateAllState.unifiedCacheChars.forEach(function(c) { c.el.style.removeProperty('opacity'); });
-                    lastWordIdx = -1;
-                    lastGranularity = window.ANIM_GRANULARITY;
-                }
-
-                // Mode changed mid-animation — refresh all reached words with new opacity
-                if (window.ANIM_OPACITY_PREV !== lastOpacityPrev) {
-                    animDebug('MEGA', 'Mode changed: prevOp ' + lastOpacityPrev + ' -> ' + window.ANIM_OPACITY_PREV);
-                    animateAllState.unifiedCacheWords.forEach(function(c) {
-                        if (c.el.classList.contains('reached')) {
-                            if (window.ANIM_OPACITY_PREV >= 1) {
-                                c.el.style.removeProperty('opacity');
-                            } else {
-                                c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
-                            }
-                        }
-                    });
-                    animateAllState.unifiedCacheChars.forEach(function(c) {
-                        if (c.el.classList.contains('reached')) {
-                            if (window.ANIM_OPACITY_PREV >= 1) {
-                                c.el.style.removeProperty('opacity');
-                            } else {
-                                c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
-                            }
-                        }
-                    });
-                    lastOpacityPrev = window.ANIM_OPACITY_PREV;
-                }
-
-                // Slider settings changed mid-animation — reapply window opacity
-                if (window._windowSettingsVersion !== lastSeenVersion) {
-                    if (lastWordIdx >= 0) {
-                        var wc = window.ANIM_GRANULARITY === 'Characters'
-                            ? animateAllState.unifiedCacheChars : animateAllState.unifiedCacheWords;
-                        var map = window.ANIM_GRANULARITY === 'Characters'
-                            ? seg.unifiedCharMap : seg.unifiedWordMap;
-                        if (map[lastWordIdx] !== undefined) {
-                            applyWindowOpacity(wc, map[lastWordIdx], map[lastWordIdx]);
-                        }
-                    }
-                    lastSeenVersion = window._windowSettingsVersion;
-                }
-
-                var newWordIdx = -1;
-                var searchPath = '';
-                // Fast path: check current word, then next (covers ~99% of frames)
-                if (lastWordIdx >= 0 && lastWordIdx < cache.length &&
-                    currentTime >= cache[lastWordIdx].start && currentTime < cache[lastWordIdx].end) {
-                    newWordIdx = lastWordIdx;
-                    searchPath = 'same';
-                } else if (lastWordIdx + 1 < cache.length &&
-                    currentTime >= cache[lastWordIdx + 1].start && currentTime < cache[lastWordIdx + 1].end) {
-                    newWordIdx = lastWordIdx + 1;
-                    searchPath = 'next';
-                } else {
-                    // Fallback: full scan (seeking, granularity switch, etc.)
-                    searchPath = 'scan';
-                    for (var i = 0; i < cache.length; i++) {
-                        if (currentTime >= cache[i].start && currentTime < cache[i].end) {
-                            newWordIdx = i;
-                            break;
-                        }
-                    }
-                    // Clamp to last word when past its end but audio hasn't ended yet
-                    if (newWordIdx === -1 && cache.length > 0 && currentTime >= cache[cache.length - 1].start) {
-                        newWordIdx = cache.length - 1;
-                        searchPath = 'clamp';
-                    }
-                }
-                if (newWordIdx !== lastWordIdx) {
-                    var newText = newWordIdx >= 0 ? cache[newWordIdx].el.textContent.substring(0, 15) : '-';
-                    animDebug('MEGA', 'seg=' + segIdx + ' idx: ' + lastWordIdx + ' -> ' + newWordIdx + ' (' + searchPath + ') t=' + currentTime.toFixed(3) + ' "' + newText + '"');
-                    if (newWordIdx === -1 && cache.length > 0) {
-                        var first = cache[0];
-                        var last = cache[cache.length - 1];
-                        animDebug('MEGA', '  NO MATCH: t=' + currentTime.toFixed(3) + ' cache[0]=[' + first.start.toFixed(3) + ',' + first.end.toFixed(3) + '] cache[' + (cache.length-1) + ']=[' + last.start.toFixed(3) + ',' + last.end.toFixed(3) + ']');
-                    }
-                    if (lastWordIdx >= 0 && lastWordIdx < cache.length) {
-                        applyClassToGroup(cache, lastWordIdx, 'active', false);
-                        applyClassToGroup(cache, lastWordIdx, 'reached', true);
-                    }
-                    if (newWordIdx >= 0) {
-                        applyClassToGroup(cache, newWordIdx, 'active', true);
-                        if (lastWordIdx === -1) {
-                            // First highlight — catch up any skipped words (with group support)
-                            for (var j = 0; j < newWordIdx; j++) {
-                                applyClassToGroup(cache, j, 'reached', true);
-                            }
-                        }
-                        // auto-scroll disabled — causes jank with frequent word changes
-                    }
-                    if (newWordIdx >= 0) {
-                        var wc = window.ANIM_GRANULARITY === 'Characters'
-                            ? animateAllState.unifiedCacheChars : animateAllState.unifiedCacheWords;
-                        var map = window.ANIM_GRANULARITY === 'Characters' ? seg.unifiedCharMap : seg.unifiedWordMap;
-                        applyWindowOpacity(wc, map[newWordIdx],
-                            lastWordIdx >= 0 ? map[lastWordIdx] : -1);
-                    }
-                    lastWordIdx = newWordIdx;
-                }
-            }
-            if (animateAllState.rafId) cancelAnimationFrame(animateAllState.rafId);
-            function rafLoop() {
-                tick();
-                // Keep looping while animation is active AND still on the same segment.
-                // When tick() triggers a segment transition, a new RAF loop is started for
-                // the new segment - this old loop must stop to avoid duplicate transitions.
-                if (animateAllState.active && !audio.paused && animateAllState.currentIdx === segIdx) {
-                    animateAllState.rafId = requestAnimationFrame(rafLoop);
-                }
-            }
-            animateAllState.rafId = requestAnimationFrame(rafLoop);
-        }
-
-        function animateSegment(idx, seekTime) {
-            var seg = animateAllState.segments[idx];
-            if (!seg) return;
-            animateAllState.currentIdx = idx;
-            // Re-tag shared elements so click-to-seek targets this segment during playback
-            seg.cacheWords.forEach(function(c) { c.el.dataset.segIdx = idx; });
-            seg.cacheChars.forEach(function(c) { c.el.dataset.segIdx = idx; });
-            var audio = animateAllState.unifiedAudio;
-            // Apply window engine class to mega card
-            var mega = animateAllState.megaCard;
-            mega.classList.add('anim-window');
-            if (window.ANIM_GRANULARITY === 'Characters') {
-                mega.classList.add('anim-chars');
-            }
-            // Detect backward transition: jumping to a segment at or before the last completed one
-            if (idx <= animateAllState.completedIdx) {
-                resetHighlightsFrom(idx);
-                // Reset completedIdx so forward progress from here is tracked correctly
-                animateAllState.completedIdx = idx - 1;
-            }
-            // Determine seek position: use provided seekTime or default to segment start
-            var targetTime = (seekTime !== undefined) ? seekTime : seg.startTime;
-            // Start playback and polling with segment boundaries
-            startSegmentTick(seg, audio, seg.startTime, seg.endTime);
-            audio.currentTime = targetTime;
-            audio.playbackRate = window.ANIM_PLAYBACK_RATE || 1;
-            audio.play();
-            // No per-segment preloading needed — unified audio already loaded
-        }
-
-        function seekToWord(wordEl) {
-            if (!animateAllState.active) return;
-            var cache = window.ANIM_GRANULARITY === 'Characters'
-                ? animateAllState.unifiedCacheChars : animateAllState.unifiedCacheWords;
-            // Find unified index and start time for the clicked word
-            var targetIdx = -1;
-            var wordStartTime = 0;
-            // For char granularity, find the first char of the clicked word
-            if (window.ANIM_GRANULARITY === 'Characters') {
-                for (var i = 0; i < cache.length; i++) {
-                    if (cache[i].el.parentElement === wordEl || cache[i].el === wordEl) {
-                        targetIdx = i;
-                        wordStartTime = cache[i].start;
-                        break;
-                    }
-                }
-            } else {
-                for (var i = 0; i < cache.length; i++) {
-                    if (cache[i].el === wordEl) {
-                        targetIdx = i;
-                        wordStartTime = cache[i].start;
-                        break;
-                    }
-                }
-            }
-            if (targetIdx < 0) return;
-            // Derive segment from word timing (more reliable than data-segIdx for shared elements)
-            var segIdx = 0;
-            for (var s = 0; s < animateAllState.segments.length; s++) {
-                var seg = animateAllState.segments[s];
-                if (wordStartTime >= seg.startTime && wordStartTime < seg.endTime) {
-                    segIdx = s;
-                    break;
-                }
-            }
-            // Reset window cache to force full reapplication (not fast path)
-            window._windowActiveIdx = -1;
-            window._windowLastPcAll = false;
-            window._windowLastAcAll = false;
-            // Update highlight state: words before target = reached, target onward = clean
-            for (var i = 0; i < cache.length; i++) {
-                cache[i].el.classList.remove('active');
-                cache[i].el.style.removeProperty('opacity');
-                if (i < targetIdx) {
-                    cache[i].el.classList.add('reached');
-                } else {
-                    cache[i].el.classList.remove('reached');
-                }
-            }
-            // Also sync the other cache (chars if in word mode, words if in char mode)
-            var otherCache = window.ANIM_GRANULARITY === 'Characters'
-                ? animateAllState.unifiedCacheWords : animateAllState.unifiedCacheChars;
-            for (var i = 0; i < otherCache.length; i++) {
-                otherCache[i].el.classList.remove('active');
-                otherCache[i].el.style.removeProperty('opacity');
-            }
-            // Re-apply window opacity immediately for the new position
-            applyWindowOpacity(cache, targetIdx, -1);
-            // Switch segment or seek within current (unified audio)
-            var audio = animateAllState.unifiedAudio;
-            if (animateAllState.rafId) {
-                cancelAnimationFrame(animateAllState.rafId);
-                animateAllState.rafId = null;
-            }
-            if (segIdx !== animateAllState.currentIdx) {
-                // Different segment — restart tick loop with new segment boundaries
-                animateSegment(segIdx, wordStartTime);
-            } else {
-                // Same segment — restart tick loop at new position for clean state
-                audio.currentTime = wordStartTime;
-                var seg = animateAllState.segments[segIdx];
-                var segStartTime = segIdx > 0 ? animateAllState.segments[segIdx - 1].endTime : 0;
-                startSegmentTick(seg, audio, segStartTime, seg.endTime);
-            }
-        }
-
-        function seekToVerseMarker(markerEl) {
-            if (!animateAllState.active) return;
-            var verse = markerEl.dataset.verse;  // e.g. "2:255"
-            if (!verse) return;
-            var prefix = verse + ':';
-            // Find first word in unified cache whose data-pos starts with this verse
-            var cache = animateAllState.unifiedCacheWords;
-            for (var i = 0; i < cache.length; i++) {
-                var pos = cache[i].el.dataset.pos || '';
-                if (pos === verse || pos.indexOf(prefix) === 0) {
-                    seekToWord(cache[i].el);
-                    return;
-                }
-            }
-        }
-
-        function onAnimateAllSegmentEnd() {
-            if (!animateAllState.active) return;
-            var seg = animateAllState.segments[animateAllState.currentIdx];
-            if (seg) {
-                // Mark all words/chars in finished segment as reached.
-                // Use mode's prev_opacity for completed elements.
-                seg.cacheWords.forEach(function(c) {
-                    if (c.el.classList.contains('active')) {
-                        c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
-                    }
-                    c.el.classList.remove('active');
-                    c.el.classList.add('reached');
-                });
-                seg.cacheChars.forEach(function(c) {
-                    if (c.el.classList.contains('active')) {
-                        c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
-                    }
-                    c.el.classList.remove('active');
-                    c.el.classList.add('reached');
-                });
-                animateAllState.completedIdx = animateAllState.currentIdx;
-            }
-            var nextIdx = animateAllState.currentIdx + 1;
-            if (nextIdx < animateAllState.segments.length) {
-                // Unified audio continues playing — just switch segment tracking
-                var nextSeg = animateAllState.segments[nextIdx];
-                animateAllState.currentIdx = nextIdx;
-                // Re-tag shared elements for the new segment
-                nextSeg.cacheWords.forEach(function(c) { c.el.dataset.segIdx = nextIdx; });
-                nextSeg.cacheChars.forEach(function(c) { c.el.dataset.segIdx = nextIdx; });
-                // Restart tick loop with new segment boundaries
-                startSegmentTick(nextSeg, animateAllState.unifiedAudio, nextSeg.startTime, nextSeg.endTime);
-            } else {
-                // All segments done — tear down after brief delay
-                setTimeout(function() { stopAnimateAll(); }, 500);
-            }
-        }
-
-        // Pause: keep mega card and position, just stop playback
-        function pauseAnimateAll() {
-            if (animateAllState.rafId) {
-                cancelAnimationFrame(animateAllState.rafId);
-                animateAllState.rafId = null;
-            }
-            if (animateAllState.unifiedAudio) animateAllState.unifiedAudio.pause();
-            animateAllState.active = false;
-
-            // Fade last active word to mode's prev_opacity
-            var seg = animateAllState.segments[animateAllState.currentIdx];
-            if (seg) {
-                var cache = window.ANIM_GRANULARITY === 'Characters' ? seg.cacheChars : seg.cacheWords;
-                cache.forEach(function(c) {
-                    if (c.el.classList.contains('active')) {
-                        c.el.style.opacity = String(window.ANIM_OPACITY_PREV);
-                    }
-                });
-            }
-
-            if (animateAllState.btn) {
-                animateAllState.btn.classList.remove('active');
-                animateAllState.btn.textContent = 'Resume';
-            }
-        }
-
-        // Full teardown: remove mega card, restore segment cards
-        function stopAnimateAll() {
-            if (animateAllState.rafId) {
-                cancelAnimationFrame(animateAllState.rafId);
-                animateAllState.rafId = null;
-            }
-            if (animateAllState.unifiedAudio) animateAllState.unifiedAudio.pause();
-            // Move Stop/Resume button back to its original parent before removing mega card
-            if (animateAllState.btn && animateAllState.btnParent) {
-                animateAllState.btnParent.appendChild(animateAllState.btn);
-            }
-            // Remove tip callout, top bar, and mega card
-            var tipEl = document.querySelector('.mega-tip');
-            if (tipEl) tipEl.parentNode.removeChild(tipEl);
-            if (animateAllState.topBar && animateAllState.topBar.parentNode) {
-                animateAllState.topBar.parentNode.removeChild(animateAllState.topBar);
-            }
-            if (animateAllState.megaCard && animateAllState.megaCard.parentNode) {
-                animateAllState.megaCard.parentNode.removeChild(animateAllState.megaCard);
-            }
-            animateAllState.megaCard = null;
-            animateAllState.topBar = null;
-            animateAllState.textFlow = null;
-            // Unhide segment cards
-            document.querySelectorAll('.segment-card.hidden-for-mega').forEach(function(c) {
-                c.classList.remove('hidden-for-mega');
-            });
-            // Restore left column and right column sizing
-            var leftCol = document.getElementById('left-col');
-            if (leftCol) leftCol.style.display = '';
-            var mainRow = document.getElementById('main-row');
-            if (mainRow) {
-                var rightCol = mainRow.querySelector(':scope > div:last-child');
-                if (rightCol) rightCol.style.flexGrow = animateAllState.savedFlexGrow || '';
-            }
-            // Restore description and API accordion
-            if (mainRow) {
-                var sibling = mainRow.parentNode.firstElementChild;
-                while (sibling && sibling !== mainRow) {
-                    sibling.style.display = '';
-                    sibling = sibling.nextElementSibling;
-                }
-            }
-            // Restore header/summary text and action buttons
-            document.querySelectorAll('.segments-header, .segments-review-summary').forEach(function(el) {
-                el.style.display = '';
-            });
-            var actionRow = document.getElementById('action-btns-row');
-            if (actionRow) actionRow.style.display = '';
-            var tsRow = document.getElementById('ts-row');
-            if (tsRow) tsRow.style.display = '';
-            // Move animation settings accordion back to left column
-            var animAccordion = document.getElementById('anim-settings-accordion');
-            if (animAccordion && animateAllState.accordionParent) {
-                if (animateAllState.accordionNextSibling) {
-                    animateAllState.accordionParent.insertBefore(animAccordion, animateAllState.accordionNextSibling);
-                } else {
-                    animateAllState.accordionParent.appendChild(animAccordion);
-                }
-            }
-            // Hide mega styling sliders (only shown in megacard view)
-            var megaStylingRow = document.getElementById('mega-styling-row');
-            if (megaStylingRow) megaStylingRow.style.display = 'none';
-            // Reset button
-            if (animateAllState.btn) {
-                animateAllState.btn.classList.remove('active');
-                animateAllState.btn.textContent = 'Animate All';
-            }
-            animateAllState.active = false;
-            animateAllState.completedIdx = -1;
-            animateAllState.segments = [];
-            animateAllState.unifiedCacheWords = [];
-            animateAllState.unifiedCacheChars = [];
-            animateAllState.unifiedAudio = null;
-            animateAllState.megaCard = null;
-            animateAllState.textFlow = null;
-            window.ANIM_PLAYBACK_RATE = 1;
-        }
-
-        // Resume from paused position
-        function resumeAnimateAll() {
-            animateAllState.active = true;
-            if (animateAllState.btn) {
-                animateAllState.btn.classList.add('active');
-                animateAllState.btn.textContent = 'Stop';
-            }
-            var seg = animateAllState.segments[animateAllState.currentIdx];
-            if (!seg) return;
-            var audio = animateAllState.unifiedAudio;
-            // Re-apply animation classes
-            var mega = animateAllState.megaCard;
-            mega.classList.add('anim-window');
-            if (window.ANIM_GRANULARITY === 'Characters') {
-                mega.classList.add('anim-chars');
-            }
-            // Restart polling from current audio position
-            startSegmentTick(seg, audio, seg.startTime, seg.endTime);
-            audio.playbackRate = window.ANIM_PLAYBACK_RATE || 1;
-            audio.play();
-        }
-
-        function toggleAnimateAll(btn) {
-            // Currently playing → pause (keep mega card)
-            if (animateAllState.active) {
-                pauseAnimateAll();
-                return;
-            }
-            // Paused with mega card still in live DOM → resume
-            if (animateAllState.megaCard && document.contains(animateAllState.megaCard)) {
-                resumeAnimateAll();
-                return;
-            }
-            // Stale mega card (orphaned by Gradio HTML update) → reset state
-            if (animateAllState.megaCard) {
-                animateAllState.megaCard = null;
-                animateAllState.textFlow = null;
-                animateAllState.segments = [];
-                animateAllState.unifiedCacheWords = [];
-                animateAllState.unifiedCacheChars = [];
-                animateAllState.unifiedAudio = null;
-                animateAllState.completedIdx = -1;
-                animateAllState.active = false;
-            }
-            // Fresh start
-            document.querySelectorAll('.animate-btn.active').forEach(function(b) {
-                toggleAnimation(b);
-            });
-            var result = buildMegaCard();
-            if (!result || animateAllState.segments.length === 0) return;
-            if (!result.unifiedAudio) {
-                console.error('Animate All: unified audio not available');
-                return;
-            }
-            var mega = result.mega;
-            var topBar = result.topBar;
-            animateAllState.megaCard = mega;
-            animateAllState.topBar = topBar;
-            animateAllState.unifiedAudio = result.unifiedAudio;
-            animateAllState.btn = btn;
-            animateAllState.active = true;
-            // Hide individual segment cards
-            document.querySelectorAll('.segments-container .segment-card').forEach(function(c) {
-                c.classList.add('hidden-for-mega');
-            });
-            // Hide left column and expand right column to full width
-            var leftCol = document.getElementById('left-col');
-            if (leftCol) leftCol.style.display = 'none';
-            var mainRow = document.getElementById('main-row');
-            if (mainRow) {
-                var rightCol = mainRow.querySelector(':scope > div:last-child');
-                if (rightCol) {
-                    animateAllState.savedFlexGrow = rightCol.style.flexGrow;
-                    rightCol.style.flexGrow = '1';
-                }
-            }
-            // Hide description and API accordion (everything before main-row)
-            if (mainRow) {
-                var sibling = mainRow.parentNode.firstElementChild;
-                while (sibling && sibling !== mainRow) {
-                    sibling.style.display = 'none';
-                    sibling = sibling.nextElementSibling;
-                }
-            }
-            // Hide header/summary text and action buttons
-            document.querySelectorAll('.segments-header, .segments-review-summary').forEach(function(el) {
-                el.style.display = 'none';
-            });
-            var actionRow = document.getElementById('action-btns-row');
-            if (actionRow) actionRow.style.display = 'none';
-            var tsRow = document.getElementById('ts-row');
-            if (tsRow) tsRow.style.display = 'none';
-            // Move animation settings accordion above segments container
-            var animAccordion = document.getElementById('anim-settings-accordion');
-            if (animAccordion) {
-                animateAllState.accordionParent = animAccordion.parentNode;
-                animateAllState.accordionNextSibling = animAccordion.nextElementSibling;
-                var container = document.querySelector('.segments-container');
-                if (container) container.parentNode.insertBefore(animAccordion, container);
-            }
-            // Show mega styling sliders (hidden in normal card view)
-            var megaStylingRow = document.getElementById('mega-styling-row');
-            if (megaStylingRow) megaStylingRow.style.display = 'flex';
-            var container = document.querySelector('.segments-container');
-            // Add tip callout above the mega card
-            var tip = document.createElement('div');
-            tip.className = 'mega-tip';
-            tip.textContent = 'Tip: Click on any word to seek to it, or click a verse marker to jump to the start of that verse.';
-            container.appendChild(topBar);
-            container.appendChild(tip);
-            container.appendChild(mega);
-            // Append unified audio element to mega card (hidden)
-            if (animateAllState.unifiedAudio) {
-                mega.appendChild(animateAllState.unifiedAudio);
-            }
-            // Move Stop/Resume button into top bar (above mega card)
-            btn.classList.add('active');
-            btn.textContent = 'Stop';
-            animateAllState.btnParent = btn.parentNode;
-            topBar.appendChild(btn);
-            // Start animation from first segment
-            animateSegment(0);
-        }
-
-        // Event delegation for Animate button clicks and click-to-seek
-        document.addEventListener('click', function(e) {
-            // Click-to-seek in Animate All mode
-            if (animateAllState.active && animateAllState.megaCard) {
-                var wordEl = e.target.closest('.word');
-                if (wordEl && animateAllState.megaCard.contains(wordEl)) {
-                    seekToWord(wordEl);
-                    return;
-                }
-                var markerEl = e.target.closest('.verse-marker');
-                if (markerEl && animateAllState.megaCard.contains(markerEl)) {
-                    seekToVerseMarker(markerEl);
-                    return;
-                }
-            }
-            if (e.target.matches('.play-btn')) {
-                var card = e.target.closest('.segment-card');
-                var audio = card && card.querySelector('audio');
-                if (audio) {
-                    activateAudio(audio);
-                    audio.play().catch(function(){});
-                }
-            }
-            if (e.target.matches('.animate-btn')) {
-                toggleAnimation(e.target);
-            }
-            if (e.target.matches('.animate-all-btn')) {
-                toggleAnimateAll(e.target);
-            }
-            if (e.target.matches('.mega-exit-btn')) {
-                stopAnimateAll();
-            }
-        });
-
-        // Clear highlights when audio ends (with delay so last word is visible)
-        document.addEventListener('ended', function(e) {
-            if (e.target.tagName === 'AUDIO') {
-                var audio = e.target;
-                // If Animate All is active with unified audio, handle full recording end
-                if (animateAllState.active && audio === animateAllState.unifiedAudio) {
-                    // Unified audio ended — entire recording finished
-                    setTimeout(function() { stopAnimateAll(); }, 500);
-                    return;
-                }
-                // Default per-card behavior
-                var card = audio.closest('.segment-card');
-                if (card) {
-                    setTimeout(function() {
-                        var btn = card.querySelector('.animate-btn');
-                        if (btn && btn.classList.contains('active')) {
-                            btn.classList.remove('active');
-                            btn.textContent = 'Animate';
-                            stopAnimation(audio, card);
-                        }
-                    }, 500);
-                }
-            }
-        }, true);
-
-        // Prefetch next segment's audio when current segment starts playing
-        document.addEventListener('play', function(e) {
-            if (e.target.tagName === 'AUDIO') {
-                var card = e.target.closest('.segment-card');
-                if (!card) return;
-                var next = card.nextElementSibling;
-                if (next && next.classList.contains('segment-card')) {
-                    var nextAudio = next.querySelector('audio');
-                    if (nextAudio && !nextAudio.src && nextAudio.dataset.src) {
-                        nextAudio.src = nextAudio.dataset.src;
-                        nextAudio.preload = 'metadata';
-                    }
-                }
-            }
-        }, true);
-    })();
-
-    </script>
-    """
-
-    js = js.replace('__SURAH_LIGATURES_JSON__', json.dumps(_SURAH_LIGATURES))
-
-    with gr.Blocks(title="Quran Multi-Aligner", css=css, head=js, delete_cache=(DELETE_CACHE_FREQUENCY, DELETE_CACHE_AGE)) as app:
-        gr.Markdown("# 🎙️ Quran Multi-Aligner")
-        gr.Markdown("""
-- Transcribe and split any recitation by pauses within 1-2 minutes
-- Get precise pause-, verse-, word- and character-level timestamps, exportable as JSON
-- GPU-powered API usage with daily quotas
-- Reliable confidence system to flag uncertain segments and missed words — no silent errors
-- Robust tolerance to noise, speaker variation and suboptimal audio quality, particularly with the large model
-- Not intended for incorrect or fragmented recitations; most suited for correct, continuous recitations (repetitions handled)
-- [Feedback and contributions are welcome](https://huggingface.co/spaces/hetchyy/Quran-multi-aligner/discussions)
-""")
-        
-        # API Documentation accordion
-        with gr.Accordion("📡 API Usage", open=False):
-            gr.Markdown("In progress")
-        
-        with gr.Row(elem_id="main-row"):
-            # Left column: Input
-            with gr.Column(scale=LEFT_COLUMN_SCALE, elem_id="left-col"):
-                audio_input = gr.Audio(
-                    label="Upload Recitation",
-                    sources=["upload", "microphone"],
-                    type="numpy"
-                )
-
-                # Example audio files — short surahs use CPU, long ones use GPU
-                with gr.Row():
-                    btn_ex_112 = gr.Button("112", size="sm", min_width=0)
-                    btn_ex_84 = gr.Button("84", size="sm", min_width=0)
-                    btn_ex_7 = gr.Button("7", size="sm", min_width=0)
-                    btn_ex_juz30 = gr.Button("Juz' 30", size="sm", min_width=0)
-
-                with gr.Accordion("Animation Settings", open=False, elem_id="anim-settings-accordion"):
-                    with gr.Row(elem_id="anim-style-row"):
-                        anim_granularity_radio = gr.Radio(
-                            choices=ANIM_GRANULARITIES,
-                            value=ANIM_GRANULARITY_DEFAULT,
-                            label="Granularity",
-                            scale=ANIM_STYLE_ROW_SCALES[0],
-                        )
-                        anim_mode_radio = gr.Radio(
-                            choices=ANIM_DISPLAY_MODES,
-                            value=ANIM_DISPLAY_MODE_DEFAULT,
-                            label="Animation Style",
-                            scale=ANIM_STYLE_ROW_SCALES[1],
-                        )
-                        anim_verse_checkbox = gr.Checkbox(
-                            value=False,
-                            label="Verse Only",
-                            elem_id="anim-verse-mode",
-                            scale=ANIM_STYLE_ROW_SCALES[2], min_width=90,
-                        )
-                        anim_color_picker = gr.ColorPicker(
-                            value=ANIM_WORD_COLOR,
-                            label="Color",
-                            scale=ANIM_STYLE_ROW_SCALES[3],
-                        )
-                    _is_custom = (ANIM_DISPLAY_MODE_DEFAULT == "Custom")
-                    _preset = ANIM_PRESETS.get(ANIM_DISPLAY_MODE_DEFAULT, {})
-                    with gr.Row():
-                        anim_opacity_prev_slider = gr.Slider(
-                            minimum=0, maximum=1, step=ANIM_OPACITY_STEP,
-                            value=_preset.get("prev_opacity", ANIM_OPACITY_PREV_DEFAULT),
-                            label="Before Opacity",
-                            interactive=_is_custom,
-                            elem_id="anim-opacity-prev",
-                        )
-                        anim_opacity_after_slider = gr.Slider(
-                            minimum=0, maximum=1, step=ANIM_OPACITY_STEP,
-                            value=_preset.get("after_opacity", ANIM_OPACITY_AFTER_DEFAULT),
-                            label="After Opacity",
-                            interactive=_is_custom,
-                            elem_id="anim-opacity-after",
-                        )
-                    with gr.Row():
-                        anim_window_prev_slider = gr.Slider(
-                            minimum=ANIM_WINDOW_PREV_MIN, maximum=ANIM_WINDOW_PREV_MAX, step=1,
-                            value=_preset.get("prev_words", ANIM_WINDOW_PREV_DEFAULT),
-                            label="Before Words", elem_id="anim-window-prev",
-                            interactive=_is_custom,
-                        )
-                        anim_window_after_slider = gr.Slider(
-                            minimum=ANIM_WINDOW_AFTER_MIN, maximum=ANIM_WINDOW_AFTER_MAX, step=1,
-                            value=_preset.get("after_words", ANIM_WINDOW_AFTER_DEFAULT),
-                            label="After Words", elem_id="anim-window-after",
-                            interactive=_is_custom,
-                        )
-                    with gr.Row(elem_id="mega-styling-row"):
-                        anim_word_spacing_slider = gr.Slider(
-                            minimum=MEGA_WORD_SPACING_MIN, maximum=MEGA_WORD_SPACING_MAX,
-                            step=MEGA_WORD_SPACING_STEP, value=MEGA_WORD_SPACING_DEFAULT,
-                            label="Word Spacing", elem_id="anim-word-spacing",
-                        )
-                        anim_text_size_slider = gr.Slider(
-                            minimum=MEGA_TEXT_SIZE_MIN, maximum=MEGA_TEXT_SIZE_MAX,
-                            step=MEGA_TEXT_SIZE_STEP, value=MEGA_TEXT_SIZE_DEFAULT,
-                            label="Text Size", elem_id="anim-text-size",
-                        )
-                        anim_line_spacing_slider = gr.Slider(
-                            minimum=MEGA_LINE_SPACING_MIN, maximum=MEGA_LINE_SPACING_MAX,
-                            step=MEGA_LINE_SPACING_STEP, value=MEGA_LINE_SPACING_DEFAULT,
-                            label="Line Spacing", elem_id="anim-line-spacing",
-                        )
-                anim_cached_settings = gr.JSON(value=None, visible=False)
-                with gr.Accordion("Model Settings", open=True):
-                    with gr.Row():
-                        model_radio = gr.Radio(
-                            choices=["Base", "Large"],
-                            value="Base",
-                            label="ASR Model",
-                            info="Large: more robust to noisy/non-studio recitations but much slower (10x bigger)"
-                        )
-                        device_radio = gr.Radio(
-                            choices=["GPU", "CPU"],
-                            value="GPU",
-                            label="Device",
-                            info="Daily GPU usage limits. Unlimitted CPU usage but slower"
-                        )
-
-                # Helper to create segmentation settings (preset buttons + sliders)
-                def _create_segmentation_settings(id_suffix=""):
-                    """Create preset buttons and sliders. Returns (silence, speech, pad, btn_muj, btn_mur, btn_fast)."""
-                    _default_silence, _default_speech, _default_pad = PRESET_MURATTAL
-                    with gr.Row():
-                        with gr.Column(scale=1, min_width=0):
-                            btn_muj = gr.Button("Mujawwad (Slow)", size="sm", variant="secondary",
-                                                elem_id=f"preset-mujawwad{id_suffix}")
-                        with gr.Column(scale=1, min_width=0):
-                            btn_mur = gr.Button("Murattal (Normal)", size="sm", variant="primary",
-                                                elem_id=f"preset-murattal{id_suffix}")
-                        with gr.Column(scale=1, min_width=0):
-                            btn_fast = gr.Button("Hadr (Fast)", size="sm", variant="secondary",
-                                                 elem_id=f"preset-fast{id_suffix}")
-
-                    silence = gr.Slider(
-                        minimum=MIN_SILENCE_MIN, maximum=MIN_SILENCE_MAX,
-                        value=_default_silence, step=MIN_SILENCE_STEP,
-                        label="Min Silence Duration (ms)",
-                        info="Shorter = more segments. Decrease for reciters who have short pauses"
-                    )
-                    speech = gr.Slider(
-                        minimum=MIN_SPEECH_MIN, maximum=MIN_SPEECH_MAX,
-                        value=_default_speech, step=MIN_SPEECH_STEP,
-                        label="Min Speech Duration (ms)",
-                        info="Speech segments shorter than this are discarded. Increase to filter out false detections"
-                    )
-                    pad = gr.Slider(
-                        minimum=PAD_MIN, maximum=PAD_MAX,
-                        value=_default_pad, step=PAD_STEP,
-                        label="Padding (ms)",
-                        info="Extra audio kept before/after each segment to avoid clipping speech edges"
-                    )
-                    return silence, speech, pad, btn_muj, btn_mur, btn_fast
-
-                def _wire_presets(btn_muj, btn_mur, btn_fast, silence, speech, pad):
-                    """Wire preset button click handlers to sliders."""
-                    presets = {
-                        "mujawwad": PRESET_MUJAWWAD,
-                        "murattal": PRESET_MURATTAL,
-                        "fast": PRESET_FAST,
-                    }
-
-                    def apply_preset(name):
-                        s, sp, p = presets[name]
-                        return (
-                            s, sp, p,
-                            gr.update(variant="primary" if name == "mujawwad" else "secondary"),
-                            gr.update(variant="primary" if name == "murattal" else "secondary"),
-                            gr.update(variant="primary" if name == "fast" else "secondary"),
-                        )
-
-                    outputs = [silence, speech, pad, btn_muj, btn_mur, btn_fast]
-                    btn_muj.click(fn=lambda: apply_preset("mujawwad"), inputs=[], outputs=outputs, api_name=False)
-                    btn_mur.click(fn=lambda: apply_preset("murattal"), inputs=[], outputs=outputs, api_name=False)
-                    btn_fast.click(fn=lambda: apply_preset("fast"), inputs=[], outputs=outputs, api_name=False)
-
-                with gr.Accordion("Segmentation Settings", open=True):
-                    min_silence_slider, min_speech_slider, pad_slider, \
-                        preset_mujawwad, preset_murattal, preset_fast = _create_segmentation_settings()
-
-                _wire_presets(preset_mujawwad, preset_murattal, preset_fast,
-                              min_silence_slider, min_speech_slider, pad_slider)
-
-                # JSON download appears here after extraction
-                export_file = gr.File(label="📥 Download JSON", visible=True, interactive=False)
-
-            # Right column: Output
-            with gr.Column(scale=RIGHT_COLUMN_SCALE):
-                extract_btn = gr.Button("Extract Segments", variant="primary", size="lg")
-                with gr.Row(elem_id="action-btns-row"):
-                    resegment_toggle_btn = gr.Button(
-                        "Resegment with New Settings", variant="primary", size="lg", visible=False
-                    )
-                    retranscribe_btn = gr.Button(
-                        "Retranscribe with Large Model", variant="primary", size="lg", visible=False
-                    )
-                with gr.Row(elem_id="ts-row"):
-                    compute_ts_btn = gr.Button(
-                        "Compute Timestamps", variant="secondary", size="lg", interactive=False, visible=False
-                    )
-                    compute_ts_progress = gr.HTML(value="", visible=False)
-                    animate_all_html = gr.HTML(value="", visible=False)
-
-                with gr.Column(visible=False) as resegment_panel:
-                    gr.Markdown(
-                        "Uses cached data, skipping the heavy computation, "
-                        "so it's much faster. Useful if results are over-segmented "
-                        "or under-segmented"
-                    )
-                    rs_silence, rs_speech, rs_pad, \
-                        rs_btn_muj, rs_btn_mur, rs_btn_fast = _create_segmentation_settings(id_suffix="-rs")
-                    resegment_btn = gr.Button("Resegment", variant="primary", size="lg")
-
-                _wire_presets(rs_btn_muj, rs_btn_mur, rs_btn_fast,
-                              rs_silence, rs_speech, rs_pad)
-
-                output_html = gr.HTML(
-                    value='<div style="text-align: center; color: #666; padding: 60px;">Upload audio and click "Extract Segments" to begin</div>',
-                    elem_classes=["output-html"]
-                )
-                # Hidden JSON output for API consumers
-                output_json = gr.JSON(visible=False, label="JSON Output")
-
-        # State components for caching VAD data between runs
-        cached_speech_intervals = gr.State(value=None)
-        cached_is_complete = gr.State(value=None)
-        cached_audio = gr.State(value=None)
-        cached_sample_rate = gr.State(value=None)
-        cached_intervals = gr.State(value=None)      # cleaned (start,end) list from last run
-        cached_model_name = gr.State(value=None)     # model used in last run (for retranscribe label)
-        cached_segment_dir = gr.State(value=None)    # segment audio dir from last run (for MFA timestamps)
-        cached_log_row = gr.State(value=None)         # usage log row dict (mutated in-place before push)
-
-        # Event handlers
-        # D. Clear everything when new audio is uploaded/recorded
-        _empty_placeholder = '<div style="text-align: center; color: #666; padding: 60px;">Upload audio and click "Extract Segments" to begin</div>'
-        audio_input.change(
-            fn=lambda: (
-                _empty_placeholder, None, None,
-                None, None, None, None, None, None, None, None,
-                gr.update(visible=True),   # show extract_btn
-                gr.update(visible=False, interactive=False, variant="secondary"),  # hide+reset compute_ts_btn
-                gr.update(visible=False),  # hide compute_ts_progress
-                gr.update(visible=False),  # hide animate_all_html
-                gr.update(visible=False),  # hide resegment_toggle_btn
-                gr.update(visible=False),  # hide retranscribe_btn
-                gr.update(visible=False),  # hide resegment_panel
-            ),
-            inputs=[],
-            outputs=[
-                output_html, output_json, export_file,
-                cached_speech_intervals, cached_is_complete, cached_audio, cached_sample_rate,
-                cached_intervals, cached_model_name, cached_segment_dir, cached_log_row,
-                extract_btn, compute_ts_btn, compute_ts_progress, animate_all_html,
-                resegment_toggle_btn, retranscribe_btn, resegment_panel,
-            ],
-            api_name=False, show_progress="hidden"
-        )
-
-        # Example recitation buttons
-        btn_ex_112.click(fn=lambda: ("data/112.mp3", "GPU"), inputs=[], outputs=[audio_input, device_radio], api_name=False)
-        btn_ex_84.click(fn=lambda: ("data/84.mp3", "GPU"), inputs=[], outputs=[audio_input, device_radio], api_name=False)
-        btn_ex_7.click(fn=lambda: ("data/7.mp3", "GPU"), inputs=[], outputs=[audio_input, device_radio], api_name=False)
-        btn_ex_juz30.click(fn=lambda: ("data/Juz' 30.mp3", "GPU"), inputs=[], outputs=[audio_input, device_radio], api_name=False)
-
-        # A. Extract button click chain
-        extract_btn.click(
-            fn=process_audio,
-            inputs=[
-                audio_input,
-                min_silence_slider,
-                min_speech_slider,
-                pad_slider,
-                model_radio,
-                device_radio
-            ],
-            outputs=[
-                output_html, output_json,
-                cached_speech_intervals, cached_is_complete,
-                cached_audio, cached_sample_rate,
-                cached_intervals, cached_segment_dir,
-                cached_log_row,
-            ],
-            api_name=False, show_progress="minimal"
-        ).then(
-            fn=save_json_export,
-            inputs=[output_json],
-            outputs=[export_file],
-            show_progress="hidden"
-        ).then(
-            fn=lambda silence, speech, pad, model: (
-                gr.update(visible=False),  # hide extract_btn
-                gr.update(visible=True, interactive=True, variant="primary"),  # show+enable compute_ts_btn
-                gr.update(visible=True),   # show resegment_toggle_btn
-                gr.update(                 # show retranscribe_btn with opposite model label
-                    visible=True,
-                    value=f"Retranscribe with {'Large' if model == 'Base' else 'Base'} Model"
-                ),
-                silence, speech, pad,      # sync slider values to resegment panel
-                model,                     # store in cached_model_name
-            ),
-            inputs=[min_silence_slider, min_speech_slider, pad_slider, model_radio],
-            outputs=[extract_btn, compute_ts_btn, resegment_toggle_btn, retranscribe_btn,
-                     rs_silence, rs_speech, rs_pad, cached_model_name],
-            api_name=False, show_progress="hidden"
-        )
-
-        # A2. Compute Timestamps — MFA forced alignment adds data-start/data-end to word spans
-        compute_ts_btn.click(
-            fn=compute_mfa_timestamps,
-            inputs=[output_html, output_json, cached_segment_dir, cached_log_row],
-            outputs=[output_html, compute_ts_btn, animate_all_html, compute_ts_progress, output_json],
-            api_name=False, show_progress="hidden"
-        ).then(
-            fn=save_json_export,
-            inputs=[output_json],
-            outputs=[export_file],
-            show_progress="hidden"
-        )
-
-        # B. Toggle resegment panel visibility
-        _resegment_panel_visible = gr.State(value=False)
-
-        def _toggle_resegment_panel(currently_visible):
-            new_visible = not currently_visible
-            return gr.update(visible=new_visible), new_visible
-
-        resegment_toggle_btn.click(
-            fn=_toggle_resegment_panel,
-            inputs=[_resegment_panel_visible],
-            outputs=[resegment_panel, _resegment_panel_visible],
-            api_name=False, show_progress="hidden"
-        )
-
-        # C. Resegment button click chain
-        resegment_btn.click(
-            fn=resegment_audio,
-            inputs=[
-                cached_speech_intervals, cached_is_complete,
-                cached_audio, cached_sample_rate,
-                rs_silence, rs_speech, rs_pad,
-                model_radio, device_radio,
-                cached_log_row,
-            ],
-            outputs=[
-                output_html, output_json,
-                cached_speech_intervals, cached_is_complete,
-                cached_audio, cached_sample_rate,
-                cached_intervals, cached_segment_dir,
-                cached_log_row,
-            ],
-            api_name=False, show_progress="minimal"
-        ).then(
-            fn=lambda: (gr.update(visible=False), False),
-            inputs=[],
-            outputs=[resegment_panel, _resegment_panel_visible],
-            api_name=False, show_progress="hidden"
-        ).then(
-            fn=save_json_export,
-            inputs=[output_json],
-            outputs=[export_file],
-            show_progress="hidden"
-        ).then(
-            fn=lambda silence, speech, pad, model: (
-                silence, speech, pad,       # sync sliders back to main panel
-                model,                      # update cached_model_name to model_radio
-                gr.update(visible=True, interactive=True, variant="primary"),  # show+re-enable compute_ts_btn
-                gr.update(visible=False),   # hide animate_all_html (new segments, no timestamps)
-                gr.update(                  # re-show retranscribe with opposite label
-                    visible=True,
-                    value=f"Retranscribe with {'Large' if model == 'Base' else 'Base'} Model"
-                ),
-            ),
-            inputs=[rs_silence, rs_speech, rs_pad, model_radio],
-            outputs=[min_silence_slider, min_speech_slider, pad_slider,
-                     cached_model_name, compute_ts_btn, animate_all_html, retranscribe_btn],
-            api_name=False, show_progress="hidden"
-        )
-
-        # D. Retranscribe button click chain
-        retranscribe_btn.click(
-            fn=_retranscribe_wrapper,
-            inputs=[
-                cached_intervals, cached_audio, cached_sample_rate,
-                cached_speech_intervals, cached_is_complete,
-                cached_model_name, device_radio,
-                cached_log_row,
-                min_silence_slider, min_speech_slider, pad_slider,
-            ],
-            outputs=[
-                output_html, output_json,
-                cached_speech_intervals, cached_is_complete,
-                cached_audio, cached_sample_rate,
-                cached_intervals, cached_segment_dir,
-                cached_log_row,
-            ],
-            api_name=False, show_progress="minimal"
-        ).then(
-            fn=save_json_export,
-            inputs=[output_json],
-            outputs=[export_file],
-            show_progress="hidden"
-        ).then(
-            fn=lambda model_name: (
-                gr.update(visible=False),  # hide retranscribe_btn
-                gr.update(visible=True, interactive=True, variant="primary"),  # show+re-enable compute_ts_btn
-                gr.update(visible=False),   # hide animate_all_html (new segments, no timestamps)
-                "Large" if model_name == "Base" else "Base",  # update cached_model_name to opposite
-            ),
-            inputs=[cached_model_name],
-            outputs=[retranscribe_btn, compute_ts_btn, animate_all_html, cached_model_name],
-            api_name=False, show_progress="hidden"
-        )
-
-        # E. Animation granularity change handler — update JS global (client-side only)
-        anim_granularity_radio.change(
-            fn=None,
-            inputs=[anim_granularity_radio],
-            outputs=[],
-            api_name=False, show_progress="hidden",
-            js="""(g) => {
-                window.ANIM_GRANULARITY = g;
-                document.querySelectorAll('.segment-card').forEach(card => {
-                    if (card.querySelector('.animate-btn.active')) {
-                        if (g === 'Characters') {
-                            card.classList.add('anim-chars');
-                        } else {
-                            card.classList.remove('anim-chars');
-                        }
-                    }
-                });
-                // Also update mega card if Animate All is active
-                var mega = document.querySelector('.mega-card');
-                if (mega) {
-                    if (g === 'Characters') {
-                        mega.classList.add('anim-chars');
-                    } else {
-                        mega.classList.remove('anim-chars');
-                    }
-                }
-                // Update slider labels based on granularity
-                var unit = g === 'Characters' ? 'Characters' : 'Words';
-                var prevEl = document.getElementById('anim-window-prev');
-                if (prevEl) {
-                    var lbl = prevEl.querySelector('label span, label');
-                    if (lbl) lbl.textContent = 'Previous ' + unit;
-                }
-                var afterEl = document.getElementById('anim-window-after');
-                if (afterEl) {
-                    var lbl = afterEl.querySelector('label span, label');
-                    if (lbl) lbl.textContent = 'After ' + unit;
-                }
-                saveAnimSettings();
-            }"""
-        )
-
-        # F. Animation display mode change handler — apply preset values + toggle slider interactivity
-        def _on_mode_change(mode, verse_on, op_prev, op_after, w_prev, w_after):
-            preset = ANIM_PRESETS.get(mode)
-            is_custom = not preset
-            return (
-                gr.update(value=op_prev, interactive=is_custom),
-                gr.update(value=op_after, interactive=is_custom),
-                gr.update(value=w_prev, interactive=is_custom and not verse_on),
-                gr.update(value=w_after, interactive=is_custom and not verse_on),
-            )
-
-        anim_mode_radio.change(
-            fn=_on_mode_change,
-            inputs=[anim_mode_radio, anim_verse_checkbox,
-                    anim_opacity_prev_slider, anim_opacity_after_slider,
-                    anim_window_prev_slider, anim_window_after_slider],
-            outputs=[anim_opacity_prev_slider, anim_opacity_after_slider, anim_window_prev_slider, anim_window_after_slider],
-            api_name=False, show_progress="hidden",
-            js="""(mode, verseOn, opPrev, opAfter, wPrev, wAfter) => {
-                // Save current Custom values before switching away
-                var prevMode = window.ANIM_DISPLAY_MODE;
-                if (prevMode === 'Custom') {
-                    saveAnimSettings();
-                }
-                window.ANIM_DISPLAY_MODE = mode;
-                var preset = window.ANIM_PRESETS[mode];
-                if (preset) {
-                    window.ANIM_OPACITY_PREV = preset.prev_opacity;
-                    window.ANIM_OPACITY_AFTER = preset.after_opacity;
-                    window.ANIM_WINDOW_PREV = preset.prev_words;
-                    window.ANIM_WINDOW_AFTER = preset.after_words;
-                    opPrev = preset.prev_opacity;
-                    opAfter = preset.after_opacity;
-                    wPrev = preset.prev_words;
-                    wAfter = preset.after_words;
-                } else {
-                    // Entering Custom: restore saved Custom values from localStorage
-                    var s = loadAnimSettings();
-                    if (s && s.custom) {
-                        window.ANIM_OPACITY_PREV = s.custom.prevOpacity;
-                        window.ANIM_OPACITY_AFTER = s.custom.afterOpacity;
-                        window.ANIM_WINDOW_PREV = s.custom.prevWords;
-                        window.ANIM_WINDOW_AFTER = s.custom.afterWords;
-                        opPrev = s.custom.prevOpacity;
-                        opAfter = s.custom.afterOpacity;
-                        wPrev = s.custom.prevWords;
-                        wAfter = s.custom.afterWords;
-                    }
-                }
-                rebuildWindowGradient();
-                reapplyWindowNow();
-                updateWindowMaxLabel('anim-window-prev', window.ANIM_WINDOW_PREV, window.ANIM_WINDOW_PREV_MAX);
-                updateWindowMaxLabel('anim-window-after', window.ANIM_WINDOW_AFTER, window.ANIM_WINDOW_AFTER_MAX);
-                saveAnimSettings();
-                return [mode, verseOn, opPrev, opAfter, wPrev, wAfter];
-            }"""
-        )
-
-        # G. Before/After opacity slider change handlers
-        anim_opacity_prev_slider.change(
-            fn=None,
-            inputs=[anim_opacity_prev_slider],
-            outputs=[],
-            api_name=False, show_progress="hidden",
-            js="(val) => { window.ANIM_OPACITY_PREV = val; rebuildWindowGradient(); reapplyWindowNow(); window._windowSettingsVersion++; saveAnimSettings(); }"
-        )
-        anim_opacity_after_slider.change(
-            fn=None,
-            inputs=[anim_opacity_after_slider],
-            outputs=[],
-            api_name=False, show_progress="hidden",
-            js="(val) => { window.ANIM_OPACITY_AFTER = val; rebuildWindowGradient(); reapplyWindowNow(); window._windowSettingsVersion++; saveAnimSettings(); }"
-        )
-
-        # G2. Prev/After word count slider change handlers
-        anim_window_prev_slider.change(
-            fn=None,
-            inputs=[anim_window_prev_slider],
-            outputs=[],
-            api_name=False, show_progress="hidden",
-            js="""(val) => {
-                window.ANIM_WINDOW_PREV = val;
-                rebuildWindowGradient(); reapplyWindowNow();
-                updateWindowMaxLabel('anim-window-prev', val, window.ANIM_WINDOW_PREV_MAX);
-                window._windowSettingsVersion++;
-                saveAnimSettings();
-            }"""
-        )
-        anim_window_after_slider.change(
-            fn=None,
-            inputs=[anim_window_after_slider],
-            outputs=[],
-            api_name=False, show_progress="hidden",
-            js="""(val) => {
-                window.ANIM_WINDOW_AFTER = val;
-                rebuildWindowGradient(); reapplyWindowNow();
-                updateWindowMaxLabel('anim-window-after', val, window.ANIM_WINDOW_AFTER_MAX);
-                window._windowSettingsVersion++;
-                saveAnimSettings();
-            }"""
-        )
-
-        # G3. Verse checkbox change handler
-        def _on_verse_toggle(verse_on, mode):
-            if mode != "Custom":
-                return gr.update(), gr.update()
-            return (
-                gr.update(interactive=not verse_on),
-                gr.update(interactive=not verse_on),
-            )
-
-        anim_verse_checkbox.change(
-            fn=_on_verse_toggle,
-            inputs=[anim_verse_checkbox, anim_mode_radio],
-            outputs=[anim_window_prev_slider, anim_window_after_slider],
-            api_name=False, show_progress="hidden",
-            js="""(val, mode) => {
-                window.ANIM_VERSE_MODE = val;
-                reapplyWindowNow();
-                window._windowSettingsVersion++;
-                saveAnimSettings();
-                return [val, mode];
-            }"""
-        )
-
-        # H. Word spacing slider change handler
-        anim_word_spacing_slider.change(
-            fn=None, inputs=[anim_word_spacing_slider], outputs=[],
-            api_name=False, show_progress="hidden",
-            js="(val) => { var m=document.querySelector('.mega-card'); if(m) m.style.wordSpacing=val+'em'; saveAnimSettings(); }"
-        )
-
-        # J. Text size slider change handler
-        anim_text_size_slider.change(
-            fn=None, inputs=[anim_text_size_slider], outputs=[],
-            api_name=False, show_progress="hidden",
-            js="(val) => { var m=document.querySelector('.mega-card'); if(m) m.style.fontSize=val+'px'; saveAnimSettings(); }"
-        )
-
-        # K. Line spacing slider change handler
-        anim_line_spacing_slider.change(
-            fn=None, inputs=[anim_line_spacing_slider], outputs=[],
-            api_name=False, show_progress="hidden",
-            js="(val) => { var m=document.querySelector('.mega-card'); if(m) m.style.lineHeight=val; saveAnimSettings(); }"
-        )
-
-        # L. Active color picker change handler — update CSS variable (client-side only)
-        anim_color_picker.change(
-            fn=None,
-            inputs=[anim_color_picker],
-            outputs=[],
-            api_name=False, show_progress="hidden",
-            js="(val) => { document.documentElement.style.setProperty('--anim-word-color', val); saveAnimSettings(); }"
-        )
-
-
-
-
-        # M. Restore animation settings from localStorage on page load
-        def _restore_anim_settings(cached):
-            """Restore animation settings from localStorage via hidden JSON bridge."""
-            if not cached:
-                return (gr.update(),) * 11  # No saved settings — keep defaults
-            mode = cached.get("mode", ANIM_DISPLAY_MODE_DEFAULT)
-            preset = ANIM_PRESETS.get(mode)
-            is_custom = not preset
-            verse_on = bool(cached.get("verseOnly", False))
-            if preset:
-                op_prev = preset["prev_opacity"]
-                op_after = preset["after_opacity"]
-                w_prev = preset["prev_words"]
-                w_after = preset["after_words"]
-            elif cached.get("custom"):
-                c = cached["custom"]
-                op_prev = c.get("prevOpacity", ANIM_OPACITY_PREV_DEFAULT)
-                op_after = c.get("afterOpacity", ANIM_OPACITY_AFTER_DEFAULT)
-                w_prev = c.get("prevWords", ANIM_WINDOW_PREV_DEFAULT)
-                w_after = c.get("afterWords", ANIM_WINDOW_AFTER_DEFAULT)
-            else:
-                op_prev = ANIM_OPACITY_PREV_DEFAULT
-                op_after = ANIM_OPACITY_AFTER_DEFAULT
-                w_prev = ANIM_WINDOW_PREV_DEFAULT
-                w_after = ANIM_WINDOW_AFTER_DEFAULT
-            return (
-                gr.update(value=cached.get("granularity", ANIM_GRANULARITY_DEFAULT)),
-                gr.update(value=mode),
-                gr.update(value=verse_on),
-                gr.update(value=cached.get("color", ANIM_WORD_COLOR)),
-                gr.update(value=op_prev, interactive=is_custom),
-                gr.update(value=op_after, interactive=is_custom),
-                gr.update(value=w_prev, interactive=is_custom and not verse_on),
-                gr.update(value=w_after, interactive=is_custom and not verse_on),
-                gr.update(value=cached.get("wordSpacing", MEGA_WORD_SPACING_DEFAULT)),
-                gr.update(value=cached.get("textSize", MEGA_TEXT_SIZE_DEFAULT)),
-                gr.update(value=cached.get("lineSpacing", MEGA_LINE_SPACING_DEFAULT)),
-            )
-
-        app.load(
-            fn=_restore_anim_settings,
-            inputs=[anim_cached_settings],
-            outputs=[
-                anim_granularity_radio, anim_mode_radio, anim_verse_checkbox,
-                anim_color_picker,
-                anim_opacity_prev_slider, anim_opacity_after_slider,
-                anim_window_prev_slider, anim_window_after_slider,
-                anim_word_spacing_slider, anim_text_size_slider, anim_line_spacing_slider,
-            ],
-            show_progress="hidden",
-            js="""(ignored) => {
-                var s = loadAnimSettings();
-                if (s && s.color) document.documentElement.style.setProperty('--anim-word-color', s.color);
-                // Update window max labels and slider labels after Gradio renders
-                if (s) setTimeout(function() {
-                    updateWindowMaxLabel('anim-window-prev', window.ANIM_WINDOW_PREV, window.ANIM_WINDOW_PREV_MAX);
-                    updateWindowMaxLabel('anim-window-after', window.ANIM_WINDOW_AFTER, window.ANIM_WINDOW_AFTER_MAX);
-                    if (s.granularity === 'Characters') {
-                        var prevEl = document.getElementById('anim-window-prev');
-                        if (prevEl) { var lbl = prevEl.querySelector('label span, label'); if (lbl) lbl.textContent = 'Previous Characters'; }
-                        var afterEl = document.getElementById('anim-window-after');
-                        if (afterEl) { var lbl = afterEl.querySelector('label span, label'); if (lbl) lbl.textContent = 'After Characters'; }
-                    }
-                }, 200);
-                return s;
-            }"""
-        )
-
-        # Hidden API-only endpoint for JSON output
-        gr.Button(visible=False).click(
-            fn=process_audio_json,
-            inputs=[audio_input, min_silence_slider, min_speech_slider, pad_slider, model_radio, device_radio],
-            outputs=[output_json],
-            api_name="process_audio_json"
-        )
-
-    
-    return app
-
+from src.ui.interface import build_interface
 
 # =============================================================================
 # Module-level demo for Gradio hot-reload (`gradio app.py`)
@@ -3072,6 +27,15 @@ demo = build_interface()
 
 if __name__ == "__main__":
     import argparse
+    import numpy as np
+    import librosa
+    from config import PORT, IS_HF_SPACE, RESAMPLE_TYPE
+    from src.zero_gpu import ZERO_GPU_AVAILABLE
+    from src.segment_processor import load_segmenter, apply_aoti_compiled
+    from src.pipeline.process import test_aoti_compilation_gpu
+    from src.alignment.phoneme_asr import load_phoneme_asr
+    from src.alignment.ngram_index import get_ngram_index
+    from src.alignment.phoneme_matcher_cache import preload_all_chapters
 
     parser = argparse.ArgumentParser()
     parser.add_argument("--share", action="store_true", help="Create public link")
@@ -3084,10 +48,6 @@ if __name__ == "__main__":
     print(f"Launching Gradio on port {port}")
 
     # Preload models and caches at startup so first request is fast
-    from src.segment_processor import load_segmenter
-    from src.alignment.phoneme_asr import load_phoneme_asr
-    from src.alignment.ngram_index import get_ngram_index
-    from src.alignment.phoneme_matcher_cache import preload_all_chapters
     print("Preloading models...")
     load_segmenter()
     load_phoneme_asr("Base")
@@ -3099,8 +59,8 @@ if __name__ == "__main__":
     print("Caches preloaded.")
 
     # Warm up soxr resampler so first request doesn't pay initialization cost
-    import librosa
-    _dummy = librosa.resample(np.zeros(1600, dtype=np.float32), orig_sr=44100, target_sr=16000, res_type=RESAMPLE_TYPE)
+    _dummy = librosa.resample(np.zeros(1600, dtype=np.float32),
+                              orig_sr=44100, target_sr=16000, res_type=RESAMPLE_TYPE)
     del _dummy
     print("Resampler warmed up.")