/* Veezee public site: one hand-written stylesheet, no build step.
   Identity: system fonts (zero requests, on purpose), near-flat surfaces,
   a single teal accent, 4px radius on boxed components only. The signature
   component is the labeled command block (.code) with click-to-copy.
   Light by default; dark tracks prefers-color-scheme.
   Worker-rendered pages (login, dashboard, purchased) link this same file
   and reuse these class names; keep them stable. */
:root {
  --bg: #ffffff;
  --ink: #17191c;
  --muted: #5a6167;
  --line: #dcdfe3;
  --link: #0b6e64;
  --link-soft: #edf4f2;
  --code-bg: #f5f6f8;
  --surface: #fafbfc;
  --btn-ink: #ffffff;
  --danger: #b3261e;
  --warn: #915f00;
  --radius: 4px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d2023;
    --ink: #dde1e4;
    --muted: #9aa2a9;
    --line: #383d42;
    --link: #62bcb1;
    --link-soft: #233230;
    --code-bg: #24272b;
    --surface: #212429;
    --btn-ink: #0f201d;
    --danger: #e2726e;
    --warn: #d3a13c;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
main.wrap { padding-top: 30px; padding-bottom: 64px; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

h1 { font-size: clamp(26px, 4vw, 30px); font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 14px; text-wrap: balance; }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 44px 0 12px; }
h3 { font-size: 18px; font-weight: 650; margin: 30px 0 8px; }
p, li { max-width: 46em; }
p { margin: 12px 0; }
ul, ol { padding-left: 24px; }
li { margin: 4px 0; }

/* Hover-revealed anchor links on headings (ids added at generation time). */
h2 .anchor, h3 .anchor {
  margin-left: 8px; text-decoration: none; opacity: 0;
  font-weight: 400; color: var(--muted);
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }

header.nav { border-bottom: 1px solid var(--line); }
header.nav .wrap { display: flex; align-items: center; gap: 16px; row-gap: 6px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }
.brand svg { width: 18px; height: 18px; margin-right: 7px; color: var(--link); }
header.nav nav { display: flex; gap: 4px; margin-left: auto; font-size: 14.5px; flex-wrap: wrap; align-items: center; }
header.nav nav a { color: var(--muted); text-decoration: none; padding: 6px 9px; border-radius: var(--radius); font-weight: 500; }
header.nav nav a:hover { color: var(--ink); background: var(--code-bg); }
header.nav .nav-cta { background: var(--link); color: var(--btn-ink); padding: 6px 12px; margin-left: 6px; font-weight: 600; }
header.nav .nav-cta:hover { color: var(--btn-ink); background: var(--link); opacity: 0.88; }

footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 28px 0 48px; color: var(--muted); font-size: 14px; }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 28px; margin-bottom: 22px; }
.foot-cols h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.foot-cols ul { list-style: none; padding: 0; margin: 0; }
.foot-cols li { margin: 5px 0; }
.foot-legal { border-top: 1px solid var(--line); padding-top: 16px; font-size: 13.5px; }
.foot-legal p { margin: 4px 0; }

table { border-collapse: collapse; margin: 12px 0 8px; font-size: 14.5px; width: 100%; }
th, td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13.5px; }
.tablewrap { overflow-x: auto; margin: 0 0 20px; }
.tablewrap table { margin-bottom: 4px; min-width: 480px; }

code, pre, .credits, .code-head { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
code { background: var(--code-bg); padding: 1px 5px; border-radius: 3px; font-size: 0.88em; }
pre {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; overflow-x: auto; font-size: 13.5px; line-height: 1.55;
  position: relative; margin: 14px 0;
}
pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }

/* Signature component: labeled command block. .code wraps a header bar
   (surface label + copy button) and the pre; bare <pre> still gets a copy
   button via the inline script, absolutely positioned top-right. */
.code { margin: 14px 0; }
.code pre { margin: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 5px 8px 5px 13px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
button.copy {
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--muted); background: var(--bg); border: 1px solid var(--line);
  border-radius: 3px; padding: 4px 9px; cursor: pointer; letter-spacing: 0;
  text-transform: none;
}
button.copy:hover { color: var(--link); border-color: var(--link); }
button.copy.done { color: var(--link); border-color: var(--link); }
pre > button.copy { position: absolute; top: 7px; right: 7px; opacity: 0; }
pre:hover > button.copy, pre > button.copy:focus-visible { opacity: 1; }
@media (hover: none) { pre > button.copy { opacity: 1; } }

.credits { font-size: 13px; color: var(--muted); }

/* Callout: one fact the reader should not miss. Flat, teal left border. */
.note {
  border-left: 3px solid var(--link); background: var(--link-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 16px; margin: 16px 0; font-size: 15px;
}
.note p { margin: 4px 0; }

.eyebrow {
  display: block; font-size: 12px; font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--link); margin-bottom: 4px;
}

/* Transactional forms (claim, upgrade): plain controls, bare HTML form POSTs
   that work with JS blocked. */
form.claim { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
form.claim input, form.buy button, form.claim button {
  padding: 10px 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 15px; border-radius: var(--radius);
}
form.buy button, form.claim button { cursor: pointer; background: var(--code-bg); font-weight: 600; }
form.buy button:hover, form.claim button:hover { border-color: var(--link); }
form.buy { display: inline-block; margin: 0 10px 10px 0; }
#claim-result { margin-top: 14px; font-size: 14.5px; }

.lede { color: var(--muted); font-size: 17.5px; line-height: 1.55; max-width: 40em; margin: 0 0 22px; text-wrap: pretty; }

/* Pack cards: interactive (radio labels, /upgrade) and static (.plan grid,
   /pricing) share the look. */
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 16px 0; max-width: 560px; }
label.pack, .plan { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--bg); }
label.pack { cursor: pointer; }
label.pack input { position: absolute; opacity: 0; }
label.pack:has(input:checked) { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
label.pack:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.pack .name, .plan .name { font-weight: 650; }
.pack .price, .plan .price { font-size: 27px; font-weight: 750; font-variant-numeric: tabular-nums; margin: 6px 0 2px; letter-spacing: -0.01em; }
.pack .price .per, .plan .price .per { font-size: 14.5px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.pack ul, .plan ul { margin: 8px 0 0; padding-left: 18px; font-size: 14.5px; color: var(--muted); }
.pack li, .plan li { margin: 3px 0; max-width: none; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 16px 0 8px; }
.plan .pill {
  display: inline-block; font-size: 12px; font-weight: 600; color: var(--link);
  background: var(--link-soft); border-radius: 999px; padding: 2px 10px; margin-top: 8px;
}
form.buy button.primary, form.claim button.primary {
  background: var(--link); color: var(--btn-ink); border-color: var(--link);
}
/* Plan cards check out directly: the CTA is pinned to the card bottom so the
   three buttons align across the row. */
.plan { display: flex; flex-direction: column; }
.plan .pill { align-self: flex-start; margin: 8px 0 14px; }
.plan ul { margin-bottom: 14px; }
.plan form.buy, .plan .plan-cta { display: block; margin: auto 0 0; }
.plan form.buy button { width: 100%; }
.plan .plan-cta { text-align: center; }
form.buy.packform { display: block; max-width: 560px; }
form.buy.packform button { width: 100%; padding: 12px; font-size: 16px; margin-top: 4px; }
.trust { color: var(--muted); font-size: 14px; max-width: 42em; }
.steps { padding-left: 22px; max-width: 46em; }
.steps li { margin: 6px 0; }
.keybox { display: block; font-size: 16px; padding: 14px 16px; margin: 14px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--code-bg); overflow-x: auto; user-select: all; -webkit-user-select: all; }

/* Dashboard / account surface: key & token management tables plus inline
   add-forms. Bare form POSTs, JS-optional. */
.account .muted { color: var(--muted); font-size: 14.5px; max-width: 46em; margin: 4px 0 10px; }
.account .dim { color: var(--muted); }
.account h3 { margin-top: 32px; }
.account table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.account th, .account td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: middle; }
.account td.row-actions { white-space: nowrap; }
.account .row-actions { display: flex; gap: 8px; }
.account form { margin: 0; }
.account .inline-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 6px; }
.account .inline-add input { padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); font-size: 15px; min-width: 220px; }
.account .danger-row { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.account button { cursor: pointer; background: var(--code-bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; padding: 8px 13px; font-size: 14px; }
.account button:hover { border-color: var(--link); }
.account button.danger, .account .danger button { color: var(--danger); }
.account button.danger:hover, .account .danger button:hover { border-color: var(--danger); }
.account .muted code { font-size: 13px; }
.account .acct { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 14px 0; }
.account .chip { display: inline-block; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--code-bg); border-radius: 999px; padding: 2px 10px; }
.account .chip.pending { color: var(--warn); }
.account .stat-row { display: flex; gap: 26px; flex-wrap: wrap; margin: 10px 0; }
.account .stat-n, .account .num { font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; }
.account .stat-l { display: block; font-size: 13px; color: var(--muted); }
.account .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
header.nav .session { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--muted); margin: 0; }
header.nav .session button { cursor: pointer; background: var(--code-bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; padding: 5px 10px; font-size: 13px; }

/* Buttons-as-links (buy path, CTAs). */
.btn { display: inline-block; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.btn:hover { border-color: var(--link); color: var(--link); }
.btn.primary { background: var(--link); border-color: var(--link); color: var(--btn-ink); }
.btn.primary:hover { color: var(--btn-ink); opacity: 0.88; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 22px 0 8px; }
.cta-sub { color: var(--muted); font-size: 14px; margin: 6px 0 0; }

/* Landing hero. */
.hero { padding-top: 0; }
.hero h1 { font-size: clamp(29px, 4.6vw, 37px); margin-bottom: 12px; text-wrap: balance; }

/* Quickstart matrix: one tab per surface (MCP/CLI/REST/SDK). CSS-only radio
   tabs; panels are siblings of the inputs so :checked ~ selects them. */
.qs { margin: 14px 0 8px; }
.qs > input { position: absolute; opacity: 0; pointer-events: none; }
.qs-bar { display: flex; gap: 6px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.qs-bar label { padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--muted); border: 1px solid transparent; border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; margin-bottom: -1px; }
.qs-bar label:hover { color: var(--link); }
.qs-panel { display: none; padding-top: 4px; }
#qs-paste:checked ~ #qs-p-paste, #qs-mcp:checked ~ #qs-p-mcp, #qs-cli:checked ~ #qs-p-cli, #qs-rest:checked ~ #qs-p-rest, #qs-sdk:checked ~ #qs-p-sdk { display: block; }
#qs-paste:checked ~ .qs-bar label[for="qs-paste"], #qs-mcp:checked ~ .qs-bar label[for="qs-mcp"], #qs-cli:checked ~ .qs-bar label[for="qs-cli"], #qs-rest:checked ~ .qs-bar label[for="qs-rest"], #qs-sdk:checked ~ .qs-bar label[for="qs-sdk"] { color: var(--ink); border-color: var(--line); background: var(--bg); }
#qs-paste:focus-visible ~ .qs-bar label[for="qs-paste"], #qs-mcp:focus-visible ~ .qs-bar label[for="qs-mcp"], #qs-cli:focus-visible ~ .qs-bar label[for="qs-cli"], #qs-rest:focus-visible ~ .qs-bar label[for="qs-rest"], #qs-sdk:focus-visible ~ .qs-bar label[for="qs-sdk"] { outline: 2px solid var(--link); outline-offset: 2px; }

/* Docs breadcrumb: one muted line, always one click back to the index. */
.crumbs { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--link); }

/* Docs index grid: grouped links at the top of /docs. */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px 26px; margin: 20px 0 10px; }
.doc-grid h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.doc-grid ul { list-style: none; padding: 0; margin: 0; }
.doc-grid li { margin: 5px 0; font-size: 14.5px; }

/* HTTP method chip before endpoint paths. One palette: teal for reads,
   ink for writes; no extra hues. */
.method { display: inline-block; font: 700 11.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.05em; padding: 3px 7px; border-radius: 3px; vertical-align: 1px; margin-right: 2px; }
.method-get { color: var(--link); background: var(--link-soft); }
.method-post, .method-delete, .method-put, .method-patch { color: var(--bg); background: var(--muted); }

/* Native disclosure for long optional reference blocks. */
details.fold { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 16px; margin: 16px 0; }
details.fold summary { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 14.5px; color: var(--muted); }
details.fold summary:hover { color: var(--link); }
details.fold[open] summary { border-bottom: 1px solid var(--line); color: var(--ink); }
details.fold > :last-child { margin-bottom: 14px; }

/* Homepage demo: a terminal-window mock that replays three example sessions
   (inline player in gen-site's demoHtml; the static transcript is the no-JS
   and reduced-motion state). The terminal is deliberately dark in both
   themes. */
.demo { margin: 16px 0 4px; }

/* Agent selector inside the quickstart MCP tab: pick an agent, the config
   block above updates. The code sits ABOVE the pill bar so it stays anchored
   at the panel's top position across all quickstart tabs (no jitter when
   switching MCP/CLI/REST/SDK). The bar sizes to the config so a one-line
   command leaves no dead space; a taller JSON config nudges the pills down,
   which is the selector doing its job. */
.qsa > input { position: absolute; opacity: 0; pointer-events: none; }
.qsa-panel { display: none; }
.qsa-panel .code { margin: 4px 0 0; }
.qsa-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.qsa-bar label { padding: 4px 13px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; }
.qsa-bar label:hover { color: var(--link); border-color: var(--link); }
#qsa-claude:checked ~ #qsa-p-claude, #qsa-claudeai:checked ~ #qsa-p-claudeai, #qsa-cursor:checked ~ #qsa-p-cursor, #qsa-windsurf:checked ~ #qsa-p-windsurf, #qsa-vscode:checked ~ #qsa-p-vscode, #qsa-codex:checked ~ #qsa-p-codex, #qsa-cline:checked ~ #qsa-p-cline, #qsa-zed:checked ~ #qsa-p-zed, #qsa-n8n:checked ~ #qsa-p-n8n { display: block; }
#qsa-claude:checked ~ .qsa-bar label[for="qsa-claude"], #qsa-claudeai:checked ~ .qsa-bar label[for="qsa-claudeai"], #qsa-cursor:checked ~ .qsa-bar label[for="qsa-cursor"], #qsa-windsurf:checked ~ .qsa-bar label[for="qsa-windsurf"], #qsa-vscode:checked ~ .qsa-bar label[for="qsa-vscode"], #qsa-codex:checked ~ .qsa-bar label[for="qsa-codex"], #qsa-cline:checked ~ .qsa-bar label[for="qsa-cline"], #qsa-zed:checked ~ .qsa-bar label[for="qsa-zed"], #qsa-n8n:checked ~ .qsa-bar label[for="qsa-n8n"] { color: var(--ink); border-color: var(--ink); }
#qsa-claude:focus-visible ~ .qsa-bar label[for="qsa-claude"], #qsa-claudeai:focus-visible ~ .qsa-bar label[for="qsa-claudeai"], #qsa-cursor:focus-visible ~ .qsa-bar label[for="qsa-cursor"], #qsa-windsurf:focus-visible ~ .qsa-bar label[for="qsa-windsurf"], #qsa-vscode:focus-visible ~ .qsa-bar label[for="qsa-vscode"], #qsa-codex:focus-visible ~ .qsa-bar label[for="qsa-codex"], #qsa-cline:focus-visible ~ .qsa-bar label[for="qsa-cline"], #qsa-zed:focus-visible ~ .qsa-bar label[for="qsa-zed"], #qsa-n8n:focus-visible ~ .qsa-bar label[for="qsa-n8n"] { outline: 2px solid var(--link); outline-offset: 2px; }

.term { background: #17191d; border: 1px solid #2c3137; border-radius: 8px; overflow: hidden; margin: 14px 0 0; }
.term-bar { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 13px; border-bottom: 1px solid #2c3137; }
.term-title { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; font: 12px ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #7d858d; }
.td { width: 11px; height: 11px; border-radius: 50%; }
.td-r { background: #ff5f57; } .td-y { background: #febc2e; } .td-g { background: #28c840; }
/* Fixed height like a real terminal: the page never jumps, long sessions
   scroll inside the transcript (the player keeps it pinned to the bottom).
   Anatomy matches Claude Code: transcript on top, bordered > input box at
   the bottom, minimal statusline under it. */
.term-body { height: 356px; display: flex; flex-direction: column; font: 12.5px/1.75 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #c9ced3; }
.term-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 17px; scrollbar-width: thin; scrollbar-color: #3a4046 transparent; transition: opacity 400ms ease; }
.term-scroll.t-out { opacity: 0; }
.term-inbox { flex: none; margin: 4px 13px 7px; border: 1px solid #3a4046; border-radius: 6px; padding: 7px 11px; color: #e8eaec; white-space: pre-wrap; }
.term-status { flex: none; display: flex; gap: 16px; padding: 0 15px 9px; font-size: 11px; color: #565d64; }
.t-line { white-space: pre-wrap; max-width: none; }
.t-dim { color: #7d858d; }
.t-user { background: #22262b; border-radius: 4px; padding: 6px 10px; margin: 10px 0; color: #e8eaec; }
.t-tool { margin-top: 8px; }
.t-tool, .t-ans { padding-left: 16px; text-indent: -16px; }
.t-dot { color: #62bcb1; }
.t-fn { color: #62bcb1; font-weight: 600; }
.t-res { color: #7d858d; padding-left: 28px; text-indent: -28px; }
.t-ans { margin-top: 8px; }
.t-meta { color: #565d64; margin-top: 12px; font-size: 11.5px; }
/* Player-only states: thinking indicator, typing cursor. The player never
   starts under prefers-reduced-motion, and the cursor stops blinking there. */
.t-think { color: #7d858d; margin-top: 8px; }
.t-cursor { display: inline-block; width: 7px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #c9ced3; animation: vz-blink 1s steps(1) infinite; }
@keyframes vz-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .t-cursor { animation: none; } }

@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  h2 { margin-top: 36px; }
  .cta-row .btn { padding: 12px 18px; }
  header.nav nav { margin-left: 0; }
  .term-body { font-size: 11.5px; height: 400px; }
  .term-scroll { padding: 12px 14px; }
  .term-inbox { margin: 4px 10px 6px; }
  .term-status { padding: 0 12px 8px; }
  .term-title { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  button.copy { transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease; }
}