/* Documentation shell. Builds on app.css so the public docs stay compact
   while keeping the shared product shell consistent. */
.docs-shell { min-width: 320px; }
.docs-wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

.docs-main { padding: 42px 0 82px; }
.docs-skip { position: absolute; left: 12px; top: -80px; z-index: 40; border-radius: 6px; padding: 10px 14px; background: var(--ink); color: var(--panel); text-decoration: none; }
.docs-skip:focus { top: 12px; }
.docs-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 26px; color: var(--muted); font-size: 12px; }
.docs-breadcrumb a { color: var(--muted-strong); text-decoration: none; }
.docs-breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

.docs-eyebrow { margin: 0 0 9px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.docs-illustration-note { margin: 6px 2px 22px; color: var(--muted); font-size: 10px; line-height: 1.2; text-align: right; }
.docs-task-card { min-height: 212px; display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 10px; padding: 22px; background: var(--panel); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s, border-color .15s, box-shadow .15s; }
.docs-task-card.secondary { border-top-color: var(--blue); }
.docs-task-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 14px 32px color-mix(in srgb, var(--ink) 9%, transparent); }
.docs-task-card .task-label { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.docs-task-card.secondary .task-label { color: var(--blue); }
.docs-task-card h3 { margin: 9px 0 8px; font-size: 23px; letter-spacing: -.02em; }
.docs-task-card p { max-width: 42ch; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.docs-link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 34px; }
.docs-link-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px 15px; background: var(--panel); text-decoration: none; }
.docs-link-card:hover { border-color: var(--line-strong); background: var(--panel-soft); }
.docs-link-card strong { display: block; font-size: 13px; }
.docs-link-card span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.docs-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 44px; align-items: start; }
.docs-sidebar { position: sticky; top: 82px; align-self: start; }
.docs-menu-summary { display: none; }
.docs-sidebar-group { margin: 0 0 22px; }
.docs-sidebar-group h2 { margin: 0 0 7px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.docs-sidebar-group a { display: block; border-radius: 5px; padding: 7px 9px; color: var(--muted-strong); font-size: 13px; line-height: 1.3; text-decoration: none; }
.docs-sidebar-group a:hover, .docs-sidebar-group a[aria-current="page"] { background: var(--soft); color: var(--ink); }
.docs-sidebar-group a[aria-current="page"] { box-shadow: inset 2px 0 var(--green); font-weight: 750; }
.docs-article { min-width: 0; max-width: 770px; }
.docs-article > header { margin-bottom: 28px; }
.docs-article h1 { margin: 0 0 11px; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.03em; }
.docs-article .article-lede { max-width: 680px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.docs-article > section { margin-top: 30px; }
.docs-article h2 { margin: 0 0 11px; font-size: 23px; letter-spacing: -.02em; }
.docs-article h3 { margin: 22px 0 8px; font-size: 16px; }
.docs-article p, .docs-article li { color: var(--muted-strong); font-size: 14px; line-height: 1.65; }
.docs-article p { margin-bottom: 13px; }
.docs-article a { color: var(--blue); }
.docs-article code { border-radius: 4px; padding: 2px 5px; background: var(--soft); color: var(--ink); font-size: .88em; overflow-wrap: anywhere; }

.docs-callout { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 14px 15px; background: var(--panel-soft); }
.docs-callout::before { content: ""; display: block; flex: 0 0 auto; width: 9px; height: 9px; margin: 5px 5px 0 4px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent); }
.docs-callout.warning { border-color: color-mix(in srgb, var(--amber) 34%, var(--line)); background: var(--amber-soft); }
.docs-callout.warning::before { background: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 16%, transparent); }
.docs-callout p { margin: 0; }
.docs-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.docs-actions .button { min-height: 42px; }
.docs-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: docs-step; }
.docs-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; counter-increment: docs-step; border-top: 1px solid var(--line); padding: 20px 0; }
.docs-step::before { content: counter(docs-step, decimal-leading-zero); display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--green); font-family: ui-monospace, monospace; font-size: 10px; font-weight: 800; }
.docs-step h2 { margin: 1px 0 6px; font-size: 19px; }
.docs-step p:last-child { margin-bottom: 0; }
.docs-step .step-result { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 5px; color: var(--ink); font-size: 13px; font-weight: 700; }
.docs-step .step-result::before { content: "✓"; color: var(--green); }
.docs-figure { margin: 18px 0 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #10201f; }
.docs-figure img { display: block; width: 100%; height: auto; }
.docs-figure figcaption { padding: 9px 12px; background: var(--panel-soft); color: var(--muted); font-size: 11px; line-height: 1.45; }
.docs-figure figcaption strong { color: var(--ink); }

.docs-table-wrap { width: 100%; overflow-x: auto; margin: 14px 0; border: 1px solid var(--line); border-radius: 8px; }
.docs-table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 13px; }
.docs-table th, .docs-table td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.docs-table th { background: var(--panel-soft); color: var(--muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.docs-table td { color: var(--muted-strong); line-height: 1.5; }
.docs-table tr:last-child td { border-bottom: 0; }
.docs-table td strong { color: var(--ink); }
.docs-code { position: relative; margin: 14px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--code-bg); color: var(--code-ink); overflow: auto; }
.docs-code pre { margin: 0; padding: 16px; white-space: pre-wrap; word-break: break-word; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.docs-copy { position: absolute; top: 8px; right: 8px; min-height: 30px; border: 1px solid var(--code-edge); border-radius: 5px; padding: 0 9px; background: var(--code-bar); color: var(--code-ink); cursor: pointer; font-size: 10px; font-weight: 700; }
.docs-code pre + .docs-copy { z-index: 1; }
.docs-details { margin: 10px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.docs-details summary { cursor: pointer; list-style: none; padding: 13px 15px; color: var(--ink); font-size: 13px; font-weight: 730; }
.docs-details summary::-webkit-details-marker { display: none; }
.docs-details summary::before { content: "+"; display: inline-block; width: 18px; color: var(--blue); font-size: 16px; }
.docs-details[open] summary::before { content: "−"; }
.docs-details .details-body { padding: 0 15px 14px; }
.docs-details .details-body p:last-child, .docs-details .details-body ul:last-child { margin-bottom: 0; }

.docs-journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 17px 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.docs-journey > div { position: relative; min-height: 114px; padding: 16px; background: var(--panel-soft); }
.docs-journey > div + div { border-left: 1px solid var(--line); }
.docs-journey strong { display: block; font-size: 14px; }
.docs-journey span { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.docs-journey b { display: block; margin-bottom: 9px; color: var(--green); font: 800 10px ui-monospace, monospace; }
.docs-journey .journey-arrow { position: absolute; right: -8px; top: 49px; z-index: 1; color: var(--green); background: var(--panel-soft); font-size: 16px; }
.docs-status { display: grid; gap: 8px; margin: 14px 0; }
.docs-status-row { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 13px; align-items: start; border: 1px solid var(--line); border-radius: 7px; padding: 12px 13px; background: var(--panel-soft); }
.docs-status-row strong { font-size: 13px; }
.docs-status-row span { color: var(--muted); font-size: 12px; line-height: 1.5; }

@media (max-width: 900px) {
  .docs-wrap { width: min(100% - 32px, 700px); }
  .docs-main { padding-top: 28px; }
  .docs-layout { grid-template-columns: 1fr; gap: 20px; }
  .docs-sidebar { position: static; }
  .docs-sidebar > .docs-menu-summary { display: block; border: 1px solid var(--line); border-radius: 7px; padding: 12px 14px; background: var(--panel); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 740; }
  .docs-sidebar > .docs-menu-summary::marker { color: var(--blue); }
  .docs-sidebar[open] { padding-bottom: 6px; }
  .docs-sidebar[open] .docs-sidebar-group { margin: 12px 0 0; padding: 0 6px; }
  .docs-sidebar[open] .docs-sidebar-group:first-of-type { padding-top: 12px; }
  .docs-sidebar-group h2 { margin-top: 12px; }
  .docs-sidebar:not([open]) .docs-sidebar-group { display: none; }
  .docs-article { max-width: none; }
  
  .docs-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .docs-wrap { width: calc(100% - 24px); }
  
  
  
  
  
  
  
  
   .docs-link-grid, .docs-journey { grid-template-columns: 1fr; }
  
  
  .docs-journey > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .docs-journey .journey-arrow { right: auto; left: 50%; top: auto; bottom: -9px; }
  .docs-article h2 { font-size: 21px; }
  .docs-article p, .docs-article li { font-size: 14px; }
  .docs-step { grid-template-columns: 30px minmax(0, 1fr); gap: 11px; }
  .docs-step::before { width: 28px; height: 28px; }
  .docs-status-row { grid-template-columns: 1fr; gap: 4px; }
  .docs-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .docs-task-card { transition: none; }
}

/* Guided documentation: shared components, built on app.css tokens. */
.docs-main :is(section, details, h2, h3, li)[id] { scroll-margin-top: 88px; }
.docs-main:focus { outline: none; }
.docs-status-row > * { min-width: 0; overflow-wrap: anywhere; }
.docs-mini-ui > figcaption:first-child { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.docs-checklist li > span { display: block; }
.docs-checklist li > strong + span { margin-top: 3px; }
@media (min-width: 901px) {
  .docs-sidebar { max-height: calc(100dvh - 100px); overflow-y: auto; }
}
.docs-task-card { min-height: 0; box-shadow: none; }
article.docs-task-card:hover { transform: none; box-shadow: none; }
.docs-task-heading { display: flex; align-items: center; gap: 12px; }
.docs-task-symbol { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; background: var(--green-soft); color: var(--green); }
.secondary .docs-task-symbol { background: var(--blue-soft); color: var(--blue); }
.docs-task-symbol svg { width: 23px; height: 23px; }
.docs-task-card h3 { margin-top: 16px; }

.docs-text-link { color: var(--blue); font-size: 12px; text-underline-offset: 3px; }

/* Local-model onboarding card. The illustration is entirely HTML/CSS/SVG so
   it stays sharp, theme-aware and responsive without shipping a mockup image. */
.docs-connect-card {
  container-type: inline-size;
  aspect-ratio: 4 / 3;
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: 14px;
  min-height: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--green) 55%, var(--line));
  border-top-width: 1px;
  padding: 16px;
  background:
    radial-gradient(circle at 22% 46%, color-mix(in srgb, var(--green) 14%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--green) 6%, var(--panel)), var(--panel));
}
.docs-connect-card:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--green) 82%, var(--line));
  box-shadow: 0 0 0 1px var(--green), 0 0 24px rgba(44, 214, 155, .16);
}
.docs-connect-intro { display: flex; min-width: 0; flex-direction: column; }
.docs-connect-card .docs-task-heading { gap: 9px; }
.docs-connect-card .docs-task-symbol { width: 34px; height: 34px; flex-basis: 34px; }
.docs-connect-card .docs-task-symbol svg { width: 20px; height: 20px; }
.docs-connect-card h3 { margin: 12px 0 0; font-size: clamp(22px, 2.2vw, 29px); line-height: 1.04; }
.docs-computer-visual { position: relative; display: grid; flex: 1; min-height: 150px; place-items: center; margin-top: 8px; }
.docs-computer-halo { position: absolute; width: min(88%, 205px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--green) 15%, transparent); border-radius: 50%; box-shadow: inset 0 0 48px color-mix(in srgb, var(--green) 7%, transparent); }
.docs-computer-halo::before, .docs-computer-halo::after { content: ""; position: absolute; inset: 15%; border: 1px solid color-mix(in srgb, var(--green) 10%, transparent); border-radius: inherit; }
.docs-computer-halo::after { inset: 31%; }
.docs-laptop-art { position: relative; z-index: 1; width: min(88%, 190px); padding-bottom: 17px; color: var(--green); filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--green) 16%, transparent)); }
.docs-laptop-screen { display: grid; aspect-ratio: 1.45; place-items: center; border: 2px solid color-mix(in srgb, var(--green) 75%, var(--line)); border-radius: 9px 9px 5px 5px; background: linear-gradient(145deg, #071411, #10241f); box-shadow: inset 0 0 30px rgba(39, 218, 157, .09); }
.docs-laptop-screen svg { width: 54%; height: 54%; }
.docs-laptop-base { position: absolute; right: -8%; bottom: 5px; left: -8%; height: 15px; border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line)); border-radius: 2px 2px 13px 13px; background: linear-gradient(#22332f, #111b19); box-shadow: 0 8px 18px rgba(0, 0, 0, .22); }
.docs-laptop-base::after { content: ""; position: absolute; top: 3px; left: 42%; width: 16%; height: 3px; border-radius: 0 0 4px 4px; background: color-mix(in srgb, var(--green) 28%, transparent); }
.docs-connect-panel { display: flex; min-width: 0; flex-direction: column; border: 1px solid color-mix(in srgb, var(--green) 27%, var(--line)); border-radius: 10px; padding: 12px; background: color-mix(in srgb, var(--panel) 84%, transparent); box-shadow: inset 0 1px color-mix(in srgb, var(--green) 9%, transparent); }
.docs-connect-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 9px; }
.docs-connect-panel-head > strong { font-size: 14px; }
.docs-connect-panel-head > span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--green) 24%, transparent); border-radius: 999px; padding: 5px 8px; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 760; white-space: nowrap; }
.docs-connect-panel-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent); }
.docs-connect-steps { display: grid; flex: 1; gap: 6px; margin: 0; padding: 0; list-style: none; }
.docs-connect-step { position: relative; display: grid; grid-template-columns: 17px 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; min-height: 54px; border: 1px solid color-mix(in srgb, var(--green) 19%, var(--line)); border-radius: 8px; padding: 7px 8px 7px 4px; background: color-mix(in srgb, var(--panel-soft) 88%, transparent); }
.docs-connect-marker { position: relative; z-index: 1; display: grid; width: 17px; height: 17px; place-items: center; border: 2px solid var(--green); border-radius: 50%; background: var(--panel); color: var(--panel); font-size: 10px; font-weight: 900; }
.docs-connect-step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: calc(50% + 9px); left: 12px; width: 2px; height: 25px; background: linear-gradient(to bottom, var(--green), color-mix(in srgb, var(--green) 36%, transparent) 52%, transparent); pointer-events: none; }
.docs-connect-step.is-ready .docs-connect-marker { border-color: var(--green); background: var(--green); }
.docs-connect-step.is-pending .docs-connect-marker { border-color: var(--muted); }
.docs-connect-product-icon { position: relative; display: grid; width: 34px; height: 34px; place-items: center; overflow: hidden; border-radius: 8px; }
.docs-lm-studio-icon { background: linear-gradient(145deg, #7657ff, #4322bd); box-shadow: inset 0 1px 1px rgba(255,255,255,.25); }
.docs-lm-studio-icon::before { content: ""; width: 19px; height: 4px; border-radius: 4px; background: #f1edff; box-shadow: 0 7px #cfc5ff, 0 -7px #a993ff; }
.docs-chrome-icon { border-radius: 50%; background: transparent; }
.docs-chrome-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.docs-ompera-icon { padding: 5px; background: #050807; }
.docs-ompera-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.docs-connect-copy { min-width: 0; }
.docs-connect-copy strong, .docs-connect-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-connect-copy strong { font-size: 12px; }
.docs-connect-copy small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.docs-connect-badge, .docs-connect-install { display: inline-flex; align-items: center; justify-content: center; min-height: 27px; border-radius: 999px; padding: 0 9px; font-size: 9px; font-weight: 760; white-space: nowrap; text-decoration: none; }
.docs-connect-badge { background: var(--green-soft); color: var(--green); }
.is-pending .docs-connect-badge { border: 1px solid var(--line); background: var(--soft); color: var(--muted); }
.docs-connect-install { border-radius: 7px; background: var(--green); color: #06130f; }
.docs-connect-install:hover { filter: brightness(1.05); }
.docs-connect-actions { display: grid; justify-items: stretch; gap: 7px; margin-top: 9px; text-align: center; }
.docs-connect-actions .button { justify-content: center; min-height: 38px; width: 100%; border-color: var(--green); padding: 8px 12px; background: var(--green); color: #06130f; }
.docs-connect-actions .docs-text-link { color: var(--muted-strong); font-size: 9px; }

/* The diagram uses a shared 1320 × 970 canvas. HTML positions and SVG paths
   scale together; the compact layout below needs no coordinate measurement. */
.docs-tools-card {
  container-type: inline-size;
  container-name: tools-card;
  --tools-blue: color-mix(in srgb, var(--blue) 85%, #37b8ff);
  --tools-violet: #9872f3;
  --tools-green: color-mix(in srgb, var(--green) 78%, #89ffda);
  --tools-amber: color-mix(in srgb, var(--amber) 82%, #ffe4a0);
  --tools-content-width: 57%;
  aspect-ratio: 4 / 3;
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--blue) 12%, var(--line));
  border-top-width: 1px;
  padding: 16px;
  background:
    radial-gradient(ellipse at 58% 49%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 53%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 4%, var(--panel-soft)), var(--panel-soft));
}
.docs-tools-card:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--blue) 82%, var(--line));
  box-shadow: 0 0 0 1px var(--blue), 0 0 24px rgba(91, 167, 255, .16);
}
.docs-tools-card h3 { position: absolute; z-index: 5; top: 16px; right: 16px; width: var(--tools-content-width); margin: 0; text-align: right; font-size: clamp(22px, 5cqi, 58px); font-weight: 820; line-height: 1.08; letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; }
.docs-tools-card h3 span { color: var(--ink); }
.docs-tools-card h3 em { color: var(--blue); font-style: normal; background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 78%, white), var(--blue)); background-clip: text; -webkit-text-fill-color: transparent; }
.docs-tools-stage { position: absolute; inset: 16px; isolation: isolate; }
.docs-tools-stage::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 31%; height: 100%; border: 1px solid color-mix(in srgb, var(--blue) 33%, var(--line)); border-radius: 1.35cqi; background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 5%, var(--panel)), var(--panel-soft)); box-shadow: inset 0 1px color-mix(in srgb, var(--blue) 11%, transparent); }
.docs-tools-wires { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 .45cqi color-mix(in srgb, var(--blue) 32%, transparent)); }
.docs-wire { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.docs-wire-blue { color: var(--tools-blue); }
.docs-wire-violet { color: var(--tools-violet); }
.docs-wire-green { color: var(--tools-green); }
.docs-wire-amber { color: var(--tools-amber); }
.docs-wire-nodes circle { fill: currentColor; stroke: color-mix(in srgb, currentColor 60%, white); stroke-width: 1.5; }
.docs-tools-source { position: absolute; z-index: 2; inset: 0 auto auto 0; display: grid; width: 31%; height: 100%; grid-template-rows: 25fr 116fr 29fr 116fr 29fr 116fr 114fr 90fr 40fr 90fr 40fr 90fr 75fr; }
.docs-tools-source-row { display: flex; min-width: 0; min-height: 0; align-items: center; gap: 2.65cqi; margin: 0 12.631579% 0 10.526316%; border: 1px solid color-mix(in srgb, var(--blue) 27%, var(--line)); border-radius: 1.35cqi; padding: 0 2.2cqi; background: linear-gradient(135deg, var(--panel), var(--panel-soft)); color: var(--tools-blue); box-shadow: inset 0 1px color-mix(in srgb, var(--blue) 7%, transparent), 0 .3cqi .8cqi rgba(0, 0, 0, .06); }
.docs-tools-source-row:nth-child(1) { grid-row: 2; }
.docs-tools-source-row:nth-child(2) { grid-row: 4; }
.docs-tools-source-row:nth-child(3) { grid-row: 6; }
.docs-tools-source-row:nth-child(5) { grid-row: 8; }
.docs-tools-source-row:nth-child(6) { grid-row: 10; }
.docs-tools-source-row:nth-child(7) { grid-row: 12; }
.docs-tools-source-row strong { min-width: 0; color: var(--ink); font-size: 2.1cqi; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.docs-tool-icon { display: grid; width: 4.2cqi; height: 4.2cqi; flex: 0 0 4.2cqi; place-items: center; }
.docs-tool-icon svg { width: 100%; height: 100%; }
.docs-tools-source-divider { grid-row: 7; align-self: center; height: 1px; margin: 0 10%; background: color-mix(in srgb, var(--blue) 23%, var(--line)); }
.docs-tools-service { gap: 2.35cqi; margin-left: 8.947368%; margin-right: 12.1%; padding-inline: 1.8cqi; }
.docs-tools-service strong { font-size: 1.75cqi; }
.docs-tools-service .docs-tool-icon { width: 3.8cqi; height: 3.8cqi; flex-basis: 3.8cqi; }
.docs-tools-ocr { color: var(--tools-green); }
.docs-tools-translation { color: var(--tools-violet); }
.docs-tools-transcription { color: var(--tools-amber); }
.docs-tools-portal { position: absolute; z-index: 3; top: 31.030928%; left: 39%; width: 35.606061%; height: 34.020619%; color: var(--ink); }
.docs-tools-cloud-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 .55cqi color-mix(in srgb, var(--blue) 80%, transparent)) drop-shadow(0 0 1.7cqi color-mix(in srgb, var(--blue) 40%, transparent)); }
.docs-cloud-fill-top { stop-color: color-mix(in srgb, var(--blue) 28%, var(--panel)); }
.docs-cloud-fill-bottom { stop-color: color-mix(in srgb, var(--blue) 9%, var(--panel-soft)); }
.docs-cloud-edge-top { stop-color: color-mix(in srgb, var(--blue) 42%, white); }
.docs-cloud-edge-bottom { stop-color: var(--blue); }
.docs-tools-cloud-shape path { fill: url(#docs-cloud-fill); stroke: url(#docs-cloud-edge); stroke-width: 3.5; }
.docs-tools-portal img { position: absolute; top: 23%; left: 50%; width: 56%; height: 62%; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 .5cqi .7cqi rgba(0, 0, 0, .25)); }
.docs-tools-portal > strong { position: absolute; top: 80%; left: 0; width: 100%; text-align: center; font-size: 2.5cqi; line-height: 1.2; letter-spacing: -.025em; white-space: nowrap; }
.docs-tools-connected { position: absolute; top: calc(100% + 1.25cqi); left: 50%; display: inline-flex; align-items: center; gap: 1.1cqi; border: 1px solid color-mix(in srgb, var(--green) 82%, var(--line)); border-radius: 999px; padding: .85cqi 1.7cqi; background: linear-gradient(135deg, color-mix(in srgb, var(--green) 17%, var(--panel)), color-mix(in srgb, var(--green) 7%, var(--panel))); color: var(--ink); font-size: 2cqi; font-weight: 750; line-height: 1.2; white-space: nowrap; transform: translateX(-50%); box-shadow: inset 0 1px color-mix(in srgb, var(--green) 17%, transparent); }
.docs-tools-connected i { width: 1.35cqi; height: 1.35cqi; border-radius: 50%; background: var(--tools-green); box-shadow: 0 0 1cqi color-mix(in srgb, var(--green) 50%, transparent); }
.docs-tools-models { position: absolute; z-index: 2; top: 22.680412%; right: 0; display: grid; width: 16.666667%; height: 55.670103%; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 1.515152cqi; }
.docs-tools-model { display: grid; min-width: 0; grid-template-columns: 3.94cqi minmax(0, 1fr); gap: 1.5cqi; align-items: center; border: 1px solid color-mix(in srgb, var(--blue) 49%, var(--line)); border-radius: 1.45cqi; padding: 1.8cqi; background: linear-gradient(145deg, color-mix(in srgb, currentColor 4%, var(--panel)), var(--panel-soft)); box-shadow: inset 0 1px color-mix(in srgb, currentColor 15%, transparent), 0 .5cqi 1cqi rgba(0, 0, 0, .08); }
.docs-tools-model > span { display: flex; min-width: 0; flex-direction: column; gap: .8cqi; }
.docs-tools-model strong { color: var(--ink); font-size: 2cqi; font-weight: 750; line-height: 1.2; letter-spacing: -.025em; }
.docs-tools-model i { width: 3.94cqi; height: 3.94cqi; border: 1px solid color-mix(in srgb, currentColor 67%, white); border-radius: 50%; background: radial-gradient(circle at 28% 24%, color-mix(in srgb, currentColor 60%, white), currentColor 52%, color-mix(in srgb, currentColor 70%, #10162b)); box-shadow: inset .15cqi .1cqi .35cqi rgba(255, 255, 255, .3), 0 0 .8cqi color-mix(in srgb, currentColor 13%, transparent); }
.docs-tools-model b { display: block; position: relative; width: 100%; height: .6cqi; margin-bottom: .8cqi; border-radius: 999px; background: color-mix(in srgb, var(--muted) 36%, transparent); }
.docs-tools-model b::after { content: ""; position: absolute; top: 1.4cqi; left: 0; width: 73%; height: .6cqi; border-radius: inherit; background: inherit; }
.docs-tools-model.is-blue { color: var(--tools-blue); }
.docs-tools-model.is-violet { color: var(--tools-violet); }
.docs-tools-model.is-green { color: var(--tools-green); }
.docs-tools-model.is-amber { color: var(--tools-amber); }
.docs-tools-actions { position: absolute; z-index: 5; right: 16px; bottom: 16px; display: flex; width: var(--tools-content-width); align-items: center; justify-content: flex-end; }
.docs-tools-actions .button { justify-content: space-between; width: 100%; min-height: 44px; border-color: color-mix(in srgb, var(--blue) 64%, var(--line)); border-radius: 1.1cqi; padding: 1.7cqi 2.7cqi; background: linear-gradient(135deg, var(--panel), var(--panel-soft)); color: var(--ink); font-size: clamp(13px, 2.5cqi, 32px); font-weight: 760; }
.docs-tools-actions .button:hover { border-color: var(--blue); background: var(--blue-soft); }
.docs-tools-actions .button span { margin-left: 12px; font-size: 1.45em; line-height: 1; }

@container tools-card (max-width: 460px) {
  .docs-tools-card { display: flex; flex-direction: column; gap: 24px; }
  .docs-tools-card h3 { position: static; width: auto; text-align: left; font-size: clamp(24px, 6.2cqi, 29px); white-space: normal; }
  .docs-tools-stage { position: relative; inset: auto; display: flex; width: 100%; flex-direction: column; align-items: center; aspect-ratio: auto; gap: 32px; }
  .docs-tools-stage::before, .docs-tools-wires, .docs-tools-source-divider { display: none; }
  .docs-tools-source { position: relative; display: grid; width: 100%; height: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 8px; border: 1px solid color-mix(in srgb, var(--blue) 33%, var(--line)); border-radius: 10px; padding: 10px; background: var(--panel); }
  .docs-tools-source .docs-tools-source-row { grid-row: auto; flex-direction: column; justify-content: center; gap: 8px; min-height: 76px; margin: 0; border-radius: 7px; padding: 8px 3px; }
  .docs-tools-source-row strong, .docs-tools-service strong { font-size: 11px; }
  .docs-tool-icon, .docs-tools-service .docs-tool-icon { flex-basis: 25px; width: 25px; height: 25px; }
  .docs-tools-portal { position: relative; inset: auto; flex: none; width: min(82%, 300px); height: auto; aspect-ratio: 470 / 330; margin-bottom: 38px; }
  .docs-tools-portal::before { content: ""; position: absolute; bottom: calc(100% - 3px); left: 50%; width: 2px; height: 34px; background: linear-gradient(var(--tools-blue), color-mix(in srgb, var(--blue) 45%, transparent)); }
  .docs-tools-portal > strong { font-size: 19px; }
  .docs-tools-connected { top: calc(100% + 10px); gap: 7px; padding: 6px 12px; font-size: 12px; }
  .docs-tools-connected i { width: 8px; height: 8px; }
  .docs-tools-models { position: relative; inset: auto; width: 100%; height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 70px); gap: 8px; }
  .docs-tools-models::before { content: ""; position: absolute; bottom: calc(100% + 6px); left: 50%; width: 2px; height: 28px; background: linear-gradient(var(--tools-blue), color-mix(in srgb, var(--blue) 45%, transparent)); }
  .docs-tools-model { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; border-radius: 8px; padding: 12px; }
  .docs-tools-model i { width: 28px; height: 28px; }
  .docs-tools-model strong { font-size: 13px; }
  .docs-tools-model > span { gap: 5px; }
  .docs-tools-model b { width: 80%; height: 3px; margin-bottom: 4px; }
  .docs-tools-model b::after { top: 7px; height: 3px; }
  .docs-tools-actions { position: static; width: 100%; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .docs-tools-actions .button { width: 100%; border-radius: 7px; padding: 12px 16px; font-size: 16px; }
}
@container tools-card (max-width: 300px) {
  .docs-tools-source { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.docs-caption { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.docs-article a.button { color: var(--panel); }
.docs-article a.button.secondary { color: var(--ink); }
.docs-article .docs-actions .button { padding-block: 10px; text-align: center; }
.docs-article .docs-code pre code { padding: 0; background: transparent; color: inherit; font-size: inherit; }
.docs-code { padding-top: 36px; }
.docs-code pre { font-size: 13px; }
.docs-copy { min-height: 32px; }

.docs-checklist { list-style: none; display: grid; gap: 10px; padding: 0; margin: 16px 0; }
.docs-checklist li { position: relative; padding-left: 25px; }
ul.docs-checklist li::before { content: "✓"; color: var(--green); font-weight: 750; position: absolute; left: 0; }
ol.docs-checklist { counter-reset: check; }
ol.docs-checklist li { counter-increment: check; }
ol.docs-checklist li::before { content: counter(check) "."; color: var(--green); position: absolute; left: 0; font-weight: 750; }
.docs-checklist strong { color: var(--ink); }
.docs-mini-ui { display: block; margin: 16px 0; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--panel); padding: 16px; box-shadow: var(--shadow); }
.docs-mini-ui > :first-child { margin-top: 0; }
.docs-mini-ui > :last-child { margin-bottom: 0; }
.docs-mini-ui figcaption { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 12px 0 0; }
.docs-mini-ui > header { display: block; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted-strong); font-size: 12px; }
.docs-mini-ui .docs-status-row { background: var(--panel-soft); }
.docs-route-map { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 20px; }
.docs-route-node { position: relative; display: grid; gap: 5px; border: 1px solid var(--line); border-left: 3px solid var(--green); background: var(--panel); border-radius: 7px; padding: 14px 18px; }
.docs-route-node:not(:last-child)::after { content: "↕"; position: absolute; bottom: -24px; left: 22px; color: var(--green); font-size: 18px; line-height: 23px; }
.docs-route-node strong { color: var(--ink); font-size: 15px; }
.docs-route-node span, .docs-route-node small { color: var(--muted-strong); font-size: 12px; line-height: 1.5; }

.docs-on-this-page { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.docs-on-this-page a { border: 1px solid var(--line); border-radius: 6px; padding: 8px 11px; background: var(--panel); color: var(--muted-strong); font-size: 12px; text-decoration: none; }
.docs-on-this-page a:hover { border-color: var(--green); color: var(--ink); }
.docs-endpoints { display: grid; gap: 9px; margin: 16px 0; }
.docs-endpoint { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 5px 12px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.docs-endpoint .docs-method { grid-row: span 2; align-self: start; text-align: center; padding: 4px; border-radius: 4px; font: 700 11px/1.5 ui-monospace, monospace; background: var(--green-soft); color: var(--green); }
.docs-endpoint code { background: transparent; padding: 0; font-size: 13px; }
.docs-endpoint span:last-child { color: var(--muted-strong); font-size: 13px; }
.docs-endpoint:hover { border-color: var(--green); }

@media (max-width: 900px) {
  
  .docs-sidebar { margin-bottom: 0; }
  
}
@media (max-width: 600px) {
  .docs-main { padding-top: 22px; padding-bottom: 44px; }
  
  
  .docs-task-card { padding: 18px; }
  .docs-task-card:not(.docs-tools-card) h3 { margin-top: 10px; font-size: 22px; }
  .docs-task-card p { font-size: 13px; }
  
  .docs-connect-card { aspect-ratio: auto; grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .docs-connect-card h3 { font-size: 26px; }
  .docs-computer-visual { min-height: 190px; }
  .docs-laptop-art { width: min(66%, 210px); }
  .docs-connect-panel { padding: 10px; }
  .docs-connect-step { grid-template-columns: 17px 34px minmax(0, 1fr); }
  .docs-connect-step > :last-child { grid-column: 3; justify-self: start; }
  .docs-connect-copy { align-self: end; }
  .docs-connect-badge, .docs-connect-install { min-height: 22px; margin-top: -4px; padding-inline: 7px; }
  .docs-tools-card { aspect-ratio: auto; min-height: 0; gap: 24px; }
  
  
  
  
  
  
  
  
  
  .docs-mini-ui { padding: 12px; }
}

@media (min-width: 601px) {
  div.docs-route-map { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  div.docs-route-map .docs-route-node { padding: 14px 12px; border-left-width: 1px; border-top: 3px solid var(--green); }
  div.docs-route-map .docs-route-node:not(:last-child)::after { content: "→"; left: auto; right: -20px; top: 35%; bottom: auto; }
}
@media (max-width: 600px) {
  div.docs-route-map .docs-route-node:not(:last-child)::after { content: "↓"; }
  .docs-journey .journey-arrow { transform: rotate(90deg); }
}

/* Quick-start illustrations: one per path, each across the article width. */
.docs-quick-figure { margin: 18px 0 8px; }
.docs-quick-figure .docs-illustration-note { margin-bottom: 0; }
.docs-quick-figure .docs-connect-card { aspect-ratio: 16 / 9; }
.docs-quick-figure .docs-connect-steps { align-content: center; }
.docs-article .docs-connect-install { color: #06130f; }
.docs-connect-actions .button { gap: 8px; }
@media (max-width: 600px) { .docs-quick-figure .docs-connect-card { aspect-ratio: auto; } }

/* ---------- Docs, organised by path ---------- */
.docs-step h3 { margin: 1px 0 4px; font-size: 17px; }
.docs-path { margin: 8px 0 44px; }
.docs-path > h2 { display: flex; align-items: center; gap: 10px; }
.docs-path-tag { display: inline-grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: var(--blue-soft); color: var(--blue); }
.docs-path-share .docs-path-tag { background: var(--green-soft); color: var(--green); }
.docs-path-tag svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.docs-path .docs-steps { margin-top: 6px; }
.docs-path .docs-step { padding: 14px 0; }
.docs-path-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.docs-path-links a { display: inline-flex; align-items: center; min-height: 36px; border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 650; text-decoration: none; }
.docs-path-links a:hover { border-color: var(--line-strong); background: var(--panel-soft); }
.docs-path-links a.primary { border-color: var(--ink); background: var(--ink); color: var(--panel); }
.docs-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.docs-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.docs-pager a { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--panel); color: var(--ink); text-decoration: none; }
.docs-pager a:hover { border-color: var(--green); }
.docs-pager small { color: var(--muted); font-size: 12px; }
.docs-pager strong { font-size: 15px; }
.docs-pager-next { grid-column: 2; text-align: right; }

.docs-tabs { margin: 14px 0; }
.docs-tabs [role="tablist"] { display: none; }
.docs-tabs.is-ready [role="tablist"] { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 3px; background: var(--panel-soft); }
.docs-tabs [role="tab"] { border: 0; border-radius: 7px; padding: 7px 12px; background: transparent; color: var(--muted-strong); cursor: pointer; font: inherit; font-size: 13px; font-weight: 650; }
.docs-tabs [role="tab"][aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.docs-tabs [role="tabpanel"] > .docs-tab-label { margin: 18px 0 6px; font-size: 15px; }
.docs-tabs.is-ready [role="tabpanel"] > .docs-tab-label { display: none; }
.docs-tabs [role="tabpanel"] > p:first-of-type { margin-top: 12px; }

/* A small phone screen for Android steps. Labels match the app. */
.docs-phone { width: min(100%, 260px); margin: 16px 0; border: 1px solid var(--line-strong); border-radius: 26px; padding: 10px; background: var(--panel); box-shadow: var(--shadow); }
.docs-phone-screen { display: grid; gap: 10px; border-radius: 18px; padding: 18px 14px; background: var(--panel-soft); }
.docs-phone-screen > strong { font-size: 14px; }
.docs-phone-button { display: grid; min-height: 38px; place-items: center; border-radius: 10px; background: var(--ink); color: var(--panel); font-size: 13px; font-weight: 700; }
.docs-phone-button.secondary { border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
.docs-phone-code { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 9px; text-align: center; font: 13px ui-monospace, monospace; color: var(--muted-strong); }
.docs-phone-status { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 10px 12px; background: var(--green-soft); color: var(--green); font-size: 13px; font-weight: 700; }
.docs-phone-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); }
.docs-phone + figcaption, .docs-phone figcaption { margin-top: 8px; color: var(--muted); font-size: 11px; }

@media (max-width: 600px) {
  .docs-pager { grid-template-columns: 1fr; }
  .docs-pager-next { grid-column: auto; }
  .docs-help-grid { grid-template-columns: 1fr; }
}
.docs-prereq { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.docs-status-row:has(> .docs-copy-inline) { grid-template-columns: 122px minmax(0, 1fr) auto; align-items: center; }
.docs-status-row > .docs-copy-inline { position: static; }
@media (max-width: 600px) { .docs-status-row:has(> .docs-copy-inline) { grid-template-columns: minmax(0, 1fr) auto; } .docs-status-row:has(> .docs-copy-inline) > strong { grid-column: 1 / -1; } }
.docs-step :is(h2, h3) { color: var(--ink); }
.docs-task-block { scroll-margin-top: 88px; border-radius: 8px; }
.docs-task-block + .docs-task-block { margin-top: 8px; }
.docs-task-block > .docs-details { margin-top: 4px; }
.docs-task-block:target > .docs-status-row { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }

/* Tables in the docs wrap their text; app.css keeps dashboard cells on one line. */
.docs-table td { white-space: normal; }
/* Only code with a Copy button needs room above it. */
.docs-code:not(:has(> .docs-copy)) { padding-top: 0; }
/* An example that docs.js turned into a code window (app.css) keeps Copy in
   its title bar. */
.docs-code.code-window { overflow: hidden; }
.docs-code.code-window pre { padding: 14px 16px 16px; line-height: 1.7; }

/* API reference. Every endpoint is one card with the same order: route and
   purpose, request fields, examples, response. */
.api-method { display: inline-block; min-width: 40px; border-radius: 4px; padding: 2px 6px; text-align: center; background: var(--green-soft); color: var(--green); font: 700 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.api-method.get { background: var(--blue-soft); color: var(--blue); }
.api-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.docs-article a.api-part { display: grid; gap: 6px; align-content: start; border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 10px; padding: 18px; background: var(--panel); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.docs-article a.api-part:hover { border-color: var(--line-strong); box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 8%, transparent); }
.docs-article a.api-part.services { border-top-color: var(--blue); }
.api-part-label { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.api-part.services .api-part-label { color: var(--blue); }
.api-part strong { font-size: 17px; letter-spacing: -.01em; }
.api-part span:last-child { color: var(--muted); font-size: 13px; line-height: 1.5; }
.api-map tr.api-map-group th, .api-errors tr.api-map-group th { padding-top: 14px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--green); background: var(--panel-soft); color: var(--ink); font-size: 11px; }
.api-map tr.api-map-group.services th { border-left-color: var(--blue); }
.api-errors tr.api-map-group.retry th { border-left-color: var(--amber); }
.api-map td:first-child { width: 48%; }
.docs-article .api-map a { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.docs-article .api-map a:hover code { text-decoration: underline; }
.docs-article .api-map code, .docs-article .api-route code { padding: 0; background: transparent; font-size: 13px; }
.api-errors td:first-child { width: 52px; color: var(--ink); font-weight: 700; }
.api-fields td:first-child { width: 1%; white-space: nowrap; }
/* Lists of parts (Open-source licenses): the first column is a description, so it wraps. */
.docs-table.docs-parts td:first-child { width: 40%; white-space: normal; }
.api-errors td:nth-child(2) { width: 34%; }

.docs-article > section.api-block { margin-top: 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; scroll-margin-top: 88px; }
.api-block:target { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent); }
.api-block-head { padding: 18px 20px 17px; border-bottom: 1px solid var(--line); background: var(--panel-soft); }
.docs-article .api-route { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 10px; }
.docs-article .api-block-head h2 { margin: 0 0 5px; font-size: 21px; }
.docs-article .api-block-head p:last-child { margin: 0; }
.api-block-body { padding: 4px 20px 20px; }
.docs-article .api-block-body > h3 { margin: 22px 0 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.api-block-body > :last-child { margin-bottom: 0; }
.api-block .docs-table-wrap, .api-block .docs-code, .api-block .docs-tabs, .api-block .docs-journey { margin-top: 8px; margin-bottom: 8px; }
.api-required { display: inline-block; margin-left: 7px; border-radius: 3px; padding: 1px 5px; background: var(--amber-soft); color: var(--amber); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; vertical-align: 1px; }
.docs-article > section.api-topic { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: 88px; }
.api-service-flow { margin: 0 0 8px; }
.api-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.api-limits > div { display: grid; gap: 4px; align-content: start; border: 1px solid var(--line); border-radius: 10px; padding: 15px 16px; background: var(--panel); }
.api-limits span { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.api-limits strong { font-size: 22px; letter-spacing: -.02em; }
.api-limits small { color: var(--muted-strong); font-size: 12px; line-height: 1.5; }
@media (max-width: 700px) {
  .api-parts, .api-limits { grid-template-columns: 1fr; }
  .api-block-head, .api-block-body { padding-inline: 14px; }
  /* On a phone, reference tables become stacked rows instead of scrolling sideways. */
  .docs-table.api-fields, .docs-table.api-errors, .docs-table.api-map { min-width: 0; }
  .api-fields thead, .api-errors thead { display: none; }
  .api-fields tr, .api-errors tr, .api-map tr { display: grid; gap: 4px 10px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
  .api-errors tr:not(.api-map-group) { grid-template-columns: auto minmax(0, 1fr); }
  .api-fields tr:last-child, .api-errors tr:last-child, .api-map tr:last-child { border-bottom: 0; }
  .api-fields td, .api-errors td, .api-map td, .api-map th, .api-errors th { display: block; width: auto !important; padding: 0; border: 0; }
  .api-errors td:nth-child(3) { grid-column: 1 / -1; }
  .api-fields td:first-child { white-space: normal; }
  .api-map tr.api-map-group, .api-errors tr.api-map-group { padding: 0; }
  .api-map tr.api-map-group th, .api-errors tr.api-map-group th { padding: 10px 13px; border-left: 3px solid var(--green); }
}

/* Visual blocks that replace prose: comparison cards with meters (docs-levels, docs-meter, docs-bar,
   docs-w-*), requirement chips (docs-needs), a combination of choices (docs-combo, docs-chips),
   what is sent and what never is (docs-sends). bench-* draw Ompera Bench's own screens (/docs/bench). */
.bench-hero { display: grid; grid-template-columns: minmax(0, 1fr) 228px; gap: 30px; align-items: center; }
.bench-hero .docs-phone { margin: 0; }
.docs-icon { display: inline-grid; flex: none; place-items: center; color: var(--green); }
.docs-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.docs-needs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.docs-article .docs-needs li { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 9px; background: var(--panel); color: var(--muted-strong); font-size: 12px; font-weight: 650; }
.bench-phone .docs-phone-screen { gap: 11px; padding: 16px 12px; }
.bench-phone-top { display: grid; gap: 2px; }
.bench-phone-top strong { font-size: 14px; }
.bench-phone-top span, .bench-phone-note { color: var(--muted); font-size: 11px; }
.bench-speeds { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.bench-speeds > div { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 9px; background: var(--panel); }
.bench-speeds b { color: var(--green); font-size: 22px; letter-spacing: -.02em; line-height: 1.15; }
.bench-speeds span { color: var(--muted); font-size: 11px; }
.bench-temps { display: flex; gap: 6px; }
.bench-temps span { border-radius: 999px; padding: 3px 9px; background: var(--amber-soft); color: var(--amber); font-size: 11px; font-weight: 700; }
.bench-temps span + span { background: var(--green-soft); color: var(--green); }
.bench-squares { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.bench-sq { display: block; aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--panel); }
.bench-sq.ok { border-color: var(--green); background: var(--green); }
.bench-sq.slow { border-color: var(--amber); background: var(--amber); }
.bench-sq.fail { border-color: var(--red); background: var(--red); }
.bench-sq.now { border: 2px solid var(--green); background: var(--green-soft); }
.docs-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.docs-article .docs-level { display: grid; align-content: start; gap: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 14px 13px; background: var(--panel); }
.docs-article .docs-level.is-full { border-color: var(--green); box-shadow: inset 0 3px 0 var(--green); }
.docs-level-head { display: flex; align-items: center; gap: 9px; }
.docs-level-head .docs-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--green-soft); }
.docs-level-head .docs-icon svg { width: 18px; height: 18px; }
.docs-level-head strong { font-size: 15px; }
.docs-level small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.docs-tag { justify-self: start; white-space: nowrap; border-radius: 999px; padding: 3px 9px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 750; }
.docs-meter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 8px; align-items: baseline; }
.docs-meter > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.docs-meter > b { justify-self: end; font-size: 13px; text-align: right; }
.docs-bar { display: block; grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--soft); }
.docs-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.docs-bar.is-open { background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 9px); }
.docs-w-3 { width: 3%; } .docs-w-12 { width: 12%; } .docs-w-20 { width: 20%; } .docs-w-55 { width: 55%; } .docs-w-70 { width: 70%; } .docs-w-80 { width: 80%; } .docs-w-100 { width: 100%; }
.docs-article .docs-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.docs-combo { display: grid; grid-template-columns: minmax(0, 1.35fr) auto minmax(0, .8fr) auto minmax(0, 1.25fr); gap: 8px; align-items: stretch; margin: 18px 0 0; }
.docs-combo > div { display: grid; align-content: start; gap: 8px; border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 9px; padding: 11px 12px 12px; background: var(--panel); }
.docs-combo small { color: var(--muted); font-size: 11px; font-weight: 700; }
.docs-combo > b { align-self: center; color: var(--green); font-size: 18px; }
.docs-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.docs-chips span { border-radius: 6px; padding: 3px 7px; background: var(--soft); color: var(--ink); font-size: 12px; font-weight: 650; }
.bench-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 4px; padding: 0; list-style: none; }
.docs-article .bench-legend li { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-strong); font-size: 13px; }
.bench-legend .bench-sq { width: 13px; }
.docs-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; }
.docs-figures .docs-mini-ui { margin: 0; padding: 14px; box-shadow: none; }
.docs-bars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.docs-article .docs-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; font-size: 12px; }
.docs-bars li > span { color: var(--muted-strong); }
.docs-bars .docs-bar { height: 8px; }
.bench-rank { font-size: 12px; }
.bench-rank th, .bench-rank td { padding: 7px 6px; border-top: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; vertical-align: top; white-space: normal; text-transform: none; letter-spacing: 0; }
.bench-rank thead th { color: var(--muted); font-size: 11px; font-weight: 700; }
.bench-rank tbody th { color: var(--ink); font-size: 12px; font-weight: 700; }
.bench-rank tbody tr:hover { background: none; }
.bench-rank tbody tr:last-child > * { border-bottom: 0; }
.bench-rank b { display: block; font-size: 14px; }
.bench-rank small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
.bench-rank .is-top b { color: var(--green); }
.bench-rank .is-mine th { color: var(--green); }
.bench-rank td, .bench-rank th[scope="row"] { min-width: 96px; }
.bench-rank thead th small { display: block; font-weight: 500; }
.bench-rank-bar { display: block; height: 4px; margin: 3px 0 4px; border-radius: 2px; background: var(--blue); }
.bench-rank-bar.is-half { width: 55%; } .bench-rank-bar.is-short { width: 70%; } .bench-rank-bar.is-low { width: 30%; }
.bench-cores { display: flex; gap: 2px; margin-top: 5px; }
.bench-cores i { box-sizing: border-box; width: 8px; height: 8px; border: 1.5px solid var(--line-strong); border-radius: 2px; }
.bench-cores i.gap { margin-left: 3px; }
.bench-cores .is-big { border-color: var(--red); } .bench-cores .is-big.on { background: var(--red); }
.bench-cores .is-mid { border-color: var(--amber); } .bench-cores .is-mid.on { background: var(--amber); }
.bench-cores .is-little { border-color: color-mix(in srgb, var(--amber) 45%, var(--panel)); } .bench-cores .is-little.on { background: color-mix(in srgb, var(--amber) 45%, var(--panel)); }
.bench-cores .is-gpu { border-color: var(--green); } .bench-cores .is-gpu.on { background: var(--green); }
.bench-cores .is-npu { border-color: var(--blue); } .bench-cores .is-npu.on { background: var(--blue); }
.bench-rank-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 10px; }
.bench-rank-tabs span { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--muted-strong); font-size: 11px; font-weight: 650; }
.bench-rank-tabs span.is-on { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.bench-rank-tabs i { flex: 0 0 8px; }
.docs-sends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.docs-sends > div { padding: 14px 16px; }
.docs-sends > div + div { border-left: 1px solid var(--line); }
.docs-sends strong { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.docs-sends ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.docs-article .docs-sends li { position: relative; padding-left: 20px; color: var(--muted-strong); font-size: 13px; }
.docs-sends li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.docs-sends .is-never li::before { content: "✕"; color: var(--muted); }
.docs-article .docs-sends p { grid-column: 1 / -1; margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--panel-soft); color: var(--muted); font-size: 12px; }
.docs-levels.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 28px; }
@media (max-width: 900px) {
  .docs-levels, .docs-levels.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .bench-hero { grid-template-columns: 1fr; gap: 22px; }
  .bench-hero .docs-phone { justify-self: center; width: min(100%, 250px); }
  .docs-combo, .docs-figures { grid-template-columns: 1fr; }
  .docs-combo > b { justify-self: center; line-height: 1; }
}
@media (max-width: 600px) {
  .docs-levels { gap: 8px; }
  .docs-levels.is-three { grid-template-columns: 1fr; }
  .docs-article .docs-level { padding: 12px 11px; }
  .docs-sends { grid-template-columns: 1fr; }
  .docs-sends > div + div { border-top: 1px solid var(--line); border-left: 0; }
}