:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --ink: #14212b;
  --muted: #4d5d6b;
  --line: #d3dbe2;
  --accent: #14212b;
  --eye: #c98a12;
  --done: #1f7a56;
  --done-bg: #e1f3ea;
  --live: #1f5fae;
  --live-bg: #e2edfa;
  --built: #8f5300;
  --built-bg: #fcefd5;
  --none: #5a6671;
  --none-bg: #eef1f3;
  --human: #b03a08;
  --human-bg: #fde8da;
  --rail: #6b3a9c;
  --rail-bg: #f1e8fa;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f171e;
    --surface: #17222c;
    --ink: #e8eef3;
    --muted: #9fb0be;
    --line: #2b3a47;
    --accent: #e8eef3;
    --eye: #f2b84b;
    --done: #55c79a;
    --done-bg: #12332a;
    --live: #6aa7f0;
    --live-bg: #14283f;
    --built: #f0b24d;
    --built-bg: #3a2b0f;
    --none: #98a6b2;
    --none-bg: #1d2832;
    --human: #ff9a66;
    --human-bg: #402316;
    --rail: #c79cf0;
    --rail-bg: #2d1f3f;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.6 var(--sans);
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
a { color: var(--live); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--eye); outline-offset: 2px; }

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 16px; }
.wrap.wide { max-width: 72rem; }

/* header */
.top { padding: 56px 0 28px; border-bottom: 1px solid var(--line); }
.mark { margin: 0 0 12px; }
.eye {
  display: inline-block; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle, var(--bg) 0 22%, var(--eye) 23% 58%, var(--ink) 59%);
}
h1 { font: 700 clamp(2.6rem, 9vw, 4.4rem)/1 var(--serif); letter-spacing: -0.02em; margin: 0 0 16px; }
.lede { font: 1.25rem/1.5 var(--serif); max-width: 36rem; margin: 0 0 14px; }
.meta { color: var(--muted); margin: 0 0 22px; font-size: .95rem; }
nav { display: flex; flex-wrap: wrap; gap: 8px; }
nav a {
  color: var(--ink); text-decoration: none; padding: 8px 14px; min-height: 40px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .95rem;
}
nav a:hover { border-color: var(--ink); }
nav a:focus-visible { outline: 3px solid var(--eye); }

/* sections */
section { padding: 48px 0 16px; }
section.wide { padding-bottom: 32px; }
h2 { font: 700 clamp(1.8rem, 5vw, 2.4rem)/1.15 var(--serif); margin: 0 0 6px; letter-spacing: -0.01em; }
h3 { font: 700 1.1rem/1.3 var(--sans); margin: 28px 0 8px; }
.sub { color: var(--muted); margin: 0 0 24px; }

/* steps */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li {
  counter-increment: s; position: relative; padding: 14px 16px 14px 58px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.steps li::before {
  content: counter(s); position: absolute; left: 14px; top: 12px; width: 32px; height: 32px;
  border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: var(--ink); color: var(--bg);
}
.steps li.human { background: var(--human-bg); border-color: var(--human); }
.steps li.human::before { background: var(--human); color: #fff; }
.note { color: var(--muted); font-size: .92rem; }
.chip { padding: 2px 8px; border-radius: 999px; font-size: .85rem; }
.human-chip { background: var(--human-bg); border: 1px solid var(--human); color: var(--ink); }

.gloss { display: grid; gap: 8px; margin: 0; }
.gloss div { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.gloss dt { font-weight: 700; }
.gloss dd { margin: 2px 0 0; color: var(--muted); }
@media (min-width: 640px) { .gloss { grid-template-columns: 1fr 1fr; } }

/* legend */
.legend { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; }
.legend li { display: flex; align-items: center; gap: 8px; }
.sw { width: 22px; height: 16px; border-radius: 4px; border: 2px solid; display: inline-block; flex: none; }
.s-done { background: var(--done-bg); border-color: var(--done); }
.s-live { background: var(--live-bg); border-color: var(--live); }
.s-built { background: var(--built-bg); border-color: var(--built); }
.s-none { background: var(--none-bg); border-color: var(--none); border-style: dashed; }
.s-human { background: var(--surface); border-color: var(--human); box-shadow: 0 0 0 2px var(--human-bg); }

/* diagram */
.s-rail { background: var(--rail-bg); border-color: var(--rail); border-radius: 999px; }

.lanes { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
.lane { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px 12px 14px; position: relative; }
.lane h3 {
  margin: 10px 0 12px; padding-bottom: 8px; border-bottom: 4px solid var(--none);
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 1.05rem;
}
.lane h3 small { font-weight: 400; color: var(--muted); font-size: .82rem; }
.l-research h3 { border-color: var(--live); }
.l-decide { border: 3px solid var(--human); background: var(--human-bg); }
.l-decide h3 { border-color: var(--human); }
.l-build h3 { border-color: var(--built); }
.l-launch h3 { border-bottom-style: dashed; }
.lane ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }

.st {
  position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 4px 10px; align-items: start;
  background: var(--surface); border: 2px solid var(--line); border-radius: 10px; padding: 10px 12px 10px 10px;
}
.st .n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .9rem; background: var(--ink); color: var(--bg); grid-row: span 2;
}
.st b { display: block; font-size: 1rem; line-height: 1.3; }
.st p { margin: 2px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.4; }
.st em { grid-column: 2; font-style: normal; font-size: .76rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.st.live { background: var(--live-bg); border-color: var(--live); } .st.live .n { background: var(--live); } .st.live em { color: var(--live); }
.st.built { background: var(--built-bg); border-color: var(--built); } .st.built .n { background: var(--built); } .st.built em { color: var(--built); }
.st.done { background: var(--done-bg); border-color: var(--done); } .st.done .n { background: var(--done); } .st.done em { color: var(--done); }
.st.none, .st.edge { background: var(--none-bg); border-color: var(--none); border-style: dashed; } .st.none .n, .st.edge .n { background: var(--none); } .st.none em, .st.edge em { color: var(--none); }
.st.edge { background-image: repeating-linear-gradient(135deg, transparent 0 8px, var(--line) 8px 9px); }
.st.human { border-color: var(--human); border-width: 4px; box-shadow: 0 0 0 3px var(--human-bg); }
.st .tag { display: inline-block; margin: 6px 6px 0 0; padding: 1px 8px; border-radius: 4px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--human); color: var(--bg); }
.st .rail {
  display: block; width: fit-content; max-width: 100%; margin: 6px 0 0; padding: 3px 10px; border-radius: 10px;
  font-size: .78rem; font-weight: 600; line-height: 1.35; color: var(--ink); background: var(--rail-bg); border: 1px solid var(--rail);
}
.st .rail.done { background: var(--done-bg); border-color: var(--done); }
.st .tag + .rail { display: inline-block; }

/* arrows: down inside a lane (stacked), right between lanes (wide) */
.lane li + li::before {
  content: "\2193"; position: absolute; left: 24px; top: -21px; height: 20px; line-height: 20px;
  font-size: 1.2rem; font-weight: 700; color: var(--muted);
}
.lane + .lane::before {
  content: "\2193"; position: absolute; left: 50%; top: -17px; font-size: 1.3rem; line-height: 1; font-weight: 700; color: var(--muted);
}
.also { margin-top: 32px; }
.extras { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.extras .st .n:empty { display: none; }
.extras .st:has(.n:empty) { grid-template-columns: 1fr; }
.extras .st:has(.n:empty) em { grid-column: 1; }

@media (min-width: 900px) {
  .lanes { grid-template-columns: 1.1fr 1fr 1.1fr .9fr; gap: 28px; }
  .lane + .lane::before { left: -24px; top: 24px; content: "\2192"; }
  .extras { grid-template-columns: 1fr 1fr; }
}

/* guardrails, status, discussion */
.rails, .phases, .prompts { display: grid; gap: 12px; }
.rails article, .phases article, .prompts article {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px 16px;
}
.rails h3, .phases h3, .prompts h3 { margin-top: 14px; }
.rails p, .phases p { margin: 0; }
@media (min-width: 760px) {
  .rails { grid-template-columns: 1fr 1fr; }
  .phases { grid-template-columns: 1fr 1fr; }
  .prompts { grid-template-columns: 1fr; }
}
.badge { display: inline-block; font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 2px solid; margin: 0 0 8px !important; }
.b-live { background: var(--live-bg); border-color: var(--live); }
.b-built { background: var(--built-bg); border-color: var(--built); }
.b-none { background: var(--none-bg); border-color: var(--none); border-style: dashed; }

.todo { padding-left: 1.3rem; }
.todo li { margin: 6px 0; }
.prompts ul { padding-left: 1.2rem; margin: 0; }
.prompts li { margin: 8px 0; }

footer { margin-top: 56px; padding: 24px 0 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }