/* GENERATED, do not edit. Regenerate with:
     WRITE_WEB_TOKENS=1 flutter test test/tools/generate_web_ds_home_test.dart
   (run from client/brilliant).

   Source of truth: brilliant-platform "Brilliant Web/Styles/default.ds"
   (the marketing DS), resolved through the real DSL pipeline. SCOPED to
   the v2 home: HomeV3Page sets data-web-ds="home" on <html> while
   mounted. Every other page keeps tokens.css (the app seed). */
:root[data-web-ds="home"] {
  --color-surface: #FEFEFE;
  --color-surface-container: #F2F2F3;
  --color-surface-container-high: #E9E9EB;
  --color-on-surface: #1C1C1E;
  --color-surface-hover: #EEEEF0;
  --color-surface-pressed: #E3E3E6;
  --color-surface-selected: #E5E5EA;
  --color-on-surface-selected: #1C1C1E;
  --color-outline: #D1D1D6;
  --color-outline-variant: #E5E5EA;
  --color-text-primary: #191C20;
  --color-text-secondary: #757679;
  --color-text-disabled: #A2A4A5;
  --color-text-display: #005FC0;
  --color-text-display-alt: #C50054;
  --color-primary: #0080FF;
  --color-on-primary: #F8F8F8;
  --color-primary-container: #F2F5FA;
  --color-secondary: #FF3377;
  --color-on-secondary: #F8F8F8;
  --color-secondary-container: #FBF3F4;
  --color-tertiary: #FF9900;
  --color-on-tertiary: #F8F8F8;
  --color-tertiary-container: #F9F4EF;
  --color-quaternary: #FFDD00;
  --color-on-quaternary: #292929;
  --color-quaternary-container: #F8F5E9;
  --color-success: #00C950;
  --color-on-success: #F8F8F8;
  --color-success-container: #F1F7F2;
  --color-error: #FB2C36;
  --color-on-error: #F8F8F8;
  --color-error-container: #FBF3F2;
  --color-warning: #FF6900;
  --color-on-warning: #292929;
  --color-warning-container: #FAF3F1;
  --color-info: #2B7FFF;
  --color-on-info: #F8F8F8;
  --color-info-container: #F2F5FA;
  --color-shadow: #1D1D1D;
  --color-glow: #F8F8F8;
  --brand-primary: #0080FF;
  --brand-secondary: #FF3377;
  --brand-tertiary: #FF9900;
  --brand-quaternary: #FFDD00;
  --neutral-intense: #292929;
  --neutral-hint: #F8F8F8;
}

:root[data-web-ds="home"].dark {
  --color-surface: #171717;
  --color-surface-container: #222223;
  --color-surface-container-high: #2C2C2E;
  --color-on-surface: #EDEDED;
  --color-surface-hover: #262628;
  --color-surface-pressed: #313133;
  --color-surface-selected: #2C2C2E;
  --color-on-surface-selected: #FFFFFF;
  --color-outline: #3A3A3C;
  --color-outline-variant: #2A2A2B;
  --color-text-primary: #E1E2E9;
  --color-text-secondary: #909195;
  --color-text-disabled: #68686B;
  --color-text-display: #98C0F5;
  --color-text-display-alt: #FAAAB8;
  --color-primary: #0080FF;
  --color-on-primary: #F8F8F8;
  --color-primary-container: #00295B;
  --color-secondary: #FF3377;
  --color-on-secondary: #F8F8F8;
  --color-secondary-container: #590022;
  --color-tertiary: #FF9900;
  --color-on-tertiary: #F8F8F8;
  --color-tertiary-container: #492800;
  --color-quaternary: #FFDD00;
  --color-on-quaternary: #292929;
  --color-quaternary-container: #403600;
  --color-success: #00C950;
  --color-on-success: #F8F8F8;
  --color-success-container: #003B12;
  --color-error: #FB2C36;
  --color-on-error: #F8F8F8;
  --color-error-container: #590007;
  --color-warning: #FF6900;
  --color-on-warning: #292929;
  --color-warning-container: #501C00;
  --color-info: #2B7FFF;
  --color-on-info: #F8F8F8;
  --color-info-container: #032760;
  --color-shadow: #1D1D1D;
  --color-glow: #F8F8F8;
  --brand-primary: #0080FF;
  --brand-secondary: #FF3377;
  --brand-tertiary: #FF9900;
  --brand-quaternary: #FFDD00;
  --neutral-intense: #F8F8F8;
  --neutral-hint: #292929;
}

/* The docs studio (canvas 'Web/Docs' in brilliant-platform, approved by Ami
   11-06): docs home ae60808e596226d0, section landing 8eec76c0ed5b0c89,
   article eb96e2c1c23424d6, article blocks a400a9fb7369161a, kit
   3a1898e31e271cc5. Every colour and measure the shell paints lives in the
   --d-* tokens below, so the studio polish pass tunes one block. Light values
   are the board's; dark values follow the marketing DS (web-ds-home.css). */

.docs-ui {
  --d-font: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --d-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --d-bg: #fafafb;
  --d-raised: #ffffff;
  --d-hair: #e3e5ea;
  --d-hair-strong: #d5d8de;
  --d-ink: #0e1015; /* display titles */
  --d-ink-2: #191c20; /* color.text.primary: headings, active rows */
  --d-body: #3b4150; /* article body, card text */
  --d-lead: #4a5160; /* leads, sidebar rows */
  --d-muted: #5a6070; /* counts, breadcrumb, search */
  --d-faint: #9aa0ac; /* breadcrumb caret */
  --d-chip: #f2f3f5; /* the ⌘K chip, the menu card */
  --d-hover: #eef0f3;
  --d-link: #0091ff;
  --d-feature-bg: #101218; /* the dark "Start here" card */
  --d-feature-ink: #ffffff;
  --d-feature-lead: #c9cdd6;
  --d-search-shadow: 0 8px 24px rgba(26, 22, 48, 0.06);

  /* color.web.dark.ground, .raised, .text, .text.muted: one value in both
     themes, so the dark block below does not override them. */
  --d-code-bg: #0e1015;
  --d-code-head: #1c1f27;
  --d-code-ink: #f5f5f7;
  --d-code-muted: #a9afbc;

  --d-note-bg: #eef4ff;
  --d-note-hair: #9dbdf5;
  --d-note-icon: #2f6bd8;
  --d-note-title: #1f4e9e;
  --d-note-ink: #1f2f4e;
  --d-caution-bg: #fff7e8;
  --d-caution-hair: #f0c774;
  --d-caution-icon: #a35f00;
  --d-caution-title: #6b4100;
  --d-caution-ink: #4a3a1c;

  /* Article blocks of the docs content rollout (Web/Components DocFigure,
     DocStep, DocKeyRow, DocTableRow; bar: Web/Docs/Import). */
  --d-block-ink: #191c20; /* step and key titles, table heads and first column */
  --d-block-text: #757679; /* step body, key text, table cells, captions */
  --d-block-hair: #e3e5ea; /* figure and table frames */
  --d-block-rule: #e5e5ea; /* step rail, table row rules */
  --d-block-head: #f2f2f3; /* table head */
  --d-block-bg: #ffffff; /* table body */
  --d-step-num: #191c20;
  --d-step-num-ink: #fefefe;
  --d-key-dot: #0080ff;
  --d-key-dot-ink: #f8f8f8;

  /* Layout: the board's 1440 frame. Home and section content sit on a 1080
     column (180 margins at 1440); the article column is 720 beside a 200
     "On this page" rail, 64 apart, under a 280 sidebar. */
  --d-content: 1080px;
  --d-gutter: max(20px, calc((100vw - var(--d-content)) / 2));
  --d-sidebar: 280px;
  --d-main-pad: clamp(24px, 6.7vw, 96px);
  --d-article: 720px;
  --d-rail: 200px;
  --d-rail-gap: 64px;
  --d-sticky-top: 94px; /* the 70 nav + 24 */

  font-family: var(--d-font);
  background: var(--d-bg);
  color: var(--d-body);
  width: 100%;
}

:root.dark .docs-ui {
  --d-bg: #171717;
  --d-raised: #1f1f20;
  --d-hair: #2a2a2b;
  --d-hair-strong: #3a3a3c;
  --d-ink: #f1f2f6;
  --d-ink-2: #e1e2e9;
  --d-body: #c5c7ce;
  --d-lead: #aeb1b9;
  --d-muted: #909195;
  --d-faint: #6b6d72;
  --d-chip: #2a2a2b;
  --d-hover: #26272a;
  --d-link: #4da3ff;
  --d-feature-bg: #f1f2f6;
  --d-feature-ink: #101218;
  --d-feature-lead: #3b4150;
  --d-search-shadow: none;
  --d-note-bg: #14213a;
  --d-note-hair: #2b4a80;
  --d-note-icon: #7aa7f5;
  --d-note-title: #a9c6fa;
  --d-note-ink: #d3def3;
  --d-caution-bg: #2b2112;
  --d-caution-hair: #6b4f1c;
  --d-caution-icon: #f0b44a;
  --d-caution-title: #f5cf88;
  --d-caution-ink: #ecdcc0;
  --d-block-ink: #e1e2e9;
  --d-block-text: #a6a8ae;
  --d-block-hair: #2f2f31;
  --d-block-rule: #2a2a2b;
  --d-block-head: #232325;
  --d-block-bg: #1b1b1c;
  --d-step-num: #e1e2e9;
  --d-step-num-ink: #101218;
  --d-key-dot: #4da3ff;
  --d-key-dot-ink: #0b0c10;
}

.docs-ui a {
  text-decoration: none;
}
.docs-ui :focus-visible {
  outline: 2px solid var(--d-link);
  outline-offset: 2px;
}

/* ── Search box (home 640 x 52, sidebar and menu 38 tall) ─────────────── */
.docs-search {
  position: relative;
}
.docs-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--d-raised);
  box-shadow: inset 0 0 0 1px var(--d-hair);
  color: var(--d-muted);
  cursor: text;
}
.docs-search-box:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--d-link);
}
.docs-search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: 500 14px/1.36 var(--d-font);
  color: var(--d-ink-2);
}
.docs-search-box input::-moz-placeholder {
  color: var(--d-muted);
  opacity: 1;
}
.docs-search-box input::placeholder {
  color: var(--d-muted);
  opacity: 1;
}
.docs-search-box input:focus-visible {
  outline: none;
}
.docs-kbd {
  flex: none;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--d-chip);
  font: 500 12px/16px var(--d-font);
  color: var(--d-muted);
}
.docs-search--lg .docs-search-box {
  height: 52px;
  gap: 12px;
  padding: 0 18px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--d-hair-strong), var(--d-search-shadow);
}
.docs-search--lg .docs-search-box:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--d-link), var(--d-search-shadow);
}
.docs-search--lg input {
  font-size: 16px;
}
.docs-search--lg .docs-kbd {
  padding: 3px 8px;
  font-size: 13px;
  line-height: 18px;
}
.docs-search-results {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: var(--d-raised);
  box-shadow: inset 0 0 0 1px var(--d-hair), 0 16px 40px rgba(29, 29, 29, 0.12);
}
.docs-search-result {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
}
.docs-search-result[aria-selected="true"],
.docs-search-result:hover {
  background: var(--d-hover);
}
.docs-search-result-title {
  display: block;
  font: 600 14px/1.36 var(--d-font);
  color: var(--d-ink-2);
}
.docs-search-result-meta {
  display: block;
  margin-top: 2px;
  font: 400 13px/1.45 var(--d-font);
  color: var(--d-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docs-search-empty {
  padding: 10px;
  font: 400 14px/1.4 var(--d-font);
  color: var(--d-muted);
}

/* ── Docs home (board ae60808e596226d0) ────────────────────────────────── */
.docs-home {
  padding: 96px var(--d-gutter) 128px;
}
.docs-home-title {
  margin: 0;
  font: 800 clamp(44px, calc(44px + 20 * (100vw - 390px) / 1050), 64px) / 1.05 var(--d-font);
  letter-spacing: -0.025em;
  color: var(--d-ink);
}
.docs-home-lead {
  margin: 24px 0 0;
  font: 400 clamp(17px, calc(17px + 3 * (100vw - 390px) / 1050), 20px) / 1.5 var(--d-font);
  color: var(--d-body);
}
.docs-home-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
.docs-home-tools .docs-search {
  flex: 0 1 640px;
  min-width: 0;
}
.docs-home-tools .docs-view-switch {
  margin-left: auto;
}

/* The two views: both always rendered (every page link stays in the DOM for
   crawlers), the hidden one visually hidden. html[data-docs-view] is set before
   first paint by src/index.html, so a List visitor never sees Cards first. */
.docs-view-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
:root:not([data-docs-view="list"]) .docs-view-list,
:root[data-docs-view="list"] .docs-view-cards {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The View switch: the app's SegmentedControl (client/brilliant/lib/chrome/
   segmented_control.dart, Normal density) with the assets panel's grid/list
   glyphs: a 52 x 26 well (ink 5%, radius 8, inset 2), the active segment a
   raised white pill (radius 6, y1 blur2 shadow), 14 glyphs. */
.docs-view-switch {
  position: relative;
  display: inline-flex;
  flex: none;
  width: 52px;
  height: 26px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(16, 18, 24, 0.05);
}
:root.dark .docs-view-switch {
  background: rgba(255, 255, 255, 0.07);
}
.docs-view-switch-pill {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 22px;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 150ms ease-out;
}
:root.dark .docs-view-switch-pill {
  background: #3a3a3c;
}
:root[data-docs-view="list"] .docs-view-switch-pill {
  transform: translateX(24px);
}
@media (prefers-reduced-motion: reduce) {
  .docs-view-switch-pill {
    transition: none;
  }
}
.docs-view-switch button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--d-muted);
  cursor: pointer;
}
.docs-view-switch button[aria-pressed="true"] {
  color: var(--d-ink-2);
}

.docs-group {
  margin-top: 48px;
}
.docs-group:first-child {
  margin-top: 0;
}
.docs-group-title {
  margin: 0 0 20px;
  font: 700 24px/1.38 var(--d-font);
  letter-spacing: -0.4px;
  color: var(--d-ink-2);
}
.docs-home-body {
  position: relative;
  margin-top: 64px;
}
.docs-start {
  margin: 0 0 96px;
}
.docs-start + .docs-group,
.docs-view-list > .docs-group:first-child {
  margin-top: 0;
}
.docs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.docs-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 136px;
  padding: 24px;
  border-radius: 20px;
  background: var(--d-raised);
  box-shadow: inset 0 0 0 1px var(--d-hair);
  transition: box-shadow 150ms ease;
}
.docs-card:hover {
  box-shadow: inset 0 0 0 1px var(--d-hair-strong), 0 6px 20px rgba(26, 22, 48, 0.06);
}
.docs-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.docs-card-title {
  margin: 0;
  font: 700 18px/1.39 var(--d-font);
  color: var(--d-ink-2);
}
.docs-card-count {
  flex: none;
  font: 500 13px/1.38 var(--d-font);
  color: var(--d-muted);
}
.docs-card-text {
  margin: 0;
  font: 400 15px/1.5 var(--d-font);
  color: var(--d-body);
}
.docs-card--start {
  gap: 10px;
  min-height: 184px;
}
.docs-card-foot {
  margin-top: auto;
  font: 600 13px/1.38 var(--d-font);
  color: var(--d-link);
}
.docs-card--feature {
  background: var(--d-feature-bg);
  box-shadow: none;
}
.docs-card--feature:hover {
  box-shadow: 0 6px 20px rgba(26, 22, 48, 0.16);
}
.docs-card--feature .docs-card-title,
.docs-card--feature .docs-card-foot {
  color: var(--d-feature-ink);
}
.docs-card--feature .docs-card-text {
  color: var(--d-feature-lead);
}

/* List view: every page, grouped by section, one line each with its summary. */
.docs-list-section {
  margin-bottom: 32px;
}
.docs-list-head {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
  font: 700 16px/1.38 var(--d-font);
  color: var(--d-ink-2);
}
.docs-list-head:hover {
  color: var(--d-link);
}
.docs-list-head span {
  font-weight: 500;
  color: var(--d-muted);
}
.docs-list-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--d-hair);
}
.docs-list-row {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--d-hair);
}
.docs-list-row:hover .docs-list-title {
  color: var(--d-link);
}
.docs-list-title {
  font: 500 15px/1.45 var(--d-font);
  color: var(--d-ink-2);
}
.docs-list-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 15px/1.45 var(--d-font);
  color: var(--d-muted);
}
@media (max-width: 640px) {
  .docs-home {
    padding-top: 56px;
    padding-bottom: 80px;
  }
  .docs-home-body {
    margin-top: 40px;
  }
  .docs-start {
    margin: 0 0 64px;
  }
  .docs-list-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ── Sidebar + main (section landing and article) ─────────────────────── */
.docs-layout {
  display: flex;
  align-items: stretch;
}
.docs-sidebar {
  flex: none;
  width: var(--d-sidebar);
  border-right: 1px solid var(--d-hair);
}
.docs-sidebar-inner {
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Sidebar (Web/Rethink, Docs sidebar N1, board f1a737d3e3f54f3f): one left
   edge. Search icon, group labels and section text sit at x=12 in the 240
   column, the guide on x=12, page text at x=24 (12 + 3 + 1px guide + 8). No
   state moves the text edge: hover and current only change colour, weight
   and wash. */
.docs-ui {
  --d-nav-hover: #f2f3f5;
  --d-nav-active: #eef0f3;
}
:root.dark .docs-ui {
  --d-nav-hover: #26272a;
  --d-nav-active: #2a2a2b;
}
.docs-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.docs-sidebar .docs-search-box {
  height: 32px;
  padding: 0 8px 0 12px;
  border-radius: 8px;
}
.docs-sidebar-group,
.docs-sidebar-group:first-of-type {
  margin: 0;
}
.docs-sidebar-group-title {
  display: flex;
  align-items: center;
  height: 24px;
  margin: 0;
  padding: 0 12px;
  font: 500 12px/16px var(--d-font);
  color: var(--d-muted);
}
.docs-sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.docs-sidebar-section {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 8px;
  font: 500 14px/19px var(--d-font);
  color: var(--d-lead);
}
.docs-sidebar-section:hover {
  color: var(--d-ink-2);
  background: var(--d-nav-hover);
}
.docs-sidebar-section[data-current="true"] {
  font-weight: 700;
  color: var(--d-ink-2);
}
.docs-sidebar-section[aria-current="page"],
.docs-sidebar-section[aria-current="page"]:hover {
  background: var(--d-nav-active);
}
.docs-sidebar-section > span {
  flex: 1;
  min-width: 0;
}
/* Scoped like the > span rule above, which would otherwise give the caret
   flex: 1 too and split the row in half. */
.docs-sidebar-section > .docs-sidebar-caret {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--d-faint);
}
.docs-sidebar-section[data-current="true"] .docs-sidebar-caret {
  color: var(--d-muted);
}
/* ul.docs-sidebar-pages outranks the .docs-sidebar ul reset, no !important. */
.docs-sidebar ul.docs-sidebar-pages {
  display: flex;
  flex-direction: column;
  margin: 0 0 0 12px;
  padding: 0 0 0 3px;
  border-left: 1px solid var(--d-hair);
}
.docs-sidebar-page {
  display: block;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 8px;
  font: 400 14px/19px var(--d-font);
  color: var(--d-lead);
}
.docs-sidebar-page:hover {
  color: var(--d-ink-2);
  background: var(--d-nav-hover);
}
.docs-sidebar-page[aria-current="page"],
.docs-sidebar-page[aria-current="page"]:hover {
  font-weight: 500;
  color: var(--d-ink-2);
  background: var(--d-nav-active);
}
.docs-main {
  flex: 1;
  min-width: 0;
  padding: 64px var(--d-main-pad) 128px;
}
.docs-mobile-nav {
  display: none;
}
@media (max-width: 767px) {
  .docs-sidebar {
    display: none;
  }
  .docs-mobile-nav {
    display: block;
  }
  .docs-main {
    padding: 24px 20px 80px;
  }
}

.docs-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font: 500 14px/1.36 var(--d-font);
  color: var(--d-muted);
}
.docs-crumbs a {
  color: var(--d-muted);
}
.docs-crumbs a:hover {
  color: var(--d-ink-2);
}
.docs-crumbs [aria-current="page"] {
  color: var(--d-ink-2);
}
.docs-crumbs svg {
  flex: none;
  color: var(--d-faint);
}
/* One line at every width: the leading crumbs keep their size and the page's
   own crumb (the H1 below repeats it) ellipsizes, never wraps (390). */
.docs-crumbs {
  flex-wrap: nowrap;
  min-width: 0;
}
.docs-crumbs li {
  flex: none;
  white-space: nowrap;
}
.docs-crumbs li:last-child {
  flex: 0 1 auto;
  min-width: 0;
}
.docs-crumbs li:last-child > :last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Section landing (board 8eec76c0ed5b0c89) ──────────────────────────── */
.docs-section {
  max-width: 760px;
}
.docs-section-title {
  margin: 24px 0 12px;
  font: 800 clamp(36px, calc(36px + 12 * (100vw - 390px) / 1050), 48px) / 1.08 var(--d-font);
  letter-spacing: -0.025em;
  color: var(--d-ink);
}
.docs-section-lead {
  margin: 0 0 12px;
  font: 400 clamp(17px, calc(17px + 3 * (100vw - 390px) / 1050), 20px) / 1.5 var(--d-font);
  color: var(--d-body);
}
.docs-section-count {
  margin: 0;
  font: 500 14px/1.36 var(--d-font);
  color: var(--d-muted);
}
.docs-rows {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--d-hair);
}
.docs-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--d-hair);
}
.docs-row-text {
  flex: 1;
  min-width: 0;
}
.docs-row-title {
  display: block;
  font: 700 17px/1.35 var(--d-font);
  color: var(--d-ink-2);
}
.docs-row-desc {
  display: block;
  margin-top: 4px;
  font: 400 15px/1.5 var(--d-font);
  color: var(--d-lead);
}
.docs-row svg {
  flex: none;
  color: var(--d-muted);
  transition: transform 150ms ease, color 150ms ease;
}
.docs-row:hover .docs-row-title {
  color: var(--d-link);
}
.docs-row:hover svg {
  color: var(--d-ink-2);
  transform: translateX(3px);
}
.docs-next-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--d-raised);
  box-shadow: inset 0 0 0 1px var(--d-hair);
  color: var(--d-ink-2);
}
.docs-next-section:hover {
  box-shadow: inset 0 0 0 1px var(--d-hair-strong), 0 6px 20px rgba(26, 22, 48, 0.06);
}
.docs-next-label {
  display: block;
  font: 500 13px/1.38 var(--d-font);
  color: var(--d-muted);
}
.docs-next-title {
  display: block;
  margin-top: 4px;
  font: 700 18px/1.39 var(--d-font);
  color: var(--d-ink-2);
}

/* ── Article (board eb96e2c1c23424d6) ──────────────────────────────────── */
.docs-article-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--d-rail-gap);
}
.docs-article {
  flex: 0 1 var(--d-article);
  min-width: 0;
  max-width: var(--d-article);
}
.docs-rail {
  flex: none;
  width: var(--d-rail);
  position: sticky;
  top: var(--d-sticky-top);
  /* Sized for where the rail starts before it sticks (the 72 nav plus the
     main top padding, up to 64), so a long list (Shortcuts) ends 24 above the
     fold at the top of the page and scrolls on its own. */
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 1199px) {
  .docs-rail {
    display: none;
  }
}
.docs-toc-title {
  margin: 0 0 12px;
  font: 700 13px/1.38 var(--d-font);
  color: var(--d-ink-2);
}
.docs-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.docs-toc a {
  display: block;
  padding: 5px 12px;
  border-left: 2px solid var(--d-hair);
  font: 500 14px/1.36 var(--d-font);
  color: var(--d-muted);
}
.docs-toc a:hover {
  color: var(--d-ink-2);
}
.docs-toc a[aria-current="true"] {
  border-left-color: var(--d-ink-2);
  font-weight: 600;
  color: var(--d-ink-2);
}

/* The MDX body. MDXContent ships its own Tailwind classes (shared with the
   blog); the docs restyle wins through this scope, so the blog is untouched. */
.docs-article .prose {
  font: 400 17px/1.7 var(--d-font);
  color: var(--d-body);
}
.docs-article .prose p {
  margin: 20px 0 0;
  color: var(--d-body);
}
.docs-article .prose h1 {
  margin: 0 0 0 !important;
  font: 800 clamp(36px, calc(36px + 12 * (100vw - 390px) / 1050), 48px) / 1.08 var(--d-font) !important;
  letter-spacing: -0.025em;
  color: var(--d-ink) !important;
}
.docs-article .prose h2 {
  margin: 40px 0 0 !important;
  font: 700 28px/1.25 var(--d-font) !important;
  letter-spacing: -0.5px;
  color: var(--d-ink-2) !important;
  scroll-margin-top: var(--d-sticky-top);
}
.docs-article .prose h3 {
  margin: 32px 0 0 !important;
  font: 700 21px/1.3 var(--d-font) !important;
  color: var(--d-ink-2) !important;
  scroll-margin-top: var(--d-sticky-top);
}
.docs-article .prose h4 {
  margin: 28px 0 0;
  font: 700 17px/1.4 var(--d-font);
  color: var(--d-ink-2);
}
.docs-article .prose strong {
  font-weight: 700;
  color: var(--d-ink-2);
}
.docs-article .prose ul,
.docs-article .prose ol {
  margin: 20px 0 0 !important;
  padding-left: 22px !important;
  color: var(--d-body) !important;
}
.docs-article .prose li {
  margin: 0;
  padding-left: 4px;
  line-height: 1.7;
}
.docs-article .prose li + li {
  margin-top: 8px;
}
.docs-article .prose li::marker {
  color: var(--d-faint);
}
.docs-article .prose a {
  color: var(--d-link) !important;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--d-link) 35%, transparent);
  text-underline-offset: 3px;
}
.docs-article .prose a:hover {
  text-decoration-color: var(--d-link);
}
.docs-article .prose blockquote {
  margin: 24px 0 0 !important;
  padding: 16px 24px !important;
  border-left: 3px solid var(--d-ink-2) !important;
  font: 600 22px/1.4 var(--d-font);
  font-style: normal !important;
  letter-spacing: -0.3px;
  color: var(--d-ink-2) !important;
  quotes: none;
}
.docs-article .prose blockquote p {
  margin: 0;
  color: inherit;
}
.docs-article .prose blockquote p::before,
.docs-article .prose blockquote p::after {
  content: none;
}
/* A long URL pattern or path in a sentence (plain or as inline code) wraps
   inside the column instead of running past a phone's edge. break-word only
   breaks a word that would overflow, so table min widths are untouched. */
.docs-article .prose {
  overflow-wrap: break-word;
  /* Manrope's contextual ligature draws "--" as an en dash, so a flag left
     in prose would read wrong: docs text shows the characters as typed. */
  font-variant-ligatures: no-common-ligatures no-contextual;
}
.docs-article .prose :not(pre) > code {
  overflow-wrap: break-word;
  padding: 1px 6px !important;
  border-radius: 6px;
  background: var(--d-chip) !important;
  font: 500 0.88em/1.4 var(--d-mono);
  color: var(--d-ink-2);
}
.docs-article .prose img {
  border-radius: 12px;
}
.docs-article .prose hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--d-hair);
}
.docs-article .prose table {
  font-size: 15px;
}
.docs-article .prose th {
  color: var(--d-muted) !important;
}
.docs-article .prose td {
  white-space: normal !important;
  color: var(--d-body) !important;
}

/* Code block: a dark card, a header with the language and Copy. */
.docs-code {
  margin: 24px 0 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--d-code-bg);
}
.docs-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 0 16px;
  background: var(--d-code-head);
  font: 500 12px/16px var(--d-mono);
  color: var(--d-code-muted);
  text-transform: uppercase;
}
.docs-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 4px 8px;
  border: 0;
  background: transparent;
  font: 500 12px/16px var(--d-font);
  text-transform: none;
  color: var(--d-code-muted);
  cursor: pointer;
}
.docs-copy:hover {
  color: var(--d-code-ink);
}
.docs-code pre {
  margin: 0 !important;
  padding: 16px 20px !important;
  overflow-x: auto;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.docs-code pre code,
.docs-command code {
  font: 400 14px/1.6 var(--d-mono) !important;
  color: var(--d-code-ink) !important;
  background: transparent !important;
  padding: 0 !important;
}
/* Token colours read on the dark card (MDXContent tags each token tok-*). */
.docs-ui .tok-comment,
.docs-ui .tok-muted {
  color: #7d8494 !important;
}
.docs-ui .tok-keyword,
.docs-ui .tok-attribute {
  color: #c4a7ff !important;
}
.docs-ui .tok-string {
  color: #f6c177 !important;
}
.docs-ui .tok-number,
.docs-ui .tok-hex,
.docs-ui .tok-constant {
  color: #9ccfff !important;
}
.docs-ui .tok-function {
  color: #7dd3fc !important;
}
.docs-ui .tok-addition {
  color: #86efac !important;
}
.docs-ui .tok-deletion {
  color: #fca5a5 !important;
}

/* Command: one shell line, copy at the right. */
.docs-command {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 0;
  padding: 0 6px 0 18px;
  min-height: 46px;
  border-radius: 12px;
  background: var(--d-code-bg);
}
.docs-command pre {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  padding: 14px 0 !important;
  overflow-x: auto;
  background: transparent !important;
  border: 0 !important;
}
.docs-command .docs-copy {
  padding: 8px;
  border-radius: 8px;
}

/* Callouts: note (info) and caution (warning). */
.docs-callout {
  margin: 24px 0 0;
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--d-note-bg);
  box-shadow: inset 0 0 0 1px var(--d-note-hair);
  font: 400 16px/1.6 var(--d-font);
  color: var(--d-note-ink);
}
.docs-callout-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font: 700 16px/1.38 var(--d-font);
  color: var(--d-note-title);
}
.docs-callout-title svg {
  flex: none;
  color: var(--d-note-icon);
}
.docs-callout-body,
.docs-callout-body * {
  color: inherit;
}
.docs-article .prose .docs-callout strong {
  color: inherit;
}
.docs-callout--caution {
  background: var(--d-caution-bg);
  box-shadow: inset 0 0 0 1px var(--d-caution-hair);
  color: var(--d-caution-ink);
}
.docs-callout--caution .docs-callout-title {
  color: var(--d-caution-title);
}
.docs-callout--caution .docs-callout-title svg {
  color: var(--d-caution-icon);
}

/* "Where next?" labels read at the body weight: one weight per list. */
.docs-article .prose h2#where-next + ul strong {
  font-weight: 400 !important;
}

/* Pager: Previous / Next cards. */
/* The article's Related list (frontmatter `related`), section-landing rows. */
.docs-related {
  margin-top: 56px;
}
.docs-related h2 {
  margin: 0;
  font: 600 13px/1.4 var(--d-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--d-muted);
}
.docs-related .docs-rows {
  margin-top: 12px;
}
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
}
.docs-pager a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--d-raised);
  box-shadow: inset 0 0 0 1px var(--d-hair);
  min-width: 0;
}
.docs-pager a:hover {
  box-shadow: inset 0 0 0 1px var(--d-hair-strong), 0 6px 20px rgba(26, 22, 48, 0.06);
}
.docs-pager a[data-dir="next"] {
  align-items: flex-end;
  text-align: right;
}
.docs-pager-label {
  font: 500 13px/1.38 var(--d-font);
  color: var(--d-muted);
}
.docs-pager-title {
  font: 700 16px/1.38 var(--d-font);
  color: var(--d-ink-2);
}
@media (max-width: 640px) {
  .docs-pager {
    grid-template-columns: 1fr;
  }
}
:root.dark .docs-article .prose a:hover {
  color: #f8f8f8 !important;
}

/* ── Figure (Web/Components DocFigure) ────────────────────────────────────
   Article width, fill on phones. edge: a hairline frame, radius 12, clipped.
   panel and pair: the image carries its own stage, radius 12. The frame
   holds the image's aspect ratio (scripts/generate-doc-figures.js), so the
   box is reserved before the bytes land and while the image is zoomed. */
.doc-figure {
  margin: 20px 0 0;
}
.doc-figure-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .doc-figure-frame--m {
    aspect-ratio: var(--doc-fig-ar-m) !important;
  }
}
.doc-figure--edge .doc-figure-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--d-block-hair);
  pointer-events: none;
}
.doc-figure picture {
  display: block;
}
.docs-article .prose .doc-figure-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
  cursor: zoom-in;
}
.doc-figure-caption {
  margin-top: 12px;
  font: 400 14px/1.36 var(--d-font);
  color: var(--d-block-text);
}

/* ── Step (Web/Components DocStep) ────────────────────────────────────────
   Desktop: the 28 number on a rail to the next step, the content column 16
   beside it. Phone: number and title on one row, the body full width. */
.doc-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  -moz-column-gap: 16px;
       column-gap: 16px;
  margin-top: 20px;
  padding-bottom: 24px;
}
.doc-step::before {
  content: "";
  position: absolute;
  left: 13.5px;
  top: 36px;
  bottom: 0;
  width: 1px;
  background: var(--d-block-rule);
}
.doc-step--last::before {
  display: none;
}
.doc-step-n {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: var(--d-step-num);
  font: 700 13px/1.38 var(--d-font);
  color: var(--d-step-num-ink);
}
.docs-article .prose .doc-step-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  font: 600 20px/1.375 var(--d-font) !important;
  letter-spacing: normal;
  color: var(--d-block-ink) !important;
}
.doc-step-body {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin-top: 12px;
  font: 400 16px/1.625 var(--d-font);
  color: var(--d-block-text);
}
.docs-article .prose .doc-step-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.625;
  color: var(--d-block-text);
}
.docs-article .prose .doc-step-body > * + * {
  margin-top: 12px !important;
}
.doc-step-body .doc-figure {
  margin-top: 0;
}
@media (max-width: 640px) {
  .doc-step {
    -moz-column-gap: 12px;
         column-gap: 12px;
    align-items: center;
  }
  .doc-step::before {
    display: none;
  }
  .doc-step-body {
    grid-column: 1 / -1;
  }
}

/* The key of an annotated figure: the ordered list in a step body, one row
   per marker drawn on the figure (Web/Components DocKeyRow, DocMarker). */
.docs-article .prose .doc-step-body ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.docs-article .prose .doc-step-body ol > li {
  position: relative;
  margin: 0;
  padding: 0 0 0 34px;
  font-size: 16px;
  line-height: 1.38;
  color: var(--d-block-text);
}
.docs-article .prose .doc-step-body ol > li::before {
  content: attr(value);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: var(--d-key-dot);
  font: 700 12px/22px var(--d-font);
  text-align: center;
  color: var(--d-key-dot-ink);
}
.docs-article .prose .doc-step-body ol > li p {
  line-height: 1.38;
}
.docs-article .prose .doc-step-body ol > li strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--d-block-ink);
}

/* ── Table (Web/Components DocTableRow), docs articles only ──────────────
   A frame with radius 12; the head on the container tint; the first column
   in ink, the rest in the secondary text; a rule between rows. A phone keeps
   two columns; a wider table stacks per row: the first cell heads the row,
   then each other cell as its column label and value. */
.docs-article .prose .docs-table {
  margin: 24px 0 0;
  border: 1px solid var(--d-block-hair);
  border-radius: 12px;
  overflow: hidden;
  background: var(--d-block-bg);
}
.docs-article .prose .docs-table table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font: 400 14px/1.36 var(--d-font);
}
.docs-article .prose .docs-table th,
.docs-article .prose .docs-table td {
  padding: 12px 6px;
  text-align: left;
  vertical-align: top;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
/* Code in a cell breaks at its own <wbr> points (after each "/") and only
   mid-token when a single segment is wider than the cell (a phone). */
.docs-article .prose .docs-table code {
  overflow-wrap: break-word;
}
.docs-article .prose .docs-table th:first-child,
.docs-article .prose .docs-table td:first-child {
  padding-left: 16px;
}
.docs-article .prose .docs-table th:last-child,
.docs-article .prose .docs-table td:last-child {
  padding-right: 16px;
}
.docs-article .prose .docs-table th {
  background: var(--d-block-head);
  font: 600 13px/1.38 var(--d-font);
  color: var(--d-block-ink) !important;
}
.docs-article .prose .docs-table td {
  border-top: 1px solid var(--d-block-rule);
  color: var(--d-block-text) !important;
}
.docs-article .prose .docs-table td:first-child {
  font-weight: 500;
  color: var(--d-block-ink) !important;
}
.docs-article .prose .docs-table table[data-cols="2"] th:first-child {
  width: 40%;
}
/* A shortcuts table (keycaps in the third column): the action column gives
   room, so a pair of Windows chords ("Ctrl Shift 7, Ctrl Shift 8") holds one
   line at 1440. */
.docs-article .prose .docs-table table[data-cols="3"]:has(td:nth-child(3) .whitespace-nowrap) th:first-child {
  width: 26%;
}
@media (max-width: 640px) {
  .docs-article .prose .docs-table th,
  .docs-article .prose .docs-table td {
    padding: 10px 4px;
  }
  .docs-article .prose .docs-table th:first-child,
  .docs-article .prose .docs-table td:first-child {
    padding-left: 12px;
  }
  .docs-article .prose .docs-table th:last-child,
  .docs-article .prose .docs-table td:last-child {
    padding-right: 12px;
  }
  .docs-article .prose .docs-table--stack table,
  .docs-article .prose .docs-table--stack tbody,
  .docs-article .prose .docs-table--stack tr,
  .docs-article .prose .docs-table--stack td {
    display: block;
    width: auto;
  }
  .docs-article .prose .docs-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .docs-article .prose .docs-table--stack td,
  .docs-article .prose .docs-table--stack td:first-child,
  .docs-article .prose .docs-table--stack td:last-child {
    padding: 10px 12px;
  }
  .docs-article .prose .docs-table--stack td:first-child {
    background: var(--d-block-head);
    font: 600 13px/1.38 var(--d-font);
  }
  .docs-article .prose .docs-table--stack tr:first-child td:first-child {
    border-top: 0;
  }
  /* The column head sits on its own line above the value, and the value
     flows as one inline run: a grid td made every inline node (a keycap, a
     link, a code span) its own cell and split the sentence. */
  .docs-article .prose .docs-table--stack td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-weight: 500;
    color: var(--d-block-ink);
  }
}

/* ── Live embeds' still mode (docsLive.jsx) ──────────────────────────────
   Both halves render; this picks one. Phones and coarse pointers always get
   the still, from first paint (the prerendered page included); a desktop
   without WebGPU gets it from data-live, and the prerender ("pending", no
   verdict yet) shows it too. The head row holds the same height in both
   halves, so a still to live swap moves nothing. */
.docs-live .docs-live-off {
  display: none;
}
.docs-live:not([data-live="true"]) .docs-live-on {
  display: none;
}
.docs-live:not([data-live="true"]) .docs-live-off {
  display: block;
}
@media (max-width: 1023px), (pointer: coarse) {
  .docs-live .docs-live-on {
    display: none;
  }
  .docs-live .docs-live-off {
    display: block;
  }
}
/* A caption written for the live embed ("Try it", "Flip a control", "Live on
   a desktop browser") shows only in live mode. Only the prerendered page
   ("pending") keeps its line box (visibility), so a capable desktop booting
   to live moves nothing. A known still (a desktop without WebGPU, or a phone)
   drops it, so no empty band sits under the still. */
.docs-live[data-live="pending"] .docs-live-only {
  visibility: hidden;
}
.docs-live[data-live="false"] .docs-live-only {
  display: none;
}
@media (max-width: 1023px), (pointer: coarse) {
  .docs-live .docs-live-only {
    display: none;
  }
}
.docs-live-head {
  min-height: 54px;
  margin-bottom: 14px;
}