.tempo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; width: 100%; }
.tempo-grid.four { grid-template-columns: 1fr 1fr 1fr 1.25fr; }
.bpm-line { display: flex; align-items: center; gap: 10px; width: 100%; }
.bpm-line input[type=range] { flex: 1; accent-color: var(--action); }
.bpm-value { font-family: 'Oswald', sans-serif; font-size: 18px; color: var(--action); min-width: 70px; text-align: right; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; }
.seg.five { grid-template-columns: repeat(5, 1fr); }
.seg.five button { padding: 8px 2px; font-size: 9.5px; }
.seg button.active, .tempo-grid button.active, #timbre button.active { background: var(--action); color: var(--on-action); border-color: var(--action); }
.note.long-label { font-size: 8.5px; letter-spacing: -0.3px; }

.now-playing {
    margin: 6px auto 0;
    min-height: 22px;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--action);
}