:root {
  --radius: 2000px;
  --alaya-radius: 1733px;
  --manas-radius: 1333px;
  --vijnana-radius: 800px;
  --animation-duration: 720s;
  --animation-interval: 72s;
}

/** 旋转动画 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#circles {
  margin: auto 10%;
  width: 100%;
  height: 100%;
  position: relative;
}

.circle {
  /*background: black;*/
  border: 13px solid red;
  position: absolute;
}

.sub-circle {
  border-width: 1px;
  border-color: darkorange;
}

/**
    * 用于绘制圆的内圈，以形成圆环

    .circle:after {
      content: "";
      display: block;
      position: absolute;
      background: white;
    }*/

/*[class^=circle-]:after {
      content: "";
      display: block;
      position: absolute;
      background: white;
    }*/


#tathata {
  z-index: 0;
}


#tathata>.circle {
  width: var(--radius);
  height: var(--radius);
  /** 必须为宽高的一半 */
  border-radius: 1000px;
  background-color: #FFFF00;
  border: none;
  z-index: 0;
}

#tathata:before {
  display: none;
}

/** 在圆的内部再绘制一个白色的圆，以形成圆环
    #tathata:after {
      /** 5960
      width: calc(var(--radius) - 40px);
      height: calc(var(--radius) - 40px);
      left: 20px;
      /** 外圈大小减去内圈大小后的一半，即(6000 - 5960) / 2
      /*top: 20px;
      /**必须为宽高的一半
      border-radius: 2980px;
      background-color: #FFFF00;
    }**/

#alaya {
  z-index: 100;
}


svg {
  position: absolute;
  /* 或者 fixed */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  /* 设置为较高的z-index */
}


svg.透明扇形,svg.透明扇形 path {
  z-index : 6000;
  opacity: .6;
}


/** 设置动画 */
#alaya>.circle {
  animation: var(--animation-duration) linear rotate infinite;

  /** 5000 */
  width: var(--alaya-radius);
  height: var(--alaya-radius);
  /** 外圈大小减去内圈大小后的一半,再减去边框宽度，即(6000 - 5200) / 2 - 40 */
  left: 120px;
  top: 120px;
  /** 2500px */
  border-radius: calc(var(--alaya-radius) / 2);
  /*border-style: solid;*/
  background-color: #FFEF14;
}

#alaya .心 {}

#alaya .circle-前五精 {
  animation: none;
  border: none;
  /*border-color: aquamarine;*/
  width: calc(var(--alaya-radius) - 127px);
  height: calc(var(--alaya-radius) - 127px);
  left: 197px;
  top: 197px;
  border-radius: calc(calc(var(--alaya-radius) - 100px) / 2);
}

/* 径线 */
.longitude {
  position: absolute;
  width: 50%;
  height: 0px;
  border-top: 1.6px dotted white;
  left: 50%;
  top: 50%;
  transform-origin: left center;
  z-index: 100;
}


/*
.longitude:first-child {
  transform-origin: left center;
}*/

/** 以水平向右为基准进行旋转，形成一个倒五边形 */
#alaya>.circle .longitude-1 {
  /** (180 - 72) / 2 */
  transform: rotate(-54deg);
  width: 54%;
}

/*#alaya>.circle  .longitude:first-child + .longitude {*/
#alaya>.circle .longitude-2 {
  /** (180 - (72 * 2) ) / 2 */
  transform: rotate(18deg);
  width: 54%;
}

#alaya>.circle .longitude-3 {
  /** 18 + 72 */
  transform: rotate(90deg);
  width: 54%;
}

#alaya>.circle .longitude-4 {
  /** 90 + 72 */
  transform: rotate(162deg);
  width: 54%;
}

#alaya>.circle .longitude-5 {
  /** 162 + 72 */
  transform: rotate(234deg);
  width: 54%;
}

#alaya>.circle .longitude{
  border-color: deepskyblue;
  /*border-style: dotted;*/
}

#alaya .sub-circle,
#alaya #alaya-circle-2 {
  animation: var(--animation-duration) linear rotate infinite;

  /** 4400 其半径比外层圆环少800px */
  width: calc(var(--alaya-radius) - 133px);
  height: calc(var(--alaya-radius) - 133px);
  /**  */
  left: 200px;
  /** -800px时这里是900px，-600px时，这里是800px **/
  top: 200px;
  /** 2500px */
  border-radius: calc(calc(var(--alaya-radius) - 133px) / 2);
  border-style: dotted;
  background-color: #FFEF14;
}

#alaya .text-心所 {
  font-size: 40px;
}

/*
#alaya #alaya-circle-2:before {
  content: "知精";
  display: block;
  width: 100px;
  height: 42px;
  position: absolute;
  left: calc(50% - 5px);
  font-size: 42px;
}*/

#alaya #alaya-circle-3 {
  animation: var(--animation-duration) linear rotate infinite;

  /** 4400 其半径比外层圆环少800px */
  width: calc(var(--alaya-radius) - 267px);
  height: calc(var(--alaya-radius) - 267px);
  /**  */
  left: 267px;
  /** -800px时这里是900px，-600px时，这里是800px **/
  top: 267px;
  /** 2500px */
  border-radius: calc(calc(var(--alaya-radius) - 267px) / 2);
  border-style: unset; /*dotted;*/
  background-color: transparent; /*#FFEF14;*/
}


#alaya .text-rotation {
  position: absolute;
  border: none;
  animation: var(--animation-duration) linear rotate infinite;

  width: calc(var(--alaya-radius) - 267px);
  height: calc(var(--alaya-radius) - 267px);
  /**  */
  left: 268px;
  /**上面那个圈加上边框的宽度4**/
  top: 268px;
  /** 2500px */
  border-radius: calc(calc(var(--alaya-radius) - 268px) / 2);

}

/*
#alaya #alaya-circle-3:before {
  content: "境界相";
  display: block;
  width: 200px;
  height: 42px;
  position: absolute;
  left: calc(50% - 5px);
  font-size: 42px;
}*/

.words-circle {
  position: relative;
  writing-mode: vertical-lr;
  width: 0px;
  height: 0px;
}

.text-五遍行 {}

.text-六精 {
  font-size: 16px;
  color: #0000FF;
  font-family: 楷体;
  writing-mode: vertical-lr;
}

/*
    #alaya:after {
      width: 4960px;
      height: 4960px;
      /** 外圈大小减去内圈大小后的一半，即(5000 - 4960) / 2
      left: 20px;
      top: 20px;
      /** 2480px  即前面width的一半
      border-radius: 2480px;
      background-color: #FFEF14;
    }*/


.words-fixed {
  position: relative;
  width: 0px;
  height: 0px;
  writing-mode: vertical-lr;
  letter-spacing: 6px;
}

.words-text {
  position: relative;
  height: 0px;
  display: flex;
}

.text-心所 {
  width: 12px;
  height: 12px;
  font-size: 16px;
  color: deepskyblue;
  font-family: cursive;
  writing-mode: vertical-lr;
  position: absolute;
  z-index: 600;
  font-weight: 400;
}

@keyframes 心所闪烁渐变 {
  0% {
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0.4;
  }
}

.text-心所.思惑 {
  font-weight: 900;
}

.text-心所.次要 {
  display: none;
}

.text-心所.见惑 {
  /*display: none;*/
  font-weight: 200;
  /*animation: 心所闪烁渐变 4.2s ease-in-out infinite;*/
}

.text-心所.心所-已有 {}


.text-天 {
  color: skyblue;
  font-size: 21px;
  writing-mode: tb;
  opacity: 0.5;

}

.text-三界 {
  font-family: 楷体;
  color: aqua;
  font-size: 21px;
  writing-mode: tb;
  opacity: 0.5;
}

#alaya .words-fixed .name {
  top: 128px;
  left: 978px;
  z-index: 100;
  color: red;
  font-size: 32px;
  font-weight: 900;
  font-family: 微软雅黑;
  letter-spacing: 5px;
}

#manas {

  z-index: 200;

}

#manas .text-心所 {
  font-size: 6em;
  z-index: 100;
}


#manas .circle {
  background-color: #FFDF12;
}

/**
 * 全局圆心：
 * - 由最外层的 #alaya>.circle 确定，坐标为 (1000, 1000)
 * - #alaya>.circle: left=120, top=120, border-radius=866.5, border=13
 *   视觉半径 = 866.5+13 = 879.5, 圆心 = (120+879.5, 120+879.5) ≈ (1000, 1000)
 *
 * #manas 位置计算逻辑：
 * - #manas>.circle 作为位置修正时的参照圆，圆心也是 (1000, 1000)
 * - width/height = 1333px, border = 13px, border-radius = 667px
 * - 视觉半径 = 667 + 13 = 680px
 * - left = top = 320px，圆心 = (320+680, 320+680) = (1000, 1000)
 *
 * #manas 下所有子圆的位置计算：
 * - 统一对齐到全局圆心 (1000, 1000)
 * - 计算公式：left = top = 1000 - (border-radius + border-width)
 */
#manas>.circle {
  animation: calc(var(--animation-duration) - var(--animation-interval)) linear rotate infinite;
  animation-direction: reverse;

  /** width/height = 1333px, border = 13px, 视觉半径 = 667+13 = 680px */
  width: var(--manas-radius);
  height: var(--manas-radius);
  /** 圆心 (1000, 1000)，left = top = 320 */
  left: 320px;
  top: 320px;
  border-radius: 667px;

}

#manas .circle-我 {
  animation: calc(var(--animation-duration) - var(--animation-interval) * 6) linear rotate infinite;
  /** width/height = 1333-79 = 1254px, border = 13px, 视觉半径 = 627+13 = 640px */
  width: calc(var(--manas-radius) - 79px);
  height: calc(var(--manas-radius) - 79px);
  /** 圆心对齐到 (1000, 1000)，left = top = 1000-640 = 360 */
  left: 360px;
  top: 360px;
  border-radius: 627px;
  /** 宽度的一半 **/
  border: 13px solid greenyellow;
}

#manas .circle-我:before {
  content: "我见-俱生我执";
  display: block;
  width: 120px;
  height: 14px;
  position: absolute;
  left: calc(50% - 10px);
  font-size: 16px;
  top: -18px;
  color: blue;
}

#manas .circle-前五根 {
  animation: none;
  /** width/height = 1333-167 = 1166px, border = 1px, 视觉半径 = 583+1 = 584px */
  width: calc(var(--manas-radius) - 167px);
  height: calc(var(--manas-radius) - 167px);
  /** 圆心对齐到 (1000, 1000)，left = top = 1000-584 = 416 */
  left: 416px;
  top: 416px;
  border-radius: 583px;
  border-color: springgreen;
}

#manas .circle-前五根容器 {
  animation: none;
  border: none;
  /** width/height = 1333-170 = 1163px, border = 1px, 视觉半径 = 581.5+1 = 582.5px */
  width: calc(var(--manas-radius) - 170px);
  height: calc(var(--manas-radius) - 170px);
  /** 圆心对齐到 (1000, 1000)，left = top = 1000-582.5 = 417.5 ≈ 418 */
  left: 418px;
  top: 418px;
  border-radius: 581.5px;
}

.text-根 {
  font-size: 10px;
  width: 76px;
  height: 12px;
  /*text-decoration: underline;*/
  letter-spacing: 3px;
  writing-mode: lr;
  z-index: 1001;
}

.text-意根 {}

#manas .circle-前五根容器 .words-text {
  /*width: 120px;
  height: 36px;*/
}

.longitude-我 {
  border-color: springgreen;
  /**
  border-top: 1px dashed red;
  */
  z-index: 300;
  border-width: 1px;
}

.longitude-我:before {
  content: "我";
  display: block;
  background-color: white;
  width: 14px;
  height: 20px;
  position: absolute;
  left: calc(50% - 2px);
  /* background: white; */
  font-size: 14px;
  top: -10px;
}

/** 以水平向右为基准进行旋转，形成一个六边形的径线 */
#manas .circle-前五根容器 .longitude-1 {
  /** (180 - 72) / 2 */
  transform: rotate(-60deg);
}

#manas .circle-前五根容器 .longitude-2 {
  /** (180 - (72 * 2) ) / 2 */
  transform: rotate(0deg);
}

#manas .circle-前五根容器 .longitude-3 {
  /** 18 + 72 */
  transform: rotate(60deg);
}

#manas .circle-前五根容器 .longitude-4 {
  /** 90 + 72 */
  transform: rotate(120deg);
}

#manas .circle-前五根容器 .longitude-5 {
  /** 162 + 72 */
  transform: rotate(180deg);
}

#manas .circle-前五根容器 .longitude-6 {
  /** 162 + 72 */
  transform: rotate(240deg);
}

#manas .circle-意根 {
  animation: calc(var(--animation-duration) - var(--animation-interval) * 6) linear rotate infinite;
  /*animation-direction: reverse;*/
  /** width/height = 1333-421 = 912px, border = 8px, 视觉半径 = 456+8 = 464px */
  width: calc(var(--manas-radius) - 421px);
  height: calc(var(--manas-radius) - 421px);
  /** 圆心对齐到 (1000, 1000)，left = top = 1000-464 = 536 */
  left: 536px;
  top: 536px;
  border-radius: 456px;
}


#manas .circle-意根容器 {
  animation: none;
  border: none;
  /** width/height = 1333-423 = 910px, border = 1px, 视觉半径 = 455+1 = 456px */
  width: calc(var(--manas-radius) - 423px);
  height: calc(var(--manas-radius) - 423px);
  /** 圆心对齐到 (1000, 1000)，left = top = 1000-456 = 544 */
  left: 544px;
  top: 544px;
  border-radius: 455px;
}

#manas .text-rotation {
  border: none;
  animation: calc(var(--animation-duration) - 6 * var(--animation-interval)) linear rotate infinite;
  width: var(--vijnana-radius);
  height: var(--vijnana-radius);
  left: 600px;
  top: 600px;
  border-radius: 500px;
  position: absolute;
}

.words-manas {
  position: relative;
  top: 333px;
  left: 993px;
  z-index: 200;
  width: 0px;
  height: 0px;
}

#words-manas-name {
  position: relative;
  color: red;
  letter-spacing: 32px;
  writing-mode: tb;
  font-size: 36px;
  font-weight: 900;
  font-family: 微软雅黑;
  left: -16px;
  top: -6px;
}



/*
    #manas:after {
      width: 3960px;
      height: 3960px;
      left: 20px;
      /** 外圈大小减去内圈大小后的一半，即(4000 - 3960) / 2
      top: 20px;
      border-radius: 1980px;
      background-color: #FFDF12;

    }*/

/**
 * #vijnana 位置计算逻辑：
 * - #vijnana 是独立的顶层容器，与 #alaya、#manas 同级
 * - #vijnana 下所有圆形都对齐到全局圆心 (1000, 1000)
 * - 全局圆心由 #alaya>.circle 确定
 * - 计算公式：left = top = 1000 - (border-radius + border-width)
 */

#vijnana {
  z-index: 300;

}

#vijnana>.circle {
  animation: calc(var(--animation-duration) - 8 * var(--animation-interval)) linear rotate infinite;

  /** width/height = 800px, border = 13px, 视觉半径 = 400+13 = 413px */
  width: var(--vijnana-radius);
  height: var(--vijnana-radius);
  /** 圆心对齐到 (1000, 1000)，left = top = 1000-413 = 587 */
  left: 587px;
  top: 587px;
  border-radius: 400px;
  background-color: #FFD20A;

}

#vijnana .circle-前五根 {
  animation: none;
  /** width/height = 800-66 = 734px, border = 1px, 视觉半径 = 367+1 = 368px */
  width: calc(var(--vijnana-radius) - 66px);
  height: calc(var(--vijnana-radius) - 66px);
  /** 圆心对齐到 (1000, 1000)，left = top = 1000-368 = 632 */
  left: 632px;
  top: 632px;
  border-radius: 367px;
}

#vijnana .circle-前五根容器 {
  animation: none;
  border: none;
  /** width/height = 800-70 = 730px, border = 1px, 视觉半径 = 365+1 = 366px */
  width: calc(var(--vijnana-radius) - 70px);
  height: calc(var(--vijnana-radius) - 70px);
  /** 圆心对齐到 (1000, 1000)，left = top = 1000-366 = 634 */
  left: 634px;
  top: 634px;
  border-radius: 365px;
}

#vijnana .circle-前五根容器 .words-text {
  font-size: 8px;
}

/** 以水平向右为基准进行旋转，形成一个六边形的径线 */
#vijnana .circle-前五根 .longitude-1 {
  /**转动角度: - (60 + 12) */

}

#vijnana .circle-前五根 .longitude-2 {
  /** (180 - (72 * 2) ) / 2 */

}

#vijnana .circle-前五根 .longitude-3 {
  /** 18 + 72 */

}

#vijnana .circle-前五根 .longitude-4 {
  /** 90 + 72 */

}



#vijnana .circle-意根 {
  animation: calc(var(--animation-duration) - 6.5 * var(--animation-interval)) linear rotate infinite;

  /** width/height = 800-200 = 600px, border = 8px, 视觉半径 = 300+8 = 308px */
  width: calc(var(--vijnana-radius) - 200px);
  height: calc(var(--vijnana-radius) - 200px);
  /** 圆心对齐到 (1000, 1000)，left = top = 1000-308 = 692 */
  left: 692px;
  top: 692px;
  border-radius: 300px;
}

/*
#vijnana .circle-意根:before {
  content: "作意 触 受 想 思 欲 胜解 念 定 慧";
  display: block;
  color: white;
  width: 264px;
  height: 12px;
  position: absolute;
  left: calc(50% - 5px);
  top: -4px;
  font-size: 18px;
  transform: rotate(8deg);
}*/

#vijnana .circle-意根容器 {
  animation: none;
  border: none;
  /** width/height = 800-202 = 598px, border = 1px, 视觉半径 = 299+1 = 300px */
  width: calc(var(--vijnana-radius) - 202px);
  height: calc(var(--vijnana-radius) - 202px);
  /** 圆心对齐到 (1000, 1000)，left = top = 1000-300 = 700 */
  left: 700px;
  top: 700px;
  border-radius: 299px;
}


#vijnana .circle-第六识 {
  animation: calc(var(--animation-duration) - 8 * var(--animation-interval)) linear rotate infinite;
  /** width/height = 800-400 = 400px, border = 8px, 视觉半径 = 200+8 = 208px */
  width: calc(var(--vijnana-radius) - 400px);
  height: calc(var(--vijnana-radius) - 400px);
  /** 圆心对齐到 (1000, 1000)，left = top = 1000-208 = 792 */
  left: 792px;
  top: 792px;
  border-radius: 200px;
}

.words-vijnana {
  top: 667px;
  left: 917px;
  z-index: 3000;
}

#vijnana .words-fixed .name {
  position: relative;
  color: red;
  letter-spacing: 300px;
  writing-mode: tb;
  font-size: 90px;
  font-weight: 900;
  font-family: 微软雅黑;
  opacity: 0.5;
  top: -72px;
  left: 23px;
}