:root{
  --bg:#f7f3ea; --ink:#17120f; --muted:#766b5d; --panel:rgba(255,252,244,.88);
  --line:rgba(40,30,20,.12); --shadow:0 20px 60px rgba(40,25,10,.16);
}
*{box-sizing:border-box} html,body,#app{height:100%;margin:0}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;background:radial-gradient(circle at 50% 44%, #fffaf0 0%, var(--bg) 48%, #ede3d2 100%);color:var(--ink);overflow:hidden}
.titlebar{position:fixed;z-index:30;top:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:center;padding:14px 22px;pointer-events:none}
h1{margin:0;font-size:clamp(1.35rem,3.4vw,3.4rem);letter-spacing:-.055em;line-height:.95;font-weight:900;text-wrap:balance;text-shadow:0 2px 16px rgba(255,250,240,.75)}
.icon-btn{position:absolute;right:22px;top:18px;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:rgba(255,252,244,.72);backdrop-filter:blur(16px);box-shadow:0 8px 28px rgba(40,25,10,.12);font:800 19px/1 Georgia,serif;cursor:pointer;pointer-events:auto}
#mapShell{height:100%;width:100%;position:relative;overflow:hidden}
#map{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:none;cursor:grab}
#map:active{cursor:grabbing}
.country{stroke:none;transition:opacity .18s ease, fill .18s ease, filter .18s ease}
.country:hover{filter:brightness(.96) saturate(1.08)}
.no-data{fill:#d4cab9;opacity:.35}
.graticule{fill:none;stroke:rgba(70,55,40,.09);stroke-width:.65px;pointer-events:none}
.sphere{fill:#fbf7ef;stroke:none}
.legend-panel{position:absolute;z-index:20;left:22px;bottom:28px;width:min(360px,calc(100vw - 44px));border:1px solid var(--line);border-radius:24px;background:var(--panel);backdrop-filter:blur(20px);box-shadow:var(--shadow);overflow:hidden}
.legend-header{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;border:0;background:transparent;padding:15px 18px;font-weight:900;font-size:1rem;letter-spacing:.02em;cursor:pointer;color:var(--ink)}
.caret{font-size:1.25rem;color:var(--muted);transition:transform .2s ease}.collapsed .caret{transform:rotate(180deg)}
.legend-body{padding:0 18px 18px;display:grid;gap:12px}.collapsed .legend-body{display:none}
label{display:grid;gap:5px;font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:800}
select{width:100%;border:1px solid rgba(40,30,20,.12);border-radius:14px;background:rgba(255,255,255,.62);padding:10px 11px;color:var(--ink);font-size:.9rem;text-transform:none;letter-spacing:0;font-weight:700;outline:none}
.control-row{display:grid;grid-template-columns:1fr .46fr;gap:10px}
.microcopy{font-size:.78rem;line-height:1.35;color:var(--muted)}
.legend-items{display:grid;gap:6px}
.legend-item{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;border:1px solid rgba(40,30,20,.08);background:rgba(255,255,255,.45);border-radius:14px;padding:7px 9px;cursor:pointer;user-select:none}
.legend-item.active{outline:2px solid rgba(20,20,20,.3);background:#fff}
.swatch{height:18px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.legend-label{font-size:.83rem;font-weight:800}.legend-count{font-size:.78rem;color:var(--muted);font-weight:800}
.clear-btn{border:0;border-radius:14px;padding:11px 12px;background:#18130f;color:#fff;font-weight:900;cursor:pointer}
.attribution{position:absolute;right:16px;bottom:10px;z-index:12;color:rgba(50,40,30,.46);font-size:.68rem;letter-spacing:.02em}
.popup{position:absolute;z-index:25;width:min(285px,calc(100vw - 34px));background:rgba(255,252,244,.95);border-radius:18px;padding:14px 16px;border-left:5px solid #111;box-shadow:0 18px 50px rgba(40,25,10,.22);pointer-events:none}
.popup h2{margin:0 0 7px;font-size:1.15rem;letter-spacing:-.02em}.popup .rank{font-size:1.85rem;font-weight:950;letter-spacing:-.06em}.popup .small{color:var(--muted);font-size:.78rem;line-height:1.35}.hidden{display:none!important}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(30,22,15,.38);display:grid;place-items:center;padding:20px}
.modal{width:min(760px,94vw);max-height:86vh;overflow:auto;background:#fffaf1;border-radius:26px;padding:24px 26px;box-shadow:0 30px 90px rgba(0,0,0,.3);position:relative}
.modal h2{margin:0 0 10px;font-size:1.6rem}.modal h3{margin:20px 0 8px}.modal p,.modal li{line-height:1.5;color:#3d3329}.modal a{color:#6f3fb4;font-weight:800}.modal-close{position:absolute;right:14px;top:12px;width:36px;height:36px;border:0;border-radius:99px;background:#1a1510;color:white;font-size:24px;cursor:pointer}
#loading{position:absolute;z-index:60;inset:0;display:grid;place-items:center;background:#f7f3ea;font-weight:900;color:#746858}
.rotate-notice{display:none;position:fixed;z-index:120;left:50%;bottom:18px;transform:translateX(-50%);background:#1a1510;color:white;border-radius:999px;padding:10px 14px;font-weight:800;font-size:.82rem;box-shadow:0 12px 30px rgba(0,0,0,.22)}
@media (max-width:700px) and (orientation:portrait){.rotate-notice{display:block}.titlebar{height:58px;justify-content:flex-start}.titlebar h1{font-size:1.45rem;max-width:72vw}.legend-panel{left:12px;right:12px;bottom:38px;width:auto}.control-row{grid-template-columns:1fr}.attribution{display:none}}

.field-control{position:relative}
.field-hint{
  display:block;margin-top:6px;padding:8px 10px;border-radius:12px;
  background:rgba(28,22,17,.06);color:var(--muted);font-size:.76rem;line-height:1.25;
  border:1px solid rgba(40,30,20,.08)
}
.field-control:focus-within .field-hint,
.field-control:hover .field-hint{background:rgba(255,252,244,.96);color:var(--ink);box-shadow:0 10px 28px rgba(40,25,10,.10)}
.country.no-data{fill:#e6e3dc;stroke:none}