The globe under the Sun of now or of a post, with borders and country names

The Sun lights the globe where it really is (wwwroot/js/sun.js, the Astronomical Almanac's low-precision solar
coordinates): the day map shaded by the Sun's height and the Earth–Sun distance, warm city lights on the night side,
and a twilight blend about 13° wide between them. It shows now, refreshed every 30 s, or the moment of the hovered,
focused or pinned post: a click on a card pins it, and the subsolar point travels there the shorter way round. The
panel's top corner shows that moment, the phase of the day and solar time at the post's place, and the season in its
hemisphere (or in both, for a post without a place). Its tooltip shows the subsolar point, declination, axial tilt,
distance, irradiance, day length and the next equinox or solstice.

Land borders are thin paths. Country names are in the reader's language and appear as the camera comes closer:
largest countries first, away from the globe's edge, never overlapping. They come from world-atlas 2.0.2 (Natural
Earth 1:50m), prepared by tools/globe/prepare-countries.py, and are vendored with their hashes in SOURCES.md.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw

Styles/feed.css

@@ -1,6 +1,6 @@
 /* The feed: post HTML as PrivaPub's Mastodon API sends it (already sanitized; Mastodon's link markup hides the
-   scheme in .invisible and shortens long links with .ellipsis), and the globe's point labels, which replace the
-   look of globe.gl's own tooltip box. */
+   scheme in .invisible and shortens long links with .ellipsis), the globe's point labels, which replace the look of
+   globe.gl's own tooltip box, its CDN groups and country names, and the card it is pinned to. */
 @layer components {
 	.post-content p {
 		margin-block: 0 0.5em;
@@ -88,4 +88,24 @@
 		box-shadow: 0 1px 6px rgb(0 0 0 / 0.25);
 		pointer-events: none;
 	}
+
+	/* A country's name on the globe, on the land by day and by night alike: light text in a dark halo. The globe sets
+	   its size and opacity by zoom, and hides it through visibility (the label renderer owns display). */
+	.globe-country {
+		font-family: ui-sans-serif, system-ui, sans-serif;
+		font-weight: 600;
+		line-height: 1;
+		letter-spacing: 0.03em;
+		white-space: nowrap;
+		color: rgb(255 255 255 / 0.9);
+		text-shadow: 0 0 2px rgb(0 0 0 / 0.95), 0 0 6px rgb(0 0 0 / 0.6);
+		pointer-events: none;
+		user-select: none;
+	}
+
+	/* The card the globe is pinned to (a click on it): its moment and place stay on the globe. */
+	[data-globe-pinned] {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
 }