:root {
  --surface-void: #070809;
  --field-ground: #08090c;
  --surface-panel: #0e1013;
  --ink-primary: #e8eaed;
  --ink-secondary: #a9b0b6;
  --ink-quiet: #79828a;
  --hairline: #23272c;
  --signal-red: #e5443c;
  --signal-amber: #e0a33b;
  --signal-nominal: #6fa8c9;
  --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--surface-void);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  color: var(--ink-primary);
  background: var(--surface-void);
  font-family: var(--font-sans);
}

.field-shell,
#anomaly-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.field-shell {
  z-index: 0;
  overflow: hidden;
  background: var(--field-ground);
}

#anomaly-field {
  position: fixed;
  display: block;
  inset: 0;
}

.message-overlay {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  grid-template-rows: auto 1fr;
  padding: clamp(28px, 4vw, 60px) clamp(24px, 5vw, 76px);
  pointer-events: none;
}

.site-name {
  margin: 0;
  color: var(--ink-secondary);
  font: 600 10px/1.4 var(--font-mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px var(--surface-void);
}

.launch-message {
  align-self: center;
  max-width: 510px;
  margin: 2vh 0 0 clamp(0px, 3vw, 44px);
}

h1 {
  margin: 0;
  color: rgba(232, 234, 237, 0.92);
  font-size: clamp(46px, 6.2vw, 88px);
  font-weight: 520;
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-wrap: balance;
  text-shadow: 0 2px 26px var(--surface-void);
}

.launch-message > p {
  max-width: 37ch;
  margin: 24px 0 0;
  color: var(--ink-quiet);
  font-size: clamp(12px, 1.15vw, 14px);
  line-height: 1.7;
  text-shadow: 0 1px 14px var(--surface-void);
}

.noscript-note {
  position: fixed;
  z-index: 3;
  right: 24px;
  bottom: 24px;
  margin: 0;
  color: var(--ink-quiet);
  font: 9px/1.4 var(--font-mono);
}

.firefox-note {
  position: fixed;
  z-index: 3;
  right: clamp(18px, 3vw, 44px);
  bottom: clamp(18px, 3vw, 36px);
  max-width: 390px;
  margin: 0;
  border-left: 1px solid var(--signal-nominal);
  padding-left: 12px;
  color: var(--ink-quiet);
  font: 9px/1.6 var(--font-mono);
  letter-spacing: 0.035em;
}

.firefox-note[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .message-overlay {
    padding: 24px 22px 28px;
  }

  .launch-message {
    max-width: 330px;
    margin-left: 0;
  }

  h1 {
    font-size: clamp(45px, 15vw, 64px);
  }

  .launch-message > p {
    max-width: 30ch;
    margin-top: 20px;
    font-size: 12px;
  }

  .firefox-note {
    right: 22px;
    bottom: 24px;
    left: 22px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #anomaly-field {
    scroll-behavior: auto;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ink-secondary: #c5cbd1;
    --ink-quiet: #a2aab2;
  }

  h1 {
    color: var(--ink-primary);
  }
}