/* Serpbit console, in serpbit.com's look. Archivo and the mono are served from here: no visitor data leaves for a
   font. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/archivo.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jetbrains-mono.woff2") format("woff2"); }

/* One dark theme (the user, 2026-11-08). The brand's green is lifted for text on dark; buttons keep a deeper one
   under white text. */
:root {
  --panel: #0E1013; --surface: #16191E; --surface-2: #1C2026; --deep: #0A0B0D;
  --ink: #F3F2EE; --text: #DADDE2; --body: #C2C7CE; --muted: #8C929B; --line: #262A31; --line-strong: #3A3F47;
  --accent: #5FCB97; --accent-dark: #7DDCAE; --accent-soft: #1A2B24; --accent-bg: #1F7A55; --accent-bg-hover: #248F64;
  --on-accent: #FFFFFF; --paper: #F3F2EE; --paper-ink: #15171B; --lime: #FFE27A;
  --ok-bg: #12301F; --ok-fg: #7EE0A6; --bad-bg: #3A2014; --bad-fg: #F5A97A; --failed: #F0A35E; --danger: #FF7A6B;
  --note-bg: #2A2614; --note-line: #6B5A1A; --code-text: #E6EAF0; --code-muted: #9CA3AF; --code-key: #9CC8B2;
  --code-str: #F2D27A; --code-num: #F0A27A; --code-lit: #A9C7F2;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --display: var(--sans);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font-family: var(--sans); color: var(--text); background: var(--panel); font-size: 15px; line-height: 1.5; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
h1 { margin: 0; font-family: var(--display); font-weight: 850; font-size: 30px; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
h2 { margin: 0; font-size: 17px; font-weight: 750; color: var(--ink); }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.bar1 { fill: var(--accent); }
.bar2, .bar3 { fill: var(--muted); }
.g-mark { flex: none; width: 18px; height: 18px; background: #FFFFFF; border-radius: 50%; padding: 2px; }

/* buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 15px;
  padding: 10px 16px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; min-height: 44px; }
.button.small { font-size: 14px; padding: 7px 13px; min-height: 36px; }
.button.wide { width: 100%; }
.button.primary { background: var(--accent-bg); color: var(--on-accent); }
.button.primary:hover { background: var(--accent-bg-hover); color: var(--on-accent); }
.button.outline { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.button.outline:hover { border-color: var(--ink); color: var(--ink); }
.button.ghost { background: transparent; color: var(--code-text); border-color: var(--line-strong); }
.button.light { background: var(--paper); color: var(--paper-ink); align-self: flex-start; }
.link-button { font: inherit; font-size: 13px; background: none; border: 0; padding: 6px 8px; color: var(--muted); cursor: pointer; }
.link-button.danger { color: var(--danger); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* app frame: the menu is a column of its own width and the window's height, so the account stays at its foot on any
   page however long; on a phone it stacks above the content */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.side { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; background: var(--surface);
  border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); padding: 4px 10px; font-family: var(--display); font-weight: 850;
  font-size: 20px; letter-spacing: -0.02em; }
.brand:hover { color: var(--ink); }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--text); }
.side-nav a:hover { background: var(--panel); color: var(--ink); }
.side-nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-user { margin-top: auto; border-top: 1px solid var(--line); padding: 16px 10px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--line-strong); color: var(--ink); display: flex; align-items: center;
  justify-content: center; font-weight: 600; font-size: 13px; text-transform: uppercase; }
.who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 120px; }
.who .email { font-size: 14px; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .muted { font-size: 13px; }
.main { min-width: 0; width: 100%; max-width: 1680px; margin-inline: auto; padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 800px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); gap: 16px; }
  .side-user { margin-top: 0; }
}
@media (max-width: 640px) { .main { padding: 20px 16px 40px; } }

.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.head p { margin-top: 4px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.notice { background: var(--accent-soft); color: var(--ink); border-radius: 10px; padding: 12px 16px; }
.error { background: var(--bad-bg); color: var(--bad-fg); border-radius: 8px; padding: 10px 14px; }

/* tiles and cards */
/* four tiles: in one row, else two by two, never three and a lone one */
.main { container-type: inline-size; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles.three { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 380px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
.tile, .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.tile { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.tile .label, .tile .hint { font-size: 13px; color: var(--muted); }
.tile .value { font-family: var(--display); font-weight: 850; font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile .of { font-family: var(--sans); font-weight: 400; font-size: 14px; color: var(--muted); }
.meter { width: 100%; height: 6px; display: block; }
.meter .track { fill: var(--line); }
.meter .fill { fill: var(--accent); }
.card { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card.dark { background: var(--deep); border-color: var(--line); color: var(--code-text); }
.card.dark h2 { color: var(--ink); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; }
.row > .card { flex: 1 1 420px; }
.code { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--code-text); }

/* chart */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13px; color: var(--body); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sw.a { background: var(--accent); }
.sw.f { background: var(--failed); }
.seg { background: var(--panel); border-radius: 8px; padding: 3px; gap: 4px; }
.seg button { font: inherit; font-size: 13px; border: 0; background: transparent; color: var(--body); padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.seg button.on { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.chart-wrap { overflow-x: auto; }
.chart { width: 100%; min-width: 560px; height: 180px; display: block; }
.chart .a { fill: var(--accent); }
.chart .f { fill: var(--failed); }
.chart .axis { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-labels { display: flex; min-width: 560px; margin-top: 6px; }
.chart-labels span { flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: visible; }

/* keys */
.keylist { list-style: none; margin: 0; padding: 0; }
.keylist li { border-top: 1px solid var(--line); padding: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.keylist li > div { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.keylist .name { font-weight: 600; color: var(--ink); }
.newkey { background: var(--note-bg); border: 1px solid var(--note-line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.copyline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.copyline code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; word-break: break-all; flex: 1 1 300px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; }
.inline-form label { font-weight: 600; color: var(--ink); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select { font: inherit; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; min-height: 44px; background: var(--surface-2); color: var(--ink); }
.inline-form input { flex: 1 1 220px; }

/* tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 8px 10px; }
td { border-top: 1px solid var(--line); padding: 11px 10px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.pill { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill.bad { background: var(--bad-bg); color: var(--bad-fg); }

/* billing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.plan.current { border: 2px solid var(--accent); padding: 21px; }
.plan.dark { background: var(--deep); border-color: var(--line); color: var(--body); }
.plan.dark .plan-name, .plan.dark .price { color: var(--ink); }
.plan-name { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.price { font-family: var(--display); font-weight: 850; font-size: 32px; color: var(--ink); }
.price span { font-family: var(--sans); font-weight: 400; font-size: 15px; }

/* sign-in */
.public { background: var(--panel); }
.auth { max-width: 420px; margin: 0 auto; padding: 64px 16px; display: flex; flex-direction: column; gap: 20px; }
.auth .brand { padding: 0; font-size: 22px; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.auth-card h1 { font-size: 26px; }
.consent { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.providers { display: flex; flex-direction: column; gap: 10px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack label { font-weight: 600; color: var(--ink); font-size: 14px; }
.dev { background: var(--note-bg); border-radius: 8px; padding: 10px 14px; }
.auth-card .pill { align-self: flex-start; }
.pill.beta { background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
.auth-card input[type="password"] { letter-spacing: 0.08em; }

/* playground: the request on the left, the answer beside it; one column when narrow */
.pg { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
@container (max-width: 860px) { .pg { grid-template-columns: minmax(0, 1fr); } }
.pg-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-weight: 600; color: var(--ink); font-size: 14px; }
.field input, .field select { width: 100%; min-width: 0; }
.field select { appearance: auto; }
.hint { margin: 0; font-size: 13px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--body); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.keyline { display: flex; gap: 8px; }
.keyline input { flex: 1 1 auto; font-family: var(--mono); font-size: 13px; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.pg-grid .wide { grid-column: 1 / -1; }
.pg-more { border-top: 1px solid var(--line); padding-top: 12px; }
.pg-more summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: 14px; }
.pg-more[open] summary { margin-bottom: 12px; }
.pg-send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pg-out { position: sticky; top: 16px; }
@container (max-width: 860px) { .pg-out { position: static; } }
.pg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--body); font-variant-numeric: tabular-nums; }
.pg-meta .mono { font-size: 12px; color: var(--code-muted); }
.pg-url { display: block; font-size: 12.5px; color: var(--body); background: var(--surface-2); border-radius: 8px; padding: 8px 10px;
  word-break: break-all; }
.pg-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); }
.pg-tabs [role="tablist"] { display: flex; flex-wrap: wrap; }
.pg-tabs [role="tab"] { font: inherit; font-size: 13px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--code-muted);
  padding: 8px 10px; cursor: pointer; }
.pg-tabs [role="tab"]:hover { color: var(--code-text); }
.pg-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.pg-tabs .button { margin-bottom: 6px; }
.pg-view { max-height: min(70vh, 720px); min-height: 160px; overflow: auto; }
.j-k { color: var(--code-key); }
.j-s { color: var(--code-str); }
.j-n { color: var(--code-num); }
.j-b { color: var(--code-lit); }

/* docs: the API reference (internal/docs, the site's own text), its contents beside it; one column when narrow */
.doc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
.doc-nav { position: sticky; top: 16px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.doc-nav div { display: flex; flex-direction: column; gap: 1px; }
.doc-nav a { color: var(--text); padding: 4px 8px; border-radius: 4px; }
.doc-nav a:hover { background: var(--surface-2); color: var(--ink); }
.doc-nav .label { padding: 0 8px 4px; }
@container (max-width: 900px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .doc-nav { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 12px 20px; }
  .doc-nav div { flex-direction: row; flex-wrap: wrap; gap: 2px 4px; }
  .doc-nav .label { flex-basis: 100%; }
}
.label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ink { color: var(--ink); }
.prose { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.prose h1 { font-size: clamp(28px, 3.4vw, 36px); }
.prose h2 { font-size: 24px; letter-spacing: -0.02em; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.prose h3 { font-size: 17px; margin: 10px 0 0; color: var(--ink); }
.prose [id] { scroll-margin-top: 16px; }
.prose p, .prose li { margin: 0; color: var(--text); max-width: 70ch; }
.prose .lead { font-size: 17px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.prose code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; color: var(--ink);
  overflow-wrap: anywhere; }
.prose pre.code { background: var(--deep); border: 1px solid var(--line); border-radius: 8px; padding: 16px; white-space: pre;
  word-break: normal; overflow-x: auto; }
.prose pre.code code { background: none; border: 0; padding: 0; color: inherit; }
.table-box { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.table-box table { min-width: 560px; }
td.mono { white-space: nowrap; color: var(--ink); }
tr.group td { background: var(--surface-2); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); padding-block: 8px; }
.prose > p, .prose > .lead, .prose > h1 { max-width: 78ch; }
/* an endpoint: its text, and its example beside it where there is room (the code stays in view while the text scrolls) */
.ep { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.ep-text, .ep-code { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.prose .ep h2 { margin-top: 0; padding-top: 0; border-top: 0; }
@container (min-width: 1300px) {
  .ep { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .ep-code { position: sticky; top: 16px; }
}
/* every endpoint's two tables look alike: the same columns, plain values, no chips */
.prose .ep h3 { margin: 6px 0 -4px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); }
.ep .table-box table { table-layout: fixed; min-width: 0; }
.ep .table-box th:first-child { width: 30%; }
.ep .table-box th:nth-child(2):not(:last-child) { width: 16%; }
.ep .table-box td { vertical-align: top; overflow-wrap: anywhere; }
.ep .table-box td.mono { white-space: normal; }
.prose .table-box code { background: none; border: 0; padding: 0; color: var(--ink); }
.cost { display: inline-block; margin-left: 4px; padding: 1px 9px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
/* Activity: the list's filters beside its title, the pages below it. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters select { width: auto; min-width: 0; }
.pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 12px; }
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }