:root{
  --bg:#06080d; --bg2:#0a0e17; --card:#0f1420; --card2:#131a29;
  --line:#1b2333; --line2:#28344c;
  --text:#e8eef8; --muted:#93a0b8; --muted2:#5f6c86;
  --blue:#4c8dff; --cyan:#34d3ee; --violet:#a78bfa;
  --green:#37d39a; --amber:#f6b73c; --red:#fb5d6f;
  --green-bg:rgba(55,211,154,.12); --amber-bg:rgba(246,183,60,.13); --red-bg:rgba(251,93,111,.13);
  --mono:'Fira Code',ui-monospace,Menlo,monospace;
  --sans:'Fira Sans',system-ui,-apple-system,sans-serif;
  --r:14px; --maxw:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
b{font-weight:700}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}

/* ambient */
.ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(70% 55% at 18% -8%, rgba(76,141,255,.16), transparent 60%),
    radial-gradient(60% 50% at 100% 0%, rgba(167,139,250,.12), transparent 55%),
    radial-gradient(50% 40% at 60% 108%, rgba(52,211,154,.08), transparent 60%);
}
.ambient::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
  mask-image:linear-gradient(180deg,#000,transparent 70%);}

/* topbar */
.topbar{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);
  background:rgba(6,8,13,.72);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand-name b{color:var(--blue)}
.brand-mark{width:16px;height:16px;border-radius:5px;
  background:conic-gradient(from 210deg,var(--blue),var(--cyan),var(--green),var(--blue));
  box-shadow:0 0 14px rgba(52,211,238,.5)}
.topnav{display:flex;gap:22px;font-size:14px}
.topnav a{color:var(--muted);transition:color .16s}
.topnav a:hover{color:var(--text)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center;
  padding:64px 0 26px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan)}
h1{font-size:clamp(38px,5.2vw,62px);line-height:1.03;margin:16px 0 14px;
  font-weight:800;letter-spacing:-.02em}
h1 .hl{color:var(--green);text-shadow:0 0 26px rgba(55,211,154,.35)}
.lede{color:#c4cee0;font-size:17px;max-width:42ch;margin:0 0 20px}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:var(--mono);font-size:12px;color:var(--muted);
  border:1px solid var(--line2);border-radius:999px;padding:5px 11px;background:var(--bg2)}

.card{background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r)}
.hero-number{padding:22px 22px 18px;box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.hn-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted2);text-align:center}
.hn-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 6px}
.hn-side{flex:1;text-align:center}
.hn-cfg{font-family:var(--mono);font-size:12px;color:var(--red);text-transform:uppercase;letter-spacing:.1em}
.hn-cfg-hard{color:var(--green)}
.hn-val{font-family:var(--mono);font-weight:700;font-size:52px;line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums}
.hn-val-good{color:var(--green);text-shadow:0 0 26px rgba(55,211,154,.3)}
.hn-sub{font-size:11.5px;color:var(--muted2);margin-top:6px;min-height:28px}
.hn-arrow{color:var(--muted)}
.hn-foot{border-top:1px solid var(--line);padding-top:12px;margin-top:8px;
  font-size:12.5px;color:var(--muted);text-align:center}

.disclaimer{border:1px dashed var(--line2);border-radius:12px;background:var(--bg2);
  padding:12px 16px;font-size:13.5px;color:var(--muted);margin:8px 0 6px}
.disclaimer b{color:#cdd7e8}

/* sections */
section{margin:46px 0}
.sec-title{font-size:22px;font-weight:700;margin:0 0 18px;letter-spacing:-.01em}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sec-head .sec-title{margin:0}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 17px}
.tile-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tile-name{font-size:13px;color:var(--muted);font-weight:500}
.tile-delta{font-family:var(--mono);font-size:12px;padding:2px 8px;border-radius:999px;font-weight:600}
.d-up{color:var(--green);background:var(--green-bg)}
.d-down{color:var(--red);background:var(--red-bg)}
.d-flat{color:var(--muted);background:var(--bg2)}
.tile-vals{display:flex;align-items:baseline;gap:10px;margin-top:12px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tile-base{font-size:20px;color:var(--muted2);text-decoration:line-through;text-decoration-color:var(--line2)}
.tv-arrow{color:var(--muted2);font-size:14px}
.tile-hard{font-size:30px;font-weight:700;color:var(--text)}
.tile-hard.good{color:var(--green)} .tile-hard.bad{color:var(--red)}
.tile-note{font-size:12px;color:var(--muted2);margin-top:8px}

/* spotlights */
.spotgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.spot{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;position:relative;overflow:hidden}
.spot.red{border-color:rgba(251,93,111,.4)}
.spot.amber{border-color:rgba(246,183,60,.38)}
.spot-tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.spot.red .spot-tag{color:var(--red)} .spot.amber .spot-tag{color:var(--amber)}
.spot-q{font-weight:600;margin:8px 0 12px;font-size:15px}
.spot-line{font-size:13px;color:var(--muted);margin:8px 0}
.spot-line .k{font-family:var(--mono);color:#cdd7e8}
.ans-box{border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:11px 12px;font-size:13.5px;margin:8px 0}
.ans-box .who{font-family:var(--mono);font-size:11px;color:var(--muted2);display:block;margin-bottom:5px}
.sent-bad{background:var(--red-bg);border-bottom:2px solid var(--red);border-radius:3px;padding:0 2px}
.sent-ok{background:var(--green-bg);border-radius:3px;padding:0 2px}
.spot-punch{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.spot-punch b{color:var(--text)}

/* segmented + filters */
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg-btn{font-family:var(--mono);font-size:13px;color:var(--muted);background:none;border:0;padding:7px 16px;border-radius:8px;cursor:pointer;transition:.15s}
.seg-btn.is-active{background:var(--card2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip-btn{font-size:12.5px;color:var(--muted);background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:5px 13px;cursor:pointer;transition:.15s}
.chip-btn:hover{color:var(--text);border-color:var(--line2)}
.chip-btn.is-active{color:var(--text);border-color:var(--blue);background:rgba(76,141,255,.1)}

/* question table */
.qtable{display:flex;flex-direction:column;gap:8px}
.qrow{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qhead{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
  padding:13px 16px;cursor:pointer;user-select:none}
.qhead:hover{background:var(--card2)}
.qid{font-family:var(--mono);font-size:12px;color:var(--muted2)}
.qq{font-size:14.5px;font-weight:500}
.qtext-a{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60ch}
.qchips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.chip{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:999px;white-space:nowrap;font-weight:600}
.c-green{color:var(--green);background:var(--green-bg)}
.c-red{color:var(--red);background:var(--red-bg)}
.c-amber{color:var(--amber);background:var(--amber-bg)}
.c-mut{color:var(--muted);background:var(--bg2)}
.caret{width:16px;height:16px;color:var(--muted2);transition:transform .18s;flex:none}
.qrow.open .caret{transform:rotate(90deg)}
.qbody{display:none;padding:2px 16px 16px;border-top:1px solid var(--line);animation:fade .2s ease}
.qrow.open .qbody{display:block}
@keyframes fade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.qb-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:720px){.qb-grid{grid-template-columns:1fr}}
.panel-h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin:0 0 8px}
.answer-blk{border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:12px;font-size:14px;line-height:1.6}
.why{font-size:13px;color:var(--muted);margin-top:10px;background:var(--bg2);border-radius:8px;padding:10px 12px}
.why b{color:#cdd7e8}
.ctx{border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:8px;max-height:230px;overflow:auto}
.ctx-item{padding:8px 9px;border-radius:8px;font-size:12.5px;line-height:1.5}
.ctx-item + .ctx-item{margin-top:5px}
.ctx-item.gold{background:var(--green-bg);box-shadow:inset 0 0 0 1px rgba(55,211,154,.25)}
.ctx-doc{font-family:var(--mono);font-size:11px;color:var(--cyan);display:flex;justify-content:space-between}
.ctx-doc .sim{color:var(--muted2)}
.ctx-txt{color:var(--muted);margin-top:3px}
.gold-tag{font-family:var(--mono);font-size:10px;color:var(--green);border:1px solid rgba(55,211,154,.4);border-radius:4px;padding:0 5px;margin-left:6px}

/* regression */
.reg-summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.reg-stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;flex:1;min-width:150px}
.reg-stat .n{font-family:var(--mono);font-size:30px;font-weight:700}
.reg-stat .l{font-size:12.5px;color:var(--muted);margin-top:2px}
.reg-stat.good .n{color:var(--green)} .reg-stat.bad .n{color:var(--red)} .reg-stat.flat .n{color:var(--muted)}
.reg-list{display:flex;flex-direction:column;gap:8px}
.reg-item{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 15px}
.reg-item.fixed{border-left:3px solid var(--green)}
.reg-item.regressed{border-left:3px solid var(--red)}
.reg-q{font-size:13.5px}
.reg-ba{font-family:var(--mono);font-size:11.5px;color:var(--muted2);margin-top:3px}
.reg-badge{font-family:var(--mono);font-size:11px;padding:3px 10px;border-radius:999px;font-weight:600}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:56px;padding:26px 0 60px;
  display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px}
.foot b{color:var(--text)}
.foot-links a{color:var(--blue)} .foot-links .sep{color:var(--muted2);margin:0 8px}
.foot-meta{font-family:var(--mono);font-size:12px;color:var(--muted2)}

/* methodology page */
.doc{max-width:820px;margin:0 auto;padding:34px 22px 80px}
.doc h1{font-size:34px;margin:6px 0 8px}
.doc h2{font-size:20px;margin:30px 0 10px;border-bottom:1px solid var(--line);padding-bottom:7px}
.doc h3{font-size:15px;font-family:var(--mono);color:var(--cyan);margin:20px 0 6px}
.doc p,.doc li{color:#c4cee0;font-size:15px}
.doc code{font-family:var(--mono);font-size:13px;background:var(--bg2);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;color:var(--cyan)}
.doc .back{font-family:var(--mono);font-size:13px;color:var(--blue)}
.formula{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:10px;padding:14px 16px;font-family:var(--mono);font-size:13px;color:#cdd7e8;margin:12px 0;line-height:1.7;overflow-x:auto}
.limit{background:var(--amber-bg);border:1px solid rgba(246,183,60,.3);border-radius:10px;padding:12px 16px;margin:12px 0;font-size:14px;color:#e7dcc4}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:26px;padding:36px 0 12px}
  .tiles{grid-template-columns:1fr 1fr}
  .spotgrid{grid-template-columns:1fr}
  .topnav{display:none}
}
@media (max-width:520px){
  .tiles{grid-template-columns:1fr}
  .hn-val{font-size:42px}
  .qtext-a{display:none}
  .qhead{grid-template-columns:44px 1fr auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}