#xg {
     width: 80px;
     color: cornflowerblue;
 }

 h1:hover {
     animation: animate 0.5s linear infinite;
 }

 @keyframes animate {

     0%,
     25% {
         text-shadow: 2px 2px 2px #ff6384;
     }

     50% {
         text-shadow: 2px -2px 2px #ff6384;
     }

     75% {
         text-shadow: -2px 2px 2px #ff6384;
     }

     100% {
         text-shadow: -2px -2px 2px #ff6384;
     }
 }

 @layer utilities {
     .content-auto {
         content-visibility: auto;
     }

     .text-shadow {
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }

     .card-hover {
         transition: all 0.3s ease;
     }

     .card-hover:hover {
         transform: translateY(-5px);
         box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
     }

     .carousel-item {
         display: none;
     }

     .carousel-item.active {
         display: block;
         animation: fadeIn 1s ease;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
         }

         to {
             opacity: 1;
         }
     }

     .dragging {
         cursor: grabbing;
         user-select: none;
     }

     /* 背景动画相关样式 */
     .particle {
         position: absolute;
         border-radius: 50%;
         opacity: 0.5;
         pointer-events: none;
         z-index: 0;
     }

     .animated-bg {
         position: relative;
         overflow: hidden;
     }

     .gradient-flow {
         background: linear-gradient(-45deg, #165DFF, #722ED1, #36CFC9, #165DFF);
         background-size: 400% 400%;
         animation: gradient 15s ease infinite;
     }

     @keyframes gradient {
         0% {
             background-position: 0% 50%;
         }

         50% {
             background-position: 100% 50%;
         }

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

     /* 粒子连线背景样式 - 覆盖全页面 */
     #particle-canvas {
         position: fixed;
         /* 改为fixed固定定位 */
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: -1;
         /* 置于所有内容下方 */
     }

     .bg-mesh {
         background-color: #0f172a;
         background-image: radial-gradient(rgba(22, 93, 255, 0.1) 1px, transparent 1px);
         background-size: 20px 20px;
     }

     /* 为内容区域添加半透明背景增强可读性 */
     section,
     header,
     footer {
         position: relative;
         /* 确保内容在画布上方 */
     }

     /* 增强部分区域的背景不透明度 */
     .content-section {
         background-color: rgba(255, 255, 255, 0.92);
         backdrop-filter: blur(4px);
     }

     footer {
         background-color: rgba(29, 33, 41, 0.95);
     }
 }

 #particle-canvas {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
 }

 /* Banner轮播背景渐变动画 */
 .animated-bg {
     background: linear-gradient(270deg, #165DFF, #722ED1);
     background-size: 400% 400%;
     animation: gradientAnimation 15s ease infinite;
 }

 @keyframes gradientAnimation {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

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

 /*渐变字*/
 #jbz {
     background: -webkit-linear-gradient(135deg,
             #0eaf6d,
             #ff6ac6 25%,
             #147b96 50%,
             #e6d205 55%,
             #2cc4e0 60%,
             #8b2ce0 80%,
             #ff6384 95%,
             #08dfb4);
     /* 文字颜色填充设置为透明 */
     -webkit-text-fill-color: transparent;
     /* 背景裁剪，即让文字使用背景色 */
     -webkit-background-clip: text;
     background-clip: text;
     /* 背景图放大一下，看着柔和一些 */
     -webkit-background-size: 200% 100%;
     background-size: 200% 100%;
     /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
     -webkit-animation: flowCss 12s infinite linear;
     animation: flowCss 12s infinite linear;
 }

@keyframes flowCss {
    0% {
        /* 移动背景位置 */
        background-position: 0 0;
    }

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

@-webkit-keyframes flowCss {
    0% {
        /* 移动背景位置 */
        background-position: 0 0;
    }

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

 jbz:hover {
     -webkit-animation: flowCss 4s infinite linear;
     animation: flowCss 4s infinite linear;
 }