:root {
  --bg: #07080d;
  --ink: #e8edf5;
  --mute: #8b95a8;
  --cyan: #3df0ff;
  --magenta: #ff2d8a;
  --amber: #ffc53d;
  --line: color-mix(in oklab, var(--cyan) 28%, transparent);
  --card: #0e1018;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans: "Satoshi", "Geist", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; }
body {
  min-height: 100vh;
  background-image:
    radial-gradient(1200px 500px at 10% -10%, color-mix(in oklab, var(--cyan) 12%, transparent), transparent 60%),
    radial-gradient(800px 400px at 90% 0%, color-mix(in oklab, var(--magenta) 10%, transparent), transparent 55%);
}
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cyan); }
.skip {
  position: absolute; left: -999px;
}
.skip:focus { left: 1rem; top: 1rem; background: var(--card); padding: 0.4rem 0.6rem; }

.sponsor-bar {
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-align: center;
}
.sponsor-bar a {
  display: block;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.45rem 1.25rem;
  color: var(--mute);
  text-decoration: none;
}
.sponsor-bar a:hover { color: var(--amber); }

.masthead { border-bottom: 1px solid var(--line); }
.masthead-inner {
  max-width: 1120px; margin: 0 auto; padding: 1rem 1.25rem;
  display: flex; gap: 8.25rem; align-items: center; justify-content: flex-start; flex-wrap: wrap;
}
.lockup { display: flex; align-items: baseline; gap: 0.6rem; text-decoration: none; flex: 0 0 auto; }
.wordmark { font-weight: 700; letter-spacing: -0.03em; font-size: 1.25rem; }
.tag { font-family: var(--mono); font-size: 0.72rem; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.08em; }
nav { display: flex; gap: 0.85rem; font-size: 0.92rem; align-items: center; flex-wrap: wrap; font-family: var(--serif); }
nav a { text-decoration: none; color: var(--mute); }
nav a:hover { color: var(--ink); }
.socials { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: 0.15rem; }
.icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; color: var(--mute);
}
.icon-link.rss { width: auto; gap: 0.3rem; font-size: 0.82rem; padding-inline: 0.15rem; }
.icon-link:hover { color: var(--cyan); }

.nav-search { position: relative; }
.nav-search > a { text-decoration: none; color: var(--mute); }
.nav-search > a:hover, .nav-search:focus-within > a { color: var(--ink); }
.site-search {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 8;
  padding: 0.45rem;
  background: var(--card);
  border: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav-search:hover .site-search,
.nav-search:focus-within .site-search {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.site-search input, .search-page-form input {
  width: 11rem;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 0.35rem 0.55rem;
}
.site-search input::placeholder, .search-page-form input::placeholder { color: var(--mute); }
.site-search button, .search-page-form button {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--cyan);
  border: 0;
  padding: 0.42rem 0.55rem;
  cursor: pointer;
}
.site-search button:hover, .search-page-form button:hover { background: var(--ink); }
.search-page-form {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin: 0.85rem 0 1.1rem;
}
.search-page-form input { width: min(22rem, 100%); flex: 1; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

main { max-width: 1120px; width: 100%; margin: 0 auto; padding: 1.25rem; display: grid; gap: 2.5rem; min-width: 0; }

.ticker {
  display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--line); padding: 0.55rem 0.8rem; font-family: var(--mono); font-size: 0.78rem;
  color: var(--mute);
}
.ticker a { color: var(--cyan); }
.pulse {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--amber) 70%, transparent);
  animation: beat 2.4s ease-out infinite;
}
.ticker[data-status="live"] .pulse { background: var(--cyan); }
.ticker[data-status="failed"] .pulse { background: var(--magenta); }
@keyframes beat {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--amber) 55%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
}

.hero { display: grid; gap: 0.7rem; }
.kicker { color: var(--mute); max-width: 46rem; line-height: 1.5; font-family: var(--serif); margin: 0; }
.hero h1, .card h3, .prose h1 {
  font-family: var(--serif); font-weight: 560; letter-spacing: -0.02em; line-height: 1.15;
}
.hero h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0.3rem 0 0.6rem; }
.feature { min-width: 0; }
.feature a {
  display: grid; gap: 1.25rem; text-decoration: none; align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
.feature img, .feature .plate {
  width: 100%; max-width: 280px; height: 180px; object-fit: cover; display: block;
}
.feature .plate { min-height: 180px; }
@media (min-width: 800px) {
  .feature a { grid-template-columns: 240px minmax(0, 1fr); }
  .feature img, .feature .plate { max-width: none; }
}
.dek { color: var(--mute); font-size: 1.05rem; line-height: 1.5; font-family: var(--serif); }

.plate {
  min-height: 180px; border: 1px solid var(--line); background:
    repeating-linear-gradient(90deg, transparent, transparent 23px, var(--line) 24px),
    repeating-linear-gradient(0deg, transparent, transparent 23px, var(--line) 24px);
  display: grid; place-items: end start; padding: 0.8rem;
}
.plate span {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber);
}
.plate.howtos span { color: var(--magenta); }

.split { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.6fr 0.9fr; }
}
.rail-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); }
.rail-head h1, .rail-head h2 { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.rail-label { font-family: var(--mono); font-size: 0.7rem; color: var(--amber); text-transform: uppercase; letter-spacing: 0.12em; margin: 0; }

.grid { display: grid; gap: 1.2rem; }
@media (min-width: 700px) { .grid { grid-template-columns: 1fr 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); }
.card a { display: grid; gap: 0.6rem; padding: 0; text-decoration: none; }
.card h3 { margin: 0 0.9rem; font-size: 1.15rem; }
.card p, .card time { margin: 0 0.9rem; color: var(--mute); font-size: 0.92rem; }
.card p { font-family: var(--serif); line-height: 1.45; }
.card time { display: block; padding-bottom: 0.9rem; font-family: var(--mono); font-size: 0.72rem; }
.card .plate { min-height: 110px; border: 0; border-bottom: 1px solid var(--line); }

.xpulse { border-left: 1px solid var(--line); padding-left: 1rem; }
.xpulse ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; }
.xpulse li { border-bottom: 1px solid var(--line); padding-bottom: 0.8rem; }
.xpulse ol a { text-decoration: none; display: grid; gap: 0.3rem; }
.xpulse-more { color: inherit; text-decoration: none; }
.xpulse-more:hover { text-decoration: underline; }
.who { font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-family: var(--serif); }
.x-av { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.x-av.fallback {
  background: conic-gradient(from 120deg, var(--cyan), var(--magenta), var(--amber), var(--cyan));
}
.xpulse .empty { color: var(--mute); font-size: 0.88rem; }
.handle { font-family: var(--mono); color: var(--cyan); font-size: 0.78rem; }
.xpulse p { margin: 0; color: var(--ink); line-height: 1.45; font-family: var(--serif); }
.meta, .fresh { font-family: var(--mono); font-size: 0.7rem; color: var(--mute); }

.agent-strip {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.8rem;
}
.agent-strip li {
  border: 1px solid var(--line); padding: 0.8rem; display: grid; gap: 0.25rem; background: var(--card);
}
.agent-strip span { color: var(--mute); font-size: 0.8rem; }
.mono { font-family: var(--mono); font-size: 0.72rem !important; color: var(--cyan) !important; }
.avatar {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); display: block;
  background: conic-gradient(from 120deg, var(--cyan), var(--magenta), var(--amber), var(--cyan));
}
.agent-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.9rem;
}
.agent-card { background: var(--card); border: 1px solid var(--line); }
.agent-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.agent-card .pad { padding: 0.7rem 0.8rem 0.9rem; display: grid; gap: 0.2rem; }
.agent-card h2 { font-family: var(--serif); font-size: 1.05rem; margin: 0; }
.agent-card p { margin: 0; color: var(--mute); font-size: 0.82rem; }
.agent-card .agent-out { color: var(--ink); font-size: 0.78rem; }

.agent-bio { margin: 1.8rem 0 2.1rem; }
.agent-bio::after { content: ""; display: table; clear: both; }
.agent-bio h2 { margin: 0 0 0.45rem; }
.agent-bio img {
  float: left;
  width: 7.5rem;
  height: 7.5rem;
  object-fit: cover;
  margin: 0.15rem 1.15rem 0.7rem 0;
  border: 1px solid var(--line);
}
@media (min-width: 720px) {
  .agent-bio img { width: 9rem; height: 9rem; }
}
@media (max-width: 560px) {
  .agent-bio img {
    float: none;
    display: block;
    width: 6.5rem;
    height: 6.5rem;
    margin: 0 0 0.75rem;
  }
}

.copy-page { display: grid; gap: 1.4rem; min-width: 0; }
.vis-note {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--mute);
  line-height: 1.45;
}
.vis-note code { color: var(--cyan); font-size: 0.95em; }
.vis-title {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 0.7rem;
}
.pipeline-visuals, .handoff { min-width: 0; }
.handoff, .run-flow {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0.55rem;
}
.handoff { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.run-flow { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .run-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .run-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.handoff li, .run-flow li {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 0.75rem 0.8rem 0.85rem;
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}
.handoff .n, .run-flow .n {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--cyan);
}
.handoff strong, .run-flow strong {
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 560;
}
.handoff span, .run-flow span:not(.n) {
  color: var(--mute);
  font-size: 0.78rem;
  line-height: 1.35;
}

.vis-block { min-width: 0; }
.vis-block + .vis-block { margin-top: 1.5rem; }
.day-clock {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0.9rem;
  display: grid;
  gap: 0.75rem;
}
.day-track {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 3px;
  height: 2.4rem;
}
.hour {
  display: block;
  height: 100%;
  background: color-mix(in oklab, var(--ink) 8%, transparent);
}
.hour.desk { background: var(--cyan); }
.hour.pulse { background: var(--amber); }
.day-legend {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.45rem 1rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--mute);
}
.day-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.swatch {
  width: 0.7rem; height: 0.7rem; display: inline-block;
  background: color-mix(in oklab, var(--ink) 8%, transparent);
  border: 1px solid var(--line);
}
.swatch.desk { background: var(--cyan); }
.swatch.pulse { background: var(--amber); }

.store-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0.7rem;
}
@media (min-width: 700px) {
  .store-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.store-grid li {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 0.8rem 0.85rem 0.95rem;
  display: grid;
  gap: 0.3rem;
}
.store-grid strong {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
}
.store-grid span { color: var(--mute); font-size: 0.86rem; line-height: 1.4; }

.stamp {
  margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.75rem; color: var(--mute);
  display: grid; gap: 0.55rem;
}
.stamp-kicker { margin: 0; color: var(--cyan); letter-spacing: 0.08em; text-transform: uppercase; }
.stamp-chain {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.15rem;
}
.stamp-chain li:not(:last-child)::after {
  content: "→"; color: var(--cyan); margin: 0 0.45rem;
}
.stamp-meta { margin: 0; }
.stamp-meta a, .related a { color: var(--cyan); }
.related { margin-top: 2rem; }
.related ul { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.55rem; }
.related li { display: grid; gap: 0.15rem; }
.related time { font-family: var(--mono); font-size: 0.72rem; color: var(--mute); }

.prose { max-width: 68ch; width: 100%; margin-inline: auto; font-family: var(--serif); line-height: 1.55; }
.prose h1 { font-size: 2rem; }
.prose h2, .prose h3 { font-family: var(--serif); }
.prose pre, .prose code { font-family: var(--mono); font-size: 0.88em; }
.prose pre { overflow: auto; padding: 0.8rem; border: 1px solid var(--line); background: var(--card); }
.prose img { max-width: 100%; height: auto; }
.list-grid { margin-top: 1rem; }
.pager {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1.5rem; font-family: var(--mono); font-size: 0.8rem; color: var(--mute);
}
.story { max-width: 68ch; width: 100%; margin-inline: auto; font-family: var(--serif); }
.story-head { max-width: none; }
.story .dek { font-family: var(--serif); }
.story-head h1 { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2; margin: 0.35rem 0 0.6rem; }
.byline, .desk-stamp { color: var(--mute); font-size: 0.9rem; }
.desk-stamp { font-family: var(--mono); font-size: 0.75rem; }
.desk-stamp a { color: var(--cyan); }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tags span {
  font-family: var(--mono); font-size: 0.68rem; color: var(--amber);
  border: 1px solid var(--line); padding: 0.15rem 0.4rem;
}
.bleed { margin: 0 0 1.25rem; }
.bleed img { width: 100%; max-height: 280px; object-fit: cover; border: 1px solid var(--line); display: block; }
.card img { width: 100%; height: 140px; object-fit: cover; display: block; }
.story .prose { max-width: none; }
.site-foot {
  max-width: 1120px; margin: 0 auto; padding: 1.4rem 1.25rem 2.2rem;
  color: var(--mute); font-size: 0.8rem; border-top: 1px solid var(--line);
  text-align: center; display: grid; gap: 0.35rem;
}
.site-foot p { margin: 0; }
.site-foot a { color: var(--mute); }
.site-foot a:hover { color: var(--cyan); }

.run-index .runs-table, .run-detail { max-width: 68ch; margin-inline: auto; }
.runs-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 1.2rem; }
.runs-table th, .runs-table td {
  text-align: left; padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.runs-table th { font-family: var(--mono); font-size: 0.7rem; color: var(--mute); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.run-detail h1 { font-size: 1.35rem; margin: 0.2rem 0 0.7rem; }
.run-meta, .run-links, .run-social {
  display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem; color: var(--mute);
  font-family: var(--mono); font-size: 0.78rem; margin: 0 0 0.8rem;
}
.run-links a, .run-social a { color: var(--cyan); }
.chip {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 0.1rem 0.4rem; color: var(--mute);
}
.chip-success { color: var(--cyan); }
.chip-running { color: var(--amber); }
.chip-failed { color: var(--magenta); }
.run-pieces ul { list-style: none; padding: 0; margin: 0.5rem 0 1.4rem; display: grid; gap: 0.45rem; }
.run-pieces li { display: grid; gap: 0.1rem; }
.run-pieces a { color: var(--cyan); }
.event-list { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.7rem; }
.event-head {
  display: flex; flex-wrap: wrap; gap: 0.45rem 0.7rem; align-items: baseline;
  font-family: var(--mono); font-size: 0.75rem; color: var(--mute);
}
.event-agent { color: var(--cyan); }
.event-kind { color: var(--amber); }
.event-list details { margin-top: 0.25rem; }
.event-list summary { cursor: pointer; font-family: var(--mono); font-size: 0.72rem; color: var(--mute); }
.event-list pre {
  overflow: auto; padding: 0.7rem; border: 1px solid var(--line); background: var(--card);
  font-family: var(--mono); font-size: 0.78rem; margin: 0.35rem 0 0;
}

@media (max-width: 640px) {
  nav { width: 100%; }
  .site-search { right: auto; left: 0; }
}