@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap") screen and (max-width: 76.234375em);

:root {
  --md-primary-fg-color: #2878b5;
  --md-accent-fg-color: #2878b5;
  --md-default-fg-color: #30343b;
  --md-default-fg-color--light: #62676e;
  --md-default-bg-color: #fff;
  --md-code-bg-color: #f5f6f7;
  --md-code-fg-color: #30343b;
  --md-text-font:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --md-code-font: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.md-header {
  background: #fff;
  color: var(--md-default-fg-color);
  box-shadow: none;
  border-bottom: 1px solid #e5e7eb;
}

.md-search__form {
  background: #f1f3f5;
}
.md-search__input::placeholder,
.md-search__input + .md-search__icon {
  color: var(--md-default-fg-color--light);
}

/* Match Diffrax's drawer scale without changing the permanent desktop sidebar.
   This is Material's existing drawer breakpoint; its desktop rules stay intact. */
@media screen and (max-width: 76.234375em) {
  .md-sidebar--primary {
    --drawer-unit: 0.88rem;
    width: calc(12.1 * var(--drawer-unit));
  }

  .md-nav--primary {
    font-family: "Roboto", sans-serif;
  }

  .md-nav--primary,
  .md-nav--primary .md-nav {
    padding-left: 5px;
  }

  .md-nav--primary .md-nav__item,
  .md-nav--primary .md-nav__title {
    font-size: calc(0.8 * var(--drawer-unit));
  }

  .md-nav--primary .md-nav__title {
    height: calc(5.6 * var(--drawer-unit));
    padding: calc(3 * var(--drawer-unit)) calc(0.8 * var(--drawer-unit))
      calc(0.2 * var(--drawer-unit));
    line-height: calc(2.4 * var(--drawer-unit));
  }

  .md-nav--primary > .md-nav__title[for="__drawer"] {
    background-color: #fff;
    color: var(--md-default-fg-color);
  }

  .md-nav--primary > .md-nav__title .md-logo {
    top: calc(0.4 * var(--drawer-unit));
    left: calc(0.4 * var(--drawer-unit));
    margin: calc(0.2 * var(--drawer-unit));
    padding: calc(0.4 * var(--drawer-unit));
  }

  .md-nav--primary > .md-nav__title .md-logo img {
    width: calc(1.8 * var(--drawer-unit));
    height: calc(1.8 * var(--drawer-unit));
  }

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

  .md-nav--primary .md-nav__link {
    padding: calc(0.6 * var(--drawer-unit)) calc(0.8 * var(--drawer-unit));
  }

  .md-nav--primary .md-nav__item--section > .md-nav__link {
    font-size: calc(0.9 * var(--drawer-unit));
  }

  .md-nav--primary .md-nav__link .md-nav__icon,
  .md-nav--primary .md-nav__title .md-nav__icon {
    width: calc(1.2 * var(--drawer-unit));
    height: calc(1.2 * var(--drawer-unit));
    font-size: calc(1.2 * var(--drawer-unit));
  }

  .md-nav--primary .md-nav__link--active,
  .md-nav--primary .md-nav__link:is(:hover, :focus-visible) {
    color: var(--md-accent-fg-color);
  }
}

.md-typeset {
  font-size: 0.8rem;
  line-height: 1.65;
}
.md-typeset h1 {
  color: var(--md-default-fg-color);
}
.md-typeset table:not([class]) th {
  background: #f5f6f7;
}

.md-typeset .yaml-reference table:not([class]) {
  width: 100%;
  min-width: 32rem;
  table-layout: fixed;
  font-size: 0.72rem;
}
.md-typeset .yaml-reference table:not([class]) th,
.md-typeset .yaml-reference table:not([class]) td {
  padding: 0.75em 0.85em;
  overflow-wrap: anywhere;
}
.md-typeset .yaml-reference table:not([class]) th {
  min-width: 0;
}
.md-typeset .yaml-reference th:nth-child(1) {
  width: 25%;
}
.md-typeset .yaml-reference th:nth-child(2) {
  width: 14%;
}
.md-typeset .yaml-reference th:nth-child(3) {
  width: 31%;
}
.md-typeset .yaml-reference th:nth-child(4) {
  width: 30%;
}

.md-typeset .home-demo {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
  margin: 1.5rem auto;
}

.md-typeset .admonition.example,
.md-typeset details.example {
  border-color: #d9e1e8;
  box-shadow: none;
}
.md-typeset .example > .admonition-title,
.md-typeset .example > summary {
  background: #f5f7f9;
}
.md-typeset .example > .admonition-title::before,
.md-typeset .example > summary::before {
  background-color: var(--md-accent-fg-color);
}
.md-typeset .example > summary::after {
  color: var(--md-accent-fg-color);
}

.md-footer {
  background: #f7f8fa;
  color: var(--md-default-fg-color);
  border-top: 1px solid #e5e7eb;
}
.md-footer-meta {
  background: #fff;
}
.md-copyright {
  color: var(--md-default-fg-color--light);
}
.md-copyright a {
  color: var(--md-accent-fg-color) !important;
}