/* App taps are used for element picking in the shell's edit mode; suppress the
   browser's default gray tap-highlight box so the shell's own selection
   outline is the only feedback. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --void: #050409;
  --cyan: #00f2ff;
  --magenta: #ff00ff;
  --ink-dim: #8f8ba8;
  /* Orbitron via the <link> in index.html, best-effort — if it can't load,
     this falls back to a bold, wide-tracked system stack that still reads as
     "display font", not a broken font request. */
  --font-display: 'Orbitron', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--void);
  color: #fff;
  overflow: hidden;
  position: relative;
}

/* Faint neon grid receding into the dark — a cheap, GPU-friendly way to make
   an empty starter screen feel like a live system rather than a blank page. */
body::before {
  content: '';
  position: fixed;
  inset: -2px;
  background-image:
    linear-gradient(rgba(0, 242, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 242, 255, 0.07) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 90%);
  animation: grid-drift 16s linear infinite;
}

@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 42px 42px, 42px 42px; }
}

/* A slow horizontal scanline sweep — subtle, not a strobing gimmick. */
body::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  height: 140px;
  top: -140px;
  background: linear-gradient(180deg, transparent, rgba(0, 242, 255, 0.06), transparent);
  animation: scan-sweep 7s ease-in-out infinite;
}

@keyframes scan-sweep {
  0% { top: -140px; }
  100% { top: 100%; }
}

main {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem;
}

h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  color: #fff;
  text-shadow:
    0 0 10px rgba(0, 242, 255, 0.8),
    0 0 26px rgba(0, 242, 255, 0.5),
    0 0 46px rgba(255, 0, 255, 0.3);
}

#tagline {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  margin: 0 0 1.5rem;
}

/* A blinking terminal cursor after the tagline — ties the "type below to
   change this app" instruction to the terminal/HUD aesthetic. */
#tagline::after {
  content: '_';
  color: var(--cyan);
  margin-left: 2px;
  animation: caret-blink 1.1s step-end infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, #tagline::after { animation: none; }
}