/* * primer.css — the single source of the Interactive Primer's look-and-feel. * * Page-level (light DOM) styling lives here. Design tokens are declared on :root * as CSS custom properties; because custom properties pierce shadow boundaries, * the Web Components inherit the same palette and typography automatically * (see js/components/shared.js for the component-internal stylesheet). */ /* * Themes. Colour tokens are grouped per theme and selected by `data-theme` on * (set early, before paint, by js/boot.js and the inline script in index.html). The * LIGHT palette is the :root default so the app looks right even before JS runs. The * `viz` tokens drive diagrams and manim animations (see js/theme.js → themeColors()). */ :root { /* Typography */ --primer-font-body: Georgia, "Iowan Old Style", "Times New Roman", serif; --primer-font-ui: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --primer-font-display: var(--primer-font-body); /* headings; the fun theme overrides */ /* Rhythm */ --primer-measure: 42rem; /* comfortable reading width */ --primer-radius: 0.6rem; --primer-gap: 1.25rem; /* Palette — LIGHT (default): a calm, "primer"-like parchment + ink scheme. */ --primer-bg: #faf7f0; --primer-surface: #ffffff; --primer-ink: #1f2430; --primer-ink-soft: #55606f; --primer-accent: #5b6ee1; /* links, interactive accents */ --primer-accent-ink: #ffffff; --primer-border: #e6e0d4; --primer-badge-bg: #eef0fb; --primer-badge-ink: #3a45a6; --primer-star: #f5b301; /* filled confidence star */ /* Quiz feedback: correct (ok) / incorrect (bad), ink + subtle tinted background. */ --primer-ok: #1a8f3c; --primer-ok-bg: #e6f6ec; --primer-bad: #c0392b; --primer-bad-bg: #fdecea; /* Visualisation palette (diagrams + animations) */ --primer-viz-bg: #ffffff; /* animation/diagram backdrop */ --primer-viz-ink: #1f2430; /* labels and text on diagrams */ --primer-viz-line: #1f2430; /* axes, strokes, number lines */ /* Categorical fills are GENERATED by a golden-angle hue sequence (js/theme.js → themeColors().cat) from these three knobs, so early colours are maximally distinct and only crowd as more are used. Tune per theme here. */ --primer-cat-hue: 210; --primer-cat-sat: 62%; --primer-cat-light: 52%; /* Confidence colour ramp (explorer node fills): hue is the rating 0→120 (red→green); saturation/lightness are theme-tuned for text legibility. */ --primer-conf-sat: 70%; --primer-conf-light: 62%; } :root[data-theme="dark"] { --primer-bg: #14171f; --primer-surface: #1e222c; --primer-ink: #e8eaed; --primer-ink-soft: #9aa3b2; --primer-accent: #8c9eff; --primer-accent-ink: #14171f; --primer-border: #2c323e; --primer-badge-bg: #232a3a; --primer-badge-ink: #aeb9ff; --primer-star: #ffd24d; --primer-ok: #4ccb76; --primer-ok-bg: #16321f; --primer-bad: #ff6b6b; --primer-bad-bg: #3a1d1d; --primer-viz-bg: #1e222c; --primer-viz-ink: #e8eaed; --primer-viz-line: #e8eaed; --primer-cat-hue: 210; --primer-cat-sat: 60%; --primer-cat-light: 66%; /* lighter so fills pop on the dark backdrop */ /* Darker, muted fills so the light node text stays readable on them. */ --primer-conf-sat: 45%; --primer-conf-light: 34%; } :root[data-theme="fun"] { --primer-bg: #fff7fb; --primer-surface: #ffffff; --primer-ink: #2b2350; --primer-ink-soft: #6b5fa0; --primer-accent: #ff5da2; --primer-accent-ink: #ffffff; --primer-border: #ffd6ec; --primer-badge-bg: #e7f6ff; --primer-badge-ink: #1a8fd6; --primer-star: #ffb627; --primer-ok: #1fa84f; --primer-ok-bg: #e3f8e8; --primer-bad: #e23b54; --primer-bad-bg: #fde6ea; --primer-viz-bg: #fffdf7; --primer-viz-ink: #2b2350; --primer-viz-line: #2b2350; --primer-cat-hue: 200; --primer-cat-sat: 85%; --primer-cat-light: 60%; /* punchy */ /* Bright and cheerful — fun's dark ink stays readable on them. */ --primer-conf-sat: 90%; --primer-conf-light: 72%; /* Playful shapes + a rounded display font (loaded by js/theme.js while active). */ --primer-radius: 1rem; --primer-font-display: "Fredoka", "Baloo 2", var(--primer-font-ui); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--primer-bg); color: var(--primer-ink); font-family: var(--primer-font-body); font-size: 18px; line-height: 1.6; } /* Ease the colour swap when the theme changes. */ body { transition: background-color 0.2s ease, color 0.2s ease; } h1, h2 { font-family: var(--primer-font-display); } main, .primer-shell { max-width: var(--primer-measure); margin: 0 auto; padding: 2rem 5px 4rem; } a { color: var(--primer-accent); } /* * Cards (light DOM). adopts this class, and because cards are slotted * into their styling must live in the document stylesheet — slotted * content is styled here, not by the components' shadow stylesheet (js/components/shared.js). * Surface/border/radius match the shadow `.card`; the vertical padding here is tighter. */ .card { display: block; background: var(--primer-surface); border: 1px solid var(--primer-border); border-radius: var(--primer-radius); padding: 5px 1.4rem; margin: var(--primer-gap) 0; } /* Collapse the first/last child's outer margin so the 5px top/bottom padding is the actual gap (otherwise a leading

's margin stacks on top of it). */ .card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; } /* * Math (light DOM). renders KaTeX into itself; it's inline by default * (a custom element starts as display:inline), so inline math flows with the prose. * The `display` attribute makes it a centered block, like KaTeX's own display mode. * * A display equation can be wider than its column; rather than overflow the page, it * scrolls horizontally inside its own panel. `justify-content: safe center` keeps the * equation centered when it fits but falls back to start-aligned when it overflows, so * the left edge stays reachable (plain centering + overflow clips the left, unscrollable). */ primer-math[display] { display: flex; justify-content: safe center; overflow-x: auto; overflow-y: hidden; margin: 0.75rem 0; scrollbar-width: thin; } /* The wrapper owns the vertical spacing; pad the bottom so the scrollbar (when present) doesn't sit on the equation. */ primer-math[display] .katex-display { margin: 0; padding-bottom: 0.25rem; } /* Landing / index helpers (light DOM) */ .primer-tree-list { list-style: none; padding: 0; } .primer-tree-list li { margin: 0.4rem 0; } /* * MathLive virtual keyboard (the math input editor). MathLive renders it into the document * body — outside our component shadow roots — so it's styled here, globally. The keycap * variables go on `body` (per MathLive's docs); raising --keycap-max-width lets the keys * widen to fill the row instead of staying narrow + centred. The keyboard panel is then * capped at 640px and centred, so it's edge-to-edge on a phone but doesn't stretch on a * wide screen. */ body { /* Keys grow to fill the row (no narrow cap), comfortable touch height, and the keyboard's own horizontal + per-row padding zeroed so the keys reach the edges. */ --keycap-max-width: 9999px; --keycap-gap: 3px; --keycap-height: 2.4rem; --keyboard-padding-horizontal: 0px; --keyboard-padding-top: 0px; /* no grey gap above the top row */ --keyboard-row-padding-left: 0px; --keyboard-row-padding-right: 0px; } /* The grey host (.ML__keyboard) + its full-width grey backdrop (.MLK__backdrop) stay full width. The plate is absolutely positioned, so padding on the backdrop is ignored — the 5px grey band above/below the keys is created by insetting the plate itself (top/bottom below). */ .ML__keyboard .MLK__backdrop { padding-top: 0; padding-bottom: 0; } /* editToolbar="none" empties the toolbar but leaves the element (min-height:32px) — that 32px is the grey gap above the keys. Hide it. */ .ML__keyboard .MLK__toolbar { display: none; } /* The plate is absolutely positioned (MathLive sets left + an explicit width, so plain auto margins can't centre it). Re-anchor it left:0/right:0 with auto width so max-width + auto margins centre it at 640px on a wide screen (full width on a phone), and drop its top offset. */ .ML__keyboard .MLK__plate { top: 0; left: 0; right: 0; width: auto; max-width: 640px; margin-inline: auto; /* The plate is transparent over the grey backdrop and is sized by its content; padding here grows it 5px at top + bottom, revealing the grey band above and below the keys. */ padding-top: 5px; padding-bottom: 5px; } /* MathLive sizes each keycap to ~10% of the panel (min(--keycap-max-width, 10cqw)), assuming ~10 keys per row; our rows have only 5–6, so they'd leave a big side gap. The rows are flexboxes, so make every keycap flex-grow equally to fill the full row width. */ .ML__keyboard .MLK__row > * { flex: 1 1 0; max-width: none; }