.compass-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background:#0a0a16;overflow:hidden}
.compass-center{position:relative;width:0;height:0}

/* 每个圆环容器 */
.ring{position:absolute;left:0;top:0;transform-origin:center}

/* 文字项：绝对定位，通过JS设置位置 */
.ring-item{
position:absolute;
white-space:nowrap;
font-weight:400;
transition:all 0.5s ease-out;
transform-origin:center center;
font-family:"Microsoft YaHei","微软雅黑",sans-serif
}

/* 当前值（下一秒）渐变色 */
.ring-item.active{
color:#ff6b9d;
font-weight:700;
text-shadow:0 0 15px rgba(255,107,157,0.8),0 0 30px rgba(255,107,157,0.4);
background:linear-gradient(135deg,#ff6b9d,#ff9ec4);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text
}

/* 非当前值：白色文字降低亮度 */
.ring-item:not(.active){
color:rgba(255,255,255,0.7)
}

/* 所有字号缩小一号 */
.month-ring .ring-item{font-size:1.6vmin}
.day-ring .ring-item{font-size:1.6vmin}
.hour-ring .ring-item{font-size:1.6vmin}
.minute-ring .ring-item{font-size:1.6vmin}
.second-ring .ring-item{font-size:1.6vmin}

/* 中心年份样式，和其他文字一样大，向右下移动一个字 */
.center-year{
position:absolute;
left:50%;
top:50%;
transform:translate(calc(-50% + 1.6vmin),calc(-50% + 1.6vmin));
font-size:1.6vmin;
font-weight:700;
color:#ff6b9d;
text-shadow:0 0 20px rgba(255,107,157,0.8);
font-family:"Microsoft YaHei","微软雅黑",sans-serif;
background:linear-gradient(135deg,#ff6b9d,#ff9ec4);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
white-space:nowrap;
line-height:1
}