:root {
  --paper: #d8d1bd;
  --ink: #11100c;
  --signal: #c8372d;
  --phosphor: #d7d7c9;
  --green: #55ff6a;
  --steel: #6d716c;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--phosphor);
  background:
    radial-gradient(circle at 50% 42%, rgba(210, 210, 190, 0.12), transparent 34rem),
    linear-gradient(120deg, #050504, #181815 42%, #050504);
  font-family: Inter, system-ui, sans-serif;
}

button,
a {
  font: inherit;
}

.audio-toggle {
  position: fixed;
  top: clamp(0.8rem, 2vw, 1.25rem);
  right: clamp(0.8rem, 2vw, 1.25rem);
  z-index: 12;
  border: 1px solid rgba(216, 209, 189, 0.46);
  border-radius: 4px;
  padding: 0.58rem 0.72rem;
  color: rgba(246, 238, 214, 0.88);
  background: rgba(10, 10, 8, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  cursor: pointer;
  backdrop-filter: blur(7px);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.audio-toggle:hover,
.audio-toggle[aria-pressed="true"] {
  border-color: rgba(200, 55, 45, 0.72);
  color: #f6eed6;
  background: rgba(70, 20, 18, 0.78);
}

.crt,
.static {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.crt {
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 50%, rgba(0, 0, 0, 0.16) 50%) 0 0 / 100% 4px,
    radial-gradient(ellipse at center, transparent 54%, rgba(0, 0, 0, 0.55) 100%);
  mix-blend-mode: overlay;
}

.static {
  opacity: 0.18;
  background-image:
    repeating-radial-gradient(circle at 15% 20%, rgba(255,255,255,.22) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 8px);
  animation: staticShift 0.18s infinite steps(2);
}

.site-shell {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}

.intro,
.lab {
  min-height: 100vh;
  display: none;
  place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
}

.intro.active,
.lab.active {
  display: grid;
}

.tv-frame {
  width: min(1060px, 100%);
  height: min(680px, calc(100vh - 4rem));
  border: 18px solid #111;
  border-radius: 26px;
  padding: clamp(1.4rem, 4vw, 4.5rem);
  position: relative;
  display: grid;
  align-content: center;
  gap: 2rem;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) -60% 0 / 40% 100% no-repeat,
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.1), transparent 34rem),
    #11110f;
  box-shadow:
    0 0 0 6px #282821,
    0 24px 80px rgba(0,0,0,.76),
    inset 0 0 60px rgba(0,0,0,.9);
  animation: tubeGlow 4s infinite, scanSweep 3.5s infinite;
}

.signal-code {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  top: clamp(1rem, 3vw, 1.6rem);
  color: rgba(215, 215, 201, 0.62);
  font: 700 0.76rem/1 Inter, sans-serif;
  letter-spacing: 0.16em;
}

.type-line {
  min-height: 10.5em;
  margin: 0;
  color: #eeeedf;
  text-shadow: 0 0 12px rgba(210, 210, 190, 0.35);
  white-space: pre-line;
  font: clamp(0.98rem, 1.9vw, 1.82rem)/1.56 "Special Elite", ui-monospace, monospace;
}

.type-line::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.92em;
  margin-left: 0.14em;
  vertical-align: -0.12em;
  background: var(--phosphor);
  animation: cursor 0.72s infinite;
}

.enter-button {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.35rem;
  border: 1px solid rgba(216, 209, 189, 0.72);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  color: #f6eed6;
  background: rgba(159, 27, 23, 0.82);
  box-shadow: 0 0 30px rgba(200, 55, 45, 0.34);
  letter-spacing: 0.12em;
  font-weight: 900;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease, background 0.2s ease;
}

.enter-button.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.enter-button:hover {
  background: #d13f34;
}

.lab {
  align-content: start;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  padding-bottom: 8.5rem;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.72)),
    radial-gradient(circle at 20% 12%, rgba(200, 55, 45, 0.12), transparent 20rem);
}

.lab-header {
  width: min(1180px, 100%);
  padding-top: clamp(1rem, 3vw, 2.4rem);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.5rem;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.75));
}

.stamp {
  width: fit-content;
  border: 3px solid var(--signal);
  border-radius: 3px;
  padding: 0.25rem 0.55rem;
  color: var(--signal);
  transform: rotate(-4deg);
  font-family: "Special Elite", monospace;
  font-size: clamp(0.88rem, 1.5vw, 1.18rem);
}

.lab h1 {
  margin: 0;
  color: #ece4cf;
  font-family: "Stalinist One", Inter, sans-serif;
  font-size: clamp(2.2rem, 8vw, 7.25rem);
  line-height: 1;
  text-shadow:
    2px 0 rgba(200, 55, 45, 0.62),
    -2px 0 rgba(85, 255, 106, 0.24),
    0 0 32px rgba(255,255,255,.13);
}

.lab-header p {
  margin: 0;
  max-width: 100%;
  color: rgba(236, 228, 207, 0.72);
  font: 700 clamp(0.72rem, 1.8vw, 0.94rem)/1.4 Inter, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.dossier-wall {
  width: min(1200px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.4rem);
  perspective: 1000px;
}

.dossier-card {
  margin: 0;
  aspect-ratio: 16 / 11.5;
  overflow: hidden;
  border: 1px solid rgba(216, 209, 189, 0.42);
  border-radius: 4px;
  background: #15130f;
  box-shadow: 0 18px 54px rgba(0,0,0,.6);
  opacity: 0;
  transform: translateY(24px) rotate(var(--tilt, -1deg));
  animation: dossierIn 0.8s ease forwards, dossierFlicker 4.5s infinite steps(2);
}

.dossier-card:nth-child(1) {
  --tilt: -2deg;
  animation-delay: 0.1s, 1.1s;
}

.dossier-card:nth-child(2) {
  --tilt: 1deg;
  animation-delay: 0.55s, 1.6s;
}

.dossier-card:nth-child(3) {
  --tilt: -0.5deg;
  animation-delay: 1s, 2.1s;
}

.dossier-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(0.38) contrast(1.08) brightness(0.9);
}

.link-dock {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 1.8rem);
  width: min(760px, calc(100% - 2rem));
  transform: translateX(-50%);
  z-index: 11;
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.62fr;
  gap: 0.65rem;
}

.dock-button {
  min-height: 54px;
  border: 1px solid rgba(216, 209, 189, 0.48);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  color: #f5ecd0;
  background: rgba(12, 12, 10, 0.76);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.dock-button:hover {
  transform: translateY(-2px);
  border-color: var(--signal);
  background: rgba(70, 20, 18, 0.88);
}

.brand-logo {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

.pump-logo {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 8px rgba(85,255,106,.3));
}

.dex-logo {
  width: min(172px, 76%);
  height: 34px;
  filter: drop-shadow(0 0 8px rgba(245, 236, 208, 0.12));
}

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

.x-link {
  font-size: 1.25rem;
}

@keyframes cursor {
  0%,
  48% {
    opacity: 1;
  }
  49%,
  100% {
    opacity: 0;
  }
}

@keyframes staticShift {
  to {
    transform: translate3d(-3px, 2px, 0);
  }
}

@keyframes tubeGlow {
  0%,
  100% {
    filter: brightness(1);
  }
  46% {
    filter: brightness(0.87);
  }
  48% {
    filter: brightness(1.22);
  }
  52% {
    filter: brightness(0.92);
  }
}

@keyframes scanSweep {
  0% {
    background-position: -60% 0, center, center;
  }
  100% {
    background-position: 180% 0, center, center;
  }
}

@keyframes dossierIn {
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--tilt, 0deg));
  }
}

@keyframes dossierFlicker {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(0.9) contrast(1.12);
  }
}

@media (max-width: 880px) {
  .dossier-wall {
    grid-template-columns: 1fr;
    max-width: min(620px, calc(100vw - 2rem));
  }

  .dossier-card {
    --tilt: 0deg;
    transform: translateY(24px) rotate(0deg);
  }

  .link-dock {
    grid-template-columns: 1fr;
  }

  .lab {
    padding-bottom: 14rem;
  }
}

@media (max-width: 540px) {
  .lab h1 {
    font-size: clamp(2rem, 13vw, 3.1rem);
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .tv-frame {
    border-width: 10px;
    border-radius: 18px;
    height: 78vh;
  }

  .type-line {
    min-height: 16.5em;
  }

  .dock-button {
    min-height: 48px;
    font-size: 0.9rem;
  }
}