* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'DM Mono', monospace;
            min-height: 100vh;
            height: auto;
            overflow-y: auto;
            overflow-x: hidden;
            background: linear-gradient(135deg, #121113 0%, #2a1f3d 50%, #1a1a2e 100%);
            will-change: auto;
            contain: layout style paint;
        }

        body::-webkit-scrollbar {
            width: 8px;
        }
        
        body::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }
        
        body::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 4px;
        }
        
        body::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }
        
        html {
            overflow-y: auto;
            overflow-x: hidden;
        }

        .container {
            display: flex;
            min-height: 100vh;
            position: relative;
            width: 100vw;
            max-width: none !important;
            contain: layout style;
            will-change: auto;
        }

        .left-panel {
            width: 500px;
            flex-shrink: 0;
            background-color: #121113;
            padding: 3vh 3vw;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            z-index: 2;
            min-height: 100vh;
            height: auto;
        }

        .logo {
            margin-bottom: 60px;
            display: inline-block;
            width: fit-content;
        }

        .logo img {
            height: 40px;
            width: auto;
            filter: invert(1);
        }

        .main-content h1 {
            font-size: clamp(24px, 4vw, 48px);
            font-weight: 500;
            color: white;
            line-height: 1.1;
            margin-bottom: 2vh;
            text-transform: uppercase;
        }
        .main-content p {
            font-size: clamp(14px, 1.2vw, 16px);
            color: #bbb3fa;
            line-height: 1.6;
            margin-bottom: 3vh;
        }

        .feature-illustration {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: clamp(20px, 3vh, 30px) 0;
            opacity: 0;
            animation: fadeInUp 1s ease 0.8s forwards;
        }

        .feature-illustration img {
            max-width: clamp(280px, 35vw, 400px);
            height: auto;
            filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.3));
            transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .feature-illustration img:hover {
            transform: translateY(-5px) scale(1.05);
            filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.4));
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .cta-section {
            margin-top: auto;
        }

        .get-started-btn {
            background-color: #a680ff;
            color: white;
            border: none;
            padding: 16px 32px;
            font-size: 16px;
            font-family: 'DM Mono', monospace;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
            display: block;
            width: 100%;
            text-align: center;
        }

        .get-started-btn:hover {
            background-color: #9570e8;
            transform: translateY(-2px);
        }

        .legal-text {
            font-size: 12px;
            color: #666;
            line-height: 1.4;
        }

        .legal-text a {
            color: #bbb3fa;
            text-decoration: none;
        }

        .legal-text a:hover {
            text-decoration: underline;
        }

        .right-panel {
            flex: 1;
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            height: 100vh;
        }

        .video-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            transform: scale(1.01);
        }



        .gradient-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(18, 17, 19, 0.3) 0%, rgba(42, 31, 61, 0.2) 50%, rgba(26, 26, 46, 0.3) 100%);
            z-index: 3;
        }

        @media (min-width: 1920px) {
            .left-panel {
                width: 550px;
                padding: 3vh 40px;
            }
        }

        @media (max-width: 1366px) {
            .left-panel {
                width: 450px;
                padding: 2vh 30px;
            }
            
            .main-content h1 {
                font-size: clamp(28px, 3.5vw, 40px);
            }
        }

        @media (max-width: 1024px) {
            .container {
                flex-direction: column;
            }
            
            .left-panel {
                width: 100%;
                height: 60vh;
                padding: 3vh 4vw;
            }
            
            .right-panel {
                width: 100%;
                height: 40vh;
            }
            
            .main-content h1 {
                font-size: clamp(24px, 4vw, 36px);
                margin-bottom: 2vh;
            }
        }

        @media (max-width: 768px) {
            body {
                overflow-y: auto;
                height: auto;
            }
            
            .container {
                flex-direction: column;
                height: auto;
                min-height: 100vh;
            }
            
            .left-panel {
                width: 100%;
                height: auto;
                min-height: 60vh;
                padding: 4vh 6vw;
            }
            
            .right-panel {
                width: 100%;
                height: 40vh;
                min-height: 300px;
            }
            
            .logo img {
                height: 30px;
            }
            
            .main-content h1 {
                font-size: clamp(20px, 6vw, 32px);
                margin-bottom: 3vh;
            }
            
            .main-content p {
                font-size: clamp(13px, 3vw, 16px);
                margin-bottom: 2vh;
            }
            
            .feature-illustration {
                margin: clamp(15px, 2vh, 20px) 0;
            }
            
            .feature-illustration img {
                max-width: clamp(200px, 40vw, 300px);
            }
            
            .get-started-btn {
                padding: 14px 28px;
                font-size: clamp(14px, 3vw, 16px);
            }
        }

        @media (max-width: 480px) {
            .left-panel {
                padding: 3vh 5vw;
            }
            
            .main-content h1 {
                font-size: clamp(18px, 7vw, 28px);
            }
            
            .feature-illustration {
                margin: clamp(10px, 1.5vh, 15px) 0;
            }
            
            .feature-illustration img {
                max-width: clamp(160px, 45vw, 240px);
            }
            

        }
		

.select-btn,
.word-count-btn,
.clear-btn,
.verify-btn,
.back-btn {
    cursor: pointer;
    transition: all 0.3s ease;
}

.select-btn:hover,
.word-count-btn:hover,
.clear-btn:hover,
.verify-btn:not(:disabled):hover,
.back-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.word-count-btn.active:hover {
    transform: none;
}

.verify-btn:disabled {
    cursor: not-allowed;
}

.autocomplete-suggestion {
    cursor: pointer;
}

.device-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.device-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
    .select-btn,
    .word-count-btn,
    .clear-btn,
    .verify-btn,
    .back-btn {
        cursor: pointer;
    }
    
    .device-card {
        cursor: pointer;
    }
    
    .device-card:hover {
        transform: translateY(-3px);
    }
    
    /* Mobile Responsive Styles */
    @media (max-width: 768px) {
        body {
            overflow-x: hidden;
        }
        
        .container {
            flex-direction: column;
            min-height: auto;
        }
        
        .left-panel {
            width: 100%;
            min-height: auto;
            padding: 20px;
            justify-content: flex-start;
            gap: 30px;
        }
        
        .right-panel {
            min-height: 400px;
            height: 400px;
            order: -1;
        }
        
        .main-content h1 {
            font-size: 24px;
            margin-bottom: 15px;
        }
        
        .cta-buttons {
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }
        
        .btn {
            width: 100%;
            padding: 12px 20px;
            font-size: 12px;
        }
        
        .instructions-list {
            margin-bottom: 20px;
        }
        
        .instruction-item {
            margin-bottom: 20px;
            padding: 16px;
            flex-direction: column;
            text-align: center;
            gap: 15px;
        }
        
        .step-number {
            width: 35px;
            height: 35px;
            font-size: 14px;
            align-self: center;
            margin-bottom: 10px;
        }
        
        .step-content {
            text-align: center;
        }
        
        .step-title {
            font-size: 16px !important;
            margin-bottom: 8px !important;
        }
        
        .step-description {
            font-size: 13px !important;
            line-height: 1.5 !important;
        }
        
        .bottom-actions {
            flex-direction: column;
            gap: 15px;
            padding-top: 20px;
            margin-top: 20px;
        }
        
        .back-btn {
            width: 100%;
            justify-content: center;
            padding: 15px;
            order: 2;
        }
        
        .next-btn {
            width: 100%;
            padding: 15px;
            order: 1;
        }
        
        .title {
            font-size: 20px !important;
            margin-bottom: 20px !important;
            text-align: center;
        }
        
        /* Fix overlay positioning */
        .overlay {
            padding: 15px !important;
            height: auto !important;
            min-height: 100vh;
            overflow-y: auto;
        }
        
        .overlay .main-content {
            padding: 0 !important;
            height: auto !important;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }
        
        /* Ensure proper spacing */
        .screen {
            padding: 20px;
            height: auto;
            min-height: 100vh;
            overflow-y: auto;
        }
        
        .screen .main-content {
            height: auto;
            min-height: auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }
        
        /* Fix device selection */
        .device-selection {
            flex-direction: column;
            gap: 15px;
        }
        
        .device-card {
            width: 100%;
            min-height: 120px;
        }
    }
    
    /* Small mobile devices */
    @media (max-width: 480px) {
        .left-panel {
            padding: 15px;
        }
        
        .right-panel {
            min-height: 300px;
            height: 300px;
        }
        
        .main-content h1 {
            font-size: 20px;
        }
        
        .instruction-item {
            padding: 12px;
        }
        
        .step-number {
            width: 30px;
            height: 30px;
            font-size: 12px;
        }
        
        .btn {
            padding: 10px 15px;
            font-size: 11px;
        }
    }
}