@charset "utf-8";

.page .site-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--thyuu--size-medium);
    gap: .5em;
    padding-block: var(--thyuu--size-edgelr);
    color: white;
    text-shadow: 0.1em 0.1em 0.5em hsl(0deg 0% 0% / 20%);
    background: var(--custom-rand-bg) 50% / cover;
}

/* =朋友页面
-------------------------------------------------------------- */
.page-template-friends :where(.link-name, .link-des, .rss-name) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-transform: capitalize;
    word-break: break-all;
}

/* 列表 */
.page-template-friends .linkcat {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: none;
}

.page-template-friends .link-items {
    display: grid;
    margin: 0;
    gap: var(--thyuu--size-divs);
    grid: auto / repeat(auto-fill, minmax(min(var(--thyuu--size-card-normal), 100%), 1fr));
}

.page-template-friends .link-item {
    --plant-rgb: 100 100 100;
    --plant-rgb-sub: 144 144 144;
    position: relative;
    font-size: var(--thyuu--size-small);
    background: var(--thyuu--color-back-white);
    border-radius: var(--thyuu--size-radius);
    box-shadow: var(--thyuu--shadow-white);
    transition: .5s;
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
    overflow: hidden;
}

.page-template-friends .link-item[rating="10"] {
    --plant-fc: white;
    --plant-rgb: 238 66 20;
    --plant-rgb-sub: 296 144 43;
}

.page-template-friends .link-item[rating="9"] {
    --plant-fc: white;
    --plant-rgb: 221 144 43;
    --plant-rgb-sub: 214 144 65;
}

.page-template-friends .link-item[rating="8"] {
    --plant-fc: white;
    --plant-rgb: 221 144 43;
    --plant-rgb-sub: 114 17 13;
}

.page-template-friends .link-item[rating="7"] {
    --plant-fc: white;
    --plant-rgb: 224 72 49;
    --plant-rgb-sub: 147 30 25;
}

.page-template-friends .link-item:is([rating="5"], [rating="6"]) {
    --plant-fc: rgb(0 60 0);
    --plant-rgb: 125 193 202;
    --plant-rgb-sub: 193 199 93;
}

.page-template-friends .link-item:is([rating="3"], [rating="4"]) {
    --plant-fc: rgb(0 50 70);
    --plant-rgb: 146 190 192;
    --plant-rgb-sub: 107 154 177;
}

.page-template-friends .link-item:is([rating="1"], [rating="2"]) {
    --plant-fc: rgb(0 30 70);
    --plant-rgb: 154 184 222;
    --plant-rgb-sub: 98 128 153;
}

.page-template-friends .link-item:hover {
    z-index: 2;
    box-shadow: var(--thyuu--shadow-normal), 0 2rem 2rem -2rem rgb(var(--plant-rgb-sub) / .2);
}

.page-template-friends .link-item:active {
    scale: .98;
}

.page-template-friends .link-card {
    --avatar-size: 2rem;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin: 1rem;
    gap: 2em 1em;
}

.page-template-friends :where(.link-item .avatar, .rss-item .avatar) {
    flex: none;
    transition: all .5s;
    background: white;
    box-shadow: 0 0 15px 0px rgb(0 0 0 / 10%);
    box-shadow: 0 0 5rem .5rem rgb(var(--plant-rgb) / .4), 0 0.5rem 1rem 0rem rgb(var(--plant-rgb-sub) / .2);
    outline: .2rem solid rgb(var(--plant-rgb) / .1);
}

.page-template-friends .link-des {
    word-break: break-all;
    overflow-wrap: anywhere;
    opacity: .5;
}

.page-template-friends .link-nav span {
    font-size: var(--thyuu--size-small);
    color: hsl(var(--thyuu--color-font) / .5);
    background: var(--thyuu--color-back-white);
    border-radius: 1em;
    box-shadow: var(--thyuu--shadow-white);
    padding: 1em;
    line-height: 1;
}

.page-template-friends .link-info {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1em;
    transform-origin: right;
    transition: .3s;
}

.page-template-friends .link-bg {
    width: 100%;
    height: 100%;
    object-position: top left;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: .5s;
    filter: opacity(0) !important;
    transform: translateY(1rem);
    border-radius: var(--thyuu--size-radius);
    border: .2rem solid rgb(var(--plant-rgb) / .15);
    background: var(--thyuu--color-back-white);
}

.page-template-friends .note-time {
    flex: none;
    --plant-bg-lg: linear-gradient(135deg, rgb(var(--plant-rgb) / .7), rgb(var(--plant-rgb-sub) / .7));
    background: var(--plant-bg-lg, var(--plant-fc, hsl(var(--thyuu--color-font) / .4)));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-align: right;
}

.page-template-friends .link-edit {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.page-template-friends .link-edit a {
    font-family: thyuu-iconfont;
    font-size: var(--thyuu--size-icon);
    line-height: var(--thyuu--size-icon);
    color: rgb(var(--plant-rgb-sub) / .2);
    background: none !important;
}

.page-template-friends .link-rss {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1em;
    padding: 1em;
    transition: .3s;
}

.page-template-friends .link-item:hover .link-bg {
    transform: none;
    filter: none !important;
}

.page-template-friends .link-bg:hover {
    width: 100%;
    border-color: rgb(var(--plant-rgb) / .5);
}

.page-template-friends .link-item:hover .link-info {
    opacity: 0;
    transform: translateY(-1rem);
    z-index: -1;
}

.page-template-friends .rss-list {
    position: relative;
    padding: 0 0 0 1.5em;
    color: hsl(var(--thyuu--color-font) / .5);
    max-height: 100%;
    overflow: hidden;
    word-break: break-all;
    transition: .3s;
}

.page-template-friends .rss-list:hover {
    color: rgb(var(--plant-rgb));
}

.page-template-friends .rss-list::before {
    opacity: .15;
    content: "";
    position: absolute;
    width: .4em;
    height: calc(100% - .5em);
    inset: 0 auto 0 0;
    margin: auto;
    border-radius: .4em;
    background: linear-gradient(135deg, rgb(var(--plant-rgb)), rgb(var(--plant-rgb-sub)));
    transition: .5s;
}

.page-template-friends .rss-list:hover::before {
    opacity: .5;
}

.page-template-friends #org :is(.link-rss, .note-time) {
    display: none;
}

/* 列表2 */
.page-template-friends .friend-rss {
    animation: var(--animation);
    animation-delay: .7s;
}

.page-template-friends .rss-items {
    display: grid;
    gap: 1em;
    grid: auto / repeat(auto-fill, minmax(min(var(--thyuu--size-card-normal), 100%), 1fr));
    margin: 0;
}

.page-template-friends .no-rss-item,
.rss-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5em;
    background: var(--thyuu--color-back-white);
    border-radius: var(--thyuu--size-radius);
    overflow: hidden;
    box-shadow: var(--thyuu--shadow-white);
    padding: var(--thyuu--size-span);
}

.page-template-friends .rss-card {
    word-break: break-all;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.page-template-friends .rss-des {
    color: hsl(var(--thyuu--color-font) / .5);
    font-size: var(--thyuu--size-small);
}

.page-template-friends .rss-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0 .5em;
    justify-content: space-between;
    font-size: var(--thyuu--size-small);
}

.page-template-friends .rss-item .rss-date span {
    display: inline-block;
    background: var(--thyuu--color-back-font);
    padding: .5em;
    line-height: 1;
    border-radius: var(--thyuu--size-radius);
    font-size: var(--thyuu--size-small);
}

.page-template-friends .rss-item .rss-avatar {
    display: flex;
    gap: .5em;
}

.page-template-friends .rss-item:hover .avatar {
    scale: .9;
}

.page-template-friends #add {
    display: grid;
    grid: auto / 1fr;
    width: 100%;
    place-items: start;
    gap: 1rem;
    background: radial-gradient(circle at 25% 65%, hsl(var(--thyuu--main-color) / .2), #0000 25%) no-repeat fixed, radial-gradient(circle at 75% 35%, hsl(var(--thyuu--subs-color) / .2), #0000 25%) no-repeat fixed, var(--thyuu--color-back-have);
    overflow: auto;
}

.page-template-friends .my-ask {
    width: 100%;
    max-width: 60em;
    align-self: center;
}

.page-template-friends .my-info {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page-template-friends .my-info ul {
    display: flex;
    flex-flow: column;
    gap: .5em;
    margin: 0 0 0 1rem;
}

.page-template-friends .my-info li {
    position: relative;
    transition: .3s;
}

.page-template-friends .my-info li:hover {
    color: hsl(var(--thyuu--main-color) / .7);
}

.page-template-friends .my-info li::before {
    content: "";
    width: 6px;
    height: 150%;
    background: linear-gradient(180deg, #0000, hsl(var(--thyuu--main-color) / 20%), #0000) no-repeat center / 2px 100%, radial-gradient(circle, hsl(var(--thyuu--main-color) / 70%) 50%, #0000 50%) no-repeat center / 6px 6px;
    position: absolute;
    top: 0;
    left: -1rem;
    bottom: 0;
    margin: auto;
    transition: .5s;
}

.page-template-friends .my-info em {
    margin: 0 0 0 .5em;
    padding: .75em;
}

.page-template-friends .friend-order,
.friend-form {
    margin: 1em 0 0;
}

.page-template-friends .friend-form ul {
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
    gap: 1em;
}

.page-template-friends .friend-form em,
.wpcf7-not-valid-tip {
    color: hsl(var(--thyuu--main-color));
    margin: .5em;
    font-size: var(--thyuu--size-small);
    vertical-align: middle;
    display: inline-block;
}

.page-template-friends .friend-form ul em {
    display: block;
    margin: .5em 0 0;
    color: hsl(var(--thyuu--color-font) / .5);
}

.page-template-friends .wpcf7-list-item {
    font-size: var(--thyuu--size-medium);
    margin: 0 2em 0 0;
}

.page-template-friends .wpcf7 form .wpcf7-response-output {
    margin-inline: 0;
    border-radius: var(--thyuu--size-radius);
}

.page-template-friends button.close {
    position: sticky;
    inset: auto auto 0 0;
}

@media (min-width: 1152px) {
    .page-template-friends .link-card {
        flex-direction: column;
        align-items: flex-start;
        padding-inline: .5rem;
    }

    .page-template-friends .link-card:hover+.link-rss {
        opacity: 0;
        transform: translateX(1rem);
    }

    .page-template-friends .note-time {
        text-align: left;
    }

    .page-template-friends .link-bg,
    .page-template-friends .link-info {
        width: 50%;
    }

    .page-template-friends .link-rss {
        position: absolute;
        width: 50%;
        inset: 0 0 0 auto;
    }

    .page-template-friends #add {
        grid: auto / 1fr 2fr;
    }

    .page-template-friends .my-info {
        position: sticky;
        top: 0;
        height: calc(100vh - var(--thyuu--size-edgetb)* 2);
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .page-template-friends .rss-list {
        display: flex;
        gap: 1em;
    }
}

/* =文档页面
-------------------------------------------------------------- */
@media (min-width: 1152px) {
    .page-template-doc .site-main {
        position: relative;
        width: 55%;
        animation: board-entryBG 2s cubic-bezier(.62, .21, .25, 1) 1s backwards
    }

    .page-template-doc .site-header {
        position: fixed;
        right: 0;
        width: 45%;
        top: 0;
        margin: 0;
        border-radius: 0;
        height: 100%;
        animation: board-siteBG 2s cubic-bezier(.62, .21, .25, 1) 1s backwards;
        box-shadow: inset rgb(0 0 0 / 50%) .5rem 0 1rem 0
    }

    .page-template-doc:not(.nav-fixed) .header-area .site-icon :not(.post-menu) {
        --thyuu--color-font-head: hsl(0deg 0% 100% / 75%);
        --thyuu--color-font-fill: hsl(0deg 0% 0% / 75%);
        --s-shadow: var(--thyuu--shadow-text)
    }

    @keyframes board-entryBG {
        0% {
            left: -60%
        }

        100% {
            left: 0
        }
    }

    @keyframes board-siteBG {
        0% {
            width: 100%
        }

        100% {
            width: 45%
        }
    }
}

/* =页面列表
-------------------------------------------------------------- */
.page-list li {
    background: var(--thyuu--color-back-white);
    box-shadow: var(--thyuu--shadow-white);
    position: relative;
    border-radius: var(--thyuu--size-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.page-list img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--thyuu--size-radius);
    vertical-align: middle
}

.page-list time {
    display: block;
    color: hsl(var(--thyuu--color-font) / .5);
    font-size: var(--thyuu--size-small);
}

.page-list .info {
    box-shadow: 0 10px 30px 0 rgb(0 0 0 / 5%);
    position: relative;
    border-radius: 0 0 250px var(--thyuu--size-radius)/0 0 50px var(--thyuu--size-radius);
    padding: 1em
}

.page-list .excerpt {
    --line-num: 2;
    font-size: var(--thyuu--size-medium);
    margin: 1em;
    opacity: .6
}

.page-list .button {
    position: absolute;
    right: 1.5em;
    bottom: 0
}

/* =走心评论页面
-------------------------------------------------------------- */
.mindful-bg {
    max-width: 1920px;
    position: fixed;
    top: 0;
    margin: 0 auto;
    height: 100%;
    z-index: -1;
    left: 0;
    right: 0
}

.mindful-bg3,
.mindful-bg4,
.mindful-bg2 {
    position: absolute;
    transform: rotate(35deg);
    z-index: -1;
    border-radius: 10%;
    background: #eee
}

.mindful-bg2 {
    left: -10vh;
    width: 80vh;
    height: 80vh;
    top: -20vh;
    animation: rotate 100s linear infinite;
    box-shadow: 0 0 10rem 1rem rgba(66, 189, 86, .1);
    background: rgba(66, 189, 86, .1)
}

.mindful-bg3 {
    width: 35vh;
    height: 35vh;
    bottom: -20vh;
    animation: rotate 120s linear infinite;
    box-shadow: 0 0 10rem 3rem rgba(35, 132, 232, .1);
    background: rgba(35, 132, 232, .1)
}

.mindful-bg4 {
    width: 40vh;
    height: 40vh;
    top: 5rem;
    right: -20vh;
    animation: rotate 160s linear infinite reverse;
    box-shadow: 0 0 10rem 3rem rgba(255, 105, 0, .1);
    background: rgba(255, 105, 0, .1)
}

.mindful-list li {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 2em;
    gap: 1em;
    background: var(--thyuu--color-back-shift, hsl(0deg 0% 100% / .8));
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: var(--thyuu--shadow-white);
    border-radius: var(--thyuu--size-radius);
    font-size: var(--thyuu--size-medium);
}

.mindful-list header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
}

.mindful-list article {
    text-align: justify;
    margin: -1em -2em 0;
    padding: 1em 2em;
    mask: var(--thyuu--mask-scroll-y);
    overflow: auto;
}

.mindful-list :where(time, footer) {
    color: hsl(var(--thyuu--color-font) / .5);
    font-size: var(--thyuu--size-small);
    padding: 0 0 0 1em;
    border-left: thin solid hsl(var(--thyuu--color-font) / .2);
    line-height: 1;
}

@media (min-width:1152px) {
    .mindful-list li {
        max-height: var(--thyuu--size-card-normal);
        transform: rotate(1deg) scale(.98);
        transform-origin: 0 0
    }

    .mindful-list li:is([rating="3"], [rating="4"]) {
        grid-column-end: span 2;
    }

    .mindful-list li:is([rating="5"]) {
        grid-column-end: span -1;
    }

    .mindful-list :is(li.fade-after, .thyuu-noone) {
        transform: none
    }
}

/* =留言页面
-------------------------------------------------------------- */
.page-template-board .bg-box {
    width: 100%;
    height: 80%;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 1s;
    background: var(--custom-rand-bg) 50% / cover;
    z-index: -1
}

.page-template-board .bg-box:after {
    content: var(--cover-mask, "");
    position: absolute;
    inset: 0;
    background: linear-gradient(#0000004d, #0000 var(--thyuu--size-edgetb), #0000);
    pointer-events: none;
}

.page-template-board .bg-box .media {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-template-board :where(.lines, .stars) {
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    aspect-ratio: 1
}

.page-template-board .lines {
    -webkit-mask: linear-gradient(180deg, #000c 10%, #0000 40%)
}

.page-template-board .line {
    width: 50%;
    background: hsl(var(--thyuu--main-color) / 5%);
    border: 1px solid hsl(var(--thyuu--main-color) / .3);
    aspect-ratio: 1;
    position: absolute;
    border-radius: 45%;
    animation: rotate 20s linear infinite
}

.page-template-board .line.l2 {
    width: 75%;
    animation-direction: alternate-reverse
}

.page-template-board .line.l3 {
    width: 100%
}

.page-template-board .stars {
    -webkit-mask: radial-gradient(50% 50% at 50% 50%, #0000 25%, #000 50%, #000c 75%, #0000 100%) 0 0/cover;
    animation: StarsRotate 25s linear infinite
}

.page-template-board .star {
    position: absolute;
    width: 3px;
    height: 3px;
    display: block;
    border-radius: 50%;
    background: hsl(var(--thyuu--main-color));
    transform: translateZ(0) var(--transform) scale(1);
    animation: StarsTwinkle var(--duration) linear infinite var(--delay)
}

.page-template-board .star:nth-child(2n) {
    opacity: .5;
}

.page-template-board .star:nth-child(4n+1) {
    --duration: 8s;
    --delay: .1s;
}

.page-template-board .star:nth-child(4n+2) {
    --duration: 7s;
    --delay: .2s;
}

.page-template-board .star:nth-child(4n+3) {
    --duration: 6s;
    --delay: .3s;
}

.page-template-board .star:nth-child(4n+4) {
    --duration: 5s;
    --delay: .4s;
}

.page-template-board .star.s1 {
    --transform: translate(0, -500px);
}

.page-template-board .star.s2 {
    --transform: translate(500px, -500px);
}

.page-template-board .star.s3 {
    --transform: translate(500px, 0);
}

.page-template-board .star.s4 {
    --transform: translate(500px, 500px);
}

.page-template-board .star.s5 {
    --transform: translate(0, 500px);
}

.page-template-board .star.s6 {
    --transform: translate(-500px, 500px);
}

.page-template-board .star.s7 {
    --transform: translate(-500px, 0);
}

.page-template-board .star.s8 {
    --transform: translate(-500px, -500px);
}

.page-template-board .star.s11 {
    --transform: translate(100px, -250px);
}

.page-template-board .star.s22 {
    --transform: translate(250px, -250px);
}

.page-template-board .star.s33 {
    --transform: translate(250px, 100px);
}

.page-template-board .star.s44 {
    --transform: translate(250px, 250px);
}

.page-template-board .star.s55 {
    --transform: translate(100px, 250px);
}

.page-template-board .star.s66 {
    --transform: translate(-250px, 250px);
}

.page-template-board .star.s77 {
    --transform: translate(-250px, 100px);
}

.page-template-board .star.s88 {
    --transform: translate(-250px, -250px);
}

.page-template-board .site-main {
    position: relative;
    z-index: 2;
    margin-top: 40vh;
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
    padding: var(--thyuu--size-edgelr);
    margin-bottom: calc(var(--thyuu--size-radius) * -1.5);
    padding-bottom: calc(var(--thyuu--size-edgelr) + var(--thyuu--size-radius));
    border-top: thin solid hsl(var(--thyuu--main-color) / .3);
    border-radius: 100vw 100vw 0 0 / var(--thyuu--size-radius);
    background: hsl(var(--thyuu--main-color) / .05);
}

[theme=light] .page-template-board .site-main {
    background: linear-gradient(hsl(0deg 0% 100% / .8), var(--thyuu--color-back-white) 50vh);
}

.page-template-board .site-main>* {
    width: min(var(--thyuu--size-content), 100%);
    margin-inline: auto
}

.page-template-board.nav-fixed .bg-box {
    filter: brightness(.3)
}

@supports (animation-timeline:view()) {
    .page-template-board .bg-box {
        transform: scale(1.1);
        animation: template-board-bg forwards;
        animation-timeline: view(block);
        animation-range: contain 0% 100%
    }

    @keyframes template-board-bg {
        to {
            transform: scale(1)
        }
    }
}

@media (min-width:1152px) {
    .page-template-board .bg-box {
        height: 100%
    }

    .page-template-board .site-main {
        margin-top: 50vh
    }
}

@keyframes StarsTwinkle {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    to {
        transform: translateZ(0) translate(0) scale(.5)
    }
}

@keyframes StarsRotate {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(-360deg)
    }
}


/* =归档页面
-------------------------------------------------------------- */
.page-template-archive .page-article {
    display: block;
    font-size: var(--thyuu--size-medium);
    columns: var(--thyuu--size-card-normal) 3;
    margin: auto
}

.page-template-archive .post-year {
    break-inside: avoid
}

.page-template-archive .post-year:not(:last-child) {
    margin: 0 0 2em
}

.page-template-archive .post-list {
    display: flex;
    flex-flow: column;
    gap: .75em;
    background: var(--thyuu--color-back-white, rgb(255 255 255 / .7));
    box-shadow: var(--thyuu--shadow-white);
    border-radius: var(--thyuu--size-radius);
    padding: var(--thyuu--size-span)
}

.page-template-archive .post-list li {
    display: flex
}

.page-template-archive .post-list time {
    color: hsl(var(--thyuu--main-color) / .5);
    flex: 0 0 3em
}

/* =豆瓣页面
-------------------------------------------------------------- */
.page-template-douban {
    --db-main-color: hsl(var(--thyuu--main-color) / 70%);
    --db-hover-color: hsl(var(--thyuu--main-color) / 70%);
    --db--text-color: hsl(var(--thyuu--color-font) / var(--thyuu--alpha-font));
    --db--text-color-light: var(--thyuu--alpha-font);
    transition: .3s
}

.page-template-douban.nav-fixed {
    --thyuu--color-font: 0deg 0% 100%;
    --thyuu--alpha-font: 75%;
    --thyuu--color-back-font: rgb(255 255 255 / .05);
    --thyuu--color-back-shift: rgb(255 255 255 / .05);
    --thyuu--color-back-white: rgb(255 255 255 / .1);
    --thyuu--color-back-have: #000;
    --thyuu--color-font-fill: var(--thyuu--color-back-have);
    --thyuu--color-font-head: hsl(0deg 0% 100% / 75%)
}

.db--navItem {
    font-size: 1em
}

.db--nav,
.db--type {
    margin: 1em auto;
    padding: 0;
    width: fit-content
}

.db--type {
    position: fixed;
    inset: auto var(--thyuu--size-edgelr) 0;
    z-index: 3;
    flex-flow: row-reverse;
    animation: var(--animation);
    animation-delay: .5s
}

.db--typeItem {
    color: inherit;
    background: var(--thyuu--color-back-shift, #ffffffb3);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px)
}

.db--genres {
    margin: 0 auto 1.5em;
    width: fit-content;
    padding: .5em;
    gap: .5em .25em;
    justify-content: center;
    background: var(--thyuu--color-back-font);
    border-radius: var(--thyuu--size-radius)
}

.db--genreItem {
    font-size: var(--thyuu--size-medium);
    margin: 0;
    background: 0 0;
    border-radius: 2em;
    padding: .5em;
    line-height: 1;
    transition: .3s
}

.db--dateList__card,
.db--list {
    position: relative;
    display: grid;
    grid: auto-flow min(var(--thyuu--size-card-normal)*1.6, 70vw)/repeat(auto-fit, minmax(min(var(--thyuu--size-card-normal)*.9, 50% - 1em), 1fr));
    gap: .5em;
    overflow: hidden;
    animation: var(--animation);
    transition: .1s
}

.db--list__card {
    gap: 1em;
    grid: auto/1fr
}

.db--listBydate {
    display: block;
    margin: 0
}

.db--titleDate {
    width: 100%;
    flex-direction: row-reverse;
    justify-content: center;
    margin: 0
}

.db--titleDate__day,
.db--titleDate__month {
    font-size: 3em;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px hsl(var(--thyuu--color-font) / .3);
    -webkit-mask: linear-gradient(#000 80%, #0000 80%);
    margin: 0 0 -.2em
}

.db--title a:hover {
    text-decoration: none
}

.db--item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-end;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 1em;
    gap: .5em;
    margin: 0;
    border-radius: var(--thyuu--size-radius);
    background: #000;
    overflow: hidden
}

.db--container .db--score,
.db--container .db--title,
.db--container .ipc-signpost {
    position: relative;
    padding: .5em 1em;
    margin: 0;
    border-radius: 1em;
    line-height: 1;
    font-weight: 400;
    color: #fff;
    width: auto
}

.db--container .db--score,
.db--container .ipc-signpost {
    color: #ffffffb3;
    background: #ffffff1c;
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
    font-size: var(--thyuu--size-small)
}

.db--container .db--title {
    order: -1;
    z-index: 1;
    flex: 100%
}

.db--title a:after {
    content: "\e627";
    display: inline-block;
    opacity: 0;
    margin: 0 0 0 -1em;
    transition: .5s
}

.db--item:hover .db--title a:after {
    opacity: 1;
    margin: 0 0 0 .25em
}

.db--image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    -webkit-mask: linear-gradient(#0006, #000c, #0000);
    transition: ease-in-out .3s
}

.db--item:hover .db--image {
    transform: scale(1.1);
    transform-origin: bottom
}

.lds-ripple {
    align-items: center;
    min-height: 50vh;
    display: inline-flex
}

.db--container .ipc-signpost:after {
    all: unset;
    content: '标记';
    margin: 0 0 0 .5em
}

.db--empty {
    height: 100%;
    opacity: .15;
    grid-column: 1/-1;
    background: 0 0
}

.db--empty:after {
    content: "\e708";
    font-size: 4rem;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center
}

@media (max-width:1152px) {
    .db--type {
        position: sticky;
        animation: none;
        top: var(--thyuu--size-divs)
    }
}

/* =足迹页面
-------------------------------------------------------------- */
.page-template-footprint .thyuu-maper {
    position: fixed !important;
    --cover-map-opacity: 1;
    --cover-map-visibie: visible
}

.page-template-footprint :is(.thyuu-maper-windows, .thyuu-maper-markers, .comment-list .depth-1) {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

.page-template-footprint :is(.thyuu-maper-windows, .thyuu-maper-markers) {
	display: flex;
    flex-flow: column;
    padding: .5em;
    background: var(--thyuu--color-back-shift, hsl(0 0% 100% / .6));
    box-shadow: var(--thyuu--shadow-normal);
    border-radius: var(--thyuu--size-radius)
}

.page-template-footprint .thyuu-maper-windows {
    width: var(--thyuu--size-card-small);
    font-size: var(--thyuu--size-small);
    gap: 1em;
    margin: -1em 0 0 0;
    cursor: auto;
    animation: var(--animation);
    animation-duration: .3s
}

.page-template-footprint .thyuu-maper-windows li:before {
    margin: 0 .5em
}

.page-template-footprint .thyuu-maper-windows img {
    width: 100%;
    border-radius: inherit;
    cursor: zoom-in;
	aspect-ratio: var(--custom-thumb-ratio, 1);
	object-fit: cover;
}

.page-template-footprint .thyuu-maper-windows ul {
    display: flex;
    flex-direction: column;
    gap: .5em;
}
.page-template-footprint .tdt-infowindow-content {
    text-align: left;
    line-height: inherit;
    margin: 0;
}
.page-template-footprint .thyuu-maper .locater {
	align-items: center;
    padding: .25em;
    border-radius: 50%;
    outline: thin solid #0000;
	margin: 0 0 0 .5em;
    transition: .3s;
}

.page-template-footprint .thyuu-maper .locater:hover {
    outline-color: hsl(var(--thyuu--main-color) / .5)
}

.page-template-footprint .thyuu-maper .locater:after {
    content: "";
    position: absolute;
	inset: auto auto -.5em;
    width: 2em;
    height: 1em;
    background: inherit;
    box-shadow: inherit;
    border-radius: 50%;
    z-index: -1;
}

.page-template-footprint .thyuu-maper .locater img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: inherit;
}

.page-template-footprint .thyuu-maper .cluster {
    --height: 20px;
	--hsl: hsl(var(--custom-main-hue, 359deg) var(--colorHat, 83%) var(--custom-main-lig, 62%) / .5);
    align-items: center;
    justify-content: center;
    color: #fff;
    min-width: var(--height);
    height: var(--height);
    border-radius: calc(var(--height)/ 2);
    background: var(--hsl);
	box-shadow: 0 0 1em var(--hsl);
}

.page-template-footprint :where(.thyuu-maper-control, .page-header, .aside-comment) {
    transition: .5s cubic-bezier(.5, 0, 0, 1.4), pointer-events 0s;
    z-index: 2
}

.page-template-footprint .aside-comment {
    margin: 100vh 0 0
}

.page-template-footprint.focus-mode :is(.header-area > *:not(.site-logo), .page-header, .aside-comment) {
    transform: var(--trfm, translateY(-110%));
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

@media (width >=1153px) {
    .page-template-footprint .page-header {
        align-self: end;
        pointer-events: none;
        height: auto !important;
    }

    .page-template-footprint .aside-comment {
        --trfm: translateX(110%);
        position: absolute;
        display: block;
        right: var(--thyuu--size-edgelr);
        bottom: 0;
        margin: 0 0 var(--thyuu--size-divs);
        width: min(var(--thyuu--size-card-normal), 100%);
        max-height: calc(100vh - var(--thyuu--height-head) - var(--thyuu--size-divs)*2);
        overflow: overlay
    }

    [plots=shrink] .page-template-footprint .site-main {
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        padding-bottom: 0
    }

    [plots=shrink] .page-template-footprint .page-header {
        align-self: flex-start;
    }

}

/* =相册页面
-------------------------------------------------------------- */
.page-template-gallery .gallery-item {
    width: calc(100% / var(--num, 4));
    padding: .5em
}

@media (width <=1153px) {
    .page-template-gallery .gallery-item {
        --num: 3
    }
}

@media (width <=641px) {
    .page-template-gallery .gallery-item {
        --num: 2
    }
}

.page-template-gallery .page-article {
    margin: -.5em
}

.page-template-gallery .gallery-item div {
    position: relative
}

.page-template-gallery .gallery-item img {
    border-radius: var(--thyuu--size-radius);
    vertical-align: middle
}

.page-template-gallery .gallery-item figcaption {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    color: #fff;
    backdrop-filter: blur(10px);
    padding: 1em;
    text-align: center;
    border-radius: var(--thyuu--size-radius)
}