/* Magnetic pill: the look of the Lord Burger pill buttons (the move itself is part.js).
   Optional: part.js moves any element with data-mpill; .mpill just gives it the source's thick-outlined pill.
   Knobs (on the pill, a parent or :root):
     --mpill-bg #fff · --mpill-ink #000 · --mpill-line 3px (outline) · --mpill-h 64px (min height)
     --mpill-pad 16px 24px · --mpill-size 20px · --mpill-weight 700 · --mpill-font inherit */
.mpill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--mpill-h, 64px);
  padding: var(--mpill-pad, 16px 24px);
  background: var(--mpill-bg, #fff);
  color: var(--mpill-ink, #000);
  border: var(--mpill-line, 3px) solid currentColor;
  border-radius: 100px;
  font: var(--mpill-weight, 700) var(--mpill-size, 20px)/1 var(--mpill-font, inherit);
  text-decoration: none; text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mpill:focus-visible { outline: var(--mpill-line, 3px) solid var(--mpill-ink, #000); outline-offset: 4px; }
/* the move runs on transform: keep it on the compositor (the source did the same) */
.mpill, [data-mpill] { will-change: transform; }