:root {
  --bg: #000000;
  --fg: #e9ffe9;
  --dim: #8fae8f;
  --accent: #39ff6a;
  --border: #2b3b2b;
  --font: 'Space Mono', 'Courier New', ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6vh 5vw 4vh;
  position: relative;
  overflow-x: hidden;
  letter-spacing: 0.02em;
}

/* subtle CRT scanline overlay */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* faint static noise flicker */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: flicker 0.4s steps(2) infinite;
}

@keyframes flicker {
  0% { opacity: 0.03; }
  50% { opacity: 0.06; }
  100% { opacity: 0.03; }
}

.wrap {
  max-width: 720px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
  position: relative;
  z-index: 10;
}

/* image */
.media {
  position: relative;
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--border);
  filter: grayscale(1) contrast(1.15) brightness(0.85);
  outline: 1px solid rgba(57, 255, 106, 0.15);
  outline-offset: 4px;
}

.media-img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: luminosity;
  opacity: 0.92;
}

.media-frame {
  position: absolute;
  inset: -4px;
  pointer-events: none;
}

.corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  opacity: 0.8;
}

.corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* headline */
.headline {
  font-size: clamp(1.6rem, 5.5vw, 2.8rem);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  text-align: left;
  line-height: 1.2;
  text-shadow: 0 0 12px rgba(57, 255, 106, 0.35);
}

.prompt {
  color: var(--accent);
  margin-right: 0.4em;
}

.cursor {
  display: inline-block;
  margin-left: 0.15em;
  color: var(--accent);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* body copy */
.body-text {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  text-align: left;
  width: 100%;
}

.body-text p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--dim);
  border-left: 3px solid var(--border);
  padding-left: 1rem;
}

.domain {
  color: var(--fg);
  font-weight: 700;
}

.tagline {
  color: var(--accent) !important;
  font-weight: 700;
  text-transform: uppercase;
  border-left-color: var(--accent) !important;
  letter-spacing: 0.05em;
}

@media (max-width: 520px) {
  .body-text p {
    font-size: 0.88rem;
  }
}