:root{
  --bg:#090c10;
  --surface:#12161d;
  --surface-2:#171d26;
  --border:#232a35;
  --border-soft:#1b212b;
  --text:#e8edf2;
  --text-dim:#8b95a3;
  --text-faint:#4d5765;
  --accent:#29e0ff;
  --accent-dim:#0f6f80;

  --c-red:#ff4d6a;
  --c-orange:#ff9f43;
  --c-yellow:#ffd43b;
  --c-green:#38d9a9;
  --c-blue:#4dabf7;
  --c-purple:#b980f2;
  --c-gray:#9aa5b1;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(41,224,255,0.06), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(185,128,242,0.05), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.mono{font-family:'JetBrains Mono', monospace;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:#04141a;}

/* ---------- top status bar ---------- */
.statusbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px;
  background:rgba(9,12,16,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  color:var(--text-dim);
}
.statusbar .prompt{color:var(--accent);}
.statusbar .prompt .path{color:var(--text-dim);}
.statusbar nav{display:flex; gap:26px;}
.statusbar nav a{color:var(--text-dim); transition:color .15s ease;}
.statusbar nav a:hover{color:var(--accent);}
.statusbar nav a.current{color:var(--text);}
.liveclock{color:var(--text-faint); display:flex; align-items:center; gap:8px;}
.dot-live{width:6px; height:6px; border-radius:50%; background:var(--c-green); box-shadow:0 0 6px var(--c-green); animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
@media (max-width:720px){ .statusbar nav{display:none;} }

/* ---------- hero ---------- */
.hero{ max-width:900px; margin:0 auto; padding:64px 32px 48px; }
.hero .eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--accent);
  margin-bottom:18px; display:flex; align-items:center; gap:8px;
}
.hero .eyebrow::before{content:"$"; color:var(--text-faint);}
.hero h1{ font-size:clamp(34px, 5.4vw, 54px); line-height:1.08; font-weight:800; letter-spacing:-0.02em; max-width:14ch; }
.hero h1 .grad{
  background:linear-gradient(100deg, var(--accent), var(--c-purple) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lede{ margin-top:22px; max-width:56ch; font-size:16.5px; line-height:1.7; color:var(--text-dim); }
.hero .stats{ display:flex; gap:28px; flex-wrap:wrap; margin-top:36px; font-family:'JetBrains Mono', monospace; }
.hero .stats .stat{ border-left:2px solid var(--border); padding-left:12px; }
.hero .stats .stat b{ display:block; font-size:20px; color:var(--text); font-weight:700; }
.hero .stats .stat span{ font-size:11.5px; color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase; }

/* ---------- filters ---------- */
.filters{
  max-width:900px; margin:0 auto; padding:0 32px 28px;
  display:flex; flex-wrap:wrap; gap:10px;
  border-bottom:1px solid var(--border-soft); padding-bottom:32px;
}
.chip{
  font-family:'JetBrains Mono', monospace; font-size:12px; padding:7px 14px; border-radius:100px;
  border:1px solid var(--border); color:var(--text-dim); background:var(--surface);
  cursor:pointer; display:flex; align-items:center; gap:7px;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.chip .sw{width:7px; height:7px; border-radius:50%; flex:none;}
.chip:hover{color:var(--text); border-color:var(--text-faint);}
.chip.active{color:var(--text); background:var(--surface-2); border-color:currentColor;}

/* ---------- feed ---------- */
.feed{ max-width:900px; margin:0 auto; padding:40px 32px 0; display:flex; flex-direction:column; gap:16px; }
.card{
  border:1px solid var(--border); background:var(--surface); border-radius:10px; padding:22px 24px;
  display:grid; grid-template-columns:100px 1fr; gap:22px;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
  position:relative; overflow:hidden;
}
.card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cat-color, var(--c-gray)); }
.card:hover{border-color:var(--text-faint); background:var(--surface-2); transform:translateY(-2px);}
.card .meta{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-faint); display:flex; flex-direction:column; gap:8px; }
.card .meta .id{color:var(--text-dim); font-weight:600;}
.card .sev{ display:inline-flex; align-items:center; gap:6px; color:var(--cat-color, var(--c-gray)); font-weight:600; font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; }
.card .sev .sw{width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor;}
.card .body h3{ font-size:18.5px; font-weight:700; letter-spacing:-0.01em; line-height:1.35; margin-bottom:8px; }
.card .body h3 a{transition:color .15s ease;}
.card .body h3 a:hover{color:var(--accent);}
.card .body p{ color:var(--text-dim); font-size:14px; line-height:1.6; max-width:62ch; }
.card .foot{ margin-top:14px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--text-faint); }
.card .foot .tag{ color:var(--text-dim); background:var(--border-soft); padding:3px 9px; border-radius:5px; }
.card .foot .status{ margin-left:auto; color:var(--c-green); display:flex; align-items:center; gap:6px; }
.card .foot .status .sw{width:6px; height:6px; border-radius:50%; background:currentColor;}
@media (max-width:600px){ .card{grid-template-columns:1fr; gap:12px;} .card .meta{flex-direction:row; justify-content:space-between;} }

.empty{ display:none; text-align:center; padding:60px 20px; color:var(--text-faint); font-family:'JetBrains Mono', monospace; font-size:13px; }

/* ---------- single post ---------- */
.post{ max-width:760px; margin:0 auto; padding:56px 32px 0; }
.post .back{ font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--text-dim); display:inline-flex; align-items:center; gap:8px; margin-bottom:28px; }
.post .back:hover{color:var(--accent);}
.post .meta{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-faint); display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:18px; }
.post .meta .sev{ display:inline-flex; align-items:center; gap:6px; color:var(--cat-color, var(--c-gray)); font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.post .meta .sev .sw{width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor;}
.post h1{ font-size:clamp(28px, 4.4vw, 42px); line-height:1.15; font-weight:800; letter-spacing:-0.02em; margin-bottom:20px; }
.post .lede{ font-size:17px; line-height:1.7; color:var(--text-dim); margin-bottom:36px; padding-bottom:36px; border-bottom:1px solid var(--border-soft); }
.post .content{ font-size:16px; line-height:1.85; color:#dbe2e9; }
.post .content p{ margin-bottom:20px; }
.post .content img{ max-width:100%; height:auto; display:block; margin:28px auto; border-radius:8px; border:1px solid var(--border); }
.post .content figure{ margin:28px 0; }
.post .content figcaption{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-faint); text-align:center; margin-top:8px; }
.post .content h2{ font-size:24px; margin:36px 0 14px; font-weight:700; }
.post .content h3{ font-size:19px; margin:28px 0 12px; font-weight:700; }
.post .content pre{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:16px 18px; overflow-x:auto; font-family:'JetBrains Mono', monospace; font-size:13.5px; margin:20px 0; }
.post .content code{ font-family:'JetBrains Mono', monospace; background:var(--surface); padding:2px 6px; border-radius:4px; font-size:0.9em; }
.post .content a{ color:var(--accent); border-bottom:1px solid var(--accent-dim); }
.post .content ul, .post .content ol{ margin:0 0 20px 22px; }
.post .tags{ margin-top:40px; padding-top:24px; border-top:1px solid var(--border-soft); display:flex; gap:10px; flex-wrap:wrap; }
.post .tags .tag{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-dim); background:var(--surface); border:1px solid var(--border); padding:5px 12px; border-radius:100px; }
.post-404{ max-width:600px; margin:0 auto; padding:120px 32px; text-align:center; }
.post-404 .code{ font-family:'JetBrains Mono', monospace; color:var(--c-red); font-size:14px; margin-bottom:14px; }
.post-404 h1{ font-size:32px; margin-bottom:14px; }
.post-404 p{ color:var(--text-dim); margin-bottom:26px; }
.post-404 a{ font-family:'JetBrains Mono', monospace; color:var(--accent); border-bottom:1px solid var(--accent-dim); }

/* ---------- footer ---------- */
footer{
  max-width:900px; margin:70px auto 0; padding:32px 32px 60px;
  border-top:1px solid var(--border-soft);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
}
footer .name{font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-faint);}
footer .socials{display:flex; gap:10px;}
footer .socials a{
  width:36px; height:36px; border-radius:8px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim);
  font-family:'JetBrains Mono', monospace; font-size:13px;
  transition:border-color .15s ease, color .15s ease;
}
footer .socials a:hover{color:var(--accent); border-color:var(--accent-dim);}