.scanline {
    width: 100%;
    height: 100%;
    z-index: 10;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 50%, rgba(0, 255, 65, 0.02) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.01), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.01));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0
    }
.grain {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
    opacity: 0.03;
    pointer-events: none;
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuA-3LhLyrieiVpfLF0xKKXMbx_8ukmgx9d3SUdtyCVhruyLgdWFw3hjjxdhZU1VmpCurg9xnWkCKi57d-tiEhph7xfLlZbevJhA7RaqcnWqHYmwjPHndkdZSPUlD5Dik51CEKiPEAjXoPHGw1ZBo706f_1svTSklCBsdTuRSTjzJEhfTls5CzJ1d4fkBHCP2PlQJBNzZu_Y6dl_TB3HCbdo-Lc_76Ta_SL0NVUEiHHhwm3rvKbwwZH95qJ52g3e-0pavu76S7btuBGb)
    }
.glitch-hover:hover {
    animation: glitch 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite
    }
@keyframes glitch {
    0% {
        transform: translate(0);
        } 20% {
        transform: translate(-2px, 2px);
        } 40% {
        transform: translate(-2px, -2px);
        } 60% {
        transform: translate(2px, 2px);
        } 80% {
        transform: translate(2px, -2px);
        } 100% {
        transform: translate(0);
        }
    }
.matrix-bg {
    background: linear-gradient(rgba(17, 20, 24, 0.9), rgba(17, 20, 24, 0.9)), url(https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=2070);
    background-size: cover;
    background-position: center
    }
.terminal-window {
    border: 1px solid rgba(0, 255, 65, 0.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5)
    }

.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .scanline {
            width: 100%;
            height: 100px;
            z-index: 10;
            background: linear-gradient(0deg, rgba(0, 255, 65, 0) 0%, rgba(0, 255, 65, 0.05) 50%, rgba(0, 255, 65, 0) 100%);
            position: fixed;
            pointer-events: none;
        }
        .hex-grid {
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-rule='evenodd' stroke='%2300FF41' stroke-width='1' fill='none' opacity='0.05'/%3E%3C/svg%3E");
        }
        .binary-mask {
            mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
        }

body {
            background-image: 
                linear-gradient(rgba(0, 255, 65, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 65, 0.02) 1px, transparent 1px);
            background-size: 40px 40px;
            cursor: crosshair;
        }
        .scanline {
            width: 100%;
            height: 100px;
            z-index: 9999;
            background: linear-gradient(0deg, rgba(0, 255, 65, 0) 0%, rgba(0, 255, 65, 0.05) 50%, rgba(0, 255, 65, 0) 100%);
            opacity: 0.1;
            position: fixed;
            pointer-events: none;
            top: -100px;
            animation: scan 10s linear infinite;
        }
        @keyframes scan {
            0% { top: -100px; }
            100% { top: 100%; }
        }
        .glitch-hover:hover {
            animation: glitch 0.2s linear infinite;
        }
        @keyframes glitch {
            0% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
            100% { transform: translate(0); }
        }
        .neon-glow {
            box-shadow: 0 0 10px rgba(0, 255, 65, 0.3), 0 0 20px rgba(0, 255, 65, 0.1);
        }

@keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            display: flex;
            animation: marquee 20s linear infinite;
        }

.scanline {
            background: linear-gradient(to bottom, transparent 50%, rgba(0, 255, 65, 0.02) 50%);
            background-size: 100% 4px;
        }
        .glitch-hover:hover {
            text-shadow: 2px 0 #ff0000, -2px 0 #00ffff;
            transform: translateX(1px);
        }
        .neon-glow {
            box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
        }
        .pixel-grid {
            background-image: radial-gradient(circle, #3b4b37 1px, transparent 1px);
            background-size: 20px 20px;
        }
        .cursor-blink::after {
            content: '_';
            animation: blink 1s infinite steps(1);
        }
        @keyframes blink { 50% { opacity: 0; } }

body {
            background-color: #111418;
            background-image: 
                linear-gradient(rgba(0, 255, 65, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 65, 0.02) 1px, transparent 1px);
            background-size: 32px 32px;
            cursor: crosshair;
        }
        .scanline {
            width: 100%;
            height: 100px;
            z-index: 99;
            background: linear-gradient(0deg, rgba(0, 255, 65, 0) 0%, rgba(0, 255, 65, 0.05) 50%, rgba(0, 255, 65, 0) 100%);
            position: fixed;
            pointer-events: none;
            left: 0;
            top: -100px;
            animation: scan 8s linear infinite;
        }
        @keyframes scan {
            0% { top: -100px; }
            100% { top: 100vh; }
        }
        .glitch-hover:hover {
            animation: glitch 0.2s cubic-bezier(.25,.46,.45,.94) both infinite;
        }
        @keyframes glitch {
            0% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
            100% { transform: translate(0); }
        }
        .neon-glow {
            box-shadow: 0 0 15px rgba(0, 255, 65, 0.2);
        }
        .noise-grain {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            opacity: 0.02;
            pointer-events: none;
            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)'/%3E%3C/svg%3E");
            z-index: 100;
        }

.scanline {
            width: 100%;
            height: 100px;
            z-index: 999;
            background: linear-gradient(0deg, rgba(0, 255, 65, 0) 0%, rgba(0, 255, 65, 0.05) 50%, rgba(0, 255, 65, 0) 100%);
            opacity: 0.1;
            position: fixed;
            pointer-events: none;
            top: -100px;
            animation: scan 8s linear infinite;
        }
        @keyframes scan {
            0% { top: -100px; }
            100% { top: 100%; }
        }
        .hex-bg {
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%2300FF41' fill-rule='evenodd' stroke='%2300FF41' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
        }
        .glitch-hover:hover {
            animation: glitch 0.2s cubic-bezier(.25,.46,.45,.94) both infinite;
        }
        @keyframes glitch {
            0% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
            100% { transform: translate(0); }
        }
        .neon-glow {
            box-shadow: 0 0 15px rgba(0, 255, 65, 0.15);
        }
        .terminal-dots span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }

.scanline {
    width: 100%;
    height: 100px;
    z-index: 10;
    background: linear-gradient(0deg, rgba(0, 255, 65, 0) 0%, rgba(0, 255, 65, 0.05) 50%, rgba(0, 255, 65, 0) 100%);
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    animation: scan 8s linear infinite
    }
@keyframes scan {
    0% {
        transform: translateY(-100%);
        } 100% {
        transform: translateY(100vh);
        }
    }
.noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDy2a6NCKptyhXjkVdumZ7BiEWTMUdg3jhcnWwj-K7Ti_it5Cvwbq5SwHrNLUTrQQWzFRAzxyqMOk-kfB6EH9JXSbyJynlOz2yHFsU7kSN4Lxr7BM56--B3vWQznvF9aiy5NtwcjUrZOSfzEHW-wxYFNfdfU6FFQzEVPOsrLa7DSsy8RH0B_iwNfdaHJyi83QgIPgXdl2em8p7Gx48-5msKAkdhgKhJVd9hYHdXwAnffof6045Gl9uvusibFUAFLFUrjKxmtCd0ohC7);
    opacity: 0.02;
    pointer-events: none;
    z-index: 5
    }
.glitch-hover:hover {
    animation: glitch 0.1s linear infinite
    }
@keyframes glitch {
    0% {
        transform: translate(0);
        } 20% {
        transform: translate(-2px, 1px);
        } 40% {
        transform: translate(-2px, -1px);
        } 60% {
        transform: translate(2px, 1px);
        } 80% {
        transform: translate(2px, -1px);
        } 100% {
        transform: translate(0);
        }
    }
.neon-glow-text {
    text-shadow: 0 0 5px #00FF41, 0 0 10px rgba(0, 255, 65, 0.5)
    }
.neon-border {
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.2)
    }

.scanline-overlay {
            background: linear-gradient(to bottom, rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            background-size: 100% 4px, 3px 100%;
            pointer-events: none;
        }
        .noise-grain {
            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)'/%3E%3C/svg%3E");
            opacity: 0.02;
            pointer-events: none;
        }
        .glitch-hover:hover {
            animation: glitch-anim 0.2s linear infinite;
        }
        @keyframes glitch-anim {
            0% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
            100% { transform: translate(0); }
        }
        .blinking-cursor::after {
            content: '_';
            animation: blink 1s step-end infinite;
            color: #00FF41;
        }
        @keyframes blink {
            from, to { opacity: 1; }
            50% { opacity: 0; }
        }
        .hex-grid {
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%2300FF41' fill-rule='evenodd' stroke='%2300FF41' stroke-width='0.5' stroke-opacity='0.1'/%3E%3C/svg%3E");
        }

body {
      background-color: #111418;
      position: relative;
      overflow-x: hidden;
    }
    /* Noise and Scanline Overlays */
    body::before {
      content: "";
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: url("https://www.transparenttextures.com/patterns/stardust.png");
      opacity: 0.03;
      pointer-events: none;
      z-index: 9999;
    }
    body::after {
      content: "";
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
      background-size: 100% 4px, 3px 100%;
      pointer-events: none;
      z-index: 9998;
    }
    .scanner-line {
      position: fixed;
      top: -10%;
      left: 0;
      width: 100%;
      height: 2px;
      background: rgba(0, 255, 65, 0.15);
      box-shadow: 0 0 15px rgba(0, 255, 65, 0.5);
      animation: scan 12s linear infinite;
      z-index: 100;
      pointer-events: none;
    }
    @keyframes scan {
      0% { top: -10%; }
      100% { top: 110%; }
    }
    .glitch-hover:hover {
      animation: glitch 0.2s steps(2) infinite;
    }
    @keyframes glitch {
      0% { transform: translate(0); }
      20% { transform: translate(-2px, 2px); }
      40% { transform: translate(-2px, -2px); }
      60% { transform: translate(2px, 2px); }
      80% { transform: translate(2px, -2px); }
      100% { transform: translate(0); }
    }
    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

body:has(.template-demo-banner) {
    --demo-banner-height: 44px;
}

.template-demo-banner {
    position: sticky;
    top: 0;
    z-index: 9999;
    min-height: var(--demo-banner-height);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 20px;
    background: #111111;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-family: Inter, Manrope, "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: center;
}

.template-demo-banner a {
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

body:has(.template-demo-banner) > .fixed.top-0,
body:has(.template-demo-banner) > .sticky.top-0,
body:has(.template-demo-banner) > header.fixed.top-0,
body:has(.template-demo-banner) > header.sticky.top-0,
body:has(.template-demo-banner) > nav.fixed.top-0,
body:has(.template-demo-banner) > nav.sticky.top-0 {
    top: var(--demo-banner-height) !important;
}

@media (max-width: 640px) {
    body:has(.template-demo-banner) {
        --demo-banner-height: 58px;
    }

    .template-demo-banner {
        flex-direction: column;
        gap: 4px;
        padding: 8px 16px;
        font-size: 12px;
    }
}