:root { --bg:#f4f2ee; --fg:#1a1a1a; --muted:#777; --panel:rgba(244,242,238,.9); --accent:#111; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); overflow:hidden;
  font:14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
#globe { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
#globe:active { cursor:grabbing; }
#header { position:fixed; top:max(12px, env(safe-area-inset-top)); left:16px; right:16px; pointer-events:none; }
#header > * { pointer-events:auto; }
#title { font-size:28px; font-weight:600; letter-spacing:-.01em; }
#stats { color:var(--muted); font-variant-numeric:tabular-nums; min-height:1.4em; }
.picker-row { display:flex; gap:12px; align-items:center; margin-top:6px; }
#picker { font:inherit; color:var(--fg); background:var(--panel); border:1px solid var(--muted); border-radius:8px; padding:4px 10px; width:16em; max-width:60vw; }
a.plain { color:var(--muted); }
#chooser { position:fixed; top:110px; left:16px; right:16px; max-width:640px; background:var(--panel); border-radius:10px; padding:12px 16px; }
#chooser summary { cursor:pointer; }
#chooser a { display:inline-block; margin:4px 10px 4px 0; color:var(--fg); }
#tooltip { position:fixed; z-index:5; pointer-events:none; padding:6px 10px; border-radius:8px; background:var(--panel); box-shadow:0 2px 12px rgba(0,0,0,.25); white-space:pre; }
#panel { position:fixed; right:16px; top:110px; width:min(300px, 80vw); background:var(--panel); border-radius:10px; padding:12px 14px; box-shadow:0 2px 12px rgba(0,0,0,.25); }
#panel h2 { margin:0 0 4px; font-size:16px; } #panel h2 a { display:inline; margin:0; }
#panel dl { margin:8px 0; display:grid; grid-template-columns:auto 1fr; gap:2px 12px; }
#panel dt { color:var(--muted); } #panel dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
#panel a { color:var(--fg); display:block; margin-top:4px; }
#panel .close { float:right; }
#status { position:fixed; top:50%; left:0; right:0; text-align:center; color:var(--muted); pointer-events:none; }
#status.warn { top:auto; bottom:150px; color:#b45309; }
#controls { position:fixed; left:0; right:0; bottom:0; padding:12px 16px max(12px, env(safe-area-inset-bottom));
  background:linear-gradient(transparent, var(--panel) 35%); display:flex; flex-direction:column; gap:8px; }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#year { flex:1; min-width:140px; }
#year-label { font-variant-numeric:tabular-nums; font-weight:600; min-width:3.5em; }
#legend { color:var(--muted); font-size:12px; } #legend .note { display:block; margin-top:2px; } .swatch { display:inline-block; width:18px; height:4px; border-radius:2px; vertical-align:middle; margin:0 4px 0 10px; }
#footnote { color:var(--muted); font-size:12px; min-height:1em; }
button, select { font:inherit; color:var(--fg); background:transparent; border:1px solid var(--muted); border-radius:8px; padding:4px 10px; cursor:pointer; }
button:hover, select:hover { border-color:var(--accent); }
.check { display:inline-flex; gap:4px; align-items:center; color:var(--muted); }
@media (max-width:520px) { #title { font-size:22px; } #panel { top:auto; bottom:170px; right:12px; } }