Lazy-load Genetics stylesheet

[elkimek]

What

• defer css/genetics.css until the Genome route or a styled DNA import/manual-entry surface is opened
• keep shared DNA behavior eager while the existing DNA runtime owns stylesheet single-flight, cascade position, failure containment, and retry
• cover cold-start exclusion, route/action failures, retries, and cache behavior in browser and audit tests
• ratchet the cold-load reference and document the new presentation boundary

Why

DNA logic is shared by returning-user dashboard summaries, recommendations, catalog setup, and import routing, so splitting that behavior would add risk and requests. The Genetics presentation layer is not needed on a normal returning-user dashboard startup and can be deferred safely.

Cold-load impact

Identical fresh mobile returning-user runs with browser cache and service workers disabled:

• requests: 437 → 436 (-1)
• compressed transfer: 1,844,244 → 1,841,186 bytes (-3,058)
• decoded resources: 5,577,570 → 5,562,340 bytes (-15,230)

Validation

• COVERAGE=1 ./run-tests.sh
  • 487 Node/Vitest tests
  • 410 Chromium tests
  • 472 responsive assertions
  • offline PWA and two-device sync coverage
  • 67.13% global function coverage (67.10% floor)
• npm run quality (11/11)
• npm run typecheck
• npm run typecheck:checkjs
• npm run architecture:check (465 modules, 0 cycles)
• targeted Genetics/DNA/views browser coverage (8/8)
• npm run performance:check (436 requests, 1,841,186 transfer bytes, 5,562,340 decoded bytes)