commit 10e6e1b3d47e6cb5e89c6ba615ca01b1d9ea01a7
Author: Rosario Moscato <rosariomoscatolab@gmail.com>
Date:   Mon Sep 8 10:02:03 2025 +0200

    Add files via upload

diff --git a/app.js b/app.js
new file mode 100644
index 0000000..77c620b
--- /dev/null
+++ b/app.js
@@ -0,0 +1,583 @@
+class PresentationApp {
+    constructor() {
+        this.currentSlide = 1;
+        this.totalSlides = 26;
+        this.isFullscreen = false;
+        this.autoAdvance = false;
+        this.autoAdvanceInterval = null;
+        this.touchStartX = 0;
+        this.touchStartY = 0;
+        
+        this.init();
+    }
+    
+    init() {
+        this.setupElements();
+        this.setupEventListeners();
+        this.updateDisplay();
+        this.preloadSlides();
+    }
+    
+    setupElements() {
+        this.slidesContainer = document.getElementById('slidesContainer');
+        this.slides = document.querySelectorAll('.slide');
+        this.prevBtn = document.getElementById('prevBtn');
+        this.nextBtn = document.getElementById('nextBtn');
+        this.currentSlideSpan = document.getElementById('currentSlide');
+        this.totalSlidesSpan = document.getElementById('totalSlides');
+        this.progressFill = document.querySelector('.progress-fill');
+        this.fullscreenBtn = document.getElementById('fullscreenBtn');
+        this.overviewBtn = document.getElementById('overviewBtn');
+        
+        // Update total slides display
+        this.totalSlidesSpan.textContent = this.totalSlides;
+    }
+    
+    setupEventListeners() {
+        // Navigation buttons
+        this.prevBtn.addEventListener('click', () => this.previousSlide());
+        this.nextBtn.addEventListener('click', () => this.nextSlide());
+        
+        // Keyboard navigation
+        document.addEventListener('keydown', (e) => {
+            switch(e.key) {
+                case 'ArrowRight':
+                case ' ':
+                case 'PageDown':
+                    e.preventDefault();
+                    this.nextSlide();
+                    break;
+                case 'ArrowLeft':
+                case 'PageUp':
+                    e.preventDefault();
+                    this.previousSlide();
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    this.goToSlide(1);
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    this.goToSlide(this.totalSlides);
+                    break;
+                case 'Escape':
+                    if (this.isFullscreen) {
+                        this.exitFullscreen();
+                    }
+                    break;
+                case 'f':
+                case 'F':
+                    this.toggleFullscreen();
+                    break;
+            }
+        });
+        
+        // Click to advance
+        this.slidesContainer.addEventListener('click', (e) => {
+            // Don't advance if clicking on interactive elements
+            if (e.target.tagName === 'BUTTON' || e.target.closest('button')) {
+                return;
+            }
+            this.nextSlide();
+        });
+        
+        // Touch/swipe support
+        this.slidesContainer.addEventListener('touchstart', (e) => {
+            this.touchStartX = e.touches[0].clientX;
+            this.touchStartY = e.touches[0].clientY;
+        }, { passive: true });
+        
+        this.slidesContainer.addEventListener('touchend', (e) => {
+            if (!this.touchStartX || !this.touchStartY) return;
+            
+            const touchEndX = e.changedTouches[0].clientX;
+            const touchEndY = e.changedTouches[0].clientY;
+            const deltaX = this.touchStartX - touchEndX;
+            const deltaY = this.touchStartY - touchEndY;
+            
+            // Check if horizontal swipe is more significant than vertical
+            if (Math.abs(deltaX) > Math.abs(deltaY)) {
+                if (Math.abs(deltaX) > 50) { // Minimum swipe distance
+                    if (deltaX > 0) {
+                        this.nextSlide();
+                    } else {
+                        this.previousSlide();
+                    }
+                }
+            }
+            
+            this.touchStartX = 0;
+            this.touchStartY = 0;
+        }, { passive: true });
+        
+        // Control buttons
+        this.fullscreenBtn.addEventListener('click', () => this.toggleFullscreen());
+        this.overviewBtn.addEventListener('click', () => this.showOverview());
+        
+        // Fullscreen change events
+        document.addEventListener('fullscreenchange', () => {
+            this.isFullscreen = !this.isFullscreen;
+            this.updateFullscreenButton();
+        });
+        
+        // Prevent context menu on right click
+        document.addEventListener('contextmenu', (e) => {
+            e.preventDefault();
+        });
+        
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            this.handleResize();
+        });
+    }
+    
+    preloadSlides() {
+        // Add entrance animations to bullet points
+        this.slides.forEach((slide, index) => {
+            const bullets = slide.querySelectorAll('.bullet-list li');
+            bullets.forEach((bullet, bulletIndex) => {
+                bullet.style.animationDelay = `${(bulletIndex + 1) * 0.1}s`;
+            });
+        });
+    }
+    
+    nextSlide() {
+        if (this.currentSlide < this.totalSlides) {
+            this.goToSlide(this.currentSlide + 1);
+        }
+    }
+    
+    previousSlide() {
+        if (this.currentSlide > 1) {
+            this.goToSlide(this.currentSlide - 1);
+        }
+    }
+    
+    goToSlide(slideNumber) {
+        if (slideNumber < 1 || slideNumber > this.totalSlides) return;
+        
+        // Remove active class from current slide
+        const currentSlideElement = document.querySelector('.slide.active');
+        if (currentSlideElement) {
+            currentSlideElement.classList.remove('active');
+            currentSlideElement.classList.add('prev');
+        }
+        
+        // Add active class to new slide
+        const newSlideElement = document.querySelector(`[data-slide="${slideNumber}"]`);
+        if (newSlideElement) {
+            // Remove prev class from all slides
+            this.slides.forEach(slide => slide.classList.remove('prev'));
+            
+            newSlideElement.classList.add('active');
+            
+            // Trigger entrance animations
+            this.triggerSlideAnimations(newSlideElement);
+        }
+        
+        this.currentSlide = slideNumber;
+        this.updateDisplay();
+    }
+    
+    triggerSlideAnimations(slideElement) {
+        // Reset and trigger bullet point animations
+        const bullets = slideElement.querySelectorAll('.bullet-list li');
+        bullets.forEach((bullet, index) => {
+            bullet.style.animation = 'none';
+            bullet.offsetHeight; // Trigger reflow
+            bullet.style.animation = `fadeInUp 0.6s ease-out ${(index + 1) * 0.1}s both`;
+        });
+        
+        // Trigger other element animations
+        const animatedElements = slideElement.querySelectorAll('.aspect-card, .transform-item, .mode-card');
+        animatedElements.forEach((element, index) => {
+            element.style.transform = 'translateY(20px)';
+            element.style.opacity = '0';
+            
+            setTimeout(() => {
+                element.style.transition = 'all 0.6s ease-out';
+                element.style.transform = 'translateY(0)';
+                element.style.opacity = '1';
+            }, (index + 1) * 100);
+        });
+    }
+    
+    updateDisplay() {
+        // Update slide counter
+        this.currentSlideSpan.textContent = this.currentSlide;
+        
+        // Update progress bar
+        const progress = (this.currentSlide / this.totalSlides) * 100;
+        this.progressFill.style.width = `${progress}%`;
+        
+        // Update navigation buttons
+        this.prevBtn.disabled = this.currentSlide === 1;
+        this.nextBtn.disabled = this.currentSlide === this.totalSlides;
+        
+        // Update button opacity based on state
+        this.prevBtn.style.opacity = this.currentSlide === 1 ? '0.5' : '1';
+        this.nextBtn.style.opacity = this.currentSlide === this.totalSlides ? '0.5' : '1';
+    }
+    
+    toggleFullscreen() {
+        if (!this.isFullscreen) {
+            this.enterFullscreen();
+        } else {
+            this.exitFullscreen();
+        }
+    }
+    
+    enterFullscreen() {
+        const element = document.documentElement;
+        if (element.requestFullscreen) {
+            element.requestFullscreen();
+        } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen();
+        } else if (element.webkitRequestFullscreen) {
+            element.webkitRequestFullscreen();
+        } else if (element.msRequestFullscreen) {
+            element.msRequestFullscreen();
+        }
+    }
+    
+    exitFullscreen() {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
+    }
+    
+    updateFullscreenButton() {
+        this.fullscreenBtn.textContent = this.isFullscreen ? '⛶' : '⛶';
+        this.fullscreenBtn.title = this.isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen';
+    }
+    
+    showOverview() {
+        // Create overview modal
+        const modal = document.createElement('div');
+        modal.className = 'overview-modal';
+        modal.innerHTML = `
+            <div class="overview-content">
+                <div class="overview-header">
+                    <h2>Slide Overview</h2>
+                    <button class="close-overview">×</button>
+                </div>
+                <div class="overview-grid">
+                    ${this.generateOverviewThumbnails()}
+                </div>
+            </div>
+        `;
+        
+        // Add modal styles
+        const style = document.createElement('style');
+        style.textContent = `
+            .overview-modal {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0, 0, 0, 0.9);
+                z-index: 2000;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 20px;
+                box-sizing: border-box;
+            }
+            .overview-content {
+                background: white;
+                border-radius: 15px;
+                padding: 30px;
+                max-width: 1200px;
+                max-height: 90vh;
+                overflow-y: auto;
+                width: 100%;
+            }
+            .overview-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 30px;
+                border-bottom: 2px solid #3498db;
+                padding-bottom: 15px;
+            }
+            .overview-header h2 {
+                color: #2c3e50;
+                margin: 0;
+            }
+            .close-overview {
+                background: #e74c3c;
+                color: white;
+                border: none;
+                width: 35px;
+                height: 35px;
+                border-radius: 50%;
+                font-size: 20px;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            .close-overview:hover {
+                background: #c0392b;
+            }
+            .overview-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+                gap: 20px;
+            }
+            .overview-slide {
+                background: #f8f9fa;
+                border: 2px solid #e9ecef;
+                border-radius: 10px;
+                padding: 15px;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                text-align: center;
+            }
+            .overview-slide:hover {
+                border-color: #3498db;
+                transform: translateY(-5px);
+                box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
+            }
+            .overview-slide.current {
+                border-color: #27ae60;
+                background: rgba(39, 174, 96, 0.1);
+            }
+            .overview-slide-number {
+                background: #3498db;
+                color: white;
+                border-radius: 50%;
+                width: 30px;
+                height: 30px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: bold;
+                margin: 0 auto 10px;
+            }
+            .overview-slide.current .overview-slide-number {
+                background: #27ae60;
+            }
+            .overview-slide-title {
+                font-size: 0.9rem;
+                color: #2c3e50;
+                font-weight: 600;
+                line-height: 1.3;
+            }
+        `;
+        
+        document.head.appendChild(style);
+        document.body.appendChild(modal);
+        
+        // Add event listeners
+        modal.querySelector('.close-overview').addEventListener('click', () => {
+            document.body.removeChild(modal);
+            document.head.removeChild(style);
+        });
+        
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                document.body.removeChild(modal);
+                document.head.removeChild(style);
+            }
+        });
+        
+        // Add slide navigation
+        modal.querySelectorAll('.overview-slide').forEach((slide, index) => {
+            slide.addEventListener('click', () => {
+                this.goToSlide(index + 1);
+                document.body.removeChild(modal);
+                document.head.removeChild(style);
+            });
+        });
+    }
+    
+    generateOverviewThumbnails() {
+        const slideTitles = [
+            "Title Slide",
+            "Abstract",
+            "Introduction: AI in Creation",
+            "Theological Foundations",
+            "The Language of Imago Dei",
+            "Teilhard's Digital Noosphere",
+            "The Two Books and Digital Code",
+            "AI as a Semantic System",
+            "Semantic Grounding",
+            "Artificial Consciousness",
+            "Language Bridge",
+            "Behavioral Transformations",
+            "Research Changes",
+            "Philosophical Reasoning",
+            "AI-Assisted Theology",
+            "Ethical Dimensions",
+            "Church's Magisterium",
+            "Ethics of Algorithms",
+            "Theological Governance",
+            "Conclusions",
+            "Theology for Digital Age",
+            "Gift and Responsibility",
+            "Toward Digital Hope",
+            "Questions and Answers",
+            "Sample Q&A",
+            "Continue the Dialogue"
+        ];
+        
+        return slideTitles.map((title, index) => {
+            const slideNumber = index + 1;
+            const currentClass = slideNumber === this.currentSlide ? 'current' : '';
+            return `
+                <div class="overview-slide ${currentClass}" data-slide="${slideNumber}">
+                    <div class="overview-slide-number">${slideNumber}</div>
+                    <div class="overview-slide-title">${title}</div>
+                </div>
+            `;
+        }).join('');
+    }
+    
+    handleResize() {
+        // Adjust layout for different screen sizes
+        const slideContents = document.querySelectorAll('.slide-content');
+        slideContents.forEach(content => {
+            if (window.innerWidth < 768) {
+                content.style.fontSize = '0.9rem';
+            } else {
+                content.style.fontSize = '';
+            }
+        });
+    }
+    
+    // Auto-advance functionality
+    startAutoAdvance(intervalSeconds = 30) {
+        this.stopAutoAdvance();
+        this.autoAdvance = true;
+        this.autoAdvanceInterval = setInterval(() => {
+            if (this.currentSlide < this.totalSlides) {
+                this.nextSlide();
+            } else {
+                this.stopAutoAdvance();
+            }
+        }, intervalSeconds * 1000);
+    }
+    
+    stopAutoAdvance() {
+        if (this.autoAdvanceInterval) {
+            clearInterval(this.autoAdvanceInterval);
+            this.autoAdvanceInterval = null;
+        }
+        this.autoAdvance = false;
+    }
+    
+    // Utility methods
+    addCustomEventListeners() {
+        // Add number key navigation
+        document.addEventListener('keydown', (e) => {
+            if (e.key >= '1' && e.key <= '9') {
+                const slideNumber = parseInt(e.key);
+                if (slideNumber <= this.totalSlides) {
+                    this.goToSlide(slideNumber);
+                }
+            }
+        });
+        
+        // Add mouse wheel navigation
+        document.addEventListener('wheel', (e) => {
+            if (Math.abs(e.deltaY) > 50) {
+                if (e.deltaY > 0) {
+                    this.nextSlide();
+                } else {
+                    this.previousSlide();
+                }
+            }
+        }, { passive: true });
+    }
+    
+    // Initialize additional features
+    initializeAdvancedFeatures() {
+        this.addCustomEventListeners();
+        
+        // Add presentation timer
+        this.startTime = Date.now();
+        
+        // Add slide visit tracking
+        this.slideVisits = new Array(this.totalSlides).fill(0);
+        this.slideVisits[0] = 1; // First slide visited
+        
+        // Update visit count when slide changes
+        const originalGoToSlide = this.goToSlide.bind(this);
+        this.goToSlide = function(slideNumber) {
+            originalGoToSlide(slideNumber);
+            if (slideNumber >= 1 && slideNumber <= this.totalSlides) {
+                this.slideVisits[slideNumber - 1]++;
+            }
+        };
+    }
+    
+    // Get presentation statistics
+    getPresentationStats() {
+        const currentTime = Date.now();
+        const duration = Math.floor((currentTime - this.startTime) / 1000);
+        const minutes = Math.floor(duration / 60);
+        const seconds = duration % 60;
+        
+        return {
+            duration: `${minutes}:${seconds.toString().padStart(2, '0')}`,
+            currentSlide: this.currentSlide,
+            totalSlides: this.totalSlides,
+            progress: `${Math.round((this.currentSlide / this.totalSlides) * 100)}%`,
+            slideVisits: this.slideVisits
+        };
+    }
+}
+
+// Initialize the presentation when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    const presentation = new PresentationApp();
+    presentation.initializeAdvancedFeatures();
+    
+    // Expose to global scope for debugging
+    window.presentation = presentation;
+    
+    // Add some helpful console commands
+    console.log('Presentation loaded! Available commands:');
+    console.log('- presentation.goToSlide(n) - Go to slide n');
+    console.log('- presentation.nextSlide() - Next slide');
+    console.log('- presentation.previousSlide() - Previous slide');
+    console.log('- presentation.toggleFullscreen() - Toggle fullscreen');
+    console.log('- presentation.showOverview() - Show slide overview');
+    console.log('- presentation.startAutoAdvance(seconds) - Start auto-advance');
+    console.log('- presentation.stopAutoAdvance() - Stop auto-advance');
+    console.log('- presentation.getPresentationStats() - Get presentation statistics');
+});
+
+// Add some additional utility functions
+window.addEventListener('load', () => {
+    // Smooth scroll behavior for any internal links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+    
+    // Add loading animation completion
+    setTimeout(() => {
+        document.body.classList.add('loaded');
+    }, 100);
+});
+
+// Export for potential module use
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = PresentationApp;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..264cd9a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,676 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI as a New Language of Creation - Theological Presentation</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="presentation-container">
+        <!-- Progress Bar -->
+        <div class="progress-bar">
+            <div class="progress-fill"></div>
+        </div>
+        
+        <!-- Navigation Controls -->
+        <div class="nav-controls">
+            <button class="nav-btn prev-btn" id="prevBtn">‹</button>
+            <div class="slide-counter">
+                <span id="currentSlide">1</span> / <span id="totalSlides">26</span>
+            </div>
+            <button class="nav-btn next-btn" id="nextBtn">›</button>
+        </div>
+
+        <!-- Slide Container -->
+        <div class="slides-container" id="slidesContainer">
+            <!-- Slide 1: Title -->
+            <div class="slide active" data-slide="1">
+                <div class="slide-content title-slide">
+                    <h1 class="slide-title">Artificial Intelligence as a New Language of Creation</h1>
+                    <h2 class="slide-subtitle">Toward a Theological Understanding of the Dialogue between Machines and Divine Mystery</h2>
+                    <div class="speaker-info">
+                        <p class="speaker-name">Rosario Moscato</p>
+                        <p class="event-details">XII Latin American Congress of Science and Religion</p>
+                        <p class="event-details">September 10-12, 2025</p>
+                        <p class="location">Pontifical Athenaeum Regina Apostolorum, Rome</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 2: Abstract -->
+            <div class="slide" data-slide="2">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Abstract</h2>
+                    <div class="content-block">
+                        <p class="abstract-text">This presentation explores artificial intelligence as an emerging <strong>'language of creation'</strong> in the context of the XII Latin American Congress of Science and Religion.</p>
+                        <p class="abstract-text">Through an interdisciplinary approach that integrates <strong>theology</strong>, <strong>philosophy</strong>, and <strong>computational sciences</strong>, we analyze how AI represents a new medium through which humanity, created in God's image, participates in the divine creative act.</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 3: Introduction -->
+            <div class="slide" data-slide="3">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Introduction: AI in the Language of Creation</h2>
+                    <div class="content-block">
+                        <p class="intro-text">The theme that brings us together today - <strong>'The languages of creation'</strong> - acquires an extraordinarily current dimension when we consider the emergence of artificial intelligence.</p>
+                        <div class="highlight-box">
+                            <p>AI represents a new language through which humanity interacts with reality and, potentially, with the divine.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 4: Theological Foundations -->
+            <div class="slide" data-slide="4">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Theological Foundations: AI in the Economy of Creation</h2>
+                    <div class="content-block">
+                        <ul class="bullet-list">
+                            <li>AI as part of God's creative plan</li>
+                            <li>Technology serving human dignity</li>
+                            <li>The co-creative dimension of human nature</li>
+                            <li>Responsibility in technological development</li>
+                        </ul>
+                        <div class="quote-box">
+                            <p>"Technological progress is part of God's plan for creation, but people must take responsibility for using technologies like artificial intelligence to help humanity."</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 5: Imago Dei -->
+            <div class="slide" data-slide="5">
+                <div class="slide-content">
+                    <h2 class="slide-heading">The Language of the Imago Dei</h2>
+                    <div class="content-block">
+                        <p class="main-text">The Christian tradition teaches us that the human being, created in God's image (<em>imago Dei</em>), participates in divine creativity.</p>
+                        <div class="reflection-box">
+                            <h3>Reflection Question:</h3>
+                            <p>When we design artificial intelligence systems, are we not exercising this co-creative dimension of our nature?</p>
+                        </div>
+                        <div class="key-point">
+                            <p><strong>Key Insight:</strong> Human beings are created in the image of God, while AI is created in the image of humanity.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 6: Teilhard's Digital Noosphere -->
+            <div class="slide" data-slide="6">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Teilhard's Digital Noosphere</h2>
+                    <div class="content-block">
+                        <p class="intro-text">Today, with our interconnected digital reality, Teilhard's vision becomes tangible:</p>
+                        <div class="stats-grid">
+                            <div class="stat-item">
+                                <span class="stat-number">8 billion</span>
+                                <span class="stat-label">Connected devices</span>
+                            </div>
+                            <div class="stat-item">
+                                <span class="stat-number">30 million</span>
+                                <span class="stat-label">Internet servers</span>
+                            </div>
+                            <div class="stat-item">
+                                <span class="stat-number">480 trillion</span>
+                                <span class="stat-label">AI tokens processed monthly</span>
+                            </div>
+                        </div>
+                        <div class="conclusion-text">
+                            <p>The Teilhardian noosphere is no longer a mystical vision, but a <strong>tangible reality</strong>.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 7: The Two Books -->
+            <div class="slide" data-slide="7">
+                <div class="slide-content">
+                    <h2 class="slide-heading">The Two Books and Digital Code</h2>
+                    <div class="content-block">
+                        <div class="two-books">
+                            <div class="book-item">
+                                <h3>Book of Scripture</h3>
+                                <p>Divine revelation through written word</p>
+                            </div>
+                            <div class="book-item">
+                                <h3>Book of Nature</h3>
+                                <p>Divine revelation through creation</p>
+                            </div>
+                        </div>
+                        <div class="digital-addition">
+                            <h3>+ Digital Code</h3>
+                            <p>A new language of creation emerging through human ingenuity, reflecting the <em>imago Dei</em></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 8: AI as Semantic System -->
+            <div class="slide" data-slide="8">
+                <div class="slide-content">
+                    <h2 class="slide-heading">AI as a Semantic System: Language and Meaning</h2>
+                    <div class="content-block">
+                        <p class="intro-text">Large language models represent a revolution in machine language processing:</p>
+                        <div class="ai-models">
+                            <span class="model-tag">GPT-4</span>
+                            <span class="model-tag">Claude 4</span>
+                            <span class="model-tag">Gemini</span>
+                        </div>
+                        <div class="capabilities-list">
+                            <h3>Beyond 'Stochastic Parrots':</h3>
+                            <ul>
+                                <li>Functional understanding</li>
+                                <li>Social comprehension</li>
+                                <li>Causal reasoning</li>
+                                <li>Semantic grounding</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 9: Semantic Grounding -->
+            <div class="slide" data-slide="9">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Semantic Grounding in Large Language Models</h2>
+                    <div class="content-block">
+                        <div class="grounding-aspects">
+                            <div class="aspect-card">
+                                <h3>Functional Grounding</h3>
+                                <p>Understanding purpose and utility</p>
+                            </div>
+                            <div class="aspect-card">
+                                <h3>Social Grounding</h3>
+                                <p>Context-aware communication</p>
+                            </div>
+                            <div class="aspect-card">
+                                <h3>Causal Grounding</h3>
+                                <p>Cause-effect relationships</p>
+                            </div>
+                        </div>
+                        <div class="key-insight">
+                            <p><strong>Intelligence accumulates through thinking machines that process information.</strong></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 10: Artificial Consciousness -->
+            <div class="slide" data-slide="10">
+                <div class="slide-content">
+                    <h2 class="slide-heading">The Question of Artificial Consciousness</h2>
+                    <div class="content-block">
+                        <div class="consciousness-debate">
+                            <div class="debate-side">
+                                <h3>Current AI</h3>
+                                <ul>
+                                    <li>Sophisticated information processing</li>
+                                    <li>Pattern recognition</li>
+                                    <li>Complex responses</li>
+                                </ul>
+                            </div>
+                            <div class="vs-divider">VS</div>
+                            <div class="debate-side">
+                                <h3>True Consciousness</h3>
+                                <ul>
+                                    <li>Self-awareness</li>
+                                    <li>Subjective experience</li>
+                                    <li>Genuine understanding</li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="theological-question">
+                            <p><strong>Theological Question:</strong> If AI developed true consciousness, would it have a soul?</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 11: Language Bridge -->
+            <div class="slide" data-slide="11">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Language as a Bridge between Finite and Infinite</h2>
+                    <div class="content-block">
+                        <div class="bridge-concept">
+                            <div class="finite-side">
+                                <h3>Finite</h3>
+                                <p>Human understanding</p>
+                                <p>Limited processing</p>
+                                <p>Temporal existence</p>
+                            </div>
+                            <div class="bridge-arrow">→</div>
+                            <div class="infinite-side">
+                                <h3>Infinite</h3>
+                                <p>Divine mystery</p>
+                                <p>Unlimited wisdom</p>
+                                <p>Eternal truth</p>
+                            </div>
+                        </div>
+                        <div class="bridge-text">
+                            <p>AI serves as a new medium for this ancient dialogue between human and divine</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 12: Behavioral Transformations -->
+            <div class="slide" data-slide="12">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Behavioral Transformations: How AI Modifies Human Thought</h2>
+                    <div class="content-block">
+                        <p class="intro-text">AI is radically transforming our cognitive processes:</p>
+                        <div class="transformation-grid-2x2">
+                            <div class="transform-item">
+                                <h3>Information Access</h3>
+                                <p>Instant access to vast knowledge bases</p>
+                            </div>
+                            <div class="transform-item">
+                                <h3>Question Formation</h3>
+                                <p>Modified approach to inquiry</p>
+                            </div>
+                            <div class="transform-item">
+                                <h3>Research Methods</h3>
+                                <p>New pathways to discovery</p>
+                            </div>
+                            <div class="transform-item">
+                                <h3>Information Synthesis</h3>
+                                <p>Enhanced analytical capabilities</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 13: Research Changes -->
+            <div class="slide" data-slide="13">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Changes in Research and Knowledge Processes</h2>
+                    <div class="content-block">
+                        <div class="research-evolution">
+                            <div class="before-after">
+                                <div class="before">
+                                    <h3>Traditional Research</h3>
+                                    <ul>
+                                        <li>Linear information gathering</li>
+                                        <li>Limited source accessibility</li>
+                                        <li>Sequential analysis</li>
+                                        <li>Individual cognitive limits</li>
+                                    </ul>
+                                </div>
+                                <div class="after">
+                                    <h3>AI-Enhanced Research</h3>
+                                    <ul>
+                                        <li>Multi-dimensional exploration</li>
+                                        <li>Global knowledge access</li>
+                                        <li>Parallel processing</li>
+                                        <li>Augmented human intelligence</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 14: Philosophical Reasoning -->
+            <div class="slide" data-slide="14">
+                <div class="slide-content">
+                    <h2 class="slide-heading">New Modalities of Philosophical Reasoning</h2>
+                    <div class="content-block">
+                        <div class="reasoning-modes">
+                            <div class="mode-card">
+                                <h3>Computational Philosophy</h3>
+                                <p>Logical processing at scale</p>
+                            </div>
+                            <div class="mode-card">
+                                <h3>Assisted Argumentation</h3>
+                                <p>AI-supported logical structures</p>
+                            </div>
+                            <div class="mode-card">
+                                <h3>Pattern Recognition</h3>
+                                <p>Identifying philosophical connections</p>
+                            </div>
+                            <div class="mode-card">
+                                <h3>Systematic Analysis</h3>
+                                <p>Comprehensive examination of ideas</p>
+                            </div>
+                        </div>
+                        <div class="caution-note">
+                            <p><strong>Important:</strong> AI complements but cannot replace human philosophical intuition and wisdom</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 15: AI-Assisted Theology -->
+            <div class="slide" data-slide="15">
+                <div class="slide-content">
+                    <h2 class="slide-heading">AI-Assisted Theological Speculation</h2>
+                    <div class="content-block">
+                        <div class="theology-applications">
+                            <div class="app-item">
+                                <h3>Scripture Analysis</h3>
+                                <p>Cross-referencing and linguistic analysis</p>
+                            </div>
+                            <div class="app-item">
+                                <h3>Patristic Studies</h3>
+                                <p>Comprehensive Church Father analysis</p>
+                            </div>
+                            <div class="app-item">
+                                <h3>Systematic Theology</h3>
+                                <p>Connecting doctrinal elements</p>
+                            </div>
+                            <div class="app-item">
+                                <h3>Comparative Religion</h3>
+                                <p>Interfaith dialogue enhancement</p>
+                            </div>
+                        </div>
+                        <div class="theological-principle">
+                            <p><strong>Principle:</strong> AI serves the theologian, not the reverse</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 16: Ethical Dimensions -->
+            <div class="slide" data-slide="16">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Ethical Dimensions: Responsibility in Digital Co-Creation</h2>
+                    <div class="content-block">
+                        <div class="vatican-document">
+                            <h3>Vatican Document "Antiqua et Nova" (January 2025)</h3>
+                            <div class="principles-grid">
+                                <div class="principle-card">
+                                    <h4>Technological Subsidiarity</h4>
+                                    <p>Technology serves human flourishing</p>
+                                </div>
+                                <div class="principle-card">
+                                    <h4>Human Dignity Protection</h4>
+                                    <p>Preserving the sacred nature of humanity</p>
+                                </div>
+                                <div class="principle-card">
+                                    <h4>Shared Responsibility</h4>
+                                    <p>Developers, users, and institutions</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 17: Church's Magisterium -->
+            <div class="slide" data-slide="17">
+                <div class="slide-content">
+                    <h2 class="slide-heading">The Church's Magisterium and AI</h2>
+                    <div class="content-block">
+                        <div class="magisterium-guidance">
+                            <div class="guidance-item">
+                                <h3>Moral Framework</h3>
+                                <p>Establishing ethical boundaries for AI development</p>
+                            </div>
+                            <div class="guidance-item">
+                                <h3>Pastoral Care</h3>
+                                <p>Addressing AI's impact on human relationships</p>
+                            </div>
+                            <div class="guidance-item">
+                                <h3>Social Teaching</h3>
+                                <p>AI's role in promoting common good</p>
+                            </div>
+                        </div>
+                        <div class="church-role">
+                            <p><strong>The Church's Role:</strong> Providing moral compass for technological advancement</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 18: Ethics of Algorithms -->
+            <div class="slide" data-slide="18">
+                <div class="slide-content">
+                    <h2 class="slide-heading">The Ethics of Algorithms</h2>
+                    <div class="content-block">
+                        <div class="ethical-concerns">
+                            <div class="concern-category">
+                                <h3>Transparency</h3>
+                                <ul>
+                                    <li>Explainable AI decisions</li>
+                                    <li>Open algorithmic processes</li>
+                                </ul>
+                            </div>
+                            <div class="concern-category">
+                                <h3>Fairness</h3>
+                                <ul>
+                                    <li>Bias prevention</li>
+                                    <li>Equal treatment</li>
+                                </ul>
+                            </div>
+                            <div class="concern-category">
+                                <h3>Accountability</h3>
+                                <ul>
+                                    <li>Clear responsibility chains</li>
+                                    <li>Error correction mechanisms</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 19: Theologically Informed Governance -->
+            <div class="slide" data-slide="19">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Toward Theologically Informed Governance</h2>
+                    <div class="content-block">
+                        <div class="governance-framework">
+                            <div class="framework-pillar">
+                                <h3>Anthropological Foundation</h3>
+                                <p>Rooted in human dignity and divine image</p>
+                            </div>
+                            <div class="framework-pillar">
+                                <h3>Eschatological Vision</h3>
+                                <p>Oriented toward ultimate human fulfillment</p>
+                            </div>
+                            <div class="framework-pillar">
+                                <h3>Prudential Wisdom</h3>
+                                <p>Practical discernment in implementation</p>
+                            </div>
+                        </div>
+                        <div class="integration-call">
+                            <p><strong>Call to Action:</strong> Integrating theological wisdom into AI governance structures</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 20: Conclusions -->
+            <div class="slide" data-slide="20">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Conclusions: AI as a Language of Hope?</h2>
+                    <div class="content-block">
+                        <div class="conclusion-points">
+                            <div class="point-item">
+                                <h3>Theological Perspective</h3>
+                                <p>AI as part of divine providence when used properly</p>
+                            </div>
+                            <div class="point-item">
+                                <h3>Human Dignity</h3>
+                                <p>Technology must serve human flourishing</p>
+                            </div>
+                            <div class="point-item">
+                                <h3>Co-Creation</h3>
+                                <p>Humans as responsible partners in creation</p>
+                            </div>
+                        </div>
+                        <div class="scriptural-foundation">
+                            <div class="quote-box">
+                                <p>"All things work together for good" (Romans 8:28)</p>
+                                <p class="quote-note">This includes artificial intelligence, when developed according to Gospel criteria</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 21: Theology for Digital Age -->
+            <div class="slide" data-slide="21">
+                <div class="slide-content">
+                    <h2 class="slide-heading">A Theology for the Digital Age</h2>
+                    <div class="content-block">
+                        <div class="digital-theology">
+                            <div class="theology-aspect">
+                                <h3>Incarnational Perspective</h3>
+                                <p>God's presence in digital spaces</p>
+                            </div>
+                            <div class="theology-aspect">
+                                <h3>Trinitarian Model</h3>
+                                <p>Relational understanding of intelligence</p>
+                            </div>
+                            <div class="theology-aspect">
+                                <h3>Pneumatological Dimension</h3>
+                                <p>The Spirit's work through human creativity</p>
+                            </div>
+                        </div>
+                        <div class="synthesis-text">
+                            <p>A comprehensive theological framework for understanding AI's place in God's creation</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 22: Gift and Responsibility -->
+            <div class="slide" data-slide="22">
+                <div class="slide-content">
+                    <h2 class="slide-heading">AI as Gift and Responsibility</h2>
+                    <div class="content-block">
+                        <div class="dual-nature">
+                            <div class="nature-side">
+                                <h3>AI as Gift</h3>
+                                <ul>
+                                    <li>Enhances human capabilities</li>
+                                    <li>Solves complex problems</li>
+                                    <li>Promotes human welfare</li>
+                                    <li>Expands understanding</li>
+                                </ul>
+                            </div>
+                            <div class="nature-side">
+                                <h3>AI as Responsibility</h3>
+                                <ul>
+                                    <li>Requires ethical development</li>
+                                    <li>Demands wise governance</li>
+                                    <li>Needs moral discernment</li>
+                                    <li>Calls for human oversight</li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="balance-principle">
+                            <p><strong>Balance:</strong> Embracing the gift while accepting the responsibility</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 23: Digital Hope -->
+            <div class="slide" data-slide="23">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Toward Digital Hope</h2>
+                    <div class="content-block">
+                        <div class="hope-dimensions">
+                            <div class="hope-item">
+                                <h3>Technological Optimism</h3>
+                                <p>Grounded in theological anthropology</p>
+                            </div>
+                            <div class="hope-item">
+                                <h3>Cautious Wisdom</h3>
+                                <p>Tempered by moral prudence</p>
+                            </div>
+                            <div class="hope-item">
+                                <h3>Active Engagement</h3>
+                                <p>Participating in AI's development</p>
+                            </div>
+                        </div>
+                        <div class="hope-vision">
+                            <div class="vision-text">
+                                <h3>Vision:</h3>
+                                <p>AI serving the Kingdom of God through human flourishing and cosmic transformation</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 24: Q&A Introduction -->
+            <div class="slide" data-slide="24">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Questions and Answers</h2>
+                    <div class="content-block qa-intro">
+                        <div class="qa-welcome">
+                            <h3>Discussion Time</h3>
+                            <p>Let's explore together the theological implications of artificial intelligence</p>
+                        </div>
+                        <div class="qa-topics">
+                            <h4>Topics for Discussion:</h4>
+                            <ul>
+                                <li>Theological foundations of AI</li>
+                                <li>Ethical considerations</li>
+                                <li>Consciousness and the soul</li>
+                                <li>Practical applications</li>
+                                <li>Future implications</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 25: Sample Q&A -->
+            <div class="slide" data-slide="25">
+                <div class="slide-content">
+                    <h2 class="slide-heading">Frequently Asked Questions</h2>
+                    <div class="content-block">
+                        <div class="qa-item">
+                            <h3 class="question">Q: Doesn't AI risk replacing God in human life?</h3>
+                            <div class="answer">
+                                <p><strong>A:</strong> AI, however sophisticated, remains a tool created by human intelligence, which in turn is a gift from God. AI cannot replicate the transcendent dimension of human intelligence - the capacity for relationship with God, the experience of the sacred, authentic moral freedom.</p>
+                            </div>
+                        </div>
+                        <div class="qa-item">
+                            <h3 class="question">Q: If AI developed true consciousness, would it have a soul?</h3>
+                            <div class="answer">
+                                <p><strong>A:</strong> This is one of the deepest questions of contemporary theology. Catholic tradition teaches that the human soul is created directly by God and does not emerge from material complexity alone.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slide 26: Thank You -->
+            <div class="slide" data-slide="26">
+                <div class="slide-content thank-you-slide">
+                    <h1 class="thank-you-title">Continue the Dialogue</h1>
+                    <h2 class="slide-subtitle">AI as a New Language of Creation in Service of Human Dignity</h2>
+                    <div class="closing-message">
+                        <p class="closing-text">For further discussion and collaboration</p>
+                    </div>
+                    <div class="contact-info">
+                        <h3>Continue the Conversation</h3>
+                        <p>Rosario Moscato</p>
+                        <p>Email: rosario.moscato@etik.com</p>
+                        <p>XII Latin American Congress of Science and Religion</p>
+                        <p>Pontifical Athenaeum Regina Apostolorum, Rome</p>
+                        <p>September 10-12, 2025</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Additional Controls -->
+        <div class="bottom-controls">
+            <button class="control-btn" id="fullscreenBtn">⛶</button>
+            <button class="control-btn" id="overviewBtn">☰</button>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..769a266
--- /dev/null
+++ b/style.css
@@ -0,0 +1,2428 @@
+
+:root {
+  /* Colors */
+  --color-background: rgba(252, 252, 249, 1);
+  --color-surface: rgba(255, 255, 253, 1);
+  --color-text: rgba(19, 52, 59, 1);
+  --color-text-secondary: rgba(98, 108, 113, 1);
+  --color-primary: rgba(33, 128, 141, 1);
+  --color-primary-hover: rgba(29, 116, 128, 1);
+  --color-primary-active: rgba(26, 104, 115, 1);
+  --color-secondary: rgba(94, 82, 64, 0.12);
+  --color-secondary-hover: rgba(94, 82, 64, 0.2);
+  --color-secondary-active: rgba(94, 82, 64, 0.25);
+  --color-border: rgba(94, 82, 64, 0.2);
+  --color-btn-primary-text: rgba(252, 252, 249, 1);
+  --color-card-border: rgba(94, 82, 64, 0.12);
+  --color-card-border-inner: rgba(94, 82, 64, 0.12);
+  --color-error: rgba(192, 21, 47, 1);
+  --color-success: rgba(33, 128, 141, 1);
+  --color-warning: rgba(168, 75, 47, 1);
+  --color-info: rgba(98, 108, 113, 1);
+  --color-focus-ring: rgba(33, 128, 141, 0.4);
+  --color-select-caret: rgba(19, 52, 59, 0.8);
+
+  /* Common style patterns */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for opacity control */
+  --color-success-rgb: 33, 128, 141;
+  --color-error-rgb: 192, 21, 47;
+  --color-warning-rgb: 168, 75, 47;
+  --color-info-rgb: 98, 108, 113;
+
+  /* Typography */
+  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, monospace;
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 24px;
+  --font-size-4xl: 30px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 600;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --letter-spacing-tight: -0.01em;
+
+  /* Spacing */
+  --space-0: 0;
+  --space-1: 1px;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-10: 10px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
+
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-base: 8px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
+    0 2px 4px -1px rgba(0, 0, 0, 0.02);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
+    0 4px 6px -2px rgba(0, 0, 0, 0.02);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
+
+  /* Animation */
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Layout */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+}
+
+/* Dark mode colors */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: rgba(31, 33, 33, 1);
+    --color-surface: rgba(38, 40, 40, 1);
+    --color-text: rgba(245, 245, 245, 1);
+    --color-text-secondary: rgba(167, 169, 169, 0.7);
+    --color-primary: rgba(50, 184, 198, 1);
+    --color-primary-hover: rgba(45, 166, 178, 1);
+    --color-primary-active: rgba(41, 150, 161, 1);
+    --color-secondary: rgba(119, 124, 124, 0.15);
+    --color-secondary-hover: rgba(119, 124, 124, 0.25);
+    --color-secondary-active: rgba(119, 124, 124, 0.3);
+    --color-border: rgba(119, 124, 124, 0.3);
+    --color-error: rgba(255, 84, 89, 1);
+    --color-success: rgba(50, 184, 198, 1);
+    --color-warning: rgba(230, 129, 97, 1);
+    --color-info: rgba(167, 169, 169, 1);
+    --color-focus-ring: rgba(50, 184, 198, 0.4);
+    --color-btn-primary-text: rgba(19, 52, 59, 1);
+    --color-card-border: rgba(119, 124, 124, 0.2);
+    --color-card-border-inner: rgba(119, 124, 124, 0.15);
+    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    --button-border-secondary: rgba(119, 124, 124, 0.2);
+    --color-border-secondary: rgba(119, 124, 124, 0.2);
+    --color-select-caret: rgba(245, 245, 245, 0.8);
+
+    /* Common style patterns - updated for dark mode */
+    --focus-ring: 0 0 0 3px var(--color-focus-ring);
+    --focus-outline: 2px solid var(--color-primary);
+    --status-bg-opacity: 0.15;
+    --status-border-opacity: 0.25;
+    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+    /* RGB versions for dark mode */
+    --color-success-rgb: 50, 184, 198;
+    --color-error-rgb: 255, 84, 89;
+    --color-warning-rgb: 230, 129, 97;
+    --color-info-rgb: 167, 169, 169;
+  }
+}
+
+/* Data attribute for manual theme switching */
+[data-color-scheme="dark"] {
+  --color-background: rgba(31, 33, 33, 1);
+  --color-surface: rgba(38, 40, 40, 1);
+  --color-text: rgba(245, 245, 245, 1);
+  --color-text-secondary: rgba(167, 169, 169, 0.7);
+  --color-primary: rgba(50, 184, 198, 1);
+  --color-primary-hover: rgba(45, 166, 178, 1);
+  --color-primary-active: rgba(41, 150, 161, 1);
+  --color-secondary: rgba(119, 124, 124, 0.15);
+  --color-secondary-hover: rgba(119, 124, 124, 0.25);
+  --color-secondary-active: rgba(119, 124, 124, 0.3);
+  --color-border: rgba(119, 124, 124, 0.3);
+  --color-error: rgba(255, 84, 89, 1);
+  --color-success: rgba(50, 184, 198, 1);
+  --color-warning: rgba(230, 129, 97, 1);
+  --color-info: rgba(167, 169, 169, 1);
+  --color-focus-ring: rgba(50, 184, 198, 0.4);
+  --color-btn-primary-text: rgba(19, 52, 59, 1);
+  --color-card-border: rgba(119, 124, 124, 0.15);
+  --color-card-border-inner: rgba(119, 124, 124, 0.15);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  --color-border-secondary: rgba(119, 124, 124, 0.2);
+  --color-select-caret: rgba(245, 245, 245, 0.8);
+
+  /* Common style patterns - updated for dark mode */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for dark mode */
+  --color-success-rgb: 50, 184, 198;
+  --color-error-rgb: 255, 84, 89;
+  --color-warning-rgb: 230, 129, 97;
+  --color-info-rgb: 167, 169, 169;
+}
+
+[data-color-scheme="light"] {
+  --color-background: rgba(252, 252, 249, 1);
+  --color-surface: rgba(255, 255, 253, 1);
+  --color-text: rgba(19, 52, 59, 1);
+  --color-text-secondary: rgba(98, 108, 113, 1);
+  --color-primary: rgba(33, 128, 141, 1);
+  --color-primary-hover: rgba(29, 116, 128, 1);
+  --color-primary-active: rgba(26, 104, 115, 1);
+  --color-secondary: rgba(94, 82, 64, 0.12);
+  --color-secondary-hover: rgba(94, 82, 64, 0.2);
+  --color-secondary-active: rgba(94, 82, 64, 0.25);
+  --color-border: rgba(94, 82, 64, 0.2);
+  --color-btn-primary-text: rgba(252, 252, 249, 1);
+  --color-card-border: rgba(94, 82, 64, 0.12);
+  --color-card-border-inner: rgba(94, 82, 64, 0.12);
+  --color-error: rgba(192, 21, 47, 1);
+  --color-success: rgba(33, 128, 141, 1);
+  --color-warning: rgba(168, 75, 47, 1);
+  --color-info: rgba(98, 108, 113, 1);
+  --color-focus-ring: rgba(33, 128, 141, 0.4);
+
+  /* RGB versions for light mode */
+  --color-success-rgb: 33, 128, 141;
+  --color-error-rgb: 192, 21, 47;
+  --color-warning-rgb: 168, 75, 47;
+  --color-info-rgb: 98, 108, 113;
+}
+
+/* Base styles */
+html {
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  background-color: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+h1 {
+  font-size: var(--font-size-4xl);
+}
+h2 {
+  font-size: var(--font-size-3xl);
+}
+h3 {
+  font-size: var(--font-size-2xl);
+}
+h4 {
+  font-size: var(--font-size-xl);
+}
+h5 {
+  font-size: var(--font-size-lg);
+}
+h6 {
+  font-size: var(--font-size-md);
+}
+
+p {
+  margin: 0 0 var(--space-16) 0;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+}
+
+code,
+pre {
+  font-family: var(--font-family-mono);
+  font-size: calc(var(--font-size-base) * 0.95);
+  background-color: var(--color-secondary);
+  border-radius: var(--radius-sm);
+}
+
+code {
+  padding: var(--space-1) var(--space-4);
+}
+
+pre {
+  padding: var(--space-16);
+  margin: var(--space-16) 0;
+  overflow: auto;
+  border: 1px solid var(--color-border);
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-16);
+  border-radius: var(--radius-base);
+  font-size: var(--font-size-base);
+  font-weight: 500;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+  border: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.btn--primary {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+}
+
+.btn--primary:hover {
+  background: var(--color-primary-hover);
+}
+
+.btn--primary:active {
+  background: var(--color-primary-active);
+}
+
+.btn--secondary {
+  background: var(--color-secondary);
+  color: var(--color-text);
+}
+
+.btn--secondary:hover {
+  background: var(--color-secondary-hover);
+}
+
+.btn--secondary:active {
+  background: var(--color-secondary-active);
+}
+
+.btn--outline {
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+.btn--outline:hover {
+  background: var(--color-secondary);
+}
+
+.btn--sm {
+  padding: var(--space-4) var(--space-12);
+  font-size: var(--font-size-sm);
+  border-radius: var(--radius-sm);
+}
+
+.btn--lg {
+  padding: var(--space-10) var(--space-20);
+  font-size: var(--font-size-lg);
+  border-radius: var(--radius-md);
+}
+
+.btn--full-width {
+  width: 100%;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Form elements */
+.form-control {
+  display: block;
+  width: 100%;
+  padding: var(--space-8) var(--space-12);
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  transition: border-color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard);
+}
+
+textarea.form-control {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+}
+
+select.form-control {
+  padding: var(--space-8) var(--space-12);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: var(--select-caret-light);
+  background-repeat: no-repeat;
+  background-position: right var(--space-12) center;
+  background-size: 16px;
+  padding-right: var(--space-32);
+}
+
+/* Add a dark mode specific caret */
+@media (prefers-color-scheme: dark) {
+  select.form-control {
+    background-image: var(--select-caret-dark);
+  }
+}
+
+/* Also handle data-color-scheme */
+[data-color-scheme="dark"] select.form-control {
+  background-image: var(--select-caret-dark);
+}
+
+[data-color-scheme="light"] select.form-control {
+  background-image: var(--select-caret-light);
+}
+
+.form-control:focus {
+  border-color: var(--color-primary);
+  outline: var(--focus-outline);
+}
+
+.form-label {
+  display: block;
+  margin-bottom: var(--space-8);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.form-group {
+  margin-bottom: var(--space-16);
+}
+
+/* Card component */
+.card {
+  background-color: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-card-border);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  transition: box-shadow var(--duration-normal) var(--ease-standard);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.card__body {
+  padding: var(--space-16);
+}
+
+.card__header,
+.card__footer {
+  padding: var(--space-16);
+  border-bottom: 1px solid var(--color-card-border-inner);
+}
+
+/* Status indicators - simplified with CSS variables */
+.status {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-6) var(--space-12);
+  border-radius: var(--radius-full);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.status--success {
+  background-color: rgba(
+    var(--color-success-rgb, 33, 128, 141),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-success);
+  border: 1px solid
+    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
+}
+
+.status--error {
+  background-color: rgba(
+    var(--color-error-rgb, 192, 21, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-error);
+  border: 1px solid
+    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
+}
+
+.status--warning {
+  background-color: rgba(
+    var(--color-warning-rgb, 168, 75, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-warning);
+  border: 1px solid
+    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
+}
+
+.status--info {
+  background-color: rgba(
+    var(--color-info-rgb, 98, 108, 113),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-info);
+  border: 1px solid
+    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
+}
+
+/* Container layout */
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--space-16);
+  padding-left: var(--space-16);
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: var(--container-sm);
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: var(--container-md);
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: var(--container-lg);
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: var(--container-xl);
+  }
+}
+
+/* Utility classes */
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.gap-4 {
+  gap: var(--space-4);
+}
+.gap-8 {
+  gap: var(--space-8);
+}
+.gap-16 {
+  gap: var(--space-16);
+}
+
+.m-0 {
+  margin: 0;
+}
+.mt-8 {
+  margin-top: var(--space-8);
+}
+.mb-8 {
+  margin-bottom: var(--space-8);
+}
+.mx-8 {
+  margin-left: var(--space-8);
+  margin-right: var(--space-8);
+}
+.my-8 {
+  margin-top: var(--space-8);
+  margin-bottom: var(--space-8);
+}
+
+.p-0 {
+  padding: 0;
+}
+.py-8 {
+  padding-top: var(--space-8);
+  padding-bottom: var(--space-8);
+}
+.px-8 {
+  padding-left: var(--space-8);
+  padding-right: var(--space-8);
+}
+.py-16 {
+  padding-top: var(--space-16);
+  padding-bottom: var(--space-16);
+}
+.px-16 {
+  padding-left: var(--space-16);
+  padding-right: var(--space-16);
+}
+
+.block {
+  display: block;
+}
+.hidden {
+  display: none;
+}
+
+/* Accessibility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+}
+
+/* Dark mode specifics */
+[data-color-scheme="dark"] .btn--outline {
+  border: 1px solid var(--color-border-secondary);
+}
+
+@font-face {
+  font-family: 'FKGroteskNeue';
+  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
+    format('woff2');
+}
+
+:root {
+  /* Colors */
+  --color-background: rgba(252, 252, 249, 1);
+  --color-surface: rgba(255, 255, 253, 1);
+  --color-text: rgba(19, 52, 59, 1);
+  --color-text-secondary: rgba(98, 108, 113, 1);
+  --color-primary: rgba(33, 128, 141, 1);
+  --color-primary-hover: rgba(29, 116, 128, 1);
+  --color-primary-active: rgba(26, 104, 115, 1);
+  --color-secondary: rgba(94, 82, 64, 0.12);
+  --color-secondary-hover: rgba(94, 82, 64, 0.2);
+  --color-secondary-active: rgba(94, 82, 64, 0.25);
+  --color-border: rgba(94, 82, 64, 0.2);
+  --color-btn-primary-text: rgba(252, 252, 249, 1);
+  --color-card-border: rgba(94, 82, 64, 0.12);
+  --color-card-border-inner: rgba(94, 82, 64, 0.12);
+  --color-error: rgba(192, 21, 47, 1);
+  --color-success: rgba(33, 128, 141, 1);
+  --color-warning: rgba(168, 75, 47, 1);
+  --color-info: rgba(98, 108, 113, 1);
+  --color-focus-ring: rgba(33, 128, 141, 0.4);
+  --color-select-caret: rgba(19, 52, 59, 0.8);
+
+  /* Common style patterns */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for opacity control */
+  --color-success-rgb: 33, 128, 141;
+  --color-error-rgb: 192, 21, 47;
+  --color-warning-rgb: 168, 75, 47;
+  --color-info-rgb: 98, 108, 113;
+
+  /* Typography */
+  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, monospace;
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 24px;
+  --font-size-4xl: 30px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 600;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --letter-spacing-tight: -0.01em;
+
+  /* Spacing */
+  --space-0: 0;
+  --space-1: 1px;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-10: 10px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
+
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-base: 8px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
+    0 2px 4px -1px rgba(0, 0, 0, 0.02);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
+    0 4px 6px -2px rgba(0, 0, 0, 0.02);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
+
+  /* Animation */
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Layout */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+}
+
+/* Dark mode colors */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: rgba(31, 33, 33, 1);
+    --color-surface: rgba(38, 40, 40, 1);
+    --color-text: rgba(245, 245, 245, 1);
+    --color-text-secondary: rgba(167, 169, 169, 0.7);
+    --color-primary: rgba(50, 184, 198, 1);
+    --color-primary-hover: rgba(45, 166, 178, 1);
+    --color-primary-active: rgba(41, 150, 161, 1);
+    --color-secondary: rgba(119, 124, 124, 0.15);
+    --color-secondary-hover: rgba(119, 124, 124, 0.25);
+    --color-secondary-active: rgba(119, 124, 124, 0.3);
+    --color-border: rgba(119, 124, 124, 0.3);
+    --color-error: rgba(255, 84, 89, 1);
+    --color-success: rgba(50, 184, 198, 1);
+    --color-warning: rgba(230, 129, 97, 1);
+    --color-info: rgba(167, 169, 169, 1);
+    --color-focus-ring: rgba(50, 184, 198, 0.4);
+    --color-btn-primary-text: rgba(19, 52, 59, 1);
+    --color-card-border: rgba(119, 124, 124, 0.2);
+    --color-card-border-inner: rgba(119, 124, 124, 0.15);
+    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    --button-border-secondary: rgba(119, 124, 124, 0.2);
+    --color-border-secondary: rgba(119, 124, 124, 0.2);
+    --color-select-caret: rgba(245, 245, 245, 0.8);
+
+    /* Common style patterns - updated for dark mode */
+    --focus-ring: 0 0 0 3px var(--color-focus-ring);
+    --focus-outline: 2px solid var(--color-primary);
+    --status-bg-opacity: 0.15;
+    --status-border-opacity: 0.25;
+    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+    /* RGB versions for dark mode */
+    --color-success-rgb: 50, 184, 198;
+    --color-error-rgb: 255, 84, 89;
+    --color-warning-rgb: 230, 129, 97;
+    --color-info-rgb: 167, 169, 169;
+  }
+}
+
+/* Data attribute for manual theme switching */
+[data-color-scheme="dark"] {
+  --color-background: rgba(31, 33, 33, 1);
+  --color-surface: rgba(38, 40, 40, 1);
+  --color-text: rgba(245, 245, 245, 1);
+  --color-text-secondary: rgba(167, 169, 169, 0.7);
+  --color-primary: rgba(50, 184, 198, 1);
+  --color-primary-hover: rgba(45, 166, 178, 1);
+  --color-primary-active: rgba(41, 150, 161, 1);
+  --color-secondary: rgba(119, 124, 124, 0.15);
+  --color-secondary-hover: rgba(119, 124, 124, 0.25);
+  --color-secondary-active: rgba(119, 124, 124, 0.3);
+  --color-border: rgba(119, 124, 124, 0.3);
+  --color-error: rgba(255, 84, 89, 1);
+  --color-success: rgba(50, 184, 198, 1);
+  --color-warning: rgba(230, 129, 97, 1);
+  --color-info: rgba(167, 169, 169, 1);
+  --color-focus-ring: rgba(50, 184, 198, 0.4);
+  --color-btn-primary-text: rgba(19, 52, 59, 1);
+  --color-card-border: rgba(119, 124, 124, 0.15);
+  --color-card-border-inner: rgba(119, 124, 124, 0.15);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  --color-border-secondary: rgba(119, 124, 124, 0.2);
+  --color-select-caret: rgba(245, 245, 245, 0.8);
+
+  /* Common style patterns - updated for dark mode */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for dark mode */
+  --color-success-rgb: 50, 184, 198;
+  --color-error-rgb: 255, 84, 89;
+  --color-warning-rgb: 230, 129, 97;
+  --color-info-rgb: 167, 169, 169;
+}
+
+[data-color-scheme="light"] {
+  --color-background: rgba(252, 252, 249, 1);
+  --color-surface: rgba(255, 255, 253, 1);
+  --color-text: rgba(19, 52, 59, 1);
+  --color-text-secondary: rgba(98, 108, 113, 1);
+  --color-primary: rgba(33, 128, 141, 1);
+  --color-primary-hover: rgba(29, 116, 128, 1);
+  --color-primary-active: rgba(26, 104, 115, 1);
+  --color-secondary: rgba(94, 82, 64, 0.12);
+  --color-secondary-hover: rgba(94, 82, 64, 0.2);
+  --color-secondary-active: rgba(94, 82, 64, 0.25);
+  --color-border: rgba(94, 82, 64, 0.2);
+  --color-btn-primary-text: rgba(252, 252, 249, 1);
+  --color-card-border: rgba(94, 82, 64, 0.12);
+  --color-card-border-inner: rgba(94, 82, 64, 0.12);
+  --color-error: rgba(192, 21, 47, 1);
+  --color-success: rgba(33, 128, 141, 1);
+  --color-warning: rgba(168, 75, 47, 1);
+  --color-info: rgba(98, 108, 113, 1);
+  --color-focus-ring: rgba(33, 128, 141, 0.4);
+
+  /* RGB versions for light mode */
+  --color-success-rgb: 33, 128, 141;
+  --color-error-rgb: 192, 21, 47;
+  --color-warning-rgb: 168, 75, 47;
+  --color-info-rgb: 98, 108, 113;
+}
+
+/* Base styles */
+html {
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  background-color: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+h1 {
+  font-size: var(--font-size-4xl);
+}
+h2 {
+  font-size: var(--font-size-3xl);
+}
+h3 {
+  font-size: var(--font-size-2xl);
+}
+h4 {
+  font-size: var(--font-size-xl);
+}
+h5 {
+  font-size: var(--font-size-lg);
+}
+h6 {
+  font-size: var(--font-size-md);
+}
+
+p {
+  margin: 0 0 var(--space-16) 0;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+}
+
+code,
+pre {
+  font-family: var(--font-family-mono);
+  font-size: calc(var(--font-size-base) * 0.95);
+  background-color: var(--color-secondary);
+  border-radius: var(--radius-sm);
+}
+
+code {
+  padding: var(--space-1) var(--space-4);
+}
+
+pre {
+  padding: var(--space-16);
+  margin: var(--space-16) 0;
+  overflow: auto;
+  border: 1px solid var(--color-border);
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-16);
+  border-radius: var(--radius-base);
+  font-size: var(--font-size-base);
+  font-weight: 500;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+  border: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.btn--primary {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+}
+
+.btn--primary:hover {
+  background: var(--color-primary-hover);
+}
+
+.btn--primary:active {
+  background: var(--color-primary-active);
+}
+
+.btn--secondary {
+  background: var(--color-secondary);
+  color: var(--color-text);
+}
+
+.btn--secondary:hover {
+  background: var(--color-secondary-hover);
+}
+
+.btn--secondary:active {
+  background: var(--color-secondary-active);
+}
+
+.btn--outline {
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+.btn--outline:hover {
+  background: var(--color-secondary);
+}
+
+.btn--sm {
+  padding: var(--space-4) var(--space-12);
+  font-size: var(--font-size-sm);
+  border-radius: var(--radius-sm);
+}
+
+.btn--lg {
+  padding: var(--space-10) var(--space-20);
+  font-size: var(--font-size-lg);
+  border-radius: var(--radius-md);
+}
+
+.btn--full-width {
+  width: 100%;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Form elements */
+.form-control {
+  display: block;
+  width: 100%;
+  padding: var(--space-8) var(--space-12);
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  transition: border-color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard);
+}
+
+textarea.form-control {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+}
+
+select.form-control {
+  padding: var(--space-8) var(--space-12);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: var(--select-caret-light);
+  background-repeat: no-repeat;
+  background-position: right var(--space-12) center;
+  background-size: 16px;
+  padding-right: var(--space-32);
+}
+
+/* Add a dark mode specific caret */
+@media (prefers-color-scheme: dark) {
+  select.form-control {
+    background-image: var(--select-caret-dark);
+  }
+}
+
+/* Also handle data-color-scheme */
+[data-color-scheme="dark"] select.form-control {
+  background-image: var(--select-caret-dark);
+}
+
+[data-color-scheme="light"] select.form-control {
+  background-image: var(--select-caret-light);
+}
+
+.form-control:focus {
+  border-color: var(--color-primary);
+  outline: var(--focus-outline);
+}
+
+.form-label {
+  display: block;
+  margin-bottom: var(--space-8);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.form-group {
+  margin-bottom: var(--space-16);
+}
+
+/* Card component */
+.card {
+  background-color: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-card-border);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  transition: box-shadow var(--duration-normal) var(--ease-standard);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.card__body {
+  padding: var(--space-16);
+}
+
+.card__header,
+.card__footer {
+  padding: var(--space-16);
+  border-bottom: 1px solid var(--color-card-border-inner);
+}
+
+/* Status indicators - simplified with CSS variables */
+.status {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-6) var(--space-12);
+  border-radius: var(--radius-full);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.status--success {
+  background-color: rgba(
+    var(--color-success-rgb, 33, 128, 141),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-success);
+  border: 1px solid
+    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
+}
+
+.status--error {
+  background-color: rgba(
+    var(--color-error-rgb, 192, 21, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-error);
+  border: 1px solid
+    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
+}
+
+.status--warning {
+  background-color: rgba(
+    var(--color-warning-rgb, 168, 75, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-warning);
+  border: 1px solid
+    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
+}
+
+.status--info {
+  background-color: rgba(
+    var(--color-info-rgb, 98, 108, 113),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-info);
+  border: 1px solid
+    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
+}
+
+/* Container layout */
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--space-16);
+  padding-left: var(--space-16);
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: var(--container-sm);
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: var(--container-md);
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: var(--container-lg);
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: var(--container-xl);
+  }
+}
+
+/* Utility classes */
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.gap-4 {
+  gap: var(--space-4);
+}
+.gap-8 {
+  gap: var(--space-8);
+}
+.gap-16 {
+  gap: var(--space-16);
+}
+
+.m-0 {
+  margin: 0;
+}
+.mt-8 {
+  margin-top: var(--space-8);
+}
+.mb-8 {
+  margin-bottom: var(--space-8);
+}
+.mx-8 {
+  margin-left: var(--space-8);
+  margin-right: var(--space-8);
+}
+.my-8 {
+  margin-top: var(--space-8);
+  margin-bottom: var(--space-8);
+}
+
+.p-0 {
+  padding: 0;
+}
+.py-8 {
+  padding-top: var(--space-8);
+  padding-bottom: var(--space-8);
+}
+.px-8 {
+  padding-left: var(--space-8);
+  padding-right: var(--space-8);
+}
+.py-16 {
+  padding-top: var(--space-16);
+  padding-bottom: var(--space-16);
+}
+.px-16 {
+  padding-left: var(--space-16);
+  padding-right: var(--space-16);
+}
+
+.block {
+  display: block;
+}
+.hidden {
+  display: none;
+}
+
+/* Accessibility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+}
+
+/* Dark mode specifics */
+[data-color-scheme="dark"] .btn--outline {
+  border: 1px solid var(--color-border-secondary);
+}
+
+@font-face {
+  font-family: 'FKGroteskNeue';
+  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
+    format('woff2');
+}
+
+/* Additional styles for the presentation */
+.presentation-container {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #1a2332 0%, #2c3e50 50%, #34495e 100%);
+  overflow: hidden;
+  position: relative;
+  font-family: var(--font-family-base);
+  color: var(--color-text);
+}
+
+/* Progress Bar */
+.progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  z-index: 1000;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #3498db, #2980b9);
+  width: 3.85%; /* 1/26 slides */
+  transition: width 0.3s ease;
+}
+
+/* Navigation Controls */
+.nav-controls {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.3);
+  padding: 10px 20px;
+  border-radius: 25px;
+  backdrop-filter: blur(10px);
+}
+
+.nav-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: white;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.nav-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.1);
+}
+
+.nav-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.slide-counter {
+  color: white;
+  font-weight: 500;
+  font-size: 14px;
+  min-width: 60px;
+  text-align: center;
+}
+
+/* Slides Container */
+.slides-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.slide {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transform: translateX(100px);
+  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  padding: 40px;
+  box-sizing: border-box;
+}
+
+.slide.active {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.slide.prev {
+  transform: translateX(-100px);
+}
+
+/* Slide Content */
+.slide-content {
+  max-width: 1000px;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20px;
+  padding: 60px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  animation: slideIn 0.8s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Title Slide */
+.title-slide {
+  text-align: center;
+  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, rgba(155, 89, 182, 0.1) 100%);
+}
+
+.slide-title {
+  font-size: 3.5rem;
+  font-weight: 700;
+  color: #2c3e50;
+  margin-bottom: 30px;
+  line-height: 1.2;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.slide-subtitle {
+  font-size: 1.8rem;
+  color: #34495e;
+  margin-bottom: 50px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+/* Special styling for the first slide title and subtitle - VERY LIGHT GRAY */
+.slide[data-slide="1"] .slide-title {
+  color: #E0E0E0 !important;
+}
+
+.slide[data-slide="1"] .slide-subtitle {
+  color: #E0E0E0 !important;
+}
+
+/* Special styling for the last slide - ALL TEXT LIGHT GRAY */
+.slide[data-slide="26"] .thank-you-title {
+  color: #E0E0E0 !important;
+}
+
+.slide[data-slide="26"] .slide-subtitle {
+  color: #E0E0E0 !important;
+}
+
+.slide[data-slide="26"] .closing-text {
+  color: #E0E0E0 !important;
+}
+
+.slide[data-slide="26"] .contact-info h3 {
+  color: #E0E0E0 !important;
+}
+
+.slide[data-slide="26"] .contact-info p {
+  color: #E0E0E0 !important;
+}
+
+.slide[data-slide="26"] h1,
+.slide[data-slide="26"] h2,
+.slide[data-slide="26"] h3,
+.slide[data-slide="26"] h4,
+.slide[data-slide="26"] h5,
+.slide[data-slide="26"] h6,
+.slide[data-slide="26"] p,
+.slide[data-slide="26"] span,
+.slide[data-slide="26"] div {
+  color: #E0E0E0 !important;
+}
+
+.speaker-info {
+  margin-top: 40px;
+}
+
+.speaker-name {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: #2980b9;
+  margin-bottom: 10px;
+}
+
+.event-details, .location {
+  font-size: 1.1rem;
+  color: #7f8c8d;
+  margin: 5px 0;
+}
+
+/* Regular Slide Headings */
+.slide-heading {
+  font-size: 2.5rem;
+  color: #2c3e50;
+  margin-bottom: 40px;
+  text-align: center;
+  font-weight: 600;
+  border-bottom: 3px solid #3498db;
+  padding-bottom: 15px;
+}
+
+/* Content Blocks */
+.content-block {
+  font-size: 1.1rem;
+  line-height: 1.6;
+  color: #34495e;
+}
+
+.intro-text, .main-text {
+  font-size: 1.2rem;
+  margin-bottom: 30px;
+  color: #2c3e50;
+}
+
+.abstract-text {
+  font-size: 1.1rem;
+  margin-bottom: 20px;
+  text-align: justify;
+}
+
+/* Highlight Boxes */
+.highlight-box {
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  padding: 25px;
+  border-radius: 15px;
+  margin: 30px 0;
+  font-size: 1.2rem;
+  font-weight: 500;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
+}
+
+.quote-box {
+  background: linear-gradient(135deg, #f39c12, #e67e22);
+  color: white;
+  padding: 25px;
+  border-radius: 15px;
+  margin: 30px 0;
+  font-style: italic;
+  font-size: 1.1rem;
+  border-left: 5px solid #d35400;
+  box-shadow: 0 10px 30px rgba(243, 156, 18, 0.3);
+}
+
+.reflection-box {
+  background: rgba(155, 89, 182, 0.1);
+  border: 2px solid #9b59b6;
+  border-radius: 15px;
+  padding: 25px;
+  margin: 30px 0;
+}
+
+.reflection-box h3 {
+  color: #8e44ad;
+  margin-bottom: 15px;
+  font-size: 1.3rem;
+}
+
+.key-point {
+  background: rgba(46, 204, 113, 0.1);
+  border-left: 5px solid #27ae60;
+  padding: 20px;
+  margin: 25px 0;
+  border-radius: 0 10px 10px 0;
+}
+
+/* Lists */
+.bullet-list {
+  list-style: none;
+  padding: 0;
+}
+
+.bullet-list li {
+  position: relative;
+  padding-left: 30px;
+  margin-bottom: 15px;
+  font-size: 1.1rem;
+  animation: fadeInUp 0.6s ease-out;
+  animation-fill-mode: both;
+}
+
+.bullet-list li:before {
+  content: "▶";
+  position: absolute;
+  left: 0;
+  color: #3498db;
+  font-weight: bold;
+}
+
+.bullet-list li:nth-child(1) { animation-delay: 0.1s; }
+.bullet-list li:nth-child(2) { animation-delay: 0.2s; }
+.bullet-list li:nth-child(3) { animation-delay: 0.3s; }
+.bullet-list li:nth-child(4) { animation-delay: 0.4s; }
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 30px;
+  margin: 40px 0;
+}
+
+.stat-item {
+  text-align: center;
+  background: linear-gradient(135deg, #e74c3c, #c0392b);
+  color: white;
+  padding: 30px 20px;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(231, 76, 60, 0.3);
+}
+
+.stat-number {
+  display: block;
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.stat-label {
+  font-size: 1rem;
+  opacity: 0.9;
+}
+
+/* Two Books Layout */
+.two-books {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+  margin: 30px 0;
+}
+
+.book-item {
+  background: rgba(52, 152, 219, 0.1);
+  border: 2px solid #3498db;
+  border-radius: 15px;
+  padding: 25px;
+  text-align: center;
+}
+
+.book-item h3 {
+  color: #2980b9;
+  margin-bottom: 15px;
+  font-size: 1.4rem;
+}
+
+.digital-addition {
+  background: linear-gradient(135deg, #9b59b6, #8e44ad);
+  color: white;
+  border-radius: 15px;
+  padding: 25px;
+  text-align: center;
+  margin-top: 30px;
+  box-shadow: 0 10px 30px rgba(155, 89, 182, 0.3);
+}
+
+.digital-addition h3 {
+  font-size: 1.8rem;
+  margin-bottom: 15px;
+}
+
+/* AI Models */
+.ai-models {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin: 30px 0;
+}
+
+.model-tag {
+  background: linear-gradient(135deg, #1abc9c, #16a085);
+  color: white;
+  padding: 10px 20px;
+  border-radius: 25px;
+  font-weight: 600;
+  box-shadow: 0 5px 15px rgba(26, 188, 156, 0.3);
+}
+
+/* Capabilities List */
+.capabilities-list {
+  background: rgba(52, 152, 219, 0.05);
+  border-radius: 15px;
+  padding: 25px;
+  margin-top: 30px;
+}
+
+.capabilities-list h3 {
+  color: #2980b9;
+  margin-bottom: 20px;
+  font-size: 1.3rem;
+}
+
+.capabilities-list ul {
+  list-style: none;
+  padding: 0;
+}
+
+.capabilities-list li {
+  position: relative;
+  padding-left: 25px;
+  margin-bottom: 10px;
+}
+
+.capabilities-list li:before {
+  content: "✓";
+  position: absolute;
+  left: 0;
+  color: #27ae60;
+  font-weight: bold;
+}
+
+/* Grounding Aspects */
+.grounding-aspects {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 25px;
+  margin: 30px 0;
+}
+
+.aspect-card {
+  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(155, 89, 182, 0.1));
+  border: 2px solid #3498db;
+  border-radius: 15px;
+  padding: 25px;
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+.aspect-card:hover {
+  transform: translateY(-5px);
+}
+
+.aspect-card h3 {
+  color: #2980b9;
+  margin-bottom: 15px;
+  font-size: 1.2rem;
+}
+
+.key-insight {
+  background: linear-gradient(135deg, #f39c12, #e67e22);
+  color: white;
+  padding: 25px;
+  border-radius: 15px;
+  text-align: center;
+  margin-top: 30px;
+  font-size: 1.2rem;
+  font-weight: 600;
+  box-shadow: 0 10px 30px rgba(243, 156, 18, 0.3);
+}
+
+/* Consciousness Debate */
+.consciousness-debate {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 30px;
+  align-items: center;
+  margin: 30px 0;
+}
+
+.debate-side {
+  background: rgba(52, 152, 219, 0.1);
+  border-radius: 15px;
+  padding: 25px;
+}
+
+.debate-side h3 {
+  color: #2980b9;
+  margin-bottom: 20px;
+  text-align: center;
+  font-size: 1.3rem;
+}
+
+.vs-divider {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #e74c3c;
+  text-align: center;
+}
+
+.theological-question {
+  background: rgba(155, 89, 182, 0.1);
+  border: 2px solid #9b59b6;
+  border-radius: 15px;
+  padding: 25px;
+  margin-top: 30px;
+  text-align: center;
+}
+
+/* Bridge Concept */
+.bridge-concept {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 30px;
+  align-items: center;
+  margin: 40px 0;
+}
+
+.finite-side, .infinite-side {
+  background: rgba(52, 152, 219, 0.1);
+  border-radius: 15px;
+  padding: 30px;
+  text-align: center;
+}
+
+.finite-side h3, .infinite-side h3 {
+  color: #2980b9;
+  margin-bottom: 20px;
+  font-size: 1.4rem;
+}
+
+.bridge-arrow {
+  font-size: 3rem;
+  color: #f39c12;
+  font-weight: bold;
+}
+
+.bridge-text {
+  text-align: center;
+  font-size: 1.2rem;
+  color: #2c3e50;
+  font-style: italic;
+  margin-top: 30px;
+}
+
+/* Transformation Grid - Original Flexible Layout */
+.transformation-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 25px;
+  margin: 30px 0;
+}
+
+/* NEW: Transformation Grid - 2x2 Layout for Slide 12 */
+.transformation-grid-2x2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 30px;
+  margin: 30px 0;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.transform-item {
+  background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(39, 174, 96, 0.1));
+  border: 2px solid #27ae60;
+  border-radius: 15px;
+  padding: 25px;
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+.transform-item:hover {
+  transform: translateY(-5px);
+}
+
+.transform-item h3 {
+  color: #27ae60;
+  margin-bottom: 15px;
+  font-size: 1.2rem;
+}
+
+/* Before/After Comparison */
+.before-after {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  margin: 30px 0;
+}
+
+.before, .after {
+  background: rgba(52, 152, 219, 0.05);
+  border-radius: 15px;
+  padding: 30px;
+}
+
+.before h3 {
+  color: #e74c3c;
+  margin-bottom: 20px;
+  font-size: 1.3rem;
+}
+
+.after h3 {
+  color: #27ae60;
+  margin-bottom: 20px;
+  font-size: 1.3rem;
+}
+
+.before ul, .after ul {
+  list-style: none;
+  padding: 0;
+}
+
+.before li, .after li {
+  position: relative;
+  padding-left: 25px;
+  margin-bottom: 10px;
+}
+
+.before li:before {
+  content: "✗";
+  position: absolute;
+  left: 0;
+  color: #e74c3c;
+  font-weight: bold;
+}
+
+.after li:before {
+  content: "✓";
+  position: absolute;
+  left: 0;
+  color: #27ae60;
+  font-weight: bold;
+}
+
+/* Reasoning Modes */
+.reasoning-modes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 25px;
+  margin: 30px 0;
+}
+
+.mode-card {
+  background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(142, 68, 173, 0.1));
+  border: 2px solid #9b59b6;
+  border-radius: 15px;
+  padding: 25px;
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+.mode-card:hover {
+  transform: translateY(-5px);
+}
+
+.mode-card h3 {
+  color: #8e44ad;
+  margin-bottom: 15px;
+  font-size: 1.1rem;
+}
+
+.caution-note {
+  background: rgba(230, 126, 34, 0.1);
+  border-left: 5px solid #e67e22;
+  padding: 20px;
+  margin: 30px 0;
+  border-radius: 0 10px 10px 0;
+  font-style: italic;
+}
+
+/* Theology Applications */
+.theology-applications {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 25px;
+  margin: 30px 0;
+}
+
+.app-item {
+  background: rgba(52, 152, 219, 0.1);
+  border: 2px solid #3498db;
+  border-radius: 15px;
+  padding: 25px;
+  text-align: center;
+}
+
+.app-item h3 {
+  color: #2980b9;
+  margin-bottom: 15px;
+  font-size: 1.1rem;
+}
+
+.theological-principle {
+  background: linear-gradient(135deg, #e74c3c, #c0392b);
+  color: white;
+  padding: 20px;
+  border-radius: 15px;
+  text-align: center;
+  margin-top: 30px;
+  font-weight: 600;
+  box-shadow: 0 10px 30px rgba(231, 76, 60, 0.3);
+}
+
+/* Vatican Document */
+.vatican-document h3 {
+  color: #f39c12;
+  margin-bottom: 25px;
+  text-align: center;
+  font-size: 1.4rem;
+}
+
+.principles-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 25px;
+  margin: 30px 0;
+}
+
+.principle-card {
+  background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(230, 126, 34, 0.1));
+  border: 2px solid #f39c12;
+  border-radius: 15px;
+  padding: 25px;
+  text-align: center;
+}
+
+.principle-card h4 {
+  color: #e67e22;
+  margin-bottom: 15px;
+  font-size: 1.2rem;
+}
+
+/* Governance Framework */
+.governance-framework {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 25px;
+  margin: 30px 0;
+}
+
+.framework-pillar {
+  background: rgba(155, 89, 182, 0.1);
+  border: 2px solid #9b59b6;
+  border-radius: 15px;
+  padding: 25px;
+  text-align: center;
+}
+
+.framework-pillar h3 {
+  color: #8e44ad;
+  margin-bottom: 15px;
+  font-size: 1.2rem;
+}
+
+.integration-call {
+  background: linear-gradient(135deg, #1abc9c, #16a085);
+  color: white;
+  padding: 25px;
+  border-radius: 15px;
+  text-align: center;
+  margin-top: 30px;
+  font-weight: 600;
+  box-shadow: 0 10px 30px rgba(26, 188, 156, 0.3);
+}
+
+/* Conclusion Points */
+.conclusion-points {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 25px;
+  margin: 30px 0;
+}
+
+.point-item {
+  background: rgba(46, 204, 113, 0.1);
+  border: 2px solid #27ae60;
+  border-radius: 15px;
+  padding: 25px;
+  text-align: center;
+}
+
+.point-item h3 {
+  color: #27ae60;
+  margin-bottom: 15px;
+  font-size: 1.2rem;
+}
+
+.scriptural-foundation {
+  margin-top: 40px;
+}
+
+.quote-note {
+  font-size: 0.9rem;
+  margin-top: 15px;
+  opacity: 0.9;
+}
+
+/* Digital Theology */
+.digital-theology {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 25px;
+  margin: 30px 0;
+}
+
+.theology-aspect {
+  background: rgba(52, 152, 219, 0.1);
+  border: 2px solid #3498db;
+  border-radius: 15px;
+  padding: 25px;
+  text-align: center;
+}
+
+.theology-aspect h3 {
+  color: #2980b9;
+  margin-bottom: 15px;
+  font-size: 1.1rem;
+}
+
+.synthesis-text {
+  text-align: center;
+  font-size: 1.2rem;
+  color: #2c3e50;
+  font-style: italic;
+  margin-top: 30px;
+}
+
+/* Dual Nature */
+.dual-nature {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  margin: 30px 0;
+}
+
+.nature-side {
+  background: rgba(52, 152, 219, 0.05);
+  border-radius: 15px;
+  padding: 30px;
+}
+
+.nature-side h3 {
+  margin-bottom: 20px;
+  font-size: 1.3rem;
+  text-align: center;
+}
+
+.nature-side:first-child h3 {
+  color: #27ae60;
+}
+
+.nature-side:last-child h3 {
+  color: #e74c3c;
+}
+
+.balance-principle {
+  background: linear-gradient(135deg, #34495e, #2c3e50);
+  color: white;
+  padding: 25px;
+  border-radius: 15px;
+  text-align: center;
+  margin-top: 30px;
+  font-weight: 600;
+  box-shadow: 0 10px 30px rgba(52, 73, 94, 0.3);
+}
+
+/* Hope Dimensions */
+.hope-dimensions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 25px;
+  margin: 30px 0;
+}
+
+.hope-item {
+  background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(39, 174, 96, 0.1));
+  border: 2px solid #27ae60;
+  border-radius: 15px;
+  padding: 25px;
+  text-align: center;
+}
+
+.hope-item h3 {
+  color: #27ae60;
+  margin-bottom: 15px;
+  font-size: 1.2rem;
+}
+
+.hope-vision {
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  border-radius: 15px;
+  padding: 30px;
+  text-align: center;
+  margin-top: 30px;
+  box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
+}
+
+.vision-text h3 {
+  margin-bottom: 20px;
+  font-size: 1.4rem;
+}
+
+/* Q&A Styles */
+.qa-intro {
+  text-align: center;
+}
+
+.qa-welcome h3 {
+  color: #3498db;
+  margin-bottom: 20px;
+  font-size: 1.8rem;
+}
+
+.qa-topics {
+  background: rgba(52, 152, 219, 0.1);
+  border-radius: 15px;
+  padding: 30px;
+  margin-top: 30px;
+  text-align: left;
+}
+
+.qa-topics h4 {
+  color: #2980b9;
+  margin-bottom: 20px;
+  font-size: 1.3rem;
+}
+
+.qa-item {
+  margin-bottom: 40px;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 15px;
+  padding: 25px;
+  border-left: 5px solid #3498db;
+}
+
+.question {
+  color: #2980b9;
+  margin-bottom: 20px;
+  font-size: 1.2rem;
+}
+
+.answer {
+  color: #34495e;
+  font-size: 1.1rem;
+  line-height: 1.6;
+}
+
+/* Thank You Slide */
+.thank-you-slide {
+  text-align: center;
+  background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, rgba(52, 152, 219, 0.1) 100%);
+}
+
+.thank-you-title {
+  font-size: 4rem;
+  color: #27ae60;
+  margin-bottom: 40px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.closing-message {
+  margin: 40px 0;
+}
+
+.closing-text {
+  font-size: 1.3rem;
+  color: #2c3e50;
+  line-height: 1.6;
+  font-style: italic;
+  margin-bottom: 30px;
+}
+
+.contact-info {
+  background: rgba(52, 152, 219, 0.1);
+  border-radius: 15px;
+  padding: 30px;
+  margin-top: 40px;
+}
+
+.contact-info h3 {
+  color: #2980b9;
+  margin-bottom: 20px;
+  font-size: 1.4rem;
+}
+
+.contact-info p {
+  margin: 10px 0;
+  color: #34495e;
+}
+
+/* Bottom Controls */
+.bottom-controls {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  display: flex;
+  gap: 15px;
+  z-index: 1000;
+}
+
+.control-btn {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: white;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.control-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.1);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .slide-content {
+    padding: 30px;
+    margin: 20px;
+  }
+  
+  .slide-title {
+    font-size: 2.5rem;
+  }
+  
+  .slide-subtitle {
+    font-size: 1.4rem;
+  }
+  
+  .slide-heading {
+    font-size: 2rem;
+  }
+  
+  .stats-grid,
+  .transformation-grid,
+  .transformation-grid-2x2,
+  .before-after,
+  .dual-nature {
+    grid-template-columns: 1fr;
+  }
+  
+  .consciousness-debate,
+  .bridge-concept {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  
+  .vs-divider,
+  .bridge-arrow {
+    font-size: 1.5rem;
+  }
+  
+  .nav-controls {
+    top: 10px;
+    right: 10px;
+    padding: 8px 15px;
+  }
+  
+  .nav-btn {
+    width: 35px;
+    height: 35px;
+    font-size: 16px;
+  }
+}
+
+/* Print Styles */
+@media print {
+  .presentation-container {
+    background: white;
+  }
+  
+  .progress-bar,
+  .nav-controls,
+  .bottom-controls {
+    display: none;
+  }
+  
+  .slide {
+    position: relative;
+    opacity: 1;
+    transform: none;
+    page-break-after: always;
+    height: auto;
+    padding: 20px;
+  }
+  
+  .slide-content {
+    background: white;
+    box-shadow: none;
+    border: 1px solid #ccc;
+  }
+}
\ No newline at end of file