/* Scoped fixes for rendered Markdown/HTML inside post pages. */
.article #post-body {
  color: var(--color-p);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.article #post-body > *:first-child {
  margin-top: 0;
}

.article #post-body p {
  margin: 1em 0;
  line-height: inherit;
}

.article #post-body h1,
.article #post-body h2,
.article #post-body h3,
.article #post-body h4,
.article #post-body h5,
.article #post-body h6 {
  clear: both;
  font-family: inherit;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
  overflow-wrap: break-word;
  scroll-margin-top: 88px;
}

.article #post-body h1 {
  font-size: 1.65rem;
  margin: 2.2em 0 0.85em;
}

.article #post-body h2 {
  font-size: 1.45rem;
  margin: 2em 0 0.8em;
}

.article #post-body h3 {
  font-size: 1.22rem;
  margin: 1.6em 0 0.7em;
}

.article #post-body h4 {
  font-size: 1.08rem;
  margin: 1.4em 0 0.6em;
}

.article #post-body h5,
.article #post-body h6 {
  font-size: 1rem;
  margin: 1.2em 0 0.5em;
}

.article #post-body a:not(.headerlink) {
  color: #2092ec;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

.article #post-body a:not(.headerlink):hover {
  text-decoration: underline;
}

.article #post-body ul,
.article #post-body ol {
  margin: 1em 0;
  padding-left: 1.45em;
}

.article #post-body ul {
  list-style: disc;
}

.article #post-body ol {
  list-style: decimal;
}

.article #post-body li {
  list-style: inherit;
  margin: 0.35em 0;
  padding-left: 0.15em;
}

.article #post-body li > ul,
.article #post-body li > ol {
  margin: 0.35em 0;
}

.article #post-body blockquote {
  margin: 1.25em 0;
  padding: 0.85em 1em;
  border-left: 4px solid #3dd9b6;
  background: var(--color-block);
  border-radius: 4px;
}

.article #post-body blockquote,
.article #post-body blockquote p,
.article #post-body blockquote ul,
.article #post-body blockquote ol {
  font-family: inherit;
  font-size: 0.96rem;
  line-height: 1.75;
  text-align: left;
}

.article #post-body blockquote > :first-child {
  margin-top: 0;
}

.article #post-body blockquote > :last-child {
  margin-bottom: 0;
}

.article #post-body hr {
  margin: 2em 0;
  border: 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.24);
}

.article #post-body img,
.article #post-body video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.35em auto;
  border-radius: 4px;
}

.article #post-body p > img:only-child {
  margin-top: 1.15em;
  margin-bottom: 1.15em;
}

.article #post-body iframe,
.article #post-body embed,
.article #post-body object {
  max-width: 100%;
}

.article #post-body code,
.article #post-body pre,
.article #post-body kbd,
.article #post-body samp,
.article #post-body figure.highlight {
  font-family: Menlo, "Ubuntu Mono", Consolas, Monaco, "Courier New", monospace;
}

.article #post-body code:not([class]) {
  display: inline;
  padding: 0.12em 0.34em;
  color: var(--color-inlinecode);
  background: rgba(125, 125, 125, 0.12);
  border-radius: 3px;
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.article #post-body pre {
  max-width: 100%;
  white-space: pre;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article #post-body figure.highlight {
  width: 100%;
  max-width: 100%;
  margin: 1.15em 0 1.35em;
  overflow: hidden;
  background: var(--color-codeblock);
  border: 1px solid rgba(128, 128, 128, 0.18);
  border-radius: 6px;
}

.article #post-body figure.highlight figcaption {
  border-bottom: 1px solid rgba(128, 128, 128, 0.14);
}

.article #post-body figure.highlight > table {
  display: block;
  width: max-content;
  min-width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  background: transparent;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.article #post-body figure.highlight > table td,
.article #post-body figure.highlight > table th {
  border: 0;
  padding: 0;
  white-space: nowrap;
}

.article #post-body figure.highlight > table .gutter {
  width: 3.2em;
  min-width: 3.2em;
}

.article #post-body figure.highlight > table .code {
  min-width: max-content;
}

.article #post-body figure.highlight pre {
  margin: 0;
  border: 0;
  background: transparent;
  white-space: pre;
}

.article #post-body figure.highlight .line {
  min-height: 1.55em;
  line-height: 1.55;
}

.article #post-body > table,
.article #post-body :not(.highlight) > table:not([class]) {
  display: block;
  width: max-content;
  min-width: 60%;
  max-width: 100%;
  margin: 1.15em 0 1.35em;
  overflow-x: auto;
  border-collapse: collapse;
  border-spacing: 0;
  -webkit-overflow-scrolling: touch;
}

.article #post-body > table:not([class]) th,
.article #post-body > table:not([class]) td,
.article #post-body :not(.highlight) > table:not([class]) th,
.article #post-body :not(.highlight) > table:not([class]) td {
  min-width: 7.5em;
  padding: 0.65em 0.85em;
  vertical-align: top;
  line-height: 1.55;
  word-break: normal;
  overflow-wrap: break-word;
}

.article #post-body > table:not([class]) th,
.article #post-body :not(.highlight) > table:not([class]) th {
  font-weight: 650;
}

.article #post-body .mermaid,
.article #post-body .markmap,
.article #post-body .MathJax_Display,
.article #post-body .katex-display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.article #post-body .mermaid svg,
.article #post-body .markmap svg {
  max-width: 100%;
  height: auto;
}

[color-scheme="dark"] .article #post-body code:not([class]) {
  background: rgba(255, 255, 255, 0.08);
}

[color-scheme="dark"] .article #post-body figure.highlight {
  border-color: rgba(255, 255, 255, 0.12);
}

[color-scheme="dark"] .article #post-body figure.highlight figcaption {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([color-scheme]) .article #post-body code:not([class]) {
    background: rgba(255, 255, 255, 0.08);
  }

  :root:not([color-scheme]) .article #post-body figure.highlight {
    border-color: rgba(255, 255, 255, 0.12);
  }

  :root:not([color-scheme]) .article #post-body figure.highlight figcaption {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
}

@media screen and (max-width: 680px) {
  .article #post-body {
    font-size: 15.5px;
    line-height: 1.82;
  }

  .article #post-body h1 {
    font-size: 1.48rem;
  }

  .article #post-body h2 {
    font-size: 1.32rem;
  }

  .article #post-body h3 {
    font-size: 1.14rem;
  }

  .article #post-body ul,
  .article #post-body ol {
    padding-left: 1.25em;
  }

  .article #post-body figure.highlight,
  .article #post-body pre {
    font-size: 0.8rem;
  }

  .article #post-body figure.highlight > table .gutter {
    width: 2.6em;
    min-width: 2.6em;
  }

  .article #post-body > table,
  .article #post-body :not(.highlight) > table:not([class]) {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    overflow: visible;
  }

  .article #post-body > table:not([class]) th,
  .article #post-body > table:not([class]) td,
  .article #post-body :not(.highlight) > table:not([class]) th,
  .article #post-body :not(.highlight) > table:not([class]) td {
    min-width: 0 !important;
    padding: 0.5em 0.45em;
    font-size: 0.92em;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .article #post-body > table:not([class]) th,
  .article #post-body :not(.highlight) > table:not([class]) th {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .article #post-body > table:not([class]) code,
  .article #post-body > table:not([class]) a,
  .article #post-body :not(.highlight) > table:not([class]) code,
  .article #post-body :not(.highlight) > table:not([class]) a {
    overflow-wrap: anywhere !important;
  }
}