html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --text-color:#333333; --select-text-bg-color:#B5D6FC; --select-text-font-color:auto; --monospace:"Lucida Console",Consolas,"Courier",monospace; --title-bar-height:20px; }
.mac-os-11 { --title-bar-height:28px; }
html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0px; padding: 0px; height: auto; inset: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; tab-size: 4; }
iframe { margin: auto; }
a.url { word-break: break-all; }
a:active, a:hover { outline: 0px; }
.in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
#write { margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 36px; }
#write.first-line-indent p { text-indent: 2em; }
#write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0px; }
#write.first-line-indent li { margin-left: 2em; }
.for-image #write { padding-left: 8px; padding-right: 8px; }
body.typora-export { padding-left: 30px; padding-right: 30px; }
.typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap; }
.typora-export .task-list-item input { pointer-events: none; }
@media screen and (max-width: 500px) {
    body {
        margin: 0rem auto !important;
    }
    #write {
        margin: 0rem auto !important;
    }


    body.typora-export { padding-left: 0px; padding-right: 0px; }
    #write { padding-left: 20px; padding-right: 20px; }
    .CodeMirror-sizer { margin-left: 0px !important; }
    .CodeMirror-gutters { display: none !important; }
}
#write li > figure:last-child { margin-bottom: 0.5rem; }
#write ol, #write ul { position: relative; }
img { max-width: 100%; vertical-align: middle; image-orientation: from-image; }
button, input, select, textarea { color: inherit; font: inherit; }
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
*, ::after, ::before { box-sizing: border-box; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
p { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 4; }
p { orphans: 4; }
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
.hidden { display: none; }
.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
a { cursor: pointer; }
sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
figure > table { margin: 0px; }
tr { break-inside: avoid; break-after: auto; }
thead { display: table-header-group; }
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
table.md-table td { min-width: 32px; }
.CodeMirror-gutters { border-right: 0px; background-color: inherit; }
.CodeMirror-linenumber { user-select: none; }
.CodeMirror { text-align: left; }
.CodeMirror-placeholder { opacity: 0.3; }
.CodeMirror pre { padding: 0px 4px; }
.CodeMirror-lines { padding: 0px; }
div.hr:focus { cursor: none; }
#write pre { white-space: pre-wrap; }
#write.fences-no-line-wrapping pre { white-space: pre; }
#write pre.ty-contain-cm { white-space: normal; }
.CodeMirror-gutters { margin-right: 4px; }
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
.md-fences-adv-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
#write .md-fences.mock-cm { white-space: pre-wrap; }
.md-fences.md-fences-with-lineno { padding-left: 0px; }
#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
.CodeMirror-line, twitterwidget { break-inside: avoid; }
.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
.footnotes + .footnotes { margin-top: 0px; }
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
li div { padding-top: 0px; }
blockquote { margin: 1rem 0px; }
li .mathjax-block, li p { margin: 0.5rem 0px; }
li blockquote { margin: 1rem 0px; }
li { margin: 0px; position: relative; }
blockquote > :last-child { margin-bottom: 0px; }
blockquote > :first-child, li > :first-child { margin-top: 0px; }
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
#write .footnote-line { white-space: pre-wrap; }
@media print {
    body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; font-variant-ligatures: no-common-ligatures; }
    #write { margin-top: 0px; padding-top: 0px; border-color: transparent !important; }
    .typora-export * { -webkit-print-color-adjust: exact; }
    .typora-export #write { break-after: avoid; }
    .typora-export #write::after { height: 0px; }
    .is-mac table { break-inside: avoid; }
    .typora-export-show-outline .typora-export-sidebar { display: none; }
}
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
a img, img a { cursor: pointer; }
pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
#write.first-line-indent p > .md-image:only-child:not(.md-img-error) img { left: -2em; position: relative; }
p > .md-image:only-child { display: inline-block; width: 100%; }
#write .MathJax_Display { margin: 0.8em 0px 0px; }
.md-math-block { width: 100%; }
.md-math-block:not(:empty)::after { display: none; }
.MathJax_ref { fill: currentcolor; }
[contenteditable="true"]:active, [contenteditable="true"]:focus, [contenteditable="false"]:active, [contenteditable="false"]:focus { outline: 0px; box-shadow: none; }
.md-task-list-item { position: relative; list-style-type: none; }
.task-list-item.md-task-list-item { padding-left: 0px; }
.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none; }
.math { font-size: 1rem; }
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
.md-toc-content { position: relative; margin-left: 0px; }
.md-toc-content::after, .md-toc::after { display: none; }
.md-toc-item { display: block; color: rgb(65, 131, 196); }
.md-toc-item a { text-decoration: none; }
.md-toc-inner:hover { text-decoration: underline; }
.md-toc-inner { display: inline-block; cursor: pointer; }
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
@media screen and (max-width: 48em) {
    .md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
    .md-toc-h4 .md-toc-inner { margin-left: 5em; }
    .md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
    .md-toc-h6 .md-toc-inner { margin-left: 8em; }
}
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
.footnote-line a:not(.reversefootnote) { color: inherit; }
.md-attr { display: none; }
.md-fn-count::after { content: "."; }
code, pre, samp, tt { font-family: var(--monospace); }
kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
.md-comment { color: rgb(162, 127, 3); opacity: 0.6; font-family: var(--monospace); }
code { text-align: left; vertical-align: initial; }
a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
.md-diagram-panel > svg { max-width: 100%; }
[lang="flow"] svg, [lang="mermaid"] svg { max-width: 100%; height: auto; }
[lang="mermaid"] .node text { font-size: 1rem; }
table tr th { border-bottom: 0px; }
video { max-width: 100%; display: block; margin: 0px auto; }
iframe { max-width: 100%; width: 100%; border: none; }
.highlight td, .highlight tr { border: 0px; }
mark { background: rgb(255, 255, 0); color: rgb(0, 0, 0); }
.md-html-inline .md-plain, .md-html-inline strong, mark .md-inline-math, mark strong { color: inherit; }
.md-expand mark .md-meta { opacity: 0.3 !important; }
mark .md-meta { color: rgb(0, 0, 0); }
@media print {
    .typora-export h1, .typora-export h2, .typora-export h3, .typora-export h4, .typora-export h5, .typora-export h6 { break-inside: avoid; }
}
.md-diagram-panel .messageText { stroke: none !important; }
.md-diagram-panel .start-state { fill: var(--node-fill); }
.md-diagram-panel .edgeLabel rect { opacity: 1 !important; }
.md-fences.md-fences-math { font-size: 1em; }
.md-fences-advanced:not(.md-focus) { padding: 0px; white-space: nowrap; border: 0px; }
.md-fences-advanced:not(.md-focus) { background: inherit; }
.typora-export-show-outline .typora-export-content { max-width: 1440px; margin: auto; display: flex; flex-direction: row; }
.typora-export-sidebar { width: 300px; font-size: 0.8rem; margin-top: 80px; margin-right: 18px; }
.typora-export-show-outline #write { --webkit-flex:2; flex: 2 1 0%; }
.typora-export-sidebar .outline-content { position: fixed; top: 0px; max-height: 100%; overflow: hidden auto; padding-bottom: 30px; padding-top: 60px; width: 300px; }
@media screen and (max-width: 1024px) {
    .typora-export-sidebar, .typora-export-sidebar .outline-content { width: 240px; }
}
@media screen and (max-width: 800px) {
    .typora-export-sidebar { display: none; }
}
.outline-content li, .outline-content ul { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; list-style: none; }
.outline-content ul { margin-top: 0px; margin-bottom: 0px; }
.outline-content strong { font-weight: 400; }
.outline-expander { width: 1rem; height: 1.42857rem; position: relative; display: table-cell; vertical-align: middle; cursor: pointer; padding-left: 4px; }
.outline-expander::before { content: ""; position: relative; font-family: Ionicons; display: inline-block; font-size: 8px; vertical-align: middle; }
.outline-item { padding-top: 3px; padding-bottom: 3px; cursor: pointer; }
.outline-expander:hover::before { content: ""; }
.outline-h1 > .outline-item { padding-left: 0px; }
.outline-h2 > .outline-item { padding-left: 1em; }
.outline-h3 > .outline-item { padding-left: 2em; }
.outline-h4 > .outline-item { padding-left: 3em; }
.outline-h5 > .outline-item { padding-left: 4em; }
.outline-h6 > .outline-item { padding-left: 5em; }
.outline-label { cursor: pointer; display: table-cell; vertical-align: middle; text-decoration: none; color: inherit; }
.outline-label:hover { text-decoration: underline; }
.outline-item:hover { border-color: rgb(245, 245, 245); background-color: var(--item-hover-bg-color); }
.outline-item:hover { margin-left: -28px; margin-right: -28px; border-left: 28px solid transparent; border-right: 28px solid transparent; }
.outline-item-single .outline-expander::before, .outline-item-single .outline-expander:hover::before { display: none; }
.outline-item-open > .outline-item > .outline-expander::before { content: ""; }
.outline-children { display: none; }
.info-panel-tab-wrapper { display: none; }
.outline-item-open > .outline-children { display: block; }
.typora-export .outline-item { padding-top: 1px; padding-bottom: 1px; }
.typora-export .outline-item:hover { margin-right: -8px; border-right: 8px solid transparent; }
.typora-export .outline-expander::before { content: "+"; font-family: inherit; top: -1px; }
.typora-export .outline-expander:hover::before, .typora-export .outline-item-open > .outline-item > .outline-expander::before { content: "−"; }
.typora-export-collapse-outline .outline-children { display: none; }
.typora-export-collapse-outline .outline-item-open > .outline-children, .typora-export-no-collapse-outline .outline-children { display: block; }
.typora-export-no-collapse-outline .outline-expander::before { content: "" !important; }
.typora-export-show-outline .outline-item-active > .outline-item .outline-label { font-weight: 700; }
.md-inline-math-container mjx-container { zoom: 0.95; }




/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: initial;
}

/* 如果你的项目仅支持 IE9+ | Chrome | Firefox 等，推荐在 <html> 中添加 .borderbox 这个 class */
html.borderbox *,
html.borderbox *:before,
html.borderbox *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,
dl,
dt,
dd,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
    margin: 0;
    padding: 0;
}

/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
    display: block;
}

/* HTML5 媒体文件跟 img 保持一致 */
audio,
canvas,
video {
    display: inline-block;
}

/* 要注意表单元素并不继承父级 font 的问题 */
body,
button,
input,
select,
textarea {
    font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/* 去掉各Table cell 的边距并让其边重合 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 去除默认边框 */
fieldset,
img {
    border: 0;
}

/* 块/段落引用 */
blockquote {
    position: relative;
    font-weight: 400;
    padding-left: 1em;
    margin: 1em 3em 1em 2em;
}

@media only screen and (max-width: 640px) {
    blockquote {
        margin: 1em 0;
    }
}

/* Firefox 以外，元素没有下划线，需添加 */
acronym,
abbr {
    border-bottom: 1px dotted;
    font-variant: normal;
    text-decoration: none;
}

/* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
abbr {
    cursor: help;
}

/* 一致的 del 样式 */
del {
    text-decoration: line-through;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
    font-style: normal;
    font-weight: 400;
}


/* 对齐是排版最重要的因素, 别让什么都居中 */
caption,
th {
    text-align: left;
}

q:before,
q:after {
    content: '';
}

/* 统一上标和下标 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
}

:root sub,
:root sup {
    vertical-align: baseline;
    /* for ie9 and other modern browsers */
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* 让链接在 hover 状态下显示下划线 */
a {
    color: #1abc9c;
}

a:hover {
    text-decoration: underline;
}

/* 默认不显示下划线，保持页面简洁 */
ins,
a {
    text-decoration: none;
}

/* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
 * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
 * 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
 * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
 * 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
 */
u,
.typo-u {
    text-decoration: underline;
}

/* 标记，类似于手写的荧光笔的作用 */
mark {
    background: #fffdd1;
    padding: 2px;
    margin: 0 5px;
}

/* 代码片断 */
pre,
code,
pre tt {
    font-family: Courier, 'Courier New', monospace;
}

pre {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 1em 1.5em;
    display: block;
    -webkit-overflow-scrolling: touch;
}

/* 一致化 horizontal rule */
hr {
    border: none;
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: 0.8em;
    height: 10px;
}

/* 底部印刷体、版本等标记 */
small,
.typo-small,
    /* 图片说明 */
figcaption {
    font-size: 0.9em;
    color: #888;
}

strong,
b {
    font-weight: bold;
}

/* 可拖动文件添加拖动手势 */
[draggable] {
    cursor: move;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    font-weight: 100;
    line-height: 1.35;
}

/* Responsive images */
img {
    max-width: 100%;
}


/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: initial;
}

/* 如果你的项目仅支持 IE9+ | Chrome | Firefox 等，推荐在 <html> 中添加 .borderbox 这个 class */
html.borderbox *,
html.borderbox *:before,
html.borderbox *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,
dl,
dt,
dd,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
    margin: 0;
    padding: 0;
}

/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
    display: block;
}

/* HTML5 媒体文件跟 img 保持一致 */
audio,
canvas,
video {
    display: inline-block;
}

/* 要注意表单元素并不继承父级 font 的问题 */
body,
button,
input,
select,
textarea {
    font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/* 去掉各Table cell 的边距并让其边重合 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 去除默认边框 */
fieldset,
img {
    border: 0;
}

/* 块/段落引用 */
blockquote {
    position: relative;
    font-weight: 400;
    padding-left: 1em;
    margin: 1em 3em 1em 2em;
}

@media only screen and (max-width: 640px) {
    blockquote {
        margin: 1em 0;
    }
}

/* Firefox 以外，元素没有下划线，需添加 */
acronym,
abbr {
    border-bottom: 1px dotted;
    font-variant: normal;
    text-decoration: none;
}

/* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
abbr {
    cursor: help;
}

/* 一致的 del 样式 */
del {
    text-decoration: line-through;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
    font-style: normal;
    font-weight: 400;
}


/* 对齐是排版最重要的因素, 别让什么都居中 */
caption,
th {
    text-align: left;
}

q:before,
q:after {
    content: '';
}

/* 统一上标和下标 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
}

:root sub,
:root sup {
    vertical-align: baseline;
    /* for ie9 and other modern browsers */
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* 让链接在 hover 状态下显示下划线 */
a {
    color: #1abc9c;
}

a:hover {
    text-decoration: underline;
}

/* 默认不显示下划线，保持页面简洁 */
ins,
a {
    text-decoration: none;
}

/* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
 * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
 * 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
 * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
 * 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
 */
u,
.typo-u {
    text-decoration: underline;
}

/* 标记，类似于手写的荧光笔的作用 */
mark {
    background: #fffdd1;
    padding: 2px;
    margin: 0 5px;
}

/* 代码片断 */
pre,
code,
pre tt {
    font-family: Courier, 'Courier New', monospace;
}

pre {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 1em 1.5em;
    display: block;
    -webkit-overflow-scrolling: touch;
}

/* 一致化 horizontal rule */
hr {
    border: none;
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: 0.8em;
    height: 10px;
}

/* 底部印刷体、版本等标记 */
small,
.typo-small,
    /* 图片说明 */
figcaption {
    font-size: 0.9em;
    color: #888;
}

strong,
b {
    font-weight: bold;
}

/* 可拖动文件添加拖动手势 */
[draggable] {
    cursor: move;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    font-weight: 100;
    line-height: 1.35;
}

/* Responsive images */
img {
    max-width: 100%;
}
.active-tab-files .info-panel-tab,
.active-tab-outline .info-panel-tab {
    color: var(--active-file-text-color);
}

.file-list-item:hover {
    background: var(--item-hover-bg-color);
    color: var(--item-hover-text-color);
}

.file-node-content:hover {
    background: var(--active-file-bg-color);
    color: var(--active-file-text-color);
}

.ty-search-item-line {
    font-family: var(--font-family);
}

.ty-file-search-match-text {
    background: var(--bg-code-block);
}

/*搜索*/
#file-library-search-input {
    padding-left: 0.4em;
}

.dropdown-menu,
.context-menu.dropdown-menu>li>a:focus {
    background-color: var(--active-bg);
}

.context-menu.dropdown-menu>.active>a,
.context-menu.dropdown-menu>li>a:hover,
.menu-style-btn.active {
    color: var(--primary-color);
}

/* 源代码模式 */
#typora-source {
    background: var(--bg-color);
    color: var(--color-code);
    line-height: 1.5rem;
}

/* notification */
.ty-show-notification content,
.ty-show-notification content #typora-source {
    top: 0px;
}

#md-notification {
    border-radius: 5px;
    background: transparent !important;
}

#md-notification::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    z-index: -111;
    backdrop-filter: blur(5px);
    top: 0;
    width: 100%;
    min-height: 5rem;
    -webkit-font-smoothing: antialiased;
    transition: opacity 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

/* html-on-edit */
#write .md-rawblock-on-edit {
    box-shadow: var(--shadow);
}

.md-focus .md-rawblock-control:not(.md-rawblock-tooltip) {
    background: var(--focus-cont-bg);
}

/* focus mode */
.on-focus-mode #top-titlebar,
.on-focus-mode #top-titlebar * {
    background: var(--focus-cont-bg);
}

.on-focus-mode content,
.on-focus-mode #write {
    background: var(--focus-cont-bg);
}

.on-focus-mode .md-focus {
    padding: 1rem;
    box-shadow: var(--focus-shadow);
    background: var(--focus-para-bg);
    background-blend-mode: overlay;
    border-radius: 5px;
}

.megamenu-menu {
    box-shadow: 2px 2px 5px 0 #33333380;
}

.megamenu-menu-list li {
    line-height: 48px;
}

.megamenu-menu-list li a {
    line-height: 48px;
    height: 48px;
}

.megamenu-menu,
#megamenu-menu-list {
    background: #333;
}

.megamenu-menu-list li a.active,
.megamenu-menu-list:not(.saved) li a:hover {
    background: #00000033;
}

/* bugfix */
.megamenu-opened .megamenu-menu {
    left: -1px !important;
}

.megamenu-menu-list .saved #m-saved {
    display: block;
}

.megamenu-content {
    background: var(--bg-color) !important;
}

.megamenu-content h1,
.megamenu-content h2 {
    font-size: 2.5rem;
    margin: 2rem auto;
}

.megamenu-content img {
    box-shadow: none;
}

.megamenu-content .long-btn {
    text-align: left;
}

.megamenu-content #megamenu-section-about tr {
    background: var(--bg-write);
}

.megamenu-content #megamenu-section-theme #theme-preview-grid {
    max-width: 90%;
}

.megamenu-content #megamenu-section-theme #theme-preview-grid .theme-preview-div {
    width: 15rem;
    border: 4px solid #99999950;
}

.megamenu-content #megamenu-section-theme #theme-preview-grid .theme-preview-div:hover {
    border-color: #80aaff80;
}

.megamenu-content #megamenu-section-theme #theme-preview-grid .theme-preview-div .theme-preview-content {
    width: auto;
}

.megamenu-content #megamenu-section-theme #theme-preview-grid .theme-preview-div.active,
.megamenu-content #megamenu-section-theme #theme-preview-grid .theme-preview-div.active:hover {
    border-color: var(--primary-color);
}

.nav-group-item.active {
    background: var(--side-bar-bg-color) !important;
    color: var(--theme-color);
}

#top-titlebar,
#top-titlebar * {
    background-color: var(--bg-color);
    color: var(--color-text);
}

#top-titlebar {
    height: 28px;
    font-family: var(--font-family);
}

::-webkit-scrollbar-corner {
    display: none;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.05);
    background-clip: padding-box;
}

[draggable] {
    cursor: pointer;
}

.unibody-window,
.ty-preferences .windows,
uni-preference-panel,
.megamenu-content * :not(.fa) {
    font-family: var(--font-family);
}

#md-searchpanel.searchpanel-replace-mode {
    max-height: 80px;
}

.unibody-window #md-searchpanel .btn {
    line-height: 30px;
}

.cm-s-inner .CodeMirror-cursor {
    border-left: solid var(--color-link) !important;
}

#recent-file-panel tbody tr:nth-child(2n-1) {
    background-color: transparent;
}

.modal-content,
#ty-surpress-mode-warning-close-btn,
.btn {
    border-radius: 15px;
}

#ty-surpress-mode-warning-close-btn {
    background: var(--theme-color);

}

#ty-surpress-mode-warning-close-btn:hover {
    color: #fff;
}
/* animation */
#write td,
#megamenu-content td,
.file-list-item,
.megamenu-menu li,
.btn,
.long-btn {
    position: relative;
    overflow: hidden;
}

#write td:after,
#megamenu-content td:after,
.file-list-item:after,
.megamenu-menu li:after,
.btn:after,
.long-btn:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.3s, opacity 0.5s;
}

#write td:active:after,
#megamenu-content td:active:after,
.file-list-item:active:after,
.megamenu-menu li:active:after,
.btn:active:after,
.long-btn:active:after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

#typora-sidebar #outline-content .outline-h1>.outline-item,
#typora-sidebar .outline-title-wrapper,
#typora-sidebar .outline-item-wrapper.outline-h1>.outline-item,
#typora-sidebar .file-library-node,
#typora-sidebar .file-library-node .file-node-background,
#typora-sidebar #ty-sidebar-footer .sidebar-footer-item {
    transition: background 0.4s;
}

/* 大纲目录自动编号 */
.sidebar-content {
    counter-reset: h1;
}

.outline-h1 {
    counter-increment: h1;
    counter-reset: h2;
}

.outline-h2 {
    counter-increment: h2;
    counter-reset: h3;
}

.outline-h3 {
    counter-increment: h3;
    counter-reset: h4;
}

.outline-h4 {
    counter-increment: h4;
    counter-reset: h5;
}

.outline-h5 {
    counter-increment: h5;
    counter-reset: h6;
}

.outline-h1>.outline-item>.outline-label:before {
    content: "章"counter(h1) " ";
}

.outline-h2>.outline-item>.outline-label:before {
    content: "节"counter(h2) " ";
}

.outline-h3>.outline-item>.outline-label:before {
    content: counter(h3) " ";
}

.outline-h4>.outline-item>.outline-label:before {
    content: counter(h3) "."counter(h4) " ";
}

.outline-h5>.outline-item>.outline-label:before {
    content: counter(h3) "."counter(h4) "."counter(h5) " ";
}

.outline-h6>.outline-item>.outline-label:before {
    counter-increment: h6;
    content: counter(h3) "."counter(h4) "."counter(h5) "."counter(h6) " ";
}

@media screen and (max-width: 600px) {
    #write {
        /* padding: 2rem; */
        line-height: 1.5rem;
    }

    #write h1,
    #write h2 {
        font-size: 1.5rem;
        text-align: left;
    }

    #write h3,
    #write h4,
    #write h5,
    #write h6 {
        font-size: 1rem;
    }

    #write h1,
    #write h2,
    #write h3,
    #write h4,
    #write h5,
    #write h6 {
        margin: 1rem 0;
    }

    #write h1:before,
    #write h2:before,
    #write h3:before,
    #write h4:before,
    #write h5:before,
    #write h6:before {
        display: inline;
        border: none;
        top: 0;
        margin-right: 1rem;
        background: none;
        color: var(--theme-color);
    }

    #write h1::after,
    #write h2::after,
    #write h3::after,
    #write h4::after,
    #write h5::after,
    #write h6::after {
        border: none;
    }

    /* #write h1::before {
      content: "#";
    } */

    /* #write h2::before {
      content: "##";
    } */

    #write p+p {
        margin: 1rem auto;
    }

    #write pre.md-fences {
        padding: 1rem;
        box-shadow: none;
    }

    #write blockquote {
        background: var(--bg-quote);
        padding: 1rem;
        border-radius: 0;
        box-shadow: none;
    }

    #write blockquote blockquote {
        padding-left: 1rem;
        margin: 1rem auto;
    }

    #write blockquote em,
    #write blockquote strong,
    #write blockquote mark {
        font-family: var(--font-quota);
    }

    #write blockquote h6:first-child:before {
        left: -1rem;
    }

    #write blockquote h6:first-child span:first-child:before {
        left: -30px;
    }
}

@media screen and (max-width: 800px) {
    .md-toc {
        padding: 0;
        margin: 0 !important;
        max-width: 100%;
    }

    .md-toc::before {
        display: block;
        position: relative;
        left: 0 !important;
        margin-top: 4rem;
        margin-bottom: 0;
        padding: 0;
        background: none;
    }

    .md-toc .md-toc-content {
        top: 0;
        left: 0;
    }

    .md-toc .md-toc-content .md-toc-h1 {
        margin-top: 2rem;
    }
}

@media screen and (max-width: 1000px) {
    #write {
        margin: 0rem auto !important;
    }
    body {
        margin: 0rem auto !important;
    }

    footer.ty-footer {
        background: var(--color-bg);
        border-top: 1px solid var(--color-bg);
    }
}

@media screen and (min-width: 1300px) {
    #write {
        box-shadow: var(--base-shadow);
        border-radius: 5px;
        border: 1px solid rgba(0, 0, 0,0.2);
    }
}

@media print {
    html {
        margin: 0;
        padding: 1cm;
    }

    #write {
        margin: 0;
        padding: 0;
    }

    #write * {
        -webkit-text-stroke: 0px;
    }
}
@media print {

    html,
    body,
    content,
    #write {
        margin: 0;
        padding: 0;
    }

    #write * {
        -webkit-text-stroke: 0px;
    }
}
:root {
    --mermaid-sequence-numbers: on;
    -–mermaid-flowchart-curve: basis;
    --panel-border-color: var(--theme-color-weak) !important;
    --mermaid-font-family: var(--font-mono) !important;
}

.md-diagram-panel-preview * {
    font-family: var(--font-mono) !important;
}

/* 箭头 */
.arrowheadPath,
.marker {
    fill: var(--theme-color-weak) !important;
}

.edgePath .path,
.marker.cross,
line,
.flowchart-link {
    stroke: var(--theme-color-weak) !important;
}

/* 饼状图标题及图例 */
.pieTitleText,
.legend text {
    fill: var(--color-text) !important;
}

/* 箭头内文字背景 */
.edgeLabel,
.edgeLabel rect {
    background-color: #ffffff00 !important;
    fill: #ffffff00 !important;
}

/* 文本 */
.label,
.cluster-label {
    color: var(--color-text) !important;
}@import url();
@import url();
@import url();
@import url();
@import url();
@import url();
@import url();

:root {
    --theme-color: #ff0000;
    --theme-color-weak: #ff0000;
    --theme-color-weaker: #000000;
    --opt-theme-color: #6666ff;
    --opt-theme-color-weak: #9999ff;
    --opt-theme-color-weaker: #ccccff;
    --optt-theme-color: #66ff66;
    --optt-theme-color-weak: #99ffdd;
    --optt-theme-color-weaker: #ccffee;
    --color-em: #111;
    --color-text: #333;
    --color-weak: #555;
    --color-weakest: #777;
    --bg-color-5:#e8e8e8;
    --bg-color-4:#ededed;
    --bg-color-3:#f2f2f2;
    --bg-color-2:#f7f7f7;
    --bg-color-1:#fcfcfc;
    --shadow:#00000017 0px 3px 12px;
    --opt-shadow:#11111a0d 0px 4px 16px,#11111a0d 0px 8px 32px;
    --optt-shadow: #959da533 0px 8px 24px;

    --color-title: var(--color-em);
    --color-title-h1: var(--color-em);
    --color-title-h2: var(--color-em);
    --color-title-h3: var(--color-text);
    --color-title-h4: var(--color-text);
    --color-title-h5: var(--color-text);
    --color-title-h6: var(--color-text);

    --color-quote: var(--color-weak);
    --color-code: var(--color-weak);
    --color-link: var(--theme-color);
    --color-italic: var(--color-em);
    --color-strong: var(--color-em);
    --color-highlight: var(--color-text);
    --color-strike: var(--color-weakest);
    --color-footnote: var(--color-weakest);

    --thead-color: var(--color-em);
    --tbody-color: var(--color-text);
    --tbody-color-opt: var(--color-text);
    --color-thead-hover: var(--opt-theme-color);
    --color-tbody-hover: var(--opt-theme-color-weak);

    --link-hover-color: var(--opt-theme-color-weak);
    --link-hover-bg: none;

    /* background setting */
    --bg-contents: var(--bg-color-1);
    --bg-write: var(--bg-color-1);
    --bg-title: none;
    --bg-title-h1: none;
    --bg-title-h2: none;
    --bg-title-h3: none;
    --bg-title-h4: none;
    --bg-title-h5: none;
    --bg-title-h6: none;

    --bg-quote: var(--bg-color-4);
    --bg-code: var(--bg-color-3);
    --bg-code-block: var(--bg-color-3);
    --bg-link: none;
    --bg-italic: none;
    --bg-strong: none;
    --bg-highlight: #f2ff80;
    --bg-strike: none;
    --bg-footnote: none;

    --bg-thead: var(--bg-color-5);
    --bg-tbody-opt: var(--bg-color-3);
    --bg-tbody: var(--bg-color-1);
    --bg-thead-hover: var(--optt-theme-color-weak);
    --bg-tbody-hover: var(--optt-theme-color-weak);

    --focus-cont-bg:  var(--bg-color-3);
    --focus-para-bg:  var(--bg-color-1);

    --window-border: 1px solid var(--bg-color-3);
    --base-border: 1px solid var(--theme-color-weak);
    --base-borderl: 4px solid var(--theme-color-weak);
    --base-borderb: 1px dashed var(--theme-color-weak);
    --opt-borderb: 1px dashed var(--opt-theme-color);

    /* box-shadow */
    --text-shadow: none;
    --block-shadow: none;
    --img-shadow: var(--shadow);
    --focus-shadow: var(--opt-shadow);

    /* margin setting:top;right;bottom;left */
    --margin-h1: 2rem auto 1rem;
    --margin-h2: 2rem auto 1rem;
    --margin-h3: 2rem auto 1rem;
    --margin-h4: 2rem auto 1rem;
    --margin-h5: 2rem auto 1rem;
    --margin-h6: 2rem auto 1rem;

    --margin-text: 0.5rem auto;
    --margin-block: 1rem auto;

    /* padding-setting */
    --padding-text: 1px 4px;
    --padding-block: 1rem;

    --base-margin: 1rem auto;
    --base-padding: 1px 4px;
    --opt-padding: 1rem;

    --font-weight: 400;
    --font-size: 1rem;
    --line-height: 1.75rem;
    --font-family: var(--font-hei);

    --text-font: 300 1rem/1.5rem var(--font-hei);
    --text-font-size: 1rem;
    --font-title: var(--font-hei);
    --font-title-h1: 300 3rem/4.5rem var(--font-title);
    --font-title-h2: 300 2rem/3rem var(--font-title);
    --font-title-h3: 600 1.75rem/2.625rem var(--font-title);
    --font-title-h4: 600 1.5rem/2.25rem var(--font-hei);
    --font-title-h5: 600 1.25rem/1.875rem var(--font-hei);
    --font-title-h6: 600 1.25rem/1.875rem var(--font-hei);

    --font-quote: 400 1.2rem/1.8rem var(--font-kai);
    --font-code: 300 0.9rem/1.35rem var(--font-mono);
    --font-footnote: 400 1.1rem/1.65rem var(--font-kai);

    --font-hei: "LXGWWenKai", "Raleway Medium", "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
    --font-song: "Lora", Georgia, "Nimbus Roman No9 L", "Noto Serif CJK SC", "Songti SC", "Source Han Serif SC", "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;
    --font-kai: "HYZhengYuan", Baskerville, Georgia, "Liberation Serif", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, DFKai-SB, "TW\-Kai", curve, serif;
    --font-mono: "Cascadia code", Monaco, "Deja Vu Sans Mono", Consolas, "Lucida Console", "Andale Mono", Courier,"Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
    --monospace: var(--font-mono);

    --mermaid-alt-font-family: var(--base-font) !important;
    --mermaid-font-family: var(--base-font) !important;
    --md-char-color: var(--theme-color);
    --meta-content-color: var(--theme-color);

    --blur-text-color: hsl(0, 100%, 90%);
    --active-file-bg-color: var(--bg-color-5);
    /* 文件列表 当前文件激活 背景色*/
    --active-file-text-color: var(--theme-color);
    --active-file-border-color: var(--theme-color);
    /* 树形结构下文件激活边框色 */
    --side-bar-bg-color: var(--bg-color-3);
    /*文件 大纲 侧边栏 背景色*/
    --item-hover-bg-color: var(--bg-color-5);
    /* 打开文文件夹、正文菜单、最近使用 hover 效果 */
    --item-hover-text-color: var(--theme-color);
    --primary-color: var(--opt-theme-color);
    /* color of primary buttons */
    --primary-btn-border-color: var(--opt-theme-color);
    --primary-btn-text-color: var(--theme-color);
    --select-text-bg-color: var(--theme-color-weaker);
    --select-text-font-color: hsl(0, 0%, 100%);
    --active-bg: var(--bg-color-3);
    /* 右键菜单背景色 */
    --window-border: var(--bg-color-3);
    --control-text-color: var(--color-title);
    --control-text-hover-color: var(--color-text);
    /* 侧边栏默认字体颜色 */
    --rawblock-edit-panel-bd:var(--bg-color-5);
}

html,
body,
content,
#write {
    font-size: 16px;
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    font-family: var(--font-family);
    line-height: var(--line-height);
    background: var(--bg-contents);
    color: var(--color-text);
    text-align: justify;
}

content {
    min-width: 400px;
}

#write {
    background: var(--bg-write);
    max-width: 914px;
    /* min-width: 400px; */
    -webkit-font-smoothing: antialiased;
    min-height: calc(100vh - 6em);
    margin: 2rem auto;
    padding: 2rem;
}

#write * {
    -webkit-text-stroke: 0.25px;
}

/* title setting */

#write h1 *,
#write h2 *,
#write h3 *,
#write h4 *,
#write h5 *,
#write h6 * {
    color: var(--color-title) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

#write h1,
#write h2 {
    text-transform: uppercase;
}

#write h1 {
    background: var(--bg-title-h1);
    color: var(--color-title-h1);
    font: var(--font-title-h1);
    /* margin: var(--margin-h1); */
}

#write h2 {
    background: var(--bg-title-h2);
    color: var(--color-title-h2);
    font: var(--font-title-h2);
    margin: var(--margin-h2);
}

#write h3 {
    background: var(--bg-title-h3);
    color: var(--color-title-h3);
    font: var(--font-title-h3);
    margin: var(--margin-h3);
}

#write h4 {
    background: var(--bg-title-h4);
    color: var(--color-title-h4);
    font: var(--font-title-h4);
    margin: var(--margin-h4);
}

#write h5 {
    background: var(--bg-title-h5);
    color: var(--color-title-h5);
    font: var(--font-title-h5);
    margin: var(--margin-h5);
}

#write h6 {
    background: var(--bg-title-h6);
    color: var(--color-title-h6);
    font: var(--font-title-h6);
    margin: var(--margin-h6);
}

#write h1::after {
    content: "";
    display: block;
    border-bottom: 1px solid var(--theme-color-weak);
    position: relative;
    top: 1rem;
    width: 100%;
}

#write h2 span.md-plain:hover {
    background: linear-gradient(to bottom, transparent 60%, hsl(0, 100%, 95%) 0) no-repeat;
}

h3,
h4,
h5,
h6 {
    position: relative;
}

#write h3:hover::before {
    content: "H3";
}

#write h4:hover::before {
    content: "H4";
}

#write h5:hover::before {
    content: "H5";
}

#write h6:hover::before {
    content: "H6";
}

#write h3:hover::before,
#write h4:hover::before,
#write h5:hover::before,
#write h6:hover::before {
    position: absolute;
    left: -2rem;
    font-size: 0.9rem !important;
    text-align: center;
    vertical-align: middle;
    margin-right: 0.5rem;
    border-radius: 5px;
    color: var(--theme-color);
}


/* block-element setting */

blockquote,
pre.md-fences,
figure>table,
#write img {
    margin: var(--margin-block);
    padding: var(--padding-block);
    border-radius: 5px;
}

p+p {
    margin: var(--margin-text);
    line-height: var(--line-height);
}

ul,
ol {
    margin: var(--base-margin);
    padding-left: 2rem;
}

/* blockquote setting */

blockquote {
    background: var(--bg-quote);
    font: var(--font-quote);
    color: var(--color-quote);
    font-size: 1.2rem;
    box-shadow: var(--block-shadow);
    border: none;
}

blockquote blockquote {
    padding: 0;
    padding-left: 1rem;
    border-left: var(--base-borderl);
    border-radius: 0;
    box-shadow: none;
}

blockquote pre.md-fences {
    box-shadow: none;
}

blockquote p {
    font: var(--font-quote);
    color: var(--color-quote);
    line-height: var(--line-height);
}

blockquote h6 {
    padding-left: 1rem;
    margin: 1rem auto !important;
}

blockquote h6:before {
    top: -15px;
    content: "" !important;
    position: absolute;
    width: 4px;
    height: 60px;
    background: var(--theme-color);
    left: -15px;
}

blockquote h6 span:first-child:before {
    content: "!";
    position: absolute;
    left: -25px;
    top: 2px;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    background: var(--theme-color);
    display: block;
    text-align: center;
    font-family: Poppins, sans-serif;
    color: white;
    font-size: large;
    font-weight: 600;
}

blockquote h6 span[md-inline="strong"]:first-child:before {
    content: "i";
    z-index: 1;
    background: var(--opt-theme-color);
}

/* list setting */

ul li::marker,
ol li::marker {
    color: var(--theme-color);
}

ul {
    list-style: disc;
}

ul ul {
    list-style: circle;
}

ol {
    list-style: decimal-leading-zero;
}

ol ol {
    list-style: lower-roman;
}

ol ol,
ul ul,
ol ul,
ul ol {
    margin-top: 0.5rem;
}

/* todo list */

.task-list-item input:before {
    content: "";
    position: relative;
    top: -1px;
    left: -5px;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    border: var(--base-border);
    background-color: var(--bg-write);
    margin-left: 0;
    margin-top: -0.5rem;
    border-radius: 50%;
    -webkit-transition: background-color 200ms ease-in-out;
    transition: background-color 200ms ease-in-out;
}

.task-list-item input::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -2px;
    width: 1rem;
    height: 0.5rem;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
    -webkit-transition: opacity 200ms ease-in-out;
    transition: opacity 200ms ease-in-out;
}

.task-list-item input:checked::before {
    background: var(--theme-color) !important;
    border: none;
}

.task-list-item input:checked::after {
    opacity: 1;
}

.task-list-item {
    list-style: none;
}

.task-list-item p {
    text-indent: 5px !important;
}

.task-list-item input:checked:before,
.task-list-item input[checked]:before {
    content: " ";
}

.md-task-list-item.task-list-done {
    text-decoration: line-through;
    color: var(--color-footnote);
}

blockquote .task-list-item input::before {
    top: -3px;
}

#write img {
    padding: 0;
    box-shadow: var(--img-shadow);
}

img[alt|="no-shadow"] {
    box-shadow: none !important;
}

img[alt|="normal"] {
    margin: 0 !important;
    box-shadow: none !important;
}

hr {
    border: none;
    border-bottom: var(--base-border);
    margin: 3rem auto;
    height: 1px;
    width: 50%;
}

hr .pb {
    page-break-after: always;
    border-bottom: none;
}

/* inline-element setting */

code,
mark,
kbd,
samp,
tt,
var,
#write a,
strong,
em {
    padding: var(--padding-text);
}

a,
ins {
    background: var(--bg-link);
    color: var(--color-link);
}

#write a,
#write ins {
    text-decoration: none;
    border-bottom: var(--base-borderb);
}

#write a:hover,
#write ins:hover {
    border-bottom-color: var(--color-link);
    color: var(--link-hover-color);
    text-decoration: none;
}

#write strong {
    background: var(--bg-strong);
    color: var(--color-strong);
}

#write em {
    background: var(--bg-italic);
    color: var(--color-italic);
    border-bottom: var(--opt-borderb);
}

em,
strong,
em strong,
strong em {
    font-size: inherit;
}

em strong,
strong em {
    font-weight: 800 !important;
}

del {
    color: var(--color-strike);
    background: var(--bg-strike);
}

#write mark {
    background: var(--bg-highlight);
    color: var(--color-highlight);
}

/* code & code-block setting */

#write pre.md-meta-block,
#write pre.md-fences,
code,
kbd,
samp,
tt,
var {
    font: var(--font-code);
    background: var(--bg-code);
    color: var(--color-code);
    border-radius: 5px;
}

/* 代码块下的标题颜色过深。修改为浅蓝 */
.cm-s-inner .cm-header,
.cm-s-inner.cm-header {
    color: var(--opt-theme-color-weak);
}

.cm-s-inner .CodeMirror-cursors,
.CodeMirror div.CodeMirror-cursor {
    background-color: var(--opt-theme-color) !important;
    border-left: 2px solid var(--opt-theme-color) !important;
    width: 2px !important;
}

/* code-block setting */

#write pre.md-meta-block,
#write pre.md-fences {
    font: var(--font-code);
    border-radius: 5px;
    background: var(--bg-code-block);
    color: var(--color-code);
}

pre.md-meta-block {
    min-height: 30px;
    position: sticky;
    margin-top: -1.5rem;
    margin-bottom: 2rem;
}

pre {
    white-space: pre;
}

pre.md-fences {
    display: block;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--block-shadow);
    white-space: pre;
}

code {
    background-color: var(--bg-code);
    color: var(--color-code);
}

details {
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
    transition: all 0.2s ease;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 1rem;
    background: var(--bg-quote);
}

/* table setting */

figure.md-table-fig {
    margin-top: 28px;
}

figure>table {
    width: 98%;
}

table th,
table td {
    padding: 0.5rem 1rem;
}

table thead tr {
    background: var(--bg-thead) !important;
}

table th {
    font-weight: 800;
}

table thead tr:hover {
    background: var(--bg-thead-hover) !important;
    color: var(--color-thead-hover);
}

table caption {
    border-bottom: none;
}

table tr {
    background: var(--bg-tbody);
    color: var(--tbody-color);
    border: 1px solid var(--bg-thead);
}

table tr:nth-child(2n) {
    background: var(--bg-tbody-opt);
    color: var(--tbody-color-opt);
}

table tr:hover {
    background: var(--bg-tbody-hover);
    color: var(--color-tbody-hover);
}

table tr,
#write table td,
#write table th {
    border: 1px solid var(--theme-color-weak);
}

/*表格大小设置输入框(数字居中)*/
#write .md-grid-board-wrap input {
    text-align: center !important;
}

/*表格大小设置面板中的方框*/
#write .md-grid-board.md-reset>tbody>tr>td>a {
    border: 1px solid;
    margin: 0px;
}

sup.md-footnote {
    padding: var(--base-padding);
    color: var(--color-footnote);
    cursor: pointer;
    font-size: 0.75rem;
}

.md-meta {
    font-family: var(--font-code);
    color: var(--md-char-color);
}

.md-expand .md-meta.md-before,
.md-expand .md-meta.md-after {
    padding-left: 5px;
    padding-right: 5px;
}

.md-image>.md-meta {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: var(--meta-content-color);
}

.md-image>.md-meta:first-of-type:before {
    padding-left: 4px;
}

.md-image>img {
    margin-top: 2px;
}

@import url();
@import url();

:root {
    --theme-color: #965221;
    --theme-color-weak: #1dbbc9;
    --color-text: #000;
    --text-color: var(--color-text);
    --color-em: #000;
    --color-strong: #000;
    --color-weak: #111;
    --color-weakest: #333;
    --color-title: var(--color-em);
    --color-title-h1: var(--color-em);
    --color-title-h2: var(--color-em);
    --color-title-h3: var(--color-em);
    --color-title-h4: var(--color-em);
    --color-title-h5: var(--color-em);
    --color-title-h6: var(--color-em);
    --color-quote: var(--color-weak);
    --color-code: var(--color-weak);
    --color-link: var(--color-weak);
    --color-italic: var(--color-em);
    --color-strong: var(--color-strong);
    --color-highlight: var(--color-text);
    --color-strike: var(--color-weakest);
    --color-footnote: var(--color-weakest);
    --thead-color: var(--color-em);
    --tbody-color-opt: var(--color-text);
    --tbody-color: var(--color-text);
    --color-thead-hover: var(--theme-color);
    --color-tbody-hover: var(--theme-color);
    --link-hover-color: #cc853d;
    --link-hover-bg: none;
    /* background setting */
    --bg-contents: #fff;
    --bg-write: #fff;
    --bg-color: var(--bg-contents);
    --bg-title: none;
    --bg-title-h1: none;
    --bg-title-h2: none;
    --bg-title-h3: none;
    --bg-title-h4: none;
    --bg-title-h5: none;
    --bg-title-h6: none;
    --bg-quote: #fff;
    --bg-code: #fff;
    --bg-code-block: #fff;
    --bg-link: none;
    --bg-italic: none;
    --bg-strong: none;
    --bg-highlight: #f2ff80;
    --bg-strike: none;
    --bg-footnote: none;
    --bg-thead: #fff;
    --bg-tbody-opt: #f6f7fa;
    --bg-tbody: #fff;
    --bg-thead-hover: var(--bg-contents);
    --bg-tbody-hover: var(--bg-contents);
    --focus-cont-bg: hsl(0, 0%, 95%);
    --focus-para-bg: hsl(0, 0%, 100%);
    --window-border: 1px solid #333;
    --base-border: 1px solid #333;
    --base-borderl: 4px solid var(--theme-color);
    --base-borderb: 1px dashed var(--theme-color);
    --opt-borderb: 1px dashed var(--theme-color);
    /* box-shadow */
    --text-shadow: none;
    --block-shadow: none;
    --img-shadow: none;
    --block-shadow-opt: var(--block-shadow);
    --block-shadow-weak: none;
    --block-shadow-strong: none;
    /* margin setting:top;right;bottom;left */
    --margin-h1: 2rem auto 1rem;
    --margin-h2: 2rem auto 1rem;
    --margin-h3: 1.5rem auto 1rem;
    --margin-h4: 1.5rem auto 1rem;
    --margin-h5: 1.5rem auto 1rem;
    --margin-h6: 1.5rem auto 1rem;
    --margin-text: 0.5rem 0rem;
    --margin-block: 1rem auto;
    /* padding-setting */
    --padding-text: 0px;
    --padding-block: 0.5rem;
    --base-margin: 0.5rem auto;
    --base-padding: 0px;
    --opt-padding: 0.5rem;
    --font-weight: 400;
    --font-size: 0.95rem;
    --kai-size: 1.05rem;
    --ol-size: 0.95rem;
    --line-height: 2rem;
    --font-title-h1: 900 2.2rem/3.6rem "SubTitle";
    --font-title-h2: 800 1.8rem/3.6rem var(--font-title-cn);
    --font-title-h3: 600 1.4rem/2.8rem var(--font-title-cn);
    --font-title-h4: 400 1.3rem/2.6rem var(--font-hei-cn);
    --font-title-h5: 600 1.2rem/2.4rem var(--font-hei-cn);
    --font-title-h6: 600 1.2rem/2.4rem var(--font-hei-cn);
    --font-quote: 400 1.05rem/2.1rem var(--font-quota-cn);
    --font-code: 400 0.95rem var(--font-mono);
    --font-footnote: 400 0.875rem/1.75rem var(--font-kai-cn);
    --font-title-cn: var(--font-song-cn);
    --font-title-jp: var(--font-song-jp);
    --text-font-cn: var(--font-song-cn);
    --text-font-jp: var(--font-song-jp);
    --ol-font-cn: var(--font-song-cn);
    --ol-font-jp: var(--font-song-jp);
    --ul-font-cn: var(--font-song-cn);
    --ul-font-jp: var(--font-song-jp);
    --font-quota-cn: var(--font-kai-cn);
    --font-quota-jp: var(--font-kai-jp);
    --font-hei-cn: "Poppins", "Noto Sans CJK SC", sans-serif;
    --font-hei-jp: "Poppins", "Noto Sans CJK JP", sans-serif;
    --font-song-cn: "LXGWWenKai", "Noto Serif CJK SC", serif;
    --font-song-jp: "Sabon Next LT Pro", "Yu Mincho", serif;
    --font-kai-cn: "HYZhengYuan", "TW-Kai", serif;
    --font-kai-jp: "HYZhengYuan", "EPSON 教科書体Ｍ", "TW-Kai", "kaiti", serif;
    --font-mono: "Ubuntu", "975 朦胧黑体", sans-serif;
    --font-fangsong: "Courier New", "方正仿宋_GBK","仿宋";
    --bookmark: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M4%204.5C4%203.11929%205.11929%202%206.5%202H13.5C14.8807%202%2016%203.11929%2016%204.5V17.5C16%2017.6881%2015.8945%2017.8602%2015.7269%2017.9456C15.5593%2018.0309%2015.358%2018.015%2015.2059%2017.9044L10%2014.1183L4.79409%2017.9044C4.64199%2018.015%204.4407%2018.0309%204.27311%2017.9456C4.10553%2017.8602%204%2017.6881%204%2017.5V4.5Z%22%20fill%3D%22%23311b92%22/%3E%0A%3C/svg%3E%0A");
    --light-bulb: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M13.073%2015L12.6891%2016.6051C12.5048%2017.3763%2011.8236%2017.935%2011.0181%2017.9947L10.8748%2018H9.12546C8.30655%2018%207.59%2017.4839%207.34866%2016.7385L7.31108%2016.6047L6.928%2015H13.073Z%22%20fill%3D%22%23b0791b%22/%3E%0A%3Cpath%20d%3D%22M10%202C13.3137%202%2016%204.59693%2016%207.80041C16%209.47737%2015.2546%2011.0164%2013.7961%2012.3942C13.7324%2012.4544%2013.6831%2012.5269%2013.6512%2012.6065L13.6251%2012.6883L13.311%2014H10.5002V9.49707C10.5002%209.22093%2010.2764%208.99707%2010.0002%208.99707C9.7241%208.99707%209.50024%209.22093%209.50024%209.49707V14H6.689L6.37626%2012.6886C6.34955%2012.5766%206.29016%2012.4745%206.20516%2012.3942C4.8153%2011.0819%204.07265%209.62354%204.00507%208.03903L4%207.80041L4.00321%207.60894C4.1077%204.49409%206.75257%202%2010%202ZM9.5%206.50238V7.50391C9.5%207.78005%209.72386%208.00391%2010%208.00391C10.2761%208.00391%2010.5%207.78005%2010.5%207.50391V6.50238C10.5%206.22624%2010.2761%206.00238%2010%206.00238C9.72386%206.00238%209.5%206.22624%209.5%206.50238ZM12.8506%207.44332C12.6553%207.24806%2012.3388%207.24806%2012.1435%207.44332L11.4353%208.15151C11.2401%208.34677%2011.2401%208.66335%2011.4353%208.85861C11.6306%209.05388%2011.9472%209.05388%2012.1424%208.85861L12.8506%208.15043C13.0459%207.95517%2013.0459%207.63858%2012.8506%207.44332ZM7.8521%207.44332C7.65684%207.24806%207.34026%207.24806%207.145%207.44332C6.94973%207.63858%206.94973%207.95517%207.145%208.15043L7.85318%208.85861C8.04844%209.05388%208.36503%209.05388%208.56029%208.85861C8.75555%208.66335%208.75555%208.34677%208.56029%208.15151L7.8521%207.44332Z%22%20fill%3D%22%23b0791b%22/%3E%0A%3C/svg%3E%0A");
    --star: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M9.10433%202.89874C9.47114%202.15549%2010.531%202.1555%2010.8978%202.89874L12.8282%206.81024L17.1448%207.43748C17.9651%207.55666%2018.2926%208.56464%2017.699%209.14317L14.5755%2012.1878L15.3129%2016.487C15.453%2017.3039%2014.5956%2017.9269%2013.8619%2017.5412L10.0011%2015.5114L6.14018%2017.5412C5.40655%2017.9269%204.54913%2017.3039%204.68924%2016.487L5.4266%2012.1878L2.30308%209.14317C1.70956%208.56463%202.03708%207.55666%202.8573%207.43748L7.17389%206.81024L9.10433%202.89874Z%22%20fill%3D%22%23044289%22/%3E%0A%3C/svg%3E%0A");
    --warn: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M8.68569%202.85232L2.12696%2014.7773C1.57714%2015.777%202.30038%2017.0002%203.44129%2017.0002H16.5587C17.6996%2017.0002%2018.4229%2015.777%2017.8731%2014.7773L11.3143%202.85232C10.7444%201.81615%209.25558%201.81616%208.68569%202.85232ZM10%206.75016C10.4142%206.75016%2010.75%207.08595%2010.75%207.50016V11.5002C10.75%2011.9144%2010.4142%2012.2502%2010%2012.2502C9.58579%2012.2502%209.25%2011.9144%209.25%2011.5002V7.50016C9.25%207.08595%209.58579%206.75016%2010%206.75016ZM10.75%2013.7502C10.75%2014.1644%2010.4142%2014.5002%2010%2014.5002C9.58579%2014.5002%209.25%2014.1644%209.25%2013.7502C9.25%2013.3359%209.58579%2013.0002%2010%2013.0002C10.4142%2013.0002%2010.75%2013.3359%2010.75%2013.7502Z%22%20fill%3D%22%238a2a0d%22/%3E%0A%3C/svg%3E%0A");
    --note: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M14%203C15.5977%203%2016.9037%204.24892%2016.9949%205.82373L17%206V10H13L12.8237%2010.0051C11.3072%2010.093%2010.093%2011.3072%2010.0051%2012.8237L10%2013V17H6C4.40232%2017%203.09634%2015.7511%203.00509%2014.1763L3%2014V6C3%204.40232%204.24892%203.09634%205.82373%203.00509L6%203H14ZM16.9007%2011.001C16.8232%2011.2376%2016.7018%2011.459%2016.5416%2011.6528L16.4142%2011.7929L11.7929%2016.4142C11.5687%2016.6384%2011.2968%2016.8039%2011.001%2016.9007L11%2013L11.0055%2012.8507C11.078%2011.8676%2011.8612%2011.0821%2012.8433%2011.006L13%2011L16.9007%2011.001Z%22%20fill%3D%22%23004d40%22/%3E%0A%3C/svg%3E%0A");
}

* {
    -webkit-font-smoothing: "auto";
    -webkit-text-stroke-width: calc(calc(40px - 1em) / 170);
}

html,
body {
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    font-family: var(--text-font-cn);
    line-height: var(--line-height);
    background: var(--bg-contents);
    color: var(--color-text);
}

body {
    background: var(--bg-write);
    -webkit-font-smoothing: antialiased;
    margin: 2rem auto;
    /* padding: 2rem; */
}

h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 * {
    color: var(--color-title) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

h1 {
    background: var(--bg-title-h1);
    color: var(--color-title-h1);
    font: var(--font-title-h1);
    margin: var(--margin-h1);
    text-transform: capitalize;
}

h1::after {
    content: "";
    display: block;
    border-bottom: 1px solid var(--theme-color);
    position: relative;
    top: 1rem;
    width: 50%;
}

h2 {
    background: var(--bg-title-h2);
    color: var(--color-title-h2);
    font: var(--font-title-h2);
    margin: var(--margin-h2);
    display: table;
    background: linear-gradient(to bottom, transparent 60%, hsl(0, 59%, 74%) 0) no-repeat;
    text-transform: capitalize;
}

h3 {
    background: var(--bg-title-h3);
    color: var(--color-title-h3);
    font: var(--font-title-h3);
    margin: var(--margin-h3);
}

h3:hover::before {
    content: "H3";
}

h4 {
    background: var(--bg-title-h4);
    color: var(--color-title-h4);
    font: var(--font-title-h4);
    margin: var(--margin-h4);
    border-left: var(--base-borderl);
    padding-left: 1rem;
}

h4:hover::before {
    content: "H4";
}

h5 {
    background: var(--bg-title-h5);
    color: var(--color-title-h5);
    font: var(--font-title-h5);
    margin: var(--margin-h5);
}

h5:hover::before {
    content: "H5";
}

h6 {
    background: var(--bg-title-h6);
    color: var(--color-title-h6);
    font: var(--font-title-h6);
    margin: var(--margin-h6);
}

h3,
h4,
h5,
h6 {
    position: relative;
}

h3:hover::before,
h4:hover::before,
h5:hover::before,
h6:hover::before {
    position: absolute;
    left: -2rem;
    font-size: 0.9rem !important;
    text-align: center;
    vertical-align: middle;
    margin-right: 0.5rem;
    border-radius: 5px;
    color: var(--theme-color);
}

blockquote,
pre,
table,
img {
    margin: var(--margin-block);
    padding: var(--padding-block);
    border-radius: 5px;
}

p {
    margin: var(--margin-text);
    line-height: var(--line-height);
}

p:not(li p) {
    text-indent: 2rem;
}

blockquote {
    background: var(--bg-quote);
    font: var(--font-quote);
    font-size: var(--kai-size);
    color: var(--color-quote);
    box-shadow: var(--block-shadow);
    border: var(--opt-borderb);
    counter-reset: section;
}

blockquote blockquote {
    padding: 0;
    border: none;
    padding-left: 1rem;
    border-left: var(--base-borderl);
    border-radius: 0;
    box-shadow: none;
}

blockquote p {
    margin: 0.5rem 0;
}

blockquote ul {
    font-size: 1rem;
}

blockquote li {
    font-size: var(--text-font-size);
}

blockquote em {
    font-family: var(--font-kai-jp);
}

blockquote h1,
blockquote h2,
blockquote h3,
blockquote h4,
blockquote h5 {
    background: var(--bg-title-h6);
    color: var(--color-title-h6);
    font: var(--font-title-h6);
    font-family: var(--font-hei-cn);
    font-weight: bold;
    margin: var(--margin-h6);
    text-align: center;
    margin: 0.5rem auto !important;
    color: var(--theme-color);
    border: none;
}

blockquote h2::before,
blockquote h3::before,
blockquote h4::before,
blockquote h5::before {
    padding-right: 1rem;
    background-repeat: no-repeat;
    vertical-align: middle;
    content: " ";
    width: 20px;
    height: 20px;
    display: inline-block;
}

blockquote h1::after {
    border-bottom: none;
}

blockquote h2 {
    color: #b0791b;
}

blockquote h2::before {
    background-image: var(--light-bulb);
}

blockquote h3 {
    color: #311b92;
}

blockquote h3::before {
    background-image: var(--bookmark);
}

blockquote h4 {
    color: #044289;
}

blockquote h4::before {
    background-image: var(--star);
}

blockquote h5 {
    color: #004d40;
}

blockquote h5::before {
    background-image: var(--note);
}

blockquote h6 {
    font-family: "975 朦胧黑体";
    font-size: x-large;
    font-weight: 400;
}

blockquote h6::before {
    background: none;
    position: relative;
    counter-increment: section;
    content: counter(section)!important;
    padding-right: 2rem;
    font-family: "Atilla";
    font-size: xx-large;
    left: 0;
    top: 0;
}

ul li::marker,
ol li::marker {
    font-variant-numeric: tabular-nums;
    font-variant-numeric: slashed-zero;
    color: var(--theme-color);
}

ul {
    list-style: disc;
}

ul li {
    font-family: var(--ul-font-cn);
}

ul li::marker {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14pt;
}

ul em {
    font-family: var(--text-font-jp);
}

ul img {
    padding: 0;
    box-shadow: var(--img-shadow);
}

ul ul {
    list-style: square;
}

ul ul ul {
    list-style: circle;
}

ol {
    list-style: decimal-leading-zero;
}

ol em {
    font-family: var(--ol-font-jp);
}

ol ol {
    list-style: lower-latin;
}

ol ol ol {
    list-style: lower-roman;
}

ol li,
ul ol li {
    font-family: var(--ol-font-cn);
    font-size: var(--ol-size);
}

img {
    margin: 0.5rem auto;
}

p img {
    margin-left: -2rem;
}

img[alt~="no-shadow"] {
    box-shadow: none !important;
}

img[alt~="normal"] {
    margin: 0 !important;
    box-shadow: none !important;
}

img[alt~="25%"] {
    height: 25%;
    width: 25%;
}

img[alt~="50%"] {
    height: 50%;
    width: 50%;
}

img[alt~="75%"] {
    height: 75%;
    width: 75%;
}

img[alt~="85%"] {
    height: 85%;
    width: 85%;
}

img[alt~="95%"] {
    height: 95%;
    width: 95%;
}

figure {
    text-align: center;
}

body {
    counter-reset: section;
}

h2 {
    counter-increment: section;
    counter-reset: subsection;
}

figcaption {
    font-family: var(--font-fangsong);
    text-align: center;
    counter-increment: subsection;
}

figcaption:before {
    content: "Section "counter(section) "."counter(subsection) " ";
}

hr {
    border: none;
    border-bottom: var(--base-border);
    margin: 3rem auto;
    height: 1px;
    width: 50%;
}

hr.pb {
    border-bottom: none;
    page-break-after: always;
}

code,
mark,
kbd,
samp,
tt,
var,
a,
strong,
em {
    padding: var(--padding-text);
}

#write a {
    background: var(--bg-link);
    color: var(--color-link);
    text-decoration: none;
    border-bottom: var(--base-borderb);
}

#write a:hover {
    border-bottom-color: var(--color-link);
    color: var(--link-hover-color);
    text-decoration: none;
}

a[href^="http://"]:after {
    content: " ("attr(href) ") ";
}

strong {
    background: var(--bg-strong);
    color: var(--color-strong);
}

em {
    background: var(--bg-italic);
    color: var(--color-italic);
    font-style: normal;
    font-family: var(--text-font-jp);
}

strong,
em strong,
strong em {
    font-weight: 800 !important;
    font-style: normal;
    font-family: inherit;
}

del,
s {
    color: var(--color-strike);
    background: var(--bg-strike);
    display: none;
}

mark {
    font: var(--font-highlight);
    background: var(--bg-highlight);
    color: var(--color-highlight);
}

samp {
    font-family: var(--font-fangsong);
}

ins,
div.kpt,
div.practice {
    display: block;
    border-left: 4px solid red;
    margin: 1rem auto;
    padding: 0.5rem;
    text-decoration: none;
}

ins {
    background: hsl(0, 100%, 95%);
}

div.kpt {
    background: #f6f7fa;
}

div.practice {
    background: none;
    padding-left: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

code,
tt,
kbd,
var {
    font: var(--font-code);
    background: var(--bg-code);
    color: var(--color-code);
    border-radius: 5px;
}

tt {
    color: var(--theme-color);
}

var {
    background-color: hsl(222, 100%, 70%);
    padding: 4px;
    border-radius: 0;
}

code {
    background-color: var(--bg-code);
    color: var(--color-code) !important;
}

kbd {
    background-color: #111;
    color: #fff;
    font-size: small;
    padding: 2px;
}

details {
    -webkit-box-shadow: 5px 5px 5px 0px #ffe5e5;
    box-shadow: 5px 5px 5px 0px #ffe5e5;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 1rem;
    margin: 1.5rem auto;
    background: var(--bg-quote);
}

div.intro {
    font-family: var(--font-kai-cn);
}

div.intro em {
    font-family: var(--font-kai-jp) !important;
}

div.intro p {
    font-size: large;
}

ruby {
    font-family: var(--font-kai-cn) !important;
    font-size: large;
}

em ruby,
em rt {
    font-family: var(--font-kai-jp) !important;
}

div.ptb tr {
    border: 1px solid #fff;
}

div.ptb tr:nth-child(2n) {
    background: #fff;
}

div.ptb tr,
div.ptb td,
div.ptb th {
    border: 1px solid #fff;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table caption {
    border-bottom: none;
}

table th {
    font-weight: 800;
}

table th,
table td {
    padding: 0.5rem 1rem;
    background: transparent;
}

table td {
    white-space: nowrap;
}

table tr,
table td,
table th {
    border-left: 1px solid var(--theme-color-weak);
}

table thead tr {
    text-align: left;
    background: var(--bg-thead);
}

table thead tr:hover {
    background: var(--bg-thead-hover);
    color: var(--color-thead-hover);
}

table tr {
    background: var(--bg-tbody);
    color: var(--tbody-color);
    border: 1px solid var(--theme-color-weak);
}

table tr:nth-child(2n) {
    background: var(--bg-tbody-opt);
    color: var(--tbody-color-opt);
}

table tr:hover {
    background: var(--bg-tbody-hover);
    color: var(--color-tbody-hover);
}

@media print {

    html,
    body {
        margin: 0;
        padding: 0;
    }

    @page {
        size: A4;
        margin-top: 20mm;
        margin-bottom: 20mm;
        margin-right: 30mm;
    }

    * {
        -webkit-text-stroke: 0px;
    }

    :root {
        --font-size: 11pt;
        --kai-size: 12pt;
        --line-height: 24pt;
        --font-title-h1: 900 2.2rem/3.6rem var(--font-title-cn);
        --font-title-h2: 800 1.8rem/3.6rem var(--font-title-cn);
        --font-title-h3: 600 1.4rem/2.8rem var(--font-title-cn);
        --font-title-h4: 400 1.3rem/2.6rem var(--font-hei-cn);
        --font-title-h5: 600 1.2rem/2.4rem var(--font-hei-cn);
        --font-title-h6: 600 1.2rem/2.4rem var(--font-hei-cn);
        --font-quote: 400 12pt/26pt var(--font-quota-cn);
        --font-code: 400 11pt var(--font-mono);
        --font-footnote: 400 10.5pt/21pt var(--font-kai-cn);
    }
}

/* <!-- HTML !-->
<button class="button" role="button">Button 38</button> */

/* CSS */
/* <!-- HTML !-->
<button class="button" role="button"><span class="text">Button 48</span></button> */

/* CSS */
.button {
    appearance: none;
    background-color: #FFFFFF;
    border-width: 0;
    box-sizing: border-box;
    color: #000000;
    cursor: pointer;
    display: inline-block;
    font-family: "HYZhengYuan",Helvetica,sans-serif;
    font-size: 15px;
    width: 100%;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 3em;
    margin: 0;
    opacity: 1;
    outline: 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-rendering: geometricprecision;
    text-transform: uppercase;
    transition: opacity 300ms cubic-bezier(.694, 0, 0.335, 1),background-color 100ms cubic-bezier(.694, 0, 0.335, 1),color 100ms cubic-bezier(.694, 0, 0.335, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    white-space: nowrap;
}

.button:before {
    animation: opacityFallbackOut .5s step-end forwards;
    backface-visibility: hidden;
    background-color: #EBEBEB;
    clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: translateZ(0);
    transition: clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1), -webkit-clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1);
    width: 100%;
}

.button:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
}

.button:after {
    background-color: #FFFFFF;
}

.button span {
    z-index: 1;
    position: relative;
}

#weiyu {
    font-family: "LXGWWenKai" !important;
}

@font-face{
    font-family: 'LXGWWenKai';
    src: local('LXGWWenKai'),
    url('https://npm.elemecdn.com/zkeq-font@1.1.0/LXGWWenKai-Regular.ttf') format('truetype');
    font-display: swap;
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'SubTitle';
    src: local('SubTitle'), url('https://npm.elemecdn.com/zkeq-font@1.3.0/Subtitle.ttf') format('truetype');
    font-display: swap;
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'HYZhengYuan';
    src: local('HYZhengYuan'), url('https://npm.elemecdn.com/zkeq-font@1.2.0/MiSans-Medium.ttf') format('truetype');
    font-display: swap;
    font-weight: bold;
    font-style: normal;
}