## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/cognitions-swe-2/e9966f12-655e-494e-9580-e5330b0ddc92-1789365706-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cognitions-swe-2/e9966f12-655e-494e-9580-e5330b0ddc92-1789365639098-full.webp
- Component on Kage: https://kage.design/component/cognitions-swe-2-feature-grid-2

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to create an original mathematical explanation section.

Build a long-form technical section explaining a trade-off or optimization concept. Use short subsections, readable paragraphs, centered equations, and two or three simple diagrams that progressively derive the idea.

### Design language
- Layout: maintain a narrow reading measure; alternate prose blocks with centered equations and diagrams; use side-by-side diagrams only when each remains legible.
- Typography: 14–16px body, 22–28px subsection headings, 16–20px equation display, and 11–12px figure captions.
- Spacing: 32–48px between subsections, 20–28px around equations, and 32px around figures.
- Colour: paper `#f8f8f6`, ink `#171717`, muted annotation `#858585`, mathematical curves in `#3516e7`, secondary annotation in soft coral `#d97d68`.
- Borders and radius: diagrams sit on near-invisible `#eeeeea` boundaries or no boundary; use square corners and avoid card styling.
- Interaction: diagrams may support hover labels, but the argument must remain fully understandable without interaction; equations should be copyable text or accessible MathML.

### Never
- Never reuse logos, product names, copy, illustrations, or imagery from the reference.
- Never replace explanatory prose with unexplained formulas.
- Never use decorative diagrams that do not advance the argument.