Nemotron 3.5 Lightning (free)

Here's a thinking process:

1.  **Analyze the Request:**
   - **Goal:** Create 4 animated weather cards (sunny, rainy, snowy, stormy)
   - **Constraints:**
     - No JavaScript (no `<script>` tag, no inline event handlers)
     - No images, no SVG, no icon fonts - icons must be built from HTML elements + CSS pseudo-elements
     - Each card: animated icon (rotating sun rays, falling rain, drifting snowflakes, flashing lightning), city name, temperature, short description
     - Each card has its own background gradient matching the weather
     - Responsive grid: 4 per row on desktop, stacked on mobile
     - Cards lift up on hover
     - Smooth infinite animations using `@keyframes`
     - Respect `prefers-reduced-motion`
     - No `localStorage`, `sessionStorage`, cookies, `alert()`, `confirm()`, `prompt()`, `window.open()`
     - Inline CSS/JS (but JS is banned, so just HTML/CSS inline)
     - No external files, images, fonts, network requests (except CDN URLs explicitly allowed, but here it says no images/SVG/icon fonts, so I'll avoid CDNs or use data URIs if absolutely needed, but better to keep it pure)
     - Self-contained, fenced code block with `html`
     - viewport 1280×800, adapt to 375px, no horizontal scrollbar
     - Something meaningful visible on first paint
     - Games must start in self-playing demo mode (not applicable here, this is weather cards)
     - Iframe only receives keyboard events after user clicks - but this is weather cards, not keyboard-dependent gameplay. However, it says "if the demo uses the keyboard, display a clear 'Click or press a key to start' message". Since this is cards with hover/hover lift, maybe no keyboard needed, but I should still consider the constraint. The icons are CSS-only animations, no keyboard interaction needed. I'll add a "Click or press a key to start" message just in case, but the requirements say "Games must start in a self-playing demo mode... if the demo uses the keyboard, display a clear message". This isn't a game, but to be safe, I might add a minimal start message or just ensure no keyboard dependence. Actually, re-read: "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." Since my demo doesn't use keyboard input at all, I can either omit it or add a generic "Click to interact" but it's not needed. I'll skip it to keep it clean, but I need to ensure the cards work on first paint without interaction.
     - Zero errors in Chrome console

   Let's break down the design:

   **HTML Structure:**
   - A container div for the grid
   - 4 card divs, each with:
     - A weather icon container (built with HTML elements/pseudo-elements)
     - City name
     - Temperature
     - Description
   - No `<script>` tags
   - All CSS inline in `<style>`

   **CSS Animations (no JS):**
   - Sunny: rotating sun rays (using `<span>` or `<i>` with `::before`/`::after` for rays, rotate animation)
   - Rainy: falling rain drops (multiple `::after` or `<div>` with animation falling and fading)
   - Snowy: drifting snowflakes (similar but slower, maybe rotate too)
   - Stormy: flashing lightning (::before/::after with pseudo-lightning, keyframes for flash)

   **Gradients for each weather:**
   - Sunny: linear-gradient(yellow, orange) or sunny gradient
   - Rainy: cool blue-gray gradient
   - Snowy: light blue to white, maybe snowy
   - Stormy: dark gray with purple accent, thunder

   **Responsive Grid:**
   - Use CSS Grid: `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` or `4fr 4fr 4fr 4fr` with media query for mobile to stack.
   - Hover lift: `transform: translateY(-8px)` or similar on card hover

   **prefers-reduced-motion:**
   - Use `@media (prefers-reduced-motion: no-preference)` or reduce animation duration/skip. I'll set animation duration to 0 or use `animation-play-state: paused` inside the media query, or just make animations very simple and short, or use the media query to set `animation: none`. I'll do the standard: inside the keyframes, or use `@media (prefers-reduced-motion: reduce) { .animated { animation: none; } }`

   **No JS, no events beyond hover:**
   - Hover lift is CSS `:hover`
   - Animations are infinite CSS keyframes

   **Constraints check:**
   - No `<script>` tag: I'll put all CSS in `<style>`, no script at all.
   - No images/SVG/icon fonts: icons built from HTML elements + pseudo-elements. I'll use `<div>` and `::before`/`::after` for sun rays, rain, snow, lightning.
   - Responsive grid: CSS grid/flex
   - Hover lift: CSS transform
   - Infinite smooth animations: keyframes
   - prefers-reduced-motion: media query

   Let's design each icon carefully using only HTML elements and CSS pseudo-ethers.

   **Sunny:**
   - A yellow circle (border-radius 50% or background)
   - Rays: `::before` and `::after` with rotated spans, or better: multiple `::before`/`::after` creating 8 rays. Actually, I can create a sun icon using a `<div class="sun"></div>` with `::before` and `::after` for rays, and rotate them via keyframes.
   - Classic CSS sun: 
     ```html
     <div class="weather-card sunny">
       <div class="icon"><div class="sun"><span></span></div></icon>
       ...
     ```
     But I need to build rays from pseudo-elements. Let me think: a single element with `::before` and `::after` can have rays if I position them absolutely. I'll do:
     ```html
     <div class="icon"><div class="sun"><i></i></div></icon>
     ```
     Actually, simpler: one `<div class="sun"></div>` with `::before` and `::after` for two perpendicular rays, then use keyframes to rotate them. But to get 8 rays, I can use 8 `::before` via counter? No CSS counter in pseudo-elements easily without JS. I'll just use 4 rays (sun with 4 corners) or 8 by duplicating structure. Actually, I can make a sun with rotating rays using keyframes on a single `<i>` element inside, or just make the sun itself rotate, and have static rays. The requirement says "rotating sun rays". I'll do: a sun face, and rays that rotate. I can create 4 rays using `::before` and `::after` on a container, and rotate the whole sun icon. Or I can have the rays rotate individually. Let's keep it simple: a yellow circle, and 4 triangular rays that rotate continuously via keyframes. I'll use 4 `<div>` for rays inside the sun, but that's HTML elements - allowed! The requirement says "every weather icon is built from HTML elements and pseudo-elements styled with CSS." So I can use HTML divs + CSS pseudo-elements. I'll use a couple of divs for the sun structure, and pseudo-elements for additional details.

   Let me sketch each icon mentally:

   **Sunny:**
   ```html
   <div class="icon sun">
     <div class="ray ray1"></div>
     <div class="ray ray2"></div>
     <div class="ray ray3"></div>
     <div class="ray ray4"></div>
     <div class="center"></div>
   ```
   CSS: `.sun { width: 80px; height: 80px; background: yellow; border-radius: 50%; position: relative; }`
   `.ray { position: absolute; width: 4px; height: 30px; background: yellow; left: 50%; bottom: 100%; transform-origin: center top; }`
   Actually, rotating 4 rays: I can keyframe `transform: rotate(0deg)` to `rotate(90deg)` etc., or just rotate the whole sun and have rays static? "rotating sun rays" implies the rays rotate. I'll make the sun container rotate continuously, and the rays are fixed to the sun, so they rotate with it. That's easiest: one keyframe `rotate 20s infinite`, and the rays are children that inherit the rotation. But then all rotate together, which is "rotating sun rays". I think that's fine.

   **Rainy:**
   - Falling rain drops. I can use `::after` or `<div>` with animation keyframes `fall` from top to bottom, with opacity fade. Multiple drops with staggered delays.
   - I'll use `<div class="drop"></div>` inside the icon, but since I can use pseudo-elements, I can create drops with `::before` or `::after`. Actually, I'll use a container with multiple absolutely positioned drops created via `::before`/`::after` in CSS? But I can't generate multiple pseudo-elements with a loop. I'll use a few `<div class="drop"></div>` elements. That's HTML elements, allowed.
   - Animation: `fall 1s linear infinite` with different `animation-delay`.

   **Snowy:**
   - Drifting snowflakes. Similar to rain but slower, maybe rotate. Use `<div class="flake"></div>` with `fall` and `rotate` keyframes.

   **Stormy:**
   - Flashing lightning. A dark cloud, and a lightning flash that flashes infinitely with keyframes `flash { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }` or brightness change. I'll have a lightning `::after` or `<div>` that fades in/out.

   Let's plan the HTML structure for 4 cards:

   ```html
   <div class="weather-grid">
     <div class="weather-card sunny">
       <div class="icon"><div class="sun"><i></i></div></div>
       <h2>Springfield</h2>
       <div class="temp">+25°C</div>
       <p class="desc">Clear skies</p>
     </div>
     <!-- repeat for rainy, snowy, stormy -->
   </div>
   ```

   But I need to ensure no `<script>` tag. All good.

   Let's think about the CSS carefully.

   **Grid:**
   ```css
   .weather-grid {
     display: grid;
     gap: 20px;
     padding: 20px;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   }
   ```
   This will go 4 on desktop, then reduce as screen narrows, stacking automatically. No media query needed for grid, but I might add one for finer control.

   **Card hover lift:**
   ```css
   .weather-card:hover {
     transform: translateY(-10px);
     transition: transform 0.3s ease;
   }
   ```

   **prefers-reduced-motion:**
   ```css
   @media (prefers-reduced-motion: reduce) {
     .weather-card * {
       animation: none !important;
       transition: none !important;
     }
   }
   ```

   **Animations:**

   **Sun rays rotation:**
   ```css
   @keyframes rotate {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
   .sun { animation: rotate 20s linear infinite; }
   ```

   **Rain falling:**
   ```css
   @keyframes fall {
     0% { transform: translateY(-10px); opacity: 0; }
     100% { transform: translateY(100px); opacity: 1; }
   }
   .drop { animation: fall 1s linear infinite; }
   ```
   I'll have 3-4 drops with different delays.

   **Snow drifting:**
   ```css
   @keyframes drift {
     0% { transform: translateX(100px) translateY(-10px) rotate(0deg); }
     100% { transform: translateX(-100px) translateY(100px) rotate(360deg); }
   }
   .flake { animation: drift 8s linear infinite; }
   ```

   **Lightning flash:**
   ```css
   @keyframes flash {
     0%, 100% { opacity: 0; }
     50% { opacity: 1; }
   }
   .lightning { animation: flash 1.5s infinite; }
   ```

   Now, let's ensure all icons are built from HTML elements and pseudo-elements. I'll use a mix. To be safe, I'll use HTML div spans for the main shapes, and pseudo-elements for decorative rays/drops where possible, but since I need multiple falling drops, I'll use HTML elements with class `.drop`. The constraint says "every weather icon is built from HTML elements and pseudo-elements styled with CSS." It doesn't say *every single piece* must be a pseudo-element, just that the icons are built from them. I'll use HTML elements for the main icon structure, and incorporate pseudo-elements for additional details (like sun rays can be `::before`/`::after` on the sun container, but then rotating them individually is tricky. I'll just rotate the sun container and have static rays made with `::before`/`::after`. Actually, I can make the sun have 4 rays via `::before` and `::after` on a middle element, and rotate those. Let's see: a common CSS sun pattern:

   ```html
   <div class="sun"></div>
   ```
   ```css
   .sun {
     width: 80px; height: 80px;
     background: yellow;
     border-radius: 50%;
     position: relative;
   }
   .sun::before, .sun::after {
     content: "";
     position: absolute;
     width: 4px; height: 30px;
     background: yellow;
     left: 50%; /* or left for vertical, top for horizontal */
     transform: translateX(-50%);
   }
   .sun::before { top: 0; transform: translateX(-50%) rotate(45deg); }
   .sun::after { bottom: 0; transform: translateX(-50%) rotate(-45deg); }
   ```
   Then animate the sun itself rotating? That would rotate the rays too. But I want "rotating sun rays". If I rotate the sun, the rays rotate with it. That's fine. I'll just keyframe `transform: rotate(360deg)` on `.sun`.

   Actually, to make rays rotate independently or just rotate the sun, it's all good. I'll rotate the sun container.

   **Rain drops:** I'll use `::after` on a container to create one drop, but I need multiple drops falling. I could use a few `<div>` elements, but to maximize pseudo-element usage, I could use CSS `animation` with `nth-of-type` or similar, but generating multiple identical elements via pseudo-elements is limited to 2 (`::before` and `::after`). I'll use a small number of `<div class="drop"></div>` inside the rain icon. That's fine; they're HTML elements. The icon is "built from HTML elements and pseudo-elements". I'll have the rain cloud as a `<div>`, and drops as `<div>` with pseudo-elements maybe for the drop tail? I'll keep it simple: cloud `<div>`, and drops as absolutely positioned `<div>` with `::before` for the drop shape? Actually, a drop can be just a `<div>` with border-radius. I'll use `<div>` for drops. To incorporate pseudo-elements, I can add `::before` for sparkle or something.

   Let's decide on the exact HTML/CSS to avoid JS, keep it pure, and meet all constraints.

   **Plan:**

   **HTML (inside `<body>`):**
   ```html
   <div class="weather-wrapper">
     <div class="weather-card sunny">
       <div class="card-inner">
         <div class="weather-icon sunny">
           <div class="sun"><i></i></div>
         </div>
         <h3 class="city">San Francisco</h3>
         <div class="temp">+18°C</div>
         <p class="desc">Sunny day</p>
       </div>
     </div>
     <!-- rainy, snowy, stormy -->
   </div>
   ```

   But I need to ensure no `<script>` tag anywhere. The whole file will be `<html><head><style>...></style></head><body>...</body></html>`.

   Let's draft the full HTML mentally:

   ```html
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather Cards</title>
     <style>
       /* ---- CSS vars and reset ---- */
       :root { --gap: 16px; --card-min: 240px; }
       * { box-sizing: border-box; margin: 0; padding: 0; }
       body {
         font-family: system-ui, sans-serif;
         background: #f0f2f5;
         display: flex;
         align-items: center;
         justify-content: center;
         min-height: 100vh;
         color: #333;
       }
       .weather-grid {
         display: grid;
         gap: var(--gap);
         width: 100%;
         max-width: 1280px;
         padding: var(--gap);
         grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
       }
       .weather-card {
         background: var(--gradient);
         border-radius: 16px;
         padding: 24px 20px;
         text-align: center;
         transition: transform 0.3s ease;
         position: relative;
         overflow: hidden;
       }
       .weather-card:hover {
         transform: translateY(-8px);
       }
       .weather-card.sunny { --gradient: linear-gradient(135deg, #fdaa3b, #d63031); }
       .weather-card.rainy { --gradient: linear-gradient(135deg, #4facfe, #00f2fe); }
       .weather-card.snowy { --gradient: linear-gradient(135deg, #e0e7ff, #a5f3fc); }
       .weather-card.stormy { --gradient: linear-gradient(135deg, #667db6, #a855f7); }
       
       .weather-icon {
         width: 80px; height: 80px; margin: 0 auto 16px;
         position: relative;
       }
       /* Sun */
       .sun {
         width: 100%; height: 100%;
         border-radius: 50%;
         background: #fef3c7;
         position: relative;
         animation: rotateSun 20s linear infinite;
       }
       @keyframes rotateSun {
         from { transform: rotate(0deg); }
         to { transform: rotate(360deg); }
       }
       .sun::before, .sun::after {
         content: "";
         position: absolute;
         background: #fef3c7;
         border-radius: 2px;
       }
       .sun::before { width: 4px; height: 28px; left: 50%; top: 50%; transform: translateX(-50%) rotate(45deg); }
       .sun::after { width: 4px; height: 28px; left: 50%; top: 50%; transform: translateX(-50%) rotate(-45deg); }
       
       /* Rain */
       .rain { width: 100%; height: 100%; position: relative; }
       .drop {
         position: absolute;
         width: 2px; height: 12px;
         background: #e3e6e8;
         border-radius: 2px 2px 0 0;
         top: -10px;
         animation: fallDrop 1s linear infinite;
       }
       @keyframes fallDrop {
         0% { transform: translateY(-10px); opacity: 0; }
         100% { transform: translateY(100px); opacity: 1; }
       }
       .drop:nth-child(2) { animation-delay: 0.2s; left: 20%; }
       .drop:nth-child(3) { animation-delay: 0.4s; left: 45%; }
       .drop:nth-child(4) { animation-delay: 0.6s; left: 70%; }
       
       /* Snow */
       .snow { width: 100%; height: 100%; position: relative; }
       .flake {
         position: absolute;
         width: 8px; height: 8px;
         background: #fff;
         border-radius: 50%;
         top: -10px;
         left: random(?); /* can't use random in CSS, I'll use percent positions manually or just scatter */
         animation: driftFlake 6s linear infinite;
       }
       @keyframes driftFlake {
         0% { transform: translateX(100%) translateY(-10px) rotate(0deg); }
         100% { transform: translateX(-100%) translateY(100px) rotate(360deg); }
       }
       .flake:nth-child(2) { animation-delay: 1s; left: 15%; }
       .flake:nth-child(3) { animation-delay: 2s; left: 50%; }
       .flake:nth-child(4) { animation-delay: 3s; left: 80%; }
       
       /* Storm */
       .storm { width: 100%; height: 100%; position: relative; background: #333; border-radius: 50% 50% 0 0; }
       .lightning {
         position: absolute; top: 40%; left: 50%; transform: translateX(-50%);
         width: 2px; height: 20px;
         background: #fef3c7;
         border-radius: 2px;
         opacity: 0;
         animation: flashLight 1.5s infinite;
       }
       @keyframes flashLight {
         0%, 100% { opacity: 0; }
         50% { opacity: 1; }
       }
       
       .city { font-size: 1.2rem; margin-bottom: 8px; }
       .temp { font-size: 2rem; font-weight: bold; margin-bottom: 12px; }
       .desc { font-size: 0.9rem; color: #666; }
       
       /* Reduced motion */
       @media (prefers-reduced-motion: reduce) {
         .sun, .drop, .flake, .lightning { animation: none; }
         .sun { transform: none; }
       }
     </style>
   </head>
   <body>
     <div class="weather-grid">
       <div class="weather-card sunny">
         <div class="card-inner">
           <div class="weather-icon sunny">
             <div class="sun"><i></i></div>
           </div>
           <h3 class="city">San Francisco</h3>
           <div class="temp">+18°C</div>
           <p class="desc">Clear skies</p>
         </div>
       </div>
       <div class="weather-card rainy">
         <div class="card-inner">
           <div class="weather-icon rainy">
             <div class="rain">
               <div class="drop"></div>
               <div class="drop"></div>
               <div class="drop"></div>
               <div class="drop"></div>
             </div>
           </div>
           <h3 class="city">Seattle</h3>
           <div class="temp">+12°C</div>
           <p class="desc">Gentle rain</p>
         </div>
       </div>
       <div class="weather-card snowy">
         <div class="card-inner">
           <div class="weather-icon snowy">
             <div class="snow">
               <div class="flake"></div>
               <div class="flake"></div>
               <div class="flake"></div>
               <div class="flake"></div>
             </div>
           </div>
           <h3 class="city">Reykjavik</h3>
           <div class="temp">-3°C</div>
           <p class="desc">Light snow</p>
         </div>
       </div>
       <div class="weather-card stormy">
         <div class="card-inner">
           <div class="weather-icon stormy">
             <div class="storm">
               <div class="lightning"></div>
             </div>
           </div>
           <h3 class="city">Chicago</h3>
           <div class="temp">+5°C</div>
           <p class="desc">Thunderstorms</p>
         </div>
       </div>
     </div>
   </body>
   </html>
   ```

   Wait, I need to check constraints:
   - "No JavaScript: the file must not contain any <script> tag or inline event handler." ✅ No script tag.
   - "No images, no SVG, no icon fonts: every weather icon is built from HTML elements and pseudo-elements styled with CSS." ✅ Sun uses `<div class="sun"><i></i></i>` - `<i>` is an HTML element. Rain drops are `<div class="drop"></div>`. Snowflakes `<div class="flake"></div>`. Lightning `<div class="lightning"></div>`. All built from HTML elements, styled with CSS, and I also use pseudo-elements `::before`/`::after` on `.sun`. So that's satisfied.
   - "Each card shows an animated icon (rotating sun rays, falling rain drops, drifting snowflakes, flashing lightning)" ✅
   - "a city name, a temperature and a short description" ✅
   - "Each card has its own background gradient matching the weather" ✅ using CSS vars `--gradient`.
   - "The cards are displayed in a responsive grid (4 per row on desktop, stacked on mobile) and lift up on hover" ✅ grid with `auto-fit`, hover lift.
   - "Smooth infinite animations using @keyframes, and respect prefers-reduced-motion" ✅ keyframes, media query.
   - "Absolutely no JavaScript: the file must not contain any <script> tag or inline event handler." ✅
   - "No images, no SVG, no icon fonts" ✅
   - "The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar." ✅ grid is responsive, max-width 1280, padding, should fit. I need to ensure body doesn't have overflow-x hidden? I'll set `overflow-x: hidden` on body or use `max-width` on grid. The grid width is 100% and max-width 1280, it should adapt. For 375px, `auto-fit` with `minmax(240px, 1fr)` will stack cards vertically. No horizontal scrollbar if I don't have wide fixed elements. I'll set `body { overflow-x: hidden; }` just in case.
   - "Something meaningful visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction." ✅ Cards are visible immediately.
   - "Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session." ✅
   - "Games must start in a self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message, so the game can be judged in action without playing." Not applicable, but the constraint about keyboard: "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." My demo doesn't use keyboard events. I could add a "Click or press a key to start" message just to be safe, but it says "if the demo uses the keyboard". Since it doesn't, I think it's optional. However, to strictly comply with the sandbox setup, maybe I should add a visible message like "Click or press a key to start" but it might be weird for a static weather demo. Let re-read: "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." This is a general rule for the iframe environment. If my demo doesn't use keyboard, I don't need to display it. But sometimes the sandbox expects it. I'll add a subtle "Click anywhere to continue" or just leave it. Actually, the requirement says "if the demo uses the keyboard, display a clear 'Click or press a key to start' message." It's conditional. I'll skip it to keep the weather cards clean. But I need to ensure the cards don't require keyboard interaction. They don't; they're hover/animation only.

   Wait, there's another constraint: "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." This might mean that if I want keyboard interaction, I must show the message. Since I don't, it's fine. But to be ultra-safe, I could add a `span` with text that says "Click or press a key to start" but styled hidden until needed, or just not. I'll leave it out.

   Let's double-check the CSS for any potential issues:
   - `animation: rotateSun 20s linear infinite;` on `.sun` - the sun has `::before` and `::after` which are part of the sun element, they'll rotate with it. Good.
   - Rain drops: `.drop` has `animation: fallDrop 1s linear infinite;`. I have 4 drops with `nth-child` delays. But `nth-child` targets the children of `.rain`. I need to make sure the drops are direct children of `.rain`. In my HTML: `<div class="rain"><div class="drop"></div>...</div>`. That works.
   - Snow flakes: similar.
   - Lightning: `.lightning` has `animation: flashLight 1.5s infinite;`. I have one lightning per storm card.
   - `prefers-reduced-motion`: I have `@media (prefers-reduced-motion: reduce) { .sun, .drop, .flake, .lightning { animation: none; } .sun { transform: none; } }`. This should stop animations. I might also want to stop transitions, but only animations are mentioned.
   - Grid: `.weather-grid { display: grid; gap: var(--gap); width: 100%; max-width: 1280px; padding: var(--gap); grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr)); }`. This will create 4 columns when space allows, then stack. `auto-fit` vs `auto-fill`: `auto-fit` collapses empty tracks, `auto-fill` keeps them. `auto-fit` is fine.
   - Hover lift: `.weather-card:hover { transform: translateY(-8px); transition: transform 0.3s ease; }`. Good.
   - Gradients: I used CSS vars on the card class: `--gradient: linear-gradient(135deg, #fdaa3b, #d63031);` etc. But I need to apply the gradient as the background. I did `.weather-card.sunny { --gradient: ... }` but I didn't set `background: var(--gradient);`. I need to add that. Let me fix: `.weather-card { background: var(--gradient); ... }` and then each card sets `--gradient`. That works.
   - Wait, CSS vars need to be defined before use. I'll define `--gradient` in the card's own rule, but `background: var(--gradient)` needs the variable to be set. In CSS, if I do `.weather-card.sunny { --gradient: ... }`, the `background` is inherited from the base `.weather-card` rule. But the base rule sets `background: var(--gradient);` which will look for `--gradient` in the element's own declarations or inherited. Since `.weather-card.sunny` sets `--gradient`, it will be used. Actually, it's better to set `background` in each specific card class, or set `--gradient` in the base and override. Let's do: base `.weather-card { border-radius: 16px; padding: 24px 20px; text-align: center; transition: transform 0.3s ease; position: relative; overflow: hidden; background: var(--gradient); }` and then `.weather-card.sunny { --gradient: linear-gradient(135deg, #fdaa3b, #d63031); }`. This should work because the element has `.weather-card.sunny`, so `--gradient` is set, and `background: var(--gradient)` resolves to that gradient. Yes.

   Let's ensure no errors. I'll go through the CSS mentally:

   - `:root { --gap: 16px; --card-min: 240px; }` - ok.
   - `* { box-sizing: border-box; margin: 0; padding: 0; }` - ok.
   - `body { ... }` - ok.
   - `.weather-grid { ... }` - ok.
   - `.weather-card { ... background: var(--gradient); ... }` - ok.
   - Weather icon classes: `.sun`, `.rain`, `.snow`, `.storm`. I need to make sure the HTML classes match. I'll name them `weather-icon sunny` etc., but the inner icon divs have classes `sun`, `rain`, `snow`, `storm`. That's fine.
   - `@keyframes rotateSun` - ok.
   - `.sun::before, .sun::after` - ok.
   - `.rain .drop` - I have `.drop` as direct children of `.rain`. I'll use `.rain > .drop` or just `.drop` inside `.rain`. I'll use `.drop` as child.
   - `.drop:nth-child(2)` etc. - this targets the nth child of the parent containing `.drop`. If the parent is `.rain`, and children are `.drop`, then `.rain .drop:nth-child(2)` works, but `.drop:nth-child(2)` within the rule `.rain { ... }` will target the 2nd child of `.rain` if it's a `.drop`. Actually, in my rule `.rain { ... .drop { ... } .drop:nth-child(2) { animation-delay: 0.2s; left: 20%; } }`, the `nth-child(2)` refers to the 2nd child of `.rain`. Since the children are `<div class="drop"></div>`, the 2nd child is indeed the 2nd `.drop`. So it's fine. But I need to ensure the `left` property is set. I'll set `left: random`? I can't use `random`. I'll manually position them with `left: 10%; left: 30%; left: 50%; left: 70%;` etc. I'll set `left` on each drop via inline style? No, I can use CSS. I'll assign `left` via the `nth-child` selectors. Like:
     ```css
     .rain .drop { left: 10%; } /* default, but overridden */
     .rain .drop:nth-child(2) { left: 30%; animation-delay: 0.2s; }
     .rain .drop:nth-child(3) { left: 55%; animation-delay: 0.4s; }
     .rain .drop:nth-child(4) { left: 80%; animation-delay: 0.6s; }
     ```
     But if I set `.rain .drop { left: 10%; }` and then override with `nth-child`, the `nth-child` will win due to specificity or order. Better to just set `left` on each individually, or use `animation-direction` or `transform`. Actually, I can just position them absolutely and use `left` with percentages. I'll do:
     ```css
     .drop {
       position: absolute;
       width: 2px; height: 12px;
       background: #e3e6e8;
       border-radius: 2px 2px 0 0;
       top: -10px;
       left: 50%; /* will be overridden */
       transform: translateX(-50%);
     }
     .rain .drop:nth-child(1) { animation-delay: 0s; left: 10%; }
     .rain .drop:nth-child(2) { animation-delay: 0.2s; left: 30%; }
     .rain .drop:nth-child(3) { animation-delay: 0.4s; left: 55%; }
     .rain .drop:nth-child(4) { animation-delay: 0.6s; left: 80%; }
     ```
     But `left: 10%` on `nth-child(1)` will override the `left: 50%` because it's more specific? Actually, both are class selectors on the same element, so the one with `nth-child` has same specificity but later in the CSS wins. I'll just set `left` directly on each `nth-child` rule and not set a general `left` on `.drop`, or set `left: 50%` and then override. To avoid confusion, I'll set `left` only on the `nth-child` rules, and for the base `.drop`, I'll set `left: 50%` and `transform: translateX(-50%)`, but then the `nth-child` rules will need to override `left` only, which they will if they come after. Actually, it's simpler: I'll not use `left` in base, and in each `nth-child` I'll set `left: X%`. Since specificity is same, the later rule wins. I'll order the `nth-child` rules at the end of the `.rain` block.

   Let's restructure the CSS to be clean.

   **Snow flakes:** Similar. I'll have `.flake` with `position: absolute; width: 8px; height: 8px; background: #fff; border-radius: 50%; top: -10px;`. I'll position them with `left` via `nth-child`. Also, I want them to drift horizontally and rotate. I'll keyframe `transform: translateX(...) translateY(...) rotate(...)`. I'll set initial `left` via `nth-child`.

   **Lightning:** One element `.lightning` with `position: absolute; top: 40%; left: 50%; transform: translateX(-50%); width: 2px; height: 20px; background: #fef3c7; border-radius: 2px; opacity: 0; animation: flashLight 1.5s infinite;`. The flash keyframe alternates opacity.

   Now, let's think about the "rotating sun rays" - I have the sun rotating via `animation: rotateSun 20s linear infinite;`. The rays are `::before` and `::after` on `.sun`, so they rotate with the sun. That creates "rotating sun rays". Is that sufficient? Probably. I could also make the rays rotate independently, but it's fine.

   One thing: the requirement says "rotating sun rays, falling rain drops, drifting snowflakes, flashing lightning". My sun rotates the whole icon, which includes the rays. That's rotating sun rays. Good.

   Let's ensure the HTML structure is valid and the CSS is complete in one `<style>` block, no `<script>`.

   I'll also add a meta viewport tag for responsiveness: `<meta name="viewport" content="width=device-width, initial-scale=1.0">`. That's allowed; it's not an external file.

   Let's draft the final code carefully.

   **Potential issues:**
   - The `::before`/`::after` on `.sun` have `background: #fef3c7` which matches the sun background. That's fine; they are just rays.
   - Rain drops: I need to ensure they fall within the card. The card height will adjust. I'll set `.rain` to `width: 80px; height: 80px; margin: 0 auto 16px;` same as sun.
   - Snowflakes: similar.
   - Lightning: I'll make it look like a zigzag or just a vertical flash. I'll keep it simple: a thin rectangle that flashes. To make it look like lightning, I could use `::before`/`::after` to make a shape, but a simple rect flashing is okay. I can get creative: use `::before` to make a lightning bolt shape. But the requirement says "built from HTML elements and pseudo-elements". I can make the lightning from a `<div>` and use `::before`/`::after` for branches. Let's see: a common CSS lightning is a `<div>` with `::before` and `::after` positioned to make bolts. I'll do that for stormy card. It adds visual interest and uses pseudo-elements more.

   Let's redesign the storm icon using pseudo-elements:
   ```html
   <div class="weather-icon stormy">
     <div class="storm">
       <div class="lightning">
         <span></span>
       </div>
     </div>
   ```
   But I want to use `::before`/`::after` on `.lightning` or a container. Let's do:
   ```html
   <div class="storm">
     <div class="cloud"></div>
     <div class="lightning">
       <i></i>
     </div>
   ```
   Actually, I'll keep it simpler: the storm card has a dark background gradient, a cloud, and a lightning flash. I'll use a `<div class="cloud">` and `<div class="lightning">` with `::before` for the bolt. But I need to be careful not to overcomplicate.

   Let's step back and design each icon concisely with HTML elements + pseudo-elements.

   **Sunny:**
   - `.sun` div with `::before` and `::after` for rays, rotating the whole thing.

   **Rainy:**
   - `.cloud` div, and `.drop` divs for rain. I can make the cloud from `::before`/`::after` too, but HTML elements are fine.

   **Snowy:**
   - `.cloud` similar, `.flake` divs.

   **Stormy:**
   - `.cloud` and `.lightning` with `::before`/`::after` for bolt.

   Actually, to satisfy "every weather icon is built from HTML elements and pseudo-elements", I should ensure each icon uses at least some pseudo-elements. The sun already uses `::before`/`::after`. For rain, I can have the cloud made with `::before`/`::after`. For snow, similar. For lightning, the bolt can be `::before`/`::after`.

   Let's design a simple cloud using pseudo-elements:
   ```html
   <div class="cloud"></div>
   ```
   ```css
   .cloud {
     width: 60px; height: 30px;
     position: relative;
     margin: 10px auto;
   }
   .cloud::before, .cloud::after {
     content: "";
     position: absolute;
     background: inherit;
     border-radius: 50%;
   }
   .cloud::before { width: 30px; height: 30px; left: 0; top: 50%; transform: translateY(-50%); }
   .cloud::after { width: 30px; height: 30px; right: 0; top: 50%; transform: translateY(-50%); }
   ```
   That's a simple cloud. I can use that for all weather types, or differentiate.

   Let's plan the full structure per card:

   **Sunny card:**
   ```html
   <div class="weather-card sunny">
     <div class="card-inner">
       <div class="weather-icon">
         <div class="sun"></div>
       </div>
       <h3 class="city">San Francisco</h3>
       <div class="temp">+18°C</div>
       <p class="desc">Clear skies</p>
     </div>
   </div>
   ```
   CSS: `.sun { ... ::before, ::after ... animation: rotateSun ... }`

   **Rainy card:**
   ```html
   <div class="weather-card rainy">
     <div class="card-inner">
       <div class="weather-icon">
         <div class="cloud"></div>
         <div class="rain">
           <div class="drop"></div><div class="drop"></div><div class="drop"></div><div class="drop"></div>
         </div>
       </div>
       ...
     </div>
   </div>
   ```
   CSS: `.cloud { ... ::before, ::after ... }` `.drop { ... animation: fallDrop ... }`

   **Snowy card:**
   ```html
   <div class="weather-card snowy">
     <div class="card-inner">
       <div class="weather-icon">
         <div class="cloud"></div>
         <div class="snow">
           <div class="flake"></div><div class="flake"></div><div class="flake"></div><div class="flake"></div>
         </div>
       </div>
       ...
     </div>
   </div>
   ```
   CSS: similar, `.flake { ... animation: driftFlake ... }`

   **Stormy card:**
   ```html
   <div class="weather-card stormy">
     <div class="card-inner">
       <div class="weather-icon">
         <div class="cloud"></div>
         <div class="lightning">
           <span></span>
         </div>
       </div>
       ...
     </div>
   </div>
   ```
   CSS: `.lightning { ... position: absolute; ... animation: flashLight ... }` and maybe `::before`/`::after` for bolt branches. I'll make `.lightning` a container with `::before` and `::after` to make a lightning bolt shape. For example:
   ```html
   <div class="lightning"></div>
   ```
   ```css
   .lightning {
     width: 20px; height: 30px;
     position: relative;
     margin: 10px auto;
   }
   .lightning::before, .lightning::after {
     content: "";
     position: absolute;
     background: #fef3c7;
     border-radius: 2px;
   }
   .lightning::before { width: 20px; height: 4px; top: 0; left: 50%; transform: translateX(-50%); }
   .lightning::after { width: 4px; height: 26px; top: 4px; left: 50%; transform: translateX(-50%); }
   ```
   Then animate opacity on `.lightning` for flash. The `::before`/`::after` will inherit or I can animate them separately. I'll just animate `.lightning` opacity, and the bolt shape remains visible when flashed. Actually, if I animate `.lightning` opacity, the whole bolt fades. That's fine for flashing lightning.

   Let's refine the lightning flash: keyframes `flash { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }` on `.lightning`. That makes the whole bolt flash. Good.

   Now, let's consider the `prefers-reduced-motion` media query. I'll place it at the end of the CSS.

   **Responsive grid:** I'll use `grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));` inside `.weather-grid`. With `gap: 16px` and `max-width: 1280px` on the grid, and `body { overflow-x: hidden; }`. For 375px width, `auto-fit` will make each card take `minmax(240px, 1fr)`. On 375px, `240px` fits maybe 1 per row with gap, or 2 if space allows. Let's calculate: 375px width, gap 16px * 2 = 32 if 2 cards, plus 240*2=480 > 375, so 1 card per row. That's fine, stacked. No horizontal scroll.

   **First paint:** Cards are visible immediately. The animations start on load. The sun rotates, rain falls, snow drifts, lightning flashes. All infinite.

   **No JavaScript:** Confirmed, no `<script>` tag, no event handlers. Hover is CSS `:hover`. Animations are CSS keyframes.

   **Check constraints again:**
   - "Absolutely no JavaScript: the file must not contain any <script> tag or inline event handler." ✅
   - "No images, no SVG, no icon fonts: every weather icon is built from HTML elements and pseudo-elements styled with CSS." ✅ (sun uses `<div class="sun">` and `::before`/`::after`; cloud uses `::before`/`::after`; drops/flakes/lightning are `<div>` elements styled with CSS)
   - "Each card shows an animated icon (rotating sun rays, falling rain drops, drifting snowflakes, flashing lightning)" ✅
   - "a city name, a temperature and a short description" ✅
   - "Each card has its own background gradient matching the weather" ✅
   - "The cards are displayed in a responsive grid (4 per row on desktop, stacked on mobile) and lift up on hover" ✅
   - "Smooth infinite animations using @keyframes, and respect prefers-reduced-motion" ✅
   - "No JavaScript, no images, no SVG, no icon fonts" ✅
   - "The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar." ✅
   - "Something meaningful visible on first paint" ✅
   - "Everything that makes the demo interesting must be visible within the first seconds" ✅
   - "Games must start in a self-playing demo mode... if the demo uses the keyboard, display a clear 'Click or press a key to start' message" - My demo doesn't use keyboard, so I'll skip the message. But to be safe against the sandbox expecting it, maybe I should add a tiny "Click or press a key to start" text that is purely decorative and doesn't do anything? The requirement says "if the demo uses the keyboard, display a clear 'Click or press a key to start' message." It's conditional. I'll omit it. If the sandbox fails me for it, I might add it, but I think it's fine. Actually, re-reading the user prompt: "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." This is part of the output rules. It's a general rule for all demos. It says "if the demo uses the keyboard". My demo doesn't use keyboard events. So I don't need to display it. I'll proceed without it.

   Wait, there's a nuance: "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." This might imply that if the demo is interactive with keyboard, show the message. Since mine isn't, it's fine. But sometimes these automated tests check for the presence of such a message regardless. To be safe, I could add a subtle message like "Tap or click to interact" but it might look out of place. I'll add a `div` with text "Click or press a key to start" but styled with `position: absolute; top: 10%; left: 50%; transform: translateX(-50%); font-size: 0.8rem; color: #666;` and maybe hide it or make it part of the design? Actually, the requirement says "Games must start in a self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message". This is for games. My demo is weather cards, not a game. The rule about keyboard is separate: "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." I'll interpret this as: if my demo uses keyboard input, I must show the message. Since it doesn't, I won't. However, to absolutely comply with the "iframe only receives keyboard events after the user clicks it" part, maybe I should ensure that if a user clicks, keyboard events are received, but I don't need to show a message. I'll just not include the message.

   Let's finalize the code structure.

   I'll write the HTML with inline `<style>`, no `<script>`.

   Let's code it step by step in my mind, then output.

   **HTML:**
   ```html
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather Cards</title>
     <style>
       /* --- CSS Variables --- */
       :root { --gap: 16px; }
       
       /* --- Reset --- */
       * { box-sizing: border-box; margin: 0; padding: 0; }
       
       body {
         font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
         background: #f0f2f5;
         color: #333;
         line-height: 1.4;
         overflow-x: hidden;
         min-height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
       }
       
       /* --- Grid --- */
       .weather-grid {
         width: 100%;
         max-width: 1280px;
         padding: var(--gap);
         display: grid;
         gap: var(--gap);
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
       }
       
       /* --- Cards --- */
       .weather-card {
         background: var(--gradient);
         border-radius: 16px;
         padding: 24px 20px;
         text-align: center;
         transition: transform 0.3s ease;
         position: relative;
       }
       .weather-card:hover {
         transform: translateY(-8px);
       }
       
       .weather-card.sunny { --gradient: linear-gradient(135deg, #fdaa3b, #d63031); }
       .weather-card.rainy { --gradient: linear-gradient(135deg, #4facfe, #00f2fe); }
       .weather-card.snowy { --gradient: linear-gradient(135deg, #e0e7ff, #a5f3fc); }
       .weather-card.stormy { --gradient: linear-gradient(135deg, #667db6, #a855f7); }
       
       .weather-card .city { font-size: 1.1rem; margin-bottom: 8px; }
       .weather-card .temp { font-size: 2rem; font-weight: bold; margin-bottom: 12px; }
       .weather-card .desc { font-size: 0.85rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
       
       /* --- Weather Icons --- */
       .weather-icon {
         width: 80px; height: 80px; margin: 0 auto 16px; position: relative;
       }
       
       /* Sun */
       .sun {
         width: 100%; height: 100%;
         border-radius: 50%;
         background: #fef3c7;
         position: relative;
         animation: rotateSun 22s linear infinite;
       }
       @keyframes rotateSun {
         from { transform: rotate(0deg); }
         to { transform: rotate(360deg); }
       }
       .sun::before, .sun::after {
         content: "";
         position: absolute;
         background: #fef3c7;
         border-radius: 2px;
       }
       .sun::before { width: 4px; height: 28px; left: 50%; top: 50%; transform: translateX(-50%) rotate(45deg); }
       .sun::after { width: 4px; height: 28px; left: 50%; top: 50%; transform: translateX(-50%) rotate(-45deg); }
       
       /* Cloud (used for rain/snow/storm) */
       .cloud {
         width: 60px; height: 30px; position: relative; margin: 0 auto 8px;
       }
       .cloud::before, .cloud::after {
         content: ""; position: absolute; background: inherit;
         border-radius: 50%;
       }
       .cloud::before { width: 30px; height: 30px; left: 0; top: 50%; transform: translateY(-50%); }
       .cloud::after { width: 30px; height: 30px; right: 0; top: 50%; transform: translateY(-50%); }
       
       /* Rain */
       .rain { width: 100%; height: 100%; position: relative; }
       .drop {
         position: absolute; width: 2px; height: 12px;
         background: #e3e6e8; border-radius: 2px 2px 0 0; top: -10px;
         animation: fallDrop 1s linear infinite;
       }
       @keyframes fallDrop {
         0% { transform: translateY(-10px); opacity: 0; }
         100% { transform: translateY(100px); opacity: 1; }
       }
       .rain .drop { left: 10%; }
       .rain .drop:nth-child(2) { left: 30%; animation-delay: 0.2s; }
       .rain .drop:nth-child(3) { left: 55%; animation-delay: 0.4s; }
       .rain .drop:nth-child(4) { left: 80%; animation-delay: 0.6s; }
       
       /* Snow */
       .snow { width: 100%; height: 100%; position: relative; }
       .flake {
         position: absolute; width: 8px; height: 8px;
         background: #fff; border-radius: 50%; top: -10px;
         animation: driftFlake 7s linear infinite;
       }
       @keyframes driftFlake {
         0% { transform: translateX(100%) translateY(-10px) rotate(0deg); }
         100% { transform: translateX(-100%) translateY(100px) rotate(360deg); }
       }
       .snow .flake { left: 15%; }
       .snow .flake:nth-child(2) { left: 50%; animation-delay: 1s; }
       .snow .flake:nth-child(3) { left: 80%; animation-delay: 2s; }
       .snow .flake:nth-child(4) { left: 35%; animation-delay: 3s; }
       
       /* Storm */
       .storm { width: 100%; height: 100%; position: relative; }
       .lightning {
         position: absolute; top: 40%; left: 50%; transform: translateX(-50%);
         width: 2px; height: 20px;
         background: #fef3c7; border-radius: 2px;
         opacity: 0; animation: flashLight 1.5s infinite;
       }
       @keyframes flashLight {
         0%, 100% { opacity: 0; }
         50% { opacity: 1; }
       }
       
       /* Reduced motion */
       @media (prefers-reduced-motion: reduce) {
         .sun, .drop, .flake, .lightning { animation: none; }
         .sun { transform: none; }
       }
     </style>
   </head>
   <body>
     <div class="weather-grid">
       <div class="weather-card sunny">
         <div class="weather-icon">
           <div class="sun"></div>
         </div>
         <h3 class="city">San Francisco</h3>
         <div class="temp">+18°C</div>
         <p class="desc">Clear skies</p>
       </div>
       
       <div class="weather-card rainy">
         <div class="weather-icon">
           <div class="cloud"></div>
           <div class="rain">
             <div class="drop"></div>
             <div class="drop"></div>
             <div class="drop"></div>
             <div class="drop"></div>
           </div>
         </div>
         <h3 class="city">Seattle</h3>
         <div class="temp">+12°C</div>
         <p class="desc">Gentle rain</p>
       </div>
       
       <div class="weather-card snowy">
         <div class="weather-icon">
           <div class="cloud"></div>
           <div class="snow">
             <div class="flake"></div>
             <div class="flake"></div>
             <div class="flake"></div>
             <div class="flake"></div>
           </div>
         </div>
         <h3 class="city">Reykjavik</h3>
         <div class="temp">-3°C</div>
         <p class="desc">Light snow</p>
       </div>
       
       <div class="weather-card stormy">
         <div class="weather-icon">
           <div class="cloud"></div>
           <div class="lightning"></div>
         </div>
         <h3 class="city">Chicago</h3>
         <div class="temp">+5°C</div>
         <p class="desc">Thunderstorms</p>
       </div>
     </div>
   </body>
   </html>
   ```

   Let's review the CSS for any mistakes:

   - `.rain .drop { left: 10%; }` then `nth-child` overrides `left`. In CSS, `nth-child` has the same specificity as a class selector, so if `.rain .drop:nth-child(2) { left: 30%; }` comes after `.rain .drop { left: 10%; }`, the `nth-child` rule will win for that specific child. But the base `.rain .drop { left: 10%; }` will apply to all drops, and then the `nth-child` rules will override `left` for those children. That's fine. However, I should ensure the `nth-child` rules are after the base rule. They are in my draft. But wait, `.rain .drop { left: 10%; }` sets left to 10% for all. Then `.rain .drop:nth-child(2) { left: 30%; animation-delay: 0.2s; }` sets left to 30% for the 2nd child. That works. But the `nth-child(2)` rule also has `animation-delay`, which will add to the delay. The first child has no delay declared, so it uses the default 0s (since `animation-delay` is not set, it's 0). Actually, in my base `.drop { animation: fallDrop 1s linear infinite; }`, I didn't set `animation-delay`, so it's 0. Then I set delays via `nth-child`. That's fine.

   - For snow: `.snow .flake { left: 15%; }` then `nth-child` overrides left. Same logic.

   - For the sun: `.sun::before` and `.sun::after` have `background: #fef3c7` which matches the sun's background. They are rays. The sun rotates via `animation: rotateSun 22s linear infinite;`. The rays are part of the sun, so they rotate. That's "rotating sun rays". Good.

   - Cloud: I used `.cloud::before` and `::after` to make a cloud shape. The background is `inherit`, which will take the color of the parent? Actually, `.cloud` doesn't have a background color set explicitly; it will be transparent by default, inheriting from the card? Wait, the card has a gradient background. The `.cloud` will be inside the card, so its background will be the card's gradient? Actually, `background: inherit` makes the pseudo-element inherit the background of the element itself? No, `background: inherit` inherits the background properties from the parent element. But `.cloud` is a `div` inside the card, which has a gradient background. So `.cloud::before` and `::after` will have that gradient as background, which might look weird. Better to set an explicit background color for the cloud, like `background: #fff` or a solid color that contrasts. But the requirement says "No images, no SVG, no icon fonts: every weather icon is built from HTML elements and pseudo-elements styled with CSS." It doesn't say the icons must be monochrome or match the gradient exactly. I can give the cloud a solid background, e.g., `background: rgba(255,255,255,0.8)` or just `#fff`. But for the sun, I used `#fef3c7` which matches the sunny gradient's yellow. For rain/snow/storm, I should pick colors that work. Let's set the cloud to have a solid background, e.g., `background: #fff` for sunny/rainy/snowy, and a darker one for stormy. Or I can just set `background: #fff` on the cloud and its pseudo-elements. But the cloud is inside the card which has a gradient; the cloud will overlay the gradient. A white cloud might look okay, but on the stormy card (dark purple gradient), a white cloud might still be visible. I'll set the cloud's background to `background: #fff` and the pseudo-elements similarly. Actually, to keep it simple and avoid inheritance issues, I'll give `.cloud` a `background: #fff` and make the pseudo-elements also `#fff`. But wait, the sun already uses `#fef3c7`. I'll make the cloud white. For the stormy card, the gradient is dark, so a white cloud might stand out, which is fine.

   Let's adjust: `.cloud { width: 60px; height: 30px; background: #fff; position: relative; margin: 0 auto 8px; border-radius: 8px; }` and then `::before`/`::after` can be smaller clouds or just omitted? Actually, the cloud shape with `::before`/`::after` is nice. I'll set the cloud's background to `transparent` and let the pseudo-elements have `background: #fff`. But `background: inherit` on pseudo-elements might inherit the card's gradient. Let's just set `.cloud { background: #fff; }` and `::before, ::after { background: #fff; }`. That way the cloud is opaque white. It will cover part of the gradient, but that's fine; it's an icon.

   Actually, I realize I can simplify the cloud: just a `<div class="cloud"></div>` with `border-radius` and `background: #fff`. No need for `::before`/`::after` if it complicates things. But the requirement says "every weather icon is built from HTML elements and pseudo-elements styled with CSS." It doesn't say *every* icon must use pseudo-elements, just that they are built from them. Using HTML elements + some pseudo-elements elsewhere is fine. The sun uses `::before`/`::after`. The rain/snow/storm cards can have the cloud as a plain `<div>` with `background: #fff` and `border-radius`. That still satisfies "built from HTML elements and pseudo-elements" because the overall set of weather icons includes pseudo-elements (the sun's rays). I think it's okay. But to be safe, I'll keep the `::before`/`::after` on the cloud but set explicit background colors.

   Let's re-evaluate: The constraint is "No images, no SVG, no icon fonts: every weather icon is built from HTML elements and pseudo-elements styled with CSS." This means I cannot use external images/SVG/font files. The icons must be generated via HTML tags and CSS pseudo-elements. Using a `<div>` with `border-radius` and `background` is an HTML element styled with CSS. Using `::before`/`::after` is pseudo-elements. As long as no external resources are used, it's fine. I'll keep the cloud as a simple `<div>` with `background: #fff` and `border-radius`, no pseudo-e needed, but the sun already has them. To be thorough, I'll make the cloud use `::before`/`::after` but set `background: #fff` explicitly.

   Let's simplify the cloud:
   ```css
   .cloud {
     width: 60px; height: 30px;
     background: #fff;
     border-radius: 50% 50% 0 0; /* or just round */
     position: relative; margin: 0 auto 8px;
   }
   ```
   Actually, a cloud shape can be just an oval with flat bottom. I'll do `border-radius: 20px;` for a rounded rect. Or two circles using `::before`/`::after`. I'll keep it simple: `.cloud { width: 60px; height: 30px; background: #fff; border-radius: 20px; position: relative; margin: 0 auto 8px; }`. That's an HTML element styled with CSS. It's fine.

   But to incorporate pseudo-elements more, I could have the sun's `::before`/`::after` and the cloud as a plain div. The requirement is met because the sun icon uses pseudo-elements, and all icons are HTML/CSS built. I think it's acceptable.

   Let's look at the exact wording: "No images, no SVG, no icon fonts: every weather icon is built from HTML elements and pseudo-elements styled with CSS." It could be interpreted as "each individual weather icon must be built from HTML elements and pseudo-elements." If so, then the rain drop `<div class="drop"></div>` is an HTML element, the snowflake `<div class="flake"></div>` is an HTML element, the lightning `<div class="lightning"></div>` is an HTML element, the sun `<div class="sun"></div>` is an HTML element, and they are styled with CSS. The pseudo-elements are additional. I think it's fine. But to be extra safe, I'll add `::before` or `::after` to each icon type. For rain, I can make the drop have `::after` for a tail. For snow, `::after` for a sparkle. For lightning, the bolt shape via `::before`/`::after`. For sun, already have rays.

   Let's add `::after` to `.drop` for a rain tail:
   ```css
   .drop { ... width: 2px; height: 12px; ... border-radius: 2px 2px 0 0; }
   .drop::after { content: ""; position: absolute; width: 2px; height: 6px; background: #e3e6e8; top: 12px; left: 0; border-radius: 0 0 2px 2px; }
   ```
   That creates a drop with a tail. Good.

   For snowflake, I can add `::before` for a center dot or something, but a simple hexagon or star? I'll keep snowflake as a circle with `::before` maybe not needed. I'll just leave it as a circle.

   For lightning, I'll use `::before`/`::after` as planned.

   For sun, already have.

   Let's redesign the drop with tail:
   ```css
   .drop {
     position: absolute; width: 2px; height: 12px;
     background: #e3e6e8; border-radius: 2px 2px 0 0; top: -10px;
     left: 50%; transform: translateX(-50%); /* center */
     animation: fallDrop 1s linear infinite;
   }
   .drop::after {
     content: ""; position: absolute; width: 2px; height: 6px;
     background: #e3e6e8; top: 12px; left: 0; border-radius: 0 0 2px 2px;
   }
   ```
   But if I set `left: 50%` and `transform: translateX(-50%)`, the `::after` positioned `absolute` with `left: 0` will be relative to the drop's container, so it'll be at the left edge of the drop, centered vertically? Actually, `::after` is `position: absolute;` without `top`/`bottom` specified, it defaults to `static` position? Wait, `position: absolute` takes it out of flow, and `left: 0` positions it at the left edge of the relatively positioned parent (`.drop`). I need to set `top` to vertically center the tail. Let's do `top: 50%; transform: translateY(-50%)` or just set specific `top`. I'll simplify: drop is a rect, `::after` is a smaller rect at the bottom. I'll set `.drop { position: absolute; width: 2px; height: 14px; background: #e3e6e8; border-radius: 2px; top: -10px; left: 50%; transform: translateX(-50); }` and `::after { content: ""; position: absolute; width: 4px; height: 6px; background: #e3e6e8; top: 12px; left: -1px; border-radius: 2px; }`. This might get fiddly. I'll just keep the drop as a simple rect without tail, or use a simple shape. The requirement doesn't specify detailed drops, just "falling rain drops". A simple rect with animation is fine.

   Given the complexity, I'll keep the drops as simple `<div>` with `background`, `border-radius`, and `animation`. I won't add `::after` to avoid positioning headaches, as long as the icons are built from HTML elements and CSS. The sun has `::before`/`::after`, which satisfies the "pseudo-elements" part for at least one icon, and all icons are HTML elements styled with CSS. I think it's acceptable.

   Let's finalize the code with clean, working CSS.

   I'll write the final HTML/CSS now.

   One more thing: the `prefers-reduced-motion` media query. I'll place it at the very end of the `<style>` block.

   Also, ensure the viewport meta tag is there.

   Let's produce the final code.

   I'll structure the CSS with groups and comments for clarity, but in the final output it's just `<style>...</style>`.

   Let's write the code carefully.

   ```html
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather Cards</title>
     <style>
       :root { --gap: 16px; }
       
       * { box-sizing: border-box; margin: 0; padding: 0; }
       
       body {
         font-family: system-ui, sans-serif;
         background: #f0f2f5;
         color: #333;
         line-height: 1.4;
         overflow-x: hidden;
         min-height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
       }
       
       .weather-grid {
         width: 100%;
         max-width: 1280px;
         padding: var(--gap);
         display: grid;
         gap: var(--gap);
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
       }
       
       .weather-card {
         background: var(--gradient);
         border-radius: 16px;
         padding: 24px 20px;
         text-align: center;
         transition: transform 0.3s ease;
         position: relative;
       }
       .weather-card:hover { transform: translateY(-8px); }
       
       .weather-card.sunny { --gradient: linear-gradient(135deg, #fdaa3b, #d63031); }
       .weather-card.rainy { --gradient: linear-gradient(135deg, #4facfe, #00f2fe); }
       .weather-card.snowy { --gradient: linear-gradient(135deg, #e0e7ff, #a5f3fc); }
       .weather-card.stormy { --gradient: linear-gradient(135deg, #667db6, #a855f7); }
       
       .weather-card .city { font-size: 1.1rem; margin-bottom: 8px; }
       .weather-card .temp { font-size: 2rem; font-weight: bold; margin-bottom: 12px; }
       .weather-card .desc { font-size: 0.85rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
       
       .weather-icon { width: 80px; height: 80px; margin: 0 auto 16px; position: relative; }
       
       /* --- Sunny: rotating sun rays --- */
       .sun {
         width: 100%; height: 100%;
         border-radius: 50%;
         background: #fef3c7;
         position: relative;
         animation: rotateSun 22s linear infinite;
       }
       @keyframes rotateSun {
         from { transform: rotate(0deg); }
         to { transform: rotate(360deg); }
       }
       .sun::before, .sun::after {
         content: ""; position: absolute; background: #fef3c7; border-radius: 2px;
       }
       .sun::before { width: 4px; height: 28px; left: 50%; top: 50%; transform: translateX(-50%) rotate(45deg); }
       .sun::after { width: 4px; height: 28px; left: 50%; top: 50%; transform: translateX(-50%) rotate(-45deg); }
       
       /* --- Rainy: falling rain drops --- */
       .rain { width: 100%; height: 100%; position: relative; }
       .drop {
         position: absolute; width: 2px; height: 14px;
         background: #e3e6e8; border-radius: 2px; top: -10px; left: 50%; transform: translateX(-50%);
         animation: fallDrop 1s linear infinite;
       }
       @keyframes fallDrop {
         0% { transform: translateY(-10px) translateX(-50%); opacity: 0; }
         100% { transform: translateY(100px) translateX(-50%); opacity: 1; }
       }
       .rain .drop { animation-delay: 0s; }
       .rain .drop:nth-child(2) { animation-delay: 0.2s; left: 30%; }
       .rain .drop:nth-child(3) { animation-delay: 0.4s; left: 55%; }
       .rain .drop:nth-child(4) { animation-delay: 0.6s; left: 80%; }
       
       /* --- Snowy: drifting snowflakes --- */
       .snow { width: 100%; height: 100%; position: relative; }
       .flake {
         position: absolute; width: 8px; height: 8px;
         background: #fff; border-radius: 50%; top: -10px;
         animation: driftFlake 7s linear infinite;
       }
       @keyframes driftFlake {
         0% { transform: translateX(100%) translateY(-10px) rotate(0deg); }
         100% { transform: translateX(-100%) translateY(100px) rotate(360deg); }
       }
       .snow .flake { left: 15%; }
       .snow .flake:nth-child(2) { left: 50%; animation-delay: 1s; }
       .snow .flake:nth-child(3) { left: 80%; animation-delay: 2s; }
       .snow .flake:nth-child(4) { left: 35%; animation-delay: 3s; }
       
       /* --- Stormy: flashing lightning --- */
       .storm { width: 100%; height: 100%; position: relative; }
       .lightning {
         position: absolute; top: 40%; left: 50%; transform: translateX(-50%);
         width: 2px; height: 20px;
         background: #fef3c7; border-radius: 2px;
         opacity: 0; animation: flashLight 1.5s infinite;
       }
       @keyframes flashLight {
         0%, 100% { opacity: 0; }
         50% { opacity: 1; }
       }
       
       /* --- Reduced motion --- */
       @media (prefers-reduced-motion: reduce) {
         .sun, .drop, .flake, .lightning { animation: none; }
         .sun { transform: none; }
       }
     </style>
   </head>
   <body>
     <div class="weather-grid">
       <div class="weather-card sunny">
         <div class="weather-icon"><div class="sun"></div></div>
         <h3 class="city">San Francisco</h3>
         <div class="temp">+18°C</div>
         <p class="desc">Clear skies</p>
       </div>
       
       <div class="weather-card rainy">
         <div class="weather-icon">
           <div class="rain">
             <div class="drop"></div>
             <div class="drop"></div>
             <div class="drop"></div>
             <div class="drop"></div>
           </div>
         </div>
         <h3 class="city">Seattle</h3>
         <div class="temp">+12°C</div>
         <p class="desc">Gentle rain</p>
       </div>
       
       <div class="weather-card snowy">
         <div class="weather-icon">
           <div class="snow">
             <div class="flake"></div>
             <div class="flake"></div>
             <div class="flake"></div>
             <div class="flake"></div>
           </div>
         </div>
         <h3 class="city">Reykjavik</h3>
         <div class="temp">-3°C</div>
         <p class="desc">Light snow</p>
       </div>
       
       <div class="weather-card stormy">
         <div class="weather-icon">
           <div class="lightning"></div>
         </div>
         <h3 class="city">Chicago</h3>
         <div class="temp">+5°C</div>
         <p class="desc">Thunderstorms</p>
       </div>
     </div>
   </body>
   </html>
   ```

   Wait, I have a problem: the `.rain .drop` rules for `left` and `animation-delay`. In my CSS, I have:
   ```css
   .rain .drop { animation-delay: 0s; } /* not explicitly written, but the base .drop has animation: fallDrop 1s linear infinite; with no delay, so 0s */
   .rain .drop:nth-child(2) { animation-delay: 0.2s; left: 30%; }
   .rain .drop:nth-child(3) { animation-delay: 0.4s; left: 55%; }
   .rain .drop:nth-child(4) { animation-delay: 0.6s; left: 80%; }
   ```
   But the base `.drop` rule has `left: 50%; transform: translateX(-50%);` and then the `nth-child` rules override `left` with specific percentages. However, the `nth-child` rules also set `left: 30%;` etc., which will override the `left: 50%` for those specific children. That's fine. But I also have `.rain .drop { animation-delay: 0s; }` which is redundant since default is 0. I'll remove it or keep it.

   Actually, there's a specificity issue: `.rain .drop { left: 50%; transform: translateX(-50%); }` has specificity 0,2,0 (two classes? actually `.rain` is one class, `.drop` is another, so specificity 1,0,0? Wait, `.rain .drop` is descendant selector, specificity is the sum of the two classes: 0,2,0? In CSS, an ID is 1,0,0, a class is 0,1,0, an element is 0,0,1. So `.rain .drop` has two classes, specificity 0,2,0. `.rain .drop:nth-child(2) { left: 30%; }` has `.rain` (0,1,0) and `:nth-child(2)` (0,0,1? actually `:nth-child` is a pseudo-class, specificity 0,1,0). So both have specificity 0,2,0. The one that appears later in the CSS wins. Since the `nth-child` rules are after the base `.rain .drop` rule, they will override `left` for those children. Good.

   But wait, the base `.drop` rule has `left: 50%; transform: translateX(-50%;`. The `nth-child` rules only set `left: 30%;` etc., they don't unset `transform: translateX(-50%)`. So the drops will still be centered horizontally via the transform, but their `left` percentage is set. Actually, if I set `left: 30%` and `transform: translateX(-50%)`, the element's left edge is at 30%, and then it's shifted left by 50% of its own width. That might not position it at 30% of the parent. I need to be careful. Typically, to position absolutely at a percentage, you set `left: X%` and `transform: none`, or you set `left: X%` and remove the transform. Since I want the drops to be at specific horizontal positions, I should set `left` and NOT have the `transform: translateX(-50%)` that centers it. Or I can set `left: X%` and keep the transform, but the transform will offset it.

   Let's rethink the rain drop positioning. I'll just use `left` percentage without the `transform: translateX(-50%)`. Or I'll set `left` and use `transform: translateX(0)` or just remove the centering transform.

   Simpler: I'll position drops by setting `left` directly, and for the base `.drop`, I'll set `position: absolute; width: 2px; height: 14px; background: #e3e6e8; border-radius: 2px; top: -10px; left: 50%;` but then override `left` in `nth-child` and also set `transform: none` or just not have the transform. Actually, I can just set `left` in the `nth-child` rules and not set `left` in the base `.drop`, and remove the `transform: translateX(-50%)` from the base. Let's do that.

   Revised rain drop CSS:
   ```css
   .drop {
     position: absolute; width: 2px; height: 14px;
     background: #e3e6e8; border-radius: 2px; top: -10px;
     left: 50%; /* will be overridden */
     transform: translateX(-50%);
     animation: fallDrop 1s linear infinite;
   }
   ```
   Actually, I realize I can just set `left` via the `nth-child` rules and not use `transform: translateX(-50%)` at all. I'll set `left` percentages directly, and the drops will be positioned at those percentages from the left edge of the parent `.rain`. I'll also need to center them vertically? The `top: -10px` already positions them just above the icon. I'll set `left` in the `nth-child` rules and remove the `transform` from the base, or set `transform: none`.

   Let's simplify completely:
   ```css
   .drop {
     position: absolute; width: 2px; height: 14px;
     background: #e3e6e8; border-radius: 2px; top: -10px;
     left: 10%; /* default, but will be overridden per child */
     animation: fallDrop 1s linear infinite;
   }
   .rain .drop:nth-child(1) { left: 10%; }
   .rain .drop:nth-child(2) { left: 30%; animation-delay: 0.2s; }
   .rain .drop:nth-child(3) { left: 55%; animation-delay: 0.4s; }
   .rain .drop:nth-child(4) { left: 80%; animation-delay: 0.6s; }
   ```
   But if I have `.drop { left: 10%; }` and then `.rain .drop:nth-child(1) { left: 10%; }`, they are the same. I can just set `left` only on the `nth-child` rules and not on the base, but then the base `left: 10%` would apply to all, and the `nth-child` rules would override for specific children. Actually, since the `nth-child` rules have the same specificity as the base (both are descendant + class/pseudo), the later rule wins. I'll put the `nth-child` rules after the base, and set `left` only there. I'll remove `left` from the base `.drop` entirely, or set `left: 50%` and then override. To avoid confusion, I'll just set `left` in the `nth-child` rules and not in the base, and I'll also set `transform: translateX(0)` or just leave no transform. But the drops need to be centered horizontally? Not necessarily; they can be at various positions. The `top: -10px` is fine. I'll set `left` percentages in the `nth-child` rules. The base `.drop` will have no `left`, so it defaults to `auto`, which for absolutely positioned elements is the static position? Actually, if `left` is `auto`, it stays where it would be in flow, but absolutely positioned elements with `left: auto` have `left` set to 0? No, the spec says absolutely positioned elements with `left: auto` have `left` set to 0? Wait, the CSS spec: "If the 'left' property has the value 'auto', the used value is the static position. However, the static position is the position of the element if it were in the normal flow." For absolutely positioned elements, if `left` is `auto`, it's set to 0? Actually, I recall that for `position: absolute`, if `left` is `auto`, the used value is the static position's left, which for an element that is otherwise out of flow might be 0? I'm not 100% sure. To be safe, I'll always set `left` explicitly.

   Let's just set `left` on the base `.drop` to `0`, and then override in `nth-child`. Or better: set `left` only in the `nth-child` rules, and set `left: 0` in the base, but then the `nth-child` will override. I'll do:

   ```css
   .drop {
     position: absolute; width: 2px; height: 14px;
     background: #e3e6e8; border-radius: 2px; top: -10px;
     left: 0; /* base, will be overridden */
     animation: fallDrop 1s linear infinite;
   }
   .rain .drop:nth-child(1) { left: 10%; animation-delay: 0s; }
   .rain .drop:nth-child(2) { left: 30%; animation-delay: 0.2s; }
   .rain .drop:nth-child(3) { left: 55%; animation-delay: 0.4s; }
   .rain .drop:nth-child(4) { left: 80%; animation-delay: 0.6s; }
   ```

   This will work because the `nth-child` rules come after and have same specificity, so `left` will be the overridden value.

   Same for snowflakes.

   Let's apply this pattern to snowflakes too.

   Now, the lightning: I have `.lightning { position: absolute; top: 40%; left: 50%; transform: translateX(-50%); ... }`. That centers it horizontally. Fine.

   The sun: `.sun { ... animation: rotateSun 22s linear infinite; }`. The `::before`/`::after` rays rotate with it. Good.

   Now, let's review the whole file for any `<script>` tag - none.

   No images, no SVG, no icon fonts - all elements are HTML divs, pseudo-elements are `::before`/`::after`.

   Each card has: animated icon, city name, temperature, description. ✅

   Background gradients matching weather. ✅

   Responsive grid 4 per row on desktop, stacked on mobile. ✅ (using `auto-fit` minmax).

   Hover lift. ✅.

   Smooth infinite animations with keyframes. ✅.

   prefers-reduced-motion. ✅.

   No external requests. ✅.

   Inline CSS/JS? CSS inline in `<style>`, no JS. ✅.

   Zero errors in Chrome console? I'll ensure all properties are valid. I'll double-check vendor prefixes not needed. CSS grid `auto-fit` is fine. `border-radius: 2px` is fine. `transform` is fine. `animation` is fine.

   One thing: the `::before`/`::after` on `.sun` have `background: #fef3c7`. The sun's background is also `#fef3c7`. So the rays will be the same color as the sun, which might make them invisible if they overlap perfectly? Actually, they are rotated via `transform: translateX(-50%) rotate(45deg)` etc., and the sun is a circle. The rays will extend from the center outwards. Since they have the same background color as the sun, they might blend in, but because they are rotated and have `border-radius: 2px`, they will be visible as thin rotated rectangles against the circle? Wait, the sun is a circle with background `#fef3c7`. The `::before` and `::after` are also `#fef3c7`. So they will be the same color as the sun, meaning they won't create a contrasting sun shape; they'll just be thin pieces of the same color, essentially invisible because they merge with the sun background. That's a problem! I need the rays to be a different color, or at least have some opacity, or I need to make the sun a different base color and the rays a different color.

   The requirement: "Each card shows an animated icon (rotating sun rays...)". The sun icon should look like a sun with rays. If the rays are the same yellow as the sun, they won't be visible as rays; they'll just be part of the sun. I need to differentiate them.

   Options:
   1. Make the sun a different color (e.g., orange) and rays yellow.
   2. Make the rays semi-transparent or with a different border color.
   3. Use `box-shadow` or `border` instead of background for rays.

   Let's make the sun a central circle of one color, and rays of another. For sunny card, the gradient is `#fdaa3b` to `#d63031` (orange-red). I can set the sun's background to `#fef3c7` (pale yellow) and rays to `#fdaa3b` (orange). Or I can set the sun's background to match the gradient's start, and rays to a darker shade.

   Let's set `.sun { background: #fef3c7; }` and `::before, ::after { background: #fdaa3b; }`. That will make rays orange, sun pale yellow. Visually distinct.

   But the card's background gradient is also orange-red. The sun icon will be on top. That's fine.

   Let's update: `.sun::before, .sun::after { background: #fdaa3b; }`. And maybe add some `width` adjustments.

   Actually, I can make the sun's background transparent and the rays colored, but then the sun shape is lost. Better to have a center circle and rays.

   Let's do: `.sun { width: 80px; height: 80px; border-radius: 50%; background: #fef3c7; position: relative; }`
   `::before, ::after { content: ""; position: absolute; background: #fdaa3b; border-radius: 2px; }`
   `::before { width: 4px; height: 30px; left: 50%; top: 50%; transform: translateX(-50%) rotate(45deg); }`
   `::after { width: 4px; height: 30px; left: 50%; top: 50%; transform: translateX(-50%) rotate(-45deg); }`

   This will give a sun with orange rays on a pale yellow center. The sun will look like it has rays. Good.

   For the rainy, snowy, stormy icons, I need to ensure they look distinct and animated.

   **Rainy:** `.drop` with `background: #e3e6e8` (light gray). On the rainy card gradient `#4facfe` to `#00f2fe` (blue), the gray drops will be visible. Good.

   **Snowy:** `.flake` with `background: #fff` (white). On the snowy gradient `#e0e7ff` to `#a5f3fc` (light blue-white), the white flakes will be visible, maybe some will blend, but with `top: -10px` and falling, they'll be seen. Good.

   **Stormy:** `.lightning` with `background: #fef3c7` (pale yellow) on the stormy gradient `#667db6` to `#a855f7` (purple). The lightning flash will be visible when it flashes. Good.

   Let's finalize the sun rays color. I'll use `#fdaa3b` for rays.

   Now, check the `prefers-reduced-motion` media query. I have `.sun, .drop, .flake, .lightning { animation: none; }`. I also have `.sun { transform: none; }` to stop the rotation. Good.

   One more thing: the grid's `max-width: 1280px` and `width: 100%`. The viewport is 1280×800, so it fits perfectly. For 375px, `auto-fit` with `minmax(240px, 1fr)` will produce 1 column, since 240px * 2 + 16px * 3 = 480 + 48 = 528 > 375. So 1 card per row, stacked. No horizontal scroll because `overflow-x: hidden` on body, and grid width is 100% of parent, which is 100% of viewport.

   I think it's solid.

   Let's write the final code carefully, ensuring all CSS is valid and the HTML structure matches.

   I'll now produce the final answer with the fenced code block `html`.