:root {
  --bg: #0b0b0c;
  --surface: #121214;
  --line: #222226;
  --ink: #efede8;
  --dim: #85858d;
  --faint: #55555c;
  --amber: #e2a144;
  --green: #34d399;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Newsreader", Georgia, serif;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(226, 161, 68, .25); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }

.col { max-width: 700px; margin: 0 auto; padding: 0 24px; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 40px 0 0;
  font: 400 12px/1 var(--mono);
  letter-spacing: .04em;
  color: var(--dim);
}
.top a { text-decoration: none; transition: color .25s var(--ease); }
.top a:hover { color: var(--ink); }
.top .arr { color: var(--faint); margin-right: 6px; }

header.post { padding-top: 64px; }
.eyebrow {
  display: flex; align-items: baseline; gap: 12px;
  font: 400 12px/1 var(--mono);
  color: var(--faint);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); align-self: center; }
.eyebrow b { color: var(--amber); font-weight: 500; }
h1 {
  margin-top: 22px;
  font: 600 clamp(28px, 5.4vw, 40px)/1.2 var(--sans);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 em { font: italic 500 1.05em/1 var(--serif); color: var(--amber); letter-spacing: 0; }
.lede { margin-top: 20px; color: var(--dim); font-size: 19px; line-height: 1.6; text-wrap: pretty; }
.lede strong { color: var(--ink); font-weight: 500; }
.meta {
  margin-top: 22px;
  font: 400 12px/1.7 var(--mono);
  color: var(--faint);
  letter-spacing: .03em;
}

article { padding-bottom: 24px; }
article h2 {
  margin-top: 64px;
  font: 500 24px/1.3 var(--sans);
  letter-spacing: -0.02em;
}
article h3 { margin-top: 36px; font: 500 18px/1.4 var(--sans); }
article p, article ul, article ol { margin-top: 16px; color: #c9c7c2; text-wrap: pretty; }
article p strong, article li strong { color: var(--ink); font-weight: 500; }
article ul, article ol { padding-left: 22px; }
article li { margin-top: 8px; }
article li::marker { color: var(--faint); }
article a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--faint); transition: border-color .25s var(--ease); }
article a:hover { border-color: var(--amber); }
article code {
  font: 400 .86em/1 var(--mono);
  color: var(--amber);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 5px;
}
blockquote {
  margin-top: 20px;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--amber);
  color: var(--ink);
  font: italic 400 19px/1.55 var(--serif);
}

.stats { margin-top: 28px; list-style: none; padding: 0; }
.stats li {
  display: flex; gap: 14px;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--dim);
}
.stats li:last-child { border-bottom: 1px solid var(--line); }
.stats .k { flex: none; width: 130px; font: 400 12px/1.9 var(--mono); color: var(--faint); letter-spacing: .04em; text-transform: uppercase; }
.stats .v strong { color: var(--ink); font-weight: 500; }

.scroll { margin-top: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
th { font: 400 11.5px/1.5 var(--mono); color: var(--faint); letter-spacing: .05em; text-transform: uppercase; border-bottom-color: #2e2e33; }
td { color: #c9c7c2; }
td.n { font-family: var(--mono); font-size: 13.5px; color: var(--ink); white-space: nowrap; }

figure { margin-top: 28px; }
figure .frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow-x: auto;
}
figure svg { display: block; width: 100%; min-width: 560px; height: auto; }
figcaption { margin-top: 10px; font: 400 12px/1.6 var(--mono); color: var(--faint); letter-spacing: .02em; }

.fig text { font-family: var(--sans); }
.fig .t { fill: var(--ink); }
.fig .q { fill: var(--dim); }
.fig .f { fill: var(--faint); }
.fig .a { fill: var(--amber); }
.fig .grid { stroke: var(--line); }
.fig .axis { stroke: #3a3a40; }
.fig .edge { stroke: #4a4a52; fill: none; }
.fig .box { stroke: #3a3a40; fill: none; }
.fig .hot { stroke: var(--amber); fill: rgba(226, 161, 68, .1); }
.fig .muted { stroke: #6a6a72; fill: none; }
.fig .accent { stroke: var(--amber); fill: none; }
.fig .pm { fill: #6a6a72; }
.fig .pa { fill: var(--amber); }
.fig .ring { fill: none; stroke: var(--ink); }

.next { margin-top: 72px; list-style: none; padding: 0; }
.next li { margin: 0; border-top: 1px solid var(--line); }
.next li:last-child { border-bottom: 1px solid var(--line); }
.next a { display: block; padding: 16px 0; text-decoration: none; border: 0; }
.next .name { display: flex; align-items: baseline; gap: 10px; font: 500 15px/1.4 var(--sans); color: var(--ink); }
.next .name .arr { margin-left: auto; color: var(--faint); font: 400 13px/1 var(--mono); transition: transform .35s var(--ease), color .35s var(--ease); }
.next a:hover .arr { transform: translateX(4px); color: var(--amber); }
.next .desc { display: block; margin-top: 4px; color: var(--dim); font-size: 14px; }

footer {
  margin-top: 96px;
  padding: 26px 0 48px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px;
  font: 400 12px/1.6 var(--mono);
  color: var(--faint);
  letter-spacing: .03em;
}
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .lede { font-size: 17px; }
  .stats li { flex-direction: column; gap: 2px; }
  .stats .k { width: auto; }
}