The user wants a single-file `index.html` containing a simulation of a chaotic double pendulum.
Key requirements:
1.  Single-page web app (CSS in `<style>`, JS in `<script>`).
2.  Self-contained (no external resources/CDNs/network).
3.  Correct equations of motion (Lagrangian mechanics).
4.  Canvas-based rendering.
5.  Visuals: Arms of the pendulum and a colorful fading trail of the tip.

Plan:
1.  Define the physics:
    *   State variables: $\theta_1, \omega_1, \theta_2, \omega_2$.
    *   Constants: $m_1, m_2, l_1, l_2, g$.
    *   Equations: The acceleration $\alpha_1$ and $\alpha_2$ are derived from the Lagrangian.
2.  Implement a numerical integrator: Runge-Kutta 4 (RK4) for stability, or a simple Euler/Verlet if performance is an issue, but RK4 is better for "correct" physics in a chaotic system.
3.  Implement the rendering loop:
    *   Clear canvas (or draw semi-transparent overlay for trail).
    *   Convert $(\theta_1, \theta_2)$ to $(x_1, y_1)$ and $(x_2, y_2)$.
    *   Draw the lines for arms.
    *   Draw the trail.
4.  Add some controls (optional but good): Ability to reset, change parameters, or drag. The prompt doesn't explicitly ask for controls, but a "Reset" button or some basic interactivity makes it better. I'll keep it simple but functional.

Equations for Double Pendulum:
Let:
$m_1, m_2$ be masses.
$l_1, l_2$ be lengths.
$\theta_1, \theta_2$ be angles.
$g$ be gravity.

The accelerations $\alpha_1 = \ddot{\theta}_1$ and $\alpha_2 = \ddot{\theta}_2$ are:
$\alpha_1 = \frac{-g(2m_1+m_2)\sin\theta_1 - m_2g\sin(\theta_1-2\theta_2) - 2\sin(\theta_1-\theta_2)m_2(\omega_2^2 l_2 + \omega_1^2 l_1 \cos(\theta_1-\theta_2))}{l_1(2m_1+m_2-m_2\cos(2\theta_1-2\theta_2))}$
$\alpha_2 = \frac{2\sin(\theta_1-\theta_2)(\omega_1^2 l_1(m_1+m_2) + g(m_1+m_2)\cos\theta_1 + \omega_2^2 l_2 m_2 \cos(\theta_1-\theta_2))}{l_2(2m_1+m_2-m_2\cos(2\theta_1-2\theta_2))}$

Wait, let's double check the common form of these equations.
From Wikipedia:
$\ddot{\theta}_1 = \frac{-g(2m_1+m_2)\sin\theta_1 - m_2 g \sin(\theta_1-2\theta_2) - 2\sin(\theta_1-\theta_2)m_2(\omega_2^2 l_2 + \omega_1^2 l_1 \cos(\theta_1-\theta_2))}{l_1(2m_1+m_2-m_2\cos(2\theta_1-2\theta_2))}$
$\ddot{\theta}_2 = \frac{2\sin(\theta_1-\theta_2)(\omega_1^2 l_1(m_1+m_2) + g(m_1+m_2)\cos\theta_1 + \omega_2^2 l_2 m_2 \cos(\theta_1-\theta_2))}{l_2(2m_1+m_2-m_2\cos(2\theta_1-2\theta_2))}$

Implementation details:
- Canvas resize to window.
- Trail implementation: An array of points $(x, y)$ with a timestamp or just a fixed length. A better way for "colorful fading" is to store a buffer of points and iterate through them, changing color based on index.
- Color: HSL is great for colorful trails.

Let's write the code.