:root {
            --primary: #00c6ff;
            --secondary: #1a1a1a;
            --text: #f5f5f5;
            --text-muted: #cccccc;
            --bg: #101010;
            --accent: #ffe000;
            --glow-primary: rgba(0, 198, 255, 0.5); /* Slightly reduced intensity */
            --glow-accent: rgba(255, 224, 0, 0.6);
            --shadow-light: rgba(0, 0, 0, 0.3);
            --shadow-medium: rgba(0, 0, 0, 0.6);
            --red-color: #ff4d4d;
            --glow-red: rgba(255, 77, 77, 0.6); /* Slightly reduced intensity */
            --font-main: 'Cairo', sans-serif;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; width: 100%; overflow: hidden; background-color: var(--bg); }

        body {
            font-family: var(--font-main); color: var(--text);
            display: flex; justify-content: center; align-items: center;
            text-align: center; perspective: 1000px; cursor: none;
        }

        /* Use the same cursor style */
        .cursor-dot, .cursor-outline { position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); border-radius: 50%; z-index: 9999; pointer-events: none; transition: opacity 0.3s ease, transform 0.1s ease-out, width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; will-change: transform; mix-blend-mode: screen; }
        .cursor-dot { width: 10px; height: 10px; background-color: var(--accent); box-shadow: 0 0 10px var(--glow-accent); }
        .cursor-outline { width: 45px; height: 45px; background-color: transparent; border: 2px solid var(--primary); transition-duration: 0.2s; opacity: 0.5; }
        body:has(a:hover) .cursor-dot { opacity: 0.8; transform: translate(-50%, -50%) scale(1.8); background-color: var(--primary); box-shadow: 0 0 12px var(--glow-primary); }
        body:has(a:hover) .cursor-outline { transform: translate(-50%, -50%) scale(0.85); opacity: 0.8; border-color: var(--accent); border-width: 3px; background-color: rgba(255, 224, 0, 0.1); }
        @media (hover: none) { .cursor-dot, .cursor-outline { display: none; } body { cursor: auto; } a { cursor: pointer; } }

        /* Animated Background Lines */
        #background-lines {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 0; overflow: hidden;
        }
        .line {
            position: absolute;
            height: 100%;
            width: 1px;
            background: linear-gradient(to bottom, transparent 0%, var(--primary) 50%, transparent 100%);
            opacity: 0.1;
            animation: drop 5s linear infinite;
        }
        .line:nth-child(odd) { animation-delay: -2.5s; animation-duration: 6s; }
        .line:nth-child(3n) { opacity: 0.05; animation-duration: 7s; }
        @keyframes drop {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }

        .container { position: relative; z-index: 1; padding: 20px; animation: shake-subtle 8s infinite ease-in-out; }

        .icon-wrapper { margin-bottom: 25px; }
        .error-icon {
            font-size: clamp(5rem, 15vw, 9rem);
            color: var(--red-color);
            text-shadow: 0 0 10px var(--glow-red);
            animation: icon-glitch 3s infinite steps(4, end);
        }
        @keyframes icon-glitch {
             0%, 100% { transform: none; opacity: 1; }
             25% { transform: skew(-5deg) translateX(5px); opacity: 0.8; }
             50% { transform: skew(3deg) translateX(-3px); opacity: 0.9; }
             75% { transform: skew(-2deg) translateY(2px); opacity: 0.7; }
        }

        .error-code {
            font-size: clamp(5rem, 18vw, 15rem);
            font-weight: 900; line-height: 1; color: var(--text);
            margin-bottom: 15px; position: relative;
            text-shadow: 0 0 8px var(--shadow-light), 0 0 15px var(--glow-red);
            animation: text-fracture 5s infinite linear alternate;
            will-change: transform;
        }
        .error-code::before, .error-code::after {
            content: '500'; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: transparent; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
        }
        .error-code::before { text-shadow: -1px 0 var(--primary); animation: fracture-top 1.5s infinite linear alternate-reverse; }
        .error-code::after { clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%); text-shadow: 1px 0 var(--accent); animation: fracture-bottom 1.5s infinite linear alternate; }

        @keyframes fracture-top {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(-3px) skewX(2deg); }
        }
        @keyframes fracture-bottom {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(3px) skewX(-2deg); }
        }
        @keyframes text-fracture { /* Added subtle flicker */
             0%, 100% { opacity: 1; } 48%, 52% { opacity: 0.9; }
        }

        .message {
            font-size: clamp(1.2rem, 3vw, 1.7rem); /* Slightly smaller */
            font-weight: 700; margin-bottom: 40px; color: var(--text-muted);
            text-shadow: 0 0 5px var(--shadow-light);
            opacity: 0; animation: fade-in 1s ease-out 0.5s forwards;
            max-width: 550px; margin-left: auto; margin-right: auto; line-height: 1.6;
        }

        .back-link {
            display: inline-block; padding: 12px 35px; font-size: 1.1rem; font-weight: 700;
            color: var(--bg); background: linear-gradient(45deg, var(--primary), var(--accent));
            border: none; border-radius: 6px; text-decoration: none; cursor: none;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 12px var(--shadow-medium), 0 0 10px var(--glow-primary);
            animation: fade-in 1s ease-out 0.8s backwards; will-change: transform, box-shadow;
        }
        .back-link:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px var(--shadow-medium), 0 0 15px var(--glow-primary), 0 0 10px var(--glow-accent);
        }

        @keyframes fade-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes shake-subtle {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-2px); }
            50% { transform: translateX(2px); }
            75% { transform: translateX(-1px); }
        }