@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* =====================================================================
   XENO CONSOLE — UI layer
   =====================================================================
   A full visual replacement for the original CRT/dossier presentation.
   The archive is now presented as a records console: a fixed navigator
   rail, a slim application bar, dense record tables and flat, neutral
   surfaces. Every brand hue is retained — phosphor #cdff06, amber,
   signal red, steel blue, and the light-mode violet — but they are used
   as *state* colour on a neutral ground rather than as atmosphere.

   This sheet loads after each page's inline <style>, so it wins on
   source order at equal specificity. It changes presentation only: no
   class contract, id or DOM hook used by the page scripts is altered.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root{
  /* surface ladder — neutral grey, built up from the #242424 page ground so
     panels, headers and hover states each read as a distinct step */
  --void:#242424;
  --surface:#2b2b2b;
  --surface-2:#323232;
  --surface-3:#3b3b3b;
  --panel:#2b2b2b;
  --panel-2:#323232;
  --line:#3a3a3a;
  --line-2:#4b4b4b;

  /* text ladder */
  --ink:#ececec;
  --ink-2:#b7b7b7;
  --dim:#8d8d8d;

  /* brand hues — unchanged */
  --phosphor:#cdff06;
  --phosphor-dim:#9cc406;
  --acid:#cdff06;
  --amber:#ffc043;
  --signal:#ff4d6d;
  --steel:#7fa3c9;
  --cyan:#5fe6ff;
  --lum:#b98cff;
  --lum-dim:#8a63c9;
  --redact:#101010;

  /* tinted washes */
  --accent-wash:rgba(205,255,6,.10);
  --accent-line:rgba(205,255,6,.30);

  /* geometry */
  --r-sm:5px;
  --r:8px;
  --r-lg:12px;
  --rail:264px;
  --bar-h:56px;

  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 6px 20px -12px rgba(0,0,0,.8);
  --shadow-3:0 24px 60px -28px rgba(0,0,0,.85);

  --ui:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

:root[data-theme="light"]{
  --void:#f4f6f3;
  --surface:#ffffff;
  --surface-2:#f7f9f5;
  --surface-3:#eef1eb;
  --panel:#ffffff;
  --panel-2:#f7f9f5;
  --line:#e0e5db;
  --line-2:#ccd4c6;
  --ink:#151d19;
  --ink-2:#4a5a52;
  --dim:#6d7d74;
  --phosphor:#6f42c4;
  --phosphor-dim:#8a63c9;
  --acid:#6f42c4;
  --amber:#9a5f00;
  --signal:#c81b3f;
  --steel:#2f5e8c;
  --cyan:#0e7490;
  --lum:#6f42c4;
  --lum-dim:#8a63c9;
  --mute:#4a5a52;
  --accent-wash:rgba(111,66,196,.09);
  --accent-line:rgba(111,66,196,.28);
  --shadow-1:0 1px 2px rgba(20,30,25,.06);
  --shadow-2:0 6px 20px -12px rgba(20,30,25,.22);
  --shadow-3:0 24px 60px -28px rgba(20,30,25,.28);
}

/* ---------------------------------------------------------------
   2. ATMOSPHERE REMOVAL
   The original look was carried by a fixed scanline overlay, a
   vignette, phosphor glows and animated sweeps. All of it goes; the
   console reads as a flat document surface.
   --------------------------------------------------------------- */
body::before,
body::after,
.hero::before,
.hero::after,
.starfield,
#panel-vault::before,
#panel-vault::after{content:none!important;display:none!important;animation:none!important}

body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--ui);
  font-size:14px;
  line-height:1.55;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* every phosphor bloom in the old sheet */
.title,
.title .green,
.stat .n,
.stat.lum .n,
.eyebrow,
.wordmark,
.sec-head h2,
.tab.on,
.tsolo.active,
.tgrp.active>.tcat{text-shadow:none!important}

.pulse,
.syncbar.live .dot,
.chat-head .ct-dot,
.feeditem:first-child::before,
.tl-era::before,
.tl-bar .bar,
.livedot,
.resync,
.share-dl,
.brandmark,
#chat-toggle,
#token-toggle,
#lb-toggle,
#xfab{box-shadow:none}

::selection{background:var(--accent-wash);color:var(--ink)}

/* scrollbars — neutral */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:content-box}

/* ---------------------------------------------------------------
   3. TYPOGRAPHY
   Oswald condensed display type and site-wide uppercase are gone.
   Inter carries the interface; JetBrains Mono is demoted to what it
   is good at — identifiers, dates, coordinates and counts.
   --------------------------------------------------------------- */
.title,.ctitle,.ftitle,.te-title,.tl-ttl,.tl-yr,.feed-ttl,.gs-title,.gt,
.sources h2,.vaultsec h3,.thsec-head h3,.ov-h,.skyloc,.shapecard .nm,
.sight-det-head,.globeread .gr-title,.wordmark,.lb-cap .lb-title,
.cc-title,.sec-head,.wp-title,.wp-headtitle,.cmp-head,.feed .fn{
  font-family:var(--ui);
  letter-spacing:-.011em;
  text-transform:none;
}

.stat .n,.year,.rdate,.rdur,.tl-ag,.te-index,.chip .ct,.tc,
.feed-date,.shapecard .ct,.lbval,.ca-val,.cmp-lab,.rshape,
#clock,#synced,.count,.rcount{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* small caption labels keep a light track, everything else is normal */
.eyebrow,.filterblock .lbl,.stat .l,.mascot-col-head,.shapes-hint,
.navsect,.tcat,.share-hint,.wp-eyebrow,.now-eyebrow{
  letter-spacing:.10em;
  text-transform:uppercase;
  font-family:var(--ui);
  font-weight:600;
  font-size:10.5px;
  color:var(--dim);
}

a{color:inherit;text-decoration:none}

/* ---------------------------------------------------------------
   4. APPLICATION BAR
   --------------------------------------------------------------- */
.bar{
  height:var(--bar-h);
  padding:0 20px;
  gap:16px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:none;
  backdrop-filter:none;
  z-index:130;
}
.mark{gap:10px}
.brandmark{width:22px;height:22px;filter:none}
:root[data-theme="light"] .bm-light{filter:none}
.wordmark{
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  color:var(--ink);
}
.wordmark::after{
  content:"CONSOLE";
  margin-left:9px;
  padding-left:9px;
  border-left:1px solid var(--line-2);
  font-family:var(--ui);
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--dim);
  vertical-align:1px;
}
.wordmark .dv{color:var(--dim)}

.bar .meta{gap:14px;font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:0}
.bar .meta .m-status{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface-2);
  font-size:10.5px;
}
.pulse{width:6px;height:6px;background:var(--phosphor);margin:0;animation:none}
#clock{color:var(--ink-2)}

.theme-toggle{
  width:30px;height:30px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2);color:var(--dim);
}
.theme-toggle:hover{border-color:var(--line-2);color:var(--ink);background:var(--surface-3)}

.xeno-langsel{
  font-family:var(--ui);font-size:11.5px;
  background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:6px 8px;outline:none;
}

/* ---------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------- */
.resync,.share-dl,.mascot-dl-btn,.chat-send,.loadmore{
  font-family:var(--ui);
  font-weight:600;
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
  background:var(--phosphor);
  color:#0a0d0c;
  border:1px solid var(--phosphor);
  border-radius:var(--r-sm);
  padding:8px 14px;
  cursor:pointer;
  transition:filter .14s,opacity .14s;
}
.resync:hover,.share-dl:hover,.mascot-dl-btn:hover,.chat-send:hover,.loadmore:hover{
  filter:brightness(1.08);background:var(--phosphor);color:#0a0d0c;
}
:root[data-theme="light"] .resync,
:root[data-theme="light"] .share-dl,
:root[data-theme="light"] .mascot-dl-btn,
:root[data-theme="light"] .chat-send,
:root[data-theme="light"] .loadmore{color:#fff}
.resync:disabled{background:var(--surface-3);border-color:var(--line);color:var(--dim);filter:none}

.sortbtn,.toolx,.clearbtn,.card-share,.cmp-share,.gr-share,.lbtab,.cbtn,.railbtn{
  font-family:var(--ui);
  font-weight:500;
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-2);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:7px 12px;
  cursor:pointer;
  transition:background .14s,border-color .14s,color .14s;
}
.sortbtn:hover,.toolx:hover,.card-share:hover,.cmp-share:hover,
.gr-share:hover,.lbtab:hover,.cbtn:hover,.railbtn:hover{
  background:var(--surface-3);border-color:var(--line-2);color:var(--ink);
}
/* was margin-left:auto, which parked it under the fixed floating actions in
   the bottom-right; it now sits with the rest of the toolbar */
.clearbtn{margin-left:2px;background:transparent;border-color:transparent;color:var(--dim)}
.clearbtn:hover{color:var(--signal);background:transparent;text-decoration:none}
.lbtab.on{background:var(--accent-wash);border-color:var(--accent-line);color:var(--phosphor)}
.gr-share{width:100%;margin-top:10px;justify-content:center}

.loadmore{padding:10px 22px;font-size:12.5px}
.loadmore:disabled{background:transparent;border-color:var(--line);color:var(--dim);filter:none;cursor:default}

/* focus visibility, which the original sheet never had */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
.chip:focus-visible,.tab:focus-visible{
  outline:2px solid var(--accent-line);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* ---------------------------------------------------------------
   6. NAVIGATOR RAIL  (index.html only — body.app-shell)
   The nine top-level sections used to wrap across three rows of
   uppercase tabs above the content. They become a persistent left
   navigator: groups always expanded, record counts aligned right.
   --------------------------------------------------------------- */
.app-shell .wrap{max-width:none;margin:0;padding:0 30px}

@media(min-width:1080px){
  .app-shell .wrap{padding-left:calc(var(--rail) + 32px);padding-right:32px}

  .app-shell #tabs{
    position:fixed;top:var(--bar-h);left:0;bottom:0;
    width:var(--rail);
    display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;
    gap:0;margin:0;padding:12px 0 28px;
    background:var(--surface);
    border:0;border-right:1px solid var(--line);border-bottom:0;
    overflow:hidden auto;overscroll-behavior:contain;
    z-index:120;
  }
  .app-shell #tabs::-webkit-scrollbar{width:8px}

  /* group headings — the dropdown triggers become inert section labels */
  .app-shell #tabs .tcat,
  .app-shell #tabs .navsect{
    display:block;width:100%;text-align:left;
    pointer-events:none;cursor:default;
    background:none;border:none;
    padding:16px 18px 6px;
    font-size:10px;letter-spacing:.17em;text-transform:uppercase;
    font-weight:600;color:var(--dim);
  }
  .app-shell #tabs .tcar{display:none}
  .app-shell #tabs .tgrp{position:static;display:block}
  .app-shell #tabs .tgrp.active>.tcat{color:var(--dim);border:0}
  .app-shell #tabs .tmenu{
    position:static;display:flex;flex-direction:column;
    min-width:0;background:none;border:none;box-shadow:none;
    padding:0;border-radius:0;
  }

  .app-shell #tabs .tab{
    display:flex;align-items:center;gap:9px;
    width:100%;text-align:left;white-space:normal;
    font-family:var(--ui);font-weight:500;font-size:13px;
    letter-spacing:0;text-transform:none;
    color:var(--ink-2);
    padding:8px 18px;
    border:0;border-left:2px solid transparent;border-radius:0;
    transition:background .13s,color .13s,border-color .13s;
  }
  .app-shell #tabs .tab:hover{background:var(--surface-2);color:var(--ink)}
  .app-shell #tabs .tab.on,
  .app-shell #tabs .tsolo.active{
    color:var(--phosphor);
    background:var(--accent-wash);
    border-left-color:var(--phosphor);
    font-weight:600;
  }
  .app-shell #tabs .tab .tc{
    display:inline-block;margin-left:auto;flex:none;
    font-family:var(--mono);font-size:10.5px;color:var(--dim);
    background:var(--surface-3);border-radius:20px;padding:1px 7px;
  }
  .app-shell #tabs .tab.on .tc{background:transparent;color:var(--phosphor)}
  .app-shell #tabs .livedot{margin-left:6px}

  .app-shell #navburger,
  .app-shell .navdrawer-head,
  .app-shell #navscrim{display:none!important}
}

/* medium widths: the rail collapses into the existing drawer, which the
   nav script already drives at any viewport size */
@media(max-width:1079px){
  /* sits at the top of the content column and stays pinned under the app
     bar, so the section list is one tap away at any scroll depth */
  .app-shell #navburger{
    display:flex;align-items:center;gap:12px;width:100%;
    position:sticky;top:var(--bar-h);z-index:100;
    margin:0 0 4px;padding:11px 14px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    color:var(--ink);font-family:var(--ui);font-weight:600;font-size:13px;
    letter-spacing:0;text-transform:none;cursor:pointer;
    box-shadow:var(--shadow-1);
  }
  .app-shell .wrap{padding-top:14px}
  .app-shell #navburger:hover{border-color:var(--line-2);background:var(--surface-2)}
  .nb-ico i{background:var(--phosphor)}
  .nb-lbl{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nb-car{font-size:9px;color:var(--dim);flex:none}

  .app-shell #navscrim{
    display:block;position:fixed;inset:0;z-index:110;
    background:rgba(4,7,6,.6);
    opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
  }
  body.navopen #navscrim{opacity:1;visibility:visible}
  body.navopen{overflow:hidden}

  .app-shell #tabs{
    position:fixed;top:0;left:0;bottom:0;z-index:140;
    width:min(300px,86vw);margin:0;padding:0 0 24px;gap:0;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;
    background:var(--surface);
    border:0;border-right:1px solid var(--line);
    overflow:hidden auto;overscroll-behavior:contain;
    box-shadow:var(--shadow-3);
    transform:translateX(-100%);visibility:hidden;
    transition:transform .26s cubic-bezier(.16,1,.3,1),visibility .26s;
  }
  body.navopen #tabs{transform:none;visibility:visible}

  .app-shell .navdrawer-head{
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:2;background:var(--surface);
    padding:16px 18px;border-bottom:1px solid var(--line);
    font-family:var(--ui);font-weight:600;font-size:10px;letter-spacing:.17em;
    text-transform:uppercase;color:var(--dim);
  }
  #navclose{background:none;border:none;color:var(--dim);font-size:24px;line-height:1;cursor:pointer}
  #navclose:hover{color:var(--ink)}

  .app-shell #tabs .tcat,
  .app-shell #tabs .navsect{
    display:block;width:100%;text-align:left;pointer-events:none;cursor:default;
    background:none;border:none;padding:15px 18px 5px;
    font-size:10px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;color:var(--dim);
  }
  .app-shell #tabs .tcar{display:none}
  .app-shell #tabs .tgrp{position:static;display:block}
  .app-shell #tabs .tgrp.active>.tcat{color:var(--dim);border:0}
  .app-shell #tabs .tmenu{
    position:static;display:flex;flex-direction:column;min-width:0;
    background:none;border:none;box-shadow:none;padding:0;border-radius:0;
  }
  .app-shell #tabs .tab{
    display:flex;align-items:center;gap:9px;width:100%;text-align:left;
    font-family:var(--ui);font-weight:500;font-size:13.5px;letter-spacing:0;
    text-transform:none;color:var(--ink-2);white-space:normal;
    padding:9px 18px;border:0;border-left:2px solid transparent;border-radius:0;
  }
  .app-shell #tabs .tab:hover{background:var(--surface-2);color:var(--ink)}
  .app-shell #tabs .tab.on,
  .app-shell #tabs .tsolo.active{
    color:var(--phosphor);background:var(--accent-wash);
    border-left-color:var(--phosphor);font-weight:600;
  }
  .app-shell #tabs .tab .tc{
    display:inline-block;margin-left:auto;flex:none;
    font-family:var(--mono);font-size:10.5px;color:var(--dim);
    background:var(--surface-3);border-radius:20px;padding:1px 7px;
  }
}

.livedot{background:var(--signal);width:5px;height:5px;animation:none;margin-left:6px}

/* ---------------------------------------------------------------
   7. PAGE HEADER + METRICS
   The full-bleed marketing hero becomes a compact record-set header.
   --------------------------------------------------------------- */
.hero{
  padding:26px 0 22px;
  border-bottom:1px solid var(--line);
  overflow:visible;
}
.eyebrow{
  display:flex;align-items:center;gap:9px;
  margin-bottom:12px;
  color:var(--dim);
  font-size:10.5px;letter-spacing:.13em;
}
.eyebrow .barcode{display:none}
.eyebrow::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--phosphor);flex:none;
}
.title{
  font-family:var(--ui);
  font-weight:700;
  font-size:clamp(24px,3.2vw,34px);
  line-height:1.14;
  letter-spacing:-.02em;
  text-transform:none;
  margin:0 0 4px;
  max-width:22ch;
}
/* the headline was three <br>-separated lines; flattened to one sentence.
   Only the spans that followed a <br> need the word gap re-inserted — the
   others already have whitespace between them in the markup. */
.title br{display:none}
.title br + span{margin-left:.3em}
.title .green{color:var(--phosphor)}
.caret{display:none}
.lede{
  max-width:70ch;
  color:var(--ink-2);
  font-size:13.5px;
  line-height:1.65;
  margin:10px 0 0;
}
.lede b{color:var(--ink);font-weight:600}

.stats{
  /* auto-fit rather than a fixed four, because the Aliens page ships three */
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  margin-top:24px;
}
.stat{
  display:flex;flex-direction:column-reverse;gap:6px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:14px 16px;
  transition:border-color .14s;
}
.stat:hover{background:var(--surface);border-color:var(--line-2);box-shadow:none}
.stat .n{
  font-family:var(--mono);
  font-weight:500;
  font-size:26px;
  line-height:1.1;
  color:var(--ink);
  text-shadow:none;
  letter-spacing:-.02em;
}
.stat.live .n{color:var(--phosphor)}
.stat.alert .n{color:var(--signal)}
.stat .l{
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);font-weight:600;margin:0;
}

/* the masthead is the landing view's own header — every other section
   opens straight onto its toolbar. Scoped to .app-shell so the Aliens and
   $XENO pages, which have their own heroes, are untouched. */
.app-shell:not(.view-home) .hero{display:none}

/* ---------------------------------------------------------------
   7b. HOME — the landing view
   --------------------------------------------------------------- */
#panel-home{padding:26px 0 40px}

.home-sec{margin:0 0 34px}
.home-sec:last-child{margin-bottom:0}
.home-head{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:0 0 14px;padding-bottom:11px;
  border-bottom:1px solid var(--line);
}
.home-head h2{
  margin:0;font-family:var(--ui);font-weight:600;font-size:16px;
  letter-spacing:-.014em;color:var(--ink);
}
.home-head p{margin:0;font-size:12.5px;color:var(--dim)}
.home-more{
  margin-left:auto;flex:none;
  font-family:var(--ui);font-weight:500;font-size:12px;
  color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:6px 11px;cursor:pointer;transition:background .13s,border-color .13s,color .13s;
}
.home-more:hover{background:var(--surface-3);border-color:var(--line-2);color:var(--ink)}
.home-more::after{content:" \2192"}

/* section directory */
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:12px}
.home-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px 15px;cursor:pointer;font-family:var(--ui);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.home-card:hover{border-color:var(--line-2);background:var(--surface-2);box-shadow:var(--shadow-2)}
.hc-n{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:21px;line-height:1.1;color:var(--phosphor);letter-spacing:-.02em;
}
.hc-n.hc-sm{font-family:var(--ui);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.hc-t{font-weight:600;font-size:14.5px;color:var(--ink);letter-spacing:-.01em;margin-top:3px}
.hc-d{font-size:12.5px;color:var(--ink-2);line-height:1.55}

/* record + disclosure previews */
.home-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.home-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  text-align:left;width:100%;height:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px;cursor:pointer;font-family:var(--ui);
  transition:border-color .15s,box-shadow .15s;
}
.home-item:hover{border-color:var(--line-2);box-shadow:var(--shadow-2)}
.hi-meta{
  display:flex;align-items:center;gap:8px;width:100%;min-width:0;
  font-family:var(--mono);font-size:11px;color:var(--dim);
}
.hi-flag{font-family:var(--ui);font-size:14px;line-height:1;flex:none}
.hi-cc{color:var(--ink-2);letter-spacing:.05em;flex:none}
.hi-ag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hi-year,.hi-date{margin-left:auto;flex:none;color:var(--ink-2)}
.hi-date{margin-left:0}
.hi-tag{
  font-family:var(--ui);font-weight:600;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--phosphor);
  background:var(--accent-wash);border:1px solid var(--accent-line);
  border-radius:4px;padding:2px 7px;flex:none;
}
.hi-title{font-weight:600;font-size:15px;line-height:1.3;color:var(--ink);letter-spacing:-.012em}
.hi-blurb{
  font-size:12.5px;color:var(--ink-2);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hi-src{margin-top:auto;padding-top:4px;font-size:11.5px;color:var(--phosphor)}
.hi-src .badge{color:inherit}

/* Xeno App install card */
.appcard{
  display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;
}
.app-icon{
  width:56px;height:56px;flex:none;border-radius:12px;
  border:1px solid var(--line);background:var(--surface-2);
  object-fit:contain;padding:5px;
}
.app-copy{flex:1 1 300px;min-width:0}
.app-title{font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.012em;margin-bottom:5px}
.app-d{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.app-note{
  margin:9px 0 0;font-size:12px;line-height:1.6;color:var(--dim);max-width:62ch;
}
.app-note:empty{display:none}
.app-actions{
  display:flex;align-items:center;gap:10px;flex:none;
  margin-left:auto;align-self:center;
}
.app-state{
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--phosphor);
  background:var(--accent-wash);border:1px solid var(--accent-line);
  border-radius:20px;padding:4px 11px;
}

/* the manual route, for browsers that never offer a prompt to capture */
.appsteps{
  margin-top:10px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px 20px 18px;
  max-width:70ch;
}
.appsteps-h{
  font-family:var(--ui);font-weight:600;font-size:13px;color:var(--ink);
  letter-spacing:-.008em;margin-bottom:10px;
}
.appsteps-l{margin:0;padding-left:20px}
.appsteps-l li{
  font-size:13px;line-height:1.65;color:var(--ink-2);
  margin-bottom:6px;padding-left:3px;
}
.appsteps-l li::marker{color:var(--phosphor);font-family:var(--mono);font-size:12px}
.appsteps-l li:last-child{margin-bottom:0}
.appsteps-n{
  margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.6;color:var(--dim);
}
.appsteps-n:empty{display:none}
@media(max-width:760px){
  .appcard{gap:14px;padding:16px}
  .app-actions{margin-left:0;width:100%}
  .app-actions .resync{width:100%}
}

/* The Xeno App section is desktop-only. Below the rail breakpoint — which
   is also where a browser's mobile emulation lands — the nav entry, its
   heading and the panel are all removed. The install script stands itself
   down at the same threshold, so nothing offers an install here either. */
@media(max-width:1079px){
  .navsect-app,
  .tapp,
  #panel-app{display:none!important}
}

/* the Home entry sits above the grouped sections in the rail */
.thome{margin-bottom:2px}

@media(max-width:760px){
  #panel-home{padding:20px 0 32px}
  .home-sec{margin-bottom:26px}
  .home-grid,.home-list{grid-template-columns:1fr}
  .home-more{margin-left:0}
}

/* ---------------------------------------------------------------
   7c. PANEL FRAME
   With the masthead confined to Home, every other section opens
   directly under the app bar. One offset, declared here, keeps them
   all from starting flush against it — the inner wrappers that used
   to supply their own top padding are zeroed so it never doubles.
   --------------------------------------------------------------- */
#panel-cases,#panel-reports,#panel-map,#panel-globe,#panel-shapes,
#panel-gallery,#panel-vault,#panel-theories,#panel-skycam,#panel-predict,
#panel-timeline,#panel-feed,#panel-about,#panel-mascot,#panel-app{padding-top:32px}
.controls{padding:0 0 4px}
.shapes-wrap{padding:0 0 40px}
#tlwrap,#feedwrap,#theorieswrap{padding-top:0}
.galgrid{padding-top:0}
.mascot-panel{padding-top:0}
.about{padding-top:0}

/* Shape models and Mascot nest a second .wrap inside the panel; without
   this they inherit the rail offset twice and sit half a screen in */
.app-shell .wrap .wrap{padding-left:0;padding-right:0;max-width:none}

/* section header: title, standfirst, and the explanatory prose that
   tells you how to read what follows */
.secintro{margin:0 0 26px;max-width:78ch}
.secintro h2{
  margin:0 0 8px;font-family:var(--ui);font-weight:700;
  font-size:22px;letter-spacing:-.02em;color:var(--ink);
}
.secintro-lede{
  margin:0;font-size:15px;line-height:1.6;color:var(--ink);font-weight:500;
  max-width:66ch;
}
.secintro-body{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
.secintro-body p{margin:0 0 10px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.secintro-body p:last-child{margin-bottom:0}

/* report volume per shape category, under each 3D model */
.shape3-n{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:11px;color:var(--phosphor);text-align:center;margin-top:6px;
}

/* ---------------------------------------------------------------
   8. QUERY TOOLBAR
   --------------------------------------------------------------- */

.search{
  gap:10px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:0 14px;
  margin-bottom:18px;
  transition:border-color .14s,box-shadow .14s;
}
.search:focus-within{
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-wash);
}
.search .pre{
  font-family:var(--ui);font-size:0;color:var(--dim);letter-spacing:0;
  display:inline-flex;align-items:center;flex:none;
}
/* the "QUERY>" / "FIND>" prompt becomes a search glyph */
.search .pre::after{
  content:"";width:15px;height:15px;display:block;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>") no-repeat center/contain;
}
.search input{
  font-family:var(--ui);font-size:13.5px;padding:11px 0;color:var(--ink);
}
.search input::placeholder{color:var(--dim)}
.search .count{
  font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:0;
  padding:3px 9px;background:var(--surface-2);border-radius:20px;
}

.filterblock{margin-bottom:14px}
.filterblock .lbl{margin-bottom:8px;color:var(--dim)}
.chips{gap:6px}
.chip{
  font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:0;
  color:var(--ink-2);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:5px 11px;
  transition:background .13s,border-color .13s,color .13s;
}
.chip:hover{border-color:var(--line-2);background:var(--surface-2);color:var(--ink);box-shadow:none}
.chip.on{
  background:var(--accent-wash);
  border-color:var(--accent-line);
  color:var(--phosphor);
  font-weight:600;
}
.chip .ct{opacity:1;font-size:10px;color:var(--dim)}
.chip.on .ct{color:var(--phosphor);opacity:.75}
.chip.s-unresolved.on{background:rgba(255,77,109,.12);border-color:rgba(255,77,109,.4);color:var(--signal)}
.chip.s-disputed.on{background:rgba(255,192,67,.12);border-color:rgba(255,192,67,.42);color:var(--amber)}

.toolrow{
  gap:8px;margin-bottom:16px;padding-top:6px;
  border-top:1px solid var(--line);
}

.syncbar{
  gap:11px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:9px 14px;
  margin-bottom:16px;
  backdrop-filter:none;
}
.syncbar .dot{width:6px;height:6px;background:var(--amber);box-shadow:none}
.syncbar.live .dot{background:var(--phosphor);box-shadow:none;animation:none}
.syncmsg{font-family:var(--ui);font-size:12px;color:var(--ink-2);letter-spacing:0}
.syncmsg b{color:var(--ink);font-weight:600;font-family:var(--mono)}
.syncbar.live .syncmsg b{color:var(--phosphor)}

/* ---------------------------------------------------------------
   9. RECORD CARDS — landmark cases
   --------------------------------------------------------------- */
.grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;padding:6px 0 36px}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px 18px 14px;
  gap:9px;
  animation:none;
  transition:border-color .15s,box-shadow .15s;
}
.card::before{content:none;display:none}
.card:hover{
  border-color:var(--line-2);
  box-shadow:var(--shadow-2);
  transform:none;
}

/* the rotated wax stamp becomes a provenance chip in the flow */
.card .stamp{
  position:static;transform:none;
  order:-1;align-self:flex-start;
  font-family:var(--ui);font-weight:600;font-size:9.5px;letter-spacing:.14em;
  color:var(--phosphor);
  background:var(--accent-wash);
  border:1px solid var(--accent-line);
  border-radius:4px;
  padding:2px 7px;
  opacity:1;
}
.card .ctitle{padding-right:0;min-height:0}

.chead{
  font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:0;
  padding-bottom:2px;
}
.flag{font-size:14px}
.cc{color:var(--ink-2);font-weight:500;letter-spacing:.04em}
.agency{font-size:11px;color:var(--dim);max-width:58%}

.ctitle{
  font-weight:600;font-size:16.5px;line-height:1.3;color:var(--ink);
  letter-spacing:-.012em;
}
.csummary{font-size:13px;color:var(--ink-2);line-height:1.62}

.redact{
  background:var(--redact);
  border-radius:3px;
  box-shadow:none;
  padding:0 3px;
}
:root[data-theme="light"] .redact{background:#2a3230}
.redact:hover,.redact:focus,.redact.open{
  background:var(--accent-wash);color:var(--phosphor);box-shadow:none;
}

.cmeta{gap:6px;margin-top:4px}
.tag{
  font-family:var(--ui);font-size:10px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dim);
  background:var(--surface-2);border:1px solid var(--line);border-radius:4px;
  padding:3px 7px;
}
.badge{
  font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;border-radius:4px;padding:3px 8px;
}
.b-unresolved{background:rgba(255,77,109,.11);color:var(--signal);border:1px solid rgba(255,77,109,.3)}
.b-resolved{background:var(--accent-wash);color:var(--phosphor);border:1px solid var(--accent-line)}
.b-disputed{background:rgba(255,192,67,.11);color:var(--amber);border:1px solid rgba(255,192,67,.32)}
.b-ongoing{background:rgba(127,163,201,.11);color:var(--steel);border:1px solid rgba(127,163,201,.32)}
.b-archived{background:var(--surface-2);color:var(--dim);border:1px solid var(--line)}
.year{
  margin-left:auto;font-family:var(--mono);font-weight:500;font-size:13px;
  color:var(--ink-2);letter-spacing:0;
}

.cfoot{
  margin-top:auto;padding-top:12px;
  border-top:1px solid var(--line);
  gap:10px;
}
.src{
  font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:0;
  color:var(--phosphor);border-bottom:0;gap:7px;
}
.src:hover{border-bottom:0;text-decoration:underline;text-underline-offset:3px}
.src .kind{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  border:1px solid currentColor;border-radius:3px;padding:2px 5px;opacity:.75;
}
.src.ref{color:var(--steel)}

.empty{
  border:1px dashed var(--line);border-radius:var(--r);
  padding:52px 20px;color:var(--dim);font-size:13px;background:var(--surface);
}
.empty b{color:var(--ink)}

/* ---------------------------------------------------------------
   10. RECORD TABLE — sighting reports
   Loose 290px card tiles are replaced by a single dense table: one
   row per report, aligned columns, header row, hover highlight.
   --------------------------------------------------------------- */
.rgrid-head{
  display:none;
  grid-template-columns:var(--rcols);
  gap:0 18px;align-items:center;
  padding:9px 16px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:var(--r) var(--r) 0 0;
  font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);
}

:root{--rcols:140px 200px minmax(0,1fr) 96px 112px}

.rgrid{
  display:flex;flex-direction:column;gap:0;
  padding:0;margin-bottom:22px;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--surface);
}
.rcard{
  display:flex;flex-direction:column;gap:6px;
  background:var(--surface);
  border:0;border-bottom:1px solid var(--line);
  border-radius:0;
  padding:12px 16px;
  animation:none;
  transition:background .12s;
}
.rcard:last-child{border-bottom:0}
.rcard:hover{background:var(--surface-2)}
@media(min-width:1080px){
  .rgrid-head + .rgrid{border-radius:0 0 var(--r) var(--r)}
}

.rtop{gap:9px;align-items:baseline}
.rshape{
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--phosphor);
  background:var(--accent-wash);border:1px solid var(--accent-line);
  border-radius:4px;padding:2px 7px;
}
.rdate{margin-left:0;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);letter-spacing:0}
.rloc{font-size:13px;font-weight:500;color:var(--ink);letter-spacing:0}
.rloc .rcc{color:var(--dim);font-weight:400;font-size:11.5px}
.rtxt{
  font-size:12.5px;color:var(--ink-2);line-height:1.55;margin:0;
  -webkit-line-clamp:2;
}
.see-more-btn{
  font-family:var(--ui);font-size:11.5px;font-weight:500;color:var(--phosphor);
  letter-spacing:0;margin-top:0;justify-self:start;
}
.rdur{
  font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:0;
  margin-top:0;padding-top:0;border-top:0;
}
.card-share.rep{margin-top:0;align-self:flex-start}

/* true table layout once there is room for aligned columns */
@media(min-width:1080px){
  .rgrid-head{display:grid}
  .rcard{
    display:grid;
    grid-template-columns:var(--rcols);
    grid-template-rows:auto auto;
    gap:2px 18px;
    align-items:start;
    padding:11px 16px;
  }
  .rcard>.rtop{grid-column:1;grid-row:1/3;flex-direction:column;align-items:flex-start;gap:5px}
  .rcard>.rloc{grid-column:2;grid-row:1/3}
  .rcard>.rtxt{grid-column:3;grid-row:1}
  .rcard>.see-more-btn{grid-column:3;grid-row:2;justify-self:start;padding:0}
  .rcard>.rdur{grid-column:4;grid-row:1/3}
  .rcard>.card-share{grid-column:5;grid-row:1/3;justify-self:end;align-self:center}
}

.loadmore-wrap{padding:0 0 38px}

/* full-report overlay */
.sight-det-head{font-weight:600;font-size:19px;color:var(--ink);letter-spacing:-.015em;margin:0 0 6px}
.sight-det-sub{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:0;margin:0 0 16px}
.sight-det-body{font-size:13.5px;color:var(--ink-2);line-height:1.75}

/* ---------------------------------------------------------------
   11. MAP + GLOBE SURFACES
   --------------------------------------------------------------- */
.mapwrap,.ghost{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:none;
  margin-bottom:12px;
}
.ghost::before,.ghost::after{content:none;display:none}
.ghost{background:radial-gradient(circle at 50% 36%,#0d1614,#070a09 72%)}
.maphint{font-size:11.5px;color:var(--dim);letter-spacing:0;margin:0 0 28px;max-width:80ch}

.maplegend{top:12px;left:12px;gap:5px}
.lgchip{
  font-family:var(--ui);font-size:11px;letter-spacing:0;
  background:rgba(10,14,13,.86);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;padding:3px 9px;color:#e9efec;
}
.lgchip.all{border-color:var(--accent-line);color:var(--phosphor)}

.mapread,.globeread{
  background:rgba(10,14,13,.95);
  border:1px solid rgba(255,255,255,.11);
  border-left:1px solid rgba(255,255,255,.11);
  border-top:2px solid var(--phosphor);
  border-radius:var(--r);
  padding:13px 15px;
  box-shadow:var(--shadow-3);
}
.mapread .mr-sh{
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.06em;
  color:var(--phosphor);text-transform:uppercase;
}
.mapread .mr-loc{font-size:13px;color:#e9efec;font-weight:500}
.mapread .mr-txt,.globeread .gr-sum{font-size:12px;color:#a7bab2;line-height:1.55}
.globeread .gr-title{font-weight:600;font-size:16px;line-height:1.25;color:#e9efec;letter-spacing:-.012em;margin:8px 0 6px}
.globeread .gr-top{font-family:var(--mono);font-size:10.5px;letter-spacing:0}

.gtip{
  background:rgba(10,14,13,.96);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-sm);
  font-family:var(--ui);font-size:11.5px;letter-spacing:0;color:#e9efec;
  box-shadow:var(--shadow-2);
}
.gspin{font-size:10px;letter-spacing:.12em;color:var(--dim)}

.gmode{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.gmode button{
  font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink-2);padding:6px 13px;
}
.gmode button.on{background:var(--accent-wash);color:var(--phosphor);font-weight:600}

.gzoom button{
  width:32px;height:32px;font-family:var(--ui);font-weight:500;font-size:16px;
  background:rgba(10,14,13,.9);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm);color:#e9efec;
}
.gzoom button:hover{background:rgba(24,32,29,.96);border-color:var(--accent-line);color:var(--phosphor)}

/* ---------------------------------------------------------------
   12. FILES, VAULT, GALLERY
   --------------------------------------------------------------- */
#galgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.filecard,.gtile,.galsrc,.skycard,.feed,.tl-card,.feed-card,.shapecard,.shape3-card,.predictframe{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .15s,box-shadow .15s;
}
.filecard{padding:16px 18px 14px;gap:9px}
.filecard:hover,.feed:hover,.galsrc:hover,.tl-card:hover,.feed-card:hover{
  border-color:var(--line-2);box-shadow:var(--shadow-2);transform:none;background:var(--surface);
}
.filecard:hover .ftitle{color:var(--ink)}
.fkind{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;border-radius:3px;padding:2px 6px;
  border:1px solid var(--accent-line);color:var(--phosphor);background:var(--accent-wash);
}
.fkind.ref{border-color:var(--line);color:var(--steel);background:var(--surface-2)}
.fag{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:0}
.ftitle{font-weight:600;font-size:16px;line-height:1.28;color:var(--ink);letter-spacing:-.012em}
.fblurb{font-size:12.5px;color:var(--ink-2);line-height:1.6}

.feed{padding:14px 15px}
.feed .fn{font-weight:600;font-size:14.5px;color:var(--ink);letter-spacing:-.01em}
.feed .fu{font-family:var(--mono);font-size:10.5px;color:var(--phosphor);margin-top:5px}
.feed .fd{font-size:12px;color:var(--ink-2);margin-top:7px;line-height:1.55}
.feeds{gap:12px}

.sources{border-top:1px solid var(--line);padding:34px 0 28px}
.sources h2{font-weight:700;font-size:20px;letter-spacing:-.015em;margin:0 0 6px}
.sources .sub{color:var(--ink-2);font-size:13px;margin:0 0 20px}

.vaultsec h3,.thsec-head h3{
  font-weight:600;font-size:14px;letter-spacing:.02em;text-transform:none;
  color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:9px;margin:0 0 14px;
}
.vaultsec h3 .vc,.thsec-head .vc{
  font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:0;
  background:var(--surface-2);border-radius:20px;padding:2px 8px;
}
.vaultsec .secintro,.thsec-intro{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.reel-icon{box-shadow:none}
#panel-vault .vaultcard{padding-left:18px;border-color:var(--line)}
#panel-vault .vaultcard::before{content:none;display:none}
#panel-vault .vaultcard:hover{
  border-color:var(--line-2);box-shadow:var(--shadow-2);transform:none;
}
#panel-vault .vaultcard:hover .ftitle{color:var(--ink)}
#panel-vault .vaultcard .src{color:var(--phosphor)}
.vplat{
  font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:4px;padding:3px 7px;
  background:var(--surface-2);
}
.vplat-dot{box-shadow:none;width:6px;height:6px}

.galcard,.gtile{border-radius:var(--r);overflow:hidden}
.galcard{border:1px solid var(--line);background:var(--surface-2)}
.galcard img{filter:none}
.galcard:hover img{transform:scale(1.03)}
.galcap{
  font-family:var(--ui);font-size:10px;letter-spacing:.06em;color:#e9efec;
  background:linear-gradient(transparent,rgba(0,0,0,.8));
}
.filmframe{
  font-family:var(--ui);font-weight:600;letter-spacing:.1em;font-size:12px;
  color:var(--dim);background:var(--surface-2);border-bottom:1px solid var(--line);
}
.filmframe .naid{font-family:var(--mono);font-size:10px;color:var(--dim)}
.gs-title{font-weight:600;font-size:14.5px;color:var(--ink);letter-spacing:-.01em}
.gs-rg{font-family:var(--ui);font-size:10px;letter-spacing:.09em;color:var(--amber)}
.gs-note{font-size:12px;color:var(--ink-2);line-height:1.55}
.gs-open{font-size:11.5px;color:var(--phosphor)}
.gtile .gt{font-weight:600;font-size:14px;color:var(--ink);letter-spacing:-.01em}
.gtile .gag{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.gtile .ph{font-family:var(--ui);font-size:11.5px;letter-spacing:0;background:var(--surface-2);color:var(--dim)}
.gpd{
  font-family:var(--ui);font-size:9.5px;letter-spacing:.09em;border-radius:4px;
  color:var(--phosphor);border:1px solid var(--accent-line);background:var(--accent-wash);padding:2px 7px;
}
.gpd.alt{color:var(--dim);border-color:var(--line);background:var(--surface-2)}
.gactions a{font-size:11.5px;color:var(--phosphor);border-bottom:0}
.gactions a:hover{text-decoration:underline;text-underline-offset:3px;border-bottom:0}
.gnotice{
  font-size:11.5px;color:var(--dim);line-height:1.6;
  border-top:1px solid var(--line);padding-top:14px;
}
.gnotice code{font-family:var(--mono);color:var(--phosphor);background:var(--accent-wash);border-radius:3px;padding:1px 5px}

.lightbox{background:rgba(6,9,8,.94);backdrop-filter:blur(4px)}
.lightbox img{border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-3)}
.lb-cap .lb-title{font-family:var(--ui);font-weight:600;font-size:15px;letter-spacing:-.01em}
.lb-cap .lb-meta{font-family:var(--mono);font-size:11px;color:var(--dim)}

/* ---------------------------------------------------------------
   13. TIMELINE + FEED
   --------------------------------------------------------------- */
.tl-intro,.feed-note{font-size:13px;color:var(--ink-2);line-height:1.65;margin:0 0 18px;max-width:80ch}
.tl-chart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.tl-chart h3{font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 4px}
.tl-chart .sub{font-size:12px;color:var(--ink-2);margin:0 0 16px}
.tl-bar .bar{background:var(--phosphor);border-radius:3px 3px 0 0;box-shadow:none;opacity:.85}
.tl-bar:hover .bar{opacity:1;filter:none}
.tl-bar .lab,.tl-bar .val{font-family:var(--mono)}
.tl-bar .val{color:var(--dim)}
.tl-era{
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);padding-left:28px;margin:26px 0 12px;
}
.tl-era::before{width:7px;height:7px;background:var(--phosphor);box-shadow:none;left:8px}
.tl-list,.feedlist{border-left:1px solid var(--line)}
.tl-item::before,.feeditem::before{
  width:7px;height:7px;background:var(--surface);border:1.5px solid var(--line-2);
}
.tl-item:hover::before{border-color:var(--phosphor);box-shadow:none}
.feeditem:first-child::before{background:var(--phosphor);border-color:var(--phosphor);box-shadow:none}
.tl-card{padding:13px 15px}
.tl-card:hover{transform:none}
.tl-yr{font-family:var(--mono);font-weight:500;font-size:15px;color:var(--phosphor)}
.tl-ttl{font-weight:600;font-size:14.5px;color:var(--ink);letter-spacing:-.01em}
.tl-ag{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.tl-sum{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.tl-src,.feed-src{font-family:var(--ui);font-size:11.5px;color:var(--phosphor);border-bottom:0}
.tl-src:hover,.feed-src:hover{text-decoration:underline;text-underline-offset:3px;border-bottom:0}
.tl-share{font-family:var(--ui);font-size:11.5px;color:var(--dim)}

.feed-card{padding:13px 15px}
.feed-date{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.feed-tag{
  font-family:var(--ui);font-weight:600;font-size:9.5px;letter-spacing:.1em;
  color:var(--phosphor);background:var(--accent-wash);border:1px solid var(--accent-line);
  border-radius:4px;padding:2px 7px;
}
.feed-ttl{font-weight:600;font-size:15px;color:var(--ink);line-height:1.32;letter-spacing:-.012em}
.feed-blurb{font-size:12.5px;color:var(--ink-2);line-height:1.6}

/* ---------------------------------------------------------------
   14. THEORIES (long form)
   --------------------------------------------------------------- */
.thsec-head{border-bottom:0;padding-bottom:0;margin-bottom:6px}
.theoryentry{border-top:1px solid var(--line);padding:30px 0}
.te-index{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.1em}
.te-title{font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-.022em;color:var(--ink)}
.te-lead{font-size:15px;color:var(--ink);line-height:1.65;font-weight:500}
.te-text p{font-size:13.5px;color:var(--ink-2);line-height:1.75}
.te-text a{color:var(--phosphor)}
.te-media img{border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.te-credit{font-size:10px;color:var(--dim)}
.theorycta{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
}
.theorycta-txt{font-size:12.5px;color:var(--ink-2)}
.theorycta-txt b{font-family:var(--ui);font-weight:600;font-size:14px;color:var(--ink)}

/* ---------------------------------------------------------------
   15. OVERLAYS, SHAPES, COMPARE
   --------------------------------------------------------------- */
.ov,.sharemodal{background:rgba(6,9,8,.8);backdrop-filter:blur(5px)}
.ovbox{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
  padding:24px;
}
.ov-h{font-family:var(--ui);font-weight:700;font-size:18px;letter-spacing:-.018em;text-transform:none;color:var(--ink);margin:0 0 5px}
.ov-sub{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin:0 0 20px}
.ov-x,.share-x{color:var(--dim)}
.ov-x:hover,.share-x:hover{color:var(--ink)}

.shapecard{padding:14px}
.shapecard .nm{font-weight:600;font-size:14px;color:var(--ink);text-transform:capitalize}
.shapecard .ct{font-family:var(--mono);font-size:10.5px;color:var(--dim);opacity:1}
.shapecard .ds{font-size:12px;color:var(--ink-2);line-height:1.55}

.cmp-sel{
  font-family:var(--ui);font-size:13px;background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 10px;
}
.cmp-sel:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-wash)}
.cmp-grid{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cmp-grid>div{border-bottom:1px solid var(--line);font-size:12.5px;padding:10px 13px}
.cmp-lab{
  font-family:var(--ui);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);background:var(--surface-2);font-weight:600;
}
.cmp-val{color:var(--ink-2)}
.cmp-head{font-family:var(--ui);font-weight:600;font-size:13px;color:var(--ink);text-transform:none;letter-spacing:-.01em}

/* the model canvases carry an intrinsic width="220", which is a min-content
   floor a plain repeat(5,1fr) cannot shrink past — five of them overflowed
   the column and the last card was clipped. auto-fill + min-width:0 lets
   them reflow and shrink instead. */
.shapes-grid-3d{grid-template-columns:repeat(auto-fill,minmax(186px,1fr));padding:0}
.shape3-card{padding:12px;min-width:0}
.shape3-card canvas{max-width:100%;min-width:0}
.shape3-card:hover{border-color:var(--line-2)}
.shape3-lbl{
  font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.04em;
  text-transform:capitalize;color:var(--ink);
}
.shape3-sub{font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.shapes-hint{padding:0;margin-bottom:18px}
.shapes-grid-3d{padding:0}

/* mascot */
.mascot-img-col,.mascot-3d-col{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;
}
.mascot-img-wrap{background:var(--surface-2);border-radius:var(--r-sm)}
.mascot-cvs-wrap{background:var(--surface-2);border-radius:var(--r-sm)}
.mascot-3d-hint{font-size:10.5px;color:var(--dim)}

/* sky cams + prediction markets */
.skycard{overflow:hidden}
.skyframe{background:var(--surface-2)}
.skyloc{font-weight:600;font-size:14px;color:var(--ink);letter-spacing:-.01em}
.skysub{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:0}
.skyopen{font-size:11.5px;color:var(--phosphor)}
.predictframe{background:var(--surface-2);border-radius:var(--r);overflow:hidden}
.predictodds{font-family:var(--mono);font-size:12px;color:var(--phosphor)}

/* share card modal */
#sharecanvas{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-3)}
.share-hint{font-size:10.5px;color:var(--dim)}

/* leaderboard rows */
.lbrow{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 14px;margin-bottom:6px;
}
.lbrow.me{border-color:var(--accent-line);background:var(--accent-wash)}
.lbrank{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--dim)}
.lbname{font-weight:500;color:var(--ink)}
.lbval{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.lbrow.me .lbval,.lbrow.me .lbname{color:var(--phosphor)}
.lbempty{border:1px dashed var(--line);border-radius:var(--r);color:var(--dim);font-size:12.5px}

/* ---------------------------------------------------------------
   16. FOOTER
   --------------------------------------------------------------- */
footer{
  border-top:1px solid var(--line);
  padding:26px 0 56px;
  color:var(--dim);
  font-size:12px;
  line-height:1.75;
}
footer b{color:var(--ink-2);font-weight:600}

/* ---------------------------------------------------------------
   17. FLOATING ACTIONS + CHAT
   These live in a <style> block inside <body> on some pages, so they
   need the extra specificity of a body-scoped selector to win.
   --------------------------------------------------------------- */
body #chat-toggle,
body #token-toggle{
  font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:0;
  text-transform:none;
  background:var(--phosphor);color:#0a0d0c;
  border:1px solid var(--phosphor);border-radius:var(--r);
  height:42px;min-width:0;padding:0 16px;
  box-shadow:var(--shadow-2);
}
:root[data-theme="light"] body #chat-toggle,
:root[data-theme="light"] body #token-toggle{color:#fff}
body #chat-toggle:hover,
body #token-toggle:hover{filter:brightness(1.08);background:var(--phosphor);transform:none}
body #chat-toggle .cb-pulse{background:currentColor;animation:none;opacity:.7}
body #chat-toggle .cb-badge{background:var(--signal);box-shadow:none;border-radius:20px}

body #x-toggle{
  width:42px;height:42px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:var(--shadow-2);
}
body #x-toggle:hover{background:var(--surface-3);border-color:var(--line-2);color:var(--ink);transform:none}

body #lb-toggle{
  width:42px;height:42px;border-radius:var(--r);font-size:18px;
  background:var(--surface);border:1px solid var(--line);color:var(--phosphor);
  box-shadow:var(--shadow-2);
}
body #lb-toggle:hover{background:var(--surface-3);border-color:var(--line-2);transform:none;filter:none}

body #xfab{background:var(--phosphor);border-radius:var(--r);box-shadow:var(--shadow-2)}
body.xfab-open #xfab{background:var(--phosphor)}
body #xfab::before,body #xfab::after{background:#0a0d0c}

body #chat-panel,
body #lb-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
  font-family:var(--ui);
}
/* index.html declares these in a <style> inside <body>, i.e. after this
   sheet — every rule below therefore needs the `body` prefix to outrank it
   on specificity rather than losing on source order. */
body .chat-head{background:var(--surface-2);border-bottom:1px solid var(--line);padding:11px 14px}
body .chat-head .ct-dot{background:var(--phosphor);box-shadow:none;animation:none}
body .chat-head .ct-title{
  font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:0;
  text-transform:none;color:var(--ink);
}
body .chat-head .ct-count{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:0}
body .chat-head .ct-close,
body .ct-expand{color:var(--dim)}
body .chat-head .ct-close:hover,
body .ct-expand:hover{color:var(--ink)}
body .chat-who{font-size:11px;color:var(--dim);border-bottom:1px solid var(--line)}
body .chat-who b{color:var(--ink);border-bottom:1px dashed var(--line-2)}
body .chat-body{padding:12px}
body .chat-msg{font-size:12.5px;color:var(--ink)}
body .chat-msg .cm-name{color:var(--phosphor);font-weight:600}
body .chat-msg.self .cm-name{color:var(--amber)}
body .chat-msg .cm-time{font-family:var(--mono);font-size:9.5px;color:var(--dim)}
body .chat-sys{font-size:10.5px;color:var(--dim);letter-spacing:0}
body .chat-cmd{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm)}
body .chat-cmd .cc-lbl{font-size:9.5px;letter-spacing:.12em;color:var(--dim)}
body .chat-cmd .cc-val,
body .chat-cmd .cc-stat-v{font-family:var(--mono);color:var(--phosphor)}
body .chat-cmd .cc-stat-k{color:var(--dim)}
body .chat-cmd .cc-copy{
  font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:0;
  background:var(--phosphor);color:#0a0d0c;border:0;border-radius:4px;padding:5px 9px;
}
:root[data-theme="light"] body .chat-cmd .cc-copy{color:#fff}
body .chat-foot{background:var(--surface-2);border-top:1px solid var(--line);padding:9px 10px}
body .chat-foot input{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--ui);font-size:12.5px;color:var(--ink);
}
body .chat-foot input:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-wash)}
body .chat-foot input::placeholder{color:var(--dim)}
body .chat-send{
  font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:0;text-transform:none;
  background:var(--phosphor);color:#0a0d0c;border:0;border-radius:var(--r-sm);padding:9px 14px;
}
:root[data-theme="light"] body .chat-send{color:#fff}
body .chat-err{font-size:11px;color:var(--signal)}
body .lb-body{padding:12px 14px}
body .lb-hint{font-size:10.5px;color:var(--dim);line-height:1.6}

/* ---------------------------------------------------------------
   17b. UTILITY ACTIONS — live chat, $XENO, leaderboard, X
   ---------------------------------------------------------------
   Previously four separately position:fixed elements in the bottom-right
   corner, each with its own hand-tuned offset and a .raised class to
   shuffle them when a panel opened. Two problems: they were three
   different shapes in three different sizes, all fighting for the same
   accent colour; and being fixed over the scrolling column meant every
   right-aligned control in the page — the per-row Share buttons in the
   report table especially — passed underneath them.

   They are now flow children of #float-actions, so they can just be laid
   out, and they read as one group: a single accent call-to-action with
   three quiet secondary buttons, all the same height and radius.

   Placement per context:
     console, desktop — docked into the foot of the navigator rail, so
                        they are in the chrome and can never touch data
     other pages, desktop — a column in the corner; panels open above it
     anything narrower  — collapsed behind the site's existing speed dial

   The selectors are body-prefixed because the rules they replace live in
   a <style> block inside <body>, i.e. after this sheet. universe.html has
   no dial to fall back to and is deliberately excluded (no .has-dial).
   --------------------------------------------------------------- */

/* ---- the group, in every context ---- */
body.has-dial #float-actions{
  display:flex;gap:8px;
  z-index:10010;
}
body.has-dial #chat-toggle,
body.has-dial #token-toggle,
body.has-dial #lb-toggle,
body.has-dial #x-toggle{
  position:static;inset:auto;
  height:40px;min-width:0;flex:none;
  border-radius:var(--r);
  font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:0;
  text-transform:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 14px;cursor:pointer;
  box-shadow:none;
  transition:background .14s,border-color .14s,color .14s,filter .14s;
}

/* one accent action */
body.has-dial #chat-toggle{
  background:var(--phosphor);color:#0a0d0c;border:1px solid var(--phosphor);
}
body.has-dial #chat-toggle:hover{filter:brightness(1.08);background:var(--phosphor);transform:none}
:root[data-theme="light"] body.has-dial #chat-toggle{color:#fff}
body.has-dial #chat-toggle .cb-pulse{
  width:6px;height:6px;border-radius:50%;background:currentColor;
  opacity:.65;animation:none;flex:none;
}
body.has-dial #chat-toggle .cb-badge{
  position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--signal);color:#fff;font-size:10px;font-weight:700;
  align-items:center;justify-content:center;box-shadow:none;
}

/* three quiet ones */
body.has-dial #token-toggle,
body.has-dial #lb-toggle,
body.has-dial #x-toggle{
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--ink-2);
  text-decoration:none;
}
body.has-dial #token-toggle{color:var(--phosphor);font-family:var(--mono);font-weight:500}
/* light mode's accent is violet, which on the near-white secondary button
   reads as a link rather than a ticker — the wordmark goes black instead */
:root[data-theme="light"] body.has-dial #token-toggle{color:var(--ink);font-weight:700}
body.has-dial #lb-toggle{width:40px;padding:0;font-size:16px;line-height:1}
body.has-dial #x-toggle{width:40px;padding:0}
body.has-dial #x-toggle svg{width:16px;height:16px;fill:currentColor}
body.has-dial #token-toggle:hover,
body.has-dial #lb-toggle:hover,
body.has-dial #x-toggle:hover{
  background:var(--surface-3);border-color:var(--line-2);color:var(--ink);
  transform:none;filter:none;
}
body.has-dial #token-toggle:hover{color:var(--phosphor)}
:root[data-theme="light"] body.has-dial #token-toggle:hover{color:var(--ink)}

/* the .raised shuffle is obsolete now that nothing overlaps */
body.has-dial #token-toggle.raised,
body.has-dial #lb-toggle.raised{bottom:auto}

/* ---- console, desktop: dock into the foot of the rail ---- */
@media(min-width:1080px){
  .app-shell #tabs{padding-bottom:112px}

  body.app-shell #float-actions{
    position:fixed;left:0;right:auto;bottom:0;
    width:var(--rail);
    flex-wrap:wrap;align-items:center;
    padding:12px 14px;
    background:var(--surface);
    border-top:1px solid var(--line);
    border-right:1px solid var(--line);
    z-index:125;
  }
  /* chat takes the first row, the other three share the second evenly —
     no hand-placed offsets, so nothing breaks if a label changes */
  body.app-shell #chat-toggle{flex:0 0 100%;justify-content:flex-start}
  body.app-shell #token-toggle,
  body.app-shell #lb-toggle,
  body.app-shell #x-toggle{flex:1 1 0;width:auto;min-width:0}

  /* panels open off the dock rather than the far corner */
  body.app-shell #chat-panel,
  body.app-shell #lb-panel{
    left:calc(var(--rail) + 16px);right:auto;bottom:16px;
    height:min(520px,calc(100vh - var(--bar-h) - 32px));
  }

  body.app-shell #xfab{display:none}
}

/* ---- other pages, desktop: a corner column, panel above it ---- */
@media(min-width:1080px){
  body.has-dial:not(.app-shell) #float-actions{
    position:fixed;right:22px;bottom:22px;left:auto;
    flex-direction:column-reverse;align-items:stretch;
    width:150px;
  }
  body.has-dial:not(.app-shell) #lb-toggle,
  body.has-dial:not(.app-shell) #x-toggle{width:auto}
  /* clears the 4-row column (4x40 + 3x8 gaps + 22 offset) instead of
     pushing the buttons out of the way as .raised used to */
  body.has-dial:not(.app-shell) #chat-panel,
  body.has-dial:not(.app-shell) #lb-panel{
    right:22px;bottom:226px;
    height:min(460px,calc(100vh - 270px));
  }

  /* These pages have no rail to dock into, so the column stays over the
     content and the content has to make room for it. 172px is its
     footprint (150px wide + a 22px offset); as the viewport grows past
     the 1240px column the centred margin absorbs more of that, so the
     gutter tapers and is back to the normal 22px by about 1540px. */
  body.has-dial:not(.app-shell) .wrap{
    padding-right:clamp(22px, calc(172px - (100vw - 1240px) / 2), 172px);
  }
}

/* ---- anything narrower: behind the speed dial ---- */
@media(max-width:1079px){
  body.has-dial #xfab{
    display:inline-flex;position:fixed;z-index:10012;
    right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
    width:46px;height:46px;border-radius:50%;
    align-items:center;justify-content:center;
    background:var(--phosphor);border:none;padding:0;cursor:pointer;
    box-shadow:var(--shadow-2);
  }
  body.has-dial #xfab::before,
  body.has-dial #xfab::after{content:"";position:absolute;background:#0a0d0c;border-radius:2px}
  body.has-dial #xfab::before{width:17px;height:2.5px}
  body.has-dial #xfab::after{width:2.5px;height:17px}
  body.has-dial.xfab-open #xfab{transform:rotate(135deg)}

  body.has-dial #float-actions{
    position:fixed;right:16px;left:auto;
    bottom:calc(74px + env(safe-area-inset-bottom,0px));
    flex-direction:column-reverse;align-items:stretch;width:150px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .18s ease,visibility .18s;
  }
  body.has-dial.xfab-open #float-actions{
    opacity:1;visibility:visible;pointer-events:auto;
    animation:xfabpop .26s cubic-bezier(.16,1,.3,1) both;
  }
  body.has-dial #lb-toggle,
  body.has-dial #x-toggle{width:auto}
  /* the dial closes the moment an action is taken (see the dial script),
     so a panel is never open behind the fanned-out column */
  body.has-dial #chat-panel,
  body.has-dial #lb-panel{right:16px;bottom:74px}
}

/* ---------------------------------------------------------------
   18. ALIENS PAGE
   --------------------------------------------------------------- */
.case-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:none;
}
.case-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-2);transform:none}
.cc-title{font-weight:600;font-size:16.5px;line-height:1.28;color:var(--ink);letter-spacing:-.012em}
.cc-top,.cc-loc,.cc-year{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:0}
.cc-sum{font-size:13px;color:var(--ink-2);line-height:1.62}
.cc-cat{
  font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;border-radius:4px;padding:3px 8px;
}
.cc-src{font-size:12px;color:var(--phosphor);border-bottom:0}
.cc-src:hover{text-decoration:underline;text-underline-offset:3px}
.catlegend{gap:14px;font-family:var(--ui);font-size:11.5px;color:var(--dim);letter-spacing:0}
.catdot{width:7px;height:7px;box-shadow:none}
.sec-head{margin-bottom:14px}
.sec-head h2{
  font-family:var(--ui);font-weight:700;font-size:20px;
  letter-spacing:-.018em;text-transform:none;color:var(--ink);
}
.sec-head .sec-hint{font-family:var(--ui);font-size:12px;color:var(--dim);letter-spacing:0}
.dbsec{border-top:1px solid var(--line)}
.db-desc{font-size:13px;color:var(--ink-2);line-height:1.65;max-width:80ch}
.globesec{border-bottom:1px solid var(--line)}
.b-iconic{background:var(--accent-wash);color:var(--phosphor);border:1px solid var(--accent-line)}
.b-hoax-disputed{background:rgba(255,192,67,.11);color:var(--amber);border:1px solid rgba(255,192,67,.32)}
.b-investigated{background:rgba(127,163,201,.11);color:var(--steel);border:1px solid rgba(127,163,201,.32)}

/* ---------------------------------------------------------------
   19. UNIVERSE ATLAS HUD
   --------------------------------------------------------------- */
.hudbox,.nowbox,.readout,.legend,.hints,.rail{
  background:rgba(12,17,15,.9);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);
  box-shadow:var(--shadow-2);
  backdrop-filter:blur(6px);
}
.ro-head,.ro-name,.now-name{
  font-family:var(--ui);font-weight:600;letter-spacing:-.01em;text-transform:none;color:#e9efec;
}
.ro-blurb,.ro-note,.now-sub{font-family:var(--ui);font-size:12px;color:#a7bab2;line-height:1.55}
.ro-fk,.depth-k,.now-eyebrow{font-family:var(--ui);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#7f938b}
.ro-fv,.depth-v,.now-span,.now-fov,.rtiny{font-family:var(--mono);font-size:11px;color:#cfe0d8}
.ro-kind{
  font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border-radius:4px;padding:2px 7px;
}
.railbtn,.cbtn,.filter,.sort{
  background:rgba(20,27,24,.9);border:1px solid rgba(255,255,255,.1);color:#cfe0d8;
  border-radius:var(--r-sm);font-family:var(--ui);
}
.lgitem{font-family:var(--ui);font-size:11px;color:#cfe0d8}
.uvtip,.uvlabel{font-family:var(--ui);letter-spacing:0}

/* ---------------------------------------------------------------
   20. WHITEPAPER  (body.wp-doc)
   This page is deliberately a light paper document, and it names its
   own tokens (--paper, --accent). Re-point the console tokens inside
   its scope so the shared components resolve to paper values instead
   of the dark console ones; the page keeps its light identity and
   picks up the new typography and geometry.
   --------------------------------------------------------------- */
body.wp-doc{
  --surface:#ffffff;
  --surface-2:#f6f7f2;
  --surface-3:#eef1e8;
  --panel:#ffffff;
  --panel-2:#f6f7f2;
  --line:#e3e6dc;
  --line-2:#d1d8c4;
  --ink:#14180f;
  --ink-2:#4c5646;
  --dim:#5b6456;
  --phosphor:#5b8a00;
  --accent-wash:rgba(91,138,0,.08);
  --accent-line:rgba(91,138,0,.3);
  --shadow-2:0 6px 20px -12px rgba(20,26,14,.25);
  background:#ffffff;
  color:#14180f;
  font-family:var(--ui);
}
body.wp-doc a{color:var(--accent)}
body.wp-doc code,body.wp-doc .ca-val{font-family:var(--mono)}

body.wp-doc .lede{font-size:15.5px;color:var(--ink);max-width:70ch}
.wp-head{border-bottom:1px solid var(--line);background:rgba(255,255,255,.95)}
.wp-headtitle{font-weight:700;font-size:14px;letter-spacing:-.005em;text-transform:none;color:var(--ink)}
.wp-title{font-weight:700;font-size:clamp(26px,4vw,36px);letter-spacing:-.025em;text-transform:none;color:var(--ink)}
.wp-sub,.wp-meta{font-family:var(--ui);font-size:13.5px;color:var(--dim);line-height:1.7}
.wp-panel p,.wp-panel li{font-family:var(--ui);font-size:14px;line-height:1.75}
.wp-panel h2{font-family:var(--ui);font-weight:700;font-size:19px;letter-spacing:-.018em}
.wp-panel h3{
  font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);
}
.wp-card,.wp-toc a,.ca-box{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
}
.wp-card .v{font-family:var(--ui);font-size:13px;color:var(--dim)}
.wp-toc a{background:var(--surface)}
.wp-toc a:hover{border-color:var(--accent-line);background:var(--accent-wash)}
.wp-toc .n{font-family:var(--mono);font-weight:500;color:var(--accent);margin-right:9px}

/* the underlined tab strip becomes a segmented control */
.wp-tabs{
  display:inline-flex;gap:3px;border-bottom:0;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:3px;margin:30px 0 0;max-width:100%;
}
.wp-tab{
  font-family:var(--ui);font-weight:500;font-size:12.5px;letter-spacing:0;text-transform:none;
  color:var(--dim);background:transparent;border:0;border-radius:var(--r-sm);
  padding:7px 13px;cursor:pointer;transition:background .13s,color .13s;
}
.wp-tab:hover{background:var(--surface);color:var(--ink)}
.wp-tab.on{background:var(--surface);color:var(--accent);border-bottom-color:transparent;box-shadow:var(--shadow-1)}

.ca-lbl{font-family:var(--ui);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.ca-val{font-size:12.5px;color:var(--ink);word-break:break-all;border-radius:var(--r-sm)}
.ca-copy{
  font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:0;text-transform:none;
  background:var(--accent);color:#fff;border:0;border-radius:var(--r-sm);padding:8px 13px;cursor:pointer;
}
.note{font-family:var(--ui);font-size:12.5px;color:var(--dim);border-left:2px solid var(--line-2)}
.faq dt{font-family:var(--ui);font-weight:600;font-size:14.5px;color:var(--ink);letter-spacing:-.01em}
.faq dd{font-family:var(--ui);font-size:13.5px;color:var(--dim)}
.wp-back{
  font-family:var(--ui);font-size:11.5px;letter-spacing:0;text-transform:none;
  color:var(--dim);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 12px;
}
.wp-back:hover{color:var(--accent);border-color:var(--accent-line)}
.wp-foot{border-top:1px solid var(--line);color:var(--dim);font-size:12px}

/* the atlas keeps its own deep-space ground */
body.atlas{background:#04060a}

/* ---------------------------------------------------------------
   21. MOTION
   --------------------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}

/* ---------------------------------------------------------------
   22. RESPONSIVE
   --------------------------------------------------------------- */
@media(max-width:1000px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  :root{--bar-h:52px}
  .app-shell .wrap,.wrap{padding:14px 16px 0}
  #panel-cases,#panel-reports,#panel-map,#panel-globe,#panel-shapes,
  #panel-gallery,#panel-vault,#panel-theories,#panel-skycam,#panel-predict,
  #panel-timeline,#panel-feed,#panel-about,#panel-mascot,#panel-app{padding-top:22px}
  .bar{padding:0 14px;gap:10px;height:52px}
  .wordmark::after{display:none}
  .bar .meta .m-status,#clock{display:none}
  .hero{padding:20px 0 18px}
  .title{font-size:24px}
  .stat .n{font-size:22px}
  .toolrow{gap:6px}
  .grid{grid-template-columns:1fr}
  .rgrid-head{display:none!important}
  .theoryentry{padding:24px 0}
  .te-title{font-size:20px}
}
@media(max-width:420px){
  .stats{grid-template-columns:1fr}
  /* the old sheet blanked the label (font-size:0) and swapped in a ↻ glyph
     via ::after. The label fits again at this size, so the glyph goes. */
  .resync{font-size:11px;padding:7px 10px}
  .resync::after{content:none}
}

/* ---------------------------------------------------------------
   23. LIGHT-MODE CORRECTIONS
   A handful of the original `:root[data-theme="light"] .x` rules are
   more specific than the component rules above and would otherwise
   reintroduce the old treatment (or, in two cases, put text on a
   ground it cannot be read against). They are answered at matching
   specificity here rather than by weakening the rules above.
   --------------------------------------------------------------- */
:root[data-theme="light"] .bar{
  background:var(--surface);
  box-shadow:none;
  border-bottom:1px solid var(--line);
}
/* was color:var(--void) — which in light mode is the page background */
:root[data-theme="light"] .resync:disabled{color:var(--dim);background:var(--surface-3)}
/* the globe keeps its night sky in both themes, so its overlay text
   must stay light-on-dark */
:root[data-theme="light"] .ghost .gspin{color:#a7bab2}
:root[data-theme="light"] .filterblock .lbl,
:root[data-theme="light"] .mascot-col-head{color:var(--dim)}
:root[data-theme="light"] .gmode button{color:var(--ink-2)}
:root[data-theme="light"] .gmode button.on{color:var(--phosphor)}
:root[data-theme="light"] .syncmsg{color:var(--ink-2)}
:root[data-theme="light"] .csummary,
:root[data-theme="light"] .rtxt,
:root[data-theme="light"] .fblurb,
:root[data-theme="light"] .te-text p,
:root[data-theme="light"] .tl-sum,
:root[data-theme="light"] .feed-blurb,
:root[data-theme="light"] .shapecard .ds,
:root[data-theme="light"] .cmp-val,
:root[data-theme="light"] .cc-sum{color:var(--ink-2)}
:root[data-theme="light"] .redact{background:#3a4340}
:root[data-theme="light"] .redact:hover,
:root[data-theme="light"] .redact:focus,
:root[data-theme="light"] .redact.open{background:var(--accent-wash);color:var(--phosphor)}
:root[data-theme="light"] .galcard,
:root[data-theme="light"] .gtile img.gimg,
:root[data-theme="light"] .te-media img,
:root[data-theme="light"] .skyframe,
:root[data-theme="light"] .predictframe,
:root[data-theme="light"] .mascot-cvs-wrap,
:root[data-theme="light"] .mascot-img-wrap{background:var(--surface-3)}
:root[data-theme="light"] .filmframe{background:var(--surface-2)}
:root[data-theme="light"] .gtile .ph{background:var(--surface-2);color:var(--dim)}
:root[data-theme="light"] .lightbox{background:rgba(30,36,32,.9)}