MiMo-V2.6-Pro
by Xiaomireasoning defaultClean
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 & 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 · 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°</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°</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">−3°</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°</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 & CSS · Zero JavaScript · 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 ° 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.