/* ===== 字体引入(MiSans 由小米官方 CDN 提供,在 index.html 中引入) ===== */
@font-face {
    font-family: D-DIN;
    src: local("D-DIN"), local("DIN"), local("D-DIN-Bold");
    font-display: swap;
}

/* ===== CSS 变量 ===== */
:root {
    --main-color: #7C7CBC;
    --font-color: #111122;
    --back-color: #FAFAFA;
    --blur-back-color: hsl(0deg 0% 100% / 35%);
    --blur-line-color: hsl(0deg 0% 0% / 5%);
    --main-width: min(100em, 100%);
    --head-height: 4rem;
    --edge-size: 2rem;
    --font-family: 'MiSans VF', 'MiSans', 'Alimama FangYuanTi VF', 'Source Han Sans', sans-serif;
    --logo-color: url(#logo_linear);
}

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

/* ===== 全局重置 ===== */
*,
::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(--blur-line-color) #0000;
}

html {
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    color: var(--font-color);
    background: var(--back-color);
    font: 400 medium / 2 var(--font-family);
    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;
}

body {
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

a:where(:hover, :focus, :active):not(.more-button, .has-blur-glass) {
    color: var(--main-color);
}

ul,
ol {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
}

button {
    cursor: pointer;
    background: none;
}

/* ===== 玻璃质感 ===== */
.has-blur-glass {
    padding: 1em 1.5em;
    border-radius: 1em;
    background: var(--blur-back-color);
    border: 1px solid var(--blur-back-color);
    outline: 1px solid var(--blur-line-color);
    box-shadow: 0 .5em 1em -.5em var(--blur-line-color);
    backdrop-filter: blur(1em) saturate(1.8);
    -webkit-backdrop-filter: blur(1em) saturate(1.8);
    transition: 0.3s;
}

.has-blur-glass:hover {
    outline-color: hsl(252deg 30% 62% / 0.3);
    box-shadow: 0 .5em 2em -1em var(--main-color),
        inset 0 -1em 2em -2em var(--main-color);
}

/* ===== 主色按钮 ===== */
.has-main-color {
    color: white;
    border: 0;
    background: var(--blur-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(252deg 30% 62% / 0.3);
}

.has-main-color:hover {
    color: var(--main-color);
    background-color: var(--blur-back-color);
    background-position: 100% 100%;
}

/* ===== flex 入口 ===== */
.has-flex-entry {
    display: flex;
    flex-flow: var(--flex-flow, wrap);
    align-items: center;
    font-size: 0.75rem;
    gap: 1em;
    line-height: 1;
}

/* ===== 图标(用 SVG mask 实现) ===== */
[class^="yu-icon-"]::before,
[class*=" yu-icon-"]::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    flex: none;
}

.yu-icon-search::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}

.yu-icon-pifu_shensemoshi::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-7.54-7.54C12.92 3.04 12.46 3 12 3z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-7.54-7.54C12.92 3.04 12.46 3 12 3z'/></svg>");
}

.yu-icon-menu::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><line x1='3' y1='6' x2='21' y2='6'/><line x1='3' y1='12' x2='21' y2='12'/><line x1='3' y1='18' x2='21' y2='18'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><line x1='3' y1='6' x2='21' y2='6'/><line x1='3' y1='12' x2='21' y2='12'/><line x1='3' y1='18' x2='21' y2='18'/></svg>");
}

.yu-icon-user::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}

.yu-icon-user-add::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><line x1='19' y1='8' x2='19' y2='14'/><line x1='22' y1='11' x2='16' y2='11'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><line x1='19' y1='8' x2='19' y2='14'/><line x1='22' y1='11' x2='16' y2='11'/></svg>");
}

.yu-icon-pay::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>");
}

.yu-icon-turn-r::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

.yu-icon-top-right-2::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7'/><polyline points='7 7 17 7 17 17'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7'/><polyline points='7 7 17 7 17 17'/></svg>");
}

.yu-icon-a-1::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='5'/><line x1='12' y1='1' x2='12' y2='3'/><line x1='12' y1='21' x2='12' y2='23'/><line x1='4.2' y1='4.2' x2='5.6' y2='5.6'/><line x1='18.4' y1='18.4' x2='19.8' y2='19.8'/><line x1='1' y1='12' x2='3' y2='12'/><line x1='21' y1='12' x2='23' y2='12'/><line x1='4.2' y1='19.8' x2='5.6' y2='18.4'/><line x1='18.4' y1='5.6' x2='19.8' y2='4.2'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='5'/><line x1='12' y1='1' x2='12' y2='3'/><line x1='12' y1='21' x2='12' y2='23'/><line x1='4.2' y1='4.2' x2='5.6' y2='5.6'/><line x1='18.4' y1='18.4' x2='19.8' y2='19.8'/><line x1='1' y1='12' x2='3' y2='12'/><line x1='21' y1='12' x2='23' y2='12'/><line x1='4.2' y1='19.8' x2='5.6' y2='18.4'/><line x1='18.4' y1='5.6' x2='19.8' y2='4.2'/></svg>");
}

.yu-icon-night::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-7.54-7.54C12.92 3.04 12.46 3 12 3z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-7.54-7.54C12.92 3.04 12.46 3 12 3z'/></svg>");
}

.yu-icon-duopingtaizw::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='14' rx='2'/><line x1='8' y1='21' x2='16' y2='21'/><line x1='12' y1='17' x2='12' y2='21'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='14' rx='2'/><line x1='8' y1='21' x2='16' y2='21'/><line x1='12' y1='17' x2='12' y2='21'/></svg>");
}

.yu-icon-yunext::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 32' fill='black'><path d='M0.106803 1.28607C-0.967619 4.26223 6.21043 13.2044 15.0573 16.6888C18.6829 18.1174 21.2432 18.0853 24.4665 20.7776C29.3539 24.8618 31.1827 31.359 30.3049 31.9359C29.8249 32.2518 28.691 30.7042 22.3176 24.4772C15.9077 18.2135 15.0938 17.5634 15.0573 16.6888C14.8607 12.1605 45.6806 14.9718 45.644 16.6888C45.6211 17.9434 33.7248 20.4342 30.5198 16.0844C27.1594 11.524 35.4164 2.22928 33.3133 0.37949C30.9633 -1.6855 14.8744 4.80709 15.0527 16.6842C15.1716 24.5413 22.3725 32 30.3461 32C39.1106 32 46.5447 22.9708 45.6394 16.6842C43.678 2.97561 1.43269 -2.38604 0.106803 1.28607Z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 32' fill='black'><path d='M0.106803 1.28607C-0.967619 4.26223 6.21043 13.2044 15.0573 16.6888C18.6829 18.1174 21.2432 18.0853 24.4665 20.7776C29.3539 24.8618 31.1827 31.359 30.3049 31.9359C29.8249 32.2518 28.691 30.7042 22.3176 24.4772C15.9077 18.2135 15.0938 17.5634 15.0573 16.6888C14.8607 12.1605 45.6806 14.9718 45.644 16.6888C45.6211 17.9434 33.7248 20.4342 30.5198 16.0844C27.1594 11.524 35.4164 2.22928 33.3133 0.37949C30.9633 -1.6855 14.8744 4.80709 15.0527 16.6842C15.1716 24.5413 22.3725 32 30.3461 32C39.1106 32 46.5447 22.9708 45.6394 16.6842C43.678 2.97561 1.43269 -2.38604 0.106803 1.28607Z'/></svg>");
}

/* 平台图标(单色线性品牌 SVG,主色) */
.yu-icon-halo::before,
.yu-icon-wp::before,
.yu-icon-nv::before {
    display: inline-block;
}

.yu-icon-halo::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.5'/><circle cx='12' cy='12' r='3.5' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.5'/><circle cx='12' cy='12' r='3.5' fill='black'/></svg>");
}

.yu-icon-wp::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 7 L6 19 L12 9 L18 19 L22 7' fill='none' stroke='black' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 7 L6 19 L12 9 L18 19 L22 7' fill='none' stroke='black' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'/></svg>");
}

.yu-icon-nv::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 20 L5 4 L19 20 L19 4' fill='none' stroke='black' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 20 L5 4 L19 20 L19 4' fill='none' stroke='black' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'/></svg>");
}

/* 滚动条内平台图标放大 */
.plat-item li::before {
    width: 2em;
    height: 2em;
}

/* 滚动条内平台图片样式 */
.plat-item li img {
    width: 8em;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: 0.3s;
}

/* chuxin-latest-logo 保持原色 */
.plat-item li img[alt="chuxin"] {
    filter: none;
}

.plat-item li img:hover {
    opacity: 1;
}

/* ===== 按钮 ===== */
.more-button {
    display: flex;
    gap: 0.5em;
    align-items: center;
    font-size: 0.75rem;
    min-width: 2em;
    line-height: 1;
    transition: 0.3s;
}

.more-button::before {
    width: 1em;
    height: 1em;
}

/* ===== 背景大字 wave-pack ===== */
.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;
}

.wave-pack-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    z-index: -2;
    opacity: 0.05;
    max-width: 100%;
    overflow: hidden;
}

.wave-pack-form {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
}

/* ===== global-pack / main ===== */
.global-pack {
    display: flex;
    width: var(--main-width);
    margin-inline: auto;
    transition: 0.3s;
}

.global-main {
    display: flex;
    flex-flow: column;
    padding: 0 var(--edge-size);
    gap: max(1em, var(--edge-size));
    transition: 1s;
}

/* ===== global-header ===== */
.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;
    backdrop-filter: blur(1em);
    -webkit-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 1 0;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 0.5em;
}

.global-logo {
    justify-content: start;
    color: var(--main-color);
    font-weight: 600;
}

.global-logo svg {
    height: 1.5em;
}

.global-logo .menu-item {
    gap: 0.5em;
}

.global-icon .has-blur-glass {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25em;
    min-width: 2em;
    min-height: 2em;
    line-height: 1;
    border-radius: 50%;
}

.global-icon .has-blur-glass::before {
    font-size: 1em;
}

/* menubar:外层仅做定位容器,玻璃质感只在内层 nav(.has-blur-glass)上 */
.global-menubar {
    position: relative;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.global-menubar nav {
    font-size: 0.875em;
    justify-content: center;
    flex-wrap: nowrap;
}

.global-menubar a {
    position: relative;
    padding: 0.5em;
    margin: -0.5em 0;
}

:is(.global-header, .global-footer .list) .menu-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* theme 切换 */
.theme-container {
    position: relative;
}

#themeBtn {
    transition: transform 0.3s, background 0.3s;
}

#themeBtn::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 浅色模式:显示月亮(点击切换到深色) */
#themeBtn.light::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-7.54-7.54C12.92 3.04 12.46 3 12 3z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-7.54-7.54C12.92 3.04 12.46 3 12 3z'/></svg>");
    transform: rotate(0deg) scale(1);
}

/* 深色模式:显示太阳(点击切换到浅色) */
#themeBtn.dark::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='5'/><line x1='12' y1='1' x2='12' y2='3'/><line x1='12' y1='21' x2='12' y2='23'/><line x1='4.2' y1='4.2' x2='5.6' y2='5.6'/><line x1='18.4' y1='18.4' x2='19.8' y2='19.8'/><line x1='1' y1='12' x2='3' y2='12'/><line x1='21' y1='12' x2='23' y2='12'/><line x1='4.2' y1='19.8' x2='5.6' y2='18.4'/><line x1='18.4' y1='5.6' x2='19.8' y2='4.2'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='5'/><line x1='12' y1='1' x2='12' y2='3'/><line x1='12' y1='21' x2='12' y2='23'/><line x1='4.2' y1='4.2' x2='5.6' y2='5.6'/><line x1='18.4' y1='18.4' x2='19.8' y2='19.8'/><line x1='1' y1='12' x2='3' y2='12'/><line x1='21' y1='12' x2='23' y2='12'/><line x1='4.2' y1='19.8' x2='5.6' y2='18.4'/><line x1='18.4' y1='5.6' x2='19.8' y2='4.2'/></svg>");
    transform: rotate(360deg) scale(1);
}

#themeBtn:hover {
    transform: scale(1.08);
}

#themeBtn:hover::before {
    transform: rotate(15deg) scale(1.1);
}

#themeBtn.dark:hover::before {
    transform: rotate(375deg) scale(1.1);
}

#themeBtn:active {
    transform: scale(0.95);
}

/* 主题面板标题 */
.theme-panel-title {
    display: block;
    padding: 0.25em 0.75em 0.5em;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--main-color);
    opacity: 0.7;
}

#themeOptions {
    position: absolute;
    top: calc(100% + 0.5em);
    right: 0;
    display: flex;
    flex-flow: column;
    gap: 0.25em;
    min-width: 12em;
    min-height: auto;
    padding: 0.75em;
    border-radius: 1.2em;
    justify-content: flex-start;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5em) scale(0.96);
    transform-origin: top right;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    pointer-events: none;
    box-shadow: 0 1em 3em -1em var(--blur-line-color),
        0 0.5em 1.5em -0.5em hsl(252deg 30% 62% / 0.15);
}

.theme-container.open #themeOptions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* 主题选项卡片 */
.theme-opt {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.6em 0.75em;
    border-radius: 0.75em;
    white-space: nowrap;
    transition: background 0.25s, color 0.25s, transform 0.25s;
    position: relative;
}

.theme-opt::before {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.theme-opt:hover {
    background: var(--blur-line-color);
    transform: translateX(0.2em);
}

.theme-opt:hover::before {
    transform: scale(1.15) rotate(8deg);
}

/* 选项文字区 */
.theme-opt-info {
    display: flex;
    flex-flow: column;
    gap: 0.1em;
    flex: 1;
    text-align: left;
}

.theme-opt-name {
    font-size: 0.9em;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* 选中态勾选标记 */
.theme-opt-check {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.25s, transform 0.25s;
}

/* 选中态 */
.theme-opt.active {
    background: linear-gradient(135deg, var(--main-color), hsl(252deg 30% 72%));
    color: var(--back-color);
    box-shadow: 0 0.3em 1em -0.3em var(--main-color),
        inset 0 1px 0 hsl(0deg 0% 100% / 0.15);
}

.theme-opt.active .theme-opt-check {
    opacity: 1;
    transform: scale(1);
}

.theme-opt.active:hover {
    transform: translateX(0.2em) scale(1.02);
}

/* ===== page-header 标题区 ===== */
.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 1 0;
    color: var(--main-color);
    min-height: var(--wave-text-line, 30vmax);
    width: 100%;
    gap: 1em;
}

.page-header h1 {
    font-size: clamp(2em, 6vw, 4em);
    font-weight: 400;
    letter-spacing: normal;
}

.page-header h5 {
    font-size: 1.125em;
    letter-spacing: 0.5em;
    line-height: 2;
    font-weight: 400;
    max-width: max(70%, 30em);
    text-align: center;
}

/* ===== 入口按钮 ===== */
.entry-buttons {
    display: flex;
    gap: 1.2em;
    margin-top: 2.5em;
    justify-content: center;
}

.entry-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.8em 2.4em;
    border-radius: 2.5em;
    font-size: 0.95em;
    font-weight: 500;
    letter-spacing: 0.15em;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid var(--blur-line-color);
    background: var(--blur-back-color);
    backdrop-filter: blur(0.8em) saturate(1.5);
    -webkit-backdrop-filter: blur(0.8em) saturate(1.5);
    color: var(--font-color);
    box-shadow: 0 0.2em 0.8em -0.3em var(--blur-line-color),
        inset 0 1px 0 hsl(0deg 0% 100% / 0.1);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s;
}

/* 光泽扫过效果 */
.entry-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            transparent 30%,
            hsl(0deg 0% 100% / 0.15) 50%,
            transparent 70%);
    transform: translateX(-150%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.entry-btn:hover {
    transform: translateY(-0.25em) scale(1.02);
    border-color: hsl(252deg 30% 62% / 0.3);
    box-shadow: 0 0.8em 2em -0.5em var(--main-color),
        inset 0 1px 0 hsl(0deg 0% 100% / 0.15);
}

.entry-btn:hover::before {
    transform: translateX(150%);
}

.entry-btn:active {
    transform: translateY(-0.05em) scale(0.99);
}

/* 箭头图标 */
.entry-btn-arrow {
    width: 1.1em;
    height: 1.1em;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.entry-btn:hover .entry-btn-arrow {
    transform: translateX(0.2em);
}

/* 主按钮 */
.entry-btn.primary {
    background: linear-gradient(135deg, var(--main-color), hsl(252deg 30% 72%));
    color: var(--back-color);
    border-color: transparent;
    box-shadow: 0 0.4em 1.2em -0.3em var(--main-color),
        inset 0 1px 0 hsl(0deg 0% 100% / 0.2),
        inset 0 -1px 0 hsl(252deg 30% 40% / 0.2);
}

.entry-btn.primary::before {
    background: linear-gradient(120deg,
            transparent 30%,
            hsl(0deg 0% 100% / 0.3) 50%,
            transparent 70%);
}

.entry-btn.primary:hover {
    box-shadow: 0 0.8em 2.5em -0.5em var(--main-color),
        inset 0 1px 0 hsl(0deg 0% 100% / 0.25),
        inset 0 -1px 0 hsl(252deg 30% 40% / 0.2);
}

.entry-btn.primary:hover .entry-btn-arrow {
    transform: translateX(0.3em);
}

.slogan-item {
    min-height: 100vh;
    padding-bottom: 1em;
}

.slogan-item footer {
    width: 100%;
}

/* ===== plat-item 平台滚动 ===== */
.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;
    overflow: hidden;
}

.plat-item-scroll {
    display: flex;
    width: max(100vw, 60em);
    animation: plat-scroll 50s linear infinite;
}

.plat-item ul {
    display: flex;
    justify-content: space-evenly;
    flex: 0 0 100%;
    font-family: D-DIN, var(--font-family);
    -webkit-box-reflect: below 0.5em linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}

.plat-item li {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex: 1 1 0;
    gap: 0.5em;
    font-size: 1em;
    font-weight: 400;
}

@keyframes plat-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* ===== page-section 区块 ===== */
.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, 6vmax) 0 0;
}

.page-section .head h2 {
    font-size: clamp(1.5em, 4vw, 2.5em);
    font-weight: 600;
}

.page-section .head .wave-pack {
    font-size: clamp(4em, var(--wave-text-size, 20vmax), 20vw);
}

.page-section .menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: wrap;
    gap: min(var(--edge-size), 1em);
    color: hsl(252deg 30% 30% / 0.7);
}

:root[data-theme="dark"] .page-section .menu {
    color: hsl(252deg 30% 80% / 0.7);
}

/* type-filter */
.type-filter {
    gap: min(var(--edge-size), 1em);
    justify-content: center;
    flex-wrap: wrap;
}

.type-filter .active {
    color: var(--main-color);
    outline-color: hsl(252deg 30% 62% / 0.5);
}

/* list 网格 */
.page-section .list {
    display: grid;
    grid: auto-flow dense / repeat(auto-fit, minmax(min(var(--item-width, 20em), 100%), 1fr));
    gap: min(var(--edge-size), 1em);
}

/* item 卡片 */
.page-section .item {
    display: flex;
    gap: 1em;
    padding: 1em;
    flex-flow: var(--item-direc, column);
    place-content: stretch center;
    overflow: hidden;
}

.page-section .item:only-of-type {
    grid-column: 1 / -1;
    margin: auto;
}

.page-section .item-plats {
    display: flex;
    align-items: center;
    justify-content: var(--item-place, space-between);
    font-size: 0.75em;
    gap: 0.5em;
    width: 100%;
    order: -1;
    margin: -0.5em 0;
    opacity: 0.5;
}

.page-section .item-photo {
    position: relative;
    flex: var(--item-photo-flex, none);
    width: var(--item-photo-width, 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-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: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center top;
}

.page-section .item-photo nav {
    position: absolute;
    justify-content: center;
    inset: auto 0 0;
    padding: 1.5em;
    z-index: 2;
}

.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: 1 1 min(10em, 100%);
    gap: 1em 1.5em;
}

.page-section .item-title {
    flex: 1 1 100%;
    text-wrap: balance;
}

.page-section .item-title h4 {
    font-size: 1em;
    font-weight: 600;
}

.page-section .item-title p {
    opacity: 0.5;
    font-size: 0.75em;
    margin: 0.5em 0;
}

.page-section .item-label {
    display: flex;
    flex-flow: column;
    color: var(--main-color);
}

.page-section .item-label .item-price {
    font-family: D-DIN, var(--font-family);
    font-weight: 700;
}

/* none-things 空状态 */
.none-things {
    flex: 1 1 auto;
    grid-column: 1 / -1;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    min-height: 15em;
    gap: 1em;
}

/* ===== global-footer ===== */
.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: rgba(255, 255, 255, 0.7);
    padding: 1.5em;
    gap: 1.5em;
    background: rgb(50, 52, 53);
    backdrop-filter: blur(1em) saturate(1.8);
    -webkit-backdrop-filter: blur(1em) saturate(1.8);
    outline: 1px solid var(--blur-line-color);
    border: 1px solid var(--blur-back-color);
    border-radius: 1em;
    min-height: 30em;
    overflow: hidden;
}

.global-footer .global-pack::before {
    content: "";
    flex: 1 1 100%;
    order: -1;
}

.global-footer .back {
    position: absolute;
    display: block;
    margin: auto;
    inset: 0;
    width: 80%;
    height: auto;
    object-fit: contain;
    opacity: 0.05;
    z-index: 0;
    transition: 0.3s;
}

.global-footer:has(header:not(:hover)) .back {
    opacity: 0.05;
    filter: blur(0);
    scale: 1.05;
}

.global-footer header {
    flex: 1 1 0;
    min-width: min(40em, 100%);
    color: white;
    font-size: 0.75em;
    text-align: center;
    order: -1;
    z-index: 1;
}

.global-footer header h2 {
    font-size: 2em;
    font-weight: 600;
}

.global-footer header .logo-text {
    width: 15em;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: brightness(0) invert(1);
}

.global-footer header p {
    padding: 0.5em 0 0 1em;
    letter-spacing: 1em;
}

.global-footer header img {
    width: 8em;
    height: auto;
    display: block;
    margin: 0 auto;
}

.global-footer .list {
    flex: 2 1 0;
    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: 0.75em;
    flex: 1 1 clamp(10em, 15em, 50%);
    gap: 1em;
}

.global-footer .list article h3 {
    font-size: 1em;
    font-weight: 600;
    color: #fff;
}

.global-footer .list article ul {
    display: flex;
    flex-wrap: wrap;
    gap: inherit;
    margin: 0.5em 0;
}

.global-footer .list article ul li {
    flex: 1 1 min(15em, 100%);
    min-width: fit-content;
    max-width: 100%;
}

.global-footer footer {
    flex: 1 1 100%;
    display: flex;
    justify-content: space-between;
    gap: 0.5em 1em;
    font-size: 0.75em;
    padding: 1em 0 0;
    margin: -0.5em 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    z-index: 1;
}

.global-footer footer a:not(:hover) {
    opacity: 0.5;
}

:is(.global-menubar, .global-footer .list) a[target="_blank"]::after {
    content: "↗";
    font-size: 0.5em;
    vertical-align: super;
}

/* ===== 对话框/侧栏 ===== */
.area-dialog,
.area-dialog-mask {
    position: fixed;
    inset: 0;
    transition: 0.3s;
    z-index: 10;
}

.area-dialog-mask {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(0.5em);
    -webkit-backdrop-filter: blur(0.5em);
    opacity: 0;
    visibility: hidden;
}

.area-dialog-mask.show {
    opacity: 1;
    visibility: visible;
}

.global-sidebar {
    --dialog-opacity: 1;
    --dialog-transform: translateX(100%);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(30em, 100%);
    height: 100%;
    max-width: calc(100vw - var(--edge-size) * 2);
    transform: translateX(100%);
    background: var(--dialog-background, var(--blur-back-color));
    backdrop-filter: blur(1em) saturate(1.8);
    -webkit-backdrop-filter: blur(1em) saturate(1.8);
    padding: 3em 1em 1em;
    z-index: 11;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.global-sidebar.show {
    transform: translateX(0);
}

.global-sidebar .none-things {
    text-align: center;
    font-size: 0.875em;
}

.global-sidebar .has-flex-entry {
    flex-flow: column;
}

.global-sidebar .more-button {
    width: 100%;
    justify-content: center;
    padding: 0.75em 1em;
}

/* 响应式:小屏 menubar 隐藏为弹出 */
@media (max-width: 70rem) {
    .global-menubar {
        position: fixed;
        top: var(--head-height);
        left: var(--edge-size);
        right: var(--edge-size);
        margin: auto;
        width: fit-content;
        max-width: calc(100vw - var(--edge-size) * 2);
        transform: translateY(-1em);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .global-menubar.show {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .global-menubar nav {
        flex-flow: column;
        align-items: flex-start;
        font-size: 0.875em;
    }
}

@media (max-width: 40rem) {
    :root {
        --edge-size: 1rem;
    }

    .page-header h5 {
        letter-spacing: 0.3em;
    }

    .global-footer .list article {
        flex: 1 1 100%;
    }
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: var(--back-color);
}