:root {
  /* Font intent: Space Grotesk from Google Fonts; IBM Plex Mono from Google Fonts; Cormorant Garamond from Google Fonts. */
  --root-black: #030405;
  --graphite: #0A0D10;
  --charcoal: #15191E;
  --phosphor: #F4F7F2;
  --command-gray: #8A929A;
  --ghost-gray: #D7DDD6;
  --signal-green: #B7FF6A;
  --error-ember: #FF4D2E;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --scroll: 0;
}

* { box-sizing: border-box; }

html {
  background: var(--root-black);
  color: var(--phosphor);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

body {
  margin: 0;
  min-height: 520vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 8%, rgba(183, 255, 106, 0.08), transparent 22rem),
    radial-gradient(circle at 76% 47%, rgba(244, 247, 242, 0.04), transparent 30rem),
    linear-gradient(180deg, var(--root-black), var(--graphite) 46%, var(--root-black));
}

#particle-field {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}

.noise, .scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.noise {
  opacity: 0.11;
  background-image:
    radial-gradient(circle at 11% 16%, rgba(244, 247, 242, 0.14) 0 1px, transparent 1px),
    radial-gradient(circle at 74% 61%, rgba(215, 221, 214, 0.09) 0 1px, transparent 1px),
    radial-gradient(circle at 38% 82%, rgba(138, 146, 154, 0.12) 0 1px, transparent 1px);
  background-size: 37px 43px, 53px 47px, 71px 61px;
}

.scanlines {
  opacity: 0.18;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(244, 247, 242, 0.045) 4px, transparent 5px);
}

.cursor-lantern {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 62vh;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(183, 255, 106, 0.34), transparent);
  box-shadow: 0 0 22px rgba(183, 255, 106, 0.22);
  opacity: 0.28;
  transform: translate(-50%, -50%) rotate(calc(var(--scroll) * 0.05deg));
}

.terminal-cathedral { position: relative; z-index: 2; }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
  border-top: 1px solid rgba(215, 221, 214, 0.05);
}

.resolution { min-height: 120vh; }

.chamber::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at calc(50% + var(--tilt-y) * 16), calc(50% + var(--tilt-x) * 16), rgba(244, 247, 242, 0.035), transparent 30rem),
    linear-gradient(115deg, transparent 0 42%, rgba(21, 25, 30, 0.56) 43% 44%, transparent 46%);
  transform: translateZ(-80px) rotate(var(--section-rot, 0deg));
}

.boot { --section-rot: -2deg; }
.resolution { --section-rot: 2deg; }
.drift { --section-rot: -1deg; }
.unclaimed { --section-rot: 1.5deg; }
.echo { --section-rot: -2.5deg; }

.giant-title, .section-word {
  font-family: "Space Grotesk", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(5rem, 17vw, 18rem);
  line-height: 0.78;
  letter-spacing: -0.095em;
  font-weight: 700;
  color: var(--phosphor);
  text-transform: lowercase;
  margin: 0;
  text-shadow: 0 0 28px rgba(244, 247, 242, 0.12), 0 0 90px rgba(183, 255, 106, 0.055);
}

.giant-title {
  position: absolute;
  left: -3vw;
  top: 31vh;
  transform: translate3d(0, 60px, 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  opacity: 0;
  animation: titleReveal 2.6s 0.55s cubic-bezier(.2,.8,.1,1) forwards;
}

@keyframes titleReveal {
  to { opacity: 1; transform: translate3d(0, 0, 80px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
}

.boot-prompt, .corner, .terminal-plane, .edge-log, .node-ledger, .final-terminal, .void-label {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--command-gray);
  letter-spacing: 0.02em;
}

.boot-prompt {
  position: absolute;
  top: 15vh;
  left: 5vw;
  font-size: clamp(0.8rem, 1.45vw, 1.35rem);
  color: var(--ghost-gray);
  text-shadow: 0 0 18px rgba(183, 255, 106, 0.18);
}

.cursor {
  color: var(--signal-green);
  animation: cursorBlink 0.88s steps(1) infinite;
  text-shadow: 0 0 13px var(--signal-green);
}

@keyframes cursorBlink { 50% { opacity: 0; } }

.corner {
  position: absolute;
  z-index: 3;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: rgba(215, 221, 214, 0.62);
}
.top-left { top: 1.2rem; left: 1.2rem; }
.bottom-right { right: 1.2rem; bottom: 1.2rem; }
.bottom-left { left: 1.2rem; bottom: 1.2rem; }

.vertical-ruler {
  position: absolute;
  top: 7vh;
  bottom: 7vh;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(215, 221, 214, 0.32), transparent);
}
.left-ruler { left: 3vw; }
.right-ruler { right: 8vw; }

.vertical-ruler::after {
  content: "0001\A 0010\A 0011\A 0101\A 1000";
  white-space: pre;
  position: absolute;
  top: 3rem;
  left: 0.55rem;
  font: 0.6rem "IBM Plex Mono", monospace;
  color: rgba(138, 146, 154, 0.58);
}

.whisper {
  position: absolute;
  right: 7vw;
  top: 58vh;
  max-width: 28rem;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.4vw, 2.8rem);
  font-style: italic;
  font-weight: 300;
  color: rgba(215, 221, 214, 0.76);
}

.rune-cloud {
  position: absolute;
  inset: auto -5vw 6vh 35vw;
  color: rgba(138, 146, 154, 0.17);
  font-size: clamp(0.68rem, 1.2vw, 1rem);
  letter-spacing: 1.15rem;
  line-height: 2.4;
  transform: rotate(-7deg);
}

.section-word { position: absolute; z-index: 2; }
.left-crop { left: -2vw; top: 14vh; }
.right-crop { right: -8vw; top: 19vh; }
.bottom-heavy { left: -1vw; bottom: 5vh; max-width: 90vw; }
.final-word { left: 3vw; top: 10vh; }

.grid-plane, .broken-grid {
  position: absolute;
  left: 8vw;
  right: 8vw;
  top: 19vh;
  height: 60vh;
  opacity: 0.34;
  transform: rotateX(64deg) rotateZ(-8deg) translateZ(-80px);
  background:
    linear-gradient(rgba(183, 255, 106, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 221, 214, 0.16) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, transparent, black 25%, transparent 86%);
}

.terminal-stack {
  position: absolute;
  left: 32vw;
  top: 30vh;
  width: min(58vw, 860px);
  height: 65vh;
  transform-style: preserve-3d;
}

.terminal-plane {
  position: absolute;
  width: min(42rem, 80vw);
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(215, 221, 214, 0.14);
  background: linear-gradient(135deg, rgba(10, 13, 16, 0.76), rgba(21, 25, 30, 0.2));
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.45), inset 0 0 30px rgba(244, 247, 242, 0.025);
  backdrop-filter: blur(7px);
  transform: rotateX(calc(10deg + var(--tilt-x))) rotateY(calc(-14deg + var(--tilt-y))) rotateZ(-2deg) translateZ(80px);
}

.terminal-plane span, .edge-log span, .node-ledger span, .final-terminal span {
  display: block;
  margin-top: 0.65rem;
}
.terminal-plane b { color: var(--phosphor); font-weight: 600; }
.terminal-plane.secondary { left: 8vw; top: 20vh; transform: rotateX(calc(5deg + var(--tilt-x))) rotateY(calc(10deg + var(--tilt-y))) rotateZ(2deg) translateZ(10px); }
.terminal-plane.tertiary { left: -8vw; top: 39vh; transform: rotateX(calc(13deg + var(--tilt-x))) rotateY(calc(-5deg + var(--tilt-y))) rotateZ(-4deg) translateZ(120px); }
.green { color: var(--signal-green); }
.ember { color: var(--error-ember); }

.broken-grid {
  left: -4vw;
  right: -4vw;
  top: 26vh;
  height: 80vh;
  transform: rotateX(70deg) rotateZ(6deg) translateZ(-120px);
  opacity: 0.25;
}

.node-ledger {
  position: absolute;
  left: 7vw;
  top: 43vh;
  color: rgba(244, 247, 242, 0.72);
  font-size: clamp(0.82rem, 1.2vw, 1.1rem);
  transform: rotate(-3deg);
}

.lower { left: 10vw; right: auto; top: auto; bottom: 13vh; }

.edge-log {
  position: absolute;
  top: 10vh;
  right: 2vw;
  width: min(26rem, 45vw);
  padding-right: 2rem;
  text-align: right;
  color: rgba(138, 146, 154, 0.88);
}

.void-label {
  position: absolute;
  left: 7vw;
  top: 18vh;
  color: rgba(183, 255, 106, 0.78);
  font-size: clamp(0.75rem, 1.1vw, 1rem);
  text-transform: uppercase;
}

.echo-ring {
  position: absolute;
  width: min(72vw, 820px);
  aspect-ratio: 1;
  right: -9vw;
  top: 8vh;
  border-radius: 50%;
  border: 1px solid rgba(183, 255, 106, 0.23);
  box-shadow: inset 0 0 80px rgba(183, 255, 106, 0.05), 0 0 70px rgba(244, 247, 242, 0.06);
  transform: rotateX(70deg) rotateZ(calc(var(--scroll) * 0.03deg));
}

.final-terminal {
  position: absolute;
  left: 10vw;
  bottom: 15vh;
  width: min(52rem, 78vw);
  padding: 1.5rem 1.7rem;
  border-left: 1px solid rgba(183, 255, 106, 0.38);
  background: linear-gradient(90deg, rgba(183, 255, 106, 0.05), transparent);
  color: var(--ghost-gray);
  font-size: clamp(0.9rem, 1.35vw, 1.25rem);
}

.prompt-line { color: var(--phosphor); }
.final-whisper { top: 48vh; right: 12vw; }

@media (max-width: 760px) {
  .giant-title { top: 36vh; }
  .terminal-stack { left: 8vw; top: 34vh; width: 88vw; }
  .terminal-plane.secondary, .terminal-plane.tertiary { left: 0; }
  .edge-log { width: 74vw; right: 5vw; }
  .right-crop { right: -28vw; }
  .whisper { left: 8vw; right: 8vw; }
}