Models 44

Muse Ember

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
23.4 s
Cost
$0.0076
Output tokens
15,196
Spent thinking
7,993 tokens
Speed
719 tok/s
Console errors
0
First token after
2.3 s
First visible text after
16.4 s
Prompt tokens
518
Code size
21.1 KB
Finish reason
stop
Served by
Meta
Model id
meta/muse-ember
Reasoning sent
model default
Max output
943,718 tokens
Generated
Nov 12, 2026

What it was asked

The prompt
Create a set of four animated weather cards (sunny, rainy, snowy, stormy), made with HTML and CSS only. Requirements: - 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. - 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.
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- 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.
- 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.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 448 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Weather Cards — Sunny, Rainy, Snowy, Stormy</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  :root{
    --ink:#0f172a;
    --muted:#94a3b8;
    --card-shadow:0 14px 34px rgba(0,0,0,.28);
    --card-shadow-hover:0 30px 56px rgba(0,0,0,.42);
  }
  html{scroll-behavior:smooth}
  body{
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:
      radial-gradient(900px 520px at 12% -10%, rgba(56,189,248,.22), transparent 60%),
      radial-gradient(800px 480px at 92% 0%, rgba(253,224,71,.16), transparent 55%),
      radial-gradient(700px 500px at 85% 100%, rgba(167,139,250,.18), transparent 60%),
      linear-gradient(180deg,#0b1220 0%,#101b30 55%,#0b1220 100%);
    color:#fff;
    min-height:100vh;
    padding:34px 24px 26px;
    -webkit-font-smoothing:antialiased;
  }
  .page{max-width:1280px;margin:0 auto}

  /* HEADER */
  header{
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:26px;
  }
  .brand{display:flex;align-items:center;gap:13px}
  .logo{
    width:48px;height:48px;border-radius:15px;flex:0 0 48px;position:relative;
    background:linear-gradient(135deg,#ffd93d,#ff8a00);
    box-shadow:0 10px 22px rgba(255,160,40,.35), inset 0 1px 0 rgba(255,255,255,.6);
  }
  .logo::before{
    content:"";position:absolute;width:21px;height:21px;border-radius:50%;background:#fff7d6;
    top:13px;left:13px;box-shadow:0 0 0 5px rgba(255,255,255,.28), 0 0 16px rgba(255,255,255,.8);
  }
  .logo::after{
    content:"";position:absolute;width:26px;height:10px;border-radius:999px;background:rgba(255,255,255,.95);
    bottom:9px;left:7px;box-shadow:12px -4px 0 -2px rgba(255,255,255,.95);
  }
  .brand h1{font-size:15px;letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
  .brand p{font-size:12.5px;color:var(--muted);margin-top:3px}
  .live{
    display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.04em;
    padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);color:#e2e8f0;
  }
  .live-dot{width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.18);animation:pulseDot 2s ease-in-out infinite}
  @keyframes pulseDot{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

  /* HERO */
  .hero{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:24px}
  .hero h2{font-size:clamp(32px,4.2vw,48px);line-height:.98;letter-spacing:-.04em;font-weight:900;max-width:620px}
  .hero h2 em{font-style:normal;color:#ffd93d}
  .hero-right{max-width:430px}
  .hero-right p{color:#b6c2d6;font-size:15px;line-height:1.65}
  .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
  .tag{
    font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#e2e8f0;
  }
  .tag-yellow{background:#ffd93d;color:#422006;border-color:#ffd93d}

  /* GRID */
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}

  /* CARDS */
  .card{
    position:relative;overflow:hidden;border-radius:26px;padding:20px 20px 18px;min-height:398px;
    display:flex;flex-direction:column;color:#fff;
    box-shadow:var(--card-shadow), inset 0 1px 0 rgba(255,255,255,.38);
    transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
  }
  .card::before{
    content:"";position:absolute;width:190px;height:190px;border-radius:50%;
    background:rgba(255,255,255,.18);top:-78px;right:-68px;filter:blur(2px);pointer-events:none;
  }
  .card::after{
    content:"";position:absolute;width:120px;height:120px;border-radius:50%;
    background:rgba(255,255,255,.10);bottom:-52px;left:-42px;pointer-events:none;
  }
  .card:hover,.card:focus-visible{transform:translateY(-12px) scale(1.015);box-shadow:var(--card-shadow-hover), inset 0 1px 0 rgba(255,255,255,.5);outline:none}
  .card:active{transform:translateY(-6px) scale(1.01)}

  .card-sunny{background:linear-gradient(165deg,#ff7a18 0%,#ffa62b 48%,#ffc93c 100%);text-shadow:0 2px 10px rgba(120,53,0,.18)}
  .card-rainy{background:linear-gradient(165deg,#2e5a88 0%,#3d7ac2 52%,#62a6e8 100%)}
  .card-snowy{background:linear-gradient(165deg,#8fb8e8 0%,#b9d6f2 48%,#eaf4ff 100%);color:#17365d;text-shadow:none}
  .card-stormy{background:linear-gradient(165deg,#1e293b 0%,#334155 45%,#5b4a6e 100%)}

  .card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:3}
  .location{font-size:13px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
  .badge{
    font-size:11px;font-weight:800;letter-spacing:.03em;padding:6px 10px;border-radius:999px;white-space:nowrap;
    background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.30);backdrop-filter:blur(6px);
  }
  .card-snowy .badge{background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.8);color:#1e3a5f}

  .icon-wrap{height:168px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;margin:4px 0 2px}

  .temp-row{display:flex;align-items:flex-start;gap:6px;position:relative;z-index:3}
  .temp{font-size:58px;font-weight:900;line-height:.9;letter-spacing:-.05em}
  .celsius{font-size:23px;font-weight:900;margin-top:6px;opacity:.92}
  .feels{margin-left:auto;text-align:right;font-size:11.5px;line-height:1.45;opacity:.95;padding-top:4px}
  .feels strong{display:block;font-size:16px;letter-spacing:-.01em}
  .desc{font-size:14px;line-height:1.55;opacity:.97;margin:11px 0 16px;position:relative;z-index:3;min-height:44px}

  .meta{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;z-index:3}
  .meta-item{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24);border-radius:14px;padding:9px 8px;text-align:center;backdrop-filter:blur(4px)}
  .card-snowy .meta-item{background:rgba(255,255,255,.58);border-color:rgba(255,255,255,.85)}
  .meta-label{display:block;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:.82;margin-bottom:4px}
  .meta strong{font-size:13px;letter-spacing:-.01em}

  footer{
    display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px;
  }
  .foot-pill{
    font-size:12px;font-weight:700;color:#cbd5e1;padding:9px 13px;border-radius:999px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  }
  .foot-pill b{color:#fff}

  /* ===== SUNNY ICON ===== */
  .sun-scene{position:relative;width:142px;height:142px;display:flex;align-items:center;justify-content:center}
  .sun-glow{
    position:absolute;width:116px;height:116px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,226,80,.72),transparent 66%);
    animation:glowPulse 3.2s ease-in-out infinite;
  }
  @keyframes glowPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.14);opacity:1}}
  .sun-core{
    position:relative;width:68px;height:68px;border-radius:50%;z-index:2;
    background:radial-gradient(circle at 35% 32%,#fff7ae,#ffd93d 55%,#ff9f1a);
    box-shadow:0 0 30px rgba(255,205,60,.95), inset -6px -7px 14px rgba(255,140,0,.35);
    animation:sunPulse 3.2s ease-in-out infinite;
  }
  @keyframes sunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
  .sun-rays{position:absolute;width:128px;height:128px;animation:spin 26s linear infinite;z-index:1}
  @keyframes spin{to{transform:rotate(360deg)}}
  .sun-rays span{
    position:absolute;left:50%;top:50%;width:7px;height:22px;border-radius:999px;
    background:linear-gradient(to top,#ffcf3f,#ffe97a);box-shadow:0 0 9px rgba(255,214,64,.9);
  }
  .sun-rays span:nth-child(1){transform:translate(-50%,-50%) rotate(0deg) translateY(-57px)}
  .sun-rays span:nth-child(2){transform:translate(-50%,-50%) rotate(45deg) translateY(-57px)}
  .sun-rays span:nth-child(3){transform:translate(-50%,-50%) rotate(90deg) translateY(-57px)}
  .sun-rays span:nth-child(4){transform:translate(-50%,-50%) rotate(135deg) translateY(-57px)}
  .sun-rays span:nth-child(5){transform:translate(-50%,-50%) rotate(180deg) translateY(-57px)}
  .sun-rays span:nth-child(6){transform:translate(-50%,-50%) rotate(225deg) translateY(-57px)}
  .sun-rays span:nth-child(7){transform:translate(-50%,-50%) rotate(270deg) translateY(-57px)}
  .sun-rays span:nth-child(8){transform:translate(-50%,-50%) rotate(315deg) translateY(-57px)}
  .card-sunny:hover .sun-rays{animation-duration:9s}
  .card-sunny:hover .sun-core{animation-duration:1.4s}

  .mini-cloud{
    position:absolute;width:64px;height:20px;border-radius:999px;background:rgba(255,255,255,.92);
    top:10px;left:-74px;animation:driftAcross 11s linear infinite;z-index:0;opacity:.95;
  }
  .mini-cloud::before{content:"";position:absolute;width:28px;height:28px;border-radius:50%;background:inherit;top:-14px;left:12px}
  .mini-cloud::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:inherit;top:-9px;right:10px}
  .mini-cloud.m2{top:34px;animation-delay:-5.5s;transform:scale(.72);opacity:.6}
  @keyframes driftAcross{to{transform:translateX(400px)}}

  /* ===== CLOUD BASE ===== */
  .cloud-scene{position:relative;width:162px;height:142px}
  .cloud{
    position:absolute;left:50%;margin-left:-56px;top:20px;width:112px;height:38px;border-radius:999px;background:#fff;
    box-shadow:0 10px 22px rgba(15,23,42,.16);z-index:3;animation:floatY 4s ease-in-out infinite;
  }
  .cloud::before{content:"";position:absolute;width:54px;height:54px;border-radius:50%;background:#fff;top:-28px;left:18px}
  .cloud::after{content:"";position:absolute;width:38px;height:38px;border-radius:50%;background:#fff;top:-18px;right:16px}
  .cloud-rain{background:#e6f0ff}.cloud-rain::before,.cloud-rain::after{background:#e6f0ff}
  .cloud-snow{background:#ffffff}
  .cloud-storm{background:#394150;box-shadow:0 12px 24px rgba(0,0,0,.35)}
  .cloud-storm::before,.cloud-storm::after{background:#394150}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  .card-rainy:hover .cloud,.card-snowy:hover .cloud,.card-stormy:hover .cloud{animation-duration:2s}

  /* ===== RAIN ===== */
  .drops{position:absolute;left:50%;margin-left:-56px;top:66px;width:112px;height:62px;z-index:2}
  .drops i{
    position:absolute;top:0;width:6px;height:18px;border-radius:999px;opacity:0;
    background:linear-gradient(to bottom,#dbeafe,#38bdf8);box-shadow:0 0 7px rgba(125,211,252,.8);
    animation:rainFall 1.15s linear infinite;
  }
  .drops i:nth-child(1){left:9px;animation-delay:0s}
  .drops i:nth-child(2){left:31px;animation-delay:.22s}
  .drops i:nth-child(3){left:53px;animation-delay:.44s}
  .drops i:nth-child(4){left:74px;animation-delay:.12s}
  .drops i:nth-child(5){left:94px;animation-delay:.58s}
  @keyframes rainFall{
    0%{transform:translateY(0) scaleY(.55);opacity:0}
    14%{opacity:1}
    82%{opacity:1}
    100%{transform:translateY(54px) scaleY(1.18);opacity:0}
  }
  .puddle{
    position:absolute;bottom:4px;left:50%;margin-left:-48px;width:96px;height:12px;border-radius:50%;
    background:rgba(255,255,255,.30);animation:puddlePulse 1.15s ease-in-out infinite;
  }
  @keyframes puddlePulse{0%,100%{transform:scaleX(.82);opacity:.5}50%{transform:scaleX(1.06);opacity:.95}}
  .card-rainy:hover .drops i{animation-duration:.7s}

  /* ===== SNOW ===== */
  .flakes{position:absolute;left:50%;margin-left:-56px;top:64px;width:112px;height:66px;z-index:2}
  .flakes i{
    position:absolute;top:0;width:9px;height:9px;border-radius:50%;background:#fff;opacity:0;
    box-shadow:0 0 8px rgba(255,255,255,.95);animation:snowFall 3.4s linear infinite;
  }
  .flakes i::before{content:"";position:absolute;width:13px;height:2px;border-radius:2px;background:rgba(255,255,255,.95);left:-2px;top:3.5px}
  .flakes i::after{content:"";position:absolute;width:2px;height:13px;border-radius:2px;background:rgba(255,255,255,.95);left:3.5px;top:-2px}
  .flakes i:nth-child(1){left:7px;animation-delay:0s}
  .flakes i:nth-child(2){left:27px;animation-delay:.55s}
  .flakes i:nth-child(3){left:48px;animation-delay:1.1s}
  .flakes i:nth-child(4){left:68px;animation-delay:1.65s}
  .flakes i:nth-child(5){left:87px;animation-delay:.85s}
  .flakes i:nth-child(6){left:101px;animation-delay:2.1s}
  @keyframes snowFall{
    0%{transform:translate(0,0) rotate(0deg);opacity:0}
    14%{opacity:1}
    50%{transform:translate(-11px,32px) rotate(180deg);opacity:1}
    100%{transform:translate(9px,62px) rotate(360deg);opacity:0}
  }
  .snow-ground{
    position:absolute;bottom:2px;left:50%;margin-left:-55px;width:110px;height:17px;background:#fff;
    border-radius:50% 50% 0 0 / 100% 100% 0 0;opacity:.96;box-shadow:0 -4px 12px rgba(255,255,255,.5);
  }
  .card-snowy:hover .flakes i{animation-duration:2.1s}

  /* ===== STORM ===== */
  .bolt{
    position:absolute;top:54px;left:50%;margin-left:-17px;width:34px;height:60px;z-index:4;
    background:linear-gradient(to bottom,#fef08a,#fde047);
    clip-path:polygon(60% 0%,15% 58%,42% 58%,25% 100%,86% 40%,55% 40%);
    filter:drop-shadow(0 0 11px rgba(253,224,71,.95));
    animation:boltFlash 2.5s infinite;transform-origin:top center;
  }
  @keyframes boltFlash{
    0%,52%,100%{opacity:0;transform:scale(.9)}
    55%{opacity:1;transform:scale(1.06)}
    59%{opacity:.18}
    63%{opacity:1}
    67%{opacity:0}
    71%{opacity:.9}
    75%{opacity:0}
  }
  .drops-storm i{
    height:16px;background:linear-gradient(to bottom,#c4b5fd,#a78bfa);
    box-shadow:0 0 7px rgba(167,139,250,.85);
    animation:slantRain .68s linear infinite;
  }
  .drops-storm i:nth-child(1){left:14px}
  .drops-storm i:nth-child(2){left:40px;animation-delay:.18s}
  .drops-storm i:nth-child(3){left:66px;animation-delay:.36s}
  .drops-storm i:nth-child(4){left:90px;animation-delay:.08s}
  @keyframes slantRain{
    0%{transform:translate(0,0) rotate(18deg) scaleY(.6);opacity:0}
    15%{opacity:1}
    100%{transform:translate(-10px,54px) rotate(18deg) scaleY(1.15);opacity:0}
  }
  .storm-glow{
    position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(253,224,71,.18),transparent 62%);
    animation:stormGlow 2.5s infinite;pointer-events:none;
  }
  @keyframes stormGlow{0%,52%,100%{opacity:0}55%,63%,71%{opacity:1}59%,67%,75%{opacity:.15}}
  .card-stormy:hover .bolt{animation-duration:1.25s}
  .card-stormy:hover .storm-glow{animation-duration:1.25s}

  /* RESPONSIVE */
  @media (max-width:1080px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .hero{align-items:flex-start}
  }
  @media (max-width:580px){
    body{padding:22px 16px 20px}
    .grid{grid-template-columns:1fr;gap:16px}
    .card{min-height:0}
    .temp{font-size:50px}
    .icon-wrap{height:156px}
    .hero h2{font-size:34px}
    header{margin-bottom:20px}
  }

  /* REDUCED MOTION */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
    .sun-rays,.cloud,.sun-core,.sun-glow,.puddle,.mini-cloud,.live-dot{animation:none !important}
    .drops i,.flakes i{animation:none !important;opacity:.9 !important;transform:none !important}
    .bolt{animation:none !important;opacity:1 !important;transform:scale(1) !important}
    .storm-glow{animation:none !important;opacity:.5 !important}
    .card:hover,.card:focus-visible{transform:none}
  }
</style>
</head>
<body>
<div class="page">

  <header>
    <div class="brand">
      <div class="logo" aria-hidden="true"></div>
      <div>
        <h1>Pure CSS Weather</h1>
        <p>Four skies &middot; HTML + CSS only</p>
      </div>
    </div>
    <div class="live"><span class="live-dot" aria-hidden="true"></span> Live &middot; Animated with @keyframes</div>
  </header>

  <section class="hero">
    <h2>Today&rsquo;s weather,<br>in <em>pure CSS.</em></h2>
    <div class="hero-right">
      <p>Every icon below is built from plain HTML elements and pseudo-elements &mdash; rotating sun rays, falling rain, drifting snow and flashing lightning. No images, no icon libraries.</p>
      <div class="tags">
        <span class="tag tag-yellow">4 CSS Icons</span>
        <span class="tag">Hover to lift</span>
        <span class="tag">Reduced-motion ready</span>
      </div>
    </div>
  </section>

  <main class="grid">

    <!-- SUNNY -->
    <article class="card card-sunny" tabindex="0">
      <div class="card-top">
        <span class="location">Phoenix, AZ</span>
        <span class="badge">Clear sky</span>
      </div>
      <div class="icon-wrap" aria-hidden="true">
        <div class="mini-cloud"></div>
        <div class="mini-cloud m2"></div>
        <div class="sun-scene">
          <div class="sun-glow"></div>
          <div class="sun-rays"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
          <div class="sun-core"></div>
        </div>
      </div>
      <div class="temp-row">
        <span class="temp">32&deg;</span><span class="celsius">C</span>
        <span class="feels">Feels like<strong>34&deg;</strong></span>
      </div>
      <p class="desc">Bright sunshine all day long with a gentle desert breeze.</p>
      <div class="meta">
        <div class="meta-item"><span class="meta-label">Humidity</span><strong>28%</strong></div>
        <div class="meta-item"><span class="meta-label">Wind</span><strong>12 km/h</strong></div>
        <div class="meta-item"><span class="meta-label">UV Index</span><strong>Very high</strong></div>
      </div>
    </article>

    <!-- RAINY -->
    <article class="card card-rainy" tabindex="0">
      <div class="card-top">
        <span class="location">London, UK</span>
        <span class="badge">Showers</span>
      </div>
      <div class="icon-wrap" aria-hidden="true">
        <div class="cloud-scene">
          <div class="cloud cloud-rain"></div>
          <div class="drops"><i></i><i></i><i></i><i></i><i></i></div>
          <div class="puddle"></div>
        </div>
      </div>
      <div class="temp-row">
        <span class="temp">18&deg;</span><span class="celsius">C</span>
        <span class="feels">Feels like<strong>16&deg;</strong></span>
      </div>
      <p class="desc">Steady rain through the afternoon, easing by evening.</p>
      <div class="meta">
        <div class="meta-item"><span class="meta-label">Humidity</span><strong>84%</strong></div>
        <div class="meta-item"><span class="meta-label">Rain</span><strong>12 mm</strong></div>
        <div class="meta-item"><span class="meta-label">Wind</span><strong>22 km/h</strong></div>
      </div>
    </article>

    <!-- SNOWY -->
    <article class="card card-snowy" tabindex="0">
      <div class="card-top">
        <span class="location">Reykjav&iacute;k, IS</span>
        <span class="badge">Snowfall</span>
      </div>
      <div class="icon-wrap" aria-hidden="true">
        <div class="cloud-scene">
          <div class="cloud cloud-snow"></div>
          <div class="flakes"><i></i><i></i><i></i><i></i><i></i><i></i></div>
          <div class="snow-ground"></div>
        </div>
      </div>
      <div class="temp-row">
        <span class="temp">-4&deg;</span><span class="celsius">C</span>
        <span class="feels">Feels like<strong>-9&deg;</strong></span>
      </div>
      <p class="desc">Light snow with fresh powder and a quiet, hushed sky.</p>
      <div class="meta">
        <div class="meta-item"><span class="meta-label">Humidity</span><strong>76%</strong></div>
        <div class="meta-item"><span class="meta-label">Snow</span><strong>6 cm</strong></div>
        <div class="meta-item"><span class="meta-label">Wind</span><strong>18 km/h</strong></div>
      </div>
    </article>

    <!-- STORMY -->
    <article class="card card-stormy" tabindex="0">
      <div class="card-top">
        <span class="location">Miami, FL</span>
        <span class="badge">Storm</span>
      </div>
      <div class="icon-wrap" aria-hidden="true">
        <div class="storm-glow"></div>
        <div class="cloud-scene">
          <div class="cloud cloud-storm"></div>
          <div class="bolt"></div>
          <div class="drops drops-storm"><i></i><i></i><i></i><i></i></div>
        </div>
      </div>
      <div class="temp-row">
        <span class="temp">27&deg;</span><span class="celsius">C</span>
        <span class="feels">Feels like<strong>30&deg;</strong></span>
      </div>
      <p class="desc">Thunderstorms with frequent lightning and heavy gusts.</p>
      <div class="meta">
        <div class="meta-item"><span class="meta-label">Humidity</span><strong>91%</strong></div>
        <div class="meta-item"><span class="meta-label">Gusts</span><strong>48 km/h</strong></div>
        <div class="meta-item"><span class="meta-label">Rain</span><strong>28 mm</strong></div>
      </div>
    </article>

  </main>

  <footer>
    <span class="foot-pill"><b>Pure HTML + CSS</b> &mdash; no JavaScript</span>
    <span class="foot-pill">No images &middot; No icon fonts</span>
    <span class="foot-pill">Built with @keyframes &amp; pseudo-elements</span>
  </footer>

</div>
</body>
</html>
Reasoning trace (7,993 tokens)
Implementing pure HTML and CSS animated weather cards with pseudo-element icons, responsive grid, hover effects, and reduced-motion support while avoiding scripts and external assets.Extending the CSS-only animation to include sun rays, cloud, rain, snow, and lightning scenes with responsive layout constraints.Defining CSS structures and keyframe animations for sun rays, cloud, rain, snow, and lightning effects.Extending CSS with color palettes, layout grid, hover states, and accessibility safeguards.Defining pseudo-element backgrounds, keyframe animations, and responsive layout rules for weather variants.Extending the layout with legend pills, footer note, system font stack, and CSS variables while enforcing no external resources.Adding sun, cloud, and storm scene CSS with keyframe animations and positioned elements.Extending CSS with responsive breakpoints, reduced-motion overrides, and accessibility focus styles.