/*
 * PromethistAI documentation theme ("Documentation Experience 2.0").
 *
 * One hand-authored stylesheet, no build step. It replaces the Antora default UI stylesheet,
 * the old override sheet and the Tailwind dark-mode layer.
 *
 * Source of truth for every value below: the PromethistAI design system
 * (promethist-marketing: frontend/design-system-artifact/tokens.json and README).
 * Docs are a reading surface, so they sit between the two registers of that system: Brand
 * typography and eyebrows for page titles, Studio density and surfaces for everything else.
 * Everything is dark. There is no light theme.
 *
 * Contents
 *   1. Tokens          5. Navigation (sidebar, toolbar, breadcrumbs)
 *   2. Fonts and base  6. Article typography
 *   3. Utilities       7. Content blocks (admonitions, tables, code, images, ...)
 *   4. Header          8. Section cards, pagination, 404
 *                      9. Search results, footer, responsive, print, reduced motion
 */

/* 1. Tokens ------------------------------------------------------------------------------ */
:root {
  color-scheme: dark;

  --font-sans: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;

  /* Surfaces (design system: bg-page, surface, surface-raised, surface-elevated) */
  --bg: #09090b;
  --surface: #0f1115;
  --raised: #141821;
  --elevated: #18181b;

  /* Text. --text-3 fails AA for small text: use it for decoration or 14px+ medium only. */
  --text: #fafafa;
  --text-body: #c4c4c8;
  --text-2: #a1a1aa;
  --text-3: #71717a;

  /* Brand: aurora axis blue deep > purple > orange vivid */
  --coral: #ff6e50;
  --coral-soft: #ff9a7a;
  --blue-deep: #051e83;
  --purple: #7c3aed;
  --purple-glow: #3727a1;
  --indigo-text: #8b9cf8;

  /* Status colours. Text tints are lightened from the system's fills to reach AA on the
     card surface; every status is always paired with a word and an icon. */
  --note: #8b9cf8;
  --tip: #34d399;
  --important: #ff6e50;
  --warning: #f0b24a;
  --caution: #f87171;

  /* Lines */
  --line-subtle: rgb(255 255 255 / 0.06);
  --line: rgb(255 255 255 / 0.09);
  --line-strong: rgb(255 255 255 / 0.16);
  --fill: rgb(255 255 255 / 0.04);
  --fill-hover: rgb(255 255 255 / 0.07);

  /* Radius, shadow, motion */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 9999px;
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.3);
  --shadow-3: 0 20px 60px -20px rgb(0 0 0 / 0.6), 0 2px 12px rgb(0 0 0 / 0.3);
  --glow-select: inset 0 0 12.5px 2.5px var(--purple-glow);
  --glow-select-soft: inset 0 0 12.5px 2.5px rgb(55 39 161 / 0.5);
  --glow-row: inset 0 0 30px -7.5px var(--purple-glow);
  --ring-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--coral);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-2: 200ms;
  --dur-3: 300ms;

  /* Layout */
  --header-h: 4rem;
  --toolbar-h: 2.75rem;
  --sidebar-w: 17rem;
  --toc-w: 14.5rem;
  --content-w: 46rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --sticky-top: calc(var(--header-h) + var(--toolbar-h));
}

/* 2. Fonts and base ---------------------------------------------------------------------- */
@font-face {
  font-family: "Figtree";
  src: url("../font/Figtree-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../font/Figtree-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sticky-top) + 1rem);
  background: var(--bg);
}
html.is-clipped--nav, html.is-clipped--navbar { overflow-y: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--coral); }
::selection { background: rgb(255 110 80 / 0.32); color: var(--text); }

/* Keyboard focus: the solid coral ring from the design system, everywhere. */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--r-xs); }
a:focus-visible, button:focus-visible, summary:focus-visible { border-radius: var(--r-sm); }

/* 3. Utilities --------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100;
  padding: 0.6rem 1rem; border-radius: var(--r-pill);
  background: var(--coral); color: var(--bg); font-weight: 700; text-decoration: none;
  transform: translateY(-200%); transition: transform var(--dur-2) var(--ease-out-expo);
}
.skip-link:focus { transform: none; box-shadow: var(--ring-focus); }
.hide-for-print { }

/* 4. Header ------------------------------------------------------------------------------ */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  background: rgb(9 9 11 / 0.8);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line-subtle);
}
.navbar { display: flex; align-items: center; height: 100%; gap: 1rem; padding-inline: var(--gutter); }
.navbar-brand { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--text); flex: none; }
.brand img { display: block; }
.brand .brand-wordmark { height: 2.9rem; width: auto; margin-left: -0.4rem; }
.brand-title {
  padding-left: 0.85rem; border-left: 1px solid var(--line-strong);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2);
}

/* Search field. The lunr UI injects its results into #search-field. */
.search { position: relative; flex: 0 1 28rem; min-width: 0; }
#search-field { position: relative; display: block; margin: 0; }
#search-field .search-icon {
  position: absolute; left: 0.9rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%);
  color: var(--text-2); pointer-events: none;
}
#search-field #search-input {
  display: block; width: 100%; height: 2.5rem; margin: 0;
  padding: 0 3rem 0 2.5rem; border-radius: var(--r-pill);
  background: var(--raised); border: 1px solid var(--line); color: var(--text);
  font-size: 0.9375rem; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-2), box-shadow var(--dur-2), background var(--dur-2);
}
#search-field #search-input::placeholder { color: var(--text-2); opacity: 1; }
#search-field #search-input::-webkit-search-cancel-button { display: none; }
#search-field #search-input:hover { border-color: var(--line-strong); }
#search-field #search-input:focus, #search-field #search-input:focus-visible {
  outline: none; border-color: var(--coral); background: var(--elevated);
  box-shadow: 0 0 0 4px rgb(255 110 80 / 0.24);
}
.search-kbd {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  min-width: 1.5rem; padding: 0.1rem 0.4rem; text-align: center; pointer-events: none;
  font: 600 0.75rem/1.4 var(--font-mono); color: var(--text-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-xs);
}
#search-field #search-input:focus ~ .search-kbd { opacity: 0; }

/* Top links */
.navbar-menu { display: flex; align-items: center; flex: none; }
.navbar-end { display: flex; align-items: center; gap: 0.25rem; }
.navbar-item, .navbar-link {
  position: relative; display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.85rem; border-radius: var(--r-pill);
  color: var(--text-2); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  transition: color var(--dur-2), background var(--dur-2);
}
a.navbar-item:hover, .navbar-link:hover, .navbar-item.has-dropdown:focus-within > .navbar-link,
.navbar-item.has-dropdown.is-open > .navbar-link { color: var(--text); background: var(--fill-hover); }
.navbar-item.has-dropdown { padding: 0; }
.navbar-link { background: none; border: 0; cursor: pointer; font-family: inherit; }
.navbar-link::after {
  content: ""; width: 0.45rem; height: 0.45rem; margin-top: -0.2rem;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.navbar-dropdown {
  position: absolute; top: calc(100% + 0.4rem); right: 0; min-width: 12rem; padding: 0.35rem;
  display: none; background: var(--elevated); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.navbar-item.has-dropdown:hover > .navbar-dropdown,
.navbar-item.has-dropdown:focus-within > .navbar-dropdown,
.navbar-item.has-dropdown.is-open > .navbar-dropdown { display: block; }
.navbar-dropdown .navbar-item { border-radius: var(--r-sm); }

/* Primary action: a calm outlined pill. The brand gradient is kept for marketing surfaces, not for documentation chrome. */
.button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.375rem; padding: 0 1.2rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: 0.9375rem; font-weight: 600; text-decoration: none; color: var(--text); white-space: nowrap; background: transparent;
  transition: background var(--dur-2), border-color var(--dur-2);
}
.button:hover { background: var(--fill-hover); border-color: rgb(255 255 255 / 0.32); }
.button.is-primary::before {
  content: ""; width: 1rem; height: 1rem; background: currentColor;
  -webkit-mask: var(--i-download) center / contain no-repeat; mask: var(--i-download) center / contain no-repeat;
}

.navbar-burger {
  display: none; position: relative; width: 2.5rem; height: 2.5rem; margin-left: auto; flex: none;
  background: none; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text);
}
.navbar-burger span {
  position: absolute; left: 50%; width: 1rem; height: 1.5px; background: currentColor; border-radius: 1px;
  transform: translateX(-50%); transition: transform var(--dur-2), opacity var(--dur-2);
}
.navbar-burger span:nth-child(1) { top: 0.95rem; }
.navbar-burger span:nth-child(2) { top: 1.2rem; }
.navbar-burger span:nth-child(3) { top: 1.45rem; }
.navbar-burger.is-active span:nth-child(1) { top: 1.2rem; transform: translateX(-50%) rotate(45deg); }
.navbar-burger.is-active span:nth-child(2) { opacity: 0; }
.navbar-burger.is-active span:nth-child(3) { top: 1.2rem; transform: translateX(-50%) rotate(-45deg); }

/* 5. Layout and navigation -------------------------------------------------------------- */
.body { display: flex; align-items: flex-start; padding-top: var(--header-h); min-height: 100vh; }
main { flex: 1 1 auto; min-width: 0; }
main > .content {
  position: relative; display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(2rem, 4vw, 4rem); padding: 0 var(--gutter);
}
/* The aurora: blue deep, purple and orange vivid, as three soft fields at the top of the page. */
main > .content::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 34rem; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 48% 62% at 16% 0%, rgb(5 30 131 / 0.5), transparent 70%),
    radial-gradient(ellipse 40% 55% at 56% 0%, rgb(124 58 237 / 0.16), transparent 70%),
    radial-gradient(ellipse 42% 58% at 88% 0%, rgb(255 110 80 / 0.14), transparent 70%);
}
.doc, aside.toc { position: relative; z-index: 1; }

/* Sidebar */
.nav-container {
  position: sticky; top: var(--header-h); flex: none; width: var(--sidebar-w);
  height: calc(100vh - var(--header-h)); z-index: 30;
}
.nav { position: relative; height: 100%; background: var(--surface); border-right: 1px solid var(--line-subtle); }
.panels { position: relative; height: 100%; }
.nav-panel-menu { height: calc(100% - 2.75rem); overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 0.75rem 2rem; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.nav-menu { margin: 0; }
.nav-menu .title { margin: 0 0 1rem; padding-inline: 0.75rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.nav-menu .title a { color: var(--text-2); text-decoration: none; }
.nav-menu .title a:hover { color: var(--text); }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; margin: 0.1rem 0; }
.nav-item > .nav-list { margin: 0.15rem 0 0.35rem 1rem; padding-left: 0.5rem; border-left: 1px solid var(--line); }
.nav-item:not(.is-active) > .nav-list { display: none; }
.nav-item[data-depth="0"] > .nav-list:first-child { display: block; margin: 0; padding: 0; border-left: 0; }
.nav-item[data-depth="0"] { margin: 0; }
.nav-link, .nav-text {
  display: block; padding: 0.42rem 0.75rem; border-radius: var(--r-sm);
  font-size: 0.9375rem; line-height: 1.35; color: var(--text-2); text-decoration: none;
  transition: color var(--dur-2), background var(--dur-2);
}
.nav-text { font-weight: 600; color: var(--text); }
.nav-item[data-depth="1"] > .nav-link { font-weight: 500; color: var(--text-body); }
.nav-link:hover { color: var(--text); background: var(--fill); }
/* Selection is an inner purple glow, never an outer ring (design system rule). */
.nav-item.is-current-page > .nav-link { color: var(--text); font-weight: 600; background: var(--fill); box-shadow: var(--glow-select-soft); }
.nav-item-toggle {
  position: absolute; right: 0.15rem; top: 0.2rem; width: 1.9rem; height: 1.9rem; padding: 0;
  background: none; border: 0; border-radius: var(--r-sm); color: var(--text-2);
}
.nav-item-toggle:hover { background: var(--fill-hover); color: var(--text); }
.nav-item-toggle::before {
  content: ""; display: block; width: 0.42rem; height: 0.42rem; margin: 0 auto;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--dur-2) var(--ease-out-expo);
}
.nav-item.is-active > .nav-item-toggle::before { transform: rotate(45deg); }
.nav-item-toggle + .nav-link { padding-right: 2.25rem; }
.nav-menu-toggle { display: none; }

/* Component switcher pinned to the bottom of the sidebar */
.nav-panel-explore {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 2.75rem; overflow: hidden;
  display: flex; flex-direction: column; background: var(--surface); border-top: 1px solid var(--line-subtle);
}
.nav-panel-explore.is-active { height: 100%; }
.nav-panel-explore .context {
  display: flex; align-items: center; justify-content: space-between; flex: none; height: 2.75rem; padding: 0 1rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--text-2); cursor: pointer;
}
.nav-panel-explore .context::after { content: ""; width: 0.45rem; height: 0.45rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-135deg); transition: transform var(--dur-2); }
.nav-panel-explore.is-active .context::after { transform: rotate(45deg); }
.nav-panel-explore .context:hover { color: var(--text); }
.nav-panel-explore .version { display: none; }
.nav-panel-explore .components { display: none; flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 0.5rem 0.75rem 1.5rem; }
.nav-panel-explore.is-active .components { display: block; }
.nav-panel-explore .component { margin: 0.15rem 0; }
.nav-panel-explore .component .title a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--r-sm); color: var(--text-2); text-decoration: none; font-size: 0.9375rem; }
.nav-panel-explore .component .title a:hover { color: var(--text); background: var(--fill); }
.nav-panel-explore .component.is-current .title a { color: var(--text); font-weight: 600; box-shadow: var(--glow-select-soft); background: var(--fill); }
.nav-panel-explore .versions { list-style: none; margin: 0 0 0 1rem; padding: 0; display: flex; gap: 0.25rem; flex-wrap: wrap; }
.nav-panel-explore .version a { display: block; padding: 0.2rem 0.6rem; border-radius: var(--r-pill); font-size: 0.8125rem; color: var(--text-2); text-decoration: none; border: 1px solid var(--line); }

/* Toolbar: breadcrumbs, version switch, sidebar toggle on small screens */
.toolbar {
  position: sticky; top: var(--header-h); z-index: 20; display: flex; align-items: center; gap: 0.75rem;
  height: var(--toolbar-h); padding-inline: var(--gutter);
  background: rgb(9 9 11 / 0.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-subtle); font-size: 0.875rem; color: var(--text-2);
}
.nav-toggle {
  display: none; flex: none; position: relative; width: 2.25rem; height: 2.25rem; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text);
}
.nav-toggle::before, .nav-toggle::after {
  content: ""; position: absolute; left: 50%; width: 0.95rem; height: 1.5px; background: currentColor; border-radius: 1px; transform: translateX(-50%);
  transition: transform var(--dur-2), top var(--dur-2);
}
.nav-toggle::before { top: 0.95rem; box-shadow: 0 0.3rem 0 currentColor; }
.nav-toggle::after { top: 1.55rem; width: 0.6rem; transform: translateX(-70%); }
.nav-toggle.is-active::before { top: 1.1rem; box-shadow: none; transform: translateX(-50%) rotate(45deg); }
.nav-toggle.is-active::after { top: 1.1rem; width: 0.95rem; transform: translateX(-50%) rotate(-45deg); }
.breadcrumbs { flex: 1 1 auto; min-width: 0; }
.breadcrumbs ul { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; overflow: hidden; white-space: nowrap; }
.breadcrumbs li { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.breadcrumbs li + li::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border: solid var(--text-3); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); margin-right: 0.15rem; }
.breadcrumbs li:last-child { flex: 0 1 auto; min-width: 0; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.breadcrumbs a { color: var(--text-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
.page-versions { position: relative; flex: none; }
.version-menu-toggle { padding: 0.25rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: none; color: var(--text-2); font-size: 0.8125rem; }
.version-menu { display: none; position: absolute; right: 0; top: calc(100% + 0.35rem); min-width: 8rem; padding: 0.35rem; background: var(--elevated); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.page-versions.is-active .version-menu { display: block; }
.version-menu .version { display: block; padding: 0.4rem 0.7rem; border-radius: var(--r-sm); color: var(--text-2); text-decoration: none; }
.version-menu .version.is-current { color: var(--text); font-weight: 600; }

/* "On this page" */
aside.toc.sidebar {
  flex: 0 0 var(--toc-w); width: var(--toc-w); order: 1; align-self: flex-start;
  position: sticky; top: calc(var(--sticky-top) + 2.25rem);
  max-height: calc(100vh - var(--sticky-top) - 4rem); overflow-y: auto; padding-bottom: 2rem;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.toc-menu h3 { margin: 0 0 0.85rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); }
.toc-menu ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.toc-menu li { margin: 0; }
.toc-menu a {
  display: block; margin-left: -1px; padding: 0.28rem 0.9rem; border-left: 1px solid transparent;
  font-size: 0.875rem; line-height: 1.4; color: var(--text-2); text-decoration: none;
  transition: color var(--dur-2), border-color var(--dur-2);
}
.toc-menu li[data-level="2"] a { padding-left: 1.7rem; font-size: 0.84375rem; }
.toc-menu li[data-level="3"] a { padding-left: 2.4rem; font-size: 0.84375rem; }
.toc-menu a:hover { color: var(--text); }
.toc-menu a.is-active { color: var(--coral); border-left-color: var(--coral); font-weight: 600; }
aside.toc.embedded { display: none; }

/* Lucide icons (stroke 1.75), used as masks so they take currentColor. */
:root {
  --i-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --i-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
  --i-important: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
  --i-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --i-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16h.01'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z'/%3E%3C/svg%3E");
  --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
  --i-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  --i-zoom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3Cpath d='M11 8v6'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E");
  --i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --i-arrowl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* 6. Article typography ----------------------------------------------------------------- */
.doc {
  flex: 0 1 var(--content-w); min-width: 0; max-width: var(--content-w);
  padding: 2.75rem 0 6rem; font-size: 1.0625rem; line-height: 1.75; color: var(--text-body);
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word;
}
.doc > .eyebrow { margin: 0 0 1.1rem; }
.eyebrow {
  display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--coral); line-height: 1.2;
}
.eyebrow::before { content: ""; flex: none; width: 2rem; height: 2px; background: var(--coral); border-radius: 1px; }
.doc h1.page {
  margin: 0 0 1.25rem; font-size: clamp(2.25rem, 1.55rem + 2.6vw, 3.5rem); font-weight: 300;
  line-height: 1.05; letter-spacing: -0.035em; color: var(--text); text-wrap: balance;
}
.doc .lede { margin: 0 0 2.25rem; max-width: 38rem; font-size: 1.3125rem; font-weight: 300; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

.doc h2, .doc h3, .doc h4, .doc h5, .doc h6 { position: relative; color: var(--text); text-wrap: balance; scroll-margin-top: calc(var(--sticky-top) + 1rem); }
.doc h2 { margin: 3.5rem 0 1rem; font-size: 1.75rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.doc h3 { margin: 2.5rem 0 0.75rem; font-size: 1.3125rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.doc h4 { margin: 2rem 0 0.5rem; font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.doc h5, .doc h6 { margin: 1.75rem 0 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.doc .sect1:first-child > h2:first-child, .doc #preamble + .sect1 > h2 { margin-top: 3rem; }
.doc h2 + *, .doc h3 + *, .doc h4 + * { margin-top: 0; }

/* Heading anchors: appear on hover or keyboard focus, sit in the left gutter. */
.doc h2 > a.anchor, .doc h3 > a.anchor, .doc h4 > a.anchor, .doc h5 > a.anchor, .doc h6 > a.anchor {
  position: absolute; left: -1.5rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -0.55rem; padding: 0;
  text-decoration: none; opacity: 0; color: var(--text-2); transition: opacity var(--dur-2);
}
.doc h2 > a.anchor::before, .doc h3 > a.anchor::before, .doc h4 > a.anchor::before, .doc h5 > a.anchor::before, .doc h6 > a.anchor::before {
  content: ""; display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask: var(--i-link) center / contain no-repeat; mask: var(--i-link) center / contain no-repeat;
}
.doc :is(h2, h3, h4, h5, h6):hover > a.anchor, .doc a.anchor:focus-visible { opacity: 1; }
.doc a.anchor:hover { color: var(--coral); }

.doc p { margin: 0; }
.doc .paragraph, .doc .ulist, .doc .olist, .doc .dlist, .doc .hdlist, .doc .colist, .doc .openblock, .doc .stemblock,
.doc .admonitionblock, .doc .listingblock, .doc .literalblock, .doc .exampleblock, .doc .sidebarblock, .doc .quoteblock,
.doc .verseblock, .doc .imageblock, .doc .videoblock, .doc .audioblock, .doc .table-scroll, .doc > table.tableblock, .doc details {
  margin: 0 0 1.35rem;
}
.doc .lead p, .doc .paragraph.lead > p { font-size: 1.1875rem; line-height: 1.6; color: var(--text); }
.doc strong, .doc b { color: var(--text); font-weight: 600; }
.doc em { font-style: italic; }
.doc small { font-size: 0.85em; color: var(--text-2); }
.doc sup, .doc sub { line-height: 0; }
.doc hr { margin: 3rem 0; border: 0; border-top: 1px solid var(--line); }

/* Links: coral, underlined with a soft line so they never rely on colour alone. */
.doc a:not(.anchor):not(.card-link):not(.card-child):not(.button) {
  color: var(--coral); text-decoration: underline; text-decoration-color: rgb(255 110 80 / 0.4);
  text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  transition: color var(--dur-2), text-decoration-color var(--dur-2);
}
.doc a:not(.anchor):not(.card-link):not(.card-child):not(.button):hover { color: var(--coral-soft); text-decoration-color: currentColor; }
.doc a.bare { word-break: break-all; }
.doc a.image { text-decoration: none; }
.doc a.unresolved, .doc a.page.unresolved { color: var(--caution); }

/* Inline code, keyboard keys, menu paths */
.doc :not(pre) > code {
  padding: 0.12em 0.4em; font: 0.875em/1.4 var(--font-mono); color: #eaeaec;
  background: var(--fill-hover); border: 1px solid var(--line-subtle); border-radius: 6px; word-break: break-word;
}
.doc a > code { color: inherit; }
.doc h2 code, .doc h3 code, .doc h4 code { font-size: 0.82em; }
.doc kbd {
  display: inline-block; padding: 0.05em 0.45em; font: 600 0.8125em/1.5 var(--font-mono); color: var(--text);
  background: var(--raised); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; white-space: nowrap;
}
.doc .menuseq, .doc .menuref { color: var(--text); font-weight: 500; }
.doc .menuseq .caret { color: var(--text-3); }
.doc mark { background: rgb(255 110 80 / 0.22); color: var(--text); border-radius: 3px; padding: 0 0.2em; }

/* Lists */
.doc ul, .doc ol { margin: 0; padding-left: 1.5rem; }
.doc li { margin: 0.4rem 0; padding-left: 0.2rem; }
.doc li > p { margin: 0; }
.doc li > p + p, .doc li > .paragraph + .paragraph, .doc li > p + .listingblock { margin-top: 0.6rem; }
.doc li > ul, .doc li > ol, .doc li > .ulist, .doc li > .olist { margin: 0.4rem 0 0.6rem; }
.doc ul > li::marker { color: var(--text-2); }
.doc ol > li::marker { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.doc .ulist > ul > li > ul > li::marker { content: "\2013\00a0"; }
.doc ul.checklist, .doc ul.none, .doc ul.no-bullet { list-style: none; padding-left: 0.25rem; }
.doc ul.checklist input[type="checkbox"] { accent-color: var(--coral); margin: 0 0.5rem 0 0; vertical-align: -0.1em; }
.doc .dlist dt { margin: 1.1rem 0 0.2rem; color: var(--text); font-weight: 600; }
.doc .dlist dt:first-child { margin-top: 0; }
.doc .dlist dd { margin: 0 0 0.5rem 0; padding-left: 1rem; border-left: 1px solid var(--line); }
.doc .dlist dd > p:last-child { margin-bottom: 0; }
.doc .hdlist td { padding: 0.25rem 1rem 0.25rem 0; vertical-align: top; }
.doc .hdlist .hdlist1 { color: var(--text); font-weight: 600; }

/* Quotes, sidebars, examples */
.doc .quoteblock { padding: 0.25rem 0 0.25rem 1.5rem; border-left: 1px solid var(--line-strong); }
.doc .quoteblock blockquote { margin: 0; padding: 0; font-size: 1.1875rem; line-height: 1.6; color: var(--text); font-weight: 300; }
.doc .quoteblock blockquote p { margin: 0; }
.doc .quoteblock .attribution { margin-top: 0.6rem; font-size: 0.875rem; color: var(--text-2); }
.doc .quoteblock .attribution cite { font-style: normal; color: var(--text); font-weight: 500; }
.doc #preamble .quoteblock { border-left: 0; padding: 0; }
.doc #preamble > .sectionbody > .quoteblock:first-child blockquote { font-size: 1.3125rem; line-height: 1.55; }
.doc .verseblock pre { padding: 0; background: none; border: 0; font: inherit; white-space: pre-wrap; color: var(--text); }
.doc .sidebarblock, .doc .exampleblock > .content {
  padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.doc .sidebarblock > .content > .title, .doc .exampleblock > .title {
  margin: 0 0 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
}
.doc .exampleblock > .title { margin-bottom: 0.5rem; }
.doc .sidebarblock > .content > :last-child, .doc .exampleblock > .content > :last-child { margin-bottom: 0; }
.doc details > summary { cursor: pointer; padding: 0.7rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-weight: 600; list-style: none; }
.doc details > summary::-webkit-details-marker { display: none; }
.doc details > summary::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin: 0 0.75rem 0.1rem 0.1rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--dur-2); }
.doc details[open] > summary::before { transform: rotate(45deg); }
.doc details > .content, .doc details > :not(summary) { padding-inline: 1rem; }
.doc .footnotes, .doc #footnotes { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--text-2); }
.doc #footnotes hr { display: none; }
.doc .footnote { margin: 0.25rem 0; }

/* 7. Content blocks ---------------------------------------------------------------------- */

/* Admonitions: one tinted card per type; the label always has a word and an icon. */
.doc .admonitionblock { --c: var(--note); }
.doc .admonitionblock.note { --c: var(--note); }
.doc .admonitionblock.tip { --c: var(--tip); }
.doc .admonitionblock.important { --c: var(--important); }
.doc .admonitionblock.warning { --c: var(--warning); }
.doc .admonitionblock.caution { --c: var(--caution); }
.doc .admonitionblock > table, .doc .admonitionblock > table > tbody, .doc .admonitionblock > table > tbody > tr, .doc .admonitionblock > table td { display: block; }
.doc .admonitionblock > table {
  width: 100%; padding: 1rem 1.25rem 1.05rem; border-spacing: 0;
  background: color-mix(in srgb, var(--c) 7%, var(--raised));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); border-radius: var(--r-lg);
}
.doc .admonitionblock td.icon { padding: 0; margin-bottom: 0.45rem; width: auto; }
.doc .admonitionblock td.icon i, .doc .admonitionblock td.icon .title {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; background: none; border-radius: 0;
  font-size: 0.75rem; font-style: normal; font-weight: 700; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; color: var(--c);
}
.doc .admonitionblock td.icon i::before, .doc .admonitionblock td.icon .title::before {
  content: ""; width: 1.05rem; height: 1.05rem; background: currentColor;
  -webkit-mask: var(--i-note) center / contain no-repeat; mask: var(--i-note) center / contain no-repeat;
}
.doc .admonitionblock td.icon i::after { content: attr(title); }
.doc .admonitionblock.tip td.icon i::before, .doc .admonitionblock.tip td.icon .title::before { -webkit-mask-image: var(--i-tip); mask-image: var(--i-tip); }
.doc .admonitionblock.important td.icon i::before, .doc .admonitionblock.important td.icon .title::before { -webkit-mask-image: var(--i-important); mask-image: var(--i-important); }
.doc .admonitionblock.warning td.icon i::before, .doc .admonitionblock.warning td.icon .title::before { -webkit-mask-image: var(--i-warning); mask-image: var(--i-warning); }
.doc .admonitionblock.caution td.icon i::before, .doc .admonitionblock.caution td.icon .title::before { -webkit-mask-image: var(--i-caution); mask-image: var(--i-caution); }
.doc .admonitionblock td.content { padding: 0; color: var(--text-body); font-size: 1rem; line-height: 1.65; border: 0; }
.doc .admonitionblock td.content > :last-child, .doc .admonitionblock td.content > .paragraph:last-child > p { margin-bottom: 0; }
.doc .admonitionblock td.content > .title { margin-bottom: 0.4rem; color: var(--text); font-weight: 600; }

/* Tables. The table scroller is added by docs.js so wide tables never widen the page. */
.table-scroll { overflow-x: auto; max-width: 100%; border-radius: var(--r-lg); }
.table-scroll:focus-visible { box-shadow: var(--ring-focus); }
.doc table.tableblock {
  width: 100%; margin: 0 0 1.35rem; border-collapse: separate; border-spacing: 0;
  font-size: 0.9375rem; line-height: 1.55; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; hyphens: manual;
}
.table-scroll > table.tableblock { margin: 0; min-width: 34rem; }
.doc table.tableblock > caption { caption-side: top; padding: 0.85rem 1rem; text-align: left; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line); background: var(--surface); }
.doc table.tableblock th, .doc table.tableblock td { padding: 0.8rem 1rem; text-align: left; vertical-align: top; border: 0; border-top: 1px solid var(--line-subtle); }
.doc table.tableblock > :first-child > tr:first-child > * { border-top: 0; }
.doc table.tableblock > thead > tr > th, .doc table.tableblock > tbody > tr:first-child > th {
  background: var(--raised); color: var(--text-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.doc table.tableblock > thead > tr > th { border-bottom: 1px solid var(--line); }
.doc table.tableblock td { color: var(--text-body); }
.doc table.tableblock tbody tr:hover > td { background: rgb(55 39 161 / 0.14); }
.doc table.tableblock p.tableblock { margin: 0; }
.doc table.tableblock p.tableblock + p.tableblock { margin-top: 0.6rem; }
.doc table.tableblock td > .content > :last-child { margin-bottom: 0; }
.doc table.tableblock .halign-center { text-align: center; }
.doc table.tableblock .halign-right { text-align: right; }
.doc table.tableblock .valign-middle { vertical-align: middle; }
.doc table.tableblock.stripes-even > tbody > tr:nth-child(even) > td, .doc table.tableblock.stripes-odd > tbody > tr:nth-child(odd) > td { background: var(--fill); }
.doc table.tableblock.fit-content { width: auto; }
.doc table.tableblock.stretch { width: 100%; }
.doc table.tableblock.frame-none, .doc table.tableblock.grid-none { border-color: transparent; }

/* Code */
.doc .listingblock, .doc .literalblock { position: relative; }
.doc .listingblock > .title, .doc .literalblock > .title { margin-bottom: 0.4rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-2); }
.doc pre {
  position: relative; margin: 0; padding: 1.05rem 1.25rem; overflow-x: auto; tab-size: 2; -moz-tab-size: 2;
  font: 0.875rem/1.7 var(--font-mono); color: #e4e4e7; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); hyphens: none; white-space: pre;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.doc pre:focus-visible { box-shadow: var(--ring-focus); }
.doc pre code { display: block; padding: 0; font: inherit; color: inherit; background: none; border: 0; border-radius: 0; word-break: normal; }
.doc .listingblock .content { position: relative; }
.doc .source-toolbox { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; display: flex; align-items: center; gap: 0.5rem; opacity: 0; transition: opacity var(--dur-2); user-select: none; }
.doc .listingblock:hover .source-toolbox, .doc .listingblock:focus-within .source-toolbox, .doc .literalblock:hover .source-toolbox { opacity: 1; }
@media (hover: none) { .doc .source-toolbox { opacity: 1; } }
.doc .source-toolbox .source-lang { font: 600 0.6875rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.doc .source-toolbox .copy-button {
  position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-2);
  transition: color var(--dur-2), border-color var(--dur-2), background var(--dur-2);
}
.doc .source-toolbox .copy-button:hover { color: var(--text); border-color: var(--line-strong); background: var(--elevated); }
.doc .source-toolbox .copy-button .copy-icon { display: none; }
.doc .source-toolbox .copy-button::before { content: ""; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: var(--i-copy) center / contain no-repeat; mask: var(--i-copy) center / contain no-repeat; }
.copy-toast {
  position: absolute; right: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%); padding: 0.3rem 0.6rem; border-radius: var(--r-sm);
  background: var(--elevated); border: 1px solid var(--line); color: var(--text); font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity 0.5s ease 0.5s; pointer-events: none;
}
.copy-button.clicked .copy-toast { opacity: 1; transition: none; }
.doc .conum[data-value] { display: inline-block; min-width: 1.25rem; padding: 0 0.3rem; margin: 0 0.15rem; text-align: center; font: 700 0.7rem/1.3rem var(--font-sans); color: var(--bg); background: var(--coral-soft); border-radius: var(--r-pill); font-style: normal; }
.doc .conum[data-value]::after { content: attr(data-value); }
.doc .conum[data-value] + b { display: none; }
.doc .colist ol { padding-left: 0; list-style: none; counter-reset: callout; }
.doc .colist li { counter-increment: callout; display: flex; gap: 0.7rem; }
.doc .colist li::before { content: counter(callout); flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.3rem; text-align: center; font: 700 0.7rem/1.3rem var(--font-sans); color: var(--bg); background: var(--coral-soft); border-radius: var(--r-pill); }
.doc .colist td { padding: 0.25rem 0.75rem 0.25rem 0; vertical-align: top; }
.doc .colist td:first-child { color: var(--text); }

/* Syntax highlighting (highlight.js classes), tuned to the brand palette. */
.hljs-comment, .hljs-quote { color: #8b8b97; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-meta .hljs-keyword { color: #c084fc; }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-template-variable { color: #ffb199; }
.hljs-number, .hljs-built_in, .hljs-builtin-name, .hljs-symbol, .hljs-bullet { color: #6ba4fa; }
.hljs-title, .hljs-section, .hljs-title.function_, .hljs-class .hljs-title, .hljs-type { color: #a5b4fc; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-tag { color: #8cc8ff; }
.hljs-meta, .hljs-link { color: #94a3b8; }
.hljs-deletion { color: #fca5a5; background: rgb(239 68 68 / 0.12); }
.hljs-addition { background: rgb(16 185 129 / 0.12); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* Images and video: one frame treatment, with click to enlarge (docs.js) for screenshots. */
.doc .imageblock, .doc .videoblock { text-align: center; margin: 1.75rem 0; }
.doc .imageblock .content, .doc .videoblock .content { display: block; }
.doc .imageblock img, .doc .imageblock svg {
  display: inline-block; max-width: 100%; height: auto; vertical-align: middle;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3);
}
.doc .imageblock a.image { display: inline-block; }
.doc .imageblock img[data-zoomable] { cursor: zoom-in; transition: border-color var(--dur-2), transform var(--dur-3) var(--ease-out-expo); }
.doc .imageblock img[data-zoomable]:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.doc .imageblock .title, .doc .videoblock .title { margin-top: 0.75rem; font-size: 0.875rem; color: var(--text-2); text-align: center; font-style: normal; }
.doc span.image img { display: inline-block; vertical-align: middle; border-radius: var(--r-xs); }
.doc img.left-float { float: left; margin: 0 2rem 2rem 0; max-width: 50%; }
/* Animations: WebM/MP4 clips shown like GIFs, all in the same 16:9 frame. */
.doc video { max-width: 100%; }
.doc video.docs-anim {
  display: block; margin: 0 auto; height: auto; background: #0b0d14;
  border: 1px solid var(--line); box-shadow: var(--shadow-3);
}
.doc video.docs-anim--screen { width: 100%; max-width: 830px; aspect-ratio: 16 / 9; object-fit: contain; border-radius: var(--r-md); }
.doc video.docs-anim--phone { width: 220px; border-radius: 18px; }
.doc .videoblock iframe { max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); }

/* Lightbox for enlarged screenshots */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
.lightbox::backdrop { background: rgb(0 0 0 / 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox img { display: block; max-width: min(94vw, 1400px); max-height: 88vh; border-radius: var(--r-md); border: 1px solid var(--line-strong); box-shadow: var(--shadow-3); background: var(--surface); }
.lightbox-close {
  position: absolute; top: -2.75rem; right: 0; height: 2.25rem; padding: 0 1rem; border-radius: var(--r-pill);
  background: var(--raised); border: 1px solid var(--line-strong); color: var(--text); font-weight: 600; font-size: 0.875rem;
}

/* 8. Section cards, home, pagination, 404 ----------------------------------------------- */
.doc .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }
.doc--home h1.page { font-size: clamp(2.75rem, 1.8rem + 3.6vw, 4.5rem); font-weight: 300; letter-spacing: -0.045em; line-height: 1; }
.doc--home .lede { font-size: 1.4375rem; }
.section-cards { margin: 3.5rem 0 0; }
.section-cards--home { margin: 2.5rem 0 3rem; }
.section-cards-title { margin: 0 0 1.1rem !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2) !important; }
.doc .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.25rem; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.doc .cards > li { margin: 0; }
/* li.card is needed: the generic list item rule would otherwise win and remove the left padding. */
.doc .cards > li.card {
  position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.6rem 1.75rem 1.5rem;
  background: linear-gradient(165deg, rgb(20 24 33 / 0.98), rgb(16 18 24 / 0.98));
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  transition: border-color var(--dur-3), background var(--dur-3), transform var(--dur-3) var(--ease-out-expo);
}
.card:hover { background: linear-gradient(165deg, rgb(26 31 46 / 0.98), rgb(20 24 33 / 0.98)); border-color: var(--line-strong); transform: translateY(-2px); }
.card-link { display: block; padding-right: 2rem; color: var(--text); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link::before {
  content: ""; position: absolute; top: 1.75rem; right: 1.6rem; width: 1.05rem; height: 1.05rem; background: var(--text-3);
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat;
  transition: transform var(--dur-3) var(--ease-out-expo), background var(--dur-2);
}
.card:hover .card-link::before { background: var(--coral); transform: translateX(3px); }
.card-link:focus-visible { box-shadow: none; }
.card:has(.card-link:focus-visible) { box-shadow: var(--ring-focus); }
.doc .card-children { display: grid; gap: 0.15rem; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 0.96875rem; line-height: 1.45; }
.doc .card-children li { margin: 0; padding: 0.2rem 0; }
.doc .card-children a { position: relative; z-index: 1; color: var(--text-2); text-decoration: none; }
.doc .card-children a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
.card-more { color: var(--text-3); font-size: 0.8125rem; }
/* Single-page sections: one slim row of equal cards below the section cards, hidden when there are none. */
.doc .cards--single { margin-top: 1.25rem; }
.doc .cards--single:empty { display: none; }
.doc .cards > li.card--single { padding: 1.15rem 1.75rem; justify-content: center; }
.card--single .card-link::before { top: 50%; margin-top: -0.525rem; }

.pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.pagination > span { display: block; min-width: 0; }
.pagination .prev { grid-column: 1; }
.pagination .next { grid-column: 2; text-align: right; }
.pagination a {
  display: block; height: 100%; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--text); font-weight: 600; line-height: 1.35; text-decoration: none; transition: border-color var(--dur-2), background var(--dur-2);
}
.pagination a:hover { border-color: var(--line-strong); background: var(--raised); }
.pagination a::before { display: block; margin-bottom: 0.3rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); }
.pagination .prev a::before { content: "Previous"; }
.pagination .next a::before { content: "Next"; }

.status-404 .doc, .doc--404 { padding-top: 5rem; }
.doc--404 .eyebrow { margin-bottom: 1.25rem; }

/* 9. Search results (lunr UI), footer, responsive, print, reduced motion --------------- */
#search-field .search-result-dropdown-menu {
  position: absolute; z-index: 100; top: 100%; left: 0; right: auto; width: min(42rem, calc(100vw - 2rem)); min-width: 0; max-width: none;
  margin: 0.5rem 0 0; padding: 0; background: none; border: 0; box-shadow: none;
}
#search-field .search-result-dataset {
  max-height: min(70vh, 34rem); overflow: auto; padding: 0.5rem; line-height: 1.5;
  background: var(--elevated); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
#search-field .search-result-component-header {
  margin: 0.25rem 0.5rem 0; padding: 0.7rem 0.25rem 0.5rem; border-bottom: 1px solid var(--line);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2);
}
#search-field .search-result-item { display: flex; gap: 0.75rem; margin: 0.35rem 0 0; }
#search-field .search-result-document-title {
  width: 32%; flex: none; padding: 0.6rem 0.5rem 0.6rem 0.25rem; border-right: 1px solid var(--line);
  font-size: 0.8125rem; font-weight: 600; color: var(--text-2); text-align: right; overflow-wrap: anywhere;
}
#search-field .search-result-document-hit { flex: 1; min-width: 0; font-size: 0.875rem; color: var(--text-body); }
#search-field .search-result-document-hit > a { display: block; padding: 0.6rem 0.75rem; border-radius: var(--r-sm); color: inherit; text-decoration: none; }
#search-field .search-result-document-hit > a:hover, #search-field .search-result-document-hit > a:focus-visible { background: var(--fill); box-shadow: var(--glow-select-soft); color: var(--text); }
#search-field .search-result-section-title { display: block; margin-bottom: 0.15rem; font-weight: 600; font-size: 0.9375rem; color: var(--text); }
#search-field .search-result-highlight { padding: 0 0.15em; border-radius: 3px; background: rgb(255 110 80 / 0.25); color: var(--text); font-weight: 600; }
#search-field .search-result-keywords { margin-top: 0.25rem; font-size: 0.75rem; color: var(--text-2); }
#search-field .search-result-keywords-field-label { color: var(--text-2); font-weight: 600; }

/* Footer */
.footer { padding: 2.5rem var(--gutter) 3rem; background: var(--surface); border-top: 1px solid var(--line-subtle); color: var(--text-2); font-size: 0.875rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; max-width: 80rem; margin: 0 auto; }
.footer-brand { display: inline-flex; align-items: center; gap: 0.85rem; color: var(--text-2); }
.footer-brand img { display: block; height: 1.75rem; width: auto; opacity: 0.9; }
.footer-brand p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: var(--text-2); text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }

/* Wide: "On this page" in its own column. */
@media (min-width: 1200px) {
  aside.toc.embedded { display: none; }
}
/* Below that, the contents become a collapsed block at the top of the article. */
@media (max-width: 1199.5px) {
  aside.toc.sidebar { display: none; }
  aside.toc.embedded {
    display: block; margin: 0 0 2.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  }
  .toc.embedded .toc-menu h3 { margin: 0; padding: 1rem 1.15rem; }
  .toc.embedded .toc-menu ul { margin: 0 0 0.5rem; padding: 0 0.6rem 0.75rem; border-left: 0; }
  .toc.embedded .toc-menu a { margin-left: 0; padding-left: 0.6rem; border-left: 0; border-radius: var(--r-sm); }
  .toc.embedded .toc-menu a.is-active { background: var(--fill); }
  .toc-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 1rem 1.15rem;
    background: none; border: 0; text-align: left; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2);
  }
  .toc-toggle::after { content: ""; width: 0.45rem; height: 0.45rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--dur-2); }
  .toc-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
  .toc.embedded.is-collapsed .toc-menu ul { display: none; }
}

/* Drawer navigation and the burger menu below desktop width. */
@media (max-width: 1023.5px) {
  .body { display: block; }
  .nav-toggle { display: inline-block; }
  .nav-container {
    position: fixed; top: var(--sticky-top); bottom: 0; left: 0; width: min(20rem, 86vw); height: auto; z-index: 60;
    transform: translateX(-102%); visibility: hidden; transition: transform var(--dur-3) var(--ease-out-expo), visibility 0s linear var(--dur-3);
  }
  .nav-container.is-active { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out-expo), visibility 0s; box-shadow: var(--shadow-3); }
  html.is-clipped--nav body::after { content: ""; position: fixed; inset: var(--sticky-top) 0 0 0; z-index: 55; background: rgb(0 0 0 / 0.6); }
  .navbar-burger { display: inline-block; }
  .navbar-menu {
    display: none; position: fixed; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 0.75rem var(--gutter) 1.25rem;
    background: var(--elevated); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-3);
  }
  .navbar-menu.is-active { display: flex; }
  .navbar-end { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .navbar-item, .navbar-link { padding: 0.75rem 0.85rem; border-radius: var(--r-md); }
  .navbar-item.has-dropdown { display: block; }
  .navbar-link { width: 100%; justify-content: flex-start; cursor: default; }
  .navbar-link::after { display: none; }
  .navbar-dropdown { position: static; display: block; padding: 0 0 0 1rem; background: none; border: 0; box-shadow: none; }
  .navbar-item .button { width: 100%; height: 2.75rem; }
  .doc { padding-top: 2rem; }
}
@media (max-width: 767.5px) {
  :root { --header-h: 3.5rem; --toolbar-h: 2.5rem; }
  .breadcrumbs li:not(:last-child):not(:nth-last-child(2)) { display: none; }
  .breadcrumbs li:nth-last-child(2)::before { display: none; }
  .brand .brand-wordmark { height: 2.3rem; }
  .navbar { gap: 0.5rem; }
  .navbar-brand { gap: 0.75rem; }
  .search { flex: 1 1 auto; position: static; }
  #search-field .search-result-dropdown-menu { position: fixed; top: var(--header-h); left: 0.75rem; right: 0.75rem; width: auto; }
  #search-field .search-result-item { display: block; }
  #search-field .search-result-document-title { width: auto; text-align: left; border-right: 0; padding-bottom: 0; }
  .search-kbd { display: none; }
  .doc { font-size: 1.0625rem; }
  .doc h2 { font-size: 1.5rem; margin-top: 2.75rem; }
  .doc h3 { font-size: 1.1875rem; }
  .doc .lede { font-size: 1.1875rem; }
  .doc h2 > a.anchor, .doc h3 > a.anchor, .doc h4 > a.anchor { display: none; }
  .pagination { grid-template-columns: 1fr; }
  .pagination .prev, .pagination .next { grid-column: 1; text-align: left; }
  .doc .admonitionblock > table { padding: 0.9rem 1rem; }
}

/* Print: a plain light page, no chrome. */
@page { margin: 0.6in; }
@media print {
  html, body { background: #fff; color: #1b1b1f; }
  .header, .nav-container, .toolbar, aside.toc, .pagination, .search, .skip-link, .source-toolbox, .section-cards, .footer-links { display: none !important; }
  .body { display: block; padding-top: 0; }
  main > .content { display: block; padding: 0; }
  main > .content::before { display: none; }
  .doc { max-width: none; padding: 0; color: #1b1b1f; font-size: 11pt; }
  .doc h1.page, .doc h2, .doc h3, .doc h4, .doc strong, .doc b { color: #000; }
  .doc a, .doc a:not(.anchor):not(.card-link):not(.card-child):not(.button) { color: inherit; text-decoration: underline; }
  .doc pre, .doc :not(pre) > code, .doc .admonitionblock > table, .doc table.tableblock { background: #f6f6f8; color: #1b1b1f; border-color: #cfcfd6; }
  .doc table.tableblock th, .doc table.tableblock td { color: #1b1b1f; background: none; }
  .doc pre { white-space: pre-wrap; }
  .doc .imageblock img, .doc video { box-shadow: none; }
  img, tr, pre, .admonitionblock { break-inside: avoid; }
  thead { display: table-header-group; }
  .footer { background: none; border-top: 1px solid #cfcfd6; color: #5b5b63; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}


/* 10. Video tutorials -------------------------------------------------------------------- */
/* Library cards, player, chapters and the "Watch the video" box that sits on guide pages. */
.vt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; margin: 2rem 0 0; }
.vt-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none !important;
  transition: transform var(--dur-3) var(--ease-out-expo), border-color var(--dur-2), box-shadow var(--dur-3) var(--ease-out-expo);
}
.vt-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-3), var(--glow-row); }
.vt-card:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.vt-card__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.vt-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform 600ms var(--ease-out-expo); }
.vt-card:hover .vt-card__media img { transform: scale(1.04); }
.vt-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(9 9 11 / 0) 45%, rgb(9 9 11 / 0.55)); }
.vt-card__play {
  position: absolute; z-index: 1; left: 1rem; bottom: 0.9rem; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-deep), var(--purple) 55%, var(--coral)); box-shadow: 0 6px 22px rgb(124 58 237 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.22);
  transition: transform var(--dur-3) var(--ease-out-expo);
}
.vt-card__play::before { content: ""; position: absolute; left: 54%; top: 50%; width: 0.85rem; height: 0.95rem; background: #fff; transform: translate(-50%, -50%); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.vt-card:hover .vt-card__play { transform: scale(1.12); }
.vt-card__time {
  position: absolute; z-index: 1; right: 0.7rem; bottom: 0.7rem; padding: 0.15rem 0.55rem; border-radius: var(--r-pill);
  background: rgb(9 9 11 / 0.78); border: 1px solid var(--line-strong); color: var(--text); font: 600 0.75rem/1.4 var(--font-mono); letter-spacing: 0.02em;
}
.vt-card__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.15rem 1.2rem; }
.vt-card__title { color: var(--text); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.vt-card__text { color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }

.vt-player { margin: 1.5rem 0 0; }
.vt-video {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: #000; object-fit: contain;
  border: 1px solid var(--line-strong); box-shadow: 0 30px 80px -30px rgb(124 58 237 / 0.45), var(--shadow-3);
}
.vt-player__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.8rem 0 0; padding: 0; color: var(--text-3); font-size: 0.8125rem; }
.vt-player__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.vt-player__meta span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }

.doc ol.vt-chapters { margin-left: 0; padding-left: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.5rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.vt-chapters li { margin: 0; padding: 0; }
.vt-chapter {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6rem 0.85rem; border-radius: var(--r-md); text-align: left; cursor: pointer;
  background: var(--fill); border: 1px solid var(--line-subtle); color: var(--text-body); font: inherit; font-size: 0.9rem; line-height: 1.3;
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.vt-chapter:hover { background: var(--fill-hover); border-color: var(--line-strong); color: var(--text); }
.vt-chapter:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.vt-chapter__time { flex: none; min-width: 2.9rem; padding: 0.1rem 0.45rem; border-radius: var(--r-pill); background: rgb(255 110 80 / 0.12); color: var(--coral-soft); font: 600 0.75rem/1.5 var(--font-mono); text-align: center; }
.vt-chapter.is-active { background: rgb(55 39 161 / 0.35); border-color: rgb(139 156 248 / 0.45); box-shadow: var(--glow-select-soft); color: var(--text); }
.vt-chapter.is-active .vt-chapter__time { background: var(--coral); color: #09090b; }

.vt-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.6rem; }
.vt-mini {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 1rem; border-radius: var(--r-md);
  background: var(--fill); border: 1px solid var(--line-subtle); color: var(--text) !important; text-decoration: none !important; font-weight: 500; font-size: 0.925rem;
  transition: background var(--dur-2), border-color var(--dur-2);
}
.vt-mini:hover { background: var(--fill-hover); border-color: var(--line-strong); }
.vt-mini__time { flex: none; color: var(--text-3); font: 500 0.75rem/1 var(--font-mono); }

.vt-transcript { margin: 1rem 0 0; padding: 0.2rem 1.1rem; border-radius: var(--r-md); background: var(--fill); border: 1px solid var(--line-subtle); }
.vt-transcript summary { cursor: pointer; padding: 0.8rem 0; color: var(--text); font-weight: 500; }
.vt-transcript p { margin: 0 0 0.75rem; color: var(--text-body); font-size: 0.95rem; line-height: 1.65; }

/* "What you will learn": a check list on the video pages only. */
article.doc .vt-learn ul { list-style: none; padding-left: 0; }
article.doc .vt-learn > ul > li { position: relative; padding-left: 1.9rem; margin: 0.55rem 0; }
article.doc .vt-learn > ul > li::before {
  content: ""; position: absolute; left: 0; top: 0.28rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: rgb(52 211 153 / 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%2334d399' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* "Watch the video" box on guide pages: [.watch-video] **** ... **** */
.doc .sidebarblock.watch-video {
  position: relative; overflow: hidden; margin: 1.75rem 0; padding: 0; border-radius: var(--r-lg);
  background: radial-gradient(120% 160% at 0% 0%, rgb(55 39 161 / 0.55), rgb(15 17 21 / 0.95) 55%), var(--surface);
  border: 1px solid rgb(139 156 248 / 0.28); box-shadow: var(--shadow-2);
}
.doc .sidebarblock.watch-video > .content {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; align-items: center; padding: 1.1rem 1.4rem 1.1rem 1.2rem;
}
.doc .sidebarblock.watch-video > .content::before {
  content: ""; grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-deep), var(--purple) 55%, var(--coral));
  box-shadow: 0 6px 22px rgb(124 58 237 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.22);
  clip-path: none; mask: none;
}
.doc .sidebarblock.watch-video > .content::after {
  content: ""; grid-column: 1; grid-row: 1 / span 3; align-self: center; justify-self: center; width: 0.95rem; height: 1.1rem; margin-left: 0.15rem; background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.doc .sidebarblock.watch-video > .content > * { grid-column: 2; margin: 0 !important; }
.doc .sidebarblock.watch-video .eyebrow { margin: 0; font-size: 0.68rem; }
.doc .sidebarblock.watch-video .eyebrow::before { width: 1.2rem; }
.doc .sidebarblock.watch-video p { color: var(--text-2); font-size: 0.925rem; line-height: 1.5; }
.doc .sidebarblock.watch-video p a { color: var(--text) !important; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none !important; }
.doc .sidebarblock.watch-video p a::after { content: " \2192"; color: var(--coral); transition: margin-left var(--dur-2); }
.doc .sidebarblock.watch-video p a:hover::after { margin-left: 0.25rem; }
@media (max-width: 600px) {
  .doc .sidebarblock.watch-video > .content { grid-template-columns: 1fr; }
  .doc .sidebarblock.watch-video > .content::before, .doc .sidebarblock.watch-video > .content::after { display: none; }
  .doc .sidebarblock.watch-video > .content > * { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .vt-card, .vt-card__media img, .vt-card__play, .vt-chapter { transition: none; } .vt-card:hover { transform: none; } }
@media print { .vt-player, .vt-chapters, .vt-grid { display: none; } }