:root {
  --docs-accent: #e85619;
  --docs-blue: #2d6ecb;
  --docs-copy: #455364;
  --docs-callout: #f3f7fc;
  --docs-code: #111923;
  --docs-code-text: #edf2f7;
  --docs-tip-border: #dbe8dc;
  --docs-tip-bg: #f2f8f2;
  --docs-tip-text: #16764b;
  --docs-header-height: 134px;
}

:root[data-theme='dark'] {
  --docs-copy: #c5d0d8;
  --docs-callout: #172331;
  --docs-code: #0c1219;
  --docs-code-text: #e7eef5;
  --docs-tip-border: #29483a;
  --docs-tip-bg: #13251d;
  --docs-tip-text: #7bd6a9;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme='system'] {
    --docs-copy: #c5d0d8;
    --docs-callout: #172331;
    --docs-code: #0c1219;
    --docs-code-text: #e7eef5;
    --docs-tip-border: #29483a;
    --docs-tip-bg: #13251d;
    --docs-tip-text: #7bd6a9;
  }
}

html { scroll-behavior: smooth; }
body { margin: 0; }
.nav { z-index: 50; }
.docs-toolbar {
  position: sticky;
  z-index: 39;
  top: 76px;
  display: grid;
  grid-template-columns: 240px minmax(240px, 620px) 1fr;
  gap: 24px;
  align-items: center;
  height: 58px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(16px);
  transition: top .28s cubic-bezier(.2,.8,.2,1);
}
body.header-scrolled { --docs-header-height: 120px; }
body.header-scrolled .docs-toolbar { top: 62px; }

.docs-section-title { display: flex; align-items: center; gap: 10px; }
.docs-section-title strong { font-size: 13px; }
.docs-menu { display: none; }
.docs-search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-muted);
}
.docs-search:focus-within { border-color: #a8bcd8; box-shadow: 0 0 0 3px #2d6ecb12; }
.docs-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }
.docs-search kbd { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.docs-actions { display: flex; justify-content: flex-end; gap: 18px; }
.docs-actions a, .docs-toc a { color: var(--docs-blue); text-decoration: none; }

.docs-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 820px) 220px;
  justify-content: center;
  gap: 44px;
}
.docs-nav {
  position: sticky;
  top: var(--docs-header-height);
  height: calc(100vh - var(--docs-header-height));
  padding: 28px 22px;
  overflow: auto;
  border-right: 1px solid var(--line);
}
.docs-nav p { margin: 20px 0 5px; color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.docs-nav p:first-child { margin-top: 0; }
.docs-nav a { display: block; padding: 7px 9px; border-radius: 7px; color: var(--muted); text-decoration: none; }
.docs-nav a:hover, .docs-nav a.active { color: var(--docs-accent); background: var(--surface-muted); }
.docs-nav-group + .docs-nav-group { margin-top: 17px; padding-top: 3px; border-top: 1px solid var(--line); }
.docs-nav-group p { margin-top: 12px; }
.docs-nav-product { margin: 14px -10px 0; padding: 10px !important; border: 1px solid color-mix(in srgb, var(--orange) 24%, var(--line)) !important; border-radius: 10px; background: color-mix(in srgb, var(--orange) 3%, var(--surface)); }
.docs-nav-product p { margin: 0 0 5px; color: var(--orange); }
.docs-nav .docs-nav-parent { color: var(--ink); font-weight: 850; }
.docs-nav .docs-nav-child { position: relative; padding: 6px 8px 6px 22px; font-size: 11px; }
.docs-nav .docs-nav-child::before { position: absolute; top: 50%; left: 9px; width: 5px; height: 1px; background: color-mix(in srgb, var(--muted) 60%, transparent); content: ""; }
.docs-nav-future span { display: flex; justify-content: space-between; padding: 7px 9px; color: var(--muted); font-size: 11px; }
.docs-nav-future em { padding: 2px 5px; border-radius: 5px; background: var(--surface-muted); font-size: 9px; font-style: normal; }

.docs-main { min-width: 0; padding: 66px 0 100px; }
.docs-main article { padding-bottom: 64px; margin-bottom: 64px; border-bottom: 1px solid var(--line); scroll-margin-top: 152px; }
.docs-main h1 { margin: 12px 0 18px; font-size: 54px; line-height: 1.08; letter-spacing: 0; }
.docs-main h2 { margin: 12px 0 14px; font-size: 30px; letter-spacing: 0; }
.docs-main p { color: var(--docs-copy); }
.lead { font-size: 18px; }
.eyebrow { color: var(--docs-blue); font-size: 11px; font-weight: 850; }
.badge, .method { display: inline-flex; padding: 5px 9px; border-radius: 6px; color: #16764b; background: #e4f6ed; font-size: 10px; font-weight: 800; }
.method { color: var(--docs-accent); background: #fff0e9; }
.method.get { color: var(--docs-blue); background: #e9f1ff; }

.callout { display: grid; grid-template-columns: 120px 1fr; gap: 14px; margin: 24px 0; padding: 16px; border-left: 3px solid var(--docs-blue); background: var(--docs-callout); }
.callout span { color: var(--muted); }
.steps { display: grid; gap: 10px; padding: 0; list-style: none; }
.steps li { display: flex; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 8px; }
.steps b { display: grid; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; background: var(--surface-muted); place-items: center; }
code { font-family: ui-monospace, monospace; }
pre { position: relative; margin: 20px 0; overflow: auto; border-radius: 8px; color: var(--docs-code-text); background: var(--docs-code); }
pre code { display: block; padding: 22px; font-size: 12px; line-height: 1.7; white-space: pre; }
pre button { position: absolute; right: 10px; top: 10px; padding: 5px 8px; border: 1px solid #ffffff2d; border-radius: 6px; color: #fff; background: #ffffff12; }
.block-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0; }
.block-grid div { display: grid; padding: 13px; border: 1px solid var(--line); border-radius: 8px; }
.block-grid span { color: var(--muted); font-size: 11px; }
table { width: 100%; margin: 20px 0; border-collapse: collapse; }
th, td { padding: 11px; border-bottom: 1px solid var(--line); text-align: left; }
th { background: var(--surface-muted); font-size: 11px; }
.flow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; }
.flow span { padding: 8px 10px; background: var(--surface-muted); font-weight: 700; }
.flow i { color: var(--docs-accent); }

.docs-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0; }
.docs-module-grid a { display: grid; grid-template-columns: 38px 1fr; gap: 2px 12px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.docs-module-grid a:hover { border-color: color-mix(in srgb, var(--orange) 45%, var(--line)); box-shadow: 0 10px 28px rgba(20,35,30,.08); transform: translateY(-2px); }
.docs-module-grid span { grid-row: 1 / 3; color: var(--orange); font: 800 11px 'DM Mono', monospace; }
.docs-module-grid strong { font-size: 15px; }
.docs-module-grid small { color: var(--muted); line-height: 1.55; }
.docs-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.docs-paths div { display: grid; align-content: start; gap: 7px; padding: 17px; border-left: 3px solid var(--docs-blue); background: var(--surface-muted); }
.docs-paths span { color: var(--muted); font-size: 12px; }
.docs-paths a { margin-top: 5px; color: var(--blue-ink); font-size: 12px; font-weight: 800; text-decoration: none; }
.docs-feature-list { display: grid; gap: 0; margin: 20px 0; border-top: 1px solid var(--line); }
.docs-feature-list span { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.docs-feature-list b { display: inline-block; min-width: 120px; color: var(--ink); }

.docs-audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 30px; }
.docs-audience span { display: grid; gap: 4px; padding: 13px 14px; border-left: 3px solid var(--docs-blue); background: var(--surface-muted); color: var(--muted); font-size: 11px; }
.docs-audience b { color: var(--ink); font-size: 12px; }
.docs-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.docs-product-card { display: grid; min-height: 150px; align-content: start; gap: 7px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); text-decoration: none; }
.docs-product-card:hover { border-color: color-mix(in srgb, var(--docs-blue) 38%, var(--line)); box-shadow: 0 12px 28px #172a3d0d; }
.docs-product-card > span { color: var(--docs-blue); font-size: 10px; font-weight: 850; }
.docs-product-card strong { font-size: 19px; }
.docs-product-card small { color: var(--muted); line-height: 1.6; }
.docs-product-card i { margin-top: auto; color: var(--docs-blue); font-size: 11px; font-style: normal; font-weight: 800; }
.docs-product-card.primary { border-color: color-mix(in srgb, var(--orange) 38%, var(--line)); background: color-mix(in srgb, var(--orange) 3%, var(--surface)); }
.docs-product-card.primary > span, .docs-product-card.primary i { color: var(--orange); }
.docs-product-card.future { opacity: .72; }
.docs-route-grid { display: grid; gap: 10px; margin-top: 22px; }
.docs-route-grid a { display: grid; grid-template-columns: 210px 1fr; gap: 16px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; }
.docs-route-grid a:hover { border-color: color-mix(in srgb, var(--orange) 38%, var(--line)); background: var(--surface-muted); }
.docs-route-grid span { color: var(--muted); font-size: 12px; }
.docs-category-hero { margin-inline: -24px; padding: 34px 24px 64px !important; border-top: 3px solid var(--orange); background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 4%, var(--surface)), transparent 65%); }
.docs-lifecycle { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 24px 0; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.docs-lifecycle span { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; }
.docs-lifecycle b { display: grid; width: 24px; height: 24px; border-radius: 6px; color: var(--orange); background: color-mix(in srgb, var(--orange) 9%, var(--surface)); place-items: center; }
.docs-lifecycle i { color: var(--muted); font-style: normal; }
.docs-kicker { display: inline-flex; margin-bottom: 4px; color: var(--orange); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.tip { display: grid; grid-template-columns: 80px 1fr; gap: 12px; margin: 20px 0; padding: 14px 16px; border: 1px solid var(--docs-tip-border); border-radius: 8px; background: var(--docs-tip-bg); }
.tip b { color: var(--docs-tip-text); }
.tip span { color: var(--muted); }
.docs-example { display: grid; gap: 8px; margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-muted); }
.docs-example code { padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); white-space: normal; }
.docs-search-empty { margin: 70px 0; padding: 36px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; }
.docs-search-empty strong, .docs-search-empty span { display: block; }
.docs-search-empty span { margin-top: 7px; color: var(--muted); }

.docs-toc { position: sticky; top: var(--docs-header-height); height: max-content; padding-top: 66px; }
.docs-toc nav { display: grid; margin: 10px 0 22px; }
.docs-toc nav a { padding: 4px 0; color: var(--muted); font-size: 11px; }
.docs-toc nav a.active { color: var(--docs-accent); }

/* Developer landing */
.developer-overview{padding-bottom:72px!important;margin-bottom:70px!important}
.developer-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.82fr);gap:52px;align-items:center;min-height:470px;padding:24px 0 42px}
.developer-hero-copy{min-width:0}
.developer-hero-copy .eyebrow{margin:0 0 18px;color:var(--orange)}
.docs-main .developer-hero-copy h1{margin:0 0 24px;font-size:clamp(44px,4.2vw,58px);line-height:1.08}
.developer-hero-copy h1 span,.developer-hero-copy h1 em{display:block;white-space:nowrap}
.developer-hero-copy h1 em{color:var(--orange);font-style:normal}
.docs-main .developer-hero-copy .lead{max-width:590px;margin:0;color:var(--muted);font-size:15px;line-height:1.85}
.developer-actions{display:flex;align-items:center;gap:24px;margin-top:30px}
.developer-actions a{color:var(--ink);font-size:12px;font-weight:850;text-decoration:none}
.developer-actions .developer-primary{padding:13px 19px;border-radius:8px;color:#fff;background:var(--orange);box-shadow:0 15px 30px color-mix(in srgb,var(--orange) 22%,transparent)}
.developer-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:23px;color:var(--muted);font-size:9px;font-weight:750}
.developer-trust span{position:relative;padding-left:12px}.developer-trust span:before{position:absolute;top:50%;left:0;width:5px;height:5px;border-radius:50%;background:#22a878;content:"";transform:translateY(-50%)}
.developer-console{overflow:hidden;border:1px solid #29343f;border-radius:12px;color:#dce7e4;background:#111816;box-shadow:0 28px 70px rgba(8,16,14,.22)}
.developer-console>header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 14px;border-bottom:1px solid #27322f;color:#82918d;font-size:9px}
.developer-console>header>span{display:flex;gap:5px}.developer-console>header i{display:block;width:7px;height:7px;border-radius:50%;background:#4a5754}.developer-console>header i:first-child{background:var(--orange)}
.developer-console>header b{font-weight:650}.developer-console>header em{justify-self:end;color:#62cda6;font-size:8px;font-style:normal;font-weight:850}
.developer-console pre{margin:0;border-radius:0;background:transparent}.developer-console pre code{min-height:145px;padding:27px 22px;color:#dce7e4;font-size:11px;line-height:1.9;white-space:pre-wrap}
.code-keyword{color:#ff8b62}.code-string{color:#8fd6bc}
.console-delivery{display:flex;align-items:center;justify-content:space-between;padding:13px 17px;border-top:1px solid #27322f;border-bottom:1px solid #27322f;background:#151e1b;font-size:9px}
.console-delivery span{display:flex;align-items:center;gap:7px;color:#8fd6bc}.console-delivery span i{width:6px;height:6px;border-radius:50%;background:#56c99f;box-shadow:0 0 0 5px rgba(86,201,159,.1);animation:developer-status 2s ease-in-out infinite}.console-delivery strong{font-size:9px}
.console-results{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#27322f}.console-results span{display:grid;gap:6px;min-width:0;padding:14px 10px;background:#111816;color:#9eaaa7;font-size:8px;text-align:center}.console-results b{color:#f2f6f5;font-size:9px}
.developer-flow{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:12px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.developer-flow>span{display:grid;grid-template-columns:25px auto;grid-template-rows:auto auto;gap:1px 8px;white-space:nowrap}.developer-flow>span i{grid-row:1/3;display:grid;width:25px;height:25px;border-radius:7px;color:#fff;background:var(--orange);font-size:8px;font-style:normal;font-weight:900;place-items:center}.developer-flow>span b{font-size:10px}.developer-flow>span small{color:var(--muted);font-size:8px}.developer-flow>b{position:relative;height:1px;overflow:hidden;background:var(--line)}.developer-flow>b:after{position:absolute;inset:0;background:linear-gradient(90deg,var(--orange),transparent);content:"";animation:developer-flow 3s linear infinite}
.developer-entry-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:28px}
.developer-entry-grid a{display:grid;min-height:150px;align-content:start;gap:8px;padding:17px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--surface);text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}.developer-entry-grid a:hover{border-color:color-mix(in srgb,var(--orange) 42%,var(--line));box-shadow:0 14px 30px rgba(20,35,30,.08);transform:translateY(-2px)}
.developer-entry-grid span{color:var(--orange);font:850 9px ui-monospace,monospace}.developer-entry-grid strong{font-size:14px}.developer-entry-grid small{color:var(--muted);font-size:10px;line-height:1.55}.developer-entry-grid i{margin-top:auto;color:var(--orange);font-size:9px;font-style:normal;font-weight:800}
@keyframes developer-flow{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes developer-status{50%{box-shadow:0 0 0 9px transparent}}

@media (max-width: 1400px) {
  .docs-layout { grid-template-columns: 220px minmax(0, 900px); gap: 44px; }
  .docs-toc { display: none; }
}

@media (max-width: 1080px) {
  .docs-toolbar { grid-template-columns: 200px 1fr auto; }
  .docs-layout { grid-template-columns: 220px minmax(0, 760px); }
  .docs-toc { display: none; }
  .docs-paths { grid-template-columns: 1fr; }
  .developer-hero{grid-template-columns:1fr;gap:36px}.developer-console{width:min(620px,100%)}.developer-entry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 720px) {
  :root { --docs-header-height: 124px; }
  body.header-scrolled { --docs-header-height: 118px; }
  .docs-toolbar { top: 68px; grid-template-columns: auto minmax(0, 1fr); gap: 10px; height: 56px; padding: 0 14px; }
  .docs-section-title strong, .docs-actions { display: none; }
  .docs-menu { display: grid; width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 10px; background: var(--surface); place-content: center; gap: 4px; }
  .docs-menu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); }
  .docs-menu[aria-expanded="true"] { background: var(--surface-muted); }
  .docs-search { height: 38px; }
  .docs-search kbd { display: none; }
  .docs-layout { display: block; }
  .docs-nav { position: fixed; z-index: 45; top: var(--docs-header-height); left: 0; width: min(82vw, 300px); height: calc(100vh - var(--docs-header-height)); transform: translateX(-100%); background: var(--surface); box-shadow: 10px 0 30px #18243218; transition: transform .18s; }
  .docs-nav.open { transform: none; }
  .docs-main { padding: 44px 20px; }
  .docs-main h1 { font-size: 40px; }
  .docs-module-grid, .block-grid { grid-template-columns: 1fr 1fr; }
  .docs-audience, .docs-product-grid { grid-template-columns: 1fr; }
  .docs-route-grid a { grid-template-columns: 1fr; gap: 5px; }
  .docs-lifecycle { align-items: stretch; flex-direction: column; }
  .docs-lifecycle i { display: none; }
  .docs-category-hero { margin-inline: 0; padding-inline: 0 !important; background: transparent; }
  .callout { grid-template-columns: 1fr; }
  .flow { flex-direction: column; }
  .flow i { transform: rotate(90deg); }
  .developer-hero{min-height:0;padding-top:0}.docs-main .developer-hero-copy h1{font-size:clamp(40px,11vw,54px)}.developer-flow{grid-template-columns:1fr 1fr;gap:14px}.developer-flow>b{display:none}.developer-flow>span{white-space:normal}.developer-entry-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 520px) {
  .docs-main h1 { font-size: 34px; }
  .docs-main h2, .steps li code { overflow-wrap: anywhere; word-break: break-word; }
  .docs-module-grid, .block-grid { grid-template-columns: 1fr; }
  .docs-feature-list b { display: block; min-width: 0; margin-bottom: 3px; }
  .docs-audience { grid-template-columns: 1fr; }
  .tip { grid-template-columns: 1fr; }
  .docs-main table { display: block; overflow-x: auto; }
  .docs-main th, .docs-main td { min-width: 92px; overflow-wrap: anywhere; }
  .developer-hero-copy h1 span,.developer-hero-copy h1 em{white-space:normal}.developer-actions{align-items:flex-start;flex-direction:column;gap:16px}.developer-entry-grid{grid-template-columns:1fr}.developer-flow{grid-template-columns:1fr}.developer-console pre code{padding:20px 16px;font-size:10px}.console-results{grid-template-columns:1fr}.console-results span{grid-template-columns:42px 1fr;text-align:left}
}

/* Keep the docs shell stable when language or theme changes. */
.docs-main h1, .docs-main h2, .docs-main h3, .docs-main p, .docs-nav a, .docs-actions a { overflow-wrap: anywhere; }
.developer-hero-copy h1 span, .developer-hero-copy h1 em { white-space: normal; }
.method { color: var(--docs-accent); background: color-mix(in srgb, var(--docs-accent) 12%, var(--surface)); }
.method.get { color: var(--docs-blue); background: color-mix(in srgb, var(--docs-blue) 12%, var(--surface)); }
.badge { color: var(--docs-tip-text); background: color-mix(in srgb, var(--docs-tip-text) 16%, var(--surface)); }
.docs-main table { display: block; overflow-x: auto; }
.docs-main table thead, .docs-main table tbody { min-width: 560px; display: table; width: 100%; table-layout: fixed; }
.docs-search input { min-width: 0; }
@media (max-width: 1180px) {
  .docs-toolbar { max-width: none; }
  .docs-layout { max-width: none; }
}
@media (max-width: 720px) {
  .docs-toolbar { width: calc(100% - 28px); margin-inline: 14px; }
  .docs-layout { width: 100%; }
  .docs-main { padding-inline: 20px; }
  .docs-main article { margin-bottom: 44px; padding-bottom: 44px; }
  .docs-main h1 { font-size: clamp(34px, 10vw, 44px); }
  .docs-main h2 { font-size: clamp(24px, 7vw, 30px); }
  .flow, .docs-lifecycle { overflow-x: auto; }
  pre code { min-width: max-content; }
}

@media(prefers-reduced-motion:reduce){.developer-flow>b:after,.console-delivery span i{animation:none}}

/* Keep the developer center readable at desktop widths. */
.docs-main{padding-top:48px}
.docs-main h1{font-size:clamp(42px,4vw,52px);line-height:1.14}
.docs-main h2{font-size:28px;line-height:1.25}
.docs-main p{font-size:14px;line-height:1.8}
.developer-overview{padding-bottom:48px!important;margin-bottom:48px!important}
.developer-hero{min-height:390px;gap:38px;padding-top:8px}
.docs-main .developer-hero-copy h1{font-size:clamp(40px,3.7vw,52px);margin-bottom:18px}
.docs-main .developer-hero-copy .lead{font-size:14px;line-height:1.8}
.developer-console{max-width:560px;justify-self:end}
.developer-entry-grid{margin-top:22px}
.docs-toc{padding-top:48px}
.docs-toc>a{display:inline-block;padding:8px 0;font-size:11px;font-weight:750}
@media(max-width:1400px){.docs-layout{grid-template-columns:220px minmax(0,900px);gap:34px}.docs-main{padding-inline:10px}}

/* Wide-screen layout: keep search, navigation and reading content on one shared grid. */
:root {
  --docs-content-max: 1760px;
  --docs-reading-max: 1040px;
}

.docs-toolbar {
  width: min(calc(100% - 64px), var(--docs-content-max));
  margin-inline: auto;
  padding-inline: 0;
  grid-template-columns: 240px minmax(420px, min(760px, 48vw)) minmax(180px, 1fr);
}

.docs-layout {
  width: min(calc(100% - 64px), var(--docs-content-max));
  margin-inline: auto;
  grid-template-columns: 240px minmax(0, 1fr) 220px;
  gap: clamp(28px, 3vw, 56px);
  justify-content: stretch;
}

.docs-main {
  width: min(100%, var(--docs-reading-max));
  padding-inline: 0;
}

.docs-main article,
.docs-main .developer-overview {
  min-width: 0;
}

.docs-route-grid a,
.docs-module-grid a,
.docs-product-grid > * {
  min-width: 0;
}

@media (min-width: 1401px) {
  .docs-toc { display: block; }
}

@media (min-width: 1181px) and (max-width: 1400px) {
  .docs-layout {
    grid-template-columns: 220px minmax(0, 1fr) 200px;
    gap: 34px;
  }
  .docs-toc { display: block; }
  .docs-main { max-width: 980px; }
}

@media (max-width: 1180px) {
  .docs-toolbar {
    width: calc(100% - 40px);
    grid-template-columns: 200px minmax(0, 1fr) auto;
  }
  .docs-layout {
    width: calc(100% - 40px);
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 34px;
  }
  .docs-toc { display: none; }
  .docs-main { max-width: none; }
}

@media (max-width: 720px) {
  .docs-toolbar { width: calc(100% - 28px); margin-inline: 14px; }
  .docs-layout { width: 100%; }
  .docs-main { padding-inline: 20px; }
  .docs-main article { margin-bottom: 44px; padding-bottom: 44px; }
  .docs-main h1 { font-size: clamp(34px, 10vw, 44px); }
  .docs-main h2 { font-size: clamp(24px, 7vw, 30px); }
  .flow, .docs-lifecycle { overflow-x: auto; }
  pre code { min-width: max-content; }
}