/* ============================================================
   20周年专题页样式（依据 design/page/20周年页面.png 校准）
   设计稿 2880×15550（2x），逻辑画布 1440，内容区 1280，页边距 80
   作用域：body.anniversary-page，不影响首页
   ============================================================ */

.anniversary-page {
    --ann-orange: #f26522;
    --ann-orange-deep: #e85a1c;
    --ann-blue: #4a80e2;
    --ann-ink: #1f2731;
    --ann-body: #6b7280;
    --ann-card-blue: #f5f8fb;
    --ann-card-mint: #f4faf9;
    --ann-card-pink: #fef2f9;
    background: #fff;
    color: var(--ann-ink);
    /* 抵消 index.css 为固定页头设置的 body{padding-top:40px} */
    padding-top: 0;
}

.anniversary-page h1,
.anniversary-page h2,
.anniversary-page h3,
.anniversary-page p {
    margin: 0;
}

/* ---------- 容器：设计稿内容区 1280 ---------- */
@media (min-width: 1024px) {
    .anniversary-page .container {
        width: min(1280px, calc(100% - 160px));
    }
}

.anniversary-page .brand img {
    width: 184px;
}

.anniversary-page .desktop-nav {
    margin-right: 44px;
}

/* ---------- 首屏主视觉 ---------- */
.anniversary-page .anniversary-hero {
    /* 类名与首页 .anniversary 内部元素冲突，需显式复位其绝对定位与裁剪 */
    position: static;
    inset: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    background: #f4f6fa;
    line-height: 0;
}

.anniversary-page .anniversary-hero img {
    width: 100%;
    height: auto;
}

/* 首屏主视觉进场：与滚动飘入同参数（上浮42px+去模糊），
   首屏元素来不及经过滚动观察器的起始帧，故用 CSS 动画保证加载即播放一次 */
.anniversary-page .anniversary-hero {
    animation: anniversary-hero-rise .95s var(--ease) .1s both;
    will-change: opacity, transform;
}

@keyframes anniversary-hero-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 42px, 0);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* ---------- 简介 + 应用（共用 bg1 渐变背景） ---------- */
.anniversary-page .story-bg {
    background: url("../20th/bg1.png") center center / 100% 100% no-repeat;
}

.anniversary-page .story-intro {
    padding: 30px 0 64px;
}

.anniversary-page .intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(340px, 1fr);
    gap: 76px;
    align-items: start;
}

.anniversary-page .intro-copy h1 {
    color: var(--ann-ink);
    font-size: 35px;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: -0.01em;
}

.anniversary-page .intro-copy p {
    margin-top: 30px;
    color: var(--ann-body);
    font-size: 17px;
    line-height: 2;
}

.anniversary-page .intro-aside {
    padding-top: 58px;
}

.anniversary-page .intro-note {
    margin-bottom: 42px;
    color: #9aa2ad;
    font-size: 14px;
    line-height: 1.6;
    text-align: right;
    white-space: nowrap;
}

.anniversary-page .stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
    row-gap: 62px;
}

.anniversary-page .stat-num {
    color: var(--ann-orange-deep);
    font-family: Manrope, sans-serif;
    font-size: 56px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.anniversary-page .stat-unit {
    margin-left: 4px;
    color: var(--ann-ink);
    font-family: "Noto Sans SC", sans-serif;
    font-size: 30px;
    font-weight: 600;
}

.anniversary-page .stat p {
    margin-top: 16px;
    color: #8b929c;
    font-size: 16px;
    line-height: 1.65;
}

/* ---------- 从设备到应用 ---------- */
.anniversary-page .application-section {
    /* 与上方公司简介之间的细分隔线 */
    padding: 0 0 88px;
}

.anniversary-page .split-line {
    width: calc(100% - 160px);
    max-width: 1280px;
    margin: 16px auto 80px;
    border-bottom: 1px solid rgba(32, 37, 45, 0.08);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
    height: 0;
    line-height: 0;
    overflow: hidden;
    padding: 0;
}
@media (min-width: 768px) and (max-width: 1023px) {
    .anniversary-page .split-line {
        width: calc(100% - 64px);
    }
}
@media (max-width: 767px) {
    .anniversary-page .split-line {
        width: calc(100% - 36px);
    }
}
.anniversary-page .section-title {
    color: var(--ann-ink);
    font-size: 35px;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: -0.01em;
}

.anniversary-page .section-lead {
    max-width: 1230px;
    margin-top: 30px;
    color: var(--ann-body);
    font-size: 17px;
    line-height: 1.95;
}

.anniversary-page .circle-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 38px;
    color: var(--ann-ink);
    font-size: 18px;
    font-weight: 700;
}

.anniversary-page .circle-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #b9bfc7;
    /* 箭头用 ::before/::after 两根线条拼成，避免依赖字体字形与基线 */
    transition: transform .45s var(--ease);
}

/* 右向箭头（›）：两根线条以右端为轴分别向上/下倾斜，交汇点为箭头尖端 */
.anniversary-page .circle-arrow::before,
.anniversary-page .circle-arrow::after {
    content: "";
    position: absolute;
    left: 61%;
    top: 50%;
    width: 11px;
    height: 2.5px;
    background: #fff;
    border-radius: 2px;
    transform-origin: 100% 50%;
}

.anniversary-page .circle-arrow::before {
    transform: translateX(-100%) translateY(-50%) rotate(-45deg);
}

.anniversary-page .circle-arrow::after {
    transform: translateX(-100%) translateY(-50%) rotate(45deg);
}

.anniversary-page .circle-link:hover .circle-arrow {
    transform: translateX(4px);
}

.anniversary-page .circle-link-orange .circle-arrow {
    background: var(--ann-orange);
}

.anniversary-page .application-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 33px;
    margin-top: 46px;
}

.anniversary-page .application-cards .app-card {
    display: block;
    padding: 40px 36px 42px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(74, 103, 133, .10);
    color: inherit;
    text-decoration: none;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.anniversary-page .application-cards .app-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 56px rgba(74, 103, 133, .18);
}

.anniversary-page .application-cards img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.anniversary-page .application-cards h3 {
    margin-top: 30px;
    color: var(--ann-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}

.anniversary-page .application-cards p {
    margin-top: 16px;
    color: #7b828c;
    font-size: 16px;
    line-height: 1.85;
}

/* ---------- 创始人寄语 ---------- */
.anniversary-page .founder-section {
    background: url("../20th/bg3.png") center center / 100% 100% no-repeat;
    padding: 78px 0 82px;
}

.anniversary-page .founder-grid {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 840px);
    gap: 60px;
    align-items: start;
}

.anniversary-page .founder-copy {
    padding-top: 64px;
}

.anniversary-page .founder-copy h2 {
    color: #fff;
    font-size: 35px;
    font-weight: 700;
    line-height: 1.45;
}

.anniversary-page .founder-copy p {
    margin-top: 30px;
    color: rgba(255, 255, 255, .92);
    font-size: 17px;
    line-height: 2;
}

.anniversary-page .founder-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 26px 70px rgba(60, 92, 130, .18);
    padding: 52px 52px 46px;
}

.anniversary-page .founder-card h3 {
    color: var(--ann-ink);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
}

.anniversary-page .founder-card p {
    margin-top: 34px;
    color: #464c55;
    font-size: 16px;
    line-height: 1.95;
}

.anniversary-page .founder-sign {
    margin-top: 44px;
    text-align: right;
}

.anniversary-page .founder-sign p {
    margin-top: 6px;
    color: var(--ann-ink);
    font-size: 16px;
    line-height: 1.5;
}

.anniversary-page .founder-sign p + p {
    color: #7b828c;
}

/* ---------- 二十年时间轴 ---------- */
.anniversary-page .timeline-section {
    position: relative;
    background: #fff url(../20th/20years.jpg) no-repeat;
    background-position: center bottom;
    background-size: contain;
}
.anniversary-page .timeline-title-img {
    /* 与底图等比缩放（设计稿基准 1440 宽时为 149px），避免标题图在窄屏下占比失衡 */
    width: clamp(104px, 10.35vw, 149px);
    height: auto;
}
.anniversary-page .timeline-bg {
    display: block;
    width: 100%;
    height: auto;
}

.anniversary-page .timeline-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.anniversary-page .timeline-layer button,
.anniversary-page .timeline-layer [role="slider"] {
    pointer-events: auto;
}

.anniversary-page .timeline-subtitle {
    position: absolute;
    top: 13%;
    left: 11.4%;
    width: 27%;
    color: #8a8f99;
    /* 字号随视口等比缩放：底图按宽度缩放，文字若固定 px 会在窄屏多换行压到弧线，
       用 vw 让每行可容纳的字数恒定（clamp 保证最小可读性与设计稿上限） */
    font-size: clamp(13px, 1.18vw, 17px);
    line-height: 1.7;
}
.anniversary-page .timeline-subtitle p {
    margin-bottom: 1.8em;
    text-align: left;
}
/* 年份运动容器：覆盖整张底图，动画中滑出画面的年份在此裁剪，不产生横向溢出 */
.anniversary-page .arc-years {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.anniversary-page .arc-year {
    position: absolute;
    /* 以文字几何中心锚定设计稿坐标（top/left 为中心点），
       百分比随底图等比缩放，各断点无需重算位置 */
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    font-family: Manrope, sans-serif;
    font-style: normal;
    line-height: 1;
    white-space: nowrap;
    will-change: transform, opacity;
}

/* 年份沿弧线的移动、转向与进出动画由 20th.js 以 requestAnimationFrame
   按圆弧几何插值驱动；此处只保留静止锚点样式 */

/* 坐标取自设计稿（20years.png 2880×1700）：
   两侧年份沿弧线倾角悬挂于弧线下方，当前年份正立橙点下方 */
.anniversary-page .arc-year-prev {
    top: 60%;
    left: 18.5%;
    color: #b8bcc6;
    font-size: 22px;
    font-weight: 500;
    transform: translate(-50%, -50%) rotate(-17deg);
}

.anniversary-page .arc-year-current {
    top: 51.4%;
    left: 50.2%;
    color: #20252d;
    font-size: 27px;
    font-weight: 700;
}

.anniversary-page .arc-year-next {
    top: 59.9%;
    left: 81.4%;
    color: #b8bcc6;
    font-size: 22px;
    font-weight: 500;
    transform: translate(-50%, -50%) rotate(17deg);
}

.anniversary-page .timeline-detail {
    position: absolute;
    top: 66.5%;
    left: 50%;
    width: 62%;
    /* 高度随文案：固定 200px 在窄屏既留空盒又会在多换行时压到下方控制条 */
    transform: translateX(-50%);
    text-align: center;
}

/* 窄桌面（1024–1280）：底图随宽度等比缩放，底部控制条却是固定 56px 高，
   窗口收窄时控制条在图中占比变大，两行描述的底部会贴住控制条（1024 实测为 0px）。
   详情区整体上提 2.3% 留足安全间距；竖线在水平中线上、与 18%/82% 处的两侧年份
   横向不相交，描述文字与年份仍有充足余量 */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
    .anniversary-page .timeline-detail {
        top: 64.2%;
    }
}

.anniversary-page .timeline-needle {
    display: block;
    width: 1px;
    height: clamp(30px, 4vw, 58px);
    margin: 0 auto clamp(10px, 1.4vw, 20px);
    background: #c9cdd6;
}

.anniversary-page .timeline-desc {
    color: #2a2f38;
    /* 与底图等比缩放：设计稿 1440 宽时 24px；窄屏同步变小，保证换行数稳定、
       文案区始终在橙色带内、不压控制条 */
    font-size: clamp(16px, 1.67vw, 24px);
    line-height: 1.75;
    transition: opacity .35s var(--ease);
}

.anniversary-page .timeline-desc.is-switching {
    opacity: 0;
}

.anniversary-page .timeline-controls {
    position: absolute;
    bottom: 5.2%;
    left: 5.6%;
    right: 5.6%;
    display: flex;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
    gap: 26px;
    /* 手柄行程端点：2006=6%、2026=94%；刻度线 padding 读取此值，
       保证刻度与手柄在任何轨道宽度下都对齐（JS 亦读取） */
    --tl-start: 6;
    --tl-span: 88;
}

.anniversary-page .tl-btn {
    flex: 0 0 158px;
    height: 56px;
    border: 0;
    border-radius: 28px;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.anniversary-page .tl-btn i {
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    /* ‹ › 在 Noto Sans SC 中字形偏下行盒底部，而 CJK 文字填满行盒，
       align-items:center 只对齐行盒中心，视觉上箭头比文字低。
       按 em 比例上移补偿，各断点字号不同但比例一致 */
    position: relative;
    top: -2px;
}

.anniversary-page .tl-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(150, 80, 20, .18);
}

.anniversary-page .tl-prev {
    background: rgba(255, 255, 255, .72);
    color: #5f4a38;
}

.anniversary-page .tl-next {
    background: #f9dcc2;
    color: #6d4a2b;
}

.anniversary-page .tl-track {
    position: relative;
    flex: 1;
    height: 56px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .22);
    cursor: pointer;
    outline: none;
}

.anniversary-page .tl-ticks {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 刻度 padding 与手柄行程端点同步：左=--tl-start%、右=(100-start-span)%，
       保证刻度线中心与手柄中心在任何轨道宽度下重合 */
    padding: 0 calc((100 - var(--tl-start, 6) - var(--tl-span, 88)) * 1%) 0 calc(var(--tl-start, 6) * 1%);
}

.anniversary-page .tl-ticks i {
    width: 1px;
    height: 15px;
    background: rgba(255, 255, 255, .75);
}

.anniversary-page .tl-ticks i.is-milestone {
    height: 25px;
    background: rgba(255, 255, 255, .95);
}

.anniversary-page .tl-handle {
    position: absolute;
    top: 50%;
    left: 6%;
    transform: translate(-50%, -50%);
    min-width: 108px;
    height: 52px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 10px 26px rgba(150, 80, 20, .22);
    color: #2a2f38;
    font-family: Manrope, sans-serif;
    font-size: 21px;
    font-weight: 700;
    transition: left .5s var(--ease);
}

/* ---------- 品牌标识释义 ---------- */
.anniversary-page .network-section {
    background: #fff;
    padding: 102px 0 56px;
    text-align: center;
}

.anniversary-page .network-title {
    color: var(--ann-ink);
    font-size: 35px;
    font-weight: 700;
    line-height: 1.4;
}

.anniversary-page .text-orange {
    color: var(--ann-orange);
}

.anniversary-page .text-blue {
    color: var(--ann-blue);
}

.anniversary-page .network-lead {
    max-width: 1080px;
    margin: 30px auto 0;
    color: var(--ann-body);
    font-size: 17px;
    line-height: 1.95;
}

.anniversary-page .outline-pill {
    display: inline-block;
    margin-top: 38px;
    padding: 13px 40px;
    border: 1px solid #c7ccd6;
    border-radius: 999px;
    color: #333842;
    font-size: 16px;
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

.anniversary-page .outline-pill:hover {
    border-color: var(--ann-orange);
    color: var(--ann-orange);
    background: #fff7f2;
}

.anniversary-page .network-diagram {
    width: min(1150px, 92%);
    height: auto;
    margin: 64px auto 0;
}

/* ---------- 合作伙伴寄语 ---------- */
.anniversary-page .voices-section {
    background: #fff;
    padding: 0 0 108px;
}

.anniversary-page .voices-title {
    color: var(--ann-ink);
    font-size: 35px;
    font-weight: 700;
    line-height: 1.4;
}

.anniversary-page .voices-lead {
    margin-top: 26px;
    color: var(--ann-body);
    font-size: 17px;
    line-height: 1.9;
}

.anniversary-page .voice-marquee {
    position: relative;
    overflow: hidden;
    margin-top: 54px;
}
.anniversary-page .voice-marquee::before,
.anniversary-page .voice-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 3;
    pointer-events: none;
}
.anniversary-page .voice-marquee::before {
    left: 0;
    background: linear-gradient(90deg, #fff, transparent);
}
.anniversary-page .voice-marquee::after {
    right: 0;
    background: linear-gradient(270deg, #fff, transparent);
}
.anniversary-page .voice-row {
    overflow: hidden;
}
.anniversary-page .voice-track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    cursor: grab;
}
.anniversary-page .voice-track:active {
    cursor: grabbing;
}
.anniversary-page .voice-track.no-drag {
    cursor: default;
}
.anniversary-page .voice-card {
    flex: 0 0 min(calc(50% - 16.5px), 640px);
    width: min(calc(50% - 16.5px), 640px);
    max-width: 640px;
    margin-right: 33px;
    display: flex;
    flex-direction: column;
    min-height: 500px;
    padding: 42px 38px 38px;
    border-radius: 10px;
}

.anniversary-page .voice-card-blue {
    background: var(--ann-card-blue);
}

.anniversary-page .voice-card-mint {
    background: var(--ann-card-mint);
}

.anniversary-page .voice-card-pink {
    background: var(--ann-card-pink);
}

.anniversary-page .voice-logo {
    width: auto;
    height: 44px;
    max-width: 170px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 30px;
}

.anniversary-page .voice-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.anniversary-page .voice-card h3 {
    color: #22262d;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
}

.anniversary-page .voice-card p {
    margin-top: 18px;
    color: #555b65;
    font-size: 15px;
    line-height: 1.5;
}

.anniversary-page .voice-quote {
    margin-top: 0;
}

.anniversary-page .voice-sign {
    margin-top: auto;
    padding-top: 30px;
}

.anniversary-page .voice-sign p {
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.5;
}

.anniversary-page .voice-sign p:first-child {
    color: #22262d;
    font-weight: 700;
}

.anniversary-page .voice-sign p + p {
    color: #8b909a;
    font-weight: 400;
}

/* ---------- 团队 ---------- */
.anniversary-page .team-section {
    background: linear-gradient(95deg, #e4e8f1 0%, #edeff1 48%, #f4e6e1 78%, #f6ece9 100%);
    padding: 150px 0;
}

.anniversary-page .team-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 600px;
    gap: 80px;
    align-items: center;
}

.anniversary-page .team-copy {
    color: #333842;
    font-size: 17px;
    line-height: 1.85;
}

.anniversary-page .team-photo img {
    width: 100%;
    /* 按原始比例（1466×774）完整显示合影，随列宽等比缩放，不裁切两侧 */
    height: auto;
    /* 设计稿合影为直角矩形 */
    border-radius: 10px;
}

/* ---------- 下一个二十年 ---------- */
.anniversary-page .forward-section {
    background: #f8f8f8;
    padding: 96px 0 0;
}

.anniversary-page .forward-head {
    display: grid;
    grid-template-columns: 2fr minmax(240px, 1fr);
    gap: 80px;
    align-items: start;
}

.anniversary-page .forward-lead {
    color: var(--ann-body);
    font-size: 17px;
    line-height: 1.95;
}

.anniversary-page .forward-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 60px;
    margin-top: 128px;
}

.anniversary-page .promise-tag {
    display: inline-block;
    padding: 6px 17px;
    border: 1px solid #e7a968;
    border-radius: 16px;
    color: #dd8033;
    font-size: 14px;
    line-height: 1.4;
    background-image: linear-gradient(90deg, rgba(243,152,0,.2) 0%, rgba(200,214,253,0.2) 92%);
}

.anniversary-page .forward-item h3 {
    margin-top: 20px;
    color: #1f2731;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}

.anniversary-page .forward-item p {
    margin-top: 14px;
    color: #7b828c;
    font-size: 17px;
    line-height: 1.7;
}

.anniversary-page .item-line {
    display: block;
    height: 1px;
    margin-top: 46px;
    background: #e3e3e3;
}

.anniversary-page .forward-en {
    margin: 0;
    padding: 128px 0;
    color: #1f2731;
    font-family: Manrope, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .03em;
    text-align: center;
}
@media (min-width: 1024px) and (max-width: 1200px) {
    .anniversary-page .team-grid {
        grid-template-columns: 1fr 1.72fr;
    }
}
/* ============================================================
   平板（768–1023）：保留桌面版多列骨架，压缩栅格、间距与字号
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    
    .anniversary-page .brand img {
        width: 150px;
    }

    .anniversary-page .desktop-nav {
        margin-right: 24px;
    }

    /* 简介 + 数据 */
    .anniversary-page .story-intro {
        padding: 40px 0 52px;
    }

    .anniversary-page .intro-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: 48px;
    }

    .anniversary-page .intro-aside {
        padding-top: 24px;
    }

    .anniversary-page .intro-copy h1,
    .anniversary-page .section-title,
    .anniversary-page .voices-title,
    .anniversary-page .network-title {
        font-size: 28px;
    }

    .anniversary-page .intro-copy p,
    .anniversary-page .section-lead,
    .anniversary-page .network-lead,
    .anniversary-page .voices-lead,
    .anniversary-page .forward-lead,
    .anniversary-page .team-copy,
    .anniversary-page .founder-copy p {
        font-size: 15px;
        line-height: 1.9;
    }

    .anniversary-page .intro-copy p {
        margin-top: 22px;
    }

    .anniversary-page .intro-note {
        margin-bottom: 28px;
        font-size: 12px;
    }

    .anniversary-page .stat-grid {
        column-gap: 28px;
        row-gap: 40px;
    }

    .anniversary-page .stat-num {
        font-size: 44px;
    }

    .anniversary-page .stat-unit {
        font-size: 24px;
    }

    .anniversary-page .stat p {
        font-size: 14px;
    }

    /* 应用三卡 */
    .anniversary-page .application-section {
        padding: 0 0 64px;
    }

    .anniversary-page .split-line {
        margin-bottom: 40px;
    }

    .anniversary-page .section-lead {
        margin-top: 22px;
    }

    .anniversary-page .circle-link {
        margin-top: 28px;
        gap: 12px;
        font-size: 16px;
    }

    .anniversary-page .circle-arrow {
        width: 40px;
        height: 40px;
    }

    .anniversary-page .circle-arrow::before,
    .anniversary-page .circle-arrow::after {
        width: 9px;
        height: 2px;
    }

    .anniversary-page .application-cards {
        gap: 20px;
        margin-top: 34px;
    }

    .anniversary-page .application-cards .app-card {
        padding: 28px 22px 30px;
        border-radius: 10px;
    }

    .anniversary-page .application-cards img {
        width: 46px;
        height: 46px;
    }

    .anniversary-page .application-cards h3 {
        margin-top: 22px;
        font-size: 18px;
    }

    .anniversary-page .application-cards p {
        font-size: 14.5px;
        line-height: 1.8;
    }

    /* 创始人寄语：单列堆叠 */
    .anniversary-page .founder-section {
        padding: 60px 0 64px;
        background-size: cover;
    }

    .anniversary-page .founder-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .anniversary-page .founder-copy {
        padding-top: 0;
    }

    .anniversary-page .founder-copy h2 {
        font-size: 28px;
    }

    .anniversary-page .founder-copy p {
        margin-top: 22px;
    }

    .anniversary-page .founder-card {
        padding: 40px 38px 38px;
    }

    .anniversary-page .founder-card h3 {
        font-size: 24px;
    }

    .anniversary-page .founder-card p {
        margin-top: 24px;
        font-size: 15px;
    }

    .anniversary-page .founder-sign {
        margin-top: 34px;
    }

    /* 时间轴：年份用中心百分比锚定，天然随底图缩放；
       文案/竖线/标题图沿用基础段的 vw 等比字号，此处只收窄宽度并把详情区略上提，
       保证与底部控制条始终留有间距 */

    .anniversary-page .timeline-subtitle {
        width: 30%;
    }

    .anniversary-page .timeline-detail {
        top: 61%;
        width: 74%;
        height: auto;
    }

    .anniversary-page .timeline-controls {
        bottom: 4.6%;
        gap: 14px;
    }

    .anniversary-page .tl-btn {
        flex-basis: 104px;
        height: 48px;
        border-radius: 24px;
        font-size: 16px;
        gap: 6px;
    }

    .anniversary-page .tl-btn i {
        font-size: 19px;
    }

    .anniversary-page .tl-track {
        height: 48px;
        border-radius: 24px;
    }

    .anniversary-page .tl-ticks i {
        height: 13px;
    }

    .anniversary-page .tl-ticks i.is-milestone {
        height: 21px;
    }

    .anniversary-page .tl-handle {
        min-width: 76px;
        height: 44px;
        padding: 0 16px;
        border-radius: 22px;
        font-size: 16px;
    }

    /* 品牌释义 */
    .anniversary-page .network-section {
        padding: 72px 0 40px;
    }

    .anniversary-page .network-lead {
        margin-top: 22px;
    }

    .anniversary-page .outline-pill {
        margin-top: 28px;
        padding: 11px 34px;
        font-size: 15px;
    }

    .anniversary-page .network-diagram {
        width: 96%;
        margin-top: 48px;
    }

    /* 伙伴寄语三卡 */
    .anniversary-page .voices-section {
        padding: 0 0 80px;
    }

    /* 寄语横向滚动：平板保持 2 等分卡片宽度，与设计图一致 */
    .anniversary-page .voice-marquee {
        margin-top: 40px;
    }
    .anniversary-page .voice-card {
        flex: 0 0 min(calc(50% - 12px), 640px);
        width: min(calc(50% - 12px), 640px);
        max-width: 640px;
        margin-right: 24px;
        min-height: 0;
        padding: 38px 40px 32px;
    }

    .anniversary-page .voice-logo {
        height: 40px;
        max-width: 140px;
        margin-bottom: 24px;
    }

    .anniversary-page .voice-card h3 {
        font-size: 17px;
        line-height: 1.55;
    }

    .anniversary-page .voice-card p {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.5;
    }

    .anniversary-page .voice-sign {
        padding-top: 24px;
    }

    .anniversary-page .voice-sign p {
        font-size: 14px;
    }

    /* 团队：单列堆叠 */
    .anniversary-page .team-section {
        padding: 64px 0;
    }

    .anniversary-page .team-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /* 下一个二十年：头部单列，承诺保持三列 */
    .anniversary-page .forward-section {
        padding: 68px 0 0;
    }

    .anniversary-page .forward-head {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .anniversary-page .forward-items {
        grid-template-columns: 1fr;
        margin-top: 52px;
    }

    .anniversary-page .forward-item h3 {
        font-size: 18px;
    }

    .anniversary-page .forward-item p {
        font-size: 14.5px;
        line-height: 1.7;
    }

    .anniversary-page .item-line {
        margin-top: 30px;
    }

    .anniversary-page .forward-en {
        padding: 90px 0;
        font-size: 18px;
    }

}

/* ============================================================
   手机（≤767px）：全部单列；时间轴改为“底图装饰 + 下方流式内容”
   ============================================================ */
@media (max-width: 767px) {
    /* 移动端与全站策略一致：不播放飘入，首屏直接显示 */
    .anniversary-page .anniversary-hero {
        animation: none;
    }

    .anniversary-page .brand img {
        width: 125px;
    }

    /* 简介 + 数据 */
    .anniversary-page .story-bg {
        background-size: cover;
        background-position: center top;
    }

    .anniversary-page .story-intro {
        padding: 40px 0 44px;
    }

    .anniversary-page .intro-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .anniversary-page .intro-copy h1,
    .anniversary-page .section-title,
    .anniversary-page .voices-title,
    .anniversary-page .network-title {
        font-size: 25px;
        line-height: 1.45;
    }

    .anniversary-page .intro-copy p,
    .anniversary-page .section-lead,
    .anniversary-page .network-lead,
    .anniversary-page .voices-lead,
    .anniversary-page .forward-lead,
    .anniversary-page .team-copy,
    .anniversary-page .founder-copy p {
        font-size: 15px;
        line-height: 1.9;
    }

    .anniversary-page .intro-copy p {
        margin-top: 22px;
    }

    .anniversary-page .intro-aside {
        padding-top: 0;
    }

    .anniversary-page .intro-note {
        margin-bottom: 26px;
        font-size: 12px;
        text-align: left;
        white-space: normal;
    }

    .anniversary-page .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
        row-gap: 30px;
    }

    .anniversary-page .stat-num {
        font-size: 34px;
    }

    .anniversary-page .stat-unit {
        font-size: 19px;
    }

    .anniversary-page .stat p {
        margin-top: 10px;
        font-size: 12.5px;
        line-height: 1.6;
    }

    /* 应用卡 */
    .anniversary-page .application-section {
        padding: 0 0 52px;
    }

    .anniversary-page .split-line {
        margin-bottom: 30px;
    }

    .anniversary-page .section-lead {
        margin-top: 20px;
    }

    .anniversary-page .circle-link {
        margin-top: 26px;
        gap: 12px;
        font-size: 16px;
    }

    .anniversary-page .circle-arrow {
        width: 40px;
        height: 40px;
    }

    .anniversary-page .circle-arrow::before,
    .anniversary-page .circle-arrow::after {
        width: 9px;
        height: 2px;
    }

    .anniversary-page .application-cards {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
    }

    .anniversary-page .application-cards .app-card {
        padding: 28px 22px;
        border-radius: 10px;
    }

    .anniversary-page .application-cards img {
        width: 46px;
        height: 46px;
    }

    .anniversary-page .application-cards h3 {
        margin-top: 20px;
        font-size: 18px;
    }

    .anniversary-page .application-cards p {
        margin-top: 12px;
        font-size: 14.5px;
    }

    /* 创始人寄语 */
    .anniversary-page .founder-section {
        padding: 48px 0 52px;
        background-size: cover;
    }

    .anniversary-page .founder-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .anniversary-page .founder-copy {
        padding-top: 0;
    }

    .anniversary-page .founder-copy h2 {
        font-size: 26px;
    }

    .anniversary-page .founder-copy p {
        margin-top: 20px;
    }

    .anniversary-page .founder-card {
        padding: 30px 22px 28px;
        border-radius: 10px;
    }

    .anniversary-page .founder-card h3 {
        font-size: 22px;
    }

    .anniversary-page .founder-card p {
        margin-top: 20px;
        font-size: 14.5px;
        line-height: 1.9;
    }

    .anniversary-page .founder-sign {
        margin-top: 28px;
    }

    /* ---- 时间轴：底图只保留弧线装饰，说明与控制条移到图下方流式排列 ---- */
    .anniversary-page .timeline-section {
        background: #fff;
    }

    /* 图区装饰：完整背景图在桌面靠“透明占位图+错位120px”只露出底部色带；
       流式布局下改为在图区顶部单独铺图，并用遮罩隐去图底部的橙色色带，
       只保留“20”、弧线与橙点，向下与白色文案区无缝衔接 */
    .anniversary-page .timeline-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 59.03vw;
        pointer-events: none;
        background: #fff url(../20th/20years.jpg) center / 100% 100% no-repeat;
        -webkit-mask-image: linear-gradient(to bottom, #00 0 64%, transparent 78%);
        mask-image: linear-gradient(to bottom, #000 0 64%, transparent 78%);
    }

    /* 流式布局下占位图不再需要桌面端给底部色带预留的 120px */
    .anniversary-page .timeline-bg {
        padding-bottom: 0;
    }

    .anniversary-page .timeline-layer {
        position: static;
        display: flex;
        flex-direction: column;
        pointer-events: auto;
        /* 图区底部（弧线收尾后到图下缘）为留白：内容区轻微上提收紧纵向节奏，
           不与弧线尾部及渐隐遮罩重叠 */
        margin-top: -5vw;
    }

    /* 三个年份仍贴合图内弧线：图宽 100vw，高 = 100vw / 1.6941 ≈ 59.03vw */
    .anniversary-page .arc-years {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 59.03vw;
        overflow: hidden;
    }

    /* 年份文字盖在装饰图层（::before）之上 */
    .anniversary-page .arc-year {
        z-index: 1;
    }

    /* 图高仅 59vw：缩小字号并把两侧年份中心略下移，
       保证旋转后的文字不压到弧线，当前年份不顶到橙点 */
    .anniversary-page .arc-year-prev,
    .anniversary-page .arc-year-next {
        top: 61%;
        font-size: 14px;
    }

    .anniversary-page .arc-year-current {
        /* 图区内橙点在 47.4% 高度：文字置于橙点正下方约 8px，避免贴住点位 */
        top: 55.5%;
        font-size: 18px;
    }

    /* 说明标题叠在图区左上角，覆盖在装饰图层（::before）之上 */
    .anniversary-page .timeline-subtitle {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: auto;
        max-width: 56%;
        padding: 20px 0 0 20px;
        text-align: left;
        font-size: 13px;
        line-height: 1.75;
    }

    .anniversary-page .timeline-title-img {
        width: clamp(104px, 32vw, 124px);
        height: auto;
    }

    .anniversary-page .timeline-subtitle p {
        margin-bottom: 0;
    }

    .anniversary-page .timeline-subtitle p:first-child {
        margin-bottom: 14px;
    }

    .anniversary-page .timeline-detail {
        position: static;
        transform: none;
        width: auto;
        height: auto;
        padding: 16px 20px 4px;
    }

    .anniversary-page .timeline-needle {
        display: none;
    }

    .anniversary-page .timeline-desc {
        font-size: 15px;
        line-height: 1.85;
    }

    /* 控制条独立成色带（取色自 20years.png 底部渐变）：
       static 后必须清除桌面端的 margin:0 auto 并撑满整行，否则会收缩成内容宽 */
    .anniversary-page .timeline-controls {
        position: static;
        width: 100%;
        margin: 22px 0 0;
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
        gap: 10px;
        background: linear-gradient(100deg, #ef8b5e 0%, #f4a881 28%, #f08740 55%, #ef7d27 78%, #f5ab5b 100%);
        box-shadow: inset 0 10px 16px rgba(255, 255, 255, .35);
        /* 手柄行程端点：窄轨上保证手柄不出轨、不压两侧按钮（JS 读取） */
        --tl-start: 15;
        --tl-span: 70;
    }

    .anniversary-page .tl-btn {
        flex-basis: 72px;
        height: 42px;
        border-radius: 21px;
        font-size: 14px;
        gap: 3px;
    }

    .anniversary-page .tl-btn i {
        font-size: 17px;
    }

    .anniversary-page .tl-track {
        height: 42px;
        border-radius: 21px;
    }

    .anniversary-page .tl-ticks i {
        height: 9px;
        /* 窄轨 21 根刻度过密：普通年份刻度隐形但保留槽位（不能用 display:none，
           否则 space-between 会让里程碑刻度脱离真实年份位置） */
        visibility: hidden;
    }

    .anniversary-page .tl-ticks i.is-milestone {
        height: 15px;
        visibility: visible;
    }

    .anniversary-page .tl-handle {
        /* 静止初态与 --tl-start 行程端点一致（JS 切换后写内联值，二者相同） */
        left: 15%;
        min-width: 54px;
        height: 38px;
        padding: 0 10px;
        border-radius: 19px;
        font-size: 13px;
    }

    /* 品牌释义 */
    .anniversary-page .network-section {
        padding: 48px 0 36px;
    }

    .anniversary-page .network-lead {
        margin-top: 20px;
        font-size: 14.5px;
        line-height: 1.9;
    }

    .anniversary-page .outline-pill {
        margin-top: 28px;
        padding: 10px 28px;
        font-size: 14px;
    }

    .anniversary-page .network-diagram {
        width: 100%;
        margin-top: 32px;
    }

    /* 伙伴寄语 */
    .anniversary-page .voices-section {
        padding: 0 0 56px;
    }

    .anniversary-page .voices-lead {
        margin-top: 20px;
        font-size: 14.5px;
    }

    .anniversary-page .voices-lead br {
        display: none;
    }

    .anniversary-page .voice-marquee {
        margin-top: 30px;
    }
    .anniversary-page .voice-card {
        flex: 0 0 calc(100% - 40px);
        width: calc(100% - 40px);
        margin-right: 16px;
        min-height: 0;
        padding: 28px 22px 26px;
        border-radius: 10px;
    }

    .anniversary-page .voice-logo {
        height: 40px;
        max-width: 150px;
        margin-bottom: 20px;
    }

    .anniversary-page .voice-card h3 {
        font-size: 17px;
    }

    .anniversary-page .voice-card p {
        margin-top: 14px;
        font-size: 14.5px;
        line-height: 1.5;
    }

    .anniversary-page .voice-sign {
        padding-top: 24px;
    }

    .anniversary-page .voice-sign p {
        font-size: 14px;
    }

    /* 团队 */
    .anniversary-page .team-section {
        padding: 48px 0;
    }

    .anniversary-page .team-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .anniversary-page .team-copy {
        font-size: 14.5px;
        line-height: 1.9;
    }

    .anniversary-page .team-photo img {
        height: auto;
    }

    /* 下一个二十年 */
    .anniversary-page .forward-section {
        padding: 48px 0 0;
    }

    .anniversary-page .forward-head {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .anniversary-page .forward-items {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 40px;
    }

    .anniversary-page .promise-tag {
        font-size: 13px;
    }

    .anniversary-page .forward-item h3 {
        margin-top: 16px;
        font-size: 18px;
    }

    .anniversary-page .forward-item p {
        margin-top: 10px;
        font-size: 14.5px;
    }

    .anniversary-page .item-line {
        margin-top: 26px;
    }

    .anniversary-page .forward-en {
        padding: 60px 0;
        font-size: 15px;
        line-height: 1.6;
    }

}

/* ============================================================
   滚动进入视口飘入：基础 .reveal/.is-visible 机制复用 index.css
   （与首页一致的上浮 42px + 轻模糊 + 0.85s 缓动、错峰变量 --reveal-delay）。
   此处只做本页微调：大段媒体不参与模糊，按钮落地后恢复自身 hover 过渡。
   ============================================================ */
.anniversary-page .timeline-section.reveal,
.anniversary-page .network-diagram.reveal,
.anniversary-page .team-photo.reveal {
    filter: none;
}

/* .reveal 会在飘入期间接管 transition；落地后把胶囊按钮的 hover 过渡还给它 */
.anniversary-page .outline-pill.reveal.is-visible {
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

/* ============================================================
   品牌视觉系统介绍弹窗（依据 design/page/20周年VI弹窗页面.png 校准）
   设计稿 2562 宽（2x）：白卡满宽、内容栏 1048、页边距 66、素材圆角统一 10
   ============================================================ */
.anniversary-page .vi-modal {
    --vi-ink: #20252d;
    /* 设计稿正文/导语/英文标注/标题同色（核心采样 rgb(80,80,72)） */
    --vi-body: #505048;
    --vi-muted: #505048;
    --vi-sheet: #f6f7fa;
    /* 设计稿块间距实测 65-67 逻辑像素（130-135@2x） */
    --vi-gap: 66px;
    position: fixed;
    inset: 0;
    z-index: 1000;
    visibility: hidden;
    transition: visibility 0s linear .35s;
}

.anniversary-page .vi-modal.is-open {
    visibility: visible;
    transition-delay: 0s;
}

.anniversary-page .vi-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 19, 26, .55);
    opacity: 0;
    transition: opacity .28s ease;
}

.anniversary-page .vi-modal.is-open .vi-modal__backdrop {
    opacity: 1;
}

.anniversary-page .vi-modal__dialog {
    position: relative;
    width: min(1180px, calc(100vw - 48px));
    max-height: calc(100vh - 56px);
    margin: 28px auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(26px) scale(.985);
    transition: opacity .32s var(--ease), transform .32s var(--ease);
}

.anniversary-page .vi-modal.is-open .vi-modal__dialog {
    opacity: 1;
    transform: none;
}

.anniversary-page .vi-modal__close {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 10;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 18px rgba(20, 28, 40, .16);
    cursor: pointer;
    transition: background .25s ease;
}

.anniversary-page .vi-modal__close:hover {
    background: #f4f6fa;
}

/* “+”号整体旋转 45° 形成 ×；hover 时再旋转 90°（到 135°）并变为品牌橙 */
.anniversary-page .vi-modal__close i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    margin: -1px 0 0 -9px;
    border-radius: 1px;
    background: #333842;
    transform: rotate(45deg);
    transition: transform .3s var(--ease), background-color .3s ease;
}

.anniversary-page .vi-modal__close i::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 18px;
    margin: -9px 0 0 -1px;
    border-radius: 1px;
    background: inherit;
}

.anniversary-page .vi-modal__close:hover i {
    background: #e47917;
    transform: rotate(135deg);
}

.anniversary-page .vi-modal__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 66px 196px;
    /* Firefox：细滚动条 */
    scrollbar-width: thin;
    scrollbar-color: rgba(32, 37, 45, .08) transparent;
    scrollbar-arrow-color: transparent;
}

/* WebKit：2px 细线滚动条，轨道透明不抢视觉 */
.anniversary-page .vi-modal__body::-webkit-scrollbar {
    width: 2px;
}

.anniversary-page .vi-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

.anniversary-page .vi-modal__body::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(32, 37, 45, .22);
}

.anniversary-page .vi-modal__body::-webkit-scrollbar-thumb:hover {
    background: rgba(32, 37, 45, .36);
}

/* ---------- 弹窗内文本 ----------
   figure 一并清除浏览器默认 margin（含左右 40px）；
   其顶部间距由下方特异性更高的 body>*+* 块距规则重新接管。 */
.anniversary-page .vi-modal h2,
.anniversary-page .vi-modal h3,
.anniversary-page .vi-modal figure {
    margin: 0;
}

.anniversary-page .vi-head {
    /* 设计稿 h2 行盒顶距白卡 87（h2 字形顶 93.5，半行距 6.8） */
    padding: 87px 0 0;
    text-align: center;
}

.anniversary-page .vi-title {
    color: #111;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.4;
}

/* p.vi-lead 提升选择器特异性，覆盖 .vi-modal__body p 的正文行高；
   设计稿行宽 607、字号 16、行高 27（54@2x） */
.anniversary-page .vi-modal__body p.vi-lead {
    max-width: 608px;
    margin: 44px auto 0;
    color: var(--vi-muted);
    font-size: 16px;
    line-height: 1.69;
    text-align: center;
}

/* 弹窗主体各块统一垂直节奏（设计稿实测 65-67px）。
   注意 figure 的 reset（.vi-modal figure）特异性为 (0,2,1)，
   高于 *+* 的 (0,2,0)（通配符不计特异性），故需 figure 专用并列选择器接管 */
.anniversary-page .vi-modal__body>*+*,
.anniversary-page .vi-modal__body>*+figure,
.anniversary-page .vi-modal__body>figure+* {
    margin-top: var(--vi-gap);
}

/* 设计稿正文统一 16px / 行高 24，两端对齐 */
.anniversary-page .vi-modal__body p {
    line-height: 1.5;
    text-align: justify;
}
.anniversary-page .vi-modal__body h3 {
    line-height: 1.5;
    margin-bottom: 24px;
    font-weight: normal;
}
.anniversary-page .vi-modal__body>.vi-head {
    margin-top: 0;
}

/* 导语末行盒到首图设计稿间距 37px（小于常规块距） */
.anniversary-page .vi-modal__body>.vi-head+* {
    margin-top: 37px;
}
.anniversary-page .vi-text {
    color: var(--vi-body);
    font-size: 16px;
    line-height: 1.5;
}

/* 设计稿正文段落间距 24px（48@2x，恰为一个行盒） */
.anniversary-page .vi-text p+p {
    margin-top: 24px;
}

/* 右半栏文字块（设计稿 x1314-2327，宽 507 逻辑像素） */
.anniversary-page .vi-text--right {
    max-width: 507px;
    margin-left: auto;
}

.anniversary-page .vi-modal__body>*+.vi-text--right {
    margin-top: var(--vi-gap);
}

/* Color System：左右双栏，设计稿列间距约 20px（39@2x） */
.anniversary-page .vi-text--columns {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* 英文标注：设计稿大写高约等于中文字面（20px，cap≈14.4），
   收紧行高（p.vi-en 提升特异性以覆盖正文 p 行高），紧贴下方中文副标题 */
.anniversary-page .vi-modal__body p.vi-en {
    color: var(--vi-muted);
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 0;
}

/* Color 右栏   占位行（同享 vi-en 字号/行高）：
   下间距 48，使右栏首段与左栏 h3 下方正文对齐。
   选择器与 p.vi-en 同特异性且定义在后，夺回 margin-bottom */
.anniversary-page .vi-modal__body p.vi-title-space {
    margin-bottom: 48px;
}

/* 中文副标题：16px 常规体、与正文同色，下方节奏 24px */
.anniversary-page .vi-subtitle {
    margin: 0 0 24px;
    color: var(--vi-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

/* 关键句：与正文同色，靠加粗形成层级 */
.anniversary-page .vi-keyline {
    margin-bottom: 24px;
    color: var(--vi-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

/* Core Idea：左文字 + 右图片（设计稿列间距约 20px） */
.anniversary-page .vi-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

/* ---------- 弹窗内图片 ----------
   普通卡素材已烘焙圆角（半径约 36 原图像素，缩放到桌面后约 18px），
   手册类卡（04/06/07-12）素材本身为直角浅灰成品卡，圆角完全由 CSS 裁切。
   两类统一裁切 10px；窄屏随宽度收窄，避免缩小时切出素材烘焙弧外的白角。 */
.anniversary-page .vi-media {
    position: relative;
    border-radius: 10px;
    background: var(--vi-sheet);
    overflow: hidden;
}

.anniversary-page .vi-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
    opacity: 0;
    transition: opacity .4s ease;
}

.anniversary-page .vi-media img.is-loaded {
    opacity: 1;
}

/* 两列图组：行间距 34（68@2x）、列间距 23（46@2x） */
.anniversary-page .vi-grid--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px 23px;
}

/* 22/23 与 24 图组在设计稿中连续排列，行间距同图组内部 34，而非常规块距 */
.anniversary-page .vi-modal__body>.vi-grid--2+.vi-grid--2 {
    margin-top: 34px;
}

/* 24 号图在桌面端只占右列，左列留白；移动端隐藏占位 */
.anniversary-page .vi-media--hidden {
    background: transparent;
}

body.vi-lock {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .anniversary-page .anniversary-hero {
        animation: none;
    }

    .anniversary-page .vi-modal,
    .anniversary-page .vi-modal__backdrop,
    .anniversary-page .vi-modal__dialog,
    .anniversary-page .vi-modal__close,
    .anniversary-page .vi-modal__close i,
    .anniversary-page .vi-media img {
        transition: none;
    }

    .anniversary-page .vi-modal__dialog {
        transform: none;
    }

    .anniversary-page .vi-media img {
        opacity: 1;
    }

    .anniversary-page .voice-track {
        transform: none !important;
    }
}

/* ---------- 平板与手机 ---------- */
@media (max-width: 1023px) {
    .anniversary-page .vi-modal__dialog {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        margin: 12px auto;
        border-radius: 16px;
    }

    .anniversary-page .vi-modal__body {
        padding: 0 22px 52px;
    }

    .anniversary-page .vi-head {
        padding: 72px 0 0;
    }

    .anniversary-page .vi-title {
        font-size: 25px;
    }

    .anniversary-page .vi-lead {
        font-size: 15px;
    }

    .anniversary-page .vi-text {
        font-size: 15px;
        line-height: 1.5;
    }

    .anniversary-page .vi-title-space {
        margin-bottom: 0;
        display: none;
    }

    .anniversary-page .vi-text--right {
        max-width: none;
    }

    .anniversary-page .vi-text--columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 窄屏双栏已转单列，取消桌面端的额外下留白 */
    .anniversary-page .vi-modal__body>.vi-text--columns {
        margin-bottom: 0;
    }

    .anniversary-page .vi-split {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .anniversary-page .vi-grid--2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 单列满宽后卡宽 = 100vw - 68，圆角不得大于素材烘焙弧（36 原图像素等比换算） */
    .anniversary-page .vi-media {
        border-radius: calc(1.32vw - .9px);
    }

    .anniversary-page .vi-media--hidden {
        display: none;
    }

    .anniversary-page .vi-modal {
        --vi-gap: 40px;
    }

    .anniversary-page .vi-modal__close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    /* 时间轴控制条在超窄屏进一步压缩：缩小按钮与手柄、内收行程端点，
       保证 320px 宽下手柄滑到两端也不压住“后退/前进”按钮 */
    .anniversary-page .timeline-controls {
        --tl-start: 20;
        --tl-span: 60;
        gap: 8px;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .anniversary-page .tl-btn {
        flex-basis: 64px;
        height: 40px;
        border-radius: 20px;
        font-size: 13px;
        gap: 2px;
    }

    .anniversary-page .tl-btn i {
        font-size: 15px;
    }

    .anniversary-page .tl-track {
        height: 40px;
        border-radius: 20px;
    }

    .anniversary-page .tl-handle {
        left: 20%;
        min-width: 46px;
        height: 38px;
        padding: 0 9px;
        border-radius: 19px;
        font-size: 13px;
    }

    .anniversary-page .vi-modal__dialog {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        margin: 8px auto;
        border-radius: 14px;
    }

    .anniversary-page .vi-modal__body {
        padding: 0 16px 40px;
    }

    .anniversary-page .vi-head {
        padding: 64px 0 0;
    }

    .anniversary-page .vi-title {
        font-size: 22px;
    }

    /* 卡宽 = 100vw - 32，同步收窄圆角，避免露出素材烘焙白角 */
    .anniversary-page .vi-media {
        border-radius: calc(1.32vw - .63px);
    }
}