:root{
  --black:#030503; --ink:#0a110a; --g:#39ff6a; --gd:#1c7a35; --gdd:#0f3a1a; --bone:#c9e8c4; --grey:#6b7a6b; --red:#c8ff3a;
  --mono:'IBM Plex Mono',ui-monospace,monospace; --crt:'VT323',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--black)}
body{margin:0;color:var(--g);font:400 15px/1.55 var(--mono);background:var(--black);overflow-x:hidden;
  text-shadow:0 0 6px rgba(57,255,106,.35)}
img{display:block;max-width:100%;height:auto;image-rendering:pixelated}
a{color:var(--g)}
.dim{color:var(--grey);text-shadow:none}
.hot{color:var(--bone)}
.cur{font-weight:400;animation:blink 1.05s steps(1) infinite;margin-left:.1em}
@keyframes blink{50%{opacity:0}}

/* CRT overlay: scanlines + vignette + flicker */
.crt{position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.32) 2px 3px);
  box-shadow:inset 0 0 160px rgba(0,0,0,.95),inset 0 0 40px rgba(0,0,0,.8);animation:flick 6s steps(1) infinite}
@keyframes flick{0%,100%{opacity:1}47%{opacity:.86}48%{opacity:1}73%{opacity:.93}74%{opacity:1}}
.noise{position:fixed;inset:-50%;pointer-events:none;z-index:49;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:static .6s steps(3) infinite}
@keyframes static{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}

/* old browser chrome */
.chrome{position:sticky;top:0;z-index:40;background:var(--black);border-bottom:2px solid var(--gd)}
.chrome__bar{display:flex;align-items:center;gap:8px;padding:4px 10px;background:var(--gdd);font:20px/1 var(--crt);color:var(--bone)}
.chrome__title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrome__btns{display:flex;gap:4px}
.chrome__btns i{font-style:normal;width:20px;height:18px;display:grid;place-items:center;border:1px solid var(--gd);background:var(--black);color:var(--g);font-size:16px}
.chrome__addr{display:flex;gap:10px;align-items:center;padding:5px 10px;font:19px/1 var(--crt);border-top:1px solid var(--gdd)}
.chrome__lbl{color:var(--grey)}
.chrome__url{flex:1;border:1px solid var(--gd);padding:3px 8px;background:var(--ink);white-space:nowrap;overflow:hidden}
.chrome__status{color:var(--grey);min-width:9ch}
.marquee{overflow:hidden;border-top:1px solid var(--gdd);background:var(--ink);font:18px/1.5 var(--crt);color:var(--gd)}
.marquee__track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marquee__track span{white-space:pre;padding-right:0}
.marquee b{color:var(--g);font-weight:400}
@keyframes marq{to{transform:translateX(-50%)}}

main{max-width:1240px;margin:0 auto;padding:0 20px}
section{padding:72px 0;border-bottom:1px dashed var(--gdd)}
.req{font:22px/1.2 var(--crt);color:var(--gd);margin:0 0 18px}
.sec{font:400 clamp(44px,7vw,92px)/.9 var(--crt);margin:0 0 14px;color:var(--g);letter-spacing:-.01em}
.note{max-width:56ch;margin:0 0 30px}

/* 01 dump */
.dump{padding-top:28px}
.headers{font:15px/1.45 var(--mono);color:var(--grey);text-shadow:none;margin:0 0 30px;white-space:pre-wrap}
.dump__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}
.monitor{margin:0;position:relative;transform:rotate(-1.2deg)}
.monitor__glass{position:relative;border:14px solid #121912;border-radius:4px;outline:2px solid var(--gd);
  box-shadow:0 0 0 2px #000,0 0 60px rgba(57,255,106,.18);overflow:hidden;background:var(--black)}
.monitor__glass::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.18) 3px 4px);
  box-shadow:inset 0 0 70px rgba(0,0,0,.7)}
.monitor__img{width:100%;filter:contrast(1.05)}
.monitor figcaption{font:18px/1.2 var(--crt);margin-top:10px;color:var(--g)}
.log__h{margin:0;font:400 clamp(72px,12vw,168px)/.8 var(--crt);color:var(--g);letter-spacing:-.02em}
.log__sub{font:400 clamp(26px,3.4vw,40px)/1 var(--crt);color:var(--bone);margin:10px 0 28px}
.log__lines{list-style:none;margin:0;padding:14px 16px;border-left:2px solid var(--gd);background:var(--ink);min-height:23em;font-size:14px}
.log__lines li{animation:in .18s steps(2)}
.log__lines .ts{color:var(--gd)}
@keyframes in{from{opacity:0}}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}
.glitch::before{color:var(--bone);clip-path:inset(0 0 72% 0);transform:translate(-3px,0);animation:tear 3.4s steps(1) infinite}
.glitch::after{color:var(--gd);clip-path:inset(64% 0 0 0);transform:translate(3px,0);animation:tear 2.7s steps(1) infinite reverse}
@keyframes tear{0%,88%,100%{transform:translate(0)}90%{transform:translate(-6px,0)}93%{transform:translate(5px,0)}96%{transform:translate(-2px,0)}}

/* 02 robots */
.robots{display:grid;grid-template-columns:1fr 1.3fr;gap:20px 60px;align-items:start}
.robots .req{grid-column:1/-1}
.robots__file{position:relative;border:1px solid var(--gd);padding:26px;background:var(--ink)}
.robots__file pre{margin:0;font:400 40px/1.1 var(--crt);color:var(--bone)}
.stamp{position:absolute;right:-10px;bottom:-14px;font:400 38px/1 var(--crt);color:var(--black);background:var(--g);padding:2px 12px;transform:rotate(-6deg);text-shadow:none}
.robots__body p{margin:0;font:400 clamp(28px,3.6vw,46px)/1.12 var(--crt)}
.robots__body p:nth-child(even){padding-left:2ch}

/* 03 index: contact sheet */
.sheet{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px}
.tile:nth-child(3n+2){transform:translateY(18px)}
.tile:nth-child(4n){transform:rotate(.8deg)}
.tile__win{border:2px solid var(--gd);background:var(--black);transition:transform .2s steps(3)}
.tile:hover .tile__win{transform:translate(-3px,-3px);box-shadow:4px 4px 0 var(--gdd)}
.tile__bar{display:flex;justify-content:space-between;gap:8px;padding:2px 6px;background:var(--gdd);font:17px/1.2 var(--crt);color:var(--bone)}
.tile__bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__bar i{font-style:normal}
.tile__view{aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;background:var(--ink)}
.tile__view img{width:100%;height:100%;object-fit:cover}
.tile--broken .tile__view{background:repeating-linear-gradient(45deg,var(--ink) 0 6px,#060906 6px 12px)}
.broken{border:1px solid var(--grey);padding:6px;color:var(--grey);text-shadow:none;display:grid}
.tile__meta{font-size:12.5px;margin:8px 0 0;line-height:1.4}

/* 04 user_0000 */
.ghost__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.ghost__fig{margin:0;position:relative}
.ghost__fig img{border:2px solid var(--gdd);animation:jitter 5s steps(1) infinite}
@keyframes jitter{0%,92%,100%{transform:none;opacity:1}93%{transform:translateX(6px);opacity:.7}95%{transform:translateX(-4px)}97%{opacity:.4}}
.ghost__fig figcaption{font:20px/1.2 var(--crt);margin-top:10px}
.hex{font:14px/1.5 var(--mono);color:var(--gd);background:var(--ink);padding:14px;margin:0 0 22px;overflow:hidden;white-space:pre}
.ghost__lines{list-style:none;margin:0;padding:0;font:400 clamp(26px,3vw,38px)/1.15 var(--crt)}
.unread{color:var(--grey);text-shadow:none}

/* 05 record + CA slot */
.ca{display:flex;align-items:center;gap:0;border:2px solid var(--gd);background:var(--ink);max-width:760px;min-height:56px;font:16px/1 var(--mono)}
.ca__lbl{align-self:stretch;display:grid;place-items:center;padding:0 16px;background:var(--gd);color:var(--black);font:26px/1 var(--crt);text-shadow:none}
.ca__val{flex:1;padding:0 16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:15px/1 var(--mono);color:var(--bone);min-width:4ch}
.ca__val:empty::after{content:"";display:inline-block;width:100%;border-bottom:1px dashed var(--gdd)}
.ca__copy,.ca__scan{align-self:stretch;border:0;border-left:2px solid var(--gd);background:var(--black);color:var(--g);font:22px/1 var(--crt);padding:0 16px;cursor:pointer;display:grid;place-items:center;text-decoration:none}
.ca__copy:hover,.ca__scan:hover{background:var(--g);color:var(--black)}
.ca__copy:active{transform:translateY(1px)}
.ca__copy[hidden],.ca__scan[hidden]{display:none}

/* footer = EOF */
.eof{max-width:1240px;margin:0 auto;padding:40px 20px 60px;display:grid;grid-template-columns:auto 1fr auto;gap:18px 32px;align-items:center}
.eof__brand{display:flex;align-items:center;gap:12px;font:28px/1 var(--crt)}
.eof__brand img{border:1px solid var(--gd)}
.ca--small{min-height:42px;max-width:none}
.ca--small .ca__lbl{font-size:20px;padding:0 10px}
.eof__links{display:flex;gap:8px}
.eof__links a{width:40px;height:40px;display:grid;place-items:center;border:2px solid var(--gd);color:var(--g)}
.eof__links a:hover{background:var(--g);color:var(--black)}
.eof__end{grid-column:1/-1;margin:16px 0 0;font:22px/1.2 var(--crt)}

/* reveal */
.pre{opacity:0;transform:translateY(16px);transition:opacity .5s steps(5),transform .5s steps(5)}
.pre.in{opacity:1;transform:none}

@media (max-width:900px){
  .dump__grid,.robots,.ghost__grid{grid-template-columns:1fr;gap:32px}
  .sheet{grid-template-columns:repeat(2,1fr)}
  .tile:nth-child(3n+2){transform:none}
  .eof{grid-template-columns:1fr}
  .chrome__lbl,.chrome__btns{display:none}
  .log__lines{min-height:0}
  .hex{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.index{position:relative}
.index::before{content:"";position:absolute;inset:0 -100vw;z-index:0;pointer-events:none;background:url(/img/texture.webp) repeat;background-size:256px;opacity:.18;animation:pan 90s linear infinite}
@keyframes pan{to{background-position:256px 512px}}
.index>*{position:relative;z-index:1}body{overflow-x:clip}
.eof>*{min-width:0}.ca{max-width:100%}.ca--small{max-width:100%}