Update script.js

script.js

@@ -168,24 +168,50 @@ function updateYouTubeEmbed(timestampSeconds) {
     fullscreenYoutubeIframeMobile.src = embedUrl;
 }
 
-// Render step indicators
+// Render step indicators with pagination
 function renderStepIndicators(containerId, currentStep, onClick) {
     const container = document.getElementById(containerId);
     container.innerHTML = '';
     
     const groupStart = Math.floor((currentStep - 1) / 10) * 10 + 1;
+    const groupEnd = Math.min(groupStart + 9, TOTAL_STEPS);
+    const canGoPrevGroup = groupStart > 1;
+    const canGoNextGroup = groupEnd < TOTAL_STEPS;
     
+    // Previous group button
+    if (canGoPrevGroup) {
+        const prevGroupBtn = document.createElement('button');
+        prevGroupBtn.className = 'step-indicator-nav';
+        prevGroupBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>';
+        prevGroupBtn.setAttribute('aria-label', 'Previous group');
+        prevGroupBtn.addEventListener('click', () => onClick(groupStart - 1));
+        container.appendChild(prevGroupBtn);
+    }
+    
+    // Step number buttons    
     for (let i = 0; i < 10; i++) {
         const stepNum = groupStart + i;
         if (stepNum > TOTAL_STEPS) break;
         
         const isActive = stepNum === currentStep;
         const button = document.createElement('button');
-        button.className = `step-indicator ${isActive ? 'step-indicator-active' : 'step-indicator-inactive'}`;
+        button.className = `step-indicator-num ${isActive ? 'step-indicator-num-active' : ''}`;
+        button.textContent = stepNum;
         button.setAttribute('aria-label', `Go to step ${stepNum}`);
         button.addEventListener('click', () => onClick(stepNum));
         container.appendChild(button);
     }
+    
+    // Next group button
+    if (canGoNextGroup) {
+        const nextGroupBtn = document.createElement('button');
+        nextGroupBtn.className = 'step-indicator-nav';
+        nextGroupBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>';
+        nextGroupBtn.setAttribute('aria-label', 'Next group');
+        nextGroupBtn.addEventListener('click', () => onClick(groupEnd + 1));
+        container.appendChild(nextGroupBtn);
+    }
+    }
 }
 
 // Update UI