:root{
  --page:#f7f7f4; --surface:#fcfcfb; --sunk:#f1f1ec;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --rule:rgba(11,11,11,.12); --accent:#2a78d6;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --panel:360px;
}
@media (prefers-color-scheme:dark){:root{
  --page:#0d0d0d; --surface:#1a1a19; --sunk:#141413;
  --ink:#fff; --ink-2:#c3c2b7; --muted:#898781;
  --rule:rgba(255,255,255,.14); --accent:#3987e5;
}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--sans);background:var(--page);color:var(--ink);
  display:flex;flex-direction:column;overflow:hidden}
.bar{display:flex;align-items:center;gap:16px;padding:10px 16px;
  border-bottom:1px solid var(--rule);background:var(--surface);flex:none}
.brand{display:flex;flex-direction:column;line-height:1.2}
.mark{font-family:var(--serif);font-size:1.15rem}
.sub{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:2px}
.ghost{font:inherit;font-size:.82rem;background:transparent;border:1px solid var(--rule);
  color:var(--ink-2);border-radius:8px;padding:6px 12px;cursor:pointer}
.ghost:hover{color:var(--ink);border-color:var(--muted)}
.ghost.wide{width:100%;margin-top:8px}
main{flex:1;display:flex;min-height:0}
#map{flex:1;min-width:0}
aside{width:var(--panel);flex:none;overflow-y:auto;background:var(--surface);
  border-left:1px solid var(--rule);padding:16px}
body.nopanel aside{display:none}
.grp{margin-bottom:22px}
.grp h2{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;font-weight:400}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pills button{font:inherit;font-size:.82rem;background:var(--sunk);border:1px solid transparent;
  color:var(--ink-2);border-radius:999px;padding:6px 12px;cursor:pointer}
.pills button[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:600}
.note{font-size:.82rem;color:var(--muted);line-height:1.5;margin:10px 0 0}
.row{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-2);margin-top:10px}
.row input[type=range]{flex:1}
#search{width:100%;font:inherit;font-size:.85rem;padding:8px 10px;border-radius:8px;
  border:1px solid var(--rule);background:var(--page);color:var(--ink)}
dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:.85rem}
dt{color:var(--ink-2)} dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
#roName{font-family:var(--serif);font-size:1.05rem;text-transform:none;letter-spacing:0;
  color:var(--ink);margin-bottom:10px}
.lgrow{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-2);margin-bottom:5px}
.sw{width:22px;height:12px;border-radius:3px;border:1px solid var(--rule);flex:none}
.tip{position:fixed;z-index:9;pointer-events:none;background:var(--surface);color:var(--ink);
  border:1px solid var(--rule);border-radius:9px;padding:8px 10px;font-size:.82rem;
  box-shadow:0 6px 22px rgba(0,0,0,.18);opacity:0;transition:opacity .1s;max-width:240px}
.tip.on{opacity:1}
.tip b{font-variant-numeric:tabular-nums}
.maplibregl-ctrl-attrib{font-size:10px}
@media (max-width:820px){
  main{flex-direction:column}
  aside{width:100%;max-height:44vh;border-left:0;border-top:1px solid var(--rule)}
  #map{min-height:46vh}
}