:root {
            --bg-main: #0a0a0a;
            --accent-white: #ffffff;
            --accent-red: #ff003c;
        }

        body { 
            font-family: 'Space Grotesk', sans-serif; 
            background-color: var(--bg-main); 
            color: var(--accent-white);
            overflow-x: hidden;
        }
        .mono { font-family: 'Fira Code', monospace; }

        /* --- GLITCH & NOISE EFFECTS --- */
        .noise-bg {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            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='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
            pointer-events: none; z-index: 50;
        }

        .scanlines::before {
            content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0, 0, 0, 0.5) 3px, rgba(0, 0, 0, 0.5) 4px);
            pointer-events: none; z-index: 50; opacity: 0.3;
        }

        .glitch-hover:hover {
            animation: glitch-skew 0.3s infinite linear alternate-reverse;
            text-shadow: -2px 0 #ff0000, 2px 0 #00ffff;
        }
        @keyframes glitch-skew {
            0% { transform: skewX(0deg); }
            20% { transform: skewX(-5deg); }
            100% { transform: skewX(0deg); }
        }

        /* --- SEARCH BAR --- */
        .egoist-search-container {
            border-bottom: 2px solid var(--accent-white);
            padding-bottom: 10px; width: 100%; max-width: 600px; margin: 0 auto; position: relative;
        }
        .blinking-cursor::after {
            content: '|'; animation: blink 1s step-start infinite; margin-left: 5px;
        }
        @keyframes blink { 50% { opacity: 0; } }

        /* --- MODAL STYLE --- */
        #gallery-modal {
            display: none; position: fixed; inset: 0; z-index: 100;
            background: rgba(0,0,0,0.95); backdrop-filter: blur(10px);
        }
        .modal-content-scroll {
            max-height: 80vh; overflow-y: auto;
        }

        /* คลาสสำหรับคุมการแสดงผล Mobile Menu */
        #mobile-menu.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* เพิ่มเส้นสายฟ้าเล็กๆ เวลา Hover (Option) */
        #mobile-menu a::before {
            content: '> ';
            color: #ffffff;
            opacity: 0;
            transition: 0.3s;
        }
        #mobile-menu a:hover::before {
            opacity: 1;
        }

        .about-container {
        max-width: 1000px;
        margin: auto;
        display: flex;
        gap: 40px;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 100px;
        }

        .about-img {
        width: 260px;
        height: 260px;
        border-radius: 20px;
        object-fit: cover;
        border: 3px solid rgb(255, 255, 255);
        }

        .about-text {
        max-width: 500px;
        text-align: left;
        }
        .about-text p {
            color: var(--gray);
        }
        /* Link */
        .social-links {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        gap: 20px;
        }
        .social-links .icon {
        width: 28px;
        height: 28px;
        opacity: 0.8;
        transition: 0.3s;
        filter: invert(1);
        }
        .social-links .icon:hover {
        opacity: 1;
        transform: scale(1.1);
        }