/* ============================================================
   CASHCAT.BOT — V1.0 preview
   "serious data wearing a CashCat costume"
   ============================================================ */

:root{
  --base:#070B09;
  --base-2:#0B120E;
  --panel:#101815;
  --panel-2:#0D1411;
  --line:#1C2721;
  --line-soft:#16201B;
  --ink:#E8F0EA;
  --muted:#93A79B;          /* lifted from #7E8F85 for 4.5:1 on --base */
  --muted-dim:#7E8F85;      /* large / non-body text only */
  --green:#00C805;
  --green-soft:rgba(0,200,5,.12);
  --green-line:rgba(0,200,5,.34);
  --red:#FF4D4D;
  --red-soft:rgba(255,77,77,.12);
  --amber:#F5A524;
  --amber-soft:rgba(245,165,36,.12);

  --ui:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --r:4px;
  --wrap:1180px;
  --gut:clamp(16px,4vw,32px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(rgba(232,240,234,.045) 1px, transparent 1px);
  background-size:26px 26px;
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(0,200,5,.09), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, rgba(0,200,5,.045), transparent 70%);
}
main,header,footer{position:relative;z-index:1}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-.02em;font-weight:600}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
button{font:inherit;color:inherit}

.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.01em}
.muted{color:var(--muted)}
.up{color:var(--green)}
.down{color:var(--red)}
.flat{color:var(--amber)}
.dot{color:var(--green)}
.code{font-family:var(--mono);font-size:.86em;color:var(--ink);background:var(--line-soft);border:1px solid var(--line);border-radius:3px;padding:.05em .32em;white-space:nowrap}

[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:0;top:-200px;z-index:99;background:var(--green);color:#04170a;padding:10px 16px;font-weight:700}
.skip:focus{left:8px;top:8px;z-index:100}

:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.09em;
  padding:4px 8px;border:1px solid var(--line);border-radius:3px;color:var(--muted);
  background:var(--panel-2);
}
.chip-preview{color:var(--green);border-color:var(--green-line);background:var(--green-soft)}
.chip-sim{color:var(--amber);border-color:rgba(245,165,36,.35);background:var(--amber-soft)}
.chip-live{color:var(--green);border-color:var(--green-line)}
.chip-warn{color:var(--amber);border-color:rgba(245,165,36,.4);background:var(--amber-soft)}

.dot-live{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(0,200,5,.55);animation:pulse 2.4s infinite;flex:none}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,200,5,.5)}
  70%{box-shadow:0 0 0 7px rgba(0,200,5,0)}
  100%{box-shadow:0 0 0 0 rgba(0,200,5,0)}
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(7,11,9,.97);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:10px;height:56px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex:none}
.brand .mark{color:var(--green);flex:none}
.wordmark{font-family:var(--ui);font-weight:700;letter-spacing:.02em;font-size:15px}
.header-inner .chip-preview{margin-left:2px}
.nav{margin-left:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--muted);
  text-decoration:none;padding:8px 9px;white-space:nowrap;border-radius:3px;
  transition:color .18s ease,background .18s ease;
}
.nav a:hover{color:var(--ink);background:var(--line-soft)}

@media (max-width:720px){
  .header-inner{height:auto;flex-wrap:wrap;padding-block:9px;gap:8px}
  .nav{
    width:100%;margin-left:0;order:3;padding-bottom:2px;gap:0;padding-right:18px;
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 82%,transparent 100%);
  }
  .nav a{padding:6px 10px 6px 0}
  .nav a:last-child{padding-right:8px}
  .header-inner .chip-preview{margin-left:auto}
}

/* ---------- hero ---------- */
.hero{padding:clamp(38px,7vw,78px) 0 clamp(26px,5vw,48px)}
.hero-inner{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.status{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--green);display:flex;align-items:center;gap:8px;margin-bottom:16px}
.hero h1{
  font-size:clamp(38px,10.5vw,86px);font-weight:700;letter-spacing:-.035em;
  line-height:.94;overflow-wrap:break-word;
}
.lede{font-size:clamp(17px,3.4vw,24px);color:var(--ink);margin-top:16px;max-width:22ch;letter-spacing:-.01em}
.tagline{
  font-family:var(--mono);font-size:clamp(11px,2.7vw,14px);letter-spacing:.05em;
  color:var(--green);margin-top:12px;
}
.hero-note{color:var(--muted);font-size:13.5px;margin-top:18px;max-width:46ch;line-height:1.6}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;
  padding:13px 20px;border-radius:var(--r);text-decoration:none;border:1px solid var(--line);
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.btn-primary{background:var(--green);border-color:var(--green);color:#04170A;font-weight:700}
.btn-primary:hover{transform:translateY(-1px);background:#1FE023}
.btn-ghost{color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--green-line);background:var(--green-soft)}
/* One cat now, in two homes. Below 1000px the lede and tagline both carry hard
   line breaks and never fill the column, leaving a dead pocket to their right —
   the mascot sits in it. Above 1000px the hero splits into copy + cat column
   and the mascot moves there instead. Only one is ever rendered. */
.hero-pitch{display:flex;align-items:center;gap:clamp(10px,3vw,20px)}
.hero-pitch-copy{flex:1 1 auto;min-width:0}
.cat-inline{position:relative;flex:0 0 auto;margin:0;width:clamp(104px,30vw,148px)}
.hero-cat{display:none;position:relative;justify-self:end;margin-top:-6px;width:clamp(196px,20vw,264px)}
.hero-cat figure{position:relative;margin:0}
.cat-inline img,.hero-cat img{display:block;width:100%;height:auto}
/* The artwork is a disc on a black field, so the glow reads as a halo around
   the ring rather than a smear behind a sparse silhouette. */
.cat-inline::after,.hero-cat figure::after{
  content:"";position:absolute;inset:-7%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,200,5,.34),transparent 62%);
  filter:blur(18px);z-index:-1;
}

/* The split hero switches on at 900px now, not 1000px. The 1000px floor was
   sized for two cats side by side; a single disc is ~90px narrower and clears
   the column without pushing a scrollbar. */
@media (min-width:900px){
  .hero-inner{grid-template-columns:1fr auto;gap:40px}
  .hero-cat{display:block}
  .cat-inline{display:none}
}
/* ---------- sections ---------- */
.section{padding:clamp(44px,7vw,86px) 0;border-top:1px solid var(--line-soft)}
.section-head{margin-bottom:clamp(20px,3vw,32px)}
.section-head h2{
  font-size:clamp(22px,4.6vw,34px);font-weight:700;letter-spacing:-.02em;
}
.section-sub{color:var(--muted);font-size:14px;margin-top:8px}

/* ---------- device / terminal ---------- */
.device{
  border:1px solid var(--line);border-radius:8px;background:var(--base-2);
  box-shadow:0 30px 90px -50px rgba(0,200,5,.35),0 0 0 1px rgba(0,0,0,.4);
  overflow:hidden;
}
.chrome{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 12px;background:var(--panel-2);border-bottom:1px solid var(--line);
}
.chrome-dots{display:flex;gap:5px;flex:none}
.chrome-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}
.chrome-url{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  padding:3px 10px;border:1px solid var(--line);border-radius:20px;background:var(--base);
}
.chrome .chip-sim{margin-left:auto}

.screen{padding:clamp(10px,2vw,16px);display:grid;gap:10px}

.panel{
  min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:clamp(13px,2.4vw,20px);
}
.panel-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.panel-head h3{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;color:var(--muted);
}
.src,.fresh{font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:var(--muted-dim)}
.src b{color:var(--ink);font-weight:500}
.panel-head .src{margin-left:auto}
.panel-head .src + .fresh{margin-left:0}
.panel-head .fresh:first-of-type:not(.src + .fresh){margin-left:auto}

/* A. market */
.market{display:grid;gap:18px}
.asset{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink)}
.asset .muted{letter-spacing:.1em}
.big{
  font-size:clamp(38px,10vw,64px);font-weight:700;line-height:1;margin-top:8px;
  letter-spacing:-.03em;transition:color .2s ease;
}
.big.tick-up{color:var(--green)}
.big.tick-down{color:var(--red)}
.delta{font-size:clamp(13px,3vw,17px);margin-top:8px;font-weight:500}
.delta .unit{color:var(--muted);font-size:.72em;letter-spacing:.1em}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stats > div{border:1px solid var(--line-soft);border-radius:4px;padding:10px 12px;background:var(--panel-2);min-width:0}
.stats dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;color:var(--muted)}
.stats dd{font-size:clamp(15px,3.6vw,19px);margin-top:4px;font-weight:500}
@media (min-width:720px){
  .market{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:26px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){ .stats{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* B. signal card */
.panel-signal{
  text-align:center;padding-block:clamp(22px,5vw,38px);
  border-color:var(--green-line);
  background:
    radial-gradient(60% 120% at 50% 0%,rgba(0,200,5,.10),transparent 70%),
    var(--panel);
}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--muted)}
.signal-word{
  font-size:clamp(56px,17vw,116px);line-height:.92;font-weight:700;letter-spacing:-.045em;
  color:var(--green);margin-top:6px;
}
.signal-kind{font-family:var(--mono);font-size:clamp(11px,2.7vw,13px);letter-spacing:.24em;color:var(--ink);margin-top:6px}
.signal-meta{font-size:13px;color:var(--muted);margin-top:12px}
.signal-foot{font-size:12px;color:var(--muted);margin-top:14px;max-width:52ch;margin-inline:auto;line-height:1.55}
.sig-arrive{animation:arrive .9s ease}
@keyframes arrive{0%{box-shadow:0 0 0 0 rgba(0,200,5,.28)}100%{box-shadow:0 0 0 22px rgba(0,200,5,0)}}

/* C+F. tables */
.table-wrap{width:100%}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.11em;color:var(--muted);
  text-align:left;padding:0 10px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody th,tbody td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line-soft);text-align:left;font-weight:400;vertical-align:middle}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody th{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:500}
thead th:last-child,tbody td:last-child{padding-right:0;text-align:right}
.matrix tbody td:last-child{text-align:right}

.pill{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  padding:3px 8px;border-radius:3px;border:1px solid;white-space:nowrap;
}
.pill-buy{color:var(--green);border-color:var(--green-line);background:var(--green-soft)}
.pill-sell{color:var(--red);border-color:rgba(255,77,77,.35);background:var(--red-soft)}
.pill-neutral{color:var(--amber);border-color:rgba(245,165,36,.35);background:var(--amber-soft)}

/* mobile: tables become stacked cards */
@media (max-width:719px){
  /* labels are re-exposed per cell via [data-l] ::before, so the header row is redundant here */
  .matrix thead,.history thead{display:none}
  .matrix tbody tr,.history tbody tr{
    display:grid;grid-template-columns:minmax(0,1fr);gap:2px;
    border:1px solid var(--line);border-radius:5px;padding:11px 12px;margin-bottom:8px;background:var(--panel-2);
  }
  .matrix tbody tr:last-child,.history tbody tr:last-child{margin-bottom:0}
  .matrix tbody th,.history tbody th{
    grid-column:1/-1;border:0;padding:0 0 8px;font-size:16px;letter-spacing:.06em;
  }
  .matrix tbody td,.history tbody td{
    display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
    border:0;padding:4px 0;text-align:right;
  }
  .matrix tbody td::before,.history tbody td::before{
    content:attr(data-l);font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;color:var(--muted);text-align:left;
  }
  .matrix tbody td:last-child,.history tbody td:last-child{text-align:right;padding-right:0}
  .matrix tbody td > *,.history tbody td > *{justify-self:end}
  .history tbody th{display:flex;justify-content:space-between;align-items:baseline}
}

/* weights */
.weights{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px}
.weights-line{font-size:11.5px;color:var(--muted);letter-spacing:.03em}
.weights-score{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.weights-score b{font-size:17px;letter-spacing:-.01em}
.weights-score .arrow{color:var(--muted-dim)}
.weights-note{font-size:11.5px;color:var(--muted);line-height:1.6;max-width:78ch}

/* D. structure */
.structure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.structure > div{border:1px solid var(--line-soft);background:var(--panel-2);border-radius:4px;padding:11px 12px;min-width:0}
.structure dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;color:var(--muted)}
.structure dd{font-family:var(--mono);font-size:clamp(15px,3.6vw,18px);margin-top:5px;letter-spacing:.02em}
.rsi-cell{grid-column:1/-1}
.gauge{margin-top:9px;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.gauge-fill{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--green));transition:width .9s cubic-bezier(.22,1,.36,1)}
.gauge-scale{display:flex;justify-content:space-between;font-size:9px;color:var(--muted-dim);margin-top:5px}
@media (min-width:720px){
  .structure{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rsi-cell{grid-column:auto}
}

/* E. perps */
.perps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.perps > div{border:1px solid var(--line-soft);background:var(--panel-2);border-radius:4px;padding:11px 12px;min-width:0}
.perps dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;color:var(--muted)}
.perps dd{font-size:clamp(16px,4vw,21px);margin-top:5px;font-weight:500}
.perps .sub{font-size:10.5px;margin-top:3px;letter-spacing:.05em}
@media (min-width:720px){.perps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.perps{grid-template-columns:repeat(6,minmax(0,1fr))}}

.perpread{
  margin-top:14px;border:1px solid rgba(245,165,36,.34);background:var(--amber-soft);
  border-left-width:3px;border-radius:4px;padding:14px 15px;
}
.perpread-title{
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--amber);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.perpread-tag{
  font-size:9px;letter-spacing:.14em;font-weight:500;color:var(--muted);
  border:1px solid var(--line);border-radius:3px;padding:2px 6px;background:var(--panel-2);
}
.perpread-body{font-size:13.5px;color:var(--ink);margin-top:9px;line-height:1.6;max-width:70ch}
.perpread-foot{font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--muted);margin-top:9px}

/* G. degraded */
.panel-degraded{border-style:dashed;background:var(--panel-2)}
.degraded-body{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.02em}
.degraded-cap{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.65;max-width:78ch}
.degraded-cap b{color:var(--amber);font-weight:600}

/* history foot */
.history-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.viewall{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;color:var(--green);
  border:1px solid var(--green-line);border-radius:3px;padding:6px 10px;background:var(--green-soft);opacity:.75;
}
.history-foot .muted{font-size:11px}
.row-new{animation:slidein .6s ease}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.device-foot{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--muted);
  padding:11px 14px;border-top:1px solid var(--line);background:var(--panel-2);
}

/* ---------- modules ---------- */
.modules{display:grid;gap:12px}
@media (min-width:700px){.modules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){
  .modules{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mod:nth-child(4){grid-column:1/2}
}
.mod{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:20px;min-width:0}
.mod-n{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--green)}
.mod h3{font-size:16px;margin-top:10px;letter-spacing:-.005em}
.mod-line{font-size:13.5px;color:var(--ink);margin-top:9px;line-height:1.6}
.mod ul{margin-top:13px;display:grid;gap:7px;border-top:1px solid var(--line-soft);padding-top:13px}
.mod ul li{font-size:12.5px;color:var(--muted);line-height:1.6;padding-left:14px;position:relative}
.mod ul li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--green)}

/* ---------- architecture ---------- */
.arch-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.arch-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}
.arch-grid > *,.arch-side > *{min-width:0}
.arch-side{display:grid;gap:12px;min-width:0}
.lane{padding:14px 0;border-top:1px solid var(--line-soft)}
.lane:first-of-type{border-top:0;padding-top:0}
.lane-title{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--green);margin-bottom:10px}
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.node{
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ink);
  border:1px solid var(--line);border-radius:4px;padding:7px 10px;background:var(--panel-2);
  overflow-wrap:anywhere;
}
.node-src{border-color:var(--line);color:var(--muted)}
.node-api{border-color:var(--green-line);color:var(--green);background:var(--green-soft)}
.node-ok{border-color:var(--green-line);color:var(--green);background:var(--green-soft);font-weight:500}
.edge{width:14px;height:1px;background:var(--line);flex:none;position:relative}
.edge::after{content:"";position:absolute;right:-1px;top:-2.5px;border-left:5px solid var(--line);border-top:3px solid transparent;border-bottom:3px solid transparent}
.steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-left:14px;border-left:1px solid var(--line)}
.steps li{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);
  border:1px dashed var(--line);border-radius:3px;padding:5px 8px;
}
.flow-out{margin-top:10px;padding-left:14px}
.branch-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted-dim);margin-top:12px}
.steps-async li{border-style:dotted}
.flow-chain{gap:6px}

.principle{
  margin:16px 0 0;border:1px solid var(--green-line);border-left-width:3px;border-radius:4px;
  padding:16px;background:var(--green-soft);
}
.principle p{font-size:14.5px;line-height:1.55}
.principle p:first-child{color:var(--green)}
.principle p + p{margin-top:7px;color:var(--ink);font-size:13.5px}

.code-block{
  margin:0;overflow-x:auto;font-family:var(--mono);font-size:11.5px;line-height:1.75;
  background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:14px;
  -webkit-overflow-scrolling:touch;
}
.code-block code{white-space:pre}
.code-block .k{color:#6FE3B4}
.code-block .s{color:#E8F0EA}
.code-block .n{color:var(--amber)}
.code-block .p{color:var(--muted-dim)}
.code-foot{font-size:11.5px;color:var(--muted);margin-top:11px;line-height:1.6}
.sec-list{display:grid;gap:8px}
.sec-list li{font-size:12.5px;color:var(--muted);padding-left:16px;position:relative;line-height:1.55}
.sec-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-family:var(--mono);font-size:11px}

.stack-strip{
  margin-top:12px;border:1px solid var(--line);border-radius:6px;background:var(--panel);
  padding:14px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.stack-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--green)}
.stack-strip ul{display:flex;flex-wrap:wrap;gap:8px 14px}
.stack-strip li{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* ---------- roadmap ---------- */
.timeline{display:grid;gap:10px}
@media (min-width:900px){.timeline{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}}
.tl{
  border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:16px;min-width:0;
  position:relative;
}
@media (min-width:900px){
  .tl::after{
    content:"";position:absolute;right:-8px;top:34px;width:8px;height:1px;background:var(--line);z-index:1;
  }
  .tl:last-child::after{display:none}
}
.tl-tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted)}
.tl h3{font-size:14px;margin-top:8px;letter-spacing:.01em}
.tl ul{margin-top:11px;display:grid;gap:6px;border-top:1px solid var(--line-soft);padding-top:11px}
.tl ul li{font-size:12px;color:var(--muted);line-height:1.55;padding-left:12px;position:relative}
.tl ul li::before{content:"";position:absolute;left:0;top:.6em;width:4px;height:1px;background:var(--muted-dim)}
.tl-launch{border-color:var(--green-line);background:linear-gradient(180deg,rgba(0,200,5,.10),transparent 60%),var(--panel)}
.tl-launch .tl-tag{color:var(--green)}
.tl-launch h3{color:var(--ink)}
.tl-launch ul li::before{background:var(--green)}
.tl-note{font-size:13px;color:var(--ink);margin-top:16px;max-width:70ch;line-height:1.65;border-left:2px solid var(--green-line);padding-left:14px}

.notin{margin-top:24px;border:1px solid var(--line-soft);border-radius:6px;padding:18px;background:var(--panel-2)}
.notin-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted)}
.notin ul{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:12px}
.notin li{
  font-family:var(--mono);font-size:11px;color:var(--muted-dim);
  border:1px solid var(--line-soft);border-radius:3px;padding:4px 8px;
}
.notin-foot{font-size:12px;color:var(--muted);margin-top:12px}

/* ---------- lore ---------- */
.section-lore{background:linear-gradient(180deg,transparent,rgba(0,200,5,.03))}
.lore-inner{display:grid;gap:22px;align-items:center}
@media (min-width:900px){.lore-inner{grid-template-columns:minmax(0,1fr) auto;gap:48px}}
.lore-copy p{font-size:14.5px;color:var(--muted);line-height:1.75;margin-top:14px;max-width:66ch}
.lore-copy p b{color:var(--ink);font-weight:600}
.cite{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--green);text-decoration:none;
  border:1px solid var(--green-line);border-radius:3px;padding:2px 6px;white-space:nowrap;
  background:var(--green-soft);vertical-align:2px;
}
.cite:hover{background:rgba(0,200,5,.2)}
.lore-kicker{
  font-family:var(--ui);font-size:clamp(18px,4.4vw,27px)!important;color:var(--ink)!important;
  font-weight:600;letter-spacing:-.02em;margin-top:26px!important;line-height:1.25;
}
.lore-cat{width:clamp(120px,30vw,200px);justify-self:center;opacity:.92}
@media (min-width:900px){.lore-cat{justify-self:end}}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--base-2);padding:clamp(32px,5vw,52px) 0 40px}
.foot-top{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.foot-tag{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:10px;letter-spacing:.04em}
.nav-foot{margin-left:0;flex-wrap:wrap;overflow:visible}
.nav-foot a{padding:6px 10px 6px 0}

.ca{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-soft)}
.ca-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted)}
.ca-chip{
  margin-top:9px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:11px 13px;cursor:pointer;width:100%;text-align:left;max-width:640px;
  transition:border-color .16s ease,background .16s ease;
}
.ca-chip:hover{border-color:var(--green-line);background:var(--panel-2)}
.ca-addr{font-size:11.5px;color:var(--ink);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all;line-height:1.5}
.ca-action{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--green);margin-left:auto;
  border:1px solid var(--green-line);border-radius:3px;padding:4px 8px;background:var(--green-soft);flex:none;
}
.ca-status{font-family:var(--mono);font-size:10.5px;color:var(--green);margin-top:8px;min-height:16px;letter-spacing:.06em}

.disclaimer{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-soft);max-width:82ch}
.disc-title{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted)}
.disclaimer p + p{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.7}
.disclaimer p:nth-child(2){margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.7}
.colophon{margin-top:26px;font-size:10px;letter-spacing:.14em;color:var(--muted-dim)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .dot-live{animation:none;box-shadow:none}
}

/* Tagline break: only wrap on narrow viewports */
.tagline-br { display: none; }
@media (max-width: 560px) { .tagline-br { display: inline; } }

/* ============================================================
   DASHBOARD ADDITIONS — live data states, chart, venues, and the
   door through to the terminal.
   ============================================================ */

/* --- state chips -------------------------------------------------------
   Four states share one slot: LIVE, DELAYED, UNAVAILABLE, SIMULATED.
   The word carries the meaning; colour only reinforces it, so the panel
   still reads correctly in monochrome or with a colour-vision deficiency. */
.perpread.is-calm{
  border-color:var(--line);background:var(--panel-2);
}
.perpread.is-calm .perpread-title{color:var(--muted)}
.stat-sub{
  font-size:10.5px;letter-spacing:.04em;color:var(--muted);margin:3px 0 0;
}
.chip-state{min-width:74px;justify-content:center;text-align:center}
.chip-dead{color:var(--red);border-color:rgba(255,77,77,.4);background:var(--red-soft)}

.chip-live.is-off{color:var(--red);border-color:rgba(255,77,77,.4)}
.chip-live.is-off .dot-live{background:var(--red);animation:none}

/* --- section head with the terminal door ----------------------------- */
.head-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.head-hint{
  font-size:13.5px;color:var(--muted);max-width:62ch;
  margin:12px 0 0;line-height:1.6;
}
.btn-term{position:relative}
.btn-arrow{margin-left:9px;letter-spacing:0;font-size:13px;line-height:1}

.nav-term{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  color:var(--green);border:1px solid var(--green-line);
  background:var(--green-soft);border-radius:4px;padding:5px 9px;
}
.nav-term:hover{background:rgba(0,200,5,.2)}

/* --- panel footnotes -------------------------------------------------- */
.panel-foot{
  font-size:12.5px;color:var(--muted);margin:14px 0 0;line-height:1.6;
  border-top:1px solid var(--line-soft);padding-top:11px;
}
.panel-foot code{font-family:var(--mono);font-size:11.5px;color:var(--ink)}

/* --- timeframe switcher ---------------------------------------------- */
.tfbar{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.tfbtn{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--muted);background:var(--panel-2);
  border:1px solid var(--line);border-radius:4px;
  padding:5px 9px;cursor:pointer;
}
.tfbtn:hover{color:var(--ink);border-color:var(--muted-dim)}
.tfbtn[aria-pressed="true"]{
  color:var(--green);border-color:var(--green-line);background:var(--green-soft);
}
.tfbtn:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* --- the chart panel -------------------------------------------------
   The chart component ships its own head, badge and collapsible RSI/MACD
   panes for the terminal. On the dashboard the surrounding panel already
   carries a title and a state chip, and the sub-panes are deliberately a
   terminal feature, so both are suppressed here rather than duplicated. */
#mod-chart .tvpanel-head,
#mod-chart .tvsub{display:none}
#mod-chart .tvpanel{border:0;background:transparent;padding:0}
#mod-chart .tvpanel-chart{
  height:340px;width:100%;position:relative;
  border:1px solid var(--line-soft);border-radius:4px;background:var(--panel-2);
}
@media (max-width:760px){#mod-chart .tvpanel-chart{height:250px}}
#mod-chart .tvpanel-legend{
  position:absolute;top:8px;left:10px;z-index:3;display:flex;gap:12px;
  flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  pointer-events:none;
}
#mod-chart .tvleg-item{display:inline-flex;align-items:center;gap:5px}
#mod-chart .tvleg-item i{width:9px;height:2px;border-radius:1px;flex:none}
#mod-chart .tvleg-k{color:var(--muted)}
#mod-chart .tvleg-v{color:var(--ink)}
#mod-chart .tvpanel-foot{
  font-size:11.5px;color:var(--muted-dim);margin-top:8px;font-family:var(--mono);
}
.chart-dead{
  font-size:13px;color:var(--amber);border:1px dashed rgba(245,165,36,.4);
  background:var(--amber-soft);border-radius:4px;padding:16px;margin:0;
}

/* --- simulated cells and columns -------------------------------------
   Shading marks the two matrix columns that cannot be real, so the eye
   sorts real from simulated without reading the footnote first. The
   pattern is repeated on the two liquidation cells in the perp grid. */
.col-sim{background:rgba(245,165,36,.055)}
.cell-sim{border-color:rgba(245,165,36,.3) !important}
.th-tag{
  display:inline-block;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.09em;padding:1px 4px;border-radius:3px;
  margin-left:5px;vertical-align:1px;
}
.th-sim{color:var(--amber);background:var(--amber-soft);border:1px solid rgba(245,165,36,.35)}
.th-live{color:var(--green);background:var(--green-soft);border:1px solid var(--green-line)}
.perps .cell-sim dt{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.perps .cell-sim dd{color:var(--muted)}

/* --- venue status ----------------------------------------------------- */
.venues{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.venue{
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  border:1px solid var(--line-soft);background:var(--panel-2);
  border-radius:4px;padding:11px 13px;
}
.v-name{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink)}
.v-state{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  color:var(--green);text-align:right;
}
.v-detail{
  grid-column:1 / -1;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.04em;color:var(--muted);
}
.venue.is-dead{border-color:rgba(255,77,77,.32);border-style:dashed}
.venue.is-dead .v-state{color:var(--red)}
.venue.is-dead .v-name{color:var(--muted)}
@media (min-width:820px){
  .venues{grid-template-columns:repeat(3,minmax(0,1fr))}
  .venue{grid-template-columns:1fr auto}
}

/* --- the terminal dialog ---------------------------------------------
   A native <dialog> so the browser handles the top layer, focus trapping
   and Escape. The terminal loads in an iframe: it keeps its own warm
   banknote theme intact and cannot collide with this page's CSS or keys,
   which reads as a deliberate mode switch rather than a broken skin. */
.termdlg{
  width:min(1240px,96vw);height:min(90vh,980px);
  padding:0;border:1px solid var(--line);border-radius:8px;
  background:var(--base-2);color:var(--ink);
  box-shadow:0 30px 90px rgba(0,0,0,.7);overflow:hidden;
}
.termdlg::backdrop{background:rgba(3,6,4,.82)}
.termdlg-bar{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel);
}
.termdlg-title{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--muted);
}
.termdlg-out{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--green);text-decoration:none;border:1px solid var(--green-line);
  background:var(--green-soft);border-radius:4px;padding:5px 9px;
}
.termdlg-out:hover{background:rgba(0,200,5,.2)}
.termdlg-x{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--muted);background:var(--panel-2);border:1px solid var(--line);
  border-radius:4px;padding:5px 9px;cursor:pointer;
}
.termdlg-x:hover{color:var(--ink);border-color:var(--muted-dim)}
.termdlg-x:focus-visible,.termdlg-out:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.termdlg-body{height:calc(100% - 45px)}
.termdlg-frame{width:100%;height:100%;border:0;display:block;background:#07100A}
@media (max-width:700px){
  .termdlg{width:100vw;height:100vh;max-width:none;max-height:none;border-radius:0;border:0}
  /* At 390px the bar's three labels wrapped onto two lines each, turning 45px of
     chrome into 90px and stealing it from the terminal. The title yields first
     and truncates; the two controls are the ones that must stay tappable. */
  .termdlg-bar{gap:8px;padding:9px 12px}
  .termdlg-title{
    font-size:10px;letter-spacing:.1em;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .termdlg-out,.termdlg-x{flex:none;white-space:nowrap;padding:5px 8px}
  .termdlg-body{height:calc(100% - 41px)}
}

/* --- narrow-screen corrections ---------------------------------------
   The terminal button's label is long enough to clip its own arrow at 390px,
   and the crosshair legend sits over the candles once the chart is only a few
   hundred pixels wide. On narrow screens the buttons take a full row each and
   the legend moves out of the plot and above it. */
@media (max-width:560px){
  .head-actions{gap:8px}
  .head-actions .btn{flex:1 1 100%;justify-content:center;text-align:center}
}
#mod-chart .tvpanel-legend{
  position:static;margin:0 0 9px;padding:0;
  row-gap:4px;column-gap:16px;
}
@media (max-width:760px){
  .tfbar{margin-left:0;width:100%}
  .tfbtn{flex:1 1 auto}
  .panel-head h3{width:100%}
}