:root {
  color-scheme: dark;
  --ink: #eef4ef;
  --muted: #91a19a;
  --paper: #0a1014;
  --panel: #10181d;
  --line: rgba(217, 237, 226, 0.15);
  --acid: #b8f44a;
  --aqua: #68d6c1;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(104, 214, 193, 0.08), transparent 25rem),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 44px 44px, 44px 44px, auto;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}
body::before {
  background: linear-gradient(90deg, var(--acid), var(--aqua));
  content: "";
  height: 3px;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}
a { color: inherit; }
.skip-link { background: var(--acid); color: #111; left: 1rem; padding: 0.6rem 1rem; position: fixed; top: -5rem; z-index: 20; }
.skip-link:focus { top: 1rem; }
.site-header, main, footer { margin-inline: auto; max-width: var(--max); width: calc(100% - 3rem); }
.site-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 1.65rem 0; }
.brand { align-items: center; display: inline-flex; font-size: 0.98rem; font-weight: 720; gap: 0.75rem; letter-spacing: 0.11em; text-decoration: none; text-transform: uppercase; }
.brand-mark { fill: none; height: 30px; stroke: var(--acid); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 30px; }
.signal { align-items: center; color: var(--muted); display: flex; font-family: ui-monospace, "Cascadia Code", monospace; font-size: 0.7rem; gap: 0.6rem; letter-spacing: 0.12em; margin: 0; text-transform: uppercase; }
.signal span { background: var(--acid); border-radius: 50%; box-shadow: 0 0 14px var(--acid); height: 7px; width: 7px; }
.hero { align-items: center; display: grid; gap: 5vw; grid-template-columns: 1.05fr 0.95fr; min-height: 730px; padding: 5rem 0 6rem; }
.hero > * { min-width: 0; }
.eyebrow, .card-index, .card-status { color: var(--aqua); font-family: ui-monospace, "Cascadia Code", monospace; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; }
h1 { font-size: clamp(3.6rem, 7vw, 6.9rem); font-weight: 650; letter-spacing: -0.065em; line-height: 0.88; margin: 1.7rem 0 2rem; }
h1 em { color: var(--acid); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.lede { color: #bac7c0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.65; margin: 0 0 2rem; max-width: 36rem; }
.text-link { border-bottom: 1px solid var(--acid); display: inline-flex; font-size: 0.76rem; font-weight: 700; gap: 1.4rem; letter-spacing: 0.12em; padding: 0.45rem 0; text-decoration: none; text-transform: uppercase; transition: color 160ms ease, gap 160ms ease; }
.text-link:hover, .text-link:focus-visible { color: var(--acid); gap: 1.8rem; }
.orbital { aspect-ratio: 1; margin: auto; max-width: 480px; position: relative; width: 100%; }
.core { align-items: center; background: radial-gradient(circle at 35% 30%, #26343a, #10171b 68%); border: 1px solid rgba(184, 244, 74, 0.55); border-radius: 50%; box-shadow: inset 0 0 55px rgba(104, 214, 193, 0.08), 0 0 70px rgba(104, 214, 193, 0.05); display: flex; flex-direction: column; height: 44%; justify-content: center; left: 28%; letter-spacing: 0.16em; position: absolute; top: 28%; width: 44%; }
.core span { color: var(--muted); font-size: 0.67rem; }
.core strong { font-size: clamp(1.25rem, 3vw, 2rem); margin: 0.2rem 0 1rem; }
.core small { color: var(--acid); font: 0.58rem ui-monospace, monospace; }
.orbit { border: 1px solid var(--line); border-radius: 50%; inset: 9%; position: absolute; }
.orbit::before, .orbit::after { background: var(--paper); color: var(--muted); content: "+"; font: 0.7rem ui-monospace, monospace; padding: 0.2rem; position: absolute; }
.orbit::before { left: 48%; top: -0.65rem; }
.orbit::after { bottom: -0.65rem; right: 48%; }
.orbit i { background: var(--acid); border-radius: 50%; box-shadow: 0 0 14px var(--acid); height: 8px; left: 8%; position: absolute; top: 20%; width: 8px; }
.orbit-one { animation: spin 34s linear infinite; }
.orbit-two { animation: spin-reverse 26s linear infinite; inset: 19%; transform: rotate(63deg); }
.orbit-two i { background: var(--aqua); box-shadow: 0 0 14px var(--aqua); height: 6px; width: 6px; }
.orbit-three { border-style: dashed; inset: 1%; transform: rotate(-18deg); }
.orbit-three i { height: 4px; left: 77%; top: 7%; width: 4px; }
.coordinate { color: var(--muted); font: 0.58rem ui-monospace, monospace; letter-spacing: 0.12em; position: absolute; }
.coordinate-a { left: 2%; top: 48%; transform: rotate(-90deg); }
.coordinate-b { bottom: 5%; right: 11%; }
.experiments { padding: 5rem 0 7rem; }
.section-heading { align-items: end; display: grid; gap: 2rem; grid-template-columns: 0.7fr 1.35fr 1fr; margin-bottom: 3rem; }
.section-heading > * { margin: 0; }
.section-heading h2 { font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -0.045em; line-height: 1; }
.section-heading > p:last-child { color: var(--muted); line-height: 1.6; }
.cards { border-left: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
.card { background: rgba(16, 24, 29, 0.72); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; flex-direction: column; min-height: 320px; padding: 2rem; transition: background 180ms ease, transform 180ms ease; }
.card:hover { background: #142027; transform: translateY(-4px); }
.card h3 { font-size: 1.6rem; letter-spacing: -0.035em; margin: 3rem 0 1rem; }
.card > p:not(.card-index) { color: var(--muted); line-height: 1.65; margin: 0; }
.card-status { color: var(--acid); margin-top: auto; padding-top: 2rem; }
.manifesto { align-items: center; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; gap: 3rem; justify-content: space-between; padding: 4rem 0; }
.manifesto p { font-family: Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.8rem); font-style: italic; margin: 0; }
.manifesto svg { fill: none; max-width: 180px; stroke: var(--acid); stroke-width: 1.3; width: 30%; }
footer { color: var(--muted); display: flex; font: 0.66rem ui-monospace, monospace; justify-content: space-between; letter-spacing: 0.08em; padding: 2.5rem 0 4rem; text-transform: uppercase; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-297deg); } }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 4rem; }
  .orbital { max-width: 390px; }
  .section-heading { align-items: start; grid-template-columns: 1fr; gap: 1rem; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 265px; }
}
@media (max-width: 520px) {
  .site-header, main, footer { width: calc(100% - 2rem); }
  .signal { font-size: 0; }
  .signal span { display: block; }
  .hero { min-height: auto; padding-bottom: 4rem; }
  h1 { font-size: clamp(3rem, 14vw, 4rem); letter-spacing: -0.075em; }
  .experiments { padding-top: 3rem; }
  .manifesto { align-items: flex-start; flex-direction: column; }
  .manifesto svg { width: 55%; }
  footer { flex-direction: column; gap: 0.5rem; }
  footer p { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orbit { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}