/* Same paper, ink, marker pen and post-its as zeroshot.sh. Material's rem is
   20px where the landing page's is 16px, so its sizes are scaled by 0.8. */

:root {
  --oe-paper: #faf7f1;
  --oe-ink: #171411;
  --oe-ink-2: #4a433a;
  --oe-muted: #6f675a;
  --oe-rust: #c2240c;
  --oe-hairline: #e4ded3;
  --oe-marker-ink: #26221c;
  --oe-field: rgb(255 255 255 / 45%);
  --oe-tint: rgb(23 20 17 / 6%);
  --oe-marker: 'Reenie Beanie', 'Bradley Hand', 'Marker Felt', cursive;
  --oe-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', menlo, monospace;
}

[data-md-color-scheme='slate'] {
  --oe-paper: #14110e;
  --oe-ink: #faf7f1;
  --oe-ink-2: #cbc5bb;
  --oe-muted: #a39c91;
  --oe-rust: #ed6b55;
  --oe-hairline: #302a24;
  --oe-marker-ink: #f1ece3;
  --oe-field: rgb(250 247 241 / 4%);
  --oe-tint: rgb(250 247 241 / 8%);
}

/* Declared on the element that carries the scheme, so each token resolves to
   that scheme's value. */
[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-muted);
  --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-rust);
  --md-typeset-a-color: var(--oe-ink);
  --md-typeset-table-color: var(--oe-hairline);
  --md-code-bg-color: var(--oe-tint);
  --md-code-fg-color: var(--oe-ink);
  --md-code-font-family: var(--oe-mono);
  --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: 'Spline Sans', system-ui, sans-serif;
}

::selection {
  background: var(--oe-rust);
  color: var(--oe-paper);
}

/* Paper grain, as on the landing page. */
body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  content: '';
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.05;
  pointer-events: none;
  position: fixed;
  z-index: 10;
}

[data-md-color-scheme='slate']::after {
  display: none;
}

@media print {
  body::after {
    display: none;
  }
}

/* Masthead: the crow, the product name in marker, a mono label. */
.md-header,
.md-header--shadow {
  border-bottom: 1px solid var(--oe-hairline);
  box-shadow: none;
}

.md-header__button.md-logo img {
  height: 1.8rem;
  transform: rotate(-2deg);
  width: auto;
}

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

.md-header__topic:first-child {
  align-items: center;
  font-weight: 400;
}

.md-header__topic:first-child > .md-ellipsis {
  color: var(--oe-marker-ink);
  font-family: var(--oe-marker);
  font-size: 1.6rem;
  overflow: visible;
  text-transform: lowercase;
  transform: rotate(-1.5deg);
}

.md-header__topic:first-child::after {
  color: var(--oe-muted);
  content: 'docs';
  font-family: var(--oe-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  margin-left: 0.9rem;
  text-transform: uppercase;
}

.md-version {
  order: 1;
}

.md-version__current {
  color: var(--oe-ink-2);
  font-family: var(--oe-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}

.md-version__list {
  border: 1px solid var(--oe-hairline);
  border-radius: 0.28rem;
  box-shadow: none;
}

.md-source {
  font-family: var(--oe-mono);
  font-size: 0.55rem;
}

.md-header__button:hover,
.md-source:hover {
  color: var(--oe-rust);
  opacity: 1;
}

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

  .md-search__form:hover {
    background-color: var(--oe-field);
    border-color: var(--oe-ink-2);
  }
}

/* Navigation: mono labels over plain links, rust for where you are. */
@media screen and (min-width: 76.25em) {
  .md-nav__item--section > .md-nav__link,
  .md-nav--primary > .md-nav__title,
  .md-nav--secondary .md-nav__title {
    color: var(--oe-muted);
    font-family: var(--oe-mono);
    font-size: 0.55rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
}

.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  color: var(--oe-rust);
}

/* Page text. Headings are scoped to the page so search results keep theirs. */
.md-content .md-typeset h1,
.md-content .md-typeset h2 {
  color: var(--oe-marker-ink);
  font-family: var(--oe-marker);
  font-weight: 400;
  letter-spacing: 0;
}

.md-content .md-typeset h1 {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 1;
  margin-bottom: 0.45em;
}

.md-content .md-typeset h2 {
  border-top: 1px solid var(--oe-hairline);
  font-size: 2.2rem;
  line-height: 1.05;
  margin-top: 1.3em;
  padding-top: 0.55em;
}

.md-typeset h3,
.md-typeset h4 {
  font-weight: 600;
  letter-spacing: -0.005em;
}

.md-content .md-typeset :is(h1, h2) code {
  font-size: 0.5em;
  vertical-align: 0.2em;
}

.md-content .md-typeset a:not(.md-button, .headerlink) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.md-typeset .docs-kicker {
  color: var(--oe-rust);
  font-family: var(--oe-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  margin-bottom: 0.7rem;
  text-transform: uppercase;
}

/* The overview graph is drawn twice, wide and tall for phones, like the
   landing page's. Each links to its full-size file. */
.md-typeset .docs-graph-wide {
  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);
  }
}

.md-typeset .docs-lede {
  font-size: 1.08rem;
  line-height: 1.65;
  max-width: 48rem;
}

.md-typeset pre > code {
  background-color: var(--oe-field);
  border: 1px solid var(--oe-hairline);
  border-radius: 0.28rem;
}

.md-code__nav {
  background: none;
}

.md-typeset .highlight span.filename {
  background: none;
  border: 1px solid var(--oe-hairline);
  border-bottom: 0;
  border-radius: 0.28rem 0.28rem 0 0;
  color: var(--oe-muted);
  font-family: var(--oe-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-top: 1em;
}

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

.md-typeset table:not([class]) {
  border: 1px solid var(--oe-hairline);
  border-radius: 0.28rem;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  color: var(--oe-muted);
  font-family: var(--oe-mono);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.md-typeset table:not([class]) th code {
  text-transform: none;
}

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

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

.md-typeset .md-button {
  border: 1px solid var(--oe-hairline);
  border-radius: 0.28rem;
  color: var(--oe-ink);
  font-weight: 400;
}

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

.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-rust);
  border-color: var(--oe-rust);
  color: var(--oe-paper);
}

/* Admonitions are post-its. They stay yellow in both schemes, so they carry
   the light scheme's ink. */
.md-typeset .admonition {
  --oe-rust: #c2240c;
  --md-typeset-a-color: #c2240c;
  --md-accent-fg-color: #171411;
  --md-code-bg-color: rgb(255 255 255 / 50%);
  --md-code-fg-color: #171411;

  background:
    linear-gradient(
      180deg,
      rgb(23 20 17 / 7.5%) 0,
      rgb(23 20 17 / 3.5%) 0.7rem,
      rgb(23 20 17 / 0%) 1.35rem
    ),
    linear-gradient(165deg, #fff7a1 0%, #fdeb6d 48%, #f5da4c 100%);
  border: 0;
  border-radius: 0;
  box-shadow:
    0 1px 1px rgb(23 20 17 / 6%),
    1px 4px 8px -3px rgb(23 20 17 / 18%),
    6px 16px 26px -12px rgb(23 20 17 / 38%);
  color: #3a3120;
  font-size: 0.74rem;
  max-width: 26rem;
  padding: 0.9rem 0.8rem 0.3rem;
  transform: rotate(-0.6deg);
}

.md-typeset .admonition:focus-within {
  box-shadow:
    0 1px 1px rgb(23 20 17 / 6%),
    1px 4px 8px -3px rgb(23 20 17 / 18%),
    6px 16px 26px -12px rgb(23 20 17 / 38%);
}

.md-typeset .admonition > .admonition-title {
  background: none;
  border: 0;
  color: #26221c;
  font-family: var(--oe-marker);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

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

.md-typeset :is(.warning, .danger, .failure, .bug) > .admonition-title {
  color: #c2240c;
}

/* 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.28rem;
  box-shadow: none;
}

.md-typeset details[class] > summary {
  background: none;
  border: 0;
  font-family: var(--oe-mono);
  font-weight: 400;
  padding-left: 0.6rem;
}

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

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

/* When the page last changed: a mono label, no icon. */
.md-source-file {
  color: var(--oe-muted);
  font-family: var(--oe-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  margin-top: 2.4rem;
  text-transform: uppercase;
}

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

/* Footer: a hairline and mono labels, no ink bar. */
.md-footer {
  border-top: 1px solid var(--oe-hairline);
}

.md-footer__direction {
  color: var(--oe-muted);
  font-family: var(--oe-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  opacity: 1;
  text-transform: uppercase;
}

.md-footer__link:is(:hover, :focus) {
  color: var(--oe-rust);
  opacity: 1;
}

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

.md-copyright {
  color: var(--oe-muted);
  font-family: var(--oe-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

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

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