:root {
            --color-bg-primary: #0D1117;
            --color-bg-secondary: #161B22;
            --color-bg-secondary-rgb: 22, 27, 34;
            --color-bg-input: #0D1117;
            --color-border: #334155; /* slate-700 */
            --color-border-rgb: 51, 65, 85;
            --color-accent: #f97316; /* orange-500 */
            --color-accent-rgb: 249, 115, 22;
            --color-text-primary: #f8fafc; /* slate-50 */
            --color-text-secondary: #94a3b8; /* slate-400 */
            --color-success: #22c55e; /* green-500 */
            --color-error: #ef4444; /* red-500 */
            --color-warning: #facc15; /* yellow-400 */
            --font-body: 'Inter', sans-serif;
            --font-mono: 'Roboto Mono', monospace;
        }

        /* --- BASE & LAYOUT STYLES --- */
        html, body {
            height: 100%;
            overflow: hidden; /* Prevent scrolling on the body */
        }
        body {
            display: flex;
            flex-direction: column;
            background-color: var(--color-bg-primary);
            color: var(--color-text-primary);
            font-family: var(--font-body);
            transition: background-color 0.3s ease, color 0.3s ease;
            background-image: radial-gradient(var(--color-border) 0.5px, transparent 0.5px);
            background-size: 20px 20px;
        }
        main {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        header {
            background-color: rgba(var(--color-bg-secondary-rgb), 0.8);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            transition: background-color 0.3s ease;
        }
        footer {
            flex-shrink: 0; /* Prevent footer from shrinking */
        }
        
        /* --- MODAL STYLES (Magnific Popup) --- */
        .mfp-bg {
            background: rgba(13, 17, 23, 0.85);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        .mfp-zoom-in .mfp-content {
            opacity: 0;
            transform: scale(0.95);
            transition: all 0.3s ease-in-out;
        }
        .mfp-zoom-in.mfp-ready .mfp-content {
            opacity: 1;
            transform: scale(1);
        }
        .mfp-zoom-in.mfp-removing .mfp-content {
            opacity: 0;
            transform: scale(0.95);
        }
        #modal-container {
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            transition: opacity 0.3s ease-in-out, max-width 0.3s ease, background 0.3s ease;
            overflow: hidden;
        }
        #modal-container.is-hiding {
            opacity: 0;
        }
        
        /* --- ANIMATIONS & MICROINTERACTIONS --- */
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.3); }
            50% { box-shadow: 0 0 30px rgba(var(--color-accent-rgb), 0.5); }
        }
        #hero-cta-btn {
             animation: pulse-glow 3s infinite ease-in-out;
        }
        
        /* --- CHECKLIST & PROGRESS BAR STYLES --- */
        .checklist-item {
            transition: color 0.4s ease-in-out, opacity 0.4s ease-in-out;
            overflow: hidden;
            position: relative;
            opacity: 0.5;
        }
        .checklist-item .checkmark {
            position: absolute;
            right: 0;
            opacity: 0;
            transform: scale(0.5) rotate(-45deg);
            stroke-dasharray: 24;
            stroke-dashoffset: 24;
            transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .checklist-item.completed {
            color: var(--color-success);
            opacity: 1;
        }
        .checklist-item.completed .checkmark {
            opacity: 1;
            stroke-dashoffset: 0;
            transform: scale(1) rotate(0deg);
        }
        #generation-progress-bar-container {
            width: 100%;
            background-color: var(--color-bg-input);
            border-radius: 9999px;
            height: 8px;
            margin-bottom: 1.5rem;
            border: 1px solid var(--color-border);
            overflow: hidden;
        }
        #generation-progress-bar {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, var(--color-accent), #ff8c00);
            border-radius: 9999px;
            /* Slower, more deliberate transition for the progress bar */
            transition: width 1.5s cubic-bezier(0.65, 0, 0.35, 1);
        }
        
        /* --- CUSTOM INTERACTIVE ELEMENT STYLES --- */
        #url-input {
             transition: all 0.2s ease-in-out;
        }
        #url-input:focus {
            box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.5);
        }
		#captcha-target {
            margin-left: auto;
            margin-right: auto;
        }
        #countdown-timer.urgent {
            color: var(--color-error);
            animation: pulse-urgent 1s infinite;
        }
        @keyframes pulse-urgent {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* --- NEW Step 2 Network Animation --- */
        @keyframes packet-flow {
            0% { motion-offset: 0%; opacity: 1; }
            50% { opacity: 1; }
            95% { motion-offset: 100%; opacity: 0; }
            100% { motion-offset: 100%; opacity: 0; }
        }
        .data-packet {
            motion-path: path('M32 50 C 80 20, 120 80, 168 50');
            animation: packet-flow 2.5s infinite cubic-bezier(0.45, 0, 0.55, 1);
            offset-path: path('M32 50 C 80 20, 120 80, 168 50'); /* For Firefox */
        }