Models 44

MiMo-V2.6-Pro

by Xiaomireasoning defaultClean
Open in new window

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

How it went

Total time
2 min 1 s
Cost
$0.0095
Output tokens
10,623
Spent thinking
1,577 tokens
Speed
89.6 tok/s
Console errors
0
First token after
2.6 s
First visible text after
39.7 s
Prompt tokens
502
Code size
23.3 KB
Finish reason
stop
Served by
Xiaomi
Model id
xiaomi/mimo-v2.6-pro
Reasoning sent
model default
Max output
131,072 tokens
Generated
Nov 13, 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 · 848 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather Cards — HTML &amp; CSS Only</title>
<style>
  /* -----------------------------------------
     Base
  ----------------------------------------- */
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
    color: #eaf0ff;
    background:
      radial-gradient(1100px 620px at 12% -12%, rgba(78, 108, 255, .28), transparent 62%),
      radial-gradient(900px 520px at 96% 108%, rgba(255, 132, 86, .18), transparent 60%),
      linear-gradient(160deg, #0b1024 0%, #111836 48%, #0b1024 100%);
    background-attachment: fixed;
    padding: 30px 24px 38px;
    overflow-x: hidden;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  }

  .wrap {
    width: min(1180px, 100%);
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* -----------------------------------------
     Header
  ----------------------------------------- */
  .masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px 32px;
    margin-bottom: 30px;
  }

  .eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: .30em;
    text-transform: uppercase;
    color: #93a4d8;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .eyebrow .rule {
    width: 44px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ffcb74, rgba(255,203,116,0));
  }

  h1 {
    margin: 0;
    font-size: clamp(28px, 4.4vw, 46px);
    line-height: 1.03;
    letter-spacing: -.03em;
    font-weight: 700;
    background: linear-gradient(96deg, #ffffff 8%, #c8d4ff 46%, #91a5e8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .subtitle {
    margin: 12px 0 0;
    max-width: 56ch;
    color: #9fadcf;
    font-size: 15px;
    line-height: 1.65;
  }

  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.055);
    color: #b9c6e8;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 12px currentColor;
  }

  .legend .d1 { color: #ffca6b; background: #ffca6b; }
  .legend .d2 { color: #63c8ff; background: #63c8ff; }
  .legend .d3 { color: #cfe8ff; background: #cfe8ff; }
  .legend .d4 { color: #b78cff; background: #b78cff; }

  /* -----------------------------------------
     Grid
  ----------------------------------------- */
  .cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
  }

  /* -----------------------------------------
     Card shell
  ----------------------------------------- */
  .card {
    --glow: rgba(255,255,255,.28);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 18px;
    border-radius: 26px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
      0 18px 38px rgba(4, 8, 26, .38),
      0 2px 0 rgba(255,255,255,.10) inset;
    transition: transform .45s cubic-bezier(.22,.9,.28,1), box-shadow .45s ease, border-color .45s ease;
  }

  .card:hover {
    transform: translateY(-12px) scale(1.018);
    border-color: rgba(255,255,255,.3);
    box-shadow:
      0 34px 64px rgba(3, 7, 24, .52),
      0 0 0 1px rgba(255,255,255,.12) inset,
      0 14px 60px -18px var(--glow);
  }

  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--bg);
  }

  /* soft moving light sweep */
  .card::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -70%;
    width: 65%;
    height: 220%;
    z-index: -1;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    opacity: .55;
    animation: sweep 9s ease-in-out infinite;
    pointer-events: none;
  }

  .card:nth-child(2)::after { animation-delay: -2.2s; }
  .card:nth-child(3)::after { animation-delay: -4.4s; }
  .card:nth-child(4)::after { animation-delay: -6.6s; }

  @keyframes sweep {
    0%, 62%  { transform: translateX(0) rotate(18deg); opacity: 0; }
    72%      { opacity: .55; }
    86%, 100%{ transform: translateX(300%) rotate(18deg); opacity: 0; }
  }

  .card--sunny {
    --bg:
      radial-gradient(120% 90% at 82% 8%, rgba(255, 224, 138, .58), transparent 58%),
      linear-gradient(158deg, #f5a63c 0%, #f0823a 44%, #d8562f 100%);
    --glow: rgba(255, 191, 92, .58);
  }

  .card--rainy {
    --bg:
      radial-gradient(120% 95% at 12% 4%, rgba(122, 214, 255, .42), transparent 56%),
      linear-gradient(158deg, #2b7fb8 0%, #245e9c 48%, #23386f 100%);
    --glow: rgba(96, 190, 255, .55);
  }

  .card--snowy {
    --bg:
      radial-gradient(120% 95% at 84% 6%, rgba(255,255,255,.78), transparent 56%),
      linear-gradient(158deg, #8fb9e4 0%, #7d9ed3 46%, #6b73b8 100%);
    --glow: rgba(196, 227, 255, .62);
  }

  .card--stormy {
    --bg:
      radial-gradient(115% 92% at 20% 0%, rgba(160, 112, 235, .55), transparent 58%),
      linear-gradient(158deg, #4b3f8f 0%, #33306c 45%, #1c2144 100%);
    --glow: rgba(178, 132, 255, .62);
  }

  .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: .20em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    padding: 6px 11px;
    border-radius: 999px;
  }

  .status .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,.95);
    animation: pulse 2.6s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(.58); opacity: .45; }
  }

  .index {
    font-size: 11px;
    letter-spacing: .18em;
    font-weight: 700;
    color: rgba(255,255,255,.66);
  }

  /* -----------------------------------------
     Icon stage
  ----------------------------------------- */
  .stage {
    position: relative;
    height: 172px;
    margin: 6px 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .stage .halo {
    position: absolute;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.30), rgba(255,255,255,0) 68%);
    animation: breathe 6s ease-in-out infinite;
  }

  @keyframes breathe {
    0%, 100% { transform: scale(.92); opacity: .58; }
    50%      { transform: scale(1.08); opacity: .95; }
  }

  /* ---------- SUN ---------- */
  .sun {
    position: relative;
    width: 146px;
    height: 146px;
  }

  .sun-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 82px;
    height: 82px;
    margin: -41px 0 0 -41px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fff6cf, #ffd36b 42%, #ffa62e 78%, #ff8c1f 100%);
    box-shadow:
      0 0 0 10px rgba(255, 214, 122, .26),
      0 0 42px rgba(255, 196, 92, .82),
      0 0 96px rgba(255, 170, 60, .55);
    animation: sunPulse 5s ease-in-out infinite;
  }

  @keyframes sunPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.055); }
  }

  .rays {
    position: absolute;
    inset: 0;
    animation: spin 26s linear infinite;
    transform-origin: 50% 50%;
  }

  .rays span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 30px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe9a8, #ffbb4d 60%, rgba(255,178,64,.15));
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) rotate(var(--r)) translateY(-61px);
    animation: rayBreathe 3.2s ease-in-out infinite;
  }

  .rays span:nth-child(2) { animation-delay: -.4s; }
  .rays span:nth-child(3) { animation-delay: -.8s; }
  .rays span:nth-child(4) { animation-delay: -1.2s; }
  .rays span:nth-child(5) { animation-delay: -1.6s; }
  .rays span:nth-child(6) { animation-delay: -2.0s; }
  .rays span:nth-child(7) { animation-delay: -2.4s; }
  .rays span:nth-child(8) { animation-delay: -2.8s; }

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

  @keyframes rayBreathe {
    0%, 100% { height: 28px; opacity: .92; }
    50%      { height: 38px; opacity: 1; }
  }

  /* ---------- CLOUD (shared) ---------- */
  .cloud {
    position: absolute;
    width: 132px;
    height: 52px;
    border-radius: 40px;
    background: linear-gradient(170deg, #ffffff 0%, #e6f0fb 55%, #c3d6ea 100%);
    box-shadow:
      0 12px 24px rgba(15, 33, 70, .28),
      0 2px 0 rgba(255,255,255,.7) inset;
    animation: drift 7s ease-in-out infinite;
  }

  .cloud::before,
  .cloud::after {
    content: "";
    position: absolute;
    bottom: 12px;
    border-radius: 50%;
    background: inherit;
    box-shadow: inherit;
  }

  .cloud::before {
    left: 22px;
    width: 56px;
    height: 56px;
  }

  .cloud::after {
    right: 20px;
    width: 42px;
    height: 42px;
  }

  .cloud .lobe {
    position: absolute;
    bottom: 10px;
    left: 62px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: inherit;
    box-shadow: inherit;
  }

  @keyframes drift {
    0%, 100% { transform: translate3d(-5px, 0, 0); }
    50%      { transform: translate3d(6px, -7px, 0); }
  }

  .cloud-top { top: 26px; }

  .cloud--dark {
    background: linear-gradient(170deg, #c9d2ee 0%, #9aa7d2 48%, #7a86b8 100%);
    box-shadow: 0 14px 26px rgba(12, 18, 54, .38), 0 2px 0 rgba(255,255,255,.45) inset;
  }

  /* ---------- RAIN ---------- */
  .rain-field {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 4px;
    top: 82px;
  }

  .drop {
    position: absolute;
    top: 0;
    left: var(--x);
    width: 5px;
    height: var(--h, 19px);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(174,231,255,0), #a9e6ff 32%, #5fc2ff);
    box-shadow: 0 0 10px rgba(126, 214, 255, .7);
    opacity: .85;
    animation: rainfall var(--d, 1.5s) linear infinite;
    animation-delay: var(--del, 0s);
  }

  @keyframes rainfall {
    0%   { transform: translate3d(0, -16px, 0) scaleY(.75); opacity: 0; }
    14%  { opacity: .95; }
    100% { transform: translate3d(-16px, 74px, 0) scaleY(1.15); opacity: 0; }
  }

  /* ---------- SNOW ---------- */
  .snow-field {
    position: absolute;
    inset: 78px 8% 0;
  }

  .flake {
    position: absolute;
    top: -8px;
    left: var(--x);
    width: var(--s, 9px);
    height: var(--s, 9px);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #ffffff, #cfe6ff 70%, #a8c9ee 100%);
    box-shadow: 0 0 12px rgba(255,255,255,.85);
    opacity: .92;
    animation: snowfall var(--d, 6s) linear infinite;
    animation-delay: var(--del, 0s);
  }

  .flake::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.32);
  }

  @keyframes snowfall {
    0%   { transform: translate3d(0, -12px, 0) scale(.7); opacity: 0; }
    12%  { opacity: .95; }
    50%  { transform: translate3d(18px, 42px, 0) scale(1); }
    88%  { opacity: .8; }
    100% { transform: translate3d(-12px, 96px, 0) scale(.85); opacity: 0; }
  }

  /* ---------- STORM ---------- */
  .storm-stage .halo {
    background: radial-gradient(circle, rgba(190,150,255,.34), rgba(255,255,255,0) 68%);
  }

  .flash {
    position: absolute;
    inset: -12px;
    border-radius: 30px;
    background: radial-gradient(circle at 52% 46%, rgba(226,214,255,.72), rgba(160,120,255,0) 66%);
    opacity: 0;
    animation: skyFlash 5.2s ease-out infinite;
    pointer-events: none;
  }

  @keyframes skyFlash {
    0%, 7%   { opacity: 0; }
    8%       { opacity: .95; }
    10%      { opacity: .12; }
    12%      { opacity: .72; }
    15%      { opacity: 0; }
    100%     { opacity: 0; }
  }

  .bolt {
    position: absolute;
    left: 50%;
    top: 74px;
    width: 34px;
    height: 72px;
    margin-left: -12px;
    background: linear-gradient(180deg, #fff6c4 0%, #ffd45c 42%, #ff9d2e 100%);
    clip-path: polygon(58% 0%, 12% 52%, 44% 52%, 24% 100%, 92% 38%, 56% 38%, 84% 0%);
    filter: drop-shadow(0 0 14px rgba(255, 216, 106, .95));
    opacity: .92;
    animation: strike 5.2s ease-out infinite;
    transform-origin: 50% 0%;
  }

  @keyframes strike {
    0%, 7%   { opacity: 0; transform: scale(.86) translateY(-8px); }
    8%       { opacity: 1; transform: scale(1.06) translateY(0); }
    10%      { opacity: .18; }
    12%      { opacity: 1; transform: scale(1); }
    16%      { opacity: 0; transform: scale(.94); }
    100%     { opacity: 0; }
  }

  .storm-rain .drop {
    background: linear-gradient(180deg, rgba(198,214,255,0), #b9caff 34%, #8aa0f4);
    box-shadow: 0 0 10px rgba(150, 172, 255, .7);
  }

  /* -----------------------------------------
     Card text
  ----------------------------------------- */
  .city {
    margin: 6px 0 2px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
  }

  .temp-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 4px;
  }

  .temp {
    font-size: 58px;
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 6px 22px rgba(0,0,0,.22);
  }

  .unit {
    margin-top: 9px;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255,255,255,.78);
  }

  .desc {
    margin: 6px 0 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255,255,255,.84);
    min-height: 43px;
  }

  .metrics {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.22);
  }

  .metric {
    flex: 1;
    padding: 9px 8px;
    border-radius: 13px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.16);
    text-align: center;
  }

  .metric small {
    display: block;
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    margin-bottom: 3px;
    font-weight: 700;
  }

  .metric b {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
  }

  .footnote {
    margin: 26px 0 0;
    text-align: center;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(152, 170, 214, .62);
    font-weight: 600;
  }

  /* -----------------------------------------
     Responsive
  ----------------------------------------- */
  @media (max-width: 1080px) {
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 660px) {
    body { padding: 22px 16px 30px; }
    .masthead { margin-bottom: 22px; }
    .subtitle { font-size: 14px; }
    .cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .card { padding: 18px; }
    .stage { height: 164px; }
    .temp { font-size: 52px; }
  }

  @media (max-width: 380px) {
    .legend span { font-size: 10px; letter-spacing: .08em; padding: 7px 10px 7px 8px; }
    .temp { font-size: 46px; }
  }

  /* -----------------------------------------
     Reduced motion
  ----------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition-duration: .01ms !important;
    }

    .drop { opacity: .85; }
    .flake { opacity: .95; }
    .bolt { opacity: .95; }
    .flash { opacity: .28; }
    .card::after { display: none; }
  }
</style>
</head>
<body>

<div class="wrap">

  <header class="masthead">
    <div>
      <p class="eyebrow"><span class="rule"></span> Atmospheric UI kit &nbsp;·&nbsp; no scripts</p>
      <h1>Four moods of the sky</h1>
      <p class="subtitle">
        Animated weather cards built entirely from HTML elements and CSS —
        rotating sunbeams, slanting rain, drifting snow and thunder-lit skies.
      </p>
    </div>

    <div class="legend" aria-hidden="true">
      <span><i class="d1"></i> Sunny</span>
      <span><i class="d2"></i> Rainy</span>
      <span><i class="d3"></i> Snowy</span>
      <span><i class="d4"></i> Stormy</span>
    </div>
  </header>

  <main class="cards">

    <!-- ============ SUNNY ============ -->
    <article class="card card--sunny">
      <div class="card-top">
        <span class="status"><span class="dot"></span> Sunny</span>
        <span class="index">01 / 04</span>
      </div>

      <div class="stage" aria-hidden="true">
        <div class="halo"></div>
        <div class="sun">
          <div class="rays">
            <span style="--r: 0deg"></span>
            <span style="--r: 45deg"></span>
            <span style="--r: 90deg"></span>
            <span style="--r: 135deg"></span>
            <span style="--r: 180deg"></span>
            <span style="--r: 225deg"></span>
            <span style="--r: 270deg"></span>
            <span style="--r: 315deg"></span>
          </div>
          <div class="sun-core"></div>
        </div>
      </div>

      <p class="city">Marrakech</p>
      <div class="temp-row">
        <span class="temp">31&deg;</span>
        <span class="unit">Celsius</span>
      </div>
      <p class="desc">Clear skies and warm light from sunrise to the last golden hour.</p>

      <div class="metrics">
        <div class="metric"><small>Humidity</small><b>24%</b></div>
        <div class="metric"><small>Wind</small><b>8 km/h</b></div>
        <div class="metric"><small>UV</small><b>High</b></div>
      </div>
    </article>

    <!-- ============ RAINY ============ -->
    <article class="card card--rainy">
      <div class="card-top">
        <span class="status"><span class="dot"></span> Rainy</span>
        <span class="index">02 / 04</span>
      </div>

      <div class="stage" aria-hidden="true">
        <div class="halo"></div>
        <div class="cloud cloud-top"><span class="lobe"></span></div>
        <div class="rain-field">
          <span class="drop" style="--x: 8%;  --d: 1.35s; --del: -0.15s; --h: 21px;"></span>
          <span class="drop" style="--x: 22%; --d: 1.65s; --del: -0.72s; --h: 17px;"></span>
          <span class="drop" style="--x: 36%; --d: 1.18s; --del: -0.36s; --h: 23px;"></span>
          <span class="drop" style="--x: 50%; --d: 1.55s; --del: -1.02s; --h: 18px;"></span>
          <span class="drop" style="--x: 64%; --d: 1.28s; --del: -0.58s; --h: 22px;"></span>
          <span class="drop" style="--x: 78%; --d: 1.72s; --del: -0.24s; --h: 16px;"></span>
          <span class="drop" style="--x: 91%; --d: 1.42s; --del: -0.94s; --h: 20px;"></span>
        </div>
      </div>

      <p class="city">Seattle</p>
      <div class="temp-row">
        <span class="temp">14&deg;</span>
        <span class="unit">Celsius</span>
      </div>
      <p class="desc">Steady rain and soft grey light settling over the sound.</p>

      <div class="metrics">
        <div class="metric"><small>Humidity</small><b>91%</b></div>
        <div class="metric"><small>Wind</small><b>17 km/h</b></div>
        <div class="metric"><small>Rain</small><b>6 mm</b></div>
      </div>
    </article>

    <!-- ============ SNOWY ============ -->
    <article class="card card--snowy">
      <div class="card-top">
        <span class="status"><span class="dot"></span> Snowy</span>
        <span class="index">03 / 04</span>
      </div>

      <div class="stage" aria-hidden="true">
        <div class="halo"></div>
        <div class="cloud cloud-top"><span class="lobe"></span></div>
        <div class="snow-field">
          <span class="flake" style="--x: 10%; --s: 10px; --d: 6.2s; --del: -0.4s;"></span>
          <span class="flake" style="--x: 25%; --s: 7px;  --d: 7.1s; --del: -2.6s;"></span>
          <span class="flake" style="--x: 39%; --s: 12px; --d: 5.6s; --del: -1.1s;"></span>
          <span class="flake" style="--x: 53%; --s: 8px;  --d: 6.8s; --del: -3.4s;"></span>
          <span class="flake" style="--x: 67%; --s: 11px; --d: 6.0s; --del: -1.9s;"></span>
          <span class="flake" style="--x: 80%; --s: 7px;  --d: 7.4s; --del: -0.8s;"></span>
          <span class="flake" style="--x: 92%; --s: 10px; --d: 5.2s; --del: -2.9s;"></span>
        </div>
      </div>

      <p class="city">Reykjavik</p>
      <div class="temp-row">
        <span class="temp">&minus;3&deg;</span>
        <span class="unit">Celsius</span>
      </div>
      <p class="desc">Light snow drifting in silence across a pale, frozen sky.</p>

      <div class="metrics">
        <div class="metric"><small>Humidity</small><b>78%</b></div>
        <div class="metric"><small>Wind</small><b>11 km/h</b></div>
        <div class="metric"><small>Snow</small><b>4 cm</b></div>
      </div>
    </article>

    <!-- ============ STORMY ============ -->
    <article class="card card--stormy">
      <div class="card-top">
        <span class="status"><span class="dot"></span> Stormy</span>
        <span class="index">04 / 04</span>
      </div>

      <div class="stage storm-stage" aria-hidden="true">
        <div class="halo"></div>
        <div class="flash"></div>
        <div class="cloud cloud--dark cloud-top"><span class="lobe"></span></div>
        <div class="bolt"></div>
        <div class="rain-field storm-rain">
          <span class="drop" style="--x: 6%;  --d: 1.05s; --del: -0.22s; --h: 20px;"></span>
          <span class="drop" style="--x: 19%; --d: 1.35s; --del: -0.68s; --h: 16px;"></span>
          <span class="drop" style="--x: 32%; --d: 0.95s; --del: -0.42s; --h: 22px;"></span>
          <span class="drop" style="--x: 47%; --d: 1.22s; --del: -0.95s; --h: 18px;"></span>
          <span class="drop" style="--x: 61%; --d: 1.02s; --del: -0.30s; --h: 21px;"></span>
          <span class="drop" style="--x: 75%; --d: 1.42s; --del: -0.80s; --h: 17px;"></span>
          <span class="drop" style="--x: 89%; --d: 1.12s; --del: -0.52s; --h: 23px;"></span>
        </div>
      </div>

      <p class="city">Chicago</p>
      <div class="temp-row">
        <span class="temp">18&deg;</span>
        <span class="unit">Celsius</span>
      </div>
      <p class="desc">Thunder rolling over the lake as lightning splits the dark.</p>

      <div class="metrics">
        <div class="metric"><small>Humidity</small><b>86%</b></div>
        <div class="metric"><small>Wind</small><b>34 km/h</b></div>
        <div class="metric"><small>Pressure</small><b>992 hPa</b></div>
      </div>
    </article>

  </main>

  <p class="footnote">Pure HTML &amp; CSS &nbsp;·&nbsp; Zero JavaScript &nbsp;·&nbsp; Motion-aware</p>

</div>

</body>
</html>
Reasoning trace (1,577 tokens)
We need output only HTML fenced. Need build polished. Pure HTML/CSS, no JS. Four cards responsive grid 4 per row desktop, stacked mobile. Icons HTML elements + pseudo elements. No SVG/images. Respect prefers-reduced-motion. Need first paint meaningful. Let's craft carefully.

Need "stacked on mobile" - maybe at 700px single column. Could do 2 columns tablet but requirement stacked on mobile. Desktop 4 per row.

Weather icons built from divs and pseudo-elements. Sun: core circle + rays via box-shadow? Better rays as spans generated in HTML (8 spans) — HTML elements allowed. Use CSS rotate. Cloud for rain, drops spans. Snow cloud + flakes spans. Storm cloud + lightning bolt via CSS clip-path? clip-path is CSS, element div. Fine. Could also build bolt with rotated rectangles but clip-path polygon simpler — still HTML element styled with CSS. No SVG.

Animations: sun rays rotate, cloud bob maybe, drops fall, snow drift, lightning flash. Infinite.

Layout: body background deep navy with subtle CSS gradient/pattern (no images). Header, cards. Card backgrounds matching weather. Card labels.

Let's write semantic: main > header + section grid > article.card each with figure.icon-stage.

Sun icon: div.sun with .ray x8. Position. Cloud for rain.

CSS variables. Accessibility: aria-hidden on decorative icons, but no JS.

Rain drops: .rain-scene .drop with --x, --delay, --dur, maybe multiple. Each drop styled as rounded bar with gradient. Use nth-child positions via CSS variables inline style? Inline style is allowed (only inline event handlers forbidden). But "everything inline" fine. Could use style="--x:..." — but maybe safer use nth-child rules. That's a lot; use inline style attributes for positions (allowed, no event handlers). But requirement "no inline event handler" — style attributes fine. I'll use inline style custom properties, keeping clean.

Card structure: article.weather-card card--sunny, figure.icon-stage with div.icon-sun containing core & rays; figcaption? Actually card content below: p.card-kicker "Current conditions", h2 "Marrakech", div temp-row with .temp 31° and .unit C, p desc, footer meta chips.

Add weather badge "SUNNY". Use no images.

Animations:
- .sun-rays rotate24s linear infinite; each ray maybe pulse.
- .sun-core glow pulse.
- clouds float.
- rain: drops fall with opacity and translateY; droplet shape.
- snow: flakes fall and sway via translate keyframes; different sizes/delays.
- storm: lightning bolt flicker with opacity; sky flash overlay via pseudo-element animation; rain in storm too.
- card hover transform translateY(-10px) scale, shadow.

Reduced motion: animation: none for all animated elements; keep static.

Background gradients per card: sunny warm amber/orange with radial highlight; rainy teal/blue; snowy pale blue/lavender; stormy indigo/purple.

Design: dark page bg (#0b1020) with grid. Cards280-320px. Use font system stack. Include small clock-ish "LIVE" indicator with pulsing dot maybe (animation). Fine.

Make sure no scrollbars at 1280x800: Header compact. Cards ~ height 430. Let's estimate: body padding 28px top/bottom; header ~90px, grid cards ~430 → 580 total, fine.

Responsive: at max-width 900: grid 2 columns. at 620: 1 column, stacked. Requirement 4 per row desktop — yes at >1100. Use grid-template-columns repeat(4,1fr) default; media980 → 2; 620 → 1.

Now write full HTML. Careful with CSS keyframes and no JS.

Details for rain drops: container .rain-field with spans .drop; positions via style="--left:12%;--delay:-0.4s;--dur:1.1s;--scale:1". Animation fall: translateY(-20px) opacity 0 → 30px→ wait, drops fall from top of icon to bottom. Keyframes: 0% {transform: translate3d(0,-18px,0) scaleY(.7); opacity:0} 15%{opacity:.9} 100%{transform: translate3d(0,120px,0) scaleY(1.1); opacity:0}. Positioned with left var, top var.

Snow: keyframes snowfall: translate with sway using separate wrapper? Simpler: keyframes using translate(x) at percentages. Each flake uses custom --drift.

Lightning: .bolt with clip-path polygon; animation strike 4.2s infinite; plus .sky-flash pseudo element on storm icon? Use .storm-flash div with animation.

Sun rays: 8 spans with rotate(var(--r)) translateY(-52px) and transform-origin center. Container140x140 centered; ray is width 6 height 26 rounded, positioned absolute left 50% top 50% with transform: translate(-50%,-50%) rotate(var(--r)) translateY(-54px). Wait transform order: rotate then translateY moves along rotated axis — good. Ray gradient.

Sun core:84px circle with radial gradient, glow box-shadow.

Cloud: build with .cloud-body (rounded rect) + ::before/::after circles. Positions.

Rain icon stage: cloud top, drops below.

Let me write.

Header: eyebrow "ATMOSPHERIC UI KIT", h1 "Four moods of the sky", p "Pure HTML + CSS weather cards..." Small legend row with 4 dots. Ensure not too tall.

Card content:
footer row: humidity/wind chips? Add "Humidity 24% • Wind 8 km/h". Nice.

Text: Sunny: Marrakech, 31°, "Clear skies and warm light". Rainy: Seattle14° "Steady rain, soft grey light". Snowy: Reykjavík −3° "Light snow drifting in silence". Stormy: Chicago 18° "Thunder rolling through the dark".

Degree symbol fine (UTF-8). Use &deg; maybe. Reykjavík non-ASCII is fine — use Reykjavik to avoid issues.

Let's produce code. Ensure only one fenced block.

CSS pseudo-element usage: cloud circles etc. Good.

Add card top accent line via ::before animated gradient maybe.

Write final.

Careful: prefers-reduced-motion block must kill all animations: `*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }` but that would make bolt appear at final state possibly invisible — fine but maybe keep static visible. Better: set animation: none !important and set elements to a static visible state. Lightning bolt opacity default 0.95 maybe with animation. Set .bolt { opacity: .9 } then animation flashes. Drops default visible-ish (opacity .75) with animation. Fine. Also reduced motion keep hover transform? transitions duration 0 is fine.

Let's write it.