/* Dark: two moving layers. Light: a bounded, recycled corridor and small sprite flocks.
   Animate transforms/opacity only, never SVG descendants or filter radii.
   These layers remain OUTSIDE the glass shell's backdrop root. */
.ambient-scene { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
/* These are already explicitly animated. Do not also inherit the public UI's
   blanket paint transitions when a recycled form changes its custom properties. */
.ambient-scene *, .ambient-scene *::before, .ambient-scene *::after { transition: none; }
.ambient-space, .ambient-microcosm { position: absolute; inset: 0; }
.ambient-space-anchor { position: absolute; inset: 0; }
.ambient-space-art { position: absolute; inset: -3%; background: center / cover no-repeat; opacity: .58; transform-origin: 67.5% 26.7%; }
html:not([data-theme="light"]) .ambient-space-art { background-image: url('/assets/marketing/ambient-space.svg?v=1'); animation: space-drift 96s ease-in-out infinite alternate; }
.ambient-space-glow { position: absolute; right: -5rem; top: -14rem; width: min(65vw, 48rem); height: 42rem; border-radius: 50%; background: radial-gradient(ellipse, #57c2b409 0%, #2a4a5604 42%, transparent 70%); animation: space-light 70s ease-in-out infinite alternate; }
.ambient-microcosm { display: none; visibility: hidden; }
.micro-life { display: none; position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .46; pointer-events: none; contain: strict; transition: none; }
html[data-theme="light"] .micro-life { display: block; animation: micro-life-arrive 3s ease-out both; }
@keyframes micro-life-arrive { from { opacity: 0; } to { opacity: .46; } }
@media (prefers-reduced-motion: reduce) { html[data-theme="light"] .micro-life { animation: none; } }
html[data-theme="light"] .ambient-space { display: none; }
html[data-theme="light"] .ambient-microcosm { display: block; }
/* Seed the initial positions before revealing the scene. Theme changes use the
   same soft arrival; no bright first frame with the unseeded default positions. */
html[data-theme="light"].microcosm-ready .ambient-microcosm { visibility: visible; animation: micro-arrive 3s ease-out both; }
.micro-field { position: absolute; inset: -3%; background: center / 60rem repeat; opacity: .18; }
.micro-depth { position: absolute; --period: 32s; --phase: 0s; --focus-lag: 0s; --far: .68; --near: 1.22; --turn: -6deg; --softness: 32px; --flow-x: 18px; --flow-y: -12px; }
.micro-face { position: absolute; inset: 0; background: center / contain no-repeat; background-image: var(--micro-image, none); }
/* The blur radius is CONSTANT so the compositor can cache the soft surface. Only its opacity is crossfaded.
   Scale changes sell travel through the focal plane rather than sideways bobbing. */
.micro-soft { filter: blur(var(--softness)) brightness(.78) saturate(.7); opacity: .32; }
.micro-sharp { filter: blur(.6px) brightness(.78) saturate(.7); opacity: .66; }
/* One shared camera drift, independent of page content. Three recycled strands,
   two on mobile. Scale 1 maps source pixels to device pixels (set only on resize). */
.micro-camera { position: absolute; inset: 0; --dna-unit: 800px; --dna-near: 5.6; transform-origin: 62% 26%; }
.micro-dna { position: absolute; left: 62%; top: 26%; width: var(--dna-unit); aspect-ratio: 2 / 3; --side: 1; --mirror: 1; --tilt: -12deg; --journey: 108s; --departure: -12s; --wander-x: 3vw; --wander-y: -2vh; --yaw-near: -3deg; --yaw-mid: 1deg; --yaw-far: 4deg; --veil-x: 42%; --veil-y: 28%; --veil-bx: 70%; --veil-by: 76%; opacity: 0; }
.micro-dna-b { --side: -1; --mirror: -1; --tilt: 10deg; --departure: -48s; }
.micro-dna-c { --tilt: 18deg; --departure: -84s; }
.dna-orientation { position: absolute; inset: 0; transform: scaleX(var(--mirror)) rotate(var(--tilt)); }
.dna-orientation, .micro-far-dna .far-art {
  /* The fork exits the RIGHT edge of the source as well as the top/bottom.
     Feather in source coordinates, before rotation/mirroring: a broad mist-like
     falloff hides every crop, even at the sharpest point of the journey.
     Intersect (not add) the two static masks; no new surface animation or artwork. */
  mask-image:
    linear-gradient(transparent 3%, #000 17%, #000 78%, #0009 86%, #0002 93%, transparent 98%),
    linear-gradient(90deg, transparent 2%, #000 16%, #000 68%, #000c 76%, #0005 86%, #0001 93%, transparent 98%);
  mask-composite: intersect;
}
/* Local occlusion lives in source coordinates, so it follows every orientation.
   Reposition only while the entire strand is invisible. Static masks/blur, no
   per-frame filter or gradient changes and no extra downloaded texture. */
.dna-texture { position: absolute; inset: 0; mask-image: radial-gradient(ellipse 38% 25% at var(--veil-x) var(--veil-y), #0005 10%, #000c 58%, #000 100%), radial-gradient(ellipse 32% 29% at var(--veil-bx) var(--veil-by), #0008 6%, #000d 62%, #000 100%); mask-composite: intersect; }
.dna-orientation::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 32% 22% at var(--veil-x, 42%) var(--veil-y, 28%), #fafbfbcc, transparent 100%), radial-gradient(ellipse 28% 24% at var(--veil-bx, 70%) var(--veil-by, 76%), #dce4e86b, transparent 100%); mask-image: var(--micro-image, none); mask-size: contain; mask-repeat: no-repeat; filter: blur(24px); opacity: .25; }
.dna-soft { filter: blur(16px) brightness(.78) saturate(.7); opacity: 1; }
.dna-sharp { filter: brightness(.78) saturate(.7); opacity: 0; }
/* Once source-coordinate feathering is baked, no masked ancestor clips the
   scaled/rotating focus surfaces. Keep CSS masks above as a decoding fallback. */
.dna-prepared .dna-orientation, .dna-prepared .dna-texture { mask-image: none; }
.dna-prepared .dna-orientation::after { display: none; }
.dna-prepared .micro-face { background-image: none; }
.dna-sprite { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
html[data-theme="light"] .micro-camera { animation: micro-camera-turn 64s ease-in-out infinite; }
html[data-theme="light"] .micro-dna { animation: dna-recede var(--journey) linear var(--departure) infinite; }
html[data-theme="light"] .dna-sharp { animation: dna-focus var(--journey) linear var(--departure) infinite; }
html[data-theme="light"] .dna-soft { animation: dna-defocus var(--journey) linear var(--departure) infinite; }
.micro-mito { width: min(36vw, 32rem); aspect-ratio: 1.5; right: 24%; bottom: 18%; opacity: .44; --period: 54s; --phase: -12s; --focus-lag: -3s; --turn: 12deg; }
.micro-cell { width: min(48vw, var(--cell-size, 440px)); aspect-ratio: var(--cell-ratio); left: var(--cell-x, 48%); top: var(--cell-y, 18%); --cell-alpha: .3; --period: 52s; --phase: -12s; --pitch: 12deg; --yaw: -16deg; --focus-x: 44%; --focus-y: 36%; --shade-angle: 135deg; --shade-alpha: .3; --cell-clip: inset(0); }
/* Three independently framed views of the original transparent texture. Clip the
   SOURCE child, then blur its parent: this never blurs a rectangular crop boundary. */
.micro-cell-round, .micro-far-cell { --cell-ratio: 526 / 528; --cell-source-size: 170.3422% 113.0682%; --cell-source-position: 5.4054% 23.1884%; --cell-clip: polygon(0 0, 100% 0, 100% 65%, 96% 70%, 96% 100%, 0 100%); }
.micro-cell-oval { --cell-x: 72%; --cell-y: 5%; --cell-size: 300px; --phase: -30s; --cell-ratio: 338 / 253; --cell-source-size: 265.0888% 235.9684%; --cell-source-position: 97.1326% 35.4651%; }
.micro-cell-red { --cell-x: 60%; --cell-y: 52%; --cell-size: 220px; --phase: -44s; --cell-ratio: 184 / 155; --cell-source-size: 486.9565% 385.1613%; --cell-source-position: 73.0337% 83.0317%; --cell-clip: polygon(16% 0, 100% 0, 100% 100%, 0 100%, 0 25%); }
.cell-orientation { position: absolute; inset: 0; opacity: var(--cell-alpha); transform: perspective(900px) rotateX(var(--pitch)) rotateY(var(--yaw)); }
.micro-cell .micro-face { background-image: none; }
.cell-art { position: absolute; inset: 0; background-image: var(--micro-image, none); background-repeat: no-repeat; background-size: var(--cell-source-size); background-position: var(--cell-source-position); clip-path: var(--cell-clip); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 65%, #000c 78%, #0003 91%, transparent 100%); }
.micro-cell .micro-sharp { mask-image: radial-gradient(ellipse at var(--focus-x) var(--focus-y), #000 30%, #000c 75%, transparent 100%); }
/* Shade INSIDE each focus surface. A separate sharp shadow used to leave crisp,
   pale membranes visible after the cell itself had gone out of focus. */
.micro-cell .cell-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--shade-angle), #29454b88, transparent 65%); opacity: var(--shade-alpha); mask-image: var(--micro-image, none); mask-size: var(--cell-source-size); mask-repeat: no-repeat; mask-position: var(--cell-source-position); }
.micro-particles { width: min(72vw, 60rem); aspect-ratio: 1; right: 0; top: -8%; opacity: .32; --period: 48s; --phase: -4s; --focus-lag: -5s; --far: .75; --near: 1.3; --turn: 3deg; --softness: 22px; }
.micro-vesicles { width: min(30vw, 27rem); aspect-ratio: 1.5; left: 40%; top: -8%; opacity: .38; --period: 70s; --phase: -26s; --focus-lag: 0s; --turn: -18deg; }
.micro-drifter-slow { width: min(21vw, 19rem); aspect-ratio: 1.5; right: -3%; top: 39%; opacity: .30; --period: 62s; --phase: -36s; --focus-lag: -8s; --turn: 28deg; --stroke-period: 7s; --stroke-phase: -2.8s; --stroke-distance: 3%; }
/* Theme-scoped URLs: dark visitors do not download the light artwork. */
html[data-theme="light"] .micro-field { background-image: url('/assets/marketing/micro-particles-v2.svg'); animation: micro-field-turn 120s ease-in-out infinite alternate; }
html[data-theme="light"] .micro-dna, html[data-theme="light"] .micro-far-dna { --micro-image: url('/assets/marketing/micro-chromatin-v2.webp'); }
html[data-theme="light"] .micro-mito, html[data-theme="light"] .micro-far-mito { --micro-image: url('/assets/marketing/micro-mitochondrion-v2.webp'); }
html[data-theme="light"] .micro-cell, html[data-theme="light"] .micro-far-cell { --micro-image: url('/assets/marketing/micro-cells-v2.webp'); }
html[data-theme="light"] .micro-particles { --micro-image: url('/assets/marketing/micro-particles-v2.svg'); }
html[data-theme="light"] .micro-vesicles { --micro-image: url('/assets/marketing/micro-vesicles-v3.webp'); }
html[data-theme="light"] .micro-drifter-slow, html[data-theme="light"] .micro-swimmer { --micro-image: url('/assets/marketing/micro-drifter-v3.webp'); }
/* The generated curves already encode speed. Extra easing would stop every
   sample and break the model. Focus and motion share the SAME depth clock. */
html[data-theme="light"] .micro-depth { animation: micro-depth-pass var(--period) linear var(--phase) infinite; }
html[data-theme="light"] .micro-sharp { animation: micro-focus var(--period) linear var(--phase) infinite; }
html[data-theme="light"] .micro-soft { animation: micro-defocus var(--period) linear var(--phase) infinite; }
html[data-theme="light"] .micro-cell { animation: micro-cell-pass var(--period) linear var(--phase) infinite; }
html[data-theme="light"] .micro-cell .micro-sharp { animation: micro-cell-focus var(--period) linear var(--phase) infinite; }
html[data-theme="light"] .micro-cell .micro-soft { animation: micro-cell-defocus var(--period) linear var(--phase) infinite; }
/* Far-field movement comes BEFORE every image/current in paint order. Fixed tiny
   pools, with staggered drift/dart timing; no particle simulation or animated blur. */
.micro-distant, .micro-fluid { position: absolute; inset: 0; pointer-events: none; }
/* A separate far plane: three ~300px silhouettes sharing the already-loaded
   sources. One constant soft surface each; no sharp pass at this distance. */
.micro-far-field { position: absolute; inset: 0; pointer-events: none; }
.micro-far-form { position: absolute; left: var(--far-x, 40%); top: var(--far-y, 30%); width: var(--far-size, 300px); aspect-ratio: 1; --far-turn: 12deg; --far-dx: 30px; --far-dy: -20px; --far-period: 82s; --far-phase: -18s; opacity: 0; }
.far-art { position: absolute; inset: 0; background: center / contain no-repeat; background-image: var(--micro-image, none); filter: blur(var(--far-blur, 5px)) brightness(.72) saturate(.7); mask-image: radial-gradient(ellipse at 50% 45%, #000e 18%, #000a 55%, transparent 80%); }
.micro-far-cell .far-art { background-image: none; }
.micro-far-dna { aspect-ratio: 2 / 3; }
/* Keep the source's 2:3 framing, then apply the same crop feather as near DNA.
   A radial mask on a square letterboxed frame exposed the distant cut ends. */
.micro-far-dna .far-art { mask-image: linear-gradient(transparent 3%, #000 17%, #000 78%, #0009 86%, #0002 93%, transparent 98%), linear-gradient(90deg, transparent 2%, #000 16%, #000 68%, #000c 76%, #0005 86%, #0001 93%, transparent 98%); }
html[data-theme="light"] .micro-far-form { animation: micro-far-pass var(--far-period) linear var(--far-phase) infinite; }
.micro-mote { position: absolute; left: var(--mote-x, 65%); top: var(--mote-y, 35%); width: var(--mote-size, 3px); aspect-ratio: 1; border-radius: 50%; background: #537e83; box-shadow: 8px 4px 1px -1px #6b8b9866, -5px 9px 1px -1px #809f9166; opacity: 0; --dart-x: 12vw; --dart-y: -8vh; --transit: 22s; --departure: -6s; }
.micro-mote:nth-child(3n) { --mote-x: 84%; --mote-y: 65%; --departure: -14s; }
.micro-mote:nth-child(3n + 1) { --mote-x: 52%; --mote-y: 16%; --departure: -2s; }
.micro-mote:nth-child(3n + 2) { --mote-x: 76%; --mote-y: 42%; --departure: -9s; }
html[data-theme="light"] .micro-mote { animation: micro-mote-current var(--transit) linear var(--departure) infinite; }
/* Broad gradient lenses stretch very slowly, giving fluid-like waviness without
   a displacement shader, backdrop filter or animation of gradient/filter values. */
.micro-lens { position: absolute; left: 30%; top: 5%; width: min(72vw, 900px); aspect-ratio: 1.5; opacity: .34; background: radial-gradient(ellipse 42% 42% at 42% 58%, transparent 30%, #779a9a12 43%, #ffffff6b 52%, transparent 98%), radial-gradient(ellipse 30% 34% at 70% 34%, #6e92920c, transparent 98%); --liquid-period: 76s; --liquid-phase: -18s; }
.micro-lens-b { left: 46%; top: 36%; width: min(62vw, 780px); opacity: .24; --liquid-period: 92s; --liquid-phase: -62s; }
html[data-theme="light"] .micro-lens { animation: micro-fluid-sway var(--liquid-period) ease-in-out var(--liquid-phase) infinite alternate; }
/* Small, faint foreground currents: cached sprites, never a particle simulation.
   This layer sits above the large forms but still behind the readable page UI. */
.micro-current { position: absolute; inset: 0; pointer-events: none; }
.micro-swimmer, .micro-flock { position: absolute; left: 0; top: var(--lane); background: center / contain no-repeat; opacity: 0; --strength: .17; --transit: 9s; --departure: -2s; }
.micro-swimmer { width: 86px; aspect-ratio: 1.5; --swim-side: 1; --transit: 42s; --strength: .48; --stroke-period: 4.6s; --stroke-phase: 0s; --stroke-distance: 20%; }
.micro-swimmer-a { --lane: 22%; }
.micro-swimmer-b { left: 100%; width: 56px; --swim-side: -1; --lane: 65%; --strength: .42; --transit: 52s; --departure: -19s; --stroke-phase: -1.7s; }
.micro-swimmer-c { width: 106px; --lane: 48%; --strength: .5; --transit: 38s; --departure: -28s; --stroke-phase: -3.2s; }
.micro-swimmer-d { width: 44px; --swim-side: 1; --lane: 82%; --strength: .4; --transit: 56s; --departure: -12s; --stroke-phase: -4.1s; }
/* Two tiny alpha-masked regions are prepared once by ambient.js. No animated
   CSS masks: those repainted continuously in Edge. Blur lives on the leaves,
   not an ancestor of the bending surface. The original whole sprite is the
   graceful fallback if preparation fails. Only the tentacles bend. */
.micro-drifter-slow .micro-face { background-image: none; filter: none; }
.micro-drifter-slow .micro-soft { --swimmer-filter: blur(var(--softness)) brightness(.78) saturate(.7); }
.micro-drifter-slow .micro-sharp { --swimmer-filter: blur(.6px) brightness(.78) saturate(.7); }
.swimmer-art { position: absolute; inset: 0; transform-origin: 66% 42%; }
.swimmer-body, .swimmer-tail { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 66% 42%; filter: var(--swimmer-filter, blur(1px) brightness(.7) saturate(.7)); }
html[data-theme="light"] .swimmer-art { animation: micro-propulsion var(--stroke-period) linear var(--stroke-phase) infinite; }
html[data-theme="light"] .swimmer-tail { animation: micro-tentacles var(--stroke-period) linear var(--stroke-phase) infinite; }
.micro-flock { left: 62%; top: 26%; width: 190px; aspect-ratio: 3; --flight-side: -1; --dive: 1; --strength: .32; --transit: 40s; --departure: -12s; }
.micro-flock-b { width: 160px; --flight-side: 1; --strength: .23; --transit: 48s; --departure: -32s; }
.micro-flock-c { width: 210px; --flight-side: 1; --dive: -.55; --strength: .24; --transit: 56s; --departure: -24s; }
.flock-face { position: absolute; inset: 0; background: center / contain no-repeat; }
.flock-soft { filter: blur(3px); }
.micro-shadow { position: absolute; left: 62%; top: 26%; width: clamp(220px, 24vw, 380px); aspect-ratio: 1.6; opacity: 0; --shadow-side: -1; --transit: 84s; --departure: -29s; background: radial-gradient(ellipse 28% 42% at 28% 58%, #35595d88, transparent 98%), radial-gradient(ellipse 24% 34% at 76% 34%, #4f647c66, transparent 98%), radial-gradient(ellipse 38% 22% at 62% 78%, #68837d44, transparent 98%); }
.micro-shadow-b { width: 260px; --shadow-side: 1; --transit: 97s; --departure: -63s; }
html[data-theme="light"] .micro-swimmer { animation: micro-current-pass var(--transit) linear var(--departure) infinite; }
html[data-theme="light"] .flock-face { background-image: url('/assets/marketing/micro-flock-v3.svg'); }
html[data-theme="light"] .micro-flock { animation: micro-flock-depth var(--transit) linear var(--departure) infinite; }
html[data-theme="light"] .flock-sharp { animation: flock-focus var(--transit) linear var(--departure) infinite; }
html[data-theme="light"] .flock-soft { animation: flock-defocus var(--transit) linear var(--departure) infinite; }
html[data-theme="light"] .micro-shadow { animation: micro-shadow-pass var(--transit) ease-in-out var(--departure) infinite; }
html[data-theme="light"] .micro-flock-b, html[data-theme="light"] .micro-flock-b .flock-face, html[data-theme="light"] .micro-shadow-b { animation-direction: reverse; }
@keyframes space-drift { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
@keyframes micro-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes micro-field-turn { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } }
@keyframes space-light { from { transform: translate(-2rem, 0); opacity: .65; } to { transform: translate(1rem, 2rem); opacity: 1; } }
@keyframes micro-camera-turn {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) skew(0deg, 0deg); }
  32% { transform: translate3d(1.2vw, .5vh, 0) rotate(.4deg) skew(.45deg, -.2deg); }
  68% { transform: translate3d(-1vw, -.4vh, 0) rotate(-.4deg) skew(-.35deg, .25deg); }
}
/* Distant silhouettes remain separate from the generated depth/focus curves.
   Their small screen-space drift sits behind the main passing forms. */
@keyframes micro-far-pass {
  0%, 4% { transform: translate3d(0, 0, 0) rotate(var(--far-turn)) scale(1); opacity: 0; }
  18% { opacity: .22; }
  48% { transform: translate3d(var(--far-dx), var(--far-dy), 0) rotate(calc(var(--far-turn) + 7deg)) scale(.92); opacity: .28; }
  82% { opacity: .12; }
  94%, 100% { transform: translate3d(calc(var(--far-dx) * 1.4), calc(var(--far-dy) * 1.4), 0) rotate(calc(var(--far-turn) + 11deg)) scale(.84); opacity: 0; }
}
@keyframes micro-mote-current {
  0% { transform: translate3d(0, 0, 0) rotate(-12deg) scale(.55); opacity: 0; }
  12% { opacity: .32; }
  24% { transform: translate3d(calc(var(--dart-x) * .1), calc(var(--dart-y) * .12), 0) rotate(-4deg) scale(.8); opacity: .54; }
  36% { transform: translate3d(calc(var(--dart-x) * .65), calc(var(--dart-y) * .45), 0) rotate(5deg) scale(.65); opacity: 0; }
  46% { opacity: 0; }
  64% { transform: translate3d(calc(var(--dart-x) * .72), calc(var(--dart-y) * .5), 0) rotate(12deg) scale(.85); opacity: .48; }
  78% { transform: translate3d(var(--dart-x), calc(var(--dart-y) * .95), 0) rotate(24deg) scale(.55); opacity: .18; }
  94%, 100% { transform: translate3d(calc(var(--dart-x) * 1.08), var(--dart-y), 0) rotate(36deg) scale(.35); opacity: 0; }
}
@keyframes micro-fluid-sway {
  0% { transform: translate3d(-8vw, 4vh, 0) rotate(-8deg) scale(.9, 1.12) skewX(-5deg); }
  50% { transform: translate3d(1vw, -3vh, 0) rotate(3deg) scale(1.1, .84) skewX(4deg); }
  100% { transform: translate3d(8vw, 2vh, 0) rotate(9deg) scale(.94, 1.16) skewX(-2deg); }
}
@keyframes micro-shadow-pass {
  0%, 100% { opacity: 0; }
  0% { transform: translate3d(calc(-50% + var(--shadow-side) * 35vw), 10vh, 0) rotate(-18deg) scale(1.2) skewX(-4deg); }
  22% { opacity: .1; }
  50% { transform: translate3d(calc(-50% + var(--shadow-side) * 9vw), -7vh, 0) rotate(12deg) scale(1.7, 1.1) skewX(6deg); opacity: .16; }
  72% { opacity: .08; }
  100% { transform: translate3d(calc(-50% - var(--shadow-side) * 35vw), -18vh, 0) rotate(24deg) scale(.8) skewX(-3deg); }
}
/* Gate opt-in promotional motion as well as the fixed scene. The bloom library already
   has its own visibility observer; do not alter its functional agent states. */
html.ambient-paused .ambient-scene *,
html.ambient-paused .ambient-scene *::before, html.ambient-paused .ambient-scene *::after,
html.ambient-paused .hero-stage *, html.ambient-paused .hero-stage *::before, html.ambient-paused .hero-stage *::after,
html.ambient-paused .hero-ground *, html.ambient-paused .hero-ground *::before, html.ambient-paused .hero-ground *::after,
.scene-offscreen *, .scene-offscreen *::before, .scene-offscreen *::after { animation-play-state: paused !important; }
@media (max-width: 42rem) {
  .micro-field { background-size: 40rem; }
  .micro-mote:nth-child(n + 4), .micro-lens-b { display: none; }
  .micro-far-form { width: 240px; }
  .micro-far-mito { display: none; }
  .micro-dna-c { display: none; }
  .micro-mito { width: 72vw; right: -13%; bottom: 1%; opacity: .32; }
  .micro-cell { width: min(72vw, var(--cell-size, 440px)); }
  .micro-cell-oval { display: none; }
  .micro-drifter-slow { display: none; }
  .micro-vesicles { width: 70vw; left: -30%; top: auto; bottom: 14%; opacity: .22; }
  .micro-particles { width: 130vw; right: -35%; top: 12%; opacity: .28; }
  .micro-swimmer-c, .micro-swimmer-d, .micro-flock-c, .micro-shadow-b { display: none; }
  .micro-swimmer { width: 58px; --strength: .35; }
  .micro-flock { width: 120px; --strength: .3; }
  .ambient-space-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-scene *, .ambient-scene *::before, .ambient-scene *::after { animation: none !important; }
  .micro-current, .micro-distant, .micro-fluid, .micro-far-field { display: none; }
  .micro-camera { transform: none; }
  .micro-dna { opacity: .3; transform: translate3d(calc(-50% + var(--side) * 38vw), -50%, 0) scale(1.5); }
  .micro-dna-c { display: none; }
  .dna-soft { opacity: .9; }
  .dna-sharp { opacity: .1; }
  .micro-soft { opacity: .9; }
  .micro-sharp { opacity: .1; }
  .micro-cell { opacity: .18; }
  .cell-orientation { opacity: 1; }
}