/* Eclipse shadows explainer. Panels, controls and readouts come from learn-retrograde.css. */
.shd-small { fill: #b5c5da; font-size: 15px; letter-spacing: .02em; }
.shd-label { fill: #e4edf8; font-size: 19px; font-weight: 550; paint-order: stroke; stroke: #0d1729; stroke-width: 5px; stroke-linejoin: round; }
.shd-legend text, .shd-tick { fill: #b5c5da; font-size: 15px; }
.shd-sun { fill: #f4bf54; stroke: #bd7b11; stroke-width: 1.5; }
.shd-sun-text { fill: #ffd08b; }
.shd-earth { fill: #3a8da4; stroke: #a3d2c2; stroke-width: 1.5; }
.shd-earth-day { fill: #2f7f96; }
.shd-earth-text { fill: #89e5d2; }
.shd-moon { fill: #e8dcc1; stroke: #83765d; stroke-width: 1.5; }
.shd-moon.shd-moon-eclipsed { fill: #b4553f; stroke: #e0715a; }
.shd-moon-text { fill: #e8dcc1; }
.shd-pen { fill: #8eabc3; fill-opacity: .16; }
.shd-pen-strong { fill-opacity: .32; stroke: #b5c5da; stroke-opacity: .5; }
.shd-swatch { fill-opacity: .4; }
.shd-umbra { fill: #02060c; fill-opacity: .82; stroke: #8eabc355; }
.shd-antumbra { fill: #8eabc3; fill-opacity: .1; stroke: #8eabc355; stroke-dasharray: 3 4; }
.shd-spot { fill: none; stroke: #f4bf54; stroke-width: 2.5; }
.shd-spot[hidden], .shd-legend [hidden] { display: none; }
.shd-umbra-dot { fill: #02060c; stroke: #f4bf54; stroke-width: 1.5; }
.shd-axis { stroke: #f4bf5455; stroke-dasharray: 2 6; }
.shd-leader { stroke: #b5c5da; stroke-width: 1; }
.shd-scale { fill: none; stroke: #8eabc3; stroke-width: 1.5; }
.shd-sun-disc { fill: #f4bf54; }
.shd-moon-disc { fill: #0b121f; }
.shd-corona { fill: #f5ead1; opacity: .5; }
.shd-divider { stroke: #8eabc333; }
.shd-view .shd-umbra { stroke: #b5c5da; stroke-opacity: .6; }
.shd-view .shd-antumbra { fill-opacity: .35; stroke: #b5c5da; }
.shd-ground { fill: #3a8da4; fill-opacity: .55; stroke: #a3d2c2; stroke-width: 1.5; }
.shd-overlap { fill: #f4bf54; fill-opacity: .1; }
.shd-bar-moon { fill: #e8dcc1; }
.shd-bar-sun { fill: #f4bf54; }
.shd-story .retro-events button[aria-pressed="true"] { border-color: var(--accent-text); }
.shd-story .node-story-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 40rem) {
  .shd-small { font-size: 19px; }
  .shd-label { font-size: 23px; }
  .shd-legend text, .shd-tick { font-size: 19px; }
}