:root{
  --bg:#0B0F14; --surface:#11161D; --surface2:#161B22; --fg:#E6EDF3;
  --dim:#7C8896; --accent:#5EEAD4; --accent2:#7DD3FC; --warn:#FCD34D;
  --danger:#F87171; --line:#1F2933;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif: ui-serif, Georgia, 'Iowan Old Style', 'Charter', serif;
  --maxw:760px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg); font-family:var(--mono);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(94,234,212,.35)}
a:hover{border-bottom-color:var(--accent)}
::selection{background:rgba(94,234,212,.35)}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}

nav.bar{
  position:sticky; top:0; z-index:50;
  background:rgba(11,15,20,.86); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav.bar .wrap{display:flex; align-items:center; justify-content:space-between;
  height:58px; font-size:13px}
nav.bar a{border-bottom:none; color:inherit}
.logo{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--fg)}
.logo .eye{color:var(--accent); font-size:15px}
.navlinks{display:flex; gap:22px; color:var(--dim); font-size:12.5px}
.navlinks a:hover{color:var(--fg)}
.navright{display:flex; align-items:center; gap:12px}
.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  border:1px solid var(--dim); color:var(--dim); font-size:10px;
  letter-spacing:.14em; border-radius:2px; white-space:nowrap}
.pill.accent{border-color:var(--accent); color:var(--accent)}

article.post, .blog-index{max-width:var(--maxw); margin:0 auto; padding:56px 28px 96px}

.meta{font-size:11px; letter-spacing:.18em; color:var(--dim); text-transform:uppercase; margin-bottom:18px}
.meta .dot{display:inline-block; margin:0 8px; color:var(--line)}
.meta .tag{color:var(--accent)}

article.post h1{
  font-family:var(--mono); font-weight:600; font-size:clamp(28px,4vw,42px);
  line-height:1.15; letter-spacing:-.015em; margin:0 0 28px;
}
article.post h2{
  font-weight:600; font-size:22px; letter-spacing:-.005em;
  margin:18px 0 14px; line-height:1.25;
}
article.post figure.illus{
  margin:56px 0 8px; padding:0;
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);
  border:1px solid var(--line); border-radius:6px;
  height:140px; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
article.post figure.illus svg{display:block; width:100%; height:100%}
article.post figure.illus + h2{margin-top:18px}
article.post h3{font-weight:600; font-size:16px; margin:30px 0 10px; color:var(--fg)}
article.post p{margin:0 0 18px}
article.post p.lede{font-size:17px; color:var(--fg); margin-bottom:26px; line-height:1.55}
article.post p.aside{font-size:13px; color:var(--dim); border-left:2px solid var(--line); padding:2px 0 2px 14px; margin:24px 0}
article.post ul, article.post ol{margin:0 0 22px; padding-left:22px}
article.post li{margin:6px 0}
article.post pre{
  background:var(--surface); border:1px solid var(--line); border-radius:4px;
  padding:14px 16px; overflow-x:auto; font-size:13px; line-height:1.55;
  margin:18px 0 22px;
}
article.post code{font-family:var(--mono); color:var(--accent2)}
article.post pre code{color:var(--fg)}
article.post blockquote{
  border-left:2px solid var(--accent); margin:24px 0; padding:4px 0 4px 16px;
  color:var(--fg); font-style:italic;
}
article.post hr{border:none; border-top:1px dashed var(--line); margin:38px 0}

.byline{display:flex; gap:14px; align-items:center; padding:18px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:32px 0 40px; font-size:12.5px; color:var(--dim)}
.byline .who{color:var(--fg); font-weight:600}

.further{margin-top:48px; padding:22px; border:1px dashed var(--line); border-radius:4px}
.further h3{margin:0 0 10px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.further ul{margin:0; padding-left:18px}
.further li{margin:4px 0}

.cta-bottom{
  margin-top:64px; padding:28px; border:1px solid var(--line); background:var(--surface);
  border-radius:4px;
}
.cta-bottom h3{margin:0 0 8px; font-size:18px}
.cta-bottom p{margin:0 0 16px; color:var(--dim); font-size:14px}
.btn{
  display:inline-block; border:1px solid var(--accent); background:var(--accent);
  color:var(--bg); font-size:13px; font-weight:600; padding:10px 18px;
  border-radius:2px; border-bottom-color:var(--accent);
}
.btn:hover{background:#7df0dd}

/* index */
.blog-index h1{font-size:32px; margin:0 0 8px; font-weight:600; letter-spacing:-.01em}
.blog-index .sub{color:var(--dim); margin-bottom:48px; font-size:14px}
.cluster{margin-bottom:48px}
.cluster .label{font-size:11px; letter-spacing:.18em; color:var(--accent); text-transform:uppercase; margin-bottom:14px}
.post-card{
  display:block; padding:18px 0; border-top:1px solid var(--line);
  color:var(--fg); border-bottom:none;
}
.post-card:last-child{border-bottom:1px solid var(--line)}
.post-card .ti{font-size:17px; font-weight:600; margin-bottom:6px}
.post-card .ex{color:var(--dim); font-size:13.5px; line-height:1.55}
.post-card:hover .ti{color:var(--accent)}
.post-card{border-bottom:none}