@layer base {
  html {
    line-height: var(--line-height-m);
    font-size: 1rem;
  }
  html:focus-within {
    scroll-behavior: smooth;
  }
  body {
    font-family: var(--body-font);
    color: var(--body-text-color);
    background: var(--body-color-background);
    cursor: default;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior: none;
    touch-action: manipulation;
    scrollbar-gutter: stable;
    /* forced-color-adjust: none; */
  }
  body::selection {
    background: var(--body-select-color-background);
    color: var(--body-select-color);
  }
  p {
    text-wrap: pretty;
    letter-spacing: var(--letter-spacing-m);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
    font-family: var(--heading-font);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
  }
  h1 {
    font-size: var(--heading-1-size);
  }
  h2 {
    font-size: var(--heading-2-size);
  }
  h3 {
    font-size: var(--heading-3-size);
  }
  h4 {
    font-size: var(--heading-4-size);
  }
  h5 {
    font-size: var(--heading-5-size);
  }
  h6 {
    font-size: var(--heading-6-size);
  }
  b,
  strong {
    font-weight: var(--font-weight-xl);
  }
  small {
    font-size: var(--font-size-s);
  }
  a {
    text-decoration: none;
  }
  a:link,
  a:visited {
    color: var(--link-color);
  }
  a:hover {
    color: var(--link-hover-color);
  }
  /* a:focus-visible {
    outline: var(--focus-outline);
  } */
  a * {
    color: inherit;
  }
  button,
  label {
    line-height: var(--line-height-s);
    letter-spacing: var(--letter-spacing-xl);
  }
  pre,
  code,
  kbd,
  samp {
    font-family: var(--font-code);
    font-size: var(--font-size-m);
    line-height: var(--line-height-l);
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  ul,
  ol {
    padding-left: var(--space-m);
  }
  input {
    accent-color: var(--input-accent-color);
    cursor: pointer;
  }

  @media print {
    * {
      background: none !important;
      box-shadow: none !important;
      text-shadow: none !important;
      animation: none !important;
      transition: none !important;
    }
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    small,
    strong,
    em,
    span {
      color: black !important;
    }
    body {
      font-size: var(--size-m);
      max-width: 100%;
    }
    @page {
      margin: 0.25in;
    }
    a::after {
      content: " (" attr(href) ")";
      font-size: var(--font-size-3xs);
    }
    a:hover {
      color: black !important;
    }
    button,
    input,
    select,
    textarea,
    nav,
    footer {
      display: none !important;
    }
    main {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    section,
    article,
    figure {
      page-break-inside: avoid;
    }
    svg {
      max-width: 100% !important;
      height: auto !important;
    }
  }

}