/* Invariant · Live. The accent marks only what holds (docs/brand). */
:root {
  --bg: #090c11;
  --bg2: #0d1218;
  --card: rgba(var(--glass-rgb), 0.72);
  --card-solid: #111821;
  --line: #1b2430;
  --line2: #283341;
  --ink: #e6edf3;
  --ink2: #a8b3bf;
  --ink3: #6b7785;
  --hi: #ffffff;
  --accent: #38d9a9;
  --people: #f5c451;
  --ci: #6fa8ff;
  --bug: #ff6b6b;
  --agent: #e0876a;
  --ink-rgb: 230, 237, 243;
  --accent-rgb: 56, 217, 169;
  --people-rgb: 245, 196, 81;
  --ci-rgb: 111, 168, 255;
  --bug-rgb: 255, 107, 107;
  --agent-rgb: 224, 135, 106;
  --glass-rgb: 13, 18, 24;
  --glow-rgb: 255, 255, 255;
  --accent-soft: rgba(var(--accent-rgb), 0.14);
  --people-soft: rgba(var(--people-rgb), 0.14);
  --ci-soft: rgba(var(--ci-rgb), 0.14);
  --bug-soft: rgba(var(--bug-rgb), 0.14);
  --agent-soft: rgba(var(--agent-rgb), 0.14);
  --cosmos-bg: #070a0e;
  --tile: rgba(12, 16, 22, 0.92);
  --go: #7fd8f0; --go-bg: rgba(0, 173, 216, 0.14);
  --ts: #8fb6ff; --ts-bg: rgba(49, 120, 198, 0.2);
  --py: #ffd76a; --py-bg: rgba(55, 118, 171, 0.22);
  --star: 0.3;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 16px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}
/* The light theme: the brand's colors on light (docs/brand). */
:root[data-theme="light"] {
  --bg: #f4f6f8;
  --bg2: #eef1f4;
  --card: rgba(255, 255, 255, 0.78);
  --card-solid: #ffffff;
  --line: #e1e6ec;
  --line2: #cfd7e0;
  --ink: #0e1116;
  --ink2: #48535f;
  --ink3: #7a8591;
  --hi: #9aa6b2;
  --accent: #0ca678;
  --people: #b7791f;
  --ci: #2f6feb;
  --bug: #d64545;
  --agent: #c15f3c;
  --ink-rgb: 14, 17, 22;
  --accent-rgb: 12, 166, 120;
  --people-rgb: 183, 121, 31;
  --ci-rgb: 47, 111, 235;
  --bug-rgb: 214, 69, 69;
  --agent-rgb: 193, 95, 60;
  --glass-rgb: 255, 255, 255;
  --glow-rgb: 14, 17, 22;
  --cosmos-bg: #fbfcfd;
  --tile: rgba(255, 255, 255, 0.94);
  --go: #007d9c; --go-bg: rgba(0, 173, 216, 0.12);
  --ts: #235a97; --ts-bg: rgba(49, 120, 198, 0.12);
  --py: #7a5a00; --py-bg: rgba(255, 212, 59, 0.22);
  --star: 0.14;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; }
::selection { background: rgba(var(--ink-rgb), 0.2); }
html.theming, html.theming *, html.theming *::before, html.theming *::after { transition: background-color 0.45s, border-color 0.45s, color 0.45s, fill 0.45s, stroke 0.45s !important; }

/* The sky: fixed star dust that drifts very slowly, clipped to the screen. */
.skywrap { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.sky {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(var(--ink-rgb), 0.35), transparent 60%),
    radial-gradient(1px 1px at 72% 12%, rgba(var(--ink-rgb), 0.25), transparent 60%),
    radial-gradient(1.2px 1.2px at 38% 62%, rgba(var(--ink-rgb), 0.22), transparent 60%),
    radial-gradient(1px 1px at 88% 48%, rgba(var(--ink-rgb), 0.3), transparent 60%),
    radial-gradient(1px 1px at 54% 88%, rgba(var(--ink-rgb), 0.2), transparent 60%),
    radial-gradient(1.4px 1.4px at 24% 84%, rgba(var(--ink-rgb), 0.18), transparent 60%),
    radial-gradient(1px 1px at 64% 34%, rgba(var(--ink-rgb), 0.16), transparent 60%),
    radial-gradient(900px 600px at 85% -10%, rgba(var(--ci-rgb), 0.07), transparent 70%),
    radial-gradient(800px 700px at -10% 30%, rgba(var(--agent-rgb), 0.035), transparent 70%);
  background-size: 480px 480px, 560px 560px, 620px 620px, 700px 700px, 520px 520px, 760px 760px, 430px 430px, 100% 100%, 100% 100%;
  opacity: calc(var(--star) / 0.3);
  animation: drift 240s linear infinite;
}
@keyframes drift { to { transform: translate3d(-120px, -60px, 0); } }

header.top, main, footer { position: relative; z-index: 1; }

/* Top bar */
header.top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px var(--gutter);
  max-width: 1280px;
  margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { width: 38px; height: 38px; flex: none; }
.wordmark { font-weight: 600; font-size: 21px; letter-spacing: 0.01em; }
.wordmark b { color: var(--ink3); font-weight: 400; margin-left: 6px; }
.live {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink2); padding: 6px 10px; border: 1px solid var(--line2); border-radius: 999px;
}
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--bug); box-shadow: 0 0 0 0 rgba(var(--bug-rgb), 0.6); animation: beat 2s infinite; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(var(--bug-rgb), 0.55); } 70% { box-shadow: 0 0 0 9px rgba(var(--bug-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--bug-rgb), 0); } }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; justify-content: flex-end; min-width: 0; }
.pill { white-space: nowrap; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line2); font: 500 13px/1 var(--sans); color: var(--ink2); background: rgba(var(--glass-rgb), 0.6);
}
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); }
.pill.on { color: var(--ink); border-color: rgba(var(--ink-rgb), 0.25); }
.pill.on i { background: var(--ink); animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 12px 2px rgba(var(--ink-rgb), 0.7); } }
.muted { color: var(--ink3); font-size: 13px; }
.stale { color: var(--people); }

main { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter) 40px; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  padding: clamp(16px, 5vw, 56px) 0 clamp(24px, 4vw, 40px);
}
.eyebrow {
  margin: 0 0 14px; font: 600 12px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink3);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--line2); }
h1 {
  margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.02;
  font-size: clamp(38px, 6.2vw, 76px);
  text-wrap: balance;
}
h1 .n { color: var(--ink2); }
h1.swap { animation: swap 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes swap { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
h1.working {
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 40%, var(--hi) 50%, var(--ink) 60%, var(--ink) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 3.2s linear infinite;
}
@keyframes sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.detail { margin: 18px 0 0; font-size: clamp(17px, 2vw, 21px); color: var(--ink2); max-width: 36em; }
.detail q { quotes: "\201C" "\201D"; }
.now-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  font: 500 12.5px/1 var(--sans); border: 1px solid var(--line2); color: var(--ink2); background: rgba(var(--glass-rgb), 0.55);
  white-space: nowrap;
}
a.chip { text-decoration: none; cursor: pointer; }
a.chip:hover { border-color: currentColor; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.people { color: var(--people); border-color: rgba(var(--people-rgb), 0.35); background: var(--people-soft); }
.chip.ci { color: var(--ci); border-color: rgba(var(--ci-rgb), 0.35); background: var(--ci-soft); }
.chip.factory { color: var(--ink); border-color: rgba(var(--ink-rgb), 0.3); }
.chip.holds { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.35); background: var(--accent-soft); }
.chip.bug { color: var(--bug); border-color: rgba(var(--bug-rgb), 0.35); background: var(--bug-soft); }
.chip.agent { color: var(--agent); border-color: rgba(var(--agent-rgb), 0.35); background: var(--agent-soft); }
.chip.pulse i { animation: glow 1.6s ease-in-out infinite; }
.mainline {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
  display: grid; gap: 10px; font-size: 14px; color: var(--ink2);
}
.mainline div { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mainline .k { font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); min-width: 88px; }
.mainline code { font-family: var(--mono); font-size: 12.5px; color: var(--ink3); }
.ok { color: var(--accent); }
.run { color: var(--ci); }
.bad { color: var(--bug); }

/* The pipeline orbit */
.orbit { position: relative; width: 100%; max-width: 480px; margin-inline: auto; aspect-ratio: 1; }
.orbit svg { width: 100%; height: 100%; overflow: visible; }
.orbit .ring { fill: none; stroke: var(--line2); stroke-width: 1.2; stroke-dasharray: 2 7; animation: flow 3s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -18; } }
.orbit .ring2 { fill: none; stroke: rgba(var(--ink-rgb), 0.05); stroke-width: 26; }
.station circle.dot { fill: var(--bg); stroke-width: 2; }
.station text { font: 600 12px var(--sans); fill: var(--ink2); letter-spacing: 0.02em; }
.station text.sub { font: 500 10px var(--mono); fill: var(--ink3); letter-spacing: 0.08em; text-transform: uppercase; }
.station.active circle.halo { animation: halo 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
.orbit .core { fill: var(--accent); }
.orbit .core-pulse { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: corepulse 3s ease-out infinite; }
@keyframes corepulse { from { opacity: 0.45; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }
.orbit .core-label { font: 600 11px var(--mono); fill: var(--ink3); letter-spacing: 0.12em; text-transform: uppercase; }
.orbit .core-num { font: 600 30px var(--sans); fill: var(--ink); }
.orbit .issue-dot { fill: var(--ink); filter: url(#glow); }
.orbit .issue-dot.bug { fill: var(--bug); }
.station.s-ink2 .dot, .station.s-ink2 .halo { stroke: var(--ink2); }
.station.s-people .dot, .station.s-people .halo { stroke: var(--people); }
.station.s-ink .dot, .station.s-ink .halo { stroke: var(--ink); }
.station.s-ci .dot, .station.s-ci .halo { stroke: var(--ci); }
.station.s-accent .dot, .station.s-accent .halo { stroke: var(--accent); }
.orbit .moonring { fill: none; stroke: rgba(var(--ink-rgb), 0.06); }
.orbit .issue-label { font: 600 12px var(--mono); fill: var(--ink); }
.orbit .moon { fill: var(--ink2); }
.orbit .ghost { fill: var(--ink); }

/* Numbers */
.numbers {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line);
  margin: 8px 0 clamp(40px, 6vw, 72px);
}
.num {
  background: var(--tile); padding: 22px 20px 20px; min-height: 150px;
  display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden;
}
/* A tile's number is set no larger than the tile's inside width over its
   width in em, --ems, which the page gives it (#152), so it always fits.
   The numbers row's tiles are size containers for it. The projects table's
   cells share the num class, and aren't. */
.numbers .num { container-type: inline-size; }
.num .v { font: 600 clamp(30px, 3.4vw, 42px)/1 var(--sans); font-size: min(clamp(30px, 3.4vw, 42px), 100cqi / var(--ems, 1)); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.num .l { font-size: 14px; color: var(--ink); font-weight: 500; line-height: 1.3; }
.num .s { font-size: 12.5px; color: var(--ink3); line-height: 1.4; margin-top: auto; }
.num.holds .v { color: var(--accent); text-shadow: 0 0 28px rgba(var(--accent-rgb), 0.45); }
.num.holds::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 70%);
}

/* Sections */
.block { margin: 0 0 clamp(48px, 7vw, 88px); }
.block > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.02em; }
.lede { margin: 8px 0 0; color: var(--ink2); max-width: 46em; font-size: 15.5px; }
.lede b { color: var(--ink); font-weight: 500; }

/* Cosmos: the state graph */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  font: 500 13px/1 var(--sans); color: var(--ink2); background: rgba(var(--glass-rgb), 0.6); border: 1px solid var(--line2);
  border-radius: 999px; padding: 9px 13px; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.tab span { font-family: var(--mono); color: var(--ink3); margin-left: 6px; font-size: 12px; }
.tab:hover { color: var(--ink); border-color: rgba(var(--ink-rgb), 0.3); }
.tab[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.tab[aria-pressed="true"] span { color: rgba(var(--glass-rgb), 0.6); }
.cosmos {
  position: relative; margin-top: 18px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  height: clamp(420px, 68vw, 720px);
  background:
    radial-gradient(closest-side at 50% 50%, rgba(var(--accent-rgb), 0.06), transparent 70%),
    radial-gradient(120% 90% at 50% 120%, rgba(var(--ci-rgb), 0.06), transparent 60%),
    var(--cosmos-bg);
}
.cosmos canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cosmos .caption {
  position: absolute; left: 20px; top: 18px; max-width: min(420px, calc(100% - 40px)); pointer-events: none;
}
.cosmos .caption .t { font-weight: 600; font-size: 18px; }
.cosmos .caption .m { font: 500 12px/1.6 var(--mono); color: var(--ink3); margin-top: 4px; }
.cosmos .caption .h { font-size: 13px; color: var(--ink2); margin-top: 8px; }
.cosmos .caption .h b { color: var(--accent); font-weight: 500; }
.cosmos .caption .h.itself { color: var(--accent); }
.cosmos .legend {
  position: absolute; left: 20px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 14px; pointer-events: none;
  font: 500 11.5px/1 var(--mono); color: var(--ink3);
}
.cosmos .legend span { display: inline-flex; align-items: center; gap: 6px; }
.cosmos .legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cosmos .controls { position: absolute; right: 16px; top: 16px; display: flex; gap: 8px; }
.btn {
  font: 500 13px/1 var(--sans); color: var(--ink); background: rgba(var(--glass-rgb), 0.7); border: 1px solid var(--line2);
  border-radius: 999px; padding: 9px 14px; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn:hover { border-color: rgba(var(--ink-rgb), 0.35); }
.btn.bugbtn { color: var(--bug); border-color: rgba(var(--bug-rgb), 0.4); }
.bugcard {
  position: absolute; right: 16px; bottom: 16px; width: min(380px, calc(100% - 32px));
  background: rgba(var(--glass-rgb), 0.82); border: 1px solid rgba(var(--bug-rgb), 0.4); border-radius: 14px; padding: 14px 16px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.4s; pointer-events: none;
}
.bugcard.show { opacity: 1; transform: none; }
.bugcard .k { font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bug); }
.bugcard .t { font-weight: 600; margin-top: 8px; }
.bugcard .d { color: var(--ink2); font-size: 14px; margin-top: 4px; }
.bugcard .c { margin-top: 10px; font: 500 12.5px/1.5 var(--mono); color: var(--ink2); }
.bugcard .c b { color: var(--accent); font-weight: 600; }
.tip {
  position: absolute; z-index: 3; pointer-events: none; max-width: 340px; padding: 10px 12px; border-radius: 10px;
  background: rgba(var(--glass-rgb), 0.92); border: 1px solid var(--line2); font: 500 11.5px/1.55 var(--mono); color: var(--ink2);
  white-space: pre-wrap; opacity: 0; transition: opacity 0.12s;
}
.tip.show { opacity: 1; }
.tip b { color: var(--ink); font-family: var(--sans); font-size: 12.5px; }

/* Lanes */
.lanes { display: grid; gap: 14px; }
.lane { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 16px; }
.lane-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lane-head .no { font: 600 15px var(--mono); color: var(--ink3); }
.lane-head .title { font-weight: 600; font-size: 17px; }
.lane-head .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.track { position: relative; display: flex; align-items: center; height: 44px; margin: 16px 0 10px; }
.seg { position: relative; height: 10px; flex: none; transform-origin: left center; transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lanes.shown .seg { transform: scaleX(1); }
.seg.factory { background: linear-gradient(90deg, rgba(var(--ink-rgb), 0.85), rgba(var(--ink-rgb), 0.6)); border-radius: 3px; }
.seg.ci { background: repeating-linear-gradient(90deg, var(--ci) 0 6px, rgba(var(--ci-rgb), 0.55) 6px 9px); border-radius: 3px; }
.seg.people {
  height: 2px; background: repeating-linear-gradient(90deg, var(--people) 0 5px, transparent 5px 10px);
}
.seg.people .wait {
  position: absolute; left: 50%; top: -22px; transform: translateX(-50%); white-space: nowrap;
  font: 600 11px/1 var(--mono); color: var(--people);
}
.seg.open::after {
  content: ""; position: absolute; inset: -2px 0; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(var(--glow-rgb), 0.8), transparent); background-size: 60px 100%; background-repeat: no-repeat;
  animation: runlight 1.6s linear infinite;
}
@keyframes runlight { from { background-position: -60px 0; } to { background-position: calc(100% + 60px) 0; } }
.mark {
  position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  border: 2px solid var(--bg); z-index: 2; opacity: 0; transition: opacity 0.4s 0.6s;
}
.lanes.shown .mark { opacity: 1; }
.mark.factory { background: var(--ink); }
.mark.person { background: var(--people); }
.mark.merged { background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7); }
.mark.failed { background: var(--bug); }
.mark:hover { transform: scale(1.35); }
.lane-foot { display: flex; gap: 18px; flex-wrap: wrap; font: 500 12.5px/1.4 var(--mono); color: var(--ink3); }
.lane-foot b { color: var(--ink); font-weight: 600; }
.lane-foot .p b { color: var(--people); }
.key { display: flex; gap: 16px; flex-wrap: wrap; font: 500 12px/1 var(--mono); color: var(--ink3); }
.key span { display: inline-flex; align-items: center; gap: 7px; }
.key i { width: 18px; height: 6px; border-radius: 2px; display: inline-block; }

/* Project cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  overflow: hidden; cursor: pointer; transition: border-color 0.25s, transform 0.25s;
}
.card:hover { border-color: rgba(var(--ink-rgb), 0.28); transform: translateY(-2px); }
.card canvas.thumb { position: absolute; right: -26px; top: -26px; width: 150px; height: 150px; opacity: 0.85; }
.card .top { display: flex; gap: 6px; flex-wrap: wrap; position: relative; }
.lang { font: 600 11px/1 var(--mono); padding: 5px 8px; border-radius: 6px; letter-spacing: 0.04em; }
.lang.go { color: var(--go); background: var(--go-bg); }
.lang.typescript { color: var(--ts); background: var(--ts-bg); }
.lang.python { color: var(--py); background: var(--py-bg); }
.assure { font: 600 11px/1 var(--mono); padding: 5px 8px; border-radius: 6px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid; background: var(--card-solid); }
.card .lang { box-shadow: 0 0 0 1px var(--card-solid); }
.assure.proved { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); }
.assure.every { color: var(--ink); border-color: rgba(var(--ink-rgb), 0.3); }
.assure.tested { color: var(--ink2); border-color: var(--line2); }
.card h3 { position: relative; margin: 14px 0 2px; font-size: 19px; letter-spacing: -0.01em; max-width: 78%; }
.card .dir { position: relative; margin: 0; font: 500 12px var(--mono); color: var(--ink3); }
.metrics { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 18px 0 14px; }
.metrics dt { font: 600 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }
.metrics dd { margin: 5px 0 0; font: 600 20px/1 var(--sans); font-variant-numeric: tabular-nums; }
.metrics dd.holds { color: var(--accent); }
.prov { position: relative; margin: 0; font-size: 13.5px; color: var(--ink2); }
.prov b { color: var(--people); font-weight: 500; }
.fp { position: relative; margin: 8px 0 0; font: 500 11.5px var(--mono); color: var(--ink3); }

/* Road */
.road {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(92px, 1fr); gap: 0; padding: 26px 0 4px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
}
@media (min-width: 1180px) { .road { -webkit-mask-image: none; mask-image: none; } }
.road::-webkit-scrollbar { display: none; }
.road .rail { position: absolute; left: 0; right: 0; top: 38px; height: 2px; background: var(--line2); }
.road .fill { position: absolute; left: 0; top: 38px; height: 2px; width: 0; background: linear-gradient(90deg, var(--ink3), var(--ink)); transition: width 2.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.road .train { position: absolute; top: 33px; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--hi); box-shadow: 0 0 16px 3px rgba(var(--glow-rgb), 0.35); transition: left 2.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.stop { position: relative; padding: 0 10px 0 0; min-width: 0; }
.stop .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--line2); font: 700 11px var(--mono); color: var(--ink3); position: relative; z-index: 1; }
.stop.done .dot { border-color: var(--ink2); color: var(--ink); }
.stop.now .dot { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 0 rgba(var(--glow-rgb), 0.5); animation: nowring 2s infinite; }
@keyframes nowring { 70% { box-shadow: 0 0 0 12px rgba(var(--glow-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--glow-rgb), 0); } }
.stop.proposed .dot, .stop.planned .dot { border-style: dashed; }
.stop.later .dot { opacity: 0.5; }
.stop .id { font: 600 11px/1 var(--mono); color: var(--ink3); letter-spacing: 0.1em; margin-top: 14px; text-transform: uppercase; }
.stop .tt { font-size: 14px; font-weight: 500; margin-top: 6px; line-height: 1.3; padding-right: 8px; }
.stop.later .tt, .stop.proposed .tt, .stop.planned .tt { color: var(--ink2); font-weight: 400; }
.stop .st { font: 500 11px var(--mono); margin-top: 6px; color: var(--ink3); }
.stop.now .st { color: var(--ink); }

/* Who builds what */
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: relative; overflow: hidden; }
.col svg.glyph { width: 56px; height: 56px; display: block; margin-bottom: 14px; }
.col h3 { margin: 0; font-size: 20px; }
.col p { margin: 6px 0 16px; color: var(--ink2); font-size: 14.5px; }
.col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.col li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--ink2); }
.col li b { font: 600 22px/1 var(--sans); color: var(--ink); min-width: 2.4em; font-variant-numeric: tabular-nums; }
.col.people { border-top: 2px solid var(--people); }
.col.proves { border-top: 2px solid var(--accent); }
.col.agent { border-top: 2px solid var(--agent); }
.col.people li b { color: var(--people); }
.col.agent li b { color: var(--agent); }

/* Decisions and activity */
.two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(20px, 3vw, 36px); }
.bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--line); margin: 14px 0 8px; }
.bar span { height: 100%; transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); width: 0; }
.bar .ratified { background: var(--people); }
.bar .decided { background: var(--agent); }
.bar .proposed { background: var(--ink3); }
.barkey { display: flex; gap: 14px; flex-wrap: wrap; font: 500 12px var(--mono); color: var(--ink3); margin-bottom: 14px; }
.barkey b { color: var(--ink); }
.dlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dlist li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.dlist .id { font: 600 12.5px var(--mono); color: var(--ink); grid-row: span 2; padding-top: 2px; }
.dlist .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font: 500 11.5px var(--mono); color: var(--ink3); }
.dlist .st { padding: 3px 7px; border-radius: 5px; font-weight: 600; letter-spacing: 0.05em; }
.st.ratified { color: var(--people); background: var(--people-soft); }
.st.decided { color: var(--agent); background: var(--agent-soft); }
.st.proposed { color: var(--ink); background: rgba(var(--ink-rgb), 0.08); outline: 1px dashed var(--ink3); }
.st.open { color: var(--bug); background: var(--bug-soft); }
.dlist .txt { font-size: 14px; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dlist li.open-text .txt { -webkit-line-clamp: unset; }

/* The decision graph: the journal on one spiral, the oldest at its center.
   Ratified is the accent, proposed the people color, decided neutral, and
   superseded faded. Refinements and supersessions are the strong lines. */
.dgraph { margin-top: 28px; }
.dgraph h3 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.dkey { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; font: 500 11.5px/1 var(--mono); color: var(--ink3); }
.dkey span { display: inline-flex; align-items: center; gap: 6px; }
.dkey i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink2); }
.dkey i.ratified { background: var(--accent); }
.dkey i.proposed { background: var(--people); }
.dkey i.superseded { background: rgba(var(--ink-rgb), 0.16); box-shadow: inset 0 0 0 1px var(--ink3); }
.dkey i.oneway { width: 8px; height: 8px; border-radius: 1px; transform: rotate(45deg); }
.dkey i.edge { width: 18px; height: 0; border-radius: 0; background: none; border-top: 2px solid rgba(var(--ink-rgb), 0.45); }
.dkey i.edge.reopens { border-top-style: dashed; }
.dkey i.edge.cites { border-top: 1px solid rgba(var(--ink-rgb), 0.2); }
.dmap { margin-top: 8px; }
.dmap svg { display: block; width: 100%; height: auto; overflow: visible; }
.dmap .arm { fill: none; stroke: rgba(var(--ink-rgb), 0.08); stroke-width: 1; }
.dmap .edges { opacity: 0; transition: opacity 0.8s ease 0.6s; }
.dmap .shown .edges { opacity: 1; }
.dmap .de { fill: none; stroke: var(--ink); stroke-opacity: 0.14; stroke-width: 1; transition: opacity 0.25s, stroke-opacity 0.25s; }
.dmap .de.refines, .dmap .de.supersedes { stroke-opacity: 0.45; stroke-width: 1.6; }
.dmap .de.reopens { stroke-opacity: 0.4; stroke-width: 1.4; stroke-dasharray: 5 4; }
.dmap .choosing .de { opacity: 0.2; }
.dmap .choosing .de.lit { opacity: 1; stroke-opacity: 0.85; stroke-width: 1.8; stroke-dasharray: 4 5; animation: flow 1.2s linear infinite; }
.dmap .dn { cursor: pointer; opacity: 0; transition: opacity 0.45s ease var(--d, 0ms); -webkit-tap-highlight-color: transparent; }
.dmap .shown .dn { opacity: 1; }
.dmap .dn.fresh { animation: arrive 1s ease both; }
.dmap .dn:focus { outline: none; }
.dmap .hit { fill: transparent; }
.dmap .dot { fill: var(--ink2); stroke: var(--bg); stroke-width: 1.5; transition: opacity 0.25s; }
.dmap .ratified .dot { fill: var(--accent); }
.dmap .proposed .dot { fill: var(--people); }
.dmap .superseded .dot { fill: rgba(var(--ink-rgb), 0.16); stroke: var(--ink3); stroke-width: 1; }
.dmap .open .dot { fill: var(--bg); stroke: var(--people); }
.dmap .lbl { font: 500 10px var(--mono); fill: var(--ink3); pointer-events: none; transition: opacity 0.25s; }
.dmap .dense .lbl { display: none; }
.dmap .dense .chosen .lbl, .dmap .dense .lit .lbl { display: inline; }
.dmap .choosing .dot, .dmap .choosing .lbl { opacity: 0.22; }
.dmap .choosing .chosen .dot, .dmap .choosing .chosen .lbl, .dmap .choosing .lit .dot, .dmap .choosing .lit .lbl { opacity: 1; }
.dmap .dn.lit .dot { stroke: var(--ink); stroke-width: 1.5; }
.dmap .dn.chosen .dot, .dmap .dn:focus-visible .dot { stroke: var(--ink); stroke-width: 2.5; }
.dmap .dn.chosen .lbl, .dmap .dn.lit .lbl { fill: var(--ink); font-weight: 600; }
.dmap .dhalo { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0; pointer-events: none; }
.dmap .dhalo.on { opacity: 0.7; transform-box: fill-box; transform-origin: center; animation: halo 2.2s ease-out infinite; }
.dcard { margin-top: 10px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.dcard .hint { margin: 0; font-size: 14px; color: var(--ink3); }
.dcard .top { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font: 500 11.5px var(--mono); color: var(--ink3); }
.dcard .id { font: 600 13px var(--mono); color: var(--ink); }
.dcard .top b { color: var(--ink); font-weight: 600; }
.dcard .ds { padding: 3px 7px; border-radius: 5px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink2); background: rgba(var(--ink-rgb), 0.08); }
.dcard .ds.ratified { color: var(--accent); background: var(--accent-soft); }
.dcard .ds.proposed { color: var(--people); background: var(--people-soft); }
.dcard .ds.superseded { color: var(--ink3); background: rgba(var(--ink-rgb), 0.04); }
.dcard .ds.open { color: var(--people); background: none; outline: 1px dashed var(--people); }
.dcard .txt { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.dcard .deps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--ink2); }
.dcard .deps span { margin-right: 4px; }
.dcard .deps b { color: var(--ink); }
.dcard .deps button { font: 600 11.5px/1 var(--mono); color: var(--ink); background: rgba(var(--glass-rgb), 0.6); border: 1px solid var(--line2); border-radius: 6px; padding: 5px 7px; cursor: pointer; }
.dcard .deps button:hover { border-color: rgba(var(--ink-rgb), 0.4); }
.activity { list-style: none; margin: 0; padding: 0; position: relative; }
.activity::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 1px; background: var(--line2); }
.activity li { position: relative; padding: 0 0 16px 32px; font-size: 14px; color: var(--ink2); animation: slidein 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes slidein { from { opacity: 0; transform: translateX(-8px); } }
.activity li::before {
  content: ""; position: absolute; left: 4px; top: 5px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--ink3);
}
.activity li.factory::before { border-color: var(--ink); background: var(--ink); }
.activity li.person::before { border-color: var(--people); background: var(--people); }
.activity li.ci::before { border-color: var(--ci); }
.activity li.ci.success::before { border-color: var(--accent); }
.activity li.ci.failure::before { border-color: var(--bug); background: var(--bug); }
.activity li.ci.unstarted::before, .activity li.ci.skipped::before { border-color: var(--ink3); border-style: dashed; }
.activity li.commit::before { border-color: var(--ink3); border-radius: 3px; }
.activity .who { color: var(--ink); font-weight: 500; }
.activity .when { display: block; font: 500 11.5px var(--mono); color: var(--ink3); margin-top: 2px; }
.activity code { font: 500 12px var(--mono); color: var(--ink3); }

footer { max-width: 1280px; margin: 0 auto; padding: 28px var(--gutter) 48px; border-top: 1px solid var(--line); color: var(--ink3); font-size: 13.5px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; }
footer p { margin: 0; max-width: 60em; }

.skeleton { color: var(--ink3); font-size: 14px; padding: 18px 0; }

@media (max-width: 1100px) {
  .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .orbit { max-width: 400px; }
  .who { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  header.top { gap: 10px; }
  .live, .wordmark b { display: none; }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .num { min-height: 132px; padding: 16px 14px; }
  .top-right .muted { display: none; }
  .lane { padding: 14px; }
  .lane-head .chips { margin-left: 0; }
  .cosmos .legend { display: none; }
  .cosmos .caption .h { display: none; }
  .road { grid-auto-flow: row; grid-auto-columns: auto; padding: 0; }
  .road .rail, .road .fill, .road .train { display: none; }
  .stop { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; padding: 0 0 18px; }
  .stop .dot { grid-row: span 3; }
  .stop .id { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .seg { transform: none; }
  .mark { opacity: 1; }
}

/* The theme switch */
.themebtn {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(var(--glass-rgb), 0.6);
  color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0;
}
.themebtn:hover { border-color: rgba(var(--ink-rgb), 0.35); }
.themebtn svg { width: 18px; height: 18px; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.themebtn .sun { display: none; }
:root[data-theme="light"] .themebtn .sun { display: block; }
:root[data-theme="light"] .themebtn .moon { display: none; }
.themebtn:active svg { transform: rotate(90deg) scale(0.9); }
.legend .lg-inv { background: var(--accent); }
.legend .lg-state { background: var(--ink); }
.legend .lg-run { background: var(--hi); box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.9); }
.legend .lg-bug { background: var(--bug); }
.key .k-factory { background: var(--ink); }
.key .k-ci { background: var(--ci); }
.key .k-people { background: repeating-linear-gradient(90deg, var(--people) 0 4px, transparent 4px 7px); height: 2px; }
.brand .ink { fill: var(--ink); }
.brand .ink-s { stroke: var(--ink); }
.brand .acc { fill: var(--accent); }

/* ---------- Scope: which repositories the page shows ---------- */
.scope {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; overflow-x: auto; scrollbar-width: none;
  padding: 10px 0; margin: 0 0 6px; background: linear-gradient(var(--bg) 70%, transparent);
}
.scope::-webkit-scrollbar { display: none; }
.scope button { flex: none; }
.scope .lbl { font: 600 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3); margin-right: 4px; }
.scope button {
  font: 500 13px/1 var(--sans); color: var(--ink2); background: rgba(var(--glass-rgb), 0.7); border: 1px solid var(--line2);
  border-radius: 999px; padding: 8px 12px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.scope button:hover { color: var(--ink); transform: translateY(-1px); }
.scope button[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.scope button .ct { font: 600 11px var(--mono); opacity: 0.7; }
.scope button i.live { width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); }
.scope button i.live.on { background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); animation: livepulse 1.8s infinite; }

/* ---------- Focus: one repository at a time ---------- */
/* With everything shown, another repository's items are quieter than
   Invariant's own, and come up when pointed at. Choosing one repository fades
   the others out, and showing everything again fades them back in. */
.aside { opacity: 0.5; }
.aside:hover, .aside:focus-within { opacity: 1; }
.orbit .aside .issue-dot { filter: none; }
.orbit .aside .issue-label { font-size: 10px; fill: var(--ink3); }
.leaving { animation: leave 0.36s ease forwards !important; pointer-events: none; }
@keyframes leave { to { opacity: 0; filter: blur(3px); } }
.arriving { animation: arrive 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both !important; }
@keyframes arrive { from { opacity: 0; filter: blur(3px); } }
@media (prefers-reduced-motion: reduce) { .leaving, .arriving { animation: none !important; } }
@keyframes livepulse { 70% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } }

/* ---------- Needs you ---------- */
.inbox { display: grid; gap: 14px; }
.calm { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px dashed var(--line2); border-radius: var(--radius); color: var(--ink2); }
.calm svg { width: 34px; height: 34px; flex: none; }
.need {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 20px;
  background: var(--card); border: 1px solid rgba(var(--people-rgb), 0.45); border-radius: var(--radius); overflow: hidden;
  animation: needin 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.need::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(600px 120px at 0% 0%, rgba(var(--people-rgb), 0.12), transparent 70%);
}
.need.failed { border-color: rgba(var(--bug-rgb), 0.5); }
.need.failed::before { background: radial-gradient(600px 120px at 0% 0%, rgba(var(--bug-rgb), 0.12), transparent 70%); }
@keyframes needin { from { opacity: 0; transform: translateY(12px) scale(0.99); } }
.need .glyph { width: 64px; height: 64px; }
.need-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.need-top .ref { font: 600 14px var(--mono); color: var(--people); }
.need.failed .need-top .ref { color: var(--bug); }
.need-top .title { font-weight: 600; font-size: 17px; }
.need-top .since { margin-left: auto; font: 500 12px var(--mono); color: var(--ink3); }
.need .ask { margin: 10px 0 4px; font-size: 15px; color: var(--ink); line-height: 1.5; }
.need .ask b { font-family: var(--mono); color: var(--people); margin-right: 6px; }
.need .ask strong { color: var(--ink); font-weight: 600; }
.need ol.planned { margin: 8px 0 4px; padding-left: 22px; display: grid; gap: 4px; font-size: 14.5px; color: var(--ink2); }
.need .ask b.same, .batch .ask b.same { font-family: inherit; font-weight: 600; color: var(--accent); margin-right: 4px; }
.batch {
  padding: 16px 20px; border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: var(--radius);
  background: linear-gradient(90deg, var(--accent-soft), transparent 70%), var(--card);
}
.batch .ask { margin: 0 0 4px; font-size: 15px; color: var(--ink); line-height: 1.5; }
.opts { display: grid; gap: 8px; margin: 10px 0 6px; }
.opt {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; text-align: left; width: 100%;
  background: rgba(var(--glass-rgb), 0.6); border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; cursor: pointer;
  color: var(--ink2); font: 400 14px/1.45 var(--sans); transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.opt:hover { border-color: rgba(var(--people-rgb), 0.6); transform: translateX(2px); color: var(--ink); }
.opt .id { font: 700 13px var(--mono); color: var(--people); width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: rgba(var(--people-rgb), 0.14); }
.opt .cp, .cmd .cp { font: 600 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); padding-top: 5px; white-space: nowrap; }
.opt.copied, .cmd.copied { border-color: var(--accent); }
.opt.copied .cp, .cmd.copied .cp { color: var(--accent); }
.cmds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.cmd {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border-radius: 10px; padding: 9px 12px;
  background: rgba(var(--glass-rgb), 0.75); border: 1px solid var(--line2); color: var(--ink); font: 500 13px var(--mono);
}
.cmd:hover { border-color: rgba(var(--ink-rgb), 0.4); }
.cmd.primary { border-color: rgba(var(--people-rgb), 0.6); }
.gh { font: 500 13px var(--sans); color: var(--ink2); text-decoration: none; margin-left: auto; }
.gh:hover { color: var(--ink); }
.toact { font: 600 13px var(--sans); color: var(--people); text-decoration: none; margin-left: 6px; }
.toact:hover { text-decoration: underline; }
.stmts { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.stmts summary { cursor: pointer; font-size: 14px; color: var(--ink2); }
.stmts ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.stmts li { font-size: 13.5px; color: var(--ink2); display: grid; grid-template-columns: 90px 1fr; gap: 10px; }
.stmts li .k { font: 600 10.5px/1.9 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }
.stmts li b { color: var(--ink); font-weight: 500; font-family: var(--mono); font-size: 12.5px; margin-right: 6px; }

/* ---------- The fleet ---------- */
.fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.system {
  position: relative; background: radial-gradient(120% 90% at 50% 40%, rgba(var(--ink-rgb), 0.04), transparent 60%), var(--card);
  border: 1px solid var(--line); border-radius: 22px; padding: 16px 16px 14px; overflow: hidden; transition: opacity 0.4s, filter 0.4s, border-color 0.3s;
}
.system:hover { border-color: rgba(var(--ink-rgb), 0.25); }
.system header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.system h3 { margin: 0; font-size: 18px; }
.system .meta { font: 500 12px var(--mono); color: var(--ink3); }
.system .state { margin-left: auto; }
.system svg.map { display: block; width: 100%; aspect-ratio: 1; margin-top: 6px; overflow: visible; }
.system .legend2 { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: 12.5px; color: var(--ink2); }
.system .legend2 span { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.system .legend2 span:hover { color: var(--ink); }
.system .legend2 i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.map .orbitline { fill: none; stroke: rgba(var(--ink-rgb), 0.07); stroke-width: 1; }
.map .outer { fill: none; stroke: rgba(var(--ink-rgb), 0.12); stroke-dasharray: 2 6; stroke-width: 1; }
.map .star { fill: var(--ink); }
.map .corona { fill: url(#coronaGrad); }
.map .planet { cursor: pointer; transition: transform 0.2s; }
.map .planet:hover circle.body { stroke: var(--ink); stroke-width: 2; }
.map .holds { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: 0.9; }
.map .fails { fill: none; stroke: var(--bug); stroke-width: 1.8; }
.map .comet-head { fill: var(--hi); }
.map .comet-head.people { fill: var(--people); }
.map .comet-head.bug { fill: var(--bug); }
.map .comet-label { font: 600 11px var(--mono); fill: var(--ink); }
.map .moon2 { fill: var(--ink2); }
.map .station2 { fill: var(--bg); stroke: rgba(var(--ink-rgb), 0.25); stroke-width: 1.2; }
.map .streak { stroke: url(#streakGrad); stroke-width: 1.5; stroke-linecap: round; }
.go-c { fill: #00add8; background: #00add8; }
.ts-c { fill: #3178c6; background: #3178c6; }
.py-c { fill: #f2c94c; background: #f2c94c; }

/* ---------- Projects as a table ---------- */
.viewtoggle { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; overflow: hidden; }
.viewtoggle button { font: 500 12.5px/1 var(--sans); color: var(--ink2); background: transparent; border: 0; padding: 8px 12px; cursor: pointer; }
.viewtoggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptable th { text-align: left; font: 600 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); padding: 10px 10px; border-bottom: 1px solid var(--line2); }
.ptable td { padding: 11px 10px; border-bottom: 1px solid var(--line); color: var(--ink2); vertical-align: top; }
.ptable tr { cursor: pointer; transition: background 0.2s; }
.ptable tbody tr:hover { background: rgba(var(--ink-rgb), 0.04); }
.ptable td.name { color: var(--ink); font-weight: 500; }
.ptable td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ptable .repo { font: 500 11.5px var(--mono); color: var(--ink3); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.more { margin-top: 12px; }
@media (max-width: 560px) {
  .need { grid-template-columns: 1fr; }
  .need .glyph { width: 44px; height: 44px; }
  .fleet { grid-template-columns: 1fr; }
  .stmts li { grid-template-columns: 1fr; }
}
.runchip { animation: needin 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* acting at /act (D-0065) */
.opt.pick.chosen { border-color: var(--people); background: rgba(var(--people-rgb), 0.12); color: var(--ink); }
.opt.pick.chosen .cp { color: var(--people); }
.cmd.act { cursor: pointer; }
.cmd.act[disabled] { opacity: 0.45; cursor: not-allowed; }
.confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(var(--people-rgb), 0.5); background: rgba(var(--people-rgb), 0.08); }
.confirm span { flex: 1 1 240px; font-size: 14px; }
.batchlist { flex: 1 1 100%; list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 4px; }
.batchlist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 14px; }
.confirm .batchlist .ref { flex: none; font: 600 13px var(--mono); color: var(--people); }
.batchlist b { font-weight: 600; }
.batchlist code { font: 500 12.5px var(--mono); color: var(--ink2); }
/* the card a link from the public page opened /act at */
.need.opened { border-color: var(--people); box-shadow: 0 0 0 1px var(--people), 0 0 32px rgba(var(--people-rgb), 0.28); }
.need.opened.failed { border-color: var(--bug); box-shadow: 0 0 0 1px var(--bug), 0 0 32px rgba(var(--bug-rgb), 0.28); }
.posted { margin: 12px 0 0; font: 500 13px var(--mono); color: var(--accent); animation: needin 0.5s ease both; }
.acterr { margin: 8px 0 0; font: 500 13px var(--mono); color: var(--bug); }
/* an issue acted on, shown until a read of GitHub finds what was posted (#175) */
.need.acted { border-color: rgba(var(--accent-rgb), 0.45); }
.need.acted::before { background: radial-gradient(600px 120px at 0% 0%, rgba(var(--accent-rgb), 0.1), transparent 70%); }
.need.acted .need-top .ref { color: var(--accent); }
.need.acted.opened { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 32px rgba(var(--accent-rgb), 0.28); }
.need .sent { margin: 8px 0 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(var(--glass-rgb), 0.6); font: 500 13px/1.6 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.pill.acting { border-color: rgba(var(--people-rgb), 0.55); color: var(--people); }
.pill.acting i { background: var(--people); }
@media (max-width: 560px) { .pill.acting { display: none; } }

/* a new issue, from /act */
#compose { margin: 0 0 16px; }
.newissue { font-size: 14px; }
.composer { display: grid; gap: 12px; padding: 18px; border-radius: 16px; border: 1px solid rgba(var(--people-rgb), 0.45); background: var(--card); animation: needin 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.composer .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.composer label { display: grid; gap: 6px; font: 600 11.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); }
.composer label i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink3); opacity: 0.8; }
.composer input, .composer select, .composer textarea { font: 400 15px/1.5 var(--sans, inherit); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; text-transform: none; letter-spacing: 0; min-width: 0; }
.composer textarea { resize: vertical; min-height: 120px; }
.composer input:focus, .composer select:focus, .composer textarea:focus { outline: none; border-color: var(--people); box-shadow: 0 0 0 3px rgba(var(--people-rgb), 0.18); }

/* ---------- Live: the running steps, a card for each (#97) ---------- */
:root { --search: #b48cff; }
:root[data-theme="light"] { --search: #7c4dff; }
.live-cards { display: grid; gap: 18px; }
.live-cards > .livestep { margin: 0; }
/* The fine print says it once, under the last card. */
.live-cards > .livestep:not(:last-child) .fineprint { display: none; }
.livestep {
  position: relative; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line2); border-radius: var(--radius);
  background: var(--card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden;
}
.livestep::before {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 360px; height: 360px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--agent-rgb), 0.12), transparent 65%);
}
.livestep.ended::before { background: radial-gradient(circle, rgba(var(--ink-rgb), 0.06), transparent 65%); }
.livestep.arrive { animation: arrive 0.6s ease-out; }
.livestep > header { margin-bottom: 18px; }
.livestep h2 .n { color: var(--accent); }
.livestep h2 q { color: var(--ink2); font-weight: 500; quotes: "\201C" "\201D"; }
.livestep h2 .by { color: var(--agent); font-size: 0.72em; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.livestep .lede b { color: var(--agent); font-weight: 600; }
.livedot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bug); margin-left: 4px; animation: beat 1.6s ease-out infinite; }
.livestep.ended .livedot { background: var(--ink3); animation: none; }
.live-top { display: grid; grid-template-columns: 128px 1fr; gap: 24px; align-items: center; }
.dial svg { width: 128px; height: 128px; display: block; overflow: visible; }
.dial .track { fill: none; stroke: var(--line2); stroke-width: 9; }
.dial .arc { fill: none; stroke-width: 9; stroke-linecap: round; transform-origin: 64px 64px; }
.dial .arc.fill { transition: stroke-dasharray 0.9s ease; }
.dial .arc.accent { stroke: var(--accent); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.45)); }
.dial .arc.people { stroke: var(--people); filter: drop-shadow(0 0 6px rgba(var(--people-rgb), 0.5)); }
.dial .arc.bug { stroke: var(--bug); filter: drop-shadow(0 0 6px rgba(var(--bug-rgb), 0.55)); }
.dial .arc.hand { stroke: var(--agent); filter: drop-shadow(0 0 6px rgba(var(--agent-rgb), 0.5)); transition: transform 1s linear; }
.dial .arc.hand.still { stroke: var(--ink3); filter: none; }
.dial .big { font: 600 22px var(--sans); fill: var(--ink); text-anchor: middle; dominant-baseline: middle; letter-spacing: -0.02em; }
.dial .small { font: 500 11px var(--sans); fill: var(--ink3); text-anchor: middle; }
.live-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 14px 18px; }
.stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stat .k { font: 500 11px var(--sans); text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink3); }
.stat b { font: 600 clamp(22px, 3vw, 30px)/1.1 var(--sans); color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat .u { font-size: 12px; color: var(--ink3); }
.strip { margin-top: 22px; width: 100%; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip svg { display: block; }
.strip .grid { stroke: var(--line2); stroke-dasharray: 2 5; }
.strip .tick { font: 500 10px var(--mono); fill: var(--ink3); text-anchor: middle; }
.strip .think { fill: var(--agent); }
.strip .think.on, .strip .span.on { animation: breathe 2.4s ease-in-out infinite; }
.strip .span { fill-opacity: 0.2; }
.strip .span.read { fill: var(--ci); }
.strip .span.search { fill: var(--search); }
.strip .span.edit { fill: var(--people); }
.strip .span.gate, .strip .span.check, .strip .span.test { fill: var(--accent); }
.strip .span.other { fill: var(--ink3); }
@keyframes breathe { 50% { fill-opacity: 0.85; } }
.strip .tool { stroke-width: 2.5; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.strip .tool.read { stroke: var(--ci); }
.strip .tool.search { stroke: var(--search); }
.strip .tool.edit { stroke: var(--people); }
.strip .tool.gate, .strip .tool.check, .strip .tool.test { stroke: var(--accent); stroke-width: 3.5; }
.strip .tool.other { stroke: var(--ink3); }
.strip .tool.new { animation: land 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
@keyframes land { from { transform: scaleY(0); opacity: 0; } 60% { opacity: 1; } }
.strip .checkpoint { stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.strip .checkpoint.pass { fill: var(--accent); stroke: var(--accent); }
.strip .checkpoint.fail { fill: var(--bug); stroke: var(--bug); }
.strip .checkpoint.new { animation: flash 1.1s ease-out both; }
@keyframes flash { 0% { transform: scale(2.8); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1); } }
.strip .nowline { stroke: var(--ink2); stroke-width: 1.5; stroke-dasharray: 3 3; }
.strip .nowdot { fill: var(--bug); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font: 500 12.5px var(--sans); color: var(--ink2); }
.legend .lg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legend .read i { background: var(--ci); }
.legend .search i { background: var(--search); }
.legend .edit i { background: var(--people); }
.legend .gate i, .legend .check i, .legend .test i { background: var(--accent); }
.legend .other i { background: var(--ink3); }
.legend .think i { background: var(--agent); }
.live-runs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.live-runs:empty { display: none; }
.live-files { margin-top: 20px; display: grid; gap: 6px; }
.live-files > .k { font: 500 11px var(--sans); text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink3); margin-bottom: 4px; }
.file {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(var(--glass-rgb), 0.5);
}
.file code { font: 12.5px var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.file code .dir { color: var(--ink3); }
.file .counts { display: flex; gap: 10px; font: 500 12px var(--sans); white-space: nowrap; }
.file .r { color: var(--ci); }
.file .e { color: var(--people); }
.file .size { font: 12px var(--mono); color: var(--ink3); min-width: 64px; text-align: right; }
.file.lit { border-color: rgba(var(--people-rgb), 0.6); animation: litpulse 2.2s ease-in-out infinite; }
.file.lit.fresh { animation: litin 0.8s ease-out, litpulse 2.2s ease-in-out 0.8s infinite; }
@keyframes litpulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--people-rgb), 0.2), 0 0 12px rgba(var(--people-rgb), 0.12); }
  50% { box-shadow: 0 0 0 1px rgba(var(--people-rgb), 0.45), 0 0 26px rgba(var(--people-rgb), 0.3); }
}
@keyframes litin { from { transform: translateX(-8px); opacity: 0.3; } }
.live-files .more, .livestep .muted { color: var(--ink3); font-size: 13px; }
.fineprint { margin: 18px 0 0; font-size: 12px; color: var(--ink3); }
@media (max-width: 560px) {
  .live-top { grid-template-columns: 96px 1fr; gap: 16px; }
  .dial svg { width: 96px; height: 96px; }
  .live-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file { grid-template-columns: 1fr auto; }
  .file .size { display: none; }
}