.scene {
    width: min(120px);
    height: min(120px);
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    position: relative;
    /* 移除了 float 动画，整体不再晃动 */
}
.base {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateZ(-40px);
    width: 96%;
    height: 96%;
    border-radius: 50%;
    /* 改：深灰基底，从深灰到黑灰渐变 */
    background: radial-gradient(circle at 30% 30%, #A0A0A0, #808080 50%, #606060 80%, #404040);
    border: 0.25em solid #707070;
}
.plate {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform-style: preserve-3d;
    transform: translateZ(5px);
    /* 改：浅灰冰面，哑光质感 */
    background: radial-gradient(circle at 40% 30%, #E8E8E8, #D4D4D4 50%, #C0C0C0 80%, #B0B0B0);
    border: 0.15em solid #C0C0C0;
    box-shadow: inset 0 0 4em rgba(0, 0, 0, 0.06);
}
.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}
.layer img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
    filter: none;
}
.layer-base {
    z-index: 1;
    transform: translateZ(0px);
}
.layer-2 {
    z-index: 2;
    transform: translateZ(0.8em);
}
.layer-3 {
    z-index: 3;
    transform: translateZ(1.4em);
}
.layer-1 {
    z-index: 4;
    transform: translateZ(2em);
}

/* 太极图外层：固定定位，不旋转 */
.center-taiji {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 22%;
    height: 22%;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    /* 边框改为灰色 */
    border: 0.3em solid #A0A0A0;
    overflow: hidden;
    transform: translate(-50%, -50%) translateZ(2.8em);
    will-change: transform;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 内层旋转容器：只负责旋转，不改变位置 */
.taiji-rotator {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: taiji-spin 20s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}
.taiji-rotator svg {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}
@keyframes taiji-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.responsive-html {
  width: 400px;
  max-width: 100%;
}
@media (max-width: 768px) {
  .responsive-html {
    width: 300px;
  }
}
#layerTianGan,
#layerDiZhi,
#layerXingXiu {
    will-change: transform;        /* 告知浏览器准备独立图层 */
    backface-visibility: hidden;   /* 减少 3D 变换时的背面计算 */
    transform: translateZ(0);      /* 强制开启硬件加速（对部分安卓有效） */
}
.my-div {
    background-image: url('/build/beike/shop/bazi_chart/image/home/bg_kunlun.jpg?v=10'); 
    background-size: cover;           /* 图片覆盖整个div，保持比例 */
    background-position: center;      /* 图片居中 */
    background-repeat: no-repeat;     /* 不重复 */
    border: 1px solid #ccc;
}
#rainCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            pointer-events: none;
            z-index: 1;
        }