:root {
  --radius: 0.25rem;
}

*:focus-visible {
  anchor-name: --focus-anchor;
  outline: none;
}

dialog *:focus-visible {
  anchor-name: none;
  outline: auto;
}

body {
  &::before {
    content: "";
    position: fixed;
    position-anchor: --focus-anchor;

    top: anchor(top);
    left: anchor(left);
    width: anchor-size();
    height: anchor-size();

    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: top, left, width, height, opacity;

    box-shadow: 0px 0px 0px 100vmax #0000004f;
    border-radius: var(--radius);
    margin: -1px;
    pointer-events: none;
  }

  &:not(:has(:focus-visible))::before {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0;
  }
  &:has(dialog[open])::before {
    opacity: 0;
  }
}

td {
  vertical-align: middle;
  text-align: center;
  padding: 1em 0.2em;
}