/* /docs on the landing v2.2 / v5.3 tokens. Loaded after reskin.css.
   Surfaces #000000 #181818 #1F1F1F #272727, borders #313131, Geist 400 to 700 and Geist Mono.
   One accent, #10B981, only on the filled primary button, focus rings and small markers. */
html:root {
  --obsidian: #000000; --fjord: #181818; --fjord-2: #1F1F1F; --s3: #272727;
  --ink: #EDEDED; --ink-2: #A1A1A1; --ink-3: #8F8F8F;
  --rule: #272727; --rule-2: #313131; --line: #313131;
  --emerald: #10B981; --accent: #10B981; --cyan: #EDEDED; --indigo: #A1A1A1;
  --bg: #000000; --s1: #181818; --s2: #1F1F1F;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
html, body { background: #000000; }
body { font-family: var(--sans); font-weight: 400; }
.aurora { display: none; }
p, li, h1, h2, h3, h4, dd, .note, .doc-desc { text-wrap: pretty; }

/* Skip link */
.skip {
  position: absolute; left: 16px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: 9999px;
  background: #181818; color: #EDEDED; border: 1px solid #313131; text-decoration: none; font: 500 0.875rem/1.25rem var(--sans);
  transform: translateY(-160%); transition: transform 300ms var(--ease);
}
.skip:focus { transform: none; }

/* Floating nav pill + mobile menu. Mirrors /assets/home.css (Nav pill block) so /docs and / share one header. */
.ic { width: 16px; height: 16px; flex: none; fill: currentColor; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav ul, .menu ul { list-style: none; margin: 0; padding: 0; }
.nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.nav-pill {
  pointer-events: auto; display: flex; align-items: center; gap: 24px;
  padding: 8px 16px 8px 16px; border-radius: 9999px;
  background: rgba(24, 24, 24, 0.72); border: 1px solid #313131;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  transform: translateZ(0);
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 600 1rem/1.5rem var(--sans); letter-spacing: 0; color: #EDEDED; }
.brand-mark { width: 24px; height: 24px; color: #EDEDED; }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  display: block; padding: 2px 12px; border-radius: 9999px; text-decoration: none;
  font: 500 0.875rem/1.5rem var(--sans); color: #A1A1A1;
  transition: color 300ms var(--ease), background-color 300ms var(--ease);
}
.nav-links a:hover { color: #EDEDED; background: #272727; }
.nav-links a[aria-current="page"] { color: #EDEDED; background: #272727; }
.menu-toggle { display: none; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 12px; text-decoration: none; border-radius: 4px;
  font: 600 0.875rem/1.5rem var(--sans); color: #EDEDED; white-space: nowrap;
}
.nav-cta .ic { transition: transform 500ms var(--ease); }
.nav-cta:hover .ic { transform: translateX(2px); }
@media (max-width: 767px) {
  .nav-pill { width: 100%; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 16px; }
  .nav-links { display: none; }
  .nav-pill .nav-cta { margin-left: auto; }
  .menu-toggle {
    display: inline-flex; position: relative; width: 32px; height: 32px; border-radius: 0; flex: none;
    background: transparent; border: 0; cursor: pointer; padding: 0;
  }
  .menu-toggle span {
    position: absolute; left: 9px; width: 14px; height: 0; border-top: 2px solid #EDEDED; border-radius: 2px;
    transition: transform 500ms var(--ease);
  }
  .menu-toggle span:first-child { top: 12px; }
  .menu-toggle span:last-child { top: 17px; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(2.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-2.5px) rotate(-45deg); }
}
.menu {
  position: fixed; inset: 0; z-index: 55; padding: 96px 24px 40px;
  background: rgba(0, 0, 0, 0.88); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  opacity: 0; transition: opacity 300ms var(--ease);
}
.menu.open { opacity: 1; }
.menu nav { display: flex; flex-direction: column; gap: 32px; min-height: 100%; }
.menu ul { display: flex; flex-direction: column; gap: 8px; }
.menu li, .menu .btn { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.menu.open li, .menu.open .btn { opacity: 1; transform: none; }
.menu li:nth-child(1) { transition-delay: 0ms; }
.menu li:nth-child(2) { transition-delay: 60ms; }
.menu li:nth-child(3) { transition-delay: 120ms; }
.menu li:nth-child(4) { transition-delay: 180ms; }
.menu li:nth-child(5) { transition-delay: 240ms; }
.menu.open .btn { transition-delay: 300ms; }
.menu a:not(.btn) { display: block; padding: 8px 0; font: 600 1.875rem/2.25rem var(--sans); text-decoration: none; color: #EDEDED; }
.menu a[aria-current="page"]:not(.btn) { color: #10B981; }
.menu .btn { margin-top: auto; width: 100%; padding: 8px 12px; font: 600 1rem/1.5rem var(--sans); }

/* Buttons: clean pills, no ASCII brackets */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border-radius: 9999px; border: 1px solid transparent;
  font: 600 0.875rem/1.5rem var(--sans); letter-spacing: 0; text-transform: none; text-decoration: none;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), transform 500ms var(--ease);
}
.btn-primary:active, .btn-ghost:active { transform: scale(0.98); }
.btn-primary { background: #10B981; color: #000000; border-color: #10B981; filter: none; }
.btn-primary:hover { border-color: #EDEDED; filter: none; }
.btn-ghost { background: transparent; color: #EDEDED; border-color: #313131; }
.btn-ghost:hover { background: #1F1F1F; }
/* Text link next to the one filled CTA, so the hero keeps a single button */
.btn-link { color: #EDEDED; font: 500 0.875rem/1.5rem var(--sans); text-decoration: underline; text-decoration-color: #313131; text-underline-offset: 4px; padding: 0; transition: text-decoration-color 300ms var(--ease); }
.btn-link:hover { text-decoration-color: #EDEDED; }

/* Cards, pills, code boxes */
.card, .ahp-box, .doc-link, .strip { background: #181818; background-image: none; border-color: #313131; box-shadow: none; }
.doc-link:hover { background: #1F1F1F; border-color: #313131; }
.num { background: #1F1F1F; background-image: none; color: #EDEDED; border: 1px solid #313131; -webkit-text-fill-color: currentColor; }
.pill { background: #1F1F1F; border: 1px solid #313131; color: #A1A1A1; }
.cb { background: #000000; border-color: #313131; }
.cb-h { background: #1F1F1F; border-color: #313131; }
pre, .ahp pre { background: #000000; }
.cp {
  background: transparent; border: 0; border-radius: 0; padding: 0 4px; min-height: 0;
  color: #A1A1A1; font: 500 0.75rem/1rem var(--mono); text-decoration: underline; text-decoration-color: #313131; text-underline-offset: 3px;
  cursor: pointer; transition: color 300ms var(--ease);
}
.cp:hover { background: transparent; color: #EDEDED; }
.cp.ok { background: transparent; color: #EDEDED; border: 0; }
.ahp [role=tab] { background: transparent; border-color: #313131; border-radius: 9999px; color: #A1A1A1; }
.ahp [role=tab][aria-selected=true] { background: #272727; border-color: #313131; color: #EDEDED; }

/* Hero: home type scale and gradient headline, sized so the quick install strip sits above the fold */
.dq-hero { padding: 128px 0 40px; }
.dq-hero .eyebrow { margin-bottom: 16px; font: 500 0.875rem/1.25rem var(--sans); color: #10B981; }
.dq-hero-h { font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -0.03em; max-width: 960px; padding-bottom: 4px; }
.dq-hero-h .hl {
  display: inline-block;
  background: linear-gradient(90deg, #FFFFFF 0%, #9B9B9B 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
@media (min-width: 641px) { .dq-hero-h { font-size: 3rem; line-height: 1.05; } }
.dq-hero-sub { margin-top: 16px; font-size: 1.125rem; line-height: 1.75rem; color: #A1A1A1; max-width: 680px; }
.dq-cta { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.dq-cta .btn-primary, .dq-cta .btn-ghost { padding: 8px 16px; font: 600 1rem/1.5rem var(--sans); white-space: nowrap; }
.dq-cta .btn-primary .ic { transition: transform 500ms var(--ease); }
.dq-cta .btn-primary:hover .ic { transform: translateX(2px); }
.dq-dfy {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 4px 12px 4px 4px; border-radius: 9999px; border: 1px solid #313131; background: #181818;
  font: 500 0.875rem/1.25rem var(--sans); color: #EDEDED; text-decoration: none;
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.dq-dfy .k { padding: 2px 8px; border-radius: 9999px; background: #272727; color: #A1A1A1; font-size: 0.75rem; line-height: 1rem; white-space: nowrap; }
.dq-dfy .ic { color: #A1A1A1; transition: transform 500ms var(--ease), color 300ms var(--ease); }
.dq-dfy:hover { border-color: #8F8F8F; background: #1F1F1F; }
.dq-dfy:hover .ic { transform: translateX(2px); color: #EDEDED; }
.dq-dfy:active { transform: scale(0.98); }
.dq-proof { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px; font: 400 0.75rem/1rem var(--mono); color: #8F8F8F; }
.dq-proof .sep { padding: 0 4px; }
@media (max-width: 640px) {
  .dq-hero { padding: 104px 0 32px; }
  .dq-hero-sub { font-size: 1rem; line-height: 1.5rem; }
  .dq-cta .btn-primary, .dq-cta .btn-ghost { flex: 1 1 100%; }
  .dq-dfy { border-radius: 16px; flex-wrap: wrap; row-gap: 4px; }
  .dq-dfy .v { flex: 1 1 auto; }
}

/* 60 second quick install strip */
.dq { padding: 8px 0 16px; }
.dq-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-bottom: 16px; }
.dq-title { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; }
.dq-sub { font-size: 0.875rem; line-height: 1.25rem; color: #A1A1A1; }
.dq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dq-card {
  min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 24px 16px 16px;
  background: #181818; border: 1px solid #313131; border-radius: 16px;
  transition: border-color 300ms var(--ease);
}
.dq-card:hover { border-color: #8F8F8F; }
.dq-kicker { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; line-height: 1rem; color: #8F8F8F; min-width: 0; }
.dq-kicker span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dq-n { font: 600 0.75rem/1rem var(--mono); color: #10B981; }
.dq-card-h { font-size: 1.125rem; line-height: 1.75rem; letter-spacing: -0.01em; }
.dq-desc { margin-top: -8px; font-size: 0.875rem; line-height: 1.25rem; color: #A1A1A1; }
.dq-desc code, .dq-meta code { font-size: 0.75rem; color: #EDEDED; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.dq-code { min-width: 0; border: 1px solid #313131; border-radius: 12px; background: #000000; overflow: hidden; }
.dq-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 12px; font-size: 0.75rem; line-height: 1rem; color: #8F8F8F; }
.dq-code-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dq-code-bar code { font-size: 0.75rem; color: #A1A1A1; }
.dq .dq-code pre { padding: 4px 12px 12px; background: transparent; color: #EDEDED; font: 400 0.75rem/1.25rem var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.dq .cp {
  display: inline-flex; align-items: center; flex: none; min-height: 24px; padding: 2px 12px;
  border: 1px solid #313131; border-radius: 9999px; background: #1F1F1F;
  font: 600 0.75rem/1rem var(--sans); color: #EDEDED; text-decoration: none; cursor: pointer;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease), transform 300ms var(--ease);
}
.dq .cp:hover { background: #1F1F1F; border-color: #10B981; color: #EDEDED; }
.dq .cp:active { transform: scale(0.98); }
.dq .cp.ok { background: #10B981; border-color: #10B981; color: #000000; }
.dq-meta { font-size: 0.75rem; line-height: 1rem; color: #8F8F8F; }
.dq-links { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dq-link {
  display: inline-flex; align-items: center; gap: 4px; font: 500 0.875rem/1.5rem var(--sans); color: #EDEDED;
  text-decoration: underline; text-decoration-color: #313131; text-underline-offset: 4px; transition: text-decoration-color 300ms var(--ease);
}
.dq-link:hover { text-decoration-color: #EDEDED; }
.dq-link .ic { color: #10B981; }
@media (max-width: 1099px) { .dq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .dq-grid { grid-template-columns: minmax(0, 1fr); } }

/* SDK card: four scannable bullets, setup notes folded */
.dq-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.875rem; line-height: 1.25rem; color: #EDEDED; }
.dq-bullets li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.dq-bullets .ic { margin-top: 2px; color: #10B981; }
.dq-bullets code { font-size: 0.75rem; color: #A1A1A1; overflow-wrap: anywhere; }
.dq-more { border-top: 1px solid #272727; padding-top: 8px; }
.dq-more summary { cursor: pointer; font: 500 0.75rem/1.5rem var(--sans); color: #A1A1A1; transition: color 300ms var(--ease); }
.dq-more summary:hover { color: #EDEDED; }
.dq-more[open] summary { margin-bottom: 8px; }
.dq-more .note + .note { margin-top: 8px; }

/* Focus */
:focus-visible { outline: 2px solid #10B981; outline-offset: 2px; }

/* B11 tagline */
.tagline { padding: 96px 0; }
.tag-text { font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -0.02em; max-width: 880px; text-wrap: balance; margin: 0; }
.tag-text .w { transition: opacity 500ms var(--ease); }
.js .tag-text .w { opacity: 0.3; }
.js .tag-text .w.on { opacity: 1; }
@media (min-width: 768px) { .tag-text { font-size: 3rem; line-height: 1.1; } }

/* Art. 50(2) marking hooks card with the prism loop */
.media-card { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .media-card { grid-template-columns: 1fr 1fr; } }
.media-frame { margin: 0; border: 1px solid #313131; border-radius: 12px; overflow: hidden; background: #000000; aspect-ratio: 16 / 9; }
.media-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .tag-text .w { opacity: 1; }
  .skip { transition: none; }
}

/* package ids rendered as pills */
code.pill { font: 500 0.75rem/1rem var(--mono); }
.nw { white-space: nowrap; }

/* Footer: operator line, then the single muted legal line */
.sv-footer .wrap { display: flex; flex-direction: column; gap: 4px; line-height: 2rem; color: #8F8F8F; }
.sv-footer .disclaimer-line { font-size: 0.75rem; line-height: 1rem; color: #8F8F8F; }
.sv-footer a { color: #A1A1A1; display: inline; }
.sv-footer a:hover { color: #EDEDED; }