html > body > #grid .dialog {
  /** Required arguments with purportedly ridiculous defaults */
  --element-background-dialog: red;
  --element-background-curtain: red;
  --element-color-closer: red;
  --element-color-shadow: red;
  --element-gap: 50px;
  --element-border-radius: 50%;

  &::backdrop {
    background: var(--element-background-curtain);
  }

  &:popover-open {
    border: 1px solid var(--element-color-shadow);
    border-radius: var(--element-border-radius);
    padding: var(--element-gap);
    min-width: 20em;
    font-size: 1rem;
    background: var(--element-background-dialog);

    > button[popovertargetaction=hide] {
      display: block;
      position: fixed;
      background: transparent;
      border: none;
      top: 0;
      right: 0;
      margin: var(--element-gap);
      border-radius: 9999px;
      text-shadow: 1px 1px var(--element-color-shadow);
      font-size: 200%;
      color: var(--element-color-closer);
      text-decoration: none;
      font-style: normal;
      font-weight: bold;

      &:after {
        content: "✕";
      }
    }
  }
}