/* shared/ks4-lesson-batch-2.css — GENERATED by build_ks4.py --batch: every distinct <style> block found in the
   <helmet> of this batch's own lesson files, deduplicated (exact text match), first-seen order.
   Never hand-edit; re-run build_ks4.py --batch. */

/* from chromosomes-mitosis.dc.html */
html, body { margin: 0; padding: 0; background: #FBF3E6; }
  a { color: var(--ks3-accent-text); }
  a:hover { color: var(--ks3-accent-hover); }
  @keyframes ks4-arrive { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
  [data-arrive] { animation: ks4-arrive .34s ease-out both; }
  @media (prefers-reduced-motion: reduce) { [data-arrive] { animation: none !important; } * { transition: none !important; } }
  button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ks3-accent-text); outline-offset: 2px; }
  @keyframes cm-grow { from { transform: scale(.86); } to { transform: scale(1); } }
  @keyframes cm-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes cm-slide { from { transform: translate(var(--cm-dx, 0px), var(--cm-dy, 0px)); } to { transform: translate(0px, 0px); } }
  @keyframes cm-draw { from { stroke-dashoffset: var(--cm-len, 400); } to { stroke-dashoffset: 0; } }
  .cm-grow { transform-box: fill-box; transform-origin: center; animation: cm-grow .9s ease-out both; }
  .cm-in { animation: cm-in .7s ease-out .55s both; }
  .cm-slide { animation: cm-slide 1.2s ease-in-out .2s both; }
  .cm-draw { stroke-dasharray: var(--cm-len, 400); animation: cm-draw 1s ease-out both; }
  @media (prefers-reduced-motion: reduce) { .cm-grow, .cm-in, .cm-slide, .cm-draw { animation: none !important; } }

/* from enzymes.dc.html */
html, body { margin: 0; padding: 0; background: #FBF3E6; }
  a { color: var(--ks3-accent-text); }
  a:hover { color: var(--ks3-accent-hover); }
  @keyframes ks4-arrive { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
  [data-arrive] { animation: ks4-arrive .34s ease-out both; }
  @media (prefers-reduced-motion: reduce) { [data-arrive] { animation: none !important; } * { transition: none !important; } }
  button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ks3-accent-text); outline-offset: 2px; }
  input[type="range"] { accent-color: #A93411; }

/* from carbon-cycle.dc.html */
html, body { margin: 0; padding: 0; background: #FBF3E6; }
  a { color: var(--ks3-accent-text); }
  a:hover { color: var(--ks3-accent-hover); }
  @keyframes ks4-arrive { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
  [data-arrive] { animation: ks4-arrive .34s ease-out both; }
  @media (prefers-reduced-motion: reduce) { [data-arrive] { animation: none !important; } * { transition: none !important; } }
  button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ks3-accent-text); outline-offset: 2px; }

/* from atoms-elements-compounds.dc.html */
/* atoms-elements-compounds · particle-box motion. The inline transform on .aec-mv is the END state; the keyframe only supplies the start. */
  .aec-mv { animation: aec-slide 1.1s cubic-bezier(.3, .7, .3, 1) backwards; }
  @keyframes aec-slide { from { transform: translate(0px, 0px); } }
  .aec-trace { stroke-dasharray: 100; animation: aec-trace .7s ease-out backwards; }
  @keyframes aec-trace { from { stroke-dashoffset: 100; } }
  .aec-ring { transform-box: fill-box; transform-origin: center; animation: aec-ring 1.2s ease-in-out 2; }
  @keyframes aec-ring { 50% { transform: scale(1.3); opacity: .3; } }
  .aec-fade { animation: aec-fade .5s ease-out 1.1s backwards; }
  @keyframes aec-fade { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .aec-mv, .aec-trace, .aec-ring, .aec-fade { animation: none !important; } }

/* from lenses.dc.html */
html, body { margin: 0; padding: 0; background: #FBF3E6; }
  a { color: var(--ks3-accent-text); }
  a:hover { color: var(--ks3-accent-hover); }
  @keyframes ks4-arrive { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
  [data-arrive] { animation: ks4-arrive .34s ease-out both; }
  @media (prefers-reduced-motion: reduce) { [data-arrive] { animation: none !important; } * { transition: none !important; } }
  .ln-tap { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; pointer-events: none; }
  .ln-fig { cursor: pointer; }
  .ln-tap span { display: block; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--ks3-accent); background: transparent; }
  .ln-tap[data-bad="1"] span { border-color: var(--ks3-alert-border); }
  @media (max-width: 480px) { .ln-tap span { width: 22px; height: 22px; border-width: 2px; } }
  button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ks3-accent-text); outline-offset: 2px; }

/* from eukaryotes-prokaryotes.dc.html */
html, body { margin: 0; padding: 0; background: #FBF3E6; }
  a { color: var(--ks3-accent-text); }
  a:hover { color: var(--ks3-accent-hover); }
  @keyframes ks4-arrive { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
  [data-arrive] { animation: ks4-arrive .34s ease-out both; }
  @media (prefers-reduced-motion: reduce) { [data-arrive] { animation: none !important; } * { transition: none !important; } }
  button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ks3-accent-text); outline-offset: 2px; }
  @keyframes ep-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
  .ep-in { transform-box: fill-box; transform-origin: center; animation: ep-in .6s ease-out both; }
  .ep-pop { transform-box: fill-box; transform-origin: center; animation: ep-in .3s ease-out both; }
  @media (prefers-reduced-motion: reduce) { .ep-in, .ep-pop { animation: none !important; } }

/* from relative-formula-mass.dc.html */
/* relative-formula-mass · unpacker and pan motion. Every element's resting (un-animated) state is the END state. */
  .rfm-pop { transform-box: fill-box; transform-origin: center; animation: rfm-pop .35s ease-out backwards; }
  @keyframes rfm-pop { from { transform: scale(0); opacity: 0; } }
  .rfm-grow { transform-box: fill-box; transform-origin: left center; animation: rfm-grow .3s ease-out backwards; }
  @keyframes rfm-grow { from { transform: scaleX(0); } }
  .rfm-fade { animation: rfm-fade .4s ease-out backwards; }
  @keyframes rfm-fade { from { opacity: 0; } }
  .rfm-drop { animation: rfm-drop .45s cubic-bezier(.5, 0, .8, .4) backwards; }
  @keyframes rfm-drop { from { transform: translate(0px, -140px); opacity: 0; } }
  .rfm-beam { transform-box: view-box; transform-origin: 450px 110px; animation: rfm-tilt 2.4s ease-in-out; }
  @keyframes rfm-tilt { 40%, 55% { transform: rotate(-7deg); } }
  .rfm-lpan { animation: rfm-lpan 2.4s ease-in-out; }
  @keyframes rfm-lpan { 40%, 55% { transform: translate(0px, 36px); } }
  .rfm-rpan { animation: rfm-rpan 2.4s ease-in-out; }
  @keyframes rfm-rpan { 40%, 55% { transform: translate(0px, -36px); } }
  @media (prefers-reduced-motion: reduce) { .rfm-pop, .rfm-grow, .rfm-fade, .rfm-drop, .rfm-beam, .rfm-lpan, .rfm-rpan { animation: none !important; } }