/* Metronome page. */
.mbody{display:grid;gap:18px}
.mtop{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.mgo,.mbpm button,.mtap,.mtt{border:2px solid var(--edge);background:var(--card);border-radius:7px;padding:8px 16px;font-weight:700;cursor:pointer;box-shadow:0 3px 0 var(--edge);transition:transform .08s,box-shadow .08s}
.mgo:active,.mbpm button:active,.mtap:active,.mtt:active{transform:translateY(3px);box-shadow:0 0 0 var(--edge)}
.mgo{background:var(--acc);color:var(--accink);min-width:124px;font-size:17px}.mgo.on{background:var(--root);color:var(--rootink)}
.mbpm{display:flex;align-items:center;gap:6px}.mbpm b{font:700 48px/1 Unbounded,sans-serif;min-width:130px;text-align:center}.mbpm button{padding:6px 10px}
.mbpm small{display:block;font:600 12px "Hanken Grotesk",sans-serif;color:var(--mute);text-align:center;margin-top:4px}
#met input[type=range]{width:100%;accent-color:var(--link)}
.mrow{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
#met select,#met input[type=number]{min-width:0;width:auto;padding:4px 8px;border:2px solid var(--edge);border-radius:7px;background:var(--card);box-shadow:none}
#met input[type=number]{width:74px}
.pips{display:flex;gap:14px;align-items:center;min-height:36px}
.pip{width:22px;height:22px;border-radius:50%;border:2px solid var(--edge);background:var(--card);display:inline-block}.pip.acc{width:32px;height:32px}
.pip.on{background:var(--acc);border-color:var(--acc)}.pip.acc.on{background:var(--root);border-color:var(--root)}
.mtr{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}.mtt.on{background:var(--acc);color:var(--accink)}.mtp{font-size:14px;color:var(--mute)}