:root {
            --canvas: #FAF9F6;
            --ink: #0A0A0A;
            --accent: #8B5CF6;
        }

        /* Responsive Fluid Typography */
        html { font-size: 16px; scroll-behavior: smooth; }
        @media (max-width: 768px) { html { font-size: 14px; } }

        body {
            background-color: var(--canvas);
            color: var(--ink);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        .font-expressive { font-family: 'Playfair Display', serif; }
        .font-mono { font-family: 'Space Mono', monospace; }

        /* Custom Cursor for Desktop */
        #custom-cursor {
            width: 12px; height: 12px;
            background: var(--ink);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 10000;
            mix-blend-mode: difference;
            transition: transform 0.1s ease-out;
        }
        @media (pointer: coarse) { #custom-cursor { display: none; } }

        .noise-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.04; pointer-events: none; z-index: 9998;
        }

        /* Multi-page View Controller */
        .page-section {
            display: none;
            opacity: 0;
            transition: opacity 0.6s ease;
        }
        .page-section.active {
            display: block;
            opacity: 1;
        }

        /* Glassmorphism Classes */
        .glass {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(0,0,0,0.05);
        }

        .gradient-text {
            background: linear-gradient(90deg, #8B5CF6, #06B6D4, #84CC16);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Responsive Grid Adjustments */
        .artifact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        /* Navigation Animation */
        .nav-active {
            border-bottom: 2px solid var(--ink);
        }

        /* Hide Scrollbar but keep functionality */
        ::-webkit-scrollbar { width: 0px; background: transparent; }