/* Moon months explainer. Panels, controls and readouts come from learn-retrograde.css. */
.mon-small { fill: #b5c5da; font-size: 17px; letter-spacing: .02em; }
.mon-label { fill: #e4edf8; font-size: 20px; font-weight: 550; paint-order: stroke; stroke: #0d1729; stroke-width: 5px; stroke-linejoin: round; }
.mon-sun-text { fill: #ffd08b; }
.mon-earth-text { fill: #89e5d2; }
.mon-moon-text { fill: #e8dcc1; }
.mon-star-text { fill: #a9c4ff; }
.mon-stars { fill: #d3def0; opacity: .55; }
.mon-orbit { fill: none; stroke: #e2b967; stroke-opacity: .4; stroke-width: 1.5; stroke-dasharray: 4 6; }
.mon-arc { fill: none; stroke: #70d6c0; stroke-width: 4; stroke-linecap: round; }
.mon-sun { fill: #f4bf54; stroke: #bd7b11; stroke-width: 1.5; }
.mon-sun-glow { fill: #f4bf54; opacity: .14; }
.mon-sun-ray { stroke: #f4bf54; stroke-width: 2; stroke-opacity: .8; }
.mon-star-ray { stroke: #a9c4ff; stroke-width: 2.5; stroke-dasharray: 7 5; }
.mon-star { fill: #a9c4ff; }
.mon-start circle { fill: none; stroke: #70d6c0; stroke-opacity: .6; stroke-width: 1.5; }
.mon-start line { stroke: #a9c4ff; stroke-opacity: .35; stroke-width: 1.5; stroke-dasharray: 4 5; }
.mon-moon-orbit { fill: none; stroke: #8eabc366; stroke-width: 1.5; }
.mon-earth { fill: #3a8da4; stroke: #a3d2c2; stroke-width: 1.5; }
.mon-moon-dark { fill: #3b4659; stroke: #83765d; stroke-width: 1; }
.mon-moon-lit { fill: #e8dcc1; }
.mon-gap { fill: #f4bf54; opacity: .12; }
.mon-bar-stars { fill: #a9c4ff; }
.mon-bar-phase { fill: #e8dcc1; }
.mon-tick { fill: #b5c5da; font-size: 16px; }
.mon-axis { fill: none; stroke: #8eabc3; stroke-width: 1.5; }
.mon-tithi-waxing { fill: #e8dcc1; }
.mon-tithi-waning { fill: #8a8170; }
.mon-nakshatra { fill: #a9c4ff; opacity: .85; }
.mon-story .retro-observation > span:first-child, .mon-story .retro-observation strong { font-variant-numeric: tabular-nums; }
.mon-story .node-story-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 40rem) {
  .mon-small { font-size: 21px; }
  .mon-label { font-size: 24px; }
  .mon-tick { font-size: 20px; }
}