:root{--paper:#e9eae6;--panel:#f2f3f0;--sunk:#e2e4df;--ink:#1a1c1e;--muted:#6e716d;
  --rule:#cfd1cb;--org:#a85f22;--person:#3f6390;--accent:#8f2f45;--edge:#b9bcb5;--focus:#3f6390;
  --g0:#3f6390;--g1:#4a7c59;--g2:#a85f22;--g3:#7d5ba6}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#15171a;--panel:#1c1f23;--sunk:#0e1013;--ink:#e3e5e2;--muted:#93968f;
  --rule:#2e3237;--org:#d1873c;--person:#7aa2d0;--accent:#d4667f;--edge:#3a3e44;--focus:#7aa2d0;
  --g0:#7aa2d0;--g1:#77b28c;--g2:#d1873c;--g3:#b18cd9}}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overscroll-behavior:none;
  -webkit-overflow-scrolling:auto}
body{background:var(--paper);color:var(--ink);overflow:hidden;
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;-webkit-text-size-adjust:100%}
header{position:fixed;inset:0 0 auto 0;z-index:6;background:var(--paper);
  border-bottom:1px solid var(--rule);padding:8px 10px}
.row1{display:flex;gap:8px;align-items:center}
.tag{flex:none;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--rule);border-radius:3px;padding:4px 6px}
#q{flex:1;min-width:0;padding:9px 11px;font:16px/1.2 inherit;color:var(--ink);
  background:var(--panel);border:1px solid var(--rule);border-radius:4px;-webkit-appearance:none}
#q:focus{outline:2px solid var(--focus);outline-offset:-1px}
.toggles{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.tg{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 9px;
  border:1px solid var(--rule);border-radius:11px;background:var(--panel);cursor:pointer;
  color:var(--muted);user-select:none}
.tg[aria-pressed="true"]{color:var(--ink);border-color:currentColor}
.tg i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.tg b{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:10.5px;opacity:.75}
main{position:absolute;inset:82px 0 0 0}
#stage{width:100%;height:100%;background:var(--sunk);
  overscroll-behavior:none;touch-action:none}
#hits{position:fixed;left:10px;right:10px;top:84px;max-height:52vh;overflow-y:auto;z-index:7;
  background:var(--panel);border:1px solid var(--rule);border-radius:4px;display:none;
  box-shadow:0 6px 22px rgba(0,0,0,.16)}
#hits.on{display:block}
#hits button{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--rule);padding:9px 11px;font:inherit;color:inherit;cursor:pointer}
#hits button:hover{background:var(--sunk)}
.dot{flex:none;width:8px;height:8px;border-radius:50%;transform:translateY(-1px)}
.nm{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg{margin-left:auto;flex:none;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--muted);font-variant-numeric:tabular-nums}
#card{position:fixed;left:10px;right:10px;bottom:10px;z-index:6;background:var(--panel);
  border:1px solid var(--rule);border-radius:5px;padding:12px 13px;display:none;
  box-shadow:0 3px 18px rgba(0,0,0,.14);max-height:38vh;overflow-y:auto}
#card.on{display:block}
/* The card floats over the map rather than pushing it aside, so closing it
   leaves no gap and opening it moves nothing. */
@media(min-width:820px){#card{left:auto;right:12px;width:330px;top:94px;bottom:12px;max-height:none}}
#card h2{font-family:Spectral,Georgia,serif;font-size:19px;font-weight:600;margin:0 0 2px;
  line-height:1.2;padding-right:24px}
#card .sub{margin:0 0 9px;font-size:12.5px;color:var(--muted)}
#card ul{list-style:none;margin:8px 0 0;padding:0}
#card li{border-top:1px solid var(--rule);padding:7px 0}
#card li button{display:flex;gap:7px;align-items:baseline;width:100%;text-align:left;
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;min-width:0}
#card li button>span{min-width:0;flex:1}
#card li .nm{white-space:normal;overflow-wrap:anywhere}
#card .role{font-size:11.5px;color:var(--muted)}
#card .links{display:flex;gap:13px;margin-top:9px;font-size:13px}
#card a{color:var(--focus)}
#close{position:absolute;top:7px;right:8px;background:none;border:0;color:var(--muted);
  font-size:19px;line-height:1;cursor:pointer;padding:2px 5px}
#status{position:fixed;left:10px;bottom:10px;z-index:5;font-size:11.5px;color:var(--muted);
  background:color-mix(in srgb,var(--paper) 84%,transparent);padding:5px 8px;border-radius:4px;
  /* It carries what the map came out like as well as what is on it, so on a
     narrow screen let it wrap rather than run off the edge. */
  max-width:calc(100vw - 20px)}
#card.on ~ #status{display:none}
@media(min-width:820px){#card.on ~ #status{display:block}}
.spin{position:fixed;inset:0;display:grid;place-items:center;background:var(--paper);z-index:9;
  font-size:13px;color:var(--muted);text-align:center;padding:20px}
.spin b{display:block;font-family:Spectral,Georgia,serif;font-size:21px;color:var(--ink);
  font-weight:600;margin-bottom:6px}
.tg.depth{margin-left:auto}
.empty{color:var(--muted);font-size:13px;padding:12px 2px;margin:0}
#ms{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);
  margin-left:6px;white-space:nowrap}
#pop{flex:none;padding:8px 9px;font:500 12px "IBM Plex Sans",sans-serif;
  color:var(--focus);background:var(--panel);border:1px solid var(--rule);
  border-radius:4px;text-decoration:none;white-space:nowrap}
@media(min-width:820px){#pop{display:none}}
#count{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted)}
#clear{flex:none;padding:8px 9px;font:500 12px "IBM Plex Sans",sans-serif;color:var(--muted);
  background:var(--panel);border:1px solid var(--rule);border-radius:4px;cursor:pointer}
#clear:hover{color:var(--ink);border-color:var(--focus)}
.tg.num{font-family:"IBM Plex Mono",monospace}
.seg{display:inline-flex;align-items:center;gap:5px;margin-left:auto}
.seg>span:first-child{font-size:11px;color:var(--muted)}
.seg .tg.num{padding:4px 10px}
#c-more{font-size:12px;color:var(--muted);margin:6px 0 0;font-style:italic}
.howto{font-size:12px;color:var(--muted);padding:8px 10px;border-top:1px solid var(--rule);
  line-height:1.45}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* The layout panel. Closed by default; it covers the map only while open. */
.tg.wrench::before{content:"";width:9px;height:9px;flex:none;border-radius:2px;
  border:1.5px solid currentColor}
/* On a phone it sits at the bottom, so you can watch the map change while you
   drag a slider. On a wide screen there is room for it beside the map. */
#tune{position:fixed;z-index:8;left:10px;right:10px;bottom:10px;max-height:47vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--rule);border-radius:5px;padding:11px 13px 13px;
  box-shadow:0 -4px 26px rgba(0,0,0,.18)}
@media(min-width:820px){#tune{left:auto;right:12px;width:300px;top:94px;bottom:12px;
  max-height:none;box-shadow:0 8px 26px rgba(0,0,0,.18)}}
#tune h3{font-family:Spectral,Georgia,serif;font-size:17px;font-weight:600;margin:0 0 2px}
#tune h4{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  margin:11px 0 5px;font-weight:500;font-family:"IBM Plex Mono",monospace}
#tune .row{margin:0 0 9px}
#tune label{display:flex;align-items:baseline;gap:8px;font-size:13px;margin-bottom:3px}
#tune .t{flex:1}
#tune .n{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums}
#tune .why{margin:2px 0 0;font-size:11.5px;color:var(--muted);line-height:1.35}
#tune input[type=range]{width:100%;accent-color:var(--focus);margin:0}
#tune input[type=checkbox]{accent-color:var(--focus);width:16px;height:16px}
#tune .reset{margin-top:6px;padding:7px 10px;font:500 12px "IBM Plex Sans",sans-serif;
  color:var(--muted);background:var(--sunk);border:1px solid var(--rule);border-radius:4px;
  cursor:pointer;width:100%}
#tune .reset:hover{color:var(--ink);border-color:var(--focus)}

/* What the card lets you do, and what Wikipedia says about the entity. */
#card .acts{display:flex;gap:7px;margin:10px 0 2px;flex-wrap:wrap}
#card .acts button{flex:1;min-width:130px;padding:7px 9px;font:500 12px "IBM Plex Sans",sans-serif;
  color:var(--ink);background:var(--sunk);border:1px solid var(--rule);border-radius:4px;cursor:pointer}
#card .acts button:hover{border-color:var(--focus)}
#c-wiki-say{display:none;font-size:12.5px;line-height:1.45;margin:8px 0 0;
  padding-left:9px;border-left:2px solid var(--rule);color:var(--ink)}
#c-wiki-say.on{display:block}
#c-wiki-say::after{content:" — Wikipedia";color:var(--muted);font-size:11px}

/* The warning before a view this device would struggle with. */
#ask{position:fixed;inset:0;z-index:10;display:none;place-items:center;padding:20px;
  background:color-mix(in srgb,var(--sunk) 72%,transparent)}
#ask.on{display:grid}
#ask .sheet{background:var(--panel);border:1px solid var(--rule);border-radius:6px;
  padding:16px 17px;max-width:400px;box-shadow:0 10px 34px rgba(0,0,0,.24)}
#ask h3{font-family:Spectral,Georgia,serif;font-size:18px;font-weight:600;margin:0 0 6px}
#ask p{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0 0 14px}
#ask .row2{display:flex;gap:8px;justify-content:flex-end}
#ask button{padding:8px 13px;font:500 13px "IBM Plex Sans",sans-serif;border-radius:4px;
  border:1px solid var(--rule);background:var(--sunk);color:var(--ink);cursor:pointer}
#ask #ask-yes{border-color:var(--focus);color:var(--focus)}
#c-wiki-say a{color:var(--focus);text-decoration:none;border-bottom:1px solid var(--rule)}
#c-wiki-say a:hover{border-bottom-color:var(--focus)}
#c-wiki-say.none{color:var(--muted);font-style:italic;border-left-color:transparent;padding-left:0}
#c-wiki-say.none::after{content:""}
#tune .stamp{margin:10px 0 0;font-family:"IBM Plex Mono",monospace;font-size:10px;
  color:var(--muted);text-align:center}

/* The notice while a map too big to watch is arranged out of sight. */
#busy{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;
  min-width:min(280px,72vw);padding:14px 16px 12px;border-radius:10px;
  background:var(--panel);border:1px solid var(--rule);
  box-shadow:0 8px 30px rgba(0,0,0,.13);text-align:center}
#busy b{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:9px}
#busy span{display:block;height:3px;border-radius:2px;background:var(--sunk);overflow:hidden}
#busy i{display:block;height:100%;border-radius:2px;background:var(--accent);
  width:0;transition:width .18s linear}