Showcase

Four weather cards — CSS only, built by DeepSeek V4.1 Flash 1017

Hostedvia OpenCodeOpenRouter
Running live in your browserNew tab
Speed
4476tok/s
First token included
Written
152.2Ktokens
Time to build
34.0s
Cost to build
$0.11
DeepSeek V4.1 Flash 1017's builds and scores
Show the code the model wrote
HTML44,038 characters
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#111714">
  <meta name="description" content="Four animated weather cards — sun, rain, snow and thunderstorm — built entirely with CSS. No scripts, no images.">
  <title>AER — Four Skies</title>
  <style>
/* =========================================================
   AER — Four Skies
   A CSS-only weather study. No images, no scripts.
   ========================================================= */

:root {
  --bg: #111714;
  --bone: #f2ece2;
  --ink: #1d2521;
  --soft: #98a19a;
  --faint: #838e86;
  --line: rgba(241, 237, 228, 0.15);
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --card-h: 440px;
  --pad: 7px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--bone);
  background:
    radial-gradient(900px 560px at 5% -15%, rgba(198, 139, 85, 0.13), transparent 66%),
    radial-gradient(980px 650px at 104% 112%, rgba(84, 119, 137, 0.14), transparent 62%),
    var(--bg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.021) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.021) 1px, transparent 1px);
  background-size: 72px 72px;
  content: "";
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 0%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 0%, transparent 85%);
}

h1,
h2,
p {
  margin: 0;
}

.page {
  display: flex;
  flex-direction: column;
  width: min(1240px, calc(100% - 64px));
  min-height: 100svh;
  margin: 0 auto;
  padding: 28px 0 24px;
}

/* ---------------------------------------------------------
   Masthead
   --------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand__mark {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 50%;
  background: linear-gradient(180deg, #e8bb84 0 48%, #536b6c 48% 100%);
  box-shadow: inset 0 0 0 2px rgba(17, 23, 20, 0.12);
}

.brand__word {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.34em;
  line-height: 1;
}

.masthead__meta {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.masthead__meta span {
  margin: 0 7px;
  color: #4b554f;
}

/* ---------------------------------------------------------
   Intro
   --------------------------------------------------------- */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: end;
  gap: 44px;
  margin-top: 57px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 17px;
  color: var(--soft);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.eyebrow__line {
  display: inline-block;
  width: 25px;
  height: 1px;
  background: #b18158;
}

.intro h1 {
  max-width: 720px;
  color: #efebe2;
  font-family: var(--serif);
  font-size: clamp(45px, 4.25vw, 59px);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 0.99;
}

.intro h1 em {
  color: #d7b693;
  font-style: italic;
  font-weight: 400;
}

.intro__copy {
  max-width: 318px;
  padding-bottom: 7px;
  justify-self: end;
  color: var(--soft);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.72;
}

.intro__copy span {
  display: block;
  margin-top: 12px;
  color: #849087;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   Card grid + shared card anatomy
   --------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 38px;
}

.card {
  --accent: #b97a41;
  --glow: rgba(185, 122, 65, 0.42);
  --beat-delay: 0s;
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--card-h);
  padding: var(--pad) var(--pad) 0;
  overflow: hidden;
  border-radius: 26px;
  background: var(--bone);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.24) inset,
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 28px 55px -20px rgba(0, 0, 0, 0.6);
  color: var(--ink);
  transition:
    transform 450ms cubic-bezier(0.2, 0.75, 0.25, 1),
    box-shadow 450ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.cards .card:nth-child(1) { --beat-delay: -0.25s; }
.cards .card:nth-child(2) { --beat-delay: -1.55s; }
.cards .card:nth-child(3) { --beat-delay: -2.8s; }
.cards .card:nth-child(4) { --beat-delay: -3.65s; }

.scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 20px;
  isolation: isolate;
}

.scene::after {
  position: absolute;
  inset: 0;
  z-index: 30;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  content: "";
  pointer-events: none;
}

.card__info {
  display: flex;
  flex: 0 0 108px;
  flex-direction: column;
  justify-content: space-between;
  height: 108px;
  padding: 14px 15px 13px;
}

.card__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.card__id {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 4px;
}

.card__index {
  color: #64665d;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  line-height: 1;
}

.card__name {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.21em;
  line-height: 1;
  text-transform: uppercase;
}

.card__temp {
  color: #1b231f;
  font-family: var(--sans);
  font-size: 43px;
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 0.76;
  white-space: nowrap;
}

.degree {
  display: inline-block;
  margin-left: 1px;
  font-size: 0.48em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: 0.59em;
}

.card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(28, 36, 32, 0.14);
  color: #5b5e56;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.085em;
  line-height: 1.2;
  text-transform: uppercase;
}

.condition {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--glow);
  animation: status-pulse 4.9s ease-in-out var(--beat-delay) infinite;
}

.feels {
  color: #5f6259;
  white-space: nowrap;
}

@keyframes status-pulse {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(0.9);
    box-shadow: 0 0 0 0 var(--glow);
  }
  48% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 3px transparent;
  }
}

/* ---------------------------------------------------------
   01 — Sun
   --------------------------------------------------------- */

.card--sun {
  --accent: #bd7937;
  --glow: rgba(189, 121, 55, 0.45);
}

.scene--sun {
  background:
    radial-gradient(70% 68% at 50% 43%, rgba(255, 247, 208, 0.55) 0%, rgba(255, 235, 177, 0.2) 44%, transparent 70%),
    radial-gradient(120% 60% at 50% 104%, rgba(255, 222, 169, 0.64), transparent 64%),
    linear-gradient(178deg, #ffdb9d 0%, #ffc78c 48%, #efa172 100%);
}

.sun-system {
  position: absolute;
  inset: 0;
  animation: sun-dim 26s linear infinite;
  will-change: filter;
}

.sun-halo {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 276px;
  height: 276px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 252, 225, 0.95) 0%,
    rgba(255, 229, 142, 0.56) 27%,
    rgba(255, 198, 104, 0.2) 50%,
    rgba(255, 178, 90, 0) 72%
  );
  filter: blur(8px);
  opacity: 0.8;
  animation: halo-pulse 7.6s ease-in-out -2.4s infinite;
  transform: translate(-50%, -50%) scale(0.92);
}

.sun-rays {
  position: absolute;
  top: calc(45% - 140px);
  left: calc(50% - 140px);
  width: 280px;
  height: 280px;
  animation: sun-spin 64s linear infinite;
}

.sun-ray {
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--i) * 22.5deg));
}

.sun-ray::before {
  position: absolute;
  top: 9px;
  left: calc(50% - 1px);
  width: 2px;
  height: 57px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(255, 248, 218, 0.03), rgba(255, 249, 223, 0.7));
  clip-path: polygon(50% 0%, 100% 100%, 0 100%);
  content: "";
  transform-origin: 50% 100%;
}

.sun-ray:nth-child(2n)::before {
  top: 20px;
  width: 1.5px;
  height: 34px;
  opacity: 0.65;
}

.sun-ray:nth-child(4n)::before {
  top: 6px;
  height: 65px;
  opacity: 0.8;
}

.sun-ray:nth-child(4n + 2)::before {
  opacity: 0.42;
}

.sun-disc {
  position: absolute;
  top: calc(45% - 46px);
  left: calc(50% - 46px);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 37% 31%, #fffef2 0%, #fffbe1 31%, #ffeb9f 62%, #ffd36d 100%);
  box-shadow:
    0 0 15px rgba(255, 252, 224, 0.95),
    0 0 48px rgba(255, 216, 111, 0.72),
    0 0 100px rgba(255, 172, 77, 0.34);
  animation: sun-breathe 7.6s ease-in-out -1.1s infinite;
  will-change: transform;
}

.sun-disc::after {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 35%, rgba(255, 255, 250, 0.65), transparent 68%);
  content: "";
}

.sun-cloud {
  position: absolute;
  top: calc(45% - 9px);
  left: -36%;
  z-index: 4;
  width: 92px;
  height: 28px;
  border-radius: 999px;
  background: #fbf2e6;
  box-shadow: inset 0 -7px 10px rgba(197, 131, 91, 0.1);
  filter: drop-shadow(0 10px 16px rgba(154, 83, 45, 0.11));
  opacity: 0;
  animation:
    sun-cloud-cross 26s linear infinite,
    sun-cloud-bob 5.3s ease-in-out -1.8s infinite;
  will-change: left, transform;
}

.sun-cloud::before,
.sun-cloud::after {
  position: absolute;
  border-radius: 50%;
  background: #fbf2e6;
  box-shadow: inset 0 -7px 10px rgba(197, 131, 91, 0.1);
  content: "";
}

.sun-cloud::before {
  top: -20px;
  left: 13px;
  width: 39px;
  height: 39px;
}

.sun-cloud::after {
  top: -36px;
  left: 33px;
  width: 53px;
  height: 53px;
}

.sun-horizon {
  position: absolute;
  right: -18%;
  bottom: -57px;
  left: -18%;
  height: 160px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background:
    radial-gradient(54% 90% at 50% 100%, rgba(255, 241, 203, 0.3), transparent 72%),
    linear-gradient(to top, rgba(221, 130, 93, 0.23), transparent);
  pointer-events: none;
}

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

@keyframes halo-pulse {
  0%,
  100% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(0.91);
  }
  50% {
    opacity: 0.96;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes sun-breathe {
  0%,
  100% {
    transform: scale(0.977);
    box-shadow:
      0 0 14px rgba(255, 252, 224, 0.9),
      0 0 44px rgba(255, 216, 111, 0.68),
      0 0 92px rgba(255, 172, 77, 0.3);
  }
  50% {
    transform: scale(1.035);
    box-shadow:
      0 0 18px rgba(255, 253, 234, 1),
      0 0 64px rgba(255, 219, 120, 0.82),
      0 0 126px rgba(255, 169, 77, 0.4);
  }
}

@keyframes sun-dim {
  0%,
  38%,
  58%,
  100% {
    filter: brightness(1) saturate(1);
  }
  45%,
  50% {
    filter: brightness(0.71) saturate(0.88);
  }
}

@keyframes sun-cloud-cross {
  0% {
    left: -36%;
    opacity: 0;
  }
  14% {
    opacity: 0;
  }
  24%,
  68% {
    opacity: 0.93;
  }
  82% {
    opacity: 0;
  }
  100% {
    left: 116%;
    opacity: 0;
  }
}

@keyframes sun-cloud-bob {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ---------------------------------------------------------
   02 — Rain
   --------------------------------------------------------- */

.card--rain {
  --accent: #426b7d;
  --glow: rgba(66, 107, 125, 0.45);
}

.scene--rain {
  background:
    radial-gradient(120% 80% at 50% -6%, rgba(229, 236, 234, 0.23), transparent 56%),
    linear-gradient(180deg, #91a1a6 0%, #647982 43%, #445c66 78%, #304650 100%);
}

.rain-cloud {
  --cloud-shade:
    inset 0 7px 11px rgba(255, 255, 255, 0.2),
    inset 0 -11px 17px rgba(50, 73, 82, 0.1);
  position: absolute;
  left: 50%;
  width: 174px;
  height: 46px;
  border-radius: 999px;
  background: #c9d3d3;
  box-shadow: var(--cloud-shade);
  filter: drop-shadow(0 17px 20px rgba(24, 43, 51, 0.23));
  translate: -50% 0;
}

.rain-cloud::before,
.rain-cloud::after,
.rain-cloud .cloud-puff {
  position: absolute;
  border-radius: 50%;
  background: #c9d3d3;
  box-shadow: var(--cloud-shade);
  content: "";
}

.rain-cloud::before {
  top: -39px;
  left: 18px;
  width: 73px;
  height: 73px;
}

.rain-cloud::after {
  top: -59px;
  left: 64px;
  width: 99px;
  height: 99px;
}

.rain-cloud .cloud-puff {
  top: -28px;
  left: 116px;
  width: 55px;
  height: 55px;
  z-index: 1;
}

.rain-cloud--front {
  top: 24%;
  z-index: 5;
  animation: rain-cloud-drift 8.7s ease-in-out -2.2s infinite;
}

.rain-cloud--back {
  top: 13%;
  z-index: 1;
  scale: 0.51;
  opacity: 0.25;
  filter: blur(0.7px);
  animation: rain-cloud-drift 11.4s ease-in-out -5s infinite reverse;
}

.rainfall {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.drop {
  position: absolute;
  top: 42%;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(218, 236, 241, 0.05) 0%, rgba(232, 244, 247, 0.88) 72%, rgba(245, 251, 252, 0.95) 100%);
  opacity: 0;
  animation: rain-fall var(--dur) cubic-bezier(0.45, 0.05, 0.84, 0.48) var(--delay) infinite;
  will-change: transform, opacity;
}

.splash-field {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.splash {
  position: absolute;
  bottom: 42px;
  left: var(--x);
  width: var(--w);
  height: 6px;
  border: 1px solid rgba(218, 237, 241, 0.62);
  border-radius: 50%;
  opacity: 0;
  animation: rain-splash var(--dur) linear var(--delay) infinite;
  transform: translate(-50%, 0) scale(0.2);
  will-change: transform, opacity;
}

.rain-ground {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 64px;
  background:
    radial-gradient(90% 60% at 50% 100%, rgba(24, 42, 49, 0.62), transparent 74%),
    linear-gradient(to top, rgba(24, 39, 46, 0.77), rgba(47, 69, 78, 0.2) 56%, transparent 100%);
}

.rain-ground::before {
  position: absolute;
  top: 17px;
  right: 6%;
  left: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(213, 233, 237, 0.33) 18%, rgba(213, 233, 237, 0.28) 68%, transparent);
  content: "";
}

.rain-ground::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30px;
  background:
    radial-gradient(32% 160% at 31% 100%, rgba(183, 211, 217, 0.11), transparent 64%),
    radial-gradient(26% 130% at 72% 100%, rgba(208, 231, 234, 0.09), transparent 70%);
  content: "";
}

.ripple {
  position: absolute;
  border: 1px solid rgba(207, 229, 234, 0.14);
  border-radius: 50%;
  animation: ripple-breathe 7s ease-in-out infinite;
}

.ripple--one {
  right: 20%;
  bottom: 20px;
  width: 48px;
  height: 8px;
  animation-delay: -1.8s;
}

.ripple--two {
  bottom: 13px;
  left: 13%;
  width: 32px;
  height: 5px;
  animation-delay: -4.6s;
}

.ripple--three {
  right: 43%;
  bottom: 33px;
  width: 23px;
  height: 4px;
  animation-delay: -2.9s;
}

@keyframes rain-cloud-drift {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@keyframes rain-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -27px, 0) scaleY(0.62);
  }
  8% { opacity: 0.68; }
  68% { opacity: 0.88; }
  80% {
    opacity: 0.9;
    transform: translate3d(0, 142px, 0) scaleY(1.08);
  }
  83%,
  100% {
    opacity: 0;
    transform: translate3d(0, 143px, 0) scaleY(0.7);
  }
}

@keyframes rain-splash {
  0%,
  76% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.18);
  }
  80% {
    opacity: 0.72;
    transform: translate(-50%, -2px) scale(0.7);
  }
  91% {
    opacity: 0.18;
    transform: translate(-50%, 0) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0) scale(1.7);
  }
}

@keyframes ripple-breathe {
  0%,
  100% {
    opacity: 0.26;
    transform: scaleX(0.87);
  }
  50% {
    opacity: 0.66;
    transform: scaleX(1.08);
  }
}

/* ---------------------------------------------------------
   03 — Snow
   --------------------------------------------------------- */

.card--snow {
  --accent: #6c92a3;
  --glow: rgba(108, 146, 163, 0.45);
}

.scene--snow {
  background:
    radial-gradient(55% 47% at 77% 7%, rgba(255, 253, 242, 0.72), transparent 68%),
    radial-gradient(115% 68% at 20% 110%, rgba(234, 245, 248, 0.72), transparent 68%),
    linear-gradient(180deg, #adc5cf 0%, #93b0bc 52%, #7697a6 100%);
}

.snow-light {
  position: absolute;
  top: -16%;
  right: -14%;
  width: 265px;
  height: 265px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 239, 0.62) 0%, rgba(255, 250, 233, 0.22) 38%, transparent 70%);
  filter: blur(17px);
}

.snowfall {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.flake {
  position: absolute;
  top: -13px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(48, 86, 102, 0.3),
    0 0 5px rgba(255, 255, 255, 0.52);
  opacity: 0;
  animation: snow-fall var(--dur) linear var(--delay) infinite;
  will-change: transform, opacity;
}

.flake--star {
  border-radius: 0;
  background:
    linear-gradient(0deg, transparent 44%, rgba(255, 255, 255, 0.94) 44% 56%, transparent 56%),
    linear-gradient(60deg, transparent 44%, rgba(255, 255, 255, 0.94) 44% 56%, transparent 56%),
    linear-gradient(120deg, transparent 44%, rgba(255, 255, 255, 0.94) 44% 56%, transparent 56%);
  box-shadow: none;
  filter:
    drop-shadow(0 1px 1px rgba(49, 86, 101, 0.34))
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.58));
}

.snow-ground {
  position: absolute;
  right: -6%;
  bottom: -26px;
  left: -6%;
  z-index: 3;
  height: 64px;
  border-radius: 56% 44% 0 0 / 100% 76% 0 0;
  background:
    radial-gradient(72% 180% at 22% 100%, rgba(255, 255, 255, 0.82), transparent 66%),
    linear-gradient(180deg, #fbfeff 0%, #f0f8fa 58%, #e2eef2 100%);
  box-shadow:
    0 -7px 16px rgba(68, 104, 119, 0.13),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.snow-ground::before {
  position: absolute;
  top: 2px;
  right: 9%;
  left: 8%;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent);
  filter: blur(3px);
  content: "";
}

.snow-ground::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 17px;
  background: linear-gradient(to top, rgba(108, 148, 162, 0.08), transparent);
  content: "";
}

@keyframes snow-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -19px, 0) rotate(0deg) scale(0.82);
  }
  8% { opacity: var(--o, 0.75); }
  22% {
    transform: translate3d(calc(var(--sway) * -0.8), 64px, 0) rotate(80deg) scale(1);
  }
  45% {
    transform: translate3d(var(--sway), 148px, 0) rotate(180deg) scale(1.03);
  }
  68% {
    transform: translate3d(calc(var(--sway) * -0.45), 238px, 0) rotate(268deg) scale(0.98);
  }
  88% { opacity: var(--o, 0.75); }
  100% {
    opacity: 0;
    transform: translate3d(0, 354px, 0) rotate(360deg) scale(0.88);
  }
}

/* ---------------------------------------------------------
   04 — Storm
   --------------------------------------------------------- */

.card--storm {
  --accent: #607eac;
  --glow: rgba(96, 126, 172, 0.48);
}

.scene--storm {
  background:
    radial-gradient(70% 52% at 55% 41%, rgba(80, 104, 137, 0.31), transparent 70%),
    radial-gradient(90% 45% at 48% 102%, rgba(84, 108, 136, 0.23), transparent 69%),
    linear-gradient(180deg, #0c141e 0%, #172230 47%, #263343 82%, #1a2530 100%);
}

.storm-cloud {
  --cloud-shade:
    inset 0 8px 13px rgba(157, 179, 204, 0.14),
    inset 0 -14px 21px rgba(3, 8, 14, 0.2);
  position: absolute;
  left: 50%;
  width: 192px;
  height: 53px;
  border-radius: 999px;
  background: #344152;
  box-shadow: var(--cloud-shade);
  filter: drop-shadow(0 20px 26px rgba(2, 7, 13, 0.44));
  translate: -50% 0;
}

.storm-cloud::before,
.storm-cloud::after,
.storm-cloud .cloud-puff {
  position: absolute;
  border-radius: 50%;
  background: #344152;
  box-shadow: var(--cloud-shade);
  content: "";
}

.storm-cloud::before {
  top: -43px;
  left: 17px;
  width: 80px;
  height: 80px;
}

.storm-cloud::after {
  top: -66px;
  left: 68px;
  width: 108px;
  height: 108px;
}

.storm-cloud .cloud-puff {
  top: -30px;
  left: 129px;
  width: 58px;
  height: 58px;
  z-index: 1;
}

.storm-cloud--front {
  top: 23%;
  z-index: 5;
  animation: storm-cloud-drift 10.4s ease-in-out -3.1s infinite;
}

.storm-cloud--back {
  top: 11%;
  z-index: 1;
  scale: 0.57;
  opacity: 0.28;
  filter: blur(0.8px);
  animation: storm-cloud-drift 13.8s ease-in-out -7.2s infinite reverse;
}

.storm-haze {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(50% 44% at 56% 29%, rgba(105, 132, 168, 0.14), transparent 76%),
    linear-gradient(to top, rgba(6, 12, 19, 0.44), transparent 30%);
  pointer-events: none;
}

.storm-rain {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.heavy-drop {
  position: absolute;
  top: 41%;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(184, 211, 235, 0.02) 0%, rgba(207, 227, 245, 0.68) 72%, rgba(226, 240, 252, 0.86) 100%);
  opacity: 0;
  animation: storm-rain-fall var(--dur) cubic-bezier(0.46, 0.04, 0.84, 0.5) var(--delay) infinite;
  will-change: transform, opacity;
}

.bolt {
  position: absolute;
  z-index: 2;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 42%, #c8dcff 100%);
  filter:
    drop-shadow(0 0 7px rgba(248, 252, 255, 0.98))
    drop-shadow(0 0 26px rgba(152, 188, 255, 0.8));
  opacity: 0;
  animation: lightning-bolt 29s linear infinite;
  will-change: opacity;
}

.bolt--main {
  top: 14%;
  left: 53%;
  width: 58px;
  height: 231px;
  clip-path: polygon(58% 0%, 81% 0%, 63% 35%, 89% 32%, 33% 100%, 47% 54%, 18% 58%, 43% 18%, 27% 21%);
}

.bolt--branch {
  top: 29%;
  left: 59%;
  width: 35px;
  height: 122px;
  clip-path: polygon(58% 0%, 86% 0%, 64% 37%, 100% 34%, 21% 100%, 42% 59%, 8% 63%, 37% 21%, 18% 25%);
  animation-delay: 0.045s;
  filter:
    drop-shadow(0 0 5px rgba(244, 250, 255, 0.92))
    drop-shadow(0 0 18px rgba(137, 176, 255, 0.65));
}

.storm-ground {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  height: 48px;
  background:
    radial-gradient(38% 165% at 37% 100%, rgba(130, 161, 195, 0.12), transparent 68%),
    linear-gradient(to top, rgba(5, 10, 16, 0.72), transparent);
}

.storm-ground::before {
  position: absolute;
  top: 12px;
  right: 7%;
  left: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(131, 160, 191, 0.17) 30%, rgba(163, 188, 215, 0.12) 65%, transparent);
  content: "";
}

.storm-flash {
  position: absolute;
  inset: 0;
  z-index: 25;
  border-radius: inherit;
  background:
    radial-gradient(58% 52% at 56% 35%, #ffffff 0%, #f0f5ff 34%, #d5e2fb 73%, #c0d4f4 100%);
  opacity: 0;
  pointer-events: none;
  animation: storm-flash 29s linear infinite;
  will-change: opacity;
}

@keyframes storm-cloud-drift {
  0%,
  100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(4px) translateX(2px); }
}

@keyframes storm-rain-fall {
  0% {
    opacity: 0;
    transform: translate3d(8px, -28px, 0) scaleY(0.55);
  }
  7% { opacity: 0.6; }
  76% { opacity: 0.84; }
  84% {
    opacity: 0.9;
    transform: translate3d(var(--lean), 158px, 0) scaleY(1.08);
  }
  87%,
  100% {
    opacity: 0;
    transform: translate3d(var(--lean), 159px, 0) scaleY(0.7);
  }
}

@keyframes lightning-bolt {
  0%,
  5.4%,
  5.85%,
  6.2%,
  6.65%,
  42.9%,
  43.3%,
  43.8%,
  44.15%,
  74%,
  74.3%,
  74.7%,
  75.1%,
  75.5%,
  75.9%,
  100% {
    opacity: 0;
  }
  5.55% { opacity: 0.56; }
  5.9% { opacity: 0.08; }
  6.4% { opacity: 1; }
  6.7% { opacity: 0; }
  43.05% { opacity: 0.58; }
  43.5% { opacity: 0.08; }
  43.95% { opacity: 0.74; }
  44.2% { opacity: 0; }
  74.1% { opacity: 0.78; }
  74.45% { opacity: 0.1; }
  74.85% { opacity: 1; }
  75.2% { opacity: 0.25; }
  75.6% { opacity: 0.88; }
  75.95% { opacity: 0; }
}

@keyframes storm-flash {
  0%,
  5.4%,
  5.85%,
  6.2%,
  6.65%,
  42.9%,
  43.3%,
  43.8%,
  44.15%,
  74%,
  74.3%,
  74.7%,
  75.1%,
  75.5%,
  75.9%,
  100% {
    opacity: 0;
  }
  5.55% { opacity: 0.25; }
  5.9% { opacity: 0.03; }
  6.4% { opacity: 0.63; }
  6.7% { opacity: 0; }
  43.05% { opacity: 0.27; }
  43.5% { opacity: 0.025; }
  43.95% { opacity: 0.43; }
  44.2% { opacity: 0; }
  74.1% { opacity: 0.4; }
  74.45% { opacity: 0.035; }
  74.85% { opacity: 0.7; }
  75.2% { opacity: 0.1; }
  75.6% { opacity: 0.52; }
  75.95% { opacity: 0; }
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.colophon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: auto;
  padding-top: 36px;
  color: #77837a;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.colophon span {
  margin: 0 5px;
  color: #3e4942;
}

.colophon__meta {
  text-align: right;
}

/* ---------------------------------------------------------
   Hover polish
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-5px);
    box-shadow:
      0 2px 0 rgba(255, 255, 255, 0.26) inset,
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 36px 70px -24px rgba(0, 0, 0, 0.68);
  }
}

/* ---------------------------------------------------------
   Responsive composition
   --------------------------------------------------------- */

@media (max-width: 1180px) {
  .page {
    width: min(820px, calc(100% - 48px));
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .intro {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 34px;
  }

  .intro__copy {
    font-size: 12px;
  }
}

@media (max-width: 860px) {
  .intro {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .intro__copy {
    max-width: 430px;
    padding-bottom: 0;
    justify-self: start;
  }

  .colophon {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  :root {
    --card-h: 430px;
  }

  .page {
    width: calc(100% - 32px);
    padding-top: 20px;
    padding-bottom: 18px;
  }

  .masthead {
    gap: 16px;
    padding-bottom: 14px;
  }

  .brand__word {
    font-size: 12px;
  }

  .masthead__meta {
    font-size: 7.5px;
    letter-spacing: 0.06em;
  }

  .masthead__meta span {
    margin: 0 3px;
  }

  .intro {
    margin-top: 39px;
  }

  .intro h1 {
    font-size: clamp(40px, 11vw, 52px);
  }

  .eyebrow {
    margin-bottom: 13px;
    font-size: 8px;
  }

  .cards {
    grid-template-columns: minmax(0, 380px);
    justify-content: center;
    gap: 13px;
    margin-top: 29px;
  }

  .card__info {
    flex-basis: 106px;
    height: 106px;
    padding: 13px 14px 12px;
  }

  .card__temp {
    font-size: 41px;
  }

  .colophon {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding-top: 27px;
    text-align: left;
  }

  .colophon__meta {
    text-align: left;
  }
}

@media (max-width: 370px) {
  .page {
    width: calc(100% - 20px);
  }

  .brand__word {
    letter-spacing: 0.25em;
  }

  .masthead__meta span:first-of-type,
  .masthead__meta span:first-of-type + span {
    display: none;
  }
}

/* ---------------------------------------------------------
   Calm mode
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-play-state: paused !important;
    transition-duration: 0.01ms !important;
  }

  .card:hover {
    transform: none;
  }
}

  </style>
</head>
<body>
  <div class="page">
    <header class="masthead">
      <div class="brand">
        <span class="brand__mark" aria-hidden="true"></span>
        <span class="brand__word">AER</span>
      </div>
      <p class="masthead__meta">Weather index <span>/</span> Vol. 04 <span>/</span> 17 Oct 2026</p>
    </header>

    <section class="intro" aria-labelledby="page-title">
      <div class="intro__title">
        <p class="eyebrow"><span class="eyebrow__line" aria-hidden="true"></span>Conditions at a glance</p>
        <h1 id="page-title">Four skies,<br><em>one afternoon.</em></h1>
      </div>
      <p class="intro__copy">
        Four small weather systems, drawn entirely in CSS. Light, water, snow and electricity &mdash; every drop, flake and flicker is made of code.
        <span>No scripts. No images.</span>
      </p>
    </section>

    <main class="cards" aria-label="Weather conditions">

      <article class="card card--sun" aria-labelledby="sun-name">
        <div class="scene scene--sun" role="img" aria-label="A glowing sun with slowly turning rays while a small cloud drifts past">
          <div class="sun-system" aria-hidden="true">
            <span class="sun-halo"></span>
            <span class="sun-rays">
              <i class="sun-ray" style="--i: 0"></i>
              <i class="sun-ray" style="--i: 1"></i>
              <i class="sun-ray" style="--i: 2"></i>
              <i class="sun-ray" style="--i: 3"></i>
              <i class="sun-ray" style="--i: 4"></i>
              <i class="sun-ray" style="--i: 5"></i>
              <i class="sun-ray" style="--i: 6"></i>
              <i class="sun-ray" style="--i: 7"></i>
              <i class="sun-ray" style="--i: 8"></i>
              <i class="sun-ray" style="--i: 9"></i>
              <i class="sun-ray" style="--i: 10"></i>
              <i class="sun-ray" style="--i: 11"></i>
              <i class="sun-ray" style="--i: 12"></i>
              <i class="sun-ray" style="--i: 13"></i>
              <i class="sun-ray" style="--i: 14"></i>
              <i class="sun-ray" style="--i: 15"></i>
            </span>
            <span class="sun-disc"></span>
          </div>
          <span class="sun-cloud" aria-hidden="true"></span>
          <span class="sun-horizon" aria-hidden="true"></span>
        </div>

        <div class="card__info">
          <div class="card__top">
            <div class="card__id">
              <span class="card__index">01</span>
              <h2 class="card__name" id="sun-name">Sun</h2>
            </div>
            <p class="card__temp">31<span class="degree">°</span></p>
          </div>
          <div class="card__bottom">
            <span class="condition"><i class="status-dot" aria-hidden="true"></i>Clear skies</span>
            <span class="feels">Feels 33°</span>
          </div>
        </div>
      </article>

      <article class="card card--rain" aria-labelledby="rain-name">
        <div class="scene scene--rain" role="img" aria-label="A grey cloud releasing staggered rain into a rippling puddle">
          <span class="rain-cloud rain-cloud--back" aria-hidden="true"></span>
          <span class="rain-cloud rain-cloud--front" aria-hidden="true"><i class="cloud-puff"></i></span>

          <span class="rainfall" aria-hidden="true">
            <i class="drop" style="--x: 25%; --w: 1.4px; --h: 15px; --dur: 1.45s; --delay: -0.20s"></i>
            <i class="drop" style="--x: 31%; --w: 1.6px; --h: 18px; --dur: 1.68s; --delay: -1.10s"></i>
            <i class="drop" style="--x: 36%; --w: 1.2px; --h: 13px; --dur: 1.30s; --delay: -0.72s"></i>
            <i class="drop" style="--x: 41%; --w: 1.5px; --h: 16px; --dur: 1.78s; --delay: -1.48s"></i>
            <i class="drop" style="--x: 47%; --w: 1.3px; --h: 20px; --dur: 1.56s; --delay: -0.42s"></i>
            <i class="drop" style="--x: 52%; --w: 1.7px; --h: 15px; --dur: 1.36s; --delay: -1.27s"></i>
            <i class="drop" style="--x: 57%; --w: 1.4px; --h: 17px; --dur: 1.72s; --delay: -0.06s"></i>
            <i class="drop" style="--x: 62%; --w: 1.2px; --h: 13px; --dur: 1.40s; --delay: -0.94s"></i>
            <i class="drop" style="--x: 67%; --w: 1.6px; --h: 19px; --dur: 1.62s; --delay: -1.56s"></i>
            <i class="drop" style="--x: 72%; --w: 1.3px; --h: 15px; --dur: 1.50s; --delay: -0.58s"></i>
            <i class="drop" style="--x: 28%; --w: 1.5px; --h: 17px; --dur: 1.76s; --delay: -1.32s"></i>
            <i class="drop" style="--x: 44%; --w: 1.2px; --h: 14px; --dur: 1.34s; --delay: -1.02s"></i>
            <i class="drop" style="--x: 54%; --w: 1.5px; --h: 18px; --dur: 1.64s; --delay: -0.34s"></i>
            <i class="drop" style="--x: 68%; --w: 1.3px; --h: 14px; --dur: 1.54s; --delay: -1.51s"></i>
          </span>

          <span class="splash-field" aria-hidden="true">
            <i class="splash" style="--x: 25%; --w: 15px; --dur: 1.45s; --delay: -0.20s"></i>
            <i class="splash" style="--x: 36%; --w: 11px; --dur: 1.30s; --delay: -0.72s"></i>
            <i class="splash" style="--x: 47%; --w: 17px; --dur: 1.56s; --delay: -0.42s"></i>
            <i class="splash" style="--x: 57%; --w: 13px; --dur: 1.72s; --delay: -0.06s"></i>
            <i class="splash" style="--x: 67%; --w: 16px; --dur: 1.62s; --delay: -1.56s"></i>
            <i class="splash" style="--x: 28%; --w: 12px; --dur: 1.76s; --delay: -1.32s"></i>
            <i class="splash" style="--x: 44%; --w: 10px; --dur: 1.34s; --delay: -1.02s"></i>
            <i class="splash" style="--x: 68%; --w: 14px; --dur: 1.54s; --delay: -1.51s"></i>
          </span>

          <span class="rain-ground" aria-hidden="true">
            <i class="ripple ripple--one"></i>
            <i class="ripple ripple--two"></i>
            <i class="ripple ripple--three"></i>
          </span>
        </div>

        <div class="card__info">
          <div class="card__top">
            <div class="card__id">
              <span class="card__index">02</span>
              <h2 class="card__name" id="rain-name">Rain</h2>
            </div>
            <p class="card__temp">16<span class="degree">°</span></p>
          </div>
          <div class="card__bottom">
            <span class="condition"><i class="status-dot" aria-hidden="true"></i>Steady rain</span>
            <span class="feels">Feels 14°</span>
          </div>
        </div>
      </article>

      <article class="card card--snow" aria-labelledby="snow-name">
        <div class="scene scene--snow" role="img" aria-label="Snowflakes of different sizes drifting slowly down to a soft mound of snow">
          <span class="snow-light" aria-hidden="true"></span>
          <span class="snowfall" aria-hidden="true">
            <i class="flake" style="--x: 7%; --s: 4px; --dur: 11.5s; --delay: -4.1s; --sway: 18px; --o: .68"></i>
            <i class="flake" style="--x: 14%; --s: 6px; --dur: 9.8s; --delay: -2.2s; --sway: 24px; --o: .82"></i>
            <i class="flake flake--star" style="--x: 22%; --s: 10px; --dur: 13.2s; --delay: -7.3s; --sway: 16px; --o: .76"></i>
            <i class="flake" style="--x: 30%; --s: 3px; --dur: 12.4s; --delay: -5.5s; --sway: 26px; --o: .55"></i>
            <i class="flake" style="--x: 38%; --s: 7px; --dur: 8.7s; --delay: -1.4s; --sway: 20px; --o: .9"></i>
            <i class="flake" style="--x: 45%; --s: 4px; --dur: 13.8s; --delay: -9.2s; --sway: 30px; --o: .62"></i>
            <i class="flake" style="--x: 52%; --s: 5px; --dur: 10.3s; --delay: -3.7s; --sway: 14px; --o: .75"></i>
            <i class="flake flake--star" style="--x: 59%; --s: 8px; --dur: 14.2s; --delay: -6.6s; --sway: 22px; --o: .7"></i>
            <i class="flake" style="--x: 66%; --s: 3px; --dur: 9.4s; --delay: -4.9s; --sway: 18px; --o: .58"></i>
            <i class="flake" style="--x: 73%; --s: 6px; --dur: 11.1s; --delay: -1.9s; --sway: 28px; --o: .85"></i>
            <i class="flake" style="--x: 81%; --s: 4px; --dur: 12.8s; --delay: -8.1s; --sway: 20px; --o: .6"></i>
            <i class="flake flake--star" style="--x: 89%; --s: 11px; --dur: 10.8s; --delay: -5.9s; --sway: 12px; --o: .78"></i>
            <i class="flake" style="--x: 94%; --s: 3px; --dur: 13.5s; --delay: -3.1s; --sway: 24px; --o: .5"></i>
            <i class="flake" style="--x: 18%; --s: 8px; --dur: 12.1s; --delay: -10.4s; --sway: 32px; --o: .72"></i>
            <i class="flake" style="--x: 34%; --s: 5px; --dur: 10.9s; --delay: -6.9s; --sway: 16px; --o: .66"></i>
            <i class="flake" style="--x: 49%; --s: 9px; --dur: 14.6s; --delay: -11.2s; --sway: 26px; --o: .77"></i>
            <i class="flake" style="--x: 63%; --s: 4px; --dur: 11.7s; --delay: -2.8s; --sway: 22px; --o: .6"></i>
            <i class="flake" style="--x: 78%; --s: 7px; --dur: 9.1s; --delay: -7.7s; --sway: 18px; --o: .88"></i>
            <i class="flake" style="--x: 86%; --s: 5px; --dur: 12.7s; --delay: -4.5s; --sway: 30px; --o: .7"></i>
            <i class="flake" style="--x: 42%; --s: 3px; --dur: 13.3s; --delay: -8.8s; --sway: 20px; --o: .48"></i>
          </span>
          <span class="snow-ground" aria-hidden="true"></span>
        </div>

        <div class="card__info">
          <div class="card__top">
            <div class="card__id">
              <span class="card__index">03</span>
              <h2 class="card__name" id="snow-name">Snow</h2>
            </div>
            <p class="card__temp">&minus;4<span class="degree">°</span></p>
          </div>
          <div class="card__bottom">
            <span class="condition"><i class="status-dot" aria-hidden="true"></i>Light flurries</span>
            <span class="feels">Feels &minus;8°</span>
          </div>
        </div>
      </article>

      <article class="card card--storm" aria-labelledby="storm-name">
        <div class="scene scene--storm" role="img" aria-label="A dark thundercloud with heavy rain, a jagged lightning bolt and irregular flashes of light">
          <span class="storm-cloud storm-cloud--back" aria-hidden="true"></span>
          <span class="storm-haze" aria-hidden="true"></span>

          <span class="storm-rain" aria-hidden="true">
            <i class="heavy-drop" style="--x: 16%; --w: 1.5px; --h: 22px; --dur: 1.02s; --delay: -0.12s; --lean: -10px"></i>
            <i class="heavy-drop" style="--x: 22%; --w: 2px; --h: 27px; --dur: 0.90s; --delay: -0.58s; --lean: -7px"></i>
            <i class="heavy-drop" style="--x: 27%; --w: 1.3px; --h: 19px; --dur: 1.08s; --delay: -0.31s; --lean: -12px"></i>
            <i class="heavy-drop" style="--x: 33%; --w: 1.8px; --h: 24px; --dur: 0.96s; --delay: -0.74s; --lean: -8px"></i>
            <i class="heavy-drop" style="--x: 38%; --w: 1.4px; --h: 21px; --dur: 1.12s; --delay: -0.05s; --lean: -11px"></i>
            <i class="heavy-drop" style="--x: 43%; --w: 2.1px; --h: 28px; --dur: 0.86s; --delay: -0.47s; --lean: -7px"></i>
            <i class="heavy-drop" style="--x: 48%; --w: 1.5px; --h: 23px; --dur: 1.04s; --delay: -0.83s; --lean: -10px"></i>
            <i class="heavy-drop" style="--x: 53%; --w: 1.7px; --h: 26px; --dur: 0.94s; --delay: -0.22s; --lean: -8px"></i>
            <i class="heavy-drop" style="--x: 59%; --w: 1.3px; --h: 20px; --dur: 1.10s; --delay: -0.61s; --lean: -12px"></i>
            <i class="heavy-drop" style="--x: 64%; --w: 2px; --h: 25px; --dur: 0.88s; --delay: -0.38s; --lean: -7px"></i>
            <i class="heavy-drop" style="--x: 69%; --w: 1.4px; --h: 22px; --dur: 1.06s; --delay: -0.91s; --lean: -10px"></i>
            <i class="heavy-drop" style="--x: 74%; --w: 1.8px; --h: 27px; --dur: 0.92s; --delay: -0.15s; --lean: -8px"></i>
            <i class="heavy-drop" style="--x: 79%; --w: 1.2px; --h: 19px; --dur: 1.14s; --delay: -0.53s; --lean: -11px"></i>
            <i class="heavy-drop" style="--x: 85%; --w: 1.6px; --h: 23px; --dur: 1.00s; --delay: -0.79s; --lean: -9px"></i>
            <i class="heavy-drop" style="--x: 31%; --w: 1.4px; --h: 21px; --dur: 0.98s; --delay: -0.67s; --lean: -10px"></i>
            <i class="heavy-drop" style="--x: 56%; --w: 1.8px; --h: 25px; --dur: 0.84s; --delay: -0.28s; --lean: -7px"></i>
            <i class="heavy-drop" style="--x: 71%; --w: 1.4px; --h: 20px; --dur: 1.05s; --delay: -0.44s; --lean: -11px"></i>
            <i class="heavy-drop" style="--x: 90%; --w: 1.3px; --h: 22px; --dur: 0.94s; --delay: -0.36s; --lean: -9px"></i>
            <i class="heavy-drop" style="--x: 12%; --w: 1.4px; --h: 21px; --dur: 0.88s; --delay: -0.19s; --lean: -9px"></i>
            <i class="heavy-drop" style="--x: 19%; --w: 1.7px; --h: 25px; --dur: 1.04s; --delay: -0.66s; --lean: -8px"></i>
            <i class="heavy-drop" style="--x: 24%; --w: 1.3px; --h: 20px; --dur: 0.82s; --delay: -0.32s; --lean: -11px"></i>
            <i class="heavy-drop" style="--x: 36%; --w: 1.6px; --h: 24px; --dur: 0.93s; --delay: -0.88s; --lean: -8px"></i>
            <i class="heavy-drop" style="--x: 46%; --w: 1.3px; --h: 19px; --dur: 1.07s; --delay: -0.41s; --lean: -10px"></i>
            <i class="heavy-drop" style="--x: 51%; --w: 1.8px; --h: 26px; --dur: 0.80s; --delay: -0.09s; --lean: -7px"></i>
            <i class="heavy-drop" style="--x: 58%; --w: 1.4px; --h: 21px; --dur: 1.01s; --delay: -0.72s; --lean: -11px"></i>
            <i class="heavy-drop" style="--x: 63%; --w: 1.6px; --h: 24px; --dur: 0.86s; --delay: -0.25s; --lean: -8px"></i>
            <i class="heavy-drop" style="--x: 67%; --w: 1.2px; --h: 18px; --dur: 1.09s; --delay: -0.55s; --lean: -10px"></i>
            <i class="heavy-drop" style="--x: 76%; --w: 1.7px; --h: 26px; --dur: 0.90s; --delay: -0.48s; --lean: -7px"></i>
            <i class="heavy-drop" style="--x: 83%; --w: 1.4px; --h: 21px; --dur: 1.03s; --delay: -0.77s; --lean: -11px"></i>
            <i class="heavy-drop" style="--x: 88%; --w: 1.8px; --h: 25px; --dur: 0.84s; --delay: -0.13s; --lean: -8px"></i>
          </span>

          <span class="bolt bolt--main" aria-hidden="true"></span>
          <span class="bolt bolt--branch" aria-hidden="true"></span>
          <span class="storm-cloud storm-cloud--front" aria-hidden="true"><i class="cloud-puff"></i></span>
          <span class="storm-ground" aria-hidden="true"></span>
        </div>

        <div class="card__info">
          <div class="card__top">
            <div class="card__id">
              <span class="card__index">04</span>
              <h2 class="card__name" id="storm-name">Storm</h2>
            </div>
            <p class="card__temp">21<span class="degree">°</span></p>
          </div>
          <div class="card__bottom">
            <span class="condition"><i class="status-dot" aria-hidden="true"></i>Thunder cells</span>
            <span class="feels">Feels 19°</span>
          </div>
        </div>
        <span class="storm-flash" aria-hidden="true"></span>
      </article>

    </main>

    <footer class="colophon">
      <p>Made of light, water &amp; static <span>/</span> Pure CSS, no JavaScript</p>
      <p class="colophon__meta">52.3676° N <span>·</span> 4.9041° E <span>·</span> Updated 16:40</p>
    </footer>
  </div>
</body>
</html>

Watch the test

Video tests of this model on coding and agent work.

DeepSeek V4.1 Flash First Test | Better V4 Flash? | Coding with OpenCode, Frontend & Agentic Work11 Sep 2026

Same prompt, other models

9 more
Compare side by side

One email when a new model lands on the board or in the showcase. Unsubscribe anytime.