/* RESPONSIVE STYLES */


/* On smaller screens, stack them */
@media (max-width: 959px) {
    .synth-layout {
        flex-direction: column;
    }
    
    .controls-tabs-container, 
    .effects-column {
        width: 100%;
        max-width: none;
        margin: 0 0 15px 0;
    }
    
    #visualizer-container {
        width: 100%;
        order: -1;
    }
    
    .effects-container {
        max-height: 300px;
    }
}