@layer base {
  html {
    font-size: var(--text-base);
  }

  body {
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    interpolate-size: allow-keywords;
    line-height: 1.375;
    max-inline-size: 100vw;
    scroll-behavior: auto;
    text-rendering: optimizeLegibility;
    text-size-adjust: none;
  }

  :is(details) {
    interpolate-size: allow-keywords;

    &::details-content {
      overflow: hidden;
      block-size: 0;
      opacity: 0;
      transition: opacity 200ms, block-size 200ms, content-visibility 200ms allow-discrete;
    }

    &[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
}