@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

        body {
            font-family: 'Space Mono', monospace;
            background-color: #0a0a0a;
            color: #e5e5e5;
            overflow-x: hidden;
        }

        /* Custom Range Slider Styling */
        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            background: transparent;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 16px;
            width: 16px;
            background: #00ff9d;
            cursor: pointer;
            margin-top: -6px;
            box-shadow: 0 0 10px #00ff9d;
        }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 4px;
            cursor: pointer;
            background: #333;
            border-radius: 2px;
        }

        /* Canvas Styles */
        canvas {
            image-rendering: pixelated; /* Crucial for the crisp low-res look */
            width: 100%;
            height: auto;
            max-height: 70vh;
            object-fit: contain;
            background-image: 
                linear-gradient(45deg, #1a1a1a 25%, transparent 25%), 
                linear-gradient(-45deg, #1a1a1a 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #1a1a1a 75%), 
                linear-gradient(-45deg, transparent 75%, #1a1a1a 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
        }

        .cyber-border {
            border: 1px solid #333;
            position: relative;
        }
        .cyber-border::after {
            content: '';
            position: absolute;
            bottom: -1px;
            right: -1px;
            width: 10px;
            height: 10px;
            background: #333;
            clip-path: polygon(100% 0, 0 100%, 100% 100%);
        }

        .loading-scan {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: #00ff9d;
            animation: scan 2s infinite;
            opacity: 0;
            pointer-events: none;
        }

        @keyframes scan {
            0% { top: 0%; opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0a0a0a; 
        }
        ::-webkit-scrollbar-thumb {
            background: #333; 
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #00ff9d; 
        }