:root{--bg:#020503;color-scheme:dark}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:var(--bg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.crt{height:100vh;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;position:relative;overflow:hidden}
/* sized so all 27 rows always fit one screen, whatever the viewport */
.term{align-self:center;overflow:hidden;font:clamp(8px,min(1.15vw,2.75vh),20px)/1.15 VGA,monospace;padding:0 6vw;color:#39ff14}
.ln{display:inline-block;animation:type .35s steps(24) both}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -100vw 0 0)}}
.d0{animation-delay:0.00s}
.d1{animation-delay:0.16s}
.d2{animation-delay:0.32s}
.d3{animation-delay:0.48s}
.d4{animation-delay:0.64s}
.d5{animation-delay:1.60s}
.d6{animation-delay:1.76s}
.d7{animation-delay:1.92s}
.d8{animation-delay:2.08s}
.d9{animation-delay:2.24s}
.d10{animation-delay:2.40s}
.d11{animation-delay:2.56s}
.d12{animation-delay:2.72s}
.d13{animation-delay:2.88s}
.d14{animation-delay:3.04s}
.d15{animation-delay:3.20s}
.d16{animation-delay:3.36s}
.d17{animation-delay:3.52s}
.d18{animation-delay:3.68s}
.d19{animation-delay:3.84s}
.d20{animation-delay:4.00s}
.d21{animation-delay:4.16s}
.d22{animation-delay:4.32s}
.d23{animation-delay:4.48s}
.d24{animation-delay:4.64s}
.d25{animation-delay:4.80s}
.d26{animation-delay:4.96s}
.c3{color:#00ffc8}.c5{color:#ff1f8f}.c7{color:#7dff9a}.c8{color:#4f9a62}.cB{color:#39ff14}.cD{color:#ff1f8f}.cF{color:#eaffd0}
/* the block letters: toxic falling to deep poison, a bruise for a shadow, chroma split on the edges */
.g0{color:#eaff00}.g1{color:#d4ff00}.g2{color:#b4ff00}.g3{color:#8cff00}.g4{color:#5cff0a}.g5{color:#39ff14}.g6{color:#1cf52e}.g7{color:#0ce848}.g8{color:#04d65c}.g9{color:#02c06a}.g10{color:#00a870}.g11{color:#008f6e}.g12{color:#007566}.gsh{color:#2a0a3d}
.lg{text-shadow:-2px 0 #ff1f8fb0,2px 0 #00ffe1a0}
.cur{color:#39ff14;animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.status{display:flex;flex-wrap:wrap;background:#39ff14;color:#020503;font:clamp(11px,1.15vw,15px)/1 VGA,monospace}
.status span{padding:5px 1.4ch;border-right:2px solid #0a5a14}
.status .on{margin-left:auto;background:#ff1f8f;color:#020503;border:0}
@media (max-width:760px){.term{font-size:clamp(7px,min(2.25vw,2.75vh),12px);padding:0 2vw}}
@media (prefers-reduced-motion:reduce){*,*::after{animation:none!important}}