.disable-hover, .disable-hover * {
    pointer-events: none !important
}

@-moz-keyframes fade-in {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-o-keyframes fade-in {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fade-in {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.text-center {
    text-align: center
}

.text-uppercase {
    text-transform: uppercase
}

body {
    font-family: 'PingFang SC', 'Microsoft YaHei', Roboto, Arial, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    line-height: 2
}

::selection {
    color: #fff;
    background: #8e71c1
}

a {
    color: var(--smc-link-color);
    text-decoration: none;
    transition: color .1s
}

a:focus, a:hover {
    color: #db2828
}

a:active {
    color: #003c73
}

h1, h2, h3, h4, h5, h6 {
    font-weight: inherit
}

h1 {
    font-size: 2.5rem;
    font-weight: 400
}

h2 {
    font-size: 2.2rem;
    font-weight: 400
}

h3 {
    font-size: 1.9rem;
    font-weight: 400
}

h4 {
    font-size: 1.6rem;
    font-weight: 400
}

h5 {
    font-size: 1.3rem;
    font-weight: 400
}

h6 {
    font-size: 1rem false
}

button {
    outline: 0
}

p {
    font-size: inherit;
    font-weight: inherit
}

p:first-child {
    margin-top: 0
}

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

hr {
    opacity: .2;
    margin: 1rem
}

:root {
    --hty-mode: 'light';
    --hty-primary-color: #0078e7;
    --hty-bg-color: #f5f5f5;
    --hty-text-color: #333;
    --hty-secondary-text-color: #555;
    --post-block-bg-color: #fff;
    --smc-link-color: #0078e7
}

html {
    scroll-behavior: smooth
}

body {
    overflow-y: scroll;
    background-color: var(--hty-bg-color, #f5f5f5)
}

body::before {
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url(../image/stars-timing-0-blur-30px.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation-name: bgFadeIn;
    animation-duration: 2s;
    opacity: 1
}

@-moz-keyframes bgFadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes bgFadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-o-keyframes bgFadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes bgFadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

body {
    cursor: url(https://cdn.jsdelivr.net/gh/YunYouJun/cdn/css/md-cursors/pointer.cur), auto
}

a {
    cursor: url(https://cdn.jsdelivr.net/gh/YunYouJun/cdn/css/md-cursors/link.cur), auto
}

a:hover {
    cursor: url(https://cdn.jsdelivr.net/gh/YunYouJun/cdn/css/md-cursors/link.cur), auto
}

.hty-icon-button {
    cursor: url(https://cdn.jsdelivr.net/gh/YunYouJun/cdn/css/md-cursors/link.cur), pointer
}

input {
    cursor: url(https://cdn.jsdelivr.net/gh/YunYouJun/cdn/css/md-cursors/text.cur), auto
}

:root {
    --banner-line-color: #000;
    --banner-char-color: #000
}

#banner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh
}

.vertical-line-bottom, .vertical-line-top {
    display: flex;
    background-color: var(--banner-line-color);
    width: 1px;
    height: 0;
    animation-duration: .4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in
}

.vertical-line-bottom {
    position: absolute;
    bottom: 0
}

.char {
    font-family: 'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif;
    font-size: var(--banner-char-size, 1rem);
    font-weight: 900;
    background-color: rgba(255, 255, 255, .5);
    line-height: 1;
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s
}

.char:hover {
    color: #fff;
    background-color: var(--banner-char-color)
}

.char-left, .char-right {
    display: flex;
    color: var(--banner-char-color);
    opacity: 0
}

.char-left {
    border-left: 1px solid var(--banner-line-color);
    border-right: 0 solid rgba(0, 120, 231, .1);
    border-right-width: 0;
    animation-duration: .4s;
    animation-delay: .4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out
}

.char-right {
    border-left: 0 solid rgba(0, 120, 231, .1);
    border-right: 1px solid var(--banner-line-color);
    border-left-width: 0;
    animation-duration: .4s;
    animation-delay: .4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out
}

.cloud {
    display: flex;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8;
    box-sizing: border-box;
    mix-blend-mode: overlay
}

.cloud .waves {
    display: flex;
    position: relative;
    width: 100%;
    height: 100px
}

@media (max-width: 768px) {
    .cloud .waves {
        height: 40px
    }
}

.cloud .parallax > use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite
}

.cloud .parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s
}

.cloud .parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s
}

.cloud .parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s
}

.cloud .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s
}

@-moz-keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0)
    }
    100% {
        transform: translate3d(85px, 0, 0)
    }
}

@-webkit-keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0)
    }
    100% {
        transform: translate3d(85px, 0, 0)
    }
}

@-o-keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0)
    }
    100% {
        transform: translate3d(85px, 0, 0)
    }
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0)
    }
    100% {
        transform: translate3d(85px, 0, 0)
    }
}

#goDown {
    display: inline-flex;
    position: absolute;
    bottom: 1rem;
    z-index: 9;
    animation: float 2s ease-in-out infinite
}

#goDown .icon {
    color: #0078e7;
    width: 3rem;
    height: 3rem
}

@-moz-keyframes float {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    50% {
        opacity: .8;
        transform: translateY(-.8rem)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes float {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    50% {
        opacity: .8;
        transform: translateY(-.8rem)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@-o-keyframes float {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    50% {
        opacity: .8;
        transform: translateY(-.8rem)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes float {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    50% {
        opacity: .8;
        transform: translateY(-.8rem)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@-moz-keyframes extend-line {
    from {
        height: 0
    }
    to {
        height: var(--banner-line-height)
    }
}

@-webkit-keyframes extend-line {
    from {
        height: 0
    }
    to {
        height: var(--banner-line-height)
    }
}

@-o-keyframes extend-line {
    from {
        height: 0
    }
    to {
        height: var(--banner-line-height)
    }
}

@keyframes extend-line {
    from {
        height: 0
    }
    to {
        height: var(--banner-line-height)
    }
}

@-moz-keyframes char-move-left {
    from {
        opacity: 0;
        border-right-width: 0
    }
    to {
        opacity: 1;
        border-right-width: var(--banner-empty-border-size, var(--banner-char-size))
    }
}

@-webkit-keyframes char-move-left {
    from {
        opacity: 0;
        border-right-width: 0
    }
    to {
        opacity: 1;
        border-right-width: var(--banner-empty-border-size, var(--banner-char-size))
    }
}

@-o-keyframes char-move-left {
    from {
        opacity: 0;
        border-right-width: 0
    }
    to {
        opacity: 1;
        border-right-width: var(--banner-empty-border-size, var(--banner-char-size))
    }
}

@keyframes char-move-left {
    from {
        opacity: 0;
        border-right-width: 0
    }
    to {
        opacity: 1;
        border-right-width: var(--banner-empty-border-size, var(--banner-char-size))
    }
}

@-moz-keyframes char-move-right {
    from {
        opacity: 0;
        border-left-width: 0
    }
    to {
        opacity: 1;
        border-left-width: var(--banner-empty-border-size, var(--banner-char-size))
    }
}

@-webkit-keyframes char-move-right {
    from {
        opacity: 0;
        border-left-width: 0
    }
    to {
        opacity: 1;
        border-left-width: var(--banner-empty-border-size, var(--banner-char-size))
    }
}

@-o-keyframes char-move-right {
    from {
        opacity: 0;
        border-left-width: 0
    }
    to {
        opacity: 1;
        border-left-width: var(--banner-empty-border-size, var(--banner-char-size))
    }
}

@keyframes char-move-right {
    from {
        opacity: 0;
        border-left-width: 0
    }
    to {
        opacity: 1;
        border-left-width: var(--banner-empty-border-size, var(--banner-char-size))
    }
}

#footer {
    font-size: .9rem;
    color: var(--hty-secondary-text-color);
    text-align: center;
    padding-top: 1rem;
    padding-bottom: .5rem
}

#footer .footer-separator {
    margin: 0 .5rem
}

#footer .footer-custom-text {
    margin-top: .3rem;
    line-height: 0
}

#animate {
    animation: iconAnimate 1.33s ease-in-out infinite
}

.with-love {
    display: inline-block;
    margin: 5px 5px 0 5px;
    color: #0078e7
}

.moe-text {
    margin: 0 5px
}

@-moz-keyframes iconAnimate {
    0%, 100% {
        transform: scale(1)
    }
    10%, 30% {
        transform: scale(.9)
    }
    20%, 40%, 60%, 80% {
        transform: scale(1.1)
    }
    50%, 70% {
        transform: scale(1.1)
    }
}

@-webkit-keyframes iconAnimate {
    0%, 100% {
        transform: scale(1)
    }
    10%, 30% {
        transform: scale(.9)
    }
    20%, 40%, 60%, 80% {
        transform: scale(1.1)
    }
    50%, 70% {
        transform: scale(1.1)
    }
}

@-o-keyframes iconAnimate {
    0%, 100% {
        transform: scale(1)
    }
    10%, 30% {
        transform: scale(.9)
    }
    20%, 40%, 60%, 80% {
        transform: scale(1.1)
    }
    50%, 70% {
        transform: scale(1.1)
    }
}

@keyframes iconAnimate {
    0%, 100% {
        transform: scale(1)
    }
    10%, 30% {
        transform: scale(.9)
    }
    20%, 40%, 60%, 80% {
        transform: scale(1.1)
    }
    50%, 70% {
        transform: scale(1.1)
    }
}

.hty-layout-grid {
    display: grid;
    box-sizing: border-box;
    grid-gap: 1rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin: 1rem auto
}

.hty-layout-grid__cell {
    width: 100%;
    box-sizing: border-box;
    justify-content: center
}

.hty-layout-grid__cell--span-12 {
    margin: 0;
    width: auto;
    grid-column-end: span 12
}

.link-items {
    display: flex;
    padding: 0 .5rem;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap
}

.link-item {
    display: inline-flex;
    text-align: center;
    justify-self: center;
    line-height: 1.5;
    padding: .5rem 1rem;
    margin: .5rem;
    width: 15rem;
    transition: .2s;
    color: var(--primary-color, #000);
    border: 1px solid var(--primary-color, grey)
}

.link-item:hover {
    color: #fff;
    background-color: var(--primary-color, grey);
    box-shadow: 0 2px 20px var(--primary-color, grey)
}

@media screen and (max-width: 768px) {
    .link-item {
        display: flex
    }
}

.link-item .link-url {
    display: inline-block;
    line-height: 0
}

.link-item .link-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid var(--primary-color, grey);
    transition: .5s
}

.link-item .link-avatar:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, .1)
}

.link-item .link-info {
    padding-left: .6rem
}

.link-item .link-blog {
    font-family: 'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif;
    font-weight: 900;
    margin: .42rem 0;

    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
}

.link-item .link-desc {
    font-size: .8rem;
    margin-top: .5rem;
    width: 10.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

#content {

    overflow: hidden
}

#archive, #category, #page, #tag ,.w3ls-contact {
    margin: 0 1rem 1rem 1rem;
    background-color: var(--post-block-bg-color);
    padding: 1rem .5rem
}

@media screen and (max-width: 768px) {
    #archive, #category, #page, #tag {
        margin: 0 0 1rem 0
    }
}

.page-subtitle {
    text-align: center;
    color: var(--hty-secondary-text-color);
    font-size: 1rem;
    margin: .5rem
}

.category-lists, .tag-cloud {
    text-align: center;
    padding: 1rem 2rem
}

.category-lists a, .tag-cloud a {
    display: inline-block;
    margin: 0 .4rem;
    text-decoration: none
}

.category-lists {
    text-align: left
}

.category-lists .category-list {
    padding-inline-start: 0
}

.category-lists .category-list-item {
    list-style: none;
    color: var(--hty-text-color)
}

.category-lists .category-list-item:hover::before {
    color: #0078e7
}

.category-lists .category-list-item::before {
    content: '📂'
}

.category-lists .category-list-child .category-list-item::before {
    content: '📁'
}

.category-lists .category-list-link {
    color: var(--hty-text-color);
    border-bottom: 1px dotted #999
}

.category-lists .category-list-count::before {
    content: ' [ '
}

.category-lists .category-list-count::after {
    content: ' ] '
}

.wordcloud {
    position: relative;
    display: block;
    margin: 0 auto;
    text-align: center
}

.wordcloud #wordcloud-canvas, .wordcloud #wordcloud-sidebar-canvas {
    cursor: url(https://cdn.jsdelivr.net/gh/YunYouJun/cdn/css/md-cursors/link.cur), pointer
}

.wordcloud #wordbox {
    pointer-events: none;
    position: absolute;
    box-shadow: 0 0 100px 100px rgba(0, 0, 0, .1);
    border-radius: 50px
}

.wordcloud #wordbox-sidebar {
    pointer-events: none;
    position: absolute
}

.page-number-basic, .pagination .next, .pagination .page-number, .pagination .prev, .pagination .space {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin: 0;
    background-color: rgba(255, 255, 255, .5);
    transition: .2s
}

.pagination {
    text-align: center
}

.pagination .next, .pagination .page-number, .pagination .prev, .pagination .space {
    color: var(--hty-text-color) !important;
    text-decoration: none
}

.pagination .next:hover, .pagination .page-number:hover, .pagination .prev:hover, .pagination .space:hover {
    font-weight: 400;
    color: var(--hty-bg-color) !important;
    background: rgba(0, 120, 231, .7)
}

.pagination .next:active, .pagination .page-number:active, .pagination .prev:active, .pagination .space:active {
    color: var(--hty-bg-color) !important;
    background: rgba(32, 148, 255, .9)
}

.algolia-pagination .current .page-number, .pagination .next.current, .pagination .page-number.current, .pagination .prev.current, .pagination .space.current {
    font-weight: 400;
    background: rgba(32, 148, 255, .9);
    color: var(--hty-bg-color) !important;
    cursor: default
}

.post-block {
    margin: 0 1rem;
    padding: 1rem;
    background-color: var(--post-block-bg-color)
}

@media screen and (max-width: 768px) {
    .post-block {
        margin: 0;
        padding-top: 2.5rem
    }
}

.post-body {
    padding: 0 5rem
}

@media screen and (max-width: 1024px) {
    .post-body {
        padding: 0 .5rem
    }
}

@media screen and (max-width: 768px) {
    .post-body {
        padding: 0 .5rem
    }
}

.post-content {
    padding: 20px 0
}

.post-meta {
    font-size: 14px;
    color: var(--hty-secondary-text-color)
}

.post-meta .icon {
    margin-bottom: -1px
}

.post-description {
    font-weight: 400;
    padding: .5rem
}

.post-author {
    display: flex;
    justify-content: center
}

.post-author .author-avatar {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 0
}

.post-author .author-avatar img {
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    padding: 2px;
    border: 2px solid #d3d3d3
}

.post-author .author-name {
    margin-left: .5rem;
    font-size: 1rem
}

.post-meta-item-icon {
    display: inline-block;
    color: var(--text-color, --hty-secondary-text-color)
}

.post-meta-divider {
    height: 25px;
    color: var(--hty-secondary-text-color);
    margin: 0 .5rem
}

.post-eof {
    margin: 50px auto;
    width: 50%;
    height: 1px;
    background: #0078e7;
    opacity: .1
}

.post-copyright {
    font-size: .9rem;
    margin: 2rem 0;
    padding: .5rem 1rem;
    border-left: 3px solid #ff5252;
    background-color: var(--hty-bg-color);
    list-style: none;
    word-break: break-all
}

.tag-name {
    padding: 0 .1rem
}

.hty-button {
    font-family: Roboto, sans-serif;
    background-color: transparent;
    margin: 0 1rem;
    padding: 0 .5rem;
    border-radius: 2px;
    color: #0078e7;
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    min-height: 2rem;
    min-width: 4rem;
    outline: 0;
    line-height: 2;
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .09rem;
    -webkit-font-smoothing: antialiased
}

.hty-button:hover {
    background-color: rgba(0, 120, 231, .05)
}

.hty-button--raised {
    background-color: var(--hty-primary-color, #0078e7);
    box-shadow: 0 2px 10px -1px rgba(0, 0, 0, .3);
    color: #fff
}

.hty-button--raised:focus {
    color: #eee
}

.hty-button--raised:hover {
    color: #fff;
    background-color: rgba(0, 120, 231, .9)
}

.hty-icon-button {
    display: inline-flex;
    border: none;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s
}

.hty-icon-button:hover {
    background-color: rgba(0, 120, 231, .1)
}

.hty-icon-button:active {
    background-color: rgba(0, 120, 231, .3)
}

.button-glow {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: glowing;
    animation-direction: alternate
}

@-moz-keyframes glowing {
    from {
        box-shadow: 0 0 0 transparent
    }
    to {
        box-shadow: 0 0 20px rgba(0, 120, 231, .3)
    }
}

@-webkit-keyframes glowing {
    from {
        box-shadow: 0 0 0 transparent
    }
    to {
        box-shadow: 0 0 20px rgba(0, 120, 231, .3)
    }
}

@-o-keyframes glowing {
    from {
        box-shadow: 0 0 0 transparent
    }
    to {
        box-shadow: 0 0 20px rgba(0, 120, 231, .3)
    }
}

@keyframes glowing {
    from {
        box-shadow: 0 0 0 transparent
    }
    to {
        box-shadow: 0 0 20px rgba(0, 120, 231, .3)
    }
}

.hty-card {
    position: relative;
    display: flex;
    margin: 1rem;
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s;
    flex-direction: column;
    box-sizing: border-box
}

.planet-menu {
    border-radius: 50%;
    border: 2px solid #000
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    border-radius: 2px;
    background-color: rgba(255, 255, 255, .1)
}

::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: rgba(0, 120, 231, .5)
}

::-webkit-scrollbar-thumb:window-inactive {
    background-color: rgba(0, 120, 231, .3)
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 120, 231, .7)
}

::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 120, 231, .9)
}

.iconfont {
    font-size: 1.2rem
}

.icon {
    width: 1rem;
    height: 1rem;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden
}

.fireworks {

    position: fixed;
    left: 0;
    top: 0;
    z-index: 11;
    pointer-events: none
}

.spinner {
    width: 60px;
    height: 60px;
    border: 1px solid #0078e7;
    margin: 100px auto;
    animation: rotateplane 1.2s infinite ease-in-out
}

@-moz-keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(0) rotateY(0)
    }
    50% {
        transform: perspective(120px) rotateX(-180deg) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg)
    }
}

@-webkit-keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(0) rotateY(0)
    }
    50% {
        transform: perspective(120px) rotateX(-180deg) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg)
    }
}

@-o-keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(0) rotateY(0)
    }
    50% {
        transform: perspective(120px) rotateX(-180deg) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg)
    }
}

@keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(0) rotateY(0)
    }
    50% {
        transform: perspective(120px) rotateX(-180deg) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg)
    }
}

.post-card {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s;
    background-color: rgba(255, 255, 255, .9);
    box-shadow: 0 0 10px rgba(255, 255, 255, .1)
}

.post-card:hover {
    box-shadow: 0 0 25px rgba(0, 0, 0, .05)
}

.post-card-header {
    padding-top: .5rem
}

.post-card-excerpt, .post-card-excerpt p {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left
}

.post-card-content {
    padding: .5rem 1rem
}

.post-card-title {
    margin: 0
}

.post-card__actions {
    display: flex;
    align-items: center;
    min-height: 3rem;
    border-top: 1px solid rgba(0, 120, 231, .05);
    padding-left: 1rem;
    padding-right: 1rem;
    justify-content: space-between
}

.post-card__actions .icon {
    margin-bottom: -1px
}

.post-card-tag {
    display: inline-flex;
    justify-content: flex-end
}

.category, .tag {
    font-size: .8rem;
    position: relative;
    color: var(--text-color, #000);
    letter-spacing: 1px
}

.category::before, .tag::before {
    content: '';
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 0;
    right: 0;
    background: rgba(0, 120, 231, .08);
    border-radius: 4px;
    transition: width .2s ease
}

.category:hover::before, .tag:hover::before {
    width: 104%;
    left: -2%
}

.category .icon, .tag .icon {
    width: .8rem;
    height: .8rem;
    padding-left: .1rem
}

.post-top-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #f2711c
}

.post-top-icon .icon {
    width: 1.5rem;
    height: 1.5rem
}

pre[class*=language-] {
    position: relative
}

pre[class*=language-]:hover .copy-btn {
    opacity: 1
}

.copy-btn {
    position: absolute;
    opacity: 0;
    color: grey;
    cursor: pointer;
    line-height: 1.5;
    padding: 1px 4px;
    transition: opacity .2s;
    top: 2px;
    right: 2px;
    border-radius: 4px
}

.copy-btn:hover {
    background-color: rgba(255, 255, 255, .1)
}

.post-collapse {
    position: relative;
    margin: 0 5rem 2rem 5rem
}

@media screen and (max-width: 1024px) {
    .post-collapse {
        margin: 0 2rem 1rem 2rem
    }
    /*聊天室相关*/
    .chat-room-hide {
        bottom: 6rem!important;
    }

    .chat-room-show svg {
        bottom: 7.5rem!important;
    }
}

@media screen and (max-width: 768px) {
    .post-collapse {
        margin: 0 1rem .5rem 1rem
    }
}

.post-collapse-title {
    font-size: 2rem;
    text-align: center
}

.post-collapse .collection-title {
    position: relative;
    margin: 0;
    border-bottom: 2px solid rgba(0, 120, 231, .6)
}

.post-collapse .collection-title::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 2px;
    height: 50%;
    background: rgba(0, 120, 231, .3)
}

.post-collapse .collection-title .archive-year {
    font-family: 'Source Code Pro', Consolas, Monaco, SFMono-Regular, 'Ubuntu Mono', Menlo, monospace;
    color: #0078e7;
    margin: 0 1.5rem
}

.post-collapse .collection-title .archive-year::before {
    content: '';
    position: absolute;
    left: 0;
    top: 35%;
    margin-left: -11px;
    margin-top: -4px;
    width: 1.5rem;
    height: 1.5rem;
    background: #0078e7;
    border-radius: 50%
}

.post-collapse .post-item {
    position: relative
}

.post-collapse .post-item::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    background: rgba(0, 120, 231, .3)
}

.post-collapse .post-header {
    position: relative;
    border-bottom: 2px solid rgba(0, 120, 231, .3);
    display: flex
}

.post-collapse .post-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.6rem;
    width: .5rem;
    height: .5rem;
    margin-left: -4px;
    border-radius: 50%;
    border: 1px solid #0078e7;
    background-color: #fff;
    z-index: 1;
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s;
    transition-property: background
}

.post-collapse .post-header:hover::before {
    background: #0078e7
}

.post-collapse .post-header .post-title {
    margin-left: .1rem;
    padding: 0;
    font-size: 1rem;
    display: inline-flex;
    align-items: center
}

.post-collapse .post-header .post-title .post-title-link .icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: .3rem
}

.post-collapse .post-header .post-meta {
    font-family: 'Source Code Pro', Consolas, Monaco, SFMono-Regular, 'Ubuntu Mono', Menlo, monospace;
    font-size: 1rem;
    margin: 1rem 0 1rem 1.2rem;
    white-space: nowrap
}

.last-word {
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0
}

.post-header {
    position: relative;
    text-align: center
}

.post-header .post-title {
    margin: 0;
    padding: 10px;
    font-size: 1.5rem;
    font-weight: 900;
    font-family: 'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif
}

.post-header .post-title .icon {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: .3rem
}

.post-header .post-title .post-title-link {
    position: relative;
    padding: .7rem 1.2rem
}

.post-header .post-title .post-title-link .icon {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: .4rem
}

.post-header .post-title .post-title-link::after, .post-header .post-title .post-title-link::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    border: 2px solid;
    transition: .3s;
    transition-timing-function: cubic-bezier(.17, .67, .05, 1.29)
}

.post-header .post-title .post-title-link::before {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
    transform: translate3d(10px, 10px, 0)
}

.post-header .post-title .post-title-link::after {
    right: 0;
    bottom: 0;
    border-width: 0 2px 2px 0;
    transform: translate3d(-10px, -10px, 0)
}

.post-header .post-title .post-title-link:hover::after, .post-header .post-title .post-title-link:hover::before {
    opacity: 1;
    transform: translate3d(0, 0, 0)
}

.post-edit-link {
    padding: 0 .2rem;
    color: #999
}

.post-edit-link .icon {
    width: 1.5rem;
    height: 1.5rem
}

.markdown-body {
    color: var(--hty-text-color);
    font-weight: 400;
    font-family: 'PingFang SC', 'Microsoft YaHei', Roboto, Arial, sans-serif
}

.markdown-body code, .markdown-body pre {
    font-family: 'Source Code Pro', Consolas, Monaco, SFMono-Regular, 'Ubuntu Mono', Menlo, monospace
}

.post-nav {
    display: flex;
    justify-content: space-between;
    margin: 0 1rem
}

@media screen and (max-width: 768px) {
    .post-nav {
        margin: 0
    }
}

.post-nav-item {
    display: inline-block;
    outline: 0;
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    height: 3rem;
    line-height: 2.9rem;
    transition: .4s
}

.post-nav-item:hover {
    background-color: rgba(0, 120, 231, .1)
}

.post-nav-prev {
    padding-right: .5rem
}

.post-nav-next {
    padding-left: .5rem
}

.post-nav-next, .post-nav-prev {
    display: inline-flex;
    align-items: center;
    color: var(--smc-link-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s
}

@media screen and (max-width: 768px) {
    .post-nav-next, .post-nav-prev {
        max-width: 10rem
    }
}

.post-nav-next:active, .post-nav-prev:active {
    color: #fff
}

.post-nav-next .icon, .post-nav-prev .icon {
    width: 1.5rem;
    height: 1.5rem
}

.post-nav-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

#reward-container {
    padding: 10px 0;
    margin: 20px auto;
    width: 90%;
    text-align: center
}

#reward-button {
    display: inline-block;
    text-align: center;
    padding: .5rem;
    color: #df667f;
    border-radius: 100%;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center
}

#reward-button .icon {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: top;
    margin-top: -.05rem
}

#reward-comment {
    margin-top: .5rem
}

#qr img {
    width: 10rem;
    height: 10rem;
    display: inline-block;
    margin: 1rem 1rem 0 1rem;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s;
    box-shadow: 0 0 2px rgba(0, 0, 0, .2)
}

#qr img:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, .1)
}

#qr .icon {
    width: 1.5rem;
    height: 1.5rem
}

.hamburger {
    padding: 0 0;
    display: inline-block;
    transition-property: opacity, filter;
    transition-duration: .15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible
}

.hamburger:hover {
    opacity: .7
}

.hamburger.is-active:hover {
    opacity: .7
}

.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::after, .hamburger.is-active .hamburger-inner::before {
    background-color: #0078e7
}

.hamburger-box {
    outline: 0;
    width: 25px;
    height: 18px;
    display: inline-block;
    position: relative
}

.hamburger-inner {
    display: block;
    top: 50%
}

.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
    width: 25px;
    height: 2px;
    background-color: #0078e7;
    border-radius: 3px;
    position: absolute
}

.hamburger-inner::after, .hamburger-inner::before {
    content: '';
    display: block
}

.hamburger-inner::before {
    top: -8px
}

.hamburger-inner::after {
    bottom: -8px
}

.hamburger--spin .hamburger-inner {
    transition-duration: .22s;
    transition-timing-function: cubic-bezier(.55, .055, .675, .19)
}

.hamburger--spin .hamburger-inner::before {
    transition: top .1s .25s ease-in, opacity .1s ease-in
}

.hamburger--spin .hamburger-inner::after {
    transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19)
}

.hamburger--spin.is-active .hamburger-inner {
    transform: rotate(225deg);
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1)
}

.hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top .1s ease-out, opacity .1s .12s ease-out
}

.hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1)
}

.sidebar-nav {
    padding-left: 0;
    margin-top: 1rem;
    margin-bottom: 0
}

.sidebar-nav .sidebar-nav-item {
    border: 1px solid #0078e7;
    color: #0078e7;
    margin: 0 1.25rem
}

.sidebar-nav .sidebar-nav-item:hover {
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s;
    background-color: #0078e7;
    color: #fff
}

.sidebar-nav .sidebar-nav-item .icon {
    width: 1.5rem;
    height: 1.5rem
}

.sidebar-nav .sidebar-nav-active {
    background-color: #0078e7;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 120, 231, .2)
}

.post-toc {
    line-height: 1.8;
    padding: 1rem;
    font-size: 1.1rem;
    font-family: 'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif
}

.post-toc ol {
    list-style: none;
    text-align: left;
    padding-left: 1rem;
    margin: 0
}

.post-toc ol .toc-link {
    color: var(--smc-link-color)
}

.post-toc ol .toc-link:hover {
    color: #db2828
}

.post-toc ol .toc-number {
    font-family: 'Source Code Pro', Consolas, Monaco, SFMono-Regular, 'Ubuntu Mono', Menlo, monospace
}

.post-toc ol .toc-child {
    font-size: 1rem;
    overflow: hidden;
    transition: max-height .6s ease-in;
    max-height: 0
}

.post-toc ol .toc-item.active > .toc-link {
    color: #f2711c;
    border-bottom: 1px solid #f2711c
}

.post-toc ol .toc-item.active > .toc-child {
    max-height: 1000px
}

#menu-btn {
    display: none;
    position: fixed;
    left: .8rem;
    top: .6rem;
    line-height: 1;
    z-index: 20;
    cursor: pointer
}

@media screen and (max-width: 768px) {
    #menu-btn {
        display: flex
    }
}

.is-home #menu-btn {
    display: flex
}

.is-home .sidebar {
    left: -20rem;
    transform: translateX(0);
    visibility: hidden
}

.is-home .sidebar-translate {
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s;
    padding-left: 0
}

.is-home .sidebar-open .sidebar {
    transform: translateX(20rem);
    visibility: visible
}

.is-home .sidebar-open .sidebar-translate {
    padding-left: 20rem
}

@media screen and (max-width: 768px) {
    .is-home .sidebar-open .sidebar-translate {
        padding-left: 0
    }
}

.sidebar {
    position: fixed;
    overflow-y: auto;
    top: 0;
    bottom: 0;
    left: 0;
    width: 20rem;
    background-color: #fff;
    background-image: url(../image/alpha-stars-timing-1.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom 1rem center;
    text-align: center;
    z-index: 10;
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s;
    box-shadow: 0 0 2px rgba(0, 0, 0, .2)
}

.sidebar:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, .1)
}

@media screen and (max-width: 768px) {
    .sidebar {
        left: -20rem;
        transform: translateX(0)
    }
}

.sidebar-translate {
    padding-left: 20rem
}

@media screen and (max-width: 768px) {
    .sidebar-translate {
        padding-left: 0
    }
}

.sidebar .sidebar-panel {
    padding: .5rem;
    display: none
}

.sidebar .sidebar-panel-active {
    display: block
}

.sidebar .links {
    display: block
}

.sidebar .links-item {
    display: inline-flex
}

.sidebar .links-item .icon {
    width: 2rem;
    height: 2rem
}

.sidebar .links-of-author {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.sidebar .links-of-author .icon {
    width: 1.5rem;
    height: 1.5rem
}

.sidebar .links-of-author-item {
    line-height: 1;
    font-size: .9rem
}

@media screen and (max-width: 768px) {
    .sidebar-open .sidebar {
        transform: translateX(20rem);
        visibility: visible
    }

    .sidebar-open .sidebar-overlay {
        background-color: rgba(0, 0, 0, .3);
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: 9;
        transition: .4s
    }
}

#site-overview-wrap {
    padding-top: 2rem
}

.site-info.fix-top {
    margin-top: -1.5rem
}

.site-author-avatar {
    display: inline-block;
    line-height: 0;
    position: relative
}

.site-author-avatar img {
    height: 96px;
    width: 96px;
    max-width: 100%;
    margin: 0;
    padding: 4px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    transition: .4s
}

.site-author-avatar img:hover {
    box-shadow: 0 0 30px rgba(0, 120, 231, .2)
}

.site-author-avatar img {
    border-radius: 50%
}

.site-author-name {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.5
}

.site-author-status {
    position: absolute;
    height: 1.8rem;
    width: 1.8rem;
    bottom: 0;
    right: 0;
    line-height: 1.8rem;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    background-color: #fff
}

.site-name {
    color: var(--hty-text-color);
    font-family: 'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif;
    font-weight: 900
}

.site-subtitle {
    color: #999;
    display: block
}

.site-desciption {
    color: var(--hty-secondary-text-color);
    font-size: .8rem
}

.site-state {
    display: flex;
    justify-content: center;
    overflow: hidden;
    line-height: 1.5;
    white-space: nowrap;
    text-align: center;
    margin-top: 1rem
}

.site-state-item {
    display: flex;
    padding: 0 15px;
    align-items: center;
    border-left: 1px solid #999
}

.site-state-item:first-child, .site-state-item:last-child {
    line-height: 1;
    padding: 0
}

.site-state-item:first-child {
    border-left: none;
    border-right: 1px solid #999
}

.site-state-item:last-child {
    border-left: 1px solid #999
}

.site-state-item:nth-child(2) {
    border: none
}

.site-state-item-icon {
    color: var(--hty-text-color);
    line-height: 1
}

.site-state-item-icon .icon {
    width: 1.5rem;
    height: 1.5rem
}

.site-state-item-count {
    color: var(--hty-text-color);
    display: block;
    text-align: center;
    font-size: 1rem
}

#goUp {
    position: relative;
    position: fixed;
    right: -.9rem;
    bottom: 1.1rem;
    z-index: 20;
    opacity: 0;
    color: #0078e7;
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s
}

#goUp.show {
    transform: translateX(-30px) rotate(360deg);
    opacity: 1
}

#goUp .icon {
    width: 2.5rem;
    height: 2.5rem
}

.progress-circle {
    transition: .3s stroke-dashoffset;
    transform: rotate(-90deg);
    transform-origin: 50% 50%
}

.progress-circle-container {
    position: absolute
}

.ais-SearchBox {
    margin: 0 auto;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important
}

.ais-SearchBox-input {
    padding: .2rem;
    outline: 0;
    font-size: 1.2rem;
    width: 100%;
    border: none;
    padding-left: 0;
    line-height: 1
}

.algolia-powered {
    float: right
}

.algolia-powered img {
    display: inline-block;
    height: 1.2rem;
    vertical-align: middle
}

.algolia-results {
    position: relative;
    overflow: auto;
    padding: 10px 30px;
    height: calc(100% - 150px)
}

.algolia-results hr {
    margin-top: 10px;
    margin-bottom: 0
}

.algolia-hit-item {
    display: flex;
    justify-content: center
}

.algolia-hit-item-link {
    display: block;
    width: 100%;
    padding: .5rem;
    border-bottom: 1px dashed #ccc;
    font-family: 'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif;
    font-weight: 700;
    font-size: 1.2rem;
    max-width: 800px;
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s
}

.algolia-hit-item-link mark {
    color: #db2828;
    font-family: 900;
    background-color: transparent;
    text-decoration: underline
}

.algolia-pagination .ais-Pagination-list {
    padding-inline-start: 0
}

.algolia-pagination .pagination-item {
    display: inline-block;
    list-style-type: none
}

.algolia-pagination .page-number {
    border-top: none
}

.algolia-pagination .current .page-number {
    background-color: var(--hty-text-color) !important
}

.algolia-pagination .disabled-item {
    display: none
}

.ais-Hits-list {
    margin: 0;
    list-style-type: none;
    padding-inline-start: 0
}

.search-popup {
    background: hsla(0, 0%, 100%, 0.89);
    /*backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);*/
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 4.5rem;
    margin: 0;
    opacity: 0;
    z-index: 30;
    transition: .6s;
    visibility: hidden
}

.search-popup.show {
    visibility: visible;
    opacity: 1
}

.search-header .close-icon {
    position: fixed;
    top: .6rem;
    right: .8rem
}

.search-input {
    background: 0 0;
    color: var(--hty-text-color);
    font-size: 1.5rem;
    border-radius: 3rem;
    padding: 1rem 1.5rem;
    border: 1px solid #999;
    box-sizing: border-box;
    width: 90%;
    max-width: 800px;
    font-family: 'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif;
    font-weight: 900;
    text-align: center
}

.popup .close-icon, .popup .search-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    padding: .5rem
}

.popup .close-icon .icon, .popup .search-icon .icon {
    width: 2rem;
    height: 2rem
}

#search {
    position: fixed;
    top: .6rem;
    right: .8rem
}

#search .icon {
    color: #0078e7
}

#comment {
    margin: 0 1rem;
    padding: 1rem;
    background-color: var(--post-block-bg-color)
}

@media screen and (max-width: 768px) {
    #comment {
        margin: 0
    }
}

.comment-tooltip {
    font-size: .8rem;
    color: var(--hty-text-color)
}

#github-issues {
    margin: 1rem
}

.v[data-class=v] p {
    color: var(--hty-text-color) !important
}

.v[data-class=v] p code {
    color: #000
}

#say {
    color: var(--hty-text-color);
    display: block;
    text-align: center;
    font-family: 'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif;
    font-weight: 700;
    padding: .5rem;
    border-top: 1px solid var(--hty-secondary-text-color);
    border-bottom: 1px solid var(--hty-secondary-text-color)
}

#say #say-content {
    display: block
}

#say #say-from {
    display: block
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-mode: 'dark'
    }

    :root:not([data-user-color-scheme]) {
        --hty-bg-color: #303030;
        --hty-text-color: #f2f2f2;
        --hty-secondary-text-color: #eee;
        --banner-line-color: #fff;
        --banner-char-color: #fff;
        --post-block-bg-color: #1b1f2e;
        --smc-link-color: #3ca1ff
    }

    :root:not([data-user-color-scheme]) ::-webkit-input-placeholder {
        color: #fff
    }

    :root:not([data-user-color-scheme]) body {
        color: var(--hty-text-color)
    }

    :root:not([data-user-color-scheme]) body::before {
        background-image: url(../image/galaxy.jpg)
    }

    :root:not([data-user-color-scheme]) .char {
        background-color: rgba(0, 0, 0, .5)
    }

    :root:not([data-user-color-scheme]) .char:hover {
        color: #000;
        background-color: var(--banner-char-color)
    }

    :root:not([data-user-color-scheme]) .sidebar {
        background-color: rgba(27, 31, 46, .95);
        background-image: none
    }

    :root:not([data-user-color-scheme]) .post-title-link {
        color: #3ca1ff
    }

    :root:not([data-user-color-scheme]) .post-card {
        color: #fff;
        background-color: rgba(27, 31, 46, .9);
        box-shadow: 0 1px 8px rgba(27, 31, 46, .1)
    }

    :root:not([data-user-color-scheme]) .post-block {
        color: var(--hty-text-color);
        background-color: rgba(27, 31, 46, .95)
    }

    :root:not([data-user-color-scheme]) .page-number-basic {
        background-color: rgba(0, 0, 0, .5)
    }

    :root:not([data-user-color-scheme]) .pagination .next, :root:not([data-user-color-scheme]) .pagination .page-number, :root:not([data-user-color-scheme]) .pagination .prev, :root:not([data-user-color-scheme]) .pagination .space {
        background-color: rgba(0, 0, 0, .5)
    }

    :root:not([data-user-color-scheme]) .pagination .next:hover, :root:not([data-user-color-scheme]) .pagination .page-number:hover, :root:not([data-user-color-scheme]) .pagination .prev:hover, :root:not([data-user-color-scheme]) .pagination .space:hover {
        background: rgba(199, 228, 255, .9)
    }

    :root:not([data-user-color-scheme]) .pagination .next:active, :root:not([data-user-color-scheme]) .pagination .page-number:active, :root:not([data-user-color-scheme]) .pagination .prev:active, :root:not([data-user-color-scheme]) .pagination .space:active {
        background: #0078e7
    }

    :root:not([data-user-color-scheme]) .pagination .next.current, :root:not([data-user-color-scheme]) .pagination .page-number.current, :root:not([data-user-color-scheme]) .pagination .prev.current, :root:not([data-user-color-scheme]) .pagination .space.current {
        background: rgba(227, 242, 255, .9);
        cursor: default
    }

    :root:not([data-user-color-scheme]) #footer {
        color: #eee
    }

    :root:not([data-user-color-scheme]) .aplayer {
        color: #000
    }
}

[data-user-color-scheme=dark] {

    --hty-bg-color: #303030;
    --hty-text-color: #f2f2f2;
    --hty-secondary-text-color: #eee;
    --banner-line-color: #fff;
    --banner-char-color: #fff;
    --post-block-bg-color: #1b1f2e;
    --smc-link-color: #3ca1ff;
    --input-bg-color:#d2d2d2;
}

[data-user-color-scheme=dark] ::-webkit-input-placeholder {
    color: #fff
}

[data-user-color-scheme=dark] body {
    color: var(--hty-text-color)
}
[data-user-color-scheme=dark] h1 {
    color: #fff;
}

[data-user-color-scheme=dark] body::before {
    background-image: url(../image/galaxy.jpg)
}

[data-user-color-scheme=dark] .char {
    background-color: rgba(0, 0, 0, .5)
}

[data-user-color-scheme=dark] .char:hover {
    color: #000;
    background-color: var(--banner-char-color)
}

[data-user-color-scheme=dark] .sidebar {
    background-color: rgba(27, 31, 46, .95);
    background-image: none
}

[data-user-color-scheme=dark] .post-title-link {
    color: #3ca1ff
}

[data-user-color-scheme=dark] .post-card {
    color: #fff;
    background-color: rgba(27, 31, 46, .9);
    box-shadow: 0 1px 8px rgba(27, 31, 46, .1)
}

[data-user-color-scheme=dark] .post-block {
    color: var(--hty-text-color);
    background-color: rgba(27, 31, 46, .95)
}

[data-user-color-scheme=dark] .page-number-basic {
    background-color: rgba(0, 0, 0, .5)
}

[data-user-color-scheme=dark] .pagination .next, [data-user-color-scheme=dark] .pagination .page-number, [data-user-color-scheme=dark] .pagination .prev, [data-user-color-scheme=dark] .pagination .space {
    background-color: rgba(0, 0, 0, .5)
}

[data-user-color-scheme=dark] .pagination .next:hover, [data-user-color-scheme=dark] .pagination .page-number:hover, [data-user-color-scheme=dark] .pagination .prev:hover, [data-user-color-scheme=dark] .pagination .space:hover {
    background: rgba(199, 228, 255, .9)
}

[data-user-color-scheme=dark] .pagination .next:active, [data-user-color-scheme=dark] .pagination .page-number:active, [data-user-color-scheme=dark] .pagination .prev:active, [data-user-color-scheme=dark] .pagination .space:active {
    background: #0078e7
}

[data-user-color-scheme=dark] .pagination .next.current, [data-user-color-scheme=dark] .pagination .page-number.current, [data-user-color-scheme=dark] .pagination .prev.current, [data-user-color-scheme=dark] .pagination .space.current {
    background: rgba(227, 242, 255, .9);
    cursor: default
}

[data-user-color-scheme=dark] #footer {
    color: #eee
}

[data-user-color-scheme=dark] .aplayer {
    color: #000
}

.album-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.album-list-item {
    display: inline-flex
}

.album-list-item figure {
    position: relative;
    width: 15rem;
    margin: 2rem
}

.album-list-item figure::before {
    content: '';
    position: absolute;
    top: 1%;
    left: .5%;
    width: 100%;
    height: 96%;
    border: .25rem solid #fff;
    background-color: #666;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
    transform: rotate(-3deg)
}

.album-list-item figure img {
    vertical-align: bottom;
    display: inline-flex;
    border: .25rem solid #fff;
    box-shadow: 0 8px 10px rgba(0, 0, 0, .3);
    padding: 0;
    transform: rotate(2deg);
    width: 100%;
    height: 10rem;
    object-fit: cover;
    background-color: #eee
}

.album-list-item figure figcaption {
    position: absolute;
    bottom: -2.5rem;
    display: block;
    text-align: center;
    width: 100%
}

.photo-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.photo-list-item {
    display: inline-flex;
    position: relative;
    width: 15rem;
    margin: 1.5rem;
    cursor: url(https://cdn.jsdelivr.net/gh/YunYouJun/cdn/css/md-cursors/link.cur), pointer
}

.photo-list-item img {
    box-sizing: border-box;
    vertical-align: bottom;
    display: inline-flex;
    border: .25rem solid #fff;
    box-shadow: 0 8px 10px rgba(0, 0, 0, .1);
    width: 100%;
    height: 10rem;
    object-fit: cover;
    background-color: #eee
}

.photo-list-item figcaption {
    position: absolute;
    bottom: -1.8rem;
    display: block;
    text-align: center;
    width: 100%;
    font-size: .9rem
}

#decryptContainer {
    display: flex;
    height: 10rem;
    flex-direction: column;
    align-items: center;
    justify-content: space-around
}

#decrypt-password {
    outline: 0;
    font-size: 1.5rem;
    border-radius: 3rem;
    padding: .5rem 1.5rem;
    border: 1px solid #999;
    box-sizing: border-box;
    width: 90%;
    max-width: 800px;
    font-family: 'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif;
    font-weight: 900;
    text-align: center
}

#decryptButton {
    color: #0078e7;
    background-color: rgba(0, 120, 231, .08)
}

#decryptButton:active {
    background-color: rgba(0, 120, 231, .3)
}

#decryptButton .icon {
    width: 1.5rem;
    height: 1.5rem
}

#girls {
    text-align: center
}

.girls-number {
    color: #fff
}

.girl-items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-left: 0
}

.girl-item {
    display: inline-flex;
    text-align: center;
    justify-content: center;
    width: 8rem;
    margin: 1rem
}

.girl-item .girl-info {
    width: 100%;
    padding: 0;
    margin: 0
}

.girl-item .girl-avatar {
    object-fit: cover;
    object-position: center top;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    padding: .2rem;
    background-color: #fff;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .12);
    transition: .5s
}

.girl-item .girl-avatar:hover {
    box-shadow: 0 0 2rem rgba(0, 0, 0, .12)
}

.girl-item .girl-name {
    font-size: .9rem
}

.girl-item .girl-from {
    font-size: 12px;
    font-family: 'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif;
    font-weight: 700;
    color: var(--hty-secondary-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.girl-item .girl-from::before {
    content: '「'
}

.girl-item .girl-from::after {
    content: '」'
}