:root{
  --bg:#f1f0f5;
  --bg-raised:#ffffff;
  --panel-border: rgba(20,17,33,0.12);
  --text:#191a21;
  --text-dim:#5b5f70;
  --text-faint:#8b8fa0;
  --accent:#7c3aed;
  --accent-soft: rgba(124,58,237,0.12);
  --accent-line: rgba(124,58,237,0.35);
  --good:#1f8f68;
  --good-soft: rgba(31,143,104,0.12);
  --hot:#b93d24;
  --hot-soft: rgba(185,61,36,0.12);
  --grid-line: rgba(20,17,33,0.08);
  --shadow: 0 1px 2px rgba(20,17,33,0.06), 0 8px 24px rgba(20,17,33,0.05);
  --serif: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14151b;
    --bg-raised:#1b1d26;
    --panel-border: rgba(255,255,255,0.09);
    --text:#edeef1;
    --text-dim:#9a9fb0;
    --text-faint:#6c7080;
    --accent:#a377ff;
    --accent-soft: rgba(163,119,255,0.14);
    --accent-line: rgba(163,119,255,0.4);
    --good:#4fc19a;
    --good-soft: rgba(79,193,154,0.14);
    --hot:#e57a5f;
    --hot-soft: rgba(229,122,95,0.14);
    --grid-line: rgba(255,255,255,0.07);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 30px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --bg:#14151b;
  --bg-raised:#1b1d26;
  --panel-border: rgba(255,255,255,0.09);
  --text:#edeef1;
  --text-dim:#9a9fb0;
  --text-faint:#6c7080;
  --accent:#a377ff;
  --accent-soft: rgba(163,119,255,0.14);
  --accent-line: rgba(163,119,255,0.4);
  --good:#4fc19a;
  --good-soft: rgba(79,193,154,0.14);
  --hot:#e57a5f;
  --hot-soft: rgba(229,122,95,0.14);
  --grid-line: rgba(255,255,255,0.07);
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 30px rgba(0,0,0,0.35);
}
:root[data-theme="light"]{
  --bg:#f1f0f5;
  --bg-raised:#ffffff;
  --panel-border: rgba(20,17,33,0.12);
  --text:#191a21;
  --text-dim:#5b5f70;
  --text-faint:#8b8fa0;
  --accent:#7c3aed;
  --accent-soft: rgba(124,58,237,0.12);
  --accent-line: rgba(124,58,237,0.35);
  --good:#1f8f68;
  --good-soft: rgba(31,143,104,0.12);
  --hot:#b93d24;
  --hot-soft: rgba(185,61,36,0.12);
  --grid-line: rgba(20,17,33,0.08);
  --shadow: 0 1px 2px rgba(20,17,33,0.06), 0 8px 24px rgba(20,17,33,0.05);
}

*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--accent);}
a:focus-visible, button:focus-visible, .navlink:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
::selection{ background:var(--accent-soft); }

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow .dim{ color:var(--text-faint); font-weight:500; }

.layout{
  display:grid;
  grid-template-columns:15rem minmax(0,1fr);
  max-width:1180px;
  margin:0 auto;
}
@media (max-width:860px){
  .layout{ grid-template-columns:1fr; }
}

/* ---------- rail nav ---------- */
.rail{
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  padding:2.4rem 1.5rem 2rem 2rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
@media (max-width:860px){
  .rail{
    position:static;
    height:auto;
    padding:1.1rem 1.25rem;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--panel-border);
  }
}
.rail-top .mark{
  font-family:var(--mono);
  font-weight:600;
  font-size:0.85rem;
  letter-spacing:0.02em;
  color:var(--text);
  text-decoration:none;
  display:block;
  margin-bottom:2.4rem;
}
.rail-top .mark span{ color:var(--accent); }
@media (max-width:860px){ .rail-top .mark{ margin-bottom:0; } .rail-top{ display:flex; align-items:center; } }

.navlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.15rem; }
@media (max-width:860px){ .navlist{ display:none; } }
.navlink{
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--mono); font-size:0.8rem; color:var(--text-faint);
  text-decoration:none; padding:0.4rem 0; border-left:2px solid transparent;
  padding-left:0.7rem; transition:color .15s ease, border-color .15s ease;
}
.navlink .tick{ width:5px; height:5px; border-radius:50%; background:var(--text-faint); flex:none; transition:background .15s ease, box-shadow .15s ease;}
.navlink.active{ color:var(--text); border-left-color:var(--accent); }
.navlink.active .tick{ background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.navlink:hover{ color:var(--text); }

.rail-bottom{ display:flex; flex-direction:column; gap:0.5rem; }
@media (max-width:860px){ .rail-bottom{ flex-direction:row; } }
.gh-link{
  font-family:var(--mono); font-size:0.78rem; color:var(--text-dim); text-decoration:none;
  display:inline-flex; align-items:center; gap:0.45rem;
}
.gh-link:hover{ color:var(--accent); }
.gh-link svg{ width:14px; height:14px; }

/* ---------- main content ---------- */
main{ padding:0 1.5rem 6rem; min-width:0; }
@media (max-width:860px){ main{ padding:0 1.25rem 4rem; } }

.hero{
  max-width:640px;
  padding:5rem 0 3.5rem;
}
@media (max-width:860px){ .hero{ padding:3rem 0 2.5rem; } }
.hero h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.1rem, 4.4vw, 3.1rem);
  line-height:1.08;
  margin:0.9rem 0 1.1rem;
  text-wrap:balance;
  letter-spacing:-0.01em;
}
.hero h1 em{ font-style:italic; color:var(--accent); font-weight:600; }
.hero p{ color:var(--text-dim); font-size:1.05rem; max-width:34rem; }
.hero p.lede{ color:var(--text); font-size:1.15rem; }
.hero-links{ display:flex; gap:0.9rem; margin-top:1.6rem; flex-wrap:wrap; }
.pill-link{
  font-family:var(--mono); font-size:0.78rem; font-weight:500;
  color:var(--text); text-decoration:none;
  border:1px solid var(--panel-border); border-radius:5px;
  padding:0.5rem 0.85rem; display:inline-flex; align-items:center; gap:0.5rem;
  transition:border-color .15s ease, color .15s ease;
}
.pill-link:hover{ border-color:var(--accent-line); color:var(--accent); }

.stack-chips{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.4rem;}
.chip{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.02em;
  color:var(--text-dim); background:var(--bg-raised); border:1px solid var(--panel-border);
  padding:0.28rem 0.6rem; border-radius:4px;
}

/* ---------- project section ---------- */
.project{ padding:3.6rem 0; border-top:1px solid var(--panel-border); }
.project-head{ max-width:640px; }
.project-head h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.7rem,3vw,2.3rem);
  margin:0.6rem 0 1rem; text-wrap:balance; letter-spacing:-0.01em;
}
.project-head p{ color:var(--text-dim); font-size:1.02rem; }
.project-head p.lede{ color:var(--text); font-size:1.08rem; }
.meta-row{ display:flex; flex-wrap:wrap; gap:1.2rem; margin:1.3rem 0 0.4rem; }
.meta-item{ font-family:var(--mono); font-size:0.75rem; color:var(--text-faint); }
.meta-item b{ color:var(--text-dim); font-weight:600; }

.prose{ max-width:640px; }
.prose h3{
  font-family:var(--sans); font-weight:700; font-size:1rem; margin:2.4rem 0 0.8rem;
  color:var(--text);
}
.prose p{ color:var(--text-dim); }
.prose strong{ color:var(--text); }

/* stat tiles */
.stat-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--panel-border); border:1px solid var(--panel-border);
  border-radius:6px; overflow:hidden; margin:1.6rem 0; max-width:640px;
}
@media (max-width:560px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
.stat{ background:var(--bg-raised); padding:1.1rem 1.1rem 1.2rem; }
.stat .num{
  font-family:var(--serif); font-weight:600; font-size:1.7rem; color:var(--text);
  font-variant-numeric:tabular-nums; display:block; letter-spacing:-0.01em;
}
.stat .num.accent{ color:var(--accent); }
.stat .lbl{ font-family:var(--mono); font-size:0.68rem; color:var(--text-faint); letter-spacing:0.03em; text-transform:uppercase; display:block; margin-top:0.35rem; }

/* instrument panel (breaks out wider than prose column) */
.panel{
  max-width:820px;
  background:var(--bg-raised); border:1px solid var(--panel-border); border-radius:8px;
  padding:1.6rem 1.7rem 1.4rem; margin:1.8rem 0; box-shadow:var(--shadow);
}
.panel-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:0.9rem;}
.panel-title{ font-family:var(--sans); font-weight:700; font-size:0.95rem; color:var(--text); }
.panel-sub{ font-family:var(--mono); font-size:0.72rem; color:var(--text-faint); }
.chart-wrap{ width:100%; overflow-x:auto; }
.chart-wrap svg{ display:block; width:100%; height:auto; }
.legend{ display:flex; gap:1.3rem; flex-wrap:wrap; margin-top:0.7rem; }
.legend-item{ display:flex; align-items:center; gap:0.45rem; font-family:var(--mono); font-size:0.72rem; color:var(--text-dim); }
.legend-swatch{ width:14px; height:3px; border-radius:2px; }
.panel-note{ font-size:0.85rem; color:var(--text-dim); margin-top:0.9rem; max-width:52ch; }
.panel-note b{ color:var(--text); }

/* callout */
.callout{
  max-width:640px; border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:1rem 1.2rem; border-radius:0 6px 6px 0; margin:1.6rem 0;
}
.callout p{ margin:0; color:var(--text); font-size:0.94rem; }
.callout .k{ font-family:var(--mono); font-weight:600; color:var(--accent); }

/* rules table */
.rules{ max-width:640px; border-collapse:collapse; width:100%; margin:1.4rem 0; font-size:0.92rem; }
.rules th, .rules td{ text-align:left; padding:0.65rem 0.9rem 0.65rem 0; border-bottom:1px solid var(--panel-border); vertical-align:top; }
.rules th{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.rules td:first-child{ font-family:var(--mono); font-weight:600; color:var(--text); white-space:nowrap; }
.rules td{ color:var(--text-dim); }

/* example h2h mock */
.h2h-mock{
  max-width:640px; background:var(--bg-raised); border:1px solid var(--panel-border); border-radius:8px;
  padding:1.3rem 1.5rem; margin:1.6rem 0; box-shadow:var(--shadow);
}
.h2h-mock .tag{ font-family:var(--mono); font-size:0.65rem; color:var(--text-faint); letter-spacing:0.05em; text-transform:uppercase; }
.h2h-row{ display:flex; align-items:center; gap:1rem; margin-top:0.8rem; }
.h2h-driver{ flex:1; font-family:var(--sans); font-weight:700; font-size:0.98rem; }
.h2h-driver.right{ text-align:right; }
.h2h-score{ font-family:var(--serif); font-weight:600; font-size:2rem; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; display:flex; gap:0.5rem; align-items:baseline; }
.h2h-score .win{ color:var(--accent); }
.h2h-bar{ height:6px; border-radius:3px; background:var(--grid-line); overflow:hidden; margin-top:0.9rem; display:flex; }
.h2h-bar span{ display:block; height:100%; }

.endpoint-block{
  max-width:640px; background:var(--bg-raised); border:1px solid var(--panel-border); border-radius:6px;
  padding:0.9rem 1.1rem; margin:1.2rem 0; font-family:var(--mono); font-size:0.78rem; color:var(--text-dim);
  overflow-x:auto; white-space:pre; line-height:1.7;
}
.endpoint-block .verb{ color:var(--good); font-weight:600; }

footer{
  max-width:640px; border-top:1px solid var(--panel-border); padding-top:2.2rem; margin-top:1rem;
  color:var(--text-faint); font-family:var(--mono); font-size:0.78rem;
}
footer a{ color:var(--text-dim); }
footer a:hover{ color:var(--accent); }

@media (prefers-reduced-motion:no-preference){
  .navlink, .pill-link, .gh-link{ transition-duration:.15s; }
}