:root{
  --bg:#011627; --bg2:#0b2942; --a1:#82AAFF; --a2:#ADDB67;
  --tx:#d6deeb; --txd:#8badc1; --txm:#637777; --bd:#1d3b53;
  --close:#FF5F56; --min:#FFBD2E; --max:#27C93F;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--tx);
  font-family:"JetBrains Mono",ui-monospace,Menlo,"Liberation Mono",monospace;
  min-height:100vh;overflow-x:hidden}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;position:relative}
main{width:100%;display:flex;justify-content:center;position:relative;z-index:1}

/* ===== GLOBAL GRAIN ===== */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.1;mix-blend-mode:screen;
  animation:noiseShift .9s steps(6) infinite;
}
@keyframes noiseShift{
  0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}40%{transform:translate(1%,-2%)}
  60%{transform:translate(-1%,2%)}80%{transform:translate(2%,-1%)}100%{transform:translate(0,0)}
}

/* ===== STRONG SCANLINES ===== */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.38) 0px,
      rgba(0,0,0,.38) 1px,
      rgba(0,0,0,.05) 2px,
      rgba(0,0,0,.05) 3px
    );
  mix-blend-mode:multiply;
  animation:scanFlicker 5s infinite;
}
@keyframes scanFlicker{
  0%,88%,100%{opacity:.95;filter:brightness(1)}
  89%{opacity:.7;filter:brightness(1.3)}
  90%{opacity:1;filter:brightness(.9)}
  91%{opacity:.8;filter:brightness(1.2)}
  92%{opacity:1}
}

/* Phosphor text bleed */
.term .body,.term .bar,.term .body *{
  text-shadow:
    0 0 1px rgba(130,170,255,.4),
    0 0 6px rgba(130,170,255,.15),
    1px 0 0 rgba(255,0,60,.12),
   -1px 0 0 rgba(0,240,255,.12);
}
.term .body{animation:textFlicker 6s infinite}
@keyframes textFlicker{
  0%,92%,100%{opacity:1}
  93%{opacity:.88}
  94%{opacity:1}
  95%{opacity:.94}
  96%{opacity:1}
}

/* ===== VHS ROLL BARS ===== */
.roll{
  position:fixed;left:0;right:0;pointer-events:none;z-index:9997;
  mix-blend-mode:screen;filter:blur(2px);top:-200px;
}
.roll.big{
  height:130px;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(130,170,255,.08) 15%,
    rgba(255,255,255,.16) 35%,
    rgba(173,219,103,.26) 48%,
    rgba(255,255,255,.32) 52%,
    rgba(130,170,255,.20) 62%,
    rgba(255,255,255,.10) 78%,
    transparent 100%);
  box-shadow:0 0 50px rgba(130,170,255,.2);
}
.roll.big::before{
  content:"";position:absolute;left:0;right:0;top:40%;height:5px;
  background:rgba(173,219,103,.75);
  box-shadow:0 0 22px rgba(173,219,103,.9),0 -2px 0 rgba(255,95,86,.5),0 2px 0 rgba(39,201,63,.4);
}
.roll.big::after{
  content:"";position:absolute;left:0;right:0;top:58%;height:1px;
  background:#fff;box-shadow:0 0 10px #fff;
}
.roll.thin{
  height:30px;
  background:linear-gradient(to bottom,
    transparent,
    rgba(255,255,255,.18) 50%,
    transparent);
}

/* ===== TERMINAL ===== */
.term{width:100%;max-width:560px;background:var(--bg);border:1px solid var(--bd);
  border-radius:10px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 60px rgba(130,170,255,.08);
  position:relative;z-index:1}
.bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#010e1c;border-bottom:1px solid var(--bd)}
.dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.d1{background:var(--close)}.d2{background:var(--min)}.d3{background:var(--max)}
.path{margin-left:12px;color:var(--txm);font-size:12px;flex:1}
.bar-cursor{display:inline-block;width:7px;height:12px;background:var(--a2);
  animation:blink 1s steps(1) infinite}
.body{padding:22px 24px;font-size:14px;line-height:1.7}
.logo-row{display:flex;align-items:baseline}
.logo{font-size:22px;color:var(--a1)}
.logo .br{color:var(--a2)}
.wm{color:var(--tx);margin-left:10px;font-weight:600}
.rule{border:0;border-top:1px dashed var(--bd);margin:14px 0}
.pr{color:var(--a2)}.cmd{color:var(--tx)}.out{color:var(--txd)}
.type-cursor{display:inline-block;width:7px;height:13px;background:var(--txd);
  vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}

/* ===== LINKS ===== */
.links{list-style:none;padding:0;margin:14px 0 6px}
.links li{margin:2px 0}
.links a{
  display:flex;align-items:center;justify-content:space-between;
  min-height:44px;
  padding:10px 12px;color:var(--tx);text-decoration:none;
  border-left:2px solid transparent;border-radius:4px;
  transition:background .15s ease,border-color .15s ease;
}
.links a:hover,.links a:focus-visible{
  background:var(--bg2);border-left-color:var(--a2);
  box-shadow:0 0 18px rgba(173,219,103,.28);outline:none;
}
.links a:focus-visible{outline:1px solid var(--a2);outline-offset:-1px}
.links .lbl{color:var(--a1);display:inline-flex;align-items:center}
.links .hd{color:var(--txd)}

/* fixed-width flash slot — never shifts layout */
.flash{
  display:inline-block;
  width:1ch;
  text-align:center;
  color:var(--a2);
  font-weight:700;
  visibility:hidden;
  margin-right:6px;
  text-shadow:0 0 8px var(--a2),0 0 2px #fff;
}
.links a:hover .flash,
.links a:focus-visible .flash{visibility:visible}

.foot{color:var(--txm);font-size:12px;margin-top:14px}
.cursor{display:inline-block;width:8px;height:14px;background:var(--a1);vertical-align:-2px;
  animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ===== CRT power-on ===== */
.crt-boot{position:fixed;inset:0;background:#000;z-index:10000;pointer-events:none;
  animation:crtMask .7s ease-out forwards}
.crt-boot::after{content:"";position:absolute;left:0;right:0;height:4px;
  background:linear-gradient(to bottom,transparent,#fff,transparent);
  box-shadow:0 0 30px #fff,0 0 60px var(--a1);
  animation:crtSweep .7s ease-out forwards}
body.booting{animation:crtSquish .7s ease-out}
@keyframes crtSquish{
  0%{transform:scaleY(.015) scaleX(1.25);filter:brightness(3.5)}
  15%{transform:scaleY(.04) scaleX(1.15);filter:brightness(2.8)}
  50%{transform:scaleY(1) scaleX(1);filter:brightness(1.5)}
  100%{transform:scaleY(1) scaleX(1);filter:brightness(1)}
}
@keyframes crtMask{0%{clip-path:inset(0 0 0 0);opacity:1}90%{opacity:1}100%{clip-path:inset(100% 0 0 0);opacity:0}}
@keyframes crtSweep{0%{top:0}100%{top:100%}}

/* ===== Responsive ===== */
@media (max-width:600px){
  body{padding:20px 16px}
  .body{padding:18px 18px;font-size:12px}
  .logo{font-size:19px}
  .dot{width:12px;height:12px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .roll,.crt-boot{display:none!important}
}