* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        /* 全局字体设置为华文中宋 */
        font-family: "STZhongsong", "华文中宋", serif;
      }
      /* 资源加载等待页（风格与移动端拦截、窗口过小提示统一） */
      .resource-loading-overlay {
        position: fixed;
        inset: 0;
        z-index: 2147483646;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background-color: #d4dde1;
        transition: opacity 0.4s ease, visibility 0.4s ease;
        font-family: "STZhongsong", "华文中宋", serif;
      }
      .resource-loading-overlay::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('img_video_/背景图片.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.6;
        pointer-events: none;
        z-index: 0;
      }
      .resource-loading-overlay.loaded {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
      .resource-loading-card {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 400px;
        text-align: center;
      }
      .resource-loading-card .resource-loading-spinner {
        width: 48px;
        height: 48px;
        margin: 0 auto 1.25rem;
        border: 4px solid rgba(61, 74, 66, 0.15);
        border-top-color: #3d4a42;
        border-radius: 50%;
        animation: resource-loading-spin 0.9s linear infinite;
      }
      @keyframes resource-loading-spin {
        to { transform: rotate(360deg); }
      }
      /* 移动端拦截层：浅色风格，背景图 60% 透明度 */
      .mobile-block-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        background-color: #d4dde1;
        align-items: center;
        justify-content: center;
        padding: 20px;
        font-family: "STZhongsong", "华文中宋", serif;
      }
      .mobile-block-overlay::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('img_video_/背景图片.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.6;
        pointer-events: none;
        z-index: 0;
      }
      .mobile-block-overlay.show {
        display: flex;
      }
      .mobile-block-card {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 360px;
        background: rgba(255, 255, 255, 0.92);
        border-radius: 16px;
        padding: 28px 24px 24px;
        text-align: center;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.8);
        color: #3d4a42;
      }
      .mobile-block-title {
        font-size: 19px;
        font-weight: 600;
        color: #3d4a42;
        margin-bottom: 12px;
        line-height: 1.35;
      }
      .mobile-block-desc {
        font-size: 14px;
        line-height: 1.7;
        color: #5c6960;
        margin-bottom: 16px;
      }
      .mobile-block-divider {
        height: 1px;
        background: rgba(0, 0, 0, 0.08);
        margin-bottom: 14px;
      }
      .mobile-block-hint {
        font-size: 13px;
        line-height: 1.5;
        color: #6b766e;
      }
      /* 窗口过小提示：与主站浅色一致，背景图 60% 透明度，带淡入淡出 */
      .fullscreen-prompt-overlay {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 2147483645;
        background-color: #d4dde1;
        align-items: center;
        justify-content: center;
        padding: 20px;
        font-family: "STZhongsong", "华文中宋", serif;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.4s ease, visibility 0.4s ease;
      }
      .fullscreen-prompt-overlay::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('img_video_/背景图片.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.6;
        pointer-events: none;
        z-index: 0;
      }
      .fullscreen-prompt-overlay.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .fullscreen-prompt-card {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 400px;
        background: rgba(255, 255, 255, 0.92);
        border-radius: 16px;
        padding: 28px 24px 24px;
        text-align: center;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.8);
        color: #3d4a42;
        opacity: 0;
        transform: scale(0.97);
        transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s;
      }
      .fullscreen-prompt-overlay.show .fullscreen-prompt-card {
        opacity: 1;
        transform: scale(1);
      }
      .fullscreen-prompt-title {
        font-size: 19px;
        font-weight: 600;
        color: #3d4a42;
        margin-bottom: 12px;
        line-height: 1.35;
      }
      .fullscreen-prompt-desc {
        font-size: 14px;
        line-height: 1.7;
        color: #5c6960;
      }
      body.mobile-blocked .pages-container,
      body.mobile-blocked .page-navigation,
      body.mobile-blocked .view-all-points,
      body.mobile-blocked .mouse-legend,
      body.mobile-blocked .global-interactive-points,
      body.mobile-blocked .side-panel,
      body.mobile-blocked .side-panel-overlay,
      body.mobile-blocked .page-bottom-nav-highlight,
      body.mobile-blocked .sub-page-title,
      body.mobile-blocked .browse-timer {
        visibility: hidden;
        pointer-events: none;
      }
      html {
        width: 100%;
        height: 100%;
        overflow: hidden;
        /* 自定义鼠标光标 - 使用羽毛图片，热点位置：向右27px，向下70px */
        cursor: url('img_video_/鼠标图例3.webp') 27 70, auto;
      }
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        display: block;
        position: relative;
        /* 自定义鼠标光标 - 使用羽毛图片，热点位置：向右27px，向下70px */
        cursor: url('img_video_/鼠标图例3.webp') 27 70, auto;
        /* 全局字体设置为华文中宋 */
        font-family: "STZhongsong", "华文中宋", serif;
        /* 全局背景色（与毛玻璃对调后）：#d4dde1 */
        background-color: #d4dde1;
      }
      /* 使用伪元素绘制全局背景图，透明度 50% */
      body::before {
        content: '';
        position: fixed;
        /* 为了在视差移动时不露出边缘，将背景层放大到视口的 120%，并居中 */
        top: -10%;
        left: -10%;
        width: 120%;
        height: 120%;
        background-image: url('img_video_/背景图片.webp');
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        opacity: 1; /* 背景图透明度 0% */
        pointer-events: none;
        z-index: 0;
        /* 允许通过 CSS 变量做轻微平移，实现视差效果 */
        transform: translate3d(var(--bg-offset-x, 0), var(--bg-offset-y, 0), 0);
        /* 背景视差：更短、更利落，避免“拖泥带水”的惯性 */
        transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1);
      }
      /* 确保所有主要容器元素都使用自定义光标，防止在边缘时消失 */
      .pages-container,
      .page-frame,
      .page-content,
      .page-navigation,
      .side-panel,
      .side-panel-overlay,
      .mouse-pulse-container {
        cursor: url('img_video_/鼠标图例3.webp') 27 70, auto;
      }
      /* 对于需要特殊光标的元素，可以单独设置 */
      button, a, .interactive-point, .global-interactive-point {
        cursor: url('img_video_/鼠标图例3.webp') 27 70, pointer;
      }
      canvas {
        display: block;
        width: 100%;
        height: 100%;
      }
      /* 页面容器系统 */
      .pages-container {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 1840px;
        height: 1020px;
        z-index: 1;
        overflow: hidden;
        transform-origin: center center;
      }
      .page-frame {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        /* 让页面容器本身透明，从而露出全局底图 */
        background: transparent;
        /* 统一的页面淡入淡出（进入时渐入、离开时渐隐）
           ▶ 关键时间：0.5s
           - 第一页从任何其它页面切换进来时，都是用这条 0.5s 的 opacity 过渡做整页渐入
           - 不要再改这个时间，已经和第二页 1.1s 的后摇做到了完美衔接 */
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: opacity, visibility;
      }
      /* 特殊转场时，禁用默认的淡入淡出，避免额外闪烁 */
      .page-frame.no-fade {
        transition: none !important;
      }
      .page-frame.active {
        opacity: 1;
        visibility: visible;
        z-index: 2;
      }
      /* 第一个页面（前面的框架页面） */
      .page-frame.page-1 {
        background: transparent;
      }
      /* 第二个页面（视频框架） */
      .page-frame.page-2 {
        background: transparent;
        position: relative;
      }
      /* 第二页分割线容器 - 只在主页显示 */
      .page-2-divider-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 5;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                    visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: opacity;
      }
      .page-2.is-home .page-2-divider-container {
        opacity: 1;
        visibility: visible;
      }
      /* 子页面时，分隔线容器保持可见（用于显示左右两条分隔线） */
      .page-2.sub-page-1 .page-2-divider-container,
      .page-2.sub-page-2 .page-2-divider-container,
      .page-2.sub-page-3 .page-2-divider-container,
      .page-2.sub-page-4 .page-2-divider-container {
        opacity: 1;
        visibility: visible;
        z-index: 1001;
      }
      /* 分割线样式 */
      .page-2-divider {
        position: absolute;
        top: 0;
        height: 100%;
        width: 2px;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
      }
      /* 子页面时，隐藏中间的分隔线 - 优化：使用属性选择器 */
      .page-2[class*="sub-page-"] .page-2-divider.divider-1,
      .page-2[class*="sub-page-"] .page-2-divider.divider-2,
      .page-2[class*="sub-page-"] .page-2-divider.divider-3 {
        opacity: 0;
        visibility: hidden;
      }
      /* 子页面时，保持左右两条分隔线可见 - 优化：合并选择器 */
      .page-2[class*="sub-page-"] .page-2-divider.divider-left,
      .page-2[class*="sub-page-"] .page-2-divider.divider-right {
        opacity: 1;
        visibility: visible;
      }
      .page-2-divider.divider-left {
        left: calc(6.7% - 5px);
      }
      /* 所有展区：左边竖线向右平移4px - 优化：使用属性选择器 */
      .page-2[class*="sub-page-"] .page-2-divider.divider-left {
        left: calc(6.7% - 5px + 4px);
      }
      /* 所有展区：右边竖线向右平移1px */
      .page-2[class*="sub-page-"] .page-2-divider.divider-right {
        left: calc(93.3% + 1px);
      }
      .page-2-divider.divider-1 {
        left: calc(28.35% - 2.5px);
      }
      .page-2-divider.divider-2 {
        left: calc(50%);
      }
      .page-2-divider.divider-3 {
        left: calc(71.65% - 2px);
      }
      .page-2-divider.divider-right {
        left: calc(93.3%);
      }
      /* 中间四个区域容器 - 只在主页显示 */
      .page-2-regions-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                    visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: opacity;
      }
      .page-2.is-home .page-2-regions-container {
        opacity: 1;
        visibility: visible;
      }
      /* 第二页进入动画：从第一页来时整体略微自上而下滑入；从第三页来时自下而上 */
      .page-frame.page-2.page2-enter-from-1 .page-2-regions-container,
      .page-frame.page-2.page2-enter-from-1 .page-2-divider-container {
        animation: page2EnterFromTop 1.1s cubic-bezier(0.19, 1, 0.22, 1);
      }
      .page-frame.page-2.page2-enter-from-3 .page-2-regions-container,
      .page-frame.page-2.page2-enter-from-3 .page-2-divider-container {
        animation: page2EnterFromBottom 1.1s cubic-bezier(0.19, 1, 0.22, 1);
      }
      @keyframes page2EnterFromTop {
        from {
          translate: 0 -72px;
        }
        to {
          translate: 0 0;
        }
      }
      @keyframes page2EnterFromBottom {
        from {
          translate: 0 72px;
        }
        to {
          translate: 0 0;
        }
      }
      /* 子页面全屏显示 - 优化：使用通用选择器减少重复 */
      .page-2.sub-page-1 .page-2-regions-container,
      .page-2.sub-page-2 .page-2-regions-container,
      .page-2.sub-page-3 .page-2-regions-container,
      .page-2.sub-page-4 .page-2-regions-container {
        opacity: 1;
        visibility: visible;
      }
      
      /* 子页面时，显示对应region全屏 */
      .page-2.sub-page-1 .page-2-region.region-1,
      .page-2.sub-page-2 .page-2-region.region-2,
      .page-2.sub-page-3 .page-2-region.region-3,
      .page-2.sub-page-4 .page-2-region.region-4 {
        /* 绑定到画布：在 pages-container 内铺满画布，而不是铺满浏览器视口 */
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1000 !important;
      }
      
      /* 子页面时，隐藏其他region - 优化：使用通用规则 */
      .page-2.sub-page-1 .page-2-region:not(.region-1),
      .page-2.sub-page-2 .page-2-region:not(.region-2),
      .page-2.sub-page-3 .page-2-region:not(.region-3),
      .page-2.sub-page-4 .page-2-region:not(.region-4) {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                    visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      /* 子页面时，全屏视频样式 - 尺寸随视口高度变化，宽扁屏时设最小高度避免缩成一小块 */
      .page-2.sub-page-1 .page-2-region.region-1 video,
      .page-2.sub-page-2 .page-2-region.region-2 video,
      .page-2.sub-page-3 .page-2-region.region-3 video,
      .page-2.sub-page-4 .page-2-region.region-4 video {
        /* 绑定到画布：尺寸参考画布高度，避免初始小窗口进入时被“视口单位”影响 */
        height: 110% !important;
        width: auto !important;
        min-height: 520px !important;
        max-height: none !important;
        aspect-ratio: 16 / 9;
        object-fit: contain !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) scale(4) !important;
        position: absolute !important;
        transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                    top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: transform, left, top !important;
      }
      /* 区域样式 */
      .page-2-region {
        position: absolute;
        top: 0;
        height: 100%;
        width: calc(21.65% + 2.5px);
        overflow: hidden;
        transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                    width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    position 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        contain: layout style paint;
        background-color: #000000;
        will-change: transform, left, width, position;
      }
      .page-2-region.region-1 {
        left: calc(6.7% - 5px);
        /* 湿地鸟类展区主色：#88abda，透明度 40% */
        background: linear-gradient(
          to bottom,
          rgba(136, 171, 218, 0.4),
          rgba(136, 171, 218, 0.4)
        );
      }
      .page-2-region.region-2 {
        left: calc(28.35% - 2.5px);
        /* 猛禽与高山鸟类展区主色：#206864，透明度 40% */
        background: linear-gradient(
          to bottom,
          rgba(32, 104, 100, 0.4),
          rgba(32, 104, 100, 0.4)
        );
      }
      .page-2-region.region-3 {
        left: calc(50%);
        /* 微调第三个展区宽度，避免背景略微踩到第四个展区 */
        width: 21.65%;
        /* 林鸟展区主色：#9aa7b1，透明度 40% */
        background: linear-gradient(
          to bottom,
          rgba(154, 167, 177, 0.4),
          rgba(154, 167, 177, 0.4)
        );
      }
      .page-2-region.region-4 {
        left: calc(71.65% - 2.5px);
        /* 城乡与农田展区主色：#BECAB7，透明度 90% */
        background: linear-gradient(
          to bottom,
          rgba(190, 202, 183, 0.9),
          rgba(190, 202, 183, 0.9)
        );
      }

      /* 进入具体展区时：将全屏背景色同步为对应展区主色，避免特殊屏幕比例下出现左右/上下空白带 */
      body.sub-page-1-active {
        /* 湿地鸟类展区主色 */
        background-color: #88abda;
      }
      body.sub-page-2-active {
        /* 猛禽与高山鸟类展区主色 */
        background-color: #206864;
      }
      body.sub-page-3-active {
        /* 林鸟展区主色 */
        background-color: #9aa7b1;
      }
      body.sub-page-4-active {
        /* 城乡与农田展区主色 */
        background-color: #BECAB7;
      }

      /* 第二页返回第一页时的转场：中间四个区域从左到右依次消失 */
      .page-2.page2-exit-to-page1 .page-2-region {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
      }
      .page-2.page2-exit-to-page1 .page-2-region.region-1 {
        animation: page2RegionFadeOut 0.4s forwards 0s;
      }
      .page-2.page2-exit-to-page1 .page-2-region.region-2 {
        animation: page2RegionFadeOut 0.4s forwards 0.15s;
      }
      .page-2.page2-exit-to-page1 .page-2-region.region-3 {
        animation: page2RegionFadeOut 0.4s forwards 0.3s;
      }
      .page-2.page2-exit-to-page1 .page-2-region.region-4 {
        animation: page2RegionFadeOut 0.4s forwards 0.45s;
      }
      @keyframes page2RegionFadeOut {
        from {
          opacity: 1;
          transform: scale(1);
        }
        to {
          opacity: 0;
          transform: scale(0.9);
        }
      }
      /* 第二页返回第一页转场：竖线从左到右依次淡出（与区域节奏协调） */
      .page-2.page2-exit-to-page1 .page-2-divider-container {
        opacity: 1;
        visibility: visible;
      }
      .page-2.page2-exit-to-page1 .page-2-divider.divider-left,
      .page-2.page2-exit-to-page1 .page-2-divider.divider-right {
        animation: page2DividerFadeOut 0.4s forwards 0s;
      }
      .page-2.page2-exit-to-page1 .page-2-divider.divider-1 {
        animation: page2DividerFadeOut 0.4s forwards 0.15s;
      }
      .page-2.page2-exit-to-page1 .page-2-divider.divider-2 {
        animation: page2DividerFadeOut 0.4s forwards 0.3s;
      }
      .page-2.page2-exit-to-page1 .page-2-divider.divider-3 {
        animation: page2DividerFadeOut 0.4s forwards 0.45s;
      }
      @keyframes page2DividerFadeOut {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }

      
      /* 区域悬停状态 - 扩大区域 */
      .page-2-region.region-1.hovered {
        left: calc(6.7% - 5px);
        width: calc(38% + 2.5px);
      }
      .page-2-region.region-2.hovered {
        left: calc(18% - 2.5px);
        width: calc(38% + 2.5px);
      }
      .page-2-region.region-3.hovered {
        left: calc(32%);
        width: calc(38% + 2.5px);
      }
      .page-2-region.region-4.hovered {
        left: calc(55.3% - 2.5px);
        width: calc(38% + 2.5px);
      }
      
      /* 其他区域缩小状态（通过JavaScript动态添加） */
      .page-2-region.shrunk {
        width: calc(18% + 2.5px);
      }
      
      /* 分区悬停时底部描述文案（仅扩展时显示），背景使用对应区域主色；从左到右出现/消失，消失时先收文字再收框 */
      .page-2-region-desc {
        position: absolute;
        bottom: 250px;
        left: 50%;
        transform: translateX(-50%);
        width: 280px;
        max-width: 280px;
        min-width: 280px;
        margin: 0;
        padding: 12px 16px;
        font-size: 18px;
        line-height: 1.5;
        z-index: 5;
        pointer-events: none;
        box-sizing: border-box;
        clip-path: inset(0 0 0 100%);
        opacity: 1;
        transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .page-2-region.hovered .page-2-region-desc {
        clip-path: inset(0 0 0 0);
        transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      }
      /* 消失时：先让文字快速淡出，再让框从左到右裁掉（框的 transition 加延迟） */
      .page-2-region:not(.hovered) .page-2-region-desc {
        transition: clip-path 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.08s;
      }
      .page-2-region-desc-text {
        opacity: 0;
        transition: opacity 0.08s ease;
      }
      .page-2-region.hovered .page-2-region-desc .page-2-region-desc-text {
        opacity: 1;
        transition: opacity 0.15s ease;
      }
      /* 湿地：主色 #88abda */
      .page-2-region.region-1.hovered .page-2-region-desc {
        background: linear-gradient(to top, rgba(136, 171, 218, 0.92), rgba(136, 171, 218, 0.78));
        color: #fff;
      }
      /* 高山：主色 #206864 */
      .page-2-region.region-2.hovered .page-2-region-desc {
        background: linear-gradient(to top, rgba(32, 104, 100, 0.92), rgba(32, 104, 100, 0.78));
        color: #fff;
      }
      /* 森林：主色 #9aa7b1 */
      .page-2-region.region-3.hovered .page-2-region-desc {
        background: linear-gradient(to top, rgba(154, 167, 177, 0.92), rgba(154, 167, 177, 0.78));
        color: #fff;
      }
      /* 城乡与农田：主色 #BECAB7（浅色，配深色字） */
      .page-2-region.region-4.hovered .page-2-region-desc {
        background: linear-gradient(to top, rgba(190, 202, 183, 0.95), rgba(190, 202, 183, 0.88));
        color: #2c3e2c;
      }
      
      /* 进入展区时：先播描述消失动画（与悬停离开同效果），再切换全屏；需覆盖 .hovered 状态 */
      .page-2-region.hovered .page-2-region-desc.exiting,
      .page-2-region-desc.exiting {
        clip-path: inset(0 0 0 100%);
        transition: clip-path 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.08s;
      }
      .page-2-region.hovered .page-2-region-desc.exiting .page-2-region-desc-text,
      .page-2-region-desc.exiting .page-2-region-desc-text {
        opacity: 0;
        transition: opacity 0.08s ease;
      }
      
      /* CSS中的位置调整已由JavaScript处理，这里保留作为备用 */
      
      /* 区域图片和视频样式 - 尺寸随视口高度变化，宽扁屏时设最小高度避免缩成一小块 */
      .page-2-region img,
      .page-2-region video {
        height: max(110vh, 520px) !important;
        width: auto !important;
        min-height: max(110vh, 520px) !important;
        max-height: max(110vh, 520px) !important;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
        transform: translateY(-5%) scale(2.8);
        transform-origin: center center;
        position: absolute;
        top: 20px;
        left: 0;
        will-change: transform, opacity;
        box-sizing: border-box;
        /* 不对 width/height 做 transition，确保随窗口高度实时改变 */
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.15s ease-out,
                    visibility 0.15s ease-out;
        /* 硬件加速优化 */
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        perspective: 1000px;
        -webkit-perspective: 1000px;
      }
      
      /* 视频隐藏状态 - 使用opacity和visibility而不是display */
      /* 注意：visibility保持visible以确保视频可以叠加，只通过opacity控制显示 */
      .page-2-region video.video-hidden {
        opacity: 0 !important;
        visibility: visible !important; /* 保持visible以支持叠加过渡 */
        pointer-events: none;
        z-index: 0;
      }
      
      /* 视频显示状态 */
      .page-2-region video.video-visible {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto;
        z-index: 2; /* 确保显示的视频在最上层 */
      }
      
      /* 视频准备状态 - 用于无缝切换（叠加在旧视频之上，但透明） */
      .page-2-region video.video-ready {
        opacity: 0 !important;
        visibility: visible !important;
        pointer-events: none;
        z-index: 2; /* 确保在旧视频之上 */
      }
      
      /* 第三个页面（后面的框架页面） */
      .page-frame.page-3 {
        background: transparent;
      }
      /* 第三页进入动画：从第一页来时淡入；从第二页来时保持现有转场 */
      .page-frame.page-3.page3-enter-from-1 {
        animation: page3FadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }
      /* 第三页进入动画：从第二页来时淡入 */
      .page-frame.page-3.page3-enter-from-2 {
        animation: page3FadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }
      /* 第三页退出动画：切换到第一页时淡出 */
      .page-frame.page-3.page3-exit-to-1 {
        animation: page3FadeOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }
      /* 第三页退出动画：切换到第二页时淡出 */
      .page-frame.page-3.page3-exit-to-2 {
        animation: page3FadeOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }
      @keyframes page3FadeIn {
        from {
          opacity: 0;
          visibility: hidden;
        }
        to {
          opacity: 1;
          visibility: visible;
        }
      }
      @keyframes page3FadeOut {
        from {
          opacity: 1;
          visibility: visible;
        }
        to {
          opacity: 0;
          visibility: hidden;
        }
      }
      /* 第三页文本元素下移出现动画 */
      @keyframes page3SlideInFromBottom {
        from {
          opacity: 0;
          transform: translateY(50px);
        }
        to {
          opacity: 0.7;
          transform: translateY(0);
        }
      }
      /* 第三页文本元素上移消失动画 */
      @keyframes page3SlideOutToTop {
        from {
          opacity: 1;
          transform: translateY(0);
        }
        to {
          opacity: 0;
          transform: translateY(-50px);
        }
      }
      /* 第三页四个文字框轻微流动效果 */
      @keyframes page3BoxFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
      }
      /* 页面内容容器 */
      .page-content {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .page-content video,
      .page-content canvas {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }
      /* 第三页顶部艺术字：羽、奕 */
      .page3-hero-art {
        position: absolute;
        top: 312px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 28px;
        pointer-events: none;
        z-index: 12;
        transform: translateX(-120px);
      }
      .page3-hero-art__img {
        height: 176px;
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28));
        opacity: 0.95;
      }
      .page3-hero-art__img.page3-yu-art {
        transform: translateX(6px);
      }
      .page3-hero-art__img.page3-yi-art {
        transform: translateX(-6px);
      }
      /* 第三页图片样式 */
      .page-content img.page3-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        transform: scale(1.35) translateY(450px);
        opacity: 0.9; /* 透明度90% */
      }
      /* 木桌图片 - 确保在GIS草图之上，向上移一点 */
      .page-content img.page3-image[alt="木桌"] {
        position: relative;
        z-index: 1;
        transform: scale(1.55) translateY(395px);
      }
      /* 第三页新增的小图片 - 缩小到原图的1/10 */
      .page-content img.page3-image-small {
        transform: scale(0.1) !important;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        position: absolute;
        opacity: 0.9;
        z-index: 10;
        transform-origin: top left;
      }
      /* 为每张图片设置不同的位置 */
      .page-content img.page3-image-small[alt="双筒"] {
        left: 150px;
        top: 320px;
        transform: scale(0.135) !important; /* 缩小一点 */
      }
      .page-content img.page3-image-small[alt="卡牌"] {
        left: 950px;
        top: 590px;
        transform: scale(0.135) !important; /* 缩小一点 */
      }
      .page-content img.page3-image-small[alt="抠图要求"] {
        left: 1430px;
        top: 740px;
        transform: scale(0.09) !important; /* 缩小一点 */
      }
      /* 中间三张图片 - 和双筒卡牌差不多大小，放在正中间 */
      .page-content img.page3-image-center {
        transform: scale(0.135) !important;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        position: absolute;
        opacity: 0.9;
        z-index: 10;
        transform-origin: top left;
        top: 50%;
      }
      .page-content img.page3-image-center[alt="生成小鸟石膏模型"] {
        left: 400px;
        top: 640px;
        transform: scale(0.068) !important; /* 缩小一点 */
        z-index: 11; /* 确保在抠图要求2之上 */
      }
      .page-content img.page3-image-center[alt="抠图要求2"] {
        left: 540px;
        top: 490px;
        transform: scale(0.1) !important; /* 缩小一点 */
        z-index: 9; /* 降级到生成小鸟石膏模型之下 */
      }
      .page-content img.page3-image-center[alt="抠图要求3"] {
        left: 800px;
        top: 660px;
        transform: scale(0.068) !important; /* 缩小一点 */
      }
      /* GIS草图 - 缩小并下移 */
      .page-content img.page3-image-gis {
        transform: scale(0.36) translateX(-2000px) translateY(-600px) !important;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        position: absolute;
        opacity: 0.5;
        z-index: 0;
        transform-origin: top left;
        top: 70%;
        left: 50%;
      }
      /* 第三页右上角文本框 */
      .page3-text-box {
        position: absolute;
        top: 20px;
        left: 20px;
        right: 20px;
        max-height: calc(100vh - 100px);
        z-index: 100;
        font-family: "STZhongsong", "华文中宋", serif;
        font-size: 18px;
        line-height: 1.8;
        color: #1a1a1a;
        text-align: justify;
      }
      .page3-text-box-left {
        position: relative;
        width: auto;
        max-height: calc(100vh - 100px);
        height: fit-content;
        margin-left: 160px;
      }
      .page3-text-box-left-item {
        position: absolute;
        width: 400px;
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.55);
        backdrop-filter: none;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow:
          0 3px 6px rgba(0, 0, 0, 0.16),
          0 12px 32px rgba(0, 0, 0, 0.24),
          0 32px 64px rgba(0, 0, 0, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
        overflow-y: auto;
        height: fit-content;
        transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
        transform-origin: center;
        opacity: 0;
        animation: page3SlideInFromBottom 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards,
                   page3BoxFloat 5.5s ease-in-out 0.9s infinite;
      }
      .page-frame.page-3.page3-exit-to-1 .page3-text-box-left-item,
      .page-frame.page-3.page3-exit-to-2 .page3-text-box-left-item {
        animation: page3SlideOutToTop 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }
      .page3-text-box-left-item:hover {
        transform: scale(1.05);
        opacity: 1 !important;
        animation-play-state: paused;
        box-shadow:
          0 6px 12px rgba(0, 0, 0, 0.18),
          0 20px 48px rgba(0, 0, 0, 0.3),
          0 40px 80px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
      }
      .page3-text-box-left-item:hover p {
        transform: scale(1.02);
      }
      .page3-text-box-left-item:first-child {
        left: -80px;
        top: 60px;
        width: 450px;
        animation-delay: 0.1s;
      }
      .page3-text-box-left-item:nth-child(2) {
        left: 420px;
        width: 400px;
        animation-delay: 0.2s;
      }
      .page3-text-box-right {
        position: absolute;
        right: 100px;
        width: calc(33.333% - 15px);
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-height: calc(100vh - 100px);
        height: fit-content;
      }
      .page3-text-box-right-item {
        width: 100%;
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.55);
        backdrop-filter: none;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow:
          0 3px 6px rgba(0, 0, 0, 0.16),
          0 12px 32px rgba(0, 0, 0, 0.24),
          0 32px 64px rgba(0, 0, 0, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
        overflow-y: auto;
        height: fit-content;
        transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
        transform-origin: center;
        opacity: 0;
        animation: page3SlideInFromBottom 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards,
                   page3BoxFloat 5.5s ease-in-out 0.9s infinite;
      }
      .page-frame.page-3.page3-exit-to-1 .page3-text-box-right-item,
      .page-frame.page-3.page3-exit-to-2 .page3-text-box-right-item {
        animation: page3SlideOutToTop 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }
      .page3-text-box-right-item:hover {
        transform: scale(1.05);
        opacity: 1 !important;
        animation-play-state: paused;
        box-shadow:
          0 6px 12px rgba(0, 0, 0, 0.18),
          0 20px 48px rgba(0, 0, 0, 0.3),
          0 40px 80px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
      }
      .page3-text-box-right-item:hover p {
        transform: scale(1.02);
      }
      .page3-text-box-right-item:first-child {
        width: calc(100% - 120px);
        animation-delay: 0.3s;
      }
      .page3-text-box-right-item:nth-child(2) {
        animation-delay: 0.4s;
      }
      .page3-text-box p {
        margin-bottom: 0;
        text-indent: 2em;
        white-space: pre-wrap; /* 保留空格，允许自动换行 */
        transition: transform 0.3s ease;
        transform-origin: center;
      }
      .page3-conclusion-container {
        position: absolute;
        left: 485px;
        top: 290px;
        width: 400px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 16px;
        pointer-events: auto;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        transform-origin: right center;
        will-change: transform;
        opacity: 0;
        animation: page3SlideInFromBottomConclusion 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
      }
      @keyframes page3SlideInFromBottomConclusion {
        from {
          opacity: 0;
          transform: translateY(50px);
        }
        to {
          opacity: 0.8;
          transform: translateY(0);
        }
      }
      .page-frame.page-3.page3-exit-to-1 .page3-conclusion-container,
      .page-frame.page-3.page3-exit-to-2 .page3-conclusion-container {
        animation: page3SlideOutToTop 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }
      .page3-conclusion-container:hover {
        transform: scale(1.08);
      }
      .page3-conclusion-text {
        writing-mode: vertical-rl;
        text-orientation: upright;
        font-size: 34px;
        font-weight: bold;
        color: #1a1a1a;
        font-family: "STZhongsong", "华文中宋", serif;
        line-height: 1.2;
        letter-spacing: 0.1em;
      }
      .page3-conclusion-label {
        font-size: 28px;
        transform: translateY(30px);
      }
      .page3-text-box-right p:last-child {
        margin-bottom: 0;
      }
      /* iframe样式：添加顶部空白 */
      .page-content iframe {
        width: 100% !important;
        height: calc(100% - 50px) !important;
        object-fit: contain;
        display: block;
        margin-top: 50px !important;
        box-sizing: border-box;
      }
      /* 为包含iframe的页面容器调整对齐方式 */
      .page-content:has(iframe) {
        align-items: flex-start !important;
        justify-content: center;
      }
      /* 针对特定页面内容容器的iframe */
      #page1Content iframe,
      #page3Content iframe {
        width: 100% !important;
        height: calc(100% - 50px) !important;
        margin-top: 50px !important;
      }
      /* 页面提示文字 */
      .page-content::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: rgba(255, 255, 255, 0.5);
        font-size: 24px;
        font-family: "STZhongsong", "华文中宋", serif;
        pointer-events: none;
        z-index: 0;
        text-align: center;
      }
      /* 第一页背景层：用于毛玻璃效果，与全局背景一致 */
      .page-1 .page-content::before {
        content: '';
        position: fixed;
        top: -10%;
        left: -10%;
        width: 120%;
        height: 120%;
        background-image: url('img_video_/背景图片.webp');
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        opacity: 0.5;
        pointer-events: none;
        z-index: 0;
        transform: translate3d(var(--bg-offset-x, 0), var(--bg-offset-y, 0), 0);
        transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1);
      }
      .page-2 .page-content::before {
        content: 'AE视频框架\A等待加载视频';
        white-space: pre;
      }
      .page-3 .page-content::before {
        content: '';
        display: none;
      }
      /* 当有内容时隐藏提示文字（但第一页的背景层不受影响） */
      .page-2 .page-content:has(video)::before,
      .page-2 .page-content:has(iframe)::before,
      .page-2 .page-content:has(canvas)::before,
      .page-2 .page-content:has(.custom-content)::before,
      .page-3 .page-content:has(video)::before,
      .page-3 .page-content:has(iframe)::before,
      .page-3 .page-content:has(canvas)::before,
      .page-3 .page-content:has(.custom-content)::before {
        display: none;
      }
      /* 第一页整体作为摄像机视口：只在第一页中生效 */
      #page1 {
        overflow: hidden;
        --page1-ui-shift-x: 66px;
      }
      /* 第一页大画布容器：比视口大 5%（105%），平移范围约 ±2.5% */
      #page1World.page1-world {
        position: absolute;
        left: -2.5%;
        top: -2.5%;
        width: 105%;
        height: 105%;
        transform-origin: center center;
        /* 镜头运动：更干脆、惯性更小 */
        transition: transform 0.45s cubic-bezier(0.2, 0, 0, 1);
        /* 确保世界（包括五个矩形）整体在毛玻璃之上 */
        z-index: 5;
      }
      /* 第一页远景框三层：与画布同尺寸、在画布后方，每层独立视差（远小动少、近大动多） */
      #page1DepthBoxesFar.page1-depth-boxes,
      #page1DepthBoxesMid.page1-depth-boxes,
      #page1DepthBoxesNear.page1-depth-boxes {
        position: absolute;
        left: -2.5%;
        top: -2.5%;
        width: 105%;
        height: 105%;
        z-index: 3;
        pointer-events: none;
        transform-origin: center center;
        transition: transform 0.45s cubic-bezier(0.2, 0, 0, 1);
      }
      .page1-depth-boxes-inner {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }
      /* 无操作时远景框流动：幅度更明显，多段关键帧丝滑 */
      @keyframes depthFlowFar {
        0%, 100% { transform: translate(0, 0); }
        20%      { transform: translate(22px, 14px); }
        40%      { transform: translate(-14px, 24px); }
        60%      { transform: translate(-18px, -10px); }
        80%      { transform: translate(12px, -22px); }
      }
      @keyframes depthFlowMid {
        0%, 100% { transform: translate(0, 0); }
        20%      { transform: translate(32px, 18px); }
        40%      { transform: translate(-20px, 30px); }
        60%      { transform: translate(-24px, -14px); }
        80%      { transform: translate(18px, -28px); }
      }
      @keyframes depthFlowNear {
        0%, 100% { transform: translate(0, 0); }
        20%      { transform: translate(42px, 24px); }
        40%      { transform: translate(-28px, 38px); }
        60%      { transform: translate(-32px, -18px); }
        80%      { transform: translate(24px, -36px); }
      }
      .page1-depth-flow--far  { animation: depthFlowFar  26s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
      .page1-depth-flow--mid  { animation: depthFlowMid  20s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
      .page1-depth-flow--near { animation: depthFlowNear 16s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
      .page1-depth-box {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 0;
        /* 远景框也加多层阴影，立体感稍强一点 */
        box-shadow:
          0 3px 8px rgba(0, 0, 0, 0.24),
          0 14px 36px rgba(0, 0, 0, 0.32),
          inset 0 1px 0 rgba(255, 255, 255, 0.18);
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0.6;
      }
      /* 远6 + 中6 + 近4：左下角加一、正中间上方加一，右下两框左右错开 */
      .page1-depth-box--far:nth-child(1) { top: 4%;   left: -12%; width: 370px; height: 290px; }
      .page1-depth-box--far:nth-child(2) { top: 6%;   left: 108%; width: 330px; height: 260px; }
      .page1-depth-box--far:nth-child(3) { top: 40%;  left: -10%; width: 390px; height: 310px; }
      .page1-depth-box--far:nth-child(4) { top: 42%;  left: 22%;  width: 350px; height: 276px; }
      .page1-depth-box--far:nth-child(5) { top: 44%;  left: 68%;  width: 310px; height: 330px; }
      .page1-depth-box--far:nth-child(6) { top: 96%;  left: -6%;  width: 376px; height: 284px; }
      .page1-depth-box--mid:nth-child(1) { top: -8%;  left: 20%;  width: 504px; height: 396px; }
      .page1-depth-box--mid:nth-child(2) { top: -6%;  left: 85%;  width: 556px; height: 436px; }
      .page1-depth-box--mid:nth-child(3) { top: 14%;  left: 50%;  width: 516px; height: 396px; }
      .page1-depth-box--mid:nth-child(4) { top: 52%;  left: 55%;  width: 544px; height: 424px; }
      .page1-depth-box--mid:nth-child(5) { top: 98%;  left: 18%;  width: 536px; height: 416px; }
      .page1-depth-box--mid:nth-child(6) { top: 102%; left: 65%;  width: 530px; height: 410px; }
      .page1-depth-box--near:nth-child(1) { top: 18%;  left: 8%;   width: 696px; height: 536px; }
      .page1-depth-box--near:nth-child(2) { top: 58%;  left: 98%;  width: 630px; height: 484px; }
      .page1-depth-box--near:nth-child(3) { top: 106%; left: 25%;  width: 664px; height: 510px; }
      .page1-depth-box--near:nth-child(4) { top: 108%; left: 96%;  width: 716px; height: 556px; }
      /* 第一页世界内部不再单独增加背景层，继续使用全局 body 背景 */
      /* 第一页毛玻璃竖向区域：基于第二页分隔线位置 */
      .page1-glass-strip {
        position: absolute;
        top: 0;
        height: 100%;
        pointer-events: none;
        /* 放在世界背景之上，但整体低于 page1World（z-index:5）里的矩形（z-index:10） */
        z-index: 2;
        /* 带有 #9aa7b1 色调的毛玻璃渐变（与背景底色对调后）
           ▶ 透明度统一调到 0.4 左右，既有存在感又不会“药效过猛” */
        background: linear-gradient(
          to bottom,
        rgba(154, 167, 177, 0.40) 0%,
        rgba(154, 167, 177, 0.40) 35%,
        rgba(154, 167, 177, 0.40) 65%,
        rgba(154, 167, 177, 0.40) 100%
        );
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
      }
      /* 左侧毛玻璃：从屏幕左边缘延伸到与第二页左分隔线对齐的位置（6.7% - 5px） */
      .page1-glass-strip.glass-left {
        left: 0;
        width: calc(6.7% - 5px);
      }
      /* 右侧毛玻璃：从与第二页右分隔线对齐的位置（93.3%）延伸到屏幕右边缘 */
      .page1-glass-strip.glass-right {
        left: calc(93.3%);
        width: calc(100% - 93.3%);
      }
      /* 第一页顶部艺术字 */
      .page1-hero-art {
        position: absolute;
        top: 56px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 32px;
        pointer-events: none;
        z-index: 12;
        transform: translateX(var(--page1-ui-shift-x));
      }
      /* 第一页顶部标题小框（透明背景，只显示文字） */
      .page1-hero-title-badge {
        position: absolute;
        top: -60px;
        left: calc(47% + 40px + var(--page1-ui-shift-x));
        transform: translateX(-50%);
        padding: 4px 14px;
        background-color: transparent;
        border: none;
        pointer-events: none;
        z-index: 13;
        text-align: left;
      }
      .page1-hero-title-text {
        letter-spacing: 0.3em;
        color: #222222;
        white-space: nowrap;
      }
      .page1-hero-title-text--zh {
        font-size: 40px;
      }
      .page1-hero-title-text--en {
        font-size: 30px; /* 比中文小两号 */
        /* 使用较窄的西文字体，让英文更紧凑一些 */
        font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
        letter-spacing: 0.18em;
      }
      .page1-hero-art__img {
        height: 220px;
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28));
        opacity: 0.95;
      }
      .page1-hero-art__img.yu-art {
        transform: translateX(7px); /* 左移 5px（原 12px -> 7px） */
      }
      .page1-hero-art__img.yi-art {
        transform: translateX(-7px); /* 右移 5px（原 -12px -> -7px） */
      }
      /* 第一页：元素从左向右依次滑入（不改中间引语自身的动画） */
      .page-frame.page-1.active .page1-hero-art,
      .page-frame.page-1.active .page1-rectangle.rectangle-2,
      .page-frame.page-1.active .page1-rectangle.rectangle-3,
      .page-frame.page-1.active .page1-rectangle.rectangle-4,
      .page-frame.page-1.active .page1-rectangle.rectangle-5 {
        animation: page1SlideInFromLeft 0.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
      }
      .page-frame.page-1.active .page1-hero-art {
        animation-delay: 0ms;
      }
      .page-frame.page-1.active .page1-rectangle.rectangle-2 {
        animation-delay: 80ms;
      }
      .page-frame.page-1.active .page1-rectangle.rectangle-4 {
        animation-delay: 200ms;
      }
      .page-frame.page-1.active .page1-rectangle.rectangle-3 {
        animation-delay: 400ms;
      }
      .page-frame.page-1.active .page1-rectangle.rectangle-5 {
        animation-delay: 600ms;
      }
      @keyframes page1SlideInFromLeft {
        from {
          opacity: 0;
          translate: -40px 0;
        }
        to {
          opacity: 1;
          translate: 0 0;
        }
      }
      @media (max-height: 900px) {
        .page1-hero-art__img {
          height: 176px;
        }
      }
      /* 第一页矩形样式 */
      .page1-rectangle {
        width: 450px;
        height: 350px;
        background-color: rgba(255, 255, 255, 0.3);
        border: none;
        border-radius: 0;
        position: absolute;
        top: 50%;
        left: calc(50% + var(--page1-ui-shift-x));
        transform: translate(-50%, -50%);
        z-index: 10;
        /* 多层阴影增强立体感，让框明显浮在背景图案之上 */
        box-shadow:
          0 3px 6px rgba(0, 0, 0, 0.16),
          0 12px 32px rgba(0, 0, 0, 0.24),
          0 32px 64px rgba(0, 0, 0, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        opacity: 0;
        animation: rectangleFadeIn 0.6s ease-out forwards;
        /* 卡片效果 */
        display: flex;
        align-items: flex-end;
        text-align: center;
        color: #f5f5f5;
        overflow: hidden;
      }
      /* 矩形背景图 */
      .page1-rectangle::before {
        content: "";
        width: 100%;
        height: 110%;
        position: absolute;
        top: 0;
        left: 0;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
        z-index: 0;
      }
      /* 周边四个矩形的背景图 */
      .page1-rectangle.rectangle-2::before {
        /* 高山 */
        background-image: url("img_video_/高山.webp");
      }
      .page1-rectangle.rectangle-3::before {
        /* 森林，这里使用山地意向图 */
        background-image: url("img_video_/山地.webp");
      }
      .page1-rectangle.rectangle-4::before {
        /* 湿地 */
        background-image: url("img_video_/湿地.webp");
      }
      .page1-rectangle.rectangle-5::before {
        /* 城乡与农田 */
        background-image: url("img_video_/田野.webp");
      }
      /* 正中矩形（引语）的背景图 */
      .page1-rectangle:not(.rectangle-2):not(.rectangle-3):not(.rectangle-4):not(.rectangle-5)::before {
        background-image: url("img_video_/t.webp");
      }
      /* 矩形遮罩 */
      .page1-rectangle::after {
        content: "";
        display: block;
        width: 100%;
        height: 200%;
        background: transparent;
        position: absolute;
        left: 0;
        top: 0;
        transform: translateY(0);
        transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1), background 0.3s ease;
        z-index: 1;
      }
      /* 矩形淡入动画 */
      @keyframes rectangleFadeIn {
        from {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.8);
        }
        to {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
      }
      /* 正中的矩形 - 与四角框保持适度间距 */
      .page1-rectangle:not(.rectangle-2):not(.rectangle-3):not(.rectangle-4):not(.rectangle-5) {
        background-color: rgba(255, 255, 255, 0.6);
        transform: translate(calc(-50% - 180px), calc(-50% + 100px));
        animation: rectangleFadeInCenter 0.6s ease-out forwards;
        width: 680px;
        height: 560px;
      }
      @keyframes rectangleFadeInCenter {
        from {
          opacity: 0;
          transform: translate(calc(-50% - 180px), calc(-50% + 100px)) scale(0.8);
        }
        to {
          opacity: 1;
          transform: translate(calc(-50% - 180px), calc(-50% + 100px)) scale(1);
        }
      }
      /* 右下角矩形内容样式调整 - 防止文字超出 */
      .page1-rectangle.rectangle-5 .page1-content {
        width: 95%;
        padding: 12px 8px;
      }
      .page1-rectangle.rectangle-5 .page1-content h2 {
        font-size: 24px;
        font-weight: 500;
      }
      .page1-rectangle.rectangle-5 .page1-content p {
        font-size: 24px;
        font-weight: 500;
        width: 95%;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
      /* 第一页内容样式 */
      .page1-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
        padding: 16px 8px;
        transform: translateY(76%);
        transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
        box-sizing: border-box;
      }
      .page1-content h2 {
        font-size: 24px;
        font-weight: 500;
        font-family: "STZhongsong", "华文中宋", serif;
        color: #f5f5f5;
        margin: 0;
      }
      .page1-rectangle:not(.rectangle-2):not(.rectangle-3):not(.rectangle-4):not(.rectangle-5) .page1-content h2 {
        font-size: 40px;
      }
      .page1-content p {
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 1px;
        width: 90%;
        line-height: 1.8;
        margin-top: 15px;
        text-align: justify;
        font-family: "STZhongsong", "华文中宋", serif;
        color: #f5f5f5;
      }
      /* 内容中除了h2的其他元素初始隐藏 */
      .page1-content p {
        opacity: 0;
        transform: translateY(20px);
        transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1);
      }
      /* 第二个矩形 - 左上角 */
      .page1-rectangle.rectangle-2 {
        top: 12%;
        left: calc(12% + var(--page1-ui-shift-x));
        width: 580px;
        height: 460px;
        transform: translate(calc(-50% + 125px), calc(-50% - 72px));
        opacity: 0;
        animation: rectangleFadeInSimple 0.6s ease-out 0.15s forwards;
      }
      @keyframes rectangleFadeIn2 {
        from {
          opacity: 0;
          transform: translate(calc(-50% - 52.5px), calc(-50% - 60px)) scale(0.8);
        }
        to {
          opacity: 1;
          transform: translate(calc(-50% - 52.5px), calc(-50% - 60px)) scale(1);
        }
      }
      /* 第三个矩形 - 右上角 */
      .page1-rectangle.rectangle-3 {
        top: 21%;
        left: calc(78% + var(--page1-ui-shift-x));
        width: 520px;
        height: 420px;
        transform: translate(-50%, -50%);
        animation: rectangleFadeIn 0.6s ease-out 0.2s forwards;
      }
      /* 第四个矩形 - 左下角（湿地，稍加大以容纳文字） */
      .page1-rectangle.rectangle-4 {
        top: 86%;
        left: calc(10% + var(--page1-ui-shift-x));
        width: 600px;
        height: 480px;
        transform: translate(calc(-50% - 132px), calc(-50% - 152px));
        opacity: 0;
        animation: rectangleFadeInSimple 0.6s ease-out 0.25s forwards;
      }

      /* 左上与左下矩形的简单淡入动画：从无到有出现，但不改变它们的最终位置 */
      @keyframes rectangleFadeInSimple {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      /* 第五个矩形 - 右下角 */
      .page1-rectangle.rectangle-5 {
        top: 78%;
        left: calc(80% + var(--page1-ui-shift-x));
        transform: translate(-50%, -50%) scale(1.0);
        width: 600px;
        height: 480px;
        animation: rectangleFadeIn5 0.6s ease-out 0.3s forwards;
      }
      @keyframes rectangleFadeIn5 {
        from {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.0);
        }
        to {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.2);
        }
      }
      /* 矩形悬停效果 - 向中心移动（仅在未查看全部模式下生效） */
      #page1:not(.view-all-mode) .page1-rectangle:hover {
        background-color: rgba(255, 255, 255, 0.5);
        animation-play-state: paused;
        box-shadow:
          0 6px 12px rgba(0, 0, 0, 0.18),
          0 20px 48px rgba(0, 0, 0, 0.3),
          0 40px 80px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
        align-items: center;
      }
      /* 悬停时背景图上移（未查看全部模式） */
      #page1:not(.view-all-mode) .page1-rectangle:hover::before {
        transform: translateY(-5%);
      }
      /* 悬停时遮罩上移并显示渐变（未查看全部模式） */
      #page1:not(.view-all-mode) .page1-rectangle:hover::after {
        transform: translateY(-50%);
        background: linear-gradient(to bottom,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.25) 55%,
          rgba(0, 0, 0, 0.8) 100%);
      }
      /* 查看全部模式下：与悬停时相同的最终视觉状态 */
      .page1-rectangle.show-all-mode {
        background-color: rgba(255, 255, 255, 0.5);
        animation-play-state: paused;
        box-shadow:
          0 6px 12px rgba(0, 0, 0, 0.18),
          0 20px 48px rgba(0, 0, 0, 0.3),
          0 40px 80px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
        align-items: center;
      }
      .page1-rectangle.show-all-mode::before {
        transform: translateY(-5%);
      }
      .page1-rectangle.show-all-mode::after {
        transform: translateY(-50%);
        background: linear-gradient(to bottom,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.25) 55%,
          rgba(0, 0, 0, 0.8) 100%);
      }
      /* 悬停时内容上移（未查看全部模式） */
      #page1:not(.view-all-mode) .page1-rectangle:hover .page1-content {
        transform: translateY(0);
      }
      /* 正中“引语”矩形：保持与 hover / camera-focus 完全一致的最终态（不依赖 hover） */
      #page1:not(.view-all-mode) .page1-rectangle:not(.rectangle-2):not(.rectangle-3):not(.rectangle-4):not(.rectangle-5) {
        background-color: rgba(255, 255, 255, 0.5);
        /* 注意：不能暂停入场动画，否则会停在 opacity:0 的第一帧导致“看不见” */
        opacity: 1;
        box-shadow:
          0 6px 12px rgba(0, 0, 0, 0.18),
          0 20px 48px rgba(0, 0, 0, 0.3),
          0 40px 80px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
        align-items: center;
      }
      #page1:not(.view-all-mode) .page1-rectangle:not(.rectangle-2):not(.rectangle-3):not(.rectangle-4):not(.rectangle-5)::before {
        transform: translateY(-5%);
      }
      #page1:not(.view-all-mode) .page1-rectangle:not(.rectangle-2):not(.rectangle-3):not(.rectangle-4):not(.rectangle-5)::after {
        transform: translateY(-50%);
        background: linear-gradient(to bottom,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.25) 55%,
          rgba(0, 0, 0, 0.8) 100%);
      }
      #page1:not(.view-all-mode) .page1-rectangle:not(.rectangle-2):not(.rectangle-3):not(.rectangle-4):not(.rectangle-5) .page1-content {
        transform: translateY(0);
      }
      #page1:not(.view-all-mode) .page1-rectangle:not(.rectangle-2):not(.rectangle-3):not(.rectangle-4):not(.rectangle-5) .page1-content p {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.1s;
      }
      /* 悬停 / 查看全部模式下显示描述文字为最终状态 */
      #page1:not(.view-all-mode) .page1-rectangle:hover .page1-content p,
      .page1-rectangle.show-all-mode .page1-content p {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.1s;
      }

      /* 第一页展区块底部「进入展区」按钮：大白框 + 悬停时内侧小蓝框 + 点击深蓝（与底部「查看全部」一致） */
      .page1-region-btn {
        position: relative;
        margin-top: 14px;
        padding: 7px;
        font: 500 1.35rem 'STZhongsong', '华文中宋', serif;
        color: rgb(70, 100, 180);
        background: #f5f5f5;
        border: none;
        border-radius: 0;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
        transition: opacity 0.4s ease, transform 0.4s ease;
        flex-shrink: 0;
        align-self: center;
        overflow: visible;
      }
      /* 内侧小蓝框：比大白框小一圈，默认隐藏 */
      .page1-region-btn::before {
        content: '';
        position: absolute;
        inset: 10px;
        background-color: rgb(170, 190, 255);
        border-radius: 0;
        opacity: 0;
        z-index: 0;
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05);
      }
      .page1-region-btn span {
        position: relative;
        z-index: 1;
        display: inline-block;
        padding: 10.5px 20px;
      }
      /* 悬停：显示小蓝框 */
      .page1-rectangle .page1-content .page1-region-btn:hover::before {
        opacity: 1;
      }
      /* 点击：小蓝框变深蓝 */
      .page1-rectangle .page1-content .page1-region-btn:active::before {
        background-color: rgb(60, 85, 160);
      }
      #page1:not(.view-all-mode) .page1-rectangle:hover .page1-content .page1-region-btn,
      .page1-rectangle.show-all-mode .page1-content .page1-region-btn,
      #page1:not(.view-all-mode) .page1-rectangle.camera-focus .page1-content .page1-region-btn {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        transition-delay: 0.15s;
      }

      /* 摄像机聚焦锁定态：等同于 hover 的最终态（避免镜头移动导致 hover 掉了又缩回去） */
      #page1:not(.view-all-mode) .page1-rectangle.camera-focus {
        background-color: rgba(255, 255, 255, 0.5);
        animation-play-state: paused;
        box-shadow:
          0 6px 12px rgba(0, 0, 0, 0.18),
          0 20px 48px rgba(0, 0, 0, 0.3),
          0 40px 80px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
        align-items: center;
      }
      #page1:not(.view-all-mode) .page1-rectangle.camera-focus::before {
        transform: translateY(-5%);
      }
      #page1:not(.view-all-mode) .page1-rectangle.camera-focus::after {
        transform: translateY(-50%);
        background: linear-gradient(to bottom,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.25) 55%,
          rgba(0, 0, 0, 0.8) 100%);
      }
      #page1:not(.view-all-mode) .page1-rectangle.camera-focus .page1-content {
        transform: translateY(0);
      }
      #page1:not(.view-all-mode) .page1-rectangle.camera-focus .page1-content p {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.1s;
      }
      /* 矩形悬停效果 - 只保留背景色和阴影变化，不移动不放大 */
      /* 页面导航控制器（与查看全部、蓝色盖板整体向左平移 50px） */
      .page-navigation {
        position: fixed;
        bottom: auto;
        left: auto;
        top: auto;
        transform: none;
        z-index: 3000;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        padding: 15px 30px;
        border-radius: 50px;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
      }
      .page-navigation.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      /* 第一页底部数字导航的蓝色背景条（整体向左平移 50px，与导航栏同步） */
      .page-bottom-nav-highlight {
        position: fixed;
        bottom: auto;
        left: auto;
        top: auto;
        transform: none;
        width: 280px;              /* 左右合计增加 80px，使蓝色条更宽一点 */
        height: 63px;              /* 在 83px 基础上上下各减 10px，总共减 20px */
        /* 使用查看全部按钮同款蓝色（nav-bar 滑块色），透明度 80% */
        background-color: rgba(170, 190, 255, 0.8);
        border-radius: 0;          /* 纯矩形，无圆角 */
        z-index: 2999;             /* 略低于导航栏 3000，作为背景 */
        display: block;            /* 始终在文档中，只通过透明度控制显隐 */
        opacity: 0;
        pointer-events: none;      /* 不影响原有交互 */
        transition: opacity 0.5s ease;  /* 渐入渐出效果 */
      }

      /* 仅在第一页激活时显示底部背景条（排除第三页的复制版） */
      body.page-1-active .page-bottom-nav-highlight:not(.page-bottom-nav-highlight-page3) {
        display: block;
        opacity: 1;                /* 进入第一页时渐入，离开时渐出 */
      }

      /* 第三页底部数字导航的浅蓝背景条（同样左移 50px 与整体同步） */
      .page-bottom-nav-highlight-page3 {
        left: auto;
      }
      body.page-3-active .page-bottom-nav-highlight-page3 {
        display: block;
        opacity: 1;
      }
      /* 子页面标题显示 */
      .sub-page-title {
        position: fixed;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3000;
        color: rgba(255, 255, 255, 0.95);
        font-size: 26px;
        font-weight: 600;
        font-family: "STZhongsong", "华文中宋", serif;
        text-align: center;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, left 0.4s ease, transform 0.4s ease;
        pointer-events: none;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        letter-spacing: 2px;
      }
      .sub-page-title.show {
        opacity: 1;
        visibility: visible;
      }
      .sub-page-title.shifted-left {
        left: 16.666667%;
        transform: translateX(-50%);
      }
      .sub-page-title.shifted-right {
        left: 83.333333%;
        transform: translateX(-50%);
      }
      .page-numbers-container {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 60px;
        width: 320px;
      }
      .page-number {
        position: absolute;
        left: 50%;
        top: 50%;
        color: rgba(255, 255, 255, 0.6);
        font-size: 24px;
        font-weight: 500;
        font-family: "STZhongsong", "华文中宋", serif;
        -webkit-user-select: none;
        user-select: none;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        z-index: 2;
        transform: translate(-50%, -50%) scale(0.7);
      }
      .page-number.active {
        /* 保持与未激活页面相同的缩小尺寸，只提升透明度为 100% 以突出当前页 */
        color: #ffffff;
        font-size: 24px;
        font-weight: 500;
        z-index: 3;
      }
      /* 数字位置由 JavaScript 动态设置 */
      /* 连接线 */
      .page-number::after {
        content: '';
        position: absolute;
        width: 80px;
        height: 2px;
        background: rgba(255, 255, 255, 0.8);
        left: 50%;
        top: 50%;
        transform: translateY(-50%);
        transform-origin: left center;
        transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .page-number:not(.active)::after {
        transform: translateY(-50%) scaleX(calc(1 / 0.7));
      }
      .page-number:last-child::after {
        display: none;
      }
      .page-number.active::after {
        opacity: 1;
      }
      .page-number:not(.active)::after {
        opacity: 0.5;
      }
      /* 交互点容器 */
      .interactive-points-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 10;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: opacity;
      }
      /* 第二页返回第一页转场：交互点按展区批次从左到右淡出 */
      .page-2.page2-exit-to-page1 .interactive-points-container {
        opacity: 1;
        visibility: visible;
      }
      /* 展区内详细点按展区批次淡出（已有的数据标记） */
      .page-2.page2-exit-to-page1 .interactive-point[data-region1-point] {
        animation: page2PointFadeOut 0.4s forwards 0s;
      }
      .page-2.page2-exit-to-page1 .interactive-point[data-region2-point] {
        animation: page2PointFadeOut 0.4s forwards 0.15s;
      }
      .page-2.page2-exit-to-page1 .interactive-point[data-region3-point] {
        animation: page2PointFadeOut 0.4s forwards 0.3s;
      }
      .page-2.page2-exit-to-page1 .interactive-point[data-region4-point] {
        animation: page2PointFadeOut 0.4s forwards 0.45s;
      }
      /* 主页上的四个大交互点：按 1→4 顺序依次淡出 */
      .page-2.page2-exit-to-page1 .interactive-point[data-home-point="1"] {
        animation: page2PointFadeOut 0.4s forwards 0s;
      }
      .page-2.page2-exit-to-page1 .interactive-point[data-home-point="2"] {
        animation: page2PointFadeOut 0.4s forwards 0.15s;
      }
      .page-2.page2-exit-to-page1 .interactive-point[data-home-point="3"] {
        animation: page2PointFadeOut 0.4s forwards 0.3s;
      }
      .page-2.page2-exit-to-page1 .interactive-point[data-home-point="4"] {
        animation: page2PointFadeOut 0.4s forwards 0.45s;
      }

      /* 第二页跳到第三页时的转场：中间四个区域从右到左依次消失 */
      .page-2.page2-exit-to-page3 .page-2-region {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
      }
      .page-2.page2-exit-to-page3 .page-2-region.region-4 {
        animation: page2RegionFadeOut 0.4s forwards 0s;
      }
      .page-2.page2-exit-to-page3 .page-2-region.region-3 {
        animation: page2RegionFadeOut 0.4s forwards 0.15s;
      }
      .page-2.page2-exit-to-page3 .page-2-region.region-2 {
        animation: page2RegionFadeOut 0.4s forwards 0.3s;
      }
      .page-2.page2-exit-to-page3 .page-2-region.region-1 {
        animation: page2RegionFadeOut 0.4s forwards 0.45s;
      }

      /* 第二页跳到第三页转场：竖线从右到左依次淡出（与区域节奏协调） */
      .page-2.page2-exit-to-page3 .page-2-divider-container {
        opacity: 1;
        visibility: visible;
      }
      .page-2.page2-exit-to-page3 .page-2-divider.divider-right {
        animation: page2DividerFadeOut 0.4s forwards 0s;
      }
      .page-2.page2-exit-to-page3 .page-2-divider.divider-3 {
        animation: page2DividerFadeOut 0.4s forwards 0.15s;
      }
      .page-2.page2-exit-to-page3 .page-2-divider.divider-2 {
        animation: page2DividerFadeOut 0.4s forwards 0.3s;
      }
      .page-2.page2-exit-to-page3 .page-2-divider.divider-1,
      .page-2.page2-exit-to-page3 .page-2-divider.divider-left {
        animation: page2DividerFadeOut 0.4s forwards 0.45s;
      }

      /* 第二页跳到第三页转场：交互点按展区批次从右到左淡出 */
      .page-2.page2-exit-to-page3 .interactive-points-container {
        opacity: 1;
        visibility: visible;
      }
      .page-2.page2-exit-to-page3 .interactive-point[data-region4-point] {
        animation: page2PointFadeOut 0.4s forwards 0s;
      }
      .page-2.page2-exit-to-page3 .interactive-point[data-region3-point] {
        animation: page2PointFadeOut 0.4s forwards 0.15s;
      }
      .page-2.page2-exit-to-page3 .interactive-point[data-region2-point] {
        animation: page2PointFadeOut 0.4s forwards 0.3s;
      }
      .page-2.page2-exit-to-page3 .interactive-point[data-region1-point] {
        animation: page2PointFadeOut 0.4s forwards 0.45s;
      }
      /* 主页上的四个大交互点：按 4→1 顺序依次淡出 */
      .page-2.page2-exit-to-page3 .interactive-point[data-home-point="4"] {
        animation: page2PointFadeOut 0.4s forwards 0s;
      }
      .page-2.page2-exit-to-page3 .interactive-point[data-home-point="3"] {
        animation: page2PointFadeOut 0.4s forwards 0.15s;
      }
      .page-2.page2-exit-to-page3 .interactive-point[data-home-point="2"] {
        animation: page2PointFadeOut 0.4s forwards 0.3s;
      }
      .page-2.page2-exit-to-page3 .interactive-point[data-home-point="1"] {
        animation: page2PointFadeOut 0.4s forwards 0.45s;
      }
      @keyframes page2PointFadeOut {
        from {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
        to {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.7);
        }
      }
      .interactive-points-container.hidden {
        opacity: 0;
        visibility: hidden;
      }
      .interactive-point {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        pointer-events: all;
        transform: translate3d(-50%, -50%, 0); /* 启用硬件加速 */
        transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease;
        z-index: 11;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6),
                    0 0 10px rgba(255, 255, 255, 0.4),
                    0 0 20px rgba(255, 255, 255, 0.2);
        will-change: transform, opacity, left, top;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
      }
      /* 白色小光圈效果 - 外圈 - 优化性能 */
      .interactive-point::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0); /* 启用硬件加速 */
        width: 50px;
        height: 50px;
        border: 2px solid rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        animation: pulse-ring 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        will-change: transform, opacity;
        backface-visibility: hidden;
      }
      /* 白色小光圈效果 - 中圈 - 优化性能 */
      .interactive-point::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0); /* 启用硬件加速 */
        width: 32px;
        height: 32px;
        border: 2px solid rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        animation: pulse-ring 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite 0.4s;
        will-change: transform, opacity;
        backface-visibility: hidden;
      }
      .interactive-point:hover {
        transform: translate(-50%, -50%) scale(1.3);
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9),
                    0 0 20px rgba(255, 255, 255, 0.7),
                    0 0 40px rgba(255, 255, 255, 0.5);
      }
      /* 脉冲动画 - 带渐入效果 - 优化性能 */
      @keyframes pulse-ring {
        0% {
          transform: translate(-50%, -50%) scale(0.85);
          opacity: 0;
        }
        15% {
          transform: translate(-50%, -50%) scale(0.9);
          opacity: 1;
        }
        50% {
          transform: translate(-50%, -50%) scale(1.3);
          opacity: 0.6;
        }
        100% {
          transform: translate(-50%, -50%) scale(1.8);
          opacity: 0;
        }
      }
      
      /* 优化：减少动画数量，只在可见时运行动画 */
      .interactive-points-container.hidden .interactive-point::before,
      .interactive-points-container.hidden .interactive-point::after {
        animation: none !important;
      }
      
      /* 第三页交互点样式 - 深绿色，更显眼 */
      #page3InteractivePointsContainer .interactive-point {
        width: 28px;
        height: 28px;
        background: rgba(13, 77, 13, 0.98);
        border: 2px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 0 4px rgba(13, 77, 13, 0.8),
                    0 0 0 6px rgba(255, 255, 255, 0.25),
                    0 0 16px rgba(13, 77, 13, 0.6),
                    0 0 32px rgba(13, 77, 13, 0.35),
                    0 4px 12px rgba(0, 0, 0, 0.35);
        z-index: 20 !important;
        pointer-events: all !important;
      }
      #page3InteractivePointsContainer .interactive-point::before {
        width: 56px;
        height: 56px;
        border: 2px solid rgba(13, 77, 13, 0.9);
        border-color: rgba(255, 255, 255, 0.35);
      }
      #page3InteractivePointsContainer .interactive-point::after {
        width: 40px;
        height: 40px;
        border: 2px solid rgba(13, 77, 13, 0.95);
        border-color: rgba(255, 255, 255, 0.45);
      }
      #page3InteractivePointsContainer .interactive-point:hover {
        transform: translate(-50%, -50%) scale(1.4);
        box-shadow: 0 0 0 6px rgba(13, 77, 13, 0.95),
                    0 0 0 8px rgba(255, 255, 255, 0.4),
                    0 0 24px rgba(13, 77, 13, 0.8),
                    0 0 48px rgba(13, 77, 13, 0.5),
                    0 6px 20px rgba(0, 0, 0, 0.4);
      }
      /* 第三页交互点文字样式 - 更醒目 */
      #page3InteractivePointsContainer .interactive-point .interactive-point-bird-list {
        color: #0d4d0d;
        font-size: 1.25rem;
        font-weight: 600;
        letter-spacing: 6px;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5),
                    0 2px 6px rgba(0, 0, 0, 0.2);
      }
      /* 飞行的鸟和翻翻乐交互点的transform由JS动态控制，包含飘动效果和基础偏移 */
      /* 交互点鸟类列表 */
      .interactive-point-bird-list {
        position: absolute;
        left: 50%;
        bottom: 100%;
        transform: translateX(-50%);
        margin-bottom: 20px;
        writing-mode: vertical-rl;
        text-orientation: upright;
        color: #ffffff;
        font-size: 1.1rem;
        font-weight: 500;
        letter-spacing: 8px;
        white-space: nowrap;
        pointer-events: none;
        z-index: 12;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
                     0 0 20px rgba(255, 255, 255, 0.5),
                     0 2px 4px rgba(0, 0, 0, 0.3);
        opacity: 0.95;
        line-height: 1.8;
      }
      
      /* 展区1-4：将交互点固定在导航栏上方，并列排放 - 合并通用样式 */
      .page-2.active[class*="sub-page-"] .interactive-point[data-region1-point],
      .page-2.active[class*="sub-page-"] .interactive-point[data-region2-point],
      .page-2.active[class*="sub-page-"] .interactive-point[data-region3-point],
      .page-2.active[class*="sub-page-"] .interactive-point[data-region4-point] {
        position: fixed !important;
        bottom: 190px !important;
        top: auto !important;
        transform: translateX(-50%) translateY(50%) !important;
        z-index: 3002 !important;
        transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.5s ease,
                    visibility 0.5s ease !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
      
      /* 展区1：4个交互点的具体位置 - 横向平均分布，以导航栏为中心 */
      /* 导航栏宽度500px，4个点平均分布，每个点间距约80px */
      .page-2.active.sub-page-1 .interactive-point[data-region1-point="1"] {
        left: calc(50% - 120px) !important;
      }
      .page-2.active.sub-page-1 .interactive-point[data-region1-point="2"] {
        left: calc(50% - 40px) !important;
      }
      .page-2.active.sub-page-1 .interactive-point[data-region1-point="3"] {
        left: calc(50% + 40px) !important;
      }
      .page-2.active.sub-page-1 .interactive-point[data-region1-point="4"] {
        left: calc(50% + 120px) !important;
      }
      
      /* 展区2：3个交互点的具体位置 - 横向平均分布 */
      .page-2.active.sub-page-2 .interactive-point[data-region2-point="5"] {
        left: calc(50% - 80px) !important;
      }
      .page-2.active.sub-page-2 .interactive-point[data-region2-point="6"] {
        left: calc(50%) !important;
      }
      .page-2.active.sub-page-2 .interactive-point[data-region2-point="7"] {
        left: calc(50% + 80px) !important;
      }
      
      /* 展区3：4个交互点的具体位置 - 横向平均分布 */
      .page-2.active.sub-page-3 .interactive-point[data-region3-point="8"] {
        left: calc(50% - 120px) !important;
      }
      .page-2.active.sub-page-3 .interactive-point[data-region3-point="9"] {
        left: calc(50% - 40px) !important;
      }
      .page-2.active.sub-page-3 .interactive-point[data-region3-point="10"] {
        left: calc(50% + 40px) !important;
      }
      .page-2.active.sub-page-3 .interactive-point[data-region3-point="11"] {
        left: calc(50% + 120px) !important;
      }
      
      /* 展区4：3个交互点的具体位置 - 横向平均分布 */
      .page-2.active.sub-page-4 .interactive-point[data-region4-point="12"] {
        left: calc(50% - 80px) !important;
      }
      .page-2.active.sub-page-4 .interactive-point[data-region4-point="13"] {
        left: calc(50%) !important;
      }
      .page-2.active.sub-page-4 .interactive-point[data-region4-point="14"] {
        left: calc(50% + 80px) !important;
      }
      
      /* 展区1-4：调整交互点标签位置（标签在交互点上方） - 合并通用样式 */
      .page-2.active[class*="sub-page-"] .interactive-point[data-region1-point] .interactive-point-bird-list,
      .page-2.active[class*="sub-page-"] .interactive-point[data-region2-point] .interactive-point-bird-list,
      .page-2.active[class*="sub-page-"] .interactive-point[data-region3-point] .interactive-point-bird-list,
      .page-2.active[class*="sub-page-"] .interactive-point[data-region4-point] .interactive-point-bird-list {
        bottom: 100%;
        margin-bottom: 15px;
      }
      
      /* 展区1：查看全部交互点 - 右下角入口 */
      .view-all-points {
        position: fixed;
        right: 490px;
        bottom: 98px;
        z-index: 4000;
        display: none;
      }

      /* 首页“查看全部”背景容器：用于烘托导航栏（始终在文档中，通过透明度控制显隐） */
      #viewAllPointsHome {
        position: fixed;
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
      }

      #viewAllPointsHome .view-all-points-bg {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        height: 42px; /* 与按钮的可点击区域保持等高 */
        background-color: rgba(0, 112, 255, 0.6); /* 蓝色，透明度 60% */
        border-radius: 4px;
        z-index: 1; /* 位于按钮下方 */
        pointer-events: none; /* 不影响原有交互 */
      }
      
      /* 只在对应展区时显示（由 JS 往 body 打标控制） */
      body.page-1-active #viewAllPointsHome {
        display: block;
        opacity: 1;           /* 进入第一页时渐入，离开时渐出 */
        pointer-events: auto; /* 只有在第一页时可点击 */
      }
      /* 仅首页（第一页）入口：位置由脚本跟随画布计算，避免改窗口大小时漂移 */
      body.page-1-active #viewAllPointsHome {
        right: auto;
        bottom: auto;
        /* 层级提升：确保盖在底部数字导航栏之上（导航栏 z-index: 3000） */
        z-index: 5000;
      }
      /* 展区1-4：查看全部交互点按钮显示 - 合并通用规则 */
      .page-2.active.sub-page-1 #viewAllPoints1,
      .page-2.active.sub-page-2 #viewAllPoints2,
      .page-2.active.sub-page-3 #viewAllPoints3,
      .page-2.active.sub-page-4 #viewAllPoints4 {
        display: block;
      }
      
      /* type6的交互点（18-21）向左80px、向上40px（原220px/560px → 140px/520px） - 在所有展区中都应用 */
      .page-2.active .interactive-point[data-type6-point] {
        transform: translate(140px, 520px) !important;
      }
      
      /* 严格按照 selection 的 nav-bar 格式 */
      .view-all-points .nav-bar {
        position: relative;
        border: none;
        border-radius: 0;
        display: flex;
        list-style: none;
        background: #f5f5f5;
        padding: 7px;
        margin: 0;
        width: fit-content;
        z-index: 5;
      }
      
      .view-all-points .nav-bar li span {
        position: relative;
        padding: 10.5px 35px;
        font: 500 1.2rem 'STZhongsong', 'STZhongsong', serif;
        border: none;
        outline: none;
        color: rgb(70, 100, 180);
        display: inline-block;
        text-decoration: none;
        z-index: 3;
        cursor: pointer;
      }

      /* 仅首页第一页“查看全部”按钮：适当收窄左右宽度 */
      #viewAllPointsHome .nav-bar li span {
        padding-left: 24px;
        padding-right: 24px;
      }
      
      .view-all-points .nav-bar .slide1,
      .view-all-points .nav-bar .slide2 {
        position: absolute;
        display: inline-block;
        height: 42px;
        border-radius: 0;
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05);
        top: 50%;
        transform: translateY(-50%);
      }
      
      .view-all-points .nav-bar .slide1 {
        background-color: rgb(170, 190, 255);
        z-index: 2;
      }
      
      .view-all-points .nav-bar .slide2 {
        opacity: 0;
        background-color: rgba(170, 190, 255, .5);
        z-index: 1;
      }
      
      .view-all-points .nav-bar .squeeze {
        transform: translateY(-50%) scale(0.9);
      }
      
      /* 交互点信息面板 */
      .interactive-point-info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 0.98);
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        max-width: 500px;
        max-height: 70vh;
        overflow: hidden;
        z-index: 20;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        transform: translate(-50%, -50%) scale(0.9);
        pointer-events: none;
      }
      .interactive-point-info.show {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%) scale(1);
        pointer-events: all;
      }
      .info-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 25px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
      }
      .info-panel-header h3 {
        margin: 0;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
      }
      .info-close-btn {
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: #fff;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 24px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        padding: 0;
      }
      .info-close-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
      }
      .info-panel-content {
        padding: 25px;
        color: #333;
        font-family: "STZhongsong", "华文中宋", serif;
        line-height: 1.6;
        max-height: calc(70vh - 80px);
        overflow-y: auto;
      }
      .info-panel-content h4 {
        margin: 0 0 15px 0;
        color: #4CAF50;
        font-size: 14px;
      }
      .info-panel-content p {
        margin: 0 0 15px 0;
        font-size: 12px;
        color: #666;
      }
      .info-panel-content p:last-child {
        margin-bottom: 0;
      }
      /* 侧边面板样式 */
      .side-panel-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 2000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        will-change: opacity;
        backface-visibility: hidden;
      }
      .side-panel-overlay.visible {
        opacity: 1;
        visibility: visible;
      }
      
      /* 左侧遮罩层上的图片容器 - 只在遮罩层可见时显示 */
      #leftPanelOverlay .overlay-images-container {
        position: absolute;
        top: 0;
        left: 40%; /* 从左侧面板结束的位置开始 */
        width: 60%; /* 占据右侧剩余空间 */
        height: 100%;
        display: none; /* 默认隐藏 */
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 40px;
        pointer-events: none; /* 不阻挡点击关闭 */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      /* 只在左侧遮罩层可见时显示图片容器 */
      #leftPanelOverlay.visible .overlay-images-container {
        display: flex;
        opacity: 1;
        visibility: visible;
      }
      
      #leftPanelOverlay .overlay-images-container img {
        max-width: 25%;
        max-height: 25%;
        width: auto;
        height: auto;
        object-fit: contain;
        opacity: 0.8;
        transition: opacity 0.3s ease;
      }
      
      #leftPanelOverlay .overlay-images-container img:hover {
        opacity: 1;
      }
      .side-panel {
        position: fixed;
        top: 0;
        right: 0;
        width: 66.666667%;
        height: 100%;
        background: #fff;
        z-index: 2001;
        transform: translate3d(100%, 0, 0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        will-change: transform;
        backface-visibility: hidden;
      }
      .side-panel.open {
        transform: translate3d(0, 0, 0);
      }
      .side-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 25px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        background: #fff;
        flex-shrink: 0;
      }
      .side-panel-header h3 {
        margin: 0;
        color: #333;
        font-size: 20px;
        font-weight: 600;
      }
      .side-panel-close-btn {
        background: rgba(0, 0, 0, 0.1);
        border: none;
        color: #333;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 24px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        padding: 0;
      }
      .side-panel-close-btn:hover {
        background: rgba(0, 0, 0, 0.2);
        transform: scale(1.1);
      }
      .side-panel-content {
        flex: 1;
        overflow: hidden;
        position: relative;
      }
      .side-panel-content iframe {
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
      }
      
      /* 左侧侧面板的iframe隐藏滚动条 */
      .left-side-panel .side-panel-content iframe {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
      }
      
      /* 左侧侧边面板样式（从左边滑出，占屏幕2/5） */
      .left-side-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 40%;
        height: 100%;
        background: #fff;
        z-index: 2001;
        transform: translate3d(-100%, 0, 0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        will-change: transform;
        backface-visibility: hidden;
      }
      .left-side-panel.open {
        transform: translate3d(0, 0, 0);
      }
      
      /* 第二页底部导航控制器 - 基础样式 */
      .page-2-sub-navigation {
        position: absolute;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3001;
        display: none !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        padding: 15px 30px;
        border-radius: 50px;
        overflow: visible;
        flex-direction: column;
        gap: 20px;
      }
      /* 展区切换导航（1、2、3、4）- 在非主页时显示 */
      .page-2.active:not(.is-home) #page2SubNavigation {
        display: flex !important;
      }
      /* 确保在主页时导航栏完全隐藏 */
      .page-2.active.is-home #page2SubNavigation {
        display: none !important;
      }
      /* 在展区1-4时，显示对应视频控制点，隐藏展区切换点 - 优化：使用属性选择器 */
      .page-2.active[class*="sub-page-"] #page2SubNavigation [data-sub-page] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }
      
      /* 在展区1-4时，显示对应视频控制点 */
      .page-2.active.sub-page-1 #page2SubNavigation .region1-video-point,
      .page-2.active.sub-page-2 #page2SubNavigation .region2-video-point,
      .page-2.active.sub-page-3 #page2SubNavigation .region3-video-point,
      .page-2.active.sub-page-4 #page2SubNavigation .region4-video-point {
        display: flex !important;
      }
      
      /* 在其他展区时，显示展区切换点，隐藏视频控制点 - 优化：使用通用选择器 */
      .page-2.active:not(.is-home):not(.sub-page-1):not(.sub-page-2):not(.sub-page-3):not(.sub-page-4) #page2SubNavigation [class*="video-point"] {
        display: none !important;
      }
      
      .page-2.active:not(.is-home):not(.sub-page-1):not(.sub-page-2):not(.sub-page-3):not(.sub-page-4) #page2SubNavigation [data-sub-page] {
        display: flex;
      }
      .page-2-sub-home-container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
      }
      .page-2-sub-home {
        color: rgba(255, 255, 255, 0.6);
        font-size: 20px;
        font-weight: 500;
        font-family: "STZhongsong", "华文中宋", serif;
        -webkit-user-select: none;
        user-select: none;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 8px 20px;
        border-radius: 4px;
      }
      .page-2-sub-home.active {
        color: #fff;
        font-size: 24px;
        font-weight: 700;
        background: rgba(255, 255, 255, 0.1);
      }
      .page-2-sub-numbers-container {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 60px;
        width: 600px;
        overflow: visible;
      }
      .page-2-sub-number {
        position: absolute;
        left: 50%;
        top: 50%;
        color: rgba(255, 255, 255, 0.6);
        font-size: 24px;
        font-weight: 500;
        font-family: "STZhongsong", "华文中宋", serif;
        -webkit-user-select: none;
        user-select: none;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 80px;
        height: 50px;
        padding: 0 10px;
        z-index: 2;
        transform: translate(-50%, -50%) scale(0.7);
      }
      .page-2-sub-number.active {
        color: #fff;
        font-size: 32px;
        font-weight: 700;
        z-index: 3;
      }
      /* 连接线 */
      .page-2-sub-number::after {
        content: '';
        position: absolute;
        width: 80px;
        height: 2px;
        background: rgba(255, 255, 255, 0.8);
        left: 50%;
        top: 50%;
        transform: translateY(-50%);
        transform-origin: left center;
        transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }
      /* 强制删除所有data-point-index="4"的横杠 - 最高优先级 */
      .page-2-sub-number[data-point-index="4"]::after,
      .page-2-sub-number[data-point-index="4"].active::after,
      .page-2-sub-number[data-point-index="4"]:not(.active)::after,
      .page-2-sub-number[data-point-index="4"]:last-child::after {
        content: '' !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
        pointer-events: none !important;
        transform: none !important;
        left: -9999px !important;
        top: -9999px !important;
      }
      .page-2-sub-number:not(.active):not([data-point-index="4"])::after {
        transform: translateY(-50%) scaleX(calc(1 / 0.7));
      }
      .page-2-sub-number:last-child:not([data-point-index="4"])::after {
        display: none;
      }
      .page-2-sub-number.active:not([data-point-index="4"])::after {
        opacity: 1;
      }
      .page-2-sub-number:not(.active):not([data-point-index="4"])::after {
        opacity: 0.5;
      }
      /* 强制删除每个展区视频控制点"4"后面的横杠 - 最高优先级规则 */
      #page2SubNavigation .page-2-sub-number.region1-video-point[data-point-index="4"]::after,
      #page2SubNavigation .page-2-sub-number.region2-video-point[data-point-index="4"]::after,
      #page2SubNavigation .page-2-sub-number.region3-video-point[data-point-index="4"]::after,
      #page2SubNavigation .page-2-sub-number.region4-video-point[data-point-index="4"]::after,
      #page2SubNavigation .page-2-sub-number.region1-video-point[data-point-index="4"].active::after,
      #page2SubNavigation .page-2-sub-number.region2-video-point[data-point-index="4"].active::after,
      #page2SubNavigation .page-2-sub-number.region3-video-point[data-point-index="4"].active::after,
      #page2SubNavigation .page-2-sub-number.region4-video-point[data-point-index="4"].active::after,
      .page-2-sub-number[data-point-index="4"].region1-video-point::after,
      .page-2-sub-number[data-point-index="4"].region2-video-point::after,
      .page-2-sub-number[data-point-index="4"].region3-video-point::after,
      .page-2-sub-number[data-point-index="4"].region4-video-point::after,
      .page-2-sub-number.region1-video-point[data-point-index="4"]::after,
      .page-2-sub-number.region2-video-point[data-point-index="4"]::after,
      .page-2-sub-number.region3-video-point[data-point-index="4"]::after,
      .page-2-sub-number.region4-video-point[data-point-index="4"]::after {
        content: '' !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
        pointer-events: none !important;
        transform: none !important;
        left: -9999px !important;
        top: -9999px !important;
      }
      /* 通过类名强制删除横杠 */
      .page-2-sub-number.no-after-line::after,
      .page-2-sub-number[data-point-index="4"].no-after-line::after,
      .no-after-line.page-2-sub-number::after {
        content: '' !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
        pointer-events: none !important;
        transform: none !important;
        left: -9999px !important;
        top: -9999px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
      }
      /* 视频控制按钮样式 */
      .video-control-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        color: rgba(255, 255, 255, 0.9);
        z-index: 10;
      }
      .video-control-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%) scale(1.1);
        color: #fff;
      }
      .video-control-btn:active {
        transform: translate(-50%, -50%) scale(0.95);
      }
      .video-control-btn svg {
        width: 28px;
        height: 28px;
      }
      .video-control-btn.hidden {
        display: none;
      }
      @media (max-width: 768px) {
        .side-panel {
        width: 100%;
          max-width: 100%;
        }
      }
      /* 左侧侧标签样式（原全局交互点） */
      /* 地形介绍（左侧 type6 面板）打开时隐藏左侧三个标签，避免误触 */
      body.left-panel-open #globalInteractivePoints {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: visibility 0.2s, opacity 0.2s;
      }
      
      .global-interactive-points {
        position: fixed;
        left: auto;
        top: auto;
        transform: none;
        z-index: 2500;
        display: flex;
        flex-direction: column;
        gap: 0;
        pointer-events: none;
        align-items: flex-start;
      }
      
      /* 侧标签项 - 左侧贴边，右侧尖角（箭头方向），大尺寸突出重要功能 */
      .global-interactive-point {
        position: relative;
        pointer-events: all !important;
        cursor: pointer !important;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-height: clamp(44px, 1.2vw + 36px, 76px);
        padding: clamp(10px, 0.55vw + 8px, 18px) clamp(18px, 1.1vw + 14px, 44px) clamp(10px, 0.55vw + 8px, 18px) clamp(14px, 0.75vw + 10px, 28px);
        margin-left: clamp(-16px, -0.6vw - 6px, -8px);
        border-radius: 0;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        clip-path: polygon(0 0, calc(100% - clamp(12px, 1.4vw, 18px)) 0, 100% 50%, calc(100% - clamp(12px, 1.4vw, 18px)) 100%, 0 100%);
        transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
        z-index: 11;
        -webkit-font-smoothing: antialiased;
        flex-shrink: 0;
        max-width: clamp(160px, 10vw + 120px, 360px);
      }
      
      .global-interactive-point::before,
      .global-interactive-point::after {
      display: none;
      }
      
      /* 左側側標籤向左加長 80px（不改變原本定位） */
      .global-interactive-point::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -80px;          /* 向左延伸 80px */
        width: 80px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        display: block;
        z-index: 10;
      }

      .global-interactive-point:hover {
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        transform: translateX(clamp(8px, 1.2vw, 14px));
      }
      
      /* 侧标签文字 - 常显，大字号突出重要性 */
      .global-interactive-point-label {
        position: static;
        transform: none;
        color: rgba(40, 40, 40, 0.95);
        font-size: clamp(14px, 0.7vw + 10px, 26px);
        font-weight: 600;
        font-family: "STZhongsong", "华文中宋", serif;
        white-space: nowrap;
        pointer-events: none;
        opacity: 1;
        visibility: visible;
        text-shadow: none;
        z-index: 12;
      }
      
      .global-interactive-point .icon {
        display: none;
      }
      
      /* 进度与收藏品上方紧贴的「新」标签 */
      .collection-nav-group {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
      }
      .collection-new-tab {
        display: none;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        min-width: 100px;
        padding: 6px 28px 6px 20px;
        margin-left: -16px;
        border-radius: 0;
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        font-family: "STZhongsong", "华文中宋", serif;
        box-shadow: 0 2px 8px rgba(231, 76, 60, 0.5);
        clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
        pointer-events: none;
        z-index: 12;
        animation: collection-badge-pulse 1.5s ease-in-out infinite;
      }
      .collection-new-tab.show {
        display: flex;
      }
      @keyframes collection-badge-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.9; transform: scale(1.05); }
      }
      
      @media (max-width: 768px) {
        .global-interactive-points {
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          gap: 0;
        }
        .collection-new-tab {
          min-height: 32px;
          padding: 4px 16px 4px 12px;
          font-size: 16px;
        }
        .global-interactive-point {
          max-width: clamp(140px, 48vw, 220px);
        }
        .global-interactive-point-label {
          font-size: clamp(14px, 3.8vw, 18px);
        }
      }

      @media (max-width: 480px) {
        .global-interactive-point {
          max-width: min(78vw, 240px);
          margin-left: -8px;
        }
        .global-interactive-point:hover {
          transform: translateX(8px);
        }
      }
      /* 浏览时间计时器 */
      .browse-timer {
        position: fixed;
        top: 26px;
        left: -2px;
        width: 120px;
        height: 40px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 700;
        font-family: "STZhongsong", "华文中宋", serif;
        z-index: 10000;
        -webkit-user-select: none;
        user-select: none;
      }
      .browse-timer span {
        display: inline-block;
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
      }
      /* 计时器脉冲动画 */
      @keyframes timerPulse {
        0% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.3);
          opacity: 0.75;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }
      .browse-timer span.pulse {
        animation: timerPulse 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }
      /* 鼠标图例 - 已隐藏，改用自定义光标 */
      .mouse-legend {
        display: none !important;
        position: fixed;
        z-index: 10000;
        pointer-events: none;
        opacity: 0.8;
        transition: opacity 0.3s ease;
        transform: translate(-50%, -50%);
        will-change: transform;
      }
      .mouse-legend:hover {
        opacity: 1;
      }
      .mouse-legend img {
        max-width: 200px;
        height: auto;
        display: block;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
      }
      @media (max-width: 768px) {
        .mouse-legend img {
          max-width: 150px;
        }
      }

      /* 鼠标脉冲效果 */
      .mouse-pulse-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 9999;
      }

      .mouse-pulse {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        transform: translate(-50%, -50%);
        pointer-events: none;
        animation: pulse-animation 0.6s ease-out forwards;
      }

      @keyframes pulse-animation {
        0% {
          width: 8px;
          height: 8px;
          opacity: 0.8;
          box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
        }
        50% {
          width: 20px;
          height: 20px;
          opacity: 0.4;
          box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3);
        }
        100% {
          width: 30px;
          height: 30px;
          opacity: 0;
          box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
        }
      }

      /* 鼠标脉冲效果（始终跟随鼠标） */
      .mouse-static-pulse {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        pointer-events: none;
        transform: translate3d(-50%, -50%, 0);
        z-index: 11;
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3),
                    0 0 7px rgba(255, 255, 255, 0.2),
                    0 0 13px rgba(255, 255, 255, 0.1);
        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
      }

      /* 白色小光圈效果 - 外圈 */
      .mouse-static-pulse::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        width: 27px;
        height: 27px;
        border: 2px solid rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        animation: pulse-ring 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        will-change: transform, opacity;
        backface-visibility: hidden;
      }

      /* 白色小光圈效果 - 中圈 */
      .mouse-static-pulse::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.45);
        border-radius: 50%;
        animation: pulse-ring 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite 0.4s;
        will-change: transform, opacity;
        backface-visibility: hidden;
      }

      /* ============================================
         图片管理器样式 - 根据文档完整实现
         ============================================ */
      
      /* Region 1-4 基础样式 */
      .region1-overlay-image,
      .region2-overlay-image,
      .region3-overlay-image,
      .region4-overlay-image {
        /* 绑定到画布：避免随视口居中导致偏移 */
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 23.3% !important;
        max-height: 23.3% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        z-index: 10000 !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                    visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: opacity, visibility;
        clip-path: none !important;
        overflow: visible !important;
      }

      .region1-overlay-image.show,
      .region2-overlay-image.show,
      .region3-overlay-image.show,
      .region4-overlay-image.show {
        opacity: 1;
        visibility: visible;
      }

      .page-2.sub-page-1 .region1-overlay-image,
      .page-2.sub-page-2 .region2-overlay-image,
      .page-2.sub-page-3 .region3-overlay-image,
      .page-2.sub-page-4 .region4-overlay-image {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 23.3% !important;
        max-height: 23.3% !important;
        z-index: 10000 !important;
        overflow: visible !important;
        clip-path: none !important;
      }

      /* Region 3 小型图片样式 - 缩小到原来的1/2 */
      .region3-image-small {
        max-width: 11.65% !important;
        max-height: 11.65% !important;
      }

      /* Region 3 超小型图片样式 - 缩小到原来的1/3 */
      .region3-image-small-33 {
        max-width: 7.77% !important;
        max-height: 7.77% !important;
      }

      /* Region 3 超小型图片样式 - 缩小到原来的1/4 */
      .region3-image-small-25 {
        max-width: 5.825% !important;
        max-height: 5.825% !important;
      }

      /* Region 1 特殊样式 */
      #region1Image1 {
        transform: translate(-50%, calc(-50% - 160px)) scale(0.7) !important;
      }
      #region1Image1b {
        transform: translate(calc(-50% - 250px), calc(-50% - 250px)) scale(0.9) !important;
      }
      #region1Image2 {
        transform: translate(-50%, -50%) scale(1.333) !important;
        max-width: 31.07vw !important;
        max-height: 31.07vh !important;
      }
      #region1Image5 {
        transform: translate(calc(-50% - 230px), calc(-50% + 80px)) scale(1.111) !important;
        max-width: 31.07vw !important;
        max-height: 31.07vh !important;
      }
      #region1Image3 {
        transform: translate(calc(-50% + 150px), calc(-50% + 30px)) scale(1.5) !important;
        max-width: 46.6vw !important;
        max-height: 46.6vh !important;
      }
      #region1Image3b {
        transform: translate(calc(-50% + 390px), calc(-50% + 90px)) scale(1.8) scaleX(-1) !important;
        max-width: 56vw !important;
        max-height: 56vh !important;
      }
      #region1Image6 {
        transform: translate(calc(-50% - 200px), calc(-50% - 200px)) !important;
      }

      /* Region 2 特殊样式 */
      #region2Image1 {
        transform: translate(calc(-50% + 440px), calc(-50% + 180px)) scale(0.667) !important;
      }
      #region2Image1b {
        transform: translate(calc(-50% - 320px), calc(-50% - 160px)) scale(1.25) !important;
      }
      #region2Image3 {
        transform: translate(calc(-50% - 260px), calc(-50% - 60px)) scale(0.667) !important;
      }
      #region2Image3b {
        transform: translate(calc(-50% + 120px), calc(-50% - 160px)) scale(0.667) !important;
      }
      #region2Image4 {
        transform: translate(calc(-50% - 240px), calc(-50% - 100px)) scale(0.667) !important;
      }
      #region2Image4b {
        transform: translate(calc(-50% + 200px), calc(-50% - 160px)) scale(0.667) !important;
      }

      /* Region 3 特殊样式 */
      #region3Image1c {
        transform: translate(calc(-50% - 300px), calc(-50% + 240px)) scale(0.75) !important;
      }
      #region3Image1 {
        transform: translate(calc(-50% - 470px), calc(-50% + 0px)) scale(0.667) !important;
      }
      #region3Image1b {
        transform: translate(calc(-50% + 300px), calc(-50% + 100px)) scale(0.667) !important;
      }
      #region3Image2 {
        transform: translate(calc(-50% + 400px), -50%) scale(0.444) !important;
      }
      #region3Image2b {
        transform: translate(-50%, -50%) !important;
      }
      #region3Image2c {
        transform: translate(calc(-50% - 360px), calc(-50% - 90px)) scale(0.333) !important;
      }
      #region3Image3 {
        transform: translate(calc(-50% - 170px), calc(-50% - 200px)) scale(0.667) !important;
      }
      #region3Image3b {
        transform: translate(calc(-50% + 40px), calc(-50% - 40px)) scale(0.667) !important;
      }
      #region3Image4 {
        transform: translate(-50%, calc(-50% + 20px)) scale(0.444) !important;
      }
      #region3Image4b {
        left: 0 !important;
        transform: translate(116px, calc(-50% + 160px)) !important;
      }
      #region3Image4c {
        transform: translate(calc(-50% + 100px), calc(-50% + 50px)) scale(0.5) !important;
      }
      #region3Image4d {
        transform: translate(calc(-50% - 200px), calc(-50% - 300px)) scale(0.444) !important;
      }

      /* Region 4 特殊样式 */
      #region4Image1 {
        transform: translate(calc(-50% - 290px), calc(-50% - 120px)) scale(0.667) !important;
      }
      #region4Image1b {
        transform: translate(calc(-50% - 420px), calc(-50% + 60px)) scale(0.667) !important;
      }
      #region4Image1c {
        transform: translate(calc(-50% + 300px), -50%) !important;
      }
      #region4Image3 {
        transform: translate(calc(-50% - 130px), -50%) scale(1.333) !important;
      }