:root {
  --red-0: #ff0000;
  --red-1: #ff5252;
  --red-2: #ff7c7c;
  --red-3: #ffafaf;
  --red-4: #ffd0d0;
  --red-5: #ffecec;
  --red-5-5: #fff3f3;
  --red-6: #fff7f7;
  --grey-9: #888;
  --grey-7: var(--color-default);
  --color-archive-year: #000;
  --color-default: #555;
  --color-border: var(--red-3);
  --color-link: var(--red-1);
  --color-background: #eee;
  --color-code-background: #f8f8f8;
  --color-header-background: rgba(255,255,255,0.9);
  --color-footer-background: #fff;
  --color-mobile-nav-background: #fff;
  --color-wrap: #fff;
  --color-sticky: #fff;
  --color-h2-border: #eee;
  --color-meta-shadow: var(--red-6);
  --color-hover-shadow: rgba(120,120,120,0.15);
  --color-h2-after: var(--red-1);
  --color-red-6-shadow: rgba(255, 78, 78, 0.6);
  --color-red-3-shadow: rgba(255, 78, 78, 0.3);
  --highlight-nav: #e6e6e6;
  --highlight-scrollbar: #d6d6d6;
  --highlight-background: #f7f7f7;
  --highlight-current-line: #dadada;
  --highlight-selection: #e9e9e9;
  --highlight-foreground: #4d4d4d;
  --highlight-comment: #7d7d7d;
  --highlight-red: #c8362b;
  --highlight-orange: #b66014;
  --highlight-yellow: #cb911d;
  --highlight-green: #2ea52e;
  --highlight-aqua: #479d9d;
  --highlight-blue: #1973b8;
  --highlight-purple: #7135ac;
  --cursor-default: url("/img/cursor/1.png"), auto;
  --cursor-pointer: url("/img/cursor/2.png"), pointer;
  --cursor-text: url("/img/cursor/3.png"), text;
  --footer-icon: url("/images/taichi.png");
  --sponsor-icon: url("/images/taichi.png");
  --top-icon: url("/images/taichi.png");
}
[data-theme="dark"]:root {
  --red-0: var(--red-1);
  --red-4: rgba(255, 208, 208, 0.5);
  --red-5: rgba(255,228,228,0.15);
  --red-5-5: rgba(255,236,236,0.05);
  --red-6: rgba(255, 243, 243, 0.2);
  --color-archive-year: #999;
  --color-default: #999;
  --color-border: var(--red-5);
  --color-background: #21252b;
  --color-code-background: rgba(232,232,232,0.1);
  --color-header-background: #222;
  --color-footer-background: #21252b;
  --color-mobile-nav-background: #21252b;
  --color-wrap: #272b30;
  --color-h2-border: #47474a;
  --color-meta-shadow: rgba(0,0,0,0.2);
  --color-hover-shadow: rgba(0,0,0,0.2);
  --highlight-nav: #2e353f;
  --highlight-scrollbar: #454d59;
  --highlight-background: #22272e;
  --highlight-current-line: #393939;
  --highlight-selection: #515151;
  --highlight-foreground: #cccccc;
  --highlight-comment: #999999;
  --highlight-red: #f47067;
  --highlight-orange: #f69d50;
  --highlight-yellow: #ffcc66;
  --highlight-green: #99cc99;
  --highlight-aqua: #66cccc;
  --highlight-blue: #54b6ff;
  --highlight-purple: #dcbdfb;
}
[data-theme="dark"]:root img {
  filter: brightness(70%);
}
[data-theme="dark"]:root .pswp__img {
  opacity: 1;
  filter: none;
  animation: none;
}
[data-theme="dark"]:root img.lazyloaded {
  opacity: 1;
  animation: blur-darken 0.8s ease-in-out forwards;
}
body [data-aos='fade-up'] {
  transform: translate3d(0, 30px, 0);
}
body [data-aos='zoom-in'] {
  transform: scale(0.8);
}
[data-aos^=fade],
[data-aos^=zoom] {
  transition-property: all !important;
}
@keyframes blur {
  0% {
    filter: blur(10px);
  }
  to {
    filter: blur(0);
  }
}
@keyframes blur-darken {
  0% {
    filter: blur(10px) brightness(70%);
  }
  to {
    filter: blur(0) brightness(70%);
  }
}
@keyframes rotate-all {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes transform-all {
  100% {
    transform: translateX(-100px);
  }
}
.article-entry h1,
.wl-content h1,
.vcontent h1,
.gt-header-preview.markdown-body h1,
.gt-comment-content .gt-comment-body.markdown-body h1 {
  font-size: 2em;
}
.article-entry h2,
.wl-content h2,
.vcontent h2,
.gt-header-preview.markdown-body h2,
.gt-comment-content .gt-comment-body.markdown-body h2 {
  font-size: 1.5em;
  position: relative;
}
.article-entry h2:before,
.wl-content h2:before,
.vcontent h2:before,
.gt-header-preview.markdown-body h2:before,
.gt-comment-content .gt-comment-body.markdown-body h2:before {
  content: "";
  position: absolute;
  width: 100%;
  border-bottom: 1px solid var(--color-h2-border);
  bottom: -15px;
  box-sizing: unset;
  transition: 1s;
}
.article-entry h2:after,
.wl-content h2:after,
.vcontent h2:after,
.gt-header-preview.markdown-body h2:after,
.gt-comment-content .gt-comment-body.markdown-body h2:after {
  content: "";
  position: absolute;
  background: var(--color-h2-after);
  width: 1em;
  height: 7px;
  bottom: -18px;
  left: 0;
  border-radius: 10px;
  box-shadow: 0 2px 12px var(--color-red-6-shadow);
  transition: 0.3s;
}
.article-entry h2:hover:after,
.wl-content h2:hover:after,
.vcontent h2:hover:after,
.gt-header-preview.markdown-body h2:hover:after,
.gt-comment-content .gt-comment-body.markdown-body h2:hover:after {
  width: 3em;
}
.article-entry h3,
.wl-content h3,
.vcontent h3,
.gt-header-preview.markdown-body h3,
.gt-comment-content .gt-comment-body.markdown-body h3 {
  font-size: 1.3em;
}
.article-entry h4,
.wl-content h4,
.vcontent h4,
.gt-header-preview.markdown-body h4,
.gt-comment-content .gt-comment-body.markdown-body h4 {
  font-size: 1.2em;
}
.article-entry h5,
.wl-content h5,
.vcontent h5,
.gt-header-preview.markdown-body h5,
.gt-comment-content .gt-comment-body.markdown-body h5 {
  font-size: 1em;
}
.article-entry h6,
.wl-content h6,
.vcontent h6,
.gt-header-preview.markdown-body h6,
.gt-comment-content .gt-comment-body.markdown-body h6 {
  font-size: 1em;
  color: var(--grey-9);
}
.article-entry hr,
.wl-content hr,
.vcontent hr,
.gt-header-preview.markdown-body hr,
.gt-comment-content .gt-comment-body.markdown-body hr {
  margin: 10px 0;
  opacity: 0.3;
  height: 4px;
  background-image: linear-gradient(to right, var(--red-0) 50%, transparent 0%);
  background-size: 50px 4px;
  background-repeat: repeat-x;
  border: none;
  filter: drop-shadow(0px 0px 2px var(--red-1));
  transition: opacity 0.3s, color 0.3s;
}
.article-entry hr:hover,
.wl-content hr:hover,
.vcontent hr:hover,
.gt-header-preview.markdown-body hr:hover,
.gt-comment-content .gt-comment-body.markdown-body hr:hover {
  opacity: 0.5;
}
.article-entry strong,
.wl-content strong,
.vcontent strong,
.gt-header-preview.markdown-body strong,
.gt-comment-content .gt-comment-body.markdown-body strong {
  font-weight: bold;
}
.article-entry em,
.wl-content em,
.vcontent em,
.gt-header-preview.markdown-body em,
.gt-comment-content .gt-comment-body.markdown-body em,
.article-entry cite,
.wl-content cite,
.vcontent cite,
.gt-header-preview.markdown-body cite,
.gt-comment-content .gt-comment-body.markdown-body cite {
  font-style: italic;
}
.article-entry sup,
.wl-content sup,
.vcontent sup,
.gt-header-preview.markdown-body sup,
.gt-comment-content .gt-comment-body.markdown-body sup,
.article-entry sub,
.wl-content sub,
.vcontent sub,
.gt-header-preview.markdown-body sub,
.gt-comment-content .gt-comment-body.markdown-body sub {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.article-entry sup,
.wl-content sup,
.vcontent sup,
.gt-header-preview.markdown-body sup,
.gt-comment-content .gt-comment-body.markdown-body sup {
  top: -0.5em;
}
.article-entry sub,
.wl-content sub,
.vcontent sub,
.gt-header-preview.markdown-body sub,
.gt-comment-content .gt-comment-body.markdown-body sub {
  bottom: -0.2em;
}
.article-entry small,
.wl-content small,
.vcontent small,
.gt-header-preview.markdown-body small,
.gt-comment-content .gt-comment-body.markdown-body small {
  font-size: 0.85em;
}
.article-entry acronym,
.wl-content acronym,
.vcontent acronym,
.gt-header-preview.markdown-body acronym,
.gt-comment-content .gt-comment-body.markdown-body acronym,
.article-entry abbr,
.wl-content abbr,
.vcontent abbr,
.gt-header-preview.markdown-body abbr,
.gt-comment-content .gt-comment-body.markdown-body abbr {
  text-decoration: none;
  border-bottom: 1px dotted;
}
.article-entry ul,
.wl-content ul,
.vcontent ul,
.gt-header-preview.markdown-body ul,
.gt-comment-content .gt-comment-body.markdown-body ul,
.article-entry ol,
.wl-content ol,
.vcontent ol,
.gt-header-preview.markdown-body ol,
.gt-comment-content .gt-comment-body.markdown-body ol,
.article-entry dl,
.wl-content dl,
.vcontent dl,
.gt-header-preview.markdown-body dl,
.gt-comment-content .gt-comment-body.markdown-body dl {
  margin: 0 20px;
  line-height: 1.8em;
}
.article-entry ul ul,
.wl-content ul ul,
.vcontent ul ul,
.gt-header-preview.markdown-body ul ul,
.gt-comment-content .gt-comment-body.markdown-body ul ul,
.article-entry ol ul,
.wl-content ol ul,
.vcontent ol ul,
.gt-header-preview.markdown-body ol ul,
.gt-comment-content .gt-comment-body.markdown-body ol ul,
.article-entry ul ol,
.wl-content ul ol,
.vcontent ul ol,
.gt-header-preview.markdown-body ul ol,
.gt-comment-content .gt-comment-body.markdown-body ul ol,
.article-entry ol ol,
.wl-content ol ol,
.vcontent ol ol,
.gt-header-preview.markdown-body ol ol,
.gt-comment-content .gt-comment-body.markdown-body ol ol {
  margin-top: 0;
  margin-bottom: 0;
}
.article-entry ul,
.wl-content ul,
.vcontent ul,
.gt-header-preview.markdown-body ul,
.gt-comment-content .gt-comment-body.markdown-body ul {
  list-style: disc;
}
.article-entry ol,
.wl-content ol,
.vcontent ol,
.gt-header-preview.markdown-body ol,
.gt-comment-content .gt-comment-body.markdown-body ol {
  list-style: decimal;
}
.article-entry dt,
.wl-content dt,
.vcontent dt,
.gt-header-preview.markdown-body dt,
.gt-comment-content .gt-comment-body.markdown-body dt {
  font-weight: bold;
}
:root {
  --font-icon: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome";
}
.tag-wrap .archives-tag-list-link:before {
  font-family: var(--font-icon);
  content: "\f02b";
}
.category-wrap .archives-category-list-link:before {
  font-family: var(--font-icon);
  content: "\f02e";
}
.article-date-link:before {
  font-family: var(--font-icon);
  content: "\f017";
}
.article-category-link:before {
  font-family: var(--font-icon);
  content: "\f02e";
}
.article-tag-list-link:before {
  font-family: var(--font-icon);
  content: "\f02b";
}
.article-comment-link:before {
  font-family: var(--font-icon);
  content: "\f075";
}
.icon-copyright:before {
  font-family: var(--font-icon);
  content: "\f1f9";
}
.icon-brush:before {
  font-family: var(--font-icon);
  content: "\f1fc";
}
.icon-coffee:before {
  font-family: var(--font-icon);
  content: "\f0f4";
}
.icon-eye:before {
  font-family: var(--font-icon);
  content: "\f06e";
}
.icon-user:before {
  font-family: var(--font-icon);
  content: "\f007";
}
#main-nav-toggle:before {
  font-family: var(--font-icon);
  content: "\f0c9";
}
#nav-rss-link:before {
  font-family: var(--font-icon);
  content: "\f09e";
}
#nav-search-btn:before {
  font-family: var(--font-icon);
  content: "\f002";
}
#nav-sun-btn:before {
  font-family: var(--font-icon);
  content: "\f185";
}
#nav-moon-btn:before {
  font-family: var(--font-icon);
  content: "\f186";
}
#nav-circle-half-stroke-btn:before {
  font-family: var(--font-icon);
  content: "\f042";
}
#nav-language-btn:before {
  font-family: var(--font-icon);
  content: "\f1ab";
}
.icon-copy:before {
  font-family: var(--font-icon);
  content: "\f0c5";
}
.icon-chevron-down:before {
  font-family: var(--font-icon);
  content: "\f078";
}
.icon-check:before {
  font-family: var(--font-icon);
  content: "\f00c";
}
.icon-times:before {
  font-family: var(--font-icon);
  content: "\f00d";
}
.icon-calendar:before {
  font-family: var(--font-icon);
  content: "\f073";
}
.icon-pencil:before {
  font-family: var(--font-icon);
  content: "\f5ad";
}
.icon-clock:before {
  font-family: var(--font-icon);
  content: "\f252";
}
.post-sticky:before {
  font-family: var(--font-icon);
  content: "\f164";
}
.reimu-popup .popup-btn-close:before {
  font-family: var(--font-icon);
  content: "\f057";
}
.reimu-search-input-icon:before {
  font-family: var(--font-icon);
  content: "\f002";
}
.ais-pagination--item__previous a:before {
  font-family: var(--font-icon);
  content: "\f104";
}
.ais-pagination--item__next a:before {
  font-family: var(--font-icon);
  content: "\f105";
}
.icon-github:before {
  content: "\f09b";
}
.icon-instagram:before {
  content: "\f16d";
}
.icon-discord:before {
  content: "\f392";
}
.icon-email:before {
  content: "\f0e0";
}
.sidebar-btn-wrapper .sidebar-toc-btn:before {
  font-family: var(--font-icon);
  content: "\f0e8";
}
.sidebar-btn-wrapper .sidebar-common-btn:before {
  font-family: var(--font-icon);
  content: "\e3af";
}
.sidebar-top .arrow-up:before {
  font-family: var(--font-icon);
  content: "\f062";
}
.icon-link:before {
  font-family: var(--font-icon);
  content: "\f0c1";
}
.icon-globe:before {
  font-family: var(--font-icon);
  content: "\f0ac";
}
.icon-creative-commons:before {
  font-family: var(--font-icon);
  content: "\f25e";
}
.icon-taichi:before {
  font-family: var(--font-icon);
  content: "\f6ad";
}
.icon-image:before {
  font-family: var(--font-icon);
  content: "\f03e";
}
.icon {
  font-family: var(--font-icon);
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
body {
  line-height: 1;
  color: #000;
  background: #fff;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
a img {
  border: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Mulish','Noto Serif SC', '-apple-system','PingFang SC','Microsoft YaHei','sans-serif';
  font-weight: 700;
}
input,
button {
  margin: 0;
  padding: 0;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
html,
body,
#container {
  height: 100%;
  scroll-behavior: smooth;
  cursor: var(--cursor-default);
}
body {
  width: 100%;
  background: var(--color-background);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  font-family: 'Mulish','Noto Serif SC', '-apple-system','PingFang SC','Microsoft YaHei','sans-serif';
  transition: background 1s;
  color: var(--color-default);
}
body ::selection {
  background: var(--red-1);
  color: #fff;
}
a,
button {
  cursor: var(--cursor-pointer) !important;
}
.site-search input {
  cursor: var(--cursor-text) !important;
}
#main span:not(button span),
#main p:not(button p),
#main code,
#main kbd,
#main input,
#main textarea {
  cursor: var(--cursor-text) !important;
}
#main nav span {
  cursor: var(--cursor-default) !important;
}
#container {
  position: relative;
}
.mobile-nav-on {
  overflow: hidden !important;
}
#wrap {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: 1s;
  background: var(--color-background);
}
#main {
  flex: 1;
  padding: 0 10px;
  max-width: 100%;
  box-sizing: border-box;
}
@media screen and (max-width: 959px) {
  #main {
    min-width: 100%;
  }
}
#content {
  position: relative;
  display: flex;
  padding-top: 5px;
  align-items: stretch;
  max-width: 1350px;
  margin: 0 auto;
  overflow: visible;
}
@media screen and (min-width: 960px) {
  .sidebar-left #main,
  .sidebar-right #main {
    padding: 0;
    width: 73%;
    margin: 0 1%;
  }
}
#content.sidebar-right {
  flex-direction: row-reverse;
}
#mask {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 1;
  transition: 0.3s;
}
#mask.hide {
  opacity: 0;
  visibility: hidden;
}
#header {
  min-height: 400px;
  height: 35vh;
  position: relative;
}
#header img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  z-index: -2;
  user-select: none;
  display: block;
  object-fit: cover;
  transition: 0.3s;
  -webkit-mask: linear-gradient(to top, transparent, #fff 50%);
  mask: linear-gradient(to top, transparent, #fff 50%);
}
@media screen and (max-width: 959px) {
  #header img {
    height: 120%;
  }
}
@media screen and (max-width: 767px) {
  #header img {
    height: 100%;
  }
}
#header-outer {
  height: 100%;
  position: relative;
  max-width: 100%;
}
[data-theme="dark"] #header-nav:hover {
  background: var(--color-header-background);
}
#header-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  background: var(--color-header-background);
  box-shadow: 0 0 10px 3px var(--color-hover-shadow);
  transition: background 1s, top 0.3s;
  z-index: 200;
}
#header-nav:hover {
  background: rgba(255,255,255,0.95);
}
#header-nav.header-nav-hidden {
  top: -80px;
}
#header-title {
  font-family: 'Mulish','Noto Serif SC', '-apple-system','PingFang SC','Microsoft YaHei','sans-serif';
  font-weight: 700;
  text-align: center;
  position: absolute;
  top: 50%;
  margin: -20px 2.5% 0;
  width: 95%;
}
#logo,
#subtitle {
  text-decoration: none;
  color: #fff;
}
#logo {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 2px;
  display: inline-block;
  transform: translateY(-20%);
  text-shadow: 0 0 0.5rem rgba(0,0,0,0.7);
}
@media screen and (max-width: 959px) {
  #logo {
    font-size: 35px;
  }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  #logo {
    font-size: 30px;
  }
}
@media screen and (max-width: 479px) {
  #logo {
    font-size: 30px;
  }
}
#subtitle {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
}
@media screen and (max-width: 959px) {
  #subtitle {
    font-size: 15px;
  }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  #subtitle {
    font-size: 14px;
  }
}
@media screen and (max-width: 479px) {
  #subtitle {
    font-size: 13px;
  }
}
#subtitle-wrap {
  margin-top: 18px;
}
#main-nav {
  display: flex;
  align-items: center;
}
.nav-icon,
.main-nav-link-wrap,
.main-nav-link,
.main-nav-icon {
  color: var(--red-0);
  opacity: 0.8;
  text-decoration: none;
  transition: 0.2s;
  padding: 20px 15px;
}
.main-nav-link-wrap {
  padding: 0 15px;
  display: flex;
  transition: 0.3s;
}
.main-nav-link-wrap:hover {
  opacity: 1;
}
@media screen and (max-width: 959px) {
  .main-nav-link-wrap {
    padding: 0 10px;
  }
}
@media screen and (max-width: 767px) {
  .main-nav-link-wrap {
    padding: 0 4px;
  }
}
.nav-icon {
  text-align: center;
  font-size: 14px;
  width: 14px;
  height: 14px;
  will-change: transform;
}
.nav-icon:hover {
  opacity: 1;
  transform: scale(1.1);
}
[data-theme="dark"] .main-nav-link,
[data-theme="dark"] .nav-icon,
[data-theme="dark"] .main-nav-link-wrap {
  color: var(--red-2);
}
@media screen and (max-width: 767px) {
  .main-nav-link-wrap {
    display: none;
  }
}
.main-nav-link-wrap:hover .main-nav-icon:before {
  transform: rotate(90deg) scale(1.1);
}
.main-nav-link-wrap:hover .main-nav-icon {
  transform: scale(1.1);
}
.main-nav-link-wrap:hover .main-nav-icon.rotate {
  transform: rotate(90deg) scale(1.1);
}
.main-nav-link {
  letter-spacing: 1px;
  font-weight: 700;
  opacity: 0.7;
}
.main-nav-icon {
  cursor: var(--cursor-pointer) !important;
  padding: 15px 5px;
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 400;
  transition: transform 0.3s, color 0.3s;
  will-change: transform;
}
.main-nav-icon.rotate {
  transform: rotate(90deg);
}
.main-nav-icon:before {
  font-size: 24px;
  font-weight: 400;
  transform: rotate(90deg);
  transition: transform 0.3s, color 0.3s;
  will-change: transform;
}
#main-nav-toggle {
  display: none;
}
@media screen and (max-width: 767px) {
  #main-nav-toggle {
    display: block;
  }
}
#sub-nav,
#i18n-nav {
  display: flex;
  align-items: center;
}
#nav-sun-btn:before,
#nav-moon-btn:before,
#nav-circle-half-stroke-btn:before {
  font-weight: 700;
}
#i18n-nav {
  margin-left: 8px;
}
.custom-dropdown {
  position: relative;
}
.select-selected {
  padding: 14px;
  color: var(--red-2);
  cursor: var(--cursor-pointer) !important;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-radius: 5px;
  background-color: var(--color-wrap);
  margin-top: 5px;
  display: none;
  z-index: 1;
  font-size: 14px;
  overflow: hidden;
  box-shadow: 0 0 10px 3px var(--color-hover-shadow);
}
.select-items li {
  list-style: none;
  padding: 10px;
  cursor: var(--cursor-pointer) !important;
  color: var(--red-2);
  transition: 1s;
}
.select-items li:hover {
  color: #fff;
  background: var(--red-1);
}
.select-items.show {
  display: block;
}
.select-items li.selected {
  background: var(--red-1);
  color: #fff;
}
.hr-line {
  margin: 10px 35px;
  opacity: 0.3;
  height: 4px;
  background-image: linear-gradient(to right, var(--red-0) 50%, transparent 0%);
  background-size: 50px 4px;
  background-repeat: repeat-x;
  filter: drop-shadow(0px 0px 2px var(--red-1));
  transition: opacity 0.3s, color 0.3s;
}
.hr-line:hover {
  opacity: 0.5;
}
.article-inner {
  background: var(--color-wrap);
  border-radius: 10px;
  display: flow-root;
  transition: 0.3s;
}
.article-meta {
  display: flex;
  flex-direction: column;
  padding: 20px 35px 0;
}
.article-date-link,
.article-category-link {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--red-1);
  background: var(--red-5);
  border-radius: 10px;
  padding: 10px 18px;
  margin: 0 12px 1em 0;
  box-shadow: 0 0 5px 2px var(--color-meta-shadow);
  transition: 0.3s;
}
.article-date {
  display: flex;
}
.article-date-link:before {
  margin-right: 10px;
}
.article-category {
  display: flex;
  flex-wrap: wrap;
}
.article-category-link:before {
  font-weight: 700;
  margin-right: 10px;
}
.article-entry {
  overflow: hidden;
  color: var(--color-default);
  padding: 0 35px;
}
.article-entry:before,
.article-entry:after {
  content: "";
  display: table;
}
.article-entry:after {
  clear: both;
}
@media screen and (max-width: 767px) {
  .article-entry {
    padding: 0 20px;
  }
}
.article-entry p,
.article-entry table {
  line-height: 1.8em;
  margin: 1.2em 0;
}
.article-entry h1,
.article-entry h2,
.article-entry h3,
.article-entry h4,
.article-entry h5,
.article-entry h6 {
  font-weight: bold;
  line-height: 1.2em;
  margin: 1.2em 0 0.8em;
}
.article-entry h1:before,
.article-entry h2:before,
.article-entry h3:before,
.article-entry h4:before,
.article-entry h5:before,
.article-entry h6:before {
  font-family: var(--font-icon);
  font-weight: normal;
}
.article-entry h1 a,
.article-entry h2 a,
.article-entry h3 a,
.article-entry h4 a,
.article-entry h5 a,
.article-entry h6 a {
  font-family: var(--font-icon);
  opacity: 0.5;
  margin-right: 5px;
  transition: 0.3s;
}
.article-entry h1 a:hover,
.article-entry h2 a:hover,
.article-entry h3 a:hover,
.article-entry h4 a:hover,
.article-entry h5 a:hover,
.article-entry h6 a:hover {
  opacity: 0.8;
  text-decoration: none !important;
}
.article-entry h2 {
  margin-bottom: 40px;
}
.article-entry a {
  color: var(--color-link);
  text-decoration: none;
  word-break: break-word;
}
.article-entry a:hover {
  text-decoration: underline;
}
.article-entry a:not(:has(code),
.article-entry h1 a,
.article-entry h2 a,
.article-entry h3 a,
.article-entry h4 a,
.article-entry h5 a,
.article-entry h6 a,
.article-entry .post-link-card a,
.article-entry .friend-item-wrap a,
.article-entry a.article-gallery-item)::after {
  font-family: var(--font-icon);
  content: "\f0c1";
  font-size: 0.5em;
  margin: 0 0.5em;
  vertical-align: bottom;
  font-style: normal;
}
.article-entry a:not(h1 a,
.article-entry h2 a,
.article-entry h3 a,
.article-entry h4 a,
.article-entry h5 a,
.article-entry h6 a) code::after {
  font-family: var(--font-icon);
  content: "\f0c1";
  font-size: 0.5em;
  margin: 0 0.5em;
  vertical-align: bottom;
  font-style: normal;
}
.article-entry ul,
.article-entry ol,
.article-entry dl {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.article-entry li:hover::marker {
  transition: color 0.2s;
  color: var(--red-1);
}
.article-entry img {
  opacity: 0;
  transition: 0.3s;
}
.article-entry img,
.article-entry video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}
.article-entry img.lazyloaded {
  opacity: 1;
  animation: blur 0.8s ease-in-out forwards;
}
.article-entry iframe {
  border: none;
}
.article-entry table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.article-entry th {
  font-weight: bold;
  border-bottom: 3px solid var(--color-border);
  padding-bottom: 0.5em;
}
.article-entry td {
  border-bottom: 1px solid var(--color-border);
  padding: 10px 0;
}
.article-entry blockquote {
  background: var(--red-5-5);
  border-left: 6px var(--red-4) solid;
  margin: 1.2em 0;
  border-radius: 10px;
  transition: 0.3s;
  padding: 1px 10px;
  box-shadow: 0 0 5px 2px var(--color-meta-shadow);
}
.article-entry blockquote:hover {
  box-shadow: 0 0 6px 4px var(--color-meta-shadow);
}
.article-entry blockquote footer {
  font-size: 14px;
  margin: 1.8em 0;
}
.article-entry blockquote footer cite:before {
  content: "—";
  padding: 0 0.5em;
}
.article-entry details {
  padding: 18px 12px;
  border-radius: 10px;
  background-color: var(--red-5-5);
  box-shadow: 0 0 5px 2px var(--color-meta-shadow);
  transition: 0.3s;
}
.article-entry details:hover {
  box-shadow: 0 0 6px 4px var(--color-meta-shadow);
}
.article-entry summary {
  font-size: 1.1em;
  font-weight: bold;
  cursor: var(--cursor-pointer) !important;
  padding: 8px;
  border: none;
  border-radius: 10px;
  transition: 0.3s;
}
.article-entry summary:hover {
  background-color: var(--red-5);
}
.article-entry details[open] summary {
  background-color: var(--red-5);
}
.article-entry details[open] summary:hover {
  background-color: var(--red-5);
}
.article-entry details p {
  margin: 20px 0 0;
  padding: 10px;
  background-color: var(--color-footer-background);
  border-radius: 10px;
  transition: 0.3s;
}
.article-entry .pullquote {
  text-align: left;
  width: 45%;
  margin: 0;
}
.article-entry .pullquote.left {
  margin-left: 0.5em;
  margin-right: 1em;
}
.article-entry .pullquote.right {
  margin-right: 0.5em;
  margin-left: 1em;
}
.article-entry .caption {
  color: var(--grey-9);
  display: block;
  font-size: 0.9em;
  margin-top: 0.5em;
  position: relative;
  text-align: center;
}
.article-entry .video-container {
  position: relative;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
}
.article-entry .video-container iframe,
.article-entry .video-container object,
.article-entry .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}
.article-more-link a {
  display: inline-block;
  line-height: 1em;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--red-5);
  color: var(--red-1);
  text-decoration: none;
  box-shadow: 0 0 5px 2px var(--color-meta-shadow);
  transition: 0.3s;
}
.article-more-link a:hover {
  background: var(--color-link);
  color: #fff;
  text-decoration: none;
}
.article-footer {
  font-size: 14px;
  margin: 0 35px 20px;
}
.article-footer:before,
.article-footer:after {
  content: "";
  display: table;
}
.article-footer:after {
  clear: both;
}
@media screen and (max-width: 767px) {
  .article-footer {
    margin: 0 20px 20px;
  }
}
.article-footer:hover:before {
  opacity: 0.5;
}
.article-footer:before {
  content: "";
  display: block;
  margin-top: 10px;
  opacity: 0.3;
  height: 4px;
  background-image: linear-gradient(to right, var(--red-0) 50%, transparent 0%);
  background-size: 50px 4px;
  background-repeat: repeat-x;
  filter: drop-shadow(0px 0px 2px var(--red-1));
  transition: 0.3s;
}
.article-footer a {
  text-decoration: none;
}
.article-tag-list-link,
.article-comment-link,
.article-visitor-link {
  color: var(--red-1);
  margin-top: 20px;
}
.article-tag-list-item {
  float: left;
  text-decoration: none;
  text-transform: uppercase;
  background: var(--red-5);
  border-radius: 10px;
  padding: 8px 15px;
  margin-top: 20px;
  margin-right: 10px;
  box-shadow: 0 0 5px 2px var(--color-meta-shadow);
}
.article-tag-list-link:before {
  margin-right: 10px;
}
.article-comment-link {
  float: right;
  background: var(--red-5);
  margin-left: 20px;
  border-radius: 10px;
  padding: 8px 15px;
}
.article-comment-link:before {
  margin-right: 10px;
}
.article-visitor-link {
  float: right;
  font-size: 14px;
  background: var(--red-5);
  margin-left: 20px;
  border-radius: 10px;
  padding: 8px 15px;
}
#article-nav {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #article-nav {
    flex-direction: row;
  }
}
.article-nav-link-wrap {
  color: #fff;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
  opacity: 0.9;
  transition: opacity 0.3s;
  height: 150px;
  min-height: 150px;
  flex-shrink: 0;
}
.article-nav-link-wrap a,
.article-nav-link-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: brightness(70%);
}
.article-nav-link-wrap img {
  display: block;
  opacity: 0;
  object-fit: cover;
  z-index: -1;
}
.article-nav-link-wrap img.lazyloaded {
  opacity: 1;
}
.article-nav-link-wrap:hover {
  opacity: 1;
}
.article-nav-link-right {
  align-items: flex-end;
  padding-right: 20px;
}
.article-nav-caption {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
}
.article-nav-title {
  font-size: 1.2em;
  line-height: 1.8em;
  margin-top: 0.8em;
  text-shadow: 0 0.2rem 0.3rem rgba(0,0,0,0.5);
}
.article-gallery {
  background: #000;
  position: relative;
}
.article-gallery-photos {
  position: relative;
  overflow: hidden;
}
.article-gallery-img {
  display: none;
  max-width: 100%;
}
.article-gallery-img:first-child {
  display: block;
}
.article-gallery-img.loaded {
  position: absolute;
  display: block;
}
.article-gallery-img img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
}
.katex-display::-webkit-scrollbar {
  display: none;
}
.katex {
  width: calc(100% - 2px);
}
.katex-html {
  padding: 3px;
}
.katex-html .base {
  margin: 0 auto;
}
.katex-html:has(span.tag) {
  display: flex !important;
}
.katex-display>.katex>.katex-html>.tag {
  position: relative !important;
  float: right;
  margin-left: 0.25rem;
}
mjx-container {
  display: inline-grid;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  min-width: auto !important;
}
mjx-container::-webkit-scrollbar {
  display: none;
}
.post-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.post-wrap-left,
.post-wrap-right {
  width: 100%;
  height: 230px;
  margin-bottom: 40px;
  position: relative;
  border-radius: 10px;
  background: var(--color-wrap);
  display: flex;
  transition: 0.3s;
}
[data-theme="dark"] .post-wrap-left,
[data-theme="dark"] .post-wrap-right {
  box-shadow: 0 0 10px 3px var(--color-hover-shadow);
}
.post-wrapper {
  border-radius: 10px;
  transition: 0.3s;
}
.post-wrapper .aos-animate {
  transition-property: initial !important;
}
@media screen and (min-width: 768px) {
  .post-wrapper .aos-animate:hover {
    box-shadow: 0 0 10px 3px var(--color-hover-shadow);
  }
}
.post-wrapper img {
  will-change: transform;
}
@media screen and (min-width: 768px) {
  .post-wrapper:hover {
    transform: scale(1.01);
  }
  .post-wrapper:hover img {
    transform: scale(1.05);
  }
}
.post-wrap-right {
  flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
  .post-wrap-left,
  .post-wrap-right {
    flex-direction: column;
    height: 400px;
  }
}
.post-info {
  height: 100%;
  width: 100%;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
}
.post-meta {
  display: flex;
  justify-content: flex-end;
  margin: 5px 0;
}
.post-meta span {
  font-size: 14px;
  color: var(--grey-7);
  margin: 0 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.post-meta span:before {
  margin: 0 10px;
}
@media screen and (max-width: 767px) {
  .post-meta span:before {
    margin: 0;
  }
}
.post-article {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  line-height: 30px;
  font-size: 15px;
  color: var(--grey-7);
}
.post-article a {
  color: var(--color-link);
}
.post-cover-left,
.post-cover-right {
  width: 40%;
  position: relative;
  overflow: hidden;
  min-height: 95px;
  background-color: var(--color-wrap);
  flex-shrink: 0;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .post-cover-left,
  .post-cover-right {
    width: 100%;
    height: 45%;
  }
}
.post-cover-left img,
.post-cover-right img {
  display: block;
  opacity: 0;
  transition: 0.2s;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.post-cover-left img.lazyloaded,
.post-cover-right img.lazyloaded {
  opacity: 1;
  animation: blur 0.8s forwards;
}
@media screen and (min-width: 768px) {
  .post-cover-left {
    border-radius: 10px 0 0 10px;
    -webkit-clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%);
  }
}
@media screen and (max-width: 767px) {
  .post-cover-left {
    border-radius: 10px 10px 0 0;
  }
}
@media screen and (min-width: 768px) {
  .post-cover-right {
    border-radius: 0 10px 10px 0;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 8% 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 8% 100%);
  }
}
@media screen and (max-width: 767px) {
  .post-cover-right {
    border-radius: 10px 10px 0 0;
  }
}
.post-title {
  padding: 20px 0;
  color: var(--color-link);
  font-size: 25px;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s;
}
.post-sticky {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 70px;
  height: 35px;
  background: var(--color-sticky);
  color: var(--red-1);
  font-weight: bold;
  font-size: 15px;
  z-index: 1;
  transition: 0.3s;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.post-sticky:before {
  margin-right: 5px;
}
#comments {
  background: var(--color-wrap);
  padding: 20px 35px;
  border-radius: 10px;
  margin: 10px 0;
}
#comments a {
  color: var(--color-link);
}
#comments .comment-header {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#comments .comment-header .comment-title {
  margin: 0 0 10px;
  width: 100%;
  text-align: center;
  color: var(--color-default);
}
#comments .comment-header .comment-selector {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
#comments .comment-header .comment-selector-wrap {
  display: flex;
  overflow: hidden;
  border-radius: 0.4em;
}
#comments .comment-header .comment-selector-wrap .selector-item {
  font-size: 0.8rem;
  color: #555;
  background-color: #c9ccd0;
  transition: 0.3s;
  padding: 0.31rem 0.32rem;
  cursor: var(--cursor-pointer) !important;
  font-weight: bold;
}
#comments .comment-header .comment-selector-wrap .selector-item span {
  cursor: var(--cursor-pointer) !important;
}
[data-theme="dark"] #comments .comment-header .comment-selector-wrap .selector-item {
  color: #ccc;
  background-color: #555;
}
#comments .comment-header .comment-selector-wrap .selector-item:hover {
  background-color: var(--red-4);
}
#comments .comment-header .comment-selector-wrap .selector-item.active {
  color: #fff;
  background-color: var(--red-1);
}
.wl-emoji-popup {
  max-width: calc(100vw - 90px) !important;
}
.wl-count {
  color: var(--color-default);
}
.wl-header input {
  font-size: revert !important;
}
.wl-panel {
  margin: 0.5em 0 !important;
}
.wl-action,
.wl-sort li {
  cursor: var(--cursor-pointer) !important;
}
.wl-header label {
  cursor: var(--cursor-default) !important;
}
.wl-content,
.vcontent,
.gt-header-preview.markdown-body,
.gt-comment-content .gt-comment-body.markdown-body {
  color: var(--color-default) !important;
}
.wl-content p,
.vcontent p,
.gt-header-preview.markdown-body p,
.gt-comment-content .gt-comment-body.markdown-body p,
.wl-content table,
.vcontent table,
.gt-header-preview.markdown-body table,
.gt-comment-content .gt-comment-body.markdown-body table {
  line-height: 1.8em;
  margin: 1.2em 0;
}
.wl-content h1,
.vcontent h1,
.gt-header-preview.markdown-body h1,
.gt-comment-content .gt-comment-body.markdown-body h1,
.wl-content h2,
.vcontent h2,
.gt-header-preview.markdown-body h2,
.gt-comment-content .gt-comment-body.markdown-body h2,
.wl-content h3,
.vcontent h3,
.gt-header-preview.markdown-body h3,
.gt-comment-content .gt-comment-body.markdown-body h3,
.wl-content h4,
.vcontent h4,
.gt-header-preview.markdown-body h4,
.gt-comment-content .gt-comment-body.markdown-body h4,
.wl-content h5,
.vcontent h5,
.gt-header-preview.markdown-body h5,
.gt-comment-content .gt-comment-body.markdown-body h5,
.wl-content h6,
.vcontent h6,
.gt-header-preview.markdown-body h6,
.gt-comment-content .gt-comment-body.markdown-body h6 {
  font-weight: bold;
  line-height: 1.2em;
  margin: 1.2em 0 0.8em;
}
.wl-content h2,
.vcontent h2,
.gt-header-preview.markdown-body h2,
.gt-comment-content .gt-comment-body.markdown-body h2 {
  margin-bottom: 40px;
}
.wl-content a,
.vcontent a,
.gt-header-preview.markdown-body a,
.gt-comment-content .gt-comment-body.markdown-body a {
  color: var(--color-link);
  text-decoration: none;
  word-break: break-word;
}
.wl-content a:hover,
.vcontent a:hover,
.gt-header-preview.markdown-body a:hover,
.gt-comment-content .gt-comment-body.markdown-body a:hover {
  text-decoration: underline;
}
.wl-content ul,
.vcontent ul,
.gt-header-preview.markdown-body ul,
.gt-comment-content .gt-comment-body.markdown-body ul,
.wl-content ol,
.vcontent ol,
.gt-header-preview.markdown-body ol,
.gt-comment-content .gt-comment-body.markdown-body ol,
.wl-content dl,
.vcontent dl,
.gt-header-preview.markdown-body dl,
.gt-comment-content .gt-comment-body.markdown-body dl {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.wl-content li:hover::marker,
.vcontent li:hover::marker,
.gt-header-preview.markdown-body li:hover::marker,
.gt-comment-content .gt-comment-body.markdown-body li:hover::marker {
  transition: color 0.2s;
  color: var(--red-1);
}
.wl-content img,
.vcontent img,
.gt-header-preview.markdown-body img,
.gt-comment-content .gt-comment-body.markdown-body img,
.wl-content video,
.vcontent video,
.gt-header-preview.markdown-body video,
.gt-comment-content .gt-comment-body.markdown-body video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}
.wl-content table,
.vcontent table,
.gt-header-preview.markdown-body table,
.gt-comment-content .gt-comment-body.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.wl-content th,
.vcontent th,
.gt-header-preview.markdown-body th,
.gt-comment-content .gt-comment-body.markdown-body th {
  font-weight: bold;
  border-bottom: 3px solid var(--color-border);
  padding-bottom: 0.5em;
}
.wl-content td,
.vcontent td,
.gt-header-preview.markdown-body td,
.gt-comment-content .gt-comment-body.markdown-body td {
  border-bottom: 1px solid var(--color-border);
  padding: 10px 0;
}
.wl-content blockquote,
.vcontent blockquote,
.gt-header-preview.markdown-body blockquote,
.gt-comment-content .gt-comment-body.markdown-body blockquote {
  background: var(--red-5-5);
  border-left: 6px var(--red-4) solid !important;
  margin: 1.2em 0 !important;
  border-radius: 10px;
  transition: 0.3s;
  padding: 1px 10px !important;
  box-shadow: 0 0 5px 2px var(--color-meta-shadow);
}
.wl-content blockquote:hover,
.vcontent blockquote:hover,
.gt-header-preview.markdown-body blockquote:hover,
.gt-comment-content .gt-comment-body.markdown-body blockquote:hover {
  box-shadow: 0 0 6px 4px var(--color-meta-shadow);
}
.wl-content blockquote footer,
.vcontent blockquote footer,
.gt-header-preview.markdown-body blockquote footer,
.gt-comment-content .gt-comment-body.markdown-body blockquote footer {
  font-size: 14px;
  margin: 1.8em 0;
}
.wl-content blockquote footer cite:before,
.vcontent blockquote footer cite:before,
.gt-header-preview.markdown-body blockquote footer cite:before,
.gt-comment-content .gt-comment-body.markdown-body blockquote footer cite:before {
  content: "—";
  padding: 0 0.5em;
}
.wl-content details,
.vcontent details,
.gt-header-preview.markdown-body details,
.gt-comment-content .gt-comment-body.markdown-body details {
  padding: 18px 12px;
  border-radius: 10px;
  background-color: var(--red-5-5);
  box-shadow: 0 0 5px 2px var(--color-meta-shadow);
  transition: 0.3s;
}
.wl-content details:hover,
.vcontent details:hover,
.gt-header-preview.markdown-body details:hover,
.gt-comment-content .gt-comment-body.markdown-body details:hover {
  box-shadow: 0 0 6px 4px var(--color-meta-shadow);
}
.wl-content summary,
.vcontent summary,
.gt-header-preview.markdown-body summary,
.gt-comment-content .gt-comment-body.markdown-body summary {
  font-size: 1.1em;
  font-weight: bold;
  cursor: var(--cursor-pointer) !important;
  padding: 8px;
  border: none;
  border-radius: 10px;
  transition: 0.3s;
}
.wl-content summary:hover,
.vcontent summary:hover,
.gt-header-preview.markdown-body summary:hover,
.gt-comment-content .gt-comment-body.markdown-body summary:hover {
  background-color: var(--red-5);
}
.wl-content details[open] summary,
.vcontent details[open] summary,
.gt-header-preview.markdown-body details[open] summary,
.gt-comment-content .gt-comment-body.markdown-body details[open] summary {
  background-color: var(--red-5);
}
.wl-content details[open] summary:hover,
.vcontent details[open] summary:hover,
.gt-header-preview.markdown-body details[open] summary:hover,
.gt-comment-content .gt-comment-body.markdown-body details[open] summary:hover {
  background-color: var(--red-5);
}
.wl-content details p,
.vcontent details p,
.gt-header-preview.markdown-body details p,
.gt-comment-content .gt-comment-body.markdown-body details p {
  margin: 20px 0 0;
  padding: 10px;
  background-color: var(--color-footer-background);
  border-radius: 10px;
  transition: 0.3s;
}
.wl-content hr,
.vcontent hr,
.gt-header-preview.markdown-body hr,
.gt-comment-content .gt-comment-body.markdown-body hr {
  border-style: none !important;
  background-color: transparent !important;
}
.wl-content pre,
.vcontent pre,
.gt-header-preview.markdown-body pre,
.gt-comment-content .gt-comment-body.markdown-body pre,
.wl-content code,
.vcontent code,
.gt-header-preview.markdown-body code,
.gt-comment-content .gt-comment-body.markdown-body code {
  font-family: $font-code !important;
  font-size: 95% !important;
  transition: 0.3s;
  word-break: break-word;
}
.wl-content code:not(pre code),
.vcontent code:not(pre code),
.gt-header-preview.markdown-body code:not(pre code),
.gt-comment-content .gt-comment-body.markdown-body code:not(pre code) {
  background: var(--color-code-background) !important;
  padding: 1px 5px !important;
  border-radius: 5px !important;
  color: var(--color-link) !important;
}
.archives-outer-wrap {
  background: var(--color-wrap);
  border-radius: 10px;
  padding: 15px 0;
}
.archives-wrap {
  padding: 20px 50px;
}
.archive-year-wrap {
  margin-bottom: 2em;
  position: relative;
}
.archive-year-wrap:before {
  content: "";
  width: 100%;
  border-bottom: 1px solid var(--color-h2-border);
  position: absolute;
  bottom: -15px;
  transition: 1s;
}
.archive-year-wrap:after {
  content: "";
  position: absolute;
  background: var(--color-h2-after);
  width: 1em;
  height: 7px;
  bottom: -18px;
  left: 0;
  border-radius: 10px;
  box-shadow: 0 2px 12px var(--color-red-6-shadow);
  transition: 0.3s;
}
.archive-year-wrap:hover:after {
  width: 3em;
}
.archive-year {
  text-decoration: none;
  color: var(--color-archive-year);
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 25px;
}
.archive-article {
  padding: 15px 0 15px 25px;
  display: flex;
  align-items: center;
}
.archive-article:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 15px;
  background: var(--color-h2-after);
  margin: -2px 11px 0 -25px;
  box-shadow: 0 2px 12px var(--color-red-6-shadow);
  opacity: 0.5;
  transition: 0.2s;
  flex-shrink: 0;
}
.archive-article:hover:before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 1;
}
.archive-article:hover .archive-article-title {
  opacity: 1;
}
.archive-article-date-wrap {
  flex-shrink: 0;
}
.archive-article-date-wrap a {
  text-decoration: none;
}
.dt-published {
  color: var(--grey-9);
  margin-left: 5px;
}
.archive-article-title {
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  color: var(--red-0);
  transition: 0.3s;
  opacity: 0.7;
  margin-left: 15px;
}
#page-nav {
  margin: 50px auto;
  background: var(--color-wrap);
  border-radius: 10px;
  text-align: center;
  color: var(--grey-9);
  overflow: hidden;
  transition: 1s;
}
#page-nav:hover {
  box-shadow: 0 0 10px 2px var(--color-hover-shadow);
}
#page-nav a,
#page-nav span {
  padding: 10px 15px;
}
#page-nav a {
  color: var(--grey-9);
  text-decoration: none;
  transition: 0.2s;
}
#page-nav a:hover {
  background: var(--red-2);
  box-shadow: 0 0 10px var(--color-red-6-shadow);
  color: #fff;
}
#page-nav .prev {
  float: left;
  padding: 15px;
}
#page-nav .next {
  float: right;
  padding: 15px;
}
#page-nav .page-number {
  display: inline-block;
  border-radius: 10px;
  margin: 5px;
}
@media screen and (max-width: 479px) {
  #page-nav .page-number {
    display: none;
  }
}
#page-nav .current {
  background: var(--red-1);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 0 10px var(--color-red-6-shadow);
}
@media screen and (max-width: 479px) {
  #page-nav .current {
    display: inline-block;
  }
}
#page-nav .space {
  display: inline-block;
  margin: 5px;
  color: var(--color-border);
}
@media screen and (max-width: 479px) {
  #page-nav .space {
    display: none;
  }
}
.tag-wrap,
.category-wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 50px;
}
.tag-wrap a,
.category-wrap a {
  text-decoration: none;
}
.archives-tag-list-item,
.archives-category-list-item {
  display: flex;
  text-transform: uppercase;
  background: var(--red-5);
  border-radius: 10px;
  padding: 8px 15px;
  margin: 5px;
  box-shadow: 0 0 5px 2px var(--color-meta-shadow);
}
.archives-tag-list-link,
.archives-category-list-link {
  color: var(--red-1);
  font-size: 12px;
}
.archives-tag-list-link:before,
.archives-category-list-link:before {
  margin-right: 10px;
}
.archives-category-list-item {
  background: var(--red-5-5);
  padding: 10px 20px;
}
.archives-category-list-link {
  font-size: 14px;
}
.archives-category-list-link:before {
  font-weight: 700;
}
#footer {
  background-color: linear-gradient(to top, var(--color-footer-background) 50%, transparent);
  padding: 40px 0 20px;
  color: var(--grey-9);
  transition: 1s;
}
#footer:hover .footer-line {
  opacity: 0.5;
}
#footer a {
  color: var(--color-link);
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}
#footer .footer-beian a {
  color: var(--grey-9);
}
.footer-line {
  margin: 20px 0 40px;
  opacity: 0.3;
  width: 200%;
  height: 10px;
  background: linear-gradient(to left, var(--red-1) 50%, transparent 0%) repeat-x 0 0/100px 10px;
  transition: opacity 0.3s;
  animation: transform-all 3s linear infinite;
  filter: drop-shadow(0px 0px 2px var(--red-1));
}
#footer-info {
  line-height: 1.8em;
  font-size: 0.85em;
}
#footer-info div {
  margin: 5px 0;
  display: flex;
  justify-content: center;
}
.icon-brush,
.icon-coffee,
.icon-eye,
.icon-user {
  margin: 0 5px;
}
.footer-info-sep {
  width: 25px;
  opacity: 0.8;
}
.footer-info-sep.rotate {
  animation: rotate-all 3s linear infinite;
}
@supports (-webkit-mask: var(--footer-icon) no-repeat center/80%) {
  .footer-info-sep {
    background-color: var(--red-1);
    -webkit-mask: var(--footer-icon) no-repeat center/80%;
  }
}
@supports (mask: var(--footer-icon) no-repeat center/80%) {
  .footer-info-sep {
    background-color: var(--red-1);
    mask: var(--footer-icon) no-repeat center/80%;
  }
}
@supports not ((mask: var(--footer-icon) no-repeat center/80%) and (-webkit-mask: var(--footer-icon) no-repeat center/80%)) {
  .footer-info-sep {
    background: var(--footer-icon) no-repeat center/80%;
  }
}
.article-copyright {
  background: var(--red-5-5);
  border-left: 6px var(--red-4) solid;
  margin: 1.8em 0;
  border-radius: 10px;
  transition: 0.3s;
  padding: 5px 10px;
  box-shadow: 0 0 5px 2px var(--color-meta-shadow);
  position: relative;
  overflow: hidden;
  word-break: break-all;
}
.article-copyright .icon {
  margin: 0 4px;
}
.article-copyright p {
  font-size: 14px;
  line-height: 2;
  color: var(--color-default);
}
.article-copyright p strong {
  font-weight: 700;
}
.article-copyright a {
  color: var(--color-default);
  text-decoration: none;
}
.article-copyright a:hover {
  text-decoration: underline;
}
.article-copyright-bg {
  font-size: 120px;
  color: var(--red-3);
  opacity: 0.2;
  position: absolute;
  right: -15px;
  bottom: -40px;
}
@media screen and (min-width: 960px) {
  #mobile-nav {
    display: none;
  }
}
@media screen and (max-width: 959px) {
  #mobile-nav {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100%;
    background: var(--color-mobile-nav-background);
    z-index: 1001;
    transition: 0.3s;
    overflow: auto;
  }
  #mobile-nav::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  .mobile-nav-on #mobile-nav {
    left: 0;
  }
}
#mobile-nav .sidebar-wrap {
  background: var(--color-mobile-nav-background);
}
.article-entry pre,
.article-entry .highlight {
  background: var(--highlight-background);
  padding: 0 20px 15px;
  border-radius: 10px;
  color: var(--highlight-foreground);
  line-height: 25.2px;
}
.article-entry .highlight .gutter pre,
.article-entry .gist .gist-file .gist-data .line-numbers {
  color: #666;
  font-size: 0.85em;
}
.article-entry .mermaid {
  background: transparent;
}
.article-entry figure {
  display: block;
  margin: 1.2em 0;
  transition: 0.3s;
  box-shadow: 0 0 10px 2px var(--color-hover-shadow);
}
.article-entry figure:hover {
  box-shadow: 0 0 10px 4px var(--color-hover-shadow);
}
.article-entry figure ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: transparent;
}
.article-entry figure ::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}
.article-entry figure ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--highlight-scrollbar);
}
.article-entry pre,
.article-entry code,
.article-entry kbd {
  font-family: 'Ubuntu Mono','Source Code Pro','JetBrains Mono', 'Menlo','Monaco','Consolas','monospace';
  font-size: 95%;
  transition: 0.3s;
  word-break: break-word;
}
.article-entry code,
.article-entry kbd {
  background: var(--color-code-background);
  padding: 1px 5px;
  border-radius: 5px;
  color: var(--color-link);
}
.article-entry pre {
  border-radius: 0;
}
.article-entry pre code {
  background: none;
  text-shadow: none;
  color: var(--highlight-foreground);
  padding: 0;
}
.article-entry .highlight {
  overflow: hidden;
  interpolate-size: allow-keywords;
}
.article-entry .highlight.code-closed pre {
  height: 0;
  opacity: 0;
  overflow: hidden;
}
.article-entry .highlight pre {
  border: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
}
.article-entry .highlight table {
  margin: 0;
  table-layout: fixed;
}
.article-entry .highlight td {
  border: none;
  padding: 0;
}
.article-entry .highlight figcaption {
  font-size: 0.85em;
  color: var(--highlight-comment);
  line-height: 1em;
  margin-bottom: 1em;
}
.article-entry .highlight figcaption:before,
.article-entry .highlight figcaption:after {
  content: "";
  display: table;
}
.article-entry .highlight figcaption:after {
  clear: both;
}
.article-entry .highlight figcaption a {
  float: right;
}
.article-entry .highlight .gutter {
  width: 30px;
  vertical-align: top;
}
.article-entry .highlight .gutter pre {
  text-align: right;
  padding-right: 20px;
}
.article-entry .highlight .line {
  height: 25.2px;
}
.article-entry .highlight .line.marked {
  background: var(--highlight-selection);
}
.article-entry .highlight .line .deletion {
  background: rgba(255,94,94,0.502);
}
.article-entry .highlight .line .addition {
  background: rgba(94,255,102,0.478);
}
.article-entry .gist {
  border-style: solid;
  border-color: var(--color-border);
  border-width: 1px 0;
  background: var(--highlight-background);
  padding: 15px 20px 15px 0;
}
.article-entry .gist .gist-file {
  border: none;
  font-family: 'Ubuntu Mono','Source Code Pro','JetBrains Mono', 'Menlo','Monaco','Consolas','monospace';
  margin: 0;
}
.article-entry .gist .gist-file .gist-data {
  background: none;
  border: none;
}
.article-entry .gist .gist-file .gist-data .line-numbers {
  background: none;
  border: none;
  padding: 0 20px 0 0;
}
.article-entry .gist .gist-file .gist-data .line-data {
  padding: 0 !important;
}
.article-entry .gist .gist-file .highlight {
  margin: 0;
  padding: 0;
  border: none;
}
.article-entry .gist .gist-file .gist-meta {
  background: var(--highlight-background);
  color: var(--highlight-comment);
  font: 0.85em  'Mulish','Noto Serif SC', '-apple-system','PingFang SC','Microsoft YaHei','sans-serif';
  text-shadow: 0 0;
  padding: 0;
  margin-top: 1em;
  margin-left: 20px;
}
.article-entry .gist .gist-file .gist-meta a {
  color: var(--color-link);
  font-weight: normal;
}
.article-entry .gist .gist-file .gist-meta a:hover {
  text-decoration: underline;
}
pre .comment,
pre .title {
  color: var(--highlight-comment);
}
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
  color: var(--highlight-red);
}
pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant {
  color: var(--highlight-orange);
}
pre .class,
pre .ruby .class .title,
pre .css .rules .attribute,
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata {
  color: var(--highlight-green);
}
pre .css .hexcolor {
  color: var(--highlight-aqua);
}
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
  color: var(--highlight-blue);
}
pre .keyword,
pre .javascript .function {
  color: var(--highlight-purple);
}
.code-area {
  width: 100%;
  overflow: auto;
  transition: 0.3s;
}
.code-figcaption {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 40px;
  align-items: center;
  flex-shrink: 0;
  background: linear-gradient(to right, transparent 0%, var(--highlight-nav) 50%, transparent 100%);
  margin-bottom: 10px;
}
.code-decoration {
  width: 70px;
}
.code-decoration:after {
  content: " ";
  position: absolute;
  border-radius: 50%;
  background: #ff5f56;
  width: 12px;
  height: 12px;
  box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
}
.code-left-wrap,
.code-right-wrap {
  display: flex;
}
.code-copy {
  margin: 5px;
  z-index: 1;
  filter: invert(50%);
  cursor: var(--cursor-pointer) !important;
  color: #fff;
  transition: 0.3s;
}
.code-copy:hover {
  opacity: 0.7;
}
.code-lang {
  margin: 5px;
  line-height: 0;
  font-weight: bold;
  z-index: 1;
  filter: invert(50%);
  cursor: var(--cursor-pointer) !important;
}
.code-expand {
  margin: 5px;
  filter: invert(50%);
  z-index: 1;
  cursor: var(--cursor-pointer) !important;
  transition: 0.3s;
  transform: rotate(0deg);
  color: #fff;
}
.code-expand:hover {
  opacity: 0.7;
}
.code-closed .code-expand {
  transform: rotate(-180deg) !important;
  transition: 0.3s;
}
.friend-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.friend-item-wrap {
  width: 48%;
  height: 100px;
  background: var(--color-wrap);
  box-shadow: 0 0 10px 2px var(--color-hover-shadow);
  border-radius: 10px;
  position: relative;
  display: flex;
  margin: 1%;
  transition: 0.3s;
}
.friend-item-wrap:hover {
  transform: scale(1.015);
  box-shadow: 0 0 10px 4px var(--color-hover-shadow);
}
@media screen and (max-width: 767px) {
  .friend-item-wrap {
    width: 98%;
  }
}
.friend-item-wrap a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.friend-icon-wrap {
  width: 100px;
  height: 100%;
  pointer-events: none;
  flex-shrink: 0;
}
.friend-icon {
  height: 0;
  width: 100%;
  padding-bottom: 100%;
  position: relative;
}
.friend-icon img {
  display: block;
  opacity: 0;
  transition: opacity 0.2s;
  position: absolute;
  left: 15%;
  top: 15%;
  object-fit: cover;
  border-radius: 50%;
  width: 70%;
  height: 70%;
}
.friend-icon img.lazyloaded {
  opacity: 1;
  animation: blur 0.8s forwards;
}
.friend-info-wrap {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0 8px;
  overflow: hidden;
}
.friend-info-wrap div {
  margin: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-name {
  color: var(--red-2);
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
}
.friend-desc {
  color: var(--grey-9);
  font-size: 14px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.post-link-card-wrap {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.post-link-card {
  display: flex;
  padding: 10px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: 0.3s;
  box-shadow: 0 0 10px 2px var(--color-hover-shadow);
  width: 60%;
}
@media screen and (max-width: 767px) {
  .post-link-card {
    width: 95%;
  }
}
.post-link-card:hover {
  transform: scale(1.015);
  box-shadow: 0 0 10px 4px var(--color-hover-shadow);
}
.post-link-card a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.post-link-card-cover-wrap {
  height: 66px;
  width: 68px;
  padding-right: 20px;
  flex-shrink: 0;
  pointer-events: none;
}
.post-link-card-cover-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}
.post-link-card-cover-wrap.auto {
  background: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding-right: 0;
  margin-right: 20px;
}
.post-link-card-cover-wrap .icon-globe {
  font-size: 20px;
}
@media screen and (max-width: 767px) {
  .post-link-card-cover-wrap {
    display: none !important;
  }
}
.post-link-card-item-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.post-link-card-item-wrap div {
  padding: 5px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.post-link-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--red-1);
}
.post-link-card-excerpt {
  font-size: 14px;
  color: var(--grey-9);
}
.post-link-card-excerpt .icon-link {
  font-size: 12px;
  margin-right: 5px;
}
.sidebar-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: var(--color-wrap);
  border-radius: 50%;
  font-family: font-icon;
  box-shadow: 0 0 10px 4px var(--color-hover-shadow);
  z-index: 999;
}
.sidebar-top .sidebar-top-taichi {
  width: 50px;
  height: 50px;
  transition: 0.3s;
  border-radius: 50%;
}
.sidebar-top .sidebar-top-taichi.rotate {
  animation: rotate-all 3s linear infinite;
}
.sidebar-top .arrow-up {
  transition: 0.3s;
  opacity: 0;
}
.sidebar-top .arrow-up:before {
  width: 50px;
  height: 50px;
  position: absolute;
  color: var(--red-1);
  font-size: 20px;
  top: 0;
  text-align: center;
  line-height: 50px;
}
.sidebar-top:hover .sidebar-top-taichi {
  opacity: 0;
}
.sidebar-top:hover .arrow-up {
  opacity: 1;
}
@supports (-webkit-mask: var(--top-icon) no-repeat center/100%) {
  .sidebar-top-taichi {
    background-color: var(--red-1);
    -webkit-mask: var(--top-icon) no-repeat center/100%;
  }
}
@supports (mask: var(--top-icon) no-repeat center/100%) {
  .sidebar-top-taichi {
    background-color: var(--red-1);
    mask: var(--top-icon) no-repeat center/100%;
  }
}
@supports not ((mask: var(--top-icon) no-repeat center/100%) and (-webkit-mask: var(--top-icon) no-repeat center/100%)) {
  .sidebar-top-taichi {
    background: var(--top-icon) no-repeat center/100%;
  }
}
.tagcloud a {
  display: inline-block;
  margin: 5px 5px 0 0;
}
[data-theme="dark"] .widget-wrap {
  box-shadow: 0 0 10px 3px var(--color-hover-shadow);
}
.widget-wrap {
  margin: 40px 0;
  background: var(--color-wrap);
  border-radius: 10px;
  transition: 0.3s;
}
.widget-wrapper {
  transition: 0.3s;
}
.widget-wrapper .aos-animate {
  transition-property: initial !important;
}
.widget-wrapper .aos-animate:hover {
  box-shadow: 0 0 10px 3px var(--color-hover-shadow);
}
.widget-wrapper:hover {
  transform: scale(1.015);
}
.widget-title {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--grey-9);
  padding: 20px 20px 10px;
}
.widget {
  color: var(--grey-7);
  padding: 10px 20px;
}
.widget li {
  color: var(--color-link);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget a,
.widget span {
  color: var(--color-link);
  text-decoration: none;
  opacity: 0.85;
  transition: 0.3s;
}
.widget a:hover,
.widget span:hover {
  opacity: 1;
  color: var(--red-0);
}
.widget span {
  margin-left: 5px;
}
.widget ul ul,
.widget ol ul,
.widget dl ul,
.widget ul ol,
.widget ol ol,
.widget dl ol,
.widget ul dl,
.widget ol dl,
.widget dl dl {
  margin-left: 15px;
  list-style: none;
}
.widget li {
  margin: 5px 0;
  line-height: normal;
}
.widget li:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 10px;
  background: var(--color-h2-after);
  vertical-align: middle;
  margin-right: 11px;
  box-shadow: 0 2px 12px var(--color-red-6-shadow);
  opacity: 0.5;
  transition: 0.3s;
}
.widget li:hover:before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 1;
}
.notification-wrapper {
  position: fixed;
  z-index: 1000;
  top: 20px;
  right: 20px;
  background: var(--color-header-background);
  box-shadow: 0 0 10px var(--color-hover-shadow);
  border-radius: 10px;
  padding: 10px 20px;
  margin-left: 20px;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  color: var(--grey-7);
}
.notification-wrapper.show {
  opacity: 1;
  visibility: visible;
}
.notification-wrapper h1 {
  padding: 10px 0;
}
.notification-wrapper p {
  padding: 10px 0;
}
.notification-wrapper .notification-btn {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 10px 0;
}
.notification-wrapper button {
  background: var(--red-2);
  border-radius: 5px;
  color: #fff;
  padding: 5px 10px;
  font-family: 'Mulish','Noto Serif SC', '-apple-system','PingFang SC','Microsoft YaHei','sans-serif';
  border: none;
  transition: 0.3s;
}
.notification-wrapper button:hover {
  background: var(--red-1);
}
.notification-wrapper button:active {
  background: var(--red-0);
}
#sidebar {
  display: none;
}
.sidebar-left #sidebar,
.sidebar-right #sidebar {
  display: block;
}
@media screen and (max-width: 959px) {
  .sidebar-left #sidebar,
  .sidebar-right #sidebar {
    display: none;
  }
}
@media screen and (min-width: 960px) {
  .sidebar-left #sidebar,
  .sidebar-right #sidebar {
    width: 23%;
    margin: 0 1%;
    height: inherit;
  }
}
[data-theme="dark"] .sidebar-wrap {
  box-shadow: 0 0 10px 3px var(--color-hover-shadow);
}
[data-theme="dark"] #mobile-nav .sidebar-wrap {
  box-shadow: 0 0 0 0;
}
.sidebar-wrapper {
  transition: 0.3s;
}
.sidebar-wrapper .aos-animate {
  transition-property: initial !important;
}
.sidebar-wrapper .aos-animate:hover {
  box-shadow: 0 0 10px 3px var(--color-hover-shadow);
}
.sidebar-wrapper:hover {
  transform: scale(1.015);
}
.sidebar-wrapper.wrap-sticky {
  position: sticky;
  top: 5px;
}
.sidebar-wrap {
  width: 100%;
  border-radius: 10px;
  background: var(--color-wrap);
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  interpolate-size: allow-keywords;
}
.sidebar-wrap .hidden {
  display: none;
}
.sidebar-author {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
}
.sidebar-author img {
  display: block;
  min-width: 100px;
  min-height: 100px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transition: opacity 0.3s;
  opacity: 0;
  object-fit: cover;
  margin: 20px;
  box-shadow: 0 0 15px 5px var(--color-red-6-shadow);
  will-change: transform;
  transition: 0.3s;
}
.sidebar-author img:hover {
  transform: scale(1.05);
}
.sidebar-author img.lazyloaded {
  opacity: 1;
  animation: blur 0.8s forwards;
}
.sidebar-author .sidebar-author-name {
  font-weight: bold;
  font-size: 20px;
  color: var(--red-2);
  margin: 10px;
}
.sidebar-author .sidebar-description {
  color: var(--grey-7);
  margin: 0 20px;
}
.sidebar-state .sidebar-state-article,
.sidebar-state .sidebar-state-category,
.sidebar-state .sidebar-state-tag {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  padding: 0 20px;
}
.sidebar-state .sidebar-state-article div,
.sidebar-state .sidebar-state-category div,
.sidebar-state .sidebar-state-tag div {
  margin: 5px 0;
}
.sidebar-state {
  display: flex;
  justify-content: center;
  padding: 25px 0;
  color: var(--red-0);
  opacity: 0.8;
  transition: opacity 0.5s, color 0.5s;
}
.sidebar-state:hover {
  opacity: 1;
}
.sidebar-state .sidebar-state-article {
  border-right: 1px solid var(--red-1);
}
.sidebar-state .sidebar-state-tag {
  border-left: 1px solid var(--red-1);
}
.sidebar-state .sidebar-state-number {
  font-weight: bold;
  font-size: 20px;
}
.sidebar-social {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: 70%;
  flex-wrap: wrap;
}
.sidebar-social div a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sidebar-social-icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 25px;
  font: 20px var(--font-icon);
  transition: transform 0.2s;
  will-change: transform;
}
.sidebar-social-icon:hover {
  transform: scale(1.2);
}
.icon-email {
  color: var(--red-2);
}
.icon-github {
  color: #191717;
}
[data-theme="dark"] .icon-github {
  color: #bc88ff;
}
.icon-instagram {
  color: #e1306c;
}
.icon-discord {
  color: #7289da;
}
.sidebar-menu-icon,
.sidebar-menu-link {
  color: var(--color-link);
  opacity: 0.8;
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
  display: block;
  padding: 10px 15px;
  font-weight: 700;
}
.sidebar-menu {
  margin: 20px 0;
  width: 100%;
}
.sidebar-menu-link-wrap {
  display: flex;
  position: relative;
  width: 70%;
  max-width: 200px;
  margin: 8px auto;
  justify-content: center;
  border: 10px var(--color-red-3-shadow) double;
  transition: border 0.5s, background 0.5s, color 0.5s;
}
.sidebar-menu-link-wrap:hover {
  border: 10px var(--color-h2-after) double;
}
.sidebar-menu-link-wrap:hover .sidebar-menu-icon:before {
  transform: rotate(90deg) scale(1.1);
}
.sidebar-menu-link-wrap:hover .sidebar-menu-icon {
  transform: scale(1.1);
}
.sidebar-menu-link-wrap:hover .sidebar-menu-icon.rotate {
  transform: rotate(90deg) scale(1.1);
}
.sidebar-menu-icon {
  font-size: 24px;
  font-weight: 400;
  transition: transform 0.3s, background 0.5s, color 0.5s;
  will-change: transform;
  pointer-events: none;
  padding: 5px;
  display: flex;
  align-items: center;
}
.sidebar-menu-icon:before {
  font-size: 24px;
  font-weight: 400;
  transform: rotate(90deg);
  transition: transform 0.3s;
  will-change: transform;
}
.sidebar-menu-icon.rotate {
  transform: rotate(90deg);
}
.sidebar-menu-link-dummy {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.sidebar-menu-link {
  pointer-events: none;
}
.link-active {
  background: var(--red-0);
  border: 10px var(--color-wrap) double;
  box-shadow: 0 0 10px 3px var(--color-red-6-shadow);
  opacity: 0.8;
}
.link-active:hover {
  opacity: 1;
}
.link-active .sidebar-menu-link {
  color: #fff;
  opacity: 1;
}
.link-active .sidebar-menu-icon {
  opacity: 1;
  color: #fff;
}
.sidebar-toc {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
}
.sidebar-toc-wrapper {
  color: var(--color-link);
  max-height: calc(100vh - 150px);
  overflow: auto;
}
.sidebar-toc-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.sidebar-toc-wrapper a,
.sidebar-toc-wrapper span {
  color: var(--color-link);
  text-decoration: none;
  opacity: 0.8;
  transition: 0.3s;
}
.sidebar-toc-wrapper a:hover,
.sidebar-toc-wrapper span:hover {
  color: var(--red-0);
}
.sidebar-toc-wrapper ol {
  margin-left: 15px;
  list-style: none;
}
.sidebar-toc-wrapper li {
  margin: 7px 0;
  padding: 2px 0;
}
.sidebar-toc-wrapper li:before {
  content: "";
  width: 5px;
  height: 10px;
  background: var(--color-h2-after);
  display: inline-block;
  vertical-align: middle;
  margin-right: 11px;
  box-shadow: 0 2px 12px var(--color-red-6-shadow);
  opacity: 0.5;
  transition: 0.3s;
}
.sidebar-toc-wrapper li:hover:before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 1;
}
.sidebar-toc-wrapper .toc-level-1 {
  list-style: none;
}
.sidebar-toc-wrapper .toc-level-1:before {
  display: none;
}
.sidebar-toc-wrapper .toc-level-1 >a {
  width: 100%;
  display: inline-block;
  text-align: center;
}
.sidebar-toc-wrapper .toc-child {
  transform: scaleY(0);
  height: 0;
  overflow: hidden;
  transition: 0.3s;
  transform-origin: top;
}
.sidebar-toc-wrapper .toc-child >.toc-item:last-child {
  margin-bottom: 0;
}
.sidebar-toc-wrapper .active>.toc-child,
.sidebar-toc-wrapper .current>.toc-child {
  height: auto;
  transform: scaleY(1);
}
.sidebar-toc-wrapper .active>a,
.sidebar-toc-wrapper .current>a,
.sidebar-toc-wrapper .active>a>span,
.sidebar-toc-wrapper .current>a>span {
  color: var(--red-0);
  opacity: 1;
}
.toc-title {
  letter-spacing: 2px;
  color: var(--grey-9);
  line-height: 1em;
  font-weight: bold;
  padding: 10px 0;
}
.toc-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-btn-wrapper .sidebar-toc-btn,
.sidebar-btn-wrapper .sidebar-common-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: var(--red-3);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 0 10px var(--color-red-6-shadow);
  border-radius: 10px;
  margin: 20px;
  transition: 0.3s;
  will-change: transform;
}
.sidebar-btn-wrapper .sidebar-toc-btn:hover,
.sidebar-btn-wrapper .sidebar-common-btn:hover {
  transform: scale(1.05);
}
[data-theme="dark"] .sidebar-btn-wrapper .sidebar-toc-btn,
[data-theme="dark"] .sidebar-btn-wrapper .sidebar-common-btn {
  filter: brightness(0.8);
}
.sidebar-btn-wrapper {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}
.sidebar-btn-wrapper .current {
  background: var(--red-1);
}
.sidebar-common-sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  overflow-y: auto;
  max-height: calc(100vh - 120px);
}
.sidebar-common-sidebar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.sidebar-toc-sidebar {
  width: 100%;
}
.left {
  float: left;
}
.right {
  float: right;
}
[data-theme="dark"] ::-webkit-scrollbar,
[data-theme="dark"] ::-webkit-scrollbar-track {
  background-color: #616161;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--red-3);
}
.pace {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pace-inactive {
  display: none;
}
.pace .pace-progress {
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
  background: var(--red-1);
}