:root { --fg:#39ff6a; --dim:#1f9a3f; --bg:#020a04; --r:#ff2d55; --c:#00e5ff; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body {
  margin:0; min-height:100vh; padding:6vh 6vw 10vh;
  background:radial-gradient(ellipse at center, #06200d 0%, var(--bg) 75%);
  color:var(--fg);
  font:16px/1.65 "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Courier New", monospace;
  text-shadow:0 0 6px rgba(57,255,106,.55);
}
body::before { /* scanlines */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:10;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 3px);
}
body::after { /* vignette */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:11;
  box-shadow:inset 0 0 140px rgba(0,0,0,.85);
}
html::before { /* rolling refresh band */
  content:""; position:fixed; left:0; right:0; top:-20vh; height:16vh; pointer-events:none; z-index:12;
  background:linear-gradient(to bottom, transparent, rgba(57,255,106,.07), transparent);
  animation:roll 8s linear infinite;
}
@keyframes roll { to { transform:translateY(140vh); } }

main { max-width:78ch; margin:0 auto; animation:flick 5s steps(1) infinite; }
@keyframes flick { 0%,100%{opacity:1} 47%{opacity:1} 48%{opacity:.93} 49%{opacity:1} 71%{opacity:.96} 72%{opacity:1} }
main.tear { animation:tear .24s steps(1) 1; }
@keyframes tear {
  0%   { transform:translate(0); }
  15%  { transform:translate(-7px,0) skewX(2deg); text-shadow:3px 0 var(--r), -3px 0 var(--c); }
  35%  { transform:translate(6px,0) skewX(-1deg); text-shadow:-3px 0 var(--r), 3px 0 var(--c); }
  55%  { transform:translate(-3px,0); filter:hue-rotate(40deg) brightness(1.4); }
  75%  { transform:translate(2px,0); filter:none; }
  100% { transform:none; }
}

pre { margin:0; font:inherit; white-space:pre-wrap; }
.logo { position:relative; line-height:1.15; font-size:clamp(9px, 2.6vw, 18px); margin:1.2em 0; color:#7dffa0; }
.logo::before, .logo::after { content:attr(data-text); position:absolute; inset:0; white-space:pre; opacity:0; pointer-events:none; mix-blend-mode:screen; text-shadow:none; }
.logo::before { color:var(--r); animation:g1 6s steps(1) infinite; }
.logo::after  { color:var(--c); animation:g2 6s steps(1) infinite 1.3s; }
@keyframes g1 {
  0%,90%,100% { opacity:0; }
  91% { opacity:.95; transform:translate(-5px,0); clip-path:inset(10% 0 60% 0); }
  93% { opacity:.95; transform:translate(4px,0);  clip-path:inset(55% 0 10% 0); }
  95% { opacity:.95; transform:translate(-3px,0); clip-path:inset(30% 0 40% 0); }
  97% { opacity:0; }
}
@keyframes g2 {
  0%,88%,100% { opacity:0; }
  89% { opacity:.95; transform:translate(5px,0);  clip-path:inset(60% 0 5% 0); }
  92% { opacity:.95; transform:translate(-4px,0); clip-path:inset(5% 0 70% 0); }
  95% { opacity:0; }
}

.dim { color:var(--dim); text-shadow:none; }
h2 { font-size:1em; margin:2.2em 0 .6em; font-weight:700; }
.pr { color:var(--dim); }
p { margin:.5em 0; }
a { color:var(--bg); background:var(--fg); text-decoration:none; padding:0 .4em; text-shadow:none; }
a:hover, a:focus-visible { background:#fff; outline:none; animation:jit .3s steps(1) 2; }
@keyframes jit { 50% { transform:translate(2px,-1px); box-shadow:-2px 0 var(--r), 2px 0 var(--c); } }
.cur { display:inline-block; width:.6em; height:1.05em; background:var(--fg); vertical-align:-.15em; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.l { opacity:0; animation:show 0s forwards; animation-delay:calc(var(--i) * .22s); }
@keyframes show { to { opacity:1; } }
ul { list-style:none; padding:0; margin:.4em 0; }
li { margin:.9em 0; }
li b { display:inline-block; min-width:4ch; }
li:hover .scr { text-shadow:2px 0 var(--r), -2px 0 var(--c); }

@media (prefers-reduced-motion: reduce) {
  .l { opacity:1; animation:none; }
  .cur, main, html::before, .logo::before, .logo::after { animation:none; }
}
.d0 { --i:0; }
.d5 { --i:5; }
.d7 { --i:7; }
.d8 { --i:8; }
.d9 { --i:9; }
.d10 { --i:10; }
.d12 { --i:12; }
.d13 { --i:13; }
.d15 { --i:15; }
.d16 { --i:16; }
.d17 { --i:17; }

p, li, h2 { overflow-wrap:anywhere; }