@charset "utf-8";
@import url('https://at.alicdn.com/t/c/font_4975570_plg0g6ghqen.css');

/* 定制样式 */

:root {
	--main-color: #7C7CBC;
	--font-color: #3D3D3D;
	--back-color: #FAFAFA;
	--glass-back-color: hsl(0deg 0% 100% / 35%);
	--glass-line-color: hsl(0deg 0% 0% / 5%);
	--main-width: min(100em, 100%);
	--mini-width: (width <= 70rem);
	--head-height: 4rem;
	--edge-size: 2rem;
}

:root:where([data-theme="dark"]) {
	--main-color: #b0b0e8;
	--font-color: #FAFAFA;
	--back-color: #111122;
	--glass-back-color: hsl(0deg 0% 0% / 5%);
	--glass-line-color: hsl(0deg 0% 100% / 5%);
}

:root:where([data-theme="dark"]) img {
	filter: brightness(0.7);
}

@font-face {
    font-family: 'Alimama FangYuanTi VF';
    src: local('Alimama FangYuanTi VF'), url('/themes/yunext/assets/media/AlimamaFangYuanTiVF-Thin.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: "D-DIN";
    src: url("/themes/yunext/assets/media/D-DIN_bold.woff2") format('woff2');
    font-display: swap;
}

@supports (color: hsl(from #000 h s l)) {
	:root {
		--glass-line-color: hsl(from currentColor h s l / 5%);
	}
}

@view-transition {
	navigation: auto;
}
::view-transition-old(main) {
	--bf-opacity: 1;
	--af-opacity: 0;
	--bf-transform: none;
	--af-transform: translateY(-1em);
	animation: transform .3s ease-in both, opacity .3s ease-in both;
}

::view-transition-new(main) {
	--bf-transform: translateY(1em);
	animation: transform .3s ease-in both, opacity .3s ease-in both;
}

@keyframes opacity {
	0% {
		opacity: var(--bf-opacity, 0);
	}
	100% {
		opacity: var(--af-opacity, 1);
	}
}
@keyframes transform {
	0% {
		transform: var(--bf-transform, scale(.98));
		transform-origin: var(--bf-transform-origin, bottom);
	}
	100% {
		transform: var(--af-transform, none);
	}
}
@keyframes filter {
	0% {
		filter: var(--bf-filter, blur(.5em));
	}
	100% {
		filter: var(--af-filter, none);
	}
}


/* 默认重置 */

*, *::before, *::after {
	font: inherit;
	color: inherit;
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
	box-sizing: border-box;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--glass-line-color) #0000;
}
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoo1pxg: antialiased;
	-webkit-tap-highlight-color: transparent;
	interpolate-size: allow-keywords;
	color: var(--font-color);
	background: var(--back-color);
	font: 450 medium / 2 'Alimama FangYuanTi VF', 'Misans VF', 'Source Han Sans', sans-serif;
	font-synthesis: none;
	text-rendering: optimizeSpeed;
	scroll-padding-top: var(--head-height);
	scrollbar-color: var(--main-color) var(--back-color);
	overflow-wrap: anywhere;
	overflow: hidden auto;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.5;
	font-weight: 600;
}
h1 {
	font-size: 4em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.5em;
}
h4 {
	font-size: 1.25em;
}
h5 {
	font-size: 1.125em;
}
h6 {
	font-size: 1em;
}
a {
	cursor: pointer;
	word-break: break-all;
    text-decoration: underline wavy transparent;
    text-underline-position: under;
	transition: .7s cubic-bezier(.6, .1, 0, 1);
}
a:where(:hover, :focus, :active):not(.more-button, .has-blur-glass) {
	color: var(--main-color);
	text-decoration-color: hsl(from currentcolor h s l / .3);
}
:where(ol, ul, li) {
	list-style: none;
}
address, dfn, cite, em, i {
	font-style: normal;
}
dt, th, b, strong {
	font-weight: bold;
}
hr {
	border: 1px inset;
}
details, pre, tt, var {
	hyphens: none;
}
kbd, code {
	color: var(--main-color);
	text-decoration: underline dotted .1ex;
	text-decoration-skip-ink: none;
	text-underline-offset: 1ex;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
pre, details {
	position: relative;
	padding: .75em 1em;
	border-radius: 2em;
}
abbr, acronym {
	border-bottom: 1px dotted;
	cursor: help;
}
mark, ins {
	text-decoration: none;
}
sup, sub {
	font-size: 1.5ex;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	vertical-align: .5ex;
}
sub {
	vertical-align: 0;
}
small {
	font-size: 75%;
}
big {
	font-size: 125%;
}
time {
	display: inline-block;
	flex: none;
	font-variant: tabular-nums lining-nums;
	font-feature-settings: 'tnum' 1, 'lnum' 1, 'kern' 1;
}
figcaption {
	line-height: 2;
	border-radius: 2em;
}
dd {
	margin: 0 1.5em 1.5em;
}
table {
	border-collapse: collapse;
	width: 100%;
}
caption, th, td {
	text-align: left;
}
td {
	padding: .5em;
}
blockquote {
	margin-top: 1.75em;
	padding: .75em 1em;
	gap: 1em;
	border-radius: 1em;
}
img, video, audio, iframe, embed, object {
	max-width: 100%;
}
img, video {
	height: auto;
	vertical-align: middle;
}
.hidden, .no-scrollbar::-webkit-scrollbar {
	display: none;
}
.no-scrollbar {
	scrollbar-width: none;
}

button, input, select, textarea {
	flex: auto;
	padding: .5em 1em;
	border-radius: 2em;
	background: none;
	appearance: none;
    vertical-align: middle;
	transition: .7s;
}
button, [type="checkbox"]:not([hidden]), [type="radio"], [type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
    flex: none;
	width: unset;
	line-height: 1;
	padding: 1em;
	gap: .5em;
	cursor: pointer;
	user-select: none;
}
select {
    flex: none;
	cursor: pointer;
}
option {
	background: var(--back-color);
}
input::placeholder {
	color: inherit;
}
input:is(:-internal-autofill-previewed, :-internal-autofill-selected) {
	transition: background-color 5000s ease-out 0.5s;
}
:is(button, input):not([hidden]):active,
:is(menu, nav) a:active {
	scale: .98;
	user-select: none;
}

/* 通用类名 */

[class*="yu-icon-"]::before {
	font-family: yu-icon;
    font-weight: 400;
}

.has-line-clamp {
	display: -webkit-inline-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--line-num,1);
	line-clamp: var(--line-num,1);
	text-overflow: ellipsis;
	overflow: hidden;
}
.area-dialog:where(:not(.global-sidebar, .global-menubar)),
.has-blur-glass {
	padding: 1em 1.5em;
	border-radius: 1em;
	background: var(--glass-back-color);
	border: 1px solid var(--glass-back-color);
	outline: 1px solid var(--glass-line-color);
	box-shadow: 0 .5em 1em -.5em var(--glass-line-color);
	-webkit-backdrop-filter: blur(1em) saturate(1.8);
	backdrop-filter: blur(1em) saturate(1.8);
	transition: .3s;
}
.has-blur-glass:where(a,nav,button) {
	border-radius: 2em;
}
.area-dialog:where(:not(.global-sidebar, .global-menubar)):hover,
.has-blur-glass:hover {
	outline-color: var(--main-color);
	outline-color: hsl(from var(--main-color) h s l / .3);
	box-shadow: 0 .5em 2em -1em var(--main-color), inset 0 -1em 2em -2em var(--main-color);
}
.has-flex-entry {
	display: flex;
	flex-flow: var(--flex-flow, wrap);
	align-items: center;
	font-size: .75rem;
	gap: 1em;
	line-height: 1;
}
.has-main-color {
	color: white;
	border: 0;
	background: var(--glass-back-color) linear-gradient(160deg, #B0B0E8, var(--main-color),#7C7CBC 30%, #0000 70%, #0000 90%, #B0B0E8) 0 0 / 400% 400% no-repeat;
	box-shadow: 0 0.5em 2em 0.5em hsl(240deg 32% 61% / .3);
	box-shadow: 0 0.5em 2em 0.5em hsl(from var(--main-color) h s l / .3);
}
.has-main-color:hover {
	color: var(--main-color);
	background-color: var(--glass-back-color);
	background-position: 100% 100%;
}
.area-dialog,
.area-dialog-mask,
.image-dialog,
.image-dialog-mask {
	position: fixed;
	inset: 0;
	background: var(--dialog-background);
	transform-origin: var(--dialog-transform-origin, bottom);
	transition: .3s;
	z-index: 10;
}
:where(.area-dialog, .area-dialog-mask, .image-dialog, .image-dialog-mask):not(.open) {
	transform: var(--dialog-transform, scale(.98));
	opacity: var(--dialog-opacity, 0);
	visibility: hidden;
	pointer-events: none;
}
.area-dialog:where(:not(.global-sidebar, .global-menubar)) {
	font-size: .875em;
	width: min(30em,100%);
	height: min(20em,100%);
	max-width: calc(100vw - var(--edge-size) * 2);
	max-height: calc(100vh - var(--head-height)*2);
	background: var(--dialog-background, var(--glass-back-color));
	margin: auto;
	padding-top: 3em;
	z-index: 11;
}
.area-dialog-mask {
	background: var(--glass-back-color);
	-webkit-backdrop-filter: blur(1em);
	backdrop-filter: blur(1em);
	cursor: pointer;
}
.area-dialog-mask:where(.global-sidebar-mask, .global-menubar-mask) {
	z-index: 9;
}
.area-dialog .area-dialog-title {
	font-size: 1.5rem;
	margin: -1.25em 0 .5em 0;
	padding: 0 2em .25em 0;
	border-bottom: 1px solid var(--glass-line-color);
}
.image-dialog,
.image-dialog-mask {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}
.image-dialog-mask {
	transform: none;
	background: rgba(0,0,0,0.8);
}
.image-container {
	position: relative;
	margin: var(--edge-size);
}
.dialog-image {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	transition: transform 0.3s;
	transform-origin: center center;
}
.image-toolbar {
	--glass-back-color: hsl(0deg 0% 0% / 5%);
	--glass-line-color: hsl(0deg 0% 100% / 5%);
	position: fixed;
	inset: auto 0 var(--edge-size);
	gap: 0;
	width: fit-content;
	margin: auto;
	font-size: 1em;
	color: white;
	text-shadow: 0 .1em .2em rgb(0 0 0 / 30%);
	z-index: 1001;
	padding: 0 1em;
}
.wave-pack {
	--mask: var(--wave-pack-mask, linear-gradient(#000 70%, #0000));
	position: var(--wave-pack-position, fixed);
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
	contain: layout;
	color: var(--main-color);
	top: var(--wave-pack-top, var(--head-height));
	padding: var(--wave-pack-top, .5em) 0 0;
	width: var(--wave-pack-width, 100%);
	height: var(--wave-pack-height, 100%);
	line-height: var(--wave-text-line, 30vmax);
	font-size: clamp(4em,var(--wave-text-size, 20vmax),20vw);
	font-weight: 900;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	-webkit-mask: var(--mask);
	mask: var(--mask);
	z-index: -1;
}
@supports (animation-timeline: view()) {
	.wave-pack {
		--bf-transform: none;
		--af-transform: var(--wave-pack-af-transform, translateY(-70%));
		animation: var(--wave-pack-animation, transform);
		animation-fill-mode: forwards;
		animation-timeline: scroll();
		animation-range: exit-crossing 0%;
	}
}
.wave-pack-text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-flow: column;
	align-items: center;
	z-index: -2;
	opacity: .05;
	max-width: 100%;
	overflow: hidden;
}
.wave-pack-form {
	width: 100%;
	height: 100%;
	object-fit: cover;
    object-position: top;
	z-index: 1;
}
.user-avatar {
	font-size: var(--avatar-size, 2em);
	width: 1em;
	height: 1em;
	border: 1px solid var(--glass-line-color);
	border-radius: 50%;
	background: var(--glass-line-color);
	object-fit: cover;
}
.none-things {
    flex: auto;
    grid-column: 1 / -1;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	font-size: .75rem;
	min-height: 15em;
	gap: 1em;
}
:where(.none-things):before {
    content: "\e62d";
    font-family: yu-icon;
    font-size: 3em;
	line-height: 1;
}
.shut-button,
.more-button {
	display: flex;
	gap: .5em;
	align-items: center;
	font-size: .75rem;
	min-width: 2em;
	line-height: 1;
	transition: .3s;
}
.shut-button {
	--glass-back-color: #323435;
	position: absolute;
	inset: 1em 1.5em auto auto;
	padding: .5em;
	font-size: 1em;
	width: fit-content;
	margin: auto;
	color: white;
}
.text-mainly {
	flex: none;
	color: var(--main-color);
	font-family: "D-DIN";
	font-weight: 600;
    font-variant: tabular-nums lining-nums;
	font-feature-settings: 'tnum' 1, 'lnum' 1, 'kern' 1;
	line-height: inherit;
}
.text-lessly {
	font-size: .75rem;
	font-weight: normal;
	line-height: inherit;
	opacity: .5;
}
.type-filter {
	gap: min(var(--edge-size), 1em);
}
.type-filter .active {
	color: var(--main-color);
	outline-color: currentColor;
	outline-color: hsl(from currentColor h s l / .5);
}
.plat-filter {
	--back: currentColor;
	--back: hsl(from currentColor h s l / .5);
	min-width: 10em;
	padding-right: 3em;
	background-image:
		linear-gradient(to bottom left, #0000 calc(50% - 2px), var(--back) calc(50% - 2px), var(--back) 50%, #0000 50%),
		linear-gradient(to bottom right, #0000 calc(50% - 2px), var(--back) calc(50% - 2px), var(--back) 50%, #0000 50%);
		background-size: .5em .5em, .5em .5em;
	background-position: calc(100% - 1.5em), calc(100% - 1em);
	background-repeat: no-repeat;
}
.seek-filter {
	flex-flow: nowrap;
	flex: auto;
	gap: 0;
    padding: 0 0 0 .5em;
    margin: 0 0 0 auto;
}
.area-switch {
	display: flex;
	flex-flow: column;
	gap: 1em;
	width: 100%;
	height: 100%;
}
.area-switch .tabs-switch {
	display: grid;
	flex: auto;
	overflow: auto;
	padding: 0;
}
.area-switch :where([class*="tab-"]) {
	--mask: linear-gradient(#0000, #000 2em, #000 calc(100% - 2em), #0000);
	display: flex;
	flex-flow: column;
	gap: 1.5em;
	padding: 1.5em;
	grid-area: 1 / 1;
	-webkit-mask: var(--mask);
	mask: var(--mask);
	overflow: auto;
	transition: .3s;
}
.area-switch :where([class*="tab-"]):not(.active) {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(.99);
    transform-origin: top;
	pointer-events: none;
}
.area-switch :where([class*="tab-"]) ul {
	display: flex;
	flex-flow: wrap;
	align-items: center;
	gap: 1em;
}
.area-switch :where([class*="tab-"]) li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 100%;
	font-size: .875rem;
	gap: .5em;
}
.area-switch .navs-switch {
	padding: 0;
	border: 0;
	gap: 0;
	flex: 1;
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow: auto;
}
.area-switch .navs-switch > * {
	flex: 1;
	border: 1px solid #0000;
	border-radius: inherit;
}
.area-switch .navs-switch .active {
	color: var(--main-color);
	padding: 1em 1.5em;
	border-color: currentColor;
	border-color: hsl(from currentColor h s l / .5);
	background: inherit;
	box-shadow: inset 0 -1em 2em -2em;
}
:where(.page-content) > :where(p, pre, address, blockquote, figure, details, iframe, audio, video, h1, h2, h3, h4, h5, h6, ul, ol) {
	margin-block: 1em;
}
:where(.page-content) :where(h1, h2, h3, h4, h5, h6) {
	margin-bottom: .5em;
	font-synthesis: initial;
}
:where(.page-content) > :first-child {
	margin-top: 0;
}
:where(.page-content) > :last-child {
	margin-bottom: 0;
}

/* 站点样式 */

.global-pack {
	display: flex;
	width: var(--main-width);
	margin-inline: auto;
	transition: .3s;
}
.global-main {
	display: flex;
	flex-flow: column;
	padding: 0 var(--edge-size);
	gap: max(1em,var(--edge-size));
	transition: 1s;
}
.global-header {
	position: fixed;
	inset: 0 0 auto;
	padding: 0 var(--edge-size);
	z-index: 10;
	transition: 1s;
}
.global-header:before {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: blur(1em);
	backdrop-filter: blur(1em);
	-webkit-mask: linear-gradient(#000 50%, #0000);
	mask: linear-gradient(#000 50%, #0000);
    pointer-events: none;
	z-index: -1;
}
.global-header .global-pack {
	align-items: center;
	justify-content: space-between;
	height: var(--head-height);
	gap: 1em;
}
.global-logo,
.global-icon {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: end;
	gap: .5em;
}
.global-logo {
	justify-content: start;
	color: var(--logo-color, var(--main-color));
	fill: var(--logo-color, url(#logo_linear));
    font-weight: 600;
}
.global-logo svg {
	height: 1.5em;
}
.global-icon .has-blur-glass {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .25em;
	min-width: 2em;
	min-height: 2em;
	line-height: 1;
}
.theme-container {
	position: relative;
}
#themeBtn.light:before {
	content: "\e658";
}
#themeBtn.dark:before {
	content: "\e65a";
}
#themeOptions {
	position: absolute;
	top: 3.5em;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
	font-size: .75em;
	transform: translateX(-50%);
	left: 50%;
}
#themeOptions:not(.open) {
	opacity: 0;
	transform: translate(-50%,-1em);
	visibility: hidden;
	pointer-events: none;
}
.theme-opt:hover {
	color: var(--main-color);
}
.theme-opt::before {
	font-size: 1.5em;
}
.global-icon .global-user {
	font-size: .75em;
	padding-right: 1em;
}
.global-menubar:hover nav {
	transform: none !important;
}
.global-menubar nav {
	font-size: .875em;
}
.global-menubar a {
	position: relative;
	padding: .5em;
	margin: -.5em 0;
}
:is(.global-footer .list, .global-menubar) a[target="_blank"]:after {
    font-family: yu-icon;
    font-weight: 400;
    content: "\e63c";
    margin: 0 0 0 .5em;
    font-size: .5em;
}
.global-footer {
	position: relative;
	padding: var(--edge-size);
	z-index: 1;
	transition: 1s;
}
.global-footer .global-pack {
	position: relative;
	flex-flow: wrap;
	align-items: center;
	place-content: space-between;
	color: hsl(0deg 0% 100% / 70%);
	padding: 1.5em;
	gap: 1.5em;
	background: #323435;
	border-radius: 1em;
	min-height: 30em;
	overflow: hidden;
}
.global-footer .global-pack:before {
	content: "";
	flex: 100%;
	order: -1;
}
.global-footer .back {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	inset: 0;
	width: 80%;
	fill: hsl(0deg 0% 0% / 5%);
	stroke: hsl(0deg 0% 100% / 5%);
	stroke-width: .2;
	z-index: 0;
	transition: .3s;
}
.global-footer:has(header:not(:hover)) .back {
	fill: hsl(0deg 0% 100% / 5%);
	stroke: hsl(0deg 0% 100% / 0);
	filter: blur(0px);
	scale: 1.05;
}
.global-footer header {
	flex: 1;
	min-width: min(40em, 100%);
	color: white;
	font-size: .75em;
	text-align: center;
	order: -1;
	z-index: 1;
}
.global-footer header p {
	margin: .5em 0 0;
	letter-spacing: 1em;
}
.global-footer header i {
	font-size: 10em;
	line-height: 1.5;
}
.global-footer .list {
	flex: 2;
	display: flex;
	justify-content: space-evenly;
	align-items: flex-start;
	flex-wrap: wrap;
	min-width: min(30em, 100%);
	gap: 1.5em;
	z-index: 1;
}
.global-footer .list article {
	display: flex;
	flex-flow: column;
    font-size: .75em;
	flex: clamp(10em, 15em, 50% - 1.5em);
    gap: 1em;
}
.global-footer .list article ul {
	display: flex;
	flex-wrap: wrap;
    gap: inherit;
    margin: .5em 0;
}
.global-footer .list article ul li {
	flex: min(15em, 100%);
	min-width: fit-content;
	max-width: 100%;
}
.global-footer footer {
	flex: 100%;
	display: flex;
	justify-content: space-between;
	gap: .5em 1em;
	font-size: .75em;
	padding: 1em 0 0;
	margin: -.5em 0;
	border-top: 1px dashed hsl(0deg 0% 100% / 10%);
	flex-wrap: wrap;
	z-index: 1;
}
.global-footer footer a:not(:hover) {
	opacity: .5;
}
.global-sidebar {
	--dialog-opacity: 1;
	--dialog-transform: translateX(100%);
	inset: 0 0 0 auto;
	width: 100%;
	height: 100vh;
	padding: var(--head-height) var(--edge-size) var(--edge-size);
	overflow: hidden;
	z-index: 9;
	transition: 1s;
}
.global-sidebar-is-open :where(.global-main,.global-footer) {
	contain: layout;
	transform: translateX(-100%);
}
.global-sidebar [class*="tab-"] ul {
	counter-reset: packs;
	gap: 1.5em;
}
.global-sidebar [class*="tab-"] li {
	flex-wrap: wrap;
	gap: .25em 1em;
	padding: 0 0 0 1.5em;
	margin: 0 0 0 .5em;
}
.global-sidebar [class*="tab-"] li:before {
	counter-increment: packs;
	content: counter(packs);
	margin: 0 -.5em 0 -2.5em;
	min-width: 2em;
	padding: .5em;
	line-height: 1;
	text-align: center;
	background: var(--glass-line-color);
	border-radius: 2em;
	order: -1;
}
.global-sidebar [class*="tab-"] li:after {
	content: "";
	flex: 100%;
	border-bottom: 1px solid var(--glass-line-color);
	order: -1;
}
.global-sidebar .item-title {
	flex: 1;
	order: -1;
}
.global-sidebar .text-mainly {
	order: -1;
	font-size: .875rem;
}
.global-sidebar .item-state {
	--color: #818181;
	display: flex;
	align-items: center;
	color: var(--color);
	font-size: .75rem;
	gap: .25em;
}
.global-sidebar .item-state.processing {
	--color: #FF9800;
}
.global-sidebar .item-state.paid {
	--color: #34a853;
}
.global-sidebar .item-state.completed {
	--color: #2196F3;
}
.global-sidebar .item-state.invalid {
	--color: #d93025;
}
.global-sidebar .side-datas {
	padding: 1em;
	gap: 2em;
}
.global-sidebar .side-datas li {
	position: relative;
	display: flex;
	flex-flow: column wrap;
	place-content: flex-start center;
	align-items: flex-start;
	color: var(--main-color);
	font-size: .85em;
	gap: .5em;
	flex: 1;
	min-width: fit-content;
	height: 3em;
}
.global-sidebar .side-datas li::before {
	font-size: 2em;
	order: -2;
	background: var(--glass-line-color);
	border-radius: 2em;
	padding: .25em;
}
.global-sidebar [class*="tab-"] .more-button {
	width: fit-content;
	margin: auto auto -1em;
}

/* 模块样式 */

.page-header {
	position: relative;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	width: var(--main-width);
	margin-inline: auto;
	gap: 1em;
	padding: var(--head-height) 0 0;
}
.page-header header {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex: 1;
	color: var(--main-color);
	min-height: var(--wave-text-line, 30vmax);
	width: 100%;
	gap: 1em;
}
.page-header h1 {
	font-weight: 100;
}
.page-header h5 {
	letter-spacing: .5em;
	line-height: 2;
	font-weight: 400;
    max-width: max(70%, 30em);
}
.page-header header .desc {
	max-width: 50em;
	text-wrap: balance;
	font-size: .875em;
}
.page-section {
	display: flex;
	flex-flow: column;
	gap: max(1em,var(--edge-size));
	width: var(--main-width);
	margin-inline: auto;
}
.page-section .head {
	--wave-pack-position: absolute;
	--wave-pack-top: 0;
	--wave-text-line: 1;
	--wave-pack-animation: none;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	color: var(--main-color);
	gap: 1em;
	padding: max(var(--edge-size) * 2, 2em, 6vmax) 0 0;
}
.page-section .head svg {
	max-width: 100%;
	height: 3em;
	opacity: .3;
	margin: -1em 0;
}
.page-section .menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-flow: wrap;
	gap: min(var(--edge-size),1em);
    color: hsl(from currentColor h s l / .7);
}
.page-section .list {
	display: grid;
	grid: auto-flow dense / repeat(auto-fill, minmax(min(var(--item-width,20em), 100%), 1fr));
	gap: min(var(--edge-size),1em);
}
.page-section .item {
	display: flex;
	gap: 1em;
	border-radius: 1em;
	flex-flow: var(--item-direc, column);
	align-content: stretch;
	justify-content: center;
	overflow: hidden;
}
.page-section .item-infos {
	display: flex;
	flex-flow: var(--item-wraps, wrap);
	align-items: var(--item-align, center);
	place-content: space-between var(--item-place, space-between);
	text-align: var(--item-place);
	flex: min(10em, 100%);
	gap: 1em 1.5em;
}
.page-section .item-label {
	display: flex;
	flex-flow: column;
	color: var(--main-color);
}
.item-price.text-lessly {
	font-family: "D-DIN";
	text-decoration: line-through;
}
.page-section .item-label ul li:not(:first-child):before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	border-top: 1px solid;
	width: .5em;
	margin: 0 .5em 0 -.5em;
	opacity: .3;
}
.page-section .item-title {
	flex: 100%;
}
.page-section .item-title p {
	opacity: .5;
	font-size: .75em;
	margin: .5em 0;
}
.page-section .item-title time {
	margin: 0 1em 0 0;
}
.page-section .item-plats {
	display: flex;
	align-items: center;
	justify-content: var(--item-place, space-between);
	font-size: .75em;
	gap: .5em;
	width: 100%;
	order: -1;
	margin: -.5em 0;
}
.page-section .item-photo {
	position: relative;
	flex: var(--item-photo-flex, min(20em,100%));
	height: var(--item-photo-height, auto);
	margin: var(--item-photo-margin);
	padding: var(--item-photo-padding);
	aspect-ratio: var(--item-photo-aspect-ratio, auto);
	border: solid var(--glass-line-color);
	border-width: var(--item-photo-border, 1px);
	border-radius: var(--item-photo-radius, 1em);
	order: var(--item-photo-orders);
	background: var(--item-photo-back);
	overflow: hidden;
}
.page-section .item-photo img {
	width: var(--item-photo-width, 100%);
	height: 100%;
    border-radius: inherit;
	object-fit: cover;
	object-position: top;
}
.page-section .item-photo nav {
	position: absolute;
	inset: auto 2em 2em;
	margin: auto;
	width: fit-content;
	z-index: 2;
}
.page-section .item-metas {
	--avatar-size: 2.5em;
	--flex-flow: nowrap;
	flex: 1;
}
.page-section .item-metas time:before {
	content: "";
	border-left: 1px solid;
	opacity: .2;
	margin: 0 1em 0 0;
}
.page-section .item-packs {
	display: flex;
	flex-flow: column;
	gap: 1em;
	width: 100%;
	counter-reset: packs;
	border-block: 1px solid var(--glass-line-color);
	padding: 1em 0;
	max-height: 10em;
	overflow: auto;
}
.page-section .item-packs li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: .75em;
	gap: .5em;
}
.page-section .item-packs li a {
	flex: 1;
    text-align: left;
}
.page-section .item-packs li a:before {
	counter-increment: packs;
	content: counter(packs);
	margin: 0 .5em 0 0;
	width: 2em;
	display: inline-block;
	background: var(--glass-line-color);
	border-radius: 50%;
	text-align: center;
}
.page-paginum {
	gap: .5em;
	justify-content: space-between;
	margin: auto;
}
.page-paginum > * {
	padding: 1em;
}
.page-paginum > *:not(:hover,.active, .more-button) {
	opacity: .5;
}
.page-paginum .active {
	color: var(--main-color);
}
.page-paginum .ellipsis {
	padding: 0;
	margin: 0 1em;
	width: 2em;
	border-top: 1px dotted;
}
.page-sidebar menu {
	position: sticky;
	top: inherit;
	z-index: 2;
}
.page-sidebar .desc {
	font-size: .875em;
}
.page-sidebar [class*="tab-"] section {
	display: flex;
	flex-flow: column;
	gap: 1em;
}
.page-sidebar [class*="tab-"] ul {
	padding: 1em;
	background: var(--glass-back-color);
	outline: 1px solid var(--glass-line-color);
	border: 1px solid var(--glass-back-color);
	border-radius: 1em;
}
.page-sidebar hgroup {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}
.page-sidebar hgroup button {
	padding: 0;
	gap: .25em;
}
.side-author  {
	gap: 2em;
    justify-content: center;
}
.side-author li {
    --avatar-size: 3em;
	display: flex;
	align-items: center;
	gap: .5em;
	line-height: 1.5;
}


/* 页面样式 */

.slogan-item {
	min-height: 100vh;
}
.slogan-item footer {
	width: 100%;
}
.note-item {
	font-size: .75em;
	line-height: 1;
}
.plat-item {
	--mask: linear-gradient(90deg, #0000, #000 4em, #000 calc(100% - 4em), #0000);
	color: var(--main-color);
	width: 100%;
	-webkit-mask: var(--mask);
	mask: var(--mask);
	padding: 2em;
	margin: -2em 0 0;
    border-bottom: thin solid var(--glass-back-color);
	overflow: hidden;
}
.plat-item-scroll {
	--bf-transform: none;
	--af-transform: translateX(-100%);
	display: flex;
	width: max(100vw, 60em);
	animation: transform 50s linear infinite;
}
.plat-item ul {
	display: flex;
	justify-content: space-evenly;
	gap: 1em;
	flex: 0 0 100%;
	font-family: "D-DIN";
}
.plat-item li {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex: 1;
}
.plat-item li::before {
	font-size: 2em;
	line-height: 1;
}
.plat-item svg {
	fill: currentColor;
	height: 2em;
}
.news-item {
	counter-reset: packs;
	line-height: inherit;
	font-size: inherit;
	margin: 1em 0;
}
.news-item a {
	position: relative;
	flex: 15em;
	display: flex;
	flex-flow: column;
	font-size: .875em;
	padding: 0 0 0 2em;
	justify-content: center;
	text-decoration: none !important;
}
.news-item a:before {
	counter-increment: packs;
	content: counter(packs);
	font-size: 2em;
	opacity: .3;
	position: absolute;
	width: 1em;
	left: 0;
	font-weight: 600;
	line-height: .5;
	color: var(--main-color);
}
.news-item a:after {
	content: "";
	border-top: 1px solid;
	position: absolute;
	opacity: .3;
	right: 0;
	left: 2em;
	color: var(--main-color);
}		
.for-theme, .for-package {
	--item-align: flex-end;
}
.for-news {
	--item-photo-flex: none;
	--item-photo-height: 15em;
	--item-photo-margin: -.75em -1.25em 0;
}
.for-theme {
	--item-width: 35em;
	--item-direc: wrap;
	--item-photo-aspect-ratio: 16/9;
	--item-photo-margin: 0 0 -1em;
	--item-photo-border: 1px 1px 0;
	--item-photo-radius: 1em 1em 0 0;
	--item-photo-orders: 2;
}
.for-theme .item-photo:after {
	content: "";
	position: absolute;
	inset: 50% 0 0;
	background: linear-gradient(#0000, hsl(0deg 0% 0% / 10%));
}
.for-plugin {
	--item-wraps: column;
	--item-place: center;
	--item-photo-flex: none;
    --item-photo-width: auto;
	--item-photo-height: 5em;
	--item-photo-padding: .25em;
	--item-photo-margin: .5em auto;
	--item-photo-back: var(--glass-line-color);
}
.for-product .page-gallery {
	display: flex;
	flex-flow: column;
	gap: var(--edge-size);
}
.for-product .page-gallery figure {
	min-height: 15em;
	padding: 0;
	overflow: hidden;
}
.for-product .page-gallery figcaption {
	position: absolute;
	color: hsl(0deg 0% 50%);
	font-size: .75em;
	line-height: 1;
	padding: 1em 1.5em;
	outline: inherit;
	-webkit-backdrop-filter: inherit;
	backdrop-filter: inherit;
	box-shadow: 0 0 2em -1em;
    z-index: 2;
    inset: 0 auto auto 0;
    border-radius: 0 0 2em;
}
.for-product .page-gallery img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: top;
}
.tab-detail li {
	font-size: .75rem;
	flex: min(15em, 100%);
	min-width: fit-content;
	max-width: 100%;
}
.tab-detail li[class*="yu-icon-"] {
	height: 3em;
    flex: min(15em, 50% - 1em);
	flex-flow: wrap column;
	place-content: flex-start center;
    align-items: flex-start;
	line-height: 1;
    overflow: hidden;
}
.tab-detail li[class*="yu-icon-"]::before {
    font-size: 1.75em;
	margin: .125em;
}
.tab-detail .news a {
	flex: 1;
}
.tab-detail nav .buy {
	flex: auto;
	align-items: baseline;
	color: var(--main-color);
	font-size: 1rem;
	font-weight: 600;
	border-radius: 1em;
	outline-color: currentcolor;
	outline-color: hsl(from currentcolor h s l / .3);
	background-position: 90% 100%;
	box-shadow: none;
}
.tab-detail .buy:hover {
	color: white;
	background-position: 0 0;
}
.tab-detail .buy .text-mainly {
	color: inherit;
	margin: 0 0 0 auto;
}
.tab-detail .actions ul .text-mainly {
	font-size: 1.25em;
	border-left: 1px solid;
	border-color: hsl(from currentColor h s l / .2);
	padding-left: .75em;
	margin-left: .25em;
}
.tab-uplogs hgroup {
	position: sticky;
	top: 0;
    color: var(--main-color);
	border-bottom: 1px solid var(--glass-line-color);
	padding-bottom: .5em;
	z-index: 2;
}
.tab-uplogs .page-content {
	font-size: .875rem;
}
.tab-uplogs :is(ul,li) {
	display: block;
}
.for-article {
	--main-width: min(70em, 100%);
	--wave-pack-top: 0;
	--wave-text-line: 40vh;
	--logo-color: white;
	--wave-pack-mask: none;
	--wave-pack-af-transform: scale(1.1);
}
.for-article :is(.global-header,.global-sidebar, .page-header *) {
	--glass-back-color: hsl(0deg 0% 0% / 10%);
	color: var(--logo-color);
	text-shadow: 0 .1em .2em rgb(0 0 0 / 30%);
}
.for-article .page-header header {
	justify-content: flex-end;
}
.for-article .wave-pack:after {
	--mask: linear-gradient(#000, #000 var(--head-height), #0000, #000 var(--wave-text-line));
	position: absolute;
	inset: 0;
	content: "";
	-webkit-backdrop-filter:  blur(1em) brightness(0.9) saturate(1.5);
	backdrop-filter: blur(1em) brightness(0.9) saturate(1.5);
	-webkit-mask: var(--mask);
	mask: var(--mask);
	pointer-events: none;
	z-index: 1;
}
.for-article .side-author :is(img, i) {
	font-size: 2.5em;
}
.for-article .page-section .content {
	background: var(--back-color);
	margin: 0 calc(var(--edge-size) * -1);
}
.for-author .page-header header .user-avatar {
	--avatar-size: 8em;
    filter: none;
    -webkit-backdrop-filter: blur(1em);
	backdrop-filter: blur(1em);
}

/* 大屏样式 */

@media (width >= 70rem) {
	.global-menubar {
		position: relative;
		padding: 1em;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	.global-icon [data-dialog="global-menubar"],
	.global-menubar-is-open .area-dialog-mask {
		display: none;
	}
	.global-sidebar {
		padding-block: 15vh;
		width: calc(100vw - (100vw * 1.25 - min(30em, 100%))*.7);
	}
	.global-sidebar-is-open .global-pack {
		width: 100%;
	}
	.global-sidebar-is-open .global-menubar nav {
		transform: translateY(calc((var(--head-height) - 1.5em) * -1));
	}
	.global-sidebar-is-open .global-footer {
		position: fixed;
		z-index: 10;
		transform: translateY(calc(var(--edge-size)*-1.5));
		inset: 100vh 0 auto;
		transition: .3s;
	}
	.global-sidebar-is-open .global-footer:hover {
		transform: translateY(calc(-100%));
	}
	.global-sidebar-is-open .global-footer .global-pack {
		box-shadow: 0 -2em 8em -4em var(--main-color);
		border: 1px solid hsl(0deg 0% 100% / 5%);
		outline: 1px solid hsl(0deg 0% 0% / 30%);
	}
	.global-sidebar-is-open .global-main {
		position: fixed;
		inset: 0 var(--edge-size);
		max-height: 100vh;
		width: calc(100vw * 1.25 - min(30em, 100%) - var(--edge-size)*2);
		padding: var(--edge-size);
		background: var(--glass-back-color);
		border-radius: 1em;
		box-shadow: 0 .5em 1em -.5em var(--glass-line-color), 0 0 0 2px var(--glass-line-color), inset 0 0 0 2px var(--glass-back-color);
		-webkit-backdrop-filter: blur(1em) saturate(1.8);
		backdrop-filter: blur(1em) saturate(1.8);
		transform: scale(.7);
		transform-origin: left;
		overflow: hidden auto;
		z-index: 2;
	}
	.global-sidebar-is-open .page-sidebar {
		top: 0;
		height: calc(100vh - var(--edge-size) - 2em);
	}
    body:not(.for-product, .for-article) .global-header:before {
        inset: 0 0 -100%;
    }
	.page-section .menu {
		position: sticky;
		top: var(--head-height);
		z-index: 11;
	}
	.page-section.has-mult-place {
		display: grid;
		grid: auto / 1fr 30em;
	}
    .for-product .page-gallery figure:only-child {
        height: 100%;
    }
	.page-section.has-mult-place > *:not(.page-sidebar) {
		grid-column: 1; 
	}
	.page-sidebar {
        grid-area: 1 / 2 / -1;
		position: sticky;
        top: var(--head-height);
		max-height: calc(100vh - var(--head-height) - 2em);
		z-index: 9;
	}
	.seek-filter {
		max-width: 20em;
	}
	.type-filter:only-child {
		margin: auto;
	}
}


/* 小屏样式 */

@media (width <= 70rem) {
	:root {
		--edge-size: .75rem;
		--head-height: 3.5rem;
		scroll-padding-top: calc(var(--head-height) + 4em);
	}
	.type-filter {
		--mask: linear-gradient(90deg, #0000, #000 1em, #000 calc(100% - 1em), #0000);
		flex-wrap: nowrap;
		flex: 100%;
		-webkit-mask: var(--mask);
		mask: var(--mask);
		padding: var(--edge-size);
		margin: calc(var(--edge-size) * -1);
		scroll-padding: var(--edge-size);
		scroll-snap-type: both mandatory;
		overscroll-behavior: contain;
		overflow: auto;
	}
	.type-filter a {
		flex: auto;
		min-width: fit-content;
        justify-content: center;
		text-align: center;
        border-radius: 1em;
	}
	.page-paginum > *.arrow {
		order: 4;
		text-align: center;
		justify-content: center;
	}
	.page-paginum:after {
		content:"";
		flex: 100%;
	}
	.global-footer .back {
		width: max(100vw, 50vmax);
		inset: 0 0 auto 50%;
		transform: translateX(-50%);
	}
	.global-footer .global-pack:before {
		border-top: 1px dashed hsl(0deg 0% 100% / 10%);
		order: 0;
	}
	.global-menubar {
		inset: var(--head-height) var(--edge-size) auto;
	}
	.global-menubar nav {
		display: grid;
		grid: auto-flow dense / 1fr 1fr 1fr;
		font-size: inherit;
		border-radius: 1em;
		padding: .5em;
	}
	.global-menubar nav a {
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		outline: 1px solid var(--glass-line-color);
		margin: -.5em;
	}
	.global-sidebar header {
		justify-content: center;
	}
	.page-header h1 {
		font-size: 2em;
		font-weight: inherit;
	}
    .slogan-item {
        min-height: 60vh;
    }
	.for-theme, .for-package {
		--item-place: center;
	}
	.for-product .page-gallery {
		flex-flow: nowrap;
		padding: var(--edge-size);
		margin: calc(var(--edge-size) * -1);
		margin-top: 0;
		scroll-padding: var(--edge-size);
		scroll-snap-type: both mandatory;
		overscroll-behavior: contain;
		overflow: auto;
	}
	.for-product .page-gallery figure {
		scroll-snap-align: center;
		flex: 0 0 calc(100% - 1em);
	}
	.for-product .page-gallery figure:only-child {
		flex-basis: 100%;
	}
    .for-product .page-gallery figcaption {
        inset: auto 0 0 auto;
        border-radius: 2em 0 0;
    }
}