:root {
    --paper:     #eef1f3;
    --paper-2:   #f8fafb;
    --card:      #ffffff;
    --ink:       #14181e;
    --ink-2:     #56626e;
    --ink-3:     #8a95a0;
    --line:      #e0e5e9;
    --line-2:    #cfd6db;
    --seed:      #d0851c;  /* amber — input / seeds / POST / pending */
    --seed-soft: #f6e7cf;
    --grown:     #17954f;  /* sprout green — results / ready / GET */
    --grown-soft:#d3ebd9;
    --accent:      var(--seed);
    --accent-soft: var(--seed-soft);
    --code-bg:   #12171f;
    --code-ink:  #d6dde6;
    --code-dim:  #7c8b9c;
    --danger:    #c0392b;
    --radius:    14px;
    --measure:   68ch;
    /* explorer-page helpers (reference.html / map.html) */
    --paper-3:   #e6ebef;
    --accent-dim:#a56513;
    --verb-get:  var(--grown);  --verb-get-bg:  var(--grown-soft);
    --verb-post: var(--seed);   --verb-post-bg: var(--seed-soft);
    --verb-patch:#33508a;       --verb-patch-bg:#e4e9f7;
    --verb-delete:var(--danger);--verb-delete-bg:#fbe9e7;
    --a-shared:  var(--ink-3);  --a-shared-bg:  #eceff2;
    --a-client:  var(--grown);  --a-client-bg:  var(--grown-soft);
    --a-tier:    var(--seed);   --a-tier-bg:    var(--seed-soft);
    --a-admin:   var(--danger); --a-admin-bg:   #fbe9e7;
    --a-scope:   #7d43e0;       --a-scope-bg:   #ece3fb;
  }

  /* ---------- dark theme — ONLY on the two explorer pages (html.api-explorer) ---------- */
  html.api-explorer[data-theme="dark"] {
    --paper:#0f141a; --paper-2:#141b22; --paper-3:#1a232c; --card:#151d25;
    --ink:#e7edf2; --ink-2:#a2b1bd; --ink-3:#74838f;
    --line:#24303a; --line-2:#32404c;
    --seed:#e6a13a; --seed-soft:rgba(230,161,58,.16);
    --grown:#3ecb7a; --grown-soft:rgba(62,203,122,.16);
    --danger:#f0655c; --accent-dim:#c98f34;
    --verb-patch:#6f8cff; --verb-patch-bg:rgba(111,140,255,.16);
    --verb-delete-bg:rgba(240,101,92,.15);
    --a-shared-bg:rgba(116,131,143,.16); --a-admin-bg:rgba(240,101,92,.15);
    --a-scope:#b07cff; --a-scope-bg:rgba(176,124,255,.18); --code-bg:#0b1116;
  }
  @media (prefers-color-scheme: dark) {
    html.api-explorer:not([data-theme="light"]) {
      --paper:#0f141a; --paper-2:#141b22; --paper-3:#1a232c; --card:#151d25;
      --ink:#e7edf2; --ink-2:#a2b1bd; --ink-3:#74838f;
      --line:#24303a; --line-2:#32404c;
      --seed:#e6a13a; --seed-soft:rgba(230,161,58,.16);
      --grown:#3ecb7a; --grown-soft:rgba(62,203,122,.16);
      --danger:#f0655c; --accent-dim:#c98f34;
      --verb-patch:#6f8cff; --verb-patch-bg:rgba(111,140,255,.16);
      --verb-delete-bg:rgba(240,101,92,.15);
      --a-shared-bg:rgba(116,131,143,.16); --a-admin-bg:rgba(240,101,92,.15);
      --a-scope:#b07cff; --a-scope-bg:rgba(176,124,255,.18); --code-bg:#0b1116;
    }
  }
  .theme-btn {
    font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2);
    background:var(--card); border:1px solid var(--line-2); border-radius:999px;
    padding:5px 11px; cursor:pointer;
  }
  .theme-btn:hover { color:var(--ink); border-color:var(--ink-3); }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  code, pre, .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

  /* ---------- top bar ---------- */
  .topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 24px;
    background: rgba(238,241,243,.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .wordmark { font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing:-.01em; font-size: 17px; }
  .wordmark span { color: var(--ink-3); font-weight: 500; }
  .topbar .crumb {
    font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-2);
    padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 999px;
  }
  .topbar .spacer { flex: 1; }
  .topbar .plat {
    font-size: 12px; font-weight: 600; letter-spacing:.02em;
    color: var(--grown); display:inline-flex; align-items:center; gap:6px;
  }
  .topbar .plat::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--grown); }
  a.wordmark { text-decoration: none; }
  .topbar .docnav {
    display: flex; align-items: center; gap: 2px;
    overflow-x: auto; scrollbar-width: none;
  }
  .topbar .docnav::-webkit-scrollbar { display: none; }
  .topbar .docnav a {
    font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-2);
    padding: 4px 10px; border-radius: 999px; white-space: nowrap; text-decoration: none;
    transition: background .12s, color .12s;
  }
  .topbar .docnav a:hover { background: var(--line); color: var(--ink); }
  .topbar .docnav a[aria-current="page"] { background: var(--accent); color: #fff; font-weight: 600; }
  @media (max-width: 720px) { .topbar .plat { display: none; } }

  /* ---------- hero ---------- */
  .hero { padding: 68px 24px 44px; border-bottom: 1px solid var(--line); }
  .hero-in { max-width: 1080px; margin: 0 auto; }
  .eyebrow {
    font-family: "IBM Plex Mono", monospace; font-size: 12.5px; letter-spacing:.14em;
    text-transform: uppercase; color: var(--accent); margin: 0 0 18px;
  }
  .hero h1 {
    font-family: "Space Grotesk", sans-serif; font-weight: 700;
    font-size: clamp(34px, 5.4vw, 58px); line-height: 1.02; letter-spacing: -.025em;
    margin: 0 0 20px; max-width: 15ch;
  }
  .hero h1 .g { color: var(--grown); }
  .hero .lede { font-size: 18px; color: var(--ink-2); max-width: 56ch; margin: 0 0 40px; }

  /* transformation demo — the thesis */
  .xform {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 24px; box-shadow: 0 1px 0 rgba(20,24,30,.03);
  }
  .xform .col-label {
    font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color: var(--ink-3); margin: 0 0 12px;
  }
  .chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .chip {
    font-family:"IBM Plex Mono",monospace; font-size: 12.5px; padding: 5px 9px; border-radius: 8px;
    background: var(--seed-soft); color: #8a5710; border: 1px solid #e9d7b4; white-space: nowrap;
  }
  .chip.more { background: transparent; border-color: var(--line-2); color: var(--ink-3); }
  .xform .arrow { color: var(--ink-3); display:flex; flex-direction:column; align-items:center; gap:6px; }
  .xform .arrow svg { width: 40px; height: 40px; }
  .xform .arrow small { font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
  .ranked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .ranked li {
    display: flex; align-items: center; gap: 10px; font-family:"IBM Plex Mono",monospace; font-size: 13px;
    background: var(--grown-soft); color: #0f5f33; border: 1px solid #b9dcc4; border-radius: 8px; padding: 6px 10px;
  }
  .ranked li .rk { color: var(--grown); font-weight: 600; min-width: 20px; }
  .ranked li .sc { margin-left: auto; color: #4b8a67; font-size: 11.5px; }

  /* ---------- layout shell ---------- */
  .shell { max-width: 1080px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 210px 1fr; gap: 48px; }
  nav.toc { position: sticky; top: 74px; align-self: start; padding: 40px 0; font-size: 14px; }
  nav.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  nav.toc a {
    display: block; text-decoration: none; color: var(--ink-2); padding: 5px 12px; border-left: 2px solid var(--line);
    transition: color .15s, border-color .15s;
  }
  nav.toc a:hover { color: var(--ink); }
  nav.toc a.active { color: var(--ink); border-left-color: var(--accent); font-weight: 600; }
  main { padding: 40px 0 96px; min-width: 0; max-width: var(--measure); }

  section { scroll-margin-top: 80px; padding-top: 8px; }
  section + section { margin-top: 54px; }
  h2 {
    font-family:"Space Grotesk",sans-serif; font-weight: 700; font-size: 27px; letter-spacing:-.02em;
    margin: 0 0 8px; display:flex; align-items:baseline; gap:12px;
  }
  h2 .idx { font-family:"IBM Plex Mono",monospace; font-size: 13px; color: var(--accent); font-weight: 500; }
  h3 { font-family:"Space Grotesk",sans-serif; font-weight: 600; font-size: 18px; margin: 30px 0 8px; letter-spacing:-.01em; }
  p { margin: 12px 0; }
  .muted { color: var(--ink-2); }
  strong { font-weight: 600; }
  .lead-line { font-size: 17px; color: var(--ink-2); margin-top: 2px; }

  /* seed callout */
  .define {
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    background: var(--paper-2); border-radius: 10px; padding: 16px 18px; margin: 20px 0;
  }
  .define .term { font-family:"Space Grotesk",sans-serif; font-weight:600; color: var(--accent); }

  /* ---------- growth rail (signature) ---------- */
  .rail { margin: 26px 0 8px; padding-left: 6px; }
  .rail .step { position: relative; padding: 0 0 26px 34px; }
  .rail .step::before { /* the stem */
    content:""; position: absolute; left: 9px; top: 4px; bottom: -4px; width: 2px;
    background: linear-gradient(var(--from,#e2c9a0), var(--to,#e2c9a0));
  }
  .rail .step:last-child { padding-bottom: 0; }
  .rail .step:last-child::before { display: none; }
  .rail .node {
    position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%;
    background: var(--card); border: 3px solid var(--dot, var(--accent));
  }
  .rail .st-name { font-family:"IBM Plex Mono",monospace; font-size: 13px; font-weight: 600; }
  .rail .st-desc { color: var(--ink-2); font-size: 14.5px; margin-top: 1px; }
  .rail .term-row { display:flex; flex-wrap:wrap; gap: 8px; margin-top: 14px; }
  .pill { font-family:"IBM Plex Mono",monospace; font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--line-2); }
  .pill.ok   { background: var(--grown-soft); color:#0f5f33; border-color:#b9dcc4; }
  .pill.part { background: #fff6e6; color:#8a5710; border-color:#e9d7b4; }
  .pill.bad  { background:#fbe9e7; color: var(--danger); border-color:#f0c8c2; }

  /* ---------- endpoints ---------- */
  .endpoint { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; margin: 18px 0; }
  .ep-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .verb { font-family:"IBM Plex Mono",monospace; font-weight: 600; font-size: 12px; padding: 4px 9px; border-radius: 6px; letter-spacing:.03em; }
  .verb.get  { background: var(--grown-soft); color:#0f5f33; }
  .verb.post { background: var(--seed-soft); color:#8a5710; }
  .verb.patch  { background: #e4e9f7; color: #33508a; }
  .verb.delete { background: #fbe9e7; color: var(--danger); }
  .ep-path { font-family:"IBM Plex Mono",monospace; font-size: 13.5px; color: var(--ink); overflow-wrap:anywhere; }
  .ep-path b { color: var(--seed); font-weight: 500; }
  .ep-note { font-size: 13px; color: var(--ink-2); width:100%; }
  .ep-body { padding: 4px 16px 16px; }

  /* code */
  pre { margin: 14px 0; background: var(--code-bg); color: var(--code-ink); border-radius: 10px; padding: 15px 16px; overflow-x: auto; font-size: 13px; line-height: 1.6; position: relative; }
  pre code { color: inherit; }
  pre .c { color: var(--code-dim); }      /* comment/dim */
  pre .k { color: #7fd1a3; }               /* key/verb green */
  pre .a { color: #e6b56b; }               /* amber accent */
  .copy {
    position: absolute; top: 8px; right: 8px; font-family:"IBM Plex Mono",monospace; font-size: 11px;
    background: rgba(255,255,255,.06); color: var(--code-dim); border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px; padding: 3px 8px; cursor: pointer; transition: color .15s, background .15s;
  }
  .copy:hover { color: var(--code-ink); background: rgba(255,255,255,.12); }
  code.inl { background: #e6ebee; border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 13px; }

  table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
  th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
  th { font-family:"IBM Plex Mono",monospace; font-size: 11.5px; letter-spacing:.05em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
  td code { font-family:"IBM Plex Mono",monospace; font-size: 12.5px; color: var(--ink); }
  .val-up   { color: var(--grown); font-weight:600; }
  .val-down { color: var(--danger); font-weight:600; }

  .note { display:flex; gap:12px; border:1px solid var(--line); border-radius:10px; padding: 14px 16px; background: var(--paper-2); margin: 18px 0; }
  .note .tag { font-family:"IBM Plex Mono",monospace; font-size: 11px; font-weight:600; color: var(--accent); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; padding-top:2px; }
  .note p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

  footer { border-top: 1px solid var(--line); padding: 28px 24px; }
  footer .fin { max-width: 1080px; margin: 0 auto; display:flex; flex-wrap:wrap; gap: 14px 26px; align-items:center; font-size: 13px; color: var(--ink-2); }
  footer a { color: var(--grown); text-decoration: none; font-weight: 500; }
  footer .spacer { flex:1; }

  /* ---------- landing cards ---------- */
  .cards { display: grid; gap: 14px; }
  a.card { display: block; text-decoration: none; color: inherit; background: var(--card);
           border: 1px solid var(--line); border-left: 3px solid var(--grown); border-radius: 12px;
           padding: 20px 22px; transition: border-color .15s, transform .1s; }
  a.card:hover { border-left-color: var(--accent); transform: translateY(-1px); }
  a.card .t { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 19px; }
  a.card .d { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }
  a.card .tag { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 11px;
                color: var(--grown); border: 1px solid var(--line); border-radius: 999px;
                padding: 2px 9px; margin-top: 12px; }

  /* ---------- responsive ---------- */
  @media (max-width: 820px) {
    .shell { grid-template-columns: 1fr; gap: 0; }
    nav.toc { display: none; }
    .xform { grid-template-columns: 1fr; }
    .xform .arrow { transform: rotate(90deg); margin: 4px 0; }
    .hero { padding-top: 48px; }
  }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }