@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: .5em;
	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;
	scroll-snap-align: start;
	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.5em;
	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);
		justify-content: space-evenly;
		text-align: center;
		text-wrap: balance;
	}
	[plots="expand"] .has-feature .moments li:not(:hover) {
		max-height: 4em;
	}
	[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 .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;
		scroll-padding: 1em;
		scroll-snap-type: x;
	}
}