:root{
  --bg:#000000;      /* true black background */
  --link:#13B5B7;    /* cyan  — signals "you can interact with this" */
  --focus:#FF4D4D;   /* red   — focus: hover / keyboard-focus / active */
  --head:#FCFCFC;    /* near-white — headings */
  --text:#C7C7C7;    /* light grey — body text */
  --muted:#7C7C7C;   /* mid grey — secondary text / meta */
  --border:#262626;  /* dark grey — borders / rules */
  --code-bg:#111111; /* near-black — code surfaces */
}
*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* interactive = cyan at rest, red on focus (hover / keyboard / active) */
a{color:var(--link);text-decoration:none}
a:hover,a:active{color:var(--focus);text-decoration:underline}
a:focus-visible,:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}

h1,h2,h3{color:var(--head);line-height:1.25;letter-spacing:-0.02em;font-weight:700}

.site-header{
  max-width:720px;margin:0 auto;
  padding:2.5rem 1.5rem 1.6rem;
  display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}
.site-title{color:var(--link);font-weight:700;font-size:1.25rem;letter-spacing:-0.03em}
.site-title:hover{color:var(--focus);text-decoration:none}
.site-tagline{color:var(--muted);font-size:.82rem}

main{max-width:720px;margin:0 auto;padding:0 1.5rem 4rem}

/* ---- listing ---- */
.post-list{list-style:none;margin:2.2rem 0 0;padding:0}
.post-item{padding:1.05rem 0;border-bottom:1px solid var(--border)}
.post-item:first-child{padding-top:0}
.post-link{color:var(--link);font-size:1.05rem;font-weight:500}
.post-link:hover{color:var(--focus);text-decoration:none}
.post-meta{
  margin-top:.4rem;color:var(--muted);font-size:.78rem;
  display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;
}
.sep{color:var(--muted);opacity:.7}
.tag{
  color:var(--muted);border:1px solid var(--border);border-radius:2px;
  padding:.05rem .45rem;font-size:.7rem;text-transform:lowercase;letter-spacing:.02em;
}

/* ---- post ---- */
.post-title{margin:2.4rem 0 .55rem;font-size:1.75rem}
.post-meta-lead{margin-bottom:2.4rem;padding-bottom:1.1rem;border-bottom:1px solid var(--border)}
.post-body{font-size:.98rem}
.post-body h2{margin:2.2rem 0 .8rem;font-size:1.3rem}
.post-body h3{margin:1.8rem 0 .55rem;font-size:1.08rem}
.post-body p{margin:1rem 0}
.post-body a{text-decoration:underline}
.post-body strong{color:var(--head)}
.post-body ul,.post-body ol{padding-left:1.25rem}
.post-body li{margin:.32rem 0}
.post-body code{
  background:var(--code-bg);color:var(--text);
  padding:.1rem .35rem;border-radius:2px;font-size:.88em;
}
.post-body pre{
  background:var(--code-bg);border:1px solid var(--border);border-radius:2px;
  padding:1rem;overflow-x:auto;font-size:.85rem;line-height:1.55;
}
.post-body pre code{background:none;padding:0;font-size:1em}
.post-body blockquote{
  margin:1.3rem 0;padding:.2rem 0 .2rem 1rem;
  border-left:2px solid var(--border);color:var(--muted);
}
.post-body blockquote p{margin:.4rem 0}

/* ---- math (KaTeX) ---- */
.math-display{margin:1.5rem 0}
.katex-display{overflow-x:auto;overflow-y:hidden;padding:.35rem 0}
.katex{font-size:1em}

/* ---- prev/next ---- */
.post-nav{
  margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;
}
.nav-next{margin-left:auto;text-align:right}

.site-footer{
  max-width:720px;margin:0 auto;padding:2rem 1.5rem;
  color:var(--muted);font-size:.76rem;border-top:1px solid var(--border);
}