/* Animation for Recording State */
@keyframes pulse-ring {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.recording-active {
    animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Solfa Text Styling */
#result-solfa span {
    display: inline-block;
    padding: 0 4px;
}

/* Ensure canvas is responsive */
#vts-visualizer {
    display: block;
    width: 100%;
    height: 100%;
}