@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@700;800;900&display=swap');

:root {
  color-scheme: dark;
  --ink: #f0f2eb;
  --muted: #878d86;
  --line: rgba(240, 242, 235, 0.17);
  --green: #74f59d;
  --background: #090b0a;
}

* { box-sizing: border-box; }

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

body {
  min-height: 100svh;
  overflow: hidden;
  background: var(--background);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.ambient {
  position: fixed;
  width: 44rem;
  height: 44rem;
  left: var(--pointer-x, 72%);
  top: var(--pointer-y, 22%);
  z-index: -1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116,245,157,.08), transparent 64%);
  pointer-events: none;
  transition: left .8s cubic-bezier(.2,.8,.2,1), top .8s cubic-bezier(.2,.8,.2,1);
}

.shell {
  display: flex;
  min-height: 100svh;
  padding: clamp(1.25rem, 3vw, 2.75rem);
}

.hero {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 10vh, 8rem) 0;
}

h1 {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: clamp(5rem, 17vw, 16rem);
  font-weight: 900;
  line-height: .73;
  letter-spacing: -.085em;
}

h1 span { display: block; }
h1 span:last-child { color: transparent; -webkit-text-stroke: clamp(1px, .12vw, 2px) var(--ink); }

.readout {
  width: min(100%, 31rem);
  margin-top: clamp(3rem, 7vh, 6rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.readout-row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 1fr) 1fr;
  padding: .6rem 0;
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
}

.label { color: var(--muted); }
.value { letter-spacing: .08em; }
.online { color: var(--green); }

.pulse {
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-right: .7em;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 1rem rgba(116,245,157,.75);
  animation: pulse 2.4s ease-in-out infinite;
}

.cursor {
  display: inline-block;
  width: .52em;
  height: 1em;
  margin-left: .32em;
  translate: 0 .16em;
  background: var(--muted);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: .45; transform: scale(.82); } }

@media (max-width: 640px) {
  .hero { justify-content: flex-end; padding-bottom: 12vh; }
  h1 { font-size: clamp(4.7rem, 25vw, 8rem); }
  .readout { margin-top: 3rem; }
  .readout-row { grid-template-columns: 7.6rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient { display: none; }
  .pulse, .cursor { animation: none; }
}