.markdown {
  color: var(--color-text);
  line-height: 1.6;
  -webkit-user-select: text;
  user-select: text;
  word-break: break-word;

  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child {
    margin-top: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 1em 0 1em 0;
    font-weight: 800;
    font-family:
      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }

  h1 {
    font-size: 2em;
    border-bottom: 0.5px solid var(--color-border);
    padding-bottom: 0.3em;
  }

  h2 {
    font-size: 1.5em;
    border-bottom: 0.5px solid var(--color-border);
    padding-bottom: 0.3em;
  }

  h3 {
    font-size: 1.2em;
  }

  h4 {
    font-size: 1em;
  }

  h5 {
    font-size: 0.9em;
  }

  h6 {
    font-size: 0.8em;
  }

  p {
    margin: 1em 0;
    white-space: pre-wrap;

    &:last-child {
      margin-bottom: 5px;
    }

    &:first-child {
      margin-top: 0;
    }

    &:has(+ ul) {
      margin-bottom: 0;
    }
  }

  ul {
    list-style: initial;
  }

  ul,
  ol {
    padding-left: 1.5em;
    margin: 1em 0;
  }

  li {
    margin-bottom: 0.5em;
    pre {
      margin: 1.5em 0;
    }
    &::marker {
      color: var(--color-text-3);
    }
  }

  li > ul,
  li > ol {
    margin: 0.5em 0;
  }

  hr {
    border: none;
    border-top: 0.5px solid var(--color-border);
    margin: 20px 0;
    background-color: var(--color-border);
  }

  span {
    white-space: pre;
  }

  p code,
  li code {
    background: var(--color-background-mute);
    padding: 3px 5px;
    border-radius: 5px;
    word-break: keep-all;
    white-space: pre;
  }

  code {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  }

  pre {
    border-radius: 5px;
    overflow-x: auto;
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    background-color: var(--color-background-mute);
    &:has(> .mermaid) {
      background-color: transparent;
    }
    &:not(pre pre) {
      > code:not(pre pre > code) {
        padding: 15px;
        display: block;
      }
    }
    pre {
      margin: 0 !important;
      code {
        background: none;
        padding: 0;
        border-radius: 0;
      }
    }
  }

  pre + pre {
    margin-top: 10px;
  }

  blockquote {
    margin: 1em 0;
    padding-left: 1em;
    color: var(--color-text-light);
    border-left: 4px solid var(--color-border);
    font-family: Georgia, 'Times New Roman', Times, serif;
  }

  table {
    border-collapse: collapse;
    margin: 1em 0;
    width: 100%;
  }

  th,
  td {
    border: 0.5px solid var(--color-border);
    padding: 0.5em;
  }

  th {
    background-color: var(--color-background-mute);
    font-weight: bold;
    font-family:
      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  a,
  .link {
    color: var(--color-link);
    text-decoration: none;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }

  strong {
    font-weight: bold;
  }

  em {
    font-style: italic;
  }

  del {
    text-decoration: line-through;
  }

  sup,
  sub {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sup[data-citation],
  .citation-marker {
    cursor: pointer;
    color: var(--color-link);
    background-color: rgba(0, 123, 255, 0.1);
    padding: 0 4px;
    border-radius: 4px;
    transition: background-color 0.2s;

    &:hover {
      background-color: rgba(0, 123, 255, 0.2);
      text-decoration: underline;
    }
  }

  sup {
    top: -0.5em;
    border-radius: 50%;
    background-color: var(--color-reference);
    color: var(--color-reference-text);
    padding: 2px 5px;
    zoom: 0.8;
    & > span.link {
      color: var(--color-reference-text);
    }

    &[data-citation] {
      cursor: pointer;
      &:hover {
        background-color: var(--color-primary);
      }
    }
  }

  .citation-link {
    color: var(--color-reference-text);
    cursor: pointer;
    &:hover {
      text-decoration: none;
      opacity: 0.8;
    }
  }

  sub {
    bottom: -0.25em;
  }

  .footnote-ref {
    font-size: 0.8em;
    vertical-align: super;
    line-height: 0;
    margin: 0 2px;
    color: var(--color-primary);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.footnotes {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-top: 1em;

  background-color: var(--color-reference-background);
  border-radius: 8px;
  padding: 8px 12px;

  h4 {
    margin-bottom: 5px;
    font-size: 12px;
  }

  a {
    color: var(--color-link);
  }

  ol {
    padding-left: 1em;
    margin: 0;
    li:last-child {
      margin-bottom: 0;
    }
  }

  li {
    font-size: 0.9em;
    margin-bottom: 0.5em;
    color: var(--color-text-light);

    p {
      display: inline;
      margin: 0;
    }
  }

  .footnote-backref {
    font-size: 0.8em;
    vertical-align: super;
    line-height: 0;
    margin-left: 5px;
    color: var(--color-primary);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

emoji-picker {
  --border-size: 0;
}

.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
}
mjx-container {
  overflow-x: auto;
}
