html {
  color-scheme: dark light;

  background: light-dark(white, oklch(18% 2% 285deg));
  color: light-dark(black, white);

  font:
    100%/1.4 system-ui,
    sans-serif;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  height: 100dvh;
}

dialog {
  background: light-dark(white, oklch(21% 2% 286deg));
  border: 1px solid light-dark(oklch(80% 0% 0deg), oklch(31% 1% 286deg));

  margin: 0;
  padding: 0;

  inline-size: min(50ch, 90dvi);
  margin-inline: auto;
  block-size: 90dvb;
  inset-block-start: 5dvb;

  border-radius: 2vw;
  overflow: clip;

  &[open] {
    display: flex;
    flex-direction: column;
  }

  > header {
    background: light-dark(oklch(96% 0% 0deg), oklch(18% 0% 0deg));
    padding: 1rem;
    border-block-end: 1px solid
      light-dark(oklch(80% 0% 0deg), oklch(31% 1% 286deg));

    > h2 {
      margin: 0;
      text-transform: uppercase;
      font-size: 1.2rem;
      letter-spacing: 0.05rem;
    }
  }

  > .dialog-content {
    font:
      0.8rem/1.4 "SF Mono",
      SFMono-Regular,
      ui-monospace,
      monospace;
    opacity: 0.8;
    padding: 1rem;

    overflow: auto;
    scrollbar-color: gray transparent;

    margin-trim: block;
    :first-child {
      margin-block-start: 0;
    }
    :last-child {
      margin-block-end: 0;
    }
  }

  > footer {
    background: light-dark(oklch(96% 0% 0deg), oklch(18% 0% 0deg));
    border-block-start: 1px solid
      light-dark(oklch(80% 0% 0deg), oklch(31% 1% 286deg));
    padding: 1rem;
    display: flex;
    /* flex-flow: row-reverse; */
    justify-content: end;
    gap: 0.5rem;
  }

  &::backdrop {
    background: color-mix(in srgb, rebeccapurple, transparent 80%);
  }
}

button {
  background: light-dark(oklch(18% 0% 0deg), oklch(90% 0% 0deg));
  color: light-dark(oklch(90% 0% 0deg), oklch(18% 0% 0deg));
  &:hover {
  }

  padding: 0.4rem 1.2rem;
  border-radius: 8px;
  border: 0;
  font: inherit;

  &.blue {
    background: #2196f3;
    color: white;
  }
}

a[href="#"] {
  position: absolute;
  top: 0;
  left: 0;
}