.studio-conditions{padding:0;overflow:hidden;container-type:inline-size;background:#0b1016;display:flex;flex-direction:column}
.studio-banner{position:relative;margin:16px 10px 10px}
.studio-banner>img{display:block;width:100%;height:auto}
.studio-banner>div{position:absolute;left:32%;right:2%;top:9%;text-align:center;color:white;font-family:Arial,sans-serif;text-shadow:1px 2px #000}
.studio-banner h2{font-size:3.15cqw;font-weight:800;letter-spacing:0;line-height:1.1}
.studio-banner p{font-size:2cqw;font-weight:700;margin-top:1.2cqw}
.studio-readings{position:relative;width:96%;margin:10px auto 0;font-family:Arial,sans-serif;font-weight:700;line-height:1;container-type:inline-size}
.studio-template{width:100%;height:auto;display:block}
.studio-temperature{position:absolute;left:3.4%;top:5%;width:37%;height:32%;display:flex;justify-content:center;align-items:center;color:#000;font-size:19cqw;letter-spacing:-.9cqw}
.studio-temperature sup{font-size:7cqw;align-self:center;letter-spacing:0;line-height:1;transform:translateY(-4cqw)}
.studio-station{position:absolute;left:45%;top:4%;width:45%;height:32%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2cqw;color:#dce7ef;font-size:2.7cqw;text-align:center;font-weight:400}
.studio-station b{font-size:2.6cqw;letter-spacing:.3cqw;color:#8ce3bf}.studio-station strong{font-size:4cqw;color:#fff}.studio-dot{height:1.3cqw;width:1.3cqw;background:#80dab1;border-radius:50%}.studio-conditions[data-state="stale"] .studio-dot,.studio-conditions[data-state="error"] .studio-dot{background:#f7c35c}
.studio-metrics{position:absolute;inset:41.4% 7.9% 2.5% .8%;margin:0;display:grid;grid-template-rows:repeat(4,1fr);row-gap:1.5%}
.studio-metrics>div{display:grid;grid-template-columns:46% 54%;align-items:center;min-width:0}
.studio-metrics dt{color:#ffef40;font-size:5.4cqw;padding-left:2%;text-shadow:1px 1px 1px #000;font-weight:800;white-space:nowrap}
.studio-metrics dd{margin:0;padding-left:5%;font-size:5.6cqw;color:#000;white-space:nowrap;letter-spacing:-.1cqw}
.studio-metrics dd sup{font-size:.65em;vertical-align:super;line-height:0}
.studio-metrics #station-wind{font-size:4.5cqw}
.studio-metrics #station-pressure{font-size:4.9cqw}
.studio-update{display:flex;flex-wrap:wrap;gap:6px 12px;padding:14px 20px 0;font-size:11px;color:#a6becf;line-height:1.5;margin-top:auto}.studio-update time{display:block}.studio-conditions[data-state="stale"] .studio-update,.studio-conditions[data-state="error"] .studio-update{color:#f7c35c}
.studio-conditions .station-credit{font-size:10px;line-height:1.5;flex-wrap:wrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.studio-banner{margin:14px 8px 6px}.studio-update{padding:12px 14px 0}.studio-conditions .station-credit{padding:12px 14px}}

/* Fit the template instead of stretching the card to the radar height. */
.weather-grid .studio-conditions{align-self:start}
.studio-update{margin-top:0}
.studio-readings{width:104%;margin-left:1%;margin-right:0}
.studio-sky{gap:1.5cqw;padding:1.5cqw}
.studio-sky img{max-width:96%;max-height:72%;object-fit:contain}
.studio-sky img[hidden]{display:none}
.studio-sky #station-sky-label{font-size:3.8cqw;font-weight:700;line-height:1.2;color:#fff}
.studio-sky:has(img:not([hidden])) #station-sky-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(min-width:901px){.weather-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}}


.studio-sky img[src$="/clear-night.png"]{width:90%;height:72%;object-fit:contain}