/* Design Tokens */
            :root {
                /* Base Colors - Clean Reading Theme */
                --color-base-bg: #f9fafb;
                --color-base-surface: #ffffff;
                --color-base-text: #1a202c;
                --color-base-text-muted: #4a5568;

                /* Theme Accents - Knowledge & Reading */
                --color-accent-1: #6366f1;
                --color-accent-2: #4f46e5;
                --color-accent-3: #8b5cf6;
                --color-accent-light: #eef2ff;

                /* Functional Colors */
                --color-shadow: rgba(99, 102, 241, 0.12);
                --color-border: rgba(99, 102, 241, 0.15);
                --color-hover: rgba(99, 102, 241, 0.08);

                /* Gradients */
                --gradient-primary: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2));
                --gradient-subtle: linear-gradient(180deg, var(--color-base-bg), var(--color-accent-light));
                --gradient-animated: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);

                /* Spacing Scale */
                --space-xs: 0.25rem;
                --space-sm: 0.5rem;
                --space-md: 1rem;
                --space-lg: 1.5rem;
                --space-xl: 2rem;
                --space-2xl: 3rem;
                --space-3xl: 4rem;
                --space-4xl: 6rem;

                /* Border Radius */
                --radius-sm: 4px;
                --radius-md: 8px;
                --radius-lg: 12px;
                --radius-xl: 16px;
                --radius-2xl: 24px;
                --radius-full: 9999px;

                /* Shadows */
                --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
                --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06);
                --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06);
                --shadow-theme: 0 10px 30px var(--color-shadow), 0 4px 10px rgba(0, 0, 0, 0.06);

                /* Typography */
                --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
                --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
                --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
                --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
                --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
                --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
                --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
                --text-3xl: clamp(2rem, 1.6rem + 2vw, 2.5rem);
                --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
                --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 5rem);

                --weight-normal: 400;
                --weight-medium: 500;
                --weight-semibold: 600;
                --weight-bold: 700;
                --weight-extrabold: 800;
            }

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

            html {
                scroll-behavior: smooth;
                scroll-padding-top: 80px;
            }

            body {
                font-family: var(--font-sans);
                font-size: var(--text-base);
                line-height: 1.75;
                color: var(--color-base-text);
                background: var(--color-base-bg);
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            /* Skip Link for Accessibility */
            .skip-link {
                position: absolute;
                top: -40px;
                left: 0;
                background: var(--color-accent-1);
                color: white;
                padding: var(--space-sm) var(--space-md);
                text-decoration: none;
                border-radius: var(--radius-sm);
                z-index: 10000;
            }

            .skip-link:focus {
                top: 0;
            }

            /* Navigation Bar */
            .navbar {
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 1000;
                background: rgba(255, 255, 255, 0.8);
                -webkit-backdrop-filter: blur(12px) saturate(180%);
                backdrop-filter: blur(12px) saturate(180%);
                border-bottom: 1px solid var(--color-border);
                box-shadow: var(--shadow-sm);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .navbar-content {
                max-width: 1400px;
                margin: 0 auto;
                padding: var(--space-md) var(--space-lg);
                display: flex;
                align-items: center;
                gap: var(--space-lg);
            }

            .navbar-brand {
                font-weight: var(--weight-bold);
                font-size: var(--text-lg);
                color: var(--color-base-text);
                text-decoration: none;
                position: relative;
                padding: var(--space-xs) var(--space-md);
                border-radius: var(--radius-md);
                transition: all 0.3s ease;
            }

            .navbar-brand::before {
                content: '';
                position: absolute;
                inset: 0;
                background: var(--gradient-primary);
                border-radius: var(--radius-md);
                opacity: 0;
                z-index: -1;
                transition: opacity 0.3s ease;
            }

            .navbar-brand:hover::before {
                opacity: 0.1;
            }

            .navbar-breadcrumb {
                display: flex;
                gap: var(--space-sm);
                list-style: none;
                font-size: var(--text-sm);
            }

            .navbar-breadcrumb li {
                color: var(--color-base-text-muted);
            }

            .navbar-breadcrumb a {
                color: var(--color-base-text-muted);
                text-decoration: none;
                transition: color 0.3s ease;
            }

            .navbar-breadcrumb a:hover {
                color: var(--color-accent-1);
            }

            .navbar-breadcrumb li:not(:last-child)::after {
                content: '›';
                margin-left: var(--space-sm);
                color: var(--color-base-text-muted);
                opacity: 0.5;
            }

            /* Hero Section */
            .hero {
                min-height: 70vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: var(--space-4xl) var(--space-lg);
                background: var(--gradient-subtle);
                position: relative;
                overflow: hidden;
                margin-top: 60px;
            }

            .hero::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image:
                    radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
                pointer-events: none;
            }

            .hero-svg {
                width: 350px;
                height: 350px;
                margin-bottom: var(--space-2xl);
                position: relative;
                z-index: 1;
            }

            .hero-title {
                font-size: var(--text-5xl);
                font-weight: var(--weight-extrabold);
                text-align: center;
                margin-bottom: var(--space-md);
                letter-spacing: -0.03em;
                background: var(--gradient-animated);
                background-size: 200% 200%;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                animation: gradientShift 8s ease infinite;
            }

            .hero-subtitle {
                font-size: var(--text-xl);
                color: var(--color-base-text-muted);
                text-align: center;
                max-width: 600px;
            }

            /* Main Content */
            .main-content {
                max-width: 1400px;
                margin: 0 auto;
                padding: var(--space-4xl) var(--space-lg);
            }

            /* Section Styles */
            .section {
                margin-bottom: var(--space-4xl);
            }

            .section-title {
                font-size: var(--text-3xl);
                font-weight: var(--weight-bold);
                color: var(--color-base-text);
                margin-bottom: var(--space-xl);
                position: relative;
                display: inline-block;
            }

            .section-title::after {
                content: '';
                position: absolute;
                bottom: -8px;
                left: 0;
                width: 60%;
                height: 4px;
                background: var(--gradient-primary);
                border-radius: var(--radius-full);
            }

            /* Blog List Grid */
            .blog-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                gap: var(--space-lg);
                list-style: none;
            }

            /* Blog Card */
            .blog-card {
                background: var(--color-base-surface);
                border-radius: var(--radius-xl);
                padding: var(--space-xl);
                box-shadow: var(--shadow-md);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
            }

            .blog-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background: var(--gradient-primary);
                transform: scaleX(0);
                transform-origin: left;
                transition: transform 0.4s ease;
            }

            .blog-card:hover {
                transform: translateY(-12px) scale(1.02);
                box-shadow: var(--shadow-theme);
            }

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

            .blog-card a {
                color: var(--color-base-text);
                text-decoration: none;
                font-weight: var(--weight-medium);
                font-size: var(--text-lg);
                transition: color 0.3s ease;
                display: flex;
                align-items: center;
                gap: var(--space-sm);
            }

            .blog-card a:hover {
                color: var(--color-accent-1);
            }

            .blog-card a::before {
                content: '→';
                font-size: var(--text-xl);
                transition: transform 0.3s ease;
            }

            .blog-card:hover a::before {
                transform: translateX(4px);
            }

            /* Footer */
            .footer {
                background: var(--color-base-surface);
                border-top: 1px solid var(--color-border);
                padding: var(--space-2xl) var(--space-lg);
                margin-top: var(--space-4xl);
            }

            .footer-content {
                max-width: 1400px;
                margin: 0 auto;
                text-align: center;
            }

            .language-selector {
                display: flex;
                gap: var(--space-sm);
                justify-content: center;
                flex-wrap: wrap;
                margin-bottom: var(--space-lg);
                list-style: none;
            }

            .language-button {
                padding: var(--space-sm) var(--space-lg);
                border-radius: var(--radius-full);
                background: transparent;
                border: 1px solid var(--color-border);
                text-decoration: none;
                color: var(--color-base-text-muted);
                font-size: var(--text-sm);
                transition: all 0.3s ease;
                cursor: pointer;
            }

            .language-button:hover,
            .language-button.active {
                background: var(--gradient-primary);
                color: white;
                border-color: transparent;
                transform: translateY(-2px);
                box-shadow: var(--shadow-md);
            }

            .footer-copyright {
                color: var(--color-base-text-muted);
                font-size: var(--text-sm);
            }

            /* Animations */
            @keyframes gradientShift {
                0% {
                    background-position: 0% 50%;
                }

                50% {
                    background-position: 100% 50%;
                }

                100% {
                    background-position: 0% 50%;
                }
            }

            @keyframes float {

                0%,
                100% {
                    transform: translateY(0px) rotate(0deg);
                }

                50% {
                    transform: translateY(-20px) rotate(5deg);
                }
            }

            @keyframes pulse {

                0%,
                100% {
                    opacity: 1;
                    transform: scale(1);
                }

                50% {
                    opacity: 0.6;
                    transform: scale(1.05);
                }
            }

            @keyframes rotate {
                from {
                    transform: rotate(0deg);
                }

                to {
                    transform: rotate(360deg);
                }
            }

            /* SVG Animations */
            .svg-book {
                animation: float 4s ease-in-out infinite;
            }

            .svg-pages {
                animation: float 5s ease-in-out infinite 0.5s;
            }

            .svg-glow {
                animation: pulse 3s ease-in-out infinite;
            }

            .svg-orbit {
                animation: rotate 20s linear infinite;
                transform-origin: center;
            }

            /* Focus States for Accessibility */
            :focus-visible {
                outline: 3px solid var(--color-accent-1);
                outline-offset: 2px;
                border-radius: var(--radius-sm);
            }

            /* Reduced Motion */
            @media (prefers-reduced-motion: reduce) {

                *,
                *::before,
                *::after {
                    animation-duration: 0.01ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: 0.01ms !important;
                }
            }

            /* Responsive Design */
            @media (max-width: 768px) {
                .hero {
                    min-height: 60vh;
                    padding: var(--space-3xl) var(--space-md);
                }

                .hero-svg {
                    width: 250px;
                    height: 250px;
                }

                .navbar-content {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: var(--space-sm);
                }

                .blog-grid {
                    grid-template-columns: 1fr;
                }

                .main-content {
                    padding: var(--space-2xl) var(--space-md);
                }
            }
/* Shared language-version footer */
.language-switcher { margin: 0 auto 1.5rem; }
.language-switcher-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding: 0; list-style: none; }
.language-switcher a { display: inline-block; padding: 0.45rem 0.75rem; border: 1px solid currentColor; border-radius: 999px; color: inherit; text-decoration: none; opacity: 0.8; }
.language-switcher a:hover, .language-switcher a:focus-visible, .language-switcher a[aria-current="page"] { opacity: 1; text-decoration: underline; }