.controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tempo { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.tempo input { accent-color: var(--primary); }

.seq-grid { display: flex; flex-direction: column; gap: 8px; }
.seq-row { display: flex; align-items: center; gap: 8px; }
.seq-row .label { width: 54px; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.steps { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; flex: 1; }
.step {
  aspect-ratio: 1; border-radius: 6px; background: #efeae0;
  border: 1px solid var(--border); cursor: pointer;
}
.step:nth-child(4n+1) { background: #e6ddce; }
.step.on { background: var(--primary); border-color: var(--primary); }
.step.playing { box-shadow: 0 0 0 2px #f59e0b inset; }
@media (max-width: 560px) { .step { border-radius: 4px; } .seq-row .label { width: 42px; } }