@layer components {
  .prose .h1 {
    margin-block-start: 0;
    margin-block-end: var(--size-32);
    color: var(--neutral-12);
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1.25;
  }

  .prose .h2 {
    margin-block-start: var(--size-48);
    margin-block-end: var(--size-24);
    color: var(--neutral-12);
    font-size: var(--text-3xl);
    font-weight: 600;
    line-height: 1.25;
  }

  .prose .h3 {
    margin-block-start: var(--size-32);
    margin-block-end: var(--size-12);
    color: var(--neutral-12);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.25;
  }

  .prose .blockquote {
    margin-block: var(--size-24);
    padding-block: var(--size-8);
    padding-inline: var(--size-16);
    border-left: var(--size-4) var(--neutral-7) solid;
    font-weight: 500;
    font-style: italic;
  }

  .prose .blockquote > *:first-of-type {
    margin-block-start: 0;
  }

  .prose .blockquote > *:last-of-type {
    margin-block-end: 0;
  }

  .prose .ol,
  .prose .ul {
    margin-block: var(--size-20);
    padding-inline-start: var(--size-24);
    line-height: 1.75;
  }

  .prose .li > .ol,
  .prose .li > .ul {
    margin-block: var(--size-8);
  }

  .prose .ol {
    list-style: decimal;
  }

  .prose .ul {
    list-style: disc;
  }

  .prose .ol[type="A"],
  .prose .ol[type="A" s] {
    list-style: upper-alpha;
  }

  .prose .ol[type="a"],
  .prose .ol[type="a" s] {
    list-style: lower-alpha;
  }

  .prose .ol[type="I"],
  .prose .ol[type="I" s] {
    list-style: upper-roman;
  }

  .prose .ol[type="i"],
  .prose .ol[type="i" s] {
    list-style: lower-roman;
  }

  .prose .ol[type="1"] {
    list-style: decimal;
  }

  .prose .li {
    margin-block: var(--size-8);
    padding-inline-start: var(--size-6);
    font-size: var(--text-md);
    line-height: 1.75;
  }

  .prose .ol > .li {
    font-weight: 400;
  }

  .prose :is(.ol, .ul) > .li::marker {
    color: var(--neutral-11);
  }

  .prose .p {
    margin-block: var(--size-20);
    color: var(--neutral-11);
    font-size: var(--text-md);
    line-height: 1.75;
  }

  .prose .dt {
    color: var(--neutral-11);
    font-weight: 600;
  }

  .prose .hr {
    border: var(--size-1) var(--neutral-7) solid;
  }

  .prose .img {
    max-inline-size: 100%;
  }

  .prose .picture {
    display: block;
  }

  /* .prose .pre {
    overflow-x-auto bg-gray-900 font-normal text-gray-300 dark:bg-gray-900;

    
  } */

  .prose .code {
    padding-block: var(--size-4);
    padding-inline: var(--size-8);
    background-color: var(--neutral-3);
    border-radius: var(--radius-sm);
    color: var(--neutral-12);
  }

  /* .prose .pre .code {
    rounded-none border-none bg-transparent p-0 font-normal leading-[inherit] text-[inherit] text-inherit;
  } */

  .prose .a {
    border-radius: var(--radius-sm);
    color: var(--action-9);
    text-decoration: underline;
    text-underline-offset: var(--size-2);
    font-weight: 500;
    outline: none;
  }

  .prose .a:focus-visible {
    outline: var(--action-5) solid var(--size-3);
    outline-offset: var(--size-3);
  }

  .prose .strong {
    color: var(--neutral-12);
    font-weight: 600;
  }

  .prose .h1 > .strong,
  .prose .h2 > .strong,
  .prose .h3 > .strong,
  .prose .h4 > .strong,
  .prose .h5 > .strong,
  .prose .h6 > .strong {
    color: inherit;
    font-weight: 900;
  }

  .prose .a .strong,
  .prose .blockquote .strong,
  .prose .thead .th .strong {
    color: inherit;
  }
}
