* {
  box-sizing: border-box;
}

button {
  border: 0;
}

:focus-visible {
  view-transition-name: focus-ring;
  outline: 2px solid deeppink;
  outline-offset: 4px;
  border-radius: 4px;
  position: relative;
}

.focus-transitioning :focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  background: Canvas;
  border-radius: inherit;
}

::view-transition-group(focus-ring) {
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}