/* Look shared with the Science Wonders notebook: cool paper, white panels, one blue accent,
   and a dark "bench" for anything you watch run. Spectral headings over IBM Plex. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Spectral:wght@500;600&display=swap");

:root {
  --mlx-display: "Spectral", "Iowan Old Style", Georgia, serif;
  --mlx-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mlx-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --mlx-radius: 10px;
}
[data-md-color-scheme="default"] {
  --mlx-paper: #eef1f5;
  --mlx-panel: #ffffff;
  --mlx-ink: #131c27;
  --mlx-ink-soft: #4a5868;
  --mlx-rule: #d3dae3;
  --mlx-accent: #2647c9;
  --mlx-accent-ink: #ffffff;
  --mlx-accent-wash: rgba(38, 71, 201, 0.08);
  --mlx-bench: #0d1420;
  --mlx-bench-ink: #c9d4e3;
  --mlx-bench-rule: #26324a;
  --mlx-good: #1f8a5b;
  --mlx-warn: #b5562b;
  --mlx-spec: #6b4bb8;
}
[data-md-color-scheme="slate"] {
  --mlx-paper: #0b1018;
  --mlx-panel: #121a26;
  --mlx-ink: #e4eaf2;
  --mlx-ink-soft: #97a6b9;
  --mlx-rule: #243045;
  --mlx-accent: #8fa6ff;
  --mlx-accent-ink: #0b1018;
  --mlx-accent-wash: rgba(143, 166, 255, 0.1);
  --mlx-bench: #05080e;
  --mlx-bench-ink: #c9d4e3;
  --mlx-bench-rule: #1f2a3f;
  --mlx-good: #4cc48d;
  --mlx-warn: #f08a5d;
  --mlx-spec: #c9aaff;
  color-scheme: dark;
}
[data-md-color-scheme="default"], [data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--mlx-paper);
  --md-default-fg-color: var(--mlx-ink);
  --md-default-fg-color--light: var(--mlx-ink-soft);
  --md-default-fg-color--lighter: var(--mlx-rule);
  --md-primary-fg-color: var(--mlx-paper);
  --md-primary-bg-color: var(--mlx-ink);
  --md-primary-bg-color--light: var(--mlx-ink-soft);
  --md-accent-fg-color: var(--mlx-accent);
  --md-typeset-color: var(--mlx-ink);
  --md-typeset-a-color: var(--mlx-accent);
  --md-code-bg-color: var(--mlx-panel);
  --md-code-fg-color: var(--mlx-ink);
  --md-text-font-family: var(--mlx-body);
  --md-code-font-family: var(--mlx-mono);
}
body { background: var(--mlx-paper); }

/* Top bar: brand in Spectral on paper, hairline below */
.md-header { background: var(--mlx-paper); color: var(--mlx-ink); box-shadow: 0 1px 0 var(--mlx-rule); }
.md-header__topic:first-child { font-family: var(--mlx-display); font-weight: 600; font-size: 1.05rem; overflow: visible; top: 0; bottom: 0; align-items: center; }
.md-header__button.md-logo { display: none; }
.md-search__form { background: var(--mlx-panel); border: 1px solid var(--mlx-rule); border-radius: 999px; }
.md-search__form:hover { background: var(--mlx-panel); border-color: var(--mlx-ink-soft); }
.md-search__input { background: transparent; color: var(--mlx-ink); }
.md-search__input::placeholder, .md-search__icon { color: var(--mlx-ink-soft); }

/* Reading typography */
.md-typeset { font-size: 0.84rem; line-height: 1.65; }
.md-typeset h1, .md-typeset h2, .md-typeset h3 { font-family: var(--mlx-display); font-weight: 600; color: var(--mlx-ink); text-wrap: balance; line-height: 1.15; }
.md-typeset h1 { font-size: 2.2em; letter-spacing: -0.01em; margin-bottom: 0.6em; }
.md-typeset h2 { font-size: 1.5em; margin-top: 2.2em; padding-top: 1em; border-top: 1px solid var(--mlx-rule); }
.md-typeset h3 { font-size: 1.15em; }
.md-typeset a { text-decoration: underline; text-decoration-color: var(--mlx-rule); text-underline-offset: 3px; }
.md-typeset a:hover { color: var(--mlx-accent); text-decoration-color: var(--mlx-accent); }
.md-typeset code { font-size: 0.85em; border-radius: 4px; background: var(--mlx-accent-wash); }
.md-typeset pre > code { background: var(--mlx-panel); }
.md-typeset table:not([class]) {
  font-size: 0.74rem; border: 1px solid var(--mlx-rule); border-radius: var(--mlx-radius); overflow: hidden;
  font-variant-numeric: tabular-nums; background: var(--mlx-panel);
}
.md-typeset table:not([class]) th { font-weight: 600; background: var(--mlx-paper); }
.md-typeset table:not([class]) td, .md-typeset table:not([class]) th { padding: 0.55em 0.9em; line-height: 1.5; }
/* Diagrams and plots keep a white card so their light-background drawings read in dark mode too */
.md-typeset img[src$=".svg"] { border-radius: var(--mlx-radius); border: 1px solid var(--mlx-rule); background: #fff; }
.md-nav__link--active { color: var(--mlx-accent) !important; }
.md-nav__title { font-family: var(--mlx-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mlx-ink-soft); }
.md-footer { background: var(--mlx-paper); color: var(--mlx-ink-soft); border-top: 1px solid var(--mlx-rule); }
.md-footer-meta { background: transparent; }
:focus-visible { outline: 2px solid var(--mlx-accent); outline-offset: 2px; }

/* Evidence tags and the TL;DR panel (classes added by extra.js) */
.mlx-tag {
  display: inline-block; font-family: var(--mlx-mono); font-size: 0.72em; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 0.1em 0.6em; border-radius: 999px;
  border: 1px solid currentColor; vertical-align: 0.1em; white-space: nowrap;
}
.mlx-tag--established { color: var(--mlx-good); }
.mlx-tag--likely { color: var(--mlx-warn); }
.mlx-tag--speculative { color: var(--mlx-spec); }
.mlx-tldr {
  background: var(--mlx-panel); border: 1px solid var(--mlx-rule); border-left: 3px solid var(--mlx-accent);
  border-radius: 0 var(--mlx-radius) var(--mlx-radius) 0; padding: 0.5rem 1.2rem 0.6rem; margin: 1.2rem 0 1.6rem;
}
.mlx-tldr > p:first-child strong {
  font-family: var(--mlx-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mlx-ink-soft);
}

/* Notebook cells (mkdocs-jupyter): code on white panels, plots on the bench */
.jupyter-wrapper { --jp-content-font-family: var(--mlx-body); --jp-code-font-family: var(--mlx-mono);
  --jp-cell-editor-background: var(--mlx-panel); --jp-cell-editor-border-color: var(--mlx-rule);
  --jp-layout-color0: transparent; --jp-content-font-color1: var(--mlx-ink); }
.jupyter-wrapper .jp-InputPrompt, .jupyter-wrapper .jp-OutputPrompt { display: none !important; }
.jupyter-wrapper .jp-Cell { padding: 0 !important; }
.jupyter-wrapper .jp-InputArea-editor, .jupyter-wrapper .jp-CodeCell .highlight {
  border: 1px solid var(--mlx-rule) !important; border-radius: var(--mlx-radius) !important; background: var(--mlx-panel) !important;
}
.jupyter-wrapper .highlight pre { font-size: 0.72rem !important; line-height: 1.6 !important; }
.jupyter-wrapper .jp-OutputArea-output pre {
  font-family: var(--mlx-mono); font-size: 0.7rem; color: var(--mlx-bench-ink); background: var(--mlx-bench);
  border: 1px solid var(--mlx-bench-rule); border-radius: var(--mlx-radius); padding: 0.7rem 0.9rem !important; margin: 0 !important;
}
/* Breathing room between a code cell, its printed output and its plot */
.jupyter-wrapper .jp-CodeCell .jp-Cell-outputWrapper { margin-top: 1rem !important; }
.jupyter-wrapper .jp-OutputArea-child + .jp-OutputArea-child { margin-top: 1rem !important; }
.jupyter-wrapper .jp-Cell + .jp-CodeCell { margin-top: 1.4rem !important; }
.jupyter-wrapper .jp-CodeCell + .jp-Cell { margin-top: 1.4rem !important; }
.jupyter-wrapper .jp-RenderedImage img { background: #fff; border-radius: var(--mlx-radius); border: 1px solid var(--mlx-rule); padding: 6px; }
.jupyter-wrapper .jp-RenderedHTMLCommon { font-size: 0.84rem; line-height: 1.65; }

/* ---------- Landing page ---------- */
.mlx-wrap { max-width: 61rem; margin: 0 auto; padding-inline: 1rem; padding-block: 2.4rem 1rem; font-family: var(--mlx-body); color: var(--mlx-ink); }
.mlx-wrap h1, .mlx-wrap h2, .mlx-wrap h3 { font-family: var(--mlx-display); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; color: var(--mlx-ink); }
.mlx-wrap p { margin: 0; }
.mlx-eyebrow { font-family: var(--mlx-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mlx-ink-soft); }

.mlx-hero { display: grid; gap: 1.1rem; margin-bottom: 2.6rem; }
.mlx-hero h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); max-width: 18ch; letter-spacing: -0.01em; }
.mlx-hero > p { font-size: 1.1rem; line-height: 1.6; color: var(--mlx-ink-soft); max-width: 56ch; }

.mlx-bench {
  background: var(--mlx-bench); color: var(--mlx-bench-ink); border: 1px solid var(--mlx-bench-rule);
  border-radius: var(--mlx-radius); padding: 0.9rem 1rem 1.1rem; margin-top: 0.6rem; overflow-x: auto;
}
.mlx-bench__label { display: flex; justify-content: space-between; font-family: var(--mlx-mono); font-size: 0.62rem; color: #6f7f99; margin-bottom: 0.8rem; }
.mlx-pipe { display: flex; align-items: center; gap: 0.5rem; min-width: max-content; position: relative; }
.mlx-pipe::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #5cff8a; opacity: 0.35; }
.mlx-pipe__block {
  display: flex; align-items: center; gap: 0.5rem; padding: 1.1rem 0.7rem; position: relative;
  border: 1px dashed #3a4760; border-radius: 8px;
}
.mlx-pipe__rep { position: absolute; top: 0.15rem; left: 0.6rem; font-family: var(--mlx-mono); font-size: 0.6rem; color: #6f7f99; }
.mlx-pipe__node {
  position: relative; font-family: var(--mlx-mono); font-size: 0.7rem; color: #e9eef7; white-space: nowrap;
  background: #0d1420; border: 1px solid #3a4760; border-radius: 6px; padding: 0.5rem 0.75rem; text-decoration: none;
}
.mlx-pipe__node small { font-size: 0.6rem; opacity: 0.75; margin-left: 0.3rem; }
.mlx-pipe__node--thin { padding-inline: 0.45rem; color: #97a6b9; }
.mlx-pipe__node--blue { border-color: #8fa6ff; color: #8fa6ff; }
.mlx-pipe__node--green { border-color: #5cff8a; color: #5cff8a; }
/* Every block links to its chapter; all of them lift and glow on hover */
.mlx-pipe a.mlx-pipe__node, .mlx-pipe a.mlx-pipe__add { transition: transform 0.15s, box-shadow 0.15s; }
.mlx-pipe a.mlx-pipe__node:hover, .mlx-pipe a.mlx-pipe__add:hover { transform: translateY(-2px); box-shadow: 0 0 18px -6px currentColor; }
.mlx-pipe a.mlx-pipe__node { color: #e9eef7; } .mlx-pipe a.mlx-pipe__node--thin { color: #97a6b9; }
.mlx-pipe a.mlx-pipe__node--blue { color: #8fa6ff; } .mlx-pipe a.mlx-pipe__node--green { color: #5cff8a; }
.mlx-pipe a.mlx-pipe__add { color: #5cff8a; text-decoration: none; }
.mlx-pipe__add { position: relative; font-family: var(--mlx-mono); color: #5cff8a; background: #05080e; border: 1px solid #5cff8a; border-radius: 50%; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; font-size: 0.75rem; }

.mlx-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; font-size: 0.78rem; color: var(--mlx-ink-soft); }
.mlx-stats b { font-family: var(--mlx-mono); font-weight: 500; color: var(--mlx-ink); font-variant-numeric: tabular-nums; margin-left: 0.3rem; }
.mlx-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.mlx-btn, .mlx-chip {
  font: inherit; font-family: var(--mlx-body); font-size: 0.78rem; font-weight: 500; padding: 0.5rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--mlx-rule); background: var(--mlx-panel); color: var(--mlx-ink); cursor: pointer; text-decoration: none;
}
.mlx-btn:hover, .mlx-chip:hover { border-color: var(--mlx-ink-soft); color: var(--mlx-ink); }
.mlx-btn--primary, .mlx-btn--primary:hover { background: var(--mlx-accent); color: var(--mlx-accent-ink); border-color: var(--mlx-accent); }
.mlx-chip { display: inline-flex; align-items: center; gap: 0.45rem; }
.mlx-chip span { font-family: var(--mlx-mono); font-size: 0.68rem; color: var(--mlx-ink-soft); }
.mlx-chip[aria-pressed="true"] { background: var(--mlx-ink); color: var(--mlx-paper); border-color: var(--mlx-ink); }
.mlx-chip[aria-pressed="true"] span { color: inherit; opacity: 0.75; }

.mlx-finder { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding-top: 1.6rem; border-top: 1px solid var(--mlx-rule); scroll-margin-top: 4rem; }
.mlx-search {
  flex: 1 1 13rem; max-width: 20rem; font: inherit; font-size: 0.78rem; padding: 0.5rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--mlx-rule); background: var(--mlx-panel); color: var(--mlx-ink);
}
.mlx-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mlx-none { color: var(--mlx-ink-soft); padding-block: 1.5rem; }

.mlx-shelf { scroll-margin-top: 4rem; }
.mlx-shelf__label { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-block: 2.2rem 0.3rem; }
.mlx-shelf__label h2 { font-size: 1.6rem; }
.mlx-shelf__desc { color: var(--mlx-ink-soft); max-width: 62ch; margin-bottom: 1rem !important; font-size: 0.86rem; line-height: 1.6; }
.mlx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 1.1rem; }
.mlx-card {
  display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden;
  background: var(--mlx-panel); border: 1px solid var(--mlx-rule); border-radius: var(--mlx-radius);
  color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s;
}
.mlx-card--ready:hover { border-color: var(--mlx-accent); transform: translateY(-2px); color: inherit; }
.mlx-card__thumb { background: var(--mlx-bench); aspect-ratio: 16 / 7; max-width: 100%; }
.mlx-card__thumb svg { display: block; width: 100%; height: 100%; }
.mlx-card__body { padding: 0.9rem 1.1rem 1.1rem; display: grid; gap: 0.45rem; align-content: start; }
.mlx-card__body h3 { font-size: 1.15rem; }
.mlx-chain { display: flex; flex-wrap: wrap; gap: 0.2rem 0; font-family: var(--mlx-mono); font-size: 0.64rem; color: var(--mlx-ink); }
.mlx-chain span:not(:last-child)::after { content: "\2192"; margin: 0 0.4em; color: var(--mlx-ink-soft); }
.mlx-card__q { font-size: 0.8rem; line-height: 1.5; color: var(--mlx-ink-soft); }
.mlx-go { font-size: 0.74rem; font-weight: 500; color: var(--mlx-ink-soft); margin-top: 0.2rem; }
.mlx-card--ready .mlx-go { color: var(--mlx-accent); }

.mlx-explain {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1.6rem;
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--mlx-rule);
}
.mlx-explain section { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.mlx-explain p { font-size: 0.82rem; line-height: 1.6; color: var(--mlx-ink-soft); }
.mlx-explain .mlx-tag { font-size: 0.58rem; margin-top: 0.3rem; }

@media (max-width: 560px) {
  .mlx-hero h1 { font-size: 2.2rem; }
  .mlx-shelf__label h2 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mlx-card, .mlx-pipe a.mlx-pipe__node, .mlx-pipe a.mlx-pipe__add { transition: none; }
}
.mlx-wrap [hidden] { display: none !important; }
.jupyter-wrapper .jp-RenderedHTMLCommon :is(h1, h2, h3, h4) { font-family: var(--mlx-display); font-weight: 600; color: var(--mlx-ink); text-wrap: balance; }

/* ---------- Textbook furniture on chapter pages ---------- */
.md-typeset .mlx-kicker { font-family: var(--mlx-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mlx-accent); margin: 0 0 0.6rem; }
.md-typeset .mlx-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.9rem 1.4rem; margin: 0 0 1.4rem;
  padding-block: 0.8rem; border-block: 1px solid var(--mlx-rule);
}
.md-typeset .mlx-meta div { min-width: 0; }
.md-typeset .mlx-meta dt { font-family: var(--mlx-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mlx-ink-soft); }
.md-typeset .mlx-meta dd { margin: 0.15rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--mlx-ink); }

.md-typeset .mlx-box { background: var(--mlx-panel); border: 1px solid var(--mlx-rule); border-radius: var(--mlx-radius); padding: 0.9rem 1.2rem 1rem; margin: 1.4rem 0; }
.md-typeset .mlx-box > p { margin: 0.4rem 0; }
.md-typeset .mlx-box ol { margin: 0.4rem 0 0; }
.md-typeset .mlx-box li { margin-bottom: 0.25rem; }
.md-typeset .mlx-box__label { font-family: var(--mlx-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mlx-ink-soft); margin: 0 0 0.3rem !important; }
.md-typeset .mlx-box--objectives { border-top: 3px solid var(--mlx-good); }
.md-typeset .mlx-box--objectives .mlx-box__label { color: var(--mlx-good); }
.md-typeset .mlx-box--eq { background: var(--mlx-paper); border-style: solid; }
.md-typeset .mlx-eq { overflow-x: auto; padding: 0.5rem 0; font-size: 1.05rem; color: var(--mlx-ink); }
.md-typeset .mlx-eq math { font-size: 1.12em; }
.md-typeset .mlx-eq__where { font-size: 0.76rem; color: var(--mlx-ink-soft); }
.md-typeset .mlx-box--predict { border-left: 3px solid var(--mlx-accent); border-radius: 0 var(--mlx-radius) var(--mlx-radius) 0; }
.md-typeset .mlx-box--predict .mlx-box__label { color: var(--mlx-accent); }
.md-typeset .mlx-predict__q { font-family: var(--mlx-display); font-size: 1.02rem; font-weight: 600; line-height: 1.4; }
.md-typeset .mlx-box details { margin: 0.5rem 0 0; border-top: 1px solid var(--mlx-rule); padding-top: 0.5rem; }
.md-typeset .mlx-box summary { cursor: pointer; font-weight: 500; color: var(--mlx-accent); list-style-position: outside; }
.md-typeset .mlx-box details[open] > summary { margin-bottom: 0.3rem; }
.md-typeset .mlx-box details p { margin: 0 0 0.4rem; color: var(--mlx-ink); }
.md-typeset .mlx-box--check { border-top: 3px solid var(--mlx-warn); }
.md-typeset .mlx-box--check .mlx-box__label { color: var(--mlx-warn); }
.md-typeset .mlx-box--check summary { color: var(--mlx-ink); }
.md-typeset .mlx-box--check details p { color: var(--mlx-ink-soft); }

.md-typeset .mlx-secnum { font-family: var(--mlx-mono); font-weight: 400; font-size: 0.62em; color: var(--mlx-accent); margin-right: 0.6em; vertical-align: 0.12em; }
.md-typeset .mlx-figure { margin: 1.4rem 0; }
.md-typeset .mlx-figure img { display: block; max-width: 100%; }
.md-typeset .mlx-figure figcaption { font-size: 0.74rem; color: var(--mlx-ink-soft); text-align: left; max-width: none; margin-top: 0.5rem; }
.md-typeset .mlx-figure figcaption b { color: var(--mlx-ink); font-weight: 600; margin-right: 0.3em; }
.mlx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--mlx-accent); transform-origin: 0 50%; transform: scaleX(0); z-index: 10; pointer-events: none; }

/* Prev / next as course navigation */
.md-footer__inner { padding-block: 0.6rem; }
.md-footer__link { opacity: 1; }
.md-footer__title { font-family: var(--mlx-display); font-weight: 600; }
.md-footer__direction { font-family: var(--mlx-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.md-nav__item--section > .md-nav__link { font-family: var(--mlx-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mlx-ink-soft); }
.mlx-card__meta { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mlx-card__meta span { font-family: var(--mlx-mono); font-size: 0.6rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--mlx-accent-wash); color: var(--mlx-accent); }
.mlx-course { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.8rem 1.4rem; margin: 0.4rem 0 0; padding-block: 0.9rem; border-block: 1px solid var(--mlx-rule); }
.mlx-course div { min-width: 0; }
.mlx-course dt { font-family: var(--mlx-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mlx-ink-soft); }
.mlx-course dd { margin: 0.15rem 0 0; font-size: 0.8rem; line-height: 1.45; }
/* Reveal toggles: plain disclosure, not Material's admonition look */
.md-typeset .mlx-box details { background: none; border: 0; border-top: 1px solid var(--mlx-rule); border-radius: 0; box-shadow: none; padding: 0.5rem 0 0; font-size: inherit; overflow: visible; }
.md-typeset .mlx-box details > summary { background: none; padding: 0.15rem 0 0.15rem 1.2rem; border: 0; font-weight: 500; position: relative; }
.md-typeset .mlx-box details > summary::before { content: "+"; -webkit-mask: none; mask: none; background: none; position: absolute; left: 0; top: 0.1rem; width: auto; height: auto; font-family: var(--mlx-mono); color: var(--mlx-accent); transform: none; }
.md-typeset .mlx-box details[open] > summary::before { content: "\2212"; }
.md-typeset .mlx-box details > summary::after { display: none; }
.md-typeset .mlx-box details > p { padding-left: 1.2rem; }
.jupyter-wrapper .jp-OutputArea-output pre, .jupyter-wrapper .jp-OutputArea-output pre * { color: var(--mlx-bench-ink) !important; }

/* ---------- Evolution tree (assets/tree.js) ---------- */
.mlx-tree { margin-bottom: 2.6rem; scroll-margin-top: 4rem; }
.mlx-tree__controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.8rem; }
.mlx-tree__bench { padding: 0.6rem 0.4rem; overflow-x: auto; }
.mlx-tree__stage { position: relative; width: max-content; }
.mlx-tree__stage svg { display: block; font-family: var(--mlx-body); }
.mlx-tree__axis { font-family: var(--mlx-mono); font-size: 10px; fill: #6f7f99; }
.mlx-tree__grid { stroke: #1f2a3f; stroke-width: 1; }
.mlx-tree__sep { stroke: #26324a; stroke-width: 1; stroke-dasharray: 2 4; }
.mlx-tree__lin { font-family: var(--mlx-display); font-size: 12.5px; font-weight: 600; fill: #e4eaf2; }
.mlx-tree__ch { font-family: var(--mlx-mono); font-size: 9.5px; fill: #6f7f99; }
.mlx-tree__kind { font-family: var(--mlx-mono); font-size: 9.5px; }
.mlx-tree__edge { stroke-width: 1.6; opacity: 0.45; transition: opacity 0.15s; }
.mlx-tree__edge--merge { stroke-dasharray: 3 3; opacity: 0.55; }
.mlx-tree__node { cursor: pointer; outline: none; transition: opacity 0.15s; }
.mlx-tree__label { font-size: 10.5px; fill: #c9d4e3; }
.mlx-tree__label--major { font-weight: 600; fill: #ffffff; }
.mlx-tree__node:focus-visible .mlx-tree__dot { stroke: #ffffff; stroke-width: 2.5; }
.mlx-tree.is-focused .mlx-tree__node:not(.is-on) { opacity: 0.22; }
.mlx-tree.is-focused .mlx-tree__edge { opacity: 0.1; }
.mlx-tree.is-focused .mlx-tree__edge.is-on { opacity: 1; stroke-width: 2.2; }
.mlx-tree__tip {
  position: absolute; z-index: 2; width: 17rem; max-width: calc(100vw - 3rem); padding: 0.7rem 0.85rem 0.8rem;
  background: var(--mlx-panel); color: var(--mlx-ink); border: 1px solid var(--mlx-rule); border-radius: 8px;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.55); font-size: 0.74rem; line-height: 1.5;
}
.mlx-tree__tip h4 { margin: 0.15rem 0 0.25rem; font-family: var(--mlx-display); font-size: 0.98rem; font-weight: 600; }
.mlx-tree__tip h4 em { font-style: normal; font-family: var(--mlx-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mlx-accent); border: 1px solid currentColor; border-radius: 999px; padding: 0.05rem 0.4rem; vertical-align: 0.2em; }
.mlx-tree__tip p { margin: 0 0 0.4rem; color: var(--mlx-ink-soft); }
.mlx-tree__tip .mlx-tree__tipmeta { display: flex; justify-content: space-between; gap: 0.6rem; margin: 0; font-family: var(--mlx-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; }
.mlx-tree__tip a { color: var(--mlx-accent); font-weight: 500; text-decoration: none; }
.mlx-tree__tip span { color: var(--mlx-ink-soft); }
.mlx-tree__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 0.7rem; font-size: 0.72rem; color: var(--mlx-ink-soft); }
.mlx-tree__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.mlx-tree__legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.mlx-tree__legend i.is-major { width: 10px; height: 10px; border-radius: 50%; background: var(--mlx-ink-soft); }
.mlx-tree__legend i.is-minor { width: 8px; height: 8px; border-radius: 50%; border: 1.6px solid var(--mlx-ink-soft); margin-left: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .mlx-tree__edge, .mlx-tree__node { transition: none; } }
.mlx-wrap { min-width: 0; box-sizing: border-box; width: 100%; }
.mlx-tree, .mlx-tree__bench { min-width: 0; max-width: 100%; }


/* ---------- Chapter layout: hero figure, what-changed cards, step tabs ---------- */
.md-typeset .mlx-figure { position: relative; }
.md-typeset .mlx-figure--inline svg { display: block; width: 100%; height: auto; }
.md-typeset .mlx-figure--hero { margin: 1rem 0 1.8rem; cursor: zoom-in; }
.md-typeset .mlx-figure--hero img[src$=".svg"] { border: 0; background: transparent; }
.md-typeset .mlx-zoom {
  float: right; margin: 0 0 0.3rem 0.8rem; width: 1.8rem; height: 1.8rem;
  border: 1px solid var(--mlx-rule); border-radius: 50%; background: var(--mlx-panel); color: var(--mlx-ink-soft);
  font-size: 0.9rem; line-height: 1; cursor: zoom-in; opacity: 0.75;
}
.md-typeset .mlx-zoom:hover, .md-typeset .mlx-zoom:focus-visible { opacity: 1; color: var(--mlx-accent); }
.mlx-lightbox {
  position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; padding: 1.5rem; background: var(--mlx-paper); cursor: zoom-out;
}
.mlx-lightbox svg, .mlx-lightbox img { width: min(96vw, 150vh); max-height: 88vh; height: auto; }
.mlx-lightbox p { margin: 0; font-family: var(--mlx-mono); font-size: 0.7rem; color: var(--mlx-ink-soft); }

.md-typeset .mlx-why { display: grid; gap: 0.8rem; margin: 1rem 0 1.2rem; }
.md-typeset .mlx-why__card {
  --c: var(--mlx-accent);
  padding: 0.9rem 1.1rem; border: 1px solid var(--mlx-rule); border-left: 4px solid var(--c);
  border-radius: var(--mlx-radius); background: var(--mlx-panel);
}
.md-typeset .mlx-why__card--2 { --c: var(--mlx-good); }
.md-typeset .mlx-why__card--3 { --c: var(--mlx-warn); }
.md-typeset .mlx-why__card h3 { margin: 0.1rem 0 0.5rem; }
.md-typeset .mlx-why__card p { margin: 0.4rem 0; }
.md-typeset .mlx-why__n { font-family: var(--mlx-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); margin: 0 !important; }
.md-typeset .mlx-why__run { font-family: var(--mlx-mono); font-size: 0.7rem; color: var(--mlx-ink-soft); }

.md-typeset details.mlx-setup { margin: 0.8rem 0 1.4rem; border: 1px solid var(--mlx-rule); border-radius: var(--mlx-radius); background: var(--mlx-panel); padding: 0 0.8rem; box-shadow: none; font-size: inherit; }
.md-typeset details.mlx-setup > summary { padding: 0.6rem 0; cursor: pointer; font-family: var(--mlx-mono); font-size: 0.72rem; color: var(--mlx-accent); list-style: none; }
.md-typeset details.mlx-setup > summary::before, .md-typeset details.mlx-setup > summary::after { display: none; }
.md-typeset details.mlx-setup > summary::-webkit-details-marker { display: none; }
.md-typeset details.mlx-setup > summary:before { content: "+ "; display: inline; position: static; background: none; -webkit-mask: none; mask: none; width: auto; height: auto; }
.md-typeset details.mlx-setup[open] > summary:before { content: "\2212  "; }

.mlx-steps { margin: 1.2rem 0 2rem; scroll-margin-top: 4rem; }
.mlx-steps__bar {
  display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.1rem;
  border-bottom: 1px solid var(--mlx-rule); scrollbar-width: thin;
}
.mlx-steps__tab {
  flex: 1 1 0; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; text-align: left;
  padding: 0.55rem 0.75rem 0.6rem; border: 1px solid var(--mlx-rule); border-bottom: 0; border-radius: var(--mlx-radius) var(--mlx-radius) 0 0;
  background: transparent; color: var(--mlx-ink-soft); font: inherit; cursor: pointer; position: relative; top: 1px;
}
.mlx-steps__tab:hover { color: var(--mlx-ink); background: var(--mlx-accent-wash); }
.mlx-steps__tab[aria-selected="true"] { background: var(--mlx-panel); color: var(--mlx-ink); border-top: 3px solid var(--mlx-accent); border-bottom: 1px solid var(--mlx-panel); }
.mlx-steps__n { font-family: var(--mlx-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.mlx-steps__title { font-size: 0.8rem; font-weight: 600; line-height: 1.25; }
.mlx-steps__bar:has(> :nth-child(5)) .mlx-steps__title { font-size: 0.72rem; }
.mlx-steps__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.4rem; width: 100%; }
.mlx-steps__lvl { font-family: var(--mlx-mono); font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.05rem 0.35rem; border-radius: 0.6rem; border: 1px solid currentColor; }
.mlx-steps__lvl--major { color: var(--mlx-accent); }
.mlx-steps__lvl--minor { color: var(--mlx-ink-soft); }
.mlx-steps__panel { padding-top: 0.4rem; }
.mlx-steps__panel > .jp-Cell:first-child :is(h2, h3) { margin-top: 0.8rem; }
.mlx-steps__next {
  display: block; margin: 1.4rem 0 0 auto; padding: 0.55rem 0.9rem; border: 1px solid var(--mlx-accent); border-radius: var(--mlx-radius);
  background: var(--mlx-accent-wash); color: var(--mlx-accent); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.mlx-steps__next:hover { background: var(--mlx-accent); color: var(--mlx-accent-ink); }
@media (max-width: 600px) { .mlx-steps__tab { flex: 0 0 8.5rem; } }

/* "What changed" cards as tabs: the panel joins the tab bar. */
.md-typeset .mlx-why--tabs { display: block; }
.md-typeset .mlx-why--tabs > .mlx-why__card { border-top-left-radius: 0; }
.md-typeset .mlx-why--tabs > .mlx-why__bar { border-bottom: 0; }
.mlx-why__tab { --c: var(--mlx-accent); }
.mlx-why__tab--2 { --c: var(--mlx-good); }
.mlx-why__tab--3 { --c: var(--mlx-warn); }
.mlx-why__tab .mlx-steps__n { color: var(--c); }
.mlx-why__tab[aria-selected="true"] { border-top-color: var(--c); }
.md-typeset .mlx-why--tabs > .mlx-why__bar { padding-bottom: 0; margin-bottom: -1px; }
.md-typeset .mlx-why--tabs > .mlx-why__card { margin-top: 0; }
.md-typeset .mlx-why--tabs > .mlx-why__card > .mlx-why__n, .md-typeset .mlx-why--tabs > .mlx-why__card > h3 { display: none; }

/* ---------- Brand: code wordmark, ml.explained() ---------- */
.md-header .mlx-logo { display: inline-flex; align-items: baseline; color: var(--mlx-ink); text-decoration: none; line-height: 1;
  font-family: var(--mlx-mono); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; }
.mlx-logo__ml { color: var(--mlx-accent); font-weight: 600; }
.mlx-logo__call { color: var(--mlx-ink-soft); }
.mlx-logo__cursor { display: inline-block; width: 0.5em; height: 0.12em; margin-left: 0.08em; background: var(--mlx-accent); transform: translateY(0.05em); }
.md-typeset .mlx-kicker a.mlx-kicker__part, a.mlx-navpart { color: inherit; text-decoration: none; }
.md-typeset .mlx-kicker a.mlx-kicker__part:hover, a.mlx-navpart:hover,
.md-typeset .mlx-kicker a.mlx-kicker__part:focus-visible, a.mlx-navpart:focus-visible { color: var(--mlx-accent); text-decoration: underline; text-underline-offset: 0.2em; }

/* Code highlighting: a calm palette in the site's lab-blue family (cool-toned strings instead of the default red) */
body[data-md-color-scheme] .jupyter-wrapper {
  --jp-mirror-editor-keyword-color: #2647c9;
  --jp-mirror-editor-def-color: #1f3a8a;
  --jp-mirror-editor-builtin-color: #2c7a6a;
  --jp-mirror-editor-number-color: #7458b8;
  --jp-mirror-editor-atom-color: #7458b8;
  --jp-mirror-editor-string-color: #23788f;
  --jp-mirror-editor-operator-color: #6b6f86;
  --jp-mirror-editor-meta-color: #6c5bb0;
  --jp-mirror-editor-comment-color: #7c8494;
  --jp-mirror-editor-property-color: #3a4a7a;
  --jp-mirror-editor-punctuation-color: #5a6170;
  --jp-mirror-editor-variable-color: #1d2230;
  --jp-mirror-editor-qualifier-color: #5a6170;
}
body[data-md-color-scheme="slate"] .jupyter-wrapper {
  --jp-mirror-editor-keyword-color: #8fa6ff;
  --jp-mirror-editor-def-color: #b7c5ff;
  --jp-mirror-editor-builtin-color: #7cc2b1;
  --jp-mirror-editor-number-color: #a184f0;
  --jp-mirror-editor-atom-color: #a184f0;
  --jp-mirror-editor-string-color: #3fb0d0;
  --jp-mirror-editor-operator-color: #a3a9bb;
  --jp-mirror-editor-meta-color: #b9a7f0;
  --jp-mirror-editor-comment-color: #7f8797;
  --jp-mirror-editor-property-color: #aab8e6;
  --jp-mirror-editor-punctuation-color: #a3a9bb;
  --jp-mirror-editor-variable-color: #dfe3ec;
  --jp-mirror-editor-qualifier-color: #a3a9bb;
}

/* A small diagram inside a "What changed" card, beside the text */
.mlx-why .mlx-why__fig { float: right; width: min(40%, 17rem); height: auto; margin: 0 0 0.6rem 1.2rem; }
.mlx-why__card::after { content: ""; display: block; clear: both; }
@media (max-width: 40em) { .mlx-why .mlx-why__fig { float: none; display: block; width: min(100%, 17rem); margin: 0 auto 0.8rem; } }

/* Keep the opening figure close to the first section */
.mlx-figure--hero { margin-bottom: 1rem !important; }
.jupyter-wrapper .jp-Cell:has(.mlx-figure--hero) + .jp-Cell .jp-RenderedHTMLCommon > h2:first-child { margin-top: 0.6rem !important; }

/* Panel toggles in the header (chapters on the left, contents on the right) */
.mlx-panel-toggle { display: none; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0 0.15rem;
  border: 0; border-radius: 0.4rem; background: none; color: var(--mlx-ink-soft); cursor: pointer; }
.mlx-panel-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mlx-panel-toggle:hover { color: var(--mlx-accent); background: color-mix(in srgb, var(--mlx-accent) 10%, transparent); }
.mlx-panel-toggle[aria-pressed="false"] svg path { stroke-dasharray: 2 3; }
.mlx-panel-toggle[aria-pressed="false"] { opacity: 0.7; }
@media screen and (min-width: 76.25em) {
  .mlx-panel-toggle--nav { display: inline-flex; }
  .mlx-hide-nav .md-sidebar--primary { display: none; }
}
@media screen and (min-width: 60em) {
  .mlx-panel-toggle--toc { display: inline-flex; }
  .mlx-hide-toc .md-sidebar--secondary { display: none; }
}
@media screen and (max-width: 30em) { .md-header .mlx-logo { font-size: 1.15rem; } }

/* GitHub link in the header: just the mark, no repo stats */
.md-header .mlx-gh { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; margin: 0 0.3rem 0 0.6rem;
  border-radius: 0.4rem; color: var(--mlx-ink-soft); }
.md-header .mlx-gh svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.md-header .mlx-gh:hover { color: var(--mlx-accent); background: color-mix(in srgb, var(--mlx-accent) 10%, transparent); }
@media screen and (max-width: 59.984375em) { .md-header .mlx-gh { display: none; } }

/* "Diverged branches": each fork card shows its two branches side by side. */
.md-typeset .mlx-fork__sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0.6rem; margin: 0.8rem 0 0.9rem; }
.md-typeset .mlx-fork__side { padding: 0.7rem 0.9rem; border: 1px solid var(--mlx-rule); border-radius: var(--mlx-radius); background: var(--mlx-paper); }
.md-typeset .mlx-fork__side p { margin: 0.3rem 0; }
.md-typeset .mlx-fork__name { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.5rem; font-weight: 600; margin-top: 0 !important; }
.md-typeset .mlx-fork__state { font-family: var(--mlx-mono); font-size: 0.56rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.05rem 0.4rem; border-radius: 0.6rem; border: 1px solid currentColor; white-space: nowrap; }
.md-typeset .mlx-fork__state--main { color: var(--mlx-good); }
.md-typeset .mlx-fork__state--alive { color: var(--mlx-accent); }
.md-typeset .mlx-fork__state--rival { color: var(--mlx-warn); }
.md-typeset .mlx-fork__state--niche { color: var(--mlx-ink-soft); }
.md-typeset .mlx-fork__who { font-family: var(--mlx-mono); font-size: 0.68rem; color: var(--mlx-ink-soft); }
.md-typeset .mlx-fork__vs { align-self: center; font-family: var(--mlx-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c, var(--mlx-ink-soft)); }
@media (max-width: 40em) {
  .md-typeset .mlx-fork__sides { grid-template-columns: 1fr; }
  .md-typeset .mlx-fork__vs { justify-self: center; }
}