:root {
            --primary-color: #4ECDC4;
            --secondary-color: #FF6B6B;
        }

        /* 侧边导航容器 */
        #side-nav {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 180px;
            height: 520px;
            background: #0000005a;
            /* border-left: 2px solid #ffffff; */
            transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px 0;
            box-shadow: -3px 0 15px rgba(0,0,0,0.1);
            gap: 20px; /* 新增垂直间距控制 */
            z-index: 2; /* 高于全景图 */
            border-radius: 10px 0 0 10px;
            opacity: 0; /* 初始完全透明 */
            animation: navFadeIn 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

        }

        @media (max-height: 500px) and (orientation: portrait) { 
            #side-nav { display: none !important; } 
        }

        @keyframes navFadeIn {
            from { opacity: 0; }    /* 起始状态 */
            to { opacity: 1; }      /* 最终状态 */
        }

        /* 关闭按钮 */
        #close-btn {
            position: absolute;
            left: -40px;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 70px;
            background: #0000005a;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 40px 0 0 40px;
            transition: 0.3s all ease;
            box-shadow: -3px 0 15px rgba(0,0,0,0.1);
            z-index: 2;
            /* backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);  */

        }

        .svg-icon {
            transition: transform 0.3s ease;
            fill: currentColor; /* 继承父元素颜色 */
            
          }
          
        .close-icon, .open-icon {
            stroke: white;
            stroke-width: 2;
            stroke-linecap: round;
            transition: stroke 0.3s ease;
        }

        /* 通过父元素类名控制图标显示 */
        .close-icon { display: block; }
        .open-icon { display: none; }

        #close-btn.icon-open .close-icon {
            display: none;
          }
          #close-btn.icon-open .open-icon {
            display: block;
          }


        /* artron_div 容器 */
        .artron_div {
            width: 150px;
            height: 160px;
            margin: 0 auto 0px; /* 底部间距20px */
            background: #ffffff00;
            background: var(--secondary-bg, #ffffff00);
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            color: rgb(255, 255, 255);
            transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            /* box-shadow: 0 4px 20px rgba(0,0,0,0.12); 优化阴影 */
            z-index: 3; /* 高于全景图 */

        }

        /* 图片容器 */
        .artron_div_con_pic {
            display: flex;
            width: clamp(50px, 8vw, 100px);
            height: clamp(50px, 8vw, 100px);
            overflow: hidden;
            border: 2px solid #f6b64c;
            border-radius: 50%;
            margin: 8px auto;
            transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            z-index: 3; /* 高于全景图 */
        }



        /* 文字容器 */
        .artron_div_con_text {
            width: 150px;
            /* height: 24px; */
            height: 1.5rem; /* 原24px */
            overflow: hidden;
            position: relative;
            top: 4px;
            z-index: 3; /* 高于全景图 */
        }

        .scroll-text {
            position: absolute;
            white-space: nowrap;
            /* 未溢出时的居中方案 */
            left: 50%;
            transform: translateX(-50%);
            /* 溢出时的滚动方案 */
            animation: none;
            z-index: 3; /* 高于全景图 */
        }

        /* 溢出时的滚动动画 */
        .scroll-text.scroll-active {
            animation: scroll 5s linear infinite;
        }

        @keyframes scroll {
            0% { 
                left: 100%; /* 从父容器右侧开始 */
                transform: translateX(0); 
            }
            100% { 
                left: 0; 
                transform: translateX(-100%); /* 完全移出父容器左侧 */
            }
        }


        /* 文字面板 */
        .text-panel {
            position: fixed;
            right: 300px;
            top: 50%;
            transform: translateY(-50%);
            width: 300px;
            height: 500px;
            background: rgba(0, 0, 0, 0.276);
            border-radius: 15px;
            box-shadow: 0 0 25px rgba(0,0,0,0.15);
            padding: 25px;
            opacity: 0;
            transition: 0.4s ease;
            z-index: 3; /* 高于全景图 */
            transition: 0.4s ease;
            pointer-events: none; 
            
        }


        .text-panel.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(-50%) scale(1);
            
        }


        .text-content {
            height: 410px;
            overflow-y: auto;
            padding: 0 10px 0; /* 上 左右 下 */
            font-size: 16px;
            line-height: 1.6;
            scrollbar-gutter: stable; /* 防止内容偏移 */
            z-index: 3; /* 高于全景图 */
            color: #ffffff;
            hyphens: auto; /* 自动换行连字符 */
            text-align: justify; /* 两端对齐 */
            letter-spacing: 0.05em; /* 字间距微调 */
            text-indent: 2em;
            
        }

        
        .text-content p {
            text-indent: 2em;  /* 移到这里作用于段落 */
            margin: 1em 0;     /* 添加段落间距 */
        }

        .arttext-contion {
            width: 300px;
            height: 500px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(12px);
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.2);
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
          }

        /* 标题样式 */
        .text-panel h2 {
            text-align: center;
            margin: 0 0 20px 0;
            padding-bottom: 10px;
            padding-top: 10px;
            position: relative;
            color: #ffffff;
            /* font-size: 30px; */
            font-size: 1.875rem; /* 原30px */
            z-index: 3; /* 高于全景图 */
        }

        /* 标题下划线（偏移修正） */
        .text-panel h2::after {
            content: "";
            position: absolute;
            left: -10px;
            right: -10px;
            bottom: -4px;
            height: 3px;
            background: #f6b64c;
            transform: skewX(-15deg);
            box-shadow: 
                0 2px 0 rgba(0,0,0,0.1),
                0 4px 0 rgba(255,255,255,0.1);  /* 双阴影模拟立体 */
        }




        /* 滚动条样式 */
        .text-content::-webkit-scrollbar {
            width: 8px;
            background: transparent;
        }
        .text-content::-webkit-scrollbar-thumb {
            background: #ddd;
            border-radius: 4px;
            border: 2px solid white;
        }
        /* 交互状态 */
        .artron_div[data-state="1"] .artron_div_con_pic {
            transform: scale(0.85);
            border-color: var(--secondary-color);
            box-shadow: 0 0 15px rgba(255,107,107,0.3);
        }

        .artron_div[data-state="2"] .artron_div_con_pic {
            transform: scale(1.15) rotate(360deg);
            border-color: var(--primary-color);
        }

        #side-nav.hidden {
            transform: translateY(-50%) translateX(100%);
        }

        @media (max-width: 768px) {
            #side-nav {
              width: 120px; /* 宽度缩小 */
              height: 360px; /* 高度缩减 */
              padding: 12px 0; /* 内边距调整 */
              gap: 12px; /* 元素间距缩小 */
              /* backdrop-filter: blur(8px); 模糊效果调整 */
              right: -6px; /* 微调右侧定位 */
            }
          
            .artron_div {
              width: 100px !important; /* 强制宽度 */
              height: 110px !important; /* 高度缩减 */
              margin: 0 auto 8px; /* 间距调整 */
            }
          
            .artron_div_con_pic {
              width: 60px !important;
              height: 60px !important;
              margin: 4px auto !important; /* 居中微调 */
              border-width: 1.5px;
            }
          
            .artron_div_con_text {
              width: 100% !important;
              height: 1.2em !important; /* 文本容器高度调整 */
              top: 2px !important;
            }
          
            .scroll-text {
              font-size: 12px !important; /* 字号缩小 */
              transform-origin: center; /* 保持居中基准 */
            }
          
            /* 文字面板适配 */
            .text-panel {
              width: 240px !important;
              height: 400px !important;
              right: 140px !important; /* 配合侧边栏宽度调整 */
              transform: translateY(-50%) scale(0.9) !important;
            }
          
            .arttext-contion {
              width: 100% !important;
              height: 100% !important;
              border-radius: 8px !important;
            }
          
            .text-panel h2 {
              font-size: 1.25rem !important; /* 标题缩小 */
              margin-bottom: 12px !important;
            }
          
            .text-content {
              font-size: 12px !important;
              line-height: 1.5 !important;
              height: 320px !important;
            }
          
            /* 关闭按钮适配 */
            #close-btn {
              left: -34px !important; /* 位置微调 */
              width: 34px !important;
              height: 50px !important;
              border-radius: 34px 0 0 34px !important;
            }
          
            .svg-icon {
              transform: scale(0.8); /* 图标适当缩小 */
            }
          }
          
          @media (max-width: 480px) {
            #side-nav {
              transform: translateY(-50%) scale(0.9); /* 整体适当缩小 */
              transform-origin: right center; /* 保持右侧定位基准 */
            }
            
            .text-panel {
              right: 110px !important; /* 二次位置调整 */
              transform: translateY(-50%) scale(0.85) !important;
            }
          }