/* 圆形容器样式 - 定义圆形布局的基本样式和动画效果 */
 .circle-container {
    position: relative;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem auto;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid rgb(255 255 255 / 30%);
    box-shadow: 0 0 40px rgb(45 47 51 / 20%);
    z-index: 10;
    user-select: none;
 }

 /* 圆形项目样式 - 定义每个圆形元素的基本样式和交互效果 */
 .circle-item {
     position: absolute;
     width: 120px;
     height: 120px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     transform-origin: 240px;
     transition: all 0.3s ease;
     cursor: pointer;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     font-size: 1.2rem;
     font-weight: bold;
     color: white;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
     aspect-ratio: 1 / 1;
     background-clip: padding-box;
 }

 /* 圆形项目悬停效果 - 增强用户交互体验 */
 .circle-item:hover {
     transform: scale(1.1) translateZ(20px);
     z-index: 10;
     box-shadow: 0 8px 24px rgba(255, 16, 16, 0.25);
     opacity: 1 !important;
 }

 /* 活跃项样式 - 当前选中的圆形元素的特殊样式 */
 .circle-item.active {
    box-shadow: 0 0 13px 2px rgb(76 233 191), 0 0 16px rgba(22, 93, 255, 0.8);
    border: 7px solid #77feffa3;
    width: 160px;
    height: 160px;
    z-index: 15;
    opacity: 1 !important;
    transform-origin: 520px;
    aspect-ratio: 1 / 1;
 }

 /* 索引标签样式 - 显示在活跃项下方的索引标识 */
 .index-label {
     position: absolute;
     bottom: -26px;
     /* 调整位置 */
     left: 50%;
     transform: translateX(-50%);
     background-color: rgba(30, 41, 59, 0.8);
     color: white;
     padding: 0.2rem 0.6rem;
     /* 调整大小 */
     border-radius: 0.3rem;
     /* 调整大小 */
     font-size: 0.9rem;
     /* 调整字体大小 */
     font-weight: 600;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 /* 活跃项的索引标签显示 */
 .circle-item.active .index-label {
     opacity: 1;
 }

 /* 项目内容样式 - 确保内容在圆形元素旋转时保持正立 */
 .item-content {
     /* 保持内容不旋转 */
     transform: rotate(0deg);
     /* 添加过渡效果 */
     transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     width: 100%;
     height: 100%;
     /* 确保内容区域也是圆形 */
     border-radius: 50%;
     text-shadow:
         -1px -1px 0 rgb(250, 126, 10),
         1px -1px 0 rgb(250, 126, 10),
         -1px 1px 0 rgb(250, 126, 10),
         1px 1px 0 rgb(250, 126, 10);
 }

 .item-content>span {
     display: inline-block;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
     width: max-content;
     color: #fff;
     font-size: 29px;
 }

 /* 信息区域样式 - 页面底部的说明文字区域 */
 .circle-info {
     max-width: 600px;
     text-align: center;
     margin-top: 2rem;
 }

 .circle-title {
     font-size: clamp(1.5rem, 3vw, 2rem);
     font-weight: 700;
     margin-bottom: 1rem;
 }

 .circle-desc {
     font-size: clamp(1rem, 1.5vw, 1.1rem);
     color: rgba(248, 250, 252, 0.8);
     line-height: 1.6;
 }