/* ===== TOKENS ===== */
:root{
  /* Site-owned design tokens (NOT from the DS): fonts, spacing, radius, type, layout.
     Color tokens live in the [data-ds-theme="refresh"] block below. */
  --font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:40px;--s7:64px;--s8:80px; /* all steps land on the DS --space grid (4/8/12/16/24/40/64/80) */
  /* radius scale — names + values aligned to @electronx/design-system */
  --radius-sm:2px; --radius-base:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-2xl:16px; --radius-full:9999px;
  /* type scale — named line-height steps (no magic decimals downstream) */
  --lh-display:1.1; --lh-heading:1.25; --lh-body:1.5; --lh-reading:1.625; /* heading=DS tight, body=DS normal, reading=DS relaxed; display 1.1 is site-owned (no DS step) */
  --maxw:1480px; --topbar-h:60px; --sidebar-w:280px; --toc-w:220px;
  --content-max:760px;
}
/* ─────────────────────────────────────────────────────────────────────────────
   COLOR TOKENS — SNAPSHOT of @electronx/design-system "refresh" theme.
   Captured 2026-06-25 (DS commit 243a58b); re-synced 2026-07-08 to
   exi-design-system @ d0a8f80 (--bg + surfaces kept on the #151515 pure-gray ladder, see below). The DS is WIP / unpublished, so these
   values are NOT canonical — they mirror the DS for visual fidelity only, and are
   frozen on purpose (do not hand-sync to the moving DS).

   The site speaks only in the semantic aliases below (--bg, --fg, --accent, …);
   component CSS never references DS tokens directly. When @electronx/tokens ships
   to GAR, an engineer:
     1. imports '@electronx/tokens/css/refresh.css' — it defines --color-* under
        this same [data-ds-theme="refresh"] selector;
     2. replaces each literal value below with the var(--color-*) named in its
        comment (e.g. --bg: oklch(var(--color-surface-base));).
   Nothing else changes — these aliases are the only seam.
   See docs/pocv2-ds-alignment-plan.md.
   ───────────────────────────────────────────────────────────────────────────── */
:root[data-ds-theme="refresh"]{
  --bg:         #151515;                       /* electronx.com page bg — kept for parity (decision 2026-07-08); DS/Brand Guide canon is E-Black #131416 (surface-base / neutral-950) — deliberate override */
  --surface:    #1e1e1e;                       /* raised — pure-gray ladder on #151515 (deliberate override; DS surface-raised = neutral-900, slate-tinted) */
  --surface-2:  #2f2f2f;                       /* overlay — pure-gray ladder (deliberate override; DS surface-overlay = neutral-800) */
  --code:       #1e1e1e;                        /* = raised */
  --fg:         oklch(0.9827 0.0026 286.35);  /* ds: text-primary    (neutral-50)  */
  --fg-dim:     oklch(0.795 0.01 269.47);     /* ds: text-secondary  (neutral-300) */
  --fg-mute:    oklch(0.7 0.0128 269.47);     /* ds: text-muted      (neutral-400) */
  --line:       oklch(0.312 0.012 269.47);    /* ds: border — repointed up-ramp to neutral-700 so borders stay visible on overlay surfaces */
  --line-2:     oklch(0.45 0.0136 269.47);    /* ds: input (neutral-600) */
  --spark:      #1653f0;  /* ds: color.brand.spark / brand-accent-spark — byte-exact Brand Guide value (DS reconciled 2026-07-06; matches electronx.com) */
  --vivid:      #16f0f0;  /* ds: color.brand.vivid / brand-accent-vivid ("Vivid Blue") — byte-exact Brand Guide value (DS reconciled 2026-07-06) */
  --accent:     var(--spark);                 /* primary action fills / CTAs = brand spark */
  --accent-text:var(--vivid);                 /* accent text / links / active + structural highlights = brand vivid cyan (was blue-300) */
  --link:       var(--vivid);                 /* content links = brand vivid cyan */
  --data:       var(--vivid);                 /* data/numeric emphasis (same brand cyan) */
  --up:         oklch(0.7687 0.1904 124);     /* ds: trade-up        (lime-500)    */
  --down:       oklch(0.6668 0.1904 42);      /* ds: trade-down      (orange-500)  */
  --warn:       oklch(0.7878 0.163 66);       /* ds: status-warning (refresh = amber-400) — caution/important notes */
  --hover:      oklch(0.9827 0.0026 286.35 / 0.06); /* interaction hover + selected (nav) — dialed down from DS 12% (too light on this near-black theme) */
  --shadow:0 10px 28px -8px rgb(0 0 0 / .55), 0 2px 8px -2px rgb(0 0 0 / .4); /* ds: elevation-overlay */
}
/* ===== BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* themed scrollbars — dark, never default white — on INNER scroll areas only.
   The window scrollbar is left native: a styled WebKit scrollbar forces a space-reserving
   gutter, which makes the sticky header (and page) stop ~10px short of the right edge. */
.sidebar,.toc,.cmdk-results,pre.code,.table-scroll{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.sidebar::-webkit-scrollbar,.toc::-webkit-scrollbar,.cmdk-results::-webkit-scrollbar,pre.code::-webkit-scrollbar,.table-scroll::-webkit-scrollbar{width:10px;height:10px}
.sidebar::-webkit-scrollbar-track,.toc::-webkit-scrollbar-track,.cmdk-results::-webkit-scrollbar-track,pre.code::-webkit-scrollbar-track,.table-scroll::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb,.toc::-webkit-scrollbar-thumb,.cmdk-results::-webkit-scrollbar-thumb,pre.code::-webkit-scrollbar-thumb,.table-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:var(--radius-full);border:2px solid transparent;background-clip:padding-box}
.sidebar::-webkit-scrollbar-thumb:hover,.toc::-webkit-scrollbar-thumb:hover,.cmdk-results::-webkit-scrollbar-thumb:hover,pre.code::-webkit-scrollbar-thumb:hover,.table-scroll::-webkit-scrollbar-thumb:hover{background:var(--fg-mute);background-clip:padding-box}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background .25s ease,color .25s ease}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
/* in-copy links (prose, lists, table cells, FAQ answers): identify by a static underline, not color alone — nav/sidebar/toc/pager/cards/chips already have strong non-color affordances and are left as-is.
   :where() keeps specificity at (1,0,1)/(1,1,1) so the card-link exclusion below can win */
#view :where(p,li,dd,td,th,details.faq .body) a{text-decoration-line:underline;text-decoration-color:color-mix(in srgb,var(--link) 55%,transparent)}
#view :where(p,li,dd,td,th,details.faq .body) a:hover,#view :where(p,li,dd,td,th,details.faq .body) a:focus-visible{text-decoration-color:currentColor}
/* lane doc cards are <ul class="lane-docs"><li><a> inside #view — card links, not prose; keep them underline-free */
#view .lane-docs a{text-decoration-line:none}
.mono{font-family:var(--font-mono)}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-mute)}
/* shared micro-label recipe — individual rules below add only their variant: tag (.chip,.rel-tag:
   surface bg, radius-md), overlay pill (.vc-soon: translucent bg over imagery, radius-full),
   interactive pill (.gloss-jump a: hover states, larger hit area), demo badge (.gate-demo: accent),
   inline soon (.sidebar .soon: dense-row minimal) */
.chip,.rel-tag,.vc-soon,.gloss-jump a,.gate-demo,.sidebar .soon{font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}
h1{font-size:36px;font-weight:400;line-height:var(--lh-heading);margin:var(--s3) 0 var(--s5);color:var(--fg);text-wrap:balance}
h2{font-size:20px;font-weight:500;line-height:var(--lh-heading);margin:var(--s7) 0 var(--s4);color:var(--fg);text-wrap:balance}
h3{font-size:20px;font-weight:500;line-height:var(--lh-heading);margin:var(--s5) 0 var(--s2);color:var(--fg)}
p{margin:0 0 var(--s4);color:var(--fg-dim);font-size:16px;line-height:var(--lh-reading);text-wrap:pretty}
ul,ol{margin:0 0 var(--s4) var(--s5);color:var(--fg-dim);font-size:16px;line-height:var(--lh-reading)}
li{margin-bottom:6px}li::marker{color:var(--fg-mute)}
strong{color:var(--fg);font-weight:600}
.lead{font-size:16px;line-height:var(--lh-body);color:var(--fg-dim)}
.doc-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px var(--s5);margin:0 0 var(--s6);padding-bottom:var(--s3);border-bottom:1px solid var(--line);text-wrap:pretty}
.doc-meta .dm-tags{display:flex;flex-wrap:wrap;gap:6px}
.doc-meta .dm-by{font-size:14px;font-style:italic;color:var(--fg-mute)}
.doc-dek{font-size:clamp(18px,2.1vw,21px);font-weight:400;line-height:1.45;color:var(--fg-dim);margin:calc(-1 * var(--s1)) 0 var(--s5);max-width:60ch;text-wrap:pretty}
code.inline{font-family:var(--font-mono);font-size:.86em;color:var(--fg);
  background:color-mix(in srgb,var(--fg) 8%,transparent);padding:1px 5px;border-radius:var(--radius-base)}
table{border-collapse:collapse}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fadein{animation:fade .35s ease both}
/* hub landing: subtle staggered entrance */
.hub-enter .hero-pill{animation:fade .5s ease both}
.hub-enter .hub-hero h1{animation:fade .5s ease both}
.hub-enter .hero-find{animation:fade .5s ease both;animation-delay:.07s}
.hub-enter .lanes{animation:fade .5s ease both;animation-delay:.21s}
.hub-enter .cta-banner{animation:fade .5s ease both;animation-delay:.28s}
/* ===== CHROME ===== */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--s6);
  height:var(--topbar-h);padding:0 max(var(--s6),calc((100% - var(--maxw))/2));
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.brand{font-family:var(--font-mono);font-weight:500;font-size:16px;cursor:pointer;color:var(--fg);white-space:nowrap;display:inline-flex;align-items:center}
.brand .x{color:var(--accent-text)}
.brand:hover{text-decoration:none}
.brand-logo{height:40px;width:auto;display:block;fill:currentColor}
.footer-brand .brand-logo{height:44px}
.topnav{display:flex;gap:var(--s2);font-family:var(--font-body);font-size:14px;font-weight:400}
.topnav a{color:var(--fg-mute);padding:var(--s2) var(--s3);border-radius:var(--radius-md);cursor:pointer;
  transition:color .15s,background .15s}
.topnav a:hover,.topnav a.active{color:var(--fg);background:var(--hover);text-decoration:none}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
/* centered nav — brand left, nav optically centered, actions right (desktop) */
@media (min-width:1240px){
  .topbar .topnav{position:absolute;left:50%;transform:translateX(-50%)}
}
@media (max-width:1023px){ .topnav{display:none} }
.nav-toggle{display:none;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:50%;width:40px;height:40px;flex:none;color:var(--fg-dim);cursor:pointer;font-size:16px}
.nav-backdrop{display:none}
.search{display:inline-flex;align-items:center;justify-content:center;flex:none;
  color:var(--fg-dim);background:transparent;border:1px solid var(--line);border-radius:50%;
  width:40px;height:40px;padding:0;cursor:pointer;transition:border-color .15s,color .15s}
.search:hover{border-color:var(--line-2);color:var(--fg)}
.search>span:not(.search-icon){display:none}
.search-icon{opacity:.6;font-size:14px;display:inline-flex}
svg.ph{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex:none}
.video-ph svg.ph{width:1.25em;height:1.25em}
.search-kbd{margin-left:auto;font-size:12px;
  border:1px solid var(--line-2);border-radius:var(--radius-base);padding:1px 5px}
.hdr-btn.primary{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:var(--radius-lg);
  padding:7px 14px;font-size:14px;font-weight:500;white-space:nowrap;transition:filter .15s,transform .12s}
.hdr-btn.primary:hover{filter:brightness(1.08);text-decoration:none}
.hdr-btn.primary:active{transform:scale(.96)}

.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr var(--toc-w);
  padding-inline:max(var(--s6),calc((100% - var(--maxw))/2));min-height:calc(100vh - var(--topbar-h))}
/* must follow the .topbar/.shell base rules — same specificity, so source order decides */
@media (max-width:1023px){ .topbar,.shell{padding-inline:var(--s4)} }
.shell.hub{grid-template-columns:1fr}
.shell.hub .content{padding-inline:0}
.shell.hub #view{max-width:1180px;margin-inline:auto;width:100%;padding-inline:var(--s6)}
.sidebar{border-right:1px solid var(--line);padding:var(--s6) var(--s5) var(--s6) 0;position:sticky;
  top:var(--topbar-h);height:calc(100vh - var(--topbar-h) - var(--footer-overlap,0px));overflow-y:auto}
.shell.hub .toc{display:none}
@media (min-width:1024px){.shell.hub .sidebar{display:none}}
.drawer-pillars{display:none}
@media (max-width:1023px){.drawer-pillars{display:block;margin-bottom:var(--s5)}}
.drawer-footer{display:none}
@media (max-width:1023px){.drawer-footer{display:flex;flex-direction:column;gap:var(--s3);margin-top:auto;padding-top:var(--s5);border-top:1px solid var(--line)}}
/* a.drawer-launch selectors out-rank .sidebar a, which would otherwise mute the text and gray the hover */
.sidebar a.drawer-launch{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:var(--radius-lg);padding:11px 16px;font-size:14px;font-weight:500;text-decoration:none}
.sidebar a.drawer-launch:hover{background:var(--accent);color:#fff;filter:brightness(1.08);text-decoration:none}
.sidebar .group{margin-bottom:var(--s5)}
.sidebar .group>.eyebrow{display:block;margin-bottom:var(--s3);padding:0 var(--s2)}
.sidebar a{display:flex;align-items:center;justify-content:space-between;gap:6px;color:var(--fg-mute);
  font-size:14px;padding:6px var(--s2);border-radius:var(--radius-md);
  margin-bottom:2px;cursor:pointer;transition:color .14s,background .14s,font-weight .14s}
.sidebar a:hover{background:var(--hover);color:var(--fg);text-decoration:none}
.sidebar a.active{background:var(--hover);color:var(--accent-text);font-weight:500}
.sidebar .soon{border:1px solid var(--line-2);border-radius:var(--radius-base);padding:0 4px}
/* --footer-h (set by engine.js from the footer's measured height) pads the content column by the
   footer's height while the footer pulls itself up by the same amount: the sidebar/toc sticky range
   (their grid row) then reaches the document bottom, so the rails stay pinned while the footer
   slides over them instead of pushing them up. Net document height is unchanged. */
.content{padding:var(--s6) var(--s7) calc(var(--s6) + var(--footer-h,0px));width:100%;min-width:0}
/* one prose column everywhere: article children cap at the reading measure, while wide
   elements (scrollable tables, code blocks) may break out to the view's full 1120px */
#view{max-width:1120px}
.shell:not(.hub) #view>*{max-width:var(--content-max)}
.shell:not(.hub) #view>.table-scroll,.shell:not(.hub) #view>pre.code{max-width:none}
.toc{padding:var(--s6) var(--s4);position:sticky;top:var(--topbar-h);align-self:start;font-size:14px;max-height:calc(100vh - var(--topbar-h) - var(--footer-overlap,0px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.toc::-webkit-scrollbar{width:0;height:0;display:none}
.toc .eyebrow{display:block;margin-bottom:var(--s3)}
.toc a{display:block;color:var(--fg-mute);padding:3px 0 3px var(--s3);border-left:2px solid var(--line);
  margin-bottom:2px;font-size:14px;transition:color .12s,border-color .12s}
.toc a:hover,.toc a.active{color:var(--fg);border-left-color:var(--accent-text);text-decoration:none}
.toc a.lvl3{padding-left:var(--s5)}
.breadcrumb{display:flex;gap:6px;font-family:var(--font-mono);font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-mute);margin-bottom:var(--s3)}
.breadcrumb a{color:var(--fg-mute);cursor:pointer}.breadcrumb a:hover{color:var(--fg);text-decoration:none}
.breadcrumb .sep{opacity:.5}
.pager{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s8);
  padding-top:var(--s5);border-top:1px solid var(--line);max-width:var(--content-max)} /* width tracks #view */
.pager a{flex:1;display:flex;align-items:center;gap:var(--s3);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s4);cursor:pointer;
  transition:border-color .15s,background .15s}
.pager a:hover{border-color:var(--line-2);background:var(--surface);text-decoration:none}
.pager a.next{justify-content:flex-end;text-align:right}
.pager .pg-text{display:flex;flex-direction:column;min-width:0}
.pager .pg-arrow{flex:none;display:inline-flex;color:var(--fg-mute)}
.pager a:hover .pg-arrow,.pager a:focus-visible .pg-arrow{color:var(--fg)}
.pager .exi-chev{width:20px;height:20px}
.pager a.prev .exi-chev{transform:rotate(180deg)}
.pager .pg-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-mute);display:block;margin-bottom:4px}
.pager .pg-title{color:var(--fg);font-size:14px;font-weight:500}
.pager a.empty{visibility:hidden}
#shell.hub .pager{display:none}

@media(max-width:1180px){.shell{grid-template-columns:var(--sidebar-w) 1fr}.toc{display:none}}
@media(max-width:1023px){
  .shell{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .sidebar{position:fixed;top:var(--topbar-h);right:0;bottom:0;width:min(86vw,320px);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);z-index:60;box-shadow:var(--shadow);height:auto;display:flex;flex-direction:column;padding:var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom,0px))}
  .sidebar.open{transform:none}
  .nav-backdrop{display:block;position:fixed;inset:var(--topbar-h) 0 0 0;background:rgb(0 0 0 / .4);opacity:0;pointer-events:none;transition:opacity .25s;z-index:55}
  .nav-backdrop.show{opacity:1;pointer-events:auto}
  .search{min-width:0;width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
  .search span:not(.search-icon){display:none}
  .content{padding:var(--s5) 0 calc(var(--s5) + var(--footer-h,0px))}
  .shell.hub #view{padding-inline:0}
  .hdr-btn{display:none}
}
@media (pointer: coarse){
  .topnav a{padding:10px 12px}
  .nav-toggle{width:44px;height:44px}
  .search{width:44px;height:44px}
  .sidebar a{padding:10px var(--s2)}
  .footer-col a{padding:6px 0}
}
/* ===== COMPONENTS ===== */
/* hub landing */
.hero{position:relative;padding:var(--s8) 0 var(--s7);margin-bottom:var(--s7)}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px}
.hero .eyebrow::before{content:"";width:18px;height:1px;background:var(--accent-text)}
.hero h1{font-size:clamp(36px,5.4vw,60px);font-weight:400;line-height:var(--lh-display);
  max-width:18ch;margin:var(--s4) 0 var(--s4)}
.hero h1 em{font-style:normal;color:var(--accent-text)}
.hero p{font-size:16px;line-height:var(--lh-body);color:var(--fg-mute);max-width:56ch;margin-bottom:var(--s5)}
.hero-cta{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.btn-start{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:1px solid var(--accent);
  border-radius:var(--radius-lg);padding:11px 18px;font-size:14px;font-weight:500;cursor:pointer;
  transition:filter .15s,transform .12s,box-shadow .2s;box-shadow:0 4px 14px -5px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn-start:hover{filter:brightness(1.07);transform:translateY(-1px);text-decoration:none;
  box-shadow:0 9px 24px -7px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-start:active{transform:translateY(0)}
.btn-start .arr{transition:transform .2s}.btn-start:hover .arr,.btn-start:focus-visible .arr{transform:translateX(3px)}
.hero-cta .alt{font-size:14px;color:var(--fg-dim);cursor:pointer}
.hero-cta .alt:hover{color:var(--fg)}

/* coming-soon placeholder page (404-style, centered) */
.soon-page{max-width:560px;margin:0 auto;min-height:54vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:var(--s4);padding:var(--s8) var(--s4)}
.soon-page .soon-tag{font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-text)}
.soon-page h1{font-size:clamp(36px,5vw,48px);font-weight:400;line-height:var(--lh-display)}
.soon-page .soon-sub{font-size:16px;color:var(--fg-mute);line-height:var(--lh-body);max-width:44ch;margin:0;text-wrap:pretty}
.soon-back{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s2);
  font-size:14px;color:var(--accent-text);cursor:pointer}
.soon-back svg.ph{transition:transform .2s}.soon-back:hover svg.ph,.soon-back:focus-visible svg.ph{transform:translateX(-3px)}
/* isometric extrusion wireframe of the ElectronX X mark — hero for coming-soon pages */
.soon-art{width:clamp(190px,30vw,300px);height:clamp(190px,30vw,300px);margin-bottom:var(--s4);
  color:var(--accent-text)}
.exi-iso{width:100%;height:100%;overflow:visible}
.exi-iso use,.exi-iso line{fill:none;stroke:currentColor;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.exi-iso .exi-face{stroke-width:var(--fw,1.8);opacity:var(--fo,.95)}
.exi-iso .exi-back{stroke-width:var(--bw,1.4);opacity:var(--bo,.34)}
.exi-iso .exi-edges line{stroke-width:var(--ew,1.4);opacity:var(--eo,.4)}
/* ===== hub: search + task hero, pillar lanes with isometric solid marks ===== */
.hub-hero{padding:200px 0;text-align:center}
.hub-hero h1{font-size:clamp(40px,5.6vw,56px);font-weight:400;line-height:var(--lh-display);margin-inline:auto;text-align:center;text-wrap:balance}
.hub-hero h1 em{font-style:normal;color:var(--accent-text)}
.hub-hero .lead{font-size:16px;color:var(--fg-mute);max-width:62ch;line-height:var(--lh-body);margin:var(--s4) auto var(--s5)}
.hero-find{width:min(851px,100%);margin-inline:auto} /* pinned: fit-content tracked the chip row, which shrank when a chip was removed */
.hero-search{display:flex;align-items:center;gap:var(--s3);width:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-full);padding:13px 20px;cursor:text;color:var(--fg-mute);
  font-family:var(--font-body);font-size:14px;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.hero-search:hover{border-color:var(--line-2)}
.hero-search svg.ph{width:17px;height:17px;opacity:.7;flex:none}
.hero-search .hs-kbd{margin-left:auto;font-family:var(--font-mono);font-size:12px;border:1px solid var(--line-2);border-radius:var(--radius-md);padding:2px 7px}
.task-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin-top:var(--s4)}
.task-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--radius-full);
  padding:7px 15px;font-size:14px;color:var(--fg);text-decoration:none;transition:border-color .15s}
.task-chip:hover{border-color:var(--line-2);text-decoration:none}
.task-chip svg.ph{width:13px;height:13px;opacity:.55}
.lanes{display:flex;flex-direction:column;margin-top:var(--s7)}
.lane{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:start;
  padding:var(--s6) 0;border-top:1px solid var(--line)}
.lane:first-child{border-top:none;padding-top:0}
.lane-body{min-width:0}
.lane-mark{display:none}
.lane-mark .solid{width:100%;height:100%;overflow:visible}
.solid polygon{fill:var(--bg);stroke:currentColor;stroke-width:1;stroke-opacity:.85;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.solid line{fill:none;stroke:currentColor;stroke-width:1;stroke-opacity:.85;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
/* command palette */
.cmdk{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center}
.cmdk[hidden]{display:none}
.cmdk-backdrop{position:absolute;inset:0;background:rgb(0 0 0 / .42);backdrop-filter:blur(2px)}
.cmdk-panel{position:relative;margin-top:11vh;width:min(560px,92vw);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow);overflow:hidden;animation:cmdkIn .14s ease}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cmdk-top{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.cmdk-top svg.ph{width:18px;height:18px;color:var(--fg-dim);flex:none}
.cmdk-top input{flex:1;min-width:0;border:none;background:transparent;color:var(--fg);font:inherit;font-size:16px;outline:none}
.cmdk-top input::placeholder{color:var(--fg-mute)}
/* focus indicator lives on the search row's bottom border, not a ring hugging the borderless input */
.cmdk-top:focus-within{border-bottom-color:var(--accent-text)}
.cmdk-esc{font-family:var(--font-mono);font-size:12px;color:var(--fg-mute);border:1px solid var(--line-2);border-radius:var(--radius-md);padding:2px 6px}
.cmdk-results{list-style:none;margin:0;padding:6px;max-height:48vh;overflow:auto}
.cmdk-item{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:var(--radius-lg);cursor:pointer}
.cmdk-item.active{background:var(--hover)}
.ci-title{font-size:14px;color:var(--fg)}
.cmdk-item.active .ci-title{color:var(--accent-text)}
.ci-meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--fg-mute);white-space:nowrap}
.cmdk-none{padding:20px 12px;text-align:center;color:var(--fg-mute);font-size:14px}
body.cmdk-open{overflow:hidden}
.lane.is-soon .lane-mark{color:var(--fg-dim);opacity:.65}
.lane-title{text-decoration:none;display:inline-block}
.lane-title h2{font-size:20px;font-weight:400;line-height:var(--lh-heading);margin:0;color:var(--fg)}
.lane-title:hover h2,.lane-title:focus-visible h2{color:var(--accent-text)}
.lane-head p{font-size:16px;color:var(--fg-mute);margin:6px 0 var(--s4);max-width:64ch;line-height:var(--lh-body);text-wrap:pretty}
@media (min-width:961px){.lane-head p{white-space:nowrap;max-width:none}}
.lane-docs{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--s6)}
.lane-docs li{break-inside:avoid;margin-bottom:var(--s2)}
.lane-docs a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);min-width:0;
  text-decoration:none;padding:12px var(--s4);border-radius:var(--radius-lg);background:var(--surface);transition:background .15s}
.lane-docs a:hover{background:var(--hover)}
.lane-docs a:hover .ld-title,.lane-docs a:focus-visible .ld-title{color:var(--accent-text)}
.ld-title{font-size:16px;color:var(--fg);min-width:0;overflow-wrap:break-word}
.ld-title svg.ph{margin-right:6px;color:var(--accent-text);opacity:.8;vertical-align:-2px}
.lane-soon{display:inline-flex;align-items:center;gap:7px;font-size:14px;
  letter-spacing:.04em;color:var(--accent-text);text-decoration:none}
.lane-soon svg.ph{width:1em;height:1em;transition:transform .2s}
.lane-soon:hover svg.ph,.lane-soon:focus-visible svg.ph{transform:translateX(3px)}
@media(max-width:960px){
  .lane-docs{columns:1}
}
@media(max-width:720px){
  .lane{grid-template-columns:1fr;gap:var(--s3)}
  .lane-mark{width:48px;height:48px}
  .lane-head p{margin-bottom:var(--s3)}
}

.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:auto;padding-top:var(--s4)}
.chip{padding:3px 8px;border-radius:var(--radius-md);background:var(--surface-2);border:1px solid var(--line)}
.chip.accent{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent-text) 35%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
@media(prefers-reduced-motion:reduce){.btn-start:hover{transform:none}}

/* hub CTA banner — the one committed-color moment on the page */
.cta-banner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;
  background:linear-gradient(to bottom,rgb(0 0 0 / 0),rgb(0 0 0 / .12)),var(--accent);color:#fff;border-radius:var(--radius-2xl);padding:var(--s7);margin:var(--s8) 0 var(--s7)}
.cta-banner::after{content:"";position:absolute;inset:-.5px;border-radius:calc(var(--radius-2xl) + .5px);padding:1px;pointer-events:none;
  background:linear-gradient(to bottom,rgb(255 255 255 / .3),rgb(255 255 255 / 0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.cta-banner .cta-copy{min-width:0;max-width:52ch}
.cta-banner h2{color:#fff;margin:0 0 var(--s2);font-size:24px;font-weight:500}
.cta-banner p{color:var(--fg);margin:0;font-size:16px;line-height:var(--lh-body)}
.cta-actions{display:flex;gap:var(--s3);flex-wrap:wrap;flex-shrink:0}
.cta-btn{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-lg);padding:11px 18px;
  font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:filter .15s,background .15s,transform .12s}
.cta-btn.primary{background:#fff;color:var(--accent)}
.cta-btn.primary:hover{filter:brightness(.94);text-decoration:none}
.cta-btn.ghost{background:rgb(255 255 255 / .12);color:#fff;border:1px solid rgb(255 255 255 / .4)}
.cta-btn.ghost:hover{background:rgb(255 255 255 / .2);text-decoration:none}
.cta-btn:active{transform:scale(.97)}

/* hub footer */
.site-footer{margin-top:calc(-1 * var(--footer-h,0px));position:relative;background:var(--bg);
  padding:var(--s7) max(var(--s6),calc((100% - 1180px)/2)) var(--s5);border-top:1px solid var(--line)} /* full-bleed top border; inner content centered to the hub view's 1180px; margin/position/background pair with --footer-h (see .content) */
@media(max-width:1023px){.site-footer{padding-inline:var(--s4)}}
.footer-top{display:flex;justify-content:space-between;gap:var(--s7);flex-wrap:wrap;margin-bottom:var(--s8)}
.footer-brand{max-width:300px}
.footer-brand .brand{font-family:var(--font-mono);font-weight:500;font-size:16px;color:var(--fg)}
.footer-brand p{color:var(--fg-mute);font-size:14px;margin:var(--s3) 0 0;line-height:var(--lh-body)}
.footer-social{display:flex;gap:var(--s3);margin-top:var(--s4)}
.footer-social a{display:inline-flex;color:var(--fg-mute);transition:color .15s}
.footer-social a:hover{color:var(--fg);text-decoration:none}
.footer-social svg.ph{width:20px;height:20px}
.footer-cols{display:flex;gap:var(--s7);flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:var(--s2);min-width:150px}
.foot-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:var(--s1)}
.footer-col a{color:var(--fg-dim);font-size:14px;cursor:pointer}
.footer-col a:hover{color:var(--fg);text-decoration:none}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--s4) var(--s6);flex-wrap:wrap;
  font-size:12px;color:var(--fg-mute);line-height:var(--lh-body)}
.foot-disclaimer{font-size:12px;color:var(--fg-mute);line-height:var(--lh-body);margin:0 0 var(--s5);text-wrap:pretty}
.foot-legal{display:flex;gap:var(--s4);flex-wrap:wrap}
.foot-legal a{color:var(--fg-dim);cursor:pointer}
.foot-legal a:hover{color:var(--fg);text-decoration:none}
/* ===== product releases ===== */
/* type tag — Product carries the one accent; Platform/API stay neutral */
.rel-tag{display:inline-block;padding:3px 8px;border-radius:var(--radius-md);background:var(--surface-2);border:1px solid var(--line);white-space:nowrap}
/* releases feed (standalone page) */
.releases-head{margin-bottom:var(--s7)}
.releases-head h1{margin-bottom:var(--s3)}
.releases-head .lead{max-width:64ch}
.releases{display:flex;flex-direction:column}
.release{display:grid;grid-template-columns:140px 1fr;gap:var(--s6);align-items:start;
  padding:var(--s6) 0;border-top:1px solid var(--line)}
.release:first-child{border-top:none;padding-top:0}
.rel-date{font-family:var(--font-mono);font-size:14px;color:var(--fg-mute);font-variant-numeric:tabular-nums;padding-top:2px}
.rel-body{min-width:0}
.rel-body .wn-meta{margin-bottom:var(--s4)}
.rel-body h3{font-size:20px;font-weight:500;margin:var(--s2) 0;color:var(--fg)}
.rel-body p{margin:0 0 var(--s3);color:var(--fg-dim);max-width:72ch}
.rel-body .wn-cta{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--accent-text);cursor:pointer}
.rel-body .wn-cta svg.ph{width:14px;height:14px;transition:transform .2s}
.rel-body .wn-cta:hover svg.ph,.rel-body .wn-cta:focus-visible svg.ph{transform:translateX(3px)}
/* eyebrow-pill variant — centered announcement pill inside the hero, above the headline */
.hero-pill{display:inline-flex;align-items:center;gap:var(--s2);margin:0 0 var(--s5);max-width:100%;
  border:1px solid var(--line);border-radius:var(--radius-full);background:var(--surface);
  padding:4px 5px 4px 6px;font-size:14px;color:var(--fg-dim);transition:border-color .15s}
.hero-pill:hover{border-color:var(--line-2)}
.hp-main{min-width:0;display:inline-flex;align-items:center;gap:var(--s2);color:var(--fg-dim);text-decoration:none}
.hp-main:hover{text-decoration:none}
.hp-badge{flex:none;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--radius-full);
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);
  background:color-mix(in srgb,var(--accent-text) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent-text) 28%,transparent)}
.hp-bolt{display:inline-flex;color:var(--accent-text)}
.hp-bolt svg.ph{width:12px;height:12px}
.hp-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:2px}
.hp-main:hover .hp-text,.hp-main:focus-visible .hp-text{color:var(--fg)}
.hp-all{flex:none;display:inline-flex;align-items:center;gap:4px;text-decoration:none;
  font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-mute);border-radius:var(--radius-full);padding:5px 10px}
.hp-all svg.ph{width:13px;height:13px;transition:transform .2s}
.hp-all:hover{color:var(--fg);background:var(--hover);text-decoration:none}
.hp-all:hover svg.ph,.hp-all:focus-visible svg.ph{transform:translateX(2px)}
@media(max-width:600px){.cta-banner{padding:var(--s6) var(--s5)}.cta-actions{width:100%}.cta-actions .cta-btn{flex:1;justify-content:center}
  .release{grid-template-columns:1fr;gap:var(--s2)}.rel-date{padding-top:0}}

/* callouts */
.callout{border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:var(--s4) var(--s5);margin:var(--s5) 0;background:color-mix(in srgb,var(--accent-text) 5%,var(--surface))}
.callout .eyebrow{color:var(--accent-text);margin-bottom:var(--s2);display:block}
.callout p:last-child{margin:0}
.callout.important{border-color:color-mix(in srgb,var(--warn) 30%,var(--line));background:color-mix(in srgb,var(--warn) 6%,var(--surface))}
.callout.important .eyebrow{color:var(--warn)}
.callout.key{border-color:color-mix(in srgb,var(--data) 30%,var(--line));background:color-mix(in srgb,var(--data) 6%,var(--surface))}
.callout.key .eyebrow{color:color-mix(in srgb,var(--data) 70%,var(--fg))}

/* interactive contact panel */
.contact-panel{margin:var(--s6) 0}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
@media(max-width:520px){.contact-grid{grid-template-columns:1fr}}
.contact-action.ca-full{grid-column:1/-1}
.contact-action{position:relative;width:100%;display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);color:var(--fg);font:inherit;text-align:left;text-decoration:none;cursor:pointer;
  transition:border-color .18s,transform .14s cubic-bezier(.2,.7,.3,1),box-shadow .25s,background .18s}
.contact-action:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow);background:var(--surface-2);text-decoration:none}
.contact-action:active{transform:translateY(0)}
.contact-action:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.ca-chip{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-lg);color:var(--accent-text);background:transparent;border:1px solid var(--line);transition:border-color .18s,color .18s}
.contact-action:hover .ca-chip,.contact-action:focus-visible .ca-chip{border-color:var(--line-2)}
.ca-chip svg{width:19px;height:19px}
.ca-text{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.ca-label{font-size:14px;font-weight:600;color:var(--fg)}
.ca-sub{font-size:14px;color:var(--fg-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-arrow{margin-left:auto;flex:none;width:16px;height:16px;color:var(--fg-mute);opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s,color .18s}
.contact-action:hover .ca-arrow,.contact-action:focus-visible .ca-arrow{opacity:1;transform:translateX(0);color:var(--accent-text)}
.contact-foot{display:flex;align-items:center;gap:7px;margin:var(--s4) 0 0;font-size:14px;color:var(--fg-mute)}
.contact-foot svg{width:14px;height:14px;flex:none}


/* spec table */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s3) 0 var(--s5)}
.table-scroll table.spec{margin:0}
table.spec{width:100%;margin:var(--s3) 0 var(--s5);font-size:14px;table-layout:auto}
table.spec th,table.spec td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
/* on small screens auto table layout would crush many-column tables to fit instead of overflowing —
   a readable per-column minimum forces wide tables to actually scroll inside .table-scroll */
@media(max-width:720px){table.spec th,table.spec td{min-width:160px}}
table.spec th:first-child,table.spec td:first-child{min-width:10rem;overflow-wrap:normal;padding-right:var(--s4)}
table.spec th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}
/* row-header cells (<th scope="row">) read like the old bold <td> label: normal case, body size, not auto-bolded by the UA th default (an inner <strong>, where present, still renders bold) */
table.spec th[scope="row"]{font-size:14px;font-weight:400;text-align:left;text-transform:none;letter-spacing:normal;color:var(--fg)}
table.spec td{color:var(--fg-dim);font-variant-numeric:tabular-nums}
table.spec td:first-child{color:var(--fg)}
table.spec.nums td{font-variant-numeric:tabular-nums}
table.spec.nums th,table.spec.nums td{padding:10px var(--s3);white-space:nowrap}
table.spec.nums th:first-child,table.spec.nums td:first-child{min-width:0}
table.spec caption{caption-side:top;text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mute);padding-bottom:var(--s3);margin-bottom:var(--s3);border-bottom:1px solid var(--line)}
table.spec tr.exi td,table.spec tr.exi th{background:color-mix(in srgb,var(--accent-text) 12%,transparent)}
table.spec tr.exi th:first-child{font-weight:500}
table.spec tr.total td,table.spec tr.total th{font-weight:600;color:var(--fg);border-top:2px solid var(--line-2)}
table.spec tr.total:last-child td,table.spec tr.total:last-child th{color:var(--accent-text)}
.table-scroll + .table-scroll{margin-top:var(--s7)}

/* formula block */
.formula{font-family:var(--font-mono);font-size:14px;color:var(--fg);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s3) var(--s4);margin:var(--s3) 0;text-align:center}

/* code block */
pre.code{position:relative;background:var(--code);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:var(--s5);padding-top:var(--s6);overflow-x:auto;font-family:var(--font-mono);font-size:14px;
  line-height:var(--lh-reading);color:var(--fg-dim);margin:var(--s3) 0 var(--s5)}
pre.code .copy{position:absolute;top:var(--s2);right:var(--s3);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-mute);border:1px solid var(--line-2);border-radius:var(--radius-base);
  padding:2px 7px;cursor:pointer}
pre.code .copy:hover{color:var(--fg);border-color:var(--fg-mute)}
.fix-key{color:var(--accent-text)}.fix-sep{color:var(--fg-mute)}.fix-val{color:var(--fg)}

/* payoff svg */
.figure{border:1px solid var(--line);border-radius:var(--radius-xl);padding:var(--s5);margin:var(--s6) 0;background:var(--surface)}
.figure img{display:block;max-width:100%;max-height:540px;height:auto;margin-inline:auto;border-radius:var(--radius-md)}
.figure figcaption{font-family:var(--font-mono);font-size:12px;color:var(--fg-mute);margin-top:var(--s3);letter-spacing:.03em}
svg.payoff .grid{stroke:var(--line)}svg.payoff .axis{stroke:var(--line-2)}svg.payoff .zero{stroke:var(--fg-mute)}
svg.payoff .line{stroke:var(--data);fill:none}svg.payoff .bound{stroke:var(--accent-text)}
svg.payoff .dot{fill:var(--data)}svg.payoff .lbl{fill:var(--fg-mute)}svg.payoff .blbl{fill:var(--accent-text)}
svg.payoff stop{stop-color:var(--data)} /* var() works in CSS, not in the SVG attribute */

/* faq */
.topictabs{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s4) 0 var(--s6)}
details.faq{border:1px solid var(--line);border-radius:var(--radius-xl);margin:var(--s2) 0;background:var(--surface);overflow:hidden}
details.faq[open]{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
details.faq summary{cursor:pointer;list-style:none;padding:var(--s4) var(--s5);font-weight:500;font-size:16px;
  display:flex;justify-content:space-between;gap:var(--s4);color:var(--fg)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";flex:none;width:20px;height:20px;background:currentColor;color:var(--fg-mute);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s,color .15s}
details.faq[open] summary::after{transform:rotate(180deg);color:var(--accent-text)}
details.faq .body,details.faq > p{padding:0 var(--s5) var(--s5);color:var(--fg-dim);font-size:16px;line-height:var(--lh-reading)}

/* video */
.video-ph{display:flex;align-items:center;justify-content:center;gap:var(--s3);aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:var(--radius-xl);color:var(--fg-mute);font-family:var(--font-mono);font-size:14px;
  background:var(--surface);margin:var(--s4) 0}
.videogrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin:var(--s4) 0 var(--s6)}
@media (max-width:560px){.videogrid{grid-template-columns:1fr}}
.videocard{border:1px solid var(--line);border-radius:var(--radius-xl);padding:0;overflow:hidden;background:var(--surface);cursor:pointer;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s,transform .15s}
.videocard:hover{border-color:var(--line-2);box-shadow:var(--shadow);text-decoration:none;transform:translateY(-2px)}
.videocard:active{transform:scale(.985)}
.videocard .thumb{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border-bottom:1px solid var(--line)}
.vc-soon{position:absolute;top:8px;right:8px;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--line-2);border-radius:var(--radius-full);padding:3px 8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.videocard .thumb-play{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--line-2);color:var(--fg);transition:transform .18s cubic-bezier(.2,0,0,1),background .15s,border-color .15s}
.videocard:hover .thumb-play,.videocard:focus-visible .thumb-play{transform:scale(1.08);background:var(--accent);border-color:var(--accent);color:#fff}
.videocard .thumb-play svg{width:18px;height:18px;margin-left:2px}
.videocard .num{font-family:var(--font-mono);font-size:12px;color:var(--accent-text);margin:var(--s3) var(--s4) 0}
.videocard .vc-title{margin:var(--s2) var(--s4) var(--s4);color:var(--fg)}

/* article-pillar index reuses the product-releases list layout (see renderPillarIndex) */
/* article pages inside an index pillar drop the left tree nav for a back-to-pillar link */
.sidebar .pill-back{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;font-size:14px;color:var(--fg-dim);background:none;padding:0;margin-bottom:var(--s4);cursor:pointer}
.sidebar .pill-back:hover{color:var(--fg);background:none;text-decoration:none}
.sidebar .pill-back svg.ph{width:16px;height:16px;flex:none}

/* glossary */
.gloss-jump{position:sticky;top:var(--topbar-h);background:var(--bg);display:flex;flex-wrap:wrap;gap:6px;
  padding:var(--s3) 0;margin-bottom:var(--s4);border-bottom:1px solid var(--line);z-index:5}
.gloss-jump a{border:1px solid var(--line);border-radius:var(--radius-full);padding:4px 12px;cursor:pointer}
.gloss-jump a:hover{color:var(--fg);border-color:var(--line-2);text-decoration:none}
.gloss-group{margin:0}
.gloss-group + .gloss-group{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--line)}
.gloss-group h2{margin-top:0}
dl.gloss dt{font-weight:600;color:var(--fg);margin-top:var(--s4)}
dl.gloss dd{margin:2px 0 0;color:var(--fg-dim);font-size:16px;line-height:var(--lh-reading)}

/* docs tag + downloads */
.dl-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:var(--radius-lg);
  padding:7px 14px;font-size:14px;font-weight:500;text-decoration:none;margin:var(--s2) 0;transition:filter .15s,transform .12s} /* labels are long — must wrap on small screens */
.dl-btn:hover{filter:brightness(1.08);text-decoration:none}
.dl-btn:active{transform:scale(.96)}
/* ===== POLISH ===== */
/* anchor jumps (TOC, glossary, in-page links) clear the sticky top bar */
h2,h3{scroll-margin-top:calc(var(--topbar-h) + var(--s5))}
.gloss-group h2{scroll-margin-top:calc(var(--topbar-h) + var(--s8))}
.head-anchor{position:relative;margin-left:.35em;font-weight:400;text-decoration:none;color:var(--fg-mute);opacity:0;cursor:pointer;user-select:none;transition:opacity .15s,color .15s}
#view h2:hover>.head-anchor,#view h3:hover>.head-anchor,.head-anchor:focus-visible{opacity:.55}
.head-anchor:hover{opacity:1;color:var(--accent-text);text-decoration:none}
.head-anchor.copied::after{content:"Copied";position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--fg);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:2px 7px;white-space:nowrap;pointer-events:none}
/* text selection in the brand accent */
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
/* keyboard focus rings — tabindex="-1" targets (programmatic focus only, e.g. #content after routing) are excluded: they're not Tab-reachable and don't need a visible ring */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:var(--radius-base)}
[tabindex="-1"]:focus{outline:none} /* suppress the UA default too, not just our ring */
summary{outline:none}
/* details.faq clips overflow (rounded corners), which would swallow an outside ring — draw it inset */
details.faq summary:focus-visible{outline-offset:-2px}
/* FAQ opens with a soft reveal; close stays instant (subtle exit) */
details.faq[open] .body,details.faq[open] > p{animation:faqreveal .28s cubic-bezier(.2,0,0,1)}
@keyframes faqreveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* subtle row hover on dense tables */
table.spec tbody tr{transition:background .12s}
table.spec tbody tr:hover td,table.spec tbody tr:hover th{background:color-mix(in srgb,var(--fg) 4%,transparent)}
/* copy-button press feedback */
pre.code .copy{transition:color .12s,border-color .12s,transform .1s}
pre.code .copy:active{transform:scale(.94)}
/* ===== responsive refinements ===== */
@media(max-width:640px){
  .hero{padding:var(--s7) 0 var(--s6)}
  .hub-hero{padding:var(--s7) 0}
  .lanes{margin-top:var(--s6)}
  h2{margin-top:var(--s6)}
  .footer-top,.footer-cols{gap:var(--s5)}
}
@media(max-width:520px){
  .pager{flex-direction:column;gap:var(--s3)}
  .pager a.next{text-align:left}
  .pager a.empty{display:none}
}
/* honor reduced-motion preference */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* demo content gate (pages with gated:true) */
.gate-fade{position:relative;max-height:320px;overflow:hidden}
.gate-fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.gate{margin-top:var(--s5);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);border:1px solid var(--line);border-radius:var(--radius-2xl);background:var(--surface);padding:var(--s7) var(--s5)}
.gate-demo{color:var(--accent-text);border:1px solid color-mix(in srgb,var(--accent-text) 35%,transparent);border-radius:var(--radius-full);padding:3px 10px}
.gate-lock{width:44px;height:44px;display:grid;place-items:center;color:var(--accent-text)}
.gate-lock svg.ph{width:28px;height:28px}
.gate h2{margin:0;font-size:20px;font-weight:500;color:var(--fg)}
.gate p{margin:0;color:var(--fg-mute);font-size:16px;max-width:46ch}
.gate-btn{margin-top:var(--s2);display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:var(--radius-lg);padding:10px 20px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:filter .15s,transform .12s}
.gate-btn:hover{filter:brightness(1.08)}
.gate-btn:active{transform:scale(.97)}
.gate-note{font-size:14px;color:var(--fg-mute);opacity:.85}