/* 方案一 (多色增强版) */
#site-runtime-display {
    font-size: 1rem;
    font-weight: bold;
    
    /* 1. (更新) 定义一个包含更多颜色的渐变背景。
       我们采用 A-B-C-D-E-D-C-B-A 的结构，确保动画循环播放时无缝衔接。*/
    background-image: linear-gradient(90deg, 
        #f72585, /* 亮粉色 */
        #7209b7, /* 深紫色 */
        #3a0ca3, /* 靛蓝色 */
        #4361ee, /* 宝蓝色 */
        #4cc9f0, /* 天青色 */
        #4361ee, /* 宝蓝色 */
        #3a0ca3, /* 靛蓝色 */
        #7209b7, /* 深紫色 */
        #f72585  /* 亮粉色 */
    );
    
    /* 2. (更新) 因为颜色变多了，我们将背景尺寸拉得更宽，让渐变不拥挤 */
    background-size: 400% 100%;
    
    /* 3. 关键：将渐变背景裁剪为文字的形状 */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 4. 将文字颜色设为透明，以显露出背景的渐变色 */
    color: transparent;
    
    /* 5. (更新) 适当延长动画时间，让更多颜色的流动显得更平滑、从容 */
    animation: flow-gradient-animation 15s linear infinite;
}

/* 动画的关键帧无需改动，它只负责将背景从左移动到右 */
@keyframes flow-gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}