:root {
  color-scheme: dark;
  --background: #08090c;
  --surface: #111318;
  --surface-raised: #181a21;
  --text: #f5f5f5;
  --muted: #a2a5b0;
  --line: #2b2e38;
  --accent: #ffffff;
  --accent-ink: #0a0a0b;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--background);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  position: fixed;
  z-index: -1;
  top: -18rem;
  right: -12rem;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: var(--accent);
  content: "";
  filter: blur(120px);
  opacity: .08;
}

.shell { width: min(100% - 3rem, 72rem); margin: 0 auto; padding: 2rem 0 1.5rem; }
.platform-tag { margin: 0; color: var(--muted); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.hero { position: relative; min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: 7rem 0 5rem; }
.signal { position: absolute; top: 5.5rem; right: 3rem; width: 7rem; height: 7rem; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 0 0 1rem var(--background), 0 0 0 1.05rem var(--line), 0 0 4rem var(--accent); opacity: .75; }
.signal::after { position: absolute; inset: 1.6rem; border-radius: 50%; background: var(--accent); content: ""; opacity: .9; }
.eyebrow { margin: 0 0 1.25rem; color: var(--accent); font-size: .9rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 11ch; margin: 0; font-size: clamp(4rem, 12vw, 9rem); line-height: .88; letter-spacing: -.08em; }
h1 span { color: var(--accent); }
.intro { max-width: 34rem; margin: 2.25rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.6; }
.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 44rem; margin-top: 4rem; border-top: 1px solid var(--line); }
.details > div { padding: 1rem 1rem 0 0; }
.label { display: block; margin-bottom: .55rem; color: var(--muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
strong { font-size: .98rem; }
footer { padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.update-indicator { display: flex; gap: .75rem; max-width: 44rem; margin-top: 2rem; padding: 1rem; border: 1px solid var(--line); background: var(--surface); }
.update-dot { flex: 0 0 .65rem; width: .65rem; height: .65rem; margin-top: .35rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--accent) 14%, transparent); }
.update-meta { display: flex; flex-wrap: wrap; gap: .65rem; align-items: baseline; color: var(--muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.update-label { color: var(--text); font-weight: 700; }
.update-version { color: var(--accent); font-weight: 700; }
.update-summary { margin: .35rem 0 0; color: var(--muted); line-height: 1.5; }
.not-found-link { margin: 1.5rem 0 0; }
.not-found-link a { color: var(--accent); text-underline-offset: .2em; }
.not-found-link a:focus-visible { outline: 2px solid var(--accent); outline-offset: .25rem; }

@media (max-width: 600px) {
  .shell { width: min(100% - 2rem, 72rem); }
  .hero { min-height: 74vh; padding: 6rem 0 4rem; }
  .signal { top: 3rem; right: 1rem; width: 4.5rem; height: 4.5rem; }
  .signal::after { inset: 1rem; }
  .details { grid-template-columns: 1fr; gap: 1rem; margin-top: 3rem; }
  .details > div { padding: 0; }
}