:root{
  --ink:#0b0d0c;--ink2:#131614;--line:#262b27;--paper:#eceee6;--mute:#9aa197;
  --acid:#c6ff3d;--hot:#ff6b35;--sky:#7cc7ff;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --r:14px;--w:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font:17px/1.6 var(--sans);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;background-attachment:fixed;background-position:-1px -1px}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 20% 0%,transparent 0,var(--ink) 70%);pointer-events:none;z-index:-1}
a{color:var(--acid);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--acid);color:var(--ink)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono)}

/* nav */
.nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(10px);background:rgba(11,13,12,.78);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;gap:16px}
.brand{font:600 15px var(--mono);color:var(--paper)}
.brand b{color:var(--acid)}
.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;font:13px var(--mono)}
.nav ul a{color:var(--mute)}
.nav ul a:hover{color:var(--paper);text-decoration:none}

/* hero */
.hero{padding:72px 0 56px}
.kicker{font:13px var(--mono);color:var(--mute);display:flex;align-items:center;gap:10px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 4px rgba(198,255,61,.15);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(198,255,61,0)}}
h1{font-size:clamp(46px,10vw,112px);line-height:.92;letter-spacing:-.045em;margin:22px 0 22px;font-weight:700}
h1 .hl{color:var(--ink);background:var(--acid);padding:0 .12em;border-radius:6px;display:inline-block;transform:rotate(-1.5deg)}
.lede{font-size:clamp(19px,2.4vw,24px);max-width:720px;color:#d6d9d0;margin:0}
.term{margin-top:30px;background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;font:14px/1.75 var(--mono);max-width:720px;overflow-x:auto}
.term .p{color:var(--acid)} .term .c{color:var(--mute)} .term .o{color:var(--sky)}
.caret{display:inline-block;width:8px;height:16px;background:var(--acid);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding:0;list-style:none}
.tags li{font:12.5px var(--mono);border:1px solid var(--line);background:var(--ink2);padding:5px 10px;border-radius:99px;color:#cfd3c8}

/* sections */
section{padding:56px 0;border-top:1px dashed var(--line)}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
h2{font-size:clamp(28px,4.5vw,40px);letter-spacing:-.03em;margin:0;line-height:1.1}
h2 .n{font:14px var(--mono);color:var(--acid);vertical-align:middle;margin-right:10px;letter-spacing:0}
.sh p{margin:0;color:var(--mute);font:13px var(--mono)}

/* now */
.now{display:grid;gap:10px;list-style:none;padding:0;margin:0}
.now li{display:flex;gap:14px;align-items:flex-start;background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.now li::before{content:"→";font-family:var(--mono);color:var(--acid)}

/* projects */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.card{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--acid)}
.card .top{display:flex;justify-content:space-between;font:12px var(--mono);color:var(--mute);gap:8px}
.status{color:var(--acid);display:inline-flex;align-items:center;gap:6px}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.draft{color:var(--hot)}
.card h3{margin:2px 0 0;font-size:22px;letter-spacing:-.02em}
.card p{margin:0;color:#c9cdc2;font-size:15.5px}
.stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.stack span{font:11.5px var(--mono);color:var(--sky);background:rgba(124,199,255,.08);padding:3px 8px;border-radius:6px}

/* writing */
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.posts li a{display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:baseline;padding:18px 4px;border-bottom:1px solid var(--line);color:var(--paper)}
.posts li a:hover{text-decoration:none;background:var(--ink2)}
.posts time{font:13px var(--mono);color:var(--mute)}
.posts strong{font-size:20px;letter-spacing:-.01em;display:block}
.posts em{font-style:normal;color:var(--mute);font-size:15px}
.posts .arr{font-family:var(--mono);color:var(--acid)}

/* feed */
.feed{columns:3 300px;column-gap:14px}
.feed>*{break-inside:avoid;margin:0 0 14px;display:block}
.feed figure{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 14px}
.feed img{width:100%;display:block}
.feed figcaption{padding:10px 14px;font:13px var(--mono);color:var(--mute)}
.yt{position:relative;aspect-ratio:16/9}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.feed blockquote{margin:0 0 14px!important;min-width:0!important;max-width:100%!important}
.lk{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);padding:16px}

/* about */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
.about p{margin:0 0 14px;color:#d6d9d0}
.tl{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.tl li{position:relative;padding:0 0 18px 20px}
.tl li::before{content:"";position:absolute;left:-6px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--ink);border:2px solid var(--acid)}
.tl b{display:block;font:12.5px var(--mono);color:var(--acid);font-weight:400}

/* contact + footer */
.cta{background:var(--acid);color:var(--ink);border-radius:20px;padding:34px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta h2{color:var(--ink)}
.cta p{margin:6px 0 0;font-size:17px}
.btn{display:inline-block;background:var(--ink);color:var(--paper);font:600 14px var(--mono);padding:13px 20px;border-radius:10px}
.btn:hover{text-decoration:none;background:#000}
footer{padding:36px 0 50px;color:var(--mute);font:12.5px var(--mono)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* article */
.article{max-width:720px;margin:0 auto;padding:56px 20px 30px}
.article .meta{font:13px var(--mono);color:var(--mute);margin-bottom:10px}
.article h1{font-size:clamp(38px,7vw,64px);margin:6px 0 18px}
.article .sum{font-size:21px;color:#d6d9d0;margin:0 0 30px;padding-bottom:26px;border-bottom:1px dashed var(--line)}
.prose{font-size:18px;line-height:1.75}
.prose h2{font-size:28px;margin:40px 0 10px}
.prose h3{font-size:22px;margin:30px 0 8px}
.prose img{max-width:100%;border-radius:var(--r);border:1px solid var(--line)}
.prose code{font:15px var(--mono);background:var(--ink2);border:1px solid var(--line);padding:1px 6px;border-radius:5px}
.prose pre{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);padding:16px;overflow-x:auto}
.prose pre code{border:0;padding:0}
.prose blockquote{margin:24px 0;padding:6px 20px;border-left:3px solid var(--acid);color:#d6d9d0}
.prose li{margin:6px 0}
.back{font:13px var(--mono)}

@media (max-width:760px){
  body{font-size:16px}
  .nav ul{gap:12px}
  .nav ul li.hide-s{display:none}
  .hero{padding:48px 0 40px}
  .about{grid-template-columns:1fr}
  .posts li a{grid-template-columns:1fr;gap:4px}
  .posts .arr{display:none}
  .cta{padding:26px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}