.numeric-ring {
  overflow: visible;

  --nr-size: min(72vmin, 22rem);
  --nr-ring-width: 2px;
  --nr-ring-color: #000;
  --nr-num-color: #0f172a;
  /* Digits that open the hub deck (button) — link-like blue */
  --nr-digit-hit-color: #2563eb;
  --nr-digit-hit-color-hover: #1d4ed8;
  --nr-num-size: clamp(1rem, 4vmin, 1.75rem);
  --nr-symbol-name-size: clamp(0.55rem, 2.65vmin, 0.92rem);
  --nr-name-outset: clamp(0.85rem, 2.85vmin, 1.35rem);
  /* Digit/deity radial offset adds --nr-orbit-gap-scale × this past size/2 + ring-width/2 */
  --nr-orbit-gap: clamp(4px, 0.42em, 10px);
  --nr-orbit-gap-scale: 2.5;
  /* Seeds resolveChordRadiusRatio; mount mirrors to `--nr-junction-ratio` for SVG chords only. */
  --nr-chord-radius-ratio: calc(1 - var(--nr-ring-width) / var(--nr-size));
  /* Overwritten in mountNumericRing; fallback 1 avoids invalid calc before script */
  --nr-junction-ratio: 1;
  /* Optional: + nudge moves digit slightly toward hub along the spoke */
  --nr-digit-radial-nudge: 0px;
  /* Optional: tweak spoke rotation (degrees, e.g. for optical alignment). */
  --nr-digit-angle-nudge-deg: 0deg;
  /* Tangential slide along the ring (after radial place); negative ≈ half-step CCW, no extra digit rotation. */
  --nr-digit-tangent-shift: -0.5ch;
  /* Legacy spacing vars (deck UI is centered in hub; radial layout removed) */
  --nr-card-first-gap: clamp(2.5rem, 14vmin, 6.5rem);
  --nr-card-stack-gap: 10px;
  --nr-card-step: clamp(36px, 7vmin, 56px);
  --nr-card-chip-size: clamp(0.52rem, 2.1vmin, 0.72rem);
  --nr-chord-stroke: 0.014;
  --nr-chord-color: var(--nr-ring-color);

  /* Gap between stacked deck chips in the centered hub panel */
  --nr-hub-deck-gap: 0.5rem;

  position: relative;
  width: var(--nr-size);
  height: var(--nr-size);
  box-sizing: border-box;
}

.numeric-ring__track {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  border: var(--nr-ring-width) solid var(--nr-ring-color);
  pointer-events: none;
}

.numeric-ring__chords {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.numeric-ring__chords line {
  stroke: var(--nr-chord-color);
  stroke-width: var(--nr-chord-stroke);
  /* Butt caps so endpoints meet the ring circle; round caps extend past (x,y) */
  stroke-linecap: butt;
}

.numeric-ring__label {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: calc(var(--nr-num-size) * 2);
  height: calc(var(--nr-num-size) * 2);
  margin-left: calc(-1 * var(--nr-num-size));
  margin-top: calc(-1 * var(--nr-num-size));
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, sans-serif;
  font-size: var(--nr-num-size);
  color: var(--nr-num-color);
}

.numeric-ring__arm {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Stable transform box — 0×0 arms make translateY(-orbit) resolve poorly */
  width: 2px;
  height: 2px;
  margin-left: -1px;
  margin-top: -1px;
  overflow: visible;
  display: grid;
  place-items: center;
  transform-origin: center center;
  pointer-events: none;
}

.numeric-ring__label-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
  transform: rotate(calc(-1 * var(--nr-slot-deg)));
}

/* Digit 9 only: nudge numeral left (inner transform; deity arm unchanged). */
#ring-one.numeric-ring .numeric-ring__label[data-nr-digit='9'] .numeric-ring__arm--digit .numeric-ring__label-inner {
  transform: rotate(calc(-1 * var(--nr-slot-deg)))
    translateX(calc(-1 * clamp(4px, 0.38vmin, 9px)));
}

/* Digit 7: numeral slight down along upright axes (glyph only). */
#ring-one.numeric-ring .numeric-ring__label[data-nr-digit='7'] .numeric-ring__arm--digit .numeric-ring__label-inner {
  transform: rotate(calc(-1 * var(--nr-slot-deg))) translateY(clamp(3px, 0.35vmin, 8px));
}

/* Digit 2: numeral slight up (glyph only). */
#ring-one.numeric-ring .numeric-ring__label[data-nr-digit='2'] .numeric-ring__arm--digit .numeric-ring__label-inner {
  transform: rotate(calc(-1 * var(--nr-slot-deg)))
    translateY(calc(-1 * clamp(3px, 0.35vmin, 8px)));
}

/* Digit 3: numeral slight up/right vs 6 optical band (glyph only). */
#ring-one.numeric-ring .numeric-ring__label[data-nr-digit='3'] .numeric-ring__arm--digit .numeric-ring__label-inner {
  transform: rotate(calc(-1 * var(--nr-slot-deg))) translateX(clamp(4px, 0.4vmin, 10px))
    translateY(calc(-1 * clamp(3px, 0.35vmin, 8px)));
}

.numeric-ring__symbol-name-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.14em;
  max-width: min(42vw, 9.5rem);
  transform: rotate(calc(-1 * var(--nr-slot-deg)));
}

.numeric-ring--planetEphemeris .numeric-ring__symbol-name-stack {
  max-width: min(38vw, 8.25rem);
}

.numeric-ring__planet-ephem-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08em;
  max-width: min(46vw, 10.5rem);
  transform: rotate(calc(-1 * var(--nr-slot-deg)));
}

.numeric-ring__arm--planet-ephem {
  z-index: 3;
}

.numeric-ring__symbol-name {
  display: inline-block;
  font-size: var(--nr-symbol-name-size);
  font-weight: 550;
  line-height: 1.06;
  text-align: center;
  white-space: nowrap;
}

/* Digit-4 deity title: layout offset (avoid transform cascade issues in browser). */
#ring-one.numeric-ring .numeric-ring__label[data-nr-digit='4'] .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: 0;
  top: calc(-1 * clamp(5px, 0.42vmin, 9px));
}

/* Greek Pantheon — Prometheus (digit 5) slight down */
#ring-one.numeric-ring--greek:not(.numeric-ring--planetEphemeris)
  .numeric-ring__label[data-nr-digit='5']
  .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  top: clamp(8px, 0.62vmin, 18px);
}

/* Greek Pantheon — Poseidon (digit 4): well down/right vs Prometheus optical band */
#ring-one.numeric-ring--greek:not(.numeric-ring--planetEphemeris)
  .numeric-ring__label[data-nr-digit='4']
  .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: clamp(28px, 2.2vmin, 58px);
  top: clamp(12px, 0.95vmin, 28px);
}

/* Greek Pantheon — Kronos (digit 6) down vs Apollo (digit 3) optical horizontal band */
#ring-one.numeric-ring--greek:not(.numeric-ring--planetEphemeris)
  .numeric-ring__label[data-nr-digit='6']
  .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  top: clamp(11px, 0.82vmin, 24px);
}

/* Greek Pantheon — Artemis (digit 2) up/right vs Zeus (digit 7) optical horizontal band */
#ring-one.numeric-ring--greek:not(.numeric-ring--planetEphemeris)
  .numeric-ring__label[data-nr-digit='2']
  .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: clamp(9px, 0.62vmin, 22px);
  top: calc(-1 * clamp(11px, 0.82vmin, 24px));
}

/* Greek Pantheon — Zeus (digit 7) down/left to match Artemis band */
#ring-one.numeric-ring--greek:not(.numeric-ring--planetEphemeris)
  .numeric-ring__label[data-nr-digit='7']
  .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: calc(-1 * clamp(11px, 0.92vmin, 28px));
  top: clamp(12px, 0.9vmin, 28px);
}

/* Greek Pantheon — Hermes (digit 1) slight up/right vs Ares & Hades (digit 8) optical band */
#ring-one.numeric-ring--greek:not(.numeric-ring--planetEphemeris)
  .numeric-ring__label[data-nr-digit='1']
  .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: clamp(7px, 0.5vmin, 16px);
  top: calc(-1 * clamp(6px, 0.52vmin, 15px));
}

/* Greek Pantheon — Ares & Hades (digit 8) well down/left vs Hermes */
#ring-one.numeric-ring--greek:not(.numeric-ring--planetEphemeris)
  .numeric-ring__label[data-nr-digit='8']
  .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: calc(-1 * clamp(22px, 1.95vmin, 52px));
  top: clamp(24px, 2vmin, 56px);
}

/* Greek Pantheon — Aphrodite (digit 9): well left vs numeral optical center */
#ring-one.numeric-ring--greek:not(.numeric-ring--planetEphemeris)
  .numeric-ring__label[data-nr-digit='9']
  .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: calc(-1 * clamp(20px, 1.75vmin, 46px));
}

/* Egyptian Pantheon — Tefnut (digit 1) up vs Shu (digit 8) optical band */
#ring-one.numeric-ring--egyptian:not(.numeric-ring--greek):not(.numeric-ring--planetEphemeris)
  .numeric-ring__label[data-nr-digit='1']
  .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  top: calc(-1 * clamp(11px, 0.88vmin, 24px));
}

/* Egyptian Pantheon — Nephthys (digit 4) up/right vs Set (digit 5) optical band */
#ring-one.numeric-ring--egyptian:not(.numeric-ring--greek):not(.numeric-ring--planetEphemeris)
  .numeric-ring__label[data-nr-digit='4']
  .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: clamp(16px, 1.18vmin, 34px);
  top: calc(-1 * clamp(10px, 0.92vmin, 23px));
}

/* Egyptian Pantheon — Osiris (digit 6) down/left vs Isis (digit 3); --egyptian = any names-on, excluded when Greek or Planets */
#ring-one.numeric-ring--egyptian:not(.numeric-ring--greek):not(.numeric-ring--planetEphemeris)
  .numeric-ring__label[data-nr-digit='6']
  .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: calc(-1 * clamp(12px, 0.95vmin, 28px));
  top: clamp(13px, 1vmin, 30px);
}

#ring-one.numeric-ring--planetEphemeris .numeric-ring__label[data-nr-digit='4'] .numeric-ring__symbol-name {
  left: clamp(9px, 0.62vmin, 18px);
  top: calc(-1 * clamp(12px, 0.9vmin, 22px));
}

/* Digit-1 (Mercury): stronger up/right, Planets mode */
#ring-one.numeric-ring--planetEphemeris .numeric-ring__label[data-nr-digit='1'] .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: clamp(8px, 0.55vmin, 18px);
  top: calc(-1 * clamp(8px, 0.52vmin, 18px));
}

/* Digit-8 (Mars, Pluto): down/left, Planets mode */
#ring-one.numeric-ring--planetEphemeris .numeric-ring__label[data-nr-digit='8'] .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: calc(-1 * clamp(8px, 0.65vmin, 22px));
  top: clamp(10px, 0.75vmin, 26px);
}

/* Digit-2 (Moon): slight right in Planets mode only */
#ring-one.numeric-ring--planetEphemeris .numeric-ring__label[data-nr-digit='2'] .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: clamp(9px, 0.42vmin, 17px);
}

/* Digit-7 (Jupiter): down/left vs digit-2 (Moon) optical line, Planets mode only */
#ring-one.numeric-ring--planetEphemeris .numeric-ring__label[data-nr-digit='7'] .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: calc(-1 * clamp(16px, 1.5vmin, 42px));
  top: clamp(16px, 1.35vmin, 38px);
}

/* Digit-3 (The Sun): up vs prior + keep right; tune to Saturn’s horizontal line */
#ring-one.numeric-ring--planetEphemeris .numeric-ring__label[data-nr-digit='3'] .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  left: clamp(20px, 1.65vmin, 48px);
  top: calc(-1 * clamp(8px, 0.65vmin, 22px));
}

/* Digit-6 (Saturn): Planets title optical band */
#ring-one.numeric-ring--planetEphemeris .numeric-ring__label[data-nr-digit='6'] .numeric-ring__symbol-name {
  position: relative;
  display: inline-block;
  top: clamp(20px, 1.45vmin, 46px);
}

.numeric-ring__symbol-ephem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06em;
  width: 100%;
}

.numeric-ring--planetEphemeris .numeric-ring__symbol-ephem {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06em;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.22em 0.42em;
  background: rgb(255 255 255 / 0.96);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.numeric-ring--planetEphemeris .numeric-ring__symbol-ephem-line {
  font-size: clamp(0.42rem, 1.85vmin, 0.64rem);
  color: #475569;
}

.numeric-ring__symbol-ephem-line {
  font-size: clamp(0.45rem, 1.95vmin, 0.68rem);
  font-weight: 500;
  line-height: 1.22;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
  color: #64748b;
}

.numeric-ring--planetEphemeris {
  --nr-planet-title-outset: clamp(0.98rem, 3.15vmin, 1.48rem);
  /* Larger fraction moves interior ephemeris radially outward toward the black ring (still inside digit orbit). */
  --nr-planet-ephem-orbit-fraction: 0.78;
}

.numeric-ring__digit-hit {
  pointer-events: auto;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  font-variant-numeric: inherit;
  color: var(--nr-digit-hit-color);
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
}

.numeric-ring__digit-hit:hover {
  color: var(--nr-digit-hit-color-hover);
}

.numeric-ring__digit-hit:focus-visible {
  outline: 2px solid var(--nr-digit-hit-color);
  outline-offset: 2px;
  border-radius: 3px;
}

.numeric-ring__hub-deck {
  position: absolute;
  inset: 0;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: clamp(0.75rem, 4vmin, 1.75rem);
}

.numeric-ring__hub-deck-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nr-hub-deck-gap);
  max-width: none;
  overflow: visible;
  pointer-events: auto;
}

.numeric-ring__card-hit {
  pointer-events: auto;
  cursor: pointer;
  margin: 0;
  padding: 0.12em 0.38em 0.14em;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  font-size: var(--nr-card-chip-size);
  font-weight: 650;
  font-variant-numeric: normal;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
  text-align: center;
  transform: rotate(calc(-1 * var(--nr-slot-deg)));
}

.numeric-ring__card-hit:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}

.numeric-ring__card-hit--hub {
  transform: none;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  min-width: 0;
}

.numeric-ring__card-chip-inner {
  display: inline-block;
  white-space: nowrap;
}

.numeric-ring__card-hit--hub .numeric-ring__card-chip-inner {
  white-space: normal;
  overflow-wrap: break-word;
}