style.css

/* Custom styles for audio timeline interactions */
#vocalTrack, #musicTrack {
    transition: transform 0.1s ease;
}

#vocalTrack.dragging, #musicTrack.dragging {
    opacity: 0.8;
}

#vocalStartHandle, #vocalEndHandle, 
#musicStartHandle, #musicEndHandle {
    transition: all 0.1s ease;
}

#vocalStartHandle.dragging, #vocalEndHandle.dragging,
#musicStartHandle.dragging, #musicEndHandle.dragging {
    background-color: #4f46e5;
    width: 4px;
}

#timelineEditor {
    transition: opacity 0.3s ease;
}

/* Waveform styling */
.waveform-canvas {
    width: 100%;
    height: 100%;
}

/* Drag and drop styling */
.border-dashed.dragover {
    border-color: #4f46e5;
    background-color: #eef2ff;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}