/* ════════════════════════════════════════════════════════════════════════════
   THE SINGULARITY · DOCS — the Application-register layer (Builders docs shell).
   Sits on the shared foundation: load order fonts -> tokens -> docs.css.
   Shares the chamfer language + Accretion accent from tokens.css; the docs
   components (nav bar, dnav/doc/toc, api ref, cmdk) are register-specific.
   ════════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════════
   MOCKUP — Builders Hub (docs format) · clickable pages (hash-routed SPA).
   Component CSS is COPIED VERBATIM from primitives-v4.html. Only the docs shell
   (sidebar + content + TOC + prose) and the router are new, built on the tokens.
   ════════════════════════════════════════════════════════════════════════════ */
/* Geometry, --accretion, the --ctrl-h ladder and --radius-* now come from tokens.css.
   Only --frame-line is docs-local. */
:root{ --frame-line: rgba(244,243,240,0.16); }
*,*::before,*::after{ box-sizing:border-box; } *{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ background:var(--void-900); color:var(--ink); font-family:var(--font-sans); font-weight:var(--w-regular);
  font-size:var(--t-body); line-height:var(--lh-text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:hidden; }
svg{ display:block; } a{ color:inherit; text-decoration:none; }
::selection{ background:#fff; color:var(--void-900); }
:focus-visible{ outline:2px solid var(--accretion); outline-offset:2px; }
/* the outer frame: a COMPLETE cut-corner cage. The 1px hairline must follow ALL
   edges incl. the two diagonal cuts (top-left + bottom-right). A border + clip-path
   clips the border off the diagonals, so instead we draw the cage with two layered
   pseudos: ::after paints the border colour as the full chamfer shape, ::before
   (inset 1px) paints the page fill clipped to the same shape — leaving a uniform
   1px hairline on every edge incl. both diagonals. The frame itself keeps the
   clip-path so its content is still clipped to the chamfer. */
.frame{ --line: var(--frame-line); --c:28px; --frame-cage:rgba(244,243,240,0.34); --frame-fill:var(--void-900);
  position:relative; isolation:isolate; margin:var(--ins); border:0 !important; background:transparent !important;
  display:flex; flex-direction:column; }
/* content lives in .frame__inner, clipped 1px INSIDE the cage so the ::after hairline ring
   shows uniformly on EVERY edge — straight AND the two diagonal cuts. */
.frame__inner{ position:relative; z-index:1; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden;
  clip-path:polygon(calc(var(--c) + 0.41px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--c) - 0.41px), calc(100% - var(--c) - 0.41px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--c) + 0.41px)); }
.frame::after, .frame::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:0 var(--round) 0 var(--round); }
.frame::after{ z-index:-2; background:var(--frame-cage);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.frame::before{ z-index:-1; background:var(--frame-fill);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.frame > *{ position:relative; z-index:1; }
[data-theme="paper"] .frame{ --frame-cage:rgba(8,8,10,0.26); --frame-fill:var(--bg); }   /* visible cut-corner cage, both themes */
/* gated docs: the shell is a frozen preview behind the coming-soon gate, so the
   page must NOT scroll — pin the frame to one viewport (top + bottom inset match)
   and let the stage clip the tall preview. No page scroll, no read-through. */
.frame{ height:calc(100svh - 2 * var(--ins)); overflow:hidden; }

/* nav (verbatim base) */
.nav{ display:flex; align-items:center; gap:var(--space-04); padding:clamp(11px,1.3vw,16px) clamp(18px,2vw,28px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; background:var(--void-900); }
.nav__brand{ display:inline-flex; align-items:center; gap:var(--space-03); color:var(--ink); flex:none; }
.nav__mark{ width:26px; height:26px; flex:none; background-color:currentColor;
  -webkit-mask:url('../img/mark.svg') center/contain no-repeat; mask:url('../img/mark.svg') center/contain no-repeat; }
.nav__brand b{ font-family:var(--font-sans); font-weight:var(--w-medium); font-size:0.95rem; letter-spacing:0.01em; white-space:nowrap; }
.nav__spacer{ margin-left:auto; }

/* ── top-bar product tabs (Docs · Examples · Reference) — moved here from the
   sidebar. Active tab carries an Accretion text + underline tick, never a fill. */
.nav__tabs{ display:inline-flex; align-items:center; gap:var(--space-02); margin-left:var(--space-05); }
.nav__tab{ position:relative; display:inline-flex; align-items:center; height:var(--ctrl-h); padding:0 var(--space-04);
  font-family:var(--font-sans); font-weight:var(--w-medium); font-size:0.94rem; letter-spacing:-0.005em; color:var(--ink-mute);
  background:transparent; border:0; cursor:pointer; white-space:nowrap; transition:color var(--dur-micro) var(--ease-gravity); }
.nav__tab:hover{ color:var(--ink); }
.nav__tab.is-active{ color:var(--ink); }
.nav__tab.is-active::after{ content:""; position:absolute; left:var(--space-04); right:var(--space-04); bottom:-1px; height:2px; background:var(--accretion); }

/* ── search field sizing in the bar ───────────────────────────────────────── */
/* drop the field to the small control height so the right-hand control cluster
   (search · Ask AI · modes · GitHub · Quickstart) all share one 32px row — even
   vertical alignment, consistent heights/gaps across the bar. */
.nav__search{ width:clamp(180px,22vw,300px); height:var(--ctrl-h-sm); }
/* compact search trigger — desktop hidden, surfaces on mobile in place of the field.
   .nav scope beats the later .nav__ico display rule it shares styling with. */
.nav .nav__searchm{ display:none; }

/* ── Ask AI button: cut-corner, subtle accent border, ⌘I hint chip ────────── */
.nav__ask{ position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:8px; height:var(--ctrl-h-sm); padding:0 var(--space-04);
  font-family:var(--font-sans); font-weight:var(--w-medium); font-size:0.875rem; color:var(--ink); cursor:pointer; white-space:nowrap;
  background:transparent !important; border:0 !important; --c:9px; --ask-cage:rgba(255,106,26,0.34); --ask-fill:rgba(255,106,26,0.06); }
.nav__ask::after, .nav__ask::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:0 var(--round) 0 var(--round); }
.nav__ask::after{ z-index:-2; background:var(--ask-cage);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition:background var(--dur-micro) var(--ease-gravity); }
.nav__ask::before{ z-index:-1; background:var(--ask-fill);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  );
  transition:background var(--dur-micro) var(--ease-gravity); }
.nav__ask > *{ position:relative; z-index:1; }
.nav__ask:hover{ --ask-cage:var(--accretion); --ask-fill:rgba(255,106,26,0.12); }
.nav__ask svg{ width:15px; height:15px; flex:none; color:var(--accretion); }
.nav__ask .nav__kbd{ position:relative; isolation:isolate; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.04em; color:var(--ink-mute);
  border:0 !important; padding:1px 5px; --c:4px; --kbd-cage:rgba(244,243,240,0.16); }
.nav__ask .nav__kbd::after, .nav__ask .nav__kbd::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:0 var(--round) 0 var(--round); }
.nav__ask .nav__kbd::after{ z-index:-2; background:var(--kbd-cage);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.nav__ask .nav__kbd::before{ z-index:-1; background:var(--ask-fill);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.nav__ask .nav__kbd > *{ position:relative; z-index:1; }
[data-theme="paper"] .nav__ask .nav__kbd{ --kbd-cage:rgba(8,8,10,0.16); }

/* ── theme MODE group: sun · moon · monitor, active gets an accent tick ────── */
.nav__modes{ position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:0; --c:8px; background:transparent; }
.nav__modes::after, .nav__modes::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:0 var(--round) 0 var(--round); }
.nav__modes::after{ z-index:-2; background:var(--line);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.nav__modes::before{ z-index:-1; background:var(--bg);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.nav__modes > *{ position:relative; z-index:1; }
.nav__mode{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:var(--ctrl-h-sm);
  background:transparent; border:0; color:var(--ink-mute); cursor:pointer; transition:color var(--dur-micro), background var(--dur-micro); position:relative; }
.nav__mode + .nav__mode{ border-left:1px solid var(--line); }
.nav__mode:hover{ color:var(--ink); background:rgba(244,243,240,0.05); }
.nav__mode.is-active{ color:var(--ink); }
.nav__mode.is-active::after{ content:""; position:absolute; left:6px; right:6px; bottom:3px; height:2px; background:var(--accretion); }
.nav__mode svg{ width:15px; height:15px; }
[data-theme="paper"] .nav__modes::after{ background:rgba(8,8,10,0.16); }
[data-theme="paper"] .nav__mode + .nav__mode{ border-left-color:rgba(8,8,10,0.16); }
[data-theme="paper"] .nav__mode:hover{ background:rgba(8,8,10,0.05); }

/* ── GitHub icon button ───────────────────────────────────────────────────── */
.nav__ico{ display:inline-flex; align-items:center; justify-content:center; width:var(--ctrl-h-sm); height:var(--ctrl-h-sm);
  background:rgba(244,243,240,0.06); border:1px solid transparent; color:var(--ink); cursor:pointer; --c:8px;
  border-radius:0 var(--round) 0 var(--round);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition:background var(--dur-micro) var(--ease-gravity); }
.nav__ico:hover{ background:rgba(244,243,240,0.14); }
.nav__ico svg{ width:17px; height:17px; }
[data-theme="paper"] .nav__ico{ background:rgba(8,8,10,0.06); }
[data-theme="paper"] .nav__ico:hover{ background:rgba(8,8,10,0.12); }

/* responsive nav — collapse tabs + secondary controls into the hamburger area */
@media (max-width:980px){ .nav__search{ width:clamp(150px,20vw,240px); } }
@media (max-width:780px){
  /* keep tabs + Ask AI + GitHub collapsed, but RESTORE search (as a compact
     trigger) and the theme-mode toggle so phone users can still search +
     switch theme. Trim the brand wordmark to a mark so the bar fits. */
  .nav__tabs, .nav__ask, .nav__ico{ display:none; }
  #searchField{ display:none; }
  .nav .nav__searchm{ display:inline-flex; }
  .nav__brand b{ display:none; }
  /* tighten the bar so search + theme + Quickstart fit a 360px phone */
  .nav{ gap:var(--space-03); padding-left:var(--space-04); padding-right:var(--space-04); }
}

/* buttons (verbatim) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-03); height:var(--ctrl-h); padding:0 var(--space-05);
  border:1px solid transparent; border-radius:0; font-family:var(--font-sans); font-weight:var(--w-medium); font-size:1rem; letter-spacing:-0.005em;
  line-height:1; white-space:nowrap; cursor:pointer; transition:background var(--dur-micro) var(--ease-gravity), border-color var(--dur-micro) var(--ease-gravity), color var(--dur-micro) var(--ease-gravity), transform var(--dur-micro) var(--ease-gravity); }
.btn--sm{ height:var(--ctrl-h-sm); padding:0 var(--space-04); font-size:0.875rem; }
.btn svg{ width:16px; height:16px; flex:none; }
.btn--primary{ background:#fff; color:var(--void-900); border-color:#fff; }
.btn--primary:hover{ background:var(--paper-50); border-color:var(--paper-50); }
.btn--ghost{ background:rgba(244,243,240,0.09); color:var(--ink); border-color:transparent; }
.btn--ghost:hover{ background:rgba(244,243,240,0.16); }
/* chamfered cut — the CTA shape, now on every primary + secondary button */
.btn--primary, .btn--ghost{ --c:11px; border-radius:0 var(--round) 0 var(--round);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.btn--sm{ --c:9px; } .btn--lg{ --c:14px; }
.btn:active{ transform:scale(0.97); }

/* fields (verbatim) */
.field{ position:relative; display:flex; align-items:center; width:100%; height:var(--ctrl-h); border:1px solid transparent;
  background:rgba(244,243,240,0.03); transition:border-color var(--dur-micro) var(--ease-gravity); }
.field:hover{ border-color:rgba(244,243,240,0.16); }
.field:focus-within{ border-color:var(--accretion); outline:2px solid var(--accretion); outline-offset:2px; }
.field > svg{ width:16px; height:16px; flex:none; margin-left:12px; color:var(--ink-mute); }
.field input{ flex:1; min-width:0; height:100%; padding:0 12px; border:0; background:transparent; font-family:var(--font-sans); font-size:1rem; color:var(--ink); letter-spacing:-0.005em; }
.field input::placeholder{ color:var(--gray-400); } .field input:focus{ outline:none; }

/* chips (verbatim) */
.chip{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:2px 8px; border-radius:0; font-family:var(--font-mono); font-size:var(--t-mono-sm);
  text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft); background:rgba(244,243,240,0.06); border:1px solid rgba(244,243,240,0.14); font-variant-numeric:tabular-nums; }
.chip--solid{ color:var(--void-900); background:var(--paper-50); border-color:var(--paper-50); }
.chip__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.chip--live{ color:var(--ink); border-color:rgba(244,243,240,0.22); } .chip--live .chip__dot{ background:var(--accretion); animation:beat 2.8s ease-in-out infinite alternate; }
@keyframes beat{ from{ opacity:1; } to{ opacity:0.4; } }

/* cards (verbatim) */
.card{ border:1px solid var(--line); background:var(--void-850); box-shadow:inset 0 1px 0 rgba(244,243,240,0.04);
  padding:clamp(20px,2vw,28px); display:flex; flex-direction:column; gap:var(--space-04); }
.card__name{ font-family:var(--font-sans); font-weight:var(--w-medium); font-size:var(--t-h3); letter-spacing:-0.01em; color:var(--ink); }

/* terminal / code block (verbatim, flattened) */
.term{ position:relative; width:100%; text-align:left; background:var(--void-900); border:1px solid rgba(244,243,240,0.14); margin-top:var(--space-05); }
.term__bar{ display:flex; align-items:center; gap:var(--space-03); padding:0.55em 0.8em; border-bottom:1px solid rgba(244,243,240,0.12); }
.term__dots{ display:inline-flex; gap:6px; } .term__dots i{ display:block; width:10px; height:10px; border-radius:50%; background:rgba(244,243,240,0.26); }
.term__path{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--ink-mute); }
.term__copy{ margin-left:auto; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink);
  background:transparent; border:1px solid rgba(244,243,240,0.22); padding:0.42em 0.85em; cursor:pointer; transition:border-color var(--dur-micro) var(--ease-gravity); }
.term__copy:hover{ border-color:var(--paper-50); }
.term__body{ padding:clamp(16px,1.8vw,22px); font-family:var(--font-mono); font-size:clamp(0.88rem,1vw,0.97rem); line-height:1.95; overflow-x:auto; }
.term__prompt{ color:var(--accretion); } .term__cmd{ color:var(--ink); } .term__flag{ color:var(--accretion); }
.term__out{ color:var(--ink-soft); } .term__ok{ color:var(--ink-soft); } .term__okmark{ color:var(--accretion); } .term__cmt{ color:var(--ink-soft); }

/* ── docs shell (built on the tokens) ────────────────────────────────────────── */
.docs{ flex:1; display:grid; grid-template-columns:240px minmax(0,1fr) 200px; min-height:0; align-items:start; }
@media (max-width:1080px){ .docs{ grid-template-columns:240px minmax(0,1fr); } .toc{ display:none; } }
@media (max-width:780px){ .docs{ grid-template-columns:1fr; } .dnav{ display:none; } }

.dnav{ position:sticky; top:57px; align-self:start; max-height:calc(100vh - 57px); overflow-y:auto; border-right:1px solid var(--line); padding:var(--space-06) var(--space-04); display:flex; flex-direction:column; gap:var(--space-06); }

/* sidebar product tabs were moved into the top navbar (.nav__tabs). */
.dnav__group{ display:flex; flex-direction:column; gap:1px; }
/* ── nested sub-group (one level): continuing rail + indent ──────────────────── */
.dnav__sub{ display:flex; flex-direction:column; gap:1px; margin:1px 0 1px var(--space-04); padding-left:var(--space-04); border-left:1px solid var(--line); }
.dnav__sublabel{ display:flex; align-items:center; gap:7px; width:100%; background:transparent; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-sans); font-size:0.9rem; color:var(--ink-soft); padding:6px var(--space-04) 6px 0; }
.dnav__sublabel:hover{ color:var(--ink); }
.dnav__sub .dnav__chev{ width:10px; height:10px; }
.dnav__sub.is-collapsed .dnav__chev{ transform:rotate(-90deg); }
.dnav__sub.is-collapsed .dnav__item{ display:none; }
.dnav__sub .dnav__item{ font-size:0.9rem; height:30px; }
.dnav__label{ font-family:var(--font-mono); font-size:var(--t-mono-sm); letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-mute); padding:0 var(--space-04) 7px; }
.dnav__item{ display:flex; align-items:center; gap:8px; height:32px; padding:0 var(--space-04); color:var(--ink-soft); font-family:var(--font-sans);
  font-size:0.94rem; border-left:2px solid transparent; cursor:pointer; transition:color var(--dur-micro), background var(--dur-micro); }
.dnav__item:hover{ color:var(--ink); background:rgba(244,243,240,0.04); }
.dnav__item.is-active{ color:#fff; border-left-color:#fff; background:rgba(244,243,240,0.05); }
.dnav__item .chip{ margin-left:auto; height:18px; padding:1px 6px; }
/* EXP-style squared mono accent-outline pill (like Composio's "EXP") */
.chip--exp{ color:var(--accretion); background:transparent; border-color:rgba(255,106,26,0.45); letter-spacing:0.14em; }
[data-theme="paper"] .chip--exp{ color:var(--accretion); border-color:rgba(255,106,26,0.5); }

.doc{ min-width:0; padding:clamp(28px,3.4vw,56px) clamp(28px,4vw,64px); max-width:880px; }
/* eyebrow — raise specificity (.doc .doc__eye) so it beats `.doc p` on the
   <p class="doc__eye"> markup; pins to the canonical mono-sm (~11px). */
.doc .doc__eye, .doc__eye{ font-family:var(--font-mono); font-size:var(--t-mono-sm); line-height:1.4; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-mute); max-width:none; }
.doc__eye::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:9px; background:var(--accretion); vertical-align:0.06em; }
.doc h1{ font-family:var(--font-sans); font-weight:var(--w-medium); font-size:var(--t-display); line-height:var(--lh-snug); letter-spacing:-0.018em; color:var(--ink); margin-top:var(--space-04); max-width:16ch; text-wrap:balance; }
.doc .lead{ font-family:var(--font-sans); font-weight:var(--w-light); font-size:1.04rem; line-height:1.5; color:var(--gray-100); max-width:58ch; margin-top:var(--space-05); }
.doc__cta{ display:flex; gap:var(--space-04); flex-wrap:wrap; margin-top:var(--space-06); }
.doc h2{ font-family:var(--font-sans); font-weight:var(--w-medium); font-size:var(--t-h2); letter-spacing:-0.01em; color:var(--ink);
  margin-top:var(--space-11); padding-top:var(--space-06); border-top:1px solid var(--line); scroll-margin-top:80px; }
.doc p{ font-size:1rem; line-height:1.7; color:var(--gray-100); max-width:66ch; margin-top:var(--space-04); }
.doc p code{ font-family:var(--font-mono); font-size:0.88em; color:var(--ink); background:rgba(244,243,240,0.06); padding:1px 6px; border:1px solid rgba(244,243,240,0.10); }

.note{ margin-top:var(--space-05); padding:var(--space-05); border:1px solid var(--line); border-left:2px solid var(--paper-50); background:var(--void-850); max-width:66ch; }
.note__k{ font-family:var(--font-mono); font-size:var(--t-mono-sm); letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px; }
.note p{ margin-top:0; font-size:0.98rem; }

.cards2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-05); margin-top:var(--space-06); }
@media (max-width:620px){ .cards2{ grid-template-columns:1fr; } }

/* ── Welcome quick-links: top row of 3–4 compact cut-corner cards ─────────────── */
.quicklinks{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-04); margin-top:var(--space-07); }
@media (max-width:900px){ .quicklinks{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .quicklinks{ grid-template-columns:1fr; } }
.quicklinks .card{ padding:var(--space-05); gap:var(--space-03); --c:11px; }
.quicklinks .card__name{ font-size:1.02rem; }
.quicklinks .card__desc{ font-size:0.88rem; }
.card--link{ cursor:pointer; gap:var(--space-04); transition:border-color var(--dur-micro), background var(--dur-micro); }
.card--link:hover{ --surf:var(--void-800); }
.card--link .card__name{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-04); }
.card__arrow{ width:18px; height:18px; flex:none; color:var(--ink-mute); transition:color var(--dur-micro), transform var(--dur-micro); }
.card--link:hover .card__arrow{ color:var(--ink); transform:translateX(2px); }
.card__desc{ font-family:var(--font-sans); font-weight:var(--w-regular); font-size:0.98rem; line-height:1.6; color:var(--gray-100); }
.card__k{ font-family:var(--font-mono); font-size:var(--t-mono-sm); letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mute); }

/* ── Welcome HERO: two-column (headline + stacked quick-links | collage) ─────── */
.hero{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(28px,4vw,60px); align-items:center; margin-top:var(--space-04); }
.hero__head{ font-family:var(--font-sans); font-weight:var(--w-medium); font-size:var(--t-display-xl); line-height:var(--lh-tight); letter-spacing:-0.022em; color:var(--ink); max-width:13ch; text-wrap:balance; }
.hero__sub{ font-family:var(--font-sans); font-weight:var(--w-light); font-size:clamp(1.04rem,1.3vw,1.22rem); line-height:1.6; color:var(--gray-100); max-width:54ch; margin-top:var(--space-05); }
/* three stacked full-width quick-link rows */
.qstack{ display:flex; flex-direction:column; gap:var(--space-04); margin-top:var(--space-07); }
.qrow{ position:relative; isolation:isolate; display:flex; align-items:center; gap:var(--space-05); padding:var(--space-05) var(--space-06); cursor:pointer; --c:12px; --surf:var(--void-850);
  transition:transform var(--dur-micro) var(--ease-gravity); }
.qrow::after, .qrow::before{ content:""; position:absolute; inset:0; border-radius:0 var(--round) 0 var(--round); }
.qrow::after{ z-index:-2; background:var(--frame-line);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.qrow::before{ z-index:-1; background:var(--surf);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.qrow > *{ position:relative; z-index:1; }
.qrow:hover{ transform:translateY(-2px); } .qrow:hover::after{ background:rgba(244,243,240,0.30); }
[data-theme="paper"] .qrow{ --surf:var(--surface); } [data-theme="paper"] .qrow:hover::after{ background:rgba(8,8,10,0.30); }
.qrow__ic{ width:26px; height:26px; flex:none; color:var(--accretion); }
.qrow__ic svg{ width:100%; height:100%; }
.qrow__t{ font-family:var(--font-sans); font-weight:var(--w-medium); font-size:1.12rem; letter-spacing:-0.01em; color:var(--ink); }
.qrow__go{ width:18px; height:18px; flex:none; margin-left:auto; color:var(--ink-mute); transition:color var(--dur-micro), transform var(--dur-micro); }
.qrow:hover .qrow__go{ color:var(--ink); transform:translateX(2px); }

/* ── product-illustration collage (terminal + status cards, layered) ─────────── */
.collage{ position:relative; min-height:330px; }
.collage__term{ position:relative; isolation:isolate; width:96%; --c:13px; --surf:var(--void-900); --cutline:rgba(244,243,240,0.18);
  box-shadow:0 24px 60px -28px rgba(0,0,0,0.7); }
.collage__term::after, .collage__term::before{ content:""; position:absolute; inset:0; border-radius:0 var(--round) 0 var(--round); }
.collage__term::after{ z-index:-2; background:var(--cutline);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.collage__term::before{ z-index:-1; background:var(--surf);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.collage__term > *{ position:relative; z-index:1; }
.collage__bar{ display:flex; align-items:center; gap:var(--space-03); padding:0.55em 0.8em; border-bottom:1px solid rgba(244,243,240,0.12); }
[data-theme="paper"] .collage__bar{ border-bottom-color:rgba(8,8,10,0.12); }
.collage__dots{ display:inline-flex; gap:6px; } .collage__dots i{ display:block; width:9px; height:9px; border-radius:50%; background:rgba(244,243,240,0.26); }
[data-theme="paper"] .collage__dots i{ background:rgba(8,8,10,0.22); }
.collage__path{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.04em; color:var(--ink-mute); }
.collage__body{ padding:var(--space-06); font-family:var(--font-mono); font-size:0.82rem; line-height:2.05; }
.collage__body .pr{ color:var(--accretion); } .collage__body .cm{ color:var(--ink); } .collage__body .ot{ color:var(--ink-soft); } .collage__body .ok{ color:var(--accretion); }
[data-theme="paper"] .collage__term{ --surf:var(--surface); --cutline:rgba(8,8,10,0.18); }
/* overlapping status card */
.collage__card{ position:absolute; right:-6px; bottom:-18px; width:236px; isolation:isolate; --c:11px; --surf:var(--void-850);
  padding:var(--space-05); display:flex; flex-direction:column; gap:var(--space-04); box-shadow:0 22px 50px -24px rgba(0,0,0,0.75); }
.collage__card::after, .collage__card::before{ content:""; position:absolute; inset:0; border-radius:0 var(--round) 0 var(--round); }
.collage__card::after{ z-index:-2; background:var(--frame-line);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.collage__card::before{ z-index:-1; background:var(--surf);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.collage__card > *{ position:relative; z-index:1; }
[data-theme="paper"] .collage__card{ --surf:var(--surface); }
.collage__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-04); }
.collage__zone{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); }
.collage__chips{ display:flex; gap:6px; flex-wrap:wrap; }
.collage__chips .chip{ height:20px; padding:1px 7px; }
.collage__stats{ display:flex; gap:var(--space-06); }
.collage__stat{ display:flex; flex-direction:column; gap:2px; }
.collage__statn{ font-family:var(--font-mono); font-size:1.02rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.collage__statk{ font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mute); }

/* ── WHAT YOU GET feature grid ───────────────────────────────────────────────── */
.whatyou{ margin-top:var(--space-11); padding-top:var(--space-08); border-top:1px solid var(--line); }
.whatyou__head{ font-family:var(--font-sans); font-weight:var(--w-medium); font-size:var(--t-h2); letter-spacing:-0.01em; color:var(--ink); margin-top:var(--space-04); max-width:22ch; }
.featgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-05); margin-top:var(--space-07); }
.feat{ position:relative; isolation:isolate; padding:var(--space-06); display:flex; flex-direction:column; gap:var(--space-03); --c:12px; --surf:var(--void-850);
  transition:transform var(--dur-micro) var(--ease-gravity); }
.feat::after, .feat::before{ content:""; position:absolute; inset:0; border-radius:0 var(--round) 0 var(--round); }
.feat::after{ z-index:-2; background:var(--frame-line);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.feat::before{ z-index:-1; background:var(--surf);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.feat > *{ position:relative; z-index:1; }
[data-theme="paper"] .feat{ --surf:var(--surface); }
.feat:hover{ transform:translateY(-2px); } .feat:hover::after{ background:rgba(244,243,240,0.30); }
[data-theme="paper"] .feat:hover::after{ background:rgba(8,8,10,0.30); }
.feat__t{ font-family:var(--font-sans); font-weight:var(--w-medium); font-size:1.08rem; letter-spacing:-0.01em; color:var(--ink); max-width:20ch; }
.feat__d{ font-family:var(--font-sans); font-weight:var(--w-regular); font-size:0.96rem; line-height:1.6; color:var(--gray-100); }
.feat__go{ position:absolute; top:var(--space-05); right:var(--space-05); width:16px; height:16px; color:var(--ink-mute); transition:color var(--dur-micro), transform var(--dur-micro); }
.feat:hover .feat__go{ color:var(--accretion); transform:translate(2px,-2px); }

@media (max-width:920px){
  .hero{ grid-template-columns:1fr; gap:var(--space-08); }
  .collage{ min-height:0; margin-bottom:24px; }
  .collage__card{ position:static; width:100%; margin-top:var(--space-06); }
  .collage__term{ width:100%; }
}
@media (max-width:560px){ .featgrid{ grid-template-columns:1fr; } }

.chiprow{ display:flex; gap:var(--space-03); flex-wrap:wrap; margin-top:var(--space-05); }

.dlist{ display:flex; flex-direction:column; margin-top:var(--space-05); border-top:1px solid var(--line); }
.dlist a{ display:flex; align-items:center; gap:var(--space-04); padding:14px 4px; border-bottom:1px solid rgba(244,243,240,0.06); color:var(--ink); cursor:pointer; transition:padding var(--dur-micro), background var(--dur-micro); }
.dlist a:hover{ background:rgba(244,243,240,0.03); padding-left:12px; }
.dlist__t{ font-family:var(--font-sans); font-weight:var(--w-medium); font-size:1rem; color:var(--ink); }
.dlist__m{ margin-left:auto; font-family:var(--font-mono); font-size:var(--t-mono-sm); letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-mute); white-space:nowrap; }
.dlist__go{ width:16px; height:16px; flex:none; color:var(--ink-mute); }

.docnav{ display:flex; justify-content:space-between; gap:var(--space-05); margin-top:var(--space-11); padding-top:var(--space-06); border-top:1px solid var(--line); }
.docnav__a{ display:flex; flex-direction:column; gap:6px; padding:var(--space-05); border:1px solid var(--line); min-width:210px; cursor:pointer; transition:border-color var(--dur-micro), background var(--dur-micro); }
.docnav__a:hover{ --surf:var(--void-850); }
.docnav__a--next{ text-align:right; align-items:flex-end; margin-left:auto; }
.docnav__k{ font-family:var(--font-mono); font-size:var(--t-mono-sm); letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mute); }
.docnav__t{ font-family:var(--font-sans); font-weight:var(--w-medium); font-size:1rem; color:var(--ink); }

.toc{ position:sticky; top:57px; align-self:start; border-left:1px solid var(--line); padding:clamp(28px,3vw,48px) var(--space-05); }
.toc__label{ font-family:var(--font-mono); font-size:var(--t-mono-sm); letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:var(--space-04); }
.toc__item{ display:block; font-family:var(--font-sans); font-size:0.92rem; color:var(--ink-soft); padding:7px 0 7px 14px; border-left:1px solid var(--line); cursor:pointer; transition:color var(--dur-micro), border-color var(--dur-micro); }
.toc__item:hover{ color:var(--ink-soft); }
.toc__item.is-active{ color:var(--ink); border-left-color:#fff; }

/* ── cut-corner motif — the CTA shape repeated on the page surfaces.
   Layered pseudos so the hairline border follows the chamfer; the element itself
   isn't clipped, so content / sticky / overflow are untouched. ─────────────── */
.card, .term, .docnav__a{ position:relative; isolation:isolate; background:transparent !important; border:0 !important; box-shadow:none; }
.card::before, .card::after, .term::before, .term::after, .docnav__a::before, .docnav__a::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:0 var(--round) 0 var(--round); }
.card::after, .term::after, .docnav__a::after{ z-index:-2; background:var(--cutline, var(--frame-line));
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.card::before, .term::before, .docnav__a::before{ z-index:-1; background:var(--surf);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.card > *, .term > *, .docnav__a > *{ position:relative; z-index:1; }
.card{ --c:13px; --surf:var(--void-850); }
.term{ --c:11px; --surf:var(--void-900); --cutline:rgba(244,243,240,0.18); }
.docnav__a{ --c:11px; --surf:var(--void-900); }
.card--link:hover::after, .docnav__a:hover::after{ background:rgba(244,243,240,0.30); }

/* ── code-block language tabs ─────────────────────────────────────────────────── */
.term__tabs{ display:inline-flex; align-items:stretch; gap:0; margin-right:var(--space-03); }
.term__tab{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute);
  background:transparent; border:0; border-bottom:2px solid transparent; padding:0.3em 0.7em; cursor:pointer;
  transition:color var(--dur-micro) var(--ease-gravity), border-color var(--dur-micro) var(--ease-gravity); }
.term__tab:hover{ color:var(--ink-soft); }
.term__tab.is-active{ color:var(--ink); border-bottom-color:var(--accretion); }
.term__panel{ display:none; }
.term__panel.is-active{ display:block; }
.term__copy.is-ok{ border-color:var(--accretion); color:var(--accretion); }
.term__copy.is-ok .term__copyck{ color:var(--accretion); }
.term__copyck{ display:inline-block; margin-right:5px; }

/* ── callout variants ─────────────────────────────────────────────────────────── */
.note{ display:block; }
.note--warning, .note--tip{ border-left-color:var(--accretion); }
.note--info, .note--note{ border-left-color:var(--paper-50); }
.note__k{ display:flex; align-items:center; gap:7px; }
.note__ic{ width:14px; height:14px; flex:none; color:var(--ink-mute); }
.note--warning .note__ic, .note--tip .note__ic{ color:var(--accretion); }

/* ── steps ────────────────────────────────────────────────────────────────────── */
.steps{ counter-reset:step; margin-top:var(--space-06); padding-left:var(--space-08); border-left:1px solid var(--line); display:flex; flex-direction:column; gap:var(--space-07); margin-left:14px; }
.step{ position:relative; }
/* step number: complete chamfer cage. The ::after pseudo carries the counter
   text, so the cage is drawn by clipping the element itself to the chamfer +
   filling it with the cage (border) colour, then a ::before inset 1px paints the
   surface — a uniform 1px hairline on every edge incl. both diagonal cuts. */
.step__n{ counter-increment:step; position:absolute; isolation:isolate; left:calc(-1 * var(--space-08) - 15px); top:0; width:30px; height:30px; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:0.82rem; color:var(--ink);
  background:var(--line); border:0; --c:8px; --step-fill:var(--void-850);
  border-radius:0 var(--round) 0 var(--round);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.step__n::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--step-fill); border-radius:0 var(--round) 0 var(--round);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.step__n::after{ content:counter(step); position:relative; z-index:1; }
.step__t{ font-family:var(--font-sans); font-weight:var(--w-medium); font-size:var(--t-h3); letter-spacing:-0.01em; color:var(--ink); padding-top:3px; }
.step__body > :first-child{ margin-top:var(--space-04); }
.step__body p{ margin-top:var(--space-04); }

/* ── breadcrumbs ──────────────────────────────────────────────────────────────── */
.crumbs{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-family:var(--font-mono); font-size:var(--t-mono-sm); letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-mute); }
.crumbs__sep{ color:var(--ink-faint); }
.crumbs a{ color:var(--ink-mute); cursor:pointer; transition:color var(--dur-micro); }
.crumbs a:hover{ color:var(--ink); }
.crumbs__cur{ color:var(--ink-soft); }

/* ── collapsible sidebar groups ──────────────────────────────────────────────── */
.dnav__label{ display:flex; align-items:center; gap:7px; width:100%; background:transparent; border:0; cursor:pointer; text-align:left; }
.dnav__chev{ width:11px; height:11px; flex:none; color:var(--ink-faint); transition:transform var(--dur-micro) var(--ease-gravity); margin-left:auto; }
.dnav__group.is-collapsed .dnav__chev{ transform:rotate(-90deg); }
.dnav__group.is-collapsed .dnav__item{ display:none; }

/* ── mobile sidebar drawer + hamburger ───────────────────────────────────────── */
.nav__menu{ display:none; width:var(--ctrl-h-sm); height:var(--ctrl-h-sm); align-items:center; justify-content:center; background:rgba(244,243,240,0.06);
  border:1px solid transparent; color:var(--ink); cursor:pointer; --c:8px;
  border-radius:0 var(--round) 0 var(--round);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition:background var(--dur-micro) var(--ease-gravity); }
.nav__menu:hover{ background:rgba(244,243,240,0.14); }   /* match .nav__ico lighten */
[data-theme="paper"] .nav__menu:hover{ background:rgba(8,8,10,0.12); }
.nav__menu svg{ width:18px; height:18px; }
.dnav__scrim{ display:none; }
@media (max-width:780px){
  .nav__menu{ display:inline-flex; }
  .dnav{ display:flex !important; position:fixed; inset:57px 0 0 0; z-index:40; width:min(82vw,300px); max-height:none;
    background:var(--void-900); border-right:1px solid var(--line); transform:translateX(-100%);
    transition:transform var(--dur-ui) var(--ease-gravity); }
  body.is-nav-open .dnav{ transform:translateX(0); }
  .dnav__scrim{ display:block; position:fixed; inset:57px 0 0 0; z-index:30; background:rgba(0,0,0,0.55); opacity:0; pointer-events:none;
    transition:opacity var(--dur-ui) var(--ease-gravity); }
  body.is-nav-open .dnav__scrim{ opacity:1; pointer-events:auto; }
  body.is-nav-open{ overflow:hidden; }
}

/* ── ⌘K command palette ──────────────────────────────────────────────────────── */
.field__kbd{ position:relative; isolation:isolate; margin-left:auto; margin-right:8px; display:inline-flex; align-items:center; gap:3px; font-family:var(--font-mono); font-size:0.66rem;
  letter-spacing:0.05em; color:var(--ink-mute); border:0; padding:2px 6px; flex:none; --c:5px; --fkbd-cage:rgba(244,243,240,0.16); }
.field__kbd::after, .field__kbd::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:0 var(--round) 0 var(--round); }
.field__kbd::after{ z-index:-2; background:var(--fkbd-cage);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.field__kbd::before{ z-index:-1; background:var(--void-900);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.cmdk{ position:fixed; inset:0; z-index:80; display:none; align-items:flex-start; justify-content:center; padding-top:12vh; }
.cmdk.is-open{ display:flex; }
.cmdk__scrim{ position:absolute; inset:0; background:rgba(0,0,0,0.62); }
.cmdk__panel{ position:relative; width:min(92vw,560px); max-height:64vh; display:flex; flex-direction:column; isolation:isolate; --c:14px; }
.cmdk__panel::after, .cmdk__panel::before{ content:""; position:absolute; inset:0; border-radius:0 var(--round) 0 var(--round); }
.cmdk__panel::after{ z-index:-2; background:rgba(244,243,240,0.18);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.cmdk__panel::before{ z-index:-1; background:var(--void-850);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.cmdk__panel > *{ position:relative; z-index:1; }
.cmdk__in{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); }
.cmdk__in svg{ width:17px; height:17px; flex:none; color:var(--ink-mute); }
.cmdk__in input{ flex:1; min-width:0; background:transparent; border:0; outline:none; color:var(--ink); font-family:var(--font-sans); font-size:1.05rem; }
.cmdk__in input::placeholder{ color:var(--gray-400); }
.cmdk__results{ overflow-y:auto; padding:6px; }
.cmdk__row{ display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; border-left:2px solid transparent; }
.cmdk__row.is-sel{ background:rgba(244,243,240,0.05); border-left-color:var(--accretion); }
.cmdk__row:hover{ background:rgba(244,243,240,0.03); }
.cmdk__rt{ font-family:var(--font-sans); font-size:0.98rem; color:var(--ink); }
.cmdk__rg{ margin-left:auto; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute); white-space:nowrap; }
.cmdk__rh{ width:14px; height:14px; flex:none; color:var(--ink-faint); }
.cmdk__empty{ padding:22px; text-align:center; font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.08em; color:var(--ink-mute); }
.cmdk__foot{ display:flex; gap:16px; padding:9px 16px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.06em; color:var(--ink-mute); }
.cmdk__foot kbd{ font-family:var(--font-mono); border:1px solid rgba(244,243,240,0.16); padding:1px 5px; margin-right:4px; color:var(--ink-soft); }

/* ── light / paper theme override ─────────────────────────────────────────────
   tokens.css ships the [data-theme="paper"] palette; here we re-key the local
   rgba(244,243,240,…) constants (which are baked for dark) to dark-on-paper so
   every surface, hairline and hover stays legible when the theme flips. ──────── */
[data-theme="paper"]{ --frame-line:rgba(8,8,10,0.16); }
[data-theme="paper"] body{ background:var(--bg); color:var(--ink); }
[data-theme="paper"] .nav, [data-theme="paper"] .dnav{ background:var(--bg); }
[data-theme="paper"] .field, [data-theme="paper"] .nav__menu{ background:rgba(8,8,10,0.03); }
[data-theme="paper"] .field:hover{ border-color:rgba(8,8,10,0.16); }
[data-theme="paper"] .btn--ghost{ background:rgba(8,8,10,0.06); }
[data-theme="paper"] .btn--ghost:hover{ background:rgba(8,8,10,0.12); }
[data-theme="paper"] .chip{ color:var(--ink-soft); background:rgba(8,8,10,0.05); border-color:rgba(8,8,10,0.14); }
[data-theme="paper"] .dnav__item:hover{ background:rgba(8,8,10,0.04); }
[data-theme="paper"] .dnav__item.is-active{ color:var(--ink); border-left-color:var(--ink); background:rgba(8,8,10,0.05); }
[data-theme="paper"] .term{ --surf:var(--surface); --cutline:rgba(8,8,10,0.18); }
[data-theme="paper"] .term__copy{ border-color:rgba(8,8,10,0.22); }
[data-theme="paper"] .card{ --surf:var(--surface); }
[data-theme="paper"] .docnav__a{ --surf:var(--surface); }
[data-theme="paper"] .card--link:hover::after, [data-theme="paper"] .docnav__a:hover::after{ background:rgba(8,8,10,0.30); }
[data-theme="paper"] .doc p code{ background:rgba(8,8,10,0.05); border-color:rgba(8,8,10,0.12); }
[data-theme="paper"] .doc__copy{ --copy-cage:rgba(8,8,10,0.12); --copy-fill:rgba(8,8,10,0.05); }
[data-theme="paper"] .doc__copy:hover{ --copy-cage:rgba(8,8,10,0.22); --copy-fill:rgba(8,8,10,0.09); }
[data-theme="paper"] .dlist a:hover, [data-theme="paper"] .cmdk__row:hover{ background:rgba(8,8,10,0.04); }
[data-theme="paper"] .cmdk__panel::before{ background:var(--surface); }
[data-theme="paper"] .cmdk__panel::after{ background:rgba(8,8,10,0.18); }
[data-theme="paper"] .cmdk__row.is-sel{ background:rgba(8,8,10,0.05); }
[data-theme="paper"] .step__n{ --step-fill:var(--surface); }
[data-theme="paper"] .field__kbd{ --fkbd-cage:rgba(8,8,10,0.16); }
[data-theme="paper"] .field__kbd::before{ background:var(--bg); }
[data-theme="paper"] .cmdk__foot kbd{ border-color:rgba(8,8,10,0.16); }
[data-theme="paper"] ::selection{ background:var(--void-900); color:#fff; }
[data-theme="paper"] .params th, [data-theme="paper"] .params td{ border-color:rgba(8,8,10,0.10); }
[data-theme="paper"] .params thead th{ border-bottom-color:rgba(8,8,10,0.16); }
[data-theme="paper"] .api-ep{ --surf:var(--surface); }

/* ── per-page action cluster (Copy page) ─────────────────────────────────────── */
.doc__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-05); flex-wrap:wrap; }
.doc__actions{ display:flex; gap:var(--space-03); flex-wrap:wrap; margin-top:var(--space-04); }
.doc__copy{ position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:7px; height:var(--ctrl-h-sm); padding:0 var(--space-04);
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-mute);
  background:transparent !important; border:0 !important; cursor:pointer; --c:8px; white-space:nowrap;
  --copy-cage:var(--line); --copy-fill:rgba(244,243,240,0.04);
  transition:color var(--dur-micro); }
.doc__copy::after, .doc__copy::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:0 var(--round) 0 var(--round);
  transition:background var(--dur-micro); }
.doc__copy::after{ z-index:-2; background:var(--copy-cage);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.doc__copy::before{ z-index:-1; background:var(--copy-fill);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.doc__copy > *{ position:relative; z-index:1; }
.doc__copy:hover{ color:var(--ink); --copy-cage:var(--line-strong); --copy-fill:rgba(244,243,240,0.08); }
.doc__copy svg{ width:13px; height:13px; flex:none; }
.doc__copy.is-ok{ color:var(--accretion); --copy-cage:var(--accretion); }
.doc__copy.is-ok .doc__copyck{ color:var(--accretion); }

/* ── hover anchor link on h2 (deep-link) ─────────────────────────────────────── */
.doc h2{ position:relative; }
.doc h2 .h2anchor{ position:absolute; left:-1.1em; bottom:0.18em; width:0.9em; height:0.9em;
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink-faint); opacity:0; cursor:pointer;
  transition:opacity var(--dur-micro), color var(--dur-micro); }
@media (max-width:1080px){ .doc h2 .h2anchor{ left:auto; right:0; bottom:auto; top:50%; transform:translateY(-50%); } }
.doc h2:hover .h2anchor, .doc h2 .h2anchor:focus-visible{ opacity:1; }
.doc h2 .h2anchor:hover{ color:var(--accretion); }
.doc h2 .h2anchor svg{ width:0.9em; height:0.9em; }

/* ── syntax-token coloring (light, mono-friendly — accent stays a tick only) ──── */
.tk-kw{ color:var(--ink); font-weight:var(--w-medium); }
.tk-str{ color:var(--ink-soft); }
.tk-com{ color:var(--ink-faint); font-style:italic; }
.tk-num{ color:var(--ink-soft); }
.tk-punc{ color:var(--ink-mute); }
.tk-fn{ color:var(--ink); }

/* ── 404 / unknown route ─────────────────────────────────────────────────────── */
.notfound{ padding:var(--space-08) 0; }
.notfound__code{ font-family:var(--font-mono); font-size:var(--t-mono-sm); letter-spacing:0.22em; text-transform:uppercase; color:var(--accretion); }
.notfound__code::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:9px; background:var(--accretion); vertical-align:0.06em; }

/* ── API reference: endpoint header ──────────────────────────────────────────── */
.api-ep{ position:relative; isolation:isolate; margin-top:var(--space-06); padding:var(--space-05) var(--space-06);
  display:flex; align-items:center; gap:var(--space-04); flex-wrap:wrap; --c:12px; --surf:var(--void-850); }
.api-ep::after, .api-ep::before{ content:""; position:absolute; inset:0; border-radius:0 var(--round) 0 var(--round); }
.api-ep::after{ z-index:-2; background:var(--frame-line);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.api-ep::before{ z-index:-1; background:var(--surf);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.api-ep > *{ position:relative; z-index:1; }
.api-method{ position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px; font-family:var(--font-mono);
  font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); border:0 !important;
  background:transparent !important; --c:7px; --apim-cage:var(--line-strong); --apim-fill:var(--surf,var(--void-850)); flex:none; font-variant-numeric:tabular-nums; }
.api-method::after, .api-method::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:0 var(--round) 0 var(--round); }
.api-method::after{ z-index:-2; background:var(--apim-cage);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.api-method::before{ z-index:-1; background:var(--apim-fill);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.api-method > *{ position:relative; z-index:1; }
/* write verbs carry the orange tick — marker only, never a fill */
.api-method.is-write{ box-shadow:inset 2px 0 0 var(--accretion); --apim-cage:var(--ink-mute); padding-left:13px; }
.api-method__tick{ display:none; }
.api-ep__path{ font-family:var(--font-mono); font-size:clamp(0.9rem,1.1vw,1.02rem); color:var(--ink); letter-spacing:0.01em; word-break:break-all; }
.api-ep__path .seg-var{ color:var(--accretion); }
.api-ep__desc{ font-size:1rem; line-height:1.7; color:var(--gray-100); max-width:66ch; margin-top:var(--space-05); }

/* ── API reference: params table ─────────────────────────────────────────────── */
.params{ width:100%; border-collapse:collapse; margin-top:var(--space-05); font-size:0.94rem; }
.params thead th{ text-align:left; font-family:var(--font-mono); font-size:var(--t-mono-sm); letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-mute); font-weight:var(--w-regular); padding:0 var(--space-05) 8px 0; border-bottom:1px solid var(--line); }
.params td{ padding:13px var(--space-05) 13px 0; border-bottom:1px solid rgba(244,243,240,0.07); vertical-align:top; }
.params tr:last-child td{ border-bottom:0; }
.params .pm-name{ font-family:var(--font-mono); font-size:0.86rem; color:var(--ink); white-space:nowrap; }
.params .pm-type{ font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-soft); white-space:nowrap; }
.params .pm-desc{ color:var(--gray-100); line-height:1.6; min-width:18ch; }
.params .pm-req{ display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink); padding-left:9px; box-shadow:inset 2px 0 0 var(--accretion); }
.params .pm-opt{ font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }

/* ── API reference: Stripe-style two-column row (explanation / code) ──────────── */
.api-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,3vw,44px); align-items:start; margin-top:var(--space-07); }
.api-row__doc > :first-child{ margin-top:0; }
.api-row__doc .params{ margin-top:var(--space-04); }
.api-row__code{ position:sticky; top:74px; }
.api-row__code > :first-child{ margin-top:0; }
@media (max-width:900px){ .api-row{ grid-template-columns:1fr; gap:var(--space-05); } .api-row__code{ position:static; } }

/* ════════════════════════════════════════════════════════════════════════════
   COMING-SOON GATE — the docs shell renders as a DIMMED, blurred preview while
   the gate floats above it. The top nav stays untouched (it lives outside the
   stage). Chamfer + a single Accretion tick — intentional, on-brand, centered.
   ════════════════════════════════════════════════════════════════════════════ */
.docs-stage{ position:relative; flex:1; display:flex; min-height:0; overflow:hidden; }
.docs-stage .docs{ flex:1; }

/* the real docs shell, dimmed + softly blurred + frozen behind the gate */
.docs.is-preview{ pointer-events:none; user-select:none; opacity:0.55; filter:saturate(0.82); }

/* the gate overlay — a soft scrim that lets the shell read THROUGH, blurred.
   Fixed to the viewport so the card stays centered no matter how tall the docs
   preview is; z-index sits BELOW the sticky nav (z 20) so the nav stays crisp. */
.comingsoon{ position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,4vw,56px); padding-top:clamp(96px,12vh,140px);
  background:color-mix(in srgb, var(--void-900) 46%, transparent);
  -webkit-backdrop-filter:blur(3.5px); backdrop-filter:blur(3.5px); }
[data-theme="paper"] .comingsoon{ background:color-mix(in srgb, var(--paper-50) 50%, transparent); }

/* the chamfer card — layered pseudos carry the hairline + surface through the cut */
.cs-card{ position:relative; isolation:isolate; width:min(440px,100%); padding:clamp(30px,3.4vw,44px) clamp(26px,3vw,40px);
  text-align:center; --c:16px; }
.cs-card::after, .cs-card::before{ content:""; position:absolute; inset:0; border-radius:0 var(--round) 0 var(--round); }
.cs-card::after{ z-index:-2; background:var(--line-strong, rgba(244,243,240,0.22));
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.cs-card::before{ z-index:-1; background:var(--void-850);
  box-shadow:0 24px 60px -22px rgba(0,0,0,0.6);
  clip-path:polygon(
    calc(var(--c) + 0.41px) 1px,
    calc(100% - 1px) 1px,
    calc(100% - 1px) calc(100% - var(--c) - 0.41px),
    calc(100% - var(--c) - 0.41px) calc(100% - 1px),
    1px calc(100% - 1px),
    1px calc(var(--c) + 0.41px)
  ); }
.cs-card > *{ position:relative; z-index:1; }
[data-theme="paper"] .cs-card::after{ background:var(--line-strong); }
[data-theme="paper"] .cs-card::before{ background:var(--surface-raise,#fff); box-shadow:var(--shadow-paper); }

.cs-card__eye{ font-family:var(--font-mono); font-size:var(--t-mono-sm); line-height:1.4; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--ink-mute); }
.cs-card__eye::before{ content:"◈"; color:var(--accretion); margin-right:9px; font-size:0.95em; vertical-align:0.02em; }
.cs-card__head{ font-family:var(--font-sans); font-weight:var(--w-medium); font-size:clamp(2.5rem,3.6vw,3rem);
  line-height:1.06; letter-spacing:-0.02em; color:var(--ink); margin-top:var(--space-05); }
.cs-card__sub{ font-family:var(--font-sans); font-weight:var(--w-light); font-size:1.04rem; line-height:1.5;
  color:var(--gray-100); max-width:34ch; margin:var(--space-05) auto 0; }
/* the ONE marketing-scale CTA — 16px text, ~47px tall, chamfer (keeps .btn--primary) */
.cs-card__cta{ height:47px; padding:0 var(--space-06); font-size:1rem; margin-top:var(--space-06); --c:12px; }
.cs-card__cta svg{ width:16px; height:16px; }

@media (max-width:560px){
  .cs-card{ width:100%; }
  .cs-card__head{ font-size:clamp(2.1rem,9vw,2.6rem); }
  .cs-card__cta{ width:100%; }
}