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

/* The riff's sixteen steps: each strike marked with its degree and set
   higher the higher it is, lit as it sounds. */
.handbell-steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; height: 44px; margin-top: 14px; max-width: 560px; position: relative; }
.handbell-step { position: relative; border-radius: 3px; background: var(--line); font: 600 10px var(--mono); color: var(--text); display: grid; place-items: center; height: 18px; align-self: end; margin-bottom: calc(var(--d, 0) * 26px); transition: background 0.25s; }
.handbell-step.rest { height: 4px; background: var(--line); opacity: 0.6; margin-bottom: 0; }
.handbell-step.beat::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--muted); border-radius: 1px; }
.handbell-step.rest.beat::after { bottom: -4px; }
.handbell-step.now { background: var(--accent); color: #fff; transition: none; }