:root{
  --bg:#0a0a0a; --red:#ff0000; --red2:#cc0000; --red3:#ff3333; --green:#00ff41;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--red);font-family:"JetBrains Mono",monospace}
a{color:var(--red3);text-decoration:none}
.wrap{max-width:900px;margin:0 auto;padding:24px}
.center{text-align:center}

.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid #200}
.nav .brand{font-weight:600;letter-spacing:.5px}
.nav .link{margin-left:16px;opacity:.85}
.nav .link.active{color:var(--red3);text-shadow:0 0 6px #400}

.title{margin:.6em 0 0.3em 0;letter-spacing:.5px}
.intro{color:var(--red2);opacity:.9}
.panel{border:1px solid #200;padding:16px;border-radius:6px;background:#0c0a0a}
.btn{background:transparent;border:1px solid var(--red3);color:var(--red3);padding:8px 12px;border-radius:4px;cursor:pointer}
.btn:hover{box-shadow:0 0 10px #a00;transform:translateY(-1px)}

.code{background:#0b0a0a;border:1px solid #200;padding:12px;overflow:auto}
.copyable{position:relative}
.copyable::after{content:'▮';position:absolute;right:8px;bottom:6px;color:var(--red2);opacity:.5}

.hover-reveal .hidden{color:#140000;border-bottom:1px dotted #300;transition:color .3s}
.hover-reveal:hover .hidden{color:var(--red3);text-shadow:0 0 8px #a00}

.funcs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.funcs li{border:1px solid #200;padding:12px;border-radius:6px}
.stage{margin-top:16px;min-height:120px;display:grid;place-items:center}

.console{border:1px solid #200;min-height:180px;padding:12px;background:#0b0a0a;font-size:.95rem}
.console .err{color:var(--red3)}
.console .warn{color:#ff8800}
.console .note{color:var(--green)}

.crumbs{font-size:.8rem;color:#aa0000;opacity:.8}

.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-glitch);position:absolute;left:0;top:0;overflow:hidden;clip-path:inset(0 0 0 0);
}
.glitch::before{color:#f00;transform:translate(1px,0);mix-blend-mode:screen}
.glitch::after{color:#f22;transform:translate(-1px,0);mix-blend-mode:screen}
.glitch:hover::before{animation:shift .2s linear infinite}
.glitch:hover::after{animation:shift .25s linear infinite reverse}
@keyframes shift{0%{transform:translate(0,0)}50%{transform:translate(2px,-1px)}100%{transform:translate(-1px,1px)}}

.flicker{animation:flick 3s infinite}
@keyframes flicker{0%,19%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.6}}
@keyframes flick{0%{text-shadow:0 0 2px #400}50%{text-shadow:0 0 12px #a00}100%{text-shadow:0 0 3px #500}}

.terminal{margin-top:18px}
#term-out{min-height:80px;border:1px solid #200;padding:10px;background:#0b0a0a}
#term-in{width:100%;background:#0a0a0a;color:var(--red);border:1px solid #200;padding:8px}

#eye{position:fixed;width:10px;height:10px;border-radius:50%;background:#f00;box-shadow:0 0 10px #a00;pointer-events:none;opacity:.6;mix-blend-mode:screen}

#transition{position:fixed;inset:0;background:linear-gradient(#100,#000);opacity:0;pointer-events:none}
.page-out #transition{opacity:.9;animation:glitchOut .45s both}
@keyframes glitchOut{
  0%{clip-path:inset(0 0 0 0)}
  40%{clip-path:inset(20% 0 0 0)}
  60%{clip-path:inset(0 0 40% 0)}
  100%{clip-path:inset(0 0 0 0);filter:hue-rotate(10deg) saturate(1.5)}
}

/* Small screens */
@media (max-width:640px){
  .nav{flex-wrap:wrap;gap:8px}
}