:root{
  --bg:#020402;
  --p:#4dff88;          /* phosphor green */
  --p-dim:#2ea85a;
  --p-faint:#1c6b3a;
  --amber:#ffb000;
  --line:rgba(77,255,136,.18);
  --max:1080px;
  --glow:0 0 6px rgba(77,255,136,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--p);font-family:"IBM Plex Mono",monospace;line-height:1.55;
  overflow-x:hidden;text-shadow:var(--glow);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--p-faint)}
a:hover{background:var(--p);color:var(--bg);text-shadow:none}
::selection{background:var(--p);color:var(--bg);text-shadow:none}
b{color:var(--amber);font-weight:500}

/* CRT overlay */
.crt{position:fixed;inset:0;z-index:200;pointer-events:none}
.crt .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.28) 3px,rgba(0,0,0,.28) 3px);
  background-size:100% 3px}
.crt .glow{position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.6) 100%)}
.crt .flicker{position:absolute;inset:0;background:rgba(77,255,136,.02);animation:flick .12s steps(2) infinite}
@keyframes flick{0%{opacity:.9}50%{opacity:.6}100%{opacity:.85}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;
  padding:16px clamp(16px,4vw,40px);background:linear-gradient(var(--bg),rgba(2,4,2,.6) 70%,transparent);
  font-size:.9rem;text-transform:lowercase}
.brand{font-size:1.15rem;letter-spacing:.04em;border:0;font-weight:500}
.brand .cur{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.nav-links{display:flex;gap:clamp(12px,2.5vw,26px);align-items:center}
.nav-links a{border:0}
.nav-links a:hover{background:none;color:var(--bg);text-shadow:none;background:var(--p)}
.status{color:var(--p-dim);font-size:.78rem;border:1px solid var(--line);padding:3px 8px;border-radius:2px}
@media(max-width:620px){.nav-links a:nth-child(1),.nav-links a:nth-child(2){display:none}}

/* hero terminal */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:100px clamp(14px,4vw,40px) 40px}
.terminal{width:min(var(--max),100%);border:1px solid var(--p-faint);border-radius:6px;
  background:rgba(6,14,8,.55);box-shadow:0 0 40px rgba(77,255,136,.08),inset 0 0 60px rgba(0,0,0,.5);overflow:hidden}
.term-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--p-faint);background:rgba(77,255,136,.05)}
.term-bar span{width:11px;height:11px;border-radius:50%;border:1px solid var(--p-dim)}
.term-bar span:first-child{background:var(--p-faint)}
.term-bar p{margin-left:auto;font-size:.76rem;color:var(--p-dim);text-shadow:none}
.term-body{padding:22px clamp(16px,3vw,30px);min-height:min(60vh,520px);font-size:clamp(.9rem,1.5vw,1.05rem)}
.boot{white-space:pre-wrap;color:var(--p-dim);font-size:.86rem;line-height:1.7;margin-bottom:4px}
.ascii{color:#9dffbe;font-family:"VT323",monospace;font-size:clamp(2.8rem,10vw,6rem);line-height:.85;
  margin:14px 0 6px;white-space:pre;letter-spacing:.05em;
  text-shadow:0 0 3px rgba(157,255,190,.9),0 0 22px rgba(77,255,136,.6);opacity:1}
.ascii.lit{animation:poweron .6s steps(3) 1} /* CRT power-on flicker, settles at opacity:1 */
@keyframes poweron{0%{opacity:0}20%{opacity:.6}45%{opacity:.15}70%{opacity:.9}100%{opacity:1}}
.lines{white-space:pre-wrap}
.lines .out{color:var(--p);margin:2px 0}
.lines .cmd-echo{color:var(--amber)}
.lines .dim{color:var(--p-dim)}
.lines .row{margin:1px 0}
.prompt-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.ps1{color:var(--p-dim)}
.caret{animation:blink 1s steps(1) infinite}
.cmd-input{position:absolute;left:-9999px;opacity:0;width:1px;height:1px}

.hint{margin-top:22px;color:var(--p-dim);font-size:.85rem;text-align:center}

/* doc sections */
.doc{max-width:var(--max);margin:0 auto;padding:clamp(70px,10vh,130px) clamp(16px,4vw,40px)}
.doc.alt{border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.doc-tag{color:var(--p-dim);font-size:.85rem;margin-bottom:1rem}
h2{font-family:"VT323",monospace;font-size:clamp(2.4rem,7vw,5rem);line-height:1;letter-spacing:.02em;margin-bottom:2rem;
  text-shadow:0 0 16px rgba(77,255,136,.4)}
h3{color:var(--amber);font-size:.9rem;font-weight:500;letter-spacing:.05em;margin-bottom:.5rem;text-shadow:0 0 6px rgba(255,176,0,.4)}
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,44px)}
@media(max-width:760px){.doc-grid{grid-template-columns:1fr}}
.doc-grid p{color:var(--p);max-width:38ch}

/* glitch heading */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden}
.glitch::before{color:var(--amber);clip-path:inset(0 0 60% 0);animation:gl1 3.4s infinite steps(2)}
.glitch::after{color:#4de1ff;clip-path:inset(60% 0 0 0);animation:gl2 2.8s infinite steps(2)}
@keyframes gl1{0%,92%,100%{transform:translate(0)}94%{transform:translate(-3px,-1px)}96%{transform:translate(2px,1px)}}
@keyframes gl2{0%,90%,100%{transform:translate(0)}93%{transform:translate(3px,1px)}97%{transform:translate(-2px,-1px)}}

/* programs list */
.prog-list{list-style:none}
.prog-list li{display:grid;grid-template-columns:160px 1fr auto;gap:16px;align-items:baseline;
  padding:14px 4px;border-bottom:1px solid var(--line);transition:padding-left .3s,background .2s}
.prog-list li:hover{padding-left:16px;background:rgba(77,255,136,.06)}
.p-name{color:var(--p);font-weight:500}
.p-name::before{content:"› "}
.p-desc{color:var(--p-dim)}
.p-size{color:var(--p-faint);font-size:.82rem}
@media(max-width:620px){.prog-list li{grid-template-columns:1fr auto}.p-desc{display:none}}

/* manifesto */
.manifesto blockquote{font-family:"VT323",monospace;font-size:clamp(1.6rem,4.6vw,3rem);line-height:1.15;
  color:var(--p);text-shadow:0 0 14px rgba(77,255,136,.4)}
.manifesto em{color:var(--amber);font-style:normal}

/* footer */
.footer{border-top:1px solid var(--p-faint);padding:clamp(40px,7vh,70px) clamp(16px,4vw,40px) 34px;text-align:center}
.foot-ascii{color:var(--p-dim);font-size:.8rem;line-height:1.2;margin-bottom:1.6rem;display:inline-block;text-align:left;text-shadow:none}
.foot-bottom{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:.8rem;color:var(--p-dim)}

/* reveals */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease}
a:focus-visible,.cmd-input:focus-visible+*{outline:2px solid var(--p);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .reveal,.js .reveal{opacity:1!important;transform:none!important}
  .crt .flicker,.brand .cur,.caret,.ascii.lit,.glitch::before,.glitch::after{animation:none}
  .glitch::before,.glitch::after{display:none}
}