# REQ-tv-d00002: CSS Extraction

**Level**: Dev | **Status**: Draft | **Implements**: REQ-tv-p00001

## Assertions

A. All CSS rules SHALL be extracted from Python string literals to a standalone `styles.css` file located at `templates/partials/styles.css`.

B. The CSS file SHALL contain all styling currently generated by the following methods: `_generate_side_panel_css()`, `_generate_code_viewer_css()`, `_generate_legend_modal_css()`, and `_generate_file_picker_modal_css()`.

C. The CSS file SHALL be a valid CSS document that can be parsed by standard CSS tools and linters.

D. The CSS file SHALL be readable by IDEs with proper syntax highlighting and autocomplete support.

E. CSS content SHALL be loaded from the file at template render time.

F. The extracted CSS SHALL produce visually identical output to the current inline CSS generation.

G. CSS selectors and rules SHALL NOT be duplicated between the extracted file and any remaining inline styles.

H. The CSS file SHALL use consistent formatting: 4-space indentation, one property per line, and blank lines between rule blocks.

## Rationale

The current implementation embeds 629 lines of CSS across 4 Python methods as string literals. This approach:
- Prevents IDE CSS support (linting, autoprefixer, minification)
- Makes it difficult to detect duplicate selectors
- Couples styling changes to Python code changes
- Prevents use of CSS tooling

Extracting CSS to a standalone file enables:
- Proper IDE support for CSS editing
- Use of CSS linters and formatters
- Independent modification of styles
- Easier review of styling changes

*End* *CSS Extraction* | **Hash**: f31a509b
