@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
        
        * {
            font-family: 'Inter', sans-serif;
        }
        
        .logo-circle {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #1FAE4B 0%, #0093DD 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            color: white;
            font-size: 20px;
        }
.burger-anim {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#burger-close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
}

.burger-open-active {
    opacity: 0;
    transform: rotate(90deg) scale(0.8);
}

.burger-close-active {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

  @keyframes ping {
            75%, 100% {
                transform: scale(2);
                opacity: 0;
            }
        }
        .animate-ping {
            animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
        }
        @keyframes pulse {
            50% {
                opacity: .5;
            }
        }
        .animate-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        /* Custom Range Slider Styles */
#progressBar {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

#progressBar::-webkit-slider-track {
    background: rgba(255, 255, 255, 0.3);
    height: 4px;
    border-radius: 2px;
}

#progressBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: white;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    margin-top: -5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

#progressBar::-moz-range-track {
    background: rgba(255, 255, 255, 0.3);
    height: 4px;
    border-radius: 2px;
}

#progressBar::-moz-range-thumb {
    background: white;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}