@neuromatch/course-kit 0.1.2 → 0.1.3

package/README.md

@@ -61,8 +61,12 @@ nma:
     pyodide_url: https://cdn.jsdelivr.net/pyodide/v314.0.7/full/
 ```
 
-One rule belongs in the course's own CSS, because a plugin can't add
-site-wide CSS: `.myst-jp-nb-toolbar { display: none !important; }`.
+A plugin can't add site-wide CSS, so the Neuromatch look (colours, Rubik font,
+logos, favicon, and the rule that hides JupyterLite's toolbar) comes from the
+`nma-kit sync-assets` command in the PyPI package instead. It writes `_nma/`,
+which the course's `myst.yml` lists under `site.options` (`style`, `logo`,
+`logo_dark`, `favicon`). See the
+[kit README](https://github.com/neuromatch/course-kit#site-branding).
 
 ## What's in the package
 

package/dist/assets/cells/cells.css

@@ -1,6 +1,7 @@
 /* Editable cell panel (in each panel's shadow root).
    Layout: header, editor, action bar, output. Colours follow the site theme.
-   Public tokens, set on :root / html.dark in _static/custom.css:
+   Public tokens, set on :root / html.dark in the kit stylesheet (python/src/nma_kit/assets/site.css);
+   a course overrides them in its own CSS (nma.style.extra):
    --nma-cell-{bg,fg}-{light,dark}, --nma-cell-head-{bg,fg}-{light,dark},
    --nma-cell-bar-bg-{light,dark}, --nma-cell-out-bg-{light,dark},
    --nma-cell-gutter-{bg,fg}-{light,dark}, --nma-cell-active-line-{light,dark},

package/dist/assets/cells/page.css

@@ -2,7 +2,7 @@
 .nma-cells-runtime { display: none; }
 
 /* Floating "Run all" control (runtime-widget.mjs). Brand-coloured via the theme
-   variables set in _static/custom.css, with safe fallbacks. */
+   variables set in the kit stylesheet (site.css), with safe fallbacks. */
 .nma-run-all-bar {
   position: fixed;
   right: 1rem;

package/dist/assets/scrolly/engine.mjs

@@ -11,14 +11,14 @@
 
 const STYLE = `
 .hud { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 16px; padding: 14px 28px; pointer-events: none; font-family: var(--nm-font-head, system-ui, sans-serif); }
-.sec { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nm-mint, #5efbd7); min-width: 12ch; }
-.bar { flex: 1; height: 3px; background: rgba(255,255,255,0.14); border-radius: 3px; overflow: hidden; }
-.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--nm-salmon, #fb7a7a), var(--nm-mint, #5efbd7)); transition: width 0.4s; }
+.sec { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-accent, #008cbf); min-width: 12ch; }
+.bar { flex: 1; height: 3px; background: var(--sc-track, rgba(26,26,26,0.12)); border-radius: 3px; overflow: hidden; }
+.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sc-warm, #fa7a7a), var(--sc-accent, #008cbf)); transition: width 0.4s; }
 .py[hidden] { display: none; }
-.py { pointer-events: auto; flex: none; font: 600 0.74rem var(--nm-font-head, system-ui, sans-serif); letter-spacing: 0.04em; border: 1px solid var(--nm-mint, #5efbd7); border-radius: 999px; padding: 0.3rem 0.85rem; cursor: pointer; max-width: 34ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--nm-mint, #5efbd7); color: var(--nm-indigo, #2a2952); }
-.py[data-state="loading"] { background: transparent; color: var(--nm-mint, #5efbd7); cursor: progress; }
-.py[data-state="ready"] { background: transparent; color: var(--nm-mint, #5efbd7); cursor: default; }
-.py[data-state="error"] { background: var(--nm-salmon, #fb7a7a); border-color: var(--nm-salmon, #fb7a7a); }
+.py { pointer-events: auto; flex: none; font: 600 0.74rem var(--nm-font-head, system-ui, sans-serif); letter-spacing: 0.04em; border: 1px solid var(--sc-accent, #008cbf); border-radius: 999px; padding: 0.3rem 0.85rem; cursor: pointer; max-width: 34ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--sc-accent, #008cbf); color: var(--sc-accent-fg, #fff); }
+.py[data-state="loading"] { background: transparent; color: var(--sc-accent, #008cbf); cursor: progress; }
+.py[data-state="ready"] { background: transparent; color: var(--sc-accent, #008cbf); cursor: default; }
+.py[data-state="error"] { background: var(--sc-warm, #fa7a7a); border-color: var(--sc-warm, #fa7a7a); color: #1a1a1a; }
 `;
 
 // Section width (px) from which the stage sits beside the cards.

package/dist/assets/scrolly/runnable.css

@@ -1,27 +1,28 @@
 /* Runnable Python panel (inside the widget's shadow DOM).
-   Colours come from the --nm-* variables set on .scrolly in scrolly.css. */
+   Colours come from the --sc-* variables set on .scrolly in scrolly.css (they
+   inherit into the shadow DOM and switch with the site's light/dark mode). */
 :host { display: block; width: 100%; }
 * { box-sizing: border-box; }
 [hidden] { display: none !important; }
 
 .fl-codebox {
   width: 100%;
-  background: #14131f;
-  border: 1px solid rgba(185, 184, 255, 0.28);
+  background: var(--sc-code-bg);
+  border: 1px solid var(--sc-line);
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 12px 34px rgba(8, 7, 30, 0.5);
-  color: #ecebff;
+  box-shadow: var(--sc-shadow);
+  color: var(--sc-code-text);
   font-family: var(--nm-font-body, system-ui, sans-serif);
   text-align: left;
 }
-.fl-codehead { display: flex; justify-content: space-between; padding: 0.45rem 1rem; background: #22214a; font: 600 0.72rem var(--nm-font-head, system-ui, sans-serif); letter-spacing: 0.1em; text-transform: uppercase; color: var(--nm-lilac, #b9b8ff); }
+.fl-codehead { display: flex; justify-content: space-between; padding: 0.45rem 1rem; background: var(--sc-code-bar); border-bottom: 1px solid var(--sc-line); font: 600 0.72rem var(--nm-font-head, system-ui, sans-serif); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-code-head-fg); }
 
-.fl-params { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding: 0.55rem 1rem; background: #1b1a36; border-bottom: 1px solid rgba(185, 184, 255, 0.2); }
-.fl-params label { display: flex; align-items: center; gap: 0.5rem; font: 600 0.8rem ui-monospace, Consolas, monospace; color: var(--nm-lilac, #b9b8ff); }
-.fl-params input[type=range] { width: 9rem; accent-color: var(--nm-mint, #5efbd7); }
-.fl-params output { min-width: 4ch; color: var(--nm-mint, #5efbd7); text-align: right; }
-.fl-params select { font: inherit; background: #14131f; color: var(--nm-mint, #5efbd7); border: 1px solid rgba(185, 184, 255, 0.4); border-radius: 6px; padding: 0.15rem 0.4rem; }
+.fl-params { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding: 0.55rem 1rem; background: var(--sc-code-bar); border-bottom: 1px solid var(--sc-line); }
+.fl-params label { display: flex; align-items: center; gap: 0.5rem; font: 600 0.8rem ui-monospace, Consolas, monospace; color: var(--sc-code-head-fg); }
+.fl-params input[type=range] { width: 9rem; accent-color: var(--sc-accent); }
+.fl-params output { min-width: 4ch; color: var(--sc-accent); text-align: right; }
+.fl-params select { font: inherit; background: var(--sc-code-bg); color: var(--sc-accent); border: 1px solid var(--sc-line); border-radius: 6px; padding: 0.15rem 0.4rem; }
 
 .fl-editor { position: relative; max-height: 46vh; overflow: auto; }
 .fl-editor .fl-hl, .fl-editor .fl-ta {
@@ -31,37 +32,37 @@
   white-space: pre;
   tab-size: 4;
 }
-.fl-editor .fl-hl { color: #ecebff; overflow: hidden; pointer-events: none; }
+.fl-editor .fl-hl { color: var(--sc-code-text); overflow: hidden; pointer-events: none; }
 .fl-editor .fl-ta {
   position: absolute; inset: 0; width: 100%; height: 100%;
-  color: transparent; caret-color: var(--nm-mint, #5efbd7); background: transparent; border: 0; outline: 0; resize: none; overflow: hidden;
+  color: transparent; caret-color: var(--sc-accent); background: transparent; border: 0; outline: 0; resize: none; overflow: hidden;
 }
-.fl-editor .fl-ta::selection { background: rgba(94, 251, 215, 0.28); }
-.fl-editor:focus-within { box-shadow: inset 0 0 0 2px rgba(94, 251, 215, 0.55); }
+.fl-editor .fl-ta::selection { background: color-mix(in srgb, var(--sc-accent) 30%, transparent); }
+.fl-editor:focus-within { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sc-accent) 55%, transparent); }
 
-.fl-actions { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem; background: #1b1a36; border-top: 1px solid rgba(185, 184, 255, 0.2); }
+.fl-actions { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem; background: var(--sc-code-bar); border-top: 1px solid var(--sc-line); }
 .mode-output .fl-actions { border-top: 0; background: transparent; padding: 0.35rem 0.6rem; }
 .fl-actions button { font: 600 0.78rem var(--nm-font-head, system-ui, sans-serif); border: 0; border-radius: 999px; padding: 0.3rem 0.95rem; cursor: pointer; }
-.fl-run { background: var(--nm-mint, #5efbd7); color: var(--nm-indigo, #2a2952); }
+.fl-run { background: var(--sc-accent); color: var(--sc-accent-fg); }
 .fl-run:disabled { opacity: 0.55; cursor: progress; }
-.fl-reset, .fl-toggle { background: transparent; color: var(--nm-lilac, #b9b8ff); border: 1px solid rgba(185, 184, 255, 0.5) !important; }
-.fl-status { font-size: 0.76rem; color: var(--nm-muted, #b4b3e6); }
+.fl-reset, .fl-toggle { background: transparent; color: var(--sc-code-text); border: 1px solid var(--sc-line) !important; }
+.fl-status { font-size: 0.76rem; color: var(--sc-muted); }
 
-.fl-out { border-top: 1px solid rgba(185, 184, 255, 0.2); background: #0e0d18; padding: 0.55rem 1.1rem 0.75rem; }
+.fl-out { border-top: 1px solid var(--sc-line); background: var(--sc-code-out); padding: 0.55rem 1.1rem 0.75rem; }
 .mode-output .fl-out { border-top: 0; }
-.fl-out pre { margin: 0.25rem 0 0; font: 0.84rem/1.55 ui-monospace, "Cascadia Code", Consolas, monospace; color: #c9f5ea; white-space: pre-wrap; max-height: 30vh; overflow: auto; }
+.fl-out pre { margin: 0.25rem 0 0; font: 0.84rem/1.55 ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--sc-code-text); white-space: pre-wrap; max-height: 30vh; overflow: auto; }
 .fl-figs img { display: block; max-width: 100%; max-height: 48vh; margin: 0.5rem auto 0; border-radius: 8px; background: #fff; }
-.fl-err { color: var(--nm-salmon, #fb7a7a); font-size: 0.86rem; margin-top: 0.3rem; }
-.fl-err details { margin-top: 0.25rem; color: var(--nm-muted, #b4b3e6); }
-.fl-err pre { font: 0.74rem/1.5 ui-monospace, Consolas, monospace; color: #f5c1c1; }
-.fl-note { margin: 0 0 0.3rem; font-size: 0.78rem; color: var(--nm-salmon, #fb7a7a); }
-.fl-empty { margin: 0; font-size: 0.8rem; color: var(--nm-muted, #b4b3e6); font-style: italic; }
+.fl-err { color: var(--sc-warm-text); font-size: 0.86rem; margin-top: 0.3rem; }
+.fl-err details { margin-top: 0.25rem; color: var(--sc-muted); }
+.fl-err pre { font: 0.74rem/1.5 ui-monospace, Consolas, monospace; color: var(--sc-warm-text); }
+.fl-note { margin: 0 0 0.3rem; font-size: 0.78rem; color: var(--sc-warm-text); }
+.fl-empty { margin: 0; font-size: 0.8rem; color: var(--sc-muted); font-style: italic; }
 
-.tk-c { color: #8b8ac7; font-style: italic; }
-.tk-s { color: var(--nm-mint, #5efbd7); font-style: normal; }
-.tk-k { color: var(--nm-salmon, #fb7a7a); font-style: normal; }
-.tk-n { color: var(--nm-lilac, #b9b8ff); font-style: normal; }
-.tk-f { color: #7cc4ff; font-style: normal; }
-.tk-b { font-style: normal; color: #fff; background: rgba(251, 122, 122, 0.35); border-radius: 4px; }
+.tk-c { color: var(--sc-tok-comment); font-style: italic; }
+.tk-s { color: var(--sc-tok-string); font-style: normal; }
+.tk-k { color: var(--sc-tok-keyword); font-style: normal; }
+.tk-n { color: var(--sc-tok-number); font-style: normal; }
+.tk-f { color: var(--sc-tok-function); font-style: normal; }
+.tk-b { font-style: normal; color: inherit; background: color-mix(in srgb, var(--sc-warm) 30%, transparent); border-radius: 4px; }
 
 .is-collapsed .fl-editor { display: none; }

package/dist/assets/scrolly/scrolly.css

@@ -1,4 +1,4 @@
-/* Scrollytelling page layout (plugins/scrolly/).
+/* Scrollytelling page layout and colours (js/src/scrolly/).
    Attached to the engine widget so MyST bundles it; engine.mjs copies it
    into <head>. Without JavaScript the page is a plain linear document; the
    pinned layout switches on when the engine sets data-ready.
@@ -26,28 +26,95 @@
   body:has(.myst-primary-sidebar.lg\:hidden) .article-grid:not(:has(> .lg\:col-margin-right)) > .scrolly-col { grid-column: screen-inset; }
 }
 
+/* ---- colours ----
+   The section follows the site: light and dark mode (the theme's `.dark` class
+   on <html>), the brand colours from the kit stylesheet (--nma-brand-*, which a
+   course changes with `nma.brand`) and the kit's syntax colours (--nma-tok-*,
+   shared with the editable cells). The hex values are the Neuromatch defaults,
+   used when the kit stylesheet is not loaded. runnable.css and the HUD in
+   engine.mjs read the same --sc-* tokens through the shadow DOM. */
 .scrolly {
   --scrolly-top: 60px;
-  --nm-indigo: #2a2952;
-  --nm-indigo-deep: #1c1b3e;
-  --nm-purple: #45429c;
-  --nm-blue: #008cbf;
-  --nm-salmon: #fa7a7a;
-  --nm-mint: #5efbd7;
-  --nm-lilac: #b9b8ff;
-  --nm-cream: #f3f0ec;
-  --nm-ink: #161922;
-  --nm-muted: #b4b3e6;
-  --nm-text: #f3f0ec;
+  --sc-primary: var(--nma-brand-primary, #008cbf);
+  --sc-primary-light: var(--nma-brand-primary-light, #35b4dc);
+  --sc-secondary: var(--nma-brand-secondary, #45429c);
+  --sc-warm: var(--nma-brand-accent, #fa7a7a);
+
+  --sc-bg: #f7f8fa;
+  --sc-text: #1a1a1a;
+  --sc-muted: #7a7a7a;
+  --sc-line: #e6e6e6;
+  --sc-heading: var(--sc-secondary);
+  --sc-title: var(--sc-secondary);
+  --sc-link: var(--sc-primary);
+  --sc-accent: var(--sc-primary);
+  --sc-accent-fg: #ffffff;
+  --sc-warm-text: color-mix(in srgb, var(--sc-warm) 60%, #1a1a1a);
+  --sc-glow-1: color-mix(in srgb, var(--sc-secondary) 10%, transparent);
+  --sc-glow-2: color-mix(in srgb, var(--sc-primary) 12%, transparent);
+  --sc-track: rgba(26, 26, 26, 0.12);
+  --sc-chip-bg: color-mix(in srgb, var(--sc-primary) 6%, #ffffff);
+  --sc-chip-line: color-mix(in srgb, var(--sc-primary) 28%, transparent);
+
+  --sc-card-bg: #ffffff;
+  --sc-card-text: #1a1a1a;
+  --sc-card-code: color-mix(in srgb, var(--sc-primary) 10%, #ffffff);
+  --sc-shadow: 0 10px 30px rgba(26, 26, 26, 0.1);
+
+  --sc-code-bg: #ffffff;
+  --sc-code-bar: #f7f8fa;
+  --sc-code-out: #f7f8fa;
+  --sc-code-text: #1a1a1a;
+  --sc-code-head-fg: var(--sc-secondary);
+  --sc-tok-comment: var(--nma-tok-comment-light, #7a7a7a);
+  --sc-tok-string: var(--nma-tok-string-light, #0e7c86);
+  --sc-tok-keyword: var(--nma-tok-keyword-light, #45429c);
+  --sc-tok-number: var(--nma-tok-number-light, #b5484b);
+  --sc-tok-function: var(--nma-tok-function-light, #006b8f);
+
   --nm-font-body: inherit;
   --nm-font-head: inherit;
   position: relative;
   margin-block: 1.5rem;
-  color: var(--nm-text);
-  background: var(--nm-indigo-deep);
+  color: var(--sc-text);
+  background: var(--sc-bg);
+  border: 1px solid var(--sc-line);
   border-radius: 12px;
   padding: 1rem;
 }
+.dark .scrolly {
+  --sc-bg: #232323;
+  --sc-text: #f7f8fa;
+  --sc-muted: #bdcfcf;
+  --sc-line: #3a3a3a;
+  --sc-heading: var(--nma-tok-keyword-dark, #b9b8ff);
+  --sc-title: #f7f8fa;
+  --sc-link: var(--sc-primary-light);
+  --sc-accent: var(--sc-primary-light);
+  --sc-accent-fg: #14131f;
+  --sc-warm-text: color-mix(in srgb, var(--sc-warm) 75%, #ffffff);
+  --sc-glow-1: color-mix(in srgb, var(--sc-secondary) 45%, transparent);
+  --sc-glow-2: color-mix(in srgb, var(--sc-primary) 18%, transparent);
+  --sc-track: rgba(255, 255, 255, 0.14);
+  --sc-chip-bg: rgba(255, 255, 255, 0.05);
+  --sc-chip-line: color-mix(in srgb, var(--sc-primary-light) 30%, transparent);
+
+  --sc-card-bg: #2e2e2e;
+  --sc-card-text: #f7f8fa;
+  --sc-card-code: rgba(255, 255, 255, 0.1);
+  --sc-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
+
+  --sc-code-bg: #1b1b1b;
+  --sc-code-bar: #262626;
+  --sc-code-out: #151515;
+  --sc-code-text: #e6e6e6;
+  --sc-code-head-fg: #bdcfcf;
+  --sc-tok-comment: var(--nma-tok-comment-dark, #9aa7a7);
+  --sc-tok-string: var(--nma-tok-string-dark, #5efbd7);
+  --sc-tok-keyword: var(--nma-tok-keyword-dark, #b9b8ff);
+  --sc-tok-number: var(--nma-tok-number-dark, #ff9e9e);
+  --sc-tok-function: var(--nma-tok-function-dark, #5ec8ec);
+}
 .scrolly *, .scrolly *::before, .scrolly *::after { box-sizing: border-box; }
 .scrolly-engine { display: block; }
 .scrolly-stage { margin-bottom: 1.5rem; }
@@ -77,8 +144,8 @@ body:has(.scrolly) .myst-jp-nb-toolbar-power { display: none !important; }
   z-index: 0;
   border-radius: 12px;
   background:
-    radial-gradient(ellipse 60% 50% at 78% 20%, rgba(68, 67, 156, 0.55), transparent 70%),
-    radial-gradient(ellipse 40% 40% at 10% 95%, rgba(0, 137, 247, 0.16), transparent 70%);
+    radial-gradient(ellipse 60% 50% at 78% 20%, var(--sc-glow-1), transparent 70%),
+    radial-gradient(ellipse 40% 40% at 10% 95%, var(--sc-glow-2), transparent 70%);
 }
 .scrolly[data-ready="true"] .scrolly-view {
   position: absolute;
@@ -104,59 +171,60 @@ body:has(.scrolly) .myst-jp-nb-toolbar-power { display: none !important; }
   pointer-events: auto;
   max-width: 32rem;
   min-width: 0; /* flex item in .scrolly-step: don't grow to the widest code line */
-  background: var(--nm-cream);
-  color: var(--nm-ink);
+  background: var(--sc-card-bg);
+  color: var(--sc-card-text);
+  border: 1px solid var(--sc-line);
   border-radius: 14px;
-  border-left: 6px solid var(--nm-salmon);
+  border-left: 6px solid var(--sc-warm);
   padding: 1.1rem 1.35rem 1.25rem;
-  box-shadow: 0 14px 40px rgba(8, 7, 30, 0.45);
+  box-shadow: var(--sc-shadow);
   line-height: 1.6;
 }
 .scrolly[data-ready="true"] .scrolly-card { opacity: 0.32; transform: translateX(-10px) scale(0.985); transition: opacity 0.35s, transform 0.35s; }
 .scrolly[data-ready="true"] .scrolly-step.is-active .scrolly-card { opacity: 1; transform: none; }
 .scrolly-card > :first-child { margin-top: 0; }
 .scrolly-card > :last-child { margin-bottom: 0; }
-.scrolly-card :is(h1, h2, h3, h4, h5, h6) { display: block; border: 0; padding: 0; margin: 0.2rem 0 0.45rem; font-weight: 600; font-size: 1.35rem; line-height: 1.2; color: var(--nm-indigo); }
+.scrolly-card :is(h1, h2, h3, h4, h5, h6) { display: block; border: 0; padding: 0; margin: 0.2rem 0 0.45rem; font-weight: 600; font-size: 1.35rem; line-height: 1.2; color: var(--sc-heading); }
 .scrolly-card p { margin: 0 0 0.6rem; font-size: 1rem; }
-.scrolly-card :is(p, li, strong, em, span, b, i, td, th) { color: var(--nm-ink); }
-.scrolly-card code { background: #e4e0f7; color: var(--nm-indigo); padding: 0.05em 0.4em; border-radius: 5px; font-size: 0.88em; }
-.scrolly-card a { color: var(--nm-purple); }
+.scrolly-card :is(p, li, strong, em, span, b, i, td, th) { color: var(--sc-card-text); }
+.scrolly-card code { background: var(--sc-card-code); color: var(--sc-heading); padding: 0.05em 0.4em; border-radius: 5px; font-size: 0.88em; }
+.scrolly-card a { color: var(--sc-link); }
 .scrolly-card .katex-display { overflow-x: auto; overflow-y: hidden; }
 .scrolly-card details { margin: 0.5rem 0; }
 .scrolly-card pre { max-width: 100%; overflow-x: auto; }
 .scrolly-card .nma-solution-link p { margin: 0.4rem 0; }
 .scrolly-kicker { margin: 0 0 0.1rem; }
-.scrolly-kicker p { margin: 0; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nm-purple) !important; }
+.scrolly-kicker p { margin: 0; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-heading) !important; }
 
 /* ---- stage content ---- */
-.scrolly-view { color: var(--nm-text); }
+.scrolly-view { color: var(--sc-text); }
 .scrolly-view :is(p, li, strong, em, span) { color: inherit; }
-.scrolly-view :is(h1, h2, h3, h4) { display: block; border: 0; padding: 0; color: #fff; }
-.scrolly-view a { color: var(--nm-mint); }
-.scrolly-view img { max-width: 100%; max-height: 70vh; width: auto; height: auto; border-radius: 10px; background: #fff; margin: 0 auto; display: block; }
+.scrolly-view :is(h1, h2, h3, h4) { display: block; border: 0; padding: 0; color: var(--sc-title); }
+.scrolly-view a { color: var(--sc-link); }
+.scrolly-view img { max-width: 100%; max-height: 70vh; width: auto; height: auto; border-radius: 10px; background: #fff; border: 1px solid var(--sc-line); margin: 0 auto; display: block; }
 .scrolly-view video { max-width: 100%; max-height: 70vh; border-radius: 10px; margin: 0 auto; display: block; }
 .scrolly-view figure { margin: 0; }
-.scrolly-view figcaption, .scrolly-view figcaption * { color: var(--nm-muted); }
+.scrolly-view figcaption, .scrolly-view figcaption * { color: var(--sc-muted); }
 .scrolly-view iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 10px; background: #000; }
 .scrolly-view .nma-video p, .scrolly-view .nma-slides p { margin: 0.3rem 0; font-size: 0.85rem; }
-.scrolly-view .nma-video [role="tab"] { color: var(--nm-lilac); }
+.scrolly-view .nma-video [role="tab"] { color: var(--sc-link); }
 .scrolly-view .scrolly-runnable { width: 100%; }
 .scrolly-view.is-list ol, .scrolly-view.is-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; counter-reset: chip; }
-.scrolly-view.is-list li { counter-increment: chip; display: grid; grid-template-columns: 2.6rem 1fr; align-items: center; gap: 0.9rem; font-size: 1.05rem; line-height: 1.45; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(185, 184, 255, 0.2); border-radius: 12px; padding: 0.75rem 1rem; margin: 0; }
-.scrolly-view.is-list li::before { content: counter(chip); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--nm-mint); color: var(--nm-indigo); font-weight: 700; font-size: 1.1rem; }
+.scrolly-view.is-list li { counter-increment: chip; display: grid; grid-template-columns: 2.6rem 1fr; align-items: center; gap: 0.9rem; font-size: 1.05rem; line-height: 1.45; background: var(--sc-chip-bg); border: 1px solid var(--sc-chip-line); border-radius: 12px; padding: 0.75rem 1rem; margin: 0; }
+.scrolly-view.is-list li::before { content: counter(chip); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--sc-accent); color: var(--sc-accent-fg); font-weight: 700; font-size: 1.1rem; }
 .scrolly-view.is-list li > p { margin: 0; }
 .scrolly-view.is-list :is(h2, h3, h4) { margin: 0 0 0.5rem; font-size: clamp(1.4rem, 4cqi, 2.2rem); font-weight: 700; }
 
 /* ---- hero (title and closing screens) ----
    MyST re-levels headings, so the title is styled by position, not by tag. */
 .scrolly-view.is-hero { max-width: 72rem; margin-inline: auto; padding: 0 clamp(0.5rem, 5cqi, 4rem); }
-.scrolly-view.is-hero .scrolly-kicker p { font-size: 0.85rem; letter-spacing: 0.32em; color: var(--nm-mint) !important; margin-bottom: 0.6rem; }
+.scrolly-view.is-hero .scrolly-kicker p { font-size: 0.85rem; letter-spacing: 0.32em; color: var(--sc-accent) !important; margin-bottom: 0.6rem; }
 .scrolly-view.is-hero :is(h1, h2, h3, h4, h5, h6) { display: block; margin: 0; padding: 0; border: 0; }
-.scrolly-view.is-hero :is(h1, h2, h3, h4, h5, h6):not(:is(h1, h2, h3, h4, h5, h6) ~ *) { font-weight: 700; font-size: clamp(2rem, 8cqi, 4.6rem); line-height: 1.05; color: #fff; }
-.scrolly-view.is-hero :is(h1, h2, h3, h4, h5, h6) ~ :is(h1, h2, h3, h4, h5, h6) { font-weight: 500; font-size: 1.15rem; color: var(--nm-lilac); margin: 0.9rem 0 0.3rem; }
-.scrolly-view.is-hero :is(h1, h2, h3, h4, h5, h6) em { font-style: normal; background: linear-gradient(90deg, var(--nm-salmon), var(--nm-mint)); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.scrolly-view.is-hero :is(h1, h2, h3, h4, h5, h6):not(:is(h1, h2, h3, h4, h5, h6) ~ *) { font-weight: 700; font-size: clamp(2rem, 8cqi, 4.6rem); line-height: 1.05; color: var(--sc-title); }
+.scrolly-view.is-hero :is(h1, h2, h3, h4, h5, h6) ~ :is(h1, h2, h3, h4, h5, h6) { font-weight: 500; font-size: 1.15rem; color: var(--sc-link); margin: 0.9rem 0 0.3rem; }
+.scrolly-view.is-hero :is(h1, h2, h3, h4, h5, h6) em { font-style: normal; background: linear-gradient(90deg, var(--sc-warm), var(--sc-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
 .scrolly-view.is-hero p { margin: 0.5rem 0; font-size: 0.98rem; line-height: 1.5; max-width: 52rem; }
-.scrolly-view.is-hero p strong { color: var(--nm-salmon); }
+.scrolly-view.is-hero p strong { color: var(--sc-warm-text); }
 
 /* ---- narrow sections: stage on top, cards below it ----
    Keep the 760px breakpoint in sync with WIDE in engine.mjs. */

package/dist/build-info.json

@@ -1,4 +1,4 @@
 {
   "mode": "release",
-  "version": "0.1.2"
+  "version": "0.1.3"
 }

package/dist/nma.mjs

@@ -1,4 +1,4 @@
-// @neuromatch/course-kit 0.1.2 MyST plugin (release build). GENERATED, do not edit.
+// @neuromatch/course-kit 0.1.3 MyST plugin (release build). GENERATED, do not edit.
 import { createRequire as __nmaCreateRequire } from 'node:module';
 const require = __nmaCreateRequire(import.meta.url);
 var __create = Object.create;
@@ -7645,7 +7645,7 @@ import { readFileSync as readFileSync2 } from "node:fs";
 // src/shared/assets.mjs
 import { dirname, join as join2, relative as relative2, sep as sep2 } from "node:path";
 import { fileURLToPath } from "node:url";
-var BASE = true ? "https://cdn.jsdelivr.net/npm/@neuromatch/course-kit@0.1.2/dist/assets/" : null;
+var BASE = true ? "https://cdn.jsdelivr.net/npm/@neuromatch/course-kit@0.1.3/dist/assets/" : null;
 var BUNDLED = true;
 function assetsDir() {
   const here = dirname(fileURLToPath(import.meta.url));

package/dist/nma.yml

@@ -1,4 +1,4 @@
-# Course kit 0.1.2. Courses add this file with
+# Course kit 0.1.3. Courses add this file with
 #   extend: https://cdn.jsdelivr.net/npm/@neuromatch/course-kit@0.1/dist/nma.yml
 # and `nma-kit prepare-site` pins that URL to the CLI's exact version on CI.
 version: 1
@@ -6,4 +6,4 @@ project:
   jupyter:
     lite: true
   plugins:
-    - https://cdn.jsdelivr.net/npm/@neuromatch/course-kit@0.1.2/dist/nma.mjs
+    - https://cdn.jsdelivr.net/npm/@neuromatch/course-kit@0.1.3/dist/nma.mjs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuromatch/course-kit",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Neuromatch course kit: MyST plugins for Neuromatch courses",
   "repository": {
     "type": "git",