.kitgrid{grid-template-columns:repeat(5,1fr)}
.kitgrid .pad{min-height:72px;flex-direction:column;align-items:flex-start;justify-content:space-between}
.kitgrid .pad span{font:600 .75rem var(--sans);color:var(--fg)}
.seq{margin-top:14px}
#grid{display:grid;gap:6px;overflow-x:auto}
.srow{display:grid;grid-template-columns:84px repeat(16,minmax(22px,1fr));gap:4px;align-items:center;min-width:560px}
.srow b{font:600 .7rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.step{appearance:none;height:34px;border-radius:6px;border:1px solid var(--line);background:var(--raise);cursor:pointer;padding:0}
.step:nth-child(5n+2),.step:nth-child(5n+6){}
.step.beat{border-color:var(--accent-dim)}
.step.on{background:var(--accent-dim);border-color:var(--accent)}
.step.now{outline:2px solid var(--fg);outline-offset:-2px}
.hint input[type=range]{vertical-align:middle;accent-color:var(--accent);width:120px}
.hint .plain{min-height:36px;margin-right:6px}
@media (max-width:640px){.kitgrid{grid-template-columns:repeat(3,1fr)}}