:root {
            --light-bg: #eef2f3;
            --dark-text: #2c3e50;
            --primary-accent: #005a9c; /* Epcot Blue */
            --secondary-accent: #d83a7c; /* Magenta/Pink */
            --tertiary-accent: #ff7f00; /* Atomic Orange */
            
            /* Gradient variables for scrolling animation */
            --grad-start: #c4b5fd; /* Lighter Purple */
            --grad-end: #fde047; /* Lighter Yellow */
            --card-slant: 20px; /* offset for diagonal clip-path */
            
            /* Dark theme variables */
            --dark-bg: #0a0a0f;
            --light-text: #ffffff;
            --primary-accent-dark: #ffffff;
            --secondary-accent-dark: #f97316;
            --tertiary-accent-dark: #0891b2;
        }

        html[data-theme="dark"] {
            --light-bg: var(--dark-bg);
            --dark-text: var(--light-text);
            --primary-accent: var(--primary-accent-dark);
            --secondary-accent: var(--secondary-accent-dark);
            --tertiary-accent: var(--tertiary-accent-dark);
        }

        html[data-theme="dark"] .glass-card {
            background: rgba(15, 15, 25, 0.7);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        html[data-theme="dark"] #fixed-bg {
            background-color: var(--grad-end);
            background-image: 
                linear-gradient(45deg, transparent 0px, transparent 39px, rgba(255,255,255,0.08) 39px, rgba(255,255,255,0.08) 40px),
                linear-gradient(-45deg, transparent 0px, transparent 39px, rgba(255,255,255,0.05) 39px, rgba(255,255,255,0.05) 40px),
                radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.6), transparent),
                radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.6), transparent),
                radial-gradient(1px 1px at 50% 70%, rgba(255,255,255,0.6), transparent),
                radial-gradient(2px 2px at 90% 80%, rgba(255,255,255,0.6), transparent),
                radial-gradient(circle at 50% 50%, var(--grad-start), var(--grad-end));
            background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 150% 150%;
        }

        html[data-theme="dark"] .text-glow {
            text-shadow: 
                0px 0px 4px rgba(255, 255, 255, 0.3),
                0px 0px 8px rgba(255, 255, 255, 0.2),
                0px 2px 4px rgba(0, 0, 0, 0.8);
        }

        html[data-theme="dark"] .prose-custom blockquote {
            background: rgba(59, 130, 246, 0.1);
            color: #d1d5db;
        }

        html[data-theme="dark"] .nav-link {
            color: #ffffff;
            text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.5);
        }

        html[data-theme="dark"] .nav-link:hover {
            color: var(--primary-accent-dark);
            text-shadow: 0px 0px 12px rgba(255, 255, 255, 0.8);
            transform: scale(1.05);
        }

        html[data-theme="dark"] #menu-toggle {
            color: #f3f4f6;
        }

        html[data-theme="dark"] .text-gray-800 {
            color: #ffffff !important;
        }

        html[data-theme="dark"] .text-gray-600 {
            color: #cccccc !important;
        }

        html[data-theme="dark"] .text-gray-500 {
            color: #aaaaaa !important;
        }

        html[data-theme="dark"] .text-gray-700 {
            color: #dddddd !important;
        }

        html[data-theme="dark"] .text-gray-400 {
            color: #999999 !important;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--light-bg);
            color: var(--dark-text);
        }
        
        #fixed-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.9;
            background-color: #d4d4d8;
            /* Gradient background */
            background-image: 
                radial-gradient(circle at 50% 50%, var(--grad-start), var(--grad-end));
            background-size: 150% 150%;
            background-position: center;
        }


        /* Syntax Highlighting Styles */
        .highlight {
            border-radius: 8px;
            overflow-x: auto;
            margin: 1.5rem 0;
        }

        .highlight pre {
            margin: 0;
            padding: 1rem;
            background: #0d1117 !important;
            border-radius: 8px;
        }

        .highlight code {
            background: transparent !important;
            color: #e6edf3;
            font-size: 0.9em;
            line-height: 1.5;
        }

        /* Line numbers styling */
        .highlight .lntd {
            vertical-align: top;
            padding: 0;
            margin: 0;
            border: 0;
        }

        .highlight .lnt {
            margin-right: 0.8em;
            padding: 0 0.4em;
            color: #6e7681;
            user-select: none;
        }

        /* Dark mode code highlighting adjustments */
        html[data-theme="dark"] .highlight pre {
            background: #161b22 !important;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Custom theme styles */
        .font-display {
            font-family: 'Exo 2', sans-serif;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 8px 32px rgba(44, 62, 80, 0.15);
            position: relative;
            /* Googie-inspired architectural shape */
            clip-path: polygon(
                0 var(--card-slant, 0px),
                calc(100% - var(--card-slant, 0px)) 0,
                100% calc(100% - var(--card-slant, 0px)),
                var(--card-slant, 0px) 100%
            );
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            /* Extra padding on mobile to account for diagonal clipping */
            padding: calc(3rem + var(--card-slant, 0px)) calc(1.8rem + 2px) !important;
        }

        .glass-card:hover {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(0, 90, 156, 0.3);
            box-shadow: 0 16px 48px rgba(44, 62, 80, 0.25), 0 0 0 1px rgba(0, 90, 156, 0.1);
            transform: translateY(-2px) scale(1.02);
        }

        /* Responsive padding adjustments for clip-path safe area */
        @media (min-width: 640px) {
            .glass-card {
                padding: calc(3.5rem + var(--card-slant, 0px)) calc(2.5rem + 2px) !important;
            }
        }

        @media (min-width: 768px) {
            .glass-card {
                padding: calc(3.5rem + var(--card-slant, 0px)) calc(2.5rem + 2px) !important;
            }
        }

        @media (min-width: 1024px) {
            .glass-card {
                padding: calc(4rem + var(--card-slant, 0px)) calc(3rem + 2px) !important;
            }
        }
        


        /* Oval Button System */
        .oval-button {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 8px 32px rgba(44, 62, 80, 0.15);
            border-radius: 50px;
            padding: 12px 24px;
            font-family: 'Exo 2', sans-serif;
            font-weight: 600;
            color: var(--dark-text);
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .oval-button:hover {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(0, 90, 156, 0.3);
            box-shadow: 0 16px 48px rgba(44, 62, 80, 0.25);
            transform: translateY(-2px) scale(1.02);
            color: var(--primary-accent);
        }

        /* Active state for pagination */
        .oval-button.active {
            background: var(--primary-accent);
            color: white;
            border-color: var(--primary-accent);
        }

        .oval-button.active:hover {
            background: var(--secondary-accent);
            border-color: var(--secondary-accent);
            color: white;
        }

        /* Dark mode oval buttons */
        html[data-theme="dark"] .oval-button {
            background: rgba(15, 15, 25, 0.8);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            color: var(--light-text);
        }

        html[data-theme="dark"] .oval-button:hover {
            background: rgba(25, 25, 35, 0.9);
            backdrop-filter: blur(20px);
            border: 1px solid var(--primary-accent-dark);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
            transform: translateY(-2px) scale(1.02);
            color: var(--primary-accent-dark);
        }

        html[data-theme="dark"] .oval-button.active {
            background: var(--primary-accent-dark);
            color: var(--dark-bg);
            border-color: var(--primary-accent-dark);
        }

        html[data-theme="dark"] .oval-button.active:hover {
            background: var(--secondary-accent-dark);
            border-color: var(--secondary-accent-dark);
            color: white;
        }

        /* Mobile navigation styling */
        .mobile-nav-link {
            color: var(--dark-text);
            text-decoration: none;
            transition: all 0.3s ease;
            border-radius: 8px;
        }

        .mobile-nav-link:hover {
            color: var(--primary-accent);
            transform: translateX(4px);
        }

        /* Dark mode mobile nav */
        html[data-theme="dark"] .mobile-nav-link {
            color: var(--light-text);
        }

        html[data-theme="dark"] .mobile-nav-link:hover {
            color: var(--primary-accent-dark);
            background: rgba(255, 255, 255, 0.1);
        }

        .nav-link {
            position: relative;
            color: var(--dark-text);
            text-decoration: none;
            transition: color 0.3s, transform 0.2s;
            text-shadow: 0px 1px 2px rgba(255,255,255,0.7);
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 100%;
            transform: scaleX(0);
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: var(--tertiary-accent);
            transform-origin: bottom right;
            transition: transform 0.3s ease-out;
        }

        .nav-link:hover {
            color: var(--primary-accent);
            transform: scale(1.05);
        }

        .nav-link:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }
        
        .text-glow {
            /* Softer, dream-like glow for light backgrounds */
            text-shadow: 0px 2px 8px rgba(0,0,0,0.2), 0px 1px 1px rgba(255,255,255,0.9);
        }
        
        .prose-custom h1 {
            font-family: 'Exo 2', sans-serif;
            color: var(--primary-accent);
            font-size: 2.25rem;
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 1em;
            text-shadow: 1px 1px 3px rgba(0, 90, 156, 0.15);
        }

        .prose-custom h2 {
            font-family: 'Exo 2', sans-serif;
            color: var(--primary-accent);
            font-size: 1.75rem;
            font-weight: bold;
            margin-top: 2em;
            margin-bottom: 1em;
            text-shadow: 1px 1px 3px rgba(0, 90, 156, 0.15);
        }

        .prose-custom h3 {
            font-family: 'Exo 2', sans-serif;
            color: var(--primary-accent);
            font-size: 1.5rem;
            font-weight: bold;
            margin-top: 1.75em;
            margin-bottom: 0.75em;
            text-shadow: 1px 1px 3px rgba(0, 90, 156, 0.15);
        }

        .prose-custom h4 {
            font-family: 'Exo 2', sans-serif;
            color: var(--primary-accent);
            font-size: 1.25rem;
            font-weight: bold;
            margin-top: 1.5em;
            margin-bottom: 0.5em;
            text-shadow: 1px 1px 3px rgba(0, 90, 156, 0.15);
        }

        .prose-custom h5, .prose-custom h6 {
            font-family: 'Exo 2', sans-serif;
            color: var(--primary-accent);
            font-size: 1.1rem;
            font-weight: bold;
            margin-top: 1.25em;
            margin-bottom: 0.5em;
            text-shadow: 1px 1px 3px rgba(0, 90, 156, 0.15);
        }
        
        .prose-custom p {
            line-height: 1.7;
            margin-bottom: 1.25em;
        }

        .prose-custom ul, .prose-custom ol {
            margin: 1.25em 0;
            padding-left: 1.5em;
        }

        .prose-custom ul ul, .prose-custom ol ol {
            margin: 0.5em 0;
            padding-left: 1.25em;
        }

        .prose-custom li {
            margin: 0.5em 0;
            line-height: 1.6;
        }

        .prose-custom ul li {
            list-style-type: disc;
        }

        .prose-custom ol li {
            list-style-type: decimal;
        }

        .prose-custom strong {
            font-weight: 600;
            color: var(--dark-text);
        }

        .prose-custom em {
            font-style: italic;
            color: #566573;
        }

        .prose-custom hr {
            border: none;
            border-top: 2px solid var(--primary-accent);
            margin: 2.5em 0;
            opacity: 0.3;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        .prose-custom a {
            color: var(--tertiary-accent);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s, text-shadow 0.3s;
        }

        .prose-custom a:hover {
            color: var(--secondary-accent);
        }

        .prose-custom blockquote {
            font-style: italic;
            font-family: 'Exo 2', sans-serif;
            border-left: 4px solid var(--tertiary-accent);
            padding-left: 1em;
            margin: 1.5em 0;
            color: #566573;
            background: rgba(0, 90, 156, 0.05);
        }
        
        .divider-svg {
            stroke: var(--primary-accent);
            filter: drop-shadow(1px 1px 2px rgba(0, 90, 156, 0.2));
            stroke-width: 2;
            animation: pulseDivider 6s ease-in-out infinite;
        }

        @keyframes pulseDivider {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.03); opacity: 0.9; }
        }

        /* Intelligence Intersection Logo System */
        .intelligence-logo {
            display: block;
            margin: 0 auto;
        }
        
        .intelligence-logo.size-large { width: 192px; height: 192px; }
        .intelligence-logo.size-medium { width: 128px; height: 128px; }
        .intelligence-logo.size-small { width: 64px; height: 64px; }
        .intelligence-logo.size-favicon { width: 32px; height: 32px; }
        .intelligence-logo.size-hero { width: 256px; height: 256px; }

        /* Animation for star element */
        @keyframes star-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .intelligence-logo.animated .star-element {
            animation: star-pulse 5s ease-in-out infinite;
        }

        /* Mono version styling */
        .intelligence-logo.mono rect {
            stroke: currentColor;
        }

        .intelligence-logo.mono path {
            fill: currentColor;
        }

        /* Legacy logo system - keeping for backward compatibility */
        .bb { width:180px; height:180px; display:block; margin:0 auto; }
        .size-large { width:120px; height:120px; }
        .size-medium { width:80px; height:80px; }
        .size-small { width:40px; height:40px; }
        .size-favicon { width:24px; height:24px; }

        .state-1 { --a1:45; --a2:90; --a3:135; }
        .state-2 { --a1:45; --a2:100; --a3:155; }

        .ribbon { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
        .r1 { stroke:var(--primary-accent); stroke-width:8; }
        .r2 { stroke:var(--secondary-accent); stroke-width:6; }
        .r3 { stroke:var(--tertiary-accent); stroke-width:4; }

        .taper-soft { stroke-dasharray:24 1 24 1 24 1 24 1; }
        .taper-strong { stroke-dasharray:23 2 23 2 23 2 23 2; }

        .bb.mono .r1,
        .bb.mono .r2,
        .bb.mono .r3 {
            stroke: currentColor;
        }

        .bb.mono .nucleus {
            fill: currentColor;
        }