.content {
  :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100;
  }
  :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-10 border-b pb-1 text-3xl border-neutral-200/70 contrast-more:border-neutral-400 dark:border-primary-100/10 contrast-more:dark:border-neutral-400;
  }
  :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-2xl;
  }
  :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-xl;
  }
  :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-lg;
  }
  :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-base;
  }
  :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply mt-6 leading-7 first:mt-0;
  }
  :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
  }
  :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply mt-6 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400 first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6;
  }
  :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
    @apply bg-primary-700/5 mb-4 overflow-x-auto rounded-xl font-medium subpixel-antialiased dark:bg-primary-300/10 text-[.9em] contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40 py-4;
  }
  :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
    @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
  }
  :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
    @apply block overflow-x-auto mt-6 p-0 first:mt-0;

    tr {
      @apply m-0 border-t border-gray-300 p-0 dark:border-gray-600 even:bg-gray-100 even:dark:bg-gray-600/20;
    }
    th {
      @apply m-0 border border-gray-300 px-4 py-2 font-semibold dark:border-gray-600;
    }
    td {
      @apply m-0 border border-gray-300 px-4 py-2 dark:border-gray-600;
    }
  }
  :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply mt-6 list-decimal first:mt-0 ltr:ml-6 rtl:mr-6;
    li {
      @apply my-2;
    }
  }
  :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply mt-6 list-disc first:mt-0 ltr:ml-6 rtl:mr-6;
    li {
      @apply my-2;
    }
  }
  /* This CSS rule targets the first nested unordered (ul) or ordered (ol) list 
     inside the list item (li) of any parent ul or ol. 
     The rule sets the top margin of the selected list to zero. */
  :where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply mt-0;
  }
  :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
  }
  :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
    @apply bg-transparent rounded-none dark:bg-transparent;
  }
  :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply mx-auto my-4 rounded-md;
  }
  :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
    figcaption {
      @apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
    }
  }
  .footnotes {
    @apply mt-12 text-sm;
  }
}

.subheading-anchor {
  @apply opacity-0 transition-opacity ltr:ml-1 rtl:mr-1;

  span:target + &,
  :hover > &,
  &:focus {
    @apply opacity-100;
  }

  span + &,
  :hover > & {
    @apply !no-underline;
  }

  &:after {
    @apply content-['#'] px-1;
    @apply text-gray-300 dark:text-neutral-700;
    span:target + & {
      @apply text-gray-400;
      @apply dark:text-neutral-500;
    }
  }
}

article details > summary {
  &::-webkit-details-marker {
    @apply hidden;
  }
  &::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
    height: 1.2em;
    width: 1.2em;
    vertical-align: -4px;
    padding: 0 0.6em;
  }
}
