:root {
  color-scheme: dark;
  --bg: #030505;
  --fg: #d8d0bd;
  --muted: #68736e;
  --line: #14201f;
  --cyan: #4fb4bf;
  --pink: #b84a6d;
  --accent: #c2a24d;
  --violet: #7f6aa3;
  --screen: rgba(4, 6, 6, 0.95);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  overflow-x: clip;
}

html::before,
html::after {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  content: "";
}

html::before {
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(79, 180, 191, 0.018) 0 1px, rgba(184, 74, 109, 0.012) 1px 2px, transparent 2px 4px);
  opacity: 0.26;
  mix-blend-mode: screen;
  animation: crt-roll 11s linear infinite;
}

html::after {
  background:
    linear-gradient(180deg, transparent 0 47%, rgba(216, 208, 189, 0.08) 48%, rgba(79, 180, 191, 0.07) 49%, transparent 51%),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.38) 100%);
  opacity: 0.12;
  mix-blend-mode: screen;
  animation: crt-tear 8s steps(1, end) infinite;
}

body {
  margin: 0;
  min-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(4, 9, 8, 0) 0%, rgba(4, 11, 9, 0.42) 52%, rgba(1, 3, 3, 0.94) 100%),
    linear-gradient(118deg, rgba(79, 180, 191, 0.06), transparent 34%),
    linear-gradient(252deg, rgba(184, 74, 109, 0.045), transparent 42%),
    linear-gradient(180deg, #080908 0%, #050706 46%, #020303 100%),
    var(--bg);
  color: var(--fg);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 14px;
  line-height: 1.5;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

body::before {
  opacity: 0.16;
  background:
    radial-gradient(circle, rgba(216, 208, 189, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(79, 180, 191, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 180, 191, 0.018) 1px, transparent 1px);
  background-size: 28px 28px, 112px 112px, 112px 112px;
  animation: grid-drift 46s linear infinite;
}

body::after {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, transparent 0 76px, rgba(79, 180, 191, 0.018) 77px, transparent 80px),
    linear-gradient(180deg, transparent 0%, rgba(194, 162, 77, 0.05) 54%, transparent 72%),
    radial-gradient(circle at center, transparent 46%, rgba(0, 0, 0, 0.52));
  opacity: 0.34;
  mix-blend-mode: overlay;
}

button,
input {
  font: inherit;
}

.poop-snow {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  contain: strict;
  pointer-events: none;
}

.shell {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  padding: 3.5rem 2rem;
}

.shell::before,
.shell::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
}

.shell::before {
  background:
    linear-gradient(180deg, transparent 0%, rgba(79, 180, 191, 0.07) 49%, rgba(184, 74, 109, 0.06) 50%, transparent 52%),
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(255, 255, 255, 0.02) 10px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: scan-buzz 7.5s steps(1, end) infinite;
}

.shell::after {
  background:
    linear-gradient(90deg, rgba(79, 180, 191, 0.05), transparent 18%, transparent 82%, rgba(184, 74, 109, 0.045));
  opacity: 0.08;
  mix-blend-mode: screen;
  animation: voltage-hum 6s ease-in-out infinite;
}

.terminal {
  width: min(100%, 980px);
  min-height: calc(100dvh - 7rem);
  margin: 0 auto;
  position: relative;
}

.terminal::before {
  position: fixed;
  top: -5rem;
  left: -4rem;
  z-index: -1;
  width: min(52rem, 80vw);
  height: 24rem;
  background:
    linear-gradient(110deg, rgba(194, 162, 77, 0.08), transparent 44%),
    linear-gradient(245deg, rgba(184, 74, 109, 0.06), transparent 52%),
    linear-gradient(0deg, rgba(79, 180, 191, 0.055), transparent 62%);
  filter: blur(86px);
  opacity: 0.36;
  animation: hero-pulse 12s ease-in-out infinite;
  content: "";
}

.terminal::after {
  position: fixed;
  top: -18rem;
  right: -34rem;
  z-index: -1;
  width: 46rem;
  height: 46rem;
  background:
    linear-gradient(118deg, transparent 0 22%, rgba(79, 180, 191, 0.045) 38%, transparent 58%),
    linear-gradient(22deg, transparent 0 40%, rgba(194, 162, 77, 0.035) 55%, transparent 75%),
    linear-gradient(290deg, transparent 0 48%, rgba(184, 74, 109, 0.035) 64%, transparent 82%);
  filter: blur(72px);
  opacity: 0.34;
  animation: neon-orbit 34s linear infinite;
  content: "";
}

.audio-toggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(79, 180, 191, 0.08);
}

.audio-toggle[hidden] {
  display: none;
}

.audio-toggle:hover,
.audio-toggle:focus-visible {
  color: var(--cyan);
}

.audio-toggle:focus-visible {
  outline: 1px solid rgba(79, 180, 191, 0.42);
  outline-offset: 0.25rem;
}

.audio-toggle[data-audio-state="on"] {
  color: rgba(79, 180, 191, 0.86);
  text-shadow:
    0 0 10px rgba(79, 180, 191, 0.22),
    0 0 22px rgba(79, 180, 191, 0.08);
}

.audio-toggle[data-audio-state="off"] {
  color: rgba(104, 115, 110, 0.78);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.terminal-output {
  width: 100%;
  min-width: 0;
  max-width: 78ch;
  padding: 0;
  color: #f0eadc;
  line-height: 1.24;
  text-shadow: 0 0 14px rgba(216, 208, 189, 0.1);
  animation:
    text-voltage 4.8s steps(1, end) infinite,
    phosphor-flicker 6.6s steps(1, end) infinite;
}

.terminal-output p {
  margin: 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ascii {
  color: transparent;
  background: linear-gradient(92deg, var(--accent) 0%, #c98f45 30%, var(--pink) 62%, var(--cyan) 100%);
  background-size: 180% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 0.95rem;
  line-height: 1.15;
  white-space: pre;
  filter:
    drop-shadow(0 0 9px rgba(194, 162, 77, 0.22))
    drop-shadow(0 0 18px rgba(184, 74, 109, 0.1));
  animation:
    ascii-glow 8s ease-in-out infinite,
    cyber-shimmer 12s ease-in-out infinite,
    ascii-jitter 1.8s steps(2, end) infinite;
}

.boot {
  color: var(--cyan);
  text-shadow:
    0 0 10px rgba(79, 180, 191, 0.2),
    0 0 24px rgba(79, 180, 191, 0.08);
}

.rule {
  width: min(100%, 36rem);
  height: 1px;
  margin: 0.65rem 0 0.75rem;
  background: linear-gradient(90deg, rgba(79, 180, 191, 0.28), rgba(194, 162, 77, 0.16), transparent);
  box-shadow: 0 0 16px rgba(79, 180, 191, 0.08);
}

.command {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(194, 162, 77, 0.14);
}

.prompt-line {
  color: var(--cyan);
  text-shadow:
    0 0 10px rgba(79, 180, 191, 0.16),
    0 0 22px rgba(79, 180, 191, 0.06);
}

.terminal-input {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 78ch;
  gap: 0.35rem;
  margin-top: 0;
  padding: 0;
  line-height: 1.24;
  cursor: text;
  animation: phosphor-flicker 7.4s steps(1, end) infinite;
}

.prompt {
  color: var(--cyan);
  flex: none;
  white-space: nowrap;
  text-shadow:
    0 0 10px rgba(79, 180, 191, 0.2),
    0 0 24px rgba(79, 180, 191, 0.08);
  animation:
    prompt-glow 4.5s ease-in-out infinite,
    prompt-jitter 2.6s steps(2, end) infinite;
}

.command-entry {
  display: inline-flex;
  align-items: center;
  min-width: 8ch;
  max-width: 100%;
  flex: 1 1 auto;
  overflow: hidden;
}

.terminal-input input {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  color: var(--fg);
  caret-color: rgba(216, 208, 189, 0.76);
  caret-shape: block;
  text-shadow: 0 0 10px rgba(216, 208, 189, 0.08);
}

@keyframes prompt-glow {
  50% {
    text-shadow:
      0 0 12px rgba(79, 180, 191, 0.28),
      0 0 30px rgba(79, 180, 191, 0.1);
  }
}

@keyframes grid-drift {
  to {
    background-position: 28px 28px;
  }
}

@keyframes crt-roll {
  to {
    background-position: 0 24px, 4px 0;
  }
}

@keyframes scan-buzz {
  0%,
  88%,
  100% {
    opacity: 0;
    transform: translateY(-20%);
  }

  89% {
    opacity: 0.12;
    transform: translateY(8%);
  }

  90% {
    opacity: 0.04;
    transform: translateY(38%);
  }

  91% {
    opacity: 0.1;
    transform: translateY(68%);
  }
}

@keyframes crt-tear {
  0%,
  82%,
  100% {
    opacity: 0.08;
    transform: translateY(-38%);
  }

  83% {
    opacity: 0.2;
    transform: translateY(-12%);
  }

  84% {
    opacity: 0.1;
    transform: translateY(18%);
  }

  85% {
    opacity: 0.18;
    transform: translateY(44%);
  }

  86% {
    opacity: 0.07;
    transform: translateY(78%);
  }
}

@keyframes voltage-hum {
  50% {
    opacity: 0.12;
    filter: saturate(1.08);
  }
}

@keyframes text-voltage {
  0%,
  94%,
  100% {
    filter: none;
  }

  95% {
    filter: drop-shadow(1px 0 0 rgba(79, 180, 191, 0.16)) drop-shadow(-1px 0 0 rgba(184, 74, 109, 0.14));
  }

  96% {
    filter: none;
  }
}

@keyframes phosphor-flicker {
  0%,
  100% {
    opacity: 1;
  }

  37% {
    opacity: 0.986;
  }

  38% {
    opacity: 1;
  }

  71% {
    opacity: 0.992;
  }

  72% {
    opacity: 0.974;
  }

  73% {
    opacity: 1;
  }
}

@keyframes hero-pulse {
  50% {
    opacity: 0.46;
    transform: translate3d(0.8rem, -0.25rem, 0) scale(1.02);
  }
}

@keyframes neon-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ascii-glow {
  12% {
    filter:
      drop-shadow(1px 0 0 rgba(79, 180, 191, 0.24))
      drop-shadow(-1px 0 0 rgba(184, 74, 109, 0.2))
      drop-shadow(0 0 18px rgba(194, 162, 77, 0.18));
  }

  14%,
  100% {
    filter:
      drop-shadow(0 0 9px rgba(194, 162, 77, 0.22))
      drop-shadow(0 0 18px rgba(184, 74, 109, 0.1));
  }
}

@keyframes cyber-shimmer {
  50% {
    background-position: 100% 0;
  }
}

@keyframes ascii-jitter {
  0%,
  100% {
    transform: translate3d(0, 0, 0) skewX(0deg);
  }

  18% {
    transform: translate3d(0.25px, 0, 0) skewX(0deg);
  }

  19% {
    transform: translate3d(-0.45px, 0.12px, 0) skewX(-0.35deg);
  }

  20% {
    transform: translate3d(0, 0, 0) skewX(0deg);
  }

  73% {
    transform: translate3d(0.35px, -0.1px, 0) skewX(0.22deg);
  }

  74% {
    transform: translate3d(0, 0, 0) skewX(0deg);
  }
}

@keyframes prompt-jitter {
  0%,
  100% {
    transform: translateX(0);
  }

  41% {
    transform: translateX(0.18px);
  }

  42% {
    transform: translateX(-0.22px);
  }

  43% {
    transform: translateX(0);
  }
}

@media (max-width: 620px) {
  body {
    font-size: 13px;
  }

  .shell {
    min-height: 100svh;
    padding: 1.25rem 1rem;
  }

  .terminal {
    min-height: calc(100svh - 2.5rem);
  }

  .audio-toggle {
    top: 0.05rem;
    right: 0;
  }

  .ascii {
    font-size: 0.62rem;
    line-height: 1.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html::before {
    opacity: 0.2;
    animation-duration: 18s;
  }

  html::after {
    opacity: 0.08;
    animation-duration: 16s;
  }

  body::before {
    opacity: 0.11;
    animation-duration: 82s;
  }

  .shell::before {
    animation-duration: 16s;
  }

  .shell::after {
    opacity: 0.05;
    animation-duration: 12s;
  }

  .terminal::before {
    opacity: 0.26;
    animation-duration: 20s;
  }

  .terminal::after {
    opacity: 0.22;
    animation-duration: 55s;
  }

  .terminal-output {
    animation-duration: 8s, 12s;
  }

  .terminal-input {
    animation-duration: 12s;
  }

  .ascii {
    animation-duration: 12s, 20s, 4s;
  }

  .prompt {
    animation-duration: 7s, 5s;
  }

}