/* manimgx's look on Zensical's modern theme */

/* Colors: 数境's purple — unified violet, modern anime style */
:root > * {
  --md-primary-fg-color: #8b5cf6;
  --md-primary-fg-color--light: #a78bfa;
  --md-primary-fg-color--dark: #7c3aed;
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: #ffffffb3;
  --md-accent-fg-color: #c084fc;
  --md-accent-fg-color--transparent: #c084fc1a;
  --md-accent-bg-color: #fff;
  --md-accent-bg-color--light: #ffffffb3;
}

[data-md-color-scheme="slate"] {
  --md-hue: 232;
  --md-default-bg-color: #1a1b26;
  --md-default-fg-color: #cdd6f4;
  --md-default-fg-color--light: #a9adc6;
  --md-default-fg-color--lighter: #7f849c;
  --md-default-fg-color--lightest: #45475a;
  --md-code-bg-color: #11111b;
  --md-code-fg-color: #cdd6f4;
  --md-primary-fg-color: #a78bfa;
  --md-primary-fg-color--light: #c4b5fd;
  --md-primary-fg-color--dark: #8b5cf6;
  --md-accent-fg-color: #c084fc;
  --md-accent-fg-color--transparent: #c084fc1a;
}

/* The size: the site as Zensical's at 90% zoom. Its root font size sets every rem, so nine
   tenths of it scales the site as zooming out does, and the window it steps it up at is
   nine tenths as wide too (zooming out widens the window in CSS pixels): 125%, then 137.5%
   at 100em and 150% at 125em, become these */
html {
  font-size: 112.5%;
}

@media screen and (min-width: 90em) {
  html {
    font-size: 123.75%;
  }
}

@media screen and (min-width: 112.5em) {
  html {
    font-size: 135%;
  }
}

/* The logo (scripts/showcase/logo.py): the one for the page's scheme, at its own width.
   Where the header shows it (a wide screen), it is the site's name, so the header's title
   shows only the page's, once scrolled to; a narrow screen's header writes the name */
:root {
  --mx-logo: 1.8rem;
}

.md-header__button.md-logo,
.md-nav__button.md-logo {
  width: auto;
  height: auto;
}

.md-logo img.mx-logo {
  height: var(--mx-logo);
  max-width: none;
}

/* The other scheme's image of a logo, wherever it is, is hidden: over every rule that shows a
   logo (the drawer's is more specific than this) */
[data-md-color-scheme="slate"] img.mx-logo--light,
[data-md-color-scheme="default"] img.mx-logo--dark {
  display: none !important;
}

@media screen and (min-width: 76.25em) {
  .md-header__title .md-header__topic:first-child {
    visibility: hidden;
  }

  .mx-lockup {
    margin-inline: 0.6rem;
  }
}

/* The header's two links share an SVG canvas height and text baseline (showcase/logo.py).
   Their artwork sets the alignment; CSS only sizes and spaces the single row */
.mx-lockup {
  --mx-logo: 1.818rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mx-lockup > .md-logo {
  margin: 0;
  padding: 0;
}

/* The tabs sit directly under the single-line header, with equal space above and below */
.md-tabs__item {
  height: auto;
}

.md-tabs__link {
  margin-top: 0;
  padding-block: 0.4rem;
}

/* The footer's band (partials/academa.html): 数境's footer — unified violet */
.mx-footer {
  --mx-ground: oklch(0.99 0.004 300);
  --mx-border: oklch(0.92 0.008 300);
  --mx-accent: var(--md-primary-fg-color);
  --mx-accent-soft: oklch(0.92 0.04 295);
  font-size: 0.82rem;
  color: var(--md-default-fg-color--light);
  background-color: var(--mx-ground);
  border-top: 1px solid var(--mx-border);
}

[data-md-color-scheme="slate"] .mx-footer {
  --mx-ground: #11111b;
  --mx-border: #2a2a3c;
  --mx-accent: var(--md-primary-fg-color);
  --mx-accent-soft: #313244;
}

.mx-footer a:not(.mx-footer__button) {
  color: inherit;
  transition: color 150ms ease;
}

.mx-footer a:not(.mx-footer__button):is(:hover, :focus-visible) {
  color: var(--mx-accent);
}

.mx-footer p {
  margin: 0;
  line-height: 1.7;
  text-wrap: pretty;
}

.mx-footer .mx-footer__label {
  margin: 0 0 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mx-accent);
}

.mx-footer__inner {
  padding: 2.6rem 1.4rem 1.8rem;
}

.mx-footer__brand {
  margin-bottom: 2rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--mx-border);
}

.mx-footer__name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--md-default-fg-color);
  margin-bottom: 0.4rem;
}

.mx-footer__name-en {
  font-weight: 500;
  opacity: 0.65;
  margin-left: 0.25rem;
}

.mx-footer__tagline {
  font-size: 0.82rem;
  color: var(--md-default-fg-color--light);
  max-width: 38rem;
}

.mx-footer__top {
  display: grid;
  gap: 2.2rem 3rem;
}

@media screen and (min-width: 60em) {
  .mx-footer__top {
    grid-template-columns: minmax(15rem, 23rem) 1fr;
  }
}

.mx-footer__invitations {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mx-footer__desc {
  color: var(--md-default-fg-color--light);
}

.mx-footer__button,
.mx-footer__subscribe button {
  --mx-control: var(--mx-accent);
  color: white;
  background-color: var(--mx-control);
  border: 0;
  border-radius: 0.5rem;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

[data-md-color-scheme="slate"] :is(.mx-footer__button, .mx-footer__subscribe button) {
  color: oklch(0.15 0.006 300);
}

:is(.mx-footer__button, .mx-footer__subscribe button):is(:hover, :focus-visible) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(0.58 0.24 295 / 0.3);
}

:is(.mx-footer__button, .mx-footer__subscribe button):focus-visible {
  outline: 2px solid var(--mx-accent);
  outline-offset: 2px;
}

.mx-footer__button {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  padding: 0.5rem 0.9rem;
  font-weight: 600;
  font-size: 0.8rem;
}

.mx-footer__button svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentcolor;
}

.mx-footer__subscribe {
  display: flex;
  gap: 0.4rem;
  max-width: 17rem;
  margin-top: 0.8rem;
}

.mx-footer__subscribe input {
  flex: 1;
  min-width: 0;
  height: 1.9rem;
  padding: 0 0.7rem;
  font: inherit;
  color: var(--md-default-fg-color);
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--mx-border);
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}

.mx-footer__subscribe input:focus {
  border-color: var(--mx-accent);
  box-shadow: 0 0 0 2px oklch(0.58 0.24 295 / 0.2);
}

.mx-footer__subscribe input::placeholder {
  color: var(--md-default-fg-color--light);
}

.mx-footer__subscribe button {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  cursor: pointer;
}

.mx-footer__subscribe button svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentcolor;
}

.no-js .mx-footer__updates {
  display: none;
}

.mx-footer .mx-footer__answer {
  margin-top: 0.5rem;
  color: var(--md-default-fg-color);
}

.mx-footer .mx-footer__answer--joined {
  font-weight: 600;
}

.mx-footer__index {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 2rem 2.5rem;
  justify-content: space-between;
}

@media screen and (min-width: 45em) {
  .mx-footer__index {
    grid-template-columns: repeat(auto-fit, minmax(0, max-content));
    grid-auto-flow: column;
  }
}

.mx-footer__index ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mx-footer__index li {
  margin: 0;
}

.mx-footer__index a {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.22rem 0;
  transition: color 150ms ease;
}

.mx-footer__index svg {
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  fill: currentcolor;
}

.mx-footer__signature {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  align-items: center;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  font-size: 0.72rem;
  border-top: 1px solid var(--mx-border);
}

@media screen and (min-width: 45em) {
  .mx-footer__signature {
    justify-content: space-between;
  }
}

.mx-footer__academa {
  justify-self: start;
  transition: opacity 250ms;
}

.mx-footer__academa:hover {
  opacity: 0.7;
}

.mx-footer__academa img {
  display: block;
  height: 0.92rem;
}

.mx-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  align-items: center;
}

.mx-footer__sep {
  opacity: 0.35;
}

.mx-footer__copyright {
  color: var(--md-default-fg-color--light);
}

/* The sidebars as text, the navigation as the table of contents and both compact, as in
   Material for MkDocs: a link is its words, in the accent's color when it is hovered or is the
   page, with no box behind it, and the lines close together. Its words start where they did,
   in line with the logo and the tabs; the room a box kept after them is the words'. Beside the
   content only: a narrower screen's drawer keeps Zensical's larger rows, for a finger */
@media screen and (min-width: 76.25em) {
  .md-sidebar .md-nav__list {
    gap: 0;
  }

  /* the tab's name, above its pages, as a section's (the modern variant hides it) */
  .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
    display: flex;
  }

  .md-sidebar .md-nav .md-nav__link {
    margin-inline-end: 0;
  }

  .md-sidebar .md-nav .md-nav__link:not(.md-nav__container),
  .md-sidebar .md-nav__container > :nth-child(2) {
    padding-block: 0.225rem;
    padding-inline-end: 0;
  }

  .md-nav--primary .md-nav__item .md-nav__link--active {
    background: none;
  }

  .md-nav--primary .md-nav__link:is([href], [for]):is(:focus, :hover):not(.md-nav__link--active) {
    color: var(--md-accent-fg-color);
    background-color: transparent;
  }
}

/* An example's film, above its code: one card (not a centered figure) */
.md-typeset .mx-example {
  display: block;
  width: auto;
  margin: 1em 0;
  overflow: hidden;
  text-align: initial;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
}

.md-typeset .mx-example .highlight,
.md-typeset .mx-example pre {
  margin: 0;
}

.md-typeset .mx-example pre > code {
  border-radius: 0;
}

.md-typeset .mx-film {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

/* A gallery film's code, folded under the film: a row with its file's name, which opens it
   (not the theme's note, whose box, icon and margins a fold of its own would take) */
.md-typeset .mx-example .mx-code {
  margin: 0;
  padding: 0;
  font-size: inherit;
  background: none;
  border-radius: 0;
}

.md-typeset .mx-example .mx-code > summary {
  margin: 0;
  padding: 0.5rem 0.8rem;
  font-family: var(--md-code-font-family);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
}

.md-typeset .mx-example .mx-code > summary::before {
  display: none;
}

.md-typeset .mx-example .mx-code > summary:hover {
  color: var(--md-accent-fg-color);
}

/* An image the README shows on GitHub and PyPI (its URL ends in #readme), where the site shows
   the film itself, above the code */
.md-typeset img[src$="#readme"] {
  display: none;
}

/* Instant previews: every link to the site previews its target on hover (docs/previews.py),
   so no icon marks the links that do. A preview shows what its target is: an API object, as
   an editor's hover does, by its name, signature, bases and summary (its docstring's first
   paragraph); a module, by its members' names and summaries */
.md-typeset [data-preview]::after {
  display: none;
}

.md-tooltip2 .doc-contents > :not(:first-child, .doc-class-bases + p),
.md-tooltip2 .mx-cards p:has(> img) {
  display: none;
}

/* A tall film (9:16) is not as wide as the column, which would make it taller than the window:
   at most 70% of the window's height, as wide as its shape makes it, in the middle */
.md-typeset .mx-film--tall {
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  margin-inline: auto;
}

/* A rate function explorer (manimgx.js), a card as an example is: the functions' names as
   code, the one shown pressed; the plot in the page's colors; the slider under the plot's
   time, as wide as it (manimgx.js sets --mx-left and --mx-unit) */
.md-typeset .mx-rates {
  margin: 1em 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
}

.mx-rates__names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mx-rates__names button {
  padding: 0.15rem 0.45rem;
  font-family: var(--md-code-font-family);
  font-size: 0.64rem;
  color: var(--md-code-fg-color);
  cursor: pointer;
  background: var(--md-code-bg-color);
  border-radius: 0.2rem;
}

.mx-rates__names button:hover {
  color: var(--md-accent-fg-color);
}

.mx-rates__names button[aria-pressed="true"] {
  color: var(--md-default-bg-color);
  background: var(--md-primary-fg-color);
}

.mx-rates :focus-visible {
  outline: 0.1rem solid var(--md-accent-fg-color);
  outline-offset: 0.1rem;
}

.mx-rates__plot {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}

.mx-rates__plot text {
  font-size: 0.6rem;
  fill: var(--md-default-fg-color--light);
}

.mx-rates__grid,
.mx-rates__now {
  fill: none;
  stroke: var(--md-default-fg-color--lighter);
}

.mx-rates__now {
  stroke-dasharray: 2 3;
}

.mx-rates__curve {
  fill: none;
  stroke: var(--md-primary-fg-color);
  stroke-width: 2;
  stroke-linejoin: round;
}

.mx-rates__dot,
.mx-rates__square {
  fill: var(--md-primary-fg-color);
}

.mx-rates__dot {
  stroke: var(--md-default-bg-color);
  stroke-width: 2;
}

.mx-rates__ghost {
  fill: var(--md-default-bg-color);
  stroke: var(--md-default-fg-color--lighter);
  stroke-width: 1.5;
}

.mx-rates__controls {
  display: grid;
  grid-template-columns: var(--mx-left) var(--mx-unit);
  align-items: center;
  margin-top: 0.4rem;
}

.mx-rates__play {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.8rem;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  background: var(--md-default-fg-color--lightest);
  border-radius: 50%;
}

.mx-rates__play:hover {
  color: var(--md-accent-fg-color);
}

.mx-rates__play svg {
  width: 0.8rem;
  fill: currentcolor;
}

/* the thumb's middle runs along the plot's time: the track is a thumb wider */
.mx-rates input {
  width: calc(100% + 16px);
  margin: 0 -8px;
  accent-color: var(--md-primary-fg-color);
}

/* A prompt to paste into an agent (a block marked `.mx-prompt`): words, wrapped to the page */
.md-typeset .mx-prompt code {
  white-space: pre-wrap;
}

/* The reference (reference/): each page a part of manimgx's story, each entry a class, a
   function or a property in it (templates/python/material/) */

/* An index's cards: each card a link as a whole, its still above its name and its words.
   The name's link covers the card, so the whole card answers the pointer */
.md-typeset .mx-cards > ul > li {
  position: relative;
  transition:
    border-color 125ms,
    box-shadow 125ms;
}

.md-typeset .mx-cards > ul > li:is(:hover, :focus-within) {
  border-color: var(--md-accent-fg-color);
  box-shadow: var(--md-shadow-z2);
}

.md-typeset .mx-cards > ul > li a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.md-typeset .mx-cards > ul > li a {
  color: var(--md-default-fg-color);
  text-decoration: none;
}

.md-typeset .mx-cards > ul > li:is(:hover, :focus-within) a {
  color: var(--md-accent-fg-color);
}

.md-typeset .mx-cards > ul > li > p:first-child img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.2rem;
  background: #000;
}

/* An entry's heading: its name alone, as large as the page's level makes it */
.md-typeset .doc-heading code {
  font-size: inherit;
}

/* An entry's call: how a scene writes it, on one line that the page wraps (clear of the copy
   button), quieter than an example */
.md-typeset .mx-call .highlight pre {
  margin: 0.55em 0;
}

.md-typeset .mx-call pre > code {
  padding: 0.55em 2.6em 0.55em 0.9em;
  font-size: 0.72rem;
  white-space: pre-wrap;
  background: var(--md-code-bg-color);
}

/* What a call takes: each name, then what it is */
.md-typeset dl.mx-params {
  display: grid;
  grid-template-columns: fit-content(13rem) 1fr;
  gap: 0.45rem 1.1rem;
  margin: 0.8em 0 1em;
}

.md-typeset dl.mx-params > dt {
  margin: 0;
  padding-top: 0.05rem;
  font-weight: 400;
}

.md-typeset dl.mx-params > dt code {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.md-typeset dl.mx-params > dd {
  margin: 0;
}

.md-typeset dl.mx-params > dd > :first-child {
  margin-top: 0;
}

.md-typeset dl.mx-params > dd > :last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset dl.mx-params {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .md-typeset dl.mx-params > dd {
    margin-bottom: 0.5rem;
  }
}

.md-typeset .mx-also,
.md-typeset .mx-returns,
.md-typeset .mx-raises {
  margin: 0.55em 0;
}

.md-typeset .mx-also {
  color: var(--md-default-fg-color--light);
}

.md-typeset .mx-label {
  margin-right: 0.35em;
  font-weight: 600;
}

/* An entry's source: a quiet button, which opens the code where the entry is defined */
.md-typeset details.mx-source {
  margin: 0.4em 0 0.9em;
  padding: 0;
  font-size: inherit;
  background: none;
  border: 0;
  box-shadow: none;
}

.md-typeset details.mx-source > summary {
  display: inline-flex;
  margin: 0;
  padding: 0.15rem 0.65rem;
  font-family: var(--md-code-font-family);
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--md-default-fg-color--light);
  background: none;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 1rem;
  cursor: pointer;
}

.md-typeset details.mx-source > summary::before,
.md-typeset details.mx-source > summary::after {
  display: none;
}

.md-typeset details.mx-source > summary:hover,
.md-typeset details.mx-source[open] > summary {
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

.md-typeset .mx-source__where {
  margin: 0.5em 0 0;
  font-size: 0.62rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset details.mx-source .highlight {
  margin-top: 0.4em;
}

/* An entry among others: a class's entry starts with a rule, as a new part of the story */
.md-typeset h2.doc-heading {
  margin-top: 2.2em;
  padding-top: 1.2em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* A member under its class: its heading says where it belongs, so its contents are not set in
   (the theme sets each level in, with a rule beside it) */
.md-typeset div.doc-contents:not(.first) {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

/* Constants (`m.UP`, `m.PI`, `m.SMALL_BUFF`): a row each, the name beside what it is */
.md-typeset .mx-constants {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.1rem;
  align-items: baseline;
  margin: 1em 0 1.4em;
}

.md-typeset .mx-constants .doc-object {
  display: contents;
}

.md-typeset .mx-constants .doc-attribute > .doc-heading {
  margin: 0;
  font-size: 0.75rem;
}

.md-typeset .mx-constants .doc-attribute > .doc-contents > :first-child {
  margin-top: 0;
}

.md-typeset .mx-constants .doc-attribute > .doc-contents > :last-child {
  margin-bottom: 0;
}

/* The palette (colors.md): a swatch for each named color, its names and its hex code */
.md-typeset .mx-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem;
  margin: 1em 0 1.6em;
}

.md-typeset .mx-swatch {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.1rem 0.55rem;
  align-items: center;
}

.md-typeset .mx-swatch__color {
  grid-row: span 2;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
}

.md-typeset .mx-swatch__names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  font-size: 0.62rem;
}

.md-typeset .mx-swatch__names code {
  padding: 0 0.2em;
}

.md-typeset .mx-swatch__hex {
  font-family: var(--md-code-font-family);
  font-size: 0.58rem;
  color: var(--md-default-fg-color--light);
}

/* An entry's parts, close together: its words, its call, what it takes, its source */
.md-typeset .doc-contents > p {
  margin: 0.55em 0;
}

.md-typeset h3.doc-heading,
.md-typeset h4.doc-heading {
  margin-top: 1.5em;
}

/* Rows (a family of functions alike, as the easing curves): each a row, its name beside what
   it does; their calls and their sources are their entries' alike, so they are left out */
.md-typeset .mx-rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.1rem;
  align-items: baseline;
  margin: 1em 0 1.4em;
}

.md-typeset .mx-rows .doc-object {
  display: contents;
}

.md-typeset .mx-rows .doc-function > .doc-heading {
  margin: 0;
  font-size: 0.75rem;
}

.md-typeset .mx-rows .mx-call,
.md-typeset .mx-rows details.mx-source,
.md-typeset .mx-rows .mx-returns,
.md-typeset .mx-rows dl.mx-params {
  display: none;
}

.md-typeset .mx-rows .doc-contents > :first-child {
  margin-top: 0;
}

.md-typeset .mx-benchmark {
  width: 100%;
  max-width: none;
  margin: 1em 0;
}

.md-typeset .mx-benchmark > p {
  max-width: none;
  margin: 0.5em 0 0;
  color: var(--md-default-fg-color--light);
  font-size: 0.65rem;
  font-style: normal;
}

.md-typeset .mx-benchmark > p > sub {
  position: static;
  font-size: inherit;
  vertical-align: baseline;
}

/* Identical crops of the original 1080p benchmark frames; no image resampling. */
.md-typeset .md-typeset__table:has(img[src*="/benchmark-quality/"]) {
  display: block;
}

.md-typeset table:has(img[src*="/benchmark-quality/"]) {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  margin: 1rem auto 2rem;
}

.md-typeset table:has(img[src*="/benchmark-quality/"]) td {
  padding: 0;
}

.md-typeset table:has(img[src*="/benchmark-quality/"]) th {
  font-size: clamp(0.55rem, 1.5vw, 0.7rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.md-typeset table:has(img[src*="/benchmark-quality/"]) img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
/* ============================================================
   数境 美化增强 — 现代二次元风格 · 统一紫色系
   ============================================================ */

/* 卡片 hover：上浮 + 紫色光晕 */
.md-typeset .mx-cards > ul > li {
  border-radius: 0.7rem;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 280ms ease, box-shadow 280ms ease;
}

.md-typeset .mx-cards > ul > li:is(:hover, :focus-within) {
  transform: translateY(-4px);
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 12px 32px rgba(139, 92, 246, 0.18), 0 0 0 1px rgba(139, 92, 246, 0.1);
}

/* 代码块圆角 */
.md-typeset pre > code,
.md-typeset .highlight pre {
  border-radius: 0.6rem;
}

.md-typeset .mx-example {
  border-radius: 0.7rem;
  overflow: hidden;
  transition: box-shadow 280ms ease;
}

.md-typeset .mx-example:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.12);
}

/* 链接 hover：紫色 + 流畅过渡 */
.md-typeset a {
  transition: color 180ms ease;
}

.md-typeset a:not(.md-header__link):hover {
  color: var(--md-primary-fg-color);
  text-decoration-thickness: 2px;
}

/* 表格：圆角 + 紫色表头 + 阴影 */
.md-typeset table:not([class]) {
  border-radius: 0.6rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08);
}

.md-typeset table:not([class]) th {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(192, 132, 252, 0.08));
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(192, 132, 252, 0.12));
}

/* 内容排版 */
.md-typeset {
  line-height: 1.75;
}

.md-typeset p {
  text-wrap: pretty;
}

.md-typeset h2 {
  margin-top: 2.2em;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.md-typeset h3 {
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* 导航栏：微妙紫色底边 */
.md-header {
  box-shadow: 0 1px 0 rgba(139, 92, 246, 0.08);
}

[data-md-color-scheme="slate"] .md-header {
  box-shadow: 0 1px 0 rgba(192, 132, 252, 0.08);
}

/* tabs 底边 */
.md-tabs {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* 内联代码：紫色微调 */
.md-typeset code:not(.highlight *) {
  border-radius: 0.35rem;
  padding: 0.1em 0.38em;
  font-weight: 500;
  background-color: rgba(139, 92, 246, 0.08);
}

[data-md-color-scheme="slate"] .md-typeset code:not(.highlight *) {
  background-color: #313244;
  color: #cdd6f4;
}

/* 引用块：紫色渐变左边框 */
.md-typeset blockquote {
  border-left: 3px solid var(--md-primary-fg-color);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.7rem 1.3rem;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.06), transparent);
}

[data-md-color-scheme="slate"] .md-typeset blockquote {
  background: linear-gradient(90deg, rgba(192, 132, 252, 0.08), transparent);
}

/* 水平线：紫色渐变 */
.md-typeset hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(139, 92, 246, 0.3),
    transparent
  );
  margin: 2.5em 0;
}

/* 导航链接 hover：紫色 */
.md-nav__link:is(:hover, :focus) {
  color: var(--md-primary-fg-color);
}

/* 搜索按钮 hover */
.md-search__input:hover {
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}
/* 滚动条：最细、不高光 */
.md-sidebar__scrollwrap {
  scrollbar-width: thin;
  scrollbar-color: var(--md-default-fg-color--lightest) transparent;
}

.md-sidebar__scrollwrap::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-track {
  background: transparent;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background: var(--md-default-fg-color--lightest);
  border-radius: 0;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
  background: var(--md-default-fg-color--lightest);
}
/* 导航主次区分：section 标题大而粗，子链接小而淡 */
.md-nav__item--section > .md-nav__link {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
  margin-top: 0.6rem;
  padding-bottom: 0.3rem;
}

/* 桌面端 section 标题纯展示不可点击，手机端可点击展开 */
@media screen and (min-width: 76.25em) {
  .md-nav__item--section > .md-nav__link {
    pointer-events: none;
  }
}

.md-nav__item--section > .md-nav__link:hover {
  color: var(--md-default-fg-color);
}

.md-nav__item:not(.md-nav__item--section) > .md-nav__link {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--md-default-fg-color--light);
}

.md-nav__item:not(.md-nav__item--section) > .md-nav__link:is(:hover, :focus) {
  color: var(--md-primary-fg-color);
}

.md-nav__item:not(.md-nav__item--section) > .md-nav__link--active {
  font-weight: 600;
  color: var(--md-primary-fg-color);
}
/* ============================================================
   数境 额外美化 — 细节打磨
   ============================================================ */

/* 回到顶部按钮：紫色 + 上浮 */
.md-top {
  border-radius: 0.5rem;
  background-color: var(--md-primary-fg-color);
  color: white;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

[data-md-color-scheme="slate"] .md-top {
  color: #1a1b26;
}

.md-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* 提示框 (admonition)：圆角 + 紫色左边框 */
.md-typeset .admonition {
  border-radius: 0.6rem;
  border-left: 3px solid var(--md-primary-fg-color);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.06);
}

.md-typeset .admonition-title {
  border-left: 0;
}

/* 图片/视频圆角 + 微阴影 */
.md-typeset img:not([src*="logo"]):not([src*="badge"]):not([src*="benchmark-quality"]) {
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-md-color-scheme="slate"] .md-typeset img:not([src*="logo"]):not([src*="badge"]):not([src*="benchmark-quality"]) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.md-typeset video {
  border-radius: 0.5rem;
}

/* 折叠详情块：紫色图标 */
.md-typeset details {
  border-radius: 0.6rem;
  border-left: 3px solid var(--md-primary-fg-color);
  transition: box-shadow 200ms ease;
}

.md-typeset details[open] {
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.06);
}

.md-typeset details > summary {
  border-left: 0;
}

/* 顶部 tabs：紫色下划线指示器 */
.md-tabs__link--active {
  color: var(--md-primary-fg-color);
}

.md-tabs__link {
  transition: color 180ms ease;
}

/* 搜索框：紫色焦点 */
.md-search__input:focus ~ .md-search__icon {
  color: var(--md-primary-fg-color);
}

/* 面包屑分隔符：紫色 */
.md-path__link {
  color: var(--md-primary-fg-color);
}

/* 代码复制按钮：紫色 hover */
.md-clipboard {
  transition: color 180ms ease, opacity 180ms ease;
}

.md-clipboard:hover {
  color: var(--md-primary-fg-color);
}

/* 标签 (tags)：紫色 */
.md-typeset .md-tag {
  border-radius: 0.4rem;
  font-weight: 500;
}

.md-typeset .md-tag--active {
  background-color: var(--md-primary-fg-color);
  color: white;
}

/* 内容区域最大宽度优化 */
.md-content__inner {
  max-width: 48rem;
}

.md-content__inner > .mx-cards + .mx-cards,
.md-content__inner > * + .mx-cards {
  max-width: none;
}
/* ============================================================
   数境 毛玻璃 + 现代 HTML 特效
   ============================================================ */

/* 毛玻璃导航栏 */
.md-header {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.72) !important;
}

[data-md-color-scheme="slate"] .md-header {
  background-color: rgba(26, 27, 38, 0.72) !important;
}

/* 毛玻璃 tabs */
.md-tabs {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.6) !important;
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: rgba(26, 27, 38, 0.6) !important;
}

/* 毛玻璃搜索弹层 */
.md-search__overlay {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.82) !important;
}

[data-md-color-scheme="slate"] .md-search__overlay {
  background-color: rgba(26, 27, 38, 0.82) !important;
}

/* 毛玻璃侧边栏 */
.md-sidebar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 毛玻璃回到顶部 */
.md-top {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(139, 92, 246, 0.85) !important;
}

/* 渐变标题文字 */
.md-typeset h1 {
  background: linear-gradient(135deg, #8b5cf6, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 文字选中：紫色 */
::selection {
  background: rgba(139, 92, 246, 0.25);
  color: inherit;
}

::-moz-selection {
  background: rgba(139, 92, 246, 0.25);
  color: inherit;
}

/* 滚动渐入动画 */
@keyframes mx-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.md-content__inner {
  animation: mx-fade-in-up 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 卡片光晕脉冲 */
@keyframes mx-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
  50% { box-shadow: 0 0 20px 4px rgba(139, 92, 246, 0.12); }
}

.md-typeset .mx-cards > ul > li:is(:hover, :focus-within) {
  animation: mx-glow-pulse 1.5s ease-in-out infinite;
}

/* 页面顶部渐变光 */
.md-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 60rem;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);
  pointer-events: none;
}

/* 焦点光晕 */
:focus-visible {
  outline-color: var(--md-primary-fg-color);
}

/* 代码块微妙毛玻璃 */
.md-typeset .highlight pre {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 悬浮卡片阴影渐变 */
.md-typeset .mx-cards > ul > li {
  background-image: linear-gradient(135deg, rgba(139, 92, 246, 0.02), transparent);
}

/* 链接下划线渐入 */
.md-typeset .md-content__inner a:not(.md-header__link):not(.md-tag) {
  text-decoration-color: rgba(139, 92, 246, 0.3);
  text-underline-offset: 2px;
}

/* 导航 active 指示器：紫色发光点 */
.md-nav__item--active > .md-nav__link::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--md-primary-fg-color);
  box-shadow: 0 0 6px rgba(139, 92, 246, 0.6);
  vertical-align: middle;
}