/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

main {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

img {
  border-style: none
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .35em .75em .625em
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details {
  display: block
}

summary {
  display: list-item
}

template {
  display: none
}

[hidden] {
  display: none
}
.limit-one-line,
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span,
#aside-content .card-categories ul.card-category-list > .card-category-list-item a span,
.site-data > a .headline,
#pagination .prev_info,
#pagination .next_info,
#sidebar #sidebar-menus .menus_items .site-page {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.limit-more-line,
.error404 #error-wrap .error-content .error-info .error_subtitle,
.article-sort-item-title,
#aside-content .aside-list > .aside-list-item .content > .name,
#aside-content .aside-list > .aside-list-item .content > .title,
#aside-content .aside-list > .aside-list-item .content > .comment,
#post-info .post-title,
.relatedPosts > .relatedPosts-list .content .title,
#article-container figure.gallery-group p,
#article-container figure.gallery-group .gallery-group-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.fontawesomeIcon,
hr:before,
#article-container h1:before,
#article-container h2:before,
#article-container h3:before,
#article-container h4:before,
#article-container h5:before,
#article-container h6:before,
#post .post-outdate-notice:before,
.note:not(.no-icon)::before {
  display: inline-block;
  font-weight: 600;
  font-family: 'Font Awesome 6 Free';
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.cardHover,
.error404 #error-wrap .error-content,
.layout > div:first-child:not(.recent-posts),
#aside-content .card-widget,
.layout > .recent-posts .pagination > *:not(.space) {
  border-radius: 8px;
  background: var(--card-bg);
  -webkit-box-shadow: var(--card-box-shadow);
  box-shadow: var(--card-box-shadow);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.cardHover:hover,
.error404 #error-wrap .error-content:hover,
.layout > div:first-child:not(.recent-posts):hover,
#aside-content .card-widget:hover,
.layout > .recent-posts .pagination > *:not(.space):hover {
  -webkit-box-shadow: var(--card-hover-box-shadow);
  box-shadow: var(--card-hover-box-shadow);
}
.imgHover,
.error404 #error-wrap .error-content .error-img img,
.article-sort-item-img img,
#aside-content .aside-list > .aside-list-item .thumbnail > img {
  width: 100%;
  height: 100%;
  -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.6s;
  -moz-transition: filter 375ms ease-in 0.2s, -moz-transform 0.6s;
  -o-transition: filter 375ms ease-in 0.2s, -o-transform 0.6s;
  -ms-transition: filter 375ms ease-in 0.2s, -ms-transform 0.6s;
  transition: filter 375ms ease-in 0.2s, transform 0.6s;
  object-fit: cover;
}
.imgHover:hover,
.error404 #error-wrap .error-content .error-img img:hover,
.article-sort-item-img img:hover,
#aside-content .aside-list > .aside-list-item .thumbnail > img:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.postImgHover:hover img,
#pagination .prev-post:hover img,
#pagination .next-post:hover img,
.relatedPosts > .relatedPosts-list > div:hover img {
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.postImgHover img,
#pagination .prev-post img,
#pagination .next-post img,
.relatedPosts > .relatedPosts-list > div img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
  -webkit-transition: all 0.6s, filter 375ms ease-in 0.2s;
  -moz-transition: all 0.6s, filter 375ms ease-in 0.2s;
  -o-transition: all 0.6s, filter 375ms ease-in 0.2s;
  -ms-transition: all 0.6s, filter 375ms ease-in 0.2s;
  transition: all 0.6s, filter 375ms ease-in 0.2s;
  object-fit: cover;
}
.list-beauty,
.category-lists ul,
#algolia-search .search-dialog .ais-Hits-list {
  list-style: none;
}
.list-beauty li,
.category-lists ul li,
#algolia-search .search-dialog .ais-Hits-list li {
  position: relative;
  padding: 0.12em 0.4em 0.12em 1.4em;
}
.list-beauty li:hover:before,
.category-lists ul li:hover:before,
#algolia-search .search-dialog .ais-Hits-list li:hover:before {
  border-color: var(--pseudo-hover);
}
.list-beauty li:before,
.category-lists ul li:before,
#algolia-search .search-dialog .ais-Hits-list li:before {
  position: absolute;
  top: 0.67em;
  left: 0;
  width: 0.43em;
  height: 0.43em;
  border: 0.215em solid #49b1f5;
  border-radius: 0.43em;
  background: transparent;
  content: '';
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#content-inner,
#footer {
  -webkit-animation: bottom-top 1s;
  -moz-animation: bottom-top 1s;
  -o-animation: bottom-top 1s;
  -ms-animation: bottom-top 1s;
  animation: bottom-top 1s;
}
#page-header {
  -webkit-animation: header-effect 1s;
  -moz-animation: header-effect 1s;
  -o-animation: header-effect 1s;
  -ms-animation: header-effect 1s;
  animation: header-effect 1s;
}
#site-title,
#site-subtitle {
  -webkit-animation: titleScale 1s;
  -moz-animation: titleScale 1s;
  -o-animation: titleScale 1s;
  -ms-animation: titleScale 1s;
  animation: titleScale 1s;
}
#nav.show {
  -webkit-animation: headerNoOpacity 1s;
  -moz-animation: headerNoOpacity 1s;
  -o-animation: headerNoOpacity 1s;
  -ms-animation: headerNoOpacity 1s;
  animation: headerNoOpacity 1s;
}
canvas:not(#ribbon-canvas),
#web_bg {
  -webkit-animation: to_show 4s;
  -moz-animation: to_show 4s;
  -o-animation: to_show 4s;
  -ms-animation: to_show 4s;
  animation: to_show 4s;
}
#ribbon-canvas {
  -webkit-animation: ribbon_to_show 4s;
  -moz-animation: ribbon_to_show 4s;
  -o-animation: ribbon_to_show 4s;
  -ms-animation: ribbon_to_show 4s;
  animation: ribbon_to_show 4s;
}
#sidebar-menus.open > :nth-child(1) {
  -webkit-animation: sidebarItem 0.2s;
  -moz-animation: sidebarItem 0.2s;
  -o-animation: sidebarItem 0.2s;
  -ms-animation: sidebarItem 0.2s;
  animation: sidebarItem 0.2s;
}
#sidebar-menus.open > :nth-child(2) {
  -webkit-animation: sidebarItem 0.4s;
  -moz-animation: sidebarItem 0.4s;
  -o-animation: sidebarItem 0.4s;
  -ms-animation: sidebarItem 0.4s;
  animation: sidebarItem 0.4s;
}
#sidebar-menus.open > :nth-child(3) {
  -webkit-animation: sidebarItem 0.6s;
  -moz-animation: sidebarItem 0.6s;
  -o-animation: sidebarItem 0.6s;
  -ms-animation: sidebarItem 0.6s;
  animation: sidebarItem 0.6s;
}
#sidebar-menus.open > :nth-child(4) {
  -webkit-animation: sidebarItem 0.8s;
  -moz-animation: sidebarItem 0.8s;
  -o-animation: sidebarItem 0.8s;
  -ms-animation: sidebarItem 0.8s;
  animation: sidebarItem 0.8s;
}
.scroll-down-effects {
  -webkit-animation: scroll-down-effect 1.5s infinite;
  -moz-animation: scroll-down-effect 1.5s infinite;
  -o-animation: scroll-down-effect 1.5s infinite;
  -ms-animation: scroll-down-effect 1.5s infinite;
  animation: scroll-down-effect 1.5s infinite;
}
.reward-main {
  -webkit-animation: donate_effcet 0.3s 0.1s ease both;
  -moz-animation: donate_effcet 0.3s 0.1s ease both;
  -o-animation: donate_effcet 0.3s 0.1s ease both;
  -ms-animation: donate_effcet 0.3s 0.1s ease both;
  animation: donate_effcet 0.3s 0.1s ease both;
}
@-moz-keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
  }
  50% {
    top: -16px;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    top: 0;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
  }
}
@-webkit-keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
  }
  50% {
    top: -16px;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    top: 0;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
  }
}
@-o-keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
  }
  50% {
    top: -16px;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    top: 0;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
  }
}
@keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
  }
  50% {
    top: -16px;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    top: 0;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
  }
}
@-moz-keyframes header-effect {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes header-effect {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-o-keyframes header-effect {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes header-effect {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes headerNoOpacity {
  0% {
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes headerNoOpacity {
  0% {
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-o-keyframes headerNoOpacity {
  0% {
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes headerNoOpacity {
  0% {
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes bottom-top {
  0% {
    margin-top: 50px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    margin-top: 0;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes bottom-top {
  0% {
    margin-top: 50px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    margin-top: 0;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes bottom-top {
  0% {
    margin-top: 50px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    margin-top: 0;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes bottom-top {
  0% {
    margin-top: 50px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    margin-top: 0;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-moz-keyframes titleScale {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes titleScale {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes titleScale {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes titleScale {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes search_close {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
}
@-webkit-keyframes search_close {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
}
@-o-keyframes search_close {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
}
@keyframes search_close {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
}
@-moz-keyframes to_show {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes to_show {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes to_show {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes to_show {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-moz-keyframes to_hide {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-webkit-keyframes to_hide {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-o-keyframes to_hide {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@keyframes to_hide {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes ribbon_to_show {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
  }
}
@-webkit-keyframes ribbon_to_show {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
  }
}
@-o-keyframes ribbon_to_show {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
  }
}
@keyframes ribbon_to_show {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
  }
}
@-moz-keyframes avatar_turn_around {
  from {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes avatar_turn_around {
  from {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes avatar_turn_around {
  from {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes avatar_turn_around {
  from {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes sub_menus {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes sub_menus {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-o-keyframes sub_menus {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes sub_menus {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes donate_effcet {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes donate_effcet {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-o-keyframes donate_effcet {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes donate_effcet {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes sidebarItem {
  0% {
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px);
    -o-transform: translateX(200px);
    -ms-transform: translateX(200px);
    transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes sidebarItem {
  0% {
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px);
    -o-transform: translateX(200px);
    -ms-transform: translateX(200px);
    transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
@-o-keyframes sidebarItem {
  0% {
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px);
    -o-transform: translateX(200px);
    -ms-transform: translateX(200px);
    transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes sidebarItem {
  0% {
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px);
    -o-transform: translateX(200px);
    -ms-transform: translateX(200px);
    transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
:root {
  --global-font-size: 15.5px;
  --global-bg: #fff;
  --font-color: #1f1f1f;
  --hr-border: #d2ebfd;
  --hr-before-color: #bfe4fb;
  --search-bg: #f6f8fa;
  --search-input-color: #1f1f1f;
  --search-result-title: #1f1f1f;
  --preloader-bg: #37474f;
  --preloader-color: #fff;
  --tab-border-color: #f0f0f0;
  --tab-botton-bg: #f0f0f0;
  --tab-botton-color: #1f2d3d;
  --tab-button-hover-bg: #dcdcdc;
  --tab-button-active-bg: #fff;
  --card-bg: #fff;
  --sidebar-bg: #f6f8fa;
  --btn-hover-color: #ff7242;
  --btn-color: #fff;
  --btn-bg: #49b1f5;
  --text-bg-hover: rgba(73,177,245,0.7);
  --light-grey: #eee;
  --dark-grey: #cacaca;
  --white: #fff;
  --text-highlight-color: #1f2d3d;
  --blockquote-color: #6a737d;
  --blockquote-bg: rgba(73,177,245,0.1);
  --reward-pop: #f5f5f5;
  --toc-link-color: #666261;
  --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
  --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09);
  --pseudo-hover: #ff7242;
  --headline-presudo: #a0a0a0;
  --scrollbar-color: #49b1f5;
}
body {
  position: relative;
  min-height: 100%;
  background: var(--global-bg);
  color: var(--font-color);
  font-size: var(--global-font-size);
  font-family: var(--global-font), -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;;
  line-height: 2;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
}
*::-webkit-scrollbar-track {
  background-color: transparent;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color) transparent;
}
input::placeholder {
  color: var(--font-color);
}
#web_bg {
  position: fixed;
  z-index: -999;
  width: 100%;
  height: 100%;
  background: var(--default-bg);
  background-attachment: local;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  margin: 20px 0 14px;
  color: var(--text-highlight-color);
  font-weight: bold;
}
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
  font-size: inherit !important;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
hr {
  position: relative;
  margin: 40px auto;
  border: 2px dashed var(--hr-border);
  width: calc(100% - 4px);
}
hr:hover:before {
  left: calc(95% - 20px);
}
hr:before {
  position: absolute;
  top: -10px;
  left: 5%;
  z-index: 1;
  color: var(--hr-before-color);
  content: '\f2dc';
  font-size: 20px;
  line-height: 1;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.table-wrap {
  overflow-x: scroll;
  margin: 0 0 20px;
}
table {
  display: table;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  empty-cells: show;
}
table thead {
  background: rgba(153,169,191,0.1);
}
table th,
table td {
  padding: 6px 12px;
  border: 1px solid var(--light-grey);
  vertical-align: middle;
}
*::selection {
  background: #00c4b6;
  color: #f7f7f7;
}
button {
  padding: 0;
  outline: 0;
  border: none;
  background: none;
  touch-action: manipulation;
}
a {
  color: #99a9bf;
  text-decoration: none;
  word-wrap: break-word;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
  overflow-wrap: break-word;
}
a:hover {
  color: #49b1f5;
}
#site-title,
#site-subtitle,
#site-name,
#aside-content .author-info__name,
#aside-content .author-info__description {
  font-family: var(--global-font), -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
}
.is-center {
  text-align: center;
}
.copy-true {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
img[src=''],
img:not([src]) {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
img[data-lazy-src]:not(.loaded) {
  filter: blur(8px) brightness(1);
}
img[data-lazy-src].error {
  filter: none;
}
.img-alt {
  margin: -10px 0 10px;
  color: #858585;
}
.img-alt:hover {
  text-decoration: none !important;
}
blockquote {
  margin: 0 0 20px;
  padding: 12px 15px;
  border-left: 3px solid #49b1f5;
  background-color: var(--blockquote-bg);
  color: var(--blockquote-color);
}
blockquote footer cite:before {
  padding: 0 5px;
  content: '—';
}
blockquote > :last-child {
  margin-bottom: 0 !important;
}
:root {
  --hl-color: #eff;
  --hl-bg: #212121;
  --hltools-bg: #1c1c1c;
  --hltools-color: rgba(238,255,255,0.8);
  --hlnumber-bg: #212121;
  --hlnumber-color: rgba(238,255,255,0.5);
  --hlscrollbar-bg: #353535;
  --hlexpand-bg: linear-gradient(180deg, rgba(33,33,33,0.6), rgba(33,33,33,0.9));
}
figure.highlight table {
  scrollbar-color: var(--hlscrollbar-bg) transparent;
}
figure.highlight table::-webkit-scrollbar-thumb {
  background: var(--hlscrollbar-bg);
}
figure.highlight pre .deletion {
  color: #bf42bf;
}
figure.highlight pre .addition {
  color: #105ede;
}
figure.highlight pre .meta {
  color: #c792ea;
}
figure.highlight pre .comment {
  color: #969896;
}
figure.highlight pre .variable,
figure.highlight pre .attribute,
figure.highlight pre .regexp,
figure.highlight pre .ruby .constant,
figure.highlight pre .xml .tag .title,
figure.highlight pre .xml .pi,
figure.highlight pre .xml .doctype,
figure.highlight pre .html .doctype,
figure.highlight pre .css .id,
figure.highlight pre .tag .name,
figure.highlight pre .css .class,
figure.highlight pre .css .pseudo {
  color: #ff5370;
}
figure.highlight pre .tag {
  color: #89ddff;
}
figure.highlight pre .number,
figure.highlight pre .preprocessor,
figure.highlight pre .literal,
figure.highlight pre .params,
figure.highlight pre .constant,
figure.highlight pre .command {
  color: #f78c6c;
}
figure.highlight pre .built_in {
  color: #ffcb6b;
}
figure.highlight pre .ruby .class .title,
figure.highlight pre .css .rules .attribute,
figure.highlight pre .string,
figure.highlight pre .value,
figure.highlight pre .inheritance,
figure.highlight pre .header,
figure.highlight pre .ruby .symbol,
figure.highlight pre .xml .cdata,
figure.highlight pre .special,
figure.highlight pre .number,
figure.highlight pre .formula {
  color: #c3e88d;
}
figure.highlight pre .keyword,
figure.highlight pre .title,
figure.highlight pre .css .hexcolor {
  color: #89ddff;
}
figure.highlight pre .function,
figure.highlight pre .python .decorator,
figure.highlight pre .python .title,
figure.highlight pre .ruby .function .title,
figure.highlight pre .ruby .title .keyword,
figure.highlight pre .perl .sub,
figure.highlight pre .javascript .title,
figure.highlight pre .coffeescript .title {
  color: #82aaff;
}
figure.highlight pre .tag .attr,
figure.highlight pre .javascript .function {
  color: #c792ea;
}
#article-container figure.highlight .line.marked {
  background-color: rgba(97,97,97,0.314);
}
#article-container figure.highlight table {
  display: block;
  overflow: auto;
  border: none;
}
#article-container figure.highlight table td {
  padding: 0;
  border: none;
}
#article-container figure.highlight .gutter pre {
  padding-right: 10px;
  padding-left: 10px;
  background-color: var(--hlnumber-bg);
  color: var(--hlnumber-color);
  text-align: right;
}
#article-container figure.highlight .code pre {
  padding-right: 10px;
  padding-left: 10px;
  width: 100%;
}
#article-container pre,
#article-container figure.highlight {
  overflow: auto;
  margin: 0 0 20px;
  padding: 0;
  background: var(--hl-bg);
  color: var(--hl-color);
  line-height: 1.6;
}
#article-container pre,
#article-container code {
  font-size: 14.7px;
  font-family: var(--code-font, JetBrainsMono), var(--global-font), "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif !important;
}
#article-container code {
  padding: 2px 4px;
  background: rgba(27,31,35,0.05);
  color: #f47466;
}
#article-container pre {
  padding: 10px 20px;
}
#article-container pre code {
  padding: 0;
  background: none;
  color: var(--hl-color);
  text-shadow: none;
}
#article-container figure.highlight {
  position: relative;
}
#article-container figure.highlight pre {
  margin: 0;
  padding: 8px 0;
  border: none;
}
#article-container figure.highlight figcaption,
#article-container figure.highlight .caption {
  padding: 6px 0 2px 14px;
  font-size: 14.7px;
  line-height: 1em;
}
#article-container figure.highlight figcaption a,
#article-container figure.highlight .caption a {
  float: right;
  padding-right: 10px;
  color: var(--hl-color);
}
#article-container figure.highlight figcaption a:hover,
#article-container figure.highlight .caption a:hover {
  border-bottom-color: var(--hl-color);
}
#article-container .highlight-tools {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
  min-height: 24px;
  height: 2.15em;
  background: var(--hltools-bg);
  color: var(--hltools-color);
  font-size: 14.7px;
}
#article-container .highlight-tools.closed ~ * {
  display: none;
}
#article-container .highlight-tools .expand {
  position: absolute;
  padding: 0.57em 0.7em;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  -ms-transition: -ms-transform 0.3s;
  transition: transform 0.3s;
}
#article-container .highlight-tools .expand + .code-lang {
  left: 1.7em;
}
#article-container .highlight-tools .expand.closed {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: rotate(-90deg) !important;
  -moz-transform: rotate(-90deg) !important;
  -o-transform: rotate(-90deg) !important;
  -ms-transform: rotate(-90deg) !important;
  transform: rotate(-90deg) !important;
}
#article-container .highlight-tools .code-lang {
  position: absolute;
  left: 14px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.15em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#article-container .highlight-tools .copy-notice {
  position: absolute;
  right: 2.4em;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -ms-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
#article-container .highlight-tools .copy-button {
  position: absolute;
  right: 14px;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -o-transition: color 0.2s;
  -ms-transition: color 0.2s;
  transition: color 0.2s;
}
#article-container .highlight-tools .copy-button:hover {
  color: #49b1f5;
}
#article-container .gutter {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#article-container .gist table {
  width: auto;
}
#article-container .gist table td {
  border: none;
}
#article-container figure.highlight {
  margin: 0 0 24px;
  border-radius: 7px;
  -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.4);
  box-shadow: 0 5px 10px 0 rgba(0,0,0,0.4);
  -webkit-transform: translateZ(0);
}
#article-container figure.highlight .highlight-tools:after {
  position: absolute;
  left: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fc625d;
  -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  content: ' ';
}
#article-container figure.highlight .highlight-tools .expand {
  right: 0;
}
#article-container figure.highlight .highlight-tools .expand.closed {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: rotate(90deg) !important;
  -moz-transform: rotate(90deg) !important;
  -o-transform: rotate(90deg) !important;
  -ms-transform: rotate(90deg) !important;
  transform: rotate(90deg) !important;
}
#article-container figure.highlight .highlight-tools .expand ~ .copy-notice {
  right: 3.45em;
}
#article-container figure.highlight .highlight-tools .expand ~ .copy-button {
  right: 2.1em;
}
#article-container figure.highlight .highlight-tools .code-lang {
  left: 75px;
}
#article-container .code-expand-btn {
  position: absolute;
  bottom: 0;
  z-index: 10;
  width: 100%;
  background: var(--hlexpand-bg);
  text-align: center;
  font-size: 14.7px;
}
#article-container .code-expand-btn i {
  padding: 6px 0;
  color: var(--hlnumber-color);
  -webkit-animation: code-expand-key 1.2s infinite;
  -moz-animation: code-expand-key 1.2s infinite;
  -o-animation: code-expand-key 1.2s infinite;
  -ms-animation: code-expand-key 1.2s infinite;
  animation: code-expand-key 1.2s infinite;
}
#article-container .code-expand-btn.expand-done > i {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
#article-container .code-expand-btn.expand-done + table,
#article-container .code-expand-btn.expand-done + pre {
  margin-bottom: 1.8em;
}
#article-container .code-expand-btn:not(.expand-done) ~ table,
#article-container .code-expand-btn:not(.expand-done) ~ pre {
  overflow: hidden;
  height: 230px;
}
@-moz-keyframes code-expand-key {
  0% {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
  }
  50% {
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);
  }
  100% {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
  }
}
@-webkit-keyframes code-expand-key {
  0% {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
  }
  50% {
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);
  }
  100% {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
  }
}
@-o-keyframes code-expand-key {
  0% {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
  }
  50% {
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);
  }
  100% {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
  }
}
@keyframes code-expand-key {
  0% {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
  }
  50% {
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);
  }
  100% {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
  }
}
.error404 #error-wrap {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: 0 auto;
  padding: 60px 20px 0;
  max-width: 1000px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.error404 #error-wrap .error-content {
  overflow: hidden;
  margin: 0 20px;
  height: 360px;
}
@media screen and (max-width: 768px) {
  .error404 #error-wrap .error-content {
    margin: 0;
    height: 500px;
  }
}
.error404 #error-wrap .error-content .error-img {
  display: inline-block;
  overflow: hidden;
  width: 50%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .error404 #error-wrap .error-content .error-img {
    width: 100%;
    height: 45%;
  }
}
.error404 #error-wrap .error-content .error-img img {
  background-color: #49b1f5;
}
.error404 #error-wrap .error-content .error-info {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-box;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
  width: 50%;
  height: 100%;
  vertical-align: top;
  text-align: center;
  font-family: var(--global-font), -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
}
@media screen and (max-width: 768px) {
  .error404 #error-wrap .error-content .error-info {
    width: 100%;
    height: 55%;
  }
}
.error404 #error-wrap .error-content .error-info .error_title {
  margin-top: -0.6em;
  font-size: 9em;
}
@media screen and (max-width: 768px) {
  .error404 #error-wrap .error-content .error-info .error_title {
    font-size: 8em;
  }
}
.error404 #error-wrap .error-content .error-info .error_subtitle {
  margin-top: -3em;
  word-break: break-word;
  font-size: 1.6em;
  -webkit-line-clamp: 2;
}
.error404 + #rightside {
  display: none;
}
.article-sort {
  margin-left: 10px;
  padding-left: 20px;
  border-left: 2px solid #aadafa;
}
.article-sort-title {
  position: relative;
  margin-left: 10px;
  padding-bottom: 20px;
  padding-left: 20px;
  font-size: 1.72em;
}
.article-sort-title:hover:before {
  border-color: var(--pseudo-hover);
}
.article-sort-title:before {
  position: absolute;
  top: calc(((100% - 36px) / 2));
  left: -9px;
  z-index: 1;
  width: 10px;
  height: 10px;
  border: 5px solid #49b1f5;
  border-radius: 10px;
  background: var(--card-bg);
  content: '';
  line-height: 10px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.article-sort-title:after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 2px;
  height: 1.5em;
  background: #aadafa;
  content: '';
}
.article-sort-item {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 0 0 20px 10px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.article-sort-item:hover:before {
  border-color: var(--pseudo-hover);
}
.article-sort-item:before {
  position: absolute;
  left: calc(-20px - 17px);
  width: 6px;
  height: 6px;
  border: 3px solid #49b1f5;
  border-radius: 6px;
  background: var(--card-bg);
  content: '';
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.article-sort-item.no-article-cover {
  height: 80px;
}
.article-sort-item.no-article-cover .article-sort-item-info {
  padding: 0;
}
.article-sort-item.year {
  font-size: 1.43em;
}
.article-sort-item.year:hover:before {
  border-color: #49b1f5;
}
.article-sort-item.year:before {
  border-color: var(--pseudo-hover);
}
.article-sort-item-time {
  color: #858585;
  font-size: 95%;
}
.article-sort-item-time time {
  padding-left: 6px;
  cursor: default;
}
.article-sort-item-title {
  color: var(--font-color);
  font-size: 1.2em;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-line-clamp: 2;
}
.article-sort-item-title:hover {
  color: #49b1f5;
  -webkit-transform: translateX(10px);
  -moz-transform: translateX(10px);
  -o-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
}
.article-sort-item-img {
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 12px;
}
.article-sort-item-info {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 16px;
}
.category-lists .category-title {
  font-size: 2.57em;
}
@media screen and (max-width: 768px) {
  .category-lists .category-title {
    font-size: 2em;
  }
}
.category-lists .category-list {
  margin-bottom: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -o-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.category-lists .category-list a {
  color: var(--font-color);
}
.category-lists .category-list a:hover {
  color: #49b1f5;
}
.category-lists .category-list .category-list-count {
  margin-left: 8px;
  color: #858585;
}
.category-lists .category-list .category-list-count:before {
  content: '(';
}
.category-lists .category-list .category-list-count:after {
  content: ')';
}
.category-lists ul {
  padding: 0 0 0 20px;
}
.category-lists ul ul {
  padding-left: 4px;
}
.category-lists ul li {
  position: relative;
  margin: 6px 0;
  padding: 0.12em 1.2em 0.12em 1.4em;
}
#body-wrap {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}
.layout {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 auto;
  -ms-flex: 1 auto;
  flex: 1 auto;
  margin: 0 auto;
  padding: 40px 15px;
  max-width: 1200px;
  width: 100%;
}
@media screen and (max-width: 900px) {
  .layout {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .layout {
    padding: 20px 5px;
  }
}
@media screen and (min-width: 2000px) {
  .layout {
    max-width: 1500px;
  }
}
.layout > div:first-child:not(.recent-posts) {
  -webkit-align-self: flex-start;
  align-self: flex-start;
  -ms-flex-item-align: start;
  padding: 50px 40px;
}
@media screen and (max-width: 768px) {
  .layout > div:first-child:not(.recent-posts) {
    padding: 36px 14px;
  }
}
.layout > div:first-child {
  width: 74%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (max-width: 900px) {
  .layout > div:first-child {
    width: 100% !important;
  }
}
.layout.hide-aside {
  max-width: 1000px;
}
@media screen and (min-width: 2000px) {
  .layout.hide-aside {
    max-width: 1300px;
  }
}
.layout.hide-aside > div {
  width: 100% !important;
}
.apple #page-header.full_page {
  background-attachment: scroll !important;
}
.apple .recent-post-item,
.apple .avatar-img,
.apple .flink-item-icon {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.site-card-group {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -o-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  margin: -8px;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -o-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
.site-card {
  margin: 8px;
  width: calc(100% / 4 - 16px);
  display: block;
  line-height: 1.4;
  height: 100%;
}
@media screen and (min-width: 2048px) {
  .site-card {
    width: calc(100% / 5 - 16px);
  }
}
@media screen and (max-width: 768px) {
  .site-card {
    width: calc(100% / 3 - 16px);
  }
}
@media screen and (max-width: 500px) {
  .site-card {
    width: calc(100% / 2 - 16px);
  }
}
.site-card .img {
  width: 100%;
  height: 120px;
  overflow: hidden;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 2px 0px rgba(0,0,0,0.2);
  box-shadow: 0 1px 2px 0px rgba(0,0,0,0.2);
  background: #f6f6f6;
}
@media screen and (max-width: 500px) {
  .site-card .img {
    height: 100px;
  }
}
.site-card .img img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-transition: -webkit-transform 2s ease;
  -moz-transition: -moz-transform 2s ease;
  -o-transition: -o-transform 2s ease;
  -ms-transition: -ms-transform 2s ease;
  transition: transform 2s ease;
  object-fit: cover;
}
.site-card .info {
  margin-top: 8px;
}
.site-card .info img {
  width: 32px;
  height: 32px;
  pointer-events: none;
  border-radius: 16px;
  float: left;
  margin-right: 8px;
  margin-top: 2px;
}
.site-card .info span {
  display: block;
}
.site-card .info .title {
  font-weight: 600;
  font-size: var(--global-font-size);
  color: #444;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  -ms-transition: all 0.28s ease;
  transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
}
.site-card .info .desc {
  font-size: var(--global-font-size);
  word-wrap: break-word;
  line-height: 1.2;
  color: #888;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}
.site-card .img {
  -webkit-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  -ms-transition: all 0.28s ease;
  transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
}
.site-card:hover .img {
  -webkit-box-shadow: 0 4px 8px 0px rgba(0,0,0,0.1), 0 2px 4px 0px rgba(0,0,0,0.1), 0 4px 8px 0px rgba(0,0,0,0.1), 0 8px 16px 0px rgba(0,0,0,0.1);
  box-shadow: 0 4px 8px 0px rgba(0,0,0,0.1), 0 2px 4px 0px rgba(0,0,0,0.1), 0 4px 8px 0px rgba(0,0,0,0.1), 0 8px 16px 0px rgba(0,0,0,0.1);
}
.site-card:hover .info .title {
  color: #ff5722;
}
.recent-posts {
  padding: 0 5px 0 5px;
  height: fit-content;
}
.recent-posts .recent-post-item {
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 15px;
}
.recent-posts .recent-post-item .recent-post-content {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  position: relative;
}
.recent-posts .recent-post-item .recent-post-content:hover .recent-post-cover img {
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  scale: 1.08;
}
.recent-posts .recent-post-item .recent-post-content:hover .article-content .article-content-text {
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  scale: 1.08;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-cover {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  background: transparent;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-info {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  background: transparent;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title {
  height: 50%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  text-align: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -o-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title .article-title-link {
  color: var(--text-highlight-color);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title .article-title-link:hover {
  color: var(--theme-color);
}
.recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta {
  height: 50%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  text-align: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -o-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta .article-meta-wrap {
  color: #969797;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta .article-meta-wrap a {
  color: var(--text-highlight-color);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  color: #969797;
}
.recent-posts .recent-post-item .recent-post-content .article-content {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  text-align: center;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -o-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.recent-posts .recent-post-item .recent-post-content .article-content .article-content-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #fff;
  text-shadow: 1px 2px 3px #000;
}
.recent-posts .recent-post-item.ads-wrap {
  display: block !important;
  height: auto !important;
}
.recent-posts nav#pagination {
  width: 100%;
}
.recent-posts {
  padding: 0 5px 0 5px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -o-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.recent-posts .recent-post-item {
  border-radius: 15px;
  overflow: hidden;
}
.recent-posts .recent-post-item .recent-post-content {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  -o-box-lines: single;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  max-height: 350px;
  height: auto;
  width: 100%;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-cover {
  width: 100%;
  height: 200px;
  clip-path: polygon(0 130px, 0 0, 100% 0, 100% 130px, 50% 100%);
}
.recent-posts .recent-post-item .recent-post-content .recent-post-cover img {
  height: 200px;
  width: 100%;
  object-fit: cover;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-info {
  height: 150px;
  width: 100%;
  padding: 0px 25px 5px 25px;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title {
  margin: 0px 40px;
  font-size: 19px;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title .article-title-link {
  -webkit-line-clamp: 2;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta {
  margin: 0px 20px;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta .article-meta-wrap {
  font-size: 13px;
  -webkit-line-clamp: 3;
}
.recent-posts .recent-post-item .recent-post-content .article-content {
  position: absolute;
  height: 200px;
  width: 100%;
  background: rgba(25,25,25,0.4);
  clip-path: polygon(0 130px, 0 0, 100% 0, 100% 130px, 50% 100%);
}
.recent-posts .recent-post-item .recent-post-content .article-content .article-content-text {
  -webkit-line-clamp: 3;
  font-size: 16px;
  margin: 0px 25px 30px 25px;
}
.recent-posts .recent-post-item .recent-post-content .article-content .article-content-text::before {
  content: "「";
  font-size: 20px;
}
.recent-posts .recent-post-item .recent-post-content .article-content .article-content-text::after {
  content: "」";
  font-size: 20px;
}
.recent-posts .recent-post-item .recent-post-content .recent-post-arrow {
  display: block;
  background: var(--text-bg-hover);
  position: absolute;
  height: 10px;
  width: 20px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media screen and (min-width: 1069px) {
  .recent-posts .recent-post-item {
    width: 32.3%;
    margin: 0px 1% 20px 0px;
  }
  .recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title {
    margin: 0px 5px;
  }
  .recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title .article-title-link {
    -webkit-line-clamp: 1;
  }
  .recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta {
    margin: 0px 5px;
  }
  .recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta .article-meta-wrap {
    -webkit-line-clamp: 2;
  }
}
@media screen and (min-width: 572px) and (max-width: 1068px) {
  .recent-posts .recent-post-item {
    width: 47%;
    margin: 0px 3% 20px 0px;
  }
}
@media screen and (max-width: 572px) {
  .recent-posts .recent-post-item {
    width: 100%;
  }
}
.tag-cloud-list a {
  display: inline-block;
  padding: 0 8px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.tag-cloud-list a:hover {
  color: #49b1f5 !important;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
@media screen and (max-width: 768px) {
  .tag-cloud-list a {
    zoom: 0.85;
  }
}
.tag-cloud-title {
  font-size: 2.57em;
}
@media screen and (max-width: 768px) {
  .tag-cloud-title {
    font-size: 2em;
  }
}
h1.page-title + .tag-cloud-list {
  text-align: left;
}
#aside-content {
  width: 26%;
}
@media screen and (min-width: 900px) {
  #aside-content {
    padding-left: 15px;
  }
}
@media screen and (max-width: 900px) {
  #aside-content {
    width: 100%;
  }
}
#aside-content > .card-widget:first-child {
  margin-top: 0;
}
@media screen and (max-width: 900px) {
  #aside-content > .card-widget:first-child {
    margin-top: 20px;
  }
}
#aside-content .card-widget {
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  padding: 20px 24px;
}
#aside-content .card-info .author-info__name {
  font-weight: 500;
  font-size: 1.57em;
}
#aside-content .card-info .author-info__description {
  margin-top: -0.42em;
}
#aside-content .card-info .card-info-data {
  margin: 14px 0 4px;
}
#aside-content .card-info .card-info-social-icons {
  margin: 6px 0 -6px;
}
#aside-content .card-info .card-info-social-icons .social-icon {
  margin: 0 10px;
  color: var(--font-color);
  font-size: 1.4em;
}
#aside-content .card-info .card-info-social-icons i {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
#aside-content .card-info .card-info-social-icons i:hover {
  -webkit-transform: rotate(540deg);
  -moz-transform: rotate(540deg);
  -o-transform: rotate(540deg);
  -ms-transform: rotate(540deg);
  transform: rotate(540deg);
}
#aside-content .card-info #card-info-btn {
  display: block;
  margin-top: 14px;
  background-color: var(--btn-bg);
  color: var(--btn-color);
  text-align: center;
  line-height: 2.4;
}
#aside-content .card-info #card-info-btn:hover {
  background-color: var(--btn-hover-color);
}
#aside-content .card-info #card-info-btn span {
  padding-left: 10px;
}
#aside-content .item-headline {
  padding-bottom: 6px;
  font-size: 1.2em;
}
#aside-content .item-headline span {
  margin-left: 6px;
}
@media screen and (min-width: 900px) {
  #aside-content .sticky_layout {
    position: sticky;
    position: -webkit-sticky;
    top: 20px;
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    -o-transition: top 0.3s;
    -ms-transition: top 0.3s;
    transition: top 0.3s;
  }
}
#aside-content .card-tag-cloud a {
  display: inline-block;
  padding: 0 4px;
}
#aside-content .card-tag-cloud a:hover {
  color: #49b1f5 !important;
}
#aside-content .aside-list > span {
  display: block;
  margin-bottom: 10px;
  text-align: center;
}
#aside-content .aside-list > .aside-list-item {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 6px 0;
}
#aside-content .aside-list > .aside-list-item:first-child {
  padding-top: 0;
}
#aside-content .aside-list > .aside-list-item:not(:last-child) {
  border-bottom: 1px dashed #f5f5f5;
}
#aside-content .aside-list > .aside-list-item:last-child {
  padding-bottom: 0;
}
#aside-content .aside-list > .aside-list-item .thumbnail {
  overflow: hidden;
  width: 4.2em;
  height: 4.2em;
}
#aside-content .aside-list > .aside-list-item .content {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 10px;
  word-break: break-all;
}
#aside-content .aside-list > .aside-list-item .content > .name {
  -webkit-line-clamp: 1;
}
#aside-content .aside-list > .aside-list-item .content > time,
#aside-content .aside-list > .aside-list-item .content > .name {
  display: block;
  color: #858585;
  font-size: 85%;
}
#aside-content .aside-list > .aside-list-item .content > .title,
#aside-content .aside-list > .aside-list-item .content > .comment {
  color: var(--font-color);
  font-size: 95%;
  line-height: 1.5;
  -webkit-line-clamp: 2;
}
#aside-content .aside-list > .aside-list-item .content > .title:hover,
#aside-content .aside-list > .aside-list-item .content > .comment:hover {
  color: #49b1f5;
}
#aside-content .aside-list > .aside-list-item.no-cover {
  min-height: 4.4em;
}
#aside-content .card-archives ul.card-archive-list,
#aside-content .card-categories ul.card-category-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a,
#aside-content .card-categories ul.card-category-list > .card-category-list-item a {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -o-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  padding: 3px 10px;
  color: var(--font-color);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover,
#aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
  padding: 3px 17px;
  background-color: var(--text-bg-hover);
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child,
#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
#aside-content .card-categories .card-category-list.child {
  padding: 0 0 0 16px;
}
#aside-content .card-categories .card-category-list > .parent > a .card-category-list-name {
  width: 70% !important;
}
#aside-content .card-categories .card-category-list > .parent > a .card-category-list-count {
  width: calc(100% - 70% - 20px);
  text-align: right;
}
#aside-content .card-categories .card-category-list > .parent i {
  float: right;
  margin-right: -0.5em;
  padding: 0.5em;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  -ms-transition: -ms-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}
#aside-content .card-categories .card-category-list > .parent i.expand {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
#aside-content .card-webinfo .webinfo .webinfo-item {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 2px 10px 0;
}
#aside-content .card-webinfo .webinfo .webinfo-item div:first-child {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-right: 20px;
}
@media screen and (min-width: 901px) {
  #aside-content #card-toc {
    right: 0 !important;
  }
}
@media screen and (max-width: 900px) {
  #aside-content #card-toc {
    position: fixed;
    right: -100%;
    bottom: 30px;
    z-index: 100;
    max-width: 380px;
    max-height: calc(100% - 60px);
    width: calc(100% - 80px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transition: initial;
    -moz-transition: initial;
    -o-transition: initial;
    -ms-transition: initial;
    transition: initial;
    -webkit-transform-origin: right bottom;
    -moz-transform-origin: right bottom;
    -o-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
  }
}
#aside-content #card-toc .toc-percentage {
  float: right;
  margin-top: -9px;
  color: #a9a9a9;
  font-style: italic;
  font-size: 140%;
}
#aside-content #card-toc .toc-content {
  overflow-y: scroll;
  overflow-y: overlay;
  margin: 0 -24px;
  max-height: calc(100vh - 120px);
}
@media screen and (max-width: 900px) {
  #aside-content #card-toc .toc-content {
    max-height: calc(100vh - 140px);
  }
}
#aside-content #card-toc .toc-content > * {
  margin: 0 20px !important;
}
#aside-content #card-toc .toc-content > * > .toc-item > .toc-child {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--dark-grey);
}
#aside-content #card-toc .toc-content:not(.is-expand) .toc-child {
  display: none;
}
@media screen and (max-width: 900px) {
  #aside-content #card-toc .toc-content:not(.is-expand) .toc-child {
    display: block !important;
  }
}
#aside-content #card-toc .toc-content:not(.is-expand) .toc-item.active .toc-child {
  display: block;
}
#aside-content #card-toc .toc-content ol,
#aside-content #card-toc .toc-content li {
  list-style: none;
}
#aside-content #card-toc .toc-content > ol {
  padding: 0 !important;
}
#aside-content #card-toc .toc-content ol {
  margin: 0;
  padding-left: 18px;
}
#aside-content #card-toc .toc-content .toc-link {
  display: block;
  margin: 4px 0;
  padding: 1px 6px;
  color: var(--toc-link-color);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#aside-content #card-toc .toc-content .toc-link:hover {
  color: #49b1f5;
}
#aside-content #card-toc .toc-content .toc-link.active {
  background: #00c4b6;
  color: #fff;
}
#aside-content :only-child > .card-widget {
  margin-top: 0;
}
#aside-content .card-more-btn {
  float: right;
  color: inherit;
}
#aside-content .card-more-btn:hover {
  -webkit-animation: more-btn-move 1s infinite;
  -moz-animation: more-btn-move 1s infinite;
  -o-animation: more-btn-move 1s infinite;
  -ms-animation: more-btn-move 1s infinite;
  animation: more-btn-move 1s infinite;
}
#aside-content .card-announcement .item-headline i {
  color: #f00;
}
.avatar-img {
  overflow: hidden;
  margin: 0 auto;
  width: 110px;
  height: 110px;
  border-radius: 70px;
}
.avatar-img img {
  width: 100%;
  height: 100%;
  -webkit-transition: filter 500ms cubic-bezier(0.38, 0.21, 0.94, 0.1) 0.2s, -webkit-transform 0.5s;
  -moz-transition: filter 500ms cubic-bezier(0.38, 0.21, 0.94, 0.1) 0.2s, -moz-transform 0.5s;
  -o-transition: filter 500ms cubic-bezier(0.38, 0.21, 0.94, 0.1) 0.2s, -o-transform 0.5s;
  -ms-transition: filter 500ms cubic-bezier(0.38, 0.21, 0.94, 0.1) 0.2s, -ms-transform 0.5s;
  transition: filter 500ms cubic-bezier(0.38, 0.21, 0.94, 0.1) 0.2s, transform 0.5s;
  object-fit: cover;
}
.avatar-img img:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
.site-data {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.site-data > a {
  display: table-cell;
}
.site-data > a div {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.site-data > a:hover div {
  color: #49b1f5 !important;
}
.site-data > a .headline {
  color: var(--font-color);
}
.site-data > a .length-num {
  margin-top: -0.32em;
  color: var(--text-highlight-color);
  font-size: 1.4em;
}
@media screen and (min-width: 900px) {
  html.hide-aside .layout {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  html.hide-aside .layout > .aside-content {
    display: none;
  }
  html.hide-aside .layout > div:first-child {
    width: 80%;
  }
}
.page .sticky_layout {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
@-moz-keyframes more-btn-move {
  0%, 100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
    -o-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px);
  }
}
@-webkit-keyframes more-btn-move {
  0%, 100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
    -o-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px);
  }
}
@-o-keyframes more-btn-move {
  0%, 100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
    -o-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px);
  }
}
@keyframes more-btn-move {
  0%, 100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
    -o-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px);
  }
}
@-moz-keyframes toc-open {
  0% {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes toc-open {
  0% {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes toc-open {
  0% {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes toc-open {
  0% {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes toc-close {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
}
@-webkit-keyframes toc-close {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
}
@-o-keyframes toc-close {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
}
@keyframes toc-close {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
}
#post-comment .comment-head {
  margin-bottom: 20px;
}
#post-comment .comment-head .comment-headline {
  display: inline-block;
  vertical-align: middle;
  font-weight: 700;
  font-size: 1.43em;
}
#post-comment .comment-head #comment-switch {
  display: inline-block;
  float: right;
  margin: 2px auto 0;
  padding: 4px 16px;
  width: max-content;
  border-radius: 8px;
  background: #f6f8fa;
}
#post-comment .comment-head #comment-switch .first-comment {
  color: #49b1f5;
}
#post-comment .comment-head #comment-switch .second-comment {
  color: #ff7242;
}
#post-comment .comment-head #comment-switch .switch-btn {
  position: relative;
  display: inline-block;
  margin: -4px 8px 0;
  width: 42px;
  height: 22px;
  border-radius: 34px;
  background-color: #49b1f5;
  vertical-align: middle;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
  transition: 0.4s;
}
#post-comment .comment-head #comment-switch .switch-btn:before {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #fff;
  content: '';
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
  transition: 0.4s;
}
#post-comment .comment-head #comment-switch .switch-btn.move {
  background-color: #ff7242;
}
#post-comment .comment-head #comment-switch .switch-btn.move:before {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -o-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
#post-comment .comment-wrap > div:nth-child(2) {
  display: none;
}
#footer {
  position: relative;
  background-attachment: scroll;
  background-position: bottom;
  background-size: cover;
}
#footer:before {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
  content: '';
}
#footer-wrap {
  position: relative;
  padding: 40px 20px;
  color: var(--light-grey);
  text-align: center;
}
#footer-wrap a {
  color: var(--light-grey);
}
#footer-wrap a:hover {
  text-decoration: underline;
}
#footer-wrap .footer-separator {
  margin: 0 4px;
}
#footer-wrap .icp-icon {
  padding: 0 4px;
  max-height: 1.4em;
  width: auto;
  vertical-align: text-bottom;
}
#page-header {
  position: relative;
  width: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
#page-header:not(.not-top-img):before {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
  content: '';
}
#page-header.full_page {
  height: 100vh;
  background-attachment: fixed;
}
#page-header.full_page #site-info {
  position: absolute;
  top: 43%;
  padding: 0 10px;
  width: 100%;
}
#page-header #site-title,
#page-header #site-subtitle,
#page-header #scroll-down .scroll-down-effects {
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
  line-height: 1.5;
}
#page-header #site-title {
  margin: 0;
  color: var(--white);
  font-size: 1.85em;
}
@media screen and (min-width: 768px) {
  #page-header #site-title {
    font-size: 2.85em;
  }
}
#page-header #site-subtitle {
  color: var(--light-grey);
  font-size: 1.15em;
}
@media screen and (min-width: 768px) {
  #page-header #site-subtitle {
    font-size: 1.72em;
  }
}
#page-header #site_social_icons {
  display: none;
  margin: 0 auto;
  width: 300px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #page-header #site_social_icons {
    display: block;
  }
}
#page-header #site_social_icons .social-icon {
  margin: 0 10px;
  color: var(--light-grey);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
  font-size: 1.43em;
}
#page-header #scroll-down {
  position: absolute;
  bottom: 0;
  width: 100%;
}
#page-header #scroll-down .scroll-down-effects {
  position: relative;
  width: 100%;
  color: var(--light-grey);
  font-size: 30px;
}
#page-header.not-home-page {
  height: 400px;
}
@media screen and (max-width: 768px) {
  #page-header.not-home-page {
    height: 280px;
  }
}
#page-header #page-site-info {
  position: absolute;
  top: 200px;
  padding: 0 10px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  #page-header #page-site-info {
    top: 140px;
  }
}
#page-header.post-bg {
  height: 400px;
}
@media screen and (max-width: 768px) {
  #page-header.post-bg {
    height: 360px;
  }
}
#page-header.post-bg:before {
  background-color: rgba(0,0,0,0.5);
}
#page-header #post-info {
  position: absolute;
  bottom: 100px;
  padding: 0 8%;
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 900px) {
  #page-header #post-info {
    bottom: 30px;
    text-align: left;
  }
}
@media screen and (max-width: 768px) {
  #page-header #post-info {
    bottom: 22px;
    padding: 0 22px;
  }
}
#page-header.not-top-img {
  margin-bottom: 10px;
  height: 60px;
  background: 0;
}
#page-header.not-top-img #nav {
  -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6);
  box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6);
}
#page-header.not-top-img #nav a {
  color: var(--font-color);
  text-shadow: none;
}
#page-header.nav-fixed #nav {
  position: fixed;
  top: -60px;
  z-index: 91;
  -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6);
  box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6);
  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -ms-transition: -ms-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#page-header.nav-fixed #nav a,
#page-header.nav-fixed #nav #site-name,
#page-header.nav-fixed #nav #toggle-menu {
  color: var(--font-color);
  text-shadow: none;
}
#page-header.nav-fixed #nav a:hover,
#page-header.nav-fixed #nav #site-name:hover,
#page-header.nav-fixed #nav #toggle-menu:hover {
  color: #49b1f5;
}
#page-header.nav-visible #nav {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
#page-header.nav-visible + .layout > .aside-content > .sticky_layout {
  top: 70px;
  -webkit-transition: top 0.5s;
  -moz-transition: top 0.5s;
  -o-transition: top 0.5s;
  -ms-transition: top 0.5s;
  transition: top 0.5s;
}
#page h1.page-title {
  margin: 8px 0 20px;
}
#post > #post-info {
  margin-bottom: 30px;
}
#post > #post-info .post-title {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--light-grey);
  color: var(--text-highlight-color);
}
#post > #post-info .post-title .post-edit-link {
  float: right;
}
#post > #post-info #post-meta,
#post > #post-info #post-meta a {
  color: #78818a;
}
#post-info .post-title {
  margin-bottom: 8px;
  color: var(--white);
  font-weight: normal;
  font-size: 2.5em;
  line-height: 1.5;
  -webkit-line-clamp: 3;
}
@media screen and (max-width: 768px) {
  #post-info .post-title {
    font-size: 2.1em;
  }
}
#post-info .post-title .post-edit-link {
  padding-left: 10px;
}
#post-info #post-meta {
  color: var(--light-grey);
  font-size: 95%;
}
@media screen and (min-width: 768px) {
  #post-info #post-meta > .meta-secondline > span:first-child {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  #post-info #post-meta {
    font-size: 90%;
  }
  #post-info #post-meta > .meta-firstline,
  #post-info #post-meta > .meta-secondline {
    display: inline;
  }
}
#post-info #post-meta .post-meta-separator {
  margin: 0 8px;
}
#post-info #post-meta .post-meta-icon {
  margin-right: 4px;
}
#post-info #post-meta .post-meta-label {
  margin-right: 4px;
}
#post-info #post-meta a {
  color: var(--light-grey);
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#post-info #post-meta a:hover {
  color: #49b1f5;
  text-decoration: underline;
}
#post-info #post-meta time {
  display: none;
}
#nav {
  position: absolute;
  top: 0;
  z-index: 90;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 36px;
  width: 100%;
  height: 60px;
  font-size: 1.3em;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
@media screen and (max-width: 768px) {
  #nav {
    padding: 0 16px;
  }
}
#nav.show {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
#nav #blog_name {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
#nav #toggle-menu {
  display: none;
  padding: 2px 0 0 6px;
  vertical-align: top;
}
#nav #toggle-menu:hover {
  color: var(--white);
}
#nav a {
  color: var(--light-grey);
}
#nav a:hover {
  color: var(--white);
}
#nav #site-name {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
  font-weight: bold;
}
#nav .menus_items {
  display: inline;
}
#nav .menus_items .menus_item {
  position: relative;
  display: inline-block;
  padding: 0 0 0 14px;
}
#nav .menus_items .menus_item:hover .menus_item_child {
  display: block;
}
#nav .menus_items .menus_item:hover > a > i:last-child {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
#nav .menus_items .menus_item > a > i:last-child {
  padding: 4px;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  -ms-transition: -ms-transform 0.3s;
  transition: transform 0.3s;
}
#nav .menus_items .menus_item .menus_item_child {
  position: absolute;
  right: 0;
  display: none;
  margin-top: 8px;
  padding: 0;
  width: max-content;
  background-color: var(--sidebar-bg);
  -webkit-box-shadow: 0 5px 20px -4px rgba(0,0,0,0.5);
  box-shadow: 0 5px 20px -4px rgba(0,0,0,0.5);
  -webkit-animation: sub_menus 0.3s 0.1s ease both;
  -moz-animation: sub_menus 0.3s 0.1s ease both;
  -o-animation: sub_menus 0.3s 0.1s ease both;
  -ms-animation: sub_menus 0.3s 0.1s ease both;
  animation: sub_menus 0.3s 0.1s ease both;
  border-radius: 5px;
}
#nav .menus_items .menus_item .menus_item_child:before {
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 20px;
  content: '';
}
#nav .menus_items .menus_item .menus_item_child li {
  list-style: none;
}
#nav .menus_items .menus_item .menus_item_child li:hover {
  background: var(--text-bg-hover);
}
#nav .menus_items .menus_item .menus_item_child li:first-child {
  border-radius: 5px 5px 0 0;
}
#nav .menus_items .menus_item .menus_item_child li:last-child {
  border-radius: 0 0 5px 5px;
}
#nav .menus_items .menus_item .menus_item_child li a {
  display: inline-block;
  padding: 8px 16px;
  width: 100%;
  color: var(--font-color) !important;
  text-shadow: none !important;
}
#nav.hide-menu #toggle-menu {
  display: inline-block !important;
}
#nav.hide-menu #toggle-menu .site-page {
  font-size: inherit;
}
#nav.hide-menu .menus_items {
  display: none;
}
#nav.hide-menu #search-button span {
  display: none;
}
#nav #search-button {
  display: inline;
  padding: 0px;
}
#nav .site-page {
  position: relative;
  padding-bottom: 6px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  font-size: 0.78em;
}
#nav .site-page:not(.child):after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 3px;
  background-color: #80c8f8;
  content: '';
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#nav .site-page:not(.child):hover:after {
  width: 100%;
}
.loading-bg {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  width: 100%;
  height: 100%;
  position: fixed;
  background: var(--loading-color);
  z-index: 1001;
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
#loading-box .loading-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: auto;
  border: 4px solid #f0f0f2;
  -webkit-animation-duration: 0.3s;
  -moz-animation-duration: 0.3s;
  -o-animation-duration: 0.3s;
  -ms-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-name: loadingAction;
  -moz-animation-name: loadingAction;
  -o-animation-name: loadingAction;
  -ms-animation-name: loadingAction;
  animation-name: loadingAction;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -o-animation-direction: alternate;
  -ms-animation-direction: alternate;
  animation-direction: alternate;
}
#loading-box .loading-image-dot {
  width: 30px;
  height: 30px;
  background: #6bdf8f;
  position: absolute;
  border-radius: 50%;
  border: 6px solid #fff;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(18px, 24px);
  -moz-transform: translate(18px, 24px);
  -o-transform: translate(18px, 24px);
  -ms-transform: translate(18px, 24px);
  transform: translate(18px, 24px);
}
#loading-box.loaded .loading-bg {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  z-index: -1000;
}
@-moz-keyframes loadingAction {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
  }
}
@-webkit-keyframes loadingAction {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
  }
}
@-o-keyframes loadingAction {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
  }
}
@keyframes loadingAction {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
  }
}
#pagination .pagination {
  margin-top: 20px;
  text-align: center;
}
#pagination .page-number.current {
  background: #00c4b6;
  color: var(--white);
}
#pagination .pagination-info {
  position: absolute;
  top: 50%;
  padding: 20px 40px;
  width: 100%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#pagination .prev_info,
#pagination .next_info {
  color: var(--white);
  font-weight: 500;
}
#pagination .next-post .pagination-info {
  text-align: right;
}
#pagination .pull-full {
  width: 100% !important;
}
#pagination .prev-post .label,
#pagination .next-post .label {
  color: var(--light-grey);
  text-transform: uppercase;
  font-size: 90%;
}
#pagination .prev-post,
#pagination .next-post {
  width: 50%;
}
@media screen and (max-width: 768px) {
  #pagination .prev-post,
  #pagination .next-post {
    width: 100%;
  }
}
#pagination .prev-post a,
#pagination .next-post a {
  position: relative;
  display: block;
  overflow: hidden;
  height: 150px;
}
#pagination.pagination-post {
  overflow: hidden;
  margin-top: 40px;
  width: 100%;
  background: #000;
}
.layout > .recent-posts .pagination > * {
  display: inline-block;
  margin: 0 6px;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
}
.layout > .recent-posts .pagination > *:not(.space):hover {
  background: var(--btn-hover-color);
  color: var(--btn-color);
}
.layout > div:not(.recent-posts) .pagination .page-number {
  display: inline-block;
  margin: 0 4px;
  min-width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
}
#article-container {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
#article-container a {
  color: #a591e0;
}
#article-container a:hover {
  text-decoration: underline;
}
#article-container img {
  display: block;
  margin: 0 auto 20px;
  max-width: 100%;
  -webkit-transition: filter 375ms ease-in 0.2s;
  -moz-transition: filter 375ms ease-in 0.2s;
  -o-transition: filter 375ms ease-in 0.2s;
  -ms-transition: filter 375ms ease-in 0.2s;
  transition: filter 375ms ease-in 0.2s;
}
#article-container p {
  margin: 0 0 16px;
}
#article-container iframe {
  margin: 0 0 20px;
}
#article-container ol ol,
#article-container ul ol,
#article-container ol ul,
#article-container ul ul {
  padding-left: 20px;
}
#article-container ol li,
#article-container ul li {
  margin: 4px 0;
}
#article-container ol p,
#article-container ul p {
  margin: 0 0 8px;
}
#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4,
#article-container h5,
#article-container h6 {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#article-container h1:before,
#article-container h2:before,
#article-container h3:before,
#article-container h4:before,
#article-container h5:before,
#article-container h6:before {
  position: absolute;
  top: calc(50% - 7px);
  color: #f47466;
  content: '\f863';
  line-height: 1;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#article-container h1:hover:before,
#article-container h2:hover:before,
#article-container h3:hover:before,
#article-container h4:hover:before,
#article-container h5:hover:before,
#article-container h6:hover:before {
  color: #49b1f5;
}
#article-container h1 {
  padding-left: 32px;
}
#article-container h1:before {
  margin-left: -26px;
  font-size: 20px;
}
#article-container h1:hover {
  padding-left: 38px;
}
#article-container h2 {
  padding-left: 30px;
}
#article-container h2:before {
  margin-left: -24px;
  font-size: 18px;
}
#article-container h2:hover {
  padding-left: 36px;
}
#article-container h3 {
  padding-left: 28px;
}
#article-container h3:before {
  margin-left: -22px;
  font-size: 16px;
}
#article-container h3:hover {
  padding-left: 34px;
}
#article-container h4 {
  padding-left: 26px;
}
#article-container h4:before {
  margin-left: -20px;
  font-size: 14px;
}
#article-container h4:hover {
  padding-left: 32px;
}
#article-container h5 {
  padding-left: 24px;
}
#article-container h5:before {
  margin-left: -18px;
  font-size: 12px;
}
#article-container h5:hover {
  padding-left: 30px;
}
#article-container h6 {
  padding-left: 24px;
}
#article-container h6:before {
  margin-left: -18px;
  font-size: 12px;
}
#article-container h6:hover {
  padding-left: 30px;
}
#article-container ol p,
#article-container ul p {
  margin: 0 0 8px;
}
#article-container li::marker {
  color: #49b1f5;
  font-weight: 600;
  font-size: 1.05em;
}
#article-container li:hover::marker {
  color: var(--pseudo-hover);
}
#article-container ul > li {
  list-style-type: circle;
}
#article-container > :last-child {
  margin-bottom: 0 !important;
}
#post .tag_share .post-meta__tag-list {
  display: inline-block;
}
#post .tag_share .post-meta__tags {
  display: inline-block;
  margin: 8px 8px 8px 0;
  padding: 0 12px;
  width: fit-content;
  border: 1px solid #49b1f5;
  border-radius: 12px;
  color: #49b1f5;
  font-size: 0.85em;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#post .tag_share .post-meta__tags:hover {
  background: #49b1f5;
  color: var(--white);
}
#post .tag_share .post_share {
  display: inline-block;
  float: right;
  margin: 8px 0;
  width: fit-content;
}
#post .tag_share .post_share .social-share {
  font-size: 0.85em;
}
#post .tag_share .post_share .social-share .social-share-icon {
  margin: 0 4px;
  width: 1.85em;
  height: 1.85em;
  font-size: 1.2em;
  line-height: 1.85em;
}
#post .post-copyright {
  position: relative;
  margin: 40px 0 10px;
  padding: 10px 16px;
  border: 1px solid var(--light-grey);
  -webkit-transition: box-shadow 0.3s ease-in-out;
  -moz-transition: box-shadow 0.3s ease-in-out;
  -o-transition: box-shadow 0.3s ease-in-out;
  -ms-transition: box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out;
  overflow: hidden;
  border-radius: 12px !important;
  background: -webkit-linear-gradient(45deg, #f6d8f5, #c2f1f0, #f0debf);
  background: -moz-linear-gradient(45deg, #f6d8f5, #c2f1f0, #f0debf);
  background: -o-linear-gradient(45deg, #f6d8f5, #c2f1f0, #f0debf);
  background: -ms-linear-gradient(45deg, #f6d8f5, #c2f1f0, #f0debf);
  background: linear-gradient(45deg, #f6d8f5, #c2f1f0, #f0debf);
}
#post .post-copyright:before {
  background: var(--heo-post-blockquote-bg);
  position: absolute;
  right: -26px;
  top: -120px;
  content: '\f25e';
  font-size: 200px;
  font-family: 'Font Awesome 5 Brands';
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}
#post .post-copyright:hover {
  -webkit-box-shadow: 0 0 8px 0 rgba(232,237,250,0.6), 0 2px 4px 0 rgba(232,237,250,0.5);
  box-shadow: 0 0 8px 0 rgba(232,237,250,0.6), 0 2px 4px 0 rgba(232,237,250,0.5);
}
#post .post-copyright .post-copyright-meta {
  color: #49b1f5;
  font-weight: bold;
}
#post .post-copyright .post-copyright-info {
  padding-left: 6px;
}
#post .post-copyright .post-copyright-info a {
  text-decoration: none;
  word-break: break-word;
}
#post .post-copyright .post-copyright-info a:hover {
  text-decoration: none;
}
#post .post-copyright-cc-info {
  color: #49b1f5;
}
#post .post-outdate-notice {
  position: relative;
  margin: 0 0 20px;
  padding: 0.5em 1.2em;
  border-radius: 3px;
  background-color: #ffe6e6;
  color: #f66;
  padding: 0.5em 1em 0.5em 2.6em;
  border-left: 5px solid #ff8080;
}
#post .post-outdate-notice:before {
  position: absolute;
  top: 50%;
  left: 0.9em;
  color: #ff8080;
  content: '\f071';
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#post .ads-wrap {
  margin: 40px 0;
}
.post-copyright-m-info .post-copyright-a,
.post-copyright-m-info .post-copyright-c,
.post-copyright-m-info .post-copyright-u {
  display: inline-block;
  width: fit-content;
  padding: 2px 5px;
}
[data-theme="dark"] #post .post-copyright {
  background: #07080a;
  text-shadow: #bfbeb8 0 0 2px;
  border: 1px solid #131201;
  -webkit-box-shadow: 0 0 5px var(--theme-color);
  box-shadow: 0 0 5px var(--theme-color);
  -webkit-animation: flashlight 1s linear infinite alternate;
  -moz-animation: flashlight 1s linear infinite alternate;
  -o-animation: flashlight 1s linear infinite alternate;
  -ms-animation: flashlight 1s linear infinite alternate;
  animation: flashlight 1s linear infinite alternate;
}
[data-theme="dark"] .post-copyright-info {
  color: #e0e0e4;
}
#post .post-copyright__title {
  font-size: 22px;
}
#post .post-copyright__notice {
  font-size: 15px;
}
#post .post-copyright {
  -webkit-box-shadow: 2px 2px 5px;
  box-shadow: 2px 2px 5px;
}
.relatedPosts {
  margin-top: 40px;
}
.relatedPosts > .headline {
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 1.43em;
}
.relatedPosts > .relatedPosts-list > div {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 3px;
  width: calc(33.333% - 6px);
  height: 200px;
  background: #000;
  vertical-align: bottom;
}
@media screen and (max-width: 768px) {
  .relatedPosts > .relatedPosts-list > div {
    margin: 2px;
    width: calc(50% - 4px);
    height: 150px;
  }
}
@media screen and (max-width: 600px) {
  .relatedPosts > .relatedPosts-list > div {
    width: calc(100% - 4px);
  }
}
.relatedPosts > .relatedPosts-list .content {
  position: absolute;
  top: 50%;
  padding: 0 20px;
  width: 100%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.relatedPosts > .relatedPosts-list .content .date {
  color: var(--light-grey);
  font-size: 90%;
}
.relatedPosts > .relatedPosts-list .content .title {
  color: var(--white);
  -webkit-line-clamp: 2;
}
.post-reward {
  position: relative;
  margin-top: 3rem;
  width: 100%;
  text-align: center;
}
.post-reward .reward-button {
  position: relative;
  display: inline-block;
  padding: 0.2rem 1.2rem;
  background: var(--btn-bg);
  color: var(--btn-color);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
  border-radius: 30px;
}
.post-reward .reward-button:hover {
  -webkit-box-shadow: inset 20em 0 0 0 var(--btn-hover-color);
  box-shadow: inset 20em 0 0 0 var(--btn-hover-color);
}
.post-reward .reward-button:hover .reward-main {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
.post-reward .reward-button .reward-main {
  position: absolute;
  bottom: 40px;
  left: 50%;
  translate: -50% 0;
  z-index: 100;
  display: none;
  padding: 0 0 15px;
  width: max-content;
}
.post-reward .reward-button .reward-main .reward-all {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  margin: 0;
  padding: 1rem 0.5rem;
  border-radius: 12px;
  background: var(--reward-pop);
}
.post-reward .reward-button .reward-main .reward-all:before {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  content: '';
}
.post-reward .reward-button .reward-main .reward-all:after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: 13px solid var(--reward-pop);
  border-right: 13px solid transparent;
  border-left: 13px solid transparent;
  content: '';
}
.post-reward .reward-button .reward-main .reward-all .reward-item {
  display: inline-block;
  padding: 0 8px;
  list-style-type: none;
  vertical-align: top;
}
.post-reward .reward-button .reward-main .reward-all .reward-item img {
  height: 140px;
  width: auto;
  object-fit: contain;
}
.post-reward .reward-button .reward-main .reward-all .reward-item .post-qr-code-desc {
  padding-top: 0.4rem;
  width: auto;
  color: #858585;
}
#rightside {
  position: fixed;
  right: -48px;
  bottom: 40px;
  z-index: 100;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
#rightside #rightside-config-hide {
  height: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -o-transition: -o-transform 0.4s;
  -ms-transition: -ms-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transform: translate(45px, 0);
  -moz-transform: translate(45px, 0);
  -o-transform: translate(45px, 0);
  -ms-transform: translate(45px, 0);
  transform: translate(45px, 0);
}
#rightside #rightside-config-hide.show {
  height: auto;
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#rightside #rightside-config-hide.status {
  height: auto;
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
#rightside > div > button,
#rightside > div > a {
  display: block;
  margin-bottom: 5px;
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background-color: var(--btn-bg);
  color: var(--btn-color);
  text-align: center;
  font-size: 16px;
  line-height: 35px;
}
#rightside > div > button:hover,
#rightside > div > a:hover {
  background-color: var(--btn-hover-color);
}
#rightside #mobile-toc-button {
  display: none;
}
@media screen and (max-width: 900px) {
  #rightside #mobile-toc-button {
    display: block;
  }
}
@media screen and (max-width: 900px) {
  #rightside #hide-aside-btn {
    display: none;
  }
}
#sidebar #menu-mask {
  position: fixed;
  z-index: 102;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
}
#sidebar #sidebar-menus {
  position: fixed;
  top: 0;
  right: -300px;
  z-index: 103;
  overflow-x: hidden;
  overflow-y: auto;
  width: 300px;
  height: 100%;
  background: var(--sidebar-bg);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
#sidebar #sidebar-menus.open {
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
#sidebar #sidebar-menus > .avatar-img {
  margin: 20px auto;
}
#sidebar #sidebar-menus .sidebar-site-data {
  padding: 0 10px;
}
#sidebar #sidebar-menus hr {
  margin: 20px auto;
}
#sidebar #sidebar-menus .menus_items {
  padding: 0 10px 40px;
}
#sidebar #sidebar-menus .menus_items .site-page {
  position: relative;
  display: block;
  padding: 6px 30px 6px 22px;
  color: var(--font-color);
  font-size: 1.15em;
}
#sidebar #sidebar-menus .menus_items .site-page:hover {
  background: var(--text-bg-hover);
}
#sidebar #sidebar-menus .menus_items .site-page i:first-child {
  width: 15%;
  text-align: left;
}
#sidebar #sidebar-menus .menus_items .site-page.group > i:last-child {
  position: absolute;
  top: 0.78em;
  right: 18px;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  -ms-transition: -ms-transform 0.3s;
  transition: transform 0.3s;
}
#sidebar #sidebar-menus .menus_items .site-page.group.hide > i:last-child {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
#sidebar #sidebar-menus .menus_items .site-page.group.hide + .menus_item_child {
  display: none;
}
#sidebar #sidebar-menus .menus_items .menus_item_child {
  margin: 0;
  list-style: none;
}
.Cuteen_DarkSky,
.Cuteen_DarkSky:before {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 88888888;
}
.Cuteen_DarkSky {
  background: -webkit-linear-gradient(bottom, #f8cd71 0, #5bfde9 80%);
  background: -moz-linear-gradient(bottom, #f8cd71 0, #5bfde9 80%);
  background: -o-linear-gradient(bottom, #f8cd71 0, #5bfde9 80%);
  background: -ms-linear-gradient(bottom, #f8cd71 0, #5bfde9 80%);
  background: linear-gradient(to top, #f8cd71 0, #5bfde9 80%);
}
.Cuteen_DarkSky:before {
  -webkit-transition: 2s ease all;
  -moz-transition: 2s ease all;
  -o-transition: 2s ease all;
  -ms-transition: 2s ease all;
  transition: 2s ease all;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  background: -webkit-linear-gradient(bottom, #30cfd0 0, #330867 100%);
  background: -moz-linear-gradient(bottom, #30cfd0 0, #330867 100%);
  background: -o-linear-gradient(bottom, #30cfd0 0, #330867 100%);
  background: -ms-linear-gradient(bottom, #30cfd0 0, #330867 100%);
  background: linear-gradient(to top, #30cfd0 0, #330867 100%);
}
.DarkMode .Cuteen_DarkSky:before {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.Cuteen_DarkPlanet {
  z-index: 99999999;
  position: fixed;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  -webkit-animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
  -webkit-animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
  -moz-animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
  -o-animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
  -ms-animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
  animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes CuteenPlanetMove {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.Cuteen_DarkPlanet #sun {
  position: absolute;
  border-radius: 100%;
  left: 44%;
  top: 30%;
  height: 6rem;
  width: 6rem;
  background: #ffee94;
  -webkit-box-shadow: 0 0 40px #ffee94;
  box-shadow: 0 0 40px #ffee94;
}
.Cuteen_DarkPlanet #moon {
  position: absolute;
  border-radius: 100%;
  left: 44%;
  top: 30%;
  position: absolute;
  border-radius: 100%;
  height: 6rem;
  width: 6rem;
  -webkit-box-shadow: -1.8em 1.8em 0 0.2em #fff;
  box-shadow: -1.8em 1.8em 0 0.2em #fff;
}
.search span {
  display: none;
}
.menus_item a {
  text-decoration: none !important;
}
@-moz-keyframes CuteenPlanetMove {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes CuteenPlanetMove {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes CuteenPlanetMove {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes CuteenPlanetMove {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#vcomment {
  font-size: 1.1em;
}
#vcomment .vbtn {
  border: none;
  background: var(--btn-bg);
  color: var(--btn-color);
}
#vcomment .vbtn:hover {
  background: var(--btn-hover-color);
}
#vcomment .vimg {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
#vcomment .vimg:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
#vcomment .vcards .vcard .vcontent.expand:before,
#vcomment .vcards .vcard .vcontent.expand:after {
  z-index: 22;
}
#waline-wrap {
  --waline-font-size: 1.1em;
  --waline-theme-color: #49b1f5;
  --waline-active-color: #ff7242;
}
#waline-wrap .vuser {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
#waline-wrap .vuser:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
.fireworks {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
}
.medium-zoom-image--opened {
  z-index: 99999 !important;
  margin: 0 !important;
}
.medium-zoom-overlay {
  z-index: 99999 !important;
}
.mermaid-wrap {
  margin: 0 0 20px;
  text-align: center;
}
.mermaid-wrap > svg {
  height: 100%;
}
.utterances,
.fb-comments iframe {
  width: 100% !important;
}
#gitalk-container .gt-meta {
  margin: 0 0 0.8em;
  padding: 6px 0 16px;
}
.katex-wrap {
  overflow: auto;
}
.katex-wrap::-webkit-scrollbar {
  display: none;
}
mjx-container[display],
.has-jax {
  overflow-x: auto;
  overflow-y: hidden;
  line-height: normal !important;
}
.aplayer {
  color: #1f1f1f;
}
#article-container .aplayer {
  margin: 0 0 20px;
}
#article-container .aplayer ol,
#article-container .aplayer ul {
  margin: 0;
  padding: 0;
}
#article-container .aplayer ol li,
#article-container .aplayer ul li {
  margin: 0;
  padding: 0 15px;
}
#article-container .aplayer ol li:before,
#article-container .aplayer ul li:before {
  content: none;
}
.snackbar-css {
  border-radius: 5px !important;
}
[data-theme="dark"] #web_bg {
  background: var(--darkmode-bg);
  background-attachment: local;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 800px) {
  #web_bg {
    background: var(--mobileday-bg);
    background-attachment: local !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  [data-theme="dark"] #web_bg {
    background: var(--mobilenight-bg);
    background-attachment: local !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}
#article-container .btn-center {
  margin: 0 0 20px;
  text-align: center;
}
#article-container .btn-beautify {
  display: inline-block;
  margin: 0 4px 6px;
  padding: 0 15px;
  background-color: var(--btn-beautify-color, #777);
  color: #fff;
  line-height: 2;
}
#article-container .btn-beautify.blue {
  --btn-beautify-color: #428bca;
}
#article-container .btn-beautify.pink {
  --btn-beautify-color: #ff69b4;
}
#article-container .btn-beautify.red {
  --btn-beautify-color: #f00;
}
#article-container .btn-beautify.purple {
  --btn-beautify-color: #6f42c1;
}
#article-container .btn-beautify.orange {
  --btn-beautify-color: #ff8c00;
}
#article-container .btn-beautify.green {
  --btn-beautify-color: #5cb85c;
}
#article-container .btn-beautify:hover {
  background-color: var(--btn-hover-color);
}
#article-container .btn-beautify i + span {
  margin-left: 6px;
}
#article-container .btn-beautify:not(.block) + .btn-beautify:not(.block) {
  margin: 0 4px 20px;
}
#article-container .btn-beautify.block {
  display: block;
  margin: 0 0 20px;
  width: fit-content;
  width: -moz-fit-content;
}
#article-container .btn-beautify.block.center {
  margin: 0 auto 20px;
}
#article-container .btn-beautify.block.right {
  margin: 0 0 20px auto;
}
#article-container .btn-beautify.larger {
  padding: 6px 15px;
}
#article-container .btn-beautify:hover {
  text-decoration: none;
}
#article-container .btn-beautify.outline {
  border: 1px solid transparent;
  border-color: var(--btn-beautify-color, #777);
  background-color: transparent;
  color: var(--btn-beautify-color, #777);
}
#article-container .btn-beautify.outline:hover {
  background-color: var(--btn-beautify-color, #777);
}
#article-container .btn-beautify.outline:hover {
  color: #fff !important;
}
#article-container figure.gallery-group {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 6px 4px;
  width: calc(50% - 8px);
  height: 250px;
  border-radius: 8px;
  background: #000;
  -webkit-transform: translate3d(0, 0, 0);
}
@media screen and (max-width: 600px) {
  #article-container figure.gallery-group {
    width: calc(100% - 8px);
  }
}
#article-container figure.gallery-group:hover img {
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#article-container figure.gallery-group:hover .gallery-group-name::after {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#article-container figure.gallery-group:hover p {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#article-container figure.gallery-group img {
  position: relative;
  margin: 0;
  max-width: none;
  width: calc(100% + 20px);
  height: 250px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  -webkit-transition: all 0.3s, filter 375ms ease-in 0.2s;
  -moz-transition: all 0.3s, filter 375ms ease-in 0.2s;
  -o-transition: all 0.3s, filter 375ms ease-in 0.2s;
  -ms-transition: all 0.3s, filter 375ms ease-in 0.2s;
  transition: all 0.3s, filter 375ms ease-in 0.2s;
  -webkit-transform: translate3d(-10px, 0, 0);
  -moz-transform: translate3d(-10px, 0, 0);
  -o-transform: translate3d(-10px, 0, 0);
  -ms-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
  object-fit: cover;
}
#article-container figure.gallery-group figcaption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 30px;
  width: 100%;
  height: 100%;
  color: #fff;
  text-transform: uppercase;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
#article-container figure.gallery-group figcaption > a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#article-container figure.gallery-group p {
  margin: 0;
  padding: 8px 0 0;
  letter-spacing: 1px;
  font-size: 1.1em;
  line-height: 1.5;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  -moz-transition: opacity 0.35s, -moz-transform 0.35s;
  -o-transition: opacity 0.35s, -o-transform 0.35s;
  -ms-transition: opacity 0.35s, -ms-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-line-clamp: 4;
}
#article-container figure.gallery-group .gallery-group-name {
  position: relative;
  margin: 0;
  padding: 8px 0;
  font-weight: bold;
  font-size: 1.65em;
  line-height: 1.5;
  -webkit-line-clamp: 2;
}
#article-container figure.gallery-group .gallery-group-name:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  -moz-transition: -moz-transform 0.35s;
  -o-transition: -o-transform 0.35s;
  -ms-transition: -ms-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
#article-container .gallery-group-main {
  overflow: auto;
  padding: 0 0 16px;
}
#article-container .fj-gallery {
  margin: 0 0 16px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#article-container .fj-gallery .img-alt {
  display: none;
}
blockquote.pullquote {
  position: relative;
  max-width: 45%;
  font-size: 110%;
}
blockquote.pullquote.left {
  float: left;
  margin: 1em 0.5em 0 0;
}
blockquote.pullquote.right {
  float: right;
  margin: 1em 0 0 0.5em;
}
.video-container {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  padding-top: 56.25%;
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0;
  width: 100%;
  height: 100%;
}
.hide-inline > .hide-button,
.hide-block > .hide-button {
  display: inline-block;
  padding: 5px 18px;
  background: #49b1f5;
  color: var(--white);
}
.hide-inline > .hide-button:hover,
.hide-block > .hide-button:hover {
  background-color: var(--btn-hover-color);
}
.hide-inline > .hide-button.open,
.hide-block > .hide-button.open {
  display: none;
}
.hide-inline > .hide-button.open + div,
.hide-block > .hide-button.open + div {
  display: block;
}
.hide-inline > .hide-button.open + span,
.hide-block > .hide-button.open + span {
  display: inline;
}
.hide-inline > .hide-content,
.hide-block > .hide-content {
  display: none;
}
.hide-inline > .hide-button {
  margin: 0 6px;
}
.hide-inline > .hide-content {
  margin: 0 6px;
}
.hide-block {
  margin: 0 0 16px;
}
.toggle {
  margin-bottom: 20px;
  border: 1px solid #f0f0f0;
}
.toggle > .toggle-button {
  padding: 6px 15px;
  background: #f0f0f0;
  color: #1f2d3d;
}
.toggle > .toggle-content {
  margin: 30px 24px;
}
#article-container .inline-img {
  display: inline;
  margin: 0 3px;
  height: 1.1em;
  vertical-align: text-bottom;
}
.hl-label {
  padding: 2px 4px;
  border-radius: 3px;
  color: #fff;
}
.hl-label.default {
  background-color: #777;
}
.hl-label.blue {
  background-color: #428bca;
}
.hl-label.pink {
  background-color: #ff69b4;
}
.hl-label.red {
  background-color: #f00;
}
.hl-label.purple {
  background-color: #6f42c1;
}
.hl-label.orange {
  background-color: #ff8c00;
}
.hl-label.green {
  background-color: #5cb85c;
}
.note {
  position: relative;
  margin: 0 0 20px;
  padding: 15px;
  border-radius: 3px;
}
.note.icon-padding {
  padding-left: 3em;
}
.note > .note-icon {
  position: absolute;
  top: calc(50% - 0.5em);
  left: 0.8em;
  font-size: larger;
}
.note.blue:not(.disabled) {
  border-left-color: #428bca !important;
}
.note.blue:not(.disabled).modern {
  border-left-color: transparent !important;
  color: #428bca;
}
.note.blue:not(.disabled):not(.simple) {
  background: #e3eef7 !important;
}
.note.blue > .note-icon {
  color: #428bca;
}
.note.pink:not(.disabled) {
  border-left-color: #ff69b4 !important;
}
.note.pink:not(.disabled).modern {
  border-left-color: transparent !important;
  color: #ff69b4;
}
.note.pink:not(.disabled):not(.simple) {
  background: #ffe9f4 !important;
}
.note.pink > .note-icon {
  color: #ff69b4;
}
.note.red:not(.disabled) {
  border-left-color: #f00 !important;
}
.note.red:not(.disabled).modern {
  border-left-color: transparent !important;
  color: #f00;
}
.note.red:not(.disabled):not(.simple) {
  background: #ffd9d9 !important;
}
.note.red > .note-icon {
  color: #f00;
}
.note.purple:not(.disabled) {
  border-left-color: #6f42c1 !important;
}
.note.purple:not(.disabled).modern {
  border-left-color: transparent !important;
  color: #6f42c1;
}
.note.purple:not(.disabled):not(.simple) {
  background: #e9e3f6 !important;
}
.note.purple > .note-icon {
  color: #6f42c1;
}
.note.orange:not(.disabled) {
  border-left-color: #ff8c00 !important;
}
.note.orange:not(.disabled).modern {
  border-left-color: transparent !important;
  color: #ff8c00;
}
.note.orange:not(.disabled):not(.simple) {
  background: #ffeed9 !important;
}
.note.orange > .note-icon {
  color: #ff8c00;
}
.note.green:not(.disabled) {
  border-left-color: #5cb85c !important;
}
.note.green:not(.disabled).modern {
  border-left-color: transparent !important;
  color: #5cb85c;
}
.note.green:not(.disabled):not(.simple) {
  background: #e7f4e7 !important;
}
.note.green > .note-icon {
  color: #5cb85c;
}
.note.simple {
  border: 1px solid #eee;
  border-left-width: 5px;
}
.note.modern {
  border: 1px solid transparent !important;
  background-color: #f5f5f5;
  color: #1f1f1f;
}
.note.flat {
  border: initial;
  border-left: 5px solid #eee;
  background-color: #f9f9f9;
  color: #1f1f1f;
}
.note h2,
.note h3,
.note h4,
.note h5,
.note h6 {
  margin-top: 3px;
  margin-bottom: 0;
  padding-top: 0 !important;
  border-bottom: initial;
}
.note p:first-child,
.note ul:first-child,
.note ol:first-child,
.note table:first-child,
.note pre:first-child,
.note blockquote:first-child,
.note img:first-child {
  margin-top: 0 !important;
}
.note p:last-child,
.note ul:last-child,
.note ol:last-child,
.note table:last-child,
.note pre:last-child,
.note blockquote:last-child,
.note img:last-child {
  margin-bottom: 0 !important;
}
.note:not(.no-icon) {
  padding-left: 3em;
}
.note:not(.no-icon)::before {
  position: absolute;
  top: calc(50% - 0.95em);
  left: 0.8em;
  font-size: larger;
}
.note.default.flat {
  background: #f7f7f7;
}
.note.default.modern {
  border-color: #e1e1e1;
  background: #f3f3f3;
  color: #666;
}
.note.default.modern a:not(.btn) {
  color: #666;
}
.note.default.modern a:not(.btn):hover {
  color: #454545;
}
.note.default:not(.modern) {
  border-left-color: #777;
}
.note.default:not(.modern) h2,
.note.default:not(.modern) h3,
.note.default:not(.modern) h4,
.note.default:not(.modern) h5,
.note.default:not(.modern) h6 {
  color: #777;
}
.note.default:not(.no-icon)::before {
  content: '\f0a9';
}
.note.default:not(.no-icon):not(.modern)::before {
  color: #777;
}
.note.primary.flat {
  background: #f5f0fa;
}
.note.primary.modern {
  border-color: #e1c2ff;
  background: #f3daff;
  color: #6f42c1;
}
.note.primary.modern a:not(.btn) {
  color: #6f42c1;
}
.note.primary.modern a:not(.btn):hover {
  color: #453298;
}
.note.primary:not(.modern) {
  border-left-color: #6f42c1;
}
.note.primary:not(.modern) h2,
.note.primary:not(.modern) h3,
.note.primary:not(.modern) h4,
.note.primary:not(.modern) h5,
.note.primary:not(.modern) h6 {
  color: #6f42c1;
}
.note.primary:not(.no-icon)::before {
  content: '\f055';
}
.note.primary:not(.no-icon):not(.modern)::before {
  color: #6f42c1;
}
.note.info.flat {
  background: #eef7fa;
}
.note.info.modern {
  border-color: #b3e5ef;
  background: #d9edf7;
  color: #31708f;
}
.note.info.modern a:not(.btn) {
  color: #31708f;
}
.note.info.modern a:not(.btn):hover {
  color: #215761;
}
.note.info:not(.modern) {
  border-left-color: #428bca;
}
.note.info:not(.modern) h2,
.note.info:not(.modern) h3,
.note.info:not(.modern) h4,
.note.info:not(.modern) h5,
.note.info:not(.modern) h6 {
  color: #428bca;
}
.note.info:not(.no-icon)::before {
  content: '\f05a';
}
.note.info:not(.no-icon):not(.modern)::before {
  color: #428bca;
}
.note.success.flat {
  background: #eff8f0;
}
.note.success.modern {
  border-color: #d0e6be;
  background: #dff0d8;
  color: #3c763d;
}
.note.success.modern a:not(.btn) {
  color: #3c763d;
}
.note.success.modern a:not(.btn):hover {
  color: #32562c;
}
.note.success:not(.modern) {
  border-left-color: #5cb85c;
}
.note.success:not(.modern) h2,
.note.success:not(.modern) h3,
.note.success:not(.modern) h4,
.note.success:not(.modern) h5,
.note.success:not(.modern) h6 {
  color: #5cb85c;
}
.note.success:not(.no-icon)::before {
  content: '\f058';
}
.note.success:not(.no-icon):not(.modern)::before {
  color: #5cb85c;
}
.note.warning.flat {
  background: #fdf8ea;
}
.note.warning.modern {
  border-color: #fae4cd;
  background: #fcf4e3;
  color: #8a6d3b;
}
.note.warning.modern a:not(.btn) {
  color: #8a6d3b;
}
.note.warning.modern a:not(.btn):hover {
  color: #714f30;
}
.note.warning:not(.modern) {
  border-left-color: #f0ad4e;
}
.note.warning:not(.modern) h2,
.note.warning:not(.modern) h3,
.note.warning:not(.modern) h4,
.note.warning:not(.modern) h5,
.note.warning:not(.modern) h6 {
  color: #f0ad4e;
}
.note.warning:not(.no-icon)::before {
  content: '\f06a';
}
.note.warning:not(.no-icon):not(.modern)::before {
  color: #f0ad4e;
}
.note.danger.flat {
  background: #fcf1f2;
}
.note.danger.modern {
  border-color: #ebcdd2;
  background: #f2dfdf;
  color: #a94442;
}
.note.danger.modern a:not(.btn) {
  color: #a94442;
}
.note.danger.modern a:not(.btn):hover {
  color: #84333f;
}
.note.danger:not(.modern) {
  border-left-color: #d9534f;
}
.note.danger:not(.modern) h2,
.note.danger:not(.modern) h3,
.note.danger:not(.modern) h4,
.note.danger:not(.modern) h5,
.note.danger:not(.modern) h6 {
  color: #d9534f;
}
.note.danger:not(.no-icon)::before {
  content: '\f056';
}
.note.danger:not(.no-icon):not(.modern)::before {
  color: #d9534f;
}
#article-container .tabs {
  position: relative;
  margin: 0 0 20px;
  border-right: 1px solid var(--tab-border-color);
  border-bottom: 1px solid var(--tab-border-color);
  border-left: 1px solid var(--tab-border-color);
}
#article-container .tabs > .nav-tabs {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  background: var(--tab-botton-bg);
}
#article-container .tabs > .nav-tabs > .tab {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 768px) {
  #article-container .tabs > .nav-tabs > .tab {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    -ms-box-flex: 1;
    box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
  }
}
#article-container .tabs > .nav-tabs > .tab button {
  display: block;
  padding: 8px 18px;
  width: 100%;
  border-top: 2px solid var(--tab-border-color);
  background: var(--tab-botton-bg);
  color: var(--tab-botton-color);
  line-height: 2;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
}
#article-container .tabs > .nav-tabs > .tab button i {
  width: 1.5em;
}
#article-container .tabs > .nav-tabs > .tab.active button {
  border-top: 2px solid #49b1f5;
  background: var(--tab-button-active-bg);
  cursor: default;
}
#article-container .tabs > .nav-tabs > .tab:not(.active) button:hover {
  border-top: 2px solid var(--tab-button-hover-bg);
  background: var(--tab-button-hover-bg);
}
#article-container .tabs > .tab-contents .tab-item-content {
  position: relative;
  display: none;
  padding: 36px 24px;
}
@media screen and (max-width: 768px) {
  #article-container .tabs > .tab-contents .tab-item-content {
    padding: 24px 14px;
  }
}
#article-container .tabs > .tab-contents .tab-item-content.active {
  display: block;
  -webkit-animation: tabshow 0.5s;
  -moz-animation: tabshow 0.5s;
  -o-animation: tabshow 0.5s;
  -ms-animation: tabshow 0.5s;
  animation: tabshow 0.5s;
}
#article-container .tabs .tab-to-top {
  position: relative;
  display: block;
  margin: 0 0 0 auto;
  color: #99a9bf;
}
@-moz-keyframes tabshow {
  0% {
    -webkit-transform: translateY(15px);
    -moz-transform: translateY(15px);
    -o-transform: translateY(15px);
    -ms-transform: translateY(15px);
    transform: translateY(15px);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes tabshow {
  0% {
    -webkit-transform: translateY(15px);
    -moz-transform: translateY(15px);
    -o-transform: translateY(15px);
    -ms-transform: translateY(15px);
    transform: translateY(15px);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-o-keyframes tabshow {
  0% {
    -webkit-transform: translateY(15px);
    -moz-transform: translateY(15px);
    -o-transform: translateY(15px);
    -ms-transform: translateY(15px);
    transform: translateY(15px);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes tabshow {
  0% {
    -webkit-transform: translateY(15px);
    -moz-transform: translateY(15px);
    -o-transform: translateY(15px);
    -ms-transform: translateY(15px);
    transform: translateY(15px);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
#article-container .timeline {
  margin: 0 0 20px 10px;
  padding: 14px 20px 5px;
  border-left: 2px solid var(--timeline-color, #49b1f5);
}
#article-container .timeline.blue {
  --timeline-color: #428bca;
  --timeline-bg: rgba(66,139,202, 0.2);
}
#article-container .timeline.pink {
  --timeline-color: #ff69b4;
  --timeline-bg: rgba(255,105,180, 0.2);
}
#article-container .timeline.red {
  --timeline-color: #f00;
  --timeline-bg: rgba(255,0,0, 0.2);
}
#article-container .timeline.purple {
  --timeline-color: #6f42c1;
  --timeline-bg: rgba(111,66,193, 0.2);
}
#article-container .timeline.orange {
  --timeline-color: #ff8c00;
  --timeline-bg: rgba(255,140,0, 0.2);
}
#article-container .timeline.green {
  --timeline-color: #5cb85c;
  --timeline-bg: rgba(92,184,92, 0.2);
}
#article-container .timeline .timeline-item {
  margin: 0 0 15px;
}
#article-container .timeline .timeline-item:hover .item-circle:before {
  border-color: var(--timeline-color, #49b1f5);
}
#article-container .timeline .timeline-item.headline .timeline-item-title .item-circle > p {
  font-weight: 600;
  font-size: 1.2em;
}
#article-container .timeline .timeline-item.headline .timeline-item-title .item-circle:before {
  left: -28px;
  border: 4px solid var(--timeline-color, #49b1f5);
}
#article-container .timeline .timeline-item.headline:hover .item-circle:before {
  border-color: var(--pseudo-hover);
}
#article-container .timeline .timeline-item .timeline-item-title {
  position: relative;
}
#article-container .timeline .timeline-item .item-circle:before {
  position: absolute;
  top: 50%;
  left: -27px;
  width: 6px;
  height: 6px;
  border: 3px solid var(--pseudo-hover);
  border-radius: 50%;
  background: var(--card-bg);
  content: '';
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#article-container .timeline .timeline-item .item-circle > p {
  margin: 0 0 8px;
  font-weight: 500;
}
#article-container .timeline .timeline-item .timeline-item-content {
  position: relative;
  padding: 12px 15px;
  border-radius: 8px;
  background: var(--timeline-bg, #e4f3fd);
  font-size: 0.93em;
}
#article-container .timeline .timeline-item .timeline-item-content > :last-child {
  margin-bottom: 0;
}
#article-container .timeline + .timeline {
  margin-top: -20px;
}
[data-theme='dark'] {
  --global-bg: #0d0d0d;
  --font-color: rgba(255,255,255,0.8);
  --hr-border: rgba(255,255,255,0.4);
  --hr-before-color: rgba(255,255,255,0.7);
  --search-bg: #121212;
  --search-input-color: rgba(255,255,255,0.7);
  --search-result-title: rgba(255,255,255,0.9);
  --preloader-bg: #0d0d0d;
  --preloader-color: rgba(255,255,255,0.7);
  --tab-border-color: #2c2c2c;
  --tab-botton-bg: #2c2c2c;
  --tab-botton-color: rgba(255,255,255,0.7);
  --tab-button-hover-bg: #383838;
  --tab-button-active-bg: #121212;
  --card-bg: #121212;
  --sidebar-bg: #121212;
  --btn-hover-color: #787878;
  --btn-color: rgba(255,255,255,0.7);
  --btn-bg: #1f1f1f;
  --text-bg-hover: #383838;
  --light-grey: rgba(255,255,255,0.7);
  --dark-grey: rgba(255,255,255,0.2);
  --white: rgba(255,255,255,0.9);
  --text-highlight-color: rgba(255,255,255,0.9);
  --blockquote-color: rgba(255,255,255,0.7);
  --blockquote-bg: #2c2c2c;
  --reward-pop: #2c2c2c;
  --toc-link-color: rgba(255,255,255,0.6);
  --hl-color: rgba(255,255,255,0.7);
  --hl-bg: #171717;
  --hltools-bg: #1a1a1a;
  --hltools-color: #90a4ae;
  --hlnumber-bg: #171717;
  --hlnumber-color: rgba(255,255,255,0.4);
  --hlscrollbar-bg: #1f1f1f;
  --hlexpand-bg: linear-gradient(180deg, rgba(23,23,23,0.6), rgba(23,23,23,0.9));
  --scrollbar-color: #1f1f1f;
  --timeline-bg: #1f1f1f;
}
[data-theme='dark'] #web_bg:before,
[data-theme='dark'] #footer:before,
[data-theme='dark'] #page-header:before {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  content: '';
}
[data-theme='dark'] #article-container code {
  background: #2c2c2c;
}
[data-theme='dark'] #article-container pre > code {
  background: #171717;
}
[data-theme='dark'] #article-container figure.highlight {
  -webkit-box-shadow: none;
  box-shadow: none;
}
[data-theme='dark'] #article-container .note code {
  background: rgba(27,31,35,0.05);
}
[data-theme='dark'] #article-container .aplayer {
  filter: brightness(0.8);
}
[data-theme='dark'] #article-container kbd {
  border-color: #696969;
  background-color: #525252;
  color: #e2f1ff;
}
[data-theme='dark'] #page-header.nav-fixed > #nav,
[data-theme='dark'] #page-header.not-top-img > #nav {
  background: rgba(18,18,18,0.8);
  -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0);
  box-shadow: 0 5px 6px -5px rgba(133,133,133,0);
}
[data-theme='dark'] #post-comment #comment-switch {
  background: #2c2c2c !important;
}
[data-theme='dark'] #post-comment #comment-switch .switch-btn {
  filter: brightness(0.8);
}
[data-theme='dark'] .note {
  filter: brightness(0.8);
}
[data-theme='dark'] .hide-button,
[data-theme='dark'] .btn-beautify,
[data-theme='dark'] .hl-label,
[data-theme='dark'] .post-outdate-notice,
[data-theme='dark'] .error-img,
[data-theme='dark'] #article-container iframe,
[data-theme='dark'] .gist,
[data-theme='dark'] .ads-wrap {
  filter: brightness(0.8);
}
[data-theme='dark'] img {
  filter: blur(0) brightness(0.8);
}
[data-theme='dark'] #aside-content .aside-list > .aside-list-item:not(:last-child) {
  border-bottom: 1px dashed rgba(255,255,255,0.1);
}
[data-theme='dark'] #gitalk-container {
  filter: brightness(0.8);
}
[data-theme='dark'] #gitalk-container svg {
  fill: rgba(255,255,255,0.9) !important;
}
[data-theme='dark'] #disqusjs #dsqjs:hover,
[data-theme='dark'] #disqusjs #dsqjs:focus,
[data-theme='dark'] #disqusjs #dsqjs .dsqjs-tab-active,
[data-theme='dark'] #disqusjs #dsqjs .dsqjs-no-comment {
  color: rgba(255,255,255,0.7);
}
[data-theme='dark'] #disqusjs #dsqjs .dsqjs-order-label {
  background-color: #1f1f1f;
}
[data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body {
  color: rgba(255,255,255,0.7);
}
[data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body code,
[data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body pre {
  background: #2c2c2c;
}
[data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body blockquote {
  color: rgba(255,255,255,0.7);
}
[data-theme='dark'] #artitalk_main #lazy {
  background: #121212;
}
[data-theme='dark'] #operare_artitalk .c2 {
  background: #121212;
}
@media screen and (max-width: 900px) {
  [data-theme='dark'] #card-toc {
    background: #1f1f1f;
  }
}
.read-mode {
  --font-color: #4c4948;
  --readmode-light-color: #fff;
  --white: #4c4948;
  --light-grey: #4c4948;
  --gray: #d6dbdf;
  --hr-border: #d6dbdf;
  --hr-before-color: #b9c2c9;
  --highlight-bg: #f7f7f7;
  --exit-btn-bg: #c0c0c0;
  --exit-btn-color: #fff;
  --exit-btn-hover: #8d8d8d;
  --pseudo-hover: none;
}
[data-theme='dark'] .read-mode {
  --font-color: rgba(255,255,255,0.7);
  --readmode-light-color: #0d0d0d;
  --white: rgba(255,255,255,0.9);
  --light-grey: rgba(255,255,255,0.7);
  --gray: rgba(255,255,255,0.7);
  --hr-border: rgba(255,255,255,0.5);
  --hr-before-color: rgba(255,255,255,0.7);
  --highlight-bg: #171717;
  --exit-btn-bg: #1f1f1f;
  --exit-btn-color: rgba(255,255,255,0.9);
  --exit-btn-hover: #525252;
}
.read-mode {
  background: var(--readmode-light-color);
}
.read-mode .exit-readmode {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--exit-btn-bg);
  color: var(--exit-btn-color);
  font-size: 16px;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  -o-transition: background 0.3s;
  -ms-transition: background 0.3s;
  transition: background 0.3s;
}
@media screen and (max-width: 768px) {
  .read-mode .exit-readmode {
    top: initial;
    bottom: 30px;
  }
}
.read-mode .exit-readmode:hover {
  background: var(--exit-btn-hover);
}
.read-mode #aside-content {
  display: none;
}
.read-mode #page-header.post-bg {
  background-color: transparent;
  background-image: none !important;
}
.read-mode #page-header.post-bg:before {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.read-mode #page-header.post-bg > #post-info {
  text-align: center;
}
.read-mode #post {
  margin: 0 auto;
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.read-mode #post:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.read-mode > canvas {
  display: none !important;
}
.read-mode .highlight-tools,
.read-mode #footer,
.read-mode #post > *:not(#post-info):not(.post-content),
.read-mode #nav,
.read-mode .post-outdate-notice,
.read-mode #web_bg,
.read-mode #rightside,
.read-mode .not-top-img {
  display: none !important;
}
.read-mode #article-container a {
  color: #99a9bf;
}
.read-mode #article-container pre,
.read-mode #article-container .highlight:not(.js-file-line-container) {
  background: var(--highlight-bg) !important;
}
.read-mode #article-container pre *,
.read-mode #article-container .highlight:not(.js-file-line-container) * {
  color: var(--font-color) !important;
}
.read-mode #article-container figure.highlight {
  border-radius: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.read-mode #article-container figure.highlight > :not(.highlight-tools) {
  display: block !important;
}
.read-mode #article-container figure.highlight .line:before {
  color: var(--font-color) !important;
}
.read-mode #article-container figure.highlight .hljs {
  background: var(-highlight-bg) !important;
}
.read-mode #article-container h1,
.read-mode #article-container h2,
.read-mode #article-container h3,
.read-mode #article-container h4,
.read-mode #article-container h5,
.read-mode #article-container h6 {
  padding: 0;
}
.read-mode #article-container h1:before,
.read-mode #article-container h2:before,
.read-mode #article-container h3:before,
.read-mode #article-container h4:before,
.read-mode #article-container h5:before,
.read-mode #article-container h6:before {
  content: '';
}
.read-mode #article-container h1:hover,
.read-mode #article-container h2:hover,
.read-mode #article-container h3:hover,
.read-mode #article-container h4:hover,
.read-mode #article-container h5:hover,
.read-mode #article-container h6:hover {
  padding: 0;
}
.read-mode #article-container ul:hover:before,
.read-mode #article-container li:hover:before,
.read-mode #article-container ol:hover:before {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -o-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
}
.read-mode #article-container ol:before,
.read-mode #article-container li:before {
  background: transparent !important;
  color: var(--font-color) !important;
}
.read-mode #article-container ul >li:before {
  border-color: var(--gray) !important;
}
.read-mode #article-container .tabs {
  border: 2px solid var(--tab-border-color);
}
.read-mode #article-container .tabs > .nav-tabs {
  background: transparent;
}
.read-mode #article-container .tabs > .nav-tabs > .tab {
  border-bottom: 0;
}
.read-mode #article-container .tabs > .nav-tabs > .tab button {
  border-top: none !important;
  background: transparent;
}
.read-mode #article-container .tabs > .nav-tabs > .tab button:hover {
  background: none !important;
}
.read-mode #article-container .tabs > .nav-tabs > .tab.active button {
  text-decoration: underline;
}
.read-mode #article-container .tabs > .tab-contents .tab-item-content.active {
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  -ms-animation: none;
  animation: none;
}
.read-mode #article-container code {
  color: var(--font-color);
}
.read-mode #article-container blockquote {
  border-color: var(--gray);
  background-color: var(--readmode-light-color);
}
.read-mode #article-container kbd {
  border: 1px solid var(--gray);
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: var(--font-color);
}
.read-mode #article-container .hide-toggle {
  border: 1px solid var(--gray) !important;
}
.read-mode #article-container .hide-button,
.read-mode #article-container .btn-beautify,
.read-mode #article-container .hl-label {
  border: 1px solid var(--gray) !important;
  background: var(--readmode-light-color) !important;
  color: var(--font-color) !important;
}
.read-mode #article-container .note {
  border: 2px solid var(--gray);
  border-left-color: var(--gray) !important;
  filter: none;
  background-color: var(--readmode-light-color) !important;
  color: var(--font-color);
}
.read-mode #article-container .note:before,
.read-mode #article-container .note .note-icon {
  color: var(--font-color);
}
/* ============================================================================
 * themes/fomalhaut/source/css/_custom/custom.css
 * —— Fomalhaut 主题的「站点自定义样式」总表（主题样式之后的最后一道覆盖层）
 * ----------------------------------------------------------------------------
 * 【它是怎么生效的】
 *   themes/fomalhaut/source/css/index.styl 用 `@import '_custom/custom.css'` 把它内联进
 *   public/css/index.css（站点只请求一个 CSS，没有单独请求）。所以：
 *   · 改完必须重新 hexo generate 才看得到（只改这里不重新生成 = 白改）；
 *   · 它排在主题各 *.styl 之后 → 同特异性下这里的规则赢，多数情况不需要 !important。
 * ----------------------------------------------------------------------------
 * 【改这里的约定】
 *   1. 能用 _config.fomalhaut.yml 的开关解决的，优先走配置；配置里抽出来的注入样式
 *      统一放 source/css/site-inject.css —— 本文件只放「对主题样式的覆盖」。
 *   2. 新增一节：用「块注释 + 小节标题（用途）」起头，并在下面的目录里补一行。
 *   3. !important 全文 246 处：只在压不过主题内联样式 / Element UI / 运行时 JS 写入时用。
 *   4. 明暗两套用 [data-theme="light"] / [data-theme="dark"] 前缀；几何写一份，颜色写两份。
 *   5. 手机端适配就近写 @media，**不要**为了整齐挪到文件末尾：
 *      同名同权重的规则后写的赢，搬动 = 改变层叠结果（真会改坏东西）。
 *   6. 行号只作导航用，编辑后必然漂移 → 用 Ctrl+F 搜标题或选择器定位。
 * ----------------------------------------------------------------------------
 * 【分节目录】（括号里是所在行号）
 *   154  全局色板：--theme-color 及派生色、代码块底色 —— 换主题色的源头就在这里
 *   194  滚动条（三套并存：@supports 标准属性 / ::-webkit-scrollbar 桌面 / #mscrollbar 手机自绘）
 *   293  @font-face 字体引入（正文 7 款 + 代码块 4 款）：family 名同时是美化面板按钮 onclick 传的值，改名要三处一起改
 *   421  滚动时顶栏显示的标题 #page-name 居中
 *   487  首页文章卡片 / 页面底色 / 明暗遮罩 / 目录 / 超链接 / 代码框 / 鼠标样式……主题默认样式的第一轮覆盖（本文件最大的一段）
 *   891  h1~h6 标题前的风车图标：速度 / 颜色 / hover 反向
 *   979  B 站 iframe 16:9 自适应、图片模糊渐显 imgblur、背景滤镜
 *   1139  标题增强、全局宽度、侧栏宽度、平板适配
 *   1297  美化设置面板 .winbox / 背景图墙 .bgbox（与 source/js/modules/settings.js 强耦合）
 *   1427  侧栏个人卡片背景图（浅色 springBg.png / 深色 aurora.webp）
 *   1481  APlayer 播放器美化（圆角 / 中性玻璃底 / 主题色进度条 / 歌词遮罩）
 *   1771  设置面板里「背景图片链接」输入框的 placeholder
 *   1811  HEO 加载动画头像
 *   1823  顶栏常驻与导航栏标题
 *   1917  主题色选择器与主题色适配覆盖区
 *   2218  设置面板的开关按钮 / 数字框 / 帧率显示
 *   2332  侧边栏按钮 #rightside、翻页、标签圆角
 *   2471  顶部胶囊加载条 .pace（animation: gradient）
 *   2530  右键菜单 #rightMenu
 *   2589  页脚心跳 / 星空 / 雪花 / 小猫咪
 *   2781  版权、二级菜单圆角、搜索框、公告栏、关于页、欢迎信息、霓虹灯
 *   2892  自定义页脚 #ft（站点统计 / 友链 / 格言 / 广告位占位）
 *   3055  手机侧栏、代码行号、右侧栏宽度、齿轮箭头圆角、作者状态
 *   3174  页脚波浪动画 .main-hero-waves-area
 *   3253  图片圆角与边框、友链描述、目录、diff
 *   3348  夜间友链字色、信息卡彩带、霓虹灯发光字 keyframes、按钮、分割线、必应壁纸、转圈颜色
 *   3640  侧栏显隐 / 侧栏位置（CSS 变量驱动，配合美化面板）
 *   3669  置顶文章角标 post-sticky-badge（含 prefers-reduced-motion 降级）
 *   3756  侧栏个人信息卡片改版：玻璃拟态 + 马克笔名字（2026-02-16）
 *   3937  美化面板：手机端排布 .opt/.bgp/.colorRow/.picbtn + 恢复默认设置与切换背景按钮主题色化 + 面板打开时 #rightside 让位
 * ----------------------------------------------------------------------------
 * 【媒体查询索引】@media 共 24 条（按出现顺序；括号里是断点与它管的东西）
 *   259  max-width: 768px              html / #mscrollbar：手机端隐藏系统滚动条，改用自绘条
 *   428  max-width: 768px              center#name-container：顶栏标题居中
 *   659  max-width: 500px              #cursor：小屏鼠标跟随
 *   1038  max-width: 900px              .aside-content 侧栏宽度
 *   1098  max-width: 1200px             .site-card 友链卡
 *   1103  max-width: 900px              .site-card 友链卡
 *   1108  max-width: 600px              .site-card 友链卡
 *   1133  max-width: 1000px             .gallery-group 相册分组
 *   1375  max-width: 768px              .pimgbox / .imgbox / .box / .bgbox 图墙
 *   1852  min-width: 600px              #nav 顶栏
 *   2418  min-width: 600px              .blog-slider 轮播
 *   2654  max-width: 768px              #universe 星空
 *   2682  max-width: 768px              #snow 雪花
 *   2747  max-width: 768px              .neko / #myscoll 小猫咪与滚动条
 *   2758  min-width: 768px              卡片内 fancybox / video 宽度
 *   2767  max-width: 768px              卡片内 fancybox / video 宽度
 *   2831  max-width: 600px              .magnet_item 磁力链接
 *   3019  max-width: 768px              页脚 #ft 分栏 / 广告位
 *   3033  max-width: 576px              页脚 t-top 顶部条
 *   3066  min-width: 900px              #aside-content 侧栏宽度（宽屏）
 *   3242  max-width: 768px              （裸语法）页脚波浪 .waves-svg
 *   3654  min-width: 1069px             .recent-post-item 卡片宽度
 *   3748  prefers-reduced-motion: reduce（裸语法）关闭置顶角标流光动画
 *   4020  max-width: 768px              美化面板：开关行 / 滤镜参数 / 主题色圈 / 字体按钮（手机端重排）
 * ----------------------------------------------------------------------------
 * 【动画索引】@keyframes 共 17 个（含 -webkit- 前缀版）
 *   466  sub_menus                       主题 _global/function.styl 同名动画的覆盖版：把 translateX(-50%) 写进关键帧，居中不被动画吃掉
 *   902  -webkit-keyframes ccc           风车旋转（h1::before ~ h6::before）
 *   912  ccc                             同上（无前缀版）
 *   1003  imgblur                         首页头图 / 背景从模糊到清晰（#page-header, #web_bg）
 *   1012  -webkit-keyframes imgblur       同上，内容是 -webkit-filter 版（Chrome 会忽略它，留给老 Safari）
 *   1225  owoIn                           评论区表情面板弹入（#owo-big）
 *   1447  huxi_light                      浅色主题下头像呼吸灯（[data-theme="light"] .avatar-img）
 *   1458  huxi_dark                       深色主题下头像呼吸灯
 *   2518  gradient                        顶部胶囊加载条 .pace .pace-progress
 *   2595  -webkit-keyframes iconAnimate   页脚心跳 #heartbeat
 *   2616  iconAnimate                     同上（无前缀版）
 *   3089  ddd                             首页卡片右下角箭头 .recent-post-arrow
 *   3233  move-forever                    页脚波浪 .parallax > use
 *   3382  light_15px                      霓虹灯发光字（15px 档）——注意：全项目已找不到 animation 引用它的地方，目前是「备着」状态
 *   3415  light_10px                      霓虹灯发光字（10px 档），同上
 *   3448  light_5px                       霓虹灯发光字（5px 档），同上
 *   3731  post-sticky-shine               置顶角标流光
 * ----------------------------------------------------------------------------
 * 【字体索引】@font-face 共 5 个，全部为开源可商用字体（OFL），源码统一走 cdn.jsdelivr.net 的 @fontsource/*
 *   常规字体 2 款：SourceHanSerif（思源宋体）· LXGWNeoXiHei（霞鹜新晰黑）
 *   代码字体 3 款：JetBrainsMono · FiraCode · SourceCodePro
 *   ⚠ 霞鹜文楷（LXGW WenKai）**不在本文件**：10-29 起改用官方分片版（97 个 unicode-range 分片），
 *     由 _config.fomalhaut.yml 的 inject 段以 <link rel="stylesheet"> 引入，原因见下方「字体引入」一节。 
 *   想换成自己的字体：改本文件末尾「字体引入」一节的 src 即可，family 名保持不变最省事。
 * ----------------------------------------------------------------------------
 * 【已知问题 / 坑】（P3 盘点确认的现状；本次只清理死代码，没有改行为）
 *   1. 同一个选择器被拆散在多处 —— 改之前先 Ctrl+F 全找一遍，找到第一个不算数：
 *        · [data-theme="dark"] #aside-content > .card-widget.card-info（@1282 背景图 / @3739 阴影）
 *        · #card-info-btn（@1319 主题色底 / @3712 玻璃按钮，后者覆盖）
 *        · #card-info-btn:hover（@1324 / @3724）
 *        · #post .tag_share .post-meta__tags（@1995 边框 / @3380 圆角）
 *        · .settings input[type="checkbox"]（@2067 主体 / @2102 只写了 transition）
 *        · .settings input[type="checkbox"]:before（@2084 / @2105）
 *        · .settings input[type="checkbox"]:checked（@2094 / @2108，border-color 只在前者）
 *        · .settings input[type="checkbox"]:checked:before（@2098 / @2111）
 *        · [data-theme="dark"] .magnet_link_context（@2684 底色 / @2688 圆角）
 *   2. .settings input[type="checkbox"] 的 `transition: border background-color box-shadow;`
 *      漏了时长，浏览器当无效声明丢弃（想生效要写 `transition: .2s`）；
 *      `.settings .content input[type="number"]` 有一模一样的毛病。
 *   3. `.pace { border: 1px #e3e8f7; }` 少了线型，border-style 默认 none → 等于没边框。
 *   4. .settings / .winbox 相关样式与 source/js/modules/settings.js 一一对应：
 *      改类名、改面板结构时，CSS 与 JS 必须一起改。
 *   5. 侧栏 #rightside 的按钮尺寸（1196 的 38×38）与侧栏位移（2336 的
 *      translateX(-58px)）跟侧栏宽度布局强耦合，改宽度时两处一起看。
 *   6. 浅浅色主题下不少霓虹灯动画被 `animation: none !important` 关掉（见 3348 一节），
 *      所以 light_*px 关键帧在浅色下不会跑，这是有意的。
 * ----------------------------------------------------------------------------
 * 【本次整理记录】2026-10-03 屎山重构 P3：4124 行 → 3935 行
 *   · 删除 4 段整块死代码（各留「已清理」墓碑注释，Ctrl+F 搜「已清理」可跳过去）：
 *     TianliGPT 整段 189 行（功能已下线）、侧栏卡片动态渐变 50 行（含写在注释里的
 *     Gradient keyframes）、孤儿 @keyframes Gradient（无任何 animation 引用）、
 *     .article-sort-item:before 的 `order:` 笔误块。
 *   · 删除 42 条 -moz-/-ms-/-o- 前缀声明 + 3 条 IE filter + 1 条 -webkit-pointer-events
 *     + 4 个 @-moz-/@-o-keyframes 块（Firefox 16+ / Opera 15+ 起都支持无前缀）。
 *     保留 -webkit-*（浏览器至今仍当别名识别），也保留 -webkit-backdrop-filter 与
 *     -moz-osx-font-smoothing（前者 Safari 要、后者 Firefox-macOS 要）。
 *   · 本次没有移动、改写任何一条规则，只做了「删死代码 + 加这份索引」。
 *   · 回滚：把 bak/2026-10-03-屎山重构/before/themes/fomalhaut/source/css/_custom/custom.css
 *     复制回原位即可。
 * ========================================================================== */
/* root伪类指定全局颜色 */
/* root伪类指定全局颜色 */
:root {
  --blue-custom: #5ea6e5;
  --loading-color: rgba(207, 246, 247, 0.92);
  --border-color: #c9c9c9;
  --color-red: rgb(239, 90, 90);
  --color-orange: rgb(228, 149, 66);
  --color-yellow: rgb(194, 205, 90);
  --color-purepurple: rgb(147, 90, 205);
  --color-blue: rgb(102, 204, 255);
  --color-green: rgb(255, 20, 147);
  --color-puregreen: rgb(90, 205, 130);
  --color-pink: rgb(237, 112, 155);
  --color-darkblue: rgb(97, 100, 159);
  --color-heoblue: rgb(66, 90, 239);
  --btn-bg: var(--theme-color) !important;
  --scrollbar-color: var(--theme-color) !important;
  --border-style: 1px solid rgba(169, 169, 169, 0.7);
  /* 代码框行数背景色 */
  --hlnumber-bg: #282c34;
  /* 代码框顶部背景色 */
  --hltools-bg: #1c1c1c;
  /* 代码框背景色 */
  --hl-bg: #282c34;
}

/* Chrome/Edge 121+ 支持了标准属性 scrollbar-color / scrollbar-width，
   一旦它们不是 auto（本主题在 _global/index.styl 里为 Firefox 设了 thin + 主题色），
   浏览器就会完全忽略 ::-webkit-scrollbar 伪元素样式 —— 下面的斜条纹也就不会出现。
   所以只在支持 ::-webkit-scrollbar 的浏览器里把标准属性退回 auto，让伪元素样式重新生效；
   Firefox 不认识 selector(::-webkit-scrollbar)，会跳过这段，继续用标准双色滚动条。 */
@supports selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: auto !important;
    scrollbar-width: auto !important;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: rgba(73, 177, 245, 0.2);
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: var(--theme-color);
  /* 发廊转筒风：静态斜条纹，主题色深浅交替（浅=叠白 45%，深=叠黑 20%）
     条纹宽 9px、周期 18px —— 3px 太密、7px 仍偏密，9px 是松弛又不糊成色块的档位 */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.45) 0 9px,
    rgba(0, 0, 0, 0.2) 9px 18px
  );
  border-radius: 2em;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* 手机端自绘滚动条
   手机浏览器（含 Chromium 的 overlay 滚动条模式）只用系统滚动条，会完全忽略 ::-webkit-scrollbar，
   所以电脑上那条主题色斜条纹在手机宽度下根本不会出现。这里准备一条同样式样的自绘滚动条，
   由 source/js/fomal.js 末尾的脚本驱动：固定在右边缘、随滚动进度移动；只要页面能滚就一直显示（与电脑端“滚动条不隐藏”的取舍一致）。 */
#mscrollbar {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 2px;
  width: 8px;
  border-radius: 2em;
  background-color: rgba(73, 177, 245, 0.2);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.35s ease;
}

#mscrollbar.mscrollbar-on {
  opacity: 1;
}

#mscrollbar-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  border-radius: 2em;
  background-color: var(--theme-color);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.45) 0 9px,
    rgba(0, 0, 0, 0.2) 9px 18px
  );
}

/* ≤768px：隐藏系统滚动条，改用上面那条自绘的，免得出现两条 */
@media screen and (max-width: 768px) {
  html {
    scrollbar-width: none !important;
  }
  html::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  #mscrollbar {
    display: block;
  }
}

::-moz-selection {
  color: #fff;
  background-color: var(--theme-color) !important;
}

/* 代码框底部滚动条 */
#article-container figure.highlight > ::-webkit-scrollbar-thumb {
  background-color: #35393f !important;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    transparent 75%,
    transparent
  ) !important;
  border-radius: 2em !important;
}

/* 字体引入
   常规（正文）字体 2 款 + 代码块字体 3 款，**全部为开源可商用字体**（SIL OFL 1.1），
   统一走公共 CDN（jsDelivr 上的 @fontsource/* 包），不依赖任何自建对象存储。
   （霞鹜文楷原来也在这里，10-29 挪到了 inject 段的官方分片版，见下面那段注释。）
   family 名 = 美化设置面板按钮 onclick 传的值 = localStorage.font / codeFont 的值，
   也是 _config.fomalhaut.yml 里 font-family / code-font-family 引用的名字，改名时这几处要一起改。
   *** 想换成自己的字体：把下面的 src 换成你自己的 woff2 地址即可，family 名保持不变最省事。 *** */
/* 【10-29 停用】霞鹜文楷的 @font-face 不再写在这里。
   原来的 src 指向 @fontsource/lxgw-wenkai-tc（**繁体字集**），简体独有字「这/个/说/爱/认/识/过/经…」
   一个都缺，浏览器逐字回落到微软雅黑 —— 一句话里两种字形混排，就是「有的字有字体、有的没加载」的真凶。
   现在改用官方分片版 `lxgw-wenkai-webfont`（97 个 unicode-range 分片，family 名是 'LXGW WenKai'），
   由 _config.fomalhaut.yml 的 inject 段用 <link rel="stylesheet"> 引入，改哪里、为什么，见 docs 第 7.16 节。
   ⚠ 不要再在这里重新声明 font-family: LXGW —— 那个名字已经没有任何地方引用了，写了也不会被下载。
@font-face {
  font-family: LXGW;
  src: url(/External-link/css/fonts/lxgw-wenkai-tc-chinese-traditional-400-normal.woff2);
  font-display: swap;
}
*/

@font-face {
  font-family: SourceHanSerif;
  /* 思源宋体（Noto Serif SC）· SIL OFL 1.1 */
  src: url(/External-link/css/fonts/noto-serif-sc-chinese-simplified-400-normal.woff2);
  font-display: swap;
}

@font-face {
  font-family: LXGWNeoXiHei;
  /* 霞鹜新晰黑 → 同族思源黑体（Noto Sans SC）替代 · SIL OFL 1.1 */
  src: url(/External-link/css/fonts/noto-sans-sc-chinese-simplified-400-normal.woff2);
  font-display: swap;
}

/* —— 装饰字体 3 款（美化面板「个性装饰」折叠区）——
   ⚠ 10-29 这段是恢复回来的：这三款原来指向 https://data-static.netdun.net/Fomalhaut/fonts/…（作者早期对象存储），
   那个子域名的 DNS 记录已经消失（nslookup 直接 NXDOMAIN），所以点了永远「字体未能加载」。
   作者现在的对象存储是 Bitiful：https://sourcebucket.s3.bitiful.net/fonts/（他的站点 www.fomal.cc 也 preconnect 到这里），
   三款原版文件都在，文件名换成了中文：
     筑紫A丸2.0.woff2   1.52 MB   ← 原 ZhuZiAWan2.woff2
     汉仪唐美人.woff2    2.12 MB   ← 原 HYTangMeiRen55W.woff2
     甜甜圈海报.woff2    1.45 MB   ← 原 甜甜圈海报字体.woff2
   src 是三级链，浏览器按顺序取第一个能加载的：
     ① local(...)      本机装过原版字体 → 直接用，零流量
     ② 作者对象存储    原版字形（要的就是它）
     ③ /fonts/*-substitute.woff2   站内自托管的免费商用近似体（OFL），只在前两级都拿不到时才用
   为什么 ③ 要留着：a) 上游是别人的存储，哪天再失效不会一断就变系统字体；
   b) 原版是商业字体（筑紫A丸=Fontworks、汉仪唐美人=汉仪、甜甜圈海报=商用），站内不再分发原文件。
   family 名保持 ZhuZiAWan / HYTMR / TTQHB —— 它同时是 localStorage.font、面板按钮 id、这里的 family，
   改名会连带老访客的选择一起失效。
   ▶ 想彻底离线：把三个原版文件放进 source/fonts/，把 ② 或 ③ 换成 url(/fonts/文件名.woff2)。
   ▶ 站内正文新增大量生僻字后重裁兜底体：node tools/font-subset.js（说明见文件头）。 */
@font-face {
  font-family: ZhuZiAWan;
  src: local("筑紫A丸ゴシック"), local("筑紫 A 丸ゴシック"),
       url("/External-link/css/fonts/zhuziawan-2.0.woff2") format("woff2"),
       url(/fonts/round-substitute.woff2) format("woff2");
  font-display: swap;
}

@font-face {
  font-family: HYTMR;
  src: local("汉仪唐美人"), local("HYTangMeiRen 55W"),
       url("/External-link/css/fonts/hytangmeiren.woff2") format("woff2"),
       url(/fonts/script-substitute.woff2) format("woff2");
  font-display: swap;
}

@font-face {
  font-family: TTQHB;
  src: url("/External-link/css/fonts/ttqhb.woff2") format("woff2"),
       url(/fonts/poster-substitute.woff2) format("woff2");
  font-display: swap;
}

/* —— 代码块字体 ——
   pre/code 的字体不写死，改由 --code-font 变量决定
   （_config.fomalhaut.yml 的 font.code-font-family 写成 var(--code-font, JetBrainsMono), var(--global-font), ...），
   面板切换代码字体时只改这个变量，不用重写样式表。 */
@font-face {
  font-family: JetBrainsMono;
  /* JetBrains Mono · SIL OFL 1.1 */
  src: url(/External-link/css/fonts/jetbrains-mono-latin-400-normal.woff2);
  font-display: swap;
}

@font-face {
  font-family: FiraCode;
  /* Fira Code · SIL OFL 1.1 */
  src: url(/External-link/css/fonts/fira-code-latin-400-normal.woff2);
  font-display: swap;
}

@font-face {
  font-family: SourceCodePro;
  /* Source Code Pro · SIL OFL 1.1 */
  src: url(/External-link/css/fonts/source-code-pro-latin-400-normal.woff2);
  font-display: swap;
}

/* 代码块字体：主题只给 #article-container pre/code 设了代码字体，
   这里把文章区以外的 pre/code/kbd/samp 也接到同一个变量上，保证「凡是渲染代码的地方」都跟面板走 */
pre,
code,
kbd,
samp {
  font-family: var(--code-font, JetBrainsMono), var(--global-font), "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif !important;
}

/* 特定部件字体调用 */
div#menus {
  font-weight: bold !important;
}
h1#site-title {
  font-size: 3em !important;
  font-weight: bold !important;
}
a.article-title,
a.blog-slider__title,
a.categoryBar-list-link,
h1.post-title {
  font-weight: bold !important;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 3em;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-zhongbiao::before {
  color: #f7c768;
}

/* 解决artitalk的图标问题 */
#uploadSource > svg {
  width: 1.19em;
  height: 1.5em;
}

/* 滚动显示的标题居中 */
center#name-container {
  position: absolute !important;
  width: fit-content !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
@media screen and (max-width: 768px) {
  center#name-container {
    display: none;
  }
}

/* 去掉蓝色条 */
/* #nav *::after{
    background-color: transparent!important;
} */

/* 一级菜单居中 */
#nav .menus_items {
  /* 这个带不带都可以，本来就是inline */
  display: inline;
  position: absolute !important;
  width: max-content !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
#nav .menus_items .menus_item {
  padding: 0 0 0 8px !important;
}
/* 子菜单横向展示 */
#nav .menus_items .menus_item:hover .menus_item_child {
  display: flex !important;
}
/* 【2026-10-01 改】二级菜单一律在父栏目水平居中（宽度自适应）
   原先按栏目写死的 nth-child(2)~(7) left: -149px ~ -105px 偏移已删除：
   「标签/分类」合并成「统计」后，文章 子菜单变窄，写死的偏移就对不上了 */
#nav .menus_items .menus_item .menus_item_child {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
/* 主题 _global/function.styl 里的 sub_menus 关键帧只做 translateY，
   会盖掉上面的 translateX(-50%)，所以同名覆盖一份（写在后面即生效），
   把 -50% 一起写进关键帧：进场动画保留，居中也不会丢 */
@keyframes sub_menus {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/*top-img黑色透明玻璃效果移除，不建议加，除非你执着于完全一图流或者背景图对比色明显 */
/* #page-header:not(.not-top-img):before {
  background-color: transparent !important;
} */

/* 置顶滚动圆角 */
.blog-slider__img img {
  border-radius: 18px !important;
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item {
  background: var(--trans-light);
  border-radius: 25px;
  border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  border-radius: 18px;
  border: var(--border-style);
  padding: 20px;
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
  background: var(--trans-light);
  border: var(--border-style);
  border-radius: 20px;
}

/* 导航栏颜色 */
[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.95) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark);
}

/* 白天模式头图与页脚遮罩 */
[data-theme="light"] #page-header:before {
  background-color: rgba(0, 0, 0, 0.2) !important;
  z-index: -3;
}
[data-theme="light"] #footer:before {
  background-color: rgba(0, 0, 0, 0.25) !important;
  z-index: -3;
}

/* 夜间模式全局黑暗遮罩 */
[data-theme="dark"] #web_bg:before {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 头图隐藏 */
#page-header {
  background: transparent !important;
}
/* 夜间模式页脚遮罩隐藏 */
[data-theme="dark"] #footer:before {
  background: transparent !important;
}
/* 夜间模式页脚头部遮罩隐藏 */
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

/* 阅读模式 */
.read-mode #aside-content .card-widget {
  background: rgba(158, 204, 171, 0.5) !important;
}
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}

/* 评论框  */
.vwrap {
  box-shadow: 2px 2px 5px #bbb;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 30px;
  margin: 30px 0px 30px 0px;
}

/* 设置评论框 */
.vcard {
  box-shadow: 2px 2px 5px #bbb;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 30px;
  margin: 30px 0px 0px 0px;
}

/* 超链接样式 参考heo */
#article-container
  a:not(.fancybox, .imgbox, .swf, .box, .pimgbox, .magnet_link) {
  text-decoration: none;
  /* border-bottom: 2px solid var(--theme-color) */
  /* border-radius: 4px 4px 0 0 */
}

#article-container
  a:not(
    .fancybox,
    .imgbox,
    .swf,
    .box,
    .pimgbox,
    .magnet_link,
    .gallery_link
  ):hover {
  text-decoration: none;
  color: #fefefe;
  background: var(--text-bg-hover) !important;
  border-radius: 4px;
  box-shadow: 0 8px 12px -3px #4259ef23;
  padding: 2px;
  transition: all 0.3s ease-in-out;
}

#article-container #hpp_talk p img {
  display: inline;
}

/* 代码框主题 */
#article-container figure.highlight {
  border-radius: 10px;
}
[data-theme="dark"] #article-container figure.highlight {
  border: 0.5px solid #404040;
}

/* 鼠标样式 */
#cursor {
  position: fixed;
  width: 16px;
  height: 16px;
  background: var(--theme-color) !important;
  border-radius: 8px;
  opacity: 0.25;
  z-index: 10086;
  pointer-events: none;
  transition: 0.2s ease-in-out;
  transition-property: background, opacity, transform;
}

#cursor.hidden {
  opacity: 0;
}

#cursor.hover {
  opacity: 0.1;
  transform: scale(2.5);
  -webkit-transform: scale(2.5);
}

#cursor.active {
  opacity: 0.5;
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
}

/* 手机端不显示 */
@media screen and (max-width: 500px) {
  #cursor {
    display: none !important;
  }
}

/* 文章页H1-H6图标样式效果 */
/* 控制风车转动速度 */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  -webkit-animation: ccc 6s linear infinite;
  animation: ccc 6s linear infinite;
}
/* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
@-webkit-keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
@keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
/* 设置风车颜色 */
#content-inner.layout h1::before {
  color: #ef50a8;
  margin-left: -1.55rem;
  font-size: 1.3rem;
  margin-top: -0.23rem;
}
#content-inner.layout h2::before {
  color: #fb7061;
  margin-left: -1.35rem;
  font-size: 1.1rem;
  margin-top: -0.12rem;
}
#content-inner.layout h3::before {
  color: #ffbf00;
  margin-left: -1.22rem;
  font-size: 0.95rem;
  margin-top: -0.09rem;
}
#content-inner.layout h4::before {
  color: #a9e000;
  margin-left: -1.05rem;
  font-size: 0.8rem;
  margin-top: -0.09rem;
}
#content-inner.layout h5::before {
  color: #57c850;
  margin-left: -0.9rem;
  font-size: 0.7rem;
  margin-top: 0rem;
}
#content-inner.layout h6::before {
  color: #5ec1e0;
  margin-left: -0.9rem;
  font-size: 0.66rem;
  margin-top: 0rem;
}
/* s设置风车hover动效 */
#content-inner.layout h1:hover,
#content-inner.layout h2:hover,
#content-inner.layout h3:hover,
#content-inner.layout h4:hover,
#content-inner.layout h5:hover,
#content-inner.layout h6:hover {
  color: var(--theme-color) !important;
}
#content-inner.layout h1:hover::before,
#content-inner.layout h2:hover::before,
#content-inner.layout h3:hover::before,
#content-inner.layout h4:hover::before,
#content-inner.layout h5:hover::before,
#content-inner.layout h6:hover::before {
  color: var(--theme-color) !important;
  -webkit-animation: ccc 6s linear infinite;
  animation: ccc 6s linear infinite;
}

/*哔哩哔哩视频适配*/
.aspect-ratio {
  position: relative;
  width: 90%;
  height: auto;
  padding-bottom: 75%;
  margin: 3% auto;
  text-align: center;
}
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 86%;
  left: 0;
  top: 0;
}

/* 图片模糊渐变清晰 */
/*3s为加载动画的时间，1为加载动画的次数，ease-in-out为动画效果*/
#page-header,
#web_bg {
  -webkit-animation: imgblur 0.8s 1 ease-in-out;
  animation: imgblur 0.8s 1 ease-in-out;
}
@keyframes imgblur {
  0% {
    filter: blur(5px);
  }
  100% {
    filter: blur(0px);
  }
}
/*适配使用-webkit内核的浏览器 */
@-webkit-keyframes imgblur {
  0% {
    -webkit-filter: blur(5px);
  }
  100% {
    -webkit-filter: blur(0px);
  }
}

/* 背景滤镜 */
#web_bg {
  filter: var(--bg-filter) !important;
}

/* 全局宽度 参考:https://yisous.xyz/posts/d1fc759/ */
.layout {
  max-width: 1400px;
}

/* 侧边卡片栏宽度 */
.aside-content {
  max-width: 318px;
  min-width: 300px;
}

/* 平板尺寸自适应(不启用侧边栏宽度限制) */
@media screen and (max-width: 900px) {
  .aside-content {
    max-width: none !important;
    padding: 0 5px 0 5px;
  }
}

/* 除了首页以外其他页面隐藏卡片，并采用宽屏显示 */
#archive,
#page,
#category,
#tag {
  width: 100%;
}
.page:not(.page.home) .aside-content {
  display: none;
}

/* 友链一行显示更多 */
.site-card {
  width: calc(100% / 5 - 16px) !important;
  border-radius: 18px !important;
  border: 1px solid #d3d3d3 !important;
  padding: 5px !important;
}
/* 卡片高度不再写死：写死的高度是按旧的整页宽度(1400px)调的，
   页面收窄到 1200px 后卡片变窄而高度不变，看起来又高又瘦。
   现在由图片的 16:10 比例撑开，宽度变化时高度自动跟着变。 */
.site-card:not(.mini-link) {
  height: auto !important;
}
[data-theme="light"] .site-card {
  background-color: var(--hh-trans-color);
}
[data-theme="dark"] .site-card {
  border: 1px solid #525252 !important;
  background-color: #343434e8 !important;
}

[data-theme="light"]
  #article-container
  .timeline
  .timeline-item
  .timeline-item-content {
  background-color: var(--hh-trans-color) !important;
}
[data-theme="dark"]
  #article-container
  .timeline
  .timeline-item
  .timeline-item-content {
  background-color: #232323 !important;
}

.site-card .img {
  height: auto !important;
  aspect-ratio: 16 / 10;
  border-radius: 18px !important;
}
/* 适应宽度不同的设备 */
@media screen and (max-width: 1200px) {
  .site-card {
    width: calc(100% / 4 - 16px) !important;
  }
}
@media screen and (max-width: 900px) {
  .site-card {
    width: calc(100% / 3 - 16px) !important;
  }
}
@media screen and (max-width: 600px) {
  .site-card {
    width: calc(100% / 2 - 16px) !important;
  }
}

.site-card:hover .img {
  scale: 1.02 !important;
}

/* Gallery一行显示更多 + 整行居中 */
#article-container .gallery-group-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
}
#article-container figure.gallery-group {
  float: none;
  margin: 0;
}
.gallery-group {
  width: calc(33% - 11px) !important;
}
/* 适应宽度不同的设备 */
@media screen and (max-width: 1000px) {
  .gallery-group {
    width: calc(50% - 8px) !important;
  }
}

/* 标题增强 */
#site-name::before {
  opacity: 0;
  background-color: var(--theme-color) !important;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  width: 100%;
  height: 100%;
  content: "\f015";
  box-shadow: 0 0 5px var(--theme-color) !important;
  font-family: "Font Awesome 6 Free";
  text-align: center;
  color: white;
  line-height: 34px; /*如果有溢出或者垂直不居中的现象微调一下这个参数*/
  font-size: 18px; /*根据个人喜好*/
}
#site-name:hover::before {
  opacity: 1;
  scale: 1.03;
}
#site-name {
  position: relative;
  font-size: 24px; /*一定要把字体调大点，否则效果惨不忍睹！*/
}

/* 阅读百分比 */
/* 返回顶部 */
button#go-up #percent {
  display: none;
  font-weight: bold;
  font-size: 15px !important;
}

button#go-up span {
  font-size: 12px !important;
  margin-right: -1px;
}

/* 鼠标滑动到按钮上时显示返回顶部图标 */
button#go-up:hover i {
  display: block !important;
}

button#go-up:hover #percent {
  display: none !important;
}

#rightside > div > a,
#rightside > div > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 18px;
  border-radius: 6px;
}

/* 评论表情放大显示 */
#owo-big {
  position: fixed;
  align-items: center;
  background-color: rgb(255, 255, 255);
  border: 1px #aaa solid;
  border-radius: 10px;
  z-index: 9999;
  display: none;
  transform: translate(0, -105%);
  overflow: hidden;
  animation: owoIn 0.3s cubic-bezier(0.42, 0, 0.3, 1.11);
}

[data-theme="dark"] #owo-big {
  background-color: #4a4a4a;
}

#owo-big img {
  width: 100%;
}

/* 动画效果代码由 Heo：https://blog.zhheo.com/ 提供 */
@keyframes owoIn {
  0% {
    transform: translate(0, -95%);
    opacity: 0;
  }
  100% {
    transform: translate(0, -105%);
    opacity: 1;
  }
}

/* 美化模块 */
.winbox {
  border-radius: 12px;
  overflow: hidden;
}

.wb-body {
  background-color: #e5f1f5;
}

.wb-full {
  display: none;
}

.wb-min {
  background-position: center;
}

[data-theme="dark"] .wb-body,
[data-theme="dark"] #changeBgBox {
  background: #333 !important;
}

/* 背景图墙：grid 逐行排满（从左到右，满了再换到下一行）。
   原来是 flex + justify-content:space-between：一行装不下整数张、或最后一行不满时，
   剩下的图会被推到最左和最右，中间留一个大空洞 */
.bgbox {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
  align-items: start;
}

.pimgbox,
.imgbox,
.box {
  height: 100px;
  width: 166px;
  margin: 10px;
  border-radius: 10px !important;
  background-size: cover;
}

/* grid 版图墙：宽度交给列宽、间距交给 gap，不再用 margin 撑；
   #define_colors 是 ID 规则，必须单独盖掉它的 width/margin */
.bgbox > .pimgbox,
.bgbox > .imgbox,
.bgbox > .box {
  width: 100%;
  margin: 0;
}

.bgbox > #define_colors {
  width: 100%;
  margin: 0;
}

.pimgbox,
.imgbox {
  border-radius: 10px;
  overflow: hidden;
}

.imgbox:hover,
.pimgbox:hover,
.box:hover {
  scale: 1.05;
  transition: all 0.3s ease-in-out;
}

.pimgbox {
  height: 240px;
}

.imgbox {
  height: 95px;
}

@media screen and (max-width: 768px) {
  /* 背景 */
  .pimgbox,
  .imgbox,
  .box {
    height: 73px;
    width: 135px;
  }
  .pimgbox {
    height: 205px;
  }

  /* 图墙在手机端：列更窄、间距更小，缩略图按比例缩放（其余沿用上面的 grid 规则） */
  .bgbox {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
  }
  .bgbox > .imgbox,
  .bgbox > .box {
    height: auto;
    aspect-ratio: 135 / 73;
  }
  .bgbox > .pimgbox {
    height: 205px;
  }

  /* 自定义颜色框在手机端也跟纯色块一样按 135/73 比例 */
  .bgbox > #define_colors {
    height: auto;
    aspect-ratio: 135 / 73;
  }

  /* 2.0新增内容 */
  .wb-min {
    display: none;
  }
  #changeBgBox .wb-body::-webkit-scrollbar {
    display: none;
  }
}

/* 应用监控夜间模式适配 id要# class是直接来就行*/
[data-theme="dark"] #statistic {
  background: #2b2929;
}

/* ─── 已清理（2026-10-03 屎山重构 P3）──────────────────────────────
   删除：侧栏个人信息卡片「动态渐变」整段（50 行，含 3 个 @keyframes Gradient 定义，全都写在注释里）
   原因：早就不用这套渐变，改成了下面的 springBg.png / aurora.webp 背景图；注释里的 keyframes 永远不会生效，却容易让人以为 Gradient 定义在这里
   恢复：bak/2026-10-03-屎山重构/before/themes/fomalhaut/source/css/_custom/custom.css
   ─────────────────────────────────────────────────────────── */

/* 个人信息卡片背景图 */
[data-theme="light"] #aside-content > .card-widget.card-info {
  background-image: url(/External-link/img/bg/picsum-1043.jpg);
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-size: 100%;
}
[data-theme="dark"] #aside-content > .card-widget.card-info {
  background-image: url(/External-link/img/bg/picsum-1036.jpg);
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-size: 100%;
}
/* 头像呼吸灯 */
[data-theme="light"] .avatar-img {
  animation: huxi_light 4s ease-in-out infinite;
}
[data-theme="dark"] .avatar-img {
  animation: huxi_dark 4s ease-in-out infinite;
}
@keyframes huxi_light {
  0% {
    box-shadow: 0px 0px 1px 1px #9ff2d2;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #9ff2d2;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #9ff2d2;
  }
}
@keyframes huxi_dark {
  0% {
    box-shadow: 0px 0px 1px 1px #FF1493;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #FF1493;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #FF1493;
  }
}

/* 个人信息Follow me按钮 */
#aside-content > .card-widget.card-info > #card-info-btn {
  background-color: var(--theme-color) !important;
  border-radius: 30px;
  color: white;
}
#aside-content > .card-widget.card-info > #card-info-btn:hover {
  background-color: var(--btn-hover-color) !important;
  transition: all 0.2s ease-in-out;
}

/* ===== APlayer 美化：圆角 / 中性玻璃底 / 主题色滚动条 / 收窄（八音盒音乐空间） =====
   2026-10-30：底色从「主题色 7% 掺白」换成 --glass-bg（与正文卡片同一块玻璃）。
   旧写法在粉主题下就是一整块淡粉，和作者 10-28 定的「主题色不上面」正面冲突；
   主题色现在只留在进度条 / 滑块 / 播放按钮 / 当前行竖条 / 滚动条这些「实底或短线」上。 */
#article-container .aplayer {
  --aplayer-bg: var(--glass-bg);
  font-family: var(--global-font) !important;
  max-width: 720px;
  margin: 0 auto 26px !important;
  border-radius: 16px;
  background: var(--aplayer-bg);
  border: var(--glass-bd);
  box-shadow: var(--glass-shadow);
}
/* 封面与播放按钮 */
#article-container .aplayer .aplayer-pic {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--theme-color) 65%, transparent);
}
#article-container .aplayer .aplayer-pic .aplayer-button {
  background: var(--theme-color);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--theme-color) 45%, transparent);
}
#article-container .aplayer .aplayer-pic .aplayer-button path {
  fill: var(--on-theme, #fff);
}
/* 标题与作者 */
#article-container .aplayer .aplayer-info .aplayer-music .aplayer-title {
  font-weight: 600;
  color: var(--glass-ink);
}
#article-container .aplayer .aplayer-info .aplayer-music .aplayer-author {
  color: var(--glass-dim);
}
/* 进度条与滑块 */
#article-container .aplayer .aplayer-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--glass-veil);
}
#article-container .aplayer .aplayer-loaded {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--glass-ink) 22%, transparent);
}
#article-container .aplayer .aplayer-played {
  height: 4px !important;
  border-radius: 999px;
  background: var(--theme-color) !important;
}
#article-container .aplayer .aplayer-thumb {
  width: 11px;
  height: 11px;
  margin-top: -4px;
  background: var(--theme-color) !important;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-color) 45%, transparent);
}
/* 时间与图标：文字走正文色系，图标悬停才上主题色（明度差异比色相更耐看） */
#article-container .aplayer .aplayer-time {
  color: var(--glass-dim);
}
#article-container .aplayer .aplayer-time .aplayer-icon path {
  fill: var(--glass-dim);
}
#article-container .aplayer .aplayer-time .aplayer-icon:hover path {
  fill: var(--theme-color);
}
/* 音量条 */
#article-container .aplayer .aplayer-volume-bar {
  border-radius: 999px;
  background: var(--glass-veil);
}
#article-container .aplayer .aplayer-volume {
  border-radius: 999px;
  background: var(--theme-color);
}
/* 顶部与列表之间的分隔线 */
#article-container .aplayer.aplayer-withlist .aplayer-info {
  border-bottom: 1px solid var(--glass-veil);
}
/* 歌词遮罩：APlayer 默认用白色渐变（:before/:after），底色不再是白色后会露出两条白条，改成同底色 */
#article-container .aplayer .aplayer-lrc:before {
  background: linear-gradient(180deg, var(--aplayer-bg) 0, transparent);
}
#article-container .aplayer .aplayer-lrc:after {
  background: linear-gradient(180deg, transparent 0, var(--aplayer-bg));
}
#article-container .aplayer .aplayer-lrc p {
  color: var(--glass-dim);
}
/* 播放列表：圆角药丸行，当前行只加中性底色 + 一根主题色竖条 */
#article-container .aplayer .aplayer-list {
  padding: 4px 8px 8px;
}
#article-container .aplayer .aplayer-list ol {
  max-height: 340px;
  border-radius: 12px;
}
#article-container .aplayer .aplayer-list ol li {
  height: 32px;
  line-height: 32px;
  margin: 1px 0;
  padding: 0 12px;
  border-top: none;
  border-radius: 10px;
  color: var(--glass-ink);
  transition: all 0.2s ease;
}
/* hover / 当前行都用中性底色：底色一旦掺主题色，粉主题就是满屏粉条（作者 10-28 明确否过） */
#article-container .aplayer .aplayer-list ol li:hover {
  background: var(--glass-veil);
}
#article-container .aplayer .aplayer-list ol li.aplayer-list-light {
  background: color-mix(in srgb, var(--glass-ink) 9%, transparent);
  color: var(--glass-ink);
  font-weight: 600;
}
#article-container .aplayer .aplayer-list ol li .aplayer-list-cur {
  width: 4px;
  height: 18px;
  top: 7px;
  border-radius: 999px;
}
#article-container .aplayer .aplayer-list ol li .aplayer-list-index {
  color: var(--glass-dim);
}
#article-container .aplayer .aplayer-list ol li .aplayer-list-author {
  color: var(--glass-dim);
}
/* 播放列表滚动条：主题色系 */
#article-container .aplayer .aplayer-list::-webkit-scrollbar,
#article-container .aplayer .aplayer-list ol::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#article-container .aplayer .aplayer-list::-webkit-scrollbar-track,
#article-container .aplayer .aplayer-list ol::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--theme-color) 10%, transparent);
  border-radius: 999px;
}
#article-container .aplayer .aplayer-list::-webkit-scrollbar-thumb,
#article-container .aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--theme-color) 55%, #fff);
  background-image: none;
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
#article-container .aplayer .aplayer-list::-webkit-scrollbar-thumb:hover,
#article-container .aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
  background-color: var(--theme-color);
}
/* Firefox 回退：标准属性必须放在 @supports not 里，否则会禁用全局 webkit 滚动条样式 */
@supports not selector(::-webkit-scrollbar) {
  #article-container .aplayer .aplayer-list,
  #article-container .aplayer .aplayer-list ol {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--theme-color) 55%, #fff) color-mix(in srgb, var(--theme-color) 10%, transparent);
  }
}


/* 背景图片链接输入框placeholder*/
input#pic-link::-webkit-input-placeholder {
  color: rgb(150, 150, 150);
}

input#pic-link {
  width: 82%;
  border-radius: 30px;
  border: 1px solid var(--theme-color) !important;
  padding: 5px 10px 5px 10px;
  line-height: 2;
  outline: 1px solid var(--theme-color) !important;
}

/* 滤镜按钮 */
input#blurRad::-webkit-input-placeholder,
input#saturation::-webkit-input-placeholder,
input#contrast::-webkit-input-placeholder {
  color: rgb(180, 180, 180);
}

input#blurRad,
input#saturation,
input#contrast {
  border-radius: 6px;
  border: 0.6px solid #80808080 !important;
  outline: 0.6px solid #80808080 !important;
  line-height: 1.2;
  height: 26px;
  margin-top: 3px;
  max-width: 50px;
}

input#blurRad:hover,
input#saturation:hover,
input#contrast:hover {
  border: 0.6px solid var(--theme-color) !important;
  outline: 0.6px solid var(--theme-color) !important;
}

/* heo 加载动画头像 */
.loading-img {
  background: url(/assets/avatar.webp)
    no-repeat center center;
  background-size: cover;
}

/* heo 夜间模式加载背景色 */
[data-theme="dark"] {
  --loading-color: rgba(25, 25, 25, 0.92) !important;
}

/* 顶栏常驻 */
#page-header.nav-fixed #nav,
#page-header.nav-visible #nav {
  transform: translateY(58px) !important;
  -webkit-transform: translateY(58px) !important;
  background: linear-gradient(60deg, #ffd7e4 0, #c8f1ff 93%);
  opacity: 0.95;
}
#page-header.nav-visible > .nav_visible {
  display: var(--nav-visible-display) !important;
}
#page-header.nav-fixed > .nav_fixed {
  display: var(--nav-fixed-display) !important;
}
#page-header.nav-fixed #nav {
  display: var(--nav-fixed-display);
}
#page-header.nav-visible #nav {
  display: var(--nav-visible-display);
}

#nav {
  transition: none !important;
  -webkit-transition: none !important;
}
#page-header.nav-fixed #nav a:hover {
  color: inherit !important;
}

@media screen and (min-width: 600px) {
  #nav {
    padding: 0 28px !important;
  }
}

/* 导航栏显示标题 */
#page-name::before {
  font-size: 18px;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  color: white !important;
  top: 0;
  left: 0;
  content: "回到顶部";
  background-color: var(--theme-color) !important;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  opacity: 0;
  box-shadow: 0 0 3px var(--theme-color) !important;
  line-height: 45px; /*如果垂直位置不居中可以微调此值，也可以删了*/
}
#page-name:hover:before {
  opacity: 1;
}
#name-container {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
/* 悬停放大必须并进同一个 transform：
   独立的 scale 属性和 transform: translateX(-50%) 一起用时，按 CSS Transforms 2 的合成顺序
   scale 作用在已经位移过的坐标上，会把 -50% 的居中位移也放大 1.03 倍 →
   整块标题左偏 0.5×宽度×0.03 ≈ 6.3px（悬停时才看得见，所以一直没发现）。
   写成 translateX(-50%) scale(1.03) 时 translate 在最后一步，位移不再被放大，居中才是准的。 */
center#name-container:hover {
  transform: translateX(-50%) scale(1.03) !important;
}
#page-name {
  position: relative;
  padding: 10px 30px; /*如果文字间隔不合理可以微调修改，第二个是水平方向的padding，第一个是垂直的*/
}

/* 调节字体显示栏目 */
#swfs,
#swfs_code {
  display: flex;
  flex-wrap: wrap;
}
.swf {
  padding: 10px;
  font-size: 20px;
  background-color: white;
  /* 字体选择框边界由js指定 */
  /* border: 2px solid var(--border-color); */
  border-radius: 10px !important;
  margin: 10px;
}

.swf:hover {
  text-decoration: none !important;
  background: var(--text-bg-hover) !important;
}

/* 主题色选择 */
input[name="colors"] {
  margin-right: 15px;
  min-width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
}
#red {
  border: 3px solid var(--color-red);
}
#orange {
  border: 3px solid var(--color-orange);
}
#yellow {
  border: 3px solid var(--color-yellow);
}
#green {
  border: 3px solid var(--color-green);
}
#puregreen {
  border: 3px solid var(--color-puregreen);
}
#blue {
  border: 3px solid var(--color-blue);
}
#purepurple {
  border: 3px solid var(--color-purepurple);
}
#pink {
  border: 3px solid var(--color-pink);
}
#heoblue {
  border: 3px solid var(--color-heoblue);
}
#darkblue {
  border: 3px solid var(--color-darkblue);
}
#purepurple:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-purepurple);
  background-color: var(--color-purepurple);
}
#red:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-red);
  background-color: var(--color-red);
}
#orange:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-orange);
  background-color: var(--color-orange);
}
#yellow:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-yellow);
  background-color: var(--color-yellow);
}
#green:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-green);
  background-color: var(--color-green);
}
#puregreen:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-puregreen);
  background-color: var(--color-puregreen);
}
#blue:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-blue);
  background-color: var(--color-blue);
}
#pink:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-pink);
  background-color: var(--color-pink);
}
#heoblue:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-heoblue);
  background-color: var(--color-heoblue);
}
#darkblue:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-darkblue);
  background-color: var(--color-darkblue);
}

/* 主题色适配覆盖区域 */
.category-lists ul li:before {
  border: 0.215em solid var(--theme-color) !important;
}
a.article-meta__tags:hover,
a.article-meta__categories:hover,
a.blog-slider__title:hover {
  color: var(--theme-color) !important;
}

blockquote {
  border-left: 3px solid var(--theme-color) !important;
}
#article-container .highlight-tools .copy-button:hover {
  color: var(--theme-color) !important;
}
.error404 #error-wrap .error-content .error-img img {
  background-color: var(--theme-color) !important;
}
.article-sort-title:before {
  border: 5px solid var(--theme-color) !important;
}
/* ─── 已清理（2026-10-03 屎山重构 P3）──────────────────────────────
   删除：.article-sort-item:before { order: 3px solid var(--theme-color) !important; }
   原因：order 是 border 的笔误，浏览器把整条声明当无效丢弃；真正生效的规则是下面 .article-sort-item:before 的 border: 3px solid ...
   恢复：bak/2026-10-03-屎山重构/before/themes/fomalhaut/source/css/_custom/custom.css
   ─────────────────────────────────────────────────────────── */
.article-sort-item.year:hover:before {
  border-color: var(--theme-color) !important;
}
.article-sort-item-title:hover {
  color: var(--theme-color) !important;
}
.category-lists .category-list a:hover {
  color: var(--theme-color) !important;
}
#recent-posts > .recent-post-item > .recent-post-info > .article-title:hover {
  color: var(--theme-color) !important;
}
#recent-posts
  > .recent-post-item
  > .recent-post-info
  > .article-meta-wrap
  a:hover {
  color: var(--theme-color) !important;
}
.tag-cloud-list a:hover {
  color: var(--theme-color) !important;
}
#aside-content .card-tag-cloud a:hover {
  color: var(--theme-color) !important;
}
#aside-content .aside-list > .aside-list-item .content > .comment:hover {
  color: var(--theme-color) !important;
}
#aside-content #card-toc .toc-content .toc-link:hover {
  color: var(--theme-color);
  scale: 1.03;
}
*::selection {
  background: var(--theme-color) !important;
}
#aside-content #card-toc .toc-content .toc-link.active {
  background: var(--theme-color);
  border-radius: 8px;
}
#aside-content #card-toc .toc-content .toc-link.active:hover {
  color: #fefefe;
}
.site-data > a:hover div {
  color: var(--theme-color) !important;
}

#post-comment .comment-head #comment-switch .first-comment {
  color: var(--theme-color) !important;
}
#post-comment .comment-head #comment-switch .switch-btn {
  background-color: var(--theme-color) !important;
}
#page-header.nav-fixed #nav #toggle-menu:hover {
  color: var(--theme-color) !important;
}
#post-info #post-meta a:hover {
  color: var(--theme-color) !important;
}
#pagination .page-number.current {
  background: var(--theme-color) !important;
}
#aside-content .aside-list > .aside-list-item .content > .title:hover {
  color: var(--theme-color) !important;
}
#article-container h1:hover:before,
#article-container h2:hover:before,
#article-container h3:hover:before,
#article-container h4:hover:before,
#article-container h5:hover:before,
#article-container h6:hover:before {
  color: var(--theme-color) !important;
}
#article-container li::marker {
  color: var(--theme-color) !important;
}
#post .tag_share .post-meta__tags {
  border: 1px solid var(--theme-color) !important;
  color: var(--theme-color);
  display: flex;
}
a:hover {
  color: var(--theme-color);
}
#post .tag_share .post-meta__tags:hover {
  background: var(--theme-color) !important;
}
#post .post-copyright .post-copyright-meta {
  color: var(--theme-color) !important;
}
#post .post-copyright-cc-info {
  color: var(--theme-color) !important;
}
#waline-wrap {
  --waline-theme-color: var(--theme-color) !important;
}
.hide-inline > .hide-button,
.hide-block > .hide-button {
  background: var(--theme-color) !important;
}
#article-container .tabs > .nav-tabs > .tab.active button {
  border-top: 2px solid var(--theme-color) !important;
}
#article-container .timeline {
  border-left: 2px solid var(--timeline-color, var(--theme-color));
}
#article-container .timeline .timeline-item:hover .item-circle:before {
  border-color: var(--timeline-color, var(--theme-color));
}
#article-container
  .timeline
  .timeline-item.headline
  .timeline-item-title
  .item-circle:before {
  border: 4px solid var(--timeline-color, var(--theme-color));
}
.search-dialog .search-nav {
  color: var(--theme-color) !important;
}
.search-dialog .search-nav .search-close-button:hover {
  color: var(--theme-color) !important;
}
#local-search .search-dialog .local-search-box input {
  border: 2px solid var(--theme-color) !important;
}
#local-search .search-dialog .local-search__hit-item:before {
  border: 3px solid var(--theme-color) !important;
}
#local-search .search-dialog .local-search__hit-item a:hover {
  color: var(--theme-color) !important;
}
#nav *::after {
  background-color: var(--theme-color) !important;
}

.article-sort {
  border-left: 2px solid var(--theme-color) !important;
}

.article-sort-title:after {
  background: var(--theme-color) !important;
}

.article-sort-item:before {
  border: 3px solid var(--theme-color) !important;
}

/* 开关按钮 */
.settings input[type="checkbox"] {
  width: 37px;
  height: 20px;
  /* 开关是 flex 子项：禁止被压缩，否则手机窄屏下开关会被压扁、白色圆点会溢出胶囊 */
  flex: 0 0 auto;
  min-width: 37px;
  position: relative;
  border: 1px solid #000000;
  background-color: #fdfdfd;
  border-radius: 12px;
  background-clip: content-box;
  display: inline-block;
  -webkit-appearance: none;
  user-select: none;
  outline: none;
  /* 开关的垂直位置由外面的 .opt（display:flex; align-items:center）居中决定。
     这里原来有一句 transform: translateY(5px) —— 那是给更早的「文字与开关同行、
     按基线对齐」补的偏移；套上 flex 居中之后它会把开关整体压到文字中线下方 5px，故删除。 */
}
.settings input[type="checkbox"]:before {
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  top: 2px;
  left: 3px;
  border-radius: 10px;
  background-color: #000;
}
.settings input[type="checkbox"]:checked {
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}
.settings input[type="checkbox"]:checked:before {
  left: 19px;
  background-color: white !important;
}
.settings input[type="checkbox"] {
  transition: border background-color box-shadow;
}
.settings input[type="checkbox"]:before {
  transition: left 0.2s;
}
.settings input[type="checkbox"]:checked {
  background-color: var(--theme-color) !important;
}
.settings input[type="checkbox"]:checked:before {
  transition: left 0.2s;
}
.settings input[type="checkbox"]:checked:hover {
  opacity: 0.8;
}
.settings input[type="checkbox"]:active {
  background-color: #666666 !important;
  border-color: #666666 !important;
}
.settings input[type="checkbox"]:active::before {
  background-color: white !important;
}
.content-text {
  margin-right: 5px;
}

/* 设置面板里的每一行：空间不够时换行，而不是把行内的控件压扁。
   手机端开关变形、保存按钮被压成竖条、数字输入框变窄、颜色单选挤爆面板都是这一个原因 */
.settings .content {
  flex-wrap: wrap;
}
.settings .content > .content-text {
  flex: 0 0 auto;
}
.settings .content input[type="checkbox"],
.settings .content input[type="radio"],
.settings .content input[type="number"] {
  flex: 0 0 auto;
}
.settings .content > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 数字输入框固定宽度：不固定时宽度会随可用空间在 39px~50px 之间抖动 */
.settings .content input[type="number"] {
  width: 50px;
}

/* 手机侧边菜单栏 */
#sidebar #sidebar-menus {
  background: linear-gradient(60deg, #ffd7e4 0, #c8f1ff 93%);
  border-radius: 15px;
}

/* 手机菜单栏渐变色适配暗黑模式 */
[data-theme="dark"] #sidebar #sidebar-menus {
  background: rgba(25, 25, 25, 0.95) !important;
}

/* 帧率检测 */
#fps {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 1919810;
}
[data-theme="light"] #fps {
  background-color: rgba(252, 252, 252, 0.92);
  padding: 4px;
  border-radius: 4px;
}
[data-theme="dark"] #fps {
  background-color: rgba(10, 10, 10, 0.85);
  padding: 4px;
  border-radius: 4px;
}

/* 侧边栏 */
div#rightside {
  display: var(--rightside-display);
  opacity: 0.98 !important;
  transform: translateX(-58px);
}

/* 标签圆角 */
.hl-label {
  border-radius: 8px;
}

/* 透明度和模糊半径滑块 */
input[type="range"] {
  display: block;
  -webkit-appearance: none;
  background-color: #bdc3c7;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  margin: 0 auto;
  outline: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: var(--theme-color) !important;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  z-index: 100;
}
.range {
  position: relative;
  width: 300px;
  /* 窄屏（手机）时自动收窄，避免固定 300px 把面板撑出横向滚动 */
  max-width: calc(100% - 10px);
  margin: 20px 0px 32px 10px;
  /* 上下各留 9px 空白，把滑条的可点击区域从 5px 扩大到 23px（视觉高度不变） */
  padding: 9px 0;
  cursor: pointer;
  /* 触屏：纵向仍可滚动页面，横向拖动交给滑条 */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.rang_width {
  position: absolute;
  /* 与 .range 的 padding-top 对齐，正好压在轨道上 */
  top: 9px;
  left: 0px;
  background: var(--theme-color) !important;
  height: 5px;
  border-radius: 2px 0 0 2px;
  /* 关键：进度条不再拦截鼠标事件，轨道任意位置都能点到 input */
  pointer-events: none;
}

/* 翻页按钮居中 */
#pagination {
  width: 100%;
  margin: auto;
}
/* 翻页按钮上边距 */
#pagination .pagination {
  margin-top: 10px;
}

/* 文章卡片 */
/* #recent-posts > .recent-post-item .post_cover {
  height: 240px !important;
} */

/* 分类磁贴 */
/* .categoryBar-list {
  max-height: 210px !important;
}
@media screen and (max-width: 650px) {
  .categoryBar-list {
    max-height: 190px !important;
  }
}
li.categoryBar-list-item {
  border-radius: 20px !important;
} */

/* 置顶滚动栏电脑端样式，手机端用默认的 */
@media screen and (min-width: 600px) {
  .blog-slider {
    height: 260px !important;
  }
  .blog-slider__img {
    width: 36% !important;
    height: 100% !important;
  }
}

/* 自定义颜色框：与纯色块同尺寸同形状，用彩虹渐变代表“自定义颜色”，保留文字 */
#define_colors {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px !important;
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: conic-gradient(
    from 90deg,
    #ff8a8a, #ffcf7a, #f6f37a, #9ee88f, #7fdfd0,
    #8ec9ff, #b79cff, #ff9ad5, #ff8a8a
  ) !important;
}
#define_colors::-webkit-color-swatch-wrapper {
  padding: 0;
}
#define_colors::-webkit-color-swatch {
  border: none;
  opacity: 0;
}
#define_colors::-moz-color-swatch {
  border: none;
  opacity: 0;
}
#define_colors::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  content: "自定义颜色";
}

/* 顶部胶囊加载条 */
.pace {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 10px;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 8px;
  width: 5rem;
  background: #eaecf2;
  border: 1px #e3e8f7;
  overflow: hidden;
}

.pace-inactive .pace-progress {
  opacity: 0;
  transition: 0.3s ease-in;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  max-width: 200px;
  position: absolute;
  z-index: 2000;
  display: block;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: gradient 1.5s ease infinite;
  background-size: 200%;
}

.pace.pace-inactive {
  opacity: 0;
  transition: 0.3s;
  top: -8px;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 右键菜单 */
#rightMenu {
  display: none;
  position: fixed;
  width: 160px;
  height: fit-content;
  top: 10%;
  left: 10%;
  background-color: var(--card-bg);
  border: 1px solid var(--font-color);
  border-radius: 8px;
  z-index: 100;
}
#rightMenu .rightMenu-group {
  padding: 7px 6px;
}
#rightMenu .rightMenu-group:not(:nth-last-child(1)) {
  border-bottom: 1px solid var(--font-color);
}
#rightMenu .rightMenu-group.rightMenu-small {
  display: flex;
  justify-content: space-between;
}
#rightMenu .rightMenu-group .rightMenu-item {
  height: 30px;
  line-height: 30px;
  border-radius: 8px;
  transition: 0.3s;
  color: var(--font-color);
}
#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item {
  display: flex;
  height: 40px;
  line-height: 40px;
  padding: 0 4px;
}
#rightMenu .rightMenu-group .rightMenu-item:hover {
  background-color: var(--text-bg-hover) !important;
}
#rightMenu .rightMenu-group .rightMenu-item i {
  display: inline-block;
  text-align: center;
  line-height: 30px;
  width: 30px;
  height: 30px;
  padding: 0 5px;
}
#rightMenu .rightMenu-group .rightMenu-item span {
  line-height: 30px;
}

#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item * {
  height: 40px;
  line-height: 40px;
}
.rightMenu-group.hide {
  display: none;
}

/* 页脚心跳动画 */
#heartbeat {
  color: red;
  animation: iconAnimate 1s ease-in-out infinite;
}
/* [P3 清理] 此处原有 @-moz-keyframes iconAnimate（20 行）：Firefox 16+ / Opera 15+ 起已支持无前缀 @keyframes，删掉前缀版，无前缀版就在附近 */
@-webkit-keyframes iconAnimate {
  0%,
  100% {
    transform: scale(1);
  }
  10%,
  30% {
    transform: scale(0.9);
  }
  20%,
  40%,
  60%,
  80% {
    transform: scale(1.1);
  }
  50%,
  70% {
    transform: scale(1.1);
  }
}
/* [P3 清理] 此处原有 @-o-keyframes iconAnimate（20 行）：Firefox 16+ / Opera 15+ 起已支持无前缀 @keyframes，删掉前缀版，无前缀版就在附近 */
@keyframes iconAnimate {
  0%,
  100% {
    transform: scale(1);
  }
  10%,
  30% {
    transform: scale(0.9);
  }
  20%,
  40%,
  60%,
  80% {
    transform: scale(1.1);
  }
  50%,
  70% {
    transform: scale(1.1);
  }
}

/* 星空背景 */
#universe {
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 星空在底层避免干扰阅读 */
  z-index: -2;
}

/* 星空手机模式消失 */
@media screen and (max-width: 768px) {
  #universe {
    display: none !important;
  }
}

/* 星空白天模式消失 */
[data-theme="light"] #universe {
  display: none !important;
}

/* 雪花特效 */
[data-theme="light"] #snow {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
}

/* 雪花夜间模式不显示 */
[data-theme="dark"] #snow {
  display: none !important;
}

/* 雪花手机模式不显示 */
@media screen and (max-width: 768px) {
  #snow {
    display: none !important;
  }
}

/* 右边的小猫咪 */
/* 滚动条，我设置的不隐藏，为了可以到达任何地方 */
/* body::-webkit-scrollbar {
    width: 0;
} */

.neko {
  width: 64px;
  height: 64px;
  /* https://bu.dusays.com/2022/07/20/62d812db74be9.png */
  position: absolute;
  right: 56px !important;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(50%);
  font-family: var(--global-font);
  font-weight: 600;
  font-size: 16px;
  /* 报时文字写死成舒适的黑 #333，不跟随主题色（主题色在这个白色气泡上观感偏怪） */
  color: #333 !important;
  display: none;
  /* 猫咪只当「视觉挂件」：不吃鼠标事件，被它压住的导航图标 / 侧边按钮 / 链接照常能点、能悬停 */
  pointer-events: none;
}

.neko::after {
  display: none;
  width: 100px;
  height: 100px;
  background-image: url("/External-link/img/painting/62d812d95e6f5.png");
  background-size: contain;
  z-index: 9999;
  position: absolute;
  right: 50%;
  text-align: center;
  line-height: 106px;
  top: -115%;
}

.neko.showMsg::after {
  content: attr(data-msg);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 猫咪是 pointer-events:none，:hover 永远不触发；改由 JS 判定指针是否落在猫咪身上，命中就加 .hoverOn */
.neko.hoverOn::after {
  content: attr(data-msg);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.neko.fontColor::after {
  color: #333;
}

/* 小猫咪手机端消失 */
@media screen and (max-width: 768px) {
  .neko,
  #myscoll {
    display: none !important;
  }
}

#article-container .card-content img {
  margin: 0;
}

@media screen and (min-width: 768px) {
  .card-content .fancybox,
  .card-content video {
    display: inline-block;
    max-width: 40%;
    margin-right: 10px;
  }
}

@media screen and (max-width: 768px) {
  .card-content .fancybox,
  .card-content video {
    display: inline-block;
    max-width: 48%;
    margin: 1%;
  }
}
/* ─── 已清理（2026-10-03 屎山重构 P3）──────────────────────────────
   删除：@keyframes Gradient（11 行）
   原因：全站没有任何 animation 引用它（搜 "animation: Gradient" 无结果），是动态渐变被停用后留下的孤儿
   恢复：bak/2026-10-03-屎山重构/before/themes/fomalhaut/source/css/_custom/custom.css
   ─────────────────────────────────────────────────────────── */

/* By Fomalhaut版权大小 */
.copyright {
  font-size: 16px;
}

/* 电子钟字体调节 */
/* .card-clock-location,
.card-clock-windDir,
span.card-clock-weather {
  font-family: var(--global-font) !important;
} */

/* 二级菜单圆角 */
#nav .menus_items .menus_item .menus_item_child,
#nav .menus_items .menus_item .menus_item_child li,
#nav .menus_items .menus_item .menus_item_child li:first-child,
#nav .menus_items .menus_item .menus_item_child li:last-child {
  border-radius: 8px;
}

/* 右边的按钮间距 */
#meihua-button,
#nightmode-button {
  padding-left: 12px;
}
#nav #toggle-menu {
  padding: 2px 0 0 12px !important;
}

/* 搜索框样式 */
#algolia-search .search-dialog .ais-SearchBox .ais-SearchBox-form input {
  border: 2px solid var(--theme-color) !important;
  border-right: 0px !important;
}

#algolia-search .search-dialog .ais-Hits-list a:hover {
  color: var(--theme-color) !important;
}

#algolia-search .search-dialog .ais-Hits-list li:before {
  border: 0.215em solid var(--theme-color) !important;
}

/* 小冰分类分类磁铁黑夜模式适配 */
.magnet_item {
  margin-right: 5px !important;
}
#catalog_magnet {
  padding: 18px 18px 0 18px !important;
}
@media screen and (max-width: 600px) {
  .magnet_item {
    margin-right: 0px !important;
  }
}
[data-theme="dark"] .magnet_link_context {
  background: #232323;
  color: antiquewhite;
}
[data-theme="dark"] .magnet_link_context {
  border-radius: 6px;
}
[data-theme="dark"] .magnet_link_context:hover {
  background: var(--text-bg-hover) !important;
  color: #f2f2f2;
  border-radius: 6px;
}

/* 公告栏、微博 */
.anno_content:hover,
.weibo-title:hover {
  border-bottom: 2px solid var(--theme-color) !important;
}

/* 关于页面区块 */
.about_page {
  background: #fafafa;
  border-radius: 20px;
  padding: 12px;
  margin: 5px;
  border: 1px solid #c4c2c2;
}
[data-theme="dark"] .about_page {
  background: #252525;
}
/* 首页文章信息彩色图标右边相隔5px */
.post-ui-icon {
  margin-right: 2px;
}
/* 欢迎信息 */
#welcome-info {
  background-color: var(--hh-trans-color);
  /* background: linear-gradient(45deg, #d9f5ea, #d8f3f0); */
  border-radius: 18px;
  padding: 8px 8px;
}
[data-theme="dark"] #welcome-info {
  background: #252525;
}

/* 霓虹灯颜色渐变 */
#site-name,
#site-title,
#site-subtitle,
#post-info,
.author-info__name,
.author-info__description {
  transition: text-shadow 1s linear !important;
}

/* tzy页脚样式 */
/* 自定义底部  start */
#ft {
  max-width: 1200px;
  margin: 0 auto 12px;
  display: flex;
  color: rgb(255 255 255 / 80%) !important;
  text-align: left;
  flex-wrap: wrap;
}

.ft-item-1,
.ft-item-2 {
  display: flex;
  height: 100%;
  padding: 2px 14px;
}

.ft-item-1 {
  flex-direction: column;
  flex: 2;
}

.ft-item-2 {
  flex: 1;
  flex-direction: column;
}

.t-top {
  display: flex;
}

.t-top .t-t-l {
  display: flex;
  flex-direction: column;
  flex: 1.4;
  margin-right: 10px;
}

.t-top .t-t-l .bg-ad {
  width: 85%;
  border-radius: 10px;
  padding: 0 10px;
}

.btn-xz-box {
  margin-top: 10px;
}

.btn-xz {
  display: block;
  background-color: var(--btn-bg);
  color: var(--btn-color);
  text-align: center;
  line-height: 2.4;
  margin: 8px 0;
}

.btn-xz:hover {
  text-decoration: none !important;
}

.btn-xz-box:hover .btn-xz {
  background-color: var(--btn-hover-color) !important;
  transition: all 0.2s ease-in-out;
}

.t-top .t-t-r {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ft-links {
  padding: 0 14px;
  list-style: none;
  margin-top: 0 !important;
}

.ft-links li a {
  display: inline-block !important;
  width: 50%;
}

.ft-links li a:hover {
  text-decoration: none !important;
  color: var(--theme-color) !important;
}

.ft-item-2 .ft-img-group {
  width: 100%;
}

.ft-t {
  font-size: 1.1rem;
  margin-bottom: 20px;
  line-height: 1;
  font-weight: 600;
}

.t-l-t {
  padding-left: 14px;
}

.ft-item-2 .ft-img-group .img-group-item {
  display: inline-block;
  width: 18.4%;
  margin-right: 14px;
  margin-bottom: 6px;
}

.ft-item-2 .ft-img-group .img-group-item a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.ft-item-2 .ft-img-group .img-group-item a img {
  width: 100%;
  max-height: 80px;
  border-radius: 10px;
}

.ft-item-2 .ft-img-group .img-group-item a img:hover {
  scale: 1.1;
  transition: all 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
  .ft-item-1 {
    flex-basis: 100% !important;
  }

  .ft-item-2 {
    flex-basis: 100% !important;
  }

  .t-top .t-t-l .bg-ad {
    width: 100%;
  }
}

@media screen and (max-width: 576px) {
  .t-top {
    flex-wrap: wrap;
  }

  .t-top .t-t-l {
    flex-basis: 100% !important;
  }

  .t-top .t-t-r {
    margin-top: 16px;
    flex-basis: 100% !important;
  }
}
#footer-wrap a {
  border-radius: 30px;
}
#footer-wrap {
  padding: 20px 20px;
}
/* 自定义底部  End */

/* 手机菜单栏选中圆角 */
#sidebar #sidebar-menus .menus_items .site-page:hover {
  border-radius: 10px;
}

/* 代码框数字行 */
#article-container figure.highlight .gutter pre {
  border-right: 0.5px solid #808080;
}

/* 右侧栏宽度 */
@media screen and (min-width: 900px) {
  #aside-content {
    padding: 0 5px 0 5px;
  }
}

/* 右边栏设置齿轮转速 */
i.fas.fa-cog.right_side {
  animation: fa-spin 5s linear infinite;
}

/* 文章封面箭头动画 */
.recent-post-arrow {
  animation: ddd 3s linear infinite;
}

/* 箭头圆角：主题 multicard.styl 里的 .recent-post-arrow 是直角 clip-path，
   这里用同链选择器（特异性相同、且在 custom.css 中更靠后）覆盖成圆角三角形；
   元素尺寸固定 20×10px，圆角半径约 2px，曲线按 4 段采样成多边形 */
.recent-posts .recent-post-item .recent-post-content .recent-post-arrow {
  -webkit-clip-path: polygon(4.8px 0px, 15.2px 0px, 16.27px 0.05px, 17.09px 0.21px, 17.65px 0.48px, 17.95px 0.85px, 18px 1.33px, 17.79px 1.91px, 17.32px 2.6px, 16.6px 3.4px, 11.4px 8.6px, 11.05px 8.91px, 10.7px 9.12px, 10.35px 9.26px, 10px 9.3px, 9.65px 9.26px, 9.3px 9.13px, 8.95px 8.91px, 8.6px 8.6px, 3.4px 3.4px, 2.68px 2.6px, 2.21px 1.91px, 2px 1.33px, 2.05px 0.85px, 2.35px 0.48px, 2.91px 0.21px, 3.73px 0.05px, 4.8px 0px);
}

@keyframes ddd {
  0% {
    top: 30px;
  }
  10% {
    top: 20px;
  }
  20% {
    top: 30px;
  }
  30% {
    top: 20px;
  }
  60% {
    top: 22px;
  }
  90% {
    top: 20px;
  }
  100% {
    top: 20px;
  }
}

/* 下一篇文章的圆角 */
.relatedPosts > .relatedPosts-list > div,
#pagination.pagination-post,
.postImgHover img,
#pagination .prev-post img,
#pagination .next-post img,
.relatedPosts > .relatedPosts-list > div img {
  border-radius: 12px;
}

/* 个人信息状态(参考鱼的) */
.card-info-avatar .author-status-box {
  position: absolute;
  bottom: 0;
  left: calc(100% - 28px);
  width: 28px;
  height: 28px;
  border: 1px solid #d0d7de;
  border-radius: 2em;
  background-color: #f8f8f8f8;
  transition: 0.4s;
  overflow: hidden;
}

[data-theme="dark"] .card-info-avatar .author-status-box {
  background-color: #222222f2;
  border: 1px solid #5c6060;
}

.card-info-avatar .author-status-box .author-status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 5px;
}

.card-info-avatar .author-status-box:hover {
  width: 105px;
}

.card-info-avatar .author-status-box:hover .author-status span {
  width: 105px;
  margin-left: 4px;
}

.card-info-avatar .author-status-box .author-status span {
  width: 0;
  font-size: 12px;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: 0.4s;
}

.card-widget .card-info-avatar {
  display: inline-block;
  position: relative;
}

/* 波浪css */
.main-hero-waves-area {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -11px;
  z-index: 5;
}
.waves-area .waves-svg {
  width: 100%;
  height: 5rem;
}
/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #f7f9febd;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #f7f9fe82;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #f7f9fe36;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #f7f9fe;
}
/* 黑色模式背景 */
[data-theme="dark"] .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #18171dc8;
}
[data-theme="dark"] .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #18171d80;
}
[data-theme="dark"] .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #18171d3e;
}
[data-theme="dark"] .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #18171d;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves-area .waves-svg {
    height: 40px;
    min-height: 40px;
  }
}
/* 波浪黑夜模式隐藏 */
[data-theme="dark"] .main-hero-waves-area {
  display: none;
}

/* 图片圆角和边框 */
.post-content img,
#article-container:has(.fj-gallery, #gitZone, .about_page) img {
  border-radius: 12px;
  border: 0.5px solid #80808030;
}

/* 友链描述 */
.flink-desc {
  font-size: 1.1em;
  padding: 0px 0px 20px 10px;
  font-weight: bold;
}

/* 目录样式 */
#aside-content #card-toc .toc-content {
  margin: 0 -16px 0 -25px;
}

/* diff块颜色 */
figure.highlight pre .addition {
  color: #13dfa8;
}
figure.highlight pre .deletion {
  color: #f669f6;
}

/* 新年侧边栏 */

#newYear {
  color: white;
  padding: 0 !important;
}

#newYear p,
#newYear h3 {
  font-weight: normal;
  color: inherit;
  margin: 0;
}

#newYear .item-headline {
  display: none;
}

#newYear-main {
  min-height: 160px;
  padding: 1rem;
  position: relative;
  border-radius: 12px;
  background-image: url(/External-link/img/festival/newyear.webp);
  background-size: cover;
  background-position: center;
}

#newYear-main * {
  position: relative;
  line-height: 1.3;
}

#newYear-main .newYear-time {
  font-weight: bold;
  text-align: center;
}

#newYear-main .time,
#newYear-main .happyNewYear {
  font-size: 3.5rem;
  margin: 1rem 0;
  display: block;
}

#newYear-main .day {
  font-size: 5rem;
}

#newYear-main .day .unit {
  font-size: 1rem;
}

#newYear-main .mask {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
}

/* 夜间模式友链文字颜色 */
[data-theme="dark"] .site-card .info .desc {
  color: #aaa;
}
[data-theme="dark"] .site-card .info .title {
  color: #ddd;
}
[data-theme="light"] .site-card:hover .info .title {
  color: #444 !important;
}
[data-theme="light"] .site-card:hover .info .desc {
  color: #666 !important;
}
[data-theme="dark"] .site-card:hover .info .title {
  color: #eee !important;
}
[data-theme="dark"] .site-card:hover .info .desc {
  color: #ccc !important;
}

/* 信息卡片彩带 */
/* .author_top:hover {
  background: url(/External-link/img/festival/snow.gif);
  background-size: cover;
} */

/* 霓虹灯css实现 light_15px 10s linear infinite */
[data-theme="light"] #site-name,
[data-theme="light"] #site-title,
[data-theme="light"] #site-subtitle,
[data-theme="light"] #post-info {
  animation: none !important;
}

@keyframes light_15px {
  0% {
    text-shadow: #5636ed 0 0 15px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 15px;
  }
  25% {
    text-shadow: #f14747 0 0 15px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 15px;
  }
  50% {
    text-shadow: #f1ee47 0 0 15px;
  }
  50% {
    text-shadow: #b347f1 0 0 15px;
  }
  62.5% {
    text-shadow: #002afa 0 0 15px;
  }
  75% {
    text-shadow: #ed709b 0 0 15px;
  }
  87.5% {
    text-shadow: #FF1493 0 0 15px;
  }
  100% {
    text-shadow: #5636ed 0 0 15px;
  }
}

@keyframes light_10px {
  0% {
    text-shadow: #5636ed 0 0 10px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 10px;
  }
  25% {
    text-shadow: #f14747 0 0 10px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 10px;
  }
  50% {
    text-shadow: #f1ee47 0 0 10px;
  }
  50% {
    text-shadow: #b347f1 0 0 10px;
  }
  62.5% {
    text-shadow: #002afa 0 0 10px;
  }
  75% {
    text-shadow: #ed709b 0 0 10px;
  }
  87.5% {
    text-shadow: #FF1493 0 0 10px;
  }
  100% {
    text-shadow: #5636ed 0 0 10px;
  }
}

@keyframes light_5px {
  0% {
    text-shadow: #5636ed 0 0 5px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 5px;
  }
  25% {
    text-shadow: #f14747 0 0 5px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 15px;
  }
  50% {
    text-shadow: #f1ee47 0 0 5px;
  }
  50% {
    text-shadow: #b347f1 0 0 5px;
  }
  62.5% {
    text-shadow: #002afa 0 0 5px;
  }
  75% {
    text-shadow: #ed709b 0 0 5px;
  }
  87.5% {
    text-shadow: #FF1493 0 0 5px;
  }
  100% {
    text-shadow: #5636ed 0 0 5px;
  }
}

/* 夜间模式菜单栏发光字 0 0 1px var(--theme-color) */
[data-theme="light"] .menu_word {
  text-shadow: none !important;
}
[data-theme="dark"] .menu_word {
  text-shadow: var(--menu-shadow);
}

/* 分割线 */
hr {
  border: 2px dashed var(--high-trans-color) !important;
}

hr:before {
  color: var(--theme-color) !important;
}

/* 版权下面标签排列 */
#post .tag_share .post-meta__tag-list {
  display: flex;
}
#post .tag_share .post-meta__tags {
  border-radius: 20px;
}

/* 必应壁纸框 */
#bingDayBox:hover,
#bingHistoryBox:hover,
#EEEDogBox:hover,
#seovxBox:hover,
#picsumBox:hover,
#waiBizhiBox:hover,
#btstuBox:hover,
#unsplashBox:hover {
  text-decoration: none !important;
}

.apiBox::before {
  position: relative;
  color: aliceblue;
  border-radius: 5px;
  top: 35px;
  padding: 2px 5px;
  background: #00000090;
}

#bingDayBox::before {
  left: 34px;
  content: "必应每日壁纸";
}
#bingHistoryBox::before {
  left: 34px;
  content: "必应历史壁纸";
}
#EEEDogBox::before {
  left: 20px;
  content: "loliapi动漫壁纸";
}
#seovxBox::before {
  left: 30px;
  content: "jitsu萌图壁纸";
}
#picsumBox::before {
  left: 24px;
  content: "picsum随机壁纸";
}
#waiBizhiBox::before {
  left: 34px;
  content: "小歪高清壁纸";
}
#btstuBox::before {
  left: 34px;
  content: "博天随机壁纸";
}
#unsplashBox::before {
  left: 15px;
  content: "Unsplash随机壁纸";
}

/* Github徽标 */
.github-badge img:hover {
  scale: 1.05;
  transition: all 0.3s ease-in-out;
}

/* 最新文章图片圆角 */
#aside-content .aside-list > .aside-list-item .thumbnail {
  border-radius: 8px !important;
}

/* 转圈颜色 */
.el-loading-spinner .path {
  stroke: var(--theme-color) !important;
}

.mini-link:hover {
  scale: 1.05;
}

.winbox_btn:hover {
  background-color: var(--btn-hover-color) !important;
  transition: all 0.2s ease-in-out;
}

#reset_btn:hover {
  background: var(--btn-hover-color) !important;
  transition: all 0.5s ease-in-out;
}

/* 侧栏显隐 */
.layout:not(:has(#page)) {
  justify-content: var(--layout-justify-content);
}

.layout:not(:has(#page)) > .aside-content {
  display: var(--aside-content-display);
}

/* 侧栏位置 */
.layout > div:first-child {
  order: var(--first-child-order);
}

@media screen and (min-width: 1069px) {
  .recent-posts .recent-post-item {
    /* 右边：0px 1% 20px 0px 左边则反过来*/
    margin: var(--recent-post-item-margin);
  }
}

/* ─── 已清理（2026-10-03 屎山重构 P3）──────────────────────────────
   删除：TianliGPT 整段样式（189 行：:root --heo-* 变量 + .post-TianliGPT 及配套类）
   原因：该功能已下线（source/site/time/index.md 更新日志记着「去除 TianliGPT」），配置与模板里都搜不到 tianliGPT；这段 --heo-* 变量还会误导人以为是主题变量
   恢复：bak/2026-10-03-屎山重构/before/themes/fomalhaut/source/css/_custom/custom.css
   ─────────────────────────────────────────────────────────── */


/* ==========================================================================
   置顶文章角标（首页卡片左上角）
   --------------------------------------------------------------------------
   配合 themes/fomalhaut/layout/includes/mixins/post-ui.pug 里的
   postStickyBadge 混入使用。字段：文章 Front-Matter 或正文标记
   <!-- sticky --> 都会写入 sticky = 1；sticky: 2 及以上为「强置顶」，颜色更红。
   .recent-post-item 本身是 overflow: hidden，所以角标只能贴在卡片内部
   左上角（做成越界的缎带会被直接裁掉）。
   ========================================================================== */
.recent-post-item .post-sticky-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  background-image: linear-gradient(135deg, #ff9a3d 0%, #ff5f4d 52%, #f5341d 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(231, 63, 32, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  pointer-events: none;
  transform: translateZ(0);
}

/* 强置顶（sticky >= 2）：整体加深，和普通置顶拉开差距 */
.recent-post-item .post-sticky-badge.is-top {
  background-image: linear-gradient(135deg, #ff7a2f 0%, #f0351c 45%, #c8120b 100%);
  box-shadow: 0 4px 14px rgba(196, 22, 10, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.recent-post-item .post-sticky-badge .post-sticky-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: #fff;
}

.recent-post-item .post-sticky-badge .post-sticky-text {
  position: relative;
  z-index: 1;
}

/* 划过卡片的斜向高光：置顶角标看起来是「会动」的，比较容易第一眼看到 */
.recent-post-item .post-sticky-badge .post-sticky-shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  animation: post-sticky-shine 3.4s ease-in-out infinite;
}

@keyframes post-sticky-shine {
  0%,
  62% {
    left: -60%;
  }
  86%,
  100% {
    left: 118%;
  }
}

/* 暗色模式：卡片底色变深，角标再亮一点点避免发闷 */
[data-theme='dark'] .recent-post-item .post-sticky-badge {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

/* 尊重「减少动态效果」偏好的用户 */
@media (prefers-reduced-motion: reduce) {
  .recent-post-item .post-sticky-badge .post-sticky-shine {
    animation: none;
    display: none;
  }
}


/* ===== 侧栏个人信息卡片改版：玻璃拟态 + 马克笔名字（2026-02-16） =====
 * 只作用于侧栏第一张卡 #aside-content > .card-widget.card-info，
 * 其他侧栏卡片（公告栏 / 最新文章 / 网站资讯 / 日历…）一律不受影响。
 * 手法：卡内 ::before 铺一层磨砂玻璃（上半部渐隐，露出背景图原样）→ 杂志式排版；
 *      统计行改竖线分组；Github 按钮改白底描边药丸（hover 填主题色）；
 *      名字加黄色马克笔高亮（深色模式改墨字压黄条，保证对比度）。
 * 回滚：整段删除即可；改动前备份见 bak/custom.css.bak-2026-10-03T04-13-13。
 * 依赖：--theme-color 由站点内联脚本注入（默认 rgb(57,197,187)），--global-font = LXGW。
 */
#aside-content > .card-widget.card-info {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(13, 43, 51, .07), 0 22px 44px -22px rgba(8, 42, 52, .5);
}
#aside-content > .card-widget.card-info::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 2026-10-04 性能修复：backdrop-filter 只在 ≥1200px 的桌面端启用（见紧接其后的 @media）。
     窄屏 / 平板降级成实底半透明面板 —— 没有实时模糊，卡片本身仍是卡片，
     但不再让弱 GPU 在滚动时逐帧重算背景。原始玻璃配方原样保留在 @media 里。 */
  background: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .82) 30%, rgba(255, 255, 255, .92) 64%, rgba(255, 255, 255, .96) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}
/* ≥1200px：玻璃拟态（原始配方：磨砂 + 上半部渐隐，露出背景图原样） */
@media (min-width: 1200px) {
  #aside-content > .card-widget.card-info::before {
    backdrop-filter: blur(11px) saturate(1.45);
    -webkit-backdrop-filter: blur(11px) saturate(1.45);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .42) 30%, rgba(255, 255, 255, .76) 64%, rgba(255, 255, 255, .88) 100%);
  }
}
#aside-content > .card-widget.card-info > * {
  position: relative;
  z-index: 1;
}

/* 名字：黄色马克笔高亮 + 微倾 */
#aside-content > .card-widget.card-info .author-info__name {
  /* display:table + margin:auto = 块级收缩盒：无论侧栏多宽都另起一行、水平居中在头像正下方
     （inline-block 在宽侧栏下会被挤到头像右侧同一行，看着就像贴在头像右下角） */
  display: table;
  max-width: 100%;
  margin: .14em auto 0;
  padding: .06em .18em .1em;
  font-size: 1.68em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .015em;
  color: #0d2b33;
  transform: rotate(-.7deg);
}
/* 马克笔条：改用伪元素按 em 定位（深/浅色同一套几何），避免行高把黄色条挤到字下面 */
#aside-content > .card-widget.card-info .author-info__name::before {
  content: "";
  position: absolute;
  left: .1em;
  right: .1em;
  bottom: .44em;
  height: .64em;
  z-index: -1;
  border-radius: .09em;
  background: rgba(255, 214, 102, .92);
}
/* 描述：小号大写 + 宽字距 */
#aside-content > .card-widget.card-info .author-info__description {
  margin-top: .14em;
  font-size: .7em;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(13, 43, 51, .72);
}
/* 统计：杂志式上下细线 + 竖分隔线 */
#aside-content > .card-widget.card-info .card-info-data {
  display: flex;
  align-items: stretch;
  margin: 15px 0 0;
  padding: 10px 0;
  border-top: 1px solid rgba(13, 43, 51, .14);
  border-bottom: 1px solid rgba(13, 43, 51, .14);
}
#aside-content > .card-widget.card-info .card-info-data > a {
  flex: 1 1 0;
  position: relative;
  padding: 0;
}
#aside-content > .card-widget.card-info .card-info-data > a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: rgba(13, 43, 51, .14);
}
#aside-content > .card-widget.card-info .card-info-data .headline {
  font-size: .7em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .22em;
  color: rgba(13, 43, 51, .62);
}
#aside-content > .card-widget.card-info .card-info-data .length-num {
  font-size: 1.55em;
  font-weight: 700;
  line-height: 1.2;
  color: #0d2b33;
  margin-top: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Github 按钮：白底描边药丸，hover 填充主题色 */
#aside-content > .card-widget.card-info > #card-info-btn {
  margin-top: 13px;
  background-color: rgba(255, 255, 255, .82) !important;
  color: #0d2b33 !important;
  border: 1px solid rgba(13, 43, 51, .16);
  border-radius: 999px;
  line-height: 2.45;
  font-weight: 600;
  letter-spacing: .06em;
  box-shadow: 0 8px 20px -12px rgba(8, 42, 52, .6);
  transition: all .3s ease;
}
#aside-content > .card-widget.card-info > #card-info-btn:hover {
  background-color: var(--theme-color) !important;
  color: #fff !important;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -12px rgba(8, 42, 52, .7);
}
#aside-content > .card-widget.card-info .card-info-social-icons {
  margin-top: 11px;
}
#aside-content > .card-widget.card-info .card-info-avatar .avatar-img {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .62), 0 12px 26px -14px rgba(8, 42, 52, .8);
}

/* ---- 深色模式适配：只换配色，规则本体一套 ---- */
[data-theme="dark"] #aside-content > .card-widget.card-info {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 44px -20px rgba(0, 0, 0, .75);
}
[data-theme="dark"] #aside-content > .card-widget.card-info::before {
  /* 窄屏降级版：实底（≥1200px 的玻璃版在紧随其后的 @media 里覆盖回来） */
  background: linear-gradient(180deg, rgba(6, 22, 30, .66) 0%, rgba(6, 22, 30, .84) 30%, rgba(6, 22, 30, .92) 64%, rgba(6, 22, 30, .95) 100%);
}
@media (min-width: 1200px) {
  [data-theme="dark"] #aside-content > .card-widget.card-info::before {
    background: linear-gradient(180deg, rgba(6, 22, 30, 0) 0%, rgba(6, 22, 30, .42) 30%, rgba(6, 22, 30, .74) 64%, rgba(6, 22, 30, .86) 100%);
  }
}
[data-theme="dark"] #aside-content > .card-widget.card-info .author-info__name {
  color: #e9fffc;                     /* 浅字压在玻璃条上：真实页实测对比度 12.3:1 */
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
/* 夜间马克笔 = 午夜玻璃条：深色半透条 + 极光青细描边，压在文字后面（浅色仍用黄条，几何按 em 共享） */
[data-theme="dark"] #aside-content > .card-widget.card-info .author-info__name::before {
  display: block;
  bottom: .40em;
  height: .74em;
  background: rgba(9, 29, 37, .72);
  border: 1px solid rgba(127, 227, 218, .45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45), inset 0 0 18px rgba(255, 20, 147, .18);
}
[data-theme="dark"] #aside-content > .card-widget.card-info .author-info__description {
  color: rgba(242, 251, 251, .82);
}
[data-theme="dark"] #aside-content > .card-widget.card-info .card-info-data {
  border-color: rgba(255, 255, 255, .2);
}
[data-theme="dark"] #aside-content > .card-widget.card-info .card-info-data > a + a::before {
  background: rgba(255, 255, 255, .2);
}
[data-theme="dark"] #aside-content > .card-widget.card-info .card-info-data .headline {
  color: rgba(242, 251, 251, .7);
}
[data-theme="dark"] #aside-content > .card-widget.card-info .card-info-data .length-num {
  color: #fff;
}
[data-theme="dark"] #aside-content > .card-widget.card-info > #card-info-btn {
  background-color: rgba(255, 255, 255, .14) !important;
  color: #eaf7f7 !important;
  border-color: rgba(255, 255, 255, .3);
  box-shadow: none;
}
[data-theme="dark"] #aside-content > .card-widget.card-info > #card-info-btn:hover {
  background-color: var(--theme-color) !important;
  color: #fff !important;
  border-color: transparent;
}

/* ============================================================================
 * 【美化面板：手机端排布 + 新增的包裹层】（2026-10-04）
 * ----------------------------------------------------------------------------
 * 面板 HTML 见 source/js/modules/settings.js 的 createWinbox()。本次配套改动：
 *   · 每段「文字 + 开关」在 HTML 里包成 <label class="opt">；
 *   · 背景滤镜三个参数各自包成 <label class="bgp">；
 *   · 主题色那一行加了 .colorRow；
 *   · 「恢复默认背景」按钮已删（reset() 里已经会 resetBg_()，那个按钮是重复的）。
 * 所以下面除「手机端重排」外，还有几条给新包裹层兜底的基础规则。
 *
 * 【为什么不就地写在 2218 那个「设置面板的开关按钮」一节里】
 *   这一段必须排在 .swf(原 1902) / 颜色单选(原 1918) / 开关按钮(原 2218) 之后，
 *   同权重时才压得住它们；而文件头那份目录索引里的行号是按插入位置算的，
 *   插在中间会把后面所有条目的行号整体推走 —— 放到文件末尾，索引继续有效。
 *   桌面端一律维持原样：真正的重排全部落在下面那条 max-width:768px 里。
 * ------------------------------------------------------------------------- */

/* 开关行里的一段「文字 + 开关」。原先两者是 .content 的直接子元素，
   窄屏换行时会被拆散（文字留在一行、开关掉到下一行），包一层就不会分家了 */
.settings .content > .opt {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
}
.settings .content > .opt > .content-text {
  padding-left: 10px;
}
/* 并排的第二列留出更大间距（原先是写在 HTML 上的 padding-left:20px） */
.settings .content > .opt + .opt > .content-text {
  padding-left: 20px;
}

/* 背景滤镜参数：模糊半径 / 饱和度 / 对比度各自成组，数字框与它的单位不再被拆行 */
.settings .bgparams {
  align-items: center;
  gap: 6px 10px;
}
.settings .bgp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  white-space: nowrap;
  cursor: pointer;
}
.settings .bgp-v {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
/* 保存按钮：原来这几个属性写在 HTML 的 inline style 上 */
.settings .bgp-save {
  background: var(--theme-color);
  width: 48px;
  border-radius: 6px;
  color: white;
  line-height: 1.2;
  height: 28px;
  margin-top: 2px;
}

/* 「切换背景」按钮：原来写成 🌈切换背景🌈 —— 两边各一个彩虹，窄屏时会把文字挤成两行
   （另一个彩虹单独掉到第二行）。彩虹已删，下面这堆原本是 inline style。 */
.settings .picbtn {
  background: var(--theme-color);
  width: 35%;
  padding: 5px 0 7px 0;
  border-radius: 30px;
  color: white;
  line-height: 2;
}

/* 主题色选择行：桌面一行铺开，手机端换成网格均分（见下面的 @media） */
/* 两圈之间的空隙只是排版空白：不能被当成可选文本，否则点一下就会在那里落下
   一个编辑光标（会闪的那道竖杠），而这一行本来没有任何可选的文字。 */
.settings .colorRow {
  display: flex;
  flex-wrap: wrap;
  padding-left: 12px;
  -webkit-user-select: none;
  user-select: none;
  caret-color: transparent;
}

/* 恢复默认设置按钮：原来是写死在 inline style 里的 #fc354c→#0abfbc 红青渐变，
   现在跟随主题色。第一行是给不支持 color-mix() 的老浏览器回退的纯主题色。 */
#reset_btn {
  display: block;
  width: 40%;
  padding: 15px 0;
  border-radius: 30px;
  color: white;
  font-size: 1.1em;
  white-space: nowrap;
  background: var(--theme-color);
  background: linear-gradient(to right, color-mix(in srgb, var(--theme-color) 55%, #ffffff), var(--theme-color));
}

@media screen and (max-width: 768px) {
  /* 开关行：一段独占一整行，文字在左、开关贴右，叠几行也是齐的 */
  .settings .content > .opt {
    flex: 1 1 100%;
    justify-content: space-between;
    min-height: 38px;
  }
  /* 两列都从 10px 起，免得读完一行又缩进 10px */
  .settings .content > .opt > .content-text,
  .settings .content > .opt + .opt > .content-text {
    padding-left: 10px;
  }
  /* 开关的垂直居中由 .opt 的 flex 居中统一负责（见「开关按钮」那条的基础样式），
     这里不再需要单独把 transform 覆盖回 none。 */

  /* 「模糊半径: 0px | 饱和度: 108% | 对比度: 105%」这行摘要：360px 窄屏下 1em 会正好在
     「对比度:」和红色数值之间断成两行，缩一档让它留住一行 */
  #bgFilterShow {
    font-size: .9em;
  }

  /* 背景滤镜参数：一行一项，标签在左、数字框+单位在右，保存按钮独占一行铺满 */
  .settings .bgparams {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .settings .bgp {
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
  }
  .settings .bgparams > .bgp-save {
    width: 100%;
    height: 34px;
    margin-top: 4px;
  }

  /* 「切换背景」按钮：跟「保存」一样整行宽，不再缩成一小坨 */
  .settings .picbtn {
    width: 100%;
    padding: 9px 0;
    line-height: 1.2;
    font-size: .95em;
  }

  /* 主题色：13 个色圈改成等宽网格，不再挤成参差不齐的「10 + 3」两行 */
  .settings .colorRow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
    gap: 8px 0;
    justify-items: center;
    padding-left: 0;
  }
  .settings .colorRow > input[name="colors"] {
    margin-right: 0;
    width: 24px;
    height: 24px;
  }

  /* 字体按钮：等宽两列 + 字号内边距收一档。只动手机端 ——
     桌面端的 winboxNeedSize() 靠量前 5 个 .swf 的宽度来定面板宽度，不能碰 */
  .settings #swfs,
  .settings #swfs_code {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
  }
  .settings #swfs > .swf,
  .settings #swfs_code > .swf {
    margin: 0;
    padding: 8px 6px;
    font-size: 17px;
    text-align: center;
  }

  /* 恢复默认设置：整行宽，再窄的手机也不会折成两行 */
  #reset_btn {
    width: 100%;
    padding: 13px 0;
    font-size: 1em;
  }
}

/* 面板打开时，把右下角悬浮工具条 #rightside 压到面板下面。
   WinBox 面板的 z-index 是 99（settings.js 里 WinBox({ index: 99 })），
   主题的 #rightside 是 z-index:100（themes/fomalhaut/source/css/_layout/rightside.styl:5），
   而手机端面板宽 95%、面板最大化时更是整屏 —— 必然重叠，工具条会盖住右对齐的开关。 */
body:has(#meihuaBox) #rightside {
  z-index: 90;
}






.search-dialog {
  position: fixed;
  top: 10%;
  left: 50%;
  z-index: 1001;
  display: none;
  margin-left: -300px;
  padding: 20px;
  width: 600px;
  border-radius: 8px;
  background: var(--search-bg);
}
@media screen and (max-width: 768px) {
  .search-dialog {
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}
.search-dialog hr {
  margin: 20px auto;
}
.search-dialog .search-nav {
  margin: 0 0 14px;
  color: #49b1f5;
  font-size: 1.4em;
  line-height: 1;
}
.search-dialog .search-nav .search-dialog-title {
  margin-right: 10px;
}
.search-dialog .search-nav .search-close-button {
  float: right;
  color: #858585;
  -webkit-transition: color 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}
.search-dialog .search-nav .search-close-button:hover {
  color: #49b1f5;
}
#search-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none;
  background: rgba(0,0,0,0.6);
}
#algolia-search hr {
  display: none;
}
#algolia-search .search-nav {
  height: 40px;
  margin: 0;
}
@media screen and (max-width: 768px) {
  #algolia-search .search-dialog {
    border: none;
    border-radius: 0;
  }
}
#algolia-search .search-dialog .ais-SearchBox .ais-SearchBox-form {
  height: 35px;
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
#algolia-search .search-dialog .ais-SearchBox .ais-SearchBox-form input {
  padding: 0 14px;
  height: 100%;
  width: calc(100% - 50px);
  outline: none;
  border: 2px solid #49b1f5;
  border-right: 0;
  border-radius: 40px 0 0 40px;
  background: transparent;
  color: var(--search-input-color);
}
#algolia-search .search-dialog .ais-SearchBox .ais-SearchBox-form input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
#algolia-search .search-dialog .ais-SearchBox .ais-SearchBox-form button.ais-SearchBox-submit {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 100%;
  width: 50px;
  border: 2px solid var(--theme-color);
  border-left: 0;
  border-radius: 0 40px 40px 0;
}
#algolia-search .search-dialog .ais-SearchBox .ais-SearchBox-form button.ais-SearchBox-submit svg {
  width: 50%;
  height: 50%;
}
#algolia-search .search-dialog .ais-SearchBox .ais-SearchBox-form button.ais-SearchBox-submit svg path {
  fill: var(--search-input-color);
}
#algolia-search .search-dialog .ais-SearchBox .ais-SearchBox-form button.ais-SearchBox-submit:hover svg path {
  fill: var(--theme-color);
}
#algolia-search .search-dialog .ais-SearchBox .ais-SearchBox-form span.ais-SearchBox-loadingIndicator {
  position: absolute;
  left: 50%;
  top: 93px;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -o-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
}
#algolia-search .search-dialog .ais-Hits-list {
  margin: 0;
  padding: 0;
}
#algolia-search .search-dialog .ais-Hits-list a {
  color: var(--search-result-title);
  font-weight: bold;
}
#algolia-search .search-dialog .ais-Hits-list a:hover {
  color: #49b1f5;
}
#algolia-search .search-dialog .ais-Hits-list mark {
  background: transparent;
  color: #f47466;
  font-weight: bold;
}
#algolia-search .search-dialog .algolia-hit-item-content {
  margin: 0 0 5px;
  word-break: break-all;
}
#algolia-search .search-dialog .ais-Pagination {
  margin: 10px 0;
  height: 35px;
  padding: 0;
  text-align: center;
}
#algolia-search .search-dialog .ais-Pagination .ais-Pagination-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
#algolia-search .search-dialog .ais-Pagination .ais-Pagination-item {
  display: inline;
  margin: 0 4px;
  padding: 0;
}
#algolia-search .search-dialog .ais-Pagination .ais-Pagination-item .ais-Pagination-link {
  display: inline-block;
  min-width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
}
#algolia-search .search-dialog .ais-Pagination .ais-Pagination-item--selected a {
  background: var(--theme-color);
  color: #eee;
  cursor: default;
  border-radius: 5px;
}
#algolia-search .search-dialog .ais-Pagination .ais-Pagination-item--disabled {
  visibility: hidden;
}
#algolia-search .search-dialog .algolia-logo {
  padding-top: 2px;
  width: 80px;
  height: 30px;
}
#algolia-search .search-dialog #algolia-hits > div {
  overflow-y: scroll;
}
@media screen and (min-width: 768px) {
  #algolia-search .search-dialog #algolia-hits > div {
    max-height: calc(80vh - 240px);
  }
}
@media screen and (max-width: 768px) {
  #algolia-search .search-dialog #algolia-hits > div {
    max-height: calc(100vh - 260px);
  }
}
#algolia-search .search-dialog #algolia-info {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 30px;
}
#algolia-search .search-dialog #algolia-info .algolia-stats {
  font-size: 14px;
}
#algolia-search .search-dialog #algolia-info .algolia-poweredBy .ais-PoweredBy a {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#algolia-search .search-dialog #algolia-info .ais-PoweredBy-logo path:first-child {
  display: none;
}
#algolia-search .search-dialog #algolia-info .ais-PoweredBy-logo path:nth-child(2),
#algolia-search .search-dialog #algolia-info .ais-PoweredBy-logo path:nth-child(4) {
  fill: var(--theme-color);
}
@media screen and (max-width: 768px) {
  .apple #algolia-search #algolia-hits > div {
    height: calc(90vh - 260px);
  }
}