Upload 2 files

app.js.Без названия

@@ -0,0 +1,704 @@
+// App State
+const appState = {
+    currentSection: 'home',
+    progress: {
+        variables: 0,
+        operators: 0,
+        typecasting: 0,
+        io: 0,
+        comments: 0
+    },
+    theme: 'light'
+};
+
+// Course data
+const courseData = {
+    variables: {
+        int: { examples: ['"123"', '45.67', 'True', 'False'], results: ['123', '45', '1', '0'] },
+        float: { examples: ['"3.14"', '42', 'True'], results: ['3.14', '42.0', '1.0'] },
+        str: { examples: ['123', '3.14', 'True'], results: ['"123"', '"3.14"', '"True"'] },
+        bool: { examples: ['1', '0', '"text"', '""'], results: ['True', 'False', 'True', 'False'] }
+    },
+    operators: {
+        arithmetic: [
+            { expr: '10 + 5', result: '15' },
+            { expr: '10 - 5', result: '5' },
+            { expr: '10 * 5', result: '50' },
+            { expr: '10 / 5', result: '2.0' },
+            { expr: '10 // 3', result: '3' },
+            { expr: '10 % 3', result: '1' },
+            { expr: '10 ** 2', result: '100' }
+        ],
+        comparison: [
+            { expr: '10 == 5', result: 'False' },
+            { expr: '10 != 5', result: 'True' },
+            { expr: '10 > 5', result: 'True' },
+            { expr: '10 < 5', result: 'False' },
+            { expr: '10 >= 10', result: 'True' },
+            { expr: '10 <= 5', result: 'False' }
+        ],
+        logical: [
+            { expr: 'True and False', result: 'False' },
+            { expr: 'True or False', result: 'True' },
+            { expr: 'not True', result: 'False' },
+            { expr: 'not False', result: 'True' }
+        ]
+    },
+    quiz: [
+        {
+            section: 'variables',
+            question: 'Який тип даних у змінної x = 3.14?',
+            options: ['int', 'float', 'str', 'bool'],
+            correct: 1,
+            explanation: 'Число з десятковою комою є типом float'
+        },
+        {
+            section: 'operators',
+            question: 'Що поверне вираз 10 // 3?',
+            options: ['3.33', '3', '3.0', '4'],
+            correct: 1,
+            explanation: 'Оператор // виконує цілочисельне ділення'
+        },
+        {
+            section: 'typecasting',
+            question: 'Що поверне int("123")?',
+            options: ['"123"', '123.0', '123', 'Помилка'],
+            correct: 2,
+            explanation: 'Функція int() перетворює рядок "123" в ціле число 123'
+        }
+    ]
+};
+
+// DOM Elements
+const elements = {
+    navTabs: document.querySelectorAll('.nav__tab'),
+    sections: document.querySelectorAll('.section'),
+    topicCards: document.querySelectorAll('.topic-card'),
+    themeToggle: document.getElementById('theme-toggle'),
+    progressBars: document.querySelectorAll('.progress-bar__fill')
+};
+
+// Initialize App
+function initApp() {
+    setupEventListeners();
+    setupInteractiveDemos();
+    setupOperatorExamples();
+    setupTypeCasting();
+    setupInputOutput();
+    setupComments();
+    setupQuizzes();
+    loadProgress();
+    initTheme();
+}
+
+// Event Listeners
+function setupEventListeners() {
+    // Navigation
+    elements.navTabs.forEach(tab => {
+        tab.addEventListener('click', () => switchSection(tab.dataset.section));
+    });
+
+    // Topic cards navigation
+    elements.topicCards.forEach(card => {
+        card.addEventListener('click', () => switchSection(card.dataset.section));
+    });
+
+    // Theme toggle
+    if (elements.themeToggle) {
+        elements.themeToggle.addEventListener('click', toggleTheme);
+    }
+
+    // Keyboard navigation
+    document.addEventListener('keydown', handleKeyboardNavigation);
+}
+
+// Section Navigation
+function switchSection(sectionId) {
+    // Update nav tabs
+    elements.navTabs.forEach(tab => {
+        tab.classList.toggle('nav__tab--active', tab.dataset.section === sectionId);
+    });
+
+    // Update sections
+    elements.sections.forEach(section => {
+        section.classList.toggle('section--active', section.id === sectionId);
+    });
+
+    appState.currentSection = sectionId;
+    updateProgress(sectionId, 25); // Basic progress for visiting section
+}
+
+// Interactive Demos for Variables
+function setupInteractiveDemos() {
+    // Int demo
+    const intDemo = document.getElementById('int-demo');
+    const intResult = document.getElementById('int-result');
+    if (intDemo && intResult) {
+        intDemo.addEventListener('input', (e) => {
+            const value = e.target.value;
+            intResult.textContent = `Результат: ${value} (тип: int)`;
+        });
+    }
+
+    // Float demo
+    const floatDemo = document.getElementById('float-demo');
+    const floatResult = document.getElementById('float-result');
+    if (floatDemo && floatResult) {
+        floatDemo.addEventListener('input', (e) => {
+            const value = parseFloat(e.target.value) || 0;
+            floatResult.textContent = `Р��зультат: ${value} (тип: float)`;
+        });
+    }
+
+    // String demo
+    const strDemo = document.getElementById('str-demo');
+    const strResult = document.getElementById('str-result');
+    if (strDemo && strResult) {
+        strDemo.addEventListener('input', (e) => {
+            const value = e.target.value;
+            strResult.textContent = `Результат: "${value}" (тип: str)`;
+        });
+    }
+
+    // Bool demo
+    const boolDemo = document.getElementById('bool-demo');
+    const boolResult = document.getElementById('bool-result');
+    if (boolDemo && boolResult) {
+        boolDemo.addEventListener('change', (e) => {
+            const value = e.target.value === 'true' ? 'True' : 'False';
+            boolResult.textContent = `Результат: ${value} (тип: bool)`;
+        });
+    }
+
+    // Run code buttons
+    document.querySelectorAll('.run-code').forEach(button => {
+        button.addEventListener('click', (e) => {
+            const result = e.target.dataset.result;
+            showCodeResult(e.target, result);
+            updateProgress('variables', 50);
+        });
+    });
+}
+
+// Operator Examples
+function setupOperatorExamples() {
+    document.querySelectorAll('.run-operator').forEach(button => {
+        button.addEventListener('click', (e) => {
+            const calc = e.target.dataset.calc;
+            const resultSpan = e.target.parentElement.querySelector('.operator-result');
+            
+            try {
+                let result;
+                if (calc.includes('//')) {
+                    const [a, b] = calc.split(' // ').map(x => parseInt(x.trim()));
+                    result = Math.floor(a / b);
+                } else if (calc.includes('%')) {
+                    const [a, b] = calc.split(' % ').map(x => parseInt(x.trim()));
+                    result = a % b;
+                } else if (calc.includes('==')) {
+                    const [a, b] = calc.split(' == ').map(x => parseInt(x.trim()));
+                    result = a === b;
+                } else if (calc.includes('!=')) {
+                    const [a, b] = calc.split(' != ').map(x => parseInt(x.trim()));
+                    result = a !== b;
+                } else if (calc.includes('>=')) {
+                    const [a, b] = calc.split(' >= ').map(x => parseInt(x.trim()));
+                    result = a >= b;
+                } else if (calc.includes('<=')) {
+                    const [a, b] = calc.split(' <= ').map(x => parseInt(x.trim()));
+                    result = a <= b;
+                } else if (calc.includes('>')) {
+                    const [a, b] = calc.split(' > ').map(x => parseInt(x.trim()));
+                    result = a > b;
+                } else if (calc.includes('<')) {
+                    const [a, b] = calc.split(' < ').map(x => parseInt(x.trim()));
+                    result = a < b;
+                } else if (calc.includes(' and ')) {
+                    result = calc.includes('True and False') ? false : true;
+                } else if (calc.includes(' or ')) {
+                    result = calc.includes('False or False') ? false : true;
+                } else if (calc.includes('not ')) {
+                    result = calc.includes('not True') ? false : true;
+                } else {
+                    result = eval(calc);
+                }
+                
+                resultSpan.textContent = String(result);
+                resultSpan.classList.add('show');
+                updateProgress('operators', 60);
+            } catch (error) {
+                resultSpan.textContent = 'Помилка';
+                resultSpan.classList.add('show');
+            }
+        });
+    });
+}
+
+// Type Casting
+function setupTypeCasting() {
+    document.querySelectorAll('.try-cast').forEach(button => {
+        button.addEventListener('click', (e) => {
+            const row = e.target.closest('.casting-row');
+            const input = row.querySelector('.casting-input');
+            const result = row.querySelector('.casting-result');
+            const type = input.dataset.type;
+            const value = input.value.trim();
+
+            try {
+                let castResult;
+                switch (type) {
+                    case 'int':
+                        if (value.startsWith('"') && value.endsWith('"')) {
+                            castResult = parseInt(value.slice(1, -1));
+                        } else if (value === 'True') {
+                            castResult = 1;
+                        } else if (value === 'False') {
+                            castResult = 0;
+                        } else {
+                            castResult = parseInt(parseFloat(value));
+                        }
+                        break;
+                    case 'float':
+                        if (value.startsWith('"') && value.endsWith('"')) {
+                            castResult = parseFloat(value.slice(1, -1));
+                        } else if (value === 'True') {
+                            castResult = 1.0;
+                        } else if (value === 'False') {
+                            castResult = 0.0;
+                        } else {
+                            castResult = parseFloat(value);
+                        }
+                        break;
+                    case 'str':
+                        if (value === 'True' || value === 'False') {
+                            castResult = `"${value}"`;
+                        } else {
+                            castResult = `"${value}"`;
+                        }
+                        break;
+                    case 'bool':
+                        if (value === '0' || value === '""' || value === 'False') {
+                            castResult = 'False';
+                        } else {
+                            castResult = 'True';
+                        }
+                        break;
+                }
+                
+                result.textContent = castResult;
+                result.style.background = 'rgba(var(--color-success-rgb), 0.1)';
+                result.style.color = 'var(--color-success)';
+                updateProgress('typecasting', 70);
+            } catch (error) {
+                result.textContent = 'Помилка';
+                result.style.background = 'rgba(var(--color-error-rgb), 0.1)';
+                result.style.color = 'var(--color-error)';
+            }
+        });
+    });
+}
+
+// Input/Output
+function setupInputOutput() {
+    // Print functionality
+    document.querySelectorAll('.run-print').forEach(button => {
+        button.addEventListener('click', (e) => {
+            const output = e.target.dataset.output;
+            const outputElement = e.target.parentElement.querySelector('.output-text');
+            outputElement.textContent = output;
+            updateProgress('io', 40);
+        });
+    });
+
+    // Custom print
+    const customPrint = document.querySelector('.custom-print');
+    const printInput = document.getElementById('print-input');
+    const customOutput = document.getElementById('custom-output');
+    
+    if (customPrint && printInput && customOutput) {
+        customPrint.addEventListener('click', () => {
+            const text = printInput.value || 'Пустий рядок';
+            customOutput.textContent = text;
+            updateProgress('io', 60);
+        });
+    }
+
+    // Input simulators
+    document.querySelectorAll('.simulate-input').forEach(button => {
+        button.addEventListener('click', (e) => {
+            const varName = e.target.dataset.var;
+            const input = e.target.previousElementSibling;
+            const display = e.target.parentElement.nextElementSibling.querySelector('span');
+            
+            let value = input.value;
+            if (varName === 'age') {
+                value = parseInt(value) || 0;
+            } else {
+                value = `"${value}"`;
+            }
+            
+            display.textContent = value;
+            updateProgress('io', 80);
+        });
+    });
+
+    // Practical demo
+    const startDemo = document.querySelector('.start-demo');
+    const demoConsole = document.getElementById('demo-console');
+    
+    if (startDemo && demoConsole) {
+        startDemo.addEventListener('click', () => {
+            runPracticalDemo(demoConsole);
+        });
+    }
+}
+
+// Practical Demo Runner
+function runPracticalDemo(console) {
+    console.classList.add('active');
+    console.innerHTML = '';
+    
+    const steps = [
+        { type: 'output', text: 'Запуск програми...' },
+        { type: 'input', text: 'Як вас звуть? ', input: 'Анна' },
+        { type: 'input', text: 'Скільки вам років? ', input: '20' },
+        { type: 'output', text: 'Привіт, Анна' },
+        { type: 'output', text: 'Вам 20 років' },
+        { type: 'output', text: 'Ви повнолітній' },
+        { type: 'output', text: 'Програма завершена.' }
+    ];
+    
+    let stepIndex = 0;
+    
+    function runNextStep() {
+        if (stepIndex >= steps.length) {
+            updateProgress('io', 100);
+            return;
+        }
+        
+        const step = steps[stepIndex];
+        const stepDiv = document.createElement('div');
+        stepDiv.className = 'demo-step';
+        
+        if (step.type === 'input') {
+            stepDiv.innerHTML = `<span class="demo-input">${step.text}${step.input}</span>`;
+        } else {
+            stepDiv.innerHTML = `<span class="demo-output">${step.text}</span>`;
+        }
+        
+        console.appendChild(stepDiv);
+        console.scrollTop = console.scrollHeight;
+        
+        stepIndex++;
+        setTimeout(runNextStep, 1000);
+    }
+    
+    runNextStep();
+}
+
+// Comments
+function setupComments() {
+    const analyzeButton = document.querySelector('.analyze-comments');
+    const codeEditor = document.getElementById('code-editor');
+    const analysis = document.getElementById('comment-analysis');
+    
+    if (analyzeButton && codeEditor && analysis) {
+        analyzeButton.addEventListener('click', () => {
+            const code = codeEditor.value;
+            analyzeComments(code, analysis);
+        });
+    }
+}
+
+function analyzeComments(code, analysisElement) {
+    const lines = code.split('\n');
+    const comments = {
+        single: 0,
+        multi: 0,
+        inline: 0,
+        docstring: 0
+    };
+    
+    let inMultiComment = false;
+    
+    lines.forEach(line => {
+        const trimmed = line.trim();
+        
+        if (trimmed.startsWith('"""') || trimmed.startsWith("'''")) {
+            if (inMultiComment) {
+                inMultiComment = false;
+                comments.docstring++;
+            } else {
+                inMultiComment = true;
+            }
+        } else if (inMultiComment) {
+            // Inside multi-line comment
+        } else if (trimmed.startsWith('#')) {
+            comments.single++;
+        } else if (trimmed.includes('#') && !trimmed.startsWith('#')) {
+            comments.inline++;
+        }
+    });
+    
+    const results = [];
+    if (comments.single > 0) results.push(`Однорядкових коментарів: ${comments.single}`);
+    if (comments.inline > 0) results.push(`Вбудованих коментарів: ${comments.inline}`);
+    if (comments.docstring > 0) results.push(`Багаторядкових коментарів: ${comments.docstring}`);
+    
+    analysisElement.innerHTML = results.map(result => 
+        `<div class="analysis-item">${result}</div>`
+    ).join('');
+    analysisElement.classList.add('show');
+    
+    updateProgress('comments', 100);
+}
+
+// Quizzes
+function setupQuizzes() {
+    document.querySelectorAll('.quiz-option').forEach(option => {
+        option.addEventListener('click', (e) => {
+            const quizCard = e.target.closest('.quiz-card');
+            const questionId = quizCard.id;
+            const selectedAnswer = parseInt(e.target.dataset.answer);
+            
+            handleQuizAnswer(quizCard, selectedAnswer, questionId);
+        });
+    });
+}
+
+function handleQuizAnswer(quizCard, selectedAnswer, questionId) {
+    const options = quizCard.querySelectorAll('.quiz-option');
+    const result = quizCard.querySelector('.quiz-result');
+    
+    // Find correct answer (hardcoded for this example)
+    let correctAnswer;
+    if (questionId === 'variables-quiz') correctAnswer = 1;
+    else if (questionId === 'operators-quiz') correctAnswer = 1;
+    else if (questionId === 'typecasting-quiz') correctAnswer = 2;
+    
+    // Disable all options
+    options.forEach(option => option.disabled = true);
+    
+    // Show results
+    options.forEach((option, index) => {
+        if (index === correctAnswer) {
+            option.classList.add('correct');
+        } else if (index === selectedAnswer && selectedAnswer !== correctAnswer) {
+            option.classList.add('incorrect');
+        }
+    });
+    
+    // Show result message
+    if (selectedAnswer === correctAnswer) {
+        result.innerHTML = '🎉 Правильно! Відмінна робота!';
+        result.className = 'quiz-result show correct';
+        updateProgress(getCurrentSectionKey(), 100);
+    } else {
+        result.innerHTML = '❌ Неправильно. Спробуйте ще раз вивчити матеріал.';
+        result.className = 'quiz-result show incorrect';
+    }
+}
+
+// Progress Management
+function updateProgress(section, value) {
+    if (appState.progress[section] < value) {
+        appState.progress[section] = value;
+        saveProgress();
+        updateProgressBars();
+    }
+}
+
+function updateProgressBars() {
+    const progressElements = {
+        variables: document.querySelector('.topic-card[data-section="variables"] .progress-bar__fill'),
+        operators: document.querySelector('.topic-card[data-section="operators"] .progress-bar__fill'),
+        typecasting: document.querySelector('.topic-card[data-section="typecasting"] .progress-bar__fill'),
+        io: document.querySelector('.topic-card[data-section="io"] .progress-bar__fill'),
+        comments: document.querySelector('.topic-card[data-section="comments"] .progress-bar__fill')
+    };
+    
+    Object.keys(progressElements).forEach(key => {
+        if (progressElements[key]) {
+            progressElements[key].style.width = `${appState.progress[key]}%`;
+        }
+    });
+}
+
+function saveProgress() {
+    try {
+        // Since we can't use localStorage, just keep in memory
+        console.log('Progress saved:', appState.progress);
+    } catch (error) {
+        console.log('Could not save progress');
+    }
+}
+
+function loadProgress() {
+    try {
+        // Since we can't use localStorage, use default values
+        updateProgressBars();
+    } catch (error) {
+        console.log('Could not load progress');
+    }
+}
+
+// Theme Management
+function initTheme() {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    appState.theme = prefersDark ? 'dark' : 'light';
+    updateThemeButton();
+}
+
+function toggleTheme() {
+    appState.theme = appState.theme === 'light' ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-color-scheme', appState.theme);
+    updateThemeButton();
+}
+
+function updateThemeButton() {
+    if (elements.themeToggle) {
+        elements.themeToggle.textContent = appState.theme === 'light' ? '🌙 Темна тема' : '☀️ Світла тема';
+    }
+}
+
+// Utility Functions
+function showCodeResult(button, result) {
+    const originalText = button.textContent;
+    button.textContent = '✓ Виконано';
+    button.classList.add('loading');
+    
+    setTimeout(() => {
+        button.textContent = originalText;
+        button.classList.remove('loading');
+        
+        // Show result in a temporary tooltip
+        const tooltip = document.createElement('div');
+        tooltip.textContent = result;
+        tooltip.style.cssText = `
+            position: absolute;
+            background: var(--color-text);
+            color: var(--color-background);
+            padding: 8px 12px;
+            border-radius: 4px;
+            font-size: 12px;
+            top: -40px;
+            left: 50%;
+            transform: translateX(-50%);
+            white-space: nowrap;
+            z-index: 1000;
+        `;
+        button.style.position = 'relative';
+        button.appendChild(tooltip);
+        
+        setTimeout(() => {
+            if (tooltip.parentNode) {
+                tooltip.parentNode.removeChild(tooltip);
+            }
+        }, 2000);
+    }, 1000);
+}
+
+function getCurrentSectionKey() {
+    const sectionMap = {
+        'variables': 'variables',
+        'operators': 'operators',
+        'typecasting': 'typecasting',
+        'io': 'io',
+        'comments': 'comments'
+    };
+    return sectionMap[appState.currentSection] || 'variables';
+}
+
+function handleKeyboardNavigation(e) {
+    if (e.ctrlKey || e.metaKey) {
+        switch (e.key) {
+            case '1':
+                e.preventDefault();
+                switchSection('home');
+                break;
+            case '2':
+                e.preventDefault();
+                switchSection('variables');
+                break;
+            case '3':
+                e.preventDefault();
+                switchSection('operators');
+                break;
+            case '4':
+                e.preventDefault();
+                switchSection('typecasting');
+                break;
+            case '5':
+                e.preventDefault();
+                switchSection('io');
+                break;
+            case '6':
+                e.preventDefault();
+                switchSection('comments');
+                break;
+        }
+    }
+}
+
+// Easter Eggs and Fun Features
+function addEasterEggs() {
+    // Konami code
+    let konamiCode = [];
+    const konamiSequence = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight'];
+    
+    document.addEventListener('keydown', (e) => {
+        konamiCode.push(e.key);
+        if (konamiCode.length > konamiSequence.length) {
+            konamiCode.shift();
+        }
+        
+        if (JSON.stringify(konamiCode) === JSON.stringify(konamiSequence)) {
+            showEasterEgg();
+        }
+    });
+}
+
+function showEasterEgg() {
+    const egg = document.createElement('div');
+    egg.innerHTML = '🐍 Вітаємо! Ви знайшли секретного Python! 🎉';
+    egg.style.cssText = `
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: var(--color-primary);
+        color: var(--color-btn-primary-text);
+        padding: 20px 40px;
+        border-radius: 12px;
+        font-size: 18px;
+        font-weight: bold;
+        z-index: 10000;
+        box-shadow: var(--shadow-lg);
+        animation: fadeIn 0.5s ease;
+    `;
+    
+    document.body.appendChild(egg);
+    
+    setTimeout(() => {
+        document.body.removeChild(egg);
+    }, 3000);
+}
+
+// Initialize App when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    initApp();
+    addEasterEggs();
+    
+    // Add some fun console messages
+    console.log('%c🐍 Вітаємо в Python Dashboard! 🎓', 'color: #21808d; font-size: 16px; font-weight: bold;');
+    console.log('%cСпробуйте натиснути Ctrl+1-6 для швидкої навігації!', 'color: #626c71; font-size: 12px;');
+    console.log('%cАбо введіть код Konami для сюрпризу! ↑↑↓↓←→←→', 'color: #626c71; font-size: 12px;');
+});
+
+// Performance monitoring
+if ('performance' in window) {
+    window.addEventListener('load', () => {
+        const loadTime = performance.now();
+        console.log(`📊 Dashboard loaded in ${Math.round(loadTime)}ms`);
+    });
+}

style.css

@@ -1,28 +1,1394 @@
+
+: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 {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  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: 16px;
-	margin-top: 0;
+  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 {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+  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 {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+  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');
+}
+
+/* App Structure */
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+.header {
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header__content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-16) 0;
+}
+
+.header__title {
+  margin: 0;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
+}
+
+/* Navigation */
+.nav {
+  background: var(--color-background);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 73px;
+  z-index: 99;
+}
+
+.nav__tabs {
+  display: flex;
+  gap: var(--space-4);
+  padding: var(--space-8) 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.nav__tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.nav__tab {
+  white-space: nowrap;
+  padding: var(--space-8) var(--space-16);
+  border: none;
+  border-radius: var(--radius-base);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.nav__tab:hover {
+  background: var(--color-secondary);
+  color: var(--color-text);
+}
+
+.nav__tab--active {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+}
+
+/* Main Content */
+.main {
+  flex: 1;
+  padding: var(--space-24) 0;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.section {
+  display: none;
 }
+
+.section--active {
+  display: block;
+}
+
+.section__header {
+  margin-bottom: var(--space-32);
+  text-align: center;
+}
+
+.section__title {
+  margin-bottom: var(--space-8);
+  font-size: var(--font-size-3xl);
+}
+
+.section__description {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+/* Hero Section */
+.hero {
+  text-align: center;
+  margin-bottom: var(--space-32);
+  padding: var(--space-32) 0;
+}
+
+.hero__title {
+  font-size: var(--font-size-4xl);
+  margin-bottom: var(--space-16);
+  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero__description {
+  font-size: var(--font-size-xl);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+/* Topics Grid */
+.topics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: var(--space-24);
+  margin-bottom: var(--space-32);
+}
+
+.topic-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-card-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-24);
+  transition: all var(--duration-normal) var(--ease-standard);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.topic-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--color-primary);
+}
+
+.topic-card__icon {
+  font-size: 2.5rem;
+  margin-bottom: var(--space-16);
+}
+
+.topic-card__title {
+  font-size: var(--font-size-xl);
+  margin-bottom: var(--space-8);
+  color: var(--color-text);
+}
+
+.topic-card__description {
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-16);
+}
+
+.topic-card__progress {
+  margin-top: var(--space-16);
+}
+
+.progress-bar {
+  width: 100%;
+  height: 6px;
+  background: var(--color-secondary);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.progress-bar__fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-active));
+  border-radius: var(--radius-full);
+  transition: width var(--duration-normal) var(--ease-standard);
+}
+
+/* Content Grids */
+.content-grid,
+.operators-grid,
+.casting-grid,
+.io-grid,
+.comments-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: var(--space-24);
+  margin-bottom: var(--space-32);
+}
+
+/* Code Blocks */
+.code-block {
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  margin-bottom: var(--space-16);
+  overflow: hidden;
+}
+
+.code-block pre {
+  margin: 0;
+  padding: var(--space-16);
+  background: transparent;
+  border: none;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  line-height: 1.6;
+  overflow-x: auto;
+}
+
+.code-block code {
+  background: transparent;
+  padding: 0;
+  font-size: inherit;
+  color: var(--color-text);
+}
+
+.run-code,
+.run-operator,
+.run-print {
+  margin: var(--space-8) var(--space-16) var(--space-16);
+}
+
+/* Interactive Demos */
+.interactive-demo {
+  background: var(--color-background);
+  padding: var(--space-16);
+  border-radius: var(--radius-base);
+  border: 1px solid var(--color-border);
+}
+
+.demo-result {
+  margin-top: var(--space-8);
+  padding: var(--space-8);
+  background: var(--color-surface);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  border: 1px solid var(--color-border);
+}
+
+/* Operator Examples */
+.operator-examples {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+}
+
+.operator-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  padding: var(--space-8);
+  background: var(--color-background);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+}
+
+.operator-code {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  background: var(--color-surface);
+  padding: var(--space-4) var(--space-8);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+  min-width: 100px;
+}
+
+.operator-result {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  color: var(--color-primary);
+  font-weight: var(--font-weight-medium);
+  opacity: 0;
+  transition: opacity var(--duration-normal) var(--ease-standard);
+}
+
+.operator-result.show {
+  opacity: 1;
+}
+
+/* Casting Examples */
+.casting-examples {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+}
+
+.casting-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  padding: var(--space-12);
+  background: var(--color-background);
+  border-radius: var(--radius-base);
+  border: 1px solid var(--color-border);
+  flex-wrap: wrap;
+}
+
+.casting-input {
+  flex: 1;
+  min-width: 100px;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+}
+
+.casting-arrow {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+}
+
+.casting-result {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  color: var(--color-primary);
+  font-weight: var(--font-weight-medium);
+  background: var(--color-surface);
+  padding: var(--space-4) var(--space-8);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+  min-width: 80px;
+  text-align: center;
+}
+
+/* Print Examples */
+.print-examples {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+}
+
+.output-console {
+  margin-top: var(--space-8);
+  padding: var(--space-8);
+  background: var(--color-text);
+  color: var(--color-background);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  border: 1px solid var(--color-border);
+}
+
+.output-text {
+  color: #4ade80;
+}
+
+.interactive-print {
+  margin-top: var(--space-24);
+  padding: var(--space-16);
+  background: var(--color-background);
+  border-radius: var(--radius-base);
+  border: 1px solid var(--color-border);
+}
+
+.interactive-print h4 {
+  margin-bottom: var(--space-12);
+  font-size: var(--font-size-lg);
+}
+
+.custom-print {
+  margin-top: var(--space-8);
+  margin-bottom: var(--space-8);
+}
+
+/* Input Examples */
+.input-examples {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-24);
+}
+
+.input-simulator {
+  padding: var(--space-16);
+  background: var(--color-background);
+  border-radius: var(--radius-base);
+  border: 1px solid var(--color-border);
+}
+
+.code-line {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  background: var(--color-surface);
+  padding: var(--space-8);
+  border-radius: var(--radius-sm);
+  margin-bottom: var(--space-12);
+  border: 1px solid var(--color-border);
+}
+
+.input-prompt {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  margin-bottom: var(--space-12);
+  padding: var(--space-8);
+  background: var(--color-text);
+  color: var(--color-background);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+}
+
+.input-prompt .form-control {
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+.variable-display {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  color: var(--color-primary);
+  background: var(--color-surface);
+  padding: var(--space-8);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+}
+
+/* Practical Demo */
+.practical-demo {
+  margin-top: var(--space-24);
+  padding: var(--space-16);
+  background: var(--color-background);
+  border-radius: var(--radius-base);
+  border: 1px solid var(--color-border);
+}
+
+.demo-console {
+  margin-top: var(--space-16);
+  padding: var(--space-16);
+  background: var(--color-text);
+  color: var(--color-background);
+  border-radius: var(--radius-base);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  min-height: 100px;
+  display: none;
+}
+
+.demo-console.active {
+  display: block;
+}
+
+.demo-step {
+  margin-bottom: var(--space-8);
+  padding: var(--space-4) 0;
+}
+
+.demo-input {
+  color: #60a5fa;
+}
+
+.demo-output {
+  color: #4ade80;
+}
+
+/* Comment Examples */
+.comment-tips ul {
+  list-style: none;
+  padding: 0;
+}
+
+.comment-tips li {
+  padding: var(--space-8);
+  margin-bottom: var(--space-8);
+  background: var(--color-background);
+  border-radius: var(--radius-sm);
+  border-left: 4px solid var(--color-primary);
+}
+
+.comment-editor {
+  margin-top: var(--space-24);
+}
+
+.comment-editor textarea {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  line-height: 1.6;
+  resize: vertical;
+}
+
+.comment-analysis {
+  margin-top: var(--space-16);
+  padding: var(--space-16);
+  background: var(--color-background);
+  border-radius: var(--radius-base);
+  border: 1px solid var(--color-border);
+  display: none;
+}
+
+.comment-analysis.show {
+  display: block;
+}
+
+.analysis-item {
+  padding: var(--space-8);
+  margin-bottom: var(--space-8);
+  border-radius: var(--radius-sm);
+  border-left: 4px solid var(--color-success);
+  background: rgba(var(--color-success-rgb), 0.1);
+}
+
+/* Quiz Section */
+.quiz-section {
+  margin-top: var(--space-32);
+  padding: var(--space-24);
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-card-border);
+}
+
+.quiz-section h3 {
+  margin-bottom: var(--space-16);
+  text-align: center;
+}
+
+.quiz-card {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.quiz-question {
+  font-size: var(--font-size-lg);
+  margin-bottom: var(--space-20);
+  text-align: center;
+  font-weight: var(--font-weight-medium);
+}
+
+.quiz-options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: var(--space-12);
+  margin-bottom: var(--space-20);
+}
+
+.quiz-option {
+  padding: var(--space-12) var(--space-16);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-base);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.quiz-option:hover {
+  border-color: var(--color-primary);
+  background: var(--color-secondary);
+}
+
+.quiz-option.correct {
+  border-color: var(--color-success);
+  background: rgba(var(--color-success-rgb), 0.1);
+  color: var(--color-success);
+}
+
+.quiz-option.incorrect {
+  border-color: var(--color-error);
+  background: rgba(var(--color-error-rgb), 0.1);
+  color: var(--color-error);
+}
+
+.quiz-result {
+  text-align: center;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  padding: var(--space-16);
+  border-radius: var(--radius-base);
+  display: none;
+}
+
+.quiz-result.show {
+  display: block;
+}
+
+.quiz-result.correct {
+  background: rgba(var(--color-success-rgb), 0.1);
+  color: var(--color-success);
+  border: 1px solid var(--color-success);
+}
+
+.quiz-result.incorrect {
+  background: rgba(var(--color-error-rgb), 0.1);
+  color: var(--color-error);
+  border: 1px solid var(--color-error);
+}
+
+/* Footer */
+.footer {
+  background: var(--color-surface);
+  border-top: 1px solid var(--color-border);
+  padding: var(--space-24) 0;
+  margin-top: auto;
+}
+
+.footer__text {
+  text-align: center;
+  color: var(--color-text-secondary);
+  margin: 0;
+  font-size: var(--font-size-sm);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .header__content {
+    flex-direction: column;
+    gap: var(--space-12);
+  }
+  
+  .nav__tabs {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .topics-grid,
+  .content-grid,
+  .operators-grid,
+  .casting-grid,
+  .io-grid,
+  .comments-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .casting-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .casting-arrow {
+    text-align: center;
+    transform: rotate(90deg);
+  }
+  
+  .operator-row {
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  
+  .quiz-options {
+    grid-template-columns: 1fr;
+  }
+  
+  .hero__title {
+    font-size: var(--font-size-3xl);
+  }
+  
+  .section__title {
+    font-size: var(--font-size-2xl);
+  }
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideIn {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+.section--active {
+  animation: fadeIn var(--duration-normal) var(--ease-standard);
+}
+
+.demo-step {
+  animation: slideIn var(--duration-fast) var(--ease-standard);
+}
+
+/* Theme Toggle */
+.theme-toggle {
+  position: fixed;
+  top: var(--space-20);
+  right: var(--space-20);
+  z-index: 1000;
+}
+
+/* Syntax Highlighting */
+.language-python .comment { color: #6a9955; }
+.language-python .keyword { color: #569cd6; }
+.language-python .string { color: #ce9178; }
+.language-python .number { color: #b5cea8; }
+.language-python .function { color: #dcdcaa; }
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Focus styles */
+.quiz-option:focus-visible,
+.topic-card:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+}
+
+/* Loading states */
+.loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border: 2px solid var(--color-border);
+  border-top: 2px solid var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}