@neuromatch/course-kit 0.0.0-stage → 0.1.1

package/dist/assets/scrolly/runnable.mjs

@@ -0,0 +1,353 @@
+// Runnable Python panel for scrolly pages (emitted by scrolly.mjs for each
+// visible code cell). One Pyodide runtime per page, shared on window.NMA_PY,
+// started by the first Run (or the "Enable Python" pill in engine.mjs).
+//
+// Notebook semantics: running cell k first runs every earlier cell that
+// hasn't run yet, in order, in one namespace (cells come from engine.mjs via
+// window.NMA_SCROLLY). An earlier exercise that still has an uncommented
+// `raise NotImplementedError` runs its {nma-solution} code instead, so the
+// cells after it work. Same "hidden, not secret" rule as the notebooks.
+//
+// Model: {code, mode: edit|collapsed|output, params, index, exercise,
+//         fallback, initial: {stdout, images, error} | null}
+
+const DEFAULT_PYODIDE_URL = 'https://cdn.jsdelivr.net/pyodide/v314.0.7/full/';
+const UNFINISHED_RE = /^[ \t]*raise NotImplementedError/m;
+const FALLBACK_NOTE = 'An earlier exercise is not finished yet, so its reference solution ran.';
+
+// ---------------------------------------------------------------- pure helpers (unit-tested)
+
+export const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+/** Minimal Python syntax highlighting as HTML. */
+export function highlight(code) {
+  const re =
+    /(#.*$)|("""[\s\S]*?"""|'''[\s\S]*?'''|"(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*')|(\b(?:def|return|import|for|in|as|from|if|else|elif|while|with|lambda|not|and|or|None|True|False|class|try|except|finally|raise|yield|pass|break|continue|global|is|async|await)\b)|(\.\.\.)|(\b\d+(?:\.\d+)?(?:e[-+]?\d+)?\b)|(\b[A-Za-z_]\w*(?=\())/gm;
+  let out = '';
+  let last = 0;
+  for (const m of code.matchAll(re)) {
+    out += esc(code.slice(last, m.index));
+    const [all, c, s, k, b, n] = m;
+    const cls = c ? 'c' : s ? 's' : k ? 'k' : b ? 'b' : n ? 'n' : 'f';
+    out += `<i class="tk-${cls}">${esc(all)}</i>`;
+    last = m.index + all.length;
+  }
+  return out + esc(code.slice(last));
+}
+
+/** A JS value as a Python literal. */
+export function pyLiteral(v) {
+  if (v === true) return 'True';
+  if (v === false) return 'False';
+  if (v === null || v === undefined) return 'None';
+  if (typeof v === 'number') return Number.isFinite(v) ? String(v) : 'float("nan")';
+  return JSON.stringify(String(v));
+}
+
+/**
+ * Rewrite the `name = ...  # @param ...` lines of `code` with the current
+ * control values, keeping the comment. Other lines are untouched.
+ */
+export function applyParams(code, values) {
+  return code
+    .split('\n')
+    .map((line) => {
+      const m = line.match(/^([A-Za-z_]\w*)(\s*=\s*)(.+?)(\s*#\s*@param\b.*)$/);
+      if (!m || !(m[1] in values)) return line;
+      return `${m[1]}${m[2]}${pyLiteral(values[m[1]])}${m[4]}`;
+    })
+    .join('\n');
+}
+
+/** The code to run for an earlier cell: the reader's edit, or the solution if unfinished. */
+export function codeForEarlierCell(cell, edits) {
+  const code = edits[cell.index] ?? cell.code;
+  if (UNFINISHED_RE.test(code) && cell.fallback) return { code: cell.fallback, fallback: true };
+  return { code, fallback: false };
+}
+
+/** Value shown for a slider (avoid 0.30000000000000004). */
+export function formatValue(v) {
+  return typeof v === 'number' ? String(Number(v.toPrecision(10))) : String(v);
+}
+
+// ---------------------------------------------------------------- shared runtime
+
+const PY_SETUP = `
+import os, sys
+os.environ["MPLBACKEND"] = "AGG"
+
+async def _nma_exec(src):
+    from pyodide.code import eval_code_async
+    result = await eval_code_async(src, globals(), return_mode="last_expr")
+    if result is not None:
+        print(repr(result))
+
+def _nma_figures():
+    if "matplotlib.pyplot" not in sys.modules:
+        return []
+    import base64, io, warnings
+    import matplotlib.pyplot as plt
+    out = []
+    for n in plt.get_fignums():
+        buf = io.BytesIO()
+        with warnings.catch_warnings():
+            warnings.simplefilter("ignore")
+            plt.figure(n).savefig(buf, format="png", bbox_inches="tight")
+        out.append(base64.b64encode(buf.getvalue()).decode())
+    plt.close("all")
+    return out
+`;
+
+function createRuntime() {
+  return {
+    state: 'idle', // idle | loading | ready | error
+    msg: '',
+    py: null,
+    promise: null,
+    done: new Set(), // indexes of cells that ran successfully
+    queue: Promise.resolve(),
+    set(state, msg = '') {
+      this.state = state;
+      this.msg = msg;
+      window.dispatchEvent(new CustomEvent('nma-py', { detail: { state, msg } }));
+    },
+    ensure() {
+      if (this.promise) return this.promise;
+      this.promise = (async () => {
+        try {
+          const url = (window.NMA_SCROLLY && window.NMA_SCROLLY.pyodideUrl) || DEFAULT_PYODIDE_URL;
+          this.set('loading', 'Downloading Python (about 10 MB)…');
+          const { loadPyodide } = await import(/* webpackIgnore: true */ url + 'pyodide.mjs');
+          const py = await loadPyodide({ indexURL: url });
+          await py.runPythonAsync(PY_SETUP);
+          this.py = py;
+          this.set('ready', 'Python is running in your browser');
+          return py;
+        } catch (e) {
+          this.promise = null;
+          this.set('error', String((e && e.message) || e));
+          throw e;
+        }
+      })();
+      return this.promise;
+    },
+    async exec(code, onStatus) {
+      const py = this.py;
+      let out = '';
+      py.setStdout({ batched: (line) => (out += line + '\n') });
+      py.setStderr({ batched: (line) => (out += line + '\n') });
+      try {
+        onStatus && onStatus('Loading packages…');
+        await py.loadPackagesFromImports(code, { messageCallback: () => {}, errorCallback: () => {} });
+        onStatus && onStatus('Running…');
+        await py.globals.get('_nma_exec')(code);
+        const proxy = py.globals.get('_nma_figures')();
+        const images = proxy.toJs();
+        proxy.destroy();
+        return { stdout: out, images, error: null };
+      } catch (e) {
+        try {
+          py.globals.get('_nma_figures')().destroy();
+        } catch {
+          // ignore
+        }
+        const lines = String((e && e.message) || e).trim().split('\n').filter(Boolean);
+        return { stdout: out, images: [], error: { summary: lines.at(-1) || 'Error', detail: lines.slice(-12).join('\n') } };
+      }
+    },
+    /** Run cell `index` with `code`, after any earlier cells that haven't run. Serialised. */
+    run(index, code, onStatus) {
+      const job = this.queue.then(async () => {
+        onStatus && onStatus(this.state === 'ready' ? 'Running…' : 'Starting Python…');
+        await this.ensure();
+        const page = window.NMA_SCROLLY || { cells: [], edits: {} };
+        let usedFallback = false;
+        for (const cell of page.cells) {
+          if (cell.index >= index || this.done.has(cell.index)) continue;
+          const earlier = codeForEarlierCell(cell, page.edits || {});
+          onStatus && onStatus(`Running earlier cell ${cell.index + 1}…`);
+          const res = await this.exec(earlier.code);
+          if (res.error) {
+            return {
+              stdout: '',
+              images: [],
+              error: { summary: `Earlier cell ${cell.index + 1} failed: ${res.error.summary}`, detail: res.error.detail },
+            };
+          }
+          usedFallback ||= earlier.fallback;
+          this.done.add(cell.index);
+        }
+        const res = await this.exec(code, onStatus);
+        if (!res.error) this.done.add(index);
+        if (usedFallback) res.note = FALLBACK_NOTE;
+        return res;
+      });
+      this.queue = job.catch(() => {});
+      return job;
+    },
+  };
+}
+
+const RT = typeof window !== 'undefined' ? (window.NMA_PY ||= createRuntime()) : null;
+
+// ---------------------------------------------------------------- the widget
+
+const LABELS = { edit: 'Python · editable', collapsed: 'Python · interactive', output: 'Output' };
+
+function render({ model, el }) {
+  const code0 = model.get('code') || '';
+  const mode = model.get('mode') || 'edit';
+  const params = model.get('params') || [];
+  const index = model.get('index') ?? 0;
+  const exercise = !!model.get('exercise');
+  const initial = model.get('initial');
+  const values0 = Object.fromEntries(params.map((p) => [p.name, p.value]));
+
+  const st = { code: code0, values: { ...values0 }, out: initial, note: '' };
+  const box = document.createElement('div');
+  box.className = `fl-codebox mode-${mode}`;
+  const controls = params
+    .map((p, i) =>
+      p.kind === 'slider'
+        ? `<label><span>${esc(p.name)}</span><input type="range" data-i="${i}" min="${p.min}" max="${p.max}" step="${p.step}" value="${p.value}" /><output>${esc(formatValue(p.value))}</output></label>`
+        : `<label><span>${esc(p.name)}</span><select data-i="${i}">${p.options
+            .map((o, k) => `<option value="${k}"${o === p.value ? ' selected' : ''}>${esc(pyLiteral(o))}</option>`)
+            .join('')}</select></label>`,
+    )
+    .join('');
+  const hasEditor = mode !== 'output';
+  box.innerHTML = `
+    ${hasEditor ? `<div class="fl-codehead"><span>${exercise ? 'Exercise · fill in, then run' : LABELS[mode]}</span><span>cell ${index + 1}</span></div>` : ''}
+    ${params.length ? `<div class="fl-params">${controls}</div>` : ''}
+    ${hasEditor ? '<div class="fl-editor"><pre class="fl-hl" aria-hidden="true"></pre><textarea class="fl-ta" spellcheck="false" wrap="off" aria-label="Python code"></textarea></div>' : ''}
+    <div class="fl-actions"><button type="button" class="fl-run">▶ Run</button>${hasEditor ? '<button type="button" class="fl-reset">Reset</button>' : ''}${mode === 'collapsed' ? '<button type="button" class="fl-toggle">Show code</button>' : ''}<span class="fl-status"></span></div>
+    <div class="fl-out"><p class="fl-note"></p><pre class="fl-stdout"></pre><div class="fl-err"></div><div class="fl-figs"></div><p class="fl-empty">Run to see output</p></div>`;
+  el.appendChild(box);
+
+  const $ = (s) => box.querySelector(s);
+  const ta = $('.fl-ta');
+  const hl = $('.fl-hl');
+  const status = $('.fl-status');
+  const runBtn = $('.fl-run');
+  let timer = 0;
+  let runId = 0;
+
+  if (mode === 'collapsed') {
+    box.classList.add('is-collapsed');
+    $('.fl-toggle').addEventListener('click', (e) => {
+      e.target.textContent = box.classList.toggle('is-collapsed') ? 'Show code' : 'Hide code';
+    });
+  }
+
+  const syncCode = () => {
+    if (hl) hl.innerHTML = highlight(st.code) + '\n';
+  };
+  const renderOut = () => {
+    const o = st.out;
+    $('.fl-note').textContent = st.note;
+    $('.fl-note').hidden = !st.note;
+    $('.fl-stdout').textContent = (o && o.stdout) || '';
+    $('.fl-stdout').hidden = !(o && o.stdout);
+    $('.fl-err').innerHTML =
+      o && o.error ? `<b>${esc(o.error.summary)}</b><details><summary>details</summary><pre>${esc(o.error.detail || '')}</pre></details>` : '';
+    $('.fl-figs').innerHTML = ((o && o.images) || [])
+      .map((b64) => `<img src="data:image/png;base64,${b64}" alt="Figure produced by the code" />`)
+      .join('');
+    const empty = !o || (!o.stdout && !o.error && !(o.images && o.images.length));
+    $('.fl-empty').hidden = !empty || exercise;
+    $('.fl-out').hidden = empty && exercise;
+  };
+  if (ta) ta.value = st.code;
+  syncCode();
+  renderOut();
+
+  async function run() {
+    const my = ++runId;
+    runBtn.disabled = true;
+    let res;
+    try {
+      res = await RT.run(index, applyParams(st.code, st.values), (msg) => {
+        if (my === runId) status.textContent = msg;
+      });
+    } catch (e) {
+      res = { stdout: '', images: [], error: { summary: 'Python could not start.', detail: String((e && e.message) || e) } };
+    }
+    if (my !== runId) return;
+    runBtn.disabled = false;
+    st.out = res;
+    st.note = res.note || '';
+    status.textContent = res.error ? '' : 'Done';
+    renderOut();
+  }
+
+  runBtn.addEventListener('click', run);
+  const reset = $('.fl-reset');
+  if (reset) {
+    reset.addEventListener('click', () => {
+      st.code = code0;
+      st.values = { ...values0 };
+      st.out = initial;
+      st.note = '';
+      delete window.NMA_SCROLLY?.edits?.[index];
+      box.querySelectorAll('[data-i]').forEach((input) => {
+        const p = params[Number(input.dataset.i)];
+        input.value = p.kind === 'slider' ? p.value : String(p.options.findIndex((o) => o === p.value));
+        if (p.kind === 'slider') input.nextElementSibling.textContent = formatValue(p.value);
+      });
+      ta.value = code0;
+      syncCode();
+      renderOut();
+      status.textContent = '';
+    });
+  }
+  if (ta) {
+    ta.addEventListener('input', () => {
+      st.code = ta.value;
+      if (window.NMA_SCROLLY) (window.NMA_SCROLLY.edits ||= {})[index] = ta.value;
+      syncCode();
+    });
+    ta.addEventListener('scroll', () => {
+      hl.scrollLeft = ta.scrollLeft;
+      hl.scrollTop = ta.scrollTop;
+    });
+    ta.addEventListener('keydown', (e) => {
+      if (e.key === 'Tab') {
+        e.preventDefault();
+        const a = ta.selectionStart;
+        ta.value = ta.value.slice(0, a) + '    ' + ta.value.slice(ta.selectionEnd);
+        ta.selectionStart = ta.selectionEnd = a + 4;
+        ta.dispatchEvent(new Event('input'));
+      } else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey || e.shiftKey)) {
+        e.preventDefault();
+        run();
+      }
+    });
+  }
+  box.querySelectorAll('[data-i]').forEach((input) => {
+    input.addEventListener('input', () => {
+      const p = params[Number(input.dataset.i)];
+      if (p.kind === 'slider') {
+        st.values[p.name] = Number(input.value);
+        input.nextElementSibling.textContent = formatValue(Number(input.value));
+      } else st.values[p.name] = p.options[Number(input.value)];
+      clearTimeout(timer);
+      if (RT.state === 'ready') timer = setTimeout(run, 180);
+      else status.textContent = 'Press Run to start Python; after that, changes update the output live.';
+    });
+  });
+  const onPy = (e) => {
+    if (runBtn.disabled && e.detail.state === 'loading') status.textContent = e.detail.msg;
+  };
+  window.addEventListener('nma-py', onPy);
+  el.getRootNode().host && (el.getRootNode().host._run = run); // test hook
+  RT.set(RT.state, RT.msg); // tell the engine a runtime exists
+
+  return () => {
+    clearTimeout(timer);
+    window.removeEventListener('nma-py', onPy);
+    box.remove();
+  };
+}
+
+export default { render };

package/dist/assets/scrolly/scrolly.css

@@ -0,0 +1,173 @@
+/* Scrollytelling page layout (plugins/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.
+
+   The section sits between the book theme's menus: the TOC sidebar
+   (col-margin-left, from 1280px) and the "On this page" outline
+   (col-margin-right, from 1024px). Its layout follows its own width
+   (container queries), not the viewport's: stage beside the cards when there
+   is room, stage above the cards otherwise. */
+
+/* ---- placement in the article grid ----
+   Default: between the menus. Each menu a page hides (frontmatter
+   `site: hide_outline: true`, recommended, or `hide_toc: true`) gives the
+   section its space. Scrolly pages keep the TOC: with hide_toc the theme
+   leaves it out of the page and readers can't navigate mid-story. */
+.article-grid > .scrolly-col { grid-column: page; container: scrolly / inline-size; }
+@media (min-width: 1024px) {
+  .article-grid > .scrolly-col { grid-column: page-start / body-end; }
+  .article-grid:not(:has(> .lg\:col-margin-right)) > .scrolly-col { grid-column: screen-inset; }
+}
+@media (min-width: 1280px) {
+  .article-grid > .scrolly-col { grid-column: body; }
+  .article-grid:not(:has(> .lg\:col-margin-right)) > .scrolly-col { grid-column: body-start / page-end; }
+  body:has(.myst-primary-sidebar.lg\:hidden) .article-grid > .scrolly-col { grid-column: page-start / body-end; }
+  body:has(.myst-primary-sidebar.lg\:hidden) .article-grid:not(:has(> .lg\:col-margin-right)) > .scrolly-col { grid-column: screen-inset; }
+}
+
+.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;
+  --nm-font-body: inherit;
+  --nm-font-head: inherit;
+  position: relative;
+  margin-block: 1.5rem;
+  color: var(--nm-text);
+  background: var(--nm-indigo-deep);
+  border-radius: 12px;
+  padding: 1rem;
+}
+.scrolly *, .scrolly *::before, .scrolly *::after { box-sizing: border-box; }
+.scrolly-engine { display: block; }
+.scrolly-stage { margin-bottom: 1.5rem; }
+.scrolly-view { margin: 0 0 1.5rem; }
+.scrolly-step { margin: 0 0 1.5rem; }
+.scrolly-step.is-hero { display: none; }
+
+/* JupyterLite is not used on scrolly pages: the panels run their own Python. */
+body:has(.scrolly) .myst-jp-nb-toolbar-power { display: none !important; }
+
+/* ---- pinned layout ----
+   Engine (HUD), stage and steps share one grid cell instead of overlapping
+   through negative margins. A sticky element stops when its margin box reaches
+   the end of its parent; with `margin-bottom: -height` that box is 0px tall,
+   so the stage would stick for a whole screen past the section and cover the
+   page footer (prev/next links). In the grid each one has its real height. */
+.scrolly[data-ready="true"] { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
+.scrolly[data-ready="true"] > :is(.scrolly-engine, .scrolly-stage, .scrolly-steps) { grid-area: 1 / 1; min-width: 0; }
+.scrolly[data-ready="true"] .scrolly-engine { align-self: start; position: sticky; top: var(--scrolly-top); height: 52px; z-index: 6; pointer-events: none; }
+.scrolly[data-ready="true"] .scrolly-stage {
+  align-self: start;
+  position: sticky;
+  top: var(--scrolly-top);
+  height: calc(100vh - var(--scrolly-top));
+  margin: 0;
+  overflow: hidden;
+  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%);
+}
+.scrolly[data-ready="true"] .scrolly-view {
+  position: absolute;
+  inset: 52px 28px 28px 42%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: safe center;
+  gap: 14px;
+  overflow: auto;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s, visibility 0.2s;
+}
+.scrolly[data-ready="true"] .scrolly-view.is-active { opacity: 1; visibility: visible; }
+.scrolly[data-ready="true"] .scrolly-view.is-hero { left: 28px; }
+.scrolly[data-ready="true"] .scrolly-steps { position: relative; z-index: 1; pointer-events: none; }
+.scrolly[data-ready="true"] .scrolly-step { min-height: 90vh; width: 40%; display: flex; align-items: center; margin: 0; padding-left: max(20px, 3cqi); padding-right: 12px; }
+.scrolly[data-ready="true"] .scrolly-step.is-hero { display: block; width: 100%; min-height: 105vh; padding: 0; }
+
+/* ---- cards ---- */
+.scrolly-card {
+  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);
+  border-radius: 14px;
+  border-left: 6px solid var(--nm-salmon);
+  padding: 1.1rem 1.35rem 1.25rem;
+  box-shadow: 0 14px 40px rgba(8, 7, 30, 0.45);
+  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 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 .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; }
+
+/* ---- stage content ---- */
+.scrolly-view { color: var(--nm-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 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 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 .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 > 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 :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 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); }
+
+/* ---- narrow sections: stage on top, cards below it ----
+   Keep the 760px breakpoint in sync with WIDE in engine.mjs. */
+@container scrolly (max-width: 759.98px) {
+  .scrolly[data-ready="true"] .scrolly-stage { height: 55vh; }
+  .scrolly[data-ready="true"] .scrolly-view, .scrolly[data-ready="true"] .scrolly-view.is-hero { inset: 46px 12px 10px 12px; }
+  .scrolly[data-ready="true"] .scrolly-step { width: 100%; min-height: 70vh; display: block; padding: calc(55vh + 12px) 12px 0; }
+  .scrolly[data-ready="true"] .scrolly-step + .scrolly-step { padding-top: 0; }
+  .scrolly[data-ready="true"] .scrolly-step.is-hero { min-height: 100vh; padding: 0; }
+  .scrolly[data-ready="true"] .scrolly-card { position: sticky; top: calc(var(--scrolly-top) + 55vh + 12px); max-height: calc(45vh - var(--scrolly-top) - 24px); overflow: auto; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .scrolly-view, .scrolly-card { transition: none !important; }
+}

package/dist/build-info.json

@@ -0,0 +1,4 @@
+{
+  "mode": "release",
+  "version": "0.1.1"
+}