# Feature Context: Lab.html Split

## Current State

- lab.html: 5180L total
  - Lines 10-866: inline `<style>` block (856L)
  - Lines 868-4303: HTML body with 39 sim-panels
  - Lines 4304-4326: external script tags (engine modules)
  - Lines 4327-5152: inline `<script>` block (825L glue)
  - Lines 5153+: more script tags
- 39 engine modules already extracted in `frontend/js/labs/*.js`
- `lab-init.js` (543L) is the orchestrator
- 265 hardcoded brand colors throughout
- 1017 inline `style=` attributes

## Key Discoveries

- Each sim has a `<div id="sim-X" class="sim-proj-wrap" style="display:none">` pattern
- Sim activation likely via `sim-switcher` element + JS that toggles display
- Lab has its own large CSS scope that doesn't conflict with ls.css (verify)

## Cross-Phase Dependencies

- **Phase 1** (extract style) — independent
- **Phase 2** (extract glue) — independent of Phase 1
- **Phase 3** (token purification) — can run after Phase 1 (CSS file becomes purification target)
- **Phase 4** (hash-router) — needs Phase 2 (router code in lab-glue.js easier to extend than inline)
- **Phase 5** (template lazy) — needs Phase 4 (router triggers template activation)

## Temporary Workarounds

(пусто — заполняется implementer'ом)

## Implementation Notes

### Что НЕ трогаем

- `frontend/js/labs/*.js` engine-классы (CollisionSim, ProjectileSim и т.д.) — они работают
- `frontend/js/labs/lab-init.js` — orchestrator, может расширяться, но не переписываться целиком
- `<canvas>` элементы и их id — engine-классы binds к ним по id

### Безопасные паттерны (из прошлой работы)

- Extract `<style>` → external file: добавить `<link rel="stylesheet">` в head, скопировать содержимое в .css, удалить inline. Проверить визуал curl-200 + spot-check styles.
- Extract `<script>` → external file: добавить `<script src=>` ПОСЛЕ engine-modules, переместить glue. Watch for global-leak (если inline relies on top-level vars).
- Token purification: replace `#9B5DE5` → `var(--violet)`, keep tints (`rgba(...)`), keep curated palettes.