Function createTutorialOverlayInModal

index.js:5104–5133

(modal)

// Create tutorial overlay in modal (reusing existing code pattern)
function createTutorialOverlayInModal(modal) {
    const tutorialHTML = `
        <!-- Tutorial Overlay -->
        <div class="carrot-tutorial-overlay" id="carrot-tutorial-overlay" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999;">
            <div class="carrot-tutorial-spotlight" id="carrot-tutorial-spotlight"></div>
            <div class="carrot-tutorial-popup" id="carrot-tutorial-popup">
                <div class="carrot-tutorial-popup-header">
                    <h4 id="carrot-tutorial-popup-title">Tutorial Step</h4>
                    <button class="carrot-tutorial-close" onclick="CarrotKernel.closeTutorial()">
                        <i class="fa-solid fa-times"></i>
                    </button>
                </div>
                <div class="carrot-tutorial-popup-content" id="carrot-tutorial-popup-content">
                    <!-- Tutorial content -->
                </div>
                <div class="carrot-tutorial-popup-nav">
                    <button class="carrot-tutorial-prev" id="carrot-tutorial-prev" onclick="CarrotKernel.previousTutorialStep()">
                        <i class="fa-solid fa-arrow-left"></i> Previous
                    </button>
                    <span class="carrot-tutorial-progress" id="carrot-tutorial-progress">1 / 5</span>
                    <button class="carrot-tutorial-next" id="carrot-tutorial-next" onclick="CarrotKernel.nextTutorialStep()">
                        Next <i class="fa-solid fa-arrow-right"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
    modal.insertAdjacentHTML('beforeend', tutorialHTML);
    CarrotDebug.tutorial('✅ Tutorial overlay created in modal');
}

// Create tutorial overlay in document
function createTutorialOverlayInDocument() {
    const tutorialHTML = `