Nemotron 3 Ultra (free)

We need to create four weather cards with HTML and CSS only. No JavaScript, no images, no SVG, no icon fonts. Must use HTML elements and pseudo-elements for icons. Each card: animated icon (rotating sun rays, falling rain drops, drifting snowflakes, flashing lightning), city name, temperature, short description. Each card has its own background gradient matching 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.

We must output a single HTML file with inline CSS. No script tags. Ensure no horizontal scrollbar. Viewport 1280x800, adapt down to 375px.

We need to create the icons using CSS shapes and pseudo-elements.

Let's plan the HTML structure:

A container div with class "weather-grid". Inside four cards, each with class "weather-card" and specific weather class (sunny, rainy, snowy, stormy). Each card contains:
- icon container (div with class "icon")
- city name (h2 or div)
- temperature (div with class "temp")
- description (div with class "desc")

We'll use pseudo-elements for sun rays, rain drops, snowflakes, lightning.

Animations:
- Sunny: rotating sun rays (maybe a central circle with rays rotating). Could have a circle and rays as pseudo-elements that rotate continuously.
- Rainy: falling rain drops. Could create multiple drop elements (maybe using pseudo-elements on a container, or multiple child elements). Since no JS, we can create several drop elements in HTML (like 5 drops) and animate them falling with different delays.
- Snowy: drifting snowflakes. Similar to rain but with horizontal drift.
- Stormy: flashing lightning. Could have a lightning bolt shape (using CSS triangles) that flashes (opacity animation).

We must respect prefers-reduced-motion: wrap animations in @media (prefers-reduced-motion: reduce) { ... } to stop or simplify animations.

Hover effect: card lifts up (transform: translateY(-8px) maybe with box-shadow).

Responsive grid: use CSS grid: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); but requirement: 4 per row on desktop, stacked on mobile. So we can set grid-template-columns: repeat(4, 1fr) for larger screens, and 1 column for small. Use media queries.

We'll need to ensure no horizontal scrollbar: set box-sizing: border-box, max-width: 100%, etc.

Now, let's design each icon.

Sunny: A central circle (maybe using a div with border-radius 50%) and rays. Could use ::before and ::after for rays, but need multiple rays. Could create multiple child elements for rays (like 8 rays) and rotate the whole set. Simpler: create a container with class "sun" and inside multiple ray elements (divs) positioned absolute, then rotate the container. But we need infinite rotation. Use @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }.

But we can't use JS, so we need to write HTML for rays. Let's do: <div class="icon sunny"><div class="sun"><div class="rays"></div></div></div>. Actually, we can create rays as pseudo-elements? But pseudo-elements are only two per element. Could use multiple elements. Since we have four cards, we can afford a few extra divs.

Better: For sunny, create a div with class "sun" and use ::before and ::after for two rays, but we need more. Could use a single element with multiple box-shadows to create rays? Or use a rotating gradient? Simpler: create 8 ray divs inside the sun container. That's okay.

Rainy: Create a container with several drop divs (maybe 5). Each drop is a small element with animation falling.

Snowy: Similar, but snowflakes could be simple circles or asterisks? But we can't use icon fonts. Could use CSS to create a snowflake shape using pseudo-elements? Might be complex. Simpler: use small white circles (border-radius 50%) and animate them falling with horizontal drift.

Stormy: Lightning bolt shape. Could create a polygon using CSS clip-path or borders. Simpler: use a div with a triangular shape and animate opacity flashing.

We'll need to keep HTML clean.

Let's outline HTML:

<div class="weather-grid">
  <article class="weather-card sunny">
    <div class="icon">
      <div class="sun">
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
      </div>
    </div>
    <h2 class="city">Los Angeles</h2>
    <div class="temp">28°C</div>
    <p class="desc">Sunny</p>
  </article>
  <article class="weather-card rainy">
    <div class="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 class="drop"></div>
      </div>
    </div>
    <h2 class="city">London</h2>
    <div class="temp">14°C</div>
    <p class="desc">Rainy</p>
  </article>
  <article class="weather-card snowy">
    <div class="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 class="flake"></div>
      </div>
    </div>
    <h2 class="city">Moscow</h2>
    <div class="temp">-5°C</div>
    <p class="desc">Snowy</p>
  </article>
  <article class="weather-card stormy">
    <div class="icon">
      <div class="cloud"></div>
      <div class="lightning"></div>
    </div>
    <h2 class="city">Tokyo</h2>
    <div class="temp">22°C</div>
    <p class="desc">Stormy</p>
  </article>
</div>

Now CSS:

General styles:
- Reset box-sizing, margin, padding.
- Body: min-height: 100vh, display flex, align-items center, justify-content center, background maybe neutral.
- .weather-grid: display grid, gap: 20px, padding: 20px, max-width: 1200px, width: 100%.
- Grid columns: for desktop (>= 1024px) 4 columns; for tablet maybe 2; for mobile 1. Use media queries.

Card:
- .weather-card: background: gradient per weather, border-radius: 16px, padding: 24px, color: white, text-align: center, box-shadow: 0 4px 12px rgba(0,0,0,0.1), transition: transform 0.3s, box-shadow 0.3s.
- Hover: transform: translateY(-8px), box-shadow: 0 12px 24px rgba(0,0,0,0.2).

Icon container: position relative, height: 120px, margin-bottom: 16px.

Sunny icon:
- .sunny .sun: position absolute, top 50%, left 50%, transform translate(-50%, -50%), width 60px, height 60px, background: radial gradient (yellow to orange), border-radius 50%, box-shadow: 0 0 20px rgba(255,255,0,0.5).
- .sunny .ray: position absolute, top 50%, left 50%, width 4px, height 40px, background: gold, transform-origin: center bottom, border-radius 2px. We'll position each ray with different rotation using nth-child and transform: rotate(45deg * n) translateY(-30px) maybe. Then animate the .sun container rotation? Actually easier: animate the .sun container rotation, and rays are fixed relative to it. So .sunny .sun { animation: rotate 20s linear infinite; } and rays are children, they rotate with it.

But we need to position rays around the center. We can set each ray with transform: rotate(calc(45deg * var(--i))) translateY(-50px) maybe. But we can't use CSS variables for each ray without inline style. We can use nth-child with fixed rotations: :nth-child(1) { transform: rotate(0deg) translateY(-50px); } etc. But we have 8 rays, so 45deg increments.

We'll define .ray with position absolute, top 50%, left 50%, width 4px, height 50px, background: #ffd700, transform-origin: center bottom, border-radius 2px. Then use nth-child to set rotation.

Animation: @keyframes rotate { to { transform: rotate(360deg); } } Apply to .sun.

Rainy icon:
- .cloud: create a cloud shape using CSS. Could use a div with border-radius and pseudo-elements for puffs. Simpler: use a single div with background: white, border-radius, and ::before/::after for extra puffs. But we can just make a simple cloud shape: width 80px, height 40px, background: #fff, border-radius 20px, position relative. Then ::before and ::after as circles.
- .rain container: position absolute, bottom 0, left 0, right 0, height maybe 80px. Drops: .drop: width 4px, height 12px, background: #4da6ff, border-radius 2px, position absolute, animation: fall 1s linear infinite. Each drop with different left and animation-delay.

We'll need to position drops at different horizontal positions. Use nth-child for left and delay.

Snowy icon:
- Similar cloud, but .snow container with .flake: width 8px, height 8px, background: white, border-radius 50%, animation: snowFall 3s linear infinite. With horizontal drift using transform: translateX(...) in keyframes.

Stormy icon:
- Cloud similar.
- .lightning: create a zigzag shape. Could use a polygon with clip-path. Simpler: use a div with width 0, height 0, border-left, border-right, border-bottom to make a triangle, but lightning is more complex. Could use two triangles to form a bolt. Or use a simple yellow rectangle with a clip-path: polygon(50% 0%, 60% 40%, 40% 40%, 50% 100%, 40% 60%, 60% 60%). That's a lightning shape. We'll animate opacity flashing.

We'll define @keyframes flash { 0%, 100% { opacity: 0; } 10%, 30% { opacity: 1; } 40%, 60% { opacity: 0; } 70%, 90% { opacity: 1; } } and apply to .lightning with animation: flash 3s infinite.

Now, backgrounds gradients:
- Sunny: linear-gradient(135deg, #f6d365 0%, #fda085 100%)
- Rainy: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%)
- Snowy: linear-gradient(135deg, #e6dada 0%, #274046 100%)
- Stormy: linear-gradient(135deg, #232526 0%, #414345 100%)

Text colors: white for all.

Responsive grid:
@media (min-width: 1024px) { .weather-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) and (max-width: 1023px) { .weather-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .weather-grid { grid-template-columns: 1fr; } }

prefers-reduced-motion:
@media (prefers-reduced-motion: reduce) {
  .sun, .drop, .flake, .lightning { animation: none !important; }
  .weather-card:hover { transform: none; } /* maybe keep hover but no animation */
}

But we need to keep hover lift? That's a transition, not an animation. It's okay.

Now, we must ensure no horizontal scrollbar: set html, body { overflow-x: hidden; }.

Also, ensure the icons are centered and sized appropriately.

Let's write the CSS in detail.

We'll need to define the cloud shape for rainy, snowy, stormy. Could create a common .cloud class.

.cloud {
  position: absolute;
  bottom: 30px; /* adjust */
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 40px;
  background: #fff;
  border-radius: 20px;
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud::before {
  width: 40px;
  height: 40px;
  top: -20px;
  left: 10px;
}
.cloud::after {
  width: 50px;
  height: 50px;
  top: -25px;
  right: 10px;
}

But the cloud might be too big for the icon container. We'll adjust.

Icon container height 120px. Cloud bottom at maybe 20px from bottom? Let's set .icon { position: relative; height: 120px; }.

For sunny, the sun is centered.

For rainy/snowy/stormy, cloud centered horizontally, positioned lower so rain/snow falls below.

Rain drops: .rain { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; } Drops start from cloud bottom? Actually cloud bottom at maybe 40px from bottom of icon? Let's set cloud bottom: 40px (so cloud sits above the rain area). Then rain container from cloud bottom to bottom of icon.

Better: Use absolute positioning for drops relative to .icon. Drops start at top of rain area (just below cloud). We'll set each drop with top: 60px (relative to icon) and animate to bottom.

Let's define keyframes:

@keyframes fall {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(80px); opacity: 0; }
}

But we need infinite, so drops reset. Use animation: fall 1s linear infinite. With different delays.

For snow: @keyframes snowFall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(20px, 100px) rotate(360deg); opacity: 0; }
}

Lightning flash: @keyframes flash {
  0%, 100% { opacity: 0; }
  10%, 30% { opacity: 1; }
  40%, 60% { opacity: 0; }
  70%, 90% { opacity: 1; }
}

Sun rotation: @keyframes rotate { to { transform: rotate(360deg); } }

Now, we need to apply animations only if not reduced motion. We'll use @media (prefers-reduced-motion: reduce) to set animation: none.

But note: The sun rotation is on .sun, which also has transform for centering. We'll need to combine transforms. Use animation on .sun with transform: rotate(360deg) but the centering transform is translate(-50%, -50%). We can do: .sun { transform: translate(-50%, -50%); animation: rotate 20s linear infinite; } But animation will override transform? Actually, animation transforms are applied after the element's transform? In CSS, the transform property is overridden by animation. To combine, we can animate a wrapper or use transform-origin. Better: Put the sun in a wrapper that is centered, and rotate the wrapper. Or use animation on the sun with keyframes that include the translate. Let's do: .sun { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; background: ...; border-radius: 50%; animation: rotate 20s linear infinite; transform-origin: center center; } And in keyframes, we rotate only: @keyframes rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } That works.

Similarly for rays: they are children of .sun, so they rotate with it. But we need to position rays relative to sun center. We can set .ray { position: absolute; top: 50%; left: 50%; width: 4px; height: 50px; background: #ffd700; transform-origin: center bottom; border-radius: 2px; } Then each ray gets a rotation transform: .ray:nth-child(1) { transform: rotate(0deg) translateY(-55px); } etc. But since they are inside .sun which rotates, the rays will rotate around the sun center. However, the transform on .ray will be combined with parent's transform? Actually, transforms are not inherited; the child's transform is relative to its own coordinate system. The parent's rotation will rotate the entire child coordinate system. So if we set .ray with a fixed rotation (like 0deg) and translateY, then when parent rotates, the ray will rotate around the parent's center. That's perfect. So we can set each ray with a different initial rotation? Wait, if we want 8 rays evenly spaced, we can just set them all with the same transform (e.g., translateY(-55px)) and then rotate the parent. But then they would all overlap. We need them to be at different angles initially. So we need to give each ray a different rotation transform relative to the parent. But if the parent rotates, the child's rotation is added? Actually, the child's transform is applied in its local coordinate system, which is already rotated by the parent. So if we set .ray:nth-child(1) { transform: rotate(0deg) translateY(-55px); } and .ray:nth-child(2) { transform: rotate(45deg) translateY(-55px); } etc., then when the parent rotates by 360deg, each ray will maintain its relative angle. That works.

But we have 8 rays, so 45deg increments.

Now, we need to create 8 ray divs in HTML. That's fine.

Rain drops: We'll create 5 drops. Each drop: position absolute, left: some percentage, top: starting point (maybe 60px from top of icon). Animation: fall 1s linear infinite, with different delays.

We'll set .rain { position: absolute; top: 60px; left: 0; right: 0; bottom: 0; } Actually, we can just position drops relative to .icon.

Let's define .drop { position: absolute; width: 4px; height: 12px; background: #4da6ff; border-radius: 2px; animation: fall 1s linear infinite; }

Keyframes fall: 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(80px); opacity: 0; }

We'll set each drop with different left and animation-delay.

Similarly for snowflakes: .flake { position: absolute; width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: snowFall 3s linear infinite; }

Keyframes snowFall: 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(20px, 100px) rotate(360deg); opacity: 0; }

Lightning: .lightning { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 20px; height: 60px; background: #ffeb3b; clip-path: polygon(50% 0%, 60% 40%, 40% 40%, 50% 100%, 40% 60%, 60% 60%); animation: flash 3s infinite; }

But clip-path polygon might be complex. Let's design a simple lightning bolt shape using CSS borders? Alternatively, use a div with a gradient? But clip-path is fine and supported.

We'll need to ensure the lightning is centered horizontally under the cloud.

Now, let's write the full HTML and CSS.

We'll also add a meta viewport tag.

We must not include any script tags.

Let's code.

Potential issues: The grid might not be exactly 4 per row on desktop if the container max-width is 1200px and gap 20px. That's fine.

We'll set .weather-grid { display: grid; gap: 20px; padding: 20px; max-width: 1200px; margin: 0 auto; }

Media queries for grid columns.

Now, ensure the cards have consistent height? Not necessary.

Hover lift: .weather-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,0.2); }

Transition: .weather-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }

Now, prefers-reduced-motion: We'll disable animations on .sun, .drop, .flake, .lightning. Also maybe disable hover transform? But hover transform is a transition, not an animation. It's okay to keep.

We'll add:

@media (prefers-reduced-motion: reduce) {
  .sun, .drop, .flake, .lightning {
    animation: none !important;
  }
  /* Also stop the sun rotation if it's on .sun */
  .sun {
    animation: none;
  }
}

But note: The sun rotation is on .sun, so that's covered.

Now, we need to ensure the sun rays are not animated separately; they rotate with .sun.

Now, let's write the HTML with all the necessary divs.

We'll also add a title? Not needed.

Now, let's produce the final code block.

We'll double-check for any errors.

- No external resources.
- No JavaScript.
- All CSS inline.
- Responsive.
- Animations with keyframes.
- prefers-reduced-motion respected.

Let's write.