/* zeroshot docs. A plain reading surface; the brand lives at the edges: the crow and the
   handwritten wordmark in the header, and the hand-drawn graphs.

   One sans on one scale, at Material's 20px rem: 30 / 20 / 17 / 16 / 14 / 13 px, weights 400, 500
   and 600. Colour is neutral warm grey; rust appears only in warnings and the graphs. Material's rem
   rises to 22px on wide screens; --oe-reading-unit keeps article type steady there. */

:root {
  --oe-reading-unit: 1rem;
  --oe-paper: #fdfcfa;
  --oe-surface: #f5f3ef;
  --oe-ink: #1c1917;
  --oe-ink-2: #44403c;
  --oe-muted: #78716c;
  --oe-hairline: #e7e5e4;
  --oe-rule: #d6d3d1;
  --oe-rust: #c2240c;
  --oe-underline: rgb(28 25 23 / 28%);
  --oe-highlight: #fdeb6d;
  --oe-marker-ink: #26221c;
  --oe-code-string: #8a4b08;
  --oe-code-number: #b42318;
  --oe-figure: #faf7f1;
  --oe-slash: #a39a8c;
  --oe-marker: 'Reenie Beanie', 'Bradley Hand', 'Marker Felt', cursive;
  --oe-serif: 'Fraunces', georgia, 'Times New Roman', serif;
  --oe-sans: 'Spline Sans', system-ui, sans-serif;
  --oe-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', menlo, monospace;
}

@media screen and (min-width: 100em) {
  :root {
    --oe-reading-unit: calc(1rem / 1.1);
  }
}

@media screen and (min-width: 125em) {
  :root {
    --oe-reading-unit: calc(1rem / 1.2);
  }
}

[data-md-color-scheme='slate'] {
  --oe-paper: #141210;
  --oe-surface: #1f1c19;
  --oe-ink: #f5f5f4;
  --oe-ink-2: #d6d3d1;
  --oe-muted: #a8a29e;
  --oe-hairline: #2a2623;
  --oe-rule: #3d3833;
  --oe-rust: #ed6b55;
  --oe-underline: rgb(245 245 244 / 35%);
  --oe-highlight: #6b5a14;
  --oe-marker-ink: #f1ece3;
  --oe-code-string: #f2d36b;
  --oe-code-number: #f2a58f;
  --oe-figure: #171411;
}

[data-md-color-scheme] {
  --md-default-bg-color: var(--oe-paper);
  --md-default-fg-color: var(--oe-ink);
  --md-default-fg-color--light: var(--oe-ink-2);
  --md-default-fg-color--lighter: var(--oe-muted);
  --md-default-fg-color--lightest: var(--oe-hairline);
  --md-primary-fg-color: var(--oe-paper);
  --md-primary-bg-color: var(--oe-ink);
  --md-primary-bg-color--light: var(--oe-muted);
  --md-accent-fg-color: var(--oe-ink);
  --md-typeset-a-color: var(--oe-ink);
  --md-typeset-table-color: var(--oe-hairline);
  --md-code-bg-color: var(--oe-surface);
  --md-code-fg-color: var(--oe-ink);
  --md-code-font-family: var(--oe-mono);
  --md-code-hl-color: rgb(253 235 109 / 35%);
  --md-code-hl-keyword-color: var(--oe-ink);
  --md-code-hl-name-color: var(--oe-ink);
  --md-code-hl-function-color: var(--oe-ink);
  --md-code-hl-variable-color: var(--oe-ink);
  --md-code-hl-generic-color: var(--oe-ink);
  --md-code-hl-string-color: var(--oe-code-string);
  --md-code-hl-number-color: var(--oe-code-number);
  --md-code-hl-constant-color: var(--oe-code-number);
  --md-code-hl-special-color: var(--oe-code-number);
  --md-code-hl-operator-color: var(--oe-muted);
  --md-code-hl-punctuation-color: var(--oe-muted);
  --md-code-hl-comment-color: var(--oe-muted);
  --md-footer-bg-color: var(--oe-paper);
  --md-footer-bg-color--dark: var(--oe-paper);
  --md-footer-fg-color: var(--oe-ink);
  --md-footer-fg-color--light: var(--oe-ink-2);
  --md-footer-fg-color--lighter: var(--oe-muted);
  --md-mermaid-edge-color: var(--oe-marker-ink);
  --md-mermaid-node-bg-color: var(--oe-paper);
  --md-mermaid-node-fg-color: var(--oe-marker-ink);
  --md-mermaid-label-bg-color: var(--oe-paper);
  --md-mermaid-label-fg-color: var(--oe-marker-ink);
}

body,
input {
  font-family: var(--oe-sans);
}

::selection {
  background: var(--oe-highlight);
  color: var(--oe-ink);
}

/* Masthead: the crow, then where you are, "zeroshot / docs", in the breadcrumb every site
   shares (the blog, theopenengine.com): product and section in marker, split by a full-height,
   light serif slash. */
.md-header,
.md-header--shadow {
  border-bottom: 1px solid var(--oe-hairline);
  box-shadow: none;
}

.md-header__button.md-logo img {
  height: 1.7rem;
  width: auto;
}

[data-md-color-scheme='slate'] .md-header__button.md-logo img {
  filter: invert(1);
}

.md-header__topic:first-child {
  --oe-lockup: 1.5rem;

  align-items: center;
  font-weight: 400;
}

.md-header__topic:first-child > .md-ellipsis,
.md-header__topic:first-child::after {
  color: var(--oe-marker-ink);
  flex-shrink: 0;
  font-family: var(--oe-marker);
  font-size: var(--oe-lockup);
  transform: rotate(-1.5deg);
}

/* Flex drops the space the template leaves after the name, so the slash's own margin sets the gap. */
.md-header__topic:first-child > .md-ellipsis {
  align-items: baseline;
  display: flex;
  overflow: visible;
  text-transform: lowercase;
}

/* The slash rides on the name's baseline and leans back upright, as on the blog. */
.md-header__topic:first-child > .md-ellipsis::after {
  color: var(--oe-slash);
  content: '/';
  display: inline-block;
  font-family: var(--oe-serif);
  font-size: calc(var(--oe-lockup) * 0.675);
  font-weight: 400;
  margin: 0 0.25em 0 0.33em;
  transform: rotate(1.5deg) translateY(-0.08em);
}

.md-header__topic:first-child::after {
  content: 'docs';
}

.md-header__topic + .md-header__topic {
  font-size: 0.7rem;
  font-weight: 500;
}

/* Keep the version picker quiet and open its menu below the masthead. */
.md-version {
  font-size: 0.65rem;
  margin-inline: 0.8rem 0.4rem;
  order: 1;
  position: relative;
}

.md-header .md-version__current {
  color: var(--oe-muted);
  font: inherit;
  margin: 0;
}

.md-header .md-version__current:is(:hover, :focus-visible) {
  color: var(--oe-ink);
}

.md-header .md-version__list {
  border: 1px solid var(--oe-hairline);
  border-radius: 0.3rem;
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 8%);
  font-family: var(--oe-sans);
  font-size: 0.65rem;
  inset-inline-end: 0;
  margin: 0;
  min-width: 7rem;
  overscroll-behavior: contain;
  padding: 0.2rem;
  pointer-events: none;
  scroll-snap-type: none;
  scrollbar-width: thin;
  top: 100%;
  visibility: hidden;
}

.md-header .md-version:is(:hover, :focus-within) .md-version__list {
  max-height: min(calc(16.4rem + 2px), calc(100dvh - 4rem));
  pointer-events: auto;
  visibility: visible;
}

.md-version__list::-webkit-scrollbar {
  width: 4px;
}

.md-version__list::-webkit-scrollbar-thumb {
  background: var(--oe-rule);
  border-radius: 2px;
}

.md-version__item {
  line-height: 1.4;
}

.md-header .md-version__link {
  border-radius: 0.15rem;
  line-height: 1.4rem;
  padding: 0.3rem 0.6rem;
}

.md-version__link:is(:hover, :focus-visible) {
  background: var(--oe-surface);
  color: var(--oe-ink);
}

.md-header__topic:first-child > a:focus-visible,
.md-header .md-version__current:focus-visible {
  outline: 2px solid var(--oe-muted);
  outline-offset: 3px;
}

/* Phones: the menu, theme and search buttons leave the lockup and version picker only the
   middle of the bar. Scale the lockup into it, as the blog does, instead of running under them. */
@media screen and (max-width: 44.9375em) {
  [dir='ltr'] .md-header__title {
    margin-left: 0.4rem;
  }

  .md-header__topic:first-child {
    --oe-lockup: clamp(0.7rem, (100vw - 12.5rem) / 4.8, 1.5rem);
  }

  .md-version {
    margin-inline: 0.6rem 0;
  }
}

.md-source {
  font-size: 0.65rem;
}

.md-header__button:hover,
.md-source:hover {
  opacity: 0.7;
}

@media screen and (min-width: 60em) {
  .md-search__form {
    background-color: var(--oe-surface);
    border: 1px solid var(--oe-hairline);
    border-radius: 0.3rem;
    height: 1.8rem;
  }

  .md-search__form:hover {
    background-color: var(--oe-surface);
    border-color: var(--oe-rule);
  }

  .md-search__input {
    font-size: 0.7rem;
  }
}

/* Navigation and "On this page": 14px text, quiet section names, a grey pill for where you are. */
.md-nav {
  font-size: 0.7rem;
  line-height: 1.4;
}

.md-nav__link {
  color: var(--oe-ink-2);
  margin-top: 0.15rem;
}

.md-nav__link:is(:hover, :focus) {
  color: var(--oe-ink);
}

.md-sidebar--primary .md-nav__link--active,
.md-sidebar--primary .md-nav__link--active code {
  color: var(--oe-ink);
  font-weight: 500;
}

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav__item > .md-nav__link {
    border-radius: 0.3rem;
    margin-block: 0;
    margin-inline: -0.5rem;
    padding: 0.28rem 0.5rem;
  }

  .md-sidebar--primary .md-nav__link--active {
    background: var(--oe-surface);
  }

  .md-sidebar--primary .md-nav__item--section > .md-nav__link,
  .md-nav--secondary .md-nav__title {
    background: none;
    color: var(--oe-muted);
    font-size: 0.65rem;
    font-weight: 500;
    margin-top: 0;
    padding-block: 0 0.2rem;
  }

  .md-sidebar--primary .md-nav__item--section {
    margin-top: 1.1rem;
  }

  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    display: none;
  }

  /* "On this page": muted links on a hairline rail, the current section in ink. */
  .md-nav--secondary .md-nav__list {
    border-left: 1px solid var(--oe-hairline);
  }

  .md-nav--secondary .md-nav__link {
    color: var(--oe-muted);
    font-size: 0.65rem;
    margin: 0;
    padding: 0.25rem 0 0.25rem 0.7rem;
  }

  .md-nav--secondary .md-nav__link--active,
  .md-nav--secondary .md-nav__link:is(:hover, :focus) {
    color: var(--oe-ink);
  }

  .md-nav--secondary .md-nav__link--active {
    box-shadow: -1px 0 0 var(--oe-ink);
  }

  .md-nav--secondary .md-nav__list .md-nav__list {
    border-left: 0;
  }

  .md-nav--secondary .md-nav__list .md-nav__list .md-nav__link {
    padding-left: 1.3rem;
  }
}

/* Page text. Headings are scoped to the page so search results keep theirs. */
.md-content .md-typeset {
  color: var(--oe-ink);
  font-size: calc(0.8 * var(--oe-reading-unit));
  line-height: 1.65;
}

.md-content .md-typeset :is(h1, h2, h3, h4, h5, h6) {
  color: var(--oe-ink);
  font-family: var(--oe-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-transform: none;
}

.md-content .md-typeset h1 {
  font-size: calc(1.5 * var(--oe-reading-unit));
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

.md-content .md-typeset h2 {
  font-size: calc(1 * var(--oe-reading-unit));
  margin: 2em 0 0.6em;
}

.md-content .md-typeset h3 {
  font-size: calc(0.8 * var(--oe-reading-unit));
  margin: 1.8em 0 0.4em;
}

.md-content .md-typeset :is(h4, h5, h6) {
  font-size: calc(0.8 * var(--oe-reading-unit));
  margin: 1.5em 0 0.4em;
}

.md-content .md-typeset :is(h1, h2, h3, h4, h5, h6) code {
  font-size: 0.85em;
  vertical-align: baseline;
}

/* Generated API headings contain complete signatures, not just names. */
.md-content .md-typeset .doc-heading {
  font-size: calc(0.7 * var(--oe-reading-unit));
  letter-spacing: 0;
  line-height: 1.6;
}

.md-content .md-typeset .doc-heading code {
  font-size: 1em;
}

/* The lede: the page's point, a step up from body text and a shade lighter. */
.md-content .md-typeset .docs-lede {
  color: var(--oe-ink-2);
  font-size: calc(0.85 * var(--oe-reading-unit));
  line-height: 1.6;
  margin: 0 0 1.5em;
  max-width: 38em;
}

.md-content .md-typeset p,
.md-content .md-typeset :is(ul, ol) {
  margin-block: 0 1em;
}

.md-content .md-typeset li {
  margin-bottom: 0.35em;
}

.md-content .md-typeset a:not(.md-button, .headerlink) {
  text-decoration: underline;
  text-decoration-color: var(--oe-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.md-content .md-typeset a:not(.md-button, .headerlink):is(:hover, :focus) {
  color: var(--oe-ink);
  text-decoration-color: currentcolor;
}

.md-typeset .headerlink {
  color: var(--oe-rule);
}

/* Code: one quiet surface for inline code and blocks, with a hairline around blocks. */
.md-content .md-typeset code {
  border-radius: 0.2rem;
  font-size: 0.875em;
}

.md-content .md-typeset td code {
  font-size: 0.93em;
}

.md-content .md-typeset pre {
  font-size: calc(0.675 * var(--oe-reading-unit));
  margin: 1em 0 1.2em;
}

/* Long commands wrap instead of scrolling out of view; docs/javascripts/command-wrap.js keeps each
   word whole. Copying still yields the original single line. */
.md-content .md-typeset pre > code {
  border: 1px solid var(--oe-hairline);
  border-radius: 0.4rem;
  font-size: 1em;
  line-height: 1.65;
  overflow-wrap: anywhere;
  padding: 0.85em 2.8em 0.85em 1.1em;
  white-space: pre-wrap;
}

.md-typeset pre .docs-word {
  white-space: nowrap;
}

.md-typeset pre .md-clipboard {
  color: var(--oe-muted);
}

.md-typeset pre .md-clipboard:is(:hover, :focus) {
  color: var(--oe-ink);
}

.md-code__nav {
  background: none;
}

.md-typeset .highlight span.filename {
  background: var(--oe-surface);
  border: 1px solid var(--oe-hairline);
  border-bottom: 1px solid var(--oe-hairline);
  border-radius: 0.4rem 0.4rem 0 0;
  color: var(--oe-muted);
  font-family: var(--oe-mono);
  font-size: calc(0.625 * var(--oe-reading-unit));
  font-weight: 400;
  margin-top: 1em;
  padding: 0.55em 1.1em;
}

.md-typeset .highlight span.filename + pre {
  margin-top: 0;
}

.md-typeset .highlight span.filename + pre > code {
  border-radius: 0 0 0.4rem 0.4rem;
  border-top: 0;
}

/* Tabs pick between equivalent examples. */
.md-typeset .tabbed-set {
  margin: 1em 0;
}

.md-content .md-typeset .tabbed-labels a {
  text-decoration: none;
}

.md-typeset .tabbed-labels > label {
  color: var(--oe-muted);
  font-size: calc(0.7 * var(--oe-reading-unit));
  font-weight: 500;
  padding: 0.6em 1.2em 0.55em 0;
}

.md-typeset .tabbed-content .highlight span.filename {
  margin-top: 0.8em;
}

/* Tables: rules, no box, at the nav's size. */
.md-typeset table:not([class]) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: calc(0.7 * var(--oe-reading-unit));
  line-height: 1.55;
}

.md-typeset table:not([class]) th {
  background: none;
  border-bottom: 1px solid var(--oe-rule);
  color: var(--oe-ink);
  font-weight: 600;
  padding: 0.55em 1.4em 0.55em 0;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--oe-hairline);
  padding: 0.65em 1.4em 0.65em 0;
  vertical-align: top;
}

.md-typeset table:not([class]) tr:first-child td {
  border-top: 0;
}

.md-typeset table:not([class]) tbody tr:hover {
  background: none;
  box-shadow: none;
}

.md-typeset table:not([class]) :is(td, th):first-child {
  white-space: nowrap;
}

.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--oe-hairline);
  border-radius: 0.4rem;
  box-shadow: none;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--oe-rule);
  box-shadow: none;
}

.md-typeset .md-button {
  border: 1px solid var(--oe-rule);
  border-radius: 0.3rem;
  color: var(--oe-ink);
  font-weight: 500;
}

.md-typeset .md-button:is(:hover, :focus) {
  background: none;
  border-color: var(--oe-ink);
  color: var(--oe-ink);
}

.md-typeset .md-button--primary {
  background: var(--oe-ink);
  border-color: var(--oe-ink);
  color: var(--oe-paper);
}

.md-typeset .md-button--primary:is(:hover, :focus) {
  background: var(--oe-ink-2);
  border-color: var(--oe-ink-2);
  color: var(--oe-paper);
}

/* Notes: text beside a rule, at body size. Warnings take the rust rule. */
.md-typeset .admonition {
  background: none;
  border: 0;
  border-left: 2px solid var(--oe-rule);
  border-radius: 0;
  box-shadow: none;
  font-size: inherit;
  margin: 1.2em 0;
  padding: 0.1em 0 0.1em 1em;
}

.md-typeset .admonition:focus-within {
  box-shadow: none;
}

.md-typeset .admonition > .admonition-title {
  background: none;
  border: 0;
  color: var(--oe-ink);
  font-weight: 600;
  margin: 0 0 0.2em;
  padding: 0;
}

.md-typeset .admonition > .admonition-title::before {
  display: none;
}

.md-typeset .admonition > .admonition-title + * {
  margin-top: 0;
}

.md-typeset .admonition > :last-child {
  margin-bottom: 0;
}

.md-typeset :is(.warning, .danger, .failure, .bug).admonition {
  border-left-color: var(--oe-rust);
}

/* Collapsed blocks hold long listings, so they stay plain boxes. */
.md-typeset details[class] {
  background: none;
  border: 1px solid var(--oe-hairline);
  border-radius: 0.4rem;
  box-shadow: none;
  font-size: inherit;
}

.md-typeset details[class] > summary {
  background: none;
  border: 0;
  font-weight: 500;
  padding-left: 0.8rem;
}

.md-typeset details[class] > summary::before {
  display: none;
}

.md-typeset details[class] > summary::after {
  color: var(--oe-muted);
}

/* Hand-drawn graphs sit in one kind of frame: the brand's paper, a hairline, a small radius. The
   built-in diagram is drawn twice, wide and tall for phones, like the landing page's. */
.md-typeset :is(.docs-graph-wide, .docs-graph-tall) {
  background: var(--oe-figure);
  border: 1px solid var(--oe-hairline);
  border-radius: 0.5rem;
  display: block;
  margin: 1.4em 0 1.8em;
  overflow: hidden;
}

.md-typeset :is(.docs-graph-wide, .docs-graph-tall) img {
  display: block;
}

.md-typeset .docs-graph-tall {
  display: none;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .docs-graph-wide {
    display: none;
  }

  .md-typeset .docs-graph-tall {
    display: block;
    margin-inline: auto;
    max-width: min(100%, 24rem);
  }
}

/* The docs home's example graph: zeroshot.sh's drawing and run, inline as on the page, frozen by
   docs/brand/freeze-example-graph.py. Wide on screens, tall on phones, in a plain frame. */
.md-typeset .docs-example-graph {
  --paper: var(--oe-paper);
  --marker-ink: var(--oe-marker-ink);
  --ink-2: var(--oe-ink-2);
  --rust: var(--oe-rust);
  --green: #2a7d3f;
  --hand: 'Caveat', 'Bradley Hand', 'Marker Felt', cursive;

  background: var(--oe-figure);
  border: 1px solid var(--oe-hairline);
  border-radius: 0.5rem;
  margin: 0 0 2em;
  padding: 1.2em 1.6em 1em;
}

[data-md-color-scheme='slate'] .md-typeset .docs-example-graph {
  --green: #6fc287;
}

@media (prefers-reduced-motion: no-preference) {
  .docs-example-graph .loop .pulse path,
  .docs-example-graph .loop .mark {
    animation-play-state: running;
  }
}

.md-typeset .docs-example-graph svg {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}

/* zeroshot.sh's frames leave room under the drawing (wide: 118 of 692 units, tall: 122 of 892).
   Pull the caption up to 16 units below it; percentages are of the frame, as wide as the SVG. */
.md-typeset .docs-example-graph .loop--wide {
  margin-bottom: -8.9%;
}

.md-typeset .docs-example-graph .loop--tall {
  display: none;
  margin-bottom: -18.8%;
}

@media screen and (max-width: 40em) {
  .md-typeset .docs-example-graph {
    margin-inline: auto;
    max-width: 24rem;
    padding: 0.8em 0.8em 0.7em;
  }

  .md-typeset .docs-example-graph .loop--wide {
    display: none;
  }

  .md-typeset .docs-example-graph .loop--tall {
    display: block;
  }
}

.md-typeset .docs-example-graph figcaption {
  border-top: 1px solid var(--oe-hairline);
  color: var(--oe-muted);
  font-size: calc(0.65 * var(--oe-reading-unit));
  font-style: normal;
  line-height: 1.55;
  margin: 0.9em 0 0;
  max-width: none;
  padding-top: 0.8em;
  text-align: left;
}

/* Small print: when the page changed, the footer. */
.md-source-file {
  color: var(--oe-muted);
  font-size: 0.65rem;
  margin-top: 2.5rem;
}

.md-source-file__fact .md-icon {
  display: none;
}

.md-typeset .docs-note {
  color: var(--oe-muted);
  font-size: calc(0.65 * var(--oe-reading-unit));
}

.md-footer {
  border-top: 1px solid var(--oe-hairline);
}

.md-footer__direction {
  color: var(--oe-muted);
  font-size: 0.6rem;
  opacity: 1;
}

.md-footer__title {
  font-size: 0.75rem;
}

.md-footer__link:is(:hover, :focus) {
  opacity: 0.7;
}

.md-footer-meta {
  border-top: 1px solid var(--oe-hairline);
}

.md-copyright {
  color: var(--oe-muted);
  font-size: 0.6rem;
}

.md-footer-meta.md-typeset .md-social__link:is(:hover, :focus) {
  color: var(--oe-ink);
}

.md-top {
  border: 1px solid var(--oe-hairline);
  box-shadow: none;
}