/* manim-theme.css: the 3Blue1Brown / manim look for interactive figures.
 *
 * Include it (with manim-theme.js) in a visual and add class "mt" to <html>:
 *   <html class="mt">
 *   <link rel="stylesheet" href="../../../site/lib/manim-theme.css">
 *   <script src="../../../site/lib/manim-theme.js"></script>
 * The site build rewrites those paths to /lib/... when it publishes the page.
 * See site/README.md, "Manim theme".
 */

@font-face { font-family: "CMU Serif"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/computer-modern@0.1.3/fonts/cmu-serif-500-roman.woff2") format("woff2"); }
@font-face { font-family: "CMU Serif"; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/computer-modern@0.1.3/fonts/cmu-serif-500-italic.woff2") format("woff2"); }
@font-face { font-family: "CMU Serif"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/computer-modern@0.1.3/fonts/cmu-serif-700-roman.woff2") format("woff2"); }
@font-face { font-family: "CMU Serif"; font-style: italic; font-weight: 600 800; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/computer-modern@0.1.3/fonts/cmu-serif-700-italic.woff2") format("woff2"); }

:root {
  /* manim palette */
  --mt-blue: #58C4DD;
  --mt-teal: #5CD0B3;
  --mt-green: #83C167;
  --mt-yellow: #F7D96F;
  --mt-yellow-pure: #FFFF00;
  --mt-gold: #F0AC5F;
  --mt-red: #FC6255;
  --mt-maroon: #C55F73;
  --mt-purple: #9A72AC;
  --mt-pink: #D147BD;
  --mt-grey: #888888;
  /* basis vectors, as in Essence of Linear Algebra */
  --mt-ihat: var(--mt-green);
  --mt-jhat: var(--mt-red);
  --mt-khat: var(--mt-blue);
  /* canvas */
  --mt-bg: #121212;          /* the plate behind everything */
  --mt-surface: #1C1C1C;     /* canvases and panels (manim's background) */
  --mt-surface-2: #242424;
  --mt-line: #2E3A40;        /* panel borders: blue-grey */
  --mt-grid: rgba(88, 196, 221, 0.16);
  --mt-grid-faint: rgba(88, 196, 221, 0.07);
  --mt-axis: rgba(236, 236, 236, 0.55);
  --mt-ink: #ECECEC;
  --mt-ink-2: #BDBDBD;
  --mt-muted: #8F959A;
  /* type and motion */
  --mt-serif: "CMU Serif", "Latin Modern Roman", "Computer Modern Serif", Georgia, serif;
  --mt-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --mt-ease: cubic-bezier(0.6, 0, 0.4, 1);   /* close to manim's smooth() */
  --mt-dur: 0.45s;
}

html.mt {
  color-scheme: dark;
  background-color: var(--mt-bg);
  /* NumberPlane-style faint grid behind the whole figure */
  background-image:
    linear-gradient(var(--mt-grid-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--mt-grid-faint) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
}
html.mt body {
  background: transparent !important;
  color: var(--mt-ink);
  font-family: var(--mt-serif);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
html.mt h1, html.mt h2, html.mt h3 { font-family: var(--mt-serif); font-weight: 600; letter-spacing: 0; }
html.mt button, html.mt select, html.mt input:not([type=range]):not([type=checkbox]) { font-family: var(--mt-serif); }
html.mt code, html.mt .mono, html.mt kbd { font-family: var(--mt-mono); }
html.mt input[type=range], html.mt input[type=checkbox] { accent-color: var(--mt-blue); }
html.mt a { color: var(--mt-blue); }
html.mt ::selection { background: rgba(88, 196, 221, 0.35); }

/* Controls */
html.mt button {
  border-radius: 4px;
  transition: background-color var(--mt-dur) var(--mt-ease), border-color var(--mt-dur) var(--mt-ease), color var(--mt-dur) var(--mt-ease);
}
html.mt button:hover:not(:disabled) { border-color: var(--mt-blue) !important; }
html.mt button.on, html.mt button.primary { background: var(--mt-blue) !important; border-color: var(--mt-blue) !important; color: #0B0B0B !important; }

/* Everything that changes colour changes smoothly */
/* Zero specificity: a figure's own transition rules always win. */
:where(html.mt *) {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--mt-dur);
  transition-timing-function: var(--mt-ease);
}
:where(html.mt svg *) {
  transition: fill var(--mt-dur) var(--mt-ease), stroke var(--mt-dur) var(--mt-ease), stroke-width var(--mt-dur) var(--mt-ease), opacity var(--mt-dur) var(--mt-ease);
}
:where(html.mt svg text:not([fill])) { fill: var(--mt-ink); }
:where(html.mt svg line, html.mt svg path, html.mt svg polyline) { stroke-linecap: round; stroke-linejoin: round; }


/* Building blocks for new figures */
.mt-plate { background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: 6px; position: relative; }
.mt-panel { background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: 6px; padding: 12px 16px; }
.mt-label { position: absolute; pointer-events: none; white-space: nowrap; font-family: var(--mt-serif); font-size: 20px; line-height: 1; transform: translate(0, -50%); text-shadow: 0 0 4px var(--mt-surface), 0 0 8px var(--mt-surface); }
.mt-label.center { transform: translate(-50%, -50%); }
.mt-label .katex { font-size: 1.05em; }
.katex { color: inherit; }
.mt-blue { color: var(--mt-blue); } .mt-teal { color: var(--mt-teal); } .mt-green { color: var(--mt-green); }
.mt-yellow { color: var(--mt-yellow); } .mt-gold { color: var(--mt-gold); } .mt-red { color: var(--mt-red); }
.mt-maroon { color: var(--mt-maroon); } .mt-purple { color: var(--mt-purple); } .mt-pink { color: var(--mt-pink); }
.mt-grey { color: var(--mt-grey); }

@media (prefers-reduced-motion: reduce) {
  html.mt *, html.mt svg * { transition: none !important; }
}