* { box-sizing:border-box; margin:0; padding:0; }
  html, body { height:100%; background:#0a0e16; color:#d8d5ce; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size:15px; line-height:1.5; overflow:hidden; }
  #shell { display:flex; flex-direction:column; height:100vh; padding:12px 16px; gap:8px; }
  #header { flex-shrink:0; display:flex; flex-direction:column; gap:3px; }
  h1 { font-size:17px; font-weight:600; color:#e8e5de; letter-spacing:-0.01em; }
  #stats { font-size:13px; color:rgba(255,255,255,0.4); }
  #stats span { color:#a8c8f0; font-weight:600; font-size:14px; }
  #intro { font-size:12px; color:rgba(255,255,255,0.40); line-height:1.55; margin-top:2px; max-width:780px; }
  #intro a { color:rgba(168,200,240,0.55); text-decoration:none; }
  #intro a:hover { color:rgba(168,200,240,0.9); }
  #controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex-shrink:0; }
  #search-wrap { position:relative; flex:1; min-width:180px; max-width:300px; }
  #search { width:100%; padding:7px 12px 7px 34px; font-family:inherit; font-size:13px; border:1px solid rgba(255,255,255,0.1); border-radius:8px; background:rgba(255,255,255,0.05); color:#d8d5ce; outline:none; transition:border-color .15s; }
  #search::placeholder { color:rgba(255,255,255,0.22); }
  #search:focus { border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.07); }
  .s-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.28; pointer-events:none; }
  #filter-rows { display:flex; flex-direction:column; gap:5px; flex-shrink:0; }
  .filter-row { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
  .filter-label { font-size:11px; color:rgba(255,255,255,0.2); min-width:46px; font-weight:400; }
  .fpill { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-family:inherit; font-size:12px; font-weight:500; cursor:pointer; border:1px solid transparent; background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.5); transition:opacity .15s, border-color .15s, color .15s; user-select:none; }
  .fpill .fdot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .fpill .fcount { font-size:10px; color:rgba(255,255,255,0.25); margin-left:1px; }
  .fpill.active { border-color:rgba(255,255,255,0.28); color:#e8e5de; background:rgba(255,255,255,0.09); }
  .fpill.active .fcount { color:rgba(255,255,255,0.45); }
  .fpill.muted { opacity:.2; }
  .fpill:hover { opacity:1; }
  .fpill.all-pill { background:rgba(255,255,255,0.08); }
  .fpill.all-pill.active { border-color:rgba(255,255,255,0.35); color:#fff; background:rgba(255,255,255,0.12); }
  .tpill { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; font-family:inherit; font-size:12px; font-weight:500; cursor:pointer; border:1px solid transparent; transition:opacity .15s, border-color .15s; user-select:none; opacity:.55; }
  .tpill.active { border-color:rgba(255,255,255,0.28); opacity:1; }
  .tpill.muted { opacity:.18; }
  .tpill:hover { opacity:1; }
  .tpill.all-tpill { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.7); }
  .tpill.all-tpill.active { border-color:rgba(255,255,255,0.35); color:#fff; background:rgba(255,255,255,0.12); }
  #colour-key { display:flex; flex-wrap:wrap; gap:10px; align-items:center; flex-shrink:0; padding:4px 2px; border-top:1px solid rgba(255,255,255,0.05); }
  .ck-item { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:rgba(255,255,255,0.35); }
  .ck-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  #map-wrap { position:relative; flex:1; border-radius:10px; overflow:hidden; background:#0a0e16; border:1px solid rgba(255,255,255,0.07); min-height:0; }
  #map-svg { width:100%; height:100%; display:block; cursor:grab; }
  #map-svg:active { cursor:grabbing; }
  #zoom-controls { position:absolute; bottom:12px; left:12px; display:flex; flex-direction:column; gap:4px; z-index:10; }
  .zoom-btn { width:28px; height:28px; border-radius:6px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.6); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .1s; user-select:none; line-height:1; font-family:inherit; }
  .zoom-btn:hover { background:rgba(255,255,255,0.13); color:#fff; }
  #zoom-hint { position:absolute; bottom:14px; right:14px; font-size:11px; color:rgba(255,255,255,0.18); pointer-events:none; letter-spacing:0.01em; }
  #hover-tip { display:none; position:absolute; z-index:15; pointer-events:none; background:rgba(14,18,28,0.94); border:1px solid rgba(255,255,255,0.12); border-radius:7px; padding:5px 11px; font-family:inherit; font-size:12px; color:#d8d5ce; white-space:nowrap; line-height:1.5; }
  #popover { display:none; position:absolute; z-index:20; font-family:inherit; background:#141820; border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:12px 14px; min-width:240px; max-width:310px; max-height:400px; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,0.6); }
  #popover::-webkit-scrollbar { width:3px; }
  #popover::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:2px; }
  .pop-head { display:flex; align-items:flex-start; gap:7px; margin-bottom:8px; padding-bottom:8px; padding-right:18px; border-bottom:1px solid rgba(255,255,255,0.08); position:sticky; top:0; background:#141820; z-index:1; }
  .pop-head-text { display:flex; flex-direction:column; gap:3px; }
  .pop-head-label { font-size:14px; font-weight:600; color:#e8e5de; line-height:1.2; }
  .pop-head-sub { font-size:11px; color:rgba(255,255,255,0.32); }
  .pop-head-anchor { font-size:10px; color:rgba(200,160,48,0.6); letter-spacing:.04em; font-weight:500; }
  .pop-close { position:absolute; top:12px; right:12px; cursor:pointer; opacity:.35; line-height:1; transition:opacity .1s; }
  .pop-close:hover { opacity:.8; }
  /* Resource rows — no longer anchor tags, just divs */
  .res-entry { display:flex; flex-direction:column; gap:3px; padding:7px 7px 6px; border-radius:6px; transition:background .1s, opacity .15s; }
  .res-entry:hover { background:rgba(255,255,255,0.05); }
  .res-entry.type-dim { opacity:0.35; }
  .res-entry.type-match .res-desc { max-height:60px; opacity:1; }
  .res-row { display:flex; align-items:center; gap:7px; }
  .pop-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
  .res-name { font-size:13px; font-weight:500; color:#e0ddd8; line-height:1.3; }
  .res-chips { display:flex; flex-wrap:wrap; gap:3px; padding-left:13px; }
  .res-chip { display:inline-block; font-size:10px; padding:1px 6px; border-radius:10px; font-weight:500; transition:opacity .15s; }
  .res-chip.chip-dim { opacity:0.25; }
  .res-desc { font-size:11px; color:rgba(255,255,255,0.32); max-height:0; opacity:0; overflow:hidden; transition:max-height .15s ease, opacity .15s ease; padding-left:13px; line-height:1.4; }
  .res-entry:hover .res-desc { max-height:60px; opacity:1; }
  /* Multi-link buttons */
  .res-links { display:flex; flex-wrap:wrap; gap:4px; padding-left:13px; margin-top:1px; }
  .res-link-btn { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:5px; font-size:11px; font-weight:500; color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); text-decoration:none; transition:background .1s, color .1s; }
  .res-link-btn:hover { background:rgba(255,255,255,0.13); color:#e8e5de; }
  .res-link-arrow { font-size:10px; opacity:0.5; }