* {
    text-size-adjust: none;
    box-sizing: border-box
}

:root {
    /* ============================================================
     *  主题颜色变量：换主题只改这一段
     * ============================================================ */
    --bg-color: #fff;
    --text-color: #34495e;
    --heading-color: #2c3e50;
    --muted-color: #858585;
    --em-color: #7f8c8d;
    --h6-color: #777;
    --sidebar-text-color: #505d6b;
    --sidebar-title-color: #364149;
    --border-color: #eee;
    --border-color-strong: #ddd;
    --border-color-mid: #ccc;
    --code-bg: #f8f8f8;
    --zebra-bg: #f8f8f8;
    --tip-code-bg: #efefef;
    --inline-code-color: #e96900;
    --code-text-color: #525252;
    --accent-color: #f66;
    --accent-text-color: #fff;
    --info-color: #0b85d7;
    --info-text-color: #fff;
    --blur-color: rgba(66, 185, 131, .1);
    --sidebar-toggle-bg: transparent;
    --sidebar-border-color: rgba(0, 0, 0, .07);
    --scrollbar-bg-color: hsla(0, 0%, 53.3%, .1);
    --cover-link-color: #fff;

    --token-data-color: #8e908c;
    --token-number-color: #c76b29;
    --token-punctuation-color: #525252;
    --token-property-color: #c08b30;
    --token-tag-color: #2973b7;
    --token-selector-color: #6679cc;
    --token-attr-color: #2973b7;
    --token-url-color: #22a2c9;
    --token-keyword-color: #e96900;
    --token-statement-color: #22a2c9;
    --token-variable-color: #3d8fd1;
    --token-inserted-color: #202746;
    --token-important-color: #c94922;

    --cal-theme-color-s-1: 32;
    --cal-theme-color-s-2: 24;
    --cal-theme-color-s-3: 14;
    --cal-theme-color-s-4: 6;
    --cal-theme-color-s-5: -8;
    --cal-theme-color-s-6: -18;
    --cal-theme-color-s-7: -32;
    --cal-theme-color-s-8: -48;
    --cal-theme-color-l-1: 18;
    --cal-theme-color-l-2: 12;
    --cal-theme-color-l-3: 6;
    --cal-theme-color-l-4: 3;
    --cal-theme-color-l-5: -8;
    --cal-theme-color-l-6: -18;
    --cal-theme-color-l-7: -30;
    --cal-theme-color-l-8: -44;


    /* ============================================================
     *  主题色相关变量
     * ============================================================ */
    --global-theme-color-blur: color-mix(in srgb,
            var(--theme-color) 10%,
            transparent);
    --global-theme-color-blur-weak: color-mix(in srgb,
            var(--theme-color) 45%,
            transparent);
    --global-theme-color-1: hsl(from var(--theme-color) h clamp(0, calc(s + var(--cal-theme-color-s-1)), 100) clamp(0, calc(l + var(--cal-theme-color-l-1)), 100));
    --global-theme-color-2: hsl(from var(--theme-color) h clamp(0, calc(s + var(--cal-theme-color-s-2)), 100) clamp(0, calc(l + var(--cal-theme-color-l-2)), 100));
    --global-theme-color-3: hsl(from var(--theme-color) h clamp(0, calc(s + var(--cal-theme-color-s-3)), 100) clamp(0, calc(l + var(--cal-theme-color-l-3)), 100));
    --global-theme-color-4: hsl(from var(--theme-color) h clamp(0, calc(s + var(--cal-theme-color-s-4)), 100) clamp(0, calc(l + var(--cal-theme-color-l-4)), 100));
    --global-theme-color-5: hsl(from var(--theme-color) h clamp(0, calc(s + var(--cal-theme-color-s-5)), 100) clamp(0, calc(l + var(--cal-theme-color-l-5)), 100));
    --global-theme-color-6: hsl(from var(--theme-color) h clamp(0, calc(s + var(--cal-theme-color-s-6)), 100) clamp(0, calc(l + var(--cal-theme-color-l-6)), 100));
    --global-theme-color-7: hsl(from var(--theme-color) h clamp(0, calc(s + var(--cal-theme-color-s-7)), 100) clamp(0, calc(l + var(--cal-theme-color-l-7)), 100));
    --global-theme-color-8: hsl(from var(--theme-color) h clamp(0, calc(s + var(--cal-theme-color-s-8)), 100) clamp(0, calc(l + var(--cal-theme-color-l-8)), 100));

    /* ============================================================
     *  框架变量
     * ============================================================ */
    --global-font-size: 16px;
    --global-emoji-size: 1.2em;

    --global-font: 'MinorityLang', 'SortsMillGoudy', 'HYQuanTangShiJF-Kana', 'HYQuanTangShiJF', 'HYKaiTiS', 'QuanZiKuKai', 'QuanZiKuKai-extb', 'TwitterColorEmoji', serif;
    --global-emoji-font: 'TwitterColorEmoji';
    --global-code-font: 'Menlo', courier, monospace;
    --global-sidebar-title-font: 'WeibeiSC-Bold', serif;
    --global-cover-font: 'KakuGyoStd', cursive;
    --global-cover-paragraph-font: 'Claire-Palmer-Script', cursive;
    --global-sidebar-name-font: 'KouzanBrushFontSousyo', cursive;
    --global-classic-font: 'CormorantGaramond', serif;
    --global-minority-lang-font: 'GentiumPlus', serif;
    --global-poem-font: 'HuiZongGong-tc', 'HuiZongGong-sc', cursive;
    --global-handwriting-font: 'HanyiSentyFlorCalligraphy', cursive;
    --global-fancy-font: 'HYLuoHuaShiW', cursive;

    --global-font-weight-thin: 100;
    --global-font-weight-light: 300;
    --global-font-weight-normal: 400;
    --global-font-weight-medium: 500;
    --global-font-weight-semibold: 600;
    --global-font-weight-bold: 700;

    --global-bg-color-light: #fff;
    --global-bg-color-dark: #3f3f3f;
    --global-text-color-light: #34495e;
    --global-text-color-dark: #c8c8c8;

    --global-content-width: min(80%, 800px);
    --global-sidebar-width: 300px;
    --global-sidebar-width-none: 0;
    --global-sidebar-toggle-width: 284px;
    --global-cover-ul-width: 500px;

    --global-writing-container-height: 18.75rem;
    --global-sidenote-width: 400px;

    --global-progress-width: 2px;
    --global-scrollbar-width: 4px;
    --global-scrollbar-border-radius: 4px;

    --global-border: 1px solid;
    --global-border-strong: 2px solid;
    --global-border-emphasis: 4px solid;
    --global-border-weak: 1px dotted;
    --global-border-strong-width: 2px;

    --global-box-shadow-width: 0.625rem;

    --global-link-decoration-width: 0.15em;

    --global-el-border-radius: 0.625rem;
    --global-el-border-radius-small: 0.125rem;
    --global-el-border-radius-none: 0;
    --global-icon-border-radius: 0.3125rem;
    --global-widget-border-radius: 0.3rem;
    --global-avatar-border-radius: 50%;

    --global-icon-size-large: 100px;
    --global-icon-size-big: 80px;
    --global-widget-size-normal: 1.5rem;
    --global-widget-size-small: 1.3rem;

    --global-brightness-blur: 0.85;
    --global-opacity-none: 1;
    --global-opacity-strong: 0.8;
    --global-opacity-semistrong: 0.7;
    --global-opacity-normal: 0.6;
    --global-opacity-weak: 0.4;
    --global-opacity-very-weak: 0.3;

    --global-backdrop-filter: blur(30px);

    --global-shadow: #000;
    --global-shadow-blur: color-mix(in srgb,
            var(--global-shadow) calc(var(--global-opacity-weak) * 100%),
            transparent);

    --global-aspect-ratio-square: 1 / 1;
    --global-aspect-ratio-tall: 1 / 1.25;
    --global-aspect-ratio-tv: 16 / 9;

    --global-transition-duration-fast: 250ms;
    --global-transition-duration: 500ms;
    --global-transition-duration-slow: 1s;
    --global-transition-duration-very-slow: 2s;
    --global-transition-duration-super-slow: 3s;
    --global-transition-duration-most-slow: 5s;

    --global-transform-ratio-big: 1.3;
    --global-transform-ratio-normal: 1.2;
    --global-transform-ratio-small: 1.1;
    --global-transform-ratio-very-small: 1.03;
}

@media screen and (max-width:768px) {
    :root {
        --global-widget-size-normal: 1.3rem;
        --global-widget-size-small: 1rem;
    }
}

::selection {
    background-color: var(--global-theme-color-8);
    color: var(--global-theme-color-1);
}

html {
    font-size: var(--global-font-size);
    scrollbar-width: thin;
    scrollbar-color: var(--theme-color) var(--scrollbar-bg-color);
}

body:not(.ready) {
    overflow: hidden
}

body:not(.ready) .app-nav,
body:not(.ready)>nav,
body:not(.ready) [data-cloak] {
    display: none
}

div#app {
    font-size: 1.875rem;
    font-weight: var(--global-font-weight-thin);
    padding: 40vh 0;
    height: 100vh;
    width: 100vw;
    background-color: var(--global-bg-color-light);
    color: var(--global-text-color-light);
    text-align: center
}

@media (prefers-color-scheme: dark) {
    div#app {
        background-color: var(--global-bg-color-dark);
        color: var(--global-text-color-dark);
    }
}

div#app:empty:before {
    content: "Loading..."
}

img.emoji {
    height: var(--global-emoji-size)
}

img.emoji,
span.emoji {
    vertical-align: middle
}

span.emoji {
    font-family: var(--global-emoji-font);
    font-size: var(--global-emoji-size)
}

.progress {
    background-color: var(--theme-color);
    height: var(--global-progress-width);
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: width var(--global-transition-duration-fast), opacity var(--global-transition-duration);
    width: 0;
    z-index: 999999
}

.search a {
    transition-duration: var(--global-transition-duration);
}

.search .search-keyword,
.search a:hover {
    color: var(--theme-color)
}

.search .search-keyword {
    font-style: normal;
    font-weight: var(--global-font-weight-bold)
}

body,
html {
    height: 100%
}

body {
    color: var(--text-color);
    font-family: var(--global-font);
    font-size: 1rem;
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden
}

button,
textarea {
    font-family: var(--global-font);
}

img {
    max-width: 100%
}

a[disabled] {
    cursor: not-allowed;
    opacity: var(--global-opacity-normal);
}

kbd {
    border: var(--global-border) var(--border-color-mid);
    border-radius: 0.1875rem;
    display: inline-block;
    font-size: 0.75rem !important;
    line-height: 0.75rem;
    margin-bottom: 0.1875rem;
    padding: 0.1875rem 0.3125rem;
    vertical-align: middle
}

li input[type=checkbox] {
    margin: 0 .2em .25em 0;
    vertical-align: middle
}

.app-nav {
    margin: 1.5625rem 3.75rem 0 0;
    position: absolute;
    right: 0;
    text-align: right;
    z-index: 10
}

.app-nav.no-badge {
    margin-right: 1.5625rem
}

.app-nav p {
    margin: 0
}

.app-nav>a {
    margin: 0 1rem;
    padding: 0.3125rem 0
}

.app-nav li,
.app-nav ul {
    display: inline-block;
    list-style: none;
    margin: 0
}

.app-nav a {
    color: inherit;
    font-size: 1rem;
    text-decoration: none;
    transition-duration: var(--global-transition-duration);
}

.app-nav a.active,
.app-nav a:hover {
    color: var(--theme-color)
}

.app-nav a.active {
    border-bottom: var(--global-border-strong) var(--theme-color)
}

.app-nav li {
    display: inline-block;
    margin: 0 1rem;
    padding: 0.3125rem 0;
    position: relative;
    cursor: pointer
}

.app-nav li ul {
    background-color: var(--zebra-bg);
    border: var(--global-border) var(--border-color-strong);
    border-radius: 0.25rem;
    box-sizing: border-box;
    display: none;
    max-height: calc(100vh - 3.8125rem);
    overflow-y: auto;
    padding: 0.625rem 0;
    position: absolute;
    right: -0.9375rem;
    text-align: left;
    top: 100%;
    white-space: nowrap
}

.app-nav li ul li {
    display: block;
    font-size: 0.875rem;
    line-height: 1rem;
    margin: 0.5rem 0.875rem;
    white-space: nowrap
}

.app-nav li ul a {
    display: block;
    font-size: inherit;
    margin: 0;
    padding: 0
}

.app-nav li ul a.active {
    border-bottom: 0
}

.app-nav li:hover ul {
    display: block
}

.github-corner {
    border-bottom: 0;
    position: fixed;
    right: 0;
    text-decoration: none;
    top: 0;
    z-index: 1
}

.github-corner:hover .octo-arm {
    animation: octocat-wave var(--global-transition-duration) ease-in-out
}

.github-corner svg {
    color: var(--bg-color);
    fill: var(--theme-color);
    height: var(--global-icon-size-big);
    width: var(--global-icon-size-big)
}

main {
    display: block;
    position: relative;
    width: 100vw;
    height: 100%;
    z-index: 0
}

main.hidden {
    display: none
}

.anchor {
    display: inline-block;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition-duration: var(--global-transition-duration);
}

.anchor span {
    color: var(--text-color)
}

.anchor:hover {
    text-decoration-color: var(--theme-color);
}

.sidebar {
    color: var(--sidebar-title-color);
    border-right: var(--global-border) var(--sidebar-border-color);
    overflow-y: auto;
    padding: 2.5rem 0 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transition: transform var(--global-transition-duration-fast) ease-out;
    width: var(--global-sidebar-width);
    z-index: 20;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-color) var(--scrollbar-bg-color);
}

.sidebar>h1 {
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    font-weight: var(--global-font-weight-light);
    text-align: center
}

.sidebar>h1 a {
    color: inherit;
    text-decoration: none
}

.sidebar>h1 .app-nav {
    display: block;
    position: static
}

.sidebar .sidebar-nav {
    line-height: 2rem;
    padding-bottom: 2.5rem
}

.sidebar li.collapse .app-sub-sidebar {
    display: none
}

.sidebar ul {
    margin: 0 0 0 0.625rem;
    padding: 0
}

.sidebar ul li>* {
    padding-left: 0.3125rem
}

.sidebar li>p {
    font-family: var(--global-sidebar-title-font);
    font-size: 1.25rem;
    max-width: 95%;
    margin: 0.625rem 0;
    padding-right: 5%;
    padding-bottom: 0.3125rem;
    border-bottom: var(--global-border) var(--border-color);
}

.sidebar ul,
.sidebar ul li {
    list-style: none
}

.sidebar ul li a {
    border-bottom: none;
    display: block
}

.sidebar-toggle {
    background-color: var(--sidebar-toggle-bg);
    border: 0;
    outline: none;
    padding: 0.625rem;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    transition: opacity var(--global-transition-duration-fast);
    width: var(--global-sidebar-toggle-width);
    z-index: 30;
    cursor: pointer
}

.sidebar-toggle:hover .sidebar-toggle-button {
    opacity: var(--global-opacity-weak);
}

.sidebar-toggle-button {
    transition-duration: var(--global-transition-duration);
}

.sidebar-toggle span {
    background-color: var(--theme-color);
    display: block;
    margin-bottom: 0.25rem;
    width: 1rem;
    height: 0.125rem;
}

body.sticky .sidebar,
body.sticky .sidebar-toggle {
    position: fixed
}

.content {
    padding-top: 3.75rem;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--global-sidebar-width);
    transition: left var(--global-transition-duration-fast) ease
}

.markdown-section {
    margin: 0 auto;
    max-width: var(--global-content-width);
    padding: 1.875rem 0.9375rem 2.5rem;
    position: relative
}

.markdown-section>* {
    box-sizing: border-box;
    font-size: inherit
}

.markdown-section>:first-child {
    margin-top: 0
}

.markdown-section hr {
    border: none;
    border-bottom: var(--global-border) var(--border-color);
    margin: 2rem 0
}

.markdown-section iframe {
    border: var(--global-border) var(--border-color);
    width: 1px;
    min-width: 100%
}

.markdown-section table {
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    margin-bottom: 1.2rem;
    margin-top: 1.2rem;
    overflow: auto;
    width: 100%
}

.markdown-section th {
    font-weight: var(--global-font-weight-bold);
}

.markdown-section td,
.markdown-section th {
    border: var(--global-border) var(--border-color-strong);
    padding: 0.375rem 0.8125rem
}

.markdown-section tr {
    border-top: var(--global-border) var(--border-color-mid)
}

.markdown-section p.tip,
.markdown-section p.warn,
.markdown-section tr:nth-child(2n) {
    background-color: var(--zebra-bg)
}

.markdown-section thead tr {
    background-color: var(--zebra-bg)
}

.markdown-section thead tr:nth-child(2n) {
    background-color: var(--bg-color)
}

.markdown-section p.tip,
.markdown-section p.warn {
    border-radius: var(--global-el-border-radius);
    margin: 2rem 0;
    padding: 0.75rem 1.5rem 0.75rem 2.625rem;
    position: relative
}

.markdown-section p.tip:before,
.markdown-section p.warn:before {
    border-radius: 100%;
    font-family: var(--global-code-font);
    font-size: 1rem;
    font-weight: var(--global-font-weight-bold);
    left: 0.75rem;
    line-height: 1.25rem;
    position: absolute;
    height: 1.25rem;
    width: 1.25rem;
    top: 0.8rem;
    text-align: center
}

.markdown-section p.tip code,
.markdown-section p.warn code {
    background-color: var(--tip-code-bg)
}

.markdown-section p.tip em,
.markdown-section p.warn em {
    color: var(--text-color)
}

.markdown-section p.tip {
    border-left: var(--global-border-emphasis) var(--accent-color);
}

.markdown-section p.warn {
    border-left: var(--global-border-emphasis) var(--info-color);
}

.markdown-section p.tip:before {
    content: "!";
    background-color: var(--accent-color);
    color: var(--accent-text-color);
}

.markdown-section p.warn:before {
    content: "i";
    background-color: var(--info-color);
    color: var(--info-text-color);
}

.markdown-section ul.task-list>li {
    list-style-type: none
}

body.close .sidebar {
    transform: translateX(calc(-1 * var(--global-sidebar-width)))
}

body.close .sidebar-toggle {
    width: auto
}

body.close .content {
    left: 0
}

@media print {

    .app-nav,
    .github-corner,
    .sidebar,
    .sidebar-toggle {
        display: none
    }

    main {
        position: static;
        width: auto;
        height: auto;
    }
    
    .content {
        left: auto;
        right: auto;
        transition: none;
        position: static;
        width: auto;
    }
}

@media screen and (max-width:768px) {

    .github-corner,
    .sidebar,
    .sidebar-toggle {
        position: fixed
    }

    .app-nav {
        margin-top: 1rem
    }

    .app-nav li ul {
        top: 1.875rem
    }

    main {
        height: auto;
        min-height: 100vh;
        overflow-x: hidden
    }

    .sidebar {
        left: 0;
        transform: translateX(calc(-1 * var(--global-sidebar-width)));
        transition: transform var(--global-transition-duration-fast) ease-out
    }

    .content {
        left: 0;
        max-width: 100vw;
        position: static;
        padding-top: 1.25rem;
        transition: transform var(--global-transition-duration-fast) ease
    }

    .sidebar-toggle {
        background-color: transparent;
        width: auto;
        padding: 1.875rem 1.875rem 0.625rem 0.625rem
    }

    body.close .sidebar {
        transform: translateX(0)
    }

    body.close .sidebar-toggle {
        background-color: var(--sidebar-toggle-bg);
        transition: background-color var(--global-transition-duration-slow);
        width: var(--global-sidebar-toggle-width);
        padding: 0.625rem
    }

    body.close .app-nav,
    body.close .github-corner,
    body.close .content {
        transform: translateX(0)
    }

    body.close .app-nav {
        z-index: 0;
    }

    body .content::before {
        content: '';
        position: fixed;
        inset: 0;
        background-color: var(--global-shadow-blur);
        opacity: 0;
        z-index: -1;
        transition: opacity var(--global-transition-duration-fast) ease;
    }

    body.close .content::before {
        z-index: 10;
        opacity: 1;
    }

    .github-corner:hover .octo-arm {
        animation: none
    }

    .github-corner .octo-arm {
        animation: octocat-wave var(--global-transition-duration) ease-in-out
    }
}

@keyframes octocat-wave {

    0%,
    to {
        transform: rotate(0)
    }

    20%,
    60% {
        transform: rotate(-25deg)
    }

    40%,
    80% {
        transform: rotate(10deg)
    }
}

section.cover {
    position: relative;
    align-items: center;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    width: 100%;
    display: none
}

section.cover.show {
    display: flex
}

section.cover.has-mask .mask {
    background-color: var(--bg-color);
    opacity: var(--global-opacity-strong);
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%
}

section.cover .cover-main {
    flex: 1;
    margin: 0 1rem;
    text-align: center;
    position: relative
}

section.cover a {
    color: inherit
}

section.cover a,
section.cover a:hover {
    text-decoration: none
}

section.cover p {
    line-height: 1.5rem;
    margin: 1rem 0
}

section.cover h1 {
    color: inherit;
    font-size: 2.5rem;
    font-weight: var(--global-font-weight-light);
    margin: .625rem 0 2.5rem;
    position: relative;
    text-align: center
}

section.cover h1 a {
    display: block
}

section.cover h1 small {
    bottom: -.4375rem;
    font-size: 1rem;
    position: absolute
}

section.cover blockquote {
    font-size: 1.5rem;
    text-align: center
}

section.cover ul {
    line-height: 1.8;
    list-style-type: none;
    margin: 1rem auto;
    max-width: var(--global-cover-ul-width);
    padding: 0
}

section.cover .cover-main>p:last-child a {
    border-radius: 2rem;
    border: var(--global-border) var(--theme-color);
    box-sizing: border-box;
    color: var(--theme-color);
    display: inline-block;
    font-size: 1.05rem;
    letter-spacing: .1rem;
    margin: .5rem 1rem;
    padding: .75em 2rem;
    text-decoration: none;
    transition: all var(--global-transition-duration-fast) ease
}

section.cover .cover-main>p:last-child a:last-child {
    background-color: var(--theme-color);
    color: var(--cover-link-color);
}

section.cover .cover-main>p:last-child a:last-child:hover {
    color: inherit;
    opacity: var(--global-opacity-strong);
}

section.cover .cover-main>p:last-child a:hover {
    color: inherit
}

section.cover blockquote>p>a {
    border-bottom: var(--global-border-strong) var(--theme-color);
    transition: color var(--global-transition-duration-fast);
}

section.cover blockquote>p>a:hover {
    color: var(--theme-color)
}

.sidebar,
body {
    background-color: var(--bg-color)
}

.sidebar li {
    margin: 0.375rem 0
}

.sidebar ul li a {
    color: var(--sidebar-text-color);
    font-size: 0.875rem;
    font-weight: var(--global-font-weight-normal);
    overflow: hidden;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: text-decoration-color var(--global-transition-duration);
}

.sidebar ul li a:hover {
    text-decoration-color: var(--theme-color);
}

.sidebar ul li.active>a {
    color: var(--theme-color);
    font-weight: var(--global-font-weight-semibold);
    border-left: var(--global-border-strong);
    margin-left: calc(-1 * var(--global-border-strong-width));
}

.app-sub-sidebar li:before {
    padding-right: 0.25rem;
    float: left
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section strong {
    color: var(--heading-color);
    font-weight: var(--global-font-weight-semibold)
}

.markdown-section a {
    color: var(--theme-color);
    font-weight: var(--global-font-weight-semibold)
}

.markdown-section h1 {
    font-size: 2rem;
    margin: 0 0 1.2rem
}

.markdown-section h2 {
    font-size: 1.75rem;
    margin: 2.8125rem 0 1.2rem
}

.markdown-section h3 {
    font-size: 1.5rem;
    margin: 2.5rem 0 1.2rem
}

.markdown-section h4 {
    font-size: 1.25rem;
    margin: 2.1875rem 0 1.2rem
}

.markdown-section h5 {
    font-size: 1rem;
    margin: 2.1875rem 0 1.2rem
}

.markdown-section h6 {
    color: var(--h6-color);
    font-size: 1rem;
    margin: 1.2rem 0
}

.markdown-section figure,
.markdown-section p {
    margin: 1.2rem 0
}

.markdown-section ol,
.markdown-section p,
.markdown-section ul {
    line-height: 1.6rem;
    word-spacing: .05rem
}

.markdown-section ol,
.markdown-section ul {
    padding-left: 1.5rem;
    margin: 1.2rem 0
}

.markdown-section ol {
    list-style-type: decimal;
}

.markdown-section ol ol {
    list-style-type: devanagari;
}

.markdown-section ol ol ol {
    list-style-type: lower-roman;
}

.markdown-section ul {
    list-style-type: disc;
}

.markdown-section ul ul {
    list-style-type: circle;
}

.markdown-section ul ul ul {
    list-style-type: square;
}

.markdown-section blockquote {
    border-left: var(--global-border-emphasis) var(--theme-color);
    color: var(--muted-color);
    margin: 2rem 0;
    padding-left: 1.25rem
}

.markdown-section blockquote p {
    font-weight: var(--global-font-weight-semibold);
    margin-left: 0
}

.markdown-section blockquote blockquote {
    margin: -1rem 0;
}

.markdown-section iframe {
    margin: 1.2rem 0
}

.markdown-section em {
    color: var(--em-color)
}

.markdown-section code,
.markdown-section output:after,
.markdown-section pre {
    font-family: var(--global-code-font)
}

.markdown-section code,
.markdown-section pre {
    background-color: var(--code-bg)
}

.markdown-section output,
.markdown-section pre {
    margin: 1.2rem 0;
    position: relative
}

.markdown-section output,
.markdown-section pre>code {
    border-radius: var(--global-el-border-radius);
    display: block
}

.markdown-section code {
    border-radius: var(--global-el-border-radius-small);
    color: var(--inline-code-color);
    margin: 0 0.125rem;
    padding: 0.1875rem 0.3125rem;
    white-space: pre-wrap
}

.markdown-section>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) code {
    font-size: .8rem
}

.markdown-section pre {
    padding: 0 1.4rem;
    line-height: 1.5rem;
    overflow: auto;
    word-wrap: normal
}

.markdown-section pre>code {
    color: var(--code-text-color);
    font-size: .8rem;
    padding: 1.76rem 0.3125rem;
    line-height: inherit;
    margin: 0 0.125rem;
    max-width: inherit;
    overflow: inherit;
    white-space: inherit
}

.markdown-section output {
    padding: 1.7rem 1.4rem;
    background-color: var(--zebra-bg);
    border: var(--global-border) var(--border-color-strong)
}

.markdown-section output>:first-child {
    margin-top: 0
}

.markdown-section output>:last-child {
    margin-bottom: 0
}

.markdown-section code:after,
.markdown-section code:before,
.markdown-section output:after,
.markdown-section output:before {
    letter-spacing: .05rem
}

.markdown-section output:after,
.markdown-section pre:after {
    color: var(--border-color-mid);
    font-size: .6rem;
    font-weight: var(--global-font-weight-semibold);
    height: 0.9375rem;
    line-height: 0.9375rem;
    padding: 0.3125rem 0.625rem 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
    content: attr(data-lang)
}

.markdown-section mark {
    padding: 0.3em 0.2em 0;
    background-color: var(--global-theme-color-1);
    color: var(--global-theme-color-8);
    border-radius: var(--global-el-border-radius-small);
}

.markdown-section details {
    margin: 1.2rem 0;
}

.markdown-section summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding-left: 1.5em;
}

.markdown-section summary::marker {
    content: "";
}

.markdown-section summary::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1.25rem;
    height: 1.125rem;

    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 4 L16 10 L5 16 Z' fill='black' stroke='black' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;

    transform-origin: center;
    transition: transform var(--global-transition-duration);
}

.markdown-section details[open] summary::before {
    transform: rotate(90deg);
}

.markdown-section {

    p,
    blockquote,
    li,
    table {

        a {
            color: inherit;
            font-weight: inherit;
            text-decoration-color: var(--theme-color);
            text-decoration-thickness: var(--global-link-decoration-width);
            transition-duration: var(--global-transition-duration);
        }

        a:hover {
            text-decoration-color: var(--global-theme-color-7);
        }

        svg {
            vertical-align: middle;
            margin-left: .15em;
            margin-right: .15em;
        }
    }
}

.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
    color: var(--token-data-color)
}

.token.namespace {
    opacity: var(--global-opacity-semistrong)
}

.token.boolean,
.token.number {
    color: var(--token-number-color);
}

.token.punctuation {
    color: var(--token-punctuation-color);
}

.token.property {
    color: var(--token-property-color);
}

.token.tag {
    color: var(--token-tag-color);
}

.token.string {
    color: var(--theme-color)
}

.token.selector {
    color: var(--token-selector-color);
}

.token.attr-name {
    color: var(--token-attr-color);
}

.language-css .token.string,
.style .token.string,
.token.entity,
.token.url {
    color: var(--token-url-color);
}

.token.attr-value,
.token.control,
.token.directive,
.token.unit {
    color: var(--theme-color)
}

.token.function,
.token.keyword {
    color: var(--token-keyword-color);
}

.token.atrule,
.token.regex,
.token.statement {
    color: var(--token-statement-color);
}

.token.placeholder,
.token.variable {
    color: var(--token-variable-color);
}

.token.deleted {
    text-decoration: line-through
}

.token.inserted {
    border-bottom: var(--global-border-weak) var(--token-inserted-color);
    text-decoration: none
}

.token.italic {
    font-style: italic
}

.token.bold,
.token.important {
    font-weight: var(--global-font-weight-bold)
}

.token.important {
    color: var(--token-important-color);
}

.token.entity {
    cursor: help
}

code .token {
    min-height: 1.5rem;
    position: relative;
    left: auto
}

nav.app-nav li ul {
    min-width: 7.5rem;
}

iframe,
img,
video,
pre {
    border-radius: var(--global-el-border-radius);
}