/* Ecliptic explainer. Panels, controls and readouts come from learn-retrograde.css. */
.ecl-small { fill: #b5c5da; font-size: 17px; letter-spacing: .02em; }
.ecl-label { fill: #e4edf8; font-size: 20px; font-weight: 550; paint-order: stroke; stroke: #0d1729; stroke-width: 5px; stroke-linejoin: round; }
.ecl-sun-text { fill: #ffd08b; }
.ecl-earth-text { fill: #89e5d2; }
.ecl-moon-text { fill: #e8dcc1; }
.ecl-equator-text { fill: #a9c4ff; }
.ecl-plane { fill: #e2b967; fill-opacity: .1; stroke: #e2b967; stroke-opacity: .35; }
.ecl-star-circle { fill: none; stroke: #b6c7df; stroke-opacity: .35; stroke-dasharray: 2 6; }
.ecl-stars { fill: #d3def0; opacity: .75; }
.ecl-orbit { fill: none; stroke: #e2b967; stroke-width: 2.5; }
.ecl-trail { fill: none; stroke: #f4bf54; stroke-width: 5; stroke-linecap: round; }
.ecl-ray { stroke: #e2bf7d; stroke-width: 2; stroke-dasharray: 7 5; }
.ecl-sun { fill: #f4bf54; stroke: #bd7b11; stroke-width: 1.5; }
.ecl-sun-glow { fill: #f4bf54; opacity: .14; }
.ecl-earth { fill: #3a8da4; stroke: #a3d2c2; stroke-width: 1.5; }
.ecl-earth-arrow { fill: none; stroke: #70d6c0; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ecl-seen { fill: #0d1729; stroke: #f4bf54; stroke-width: 3; }
.ecl-seen-glow { fill: #f4bf54; opacity: .22; }
.ecl-grid { fill: none; stroke: #8eabc333; }
.ecl-tick { fill: #b5c5da; font-size: 16px; }
.ecl-band { fill: #e8dcc1; opacity: .09; }
.ecl-ecliptic { stroke: #f4bf54; stroke-width: 3.5; }
.ecl-moon-path { fill: none; stroke: #e8dcc1; stroke-width: 2; stroke-dasharray: 6 5; }
.ecl-equator { fill: none; stroke: #a9c4ff; stroke-width: 2.5; }
.ecl-dial-ring { fill: none; stroke: #8eabc366; stroke-width: 1.5; }
.ecl-nakshatra-tick { stroke: #b6c7df88; stroke-width: 1.5; }
.ecl-sign-label { fill: #c5d4e7; font-size: 18px; }
.ecl-sector { fill: #e2b967; fill-opacity: .2; }
.ecl-turn { fill: none; stroke: #8eabc3; stroke-width: 1.5; }
.ecl-arc { fill: none; stroke: #f4bf54; stroke-width: 3; }
.ecl-moon { fill: #e8dcc1; stroke: #83765d; stroke-width: 1.5; }
.ecl-story .retro-observation > span:last-child { font-variant-numeric: tabular-nums; }
.ecl-story .retro-observation strong { font-variant-numeric: tabular-nums; }
.ecl-story .node-story-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 40rem) {
  .ecl-small { font-size: 22px; }
  .ecl-label { font-size: 25px; }
  .ecl-tick, .ecl-sign-label { font-size: 21px; }
}