@classytic/labs 0.6.0 → 0.7.0

package/styles/domains/parts/ict.css

@@ -264,3 +264,238 @@
   font-size: var(--lab-t-eyebrow);
   text-align: center;
 }
+
+/* mini-sheet (domains/ict/mini-sheet): a small spreadsheet; the cells are the controls */
+.mini-sheet {
+  display: grid;
+  gap: var(--lab-sp-8);
+  min-width: 0;
+}
+.mini-sheet-bar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--lab-sp-6);
+}
+.mini-sheet-name {
+  min-width: 3.2em;
+  padding: var(--lab-sp-4) var(--lab-sp-8);
+  border: 1px solid var(--lab-border-strong);
+  border-radius: var(--lab-r-sm);
+  background: var(--lab-surface);
+  font-family: var(--fig-font-data, ui-monospace, monospace);
+  font-weight: var(--lab-w-semibold);
+  text-align: center;
+}
+.mini-sheet-bar .lab-input-entry {
+  min-width: 0;
+}
+.mini-sheet-bar .lab-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 44px;
+  padding: 0 var(--lab-sp-8);
+  border: 1px solid var(--lab-border-strong);
+  border-radius: var(--lab-r-sm);
+  background: var(--lab-sunken);
+  color: var(--lab-fg);
+  font-family: var(--fig-font-data, ui-monospace, monospace);
+  font-size: 16px; /* 16px keeps a phone from zooming in on focus */
+}
+.mini-sheet-bar .lab-input:focus-visible {
+  outline: 2px solid var(--lab-accent);
+  outline-offset: 1px;
+}
+.mini-sheet-syntax,
+.mini-sheet-hint {
+  margin: 0;
+  color: var(--lab-muted);
+  font-size: var(--lab-t-sm);
+}
+
+.mini-sheet-key {
+  flex: none;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0 var(--lab-sp-6);
+  border: 1px solid var(--lab-border-strong);
+  border-radius: var(--lab-r-sm);
+  background: var(--lab-surface);
+  box-shadow: var(--lab-elevation-control);
+  color: var(--lab-fg);
+  font-family: var(--fig-font-data, ui-monospace, monospace);
+  font-size: var(--lab-t-sm);
+  font-weight: var(--lab-w-semibold);
+  cursor: pointer;
+  transition: transform var(--lab-dur-fast) var(--lab-ease);
+}
+.mini-sheet-key:active {
+  transform: translateY(1px);
+  box-shadow: var(--lab-elevation-pressed);
+}
+.mini-sheet-key:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.mini-sheet-scroll {
+  min-width: 0;
+  overflow-x: auto;
+  border: 1px solid var(--lab-border);
+  border-radius: var(--lab-r-sm);
+}
+.mini-sheet-grid {
+  border-collapse: collapse;
+  width: 100%;
+  font-family: var(--fig-font-data, ui-monospace, monospace);
+  font-size: 14px;
+}
+.mini-sheet-grid th {
+  min-width: 28px;
+  padding: var(--lab-sp-2) var(--lab-sp-4);
+  background: var(--lab-sunken);
+  color: var(--lab-muted);
+  font-weight: var(--lab-w-semibold);
+  font-size: var(--lab-t-sm);
+}
+.mini-sheet-grid td {
+  padding: 0;
+  border: 1px solid var(--lab-border);
+}
+.mini-sheet-cell {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 64px;
+  height: 44px;
+  padding: 0 var(--lab-sp-6);
+  border: 2px solid transparent;
+  background: transparent;
+  color: var(--lab-fg);
+  font: inherit;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.mini-sheet-cell[data-number] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.mini-sheet-cell[data-selected] {
+  border-color: var(--lab-accent);
+  background: color-mix(in oklab, var(--lab-accent) 10%, transparent);
+}
+.mini-sheet-cell[data-error] {
+  color: var(--lab-danger, #c2410c);
+}
+.mini-sheet-cell[data-task="todo"] {
+  background: color-mix(in oklab, var(--lab-warn, #d97706) 10%, transparent);
+}
+.mini-sheet-cell[data-task="done"] {
+  background: color-mix(in oklab, var(--lab-good, #16a34a) 14%, transparent);
+}
+/* the cells a formula reads, in Excel's way: one colour per reference */
+.mini-sheet-cell[data-read="0"] {
+  border-color: #2f6fe4;
+  border-style: dashed;
+}
+.mini-sheet-cell[data-read="1"] {
+  border-color: #c2410c;
+  border-style: dashed;
+}
+.mini-sheet-cell[data-read="2"] {
+  border-color: #7c3aed;
+  border-style: dashed;
+}
+.mini-sheet-cell[data-read="3"] {
+  border-color: #059669;
+  border-style: dashed;
+}
+.mini-sheet-cell[data-read="4"] {
+  border-color: #b45309;
+  border-style: dashed;
+}
+.mini-sheet-grid[data-pointing] .mini-sheet-cell:not([data-selected]):hover {
+  background: color-mix(in oklab, var(--lab-accent) 8%, transparent);
+}
+.mini-sheet-cell:focus-visible {
+  outline: 2px solid var(--lab-focus-ring, var(--lab-accent));
+  outline-offset: -3px;
+}
+
+.mini-sheet-tasks {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.mini-sheet-tasks button {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--lab-sp-8);
+  width: 100%;
+  min-height: 44px;
+  padding: var(--lab-sp-2) var(--lab-sp-6);
+  border: 0;
+  border-radius: var(--lab-r-sm);
+  background: transparent;
+  color: var(--lab-fg);
+  font: inherit;
+  font-size: var(--lab-t-sm);
+  text-align: left;
+  cursor: pointer;
+}
+.mini-sheet-tasks button[data-current] {
+  background: color-mix(in oklab, var(--lab-accent) 10%, transparent);
+}
+
+.mini-sheet-task-cell {
+  font-family: var(--fig-font-data, ui-monospace, monospace);
+  font-weight: var(--lab-w-semibold);
+}
+.mini-sheet-task-state {
+  color: var(--lab-good, #16a34a);
+  font-weight: var(--lab-w-semibold);
+}
+
+/* one row of keys that scrolls sideways, like a phone keyboard's symbol strip */
+.mini-sheet-keys {
+  display: flex;
+  gap: var(--lab-sp-4);
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding-bottom: 2px;
+}
+.mini-sheet-keys::-webkit-scrollbar {
+  display: none;
+}
+.mini-sheet-corner {
+  padding: 0 !important;
+}
+.mini-sheet-toggle {
+  width: 100%;
+  min-width: 44px;
+  min-height: 44px;
+  border: 0;
+  border-radius: var(--lab-r-sm);
+  background: transparent;
+  color: var(--lab-muted);
+  font-family: var(--fig-font-data, ui-monospace, monospace);
+  font-size: var(--lab-t-sm);
+  font-style: italic;
+  cursor: pointer;
+}
+.mini-sheet-toggle[aria-pressed="true"] {
+  background: color-mix(in oklab, var(--lab-accent) 18%, transparent);
+  color: var(--lab-fg);
+}
+.mini-sheet-tick {
+  margin-inline-start: var(--lab-sp-4);
+  color: var(--lab-good, #16a34a);
+  font-size: 0.8em;
+}

package/styles/domains/parts/math-1.css

@@ -51,6 +51,15 @@
   flex: 0 0 auto;
   max-width: none;
 }
+/* Formulae keep their natural width and local scroll; explanatory prose is a reading column. */
+.math-equation-detail > :is(p, ul, ol) {
+  flex: 1 1 100%;
+  min-width: 0;
+  max-width: 100%;
+  margin-block: 0;
+  white-space: normal;
+  overflow-wrap: break-word;
+}
 .math-limit-table {
   display: grid;
   grid-template-columns: minmax(2.5rem, auto) 1fr 1fr;
@@ -129,32 +138,81 @@
 .lab-input-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 }
+/*
+ * The reading card (a derivation with nothing to answer): a quiet surface set apart from the prose
+ * by real space, its title, the lines, and one small "Next step" under the last line. No full-width
+ * button: in a lesson that button means "you answered".
+ */
+.math-derivation-card {
+  display: grid;
+  gap: var(--lab-sp-12);
+  margin: var(--lab-sp-24) 0;
+  padding: var(--lab-sp-16);
+  border: 1px solid color-mix(in oklab, var(--foreground, currentColor) 12%, transparent);
+  border-radius: var(--lab-r-lg);
+  background: var(--lab-surface);
+}
+.math-derivation-title {
+  margin: 0;
+  font-size: var(--lab-t-sm);
+  font-weight: 700;
+}
 /* The question the working answers, read first. */
 .math-derivation-stem {
   margin: 0 0 var(--lab-sp-12);
   font-size: var(--lab-t-sm);
   font-weight: 600;
 }
+.math-derivation-card .math-derivation-stem {
+  margin: 0;
+  font-weight: 500;
+}
 .math-derivation-list {
   display: flex;
   flex-direction: column;
-  gap: var(--lab-sp-10);
+  gap: var(--lab-sp-2);
   margin: 0;
   padding: 0;
   list-style: none;
 }
+/* The line, then its reason on its own row under it: one unbroken line of maths on a phone. */
 .math-derivation-step {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: 1.25rem minmax(0, 1fr);
   align-items: baseline;
-  gap: var(--lab-sp-4) var(--lab-sp-16);
-  padding: var(--lab-sp-8) var(--lab-sp-12);
+  gap: var(--lab-sp-2) var(--lab-sp-8);
+  padding: var(--lab-sp-6) var(--lab-sp-10);
+  border: 1px solid transparent;
   border-radius: var(--lab-r-sm);
-  transition: background var(--lab-dur-fast);
+  transition:
+    background var(--lab-dur-fast),
+    border-color var(--lab-dur-fast);
 }
+/* The line just revealed: a quiet tint, and it arrives rather than appears. */
 .math-derivation-step[data-current="true"] {
+  background: color-mix(in oklab, var(--primary, var(--stage-accent)) 9%, transparent);
+  animation: math-derivation-arrive 180ms ease-out;
+}
+/* The line to remember (authored `highlight`): it stays marked after the working moves on. */
+.math-derivation-step[data-highlight="true"] {
+  border-color: color-mix(in oklab, var(--primary, var(--stage-accent)) 45%, transparent);
   background: color-mix(in oklab, var(--primary, var(--stage-accent)) 12%, transparent);
 }
+.math-derivation-step[data-highlight="true"] .math-derivation-index {
+  opacity: 1;
+  color: var(--primary, var(--stage-accent));
+}
+@keyframes math-derivation-arrive {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .math-derivation-step[data-current="true"] {
+    animation: none;
+  }
+}
 .math-derivation-index {
   opacity: 0.55;
   font:
@@ -163,16 +221,87 @@
     Menlo,
     monospace;
 }
+/* A scroll box clips at its padding edge and a stacked fraction is taller than the line box, so the
+   padding keeps the foot of a denominator inside it. */
 .math-derivation-equation {
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-block: 0.3em;
   font-size: var(--lab-t-sm);
 }
+/* Readable, not a caption: Bangla at 12px muted was hard to read on a phone. */
 .math-derivation-note {
+  grid-column: 2;
+  color: color-mix(in oklab, var(--foreground, currentColor) 72%, transparent);
+  font-size: var(--lab-t-sm);
+  line-height: 1.55;
+}
+/* One unbroken line of maths: KaTeX would otherwise wrap between its pieces on a phone; the
+   equation box scrolls instead, and the reason wraps on its own row underneath. */
+.math-derivation-equation .katex {
+  white-space: nowrap;
+}
+/*
+ * What changed on the newest line (authored `focus` or `\hl{...}`): a highlighter tint in the
+ * pinned science glow, so it reads the same on light and dark paper, plus an underline and a
+ * heavier ink so it survives greyscale. The underline is a border, which forced-colors keeps.
+ */
+.math-derivation-focus {
+  --math-derivation-focus: var(--sci-glow, oklch(0.86 0.15 85));
+  margin-inline: -0.08em;
+  padding-inline: 0.08em;
+  border-bottom: 2px solid
+    color-mix(in oklab, var(--math-derivation-focus) 70%, oklch(0.45 0.12 60));
+  border-radius: 0.2em 0.2em 0 0;
+  background: color-mix(in oklab, var(--math-derivation-focus) 46%, transparent);
+  font-weight: 700;
+}
+@media (forced-colors: active) {
+  .math-derivation-focus {
+    border-bottom-color: Highlight;
+  }
+}
+/* The line the learner is choosing: an empty slot, dashed, so the list says what is missing. */
+.math-derivation-slot {
+  width: fit-content;
+  min-width: 4rem;
+  padding-inline: var(--lab-sp-10);
+  border: 1px dashed color-mix(in oklab, var(--foreground, currentColor) 32%, transparent);
+  border-radius: var(--lab-r-sm);
   color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-eyebrow);
+  text-align: center;
 }
-/* A middle dot, not an em-dash: the dash read as a pause in a sentence that is not there. */
-.math-derivation-note::before {
-  content: "· ";
+/* The slot's name for screen readers, hidden on screen (the dashed box says it visually). */
+.math-derivation-slot-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+/* No steps authored: a neutral line, never placeholder maths. */
+.math-derivation-empty {
+  margin: 0;
+  color: var(--muted-foreground, var(--stage-muted));
+  font-size: var(--lab-t-sm);
+}
+/* Candidate lines are long maths: one per row, full width, on a phone. */
+@media (max-width: 30rem) {
+  .math-derivation-activity .lab-shell-choices {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+.math-derivation-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--lab-sp-8) var(--lab-sp-14);
+}
+.math-derivation-count {
+  color: var(--muted-foreground, var(--stage-muted));
+  font-size: var(--lab-t-eyebrow);
 }
 /* The withheld last line: a dashed box says "not finished yet" without shouting. */
 /* The actual question, above the generic instruction below it. Without this the box asked a

package/styles/domains/parts/math-7.css

@@ -621,3 +621,38 @@
     animation: none;
   }
 }
+
+/* Keep exact fractions and native inputs readable; the coefficient grid scrolls as one unit. */
+.math-poly-long-scroll {
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  border: 1px solid var(--lab-border);
+  border-radius: var(--lab-r-sm);
+}
+.math-poly-long-tableau {
+  width: max-content;
+  min-width: 100%;
+  font-size: var(--lab-t-body);
+}
+.math-poly-long-tableau th {
+  border-inline-end: 0;
+  color: var(--lab-muted);
+  font-size: var(--lab-t-sm);
+  font-weight: 500;
+  white-space: nowrap;
+}
+.math-poly-long-tableau th[scope="row"] {
+  text-align: start;
+}
+.math-poly-long-tableau tr[data-row="quotient"] :is(th, td) {
+  padding-block-start: var(--lab-sp-16);
+  color: var(--lab-accent);
+}
+.math-poly-long-tableau tr[data-row="results"] :is(th, td) {
+  border-block-start: 1px solid var(--lab-border-strong);
+}
+.math-poly-long-tableau .math-poly-cell {
+  min-height: var(--lab-target);
+}

package/styles/domains.css

@@ -58,6 +58,9 @@
 @import "./domains/parts/commerce-books.css";
 @import "./domains/parts/commerce-entry-practice.css";
 @import "./domains/parts/commerce-ledger-practice.css";
+@import "./domains/parts/commerce-statements.css";
+@import "./domains/parts/commerce-household.css";
+@import "./domains/parts/commerce-costing.css";
 @import "./domains/parts/exam-paper.css";
 @import "./domains/parts/exam-layout.css";
 @import "./domains/parts/exam-interactions.css";

package/styles/figure.css

@@ -41,10 +41,13 @@
   --fig-outline: color-mix(in oklab, var(--stage-fg) 55%, transparent);
   --fig-glass: color-mix(in oklab, var(--stage-fg) 26%, transparent);
   --fig-glass-fill: color-mix(in oklab, var(--stage-fg) 4%, transparent);
-  --fig-metal: var(--stage-metal);
+  /* the one steel grey: the scene's, not a second figure grey (scene.css) */
+  --fig-metal: var(--scene-steel);
   --fig-wood: oklch(0.61 0.105 67);
-  --fig-sheen: var(--stage-sheen);
-  --fig-shadow: color-mix(in oklab, var(--stage-fg) 16%, transparent);
+  /* Light, not ink: the highlight and the shadow are the scene's pinned light tokens. A shadow
+     mixed from --stage-fg turned into a pale halo in dark mode, where the foreground is light. */
+  --fig-sheen: var(--scene-spec);
+  --fig-shadow: var(--scene-shadow);
   --fig-ground: color-mix(in oklab, var(--stage-fg) 9%, var(--stage-bg));
   --fig-surface: color-mix(in oklab, var(--stage-fg) 5%, var(--stage-bg));
   --fig-surface-strong: color-mix(in oklab, var(--stage-fg) 10%, var(--stage-bg));
@@ -54,13 +57,17 @@
   --fig-hue-1: var(--stage-accent);
   --fig-hue-2: var(--stage-accent-2);
   --fig-hue-3: var(--stage-good);
-  /* semantic tones, shared by every domain */
-  --fig-hot: var(--stage-danger);
-  --fig-cold: var(--stage-cat-5);
+  /* semantic tones, shared by every domain. Hot and cold are SCIENCE colours (scene.css
+     --sci-*), pinned in both themes, never the host's danger or chart colours. */
+  --fig-hot: var(--sci-hot);
+  --fig-cold: var(--sci-cold);
   --fig-good: var(--stage-good);
   --fig-warn: var(--stage-warn);
   --fig-danger: var(--stage-danger);
   --fig-liquid: var(--stage-liquid);
+  /* the data face: an instrument's value (kit/figure/reading.tsx). Monospace, so a changing value
+     never shifts its unit; the width table assumes 0.6 em per glyph (text-metrics.ts) */
+  --fig-font-data: ui-monospace, Menlo, Consolas, monospace;
   /* ── Hardware, the one family that must NOT invert ──────────────────────────
      Every token above derives from --stage-fg / --stage-bg, so all of them swap
      with the theme. That is exactly right for a DIAGRAM: ink on paper, dark on
@@ -161,12 +168,21 @@
    that intentionally crosses a stroke or a busy field. */
 .fig-text {
   fill: var(--fig-ink);
-  font-size: calc(var(--fig-t, var(--lab-t-eyebrow)) * var(--fig-k));
+  font-size: calc(var(--fig-t, var(--lab-t-eyebrow)) * var(--fig-k, 1));
   font-weight: var(--lab-w-medium);
   line-height: var(--lab-lh-tight);
   stroke: none;
   pointer-events: none;
 }
+/* FigTex/PlaneTex divide their semantic size by KaTeX's documented 1.21em scale.
+   Establish that scale inside apparatus, even when host prose overrides .katex
+   with an important phone text size. Ordinary lesson mathematics remains host-owned. */
+@layer utilities {
+  .lab-figure .fig-tex .katex,
+  .lab-activity .fig-tex .katex {
+    font-size: 1.21em !important;
+  }
+}
 .fig-text[data-halo="true"] {
   paint-order: stroke;
   stroke: var(--fig-paper);
@@ -232,10 +248,16 @@
 .fig-text[data-tone="inverse"] {
   fill: white;
 }
-/* Figure tags use pale semantic fills and adaptive ink; they stay readable in
-   both themes without the chalky white-on-colour treatment used by badges. */
-.fig-text[data-weight="bold"],
-.fig-text.fig-tag-text {
+/* A reading's value in the data face (kit/figure/reading.tsx); figures are tabular figure-wide. */
+/* Program text in the data face too, spaces kept: Python's indentation is meaning (domains/ict/code-trace). */
+.fig-text .fig-reading-value,
+.fig-text.fig-code {
+  font-family: var(--fig-font-data);
+}
+.fig-text.fig-code {
+  white-space: pre;
+}
+.fig-text[data-weight="bold"] {
   font-weight: var(--lab-w-bold);
 }
 /* Molecules are drawn in a unit square and then scaled by their host. Their
@@ -247,9 +269,7 @@
   cursor: pointer;
   outline: none;
   touch-action: manipulation;
-  transition:
-    filter var(--lab-dur-fast) var(--lab-ease),
-    opacity var(--lab-dur-fast) var(--lab-ease);
+  transition: filter var(--lab-dur-fast) var(--lab-ease);
 }
 .fig-action:not([aria-disabled="true"]):hover,
 .fig-action:focus-visible,
@@ -259,10 +279,6 @@
 .fig-action[aria-disabled="true"] {
   cursor: default;
 }
-.fig-action:focus-visible {
-  outline: var(--lab-focus-ring);
-  outline-offset: var(--lab-focus-offset);
-}
 /* Motion: figure primitives animate geometry through CSS transitions so a
    changed value glides instead of jumping; reduced motion snaps. */
 .fig-ease {
@@ -296,14 +312,32 @@
   font-size: var(--lab-t-eyebrow);
   line-height: var(--lab-lh-ui);
 }
+/* Hardware in dark mode: lifted, never inverted. A charcoal body on a near-black
+   page loses its silhouette, so the body and its edge gain a little lightness while
+   keeping their order (edge darker than body, cavity darker than both). Both theme
+   signals are covered, the OS preference and an explicit choice, matching the
+   illustration rules below. */
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]):not(.light)
-    .lab-illustration
-    > img[data-scheme="light"]:not(:only-of-type) {
-    display: none;
-  }
-  :root:not([data-theme="light"]):not(.light) .lab-illustration > img[data-scheme="dark"] {
-    display: block;
+  :root:not([data-theme="light"]):not(.light) {
+    & .lab-illustration > img[data-scheme="light"]:not(:only-of-type) {
+      display: none;
+    }
+    & .lab-illustration > img[data-scheme="dark"] {
+      display: block;
+    }
+    & :is(.lab-figure, .stage-root, .lab-activity) {
+      --fig-device: oklch(0.46 0.012 260);
+      --fig-device-soft: oklch(0.56 0.012 260);
+      --fig-device-edge: oklch(0.34 0.012 260);
+      --fig-cavity: oklch(0.16 0.01 260);
+      --fig-copper: oklch(0.68 0.12 58);
+
+      --fig-solid-white: oklch(0.9 0.006 260);
+      --fig-solid-cream: oklch(0.87 0.05 88);
+      --fig-solid-yellow: oklch(0.81 0.15 96);
+      --fig-solid-purple: oklch(0.56 0.21 322);
+      --fig-solid-dark: oklch(0.46 0.016 285);
+    }
   }
 }
 :root:is([data-theme="dark"], .dark)
@@ -314,28 +348,7 @@
 :root:is([data-theme="dark"], .dark) .lab-illustration > img[data-scheme="dark"] {
   display: block;
 }
-/* Hardware in dark mode: lifted, never inverted. A charcoal body on a near-black
-   page loses its silhouette, so the body and its edge gain a little lightness while
-   keeping their order (edge darker than body, cavity darker than both). Both theme
-   signals are covered, the OS preference and an explicit choice, matching the
-   illustration rules below. */
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]):not(.light) :is(.lab-figure, .stage-root) {
-    --fig-device: oklch(0.46 0.012 260);
-    --fig-device-soft: oklch(0.56 0.012 260);
-    --fig-device-edge: oklch(0.34 0.012 260);
-    --fig-cavity: oklch(0.16 0.01 260);
-    --fig-copper: oklch(0.68 0.12 58);
-    /* Dimmed a touch so a white solid is not the brightest thing on a dark page, but still
-       unmistakably pale. The ORDER white > cream > yellow is what carries the diagnosis. */
-    --fig-solid-white: oklch(0.9 0.006 260);
-    --fig-solid-cream: oklch(0.87 0.05 88);
-    --fig-solid-yellow: oklch(0.81 0.15 96);
-    --fig-solid-purple: oklch(0.56 0.21 322);
-    --fig-solid-dark: oklch(0.46 0.016 285);
-  }
-}
-:root:is([data-theme="dark"], .dark) :is(.lab-figure, .stage-root) {
+:root:is([data-theme="dark"], .dark) :is(.lab-figure, .stage-root, .lab-activity) {
   --fig-device: oklch(0.46 0.012 260);
   --fig-device-soft: oklch(0.56 0.012 260);
   --fig-device-edge: oklch(0.34 0.012 260);
@@ -345,8 +358,11 @@
   --fig-solid-cream: oklch(0.87 0.05 88);
   --fig-solid-yellow: oklch(0.81 0.15 96);
   --fig-solid-purple: oklch(0.56 0.21 322);
+  --fig-solid-dark: oklch(0.46 0.016 285);
 }
-/* Explanatory state motion: short, composited, and local to the newest datum. */
+/* More contrast and forced colours for the figure roles live in scene.css (Contrast modes),
+   which core.css always loads, so this sheet stays inside its transfer budget.
+   Explanatory state motion: short, composited, and local to the newest datum. */
 .lab-figure-arrive,
 .lab-figure-activate {
   transform-box: fill-box;

package/styles/runtime.css

@@ -2,9 +2,11 @@
  * @classytic/labs/styles/runtime.css: every lab's RUNTIME styles (`.lab-*`, `.physics-*`, every
  * subject), styled against the host's shadcn tokens so labs adopt the app theme.
  *
- * Plain CSS: it needs no Tailwind pass, so a host can import it from the code that renders labs
- * rather than from its global stylesheet, and pages without labs never download it. Pair it with
- * `@classytic/labs/tailwind.css` in the host's Tailwind entry for the authoring UI's utilities.
+ * This file is plain CSS that needs no Tailwind pass itself, so a host can import it from the code
+ * that renders labs rather than from its global stylesheet, and pages without labs never download
+ * it. The lab markup ALSO uses Tailwind utilities (the shell, the kit's controls, many labs), so
+ * the host's Tailwind entry must import `@classytic/labs/tailwind.css` (the scan) as well; without
+ * it labs render unstyled.
  *
  * A host that shows one subject can go finer: `core.css` + `figure.css` + one
  * `domains/<subject>.css`.