:root{
  --bg:#0a0c10; --panel:#11151b; --line:#1f2630; --text:#d7dee8; --dim:#8593a5;
  --accent:#2ee57b; --blue:#4c8dff;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;font:16px/1.65 var(--sans);color:var(--text);background:var(--bg);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;background-position:-1px -1px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(46,229,123,.10),transparent 55%),linear-gradient(transparent 40%,var(--bg) 100%)}
.wrap{position:relative;max-width:46rem;margin:0 auto;padding:0 1.25rem}
header.top{position:relative;border-bottom:1px solid var(--line);background:rgba(10,12,16,.85);backdrop-filter:blur(6px)}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;height:3.25rem;font:600 .9rem var(--mono)}
header.top a{color:var(--text);text-decoration:none}
header.top .brand b{color:var(--accent)}
header.top nav a{color:var(--dim);margin-left:1.25rem;font-weight:400}
header.top nav a:hover{color:var(--accent)}
main{position:relative;padding:3rem 0 4rem}
.crumb{font:.8rem var(--mono);color:var(--dim);margin:0 0 1rem}
.crumb a{color:var(--dim);text-decoration:none}.crumb a:hover{color:var(--accent)}
.crumb .cur{color:var(--accent)}
h1{font:700 2rem/1.15 var(--mono);letter-spacing:-.02em;margin:0 0 .5rem;color:#fff}
h1 .cursor{display:inline-block;width:.55em;height:1em;background:var(--accent);vertical-align:-.12em;margin-left:.15em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.meta{display:inline-block;font:.75rem var(--mono);color:var(--dim);border:1px solid var(--line);background:var(--panel);padding:.15rem .6rem;border-radius:999px;margin:.5rem 0 1.5rem}
.lead{font-size:1.1rem;color:var(--dim);max-width:34rem}
h2{font:600 1.15rem var(--mono);color:#fff;margin:2.5rem 0 .5rem;padding-top:1.25rem;border-top:1px solid var(--line)}
h2::before{content:"## ";color:var(--accent)}
h3{font:600 .95rem var(--mono);color:var(--accent);margin:1.6rem 0 .25rem}
p,ul{margin:.6rem 0}li{margin:.3rem 0}
li::marker{color:var(--accent)}
strong{color:#fff;font-weight:600}
a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(76,141,255,.4);text-underline-offset:3px}
a:hover{color:#8db6ff}
em{color:var(--text)}
.card{display:flex;gap:1.25rem;align-items:center;margin:2rem 0;padding:1.25rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--text);transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent);transform:translateY(-1px);color:var(--text)}
.card img{width:72px;height:72px;border-radius:16px;flex:none}
.card h2{border:0;padding:0;margin:0 0 .15rem;font-size:1.2rem}
.card h2::before{content:"> "}
.card p{margin:0;color:var(--dim);font-size:.95rem}
.card .tag{font:.7rem var(--mono);color:var(--accent);border:1px solid rgba(46,229,123,.4);padding:.05rem .5rem;border-radius:999px;margin-left:.5rem;vertical-align:middle}
.links{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 0;padding:0;list-style:none}
.links a{display:inline-block;font:.85rem var(--mono);padding:.5rem .9rem;border:1px solid var(--line);background:var(--panel);border-radius:8px;color:var(--text);text-decoration:none}
.links a:hover{border-color:var(--accent);color:var(--accent)}
.links a::before{content:"→ ";color:var(--accent)}
footer{position:relative;border-top:1px solid var(--line);background:rgba(10,12,16,.85)}
footer .wrap{padding:1.5rem 1.25rem 2.5rem;font:.8rem var(--mono);color:var(--dim)}
footer a{color:var(--dim);text-decoration:none}footer a:hover{color:var(--accent)}
@media (max-width:520px){h1{font-size:1.6rem}.card{flex-direction:column;align-items:flex-start}header.top nav{display:none}}
@media (prefers-reduced-motion:reduce){h1 .cursor{animation:none}}