The user wants a single-page web app in `index.html` that uses p5.js (pre-provided `p5.min.js`) to draw a procedural L-system fractal tree that sways gently in the wind. Must be fully self-contained: CSS in `<style>`, JS in `<script>`, no external resources except loading `p5.min.js` via `<script src="p5.min.js"></script>`. Wind sway means the branches/leaves should move with a gentle wind effect, probably using noise or sine waves with time.

Let me plan:

- HTML loads p5.min.js.
- Inline JS uses p5 in instance mode or global mode. Since p5 is loaded globally, we can use instance mode for cleaner scope, but global mode is simpler. Since it's a single file, global mode is fine.

L-system tree:
- Define an axiom and rules, e.g., classic tree:
  - Axiom: "F"
  - Rule: F -> F[+F]F[-F]F
  - But this can be a bit large. Let's use something manageable:
    - Axiom: "X"
    - Rule: X -> F[+X]F[-X]+X
    - F -> FF
  - Generate a few iterations (e.g., 4 or 5) but cap the length.

- Draw the tree with turtle graphics:
  - Use a stack for branching.
  - For each character:
    - F: draw forward line
    - X: nothing (just structural)
    - +: turn right
    - -: turn left
    - [: push state
    - ]: pop state

- Animation: "sways gently in the wind"
  - Introduce a wind parameter that changes over time.
  - The wind can affect the angles of the branches. We can generate the string once and then during drawing, add a wind offset based on depth and time.
  - But L-system drawing with a single pass: if wind affects angles dynamically, we can modulate the angle values during drawing using a global time variable or p5 noise.
  - Better approach: precompute the string. When drawing, for each turn command (+/-), add a wind offset depending on branch depth and time. Use `sin(frameCount * speed)` or `noise(...)` for smooth variation.
  - Wind intensity could vary by depth: terminal branches sway more than trunk.

Implementation details:
- Use p5's instance mode (new p5()) or global? p5.min.js is loaded via script tag. If we use global mode, p5 adds setup() and draw() to window. That's fine.
- Set canvas full window or fixed size? Full window is nice.
- Draw background (maybe a gradient in setup and draw). Use a dark tree on a light sky or just a dark background.
- Trunk at bottom center.
- Can add leaves or flowers at the ends (when depth == 0 or similar).

Simplify:
- L-system generation:
  - Let axiom = "F"
  - Rule: F -> FF+[+F-F-F]-[-F+F+F]
  - This produces a nice bush/tree.
  - Generate up to maybe 4 or 5 iterations. The string can get large; let's do 4 iterations. L-system length grows fast. We can calculate and adjust.

Let's calculate length:
- F -> 14 chars (FF+[+F-F-F]-[-F+F+F]) = 14? Let's count: F F + [ + F - F - F ] - [ - F + F + F ] => 14 characters. Actually count: F, F, +, [, +, F, -, F, -, F, ], -, [, -, F, +, F, +, F, ] -> 18 characters including brackets. Wait more carefully:
  "FF+[+F-F-F]-[-F+F+F]"
  F F + [ + F - F - F ] - [ - F + F + F ]
  That's 18 characters.
  axiom "F" length 1.
  After 1: length ~18
  After 2: ~18*18 = 324
  After 3: ~5832
  After 4: ~104976. That's possibly too many to draw at 1px per step.
  So maybe 3 iterations ~5800 segments. Manageable.
  Or use a simpler rule to keep length lower.

Alternative classic tree:
- Axiom: "X"
- Rule: X -> F[-X][+X]FX
        F -> FF
  After n iterations, the number of F grows. Let's test n=5:
  X -> F[-X][+X]FX (F: 1, X: 3) => total length ≈? This also grows quickly.

Simpler approach: we can use a custom recursive branching function rather than full L-system string. But user specifically asked for "L-system fractal tree". We can still do L-system but fewer iterations.

Let's do:
- Axiom: "F"
- Rule: F -> F[+F]F[-F]F
  Length after 1: 7
  After 2: 49
  After 3: 343
  After 4: 2401
  After 5: 16807
  That's fine; we can do 5 iterations comfortably.

But F[+F]F[-F]F draws a fairly full tree.

Draw configuration:
- Initial angle: PI/6 (30 degrees)
- Branch angle: random? Or fixed? Use a fixed small angle like 25 degrees (0.436 rad), but with wind offset.
- Initial length: e.g., 120
- Scale factor: 0.7

Wind:
- Global `windOffset` = sin(frameCount * 0.02) * 0.05
- When turning, add `windOffset * (maxDepth - currentDepth)` or some factor based on depth. Actually, deeper levels (smaller branches) are more affected by wind. So wind influence should increase as depth decreases (i.e., currentDepth smaller means more sway).
  So windFactor = map(currentDepth, 0, maxDepth, windInfluence, 0). Or simply `windOffset * (1 - currentDepth / maxDepth)`.

Implementation:

```javascript
let lsystemString;
let maxDepth;
let angleBase = 25;
let len = 120;
let scale = 0.7;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(20);
  maxDepth = 5;
  let axiom = "F";
  let rules = {
    "F": "F[+F]F[-F]F"
  };
  lsystemString = generateLSystem(axiom, rules, maxDepth);
}

function generateLSystem(axiom, rules, iterations) {
  let result = axiom;
  for (let i = 0; i < iterations; i++) {
    let next = "";
    for (let char of result) {
      next += rules[char] || char;
    }
    result = next;
  }
  return result;
}

function draw() {
  background(20);
  // Start from bottom center
  translate(width / 2, height);
  stroke(100, 200, 100);
  strokeWeight(2);
  let wind = sin(frameCount * 0.02) * 0.05;
  drawTree(lsystemString, len, 0);
}

function drawTree(s, len, depth) {
  // depth parameter not directly in string; we can infer by brackets or a recursion?
  // Actually for drawing we track depth manually.
  // Let's make drawTree recursive: iterate over string but need to know depth for wind.
  // Better approach: a recursive function that uses index, depth.
}
```

Wait, the standard L-system drawing is straightforward but we need wind on angles. We can just maintain a `ptr = 0` and recursively call. But after pushing state for `[`, we can increment depth.

Simplify: we can implement a recursive draw with index:

```javascript
let s;
let ptr = 0;
let wind;

function setup() {
  createCanvas(windowWidth, windowHeight);
  // generate string
}

function draw() {
  background(20);
  translate(width/2, height);
  ptr = 0;
  wind = sin(frameCount * 0.02) * 0.1;
  drawBranch(120, 0);
}

function drawBranch(len, depth) {
  if (ptr >= s.length) return;
  let maxDepth = 5;
  while (ptr < s.length) {
    let c = s[ptr++];
    if (c === 'F') {
      // draw forward
      let windEffect = wind * (1 - depth / maxDepth);
      // apply slight curve? Actually straight line with small angle twist is enough.
      // But if we just rotate each segment differently, it looks more like wind.
      // However, for simplicity, just draw a line and continue.
      // We want the wind to affect turns; the line itself can be straight.
      line(0, 0, 0, -len);
      translate(0, -len);
    } else if (c === '+') {
      let windEffect = wind * (1 - depth / maxDepth);
      rotate(radians(angleBase + windEffect * 180));
    } else if (c === '-') {
      let windEffect = wind * (1 - depth / maxDepth);
      rotate(-radians(angleBase + windEffect * 180));
    } else if (c === '[') {
      push();
      drawBranch(len * scale, depth + 1);
      pop();
    } else if (c === ']') {
      return;
    }
  }
}
```

But there is a problem: drawing every line in a flat string will cause issues with push/pop and translate. This is the standard recursive approach but using a string and a pointer. The above logic is mostly correct except that `line(0,0,0,-len)` followed by `translate(0,-len)` moves the origin to the end of branch. When we return from a push/pop, the origin resets.

However, using wind effect based on depth: for `[` we call drawBranch with depth+1, but the wind angle inside the branch should be scaled based on the depth within that branch. Since we compute wind inside the while loop with depth, it's okay. But what about multiple F characters inside the same branch level? Depth stays the same.

But the pointer `ptr` is global, which makes it hard to have parallel recursion? But we call drawBranch sequentially; push saves state, we call drawBranch recursively which consumes characters until a `]`. Since `drawBranch` uses the global `ptr`, it's fine because we never branch in parallel (the tree is traversed depth-first, one path at a time). However, if we push and then call drawBranch, that call will also read characters and may encounter another `[`, etc. When it returns, we pop and continue. That's correct.

Potential issues: wind effect may be too strong on trunk because `depth` starts at 0, so windFactor is 1.0 for trunk. Usually trunk sways less. So maybe invert: windEffect = wind * (depth / maxDepth). That means higher depth (smaller branches) sway more. But maxDepth is 5; trunk depth 0 => factor 0. Depth 5 => factor 1. That's good.

Actually `depth` starts at 0 for trunk, and maxDepth is total number of branch levels? It depends on how many brackets. For this L-system, each `[` increases depth. The maximum depth may not be exactly `maxDepth` (the iteration count). But we can set maxDepth dynamically or just use a small multiplier independent of exact max.

So: windEffect = wind * (depth / 6) maybe.

Better: use noise for organic sway: `noise(frameCount * 0.01, depth * 0.5) - 0.5` etc. But sine is fine.

Add leaves: when depth is large (e.g., > 3 or 4), draw a small circle or leaf shape at the end after drawing lines. Or after every `F` at max depth, draw a leaf.

In the iteration 5, depth can go up to maybe 5. So if depth >= 4, after drawing F we can draw a leaf.

Leaves can be small circles or ellipse at (0, -len) after line. But line translate moves the origin; we need to save state for leaf or draw leaf before translate. Let's draw leaf at the tip before translate? Actually, after line(0,0,0,-len), coordinate system origin is still at start of line (unless we translate after). So we can use `ellipse(0, -len, 4, 4)` before translate. But line is drawn from (0,0) to (0,-len). So after line, the origin is still same. Then translate to move origin.

If we want leaf color: maybe greenish or reddish.

Styles: Add some background color, maybe a sky gradient.

Canvas: Use `windowWidth`, windowHeight. Add `windowResized()`.

Stroke color: Could be brown to green gradient based on depth. Depth low -> brown, high -> green. We can adjust `stroke` inside drawBranch based on depth.

Let's put it together.

Also, `p5.min.js` must be loaded before our script. So `<script src="p5.min.js"></script>` then our script. Use `defer` maybe not needed; if we place script in head without defer, it may execute before DOM ready? But p5 attaches to window, our code can be in global script after p5.

Make sure to use `noLoop()`? No, we want animation.

Now let's write the full HTML.

I will create a clean file:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>L-System Windy Tree</title>
  <style>
    body { margin: 0; overflow: hidden; background: #87CEEB; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="p5.min.js"></script>
  <script>
    let lsys = "";
    let angle = 25;
    let baseLen = 140;
    let scale = 0.7;
    let iter = 5;
    
    function setup() {
      createCanvas(windowWidth, windowHeight);
      let axiom = "F";
      let rules = { "F": "F[+F]F[-F]F" };
      lsys = generate(axiom, rules, iter);
      strokeCap(ROUND);
    }
    
    function generate(axiom, rules, n) {
      let s = axiom;
      for (let i = 0; i < n; i++) {
        let next = "";
        for (let c of s) {
          next += rules[c] || c;
        }
        s = next;
      }
      return s;
    }
    
    function draw() {
      background(20, 120, 180); // sky blue-ish
      translate(width / 2, height);
      let wind = sin(frameCount * 0.015) * 0.15;
      strokeWeight(2);
      ptr = 0;
      drawBranch(baseLen, 0);
    }
    
    let ptr = 0;
    
    function drawBranch(len, depth) {
      while (ptr < lsys.length) {
        let c = lsys[ptr++];
        if (c === 'F') {
          // Color gradient: brown trunk to green tips
          let t = constrain(depth / 6, 0, 1);
          stroke(
            lerp(100, 120, t),
            lerp(80, 200, t),
            lerp(80, 100, t)
          );
          // Draw line
          line(0, 0, 0, -len);
          // Leaf at tip if deep enough
          if (depth >= 4) {
            push();
            translate(0, -len);
            noStroke();
            fill(80, 220, 120);
            ellipse(0, 0, 6, 8);
            pop();
            stroke(
              lerp(100, 120, t),
              lerp(80, 200, t),
              lerp(80, 100, t)
            );
          }
          translate(0, -len);
        } else if (c === '+') {
          let windAmp = wind * (depth / 6);
          rotate(radians(angle + windAmp));
        } else if (c === '-') {
          let windAmp = wind * (depth / 6);
          rotate(-radians(angle + windAmp));
        } else if (c === '[') {
          drawBranch(len * scale, depth + 1);
        } else if (c === ']') {
          return;
        }
      }
    }
    
    function windowResized() {
      resizeCanvas(windowWidth, windowHeight);
    }
  </script>
</body>
</html>
```

This looks good. `wind` is defined inside `draw()`, but `drawBranch` uses it as a free variable? In JavaScript, `wind` is a global within the script. It is assigned in `draw()`. Since `drawBranch` is called after `wind` assignment, it's fine. However, we must ensure `wind` is in scope. It's a `let` in the script scope, so okay.

Stroke color: need to set stroke each time because we reset to noStroke for leaves. That's okay.

Potential performance: The L-system string for 5 iterations with this rule is ~16807 characters. With drawing twice for leaves maybe a bit slow. But p5 can handle it. 5 iterations might be okay. Let's test mentally: 16807 F's plus brackets and turns. Each F draws a line. That's 16k lines. With push/pop for leaves. On modern devices it's fine. Maybe reduce to 4 to be safe? 4 iterations gives 2401 F's. 5 gives 16k. 16k is fine for 60fps? p5 might struggle on low-end. But with simple shapes it could be okay. Let's choose 4 for smoother performance. Or 5 with less leaf drawing? Or we can use 4. Let's do 5 to make it dense, but add a note? The user didn't ask for high density. Let's do 4 or 5. I think 4 is safer. My earlier calculation was off: after iteration 1: length 7 (F[+F]F[-F]F = F, [, +, F, ], F, [, -, F, ], F? Wait let's recount: "F[+F]F[-F]F". That's 11 characters. Actually count: F [ + F ] F [ - F ] F => 11. After 1: 11. After 2: 121. After 3: 1331. After 4: 14641. After 5: 161051. That's huge. So 4 => ~14k segments. That's fine. 5 is way too much. So choose iter=4.

Let's recalc rule length: "F[+F]F[-F]F". Each F replaced by 24? Wait let's count again precisely:

Original string: F
After applying rule to each F:
F -> F[+F]F[-F]F
Length of replacement: let's tokenize:
F, [, +, F, ], F, [, -, F, ], F
That's 11 tokens. So length factor is 11 per F.
Iteration 0: F -> 1
Iteration 1: 11
Iteration 2: 11*11 = 121
Iteration 3: 1331
Iteration 4: 14641
So 4 iterations gives ~14641 F's. That's okay.

So set `iter = 4`.

Angle: 25 degrees.

Leaves at depth >= 4 means only the smallest twigs have leaves. At depth 4, branches are small.

Wind sway: wind factor based on depth / 6. Depth 0 factor 0, depth 5 factor ~0.83. That's nice.

Let's refine styling: smooth branch lines: use `strokeCap(ROUND)`. Background maybe gradient? p5's `background` is solid color; we can draw a gradient manually. But simple solid sky color is okay.

Alternatively, draw a simple sky gradient by drawing a rectangle with gradient? Not necessary.

Let's ensure the canvas fills window and handles resizing.

One more thing: after pushing state with `push()`, we call `drawBranch`. When it returns, the coordinate system is restored. But our `drawBranch` does `ptr++` and loops. At the point it encounters `]`, it returns. So after return, the caller (parent) resumes after the `[`, and the `pop()` in the parent executes? Wait, the parent didn't call `push` at the `[`. In my code, when encountering `[`, I call `drawBranch(...)` directly without `push()`. That means the recursive call should manage its own state, and after returning, we need to `pop()`. But in my code, `[` does:

```javascript
} else if (c === '[') {
  drawBranch(len * scale, depth + 1);
}
```

But there is no `push()` before calling `drawBranch`! That's wrong. In the recursive approach, the `[` should push, then call, then pop. Actually, `drawBranch` itself uses translate and rotate which affect the matrix. So around the recursive call we need `push()` before and `pop()` after, OR the recursive call could manage it. Standard algorithm:

`[` => push(); drawBranch(...); pop(); `]` => return.

So fix:

```javascript
} else if (c === '[') {
  push();
  drawBranch(len * scale, depth + 1);
  pop();
}
```

But `drawBranch` itself uses translate for `F`. The `pop()` after call will revert any translations/rotations inside that branch. That's correct.

Now what about leaves? We do `push(); translate(...); leaf; pop();` then `stroke(...)`. That seems okay, though push/pop not strictly needed around minor translate if we don't use it after. But it's okay.

Let's refine leaf drawing: maybe use `ellipse(0,0,6,8)`. With `random` rotation could be nicer but not needed.

Edge: after drawing an F and translating to tip, we may be at a leaf. But after `]`, the pop resets to before branch. This is correct.

We need to be careful about the `ptr` variable: `drawBranch` reads the global `ptr`. With multiple branches, since this is depth-first traversal, it's fine. However, recursion with `push`/`pop` means that when one branch calls `drawBranch`, the next sibling characters are handled by the parent after `pop`, which is correct.

Potential issue: The `wind` variable is global and updated each draw. It's used in `drawBranch`. Good.

Now the complete code:

I will write the HTML file.

Let's do a more polished tree:
- Trunk color: brown
- Leaves: small circle or ellipse in green/yellow
- Could add flowers: random chance.

I'll add some randomness in leaf color for variety: `fill(random(100, 200), random(200, 255), random(50, 100))`. Since p5 random is pseudo, it will be consistent each frame if we seed? Actually `random()` with no seed changes each frame, causing leaves to flicker. We want stable leaves. Either compute a deterministic random based on depth and position, or store leaf parameters in a precomputed array. Simpler: just use a fixed light green for leaves, maybe with slight variation based on depth.

Let's precompute leaves? Not necessary. Use a fixed color or a simple deterministic scheme: `fill(100 + depth*20, 200, 100)`. That's stable.

Alternatively, since `draw()` is called each frame, the L-system string draw loop determines where leaves go based on character positions. If we use `random()` inside the loop, it will generate new random values each frame, causing flickering. So avoid that. Use a deterministic value.

I'll make leaf color a function of depth: `fill(80, 220 - depth*20, 120)`. Good.

Also, for aesthetics, maybe draw a ground rectangle at bottom. Use `fill(60, 160, 60); rect(...)`.

Let's assemble the final file.

One final check: ensure no external resources. `<script src="p5.min.js"></script>` as requested.

Let's produce the file.

The file has been written. Now I should verify it exists and provide a brief summary to the user.

The file is present. Now I should give a concise summary of what was built.