:root {
  color-scheme: dark;
  --bg: #1a1f27;
  --bg-deep: #141820;
  --surface: rgba(36, 43, 55, 0.88);
  --line: #2e3643;
  --text: #eef0f3;
  --muted: #8a93a2;
  --accent: #ee6c3a;
  --accent-soft: #f39466;
  --sand: #e9c9a3;
  --font: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; background: radial-gradient(120% 80% at 50% 0%, #212834 0%, var(--bg) 55%, var(--bg-deep) 100%) fixed var(--bg); }
body {
  min-height: 100vh;
  color: var(--text); font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; font-weight: 400;
}
#space { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
a:focus-visible, button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Header ---------- */
header {
  position: absolute; inset: 0 0 auto; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: 76rem; margin: 0 auto; padding: 1.6rem 1.75rem;
}
header nav { display: flex; gap: 1.75rem; }
header nav.right { justify-content: flex-end; }
header nav a { color: var(--muted); text-decoration: none; font-size: 0.92rem; letter-spacing: 0.06em; transition: color .2s; }
header nav a:hover { color: var(--text); }
.brand { color: var(--text); text-decoration: none; font-weight: 500; font-size: 1.05rem; letter-spacing: 0.32em; text-transform: uppercase; padding-left: 0.32em; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; cursor: crosshair; }
#bh {
position: absolute; inset: 0; width: 100%; height: 100%; display: block;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 70%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 70%, transparent 100%);
}
.hero-top, .hero-bottom { position: absolute; z-index: 2; left: 0; right: 0; text-align: center; padding: 0 1.5rem; pointer-events: none; }
.hero-top { top: clamp(6.5rem, 15vh, 9rem); }
.hero-bottom { bottom: clamp(3rem, 10vh, 6rem); }
.hero a { pointer-events: auto; }
h1 {
  position: relative; z-index: 1; filter: url(#heat);
  font-size: clamp(2.4rem, 7vw, 5.25rem); font-weight: 500; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.16em; padding-left: 0.16em;
  text-shadow: 0 0 22px rgba(238, 108, 58, .28), 0 -10px 40px rgba(238, 108, 58, .18);
}
.intro { max-width: 30rem; margin: 0 auto; font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 300; color: #d6dae1; }
.cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.btn {
  display: inline-block; font: inherit; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.03em; cursor: pointer;
  color: var(--text); text-decoration: none;
  padding: 0.6rem 1.6rem; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(26, 31, 39, 0.8);
  transition: border-color .2s, color .2s, background .2s, box-shadow .3s, transform .2s;
}
.btn:hover { border-color: var(--accent); color: var(--accent-soft); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 24px rgba(238, 108, 58, 0.28); }
.btn.primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: #fff; transform: translateY(-1px); }
.feed-hint { position: absolute; z-index: 2; right: 1.75rem; bottom: 1.6rem; font-size: 0.82rem; color: var(--muted); letter-spacing: 0.03em; pointer-events: none; }

/* ---------- Sections ---------- */
.block { max-width: 76rem; margin: 0 auto; padding: 8rem 1.75rem 0; }
.block h2 {
  text-align: center; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 500; line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.16em; padding-left: 0.16em;
}
.lede { margin: 1rem auto 0; max-width: 34rem; text-align: center; color: #a6aebb; font-weight: 300; font-size: 1.1rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.6rem 1.75rem; }
.panel h3 { font-size: 1.35rem; font-weight: 500; line-height: 1.25; letter-spacing: 0.02em; }

/* Orbit */
.orbit-wrap { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.system { position: relative; aspect-ratio: 16 / 10; }
.system::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 90%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(238, 108, 58, 0.13), rgba(238, 108, 58, 0.05) 55%, transparent);
  animation: glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse { 50% { opacity: 0.75; } }
@media (prefers-reduced-motion: reduce) { .system::before { animation: none; } }
.sys-fx { position: absolute; inset: -6%; width: 112%; height: 112%; pointer-events: none; }
.ring { position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(138, 147, 162, 0.22); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.sun {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  width: 78px; height: 78px; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle at 30% 34%, #c4552b 0 7%, transparent 8%),
    radial-gradient(circle at 62% 62%, #c4552b 0 9%, transparent 10%),
    radial-gradient(circle at 70% 28%, #d8693c 0 5%, transparent 6%),
    radial-gradient(circle at 40% 72%, #d8693c 0 5%, transparent 6%),
    linear-gradient(160deg, #f6995f, #e9643a 55%, #c84f2a);
  box-shadow: inset -14px -10px 0 rgba(20, 24, 32, 0.32), 0 0 60px rgba(238, 108, 58, 0.35);
}
.planet {
  position: absolute; left: 0; top: 0; padding: 0; border: 0; cursor: pointer;
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; background: var(--c);
  box-shadow: inset calc(var(--s) * -0.22) calc(var(--s) * -0.14) 0 rgba(20, 24, 32, 0.35);
  transition: filter .2s;
}
.planet:hover { filter: brightness(1.12); }
.planet.banded { background: repeating-linear-gradient(170deg, var(--c) 0 14%, color-mix(in srgb, var(--c) 70%, #fff) 14% 22%, color-mix(in srgb, var(--c) 75%, #000) 22% 30%); }
.planet.cratered { background: radial-gradient(circle at 35% 40%, color-mix(in srgb, var(--c) 70%, #000) 0 12%, transparent 13%), radial-gradient(circle at 65% 65%, color-mix(in srgb, var(--c) 70%, #000) 0 9%, transparent 10%), var(--c); }
.planet.ringed::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 210%; height: 46%;
  transform: translate(-50%, -50%) rotate(-16deg);
  border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c) 80%, #fff);
  opacity: 0.85; pointer-events: none;
}
.planet span {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.55rem;
  white-space: nowrap; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--muted); pointer-events: none;
}
.planet.active { outline: 1.5px solid var(--text); outline-offset: 6px; }
.planet.active span { color: var(--text); }
.detail p { margin-top: 0.6rem; color: var(--muted); }
.detail .tag { margin-top: 1rem; font-size: 0.85rem; color: var(--accent-soft); letter-spacing: 0.03em; }
.detail .btn { margin-top: 1.4rem; }

/* Vault graph */
.graph-wrap { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 1.25rem; }
.graph {
  position: relative; height: clamp(440px, 70vh, 660px);
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(127, 151, 184, 0.13), transparent 55%),
    radial-gradient(ellipse at 82% 78%, rgba(238, 108, 58, 0.09), transparent 50%),
    radial-gradient(ellipse at 50% 45%, rgba(40, 47, 59, 0.92), rgba(20, 24, 32, 0.94) 75%);
  touch-action: none; cursor: grab;
}
.graph.dragging { cursor: grabbing; }
#graph { width: 100%; height: 100%; display: block; }
.graph-tools { position: absolute; top: 0.85rem; left: 0.85rem; right: 0.85rem; display: flex; gap: 0.5rem; align-items: center; pointer-events: none; }
.graph-tools > * { pointer-events: auto; }
.graph-tools input {
  font: inherit; font-size: 0.9rem; color: var(--text);
  background: rgba(20, 24, 32, 0.8); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.4rem 1rem; width: min(15rem, 55%);
}
.zoom { margin-left: auto; display: flex; gap: 0.35rem; }
.zoom button {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(20, 24, 32, 0.8); color: var(--text); font: inherit; font-weight: 500; cursor: pointer;
}
.zoom button:hover { border-color: var(--accent); color: var(--accent-soft); }
.graph-hint { position: absolute; left: 1rem; bottom: 0.8rem; font-size: 0.8rem; color: var(--muted); pointer-events: none; }
.side { display: flex; flex-direction: column; gap: 1.25rem; }
.legend { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.85rem; }
.legend button {
  display: flex; align-items: center; gap: 0.65rem; text-align: left; cursor: pointer;
  font: inherit; font-size: 0.95rem; color: var(--text); background: none; border: 0; padding: 0.2rem 0;
}
.legend button[aria-pressed="false"] { opacity: 0.38; }
.legend i { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--c); flex: none; box-shadow: inset -2px -2px 0 rgba(20, 24, 32, 0.3); }
.legend em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 0.85rem; }
.side h3 { font-size: 1.1rem; }
.side .sub { color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }
#noteLinks { list-style: none; padding: 0; margin-top: 0.75rem; max-height: 14rem; overflow-y: auto; }
#noteLinks button { font: inherit; font-size: 0.92rem; background: none; border: 0; padding: 0.18rem 0; cursor: pointer; text-align: left; }
#noteLinks button:hover { text-decoration: underline; }

/* Signal */
.signal-grid { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
#wave { width: 100%; height: 72px; display: block; margin-bottom: 1rem; }
textarea {
  width: 100%; min-height: 130px; resize: vertical;
  font: inherit; color: var(--text); background: rgba(20, 24, 32, 0.7);
  border: 1px solid var(--line); border-radius: 14px; padding: 0.9rem 1rem;
}
textarea::placeholder { color: #5f6878; }
.send-row { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
#sigStatus { color: var(--muted); font-size: 0.95rem; }
.now dl { margin-top: 1rem; display: grid; grid-template-columns: max-content 1fr; gap: 0.55rem 1.5rem; }
.now dt { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Footer */
footer {
  max-width: 76rem; margin: 8rem auto 0; padding: 2rem 1.75rem 2.5rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  color: var(--muted); font-size: 0.85rem; letter-spacing: 0.03em; border-top: 1px solid var(--line);
}
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); }

@media (max-width: 860px) {
  .orbit-wrap, .signal-grid, .graph-wrap { grid-template-columns: 1fr; }
  .system { aspect-ratio: 4 / 3; }
  .sun { width: 56px; height: 56px; }
}
@media (max-width: 560px) {
  header { grid-template-columns: 1fr auto; }
  header nav.left { display: none; }
  .brand { justify-self: start; font-size: 0.9rem; letter-spacing: 0.24em; padding-left: 0; }
  .feed-hint { display: none; }
  .now dl { grid-template-columns: 1fr; gap: 0; }
  .now dd { margin-bottom: 0.6rem; }
}

/* Global counter inside the black hole */
.bh-count {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--r) * 0.03);
  transform-origin: 50% 100%; will-change: transform;
  text-align: center; white-space: nowrap; transition: opacity .6s;
}
.bh-count.gone { opacity: 0; }
.bh-num {
  display: block; font-size: calc(var(--r) * 0.17); font-weight: 500; line-height: 1; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff3dc 0%, #f5c66e 55%, #ee6c3a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 calc(var(--r) * 0.04) rgba(238, 108, 58, 0.45));
}
.bh-label { font-size: max(11px, calc(var(--r) * 0.06)); font-weight: 300; letter-spacing: 0.1em; color: var(--muted); }
.bh-you { font-size: max(11px, calc(var(--r) * 0.07)); color: var(--accent-soft); min-height: 1.3em; }
.bh-count.no-global .bh-num, .bh-count.no-global .bh-label { display: none; }