@import "typora-docsify/codeblock.css";
/* Import Google Font ------------------------------ START */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,600;1,400;1,600&display=swap");
/* Import Google Font ------------------------------ END */
/* 数字部分使用 Barlow ------------------------------ START */
/* 
适配数字范围 
0123456789%+,-./\@
[0-9]U+30-39, [%]U+25, [+,-./]U+2B-2F, [\]U+5C, [@]U+40 

字重500的Barlow跟400的Poppins比较配
------------------------------
如果需要Barlow所有字符 用👇 然后取 Latin 
https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700

Barlow latin 👇

400 Barlow
https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3_-gs51os.woff2

500 Barlow
https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3_-gs51os.woff2

600 Barlow Semibold
https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E30-8s51os.woff2

700 Barlow Bold
https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3t-4s51os.woff2
------------------------------
如果只需要指定的少数字符 用👇 
https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&text=0123456789%+,-./\@
------------------------------
转换base64版本内嵌字体 
https://transfonter.org
*/
@font-face {
  font-family: "Number";
  src: local("Barlow Medium"), url(https://fonts.gstatic.com/l/font?kit=7cHqv4kjgoGqM7E3_-gc5Ug7uBQPW5-TDsGIla7mki9yb_ox&skey=4c8d0d0b13516148&v=v12) format("woff2");
  font-weight: 400;
  unicode-range: U+30-39, U+25, U+2B-2F, U+5C, U+40;
}
@font-face {
  font-family: "Number";
  src: local("Barlow Semibold"), url(https://fonts.gstatic.com/l/font?kit=7cHqv4kjgoGqM7E30-8c5Ug7uBQPW5-TDsGIla7mki9yb_ox&skey=a9a2225c15335812&v=v12) format("woff2");
  font-weight: 600;
  unicode-range: U+30-39, U+25, U+2B-2F, U+5C, U+40;
}
@font-face {
  font-family: "Number";
  src: local("Barlow Bold"), url(https://fonts.gstatic.com/l/font?kit=7cHqv4kjgoGqM7E3t-4c5Ug7uBQPW5-TDsGIla7mki9yb_ox&skey=f60e73b1bbf362f3&v=v12) format("woff2");
  font-weight: 700;
  unicode-range: U+30-39, U+25, U+2B-2F, U+5C, U+40;
}
/* 数字部分使用 Barlow ------------------------------ END */
/* 优先 Emoji 字体 ------------------------------ START */
/* 优先启用表情图标 避免被 Nerd Font 等大字符集覆盖，比如 ⚠️
但emoji会覆盖数字，所以要限定一下emoji的适用范围，避开常用拉丁文。
Apple: "AppleColorEmoji", Win: "Segoe UI Emoji", Android:  "Noto Color Emoji" */
@font-face {
  font-family: "Emoji";
  src: local("AppleColorEmoji"), local("Segoe UI Emoji"), local("Noto Color Emoji");
  unicode-range: U+300-FFFF;
}
/* 优先 Emoji 字体 ------------------------------ END */
/* 全局设置 ------------------------------ START */
:root {
  /* 
特殊字体：Emoji, Number, 
优先英文："Poppins", 
优先中文："Source Han Sans HC",
苹果中文："SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK",
安卓中文："Noto Sans", "Noto Sans CJK SC",
Win中文："Microsoft YaHei", "微软雅黑",
苹果英文：-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
安卓英文：Roboto, */
  --sans: Emoji, Number, "Poppins", "Source Han Sans HC", "SF Pro HK",
    "SF Pro Text", "SF Pro Icons", "PingFang HK", "Noto Sans",
    "Noto Sans CJK SC", "Microsoft YaHei", "微软雅黑", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --font-family: var(--sans);
  --monospace: Emoji, "JetBrainsMono Nerd Font", "JetBrains Mono", Menlo,
    Consolas, "Source Han Sans HC", "SF Pro HK", "SF Pro Text", "SF Pro Icons",
    "PingFang HK", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei",
    "微软雅黑", monospace;
  --theme-color: #24d;
  --color-dark: #333;
  --color-light: #8882;
  --color-border: #8884;
  --color-important: #f30;
  --color-highlight: #ff4;
  --color-abbr: #0903;
  --block-border-radius: 0.5em;
  --block-margin: 1em;
  --code-block-padding-v: 0.75em;
  --code-block-padding-h: 1em;
  --code-block-bg-color: #000c;
  --code-border: 0px solid transparent;
  --inline-block-padding: 0.3rem;
  --inline-block-margin: 0.1rem;
  --color-inline-block-bg: #8882;
  --inline-border-radius: 0.25em;
  --line-height: 1.75;
  --font-weight: 400;
  --font-weight-bold: 600;
  --text-color: #333;
  --color-link: #93f;
  --color-em: #f69;
  --color-underline: #f33;
  --color-mark-text: #f33;
  --color-mark-bg: #ff3;
  --color-inline-code: #06b;
  --h1-color: var(--theme-color);
  --h2-color: var(--theme-color);
  --h3-color: var(--theme-color);
  --h4-color: var(--theme-color);
  --h5-color: var(--theme-color);
  --h6-color: var(--theme-color);
  --h1-color: #f33;
  --h2-color: #33f;
  --h3-color: #93f;
  --h4-color: #f39;
  --h5-color: #f63;
  --h6-color: #3c3;
  --bg-color: #fff;
  --meta-content-color: var(--theme-color);
  --primary-color: var(--theme-color);
  --active-file-bg-color: var(--color-light);
  --active-file-border-color: var(--theme-color);
  --side-bar-bg-color: #eee;
  --item-hover-bg-color: rgba(127, 127, 127, 0.1);
  --item-hover-text-color: inherit;
}
html,
body,
#write {
  font: 400 1rem / var(--line-height) var(--font-family);
  word-break: normal;
  min-height: 100vh;
  /* 字体渲染 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 行内元素跨行复制断开处样式 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* iOS overflow滚动时保持橡皮筋效果 */
  -webkit-overflow-scrolling: touch;
  /* iOS 横屏字号变化关闭 */
  text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* iOS 点击区域不出现灰色 */
  -webkit-tap-highlight-color: transparent;
}
/* 全局设置 ------------------------------ END */
#write,
.markdown-section {
  max-width: 40em;
  padding-left: 2em;
  padding-right: 2em;
}
#write *,
.markdown-section *,
#write *::before,
.markdown-section *::before,
#write *::after,
.markdown-section *::after {
  box-sizing: border-box;
}
#write h1,
.markdown-section h1,
#write h1 *,
.markdown-section h1 *,
#write h2,
.markdown-section h2,
#write h2 *,
.markdown-section h2 *,
#write h3,
.markdown-section h3,
#write h3 *,
.markdown-section h3 *,
#write h4,
.markdown-section h4,
#write h4 *,
.markdown-section h4 *,
#write h5,
.markdown-section h5,
#write h5 *,
.markdown-section h5 *,
#write h6,
.markdown-section h6,
#write h6 *,
.markdown-section h6 * {
  color: var(--theme-color);
  font-family: var(--sans);
  font-weight: normal;
  padding: 0 !important;
  margin: 1rem 0 0 !important;
  line-height: 1.25 !important;
  text-wrap: balance;
}
#write h1::before,
.markdown-section h1::before,
#write h1 *::before,
.markdown-section h1 *::before,
#write h2::before,
.markdown-section h2::before,
#write h2 *::before,
.markdown-section h2 *::before,
#write h3::before,
.markdown-section h3::before,
#write h3 *::before,
.markdown-section h3 *::before,
#write h4::before,
.markdown-section h4::before,
#write h4 *::before,
.markdown-section h4 *::before,
#write h5::before,
.markdown-section h5::before,
#write h5 *::before,
.markdown-section h5 *::before,
#write h6::before,
.markdown-section h6::before,
#write h6 *::before,
.markdown-section h6 *::before {
  font: 400 0.8em var(--sans);
  color: inherit;
  margin-right: 0.5rem;
  border: none;
  position: relative;
  left: unset;
  top: unset;
  float: none;
  padding: 0;
  vertical-align: baseline;
  opacity: 1 !important;
}
#write h1.md-focus:after,
.markdown-section h1.md-focus:after,
#write h1 *.md-focus:after,
.markdown-section h1 *.md-focus:after,
#write h2.md-focus:after,
.markdown-section h2.md-focus:after,
#write h2 *.md-focus:after,
.markdown-section h2 *.md-focus:after,
#write h3.md-focus:after,
.markdown-section h3.md-focus:after,
#write h3 *.md-focus:after,
.markdown-section h3 *.md-focus:after,
#write h4.md-focus:after,
.markdown-section h4.md-focus:after,
#write h4 *.md-focus:after,
.markdown-section h4 *.md-focus:after,
#write h5.md-focus:after,
.markdown-section h5.md-focus:after,
#write h5 *.md-focus:after,
.markdown-section h5 *.md-focus:after,
#write h6.md-focus:after,
.markdown-section h6.md-focus:after,
#write h6 *.md-focus:after,
.markdown-section h6 *.md-focus:after {
  opacity: 0.25;
  font-size: 0.8em;
}
#write h1:first-child,
.markdown-section h1:first-child {
  padding-top: 5rem !important;
}
#write h1 *,
.markdown-section h1 * {
  font-size: 2rem;
  color: var(--h1-color);
}
#write h2,
.markdown-section h2 {
  border: none;
  border-top: 1px solid var(--theme-color);
  padding-top: 1.5rem !important;
  margin-top: 2rem !important;
  display: block;
}
#write h2,
.markdown-section h2,
#write h2 *,
.markdown-section h2 * {
  font-size: 1.75rem;
  color: var(--h2-color);
}
#write h3,
.markdown-section h3,
#write h3 *,
.markdown-section h3 * {
  font-size: 1.5rem;
  color: var(--h3-color);
}
#write h4,
.markdown-section h4,
#write h4 *,
.markdown-section h4 * {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--h4-color);
}
#write h5,
.markdown-section h5,
#write h5 *,
.markdown-section h5 * {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--h5-color);
}
#write h6,
.markdown-section h6,
#write h6 *,
.markdown-section h6 * {
  font-size: 1rem;
  font-weight: 500;
  color: var(--h6-color);
}
#write h1,
.markdown-section h1 {
  counter-reset: h2;
}
#write h2,
.markdown-section h2 {
  counter-reset: h3;
}
#write h3,
.markdown-section h3 {
  counter-reset: h4;
}
#write h4,
.markdown-section h4 {
  counter-reset: h5;
}
#write h5,
.markdown-section h5 {
  counter-reset: h6;
}
#write h2::before,
.markdown-section h2::before {
  counter-increment: h2;
  content: counter(h2) ".";
}
#write h3::before,
.markdown-section h3::before {
  counter-increment: h3;
  content: counter(h2) "." counter(h3);
}
#write h4::before,
.markdown-section h4::before {
  counter-increment: h4;
  content: counter(h2) "." counter(h3) "." counter(h4);
}
#write h5::before,
.markdown-section h5::before {
  counter-increment: h5;
  content: none;
}
#write h6::before,
.markdown-section h6::before {
  counter-increment: h6;
  content: none;
}
#write h2.md-focus::after,
.markdown-section h2.md-focus::after {
  content: " H2";
}
#write h3.md-focus::after,
.markdown-section h3.md-focus::after {
  content: " H3";
}
#write h4.md-focus::after,
.markdown-section h4.md-focus::after {
  content: " H4";
}
#write h5.md-focus::after,
.markdown-section h5.md-focus::after {
  content: " H5";
}
#write h6.md-focus::after,
.markdown-section h6.md-focus::after {
  content: " H6";
}
#write p,
.markdown-section p,
#write blockquote,
.markdown-section blockquote,
#write ul,
.markdown-section ul,
#write ol,
.markdown-section ol,
#write pre.md-fences,
.markdown-section pre.md-fences,
#write pre[data-lang],
.markdown-section pre[data-lang],
#write table:not(.md-grid-board),
.markdown-section table:not(.md-grid-board) {
  margin: 1rem 0;
}
#write hr,
.markdown-section hr,
#write .md-hr,
.markdown-section .md-hr {
  margin: 2rem 0;
  height: 0;
  border: none;
  border-bottom: 1px solid #8884;
}
#write hr + h2,
.markdown-section hr + h2,
#write .md-hr + h2,
.markdown-section .md-hr + h2 {
  margin-top: -2rem !important;
}
#write .inline-with-bg,
.markdown-section .inline-with-bg {
  padding: 0.1em var(--inline-block-padding);
  margin: 0.5em var(--inline-block-margin);
  border-radius: var(--inline-border-radius);
  background: var(--color-inline-block-bg);
}
#write del,
.markdown-section del,
#write q,
.markdown-section q,
#write mark,
.markdown-section mark {
  padding: 0.1em var(--inline-block-padding);
  margin: 0.5em var(--inline-block-margin);
  border-radius: var(--inline-border-radius);
  background: var(--color-inline-block-bg);
}
#write strong,
.markdown-section strong,
#write b,
.markdown-section b,
#write em,
.markdown-section em {
  margin: 0 var(--inline-block-margin);
}
#write u,
.markdown-section u {
  margin: 0 var(--inline-block-margin);
}
#write u strong,
.markdown-section u strong,
#write u b,
.markdown-section u b,
#write u em,
.markdown-section u em {
  margin: 0;
}
#write p a,
.markdown-section p a,
#write table a,
.markdown-section table a,
#write li a,
.markdown-section li a {
  padding: 0.1em var(--inline-block-padding);
  margin: 0.5em var(--inline-block-margin);
  border-radius: var(--inline-border-radius);
  background: var(--color-inline-block-bg);
  color: var(--color-link);
  padding: 0;
  background: transparent;
  transition: 1s;
}
#write a:hover,
.markdown-section a:hover {
  color: var(--color-important);
  text-decoration-color: var(--color-underline);
  background: var(--color-highlight);
  transition: 0.3s;
}
#write h1 a,
.markdown-section h1 a,
#write a.anchor,
.markdown-section a.anchor {
  text-decoration: underline;
  text-decoration-color: transparent;
}
#write h1 a:hover,
.markdown-section h1 a:hover,
#write a.anchor:hover,
.markdown-section a.anchor:hover {
  background: var(--color-highlight);
}
#write strong,
.markdown-section strong,
#write b,
.markdown-section b {
  font-weight: var(--font-weight-bold);
}
#write del,
.markdown-section del {
  color: var(--text-color);
  opacity: 0.5;
}
#write u,
.markdown-section u {
  text-decoration-color: var(--color-underline);
}
#write mark,
.markdown-section mark {
  color: var(--color-mark-text);
  background: var(--color-mark-bg);
}
#write mark strong,
.markdown-section mark strong {
  color: var(--color-important);
}
#write mark u,
.markdown-section mark u {
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-underline);
}
#write em,
.markdown-section em {
  color: var(--color-em);
}
#write q,
.markdown-section q {
  font-size: 0.9em;
  opacity: 0.5;
  line-height: var(--line-height);
  transition: opacity 1s;
}
#write q::before,
.markdown-section q::before,
#write q::after,
.markdown-section q::after {
  content: "";
}
#write q:hover,
.markdown-section q:hover {
  opacity: 1;
  transition: opacity 0.3s;
}
#write .md-raw-html-src-content,
.markdown-section .md-raw-html-src-content,
#write .md-raw-inline,
.markdown-section .md-raw-inline,
#write .md-tag,
.markdown-section .md-tag,
#write [md-inline="linebreak"],
.markdown-section [md-inline="linebreak"] {
  opacity: 1;
  padding: 0.1em var(--inline-block-padding);
  margin: 0.5em var(--inline-block-margin);
  border-radius: var(--inline-border-radius);
  background: var(--color-inline-block-bg);
  background: var(--color-light);
  color: inherit;
}
#write ruby,
.markdown-section ruby {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s;
}
#write ruby rt,
.markdown-section ruby rt {
  font-size: clamp(10px, 0.5em, 100px) !important;
  transform-origin: bottom;
  transition: all 0.3s;
}
#write ruby:hover,
.markdown-section ruby:hover {
  text-decoration-color: inherit;
}
#write ruby:hover rt,
.markdown-section ruby:hover rt {
  transform: scale(1.5);
}
#write code,
.markdown-section code,
#write kbd,
.markdown-section kbd,
#write code:not([class*="lang-"]):not([class*="language-"]),
.markdown-section code:not([class*="lang-"]):not([class*="language-"]) {
  color: var(--color-inline-code);
  background: var(--color-light);
  border: var(--code-border);
  border-radius: var(--inline-border-radius);
  padding: 0.1em var(--inline-block-padding);
  margin: 0 var(--inline-block-margin);
  font: bold 0.9em var(--monospace);
  white-space: pre-wrap;
  min-width: unset;
}
#write .code_block,
.markdown-section .code_block {
  background: var(--code-block-bg-color);
  color: #fff;
  border: var(--code-border);
  border-radius: var(--block-border-radius);
  padding: var(--code-block-padding-v) var(--code-block-padding-h);
  word-break: break-word;
  white-space: break-spaces;
}
#write pre[data-lang],
.markdown-section pre[data-lang] {
  border-radius: 0;
  background: none;
}
#write pre[data-lang] code,
.markdown-section pre[data-lang] code {
  margin: 0;
  background: var(--code-block-bg-color);
  color: #fff;
  border: var(--code-border);
  border-radius: var(--block-border-radius);
  padding: var(--code-block-padding-v) var(--code-block-padding-h);
  word-break: break-word;
  white-space: break-spaces;
}
#write pre[data-lang]::after,
.markdown-section pre[data-lang]::after {
  color: #fff;
  top: 0;
  right: 1em;
  background: #fff2;
  padding: 0.2em 0.8em;
  border-radius: 0 0 0.5em 0.5em;
}
#write pre.md-fences,
.markdown-section pre.md-fences {
  background: var(--code-block-bg-color);
  color: #fff;
  border: var(--code-border);
  border-radius: var(--block-border-radius);
  padding: var(--code-block-padding-v) var(--code-block-padding-h);
  word-break: break-word;
  white-space: break-spaces;
}
#write pre.md-fences .CodeMirror,
.markdown-section pre.md-fences .CodeMirror,
#write pre.md-fences .CodeMirror-scroll,
.markdown-section pre.md-fences .CodeMirror-scroll {
  background: none;
}
#write .code-tooltip,
.markdown-section .code-tooltip {
  box-shadow: none;
  border-radius: var(--block-border-radius);
  border: var(--code-border);
}
#write kbd,
.markdown-section kbd {
  box-shadow: none;
}
#write kbd + kbd,
.markdown-section kbd + kbd {
  margin-left: var(--inline-block-margin);
}
#write blockquote,
.markdown-section blockquote {
  --block-gap: 0.75rem;
  padding: var(--block-gap) 0.75rem;
  border-left: 4px solid var(--color-border);
  background: var(--color-light);
  color: var(--text-color);
  border-radius: 0 var(--block-border-radius) var(--block-border-radius) 0;
  transition: 1s;
}
#write blockquote p,
.markdown-section blockquote p {
  font: 0.9em/1.5 var(--sans);
  margin: var(--block-gap) 0;
}
#write blockquote p:first-child,
.markdown-section blockquote p:first-child {
  margin-top: 0;
}
#write blockquote p:last-child,
.markdown-section blockquote p:last-child {
  margin-bottom: 0;
}
#write blockquote:hover,
.markdown-section blockquote:hover {
  transition: 0.2s;
  border-left: 4px solid var(--theme-color);
  background: var(--color-light);
  color: var(--text-color);
}
#write pre.md-meta-block,
.markdown-section pre.md-meta-block,
#write hr:first-child + p,
.markdown-section hr:first-child + p {
  background: var(--code-block-bg-color);
  color: #fff;
  border: var(--code-border);
  border-radius: var(--block-border-radius);
  padding: var(--code-block-padding-v) var(--code-block-padding-h);
  word-break: break-word;
  white-space: break-spaces;
  background: var(--color-light);
  font: 0.75rem/1.5 var(--monospace);
  color: var(--text-color);
  opacity: 0.5;
  transition: opacity 1s;
}
#write pre.md-meta-block:hover,
.markdown-section pre.md-meta-block:hover,
#write hr:first-child + p:hover,
.markdown-section hr:first-child + p:hover {
  opacity: 1;
  transition: opacity 0.3s;
}
#write hr:first-child,
.markdown-section hr:first-child,
#write hr:first-child + p + hr,
.markdown-section hr:first-child + p + hr {
  display: none;
}
#write .md-image,
.markdown-section .md-image,
#write img,
.markdown-section img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  margin: 0 auto;
  border: none;
  border-radius: var(--block-border-radius);
  box-shadow: 0 0 2px #0000;
  transition: all 0.3s !important;
}
#write .md-image:hover,
.markdown-section .md-image:hover,
#write img:hover,
.markdown-section img:hover {
  box-shadow: 0 0 2px #0004;
}
#write .md-image + .md-softbreak,
.markdown-section .md-image + .md-softbreak {
  height: 1em;
}
#write ul,
.markdown-section ul,
#write ol,
.markdown-section ol {
  margin: 0.5em 0;
  padding-left: 1.5rem;
}
#write ul li,
.markdown-section ul li,
#write ol li,
.markdown-section ol li {
  margin: 0.5em 0;
}
#write ul ul,
.markdown-section ul ul,
#write ol ul,
.markdown-section ol ul,
#write ul ol,
.markdown-section ul ol,
#write ol ol,
.markdown-section ol ol {
  margin: 0.3em 0;
}
#write ul ul li,
.markdown-section ul ul li,
#write ol ul li,
.markdown-section ol ul li,
#write ul ol li,
.markdown-section ul ol li,
#write ol ol li,
.markdown-section ol ol li {
  margin: 0.3em 0;
}
#write li p,
.markdown-section li p {
  margin: 0;
}
#write ol li::marker,
.markdown-section ol li::marker {
  font-size: 0.9em;
}
#write .task-list-item,
.markdown-section .task-list-item {
  margin-left: 0 !important;
  position: relative;
}
#write .task-list-item input[type="checkbox"],
.markdown-section .task-list-item input[type="checkbox"] {
  width: 1.5em !important;
  margin: 0;
  position: absolute;
  left: -1.5em;
  top: 0.5em;
}
#write .table_light,
.markdown-section .table_light {
  border: 1px solid var(--color-border);
}
#write .table_light th,
.markdown-section .table_light th,
#write .table_light td,
.markdown-section .table_light td {
  border-bottom: 1px solid var(--color-border);
}
#write .table_light th,
.markdown-section .table_light th {
  background: var(--color-light);
}
#write .table_light tbody tr:nth-child(even),
.markdown-section .table_light tbody tr:nth-child(even) {
  background: #8881;
}
#write .table_dark,
.markdown-section .table_dark {
  background: var(--color-dark);
}
#write .table_dark th,
.markdown-section .table_dark th,
#write .table_dark td,
.markdown-section .table_dark td {
  color: white;
}
#write .table_dark th,
.markdown-section .table_dark th {
  background: var(--color-dark);
  color: var(--color-em);
}
#write .table_dark tbody tr:nth-child(even),
.markdown-section .table_dark tbody tr:nth-child(even) {
  background: var(--color-dark);
}
#write table:not(.md-grid-board),
.markdown-section table:not(.md-grid-board),
#write .md-table,
.markdown-section .md-table {
  display: table;
  width: auto;
  border-radius: var(--block-border-radius);
  overflow: hidden;
  font: 0.9rem/1.25 var(--monospace);
  border-collapse: separate;
  border: 1px solid var(--color-border);
}
#write table:not(.md-grid-board) th,
.markdown-section table:not(.md-grid-board) th,
#write .md-table th,
.markdown-section .md-table th,
#write table:not(.md-grid-board) td,
.markdown-section table:not(.md-grid-board) td,
#write .md-table td,
.markdown-section .md-table td {
  padding: 0.5em clamp(0.5em, 1vw, 2em);
  vertical-align: top;
  border: none;
}
#write table:not(.md-grid-board) th:not(:last-child),
.markdown-section table:not(.md-grid-board) th:not(:last-child),
#write .md-table th:not(:last-child),
.markdown-section .md-table th:not(:last-child),
#write table:not(.md-grid-board) td:not(:last-child),
.markdown-section table:not(.md-grid-board) td:not(:last-child),
#write .md-table td:not(:last-child),
.markdown-section .md-table td:not(:last-child) {
  border-right: 1px dashed #8888;
}
#write table:not(.md-grid-board) tr:last-child td,
.markdown-section table:not(.md-grid-board) tr:last-child td,
#write .md-table tr:last-child td,
.markdown-section .md-table tr:last-child td {
  border-bottom: none;
}
#write table:not(.md-grid-board) th,
.markdown-section table:not(.md-grid-board) th,
#write .md-table th,
.markdown-section .md-table th,
#write table:not(.md-grid-board) td,
.markdown-section table:not(.md-grid-board) td,
#write .md-table td,
.markdown-section .md-table td {
  border-bottom: 1px solid var(--color-border);
}
#write table:not(.md-grid-board) th,
.markdown-section table:not(.md-grid-board) th,
#write .md-table th,
.markdown-section .md-table th {
  background: var(--color-light);
}
#write table:not(.md-grid-board) tbody tr:nth-child(even),
.markdown-section table:not(.md-grid-board) tbody tr:nth-child(even),
#write .md-table tbody tr:nth-child(even),
.markdown-section .md-table tbody tr:nth-child(even) {
  background: #8881;
}
#write .md-def-name,
.markdown-section .md-def-name {
  color: #888;
}
#write .md-def-name::before,
.markdown-section .md-def-name::before,
#write .md-def-name::after,
.markdown-section .md-def-name::after {
  font-size: 0.9rem;
  color: #888;
  position: relative;
}
#write abbr,
.markdown-section abbr {
  text-decoration: underline;
  text-decoration-color: var(--theme-color);
}
#write .md-fences[lang="mermaid"]:not(.md-focus),
.markdown-section .md-fences[lang="mermaid"]:not(.md-focus),
#write .md-diagram-panel,
.markdown-section .md-diagram-panel,
#write .mermaid,
.markdown-section .mermaid {
  background: #fff;
}
#write .md-fences[lang="mermaid"]:not(.md-focus) *,
.markdown-section .md-fences[lang="mermaid"]:not(.md-focus) *,
#write .md-diagram-panel *,
.markdown-section .md-diagram-panel *,
#write .mermaid *,
.markdown-section .mermaid * {
  font-family: var(--sans) !important;
}
#write pre.md-fences-advanced.md-focus[lang="mermaid"],
.markdown-section pre.md-fences-advanced.md-focus[lang="mermaid"] {
  margin-bottom: 1em !important;
}
#write pre.md-fences-advanced.md-focus .md-fences-adv-panel,
.markdown-section pre.md-fences-advanced.md-focus .md-fences-adv-panel {
  position: relative;
  background: #fff;
  border-radius: 0 0 var(--block-border-radius) var(--block-border-radius);
  margin: var(-code-block-padding-v) calc(var(--code-block-padding-h) * -1) calc(var(-code-block-padding-v) * -1);
  width: calc(100% +  var(--code-block-padding-h) * 2);
  border: 1px solid var(--color-dark);
}
#write .mermaid,
.markdown-section .mermaid {
  display: flex;
  justify-content: center;
}
#write .mermaid .messageText,
.markdown-section .mermaid .messageText {
  stroke: none !important;
}
.md-linebreak {
  font-size: 0;
}
.md-linebreak .md-linebreak-mark {
  font-size: 0.8rem;
  opacity: 0.25 !important;
}
table .md-br,
table .md-br-content {
  font-size: 0;
  padding: 0 !important;
  margin: 0 !important;
}
.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container)::before,
.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container)::after {
  color: #c8c8c8 !important;
  color: var(--blur-text-color) !important;
}
#typora-source {
  font-family: var(--monospace) !important;
}
#typora-source .CodeMirror-linenumber {
  visibility: visible;
  font-family: var(--monospace);
}
#outline-content {
  padding: 0 0.5em;
  font: 400 0.8em var(--monospace);
  --header-indent: 2ch;
  --item-padding-h: 0.5em;
}
#outline-content li ul {
  padding-left: var(--header-indent);
}
#outline-content li .outline-item {
  padding: 0.5em var(--item-padding-h) !important;
  margin: 0;
  border: none;
  border-radius: 0.25em;
}
#outline-content li .outline-item .outline-expander {
  padding-right: 1ch;
}
#outline-content li .outline-item .outline-label {
  font: 1.25em var(--sans);
}
#outline-content li .outline-item .outline-label:hover {
  text-decoration: none;
}
#outline-content li .outline-item::before {
  display: inline-block;
  flex: none;
  padding: 0.3em 0.25em;
  position: absolute;
  text-align: right;
  opacity: 0;
  transition: all 3s;
}
#outline-content li .outline-item::before:hover {
  color: #fff;
  background: red;
  border-radius: 0.25em;
  z-index: 99;
}
#outline-content li .outline-item:hover::before,
#outline-content li .outline-item .outline-active::before {
  opacity: 0.75;
  transition: all 0s;
}
#outline-content li .outline-item:hover {
  background-color: inherit;
}
#outline-content li .outline-item .outline-active {
  color: var(--theme-color);
  font-weight: bold !important;
}
#outline-content .outline-h1 {
  counter-reset: h2;
  overflow: hidden;
}
#outline-content .outline-h1 > ul {
  padding-left: calc(var(--header-indent) + var(--item-padding-h));
}
#outline-content .outline-h2 {
  padding: 2px 0;
  counter-reset: h3;
  counter-increment: h2;
}
#outline-content .outline-h2::before {
  content: "";
  display: block;
  height: 0px;
  width: 200%;
  position: absolute;
  top: 0;
  left: -50%;
  border-top: 0.5px solid #0001;
}
#outline-content .outline-h2 > .outline-item::before {
  content: counter(h2);
  min-width: calc(var(--header-indent) * 1);
  left: calc(var(--header-indent) * -1);
  opacity: 0.75;
}
#outline-content .outline-h3 {
  counter-reset: h4;
  counter-increment: h3;
}
#outline-content .outline-h3 > .outline-item::before {
  content: counter(h2) "." counter(h3);
  min-width: calc(var(--header-indent) * 2);
  left: calc(var(--header-indent) * -2);
}
#outline-content .outline-h4 {
  counter-reset: h5;
  counter-increment: h4;
}
#outline-content .outline-h4 > .outline-item::before {
  content: counter(h2) "." counter(h3) "." counter(h4);
  min-width: calc(var(--header-indent) * 3);
  left: calc(var(--header-indent) * -3);
}
#outline-content .outline-h5 {
  counter-reset: h6;
  counter-increment: h5;
}
#outline-content .outline-h5 > .outline-item::before {
  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5);
  min-width: calc(var(--header-indent) * 4);
  left: calc(var(--header-indent) * -4);
}
#outline-content .outline-h6 {
  counter-increment: h6;
}
#outline-content .outline-h6 > .outline-item::before {
  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6);
  min-width: calc(var(--header-indent) * 5);
  left: calc(var(--header-indent) * -5);
}
.sidebar-footer {
  border-top-color: var(--color-light);
}
.pin-outline #typora-sidebar .sidebar-footer:not(.show-sidebar-footer-context) {
  opacity: 1;
  display: block;
}
#typora-sidebar.use-file-tree-style .sidebar-footer-item:not(#sidebar-new-file-btn) {
  opacity: 1;
}
.sidebar > h1 .app-name-link {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sidebar > h1 .app-name-link img {
  max-height: 3em;
}
.sidebar-nav {
  margin: 0;
}
.sidebar-nav > a {
  line-height: 1.25em;
}
.sidebar-nav.active {
  position: relative;
}
.sidebar-nav.active:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 100%;
  left: -50%;
  background: #ffffff;
  z-index: -1;
}
.sidebar-nav.active > a {
  border-color: var(--theme-color);
  color: var(--theme-color);
}
.sidebar-nav.active > a strong {
  font-weight: var(--font-weight-bold);
  color: var(--theme-color);
}
.markdown-section {
  padding: env(safe-area-inset-top) calc(2em + env(safe-area-inset-left) + env(safe-area-inset-right) + 1vw) env(safe-area-inset-bottom);
}
.sidebar-toggle .sidebar-toggle-button {
  zoom: 0.8;
  opacity: 0.5;
}