/* WSS quantitative-research interface — design tokens.
   Brand: WSS / Why So Serious?. Near-black surfaces, off-white text, a deep
   controlled red as the primary accent and a restrained violet as a selective
   secondary. Token NAMES are stable (inline styles reference them); only the
   palette is tuned. */
:root{
  /* surfaces */
  --bg:#08080d;--bg2:#101017;--bg3:#15151f;--surface3:#1c1c28;
  --bd:#21212e;--bd2:#2d2d3e;
  /* text */
  --txt:#edeef2;--dim:#969cab;--muted:#5a606e;
  /* data semantics */
  --green:#23c08a;--red:#ff6b78;--yellow:#e7b24a;
  --pos:#23c08a;--neg:#ff6b78;--warn:#e7b24a;
  /* brand */
  --accent:#d6394d;--accent2:#b3293b;--accent-soft:rgba(214,57,77,.12);
  --violet:#a06bff;
  /* asset + monitor-role identity */
  --btc:#f7931a;--eth:#7b8cf4;
  --role-primary:#23c08a;--role-control:#7b8cf4;--role-diagnostic:#e7b24a;
  --mono:'SF Mono','Fira Code','Consolas','Courier New',monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--txt);line-height:1.55;font-size:15px;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
a:focus-visible,.topnav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
code{font-family:var(--mono);font-size:.92em;color:var(--dim);word-break:break-word}
.wrap{max-width:1140px;margin:0 auto;padding:22px 20px 40px}
/* ── top navigation ── */
.topnav{position:sticky;top:0;background:rgba(8,8,13,.94);backdrop-filter:blur(8px);z-index:20;
  display:flex;gap:6px;padding:11px 0;border-bottom:1px solid var(--bd);margin-bottom:22px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--dim);font-weight:600;font-size:.82em;letter-spacing:.02em;white-space:nowrap;
  padding:5px 11px;border-radius:5px;border:1px solid transparent}
.topnav a:hover{color:var(--txt);background:var(--bg2);text-decoration:none}
.topnav a.nav-accent{color:var(--accent)}
/* ── hero ── */
.hero{border:1px solid var(--bd);border-top:2px solid var(--accent);border-radius:10px;
  background:linear-gradient(180deg,rgba(214,57,77,.05),rgba(8,8,13,0) 60%),var(--bg2);
  padding:20px 22px;margin-bottom:14px}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.hero-brand{display:flex;align-items:center;gap:14px}
.hero-logo{font-family:var(--mono);font-weight:800;font-size:1.05em;letter-spacing:.06em;color:var(--accent);
  border:1.5px solid var(--accent);border-radius:8px;padding:8px 11px;line-height:1;background:var(--accent-soft)}
.hero h1{font-size:1.5em;font-weight:800;letter-spacing:-.02em;color:var(--txt)}
.hero-sub{font-size:.86em;color:var(--dim);margin-top:3px;max-width:46ch}
.hero-badges{display:flex;gap:7px;flex-wrap:wrap;align-items:flex-start}
.hero-meta{margin-top:16px;padding-top:12px;border-top:1px solid var(--bd);font-size:.76em;color:var(--muted);
  display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono)}
.hero-meta b{color:var(--dim);font-weight:600}
/* ── sections ── */
section{margin-top:40px;scroll-margin-top:64px}
.sec-h{font-size:1.18em;font-weight:800;letter-spacing:-.01em;color:var(--txt);margin:0 0 6px;
  padding-bottom:9px;border-bottom:2px solid var(--bd2);display:flex;align-items:baseline;gap:9px}
.sec-h .sec-tag{font-family:var(--mono);font-size:.62em;font-weight:700;padding:2px 7px;border-radius:4px;
  letter-spacing:.04em;text-transform:uppercase}
#btc-strategies .sec-h{border-bottom-color:rgba(247,147,26,.4)}
#btc-strategies .sec-tag{color:var(--btc);background:rgba(247,147,26,.12);border:1px solid rgba(247,147,26,.3)}
#eth-forward-validation .sec-h{border-bottom-color:rgba(123,140,244,.4)}
#eth-forward-validation .sec-tag{color:var(--eth);background:rgba(123,140,244,.12);border:1px solid rgba(123,140,244,.3)}
#research-watchlist .sec-h{border-bottom-color:rgba(231,178,74,.4)}
#research-watchlist .sec-tag{color:var(--yellow);background:rgba(231,178,74,.12);border:1px solid rgba(231,178,74,.3)}
#methodology .sec-tag{color:var(--dim);background:var(--bg3);border:1px solid var(--bd2)}
.sec-sub{font-size:.85em;color:var(--dim);margin-bottom:14px;line-height:1.6;max-width:78ch}
h3{font-size:.73em;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);
  margin:26px 0 11px;padding-bottom:6px;border-bottom:1px solid var(--bd)}
h4{font-size:.95em;font-weight:700;color:var(--txt);margin:18px 0 4px}
/* ── maturity-group framing ── */
.group{border:1px solid var(--bd);border-radius:9px;background:var(--bg2);padding:14px 16px;margin-bottom:14px}
.group-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.group-hd h3{margin:0;padding:0;border:0;font-size:.82em;color:var(--txt);letter-spacing:.06em}
.group-count{font-family:var(--mono);font-size:.7em;color:var(--dim);background:var(--bg3);
  border:1px solid var(--bd2);border-radius:20px;padding:2px 9px}
.group-desc{font-size:.8em;color:var(--dim);line-height:1.55;margin-bottom:10px;max-width:80ch}
.group.g-bench{border-left:3px solid var(--btc)}
.group.g-ml{border-left:3px solid var(--violet)}
.group.g-dyn{border-left:3px solid var(--eth)}
.group.g-hist{border-left:3px solid var(--yellow);background:rgba(231,178,74,.04)}
.group .tbl{margin-bottom:0}
/* ── badges ── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:5px;font-size:.68em;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;line-height:1.5}
.b-ok{background:rgba(35,192,138,.14);color:var(--green);border:1px solid rgba(35,192,138,.28)}
.b-warn{background:rgba(231,178,74,.14);color:var(--yellow);border:1px solid rgba(231,178,74,.3)}
.b-purple{background:rgba(160,107,255,.15);color:var(--violet);border:1px solid rgba(160,107,255,.32)}
.b-dyn{background:rgba(123,140,244,.13);color:var(--eth);border:1px solid rgba(123,140,244,.32)}
.b-eth{background:rgba(123,140,244,.13);color:var(--eth);border:1px solid rgba(123,140,244,.34)}
.b-muted{background:rgba(150,156,171,.12);color:var(--dim);border:1px solid rgba(150,156,171,.28)}
.b-accent{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(214,57,77,.32)}
.b-btc{background:rgba(247,147,26,.13);color:var(--btc);border:1px solid rgba(247,147,26,.3)}
.b-primary{background:rgba(35,192,138,.14);color:var(--role-primary);border:1px solid rgba(35,192,138,.3)}
.b-control{background:rgba(123,140,244,.13);color:var(--role-control);border:1px solid rgba(123,140,244,.32)}
.b-diag{background:rgba(231,178,74,.13);color:var(--role-diagnostic);border:1px solid rgba(231,178,74,.3)}
.badges-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
/* ── stat cards ── */
.strip{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.sc{background:var(--bg2);border:1px solid var(--bd);border-radius:7px;padding:11px 14px;min-width:128px;flex:1}
.sc-dyn{background:rgba(123,140,244,.05);border-color:rgba(123,140,244,.25)}
.sc-hero{background:linear-gradient(180deg,var(--accent-soft),rgba(8,8,13,0)),var(--bg2);border-color:rgba(214,57,77,.28)}
.sc-l{font-size:.66em;color:var(--dim);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;font-weight:600}
.sc-v{font-size:1.18em;font-weight:700;font-family:var(--mono);color:var(--txt);letter-spacing:-.01em}
.sc-note{font-size:.66em;color:var(--muted);margin-top:5px;line-height:1.45}
/* ── tables ── */
.tbl{overflow-x:auto;margin-bottom:12px;-webkit-overflow-scrolling:touch;border:1px solid var(--bd);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:.84em}
thead th{background:var(--bg3);color:var(--dim);padding:8px 11px;text-align:left;font-size:.69em;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--bd2);white-space:nowrap}
thead th.r{text-align:right}
tbody td{padding:8px 11px;border-bottom:1px solid rgba(33,33,46,.8);vertical-align:top}
tbody td.r{text-align:right;font-family:var(--mono);font-size:.9em}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(214,57,77,.04)}
td .sv{color:var(--muted);font-size:.76em;font-family:var(--mono);word-break:break-all}
td .pos{color:var(--pos)}td .neg{color:var(--neg)}
/* ── figures ── */
.fig-1{display:grid;grid-template-columns:1fr;gap:13px;margin:12px 0 18px}
.fig-1 img{width:100%;height:auto;border-radius:8px;border:1px solid var(--bd);background:var(--bg2)}
.fig-card{margin:0}
.fig-cap{font-size:.78em;color:var(--dim);margin-top:8px;font-style:italic;text-align:center}
/* ── callouts ── */
.note-dyn{background:rgba(123,140,244,.06);border:1px solid rgba(123,140,244,.22);border-left:3px solid var(--eth);border-radius:7px;padding:11px 15px;margin-bottom:12px;font-size:.82em;color:#aeb8f5;line-height:1.6}
.note-research{background:rgba(231,178,74,.06);border:1px solid rgba(231,178,74,.22);border-left:3px solid var(--yellow);border-radius:7px;padding:11px 15px;margin-bottom:12px;font-size:.82em;color:#e7c98a;line-height:1.6}
.note-stale{background:rgba(255,107,120,.07);border:1px solid rgba(255,107,120,.3);border-left:3px solid var(--neg);border-radius:7px;padding:11px 15px;margin-bottom:14px;font-size:.82em;color:#ffb3ba;line-height:1.6}
.note-pending{background:var(--bg2);border:1px solid var(--bd);border-left:3px solid var(--eth);border-radius:7px;padding:13px 15px;font-size:.86em;color:var(--txt);line-height:1.6}
.note-dyn strong,.note-research strong,.note-stale strong,.note-pending strong{color:var(--txt)}
/* ── methodology ── */
.meth{list-style:none;font-size:.85em;color:var(--dim);line-height:1.6}
.meth li{padding:7px 0 7px 18px;position:relative;border-bottom:1px solid rgba(33,33,46,.6)}
.meth li:before{content:"";position:absolute;left:0;top:13px;width:7px;height:1px;background:var(--accent)}
.meth strong{color:var(--txt)}
footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--bd);font-size:.74em;color:var(--muted);line-height:1.65}
/* ── responsive ── */
@media(max-width:640px){
  body{font-size:14px}.wrap{padding:16px 13px 32px}
  .topnav{flex-wrap:wrap;overflow-x:visible}
  .topnav a{font-size:.78em;padding:5px 8px}
  .hero{padding:16px 16px}.hero h1{font-size:1.28em}.hero-logo{font-size:.95em;padding:7px 9px}
  .sc{min-width:100%}
  .sec-h{font-size:1.06em}
  table{font-size:.8em}
  thead th,tbody td{padding:7px 9px}
  /* keep the strategy identity column readable while the rest scrolls */
  thead th:first-child,tbody td:first-child{position:sticky;left:0;background:var(--bg2);z-index:1;box-shadow:1px 0 0 var(--bd)}
  thead th:first-child{background:var(--bg3)}
}