@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    line-height: calc(1em + 0.5rem);
    margin: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }

  body {
    -webkit-font-smoothing: antialiased;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
}

@layer theme {
  :root {
    color-scheme: light dark;

    --color-on-surface: light-dark(rgb(35 25 24), rgb(241 223 220));
    --color-primary: light-dark(rgb(144 75 64), rgb(255 180 168));
    --color-surface: light-dark(rgb(255 248 246), rgb(26 17 16));
    --color-surface-container: light-dark(rgb(252 234 231), rgb(39 29 28));

    @media (prefers-contrast: more) {
      --color-surface: light-dark(rgb(255 248 246), rgb(26 17 16));
      --color-on-surface: light-dark(rgb(0 0 0), rgb(255 255 255));
      --color-primary: light-dark(rgb(68 16 10), rgb(255 249 248));
      --color-surface-container: light-dark(rgb(252 234 231), rgb(39 29 28));
    }
  }

  body {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    font-family: 'DejaVu Sans', ui-sans-serif, sans-serif;
    margin-inline: auto;
    max-width: 75ch;
    padding: 1rem;

    & > * + * {
      margin-block-start: 1rem;
    }
  }

  a {
    color: var(--color-primary);
    text-decoration: none;

    &[href^="http" i]::before {
      content: '⇒ ';
    }

    &:not([href^="http" i])::before {
      content: '⇗ ';
    }

    & > span {
      text-decoration: underline color-mix(in srgb, currentcolor 15%, transparent) 2px;
      text-underline-offset: 2px;
      transition: text-decoration-color 50ms;

      &:hover {
        text-decoration-color: currentcolor;
      }

      @media (prefers-contrast: more) {
        text-decoration-color: color-mix(in srgb, currentcolor 50%, transparent);
      }
    }
  }

  ul > * + * {
    margin-block-start: 1rem;
  }

  pre {
    background-color: var(--color-surface-container);
    border-radius: 1rem;
    font-family: 'DejaVu Sans Mono', ui-monospace, monospace;
    line-height: initial;
    overflow-x: scroll;
    padding: .75rem;
  }

  img.emoji {
    display: initial;
    height: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
    width: 1em;
  }

  ::selection {
    background-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
  }
}