We need respond to user. They ask "Generate an inline SVG illustration of a pelican riding a bicycle." But user specifically "Build a single-page web app and write it ALL into one self-contained file named index.html in current directory..." Need create index.html containing inline SVG illustration of pelican riding bicycle. Need likely output code? We need use tools. Need inspect cwd maybe. We can write file. Need maybe no external resources. Single-page web app with CSS/JS in style/script inline. Need "inline SVG illustration" likely include SVG. Need produce file and maybe brief. Need create index.html. Since asked generate. We'll write full HTML. Need maybe no JS necessary but include inline script tag? "CSS in a <style> tag, JS in a <script> tag, inline". Could include empty script? Better include small script for accessibility? But no external. Need SVG illustration detailed. Need end with index.html present. We can just write. Need maybe use bash ls? Not necessary but maybe verify. Need create file. Use write. Need ensure valid self-contained. Could include responsive design, inline SVG. Need inline SVG illustration. Let's craft comprehensive HTML.

Need think about content. Pelican riding bicycle: pelican body, long beak, head, wings, legs pedaling, bicycle frame, wheels, seat, handlebars. Use SVG shapes, gradients, filters. CSS for animation of wheels/pedals maybe. Single-page web app maybe with title and caption. Need no external resources.

Need create /tmp/ws/index.html. Use write. Need maybe include CSS animations in style and JS maybe for maybe no-op or button toggles? Since user just wants illustration, can include tiny script. But "single-page web app" maybe should have app shell. Need all in one file.

Let's create index.html with inline SVG. Include CSS animations for rotating wheels and pedals. Need inline SVG maybe 900x520 viewBox. Use defs: gradients, filters. Use shapes:

- Background sky gradient.
- Clouds.
- Bicycle wheels at x 260, 640 y 360 radius 105. Tire black, rim, spokes lines. Wheel rotation via SVG animateTransform? Could use CSS with class. For SVG elements, CSS transform-origin. Simpler use <animateTransform attributeName="transform" type="rotate" from="0 450 360" to="360 450 360" dur="2.8s" repeatCount="indefinite"/> on wheel group. Need transform origin? If group has transform="translate(260,360)" then animateTransform type rotate from 0 to 360 additive? Need if group transform set, animateTransform may conflict? Could use nested: <g transform="translate(260 360)"><g class="wheel-spin"><animateTransform... /></g></g>. For group with no transform, rotate around 0 0. Good.
- Wheels at (250,360), (650,360).
- Bicycle frame: line strokes brown/gold with round caps. Points: rear axle (250,360), front (650,360), seat post top (405,235), bottom bracket (455,360), head tube (620,245), handlebar top (675,210). Frame lines: rear axle to seat post, seat post to bottom bracket, bottom bracket to rear axle, bottom bracket to head tube, head tube to front axle, head tube to seat post, head tube to handlebar. Need stroke.
- Seat: rounded rect at (380,205). Handlebar: line from head to 680,210; grip.
- Pedals: bottom bracket group with crank arms rotate. Use <g transform-origin? Could use <animateTransform type="rotate" from="0 455 360" to="360 455 360"...> inside group. Need line to pedals.
- Pelican: body at (430,190) maybe big white ellipses. Body shape: ellipses. Wing with grey shape. Head at (500,120), long beak to right? Pelican facing right, beak long yellow downward pouch. Body on seat. Legs down to pedals. Pelican neck curved, head, eye, beak. Body white/cream. Head white, long beak yellow with pouch light orange. Eye black. Crown. Maybe wattle.
- Wing on body grey/blue. Tail feathers.
- Legs orange: upper/lower lines, feet on pedals. Need animate legs? Could use two groups with animateTransform around hip or bottom bracket. But simple legs with curves. Better create left/right legs as groups with animateTransform rotate around hip? Need pedaling motion. Pelican has one leg forward one back. Could use two <g> with animateTransform type rotate around hip (445,215). But if group rotates, feet might rotate around hip not bottom bracket; maybe okay. Or animate around bottom bracket for lower leg? Let's create two orange leg groups attached at hip (430,230) and foot to pedals at crank positions. Use animateTransform on <g class="leg back"> with from="0 445 225" to="360 445 225" and draw line from hip to foot using points computed? Hard with animate. Could use static legs. But animated illustration nice. Could use SVG animateMotion? Maybe too complex. Static is fine.

Need maybe "riding" with legs on pedals. Could draw legs with curves: one leg from hip to forward pedal at (520,320), another from hip to back pedal at (390,390), orange strokes. Feet yellow.

Need maybe CSS for .spin etc.

Need inline SVG. Since "inline SVG illustration" not image. Include aria-labelledby. Need perhaps app has title, subtitle. Need "Save as index.html" no. Need final brief.

Need maybe include script tag. Could include JS for no external, maybe toggles CSS class? But unnecessary. If include script with `document.addEventListener('DOMContentLoaded', () => { ... });` maybe not needed. But to satisfy "JS in a <script> tag", include small inline script that sets current year? But illustration only. Could include script that gracefully enables reduced motion? CSS media. Maybe script to add a "pause animation" button? Single-page web app. Let's include a button toggles animation paused on SVG. But user didn't ask. Need maybe avoid extra. But "web app" can have button. Use CSS .paused * animation? For animateTransform in SVG, CSS won't pause. Could use JS to toggle `document.querySelector('svg').pauseAnimations()` if SVG has SMIL; and unpause. That is a nice app. But "runs fully sandboxed with no network" okay. Need script. Need if pause button. Could include.

Need ensure "inline SVG illustration" is inline in HTML. CSS in style. JS in script. Single file.

Let's write. Need maybe maybe include meta viewport.

Need test maybe use xmllint? Not needed. Need maybe `file`? We'll use write then bash maybe `ls -l index.html`. Need final mention. Let's draft.

Need be careful with SVG attributes and CSS. Let's craft HTML:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"...>
<title>Pelican Bicycle Ride</title>
<style>
:root { color-scheme: light; --bg: #f7fbff; ...}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding: clamp(16px,4vw,48px); background: radial-gradient(...), linear-gradient(...); font-family: system-ui...; color:#18324a; }
.app { width:min(980px,100%); }
.hero { text-align:center; margin-bottom:18px; }
h1...
.frame { background: rgba(255,255,255,.78); border:1px solid...; border-radius:28px; box-shadow; overflow:hidden; }
svg { display:block; width:100%; height:auto; }
.caption...
button { ...}
button:focus-visible...
@media (prefers-reduced-motion: reduce) { .motion-note { display:none? } .spin, .pedal-spin, .bob, .tail { animation: none !important; } }
</style>
</head>
<body>
<main class="app">
<section class=hero>
<h1>Pelican Pedal Adventure</h1>
<p>...</p>
</section>
<div class=frame>
<svg id="pelicanBike" viewBox="0 0 900 560" role="img" aria-labelledby="title desc">
<title id="title">Pelican riding a bicycle</title>
<desc id="desc">A cheerful white pelican with a long yellow beak rides a bicycle along a sunny path.</desc>
<defs>... gradients, filter shadow, clipPath maybe.
<linearGradient id="sky"...>
...
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="150%"><feDropShadow ...></filter>
<linearGradient id="pouchGradient"...>
...
</defs>
<rect ... sky>
<circle sun>
<g class=cloud>...
<path ground>
<path road>
...
<g class="bicycle" filter="url(#softShadow)">
<g class="wheel rear" transform="translate(250 360)">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="2.6s" repeatCount="indefinite" />
<circle r="112" fill="#182433"/>
<circle r="102" fill="#eef5fb" stroke="#253140" stroke-width="4"/>
<circle r="14" fill="#253140"/>
<g stroke="#9fb3c8" stroke-width="2"> lines for spokes. Need 12 lines from center to circumference. Use line x1=0 y1=0 x2=0 y2=-102 etc.
</g>
</g>
...
Frame lines
...
</g>
<g class="pelican" filter="url(#softShadow)">
body...
</g>
</svg>
<button id="motionToggle" type="button">Pause motion</button>
<p class=caption>...</p>
</div>
</main>
<script>
(() => { const btn = document.getElementById('motionToggle'); const svg = document.getElementById('pelicanBike'); if (!btn || !svg) return; btn.addEventListener('click', () => { const paused = svg.pauseAnimations(); btn.textContent = paused ? 'Play motion' : 'Pause motion'; btn.setAttribute('aria-pressed', String(paused)); }); });
</script>
</body>
</html>

Need note pauseAnimations returns true if paused. Good.

Need maybe use `<animateTransform>` inside wheel. If user clicks pause, pauseAnimations pauses SMIL. CSS animations? We can avoid CSS animation. Need not.

Need maybe not include JS if no need. Good.

Need maybe include "bob" animation? Could use CSS animations for pelican bob and tail. But if using CSS, button pause won't pause CSS. Could ignore. Better avoid CSS animations to keep SMIL. But maybe include static. Need maybe not include CSS animation. Could use `<animateTransform>` for tail or wings. But no need. Could include pelican body bob with SMIL? We can animate head/body group? But if group has transform attribute, animateTransform conflict. Use nested groups: <g transform="translate(0,0)"><g><animateTransform ... type="translate" values="0 0;0 -5;0 0"... additive="sum"? Actually animateTransform type translate with from/to; nested group. Could animate head? But not necessary. If include, use SMIL.

Need maybe "inline SVG illustration" not web app. But okay.

Need ensure valid. Let's craft shapes carefully.

SVG details:

Defs:
```
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
 <stop offset="0%" stop-color="#bfeaff"/>
 <stop offset="60%" stop-color="#eef9ff"/>
 <stop offset="100%" stop-color="#fff7df"/>
</linearGradient>
<linearGradient id="road" ...>
<linearGradient id="bikeFrame" ...>
<linearGradient id="pelican" ...>
<linearGradient id="beak" ...>
<linearGradient id="pouch" ...>
<filter id="shadow" ...>
```
Maybe use CSS variables in SVG? Could but okay.

Cloud:
```
<g opacity=".85">
 <ellipse cx=120 cy=95 rx=55 ry=20 fill=#fff>
...
</g>
```

Ground:
```
<path d="M0 430 C180 395 310 425 470 402 C650 375 760 405 900 382 L900 560 L0 560Z" fill="#aee085"/>
<path d="M0 456 C... L900 440 L900 560 L0 560Z" fill="#78c86e"/>
<path d="M0 482 C170 455 300 488 475 462 C650 438 755 465 900 442 L900 560 L0 560Z" fill="#f6d37b"/>
```
Road maybe path.

Bicycle:
```
<g class=bicycle filter=...>
  <g class=wheel transform="translate(250 360)">
    <animateTransform ... additive="sum"? If group has transform attr, animateTransform adds to transform? In SVG, animateTransform animates attribute. If attribute has static transform, animation will animate transform from "0" to "360", replacing? It will override transform, causing group moves? Need avoid. Use nested:
<g transform="translate(250 360)">
 <g>
  <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="2.6s" repeatCount="indefinite"/>
  ...
 </g>
</g>
```
Good.

Spokes:
```
<g fill="none" stroke="#8fa6bb" stroke-width="2" opacity=".75">
 <line x1="0" y1="0" x2="0" y2="-98"/>
 ...
</g>
```
Could use `<line>` with transform rotate. Simpler:
```
<line .../>
<line transform="rotate(30)".../>
...
```
But if line in group, transform rotates around origin. Good.

Wheel fill: circle tire, inner.

Frame lines:
```
<g fill="none" stroke="url(#bikeFrame)" stroke-width="13" stroke-linecap="round" stroke-linejoin="round">
 <path d="M250 360 L405 235 L455 360 L250 360"/>
 <path d="M405 235 L620 245 L650 360"/>
 <path d="M455 360 L620 245"/>
 <path d="M620 245 L678 214"/>
</g>
<g stroke="#f6c76b" stroke-width="5"...> maybe highlights.
```
Need seat:
```
<rect x=370 y=202 width=92 height=22 rx=11 fill="#263238"/>
<line x1=405 y1=224 x2=405 y2=238 stroke...>
```
Handlebar:
```
<line x1=678 y1=214 x2=705 y2=193 stroke...>
<path d="M704 193 q20 -6 24 10" fill=none stroke...
```
But pelican beak maybe to right, handlebar at right. Fine.

Crank:
```
<g>
 <circle cx=455 cy=360 r=14 fill="#263238"/>
 <g>
  <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="2.6s" repeatCount="indefinite"/>
  <line x1="455" y1="360" x2="545" y2="312" stroke="#263238" stroke-width="8" stroke-linecap="round"/>
  <line x1="455" y1="360" x2="365" y2="408" stroke="#263238" stroke-width="8" stroke-linecap="round"/>
  <circle cx=545 cy=312 r=8 fill="#f4d35e"/>
  <circle cx=365 cy=408 r=8 fill="#f4d35e"/>
 </g>
</g>
```
Frame behind legs? Pelican legs should appear in front of frame maybe draw after frame but before body.

Pelican:
- Body:
```
<g class="pelican">
 <ellipse cx="410" cy="235" rx="105" ry="82" fill="url(#pelican)" stroke="#c8d6dc" stroke-width="3"/>
 <ellipse cx="470" cy="235" rx="82" ry="65" fill="#f7fbff" stroke.../>
 <path d="M360 220 C325 200 315 160 348 140 C370 185 405 202 430 224Z" fill="#e8f0f3"/>
 <path d="M345 235 C315 255 300 285 315 315 C350 300 374 265 382 228Z" fill="#d7e5e9"/>
 <path d="M395 207 C435 165 510 170 545 212 C512 248 435 260 383 236Z" fill="#d3e3e8"/>
```
Need wing on body:
```
<path d="M372 220 C410 180 486 176 522 218 C488 258 420 272 372 220Z" fill="#b8c9cf"/>
<path d="M405 222 C430 245 462 255 498 252" ...
```
Maybe wing grey.

Neck:
```
<path d="M525 170 C505 140 515 115 548 102 C582 112 590 137 570 162 C555 182 540 190 525 170Z" fill="#f6fbff"/>
```
Head:
```
<ellipse cx="550" cy="103" rx="42" ry="35" fill="url(#pelican)" stroke.../>
```
Beak:
Long beak to right:
```
<path d="M585 104 C640 95 690 99 735 112 C704 124 653 128 600 119 C589 116 582 112 585 104Z" fill="url(#beak)" stroke="#d49724" stroke-width="3"/>
<path d="M590 113 C646 124 700 126 745 118 C735 150 675 163 615 145 C593 137 584 129 590 113Z" fill="url(#pouch)" stroke.../>
<path d="M585 104 C625 113 675 117 735 112" stroke="#d49724" .../>
```
Maybe beak above pouch. Eye:
```
<circle cx=565 cy=96 r=5 fill="#1b2630"/>
<circle cx=567 cy=94 r=1.5 fill="#fff"/>
```
Cheek:
```
<circle cx=570 cy=116 r=4 fill="#ffd1c2" opacity=".5"/>
```
Tail feathers left:
```
<path d="M330 225 C295 205 285 168 300 143 C322 176 345 200 374 218Z" fill="#dce8eb"/>
...
```
Maybe draw behind body.

Legs:
Pelican orange legs from body to pedals. Need draw after frame/crank maybe. Hip points:
Back leg to pedal at (365,408):
```
<path d="M430 245 C415 285 388 320 365 408" fill="none" stroke="#f28b3b" stroke-width="13" stroke-linecap="round"/>
<path d="M365 408 L345 414" stroke="#f5b35a".../>
```
Forward leg to pedal at (545,312):
```
<path d="M450 245 C490 280 515 310 545 312" ...
<path d="M545 312 L560 302" .../>
```
Feet:
```
<path d="M345 414 q16 8 30 0" ...
<path d="M560 302 q16 -8 30 0" ...
```
Maybe foot on pedal.

Need layering: bicycle frame, wheels, seat/handle, crank, legs, pelican. If pelican body covers crank? Good.

Maybe draw legs before body? If legs originate from body, body over hip. Better draw legs after frame/crank but before body so hip hidden by body. Feet visible. Body covers upper leg. Fine.

Need maybe draw wing behind head? Body before neck/head. Good.

Need maybe draw beak behind handlebar? Beak to right maybe overlaps handlebar. Fine.

Need maybe include motion pause button. Need CSS. Need no external fonts.

Need maybe include `<script>` at bottom. It's okay.

Need maybe validate with `python`? Could run `python -m html.parser`? Python has no. Use `node`? We can use `xmllint` maybe not. Use `python3 - <<'PY'` parse? HTML parse not. Maybe use `python` regex. Not needed. But maybe use `node`? We can run `python3 - <<` to check file exists and maybe count tags? Not necessary.

Need final answer with code maybe not full? User asked generate inline SVG. We can say "Created `/tmp/ws/index.html`." But perhaps they expect code. However developer asked end with index.html present, not necessarily show code. But final should include path and maybe code? Since they asked generate. In coding tasks, final can be concise with file created. But maybe they want artifact. Since final answer doesn't need code if file created. But if user wants "Generate", maybe include code snippet? The tool has created. Need maybe final: "Done — created `/tmp/ws/index.html` with a self-contained inline SVG pelican riding a bicycle." Could include no code. But maybe "End with index.html present" means just ensure file.

Need maybe run `ls -l index.html` to verify. Use bash.

Need verify file present. Use bash.