ml-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

ml-button .ml-button__btn {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: hsl(var(--h) var(--btn-s) var(--btn-l) / var(--btn-a));
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background-color .15s ease;
}

ml-button .ml-button__btn:active { transform: scale(.92); }
ml-button .ml-button__btn:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }

ml-button[pressed] .ml-button__btn {
  background: var(--acc);
  color: var(--card-bg);
}

ml-button .ml-button__cap {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soft);
}

@media (max-width: 420px) {
  ml-button .ml-button__btn { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  ml-button .ml-button__btn { transition: none; }
}