@layer components {
  h1,h2,h3,h4,h5,h6 {
    font-family:var(--font-family);
    font-size:var(--font-size);
    line-height:var(--line-height);
    font-weight:var(--font-weight-bold)
  }

  h1 code,h2 code,h3 code,h4 code,h5 code,h6 code {
    color:inherit;
    background-color:var(--background1);
    padding:0 1ch
  }

  ol {
    list-style-position:inside
  }

  ol li>ol {
    margin-left:2ch
  }

  ul {
    list-style-type:none
  }

  ul li:before {
    color:inherit;
    content:"- "
  }

  ul[marker-=bullet] li:before {
    content:"• "
  }

  ul[marker-~=tree] li:before {
    content:"├ "
  }

  ul[marker-~=tree]:not([marker-^=open]) li:first-of-type:before {
    content:"┌ "
  }

  ul[marker-~=tree]:not([marker-$=open]) li:last-of-type:before {
    content:"└ "
  }

  ul li>ul {
    margin-left:2ch
  }

  p,blockquote,li,[is-~=typography-block] {
    font-family:var(--font-family);
    font-size:var(--font-size);
    line-height:var(--line-height);
    color:var(--foreground1)
  }

  p:is(blockquote),blockquote:is(blockquote),li:is(blockquote),[is-~=typography-block]:is(blockquote) {
    padding-left:2ch;
    position:relative
  }

  p:is(blockquote):before,blockquote:is(blockquote):before,li:is(blockquote):before,[is-~=typography-block]:is(blockquote):before {
    content:"";
    position:absolute;
    top:0;
    left:.5ch;
    width:var(--box-border-width, 2px);
    height:100%;
    translate:-50%;
    background-color:var(--background2)
  }

  p strong,blockquote strong,li strong,[is-~=typography-block] strong {
    font-weight:var(--font-weight-bold);
    color:var(--foreground0)
  }

  p a,blockquote a,li a,[is-~=typography-block] a {
    text-decoration:underline;
    color:var(--foreground2)
  }

  p code,blockquote code,li code,[is-~=typography-block] code {
    display:inline-block;
    background-color:var(--background1);
    padding-left:1ch;
    padding-right:1ch
  }
}