:root {
    --bg: #f2f5f8;
    --main: #fff;
    --t: #37475b;
    --t-l: #6b7f94;
    --logo: #000;
    --link: #3273dc;
    --title: #475b6d;
    --titleAfter: #ffd75e;
    --fab: #fff;
    --shadow: 0 4px 10px rgba(0, 2, 4, 0.06), 0 0 1px rgba(0, 2, 4, 0.11);
    --fab-position: 1.2rem;
    --fab-padding: 0.9rem;
    --navbar-flex: block;
    --toc-btn: block;
    --scroll-y: 0.35rem;
    --scroll-x: 0.28rem;
    --container: 992px;
    --container-padding: 0 0.75rem 1.5rem;
    --hide-mobile: none;
    --hide-desktop: none;
    --navbar-item: 0.7rem 0.8rem;
    --radius: 0.5rem
}

.dark {
    --bg: #181c27;
    --main: #252d38;
    --t: hsla(0, 0%, 100%, 0.86);
    --t-l: hsla(0, 0%, 100%, 0.66);
    --logo: #fff;
    --link: #3298dc;
    --title: hsla(0, 0%, 100%, 0.92);
    --titleAfter: #3c495b;
    --fab: #364151;
    --shadow: none
}

body,
h1,
html,
li,
ol,
ul {
    margin: 0;
    padding: 0
}

ul {
    list-style: none
}

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

html {
    font-size: 15px;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%
}

body {
    background: var(--bg);
    color: var(--t);
    font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Source Han Sans SC, Noto Sans CJK SC, Microsoft YaHei, WenQuanYi Micro Hei, WenQuanYi Zen Hei, Helvetica Neue, Arial, sans-serif;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5
}

a {
    color: var(--link);
    text-decoration: none
}

img {
    border-style: none;
    background-color: transparent
}

span {
    font-style: inherit;
    font-weight: inherit
}

hr {
    border: 0;
    height: 2px;
    margin: 1.2rem 0;
    padding: 0
}

#toc::-webkit-scrollbar,
.navbar-menu::-webkit-scrollbar,
pre>code::-webkit-scrollbar,
table::-webkit-scrollbar {
    width: var(--scroll-y);
    height: var(--scroll-x)
}

#toc::-webkit-scrollbar-thumb,
.navbar-menu::-webkit-scrollbar-thumb,
pre>code::-webkit-scrollbar-thumb,
table::-webkit-scrollbar-thumb {
    background: #b5b5b5;
    border-radius: var(--radius)
}

.mb0 {
    margin-bottom: 0
}

.mb3 {
    margin-bottom: 1rem
}

.hide-mobile {
    display: var(--hide-mobile)
}

.app-shell-loader {
    position: absolute;
    top: 200px;
    text-align: center;
    left: 0;
    right: 0;
    opacity: 0;
    -webkit-animation: loading-fadein 1.6s infinite;
    animation: loading-fadein 1.6s infinite;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    font-size: 1.2em;
    z-index: -1
}

.container,
.navbar-container {
    flex-grow: 1;
    margin: 0 auto;
    max-width: var(--container)
}

.container {
    padding: var(--container-padding);
    display: none
}

.navbar {
    background-color: var(--main);
    min-height: 3.25rem;
    contain: layout
}

.navbar-container {
    align-items: stretch;
    display: var(--navbar-flex)
}

.navbar {
    box-shadow: var(--shadow)
}

.navbar-brand {
    font-size: 1.2rem;
    justify-content: center;
    align-items: stretch;
    display: flex;
    flex-shrink: 0
}

.navbar-menu {
    flex-grow: 1;
    overflow-x: auto;
    justify-content: start
}

.navbar-start {
    justify-content: flex-start;
    margin-right: 0
}

.navbar-end {
    justify-content: flex-end;
    margin-left: 0
}

.navbar-item {
    display: flex;
    align-items: center;
    padding: var(--navbar-item);
    margin: 0;
    color: var(--t);
    flex-grow: 0;
    flex-shrink: 0
}

.navbar-end,
.navbar-menu,
.navbar-start {
    align-items: stretch;
    display: flex;
    flex-shrink: 0
}

.navbar-logo {
    width: 1.75rem;
    height: 1.75rem;
    margin-right: .75rem;
    fill: var(--logo)
}

.navbar-start>a.navbar-item {
    display: inline-block;
    text-align: center;
    position: relative;
}

.navbar-start>a.navbar-item::before,
.navbar-start>a.navbar-item::after {
    position: absolute;
    content: "";
    width: 0;
    height: 2px;
    background: var(--link);
    transition: .3s;
    bottom: 0;
}

.navbar-start>a.navbar-item::before {
    left: 50%;
}

.navbar-start>a.navbar-item::after {
    right: 50%;
}

.navbar-start>a.navbar-item:hover::before,
.navbar-start>a.navbar-item:hover::after {
    width: 50%;
    color: var(--link);
}


.footer {
    display: none
}

blockquote,
figure,
p,
pre,
table {
    margin: 0 0 1em
}

p:last-child {
    margin-bottom: 0
}

h1,
h2,
h3,
th {
    font-weight: 700;
    color: var(--title)
}

h2,
h3 {
    margin: 0 0 .5em
}

h2 {
    font-size: 1.55em
}

h3 {
    font-size: 1.25em
}

.hidden {
    display: none
}

#toc {
    min-height: 3.6rem;
    /*max-height: calc(100vh - 39rem)*/
}

#toc-btn {
    display: var(--toc-btn)
}

#toc-mask {
    display: none
}

.fab {
    position: fixed;
    bottom: var(--fab-position);
    right: var(--fab-position);
    contain: layout;
}

.fab-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    align-items: center;
    margin-top: .5rem;
    font-size: .75rem;
    background-color: var(--fab);
    display: block;
    padding: var(--fab-padding);
    box-shadow: 0 .3rem .6rem rgba(48, 55, 66, .15);
    border: none;
    border-radius: var(--radius);
    line-height: 1;
    color: var(--t)
}

#i-dark,
#i-menu,
#i-rss,
#i-search,
#i-up,
.i-back,
.i-forward {
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: 15px;
    position: relative;
    box-sizing: border-box;
    vertical-align: middle;
    text-indent: -9999px
}

#i-dark:after,
#i-dark:before,
#i-menu:after,
#i-menu:before,
#i-rss:after,
#i-rss:before,
#i-search:after,
#i-search:before,
#i-up:after,
#i-up:before,
.i-back:after,
.i-back:before,
.i-forward:after,
.i-forward:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%
}

.i-back {
    margin-right: .5rem;
    color: var(--t-l);
    font-size: 14px
}

.i-back:before {
    height: .65em;
    width: .65em;
    border-style: solid;
    border-width: 2px 0 0 2px;
    transform: translate(-25%, -50%) rotate(-45deg)
}

.i-forward {
    margin-left: .5rem;
    color: var(--t-l);
    font-size: 14px
}

.i-forward:before {
    height: .65em;
    width: .65em;
    border-style: solid;
    border-width: 2px 2px 0 0;
    transform: translate(-75%, -50%) rotate(45deg)
}

#i-search:before {
    width: .8em;
    height: .8em;
    left: 0;
    top: 0;
    border: 2px solid;
    border-radius: 100px;
    transform: translate(0) rotate(45deg)
}

#i-search:after {
    width: .5em;
    left: 80%;
    top: 80%;
    border-top: 2px solid;
    transform: translate(-50%, -50%) rotate(45deg)
}

#i-up:before {
    height: .65em;
    width: .65em;
    border-style: solid;
    border-width: 2px 0 0 2px;
    transform: translate(-50%, -25%) rotate(45deg)
}

#i-rss {
    width: 16px;
    height: 16px;
    overflow: hidden
}

#i-rss:after,
#i-rss:before {
    border-radius: 100px;
    transform: translate(-50%, -50%)
}

#i-rss:before {
    width: 3px;
    height: 3px;
    left: 1.5px;
    top: 14px;
    box-shadow: inset 0 0 32px
}

#i-rss:after {
    width: 27.5px;
    height: 27.5px;
    left: 0;
    top: 100%;
    border: 4px solid transparent;
    box-shadow: inset 0 0 0 2px, 0 0 0 2px
}

#i-menu:before {
    box-shadow: 0 -.35em, 0 .35em;
    border-top: 2px solid;
    width: 100%;
    transform: translate(-50%, -50%)
}

#i-dark:before {
    border: 7px solid;
    border-top-left-radius: 10000px;
    border-bottom-left-radius: 10000px;
    border-right: 0;
    width: 7px;
    height: 14px;
    top: .5px;
    left: .5px
}

#i-dark:after {
    width: 16px;
    height: 16px;
    border: 2px solid;
    border-radius: 50%;
    transform: translate(-50%, -50%)
}

@-webkit-keyframes loading-fadein {
    0% {
        opacity: 0
    }

    50% {
        opacity: .6
    }

    to {
        opacity: 0
    }
}

@keyframes loading-fadein {
    0% {
        opacity: 0
    }

    50% {
        opacity: .6
    }

    to {
        opacity: 0
    }
}

@media screen and (min-width:768px) {
    :root {
        --fab-position: 2rem;
        --fab-padding: 1.35rem;
        --toc-btn: none;
        --scroll-y: 0.5rem;
        --scroll-x: 0.35rem;
        --container-padding: 1.5rem 1.5rem 3rem;
        --hide-mobile: block
    }
}

@media screen and (min-width:1088px) {
    :root {
        --navbar-flex: flex;
        --navbar-item: 1rem 0.6rem
    }

    .navbar {
        padding: 0 1.5rem
    }

    .navbar-brand {
        margin-right: .6rem;
        margin-left: -.75rem
    }

    .navbar-menu {
        margin-right: -.75rem
    }

    .navbar-start {
        margin-right: auto
    }
}

@media screen and (min-width:1280px) {
    :root {
        --container: 1184px;
        --hide-desktop: block
    }
}

@media screen and (min-width:1472px) {
    :root {
        --container: 1376px
    }
}

@media (prefers-color-scheme:dark) {
    :not(.light):root {
        --bg: #181c27;
        --main: #252d38;
        --t: hsla(0, 0%, 100%, 0.86);
        --t-l: hsla(0, 0%, 100%, 0.66);
        --logo: #fff;
        --link: #3298dc;
        --title: hsla(0, 0%, 100%, 0.92);
        --fab: #364151;
        --shadow: none
    }
}

@media screen and (min-width:310px) {
    .navbar-menu {
        justify-content: center
    }
}

@media screen and (max-width:767px) {
    #toc {
        display: none;
        margin: 1rem;
        max-height: calc(91vh - 5rem);
        overflow-y: auto;
        z-index: 100
    }

    #toc-mask {
        top: 0;
        z-index: 99;
        background: rgba(0, 0, 0, .7)
    }

    #toc,
    #toc-mask {
        left: 0;
        right: 0;
        bottom: 0;
        position: fixed
    }
}


:root {
    --t-s: #2f3d4e;
    --alt: #e6e8ee;
    --link-hover: #363636;
    --hover-bg: #eceef2;
    --tag: #eceef2;
    --border: #e3e6eb;
    --pre: #f4f5f7;
    --c-bg: #f4f5f7;
    --code: #50687c;
    --kbd: #fafbfc;
    --hlc: #a0a1a7;
    --hlk: #a626a4;
    --hln: #e45649;
    --hll: #0184bb;
    --hls: #50a14f;
    --hlt: #c18401;
    --hlv: #986801;
    --hlb: #4078f2;
    --post-font-size: 15px;
    --resp-flex: block;
    --resp-shadow: block;
    --col-main: 100%;
    --col-side: 100%;
}

.dark {
    --t-s: hsla(0, 0%, 100%, 0.9);
    --alt: #3e4b5e;
    --link-hover: #47a2e0;
    --hover-bg: #3e4b5e;
    --tag: #3e4b5e;
    --border: #435266;
    --pre: #3c495b;
    --c-bg: #2f3947;
    --code: #c3c7cb;
    --kbd: #4e5f77;
    --hl: #abb2bf;
    --hlc: #808895;
    --hlk: #c678dd;
    --hln: #e06c75;
    --hll: #56b6c2;
    --hls: #98c379;
    --hlt: #e6c07b;
    --hlv: #d19a66;
    --hlb: #61aeee
}

.app-shell-loader {
    display: none;
    -webkit-animation: none;
    animation: none
}

.button,
.fab-btn,
.input,
.navbar-item,
a {
    cursor: pointer
}

a strong {
    color: currentColor
}

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

.container,
article,
aside,
figure,
footer,
header,
hr,
section {
    display: block
}

small {
    font-size: .87em
}

strong {
    color: var(--t-s);
    font-weight: 700
}

dd,
dl,
dt,
fieldset,
iframe,
legend,
textarea {
    margin: 0;
    padding: 0
}

iframe {
    border: none
}

button,
input,
select,
textarea {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Source Han Sans SC, Noto Sans CJK SC, Microsoft YaHei, WenQuanYi Micro Hei, WenQuanYi Zen Hei, Helvetica Neue, Arial, sans-serif;
    margin: 0
}

/* .navbar-item:focus,
.navbar-item:hover {
    background-color: var(--hover-bg);
    color: var(--link)
} */

.navbar-logo {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.cols {
    margin: 0 -.75rem;
    display: var(--resp-flex)
}

.left-col,
.main-col,
.right-col {
    padding: 0 .75rem;
    box-sizing: border-box;
    flex: none
}

.main-col {
    display: block;
    order: 2;
    width: var(--col-main)
}

.left-col,
.right-col {
    width: var(--col-side)
}

.left-col {
    display: block;
    order: 1
}

.right-col {
    display: var(--hide-desktop);
    order: 3
}

.c-card,
.card {
    overflow: auto;
    margin-top: 1.5rem
}

.c-card,
.card,
.navi-list>li,
.next,
.prev {
    border-radius: var(--radius);
    background: var(--main);
    box-shadow: var(--shadow)
}

.card-image {
    border-radius: var(--radius) var(--radius) 0 0
}

.c-card,
.card-content {
    padding: 1.5rem
}

.card-label {
    color: var(--t-l);
    font-size: .9em;
    letter-spacing: 1px;
    margin-bottom: 1em
}

.author-level,
.navi,
.post-entry-footer {
    display: flex;
    justify-content: space-between
}

.post-meta,
.post-meta_a {
    color: var(--t-l)
}

.page-title,
.post-title,
.title {
    word-break: break-word;
    color: var(--title);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.125
}

.post-title {
    margin-bottom: 1rem
}

h1.post-title::after {
    content: '';
    width: 100px;
    border-radius: 3px;
    display: block;
    margin: -10px 0 0 0;
    height: 15px;
    background: var(--titleAfter);
}

.post-title_a,
.post-title_a:hover {
    color: var(--title)
}

.thumb-img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0
}

.thumb-img.lazy {
    visibility: hidden
}

.thumb-img.lazy.loaded {
    visibility: visible
}

.thumb-index,
.thumb-post {
    display: block;
    position: relative;
    background: #e4e5e7
}

.menu_a {
    color: var(--t);
    padding: .5em .75em;
    display: flex;
    line-height: 1.25;
    font-size: .933333rem
}

.menu_flex {
    justify-content: space-between
}

.menu_a:hover {
    background-color: var(--hover-bg);
    color: var(--t-s)
}

.article-footer,
.widget-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start
}

.widget-tags {
    line-height: 2
}

.s-tag,
.w-tag {
    font-size: .85rem;
    margin-right: .5rem
}

.w-tag {
    color: var(--t-s)
}

.widget-count {
    font-size: .75rem;
    line-height: 1.5;
    border-radius: 4px;
    height: 1.5em;
    padding: .1em .75em;
    background: var(--tag)
}

.col-shadow {
    display: var(--resp-shadow)
}

.widget-author {
    text-align: center
}

.author-level-item {
    flex: 1 0 auto;
    margin: 0 .375rem
}

.author-count {
    font-size: 1.5rem;
    margin-bottom: 0
}

.author-avatar,
.author-image {
    height: 6.4rem;
    width: 6.4rem
}

.author-image {
    margin: 0 auto 1rem;
    background: #e4e5e7
}

.author-avatar,
.author-image {
    border-radius: 3.2rem
}

.author-item {
    font-size: .87em;
    margin-bottom: 0
}

.widget-title {
    margin-bottom: 0;
    text-decoration: none;
    color: var(--title);
    line-height: 1.5;
    font-size: .85rem
}

.small-post-item {
    font-size: .87em;
    contain: content
}

.small-post-item+.small-post-item {
    border-top: 1px solid var(--alt);
    margin-top: 1rem;
    padding-top: 1rem
}

.dot {
    margin: 0 .2rem
}

.dot:after {
    content: "·"
}

blockquote {
    border-left: .25em solid var(--border);
    padding: 1em;
    background-color: var(--c-bg)
}

code,
kbd,
pre {
    font-family: Consolas, Monaco, SFMono-Regular, Andale Mono, Liberation Mono, Ubuntu Mono, Menlo, monospace
}

code {
    overflow-wrap: break-word;
    font-size: .87em
}

:not(pre)>code {
    background-color: var(--alt);
    padding: .15em .35em .05em;
    vertical-align: .1em;
    border-radius: .25em
}

:not(pre):not(a)>code,
pre {
    color: var(--code)
}

pre {
    padding: 0;
    overflow-wrap: normal;
    background: var(--pre)
}

pre,
pre>code {
    white-space: pre
}

pre>code {
    word-break: normal;
    display: block;
    padding: 1em;
    overflow-x: auto;
    color: currentColor
}

kbd {
    font-size: .87em;
    display: inline-block;
    padding: .1em .2em;
    vertical-align: middle;
    background-color: var(--kbd);
    border-radius: 3px;
    box-shadow: 1px 1px 1px 0 #a4a5a6
}

table {
    display: block;
    overflow: auto;
    border-spacing: 0;
    border-collapse: collapse;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%
}

td,
th {
    border: 1px solid var(--border);
    padding: .5em .75em
}

td:not([align]),
th:not([align]) {
    text-align: left
}

hr {
    background-color: var(--border)
}

h4,
h5 {
    font-weight: 700;
    color: var(--title);
    margin: 0 0 .5em
}

*+h2,
*+h3,
*+h4,
*+h5 {
    margin-top: 1.25em
}

h4 {
    font-size: 1.15em
}

h5 {
    font-size: 1em
}

h6 {
    color: var(--t-s);
    font-weight: 700;
    font-size: .87em;
    margin: 0 0 1em
}

*+h6 {
    margin-top: 1em
}

tbody>tr {
    background-color: var(--main)
}

tbody>tr:nth-child(odd) {
    background-color: var(--c-bg)
}

.post-header {
    padding: 1.5rem 1.5rem 0
}

.post-img {
    background: #e4e5e7
}

.post-img.loaded {
    height: auto !important;
    background: transparent
}

.post-img[align=right] {
    padding-left: 1rem
}

.post-img[align=left] {
    padding-right: 1rem
}

#article-expire {
    font-size: 1rem;
    padding: 1.25em 1.5em;
    margin: 0 -1.5rem
}

#post {
    font-size: var(--post-font-size);
    overflow-wrap: break-word;
    padding: 1rem 1.5rem 0;
    contain: content
}

#post ol,
#post ul {
    margin: 0 0 1em 1.5em
}

#post ol li,
#post ul li {
    margin: .5em 0
}

#post ol ol,
#post ol ul,
#post ul ol,
#post ul ul {
    margin-bottom: 0
}

.post_a:hover {
    text-decoration: underline
}

#post ol {
    list-style-position: outside;
    list-style-type: decimal
}

#post ul {
    list-style: disc outside
}

#post ul ul {
    list-style-type: circle
}

#post ul ul ul {
    list-style-type: square
}

#post ol ol,
#post ul ol {
    list-style-type: lower-roman
}

#post ol ol ol,
#post ol ul ol,
#post ul ol ol,
#post ul ul ol {
    list-style-type: lower-alpha
}

#post input {
    margin: 0 .2em .25em -1.6em;
    overflow: visible;
    vertical-align: middle
}

#post h2 {
    position: relative;
    padding-left: 1.5rem;
}

#post h2::before {
    content: "#";
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.6;


}

.pullquote {
    float: right;
    max-width: 50%;
    position: relative
}

.license {
    position: relative;
    line-height: 1.2;
    font-size: 1rem;
    background: #f5f5f5;
    color: #4a4a4a;
    margin: 0 -1.5rem;
    overflow: hidden;
    display: block;
    padding: 1.25em 1.5em
}

.license:after {
    position: absolute;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='%234a4a4a' d='M245.8 214.9l-33.2 17.3c-9.4-19.6-25.2-20-27.4-20-22.2 0-33.3 14.6-33.3 43.9 0 23.5 9.2 43.8 33.3 43.8 14.4 0 24.6-7 30.5-21.3l30.6 15.5a73.2 73.2 0 01-65.1 39c-22.6 0-74-10.3-74-77 0-58.7 43-77 72.6-77 30.8-.1 52.7 11.9 66 35.8zm143 0l-32.7 17.3c-9.5-19.8-25.7-20-27.9-20-22.1 0-33.2 14.6-33.2 43.9 0 23.5 9.2 43.8 33.2 43.8 14.5 0 24.7-7 30.5-21.3l31 15.5c-2 3.8-21.3 39-65 39-22.7 0-74-9.9-74-77 0-58.7 43-77 72.6-77C354 179 376 191 389 214.8zM247.7 8C104.7 8 0 123 0 256c0 138.4 113.6 248 247.6 248C377.5 504 496 403 496 256 496 118 389.4 8 247.6 8zm.8 450.8c-112.5 0-203.7-93-203.7-202.8 0-105.5 85.5-203.3 203.8-203.3A201.7 201.7 0 01451.3 256c0 121.7-99.7 202.9-202.9 202.9z'/%3E%3C/svg%3E");
    content: " ";
    height: 200px;
    width: 200px;
    right: -40px;
    top: -45px;
    opacity: .1
}

.license-meta-title,
.license-title {
    margin: 0 0 .25rem
}

.license-link,
.license-meta-title {
    font-size: .8rem
}

.license-link {
    margin-bottom: 1rem
}

.license-meta-text {
    margin: 0
}

.license-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap
}

.license-meta-item {
    margin: 0 2rem 1em 0
}

.license a {
    text-decoration: underline;
    color: currentColor
}

.license-link {
    color: #7a7a7a
}

.article-footer,
.donations {
    padding: 1.5rem
}

#article-expire {
    background-color: #fffbeb;
    color: #947600
}

.s-tag {
    color: var(--t-l)
}

.donation-label {
    margin-bottom: 1rem;
    letter-spacing: 1px;
    font-size: .87em
}

.comment-loading,
.donations {
    text-align: center
}

#comment {
    display: flex;
    align-items: center
}

.comment-loading {
    margin: 10rem 0;
    min-width: 100%
}

.toc-li {
    margin: 0
}

.toc-ul .toc-ul {
    border-left: 1px solid var(--border);
    margin: .75em;
    padding-left: .75em
}

.button,
.input,
.navi-list>li,
.next,
.prev {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    align-items: center;
    display: inline-flex
}

.button:focus,
.input:focus,
.navi-list>li:focus,
.next:focus,
.prev:focus {
    outline: none
}

.button,
.input {
    border: 1px solid transparent;
    box-shadow: none;
    font-size: 1rem;
    padding: .5em .75em;
    height: 2.5em;
    line-height: 1.5;
    box-sizing: border-box
}

.button,
.input,
.msg {
    border-radius: 4px
}

.btn-down,
.btn-down:hover {
    color: #fff;
    background-color: #3273dc;
}

.btn-donation,
.btn-donation:hover {
    color: #fff;
    background-color: #946ce6;
}

.nav {
    margin: 1.5rem 0
}

.nav,
.nav-link {
    display: flex;
    flex-direction: row
}

.nav-link {
    align-items: center;
    outline: none;
    padding: 0 .5rem;
    text-decoration: none
}

.nav-title {
    font-weight: 500;
    font-size: .93333rem;
    line-height: 1.2rem;
    color: var(--t-l)
}

.nav-next,
.nav-prev {
    display: flex;
    flex: 50% 1
}

.nav-prev {
    justify-content: flex-start;
    text-align: left
}

.nav-next {
    justify-content: flex-end;
    text-align: right
}

.navi {
    margin: 1.5rem 0 0;
    align-items: center;
    text-align: center
}

.navi-list>li,
.next,
.prev {
    min-width: .75rem;
    padding: .5rem .75rem;
    margin: 0 .25rem
}

.navi-ellipsis {
    min-width: 2em;
    display: inline-flex
}

.navi-ellipsis,
.navi-list>li,
.next,
.prev {
    justify-content: center;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.navi-list>li,
.next,
.prev {
    border: none;
    height: 1.25rem;
    position: relative;
    vertical-align: top
}

.navi-list>li>a,
.next>a,
.prev>a {
    color: var(--t);
}

.page-navigator,
.navi-list {
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1;
    flex-wrap: wrap;
    align-items: center;
    display: none
}

.navi-list>li.current {
    background: var(--code);
}

.navi-list>li.current>a {
    color: var(--c-bg)
}

.footer {
    display: block;
    text-align: center;
    padding: 3rem 1.5rem;
    background-color: #4c5161;
    box-shadow: var(--shadow);
    color: #fff;
    contain: content
}

.footer-link {
    color: #fff;
}

.footer-link:hover {
    color: #fff;
}

.footer-container {
    display: var(--resp-flex);
    flex-grow: 1;
    margin: 0 auto;
    max-width: var(--container)
}

.medium-zoom-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s;
    will-change: opacity;
    background: var(--bg)
}

.medium-zoom--opened .medium-zoom-overlay {
    cursor: pointer;
    cursor: zoom-out;
    opacity: 1
}

.medium-zoom-image {
    cursor: pointer;
    cursor: zoom-in;
    transition: transform .3s cubic-bezier(.2, 0, .2, 1) !important
}

.medium-zoom-image--hidden {
    visibility: hidden
}

.medium-zoom-image--opened {
    position: relative;
    cursor: pointer;
    cursor: zoom-out;
    will-change: transform
}

.hl {
    position: relative
}

.hl:before {
    color: var(--t-l);
    opacity: .3;
    content: attr(data-lang);
    font-size: 1.9em;
    font-weight: 700;
    position: absolute;
    right: .3rem;
    top: .1em
}

.hljs {
    color: var(--hl)
}

.hljs-comment,
.hljs-quote {
    color: var(--hlc)
}

.hljs-doctag,
.hljs-formula,
.hljs-keyword {
    color: var(--hlk)
}

.hljs-deletion,
.hljs-name,
.hljs-params,
.hljs-section,
.hljs-selector-tag,
.hljs-subst {
    color: var(--hln)
}

.hljs-literal {
    color: var(--hll)
}

.hljs-addition,
.hljs-attribute,
.hljs-meta-string,
.hljs-regexp,
.hljs-string {
    color: var(--hls)
}

.hljs-built_in,
.hljs-class .hljs-title {
    color: var(--hlt)
}

.hljs-attr,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable {
    color: var(--hlv)
}

.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
    color: var(--hlb)
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: 700
}

.hljs-link {
    text-decoration: underline
}

@media screen and (min-width:768px) {
    :root {
        --post-font-size: 16px;
        --resp-flex: flex;
        --col-main: 66.666666%;
        --col-side: 33.333333%
    }

    .sticky-tablet {
        position: -webkit-sticky;
        position: sticky;
        top: 1.5rem
    }

    .thumb-index {
        padding-top: 35.71429%
    }

    .thumb-post {
        padding-top: 37.14286%
    }

    .navi-list {
        display: flex
    }

    .footer-container {
        justify-content: space-between
    }
}

@media screen and (min-width:1280px) {
    :root {
        --resp-shadow: none;
        --col-main: 76.5%;
        --col-side: 23.5%
    }

    .sticky-widescreen {
        position: -webkit-sticky;
        position: sticky;
        top: 1.5rem
    }
}

@media screen and (min-width:1472px) {
    :root {
        --post-font-size: 17px
    }
}

@media (prefers-color-scheme:dark) {
    :not(.light):root {
        --t-s: hsla(0, 0%, 100%, 0.9);
        --alt: #3e4b5e;
        --link-hover: #47a2e0;
        --hover-bg: #3e4b5e;
        --tag: #3e4b5e;
        --border: #435266;
        --pre: #3c495b;
        --c-bg: #2f3947;
        --code: #c3c7cb;
        --kbd: #4e5f77;
        --hl: #abb2bf;
        --hlc: #808895;
        --hlk: #c678dd;
        --hln: #e06c75;
        --hll: #56b6c2;
        --hls: #98c379;
        --hlt: #e6c07b;
        --hlv: #d19a66;
        --hlb: #61aeee
    }

    .post-img,
    .thumb-img {
        -webkit-filter: brightness(.85) contrast(1.2);
        filter: brightness(.85) contrast(1.2)
    }
}

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

    .thumb-index,
    .thumb-post {
        height: 16.48rem
    }

    #toc-mask.active,
    #toc.active {
        display: block
    }
}

@media screen and (max-width:479px) {
    .thumb-index {
        height: 10.66666rem
    }

    .thumb-post {
        height: 11.88571rem
    }
}