@classytic/labs 0.4.0 → 0.5.0

package/styles/domains/parts/chemistry.css

@@ -1,1698 +0,0 @@
-/* Chemistry scenes share one quiet frame and explanation rhythm. */
-.chem-scene,
-.chem-solution-vessel {
-  overflow: hidden;
-  border: 1px solid var(--stage-grid);
-  border-radius: var(--lab-r-md);
-  background: var(--stage-bg);
-}
-.chem-periodic-scene,
-.chem-electrochem-scene {
-  container-type: inline-size;
-}
-.chem-svg-number,
-.chem-solution-vessel > p {
-  font-variant-numeric: tabular-nums;
-}
-.chem-periodic-element {
-  cursor: pointer;
-  outline: none;
-}
-.chem-periodic-element:focus-visible rect {
-  stroke: var(--stage-accent);
-  stroke-width: 2.5px;
-}
-.chem-explanation {
-  display: grid;
-  gap: var(--lab-sp-8);
-  padding: var(--lab-sp-8) 2px 0;
-  color: var(--stage-muted);
-  font-size: var(--lab-t-eyebrow);
-  line-height: var(--lab-lh-prose);
-}
-.chem-explanation strong,
-.chem-orbital-overlap-figure > figcaption strong,
-.chem-atom-ledger b,
-.chem-property-link b,
-.chem-explanation .katex {
-  color: var(--stage-fg);
-}
-.chem-explanation strong[data-tone="danger"] {
-  color: var(--stage-danger, #e03131);
-}
-.chem-explanation strong[data-tone="good"] {
-  color: var(--stage-good, #16a34a);
-}
-.chem-dilution-scene,
-.chem-kitchen-bench,
-.chem-energy-tools {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-  align-items: center;
-  gap: var(--lab-sp-8);
-}
-.chem-solution-vessel {
-  min-width: 0;
-  border-radius: var(--lab-r-md);
-}
-.chem-solution-vessel > p {
-  margin: var(--lab-sp-4) 0 var(--lab-sp-6);
-  padding-inline: var(--lab-sp-6);
-  color: var(--stage-fg);
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-semibold);
-  text-align: center;
-}
-.chem-process-arrow {
-  color: var(--stage-muted);
-  font-size: var(--lab-t-title);
-}
-.chem-profile-scene {
-  display: flex;
-  align-items: stretch;
-  gap: var(--lab-sp-4);
-  min-width: 0;
-}
-.chem-profile-scene > div {
-  min-width: 0;
-  flex: 1;
-}
-.chem-axis-y {
-  padding-block: var(--lab-sp-4);
-  color: var(--stage-muted);
-  font-size: var(--lab-t-micro);
-  writing-mode: vertical-rl;
-  transform: rotate(180deg);
-}
-.chem-axis-x {
-  margin: 2px 0 0;
-  color: var(--stage-muted);
-  font-size: var(--lab-t-micro);
-  text-align: center;
-}
-.chem-gas-scene {
-  position: relative;
-}
-.chem-pressure-gauge {
-  position: absolute;
-  top: 0.625rem;
-  left: 0.75rem;
-  padding: var(--lab-sp-6) var(--lab-sp-10);
-  border: 1px solid var(--stage-grid);
-  border-radius: var(--lab-r-sm);
-  background: color-mix(in oklab, var(--stage-bg) 80%, transparent);
-  text-align: center;
-  backdrop-filter: blur(6px);
-}
-.chem-lock-readout {
-  display: inline-flex;
-  align-items: center;
-  min-height: var(--lab-target);
-  padding-inline: var(--lab-sp-10);
-  border-radius: var(--lab-r-sm);
-  background: color-mix(in srgb, var(--stage-grid) 32%, var(--stage-bg));
-  color: var(--stage-muted);
-  font-size: var(--lab-t-xs);
-  font-weight: 650;
-}
-.chem-molecular-figure,
-.chem-orbital-overlap-figure,
-.chem-atomic-orbital-figure {
-  display: grid;
-  min-height: 0;
-  margin: 0;
-  place-items: center;
-}
-.chem-molecular-figure > svg {
-  display: block;
-  width: min(100%, 38rem);
-  max-height: min(52cqh, 25rem);
-}
-.chem-molecular-figure > figcaption {
-  max-width: 54ch;
-  margin: 0 auto var(--lab-sp-8);
-  padding-inline: var(--lab-sp-12);
-  color: var(--stage-muted);
-  font-size: var(--lab-t-xs);
-  line-height: var(--lab-lh-ui);
-  text-align: center;
-}
-.chem-molecular-layers {
-  grid-column: 1 / -1;
-  min-width: 0;
-}
-.chem-molecular-layers .lab-field-row {
-  gap: var(--lab-sp-6);
-}
-.chem-orbital-overlap-figure > svg,
-.chem-atomic-orbital-figure > svg {
-  display: block;
-  width: min(100%, 36rem);
-  max-height: min(48cqh, 22rem);
-}
-.chem-orbital-overlap-figure > figcaption,
-.chem-atomic-orbital-figure > figcaption {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: var(--lab-sp-4) var(--lab-sp-10);
-  max-width: 52ch;
-  margin: 0 auto var(--lab-sp-8);
-  padding-inline: var(--lab-sp-10);
-  color: var(--stage-muted);
-  font-size: var(--lab-t-eyebrow);
-  line-height: var(--lab-lh-ui);
-  text-align: center;
-}
-.chem-orbital-axis {
-  stroke: var(--stage-grid);
-  stroke-width: 1;
-  stroke-dasharray: 4 7;
-}
-.chem-orbital-density {
-  fill: var(--stage-good);
-  opacity: 0.14;
-}
-.chem-orbital-lobe {
-  opacity: 0.58;
-  stroke: color-mix(in oklab, currentColor 20%, var(--stage-fg));
-  stroke-width: 1.5;
-}
-.chem-orbital-node-label {
-  fill: var(--stage-fg);
-  font-size: 12px;
-  font-weight: 700;
-}
-.chem-orbital-node {
-  fill: color-mix(in oklab, var(--stage-danger, #e03131) 18%, transparent);
-  stroke: var(--stage-danger, #e03131);
-  stroke-width: 1;
-  stroke-dasharray: 4 4;
-}
-.chem-phase-dot {
-  display: inline-block;
-  width: 0.55rem;
-  height: 0.55rem;
-  margin-inline-end: var(--lab-sp-4);
-  border-radius: 999px;
-  background: var(--stage-accent);
-}
-.chem-phase-dot[data-phase="negative"] {
-  background: var(--stage-accent-2);
-}
-@container lab-activity (max-width: 34rem) {
-  .chem-molecular-figure > svg {
-    max-height: 18rem;
-  }
-  .chem-orbital-overlap-figure > svg,
-  .chem-atomic-orbital-figure > svg {
-    max-height: 16rem;
-  }
-}
-.chem-pressure-gauge > div {
-  color: var(--stage-fg);
-  font-size: var(--lab-t-sm);
-  font-weight: var(--lab-w-bold);
-  font-variant-numeric: tabular-nums;
-}
-.chem-solution-field {
-  position: relative;
-}
-.chem-equation-stack {
-  display: grid;
-  gap: var(--lab-sp-6);
-  padding: var(--lab-sp-8) 2px 0;
-  color: var(--stage-fg);
-  font-size: var(--lab-t-sm);
-}
-.chem-reaction-equation {
-  padding: var(--lab-sp-12) var(--lab-sp-8) var(--lab-sp-4);
-  color: var(--stage-fg);
-  font-size: var(--lab-t-body);
-  font-weight: var(--lab-w-bold);
-  letter-spacing: var(--lab-ls-caps);
-  text-align: center;
-}
-
-.chem-stoich-figure {
-  display: grid;
-  min-width: 0;
-  gap: var(--lab-sp-8);
-}
-.chem-equilibrium-scene,
-.chem-stoich-scene,
-.chem-titration-scene,
-.chem-kinetics-scene {
-  min-width: 0;
-}
-.chem-stoich-scene svg,
-.chem-reaction-scene svg {
-  display: block;
-}
-.chem-reaction-scene {
-  background:
-    radial-gradient(
-      circle at 50% 50%,
-      color-mix(in oklab, var(--stage-accent) 5%, transparent),
-      transparent 48%
-    ),
-    var(--stage-bg);
-}
-.chem-reaction-actions {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--lab-sp-8);
-}
-.chem-concept-scene {
-  min-height: 12rem;
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-lg);
-  background: var(--stage-bg);
-  overflow: hidden;
-}
-.chem-ion-scene,
-.chem-organic-map {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-  align-items: center;
-  gap: var(--lab-sp-12);
-  padding: var(--lab-sp-20);
-}
-.chem-ion {
-  display: grid;
-  place-items: center;
-  align-content: center;
-  min-width: 0;
-  aspect-ratio: 1;
-  max-width: 9rem;
-  justify-self: center;
-  width: 100%;
-  border: 2px solid var(--stage-accent);
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--stage-accent) 12%, var(--stage-bg));
-}
-.chem-ion[data-charge="negative"] {
-  border-color: var(--stage-accent-2);
-}
-.chem-ion strong {
-  font-size: clamp(1.5rem, 8cqi, 2.6rem);
-  line-height: 1;
-}
-.chem-ion span {
-  margin-top: var(--lab-sp-6);
-  color: var(--stage-muted);
-  font-size: var(--lab-t-xs);
-}
-.chem-electron-path {
-  display: grid;
-  place-items: center;
-  color: var(--stage-muted);
-}
-.chem-electron-path > span {
-  display: grid;
-  place-items: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  background: var(--stage-accent);
-  color: var(--stage-bg);
-  font-weight: 800;
-}
-.chem-electron-path > i {
-  font-size: 1.8rem;
-  font-style: normal;
-}
-.chem-electron-path > small {
-  white-space: nowrap;
-}
-.chem-electron-path[data-moved] > span {
-  background: var(--stage-accent-2);
-}
-.chem-apparatus-scene {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  align-items: end;
-  gap: var(--lab-sp-10);
-  padding: var(--lab-sp-16);
-}
-.chem-glassware {
-  display: grid;
-  place-items: center;
-  gap: var(--lab-sp-6);
-  min-width: 0;
-  color: var(--stage-muted);
-  text-align: center;
-  font-size: var(--lab-t-micro);
-}
-.chem-glassware i {
-  display: block;
-  width: 2.5rem;
-  height: 7rem;
-  border: 2px solid var(--stage-accent);
-  border-top: 0;
-  border-radius: 0 0 0.65rem 0.65rem;
-  background: linear-gradient(
-    to top,
-    color-mix(in srgb, var(--stage-accent) 22%, transparent) 42%,
-    transparent 42%
-  );
-}
-.chem-glassware[data-kind="pipette"] i {
-  width: 0.45rem;
-  border-radius: 50%;
-  border-top: 2px solid var(--stage-accent);
-}
-.chem-glassware[data-kind="burette"] i {
-  width: 0.65rem;
-  height: 8.5rem;
-  border-radius: 0;
-  border-top: 2px solid var(--stage-accent);
-}
-.chem-glassware[data-kind="syringe"] i {
-  width: 5rem;
-  height: 2rem;
-  border: 2px solid var(--stage-accent);
-  border-radius: 0.25rem;
-  background: repeating-linear-gradient(
-    90deg,
-    transparent 0 0.8rem,
-    var(--stage-grid) 0.8rem 0.85rem
-  );
-}
-.chem-air-scene {
-  display: grid;
-  align-content: center;
-  gap: var(--lab-sp-16);
-  padding: var(--lab-sp-20);
-}
-.chem-syringe-scale {
-  display: flex;
-  height: 4rem;
-  border: 2px solid var(--stage-fg);
-  border-radius: 0.45rem;
-  overflow: hidden;
-  font-size: var(--lab-t-xs);
-  font-weight: 700;
-}
-.chem-air-nitrogen,
-.chem-air-oxygen {
-  display: grid;
-  place-items: center;
-  box-sizing: border-box;
-  min-width: 0;
-  padding: var(--lab-sp-6);
-  text-align: center;
-  transition: width 320ms ease;
-}
-.chem-air-nitrogen {
-  background: color-mix(in srgb, var(--stage-accent) 20%, var(--stage-bg));
-}
-.chem-air-oxygen {
-  width: 21%;
-  background: color-mix(in srgb, var(--stage-warn) 28%, var(--stage-bg));
-}
-.chem-copper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--lab-sp-10);
-  padding: var(--lab-sp-10) var(--lab-sp-12);
-  border-radius: var(--lab-r-md);
-  background: #b96832;
-  color: white;
-}
-.chem-copper[data-heated] {
-  background: #242424;
-}
-.chem-copper b {
-  font-size: var(--lab-t-lg);
-}
-.chem-evidence-caption,
-.chem-organic-map > div:not(.chem-organic-arrow) {
-  display: grid;
-  align-content: center;
-  gap: var(--lab-sp-6);
-  min-height: 7rem;
-  padding: var(--lab-sp-12);
-  border-radius: var(--lab-r-md);
-  background: color-mix(in srgb, var(--stage-accent) 9%, var(--stage-bg));
-  text-align: center;
-}
-.chem-evidence-caption small,
-.chem-organic-map small {
-  color: var(--stage-muted);
-  font-size: var(--lab-t-micro);
-  font-weight: 700;
-  letter-spacing: var(--lab-ls-caps);
-}
-.chem-evidence-scene[data-run] .chem-evidence-caption {
-  background: color-mix(in srgb, var(--stage-good) 12%, var(--stage-bg));
-}
-.chem-evidence-scene {
-  display: grid;
-  gap: var(--lab-sp-10);
-  padding: var(--lab-sp-12);
-}
-.chem-evidence-visual {
-  min-height: 8.5rem;
-  border-radius: var(--lab-r-md);
-  background: color-mix(in srgb, var(--stage-accent) 8%, var(--stage-bg));
-}
-.chem-evidence-caption {
-  min-height: auto;
-}
-.chem-rusting-visual {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--lab-sp-8);
-  padding: var(--lab-sp-12);
-}
-.chem-rusting-visual > div {
-  display: grid;
-  place-items: center;
-  align-content: end;
-  gap: var(--lab-sp-4);
-  min-width: 0;
-  text-align: center;
-}
-.chem-rusting-visual i {
-  display: block;
-  width: 1.15rem;
-  height: 4.5rem;
-  border: 2px solid var(--stage-accent);
-  border-top: 0;
-  border-radius: 0 0 0.55rem 0.55rem;
-  background: linear-gradient(
-    to top,
-    color-mix(in srgb, var(--stage-accent) 22%, transparent) 45%,
-    transparent 45%
-  );
-}
-.chem-rusting-visual i::after {
-  content: "";
-  display: block;
-  width: 0.32rem;
-  height: 3.5rem;
-  margin: 0 auto;
-  background: var(--stage-muted);
-}
-.chem-rusting-visual i[data-rust]::after {
-  background: #a94724;
-}
-.chem-rusting-visual strong {
-  font-size: var(--lab-t-xs);
-}
-.chem-rusting-visual small,
-.chem-vinegar-cup small,
-.chem-limewater small,
-.chem-ph-readout small,
-.chem-ph-readout span,
-.chem-material-grid p,
-.chem-test-result {
-  color: var(--stage-muted);
-  font-size: var(--lab-t-micro);
-}
-.chem-displacement-visual,
-.chem-acid-visual {
-  display: grid;
-  grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1.2fr);
-  align-items: center;
-  gap: var(--lab-sp-14);
-  padding: var(--lab-sp-14);
-}
-.chem-evidence-beaker {
-  position: relative;
-  display: grid;
-  place-items: center;
-  align-content: end;
-  height: 7rem;
-  border: 3px solid var(--stage-muted);
-  border-top: 0;
-  border-radius: 0 0 1rem 1rem;
-  background: linear-gradient(
-    to top,
-    color-mix(in srgb, var(--stage-accent) 30%, var(--stage-bg)) 65%,
-    transparent 65%
-  );
-}
-.chem-evidence-beaker > i {
-  position: absolute;
-  width: 0.55rem;
-  height: 5.5rem;
-  background: var(--stage-muted);
-  transform: rotate(-8deg);
-}
-.chem-evidence-beaker[data-run] > i {
-  background: linear-gradient(to bottom, var(--stage-muted) 35%, #a94724 35%);
-}
-.chem-evidence-beaker > b {
-  z-index: 1;
-  margin-bottom: var(--lab-sp-8);
-  color: var(--stage-fg);
-}
-.chem-evidence-beaker > span {
-  z-index: 1;
-  position: absolute;
-  top: 0.4rem;
-  color: var(--stage-accent);
-  font-weight: 800;
-}
-.chem-displacement-visual > div:last-child,
-.chem-splint {
-  display: grid;
-  gap: var(--lab-sp-6);
-}
-.chem-displacement-visual small,
-.chem-splint small {
-  color: var(--stage-muted);
-}
-.chem-splint > i {
-  display: block;
-  width: 5.5rem;
-  height: 0.35rem;
-  background: var(--stage-muted);
-}
-.chem-splint > i::after {
-  content: "";
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  margin-left: 5rem;
-  border-radius: 50% 50% 50% 0;
-  background: var(--stage-warn);
-  transform: translateY(-0.35rem) rotate(-45deg);
-}
-.chem-pond-visual {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  position: relative;
-  overflow: hidden;
-}
-.chem-pond-surface {
-  padding: var(--lab-sp-8) var(--lab-sp-12);
-  background: color-mix(in srgb, var(--stage-good) 14%, var(--stage-bg));
-  color: var(--stage-muted);
-  font-size: var(--lab-t-xs);
-  font-weight: 700;
-}
-.chem-pond-visual[data-run] .chem-pond-surface {
-  background: color-mix(in srgb, var(--stage-good) 42%, var(--stage-bg));
-  color: var(--stage-fg);
-}
-.chem-pond-water {
-  display: grid;
-  place-items: center;
-  padding: var(--lab-sp-18);
-  background: color-mix(in srgb, var(--stage-accent) 19%, var(--stage-bg));
-  text-align: center;
-  font-weight: 700;
-}
-.chem-pond-water > i {
-  width: 3.4rem;
-  height: 1.45rem;
-  margin-top: var(--lab-sp-8);
-  border-radius: 60% 40% 55% 45%;
-  background: var(--stage-accent);
-}
-.chem-pond-visual[data-run] .chem-pond-water > i {
-  transform: rotate(18deg);
-  opacity: 0.4;
-}
-.chem-oxygen-meter {
-  position: absolute;
-  right: var(--lab-sp-8);
-  bottom: var(--lab-sp-8);
-  display: grid;
-  padding: var(--lab-sp-6) var(--lab-sp-8);
-  border-radius: var(--lab-r-sm);
-  background: var(--stage-bg);
-  font-size: var(--lab-t-micro);
-}
-.chem-oxygen-meter b,
-.chem-atom-ledger[data-complete] b,
-.chem-property-link[data-complete] b {
-  color: var(--stage-good);
-}
-.chem-pond-visual[data-run] .chem-oxygen-meter b {
-  color: var(--stage-warn);
-}
-.chem-organic-map strong {
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: clamp(1rem, 5cqi, 1.45rem);
-  overflow-wrap: anywhere;
-}
-.chem-organic-arrow {
-  display: grid;
-  place-items: center;
-  min-width: 5rem;
-  text-align: center;
-}
-.chem-organic-arrow > i {
-  font-size: 2rem;
-  font-style: normal;
-}
-.chem-organic-arrow > span {
-  font-weight: 700;
-}
-.chem-polymer-builder,
-.chem-applied-scene {
-  display: grid;
-  gap: var(--lab-sp-12);
-  padding: var(--lab-sp-4);
-}
-.chem-monomer-row {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--lab-sp-6);
-}
-.chem-monomer {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  place-items: center;
-  gap: 0.15rem;
-  min-width: 0;
-  min-height: 5rem;
-  padding: var(--lab-sp-8) var(--lab-sp-4);
-  border: 1px solid color-mix(in srgb, var(--stage-accent) 36%, var(--stage-grid));
-  border-radius: var(--lab-r-md);
-  background: var(--stage-bg);
-  color: var(--stage-fg);
-  font: inherit;
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: clamp(0.72rem, 3.3cqi, 1rem);
-  font-weight: 750;
-  cursor: pointer;
-}
-.chem-monomer i {
-  color: var(--stage-accent);
-  font-size: 1.25em;
-  font-style: normal;
-}
-.chem-monomer small {
-  grid-column: 1 / -1;
-  color: var(--stage-muted);
-  font-family: var(--font-sans, ui-sans-serif, sans-serif);
-  font-size: 0.62rem;
-  font-weight: 650;
-}
-.chem-monomer[data-open] {
-  border-color: var(--stage-good);
-  background: color-mix(in srgb, var(--stage-good) 9%, var(--stage-bg));
-}
-.chem-action {
-  min-height: var(--lab-target);
-  font: inherit;
-  cursor: pointer;
-}
-.chem-action:not(.chem-dose) {
-  font-size: var(--lab-t-sm);
-}
-.chem-monomer:focus-visible,
-.chem-join-chain:focus-visible,
-.chem-applied-action:focus-visible {
-  outline: 3px solid var(--ring, var(--stage-accent));
-  outline-offset: 2px;
-}
-.chem-join-chain {
-  padding: var(--lab-sp-8) var(--lab-sp-12);
-  border: 0;
-  border-radius: var(--lab-r-md);
-  background: var(--stage-accent);
-  color: var(--stage-bg);
-  font-weight: 750;
-}
-.chem-join-chain:disabled {
-  background: color-mix(in srgb, var(--stage-grid) 65%, var(--stage-bg));
-  color: var(--stage-muted);
-  cursor: default;
-}
-.chem-join-chain[data-joined] {
-  background: var(--stage-good);
-  font-family: var(--font-mono, ui-monospace, monospace);
-}
-.chem-organic-choices {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-.chem-organic-choices .lab-choice {
-  min-height: var(--lab-target);
-  padding: var(--lab-sp-8) var(--lab-sp-10);
-  font-size: var(--lab-t-xs);
-  line-height: 1.3;
-}
-.chem-vinegar-cup,
-.chem-limewater {
-  position: relative;
-  display: grid;
-  place-items: center;
-  align-content: end;
-  box-sizing: border-box;
-  min-width: 0;
-  width: 100%;
-  min-height: 7rem;
-  padding: var(--lab-sp-10);
-  overflow: hidden;
-  border: 2px solid var(--stage-muted);
-  border-top-width: 1px;
-  border-radius: 0.3rem 0.3rem 1rem 1rem;
-  background: linear-gradient(
-    to top,
-    color-mix(in srgb, var(--stage-warn) 24%, var(--stage-bg)) 52%,
-    transparent 52%
-  );
-}
-.chem-limewater {
-  background: linear-gradient(
-    to top,
-    color-mix(in srgb, var(--stage-accent) 15%, var(--stage-bg)) 52%,
-    transparent 52%
-  );
-}
-.chem-limewater[data-milky] {
-  background: linear-gradient(
-    to top,
-    color-mix(in srgb, white 88%, var(--stage-accent)) 52%,
-    transparent 52%
-  );
-}
-.chem-bubbles {
-  position: absolute;
-  top: 1.6rem;
-  color: var(--stage-accent);
-  opacity: 0;
-}
-.chem-vinegar-cup[data-fizz] .chem-bubbles {
-  opacity: 1;
-  animation: chem-bubble-rise calc(var(--lab-dur-slow) * 4) var(--lab-ease-in-out) infinite
-    alternate;
-}
-@keyframes chem-bubble-rise {
-  to {
-    transform: translateY(calc(-1 * var(--lab-sp-10)));
-  }
-}
-.chem-applied-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--lab-sp-8);
-  padding: var(--lab-sp-8) var(--lab-sp-12);
-  border: 1px solid color-mix(in srgb, var(--stage-accent) 45%, var(--stage-grid));
-  border-radius: var(--lab-r-md);
-  background: var(--stage-bg);
-  color: var(--stage-fg);
-  font-weight: 720;
-}
-.chem-applied-action svg,
-.chem-tool-action svg,
-.chem-forge-reset svg {
-  width: var(--lab-sp-20);
-  height: var(--lab-sp-20);
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.chem-applied-action:not(:disabled):hover,
-.chem-applied-action[data-done] {
-  border-color: var(--stage-accent);
-  background: color-mix(in srgb, var(--stage-accent) 9%, var(--stage-bg));
-}
-.chem-applied-action:disabled {
-  color: var(--stage-good);
-  cursor: default;
-}
-.chem-equation-strip,
-.chem-property-link {
-  display: flex;
-  justify-content: center;
-  gap: var(--lab-sp-8);
-  padding: var(--lab-sp-8);
-  border-radius: var(--lab-r-sm);
-  background: color-mix(in srgb, var(--stage-accent) 7%, var(--stage-bg));
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: var(--lab-t-xs);
-  font-weight: 700;
-  text-align: center;
-}
-.chem-equation-strip span,
-.chem-dose > span {
-  color: var(--stage-accent);
-}
-.chem-stomach-model {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--lab-sp-12);
-}
-.chem-acid-pool {
-  display: flex;
-  flex-wrap: wrap;
-  place-content: center;
-  gap: var(--lab-sp-6);
-  min-height: 7rem;
-  padding: var(--lab-sp-12);
-  border-radius: 45% 45% 42% 42% / 35% 35% 55% 55%;
-  background: color-mix(in srgb, var(--stage-warn) 20%, var(--stage-bg));
-}
-.chem-acid-pool i {
-  display: grid;
-  place-items: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--stage-warn) 72%, var(--stage-bg));
-  color: var(--stage-fg);
-  font-size: var(--lab-t-micro);
-  font-style: normal;
-  font-weight: 800;
-}
-.chem-ph-readout {
-  display: grid;
-  place-items: center;
-  min-width: 4.5rem;
-  padding: var(--lab-sp-10);
-  border-radius: var(--lab-r-md);
-  background: color-mix(in srgb, var(--stage-warn) 16%, var(--stage-bg));
-}
-.chem-ph-readout b {
-  font-size: 2rem;
-  line-height: 1;
-}
-.chem-ph-readout[data-neutral] {
-  background: color-mix(in srgb, var(--stage-good) 15%, var(--stage-bg));
-}
-.chem-dose-row,
-.chem-material-grid,
-.chem-test-actions {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--lab-sp-8);
-}
-.chem-dose {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--lab-sp-8);
-  border: 1px solid var(--stage-grid);
-  border-radius: 999px;
-  background: var(--stage-bg);
-  color: var(--stage-fg);
-}
-.chem-dose[data-used] {
-  border-color: var(--stage-good);
-  color: var(--stage-good);
-}
-.chem-material-grid article {
-  display: grid;
-  gap: var(--lab-sp-4);
-  min-width: 0;
-  padding: var(--lab-sp-4);
-  text-align: center;
-}
-.chem-material-grid article + article {
-  border-inline-start: 1px solid var(--lab-hairline);
-}
-.chem-material-grid h4,
-.chem-material-grid p {
-  margin: 0;
-}
-.chem-material-grid h4 {
-  font-size: var(--lab-t-sm);
-}
-.chem-test-result {
-  color: var(--stage-good);
-  font-weight: 750;
-}
-.chem-carbon-lattice {
-  display: block;
-  width: 100%;
-  min-height: 7rem;
-  padding: var(--lab-sp-6);
-  background: color-mix(in srgb, var(--stage-grid) 25%, var(--stage-bg));
-}
-.chem-carbon-bonds {
-  fill: none;
-  stroke: var(--stage-muted);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 3;
-}
-.chem-carbon-atoms {
-  fill: var(--stage-fg);
-}
-.chem-graphite-bonds {
-  stroke-width: 2.5;
-}
-.chem-free-electrons {
-  fill: var(--stage-accent);
-}
-.chem-carbon-lattice[data-conduct] .chem-free-electrons {
-  animation: chem-electron-current var(--lab-dur-slow) var(--lab-ease-in-out) infinite alternate;
-}
-.chem-scratch-mark {
-  fill: none;
-  stroke: var(--stage-warn);
-  stroke-width: 4;
-  stroke-linecap: round;
-  stroke-dasharray: 14 8;
-  animation: chem-scratch-pass var(--lab-dur-slow) var(--lab-ease) both;
-}
-@keyframes chem-electron-current {
-  to {
-    transform: translateX(var(--lab-sp-8));
-  }
-}
-@keyframes chem-scratch-pass {
-  from {
-    opacity: 0;
-    transform: translateX(calc(-1 * var(--lab-sp-12)));
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-.chem-property-link {
-  justify-content: space-between;
-  color: var(--stage-muted);
-  font-family: inherit;
-  font-size: var(--lab-t-micro);
-}
-
-/* Atomic construction and ionic formulae: one unframed figure, then one compact action row. */
-.chem-species-scene,
-.chem-forge-scene,
-.chem-equation-scene,
-.chem-factory-scene,
-.chem-mixer-scene,
-.chem-solubility-scene,
-.chem-detective-scene {
-  width: 100%;
-  min-width: 0;
-}
-.chem-species-scene .lab-figure,
-.chem-forge-scene .lab-figure,
-.chem-equation-scene .lab-figure,
-.chem-factory-scene .lab-figure {
-  display: block;
-  width: 100%;
-  max-height: 24rem;
-}
-.chem-forge-scene .lab-figure,
-.chem-equation-scene .lab-figure,
-.chem-factory-scene .lab-figure,
-.chem-mixer-scene .lab-figure,
-.chem-solubility-scene .lab-figure,
-.chem-detective-scene .lab-figure {
-  max-height: 20rem;
-}
-.chem-formula-readout {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: var(--lab-target);
-  color: var(--stage-fg);
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: var(--lab-t-title);
-  font-weight: var(--lab-w-semibold);
-  gap: var(--lab-sp-4);
-}
-:is(
-    .chem-formula-activity,
-    .chem-equation-desk,
-    .chem-mole-factory,
-    .chem-solution-mixer,
-    .chem-solubility-kitchen,
-    .chem-structure-detective
-  )
-  .lab-activity-heading
-  h3 {
-  font-size: var(--lab-t-title);
-  line-height: var(--lab-lh-title);
-}
-:is(.chem-equation-desk, .chem-mole-factory, .chem-structure-detective) .lab-activity-description {
-  display: none;
-}
-.chem-formula-readout sub,
-.chem-formula-readout sup,
-.chem-ion-action sub,
-.chem-ion-action sup {
-  font-size: 0.68em;
-  line-height: 0;
-}
-.chem-scripted {
-  display: inline-block;
-  white-space: nowrap;
-}
-.chem-scripted sup {
-  vertical-align: 0.55em;
-}
-.chem-scripted sub {
-  vertical-align: -0.22em;
-}
-.chem-ion-action > .chem-scripted {
-  display: inline-block;
-  min-width: 0;
-  min-height: 0;
-  border-radius: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-}
-.chem-species-tile {
-  fill: color-mix(in oklab, var(--fig-hue-1) 12%, var(--fig-paper));
-  stroke: var(--fig-hue-1);
-  stroke-width: var(--fig-line);
-}
-.chem-species-scene[data-changed] .chem-species-tile,
-.chem-forge-scene[data-balanced] {
-  animation: chem-result-land var(--lab-dur-slow) var(--lab-ease-spring) both;
-}
-.chem-species-electron,
-.chem-forge-ion {
-  animation: chem-particle-arrive var(--lab-dur-base) var(--lab-ease-spring) both;
-  transform-box: fill-box;
-  transform-origin: center;
-}
-.chem-workbench-action {
-  appearance: none;
-  border: 1px solid var(--lab-accent-edge);
-  border-radius: var(--lab-r-sm);
-  background: var(--lab-surface);
-  color: var(--lab-fg);
-  font-weight: var(--lab-w-semibold);
-  touch-action: manipulation;
-  transition:
-    transform var(--lab-dur-fast) var(--lab-ease),
-    border-color var(--lab-dur-fast) var(--lab-ease),
-    background-color 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) {
-  .chem-workbench-action:hover:not(:disabled):not([aria-pressed="true"]) {
-    border-color: var(--lab-accent-edge);
-    background: var(--lab-accent-faint);
-    box-shadow: var(--lab-shadow-sm);
-  }
-}
-.chem-workbench-action:active:not(:disabled) {
-  transform: translateY(var(--lab-sp-2));
-  box-shadow: none;
-}
-.chem-workbench-action:not(.chem-forge-reset) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--lab-sp-8);
-  padding: var(--lab-sp-8) var(--lab-sp-16);
-}
-.chem-build-action > span,
-.chem-ion-action > span,
-.chem-molecule-action > span {
-  display: grid;
-  place-items: center;
-  min-width: var(--lab-sp-24);
-  min-height: var(--lab-sp-24);
-  border-radius: var(--lab-r-pill);
-  background: var(--lab-accent-soft);
-  color: var(--lab-accent);
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: var(--lab-t-eyebrow);
-}
-.chem-build-action:disabled,
-.chem-ion-action:disabled,
-.chem-molecule-action:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-.chem-forge-controls,
-.chem-factory-controls,
-.chem-tool-controls,
-.chem-equation-controls {
-  display: grid;
-  gap: var(--lab-sp-8);
-  width: 100%;
-}
-.chem-forge-controls,
-.chem-factory-controls {
-  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
-}
-.chem-tool-controls {
-  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
-}
-.chem-tool-action {
-  padding: var(--lab-sp-8);
-}
-.chem-tool-action svg {
-  flex: 0 0 auto;
-}
-.chem-tool-action:disabled {
-  opacity: 0.42;
-  cursor: default;
-}
-.chem-detective-controls {
-  display: grid;
-  gap: var(--lab-sp-10);
-  width: 100%;
-}
-.chem-detective-tools .chem-tool-action[aria-pressed="true"] {
-  border-color: var(--lab-good);
-  background: var(--lab-good-soft);
-  color: var(--lab-good-ink);
-  box-shadow: inset 0 0 0 1px var(--lab-good);
-}
-.chem-structure-choices {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  padding-top: var(--lab-sp-10);
-  border-top: 1px solid var(--lab-hairline);
-}
-.chem-structure-choices .lab-choice {
-  min-height: var(--lab-target);
-}
-.chem-equation-controls {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-.chem-molecule-action {
-  white-space: nowrap;
-}
-.chem-equation-controls .chem-forge-reset {
-  justify-self: start;
-}
-.chem-forge-reset {
-  display: grid;
-  place-items: center;
-  width: var(--lab-target);
-  padding: 0;
-  border-color: var(--lab-border);
-}
-.chem-mixer-scene[data-ready],
-.chem-solubility-scene[data-crystals] .chem-growing-crystal,
-.chem-equation-scene[data-balanced],
-.chem-factory-scene[data-finished] .chem-factory-product {
-  animation: chem-result-land var(--lab-dur-slow) var(--lab-ease-spring) both;
-  transform-box: fill-box;
-  transform-origin: center;
-}
-.chem-dissolved-particle {
-  animation: chem-particle-arrive var(--lab-dur-base) var(--lab-ease-spring) both;
-}
-.chem-factory-core {
-  transition: fill var(--lab-dur-base) var(--lab-ease);
-}
-@keyframes chem-particle-arrive {
-  from {
-    opacity: 0;
-    transform: scale(0.7);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes chem-result-land {
-  50% {
-    transform: scale(1.015);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-@container (max-width: 30rem) {
-  :is(
-      .chem-formula-activity,
-      .chem-equation-desk,
-      .chem-mole-factory,
-      .chem-solution-mixer,
-      .chem-solubility-kitchen,
-      .chem-structure-detective
-    )
-    .lab-activity-heading
-    h3 {
-    font-size: var(--lab-t-body);
-    line-height: var(--lab-lh-title);
-  }
-  .chem-tool-controls {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  .chem-detective-tools {
-    grid-template-columns: repeat(3, minmax(0, 1fr)) var(--lab-target);
-  }
-  .chem-tool-controls .chem-forge-reset {
-    grid-column: 1 / -1;
-    justify-self: start;
-  }
-  .chem-detective-tools .chem-forge-reset {
-    grid-column: auto;
-    justify-self: stretch;
-  }
-  .chem-tool-action {
-    flex-direction: column;
-    gap: var(--lab-sp-4);
-    min-width: 0;
-    padding-inline: var(--lab-sp-4);
-    font-size: var(--lab-t-micro);
-  }
-  .chem-structure-choices {
-    grid-template-columns: 1fr;
-  }
-}
-.chem-process-scene {
-  display: grid;
-  gap: var(--lab-sp-8);
-  margin: 0;
-  padding: var(--lab-sp-12);
-  list-style: none;
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-lg);
-  background: var(--stage-bg);
-}
-.chem-process-scene li {
-  display: grid;
-  grid-template-columns: 2rem minmax(0, 1fr);
-  align-items: center;
-  gap: var(--lab-sp-10);
-  min-height: 3.5rem;
-  padding: var(--lab-sp-8) var(--lab-sp-10);
-  border-radius: var(--lab-r-md);
-  background: color-mix(in srgb, var(--stage-grid) 30%, var(--stage-bg));
-}
-.chem-process-scene li > span {
-  display: grid;
-  place-items: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  background: var(--stage-bg);
-  color: var(--stage-muted);
-  font-weight: 800;
-}
-.chem-process-scene li > div {
-  display: grid;
-  gap: 0.15rem;
-  min-width: 0;
-}
-.chem-process-scene li small {
-  color: var(--stage-muted);
-  line-height: 1.35;
-}
-.chem-process-scene li[data-state="done"] {
-  background: color-mix(in srgb, var(--stage-good) 14%, var(--stage-bg));
-}
-.chem-process-scene li[data-state="done"] > span {
-  background: var(--stage-good);
-  color: var(--stage-bg);
-}
-.chem-process-scene li[data-state="next"] {
-  outline: 2px dashed var(--stage-accent);
-  outline-offset: -2px;
-}
-.chem-process-scene li[data-state="locked"] {
-  opacity: 0.52;
-}
-@container lab-activity (max-width: 25rem) {
-  :is(.chem-organic-activity, .chem-applied-activity) .lab-activity-header {
-    padding: var(--lab-sp-10) var(--lab-sp-12);
-  }
-  :is(.chem-organic-activity, .chem-applied-activity)
-    :is(.lab-activity-description, .lab-authored-lead-solo) {
-    font-size: var(--lab-t-sm);
-    line-height: 1.45;
-  }
-  :is(.chem-organic-activity, .chem-applied-activity) .lab-authored-lead-solo {
-    padding: var(--lab-sp-10) var(--lab-sp-12) var(--lab-sp-4);
-  }
-  :is(.chem-organic-activity, .chem-applied-activity) .lab-activity-status {
-    gap: var(--lab-sp-6);
-    padding: var(--lab-sp-8) var(--lab-sp-12);
-    font-size: var(--lab-t-micro);
-  }
-  :is(.chem-organic-activity, .chem-applied-activity) .lab-activity-status > * + * {
-    padding-inline-start: var(--lab-sp-6);
-  }
-  :is(.chem-organic-activity, .chem-applied-activity)[data-inspector-layout="stacked"]
-    .lab-activity-canvas {
-    padding: 0 var(--lab-sp-8) var(--lab-sp-8);
-  }
-  .chem-concept-scene {
-    min-height: 9.5rem;
-  }
-  .chem-ion-scene,
-  .chem-organic-map {
-    gap: var(--lab-sp-6);
-    padding: var(--lab-sp-10);
-  }
-  .chem-ion span {
-    font-size: 0.65rem;
-  }
-  .chem-electron-path > small {
-    display: none;
-  }
-  .chem-apparatus-scene {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    padding: var(--lab-sp-10);
-  }
-  .chem-glassware i {
-    height: 4.5rem;
-  }
-  .chem-glassware[data-kind="burette"] i {
-    height: 5.5rem;
-  }
-  .chem-evidence-scene,
-  .chem-evidence-caption,
-  .chem-rusting-visual {
-    padding: var(--lab-sp-8);
-  }
-  .chem-evidence-visual {
-    min-height: 7.5rem;
-  }
-  .chem-rusting-visual i {
-    height: 3.6rem;
-  }
-  .chem-rusting-visual i::after {
-    height: 2.8rem;
-  }
-  .chem-displacement-visual,
-  .chem-acid-visual {
-    gap: var(--lab-sp-8);
-    padding: var(--lab-sp-10);
-  }
-  .chem-organic-map {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .chem-organic-arrow > i {
-    transform: rotate(90deg);
-    line-height: 1;
-  }
-  .chem-organic-map > div:not(.chem-organic-arrow) {
-    min-height: 4rem;
-  }
-  .chem-air-scene {
-    padding: var(--lab-sp-12);
-  }
-  .chem-syringe-scale {
-    height: 3.5rem;
-    font-size: 0.68rem;
-  }
-  .chem-process-scene {
-    gap: var(--lab-sp-6);
-    padding: var(--lab-sp-8);
-  }
-  .chem-process-scene li {
-    min-height: 3rem;
-    padding: var(--lab-sp-6) var(--lab-sp-8);
-  }
-  .chem-polymer-builder,
-  .chem-applied-scene {
-    gap: var(--lab-sp-8);
-    padding: var(--lab-sp-8);
-  }
-  .chem-monomer-row {
-    gap: var(--lab-sp-4);
-  }
-  .chem-monomer {
-    min-height: 4.4rem;
-  }
-  .chem-organic-choices {
-    grid-template-columns: 1fr;
-  }
-  .chem-organic-choices .lab-choice {
-    min-height: var(--lab-target);
-  }
-  .chem-vinegar-cup,
-  .chem-limewater,
-  .chem-carbon-lattice {
-    min-height: 5.7rem;
-  }
-  .chem-context-label > span {
-    width: 1.9rem;
-    height: 1.9rem;
-  }
-}
-@container lab-activity (max-width: 20rem) {
-  .chem-kitchen-bench {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .chem-kitchen-bench > i {
-    line-height: 1;
-    transform: rotate(90deg);
-  }
-  .chem-vinegar-cup,
-  .chem-limewater {
-    width: min(100%, 10rem);
-    justify-self: center;
-  }
-}
-
-/* Particle Theatre: a molecule-first phase-change experience. The molecule symbols stay large
-   enough to read on a 320px phone; the two scientific actions sit against the vessel instead of
-   living in a generic control dock. */
-.chem-particle-theatre {
-  display: grid;
-  gap: var(--lab-sp-10);
-}
-.chem-particle-vessel {
-  position: relative;
-  overflow: hidden;
-  border: 1px solid color-mix(in oklab, var(--border, var(--stage-grid)) 82%, transparent);
-  border-radius: var(--lab-r-md);
-  background:
-    radial-gradient(
-      circle at 50% 110%,
-      color-mix(in oklab, #38bdf8 12%, transparent),
-      transparent 55%
-    ),
-    var(--card, var(--stage-bg));
-}
-.chem-particle-vessel svg {
-  display: block;
-  width: 100%;
-  height: auto;
-  min-height: 14rem;
-  max-height: 22rem;
-}
-.chem-vessel-wall {
-  fill: none;
-  stroke: color-mix(in oklab, var(--foreground, var(--stage-fg)) 45%, transparent);
-  stroke-width: 2;
-  stroke-linecap: round;
-}
-.chem-liquid-level {
-  fill: color-mix(in oklab, #38bdf8 12%, transparent);
-}
-.chem-solid-bed {
-  fill: color-mix(in oklab, #93c5fd 13%, transparent);
-}
-.chem-water-molecule {
-  transform-box: view-box;
-  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-.chem-water-bond {
-  fill: none;
-  stroke: color-mix(in oklab, var(--foreground, var(--stage-fg)) 65%, transparent);
-  stroke-width: 4;
-  stroke-linecap: round;
-}
-/*
- * The atoms, softened but still on hex, and the hex is not an oversight.
- *
- * Moving these to `--fig-danger` and `--fig-solid-white` was tried and turned every atom black. The
- * `--fig-*` tokens are declared on `.lab-figure`, which is the `Figure` component's root, and this
- * lab draws a RAW `<svg>` inside `.chem-particle-vessel` instead. None of that family is in scope
- * here, so an undefined var falls back to SVG's default black fill.
- *
- * That is also why the colours were hex to begin with. The tokens in scope are `--stage-*` and the
- * host's `--card` / `--foreground`, and neither family has a red. So the fills stay as hex mixed
- * toward `--card`, which at least tracks the surface, and what changed is the saturation and the
- * stroke weight: 74% rather than 82% of the red, and hairline outlines rather than 1.5.
- *
- * The real fix is to port this lab onto `Figure`, which would put the whole token family in scope.
- * That is a larger change than a typography pass and is not what was asked for here.
- */
-.chem-oxygen {
-  fill: color-mix(in oklab, #ef4444 74%, var(--card, white));
-  stroke: color-mix(in oklab, #991b1b 48%, transparent);
-  stroke-width: 1;
-}
-.chem-hydrogen {
-  fill: color-mix(in oklab, #f8fafc 94%, var(--card, white));
-  stroke: color-mix(in oklab, var(--foreground, var(--stage-fg)) 38%, transparent);
-  stroke-width: 1;
-}
-/*
- * The labels, at a weight and a size that stop them shouting.
- *
- * They were `font-weight: 800` with a 1px white halo stroked around them, which is what made the
- * molecules read as cartoon stickers rather than as a diagram: ultra-bold glyphs with a thick
- * outline are the visual language of a sticker, and at this viewBox scale 12px renders near 36px.
- * Semibold, smaller, and with the halo reduced to a hairline that does its job without drawing a
- * second outline around every letter.
- */
-/*
- * A PINNED label, because it sits on a pinned surface.
- *
- * `fill: var(--foreground)` was tried and is wrong here: in dark mode the foreground is light, and
- * the hydrogen circle is 94% of #f8fafc, so it stays near-white in both themes. A light letter on a
- * pinned white disc is invisible, which is the theme-inversion trap this repository keeps meeting.
- * A pinned surface needs a pinned foreground, so the ink is hex on purpose and the halo is pinned
- * white rather than `--card`.
- */
-.chem-atom-symbol {
-  pointer-events: none;
-  fill: #111827;
-  font-weight: var(--lab-w-semibold, 600);
-  paint-order: stroke;
-  stroke: rgba(255, 255, 255, 0.55);
-  stroke-width: 0.6px;
-}
-.chem-oxygen-symbol {
-  /* White on the red fill, so it needs no halo at all. */
-  fill: #fff;
-  font-size: 9.5px;
-  stroke: none;
-}
-.chem-hydrogen-symbol {
-  font-size: 7.5px;
-}
-/*
- * The tracked molecule, outlined on its own atoms.
- *
- * The dashed ring this replaces sat outside the molecule and crossed the neighbouring molecule in
- * the solid state, where the lattice leaves no empty annulus to draw into. An outline on the atoms
- * themselves occupies no space that the molecule did not already occupy.
- */
-.chem-water-molecule[data-tracked] .chem-oxygen,
-.chem-water-molecule[data-tracked] .chem-hydrogen {
-  stroke: var(--primary, var(--stage-accent));
-  stroke-width: 3;
-}
-.chem-water-molecule[data-tracked] .chem-water-bond {
-  stroke: var(--primary, var(--stage-accent));
-}
-.chem-state-evidence {
-  position: absolute;
-  inset: auto var(--lab-sp-8) var(--lab-sp-8);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--lab-sp-6);
-  padding: var(--lab-sp-6) var(--lab-sp-8);
-  border: 1px solid color-mix(in oklab, var(--border, var(--stage-grid)) 70%, transparent);
-  border-radius: var(--lab-r-pill, 999px);
-  background: color-mix(in oklab, var(--card, var(--stage-bg)) 90%, transparent);
-  backdrop-filter: blur(8px);
-  font-size: var(--lab-t-micro);
-  line-height: var(--lab-lh-title);
-}
-.chem-state-evidence b {
-  text-transform: capitalize;
-}
-.chem-state-evidence span + span {
-  padding-inline-start: var(--lab-sp-6);
-  border-inline-start: 1px solid var(--border, var(--stage-grid));
-}
-.chem-energy-tools button {
-  padding: var(--lab-sp-8) var(--lab-sp-10);
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-sm);
-  background: var(--card, var(--stage-bg));
-  color: var(--foreground, var(--stage-fg));
-  font-weight: var(--lab-w-semibold);
-}
-.chem-energy-tools button span {
-  display: inline-grid;
-  place-items: center;
-  width: 1.35rem;
-  height: 1.35rem;
-  margin-inline-end: var(--lab-sp-4);
-  border-radius: 50%;
-  background: color-mix(in oklab, var(--primary, var(--stage-accent)) 12%, transparent);
-}
-.chem-energy-tools button:disabled {
-  cursor: not-allowed;
-  opacity: 0.42;
-}
-.chem-energy-meter {
-  display: flex;
-  gap: 3px;
-}
-.chem-energy-meter i {
-  display: block;
-  width: 0.45rem;
-  height: 1.4rem;
-  border-radius: var(--lab-r-pill, 999px);
-  background: color-mix(in oklab, var(--foreground, var(--stage-fg)) 10%, transparent);
-}
-.chem-energy-meter i[data-on] {
-  background: linear-gradient(to top, #f97316, #facc15);
-}
-@media (prefers-reduced-motion: reduce) {
-  .chem-water-molecule {
-    transition: none;
-  }
-}
-@container lab-activity (max-width: 22rem) {
-  .chem-particle-vessel svg {
-    min-height: 13rem;
-  }
-  .chem-energy-tools {
-    grid-template-columns: 1fr 1fr;
-  }
-  .chem-energy-meter {
-    grid-column: 1 / -1;
-    grid-row: 1;
-    justify-content: center;
-  }
-  .chem-energy-tools button {
-    padding-inline: var(--lab-sp-6);
-    font-size: var(--lab-t-eyebrow);
-  }
-  .chem-state-evidence {
-    inset-inline: var(--lab-sp-6);
-    justify-content: center;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .chem-air-nitrogen,
-  .chem-air-oxygen {
-    transition: none;
-  }
-}
-.chem-explanation .katex-display {
-  margin-block: var(--lab-sp-4);
-}
-
-@media (max-width: 34rem) {
-  .chem-dilution-scene {
-    grid-template-columns: 1fr;
-  }
-  .chem-process-arrow {
-    justify-self: center;
-    line-height: var(--lab-lh-tight);
-    transform: rotate(90deg);
-  }
-}
-
-.chem-formula-bond-controls {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: var(--lab-sp-6);
-  width: 100%;
-}
-.chem-formula-bond-controls .lab-btn {
-  min-height: 2.75rem;
-  padding-inline: var(--lab-sp-6);
-}
-.chem-formula-bond-controls .lab-btn[data-state="attached"] {
-  border-color: var(--success, var(--stage-success));
-  background: color-mix(in oklab, var(--success, var(--stage-success)) 12%, transparent);
-  color: var(--foreground, var(--stage-fg));
-  opacity: 1;
-}
-@container lab-activity (max-width: 32rem) {
-  .chem-formula-bond-controls {
-    grid-template-columns: 1fr 1fr;
-  }
-}