@font-face {
  font-family:'Golos Text';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/static/fonts/golos-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family:'Golos Text';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/static/fonts/golos-latin.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 {
  --bg:#f8faf9;
  --card:#fff;
  --ink:#202d28;
  --muted:#5d6d64;
  --line:#dfe6e1;
  --accent:#167347;
  --accent-2:#115d39;
  --accent-soft:#eaf5ed;
  --mint:#c2f6d4;
  --ok:#246442;
  --ok-bg:#edf8f0;
  --err:#b03232;
  --err-bg:#fff0ef;
  --code:#eef2ef;
  --dark:#182b25;
  --dark-text:#e9f0ec;
  --dark-muted:#adbbb4;
  --focus:#167347;
  --font:'Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;
  --text-xs:.75rem;
  --text-sm:.8125rem;
  --text-body:.9375rem;
  --text-lg:1.0625rem;
  --heading-sm:1.125rem;
  --heading-md:1.5rem;
  --heading-lg:2.125rem;
  --display:clamp(2.75rem,4.3vw,3.875rem);
}
* {
  box-sizing:border-box;
}
html,body {
  margin:0;
  padding:0;
}
html {
  scroll-padding-top:110px;
}
body {
  font:var(--text-body)/1.6 var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
button,input,select,textarea {
  font:inherit;
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:wait;
  opacity:.65;
}
a {
  color:var(--accent);
  text-decoration:none;
  text-underline-offset:4px;
}
a:hover {
  text-decoration:underline;
}
button,input,select,textarea {
  accent-color:var(--accent);
}
:focus-visible {
  outline:2px solid var(--focus);
  outline-offset:4px;
}
main:focus {
  outline:none;
}
::selection {
  background:var(--mint);
  color:var(--ink);
}
[hidden] {
  display:none!important;
}
h1,h2,h3,p {
  margin-top:0;
}
h1,h2,h3 {
  text-wrap:balance;
}
h1 {
  font-size:var(--heading-lg);
  line-height:1.2;
  letter-spacing:-1.1px;
  margin-bottom:14px;
  font-weight:650;
}
h2 {
  font-size:var(--heading-md);
  line-height:1.25;
  letter-spacing:-.6px;
  margin:32px 0 16px;
  font-weight:600;
}
h3 {
  font-size:var(--heading-sm);
  line-height:1.35;
  letter-spacing:-.25px;
  margin:0 0 12px;
  font-weight:600;
}
p {
  text-wrap:pretty;
  margin-bottom:16px;
}
svg {
  display:block;
}
.icon {
  width:20px;
  height:20px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.wrap {
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:40px;
}
.muted {
  color:var(--muted);
}
.small {
  font-size:var(--text-sm);
}
.row {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.row.between {
  justify-content:space-between;
}
.inline {
  display:inline;
}
.overline,.eyebrow {
  font-size:var(--text-xs);
  font-weight:500;
  letter-spacing:1.1px;
  text-transform:uppercase;
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  margin-bottom:22px;
}
.eyebrow-line {
  width:23px;
  height:2px;
  background:var(--accent);
}
.overline {
  font-size:.6875rem;
  letter-spacing:1px;
  color:var(--muted);
}
/* Navigation */
.top {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.top-in {
  min-height:82px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:23px;
  letter-spacing:-.9px;
  font-weight:750;
  color:var(--ink);
  white-space:nowrap;
}
.brand:hover {
  text-decoration:none;
}
.brand-light {
  font-weight:450;
}
.mark {
  display:inline-flex;
  width:36px;
  height:36px;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  background:var(--dark);
  color:var(--mint);
  flex-shrink:0;
}
.mark svg {
  width:32px;
  height:32px;
}
.brand-divider {
  height:20px;
  width:1px;
  background:var(--line);
  margin-inline:10px 3px;
}
.brand-by {
  font-size:var(--text-xs);
  letter-spacing:0;
  font-weight:400;
  color:var(--muted);
}
.nav {
  display:flex;
  align-items:center;
  gap:28px;
}
.nav>a {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:var(--text-sm);
  font-weight:450;
  color:var(--muted);
  min-height:40px;
}
.nav>a.on {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:8px;
}
.nav .btn {
  color:var(--card);
}
.nav-api {
  font:11px var(--mono);
  padding:3px 4px;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--muted);
}
.menu-toggle {
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--card);
  color:var(--ink);
}
.workspace-nav {
  background:var(--card);
  border-bottom:1px solid var(--line);
}
.workspace-nav-in,.workspace-nav nav,.account-nav {
  display:flex;
  align-items:center;
  gap:8px;
}
.workspace-nav-in {
  justify-content:space-between;
  min-height:60px;
}
.workspace-nav a {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  font-size:var(--text-sm);
  color:var(--muted);
  white-space:nowrap;
  border-radius:7px;
}
.workspace-nav a.on {
  background:var(--accent-soft);
  color:var(--accent);
}
.workspace-nav .icon {
  width:17px;
  height:17px;
}
.account-nav {
  gap:16px;
}
.link {
  background:none;
  border:0;
  color:var(--muted);
  font:inherit;
  padding:10px 2px;
}
.link:hover {
  color:var(--ink);
}
.main {
  padding-block:44px 80px;
  min-height:calc(100vh - 320px);
}
.page-home .main {
  padding-block:0 84px;
}
.skip-link {
  position:fixed;
  inset:8px auto auto 8px;
  transform:translateY(-160%);
  z-index:100;
  padding:12px 20px;
  background:var(--card);
  color:var(--ink);
  border:2px solid var(--accent);
  border-radius:8px;
}
.skip-link:focus {
  transform:none;
}
/* Controls and shared surfaces */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:var(--accent);
  color:var(--card);
  border:1px solid var(--accent);
  border-radius:9px;
  min-height:48px;
  padding:12px 20px;
  font:500 var(--text-sm)/1.5 var(--font);
  text-align:center;
  transition:background-color 150ms,color 150ms,border-color 150ms;
}
.btn:hover {
  background:var(--accent-2);
  color:var(--card);
  text-decoration:none;
}
.btn .icon {
  width:17px;
  height:17px;
}
.btn.ghost {
  background:var(--card);
  color:var(--ink);
  border-color:var(--line);
}
.btn.ghost:hover {
  background:var(--code);
  border-color:var(--muted);
}
.btn.ink {
  background:var(--ink);
  border-color:var(--ink);
}
.btn.ink:hover {
  background:var(--accent-2);
}
.btn.sm {
  min-height:40px;
  padding:9px 14px;
  font-size:var(--text-xs);
}
.btn.wide {
  width:100%;
}
.btn.danger {
  background:var(--card);
  color:var(--err);
  border-color:var(--err);
}
.btn.danger:hover {
  background:var(--err-bg);
}
.grid3 {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin:24px 0;
}
.grid2 {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin:24px 0;
}
.card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:26px;
  min-width:0;
  box-shadow:0 2px 3px #00000002;
}
.card.narrow {
  max-width:480px;
}
.card h3 {
  margin-bottom:20px;
}
.card h3:not(:first-child) {
  margin-top:28px;
}
.card p:last-child {
  margin-bottom:0;
}
code {
  background:var(--code);
  border-radius:5px;
  padding:3px 6px;
  font:var(--text-xs)/1.65 var(--mono);
  overflow-wrap:anywhere;
}
pre {
  background:var(--dark);
  color:var(--dark-text);
  border-radius:10px;
  padding:20px;
  overflow:auto;
  font:var(--text-xs)/1.8 var(--mono);
  tab-size:2;
  max-width:100%;
}
pre code {
  background:none;
  padding:0;
  color:inherit;
  font:inherit;
  overflow-wrap:normal;
}
.tag {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  padding:3px 8px;
  border-radius:5px;
  background:var(--code);
  color:var(--muted);
  white-space:nowrap;
}
.tag.ok {
  background:var(--ok-bg);
  color:var(--ok);
}
.tag.off {
  background:var(--err-bg);
  color:var(--err);
}
.flash {
  padding:14px 18px;
  border-radius:9px;
  margin-bottom:24px;
  font-size:var(--text-sm);
}
.flash.ok {
  background:var(--ok-bg);
  color:var(--ok);
  border:1px solid var(--line);
}
.flash.err {
  background:var(--err-bg);
  color:var(--err);
  border:1px solid currentColor;
}
.form label,.pg label {
  display:block;
  margin-bottom:20px;
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--ink);
}
.form input,.form select,.pg input,.pg select,.pg textarea,.login-card input {
  display:block;
  width:100%;
  min-width:0;
  margin-top:8px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  font:400 var(--text-body)/1.5 var(--font);
  color:var(--ink);
  background:var(--card);
  min-height:46px;
}
.form input:hover,.pg input:hover,.pg select:hover,.pg textarea:hover,.login-card input:hover {
  border-color:var(--muted);
}
input::placeholder,textarea::placeholder {
  color:var(--muted);
  opacity:1;
}
.form label.chk,.pg label.chk {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:400;
}
.form label.chk input {
  width:17px;
  height:17px;
  min-height:0;
  flex-shrink:0;
  margin:0;
}
.copy {
  cursor:copy;
  font:var(--text-xs)/1.7 var(--mono);
  border:1px solid var(--line);
  border-radius:5px;
  color:var(--ink);
  background:var(--code);
  padding:5px 8px;
  overflow-wrap:anywhere;
}
.copy.big {
  font-size:var(--text-sm);
  padding:10px 14px;
  word-break:break-all;
  max-width:100%;
  text-align:start;
}
.toast {
  position:fixed;
  bottom:24px;
  inset-inline-start:50%;
  transform:translateX(-50%);
  z-index:50;
  max-width:calc(100% - 32px);
  border-radius:9px;
  background:var(--ink);
  color:var(--card);
  font-size:var(--text-sm);
  box-shadow:0 5px 24px #0002;
}
.toast:not(:empty) {
  padding:12px 20px;
}
/* Landing */
.hero {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  align-items:center;
  gap:64px;
  padding-block:86px 77px;
}
.hero h1 {
  font-size:var(--display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-2.8px;
  margin-bottom:26px;
  text-wrap:initial;
}
.hero-highlight {
  color:var(--accent);
}
.lead {
  max-width:460px;
  font-size:var(--text-lg);
  line-height:1.75;
  color:var(--muted);
  margin-bottom:30px;
}
.hero-actions {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.hero-notes {
  display:flex;
  gap:22px;
  margin-top:23px;
  color:var(--muted);
  font-size:11px;
  flex-wrap:wrap;
}
.hero-notes>span {
  display:flex;
  align-items:center;
  gap:6px;
}
.hero-notes .icon {
  width:14px;
  height:14px;
  color:var(--accent);
}
.demo-stage {
  position:relative;
  padding:6px 0 0;
  isolation:isolate;
}
.demo-orbit {
  position:absolute;
  inset:-40px -24px -20px;
  background-image:radial-gradient(#afc5b9 1px,transparent 1px);
  background-size:17px 17px;
  mask-image:radial-gradient(ellipse,#000 35%,transparent 72%);
  z-index:-1;
  pointer-events:none;
}
.demo-card {
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 22px 0;
  box-shadow:0 24px 48px -24px #1a40342b,0 4px 12px #162d2208;
}
.demo-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
}
.demo-title {
  display:flex;
  gap:9px;
  align-items:center;
  font-weight:550;
  font-size:var(--text-sm);
}
.demo-title .icon {
  color:var(--accent);
  width:17px;
  height:17px;
}
.demo-heading .tag {
  font-size:11px;
}
.demo-tabs {
  display:flex;
  gap:4px;
  padding:4px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  margin-bottom:20px;
}
.demo-tabs button {
  flex:1;
  min-height:32px;
  background:transparent;
  color:var(--muted);
  font-size:var(--text-xs);
  border:0;
  border-radius:5px;
  padding:7px 10px;
}
.demo-tabs button[aria-pressed=true] {
  background:var(--card);
  color:var(--ink);
  box-shadow:0 1px 4px #00000015;
  font-weight:550;
}
.demo-input {
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
}
.demo-input p {
  font:var(--text-sm)/1.6 var(--mono);
  margin:8px 0 0;
}
.demo-flow {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:38px;
}
.demo-flow>span {
  width:1px;
  height:10px;
  background:var(--line);
}
.demo-flow>div {
  color:var(--accent);
  background:var(--accent-soft);
  padding:4px;
  border-radius:50%;
}
.demo-flow .icon {
  width:13px;
  height:13px;
  transform:rotate(90deg);
}
.demo-output {
  padding:16px;
  border:1px solid #cbe4d3;
  border-radius:8px;
  background:var(--ok-bg);
}
.demo-output .overline {
  color:var(--ok);
}
.result-check {
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--ok);
  font-size:11px;
}
.result-check .icon {
  width:12px;
  height:12px;
}
.demo-result {
  font-size:var(--text-sm);
  font-weight:550;
  line-height:1.6;
  margin:10px 0 15px;
  min-height:21px;
}
.demo-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px 18px;
  margin:0;
  padding-top:14px;
  border-top:1px solid #d3e7d9;
}
.demo-fields dt {
  font-size:var(--text-xs);
  color:var(--muted);
  margin-bottom:3px;
}
.demo-fields dd {
  font-size:var(--text-xs);
  margin:0;
  font-weight:500;
  overflow-wrap:anywhere;
}
.demo-endpoint {
  display:flex;
  align-items:center;
  gap:10px;
  padding-block:17px;
  color:var(--muted);
}
.demo-endpoint code {
  padding:0;
  background:none;
  font-size:var(--text-xs);
}
.demo-endpoint>.icon {
  width:15px;
  height:15px;
  margin-inline-start:auto;
}
.method-badge {
  font:600 10px var(--mono);
  color:var(--accent);
  background:var(--accent-soft);
  padding:4px 6px;
  border-radius:4px;
}
.demo-caption {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:var(--text-xs);
  margin-top:20px;
}
.status-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
.facts-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding:30px 0 34px;
  border-block:1px solid var(--line);
  gap:26px;
}
.facts-strip>div {
  padding-inline-start:28px;
  border-inline-start:1px solid var(--line);
}
.facts-strip>div:first-child {
  padding-inline-start:0;
  border:0;
}
.facts-strip strong {
  font-size:var(--heading-md);
  font-weight:550;
  letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;
}
.facts-strip strong span {
  font-size:var(--text-lg);
  font-weight:400;
}
.facts-strip p {
  font-size:11px;
  margin:5px 0 0;
  color:var(--muted);
}
.features-section {
  padding-top:90px;
  scroll-margin-top:36px;
}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:32px;
}
.section-heading .eyebrow,.integration-copy .eyebrow {
  font-size:var(--text-xs);
  letter-spacing:1.4px;
  margin-bottom:17px;
}
.section-heading h2,.integration-copy h2 {
  font-size:36px;
  line-height:1.2;
  letter-spacing:-1.4px;
  margin:0;
}
.section-heading>p {
  color:var(--muted);
  font-size:var(--text-sm);
  margin:0 0 4px;
  line-height:1.8;
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.feature-card {
  display:flex;
  flex-direction:column;
  padding:26px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:13px;
  color:var(--ink);
  transition:border-color 150ms,box-shadow 150ms;
}
.feature-card:hover {
  color:var(--ink);
  text-decoration:none;
  border-color:#aac5b5;
  box-shadow:0 8px 28px #1a40340a;
}
.feature-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:43px;
  height:43px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg);
  margin-bottom:25px;
}
.feature-icon .icon {
  width:23px;
  height:23px;
}
.feature-card h3 {
  font-size:20px;
  margin-bottom:12px;
}
.feature-card>p {
  font-size:var(--text-sm);
  line-height:1.8;
  color:var(--muted);
  margin-bottom:22px;
  min-height:70px;
}
.feature-example {
  display:flex;
  flex-direction:column;
  gap:7px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:7px;
  padding:14px 16px;
  margin-top:auto;
}
.example-label {
  font-size:var(--text-xs);
  color:var(--muted);
}
.example-before {
  font:var(--text-xs)/1.6 var(--mono);
  color:var(--muted);
}
.example-after {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:var(--text-xs);
  font-weight:500;
}
.example-after .icon {
  width:14px;
  height:14px;
  color:var(--accent);
}
.feature-tags {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding-block:20px 24px;
}
.feature-tags span {
  font-size:var(--text-xs);
  color:var(--muted);
  background:var(--bg);
  padding:3px 7px;
  border:1px solid var(--line);
  border-radius:4px;
}
.feature-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:500;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.feature-link .icon {
  width:16px;
  height:16px;
}
.suggest-banner {
  display:flex;
  align-items:center;
  gap:18px;
  padding:23px 26px;
  background:var(--accent-soft);
  border-radius:11px;
  margin-top:20px;
}
.suggest-icon {
  color:var(--accent);
  padding:12px;
  background:var(--card);
  border-radius:9px;
}
.suggest-banner h3 {
  font-size:var(--text-sm);
  margin:0 0 5px;
}
.suggest-banner p {
  font-size:var(--text-xs);
  margin:0;
  color:var(--muted);
}
.suggest-banner>a {
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:15px;
  white-space:nowrap;
  font-size:var(--text-xs);
  font-weight:500;
  color:var(--ink);
}
.suggest-banner>a .icon {
  width:16px;
  height:16px;
}
.integration-section {
  display:grid;
  grid-template-columns:1fr 1.12fr;
  gap:76px;
  padding-block:95px 70px;
  align-items:start;
}
.section-description {
  color:var(--muted);
  font-size:var(--text-sm);
  line-height:1.8;
  margin:22px 0 30px;
  max-width:380px;
}
.integration-steps {
  list-style:none;
  padding:0;
  margin:0 0 32px;
  display:grid;
  gap:23px;
}
.integration-steps li {
  display:flex;
  gap:15px;
  align-items:start;
}
.integration-steps li>span {
  font:11px var(--mono);
  border:1px solid var(--line);
  border-radius:50%;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--muted);
  background:var(--card);
}
.integration-steps h3 {
  font-size:var(--text-sm);
  margin:0 0 5px;
}
.integration-steps p {
  font-size:var(--text-xs);
  color:var(--muted);
  margin:0;
}
.text-link {
  display:inline-flex;
  gap:12px;
  align-items:center;
  color:var(--ink);
  font-size:var(--text-xs);
  font-weight:550;
}
.text-link .icon {
  width:16px;
  height:16px;
}
.code-window {
  background:var(--dark);
  color:var(--dark-text);
  border:1px solid var(--dark);
  border-radius:13px;
  overflow:hidden;
  min-width:0;
  box-shadow:0 18px 35px -25px #18362c70;
}
.code-window-bar {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:55px;
  padding:8px 20px;
  border-bottom:1px solid #ffffff17;
  font-size:11px;
}
.code-window-bar>span:first-child {
  display:flex;
  align-items:center;
  gap:9px;
}
.code-window-bar .icon {
  width:15px;
  height:15px;
}
.code-language {
  margin-inline-start:auto;
  color:var(--dark-muted);
  font:11px var(--mono);
}
.code-copy {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  min-height:30px;
  background:transparent;
  color:var(--dark-muted);
  border:1px solid #ffffff24;
  border-radius:5px;
}
.code-copy:hover {
  color:var(--card);
  background:#ffffff12;
}
.code-copy:focus-visible,.code-window a:focus-visible {
  outline-color:var(--mint);
}
.code-window pre {
  margin:0;
  padding:23px 22px;
  font-size:var(--text-xs);
  line-height:1.95;
  border-radius:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.code-window pre code {
  overflow-wrap:anywhere;
}
.syntax-command {
  color:#e3d5a6;
}
.syntax-string {
  color:#abe5c1;
}
.syntax-key {
  color:#bdd2c8;
}
.syntax-number {
  color:#e3d5a6;
}
.code-response-bar {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-inline:22px;
  padding-top:16px;
  border-top:1px solid #ffffff17;
  color:var(--dark-muted);
  font:11px var(--mono);
}
.code-response-bar>span:last-child {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--mint);
}
.code-response-bar .status-dot {
  background:var(--mint);
}
.code-window pre.response-code {
  padding-top:14px;
}
.code-footnote {
  font-size:11px;
  color:var(--dark-muted);
  padding:12px 22px;
  border-top:1px solid #ffffff17;
}
.code-footnote a {
  color:var(--mint);
}
.compat-strip {
  display:flex;
  align-items:center;
  gap:24px;
  padding:26px 0;
  border-block:1px solid var(--line);
}
.compat-symbol {
  font:28px var(--mono);
  letter-spacing:-5px;
  padding-inline-end:8px;
  color:var(--muted);
}
.compat-strip h3 {
  font-size:var(--text-body);
  margin:0 0 6px;
}
.compat-strip p {
  font-size:var(--text-xs);
  max-width:520px;
  color:var(--muted);
  margin:0;
}
.compat-strip .btn {
  margin-inline-start:auto;
  flex-shrink:0;
  font-size:var(--text-xs);
}
.final-cta {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  margin-top:72px;
  padding:46px 48px;
  background:var(--dark);
  border-radius:15px;
  color:var(--dark-text);
}
.final-cta .eyebrow {
  font-size:11px;
  color:var(--dark-muted);
  margin-bottom:16px;
  letter-spacing:.7px;
}
.final-cta h2 {
  font-size:36px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-1.2px;
  margin:0;
}
.cta-actions {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:15px;
}
.cta-actions .btn {
  background:var(--mint);
  color:var(--dark);
  border-color:var(--mint);
}
.cta-actions .btn:hover {
  background:var(--card);
}
.cta-actions>span {
  font-size:11px;
  color:var(--dark-muted);
}
.cta-pattern {
  position:absolute;
  width:360px;
  height:360px;
  border:1px solid #ffffff0d;
  inset:-140px auto auto 38%;
  transform:rotate(35deg);
  border-radius:60px;
  box-shadow:0 0 0 40px #ffffff03,0 0 0 80px #ffffff03;
  z-index:-1;
  pointer-events:none;
}
/* Documentation, tables, workspace */
.docs {
  display:grid;
  grid-template-columns:225px minmax(0,1fr);
  gap:54px;
}
.toc {
  position:sticky;
  top:114px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-inline-end:22px;
  border-inline-end:1px solid var(--line);
}
.toc-label {
  font-size:var(--text-xs);
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--muted);
  padding:0 12px 16px;
  font-weight:500;
}
.toc a {
  color:var(--muted);
  font-size:var(--text-xs);
  padding:9px 12px;
  border-radius:6px;
  line-height:1.65;
}
.toc a:hover,.toc a.active {
  background:var(--accent-soft);
  color:var(--accent);
  text-decoration:none;
}
.toc-extra {
  margin-top:25px;
  padding:18px 12px 0;
  border-top:1px solid var(--line);
}
.toc-extra p {
  font-size:var(--text-xs);
  margin-bottom:8px;
}
.toc-extra a {
  padding:0;
  color:var(--accent);
}
.docs article {
  min-width:0;
}
.docs article>h1 {
  font-size:36px;
  margin-bottom:20px;
}
.docs article>p,.docs article>ul {
  font-size:var(--text-sm);
  line-height:1.9;
  color:var(--muted);
  max-width:75ch;
}
.docs article>h2 {
  padding-top:30px;
  margin-top:38px;
  border-top:1px solid var(--line);
  scroll-margin-top:105px;
}
.docs article>pre {
  margin-block:20px;
}
.docs article>ul {
  padding-inline-start:22px;
}
.docs article li {
  margin-bottom:8px;
}
.docs-intro-label {
  display:flex;
  align-items:center;
  gap:8px;
  font:11px var(--mono);
  color:var(--accent);
  margin-bottom:14px;
}
.docs-intro-label .tag {
  color:var(--accent);
  background:var(--accent-soft);
}
.table-scroll {
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--card);
}
.table-scroll:focus-visible {
  outline-offset:2px;
}
.table-scroll>.tbl {
  border:0;
  margin:0;
  box-shadow:none;
  border-radius:0;
}
.tbl {
  width:100%;
  border-collapse:collapse;
  font-size:var(--text-xs);
  text-align:start;
}
.tbl th {
  text-align:start;
  font-weight:500;
  color:var(--muted);
  font-size:11px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:13px 14px;
  white-space:nowrap;
}
.tbl td {
  padding:14px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  line-height:1.7;
  overflow-wrap:anywhere;
}
.tbl tr:last-child td {
  border-bottom:0;
}
.tbl tr:hover td {
  background:var(--bg);
}
.tbl .r {
  text-align:end;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.tbl.card {
  padding:0;
  display:table;
}
.stats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:20px;
  margin:26px 0;
}
.stats>div {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:25px;
}
.stats b {
  display:block;
  font-size:32px;
  line-height:1.3;
  font-weight:550;
  letter-spacing:-1px;
  margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.stats span {
  color:var(--muted);
  font-size:var(--text-xs);
}
.bars {
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:180px;
  padding-top:24px;
}
.bar {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  height:100%;
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.bar i {
  display:block;
  width:100%;
  background:var(--accent);
  border-radius:4px 4px 0 0;
  min-height:3px;
}
.bar span {
  margin-top:8px;
}
.page-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}
.page-header h1 {
  margin-bottom:8px;
}
.page-header p {
  font-size:var(--text-sm);
  color:var(--muted);
  margin:0;
}
.page-header .eyebrow {
  font-size:var(--text-xs);
  margin-bottom:12px;
}
.pg {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.pg .out {
  min-height:340px;
  max-height:70vh;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:16px 0 0;
  font-size:var(--text-xs);
}
.pg textarea {
  resize:vertical;
  font-family:var(--mono);
  font-size:var(--text-sm);
  line-height:1.8;
}
.panel-heading {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
  font-size:var(--text-body);
  font-weight:550;
}
.panel-heading .icon {
  color:var(--muted);
  width:18px;
  height:18px;
}
.pg-examples {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.pg-examples button {
  padding:7px 10px;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:6px;
  font:var(--text-xs) var(--font);
  min-height:34px;
}
.pg-examples button:hover {
  background:var(--accent-soft);
  border-color:var(--accent);
}
.pg-shortcut {
  font-size:var(--text-xs);
  color:var(--muted);
}
#pg-time {
  font-size:var(--text-xs);
  font-variant-numeric:tabular-nums;
}
#pg-time.error {
  color:var(--err);
}
#pg-curl {
  font-size:var(--text-xs);
  padding:6px 8px;
}
.pg-output-heading {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:12px;
}
.pg-output-title {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
}
.pg-output-title .panel-heading {
  margin:0;
}
.pg-output-title .code-copy {
  color:var(--muted);
  border-color:var(--line);
}
.pg-output-title .code-copy:hover {
  background:var(--code);
}
.examples-label {
  font-size:var(--text-xs);
  color:var(--muted);
  margin:24px 0 0;
}
/* Login */
.bare-main {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100svh;
}
.login-story {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:48px 56px;
  background:var(--dark);
  color:var(--dark-text);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.login-story:before {
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(#ffffff24 .8px,transparent .8px);
  background-size:24px 24px;
  mask-image:linear-gradient(transparent,#000);
  z-index:-1;
  pointer-events:none;
}
.login-story .brand {
  color:var(--dark-text);
}
.login-story .mark {
  background:var(--mint);
  color:var(--dark);
}
.login-story-main {
  padding-block:90px;
}
.login-story .eyebrow {
  color:var(--dark-muted);
  font-size:var(--text-xs);
  letter-spacing:1.1px;
}
.login-story h2 {
  font-size:clamp(32px,3.5vw,50px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-1.8px;
  margin:0 0 24px;
}
.login-story p {
  color:var(--dark-muted);
  font-size:var(--text-body);
  line-height:1.8;
}
.login-story-foot {
  font-size:var(--text-xs);
  color:var(--dark-muted);
}
.login-visual {
  display:flex;
  align-items:center;
  margin-top:60px;
  font-size:var(--text-xs);
}
.login-visual>div:first-child {
  display:grid;
  gap:7px;
}
.login-visual>div:first-child span {
  padding:7px 14px;
  background:#ffffff08;
  border:1px solid #ffffff24;
  border-radius:6px;
  color:var(--dark-muted);
}
.login-connector {
  width:24px;
  height:1px;
  background:#ffffff40;
}
.login-visual-mark {
  padding:10px;
  border:1px solid #ffffff30;
  border-radius:16px;
  background:#ffffff08;
}
.login-visual-mark .mark {
  width:48px;
  height:48px;
  border-radius:9px;
}
.login-visual-result {
  display:flex;
  gap:6px;
  align-items:center;
  color:var(--mint);
  border:1px solid #ffffff30;
  border-radius:7px;
  background:#ffffff08;
  padding:13px 12px;
}
.login-visual-result .icon {
  width:14px;
  height:14px;
}
.login-panel {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:100px 48px;
  background:var(--card);
}
.login-back {
  position:absolute;
  top:48px;
  inset-inline-start:48px;
  color:var(--muted);
  font-size:var(--text-xs);
  display:flex;
  gap:10px;
  align-items:center;
  min-height:24px;
}
.login-card {
  width:100%;
  max-width:360px;
}
.login-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  margin-bottom:25px;
}
.login-card h1 {
  font-size:30px;
  letter-spacing:-1px;
}
.login-card>p {
  font-size:var(--text-sm);
  margin-bottom:30px;
}
.login-card label {
  display:block;
  font-size:var(--text-xs);
  font-weight:500;
  margin:22px 0 8px;
}
.login-card input {
  font-size:var(--text-sm);
  min-height:48px;
}
.login-card .btn {
  margin-top:26px;
}
.login-card p.login-help {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:var(--text-xs);
  color:var(--muted);
  margin-top:22px;
}
.login-help .icon {
  width:13px;
  height:13px;
}
.login-panel-foot {
  position:absolute;
  bottom:40px;
  font-size:var(--text-xs);
  color:var(--muted);
  text-align:center;
  padding-inline:24px;
}
.login-panel-foot a {
  margin-inline-start:7px;
}
/* Footer */
.foot {
  background:var(--card);
  border-top:1px solid var(--line);
}
.footer-in {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  padding-block:38px 28px;
}
.footer-brand {
  font-size:21px;
}
.footer-brand .mark {
  width:30px;
  height:30px;
  border-radius:8px;
}
.footer-brand .mark svg {
  width:28px;
  height:28px;
}
.footer-in p {
  font-size:var(--text-xs);
  color:var(--muted);
  margin:12px 0 0;
}
.footer-links {
  display:flex;
  align-items:center;
  gap:25px;
  font-size:11px;
}
.footer-links a {
  color:var(--ink);
}
.footer-links>span {
  color:var(--muted);
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:20px 24px;
  font-size:11px;
  color:var(--muted);
  border-top:1px solid var(--line);
}
/* Content-driven breakpoints */
@media(min-width:1500px) {
  .hero {
    padding-block:104px 90px;
  }
}
@media(max-width:1150px) {
  .wrap {
    padding-inline:28px;
  }
  .hero {
    gap:32px;
  }
  .hero h1 {
    font-size:clamp(40px,4.5vw,54px);
    letter-spacing:-2px;
  }
  .brand-by,.brand-divider {
    display:none;
  }
  .nav {
    gap:22px;
  }
  .hero-actions .btn {
    padding-inline:14px;
    font-size:12px;
  }
  .feature-card {
    padding:22px;
  }
  .feature-card>p {
    min-height:92px;
  }
  .facts-strip {
    gap:16px;
  }
  .facts-strip>div {
    padding-inline-start:20px;
  }
  .facts-strip strong {
    font-size:21px;
  }
  .facts-strip strong span {
    font-size:15px;
  }
  .integration-section {
    gap:40px;
  }
  .section-heading h2,.integration-copy h2 {
    font-size:32px;
  }
  .docs {
    gap:32px;
    grid-template-columns:200px minmax(0,1fr);
  }
  .login-story {
    padding-inline:36px;
  }
  .login-visual {
    flex-wrap:wrap;
  }
  .final-cta {
    padding:38px 32px;
  }
  .final-cta h2 {
    font-size:32px;
  }
}
@media(max-width:900px) {
  .hero {
    grid-template-columns:1fr;
    gap:42px;
    padding-block:58px 50px;
  }
  .hero-copy {
    max-width:650px;
  }
  .hero h1 {
    font-size:clamp(44px,7.2vw,62px);
  }
  .lead {
    max-width:540px;
  }
  .demo-stage {
    width:100%;
    max-width:550px;
    justify-self:center;
  }
  .facts-strip {
    grid-template-columns:1fr 1fr;
    gap:28px;
    padding-block:28px;
  }
  .facts-strip>div:nth-child(3) {
    border:0;
    padding-inline-start:0;
  }
  .facts-strip strong {
    font-size:25px;
  }
  .facts-strip p {
    font-size:12px;
  }
  .feature-grid {
    gap:12px;
  }
  .feature-card {
    padding:20px 16px;
  }
  .feature-card h3 {
    font-size:17px;
  }
  .feature-card>p {
    font-size:12px;
    min-height:106px;
  }
  .feature-example {
    padding:12px;
  }
  .example-after {
    font-size:11px;
  }
  .feature-link {
    font-size:var(--text-xs);
  }
  .suggest-banner {
    padding:20px;
  }
  .suggest-banner>a {
    white-space:normal;
    min-width:100px;
  }
  .integration-section {
    grid-template-columns:1fr;
    gap:32px;
    padding-block:70px 50px;
  }
  .integration-copy {
    max-width:620px;
  }
  .integration-steps {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
  }
  .integration-steps li {
    flex-direction:column;
    gap:10px;
  }
  .code-window pre {
    font-size:12px;
  }
  .compat-strip {
    flex-wrap:wrap;
  }
  .compat-strip>div:nth-child(2) {
    flex:1;
  }
  .compat-strip .btn {
    margin-inline-start:60px;
  }
  .final-cta {
    flex-direction:column;
    align-items:start;
    gap:26px;
  }
  .cta-actions {
    gap:12px;
  }
  .docs {
    grid-template-columns:1fr;
    gap:30px;
  }
  .toc {
    position:static;
    border:1px solid var(--line);
    border-radius:10px;
    padding:14px;
    flex-direction:row;
    flex-wrap:wrap;
    background:var(--card);
    gap:3px;
  }
  .toc-label {
    flex-basis:100%;
    padding:4px 10px 8px;
  }
  .toc-extra {
    display:none;
  }
  .toc a {
    padding:7px 10px;
  }
  .docs article>h2 {
    scroll-margin-top:105px;
  }
  .pg {
    grid-template-columns:1fr;
  }
  .pg .out {
    min-height:260px;
  }
  .grid2 {
    gap:16px;
  }
  .card {
    padding:22px;
  }
  .login-story {
    padding:40px 28px;
  }
  .login-story-main {
    padding-block:65px;
  }
  .login-story h2 {
    font-size:36px;
  }
  .login-visual {
    display:none;
  }
  .login-panel {
    padding-inline:32px;
  }
  .login-back {
    inset-inline-start:32px;
  }
  .footer-links {
    gap:18px;
  }
}
@media(max-width:680px) {
  .wrap {
    padding-inline:20px;
  }
  .top-in {
    min-height:70px;
    position:relative;
    flex-wrap:wrap;
    gap:0;
  }
  .brand {
    font-size:22px;
  }
  .mark {
    width:32px;
    height:32px;
    border-radius:8px;
  }
  .mark svg {
    width:29px;
    height:29px;
  }
  .js .menu-toggle {
    display:flex;
  }
  .nav {
    width:100%;
    flex-direction:column;
    align-items:stretch;
    padding:4px 0 18px;
    gap:5px;
  }
  .js .nav {
    display:none;
  }
  .js .nav.is-open {
    display:flex;
  }
  .nav>a {
    padding:10px 12px;
    min-height:44px;
    border-radius:6px;
  }
  .nav>a.on {
    background:var(--accent-soft);
    text-decoration:none;
  }
  .nav .btn {
    margin-top:4px;
  }
  .hero {
    padding-top:43px;
    gap:36px;
  }
  .hero .eyebrow {
    font-size:11px;
    letter-spacing:.8px;
    margin-bottom:23px;
  }
  .hero h1 {
    font-size:clamp(36px,7.8vw,50px);
    letter-spacing:-1.8px;
    margin-bottom:22px;
  }
  .lead {
    font-size:15px;
    line-height:1.8;
    margin-bottom:25px;
  }
  .desktop-break {
    display:none;
  }
  .hero-actions {
    gap:10px;
  }
  .hero-actions .btn {
    min-height:46px;
    padding:11px 13px;
    font-size:11px;
    gap:7px;
  }
  .hero-notes {
    gap:17px;
    font-size:var(--text-xs);
    margin-top:20px;
  }
  .demo-orbit {
    inset:-18px -16px;
  }
  .demo-card {
    padding:18px 18px 0;
    border-radius:13px;
  }
  .demo-heading {
    margin-bottom:18px;
  }
  .demo-tabs button {
    min-height:38px;
    font-size:12px;
  }
  .demo-caption {
    font-size:11px;
  }
  .facts-strip {
    gap:24px 16px;
    padding-block:26px;
  }
  .facts-strip strong {
    font-size:22px;
  }
  .facts-strip strong span {
    font-size:13px;
  }
  .facts-strip p {
    font-size:var(--text-xs);
  }
  .facts-strip>div {
    padding-inline-start:16px;
  }
  .section-heading {
    flex-direction:column;
    align-items:start;
    gap:20px;
    margin-bottom:24px;
  }
  .section-heading h2,.integration-copy h2 {
    font-size:30px;
    letter-spacing:-1px;
  }
  .section-heading>p {
    font-size:12px;
  }
  .features-section {
    padding-top:56px;
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:16px;
  }
  .feature-card {
    padding:26px;
  }
  .feature-icon {
    margin-bottom:22px;
  }
  .feature-card h3 {
    font-size:22px;
  }
  .feature-card>p {
    font-size:14px;
    min-height:0;
    margin-bottom:24px;
  }
  .feature-example {
    padding:16px;
  }
  .example-label {
    font-size:11px;
  }
  .example-before,.example-after {
    font-size:13px;
  }
  .feature-tags span {
    font-size:11px;
  }
  .feature-link {
    font-size:12px;
    min-height:44px;
  }
  .suggest-banner {
    flex-wrap:wrap;
    gap:13px;
    padding:22px;
  }
  .suggest-banner>div {
    flex:1;
    min-width:170px;
  }
  .suggest-banner h3 {
    line-height:1.6;
  }
  .suggest-banner>a {
    margin-inline-start:0;
    width:100%;
    padding-top:9px;
    justify-content:space-between;
    min-height:40px;
  }
  .suggest-icon {
    padding:9px;
  }
  .integration-section {
    padding-top:60px;
    gap:28px;
  }
  .integration-steps {
    grid-template-columns:1fr;
    gap:24px;
  }
  .integration-steps li {
    flex-direction:row;
    gap:14px;
  }
  .integration-steps p {
    font-size:12px;
  }
  .code-window pre {
    font-size:var(--text-xs);
    padding:20px 16px;
  }
  .code-window-bar {
    padding-inline:16px;
  }
  .code-footnote {
    padding-inline:16px;
  }
  .code-response-bar {
    margin-inline:16px;
  }
  .compat-strip {
    gap:16px;
    padding-block:24px;
  }
  .compat-strip p {
    font-size:12px;
  }
  .compat-strip .btn {
    margin-inline-start:0;
  }
  .compat-symbol {
    font-size:24px;
  }
  .final-cta {
    margin-top:48px;
    padding:30px 24px;
    border-radius:12px;
  }
  .final-cta .eyebrow {
    font-size:10px;
    line-height:1.8;
    max-width:260px;
  }
  .final-cta h2 {
    font-size:30px;
  }
  .cta-actions .btn {
    font-size:11px;
    gap:10px;
    padding-inline:15px;
  }
  .cta-actions>span {
    font-size:11px;
    max-width:240px;
  }
  .page-home .main {
    padding-bottom:50px;
  }
  .footer-in {
    flex-direction:column;
    align-items:start;
    padding-block:30px 24px;
    gap:25px;
  }
  .footer-links {
    flex-wrap:wrap;
    gap:12px 22px;
    font-size:11px;
  }
  .footer-bottom {
    font-size:10px;
    flex-wrap:wrap;
    gap:8px;
  }
  .main {
    padding-block:30px 50px;
  }
  h1 {
    font-size:28px;
    letter-spacing:-.8px;
  }
  .page-header {
    align-items:start;
    flex-direction:column;
    gap:18px;
  }
  .page-header p {
    font-size:12px;
  }
  .grid2,.grid3 {
    grid-template-columns:1fr;
  }
  .stats {
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .stats>div {
    padding:18px;
  }
  .stats b {
    font-size:27px;
  }
  .stats span {
    font-size:var(--text-xs);
  }
  .card {
    padding:20px;
  }
  .workspace-nav-in {
    gap:12px;
    overflow-x:auto;
  }
  .workspace-nav nav {
    gap:3px;
  }
  .workspace-nav a {
    padding:12px 10px;
    font-size:11px;
    min-height:44px;
  }
  .workspace-nav .icon {
    width:15px;
    height:15px;
  }
  .account-nav {
    gap:4px;
  }
  .account-nav .link {
    font-size:11px;
    white-space:nowrap;
    padding:12px 4px;
  }
  .tbl th,.tbl td {
    padding:12px 10px;
  }
  .tbl {
    min-width:460px;
  }
  .docs .tbl {
    min-width:600px;
  }
  .docs article>h1 {
    font-size:30px;
  }
  .docs article>h2 {
    font-size:22px;
    margin-top:30px;
    scroll-margin-top:85px;
  }
  .docs article>p,.docs article>ul {
    font-size:13px;
  }
  .docs pre {
    padding:16px;
    font-size:11px;
  }
  .toc a {
    font-size:11px;
    min-height:36px;
  }
  .form input,.form select,.pg input,.pg select,.pg textarea,.login-card input {
    font-size:16px;
  }
  .pg-shortcut {
    display:none;
  }
  .pg-examples button {
    min-height:40px;
  }
  .pg .out {
    min-height:230px;
    font-size:11px;
  }
  .bare-main {
    grid-template-columns:1fr;
  }
  .login-story {
    padding:25px 24px;
  }
  .login-story-main {
    padding:35px 0 10px;
  }
  .login-story .eyebrow {
    font-size:11px;
    margin-bottom:14px;
  }
  .login-story h2 {
    font-size:30px;
    letter-spacing:-1px;
    margin-bottom:14px;
  }
  .login-story p {
    font-size:12px;
    margin-bottom:0;
  }
  .login-story-foot {
    display:none;
  }
  .login-panel {
    padding:78px 24px 70px;
  }
  .login-back {
    top:24px;
    inset-inline-start:24px;
  }
  .login-icon {
    display:none;
  }
  .login-card h1 {
    font-size:27px;
  }
  .login-card>p {
    margin-bottom:24px;
  }
  .login-panel-foot {
    position:static;
    margin-top:30px;
    padding:0;
    font-size:var(--text-xs);
  }
  .login-card .btn {
    min-height:48px;
  }
  .bare .login-story h2 br {
    display:none;
  }
  .bare .login-story p br {
    display:none;
  }
}
@media(max-width:360px) {
  .wrap {
    padding-inline:16px;
  }
  .hero-actions {
    align-items:stretch;
    flex-direction:column;
  }
  .hero-actions .btn {
    font-size:12px;
  }
  .hero-notes {
    gap:12px;
    font-size:11px;
  }
  .demo-card {
    padding:14px 14px 0;
  }
  .demo-output {
    padding:12px;
  }
  .demo-heading .tag {
    font-size:10px;
  }
  .demo-heading {
    gap:6px;
  }
  .demo-title {
    font-size:12px;
  }
  .demo-result {
    font-size:12px;
  }
  .demo-caption {
    font-size:10px;
  }
  .result-check {
    font-size:10px;
  }
  .overline {
    font-size:11px;
  }
  .facts-strip strong {
    font-size:20px;
  }
  .facts-strip strong span {
    font-size:12px;
  }
  .stats {
    grid-template-columns:1fr;
  }
  .feature-card {
    padding:22px;
  }
  .final-cta {
    padding:26px 20px;
  }
}
@media(prefers-reduced-motion:no-preference) {
  html {
    scroll-behavior:smooth;
  }
  .btn {
    transition:background-color 150ms,color 150ms,border-color 150ms,scale 150ms cubic-bezier(0.2,0,0,1);
  }
  .btn:active {
    scale:.96;
  }
  .feature-card {
    transition:border-color 150ms,box-shadow 150ms,translate 150ms;
  }
  .feature-card:hover {
    translate:0 -3px;
  }
}
@media(forced-colors:active) {
  :focus-visible {
    outline:2px solid Highlight;
  }
  .btn,.mark,.demo-tabs button[aria-pressed=true] {
    border:1px solid ButtonText;
  }
  .status-dot {
    background:CanvasText;
  }
}
.docs-code {
  margin-block:22px;
  border:1px solid var(--dark);
  border-radius:10px;
  overflow:hidden;
  background:var(--dark);
  color:var(--dark-text);
}
.docs-code-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 16px;
  border-bottom:1px solid #ffffff17;
  color:var(--dark-muted);
  font-size:var(--text-xs);
}
.docs-code-bar .code-copy {
  font:11px var(--font);
  padding:5px 10px;
}
.docs-code pre {
  margin:0;
  border-radius:0;
}
.docs-code .code-copy:focus-visible {
  outline-color:var(--mint);
}
.login-story a:focus-visible,.final-cta .btn:focus-visible {
  outline-color:var(--mint);
}
.pg-output-title .code-copy:focus-visible {
  outline-color:var(--focus);
}
.card h2 {
  font-size:var(--heading-sm);
  line-height:1.35;
  letter-spacing:-.25px;
  margin:0 0 20px;
}
.card h2:not(:first-child) {
  margin-top:28px;
}
.code-footnote a,.login-panel-foot a,.docs article p a,.card p a:not(.btn),.tbl td a {
  text-decoration:underline;
}
pre:focus-visible {
  outline-color:var(--mint);
  outline-offset:-4px;
}

/* Keep sparse usage charts readable and long service lists compact. */
.dashboard-analytics .table-scroll { max-height: 286px; }
.bars { overflow-x: auto; padding-bottom: 4px; }
.bar { max-width: 42px; min-width: 28px; }
.bar-value { font-size: 11px; color: var(--ink); margin-bottom: 8px; }
@media (max-width: 680px) {
  .compat-strip { display: grid; grid-template-columns: 32px minmax(0, 1fr); }
  .compat-strip .btn { grid-column: 2; justify-self: start; white-space: normal; }
}
.compat-symbol { white-space: nowrap; }