RSK World - Action Recognition Dataset - Project Files Browser | RSK World

backtesting.py script.js loader.py styles.css

script.js

/**
 * ==================================================================================
 *    Action Recognition Dataset - JavaScript
 * ==================================================================================
 *    Project: Action Recognition Dataset
 *    Category: Video Data / Data Science
 *    
 * ==================================================================================
 *    DEVELOPER INFORMATION
 * ==================================================================================
 *    Website: RSK World (https://rskworld.in)
 *    Founded by: Molla Samser
 *    Designer & Tester: Rima Khatun
 *    
 *    Contact Information:
 *    - Email: help@rskworld.in
 *    - Email: support@rskworld.in
 *    - Phone: +91 93305 39277
 *    
 * ==================================================================================
 *    COPYRIGHT
 * ==================================================================================
 *    © 2026 RSK World. All Rights Reserved.
 *    
 * ==================================================================================
 */

// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
    initNavbar();
    initMobileMenu();
    initBackToTop();
    initCounterAnimation();
    initCodeTabs();
    initFolderToggle();
    initVideoPlayer();
    initSmoothScroll();
});

/**
 * Navbar scroll effect
 * Adds background blur and shadow when scrolled
 */
function initNavbar() {
    const navbar = document.getElementById('navbar');
    
    function handleScroll() {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    }
    
    window.addEventListener('scroll', handleScroll);
    handleScroll(); // Check initial state
}

/**
 * Mobile menu toggle
 */
function initMobileMenu() {
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    
    if (!mobileMenuBtn || !mobileMenu) return;
    
    mobileMenuBtn.addEventListener('click', function() {
        mobileMenu.classList.toggle('active');
        this.classList.toggle('active');
    });
    
    // Close menu when clicking on a link
    const mobileLinks = mobileMenu.querySelectorAll('.mobile-link');
    mobileLinks.forEach(link => {
        link.addEventListener('click', function() {
            mobileMenu.classList.remove('active');
            mobileMenuBtn.classList.remove('active');
        });
    });
    
    // Close menu when clicking outside
    document.addEventListener('click', function(e) {
        if (!mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
            mobileMenu.classList.remove('active');
            mobileMenuBtn.classList.remove('active');
        }
    });
}

/**
 * Back to top button
 */
function initBackToTop() {
    const backToTop = document.getElementById('backToTop');
    
    if (!backToTop) return;
    
    function handleScroll() {
        if (window.scrollY > 500) {
            backToTop.classList.add('visible');
        } else {
            backToTop.classList.remove('visible');
        }
    }
    
    window.addEventListener('scroll', handleScroll);
    
    backToTop.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
}

/**
 * Counter animation for stats
 */
function initCounterAnimation() {
    const counters = document.querySelectorAll('.stat-number[data-count]');
    
    const observerOptions = {
        threshold: 0.5,
        rootMargin: '0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateCounter(entry.target);
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    counters.forEach(counter => {
        observer.observe(counter);
    });
}

/**
 * Animate a single counter
 */
function animateCounter(element) {
    const target = parseInt(element.getAttribute('data-count'));
    const duration = 2000;
    const step = target / (duration / 16);
    let current = 0;
    
    const timer = setInterval(() => {
        current += step;
        if (current >= target) {
            element.textContent = target.toLocaleString();
            clearInterval(timer);
        } else {
            element.textContent = Math.floor(current).toLocaleString();
        }
    }, 16);
}

/**
 * Code tabs functionality
 */
function initCodeTabs() {
    const tabs = document.querySelectorAll('.code-tab');
    const panels = document.querySelectorAll('.code-panel');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            
            // Remove active class from all tabs and panels
            tabs.forEach(t => t.classList.remove('active'));
            panels.forEach(p => p.classList.remove('active'));
            
            // Add active class to clicked tab and corresponding panel
            this.classList.add('active');
            document.getElementById(targetTab).classList.add('active');
        });
    });
}

/**
 * Folder toggle in file tree
 */
function initFolderToggle() {
    // Toggle folder function is called inline in HTML
    // This function handles the visual feedback
}

function toggleFolder(element) {
    const parent = element.closest('.tree-item');
    const subTree = parent.querySelector('.sub-tree');
    
    if (subTree) {
        subTree.classList.toggle('collapsed');
        const icon = element.querySelector('i');
        if (icon) {
            icon.classList.toggle('fa-folder');
            icon.classList.toggle('fa-folder-open');
        }
    }
}

/**
 * Real Video Player for hero section
 * Displays actual sample videos from the dataset
 */
function initVideoPlayer() {
    const heroVideo = document.getElementById('heroVideo');
    const actionLabel = document.getElementById('actionLabel');
    const confidenceValue = document.getElementById('confidenceValue');
    const videoTitle = document.getElementById('videoTitle');
    const prevBtn = document.getElementById('prevVideo');
    const nextBtn = document.getElementById('nextVideo');
    const currentIndexEl = document.getElementById('currentVideoIndex');
    const totalVideosEl = document.getElementById('totalVideos');
    const thumbnails = document.querySelectorAll('.thumbnail');
    const timelineProgress = document.getElementById('timelineProgress');
    
    if (!heroVideo) return;
    
    // Video list with labels and confidence scores
    const videos = [
        { src: 'sample_data/train/dancing/dancing_001.mp4', label: 'Dancing', confidence: 98.5, file: 'dancing_001.mp4' },
        { src: 'sample_data/train/running/running_001.mp4', label: 'Running', confidence: 96.2, file: 'running_001.mp4' },
        { src: 'sample_data/train/walking/walking_001.mp4', label: 'Walking', confidence: 97.8, file: 'walking_001.mp4' },
        { src: 'sample_data/train/jumping/jumping_001.mp4', label: 'Jumping', confidence: 94.8, file: 'jumping_001.mp4' },
        { src: 'sample_data/train/yoga/yoga_001.mp4', label: 'Yoga', confidence: 95.3, file: 'yoga_001.mp4' },
        { src: 'sample_data/train/stretching/stretching_001.mp4', label: 'Stretching', confidence: 93.7, file: 'stretching_001.mp4' },
        { src: 'sample_data/train/exercising/exercising_001.mp4', label: 'Exercising', confidence: 92.5, file: 'exercising_001.mp4' }
    ];
    
    let currentIndex = 0;
    
    // Update total videos count
    if (totalVideosEl) {
        totalVideosEl.textContent = videos.length;
    }
    
    function loadVideo(index) {
        const video = videos[index];
        
        // Update video source
        heroVideo.src = video.src;
        heroVideo.load();
        heroVideo.play().catch(e => console.log('Auto-play prevented'));
        
        // Update labels with animation
        if (actionLabel) {
            actionLabel.style.opacity = '0';
            setTimeout(() => {
                actionLabel.textContent = video.label;
                if (confidenceValue) {
                    confidenceValue.textContent = video.confidence + '%';
                }
                actionLabel.style.opacity = '1';
            }, 200);
        }
        
        // Update video title
        if (videoTitle) {
            videoTitle.textContent = video.file;
        }
        
        // Update index display
        if (currentIndexEl) {
            currentIndexEl.textContent = index + 1;
        }
        
        // Update thumbnail active state
        thumbnails.forEach((thumb, i) => {
            if (i === index) {
                thumb.classList.add('active');
            } else {
                thumb.classList.remove('active');
            }
        });
    }
    
    // Navigation buttons
    if (prevBtn) {
        prevBtn.addEventListener('click', () => {
            currentIndex = (currentIndex - 1 + videos.length) % videos.length;
            loadVideo(currentIndex);
        });
    }
    
    if (nextBtn) {
        nextBtn.addEventListener('click', () => {
            currentIndex = (currentIndex + 1) % videos.length;
            loadVideo(currentIndex);
        });
    }
    
    // Thumbnail click handlers
    thumbnails.forEach((thumb, index) => {
        thumb.addEventListener('click', () => {
            currentIndex = index;
            loadVideo(currentIndex);
        });
    });
    
    // Video timeline progress
    if (heroVideo && timelineProgress) {
        heroVideo.addEventListener('timeupdate', () => {
            const progress = (heroVideo.currentTime / heroVideo.duration) * 100;
            timelineProgress.style.width = progress + '%';
        });
        
        // Loop to next video when current ends
        heroVideo.addEventListener('ended', () => {
            currentIndex = (currentIndex + 1) % videos.length;
            loadVideo(currentIndex);
        });
    }
    
    // Auto-cycle videos every 8 seconds
    let autoPlayInterval = setInterval(() => {
        currentIndex = (currentIndex + 1) % videos.length;
        loadVideo(currentIndex);
    }, 8000);
    
    // Pause auto-cycle on hover
    const videoShowcase = document.querySelector('.video-showcase');
    if (videoShowcase) {
        videoShowcase.addEventListener('mouseenter', () => {
            clearInterval(autoPlayInterval);
        });
        
        videoShowcase.addEventListener('mouseleave', () => {
            autoPlayInterval = setInterval(() => {
                currentIndex = (currentIndex + 1) % videos.length;
                loadVideo(currentIndex);
            }, 8000);
        });
    }
    
    // Initial setup
    if (actionLabel) {
        actionLabel.style.transition = 'opacity 0.2s ease';
    }
}

/**
 * Smooth scroll for navigation links
 */
function initSmoothScroll() {
    const links = document.querySelectorAll('a[href^="#"]');
    
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            
            if (href === '#') return;
            
            e.preventDefault();
            
            const target = document.querySelector(href);
            if (target) {
                const offsetTop = target.offsetTop - 80;
                
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });
}

/**
 * Add scroll reveal animations
 */
function initScrollReveal() {
    const elements = document.querySelectorAll('.feature-card, .overview-card');
    
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    elements.forEach((el, index) => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
        observer.observe(el);
    });
}

/**
 * Utility: Debounce function
 */
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

/**
 * Utility: Throttle function
 */
function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// Console greeting for developers
console.log('%c🎬 Action Recognition Dataset', 'font-size: 24px; font-weight: bold; color: #00d4ff;');
console.log('%cDeveloped by RSK World (rskworld.in)', 'font-size: 14px; color: #94a3b8;');
console.log('%cFounder: Molla Samser | Designer: Rima Khatun', 'font-size: 12px; color: #64748b;');
console.log('%cContact: help@rskworld.in | +91 93305 39277', 'font-size: 12px; color: #64748b;');

437 lines•13.8 KB

javascript

loader.py

Raw Download

"""
==================================================================================
    Action Recognition Dataset - Python Loader
==================================================================================
    Project: Action Recognition Dataset
    Category: Video Data / Data Science
    
==================================================================================
    DEVELOPER INFORMATION
==================================================================================
    Website: RSK World (https://rskworld.in)
    Founded by: Molla Samser
    Designer & Tester: Rima Khatun
    
    Contact Information:
    - Email: help@rskworld.in
    - Email: support@rskworld.in
    - Phone: +91 93305 39277
    
==================================================================================
    COPYRIGHT
==================================================================================
    © 2026 RSK World. All Rights Reserved.
    
==================================================================================
"""

import cv2
import os
import json
import numpy as np
from pathlib import Path
from typing import List, Tuple, Dict, Optional


class ActionRecognitionDataset:
    """
    Action Recognition Dataset Loader
    
    A comprehensive video dataset loader for action recognition tasks.
    Supports loading videos, extracting frames, and preprocessing for
    various deep learning frameworks.
    
    Author: Molla Samser (RSK World)
    Website: https://rskworld.in
    Contact: help@rskworld.in
    """
    
    def __init__(
        self,
        root_dir: str,
        split: str = 'train',
        num_frames: int = 16,
        frame_size: Tuple[int, int] = (224, 224),
        normalize: bool = True
    ):
        """
        Initialize the Action Recognition Dataset loader.
        
        Args:
            root_dir: Path to the dataset root directory
            split: Dataset split ('train', 'val', or 'test')
            num_frames: Number of frames to sample from each video
            frame_size: Target frame size (height, width)
            normalize: Whether to normalize pixel values to [0, 1]
        """
        self.root_dir = Path(root_dir)
        self.split = split
        self.num_frames = num_frames
        self.frame_size = frame_size
        self.normalize = normalize
        
        # Load class labels
        self.class_labels = self._load_class_labels()
        self.num_classes = len(self.class_labels)
        
        # Build sample index
        self.samples = self._build_sample_index()
        
        print(f"[RSK World] Loaded {len(self.samples)} samples from {split} split")
        print(f"[RSK World] Number of classes: {self.num_classes}")
    
    def _load_class_labels(self) -> Dict[int, str]:
        """Load class labels from annotation file."""
        label_file = self.root_dir / 'annotations' / 'class_labels.json'
        
        if label_file.exists():
            with open(label_file, 'r') as f:
                data = json.load(f)
                return {int(k): v for k, v in data['classes'].items()}
        else:
            # Infer from directory structure
            split_dir = self.root_dir / self.split
            if split_dir.exists():
                classes = sorted([d.name for d in split_dir.iterdir() if d.is_dir()])
                return {i: c for i, c in enumerate(classes)}
            return {}
    
    def _build_sample_index(self) -> List[Tuple[str, int]]:
        """Build index of all video samples with labels."""
        samples = []
        split_dir = self.root_dir / self.split
        
        if not split_dir.exists():
            print(f"[RSK World] Warning: Split directory not found: {split_dir}")
            return samples
        
        for class_idx, class_name in self.class_labels.items():
            class_dir = split_dir / class_name
            
            if not class_dir.exists():
                continue
            
            for video_file in class_dir.iterdir():
                if video_file.suffix.lower() in ['.mp4', '.avi', '.mov', '.mkv']:
                    samples.append((str(video_file), class_idx))
        
        return samples
    
    def load_video(self, video_path: str) -> np.ndarray:
        """
        Load and preprocess a video file.
        
        Args:
            video_path: Path to the video file
            
        Returns:
            numpy array of shape (num_frames, height, width, channels)
        """
        cap = cv2.VideoCapture(video_path)
        frames = []
        
        while True:
            ret, frame = cap.read()
            if not ret:
                break
            
            # Resize frame
            frame = cv2.resize(frame, self.frame_size)
            
            # Convert BGR to RGB
            frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
            
            frames.append(frame)
        
        cap.release()
        
        if len(frames) == 0:
            # Return zeros if video is empty
            return np.zeros(
                (self.num_frames, self.frame_size[0], self.frame_size[1], 3),
                dtype=np.float32 if self.normalize else np.uint8
            )
        
        # Sample frames uniformly
        indices = np.linspace(0, len(frames) - 1, self.num_frames).astype(int)
        sampled_frames = np.array([frames[i] for i in indices])
        
        # Normalize if required
        if self.normalize:
            sampled_frames = sampled_frames.astype(np.float32) / 255.0
        
        return sampled_frames
    
    def __len__(self) -> int:
        """Return the total number of samples."""
        return len(self.samples)
    
    def __getitem__(self, idx: int) -> Tuple[np.ndarray, int]:
        """
        Get a sample by index.
        
        Args:
            idx: Sample index
            
        Returns:
            Tuple of (frames, label)
        """
        video_path, label = self.samples[idx]
        frames = self.load_video(video_path)
        return frames, label
    
    def get_class_name(self, class_idx: int) -> str:
        """Get class name by index."""
        return self.class_labels.get(class_idx, f"unknown_{class_idx}")
    
    def get_class_distribution(self) -> Dict[str, int]:
        """Get distribution of samples across classes."""
        distribution = {name: 0 for name in self.class_labels.values()}
        
        for _, label in self.samples:
            class_name = self.class_labels[label]
            distribution[class_name] += 1
        
        return distribution


def create_data_generator(
    root_dir: str,
    split: str = 'train',
    batch_size: int = 8,
    num_frames: int = 16,
    shuffle: bool = True
):
    """
    Create a data generator for batch processing.
    
    Author: Molla Samser (RSK World)
    Website: https://rskworld.in
    
    Args:
        root_dir: Path to the dataset root directory
        split: Dataset split ('train', 'val', or 'test')
        batch_size: Number of samples per batch
        num_frames: Number of frames to sample from each video
        shuffle: Whether to shuffle samples
        
    Yields:
        Tuple of (batch_frames, batch_labels)
    """
    dataset = ActionRecognitionDataset(
        root_dir=root_dir,
        split=split,
        num_frames=num_frames
    )
    
    indices = np.arange(len(dataset))
    
    while True:
        if shuffle:
            np.random.shuffle(indices)
        
        for start_idx in range(0, len(indices), batch_size):
            batch_indices = indices[start_idx:start_idx + batch_size]
            
            batch_frames = []
            batch_labels = []
            
            for idx in batch_indices:
                frames, label = dataset[idx]
                batch_frames.append(frames)
                batch_labels.append(label)
            
            yield np.array(batch_frames), np.array(batch_labels)


# Example usage
if __name__ == '__main__':
    print("=" * 60)
    print("Action Recognition Dataset Loader")
    print("RSK World (https://rskworld.in)")
    print("Founder: Molla Samser | Designer: Rima Khatun")
    print("Contact: help@rskworld.in | +91 93305 39277")
    print("=" * 60)
    
    # Example: Load training dataset
    # dataset = ActionRecognitionDataset(
    #     root_dir='./action-recognition',
    #     split='train',
    #     num_frames=16
    # )
    
    # # Get a sample
    # frames, label = dataset[0]
    # print(f"Frames shape: {frames.shape}")
    # print(f"Label: {label} ({dataset.get_class_name(label)})")
    
    # # Get class distribution
    # distribution = dataset.get_class_distribution()
    # print(f"Class distribution: {distribution}")
    
    print("\nDataset loader ready!")
    print("For usage examples, see README.md")

275 lines•8.9 KB

python

styles.css

Raw Download

/*
==================================================================================
    Action Recognition Dataset - Stylesheet
==================================================================================
    Project: Action Recognition Dataset
    Category: Video Data / Data Science
    
==================================================================================
    DEVELOPER INFORMATION
==================================================================================
    Website: RSK World (https://rskworld.in)
    Founded by: Molla Samser
    Designer & Tester: Rima Khatun
    
    Contact Information:
    - Email: help@rskworld.in
    - Email: support@rskworld.in
    - Phone: +91 93305 39277
    
==================================================================================
    COPYRIGHT
==================================================================================
    © 2026 RSK World. All Rights Reserved.
    
==================================================================================
*/

/* ============================================
   CSS Variables & Theme
   ============================================ */
:root {
    /* Primary Color Palette - Deep Ocean Theme */
    --primary-hue: 220;
    --primary: hsl(220, 90%, 56%);
    --primary-light: hsl(220, 90%, 65%);
    --primary-dark: hsl(220, 90%, 45%);
    --primary-glow: hsla(220, 90%, 56%, 0.4);
    
    /* Accent Colors */
    --accent-cyan: #00d4ff;
    --accent-purple: #a855f7;
    --accent-pink: #ec4899;
    --accent-orange: #f97316;
    --accent-green: #22c55e;
    --accent-yellow: #eab308;
    
    /* Dark Theme Background */
    --bg-primary: #0a0e17;
    --bg-secondary: #111827;
    --bg-tertiary: #1f2937;
    --bg-card: rgba(17, 24, 39, 0.8);
    --bg-card-hover: rgba(31, 41, 55, 0.9);
    
    /* Text Colors */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    /* Borders & Shadows */
    --border-color: rgba(148, 163, 184, 0.1);
    --border-glow: rgba(0, 212, 255, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px var(--primary-glow);
    
    /* Typography */
    --font-primary: 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    
    /* Z-index layers */
    --z-background: -1;
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-tooltip: 400;
}

/* ============================================
   Reset & Base Styles
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-base);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ============================================
   Animated Background
   ============================================ */
.bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-background);
    pointer-events: none;
    overflow: hidden;
}

.bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 50% 90%, rgba(236, 72, 153, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, var(--bg-primary) 0%, #0d1321 100%);
}

.bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: float 15s ease-in-out infinite;
}

.shape-1 {
    width: 400px;
    height: 400px;
    background: var(--accent-cyan);
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.shape-2 {
    width: 300px;
    height: 300px;
    background: var(--accent-purple);
    top: 60%;
    right: 10%;
    animation-delay: -5s;
}

.shape-3 {
    width: 250px;
    height: 250px;
    background: var(--accent-pink);
    bottom: 20%;
    left: 30%;
    animation-delay: -10s;
}

.shape-4 {
    width: 200px;
    height: 200px;
    background: var(--primary);
    top: 40%;
    right: 30%;
    animation-delay: -7s;
}

.shape-5 {
    width: 150px;
    height: 150px;
    background: var(--accent-green);
    top: 80%;
    left: 60%;
    animation-delay: -12s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(20px, 30px) scale(1.02); }
}

/* ============================================
   Navigation
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    padding: var(--spacing-md) 0;
    transition: var(--transition-base);
}

.navbar.scrolled {
    background: rgba(10, 14, 23, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.5rem;
    font-weight: 700;
}

.nav-logo i {
    color: var(--accent-cyan);
    font-size: 1.75rem;
}

.nav-logo .highlight {
    color: var(--accent-cyan);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.nav-link {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    padding: var(--spacing-sm) 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-cyan);
    transition: var(--transition-base);
}

.nav-link:hover {
    color: var(--text-primary);
}

.nav-link:hover::after {
    width: 100%;
}

.contact-btn {
    background: linear-gradient(135deg, var(--primary), var(--accent-purple));
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--radius-full);
    color: var(--text-primary) !important;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.contact-btn::after {
    display: none;
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--spacing-sm);
}

.mobile-menu-btn span {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    border-radius: var(--radius-full);
    transition: var(--transition-base);
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: rgba(10, 14, 23, 0.98);
    backdrop-filter: blur(20px);
    padding: var(--spacing-xl);
    flex-direction: column;
    gap: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    transform: translateY(-100%);
    opacity: 0;
    transition: var(--transition-base);
    z-index: var(--z-dropdown);
}

.mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
}

.mobile-link {
    color: var(--text-secondary);
    font-size: 1.1rem;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    transition: var(--transition-base);
}

.mobile-link:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-3xl);
    padding: calc(80px + var(--spacing-3xl)) var(--spacing-xl) var(--spacing-3xl);
    max-width: 1400px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(236, 72, 153, 0.2));
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-orange);
    border: 1px solid rgba(249, 115, 22, 0.3);
    margin-bottom: var(--spacing-lg);
    animation: fadeInUp 0.6s ease;
}

.hero-badge i {
    animation: pulse 1.5s ease infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
}

.title-line {
    display: block;
    animation: fadeInUp 0.6s ease;
    animation-fill-mode: both;
}

.title-line:nth-child(2) {
    animation-delay: 0.1s;
}

.gradient-text {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple), var(--accent-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 540px;
    margin-bottom: var(--spacing-xl);
    animation: fadeInUp 0.6s ease 0.2s both;
}

.hero-stats {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    animation: fadeInUp 0.6s ease 0.3s both;
}

.stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.stat i {
    font-size: 1.5rem;
    color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.hero-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    animation: fadeInUp 0.6s ease 0.4s both;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition-base);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--accent-purple));
    color: var(--text-primary);
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.4);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-cyan);
}

.hero-tech {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    animation: fadeInUp 0.6s ease 0.5s both;
}

.tech-label {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.tech-tags {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.tech-tag {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--bg-tertiary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.tech-tag i {
    color: var(--accent-cyan);
}

/* Hero Visual */
.hero-visual {
    animation: fadeInRight 0.8s ease 0.3s both;
}

.video-showcase {
    position: relative;
}

.video-frame {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.frame-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.frame-dots {
    display: flex;
    gap: var(--spacing-sm);
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot.red { background: #ef4444; }
.dot.yellow { background: #eab308; }
.dot.green { background: #22c55e; }

.frame-title {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.frame-content {
    padding: var(--spacing-xl);
}


/* Stick Figure Animation */
.action-animation {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stick-figure {
    position: relative;
    width: 60px;
    height: 120px;
}

.stick-figure .head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 20px var(--accent-cyan);
}

.stick-figure .body {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 45px;
    background: var(--accent-cyan);
    border-radius: var(--radius-full);
}

.stick-figure .arm {
    position: absolute;
    top: 30px;
    width: 35px;
    height: 4px;
    background: var(--accent-cyan);
    border-radius: var(--radius-full);
    transform-origin: left center;
}

.stick-figure .left-arm {
    left: -5px;
    animation: armSwing 0.8s ease-in-out infinite;
}

.stick-figure .right-arm {
    right: -5px;
    transform-origin: right center;
    animation: armSwing 0.8s ease-in-out infinite reverse;
}

.stick-figure .leg {
    position: absolute;
    top: 70px;
    width: 4px;
    height: 45px;
    background: var(--accent-cyan);
    border-radius: var(--radius-full);
    transform-origin: top center;
}

.stick-figure .left-leg {
    left: 15px;
    animation: legSwing 0.8s ease-in-out infinite;
}

.stick-figure .right-leg {
    right: 15px;
    animation: legSwing 0.8s ease-in-out infinite reverse;
}

@keyframes armSwing {
    0%, 100% { transform: rotate(-30deg); }
    50% { transform: rotate(30deg); }
}

@keyframes legSwing {
    0%, 100% { transform: rotate(-20deg); }
    50% { transform: rotate(20deg); }
}

/* Running Animation State */
.stick-figure.running .left-arm,
.stick-figure.running .right-arm {
    animation-duration: 0.4s;
}

.stick-figure.running .left-leg,
.stick-figure.running .right-leg {
    animation-duration: 0.4s;
}

/* Jumping Animation State */
.stick-figure.jumping {
    animation: jump 1s ease infinite;
}

.stick-figure.jumping .left-arm,
.stick-figure.jumping .right-arm {
    animation: armUp 1s ease infinite;
}

.stick-figure.jumping .left-leg,
.stick-figure.jumping .right-leg {
    animation: legBend 1s ease infinite;
}

@keyframes jump {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-40px); }
}

@keyframes armUp {
    0%, 100% { transform: rotate(-60deg); }
    50% { transform: rotate(-120deg); }
}

@keyframes legBend {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(30deg); }
}

.action-label {
    text-align: center;
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
}

.label-text {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: var(--spacing-xs);
}

.confidence {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.video-timeline {
    position: relative;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    border-radius: var(--radius-full);
    width: 0%;
    animation: progressBar 3s ease-in-out infinite;
}

@keyframes progressBar {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Real Video Styles */
.video-preview {
    position: relative;
    background: #000;
    border-radius: var(--radius-lg);
    height: 280px;
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}

.hero-real-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
}

.video-preview .action-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: var(--spacing-md);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.video-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.video-nav-btn {
    width: 40px;
    height: 40px;
    background: rgba(0, 212, 255, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-md);
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
}

.video-nav-btn:hover {
    background: var(--accent-cyan);
    color: var(--bg-primary);
    transform: scale(1.1);
}

.video-indicator {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.video-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    justify-content: center;
}

.thumbnail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-base);
    min-width: 70px;
}

.thumbnail i {
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: var(--transition-base);
}

.thumbnail span {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.thumbnail:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
}

.thumbnail:hover i {
    color: var(--accent-cyan);
}

.thumbnail.active {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.15);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

.thumbnail.active i {
    color: var(--accent-cyan);
}

.thumbnail.active span {
    color: var(--text-primary);
}

/* ============================================
   Sections Common Styles
   ============================================ */
.section {
    padding: var(--spacing-3xl) var(--spacing-xl);
    position: relative;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
}

.section-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(168, 85, 247, 0.1));
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 212, 255, 0.2);
    margin-bottom: var(--spacing-md);
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--spacing-md);
}

.section-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   Overview Section
   ============================================ */
.overview-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--spacing-xl);
}

.overview-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color);
    transition: var(--transition-base);
}

.overview-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-glow);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.1);
}

.overview-card.main-card {
    grid-row: span 2;
}

.card-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-bottom: var(--spacing-lg);
}

.card-icon.purple {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
}

.card-icon.cyan {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
}

.overview-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.overview-card p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text-secondary);
}

.feature-list li i {
    color: var(--accent-green);
    font-size: 1rem;
}

.use-case-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.use-case-list li {
    color: var(--text-secondary);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-base);
}

.use-case-list li:last-child {
    border-bottom: none;
}

.use-case-list li:hover {
    color: var(--accent-cyan);
    padding-left: var(--spacing-sm);
}

/* ============================================
   Features Section
   ============================================ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.feature-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    transform: scaleX(0);
    transition: var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-glow);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(168, 85, 247, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--accent-cyan);
    margin: 0 auto var(--spacing-lg);
    transition: var(--transition-base);
}

.feature-card:hover .feature-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(168, 85, 247, 0.2));
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* ============================================
   Structure Section
   ============================================ */
.structure-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
}

.file-tree {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.tree-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-weight: 600;
}

.tree-header i {
    color: var(--accent-yellow);
}

.tree-list {
    padding: var(--spacing-lg);
}

.tree-item {
    margin-bottom: var(--spacing-sm);
}

.item-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.item-header:hover {
    background: var(--bg-tertiary);
}

.item-header.folder i {
    color: var(--accent-yellow);
}

.item-header.file i {
    color: var(--text-muted);
}

.item-header.file i.json {
    color: var(--accent-orange);
}

.item-header.file i.md {
    color: var(--accent-cyan);
}

.item-header.file i.txt {
    color: var(--text-secondary);
}

.item-count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.sub-tree {
    margin-left: var(--spacing-xl);
    padding-left: var(--spacing-md);
    border-left: 1px dashed var(--border-color);
    margin-top: var(--spacing-sm);
}

.more-items {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
}

/* Structure Info */
.structure-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
}

.class-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-2xl);
}

.class-tag {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--bg-card);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
}

.class-tag:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
}

.class-tag i {
    color: var(--accent-cyan);
    font-size: 0.875rem;
}

.format-info {
    background: var(--bg-card);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.format-info h4 {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-md);
    color: var(--accent-cyan);
}

.format-info ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.format-info li {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.format-info strong {
    color: var(--text-primary);
}

/* ============================================
   Usage Section
   ============================================ */
.code-examples {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.code-tabs {
    display: flex;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.code-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    color: var(--text-muted);
    font-weight: 500;
    transition: var(--transition-fast);
    border-bottom: 2px solid transparent;
}

.code-tab:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
}

.code-tab.active {
    color: var(--accent-cyan);
    border-bottom-color: var(--accent-cyan);
}

.code-content {
    position: relative;
}

.code-panel {
    display: none;
    padding: var(--spacing-xl);
}

.code-panel.active {
    display: block;
}

.code-panel pre {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    overflow-x: auto;
    border: 1px solid var(--border-color);
}

.code-panel code {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-primary);
}

/* Syntax Highlighting */
.keyword { color: var(--accent-purple); }
.function { color: var(--accent-cyan); }
.string { color: var(--accent-green); }
.comment { color: var(--text-muted); font-style: italic; }
.number { color: var(--accent-orange); }
.class-name { color: var(--accent-yellow); }

/* ============================================
   Download Section
   ============================================ */
.download {
    padding: var(--spacing-3xl) var(--spacing-xl);
}

.download-card {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    padding: var(--spacing-3xl);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
    position: relative;
    overflow: hidden;
}

.download-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.download-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: var(--spacing-md);
}

.download-content p {
    color: var(--text-secondary);
    font-size: 1.125rem;
    margin-bottom: var(--spacing-xl);
}

.download-stats {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.download-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
}

.download-stat i {
    color: var(--accent-cyan);
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    color: var(--bg-primary);
    padding: var(--spacing-lg) var(--spacing-2xl);
    border-radius: var(--radius-lg);
    font-size: 1.125rem;
    font-weight: 700;
    transition: var(--transition-base);
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
}

.btn-download:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.4);
}

.download-visual {
    display: flex;
    justify-content: center;
}

.file-icon-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.file-icon-large i {
    font-size: 6rem;
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.3));
    animation: float 3s ease-in-out infinite;
}

.file-icon-large .file-name {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ============================================
   Footer
   ============================================ */
.footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: var(--spacing-3xl);
    margin-bottom: var(--spacing-2xl);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.footer-logo i {
    color: var(--accent-cyan);
}

.footer-logo .highlight {
    color: var(--accent-cyan);
}

.footer-brand p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    max-width: 300px;
}

.footer-social {
    display: flex;
    gap: var(--spacing-sm);
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: var(--transition-base);
}

.social-link:hover {
    background: var(--accent-cyan);
    color: var(--bg-primary);
    transform: translateY(-3px);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.footer-column h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.footer-column ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-column li {
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.footer-column li i {
    color: var(--accent-cyan);
    width: 16px;
}

.footer-column a {
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.footer-column a:hover {
    color: var(--accent-cyan);
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-xl);
    text-align: center;
}

.footer-info {
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.footer-info strong {
    color: var(--accent-cyan);
}

.copyright {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.copyright a {
    color: var(--accent-cyan);
}

/* ============================================
   Back to Top Button
   ============================================ */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-primary);
    font-size: 1.25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--transition-base);
    z-index: var(--z-sticky);
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.4);
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1200px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: calc(80px + var(--spacing-2xl));
    }
    
    .hero-description {
        margin: 0 auto var(--spacing-xl);
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .hero-tech {
        justify-content: center;
    }
    
    .hero-visual {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .overview-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .overview-card.main-card {
        grid-column: span 2;
        grid-row: auto;
    }
    
    .structure-container {
        grid-template-columns: 1fr;
    }
    
    .download-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    .mobile-menu {
        display: flex;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-links {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .hero-stats {
        flex-direction: column;
        align-items: center;
    }
    
    .stat {
        width: 100%;
        justify-content: center;
    }
    
    .hero-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .overview-grid {
        grid-template-columns: 1fr;
    }
    
    .overview-card.main-card {
        grid-column: auto;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .class-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-links {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .code-tabs {
        flex-wrap: wrap;
    }
    
    .code-tab {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.85rem;
    }
    
    .download-stats {
        flex-direction: column;
        align-items: center;
    }
}

1,822 lines•39.4 KB

css

Theme Settings

Color Scheme

Display Options

Font Size