.natal-chart-wheel {
  --ncw-purple: #6b5ca5;
  --ncw-gold: #d4b98a;
  --ncw-cream: #f7f3e9;
  --ncw-rose: #b96478;
  --ncw-teal: #3d8f91;
  display: block;
  width: min(100%, 720px);
  height: auto;
  margin-inline: auto;
  overflow: visible;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.ncw-background {
  fill: color-mix(in srgb, var(--ncw-cream) 88%, var(--ncw-purple));
  stroke: var(--ncw-gold);
  stroke-width: 2;
}

.ncw-ring,
.ncw-zodiac-boundary,
.ncw-house-line {
  fill: none;
  stroke: color-mix(in srgb, var(--ncw-purple) 68%, white);
  stroke-width: 1;
}

.ncw-ring--outer {
  stroke: var(--ncw-gold);
  stroke-width: 3;
}

.ncw-ring--inner {
  stroke-dasharray: 2 5;
}

.ncw-zodiac-glyph,
.ncw-house-number,
.ncw-planet-glyph,
.ncw-angle-label,
.ncw-retrograde {
  fill: var(--ncw-purple);
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--ncw-cream) 92%, transparent);
  stroke-width: 4px;
  stroke-linejoin: round;
  text-anchor: middle;
  dominant-baseline: central;
}

.ncw-zodiac-glyph {
  fill: color-mix(in srgb, var(--ncw-purple) 82%, black);
  font-size: 25px;
}

.ncw-house-number {
  fill: color-mix(in srgb, var(--ncw-gold) 72%, #4b3c38);
  font-size: 13px;
  font-weight: 700;
}

.ncw-aspect {
  stroke-width: 1.25;
  opacity: 0.64;
}

.ncw-aspect--neutral {
  stroke: var(--ncw-gold);
}

.ncw-aspect--tension {
  stroke: var(--ncw-rose);
}

.ncw-aspect--harmony {
  stroke: var(--ncw-teal);
}

.ncw-planet-connector {
  stroke: color-mix(in srgb, var(--ncw-purple) 52%, transparent);
  stroke-width: 0.8;
}

.ncw-planet-tick,
.ncw-center {
  fill: var(--ncw-gold);
}

.ncw-planet-glyph {
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-size: 23px;
  font-weight: 700;
}

.ncw-retrograde {
  fill: var(--ncw-rose);
  font-size: 9px;
  font-weight: 800;
}

.ncw-angle-line {
  stroke: color-mix(in srgb, var(--ncw-purple) 84%, black);
  stroke-width: 2.2;
}

.ncw-angle-label {
  fill: color-mix(in srgb, var(--ncw-purple) 82%, black);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

@media (max-width: 640px) {
  .natal-chart-wheel {
    width: min(100%, 560px);
  }

  .ncw-zodiac-glyph {
    font-size: 27px;
  }

  .ncw-planet-glyph {
    font-size: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .natal-chart-wheel * {
    transition: none !important;
  }
}