/* The logo is white (it was drawn for the grey header of the classic theme). The modern
   header is white in the light scheme, so the logo is inverted there. */
[data-md-color-scheme="default"] .md-header .md-logo img {
    filter: invert(1);
}

.youtube {
    color: #EE0F0F;
}

.rounded-corners {
    border-radius: 2%;
}

.md-typeset__table {
    width: 100%;
}

.md-typeset__table table:not([class]) {
    display: table
}

/* Tables wrapped in .table-fit shrink to their content instead of the page width */
.md-typeset .table-fit .md-typeset__scrollwrap,
.md-typeset .table-fit .md-typeset__table {
    width: auto;
}

.md-typeset .table-fit table:not([class]) {
    width: auto;
    min-width: 0;
}

/* Material gives every header cell min-width: 5rem, which is what stretches the table */
.md-typeset .table-fit table:not([class]) th,
.md-typeset .table-fit table:not([class]) td {
    min-width: 0;
    padding: .5em .75em;
}

/* Calendar table and its legend side by side */
.md-typeset .calendar-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .8rem 1.6rem;
    /* same size Material uses for table text */
    font-size: .6rem;
}

.md-typeset .calendar-legend {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1em;
}

/* Grades: the individual and team boxes side by side, equal width */
.md-typeset .grade-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .8rem 1.6rem;
}

/* framed group — used by the legend and by each grade box */
.md-typeset .grade-box,
.md-typeset .calendar-legend-box {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .5rem .6rem;
    border: .05rem solid var(--md-typeset-table-color);
    border-radius: .2rem;
}

/* both grade boxes share the row at equal width */
.md-typeset .grade-box {
    flex: 1 1 0;
    min-width: 0;
}

.md-typeset .grade-box-title,
.md-typeset .calendar-legend-title {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .65;
    /* same size Material uses for table text */
    font-size: .5rem;
}

.md-typeset .grade-box-title {
    font-size: .7rem;
}

/* the formula that closes each side — smaller than body math, and it scrolls
   rather than pushing the frame wider on a narrow screen */
.md-typeset .grade-box div.arithmatex {
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: .8em;
}

/* the exams/exercises split inside a grade box — a step below the box title */
.md-typeset .grade-sub-title {
    margin: .2rem 0 0;
    font-weight: 700;
    letter-spacing: .03em;
    opacity: .75;
    font-size: .62rem;
}

/* the theme's table wrapper would bleed outside the frame */
.md-typeset .grade-box .md-typeset__scrollwrap,
.md-typeset .grade-box .md-typeset__table {
    width: 100%;
    margin: 0;
    padding: 0;
}

.md-typeset .grade-box table:not([class]) {
    width: 100%;
    min-width: 0;
    border: none;
}

.md-typeset .grade-box table:not([class]) th,
.md-typeset .grade-box table:not([class]) td {
    min-width: 0;
    padding: .35em .6em;
}

.md-typeset .calendar-legend p {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    margin: 0;
}

.fexam, .pexam,
.edata, .eperceptron, .emlp, .evae,
.peda, .pclassification, .pregression, .pgenerative {
    padding: 4px;
    border-radius: 4px;
    color: white;
}

.fexam { background-color: crimson; }
.pexam { background-color: coral; }

/* Exercises: a blue ramp, indigo through sky — same 160deg angle as the
   syllabus cards. Every stop stays above 5:1 against the white label. */
.edata { background: linear-gradient(160deg, #312e81, #4338ca); }
.eperceptron { background: linear-gradient(160deg, #1e3a8a, #1e40af); }
.emlp { background: linear-gradient(160deg, #1d4ed8, #2563eb); }
.evae { background: linear-gradient(160deg, #075985, #0369a1); }

/* Projects: the matching green ramp — forest, emerald, teal, olive */
.peda { background: linear-gradient(160deg, #1e9c4f, #16a34a); }
.pclassification { background: linear-gradient(160deg, #065f46, #047857); }
.pregression { background: linear-gradient(160deg, #115e59, #0f766e); }
.pgenerative { background: linear-gradient(160deg, #3f6212, #4d7c0f); }


/* ===================================================================== *
 * MLP diagrams (assets/javascripts/mlp-diagram.js)
 *
 * SVG presentation attributes cannot read custom properties, so every
 * colour lives here as a class and the script only toggles classes. Base
 * tones come from Material's own tokens, which is what makes the diagram
 * follow the light/dark toggle with no JavaScript at all.
 * ===================================================================== */

:root {
  /* Only literal values belong here: Material sets the colour scheme on <body>,
     so a custom property declared on :root that aliases one of its tokens would
     freeze the light value and inherit it into dark mode. Token references are
     written directly in the rules that use them instead. */
  --mlp-line: rgba(0, 0, 0, .30);
  --mlp-band: rgba(0, 0, 0, .035);
  --mlp-fwd: #1b7f4b;      /* forward pass  */
  --mlp-back: #c2410c;     /* backward pass */
  --mlp-weight: #6d28d9;   /* weights and biases */
  --mlp-muted: #6b7280;
}

[data-md-color-scheme="slate"] {
  --mlp-line: rgba(255, 255, 255, .32);
  --mlp-band: rgba(255, 255, 255, .05);
  --mlp-fwd: #4ade80;
  --mlp-back: #fb923c;
  --mlp-weight: #c4b5fd;
  --mlp-muted: #9ca3af;
}

.md-typeset .mlp-box {
  border: .05rem solid var(--md-typeset-table-color);
  border-radius: .4rem;
  padding: .8rem;
  margin: 1.6rem 0;
  background: var(--md-default-bg-color);
}

/* Below ~520px the drawing would shrink its labels into illegibility, so the
   figure scrolls inside its own box rather than the page scrolling sideways. */
.md-typeset .mlp-stage { overflow-x: auto; }

.md-typeset .mlp-svg {
  display: block;
  width: 100%;
  min-width: 480px;
  height: auto;
}

.md-typeset .mlp-zoom { margin-top: .3rem; }

/* ----------------------------------------------- activation function plots */

/* These live inside the cells of the activation table, so they carry no box
   or margin of their own — the cell already frames them. */
.md-typeset .mlp-plot { display: block; }

.md-typeset .mlp-plot .mlp-svg {
  min-width: 0;
  max-width: 20rem;
  margin: .2rem auto;
}

.md-typeset .mlp-plot-grid {
  stroke: var(--mlp-line);
  stroke-width: 1;
  opacity: .3;
}

.md-typeset .mlp-plot-axis {
  stroke: var(--mlp-line);
  stroke-width: 1.4;
}

.md-typeset .mlp-plot-fn {
  stroke: var(--mlp-fwd);
  stroke-width: 2.4;
  fill: none;
  stroke-linejoin: round;
}

.md-typeset .mlp-plot-deriv {
  stroke: var(--mlp-weight);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  fill: none;
  stroke-linejoin: round;
}

.md-typeset .mlp-plot-mark {
  stroke: var(--mlp-muted);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.md-typeset .mlp-plot-mark-label {
  fill: var(--mlp-muted);
  font-size: 11px;
}

.md-typeset .mlp-plot-tick {
  fill: var(--md-default-fg-color--light);
  font-size: 11px;
}

.md-typeset .mlp-plot-legend {
  fill: var(--md-default-fg-color);
  font-size: 13px;
  font-weight: 600;
}

/* -------------------------------------------------------------- toolbar */

.md-typeset .mlp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  margin-bottom: .6rem;
}

.md-typeset .mlp-btn {
  font-family: inherit;
  font-size: .62rem;
  font-weight: 700;
  padding: .25rem .7rem;
  border-radius: .2rem;
  border: .05rem solid var(--md-typeset-table-color);
  background: transparent;
  color: var(--md-default-fg-color);
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}

.md-typeset .mlp-btn:hover:not(:disabled) { background: var(--md-code-bg-color); }
.md-typeset .mlp-btn:disabled { opacity: .35; cursor: default; }

.md-typeset .mlp-btn--primary {
  border-color: var(--mlp-fwd);
  color: var(--mlp-fwd);
}

.md-typeset .mlp-btn--ghost { color: var(--mlp-muted); }

.md-typeset .mlp-btn[aria-pressed="true"] {
  border-color: var(--mlp-weight);
  color: var(--mlp-weight);
}

.md-typeset .mlp-step-label {
  font-size: .62rem;
  font-weight: 700;
  color: var(--md-default-fg-color--light);
}

.md-typeset .mlp-dots-row { display: flex; gap: .25rem; align-items: center; }

.md-typeset .mlp-dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border-radius: 50%;
  border: .05rem solid var(--mlp-line);
  background: transparent;
  cursor: pointer;
}

.md-typeset .mlp-dot--done { background: var(--mlp-line); }
.md-typeset .mlp-dot--on { background: var(--mlp-fwd); border-color: var(--mlp-fwd); }

.md-typeset .mlp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .7rem;
  margin-left: auto;
  font-size: .58rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .mlp-legend-item { display: inline-flex; align-items: center; gap: .25rem; }

.md-typeset .mlp-swatch {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  border: .1rem solid var(--mlp-line);
}

.md-typeset .mlp-swatch--node { border-color: var(--mlp-fwd); }
.md-typeset .mlp-swatch--bias { border-style: dashed; border-color: var(--mlp-muted); }
.md-typeset .mlp-swatch--weight { border-color: var(--mlp-weight); }

/* -------------------------------------------------------------- caption */

.md-typeset .mlp-caption {
  margin-top: .5rem;
  padding: .5rem .6rem;
  border-radius: .2rem;
  background: var(--md-code-bg-color);
  font-size: .66rem;
  line-height: 1.75;
  min-height: 3.2rem;
}

.md-typeset .mlp-cap-eq {
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.md-typeset .mlp-cap-num {
  font-family: var(--md-code-font-family, monospace);
  font-size: .92em;
  color: var(--mlp-weight);
}

.md-typeset .mlp-cap-note,
.md-typeset .mlp-cap-hint { color: var(--md-default-fg-color--light); font-style: italic; }

.md-typeset .mlp-figcaption {
  margin-top: .4rem;
  text-align: center;
  font-size: .62rem;
  font-style: italic;
  color: var(--md-default-fg-color--light);
}

/* ---------------------------------------------------------- svg: layers */

.md-typeset .mlp-band { fill: var(--mlp-band); stroke: none; }

.md-typeset .mlp-layer-title {
  fill: var(--md-default-fg-color--light);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.md-typeset .mlp-layer-shape {
  fill: var(--md-default-fg-color--light);
  font-size: 13px;
}

.md-typeset .mlp-dots {
  fill: var(--md-default-fg-color--light);
  font-size: 22px;
}

.md-typeset .mlp-target {
  fill: var(--mlp-muted);
  font-size: 13px;
  font-style: italic;
}

/* ----------------------------------------------------------- svg: edges */

.md-typeset .mlp-edge {
  stroke: var(--mlp-line);
  stroke-width: 1.1;
  fill: none;
  transition: stroke .15s, stroke-width .15s, opacity .15s;
}

.md-typeset .mlp-edge--bias { stroke-dasharray: 4 3; }

.md-typeset .mlp-edge--active {
  stroke: var(--mlp-fwd);
  stroke-width: 2.4;
}

.md-typeset .mlp-edge--back {
  stroke: var(--mlp-back);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
  opacity: .45;
}

.md-typeset .mlp-edge--back-active {
  stroke-width: 2.6;
  opacity: 1;
}

.md-typeset .mlp-marker-fwd { fill: var(--mlp-line); }
.md-typeset .mlp-marker-plain { fill: var(--mlp-line); }
.md-typeset .mlp-marker-back { fill: var(--mlp-back); }

.md-typeset .mlp-edge-label {
  fill: var(--mlp-weight);
  font-size: 12px;
  opacity: 0;
  transition: opacity .15s, fill .15s;
  /* halo in the panel colour, so a label stays readable where it sits on a line */
  paint-order: stroke;
  stroke: var(--md-default-bg-color);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Anatomy: the weight labels are opt-in — that clutter is what made the old
   Mermaid version unreadable. The worked examples always show theirs. */
.md-typeset .mlp-show-weights .mlp-edge-label,
.md-typeset .mlp-edge-label--on { opacity: .9; }

.md-typeset .mlp-edge-label--hot {
  opacity: 1;
  fill: var(--mlp-fwd);
  font-weight: 700;
}

.md-typeset .mlp-edge-label--back { fill: var(--mlp-back); }
.md-typeset .mlp-edge-label--back.mlp-edge-label--hot { fill: var(--mlp-back); }

/* ----------------------------------------------------------- svg: nodes */

.md-typeset .mlp-node-circle {
  fill: var(--md-default-bg-color);
  stroke: var(--mlp-line);
  stroke-width: 1.6;
  transition: stroke .15s, stroke-width .15s, fill .15s;
}

.md-typeset .mlp-node-label {
  fill: var(--md-default-fg-color);
  font-size: 16px;
  font-weight: 600;
}

.md-typeset .mlp-node-value {
  fill: var(--mlp-weight);
  font-family: var(--md-code-font-family, monospace);
  font-size: 11px;
}

.md-typeset .mlp-node--bias .mlp-node-circle {
  stroke: var(--mlp-muted);
  stroke-dasharray: 4 3;
}

.md-typeset .mlp-node--bias .mlp-node-label { fill: var(--mlp-muted); }

.md-typeset .mlp-node--clickable { cursor: pointer; }
.md-typeset .mlp-node:focus { outline: none; }
.md-typeset .mlp-node:focus-visible .mlp-node-circle {
  stroke: var(--md-accent-fg-color);
  stroke-width: 3;
}

.md-typeset .mlp-node--active .mlp-node-circle {
  stroke: var(--mlp-fwd);
  stroke-width: 3;
}

.md-typeset .mlp-node--source .mlp-node-circle {
  stroke: var(--mlp-weight);
  stroke-width: 2.4;
}

.md-typeset .mlp-node--done .mlp-node-circle { stroke: var(--mlp-back); stroke-width: 2.4; }

.md-typeset .mlp-node--loss .mlp-node-circle { stroke: var(--mlp-back); stroke-width: 2; }
.md-typeset .mlp-node--loss .mlp-node-label { fill: var(--mlp-back); }

/* Hovering one neuron pushes everything it does not feed into the background */
.md-typeset .mlp-focus-mode .mlp-edge { opacity: .1; }
.md-typeset .mlp-focus-mode .mlp-node { opacity: .3; }
.md-typeset .mlp-focus-mode .mlp-edge--active,
.md-typeset .mlp-focus-mode .mlp-edge--zoom,
.md-typeset .mlp-focus-mode .mlp-edge--io { opacity: 1; }
.md-typeset .mlp-focus-mode .mlp-node--active,
.md-typeset .mlp-focus-mode .mlp-node--source { opacity: 1; }

/* ------------------------------------------------- svg: the neuron zoom-in */

.md-typeset .mlp-zoom-band {
  fill: var(--mlp-band);
  stroke: var(--mlp-line);
  stroke-dasharray: 6 4;
  stroke-width: 1;
}

.md-typeset .mlp-zoom-title {
  fill: var(--md-default-fg-color--light);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.md-typeset .mlp-zoom-in-label,
.md-typeset .mlp-zoom-out {
  fill: var(--md-default-fg-color);
  font-size: 17px;
  font-weight: 600;
}

.md-typeset .mlp-zoom-mid {
  fill: var(--mlp-fwd);
  font-size: 15px;
  font-weight: 700;
}

.md-typeset .mlp-op {
  fill: var(--md-default-bg-color);
  stroke: var(--mlp-fwd);
  stroke-width: 2;
}

.md-typeset .mlp-op--act { stroke: var(--mlp-weight); }

.md-typeset .mlp-op-symbol {
  fill: var(--md-default-fg-color);
  font-size: 26px;
  font-weight: 700;
}

.md-typeset .mlp-op-caption {
  fill: var(--md-default-fg-color--light);
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Math size inside asides

   Material renders admonitions, collapsibles and tab bodies at .8em, and
   MathJax inherits it — so a display equation there came out at 15.3px against
   19.1px in body text, a fifth smaller for no reason. Equations should read the
   same size wherever they sit, so the 1/.8 is given back to block formulas.

   Inline math is left alone: it already tracks the text around it, and blowing
   it up would wreck the line height of the paragraph it sits in.
   --------------------------------------------------------------------------- */
.md-typeset .admonition div.arithmatex,
.md-typeset details div.arithmatex {
  /* 1.25 × .8em = 1em, and MathJax's own inline 119.6% then lands on the same
     size it produces in body text. Scaling the wrapper rather than the
     mjx-container is deliberate: MathJax writes font-size inline on the
     container, so a rule there would need !important to win. */
  font-size: 1.25em;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ---------------------------------------------------------------------------
   Simulator panels

   Every interactive panel is a self-contained console: `.sim-panel` sets its
   own background and text colour inline, written in GitHub's dark palette, and
   assets/javascripts/sim-theme.js maps that palette (inline styles and canvas
   drawing alike) to the light one when the page is light. The panel therefore
   follows the light/dark toggle like the rest of the page.

   The problem is the HTML the panels emit around the canvas. Material styles
   `table:not([class])` with the *page* background, a border and 0.9em cell
   padding, so a readout table dropped into a dark panel came out as a white
   card with the panel's grey text on it — unreadable, and the reason this block
   exists. `code` had the milder version of the same fault: a light pill on a
   dark ground in the default scheme.

   So everything inside a panel is pulled back to the panel's own palette. The
   `:not([class])` is kept from Material's own selector, which makes these rules
   one class more specific and therefore independent of file order.
   --------------------------------------------------------------------------- */
.md-typeset .sim-panel table:not([class]) {
  background-color: transparent;
  border: none;
  border-radius: 0;
  display: table;
  margin: 0 0 .6rem;
  color: inherit;
  font-size: inherit;
}

.md-typeset .sim-panel table:not([class]) th,
.md-typeset .sim-panel table:not([class]) td {
  border: none;
  min-width: 0;
  padding: .15em .7em;
  vertical-align: middle;
}

/* Material tints the row under the cursor. On a transparent table that reads as
   a flicker, and these tables are readouts rather than something to point at. */
.md-typeset .sim-panel table:not([class]) tbody tr:hover {
  background-color: transparent;
  box-shadow: none;
}

.md-typeset .sim-panel code {
  background-color: rgba(201, 209, 217, .1);
  color: inherit;
}

.md-typeset .sim-panel a {
  color: #79c0ff;
}
[data-md-color-scheme="default"] .md-typeset .sim-panel a { color: #0969da; }

/* On a white page a white panel has no edge of its own. */
[data-md-color-scheme="default"] .md-typeset .sim-panel { box-shadow: 0 0 0 1px #d0d7de; }

/* The controls are native inputs, so the OS decides the dropdown palette unless
   both ends are stated. Without this a `select` opens as light-on-light. */
.md-typeset .sim-panel select,
.md-typeset .sim-panel option {
  color-scheme: dark;
}
[data-md-color-scheme="default"] .md-typeset .sim-panel select,
[data-md-color-scheme="default"] .md-typeset .sim-panel option {
  color-scheme: light;
}

/* ===================================================================== *
 * Static SVG diagrams, inlined from a topic's sims/ folder
 *
 * Same approach as the MLP diagrams above: colours live in classes and read
 * the --mlp-* tokens and Material's own, so the drawing follows the
 * light/dark toggle. The frame reuses .mlp-box, .mlp-stage and .mlp-svg.
 * ===================================================================== */

.md-typeset .dg-svg text {
  fill: var(--md-default-fg-color);
  font-family: var(--md-text-font-family, sans-serif);
  font-size: 13px;
}
.md-typeset .dg-svg .dg-muted { fill: var(--md-default-fg-color--light); font-size: 11.5px; }
.md-typeset .dg-svg .dg-title { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; }
.md-typeset .dg-svg .dg-op { font-size: 17px; font-weight: 600; }
.md-typeset .dg-svg .dg-eq { font-size: 14px; font-weight: 600; }
.md-typeset .dg-svg .dg-t-fwd  { fill: var(--mlp-fwd); }
.md-typeset .dg-svg .dg-t-back { fill: var(--mlp-back); }
.md-typeset .dg-svg .dg-t-norm { fill: var(--mlp-weight); font-weight: 600; }

.md-typeset .dg-svg .dg-box { fill: var(--md-default-bg-color); stroke: var(--mlp-line); stroke-width: 1.2; }
.md-typeset .dg-svg .dg-normbox { stroke: var(--mlp-weight); stroke-width: 1.8; }
.md-typeset .dg-svg .dg-line { stroke: var(--mlp-muted); stroke-width: 1.6; fill: none; }
.md-typeset .dg-svg .dg-fwd  { stroke: var(--mlp-fwd);  stroke-width: 2.2; fill: none; }
.md-typeset .dg-svg .dg-back { stroke: var(--mlp-back); stroke-width: 2.2; fill: none; }
.md-typeset .dg-svg .dg-sep  { stroke: var(--mlp-line); stroke-width: 1; stroke-dasharray: 4 4; }
.md-typeset .dg-svg .dg-dot  { fill: var(--mlp-back); }
.md-typeset .dg-svg .dg-head-fwd   { fill: var(--mlp-fwd); }
.md-typeset .dg-svg .dg-head-back  { fill: var(--mlp-back); }
.md-typeset .dg-svg .dg-head-muted { fill: var(--mlp-muted); }

.md-typeset .dg-svg .dg-cell    { fill: var(--mlp-band); stroke: var(--mlp-line); stroke-width: .8; }
.md-typeset .dg-svg .dg-cell-on { fill: var(--mlp-weight); fill-opacity: .45; }
.md-typeset .dg-svg .dg-hl      { fill: none; stroke: var(--mlp-weight); stroke-width: 2; }
.md-typeset .dg-svg .dg-sub { font-size: 10px; }

/* dg-lg: the same diagrams with type closer to the body text. A wide drawing
   (800–900 user units) is scaled down to the text column, so its 13px labels
   came out near 11px against 19px prose; these sizes land at about 13–14px. */
.md-typeset .dg-svg.dg-lg text { font-size: 15.5px; }
.md-typeset .dg-svg.dg-lg .dg-muted { font-size: 13.5px; }
.md-typeset .dg-svg.dg-lg .dg-title { font-size: 13px; }
.md-typeset .dg-svg.dg-lg .dg-op { font-size: 19px; }
.md-typeset .dg-svg.dg-lg .dg-eq { font-size: 16px; }
.md-typeset .dg-svg.dg-lg .dg-sub { font-size: 11.5px; }
.md-typeset .dg-svg.dg-lg .dg-small { font-size: 12px; }
.md-typeset .dg-svg a text { text-decoration: underline; text-decoration-thickness: 1px; }
.md-typeset .dg-svg a:hover text { fill: var(--md-accent-fg-color); }

/* Slides (Marp, HTML estático ao lado da aula) embutidos na página: um quadro
   16:9 que acompanha a largura do conteúdo */
.md-typeset .slides-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1em 0 .4em;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 6px;
    overflow: hidden;
    background: var(--md-default-bg-color);
}

.md-typeset .slides-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------------------------------------------------------------------------
   "simulator" admonition

   An external interactive tool (the Polo Club explainers, GAN Lab) is linked,
   not embedded: it is a full application that wants its own tab, and an iframe
   would make every reader who scrolls past download it. The box marks it as
   something to open and play with, apart from the prose and from our own
   panels.  Usage:  !!! simulator "Simulator: <name>"
   --------------------------------------------------------------------------- */
:root {
  --md-admonition-icon--simulator: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-2 14.5 6-4.5-6-4.5z"/></svg>');
  --sim-accent: #8250df;
}
[data-md-color-scheme="slate"] { --sim-accent: #a371f7; }

.md-typeset .admonition.simulator,
.md-typeset details.simulator { border-color: var(--sim-accent); }

.md-typeset .simulator > .admonition-title,
.md-typeset .simulator > summary { background-color: color-mix(in srgb, var(--sim-accent) 12%, transparent); }

.md-typeset .simulator > .admonition-title::before,
.md-typeset .simulator > summary::before {
  background-color: var(--sim-accent);
  -webkit-mask-image: var(--md-admonition-icon--simulator);
          mask-image: var(--md-admonition-icon--simulator);
}

.md-typeset .simulator .md-button--primary {
  background-color: var(--sim-accent);
  border-color: var(--sim-accent);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Matplotlib figures on the dark theme

   The figures (*.out.svg, inlined) are drawn for a white page on a transparent
   ground: on the dark theme their black text and axes vanish. They are
   inverted there, with the hue rotated back so a blue line stays blue; 0.88
   keeps black from turning into pure white. A figure that carries a raster
   image (a heatmap, a photo) would come out as its negative, so it keeps its
   colours on a light card instead. Matplotlib's SVG is recognised by the
   <metadata> it writes as the first child; our own diagrams have none.
   --------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] .md-typeset svg:has(> metadata):not(:has(image)) {
  filter: invert(.88) hue-rotate(180deg);
}
[data-md-color-scheme="slate"] .md-typeset svg:has(> metadata):has(image) {
  background: #f6f8fa;
  border-radius: 6px;
}

/* Zensical keeps a heading's inline markup in the table of contents (bold, italics, math);
   MkDocs dropped it. Keep the entries plain, as before, but keep the math rendered. */
.md-nav .md-ellipsis .md-typeset :is(strong, b, em, i) {
  font-weight: inherit;
  font-style: inherit;
}

/* ---------------------------------------------------------------------------
   Timeline (the history page of chapter "Neural Networks")

   It replaces the mkdocs `timeline` plugin, which Zensical does not run. Each
   milestone is a Markdown card (`.tl-item`, with md_in_html) on a vertical
   line; `.tl-k1`…`.tl-k4` pick the thread colour, the same as the lanes of the
   diagram above the cards (sims/diagram-timeline.*.html). A card reached by
   its anchor is outlined. On the 2026.2 page the diagram hides the list
   (`.tl-ready`) and shows a copy of the selected card in its own panel; with
   no JavaScript the list stays.
   --------------------------------------------------------------------------- */
:root { --tl-k4: #0969da; }
[data-md-color-scheme="slate"] { --tl-k4: #79c0ff; }

.md-typeset .tl {
  position: relative;
  margin: 1.6rem 0;
  padding-left: 1.5rem;
}
.md-typeset .tl.tl-ready { display: none; }
.md-typeset .tl::before {
  content: "";
  position: absolute;
  left: .4rem;
  top: .4rem;
  bottom: .4rem;
  width: 2px;
  background: var(--mlp-line);
}
.md-typeset .tl-item {
  --tl-c: var(--mlp-muted);
  position: relative;
  margin: 0 0 .8rem;
  padding: .45rem .8rem .35rem;
  border: .05rem solid var(--md-typeset-table-color);
  border-left: .2rem solid var(--tl-c);
  border-radius: .3rem;
  background: var(--md-default-bg-color);
  scroll-margin-top: 4.5rem;
}
.md-typeset .tl-item::before {
  content: "";
  position: absolute;
  left: calc(-1.1rem - 5px);
  top: .75rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--tl-c);
  box-shadow: 0 0 0 .15rem var(--md-default-bg-color);
}
.md-typeset .tl-item:target { box-shadow: 0 0 0 .1rem var(--tl-c); }
.md-typeset .tl-k1 { --tl-c: var(--mlp-weight); }
.md-typeset .tl-k2 { --tl-c: var(--mlp-fwd); }
.md-typeset .tl-k3 { --tl-c: var(--mlp-back); }
.md-typeset .tl-k4 { --tl-c: var(--tl-k4); }
.md-typeset .tl-item > p { margin: .45em 0; }
.md-typeset .tl-head { font-size: .82rem; }
.md-typeset .tl-year {
  margin-right: .25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tl-c);
}
.md-typeset .tl-lead { font-weight: 600; }
.md-typeset .tl-cite { font-size: .68rem; color: var(--md-default-fg-color--light); }
.md-typeset .tl-links { font-size: .72rem; }
.md-typeset .tl-links a { margin-right: .45rem; white-space: nowrap; }
.md-typeset .tl-era {
  position: relative;
  margin: 1.4rem 0 .7rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}
.md-typeset .tl-era b { margin-right: .4rem; color: var(--md-default-fg-color); }
.md-typeset .tl-era::before {
  content: "";
  position: absolute;
  left: calc(-1.1rem - 6px);
  top: .2rem;
  width: .6rem;
  height: .6rem;
  border-radius: .1rem;
  background: var(--md-default-fg-color--light);
  box-shadow: 0 0 0 .15rem var(--md-default-bg-color);
}