html:has(body.docs) {
  --bar: 60px;
  scroll-padding-top: calc(var(--bar) + var(--space-l));
}

body.docs {
  --nav-width: 264px;
  --toc-width: 220px;
}

.docs-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-height: var(--bar);
  padding: var(--space-s) var(--space-l);
  background: color-mix(in srgb, var(--background) var(--glass-bar-fallback), transparent);
  border-bottom: 1px solid var(--separator);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .docs-bar {
    background: color-mix(in srgb, var(--background) var(--glass-bar), transparent);
    -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
    backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  }
}

.docs-bar .bs-brand { flex: none; }

.docs-label { flex: none; text-decoration: none; }

.docs-menu { display: none; flex: none; }

.docs-search {
  position: relative;
  display: none;
  align-items: center;
  flex: 1;
  max-width: 420px;
  margin: 0 auto;
}

.js .docs-search { display: flex; }

.docs-search svg {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--secondary);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.docs-search input {
  width: 100%;
  min-height: var(--target);
  padding: 0 44px 0 40px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-pill);
  background: var(--row);
  color: var(--label);
  font: inherit;
  font-size: 15px;
}

.docs-search input::placeholder { color: var(--secondary); opacity: 1; }

.docs-search input::-webkit-search-cancel-button { display: none; }

.docs-search kbd {
  position: absolute;
  right: 12px;
  min-width: 22px;
  padding: 0 var(--space-xs);
  border: 1px solid var(--separator);
  border-radius: var(--radius-s);
  color: var(--secondary);
  font: 600 13px/20px var(--font-body);
  text-align: center;
}

.docs-cta { flex: none; margin-left: auto; }

.js .docs-search + .docs-cta { margin-left: 0; }

.docs-shell {
  display: grid;
  max-width: 1440px;
  margin: 0 auto;
}

.docs-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-l);
}

.docs-group-title {
  margin: 0 0 var(--space-s);
  padding: 0 var(--space-m);
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docs-nav ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-nav li a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: var(--space-2xs) var(--space-m);
  border-radius: var(--radius-s);
  color: var(--label);
  font-size: 15px;
  text-decoration: none;
}

.docs-nav li a:hover { background: var(--fill); }

.docs-nav li a[aria-current="page"] {
  background: color-mix(in srgb, var(--tint) var(--chip-fill), transparent);
  color: var(--tint);
  font-weight: 700;
}

.docs-empty {
  margin: 0;
  padding: 0 var(--space-m);
  color: var(--secondary);
  font-size: 15px;
}

.docs-search-hint {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  left: var(--space-m);
  margin: 0;
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-s);
  background: var(--row);
  color: var(--secondary);
  font-size: 13px;
  white-space: nowrap;
}

.docs-search-hint:empty { display: none; }

.docs-main {
  display: grid;
  gap: var(--space-2xl);
  min-width: 0;
  padding: var(--space-xl) var(--space-inset) var(--space-3xl);
}

.docs-main:focus { outline: none; }

.docs-article {
  display: grid;
  gap: var(--space-l);
  min-width: 0;
  max-width: calc(var(--readable) + 120px);
}

.docs-article:focus { outline: none; }

.docs-eyebrow {
  margin: 0;
  color: var(--tint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docs-article h1 {
  margin: calc(var(--space-s) * -1) 0 0;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 800;
  font-stretch: 92%;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.docs-article h1 + p {
  color: var(--secondary);
  font-size: 19px;
  line-height: 1.45;
}

.docs-article h2 {
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-l);
  border-top: 1px solid var(--separator);
  font-size: 26px;
  font-weight: 700;
}

.docs-article h3, .docs-article h4 {
  margin: var(--space-l) 0 0;
  font-size: 20px;
}

.docs-article p, .docs-article ul, .docs-article ol { margin: 0; max-width: var(--readable); }

.docs-article ul, .docs-article ol { padding-left: var(--space-xl); }

.docs-article li + li { margin-top: var(--space-2xs); }

.docs-article li > ul, .docs-article li > ol { margin-top: var(--space-2xs); }

.docs-article code {
  padding: 1px var(--space-2xs);
  border-radius: var(--radius-s);
  background: var(--fill);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

.docs-article pre {
  margin: 0;
  padding: var(--space-l);
  border-radius: var(--radius-m);
  background: var(--row);
  overflow-x: auto;
}

.docs-article pre code {
  padding: 0;
  background: none;
  overflow-wrap: normal;
}

.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
  margin-top: var(--space-2xl);
}

.docs-pager a {
  display: grid;
  gap: var(--space-2xs);
  min-height: var(--target);
  color: var(--label);
  text-decoration: none;
}

.docs-pager a:hover .docs-pager-title { color: var(--tint); }

.docs-pager-next { grid-column: 2; text-align: right; }

.docs-pager-label {
  color: var(--secondary);
  font-size: 13px;
  font-weight: 600;
}

.docs-pager-title {
  font-family: var(--font-emphasis);
  font-size: 20px;
  font-weight: 700;
}

.docs-toc { display: none; }

.docs-toc-title {
  margin: 0 0 var(--space-s);
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docs-toc ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--separator);
}

.docs-toc a {
  display: block;
  margin-left: -1px;
  padding: var(--space-2xs) var(--space-m);
  border-left: 2px solid transparent;
  color: var(--secondary);
  font-size: 14px;
  text-decoration: none;
}

.docs-toc a:hover { color: var(--label); }

.docs-toc a[aria-current="location"] {
  border-left-color: var(--tint);
  color: var(--tint);
  font-weight: 600;
}

.docs-backdrop { display: none; }

@media (min-width: 960px) {
  .docs-shell { grid-template-columns: var(--nav-width) minmax(0, 1fr); }

  .docs-nav {
    position: sticky;
    top: var(--bar);
    align-self: start;
    max-height: calc(100vh - var(--bar));
    overflow: auto;
    border-right: 1px solid var(--separator);
  }

  .docs-main { padding-inline: var(--space-2xl); }
}

@media (min-width: 1200px) {
  .docs-main { grid-template-columns: minmax(0, 1fr) var(--toc-width); align-items: start; }

  .docs-toc {
    display: block;
    position: sticky;
    top: calc(var(--bar) + var(--space-xl));
  }
}

@media (max-width: 959px) {
  .js .docs-menu { display: inline-flex; }

  .docs-nav li a { min-height: var(--target); }

  .js .docs-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: min(300px, 86vw);
    overflow: auto;
    background: var(--background);
    border-right: 1px solid var(--separator);
    transform: translateX(-100%);
    visibility: hidden;
  }

  .js .nav-open .docs-nav {
    transform: none;
    visibility: visible;
  }

  .nav-open { overflow: hidden; }

  .js .docs-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 25;
    background: color-mix(in srgb, var(--night) 40%, transparent);
  }

  .docs-label { display: none; }
}

@media (max-width: 719px) {
  .docs-bar { flex-wrap: wrap; row-gap: var(--space-s); }

  .js .docs-search {
    order: 5;
    flex-basis: 100%;
    max-width: none;
  }

  .docs-search kbd { display: none; }

  .docs-cta { margin-left: auto; }

  .js .docs-search + .docs-cta { margin-left: auto; }

  .docs-pager { grid-template-columns: 1fr; }

  .docs-pager-next { grid-column: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .docs-nav { transition: transform var(--duration-short) var(--ease), visibility var(--duration-short); }
}

@media (forced-colors: active) {
  .docs-nav li a[aria-current="page"], .docs-toc a[aria-current="location"] { outline: 2px solid CanvasText; }
}