The objective is to create a single-page web app (`index.html`) that uses `p5.min.js` (which is already present in the workspace) to render a procedural L-system fractal tree that branches recursively and sways in the wind.

    *   Language: HTML/CSS/JS.
    *   File: Single file `index.html`.
    *   Libraries: Use `p5.min.js` via `<script src="p5.min.js"></script>`.
    *   No external resources, CDNs, or network requests.
    *   Functionality:
        *   L-system (or recursive branching).
        *   Procedural growth.
        *   Swaying effect (wind).

    *   Recursive branching is simpler for a "tree" than a formal string-based L-system, but the prompt specifically mentions "L-system fractal tree". I can implement a basic recursive branching function that simulates the essence of an L-system (or use a string-based one).
    *   Swaying: Use a `sin()` or `cos()` function based on `frameCount` and `time` to vary the angle of branches.
    *   Growth: Animate the length of the branches over time.
    *   Visuals: Brown for trunk, green for leaves.

    *   *Setup*: Canvas size, background color.
    *   *Draw Loop*: Clear screen, call the recursive tree function.
    *   *Recursive Function*: `branch(len, angle)`
        *   Base case: `len < minLength`.
        *   Draw line.
        *   Translate to end of line.
        *   Push/Pop matrix.
        *   Rotate by (angle + wind offset).
        *   Recurse.
    *   *Wind*: `windOffset = sin(frameCount * 0.02) * amplitude`.
    *   *Growth*: `currentLength = lerp(0, targetLength, growthFactor)`.

    *   Need a way to make it look "procedural" (maybe slight randomization of angles/lengths).
    *   Ensure it fits within the single `index.html` constraints.

Okay, `p5.min.js` is present. I will now write the `index.html` file.

Plan for `index.html`:
1.  HTML structure with a `<script src="p5.min.js"></script>`.
2.  CSS to make the canvas full screen and remove margins.
3.  JavaScript:
    *   Global variables for growth, wind, and tree parameters.
    *   `setup()`: Create canvas, set initial state.
    *   `draw()`:
        *   Clear background.
        *   Translate to bottom center.
        *   Call `drawTree()`.
    *   `drawTree(length, depth)`:
        *   Recursive function.
        *   Include a "wind" offset using `sin(frameCount * 0.01)`.
        *   Gradually increase `length` over time to simulate growth.
        *   Randomize branch angles slightly for a more natural look.
        *   Color transition from brown (trunk) to green (leaves).

Let's refine the L-system part. I'll use a recursive branching approach which is the standard way to implement fractal trees in p5.js, acting as the execution phase of a simple L-system grammar ($F \to FF-[-F+F+F]+[+F-F-F]$).

Actually, a recursive function is more flexible for the "swaying" and "growth" animations.

Detailed implementation:
- `growth` variable from 0 to 1.
- `wind` variable calculated via `sin(frameCount * 0.02)`.
- Recursive depth limit (e.g., 8-10).
- Line thickness decreasing with depth.
- Color shifting based on depth.

The current implementation uses `random(-0.02, 0.02)` inside the `draw()` loop. Since `draw()` runs 60 times per second, the tree will "jitter" because the random values change every frame. I need to pre-calculate the random offsets or use a seed to make the tree structure stable while the wind sways it.

Also, the `branch` function is called recursively. I should optimize the color transition and stroke weight to be based on depth properly.

Correcting the jitter:
1. Use a seed or an array to store branch variations.
2. Or, simply use the depth and a consistent formula for the "natural" variation so it's deterministic per branch.

Actually, a better approach for "procedural" but stable is to use a seed with `randomSeed()` or calculate the random offset based on the branch's position in the tree.

Wait, I can use `noise()` which is smooth, or just remove the `random()` inside the `branch` call and instead use a deterministic offset based on the depth and branch side.

Let's refine the `branch` function:
- Use `randomSeed()` if I want randomness, but for a swaying tree, the "structure" should be constant.
- I'll remove the `random()` and instead use a fixed set of variations or just the `windOffset`.

Also, the `strokeWeight` is being modified inside the recursion. Since `strokeWeight` is a global state in p5, I should set it explicitly based on depth.

Revised logic:
- Use `strokeWeight` based on `depth`.
- Use `stroke` based on `depth`.
- Use `windOffset` for sway.
- To make it look more like an L-system, I'll use a slightly more complex branching pattern (e.g., 3 branches instead of 2).

Let's update the code.

The user wants a procedural L-system fractal tree that grows and sways. I have implemented a recursive branching system that simulates an L-system. The tree grows over time, sways with a wind effect, and has a color gradient from brown to green. The structure is stable (no jitter) and uses `p5.min.js`.

Final check on requirements:
- Single-page web app: Yes.
- All in `index.html`: Yes.
- CSS in `<style>`, JS in `<script>`: Yes.
- No external resources/CDNs: Yes.
- Load `p5.min.js` from local: Yes.
- Procedural L-system fractal tree: Yes.
- Branches recursively: Yes.
- Sways gently in the wind: Yes.
- Grows: Yes.

The implementation is complete.