style.css

/* Custom styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

#visual-preview {
    background-size: cover;
    background-position: center;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* Pulse animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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

/* Audio waveform styles */
#waveform {
    background: rgba(255, 255, 255, 0.05);
}

wave {
    filter: drop-shadow(0 0 2px rgba(128, 0, 255, 0.5));
}

/* Visualizer canvas styles */
#visualizer {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
}