/* Generated by tools/build_docs.py from tokens.css, site.css, docs.css: do not edit. */
/* The shared design tokens of the product sites.
   A product sets only --accent and --accent-2 (in its own small rule after this file). */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url("fonts/onest-cyrillic-wght.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url("fonts/onest-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Site Mono"; /* JetBrains Mono, OFL */
  font-style: normal;
  font-display: optional;
  font-weight: 100 800;
  src: url("fonts/jetbrains-mono-cyrillic-wght.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Site Mono"; /* JetBrains Mono, OFL */
  font-style: normal;
  font-display: optional;
  font-weight: 100 800;
  src: url("fonts/jetbrains-mono-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* the product's colours (overridden per product) */
  --accent: #3ee6a8;
  --accent-2: #7c9cff;
  --accent-ink: #05150f;          /* text on the accent */
  --accent-deep: #12805a;         /* the accent on paper (contrast 4.5+) */
  --accent-wash: #eafaf3;         /* a tint of the accent on paper */

  /* dark */
  --bg: #0b0d12;
  --bg-2: #0f1218;
  --surface: #13161d;
  --surface-2: #1a1f2a;
  --line: #232834;
  --line-2: #2c3342;
  --text: #e6e8ee;
  --muted: #c3c9d4;               /* 11.7:1 on --bg */
  --faint: #a3aab8;               /* 8.3:1 on --bg, labels */
  --code-key: var(--accent-2);
  --code-str: var(--accent);
  --code-num: #f7c66b;
  --del-bg: rgba(229, 55, 43, .16);
  --del-ink: #ff9c94;

  /* light */
  --paper: #fafaf7;
  --paper-2: #f3f3ee;
  --ink: #111318;
  --ink-muted: #3f4450;           /* 9.3:1 on --paper */
  --paper-line: #e4e4e0;
  --warn-ink: #8a5f00;
  --warn-bg: #fff4d6;

  /* type */
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Site Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 21px;
  --fs-h2: clamp(30px, 4.2vw, 50px);
  --fs-h1: clamp(38px, 6.4vw, 76px);
  --lh-tight: 1.03;
  --lh-text: 1.55;
  --track-tight: -.035em;
  --track-caps: .12em;

  /* space (4 px steps) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-28: 112px;
  --wrap: 1160px;
  --gutter: 28px;

  /* shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;
  --shadow-field: 0 0 0 6px rgba(124, 156, 255, .06), 0 20px 60px rgba(0, 0, 0, .5), 0 0 80px rgba(124, 156, 255, .14);
  --shadow-field-on: 0 0 0 6px rgba(62, 230, 168, .09), 0 20px 60px rgba(0, 0, 0, .5), 0 0 90px rgba(62, 230, 168, .18);
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, .45);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* The shared parts of the product sites: header, buttons, the hero with the map and the search,
   code boxes, the comparison table, the light Swiss sections, the call to action, the footer.
   Needs tokens.css first. No inline styles anywhere (CSP style-src 'self'). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: var(--lh-text);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" on, "cv11" on;
}
a { color: inherit; }
img, svg, canvas { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(62, 230, 168, .32); color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s-4); top: -60px; z-index: 20; padding: var(--s-2) var(--s-4);
  background: var(--accent); color: var(--accent-ink); border-radius: var(--r-md); font-weight: 600;
  text-decoration: none; transition: top .15s;
}
.skip:focus { top: var(--s-4); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 10px 16px; border-radius: var(--r-md); border: 1px solid transparent;
  font: 600 var(--fs-sm)/1.2 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s var(--ease), background-color .15s, border-color .15s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 0 rgba(62, 230, 168, 0); }
.btn-primary:hover { box-shadow: 0 0 0 4px rgba(62, 230, 168, .18), 0 8px 30px rgba(62, 230, 168, .25); }
.btn-ghost { border-color: var(--line-2); color: var(--text); background: rgba(19, 22, 29, .5); }
.btn-ghost:hover { border-color: #3d4659; background: var(--surface-2); }
.btn-lg { padding: 15px 24px; font-size: var(--fs-md); border-radius: 12px; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- the top bar ---------- */
.top { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: 22px 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.015em; }
.brand img { width: 26px; height: 26px; }
.nav { display: flex; align-items: center; gap: 26px; font-size: var(--fs-sm); color: var(--muted); }
.nav a:not(.btn) { text-decoration: none; transition: color .15s; }
.nav a:not(.btn):hover { color: var(--text); }
.nav .btns { display: flex; gap: 10px; }

/* ---------- the dark hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--bg); color: var(--text); isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 58%, rgba(124, 156, 255, .10), transparent 70%),
    radial-gradient(40% 35% at 30% 40%, rgba(62, 230, 168, .06), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 13, 18, 0), var(--bg));
}
.map, .map-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none; }
.map.on, .map-fx.on { opacity: 1; }
.hero-body { position: relative; z-index: 3; padding: 64px 0 56px; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* a soft shade of the background behind the headline and the lead: the text reads over any part of the map */
.hero-body::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 40px; width: min(940px, 115%); height: 560px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(11, 13, 18, .9), rgba(11, 13, 18, .75) 50%, rgba(11, 13, 18, 0));
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(62, 230, 168, .3); padding: 8px 14px; border-radius: var(--r-pill); background: rgba(62, 230, 168, .06);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.hero h1 {
  font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--track-tight); font-weight: 760;
  margin: 26px 0 18px; max-width: 960px; text-wrap: balance;
}
.hero h1 em {
  font-style: normal; color: var(--accent);
  background: linear-gradient(92deg, var(--accent) 10%, var(--accent-2) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lead { text-shadow: 0 1px 14px var(--bg), 0 0 4px var(--bg); color: var(--muted); font-size: var(--fs-lg); max-width: 660px; margin: 0 0 40px; text-wrap: pretty; }

/* the search */
.search { width: min(780px, 100%); text-align: left; position: relative; }
.combo { position: relative; z-index: 5; }
.field {
  position: relative; display: flex; align-items: center; gap: 14px;
  background: rgba(19, 22, 29, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: 18px 20px;
  box-shadow: var(--shadow-field); transition: border-color .2s, box-shadow .25s;
}
.field:focus-within { border-color: rgba(62, 230, 168, .6); box-shadow: var(--shadow-field-on); }
.field .glass { flex: none; width: 22px; height: 22px; color: var(--muted); }
.field input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text);
  font: 500 var(--fs-xl)/1.25 var(--sans); letter-spacing: -.01em; padding: 0;
}
.field input::placeholder { color: #69728a; opacity: 1; }
.field input::-webkit-search-cancel-button { display: none; }
.ms {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font: 500 13px/1 var(--mono); color: var(--accent); white-space: nowrap;
  padding: 6px 10px; border-radius: var(--r-pill); background: rgba(62, 230, 168, .08); border: 1px solid rgba(62, 230, 168, .22);
}
.ms::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.ms b { font-weight: 700; }
.ms small { font-size: 11px; color: #8fd9bc; font-weight: 400; }
.ms.off { visibility: hidden; }

.sug {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 6; margin: 0; padding: 6px; list-style: none;
  background: rgba(17, 20, 27, .97); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); max-height: 420px; overflow: auto;
}
.sug[hidden] { display: none; }
.sug li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 14px; border-radius: var(--r-md); color: #c3c8d3; font-size: 15px; line-height: 1.35; cursor: pointer;
}
.sug li[aria-selected="true"], .sug li:hover { background: var(--surface-2); color: var(--text); }
.sug li[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--accent); }
.sug mark { background: none; color: var(--text); font-weight: 650; }
.sug small { flex: none; color: var(--faint); font: 11px/1 var(--mono); letter-spacing: .04em; }
.sug .msg { display: block; margin: 0; padding: 12px 14px 10px; cursor: default; color: var(--text); font-size: 15px; }
.sug .msg:hover { background: none; }
.sug .msg .btn { margin-top: 10px; }

.answer { margin-top: 14px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.pane {
  background: rgba(10, 12, 17, .92);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 6px 0 18px; height: 286px; overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.pane-head {
  display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 0 12px 12px 0; flex: none;
  font: 500 11px/1.4 var(--mono); color: var(--faint); letter-spacing: .08em; text-transform: uppercase;
}
.pane-head .ok { color: var(--accent); }
#status, #cnt { display: inline-block; min-width: 9ch; text-align: right; }
.pane-head .ok::before { content: "● "; }
.pane-head .ok.err { color: var(--del-ink); }
.sample-tag {
  display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--warn-bg); color: #6b4a00; font-size: 10px; letter-spacing: .06em;
}
.sample-tag[hidden] { display: none; }
/* the scrolling body of a pane: the whole answer, keyboard-scrollable, a thin dark scrollbar */
.scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable;
  padding: 0 12px 16px 0; border-radius: 6px; outline: 0;
  scrollbar-width: thin; scrollbar-color: #2f3646 transparent;
}
.scroll:focus-visible { box-shadow: inset 0 0 0 1px rgba(62, 230, 168, .5); }
.scroll::-webkit-scrollbar { width: 6px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb { background: #2f3646; border-radius: 6px; }
.scroll:hover::-webkit-scrollbar-thumb, .scroll:focus-visible::-webkit-scrollbar-thumb { background: #434b5e; }
/* the soft fade at the bottom while there is more below */
.pane::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 44px; pointer-events: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg); opacity: 0; transition: opacity .25s var(--ease);
  background: linear-gradient(to bottom, rgba(10, 12, 17, 0), rgba(10, 12, 17, .97) 85%);
}
.pane.more::after { opacity: 1; }
.json {
  margin: 0; font: 12.5px/1.66 var(--mono); color: #a3abbd;
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
}
/* one JSON line; a wrapped long value hangs under its own text, not under the margin */
.json .ln { display: block; padding-left: 4ch; text-indent: -4ch; }
.json .ln.d2 { padding-left: 6ch; text-indent: -6ch; }
.json .ln.d3 { padding-left: 8ch; text-indent: -8ch; }
.json .ln.d4 { padding-left: 10ch; text-indent: -10ch; }
.json .k { color: var(--code-key); }
.json .s { color: var(--code-str); }
.json .n { color: var(--code-num); }
.json .p { color: #69728a; }
.cursor { display: inline-block; width: 7px; height: 14px; background: var(--accent); vertical-align: -2px; text-indent: 0; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.facts { margin: 0; font-size: 13.5px; line-height: 1.4; }
.facts > div { display: grid; grid-template-columns: minmax(0, 7.8em) minmax(0, 1fr); gap: 0 12px; padding: 4.5px 0; }
/* the first row of a group: a hairline and the group's small caption (decorative: hidden from screen readers) */
.facts > div[data-g] { margin-top: 10px; padding-top: 24px; border-top: 1px solid var(--line); position: relative; }
.facts > div[data-g]::before {
  content: attr(data-g); content: attr(data-g) / ""; position: absolute; left: 0; top: 7px;
  font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8d95a7;
}
.facts dt { color: var(--faint); overflow-wrap: anywhere; }
.facts dd { margin: 0; color: var(--text); min-width: 0; overflow-wrap: break-word; }
.facts dd.empty { color: #4a5263; }
.facts dd.mono { font: 12.5px/1.5 var(--mono); letter-spacing: -.01em; }
.facts dd .sub-l { display: block; }
.facts dd .sub-l + .sub-l { margin-top: 2px; }
.facts dd small { color: var(--faint); font-size: 12px; }
.facts dd .f-yes { color: var(--accent); }
.facts .line-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--muted); }
.more-hint {
  position: absolute; right: 14px; bottom: 9px; z-index: 1; pointer-events: none;
  font: 500 11px/1 var(--mono); color: var(--accent); letter-spacing: .02em;
  padding: 5px 9px; border-radius: var(--r-pill); background: rgba(19, 22, 29, .94); border: 1px solid rgba(62, 230, 168, .28);
  opacity: 0; transform: translateY(4px); transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.more-hint.on { opacity: 1; transform: none; }
.hint { margin: 16px 0 0; color: var(--faint); font-size: 13px; text-align: center; }
kbd {
  font: 11px/1 var(--mono); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px;
  padding: 2px 6px; color: var(--muted); background: rgba(19, 22, 29, .6);
}
.hero-foot {
  position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4);
  padding: 0 0 22px; font: 11px/1.5 var(--mono); color: var(--faint); letter-spacing: .03em;
}
.hero-foot a { text-decoration: none; }
.hero-foot a:hover { color: var(--text); }
.coords { display: inline-flex; align-items: center; gap: 8px; }
.coords.off { visibility: hidden; }
.coords::before { content: ""; width: 9px; height: 9px; border: 1px solid var(--accent-2); border-radius: 50%; box-shadow: 0 0 8px rgba(124, 156, 255, .6); }

/* ---------- the light sections (Swiss) ---------- */
main { background: var(--paper); color: var(--ink); }
.light { padding: var(--s-28) 0; border-top: 1px solid var(--paper-line); }
.light:first-child { border-top: 0; }
.sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 56px; }
.sec-mark { padding-top: 10px; }
.sec-wide { grid-column: 1 / -1; margin-top: 8px; }
.sec-wide .code { font-size: 13px; }
.sec-num { display: block; font: 600 13px/1 var(--mono); color: var(--ink); letter-spacing: .04em; border-top: 2px solid var(--ink); padding-top: 12px; width: 100%; }
.kicker { display: block; margin-top: 8px; font: 500 var(--fs-xs)/1.4 var(--mono); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent-deep); }
.light h2, .cta h2 {
  font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.032em; font-weight: 760; margin: 0 0 20px; max-width: 800px; text-wrap: balance;
}
.sub { color: var(--ink-muted); font-size: var(--fs-lg); line-height: var(--lh-text); max-width: 660px; margin: 0 0 48px; text-wrap: pretty; }

table.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
table.cmp caption { text-align: left; }
table.cmp th, table.cmp td { padding: 15px 14px; border-bottom: 1px solid var(--paper-line); text-align: left; vertical-align: middle; }
table.cmp thead th { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 2px solid var(--ink); }
table.cmp tbody th { font-weight: 500; }
table.cmp td, table.cmp thead th + th { text-align: center; width: 230px; }
table.cmp .us { background: var(--accent-wash); }
table.cmp thead .us { color: var(--accent-deep); font-weight: 700; border-radius: 10px 10px 0 0; }
table.cmp tbody tr:last-child .us { border-radius: 0 0 10px 10px; }
.yes {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-deep); color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
}
.yes.plain { background: transparent; color: var(--ink-muted); border: 1.5px solid #c9cbc6; }
.tier { display: inline-block; font-size: 12px; color: var(--warn-ink); background: var(--warn-bg); padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.foot-note { margin: 18px 0 0; color: var(--ink-muted); font-size: var(--fs-sm); }

.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.code {
  margin: 0; background: var(--bg-2); color: #c9cfdb; border-radius: var(--r-lg); padding: 18px 22px 22px;
  font: 13.5px/1.75 var(--mono); overflow-x: auto; white-space: pre; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 24px 50px -30px rgba(11, 13, 18, .55);
}
.code .t { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.code .t::before { content: ""; width: 30px; height: 8px; background: radial-gradient(circle at 4px 4px, #3a4152 3px, transparent 3.5px) 0 0 / 11px 8px repeat-x; }
.code .del { display: block; margin: 0 -22px; padding: 0 22px; background: var(--del-bg); color: var(--del-ink); }
.code .add { display: block; margin: 0 -22px; padding: 0 22px; background: rgba(62, 230, 168, .13); color: var(--accent); }
.code .cmt { color: var(--faint); }
.code .str { color: #b9e6d2; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.pillar { padding: 26px 28px 8px 0; }
.pillar + .pillar { padding-left: 28px; border-left: 1px solid var(--paper-line); }
.pillar .label { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; }
.pillar b { display: block; font-size: 26px; line-height: 1.1; letter-spacing: -.025em; font-weight: 720; margin-bottom: 10px; }
.pillar p { margin: 0; color: var(--ink-muted); font-size: 15px; }

/* ---------- the dark call to action and the footer ---------- */
.cta { position: relative; overflow: hidden; background: var(--bg); color: var(--text); padding: var(--s-28) 0; text-align: center; isolation: isolate; }
.cta::before {
  content: ""; position: absolute; left: 50%; top: 100%; width: 1100px; height: 1100px; z-index: -1; transform: translate(-50%, -38%);
  border-radius: 50%; border: 1px solid rgba(62, 230, 168, .16);
  box-shadow: 0 0 0 90px rgba(62, 230, 168, .025), 0 0 0 180px rgba(124, 156, 255, .02), 0 0 160px rgba(62, 230, 168, .12) inset;
}
.cta h2 { margin: 0 auto 18px; }
.cta .sub { color: var(--muted); margin: 0 auto 36px; }
.cta .btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cta-more { margin: 26px 0 0; font-size: var(--fs-sm); }
.cta-more a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color .15s, border-color .15s; }
.cta-more a:hover { color: var(--text); border-color: var(--accent); }
.cta-more .arrow { display: inline-block; transition: transform .2s var(--ease); }
.cta-more a:hover .arrow { transform: translateX(3px); }
.footer { background: var(--bg); color: var(--faint); font-size: 13px; border-top: 1px solid var(--line); padding: 26px 0 40px; }
.footer .wrap { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.footer nav { display: flex; gap: 20px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--text); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .sec { grid-template-columns: 1fr; }
  .sec-mark { display: flex; align-items: baseline; gap: 14px; padding: 0 0 22px; }
  .sec-num { width: auto; border-top: 0; padding-top: 0; }
  .kicker { margin-top: 0; }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 22px 0 18px; border-left: 0; }
  .pillar + .pillar { border-top: 1px solid var(--paper-line); }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .nav a:not(.btn) { display: none; }
  .hero-body { padding: 40px 0 40px; }
  .lead { font-size: var(--fs-md); margin-bottom: 30px; }
  .field { flex-wrap: wrap; padding: 15px 16px; gap: 10px 12px; }
  .field input { font-size: 18px; flex: 1 1 calc(100% - 40px); }
  .map, .map-fx { height: 760px; }
  .map.on { opacity: .6; }
  .ms { order: 3; margin-left: 34px; padding: 4px 9px; font-size: 12px; }
  .answer { grid-template-columns: 1fr; }
  .pane-json { height: 320px; }
  .facts-pane { height: 360px; }
  .hint { display: none; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .diff { grid-template-columns: 1fr; }
  .code { font-size: 12.5px; padding: 16px 18px 18px; }
  .code .del, .code .add { margin: 0 -18px; padding: 0 18px; }
  .light { padding: 72px 0; }
  .cta { padding: 84px 0; }
  table.cmp { font-size: 14px; }
  table.cmp th, table.cmp td { padding: 13px 8px; }
  table.cmp td, table.cmp thead th + th { width: 96px; }
  .tier { white-space: normal; font-size: 11px; padding: 3px 8px; }
}
@media (max-width: 440px) {
  .nav .btn-ghost { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor { animation: none; }
  .pane::after, .more-hint { transition: none; }
  .map, .map-fx { transition: none; }
  .btn, .btn .arrow { transition: none; }
}

/* The docs pages (served in shared/docs.bundle.css after tokens.css and site.css: tools/build_docs.py): the dark top bar, the light reading layout with a sticky menu, code boxes with
   language tabs and a copy button, parameter tables and the questions.
   Needs tokens.css and site.css first. No inline styles (CSP style-src 'self'). */

body.paper { background: var(--paper); }

/* ---------- the top bar (the product page's header on a dark band) ---------- */
.bar { position: relative; background: var(--bg); color: var(--text); isolation: isolate; }
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(62, 230, 168, 0), rgba(62, 230, 168, .45) 30%, rgba(124, 156, 255, .45) 70%, rgba(124, 156, 255, 0));
}
.bar .top { padding: 18px 0; }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]:not(.btn) { box-shadow: 0 2px 0 var(--accent); }

/* ---------- the page head on paper ---------- */
.page-head { padding: 72px 0 8px; }
.page-head .kicker { margin: 0 0 18px; }
.page-head h1 {
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1.04; letter-spacing: -.034em; font-weight: 760;
  margin: 0 0 18px; max-width: 860px; text-wrap: balance;
}
.page-head .sub { margin-bottom: 0; }
.crumb { display: flex; gap: 10px; align-items: center; margin: 0 0 18px; font: 500 var(--fs-xs)/1.4 var(--mono); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-muted); }
.crumb a { text-decoration: none; color: var(--accent-deep); }
.crumb a:hover { text-decoration: underline; }
.crumb span[aria-hidden] { color: #a9aca5; }

/* ---------- the docs layout ---------- */
.docs { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 64px; padding-top: 56px; padding-bottom: 120px; align-items: start; }
.toc { position: sticky; top: 24px; font-size: var(--fs-sm); }
.toc-group { margin: 0 0 22px; }
.toc-title { display: block; margin: 0 0 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--paper-line); }
.toc li a {
  display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent;
  color: var(--ink-muted); text-decoration: none; line-height: 1.35; transition: color .15s, border-color .15s;
}
.toc li a:hover { color: var(--ink); border-left-color: #c9cbc6; }
.toc li a[aria-current="page"] { color: var(--ink); font-weight: 600; border-left-color: var(--accent-deep); }
.toc-m { display: none; }

.doc { min-width: 0; }
.doc > * { max-width: 720px; }
.doc > .wide, .doc > .cb, .doc > .tabs, .doc > .pair { max-width: 860px; }
.doc p, .doc li { color: var(--ink); font-size: 16.5px; line-height: 1.68; }
.doc p { margin: 0 0 18px; text-wrap: pretty; }
.doc ul, .doc ol { margin: 0 0 20px; padding-left: 22px; }
.doc li { margin: 0 0 6px; }
.doc li::marker { color: var(--accent-deep); }
.doc h2 {
  font-size: 30px; line-height: 1.12; letter-spacing: -.026em; font-weight: 740; margin: 64px 0 18px;
  padding-top: 26px; border-top: 2px solid var(--ink); scroll-margin-top: 20px;
}
.doc > h2:first-child { margin-top: 0; }
.doc h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.016em; font-weight: 700; margin: 40px 0 12px; scroll-margin-top: 20px; }
.doc h2 a, .doc h3 a { color: inherit; text-decoration: none; }
.doc h2 a::after, .doc h3 a::after {
  content: "#"; margin-left: .35em; color: var(--accent-deep); font-weight: 500; opacity: 0; transition: opacity .15s;
}
.doc h2 a:hover::after, .doc h3 a:hover::after, .doc h2 a:focus-visible::after, .doc h3 a:focus-visible::after { opacity: 1; }
.doc a:not(.btn):not(.h) { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc a:not(.btn):not(.h):hover { text-decoration-thickness: 2px; }
.doc code, .doc kbd.k {
  font: 500 .88em/1 var(--mono); background: var(--paper-2); border: 1px solid var(--paper-line);
  padding: .16em .38em; border-radius: 5px; color: var(--ink); white-space: nowrap;
}
.doc .lede { font-size: var(--fs-lg); color: var(--ink-muted); }
.doc strong { font-weight: 650; }

/* the endpoint line: a method and a path */
.ep { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 22px; }
.ep .m {
  font: 700 11px/1 var(--mono); letter-spacing: .08em; padding: 6px 8px; border-radius: 6px;
  background: var(--ink); color: var(--paper);
}
.ep .m.post { background: var(--accent-deep); color: #fff; }
.ep .p { font: 600 15px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }

/* a note */
.note {
  margin: 0 0 22px; padding: 14px 18px; border-left: 3px solid var(--accent-deep); background: var(--accent-wash);
  border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 15.5px; line-height: 1.6; color: var(--ink);
}
.note p { margin: 0; font-size: inherit; }
.note p + p { margin-top: 8px; }
.note.warn { border-left-color: #c48a00; background: var(--warn-bg); }

/* the steps of the start page */
.doc .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 8px 0 8px; border-top: 2px solid var(--ink); max-width: 860px; padding: 0; list-style: none; counter-reset: st; }
.steps li { margin: 0; padding: 22px 24px 6px 0; counter-increment: st; }
.steps li + li { padding-left: 24px; border-left: 1px solid var(--paper-line); }
.steps li::before {
  content: "0" counter(st); display: block; margin-bottom: 14px;
  font: 600 12px/1 var(--mono); letter-spacing: .06em; color: var(--accent-deep);
}
.steps b { display: block; font-size: 19px; letter-spacing: -.015em; margin-bottom: 6px; }
.steps p { margin: 0; font-size: 15px; color: var(--ink-muted); line-height: 1.55; }

/* key kinds side by side */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 24px; }
.card {
  border: 1px solid var(--paper-line); border-radius: var(--r-lg); background: #fff; padding: 20px 22px;
  box-shadow: 0 1px 0 rgba(17, 19, 24, .03);
}
.card .label { display: block; margin: 0 0 10px; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
.card b { display: block; font-size: 18px; letter-spacing: -.012em; margin: 0 0 8px; }
.card p, .card li { font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.card p { margin: 0 0 8px; }
.card ul { margin: 0; padding-left: 18px; }
.card li { margin: 0 0 4px; }
.card code { font-size: .86em; }

/* ---------- tables: parameters, errors, fields ---------- */
.tbl-wrap { margin: 0 0 28px; overflow-x: auto; }
table.params { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
table.params caption { text-align: left; }
table.params th, table.params td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--paper-line); }
table.params thead th { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 2px solid var(--ink); padding-top: 0; }
table.params td:first-child, table.params th[scope="row"] { white-space: nowrap; }
table.params .n { font: 600 14px/1.5 var(--mono); color: var(--ink); }
table.params .t { font: 13px/1.5 var(--mono); color: var(--ink-muted); white-space: nowrap; }
table.params td p { margin: 0; font-size: 15px; }
table.params .st { font: 700 13px/1.5 var(--mono); }
table.params .st.c4 { color: var(--warn-ink); }
table.params .st.c5 { color: #a8322a; }

/* the field reference */
.fgroup { margin: 0 0 8px; }
table.fields { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; table-layout: fixed; }
table.fields col.c-name { width: 34%; }
table.fields col.c-type { width: 13%; }
table.fields col.c-ex { width: 22%; }
table.fields th, table.fields td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--paper-line); overflow-wrap: anywhere; }
table.fields thead th { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 2px solid var(--ink); padding-top: 0; }
table.fields .n { font: 600 13.5px/1.5 var(--mono); color: var(--ink); }
table.fields .n .pre { color: #8b8f98; font-weight: 500; }
table.fields .n.lv1 { padding-left: 18px; }
table.fields .n.lv2 { padding-left: 36px; }
table.fields .t { font: 12.5px/1.5 var(--mono); color: var(--ink-muted); }
table.fields .ex { font: 12.5px/1.5 var(--mono); color: var(--accent-deep); }
table.fields .ex.none { color: #8b8f98; font-family: var(--sans); font-size: 13px; }
table.fields tr:target td { background: var(--accent-wash); }

/* ---------- code boxes ---------- */
.cb {
  position: relative; margin: 0 0 24px; background: var(--bg-2); color: #c9cfdb; border-radius: var(--r-lg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 24px 50px -34px rgba(11, 13, 18, .6); overflow: hidden;
}
.cb-head {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 132px 0 18px; /* room for the copy button: no shift when it comes */
  border-bottom: 1px solid var(--line); font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.cb-head .meta { margin-left: auto; text-transform: none; letter-spacing: .02em; color: #8d95a7; }
.cb-head .ok { color: var(--accent); }
.cb-head .bad { color: var(--del-ink); }
.cb pre {
  margin: 0; padding: 16px 20px 20px; font: 13px/1.7 var(--mono); white-space: pre; overflow: auto; tab-size: 2;
  scrollbar-width: thin; scrollbar-color: #2f3646 transparent;
}
.cb pre:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px rgba(62, 230, 168, .5); }
.cb pre.tall { max-height: 380px; }
.cb pre::-webkit-scrollbar { width: 8px; height: 8px; }
.cb pre::-webkit-scrollbar-thumb { background: #2f3646; border-radius: 8px; }
.cb .k { color: var(--code-key); }
.cb .s { color: var(--code-str); }
.cb .n { color: var(--code-num); }
.cb pre.json { color: #8a93a6; }
.cb .c { color: #8a93a6; }
.cb .h { color: #8d95a7; }
.cb .w { color: #e6e8ee; }
.cb .add { display: block; margin: 0 -20px; padding: 0 20px; background: rgba(62, 230, 168, .1); box-shadow: inset 2px 0 0 var(--accent); }
@media (max-width: 760px) { .cb .add { margin: 0 -16px; padding: 0 16px; } }
.copy {
  position: absolute; top: 7px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--muted);
  font: 500 12px/1 var(--sans); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s;
}
.copy:hover { border-color: #3d4659; color: var(--text); background: var(--surface-2); }
.copy.done { color: var(--accent); border-color: rgba(62, 230, 168, .4); }
.copy svg { width: 14px; height: 14px; }

/* language tabs (tabs.js): without the script every language shows, one under the other */
.tabs { position: relative; margin: 0 0 24px; }
.tabs .cb { margin: 0 0 12px; }
.tabs.on { background: var(--bg-2); border-radius: var(--r-lg); box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 24px 50px -34px rgba(11, 13, 18, .6); }
.tabs.on .cb { position: static; margin: 0; box-shadow: none; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.tabs.on .cb-head { display: none; }
.tablist { display: flex; gap: 2px; min-height: 44px; padding: 0 132px 0 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tablist button {
  position: relative; flex: none; padding: 0 12px; border: 0; background: none; cursor: pointer;
  font: 500 12.5px/1 var(--mono); color: var(--faint); letter-spacing: .02em; transition: color .15s;
}
.tablist button:hover { color: var(--text); }
.tablist button[aria-selected="true"] { color: var(--text); }
.tablist button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.tablist button:focus-visible { outline-offset: -4px; }

/* ---------- the questions (docs/faq) ---------- */
.faq { border-top: 2px solid var(--ink); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--paper-line); }
.faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 20px 44px 20px 0;
  font-size: 18px; font-weight: 620; letter-spacing: -.01em; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--accent-deep); }
.faq .a { padding: 0 44px 20px 0; color: var(--ink-muted); font-size: 16px; line-height: 1.65; }
.faq .a p { margin: 0 0 10px; }
.faq .a a { color: var(--accent-deep); }
.faq code { font: 500 .88em/1 var(--mono); background: var(--paper-2); border: 1px solid var(--paper-line); padding: .14em .36em; border-radius: 5px; color: var(--ink); }

/* ---------- small screens ---------- */
@media (max-width: 960px) {
  .docs { grid-template-columns: 1fr; padding-top: 24px; padding-bottom: 88px; }
  .toc { display: none; }
  .toc-m { display: block; margin: 0 0 30px; border: 1px solid var(--paper-line); border-radius: var(--r-md); background: #fff; }
  .toc-m summary { cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
  .toc-m summary::-webkit-details-marker { display: none; }
  .toc-m summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .2s var(--ease); }
  .toc-m[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
  .toc-m summary small { margin-left: auto; margin-right: 14px; color: var(--ink-muted); font-weight: 400; }
  .toc-m .toc { display: block; position: static; padding: 4px 16px 6px; border-top: 1px solid var(--paper-line); }
  .toc-m .toc-group { margin: 12px 0 14px; }
}
@media (max-width: 760px) {
  .page-head { padding: 44px 0 0; }
  .doc p, .doc li { font-size: 16px; }
  .doc h2 { font-size: 25px; margin-top: 48px; padding-top: 20px; }
  .doc h3 { font-size: 18px; margin-top: 32px; }
  .doc .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 18px 0 14px; border-left: 0; }
  .steps li + li { border-top: 1px solid var(--paper-line); }
  .pair { grid-template-columns: 1fr; }
  .cb pre { font-size: 12px; padding: 14px 16px 16px; }
  .cb pre.tall { max-height: 400px; }
  .cb-head { padding-left: 16px; }
  .copy { padding: 0 8px; }
  .copy span { display: none; }
  .cb-head { padding-right: 56px; }
  .tablist { padding-right: 52px; }
  .cb-head { flex-wrap: wrap; row-gap: 2px; padding-top: 13px; padding-bottom: 11px; }
  .cb-head .meta { white-space: nowrap; margin-left: 0; flex-basis: 100%; }
  .cb-head span { white-space: nowrap; }
  table.params, table.params thead, table.params tbody, table.params tr, table.params th, table.params td { display: block; }
  table.params thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.params tr { padding: 12px 0; border-bottom: 1px solid var(--paper-line); }
  table.params td, table.params th { border: 0; padding: 2px 0; white-space: normal; }
  table.params td:first-child, table.params th[scope="row"] { white-space: normal; }
  table.fields, table.fields thead, table.fields tbody, table.fields tr, table.fields td, table.fields th { display: block; }
  table.fields colgroup { display: none; }
  table.fields thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.fields tr { padding: 11px 0; border-bottom: 1px solid var(--paper-line); }
  table.fields td { border: 0; padding: 1px 0; }
  table.fields .n.lv1 { padding-left: 0; }
  table.fields .n.lv2 { padding-left: 0; }
  table.fields td.ex:not(.none)::before { content: "пример: "; color: var(--ink-muted); font-family: var(--sans); }
  .faq summary { font-size: 16.5px; padding: 17px 36px 17px 0; }
  .faq .a { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after, .toc-m summary::after, .copy, .toc li a { transition: none; }
}

/* the page head inside the docs column */
.doc > .page-head { padding: 0; margin: 0 0 40px; }
.doc > .page-head h1 { max-width: 720px; }
.doc > .fgroup { max-width: 860px; }
.doc .jump { font-size: 15px; color: var(--ink-muted); line-height: 1.9; }