
:root { --bg:#f6f7f9; --fg:#1c2530; --muted:#5d6b7a; --card:#fff; --line:#dde2e8; --head:#eef1f5; --link:#0b5cad; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#10161d; --fg:#e3e8ee; --muted:#93a1b0; --card:#18212b; --line:#2a3644; --head:#1f2a36; --link:#7cb7ff; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
main { max-width:820px; margin:0 auto; padding:8px 16px 48px; }
h1 { font-size:1.6rem; margin:20px 0 4px; }
a { color:var(--link); }
.lang { float:right; margin:24px 0 0; font-size:.9rem; }
h2 { font-size:1.2rem; margin:32px 0 10px; padding-top:14px; border-top:1px solid var(--line); }
.meta, .muted { color:var(--muted); }
.meta { font-size:.9rem; }
.note { font-size:.9rem; color:var(--muted); }
.cards { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.card { flex:1 1 200px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:.9rem; }
.big { font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums; }
.chart { width:100%; height:auto; background:var(--card); border:1px solid var(--line); border-radius:8px; }
.chart .grid { stroke:var(--line); stroke-width:1; }
.chart .ax { fill:var(--muted); font-size:11px; }
.chart .val { fill:var(--fg); font-size:9px; }
.legend { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:.88rem; }
.legend svg { vertical-align:-1px; margin-right:5px; border-radius:2px; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); font-size:.92rem; }
th, td { padding:6px 10px; text-align:left; border-bottom:1px solid var(--line); }
th { background:var(--head); }
th:not(:first-child), td:not(:first-child) { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.barcol { width:30%; }
.hbar { width:100%; height:10px; display:block; }
.chart.narrow { display:none; }
@media (max-width:600px) { .chart.wide { display:none; } .chart.narrow { display:block; }
  .barcol, .cc { display:none; } th, td { padding:5px 5px; } table { font-size:.82rem; }
  th:not(:first-child) { white-space:normal; } .countries td:first-child { white-space:nowrap; } }
