@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600&display=swap");

/* esmoe docs theme.
   The site's one visual idea is routing: four experts, two lit. It appears in the logo, the hero,
   and in place of section rules - everywhere it means "top-2 of 4", never as decoration. */

:root {
  --es-ink: #131a2b;
  --es-ink-soft: #223049;
  --es-paper: #f7f8fa;
  --es-signal: #e8a33d;
  --es-route: #3e7c8c;
  --es-edge: #c9cfda;

  --md-primary-fg-color: var(--es-ink);
  --md-primary-fg-color--dark: #0d1320;
  --md-accent-fg-color: var(--es-route);
  --md-text-font: "Source Sans 3", "Noto Sans SC", system-ui, sans-serif;
  --md-code-font: "JetBrains Mono", "Noto Sans Mono", "Noto Sans SC", ui-monospace, monospace;
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--es-paper);
  --md-typeset-a-color: #2f6a79;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--es-ink);
  --md-default-bg-color--light: var(--es-ink-soft);
  --md-typeset-a-color: #7ec3d2;
  --es-edge: #33405a;
}

.md-header,
.md-tabs {
  background-color: var(--es-ink);
}

/* Display face is used only for headings, so the technical voice stays a punctuation mark rather
   than a costume. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-nav__title,
.es-hero__claim {
  font-family: "Space Grotesk", var(--md-text-font);
  letter-spacing: -0.02em;
}

.md-typeset h1 {
  font-weight: 600;
  color: inherit;
}

.md-typeset h2 {
  margin-top: 2.4rem;
  font-weight: 600;
}

/* Section rule as the routing motif: four slots, the first two carrying signal. */
.md-typeset hr {
  border: none;
  display: flex;
  gap: 0.3rem;
  height: 0.35rem;
  margin: 2.6rem 0;
}

.md-typeset hr::before,
.md-typeset hr::after {
  content: "";
  height: 100%;
  border-radius: 999px;
}

.md-typeset hr::before {
  width: 3.2rem;
  background: linear-gradient(90deg, var(--es-signal) 0 46%, transparent 46% 54%, var(--es-signal) 54% 100%);
}

.md-typeset hr::after {
  flex: 1;
  background: linear-gradient(90deg, var(--es-edge) 0 46%, transparent 46% 54%, var(--es-edge) 54% 100%);
  opacity: 0.55;
}

/* Hero */
.es-hero {
  margin: 0 0 2.6rem;
  padding: 2.2rem 0 2rem;
  border-bottom: 1px solid var(--es-edge);
}

.es-hero__eyebrow {
  font-family: var(--md-code-font);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--es-route);
}

.es-hero__claim {
  font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.1rem);
  line-height: 1.08;
  font-weight: 600;
  text-wrap: balance;
  margin: 0.6rem 0 0.9rem;
  max-width: 22ch;
}

.es-hero__claim em {
  font-style: normal;
  color: var(--es-signal);
}

.es-hero__lede {
  max-width: 58ch;
  font-size: 0.94rem;
  opacity: 0.86;
}

/* Router: four experts, two active. Hover walks the active pair one slot to the right, which is
   exactly what a different input would do. */
.es-router {
  display: inline-flex;
  gap: 0.4rem;
  margin: 1.4rem 0 0.2rem;
}

.es-router span {
  width: 2.6rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--es-edge);
  transition: background-color 240ms ease;
}

.es-router span:nth-child(-n + 2) {
  background: var(--es-signal);
}

.es-hero:hover .es-router span:nth-child(-n + 2) {
  background: var(--es-edge);
}

.es-hero:hover .es-router span:nth-child(n + 3) {
  background: var(--es-signal);
}

.es-router__label {
  font-family: var(--md-code-font);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

/* Proof strip: three claims, each with the evidence that backs it. */
.md-typeset ul.es-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}

.md-typeset ul.es-proof > li {
  list-style: none;
  border: 1px solid var(--es-edge);
  border-left: 3px solid var(--es-signal);
  border-radius: 0.2rem;
  padding: 0.9rem 1rem;
  margin: 0;
}

.md-typeset ul.es-proof > li::marker {
  content: "";
}

.es-proof strong {
  display: block;
  font-family: "Space Grotesk", var(--md-text-font);
  font-size: 0.98rem;
  line-height: 1.25;
  text-wrap: balance;
  margin-bottom: 0.35rem;
}

.es-proof span {
  font-size: 0.78rem;
  opacity: 0.75;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--es-edge);
  border-radius: 0.2rem;
  font-size: 0.76rem;
}

.md-typeset table:not([class]) th {
  background: color-mix(in srgb, var(--es-route) 12%, transparent);
  font-weight: 600;
}

.md-typeset .highlight pre {
  border-left: 2px solid var(--es-route);
}

@media (prefers-reduced-motion: reduce) {
  .es-router span {
    transition: none;
  }
}

.mermaid-chart {
  margin: 1.8rem 0;
  text-align: center;
  overflow-x: auto;
}

/* Chinese pages: the tracking and small caps that give the English headings their voice turn CJK
   into loose, unreadable characters, and the Latin-only mono face drops them to a fallback. */
[lang="zh"] {
  --md-text-font: "Noto Sans SC", "Source Sans 3", system-ui, sans-serif;
}

[lang="zh"] .es-hero__eyebrow,
[lang="zh"] .es-router__label {
  font-family: var(--md-text-font);
  letter-spacing: 0.04em;
  text-transform: none;
}

[lang="zh"] .md-typeset h1,
[lang="zh"] .md-typeset h2,
[lang="zh"] .md-typeset h3,
[lang="zh"] .es-hero__claim {
  letter-spacing: 0;
}

[lang="zh"] .md-typeset {
  line-height: 1.8;
}

/* The chart host needs a height before ECharts measures it; an inline style on a markdown
   block is easy to lose, a class is not. */
.esmoe-chart {
  width: 100%;
  height: 420px;
}

/* Metric switch above the effect chart, built in JS so both language pages stay identical. */
.esmoe-metric {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
}

.esmoe-metric button {
  border: 1px solid var(--md-default-fg-color--lightest);
  background: transparent;
  color: var(--md-default-fg-color--light);
  border-radius: 999px;
  padding: 0.18rem 0.72rem;
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.esmoe-metric button:hover {
  border-color: var(--md-default-fg-color--light);
  color: var(--md-default-fg-color);
}

.esmoe-metric button.is-on {
  border-color: var(--md-primary-fg-color);
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

/* One height per role, so two figures side by side stay level. */
.esmoe-figure {
  width: 100%;
  height: 380px;
  margin: 1.2rem 0 1.6rem;
  border: 1px solid var(--es-edge);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--md-default-bg-color) 92%, var(--es-route) 8%);
}

.esmoe-figure--tall {
  height: 460px;
}

.es-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}

.es-duo .esmoe-figure {
  margin: 0.4rem 0 1rem;
}

.md-typeset .es-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: 0.8rem;
  margin: 1.4rem 0 2rem;
}

.md-typeset .es-stats > div {
  padding: 0.9rem 1rem 0.8rem;
  border: 1px solid var(--es-edge);
  border-radius: 0.7rem;
  background: linear-gradient(160deg, color-mix(in srgb, var(--es-signal) 10%, transparent), transparent 60%);
}

.md-typeset .es-stats strong {
  display: block;
  font-family: "Space Grotesk", var(--md-text-font);
  font-size: 1.9rem;
  line-height: 1.05;
  font-weight: 600;
  color: var(--es-signal);
}

.md-typeset .es-stats span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  opacity: 0.8;
}

.md-typeset .es-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.9rem;
  margin: 1.2rem 0 2rem;
}

.md-typeset .es-cards > a {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--es-edge);
  border-radius: 0.7rem;
  color: inherit;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.md-typeset .es-cards > a:hover,
.md-typeset .es-cards > a:focus-visible {
  border-color: var(--es-route);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--es-route) 18%, transparent);
}

.md-typeset .es-cards strong {
  display: block;
  font-family: "Space Grotesk", var(--md-text-font);
  font-size: 1rem;
  margin-bottom: 0.3rem;
  color: var(--md-typeset-a-color);
}

.md-typeset .es-cards span {
  font-size: 0.76rem;
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .es-cards > a {
    transition: none;
  }
  .md-typeset .es-cards > a:hover {
    transform: none;
  }
}

[lang="zh"] .md-typeset .es-stats strong,
[lang="zh"] .md-typeset .es-cards strong {
  letter-spacing: 0;
}

.md-grid {
  max-width: 74rem;
}

html {
  scroll-behavior: smooth;
}

.md-progress {
  background: var(--es-signal);
}

.md-nav {
  font-size: 0.66rem;
}

.md-nav__title {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

.md-nav__link {
  margin-top: 0.5em;
  color: var(--md-default-fg-color--light);
  transition: color 140ms ease;
}

.md-nav__link:hover,
.md-nav__link:focus-visible {
  color: var(--md-typeset-a-color);
}

.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  color: var(--md-default-fg-color);
  font-weight: 600;
}

.md-sidebar--secondary .md-nav__link--active {
  position: relative;
}

.md-sidebar--secondary .md-nav__link--active::before {
  content: "";
  position: absolute;
  left: -0.55rem;
  top: 0.15em;
  bottom: 0.15em;
  width: 2px;
  border-radius: 2px;
  background: var(--es-signal);
}

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--md-default-fg-color) 20%, transparent) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--md-default-fg-color) 18%, transparent) padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--md-default-fg-color) 36%, transparent);
}

.md-sidebar__scrollwrap {
  scrollbar-color: transparent transparent;
}

.md-sidebar__scrollwrap:hover {
  scrollbar-color: color-mix(in srgb, var(--md-default-fg-color) 20%, transparent) transparent;
}

:root {
  --es-card: #ffffff;
}

[data-md-color-scheme="slate"] {
  --es-card: #151c2a;
}

.md-typeset .es-fig {
  margin: 1.6rem 0 1.8rem;
  padding: 0.85rem 1rem 0.6rem;
  border: 1px solid var(--es-edge);
  border-radius: 0.8rem;
  background: var(--es-card);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--es-ink) 5%, transparent);
}

.md-typeset .es-fig figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.55rem;
  max-width: none;
  margin: 0 0 0.55rem;
  padding: 0;
  text-align: left;
}

.md-typeset .es-fig figcaption b {
  font-family: var(--md-code-font);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--es-route);
}

.md-typeset .es-fig figcaption span {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
}

.md-typeset .es-fig figcaption em {
  font-size: 0.66rem;
  font-style: normal;
  color: var(--md-default-fg-color--light);
}

.md-typeset .es-fig small {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.6rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .es-fig small code {
  padding: 0;
  font-size: 0.6rem;
  background: transparent;
}

.md-typeset .es-fig .esmoe-figure {
  height: 330px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.md-typeset .es-fig--tall .esmoe-figure {
  height: 430px;
}

.md-typeset .es-fig--diagram .mermaid-chart {
  margin: 0.2rem 0;
}

.md-typeset .es-fig .esmoe-metric {
  margin-bottom: 0.3rem;
}

.md-typeset .es-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  margin: 1.6rem 0;
}

.md-typeset .es-duo .es-fig {
  margin: 0;
}

.mermaid-chart svg {
  max-width: none;
}

.md-typeset table:not([class]) {
  word-break: keep-all;
}

.md-typeset table:not([class]) td code {
  white-space: nowrap;
}

.md-typeset table:not([class]) tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--md-default-fg-color) 2.5%, transparent);
}

.md-typeset .es-stats span,
.md-typeset .es-cards span {
  overflow-wrap: anywhere;
}

@media (width <= 44.9375em) {
  .md-typeset .es-fig {
    padding: 0.7rem 0.55rem 0.5rem;
    border-radius: 0.6rem;
  }

  .md-typeset .es-fig .esmoe-figure {
    height: 320px;
  }

  .md-typeset .es-fig--tall .esmoe-figure {
    height: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.es-outdated {
  padding: 0.45rem 1rem;
  font-size: 0.68rem;
  text-align: center;
  color: var(--md-default-fg-color);
  background: color-mix(in srgb, var(--es-signal) 16%, var(--md-default-bg-color));
  border-bottom: 1px solid color-mix(in srgb, var(--es-signal) 40%, transparent);
}

.es-outdated a {
  margin-left: 0.4rem;
  font-weight: 600;
  color: var(--md-typeset-a-color);
}

/* Material shrinks a figure to its content and centres an italic caption; a chart card needs the column. */
.md-typeset figure.es-fig {
  display: block;
  width: auto;
  max-width: none;
}

.md-typeset figure.es-fig figcaption {
  font-style: normal;
}

/* The try-it page: the controls read as one row each, and a gate bar stands for one expert. */
.es-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0.45rem 0;
}

.es-demo__row > b {
  min-width: 4.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

/* One pill for every control on the page: the group, the models, the file picker and the run button. */
.es-demo__tab,
.es-demo__choice,
.es-demo__upload,
.es-demo__run {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.16rem 0.72rem;
  font-size: 0.68rem;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--es-edge);
  border-radius: 1rem;
  transition:
    background 120ms,
    border-color 120ms;
}

.es-demo__tab:hover,
.es-demo__choice:hover,
.es-demo__upload:hover,
.es-demo__run:hover {
  border-color: color-mix(in srgb, var(--es-signal) 55%, transparent);
}

.es-demo__tab--on {
  font-weight: 600;
  background: color-mix(in srgb, var(--es-signal) 20%, transparent);
  border-color: color-mix(in srgb, var(--es-signal) 55%, transparent);
}

.es-demo__choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.es-demo__choice::before {
  width: 0.6rem;
  height: 0.6rem;
  content: "";
  background: color-mix(in srgb, var(--md-default-fg-color) 20%, transparent);
  border-radius: 0.16rem;
}

.es-demo__choice:has(input:checked) {
  font-weight: 600;
  background: color-mix(in srgb, var(--es-route) 18%, transparent);
  border-color: color-mix(in srgb, var(--es-route) 55%, transparent);
}

.es-demo__choice:has(input:checked)::before {
  background: var(--es-route);
}

/* At rest the button is quiet and grey; the pointer gives it the project's colours, and a run gives
   it a turning ring until the last model is done. */
.es-demo__run {
  gap: 0.4rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

.es-demo__run:hover {
  color: var(--es-route);
  background: color-mix(in srgb, var(--es-signal) 12%, transparent);
  border-color: color-mix(in srgb, var(--es-route) 55%, transparent);
}

.es-demo__run:hover .es-demo__train i {
  background: var(--es-signal);
}

.es-demo__run[data-busy] {
  color: var(--es-route);
  border-color: color-mix(in srgb, var(--es-route) 45%, transparent);
}

.es-demo__spin {
  display: none;
  width: 0.85rem;
  height: 0.85rem;
  border: 0.14rem solid color-mix(in srgb, var(--es-route) 28%, transparent);
  border-top-color: var(--es-signal);
  border-radius: 50%;
}

.es-demo__run[data-busy] .es-demo__spin {
  display: inline-block;
  animation: es-spin 0.8s linear infinite;
}

.es-demo__run[data-busy] .es-demo__train {
  display: none;
}

@keyframes es-spin {
  to {
    transform: rotate(360deg);
  }
}

/* The train reads as the run control: it rocks under the pointer and pulls away while a model works. */
.es-demo__train {
  position: relative;
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
  /* The draft lines live to the train's left; this is the room they need. */
  margin-left: 0.22rem;
}

.es-demo__train svg {
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

.es-demo__train i {
  position: absolute;
  right: 105%;
  height: 0.09rem;
  background: currentcolor;
  border-radius: 0.09rem;
  opacity: 0;
}

.es-demo__train i:nth-child(2) {
  top: 30%;
  width: 0.5rem;
}

.es-demo__train i:nth-child(3) {
  top: 52%;
  width: 0.34rem;
}

.es-demo__train i:nth-child(4) {
  top: 74%;
  width: 0.42rem;
}

@keyframes es-rock {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  50% {
    transform: translateX(0.06rem) rotate(-3deg);
  }
}

/* A line sweeps past in the first third of its cycle and waits out the rest, so the three of them
   come and go at their own pace rather than in step. */
@keyframes es-draft {
  0% {
    opacity: 0.7;
    transform: translateX(0.25rem);
  }

  32% {
    opacity: 0;
    transform: translateX(-0.55rem);
  }

  100% {
    opacity: 0;
    transform: translateX(-0.55rem);
  }
}

.es-demo__run:hover .es-demo__train svg {
  animation: es-rock 0.7s ease-in-out infinite;
}

.es-demo__run:hover .es-demo__train i {
  animation: es-draft var(--beat, 0.7s) linear var(--wait, 0s) infinite;
}

.es-demo__run[data-busy] {
  cursor: progress;
}

.es-demo__state:empty {
  display: none;
}

.es-demo__state:not(:empty) {
  font-weight: 400;
  color: var(--md-default-fg-color--light);
}

@media (prefers-reduced-motion: reduce) {
  .es-demo__run:hover .es-demo__train svg,
  .es-demo__run:hover .es-demo__train i,
  .es-demo__run[data-busy] .es-demo__spin {
    animation: none;
  }
}

.es-demo__sample {
  width: 3.6rem;
  height: 2.4rem;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--es-edge);
  border-radius: 0.3rem;
  transition: border-color 120ms;
}

.es-demo__sample:hover {
  border-color: color-mix(in srgb, var(--es-signal) 60%, transparent);
}

.es-demo__sample--on {
  border-color: var(--es-signal);
  box-shadow: 0 0 0 1px var(--es-signal);
}

.es-demo__hint,
.es-demo__none {
  font-size: 0.64rem;
  color: var(--md-default-fg-color--light);
}

/* Nothing chosen is a state of its own: the row keeps its place and says what it wants. */
.es-demo__empty {
  padding: 2.4rem 1rem;
  margin: 0;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
  text-align: center;
  border: 1px dashed var(--es-edge);
  border-radius: 0.3rem;
}

.es-demo__panels {
  display: grid;
  grid-template-columns: repeat(var(--panels, 1), minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.9rem;
}

@media (width <= 60rem) {
  .es-demo__panels {
    grid-template-columns: minmax(0, 1fr);
  }
}

.es-demo__panel {
  display: flex;
  flex-direction: column;
  padding: 0.6rem;
  border: 1px solid var(--es-edge);
  border-radius: 0.3rem;
}

.es-demo__gates {
  flex: 1;
}

.es-demo__panel header {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.72rem;
}

.es-demo__cost {
  font-size: 0.64rem;
  color: var(--md-default-fg-color--light);
}

.es-demo__panel canvas {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.45rem 0;
  border-radius: 0.2rem;
}

/* The provenance runs along the card's bottom edge and the two viewers sit at its right. */
.es-demo__panel footer {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin-top: 0.6rem;
  font-size: 0.58rem;
  color: var(--md-default-fg-color--light);
}

/* One line, whatever the checkpoint is called: the name gives way, the viewers never do. */
.es-demo__meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.7;
}

.es-demo__note,
.es-demo__viewers {
  flex: none;
}

.md-typeset .es-demo__block {
  display: block;
  width: auto;
  max-width: none;
  margin: 0.55rem 0 0;
  text-align: left;
}

.md-typeset .es-demo__block figcaption {
  margin-bottom: 0.15rem;
  font-size: 0.6rem;
  font-style: normal;
  color: var(--md-default-fg-color--light);
}

/* A gate row carries three readings at once: which block it belongs to (hue), how much the expert
   scored (length and depth), and whether top-k took it (the block's colour against grey). */
.es-gate {
  display: grid;
  grid-template-columns: 2.1rem 1fr 2.5rem;
  gap: 0.35rem;
  align-items: center;
  margin: 0.14rem 0;
  font-size: 0.6rem;
}

.es-gate span {
  padding: 0.02rem 0.26rem;
  font-weight: 600;
  color: var(--gate);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--gate) 45%, transparent);
  border-radius: 0.6rem;
}

.es-gate__track {
  height: 0.44rem;
  background: color-mix(in srgb, var(--md-default-fg-color) 7%, transparent);
  border-radius: 0.22rem;
}

.es-gate i {
  display: block;
  height: 100%;
  background: color-mix(in srgb, var(--gate) calc(55% + 45% * var(--share)), transparent);
  border-radius: 0.22rem;
}

.es-gate em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--md-default-fg-color--light);
}

.es-gate--on em {
  font-weight: 600;
  color: var(--md-default-fg-color);
}

.es-gate--off {
  opacity: 0.78;
}

.es-gate--off span {
  color: var(--md-default-fg-color--light);
  border-color: var(--es-edge);
}

.es-gate--off i {
  background: color-mix(in srgb, var(--md-default-fg-color) calc(16% + 22% * var(--share)), transparent);
}

.md-typeset .es-demo__block figcaption b,
.es-demo__block figcaption {
  color: var(--md-default-fg-color--light);
}