:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #163640; background: #e9f1f2; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 80% 8%, #fff 0, transparent 33%), linear-gradient(160deg, #e9f1f2 0%, #dce9e8 100%); }
.shell { width: min(100%, 1100px); min-height: 100vh; margin: auto; padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; }
.masthead { display: flex; gap: 12px; align-items: center; font-size: 12px; font-weight: 750; letter-spacing: .19em; }
.mark { font-size: 32px; line-height: 18px; font-weight: 400; color: #df805d; }
.local-time { margin-left: auto; color: #59717a; font-size: 12px; font-weight: 550; letter-spacing: .04em; }
.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 68px 0 80px; }
.eyebrow,.detail-label { font-size: 11px; font-weight: 750; letter-spacing: .19em; color: #58717a; }
h1 { margin: 14px 0 0; font-size: clamp(84px, 16vw, 180px); letter-spacing: -.085em; line-height: .96; font-weight: 650; }
.dot { color: #df805d; }
.intro { margin: 25px 0 0; font-size: clamp(18px, 2.5vw, 24px); color: #45636d; }
.weather { display: flex; align-items: center; gap: clamp(20px, 5vw, 60px); margin-top: clamp(55px, 9vw, 100px); }
.temperature { display: flex; align-items: flex-start; font-size: clamp(90px, 17vw, 185px); line-height: .8; letter-spacing: -.09em; font-weight: 550; font-variant-numeric: tabular-nums; }
.degree { font-size: .45em; line-height: .7; letter-spacing: 0; color: #df805d; }
.condition { border-left: 1px solid #acc4c7; padding: 12px 0 12px clamp(20px, 4vw, 50px); }
.condition-name { font-size: clamp(23px, 3vw, 33px); font-weight: 600; }
.updated { margin-top: 10px; color: #58717a; font-size: 14px; }
.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; gap: 28px; margin-top: 55px; padding-top: 25px; border-top: 1px solid #b9cdcf; }
.details div { display: flex; flex-direction: column; gap: 10px; }
.details strong { font-size: clamp(19px, 2.5vw, 25px); font-weight: 600; font-variant-numeric: tabular-nums; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; border-top: 1px solid #b9cdcf; padding-top: 19px; color: #59717a; font-size: 12px; line-height: 1.5; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: #163640; }
@media (max-width: 620px) { .masthead { font-size: 10px; } .local-time { font-size: 10px; } .hero { padding-top: 80px; } .weather { align-items: flex-start; flex-direction: column; gap: 28px; } .condition { padding-top: 3px; padding-bottom: 3px; } .details { gap: 12px; } }