@classytic/labs 0.4.0 → 0.6.0

package/styles/core.css

@@ -1,4 +1,23 @@
-@source "./dist/**/*.mjs";
+/* Public base entry. Private parts retain their original cascade order.
+   Tokens stay here for tokens:export; imported rules declare no competing root tokens.
+   Authoring remains included until hosts explicitly load a separate authoring entry. */
+@import "./shell.css";
+@import "./scene.css";
+@import "./core/controls.css";
+@import "./core/interaction-scenes.css";
+@import "./core/rules.css";
+@import "./core/authoring.css";
+@import "./core/primitives.css";
+@import "./core/components.css";
+@import "./core/runtime.css";
+@import "./core/shared.css";
+@import "./core/figure-interaction.css";
+@import "./core/workbenches.css";
+@import "./core/algorithm-graph.css";
+
+/* No `@source` here: the Tailwind scan lives in `tailwind.css` at the package root. One written
+   here resolved to `styles/dist`, which does not exist, and would leak into `styles/runtime.css`
+   for hosts that load it outside their Tailwind entry. */
 
 :root {
   /* ── colour (semantic; host shadcn → calm fallback) ─────────────────────── */
@@ -7,13 +26,21 @@
   --lab-fg: var(--foreground, currentColor);
   --lab-muted: var(--muted-foreground, color-mix(in oklab, currentColor 55%, transparent));
   --lab-border: var(--border, color-mix(in oklab, currentColor 13%, transparent));
-  --lab-border-strong: var(--border, color-mix(in oklab, currentColor 22%, transparent));
+  --lab-border-strong: color-mix(in oklab, var(--lab-fg) 55%, var(--lab-surface));
   --lab-accent: var(--primary, oklch(0.55 0.16 262));
   --lab-accent-fg: var(--primary-foreground, oklch(1 0 0));
-  --lab-good: var(--success, oklch(0.58 0.15 152));
+  /* Existing success keys use white ink. Keep the solid colour safe for that ink in both themes. */
+  --lab-good: color-mix(in oklab, var(--success, oklch(0.58 0.15 152)) 75%, oklch(0 0 0));
+  --lab-on-good: oklch(1 0 0);
   --lab-warn: var(--warning, oklch(0.72 0.14 75));
   --lab-warn-fg: var(--warning-foreground, oklch(0.42 0.1 75));
   --lab-danger: var(--destructive, oklch(0.58 0.19 25));
+  /* Learning-role hues. Meaning stays stable across subjects; colour never carries meaning alone. */
+  --lab-concept: var(--info, oklch(0.55 0.16 262));
+  --lab-formula: var(--formula, oklch(0.56 0.17 302));
+  --lab-process: var(--process, oklch(0.57 0.13 205));
+  --lab-memory: var(--success, oklch(0.58 0.15 152));
+  --lab-exam: var(--warning, oklch(0.72 0.14 75));
   --lab-ring: var(--ring, var(--lab-accent));
 
   /* ── radius scale ───────────────────────────────────────────────────────── */
@@ -91,10 +118,20 @@
   --lab-good-soft: color-mix(in oklab, var(--lab-good) 14%, var(--lab-surface));
   --lab-good-ink: color-mix(in oklab, var(--lab-good) 80%, var(--lab-fg));
   --lab-warn-soft: color-mix(in oklab, var(--lab-warn) 16%, var(--lab-surface));
-  --lab-warn-ink: color-mix(in oklab, var(--lab-warn-fg) 85%, var(--lab-fg));
+  --lab-warn-ink: color-mix(in oklab, var(--lab-warn) 35%, var(--lab-fg));
   --lab-danger-soft: color-mix(in oklab, var(--lab-danger) 12%, var(--lab-surface));
   --lab-danger-ink: color-mix(in oklab, var(--lab-danger) 80%, var(--lab-fg));
+  --lab-concept-soft: color-mix(in oklab, var(--lab-concept) 10%, var(--lab-surface));
+  --lab-formula-soft: color-mix(in oklab, var(--lab-formula) 10%, var(--lab-surface));
+  --lab-process-soft: color-mix(in oklab, var(--lab-process) 10%, var(--lab-surface));
+  --lab-memory-soft: color-mix(in oklab, var(--lab-memory) 10%, var(--lab-surface));
+  --lab-exam-soft: color-mix(in oklab, var(--lab-exam) 13%, var(--lab-surface));
   --lab-hairline: color-mix(in oklab, var(--lab-border) 60%, transparent); /* row dividers */
+  /* Disabled action: a neutral step off the surface with faded ink, never the accent at partial
+     opacity. A dark theme's accent is light, so 48% of it over a dark card still read as a lit,
+     clickable button; built from surface and fg it reads "off" in both themes. */
+  --lab-disabled-bg: color-mix(in oklab, var(--lab-fg) 7%, var(--lab-surface));
+  --lab-disabled-fg: color-mix(in oklab, var(--lab-muted) 82%, var(--lab-surface));
 
   /* ── motion ──────────────────────────────────────────────────────────────────
      Three durations and three curves, and every animation in the package uses
@@ -134,6 +171,12 @@
   --lab-shadow-lg:
     0 4px 12px -4px color-mix(in oklab, var(--lab-ink) 14%, transparent),
     0 22px 46px -12px color-mix(in oklab, var(--lab-ink) 18%, transparent);
+  /* Controls stay flat; only floating overlays use elevation. */
+  --lab-elevation-control: none;
+  --lab-elevation-raised: none;
+  --lab-elevation-overlay: var(--lab-shadow-lg);
+  --lab-elevation-pressed: none;
+  --lab-elevation-selected: none;
 
   /* Legacy canvas tokens (widgets not yet migrated to stage). DEPRECATED. */
   --sciviz-stage: oklch(0.16 0.02 255);
@@ -146,3938 +189,3 @@
   --sciviz-text-dim: oklch(0.7 0.02 255);
   --sciviz-warn: oklch(0.82 0.16 85);
 }
-
-/* ── Shared interaction rules ─────────────────────────────────────────────────
-   Set once for the whole package. A component below adds to these only when it
-   has to (SVG geometry with no box to outline); it never restates them. */
-
-/* Focus: one ring for every keyboard focus under a lab root. */
-:is(.lab-activity, .lab-scene-studio) button {
-  min-block-size: var(--lab-target);
-  min-inline-size: var(--lab-target);
-}
-
-:is(.lab-activity, .lab-scene-studio)
-  :is(
-    button,
-    a[href],
-    input,
-    select,
-    textarea,
-    summary,
-    [role="button"],
-    [role="slider"],
-    [role="switch"],
-    [role="tab"],
-    [role="option"],
-    [role="radio"],
-    [tabindex]:not([tabindex="-1"])
-  ):focus-visible {
-  outline: var(--lab-focus-ring);
-  outline-offset: var(--lab-focus-offset);
-}
-
-/* Reduced motion: honoured at the root, not per animation. Drop the MOVEMENT, keep the feedback.
-   The preference is about vestibular discomfort from things travelling and scaling, not about
-   colour. Collapsing transition-duration to nothing also killed the tint that says an answer was
-   accepted and the fade that says a panel changed, so a learner who asks for less motion lost the
-   signals telling them the lab had responded at all. Transform and movement snap; colour, border
-   and opacity still cross-fade, quickly. Confetti goes outright: a still burst is just noise. */
-@media (prefers-reduced-motion: reduce) {
-  :is(.lab-activity, .lab-scene-studio) :is(*, *::before, *::after) {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-property: color, background-color, border-color, fill, stroke, opacity !important;
-    transition-duration: var(--lab-dur-fast) !important;
-    scroll-behavior: auto !important;
-  }
-  .lab-activity .lab-confetti {
-    display: none;
-  }
-  /* A figure's entrance becomes a fade rather than a scale: an opacity change is safe under this
-     query where a transform is not. It is stated HERE, with the rest of the policy, because a
-     sheet may not keep its own copy of this media query, and because a figure rendered outside
-     `.lab-activity` is not reached by the blanket rule above. */
-  :is(.lab-figure-arrive, .lab-figure-activate) {
-    animation-name: lab-figure-fade;
-  }
-}
-
-/* One geometry contract for renderer-swappable learning scenes. The selected
-   model changes inside this frame; it must not make the activity jump. */
-.lab-scene-viewport {
-  container-type: inline-size;
-  display: grid;
-  width: 100%;
-  height: clamp(16rem, 62cqi, 25rem);
-  min-width: 0;
-  place-items: stretch;
-  overflow: hidden;
-}
-
-.lab-scene-viewport[data-size="compact"] {
-  height: clamp(14rem, 52cqi, 21rem);
-}
-
-.lab-scene-viewport[data-size="strip"] {
-  height: clamp(10rem, 30cqi, 14rem);
-}
-
-.lab-scene-viewport[data-size="wide"] {
-  height: clamp(15rem, 48cqi, 23rem);
-}
-
-.lab-scene-viewport > :is(svg, .lab-figure, .lab-three-scene),
-.lab-scene-viewport > .lab-three-scene > .lab-three-canvas {
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-}
-
-.lab-scene-viewport > :is(svg, .lab-figure) {
-  display: block;
-  overflow: hidden;
-}
-
-/* Dense apparatus may preserve a readable drawing width and pan only when the
-   host viewport cannot fit it. This keeps scrolling behavior in one primitive. */
-.lab-scene-viewport[data-overflow="scroll"] {
-  overflow-x: auto;
-  overflow-y: hidden;
-  overscroll-behavior-inline: contain;
-  scrollbar-gutter: stable;
-}
-.lab-scene-viewport[data-overflow="scroll"] > :is(svg, .lab-figure) {
-  width: max(100%, 42rem);
-  max-width: none;
-}
-/* The shared :focus-visible rule already reaches this (it is a tabbable scroll
-   box); only the offset changes sign, so the ring sits inside the container
-   instead of being clipped by the overflow it is announcing. */
-.lab-scene-viewport[data-overflow="scroll"]:focus-visible {
-  outline-offset: calc(-1 * var(--lab-focus-offset));
-}
-.tree-rotation-prediction .lab-chip {
-  min-width: 6.8rem;
-  justify-content: center;
-  gap: var(--lab-sp-6);
-  font-weight: var(--lab-w-medium);
-}
-.tree-rotation-prediction .lab-chip strong {
-  font-weight: var(--lab-w-bold);
-}
-
-/* Algorithm traces need the scene, its evidence and step transport visible as
-   one causal unit. Most embedded lesson columns never reach the generic 60rem
-   desktop breakpoint, so algorithms adopt a narrower two-pane threshold. */
-@container lab-activity (min-width: 48rem) {
-  /* Only reserve a second pane when the inspector is actually open. Between
-     the compact and full desktop breakpoints Inspector intentionally remains
-     collapsible; an unconditional column here left a large, empty canvas. */
-  .algorithm-activity .lab-activity-workspace:has(> .lab-activity-inspector[open]) {
-    grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
-    align-items: start;
-  }
-}
-
-.algorithm-activity .lab-activity-transport {
-  position: sticky;
-  z-index: var(--lab-z-raised);
-  inset-block-end: 0;
-  box-shadow: 0 -0.45rem 1rem
-    color-mix(in oklab, var(--foreground, var(--stage-fg)) 7%, transparent);
-}
-
-@container lab-activity (min-width: 64rem) {
-  .algorithm-activity[data-focus][data-focus-layout="immersive"] .algorithm-graph svg,
-  .algorithm-activity[data-focus][data-focus-layout="immersive"] .tree-scene svg {
-    height: clamp(24rem, 56dvh, 42rem);
-  }
-
-  /* Data-rich subject scenes should use the extra focus width without turning
-     compact controls, tables, or prose into oversized panels. These selectors
-     intentionally target named render surfaces rather than workspace children. */
-  .lab-activity[data-focus][data-focus-layout="immersive"] .statistics-chart {
-    max-width: 64rem;
-    margin-inline: auto;
-  }
-  .lab-activity[data-focus][data-focus-layout="immersive"] .statistics-z-curve {
-    width: min(100%, 34rem);
-  }
-  .lab-activity[data-focus][data-focus-layout="immersive"] .statistics-z-table-scroll {
-    max-height: min(48dvh, 32rem);
-  }
-  .lab-activity[data-focus][data-focus-layout="immersive"] .geography-cycle-scene svg {
-    display: block;
-    width: min(100%, 68rem);
-    height: auto;
-    max-height: 58dvh;
-    margin-inline: auto;
-  }
-  .lab-activity[data-focus][data-focus-layout="immersive"]
-    :is(.biology-plot-region, .biology-chart-scene)
-    > svg {
-    width: 100%;
-    max-height: 56dvh;
-  }
-}
-
-/* Authorable concept rules -------------------------------------------------
-   One semantic composition serves both compact lesson cards and full RuleLab
-   activities. Domain rule data owns the mathematics; this layer owns layout. */
-.rule-card {
-  overflow: hidden;
-  min-width: 0;
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-panel, 0.85rem);
-  background: var(--card, var(--stage-bg));
-  color: var(--card-foreground, var(--stage-fg));
-  container: rule-card / inline-size;
-}
-.rule-card[data-display="activity"] {
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-}
-.rule-card-header {
-  display: grid;
-  gap: var(--lab-sp-4);
-  padding: var(--lab-sp-14) var(--lab-sp-16);
-  border-bottom: 1px solid var(--border, var(--stage-grid));
-}
-.rule-card-title {
-  font-size: var(--lab-t-body);
-  font-weight: var(--lab-w-bold);
-  line-height: var(--lab-lh-title);
-}
-.rule-card-intuition {
-  margin: 0;
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-eyebrow);
-  line-height: var(--lab-lh-ui);
-}
-.rule-card-intuition > span {
-  margin-inline-end: var(--lab-sp-8);
-  color: var(--primary, var(--stage-accent));
-  font-size: var(--lab-t-eyebrow, 0.65rem);
-  font-weight: var(--lab-w-bold);
-  letter-spacing: var(--lab-ls-caps);
-  text-transform: uppercase;
-}
-.rule-card-workspace {
-  display: grid;
-  min-width: 0;
-}
-.rule-card-scene {
-  display: grid;
-  min-width: 0;
-  align-content: center;
-  justify-items: center;
-  gap: var(--lab-sp-12);
-  padding: clamp(0.9rem, 3cqw, 1.5rem);
-}
-.rule-card-formula {
-  max-width: 100%;
-  /* Same trap as `.rule-step-expression`, and worse here because the formula is set
-     larger: one scrolling axis promotes the other, so a fraction grew a vertical
-     scrollbar on the card's headline equation. */
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding-block: 0.3em;
-  line-height: 1.9;
-  font-size: clamp(1rem, 3cqw, 1.25rem);
-  scrollbar-width: thin;
-}
-.rule-card-figure {
-  display: grid;
-  width: 100%;
-  min-width: 0;
-  place-items: center;
-}
-.rule-figure {
-  display: grid;
-  width: 100%;
-  min-width: 0;
-  gap: var(--lab-sp-8);
-  margin: 0;
-}
-.rule-figure-scene {
-  width: 100%;
-  min-width: 0;
-}
-.rule-figure figcaption {
-  max-width: 65ch;
-  margin-inline: auto;
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-eyebrow);
-  line-height: var(--lab-lh-ui);
-  text-align: center;
-}
-.rule-card-evidence {
-  display: grid;
-  min-width: 0;
-  align-content: start;
-  gap: var(--lab-sp-12);
-  padding: var(--lab-sp-14) var(--lab-sp-16);
-  border-top: 1px solid var(--border, var(--stage-grid));
-  background: color-mix(in oklab, var(--muted, var(--stage-grid)) 45%, transparent);
-}
-.rule-step-list {
-  display: grid;
-  gap: var(--lab-sp-4);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.rule-step-list > li {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: var(--lab-sp-4) var(--lab-sp-12);
-  min-width: 0;
-  padding: var(--lab-sp-6) var(--lab-sp-8);
-  border-radius: calc(var(--radius, 0.625rem) - 2px);
-}
-.rule-step-list > li[data-result="true"] {
-  border-inline-start: 2px solid var(--primary, var(--stage-accent));
-  background: color-mix(in oklab, var(--primary, var(--stage-accent)) 7%, transparent);
-}
-.rule-step-expression {
-  max-width: 100%;
-  /* `overflow-x: auto` alone is a trap: CSS promotes the OTHER axis from `visible`
-     to `auto` as soon as one axis scrolls. A KaTeX fraction is taller than the line
-     box it sits in, so every \frac grew its own vertical scrollbar, arrows and all.
-     Pin the y axis, then give the line box room so pinning it never clips: the
-     padding and line-height below are what let a two-storey fraction sit inside the
-     element rather than poke out of it. Wide expressions still scroll sideways. */
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding-block: 0.3em;
-  line-height: 1.9;
-  font-size: var(--lab-t-sm);
-}
-.rule-step-note {
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-eyebrow);
-  line-height: var(--lab-lh-ui);
-}
-.rule-card-controls {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: end;
-  gap: var(--lab-sp-12);
-  padding: var(--lab-sp-12) var(--lab-sp-16);
-  border-top: 1px solid var(--border, var(--stage-grid));
-  background: color-mix(in oklab, var(--muted, var(--stage-grid)) 42%, transparent);
-}
-.rule-card-support {
-  border-top: 1px solid var(--border, var(--stage-grid));
-}
-.rule-card-support > summary {
-  cursor: pointer;
-  padding: var(--lab-sp-12) var(--lab-sp-16);
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-semibold);
-}
-.rule-card-support[open] > summary {
-  border-bottom: 1px solid var(--border, var(--stage-grid));
-}
-.rule-card-support-body {
-  display: grid;
-  gap: var(--lab-sp-16);
-  padding: var(--lab-sp-14) var(--lab-sp-16) var(--lab-sp-16);
-}
-.rule-card-support-body section {
-  display: grid;
-  gap: var(--lab-sp-8);
-}
-.rule-card-support-body h4,
-.rule-card-support-body ul {
-  margin: 0;
-}
-.rule-card-support-body h4 {
-  font-size: var(--lab-t-eyebrow, 0.68rem);
-  letter-spacing: var(--lab-ls-caps);
-  text-transform: uppercase;
-}
-.rule-card-support-body ul {
-  display: grid;
-  gap: var(--lab-sp-6);
-  padding-inline-start: var(--lab-sp-16);
-  font-size: var(--lab-t-eyebrow);
-  line-height: var(--lab-lh-ui);
-}
-/* Keep the explanation below the visual until both columns can remain useful.
-   The earlier 42rem split produced a cramped equation rail in ordinary lesson widths. */
-@container rule-card (min-width: 54rem) {
-  .rule-card-workspace:has(> .rule-card-evidence) {
-    grid-template-columns: minmax(28rem, 1.35fr) minmax(19rem, 0.65fr);
-    align-items: stretch;
-  }
-  .rule-card-evidence {
-    border-top: 0;
-    border-inline-start: 1px solid var(--border, var(--stage-grid));
-  }
-}
-.heap-prediction .lab-chip {
-  min-width: 3.5rem;
-  justify-content: center;
-  text-transform: capitalize;
-}
-@media (min-width: 56rem) {
-  .heap-authoring {
-    grid-template-columns: minmax(25rem, 1.2fr) minmax(20rem, 0.8fr);
-  }
-  .heap-authoring-preview {
-    position: sticky;
-    top: 1rem;
-  }
-}
-@container lab-activity (max-width: 42.5rem) {
-  .heap-tree {
-    min-height: 15rem;
-  }
-  .heap-tree svg {
-    height: 15rem;
-  }
-  .heap-relation {
-    align-items: flex-start;
-    font-size: var(--lab-t-micro);
-  }
-}
-/* No-code scene authoring. Named classes keep the editor styled in every host;
-   consumers should not need to scan package source with their Tailwind build. */
-.lab-scene-studio {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.42fr);
-  gap: var(--lab-sp-16);
-  align-items: stretch;
-  padding: var(--lab-sp-14);
-  color: var(--lab-fg);
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-lg);
-  background: var(--lab-surface);
-}
-.lab-scene-studio-form {
-  display: grid;
-  gap: var(--lab-sp-14);
-  min-width: 0;
-}
-.lab-scene-studio-fields {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--lab-sp-10);
-  align-items: end;
-}
-.lab-scene-studio-field,
-.lab-scene-studio-group {
-  display: grid;
-  gap: var(--lab-sp-6);
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-.lab-scene-studio-field small {
-  color: var(--lab-muted);
-  font-size: var(--lab-t-eyebrow);
-}
-.lab-scene-studio-label {
-  color: var(--lab-muted);
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-bold);
-  letter-spacing: var(--lab-ls-caps);
-  line-height: var(--lab-lh-title);
-  text-transform: uppercase;
-}
-.lab-scene-studio-input {
-  width: 100%;
-  min-width: 0;
-  min-height: var(--lab-target);
-  box-sizing: border-box;
-  padding: var(--lab-sp-8) var(--lab-sp-12);
-  color: var(--lab-fg);
-  font: inherit;
-  font-size: var(--lab-t-sm);
-  border: 1px solid var(--lab-border-strong);
-  border-radius: var(--lab-r-sm);
-  outline: none;
-  background: var(--lab-surface);
-}
-.lab-scene-studio-choices {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--lab-sp-6);
-}
-.lab-scene-studio-choice {
-  display: grid;
-  gap: 2px;
-  min-height: var(--lab-target);
-  padding: var(--lab-sp-8) var(--lab-sp-12);
-  text-align: start;
-  color: var(--lab-fg);
-  cursor: pointer;
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-sm);
-  background: var(--lab-surface);
-}
-.lab-scene-studio-choice strong {
-  font-size: var(--lab-t-sm);
-}
-.lab-scene-studio-choice span {
-  color: var(--lab-muted);
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-regular);
-}
-.lab-scene-studio-choice[aria-pressed="true"] {
-  border-color: var(--lab-accent);
-  background: var(--lab-accent-soft);
-}
-.lab-scene-studio-icons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--lab-sp-6);
-}
-.lab-scene-studio-icons button {
-  display: grid;
-  place-items: center;
-  width: var(--lab-target);
-  height: var(--lab-target);
-  padding: 0;
-  cursor: pointer;
-  font-size: var(--lab-t-title);
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-sm);
-  background: var(--lab-surface);
-}
-.lab-scene-studio-icons button[aria-pressed="true"] {
-  border-color: var(--lab-accent);
-  background: var(--lab-accent-soft);
-}
-.lab-scene-studio-custom-icon {
-  display: flex;
-  align-items: center;
-  gap: var(--lab-sp-6);
-  min-height: var(--lab-target);
-  padding-inline: var(--lab-sp-10);
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-sm);
-}
-.lab-scene-studio-custom-icon span {
-  color: var(--lab-muted);
-  font-size: var(--lab-t-eyebrow);
-}
-.lab-scene-studio-custom-icon input {
-  width: 2rem;
-  border: 0;
-  outline: 0;
-  color: var(--lab-fg);
-  font: inherit;
-  font-size: var(--lab-t-title);
-  background: transparent;
-}
-.lab-scene-studio-color {
-  display: grid;
-  grid-template-columns: var(--lab-target) 1fr;
-  gap: var(--lab-sp-6);
-}
-.lab-scene-studio-color input[type="color"] {
-  width: var(--lab-target);
-  height: var(--lab-target);
-  padding: var(--lab-sp-2);
-  cursor: pointer;
-  border: 1px solid var(--lab-border-strong);
-  border-radius: var(--lab-r-sm);
-  background: var(--lab-surface);
-}
-.lab-scene-studio-preview {
-  display: grid;
-  grid-template-rows: auto minmax(9.5rem, 1fr) auto;
-  gap: var(--lab-sp-6);
-  justify-items: center;
-  min-width: 0;
-  padding: var(--lab-sp-10);
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-md);
-  background: var(--lab-sunken);
-}
-.lab-scene-studio-preview-stage {
-  display: grid;
-  place-items: center;
-  min-height: 9.5rem;
-  width: 100%;
-  overflow: hidden;
-}
-.lab-scene-studio-preview-note {
-  color: var(--lab-muted);
-  font-size: var(--lab-t-eyebrow);
-}
-@media (max-width: 42rem) {
-  .lab-scene-studio {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .lab-scene-studio-preview {
-    grid-template-rows: auto 8.5rem auto;
-  }
-  .lab-scene-studio-preview-stage {
-    min-height: 8.5rem;
-  }
-}
-@media (max-width: 30rem) {
-  .lab-scene-studio-fields,
-  .lab-scene-studio-choices {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .lab-scene-studio-choice {
-    grid-template-columns: auto 1fr;
-    align-items: baseline;
-    gap: var(--lab-sp-6);
-  }
-}
-@keyframes tree-edge-flow {
-  to {
-    stroke-dashoffset: -14;
-  }
-}
-@keyframes tree-node-pulse {
-  from {
-    opacity: 1;
-    transform: scale(0.8);
-  }
-  to {
-    opacity: 0;
-    transform: scale(1.35);
-  }
-}
-@keyframes tree-output-land {
-  from {
-    opacity: 0;
-    transform: translateY(-0.5rem) scale(0.8);
-  }
-}
-@container lab-activity (max-width: 42.5rem) {
-  .tree-scene {
-    min-height: 17rem;
-  }
-  .tree-scene svg {
-    height: 17rem;
-  }
-}
-/* Utility: visually-hidden (screen-reader only). */
-/**
- * Visually hidden, and it must STAY hidden.
- *
- * This is the one place `!important` is right. A live region announces what changed and must never
- * take part in layout, but a scene's blanket child rule (`.physics-scene-surface > div { width:
- * 100% }`) matched it and stretched it to the full width: at 360px the page then scrolled sideways
- * by 53px, which is a WCAG reflow failure caused by text nobody can even see. Every design system
- * marks this utility important for the same reason.
- */
-.lab-sr-only {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  margin: -1px !important;
-  padding: 0 !important;
-  border: 0 !important;
-  overflow: hidden !important;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   PRIMITIVES
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-/* ── Eyebrow: the small-caps section label (PREDICT FIRST, SOLUTION, …) ────── */
-.lab-eyebrow,
-.lab-challenge-h,
-.lab-objectives-h,
-.lab-solution-h,
-.lab-field-label {
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-semibold);
-  letter-spacing: var(--lab-ls-caps);
-  text-transform: uppercase;
-  color: var(--lab-muted);
-  line-height: var(--lab-lh-title);
-}
-
-.lab-option,
-.lab-choice,
-.lang-choice,
-.lang-match-cell {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--lab-sp-6);
-  padding: var(--lab-sp-10) var(--lab-sp-16);
-  border-radius: var(--lab-r-md);
-  border: 1.5px solid var(--lab-border-strong);
-  background: var(--lab-surface);
-  color: var(--lab-fg);
-  font-size: var(--lab-t-lg);
-  font-weight: var(--lab-w-semibold);
-  font-variant-numeric: tabular-nums;
-  cursor: pointer;
-  transition:
-    border-color var(--lab-dur-fast),
-    background var(--lab-dur-fast),
-    color var(--lab-dur-fast),
-    box-shadow var(--lab-dur-fast),
-    transform var(--lab-dur-fast);
-}
-/* Gated on a real pointer. A touch device keeps :hover on the last thing tapped, and this hover is
-   an accent border over an accent-faint fill, which is precisely what PICKED looks like: a learner
-   on a phone tapped A, moved to B, and left A still looking chosen. Most of these learners are on
-   a phone, so the sticky state was the common case, not the edge case. */
-@media (hover: hover) and (pointer: fine) {
-  .lab-option:hover:not(:disabled),
-  .lab-choice:hover:not(:disabled),
-  .lang-choice:hover:not(:disabled),
-  .lang-match-cell:hover:not(:disabled) {
-    border-color: var(--lab-accent-edge);
-    background: var(--lab-accent-faint);
-    box-shadow: var(--lab-shadow-md);
-  }
-}
-.lab-option:active:not(:disabled),
-.lab-choice:active:not(:disabled),
-.lang-choice:active:not(:disabled),
-.lang-match-cell:active:not(:disabled) {
-  transform: translateY(1px);
-  box-shadow: none;
-}
-.lab-btn {
-  min-block-size: var(--lab-target);
-  border-color: var(--lab-accent);
-  background: var(--lab-accent);
-  color: var(--lab-accent-fg);
-}
-.lab-btn.lab-btn-ghost {
-  border-color: var(--lab-border);
-  background: transparent;
-  color: var(--lab-fg);
-}
-@media (hover: hover) and (pointer: fine) {
-  .lab-btn:hover:not(:disabled) {
-    border-color: var(--lab-accent);
-    background: color-mix(in oklab, var(--lab-accent) 88%, var(--lab-fg));
-    color: var(--lab-accent-fg);
-  }
-  .lab-btn.lab-btn-ghost:hover:not(:disabled) {
-    border-color: var(--lab-border-strong);
-    background: color-mix(in oklab, var(--lab-fg) 5%, transparent);
-    color: var(--lab-fg);
-  }
-}
-/* selected (accent) — unify the different data-attrs the components emit */
-.lab-option[data-picked],
-.lab-option[data-sel="true"],
-.lab-choice[data-picked],
-.lang-choice[data-state="sel"],
-.lang-match-cell[data-state="sel"] {
-  border-color: var(--lab-accent);
-  background: var(--lab-accent-soft);
-}
-/* correct (good) */
-.lab-option[data-tone="correct"],
-.lab-option[data-state="ok"],
-.lab-choice[data-tone="correct"],
-.lang-choice[data-state="ok"],
-.lang-match-cell[data-state="ok"] {
-  border-color: var(--lab-good);
-  background: var(--lab-good-soft);
-  color: var(--lab-good-ink);
-  cursor: default;
-}
-/* wrong (danger) */
-.lab-option[data-tone="wrong"],
-.lab-option[data-state="no"],
-.lab-choice[data-tone="wrong"],
-.lang-choice[data-state="no"],
-.lang-match-cell[data-state="no"] {
-  border-color: var(--lab-danger);
-  background: var(--lab-danger-soft);
-  color: var(--lab-danger-ink);
-}
-.lang-choice[data-state="no"],
-.lang-match-cell[data-state="no"] {
-  animation: lang-shake 0.42s;
-}
-.lang-choice:disabled:not([data-state="ok"]) {
-  opacity: 0.5;
-  cursor: default;
-}
-.lang-match-cell:disabled {
-  cursor: default;
-}
-/* size variants */
-.lab-choice {
-  min-width: 46px;
-  min-height: var(--lab-target);
-}
-.lang-choice {
-  padding: var(--lab-sp-10) var(--lab-sp-20);
-  font-size: var(--lab-t-body);
-}
-.lang-match-cell {
-  padding: var(--lab-sp-14) var(--lab-sp-14);
-}
-
-/* ── Panel: a bordered surface (card / callout / note) ─────────────────────── */
-.lab-panel,
-.lab-challenge,
-.lab-evidence-surface,
-.lab-solution,
-.lab-objectives {
-  border-radius: var(--lab-r-lg);
-  border: 1px solid var(--lab-border);
-  background: var(--lab-surface);
-  color: var(--lab-fg);
-}
-
-.lab-evidence-surface,
-.lab-solution {
-  box-shadow: var(--lab-shadow-sm);
-}
-
-.lab-input {
-  min-width: 140px;
-  font-variant-numeric: tabular-nums;
-}
-
-.lab-stepper {
-  display: inline-flex;
-  align-items: center;
-  border: 1.5px solid var(--lab-border-strong);
-  border-radius: var(--lab-r-md);
-  overflow: hidden;
-  background: var(--lab-sunken);
-}
-.lab-stepper b {
-  min-width: 30px;
-  text-align: center;
-  font-size: var(--lab-t-body);
-  font-weight: var(--lab-w-bold);
-  padding: 0 var(--lab-sp-4);
-  font-variant-numeric: tabular-nums;
-}
-
-.lab-bar {
-  display: flex;
-  align-items: center;
-  gap: var(--lab-sp-14);
-  flex-wrap: wrap;
-  padding: var(--lab-sp-12) 2px 2px;
-  font-size: var(--lab-t-body);
-  color: var(--lab-fg);
-}
-.lab-bar .sep {
-  opacity: 0.6;
-}
-
-/* ── Meter bar (progress / energy) ─────────────────────────────────────────── */
-.lab-meter {
-  display: flex;
-  flex-direction: column;
-  gap: var(--lab-sp-2);
-}
-.lab-meter-head {
-  display: flex;
-  justify-content: space-between;
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-semibold);
-  color: var(--lab-muted);
-}
-.lab-meter-head b {
-  font-weight: var(--lab-w-semibold);
-  font-variant-numeric: tabular-nums;
-}
-.lab-meter-track {
-  height: 12px;
-  border-radius: var(--lab-r-sm);
-  background: color-mix(in oklab, var(--lab-muted) 18%, transparent);
-  overflow: hidden;
-}
-.lab-meter-fill {
-  height: 100%;
-  border-radius: var(--lab-r-sm);
-  background: var(--lab-meter-color, var(--lab-accent));
-  transition: width var(--lab-dur-fast);
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   COMPONENTS
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-/* ── pedagogy: objectives / hints / misconception ──────────────────────────── */
-.lab-objectives {
-  margin: 0 0 var(--lab-sp-12);
-  padding: var(--lab-sp-10) var(--lab-sp-14);
-  border-radius: var(--lab-r-md);
-  background: var(--lab-accent-faint);
-}
-.lab-objectives ul {
-  margin: var(--lab-sp-4) 0 0;
-  padding-inline-start: var(--lab-sp-16);
-}
-.lab-objectives li {
-  font-size: var(--lab-t-sm);
-  color: var(--lab-fg);
-  margin: 1px 0;
-}
-.lab-hints {
-  margin-top: var(--lab-sp-12);
-  display: flex;
-  flex-direction: column;
-  gap: var(--lab-sp-6);
-  align-items: flex-start;
-}
-.lab-hint {
-  margin: 0;
-  font-size: var(--lab-t-sm);
-  color: var(--lab-fg);
-  padding: var(--lab-sp-6) var(--lab-sp-10);
-  border-radius: var(--lab-r-sm);
-  background: var(--lab-warn-soft);
-  max-width: 60ch;
-}
-.lab-hint-btn {
-  align-self: flex-start;
-  padding: var(--lab-sp-6) var(--lab-sp-14);
-  border-radius: var(--lab-r-pill);
-  border: 1.5px dashed var(--lab-border-strong);
-  background: transparent;
-  color: var(--lab-muted);
-  font-size: var(--lab-t-sm);
-  font-weight: var(--lab-w-medium);
-  cursor: pointer;
-  transition:
-    border-color var(--lab-dur-fast),
-    color var(--lab-dur-fast);
-}
-@media (hover: hover) and (pointer: fine) {
-  .lab-hint-btn:hover {
-    border-color: var(--lab-accent);
-    color: var(--lab-fg);
-  }
-}
-.lab-misconception {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lab-sp-6);
-  font-size: var(--lab-t-sm);
-  font-weight: var(--lab-w-medium);
-  padding: var(--lab-sp-4) var(--lab-sp-12);
-  border-radius: var(--lab-r-pill);
-  color: var(--lab-warn-fg);
-  background: color-mix(in oklab, var(--lab-warn) 22%, var(--lab-surface));
-}
-
-/* shared "Show answer" escape hatch (kit/pedagogy RevealSolution) */
-.lab-reveal-btn {
-  align-self: flex-start;
-  padding: var(--lab-sp-4) var(--lab-sp-12);
-  border-radius: var(--lab-r-pill);
-  border: 1.5px dashed var(--lab-border-strong);
-  background: transparent;
-  color: var(--lab-muted);
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-medium);
-  cursor: pointer;
-  transition:
-    border-color var(--lab-dur-fast),
-    color var(--lab-dur-fast);
-}
-@media (hover: hover) and (pointer: fine) {
-  .lab-reveal-btn:hover {
-    border-color: var(--lab-warn);
-    color: var(--lab-fg);
-  }
-}
-.lab-solution {
-  margin-top: var(--lab-sp-8);
-  max-width: 64ch;
-  padding: var(--lab-sp-10) var(--lab-sp-14);
-  border-radius: var(--lab-r-md);
-  border-color: color-mix(in oklab, var(--lab-warn) 42%, transparent);
-  background: var(--lab-warn-soft);
-}
-.lab-solution-h {
-  display: flex;
-  align-items: center;
-  gap: var(--lab-sp-6);
-  font-weight: var(--lab-w-bold);
-  color: var(--lab-warn-fg);
-}
-.lab-solution-body {
-  margin-top: var(--lab-sp-4);
-  font-size: var(--lab-t-body);
-  font-weight: var(--lab-w-medium);
-  color: var(--lab-fg);
-}
-.lab-solution-note {
-  margin: var(--lab-sp-4) 0 0;
-  font-size: var(--lab-t-eyebrow);
-  opacity: 0.7;
-}
-
-/* ── Challenge: predict / classify / explain (kit/pedagogy) ─────────────────
-   A clean card: a quiet eyebrow, a readable prompt, comfortable options. The
-   card surface stays neutral so the accent reads only on the pick/right states,
-   which is what carries meaning. */
-/* full width: the card aligns with the figure + controls above it instead of
-   floating as a narrower island in the footer */
-.lab-challenge {
-  display: flex;
-  flex-direction: column;
-  gap: var(--lab-sp-14);
-  width: 100%;
-  padding: var(--lab-sp-14) var(--lab-sp-16);
-  box-shadow: var(--lab-shadow-sm);
-}
-.lab-challenge-h {
-  display: flex;
-  align-items: center;
-  gap: var(--lab-sp-6);
-  font-weight: var(--lab-w-bold);
-  letter-spacing: var(--lab-ls-caps);
-}
-.lab-challenge-h::before {
-  content: "";
-  width: 7px;
-  height: 7px;
-  border-radius: var(--lab-r-pill);
-  background: var(--lab-accent);
-}
-.lab-challenge-count {
-  margin-inline-start: auto;
-  padding: 1px var(--lab-sp-8);
-  border-radius: var(--lab-r-pill);
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0;
-  font-weight: var(--lab-w-semibold);
-  color: var(--lab-muted);
-  background: color-mix(in oklab, currentColor 8%, transparent);
-}
-.lab-challenge-q {
-  display: flex;
-  flex-direction: column;
-  gap: var(--lab-sp-8);
-  align-items: flex-start;
-  min-inline-size: 0;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-.lab-challenge-q + .lab-challenge-q {
-  padding-top: var(--lab-sp-14);
-  border-top: 1px solid var(--lab-border);
-}
-.lab-challenge-prompt {
-  display: flex;
-  align-items: baseline;
-  gap: var(--lab-sp-8);
-  max-width: 68ch;
-  font-size: var(--lab-t-sm);
-  line-height: var(--lab-lh-ui);
-  font-weight: var(--lab-w-medium);
-  color: var(--lab-fg);
-  margin: 0;
-  padding: 0;
-}
-.lab-challenge-num {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 var(--lab-sp-4);
-  border-radius: var(--lab-r-pill);
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-bold);
-  font-variant-numeric: tabular-nums;
-  color: var(--lab-accent);
-  background: var(--lab-accent-soft);
-  transform: translateY(1px);
-}
-.lab-choices {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--lab-sp-10);
-}
-/* Answer controls stay content-sized on roomy layouts. Equal-width full-row
-   pills make short choices look like dominant page actions and waste space. */
-.lab-challenge .lab-choices {
-  display: flex;
-  align-items: stretch;
-  flex-wrap: wrap;
-  width: 100%;
-}
-.lab-challenge .lab-choice {
-  flex: 0 1 auto;
-  width: auto;
-  max-width: min(100%, 34rem);
-  min-height: var(--lab-target);
-  padding: var(--lab-sp-8) var(--lab-sp-12);
-  border-width: 1px;
-  font-size: var(--lab-t-sm);
-  font-weight: var(--lab-w-regular);
-  line-height: var(--lab-lh-ui);
-  text-align: center;
-  white-space: normal;
-}
-.lab-challenge .lab-choice:hover:not(:disabled) {
-  box-shadow: none;
-}
-@container lab-activity (max-width: 34rem) {
-  .lab-challenge .lab-choice {
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-/* Authored answers are SENTENCES, not tokens. The base .lab-choice is tuned for
-   a short tile ("42", "True"): bold, large, centred, heavy border. A full clause
-   in that dress reads as competing buttons rather than options to weigh. So in a
-   question fieldset they become an option list: one per row so the left edges
-   align, a lettered handle, body-size regular text, and a quiet border that only
-   takes colour on hover or once picked. The prompt stays the heaviest thing. */
-.lab-challenge-q .lab-choices {
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  max-width: 34rem;
-  gap: var(--lab-sp-4);
-  margin-block-start: 2px;
-  counter-reset: lab-answer;
-}
-/* Short answers are comparisons, so let learners scan them side by side. Long
-   authored clauses retain the prose list above. The renderer sets this policy;
-   lesson authors do not hand-tune columns or button widths. */
-.lab-challenge-q[data-response-layout="compact"] .lab-choices {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 14rem));
-  justify-content: start;
-  max-width: 100%;
-  gap: var(--lab-sp-6);
-}
-.lab-challenge-q[data-response-layout="compact"] .lab-choice {
-  height: 100%;
-}
-.lab-challenge-q .lab-choice {
-  position: relative;
-  flex: 0 0 auto;
-  width: 100%;
-  max-width: 100%;
-  min-height: 0;
-  justify-content: flex-start;
-  gap: var(--lab-sp-8);
-  padding: var(--lab-sp-6) var(--lab-sp-8);
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-md);
-  background: var(--lab-surface);
-  /* One step BELOW the 15px prompt. At body size the answers came out larger
-     than the question, which inverts the reading order of the whole block. */
-  font-size: var(--lab-t-sm);
-  font-weight: var(--lab-w-regular);
-  line-height: var(--lab-lh-ui);
-  text-align: start;
-  white-space: normal;
-}
-.lab-choice-control {
-  position: absolute !important;
-  inline-size: 1px !important;
-  block-size: 1px !important;
-  margin: 0 !important;
-  opacity: 0;
-  pointer-events: none;
-}
-.lab-choice:has(.lab-choice-control:focus-visible) {
-  border-color: var(--lab-accent);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lab-accent) 22%, transparent);
-}
-.lab-choice[data-disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-/* An answer is not a heading.
-   The shared option rule sets `--lab-t-lg` at semibold, which is larger and heavier than the body
-   text and the step lead, so a row of prose answers came out as the loudest thing on the card and
-   a three-option row read as three buttons shouting. Numeric choices want the presence; a sentence
-   does not. Scoped to the label span, so the bare `.lab-option` keypad keeps its size. */
-.lab-choice-label {
-  min-inline-size: 0;
-  font-size: var(--lab-t-sm);
-  font-weight: var(--lab-w-medium);
-  line-height: var(--lab-lh-ui);
-}
-/* The letter is a handle, not decoration: it gives the explanation something to
-   point at and keeps every answer's text starting on one vertical line. */
-.lab-challenge-q .lab-choice::before {
-  counter-increment: lab-answer;
-  content: counter(lab-answer, upper-alpha);
-  flex: none;
-  align-self: flex-start;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: var(--lab-r-pill);
-  background: var(--lab-sunken);
-  border: 1px solid var(--lab-border);
-  color: var(--lab-muted);
-  font-size: var(--lab-t-micro);
-  font-weight: var(--lab-w-medium);
-  line-height: var(--lab-lh-tight);
-}
-@media (hover: hover) and (pointer: fine) {
-  .lab-challenge-q .lab-choice:hover:not(:disabled) {
-    border-color: var(--lab-accent-edge);
-    background: var(--lab-accent-faint);
-    box-shadow: none;
-  }
-}
-.lab-challenge-q .lab-choice[data-picked] {
-  font-weight: var(--lab-w-medium);
-}
-.lab-challenge-q .lab-choice[data-picked]::before {
-  background: var(--lab-accent-soft);
-  border-color: var(--lab-accent);
-  color: color-mix(in oklab, var(--lab-accent) 80%, var(--lab-fg));
-}
-.lab-challenge-q .lab-choice[data-tone="correct"]::before {
-  content: "✓";
-  background: var(--lab-good-soft);
-  border-color: var(--lab-good);
-  color: var(--lab-good-ink);
-}
-.lab-challenge-q .lab-choice[data-tone="wrong"]::before {
-  content: "×";
-  background: var(--lab-danger-soft);
-  border-color: var(--lab-danger);
-  color: var(--lab-danger-ink);
-}
-.lab-response-entry {
-  display: grid;
-  grid-template-columns: minmax(12rem, 28rem) auto;
-  align-items: center;
-  gap: var(--lab-sp-10);
-  width: min(100%, 38rem);
-}
-.lab-response-entry .lab-input {
-  width: 100%;
-  min-width: 0;
-}
-.lab-response-entry > :is(.lab-explain, .lab-celebrate) {
-  grid-column: 1 / -1;
-}
-.lab-response-entry[data-multiline] {
-  grid-template-columns: minmax(0, 1fr);
-}
-.lab-response-entry[data-multiline] > button {
-  justify-self: start;
-}
-.lab-ordering-list {
-  display: grid;
-  gap: var(--lab-sp-6);
-  width: min(100%, 38rem);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  counter-reset: none;
-}
-.lab-ordering-list > li {
-  display: grid;
-  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--lab-sp-10);
-  min-height: var(--lab-target);
-  padding: var(--lab-sp-4) var(--lab-sp-6) var(--lab-sp-4) var(--lab-sp-8);
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-md);
-  background: var(--lab-surface);
-}
-.lab-ordering-rank {
-  display: grid;
-  place-items: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: var(--lab-r-pill);
-  background: var(--lab-sunken);
-  color: var(--lab-muted);
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-semibold);
-  font-variant-numeric: tabular-nums;
-}
-.lab-ordering-label {
-  min-width: 0;
-  font-size: var(--lab-t-sm);
-  line-height: var(--lab-lh-ui);
-}
-.lab-ordering-actions {
-  display: inline-flex;
-  gap: 2px;
-}
-.lab-reflection-rubric {
-  display: grid;
-  gap: var(--lab-sp-6);
-  width: min(100%, 38rem);
-  padding: var(--lab-sp-12) var(--lab-sp-12);
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-md);
-  background: var(--lab-sunken);
-}
-.lab-reflection-rubric > p {
-  margin: 0;
-  color: var(--lab-muted);
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-semibold);
-  letter-spacing: var(--lab-ls-caps);
-  text-transform: uppercase;
-}
-.lab-reflection-rubric ul {
-  display: grid;
-  gap: var(--lab-sp-6);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.lab-reflection-rubric li {
-  position: relative;
-  padding-inline-start: var(--lab-sp-16);
-  font-size: var(--lab-t-sm);
-  line-height: var(--lab-lh-ui);
-}
-.lab-reflection-rubric li::before {
-  position: absolute;
-  inset-inline-start: 2px;
-  color: var(--lab-muted);
-  content: "•";
-}
-@container lab-activity (max-width: 30rem) {
-  .lab-challenge-q[data-response-layout="compact"] .lab-choices,
-  .lab-response-entry {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .lab-response-entry > button {
-    width: 100%;
-  }
-}
-/* explanation note: a SENTENCE, so it reads as prose (regular weight, roomy
-   line-height), not a shouting bold status pill. Neutral surface + a slim good
-   edge: the picked choice already carries the green, a second green wash on
-   the note turned the whole card monochrome. */
-.lab-explain {
-  display: block;
-  padding: var(--lab-sp-8) var(--lab-sp-12);
-  border-radius: var(--lab-r-sm);
-  font-size: var(--lab-t-body);
-  font-weight: var(--lab-w-regular);
-  line-height: var(--lab-lh-prose);
-  color: var(--lab-fg);
-  background: var(--lab-sunken);
-  border-inline-start: 3px solid var(--lab-good);
-}
-.lab-explain > b:first-child {
-  color: var(--lab-good-ink);
-}
-.lab-explain[data-state="no"] {
-  border-inline-start-color: var(--lab-border-strong);
-  color: var(--lab-muted);
-}
-/* ── Evidence: a compact instrument/readout surface ───────────────────────── */
-.lab-evidence-surface {
-  padding: var(--lab-sp-14) var(--lab-sp-14);
-  font-size: var(--lab-t-body);
-  line-height: var(--lab-lh-prose);
-  background: var(--lab-accent-faint);
-}
-.lab-evidence-surface[data-tone="result"] {
-  border-color: var(--lab-border);
-  background: var(--lab-surface);
-}
-.lab-evidence-value {
-  display: block;
-  margin-top: 2px;
-  font-size: var(--lab-t-title);
-  font-weight: var(--lab-w-bold);
-  font-variant-numeric: tabular-nums;
-  color: var(--lab-good);
-}
-.lab-readout {
-  display: grid;
-  gap: var(--lab-sp-4);
-  font-variant-numeric: tabular-nums;
-}
-.lab-readout-label {
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-semibold);
-  letter-spacing: var(--lab-ls-caps);
-  text-transform: uppercase;
-  color: var(--lab-muted);
-}
-.lab-readout-val {
-  font-weight: var(--lab-w-bold);
-  font-size: var(--lab-t-title);
-  line-height: var(--lab-lh-title);
-  letter-spacing: var(--lab-ls-tight);
-  color: var(--lab-fg);
-}
-.lab-readout-sub {
-  font-size: var(--lab-t-eyebrow);
-  line-height: var(--lab-lh-ui);
-  color: var(--lab-muted);
-}
-/* Stat readout: a stack of aligned "label … value" rows (StatList + Stat) — reads
-   like a clean instrument panel, hairline dividers between rows for spec-sheet order. */
-.lab-statlist {
-  display: grid;
-  gap: var(--lab-sp-6);
-  font-size: var(--lab-t-sm);
-  font-variant-numeric: tabular-nums;
-}
-/* Tabular figures, because these numbers CHANGE. In a proportional face a 1 is narrower than a 0,
-   so a value ticking from 1.11 to 2.00 re-measures its own text and everything beside it slides a
-   few pixels, every frame, for as long as the model runs. `.lab-readout` already had this; the
-   stat rows and the status strip did not, and the status strip is the one place a running lab
-   updates continuously in front of the learner. */
-.lab-stat {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: var(--lab-sp-14);
-  font-variant-numeric: tabular-nums;
-}
-.lab-stat + .lab-stat {
-  padding-top: var(--lab-sp-6);
-  border-top: 1px solid var(--lab-hairline);
-}
-.lab-stat-label {
-  color: var(--lab-muted);
-}
-.lab-stat-val {
-  font-weight: var(--lab-w-bold);
-  color: var(--lab-fg);
-  letter-spacing: var(--lab-ls-tight);
-}
-.lab-stat-val[data-tone="good"] {
-  color: var(--lab-good);
-}
-.lab-stat-val[data-tone="warn"] {
-  color: var(--lab-warn);
-}
-.lab-stat-val[data-tone="danger"] {
-  color: var(--lab-danger);
-}
-
-/* Compatibility surface for domain evidence authored before StatList existed.
-   Keep the visual contract here so those labs remain aligned and readable while
-   their JSX can migrate incrementally without subject-specific CSS. */
-.lab-metric-list {
-  display: grid;
-  gap: 0;
-  min-width: 0;
-  overflow: hidden;
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-md);
-  background: var(--lab-surface);
-  font-size: var(--lab-t-sm);
-  font-variant-numeric: tabular-nums;
-}
-.lab-metric-list > div {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: baseline;
-  gap: var(--lab-sp-10);
-  padding: var(--lab-sp-10) var(--lab-sp-14);
-}
-.lab-metric-list > div + div {
-  border-top: 1px solid var(--lab-hairline);
-}
-.lab-metric-list > div > span {
-  min-width: 0;
-  color: var(--lab-muted);
-  line-height: var(--lab-lh-ui);
-}
-.lab-metric-list > div > strong {
-  color: var(--lab-fg);
-  font-weight: var(--lab-w-bold);
-  text-align: end;
-}
-
-/* Step progress (deck labs) — a slim segmented indicator above the title, the
-   premium "lesson progress" affordance that replaces a "2 / 4" text pill. */
-.lab-progress {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lab-sp-10);
-  font-size: var(--lab-t-sm);
-  font-weight: var(--lab-w-semibold);
-  color: var(--lab-muted);
-  font-variant-numeric: tabular-nums;
-}
-.lab-progress-segs {
-  display: inline-flex;
-  gap: var(--lab-sp-4);
-}
-.lab-progress-seg {
-  width: 24px;
-  height: 6px;
-  border-radius: var(--lab-r-pill);
-  background: var(--lab-border-strong);
-  transition: background var(--lab-dur-base) var(--lab-ease);
-}
-.lab-progress-seg[data-on="true"] {
-  background: var(--lab-accent);
-}
-.lab-progress-bar {
-  display: inline-block;
-  width: 132px;
-  height: 6px;
-  border-radius: var(--lab-r-pill);
-  background: var(--lab-border-strong);
-  overflow: hidden;
-}
-.lab-progress-bar-fill {
-  display: block;
-  height: 100%;
-  background: var(--lab-accent);
-  border-radius: var(--lab-r-pill);
-  transition: width var(--lab-dur-slow) var(--lab-ease);
-}
-.lab-progress[data-complete="true"] {
-  gap: var(--lab-sp-4);
-  padding: var(--lab-sp-4) var(--lab-sp-12);
-  border-radius: var(--lab-r-pill);
-  color: var(--lab-good-ink);
-  background: var(--lab-good-soft);
-}
-.lab-progress-check {
-  font-weight: var(--lab-w-bold);
-}
-.lab-prompt {
-  margin: 0;
-  font-size: var(--lab-t-body);
-  line-height: var(--lab-lh-ui);
-  color: var(--lab-muted);
-  max-width: 68ch;
-}
-.lab-reps {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.3fr);
-  gap: var(--lab-sp-16);
-  align-items: center;
-}
-.lab-reps-plot {
-  min-width: 0;
-}
-.lab-reps-views {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--lab-sp-10) var(--lab-sp-14);
-  justify-content: center;
-  align-items: flex-end;
-}
-.lab-rep {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--lab-sp-2);
-}
-.lab-rep-cap {
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-semibold);
-  letter-spacing: var(--lab-ls-caps);
-  text-transform: uppercase;
-  color: var(--lab-muted);
-}
-.lab-linked-stack {
-  display: grid;
-  gap: var(--lab-sp-14);
-}
-@container lab-activity (max-width: 38rem) {
-  .lab-reps {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-/* ── Circuit editor: wiring pin affordance ─────────────────────────────────────
-   Every pin is a click-to-wire point; make that obvious. The dot grows + glows on
-   hover with a crosshair cursor and a tooltip; the armed pin pulses; while a wire
-   is pending the other pins read as connect targets. */
-.lab-pin {
-  cursor: crosshair;
-}
-.lab-pin-dot {
-  r: 5.5;
-  transition:
-    r var(--lab-dur-fast) var(--lab-ease),
-    stroke-width var(--lab-dur-fast) var(--lab-ease),
-    filter var(--lab-dur-fast) var(--lab-ease);
-}
-.lab-pin:hover .lab-pin-dot {
-  r: 8.5;
-  stroke-width: 3;
-  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--stage-accent, #3b82f6) 75%, transparent));
-}
-.lab-pin:focus-visible {
-  outline: none;
-}
-.lab-pin:focus-visible .lab-pin-dot {
-  r: 8.5;
-  stroke-width: 3;
-  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--stage-accent, #3b82f6) 75%, transparent));
-}
-.lab-pin[data-target] .lab-pin-dot {
-  r: 6.5;
-  stroke-width: 2.5;
-}
-.lab-pin[data-armed] .lab-pin-dot {
-  r: 7.5;
-  animation: lab-pin-pulse 1.1s var(--lab-ease-in-out) infinite;
-}
-@keyframes lab-pin-pulse {
-  0%,
-  100% {
-    stroke-width: 2.5;
-  }
-  50% {
-    stroke-width: 5;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  /* the armed pin cannot pulse, so it is simply heavier */
-  .lab-pin[data-armed] .lab-pin-dot {
-    stroke-width: 4;
-  }
-}
-.lab-control-expr {
-  grid-column: 1 / -1;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--lab-sp-8);
-  font-weight: var(--lab-w-medium);
-}
-
-/* a labelled control: small caps label, then control + value on one row */
-.lab-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--lab-sp-4);
-  min-width: 0;
-}
-.lab-field-row {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lab-sp-8);
-  flex-wrap: wrap;
-}
-.lab-field > .lab-field-row {
-  display: flex;
-  width: 100%;
-}
-.lab-field-val {
-  font-size: var(--lab-t-body);
-  font-weight: var(--lab-w-bold);
-  font-variant-numeric: tabular-nums;
-  min-width: 3.4em;
-  text-align: end;
-}
-.lab-field > .lab-field-row > .lab-field-val {
-  margin-inline-start: auto;
-}
-.lab-field .lab-slider {
-  flex: 1 1 auto;
-  width: auto;
-  min-width: 60px;
-}
-/* A slider must read as a TRACK even at its minimum. shadcn paints the track `bg-muted`, which is
-   the same tone as the controls dock it sits on, so a slider at value 0 (a scrubber before Play,
-   most obviously) showed only its thumb: a stray dot with no control around it. */
-.lab-slider [data-slot="slider-track"] {
-  background: color-mix(in oklab, var(--stage-fg) 15%, transparent);
-}
-.lab-locked-wrap {
-  display: contents;
-}
-.lab-field[data-locked="true"] .lab-field-row {
-  opacity: 0.62;
-}
-.lab-field-lock {
-  display: inline-block;
-  width: 0.82em;
-  height: 0.82em;
-  margin-inline-start: 0.3em;
-  vertical-align: -0.05em;
-  opacity: 0.7;
-}
-
-/* ── Play-gate for hand-driven sim labs ────────────────────────────────────── */
-.lab-playwrap {
-  position: relative;
-}
-.lab-play-toggle {
-  position: absolute;
-  inset-block-start: var(--lab-sp-10);
-  inset-inline-end: var(--lab-sp-10);
-  z-index: var(--lab-z-raised);
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lab-sp-6);
-  min-width: 34px;
-  height: 32px;
-  padding: 0 var(--lab-sp-12);
-  border-radius: var(--lab-r-pill);
-  border: 1px solid var(--lab-border-strong);
-  background: color-mix(in oklab, var(--lab-surface) 88%, transparent);
-  color: var(--lab-fg);
-  cursor: pointer;
-  font-size: var(--lab-t-sm);
-  font-weight: var(--lab-w-semibold);
-  box-shadow: var(--lab-shadow-sm);
-  transition:
-    filter var(--lab-dur-fast),
-    transform var(--lab-dur-fast);
-}
-.lab-play-toggle:hover {
-  filter: brightness(1.05);
-}
-.lab-play-toggle:active {
-  transform: translateY(1px);
-}
-.lab-play-toggle[data-playing="false"] {
-  background: var(--lab-accent);
-  color: var(--lab-accent-fg);
-  border-color: transparent;
-}
-
-/* ── In-lab stepper (teach one idea at a time) ─────────────────────────────── */
-.lab-stepnav {
-  display: flex;
-  align-items: center;
-  gap: var(--lab-sp-14);
-}
-.lab-dots {
-  display: inline-flex;
-  gap: var(--lab-sp-6);
-}
-.lab-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: var(--lab-r-pill);
-  background: var(--lab-border-strong);
-  transition: background var(--lab-dur-base);
-}
-.lab-dot[data-on="true"] {
-  background: var(--lab-accent);
-}
-
-:root {
-  --lang-pos-noun: oklch(0.5 0.13 264);
-  --lang-pos-verb: oklch(0.53 0.18 25);
-  --lang-pos-article: oklch(0.52 0.12 150);
-  --lang-pos-adjective: oklch(0.55 0.12 60);
-  --lang-pos-preposition: oklch(0.52 0.12 235);
-  --lang-pos-pronoun: oklch(0.52 0.16 300);
-  --lang-pos-conjunction: oklch(0.55 0.16 350);
-  --lang-pos-adverb: oklch(0.52 0.11 195);
-  --lang-pos-other: oklch(0.5 0.02 260);
-}
-
-.lang-lab {
-  position: relative;
-}
-
-/* 600px held every language figure to well under its column on desktop. */
-.lang-lab {
-  max-width: min(100%, 46rem);
-  margin-inline: auto;
-}
-.lang-sentence,
-.lang-listen-play,
-.lang-dictation-foot,
-.lang-bank,
-.lang-line {
-  justify-content: center;
-}
-.lang-cloze,
-.lang-errsentence,
-.lang-why {
-  text-align: center;
-}
-.lang-match {
-  margin-inline: auto;
-}
-.lang-lab .lab-misconception {
-  display: flex;
-  width: fit-content;
-  margin-inline: auto;
-}
-.lang-hint {
-  font-size: var(--lab-t-sm);
-  color: var(--lab-muted);
-  margin: 0 0 var(--lab-sp-10);
-}
-.lang-prompt {
-  font-size: var(--lab-t-lg);
-  font-weight: var(--lab-w-medium);
-  margin: 0 0 var(--lab-sp-12);
-  color: var(--lab-fg);
-}
-
-.lang-tile {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1px;
-  padding: var(--lab-sp-8) var(--lab-sp-14);
-  border: 0;
-  border-radius: var(--lab-r-md);
-  background: var(--pos, var(--lang-pos-other));
-  color: var(--lab-accent-fg);
-  font-weight: var(--lab-w-semibold);
-  font-size: var(--lab-t-body);
-  line-height: var(--lab-lh-title);
-  cursor: pointer;
-  box-shadow: var(--lab-shadow-sm);
-  transition:
-    transform var(--lab-dur-fast),
-    filter var(--lab-dur-fast),
-    box-shadow var(--lab-dur-fast);
-}
-.lang-tile:hover {
-  filter: brightness(1.08);
-}
-.lang-tile:active {
-  transform: translateY(1px);
-}
-.lang-tile[data-sel="true"] {
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pos) 55%, transparent);
-}
-.lang-tile[data-dim="true"] {
-  opacity: 0.4;
-}
-.lang-tile-text {
-  font-size: var(--lab-t-body);
-}
-.lang-tile-gloss {
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-medium);
-  opacity: 0.82;
-}
-
-.lang-line {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--lab-sp-8);
-  align-items: center;
-  min-height: 56px;
-  padding: var(--lab-sp-12);
-  border-radius: var(--lab-r-lg);
-  border: 2px dashed var(--lab-border-strong);
-  background: var(--lab-sunken);
-  transition:
-    border-color var(--lab-dur-fast),
-    background var(--lab-dur-fast);
-}
-.lang-line[data-state="ok"] {
-  border-style: solid;
-  border-color: var(--lab-good);
-  background: var(--lab-good-soft);
-}
-.lang-line[data-state="no"] {
-  border-color: var(--lab-danger);
-}
-.lang-line-empty {
-  font-size: var(--lab-t-sm);
-  color: var(--lab-muted);
-}
-.lang-bank {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--lab-sp-8);
-  margin-top: var(--lab-sp-12);
-}
-
-.lang-speak {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  margin-inline-start: 2px;
-  border: 0;
-  border-radius: var(--lab-r-pill);
-  background: color-mix(in oklab, currentColor 12%, transparent);
-  color: inherit;
-  font-size: var(--lab-t-sm);
-  cursor: pointer;
-  transition: background var(--lab-dur-fast);
-}
-@media (hover: hover) and (pointer: fine) {
-  .lang-speak:hover {
-    background: color-mix(in oklab, var(--lab-accent) 22%, transparent);
-  }
-}
-
-.lang-match {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--lab-sp-10) var(--lab-sp-24);
-  max-width: 520px;
-}
-.lang-col {
-  display: flex;
-  flex-direction: column;
-  gap: var(--lab-sp-8);
-}
-.lang-match-row {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.lang-match-row .lang-match-cell {
-  flex: 1;
-  padding-inline-end: 40px;
-}
-.lang-match-row .lang-speak {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-end: var(--lab-sp-8);
-  transform: translateY(-50%);
-  margin: 0;
-}
-.lang-cell-sub {
-  font-size: var(--lab-t-eyebrow);
-  color: var(--lab-muted);
-  font-weight: var(--lab-w-regular);
-}
-.lang-cell-icon {
-  font-size: 36px;
-  line-height: var(--lab-lh-tight);
-}
-.lang-icon-image {
-  object-fit: contain;
-}
-.lang-icon-svg {
-  display: inline-flex;
-}
-@keyframes lang-shake {
-  0%,
-  100% {
-    transform: translateX(0);
-  }
-  25% {
-    transform: translateX(-4px);
-  }
-  75% {
-    transform: translateX(4px);
-  }
-}
-
-/* Language activities share the same responsive anatomy while keeping their
-   domain-specific tiles, passages, audio, and grammar scenes. */
-.language-activity .lab-activity-status {
-  justify-content: flex-start;
-}
-.language-activity .lab-activity-workspace {
-  padding: clamp(0.75rem, 2.2vw, 1.25rem);
-}
-.language-activity .lab-activity-canvas {
-  align-content: start;
-}
-.language-activity-support {
-  padding: 0 var(--lab-sp-16) var(--lab-sp-14);
-}
-.language-activity-support > .lab-challenge {
-  margin: 0;
-}
-.language-activity .lab-activity-transport {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  min-height: 4rem;
-}
-.language-activity .lab-activity-transport .lab-btn,
-.language-activity .lang-audio-action {
-  border-radius: var(--lab-r-md);
-}
-.lang-audio-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--lab-sp-8);
-  min-height: var(--lab-target);
-  padding-inline: var(--lab-sp-16);
-}
-.lang-listen-play {
-  display: flex;
-  justify-content: center;
-  margin: 0 0 var(--lab-sp-16);
-}
-.lang-listen-play .lang-audio-action {
-  min-width: 8.5rem;
-}
-
-.lang-listening-choices .lab-choices {
-  justify-content: center;
-}
-
-.lang-listening-choices[data-layout="picture"] .lab-choice {
-  min-width: 5rem;
-  min-height: 4.5rem;
-}
-
-@container lab-activity (max-width: 42.5rem) {
-  .language-activity .lab-activity-workspace {
-    padding: var(--lab-sp-12);
-  }
-  .language-activity-support {
-    padding-inline: var(--lab-sp-12);
-  }
-  .language-activity .lang-match {
-    gap: var(--lab-sp-8);
-  }
-  .language-activity .lang-choice {
-    padding-inline: var(--lab-sp-14);
-  }
-}
-
-.lang-sentence {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--lab-sp-8);
-  font-size: var(--lab-t-title);
-  font-weight: var(--lab-w-medium);
-  color: var(--lab-fg);
-  margin: var(--lab-sp-6) 0 var(--lab-sp-16);
-}
-.lang-cloze {
-  font-size: var(--lab-t-lg);
-  line-height: 2.4;
-  font-weight: var(--lab-w-medium);
-  color: var(--lab-fg);
-  margin: var(--lab-sp-6) 0 var(--lab-sp-16);
-}
-.lang-cloze .lang-speak {
-  vertical-align: middle;
-}
-.lang-dictation-foot {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--lab-sp-12);
-  margin-top: var(--lab-sp-12);
-}
-.lang-dictation-card {
-  width: min(100%, 32rem);
-  margin-inline: auto;
-  overflow: hidden;
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-lg);
-  background: var(--lab-surface);
-  box-shadow: var(--lab-shadow-sm);
-}
-.lang-dictation-toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--lab-sp-12);
-  padding: var(--lab-sp-12);
-  border-bottom: 1px solid var(--lab-border);
-  background: var(--lab-sunken);
-}
-.lang-dictation-toolbar > span {
-  color: var(--lab-muted);
-  font-size: var(--lab-t-sm);
-}
-.lang-dictation-toolbar .lang-audio-action {
-  flex: none;
-  min-height: var(--lab-target);
-  border: 1px solid var(--lab-accent-edge);
-  background: var(--lab-surface);
-  color: var(--lab-accent);
-  box-shadow: none;
-}
-.lang-dictation-answer {
-  display: grid;
-  gap: var(--lab-sp-6);
-  padding: var(--lab-sp-16) var(--lab-sp-16) 0;
-}
-.lang-dictation-answer > label {
-  color: var(--lab-muted);
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-semibold);
-  letter-spacing: var(--lab-ls-caps);
-  text-transform: uppercase;
-}
-.lang-dictation-input-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--lab-sp-8);
-}
-.lang-dictation-input-row .lab-input {
-  width: 100%;
-  min-height: var(--lab-target);
-}
-.lang-dictation-input-row .lab-btn {
-  min-width: 5.5rem;
-  border-radius: var(--lab-r-md);
-}
-.lang-dictation-card .lang-dictation-foot {
-  padding: 0 var(--lab-sp-16) var(--lab-sp-16);
-}
-@container lab-activity (max-width: 32rem) {
-  .lang-dictation-toolbar > span {
-    display: none;
-  }
-  .lang-dictation-toolbar .lang-audio-action {
-    width: 100%;
-  }
-  .lang-dictation-input-row {
-    grid-template-columns: 1fr;
-  }
-  .lang-dictation-input-row .lab-btn {
-    width: 100%;
-  }
-}
-.lang-reveal {
-  font-size: var(--lab-t-lg);
-  font-weight: var(--lab-w-bold);
-  letter-spacing: var(--lab-ls-caps);
-  color: var(--lab-fg);
-  font-variant-numeric: tabular-nums;
-}
-.lang-errsentence {
-  font-size: var(--lab-t-title);
-  line-height: 2;
-  font-weight: var(--lab-w-medium);
-  color: var(--lab-fg);
-  margin: var(--lab-sp-6) 0 var(--lab-sp-12);
-}
-.lang-word {
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  padding: 2px var(--lab-sp-2);
-  border-radius: var(--lab-r-sm);
-  cursor: pointer;
-  transition:
-    background var(--lab-dur-fast),
-    color var(--lab-dur-fast),
-    transform var(--lab-dur-fast);
-}
-@media (hover: hover) and (pointer: fine) {
-  .lang-word:hover:not(:disabled) {
-    background: var(--lab-accent-soft);
-  }
-}
-.lang-word[data-state="no"] {
-  color: var(--lab-danger);
-  background: var(--lab-danger-soft);
-  animation: lang-shake 0.42s;
-}
-.lang-word:disabled {
-  cursor: default;
-}
-.lang-fix {
-  padding: 2px var(--lab-sp-8);
-  border-radius: var(--lab-r-sm);
-  font-weight: var(--lab-w-bold);
-  color: var(--lab-good);
-  background: var(--lab-good-soft);
-}
-.lang-reading {
-  display: grid;
-  gap: var(--lab-sp-12);
-}
-.lang-passage {
-  padding: var(--lab-sp-16) var(--lab-sp-16);
-  border-radius: var(--lab-r-lg);
-  background: var(--lab-sunken);
-  font-size: var(--lab-t-body);
-  line-height: var(--lab-lh-prose);
-  color: var(--lab-fg);
-  max-width: 68ch;
-}
-.lang-passage p {
-  margin: 0 0 var(--lab-sp-10);
-}
-.lang-passage p:last-child {
-  margin-bottom: 0;
-}
-.lang-gloss {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--lab-sp-6) var(--lab-sp-16);
-  font-size: var(--lab-t-sm);
-  color: var(--lab-muted);
-}
-.lang-gloss-row b {
-  color: var(--lab-fg);
-  font-weight: var(--lab-w-semibold);
-}
-.lang-blank {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 52px;
-  padding: 2px var(--lab-sp-12);
-  border-radius: var(--lab-r-sm);
-  border: 2px dashed var(--lab-border-strong);
-  background: var(--lab-sunken);
-  font-weight: var(--lab-w-bold);
-}
-.lang-blank[data-state="ok"] {
-  border-style: solid;
-  border-color: var(--lab-good);
-  color: var(--lab-good);
-  background: var(--lab-good-soft);
-}
-.lang-blank[data-state="no"] {
-  border-style: solid;
-  border-color: var(--lab-danger);
-  color: var(--lab-danger);
-}
-.lang-noun,
-.lang-subject {
-  font-weight: var(--lab-w-semibold);
-}
-.lang-subject[data-ok="true"] {
-  color: var(--lang-pos-pronoun);
-}
-.lang-link {
-  color: var(--lab-good);
-  font-weight: var(--lab-w-bold);
-}
-.lang-why {
-  font-size: var(--lab-t-body);
-  font-weight: var(--lab-w-medium);
-  margin: var(--lab-sp-12) 0 0;
-}
-.lang-why[data-state="ok"] {
-  color: var(--lab-good);
-}
-.lang-why[data-state="no"] {
-  color: var(--lab-muted);
-}
-
-.lang-from {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--lab-sp-8);
-  align-items: center;
-  opacity: 0.85;
-}
-.lang-from .lang-tile {
-  filter: saturate(0.7);
-  cursor: default;
-}
-.lang-arrow {
-  font-size: var(--lab-t-title);
-  font-weight: var(--lab-w-bold);
-  color: var(--lab-muted);
-  margin: var(--lab-sp-4) 0;
-  text-align: center;
-  width: 100%;
-}
-
-.lang-scene {
-  display: flex;
-  justify-content: center;
-  padding: var(--lab-sp-4) 0 var(--lab-sp-10);
-}
-.lang-prepscene {
-  position: relative;
-  width: 240px;
-  height: 172px;
-  overflow: hidden;
-  border-radius: var(--lab-r-md);
-  border: 1px solid var(--lab-border);
-  background: color-mix(in oklab, currentColor 3%, transparent);
-}
-.lang-preplandmark {
-  position: absolute;
-  left: var(--landmark-x, 50%);
-  top: 56%;
-  transform: translate(-50%, -50%);
-  font-size: 62px;
-  line-height: var(--lab-lh-tight);
-}
-.lang-prepfig {
-  position: absolute;
-  font-size: 38px;
-  line-height: var(--lab-lh-tight);
-  filter: drop-shadow(0 1px 1.5px color-mix(in oklab, currentColor 30%, transparent));
-}
-.lang-backdrop {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-}
-.lang-backdrop[data-kind="sky"] {
-  background:
-    radial-gradient(
-      circle at 78% 18%,
-      color-mix(in oklab, var(--stage-warn) 38%, transparent) 0 8%,
-      transparent 9%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in oklab, var(--stage-accent) 24%, var(--stage-bg)),
-      var(--stage-bg)
-    );
-}
-.lang-backdrop[data-kind="water"] {
-  top: 48%;
-  border-radius: var(--lab-r-lg) var(--lab-r-lg) 0 0 / var(--lab-r-md) var(--lab-r-md) 0 0;
-  background:
-    repeating-linear-gradient(
-      170deg,
-      transparent 0 0.8rem,
-      color-mix(in oklab, white 22%, transparent) 0.85rem 0.95rem
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in oklab, var(--stage-accent) 65%, #7fc8ff),
-      color-mix(in oklab, var(--stage-accent) 80%, #174f92)
-    );
-}
-.lang-backdrop[data-kind="ground"] {
-  top: 68%;
-  background:
-    radial-gradient(
-      ellipse at 20% 0,
-      color-mix(in oklab, var(--stage-good) 40%, transparent) 0 28%,
-      transparent 30%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in oklab, var(--stage-good) 58%, #9bd178),
-      color-mix(in oklab, var(--stage-good) 75%, #4d7b36)
-    );
-}
-.lang-backdrop[data-kind="room"] {
-  background:
-    linear-gradient(
-      90deg,
-      transparent 49.5%,
-      color-mix(in oklab, var(--stage-grid) 65%, transparent) 50%,
-      transparent 50.5%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in oklab, var(--stage-warn) 8%, var(--stage-bg)) 0 62%,
-      color-mix(in oklab, var(--stage-warn) 22%, var(--stage-bg)) 62%
-    );
-}
-.lang-backdrop-sun {
-  position: absolute;
-  inset-block-start: var(--lab-sp-10);
-  inset-inline-end: var(--lab-sp-14);
-  width: 1.5rem;
-  height: 1.5rem;
-  color: var(--stage-warn);
-}
-.lang-feedback {
-  margin-top: var(--lab-sp-12);
-}
-.lang-match[data-layout="picture"] {
-  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
-}
-
-.lang-typegrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: var(--lab-sp-12);
-}
-.lang-typecard {
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-md);
-  padding: var(--lab-sp-6) var(--lab-sp-8) var(--lab-sp-10);
-  background: var(--lab-surface);
-  min-width: 0;
-}
-.lang-typecard svg {
-  width: 100%;
-  height: auto;
-  max-width: 100%;
-}
-.lang-typename {
-  font-weight: var(--lab-w-semibold);
-  font-size: var(--lab-t-body);
-  margin: var(--lab-sp-4) 0 0;
-  color: var(--lab-fg);
-}
-.lang-typecap {
-  font-size: var(--lab-t-eyebrow);
-  color: var(--lab-muted);
-  margin: 1px 0 0;
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   ANIMATIONS
-   ═══════════════════════════════════════════════════════════════════════════ */
-/* river current — wave streaks drift downstream */
-.lab-river-wave {
-  animation-name: stage-river-drift;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  will-change: transform;
-}
-@keyframes stage-river-drift {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(28px);
-  }
-}
-/* annotation kit — a Spotlight ring pulses outward to draw the eye */
-.lab-pulse {
-  animation: lab-pulse 1.5s var(--lab-ease) infinite;
-}
-@keyframes lab-pulse {
-  0% {
-    transform: scale(0.55);
-    opacity: 0.75;
-  }
-  100% {
-    transform: scale(1.9);
-    opacity: 0;
-  }
-}
-/* ═════════════════════════════════════════════════════════════════════════
-   CELEBRATION + PREDICT-GATE + LESSON PROGRESS (engagement kit)
-   ═════════════════════════════════════════════════════════════════════════ */
-/* celebrate — one-shot confetti burst anchored to the success pill */
-.lab-celebrate {
-  position: relative;
-  display: inline-flex;
-}
-.lab-confetti {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-  z-index: var(--lab-z-overlay);
-}
-.lab-confetti span {
-  position: absolute;
-  left: -3px;
-  top: -3px;
-  width: 7px;
-  height: 7px;
-  border-radius: 2px;
-  background: var(--c, var(--lab-accent));
-  opacity: 0;
-  animation: lab-confetti-fly 0.8s var(--lab-ease) forwards;
-  will-change: transform, opacity;
-}
-@keyframes lab-confetti-fly {
-  0% {
-    opacity: 1;
-    transform: translate(0, 0) rotate(0) scale(1);
-  }
-  70% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.6);
-  }
-}
-.lab-pop {
-  animation: lab-pop var(--lab-dur-slow) var(--lab-ease-spring);
-}
-@keyframes lab-pop {
-  0% {
-    transform: scale(0.82);
-  }
-  60% {
-    transform: scale(1.08);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-/* value flash — a readout/stat value pops accent when it changes, so the
-   learner SEES which number their drag is driving (cause → effect) */
-.lab-val-flash {
-  animation: lab-val-flash 0.5s var(--lab-ease);
-}
-@keyframes lab-val-flash {
-  0% {
-    color: var(--lab-accent);
-  }
-  100% {
-    color: inherit;
-  }
-}
-/* predict-gate — show an intentional preview state without mounting or leaking
-   the model that the prediction is meant to precede. */
-.lab-predict-gate {
-  display: flex;
-  flex-direction: column;
-  gap: var(--lab-sp-12);
-}
-.lab-predict-body {
-  min-width: 0;
-}
-.lab-predict-lock {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  justify-content: center;
-  gap: 2px var(--lab-sp-14);
-  /* Sized to the one line it holds. It was 8-13rem of empty dashed panel, which nobody had seen
-     because no lab used PredictGate: on the first adopter it became the largest thing on the
-     opening screen, under the choice it is asking the learner to make. */
-  min-height: clamp(4.5rem, 12cqw, 6.5rem);
-  padding: var(--lab-sp-16);
-  border: 1px dashed var(--lab-border-strong);
-  border-radius: var(--lab-r-lg);
-  color: var(--lab-fg);
-  background: color-mix(in oklab, var(--lab-muted) 4%, var(--lab-surface));
-}
-.lab-predict-lock-mark {
-  grid-row: 1 / span 2;
-  display: inline-grid;
-  place-items: center;
-  width: 2.25rem;
-  height: 2.25rem;
-  border-radius: var(--lab-r-pill);
-  color: var(--lab-accent);
-  background: var(--lab-accent-soft);
-  font-weight: var(--lab-w-bold);
-}
-.lab-predict-lock strong {
-  align-self: end;
-  font-size: var(--lab-t-body);
-}
-.lab-predict-lock > span:last-child {
-  align-self: start;
-  color: var(--lab-muted);
-  font-size: var(--lab-t-sm);
-  line-height: var(--lab-lh-ui);
-}
-/* ── Networking: vendor-neutral topology, packet layers, and accessible transcript ── */
-.lab-activity {
-  display: flex;
-  flex-direction: column;
-  container: lab-activity / inline-size;
-  overflow: hidden;
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-lg);
-  background: var(--background, var(--stage-bg));
-  color: var(--foreground, var(--stage-fg));
-  box-shadow:
-    0 1px 2px color-mix(in oklab, currentColor 5%, transparent),
-    0 8px 24px color-mix(in oklab, currentColor 3%, transparent);
-}
-.lab-activity[data-focus] {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 100dvw;
-  overflow: auto;
-  overflow-x: hidden;
-  min-height: 100dvh;
-  border: 0;
-  border-radius: 0;
-  padding: clamp(0.75rem, 2vw, 1.5rem);
-  background: var(--background, var(--stage-bg));
-}
-.lab-activity[data-focus]:not(:fullscreen) {
-  position: fixed;
-  inset: 0;
-  z-index: var(--lab-z-top);
-}
-.lab-activity[data-focus] > *,
-.lab-activity[data-focus] .lab-activity-workspace,
-.lab-activity[data-focus] .lab-activity-canvas {
-  min-width: 0;
-  max-width: 100%;
-}
-.lab-activity[data-focus] > * {
-  width: min(100%, 100rem);
-  margin-inline: auto;
-}
-.lab-activity[data-focus][data-focus-layout="compact"] > * {
-  width: min(100%, 68rem);
-}
-.lab-activity[data-focus][data-focus-layout="immersive"] .lab-scene-viewport {
-  height: clamp(22rem, 58dvh, 42rem);
-}
-@media (min-width: 64rem) {
-  .lab-activity[data-focus][data-focus-layout="compact"]
-    .lab-activity-workspace:has(> .lab-activity-inspector) {
-    grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
-    align-items: stretch;
-  }
-  .lab-activity[data-focus][data-focus-layout="compact"]
-    .lab-activity-workspace
-    > .lab-activity-inspector {
-    min-width: 0;
-    border-inline-start: 1px solid var(--border, var(--stage-grid));
-  }
-}
-@media (max-width: 48rem) {
-  .lab-activity[data-focus] {
-    padding: 0;
-  }
-  .lab-activity[data-focus][data-focus-layout="immersive"] .lab-scene-viewport,
-  .lab-activity[data-focus][data-focus-layout="immersive"] .lab-scene-viewport[data-size] {
-    height: clamp(15rem, 72vw, 22rem);
-  }
-}
-.lab-activity-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--lab-sp-12);
-  padding: var(--lab-sp-12) var(--lab-sp-16) var(--lab-sp-10);
-}
-.lab-activity-heading {
-  min-width: 0;
-}
-.lab-activity-eyebrow {
-  display: block;
-  margin-bottom: var(--lab-sp-4);
-  color: var(--primary, var(--stage-accent));
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-bold);
-  letter-spacing: var(--lab-ls-caps);
-  text-transform: uppercase;
-}
-/* The one thing allowed to be a heading. Capped at 20px it matched the step lead and the readout
-   values, so a learner met no hierarchy at all. Scales with the column: phone to full width. */
-.lab-activity-heading h3 {
-  margin: 0;
-  font-size: clamp(1.25rem, 2.4cqi, 1.75rem);
-  font-weight: var(--lab-w-bold);
-  line-height: var(--lab-lh-title);
-  letter-spacing: var(--lab-ls-tight);
-  text-wrap: balance;
-}
-/* Read, not scanned, so reading size on reading leading. It was 14px: a control-label size. */
-.lab-activity-description {
-  margin: var(--lab-sp-4) 0 0;
-  max-width: 42rem;
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-sm);
-  line-height: var(--lab-lh-ui);
-  text-wrap: pretty;
-}
-.lab-activity-focus {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: var(--lab-sp-6);
-  min-width: var(--lab-target);
-  min-height: var(--lab-target-compact);
-  padding: var(--lab-sp-4) var(--lab-sp-8);
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-sm);
-  background: var(--background, var(--stage-bg));
-  color: var(--foreground, var(--stage-fg));
-  font: inherit;
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-semibold);
-  cursor: pointer;
-}
-@media (hover: hover) and (pointer: fine) {
-  .lab-activity-focus:hover {
-    background: var(--accent, color-mix(in oklab, currentColor 6%, transparent));
-  }
-}
-.lab-activity-focus svg {
-  width: 1rem;
-  height: 1rem;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.lab-activity-status {
-  display: flex;
-  align-items: center;
-  gap: var(--lab-sp-10);
-  min-width: 0;
-  font-variant-numeric: tabular-nums;
-  padding: var(--lab-sp-10) var(--lab-sp-16);
-  border-block: 1px solid var(--border, var(--stage-grid));
-  background: color-mix(
-    in oklab,
-    var(--muted, currentColor) 52%,
-    var(--background, var(--stage-bg))
-  );
-  font-size: var(--lab-t-eyebrow);
-}
-.lab-activity-status > * + * {
-  padding-inline-start: var(--lab-sp-10);
-  border-inline-start: 1px solid var(--border, var(--stage-grid));
-}
-/* The line of readings inside the strip: "Pendulum · x 12 cm · T 2.84 s · f 0.35 Hz".
-
-   WRAPPING IS THE POINT. This was written out as an identical inline style in seven labs, and none
-   of them said what should happen when the readings are wider than the card. A flex item's minimum
-   width is its content, so the line could not shrink: it ran off the right edge of the lab and the
-   card's own `overflow: hidden` cut the last reading in half. Three labs were losing a word each
-   ("Copper", "proportional", "f 0.35 Hz") and the rest were one longer material name away from it.
-
-   A reading is a whole unit, so `wrap` breaks between readings and never inside one. The strip
-   grows a line instead of swallowing a value.
-
-   The copies also set a 13px font size, which is not on the type scale and never was: it was
-   reachable only because an inline style outranks the stylesheet. `.lab-activity-status` already
-   declares the size this strip is meant to be, so the line simply inherits it now. The gap and the
-   weight were on the scale all along and keep their exact values. */
-.lab-status-line {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--lab-sp-8);
-  min-width: 0;
-  font-weight: var(--lab-w-semibold);
-}
-/* A measurement the learner has not earned yet. It holds its slot so the strip keeps its shape
-   when the number arrives, and reads as clearly absent rather than as a value of zero. */
-.lab-activity-measured-pending {
-  color: var(--lab-muted);
-  opacity: 0.55;
-}
-.lab-activity-workspace {
-  display: grid;
-  gap: var(--lab-sp-12);
-  padding: var(--lab-sp-12);
-}
-.lab-activity[data-inspector-layout="stacked"] .lab-activity-workspace {
-  grid-template-columns: minmax(0, 1fr);
-}
-.lab-activity[data-inspector-layout="stacked"] .lab-activity-workspace > .lab-activity-inspector {
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-md);
-  background: var(--card, var(--stage-bg));
-}
-.lab-activity-canvas {
-  display: grid;
-  gap: var(--lab-sp-10);
-  min-width: 0;
-  align-content: start;
-  isolation: isolate;
-  /* Keep touch-sized wide figures reachable on narrow screens. */
-  overflow-x: auto;
-  overscroll-behavior-x: contain;
-}
-.lab-activity-dock {
-  min-width: 0;
-}
-.lab-activity-feedback {
-  display: grid;
-  /* minmax(0, 1fr), not 1fr: a grid track is at least min-content wide by default, so the longest
-     word in the sentence set a floor the callout could not go below and it overhung the card on a
-     phone. Below 22rem the label stops sharing the row with the sentence. */
-  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
-  align-items: baseline;
-  gap: var(--lab-sp-10);
-  margin: 0 var(--lab-sp-12) var(--lab-sp-12);
-  /* The callout is inset from a full-bleed column, so it stretches to the column and its own
-     margins then hang over the edge. Cap it at the room its margins leave. */
-  max-width: calc(100% - 2 * var(--lab-sp-12));
-  padding: var(--lab-sp-10) var(--lab-sp-12);
-  border: 0;
-  border-inline-start: 3px solid var(--primary, var(--stage-accent));
-  border-start-start-radius: 0.2rem;
-  border-end-start-radius: 0.2rem;
-  border-start-end-radius: 0.65rem;
-  border-end-end-radius: 0.65rem;
-  background: color-mix(
-    in oklab,
-    var(--primary, var(--stage-accent)) 2.5%,
-    var(--card, var(--stage-bg))
-  );
-}
-/* The step's task sits in the flow above the figure — no second tinted bar under the
-   status strip. The lead IS the question the learner is answering, so it reads as body
-   text in the foreground colour, not as muted fine print. */
-.lab-authored-task {
-  display: grid;
-  gap: var(--lab-sp-8);
-  padding: var(--lab-sp-10) var(--lab-sp-16);
-  border-top: 1px solid var(--border, var(--stage-grid));
-}
-/* An authored question is already a semantic section of Activity. Its challenge
-   must not draw a second card inside that section: one boundary, one prompt,
-   one response row. Standalone ChallengeCard instances retain their card. */
-.lab-authored-task > .lab-challenge {
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  background: transparent;
-}
-.lab-authored-task-lead {
-  margin: 0;
-  max-width: 62ch;
-  color: var(--foreground, var(--stage-fg));
-  font-size: var(--lab-t-sm);
-  font-weight: var(--lab-w-medium);
-  line-height: var(--lab-lh-ui);
-  text-wrap: pretty;
-}
-/* The instruction standing alone over the model, rather than heading a stack of answer rows. It
-   carries the padding the task section used to give it, and no rule of its own: it reads as a
-   caption on the figure below, not as another band. */
-.lab-authored-lead-solo {
-  padding: var(--lab-sp-10) var(--lab-sp-16) var(--lab-sp-4);
-  font-size: var(--lab-t-sm);
-}
-@container lab-activity (max-width: 22rem) {
-  .lab-activity-feedback {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-.lab-activity-feedback > span:first-child {
-  color: var(--primary, var(--stage-accent));
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-bold);
-  letter-spacing: var(--lab-ls-caps);
-  text-transform: uppercase;
-}
-.lab-activity-feedback > div,
-.lab-activity-feedback p {
-  margin: 0;
-  font-size: var(--lab-t-sm);
-  line-height: var(--lab-lh-ui);
-}
-.lab-activity-inspector {
-  overflow: hidden;
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-md);
-  background: var(--card, var(--stage-bg));
-}
-.lab-activity-inspector > summary {
-  display: none;
-  cursor: pointer;
-  padding: var(--lab-sp-12) var(--lab-sp-12);
-  min-height: var(--lab-target);
-  font-size: var(--lab-t-sm);
-  font-weight: var(--lab-w-semibold);
-}
-.lab-activity-inspector-body {
-  min-width: 0;
-}
-.lab-activity-inspector-section {
-  display: grid;
-  gap: var(--lab-sp-16);
-  padding: var(--lab-sp-16);
-}
-.lab-activity-fields {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: end;
-  gap: var(--lab-sp-10);
-}
-
-/* Every control gets a real basis. Without one a Field falls back to its content width, and a
-   Field holding a Slider has almost no content width (the Slider is a div, not an input), so a
-   chip group beside it took the whole row and squeezed the slider to its 60px floor. `:has` also
-   covers labs that wrap their Fields in a plain <div>, which a `>` selector would miss. */
-.lab-activity-fields:not(.lab-authored-controls) > :is(.lab-field, :has(> .lab-field)) {
-  flex: 1 1 15rem;
-  /* `fit-content`, not 0: a field never shrinks below what it actually has to draw. A segmented
-     track used to overflow its share and run under the next control's label, and the slider
-     beside it collapsed to a ~40px stub. Now the row wraps instead, which it already allows.
-     (This cannot be scoped to chip rows with `:has`: CSS forbids `:has()` inside `:has()`, so
-     such a rule is invalid and silently dropped.) */
-  min-width: fit-content;
-}
-@media (max-width: 30rem) {
-  /* One control per line at phone widths: let them shrink again rather than scroll the page. */
-  .lab-activity-fields > :is(.lab-field, :has(> .lab-field)) {
-    min-width: 0;
-  }
-}
-/* ── Bench panel ───────────────────────────────────────────────────────────────
-   Instruments as equipment BESIDE the diagram, never objects inside it (rationale in
-   src/kit/instruments.tsx). Layout ONLY: no border, radius or fill, because rule 1 is one bordered
-   container per lab and the dock hairline already delimits this. The instruments carry their own
-   depth, so they read as objects on the card rather than needing a box drawn round them. */
-.lab-bench {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: var(--lab-sp-20);
-  padding-block: var(--lab-sp-8);
-}
-.lab-bench > .lab-field {
-  flex: 0 0 auto;
-}
-/* The panel is a BAND: sized to content it wraps its own children onto stray rows. */
-.lab-activity-fields > .lab-bench {
-  flex: 1 1 100%;
-}
-.lab-bench .lab-field-row {
-  align-items: center;
-  gap: var(--lab-sp-8);
-}
-.lab-bench .lab-field-val {
-  min-width: 0;
-}
-.lab-bench-meter {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-}
-
-/* ── Authored lesson shell ──────────────────────────────────────────────────────
-   One scene-first container. The model is the hero, its controls form a compact dock,
-   and explanatory evidence stays contextual until the learner asks for it. */
-.lab-authored-activity[data-inspector-layout="stacked"] .lab-activity-workspace {
-  gap: 0;
-  padding: var(--lab-sp-12) 0 0;
-}
-.lab-authored-activity[data-inspector-layout="stacked"] .lab-activity-canvas {
-  padding: 0 var(--lab-sp-12) var(--lab-sp-12);
-}
-.lab-authored-activity .lab-activity-dock {
-  border-top: 1px solid color-mix(in oklab, var(--border, var(--stage-grid)) 70%, transparent);
-  background: color-mix(
-    in oklab,
-    var(--muted, currentColor) 28%,
-    var(--background, var(--stage-bg))
-  );
-}
-.lab-authored-activity[data-inspector-layout="stacked"]
-  .lab-activity-workspace
-  > .lab-activity-inspector {
-  border: 0;
-  border-top: 1px solid var(--border, var(--stage-grid));
-  border-radius: 0;
-  background: transparent;
-}
-.lab-authored-activity .lab-activity-inspector > summary {
-  display: list-item;
-  padding-inline: var(--lab-sp-16);
-  color: var(--muted-foreground, var(--stage-muted));
-}
-.lab-authored-activity .lab-activity-inspector[open] > summary {
-  border-bottom: 1px solid color-mix(in oklab, var(--border, var(--stage-grid)) 70%, transparent);
-  color: var(--foreground, var(--stage-fg));
-}
-.lab-authored-evidence {
-  display: grid;
-  gap: var(--lab-sp-10) var(--lab-sp-24);
-  padding: var(--lab-sp-14) var(--lab-sp-16);
-}
-.lab-authored-evidence > .lab-evidence-surface,
-.lab-authored-evidence > .lab-metric-list {
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  background: transparent;
-}
-.lab-authored-evidence > .lab-metric-list > div {
-  padding-inline: 0;
-}
-.lab-authored-evidence .lab-readout-val {
-  font-size: clamp(1.4rem, 2.6cqi, 1.75rem);
-}
-.lab-authored-evidence > p {
-  grid-column: 1 / -1;
-  margin: 0;
-  max-width: 62ch;
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-eyebrow);
-  line-height: var(--lab-lh-prose);
-}
-.lab-authored-controls {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
-  align-items: end;
-  gap: var(--lab-sp-14) var(--lab-sp-20);
-  padding: var(--lab-sp-12) var(--lab-sp-16);
-}
-.lab-authored-controls > .lab-field {
-  width: 100%;
-}
-/* The dock is a GRID, so an item wider than its column does not wrap, it runs over the next
-   column: a four-option segmented track printed its last option under the control beside it.
-   Grid items default to min-width: auto, so they must be told they may shrink; a segmented track
-   scrolls in the space it gets (see .lab-segmented) rather than overflowing. The fit-content rule
-   above stays for the FLEX row, where an oversized control wraps to the next line instead. */
-.lab-authored-controls > * {
-  min-width: 0;
-}
-.lab-authored-controls > .physics-simulation-actions {
-  grid-column: 1 / -1;
-}
-@container lab-activity (min-width: 46rem) {
-  .lab-authored-evidence:has(> .lab-evidence-surface + .lab-evidence-surface),
-  .lab-authored-evidence:has(> .lab-evidence-surface + .lab-metric-list) {
-    grid-template-columns: minmax(13rem, 2fr) minmax(0, 3fr);
-    align-items: start;
-  }
-  .lab-authored-evidence > .lab-evidence-surface + .lab-evidence-surface,
-  .lab-authored-evidence > .lab-evidence-surface + .lab-metric-list {
-    padding-inline-start: var(--lab-sp-24);
-    border-inline-start: 1px solid
-      color-mix(in oklab, var(--border, var(--stage-grid)) 70%, transparent);
-  }
-}
-.lab-authored-transcript + .lab-authored-support {
-  margin-top: var(--lab-sp-12);
-  padding-top: var(--lab-sp-12);
-  border-top: 1px solid color-mix(in oklab, var(--border, var(--stage-grid)) 70%, transparent);
-}
-
-/* Mechanic-specific authored shells. They preserve the shared sequence and access behavior while
-   making the scientific object, not repeated chrome, the first phone viewport. Existing labs keep
-   `standard`; new flagships opt into one of these modes deliberately. */
-.lab-authored-activity[data-presentation]:not([data-presentation="standard"]) .lab-activity-status {
-  padding-block: var(--lab-sp-6);
-  background: transparent;
-  border-bottom: 0;
-}
-.lab-authored-activity[data-presentation]:not([data-presentation="standard"])
-  .lab-authored-lead-solo {
-  padding-block: var(--lab-sp-8) var(--lab-sp-4);
-  font-size: var(--lab-t-sm);
-}
-.lab-authored-activity[data-presentation]:not([data-presentation="standard"])
-  .lab-activity-heading
-  h3 {
-  font-size: clamp(1.25rem, 5.5cqi, 1.65rem);
-  line-height: var(--lab-lh-title);
-}
-.lab-authored-activity[data-presentation="observation"] .lab-activity-workspace {
-  padding-top: var(--lab-sp-6);
-}
-.lab-authored-activity[data-presentation="construction"] .lab-activity-dock {
-  position: sticky;
-  bottom: 0;
-  z-index: var(--lab-z-raised);
-}
-.lab-authored-activity[data-presentation="investigation"] .lab-activity-inspector,
-.lab-authored-activity[data-presentation="diagnosis"] .lab-activity-inspector {
-  border-top-style: dashed;
-}
-@container lab-activity (max-width: 30rem) {
-  .lab-authored-activity[data-presentation]:not([data-presentation="standard"])
-    .lab-activity-header {
-    padding: var(--lab-sp-10) var(--lab-sp-12) var(--lab-sp-6);
-  }
-  .lab-authored-activity[data-presentation]:not([data-presentation="standard"])
-    .lab-activity-description {
-    margin-top: 0;
-    font-size: var(--lab-t-sm);
-    line-height: var(--lab-lh-ui);
-  }
-  .lab-authored-activity[data-presentation]:not([data-presentation="standard"])
-    .lab-activity-status {
-    padding-inline: var(--lab-sp-12);
-  }
-  .lab-authored-activity[data-presentation]:not([data-presentation="standard"])
-    .lab-authored-lead-solo {
-    padding-inline: var(--lab-sp-12);
-  }
-}
-/* Segmented control: a labelled row of mutually-exclusive options as ONE compact control (an
-   iOS-style track), not a column of full-width buttons. Reusable for any 2–4 option mode toggle. */
-.lab-segmented-field {
-  display: grid;
-  gap: var(--lab-sp-4);
-}
-.lab-segmented-field > .lab-field-label {
-  font-size: var(--lab-t-eyebrow, 0.68rem);
-  font-weight: var(--lab-w-semibold);
-  letter-spacing: var(--lab-ls-caps);
-  text-transform: uppercase;
-  color: var(--muted-foreground, var(--stage-muted));
-}
-.lab-segmented {
-  display: inline-flex;
-  /* WRAP, do not hide. A four-option track in a narrow dock used to scroll, which
-     left the last mode off-screen with no affordance saying it existed: the
-     learner cannot choose what they cannot see. Wrapping keeps every mode
-     visible; the scroll below is the last resort for one option too wide to fit. */
-  flex-wrap: wrap;
-  gap: var(--lab-sp-2);
-  padding: var(--lab-sp-2);
-  border-radius: var(--lab-r-sm, 6px);
-  background: color-mix(in oklab, var(--stage-fg) 6%, transparent);
-  border: 1px solid color-mix(in oklab, var(--lab-border) 60%, transparent);
-  width: fit-content;
-  max-width: 100%;
-  /* The phone rule above lets a field shrink to avoid scrolling the page, but a segmented track
-     cannot shrink: its options are `nowrap` and `flex: 0 0 auto`. Measured on a 360px screen the
-     track held 813px of options inside a 6px box, so every mode but the first was unreachable and
-     the lab could not be operated at all. Scrolling the track is the standard behaviour for this
-     control and keeps the page itself still. */
-  overflow-x: auto;
-  overscroll-behavior-x: contain;
-  scrollbar-width: thin;
-}
-.lab-segmented > * {
-  flex: 0 0 auto;
-  white-space: nowrap;
-}
-.lab-activity-select-field {
-  display: grid;
-  min-width: min(100%, 15rem);
-  gap: var(--lab-sp-4);
-}
-.lab-activity-select-field > .lab-field-label {
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-eyebrow, 0.68rem);
-  font-weight: var(--lab-w-semibold);
-  letter-spacing: var(--lab-ls-caps);
-  text-transform: uppercase;
-}
-.lab-activity-select {
-  width: 100%;
-  min-width: 0;
-}
-/* One option inside the track, rendered by `Segmented` on the host's ToggleGroup. A track stays
-   on one line; the field's `min-width: fit-content` keeps room for it, so a cramped row wraps the
-   whole field onto the next line rather than clipping a label. */
-.lab-segment {
-  flex: 0 0 auto;
-  min-height: var(--lab-target-compact);
-  padding: var(--lab-sp-2) var(--lab-sp-10);
-  border: 1px solid transparent;
-  border-radius: calc(var(--lab-r-sm, 6px) - 1px);
-  background: transparent;
-  box-shadow: none;
-  color: var(--lab-muted);
-  font-size: var(--lab-t-sm);
-  font-weight: var(--lab-w-medium, 500);
-  white-space: nowrap;
-  /* Named properties, not `all`. A blanket transition animates layout and paint together, so a
-     width change that should be instant crossfades instead, and it is the reason the motion tokens
-     exist: one duration and one easing for everything that moves. */
-  transition:
-    background var(--lab-dur-fast) var(--lab-ease),
-    color var(--lab-dur-fast) var(--lab-ease),
-    box-shadow var(--lab-dur-fast) var(--lab-ease);
-}
-@media (hover: hover) and (pointer: fine) {
-  .lab-segment:hover:not([data-sel="true"]) {
-    background: color-mix(in oklab, var(--stage-fg) 5%, transparent);
-    color: var(--lab-fg);
-  }
-}
-.lab-segment[data-sel="true"] {
-  background: var(--lab-surface);
-  color: var(--lab-fg);
-  box-shadow: 0 1px 2px color-mix(in oklab, currentColor 8%, transparent);
-  font-weight: var(--lab-w-semibold, 600);
-}
-.lab-segment:disabled {
-  opacity: 0.45;
-  pointer-events: none;
-}
-.lab-activity-transport {
-  display: grid;
-  /* The middle column must be able to SHRINK: with an 8rem floor the three columns could not fit
-     a 360px phone, so the transport pushed its own row wider than the card. Its content is a short
-     status line, which wraps. */
-  grid-template-columns: auto minmax(0, 18rem) auto;
-  align-items: center;
-  justify-content: center;
-  gap: var(--lab-sp-8);
-  padding: var(--lab-sp-6) var(--lab-sp-10);
-  border-top: 1px solid var(--border, var(--stage-grid));
-  background: var(--card, var(--stage-bg));
-}
-.lab-icon-button svg {
-  width: 1rem;
-  height: 1rem;
-  stroke-width: 1.8;
-}
-/* The transport's middle slot. This is shell, not a subject: it lived in the maths sheet, so every
-   other subject rendered it unstyled, and a long status word ("Photosynthesising") could not shrink
-   inside its flex row and pushed the transport past the card. */
-.lab-transport-state {
-  display: flex;
-  flex-wrap: wrap;
-  min-width: 0;
-  align-items: baseline;
-  justify-content: center;
-  gap: var(--lab-sp-8);
-  font-size: var(--lab-t-eyebrow);
-  font-variant-numeric: tabular-nums;
-  overflow-wrap: anywhere;
-}
-.lab-transport-state strong {
-  font-size: var(--lab-t-eyebrow);
-  line-height: var(--lab-lh-ui);
-}
-.lab-transport-state > * {
-  min-width: 0;
-}
-.lab-transport-state span {
-  color: var(--lab-muted);
-}
-.lab-activity-transport > button {
-  min-height: var(--lab-target);
-}
-/* The transport has three slots (back · progress · primary). A lab with a fourth
-   action used to drop it into an implicit column and leave it hanging under the
-   left edge; give any extra action a centred row of its own instead. */
-.lab-activity-transport > :nth-child(n + 4) {
-  grid-column: 1 / -1;
-  justify-self: center;
-}
-.lab-activity-transport:has(> .lab-guide-nav) {
-  grid-template-columns: minmax(0, 1fr);
-}
-.lab-activity-transport:has(> .lab-sequence) {
-  grid-template-columns: minmax(0, 1fr);
-}
-.lab-guide-nav {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--lab-sp-12);
-  width: 100%;
-}
-.lab-guide-nav > p {
-  margin: 0;
-  font-weight: var(--lab-w-medium);
-  text-align: center;
-}
-.lab-guide-nav > .lab-stepnav,
-.lab-guide-nav > .lab-pill {
-  grid-column: 2;
-}
-.lab-activity-progress {
-  display: grid;
-  gap: var(--lab-sp-4);
-  width: 100%;
-  min-width: 0;
-  overflow: hidden;
-}
-.lab-activity-progress div {
-  display: flex;
-  width: 100%;
-  min-width: 0;
-  overflow: hidden;
-  justify-content: center;
-  gap: var(--lab-sp-4);
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-sm);
-  font-variant-numeric: tabular-nums;
-}
-.lab-activity-progress strong {
-  color: var(--foreground, var(--stage-fg));
-}
-.lab-activity-progress progress {
-  /* Same fix as `.physics-efficiency-ledger progress`, for the same two
-     reasons: `appearance:none` so the background actually paints instead of
-     being overridden by Chrome's native track, AND a foreground-derived mix
-     instead of `--muted` (which is deliberately close to the surface tone it
-     sits on - see `.lab-slider [data-slot="slider-track"]`'s comment - so an
-     early step, a small fraction, read as a bare sliver with nothing visible
-     behind it rather than a bar partway along a visible track). */
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  width: 100%;
-  height: 0.28rem;
-  overflow: hidden;
-  border: 0;
-  border-radius: var(--lab-r-pill);
-  background: color-mix(in oklab, var(--stage-fg) 15%, transparent);
-}
-.lab-activity-progress progress::-webkit-progress-bar {
-  background: color-mix(in oklab, var(--stage-fg) 15%, transparent);
-}
-.lab-activity-progress progress::-webkit-progress-value {
-  border-radius: var(--lab-r-pill);
-  background: var(--primary, var(--stage-accent));
-}
-.lab-activity-progress progress::-moz-progress-bar {
-  border-radius: var(--lab-r-pill);
-  background: var(--primary, var(--stage-accent));
-}
-.lab-activity-progress input[type="range"] {
-  width: 100%;
-  height: 1rem;
-  margin: 0;
-  accent-color: var(--primary, var(--stage-accent));
-  cursor: pointer;
-}
-/* The transcript is a text alternative to a moving scene: a screen reader needs it, and a sighted
-   learner is reading the scene instead. It was drawn as a full-width band with its own rule and a
-   semibold heading, which gave a service affordance the same weight as the lesson and put two of
-   these rows between the figure and the Continue button. It stays exactly where it is in the DOM,
-   and recedes. */
-.lab-activity-transcript {
-  margin: 0;
-  padding: var(--lab-sp-8) var(--lab-sp-16);
-  border-top: 1px solid var(--lab-hairline);
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-eyebrow);
-}
-.lab-activity-transcript summary {
-  cursor: pointer;
-  font-weight: var(--lab-w-medium);
-  opacity: 0.7;
-}
-.lab-activity-transcript[open] summary {
-  opacity: 1;
-}
-.lab-activity-transcript ol {
-  margin: var(--lab-sp-8) 0 0;
-  padding-inline-start: var(--lab-sp-24);
-}
-.lab-activity-transcript li {
-  padding: var(--lab-sp-2) var(--lab-sp-4);
-}
-.lab-activity-transcript li[data-current] {
-  border-radius: var(--lab-r-xs);
-  background: color-mix(in oklab, var(--primary, var(--stage-accent)) 12%, transparent);
-  color: var(--foreground, var(--stage-fg));
-}
-@container lab-activity (min-width: 60rem) {
-  .lab-authored-activity[data-inspector-layout="side"]
-    .lab-activity-workspace:has(> .lab-activity-inspector) {
-    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
-    grid-template-rows: auto auto;
-    gap: 0;
-    padding: var(--lab-sp-12) 0 var(--lab-sp-12) var(--lab-sp-12);
-  }
-  .lab-authored-activity[data-inspector-layout="side"] .lab-activity-canvas {
-    grid-column: 1;
-    grid-row: 1;
-    padding: 0 var(--lab-sp-12) var(--lab-sp-12) 0;
-  }
-  .lab-authored-activity[data-inspector-layout="side"] .lab-activity-dock {
-    grid-column: 1;
-    grid-row: 2;
-  }
-  .lab-authored-activity[data-inspector-layout="side"]
-    .lab-activity-workspace
-    > .lab-activity-inspector {
-    grid-column: 2;
-    grid-row: 1 / span 2;
-  }
-  .lab-activity[data-inspector-layout="side"]
-    .lab-activity-workspace:has(> .lab-activity-inspector) {
-    grid-template-columns: minmax(0, 1fr) 19rem;
-    align-items: start;
-  }
-  .lab-activity[data-focus][data-inspector-layout="side"]
-    .lab-activity-workspace:has(> .lab-activity-inspector) {
-    grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
-  }
-  .lab-activity[data-inspector-layout="side"] .lab-activity-workspace > .lab-activity-inspector {
-    border: 0;
-    border-inline-start: 1px solid var(--border, var(--stage-grid));
-    border-radius: 0;
-    background: transparent;
-  }
-  .lab-activity[data-inspector-layout="side"]
-    .lab-activity-workspace
-    > :where(.lab-activity-inspector)
-    :where(.lab-activity-inspector-section) {
-    padding: var(--lab-sp-16);
-  }
-  .lab-activity[data-focus] .network-scene svg {
-    height: clamp(350px, 58vh, 680px);
-  }
-}
-@container lab-activity (max-width: 59.99rem) {
-  .lab-activity-inspector > summary {
-    display: list-item;
-  }
-  .lab-activity-inspector[open] > summary {
-    border-bottom: 1px solid var(--border, var(--stage-grid));
-  }
-
-  /* In a stacked lab, keep the transport at the thumb-friendly bottom edge. */
-  .lab-activity-header {
-    order: 1;
-  }
-  .lab-activity-status {
-    order: 2;
-  }
-  /* A task section (question / response) keeps its DOM position relative to the figure.
-     Without an explicit order it defaulted to 0 and jumped ABOVE the title on every narrow
-     layout. Sharing the workspace's value means ties fall back to source order: a predict
-     task authored before the figure stays before it, an explain task after it stays after. */
-  .lab-authored-task {
-    order: 3;
-  }
-  /* The instruction standing alone above the model shares that value too, and sits before the
-     workspace in source, so it lands between the status strip and the figure. Left unset it takes
-     the default 0 and leads the card, above the eyebrow. */
-  .lab-authored-lead-solo {
-    order: 3;
-  }
-  .lab-activity > .lab-activity-workspace,
-  .lab-activity > .lab-activity-canvas,
-  .lab-activity > .lab-activity-dock,
-  .lab-activity > .lab-activity-inspector {
-    order: 3;
-  }
-  .lab-activity-workspace > .lab-activity-canvas {
-    order: 1;
-  }
-  .lab-activity-workspace > .lab-activity-dock {
-    order: 2;
-  }
-  .lab-activity-workspace > .lab-activity-inspector {
-    order: 3;
-  }
-  .lab-activity-feedback {
-    order: 4;
-  }
-  .lab-activity-transcript {
-    order: 5;
-  }
-  .lab-activity-transport {
-    position: sticky;
-    bottom: 0;
-    z-index: var(--lab-z-overlay);
-    order: 6;
-    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
-    background: color-mix(in oklab, var(--background, var(--stage-bg)) 88%, transparent);
-    box-shadow: 0 -8px 18px color-mix(in oklab, currentColor 7%, transparent);
-    backdrop-filter: blur(12px);
-  }
-}
-.lab-choice-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--lab-sp-8);
-}
-
-.lab-numeric-tertiary {
-  color: var(--stage-muted);
-  font-variant-numeric: tabular-nums;
-}
-@container lab-activity (max-width: 42.5rem) {
-  .lab-activity-header {
-    padding: var(--lab-sp-10) var(--lab-sp-12) var(--lab-sp-8);
-  }
-  .lab-activity-description {
-    font-size: var(--lab-t-sm);
-    line-height: var(--lab-lh-ui);
-  }
-  .lab-activity-focus {
-    font-size: var(--lab-t-sm);
-    padding-inline: var(--lab-sp-8);
-  }
-  .lab-activity-focus span {
-    display: none;
-  }
-  .lab-activity-status {
-    gap: var(--lab-sp-8);
-    padding: var(--lab-sp-8) var(--lab-sp-12);
-    flex-wrap: wrap;
-    row-gap: var(--lab-sp-4);
-    font-size: var(--lab-t-micro);
-  }
-  .lab-activity-status > * + * {
-    padding-inline-start: var(--lab-sp-8);
-  }
-  .lab-authored-activity .lab-activity-status > strong:first-child {
-    display: none;
-  }
-  .lab-authored-activity .lab-activity-status > strong:first-child + * {
-    padding-inline-start: 0;
-    border-inline-start: 0;
-  }
-  .lab-authored-lead-solo {
-    padding: var(--lab-sp-10) var(--lab-sp-12) var(--lab-sp-4);
-    font-size: var(--lab-t-sm);
-    line-height: var(--lab-lh-ui);
-  }
-  .lab-activity-workspace {
-    gap: var(--lab-sp-8);
-    padding: var(--lab-sp-8);
-  }
-  .lab-activity-feedback {
-    gap: var(--lab-sp-4);
-    margin: 0 var(--lab-sp-8) var(--lab-sp-8);
-    max-width: calc(100% - 2 * var(--lab-sp-8));
-    padding: var(--lab-sp-8) var(--lab-sp-10);
-  }
-  .lab-authored-activity[data-inspector-layout="stacked"]
-    .lab-activity-workspace
-    > .lab-activity-inspector {
-    border-inline: 0;
-    border-radius: 0;
-  }
-  .network-route-path {
-    display: none;
-  }
-  .network-delivery {
-    margin-inline-start: auto;
-  }
-  .network-scene svg {
-    height: 180px;
-  }
-  .lab-activity-feedback {
-    grid-template-columns: 1fr;
-    gap: var(--lab-sp-4);
-  }
-  .lab-activity-transport {
-    position: sticky;
-    inset-block-end: 0;
-    z-index: var(--lab-z-overlay);
-    grid-template-columns: auto 1fr auto;
-    gap: var(--lab-sp-8);
-    padding-inline: var(--lab-sp-10);
-    padding-block-end: max(0.75rem, env(safe-area-inset-bottom));
-    box-shadow: 0 -8px 20px color-mix(in oklab, var(--foreground, var(--stage-fg)) 8%, transparent);
-  }
-  .lab-activity-transport .lab-chip {
-    padding-inline: var(--lab-sp-12);
-  }
-  .lab-guide-nav {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .lab-guide-nav > .lab-stepnav,
-  .lab-guide-nav > .lab-pill {
-    grid-column: 1;
-    justify-self: center;
-  }
-  .network-layer {
-    grid-template-columns: 4.4rem 3.2rem 1fr;
-    font-size: var(--lab-t-micro);
-  }
-}
-/* Authorable predict → act → observe → explain → transfer sequence. */
-.lab-sequence {
-  display: grid;
-  justify-items: center;
-  gap: var(--lab-sp-6);
-  width: 100%;
-  color: var(--foreground, var(--stage-fg));
-}
-.lab-sequence-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--lab-sp-8);
-}
-.lab-sequence-actions .lab-btn,
-.lab-sequence-actions .lab-btn-ghost {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lab-sp-4);
-  min-block-size: var(--lab-target-compact);
-  padding: var(--lab-sp-4) var(--lab-sp-10);
-  font-size: var(--lab-t-sm);
-}
-.lab-sequence-actions .lab-btn svg {
-  width: 0.9rem;
-  height: 0.9rem;
-  stroke-width: 1.8;
-}
-.lab-sequence-gate,
-.lab-sequence-count {
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-eyebrow);
-}
-.lab-sequence-gate {
-  margin: 0;
-  text-align: center;
-}
-@media (max-width: 40rem) {
-  .lab-sequence-actions {
-    width: 100%;
-  }
-}
-
-/* Scannable rule reference list. */
-.rule-card-patterns {
-  display: grid;
-  gap: var(--lab-sp-8);
-  padding: var(--lab-sp-14) var(--lab-sp-16);
-  border-top: 1px solid var(--border, var(--stage-grid));
-}
-.rule-card-patterns h4 {
-  margin: 0;
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-eyebrow, 0.68rem);
-  letter-spacing: var(--lab-ls-caps);
-  text-transform: uppercase;
-}
-.rule-card-patterns ul {
-  display: grid;
-  gap: var(--lab-sp-8);
-  margin: 0;
-  padding: 0;
-  max-width: 46rem;
-  list-style: none;
-}
-.rule-card-patterns li {
-  position: relative;
-  padding-inline-start: var(--lab-sp-16);
-  font-size: var(--lab-t-sm);
-  line-height: var(--lab-lh-ui);
-}
-.rule-card-patterns li::before {
-  position: absolute;
-  inset-inline-start: 0;
-  color: var(--primary, var(--stage-accent));
-  content: "\203A";
-  font-weight: var(--lab-w-semibold);
-}
-
-/* Bound responsive SVGs to their activity container. */
-.lab-activity svg {
-  max-width: 100%;
-}
-
-.lab-config-options {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: var(--lab-sp-6);
-}
-
-/* A schematic's labels live inside its viewBox, so they scale with the element: at 350px a
-   520-wide circuit renders its tags at ~3px. The floor keeps it legible and lets the strip scroll
-   instead, and the edge fade rides the container box so a cut-off circuit reads as scrollable
-   rather than broken.
-
-   There is deliberately NO max-width here. Capping every scene reflowed the labels in the ~40 labs
-   composed against their natural width and put two of them into text-on-text collisions. A short
-   wide diagram stretching into a tall empty box is a per-lab composition problem; it does not get
-   a global rule. */
-.electronics-scene {
-  display: flex;
-  justify-content: center;
-  overflow-x: auto;
-  overscroll-behavior-x: contain;
-  mask-image: linear-gradient(
-    to right,
-    transparent 0,
-    #000 1.5rem,
-    #000 calc(100% - 1.5rem),
-    transparent 100%
-  );
-}
-.electronics-scene > svg {
-  min-width: 22rem;
-  flex: 0 0 auto;
-}
-
-/* ── Rules that belong to no single domain ─────────────────────────────────────────────────────
-   These arrived here from styles/domains/parts/shared-{1,2}.css.
-
-   They were never meant to be a domain. scripts/split-domains.mjs routes the `lab` and `stage`
-   prefixes to a sheet it calls "shared" (SHEET, :72-74), and every domain sheet then had to
-   `@import "./shared.css"` to get them: 4.6 KiB charged against all fourteen subjects, which is
-   most of why chemistry could not fit under its ceiling. That was a limitation of the generator,
-   which had no way to put a rule BACK into core.css, not a decision about where the rules belong.
-   Their own generated header said they "belong to no single domain", which is the definition of
-   this layer, and every documented layered-import recipe already requires core.css. So a consumer
-   loading core.css plus one subject gets exactly what it got before.
-   ───────────────────────────────────────────────────────────────────────────────────────────── */
-.lab-scene-row,
-.lab-sequence-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: var(--lab-sp-16);
-}
-.lab-scene-row {
-  align-items: center;
-}
-.lab-sequence-row {
-  align-items: flex-end;
-  gap: var(--lab-sp-14);
-}
-.lab-clue-scene {
-  display: grid;
-  justify-items: center;
-  gap: var(--lab-sp-4);
-}
-.lab-clue-scene > span {
-  color: var(--stage-muted);
-  font-size: var(--lab-t-micro);
-  font-weight: var(--lab-w-semibold);
-  text-transform: uppercase;
-  letter-spacing: var(--lab-ls-caps);
-}
-.lab-result-stack {
-  display: grid;
-  justify-items: center;
-  gap: var(--lab-sp-14);
-  margin-top: var(--lab-sp-4);
-}
-.lab-answer-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: var(--lab-sp-16);
-  font-size: var(--lab-t-body);
-  font-weight: var(--lab-w-semibold);
-}
-.lab-inline-answer,
-.lab-trig-value {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lab-sp-6);
-}
-.lab-solved-message {
-  margin: 0;
-  color: var(--stage-good);
-  font-weight: var(--lab-w-semibold);
-}
-.lab-worked-list {
-  display: grid;
-  gap: var(--lab-sp-6);
-  margin: 0;
-  padding-inline-start: var(--lab-sp-16);
-  font-size: var(--lab-t-sm);
-}
-.lab-result-copy {
-  font-size: var(--lab-t-eyebrow);
-}
-.lab-centered-scene {
-  display: grid;
-  place-items: center;
-}
-.lab-fill-prompt {
-  margin: 0;
-  font-size: var(--lab-t-body);
-  font-weight: var(--lab-w-semibold);
-  line-height: 1.9;
-  text-align: center;
-}
-.lab-sequence-step {
-  display: grid;
-  justify-items: center;
-  gap: var(--lab-sp-4);
-  padding: var(--lab-sp-6);
-  border: 2px solid transparent;
-  border-radius: var(--lab-r-md);
-}
-.lab-sequence-step[data-current="true"] {
-  border-color: var(--stage-accent);
-  background: color-mix(in oklab, var(--stage-accent) 5%, transparent);
-}
-.lab-sequence-label {
-  color: var(--stage-fg);
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-semibold);
-}
-.lab-sequence-value {
-  min-width: 2rem;
-  padding: 2px var(--lab-sp-8);
-  border: 1.5px solid color-mix(in oklab, var(--stage-fg) 30%, transparent);
-  border-radius: var(--lab-r-xs);
-  background: var(--stage-bg);
-  font-size: var(--lab-t-sm);
-  font-weight: var(--lab-w-bold);
-  font-variant-numeric: tabular-nums;
-  text-align: center;
-}
-.lab-numeric-primary {
-  font-size: var(--lab-t-body);
-  font-weight: var(--lab-w-semibold);
-  font-variant-numeric: tabular-nums;
-}
-.lab-numeric-secondary,
-.lab-numeric-tertiary,
-.lab-tabular {
-  font-variant-numeric: tabular-nums;
-}
-.lab-numeric-secondary {
-  opacity: 0.85;
-}
-.lab-numeric-tertiary {
-  opacity: 0.75;
-}
-.lab-muted-copy {
-  opacity: 0.8;
-}
-.lab-trig-readouts {
-  display: inline-flex;
-  gap: var(--lab-sp-16);
-  margin-inline-start: auto;
-  font-variant-numeric: tabular-nums;
-}
-.lab-trig-function[data-function="sin"] {
-  color: var(--stage-good);
-}
-.lab-trig-function[data-function="cos"] {
-  color: var(--stage-accent);
-}
-.lab-trig-function[data-function="tan"] {
-  color: var(--stage-warn);
-}
-@media (max-width: 35rem) {
-  .lab-trig-readouts {
-    width: 100%;
-    margin-inline-start: 0;
-    justify-content: space-between;
-    gap: var(--lab-sp-8);
-  }
-}
-
-/* Sizing for an icon inside a chip. This lived in the chemistry domain part, with no `.chem-`
-   ancestor, which meant a chip icon was only sized on pages that happened to load chemistry. It is
-   shared chrome, so it belongs in this layer. */
-.lab-chip > svg {
-  width: 0.9rem;
-  height: 0.9rem;
-  flex: none;
-}
-
-/* ── Simulation HUD & Visual-First Floating Controls ────────────────────────
-   Used across flagship laboratories to replace vertical form stacks with
-   compact glassmorphic toolbars, floating telemetry badges, and collapsible
-   drawers so the physical simulation retains 65-75% of viewport height. */
-/* ── Simulation HUD & Visual-First Floating Controls ────────────────────────
-   Precision instrument toolbar: clean typography, zero emoji noise,
-   consistent alignment, and subtle micro-contrast. */
-.lab-hud-toolbar {
-  grid-column: 1 / -1;
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--lab-sp-6) var(--lab-sp-10);
-  padding: var(--lab-sp-4) var(--lab-sp-8);
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-md, 8px);
-  background: color-mix(in oklab, var(--lab-surface) 92%, transparent);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  box-shadow: 0 1px 3px color-mix(in oklab, currentColor 4%, transparent);
-}
-.lab-hud-group {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lab-sp-4);
-}
-.lab-hud-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lab-sp-4);
-  padding: 0 var(--lab-sp-2);
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-eyebrow, 0.68rem);
-  font-weight: var(--lab-w-semibold, 600);
-  letter-spacing: var(--lab-ls-caps, 0.05em);
-  text-transform: uppercase;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-.lab-hud-badge strong {
-  color: var(--stage-fg, currentColor);
-  font-weight: var(--lab-w-bold);
-}
-.lab-hud-chip-select {
-  display: inline-flex;
-  gap: var(--lab-sp-2);
-  padding: var(--lab-sp-2);
-  background: var(--lab-sunken);
-  border-radius: var(--lab-r-sm, 6px);
-  border: 1px solid var(--lab-hairline);
-}
-.lab-hud-chip-btn {
-  padding: var(--lab-sp-2) var(--lab-sp-8);
-  border-radius: calc(var(--lab-r-sm, 6px) - 2px);
-  border: 0;
-  background: transparent;
-  color: var(--lab-muted);
-  font-size: var(--lab-t-eyebrow, 0.68rem);
-  font-weight: var(--lab-w-semibold, 600);
-  cursor: pointer;
-  transition: all var(--lab-dur-fast) var(--lab-ease);
-  white-space: nowrap;
-}
-.lab-hud-chip-btn:hover {
-  color: var(--lab-fg);
-}
-.lab-hud-chip-btn[data-active="true"],
-.lab-hud-chip-btn.active {
-  background: var(--lab-surface);
-  color: var(--lab-fg);
-  box-shadow: 0 1px 2px color-mix(in oklab, currentColor 8%, transparent);
-}
-.lab-hud-drawer {
-  grid-column: 1 / -1;
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
-  gap: var(--lab-sp-8);
-  padding: var(--lab-sp-8) var(--lab-sp-10);
-  margin-top: var(--lab-sp-4);
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-sm, 6px);
-  background: color-mix(in oklab, var(--lab-sunken) 40%, transparent);
-}
-.lab-hud-drawer-toggle,
-.lab-btn.lab-hud-drawer-toggle {
-  margin-left: auto;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lab-sp-4);
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-medium, 500);
-  color: var(--muted-foreground, var(--lab-muted));
-  background: color-mix(in oklab, var(--lab-surface) 50%, transparent);
-  border: 1px solid var(--lab-border);
-  border-radius: var(--lab-r-sm, 6px);
-  min-height: var(--lab-target-compact);
-  padding: var(--lab-sp-2) var(--lab-sp-10);
-  cursor: pointer;
-  transition:
-    background var(--lab-dur-fast) var(--lab-ease),
-    color var(--lab-dur-fast) var(--lab-ease),
-    border-color var(--lab-dur-fast) var(--lab-ease);
-}
-/* A hover that PAINTS A SURFACE has to sit behind a real pointer. On a touch device the hover
-   state sticks after a tap, so the last control touched stays lit as though it were selected. */
-@media (hover: hover) and (pointer: fine) {
-  .lab-hud-drawer-toggle:hover,
-  .lab-btn.lab-hud-drawer-toggle:hover {
-    color: var(--lab-fg);
-    background: var(--lab-sunken);
-    border-color: var(--lab-hairline);
-  }
-}
-.lab-direct-drag-hint {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lab-sp-4);
-  font-size: var(--lab-t-micro);
-  text-transform: uppercase;
-  letter-spacing: var(--lab-ls-caps);
-  color: var(--lab-muted);
-  animation: lab-pulse 2s infinite ease-in-out;
-}
-@keyframes lab-pulse {
-  0%,
-  100% {
-    opacity: 0.6;
-  }
-  50% {
-    opacity: 1;
-  }
-}