/* ============================================================
   Ambient Agents  ·  ambientagents.net  ·  CogniCluster LLC
   Star-chart mission-control identity. Deep void, fleet amber,
   greenfield cyan, red-team red. System fonts only.
   ============================================================ */

:root {
  --void: #05080f;
  --void-2: #070c16;
  --panel: #0b1220;
  --panel-2: #0d1526;
  --line: #1b2942;
  --line-soft: #14203a;
  --ink: #e9eef7;
  --muted: #8b9cb5;
  --faint: #5b6b85;
  --amber: #ffb648;
  --amber-dim: #c98a2e;
  --cyan: #4fd8c4;
  --cyan-dim: #2b8d80;
  --red: #ff5d5d;
  --red-dim: #a63b3b;
  --blue: #6ea8ff;
  --sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}
::selection { background: rgba(255, 182, 72, 0.28); }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- starfield ---------- */
#stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---------- shared layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
section { position: relative; z-index: 1; padding: 110px 0 90px; }
section + section { border-top: 1px solid var(--line-soft); }

.act-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}
.act-label::before {
  content: "";
  width: 22px; height: 22px;
  background: var(--amber);
  -webkit-mask: url("assets/synty/sprites/Crests/SPR_SciFiMenus_Crest_Chevron_02.png") center / contain no-repeat;
  mask: url("assets/synty/sprites/Crests/SPR_SciFiMenus_Crest_Chevron_02.png") center / contain no-repeat;
  flex: none;
}
h2 {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 850;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0 0 18px;
}
h3 { font-size: 21px; font-weight: 750; margin: 0 0 10px; }
.lede { font-size: 19px; color: #c3cede; max-width: 62ch; }
.lede strong, p strong { color: var(--ink); }
p { color: #b6c2d4; max-width: 68ch; }
.dim { color: var(--muted); }
.small { font-size: 14.5px; }

/* mono chips */
.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
  background: rgba(11, 18, 32, 0.7);
  white-space: nowrap;
}
.chip.amber { color: var(--amber); border-color: rgba(255, 182, 72, 0.4); }
.chip.cyan  { color: var(--cyan);  border-color: rgba(79, 216, 196, 0.4); }
.chip.red   { color: var(--red);   border-color: rgba(255, 93, 93, 0.4); }
.chip.blue  { color: var(--blue);  border-color: rgba(110, 168, 255, 0.4); }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* panel with Synty corner brackets */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 26px 28px;
}
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  background: var(--amber);
  opacity: 0.85;
  -webkit-mask: url("assets/synty/sprites/General/SPR_SciFiMenus_Indicator_Line_Corner_01.png") center / contain no-repeat;
  mask: url("assets/synty/sprites/General/SPR_SciFiMenus_Indicator_Line_Corner_01.png") center / contain no-repeat;
  pointer-events: none;
}
.panel::before { top: -4px; left: -4px; }
.panel::after  { bottom: -4px; right: -4px; transform: rotate(180deg); }
.panel.cyan::before, .panel.cyan::after { background: var(--cyan); }
.panel.red::before,  .panel.red::after  { background: var(--red); }
.panel.plain::before, .panel.plain::after { display: none; }

/* reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
  transition-delay: var(--d, 0s);
}
.in-view [data-reveal], [data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* ---------- nav ---------- */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(5, 8, 15, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.brand {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
  white-space: nowrap;
}
.brand b { color: var(--amber); font-weight: 700; }
.brand:hover { text-decoration: none; }
.nav-links { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.nav-links a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.cta-btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #10131a !important;
  background: var(--amber);
  padding: 9px 18px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  font-weight: 700;
}
.cta-btn:hover { background: #ffc670; text-decoration: none !important; }

/* ---------- hero ---------- */
#hero {
  padding: 150px 0 70px;
  border-top: none;
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
#c-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#c-hero.ready { opacity: 1; }
.hero-copy { position: relative; z-index: 2; }
#hero::after {
  /* readability scrim under the copy, over the 3D */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(5,8,15,0.82) 0%, rgba(5,8,15,0.45) 46%, rgba(5,8,15,0.05) 78%);
  pointer-events: none;
}
.hero-crest {
  width: 74px; height: 74px;
  margin-bottom: 26px;
  background: var(--amber);
  -webkit-mask: url("assets/synty/sprites/Crests/SPR_SciFiMenus_Crest_Wings_01.png") center / contain no-repeat;
  mask: url("assets/synty/sprites/Crests/SPR_SciFiMenus_Crest_Wings_01.png") center / contain no-repeat;
}
#hero h1 {
  font-size: clamp(44px, 7vw, 84px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0 0 26px;
  max-width: 13ch;
}
#hero h1 em { font-style: normal; color: var(--amber); }
.hero-sub { font-size: clamp(18px, 2vw, 21px); color: #c3cede; max-width: 58ch; margin-bottom: 24px; }
.hero-intro {
  max-width: 68ch;
  margin: 0 0 34px;
  color: #aebbd0;
  font-size: 16.5px;
}
.hero-intro p { margin: 0 0 15px; }
.hero-intro p:last-child { margin-bottom: 0; }
.hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ghost-btn {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 9px 18px;
  border-radius: 3px;
  background: transparent;
}
.ghost-btn:hover { border-color: var(--amber); color: var(--amber); text-decoration: none; }
.status-ribbon {
  margin-top: 46px;
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-scene { margin-top: 40px; }
.hero-scene svg { width: 100%; height: auto; display: block; }

/* ---------- legend ---------- */
#legend { padding: 60px 0; }
.legend-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 26px;
}
.legend-item {
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: rgba(11, 18, 32, 0.6);
  padding: 14px 14px 12px;
}
.legend-item svg { width: 46px; height: 30px; display: block; margin-bottom: 8px; }
.legend-item .m {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
}
.legend-item .s { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

/* ---------- 3D scene panels ---------- */
.scene3d {
  position: relative;
  margin-top: 44px;
  height: 460px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(130% 150% at 50% 0%, rgba(10, 17, 34, 0.55) 0%, rgba(7, 12, 22, 0.8) 70%),
    url("assets/site/backdrop-station.jpg") center / cover;
}
#durable .scene3d {
  /* pure void: the route line, recorder, and planet need the dark */
  background: radial-gradient(130% 150% at 50% 0%, #0a1122 0%, var(--void-2) 70%);
}
.scene3d canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 1s ease;
}
.scene3d canvas.ready { opacity: 1; }
.scene3d canvas.failed { display: none; }
.overlay-label {
  position: absolute;
  z-index: 3;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: rgba(5, 8, 15, 0.72);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 10px;
  pointer-events: none;
}
.overlay-label.amber { color: var(--amber); border-color: rgba(255, 182, 72, 0.45); }
.overlay-label.cyan  { color: var(--cyan);  border-color: rgba(79, 216, 196, 0.45); }
.overlay-label.red   { color: var(--red);   border-color: rgba(255, 93, 93, 0.45); }

/* CTA scene: squadron behind the signup panel */
.cta-scene {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  padding: 56px 40px;
  background: radial-gradient(120% 150% at 50% 10%, #0a1122 0%, var(--void-2) 75%);
}
.cta-scene canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 1s ease;
}
.cta-scene canvas.ready { opacity: 0.9; }
.cta-scene canvas.failed { display: none; }
.cta-scene .signup-panel {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 0 auto 0 4%;
  background: rgba(9, 15, 28, 0.88);
  backdrop-filter: blur(4px);
}
@media (max-width: 1020px) {
  .cta-scene .signup-panel { margin: 0 auto; }
}
.no-webgl .scene3d canvas, .no-webgl #c-hero, .no-webgl .cta-scene canvas { display: none; }

/* ---------- scene containers ---------- */
.scene {
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: radial-gradient(120% 140% at 50% 0%, #0a1122 0%, var(--void-2) 70%);
  overflow: hidden;
  position: relative;
}
.scene svg { width: 100%; height: auto; display: block; }
.scene-caption {
  border-top: 1px solid var(--line-soft);
  padding: 14px 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(5, 8, 15, 0.55);
}

/* scene svg element classes */
.wp { fill: none; stroke: var(--faint); stroke-width: 1.4; }
.wp.active { stroke: var(--amber); }
.wp.done { fill: rgba(79, 216, 196, 0.14); stroke: var(--cyan); }
.wp.bad { stroke: var(--red); stroke-dasharray: 4 3; }
.edge { fill: none; stroke: #2a3c5e; stroke-width: 1.3; }
.edge.lit { stroke: rgba(255, 182, 72, 0.55); }
.svg-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: var(--muted);
}
.svg-label.amber { fill: var(--amber); }
.svg-label.cyan { fill: var(--cyan); }
.svg-label.red { fill: var(--red); }
.svg-label.big { font-size: 13px; }

/* ---------- two-col rows ---------- */
.row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}
.row.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.row > .copy { min-width: 0; }

/* ---------- contract card ---------- */
.contract {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  color: #b6c2d4;
}
.contract .sec { color: var(--amber); letter-spacing: 0.14em; font-size: 11.5px; margin-top: 14px; }
.contract .sec:first-child { margin-top: 0; }
.contract .k { color: var(--faint); }
.contract .v { color: var(--ink); }
.contract .crit { color: var(--cyan); }
.contract .halt { color: var(--red); }

/* fuel gauge */
.gauge { margin-top: 26px; }
.gauge-track {
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #0a101d;
  position: relative;
  overflow: hidden;
}
.gauge-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan-dim), var(--amber) 70%, var(--red) 98%);
}
.in-view .gauge-fill { animation: burn 9s linear infinite; }
@keyframes burn {
  0% { width: 0; }
  55% { width: 80%; }
  62% { width: 80%; }
  88% { width: 100%; }
  100% { width: 100%; }
}
.gauge-mark {
  position: absolute; top: -5px; bottom: -5px; width: 1px;
  background: var(--amber);
}
.gauge-mark.m80 { left: 80%; }
.gauge-mark.m100 { left: calc(100% - 1px); background: var(--red); }
.gauge-legend {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--faint);
  margin-top: 6px; letter-spacing: 0.06em;
}
.gauge-events { font-family: var(--mono); font-size: 12px; margin-top: 14px; min-height: 44px; }
.gauge-events .warn { color: var(--amber); opacity: 0; }
.gauge-events .halt { color: var(--red); opacity: 0; display: block; }
.in-view .gauge-events .warn { animation: evt 9s linear infinite; }
.in-view .gauge-events .halt { animation: evt2 9s linear infinite; }
@keyframes evt  { 0%,54% { opacity: 0; } 58%,100% { opacity: 1; } }
@keyframes evt2 { 0%,87% { opacity: 0; } 91%,100% { opacity: 1; } }

/* ---------- terminal ---------- */
.term {
  background: #060a13;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  padding: 18px 20px;
  color: #b6c2d4;
  overflow-x: auto;
}
.term .ps { color: var(--faint); }
.term .cmd { color: var(--ink); }
.term .ok { color: var(--cyan); }
.term .warn { color: var(--amber); }
.term .err { color: var(--red); }
.term .out { color: var(--muted); }

/* ---------- boundary commands ---------- */
.cmd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.cmd-grid .chip { text-align: center; width: 100%; }

/* ---------- council ---------- */
.council {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
}
.council .panel { padding: 20px 22px; }
.council h4 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.council .blue-side h4 { color: var(--blue); }
.council .red-side h4 { color: var(--red); }
.council ul { margin: 0; padding-left: 18px; color: #b6c2d4; font-size: 15px; }
.council li { margin: 6px 0; }
.judge-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* ---------- voyages ---------- */
.voyage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 44px;
  min-height: 460px;
  display: flex;
  align-items: stretch;
}
.voyage .bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.5;
}
.voyage.green .bg { background-image: url("assets/site/backdrop-station.jpg"); background-position: 72% center; }
.voyage.brown .bg { background-image: url("assets/site/backdrop-wreck.jpg"); background-position: center 30%; }
.voyage .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5, 8, 15, 0.94) 0%, rgba(5, 8, 15, 0.82) 42%, rgba(5, 8, 15, 0.25) 100%);
}
.voyage .scanlines {
  position: absolute; inset: 0;
  background: url("assets/synty/sprites/FX/SPR_SciFiMenus_FX_Scanlines.png") repeat;
  background-size: 480px;
  opacity: 0.05;
  pointer-events: none;
}
.voyage .content {
  position: relative;
  z-index: 2;
  padding: 46px 48px;
  max-width: 640px;
}
.voyage h3 { font-size: 26px; }
.voyage .tagline {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.voyage.green .tagline { color: var(--cyan); }
.voyage.brown .tagline { color: var(--amber); }
.voyage ol { color: #b6c2d4; padding-left: 20px; font-size: 15.5px; }
.voyage li { margin: 8px 0; }
.voyage li::marker { font-family: var(--mono); color: var(--faint); font-size: 12px; }

/* ---------- Act II · two campaigns ---------- */
.campaigns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 44px;
  align-items: stretch;
}
.campaign {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.campaign .bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.5;
}
.campaign.green .bg { background-image: url("assets/site/backdrop-station.jpg"); background-position: 72% center; }
.campaign.brown .bg { background-image: url("assets/site/backdrop-wreck.jpg"); background-position: center 30%; }
.campaign .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 8, 15, 0.92) 0%, rgba(5, 8, 15, 0.84) 46%, rgba(5, 8, 15, 0.62) 100%);
}
.campaign .scanlines {
  position: absolute; inset: 0;
  background: url("assets/synty/sprites/FX/SPR_SciFiMenus_FX_Scanlines.png") repeat;
  background-size: 480px;
  opacity: 0.05;
  pointer-events: none;
}
.campaign .content {
  position: relative;
  z-index: 2;
  padding: 40px 38px 34px;
  width: 100%;
}
.campaign h3 { font-size: 24px; margin-bottom: 8px; }
.campaign .intro { font-size: 15.5px; color: #c3cede; margin: 0; max-width: 52ch; }
.campaign.green h3 { color: var(--cyan); }
.campaign.brown h3 { color: var(--amber); }

.crail {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  counter-reset: cstep;
}
.cstep {
  counter-increment: cstep;
  position: relative;
  margin-left: 15px;
  padding: 0 0 22px 34px;
  border-left: 1px solid var(--line-soft);
  opacity: 0.22;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.cstep:last-child { border-left-color: transparent; padding-bottom: 4px; }
.cstep::before {
  content: counter(cstep);
  position: absolute;
  left: -15px;
  top: -2px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: color 0.7s ease, border-color 0.7s ease;
}
.in-view .cstep { opacity: 1; transform: none; }
.in-view .cstep::before { color: var(--amber); border-color: rgba(255, 182, 72, 0.45); }
.in-view .cstep:nth-child(1) { transition-delay: 0.15s; }
.in-view .cstep:nth-child(2) { transition-delay: 0.55s; }
.in-view .cstep:nth-child(3) { transition-delay: 0.95s; }
.in-view .cstep:nth-child(4) { transition-delay: 1.35s; }
.in-view .cstep:nth-child(5) { transition-delay: 1.75s; }
.in-view .cstep:nth-child(1)::before { transition-delay: 0.15s; }
.in-view .cstep:nth-child(2)::before { transition-delay: 0.55s; }
.in-view .cstep:nth-child(3)::before { transition-delay: 0.95s; }
.in-view .cstep:nth-child(4)::before { transition-delay: 1.35s; }
.in-view .cstep:nth-child(5)::before { transition-delay: 1.75s; }

.cline { margin: 0 0 10px; }
.cline:last-child { margin-bottom: 0; }
.cline .ck {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.cline p { margin: 0; font-size: 14px; line-height: 1.55; max-width: 52ch; }
.cline.today .ck { color: var(--faint); }
.cline.today p { color: var(--muted); }
.cline.watch .ck { color: var(--amber); }
.cline.watch p { color: #d8e0ec; }
.cline.watch {
  border-left: 2px solid rgba(255, 182, 72, 0.55);
  padding-left: 12px;
}

.converge {
  margin-top: 18px;
  border: 1px dashed rgba(255, 182, 72, 0.5);
  border-radius: 5px;
  padding: 22px 28px;
  background: rgba(11, 18, 32, 0.6);
}
.converge p {
  margin: 0;
  font-size: 16.5px;
  color: #c3cede;
  max-width: none;
}
.converge a { color: var(--amber); }

@media (max-width: 1020px) {
  .campaigns-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .campaign .content { padding: 30px 24px 26px; }
}

/* ---------- comparison ---------- */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 44px;
}
.compare-card {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  padding: 22px 24px;
}
.compare-card .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.compare-card h3 { font-size: 18px; margin: 0; }
.compare-card p { font-size: 14.5px; margin: 8px 0; max-width: none; }
.compare-card .best { color: #b6c2d4; }
.compare-card .best b, .compare-card .short b, .compare-card .move b {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}
.compare-card .best b { color: var(--cyan); }
.compare-card .short b { color: var(--red); }
.compare-card .move b { color: var(--amber); }
.holes { margin-top: 60px; }
.holes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 26px;
  counter-reset: hole;
}
.hole {
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--amber);
  border-radius: 4px;
  background: rgba(11, 18, 32, 0.6);
  padding: 16px 16px 14px;
  counter-increment: hole;
}
.hole::before {
  content: "0" counter(hole);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 8px;
}
.hole h4 { margin: 0 0 6px; font-size: 15px; }
.hole p { font-size: 13px; color: var(--muted); margin: 0; }
.honest {
  margin-top: 56px;
  border-left: 2px solid var(--cyan);
  padding: 6px 0 6px 24px;
}
.honest p { margin: 8px 0; font-size: 15.5px; }
.honest .k { color: var(--cyan); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- red-team log ---------- */
.log { margin-top: 44px; display: flex; flex-direction: column; gap: 14px; }
.log-entry {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(9, 14, 26, 0.8);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
}
.log-entry .meta { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.08em; line-height: 1.9; }
.log-entry .sev { display: block; font-weight: 700; letter-spacing: 0.14em; }
.log-entry .sev.crit { color: var(--red); }
.log-entry .sev.high { color: var(--amber); }
.log-entry h4 { margin: 0 0 6px; font-size: 16.5px; }
.log-entry p { font-size: 14.5px; margin: 4px 0; max-width: none; }
.log-entry .fix { color: #b6c2d4; }
.log-entry .fix b { color: var(--cyan); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; font-weight: 600; }
.verdict {
  margin: 40px 0;
  padding: 30px 34px;
  text-align: center;
}
.verdict blockquote {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 650;
  line-height: 1.45;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 auto;
}
.verdict blockquote em { color: var(--amber); font-style: normal; }
.verdict .src { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 14px; letter-spacing: 0.1em; }
.invariant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
  margin-top: 20px;
}
.invariant-grid .chip { width: 100%; text-align: center; white-space: normal; overflow-wrap: anywhere; }

/* ---------- alpha / status ---------- */
.status-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
}
.status-cols h4 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.status-cols .now h4 { color: var(--cyan); }
.status-cols .later h4 { color: var(--faint); }
.status-cols ul { margin: 0; padding: 0; list-style: none; }
.status-cols li {
  font-size: 14.5px;
  color: #b6c2d4;
  padding: 7px 0 7px 22px;
  position: relative;
  border-bottom: 1px dashed var(--line-soft);
}
.status-cols li:last-child { border-bottom: none; }
.status-cols .now li::before {
  content: "▸"; position: absolute; left: 2px; color: var(--cyan);
}
.status-cols .later li { color: var(--muted); }
.status-cols .later li::before {
  content: "…"; position: absolute; left: 2px; color: var(--faint);
}
.killbox {
  margin-top: 18px;
  border: 1px dashed rgba(255, 182, 72, 0.5);
  border-radius: 5px;
  padding: 18px 22px;
  font-size: 15px;
  color: #c3cede;
}
.killbox b { color: var(--amber); font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; display: block; margin-bottom: 6px; }

/* signup */
#signup { margin-top: 64px; }
.signup-panel { padding: 40px 44px; }
.signup-form { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.signup-form input[type="email"] {
  flex: 1 1 320px;
  background: #060a13;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
}
.signup-form input[type="email"]:focus { border-color: var(--amber); }
.signup-note { font-size: 13px; color: var(--faint); margin-top: 14px; font-family: var(--mono); }
.signup-msg { font-family: var(--mono); font-size: 13.5px; margin-top: 16px; display: none; }
.signup-msg.ok { color: var(--cyan); display: block; }
.signup-msg.err { color: var(--amber); display: block; }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--line-soft);
  padding: 44px 0 60px;
  position: relative;
  z-index: 1;
}
.foot-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--muted);
}
.foot-inner .col { max-width: 44ch; }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }

/* ---------- ship + scene animations ---------- */
.exhaust { animation: exhaust 0.9s ease-in-out infinite alternate; }
@keyframes exhaust { from { opacity: 0.35; } to { opacity: 0.95; } }

.drift-a { animation: drift-a 14s ease-in-out infinite alternate; }
.drift-b { animation: drift-b 17s ease-in-out infinite alternate; }
.drift-c { animation: drift-c 12s ease-in-out infinite alternate; }
@keyframes drift-a { from { transform: translate(0, 0) rotate(14deg); } to { transform: translate(60px, -26px) rotate(2deg); } }
@keyframes drift-b { from { transform: translate(0, 0) rotate(-20deg); } to { transform: translate(-48px, 30px) rotate(-6deg); } }
@keyframes drift-c { from { transform: translate(0, 0) rotate(160deg); } to { transform: translate(38px, 22px) rotate(184deg); } }

.rogue { animation: rogue 7s ease-in infinite; }
@keyframes rogue {
  0% { transform: translate(0, 0) rotate(18deg); opacity: 1; }
  72% { transform: translate(340px, 96px) rotate(24deg); opacity: 1; }
  76% { transform: translate(352px, 100px) rotate(24deg); opacity: 0; }
  100% { transform: translate(352px, 100px) rotate(24deg); opacity: 0; }
}
.impact { animation: impact 7s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes impact {
  0%, 71% { opacity: 0; transform: scale(0.4); }
  76% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(1.7); }
}

/* long-haul timeline (coordinated 20s loop) */
.lh-scout { animation: lh-scout 20s linear infinite; }
@keyframes lh-scout {
  0% { transform: translate(0, 0); }
  40% { transform: translate(690px, -36px); }
  60% { transform: translate(690px, -36px); }
  100% { transform: translate(30px, 14px); }
}
.lh-carrier1 { animation: lh-carrier1 20s linear infinite; }
@keyframes lh-carrier1 {
  0%, 42% { opacity: 1; }
  47%, 100% { opacity: 0; }
}
.lh-static { animation: lh-static 20s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes lh-static {
  0%, 41% { opacity: 0; }
  43% { opacity: 1; }
  46% { opacity: 0.5; }
  48%, 100% { opacity: 0; }
}
.lh-carrier2 { animation: lh-carrier2 20s linear infinite; }
@keyframes lh-carrier2 {
  0%, 52% { opacity: 0; }
  60%, 100% { opacity: 1; }
}
.lh-beam { animation: lh-beam 20s linear infinite; }
@keyframes lh-beam {
  0%, 53% { opacity: 0; }
  56%, 66% { opacity: 0.9; }
  70%, 100% { opacity: 0; }
}
.lh-report { animation: lh-report 20s linear infinite; }
@keyframes lh-report {
  0%, 93% { opacity: 0; }
  97%, 100% { opacity: 1; }
}

/* harbormaster loop (12s) */
.hb-good { animation: hb-good 12s linear infinite; }
@keyframes hb-good {
  0% { transform: translate(0, 0); opacity: 0; }
  6% { opacity: 1; }
  38% { transform: translate(360px, 0); opacity: 1; }
  46% { transform: translate(430px, 0); opacity: 1; }
  54%, 100% { transform: translate(470px, 0); opacity: 0; }
}
.hb-cargo { animation: hb-cargo 12s linear infinite; }
@keyframes hb-cargo {
  0%, 46% { opacity: 0; transform: translate(0, 0); }
  50% { opacity: 1; }
  62% { opacity: 1; transform: translate(126px, -20px); }
  66%, 100% { opacity: 0; transform: translate(126px, -20px); }
}
.hb-bad { animation: hb-bad 12s linear infinite; }
@keyframes hb-bad {
  0%, 48% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  54% { opacity: 1; }
  76% { transform: translate(360px, 0) rotate(0deg); opacity: 1; }
  82% { transform: translate(392px, 34px) rotate(30deg); opacity: 1; }
  94% { transform: translate(420px, 120px) rotate(38deg); opacity: 1; }
  97%, 100% { transform: translate(420px, 120px) rotate(38deg); opacity: 0; }
}
.hb-shield { animation: hb-shield 12s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes hb-shield {
  0%, 74% { opacity: 0; transform: scale(0.9); }
  79% { opacity: 1; transform: scale(1.05); }
  86%, 100% { opacity: 0; transform: scale(1.15); }
}
.hb-parked { animation: hb-parked 12s linear infinite; }
@keyframes hb-parked {
  0%, 92% { opacity: 0; }
  96%, 100% { opacity: 1; }
}

/* kill-switch squadron */
.kill-ship { transition: opacity 0.5s, filter 0.5s; }
.killed .kill-ship { opacity: 0.22; filter: grayscale(1); }
.killed .kill-ship.k1 { transition-delay: 0.1s; }
.killed .kill-ship.k2 { transition-delay: 0.3s; }
.killed .kill-ship.k3 { transition-delay: 0.5s; }
.killed .kill-ship.k0 { transition-delay: 0.9s; }
.kill-tag { opacity: 0; transition: opacity 0.4s 1.3s; font-family: var(--mono); font-size: 11px; fill: var(--red); }
.killed .kill-tag { opacity: 1; }

/* greenfield modules lighting up */
.gf-mod { opacity: 0.18; transition: opacity 0.8s; }
.in-view .gf-mod.g1 { opacity: 1; transition-delay: 0.4s; }
.in-view .gf-mod.g2 { opacity: 1; transition-delay: 1.1s; }
.in-view .gf-mod.g3 { opacity: 1; transition-delay: 1.8s; }
.in-view .gf-mod.g4 { opacity: 1; transition-delay: 2.5s; }

/* dashes flowing along supply lines */
.flow { stroke-dasharray: 6 8; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -14; } }

/* scanline sweep for survey */
.sweep { animation: sweep 6s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(300px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .gauge-fill { width: 100% !important; }
  .gauge-events .warn, .gauge-events .halt { opacity: 1 !important; }
  .cstep { opacity: 1 !important; transform: none !important; }
  .in-view .cstep::before, .cstep::before { color: var(--amber); border-color: rgba(255, 182, 72, 0.45); }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .legend-grid, .holes-grid { grid-template-columns: repeat(3, 1fr); }
  .row, .row.flip { grid-template-columns: 1fr; gap: 30px; }
  .cmd-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .chip { white-space: normal; }
  .wrap { padding: 0 20px; }
  section { padding: 76px 0 64px; }
  .nav-links a:not(.cta-btn) { display: none; }
  .nav-inner { gap: 12px; }
  nav .cta-btn { white-space: nowrap; padding: 7px 12px; font-size: 11px; }
  #hero { padding-top: 134px; min-height: auto; }
  #hero h1 {
    font-size: clamp(34px, 10vw, 42px);
    line-height: 1.08;
    max-width: 100% !important;
    overflow-wrap: break-word;
  }
  .hero-sub { font-size: 17px; max-width: 100%; }
  .hero-actions { align-items: stretch; }
  .hero-actions .ghost-btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
  .legend-grid, .holes-grid { grid-template-columns: repeat(2, 1fr); }
  .compare-grid, .council, .judge-strip, .status-cols { grid-template-columns: 1fr; }
  .log-entry { grid-template-columns: 1fr; gap: 8px; }
  .voyage .content { padding: 32px 26px; }
  .signup-panel { padding: 28px 24px; }
  .scene3d { height: 340px; }
  .cta-scene { padding: 32px 16px; }
  .overlay-label { font-size: 10px; padding: 3px 7px; }
}

/* text color utilities */
.t-amber { color: var(--amber); }
.t-ink { color: var(--ink); }

/* scene backgrounds for the kernel and dogfood stages: pure void */
#kernel .scene3d, #dogfood .scene3d {
  background: radial-gradient(130% 150% at 50% 0%, #0a1122 0%, var(--void-2) 70%);
}

/* Synty INTERFACE icon accents on cards */
.ic {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  background: var(--amber);
}
.ic.cyan { background: var(--cyan); }
.ic.i-lock { -webkit-mask: url("assets/synty/sprites/Icons_Menu/ICON_SciFiMenus_Menu_Lock_Closed_01_Stroke.png") center / contain no-repeat; mask: url("assets/synty/sprites/Icons_Menu/ICON_SciFiMenus_Menu_Lock_Closed_01_Stroke.png") center / contain no-repeat; }
.ic.i-shield { -webkit-mask: url("assets/synty/sprites/Crests/SPR_SciFiMenus_Crest_Shield_03.png") center / contain no-repeat; mask: url("assets/synty/sprites/Crests/SPR_SciFiMenus_Crest_Shield_03.png") center / contain no-repeat; }
.ic.i-diamond { -webkit-mask: url("assets/synty/sprites/General/SPR_SciFiMenus_Menu_Diamond_01.png") center / contain no-repeat; mask: url("assets/synty/sprites/General/SPR_SciFiMenus_Menu_Diamond_01.png") center / contain no-repeat; }
.ic.i-msg { -webkit-mask: url("assets/synty/sprites/Icons_Menu/ICON_SciFiMenus_Menu_Message_01_Stroke.png") center / contain no-repeat; mask: url("assets/synty/sprites/Icons_Menu/ICON_SciFiMenus_Menu_Message_01_Stroke.png") center / contain no-repeat; }
.ic.i-flag { -webkit-mask: url("assets/synty/sprites/Icons_Menu/ICON_SciFiMenus_Menu_Flag_01_Stroke.png") center / contain no-repeat; mask: url("assets/synty/sprites/Icons_Menu/ICON_SciFiMenus_Menu_Flag_01_Stroke.png") center / contain no-repeat; }
.ic.i-warn { -webkit-mask: url("assets/synty/sprites/Icons_Menu/ICON_SciFiMenus_Menu_Warning_01_Stroke.png") center / contain no-repeat; mask: url("assets/synty/sprites/Icons_Menu/ICON_SciFiMenus_Menu_Warning_01_Stroke.png") center / contain no-repeat; }

/* ---------- engineer mode toggle ---------- */
.engineer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
}
.engineer-toggle:hover { color: var(--ink); }
.engineer-toggle-frame {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  background: var(--faint);
  -webkit-mask: url("assets/synty/sprites/General/SPR_SciFiMenus_Menu_Toggle_01_Frame.png") center / contain no-repeat;
  mask: url("assets/synty/sprites/General/SPR_SciFiMenus_Menu_Toggle_01_Frame.png") center / contain no-repeat;
  transition: background 0.2s ease;
}
.engineer-toggle[aria-pressed="true"] .engineer-toggle-frame { background: var(--amber); }
.engineer-toggle[aria-pressed="true"] .engineer-toggle-label { color: var(--amber); }
@media (max-width: 760px) {
  .engineer-toggle-label { display: none; }
}

/* ---------- tech expanders (dual-layer reading) ---------- */
details.tech {
  margin-top: 30px;
  border-left: 2px solid var(--amber);
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.55) 0%, rgba(7, 12, 22, 0.4) 100%);
  border-radius: 0 4px 4px 0;
  padding: 4px 22px 4px 20px;
}
details.tech summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  padding: 14px 0;
}
details.tech summary::-webkit-details-marker { display: none; }
details.tech summary::after {
  content: "+";
  margin-left: auto;
  font-size: 15px;
  color: var(--faint);
}
details.tech[open] summary::after { content: "\2212"; }
details.tech summary .ic {
  width: 16px;
  height: 16px;
  margin-bottom: 0;
}
details.tech > *:not(summary) {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.75;
}
details.tech p, details.tech h3 { max-width: none; }
details.tech h3 {
  font-family: var(--mono);
  font-size: 14.5px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-top: 22px;
}
details.tech h3:first-of-type { margin-top: 6px; }
details.tech p { color: var(--muted); padding-bottom: 4px; }
details.tech > *:last-child { margin-bottom: 18px; }

@media print {
  details.tech {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  details.tech summary::after { content: ""; }
}

/* ---------- Act I scheduler toy ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.schedtoy {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.schedtoy-rail {
  position: absolute;
  left: 4%;
  top: 16%;
  width: 352px;
  max-width: 62%;
  height: 60px;
  background: var(--amber);
  opacity: 0.4;
  -webkit-mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Bar_Frame_01.png") center / 100% 100% no-repeat;
  mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Bar_Frame_01.png") center / 100% 100% no-repeat;
}
.schedtoy-spill {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--red);
  transform: translateY(-50%);
  opacity: 0;
}
.schedtoy-spill:nth-child(1) { left: 8%; }
.schedtoy-spill:nth-child(2) { left: 27%; }
.schedtoy-spill:nth-child(3) { left: 46%; }
.schedtoy-spill:nth-child(4) { left: 65%; }
.schedtoy-spill:nth-child(5) { left: 84%; }
.toy-ended .schedtoy-spill { animation: spill 0.5s ease forwards; }
.toy-ended .schedtoy-spill:nth-child(2) { animation-delay: 0.12s; }
.toy-ended .schedtoy-spill:nth-child(3) { animation-delay: 0.24s; }
.toy-ended .schedtoy-spill:nth-child(4) { animation-delay: 0.36s; }
.toy-ended .schedtoy-spill:nth-child(5) { animation-delay: 0.48s; }
@keyframes spill {
  from { opacity: 0; transform: translateY(-140%); }
  to { opacity: 0.9; transform: translateY(-50%); }
}
.schedtoy-queue {
  position: absolute;
  left: 4%;
  top: 16%;
  width: 352px;
  max-width: 62%;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  box-sizing: border-box;
}
.schedtoy-report {
  width: 46px;
  height: 46px;
  flex: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
}
.schedtoy-report::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--cyan);
  -webkit-mask: url("assets/synty/sprites/Icons_Menu/ICON_SciFiMenus_Menu_Message_01_Stroke.png") center / contain no-repeat;
  mask: url("assets/synty/sprites/Icons_Menu/ICON_SciFiMenus_Menu_Message_01_Stroke.png") center / contain no-repeat;
}
.schedtoy-report:hover::before { background: var(--amber); }
.schedtoy-report:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}
.schedtoy-report.applied { pointer-events: none; }
.schedtoy-report.applied::before {
  background: var(--faint);
  opacity: 0.4;
}
.schedtoy-meter {
  position: absolute;
  left: 4%;
  top: calc(16% + 66px);
  width: 352px;
  max-width: 62%;
  height: 16px;
  background: rgba(255, 182, 72, 0.14);
  -webkit-mask: url("assets/synty/sprites/General/SPR_SciFiMenus_Menu_Bar_Horizontal_01_Active.png") left center / 100% 100% no-repeat;
  mask: url("assets/synty/sprites/General/SPR_SciFiMenus_Menu_Bar_Horizontal_01_Active.png") left center / 100% 100% no-repeat;
}
.schedtoy-meter-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--amber), var(--red));
  transition: width 0.35s ease;
}
.schedtoy-prompt {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--amber);
  background: rgba(7, 12, 22, 0.82);
  border: 1px solid rgba(255, 182, 72, 0.45);
  border-radius: 4px;
  padding: 10px 16px;
  max-width: 80%;
  text-align: center;
}
.schedtoy-end {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-width: 84%;
  animation: schedtoy-fade 0.9s ease both;
}
@keyframes schedtoy-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.schedtoy-caption {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(15px, 2vw, 19px);
  letter-spacing: 0.06em;
  color: var(--ink);
  background: rgba(7, 12, 22, 0.85);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 18px;
}
.schedtoy-replay {
  width: 58px;
  height: 58px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
}
.schedtoy-replay-ic {
  position: absolute;
  inset: 0;
  background: var(--amber);
  -webkit-mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Button_Frame_01.png") center / contain no-repeat;
  mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Button_Frame_01.png") center / contain no-repeat;
}
.schedtoy-replay:hover .schedtoy-replay-ic { background: var(--cyan); }
.schedtoy-replay:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}
.toy-ended canvas {
  filter: brightness(0.45);
  transition: filter 0.8s ease;
}
.schedtoy [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .schedtoy { display: none; }
}
@media (max-width: 760px) {
  .schedtoy-rail, .schedtoy-queue, .schedtoy-meter { max-width: 88%; }
}

/* ---------- kernel control loop scrub ---------- */
.kscrub {
  border-top: 1px solid var(--line-soft);
  background: rgba(9, 15, 28, 0.85);
  padding: 16px 20px 18px;
}
.kscrub-row { display: flex; align-items: center; gap: 12px; }
.kscrub-prev, .kscrub-next {
  background: var(--panel); color: var(--amber);
  border: 1px solid var(--line); border-radius: 4px;
  width: 34px; height: 30px; font-size: 17px; line-height: 1;
  cursor: pointer; flex: none;
}
.kscrub-prev:hover, .kscrub-next:hover { border-color: var(--amber); }
.kscrub-range { flex: 1; accent-color: var(--amber); height: 6px; cursor: pointer; }
.kscrub-phase {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  color: var(--amber); margin-top: 12px; min-height: 15px;
}
.kscrub[data-phase="one"]   .kscrub-phase::after { content: "PHASE 1 OF 5"; }
.kscrub[data-phase="two"]   .kscrub-phase::after { content: "PHASE 2 OF 5"; }
.kscrub[data-phase="three"] .kscrub-phase::after { content: "PHASE 3 OF 5"; }
.kscrub[data-phase="four"]  .kscrub-phase::after { content: "PHASE 4 OF 5"; }
.kscrub[data-phase="five"]  .kscrub-phase::after { content: "PHASE 5 OF 5"; }
.kscrub-note {
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  margin-top: 4px; min-height: 20px;
}

/* Act III phase-lit overlay labels: labels gain .live in sync with the
   superseded-orders beats; the glow underline is the FX horizontal
   sprite masked in the label's own color */
.overlay-label {
  transition: filter 0.45s ease;
}
.overlay-label::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -8px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("assets/synty/sprites/FX/SPR_SciFiMenus_FX_Glow_Horizontal_01.png") center / 100% 100% no-repeat;
  mask: url("assets/synty/sprites/FX/SPR_SciFiMenus_FX_Glow_Horizontal_01.png") center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.overlay-label.live {
  filter: brightness(1.4);
}
.overlay-label.live::after {
  opacity: 0.9;
}

/* Act IV war council figure: the scene frame reused as a figure, with a
   prose figcaption in place of the chip caption row */
figure.scene.war-council-fig { margin: 44px 0 0; display: block; }
.scene.war-council-fig figcaption {
  border-top: 1px solid var(--line-soft);
  padding: 14px 20px;
  background: rgba(5, 8, 15, 0.55);
  font-size: 15px;
  color: var(--muted);
}

/* Act IV empty seat figure: four identical task panels, the dashed seat
   outline above, blocked connectors that retract, then the neutral amber
   octagon settling in. The unanimated attribute state of the SVG is the
   seated frame, so reduced motion simply disables the animations and the
   correct static frame remains. Loop runs twelve seconds. */
figure.scene.empty-seat-fig { margin: 44px 0 0; display: block; }
.scene.empty-seat-fig figcaption {
  border-top: 1px solid var(--line-soft);
  padding: 14px 20px;
  background: rgba(5, 8, 15, 0.55);
  font-size: 15px;
  color: var(--muted);
}

#empty-seat .es-ring {
  animation: es-spin 2.4s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes es-spin { to { transform: rotate(360deg); } }

#empty-seat .es-tick { animation: es-tickblink 1.6s steps(1, end) infinite; }
@keyframes es-tickblink {
  0%, 62% { opacity: 1; }
  63%, 78% { opacity: 0.25; }
  79%, 100% { opacity: 1; }
}

#empty-seat .es-outline { opacity: 0.7; animation: es-outline 12s linear infinite; }
@keyframes es-outline {
  0%, 24% { opacity: 0; }
  29%, 49% { opacity: 0.55; }
  53% { opacity: 0.85; }
  57% { opacity: 0.3; }
  61% { opacity: 0.85; }
  65% { opacity: 0.35; }
  70%, 100% { opacity: 0.7; }
}

#empty-seat .es-block { opacity: 0; animation: es-blockvis 12s linear infinite; }
@keyframes es-blockvis {
  0%, 25% { opacity: 0; }
  27%, 55% { opacity: 1; }
  64%, 100% { opacity: 0; }
}
#empty-seat .es-blockline { animation: es-blockdraw 12s linear infinite; }
@keyframes es-blockdraw {
  0%, 26% { stroke-dashoffset: 100; }
  33%, 50% { stroke-dashoffset: 0; }
  62%, 100% { stroke-dashoffset: 100; }
}
#empty-seat .es-blockglyph { animation: es-glyph 12s linear infinite; }
@keyframes es-glyph {
  0%, 32% { opacity: 0; }
  34%, 52% { opacity: 1; }
  58%, 100% { opacity: 0; }
}

#empty-seat .es-blockcap { opacity: 0.35; animation: es-blockcap 12s linear infinite; }
@keyframes es-blockcap {
  0%, 28% { opacity: 0.35; }
  33%, 55% { opacity: 1; }
  65%, 100% { opacity: 0.35; }
}

#empty-seat .es-seat { animation: es-seat 12s linear infinite; }
@keyframes es-seat {
  0%, 66% { opacity: 0; transform: translateY(-110px); }
  69% { opacity: 1; transform: translateY(-110px); }
  78%, 100% { opacity: 1; transform: translateY(0); }
}

#empty-seat .es-conn { animation: es-conndraw 12s linear infinite; }
@keyframes es-conndraw {
  0%, 78% { stroke-dashoffset: 100; }
  88%, 100% { stroke-dashoffset: 0; }
}

/* the one-beat highlight sweep across the four capabilities at loop end */
#refuses .legend-grid.seat-pulse .legend-item { animation: es-gridpulse 0.9s ease both; }
#refuses .legend-grid.seat-pulse .legend-item:nth-child(2) { animation-delay: 0.1s; }
#refuses .legend-grid.seat-pulse .legend-item:nth-child(3) { animation-delay: 0.2s; }
#refuses .legend-grid.seat-pulse .legend-item:nth-child(4) { animation-delay: 0.3s; }
@keyframes es-gridpulse {
  0%, 100% { box-shadow: none; border-color: var(--line-soft); }
  35% { box-shadow: 0 0 0 1px rgba(255, 182, 72, 0.55), 0 0 22px rgba(255, 182, 72, 0.16); border-color: rgba(255, 182, 72, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  #empty-seat .es-ring,
  #empty-seat .es-tick,
  #empty-seat .es-outline,
  #empty-seat .es-block,
  #empty-seat .es-blockline,
  #empty-seat .es-blockglyph,
  #empty-seat .es-blockcap,
  #empty-seat .es-seat,
  #empty-seat .es-conn,
  #refuses .legend-grid.seat-pulse .legend-item { animation: none; }
}

/* ---------- Act V pattern rack: sealed-order cards ---------- */
.rack-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
  min-height: 14px;
}
.rack-openall {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(255, 182, 72, 0.06);
  border: 1px solid var(--amber-dim);
  border-radius: 4px;
  cursor: pointer;
}
.rack-openall:hover { background: rgba(255, 182, 72, 0.14); }
html.engineer-mode .rack-openall { display: inline-flex; }

.rack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.pcard {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font-family: var(--sans);
  perspective: 1400px;
  -webkit-tap-highlight-color: transparent;
}
.pcard:focus { outline: none; }
.pcard:focus-visible .pcard-face::before { background: var(--amber); opacity: 0.45; }

.pcard-inner {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}
.pcard[aria-expanded="true"] .pcard-inner { transform: rotateY(180deg); }

.pcard-face {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 22px 20px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--void-2) 100%);
  border-radius: 6px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.pcard-face::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--line);
  opacity: 0.75;
  -webkit-mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Frame_Box_Small_01.png") center / 100% 100% no-repeat;
  mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Frame_Box_Small_01.png") center / 100% 100% no-repeat;
  transition: background 0.2s ease;
}
.pcard-face > * { position: relative; z-index: 1; }
.pcard:hover .pcard-face::before { background: var(--faint); opacity: 0.4; }
.pcard-back { transform: rotateY(180deg); }

.pcard-icwrap { position: relative; display: block; }
.pcard-icwrap .ic { margin-bottom: 0; }
.pcard-ping {
  position: absolute;
  top: -3px;
  right: -7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan), 0 0 20px rgba(79, 216, 196, 0.5);
  opacity: 0;
  pointer-events: none;
}
.pcard.ping .pcard-ping { animation: pcard-ping 1.6s ease-out; }
.pcard.ping .pcard-seal { animation: pcard-glint 1.6s ease-out; }
@keyframes pcard-ping {
  0% { opacity: 0; transform: scale(0.4); }
  18% { opacity: 1; transform: scale(1.15); }
  60% { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes pcard-glint {
  0%, 100% { filter: brightness(1); opacity: 0.95; }
  30% { filter: brightness(1.9) drop-shadow(0 0 8px rgba(255, 182, 72, 0.7)); opacity: 1; }
}

.pcard-name {
  display: block;
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--ink);
}
.pcard-sealwrap {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
}
.pcard-seal {
  display: block;
  width: 62px;
  height: 62px;
  background: var(--amber);
  opacity: 0.95;
  -webkit-mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Frame_Diamond_01.png") center / contain no-repeat;
  mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Frame_Diamond_01.png") center / contain no-repeat;
}
.pcard-sealline {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-dim);
  text-align: center;
}

.tally { display: block; width: 118px; height: 34px; margin-top: auto; }
.tally path {
  fill: none;
  stroke: var(--faint);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.pcard-fields {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}
.pcard-fields b {
  display: block;
  margin-top: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--amber);
}
.pcard-fields b:first-child { margin-top: 0; }
.pcard-cap {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

@media (prefers-reduced-motion: reduce) {
  .pcard-inner { transform-style: flat; transition: none; }
  .pcard[aria-expanded="true"] .pcard-inner { transform: none; }
  .pcard-face {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: opacity 0.35s ease;
  }
  .pcard-back { transform: none; opacity: 0; pointer-events: none; }
  .pcard[aria-expanded="true"] .pcard-front { opacity: 0; }
  .pcard[aria-expanded="true"] .pcard-back { opacity: 1; pointer-events: auto; }
  .pcard.ping .pcard-ping, .pcard.ping .pcard-seal { animation: none; }
}

/* ---------- Act VI fire buttons: the three delta-class triggers ---------- */
.firerow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}
.fire-btn {
  position: relative;
  isolation: isolate;
  min-height: 48px;
  min-width: 44px;
  padding: 13px 52px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--amber);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.fire-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--amber);
  opacity: 0.55;
  -webkit-mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Button_Frame_01.png") center / 100% 100% no-repeat;
  mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Button_Frame_01.png") center / 100% 100% no-repeat;
  transition: opacity 0.25s ease, background-color 0.25s ease;
  pointer-events: none;
}
.fire-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: rgba(255, 182, 72, 0.07);
  -webkit-mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Button_Frame_01_Background.png") center / 100% 100% no-repeat;
  mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Button_Frame_01_Background.png") center / 100% 100% no-repeat;
  transition: background-color 0.25s ease;
  pointer-events: none;
}
.fire-btn:hover { color: var(--ink); }
.fire-btn:hover::before { opacity: 0.95; }
.fire-btn:active { transform: translateY(1px); }
.fire-btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}
.fire-btn.lit { color: var(--cyan); }
.fire-btn.lit::before { background: var(--cyan); opacity: 0.9; }
.fire-btn.lit::after { background: rgba(79, 216, 196, 0.1); }
html.no-webgl .firerow { display: none; }
@media (max-width: 760px) {
  .firerow { gap: 10px; }
  .fire-btn { padding: 12px 48px; font-size: 11px; }
}

/* ---------- Act VI empty ledger: two blank column meters ---------- */
figure.scene.ledger-fig { margin: 44px 0 0; display: block; }
.ledger-stage {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(40px, 14vw, 150px);
  padding: 46px 24px 38px;
}
.ledger-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ledger-rail {
  position: relative;
  width: 92px;
  height: 258px;
}
.ledger-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 258px;
  height: 92px;
  transform: translate(-50%, -50%) rotate(90deg);
  background: var(--amber);
  opacity: 0.32;
  -webkit-mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Bar_Frame_01.png") center / 100% 100% no-repeat;
  mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Bar_Frame_01.png") center / 100% 100% no-repeat;
}
.ledger-meter {
  position: absolute;
  inset: 14px 22px;
  background: rgba(255, 182, 72, 0.08);
  -webkit-mask: url("assets/synty/sprites/General/SPR_SciFiMenus_Menu_Bar_Vertical_01_Active.png") center / 100% 100% no-repeat;
  mask: url("assets/synty/sprites/General/SPR_SciFiMenus_Menu_Bar_Vertical_01_Active.png") center / 100% 100% no-repeat;
}
.ledger-fig svg.ledger-blank {
  position: absolute;
  inset: 14px 22px;
  width: calc(100% - 44px);
  height: calc(100% - 28px);
  display: block;
}
.ledger-blank path {
  fill: none;
  stroke: var(--faint);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.28;
}
.ledger-tag {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.ledger-name {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
  max-width: 190px;
}
.ledger-stamp {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) rotate(-7deg);
  font-family: var(--mono);
  font-size: clamp(15px, 2.4vw, 21px);
  letter-spacing: 0.22em;
  color: var(--amber);
  border: 2px solid var(--amber-dim);
  border-radius: 4px;
  padding: 8px 20px;
  background: rgba(7, 12, 22, 0.55);
  opacity: 0.85;
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .ledger-stage { gap: 26px; padding: 38px 12px 30px; }
  .ledger-rail { width: 74px; height: 210px; }
  .ledger-rail::before { width: 210px; height: 74px; }
  .ledger-meter, .ledger-fig svg.ledger-blank { inset: 12px 17px; }
  .ledger-fig svg.ledger-blank { width: calc(100% - 34px); height: calc(100% - 24px); }
  .ledger-stamp { letter-spacing: 0.14em; padding: 6px 12px; }
}

/* Act VIII what remains figure: the closing SVG echo of the hero. The
   campaign layer fades, four standing glyphs light with label flares,
   and the whole composition settles smaller before the caption. */
figure.scene.what-remains-fig { margin: 44px 0 0; display: block; }
#what-remains .ar-caption {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.08em;
  fill: var(--amber);
}

/* ---------- Act IV integrations rail: the seat drives the categories ----------
   The figure continues the empty-seat composition: the same seated octagon,
   now working. Tokens are positioned by script (site.js); the only CSS
   animation here is the small spinning ring on each category chip. Reduced
   motion stops the rings; the script renders the static mid-cycle frame. */
figure.scene.rail-fig { margin: 44px 0 0; display: block; }
.scene.rail-fig figcaption {
  border-top: 1px solid var(--line-soft);
  padding: 14px 20px;
  background: rgba(5, 8, 15, 0.55);
  font-size: 15px;
  color: var(--muted);
}

#integration-rail .ir-ring {
  animation: ir-spin 2.4s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes ir-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #integration-rail .ir-ring { animation: none; }
}

.rail-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.rail-card {
  position: relative;
  padding: 24px 22px 22px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--void-2) 100%);
  border-radius: 6px;
}
.rail-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--line);
  opacity: 0.75;
  -webkit-mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Frame_Box_Small_01.png") center / 100% 100% no-repeat;
  mask: url("assets/synty/sprites/SciFiMenus/SPR_SciFiMenus_Frame_Box_Small_01.png") center / 100% 100% no-repeat;
}
.rail-card > * { position: relative; z-index: 1; }
.rail-card .rc-cat {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.rail-card .rc-ex {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.rail-card .rc-line { margin: 0 0 12px; }
.rail-card .rc-line:last-child { margin-bottom: 0; }
.rail-card .rc-line .rk {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.rail-card .rc-line p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.rail-card .rc-line.best .rk { color: var(--faint); }
.rail-card .rc-line.best p { color: var(--muted); }
.rail-card .rc-line.adds .rk { color: var(--amber); }
.rail-card .rc-line.adds p { color: #d8e0ec; }

/* subtle inline links inside campaign steps and rail cards: inherit, underline on hover only */
.cline p a, .rail-card .rc-ex a, .rail-card .rc-line p a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
}
.cline p a:hover, .rail-card .rc-ex a:hover, .rail-card .rc-line p a:hover {
  text-decoration: underline;
}

/* ---------- v2 proof-sandwich additions ---------- */
.t-cyan { color: var(--cyan); }
.t-blue { color: var(--blue); }
.t-red { color: var(--red); }
.t-faint { color: var(--faint); }
.lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: #c3cede;
  background: rgba(11, 18, 32, 0.85);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: 1px 5px;
}
.term code { border: none; background: none; padding: 0; }

a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--amber); color: var(--amber); }

.table-scroll { overflow-x: auto; margin-top: 26px; }
.status-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}
.status-table th, .status-table td {
  text-align: left;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.status-table th {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.status-table td { color: #b6c2d4; }
.status-table td:first-child { color: var(--ink); }
.status-table td code { white-space: nowrap; }

.status-cols.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) { .status-cols.three { grid-template-columns: 1fr; } }

figure.fig-block { margin: 30px 0 0; }
figure.fig-block figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}
.fig-placeholder {
  border: 1.5px dashed rgba(139, 156, 181, 0.45);
  border-radius: 6px;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(11, 18, 32, 0.5);
}

/* ---------- data graphics (dg-*) · shared vocabulary for the fig-block SVGs ---------- */
.fig-block svg.dg { width: 100%; height: auto; display: block; }
.dg-bg { fill: rgba(11, 18, 32, 0.55); stroke: var(--line); stroke-width: 1; }
.dg-bracket { fill: none; stroke: var(--amber-dim); stroke-width: 2; opacity: 0.85; }
.dg-head { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.18em; fill: var(--amber); }
.dg-head.s11 { font-size: 11px; letter-spacing: 0.14em; }
.dg-label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; fill: var(--muted); }
.dg-label.ink { fill: var(--ink); }
.dg-label.faint { fill: var(--faint); }
.dg-label.amber { fill: var(--amber); }
.dg-label.cyan { fill: var(--cyan); }
.dg-label.red { fill: var(--red); }
.dg-label.s10 { font-size: 10.5px; }
.dg-label.s11 { font-size: 11px; }
.dg-label.s115 { font-size: 11.5px; }
.dg-label.s12 { font-size: 12px; }
.dg-label.s13 { font-size: 13px; }
.dg-label.s14 { font-size: 14px; }
.dg-num { font-family: var(--mono); font-size: 22px; font-weight: 700; fill: var(--ink); }
.dg-node { fill: var(--panel-2); stroke: var(--line); stroke-width: 1; }
.dg-node.amber { stroke: rgba(255, 182, 72, 0.55); }
.dg-node.red { stroke: rgba(255, 93, 93, 0.55); }
.dg-node.cyan { stroke: rgba(79, 216, 196, 0.45); }
.dg-edge { fill: none; stroke: #3a4f79; stroke-width: 1.6; }
.dg-wave { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-dasharray: 6 5; }
.dg-chip { fill: rgba(5, 8, 15, 0.85); stroke: var(--line); stroke-width: 1; }
.dg-chip.red { stroke: rgba(255, 93, 93, 0.55); }
.dg-chip.red-lit { fill: rgba(255, 93, 93, 0.12); stroke: var(--red); }
.dg-chip.cyan { stroke: rgba(79, 216, 196, 0.5); }
.dg-chip.amber { stroke: rgba(255, 182, 72, 0.5); }
.dg-grid { stroke: var(--line-soft); stroke-width: 1; }
.dg-axis { stroke: #3a4f79; stroke-width: 1.2; }
.dg-bar { fill: var(--amber); }
.dg-bar-base { fill: #101a2e; stroke: var(--line); stroke-width: 1; }

ol.steps {
  margin: 26px 0 0;
  padding-left: 26px;
  max-width: 76ch;
}
ol.steps li { margin: 10px 0; color: #b6c2d4; font-size: 15.5px; line-height: 1.65; }
ol.steps li::marker { color: var(--amber); font-family: var(--mono); }

ol.invariants-ol {
  margin: 0;
  padding-left: 30px;
  columns: 1;
}
ol.invariants-ol li {
  margin: 8px 0;
  color: #c3cede;
  font-size: 15.5px;
  line-height: 1.6;
}
ol.invariants-ol li::marker { color: var(--cyan); font-family: var(--mono); font-size: 13px; }

.foot-tagline {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--faint);
}
/* ---------- CogniCluster network navigation ---------- */
:root {
  --global-nav-h: 34px;
  --local-nav-h: 58px;
}
html { scroll-padding-top: calc(var(--global-nav-h) + var(--local-nav-h) + 18px); }
.global-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  height: var(--global-nav-h);
  background: rgba(3, 6, 12, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(79, 216, 196, 0.16);
}
.global-inner {
  max-width: var(--maxw);
  height: var(--global-nav-h);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.global-brand {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.global-brand b { color: var(--amber); }
.global-brand span {
  margin-left: 9px;
  color: var(--faint);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.global-brand:hover,
.global-links a:hover { color: var(--ink); text-decoration: none; }
.global-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.global-links::-webkit-scrollbar { display: none; }
.global-links a {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.global-brand[aria-current="page"],
.global-links a[aria-current="page"] { color: var(--amber); }
nav.local-nav { top: var(--global-nav-h); }

@media (max-width: 760px) {
  :root { --global-nav-h: 38px; }
  .global-inner { padding: 0 16px; gap: 12px; }
  .global-brand { font-size: 10px; letter-spacing: 0.12em; }
  .global-brand span { display: none; }
  .global-links { gap: 13px; min-width: 0; }
  .global-links a { font-size: 9.5px; letter-spacing: 0.05em; }
}