:root{
  --bg:#070a07;--panel:#0b120b;--line:#0f1a0f;--txt:#ccffcc;
  --muted:#88aa88;--accent:#00ff88;--accent2:#2aff9b;--border:#122112;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font:16px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;}
a{color:var(--accent2);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.container{max-width:1000px;margin:0 auto;padding:20px}
.header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:12px 0;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:32px;height:32px;image-rendering:pixelated}
.title{font-weight:800;letter-spacing:-0.02em}
nav a{margin-left:14px;font-weight:700}
.badge{display:inline-block;border:1px solid var(--border);color:var(--muted);padding:2px 8px;border-radius:999px;font-size:18px}
.hero{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:center;margin:18px 0 6px}
.hero .panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;position:relative;overflow:hidden}
.tagline{color:var(--muted)}
.crt::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,.05) 2px,transparent 2px,transparent 4px);
  mix-blend-mode:overlay;}
.glow{text-shadow:0 0 6px rgba(0,255,136,.4),0 0 18px rgba(0,255,136,.25);}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--border);padding:16px;border-radius:14px;position:relative;overflow:hidden}
.card h3{margin:6px 0 6px}
.meta{font-size:13px;color:var(--muted)}
footer{margin:28px 0 40px;border-top:1px solid var(--border);padding-top:14px;color:var(--muted);font-size:13px}
.type::after{content:"_";animation:blink 1s step-start infinite;color:var(--accent2);margin-left:3px}
@keyframes blink{50%{opacity:0}}
#transition-overlay{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .25s ease}
#transition-overlay.active{opacity:1;pointer-events:auto}
.emoji{position:fixed;z-index:9999;pointer-events:auto;image-rendering:pixelated;filter:drop-shadow(0 0 6px rgba(0,255,136,.25));}
@keyframes wobble{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(4deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes spinny{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.glitch{position:relative}
.glitch:before,.glitch:after{content:attr(data-text);position:absolute;left:0;top:0;}
.glitch:before{left:1px;text-shadow:-1px 0 #f0f;animation:gl1 2s infinite linear alternate}
.glitch:after{left:-1px;text-shadow:1px 0 #0ff;animation:gl2 1.7s infinite linear alternate}
@keyframes gl1{0%{clip-path:inset(0 0 80% 0)}50%{clip-path:inset(10% 0 20% 0)}100%{clip-path:inset(80% 0 0 0)}}
@keyframes gl2{0%{clip-path:inset(80% 0 0 0)}50%{clip-path:inset(20% 0 10% 0)}100%{clip-path:inset(0 0 80% 0)}}
.btn{display:inline-block;background:#0f1a12;border:1px solid var(--border);color:var(--txt);padding:8px 12px;border-radius:10px}
.btn:hover{box-shadow:0 0 10px rgba(0,255,136,.2) inset}
article h1{margin:8px 0 8px}
.prose p{margin:10px 0}
figure{margin:0}
figure img{border-radius:10px;border:1px solid var(--border)}
@keyframes jitter{0%{transform:translate(0,0)}25%{transform:translate(0.3px,0)}50%{transform:translate(0,-0.3px)}75%{transform:translate(-0.3px,0)}100%{transform:translate(0,0)}}
.jitter{animation:jitter 3s infinite ease-in-out}