*{box-sizing:border-box}
html{font-size:min(1vw,10.8px)}
html,body{margin:0;min-height:100%;background:#102c38;color:#fff;font-family:Arial,Helvetica,sans-serif}
body{background:linear-gradient(150deg,#214b56,#102633 75%)}
.screen{width:100%;max-width:1080px;min-height:100vh;margin:auto;padding:4rem;display:flex;flex-direction:column;gap:2rem}
.heading>p{color:#e0ecee;font-size:3rem;margin:0 0 1rem}
h1{font-size:4.6rem;letter-spacing:-.025em;line-height:1.12;margin:0;font-weight:700}
.datetime{margin-top:2rem;display:flex;align-items:center;gap:3rem}
#clock{font-size:8.5rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
#date{font-size:3rem;line-height:1.3;color:#e0ecee;max-width:12em}
.eyebrow{font-size:2.5rem;letter-spacing:.08em;color:#e2f4b1;font-weight:700}
.hero{display:flex;align-items:center;justify-content:space-between;height:29rem}
#temperature{font-size:29rem;line-height:1;letter-spacing:-.07em;font-weight:700}
sup{font-size:.5em;vertical-align:top;position:relative;top:.12em}
.hero-icon{font-size:15rem;color:#eef8c9;padding-right:2rem}
h2{margin:0;font-weight:700}
.current h2{font-size:5.5rem;letter-spacing:-.02em;line-height:1.1}
.current p{font-size:3.2rem;color:#e0ecee;margin:1.2rem 0 0;line-height:1.35}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #ffffff55;border-radius:1.5rem;background:#ffffff09;padding:2.5rem 0}
.metrics>div{padding:0 2rem;border-right:1px solid #ffffff55}
.metrics>div:last-child{border:0}
.metrics span{font-size:2.3rem;letter-spacing:.06em;color:#e0ecee;font-weight:700}
.metrics strong{display:block;font-size:3.9rem;font-weight:700;margin-top:1.4rem;white-space:nowrap}
.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;gap:1rem}
.section-title h2{font-size:3.7rem}
.section-title span{font-size:2.2rem;color:#e0ecee}
.hours{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.hour{text-align:center;background:#ffffff0d;border-radius:1.2rem;padding:2rem .3rem;font-size:2.7rem;color:#e0ecee;font-weight:700}
.hour .icon{display:block;font-size:5rem;margin:1.8rem 0;color:#eef8c9}
.hour strong{display:block;font-size:4.3rem;color:#fff}
.hour small{display:block;font-size:2.6rem;margin-top:1.4rem;color:#cceefa}
.day{display:grid;grid-template-columns:1.3fr 5rem 2fr .7fr 1.7fr;align-items:center;gap:1rem;padding:2rem 0;border-bottom:1px solid #ffffff40;font-size:3.3rem;font-weight:700}
.day .icon{font-size:4.5rem;color:#eef8c9}
.day .description{font-size:2.7rem;color:#e0ecee;font-weight:400;line-height:1.2}
.day .chance{font-size:2.7rem;color:#cceefa;text-align:right}
.day .temps{text-align:right;white-space:nowrap}
.day .temps span{color:#d1e1e6}
footer{margin-top:auto;padding-top:1rem;color:#d1e1e6;font-size:2rem;line-height:1.4}
#status{color:#e2f4b1;margin-bottom:1rem;min-height:1.4em}
#status.warning{color:#ffdda7;font-weight:700}
.footer-row{display:flex;justify-content:space-between;gap:1rem}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}
@media(min-aspect-ratio:3/4){html{font-size:min(1vw,6px)}.screen{max-width:600px}}