/* Generated by tools/blog.py — edit the generator, not this file.
   One stylesheet for every article: the marketing pages each carry their own
   inline <style> because they are one-offs, but a blog is many pages of the
   same thing and should be cached once. */
:root{
  --bg:#08090B; --panel:#101216; --raised:#15181D;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.16);
  --text:#EFF1F4; --dim:#A2A8B4; --faint:#767E8C;
  --accent:#3478F6; --accent-deep:#1F5FD0; --accent-lift:#7FB0FF;
  --sans:"Inter Tight",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif","Iowan Old Style","Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0}
body{ background:var(--bg); color:var(--text); font-family:var(--sans);
  line-height:1.7; -webkit-font-smoothing:antialiased }
.wrap{ max-width:720px; margin:0 auto; padding:0 22px 72px }
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }

header{ padding:26px 0 0; display:flex; justify-content:space-between;
  align-items:center; gap:16px; font-size:14px; flex-wrap:wrap }
header a{ color:var(--dim) }
header a:hover{ color:var(--text); text-decoration:none }

.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin-top:54px }
h1{ font-size:clamp(32px,5.2vw,46px); line-height:1.08; font-weight:600;
  letter-spacing:-.03em; margin:12px 0 10px; color:var(--accent) }
.meta{ font-family:var(--mono); font-size:12px; color:var(--faint); margin-bottom:30px }
.lede{ font-size:18px; color:var(--dim); margin-bottom:34px }

article h2{ font-size:25px; font-weight:600; letter-spacing:-.02em;
  margin:44px 0 12px; color:var(--text) }
article h3{ font-size:19px; font-weight:600; margin:32px 0 10px; color:var(--text) }
article h4{ font-size:16px; font-weight:600; margin:26px 0 8px; color:var(--dim) }
article p{ margin:0 0 18px; color:var(--dim); font-size:16.5px }
article strong{ color:var(--text); font-weight:600 }
article ul, article ol{ margin:0 0 20px; padding-left:22px; color:var(--dim) }
article li{ margin:0 0 8px; font-size:16.5px }
article img{ max-width:100%; height:auto; border-radius:12px; margin:8px 0 22px }
article blockquote{ margin:0 0 22px; padding:2px 0 2px 18px;
  border-left:2px solid var(--accent); }
article blockquote p{ color:var(--text); font-family:var(--serif);
  font-size:20px; font-style:italic; line-height:1.5; margin:0 }
article hr{ border:0; border-top:1px solid var(--line); margin:40px 0 }
article code{ font-family:var(--mono); font-size:13.5px; background:var(--raised);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--accent-lift) }
article pre{ background:#0B0D11; border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; overflow-x:auto; margin:0 0 22px }
article pre code{ background:none; border:0; padding:0; color:#D8DEE9;
  font-size:13px; line-height:1.65 }

.posts{ list-style:none; padding:0; margin:0 }
.posts li{ border-top:1px solid var(--line) }
.posts a{ display:block; padding:22px 0; color:inherit }
.posts a:hover{ text-decoration:none }
.posts a:hover .t{ color:var(--accent) }
.posts .t{ display:block; font-size:19px; font-weight:600; letter-spacing:-.015em;
  margin-bottom:5px; transition:color .15s }
.posts .d{ display:block; color:var(--dim); font-size:15px; margin-bottom:7px }
.posts .m{ display:block; font-family:var(--mono); font-size:11.5px; color:var(--faint) }
.posts .empty{ padding:22px 0; color:var(--faint) }

.more{ margin-top:46px; font-size:14px }
footer{ margin-top:64px; padding-top:22px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--faint) }
footer a{ color:var(--faint) }
@media(max-width:560px){ .wrap{ padding:0 16px 56px } }