:root{
  --bg:#0A0E0F; --sunken:#070A0B; --hair:#18201d; --control:#1d2622; --key:#2a342f;
  --phos:#62E08A; --phos-dim:#5a8f6e; --code:#8fd9a8;
  --primary:#f1f5f2; --heading:#e7ece8; --body:#b9c0ba; --muted:#8b938c;
  --muted2:#7e877f; --meta:#6b746c; --meta-dim:#586059; --faint:#3a463f; --sep:#2c352f;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Space Grotesk',sans-serif;
  --read:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--body); font-family:var(--read);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:inherit; text-decoration:none;}
::selection{background:rgba(98,224,138,0.22);}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

/* top bar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 36px; border-bottom:1px solid var(--hair);
  font-family:var(--mono); position:sticky; top:0; z-index:20;
  background:rgba(10,14,15,0.82); backdrop-filter:blur(8px);
}
.logo{display:flex; align-items:center; gap:2px; font-size:15px; color:var(--phos); font-weight:500;}
.tilde{color:var(--faint);}
.cursor{display:inline-block; width:9px; height:17px; margin-left:6px; background:var(--phos);
  animation:blink 1.1s step-end infinite;}
.nav{display:flex; align-items:center; gap:30px; font-size:13px; color:var(--muted2);}
.nav a{transition:color .14s ease;}
.nav a:hover{color:var(--primary);}
.nav a.on{color:#dfe6e1;}
.search{
  display:flex; align-items:center; gap:8px; border:1px solid var(--control);
  border-radius:4px; padding:6px 10px; color:var(--meta-dim); font-family:var(--mono);
  font-size:13px; background:none; cursor:pointer; transition:border-color .14s ease,color .14s ease;
}
.search:hover{border-color:var(--key); color:var(--muted2);}
.search kbd{border:1px solid var(--key); border-radius:3px; padding:1px 5px; font-size:11px; font-family:var(--mono);}
.crumb{color:var(--meta-dim); font-size:13px;}
.crumb span{color:#dfe6e1;}

/* shell width */
.wrap{max-width:1180px; margin:0 auto; width:100%;}
main{flex:1 0 auto;}

/* hero */
.hero{padding:56px 36px 44px; border-bottom:1px solid var(--hair);}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:0.14em; color:var(--phos); margin-bottom:18px;}
.hero h1{
  font-family:var(--display); font-size:46px; line-height:1.08; font-weight:600;
  color:var(--primary); letter-spacing:-0.02em; margin:0; max-width:880px; text-wrap:balance;
}
.hero .dek{font-size:16px; line-height:1.6; color:var(--muted); max-width:680px; margin-top:18px;}
.byline{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:13px; color:var(--meta); margin-top:24px;}
.byline .pr{color:var(--phos);}
.byline .dot,.foot-row .dot,.foot-meta .dot{color:var(--sep);}

/* article grid */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:0;}
.card{padding:24px 28px; border-bottom:1px solid var(--hair); display:block;
  transition:background .14s ease; min-width:0;}
.card:nth-child(odd){border-right:1px solid var(--hair);}
.card:hover{background:#0E1413;}
.card .cat{font-family:var(--mono); font-size:11px; color:var(--phos-dim); margin-bottom:12px;}
.card h2{font-family:var(--display); font-size:21px; font-weight:600; color:var(--heading);
  line-height:1.2; margin:0; transition:color .14s ease;}
.card:hover h2{color:var(--phos);}
.card .desc{font-size:14px; color:var(--muted2); margin-top:10px; line-height:1.5;}
.card .cmeta{font-family:var(--mono); font-size:12px; color:var(--meta-dim); margin-top:16px;}

/* section label */
.seclabel{font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--meta-dim); padding:34px 36px 0;}

/* reading column */
.read{max-width:760px; margin:0 auto; padding:56px 36px 72px;}
.read .kicker{margin-bottom:20px;}
.read h1{font-family:var(--display); font-size:42px; line-height:1.08; font-weight:600;
  color:var(--primary); letter-spacing:-0.02em; margin:0; text-wrap:balance;}
.read .byline{padding-bottom:28px; border-bottom:1px solid var(--hair); margin-top:22px;}
.read .body{margin-top:30px;}
.read .body p{font-size:17px; line-height:1.75; color:var(--body); margin:0 0 22px;}
.read .body p:first-child{margin-top:0;}
.read .body h2{font-family:var(--display); font-size:26px; font-weight:600; color:var(--heading);
  letter-spacing:-0.01em; margin:40px 0 14px;}
.read .body h3{font-family:var(--display); font-size:19px; font-weight:600; color:var(--heading);
  margin:30px 0 10px;}
.read .body a{color:var(--phos); border-bottom:1px solid rgba(98,224,138,0.3);}
.read .body a:hover{border-bottom-color:var(--phos);}
.read .body strong{color:var(--heading); font-weight:600;}
.read .body ul,.read .body ol{font-size:17px; line-height:1.75; color:var(--body); padding-left:22px; margin:0 0 22px;}
.read .body li{margin-bottom:8px;}
.read .body li::marker{color:var(--phos-dim);}
.read .body code{font-family:var(--mono); font-size:14px; color:var(--code);
  background:var(--sunken); border:1px solid var(--hair); border-radius:3px; padding:1px 5px;}
.read .body pre{background:var(--sunken); border:1px solid var(--hair); border-left:2px solid var(--phos);
  border-radius:4px; padding:20px 22px; margin:28px 0; overflow:auto;}
.read .body pre code{font-family:var(--mono); font-size:14px; line-height:1.8; color:var(--code);
  background:none; border:0; padding:0; white-space:pre;}
.read .body pre .c{color:var(--meta-dim);}
.read .body blockquote{border-left:2px solid var(--phos); padding:6px 0 6px 22px; margin:30px 0;
  font-family:var(--display); font-size:22px; line-height:1.4; color:var(--heading);}
.read .body blockquote p{font-family:inherit; font-size:inherit; color:inherit; margin:0;}
.tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:36px;}
.tag{font-family:var(--mono); font-size:12px; color:var(--phos); border:1px solid var(--control);
  border-radius:4px; padding:5px 11px; transition:border-color .14s ease;}
.tag:hover{border-color:var(--key);}
.backlink{font-family:var(--mono); font-size:13px; color:var(--meta-dim); margin-bottom:30px; display:inline-block;}
.backlink:hover{color:var(--phos);}

/* tables (benchmark + inline) */
.read .body table,table.bench{width:100%; border-collapse:collapse; margin:24px 0; font-size:14px;}
.read .body table th,.read .body table td{border:1px solid var(--hair); padding:9px 12px; text-align:left;}
.read .body table th{font-family:var(--mono); font-size:12px; color:var(--muted2); background:var(--sunken);}

/* benchmark page */
.bench-head{padding:48px 36px 8px;}
.bench-wrap{padding:8px 36px 8px; overflow-x:auto;}
table.bench{font-family:var(--read);}
table.bench th,table.bench td{padding:11px 14px; border-bottom:1px solid var(--hair); white-space:nowrap;}
table.bench thead th{font-family:var(--mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--muted2); text-align:left; cursor:pointer; user-select:none;
  background:var(--bg); border-bottom:1px solid var(--control);}
table.bench thead th:hover{color:var(--primary);}
table.bench th.num,table.bench td.num{text-align:right;}
table.bench th .ar{color:var(--phos); font-size:10px; margin-left:4px; opacity:0;}
table.bench th.sorted .ar{opacity:1;}
table.bench tbody tr:hover{background:#0E1413;}
table.bench td .model{font-family:var(--display); font-weight:600; color:var(--heading); font-size:15px;}
table.bench td .vend{font-family:var(--mono); font-size:11px; color:var(--meta);}
.pill{font-family:var(--mono); font-size:11px; border:1px solid var(--control); border-radius:3px; padding:2px 7px;}
.pill.open{color:var(--phos); border-color:var(--phos-dim);}
.pill.closed{color:var(--muted2);}
.bar{display:inline-block; height:6px; border-radius:3px; background:var(--phos); vertical-align:middle; margin-right:8px;}
.bench-note{padding:14px 36px 0; color:var(--meta); font-size:13px; line-height:1.6; max-width:880px;}
.bench-note a{color:var(--phos-dim);}
.legend{display:flex; gap:18px; flex-wrap:wrap; padding:18px 36px 0; font-family:var(--mono);
  font-size:12px; color:var(--meta);}

/* footer */
.footer{border-top:1px solid var(--hair); padding:28px 36px 40px; font-family:var(--mono);
  font-size:12px; color:var(--meta); margin-top:40px;}
.foot-row{color:var(--phos-dim);}
.foot-meta{margin-top:10px; color:var(--meta-dim);}
.foot-meta a{color:var(--muted2);}
.foot-meta a:hover{color:var(--phos);}
.muted{color:var(--meta-dim);}

@media (max-width:1023px){
  .grid{grid-template-columns:1fr;}
  .card:nth-child(odd){border-right:0;}
  .hero h1{font-size:36px;}
  .read h1{font-size:34px;}
  .hero,.read,.bench-head,.bench-wrap,.legend,.bench-note,.seclabel{padding-left:24px; padding-right:24px;}
  .topbar{padding:16px 24px;}
}
@media (max-width:640px){
  .topbar{flex-direction:column; gap:14px; align-items:flex-start;}
  .nav{gap:18px; flex-wrap:wrap;}
  .hero{padding:32px 20px;} .read{padding:36px 20px 56px;}
  .hero h1{font-size:28px;} .read h1{font-size:28px;}
  .read .body p,.read .body ul,.read .body ol{font-size:16px;}
}