/* ====================================================================
   V46 - 仰望星空 俯探深海 - 样式
   深蓝主题：星空深海 · 白色文本
   ==================================================================== */

/* ==================== 主题变量 ==================== */
:root {
    /* 字号 */
    --fs-hero: 25px;
    --fs-nav: 33px;
    --fs-s1t: 75px;
    /* 一级栏目标题 */
    --fs-s1tc: 38px;
    /* 卡片标题 */
    --fs-s1pc: 20px;
    /* 卡片描述 */
    --fs-s1m: 25px;
    /* 更多按钮 */
    --fs-s2t: 30px;
    --fs-s2p: 20px;
    /* 二级段落 */
    --fs-s4t: 30px;
    --fs-s4p: 20px;
    --fs-ft: 16px;
    /* 页脚 */
    --fs-lt: 75px;
    /* 列表标题 */
    --fs-lct: 30px;
    --fs-lm: 1.71vw;
    /* 列表meta */
    --fs-l-more: 50px;
    --fs-dp: 25px;
    /* 详情段落 */
    --fs-dt1: 50px;
    /* 详情标题 */

    /* 颜色 */
    --c-text: #FFFFFF;
    --text: #FFFFFF;
    --c-bd: #4FC3F7;
    /* 主蓝色边框/装饰 */
    --c-bd-g: rgba(79, 195, 247, 0.8);
    --c-nav: #00deff;
    /* 导航激活色 */
    --c-glow: 0 0 18px rgba(79, 195, 247, 0.6);
    --c-footer-bg: #02080e;
    --c-accent: #4FC3F7;
    --c-surface: rgba(8, 38, 60, 0.85);
    --c-bg-1: #0a2a3d;
    --c-bgcolor: #051c7d;
    /* canvas 颜色 */
    --c-pop: #29B6F6;

    /* 尺寸 */
    --fs-norm: 16px;
    --fs-list-title: 20px;

    /* 背景色：深蓝星空 */
    --bg-page: #04143a;
    /* 主背景：深蓝 */
    --bg-page-deep: #020b25;
    --bg-i-card: #1e3a8a;
    --bg-lcard: rgba(255, 255, 255, 0.06);
    --w: 1510px;

    /* 边框宽度 */
    --bd-nav: 2px;
    --w-s1-bd: 5px;
    --w-s1-bds: 7px;
    --w-s1-bdr: 20px;
    --w-s1-r: 30px;
    --w-s1-rc: 12px;
    --w-s1-tr: 60px;
    --w-s1-ctr: 30px;
    --w-s1-bdc: 2px;
    --w-bd: 2px;
    --w-bds: 7px;
    --w-nav-m: 0.625vw;

    --bd-c: #4FC3F7;
    --r-card: 24px;
    --r-s4-1: 50px;
    --r-s4-2: 20px;

    --tr: 0.2s ease-in-out;
    --ray-color: 255, 235, 190;
    --ray-cool: 33, 150, 243;
    --glow: rgba(180, 222, 255, 0.9);
}

@media screen and (max-width: 1600px) {
    /*79.47*/
    :root {
        --fs-hero: 20px;
        --fs-nav: 26px;
        --fs-s1t: 56px;
        --fs-s1tc: 30px;
        --fs-s1pc: 15px;
        --fs-s1m: 20px;
        --fs-s2t: 24px;
        --fs-s2p: 16px;
        --fs-s4t: 24px;
        --fs-s4p: 16px;

        --fs-ft: 12px;
        --fs-lt: 56px;
        --fs-lct: 22px;
        --fs-l-more: 38px;
        --fs-dp: 19px;
        --fs-dt1: 40px;
        --w: 1200px;
        --w-s1-bd: 4px;
        --w-s1-bds: 5px;
        --w-s1-bdr: 15px;
        --w-s1-r: 22px;
        --w-s1-rc: 10px;
        --w-s1-tr: 45px;
        --w-s1-ctr: 22px;
        --w-s1-bdc: 2px;

        --r-card: 19px;
        --r-s4-1: 40px;
        --r-s4-2: 16px;
    }
}

@media screen and (max-width: 1280px) {
    /*6490*/
    :root {
        --fs-hero: 16px;
        --fs-nav: 21px;
        --fs-s1t: 46px;
        --fs-s1tc: 25px;
        --fs-s1pc: 12px;
        --fs-s1m: 16px;
        --fs-s2t: 19px;
        --fs-s2p: 13px;
        --fs-s4t: 19px;
        --fs-s4p: 13px;

        --fs-ft: 9px;
        --fs-lt: 46px;
        --fs-lct: 18px;
        --fs-l-more: 30px;
        --fs-dp: 15px;
        --fs-dt1: 32px;
        --w: 980px;
        --w-s1-bd: 3px;
        --w-s1-bds: 4px;
        --w-s1-bdr: 12px;
        --w-s1-r: 18px;
        --w-s1-rc: 8px;
        --w-s1-tr: 36px;
        --w-s1-ctr: 18px;
        --w-s1-bdc: 2px;
        --r-card: 16px;
        --r-s4-1: 32px;
        --r-s4-2: 12px;
    }
}

@media screen and (max-width: 1024px) {
    /*4768*/
    :root {
        --fs-hero: 12px;
        --fs-nav: 16px;
        --fs-s1t: 34px;
        --fs-s1tc: 18px;
        --fs-s1pc: 9px;
        --fs-s1m: 12px;
        --fs-s2t: 14px;
        --fs-s2p: 10px;
        --fs-s4t: 14px;
        --fs-s4p: 10px;

        --fs-ft: 7px;
        --fs-lt: 34px;
        --fs-lct: 14px;
        --fs-l-more: 22px;
        --fs-dp: 12px;
        --fs-dt1: 23px;
        --w: 720px;
        --w-s1-bd: 2px;
        --w-s1-bds: 3px;
        --w-s1-bdr: 9px;
        --w-s1-r: 14px;
        --w-s1-rc: 6px;
        --w-s1-tr: 27px;
        --w-s1-ctr: 14px;
        --w-s1-bdc: 2px;

        --r-card: 11px;
        --r-s4-1: 24px;
        --r-s4-2: 10px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --fs-hero: 1.30vw;
        --fs-nav: 3.9vw;
        --fs-s1t: 5.2vw;
        --fs-s1tc: 4.74vw;
        --fs-s1pc: 1.71vw;
        --fs-s1m: 3.9vw;
        --fs-s2t: 3.4vw;
        --fs-s2p: 1.71vw;
        --fs-s4t: 3.4vw;
        --fs-s4p: 1.71vw;

        --fs-ft: 0.83vw;
        --fs-lt: 5.2vw;
        --fs-lct: 3.9vw;
        --fs-l-more: 2.6vw;
        --fs-dp: 2.34vw;
        --fs-dt1: 3.9vw;
        --w: 78.64%;
        --w-s1-bd: 1px;
        --w-s1-bds: 2px;
        --w-s1-bdr: 8px;
        --w-s1-r: 1.56vw;
        --w-s1-rc: 1vw;
        --w-s1-tr: 2.60vw;
        --w-s1-ctr: 2.08vw;
        --w-s1-bdc: 1px;

        --r-card: 1.25vw;
        --w-bd: 1px;
        --r-s4-1: 3.125vw;
        --r-s4-2: 1vw;
    }
}

html,
body {
    font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    scrollbar-gutter: stable;
    font-size: var(--fs-norm);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--c-bd);
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    background-color: var(--bg-page-deep);
}
a {
    text-decoration: none;
    color: inherit;
}
.wh100 {
    width: 100%;
    height: 100%;
}
.flec {
    display: flex;
    align-items: center;
}

@keyframes star-twinkle {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.7;
    }
}
@keyframes nebula-drift {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(30px, -20px) scale(1.1);
    }
}
.canvas-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
}

.container {
    position: relative;
}

/* 单根光柱 */
.ray {
    position: absolute;
    top: 2%;
    right: 5%;
    width: 0.8vw;
    height: 50%;
    /* 延伸到画面外，保证覆盖 */
    transform-origin: top center;
    /* 锥形：顶端宽 -> 底端窄（或用 blur 制造发散感） */
    background: linear-gradient(to bottom, rgba(var(--ray-color), 0.05) 0%, rgba(var(--ray-color), 0.65) 5%, 
    rgba(var(--ray-color), 0.35) 35%, rgba(var(--ray-color), 0.08) 70%, transparent 100%);
    filter: blur(0.2vw);
    mix-blend-mode: screen;
    animation: ray-sway 11s ease-in-out infinite alternate;
    overflow: hidden;
    --base-angle: 18deg;
}

/* 高亮光线：从光柱右侧以小角度斜切过渡到左侧 */
.ray::after {
    content: '';
    position: absolute;
    right: -400%;
    /* 初始在光柱右侧外部 */
    top: 50%;
    /* 垂直居中 */
    width: 100%;
    /* 光段横向长度（略宽于光柱） */
    height: 200%;
    /* 竖向足够覆盖光柱 */
    transform: translateY(-50%) rotate(10deg);
    /* 小角度倾斜 */
    background: linear-gradient(to left,transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100%);
    filter: blur(0.1vw);
    mix-blend-mode: screen;
    animation: ray-highlight 4s ease-in-out infinite;
}

/* 冷色光柱（蓝白）穿插 */
.ray.cool {
    background: linear-gradient(to bottom, rgba(var(--ray-cool), 0.7) 0%, rgba(var(--ray-cool), 0.25) 40%, transparent 100%);
}

/* 冷色光柱的高亮光线带冷色调 */
.ray.cool::after {
    background: linear-gradient(to left, transparent 0%, rgba(220, 240, 255, 0.9) 50%, transparent 100%);
}

@keyframes ray-sway {
    0% {
        transform: rotate(var(--base-angle, 0deg));
        opacity: 0.55;
    }
    50% {
        transform: rotate(calc(var(--base-angle, 0deg) + 2.5deg));
        opacity: 0.9;
    }
    100% {
        transform: rotate(calc(var(--base-angle, 0deg) - 2deg));
        opacity: 0.6;
    }
}
/* 高亮光段从右向左穿过光柱 */
@keyframes ray-highlight {
    0% { right: -400%; opacity: 0; }
    25% { opacity: 1.0;}
    50% { opacity: 1.0; }
    75% { opacity: 1.0; }
    100% {
        right: 400%;
        opacity: 0;
    }
}

/* ====================================================================
   顶部 HERO
   ==================================================================== */
.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 1080;
    /*
    background-image: url(./topic-space-deepsea-v1-bg-hero.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;*/
}
.hero__bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    aspect-ratio: 1920 / 1838;
    left: 0;
    top: 0;
    background-image: url(./topic-space-deepsea-v1-bg-hero-full.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* 垂直遮罩：顶部不透明 → 中间渐变 → 底部透明 */
    -webkit-mask-image: linear-gradient(to bottom, black, black 55%,rgba(0, 0, 0, 0.2) 75%,transparent);
    mask-image: linear-gradient(to bottom, black, black 55%,rgba(0, 0, 0, 0.2) 75%,transparent);
     
}
.main__bg {
    position: absolute;
    inset: 0;
    background-image: url(./topic-space-deepsea-v1-bg-page-body.jpg);
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 5%, rgba(0, 0, 0, 0.5) 10%, black);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 5%, rgba(0, 0, 0, 0.5) 10%, black);

    /*
    mask-image: none;
    -webkit-mask-image: none;
    */
}

.hero__inner {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: end;
    justify-content: center;
    box-sizing: border-box;
}

.hero__org {
    width: 28.40%;
    color: var(--c-text);
    font-size: 1.30vw;
    margin-bottom: 10.41%;
}

.hero-item {
    width: 100%;
    aspect-ratio: 507 / 38;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 12, 77, 0.7);
    border-radius: 2.4vw;
    margin-top: 1.2%;
    letter-spacing: 0.05em;
    backdrop-filter: blur(4px);
}

/* ====================================================================
   主导航（桌面端）
   ==================================================================== */
.nav-wrap {
    width: 100%;
    position: relative;
}
.nav {
    width: var(--w);
    max-width: var(--w);
    margin: 0 auto;
    aspect-ratio: 1510 / 290;
    font-size: var(--fs-nav);
    line-height: 1.0;
    color: var(--c-text);
}

.nav__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5em;
    box-sizing: border-box;
}

.nav__item {
    width: 17.15%;
    aspect-ratio: 259 / 96;
    transition: var(--tr);
    position: relative;
    color: var(--c-text);
    letter-spacing: 0.05em;
    background-image: url(./topic-space-deepsea-v1-bg-icon.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.nav__item:hover {
    color: #fff;
    text-shadow: 0 0 0.5em var(--c-bd);
    transform: translateY(-2px);
}

.nav__item.is-active {
    color: #e0f3fb;
    text-shadow: 0 0 8px rgba(79, 195, 247, 0.9), 0 0 18px rgba(79, 195, 247, 0.6), 0 0 32px rgba(79, 195, 247, 0.4);
}

.nav__item.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #4FC3F7, transparent);
    box-shadow: 0 0 10px rgba(10, 179, 231, 0.5);
}
/*rgb(10 179 231 / 50%);*/
/* ====================================================================
   小屏导航 sticky 浮动按钮
   ==================================================================== */
.nav-m-wrap {
    display: none;
    position: sticky;
    top: 10vw;
    left: 0;
    width: 100%;
    z-index: 9999;
    pointer-events: none;
}

.nav-m {
    position: absolute;
    top: 0;
    left: 10.67%;
    right: 10.67%;
    margin: 0 auto;
    pointer-events: auto;
}

.nav-m__toggle {
    width: 8.59vw;
    height: 8.59vw;
    padding: 0;;
    background-color: transparent;
    border: var(--w-nav-m) solid var(--c-text);
    border-radius: calc(var(--w-nav-m) * 2);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5), 0 0 24px rgba(203, 235, 250, 0.25);
    backdrop-filter: blur(8px);
    cursor: pointer;
    position: relative;
    transition: var(--tr);
    padding: 0;
}

.nav-m__toggle:hover {
    background-color: rgba(20, 60, 130, 0.95);
    box-shadow: 0 0 20px rgba(79, 195, 247, 0.8);
}

.nav-m__toggle::before,
.nav-m__toggle::after,
.nav-m__toggle span {
    content: '';
    position: absolute;
    display: block;
    left: 50%;
    width: 71.4%;
    height: var(--w-nav-m);
    background: var(--c-text);
    border-radius: var(--w-nav-m);
    transform: translateX(-50%);
    transition: var(--tr);
    box-shadow: 0 0 4px var(--c-bd);
    margin: 0;
}

.nav-m__toggle::before {
    top: 16.0%;
}

.nav-m__toggle::after {
    bottom: 16.0%;
}

.nav-m__toggle span {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/* 展开时变形为 X */
.nav-m__toggle.is-open::before {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.nav-m__toggle.is-open::after {
    bottom: 50%;
    transform: translateX(-50%) translateY(50%) rotate(-45deg);
}

.nav-m__toggle.is-open span {
    opacity: 0;
}

.nav-m__panel {
    position: absolute;
    top: 12vw;
    left: 0;
    width: 41.72%;
    display: flex;
    flex-direction: column;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: var(--tr);
    z-index: 199;
}

.nav-m__panel.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.nav-m__item {
    width: 100%;
    aspect-ratio: 630 / 115;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text);
    font-size: 3.9vw;
    border-radius: 16vw;
    transition: var(--tr);
    letter-spacing: 0.05em;
    border: 1px solid var(--c-text);
    background: rgba(16, 21, 69, 0.4);
    margin-bottom: 1vw;
    box-shadow: 0 0 10px rgba(129, 209, 247, 0.8), 0 0 20px rgba(121, 207, 247, 0.25);
}

.nav-m__item:hover {
    border-color: var(--bd-c);
    background: rgba(79, 195, 247, 0.08);
}

.nav-m__item.is-active {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(156, 174, 252, 0.25);
    border-color: var(--c-bd);
}

/* ====================================================================
   主内容容器
   ==================================================================== */
main {
    width: 100%;
    position: relative;
    z-index: 1;
}



/* ====================================================================
   一级容器：每个 section（栏目）
   ==================================================================== */
.section {
    width: var(--w);
    max-width: var(--w);
    margin: 0 auto;
    padding: 0 0;
    box-sizing: border-box;
    position: relative;
}

.sec1__title_wrap {
    width: 100%;
    aspect-ratio: 1510 / 330;
    display: flex;
    align-items: end;
    justify-content: center;
    position: relative;
    container-type: inline-size;
}
.section:nth-child(n+2) .sec1__title_wrap {
    padding-top:3.97%; /* 60 / 1510;*/
}
.sec1__title_inner {
    width: 100%;
    aspect-ratio: 1510 / 210;
    display: flex;
    align-items: center;
    margin-bottom: 1.98%;
}

.sec1__title_text {
    width: 31.78%;
    aspect-ratio: 480 / 203;
}
.sec1__title_text img {
    width: 100%;
    height: 100%;
}

.section__title_deco_l,
.section__title_deco_r {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
}
.section__title_deco_l::before,
.section__title_deco_r::before {
    content: '';
    width: 100%;
    display: block;
    aspect-ratio: 532 / 109;
    background-image: url(./topic-space-deepsea-v1-bg-title-line.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}
.section__title_deco_l::before{
    transform: translateY(25%);
}

.section__title_deco_r::before {
    transform: translateY(-25%);
}

.sec1__bg_tr, .sec1__bg_bl {
    width: 40.26%;
    aspect-ratio: 608 / 122;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
}
.sec1__bg_tr {
    background-image: url(./topic-space-deepsea-v1-bg-line-g.png);
    top: 0;
    right: 0;
    transform: translateY(-50%);
}
.sec1__bg_bl {
    background-image: url(./topic-space-deepsea-v1-bg-line-b.png);
    bottom: 0;
    left: 0;
    transform: translateY(50%);
}
.sec1__bg_tl {
    width: 38.74%;
    aspect-ratio: 582 / 75;
    background-image: url(./topic-space-deepsea-v1-bg-line-tl.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(-25%);
}

/* ====================================================================
   栏目卡片网格
   ==================================================================== */
.sec1__body_inner {
    width: 100%;
    aspect-ratio: 1510 / 1070;
    background-image: url(./topic-space-deepsea-v1-bg-s1-rect.png);
    background-size: 100% 100%;
    padding-left: 7.947%;
    padding-right: 7.947%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    position: relative;
}

.star_bg {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.star_bg i {
    position: absolute;
    display: block;
    --x : 1.0;
    --w: 5.56%;
    width: calc(var(--w) * var(--x));
    aspect-ratio: 84 / 135;
    background-image: url(./topic-space-deepsea-v1-bg-star-y2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.star_bg span {
    position: absolute;
    display: block;
    --x : 1.0;
    --w: 4.90%;
    width: calc(var(--w) * var(--x));
    aspect-ratio: 74 / 118;
    background-image: url(./topic-space-deepsea-v1-bg-star-2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.sec1__body_item {
    width: 100%;
    aspect-ratio: 1270 / 140;
    position: relative;
    display: flex;
    align-items: center;
    transition: var(--tr);
}
.sec1__item {
    width: 91.65%;
    aspect-ratio: 1164 / 115;
    border-radius: var(--r-card);
    border: var(--w-bd) solid var(--c-text);
    font-size: var(--fs-s1tc);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.0;
    
    --bg2: rgba(25,162,255,1.0);
    --bg: rgba(62,117,247,1.0);
    background-image: linear-gradient(to right, var(--bg2) 0%, var(--bg) 90%, var(--bg) 100%);
    position: relative;
    container-type: size;
    box-sizing: border-box;
    
}
.sec1__body_item:nth-child(5) .sec1__item {
    --bg :#6642fb;
    --bg2 :#1b49f8;
}
.sec1__body_item:nth-child(4) .sec1__item {
    --bg :#3eacf8;
    --bg2 :#1cebe8;
}
.sec1__body_item:nth-child(3) .sec1__item {
    --bg :#c65af3;
    --bg2 :#763df0;
}
.sec1__body_item:nth-child(2) .sec1__item {
    --bg :#e3b958;
    --bg2 :#df5834;
}
.sec1__body_item:nth-child(1) .sec1__item {
    --bg :#2941ea;
    --bg2 :#0886ed;
}

.sec1__item .text {
    font-size: var(--fs-s1tc);
    padding: 0 0.8em;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    position: relative;
    z-index: 1;
    transition: var(--tr);
}

.sec1__item::before {
    content: '';
    position: absolute;
    z-index: 3;
    bottom: 0;
    width: 0;
    aspect-ratio: 30 / 30;
    border-left: 5cqw solid transparent;
    border-right: 0px solid transparent;
    border-top: 4cqw solid var(--bg);
    left: 87%;
    transform: translateY(100%) translateX(-50%);
}
.sec1__item::after {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: 0;
    width: 0;
    aspect-ratio: 30 / 30;
    transform: translateY(100%);
    border-left: calc(5cqw + 4px) solid transparent;
    border-right: 0px solid transparent;
    border-top: calc(4cqw + 2px) solid var(--c-text);
    left: 87%;
    transform: translateY(100%) translateX(calc(-50% - 1px));
}
.sec1__body_item:hover {
    transform: translateY(-5px);
    z-index: 4;
}
.sec1__body_item:nth-child(2n+2) {
    justify-content: end;
}
.sec1__body_item:nth-child(2n+2) .sec1__item {
    transform: rotateY(180deg);
}
.sec1__body_item:nth-child(2n+2) .sec1__item .text {
    transform: rotateY(180deg);
}

.sec1__foot_wrap {
    width: 100%;
}
.sec1__foot_inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-s1m);
    gap: 0.5vw;
    transition: var(--tr);
}
.sec1__foot_c {
    width: 12.91%;
    aspect-ratio: 195 / 66;
    background-image: url(./topic-space-deepsea-v1-bg-btn-bd.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tr);
    cursor: pointer;
}
.sec1__foot_l,.sec1__foot_r {
    width: 13.24%;
    aspect-ratio: 492 / 116;
    background-size: 100% 100%;
}
.sec1__foot_l {
    background-image: url(./topic-space-deepsea-v1-bg-line-star-l.png);
}
.sec1__foot_r {
    background-image: url(./topic-space-deepsea-v1-bg-line-star-r.png);
}
.sec1__foot_inner:hover {
    transform: translateY(-4px);
}

.sec2__grid_wrap {
    width: 100%;
    aspect-ratio: 1510 / 640;
    margin-bottom: 3.31%;
}
.sec2__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2.86%;
    
}
.sec2__grid .column_card {
    width: 100%;
    aspect-ratio: 345 / 640;
    display: flex;
    align-items: end;
    justify-content: center;
    padding-bottom: 23.18%;
    position: relative;
    box-sizing: border-box;
}
.sec2__grid .column_card__bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sec2__grid .column_card__bg i {
    display: block;
    width: 100%;
    aspect-ratio: 345 / 544;
    background-image:url(./topic-space-deepsea-v1-bg-s2-card.png);
    background-size: 100% 100%;
    pointer-events: none;
}
.column_card__bg::before {
    content: '';
    display: block;
    position: absolute;
    width: 50.14%;
    aspect-ratio: 173 / 77;
    background-size: 100% 100%;
    top: 0;
    right: 0;
}
.column_card:nth-child(4n+1) .column_card__bg::before {
    background-image: url(./topic-space-deepsea-v1-bg-card-t1.png);
}
.column_card:nth-child(4n+2) .column_card__bg::before {
    background-image: url(./topic-space-deepsea-v1-bg-card-t2.png);
}
.column_card:nth-child(4n+3) .column_card__bg::before {
    background-image: url(./topic-space-deepsea-v1-bg-card-t3.png);
}
.column_card:nth-child(4n+4) .column_card__bg::before {
    background-image: url(./topic-space-deepsea-v1-bg-card-t4.png);
}

.column_card__bg::after {
    content: '';
    display: block;
    position: absolute;
    width: 63.76%;
    aspect-ratio: 220 / 67;
    background-image: url(./topic-space-deepsea-v1-bg-line-card-b.png);
    background-size: 100% 100%;
    bottom: 0;
    left: 0;
}
.sec2__grid .column_card__body {
    width: 85.21%;
    aspect-ratio: 294 / 440;
    position: relative;
    z-index: 2;
}
.sec2__grid .column_card__title {
    width: 100%;
    aspect-ratio: 294 / 60;
    display: flex;
    align-items: center;
    font-size: var(--fs-s2t);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    line-height: 1.0;;
}
.sec2__grid .column_card__desc {
    width: 100%;
    aspect-ratio: 294 / 90;
    padding: 0;
    margin: 0;
    font-size: var(--fs-s2p);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.column_card__more {
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    position: relative;
}

.column_card__more img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: url(#waveClip);
    -webkit-clip-path: url(#waveClip);
}

.column_card__more::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--c-bd);
    transition: width 0.3s;
}

.column_card:hover .column_card__more::before {
    width: 56px;
}

.sec3__body_wrap {
    width: 100%;
    aspect-ratio: 1510 / 998;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(./topic-space-deepsea-v1-bg-s3-card.png);
    background-size: 100% 100%;
    margin: 3.31% 0;
    position: relative;
}
.sec3__body_wrap::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(calc(-80%));
    width: 55.16%;
    aspect-ratio: 833 / 155;
    background-image: url(./topic-space-deepsea-v1-bg-s3-card-t.png);
    background-size: 100% 100%;
}
.sec3__body_wrap::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(calc(80%));
    width: 55.16%;
    aspect-ratio: 833 / 155;
    background-image: url(./topic-space-deepsea-v1-bg-s3-card-b.png);
    background-size: 100% 100%;
}

.sec3__body_inner {
    width: 84.10%;
    aspect-ratio: 1270 / 714;
    position: relative;
    border: var(--w-bd) solid var(--c-bd);
}
/* =========================================================
   栏目三：星澜趣谈社 - Cold3D 3D 轮播
   ========================================================= */
.cold {
    width: 100%;
    height: 100%;
    position: relative;
}

.cold__stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}

/* 外层：定位 / 3D 变换 / 透明度（纯位置相关，不含外观） */
.cold__card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*border: var(--w-bd) solid var(--c-bd);*/
    box-sizing: border-box;
    transform: translateX(var(--tx, 0)) translateY(var(--ty, 0)) translateZ(var(--tz, 0)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
    transition: ease-in-out 1s;
    cursor: pointer;
    opacity: var(--op, 0);
    pointer-events: var(--pe, none);
    text-decoration: none;
    z-index: var(--zi, 1);
}

.cold__card.is-active {
    pointer-events: auto;
    opacity: 1;
    z-index: 3;
}

/* inner-wrap：外观样式（背景/边框/圆角/阴影） */
.cold__card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*border: var(--w-s1-bdc) solid var(--c-bd);*/
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
    transition: box-shadow 1s;
}

.cold__card__img {
    position: absolute;
    inset: 0;
}

.cold__card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cold__card__body {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(12px, 1.8vw, 24px);
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 60%, transparent 100%);
    color: var(--c-text);
    opacity: 0;
    pointer-events: none;
}

.cold__card__title {
    font-size: var(--fs-s1tc);
    margin: 0 0 0.35em;
}

.cold__card__desc {
    font-size: var(--fs-s1pc);
    margin: 0;
}

/* 控制 */
.cold__nav {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}

.cold__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    transition: var(--tr);
    border: 1px solid var(--c-bd);
}

.cold__dot.is-active {
    width: 28px;
    border-radius: 5px;
    background: var(--c-bd);
    box-shadow: var(--c-glow);
}

.cold__arrow {
    position: absolute;
    top: 50.0%;
    
    z-index: 5;
    width: 6.78%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--tr);
    background-color: transparent;
    padding: 0;
}

.cold__arrow:hover {
    box-shadow: var(--c-glow);
    background-color: rgba(199, 247, 247, 0.8);
}

.cold__arrow img {
    width: 100%;
    height: 100%;
    transition: var(--tr);
}

.cold__arrow--prev {
    left: 0%;
    transform: translateY(-50%) translateX(-50%);
}

.cold__arrow--next {
    right: 0%;
    transform: translateY(-50%) translateX(50%);
}

.sec4__grid_wrap {
    width: 100%;
    aspect-ratio: 1510 / 1520;
    position: relative;
}
.sec4__column_grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 4%;
    row-gap: 6%;
}
.sec4__column_grid .column_card {
    width: 100%; 
    aspect-ratio: 510 / 680;
    padding: 9.31% 9.31%;
    box-sizing: border-box;
    border-radius: var(--r-s4-1);
}
.column_card__innder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sec4__column_grid .column_card:nth-child(6n+1) { background-image: linear-gradient(#01abfa, #0066ef); }
.sec4__column_grid .column_card:nth-child(6n+2) { background-image: linear-gradient(#e974da, #e272b5); }
.sec4__column_grid .column_card:nth-child(6n+3) { background-image: linear-gradient(#1f5de7, #1e2adf); }
.sec4__column_grid .column_card:nth-child(6n+4) { background-image: linear-gradient(#18e283, #16d8ae); }
.sec4__column_grid .column_card:nth-child(6n+5) { background-image: linear-gradient(#9537f1, #bf36e8); }
.sec4__column_grid .column_card:nth-child(6n+6) { background-image: linear-gradient(#ef9255, #e8b654); }

.sec4__column_grid .column_card__img {
    width: 100%;
    aspect-ratio:  415 / 415;
    border-radius: var(--r-s4-2);
}
.column_card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section:last-child::after {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 1510 / 400;
}
.sec4__column_grid .column_card__title {
    font-size: var(--fs-s4t);
    line-height: 1.0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sec4__column_grid .column_card__desc {
    font-size: var(--fs-s4p);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ====================================================================
   列表卡片（左图右文）
   ==================================================================== */
/* ====================================================================
   列表页 - 卷轴容器（深蓝渐变 + 光带装饰）
   ==================================================================== */
.list-page {
    width: 100%;
    aspect-ratio: 1510 / 2762;
    position: relative;
    background-image: url(./topic-space-deepsea-v1-bg-list-rect1.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 卷轴主体：深蓝渐变背景 + 四角光带 */
.list-scroll {
    width: 84.10%;
    aspect-ratio: 1270 / 2300;
    margin: 0 auto;
    position: relative;
    /*
    background:
        radial-gradient(ellipse at 50% 0%, rgba(79, 195, 247, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, rgba(12, 35, 95, 0.92) 0%, rgba(6, 20, 60, 0.96) 100%);
    border: var(--w-s1-bdc) solid var(--c-bd);
    border-radius: 18px;
    padding: 3vw 2.5vw 4vw;
    box-shadow: 0 0 32px rgba(79, 195, 247, 0.25), inset 0 0 60px rgba(2, 10, 35, 0.6);
    */
    /*padding-right: 7.56%;*/
    box-sizing: border-box;
}

/* 四角装饰光点 */
.list-scroll::before,
.list-scroll::after {
    content: '✦';
    position: absolute;
    color: #FFEB3B;
    font-size: 1.4vw;
    text-shadow: 0 0 12px rgba(255, 235, 59, 0.8);
    z-index: 2;
}

.list-scroll::before {
    top: 1.2vw;
    right: 1.5vw;
}

.list-scroll::after {
    bottom: 1.2vw;
    left: 1.5vw;
    color: #4FC3F7;
    text-shadow: 0 0 12px rgba(79, 195, 247, 0.8);
}

/* 右侧装饰条 */
.list-scroll-deco {
    position: absolute;
    top: 6vw;
    right: 0.8vw;
    width: 2px;
    height: 70%;
    background: linear-gradient(180deg, transparent, var(--c-bd), transparent);
    opacity: 0.4;
    border-radius: 2px;
}

.list-wrap {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    container-type: inline-size;
}

.list-grid {
    width: 92.51%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 7.14%;
    row-gap: 5.44cqw;
}

.list-card {
    position: relative;
    width: 100%;
    aspect-ratio: 545 / 392;
    background: linear-gradient(to bottom, rgba(3, 155, 236, 0.85) 0%, rgba(3, 165, 237, 0.95) 100%);
    border: var(--w-s1-bdc) solid var(--c-bd);
    border-radius: var(--r-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--c-text);
    transition: var(--tr);
    box-shadow: 0 0 16px rgba(79, 195, 247, 0.18);
    cursor: pointer;
}

.list-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 28px rgba(79, 195, 247, 0.4), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.list-card__media {
    position: relative;
    width: 82.01%;
    aspect-ratio: 447 / 241;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: 2%;
    border-radius: var(--r-s4-2);
    border: var(--w-bd) solid var(--c-text);
}

.list-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.list-card:hover .list-card__media img {
    transform: scale(1.05);
}

.list-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 50%, rgba(4, 20, 58, 0.6) 100%);
}

.list-card__body {
    width: 82.01%;
    aspect-ratio: 447 / 96;
    padding: 0 1.2em;
    box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.list-card__title {
    font-size: var(--fs-s4t);
    line-height: 1.3;
    letter-spacing: 0.05em;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.list-card__desc {
    font-size: var(--fs-s4t);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.3;
    margin: 2% 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.list-card__meta {
    margin-top: 0.8em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: clamp(11px, 0.85vw, 14px);
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.1em;
}

.list-card__date {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.list-card__date::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-bd);
    box-shadow: 0 0 6px var(--c-bd);
}

.list-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--c-bd);
}

.list-card__more::after {
    content: '→';
    font-size: 1.2em;
    transition: var(--tr);
}

.list-card:hover .list-card__more::after {
    transform: translateX(4px);
}

/* ====================================================================
   列表页 - 翻页器
   ==================================================================== */
.list-pager {
    margin-top: 2.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2vw;
}

.list-pager__btn {
    width: 2.6vw;
    height: 2.6vw;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    border: var(--w-s1-bdc) solid var(--c-bd);
    background: rgba(8, 30, 80, 0.6);
    color: var(--c-bd);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--tr);
    padding: 0;
    font-size: 1.1em;
}

.list-pager__btn:hover {
    background: rgba(79, 195, 247, 0.25);
    box-shadow: var(--c-glow);
    color: #fff;
}

.list-pager__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.list-pager__info {
    font-size: clamp(14px, 1.1vw, 18px);
    color: var(--c-text);
    letter-spacing: 0.1em;
    min-width: 5em;
    text-align: center;
    text-shadow: 0 0 8px rgba(79, 195, 247, 0.5);
}

.list-pager__info .current {
    color: var(--c-bd);
    font-size: 1.2em;
    font-weight: 700;
}

.list-pager__info .total {
    color: rgba(255, 255, 255, 0.7);
}

/* ====================================================================
   详情页
   ==================================================================== */
.detail-section {
    width: var(--w);
    max-width: var(--w);
    margin: 0 auto;
    box-sizing: border-box;
}
.detail-section::after {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 1510 / 390;
}

.detail-wrap {
    width: 100%;
    aspect-ratio: 1510 / 2762;
    position: relative;
    background-image: url(./topic-space-deepsea-v1-bg-list-rect1.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail__inner {
    width: 84.76%;
    aspect-ratio: 1280 / 2160;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-right: 9.37%;
}


.detail-wrap .detail__inner > * {
    position: relative;
    z-index: 1;
}


.detail-title {
    text-align: center;
    font-size: var(--fs-dt1);
    color: var(--c-text);
    margin: 0 0 1.5em;
    letter-spacing: 0.15em;
    position: relative;
    font-weight: 500;
    text-shadow: 0 0 14px rgba(79, 195, 247, 0.4);
}

.detail-figure {
    width: 100%;
    aspect-ratio: 1160 / 640;
    margin: 2em 0;
    border: var(--w-bd) solid var(--c-bd);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.detail-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.detail-paragraph {
    font-size: var(--fs-dp);
    line-height: 2;
    letter-spacing: 0.06em;
    text-indent: 2em;
    text-align: justify;
    margin: 1.5em 0;
    color: var(--c-text);
}

.detail-paragraph p {
    margin: 0 0 0.8em;
}

.detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-top: 2em;
    padding: 0.6em 1.4em;
    font-size: var(--fs-l-more);
    color: var(--c-text);
    letter-spacing: 0.15em;
    border: var(--w-s1-bdc) solid var(--c-bd);
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(79, 195, 247, 0.12), rgba(79, 195, 247, 0.04));
    transition: var(--tr);
    cursor: pointer;
}

.detail-back:hover {
    background: rgba(79, 195, 247, 0.25);
    box-shadow: var(--c-glow);
    transform: translateX(2px);
}

/* ====================================================================
   页脚
   ==================================================================== */
.footer {
    width: 100%;
    aspect-ratio: 1920 / 175;
    min-height: 120px;
    background: linear-gradient(180deg, rgba(21, 40, 155, 0.88) 0%, rgba(21, 40, 155, 0.99) 100%);
    color: var(--c-text);
    /*border-top: 2px solid var(--c-bd);*/
    box-shadow: 0 -4px 24px rgba(79, 195, 247, 0.18);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--c-accent) 50%, transparent 100%);
}

.beian {
    display: block;
    width: var(--fs-ft);
    aspect-ratio: 1 / 1;
}

.footer__inner {
    width: 90%;
    height: 100%;
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: clamp(20px, 3vw, 48px);
}

.footer__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--fs-ft);
    line-height: 2;
}

.footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
    text-align: center;
}

.footer__col li {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.footer__col a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.75);
    transition: var(--tr);
}

.footer__col a:hover {
    color: #fff;
}

.footer__left img,
.footer__right img {
    max-width: 100%;
    max-height: 64px;
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.footer__left,
.footer__right {
    width: 13.95%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__left img {
    width: 12.44vw;
    aspect-ratio: 239 / 44;
}

.footer__right img {
    width: 50%;
    max-width: 64px;
    height: auto;
}

/* ====================================================================
   工具类：滚动箭头
   ==================================================================== */
.bg-arrow-right {
    background-image: url(./topic-space-deepsea-v1-arrow-r.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* 通用容器：板块 */
.zpanel {
    position: relative;
    width: 100%;
    aspect-ratio: 1485 / auto;
    padding: 4vw 0;
    box-sizing: border-box;
}


/* ====================================================================
   响应式 - 移动端
   ==================================================================== */
@media screen and (max-width: 768px) {
    /* hero */
    .hero {
        width: 100%;
        aspect-ratio: 1920 / 1920;
    }

    .hero__bg {
        position: absolute;
        z-index: -1;
        width: 100%;
        left: 0;
        top: 0;
        aspect-ratio: 1920 / 2404;
        background-image: url(./topic-space-deepsea-v1-bg-hero-m.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .hero__org {
        margin-bottom: 29.16%;
        width: 50%;
    }
    /* —— 首页 —— */
    .nav-wrap {
        display: none;
    }

    .nav-m-wrap {
        display: block;
    }
    .sec1__title_inner {
        justify-content: center;
    }
    .sec1__title_text {
        width: 61.85%;
    }
    .section__title_deco_l, .section__title_deco_r {
        display: none;
        
    }
    .sec1__body_inner {
        aspect-ratio: 1510 / 2369;
        background-image: url(./topic-space-deepsea-v1-bg-s1-rect-m.png);
    }
    .sec1__body_item {
        aspect-ratio: 1270 / 360;
    }
    .sec1__body_item:nth-child(1) {
        display: none;
    }
    .sec1__item{
        aspect-ratio: 1162 / 334;
    }
    .sec1__item::before {
        border-left-width: 8cqw;
        border-top-width: 6cqw;
        transform: translateY(100%) translateX(calc(-50% - 0.5px));
    }
    .sec1__item::after {
        border-left-width: calc(8cqw + 2px);
        border-top-width: calc(6cqw + 1px);
        transform: translateY(100%) translateX(calc(-50% - 0.5px));
    }
    .sec1__foot_wrap {
        margin-top: 9.27%;
    }
    .sec1__foot_inner {
        justify-content: space-between;
    }
    .sec1__foot_c {
        width: 33.24%;
    }
    .sec1__foot_l, .sec1__foot_r {
        width: 31.52%;
    }
    .section:nth-child(n+2) .sec1__title_wrap {
        padding-top: 26.49%;
    }

    /* 第二、第四栏目：调整为二行二列卡片 */
    .sec2__grid_wrap {
        aspect-ratio: 1510 / 2630;
    }
    .sec2__grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 7.9%;
    }

    .sec3__body_wrap {
        aspect-ratio: 1510 / 2315;
        background-image: url(./topic-space-deepsea-v1-bgs3-card-m.png);
    }
    .sec3__body_inner {
        aspect-ratio: 1270 / 1914;
    }
    .sec4__grid_wrap{
        aspect-ratio: 1510 / 2200;
    }
    .sec4__column_grid{
        grid-template-columns: repeat(2, 1fr);
        column-gap: 12.9%;
    }
    .sec4__column_grid .column_card:nth-child(n+5){
        display: none;
    }
    .sec4__column_grid .column_card__title {
        margin: 4.8% 0;
    }
    
    .hero-item {
        aspect-ratio: 507 / 38;
    }

    /* —— 列表页 —— */
    .list-page {
        width: 100%;
        aspect-ratio: 1510 / 2678;
    }

    .list-scroll {
        width: 85.43%;
        aspect-ratio: 1290 / 2200;
        border-radius: 12px;
    }

    .list-scroll::before,
    .list-scroll::after {
        font-size: 4vw;
    }

    .list-grid {
        grid-template-columns: 1fr;
        width: 90.54%;
        padding-top: 6vw;
    }

    .list-card {
        flex-direction: row;
        align-items: stretch;
        aspect-ratio: 1170 / 390;
        justify-content: center;
        padding: 2.56% 2.56%;
    }

    .list-card__media {
        width: 44.05%;
        aspect-ratio: 489 / 309;
        margin: 0;
    }

    .list-card__body {
        padding: 0.1em 1.2em;
        flex: 1;
        min-width: 0;
    }

    .list-card__title {
        font-size: 4.2vw;
        -webkit-line-clamp: 2;
    }

    .list-card__desc {
        font-size: 2.9vw;
        -webkit-line-clamp: 3;
    }

    .list-pager__btn {
        width: 9vw;
        height: 9vw;
        min-width: 36px;
        min-height: 36px;
    }

    .list-pager__info {
        font-size: 3.6vw;
    }

    .list-card__meta {
        font-size: 2.9vw;
    }

    /* —— 详情页 —— */
    .detail-section {
        width: 92%;
    }


    .detail-title {
        font-size: 5.5vw;
        margin-bottom: 1em;
    }


    .detail-figure {
        aspect-ratio: 700 / 400;
        margin: 1.5em 0;
    }

    .detail-paragraph {
        font-size: 3.4vw;
        line-height: 1.9;
        text-indent: 2em;
        margin: 1em 0;
    }

    .detail-back {
        font-size: 3.8vw;
        padding: 0.5em 1em;
        margin-top: 1.5em;
    }

    /* 页脚 */
    .footer {
        display: none;
    }

    .footer-m {
        display: block;
    }

    /* 栏目三：Cold3D 轮播移动端适配 */
    .cold__arrow {
        width: 11.88%;
    }

    .cold__nav {
        transform: translateX(-50%) translateY(4vw);
    }

    .cold__dot {
        width: 2.34vw;
        height: 2.34vw;
    }

    .cold__dot.is-active {
        width: 9.37vw;
        border-radius: 2.34vw;
    }
}

/* 移动端页脚 */
.footer-m {
    display: none;
    width: 100%;
    padding: 4vw 4vw;
    background: rgba(2, 8, 14, 0.9);
    color: var(--c-text);
    border-top: 1px solid rgba(79, 195, 247, 0.4);
    font-size: 2.6vw;
    line-height: 2;
}

.footer-m ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.footer-m li {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6em;
    color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 769px) {
    .footer-m {
        display: none;
    }
}

/* ====================================================================
   动画 - 漂浮动效
   ==================================================================== */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes shine {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ====================================================================
   风铃摆动动画：绕顶部悬挂点做左右摆动
   ==================================================================== */
@keyframes chime-sway {
    0% {
        transform: translateY(var(--chime-dy, 0)) rotate(var(--chime-rot, 0deg));
    }

    50% {
        transform: translateY(var(--chime-dy, 0)) rotate(calc(var(--chime-rot, 0deg) + var(--chime-swing, 4deg)));
    }

    100% {
        transform: translateY(var(--chime-dy, 0)) rotate(var(--chime-rot, 0deg));
    }
}

.column_card,
.list-card {
    animation: float 6s ease-in-out infinite;
}

/* 栏目四卡片：风铃摆动（绕顶部悬挂点，随机旋转角/偏移） */
.sec4__column_grid .column_card {
    transform-origin: top center;
    animation: chime-sway var(--chime-dur, 4s) ease-in-out infinite;
}

.column_card:nth-child(2),
.list-card:nth-child(2) {
    animation-delay: -2s;
}

.column_card:nth-child(3),
.list-card:nth-child(3) {
    animation-delay: -4s;
}

.column_card:nth-child(4),
.list-card:nth-child(4) {
    animation-delay: -3s;
}

@media (prefers-reduced-motion: reduce) {

    .column_card,
    .list-card,
    .sec4__column_grid .column_card {
        animation: none;
    }
}

/* TRS integration and deterministic empty states. */
[hidden] { display: none !important; }
.container { min-height: 100vh; display: flex; flex-direction: column; }
.hero { overflow: visible; }
main { flex: 1 0 auto; }
.hero-support { display: flex; align-items: flex-start; justify-content: center; gap: .2em; }
.hero__org > .hero-item { width: 180%; margin-left: -40%; }
.hero-support { width: 180%; margin-left: -40%; }
.hero-support__label { flex: 0 0 auto; line-height: 1.6; }
.hero-support__value { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.hero-support__value > span { display: block; white-space: nowrap; }
.footer__col li > span { display: inline-flex; align-items: center; color: rgba(255, 255, 255, .75); }
.footer__copyright-mark::before { content: "\00a9"; }
.beian-record { gap: .25em; }
@media screen and (max-width: 768px) {
    .hero__org > .hero-item { width: 145%; margin-left: -22.5%; }
    .hero-support { width: 145%; margin-left: -22.5%; }
}
[data-topic-section][hidden] { display: none !important; }
.topic-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
.trs-css-background-asset-preload { position: absolute; width: 1px; height: 1px; overflow: hidden; pointer-events: none; clip: rect(0 0 0 0); }
.topic-empty { padding: 2rem 1rem; color: #9ab4d0; text-align: center; }
.topic-section-empty { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; margin: 0; color: #fff; font-size: clamp(18px, 1.6vw, 28px); text-align: center; text-shadow: 0 0 12px rgba(79, 195, 247, .75); }
.is-topic-empty .cold__arrow, .is-topic-empty .cold__nav { display: none !important; }
.topic-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1.5rem auto; }
.topic-pagination > a, .topic-pagination > span { min-width: 2.25rem; padding: .5rem .75rem; color: #b9d8f7; border: 1px solid rgba(125, 190, 247, .4); text-align: center; text-decoration: none; }
.topic-pagination > a:hover, .topic-pagination > .is-active { color: #061528; background: #b9d8f7; }
.topic-pagination > .is-disabled { opacity: .45; }
.list-card__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .5rem; color: #9ab4d0; font-size: .8rem; }
.sec2__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sec2__grid .column_card { min-width: 0; }
.sec2__grid .column_card__title { aspect-ratio: auto; height: auto; min-height: 2em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: normal; }
.sec2__grid .column_card__desc { aspect-ratio: auto; height: auto; min-height: 4.8em; -webkit-line-clamp: 3; text-align: justify; text-justify: inter-ideograph; }
.sec4__column_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sec4__column_grid .column_card { min-width: 0; }
.cold__card.is-wrapping { opacity: 0 !important; transition: none !important; }
.cold__card.is-active .cold__card__body { opacity: 1; }
.cold__card__desc { display: none; }
.topic-play-indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); aspect-ratio: 1; border-radius: 50%; background: rgba(1, 8, 39, .62); container-type: size; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; transition: background-color .2s ease, box-shadow .2s ease; }
.topic-play-indicator::before { content: ''; width: 0; height: 0; border-top: 24cqh solid transparent; border-bottom: 24cqh solid transparent; border-left: 32cqw solid; border-left-color: #e9f2ff; transform: translateX(15%); }
.topic-play-indicator--home { width: 12%; }
.topic-play-indicator--list { display: none; width: 10%; min-width: 26px; }
body[data-topic-channel*="_connect" i] .topic-play-indicator--list { display: flex; }
.cold__card:hover .topic-play-indicator, .list-card:hover .topic-play-indicator { background: rgba(1, 8, 39, .78); box-shadow: 0 0 18px rgba(201, 228, 255, .55); }
.list-card__body { justify-content: center; }
.list-card__desc, .list-card__meta { display: none; }
@media screen and (min-width: 769px) {
    .hero__org { margin-bottom: 5%; }
    .list-grid { padding-top: 12px; box-sizing: border-box; }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
    .sec2__grid .column_card__title { font-size: 22px; }
}
@media screen and (min-width: 1601px) {
    .detail-title { font-size: 44px; }
}
@media screen and (max-width: 768px) {
    .hero__org { margin-bottom: 16%; }
    .cold__nav { bottom: auto; top: calc(100% + 5vw); transform: translate(-50%, -50%); }
    .sec2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sec4__column_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-title { font-size: 24px; line-height: 1.35; letter-spacing: .08em; flex: 0 0 auto; white-space: normal; overflow: visible; text-overflow: clip; }
    .list-card__body { justify-content: center; gap: .35rem; }
    .list-card__title { font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
    .list-card__desc { display: none; }
    .list-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; margin-top: 0; color: #fff; font-size: 12px; line-height: 1.35; letter-spacing: 0; }
    .list-card__meta > span { color: #fff; white-space: nowrap; }
}
.detail__inner { display: flex; flex-direction: column; overflow: hidden; padding-right: 0; }
.detail-meta { justify-content: center; display: flex; align-items: center; flex-wrap: wrap; gap: 0 1.5em; margin: 0 auto 1.5em; color: rgba(255, 255, 255, .82); text-align: center; }
.detail-meta__source, .detail-meta__time { display: inline-block; }
.topic-detail-cover { display: none !important; }
.topic-detail-body { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; padding: clamp(12px, 2vw, 30px) 3%; border: 1px solid rgba(154, 224, 255, .55); border-radius: 10px; box-sizing: border-box; overflow-wrap: anywhere; color: var(--c-text); font-size: var(--fs-dp); line-height: 2; letter-spacing: .06em; text-align: justify; }
.topic-video-region + .topic-detail-body { border: 0; }
.topic-detail-body > section { margin-left: auto !important; margin-right: auto !important; }
.topic-detail-body > section[style*="display: inline-block"] { display: block !important; }
.topic-detail-body section[style*="display: inline-block"][style*="vertical-align: top"] { display: block !important; margin-left: auto !important; margin-right: auto !important; }
.topic-detail-body p, .topic-detail-body span, .topic-detail-body section, .topic-detail-body div, .topic-detail-body li, .topic-detail-body a { color: var(--c-text) !important; font-size: inherit !important; line-height: inherit !important; }
.topic-detail-body p, .topic-detail-body span, .topic-detail-body section, .topic-detail-body div, .topic-detail-body li, .topic-detail-body a, .topic-detail-body h1, .topic-detail-body h2, .topic-detail-body h3, .topic-detail-body h4, .topic-detail-body h5, .topic-detail-body h6, .topic-detail-body strong, .topic-detail-body em, .topic-detail-body b, .topic-detail-body i { background-color: transparent !important; }
.topic-detail-body p { margin: 0 0 .8em; text-indent: 2em; }
.topic-detail-body .app_image_wrap { text-indent: 0; }
@media screen and (max-width: 768px) {
    .detail__inner { height: 90%; aspect-ratio: auto; }
    .detail-title { margin-bottom: 8px; }
    .detail-meta { width: 100%; min-width: 0; box-sizing: border-box; flex: 0 0 auto; flex-wrap: nowrap; gap: 0 8px; margin: 0 auto 12px; font-size: 12px; line-height: 1.4; white-space: nowrap; }
    .detail-meta > span { flex: 0 0 auto; }
    .topic-detail-body .imagenote { max-width: 100%; width: auto; box-sizing: border-box; overflow-wrap: anywhere; }
    .topic-detail-body { font-size: 14px; line-height: 1.9; }
}
.topic-detail-body img, .topic-detail-body video, .topic-detail-body iframe, .topic-detail-body table { max-width: 100% !important; height: auto; }
.topic-video-region { width: 100%; max-width: 960px; margin: 0 auto 1.5rem; }
.topic-video-player { display: block; width: 100%; max-height: 70vh; background: #020a16; }
.topic-video-unavailable { padding: 2rem; color: #9ab4d0; text-align: center; background: rgba(0, 0, 0, .2); }
.topic-detail-actions { flex: 0 0 auto; display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.topic-detail-actions .detail-back { margin-top: 0; padding: .4em .9em; font-size: clamp(14px, 1.2vw, 18px); }