:root{
  --bg:#07090b; --bg2:#0c1014; --fg:#c9d4cf; --muted:#6f7f78; --line:#17211d;
  --acc:#39ff88; --acc2:#29d3ff; --warn:#ffb347; --code-bg:#0a0f0c; --card:#0b110e;
  --glow:0 0 6px rgba(57,255,136,.55),0 0 18px rgba(57,255,136,.18);
  --mono:"JetBrains Mono","Fira Code",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.75 var(--mono);
  background-image:radial-gradient(ellipse at top,rgba(57,255,136,.06),transparent 60%);
  min-height:100vh;
}
::selection{background:var(--acc);color:#000}
#rain{position:fixed;inset:0;z-index:0;opacity:.12;pointer-events:none}
.scan{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.25) 3px);
  mix-blend-mode:multiply}
header.site,main,footer.site{position:relative;z-index:2}
a{color:var(--acc);text-decoration:none;transition:color .2s,text-shadow .2s}
a:hover{text-shadow:var(--glow)}
.wrap{max-width:780px;margin:0 auto;padding:0 18px}

/* header */
header.site{border-bottom:1px solid var(--line);padding:20px 0 16px;background:rgba(7,9,11,.75);backdrop-filter:blur(6px);position:sticky;top:0}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.logo{font:700 21px/1 var(--mono);color:var(--fg);position:relative;letter-spacing:.02em}
.logo span{color:var(--acc);text-shadow:var(--glow)}
.cur{font-style:normal;color:var(--acc);animation:blink 1s steps(1) infinite}
nav a{font-size:14px;color:var(--muted);margin-left:20px;position:relative}
nav a:first-child{margin-left:0}
nav a::before{content:"./";opacity:0;color:var(--acc);transition:opacity .2s;position:absolute;left:-16px}
nav a:hover::before,nav a.active::before{opacity:1}
nav a.active,nav a:hover{color:var(--fg);text-shadow:none}

/* glitch */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;opacity:0;pointer-events:none}
.glitch:hover::before,h1.glitch::before{opacity:.8;color:var(--acc2);animation:g1 2.6s infinite linear alternate-reverse}
.glitch:hover::after,h1.glitch::after{opacity:.8;color:#ff2e6e;animation:g2 2.1s infinite linear alternate-reverse}
@keyframes g1{0%{clip-path:inset(10% 0 80% 0);transform:translate(-2px,0)}25%{clip-path:inset(60% 0 10% 0)}50%{clip-path:inset(30% 0 50% 0);transform:translate(2px,0)}100%{clip-path:inset(85% 0 2% 0)}}
@keyframes g2{0%{clip-path:inset(70% 0 5% 0);transform:translate(2px,0)}30%{clip-path:inset(5% 0 75% 0)}60%{clip-path:inset(45% 0 35% 0);transform:translate(-2px,0)}100%{clip-path:inset(20% 0 60% 0)}}

main{padding:38px 0 60px}
h1{font-size:30px;line-height:1.25;margin:0 0 12px;color:#eafff3;letter-spacing:-.01em}
h1::before{content:"# ";color:var(--acc)}
h2{font-size:21px;line-height:1.35;margin:40px 0 12px;color:#eafff3}
article h2::before{content:"## ";color:var(--acc);opacity:.7}
h3{font-size:17px;margin:26px 0 8px;color:#eafff3}
p{margin:0 0 16px}
strong{color:#eafff3}
em{color:var(--acc2);font-style:normal}
.lead{color:var(--muted);font-size:16px;margin-bottom:28px}
.meta{font-size:13px;color:var(--muted);margin-bottom:26px}
.tag{display:inline-block;font-size:12px;line-height:1;padding:5px 8px;border:1px solid var(--line);border-radius:3px;margin-right:6px;color:var(--acc2)}
.tag::before{content:"#"}

/* hero terminal */
.hero{margin-bottom:10px}
.term{border:1px solid #1d2b24;border-radius:8px;background:var(--bg2);box-shadow:0 0 0 1px rgba(57,255,136,.05),0 12px 40px rgba(0,0,0,.5);margin-bottom:26px;overflow:hidden}
.term-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid #16201b;background:#0e1411}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
.term-bar span{margin-left:8px;font-size:12px;color:var(--muted)}
.term-body{margin:0;padding:16px 18px;min-height:190px;font-size:14px;line-height:1.7;background:transparent;white-space:pre-wrap;color:var(--fg)}
.p{color:var(--acc)}
.caret{color:var(--acc);animation:blink 1s steps(1) infinite}
.out .k{color:var(--acc2)}.out .d{color:var(--muted)}.out .w{color:var(--warn)}
@keyframes blink{50%{opacity:0}}

.sec{font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:34px 0 8px}
.sec span{color:var(--acc)}

/* posts list */
.posts{list-style:none;padding:0;margin:0}
.posts li{padding:18px 16px;margin:0 -16px;border-left:2px solid transparent;border-bottom:1px dashed var(--line);transition:background .25s,border-color .25s,transform .25s}
.posts li:hover{background:rgba(57,255,136,.035);border-left-color:var(--acc);transform:translateX(4px)}
.posts h2{margin:0 0 4px;font-size:18px}
.posts h2::before{content:"> ";color:var(--acc)}
.posts h2 a{color:#eafff3}
.posts h2 a:hover{color:var(--acc)}
.posts p{margin:6px 0 0;color:var(--muted);font-size:14.5px}

/* code */
code,pre{font-family:var(--mono)}
code{background:var(--code-bg);color:var(--acc);padding:2px 6px;border-radius:3px;border:1px solid var(--line);font-size:.9em}
pre{position:relative;background:var(--code-bg);border:1px solid var(--line);border-left:2px solid var(--acc);padding:14px 16px;border-radius:4px;overflow-x:auto;margin:0 0 18px;font-size:14px;line-height:1.6}
pre code{background:none;border:0;padding:0;color:#bfe9d0}
.copy{position:absolute;top:6px;right:6px;font:12px var(--mono);background:#0f1814;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:3px 8px;cursor:pointer;opacity:0;transition:opacity .2s}
pre:hover .copy{opacity:1}
.copy:hover{color:var(--acc);border-color:var(--acc)}

table{border-collapse:collapse;width:100%;margin:0 0 20px;font-size:14px}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
th{color:var(--acc);font-weight:600}
tr:hover td{background:rgba(57,255,136,.03)}
.table-wrap{overflow-x:auto}
blockquote{margin:0 0 18px;padding:10px 16px;border-left:2px solid var(--warn);background:rgba(255,179,71,.05);color:#e6d3b5}
blockquote::before{content:"[!] ";color:var(--warn)}
ul,ol{padding-left:22px;margin:0 0 16px}
li{margin-bottom:5px}
ul li::marker{color:var(--acc);content:"› "}

/* cards */
.cards{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px;overflow:hidden;transition:border-color .3s,transform .3s}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(57,255,136,.08) 50%,transparent 70%);transform:translateX(-100%);transition:transform .7s}
.card:hover{border-color:rgba(57,255,136,.45);transform:translateY(-3px)}
.card:hover::after{transform:translateX(100%)}
.card h3{margin:0 0 6px}
.card h3::before{content:"[+] ";color:var(--acc)}
.card p{margin:0;color:var(--muted);font-size:14.5px}

.err{border-left-color:#ff2e6e;color:#ff8aa8}
.postnav{display:flex;justify-content:space-between;gap:16px;margin-top:44px;padding-top:18px;border-top:1px dashed var(--line);font-size:14px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

footer.site{border-top:1px solid var(--line);padding:22px 0 40px;font-size:13px;color:var(--muted)}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.ok{color:var(--acc);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  #rain{display:none}
  .reveal{opacity:1;transform:none}
}