.forecast-colour-key{margin:12px 0 4px;max-width:520px}
.forecast-colour-key-caption{margin-bottom:5px;color:#7896a5;font:700 9px ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase}
.forecast-colour-key-labels{display:flex;justify-content:space-between;gap:12px;color:#91aeba;font:700 9px ui-monospace,monospace}
.forecast-colour-key-bar{height:7px;margin-top:5px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:linear-gradient(90deg,hsl(120 88% 46%) 0%,hsl(92 88% 48%) 25%,hsl(42 92% 52%) 50%,hsl(20 92% 52%) 75%,hsl(0 88% 54%) 100%);box-shadow:0 0 12px rgba(0,0,0,.28)}
.forecast-table td.forecast-cloud-cell{background:hsl(var(--cloud-hue) 70% 18%/.58);transition:background-color .15s ease}
.forecast-table td.forecast-cloud-cell strong.forecast-cloud-value{color:hsl(var(--cloud-hue) 92% 64%);font-size:15px;text-shadow:0 1px 5px rgba(0,0,0,.72)}
.cloud-cover-0{--cloud-hue:120}
.cloud-cover-5{--cloud-hue:114.4}
.cloud-cover-10{--cloud-hue:108.8}
.cloud-cover-15{--cloud-hue:103.2}
.cloud-cover-20{--cloud-hue:97.6}
.cloud-cover-25{--cloud-hue:92}
.cloud-cover-30{--cloud-hue:82}
.cloud-cover-35{--cloud-hue:72}
.cloud-cover-40{--cloud-hue:62}
.cloud-cover-45{--cloud-hue:52}
.cloud-cover-50{--cloud-hue:42}
.cloud-cover-55{--cloud-hue:37.6}
.cloud-cover-60{--cloud-hue:33.2}
.cloud-cover-65{--cloud-hue:28.8}
.cloud-cover-70{--cloud-hue:24.4}
.cloud-cover-75{--cloud-hue:20}
.cloud-cover-80{--cloud-hue:16}
.cloud-cover-85{--cloud-hue:12}
.cloud-cover-90{--cloud-hue:8}
.cloud-cover-95{--cloud-hue:4}
.cloud-cover-100{--cloud-hue:0}
@media(max-width:560px){.forecast-colour-key{max-width:none}.forecast-colour-key-labels{font-size:8px}}