:root {
  --bg:         #0b0f17;
  --bg-panel:   #121822;
  --bg-elev:    #182030;
  --border:     #24324a;
  --text:       #e6edf3;
  --text-dim:   #9aa7b9;
  --accent:     #58a6ff;
  --accent-2:   #7ee787;
  --warn:       #d29922;
  --danger:     #f85149;
  --purple:     #d2a8ff;
  --grad-1:     #7ee787;
  --grad-2:     #58a6ff;
  --grad-3:     #d2a8ff;
}
html[data-theme="light"] {
  --bg:       #fafbfc;
  --bg-panel: #ffffff;
  --bg-elev:  #f1f3f6;
  --border:   #d7dde5;
  --text:     #1f2328;
  --text-dim: #5c6675;
  --accent:   #0969da;
  --accent-2: #1a7f37;
  --warn:     #9a6700;
  --danger:   #cf222e;
  --purple:   #8250df;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
code, pre, .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── layout ───────────────────────────────────────────────────────────── */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 88px 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: none; }

/* ── top nav ──────────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 15, 23, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
html[data-theme="light"] nav { background: rgba(250, 251, 252, 0.82); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; max-width: 1140px; margin: 0 auto;
}
.logo { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.logo span { color: var(--accent-2); }
.nav-links { display: flex; gap: 24px; font-size: 14px; color: var(--text-dim); }
.nav-links a { color: inherit; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.theme-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); padding: 6px 10px; border-radius: 6px;
  cursor: pointer; font-size: 14px;
}
.theme-btn:hover { color: var(--text); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 120px 0 96px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(88, 166, 255, 0.14), transparent 60%),
    radial-gradient(700px 480px at 90% 30%, rgba(126, 231, 135, 0.10), transparent 60%);
}
.eyebrow {
  display: inline-block;
  font-size: 13px; color: var(--accent-2); letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 20px;
}
h1 {
  font-size: clamp(36px, 5.6vw, 64px); line-height: 1.05;
  margin: 0 0 20px; letter-spacing: -0.02em; font-weight: 800;
  max-width: 20ch;
}
.hero p.lead {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--text-dim); max-width: 62ch; margin: 0 0 36px;
}
.hero-gradient {
  background: linear-gradient(92deg, var(--grad-1), var(--grad-2) 45%, var(--grad-3));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 8px; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-panel);
  color: var(--text); font-size: 14px; cursor: pointer;
  text-decoration: none; transition: transform 0.1s ease, border-color 0.1s ease;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn-primary {
  background: var(--accent); color: #0b0f17; border-color: transparent;
}
html[data-theme="light"] .btn-primary { color: #fff; }
.btn-primary:hover { filter: brightness(1.08); border-color: transparent; }

/* ── marquee stats row ────────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin-top: 72px;
}
.stat {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 22px;
}
.stat .n { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.stat .l { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ── section titles ───────────────────────────────────────────────────── */
.section-title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px;
}
.section-sub {
  color: var(--text-dim); font-size: 17px; margin: 0 0 56px; max-width: 64ch;
}

/* ── problem / solution split ─────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.split h3 { margin: 0 0 12px; font-size: 18px; letter-spacing: -0.005em; }
.pro-con { list-style: none; margin: 0; padding: 0; }
.pro-con li {
  padding: 14px 0; border-bottom: 1px dashed var(--border);
  display: grid; grid-template-columns: 24px 1fr; gap: 12px;
}
.pro-con li:last-child { border-bottom: none; }
.pro-con .ic { color: var(--text-dim); font-weight: 700; font-family: ui-monospace, monospace; }
.pro li .ic { color: var(--accent-2); }
.con li .ic { color: var(--danger); }

/* ── feature grid ─────────────────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3 { grid-template-columns: 1fr; } }
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 22px;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.card h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card .ic {
  display: inline-flex; width: 22px; height: 22px; border-radius: 6px;
  align-items: center; justify-content: center; font-family: monospace; font-size: 12px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}
.card .ic.g { background: color-mix(in srgb, var(--accent-2) 20%, transparent); color: var(--accent-2); }
.card .ic.w { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.card p { margin: 0; font-size: 14px; color: var(--text-dim); }

/* ── flow diagram ─────────────────────────────────────────────────────── */
.flow {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 32px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  align-items: stretch;
}
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; } }
.flow-step {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; text-align: center;
  position: relative;
}
.flow-step .n {
  display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #0b0f17; font-weight: 700; font-size: 13px;
  align-items: center; justify-content: center; margin-bottom: 10px;
}
html[data-theme="light"] .flow-step .n { color: #fff; }
.flow-step h5 { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.flow-step p { margin: 0; font-size: 12px; color: var(--text-dim); }
.flow-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 20px;
}
@media (max-width: 900px) { .flow-arrow { transform: rotate(90deg); padding: 4px 0; } }

/* ── safety / trust section ───────────────────────────────────────────── */
.trust-list { list-style: none; margin: 0; padding: 0; }
.trust-list li {
  display: grid; grid-template-columns: 28px 1fr; gap: 14px;
  padding: 16px 0; border-bottom: 1px dashed var(--border);
}
.trust-list li:last-child { border-bottom: none; }
.trust-list .badge {
  font-family: monospace; font-size: 12px; font-weight: 700;
  color: var(--accent-2);
}
.trust-list b { display: block; font-size: 15px; margin-bottom: 2px; }
.trust-list small { font-size: 13px; color: var(--text-dim); }

/* ── MR preview card ──────────────────────────────────────────────────── */
.mr-preview {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; margin-top: 32px;
  box-shadow: 0 24px 48px -24px rgba(0,0,0,0.4);
}
.mr-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text-dim);
}
.mr-head .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); }
.mr-head .branch { color: var(--accent); font-family: monospace; }
.mr-body { padding: 22px; }
.mr-body h5 { margin: 0 0 12px; font-size: 17px; }
.mr-body pre {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; margin: 0; overflow-x: auto;
  font-size: 12.5px; color: var(--text);
}
.mr-body .diff-add { color: var(--accent-2); }
.mr-body .diff-del { color: var(--danger); }
.mr-body .meta-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 14px; font-size: 12px; color: var(--text-dim);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 10px;
  background: var(--bg-elev); border: 1px solid var(--border);
}

/* ── status tags / platform tiers ─────────────────────────────────────── */
.tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--border); color: var(--text-dim); margin-left: auto;
  white-space: nowrap;
}
.tag.live { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); }
.tag.soon { color: var(--accent);   border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.tag.road { color: var(--warn);     border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); margin: -32px 0 32px; }
.legend .tag { margin-left: 0; margin-right: 6px; }
.stats.six { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
@media (max-width: 820px) { .stats.six { grid-template-columns: repeat(2, 1fr); } }
.footnote { margin-top: 24px; font-size: 13px; color: var(--text-dim); max-width: 80ch; }
.contact-box {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 36px; text-align: center;
}
.contact-box p { color: var(--text-dim); max-width: 60ch; margin: 0 auto 24px; }

/* ── deploy section ───────────────────────────────────────────────────── */
.code-block {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px 20px;
  font-family: monospace; font-size: 13.5px;
  overflow-x: auto;
}
.code-block .cmt { color: var(--text-dim); }
.code-block .k { color: var(--accent); }
.code-block .s { color: var(--accent-2); }

/* ── faq ──────────────────────────────────────────────────────────────── */
details.faq {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 10px;
}
details.faq summary {
  list-style: none; cursor: pointer; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
details.faq summary::after {
  content: "+"; color: var(--text-dim); font-weight: 400; font-size: 18px;
}
details.faq[open] summary::after { content: "−"; }
details.faq p { color: var(--text-dim); margin: 12px 0 0; font-size: 14.5px; }

/* ── footer ───────────────────────────────────────────────────────────── */
footer {
  padding: 44px 0 56px; color: var(--text-dim);
  font-size: 13px; text-align: center; border-top: 1px solid var(--border);
}
footer a { color: var(--text-dim); }

/* ════════════════════════════════════════════════════════════════════════
   Story pages — shared component library (see stories/_TEMPLATE.md)
   ════════════════════════════════════════════════════════════════════════ */

/* clickable cards on the hub */
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { text-decoration: none; }
a.card .more { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--accent); }
a.card:hover .more { text-decoration: underline; }

/* ── story hero ───────────────────────────────────────────────────────── */
.story-hero { padding: 72px 0 56px; position: relative; overflow: hidden; }
.story-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(800px 380px at 15% 0%, rgba(88, 166, 255, 0.13), transparent 60%),
    radial-gradient(600px 420px at 95% 40%, rgba(210, 168, 255, 0.09), transparent 60%);
}
.crumbs { font-size: 13px; color: var(--text-dim); margin-bottom: 22px; }
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--text); }
.story-hero h1 { font-size: clamp(32px, 4.6vw, 52px); max-width: 24ch; }
.story-hero .lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--text-dim); max-width: 66ch; margin: 0 0 28px; }
.story-hero .tag { margin-left: 0; vertical-align: middle; font-size: 11px; }
.glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
@media (max-width: 820px) { .glance { grid-template-columns: 1fr; } }
.glance div { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; }
.glance b { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; font-weight: 700; }

/* ── scrollytelling: steps on the left, sticky stage on the right ───── */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding: 24px 0 40px; }
.steps { padding: 2vh 0 30vh; }
.step:first-child { min-height: 56vh; justify-content: flex-start; padding-top: 8vh; }
.step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.35; transition: opacity 0.35s ease; }
.step.active { opacity: 1; }
.step .kicker { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent-2); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.step h3 { font-size: 24px; margin: 0 0 12px; letter-spacing: -0.01em; line-height: 1.2; }
.step p { color: var(--text-dim); font-size: 15.5px; margin: 0 0 12px; }
.step p b, .step li b { color: var(--text); }
.step ul { color: var(--text-dim); font-size: 15px; padding-left: 20px; margin: 0 0 12px; }
.step li { margin-bottom: 6px; }
.step .tag { margin-left: 0; }
.stage { position: sticky; top: 76px; height: calc(100vh - 100px); display: flex; align-items: center; }
.stage-inner { position: relative; width: 100%; min-height: 460px; }
.scene {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  opacity: 0; transform: translateY(14px) scale(0.985); pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.scene.active { opacity: 1; transform: none; pointer-events: auto; }
.scene-cap { font-size: 12px; color: var(--text-dim); text-align: center; }

@media (max-width: 900px) {
  .story { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stage { order: -1; top: 58px; height: 52vh; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 0; }
  .stage-inner { min-height: 0; height: 100%; }
  .scene { overflow: hidden; }
  .scene > * { transform: scale(0.86); transform-origin: top center; }
  .steps { padding: 4vh 0 20vh; }
  .step { min-height: 60vh; }
}

/* staggered reveal inside the active scene: <x class="rv" style="--i:3"> */
.scene .rv { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; transition-delay: 0s; }
.scene.active .rv { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 140ms + 120ms); }

/* ── window chrome (terminal / editor / browser / app) ─────────────── */
.win { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(0,0,0,0.55); }
.win-bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--bg-elev); font-size: 12px; color: var(--text-dim); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); display: inline-block; }
.win-bar i:nth-child(1) { background: #ff5f57; } .win-bar i:nth-child(2) { background: #febc2e; } .win-bar i:nth-child(3) { background: #28c840; }
.win-bar span { margin-left: 8px; font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-bar .right { margin-left: auto; }
.win-body { padding: 14px 16px; }
.win-body.flush { padding: 0; }

/* code / yaml / terminal text */
.code { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.6; color: var(--text); white-space: pre; overflow-x: auto; }
.code .c   { color: var(--text-dim); }                  /* comment */
.code .k   { color: var(--accent); }                    /* key */
.code .s   { color: var(--accent-2); }                  /* string / value */
.code .n   { color: var(--purple); }                    /* number / literal */
.code .w   { color: var(--warn); }
.code .add { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); display: inline-block; width: 100%; }
.code .del { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); display: inline-block; width: 100%; }
.code .hl  { background: color-mix(in srgb, var(--warn) 22%, transparent); border-radius: 3px; padding: 0 2px; }
.code .p   { color: var(--accent-2); user-select: none; }  /* shell prompt */
.code .ok  { color: var(--accent-2); } .code .err { color: var(--danger); }

/* ── pipeline row: boxes joined by arrows, a pulse travels along ─── */
.pipe { display: flex; align-items: stretch; gap: 0; }
.pipe .node { flex: 1; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 10px; text-align: center; font-size: 12.5px; }
.pipe .node b { display: block; font-size: 13px; margin-bottom: 2px; }
.pipe .node small { color: var(--text-dim); font-size: 11.5px; }
.pipe .node.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pipe .node.bot { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 18%, transparent); }
.pipe .link { flex: 0 0 34px; position: relative; align-self: center; height: 2px; background: var(--border); }
.pipe .link::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0; }
.scene.active .pipe .link::after { animation: pulse-run 1.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 300ms); }
@keyframes pulse-run { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.pipe.vert { flex-direction: column; }
.pipe.vert .link { flex: 0 0 22px; width: 2px; height: auto; align-self: center; }
.pipe.vert .link::after { left: -3px; top: 0; }
.scene.active .pipe.vert .link::after { animation-name: pulse-run-v; }
@keyframes pulse-run-v { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }

/* ── chat (Slack-like) ─────────────────────────────────────────────── */
.chat { display: flex; flex-direction: column; gap: 12px; }
.msg { display: grid; grid-template-columns: 34px 1fr; gap: 10px; font-size: 13.5px; }
.msg .av { width: 34px; height: 34px; border-radius: 8px; background: var(--bg-elev); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.msg.bot .av { background: color-mix(in srgb, var(--accent-2) 22%, var(--bg-elev)); color: var(--accent-2); }
.msg .who { font-weight: 700; font-size: 13px; }
.msg .who small { font-weight: 400; color: var(--text-dim); margin-left: 6px; font-size: 11.5px; }
.msg .txt { color: var(--text); }
.msg .txt code { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 12px; }
.msg .att { margin-top: 6px; border-left: 3px solid var(--accent); background: var(--bg-elev); border-radius: 0 6px 6px 0; padding: 8px 10px; font-size: 12.5px; color: var(--text-dim); }
.msg .att b { color: var(--text); }
.react { display: inline-flex; gap: 4px; margin-top: 6px; font-size: 12px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elev); }
.typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; } .typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

/* ── alert card (PagerDuty / Alertmanager) ─────────────────────────── */
.alert-card { background: var(--bg-panel); border: 1px solid var(--border); border-left: 4px solid var(--danger); border-radius: 10px; padding: 14px 16px; font-size: 13px; }
.alert-card.warn { border-left-color: var(--warn); }
.alert-card.ok { border-left-color: var(--accent-2); }
.alert-card .t { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.alert-card .m { color: var(--text-dim); font-family: ui-monospace, monospace; font-size: 12px; }
.scene.active .alert-card.firing { animation: ring 1.6s ease-in-out 2; }
@keyframes ring { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 25%, transparent); } }

/* ── cluster topology: zones → nodes → pods ────────────────────────── */
.topo { display: grid; grid-template-columns: repeat(var(--zones, 3), 1fr); gap: 10px; }
.zone { border: 1px dashed var(--border); border-radius: 10px; padding: 8px; }
.zone > small { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 6px; font-family: ui-monospace, monospace; }
.kn { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 8px; min-height: 66px; transition: all 0.5s ease; }
.kn:last-child { margin-bottom: 0; }
.kn > small { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-dim); margin-bottom: 6px; font-family: ui-monospace, monospace; }
.kn.spot > small::after { content: "spot"; color: var(--warn); }
.pods { display: flex; flex-wrap: wrap; gap: 5px; }
.pod { width: 22px; height: 22px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 35%, var(--bg-elev)); border: 1px solid var(--accent); font-size: 9px; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, monospace; color: var(--text); transition: all 0.5s ease; }
.pod.b { background: color-mix(in srgb, var(--purple) 30%, var(--bg-elev)); border-color: var(--purple); }
.pod.g { background: color-mix(in srgb, var(--accent-2) 30%, var(--bg-elev)); border-color: var(--accent-2); }
.pod.pending { background: transparent; border-style: dashed; border-color: var(--text-dim); color: var(--text-dim); }
.scene.active .kn.shot { animation: shot 1.2s ease forwards; animation-delay: 0.6s; }
@keyframes shot { 0% { } 30% { border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 30%, transparent); } 100% { opacity: 0.25; filter: grayscale(1); border-color: var(--danger); } }
.scene.active .pod.appear { animation: appear 0.6s ease both; animation-delay: calc(var(--i, 0) * 200ms + 1.4s); }
@keyframes appear { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
.status-line { font-family: ui-monospace, monospace; font-size: 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-panel); }
.status-line.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.status-line.good { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); }

/* ── version timeline (upgrades) ───────────────────────────────────── */
.vline { position: relative; padding: 18px 8px 8px; }
.vline .track { position: absolute; left: 8px; right: 8px; top: 34px; height: 3px; background: var(--border); border-radius: 2px; }
.vline .fill { position: absolute; left: 8px; top: 34px; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px; width: 0; transition: width 1.4s ease 0.3s; }
.scene.active .vline .fill { width: var(--fill, 50%); }
.vline .ticks { position: relative; display: flex; justify-content: space-between; }
.vline .tick { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; font-family: ui-monospace, monospace; color: var(--text-dim); width: 0; white-space: nowrap; }
.vline .tick::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-panel); border: 2px solid var(--border); margin-top: 10px; }
.vline .tick.cur::before { border-color: var(--accent); background: var(--accent); }
.vline .tick.tgt::before { border-color: var(--accent-2); background: var(--accent-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 25%, transparent); }
.vline .tick.bc::before { border-color: var(--danger); background: var(--danger); }
.vline .tick.moot::before { border-color: var(--warn); }
.vline .tick b { color: var(--text); font-weight: 600; }
.vline .tick em { font-style: normal; font-size: 10px; }
.vline .tick.bc em { color: var(--danger); } .vline .tick.moot em { color: var(--warn); } .vline .tick.tgt em { color: var(--accent-2); }

/* ── research list: rows that get checked off ──────────────────────── */
.checks { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.checks li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.checks li:last-child { border-bottom: none; }
.checks li::before { content: "·"; color: var(--text-dim); font-weight: 700; text-align: center; }
.checks li.y::before { content: "✓"; color: var(--accent-2); }
.checks li.n::before { content: "✕"; color: var(--danger); }
.checks li.q::before { content: "?"; color: var(--warn); }
.checks li small { color: var(--text-dim); font-family: ui-monospace, monospace; font-size: 11.5px; }

/* ── mini charts (inline SVG) ──────────────────────────────────────── */
.chart { width: 100%; height: auto; display: block; }
.chart .grid line { stroke: var(--border); stroke-width: 1; }
.chart .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.chart .ln.g { stroke: var(--accent-2); } .chart .ln.p { stroke: var(--purple); } .chart .ln.w { stroke: var(--warn); } .chart .ln.r { stroke: var(--danger); }
.scene.active .chart .ln { animation: draw 1.8s ease forwards; animation-delay: calc(var(--i, 0) * 250ms + 200ms); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart .area { opacity: 0; transition: opacity 0.8s ease 1.2s; }
.scene.active .chart .area { opacity: 0.18; }
.chart .lbl { fill: var(--text-dim); font-size: 10px; font-family: ui-monospace, monospace; }
.chart .ref { stroke-dasharray: 4 4; stroke-width: 1.5; }

/* ── grafana-ish dashboard mock ────────────────────────────────────── */
.dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gp { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.gp h6 { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--text-dim); }
.gp.w2 { grid-column: span 2; } .gp.w4 { grid-column: span 4; }
.gp .big { font-size: 22px; font-weight: 700; }
.gp .big.g { color: var(--accent-2); } .gp .big.w { color: var(--warn); } .gp .big.r { color: var(--danger); }
.dash-vars { display: flex; gap: 8px; font-size: 11px; margin-bottom: 8px; }
.dash-vars span { border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; background: var(--bg-elev); color: var(--text-dim); }
.dash-vars b { color: var(--text); font-weight: 600; }

/* ── mock merge request (full) ─────────────────────────────────────── */
.mr { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 48px -24px rgba(0,0,0,0.45); }
.mr-top { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
.mr-top .state { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, var(--text-dim) 20%, transparent); color: var(--text-dim); margin-right: 8px; }
.mr-top h4 { display: inline; font-size: 18px; margin: 0; }
.mr-top .sub { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; }
.mr-top .sub code { color: var(--accent); }
.labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lbl-pill { font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-dim); background: var(--bg-elev); }
.lbl-pill.g { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); }
.lbl-pill.b { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.lbl-pill.w { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.lbl-pill.r { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.mr-tabs { display: flex; gap: 20px; padding: 0 22px; border-bottom: 1px solid var(--border); font-size: 13px; }
.mr-tabs span { padding: 10px 0; color: var(--text-dim); border-bottom: 2px solid transparent; cursor: pointer; user-select: none; }
.mr-tabs span.on { color: var(--text); border-bottom-color: var(--accent); }
.mr-pane { display: none; padding: 20px 22px; }
.mr-pane.on { display: block; }
.mr-pane h5 { font-size: 15px; margin: 18px 0 8px; }
.mr-pane h5:first-child { margin-top: 0; }
.mr-pane p, .mr-pane li { font-size: 14px; color: var(--text-dim); }
.mr-pane p b, .mr-pane li b { color: var(--text); }
.mr-pane ul, .mr-pane ol { padding-left: 20px; }
.mr-pane .code { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.mr-pane blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--border); color: var(--text-dim); font-size: 13px; background: var(--bg-elev); border-radius: 0 6px 6px 0; }
.mr-pane table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.mr-pane th, .mr-pane td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.mr-pane th { color: var(--text-dim); font-weight: 600; font-size: 12px; }
.task { list-style: none; padding-left: 0 !important; }
.task li::before { content: "☐ "; color: var(--text-dim); }
.banner { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 10px 0; }
.banner.w { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.banner.r { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.banner.g { border-color: color-mix(in srgb, var(--accent-2) 50%, var(--border)); background: color-mix(in srgb, var(--accent-2) 8%, transparent); }
.note { border-top: 1px solid var(--border); padding: 14px 22px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; font-size: 13px; }
.note .av { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-elev); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.note.bot .av { color: var(--accent-2); }
.note .who { font-weight: 700; } .note .who small { color: var(--text-dim); font-weight: 400; margin-left: 6px; }
.note p { margin: 4px 0 0; color: var(--text-dim); }

/* ── generic story blocks below the scrolly part ──────────────────── */
.story-section { padding: 64px 0; border-bottom: 1px solid var(--border); }
.story-section h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 10px; letter-spacing: -0.01em; }
.story-section > .container > p.sub { color: var(--text-dim); max-width: 66ch; margin: 0 0 32px; }
.guards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 820px) { .guards { grid-template-columns: 1fr; } }
.guards div { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.guards b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.guards span { font-size: 13.5px; color: var(--text-dim); }
.status-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .status-box { grid-template-columns: 1fr; } }
.status-box div { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; font-size: 13.5px; color: var(--text-dim); }
.status-box .tag { margin: 0 0 8px; display: inline-block; }
.status-box ul { margin: 0; padding-left: 18px; }
.pager { display: flex; justify-content: space-between; gap: 16px; padding: 40px 0; }
.pager a { flex: 1; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; font-size: 14px; color: var(--text); }
.pager a:hover { border-color: var(--accent); text-decoration: none; }
.pager a small { display: block; color: var(--text-dim); font-size: 12px; margin-bottom: 2px; }
.pager a.next { text-align: right; }

/* ── story index ───────────────────────────────────────────────────── */
.group-title { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 48px 0 16px; font-weight: 700; }
.group-title:first-of-type { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scene .rv { opacity: 1; transform: none; }
  .chart .ln { stroke-dashoffset: 0; }
  .chart .area { opacity: 0.18; }
  .vline .fill { width: var(--fill, 50%); }
  .step { opacity: 1; }
}

/* no-JS fallback: every scene stacks inline under the steps */
html:not(.js) .stage { position: static; height: auto; }
html:not(.js) .stage-inner { min-height: 0; }
html:not(.js) .scene { position: static; opacity: 1; transform: none; margin-bottom: 24px; }
html:not(.js) .scene .rv { opacity: 1; transform: none; }
html:not(.js) .step { opacity: 1; min-height: 0; padding: 24px 0; }
html:not(.js) .mr-pane { display: block; }

/* small screens: compact nav, never scroll sideways */
@media (max-width: 720px) {
  .nav-links { gap: 14px; font-size: 13px; }
  .nav-links a:nth-child(n+3) { display: none; }
  .nav-inner { gap: 12px; }
  .pipe { flex-wrap: wrap; row-gap: 8px; }
  .pipe .link { flex-basis: 18px; }
  .topo { grid-template-columns: repeat(var(--zones, 3), minmax(0, 1fr)); }
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash .gp.w4 { grid-column: span 2; }
  .mr-tabs { overflow-x: auto; }
  .pager { flex-direction: column; }
}
body { overflow-x: hidden; }
.win, .mr, .stage-inner, .scene { max-width: 100%; }