/* MyST Theme Options */
:root {
--cite-group-open: '[';
--cite-group-close: ']';
}
/* User Provided Stylesheet */
/* =========================================================================
apple.css -- MATH 4210 site skin ("clean Apple look")
=========================================================================
Loaded natively by myst book-theme v1.10.1 via the "style" file option:
site.options.style: styles/apple.css (in myst.yml)
MECHANISM (verified empirically against this project, see
_planning/08-site-design.md for the full writeup): the book-theme
template declares `- type: file, id: style` in its template.yml. At
build time the theme's server reads the referenced file's contents and
inlines them verbatim into a synthesized `/myst-theme.css` route, which
every page's links as the LAST stylesheet:
Loading last matters: this book's markup is styled almost entirely with
Tailwind utility classes (compiled into build/_assets/app-*.css, loaded
earlier in ). For selectors of equal specificity, the CSS cascade
breaks ties by source order, so rules below beat same-specificity
Tailwind utilities "for free". Where Tailwind's `dark:` variants compile
to a compound selector (e.g. `.dark .dark\:bg-stone-900`, specificity
(0,2,0)), rules here are deliberately written as `html.dark `
(adds the `html` element to the compound), which is *always* more
specific, regardless of source order. A handful of properties (body/
header/footer background, and the code-block syntax theme, which ships
with a `!important` background) are marked `!important` explicitly
because the existing rule they replace is itself `!important` or because
the override needs to be bulletproof regardless of future template
rebuilds.
Root theme hook: the book-theme's boot script adds a `light` or `dark`
class directly to (documentElement) before first paint, reading
`localStorage["myst:theme"]` or `prefers-color-scheme`, e.g.:
Tailwind's own dark-mode rules key off the same `.dark` ancestor class
(`darkMode: 'class'`), so this stylesheet targets `html.dark` for dark
overrides and plain/`html.light` for light, with a `prefers-color-scheme`
fallback for the rare case neither class is present (no-JS).
Every selector below was confirmed against a real `myst build --html`
output (ch01-ch16, appendix pages) before being written -- see the
planning doc for the DOM excerpts that back each block.
========================================================================= */
/* -------------------------------------------------------------------------
1. Design tokens
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
PALETTE CONTRACT (2026-07-19 color-system pass) -- read before editing
-------------------------------------------------------------------------
Four colors carry the whole site: WHITE, BLACK(ink), ACCENT 1, ACCENT 2.
Accent 1 -- INTERACTIVE. Links, active nav item, focus rings, buttons,
the language pill, the `note` and `definition` cards. Light #0b5fcc
(5.96:1 on white), dark #4c9dff (7.10:1 on #0b0b0c).
Accent 2 -- EMPHASIS. Theorem cards (strongest), key-idea cards, tips.
A deep amber: light #8a5300 (6.33:1 on white), dark #e8b04b
(10.06:1 on #0b0b0c). Amber vs blue is the classic dichromat-safe
pair -- no red/green axis is used to carry meaning.
THERE IS NO GREY TEXT. `--text-secondary` is a dark ink (#2b2b2e light,
#d5d5d9 dark), not a wash; secondary material reads as secondary through
SIZE and WEIGHT. Grey survives only in `--hairline` (borders, rules) and
`--surface` (card/code tints), never as type a student must read --
figure captions included.
WARNING IS THE ONE DELIBERATE EXCEPTION to "exactly two accents".
`--adm-warning-fg` is a distinct alert red (#b02318 light / #ff9f96 dark)
rather than a warm variant of Accent 2, because a warning that reads as
"a slightly different amber than a tip" loses its meaning at a glance.
Hue is not its only channel: it also carries the theme's warning icon and
the literal word "Warning", so dichromats do not depend on the red.
Every color below is measured, not assumed. The proof table lives in
_planning/reports/color-system.md; regenerate with tools/contrast_check.py.
------------------------------------------------------------------------- */
:root,
html.light {
color-scheme: light;
/* Palette (light) -- white page, near-black ink */
--bg: #ffffff;
--surface: #f5f5f7; /* subtle section / code background (never text) */
--surface-raised: #ffffff;
--text: #111113; /* body ink, 18.86:1 on white */
--text-secondary: #2b2b2e; /* dark secondary ink, 14.12:1 -- NOT grey */
--hairline: #d2d2d7; /* grey is allowed HERE and nowhere else */
--accent: #0b5fcc; /* Accent 1: interactive */
--accent-contrast: #ffffff;
--accent-2: #8a5300; /* Accent 2: emphasis (deep amber) */
--accent-2-contrast: #ffffff;
/* Code */
--code-bg: #f5f5f7;
--code-text: #111113;
--code-border: var(--hairline);
--code-badge-fg: #2b2b2e; /* secondary ink, 11.55:1 on the badge tab */
--code-badge-bg: #e8e8ed; /* one step darker than --code-bg so the tab reads */
--output-bg: #ffffff; /* output drops back to the page colour */
/* Admonition accents -- all drawn from Accent 1 / Accent 2 / ink,
except the deliberate warning alert hue documented above. */
--adm-note-fg: var(--accent);
--adm-note-bg: rgba(11, 95, 204, 0.06);
--adm-tip-fg: var(--accent-2);
--adm-tip-bg: rgba(138, 83, 0, 0.08);
--adm-important-fg: var(--accent);
--adm-important-bg: rgba(11, 95, 204, 0.08);
--adm-warning-fg: #b02318;
--adm-warning-bg: rgba(176, 35, 24, 0.09);
--adm-definition-fg: var(--accent);
--adm-definition-bg: rgba(11, 95, 204, 0.04);
--adm-theorem-fg: var(--accent-2);
--adm-theorem-bg: rgba(138, 83, 0, 0.12);
--adm-keyidea-fg: var(--accent-2);
--adm-keyidea-bg: rgba(138, 83, 0, 0.09);
--shadow-theorem: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
/* Syntax highlighting (light) -- restricted to ink + the two accents +
the declared alert hue. Comments are ink, never grey. */
--syn-comment: #2b2b2e;
--syn-string: #8a5300; /* Accent 2 */
--syn-number: #8a5300; /* Accent 2 */
--syn-keyword: #0b5fcc; /* Accent 1 */
--syn-type: #111113; /* ink */
--syn-attr: #0b5fcc; /* Accent 1 */
--syn-addition-fg: #0b5fcc;
--syn-addition-bg: rgba(11, 95, 204, 0.1);
--syn-deletion-fg: #b02318;
--syn-deletion-bg: rgba(176, 35, 24, 0.1);
--shadow-figure: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html.dark {
color-scheme: dark;
/* Palette (dark) -- near-black page, near-white ink */
--bg: #0b0b0c;
--surface: #161618;
--surface-raised: #161618;
--text: #f7f7f8; /* 18.38:1 on the page */
--text-secondary: #d5d5d9; /* 13.44:1 -- still ink, not a wash */
--hairline: #3a3a3d;
--accent: #4c9dff; /* Accent 1 */
--accent-contrast: #0b0b0c;
--accent-2: #e8b04b; /* Accent 2 */
--accent-2-contrast: #0b0b0c;
/* Code */
--code-bg: #161618;
--code-text: #f7f7f8;
--code-border: var(--hairline);
--code-badge-fg: #d5d5d9;
--code-badge-bg: #26262b;
--output-bg: #0b0b0c;
/* Admonition accents */
--adm-note-fg: var(--accent);
--adm-note-bg: rgba(76, 157, 255, 0.12);
--adm-tip-fg: var(--accent-2);
--adm-tip-bg: rgba(232, 176, 75, 0.12);
--adm-important-fg: var(--accent);
--adm-important-bg: rgba(76, 157, 255, 0.16);
--adm-warning-fg: #ff9f96;
--adm-warning-bg: rgba(255, 159, 150, 0.12);
--adm-definition-fg: var(--accent);
--adm-definition-bg: rgba(76, 157, 255, 0.08);
--adm-theorem-fg: var(--accent-2);
--adm-theorem-bg: rgba(232, 176, 75, 0.16);
--adm-keyidea-fg: var(--accent-2);
--adm-keyidea-bg: rgba(232, 176, 75, 0.12);
--shadow-theorem: 0 2px 4px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.45);
/* Syntax highlighting (dark) -- ink + the two accents + the alert hue */
--syn-comment: #d5d5d9;
--syn-string: #e8b04b;
--syn-number: #e8b04b;
--syn-keyword: #4c9dff;
--syn-type: #f7f7f8;
--syn-attr: #4c9dff;
--syn-addition-fg: #4c9dff;
--syn-addition-bg: rgba(76, 157, 255, 0.16);
--syn-deletion-fg: #ff9f96;
--syn-deletion-bg: rgba(255, 159, 150, 0.16);
--shadow-figure: 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.45);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Fallback for the rare no-JS case where the boot script never ran and
neither `light` nor `dark` landed on . */
@media (prefers-color-scheme: dark) {
html:not(.light):not(.dark) {
color-scheme: dark;
--bg: #0b0b0c;
--surface: #161618;
--surface-raised: #161618;
--text: #f7f7f8;
--text-secondary: #d5d5d9;
--hairline: #3a3a3d;
--accent: #4c9dff;
--accent-contrast: #0b0b0c;
--accent-2: #e8b04b;
--accent-2-contrast: #0b0b0c;
--code-bg: #161618;
--code-text: #f7f7f8;
--code-badge-fg: #d5d5d9;
--code-badge-bg: #26262b;
--output-bg: #0b0b0c;
--adm-note-fg: var(--accent);
--adm-note-bg: rgba(76, 157, 255, 0.12);
--adm-tip-fg: var(--accent-2);
--adm-tip-bg: rgba(232, 176, 75, 0.12);
--adm-important-fg: var(--accent);
--adm-important-bg: rgba(76, 157, 255, 0.16);
--adm-warning-fg: #ff9f96;
--adm-warning-bg: rgba(255, 159, 150, 0.12);
--adm-definition-fg: var(--accent);
--adm-definition-bg: rgba(76, 157, 255, 0.08);
--adm-theorem-fg: var(--accent-2);
--adm-theorem-bg: rgba(232, 176, 75, 0.16);
--adm-keyidea-fg: var(--accent-2);
--adm-keyidea-bg: rgba(232, 176, 75, 0.12);
--shadow-theorem: 0 2px 4px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.45);
--syn-comment: #d5d5d9;
--syn-string: #e8b04b;
--syn-number: #e8b04b;
--syn-keyword: #4c9dff;
--syn-type: #f7f7f8;
--syn-attr: #4c9dff;
--syn-addition-fg: #4c9dff;
--syn-addition-bg: rgba(76, 157, 255, 0.16);
--syn-deletion-fg: #ff9f96;
--syn-deletion-bg: rgba(255, 159, 150, 0.16);
}
}
/* -------------------------------------------------------------------------
2. Base document, selection, motion, focus
------------------------------------------------------------------------- */
html,
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
Inter, Roboto, Helvetica, Arial, sans-serif;
}
body.bg-white {
background: var(--bg) !important;
color: var(--text) !important;
}
::selection {
background: color-mix(in srgb, var(--accent) 30%, transparent);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* Never hide focus outlines -- reinforce them with the accent color on top
of whatever the theme already draws (utility outline-* classes stay). */
:focus-visible {
outline: 2px solid var(--accent) !important;
outline-offset: 2px;
}
/* -------------------------------------------------------------------------
3. Typography: headings, body measure, links
------------------------------------------------------------------------- */
.article.content {
font-size: 17px;
line-height: 1.6;
color: var(--text);
}
.article.content h1,
.article.content h2,
.article.content h3,
.article.content h4,
.article.content h5,
.article.content h6 {
font-weight: 600;
color: var(--text);
letter-spacing: -0.015em;
}
h1.myst-fm-block-title {
font-size: 2.5rem;
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 600;
margin-top: 0;
}
p.myst-fm-block-subtitle {
color: var(--text-secondary) !important;
font-size: 1.0625rem;
font-weight: 400;
}
.article.content h2 {
font-size: 1.75rem;
line-height: 1.25;
margin: 2.75rem 0 1rem;
}
.article.content h3 {
font-size: 1.375rem;
line-height: 1.3;
letter-spacing: -0.01em;
margin: 2.25rem 0 0.75rem;
}
.article.content h4,
.article.content h5,
.article.content h6 {
font-size: 1.0625rem;
letter-spacing: -0.01em;
margin: 1.75rem 0 0.5rem;
}
/* Comfortable reading measure for running text, without fighting the
article-grid's full-width ("col-screen") track -- figures/tables/code
are left free to run wider. */
.article.content p,
.article.content li,
.article.content dd,
.article.content blockquote {
max-width: 70ch;
}
/* Generic content links: accent color, no underline until hover. Excludes
the theme's own decorative/utility anchors (section permalinks carry
`no-underline`+`text-inherit`; figure overlay links carry `hover-link`;
sidebar entries carry `myst-toc-item`) so those keep their intended
quiet/inherited styling. */
.article.content a:not(.no-underline):not(.hover-link):not(.myst-toc-item) {
color: var(--accent);
text-decoration: none;
text-underline-offset: 3px;
}
.article.content a:not(.no-underline):not(.hover-link):not(.myst-toc-item):hover {
text-decoration: underline;
}
/* -------------------------------------------------------------------------
4. Header bar
------------------------------------------------------------------------- */
.myst-top-nav {
background: color-mix(in srgb, var(--bg) 85%, transparent) !important;
box-shadow: none !important;
border-bottom: 1px solid var(--hairline);
}
html.dark .myst-top-nav {
border-bottom-color: var(--hairline);
}
.myst-home-link {
color: var(--text) !important;
font-weight: 600;
}
/* -------------------------------------------------------------------------
5. Sidebar navigation + in-book table of contents
------------------------------------------------------------------------- */
.myst-primary-sidebar-pointer {
border-right: 1px solid var(--hairline);
}
.myst-toc {
color: var(--text) !important;
}
.myst-toc-item {
color: var(--text-secondary);
font-weight: 400;
}
/* Part/section group labels: quiet neutral, not blue -- accent is reserved
for the single active chapter link. */
.myst-primary-sidebar [class*="text-blue-800"],
html.dark .myst-primary-sidebar [class*="text-blue-200"] {
color: var(--text-secondary) !important;
font-weight: 600;
}
.myst-toc-item:hover {
color: var(--text) !important;
}
.myst-toc-item.active,
.myst-toc-item-exact.active {
background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
color: var(--accent) !important;
font-weight: 600;
}
/* -------------------------------------------------------------------------
6. Admonitions (note / tip / important / warning / dropdown)
------------------------------------------------------------------------- */
.myst-admonition {
border: 1px solid var(--hairline) !important;
border-radius: 12px;
box-shadow: var(--shadow-card) !important;
background: var(--surface) !important;
}
html.dark .myst-admonition {
background: var(--surface) !important;
}
.myst-admonition-header {
background: transparent !important;
font-weight: 600;
border-bottom: 1px solid var(--hairline);
}
.myst-admonition-header-text {
color: var(--text) !important;
}
.myst-admonition-body {
padding: 1rem 1.25rem !important;
}
.myst-admonition-header {
padding: 0.75rem 1.25rem !important;
}
/* Type accents: subtle tint + icon/rule color only -- title text stays
neutral (matches the theme's existing pattern of a neutral header-text
span next to a colored icon). */
.myst-admonition-note {
border-color: color-mix(in srgb, var(--adm-note-fg) 30%, var(--hairline)) !important;
}
.myst-admonition-note > .myst-admonition-header {
background: var(--adm-note-bg) !important;
}
.myst-admonition-note > .myst-admonition-header .myst-admonition-header-icon {
color: var(--adm-note-fg) !important;
}
.myst-admonition-tip {
border-color: color-mix(in srgb, var(--adm-tip-fg) 30%, var(--hairline)) !important;
}
.myst-admonition-tip > .myst-admonition-header {
background: var(--adm-tip-bg) !important;
}
.myst-admonition-tip > .myst-admonition-header .myst-admonition-header-icon {
color: var(--adm-tip-fg) !important;
}
.myst-admonition-important {
border-color: color-mix(in srgb, var(--adm-important-fg) 30%, var(--hairline)) !important;
}
.myst-admonition-important > .myst-admonition-header {
background: var(--adm-important-bg) !important;
}
.myst-admonition-important > .myst-admonition-header .myst-admonition-header-icon {
color: var(--adm-important-fg) !important;
}
.myst-admonition-warning {
border-color: color-mix(in srgb, var(--adm-warning-fg) 30%, var(--hairline)) !important;
}
.myst-admonition-warning > .myst-admonition-header {
background: var(--adm-warning-bg) !important;
}
.myst-admonition-warning > .myst-admonition-header .myst-admonition-header-icon {
color: var(--adm-warning-fg) !important;
}
/* Custom variants: definition / theorem / keyidea. These are not built-in
MyST admonition kinds, so `{admonition}` falls back to its default
("note" icon, `myst-admonition-default` class) and simply appends the
`:class:` value verbatim onto the same