.wheel-holder {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
}

.wheel-holder:not(.is-cube) { z-index: 0; }
.wheel-holder:not(.is-cube)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 22px;
  background: var(--surface-tint), var(--sky-base);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 6%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--black) 70%, transparent);
  pointer-events: none;
}

.wheel { width: 100%; height: 100%; }

.w-sign { color: var(--purple-glow); opacity: 0.9; }
.w-natal { color: var(--text-mid); }
.w-transit { color: var(--purple-bright); }
.w-hot { color: var(--gold); }
.w-natal.w-extended:not(.w-colored) { color: var(--extended-point); }
.w-transit.w-extended:not(.w-colored) { color: var(--extended-point-transit); }

.w-natal.w-colored { color: var(--pc); }
.w-transit.w-colored { color: var(--pc); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .w-natal.w-colored:not(.w-extended) { color: color-mix(in srgb, var(--pc) 80%, var(--bg-deep)); }
}

:is(.w-natal, .w-transit, .w-sign) > g > :is(circle, path[d$="Z"], path[d$="z"]):not([fill]) {
  fill: currentColor;
  fill-opacity: 0.16;
}
:is(.w-natal, .w-transit, .w-sign) > g { shape-rendering: geometricPrecision; }
@supports (color: color-mix(in srgb, currentColor 20%, black)) {
  .w-glyph-outline { stroke: color-mix(in srgb, currentColor 16%, var(--black)); }
}

.w-tick.w-colored[data-intro-tier="core"] { stroke: color-mix(in srgb, var(--pc) 64%, transparent); }
.w-tick.w-colored[data-intro-tier="extra"] { stroke: color-mix(in srgb, var(--pc) 40%, transparent); }
.w-tick.w-colored[data-intro-body^="outer:"][data-intro-tier="core"] { stroke: color-mix(in srgb, var(--pc) 78%, transparent); }
.w-tick.w-colored[data-intro-body^="outer:"][data-intro-tier="extra"] { stroke: color-mix(in srgb, var(--pc) 44%, transparent); }

.w-cross-aspect[stroke^="var(--aspect-"] { stroke-opacity: 0.6; }
.w-cross-aspect[stroke^="var(--aspect-"][data-intro-kind="minor"] { stroke-opacity: 0.5; }

.w-house {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  fill: var(--purple-glow);
  fill-opacity: 0.9;
}
.w-asc {
  font-family: var(--font-sans);
  font-size: 5.5px;
  font-weight: 600;
  fill: var(--gold);
}
.w-angle {
  font-family: var(--font-sans);
  font-size: 5.5px;
  font-weight: 600;
  fill: var(--text-mid);
}
.w-retro {
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 600;
  fill: var(--text-low);
}
.w-retro.hot { fill: var(--purple-bright); }

.w-deg {
  font-family: var(--font-sans);
  font-weight: 700;
  fill: var(--text-low);
  font-variant-numeric: tabular-nums;
}

.w-deg, .w-star, .w-asc, .w-angle, .w-retro {
  stroke: var(--black);
  stroke-opacity: 0.9;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.w-deg { stroke-width: 1.2px; }
.w-star { stroke-width: 1.1px; }
.w-asc, .w-angle { stroke-width: 1.2px; }
.w-retro { stroke-width: 1px; }

.w-deg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.w-star {
  font-family: var(--font-sans);
  font-size: 5.53px;
  font-weight: 600;
  letter-spacing: 0.02em;
  fill: var(--star);
}
.w-star-tick {
  stroke: var(--star);
  opacity: 0.75;
}

.wheel-center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
  --cc-scale: 1.05;
  max-width: calc(148px * var(--cc-scale));
}
.cc-label {
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-low);
}
.cc-value {
  font-family: var(--font-serif);
  font-size: 27px;
  color: var(--purple-bright);
  line-height: 1.1;
  margin: 1px 0 3px;
}
.cc-value.gold { color: var(--gold); }
.cc-sub { font-size: 7px; color: var(--text-mid); line-height: 1.4; }
.wheel-center .cc-bold { font-weight: 700; }
.wheel-center .cc-sub {
  font-size: calc(clamp(5.25px, 1.7cqw, 6px) * 1.25 * var(--cc-scale));
  max-width: max(calc(18cqw * 1.25 * var(--cc-scale)), 8.5em);
  text-wrap: balance;
}
.wheel-center .cc-sub.cc-two {
  max-width: none;
  text-wrap: nowrap;
}
.wheel-center .cc-two .cc-line { display: block; white-space: nowrap; }
.wheel-center .cc-label { font-size: calc(9px * var(--cc-scale)); }
.wheel-center .cc-value { font-size: calc(27px * var(--cc-scale)); }
@media (max-height: 700px) {
  .wheel-center .cc-label { font-size: calc(8px * var(--cc-scale)); }
  .wheel-center .cc-value { font-size: calc(22px * var(--cc-scale)); }
}

.wheel-center .cc-label,
.wheel-center .cc-value,
.wheel-center .cc-sub {
  text-shadow:
    0 0 0 var(--halo),
    0.5px 0px 0 var(--halo), 0.35px 0.35px 0 var(--halo), 0px 0.5px 0 var(--halo), -0.35px 0.35px 0 var(--halo),
    -0.5px 0px 0 var(--halo), -0.35px -0.35px 0 var(--halo), 0px -0.5px 0 var(--halo), 0.35px -0.35px 0 var(--halo),
    1px 0px 0 var(--halo), 0.87px 0.5px 0 var(--halo), 0.5px 0.87px 0 var(--halo), 0px 1px 0 var(--halo), -0.5px 0.87px 0 var(--halo), -0.87px 0.5px 0 var(--halo),
    -1px 0px 0 var(--halo), -0.87px -0.5px 0 var(--halo), -0.5px -0.87px 0 var(--halo), 0px -1px 0 var(--halo), 0.5px -0.87px 0 var(--halo), 0.87px -0.5px 0 var(--halo);
}
.wheel-center .cc-label { --halo: var(--bg-halo-1); }
.wheel-center .cc-value { --halo: var(--bg-halo-3); }
.wheel-center .cc-sub   { --halo: var(--bg-halo-2); }


.big-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
}

.big-cell {
  background: var(--surface-tint), var(--surface-base, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 5.25px 4px;
  min-height: var(--big-cell-h);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.bg-glyph { color: var(--purple-bright); display: flex; justify-content: center; line-height: 0; margin-bottom: 3px; }
.bg-label { font-size: 10.5px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.bg-sign { font-family: var(--font-serif); font-size: 17px; line-height: 21px; color: var(--text-hi); }
.bg-sub { font-size: 10.5px; line-height: 14px; color: var(--text-low); }

.big-cell > .bg-glyph,
.big-cell > .bg-label,
.big-cell > .bg-sign,
.big-cell > .bg-sub {
  align-self: center;
  text-align: center;
  padding-inline: 0;
  margin-inline: 0;
}
.big-cell > .bg-sub {
  letter-spacing: normal;
  font-feature-settings: normal;
  font-variant-numeric: normal;
  direction: ltr;
  unicode-bidi: isolate;
}


.pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pos-cell {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "glyph name" "sign deg";
  gap: 2px 8px;
  align-items: center;
  background: var(--surface-tint), var(--surface-base, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 11px;
}
.pc-glyph { grid-area: glyph; color: var(--purple-bright); }
.pc-name { grid-area: name; font-size: 12px; color: var(--text-mid); }
.pc-sign { grid-area: sign; color: var(--text-low); }
.pc-deg { grid-area: deg; font-size: 11px; color: var(--text-low); }