.compass-stage {
  position: relative;
  min-height: 396px;
  margin: 0;
}

.compass-dial-wrap {
  position: absolute;
  top: 56px;
  left: 50%;
  width: clamp(270px, 71vw, 318px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  transition: width 180ms ease;
}

.compass-stage.is-zoomed .compass-dial-wrap {
  width: clamp(308px, 82vw, 360px);
}

.compass-page .compass-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 12px 20px rgba(73, 50, 24, 0.1));
}

.compass-tick,
.compass-sector,
.compass-crosshair {
  stroke: #9b8464;
  stroke-width: 0.8;
  opacity: 0.58;
}

.compass-tick {
  stroke-width: 0.65;
}

.compass-tick.is-major {
  stroke-width: 1.25;
  opacity: 0.76;
}

.compass-sector.is-palace {
  stroke-width: 1.2;
  opacity: 0.72;
}

.compass-crosshair {
  stroke: #d8c6aa;
  opacity: 0.65;
}

.compass-degree,
.compass-mountain,
.compass-palace,
.compass-trigram {
  dominant-baseline: middle;
  fill: #191b19;
  font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-weight: 800;
  text-anchor: middle;
}

.compass-degree {
  fill: #796b5a;
  font-size: 11px;
  font-weight: 500;
}

.compass-mountain {
  font-size: 25px;
}

.compass-mountain.is-active,
.compass-palace.is-south,
.compass-mountain.is-south {
  fill: #cf171a;
}

.compass-palace.is-north,
.compass-trigram.is-north,
.compass-mountain.is-north {
  fill: #0757a9;
}

.compass-palace.is-east,
.compass-trigram.is-east,
.compass-mountain.is-east {
  fill: #0b914f;
}

.compass-palace {
  font-size: 24px;
  font-weight: 900;
}

.compass-trigram {
  fill: #111;
  font-family: "Songti SC", "STSong", serif;
  font-size: 31px;
  font-weight: 900;
}

.compass-landscape {
  fill: #dfe3df;
  opacity: 0.72;
}

.compass-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 156px;
  transform: translate(-50%, -50%) rotate(var(--needle-rotation));
  transform-origin: 50% 50%;
  transition: transform 220ms ease-out;
  filter: drop-shadow(0 7px 9px rgba(33, 24, 18, 0.28));
}

.compass-needle::before,
.compass-needle::after {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
  transform: translateX(-50%);
}

.compass-needle::before {
  top: 0;
  border-right: 12px solid transparent;
  border-bottom: 86px solid #ed0808;
  border-left: 12px solid transparent;
}

.compass-needle::after {
  bottom: 0;
  border-top: 86px solid #1d2322;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
}

.compass-needle i {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 22px;
  height: 22px;
  border: 5px solid rgba(172, 126, 49, 0.88);
  border-radius: 50%;
  background: #fff3d6;
  box-shadow: 0 0 0 2px rgba(93, 61, 19, 0.16);
  transform: translate(-50%, -50%);
}

.compass-mark {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 2px;
  color: #2d3330;
  font-size: 14px;
  font-weight: 560;
  line-height: 1.05;
  text-align: center;
}

.compass-mark b {
  color: #111413;
  font-size: 16px;
  font-weight: 900;
}

.compass-mark--top {
  top: 8px;
  left: 50%;
  color: #0b8a4c;
  transform: translateX(-50%);
}

.compass-mark--top b,
.compass-mark--left b {
  color: #0b8a4c;
}

.compass-mark--right {
  top: 198px;
  right: 14px;
}

.compass-mark--bottom {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.compass-mark--bottom::before,
.compass-mark--top::after,
.compass-mark--left::after,
.compass-mark--right::before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
}

.compass-mark--top::after {
  bottom: -16px;
  left: 50%;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #0b8a4c;
  border-left: 8px solid transparent;
  transform: translateX(-50%);
}

.compass-mark--right::before {
  top: 16px;
  left: -14px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #555c59;
}

.compass-mark--bottom::before {
  top: -16px;
  left: 50%;
  border-top: 12px solid #555c59;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  transform: translateX(-50%);
}

.compass-mark--left {
  top: 198px;
  left: 16px;
  color: #0b8a4c;
}

.compass-mark--left::after {
  top: 16px;
  right: -14px;
  border-top: 8px solid transparent;
  border-right: 12px solid #0b8a4c;
  border-bottom: 8px solid transparent;
}

.compass-mark--ne,
.compass-mark--se,
.compass-mark--sw,
.compass-mark--nw {
  color: #5c625f;
}

.compass-mark--ne {
  top: 78px;
  right: 54px;
}

.compass-mark--se {
  right: 53px;
  bottom: 68px;
}

.compass-mark--sw {
  bottom: 68px;
  left: 54px;
}

.compass-mark--nw {
  top: 78px;
  left: 54px;
}