:root{
  --bg:#05070A; --panel:#0c0e13; --line:rgba(255,255,255,.09);
  --ink:#e8eaf0; --mut:#8b93a7; --dim:#5a6274;
  --up:#5DCAA5; --down:#F09595; --accent:#85B7EB;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(5,7,10,.92);
  backdrop-filter:blur(8px);z-index:10}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:58px;flex-wrap:wrap}
.brand{font-weight:700;font-size:19px;letter-spacing:-.4px;color:var(--ink);text-decoration:none}
.brand span{color:var(--accent)}
.brand{display:inline-flex;align-items:center;gap:8px}
.brand img{width:26px;height:26px;display:block}
/* Large logo on the overview, centred over the globe. */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:56px 0 8px}
.hero img{width:min(240px,56vw);height:auto;display:block;
  filter:drop-shadow(0 0 40px rgba(93,202,165,.25))}
.hero h1{margin:22px 0 0}
.hero .lede{margin-left:auto;margin-right:auto}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{color:var(--mut);text-decoration:none;font-size:13px;padding:6px 11px;border-radius:7px}
nav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
nav a.on{color:var(--ink);background:rgba(255,255,255,.09)}
main{padding:30px 0 50px}
h1{font-size:30px;line-height:1.2;margin:0 0 8px;letter-spacing:-.6px}
h2{font-size:17px;margin:34px 0 12px;letter-spacing:-.2px}
h3{font-size:13px;margin:22px 0 8px;color:var(--mut);text-transform:uppercase;letter-spacing:.07em}
p{margin:0 0 12px;color:#c2c8d4}
.lede{font-size:15px;color:var(--mut);max-width:70ch}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
.kpi .k{font-size:11px;color:var(--dim);margin:0 0 4px}
.kpi .v{font-size:22px;font-weight:600;font-family:var(--mono);margin:0;letter-spacing:-.5px}
.kpi .s{font-size:10px;color:var(--dim);margin:3px 0 0}
.up{color:var(--up)} .down{color:var(--down)} .neutral{color:var(--ink)}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-weight:500;font-size:10px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.06em;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.045)}
td.num,th.num{text-align:right;font-family:var(--mono);white-space:nowrap}
tbody tr:hover{background:rgba(133,183,235,.06)}
.scroll{overflow-x:auto}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:3px}
.note{font-size:11px;color:var(--dim);line-height:1.65}
.badge{display:inline-block;font-size:10px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);color:var(--mut);background:rgba(255,255,255,.03)}
.badge.warn{color:#FAC775;border-color:rgba(250,199,117,.35);background:rgba(250,199,117,.07)}
footer{border-top:1px solid var(--line);padding:20px 0 34px;margin-top:34px}
footer p{font-size:11px;color:var(--dim);margin:0 0 6px}
.legalnav{margin:0 0 10px!important}
.legalnav a{color:var(--mut);text-decoration:none}
.legalnav a:hover,.legalnav a.on{color:var(--accent)}
footer .fine{max-width:76ch}
.spark{display:block;width:100%;height:46px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--mut);margin-top:8px}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px}


.chart{position:relative;touch-action:pan-y}   /* a sideways drag scrubs; vertical still scrolls */
/* One floating label for everything that used to rely on a mouse hover or a
   title attribute (donut slices, historical tickers, sector dots). Tap on a
   phone, hover with a mouse. */
#gtip{position:fixed;z-index:60;pointer-events:none;max-width:min(320px,86vw);
  background:rgba(8,10,14,.97);border:1px solid rgba(255,255,255,.14);border-radius:8px;
  padding:7px 10px;font-size:11.5px;line-height:1.45;color:var(--ink);
  box-shadow:0 8px 26px rgba(0,0,0,.55)}
[data-tip]{cursor:help}
.donut path[data-tip]{cursor:pointer}
.chart .cross{position:absolute;top:0;bottom:22px;width:0;pointer-events:none}
.chart .cross i{position:absolute;top:0;bottom:0;left:-0.5px;width:1px;
  background:rgba(255,255,255,.30);display:block}
.chart .tip{position:absolute;top:8px;pointer-events:none;background:rgba(8,10,14,.97);
  border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:8px 10px;
  font-size:11px;min-width:150px;box-shadow:0 8px 26px rgba(0,0,0,.55);z-index:4}
.tip-d{color:var(--mut);font-size:10px;margin-bottom:5px;font-family:var(--mono)}
.tip-r{display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--mut);padding:1px 0}
.tip-r i{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.tip-r b{margin-left:auto;font-family:var(--mono)}
.tip-x{border-top:1px solid rgba(255,255,255,.10);margin-top:4px;padding-top:4px}

/* Terminal-style backdrop: a fixed constellation field under everything, plus
   the same cool radial wash the local UI sits on. Pointer-events off so it can
   never intercept a click. */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
#bg svg{width:100%;height:100%;display:block}
/* The terminal's globe: orbit rings with a particles.js sphere inside them. */
#globe{position:fixed;top:340px;left:50%;transform:translate(-50%,-50%);
  width:1400px;height:1400px;max-width:180vw;max-height:180vw;z-index:0;pointer-events:none}
#globe svg.rings{position:absolute;inset:0;width:100%;height:100%;opacity:.3}
#globe .spin{transform-origin:200px 200px;animation:mjspin 22s linear infinite}
@keyframes mjspin{to{transform:rotate(360deg)}}
#particles-js{position:absolute;top:12.5%;left:12.5%;width:75%;height:75%;
  border-radius:50%;overflow:hidden;opacity:.6;
  background:radial-gradient(circle at 50% 50%,rgba(93,202,165,.02) 0%,rgba(10,13,20,0) 70%);
  box-shadow:inset -30px -30px 100px rgba(0,0,0,.6),inset 30px 30px 100px rgba(255,255,255,.05),0 0 150px rgba(93,202,165,.1)}
@media (prefers-reduced-motion: reduce){#globe .spin{animation:none}}
.insrow{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:11px;
  background:rgba(255,255,255,.02);border-radius:6px;padding:6px 8px;margin-bottom:4px}
.insscroll{max-height:320px;overflow-y:auto}
.dc .lvl{display:flex;align-items:baseline;gap:12px;margin:6px 0 12px}
.dc .lvl b{font-family:var(--mono);font-size:44px;line-height:1}
.dc .lvl span{font-size:15px;font-weight:600;letter-spacing:.04em}
.dc .gauge{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.dc .gauge i{height:8px;border-radius:3px;background:rgba(255,255,255,.07)}
.dc .gl{display:grid;grid-template-columns:repeat(5,1fr);font-size:10px;color:var(--dim);
  text-align:center;margin-top:4px}
/* Macro Trends orbital map */
.macro-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;margin-top:16px}
.macro-stage{position:relative;padding:0;overflow:hidden;height:620px;background:#03050A}
#macroCanvas{position:absolute;inset:0}
#macroCanvas canvas{display:block}
.macro-legend{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;
  flex-wrap:wrap;justify-content:center;gap:6px 14px;max-width:92%;background:rgba(3,5,10,.7);
  border:1px solid var(--line);border-radius:14px;padding:7px 16px;font-size:10px}
.macro-legend span{display:flex;align-items:center;gap:5px}
.macro-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.macro-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--up);font-size:13px;background:#03050A}
.macro-side{max-height:620px;overflow-y:auto}
.macro-side h3{margin:0 0 4px}
.macro-theme{border-bottom:1px solid var(--line);padding:10px 0}
.macro-theme b{font-size:13px}
.macro-sub{font-size:12px;color:var(--ink);margin-top:7px}
.macro-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.macro-chips span{background:rgba(255,255,255,.05);padding:2px 6px;border-radius:4px;font-size:10px;
  font-family:var(--mono)}
.macro-tip{display:none;position:fixed;z-index:30;pointer-events:none;background:rgba(15,19,29,.95);
  border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:7px 11px;font-size:11px;
  color:var(--ink);max-width:240px}
@media (max-width:860px){.macro-wrap{grid-template-columns:1fr}.macro-stage{height:440px}
  .macro-side{max-height:none}}
body{position:relative;background-image:
  radial-gradient(1200px 700px at 50% -10%, rgba(93,202,165,.055), transparent 60%),
  radial-gradient(900px 600px at 85% 20%, rgba(133,183,235,.045), transparent 65%)}
header,main,footer,.sheet{position:relative;z-index:1}


.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;cursor:pointer;transition:border-color .15s,background .15s}
.tile:hover{border-color:rgba(133,183,235,.45);background:rgba(133,183,235,.06)}

.crumb{font-size:11px;margin:0 0 10px}
.crumb a{color:var(--mut);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.cathead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.tile{display:block;text-decoration:none;color:inherit}
.tileart{height:72px;margin:-2px 0 12px;display:flex;align-items:center;justify-content:center}
.tileart svg{height:62px;width:100%;fill:none;stroke:#8b93a7;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.tile:hover .tileart svg{stroke:var(--accent);opacity:1}
.tchip{display:inline-block;font-size:9.5px;font-family:var(--mono);padding:2px 5px;
  margin:1px 2px 1px 0;border-radius:4px;background:rgba(255,255,255,.06);color:#b9c0d0}
.tmore{font-size:9.5px;color:var(--dim);margin-left:2px}
td.chips{max-width:230px;white-space:normal;line-height:1.7}

.piepair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0 8px}
.pietitle{font-size:12px;color:#8b93a7;margin:0 0 2px;text-align:center}
.piesub{font-size:10px;color:var(--dim);margin:0 0 8px;text-align:center;min-height:13px}
.exrow{display:grid;grid-template-columns:10px 1fr 160px 72px 64px;gap:12px;align-items:center;
  padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.045);font-size:12.5px}
.exrow:last-child{border-bottom:0}
.vsrow{display:grid;grid-template-columns:10px 1fr 76px 76px 120px 76px;gap:12px;align-items:center;
  padding:8px 2px;border-bottom:0.5px solid rgba(255,255,255,.06);font-size:12px}
.vsrow:last-child{border-bottom:0}
/* Performance strip. Each window is a column so the eye compares across
   horizons, and the two legs sit one above the other so MJ50 is always read
   against the index over the SAME dates rather than on its own. */
.perfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.perfcell{background:rgba(255,255,255,.02);border:0.5px solid rgba(255,255,255,.07);
  border-radius:9px;padding:11px 12px}
.perfcell.si{background:rgba(93,202,165,.06);border-color:rgba(93,202,165,.3)}
.perfcell .wl{font-size:9.5px;letter-spacing:.07em;color:var(--dim);text-transform:uppercase}
.perfcell .pv{font-family:var(--mono);font-size:19px;font-weight:600;margin:5px 0 1px}
.perfcell .bl{font-size:10px;color:var(--dim);font-family:var(--mono)}
.perfcell .sub{font-size:9.5px;color:var(--dim);margin-top:5px}
/* A window the book is too young for. Deliberately plain: no number, no bar,
   nothing that could be skim-read as a result. */
.perfcell.na .pv{color:var(--dim);font-size:15px}
.perfcell.na{background:transparent;border-style:dashed}
.vsrow.head{border-bottom:0.5px solid rgba(255,255,255,.12);padding-bottom:6px;
  font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#5a6274}
.vsnum{text-align:right;font-family:'JetBrains Mono',ui-monospace,monospace}
/* Diverging bar: the centre line is parity with the index, so a bar's SIDE
   says beat-or-lagged before its length says by how much. A single-sided bar
   would need the sign read off the number to mean anything. */
.vsbar{position:relative;height:6px;background:rgba(255,255,255,.06);border-radius:3px}
.vsbar:after{content:'';position:absolute;left:50%;top:-2px;width:1px;height:10px;
  background:rgba(255,255,255,.18)}
.vsbar i{position:absolute;top:0;height:100%;border-radius:3px;display:block}
.exrow .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.exname{color:var(--ink)}
.exbar{height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.exbar>i{display:block;height:100%;border-radius:3px}
.exret,.exwt{font-family:var(--mono);text-align:right}
.exwt{color:var(--ink);font-weight:600}
@media (max-width:820px){.piepair{grid-template-columns:1fr}
  .exrow{grid-template-columns:10px 1fr 64px 60px}.exbar{display:none}
  .vsrow{grid-template-columns:10px 1fr 64px 64px 64px}.vsbar{display:none}}

.statstrip{display:flex;gap:30px;flex-wrap:wrap;margin:18px 0 0}
.statstrip span{display:block;font-size:9.5px;color:var(--dim);letter-spacing:.07em;margin-bottom:3px}
.statstrip b{font-family:var(--mono);font-size:17px;color:var(--ink);font-weight:600}
.statstrip b.up{color:var(--up)} .statstrip b.down{color:var(--down)}
.warnbox{font-size:11px;color:#FAC775;background:rgba(250,199,117,.07);
  border:1px solid rgba(250,199,117,.28);border-radius:8px;padding:9px 11px;margin:12px 0 0;line-height:1.55}
/* ---- book rows + right rail (terminal layout) ------------------------- */
.rail{display:grid;grid-template-columns:1fr 310px;gap:22px;align-items:start}
.rail aside h3:first-of-type{margin-top:22px}
.bookrow{display:grid;grid-template-columns:9px 24px 58px 1fr 90px 58px 62px 10px;
  gap:9px;align-items:center;padding:7px 8px;border-radius:7px;cursor:pointer;
  font-size:12px;border-bottom:1px solid rgba(255,255,255,.04)}
.bookrow:hover{background:rgba(133,183,235,.09)}
.bookrow .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.bookrow .rk{color:var(--dim);font-family:var(--mono);font-size:11px;text-align:right}
.bookrow .tk{color:var(--ink);font-weight:600}
.bookrow .sc{color:var(--dim);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bookrow .bar{height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.bookrow .bar>i{display:block;height:100%;background:var(--accent);border-radius:3px}
.bookrow .wt,.bookrow .px{font-family:var(--mono);text-align:right;color:var(--ink)}
.bookrow .px{color:var(--mut)}
.bookrow .chev{color:var(--dim);text-align:right}
.mini{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:5px 0;font-size:11.5px;color:var(--mut);border-bottom:1px solid rgba(255,255,255,.045)}
.mini:last-child{border-bottom:0}
.mini b{font-family:var(--mono);color:var(--ink);font-weight:600}
@media (max-width:900px){.rail{grid-template-columns:1fr}
  .bookrow{grid-template-columns:9px 22px 54px 1fr 54px 10px}
  .bookrow .sc,.bookrow .bar,.bookrow .px{display:none}}
/* ---- interactive layer ------------------------------------------------- */
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:rgba(133,183,235,.10)}
th.sort{cursor:pointer;user-select:none}
th.sort:hover{color:var(--ink)}
th.sort::after{content:'';opacity:.35;margin-left:5px}
th.sort.asc::after{content:'B2'} th.sort.desc::after{content:'BC'}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 12px}
.tabs button{background:transparent;border:1px solid var(--line);color:var(--mut);
  border-radius:7px;padding:5px 13px;font-size:11.5px;cursor:pointer;font-family:inherit}
.tabs button:hover{color:var(--ink)}
.tabs button.on{background:rgba(255,255,255,.10);color:var(--ink);border-color:rgba(255,255,255,.18)}
.sheet{position:fixed;inset:0;background:rgba(3,5,8,.72);backdrop-filter:blur(3px);
  z-index:50;display:none;overflow-y:auto;padding:28px 16px}
.sheet.open{display:block}
.sheet-in{max-width:1000px;margin:0 auto;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:20px 22px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.sheet-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.x{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:7px;
  width:30px;height:30px;cursor:pointer;font-size:15px;line-height:1;flex-shrink:0}
.x:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.stmt{border-collapse:collapse;width:max-content;min-width:100%;font-size:11.5px}
.stmt th{position:sticky;top:0;background:var(--panel)}
.stmt td:first-child,.stmt th:first-child{position:sticky;left:0;background:var(--panel);
  min-width:210px;z-index:2}
.stmt td{font-family:var(--mono);text-align:right;white-space:nowrap;padding:6px 11px}
.stmt td:first-child{font-family:inherit;text-align:left;color:var(--mut)}
.stmt tr.sub td{color:var(--ink);font-weight:600}
.stmt tr.sub td:first-child{color:var(--ink)}
.donut{display:block}
.filter{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:6px 11px;font-size:12px;font-family:inherit;min-width:180px}
.filter::placeholder{color:var(--dim)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.chip{font-size:10.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);
  color:var(--mut);background:rgba(255,255,255,.03);cursor:pointer}
.chip.on{color:var(--ink);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
/* ---- phones -----------------------------------------------------------
   The wide tables already scroll (`.scroll` wraps every one of them), so the
   work here is not rescuing unreachable data -- it is that a filer row was
   192px tall on a 375px screen, which is four rows per viewport. Names wrap
   and every cell carried desktop padding.

   A horizontally scrolling region also needs to LOOK scrollable. On a phone
   there is no hover to reveal a scrollbar and no second column peeking out to
   hint at it, so the fade on the right edge is the only thing telling a reader
   there is more table. Without it the extra columns are reachable and
   undiscoverable, which is nearly as bad as being clipped. */
@media (max-width:620px){
  h1{font-size:24px}
  .wrap{padding:0 14px}
  .sheet{padding:10px 6px}.sheet-in{padding:14px}

  /* Rows: stop names wrapping to three lines, tighten to one thumb-height. */
  td{padding:10px 9px;white-space:nowrap}
  th{padding:7px 9px;white-space:nowrap}
  table{font-size:12.5px}

  /* Tap targets. 44px is the smallest reliably hittable control on a phone;
     these were sized for a cursor. */
  nav a{padding:9px 12px}
  .tabs button{min-height:40px;padding:8px 13px}
  .filter{min-height:42px;font-size:16px}  /* 16px stops iOS zooming on focus */

  /* The ticker chips were the actual cost of a 196px row: six wrapping chips
     at 20px each made one filer fill half a phone screen, so a 133-row table
     showed four of them.

     Capping the cell does not work -- a table cell sizes to its content and
     ignores max-width, which is why the first attempt still measured 144px.
     Hiding the overflow chips does not work either: the "+N" beside them
     counts what was dropped at RENDER time, so hiding four more in CSS would
     leave a number that silently understates. The column is therefore hidden
     whole on a phone, where it is the least readable thing in the row anyway,
     and the full composition is one tap away on the filer's own sheet. */
  td.chips,th.chips{display:none}

  .statstrip{gap:18px}
  .statstrip b{font-size:15px}
  .grid.g4,.grid.g2{grid-template-columns:1fr 1fr}
  .vsrow{grid-template-columns:10px 1fr 60px 60px}
  .vsrow .vsnum:nth-of-type(3){display:none}   /* keep ours vs index, drop diff */
}

/* The scroll affordance itself, at every width: a fade on the right edge that
   disappears once the reader has scrolled to the end. Pure CSS, no listener --
   the background is attached to the scrolling box, so it moves with it. */
/* "hover" is an instruction a touch device cannot follow. Chosen by input
   type rather than by width: a small laptop still has a pointer, and a large
   tablet does not. */
.tapword{display:none}
@media (hover:none),(pointer:coarse){
  .hoverword{display:none}
  .tapword{display:inline}
}

.scroll{
  background:
    linear-gradient(to right, var(--panel) 30%, rgba(13,17,23,0)) left center,
    linear-gradient(to left,  var(--panel) 30%, rgba(13,17,23,0)) right center,
    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) right center;
  background-repeat:no-repeat;
  background-size:34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-attachment:local, local, scroll, scroll;
  -webkit-overflow-scrolling:touch;   /* momentum scrolling on iOS */
}