/* Copied Console Tailwind preflight, theme tokens, GitHub syntax theme, and documentation styles. */

@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--font-weight-medium:500;--font-weight-semibold:600;--tracking-wide:.025em;--tracking-wider:.05em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--aspect-video:16/9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-border:var(--border)}}
@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}
:root {
  /* The authenticated console shares the river.ai marketing palette used
   * on the login / legal pages: a warm cream "paper" field with deep navy
   * ink. Tokens map the old dark-theme names onto the brand colors so the
   * whole app (inline styles + Tailwind `var(--…)` utilities) re-themes
   * without per-component changes. Brand source: pages/LandingPage.css. */

  color-scheme: light;

  /* Neutral working canvas. The warm paper color belongs only to app chrome. */
  --bg-base: #fbfbfa;
  --bg-surface: #fff;
  --bg-elevated: #fff;
  --bg-hover: #f1f2f2;

  /* White navigation with the brand paper reserved for the active item. */
  --sidebar-bg: #fff;
  --sidebar-hover: #f1f2f2;
  --sidebar-active: #f2e9d6;
  --sidebar-active-text: #383835;
  --sidebar-text: #383835;

  /* Neutral rules keep the working canvas separate from the paper sidebar. */
  --border-subtle: #e5e5e1;
  --border-default: #d6d6d0;
  --border-strong: #c3c3ba;

  /* Text — navy ink (matches the login wordmark/body, not near-black). */
  --text-primary: #0e2f7e;
  --text-secondary: #41507a;
  --text-tertiary: #6b7898;

  /* Accent — River navy (white button labels stay legible on it). */
  --accent: #0e2f7e;
  --accent-hover: #081c50;
  --accent-muted: rgba(14, 47, 126, 0.12);
  --accent-contrast: #fff;

  /* Status colors — tuned for legibility on cream. */
  --success: #2f7d57;
  --success-muted: rgba(47, 125, 87, 0.14);
  --warning: #9a6a1c;
  --warning-muted: rgba(154, 106, 28, 0.16);
  --danger: #b1453b;
  --danger-muted: rgba(177, 69, 59, 0.12);
  --danger-contrast: #fff;

  --code: #c24f1d;
  --code-muted: rgba(194, 79, 29, 0.12);

  /* shadcn tokens resolve through the Console's semantic palette. Their
   * references remain live when [data-theme] changes the underlying values. */
  --background: var(--bg-base);
  --foreground: var(--text-primary);
  --card: var(--bg-surface);
  /* Card bodies use neutral ink; cards opt into the River blue for headings. */
  --card-foreground: var(--sidebar-text);
  --popover: var(--bg-elevated);
  --popover-foreground: var(--text-primary);
  --primary: var(--accent);
  --primary-foreground: var(--accent-contrast);
  --secondary: var(--bg-elevated);
  --secondary-foreground: var(--text-primary);
  --muted: var(--bg-hover);
  --muted-foreground: var(--text-secondary);
  --accent-foreground: var(--accent-contrast);
  --destructive: var(--danger);
  --destructive-foreground: var(--danger-contrast);
  --border: var(--border-default);
  --input: var(--border-default);
  --ring: var(--accent);
  --radius: 0.5rem;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Charcoal workspace layers; blue stays reserved for interactions. */
  --bg-base: #151719;
  --bg-surface: #1c1f23;
  --bg-elevated: #23262b;
  --bg-hover: #2b2f34;

  --sidebar-bg: #141619;
  --sidebar-hover: #1d2228;
  /* A muted warm active state mirrors the light theme's paper selection. */
  --sidebar-active: #332f25;
  --sidebar-active-text: #f0e6cd;
  --sidebar-text: #e7e9ec;

  --border-subtle: #30343a;
  --border-default: #3d424a;
  --border-strong: #575e68;

  --text-primary: #f0f1f2;
  --text-secondary: #c2c6cb;
  --text-tertiary: #969ca4;

  --accent: #86a8ee;
  --accent-hover: #a2bdf4;
  --accent-muted: rgba(134, 168, 238, 0.16);
  --accent-contrast: #111317;

  --success: #78b896;
  --success-muted: rgba(120, 184, 150, 0.16);
  --warning: #d5ae67;
  --warning-muted: rgba(213, 174, 103, 0.16);
  --danger: #df8a83;
  --danger-muted: rgba(223, 138, 131, 0.16);
  --danger-contrast: #201313;

  --code: #b7c9ee;
  --code-muted: rgba(134, 168, 238, 0.14);
}


* {
  box-sizing: border-box;
}

html {
  background-color: var(--bg-base);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family:
    "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  height: 100%;
}

#root {
  height: 100%;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* Focus styling */
*:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

/* Selection — solid navy fill with cream text. A faint navy tint (12%) behind
 * navy ink was effectively invisible, so highlighted text gave no feedback. */
::selection {
  background-color: var(--accent);
  color: var(--bg-elevated);
}
::-moz-selection {
  background-color: var(--accent);
  color: var(--bg-elevated);
}


pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/
.hljs {
  color: #24292e;
  background: #ffffff
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #d73a49
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #6f42c1
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #005cc5
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #032f62
}
.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  color: #e36209
}
.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  color: #6a737d
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #22863a
}
.hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #24292e
}
.hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #005cc5;
  font-weight: bold
}
.hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #735c0f
}
.hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #24292e;
  font-style: italic
}
.hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #24292e;
  font-weight: bold
}
.hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #22863a;
  background-color: #f0fff4
}
.hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #b31d28;
  background-color: #ffeef0
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  /* purposely ignored */

}
/*
 * River API documentation page. Standalone full-screen page that inherits
 * the console's brand palette (cream "paper" + navy ink, defined in
 * index.css) via the shared design tokens — so it stays in sync with the
 * rest of the app's theme. Tuned for long-form technical reading with code
 * blocks and tables: a sticky top bar, a sticky table of contents, and the
 * rendered markdown article.
 */

.docs-root {
  /* Alias the console's shared tokens so the page re-themes with the app. */
  --docs-bg: var(--bg-base);
  --docs-surface: var(--bg-surface);
  --docs-border: var(--border-subtle);
  --docs-text: var(--text-primary);
  --docs-text-2: var(--text-secondary);
  --docs-text-3: var(--text-tertiary);
  --docs-accent: var(--accent);
  --docs-code-bg: var(--bg-elevated);

  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  background: var(--docs-bg);
  color: var(--docs-text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-user-select: text;
  user-select: text;
  cursor: auto;
}

.docs-root ::selection {
  background: var(--accent);
  color: var(--bg-elevated);
}

/* ------------------------------ Top bar ----------------------------- */

.docs-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Match the console sidebar header exactly (56px tall, fixed 16px left inset
   * = Tailwind px-4) so the River logo lands in the same place and size and
   * doesn't jump on navigation. A growing clamp here pushed the logo right on
   * wide screens while the sidebar logo stays pinned at 16px. */
  height: 56px;
  padding: 0 clamp(1rem, 4vw, 2.5rem) 0 1rem;
  /* Match the console's header/sidebar surface (--bg-surface) so the docs top
   * bar reads as the same app chrome rather than the darker content field. */
  background: var(--bg-surface);
  border-bottom: 1px solid var(--docs-border);
}

.docs-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.docs-logo {
  height: 20px;
  width: auto;
  color: var(--docs-accent);
  display: block;
}

.docs-divider {
  width: 1px;
  height: 17px;
  background: var(--docs-border);
  /* Optical nudge: the wordmark's x-height center sits ~2px below the logo
   * SVG's geometric center (viewBox 51 75 709 176), so plain center-alignment
   * floats the divider/label slightly high next to "river". */
  transform: translateY(1.5px);
}

/* A quiet uppercase "eyebrow" label so it reads as a secondary descriptor of
 * the brand mark rather than competing with the navy wordmark beside it. */
.docs-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--docs-text-2);
  white-space: nowrap;
  transform: translateY(1.5px);
}

.docs-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.docs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 13px;
  font-weight: 500;
  padding: 0.46rem 0.9rem;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background 140ms ease,
    color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.docs-btn svg {
  width: 15px;
  height: 15px;
}

.docs-btn-ghost {
  background: transparent;
  color: var(--docs-text-2);
  border-color: var(--docs-border);
}

.docs-btn-ghost:hover {
  background: var(--docs-surface);
  color: var(--docs-text);
  border-color: var(--border-default);
}

.docs-btn-primary {
  background: var(--docs-accent);
  color: var(--accent-contrast);
}

.docs-btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--docs-accent) 30%, transparent);
}

/* ------------------------------ Body -------------------------------- */

.docs-body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 1500px;
  margin: 0 auto;
  padding: 2.5rem clamp(1rem, 4vw, 2.5rem) 6rem;
  color: var(--docs-text-2);
}

.docs-toc {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  font-size: 13px;
  padding-right: 0.5rem;
}

.docs-toc-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--docs-text-3);
  margin-bottom: 0.75rem;
}

.docs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.docs-toc a {
  display: block;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  color: var(--docs-text-2);
  text-decoration: none;
  transition:
    background 120ms ease,
    color 120ms ease;
}

.docs-toc a:hover {
  background: var(--docs-surface);
  color: var(--docs-accent);
}

/* ---------------------------- Article ------------------------------- */

.docs-content {
  min-width: 0;
  max-width: 1080px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--docs-text-2);
}

.docs-content > :first-child {
  margin-top: 0;
}

.docs-content h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--docs-text);
  margin: 0 0 1rem;
}

.docs-content h2 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--docs-text);
  margin: 2.25rem 0 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--docs-border);
  /* Sticky top bar is ~3.5rem; offset anchor jumps so headings aren't hidden. */
  scroll-margin-top: 5.5rem;
}

.docs-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--docs-text);
  margin: 1.75rem 0 0.6rem;
  scroll-margin-top: 5.5rem;
}

.docs-content p {
  margin: 0 0 1rem;
}

.docs-content strong {
  color: var(--docs-text);
  font-weight: 600;
}

.docs-content a {
  color: var(--docs-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.docs-content ul,
.docs-content ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.docs-content ul {
  list-style: disc;
}

.docs-content ol {
  list-style: decimal;
}

.docs-content li {
  margin: 0.3rem 0;
}

.docs-content li::marker {
  color: var(--docs-text-3);
}

/* The guide places a `---` before every `## ` heading; the heading already
 * carries its own top rule, so the markdown rule would double up the line and
 * pile on whitespace. Drop it and let the heading's border be the divider. */
.docs-content hr {
  display: none;
}

/* Inline code */
.docs-content code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Disable programming-font ligatures so "<|im_end|>" doesn't render as
   * arrows/triangles. */
  font-variant-ligatures: none;
  font-feature-settings:
    "liga" 0,
    "calt" 0;
  font-size: 0.85em;
  /* Mirror the code-block look (cream surface + border) so inline code reads
   * as code and not as a selection highlight, which shares --accent-muted. */
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  padding: 0.1rem 0.34rem;
  border-radius: 5px;
}

/* Code blocks */
.docs-codeblock {
  position: relative;
  margin: 0 0 1.25rem;
}

.docs-code-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  font-size: 11px;
  font-weight: 500;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  color: var(--docs-text-2);
  background: var(--bg-elevated);
  border: 1px solid var(--docs-border);
  opacity: 0;
  transition:
    opacity 120ms ease,
    background 120ms ease,
    color 120ms ease;
}

.docs-codeblock:hover .docs-code-copy,
.docs-code-copy:focus-visible {
  opacity: 1;
}

.docs-code-copy:hover {
  background: var(--docs-surface);
  color: var(--docs-text);
}

.docs-content pre {
  background: var(--docs-code-bg);
  border: 1px solid var(--docs-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  margin: 0;
  line-height: 1.55;
}

.docs-content pre code {
  background: transparent;
  color: var(--docs-text);
  border: 0;
  padding: 0;
  font-size: 13px;
}

/* highlight.js' GitHub light theme paints a background on .hljs; keep our
 * pre's bg instead so code blocks match the page. */
.docs-content pre code.hljs {
  background: transparent;
  padding: 0;
}

/* The imported GitHub theme supplies light-mode syntax colors. Override every
 * foreground (and the change-markup backgrounds) when the Console is dark so
 * no syntax token is rendered with a light-theme color on the charcoal code
 * surface. Each foreground meets WCAG AA (4.5:1 or better) on --docs-code-bg. */
[data-theme="dark"] .docs-content pre code.hljs {
  color: #c9d1d9;
}

[data-theme="dark"] .docs-content pre .hljs-doctag,
[data-theme="dark"] .docs-content pre .hljs-keyword,
[data-theme="dark"] .docs-content pre .hljs-meta .hljs-keyword,
[data-theme="dark"] .docs-content pre .hljs-template-tag,
[data-theme="dark"] .docs-content pre .hljs-template-variable,
[data-theme="dark"] .docs-content pre .hljs-type,
[data-theme="dark"] .docs-content pre .hljs-variable.language_ {
  color: #ff7b72;
}

[data-theme="dark"] .docs-content pre .hljs-title,
[data-theme="dark"] .docs-content pre .hljs-title.class_,
[data-theme="dark"] .docs-content pre .hljs-title.class_.inherited__,
[data-theme="dark"] .docs-content pre .hljs-title.function_ {
  color: #d2a8ff;
}

[data-theme="dark"] .docs-content pre .hljs-attr,
[data-theme="dark"] .docs-content pre .hljs-attribute,
[data-theme="dark"] .docs-content pre .hljs-literal,
[data-theme="dark"] .docs-content pre .hljs-meta,
[data-theme="dark"] .docs-content pre .hljs-number,
[data-theme="dark"] .docs-content pre .hljs-operator,
[data-theme="dark"] .docs-content pre .hljs-variable,
[data-theme="dark"] .docs-content pre .hljs-selector-attr,
[data-theme="dark"] .docs-content pre .hljs-selector-class,
[data-theme="dark"] .docs-content pre .hljs-selector-id {
  color: #79c0ff;
}

[data-theme="dark"] .docs-content pre .hljs-regexp,
[data-theme="dark"] .docs-content pre .hljs-string,
[data-theme="dark"] .docs-content pre .hljs-meta .hljs-string {
  color: #a5d6ff;
}

[data-theme="dark"] .docs-content pre .hljs-built_in,
[data-theme="dark"] .docs-content pre .hljs-symbol {
  color: #ffa657;
}

[data-theme="dark"] .docs-content pre .hljs-comment,
[data-theme="dark"] .docs-content pre .hljs-code,
[data-theme="dark"] .docs-content pre .hljs-formula {
  color: #8b949e;
}

[data-theme="dark"] .docs-content pre .hljs-name,
[data-theme="dark"] .docs-content pre .hljs-quote,
[data-theme="dark"] .docs-content pre .hljs-selector-tag,
[data-theme="dark"] .docs-content pre .hljs-selector-pseudo {
  color: #7ee787;
}

[data-theme="dark"] .docs-content pre .hljs-subst,
[data-theme="dark"] .docs-content pre .hljs-emphasis,
[data-theme="dark"] .docs-content pre .hljs-strong {
  color: #c9d1d9;
}

[data-theme="dark"] .docs-content pre .hljs-section {
  color: #86a8ee;
}

[data-theme="dark"] .docs-content pre .hljs-bullet {
  color: #f2cc60;
}

[data-theme="dark"] .docs-content pre .hljs-addition {
  color: #aff5b4;
  background-color: #033a16;
}

[data-theme="dark"] .docs-content pre .hljs-deletion {
  color: #ffdcd7;
  background-color: #67060c;
}

/* Tables */
.docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.5rem;
  font-size: 13.5px;
  display: block;
  overflow-x: auto;
}

.docs-content thead {
  border-bottom: 2px solid var(--docs-border);
}

.docs-content th {
  text-align: left;
  font-weight: 600;
  color: var(--docs-text);
  padding: 0.55rem 0.8rem;
  vertical-align: top;
  white-space: nowrap;
}

.docs-content td {
  padding: 0.55rem 0.8rem;
  border-top: 1px solid var(--docs-border);
  vertical-align: top;
  color: var(--docs-text-2);
}

.docs-content tbody tr:nth-child(even) {
  background: var(--docs-surface);
}

.docs-content details {
  margin: 0 0 1.25rem;
  border: 1px solid var(--docs-border);
  border-radius: 10px;
  background: var(--docs-surface);
  padding: 0 1rem;
}

.docs-content details[open] {
  padding-bottom: 0.5rem;
}

.docs-content summary {
  cursor: pointer;
  padding: 0.8rem 0.25rem;
  font-weight: 600;
  color: var(--docs-text);
  list-style: revert;
}

.docs-content summary:hover {
  color: var(--docs-accent);
}

.docs-content img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--docs-border);
  border-radius: 10px;
  margin: 0.5rem 0 1.25rem;
}

.docs-content blockquote {
  margin: 0 0 1rem;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 3px solid var(--docs-accent);
  color: var(--docs-text-3);
}

/* --------------------------- Responsive ----------------------------- */

@media (max-width: 860px) {
  .docs-toc {
    display: none;
  }
  .docs-body {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.1rem 4rem;
  }
  .docs-content {
    max-width: none;
  }
}