/* The shaker's controls, on the front page. */
.shaker-panel { padding: 16px; margin-bottom: 24px; }
.shaker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.shaker-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.shaker-groups { display: flex; flex-wrap: wrap; gap: 18px 36px; margin-top: 14px; }
.shaker-group h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 8px; }
.shaker-about { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

/* The rhythm's sixteen steps, each as tall as it's played, lit as it sounds. */
.shaker-steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; align-items: end; height: 34px; margin-top: 14px; max-width: 560px; }
.shaker-step { border-radius: 3px; background: var(--line); transition: background 0.25s; }
.shaker-step.beat { box-shadow: inset 0 -2px 0 var(--muted); }
.shaker-step.lv-rest { height: 4px; }
.shaker-step.lv-g { height: 35%; }
.shaker-step.lv-x { height: 65%; }
.shaker-step.lv-a { height: 100%; }
.shaker-step.now { background: var(--accent); transition: none; }