:root { --pt-bg: #FAF6EE; --pt-panel: #F4EEDF; --pt-ink: #2B2A26; --pt-text-secondary: #55503F; --pt-text-muted: #8A8370; --pt-hairline: #DED2B4; --pt-border-soft: #C9BE9E; --pt-accent: #3f6b52; } /* Material re-sets --md-* variables on [data-md-color-scheme] (applied to , not ), which otherwise wins over a plain :root override since body never actually inherits from a losing :root declaration — it just matches Material's own attribute-selector rule directly. */ :root, [data-md-color-scheme] { /* Map our palette onto Material's theme variables. */ --md-default-bg-color: var(--pt-bg); --md-default-fg-color: var(--pt-ink); --md-default-fg-color--light: var(--pt-text-secondary); --md-default-fg-color--lighter: var(--pt-text-muted); --md-default-fg-color--lightest: var(--pt-hairline); --md-primary-fg-color: rgba(250, 246, 238, 0.92); --md-primary-bg-color: var(--pt-ink); --md-primary-bg-color--light: var(--pt-text-secondary); --md-accent-fg-color: var(--pt-accent); --md-accent-fg-color--transparent: rgba(63, 107, 82, 0.1); --md-accent-bg-color: var(--pt-bg); --md-typeset-a-color: var(--pt-accent); --md-code-bg-color: var(--pt-panel); --md-code-fg-color: var(--pt-ink); --md-footer-bg-color: #3a3a3a; --md-footer-bg-color--dark: #3a3a3a; } .md-header { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--pt-hairline); box-shadow: none; color: var(--pt-ink); } .md-header__title, .md-header__topic { font-weight: 800; } .md-tabs { background-color: transparent; } /* Material redefines --md-typeset-a-color to --md-primary-fg-color somewhere deeper in its own cascade (our light-cream header color), which makes body links and the active-page nav label unreadable. Override color directly rather than chase the variable indirection. */ .md-typeset a, .md-typeset a:visited { color: var(--pt-accent); } .md-nav__link--active, .md-nav__item .md-nav__link--active, .md-nav__item--active > .md-nav__link { color: var(--pt-ink) !important; font-weight: 700; } /* ---- Pyodide runnable / reference code blocks (theme-independent) ---- */ .pyodide-runner { margin: 1em 0; } .pyodide-runner__toolbar { display: flex; justify-content: flex-end; margin-top: 0.25em; } .pyodide-runner__run-btn { background-color: #2e7d32; color: #fff; border: none; border-radius: 4px; padding: 0.35em 0.9em; font-size: 0.85em; cursor: pointer; } .pyodide-runner__run-btn:hover { background-color: #256428; } .pyodide-runner__run-btn:disabled { opacity: 0.6; cursor: wait; } .md-typeset .pyodide-runner__output { margin-top: 0.5em; padding: 0.75em 1em; background-color: #1e1e1e; color: #d4d4d4; border-radius: 4px; white-space: pre-wrap; font-family: SFMono-Regular, Consolas, monospace; font-size: 0.85em; } .pyodide-runner__output[hidden] { display: none !important; } .pyodide-runner__output--error { color: #ff8a80; } .pyodide-runner pre, .pyodide-reference pre { border-radius: 6px; margin: 0 !important; } .pyodide-runner pre { background-color: #23221E !important; border: 1px solid #35342E; } .pyodide-reference pre { background-color: #fff !important; border: 1px solid var(--pt-hairline); } .pyodide-runner pre code { background: transparent; color: #F2EDE0; } .pyodide-reference pre code { background: transparent; color: var(--pt-ink); border-radius: 0; } /* Material puts a box-shadow "border" on summary > code (.md-typeset summary code) at the code element's own 0.1rem radius, independent of our 6px border on the wrapping

 above — killing it here since the
   python-ref preview always lives inside a  . */
.md-typeset summary .pyodide-reference pre code {
  box-shadow: none;
}

.pyodide-reference {
  margin: 1em 0;
}

.pyodide-reference .md-code__nav {
  display: none;
}

.pyodide-editor {
  display: block;
  outline: none;
  cursor: text;
}

.pyodide-editor:focus {
  box-shadow: inset 0 0 0 2px rgba(63, 107, 82, 0.45);
}

.pyodide-editor .hljs-string,
.pyodide-editor .hljs-subst {
  color: #C9E4D2;
}

.pyodide-editor .hljs-built_in,
.pyodide-editor .hljs-keyword,
.pyodide-editor .hljs-title,
.pyodide-editor .hljs-number {
  color: #E8C9A8;
}

.pyodide-editor .hljs-comment {
  color: #8A8370;
}

.pyodide-reference .hljs-string,
.pyodide-reference .hljs-subst {
  color: var(--pt-accent);
}

.pyodide-reference .hljs-built_in,
.pyodide-reference .hljs-keyword,
.pyodide-reference .hljs-title,
.pyodide-reference .hljs-number {
  color: #8a5a2e;
}

.pyodide-reference .hljs-comment {
  color: var(--pt-text-muted);
}

/* ---- Collapsible concept sections ----
   Material treats every  as a colored admonition (blue border,
   tinted summary background, a note icon, and its own rotating chevron).
   Reset all of that specifically for .pt-collapsible and reapply our own
   flat, single-arrow design. */

.md-typeset details.pt-collapsible,
.md-typeset details.pt-collapsible:not([open]) {
  --pt-collapsible-indent: 22px;
  background-color: var(--pt-bg);
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin: 0.5em 0;
  padding: 8px 0 8px 0;
}

.md-typeset .pt-collapsible > summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  background: none;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0 0 0 var(--pt-collapsible-indent);
}

.md-typeset .pt-collapsible > summary::-webkit-details-marker {
  display: none;
}

.md-typeset .pt-collapsible > summary::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0.15em;
  background: none;
  mask-image: none;
  height: auto;
  width: auto;
  color: var(--pt-accent);
  transition: transform 0.15s ease;
}

.md-typeset .pt-collapsible[open] > summary::before {
  transform: rotate(90deg);
}

.md-typeset .pt-collapsible > summary::after {
  display: none;
}

.md-typeset .pt-collapsible > summary h3 {
  display: block;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.md-typeset .pt-collapsible > summary:hover h3 {
  color: var(--pt-accent);
}

.md-typeset .pt-collapsible > summary .pyodide-reference {
  margin: 12px 0 0;
}

.md-typeset details.pt-collapsible[open] > summary {
  margin-bottom: 10px;
}

.md-typeset .pt-collapsible > :not(summary) {
  padding-left: var(--pt-collapsible-indent);
  margin-left: 0;
}