@charset "utf-8";

/* =Author
----------------------------------------------- */
.author-media {
    all: unset;
    position: fixed;
    inset: 0;
    height: var(--photo-size, 100%);
    -webkit-mask: linear-gradient(#000 50%, #0000);
    pointer-events: none;
    z-index: -1;
}
.author-media > * {
    position: absolute;
    inset: 0;
    margin: auto;
}
.author-media img {
    --trfm: scale(2);
    --trfm-or: center;
    width: 100%;
    height: var(--photo-size, 100%);
    object-fit: cover;
    filter: none !important;
    object-position: 65%;
    z-index: 1;
    transition: .7s,transform 0s;
}
.author-media img:where(.back) {
    height: 60%;
    z-index: -1;
}
.author-media .text {
    height: fit-content;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: thin hsl(0deg 0% 100% / 5%);
    font-family: var(--thyuu--font-family-slogn);
    line-height: 1;
    z-index: 0;
    opacity: 0;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 20vmin;
    transition: opacity .3s;
}
.author-media .text:after {
    content: attr(domain) ' ' attr(domain);
}
.first-page .author-media .text {
    opacity: 1;
    animation: opacity 1s 3s backwards, about-text infinite linear 60s;
}
.nav-fixed .author-media .text {
    animation-play-state: paused;
    opacity: 0;
}
.first-page .author-media img {
    animation: transform 3s, onheight 4s, opacity 1.5s;
    animation-timing-function: var(--animation-in);
}
.first-page .author-media img:where(.main) {
    animation: onheight 2s 2s backwards, opacity 1s 2.5s backwards;
}
body:not(.first-page) .author-media img,
.first-page.nav-fixed .author-media img {
    height: 100%;
    filter: brightness(.5) blur(1em) !important;
}
.first-page :is(.user-text, .switch-nav, .tabs-switch) {
    animation: var(--animation);
}
.first-page:not(.parallax-loaded) :is(.user-text, .switch-nav, .tabs-switch, .author-media :is(.text, img)) {
    animation-play-state: paused;
}
.user-text {
    color: hsl(var(--thyuu--main-color) / .7);
    font-family: var(--thyuu--font-family-slogn);
}
.has-feature .user-text {
    color: inherit;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px;
}
.user-text .name {
    line-height: 1;
    font-size: 1.5em;
}
.switch-nav {
    max-width: var(--thyuu--size-card-normal);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.has-feature.first-page .user-text {
    animation-delay: calc(var(--part-delay, 2s) + .5s);
}
.has-feature.first-page .switch-nav {
    animation-delay: calc(var(--part-delay, 2s) + .75s);
}
.has-feature.first-page .tabs-switch {
    animation-delay: calc(var(--part-delay, 2s) + 1s);
}
#author-content {
    position: relative;
    max-width: min(var(--thyuu--size-card-normal) * 4, 100%);
    margin-inline: auto;
    overflow: unset;
}
.user-part, .user-post {
    gap: 1em;
}
.user-moment {
    margin: 0 0 1em;
}
.moments {
    display: grid;
    grid: auto-flow dense / repeat(auto-fill, minmax(min(15em, 100%), 1fr));
    gap: 1em;
    overflow: auto;
}
.moments li {
    --line-num: 5;
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    place-content: space-between;
    font-size: var(--thyuu--size-small);
    border-radius: max(var(--thyuu--size-radius),2em);
    padding: 1em 1.5em;
    gap: .5em;
    background-color: var(--thyuu--color-back-white);
    box-shadow: var(--thyuu--shadow-white);
    transition: .3s;
    max-height: 20em;
    overflow: hidden;
}
.moments .post-meta {
    align-items: center;
    line-height: 1;
    gap: .5em;
    color: hsl(var(--thyuu--color-font) / .6);
}
.moments .post-meta .button {
    padding: .5em;
}
.moments .post-meta .emoji {
    font-size: 1.25em;
    margin: -.25em;
    color: white;
}
.user-part {
    flex-flow: wrap;
}
.user-part span {
    display: block;
    font-size: 1.25em;
    font-variant-numeric: tabular-nums;
}
.user-part a::after {
    content: "\e627";
    font-family: thyuu-iconfont;
    width: var(--thyuu--size-icon);
    height: var(--thyuu--size-icon);
    line-height: var(--thyuu--size-icon);
    background: rgb(255 255 255 / .2);
    border-radius: 50%;
    text-align: center;
}
.user-part a:not(.more)[target="_blank"]::after {
    content: "↗";
}
.user-part a.more::after {
    content: "\e645";
}
.user-part a.no-icon::after {
    display: none;
}
.user-part a:not(.no-icon):hover {
    background-size: calc(100% - var(--thyuu--size-icon) - .5em) 1px;
}
.user-part :where(li) {
    flex: auto;
    z-index: 2;
}
.user-part :where(.info) {
    flex: none;
    gap: var(--thyuu--size-span) var(--thyuu--size-divs);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    opacity: .6;
}
.user-part .info a {
    display: flex;
    align-items: center;
    gap: .5em;
}
.user-part section {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    place-content: space-between;
    font-size: var(--thyuu--size-small);
    border-radius: var(--thyuu--size-radius);
    padding: 1.5em;
    gap: 1.5em;
    background-color: var(--thyuu--color-back-white);
    box-shadow: var(--thyuu--shadow-white);
    flex: auto;
    min-height: 15em;
    overflow: hidden;
    transition: all 1s,box-shadow .5s;
}
.user-part section:hover {
    box-shadow: var(--thyuu--shadow-white),0 0 0 2px rgb(255 255 255 / 40%);
}
.user-part h6,
.user-part .full {
    flex: 100%;
}
.user-part .column {
    flex: var(--thyuu--size-card-normal);
    flex-direction: column;
    align-content: normal;
}
.user-part .logo img {
    height: 1rem;
    filter: drop-shadow(0 0 1px rgba(0,0,0,.3)) brightness(1.2);
}
.user-part :where(.count, .me) {
    background-image: linear-gradient(135deg,rgb(255 255 255 / 10%), hsl(var(--thyuu--main-color) / .5));
    background-position: 50%;
    background-size: 200% 200%;
}
.user-part .me nav {
    flex: 100%;
    text-transform: uppercase;
    justify-content: flex-start;
}
.user-part .me a:before {
    font-size: 1.4em;
    line-height: 1;
}
.user-part .me em {
    display: inline-block;
    background: rgb(255 255 255 / 10%);
    border-radius: var(--thyuu--size-radius);
    margin: 0 .5em;
    padding: 0 .5em;
}
.user-part .count {
    background-image: linear-gradient(135deg,rgb(255 255 255 / 10%),hsl(var(--thyuu--subs-color) / .5) );
}
.user-part :where(.count, .me):hover {
    background-position: 200% 200%;
}
.user-part .moods .mood-line {
    display: flex;
    inset: 0;
    position: absolute;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.user-part .moods .mood-line i {
    position: absolute;
    height: 7px;
    inset: 0;
    width: 0;
    margin: auto 0;
    color: #673ab780;
    background: currentColor;
    box-shadow: 0 0 30px 7px;
    border-radius: 50%;
    opacity: .7;
    transition: 3s;
}
.user-part .moods.fade-after .mood-line i {
    width: 100%;
}
.user-part .moods .mood-list {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    flex: 100%;
    min-height: 10em;
    padding: 0 0 0 2em;
    margin: 0 0 3em;
}
.user-part .moods .mood-list li {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 100%;
}
.user-part .moods .mood-1 {
    --trfm-in: translateY(600%);
}
.user-part .moods .mood-2 {
    --trfm-in: translateY(400%);
}
.user-part .moods .mood-3 {
    --trfm-in: translateY(200%);
}
.user-part .moods .mood-5 {
    --trfm-in: translateY(-200%);
}
.user-part .moods .mood-6 {
    --trfm-in: translateY(-400%);
}
.user-part .moods .mood-7 {
    --trfm-in: translateY(-600%);
}
.user-part .moods .mood-list li i {
    font-size: 1.5em;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-part .moods.fade-after .mood-list li i {
    --trfm: none;
    animation: var(--animation);
    animation-fill-mode: both;
}
.user-part .moods.fade-after .mood-list li:nth-of-type(1) i {
    animation-delay: .4s;
}
.user-part .moods.fade-after .mood-list li:nth-of-type(2) i {
    animation-delay: .8s;
}
.user-part .moods.fade-after .mood-list li:nth-of-type(3) i {
    animation-delay: 1.2s;
}
.user-part .moods.fade-after .mood-list li:nth-of-type(4) i {
    animation-delay: 1.6s;
}
.user-part .moods.fade-after .mood-list li:nth-of-type(5) i {
    animation-delay: 2s;
}
.user-part .mood-list a {
    position: absolute;
    inset: auto -1em -4em;
    border-radius: 2em;
    padding:.5em 1em;
    background-color: var(--thyuu--color-back-white);
    box-shadow: var(--thyuu--shadow-white);
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: .5s;
}
.user-part :is(.mood-list:not(:has(li:hover)) li:nth-of-type(1), .mood-list li:hover) a {
    opacity: 1;
    transform: none;
    visibility: visible;
}
.user-part .place {
    flex: var(--thyuu--size-card-normal);
    color: white;
    background: rgb(66 73 102 / 70%);
}
.user-part .place.bj {--map: -25% 25%;} .user-part .place.tj {--map: -25% 25%;} .user-part .place.he {--map: -25% 25%;} .user-part .place.sx {--map: -17% 15%;}
.user-part .place.im {--map: -15% 40%;} .user-part .place.ln {--map: -40% 30%;} .user-part .place.jl {--map:-50% 40%;} .user-part .place.hl {--map: -55% 55%;}
.user-part .place.sh {--map: -35% 0%;} .user-part .place.js {--map: -35% 0%;} .user-part .place.zj {--map: -35% -10%;} .user-part .place.ah {--map: -30% 0%;}
.user-part .place.fj {--map: -30% -20%;} .user-part .place.jx {--map: -25% -15%;} .user-part .place.sd {--map: -30% 15%;} .user-part .place.ha {--map: -20% 5%;}
.user-part .place.hb {--map: -15% 0%;} .user-part .place.hn {--map: -15% -15%;} .user-part .place.gd {--map: -20% -30%;} .user-part .place.gx {--map: -5% -30%;}
.user-part .place.hi {--map: -10% -45%;} .user-part .place.cq {--map: 0% -10%;} .user-part .place.sc {--map: 10% -10%;} .user-part .place.gz {--map: 0% -20%;}
.user-part .place.yn {--map: 15% -20%;} .user-part .place.xz {--map: 50% -5%;} .user-part .place.sn {--map:-5% 10%;} .user-part .place.gs {--map: 15% 15%;}
.user-part .place.qh {--map: 27% 15%;} .user-part .place.nx {--map: 0% 15%;} .user-part .place.xj {--map: 55% 30%;} .user-part .place.tw {--map: -35% -25%;}
.user-part .place.hk {--map: -20% -30%;} .user-part .place.mo {--map:-20% -30%;}
.user-part .place #china-map {
    stroke: #fff;
    opacity:0;
    position: absolute;
    width: 100%;
    inset: 0;
    margin: auto;
    scale: 3;
    aspect-ratio: 1;
    transition: opacity 1s var(--animation-on), scale 1s var(--animation-on) .5s, translate 1s var(--animation-on);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.user-part .place.fade-after #china-map {
    opacity: .3;
    scale: 1.7;
}
.user-part .place:hover #china-map {
    scale: 3;
    opacity: .7;
    translate: var(--map);
    transition: opacity 1s var(--animation-on), scale 1s .5s cubic-bezier(.5, 0, 0, 1), translate 1s var(--animation-on);
}
.user-part .place #china-map .st1{stroke-dasharray:4,4;stroke-dashoffset:4;}
.user-part .place #china-map .st2{stroke-dasharray:8,4,4,4;}
.user-part .place #china-map .st3{stroke:#3388FF;}
.user-part .place #china-map .st5,.st6{fill-rule:evenodd;clip-rule:evenodd;stroke-width:0;}
.user-part .place li {
    transition: opacity 1s cubic-bezier(.5, 0, 0, 1);
}
.user-part .place:hover li {
    opacity: 0;
    transition: opacity 1s var(--animation-on) .5s;
}
.user-part .nature {
    display: grid;
    gap: 1em;
}
.user-part .mbti {
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.user-part .mbti .nature-button a:after {
    transition: .5s;
}
.user-part .mbti #nature:checked ~ .info .nature-button a:after {
    transform: rotate(180deg);
}
.user-part .mbti .nature-button a:before {
    content: "查看上次结果";
}
.user-part .mbti #nature:checked ~ .info .nature-button a:before {
    content: "返回最新结果";
}
.user-part .mbti .caption {
    position: relative;
    margin: 0 0 1.5em;
    grid-area: 1 / 1 / 1 / 1;
    transition: .3s;
}
.user-part .mbti #nature:checked ~ .nature .caption.new,
.user-part .mbti #nature:Not(:checked) ~ .nature .caption.old {
    opacity: 0;
}
.user-part .mbti .cont {
    width: 60%;
    margin: 1em 0 0;
}
.user-part .mbti .cont:before {
    content: var(--des);
}
.intj {--des:"富有想象力和战略性思维，一切皆在计划之中。"}
.intp {--des:"具有创造力的发明家，对知识有着不可抑制的渴望。"}
.entj {--des:"聪明好奇的思考者，无法抵挡智力挑战的诱惑。"}
.entp {--des:"大胆、富有想象力且意志强大，总能找到或创造解决方法。"}
.infj {--des:"安静神秘，但非常鼓舞人心且不知疲倦的理想主义者。"}
.infp {--des:"富有诗意、善良且无私的人，总是热衷于帮助正义事业。"}
.enfj {--des:"具有魅力并能激励人心的领导者，能够让听众为之着迷。"}
.enfp {--des:"充满活力，富有创意，善于交际的自由之人，总能找到微笑的理由。"}
.istj {--des:"务实且注重事实的人，可靠性不容怀疑。"}
.isfj {--des:"非常专注和热情的保护者，总是随时准备保护他们所爱的人。"}
.estj {--des:"出色的管理者，在管理事物或人的方面无与伦比。"}
.esfj {--des:"非常关心他人，善于社交，受人欢迎，总是乐于助人。"}
.istp {--des:"大胆而实际的实验家，擅长使用各种形式的工具。"}
.isfp {--des:"灵活有魅力的艺术家，时刻准备着探索和体验新鲜事物。"}
.estp {--des:"聪明、充满活力且洞察力极强的人，真正喜欢充满刺激和危险的生活。"}
.esfp {--des:"精力充沛、热情，总是心血来潮--有他们在身边，生活永远不会无聊。"}
.user-part .mbti .mbti-mg {
    position: absolute;
    width: min(20em,60%);
    top: 0;
    right: -2em;
    aspect-ratio: 1;
    opacity: .7;
    z-index: 1;
    pointer-events: none;
    transition: .5s;
}
.user-part .mbti:hover .mbti-mg {
    transform: scale(1.1);
    opacity: 1;
}
.user-part .mbti .mbti-bg {
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: .5s .2s;
    transform: scale(4);
    filter: blur(20px) brightness(.6) opacity(.8);
    z-index: -1;
}
.user-part .mbti .traits {
    position: relative;
    display: flex;
    flex-flow: column;
    gap: 2em;
    line-height: 1;
    z-index: 2;
}
.user-part .mbti .traits li {
    display: flex;
    align-items: center;
    gap: 1em;
}
.user-part .mbti .traits li.extraverted {
    --color: 66 152 180;
    --num: var(--extraverted, 50);
    --delay: .3s;
}
.user-part .mbti .traits li.intuitive {
    --color: 228 174 58;
    --num: var(--intuitive, 50);
    --delay: .5s;
}
.user-part .mbti .traits li.feeling {
    --color: 51 164 116;
    --num: var(--feeling, 50);
    --delay: .7s;
}
.user-part .mbti .traits li.judging {
    --color: 136 97 154;
    --num: var(--judging, 50);
    --delay: .9s;
}
.user-part .mbti .traits li.assertive {
    --color: 242 94 98;
    --num: var(--assertive, 50);
    --delay: 1.1s;
}
.user-part .mbti .traits li i {
    position: relative;
    flex: auto;
    border-radius: 1em;
    height: 1em;
    background: hsl(var(--thyuu--color-font) / .2);
    opacity: .4;
    transition: .5s;
}
.user-part .mbti:hover .traits li i {
    opacity: .8;
}
.user-part .mbti .traits li i:before,
.user-part .mbti .traits li i:after {
    content: "";
    height: 100%;
    position: absolute;
    border-radius: 1em;
    background: rgb(var(--color));
    transition: all 1s, opacity .3s;
}
.user-part .mbti .traits li i:before {
    width: calc(var(--num) *1%);
    opacity: calc(var(--num) - 49);
}
.user-part .mbti .traits li i:after {
    width: calc((100 - var(--num)) *1%);
    opacity: calc(100 - var(--num) - 49);
    right: 0;
}
.user-part .mbti:hover .traits li i:before,
.user-part .mbti:hover .traits li i:after {
    box-shadow: var(--thyuu--shadow-normal),0 0 0 2px hsl(var(--thyuu--color-font) / .5);
    animation: traits 1s var(--animation-on) var(--delay);
}
.user-part .mbti .traits li em:nth-of-type(1):after,
.user-part .mbti .traits li em:nth-of-type(2):before {
    counter-reset: progress var(--num);
    content: counter(progress, decimal-leading-zero) "%";
    margin: 0 .5em;
}
.user-part .mbti .traits li em:nth-of-type(2):before {
    counter-reset: progress calc(100 - var(--num));
}
/* =PC
----------------------------------------------- */

@media (width >= 1153px) {
    [plots="shrink"] .has-feature .site-main {
        margin: var(--photo-size, 50vh) 0 0;
    }
    [plots="expand"] body.archive.author .thyuu-switch .switch-nav {
        position: sticky;
        grid-area: page;
        place-self: end start;
        width: auto;
        margin: unset;
        bottom: var(--thyuu--size-divs);
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: none;
    }
    [plots="expand"] :where(.tabs-switch) {
        grid-area: post;
        align-self: center;
    }
    [plots="expand"] .has-feature .user-moment {
        height: calc(100vh - var(--thyuu--height-head) * 2 - var(--thyuu--size-medium) * 2.5);
    }
    [plots="expand"] .has-feature .moments {
        display: grid;
        grid: repeat(3, 1fr) / repeat(3, 1fr);
        align-items: center;
        height: 100%;
    }
    [plots="expand"] .has-feature .moments li {
        width: 20em;
        backdrop-filter: blur(1em);
    }
    [plots="expand"] .has-feature .moments li:nth-child(2) {
        grid-area: 3 / 2;
        justify-self: center;
    }
    [plots="expand"] .has-feature .moments li:nth-child(3) {
        grid-area: 2 / 3;
        justify-self: right;
    }
    [plots="expand"] .has-feature .moments li:not(:hover) {
        max-height: 6.5em;
        gap: 0;
        line-height: 3;
    }
    [plots="expand"] .has-feature .more-moments {
        grid-area: 4 / 2;
        width: fit-content;
        margin: auto;
        padding-inline: 1.5em;
    }
}

/* =pad及mobile
----------------------------------------------- */

@media (width <= 1152px) {
    .has-feature.first-page .site-main {
        --part-delay: 0s;
        --photo-size: 60vh;
        margin: 40vh 0 0;
    }
    .author-media img {
        --trfm-or: top;
        --trfm: scale(1.5);
        height: 100%;
    }
    .first-page .author-media img {
        animation: transform 2s, onwidth 2s, opacity 1.5s;
    }
    .author-media .text {
        font-size: var(--thyuu--height-head);
        margin-top: 0;
    }
    .moments {
        grid: auto / auto-flow min(15em, 100%);
        mask: var(--thyuu--mask-scroll-x);
        margin: -1em;
        padding: 1em;
    }

}