:root{
  --void:#0b0e14;--panel:#141922;--rule:#262d3a;
  --ink:#c9d1d9;--quiet:#8b949e;--faint:#4b5563;
  --link:#b9a7ff;--star:#f2cc60;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2.5rem;--space-5:4rem;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--void)}
body{max-width:68ch;margin:0 auto;padding:var(--space-5) var(--space-3) calc(var(--space-5)*2);color:var(--ink);font:15px/1.85 var(--mono)}
::selection{background:var(--link);color:var(--void)}

/* starfield: two tiled dot layers, slow twinkle */
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{
  background-image:
    radial-gradient(1px 1px at 23px 41px,#fff9,transparent),
    radial-gradient(1px 1px at 137px 89px,#fff6,transparent),
    radial-gradient(1px 1px at 211px 173px,#fff8,transparent),
    radial-gradient(1px 1px at 71px 229px,#fff5,transparent),
    radial-gradient(1.5px 1.5px at 183px 17px,#b9a7ffaa,transparent);
  background-size:260px 260px;animation:twinkle 7s ease-in-out infinite alternate}
body::after{
  background-image:
    radial-gradient(1px 1px at 61px 113px,#fff7,transparent),
    radial-gradient(1.5px 1.5px at 307px 277px,#f2cc6099,transparent),
    radial-gradient(1px 1px at 389px 59px,#fff5,transparent),
    radial-gradient(1px 1px at 157px 331px,#fff6,transparent);
  background-size:420px 420px;animation:twinkle 11s ease-in-out -4s infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}

a{color:var(--link);text-decoration:none;border-bottom:1px dashed var(--faint)}
a:hover{color:var(--star);border-bottom-color:var(--star)}
a:focus-visible{outline:1px solid var(--star);outline-offset:3px}
p{margin:0 0 var(--space-3)}
h1,h2,h3{font-weight:600;line-height:1.3;letter-spacing:-.01em;color:#e6edf3}
h1{margin:0 0 var(--space-5);font-size:1.45rem;line-height:1.4}
h2{margin:var(--space-5) 0 var(--space-2);font-size:1.05rem}
h2:before{content:"# ";color:var(--faint)}
ul,ol{padding-left:var(--space-3)}
li{margin:0 0 var(--space-2)}
li::marker{color:var(--faint)}

/* home */
.sky{margin:0 0 var(--space-5);padding:var(--space-4) var(--space-3);background:var(--panel);border:1px solid var(--rule);border-radius:8px;overflow:hidden;font-size:min(8.6px,1.35vw);line-height:1.25;color:var(--ink)}
.star{color:var(--star);text-shadow:0 0 6px var(--star);animation:twinkle 2.4s ease-in-out infinite alternate}
.home h1{font-size:1.6rem;margin-bottom:var(--space-2)}
.home h2{margin-top:var(--space-5)}
.home h1:before{content:"~/";color:var(--faint)}
.links{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin-bottom:var(--space-5)}
.home ol{list-style:none;margin:var(--space-1) 0 var(--space-3);padding:0}
.home li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-2);align-items:baseline;margin:var(--space-3) 0}
.home li:before{content:"✦";color:var(--faint);font-size:.7em}
.home li a{justify-self:start}
.home li:hover:before{color:var(--star)}
.date{color:var(--quiet);white-space:nowrap;font-size:.85em;font-variant-numeric:tabular-nums}

/* articles */
code,pre{font-family:var(--mono)}
code{font-size:.92em;color:#e6edf3;background:var(--panel);padding:.1em .35em;border-radius:4px}
pre{overflow:auto;padding:var(--space-2);background:var(--panel);border:1px solid var(--rule);border-radius:6px}
pre code{background:none;padding:0}
table{border-collapse:collapse;margin:var(--space-3) 0 var(--space-4);width:100%;font-size:.92em}
th,td{text-align:left;padding:.6em .8em;border-bottom:1px solid var(--rule)}
th{color:var(--quiet);font-weight:400}
td{font-variant-numeric:tabular-nums}
blockquote{margin:var(--space-3) 0;padding-left:var(--space-2);border-left:2px solid var(--link);color:var(--quiet)}
hr{border:0;border-top:1px dashed var(--rule);margin:var(--space-4) 0}
.back{display:inline-block;margin-top:var(--space-5);color:var(--quiet);border:0}
.back:before{content:"=^..^=  ";color:var(--faint)}

/* charts */
figure{margin:var(--space-4) 0}
.chart svg{display:block;width:100%;height:auto;background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:var(--space-2) var(--space-1) var(--space-1)}
.chart .g{stroke:var(--rule);stroke-width:1}
.chart .ax{fill:var(--quiet);font:11px var(--mono)}
.chart .dl{fill:var(--ink);font:12px var(--mono)}
.chart circle:hover{r:6}
figcaption{margin-top:var(--space-1);color:var(--quiet);font-size:.85em}
details{margin:0 0 var(--space-3)}
.refs{font-size:.88em;color:var(--quiet)}
.refs li{margin-bottom:var(--space-1)}
summary{cursor:pointer;color:var(--quiet);font-size:.85em}
summary:hover{color:var(--star)}

@media(max-width:640px){
  :root{--space-4:2rem;--space-5:3rem}
  body{padding:var(--space-5) 1.25rem var(--space-5);font-size:14px;line-height:1.8}
  .sky{margin-bottom:var(--space-4);padding:var(--space-3) var(--space-1);font-size:1.4vw;border-radius:6px}
  .links{margin-bottom:var(--space-4)}
  h1{margin-bottom:var(--space-4);font-size:1.25rem}
  .home li{grid-template-columns:auto minmax(0,1fr);row-gap:.15rem;margin:var(--space-3) 0}
  .date{grid-column:2}
  th,td{padding:.5em .5em}
  pre{font-size:12px}
  table{display:block;overflow-x:auto;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  body::before,body::after,.star{animation:none}
}