* { box-sizing: border-box; }
:root { color-scheme: dark; background: #000; color: #a4ffb0; }
body { margin: 0; background: #000; }
main { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px; overflow: hidden; }
h1 { margin: 0; font-family: "Courier New", Courier, monospace; font-size: clamp(28px, 6.4vw, 96px); font-weight: 400; line-height: 1.25; letter-spacing: -.045em; white-space: nowrap; }
.terminal { position: relative; display: block; text-shadow: 0 0 18px #71ff8a33, 0 0 48px #71ff8a12; }
.terminal::before, .terminal::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.terminal.is-glitching::before { opacity: .65; color: #d2ffd8; clip-path: inset(26% 0 57% 0); transform: translateX(-3px); }
.terminal.is-glitching::after { opacity: .5; color: #5dff81; clip-path: inset(65% 0 20% 0); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .terminal::before, .terminal::after { display: none; }
}