diff --git a/campaign.html b/campaign.html
index d4140bd..56ac968 100644
--- a/campaign.html
+++ b/campaign.html
@@ -1311,8 +1311,8 @@
     <!-- Main Content -->
     <div class="main-content">
 
-        <!-- Training Academy Setup Screen -->
-        <div class="academy-setup" id="academy-setup">
+        <!-- Training Academy Setup Screen (Hidden - no longer needed) -->
+        <div class="academy-setup" id="academy-setup" style="display: none;">
             <div class="setup-container">
                 <div class="setup-title">
                     <h2 style="text-align: center; color: var(--color-primary); font-family: 'Audiowide', sans-serif; font-size: 28px; margin: 20px 0; text-shadow: var(--shadow-glow-primary);">🎓 Training Academy Setup</h2>
@@ -1365,8 +1365,8 @@
             </div>
         </div>
 
-        <!-- Level Select Screen (Hidden initially) -->
-        <div id="levelSelectScreen" class="level-select-screen" style="display: none;">
+        <!-- Level Select Screen (Now the opening screen) -->
+        <div id="levelSelectScreen" class="level-select-screen" style="display: block;">
             <div class="level-select-header">
                 <h2>🎯 Campaign Mode - Select Level</h2>
                 <p class="progress-subtitle">Progress through 30 levels across 6 story arcs</p>
@@ -1392,14 +1392,34 @@
         <!-- Game Interface (Hidden initially) -->
         <div id="gameInterface" style="display: none;">
             <!-- Feature Controls Panel -->
-            <div id="featuresPanel" class="features-panel" style="display: none;">
+            <div id="featuresPanel" class="features-panel">
                 <button id="toggleFeaturesBtn" class="toggle-features-btn" onclick="toggleFeaturesPanel()">
-                    ⚙️ Features
+                    ⚙️ Settings
                 </button>
                 <div id="featuresList" class="features-list" style="display: none;">
-                    <h4>Unlocked Features</h4>
-                    <div id="featuresContent">
-                        <!-- Features will be injected here -->
+                    <h4>Audio & Display Settings</h4>
+                    <div id="featuresContent" style="padding: 15px;">
+                        <div style="margin-bottom: 20px;">
+                            <label style="display: block; color: var(--color-primary); font-weight: bold; margin-bottom: 5px;">
+                                🔊 Ambient Audio Volume
+                            </label>
+                            <input type="range" id="ambient-volume-slider" min="0" max="100" value="50" 
+                                   style="width: 100%; margin-bottom: 5px;">
+                            <div style="text-align: center; color: var(--text-secondary); font-size: 0.9em;">
+                                <span id="ambient-volume-value">50</span>%
+                            </div>
+                        </div>
+                        
+                        <div style="margin-bottom: 20px;">
+                            <label style="display: block; color: var(--color-primary); font-weight: bold; margin-bottom: 5px;">
+                                💬 Caption Size
+                            </label>
+                            <input type="range" id="caption-size-slider" min="50" max="200" value="100" 
+                                   style="width: 100%; margin-bottom: 5px;">
+                            <div style="text-align: center; color: var(--text-secondary); font-size: 0.9em;">
+                                <span id="caption-size-value">100</span>%
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -1488,6 +1508,17 @@
     <!-- Note: main.js is Electron-specific and not needed in browser -->
 
     <script>
+        // 🔍 DEBUG: Monitor ALL localStorage writes to webGame-data
+        const originalSetItem = localStorage.setItem;
+        localStorage.setItem = function(key, value) {
+            if (key === 'webGame-data') {
+                const parsed = JSON.parse(value);
+                console.log('🔍 LOCALSTORAGE WRITE to webGame-data - completedLevels:', parsed.academyProgress?.completedLevels);
+                console.trace('Write stack trace:');
+            }
+            return originalSetItem.apply(this, arguments);
+        };
+        
         // Training Academy Global Variables
         let trainingPhotoLibrary = [];
         let selectedTrainingMode = null;
@@ -1499,7 +1530,7 @@
         
         // TTS Variables
         let voiceManager = null;
-        let ttsEnabled = true;
+        let ttsEnabled = false;
         let currentUtterance = null;
         let ttsQueue = [];
 
@@ -1830,16 +1861,21 @@
                     console.error('⚠️ Failed to load captured photos from file system:', error);
                 }
                 
-                document.getElementById('photoLibraryStatus').innerHTML = 
-                    `<span style="color: var(--color-success);">✅ ${trainingPhotoLibrary.length} photos available</span>`;
+                // Update status if element exists (setup screen may be hidden)
+                const statusEl = document.getElementById('photoLibraryStatus');
+                if (statusEl) {
+                    statusEl.innerHTML = 
+                        `<span style="color: var(--color-success);">✅ ${trainingPhotoLibrary.length} photos available</span>`;
+                }
                 
                 // Show gallery button if there are photos
                 const totalPhotoCount = trainingPhotoLibrary.length;
-                if (totalPhotoCount > 0) {
-                    document.getElementById('view-gallery-btn').style.display = 'inline-block';
+                const galleryBtn = document.getElementById('view-gallery-btn');
+                if (totalPhotoCount > 0 && galleryBtn) {
+                    galleryBtn.style.display = 'inline-block';
                     
                     // Update button text to indicate total photos
-                    document.getElementById('view-gallery-btn').innerHTML = 
+                    galleryBtn.innerHTML = 
                         `📸 View Gallery (${totalPhotoCount} photos)`;
                         
                     console.log('📸 Gallery button updated. Total photos:', totalPhotoCount);
@@ -1848,8 +1884,11 @@
 
             } catch (error) {
                 console.error('❌ Error initializing photo library:', error);
-                document.getElementById('photoLibraryStatus').innerHTML = 
-                    '<span style="color: var(--color-danger);">❌ Error loading photo library</span>';
+                const statusEl = document.getElementById('photoLibraryStatus');
+                if (statusEl) {
+                    statusEl.innerHTML = 
+                        '<span style="color: var(--color-danger);">❌ Error loading photo library</span>';
+                }
             }
         }
 
@@ -1971,7 +2010,7 @@
         // Load Academy Settings from localStorage
         function loadAcademySettings() {
             const defaultSettings = {
-                enableTTS: true,
+                enableTTS: false,
                 ttsVolume: 80,
                 selectedMode: null
             };
@@ -2029,11 +2068,11 @@
         function showLevelSelectScreen() {
             console.log('🎯 Showing level select screen');
             
-            // Hide setup screen
-            const setupScreen = document.getElementById('academy-setup');
-            if (setupScreen) {
-                setupScreen.style.display = 'none';
-            }
+            // Don't reload from localStorage - just use the in-memory window.gameData which is already up-to-date
+            console.log('📊 Using in-memory academyProgress:', {
+                currentLevel: window.gameData.academyProgress.currentLevel,
+                completedLevels: window.gameData.academyProgress.completedLevels
+            });
             
             // Show level select screen
             const levelSelectScreen = document.getElementById('levelSelectScreen');
@@ -2043,15 +2082,6 @@
             
             // Populate level grid
             populateLevelGrid();
-            
-            // Setup back button
-            const backBtn = document.getElementById('back-to-setup-btn');
-            if (backBtn) {
-                backBtn.addEventListener('click', () => {
-                    levelSelectScreen.style.display = 'none';
-                    setupScreen.style.display = 'block';
-                });
-            }
         }
         
         // Populate Level Grid
@@ -2080,6 +2110,17 @@
                 completed: progress.completedLevels || Object.keys(progress.completed || {})
             });
             
+            // 🔍 Debug: Check what's in localStorage
+            const storedData = localStorage.getItem('webGame-data');
+            if (storedData) {
+                try {
+                    const parsed = JSON.parse(storedData);
+                    console.log('🔍 localStorage completedLevels:', parsed.academyProgress?.completedLevels);
+                } catch (e) {
+                    console.error('Failed to parse localStorage:', e);
+                }
+            }
+            
             // Update progress bar
             const completedCount = progress.completedLevels 
                 ? progress.completedLevels.length 
@@ -2173,10 +2214,14 @@
         function startLevel(scenario, levelNum) {
             console.log(`🎓 Starting Level ${levelNum}: ${scenario.name}`);
             
+            // Set training mode for campaign
+            selectedTrainingMode = 'training-academy';
+            
             // Store selected level and track start time
             window.selectedAcademyLevel = scenario;
             window.selectedLevelNumber = levelNum;
             window.levelStartTime = Date.now();
+            console.log(`📌 SET window.selectedLevelNumber = ${levelNum} at startLevel()`);
             
             // Hide level select screen
             const levelSelectScreen = document.getElementById('levelSelectScreen');
@@ -2211,6 +2256,57 @@
                 currentScenarioTask.cleanup();
             }
             
+            // Clean up all PiP overlays (dual-video, webcam)
+            console.log('🧹 Cleaning up PiP overlays');
+            const pipOverlays = document.querySelectorAll('.dual-video-pip-overlay, .pip-webcam-container');
+            pipOverlays.forEach(overlay => {
+                const video = overlay.querySelector('video');
+                if (video) {
+                    if (video.srcObject) {
+                        const tracks = video.srcObject.getTracks();
+                        tracks.forEach(track => track.stop());
+                    }
+                    video.pause();
+                    video.src = '';
+                }
+                overlay.remove();
+            });
+            
+            // Clean up webcam streams
+            console.log('🧹 Cleaning up webcam streams');
+            const allVideos = document.querySelectorAll('video');
+            allVideos.forEach(video => {
+                if (video.srcObject) {
+                    const tracks = video.srcObject.getTracks();
+                    tracks.forEach(track => track.stop());
+                    video.srcObject = null;
+                }
+            });
+            
+            // Clean up videoPlayerManager overlay reference
+            if (window.videoPlayerManager && window.videoPlayerManager.overlayPlayer) {
+                console.log('🧹 Clearing videoPlayerManager overlay reference');
+                window.videoPlayerManager.overlayPlayer = null;
+            }
+            
+            // Hide and reset sidebar countdown timer
+            const countdownWrapper = document.getElementById('sidebar-countdown-timer');
+            if (countdownWrapper) {
+                countdownWrapper.style.display = 'none';
+            }
+            const countdownDisplay = document.getElementById('sidebar-countdown-display');
+            if (countdownDisplay) {
+                countdownDisplay.textContent = '00:00';
+            }
+            
+            // Clean up ambient audio elements
+            console.log('🧹 Cleaning up ambient audio');
+            const ambientAudios = document.querySelectorAll('audio[data-ambient="true"]');
+            ambientAudios.forEach(audio => {
+                audio.pause();
+                audio.remove();
+            });
+            
             // Clear any active training state
             currentScenarioTask = null;
             currentInteractiveTask = null;
@@ -2313,14 +2409,83 @@
             const featuresList = document.getElementById('featuresList');
             if (featuresList.style.display === 'none') {
                 featuresList.style.display = 'block';
-                updateFeaturesPanel();
             } else {
                 featuresList.style.display = 'none';
             }
         }
         
+        // Initialize settings sliders
+        function initializeSettingsSliders() {
+            // Ambient volume slider
+            const ambientVolumeSlider = document.getElementById('ambient-volume-slider');
+            const ambientVolumeValue = document.getElementById('ambient-volume-value');
+            
+            if (ambientVolumeSlider) {
+                // Load saved value
+                const savedVolume = localStorage.getItem('ambient-audio-volume');
+                if (savedVolume !== null) {
+                    ambientVolumeSlider.value = savedVolume;
+                    ambientVolumeValue.textContent = savedVolume;
+                }
+                
+                // Set global variable
+                window.ambientAudioVolume = parseInt(ambientVolumeSlider.value) / 100;
+                
+                ambientVolumeSlider.addEventListener('input', (e) => {
+                    const value = e.target.value;
+                    ambientVolumeValue.textContent = value;
+                    window.ambientAudioVolume = parseInt(value) / 100;
+                    localStorage.setItem('ambient-audio-volume', value);
+                    
+                    // Update any currently playing ambient audio
+                    const ambientAudio = document.querySelector('audio[data-ambient="true"]');
+                    if (ambientAudio) {
+                        ambientAudio.volume = window.ambientAudioVolume;
+                    }
+                });
+            }
+            
+            // Caption size slider
+            const captionSizeSlider = document.getElementById('caption-size-slider');
+            const captionSizeValue = document.getElementById('caption-size-value');
+            
+            if (captionSizeSlider) {
+                // Load saved value
+                const savedSize = localStorage.getItem('caption-font-size');
+                if (savedSize !== null) {
+                    captionSizeSlider.value = savedSize;
+                    captionSizeValue.textContent = savedSize;
+                }
+                
+                // Set global variable
+                window.captionFontSizeMultiplier = parseInt(captionSizeSlider.value) / 100;
+                
+                captionSizeSlider.addEventListener('input', (e) => {
+                    const value = e.target.value;
+                    captionSizeValue.textContent = value;
+                    window.captionFontSizeMultiplier = parseInt(value) / 100;
+                    localStorage.setItem('caption-font-size', value);
+                    
+                    // Update any visible captions
+                    const captions = document.querySelectorAll('[id*="caption"]');
+                    captions.forEach(caption => {
+                        if (caption.style.fontSize) {
+                            const baseSize = parseFloat(caption.dataset.baseSize || '3');
+                            caption.style.fontSize = (baseSize * window.captionFontSizeMultiplier) + 'em';
+                        }
+                    });
+                });
+            }
+        }
+        
+        // Initialize sliders when page loads
+        document.addEventListener('DOMContentLoaded', initializeSettingsSliders);
+        
         // Update the features panel with unlocked features
         function updateFeaturesPanel() {
+            // Disabled - features panel now used for settings sliders
+            return;
+            
             const featuresContent = document.getElementById('featuresContent');
             if (!featuresContent || !window.campaignManager) return;
             
@@ -2513,12 +2678,60 @@
         
         // Start Training Session (Updated to use setup screen)
         function startTrainingSession() {
-            if (!selectedTrainingMode) {
-                alert('Please select a training mode first!');
-                return;
+            console.log(`🚀 Starting campaign session: ${selectedTrainingMode}`);
+            
+            // COMPREHENSIVE CLEANUP BEFORE STARTING NEW LEVEL
+            console.log('🧹 Pre-level cleanup - ensuring clean slate');
+            
+            // Clean up any lingering PiP overlays
+            const pipOverlays = document.querySelectorAll('.dual-video-pip-overlay, .pip-webcam-container');
+            pipOverlays.forEach(overlay => {
+                const video = overlay.querySelector('video');
+                if (video) {
+                    if (video.srcObject) {
+                        const tracks = video.srcObject.getTracks();
+                        tracks.forEach(track => track.stop());
+                    }
+                    video.pause();
+                    video.src = '';
+                }
+                overlay.remove();
+            });
+            
+            // Clean up any webcam streams
+            const allVideos = document.querySelectorAll('video');
+            allVideos.forEach(video => {
+                if (video.srcObject) {
+                    const tracks = video.srcObject.getTracks();
+                    tracks.forEach(track => track.stop());
+                    video.srcObject = null;
+                }
+            });
+            
+            // Clear videoPlayerManager overlay reference
+            if (window.videoPlayerManager && window.videoPlayerManager.overlayPlayer) {
+                window.videoPlayerManager.overlayPlayer = null;
             }
             
-            console.log(`🚀 Starting campaign session: ${selectedTrainingMode}`);
+            // Clean up ambient audio
+            const ambientAudios = document.querySelectorAll('audio[data-ambient="true"]');
+            ambientAudios.forEach(audio => {
+                audio.pause();
+                audio.remove();
+            });
+            
+            // Reset sidebar countdown timer visibility
+            const countdownWrapper = document.getElementById('sidebar-countdown-timer');
+            if (countdownWrapper) {
+                countdownWrapper.style.display = 'none';
+            }
+            
+            // Show sidebar (game stats)
+            const sidebar = document.getElementById('campaign-sidebar');
+            if (sidebar) {
+                sidebar.style.display = 'block';
+                console.log('📊 Sidebar stats shown for new level');
+            }
             
             // Apply settings before starting
             applyAcademySettings();
@@ -2770,6 +2983,13 @@
                     </div>
                 `;
                 
+                // Ensure sidebar is visible after container setup
+                const setupSidebar = document.getElementById('campaign-sidebar');
+                if (setupSidebar) {
+                    setupSidebar.style.display = 'block';
+                    console.log('📊 Sidebar shown after container setup');
+                }
+                
                 // Initialize the game properly using the existing game system
                 setTimeout(() => {
                     if (window.game) {
@@ -3023,6 +3243,13 @@
                                         </div>
                                     `;
                                     
+                                    // Ensure sidebar stays visible after container update
+                                    const displaySidebar = document.getElementById('campaign-sidebar');
+                                    if (displaySidebar) {
+                                        displaySidebar.style.display = 'block';
+                                        console.log('📊 Sidebar enforced after task display');
+                                    }
+                                    
                                     // TTS narration for the task
                                     setTimeout(() => {
                                         let narrationText = `New training task. ${task.text}`;
@@ -3096,6 +3323,14 @@
                                 fallbackContainer.appendChild(tempDiv);
                                 console.log('✅ Fallback task display created and added to DOM');
                                 console.log('🎯 Display element:', tempDiv);
+                                
+                                // Ensure sidebar stays visible after fallback display
+                                const fallbackDisplaySidebar = document.getElementById('campaign-sidebar');
+                                if (fallbackDisplaySidebar) {
+                                    fallbackDisplaySidebar.style.display = 'block';
+                                    console.log('📊 Sidebar enforced after fallback display');
+                                }
+                                
                                 return;
                             }
                             
@@ -3143,6 +3378,13 @@
                                 window.game.gameState.currentTask = trainingTasks[0]; // CRITICAL: Set gameState.currentTask for scenario progression
                                 window.game.displayCurrentTask();
                                 console.log('✅ Training task loaded successfully');
+                                
+                                // Ensure sidebar is visible after task loads
+                                const taskSidebar = document.getElementById('campaign-sidebar');
+                                if (taskSidebar) {
+                                    taskSidebar.style.display = 'block';
+                                    console.log('📊 Sidebar shown after task load');
+                                }
                             } else {
                                 throw new Error('No training tasks available to load');
                             }
@@ -3155,6 +3397,13 @@
                             try {
                                 window.game.startGame();
                                 console.log('✅ Standard game start succeeded');
+                                
+                                // Ensure sidebar is visible
+                                const fallbackSidebar = document.getElementById('campaign-sidebar');
+                                if (fallbackSidebar) {
+                                    fallbackSidebar.style.display = 'block';
+                                    console.log('📊 Sidebar shown after fallback start');
+                                }
                             } catch (e2) {
                                 console.error('❌ Standard game start also failed:', e2);
                                 alert('Error: Unable to start training session. Please refresh and try again.');
@@ -3236,6 +3485,14 @@
                     const nextTask = trainingTasks[nextIndex];
                     console.log('📋 Loading next task:', nextTask.id);
                     
+                    // Update selected level number if in training academy mode
+                    if (selectedTrainingMode === 'training-academy' && nextTask.level) {
+                        window.selectedLevelNumber = nextTask.level;
+                        window.levelStartTime = Date.now();
+                        console.log(`🎓 Updated selected level to: ${nextTask.level}`);
+                        console.log(`📌 SET window.selectedLevelNumber = ${nextTask.level} at loadNextTrainingTask()`);
+                    }
+                    
                     // Set as current task in both locations
                     window.game.gameState.currentTask = nextTask;
                     window.game.currentTask = nextTask;
@@ -3776,6 +4033,12 @@
                 return;
             }
             
+            // Ensure sidebar (game stats) is visible for all steps
+            const stepSidebar = document.getElementById('campaign-sidebar');
+            if (stepSidebar) {
+                stepSidebar.style.display = 'block';
+            }
+            
             const scenario = currentScenarioTask.interactiveData;
             const step = scenario.steps[stepId];
             
@@ -4079,13 +4342,25 @@
                 }, 100); // Small delay to ensure DOM is ready
             } else if (step.type === 'completion') {
                 // Save Academy progress if this was a level using the campaignManager
+                console.log('🏁 COMPLETION STEP TRIGGERED');
+                console.log('🔍 selectedTrainingMode:', selectedTrainingMode);
+                console.log('🔍 window.selectedLevelNumber:', window.selectedLevelNumber);
+                console.log('🔍 window.campaignManager exists:', !!window.campaignManager);
+                
                 let completionResult = null;
                 if (selectedTrainingMode === 'training-academy' && window.selectedLevelNumber && window.campaignManager) {
                     const levelNum = window.selectedLevelNumber;
+                    console.log(`🎓 Calling campaignManager.completeLevel(${levelNum})`);
                     completionResult = window.campaignManager.completeLevel(levelNum, {
                         duration: Date.now() - (window.levelStartTime || Date.now())
                     });
                     console.log(`✅ Level ${levelNum} completed:`, completionResult);
+                } else {
+                    console.warn('⚠️ Skipping campaign completion - conditions not met:', {
+                        isTrainingAcademy: selectedTrainingMode === 'training-academy',
+                        hasLevelNumber: !!window.selectedLevelNumber,
+                        hasCampaignManager: !!window.campaignManager
+                    });
                 }
                 
                 // Build features unlocked message
@@ -4308,6 +4583,13 @@
             
             container.innerHTML = stepHtml;
             
+            // Ensure sidebar remains visible after container update
+            const containerSidebar = document.getElementById('campaign-sidebar');
+            if (containerSidebar) {
+                containerSidebar.style.display = 'block';
+                console.log('📊 Sidebar visibility enforced after container update');
+            }
+            
             // TTS narration for scenario steps
             setTimeout(() => {
                 if (step.type === 'choice') {
@@ -5093,12 +5375,20 @@
                 // Set up training mode selection
                 setupTrainingModeSelection();
                 
-                // Initialize setup screen
+                // Initialize setup screen (still needed for settings, but hidden)
                 initializeAcademySetupScreen();
                 
+                // Load TTS setting from localStorage
+                const savedSettings = loadAcademySettings();
+                ttsEnabled = savedSettings.enableTTS;
+                console.log(`🔊 TTS initialized: ${ttsEnabled ? 'enabled' : 'disabled'}`);
+                
                 // Initialize photo library
                 await initializePhotoLibrary();
                 
+                // Show level select screen immediately (skip setup screen)
+                showLevelSelectScreen();
+                
                 console.log('✅ Campaign Mode ready');
                 
             } catch (error) {
@@ -6038,47 +6328,44 @@
             devModeEnabled = !devModeEnabled;
             
             if (devModeEnabled) {
-                // Unlock all levels
-                if (window.campaignManager && window.gameData.academyProgress) {
-                    window.gameData.academyProgress.highestUnlockedLevel = 30;
-                    window.campaignManager.saveProgress();
-                    console.log('🔓 DEV MODE ENABLED - All 30 levels unlocked!');
-                    
-                    // Refresh level grid if it's visible
-                    const levelGrid = document.getElementById('level-grid');
-                    if (levelGrid && levelGrid.offsetParent !== null) {
-                        populateLevelGrid();
-                    }
-                    
-                    // Show flash message
-                    if (window.flashMessageManager) {
-                        window.flashMessageManager.showMessage('🔧 DEV MODE: All levels unlocked!', 'success');
-                    }
-                } else {
-                    console.warn('⚠️ Campaign manager not initialized yet');
+                console.log('🔓 DEV MODE ENABLED - All 30 levels unlocked!');
+                
+                // Refresh level grid if it's visible
+                const levelGrid = document.getElementById('level-grid');
+                if (levelGrid && levelGrid.offsetParent !== null) {
+                    populateLevelGrid();
+                }
+                
+                // Show flash message
+                if (window.flashMessageManager) {
+                    window.flashMessageManager.showMessage('🔧 DEV MODE: All levels unlocked!', 'success');
                 }
             } else {
-                // Disable dev mode - reset to actual progress
-                if (window.campaignManager && window.gameData.academyProgress) {
-                    const completedLevels = window.gameData.academyProgress.completedLevels || [];
-                    const highestCompleted = completedLevels.length > 0 ? Math.max(...completedLevels) : 0;
-                    window.gameData.academyProgress.highestUnlockedLevel = Math.min(highestCompleted + 1, 30);
-                    window.campaignManager.saveProgress();
-                    console.log('🔒 DEV MODE DISABLED - Progress restored to actual completion');
-                    
-                    // Refresh level grid if it's visible
-                    const levelGrid = document.getElementById('level-grid');
-                    if (levelGrid && levelGrid.offsetParent !== null) {
-                        populateLevelGrid();
-                    }
-                    
-                    // Show flash message
-                    if (window.flashMessageManager) {
-                        window.flashMessageManager.showMessage('🔒 Dev mode disabled', 'info');
-                    }
+                console.log('🔒 DEV MODE DISABLED - Normal progression restored');
+                
+                // Refresh level grid if it's visible
+                const levelGrid = document.getElementById('level-grid');
+                if (levelGrid && levelGrid.offsetParent !== null) {
+                    populateLevelGrid();
+                }
+                
+                // Show flash message
+                if (window.flashMessageManager) {
+                    window.flashMessageManager.showMessage('🔒 Dev mode disabled', 'info');
                 }
             }
             
+            // Toggle visibility of all skip-task-btn buttons
+            const skipButtons = document.querySelectorAll('.skip-task-btn');
+            skipButtons.forEach(btn => {
+                btn.style.display = devModeEnabled ? 'inline-block' : 'none';
+            });
+            
+            return devModeEnabled;
+        };
+        
+        // Getter function for dev mode state
+        window.isDevMode = function() {
             return devModeEnabled;
         };
         
diff --git a/docs/rhythm-timeline/README.md b/docs/rhythm-timeline/README.md
new file mode 100644
index 0000000..744907e
--- /dev/null
+++ b/docs/rhythm-timeline/README.md
@@ -0,0 +1,268 @@
+# Rhythm Timeline Implementation Reference
+
+## Overview
+A Canvas-based scrolling beat timeline for the rhythm-training interactive task in Level 16. Displays dots scrolling horizontally across a line that pulse when crossing a center "HIT" marker.
+
+## Visual Design
+
+### Canvas Setup
+- **Element**: `<canvas id="beat-timeline" width="600" height="120">`
+- **Styling**: 2px solid border, 10px border-radius, purple gradient background
+- **Context**: 2D rendering context
+
+### Visual Elements
+1. **Horizontal Line**: Runs across middle (y = height/2), purple semi-transparent
+2. **Center HIT Marker**: Vertical white line at center (x = width/2), ±40px tall, with "HIT" text above
+3. **Beat Dots**: Purple circles (6px radius) scrolling from right to left
+4. **Pulse Effect**: When dot crosses center (within 5px), it grows 1.8x and glows bright purple
+
+## Tempo Sequence
+
+### 5-Minute Cycle (300 seconds)
+The rhythm follows a hardcoded 7-segment tempo progression:
+
+```javascript
+const tempoSegments = [
+    { tempo: 60, duration: 42.86 },   // seconds per segment
+    { tempo: 120, duration: 42.86 },
+    { tempo: 150, duration: 42.86 },
+    { tempo: 60, duration: 42.86 },
+    { tempo: 15, duration: 42.86 },
+    { tempo: 200, duration: 42.86 },
+    { tempo: 240, duration: 42.86 }
+];
+```
+
+Each segment is ~42.86 seconds (300s ÷ 7 segments).
+
+## Pre-Generation System
+
+### Why Pre-Generate?
+To avoid dynamic calculation glitches and maintain smooth constant-speed scrolling regardless of tempo changes.
+
+### Beat Position Calculation
+```javascript
+const beatPositions = [];
+const scrollSpeed = 50; // pixels per second (constant)
+
+let position = 0;
+for (const segment of tempoSegments) {
+    const beatsInSegment = Math.floor((segment.duration / 60) * segment.tempo);
+    const pixelsPerBeat = scrollSpeed * (60 / segment.tempo);
+    
+    for (let i = 0; i < beatsInSegment; i++) {
+        beatPositions.push({
+            position: position,
+            tempo: segment.tempo,
+            isDownbeat: (beatPositions.length % 4) === 0
+        });
+        position += pixelsPerBeat;
+    }
+}
+const totalDistance = position; // Total pixels for entire 5-min cycle
+```
+
+### Key Principle
+- **Scroll speed is constant** (50 px/s)
+- **Beat spacing varies** based on tempo
+- Higher tempo = dots closer together (more beats in same space)
+- Lower tempo = dots farther apart (fewer beats in same space)
+
+Example:
+- 60 BPM: `pixelsPerBeat = 50 * (60/60) = 50px`
+- 120 BPM: `pixelsPerBeat = 50 * (60/120) = 25px` (twice as many dots)
+- 240 BPM: `pixelsPerBeat = 50 * (60/240) = 12.5px` (four times as many)
+
+## Animation System
+
+### Core Variables
+```javascript
+let scrollOffset = 0;           // Accumulated scroll distance
+let animationStartTime = null;  // When animation started
+let nextBeatTime = null;        // Timestamp for next audio click
+let lastFrameTime = null;       // Previous frame timestamp for delta
+```
+
+### Animation Loop (60fps via requestAnimationFrame)
+```javascript
+const animateTimeline = () => {
+    const now = Date.now();
+    
+    // Delta-time based scrolling (smooth regardless of framerate)
+    if (lastFrameTime) {
+        const deltaTime = (now - lastFrameTime) / 1000; // seconds
+        scrollOffset += scrollSpeed * deltaTime;
+    }
+    lastFrameTime = now;
+    
+    // Trigger beat audio when time reached
+    if (now >= nextBeatTime) {
+        playBeat();
+        nextBeatTime = now + beatDuration;
+    }
+    
+    drawTimeline();
+    animationFrameId = requestAnimationFrame(animateTimeline);
+};
+```
+
+### Drawing Loop
+```javascript
+const drawTimeline = () => {
+    // Use modulo for seamless looping
+    const currentOffset = scrollOffset % totalDistance;
+    
+    for (let i = 0; i < beatPositions.length; i++) {
+        const beat = beatPositions[i];
+        let x = centerX + beat.position - currentOffset;
+        
+        // Handle wrapping when dot scrolls off left edge
+        if (x < -100) x += totalDistance;
+        if (x > width + 100) continue;
+        
+        // Calculate pulse effect
+        const distanceFromCenter = Math.abs(x - centerX);
+        const isPulsing = distanceFromCenter < 5;
+        
+        const dotRadius = 6;
+        const pulseRadius = isPulsing ? dotRadius * 1.8 : dotRadius;
+        
+        // Draw dot with shadow when pulsing
+        ctx.beginPath();
+        ctx.arc(x, height / 2, pulseRadius, 0, Math.PI * 2);
+        
+        if (isPulsing) {
+            ctx.fillStyle = 'rgba(138, 43, 226, 1)';
+            ctx.shadowBlur = 15;
+            ctx.shadowColor = '#8a2be2';
+        } else {
+            ctx.fillStyle = 'rgba(138, 43, 226, 0.6)';
+            ctx.shadowBlur = 0;
+        }
+        
+        ctx.fill();
+        ctx.shadowBlur = 0;
+    }
+};
+```
+
+## Audio System
+
+### Single Shared AudioContext
+**Critical**: Only create ONE AudioContext instance to avoid browser errors.
+
+```javascript
+const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+const playBeat = () => {
+    beatCount++;
+    
+    // Reuse shared context
+    const oscillator = audioContext.createOscillator();
+    const gainNode = audioContext.createGain();
+    
+    oscillator.connect(gainNode);
+    gainNode.connect(audioContext.destination);
+    oscillator.frequency.value = 800; // Hz
+    oscillator.type = 'sine';
+    gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
+    oscillator.start(audioContext.currentTime);
+    oscillator.stop(audioContext.currentTime + 0.1);
+};
+```
+
+## Tempo Management
+
+### Dynamic Tempo Updates
+Tempo changes happen automatically based on elapsed time:
+
+```javascript
+const cycleElapsed = now - segmentStartTime;
+const targetSegmentIndex = Math.floor(cycleElapsed / segmentDuration);
+
+if (targetSegmentIndex !== currentSegmentIndex && targetSegmentIndex < tempoSequence.length) {
+    currentSegmentIndex = targetSegmentIndex;
+    updateTempo(tempoSequence[currentSegmentIndex]);
+} else if (cycleElapsed >= (5 * 60 * 1000)) {
+    // Cycle complete, restart
+    segmentStartTime = now;
+    currentSegmentIndex = 0;
+    updateTempo(tempoSequence[0]);
+}
+```
+
+### Update Tempo Function
+```javascript
+const updateTempo = (newTempo) => {
+    currentTempo = Math.max(15, Math.min(240, newTempo));
+    beatDuration = (60 / currentTempo) * 1000; // ms per beat
+    if (tempoDisplay) tempoDisplay.textContent = currentTempo;
+};
+```
+
+**Note**: Changing tempo does NOT affect scroll speed or existing beat positions. The pre-generated pattern already contains all tempo changes baked in.
+
+## Start/Stop Control
+
+### Start Metronome
+```javascript
+const startMetronome = () => {
+    if (animationFrameId) cancelAnimationFrame(animationFrameId);
+    beatDuration = (60 / currentTempo) * 1000;
+    animationStartTime = Date.now();
+    nextBeatTime = Date.now() + beatDuration;
+    beatCount = 0;
+    scrollOffset = 0;
+    lastFrameTime = null;
+    playBeat();
+    animateTimeline();
+};
+```
+
+### Pause/Resume
+```javascript
+stopBtn.addEventListener('click', () => {
+    if (animationFrameId) {
+        // Pause
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+        animationStartTime = null;
+        lastFrameTime = null;
+    } else {
+        // Resume
+        startMetronome();
+    }
+});
+```
+
+## Common Issues & Solutions
+
+### Issue: Timeline Glitching/Jumping Backwards
+**Cause**: Resetting scrollOffset during animation or using tempo-based scroll speed
+**Solution**: Use constant scroll speed with delta time, never reset scrollOffset mid-animation
+
+### Issue: Multiple AudioContext Errors
+**Cause**: Creating new AudioContext on every beat
+**Solution**: Create ONE shared AudioContext at initialization, reuse for all beats
+
+### Issue: Dots Speed Up When Tempo Changes
+**Cause**: Calculating spacing dynamically instead of using pre-generated positions
+**Solution**: Pre-calculate all beat positions at init time with correct spacing per tempo segment
+
+### Issue: Visual Stutter on Tempo Transitions
+**Cause**: Not pre-generating, recalculating positions when tempo changes
+**Solution**: Entire 5-minute pattern is pre-calculated, tempo changes are already in the data
+
+## File Location
+Implementation: `src/features/tasks/interactiveTaskManager.js`
+- Lines ~7265-7295: Variable declarations and beat pre-generation
+- Lines ~7300-7375: drawTimeline() function
+- Lines ~7377-7410: animateTimeline() function
+- Lines ~7412-7440: playBeat() and startMetronome() functions
+
+## Integration with Level 16
+Used in `rhythm-training` interactive task type:
+- Duration: 5 minutes (300s)
+- Repeats cycle continuously throughout task
+- Task completes after specified duration regardless of tempo cycle position
diff --git a/src/core/game.js b/src/core/game.js
index 592c016..0ca867b 100644
--- a/src/core/game.js
+++ b/src/core/game.js
@@ -6591,6 +6591,10 @@ class DataManager {
     // Auto-save functionality
     startAutoSave() {
         this.autoSaveInterval = setInterval(() => {
+            // Sync with window.gameData before saving to prevent overwriting campaign progress
+            if (window.gameData) {
+                this.data = window.gameData;
+            }
             this.saveData();
         }, 30000); // Save every 30 seconds
     }
diff --git a/src/data/modes/trainingGameData.js b/src/data/modes/trainingGameData.js
index 57ed131..246786d 100644
--- a/src/data/modes/trainingGameData.js
+++ b/src/data/modes/trainingGameData.js
@@ -1273,6 +1273,8 @@ const trainingGameData = {
                             useTags: true,
                             useCaptions: true,
                             prioritizePreferences: true,
+                            ambientAudio: 'audio/ambient/moaning-1.mp3',
+                            ambientVolume: 0.6,
                             showTimer: true
                         },
                         nextStep: 'phase4_final_video'
@@ -1459,7 +1461,9 @@ const trainingGameData = {
                             tempo: 60,
                             duration: 900,
                             allowTempoControl: true,
-                            showMetronome: true
+                            showMetronome: true,
+                            backgroundAudio: 'audio/ambient/moaning-1.mp3',
+                            audioVolume: 0.5
                         },
                         nextStep: 'webcam_setup'
                     },
@@ -1498,8 +1502,9 @@ const trainingGameData = {
                             duration: 1500,
                             interval: 8,
                             captions: true,
-                            backgroundAudio: 'sensual-1.mp3',
-                            audioVolume: 0.3
+                            showTimer: true,
+                            ambientAudio: 'audio/ambient/moaning-1.mp3',
+                            ambientVolume: 0.5
                         },
                         nextStep: 'final_quad'
                     },
@@ -1512,7 +1517,8 @@ const trainingGameData = {
                             duration: 1800,
                             edgeCount: 30,
                             webcamActive: true,
-                            captions: true
+                            captions: true,
+                            showTimer: true
                         },
                         nextStep: 'completion'
                     },
@@ -1552,7 +1558,8 @@ const trainingGameData = {
                             interval: 6,
                             captions: true,
                             ambientAudio: 'moaning-1.mp3',
-                            ambientVolume: 0.5
+                            ambientVolume: 0.5,
+                            showTimer: true
                         },
                         nextStep: 'tts_commands'
                     },
@@ -1567,7 +1574,8 @@ const trainingGameData = {
                             ttsEnabled: true,
                             ttsFrequency: 'medium',
                             captions: true,
-                            webcamActive: true
+                            webcamActive: true,
+                            showTimer: true
                         },
                         nextStep: 'rhythm_audio'
                     },
@@ -1581,7 +1589,7 @@ const trainingGameData = {
                             duration: 1500,
                             allowTempoControl: true,
                             showMetronome: true,
-                            backgroundAudio: 'ambient-1.mp3',
+                            backgroundAudio: 'audio/ambient/moaning-1.mp3',
                             audioVolume: 0.4
                         },
                         nextStep: 'dual_slideshow_audio'
@@ -1596,8 +1604,9 @@ const trainingGameData = {
                             leftInterval: 5,
                             rightInterval: 7,
                             captions: true,
-                            ambientAudio: 'moaning-2.mp3',
-                            ambientVolume: 0.6
+                            ambientAudio: 'audio/ambient/moaning-1.mp3',
+                            ambientVolume: 0.6,
+                            showTimer: true
                         },
                         nextStep: 'final_quad_tts'
                     },
@@ -1611,7 +1620,8 @@ const trainingGameData = {
                             edgeCount: 30,
                             ttsEnabled: true,
                             captions: true,
-                            webcamActive: true
+                            webcamActive: true,
+                            showTimer: true
                         },
                         nextStep: 'completion'
                     },
@@ -1746,7 +1756,7 @@ const trainingGameData = {
                             allowTempoControl: true,
                             showMetronome: true,
                             webcamActive: true,
-                            backgroundAudio: 'ambient-1.mp3',
+                            backgroundAudio: 'audio/ambient/moaning-1.mp3',
                             audioVolume: 0.3
                         },
                         nextStep: 'phase2_dual_slideshow'
@@ -1761,7 +1771,7 @@ const trainingGameData = {
                             leftInterval: 6,
                             rightInterval: 8,
                             captions: true,
-                            ambientAudio: 'moaning-2.mp3',
+                            ambientAudio: 'audio/ambient/moaning-1.mp3',
                             ambientVolume: 0.5
                         },
                         nextStep: 'phase3_dual_video_full'
diff --git a/src/features/academy/campaignManager.js b/src/features/academy/campaignManager.js
index 78993cf..9a62ef4 100644
--- a/src/features/academy/campaignManager.js
+++ b/src/features/academy/campaignManager.js
@@ -67,6 +67,9 @@ class CampaignManager {
       // 🔧 Migration: Fix currentLevel if it's behind the completion progress
       this.fixCurrentLevelMismatch();
       
+      // 🔧 Migration: Fix highestUnlockedLevel if it was set too high by old dev mode
+      this.fixHighestUnlockedLevel();
+      
       // Log the actual localStorage contents for debugging
       const stored = localStorage.getItem('webGame-data');
       if (stored) {
@@ -82,6 +85,33 @@ class CampaignManager {
     }
   }
 
+  /**
+   * Fix highestUnlockedLevel if it was set incorrectly by old dev mode
+   */
+  fixHighestUnlockedLevel() {
+    const progress = window.gameData.academyProgress;
+    const completedLevels = progress.completedLevels || [];
+    
+    // Calculate what the highest unlocked level SHOULD be based on completions
+    let expectedHighest = 1; // Always at least level 1
+    if (completedLevels.length > 0) {
+      const highestCompleted = Math.max(...completedLevels);
+      expectedHighest = Math.min(highestCompleted + 1, 30); // Next level after highest completed
+    }
+    
+    // If highestUnlockedLevel is suspiciously high (like 30 when you've only completed 7 levels),
+    // it was probably set by old dev mode - reset it
+    if (progress.highestUnlockedLevel > expectedHighest) {
+      console.warn(`🔧 Fixing highestUnlockedLevel: was ${progress.highestUnlockedLevel}, should be ${expectedHighest}`);
+      console.log(`📊 Completed levels: [${completedLevels.join(', ')}]`);
+      console.log(`🏆 Highest completed: ${completedLevels.length > 0 ? Math.max(...completedLevels) : 'none'}`);
+      
+      progress.highestUnlockedLevel = expectedHighest;
+      this.saveProgress();
+      console.log(`✅ Fixed: highestUnlockedLevel is now ${expectedHighest}`);
+    }
+  }
+
   /**
    * Fix currentLevel if it's behind completed levels (migration helper)
    */
@@ -121,6 +151,9 @@ class CampaignManager {
    */
   saveProgress() {
     try {
+      console.log(`💾 saveProgress() CALLED - completedLevels:`, window.gameData.academyProgress?.completedLevels);
+      console.trace('Stack trace:');
+      
       // Ensure academyProgress exists
       if (!window.gameData.academyProgress) {
         console.error('❌ academyProgress is missing from gameData!');
@@ -175,6 +208,12 @@ class CampaignManager {
    * @returns {boolean}
    */
   isLevelUnlocked(levelNum) {
+    // If dev mode is active, all levels are unlocked
+    if (window.isDevMode && window.isDevMode()) {
+      return true;
+    }
+    
+    // Otherwise, check against the highest unlocked level
     return levelNum <= window.gameData.academyProgress.highestUnlockedLevel;
   }
 
@@ -236,6 +275,7 @@ class CampaignManager {
     if (!progress.completedLevels.includes(levelNum)) {
       progress.completedLevels.push(levelNum);
       console.log(`✅ Added ${levelNum} to completed levels`);
+      console.log(`📋 completedLevels array is now:`, progress.completedLevels);
     }
 
     // Check for feature unlocks
@@ -283,7 +323,15 @@ class CampaignManager {
     progress.consecutiveLevelsWithoutFailure = 
       (progress.consecutiveLevelsWithoutFailure || 0) + 1;
 
+    console.log(`💾 BEFORE saveProgress() - completedLevels:`, progress.completedLevels);
     this.saveProgress();
+    
+    // Verify save immediately after
+    const verifyData = localStorage.getItem('webGame-data');
+    if (verifyData) {
+      const parsed = JSON.parse(verifyData);
+      console.log(`✅ VERIFIED localStorage after save - completedLevels:`, parsed.academyProgress.completedLevels);
+    }
 
     console.log(`✅ Level ${levelNum} completed!`);
 
diff --git a/src/features/academy/libraryManager.js b/src/features/academy/libraryManager.js
index 5988d68..9e4eb43 100644
--- a/src/features/academy/libraryManager.js
+++ b/src/features/academy/libraryManager.js
@@ -769,6 +769,8 @@ class LibraryManager {
      */
     saveLibrary() {
         try {
+            console.log('💾 libraryManager.saveLibrary() - completedLevels:', window.gameData.academyProgress?.completedLevels);
+            console.trace('Stack trace:');
             localStorage.setItem('webGame-data', JSON.stringify(window.gameData));
         } catch (error) {
             console.error('Failed to save library:', error);
diff --git a/src/features/academy/preferenceManager.js b/src/features/academy/preferenceManager.js
index cdfa8a4..50bbf0d 100644
--- a/src/features/academy/preferenceManager.js
+++ b/src/features/academy/preferenceManager.js
@@ -466,6 +466,8 @@ class PreferenceManager {
      */
     savePreferences() {
         try {
+            console.log('💾 preferenceManager.savePreferences() - completedLevels:', window.gameData.academyProgress?.completedLevels);
+            console.trace('Stack trace:');
             localStorage.setItem('webGame-data', JSON.stringify(window.gameData));
             return true;
         } catch (error) {
diff --git a/src/features/tasks/interactiveTaskManager.js b/src/features/tasks/interactiveTaskManager.js
index 3aebc28..411c3fe 100644
--- a/src/features/tasks/interactiveTaskManager.js
+++ b/src/features/tasks/interactiveTaskManager.js
@@ -98,6 +98,13 @@ class InteractiveTaskManager {
             validator: this.validateAddLibraryTask.bind(this)
         });
 
+        this.registerTaskType('link-media', {
+            name: 'Link Media Files',
+            description: 'Link individual media files to your library',
+            handler: this.createLinkMediaTask.bind(this),
+            validator: this.validateLinkMediaTask.bind(this)
+        });
+
         this.registerTaskType('tag-files', {
             name: 'Tag Files',
             description: 'Tag files in your library',
@@ -375,6 +382,12 @@ class InteractiveTaskManager {
         // Hide original buttons
         originalButtons.forEach(btn => btn.style.display = 'none');
         
+        // Remove any existing interactive controls first to prevent duplicates
+        const existingControls = actionButtons.querySelector('.interactive-controls');
+        if (existingControls) {
+            existingControls.remove();
+        }
+        
         // Add interactive control buttons
         const interactiveControls = document.createElement('div');
         interactiveControls.className = 'interactive-controls';
@@ -393,7 +406,28 @@ class InteractiveTaskManager {
         actionButtons.appendChild(interactiveControls);
 
         // Add event listeners
-        document.getElementById('interactive-complete-btn').addEventListener('click', () => {
+        const completeBtn = document.getElementById('interactive-complete-btn');
+        completeBtn.addEventListener('click', () => {
+            if (completeBtn.disabled) {
+                // Show feedback if button is disabled
+                const actionButtons = document.querySelector('.action-buttons');
+                let feedback = actionButtons.querySelector('.disabled-feedback');
+                if (!feedback) {
+                    feedback = document.createElement('div');
+                    feedback.className = 'disabled-feedback';
+                    feedback.style.cssText = 'color: var(--color-warning); margin-top: 10px; font-weight: bold; text-align: center;';
+                    actionButtons.appendChild(feedback);
+                }
+                feedback.textContent = '⚠️ Complete the required steps first!';
+                feedback.style.animation = 'none';
+                setTimeout(() => {
+                    feedback.style.animation = 'pulse 0.5s ease-in-out 3';
+                }, 10);
+                setTimeout(() => {
+                    feedback.textContent = '';
+                }, 3000);
+                return;
+            }
             console.log('🎯 Complete Challenge button clicked!');
             console.log('🎯 Current task:', this.game?.gameState?.currentTask?.id);
             console.log('🎯 Is scenario mode:', window.gameModeManager?.isScenarioMode());
@@ -4883,7 +4917,7 @@ class InteractiveTaskManager {
         const playRandomVideo = async () => {
             if (videoContainer && window.videoPlayerManager) {
                 try {
-                    const availableVideos = window.videoPlayerManager.videoLibrary?.background || [];
+                    const availableVideos = window.videoPlayerManager.getEnabledVideos('background') || [];
                     if (availableVideos.length > 0) {
                         const randomVideo = availableVideos[Math.floor(Math.random() * availableVideos.length)];
                         const videoPath = typeof randomVideo === 'object' ? randomVideo.path : randomVideo;
@@ -5129,6 +5163,95 @@ class InteractiveTaskManager {
         return task.completed === true;
     }
 
+    /**
+     * Link Media Files Task
+     */
+    async createLinkMediaTask(task, container) {
+        const minFiles = task.params?.minFiles || 10;
+        const mediaType = task.params?.mediaType || 'video'; // 'video' or 'image'
+        const suggestedTags = task.params?.suggestedTags || [];
+        
+        container.innerHTML = `
+            <div class="academy-library-task">
+                <h3>📎 Link Media Files</h3>
+                <p>Add a directory containing ${mediaType === 'video' ? 'video' : 'image'} files to expand your library.</p>
+                <p class="info-text"><strong>Minimum ${minFiles} files recommended</strong></p>
+                ${suggestedTags.length > 0 ? `
+                    <p class="suggestion">Suggested tags: ${suggestedTags.map(t => `<span class="tag">${t}</span>`).join(' ')}</p>
+                ` : ''}
+                <button class="btn btn-primary" id="link-directory-btn">
+                    📂 Select Directory
+                </button>
+                <div id="link-result" class="result-area"></div>
+            </div>
+        `;
+        
+        const btn = container.querySelector('#link-directory-btn');
+        const resultArea = container.querySelector('#link-result');
+        
+        btn.addEventListener('click', async () => {
+            if (window.libraryManager) {
+                try {
+                    const result = await window.libraryManager.addDirectory(suggestedTags);
+                    if (result) {
+                        const fileCount = result.fileCount || 0;
+                        resultArea.innerHTML = `
+                            <div class="success">
+                                ✅ Directory linked successfully!
+                                <p>Files found: ${fileCount}</p>
+                                ${fileCount >= minFiles ? '<p><strong>Target reached!</strong></p>' : `<p>You can add more directories to reach ${minFiles} files.</p>`}
+                            </div>
+                        `;
+                        
+                        // Complete if we have enough files
+                        if (fileCount >= minFiles) {
+                            task.completed = true;
+                            const completeBtn = document.getElementById('interactive-complete-btn');
+                            if (completeBtn) {
+                                completeBtn.disabled = false;
+                            }
+                        } else {
+                            // Allow completing even if under target
+                            setTimeout(() => {
+                                task.completed = true;
+                                const completeBtn = document.getElementById('interactive-complete-btn');
+                                if (completeBtn) {
+                                    completeBtn.disabled = false;
+                                }
+                            }, 3000);
+                        }
+                    }
+                } catch (error) {
+                    resultArea.innerHTML = `<div class="error">Error: ${error.message}</div>`;
+                    // Allow completing even on error
+                    setTimeout(() => {
+                        task.completed = true;
+                        const completeBtn = document.getElementById('interactive-complete-btn');
+                        if (completeBtn) {
+                            completeBtn.disabled = false;
+                        }
+                    }, 2000);
+                }
+            } else {
+                // Fallback - just complete the task
+                resultArea.innerHTML = '<div class="info">ℹ️ Library manager not available - task auto-completed</div>';
+                task.completed = true;
+                const completeBtn = document.getElementById('interactive-complete-btn');
+                if (completeBtn) {
+                    completeBtn.disabled = false;
+                }
+            }
+        });
+    }
+
+    validateLinkMediaTask(task) {
+        return task.completed === true;
+    }
+
+    validateAddLibraryTask(task) {
+        return task.completed === true;
+    }
+
     /**
      * Tag Files Task
      */
@@ -5448,19 +5571,58 @@ class InteractiveTaskManager {
      */
     async createDualVideoTask(task, container) {
         const mainVideo = task.params?.mainVideo || 'focus';
-        const pipVideo = task.params?.pipVideo || 'overlay';
+        
+        // Handle webcamActive parameter - if true, show webcam as overlay
+        const webcamActive = task.params?.webcamActive || false;
+        let pipVideo = task.params?.pipVideo || 'overlay';
+        
+        // If webcamActive is true, override to show webcam as PiP overlay
+        if (webcamActive) {
+            pipVideo = 'webcam';
+        }
+        
         const pipPosition = task.params?.pipPosition || 'bottom-right';
-        const minDuration = task.params?.minDuration || 120; // Default 2 minutes
-        const showCaptions = task.params?.showCaptions || false;
+        const minDuration = task.params?.duration || task.params?.minDuration || 120; // Support both duration and minDuration
+        
+        // Support both old parameter names (showCaptions) and new ones (captions)
+        const showCaptions = task.params?.showCaptions || task.params?.captions || false;
         const captionInterval = task.params?.captionInterval || 10; // Default 10 seconds
         
+        // Show timer if duration is specified
+        const showTimer = task.params?.showTimer || (task.params?.duration !== undefined);
+        
         container.innerHTML = `
             <div class="academy-dual-video-task">
                 <h3>🎬 Dual Video Mode</h3>
                 <p>Watch two videos simultaneously - main video with picture-in-picture overlay.</p>
                 <p class="info-text">Minimum viewing time: <strong>${minDuration} seconds</strong></p>
                 <div id="dual-video-main-container" class="video-player-container" style="position: relative; margin: 20px 0; min-height: 400px; text-align: center;"></div>
-                ${showCaptions ? '<div id="dual-video-caption" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent; color: var(--color-primary); padding: 20px 40px; text-align: center; font-size: 3em; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.9), -1px -1px 2px rgba(0,0,0,0.9), 0 0 20px rgba(139, 0, 139, 0.8); z-index: 99999; max-width: 80%; pointer-events: none; line-height: 1.4; font-family: inherit;"></div>' : ''}
+                ${showCaptions ? '<div id="dual-video-caption" data-base-size="3" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent; color: var(--color-primary); padding: 20px 40px; text-align: center; font-size: 3em; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.9), -1px -1px 2px rgba(0,0,0,0.9), 0 0 20px rgba(139, 0, 139, 0.8); z-index: 99999; max-width: 80%; pointer-events: none; line-height: 1.4; font-family: inherit;"></div>' : ''}
+                
+                <!-- Volume Controls -->
+                <div style="display: flex; gap: 20px; justify-content: center; align-items: center; margin: 20px 0; padding: 15px; background: var(--bg-secondary); border-radius: 8px;">
+                    <div style="flex: 1; max-width: 300px;">
+                        <label style="display: block; color: var(--text-secondary); font-size: 0.9em; margin-bottom: 5px;">
+                            🔊 Main Video Volume
+                        </label>
+                        <input type="range" id="dual-video-main-volume" min="0" max="100" value="80" 
+                               style="width: 100%; cursor: pointer;">
+                        <div style="text-align: center; color: var(--text-muted); font-size: 0.85em; margin-top: 3px;">
+                            <span id="dual-video-main-volume-label">80%</span>
+                        </div>
+                    </div>
+                    <div style="flex: 1; max-width: 300px;">
+                        <label style="display: block; color: var(--text-secondary); font-size: 0.9em; margin-bottom: 5px;">
+                            🔊 PiP Video Volume
+                        </label>
+                        <input type="range" id="dual-video-pip-volume" min="0" max="100" value="50" 
+                               style="width: 100%; cursor: pointer;">
+                        <div style="text-align: center; color: var(--text-muted); font-size: 0.85em; margin-top: 3px;">
+                            <span id="dual-video-pip-volume-label">50%</span>
+                        </div>
+                    </div>
+                </div>
+                
                 <div style="display: flex; gap: 10px; justify-content: center; margin: 10px 0;">
                     <button class="btn btn-primary" id="start-dual-video-btn">
                         ▶️ Start Dual Video
@@ -5468,6 +5630,9 @@ class InteractiveTaskManager {
                     <button class="btn btn-secondary" id="skip-dual-video-btn" style="display: none;">
                         ⏭️ Skip to New Videos
                     </button>
+                    <button class="btn btn-warning skip-task-btn" id="skip-dual-video-task-btn" style="display: none;">
+                        ⏩ Skip Task (Dev)
+                    </button>
                 </div>
                 <div id="dual-video-status" class="status-area"></div>
             </div>
@@ -5475,15 +5640,50 @@ class InteractiveTaskManager {
         
         const btn = container.querySelector('#start-dual-video-btn');
         const skipBtn = container.querySelector('#skip-dual-video-btn');
+        const skipTaskBtn = container.querySelector('#skip-dual-video-task-btn');
         const statusArea = container.querySelector('#dual-video-status');
         const mainContainer = container.querySelector('#dual-video-main-container');
         const captionEl = showCaptions ? container.querySelector('#dual-video-caption') : null;
         
+        // Volume controls
+        const mainVolumeSlider = container.querySelector('#dual-video-main-volume');
+        const mainVolumeLabel = container.querySelector('#dual-video-main-volume-label');
+        const pipVolumeSlider = container.querySelector('#dual-video-pip-volume');
+        const pipVolumeLabel = container.querySelector('#dual-video-pip-volume-label');
+        
+        console.log('🎬 Dual-video skip task button found:', !!skipTaskBtn);
+        
+        // Show skip button if dev mode is enabled
+        if (window.isDevMode && window.isDevMode()) {
+            console.log('🎬 Dev mode active - showing skip task button');
+            skipTaskBtn.style.display = 'inline-block';
+        }
+        
         let availableVideos = [];
         let captionInterval_id = null;
         let mainVideoElement = null;
         let pipVideoElement = null;
         
+        // Volume control handlers
+        const updateMainVolume = () => {
+            const volume = mainVolumeSlider.value / 100;
+            mainVolumeLabel.textContent = `${mainVolumeSlider.value}%`;
+            if (mainVideoElement) {
+                mainVideoElement.volume = volume;
+            }
+        };
+        
+        const updatePipVolume = () => {
+            const volume = pipVolumeSlider.value / 100;
+            pipVolumeLabel.textContent = `${pipVolumeSlider.value}%`;
+            if (pipVideoElement) {
+                pipVideoElement.volume = volume;
+            }
+        };
+        
+        mainVolumeSlider.addEventListener('input', updateMainVolume);
+        pipVolumeSlider.addEventListener('input', updatePipVolume);
+        
         const playNextMainVideo = async () => {
             if (mainVideo === 'webcam' || availableVideos.length < 1) return;
             
@@ -5491,9 +5691,10 @@ class InteractiveTaskManager {
             console.log('🎬 Auto-playing next main video:', video);
             await window.videoPlayerManager.playTaskVideo(video, mainContainer);
             
-            // Re-attach ended listener
+            // Re-attach ended listener and set volume
             if (window.videoPlayerManager.currentPlayer) {
                 mainVideoElement = window.videoPlayerManager.currentPlayer;
+                mainVideoElement.volume = mainVolumeSlider.value / 100;
                 mainVideoElement.addEventListener('ended', playNextMainVideo);
             }
         };
@@ -5505,16 +5706,19 @@ class InteractiveTaskManager {
             console.log('🎬 Auto-playing next PiP video:', video);
             await window.videoPlayerManager.playOverlayVideo(video);
             
-            // Re-attach ended listener
+            // Re-attach ended listener and set volume
             if (window.videoPlayerManager.overlayPlayer) {
                 pipVideoElement = window.videoPlayerManager.overlayPlayer.querySelector('video');
                 if (pipVideoElement) {
+                    pipVideoElement.volume = pipVolumeSlider.value / 100;
                     pipVideoElement.addEventListener('ended', playNextPipVideo);
                 }
             }
         };
         
         const playDualVideos = async () => {
+            console.log('🎬 playDualVideos called - mainVideo:', mainVideo, 'pipVideo:', pipVideo);
+            
             // Clear existing videos
             mainContainer.innerHTML = '';
             
@@ -5543,14 +5747,16 @@ class InteractiveTaskManager {
                 const video1 = availableVideos[Math.floor(Math.random() * availableVideos.length)];
                 await window.videoPlayerManager.playTaskVideo(video1, mainContainer);
                 
-                // Add ended listener for autoplay
+                // Add ended listener for autoplay and set volume
                 if (window.videoPlayerManager.currentPlayer) {
                     mainVideoElement = window.videoPlayerManager.currentPlayer;
+                    mainVideoElement.volume = mainVolumeSlider.value / 100;
                     mainVideoElement.addEventListener('ended', playNextMainVideo);
                 }
             }
             
             // Play overlay video (PiP style) - can be webcam or video
+            console.log('🎬 Setting up PiP overlay - type:', pipVideo, 'available videos:', availableVideos.length);
             if (pipVideo === 'webcam') {
                 // Clean up any existing overlay player first
                 if (window.videoPlayerManager && window.videoPlayerManager.overlayPlayer) {
@@ -5587,17 +5793,58 @@ class InteractiveTaskManager {
                     statusArea.innerHTML = '<div class="error">⚠️ Could not access webcam for PiP</div>';
                 }
             } else if (availableVideos.length >= 1) {
+                console.log('🎬 Creating video PiP overlay...');
                 // pipVideo === 'overlay' - play a video in PiP
-                const video2 = availableVideos[Math.floor(Math.random() * availableVideos.length)];
-                await window.videoPlayerManager.playOverlayVideo(video2);
+                // Clean up any existing dual-video overlay player first
+                const existingPipOverlay = document.querySelector('.dual-video-pip-overlay');
+                if (existingPipOverlay) {
+                    console.log('🧹 Cleaning up existing PiP overlay');
+                    const video = existingPipOverlay.querySelector('video');
+                    if (video) {
+                        video.pause();
+                        video.src = '';
+                    }
+                    existingPipOverlay.remove();
+                }
+                
+                // Create PiP overlay container
+                const pipOverlay = document.createElement('div');
+                pipOverlay.className = 'dual-video-pip-overlay';
+                pipOverlay.style.cssText = `
+                    position: fixed;
+                    width: 300px;
+                    height: auto;
+                    z-index: 100;
+                    box-shadow: 0 0 20px rgba(0,0,0,0.5);
+                    cursor: move;
+                    border: 2px solid rgba(255,255,255,0.3);
+                    border-radius: 8px;
+                    overflow: hidden;
+                `;
+                
+                // Create video element for PiP
+                const video2Path = availableVideos[Math.floor(Math.random() * availableVideos.length)];
+                console.log('🎬 Creating new PiP video:', video2Path);
+                
+                const pipVideo = document.createElement('video');
+                pipVideo.src = window.videoPlayerManager.getVideoPath(video2Path);
+                pipVideo.autoplay = true;
+                pipVideo.loop = false;
+                pipVideo.volume = pipVolumeSlider.value / 100;
+                pipVideo.style.cssText = 'width: 100%; display: block; border-radius: 6px;';
+                
+                pipOverlay.appendChild(pipVideo);
+                document.body.appendChild(pipOverlay);
+                
+                // Store reference
+                pipVideoElement = pipVideo;
+                window.videoPlayerManager.overlayPlayer = pipOverlay;
                 
                 // Add ended listener for autoplay
-                if (window.videoPlayerManager.overlayPlayer) {
-                    pipVideoElement = window.videoPlayerManager.overlayPlayer.querySelector('video');
-                    if (pipVideoElement) {
-                        pipVideoElement.addEventListener('ended', playNextPipVideo);
-                    }
-                }
+                pipVideo.addEventListener('ended', playNextPipVideo);
+                console.log('🎬 PiP video element created and configured');
+            } else {
+                console.warn('⚠️ Not enough videos for PiP overlay');
             }
             
             // Position the overlay player as PiP with draggable and resizable
@@ -5726,6 +5973,14 @@ class InteractiveTaskManager {
             }
         };
         
+        skipTaskBtn.addEventListener('click', () => {
+            console.log('⏩ Dev skip - completing dual-video task');
+            statusArea.innerHTML = '<div class="success">✅ Task skipped (Dev Mode)</div>';
+            task.completed = true;
+            const completeBtn = document.getElementById('interactive-complete-btn');
+            if (completeBtn) completeBtn.disabled = false;
+        });
+        
         skipBtn.addEventListener('click', async () => {
             const minVideosRequired = (mainVideo === 'webcam') ? 1 : 2;
             if (availableVideos.length >= minVideosRequired) {
@@ -5754,7 +6009,7 @@ class InteractiveTaskManager {
             }
             
             try {
-                const videos = window.videoPlayerManager.videoLibrary?.background || [];
+                const videos = window.videoPlayerManager.getEnabledVideos('background') || [];
                 
                 // For webcam mode, we only need 1 video (for PiP)
                 const minVideosRequired = (mainVideo === 'webcam') ? 1 : 2;
@@ -5773,6 +6028,11 @@ class InteractiveTaskManager {
                 btn.style.display = 'none';
                 skipBtn.style.display = 'inline-block';
                 
+                // Show dev skip button if dev mode is enabled
+                if (skipTaskBtn && window.isDevMode && window.isDevMode()) {
+                    skipTaskBtn.style.display = 'inline-block';
+                }
+                
                 // Start caption cycling if enabled
                 if (showCaptions && captionEl) {
                     console.log('🎬 Caption overlay enabled');
@@ -5819,6 +6079,12 @@ class InteractiveTaskManager {
                     captionEl.textContent = firstCaption;
                     captionEl.style.opacity = '1';
                     
+                    // Apply font size multiplier if set
+                    if (window.captionFontSizeMultiplier !== undefined) {
+                        const baseSize = parseFloat(captionEl.dataset.baseSize || '3');
+                        captionEl.style.fontSize = (baseSize * window.captionFontSizeMultiplier) + 'em';
+                    }
+                    
                     // Cycle captions
                     captionInterval_id = setInterval(() => {
                         // Fade out
@@ -5835,10 +6101,11 @@ class InteractiveTaskManager {
                     }, captionInterval * 1000);
                 }
                 
-                // Handle timer display
-                const showTimer = task.params?.showTimer || false;
+                // Handle timer display (use the showTimer variable we set at the top)
+                console.log('⏱️ Dual-video timer setup:', { showTimer, minDuration, params: task.params });
                 const countdownEl = showTimer ? document.getElementById('sidebar-countdown-display') : null;
                 const countdownWrapper = showTimer ? document.getElementById('sidebar-countdown-timer') : null;
+                console.log('⏱️ Found timer elements:', { wrapper: !!countdownWrapper, display: !!countdownEl });
                 
                 let remainingTime = minDuration;
                 const formatTime = (seconds) => {
@@ -5849,8 +6116,11 @@ class InteractiveTaskManager {
                 
                 // Show countdown in sidebar if showTimer is enabled
                 if (showTimer && countdownWrapper && countdownEl) {
+                    console.log('⏱️ Showing countdown timer in sidebar - duration:', formatTime(remainingTime));
                     countdownWrapper.style.display = 'block';
                     countdownEl.textContent = formatTime(remainingTime);
+                } else {
+                    console.log('⏱️ Timer NOT shown - reasons:', { showTimer, hasWrapper: !!countdownWrapper, hasDisplay: !!countdownEl });
                 }
                 
                 const timerInterval = setInterval(() => {
@@ -6002,6 +6272,8 @@ class InteractiveTaskManager {
     async createQuadVideoTask(task, container) {
         const layout = task.params?.layout || 'grid';
         const minDuration = task.params?.minDuration || 180; // Default 3 minutes
+        const duration = task.params?.duration || minDuration;
+        const showTimer = task.params?.showTimer || false;
         const ambientAudio = task.params?.ambientAudio;
         const ambientVolume = task.params?.ambientVolume || 0.5;
         const hypnoOverlay = task.params?.hypnoOverlay || false;
@@ -6010,7 +6282,7 @@ class InteractiveTaskManager {
             <div class="academy-quad-video-task">
                 <h3>🎬 Quad Video Mode${hypnoOverlay ? ' 🌀' : ''}</h3>
                 <p>Watch four videos simultaneously in a ${layout} layout.</p>
-                <p class="info-text">Minimum viewing time: <strong>${minDuration} seconds</strong></p>
+                <p class="info-text">Minimum viewing time: <strong>${Math.floor(duration / 60)} minutes</strong></p>
                 <div id="quad-video-grid" class="quad-video-grid" style="display: none; margin: 20px 0; width: 100%; max-width: 1400px; position: relative;">
                     ${hypnoOverlay ? '<div class="spiral-animation spinning" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; pointer-events: none; opacity: 0.6;"></div>' : ''}
                     <div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;">
@@ -6070,6 +6342,9 @@ class InteractiveTaskManager {
                     <button class="btn btn-secondary" id="fullscreen-quad-video-btn" style="display: none;">
                         🖥️ Fullscreen
                     </button>
+                    <button class="btn btn-warning skip-task-btn" id="skip-quad-video-task-btn" style="display: none;">
+                        ⏩ Skip Task (Dev)
+                    </button>
                 </div>
                 <div id="quad-video-status" class="status-area"></div>
             </div>
@@ -6077,16 +6352,16 @@ class InteractiveTaskManager {
         
         const btn = container.querySelector('#start-quad-video-btn');
         const skipBtn = container.querySelector('#skip-quad-video-btn');
+        const skipTaskBtn = container.querySelector('#skip-quad-video-task-btn');
         const fullscreenBtn = container.querySelector('#fullscreen-quad-video-btn');
         const statusArea = container.querySelector('#quad-video-status');
         const gridContainer = container.querySelector('#quad-video-grid');
         
         let availableVideos = [];
-        let playedVideos = new Set(); // Track played videos to avoid repeats
-        let videoElements = [null, null, null, null]; // Track individual video elements
-        let ambientAudioElement = null;
+        const playedVideos = new Set();
+        const videoElements = [null, null, null, null];
         
-        // Setup hover show/hide for controls
+        // Handle wrapper hover for controls
         for (let i = 1; i <= 4; i++) {
             const wrapper = container.querySelector(`#quad-video-${i}-wrapper`);
             const controls = wrapper.querySelector('.quad-video-controls');
@@ -6100,22 +6375,13 @@ class InteractiveTaskManager {
             });
         }
         
-        // Fullscreen functionality
+        // Fullscreen toggle
         fullscreenBtn.addEventListener('click', () => {
-            if (gridContainer.requestFullscreen) {
+            if (!document.fullscreenElement) {
                 gridContainer.requestFullscreen();
-            } else if (gridContainer.webkitRequestFullscreen) {
-                gridContainer.webkitRequestFullscreen();
-            } else if (gridContainer.msRequestFullscreen) {
-                gridContainer.msRequestFullscreen();
-            }
-        });
-        
-        // Update button text when entering/exiting fullscreen
-        document.addEventListener('fullscreenchange', () => {
-            if (document.fullscreenElement === gridContainer) {
                 fullscreenBtn.innerHTML = '🗙 Exit Fullscreen';
             } else {
+                document.exitFullscreen();
                 fullscreenBtn.innerHTML = '🖥️ Fullscreen';
             }
         });
@@ -6155,15 +6421,17 @@ class InteractiveTaskManager {
                     }
                     const videosToChooseFrom = unplayedVideos.length > 0 ? unplayedVideos : availableVideos;
                     if (videosToChooseFrom.length > 0) {
-                        const nextVideo = videosToChooseFrom[Math.floor(Math.random() * videosToChooseFrom.length)];
-                        playedVideos.add(nextVideo);
-                        videoEl.src = window.videoPlayerManager.getVideoPath(nextVideo);
-                        videoEl.play().catch(e => console.warn('Autoplay failed:', e));
+                        const randomVideo = videosToChooseFrom[Math.floor(Math.random() * videosToChooseFrom.length)];
+                        playedVideos.add(randomVideo);
+                        const randomPath = typeof randomVideo === 'object' ? randomVideo.path : randomVideo;
+                        videoEl.src = window.videoPlayerManager.getVideoPath(randomPath);
+                        videoEl.play().catch(e => console.warn('Failed to play next video:', e));
                     }
                 });
                 
                 videoContainer.appendChild(videoEl);
-                videoElements[i] = videoEl; // Track video element
+                videoElements[i] = videoEl; // Track for volume control
+                playedVideos.add(videoPath);
                 
                 try {
                     await videoEl.play();
@@ -6198,10 +6466,11 @@ class InteractiveTaskManager {
                 }
                 const videosToChooseFrom = unplayedVideos.length > 0 ? unplayedVideos : availableVideos;
                 if (videosToChooseFrom.length > 0) {
-                    const nextVideo = videosToChooseFrom[Math.floor(Math.random() * videosToChooseFrom.length)];
-                    playedVideos.add(nextVideo);
-                    videoEl.src = window.videoPlayerManager.getVideoPath(nextVideo);
-                    videoEl.play().catch(e => console.warn('Autoplay failed:', e));
+                    const randomVideo = videosToChooseFrom[Math.floor(Math.random() * videosToChooseFrom.length)];
+                    playedVideos.add(randomVideo);
+                    const randomPath = typeof randomVideo === 'object' ? randomVideo.path : randomVideo;
+                    videoEl.src = window.videoPlayerManager.getVideoPath(randomPath);
+                    videoEl.play().catch(e => console.warn('Failed to play next video:', e));
                 }
             });
             
@@ -6237,6 +6506,14 @@ class InteractiveTaskManager {
             });
         }
         
+        skipTaskBtn.addEventListener('click', () => {
+            console.log('⏩ Dev skip - completing quad-video task');
+            statusArea.innerHTML = '<div class="success">✅ Task skipped (Dev Mode)</div>';
+            task.completed = true;
+            const completeBtn = document.getElementById('interactive-complete-btn');
+            if (completeBtn) completeBtn.disabled = false;
+        });
+        
         skipBtn.addEventListener('click', async () => {
             if (availableVideos.length >= 4) {
                 await playQuadVideos();
@@ -6257,7 +6534,7 @@ class InteractiveTaskManager {
             }
             
             try {
-                const videos = window.videoPlayerManager.videoLibrary?.background || [];
+                const videos = window.videoPlayerManager.getEnabledVideos('background') || [];
                 
                 if (videos.length < 4) {
                     statusArea.innerHTML = '<div class="info">ℹ️ Need at least 4 videos - continuing anyway</div>';
@@ -6286,42 +6563,40 @@ class InteractiveTaskManager {
                 skipBtn.style.display = 'inline-block';
                 fullscreenBtn.style.display = 'inline-block';
                 
-                // Show sidebar and timer
-                const sidebar = document.getElementById('campaign-sidebar');
-                const timerWrapper = document.getElementById('focus-timer-display-wrapper');
-                const timerDisplay = document.getElementById('focus-timer-display');
+                // Show sidebar countdown timer if enabled
+                const countdownEl = showTimer ? document.getElementById('sidebar-countdown-display') : null;
+                const countdownWrapper = showTimer ? document.getElementById('sidebar-countdown-timer') : null;
                 
-                if (sidebar) {
-                    sidebar.style.display = 'block';
+                if (showTimer && countdownWrapper) {
+                    countdownWrapper.style.display = 'block';
                 }
                 
-                if (timerWrapper) {
-                    timerWrapper.style.display = 'block';
-                }
+                // Start countdown timer
+                let remainingTime = duration;
                 
-                // Start countdown timer in sidebar
-                let remainingTime = minDuration;
-                
-                if (timerDisplay) {
+                if (showTimer && countdownEl) {
                     const minutes = Math.floor(remainingTime / 60);
                     const seconds = remainingTime % 60;
-                    timerDisplay.innerHTML = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+                    countdownEl.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
                 }
                 
                 const timerInterval = setInterval(() => {
                     remainingTime--;
                     
                     if (remainingTime > 0) {
-                        if (timerDisplay) {
+                        if (showTimer && countdownEl) {
                             const mins = Math.floor(remainingTime / 60);
                             const secs = remainingTime % 60;
-                            timerDisplay.innerHTML = `${mins}:${secs.toString().padStart(2, '0')}`;
+                            countdownEl.textContent = `${mins}:${secs.toString().padStart(2, '0')}`;
                         }
                     } else {
                         clearInterval(timerInterval);
-                        if (timerDisplay) {
-                            timerDisplay.innerHTML = '✅';
-                            timerDisplay.style.color = 'var(--color-success, #4caf50)';
+                        if (showTimer && countdownEl) {
+                            countdownEl.textContent = '✅';
+                            countdownEl.style.color = 'var(--color-success, #4caf50)';
+                        }
+                        if (showTimer && countdownWrapper) {
+                            countdownWrapper.style.display = 'none';
                         }
                         statusArea.innerHTML = '<div class="success" style="font-size: 1.2em;">✅ Quad video session complete</div>';
                         
@@ -6705,7 +6980,7 @@ class InteractiveTaskManager {
             }
             
             try {
-                const videos = window.videoPlayerManager.videoLibrary?.background || [];
+                const videos = window.videoPlayerManager.getEnabledVideos('background') || [];
                 
                 if (videos.length < 4) {
                     statusArea.innerHTML = '<div class="info">ℹ️ Need at least 4 videos - continuing anyway</div>';
@@ -7080,7 +7355,7 @@ class InteractiveTaskManager {
             }
             
             try {
-                const allVideos = window.videoPlayerManager.videoLibrary?.background || [];
+                const allVideos = window.videoPlayerManager.getEnabledVideos('background') || [];
                 
                 if (allVideos.length < 3) {
                     statusArea.innerHTML = '<div class="info">ℹ️ Need at least 3 videos</div>';
@@ -7095,7 +7370,11 @@ class InteractiveTaskManager {
                 if (ambientAudio) {
                     ambientAudioElement = new Audio(ambientAudio);
                     ambientAudioElement.loop = true;
-                    ambientAudioElement.volume = ambientVolume;
+                    const globalVolume = window.ambientAudioVolume;
+                    ambientAudioElement.volume = (globalVolume !== undefined && globalVolume > 0) ? globalVolume : ambientVolume;
+                    ambientAudioElement.setAttribute('data-ambient', 'true');
+                    ambientAudioElement.style.display = 'none';
+                    document.body.appendChild(ambientAudioElement);
                     ambientAudioElement.play().catch(e => console.warn('Audio error:', e));
                 }
                 
@@ -7183,9 +7462,10 @@ class InteractiveTaskManager {
         let audioElement = null;
         let currentTempo = tempo;
         let beatCount = 0;
+        let timeRemaining = duration;
         
-        // Tempo progression over 5 minutes: 60-120-150-60-15-200-240
-        const tempoSequence = [60, 120, 150, 60, 15, 200, 240];
+        // Tempo progression over 5 minutes: 60-120-150-60-150-200-240
+        const tempoSequence = [60, 120, 150, 60, 150, 200, 240];
         const segmentDuration = (5 * 60 * 1000) / tempoSequence.length;
         let currentSegmentIndex = 0;
         let segmentStartTime = null;
@@ -7198,13 +7478,9 @@ class InteractiveTaskManager {
                 ${webcamActive ? '<div id="rhythm-webcam" class="webcam-container" style="width: 320px; height: 240px; margin: 20px auto; background: #000; border-radius: 8px; overflow: hidden; border: 3px solid var(--color-primary);"><video id="rhythm-webcam-video" autoplay style="width: 100%; height: 100%; transform: scaleX(-1);"></video></div>' : ''}
                 
                 <div id="metronome-display" style="display: ${showMetronome ? 'flex' : 'none'}; flex-direction: column; align-items: center; margin: 30px 0;">
-                    <div id="beat-timeline" style="width: 600px; height: 120px; background: linear-gradient(to bottom, rgba(138, 43, 226, 0.1), rgba(138, 43, 226, 0.05)); border: 2px solid var(--color-primary); border-radius: 10px; position: relative; overflow: hidden; margin-bottom: 20px;">
-                        <div style="position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: rgba(255, 255, 255, 0.8); transform: translateX(-50%); z-index: 10; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);"></div>
-                        <div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 0.8em; color: rgba(255, 255, 255, 0.7); z-index: 11; pointer-events: none;">HIT</div>
-                        <div id="beat-markers-container" style="position: absolute; width: 100%; height: 100%; transition: transform 0.05s linear;"></div>
-                    </div>
+                    <canvas id="beat-timeline" width="600" height="120" style="border: 2px solid var(--color-primary); border-radius: 10px; background: linear-gradient(to bottom, rgba(138, 43, 226, 0.1), rgba(138, 43, 226, 0.05));"></canvas>
                     
-                    <div style="display: flex; align-items: center; gap: 20px;">
+                    <div style="display: flex; align-items: center; gap: 20px; margin-top: 20px;">
                         <div id="metronome-beat" style="width: 100px; height: 100px; border-radius: 50%; background: rgba(138, 43, 226, 0.2); border: 4px solid var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 2em; font-weight: bold; color: var(--color-primary); transition: all 0.1s ease;">
                             <span id="beat-number">-</span>
                         </div>
@@ -7220,13 +7496,15 @@ class InteractiveTaskManager {
                         <span id="current-tempo">${tempo}</span> BPM
                     </div>
                     <div style="color: var(--text-secondary); font-size: 0.9em; margin: 5px 0;">
-                        Tempo Progression: 60 → 120 → 150 → 60 → 15 → 200 → 240
+                        Tempo Progression: 60 → 120 → 150 → 60 → 150 → 200 → 240
                     </div>
                 </div>
                 
                 <div style="display: flex; gap: 10px; justify-content: center; margin: 20px 0;">
                     <button class="btn btn-primary" id="start-rhythm-btn">▶️ Start Rhythm</button>
                     <button class="btn btn-secondary" id="stop-rhythm-btn" style="display: none;">⏸️ Pause</button>
+                    <button class="btn btn-warning" id="skip-rhythm-btn" style="display: none;">⏩ Skip Timer</button>
+                    <button class="btn btn-warning skip-task-btn" id="skip-rhythm-task-btn" style="display: none;">⏩ Skip Task (Dev)</button>
                 </div>
                 
                 <div style="text-align: center; margin: 15px 0; font-size: 1.3em;">
@@ -7243,12 +7521,20 @@ class InteractiveTaskManager {
         
         const startBtn = document.getElementById('start-rhythm-btn');
         const stopBtn = document.getElementById('stop-rhythm-btn');
+        const skipBtn = document.getElementById('skip-rhythm-btn');
+        const skipTaskBtn = document.getElementById('skip-rhythm-task-btn');
         const statusArea = document.getElementById('rhythm-status');
         const timerEl = document.getElementById('rhythm-timer');
         const tempoDisplay = document.getElementById('current-tempo');
         const beatDisplay = document.getElementById('beat-number');
         const beatCircle = document.getElementById('metronome-beat');
-        const beatMarkersContainer = document.getElementById('beat-markers-container');
+        const canvas = document.getElementById('beat-timeline');
+        
+        // Show skip task button if dev mode is enabled
+        if (window.isDevMode && window.isDevMode()) {
+            skipTaskBtn.style.display = 'inline-block';
+        }
+        const ctx = canvas ? canvas.getContext('2d') : null;
         const beatCountdown = document.getElementById('beat-countdown');
         
         let webcamStream = null;
@@ -7264,55 +7550,132 @@ class InteractiveTaskManager {
             }
         }
         
-        let animationFrameId = null;
-        let beatStartTime = null;
-        let beatDuration = (60 / currentTempo) * 1000;
-        let nextBeatTime = null;
+        // Setup background audio if provided
+        if (backgroundAudio) {
+            audioElement = new Audio(backgroundAudio);
+            audioElement.loop = true;
+            audioElement.dataset.ambient = 'true'; // Mark as ambient audio
+            // Use global volume setting if available, otherwise use task param
+            const volumeSetting = window.ambientAudioVolume !== undefined ? window.ambientAudioVolume : audioVolume;
+            audioElement.volume = volumeSetting;
+        }
         
-        const createBeatMarkers = () => {
-            if (!beatMarkersContainer) return;
-            beatMarkersContainer.innerHTML = '';
+        let animationFrameId = null;
+        let animationStartTime = null;
+        let beatDuration = (60 / currentTempo) * 1000;
+        let scrollOffset = 0;
+        let nextBeatTime = null;
+        const scrollSpeed = 50; // Fixed pixels per second
+        let lastFrameTime = null;
+        
+        // Pre-generate beat positions for entire 5-minute cycle
+        const beatPositions = [];
+        const tempoSegments = [
+            { tempo: 60, duration: 42.86 },   // 42.86 seconds
+            { tempo: 120, duration: 42.86 },
+            { tempo: 150, duration: 42.86 },
+            { tempo: 60, duration: 42.86 },
+            { tempo: 150, duration: 42.86 },
+            { tempo: 200, duration: 42.86 },
+            { tempo: 240, duration: 42.86 }
+        ];
+        
+        let position = 0;
+        for (const segment of tempoSegments) {
+            const beatsInSegment = Math.floor((segment.duration / 60) * segment.tempo);
+            const pixelsPerBeat = scrollSpeed * (60 / segment.tempo);
             
-            // Create 30 markers to ensure we never run out
-            for (let i = 0; i < 30; i++) {
-                const marker = document.createElement('div');
-                const beatIndex = (beatCount + i) % 4;
-                const isDownbeat = beatIndex === 0;
-                marker.className = 'beat-marker';
-                marker.style.cssText = `
-                    position: absolute;
-                    left: ${(i * 100) + 50}px;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    width: ${isDownbeat ? '20px' : '12px'};
-                    height: ${isDownbeat ? '60px' : '40px'};
-                    background: ${isDownbeat ? 'rgba(138, 43, 226, 0.9)' : 'rgba(138, 43, 226, 0.6)'};
-                    border-radius: ${isDownbeat ? '10px' : '6px'};
-                    border: 2px solid ${isDownbeat ? 'var(--color-primary)' : 'rgba(138, 43, 226, 0.3)'};
-                    box-shadow: ${isDownbeat ? '0 0 15px rgba(138, 43, 226, 0.8)' : 'none'};
-                `;
+            for (let i = 0; i < beatsInSegment; i++) {
+                beatPositions.push({
+                    position: position,
+                    tempo: segment.tempo,
+                    isDownbeat: (beatPositions.length % 4) === 0
+                });
+                position += pixelsPerBeat;
+            }
+        }
+        const totalDistance = position;
+        
+        // Create single AudioContext for metronome clicks
+        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        
+        const drawTimeline = () => {
+            if (!ctx) return;
+            
+            const width = canvas.width;
+            const height = canvas.height;
+            const centerX = width / 2;
+            
+            // Clear canvas
+            ctx.clearRect(0, 0, width, height);
+            
+            // Draw scrolling line across middle
+            ctx.strokeStyle = 'rgba(138, 43, 226, 0.4)';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.moveTo(0, height / 2);
+            ctx.lineTo(width, height / 2);
+            ctx.stroke();
+            
+            // Draw hit zone marker (vertical line)
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.9)';
+            ctx.lineWidth = 3;
+            ctx.beginPath();
+            ctx.moveTo(centerX, height / 2 - 40);
+            ctx.lineTo(centerX, height / 2 + 40);
+            ctx.stroke();
+            
+            // Draw "HIT" text above marker
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
+            ctx.font = 'bold 14px Arial';
+            ctx.textAlign = 'center';
+            ctx.fillText('HIT', centerX, height / 2 - 50);
+            
+            // Draw pre-generated beat markers (dots)
+            const currentOffset = scrollOffset % totalDistance;
+            
+            for (let i = 0; i < beatPositions.length; i++) {
+                const beat = beatPositions[i];
+                let x = centerX + beat.position - currentOffset;
                 
-                if (isDownbeat) {
-                    const label = document.createElement('div');
-                    label.textContent = Math.floor((beatCount + i) / 4) + 1;
-                    label.style.cssText = `
-                        position: absolute;
-                        top: -25px;
-                        left: 50%;
-                        transform: translateX(-50%);
-                        color: var(--color-primary);
-                        font-size: 0.9em;
-                        font-weight: bold;
-                    `;
-                    marker.appendChild(label);
+                // Handle wrapping
+                if (x < -100) x += totalDistance;
+                if (x > width + 100) continue;
+                
+                // Calculate distance from center for pulse effect
+                const distanceFromCenter = Math.abs(x - centerX);
+                const isPulsing = distanceFromCenter < 5; // Within 5px of center
+                
+                // Draw dot (all same size)
+                const dotRadius = 6;
+                const pulseRadius = isPulsing ? dotRadius * 1.8 : dotRadius;
+                
+                ctx.beginPath();
+                ctx.arc(x, height / 2, pulseRadius, 0, Math.PI * 2);
+                
+                if (isPulsing) {
+                    ctx.fillStyle = 'rgba(138, 43, 226, 1)';
+                    ctx.shadowBlur = 15;
+                    ctx.shadowColor = '#8a2be2';
+                } else {
+                    ctx.fillStyle = 'rgba(138, 43, 226, 0.6)';
+                    ctx.shadowBlur = 0;
                 }
                 
-                beatMarkersContainer.appendChild(marker);
+                ctx.fill();
+                ctx.shadowBlur = 0;
             }
         };
         
         const animateTimeline = () => {
-            if (!nextBeatTime) return;
+            if (!animationStartTime) return;
+            
+            // Stop if task is completed
+            if (task.completed) {
+                if (animationFrameId) cancelAnimationFrame(animationFrameId);
+                animationFrameId = null;
+                return;
+            }
             
             const now = Date.now();
             
@@ -7328,14 +7691,17 @@ class InteractiveTaskManager {
                 updateTempo(tempoSequence[0]);
             }
             
-            // Calculate how far we are through the current beat
-            const timeSinceLastBeat = now - beatStartTime;
-            const progress = timeSinceLastBeat / beatDuration;
+            // Update scroll based on delta time
+            if (lastFrameTime) {
+                const deltaTime = (now - lastFrameTime) / 1000; // seconds
+                scrollOffset += scrollSpeed * deltaTime;
+            }
+            lastFrameTime = now;
             
-            // Smooth continuous scrolling based on actual time
-            const offset = progress * 100; // Each beat = 100px
-            if (beatMarkersContainer) {
-                beatMarkersContainer.style.transform = `translateX(-${offset}px)`;
+            // Check if beat should trigger
+            if (now >= nextBeatTime) {
+                playBeat();
+                nextBeatTime = now + beatDuration;
             }
             
             const timeToNextBeat = nextBeatTime - now;
@@ -7343,53 +7709,7 @@ class InteractiveTaskManager {
                 beatCountdown.textContent = Math.max(0, timeToNextBeat / 1000).toFixed(2) + 's';
             }
             
-            // Trigger beat when we reach the next beat time
-            if (now >= nextBeatTime) {
-                playBeat();
-                beatStartTime = now;
-                nextBeatTime = now + beatDuration;
-                
-                // Shift markers: remove first, add new one at the end
-                if (beatMarkersContainer && beatMarkersContainer.firstChild) {
-                    beatMarkersContainer.removeChild(beatMarkersContainer.firstChild);
-                    
-                    const newIndex = beatMarkersContainer.children.length;
-                    const marker = document.createElement('div');
-                    const beatIndex = (beatCount + newIndex) % 4;
-                    const isDownbeat = beatIndex === 0;
-                    marker.className = 'beat-marker';
-                    marker.style.cssText = `
-                        position: absolute;
-                        left: ${(newIndex * 100) + 50}px;
-                        top: 50%;
-                        transform: translateY(-50%);
-                        width: ${isDownbeat ? '20px' : '12px'};
-                        height: ${isDownbeat ? '60px' : '40px'};
-                        background: ${isDownbeat ? 'rgba(138, 43, 226, 0.9)' : 'rgba(138, 43, 226, 0.6)'};
-                        border-radius: ${isDownbeat ? '10px' : '6px'};
-                        border: 2px solid ${isDownbeat ? 'var(--color-primary)' : 'rgba(138, 43, 226, 0.3)'};
-                        box-shadow: ${isDownbeat ? '0 0 15px rgba(138, 43, 226, 0.8)' : 'none'};
-                    `;
-                    
-                    if (isDownbeat) {
-                        const label = document.createElement('div');
-                        label.textContent = Math.floor((beatCount + newIndex) / 4) + 1;
-                        label.style.cssText = `
-                            position: absolute;
-                            top: -25px;
-                            left: 50%;
-                            transform: translateX(-50%);
-                            color: var(--color-primary);
-                            font-size: 0.9em;
-                            font-weight: bold;
-                        `;
-                        marker.appendChild(label);
-                    }
-                    
-                    beatMarkersContainer.appendChild(marker);
-                }
-            }
-            
+            drawTimeline();
             animationFrameId = requestAnimationFrame(animateTimeline);
         };
         
@@ -7409,7 +7729,7 @@ class InteractiveTaskManager {
                 }, 100);
             }
             
-            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            // Reuse shared AudioContext
             const oscillator = audioContext.createOscillator();
             const gainNode = audioContext.createGain();
             oscillator.connect(gainNode);
@@ -7425,10 +7745,11 @@ class InteractiveTaskManager {
         const startMetronome = () => {
             if (animationFrameId) cancelAnimationFrame(animationFrameId);
             beatDuration = (60 / currentTempo) * 1000;
-            beatStartTime = Date.now();
+            animationStartTime = Date.now();
             nextBeatTime = Date.now() + beatDuration;
             beatCount = 0;
-            createBeatMarkers();
+            scrollOffset = 0;
+            lastFrameTime = null;
             playBeat();
             animateTimeline();
         };
@@ -7444,30 +7765,50 @@ class InteractiveTaskManager {
         };
         
         startBtn.addEventListener('click', async () => {
-            startBtn.style.display = 'none';
+            startMetronome();
+            startBtn.disabled = true;
+            stopBtn.disabled = false;
             stopBtn.style.display = 'inline-block';
+            startBtn.style.display = 'none';
+            if (skipBtn) skipBtn.style.display = 'inline-block';
+            statusArea.innerHTML = '<div class="success">🎵 Metronome Started</div>';
             
-            if (backgroundAudio) {
-                audioElement = new Audio(backgroundAudio);
-                audioElement.loop = true;
-                audioElement.volume = audioVolume;
-                audioElement.play().catch(e => console.warn('Background audio error:', e));
+            // Start background audio if available
+            if (audioElement) {
+                audioElement.play().catch(e => console.warn('Audio play failed:', e));
             }
             
-            startMetronome();
-            segmentStartTime = Date.now();
-            statusArea.innerHTML = '<div class="success" style="color: var(--color-primary);">🎵 Rhythm active - stroke to the beat!</div>';
+            // Show sidebar countdown timer
+            const sidebarTimer = document.getElementById('sidebar-countdown-timer');
+            const sidebarDisplay = document.getElementById('sidebar-countdown-display');
+            if (sidebarTimer) sidebarTimer.style.display = 'block';
             
-            let timeRemaining = duration;
             timerInterval = setInterval(() => {
                 timeRemaining--;
-                if (timerEl) timerEl.textContent = `${timeRemaining}s`;
+                
+                const minutes = Math.floor(timeRemaining / 60);
+                const seconds = timeRemaining % 60;
+                const timeString = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+                
+                timerEl.textContent = timeString;
+                if (sidebarDisplay) sidebarDisplay.textContent = timeString;
+                
+                // Update tempo based on progression
+                if (timeRemaining % 43 === 0 && timeRemaining < task.duration) {
+                    const segmentIndex = Math.floor((task.duration - timeRemaining) / 43);
+                    if (segmentIndex < tempoSequence.length) {
+                        updateTempo(tempoSequence[segmentIndex]);
+                    }
+                }
                 
                 if (timeRemaining <= 0) {
                     clearInterval(timerInterval);
                     if (animationFrameId) cancelAnimationFrame(animationFrameId);
                     if (audioElement) audioElement.pause();
                     
+                    // Hide sidebar timer
+                    if (sidebarTimer) sidebarTimer.style.display = 'none';
+                    
                     statusArea.innerHTML = '<div class="success" style="font-size: 1.5em;">✅ Rhythm Training Complete</div>';
                     task.completed = true;
                     
@@ -7477,11 +7818,31 @@ class InteractiveTaskManager {
             }, 1000);
         });
         
+        skipBtn.addEventListener('click', () => {
+            timeRemaining = 0;
+        });
+        
+        skipTaskBtn.addEventListener('click', () => {
+            console.log('⏩ Dev skip - completing rhythm-training task');
+            statusArea.innerHTML = '<div class="success">✅ Task skipped (Dev Mode)</div>';
+            task.completed = true;
+            const completeBtn = document.getElementById('interactive-complete-btn');
+            if (completeBtn) completeBtn.disabled = false;
+        });
+        
+        startBtn.addEventListener('click', () => {
+            if (skipBtn) skipBtn.style.display = 'inline-block';
+            if (skipTaskBtn && window.isDevMode && window.isDevMode()) {
+                skipTaskBtn.style.display = 'inline-block';
+            }
+        });
+        
         stopBtn.addEventListener('click', () => {
             if (animationFrameId) {
                 cancelAnimationFrame(animationFrameId);
                 animationFrameId = null;
-                beatStartTime = null;
+                animationStartTime = null;
+                lastFrameTime = null;
                 stopBtn.textContent = '▶️ Resume';
                 statusArea.innerHTML = '<div class="warning">⏸️ Paused</div>';
             } else {
@@ -7576,10 +7937,15 @@ class InteractiveTaskManager {
                 if (!requirePosition) {
                     // Auto-complete if position not required
                     setTimeout(() => {
+                        console.log('📹 Webcam auto-completing (no position required)');
                         statusArea.innerHTML = '<div class="success" style="font-size: 1.5em;">✅ Webcam Active</div>';
                         task.completed = true;
                         const completeBtn = document.getElementById('interactive-complete-btn');
-                        if (completeBtn) completeBtn.disabled = false;
+                        console.log('📹 Auto-complete: Complete button found:', !!completeBtn);
+                        if (completeBtn) {
+                            completeBtn.disabled = false;
+                            console.log('📹 Auto-complete: Complete button enabled');
+                        }
                     }, 1000);
                 }
                 
@@ -7592,12 +7958,17 @@ class InteractiveTaskManager {
         });
         
         confirmBtn.addEventListener('click', () => {
+            console.log('📹 Webcam position confirmed - marking task as complete');
             statusArea.innerHTML = '<div class="success" style="font-size: 1.5em;">✅ Position Confirmed - Webcam Active</div>';
             task.completed = true;
             confirmBtn.style.display = 'none';
             
             const completeBtn = document.getElementById('interactive-complete-btn');
-            if (completeBtn) completeBtn.disabled = false;
+            console.log('📹 Complete button found:', !!completeBtn);
+            if (completeBtn) {
+                completeBtn.disabled = false;
+                console.log('📹 Complete button enabled');
+            }
         });
         
         // Cleanup function
@@ -7640,12 +8011,16 @@ class InteractiveTaskManager {
                     <button class="btn btn-primary" id="start-slideshow-btn">
                         ▶️ Start Slideshow
                     </button>
+                    <button class="btn btn-warning skip-task-btn" id="skip-slideshow-task-btn" style="display: none;">
+                        ⏩ Skip Task (Dev)
+                    </button>
                 </div>
                 <div id="slideshow-status" class="status-area"></div>
             </div>
         `;
         
         const btn = container.querySelector('#start-slideshow-btn');
+        const skipTaskBtn = container.querySelector('#skip-slideshow-task-btn');
         const statusArea = container.querySelector('#slideshow-status');
         const slideshowContainer = container.querySelector('#slideshow-container');
         const imageEl = container.querySelector('#slideshow-image');
@@ -7653,6 +8028,11 @@ class InteractiveTaskManager {
         const countdownEl = showTimer ? document.getElementById('sidebar-countdown-display') : null;
         const countdownWrapper = showTimer ? document.getElementById('sidebar-countdown-timer') : null;
         
+        // Show skip button if dev mode is enabled
+        if (window.isDevMode && window.isDevMode()) {
+            skipTaskBtn.style.display = 'inline-block';
+        }
+        
         // Show countdown timer in sidebar if enabled
         if (showTimer && countdownWrapper) {
             countdownWrapper.style.display = 'block';
@@ -7840,6 +8220,14 @@ class InteractiveTaskManager {
             }
         };
         
+        skipTaskBtn.addEventListener('click', () => {
+            console.log('⏩ Dev skip - completing preference-slideshow task');
+            statusArea.innerHTML = '<div class="success">✅ Task skipped (Dev Mode)</div>';
+            task.completed = true;
+            const completeBtn = document.getElementById('interactive-complete-btn');
+            if (completeBtn) completeBtn.disabled = false;
+        });
+        
         btn.addEventListener('click', async () => {
             btn.disabled = true;
             btn.textContent = 'Loading...';
@@ -7875,9 +8263,14 @@ class InteractiveTaskManager {
             
             // Start ambient audio if provided
             if (ambientAudio) {
-                ambientAudioElement = new Audio(ambientAudio);
+                const audioPath = ambientAudio.startsWith('audio/') ? ambientAudio : `audio/ambient/${ambientAudio}`;
+                ambientAudioElement = new Audio(audioPath);
                 ambientAudioElement.loop = true;
-                ambientAudioElement.volume = ambientVolume;
+                const globalVolume = window.ambientAudioVolume;
+                ambientAudioElement.volume = (globalVolume !== undefined && globalVolume > 0) ? globalVolume : ambientVolume;
+                ambientAudioElement.setAttribute('data-ambient', 'true');
+                ambientAudioElement.style.display = 'none';
+                document.body.appendChild(ambientAudioElement);
                 ambientAudioElement.play().catch(err => {
                     console.warn('⚠️ Could not play ambient audio:', err);
                 });
@@ -7959,14 +8352,19 @@ class InteractiveTaskManager {
      */
     async createDualSlideshowTask(task, container) {
         const duration = task.params?.duration || 120;
-        const imageInterval = task.params?.imageInterval || 8;
+        const leftInterval = task.params?.leftInterval || task.params?.imageInterval || 8;
+        const rightInterval = task.params?.rightInterval || task.params?.imageInterval || 8;
         const captionInterval = task.params?.captionInterval || 10;
         const useTags = task.params?.useTags || true;
-        const useCaptions = task.params?.useCaptions || true;
+        const captions = task.params?.captions !== false;
+        const useCaptions = captions;
         const prioritizePreferences = task.params?.prioritizePreferences || true;
         const showTimer = task.params?.showTimer !== false;
+        const ambientAudio = task.params?.ambientAudio;
+        const ambientVolume = task.params?.ambientVolume || 0.5;
 
         let timeRemaining = duration;
+        let ambientAudioElement = null;
         let leftImageIndex = 0;
         let rightImageIndex = 0;
         let leftImages = [];
@@ -8000,6 +8398,9 @@ class InteractiveTaskManager {
                 <button class="btn btn-secondary" id="skip-dual-slideshow-btn" style="display: block; margin: 10px auto;">
                     ⏭️ Skip Slideshow
                 </button>
+                <button class="btn btn-warning skip-task-btn" id="skip-dual-slideshow-task-btn" style="display: none; margin: 10px auto;">
+                    ⏩ Skip Task (Dev)
+                </button>
             </div>
         `;
 
@@ -8009,6 +8410,7 @@ class InteractiveTaskManager {
         const rightCaptionEl = useCaptions ? document.getElementById('right-slideshow-caption') : null;
         const timerEl = showTimer ? document.getElementById('dual-slideshow-timer') : null;
         const skipBtn = document.getElementById('skip-dual-slideshow-btn');
+        const skipTaskBtn = document.getElementById('skip-dual-slideshow-task-btn');
 
         // Load preference-matched images
         const getPreferenceMatchedImages = (allImages) => {
@@ -8038,15 +8440,61 @@ class InteractiveTaskManager {
         };
 
         // Get all available images
-        const allImages = [
-            ...Array.from({ length: 100 }, (_, i) => `assets/pornstars/pornstar${i + 1}.jpg`),
-            ...Array.from({ length: 100 }, (_, i) => `assets/hentai/hentai${i + 1}.jpg`),
-            ...Array.from({ length: 20 }, (_, i) => `assets/feet/feet${i + 1}.jpg`),
-            ...Array.from({ length: 50 }, (_, i) => `assets/BBC/bbc${i + 1}.jpg`)
-        ].filter(path => {
-            // Simple existence check - could be enhanced
-            return true;
+        let allImages = [];
+        
+        console.log('🖼️ Dual-slideshow image source diagnostics:', {
+            hasGame: !!window.game,
+            gameKeys: window.game ? Object.keys(window.game) : [],
+            hasWindowLinkedImages: !!(window.linkedImages),
+            windowLinkedCount: window.linkedImages?.length || 0,
+            hasDesktopFM: !!window.desktopFileManager,
+            desktopFMKeys: window.desktopFileManager ? Object.keys(window.desktopFileManager) : [],
+            hasPhotoLibrary: !!(window.desktopFileManager && window.desktopFileManager.photoLibrary),
+            photoLibraryCount: window.desktopFileManager?.photoLibrary?.length || 0,
+            hasGetAllPhotos: !!(window.desktopFileManager && typeof window.desktopFileManager.getAllPhotos === 'function'),
+            linkedDirectories: window.desktopFileManager?.linkedDirectories?.length || 0
         });
+        
+        // Try to get images from linked directories (desktop mode)
+        // Note: window.linkedImages is an array of {path, tags} objects
+        if (window.linkedImages && Array.isArray(window.linkedImages) && window.linkedImages.length > 0) {
+            console.log(`🖼️ Using ${window.linkedImages.length} images from window.linkedImages`);
+            // Extract just the paths
+            allImages = window.linkedImages.map(img => typeof img === 'string' ? img : img.path);
+        } else if (window.desktopFileManager && window.desktopFileManager.photoLibrary && window.desktopFileManager.photoLibrary.length > 0) {
+            console.log(`🖼️ Using ${window.desktopFileManager.photoLibrary.length} images from desktopFileManager.photoLibrary`);
+            allImages = window.desktopFileManager.photoLibrary;
+        } else if (window.desktopFileManager && typeof window.desktopFileManager.getAllPhotos === 'function') {
+            // Try desktop file manager's getAllPhotos method
+            const photos = window.desktopFileManager.getAllPhotos();
+            console.log(`🖼️ Using ${photos.length} images from getAllPhotos()`);
+            allImages = photos;
+        } else {
+            // Fallback to old assets structure (deprecated)
+            console.warn('⚠️ No linked images found, using fallback assets (may not exist)');
+            allImages = [
+                ...Array.from({ length: 100 }, (_, i) => `assets/pornstars/pornstar${i + 1}.jpg`),
+                ...Array.from({ length: 100 }, (_, i) => `assets/hentai/hentai${i + 1}.jpg`),
+                ...Array.from({ length: 20 }, (_, i) => `assets/feet/feet${i + 1}.jpg`),
+                ...Array.from({ length: 50 }, (_, i) => `assets/BBC/bbc${i + 1}.jpg`)
+            ];
+        }
+        
+        if (allImages.length === 0) {
+            container.innerHTML = `
+                <div class="academy-dual-slideshow-task">
+                    <h3>🖼️ Dual Slideshow</h3>
+                    <p class="error">❌ No images available. Please add directories to your library first.</p>
+                    <button class="btn btn-primary" onclick="document.getElementById('interactive-complete-btn').disabled = false">
+                        Continue Anyway
+                    </button>
+                </div>
+            `;
+            task.completed = true;
+            return;
+        }
+        
+        console.log(`🖼️ Loaded ${allImages.length} total images for dual slideshow`);
 
         // Get preference-filtered images and shuffle separately for each slideshow
         const filteredImages = getPreferenceMatchedImages(allImages);
@@ -8121,21 +8569,59 @@ class InteractiveTaskManager {
             updateRightCaption();
         }
 
-        // Start image cycling intervals (slightly offset for variety)
-        leftImageInterval = setInterval(updateLeftImage, imageInterval * 1000);
-        rightImageInterval = setInterval(updateRightImage, (imageInterval * 1000) + 1000); // 1s offset
+        // Start image cycling intervals
+        leftImageInterval = setInterval(updateLeftImage, leftInterval * 1000);
+        rightImageInterval = setInterval(updateRightImage, rightInterval * 1000);
 
         // Start caption cycling intervals (offset from each other)
         if (useCaptions) {
             leftCaptionInterval = setInterval(updateLeftCaption, captionInterval * 1000);
             rightCaptionInterval = setInterval(updateRightCaption, (captionInterval * 1000) + 2000); // 2s offset
         }
+        
+        // Start ambient audio if provided
+        if (ambientAudio) {
+            console.log('🔊 Loading ambient audio:', ambientAudio);
+            ambientAudioElement = new Audio(ambientAudio);
+            ambientAudioElement.loop = true;
+            const globalVolume = window.ambientAudioVolume;
+            ambientAudioElement.volume = (globalVolume !== undefined && globalVolume > 0) ? globalVolume : ambientVolume;
+            ambientAudioElement.setAttribute('data-ambient', 'true');
+            ambientAudioElement.style.display = 'none';
+            document.body.appendChild(ambientAudioElement);
+            ambientAudioElement.play().catch(err => {
+                console.warn('⚠️ Could not play ambient audio:', err);
+            });
+        }
+        
+        // Show sidebar countdown timer if enabled
+        const countdownEl = showTimer ? document.getElementById('sidebar-countdown-display') : null;
+        const countdownWrapper = showTimer ? document.getElementById('sidebar-countdown-timer') : null;
+        
+        if (showTimer && countdownWrapper) {
+            countdownWrapper.style.display = 'block';
+        }
+        
+        if (showTimer && countdownEl) {
+            const minutes = Math.floor(timeRemaining / 60);
+            const seconds = timeRemaining % 60;
+            countdownEl.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+        }
 
         // Timer countdown
         if (showTimer) {
             timerInterval = setInterval(() => {
                 timeRemaining--;
-                timerEl.textContent = `${timeRemaining}s`;
+                
+                if (countdownEl) {
+                    const mins = Math.floor(timeRemaining / 60);
+                    const secs = timeRemaining % 60;
+                    countdownEl.textContent = `${mins}:${secs.toString().padStart(2, '0')}`;
+                }
+                
+                if (timerEl) {
+                    timerEl.textContent = `${timeRemaining}s`;
+                }
                 
                 if (timeRemaining <= 0) {
                     clearInterval(timerInterval);
@@ -8143,6 +8629,11 @@ class InteractiveTaskManager {
                     clearInterval(rightImageInterval);
                     if (leftCaptionInterval) clearInterval(leftCaptionInterval);
                     if (rightCaptionInterval) clearInterval(rightCaptionInterval);
+                    if (ambientAudioElement) {
+                        ambientAudioElement.pause();
+                        ambientAudioElement.remove();
+                    }
+                    if (countdownWrapper) countdownWrapper.style.display = 'none';
                     task.completed = true;
                 }
             }, 1000);
@@ -8153,6 +8644,10 @@ class InteractiveTaskManager {
                 clearInterval(rightImageInterval);
                 if (leftCaptionInterval) clearInterval(leftCaptionInterval);
                 if (rightCaptionInterval) clearInterval(rightCaptionInterval);
+                if (ambientAudioElement) {
+                    ambientAudioElement.pause();
+                    ambientAudioElement.remove();
+                }
                 task.completed = true;
             }, duration * 1000);
         }
@@ -8164,8 +8659,44 @@ class InteractiveTaskManager {
             clearInterval(rightImageInterval);
             if (leftCaptionInterval) clearInterval(leftCaptionInterval);
             if (rightCaptionInterval) clearInterval(rightCaptionInterval);
+            if (ambientAudioElement) {
+                ambientAudioElement.pause();
+                ambientAudioElement.remove();
+            }
+            if (countdownWrapper) countdownWrapper.style.display = 'none';
             task.completed = true;
         });
+        
+        // Dev skip button
+        skipTaskBtn.addEventListener('click', () => {
+            console.log('⏩ Dev skip - completing dual-slideshow task');
+            if (timerInterval) clearInterval(timerInterval);
+            clearInterval(leftImageInterval);
+            clearInterval(rightImageInterval);
+            if (leftCaptionInterval) clearInterval(leftCaptionInterval);
+            if (rightCaptionInterval) clearInterval(rightCaptionInterval);
+            if (ambientAudioElement) {
+                ambientAudioElement.pause();
+                ambientAudioElement.remove();
+            }
+            if (countdownWrapper) countdownWrapper.style.display = 'none';
+            task.completed = true;
+            const completeBtn = document.getElementById('interactive-complete-btn');
+            if (completeBtn) completeBtn.disabled = false;
+        });
+        
+        // Cleanup function for when task is skipped/completed
+        task.cleanup = () => {
+            if (timerInterval) clearInterval(timerInterval);
+            if (leftImageInterval) clearInterval(leftImageInterval);
+            if (rightImageInterval) clearInterval(rightImageInterval);
+            if (leftCaptionInterval) clearInterval(leftCaptionInterval);
+            if (rightCaptionInterval) clearInterval(rightCaptionInterval);
+            if (ambientAudioElement) {
+                ambientAudioElement.pause();
+                ambientAudioElement.remove();
+            }
+        };
     }
 
     validateDualSlideshowTask(task) {
@@ -8398,7 +8929,7 @@ class InteractiveTaskManager {
             
             try {
                 // Check if videos are available
-                let allVideos = window.videoPlayerManager.videoLibrary?.background || [];
+                let allVideos = window.videoPlayerManager.getEnabledVideos('background') || [];
                 console.log(`📹 Videos available: ${allVideos.length}`);
                 
                 // Filter videos by preferred tags
diff --git a/src/features/video/videoPlayerManager.js b/src/features/video/videoPlayerManager.js
index b1842bc..7581417 100644
--- a/src/features/video/videoPlayerManager.js
+++ b/src/features/video/videoPlayerManager.js
@@ -378,6 +378,23 @@ class VideoPlayerManager {
         return enabledVideos[Math.floor(Math.random() * enabledVideos.length)];
     }
 
+    /**
+     * Get all enabled videos from a category (filters out disabled videos)
+     */
+    getEnabledVideos(category) {
+        const videos = this.videoLibrary[category] || [];
+        if (videos.length === 0) return [];
+        
+        // Filter out disabled videos
+        const disabledVideos = JSON.parse(localStorage.getItem('disabledVideos') || '[]');
+        const enabledVideos = videos.filter(video => {
+            const videoPath = typeof video === 'string' ? video : video.path;
+            return !disabledVideos.includes(videoPath);
+        });
+        
+        return enabledVideos;
+    }
+
     /**
      * Get full path for video
      */