*,
*::before,
*::after {
	font: inherit;
	color: inherit;
	padding: 0;
	margin: 0;
	border: 0 solid;
	outline: 0 solid;
	box-sizing: border-box;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--color-grey-10) var(--bgc);
}

body {
	--gap: 1.5rem;
	--nap: 4rem;

	--bgc: hsl(0deg 0% 98%);
	--hue: var(--custom-main-hue, 0deg);
	--sat: var(--custom-main-sat, 77%);
	--lig: var(--custom-main-lig, 77%);
	--color-main-10: hsl(var(--hue) var(--sat) var(--lig) / .1);
	--color-main-50: hsl(var(--hue) var(--sat) var(--lig) / .5);
	--color-main-100: hsl(var(--hue) var(--sat) var(--lig));
	--color-grey-05: hsl(0deg 0% 0% / .05);
	--color-grey-10: hsl(0deg 0% 0% / .1);
	--color-grey-50: hsl(0deg 0% 0% / .5);
	--color-silv-10: hsl(0deg 0% 100% / .1);
	--color-silv-50: hsl(0deg 0% 100% / .5);

	--main-color: var(--custom-main-hue, 0deg) var(--custom-main-sat, 77%) var(--custom-main-lig, 77%);
	--subs-color: var(--custom-subs-hue, 20deg) var(--custom-subs-sat, 77%) var(--custom-subs-lig, 77%);

	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	font: 300 16px / 2 'MiSans VF', sans-serif, thyuu-iconfont;
	font-synthesis: none;
	background: var(--bgc);
	overflow: clip;
	--transition-fast: .15s ease;
	--transition-normal: .2s ease;
	--transition-slow: .3s ease;
	--transition-panel: .4s cubic-bezier(.5, 0, 0, 1.4);
	--transition-hover: .3s cubic-bezier(.4, 0, .2, 1);
	--shadow-card: 0 0 1em var(--color-grey-05);
	--shadow-card-hover: 0 1em 3em var(--color-grey-10);
}

a {
	text-decoration: none;
	word-break: break-all;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 500;
	line-height: 1.5;
}

h1,
h2 {
	font-family: "FontQu Smile 常规", 'MiSans VF', sans-serif;
	font-weight: 100;
	font-size: clamp(2em, 10vmin, 4em);
}

h1 {
	font-size: clamp(4em, 10vmin, 6em);
	text-wrap: balance;
	line-height: 1;
}

h3 {
	font-size: 1.5em;
}

h4 {
	font-size: 1em;
}

h5 {
	font-size: .875em;
}

h6 {
	font-size: .75em;
}

b {
	font-weight: bold;
}

small {
	font-size: .75rem;
	opacity: .7;
}

:where(img) {
	max-width: 100%;
	height: auto;
}

:where(ol, ul, li) {
	list-style: none;
}

:where(nav, hgroup, article, button) {
	max-width: 100%;
	z-index: 1;
	transition: var(--transition-slow);
}

:where(summary, button) {
	cursor: pointer;
	user-select: none;
	background: none;
	transition: var(--transition-slow);
}

summary::marker,
summary::-webkit-details-marker {
	display: none;
	content: none;
}

input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
}

input[type="color"]::-moz-color-swatch,
input[type="color"]::-webkit-color-swatch-wrapper,
input[type="color"]::-webkit-color-swatch {
	padding: 0;
	border: 0;
	border-radius: 0;
}

table {
	font-size: .875em;
	width: 100%;
	border-collapse: collapse;
}

table :where(th, td) {
	padding: .75em 1em;
	border-color: var(--color-grey-05);
	border-width: 0 0 thin;
}

thead th {
	position: sticky;
	top: var(--nap);
	text-align: left;
	font-weight: 600;
	white-space: nowrap;
	color: var(--color-main-100);
	border-width: 0 0 0 thin;
	background: var(--color-main-10);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	z-index: 2;
}

thead th:first-child {
	border: 0;
	border-top-left-radius: var(--gap);
	border-bottom-left-radius: var(--gap);
}

thead th:last-child {
	border-top-right-radius: var(--gap);
	border-bottom-right-radius: var(--gap);
}

tbody td {
	transition: var(--transition-hover);
}

tbody td:hover,
tbody tr:hover td:not([rowspan]) {
	background: var(--color-main-10);
}

tbody td[colspan] {
	font-weight: 500;
}

tbody td[rowspan]:first-child {
	vertical-align: middle;
	border-width: thin;
}

tbody td:not([colspan]):last-child {
	border-inline-width: thin;
}

.is-over {
	position: fixed;
	inset: 0;
	background: var(--bgc);
	z-index: 3;
	overflow: clip;
}

.is-tips {
	display: block;
	font-size: .75rem;
	text-wrap: auto;
	opacity: .7;
	z-index: 2;
}

.toast,
.page_toggle,
.toggle-btnist {
	width: fit-content;
	color: hsl(0deg 0% 40%);
	font-size: .875em;
	line-height: 1;
	margin: 0 auto;
	padding: 0 var(--gap);
	border-radius: var(--gap);
	background: var(--color-silv-50);
	backdrop-filter: blur(1em) saturate(2);
	box-shadow: 0 0 1em var(--color-grey-10);
	outline: thin solid hsl(0deg 0% 40% / .05);
	z-index: 3;
	overflow: auto clip;
	scrollbar-width: none;
	transition: var(--transition-panel), pointer-events 0s;
}

.content,
:where(.has-blocks-card) :is(hgroup, article) ul li {
	text-autospace: normal;
	padding: var(--gap);
	border-radius: var(--gap);
	background: var(--color-silv-50);
	box-shadow: 0 0 1em var(--color-grey-05);
}

.toast {
	position: fixed;
	inset: auto 1rem 1rem;
	color: #fff;
	font-size: .75em;
	padding: 1.25em 2em;
	background: #000000e0;
	box-shadow: 0 0 2em var(--color-grey-50);
	transform-origin: top;
	pointer-events: none;
	z-index: 999;
}

.toast:not(.show),
.show-toast .sector.active .toggle-btnist.is-sticky {
	opacity: 0;
	transform: scale(.9) translateY(1em);
	transform-origin: top;
	animation: none;
}

.button,
:where(a[target="_blank"]) {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	font-size: .875em;
	padding: .5em;
	gap: .5em;
	line-height: 1;
	color: var(--color-grey-50);
	border-radius: 2em;
	background: 0;
	outline: thin solid var(--color-grey-05);
	outline-color: hsl(from currentColor h s 50% / .1);
	transition: var(--transition-slow);
}

.button:not(:empty),
:where(a[target="_blank"]):not(:empty) {
	padding-right: 1em;
}

.button:hover,
:where(a[target="_blank"]):hover {
	color: var(--color-main-100);
	;
}

:where(.button):before,
:where(a[target="_blank"]):before {
	content: "\e667";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	margin: -.25em;
	background: var(--color-grey-05);
	background: hsl(from currentColor h s 50% / .1);
	border-radius: 50%;
}

:where(.button):before {
	content: "\e627";
}

:where(.button).close::before {
	content: "\f07b";
}

.toggle-btnist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em .25em;
	padding: .25em;
	scroll-snap-type: x;
	scroll-padding: 2em;
}

.toggle-btnist.is-sticky {
	position: sticky;
	flex-wrap: nowrap;
	margin-block: auto -3.5em;
	bottom: 1rem;
}

.sector.active .toggle-btnist.is-sticky {
	--transform-a: scale(.9) translateY(1em);
	animation: transform var(--transition-hover) .3s both, opacity var(--transition-hover) .3s both;
}

:where(.toggle-btnist)>* {
	display: flex;
	flex: none;
	margin: auto;
	padding: .75em;
	gap: .5em;
	outline: thin solid #0000;
	border-radius: inherit;
	scroll-snap-stop: always;
	scroll-snap-align: start;
	transition: var(--transition-slow);
}

:where(.toggle-btnist) button:not(:empty) {
	padding-inline: 1.5em;
}

button.active,
:where(.toggle-btnist) a {
	color: var(--color-main-100);
	outline-color: var(--color-main-10);
	background: var(--color-main-10);
}

:where(.toggle-btnist) a::before {
	background: none;
}

:where(.toggle-blocks),
:where(.toggle-blocks) [data-type]:not(.active, .close) {
	opacity: 0;
	pointer-events: none;
	transform: var(--tsf, none);
	visibility: hidden;
	overflow: clip;
	transition: var(--transition-slow), pointer-events 0s;
}

:where(.toggle-blocks) [data-type] {
	transition: var(--transition-slow);
}

.sector_blocks.active .toggle-blocks {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.toggle-scroll {
	display: flex;
	align-items: center;
	mask: linear-gradient(90deg, #0000, #000 var(--gap), #000 calc(100% - var(--gap)), #0000);
	scroll-snap-type: x mandatory;
	scroll-snap-stop: always;
	scrollbar-width: none;
	overflow: auto clip;
}

.common_header,
.common_footer {
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;
	font-size: .875em;
	top: 0;
	width: 100%;
	padding: 0 var(--gap);
	height: 4em;
	gap: 2em;
	z-index: 1;
}

.common_footer {
	position: fixed;
	inset: auto 0 1em;
	justify-content: space-between;
}

.common_header .logo {
	display: flex;
	align-items: center;
	gap: .5em;
	color: var(--color-main-100);
}

.common_header .logo:before {
	font-size: 2em;
}

.page_toggle {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: calc(100% - 2rem);
	inset: calc(100dvh - 4rem) 1rem auto;
	background: var(--color-silv-10);
	animation: transform 1s 2s both, opacity 1s 2s both;
	transition: top var(--transition-hover);
}

body.active .page_toggle {
	--transform-a: translateY(-1rem);
	inset: 0 0 auto;
	max-width: none;
	border-radius: 0 0 var(--gap) var(--gap);
	animation-delay: 1s;
}

.page_toggle button {
	position: relative;
	padding: 1rem;
	flex: none;
	background: none;
	scroll-snap-align: start;
}

.page_toggle button:after {
	content: "";
	position: absolute;
	inset: auto 0 -.5em;
	height: .75em;
	border-radius: 50%;
	box-shadow: 0 -1em 2em var(--agc), 0 1em var(--agc) inset;
	transition: inherit;
}

.page_toggle button.active {
	--agc: var(--color-main-50);
	scroll-snap-align: center;
}

.page_toggle button.close {
	margin-left: -1em;
}

.page_toggle button.close:before {
	scale: 1.5;
	display: block;
	border-right: thin solid hsl(0deg 0% 40% / .05);
	padding-inline: 1em;
}

.page_header {
	position: fixed;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	inset: 0;
	padding: var(--nap) 0;
	transition: var(--transition-slow);
}

body.active .page_header {
	opacity: 0;
	transform: scale(1.1);
	visibility: hidden;
}

.page_header .sun-area {
	font-size: 100vmax;
	inset: -.75em auto auto;
	color: var(--color-main-50);
	animation: sun-scale 1s;
}

body.active .page_header .sun-area * {
	animation-play-state: paused;
}

.page_content {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	transition: var(--transition-slow), pointer-events 0s;
}

body.active .page_content {
	background: var(--bgc);
}

.content {
	width: min(100vmin, 100%);
	font-size: .875rem;
}

.content>* {
	display: revert;
	margin: .5em 0;
}

.content> :first-child {
	margin-top: 0;
}

.content> :last-child {
	margin-bottom: 0;
}

.content :is(h1, h2, h3, h4, h5, h6) {
	font-size: 1em;
	font-family: inherit;
	font-weight: 600;
	margin-top: 1em;
}

.content :is(h1, h2) {
	font-size: 1.5em;
}

.content h3 {
	font-size: 1.25em;
}

.sector {
	position: fixed;
	inset: 0;
	height: 100dvh;
	scroll-snap-type: y proximity;
	scrollbar-color: var(--color-main-50) var(--bgc);
	scrollbar-gutter: stable both-edges;
	overscroll-behavior: contain;
	overflow: clip scroll;
	pointer-events: auto;
	transition: inherit;
}

.sector:not(.active) {
	opacity: 0;
	filter: blur(10px);
	transform: var(--tsf, scale(1.1));
	visibility: hidden;
	pointer-events: none;
}

.sector.is-text {
	scroll-snap-type: none;
	scroll-padding: var(--nap);
	background-image:
		radial-gradient(circle at 25% 65%, hsl(var(--main-color) / .15), #0000 25%),
		radial-gradient(circle at 75% 35%, hsl(var(--subs-color) / .15), #0000 25%);
	background-attachment: fixed;
}

.sector:after {
	content: "";
	position: fixed;
	inset: 0;
	backdrop-filter: blur(2em);
	mask: linear-gradient(#000, #0000 6em, #0000 calc(100% - 6em), #000);
	z-index: 1;
	pointer-events: none;
}

:where(.sector) figure {
	position: absolute;
	display: flex;
	inset: 0;
}

:where(.sector) figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

:where(.sector) article ul {
	display: flex;
	flex-flow: wrap;
	gap: 1em;
}

:where(.sector_banner, .sector_blocks) {
	position: relative;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	min-height: 100dvh;
	padding: var(--nap) var(--gap);
	gap: var(--gap);
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.sector.is-text .sector_banner {
	min-height: 50vh;
}

.sector.is-text .sector_blocks {
	padding-top: 0;
}

/* 授权页板块紧凑化 */
.for_license.sector_blocks {
	min-height: auto;
	padding-block: calc(var(--gap) * 3);
	gap: calc(var(--gap) * 1.5);
}

.for_license.sector_blocks :is(hgroup, article) ul {
	gap: 1.2em;
}

:where(.has-blends-head) hgroup {
	position: relative;
	color: #fff;
	mix-blend-mode: exclusion;
}

:where(.has-blocks-card) hgroup {
	text-align: center;
}

:where(.has-blocks-card) hgroup ul {
	margin: var(--gap) 0 0;
}

:where(.has-blocks-card) article .is-tips {
	margin-top: auto;
}

:where(.has-blocks-card) :is(hgroup, article) ul li {
	position: relative;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	min-height: 15em;
	max-width: 20em;
	flex: 15em;
	gap: 1em;
	text-wrap: balance;
	transition: var(--transition-slow);
}

:where(.for_layout, .for_template, .for_widget, .for_stats) :is(hgroup, article) ul li {
	text-align: center;
	align-items: center;
	justify-content: space-evenly;
}

:where(.for_layout, .for_template, .for_authors, .for_demo, .for_stats) :is(hgroup, article) ul li em {
	display: block;
	font-size: 2.5em;
	line-height: 1;
	margin: 0 0 .25em;
	font-weight: 100;
}

.for_stats :is(hgroup, article) ul li em {
	font-size: clamp(2em, 8vmin, 3.5em);
	color: var(--color-main-100);
	opacity: .9;
	filter: drop-shadow(0 .15em .3em var(--color-main-10));
}

.banner {
	display: flex;
	flex-flow: column;
	width: 100%;
	padding: var(--gap);
	gap: var(--gap);
	scrollbar-width: none;
	overflow: clip auto;
}

.banner hgroup,
.banner article>* {
	--transform-a: translateY(-2em);
	flex: 1;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	flex-flow: column;
	gap: .5em;
	animation: transform 1s 1.6s both, opacity 1s 1.6s both;
	transition: var(--transition-slow);
}

.banner hgroup {
	--transform-a: scale(2);
	animation-delay: .8s;
	color: var(--color-main-100);
}

.banner hgroup::before,
.banner hgroup::after {
	content: linear-gradient(#0000, var(--color-main-50), #0000);
	flex: 1;
	width: 1px;
}

.banner article {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	flex: 30vh;
}

.banner .platform:nth-child(even) {
	--transform-a: translateY(2em);
}

.banner .platform:hover {
	flex: 1.1;
}

.banner .for_halo {
	color: #00409b;
}

.banner .for_nvpress {
	color: #007dff;
}

.banner img {
	width: auto;
	height: clamp(2em, 5vw, 3em);
}

.banner :where(button, menu) {
	display: flex;
	font-size: .875em;
	gap: .5em;
	box-shadow: 0 0 8em -1em;
	padding: .5em 1.5em;
	outline: thin solid hsl(0deg 0% 40% / .05);
	border-radius: 2em;
	background: var(--color-silv-50);
	transition: var(--transition-slow);
}

.banner :where(button, menu):hover {
	color: var(--color-main-100);
	box-shadow: 0 0 8em -1em, 0 0 0 1px;
}

.banner button {
	flex-flow: column;
	line-height: 1.5;
	gap: 0;
	margin: 1em 0;
}

.banner menu:before {
	content: "";
	width: 1px;
	background: currentColor;
	opacity: .15;
	z-index: 2;
	margin: 0 .5em 0 0;
	height: 1em;
	align-self: center;
}

.banner menu a {
	color: inherit;
	padding: 1em;
	margin: -.5em;
	outline: none;
	opacity: .7;
}

.banner menu a:first-child {
	opacity: 1;
	order: -1;
}

.banner menu a:before {
	content: none;
}

.banner menu a:after {
	content: "\e627";
	opacity: 0;
	margin: 0 0 0 -1em;
	transition: inherit;
}

.banner menu a:hover:after {
	opacity: 1;
	margin: 0;
}

.sector_banner {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	scroll-snap-align: center;
	color: var(--color-main-100);
}

.sector:not(.is-text) .sector_banner .is-tips {
	position: absolute;
	bottom: var(--gap);
	transition: var(--transition-slow);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5em;
	opacity: 1;
}

.sector:not(.is-text) .sector_banner .is-tips:after {
	content: "\f079";
	width: 2em;
	height: 2em;
	background: #fff8;
	border-radius: 50%;
	box-shadow: 0 0 1em #0001;
	transition: var(--transition-hover) .3s;
}

.sector_banner hgroup {
	pointer-events: none;
}

.sector_banner figure {
	inset: auto;
	font-size: 20vmax;
	width: 6em;
	height: 1em;
	gap: .25em;
}

.sector_banner figure i {
	flex: 1;
	color: var(--color-grey-05);
	background: radial-gradient(circle, var(--color-main-10), #0000);
	border: thin solid;
	border-radius: 50%;
	outline: thin solid;
	outline-offset: 1em;
	transition: var(--transition-slow);
}

.sector.is-text .sector_banner figure i {
	background: none;
}

.sector_banner figure i:hover {
	border-color: var(--color-main-50);
	outline-color: var(--color-main-50);
	outline-offset: .5em;
}

#point .sector_banner figure i {
	border-inline: 0;
	transform: translateY(50%);
}

#plugs .sector_banner figure i {
	border-block: 0;
	border-radius: 0;
	transform: translateY(-50%);
}

#thank .sector_banner figure i {
	border-width: 0 0 0 thin;
	transform: translateX(100%);
}

#icons .sector_banner figure i {
	border-width: thin 0;
	border-radius: .2em;
}

#release .sector_banner figure i {
	border-width: 0 thin 0 0;
}

#license .sector_banner figure i {
	border: 0;
	border-radius: 0;
}

.sector_banner figure i:nth-child(2) {
	rotate: -45deg;
}

.sector_banner figure i:nth-child(3) {
	rotate: -90deg;
}

.sector_banner figure i:nth-child(4) {
	rotate: -135deg;
}

.sector_banner figure i:nth-child(5) {
	rotate: -180deg;
}

.comment {
	position: absolute;
	inset: auto 0 5rem;
	animation: none !important;
}

.comment ul {
	flex-flow: row;
	min-height: 20em;
	padding: 2em;
	scroll-snap-type: X mandatory;
	scroll-padding: 2em;
	overflow: auto clip;
}

.comment li {
	flex: 0 0 100%;
	position: relative;
	display: flex;
	flex-flow: column-reverse;
	align-items: center;
	text-align: justify;
	text-align-last: center;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	font-size: .75em;
	gap: .5em;
	color: var(--color-grey-50);
	transition: var(--transition-hover);
}

.comment li:not(.show) {
	opacity: 0;
	transform: scale(.98);
}

.comment a {
	color: var(--color-main-100);
	outline-color: var(--color-main-10);
	font-size: 1em;
	padding: .25em;
	padding-right: revert-rule;
	box-shadow: var(--shadow, 0 -2em 5em -.5em);
}

.comment a:after {
	content: "· " attr(href);
}

.comment a:before {
	content: none;
}

.comment li:not(:hover) p,
.comment li:hover i {
	transform: scale(1.1) translatey(-1em);
	opacity: 0;
	pointer-events: none;
}

.comment i,
.comment p {
	background: #fff8;
	box-shadow: 0 0 1em #0001;
	border-radius: 2em;
	padding: .5em 1em;
	outline: thin solid var(--color-main-10);
	z-index: 1;
	transition: var(--transition-hover), pointer-events 0s;
}

.comment i {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	text-overflow: ellipsis;
	align-self: stretch;
	overflow: hidden;
}

.comment p {
	position: absolute;
	inset: 0;
	inset-block: var(--position, auto 3em);
	max-height: 20em;
	overflow: hidden auto;
}

.comment img {
	width: 2em;
	border-radius: 50%;
}

.sector_parts {
	min-width: min(100vmin, 100%);
}

.sector_list {
	gap: .5em;
	font-size: .75em;
}

.for_purchase hgroup {
	text-align: center;
}

.for_purchase article {
	position: relative;
	padding: var(--gap);
}

.for_purchase article.sector_parts:before {
	content: "";
	background: var(--color-silv-50);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(5px);
	box-shadow: 0 0 1em var(--color-grey-05);
	border-radius: var(--gap);
	position: absolute;
	inset: 0;
	z-index: -1;
}

.for_purchase .contact_list {
	font-size: .875em;
	flex-wrap: wrap;
	margin: 0 0 .5em;
}

.for_purchase figure {
	position: fixed;
	opacity: .5;
	z-index: -2;
	height: 50%;
	width: 80%;
	inset: var(--gap) 0 auto;
	margin: auto;
}

.for_purchase figure img {
	opacity: 0;
	position: absolute;
	margin: auto;
	inset: 0;
	object-fit: none;
	transform: scale(.9);
	transition: var(--transition-slow);
}

.for_purchase details+details {
	border-top: thin solid var(--color-grey-10);
}

.for_purchase summary {
	display: flex;
	position: relative;
	align-items: center;
	flex-wrap: wrap;
	padding-block: 1em;
	gap: 1em;
}

.for_purchase summary:after {
	content: '\f079';
	position: absolute;
	font-size: .875em;
	width: 2em;
	height: 2em;
	right: 0;
	top: 1em;
	text-align: center;
	color: var(--color-grey-50);
	background: var(--color-grey-05);
	border-radius: 50%;
	transition: var(--transition-hover);
}

.for_purchase details[open] summary:after {
	transform: rotate(180deg);
}

.for_purchase details summary~* {
	display: revert;
	color: rgba(0, 0, 0, 0.7);
	font-size: .875em;
	margin: -.5em 0 1em;
}

.for_purchase details[open]:not(:has(+ details[open])):nth-of-type(1)~figure img:nth-of-type(1),
.for_purchase details[open]:not(:has(+ details[open])):nth-of-type(2)~figure img:nth-of-type(2),
.for_purchase details[open]:not(:has(+ details[open])):nth-of-type(3)~figure img:nth-of-type(3) {
	opacity: .1;
	transform: none;
}

.for_colors hgroup {
	text-align: center;
}

.for_colors h2 {
	background: linear-gradient(hsl(var(--main-color)), hsl(var(--subs-color)));
	-webkit-text-fill-color: #0000;
	-webkit-background-clip: text;
	background-clip: text;
}

.for_colors figure {
	justify-content: center;
	align-items: center;
}

.for_colors figure i {
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: radial-gradient(circle, hsl(var(--main-color) / .5), #0000 50%);
	flex: 0 0 100vmax;
	aspect-ratio: 1;
	margin: -25%;
	outline: thin solid var(--color-grey-10);
	border-radius: 50%;
}

.for_colors figure i:nth-child(2) {
	background-image: radial-gradient(circle, hsl(var(--subs-color) / .5), #0000 50%);
}

.color_picker {
	margin: 2em 0;
	gap: .5em;
	justify-content: center;
}

.color_picker label {
	flex: 1;
	width: 15em;
	justify-content: space-evenly;
	cursor: pointer;
}

.color_picker input {
	width: 0;
	opacity: 0;
}

.color_picker button {
	color: #fff;
	background: hsl(var(--main-color));
}

.color_picker #subs-color-copy {
	background: hsl(var(--subs-color));
}

.thyuu_theme_button {
	font-size: .875em;
	margin: auto;
	width: fit-content;
	pointer-events: none;
}

.thyuu_theme_button button {
	padding: .75em 1em;
	color: #fff;
	background: linear-gradient(135deg, hsl(var(--main-color) / .8) 30%, hsl(var(--subs-color) / .8) 70%) 50% / 300% 100%;
	box-shadow: 0 0 1em 0 hsl(var(--main-color) / .2), 0 .5em 1em -0.5em hsl(var(--main-color) / .5);
}

.thyuu_theme_button button::before {
	background: none;
}

.for_modes span:nth-of-type(2) {
	float: right;
}

.for_modes figure {
	height: 100%;
}

.for_modes li {
	flex: 1;
	height: 100%;
	clip-path: polygon(0 0, 100% 0, calc(100% - 10vmax) 100%, 0 100%);
	contain: strict;
	content-visibility: auto;
	overflow: clip;
	transition: var(--transition-slow);
}

.for_modes li.night {
	clip-path: polygon(10vmax 0, 100% 0, 100% 100%, 0 100%);
	margin-left: -10vmax;
}

.for_modes li:hover {
	flex: 2;
}

.for_modes li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0;
}

.for_modes li.night img {
	object-position: 100%;
}

.for_modes figure .sun-area {
	--hue: var(--custom-main-hue, 0deg);
	--sat: var(--custom-main-sat, 70%);
	--lig: var(--custom-main-lig, 70%);
	color: hsl(var(--hue) var(--sat) var(--lig) / .2);
	left: 50vw;
	transform: translatex(-50%);
}

.for_modes figure .night .sun-area {
	--hue: var(--custom-subs-hue, 214deg);
	--sat: var(--custom-subs-sat, 70%);
	--lig: var(--custom-subs-lig, 50%);
	right: 50vw;
	left: auto;
	transform: translatex(50%);
}

.for_modes figure:not(:hover) .sun-area>* {
	animation-play-state: paused;
}

.for_season .toggle-blocks {
	opacity: 1;
	visibility: visible;
}

.for_season figure li {
	--tsf: scale(1.1);
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	inset: 0;
	transition: var(--transition-slow);
}

.for_layout.active :is(hgroup, article) {
	margin: 0 0 0 -100vw;
	opacity: 0;
}

.for_layout button {
	position: absolute;
	inset: auto 0 1em;
	margin: auto;
	z-index: 2;
	pointer-events: auto;
}

.for_layout .toggle-blocks ul {
	--tsf: translatex(100%);
	display: flex;
	position: absolute;
	flex-wrap: wrap;
	align-items: center;
	inset: 0;
	padding: var(--nap) var(--gap);
	gap: var(--gap);
	max-width: 100vmin;
	margin: auto;
	pointer-events: auto;
	overflow: auto;
}

.for_layout .toggle-blocks ul:after,
.for_layout .toggle-blocks ul:before {
	content: "";
	flex: 100%;
}

.for_layout .toggle-blocks ul li {
	flex: 40%;
	min-width: 15em;
	text-align: center;
}

.for_layout .toggle-blocks ul li p {
	opacity: .5;
	font-size: .75em;
}

.for_layout .toggle-blocks ul li img {
	width: 100%;
	height: auto;
	margin: 0 0 .5em;
	background: white;
	border-radius: 1em;
	outline: thin solid var(--color-grey-05);
}

.for_console {
	background-image:
		radial-gradient(circle at 25% 65%, hsl(var(--main-color) / .15), #0000 25%),
		radial-gradient(circle at 75% 35%, hsl(var(--subs-color) / .15), #0000 25%);
	background-repeat: no-repeat;
	background-attachment: local;
}

.for_template ul {
	flex-flow: row;
}

.for_template ul li:is(:first-child, :last-child) {
	top: -8em;
}

.for_template ul li:is(:nth-child(2), :nth-child(8)) {
	top: -6em;
}

.for_template ul li:is(:nth-child(3), :nth-child(7)) {
	top: -4em;
}

.for_template ul li:is(:nth-child(4), :nth-child(6)) {
	top: -2em;
}

.for_article figure {
	display: grid;
	grid: 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr;
	place-content: center;
	place-items: center;
}

.for_article {
	text-align: center;
}

.for_article h2 {
	background: linear-gradient(90deg, #becbb1, #a18db0);
	-webkit-text-fill-color: #0000;
	-webkit-background-clip: text;
	background-clip: text;
}

.for_article figure a {
	--color: 236 128 167;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	font-size: .75em;
	flex: 0 0 33.33%;
	height: 70%;
	aspect-ratio: 1;
	color: rgb(var(--color) / 1);
	outline: thin solid rgb(var(--color) / var(--color-a, .3));
	outline-offset: 70vmin;
	grid-column: var(--column);
	border-radius: 50%;
	transition: var(--transition-slow), background var(--transition-slow) .5s;
}

.for_article figure a:hover {
	--color-a: 1;
	scale: .9;
	outline-offset: 0;
	background: rgb(var(--color) / .2);
}

.for_article figure a:nth-child(3),
.for_article figure a:nth-child(8) {
	--column: 4;
	--color: 221 189 164;
}

.for_article figure a:nth-child(4) {
	--column: 1;
	--color: 190 203 177;
}

.for_article figure a:nth-child(5) {
	--column: 5;
	--color: 161 141 176;
}

.for_article figure a:nth-child(1),
.for_article figure a:nth-child(6) {
	--column: 2;
	--color: 168 174 190;
}

.for_article figure a::before {
	font-size: 4em;
	background: none;
}

.for_metas {
	background: var(--bgc);
	overflow: clip;
	z-index: 2;
}

.for_metas .toggle-btnist {
	position: absolute;
	right: 15%;
	display: grid;
	white-space: nowrap;
}

.for_metas .toggle-shapes {
	justify-content: space-evenly;
	align-items: center;
	gap: 1em;
	border-block: thin solid var(--color-grey-10);
	z-index: 0;
	transition: var(--transition-slow);
}

.for_metas .toggle-shapes:before {
	content: "";
	position: absolute;
	height: 1em;
	width: 0;
	background: currentColor;
	box-shadow: 0 0 1em;
	border-radius: 50%;
	outline: thin solid #0000;
	outline-offset: 5vw;
	opacity: 0;
	z-index: 1;
	transition: var(--transition-slow);
}

.for_metas hgroup {
	width: 70vw;
}

.for_metas[class*="show-"] hgroup {
	transform: scale(.9);
	opacity: 0;
	animation: none;
}

.for_metas .toggle-blocks {
	inset: var(--gap);
	width: 70vw;
	margin: auto;
	display: grid;
	align-items: center;
}

.for_metas .toggle-blocks li {
	--tsf: scale(1.1);
	transform-origin: left;
	grid-area: 1 / 1;
}

.for_metas .toggle-shapes i {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1px;
	height: 100%;
	color: var(--color-grey-10);
	background: currentColor;
	border-radius: 2em;
	z-index: 0;
	transition: var(--transition-slow);
}

.toggle-shapes i:before {
	content: "";
	position: absolute;
	font-size: max(5vmin, 1em);
	font-weight: 200;
	min-width: 1em;
	height: 1em;
	bottom: 1em;
	text-align: center;
	line-height: 1;
	white-space: nowrap;
	border-radius: 50%;
	opacity: 0;
	transition: inherit;
}

.for_metas:is(.show-mood, .show-camera, .show-readaloud, .show-stats, .show-headernum) .toggle-shapes i:before {
	opacity: 1;
}

.for_metas.show-weather .toggle-shapes:before {
	color: #ffe8d7;
	opacity: 1;
	transform: translateY(-70%);
	width: 50vw;
	height: 50vw;
}

.for_metas.show-weather .toggle-shapes i {
	transform: rotate(20deg);
}

.for_metas:is(.show-weatherm, .show-location) .toggle-shapes i:before {
	opacity: 1;
	background: currentColor;
	bottom: -1em;
}

.for_metas.show-weather .toggle-shapes i:nth-of-type(1) {
	height: 50%;
}

.for_metas.show-weather .toggle-shapes i:nth-of-type(2) {
	height: 40%;
}

.for_metas.show-weather .toggle-shapes i:nth-of-type(3) {
	height: 80%;
}

.for_metas.show-weather .toggle-shapes i:nth-of-type(4) {
	height: 70%;
}

.for_metas.show-mood .toggle-shapes:before {
	color: hsl(37.32deg 100% 59.02% / 30%);
	opacity: 1;
	width: 100%;
	transition: var(--transition-slow), width 3s;
}

.for_metas.show-mood .toggle-shapes i {
	height: 3em;
	width: 3em;
	border-radius: 50%;
	background: 0;
}

.for_metas.show-mood .toggle-shapes i:nth-of-type(1) {
	top: 20%;
}

.for_metas.show-mood .toggle-shapes i:nth-of-type(2) {
	top: -10%;
}

.for_metas.show-mood .toggle-shapes i:nth-of-type(3) {
	top: 10%;
}

.for_metas.show-mood .toggle-shapes i:nth-of-type(4) {
	top: -30%;
}

.for_metas.show-mood .toggle-shapes i:before {
	content: "😞";
	color: #000;
	bottom: 0;
}

.for_metas.show-mood .toggle-shapes i:nth-of-type(2):before {
	content: "🙂";
}

.for_metas.show-mood .toggle-shapes i:nth-of-type(3):before {
	content: "☹️";
}

.for_metas.show-mood .toggle-shapes i:nth-of-type(4):before {
	content: "😄";
}

.for_metas.show-location .toggle-shapes:before {
	width: 100vw;
	height: 100vh;
	background: url(../media/image/map.svg) no-repeat 50% / cover;
	transition: var(--transition-hover);
	opacity: .1;
	outline: 0;
	box-shadow: none;
	transition: var(--transition-hover);
}

.for_metas.show-location .toggle-shapes i {
	color: #4cae4f1a;
	transform: rotate(180deg);
	height: 4em;
	width: 4em;
}

.for_metas.show-location .toggle-shapes i:before {
	font-size: 1em;
	top: -2em;
}

.for_metas.show-location .toggle-shapes i:nth-of-type(1) {
	top: -20%;
	scale: 1.5;
}

.for_metas.show-location .toggle-shapes i:nth-of-type(2) {
	top: 20%;
}

.for_metas.show-location .toggle-shapes i:nth-of-type(3) {
	top: 0;
	scale: 1;
}

.for_metas.show-location .toggle-shapes i:nth-of-type(4) {
	top: -30%;
	scale: 2;
}

.for_metas.show-camera .toggle-shapes:before {
	opacity: 1;
	width: 10vw;
	height: 10vw;
	color: hsl(0deg 100% 50% / 10%);
	box-shadow: none;
	outline: thin solid;
	outline-offset: 1em;
}

.for_metas.show-camera .toggle-shapes i:before {
	content: "光圈";
}

.for_metas.show-camera .toggle-shapes i:nth-of-type(2):before {
	content: "快门速度";
}

.for_metas.show-camera .toggle-shapes i:nth-of-type(3):before {
	content: "感光度";
}

.for_metas.show-camera .toggle-shapes i:nth-of-type(4):before {
	content: "对焦模式";
}

.for_metas.show-fastread .toggle-shapes i:nth-of-type(2) {
	width: 30%;
	height: 70%;
	color: hsl(200deg 50% 50% / 10%);
	background-image: linear-gradient(to right, rgb(0 0 0 / 10%) 1px, #0000 0), linear-gradient(to bottom, rgb(0 0 0 / 10%) 1px, #0000 0);
	background-size: 101% 10%;
	background-position: center;
}

.for_metas.show-readaloud .toggle-shapes i {
	color: #e2d6f5;
	width: 4em;
}

.for_metas.show-readaloud .toggle-shapes i:nth-of-type(1) {
	height: 30%;
}

.for_metas.show-readaloud .toggle-shapes i:nth-of-type(2) {
	height: 40%;
}

.for_metas.show-readaloud .toggle-shapes i:nth-of-type(3) {
	height: 50%;
}

.for_metas.show-readaloud .toggle-shapes i:nth-of-type(4) {
	height: 60%;
}

.for_metas.show-headernum .toggle-shapes i {
	color: #ffd7d4;
	width: 100%;
	height: 1px;
}

.for_metas.show-headernum .toggle-shapes i:before {
	content: "H2";
}

.for_metas.show-headernum .toggle-shapes i:nth-of-type(2):before {
	content: "H3";
}

.for_metas.show-headernum .toggle-shapes i:nth-of-type(3):before {
	content: "H4";
}

.for_metas.show-headernum .toggle-shapes i:nth-of-type(4):before {
	content: "H5";
}

.for_metas.show-copyright .toggle-shapes {
	transform: rotate(90deg);
}

.for_metas.show-stats .toggle-shapes i:is(:nth-of-type(1), :nth-of-type(3)) {
	background: hsl(180 20% 90% / 1);
	width: 20%;
	height: 40%;
}

.for_metas.show-stats .toggle-shapes i:nth-of-type(3) {
	width: 40%;
}

.for_metas.show-stats .toggle-shapes i:nth-of-type(1):before {
	content: "阅读5分钟";
}

.for_metas.show-stats .toggle-shapes i:nth-of-type(3):before {
	content: "字数1000字";
}

.for_authors {
	color: hsl(0deg 0% 100% / 70%);
	background: #000;
	justify-content: flex-end;
}

.for_authors figure img {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.for_authors figure .authors_mg {
	z-index: 1;
}

.for_authors figure:after {
	content: linear-gradient(#0000, #000);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	height: 100%;
	width: 100%;
	-webkit-mask: linear-gradient(#0000 30%, #000 60%);
	mask: linear-gradient(#0000 30%, #000 60%);
	z-index: 1;
}

.for_authors article ul li,
.for_authors :where(.button) {
	color: inherit;
	background: var(--color-silv-10);
	z-index: 3;
}

.authors_tt {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	inset: var(--gap);
	height: 30vh;
	font-size: 10vw;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	opacity: .1;
	z-index: 1;
}

#plugs .sector_list img {
	flex: 0;
	height: 2em;
	margin: .5em 1em .5em 0;
}

.for_editors figure {
	position: relative;
	flex: 1;
	flex-flow: wrap;
	width: 100%;
	background: var(--color-silv-50);
	box-shadow: 0 0 1em var(--color-grey-05);
	border-radius: 2em;
	text-align: center;
	text-wrap: balance;
	overflow: clip;
}

.for_editors figure ul {
	position: relative;
	flex: 1;
	min-width: min(15em, 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gap);
	box-shadow: 1px 1px var(--color-grey-10);
	overflow: clip;
	transition: var(--transition-slow);
}

.for_editors figure ul:hover {
	flex: 1.5;
}

.for_editors .sector_list {
	position: absolute;
	inset: 0;
	display: grid;
	grid: auto / repeat(4, 1fr);
	gap: clamp(.5em, 2vmin, 2em);
	margin: clamp(1em, 4vmin, 5em);
	justify-items: center;
	align-items: center;
}

.for_editors .sector_list svg {
	opacity: .08;
	width: 80%;
	height: 80%;
	transition: var(--transition-slow);
}

.for_editors .sector_list svg:hover {
	opacity: .5;
	fill: var(--color-main-100);
}

.for_widget code {
	font-size: .75em;
	position: absolute;
	inset: auto 1em 1em;
	padding: 2em;
	font-family: 'Monaco', 'Consolas', 'MiSans VF';
	color: var(--color-grey-50);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 -1em 1em -1em var(--color-grey-10);
	white-space: pre-wrap;
	tab-size: 0;
	z-index: 2;
}

.for_widget img {
	width: min(15em, 100%);
	height: auto;
	margin: auto auto 0;
	mask: linear-gradient(#000 50%, #0000);
	transition: var(--transition-hover);
}

.for_widget li:hover img {
	transform: translateY(1em);
}

.for_plugins .sector_list a {
	background: var(--color-grey-05);
	padding: 1em;
	line-height: 1;
	border-radius: 2em;
}

.for_embed .sector_parts li em,
.for_function .sector_parts li em {
	display: block;
	font-size: 3em;
	line-height: 1;
	color: var(--color-main-100);
	opacity: .85;
	filter: drop-shadow(0 .15em .3em var(--color-main-10));
	transition: transform var(--transition-panel);
}

.for_embed .sector_parts li:hover em,
.for_function .sector_parts li:hover em {
	transform: rotate(-8deg) scale(1.12);
}

.thank_author ul {
	flex-flow: nowrap;
	padding: 1em 0;
	overflow: auto;
}

.thank_author li {
	background: #333;
	flex: 0 0 17em !important;
	overflow: clip;
}

.thank_author li:before {
	content: "";
	aspect-ratio: 1;
	margin: 0 0 2em;
}

.thank_author li:after {
	content: "";
	position: absolute;
	-webkit-backdrop-filter: blur(4em) saturate(2) brightness(.5);
	backdrop-filter: blur(4em) saturate(2) brightness(.5);
	inset: 50% 0 0;
	-webkit-mask: linear-gradient(#0000, #000 50%);
	mask: linear-gradient(#0000, #000 50%);
	z-index: 1;
}

.thank_author li>*:not(img) {
	color: white;
	text-shadow: var(--color-grey-10) 0.1em 0.1em 0.1em;
	z-index: 2;
}

.thank_author img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	transition: var(--transition-hover);
}

.thank_author li:hover img {
	width: 16em;
	height: 16em;
	margin: .5em;
}

.thank_author h4 {
	font-family: "FontQu Smile 常规", "MiSans VF", sans-serif;
	font-size: 1.5em;
	line-height: 1;
}

.thank_author li p {
	font-size: .875em;
	border-top: thin solid var(--color-silv-10);
	padding: 1em 0 0;
	opacity: .7;
}

.thank_author :is(i, a) {
	position: absolute;
	top: var(--gap);
	margin: -1em;
	-webkit-backdrop-filter: blur(1em) saturate(1.5) brightness(.9);
	backdrop-filter: blur(1em) saturate(1.5) brightness(.9);
	border-radius: 2em;
}

.thank_author i {
	padding: 1em;
	line-height: 1;
	outline: thin solid var(--color-grey-05);
	outline-color: hsl(from currentColor h s l / 5%);
}

.thank_author a {
	right: var(--gap);
}

.thank_touser li {
	justify-content: flex-start;
	align-items: center;
	margin: 3em 0 0;
}

.thank_touser img {
	width: 3.5em;
	border-radius: 2em;
	margin: calc(var(--gap)*-1 - 1.75em) 0 0;
	background: white;
	padding: .25em;
	outline: inherit;
	box-shadow: inherit;
	z-index: 1;
}

.thank_touser p {
	font-size: .875em;
	max-height: min(20em, 50vh);
	mask: linear-gradient(180deg, #000 calc(100% - var(--gap)), #0000);
	padding: 0 var(--gap);
	margin: 0 calc(var(--gap)* -1);
	white-space: pre-line;
	overscroll-behavior: contain;
	overflow: auto;
}

.thank_touser a:after {
	content: attr(href);
}

#thank .authors_tt {
	font-size: 20vmax;
	white-space: normal;
	line-height: 1;
	margin: auto;
	filter: blur(5px);
	text-wrap: balance;
}

/* 商业使用授权 */
.license_search {
	display: flex;
	align-items: center;
	gap: .5em;
	width: min(30em, 90%);
	padding: .5em;
	border-radius: 2em;
	background: var(--color-silv-50);
	-webkit-backdrop-filter: blur(1em) saturate(2);
	backdrop-filter: blur(1em) saturate(2);
	box-shadow: 0 0 1em var(--color-grey-10);
	outline: thin solid var(--color-grey-05);
	transition: var(--transition-panel);
}

.license_search:focus-within {
	box-shadow: 0 0 1.5em hsl(var(--hue) var(--sat) var(--lig) / .25);
	outline-color: var(--color-main-50);
}

.license_search > i:first-child {
	font-size: 1.2em;
	color: var(--color-grey-50);
	padding-left: .8em;
	transition: var(--transition-normal);
}

.license_search:focus-within > i:first-child {
	color: var(--color-main-100);
}

.license_search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: 0;
	font: inherit;
	color: inherit;
	line-height: 2;
	padding: 0 .5em;
}

.license_search input::placeholder {
	color: var(--color-grey-50);
	opacity: .8;
}

.license_search input:focus {
	outline: 0;
}

.license_search button {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: .875em;
	padding: .6em 1.2em .6em .5em;
	line-height: 1;
	color: #fff;
	border: 0;
	border-radius: 2em;
	cursor: pointer;
	background: linear-gradient(135deg, var(--color-main-100), hsl(var(--hue) calc(var(--sat) * .8) calc(var(--lig) - 10%)));
	box-shadow: 0 .3em .8em hsl(var(--hue) var(--sat) var(--lig) / .3);
	transition: var(--transition-hover);
}

.license_search button::before {
	content: "\e6aa";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	background: hsl(0deg 0% 100% / .2);
	margin: -.2em 0;
}

.license_search button:hover {
	transform: translateY(-1px);
	box-shadow: 0 .5em 1em hsl(var(--hue) var(--sat) var(--lig) / .4);
}

/* 授权查询结果 */
.license_result {
	position: relative;
	display: flex;
	flex-flow: column;
	align-items: center;
	gap: 1.2em;
	width: min(32em, 92%);
	padding: 1.8em 1.6em 1.6em;
	border-radius: var(--gap);
	background: var(--color-silv-50);
	-webkit-backdrop-filter: blur(1em) saturate(2);
	backdrop-filter: blur(1em) saturate(2);
	box-shadow: 0 0 1em var(--color-grey-05);
	outline: thin solid var(--color-grey-05);
	text-align: center;
	overflow: clip;
	animation: license-in var(--transition-panel) both;
}

.license_result[hidden] {
	display: none !important;
}

.license_result::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity var(--transition-panel);
	pointer-events: none;
}

.license_result.is-loading {
	flex-flow: row;
	justify-content: center;
	gap: .8em;
	color: var(--color-grey-50);
}

.license_result.is-loading .is-spin {
	animation: rotate 1s linear infinite;
}

.license_result-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .8em;
	width: 100%;
}

.license_result-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.6em;
	height: 3.6em;
	border-radius: 50%;
	line-height: 1;
}

.license_result-badge i {
	font-size: 1.8em;
	position: relative;
	z-index: 2;
}

.license_result-title {
	font-family: '字制区喜脉喜欢体', sans-serif;
	font-size: 1.45em;
	font-weight: 100;
	letter-spacing: .08em;
	line-height: 1;
}

.license_result-sub {
	font-size: .78em;
	opacity: .65;
	letter-spacing: .04em;
}

/* 已授权 — 尊贵金色徽章 */
.license_result.is-licensed {
	background:
		linear-gradient(135deg, hsl(45deg 90% 97% / .85), hsl(38deg 60% 92% / .7));
	border: 0;
	outline: .08em solid hsl(42deg 80% 70% / .6);
	box-shadow:
		0 .3em 1.5em hsl(40deg 80% 60% / .18),
		0 0 0 .2em hsl(45deg 90% 80% / .25),
		inset 0 1px 0 hsl(0deg 0% 100% / .6);
}

.license_result.is-licensed::before {
	background:
		radial-gradient(circle at 50% 0%, hsl(45deg 100% 85% / .55), transparent 60%),
		radial-gradient(circle at 0% 100%, hsl(35deg 90% 70% / .12), transparent 50%);
	opacity: 1;
}

.license_result.is-licensed .license_result-badge {
	background:
		conic-gradient(from 180deg,
			hsl(45deg 95% 75%),
			hsl(38deg 85% 55%),
			hsl(50deg 100% 80%),
			hsl(42deg 90% 62%),
			hsl(45deg 95% 75%));
	color: #fff;
	box-shadow:
		0 .25em .8em hsl(40deg 80% 50% / .45),
		inset 0 0 0 .08em hsl(0deg 0% 100% / .5),
		inset 0 -.1em .3em hsl(35deg 60% 40% / .3);
	animation: badge-glow 3s ease-in-out infinite;
}

.license_result.is-licensed .license_result-badge::after {
	content: "";
	position: absolute;
	inset: -.4em;
	border-radius: inherit;
	background: radial-gradient(circle, hsl(45deg 100% 75% / .4), transparent 70%);
	z-index: 0;
	animation: badge-pulse 2.5s ease-in-out infinite;
}

.license_result.is-licensed .license_result-title {
	background: linear-gradient(135deg, hsl(40deg 80% 35%), hsl(45deg 85% 45%) 50%, hsl(35deg 75% 30%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 .05em .1em hsl(40deg 80% 60% / .2);
}

.license_result.is-licensed .license_result-sub {
	color: hsl(38deg 50% 40%);
}

.license_result.is-licensed .license_result-body {
	background: hsl(40deg 50% 95% / .5);
	outline: .05em solid hsl(40deg 60% 70% / .3);
}

.license_result.is-licensed .license_result-body dt {
	color: hsl(38deg 40% 45%);
}

/* 未授权 — 沉稳暗调 */
.license_result.is-unlicensed {
	background:
		linear-gradient(135deg, hsl(220deg 15% 96% / .9), hsl(220deg 10% 90% / .75));
	border: 0;
	outline: .08em solid hsl(220deg 10% 70% / .4);
	box-shadow:
		0 .3em 1.2em hsl(220deg 20% 30% / .12),
		0 0 0 .15em hsl(220deg 10% 80% / .3),
		inset 0 1px 0 hsl(0deg 0% 100% / .5);
}

.license_result.is-unlicensed::before {
	background:
		radial-gradient(circle at 50% 0%, hsl(220deg 15% 85% / .4), transparent 60%);
	opacity: 1;
}

.license_result.is-unlicensed .license_result-badge {
	background:
		conic-gradient(from 180deg,
			hsl(220deg 12% 65%),
			hsl(220deg 15% 50%),
			hsl(215deg 10% 72%),
			hsl(220deg 18% 55%),
			hsl(220deg 12% 65%));
	color: #fff;
	box-shadow:
		0 .2em .6em hsl(220deg 20% 30% / .25),
		inset 0 0 0 .08em hsl(0deg 0% 100% / .35),
		inset 0 -.1em .3em hsl(220deg 20% 40% / .2);
}

.license_result.is-unlicensed .license_result-title {
	color: hsl(220deg 18% 35%);
}

.license_result.is-unlicensed .license_result-sub {
	color: hsl(220deg 10% 50%);
}

.license_result.is-unlicensed .license_result-body {
	background: hsl(220deg 15% 95% / .5);
	outline: .05em solid hsl(220deg 10% 80% / .4);
}

.license_result.is-unlicensed .license_result-body dt {
	color: hsl(220deg 12% 50%);
}

/* 已过期 — 琥珀警告 */
.license_result.is-expired {
	background:
		linear-gradient(135deg, hsl(38deg 90% 95% / .85), hsl(30deg 60% 90% / .7));
	border: 0;
	outline: .08em solid hsl(35deg 80% 65% / .5);
	box-shadow:
		0 .3em 1.2em hsl(30deg 70% 50% / .15),
		0 0 0 .18em hsl(38deg 80% 75% / .25),
		inset 0 1px 0 hsl(0deg 0% 100% / .5);
}

.license_result.is-expired::before {
	background:
		radial-gradient(circle at 50% 0%, hsl(35deg 90% 80% / .45), transparent 60%);
	opacity: 1;
}

.license_result.is-expired .license_result-badge {
	background:
		conic-gradient(from 180deg,
			hsl(35deg 90% 70%),
			hsl(28deg 80% 55%),
			hsl(42deg 95% 75%),
			hsl(32deg 85% 60%),
			hsl(35deg 90% 70%));
	color: #fff;
	box-shadow:
		0 .2em .7em hsl(30deg 70% 45% / .35),
		inset 0 0 0 .08em hsl(0deg 0% 100% / .4),
		inset 0 -.1em .3em hsl(28deg 60% 40% / .25);
	animation: badge-glow 3s ease-in-out infinite;
}

.license_result.is-expired .license_result-badge::after {
	content: "";
	position: absolute;
	inset: -.4em;
	border-radius: inherit;
	background: radial-gradient(circle, hsl(35deg 90% 70% / .35), transparent 70%);
	z-index: 0;
	animation: badge-pulse 2.5s ease-in-out infinite;
}

.license_result.is-expired .license_result-title {
	background: linear-gradient(135deg, hsl(30deg 70% 35%), hsl(35deg 75% 45%) 50%, hsl(28deg 65% 30%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.license_result.is-expired .license_result-sub {
	color: hsl(32deg 50% 40%);
}

.license_result.is-expired .license_result-body {
	background: hsl(35deg 50% 95% / .5);
	outline: .05em solid hsl(35deg 60% 70% / .3);
}

.license_result.is-expired .license_result-body dt {
	color: hsl(32deg 40% 45%);
}

/* 详情列表 */
.license_result-body {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .6em 1.2em;
	width: 100%;
	padding: 1em 1.2em;
	border-radius: calc(var(--gap) * .6);
	font-size: .88em;
	text-align: left;
	box-sizing: border-box;
}

.license_result-body dt {
	white-space: nowrap;
	font-weight: 300;
}

.license_result-body dd {
	color: inherit;
	font-weight: 400;
	word-break: break-all;
}

.license_result-error {
	font-size: .875em;
	color: var(--color-grey-50);
	line-height: 1.7;
}

/* 按钮在授权结果内对齐 */
.license_result > .button {
	margin-top: .2em;
}

/* 徽章动效 */
@keyframes badge-glow {
	0%, 100% { filter: brightness(1) saturate(1); }
	50% { filter: brightness(1.12) saturate(1.15); }
}

@keyframes badge-pulse {
	0%, 100% { transform: scale(1); opacity: .55; }
	50% { transform: scale(1.25); opacity: .2; }
}

@keyframes license-in {
	from {
		opacity: 0;
		transform: translateY(1em) scale(.95);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* 授权凭证查看器 */
.license_photo-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gap);
}

.license_photo-modal[hidden] { display: none; }

.license_photo-backdrop {
	position: absolute;
	inset: 0;
	background: hsl(220deg 20% 10% / .55);
	-webkit-backdrop-filter: blur(.8em) saturate(1.5);
	backdrop-filter: blur(.8em) saturate(1.5);
	opacity: 0;
	transition: opacity var(--transition-panel);
}

.license_photo-modal.show .license_photo-backdrop {
	opacity: 1;
}

.license_photo-box {
	position: relative;
	z-index: 1;
	display: flex;
	flex-flow: column;
	gap: var(--gap);
	width: min(32em, 92%);
	max-height: 88vh;
	padding: 1.4em;
	border-radius: var(--gap);
	background: var(--color-silv-50);
	-webkit-backdrop-filter: blur(1em) saturate(2);
	backdrop-filter: blur(1em) saturate(2);
	box-shadow: 0 1em 4em hsl(220deg 20% 10% / .3), inset 0 1px 0 hsl(0deg 0% 100% / .5);
	outline: thin solid var(--color-grey-10);
	opacity: 0;
	transform: translateY(1.5em) scale(.96);
	transition: var(--transition-panel);
	overflow: auto;
}

.license_photo-modal.show .license_photo-box {
	opacity: 1;
	transform: none;
}

.license_photo-box > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.license_photo-box > header hgroup p {
	font-size: .75em;
	color: var(--color-grey-50);
	letter-spacing: .08em;
}

.license_photo-box > header h3 {
	font-family: '字制区喜脉喜欢体', sans-serif;
	font-size: 1.2em;
	font-weight: 100;
	color: var(--color-main-100);
}

.license_photo-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	padding: 0;
	font-size: 1em;
	line-height: 1;
	color: var(--color-grey-50);
	border: 0;
	border-radius: 50%;
	background: var(--color-silv-10);
	cursor: pointer;
	transition: var(--transition-hover);
}

.license_photo-close:hover {
	color: #fff;
	background: var(--color-main-100);
	transform: rotate(90deg);
}

.license_photo-box figure {
	margin: 0;
	border-radius: calc(var(--gap) * .6);
	overflow: hidden;
	background: hsl(220deg 20% 95% / .6);
	outline: thin solid var(--color-grey-05);
}

.license_photo-box img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 60vh;
	object-fit: contain;
}

.license_photo-box .is-tips {
	text-align: center;
	color: var(--color-grey-50);
	font-size: .78em;
}

@media (max-width: 500px) {
	.license_photo-box {
		padding: 1em;
	}
}

.for_license :is(hgroup, article) ul li {
	min-height: auto;
	align-items: center;
	justify-content: center;
	gap: .6em;
	text-align: center;
}

.for_license :is(hgroup, article) ul li > i:first-child {
	font-size: 2.4em;
	color: var(--color-main-100);
	line-height: 1;
	margin-bottom: .2em;
	transition: var(--transition-panel);
}

.for_license :is(hgroup, article) ul li:hover > i:first-child {
	transform: scale(1.12) translateY(-.1em);
}

.for_license :is(hgroup, article) ul li h4 {
	font-size: 1.1em;
	font-weight: 400;
}

.for_license :is(hgroup, article) ul li p {
	font-size: .85em;
	color: var(--color-grey-50);
	line-height: 1.7;
}

/* 授权对比卡片 */
.for_license .license_compare li {
	min-height: auto;
	text-align: left;
	align-items: flex-start;
}

.for_license .license_compare .license_state {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: '字制区喜脉喜欢体', sans-serif;
	font-size: 1.2em;
	font-weight: 100;
}

.for_license .license_compare .license_state i {
	font-size: 1.2em;
}

.for_license .license_compare .is-licensed {
	border-top: .2em solid var(--color-main-100);
}

.for_license .license_compare .is-licensed .license_state {
	color: var(--color-main-100);
}

.for_license .license_compare .is-unlicensed {
	border-top: .2em solid var(--color-grey-10);
}

.for_license .license_compare .is-unlicensed .license_state {
	color: var(--color-grey-50);
}

.update-content>ul {
	display: flex;
	flex-flow: column;
	gap: var(--gap);
	align-items: center;
	transition: var(--transition-hover);
}

.update-content>ul:not(.active) {
	max-height: 0;
	opacity: 0;
	overflow: clip;
}

.update-content>ul>li {
	display: flex;
	flex-wrap: wrap;
	width: min(100vmin, 100%);
	min-width: min(100vmin, 100%);
	transform-origin: top;
	transition: var(--transition-slow);
}

.update-content .error {
	flex-flow: column;
	align-items: center;
	gap: .5em;
}

.update-content>ul>li:not(.lazded, .error) {
	opacity: 0;
}

.update-content>ul>li:not(.lazded) header {
	transform: translateX(-2em);
}

.update-content>ul>li:not(.lazded) article {
	transform: translateX(2em);
}

.update-content>ul>li>header {
	position: sticky;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	place-content: space-between;
	align-self: flex-start;
	flex: 0 0 min(9em, 100%);
	padding: var(--gap) 1em;
	top: var(--nap);
	z-index: 2;
	order: -1;
	transition: inherit;
}

/* 店铺装修页面样式 */
#shop .sector_banner figure i {
	border-width: thin thin thin thin;
	border-radius: .5em;
	transform: rotate(45deg) scale(.8);
}

.for_shop_brand .sector_parts ul {
	justify-content: center;
	gap: var(--gap);
}

.for_shop_brand .sector_parts ul li {
	position: relative;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	gap: 0.75em;
	padding: 2em 1.5em;
	min-height: 20em;
	max-width: 17em;
	flex: 1 1 17em;
	background: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(12px) saturate(2);
	border-radius: var(--gap);
	box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.5);
	overflow: hidden;
	transition: transform var(--transition-panel), box-shadow var(--transition-panel);
}

.for_shop_brand .sector_parts ul li::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, var(--color-main-10) 0%, transparent 65%);
	opacity: 0;
	transition: opacity var(--transition-panel);
	pointer-events: none;
}

.for_shop_brand .sector_parts ul li::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-main-100), transparent);
	opacity: 0.5;
}

.for_shop_brand .sector_parts ul li:hover {
	transform: translateY(-0.5em) scale(1.02);
	box-shadow: 0 1em 3em rgba(0, 0, 0, 0.12);
}

.for_shop_brand .sector_parts ul li:hover::before {
	opacity: 1;
}

.for_shop_brand .sector_parts ul li em {
	display: block;
	font-size: 3em;
	line-height: 1;
	color: var(--color-main-100);
	opacity: 0.85;
	filter: drop-shadow(0 0.15em 0.3em var(--color-main-10));
	transition: transform 0.5s cubic-bezier(.5, 0, 0, 1.4);
}

.for_shop_brand .sector_parts ul li:hover em {
	transform: rotate(-8deg) scale(1.12);
}

.for_shop_brand .sector_parts ul li h4 {
	font-size: 1.2em;
	font-weight: 500;
	margin: 0;
	color: var(--color-main-100);
	position: relative;
	z-index: 1;
}

.for_shop_brand .sector_parts ul li p {
	font-size: 0.9em;
	color: var(--color-grey-50);
	margin: 0;
	position: relative;
	z-index: 1;
}

.for_shop_brand .sector_parts ul li .is-tips {
	margin-top: auto;
	position: relative;
	z-index: 1;
	font-size: 0.8em;
}

.update-content>ul>li>header h2 {
	color: var(--color-main-100);
	font-size: 2em;
	line-height: 1;
}

.update-content>ul>li>header time {
	font-size: .75em;
	opacity: .5;
}

.update-content>ul>li>article {
	flex: min(15em, 100%);
	transition: inherit;
}

#feature .sector_blocks {
	padding-inline: 0;
}

.sun-area {
	position: absolute;
	pointer-events: none;
	font-size: 70vh;
	width: 1em;
	height: 1em;
	inset: 0;
	margin: auto;
	background: white;
	border-radius: 50%;
	transition: var(--transition-slow);
}

.sun-area flow,
.sun-area sun {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	margin: 0 auto;
	background: currentColor;
	box-shadow: 0 0 5vw;
	border-radius: 50%;
	rotate: -40deg;
	animation: rotate 50s linear infinite;
}

.sun-area flow {
	background: none;
	box-shadow: none;
	border: 1px solid;
	animation: flow 10s linear infinite backwards;
}

.sun-area flow:nth-child(2) {
	animation-duration: 7s;
	animation-delay: 3s;
}

.sun-area flow:nth-child(3) {
	animation-duration: 6s;
	animation-delay: 4s;
}

.sun-area star {
	position: absolute;
	width: .1em;
	height: .1em;
	left: -.1em;
	top: -.1em;
	box-shadow: 0 0 .1em, 0 0 .1em inset;
	border-radius: 50%;
}

.sun-area star:nth-child(2) {
	inset: auto -.1em -.1em auto;
	outline: 3px dotted;
	outline-offset: .025em;
	width: .05em;
	height: .05em;
}

@supports (animation-timeline: view()) {
	.sector_banner {
		--transform-a: scale(10);
		animation: transform, opacity;
		animation-timeline: view(block);
		animation-range: cover 0% contain 50%;
	}

	.sector:where(:not(.is-text, #first)) :where(hgroup, article) {
		--transform-a: scale(2);
		animation: transform, opacity;
		animation-timeline: view(block);
		animation-range: cover 0% cover 30%;
	}

	.for_season .toggle-blocks {
		border-radius: 2em;
		--transform-a: scale(.5);
		animation: transform, opacity;
		animation-timeline: view(block);
		animation-range: cover 0% cover 50%;
	}

	.for_article figure a {
		--transform-a: rotate(180deg) scale(2);
		animation: transform, opacity;
		animation-timeline: view(block);
		animation-range: cover 0% contain 80%;
		outline-offset: 0;
	}

	.for_article figure a:nth-child(odd):not(:last-child) {
		--transform-a: rotate(-180deg);
	}

	.for_article figure a:nth-last-child(2) {
		--transform-a: scale(.9);
	}

	.for_authors {
		margin-top: 50vh;
		padding-top: 30vh;
	}

	.for_authors figure {
		--transform-a: scale(2);
		--transform--origin-a: center;
		animation: transform both;
		animation-timeline: view(block 100% auto);
		overflow: clip;
		margin: 0 -1em;
	}

	.authors_tt {
		--opacity-a: .2;
		--opacity-b: .1;
		--transform-a: scale(.4);
		--transform--origin-a: center;
		animation: opacity both, transform both;
		animation-timeline: view(block);
		animation-range: cover 0% cover 100%;
	}

	#thank .authors_tt {
		--transform-a: translateY(-25vh) scale(.1);
		--transform-b: none;
		--transform--origin-a: 50%;
		--filter-b: blur(3px);
		animation: filter, transform;
		animation-timeline: view(block 0% auto);
		animation-range: cover 0% contain 50%;
	}
}

@media (width > 641px) {
	.sector:not(.is-text) .sector_banner:not(:hover) .is-tips {
		opacity: 0;
		transform: translateY(1em);
	}

	.sector:not(.is-text) .sector_banner:not(:hover) .is-tips:after {
		opacity: 0;
		scale: 2;
	}

	.comment {
		top: var(--nap);
	}

	.comment ul {
		display: grid;
		grid: auto / 1fr 1fr 1fr;
		place-items: center;
		height: 100%;
	}

	.comment li {
		width: 25em;
	}

	.comment li:nth-child(2) {
		grid-area: 3 / 2;
	}

	.comment li:nth-child(3) {
		grid-area: 2 / 3;
	}

	.comment li:not(:nth-child(2)) {
		--position: 3em auto;
		--shadow: 0 2em 5em -.5em;
		flex-flow: column;
	}

	.update-content>ul>li:before {
		content: "";
		width: 1em;
		--color: var(--color-main-100);
		margin: var(--gap) -.5em;
		background: linear-gradient(180deg, var(--color) calc(100% - 4em), #0000) no-repeat 50% 1em / 1px 100%, radial-gradient(circle, var(--color) 50%, #0000 60%) no-repeat 50% .5em / 1em 1em;
		opacity: .5;
		transition: inherit;
		z-index: 2;
	}

	.update-content>ul>li:not(.lazded):before {
		transform: translateY(2em);
	}
}

@media (width <=641px) {
	table {
		font-size: .75em;
		line-height: 1.5;
	}

	.banner .platform {
		flex: 100%;
		flex-flow: wrap;
		padding: var(--gap);
		border-radius: var(--gap);
		outline: thin solid hsl(0deg 0% 40% / .05);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		box-shadow: 0 0 1em -1em;
		overflow: clip;
	}

	.banner .platform menu {
		order: 3;
		flex: 100%;
		justify-content: space-around;
		margin: .25em -.75em -.75em;
	}

	.banner hgroup::before,
	.banner hgroup::after {
		display: none;
	}

	:is(.has-blocks-card) :is(hgroup, article) ul:not(.sector_list) {
		flex-flow: row;
		padding: 1em;
		margin: -1em;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overflow: auto;
	}

	:is(.has-blocks-card) :is(hgroup, article) ul li {
		top: 0 !important;
		flex: 0 0 fit-content;
		max-width: calc(100% - 2em);
		min-width: 50%;
		scroll-snap-stop: always;
		scroll-snap-align: center;
	}

	.for_article figure {
		display: flex;
		position: relative;
		flex-wrap: wrap;
	}

	.for_metas :is(hgroup, .toggle-blocks) {
		margin-top: -50vh;
	}

	.for_metas .toggle-shapes {
		height: 50vh;
		margin: auto;
	}

	.for_metas .toggle-btnist {
		grid: auto / 1fr 1fr 1fr;
		inset: auto var(--gap) var(--gap);
	}

	.update-content>ul>li header {
		flex: 100%;
		padding: .25em 1em;
		position: static;
	}

	.update-content>ul>li:not(.lazded) :is(header, article) {
		transform: translatey(2em);
	}
}

@keyframes sun-scale {
	0% {
		transform: scale(10);
		opacity: 0
	}

	100% {
		transform: scale(1);
		opacity: 1
	}
}

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

	100% {
		transform: rotate(365deg)
	}
}

@keyframes flow {
	0% {
		opacity: 0
	}

	10% {
		opacity: 1
	}

	100% {
		transform: scale(2) rotateY(360deg);
		opacity: 0
	}
}

@keyframes transform {
	0% {
		transform: var(--transform-a, translateY(1rem));
		transform-origin: var(--transform--origin-a, top);
	}

	to {
		transform: var(--transform-b, none);
	}
}

@keyframes filter {
	0% {
		filter: var(--filter-a, none);
	}

	100% {
		filter: var(--filter-b, none);
	}
}

@keyframes opacity {
	0% {
		opacity: var(--opacity-a, 0);
	}

	100% {
		opacity: var(--opacity-b, 1);
	}
}

/* ===== 官方动态 ===== */
.for_news.sector_blocks {
	min-height: auto;
	padding-block: calc(var(--gap) * 3);
	gap: calc(var(--gap) * 1.5);
}

.for_news > hgroup {
	text-align: center;
}

.news_tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6em;
	width: fit-content;
	margin-inline: auto;
	padding: .5em;
	border-radius: var(--gap);
	background: var(--color-silv-50);
	-webkit-backdrop-filter: blur(1em) saturate(2);
	backdrop-filter: blur(1em) saturate(2);
	box-shadow: var(--shadow-card);
	outline: thin solid var(--color-grey-05);
}

.news_tabs button {
	padding: .5em 1.4em;
	border-radius: calc(var(--gap) * .6);
	font-size: .9em;
	color: var(--color-grey-50);
	background: none;
	transition: var(--transition-panel);
}

.news_tabs button:hover {
	color: var(--color-main-100);
	background: var(--color-silv-10);
}

.news_tabs button.active {
	color: #fff;
	background: var(--color-main-100);
	box-shadow: 0 .2em .6em hsl(var(--hue) var(--sat) var(--lig) / .4);
}

.news_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(22em, 100%), 1fr));
	gap: var(--gap);
}

.news_loading,
.news_error,
.news_empty {
	grid-column: 1 / -1;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	gap: .8em;
	padding: calc(var(--gap) * 2);
	text-align: center;
	color: var(--color-grey-50);
}

.news_loading i,
.news_error i,
.news_empty i {
	font-size: 2.6em;
	color: var(--color-main-100);
	line-height: 1;
}

.news_loading .is-spin {
	animation: rotate 1s linear infinite;
}

.news_error span,
.news_empty span {
	font-size: 1.1em;
	color: var(--color-grey-50);
}

.news_error p {
	font-size: .85em;
	color: var(--color-grey-30);
	max-width: 30em;
}

.news_card {
	position: relative;
	display: flex;
	flex-flow: column;
	gap: .8em;
	padding: 1.4em;
	border-radius: var(--gap);
	background: var(--color-silv-50);
	-webkit-backdrop-filter: blur(1em) saturate(2);
	backdrop-filter: blur(1em) saturate(2);
	box-shadow: var(--shadow-card);
	outline: thin solid var(--color-grey-05);
	transition: var(--transition-panel);
	animation: license-in var(--transition-panel) both;
	overflow: clip;
}

.news_card[onclick] {
	cursor: pointer;
}

.news_card[onclick]:hover {
	transform: translateY(-.3em);
	box-shadow: 0 .4em 1.4em var(--color-grey-10);
}

.news_card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: .25em;
	background: var(--color-main-100);
	opacity: .8;
}

.news_card.is-update::before {
	background: hsl(210deg 80% 55%);
}

.news_card.is-notice::before {
	background: hsl(35deg 90% 55%);
}

.news_card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
}

.news_cat {
	padding: .2em .8em;
	border-radius: 1em;
	font-size: .75em;
	font-weight: 400;
	color: #fff;
	background: hsl(210deg 80% 55%);
}

.news_card.is-notice .news_cat {
	background: hsl(35deg 90% 55%);
}

.news_top {
	padding: .2em .6em;
	border-radius: 1em;
	font-size: .7em;
	font-weight: 400;
	color: #fff;
	background: hsl(0deg 75% 55%);
}

.news_date {
	margin-left: auto;
	font-size: .8em;
	color: var(--color-grey-30);
}

.news_card-title {
	font-family: '字制区喜脉喜欢体', sans-serif;
	font-size: 1.15em;
	font-weight: 100;
	line-height: 1.5;
	color: var(--color-main-100);
}

.news_card-desc {
	flex: 1;
	font-size: .85em;
	font-weight: 300;
	line-height: 1.8;
	color: var(--color-grey-50);
	text-autospace: ideograph-alpha;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news_card-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.news_card-foot a {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	font-size: .85em;
	color: var(--color-main-100);
	transition: var(--transition-fast);
}

.news_card-foot a:hover {
	gap: .6em;
}

.news_card-foot a i {
	font-size: .9em;
}

.news_footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
	margin-top: var(--gap);
}

.news_footer[hidden] {
	display: none;
}

/* 官方动态 —— 详情弹窗 */
.news_modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gap);
}

.news_modal[hidden] {
	display: none;
}

.news_modal-backdrop {
	position: absolute;
	inset: 0;
	background: hsl(220deg 20% 10% / .55);
	-webkit-backdrop-filter: blur(.8em) saturate(1.5);
	backdrop-filter: blur(.8em) saturate(1.5);
	animation: opacity var(--transition-panel) both;
}

.news_modal-box {
	position: relative;
	z-index: 1;
	display: flex;
	flex-flow: column;
	gap: var(--gap);
	width: min(44em, 92%);
	max-height: 88vh;
	padding: 1.4em;
	border-radius: var(--gap);
	background: var(--color-silv-50);
	-webkit-backdrop-filter: blur(1em) saturate(2);
	backdrop-filter: blur(1em) saturate(2);
	box-shadow: 0 0 2em var(--color-grey-10);
	outline: thin solid var(--color-grey-05);
	overflow: clip;
	animation: license-in var(--transition-panel) both;
}

.news_modal-box > header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap);
	padding-bottom: .8em;
	border-bottom: thin solid var(--color-grey-05);
}

.news_modal-box > header hgroup p {
	font-size: .8em;
	color: var(--color-main-100);
}

.news_modal-box > header h3 {
	font-family: '字制区喜脉喜欢体', sans-serif;
	font-size: 1.4em;
	font-weight: 100;
	line-height: 1.4;
}

.news_modal-close {
	flex: none;
	width: 2.4em;
	height: 2.4em;
	border-radius: 50%;
	font-size: 1em;
	color: var(--color-grey-50);
	background: var(--color-silv-10);
	transition: var(--transition-fast);
}

.news_modal-close:hover {
	color: #fff;
	background: hsl(0deg 75% 55%);
	transform: rotate(90deg);
}

.news_modal-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8em;
	font-size: .85em;
	color: var(--color-grey-30);
}

.news_modal-loading {
	display: flex;
	flex-flow: column;
	align-items: center;
	gap: .8em;
	padding: 3em;
	color: var(--color-grey-50);
}

.news_modal-loading i {
	font-size: 2.6em;
	color: var(--color-main-100);
	animation: rotate 1s linear infinite;
}

.news_modal-meta .button {
	font-size: .85em;
	padding: .4em 1em;
}

.news_modal-body {
	overflow-y: auto;
	font-size: .9em;
	font-weight: 300;
	line-height: 1.9;
	color: var(--color-grey-50);
	text-autospace: ideograph-alpha;
}

.news_modal-body p {
	margin-bottom: .8em;
}

.news_modal-body img {
	max-width: 100%;
	border-radius: calc(var(--gap) * .5);
}

@media screen and (max-width: 500px) {
	.news_grid {
		grid-template-columns: 1fr;
	}

	.news_modal-box {
		width: 96%;
		padding: 1em;
	}

	.news_modal-box > header h3 {
		font-size: 1.2em;
	}
}

@view-transition {
	navigation: auto;
}