:root { color-scheme: light; font: 16px/1.45 system-ui, sans-serif; color: #193535; background: #f7f8f2; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
main { width: min(1640px, 100%); margin: auto; padding: clamp(10px, 2vw, 32px); }
header { margin-bottom: 24px; }
header p { margin: 4px 0; color: #48615c; }
.eyebrow { font-size: .73rem; font-weight: 700; letter-spacing: .16em; }
h1 { font: 500 clamp(2.6rem, 7vw, 5.25rem)/1.1 Georgia, serif; margin: .1em 0; }
.atlas { overflow: hidden; background: #fffef9; border: 1px solid #cfddd5; border-radius: 18px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; font-size: 1rem; }
select { max-width: 100%; min-height: 44px; border: 1px solid #9fb3a9; border-radius: 8px; padding: 4px 8px; background: white; color: inherit; font: inherit; }
.canvas { position: relative; background: #e8f2f0; }
#map { width: 100%; display: block; touch-action: none; cursor: grab; user-select: none; }
#map.is-dragging, #map.is-dragging .country { cursor: grabbing; }
#status { position: absolute; inset: 10px auto auto 16px; margin: 0; padding: 4px 10px; background: #fffef9; border-radius: 6px; }
.country { stroke: #637f77; stroke-width: .48; cursor: pointer; }
.country.is-current { stroke: #173a38; stroke-width: 1.7; filter: saturate(1.35); }
.city-layer { pointer-events: none; }
.city-symbol { transform: scale(var(--city-scale, 1)); }
.city-symbol circle { fill: #234e4b; stroke: #fffef9; stroke-width: 1.2; }
.city-symbol.capital circle { fill: #843f2f; }
.city-symbol text { fill: #fffef9; text-anchor: middle; font: 700 9px system-ui, sans-serif; }
.card { padding: clamp(14px, 2vw, 24px); background: #fffef9; }
#preview { position: fixed; z-index: 2; width: min(420px, calc(100vw - 16px)); pointer-events: none; border: 1px solid #b7c8bf; border-radius: 12px; box-shadow: 0 8px 26px #274c492a; }
.selection { border-top: 1px solid #cfddd5; }
.card h2 { margin: 0 0 10px; font: 500 1.65rem Georgia, serif; }
.card h3 { font-size: 1rem; margin: 10px 0 4px; }
.card-layout { display: grid; gap: 6px 22px; }
@media (min-width: 640px) {
  #preview { width: min(680px, calc(100vw - 16px)); }
  .card-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-layout > :last-child h3:first-child { margin-top: 0; }
}
.card dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 1rem; }
.card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.card small { color: #4d665e; }
.card p { margin: 6px 0 0; font-size: .76rem; color: #4d665e; }
.climate { margin-top: 12px; padding-top: 2px; border-top: 1px solid #cfddd5; }
.climate table { width: 100%; max-width: 680px; margin-top: 12px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.climate caption { padding-bottom: 6px; text-align: left; font-weight: 600; }
.climate th, .climate td { padding: 5px 4px; border-bottom: 1px solid #cfddd5; text-align: right; }
.climate tr > :first-child { text-align: left; }
.climate tbody th { font-weight: normal; }
footer { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: .77rem; }
footer a { color: #305a52; }