.bg-temple {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  font-variant-emoji: text;
}

.bg-temple .tai-ji {
  --s: 34vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: calc(180deg + var(--bg-rotation, 0deg));
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  opacity: 0.28;
  background: linear-gradient(to left, #f0e6d0 50%, #b8a080 50%);
}

.bg-temple .tai-ji::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  top: 0;
  left: 25%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #f0e6d0 14%, #b8a080 15%);
}

.bg-temple .tai-ji::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  bottom: 0;
  left: 25%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #b8a080 14%, #f0e6d0 15%);
}

.bg-temple .gua {
  position: absolute;
  font-size: 2.2rem;
  color: #8b7860;
  opacity: 0.35;
  transform: translate(-50%, -50%);
}

.gua-nw { top: 3%; left: 3%; }
.gua-n  { top: 3%; left: 50%; }
.gua-ne { top: 3%; left: 97%; }
.gua-w  { top: 50%; left: 3%; }
.gua-e  { top: 50%; left: 97%; }
.gua-sw { top: 97%; left: 3%; }
.gua-s  { top: 97%; left: 50%; }
.gua-se { top: 97%; left: 97%; }