diff --git "a/src/ui/interface.py" "b/src/ui/interface.py"
new file mode 100644--- /dev/null
+++ "b/src/ui/interface.py"
@@ -0,0 +1,3016 @@
+"""Gradio UI — layout, CSS, JS animation system, and event handlers."""
+import json
+from pathlib import Path
+
+import gradio as gr
+
+from config import (
+    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,
+    QURAN_TEXT_SIZE_PX, ARABIC_WORD_SPACING,
+    DELETE_CACHE_FREQUENCY, DELETE_CACHE_AGE,
+    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,
+    LEFT_COLUMN_SCALE, RIGHT_COLUMN_SCALE,
+)
+from data.font_data import DIGITAL_KHATT_FONT_B64, SURAH_NAME_FONT_B64
+from src.pipeline.process import (
+    process_audio, resegment_audio,
+    _retranscribe_wrapper, process_audio_json, save_json_export,
+)
+from src.mfa.timestamps import compute_mfa_timestamps
+
+# Load surah name ligature map
+with open(Path(__file__).parent.parent.parent / "data" / "ligatures.json") as _f:
+    _SURAH_LIGATURES = json.load(_f)
+
+
+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