:root {
            /* Earthy, calming theme colors */
            --monzoku-c-bg-center: #F7F3EE; 
            --monzoku-c-bg-edge: #EBE0D1;
            --monzoku-c-brand: #A85A42; /* Terracotta/rust brown from the buttons */
            --monzoku-c-text: #4A4A4A; 
            
            /* Typography */
            --monzoku-font-hero: 'Montserrat', sans-serif;
            --monzoku-font-sans: 'Inter', sans-serif;
            --monzoku-font-mono: 'Space Mono', monospace;
            
            /* Animation Easing */
            --monzoku-ease-cinematic: cubic-bezier(0.2, 0, 0, 1);
            --monzoku-ease-exit: cubic-bezier(0.7, 0, 0.3, 1);
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            font-family: var(--monzoku-font-sans);
        }

        #monzoku-preloader-root {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            /* Ensure it covers everything on mobile, accounting for dynamic URL bars */
            height: 100dvh; 
            z-index: 999999;
            background: radial-gradient(circle at 50% 50%, var(--monzoku-c-bg-center) 0%, var(--monzoku-c-bg-edge) 120%);
            color: var(--monzoku-c-text);
            font-feature-settings: "kern" 1, "liga" 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            will-change: transform;
            transition: transform 1.2s var(--monzoku-ease-exit);
            overflow: hidden;
        }

        #monzoku-preloader-root.monzoku-exit {
            transform: translateY(-100%);
        }

        .monzoku-texture-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 999;
            opacity: 0.05;
            mix-blend-mode: multiply;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            animation: monzoku-grain-shift 4s steps(4) infinite;
        }

        @keyframes monzoku-grain-shift {
            0%, 100% { transform: translate(0, 0); }
            25% { transform: translate(-1%, 1%); }
            50% { transform: translate(1%, -1%); }
            75% { transform: translate(-1%, -1%); }
        }

        .monzoku-ink-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        .monzoku-ink-path {
            fill: none;
            stroke: var(--monzoku-c-brand);
            stroke-width: 1.5px;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 4000;
            stroke-dashoffset: 4000;
            transition: stroke-dashoffset 4.5s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1.2s var(--monzoku-ease-exit);
            will-change: stroke-dashoffset, transform;
            opacity: 0.6;
        }

        #monzoku-preloader-root.monzoku-exit .monzoku-ink-path {
            transform: translateY(-30px) scale(1.02);
            opacity: 0;
            transition: all 1.2s var(--monzoku-ease-exit);
        }

        .monzoku-wordmark-container {
            position: relative;
            z-index: 2;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 1.2s var(--monzoku-ease-exit);
            will-change: transform;
            padding: 0 1rem; /* Prevent edge touching on small screens */
        }

        #monzoku-preloader-root.monzoku-exit .monzoku-wordmark-container {
            transform: translateY(-25px);
        }

        .monzoku-title {
            font-family: var(--monzoku-font-hero);
            /* Improved clamp for better responsive scaling */
            font-size: clamp(2.5rem, 8vw, 7rem);
            font-weight: 700;
            letter-spacing: 0.05em;
            line-height: 1;
            margin: 0 0 1rem 0;
            color: var(--monzoku-c-brand);
            opacity: 0;
            transform: scale(1.04);
            filter: blur(8px);
            animation: monzoku-cinematic-focus 1.4s var(--monzoku-ease-cinematic) forwards;
            animation-delay: 0.2s;
        }

        @keyframes monzoku-cinematic-focus {
            to {
                opacity: 1;
                transform: scale(1);
                filter: blur(0);
                letter-spacing: 0.02em;
            }
        }

        .monzoku-tagline {
            font-family: var(--monzoku-font-sans);
            font-size: 0.85rem;
            letter-spacing: 0.2em;
            font-weight: 500;
            color: var(--monzoku-c-text);
            text-transform: uppercase;
            margin: 0;
            opacity: 0;
            transform: translateY(5px);
            animation: monzoku-fade-up 1.2s var(--monzoku-ease-cinematic) forwards;
            animation-delay: 1s;
            text-align: center;
        }

        @keyframes monzoku-fade-up {
            to {
                opacity: 0.7;
                transform: translateY(0);
            }
        }

        .monzoku-metadata-container {
            position: absolute;
            bottom: 2rem;
            left: 2.5rem;
            right: 2.5rem;
            display: flex;
            justify-content: space-between;
            z-index: 3;
            font-family: var(--monzoku-font-mono);
            font-size: 0.55rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--monzoku-c-brand);
            opacity: 0.6;
        }

        .monzoku-ephemeral-text {
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: var(--monzoku-font-sans);
            font-size: 0.65rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--monzoku-c-brand);
            opacity: 0;
            z-index: 1;
            pointer-events: none;
            transition: opacity 0.3s ease;
            white-space: nowrap; /* Prevent wrapping */
        }

        .monzoku-ephemeral-text.monzoku-show {
            opacity: 0.3;
        }

        /* Tablet & Smaller Laptops */
        @media (max-width: 768px) {
            .monzoku-metadata-container {
                left: 1.5rem;
                right: 1.5rem;
                bottom: 1.5rem;
            }
            .monzoku-title {
                margin-bottom: 0.8rem;
            }
        }

        /* Mobile Devices */
        @media (max-width: 480px) {
            .monzoku-metadata-container {
                left: 1rem;
                right: 1rem;
                bottom: 1.5rem;
                /* Crucial for mobile: stack elements so they don't overlap */
                flex-direction: column;
                align-items: center;
                gap: 0.75rem; 
            }
            
            .monzoku-title {
                /* Even tighter clamp for tiny mobile screens */
                font-size: clamp(2rem, 10vw, 3rem);
            }
            
            .monzoku-tagline {
                font-size: 0.7rem;
                letter-spacing: 0.15em;
            }
            
            .monzoku-ephemeral-text {
                font-size: 0.5rem;
                letter-spacing: 0.15em;
            }
        }

        /* Accessibility: Reduced Motion */
        @media (prefers-reduced-motion: reduce) {
            .monzoku-texture-overlay { animation: none; }
            .monzoku-title { animation: monzoku-fade-in-simple 1s ease forwards; filter: none; transform: none; }
            .monzoku-ink-path { transition: opacity 1s ease; stroke-dashoffset: 0; }
            @keyframes monzoku-fade-in-simple { to { opacity: 1; } }
        }
        
        /* Demo Page Content (Just to show something behind the preloader) */
        .demo-content {
            padding: 5rem 2rem;
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            color: var(--monzoku-c-text);
        }