A weather app with a living animated sky

Create a weather app with a living animated sky: a small, complete web app that someone would actually keep using.

What makes it great:
- It does its core job fully and correctly, including what a real user expects: sensible defaults, edge cases, and a friendly message for empty or invalid input.
- It looks like a polished product: a clear layout and hierarchy, consistent spacing, system fonts, a deliberate colour palette, smooth transitions, and visible hover, focus, active and disabled states.
- It is easy: the main action is obvious, everything is big enough to tap (at least 44 pixels), and it works with mouse, keyboard (visible focus, Enter submits) and touch.

What it must do:
- It opens ready to use with a realistic example already filled in, so the first screen shows what it does. The visitor can clear it and start fresh.
- Every button and control does something visible. The main controls are on the first screen without scrolling, and the first screen looks alive (for example a running timer, a live preview or a small chart), not an empty form.
- It saves what the user enters in localStorage (inside a try/catch) so it survives a reload, and still works if storage is unavailable.
- It uses the whole window: on a desktop it makes good use of the space (not a tiny box in the middle), and on a phone it becomes one column. The page itself never scrolls; a long list scrolls inside its own panel.
- It is accessible: real buttons and inputs with labels, good contrast, and it respects prefers-reduced-motion.

Make it astonishing. Both builds are shown side by side in a 30-second video on social media, where people decide in one second whether to stop scrolling:
- The very first frame is already striking: bold colour, light and motion, never an empty, plain or loading screen.
- Build to a signature moment within the first 10 seconds that makes people say "wow": a reveal, a transformation, an explosion of particles, a chain reaction.
- Go beyond the obvious version of the idea: choose a surprising, inventive take with its own world, mood and personality, not a generic template.
- Layer it: depth, glow and light, particles and trails, smooth easing, and detail that rewards both a glance and a closer look.
- It is watched at about half size on a phone: keep the important shapes big and high in contrast, and any key text large (at least 28 CSS pixels).
- Not a form: a visually rich, delightful product with an animated centrepiece (a live visual, a 3D object, a chart or an illustration that moves) and micro-interactions that feel magical.

Fixed rules (so every model is compared on the same terms):
- Exactly one file, index.html, in the current directory. Create no other files.
- Plain HTML, CSS and JavaScript. You may use three.js 0.170.0 from https://cdn.jsdelivr.net/npm/three@0.170.0/ (via an import map) if it helps. No other libraries, images, 3D models, fonts or network requests: build everything yourself in code (canvas, SVG, CSS or WebGL).
- It fills the browser window and works on a phone and on a desktop, with no page scrollbars.
- Animate with requestAnimationFrame and its timestamp so speed does not depend on the frame rate.

It must work in an ordinary browser on any graphics card. You cannot open a browser to look at it, so build it carefully:
- Every frame is fully drawn: no black, blank or flickering frames or patches. Keep any shader maths free of NaN and infinity (no division by a value that can reach zero, no pow() of a negative number, no normalize() of a zero-length vector), and clamp colours to a safe range before bloom or other post-processing.
- No errors in the browser console: if you use three.js, map "three" and "three/addons/" in the import map, and import everything you use.
- It runs smoothly on an ordinary laptop or phone: keep the pixel ratio at 2 or below, and avoid creating new objects every frame.
- It adapts when the window is resized or the phone is rotated.
- Do not hide errors: never wrap the main loop or whole functions in a try/catch that silently swallows them; fix the cause instead (a try/catch around storage or audio is fine).
- Unexpected input (empty, very long, negative or non-numeric values, rapid repeated clicks) never breaks it or shows NaN, undefined or a blank screen.

Before you finish, read your file once from top to bottom and make sure that:
- The first screen shows real example content, and every control works.
- A reload keeps what the user entered.
- It fits a 390×844 phone window and a 1280×720 desktop window with no page scrollbars.
- Nothing can throw an error in the browser console.

The battle video records about 30 seconds right after the page opens, with a click on a few of its buttons.

Everything else is your choice: the features beyond the core job, the layout, style and colour. Make it as useful, delightful and visually stunning as you can. Do not ask questions; make reasonable choices.