:root {
  --bg: #0b0e0c;
  --bg-raise: #101411;
  --ink: #d7e0d4;
  --ink-dim: #8b968a;
  --green: #4ade80;
  --green-dim: #22553c;
  --amber: #fbbf24;
  --red: #f87171;
  --line: #1f2a20;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* faint CRT scanlines over everything */
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(
    0deg, transparent 0 2px, rgba(0, 0, 0, 0.12) 2px 4px);
  mix-blend-mode: multiply;
}

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

code {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.92em;
}

/* ---------- header / hero ---------- */
.hero {
  max-width: 1100px; margin: 0 auto; padding: 28px 24px 72px;
}

nav {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 56px;
}
.brand {
  font-size: 22px; font-weight: 700; letter-spacing: -0.5px;
  display: inline-flex; align-items: center; gap: 10px;
}
.brand-mark {
  width: 22px; height: 22px; border-radius: 5px;
  box-shadow: 0 0 0 1px var(--line);
}
.brand .cursor { color: var(--green); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nav-links { display: flex; gap: 22px; font-size: 14px; }
.nav-links a { color: var(--ink-dim); }
.nav-links a:hover { color: var(--green); text-decoration: none; }
.nav-links .gh { color: var(--ink); }

.hero-copy {
  max-width: 720px; margin: 0 auto 48px; text-align: center;
}

h1 {
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.15; letter-spacing: -1px; margin-bottom: 22px;
}
h1 em { color: var(--green); font-style: normal; }

.lede { color: var(--ink-dim); margin-bottom: 26px; }
.lede b, .lede em { color: var(--ink); font-style: normal; }

.install-line {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 16px; width: fit-content;
  margin-left: auto; margin-right: auto;
}
.install-line code { background: none; border: none; padding: 0; color: var(--green); }
.install-line code::before { content: "$ "; color: var(--ink-dim); }

.copy {
  background: none; border: 1px solid var(--line); color: var(--ink-dim);
  font-family: var(--mono); font-size: 12px; padding: 3px 10px;
  border-radius: 4px; cursor: pointer;
}
.copy:hover { color: var(--green); border-color: var(--green); }

.sub { color: var(--ink-dim); font-size: 13px; margin-top: 14px; }

/* ---------- terminal ---------- */
.term {
  max-width: 880px; width: 100%; margin: 0 auto;
  background: #0a0c0a; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 0 60px rgba(74, 222, 128, 0.06), 0 24px 48px rgba(0,0,0,0.5);
  overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-raise); border-bottom: 1px solid var(--line);
  padding: 10px 14px;
}
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot.red { background: #f8717155; } .dot.yellow { background: #fbbf2455; }
.dot.green { background: #4ade8055; }
.term-title { color: var(--ink-dim); font-size: 12px; margin-left: 8px; }

.term-body {
  padding: 18px 18px 12px; font-size: 13.5px;
  height: 420px; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  line-height: 1.75; white-space: pre-wrap; word-break: break-word;
}
.term-body::-webkit-scrollbar { width: 6px; }
.term-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.term-body::-webkit-scrollbar-track { background: transparent; }
.term-body .ps1 { color: var(--green); }
.term-body .out { color: var(--ink-dim); }
.term-body .ok { color: var(--green); }
.term-body .money { color: var(--amber); }

/* agent-session layout */
.term-body .turn { margin-bottom: 22px; }
.term-body .msg { display: block; line-height: 1.7; }
.term-body .msg.user { color: var(--ink); margin-bottom: 8px; }
.term-body .msg.user .ps { color: var(--green); font-weight: 700; }
.term-body .msg.agent { color: var(--ink-dim); margin: 6px 0; }
.term-body .msg.agent .bullet { color: var(--green); }

/* relay tool card — the delegation made visible */
.term-body .card {
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(74, 222, 128, 0.03);
  padding: 10px 14px; margin: 10px 0 10px 16px;
  font-size: 12.8px;
}
.term-body .card-head {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 6px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.term-body .card-head .glyph { color: var(--green); }
.term-body .card-head .name { color: var(--green); font-weight: 700; }
.term-body .card-head .lane {
  color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 9px; font-size: 11px;
}
.term-body .card-head .state {
  margin-left: auto; color: var(--ink-dim); font-size: 11px;
}
.term-body .card-head .state.done { color: var(--green); }
.term-body .card-row { display: block; line-height: 1.9; }
.term-body .card-row.sub { color: var(--ink); }
.term-body .card-row.ok { color: var(--green); }
.term-body .card-row.money { color: var(--amber); }
.term-body .card-row.note { color: var(--ink-dim); }

.term-body .ticker {
  color: var(--amber); border-top: 1px dashed var(--line);
  padding-top: 10px; margin-top: 4px; display: block; font-size: 12.5px;
}
.term-body .caret {
  display: inline-block; width: 8px; height: 15px; vertical-align: -2px;
  background: var(--green); animation: blink 1.1s steps(1) infinite;
}
.term-foot {
  border-top: 1px solid var(--line); color: var(--ink-dim);
  font-size: 11.5px; padding: 8px 14px;
}
.term-foot b { color: var(--green); }

/* ---------- sections ---------- */
section { max-width: 1100px; margin: 0 auto; padding: 56px 24px; }
section h2 {
  font-size: 20px; margin-bottom: 30px; letter-spacing: -0.3px;
}
.prompt { color: var(--green); margin-right: 8px; }

.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.cols h3 { font-size: 15px; color: var(--green); margin-bottom: 10px; }
.cols p { color: var(--ink-dim); font-size: 14px; }
.cols b, .cols em { color: var(--ink); font-style: normal; }
.honest { display: block; margin-top: 10px; font-size: 12.5px; opacity: 0.85; }

/* how */
.how-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; } }
.yaml {
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: 10px;
  padding: 20px 22px; font-size: 13px; line-height: 1.7; overflow-x: auto;
}
.yaml .c { color: var(--ink-dim); }
.steps { list-style: none; counter-reset: s; }
.steps li {
  counter-increment: s; margin-bottom: 14px; color: var(--ink-dim); font-size: 14px;
  padding-left: 34px; position: relative;
}
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border: 1px solid var(--green);
  border-radius: 50%; color: var(--green); font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.steps b { color: var(--ink); }
.mcp-note { margin-top: 30px; color: var(--ink-dim); font-size: 14px; max-width: 720px; }

/* backends / CLIs */
.cli-grid {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  font-size: 14px; max-width: 720px;
}
.cli-row {
  display: grid; grid-template-columns: 1.2fr 1.4fr 1fr;
  padding: 11px 18px; border-bottom: 1px solid var(--line);
  align-items: center;
}
.cli-row:last-child { border-bottom: none; }
.cli-row.cli-head { background: var(--bg-raise); color: var(--ink-dim); font-size: 12px; }
.cli-row span:first-child { color: var(--ink); font-weight: 600; }
.cli-row .pass { color: var(--green); }
.cli-row .exp { color: var(--amber); }
.cli-row code { font-size: 12.5px; }
@media (max-width: 600px) {
  .cli-row { grid-template-columns: 1fr; gap: 4px; }
}

/* proof / bench */
.method { color: var(--ink-dim); font-size: 14px; max-width: 780px; margin-bottom: 28px; }
.method b, .method em { color: var(--ink); font-style: normal; }

.bench-summary { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.stat {
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 20px; min-width: 180px; flex: 1;
}
.stat b { display: block; color: var(--green); font-size: 22px; margin-bottom: 4px; }
.stat span { color: var(--ink-dim); font-size: 12.5px; }

.bench-grid {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  font-size: 13px;
}
.bench-row {
  display: grid; grid-template-columns: 1.1fr 1.6fr 1.6fr 0.7fr;
  padding: 9px 16px; border-bottom: 1px solid var(--line);
}
.bench-row:last-child { border-bottom: none; }
.bench-row.bench-head { background: var(--bg-raise); color: var(--ink-dim); font-size: 12px; }
.bench-row .pass { color: var(--green); }
.bench-row .ratio { color: var(--amber); text-align: right; }
.bench-row span:first-child { color: var(--ink); }
@media (max-width: 700px) {
  .bench-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .bench-row .ratio { text-align: left; }
}

.caveats { color: var(--ink-dim); font-size: 12.5px; max-width: 780px; margin-top: 20px; }
.caveats em { color: var(--ink); font-style: normal; }

/* install */
.install-steps { display: flex; flex-direction: column; gap: 14px; }
.step {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px 18px;
}
.step .n {
  width: 24px; height: 24px; border: 1px solid var(--green); border-radius: 50%;
  color: var(--green); font-size: 12px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.step code { background: none; border: none; color: var(--green); }
.step code::before { content: "$ "; color: var(--ink-dim); }
.step .note { color: var(--ink-dim); font-size: 13px; }
.step.optional { opacity: 0.8; }

/* about */
.about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
.about-grid p { color: var(--ink-dim); font-size: 14.5px; margin-bottom: 14px; }
.about-grid b, .about-grid em { color: var(--ink); font-style: normal; }
.projects h3 { font-size: 14px; color: var(--ink-dim); margin-bottom: 14px; font-weight: 400; }
.project {
  display: block; background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 8px; padding: 13px 16px; margin-bottom: 10px;
}
.project:hover { border-color: var(--green); text-decoration: none; }
.project b { color: var(--ink); display: block; }
.project span { color: var(--ink-dim); font-size: 12.5px; }

footer {
  max-width: 1100px; margin: 0 auto; padding: 40px 24px 60px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  color: var(--ink-dim); font-size: 13px;
}