/* Purposeful microinteractions. Pair with /micro.js. */
[data-magnetic] {
  translate: var(--mag-x, 0px) var(--mag-y, 0px);
  transition: translate 140ms ease-out;
}
[data-inspect] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 180ms ease-out;
  will-change: transform;
}
kbd[data-key] {
  display: inline-block;
  transition: transform 80ms ease, box-shadow 80ms ease;
  box-shadow: 0 1px 0 color-mix(in srgb, currentColor 35%, transparent);
}
kbd[data-key]:hover,
kbd[data-key]:focus-visible {
  transform: translateY(1px);
  box-shadow: none;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  [data-magnetic],
  [data-inspect],
  kbd[data-key] {
    transition: none;
    translate: none;
    transform: none;
  }
}