:root {
  --bg: #020804;
  --panel: rgba(3, 18, 9, .82);
  --line: rgba(0, 255, 156, .22);
  --line-hi: rgba(0, 255, 156, .55);
  --g: #00ff9c;
  --g-dim: #3fae7c;
  --g-faint: #1d5c40;
  --hot: #ff2e63;
  --cyan: #3ef2ff;
  --amber: #ffc94d;
  --glow: 0 0 6px rgba(0, 255, 156, .55), 0 0 18px rgba(0, 255, 156, .25);
  --glow-hot: 0 0 6px rgba(255, 46, 99, .7), 0 0 20px rgba(255, 46, 99, .35);
  --mono: "JetBrains Mono", "Fira Code", "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--g);
  font: 14px/1.55 var(--mono); letter-spacing: .02em; overflow-x: hidden;
}
::selection { background: var(--g); color: #000 }
a { color: var(--g); text-decoration: none }
button, input { font: inherit; color: inherit }

/* matrix rain + CRT layers */
#rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .32; pointer-events: none }
.crt::before {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.28) 3px);
}
.crt::after {
  content: ""; position: fixed; inset: 0; z-index: 51; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.75) 100%);
  animation: flicker 6s infinite steps(1);
}
@keyframes flicker { 0%,100% { opacity: 1 } 47% { opacity: .92 } 48% { opacity: 1 } 82% { opacity: .95 } }
.sweep {
  position: fixed; left: 0; right: 0; height: 140px; z-index: 49; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,255,156,0), rgba(0,255,156,.05), rgba(0,255,156,0));
  animation: sweep 7s linear infinite;
}
@keyframes sweep { from { top: -140px } to { top: 100% } }

/* glitch title */
.glitch { position: relative; display: inline-block; text-shadow: var(--glow) }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden;
}
.glitch::before { color: var(--hot); animation: g1 3.2s infinite linear alternate-reverse; clip-path: inset(0 0 60% 0) }
.glitch::after { color: var(--cyan); animation: g2 2.7s infinite linear alternate-reverse; clip-path: inset(55% 0 0 0) }
@keyframes g1 { 0%,86%,100% { transform: none; opacity: 0 } 88% { transform: translate(-3px,-1px); opacity: .85 } 92% { transform: translate(3px,1px); opacity: .85 } }
@keyframes g2 { 0%,90%,100% { transform: none; opacity: 0 } 92% { transform: translate(3px,1px); opacity: .85 } 95% { transform: translate(-2px,0); opacity: .85 } }

.blink { animation: blink 1s steps(1) infinite }
@keyframes blink { 50% { opacity: 0 } }
.cursor::after { content: "█"; margin-left: 2px; animation: blink 1s steps(1) infinite }

/* framed panel with corner brackets */
.frame {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  box-shadow: inset 0 0 30px rgba(0,255,156,.05), 0 0 0 1px rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
}
.frame::before, .frame::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--g); pointer-events: none;
}
.frame::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0 }
.frame::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0 }
.frame.hot { border-color: rgba(255,46,99,.35) }
.frame.hot::before, .frame.hot::after { border-color: var(--hot) }

@media (prefers-reduced-motion: reduce) {
  .sweep, #rain { display: none }
  .crt::after, .glitch::before, .glitch::after { animation: none }
}