:root{--weather-ink:#11191b;--weather-deep:#0b1518;--weather-teal:#28777b;--weather-cyan:#83d0cf;--weather-paper:#f3f6f5;--weather-line:#bdc9c7;--weather-muted:#6c7a7c;--weather-warn:#a85c3b;--weather-violet:#8177a3}
.weather-page{background:#dfe6e5;color:var(--weather-ink)}
.weather-main{padding:150px clamp(14px,4vw,62px) 100px;background:radial-gradient(circle at 82% 2%,rgba(131,208,207,.24),transparent 26%),linear-gradient(180deg,#dce5e4,#eef2f1 37%,#e3e9e8)}
.weather-masthead{display:grid;max-width:1380px;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px;margin:0 auto 36px;padding:0 4px 30px;border-bottom:1px solid #92a3a1}
.weather-masthead>div>span,.weather-section-heading span,.weather-indices header span,.weather-observations header span{color:var(--weather-teal);font:700 9px/1 var(--mono);letter-spacing:.13em}
.weather-masthead h1{margin:13px 0 12px;font-size:clamp(47px,6.5vw,88px);line-height:1;letter-spacing:-.07em}.weather-masthead p{max-width:620px;margin:0;color:#566466;font-size:12px;line-height:1.8}
.weather-mast-status{min-width:230px;padding:18px 21px;border:1px solid #819492;background:rgba(243,247,246,.72);box-shadow:7px 7px 0 rgba(40,119,123,.16)}
.weather-mast-status span{display:block;color:#315c60;font:700 8px/1 var(--mono);letter-spacing:.08em}.weather-mast-status span i,.weather-live i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#70c7c6;box-shadow:0 0 12px #70c7c6}.weather-mast-status b{display:block;margin-top:14px;font:700 20px/1 var(--mono)}.weather-mast-status small{display:block;margin-top:8px;color:#758183;font-size:9px}
.weather-app{max-width:1380px;margin:0 auto;border:1px solid #8d9c9a;background:#f7f9f8;box-shadow:0 30px 90px rgba(25,48,50,.15)}
.weather-toolbar{display:grid;grid-template-columns:160px 150px minmax(0,1fr);align-items:center;gap:18px;padding:19px 22px;border-bottom:1px solid #a9b6b4;background:#fbfcfc}.weather-toolbar>div:first-child span{display:block;color:var(--weather-teal);font:700 8px/1 var(--mono);letter-spacing:.08em}.weather-toolbar>div:first-child strong{display:block;margin-top:6px;font-size:12px}.weather-world-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid #829492}.weather-world-tabs button{padding:12px 13px;border:0;border-right:1px solid #829492;background:#fff;color:#4e5d5f;font-size:10px;font-weight:700;cursor:pointer}.weather-world-tabs button:last-child{border-right:0}.weather-world-tabs button:hover{background:#e8f0ee}.weather-world-tabs button.is-active{background:#173f43;color:#fff}
.weather-region-tabs{display:flex;min-width:0;overflow-x:auto;border-left:1px solid #b9c4c2}.weather-region-tabs button{flex:1 0 126px;padding:13px 14px;border:0;border-right:1px solid #b9c4c2;background:transparent;color:#596769;font:600 10px/1.3 var(--sans);cursor:pointer;transition:.15s}.weather-region-tabs button:hover{background:#edf4f2}.weather-region-tabs button.is-active{background:#173f43;color:#fff}.weather-region-tabs button small{display:block;margin-top:5px;color:inherit;font:600 7px/1 var(--mono);opacity:.62}
.weather-current-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(330px,.58fr);border-bottom:1px solid #9eaeac}.weather-now{padding:clamp(25px,4vw,52px);border-right:1px solid #9eaeac}.weather-now>header{display:flex;align-items:flex-start;justify-content:space-between;gap:25px}.weather-now>header span:first-child{color:var(--weather-teal);font:700 9px/1 var(--mono);letter-spacing:.1em}.weather-now h2{margin:9px 0 0;font-size:clamp(25px,3vw,42px);letter-spacing:-.05em}.weather-live{padding:8px 10px;border:1px solid #aebbb9;color:#536164!important;font:700 8px/1 var(--mono)!important;letter-spacing:.1em!important}
.weather-now-core{display:grid;grid-template-columns:170px minmax(150px,.7fr) minmax(220px,1fr);align-items:center;gap:30px;margin-top:32px;padding:28px 0;border-top:1px solid #c6d0ce;border-bottom:1px solid #c6d0ce}.weather-condition>span{display:block;font-size:clamp(20px,2.5vw,35px);font-weight:750;letter-spacing:-.04em}.weather-condition>b{display:block;margin-top:9px;font:500 clamp(48px,7vw,88px)/.9 var(--mono);letter-spacing:-.08em}.weather-condition>small{display:block;margin-top:9px;color:#758082;font-size:9px}.weather-now-core dl{margin:0;border-top:1px solid #bdc9c7}.weather-now-core dl>div{display:flex;justify-content:space-between;gap:15px;padding:12px 2px;border-bottom:1px solid #bdc9c7}.weather-now-core dt{color:#687577;font-size:10px}.weather-now-core dd{margin:0;font:700 12px/1 var(--mono)}
.wx-icon{position:relative;display:inline-block;width:72px;height:72px;color:var(--weather-teal)}.wx-icon.is-large{width:142px;height:142px}.wx-icon:before,.wx-icon:after,.wx-icon i:before,.wx-icon i:after,.wx-icon b:before,.wx-icon b:after{content:"";position:absolute}.wx-icon:before{inset:12%;border:2px solid currentColor;border-radius:50%}.wx-icon:after{top:4%;left:49%;width:2px;height:92%;background:linear-gradient(transparent,currentColor 18%,currentColor 24%,transparent 24%,transparent 76%,currentColor 76%,currentColor 82%,transparent);transform:rotate(35deg)}
.wx-earthlight:before{border-width:3px;box-shadow:inset -18px -10px 0 rgba(40,119,123,.14),0 0 25px rgba(131,208,207,.34)}.wx-earthlight i:before{right:8%;top:9%;width:21%;height:21%;border-radius:50%;background:#4f83a0;box-shadow:inset 5px -3px 0 #75b99f}.wx-earthlight b:before{left:20%;bottom:21%;width:45%;height:2px;background:currentColor;box-shadow:12px -10px 0 -0.4px currentColor,23px -20px 0 -0.7px currentColor}
.wx-dust:before{inset:18%;border-style:dashed;animation:wxSpin 12s linear infinite}.wx-dust i:before{left:12%;top:37%;width:76%;height:3px;background:currentColor;box-shadow:0 15px 0 currentColor,0 30px 0 currentColor;transform:skewX(-25deg)}.wx-dust b:before{left:22%;top:23%;width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:48px 35px 0 currentColor,62px 5px 0 currentColor}
.wx-frost:before{inset:19%;border-radius:0;transform:rotate(45deg);box-shadow:0 0 24px rgba(187,221,231,.8)}.wx-frost i:before{left:49%;top:8%;width:2px;height:84%;background:currentColor}.wx-frost i:after{left:8%;top:49%;width:84%;height:2px;background:currentColor}.wx-frost b:before{inset:23%;border:2px solid currentColor;transform:rotate(45deg)}
.wx-radio:before{inset:33%;border-width:3px;box-shadow:0 0 20px rgba(131,208,207,.45)}.wx-radio i:before,.wx-radio i:after{border:2px solid currentColor;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(45deg)}.wx-radio i:before{inset:20%}.wx-radio i:after{inset:7%}.wx-radio b:before{left:47%;top:47%;width:8%;height:8%;border-radius:50%;background:currentColor}
.wx-shadow:before{border-radius:50%;background:#142326;box-shadow:inset 23px -2px 0 #d4e8e6}.wx-shadow:after{display:none}.wx-shadow i:before{right:9%;top:14%;width:18%;height:18%;border-radius:50%;background:#9c92b8;box-shadow:0 0 16px #9c92b8}
.wx-transport:before{inset:16%;border-radius:4px;transform:rotate(45deg)}.wx-transport i:before{left:18%;top:49%;width:64%;height:3px;background:currentColor;box-shadow:0 -15px 0 rgba(40,119,123,.55),0 15px 0 rgba(40,119,123,.55)}.wx-transport b:before{left:44%;top:44%;width:12%;height:12%;border-radius:50%;background:currentColor;box-shadow:0 0 20px currentColor}
.wx-icon:before,.wx-icon:after,.wx-icon i,.wx-icon b,.wx-icon i:before,.wx-icon i:after,.wx-icon b:before,.wx-icon b:after{display:none!important}.wx-icon{background-repeat:no-repeat;background-size:300% 200%;filter:none}.wx-earthlight,.wx-dust,.wx-shadow,.wx-radio,.wx-frost,.wx-transport{background-image:url('./assets/weather/weather-moon-sprite.png')}.wx-clear,.wx-rain,.wx-storm,.wx-snow,.wx-heat,.wx-typhoon{background-image:url('./assets/weather/weather-earth-sprite.png')}.wx-earthlight,.wx-clear{background-position:0 0}.wx-dust,.wx-rain{background-position:50% 0}.wx-shadow,.wx-storm{background-position:100% 0}.wx-radio,.wx-snow{background-position:0 100%}.wx-frost,.wx-heat{background-position:50% 100%}.wx-transport,.wx-typhoon{background-position:100% 100%}
@keyframes wxSpin{to{transform:rotate(360deg)}}
.weather-summary{margin:22px 0 0;color:#526164;font-size:11px;line-height:1.9}.weather-hourly{display:grid;grid-template-columns:repeat(6,1fr);margin-top:25px;border-top:1px solid #b9c5c3;border-left:1px solid #b9c5c3}.weather-hour{min-width:0;padding:14px 10px;border-right:1px solid #b9c5c3;border-bottom:1px solid #b9c5c3;text-align:center}.weather-hour>span{font:700 8px/1 var(--mono);color:#657375}.weather-hour .wx-icon{display:block;width:42px;height:42px;margin:11px auto}.weather-hour b{display:block;font:700 13px/1 var(--mono)}.weather-hour small{display:block;margin-top:7px;color:#7b8788;font-size:7px}
.weather-side{display:grid;grid-template-rows:auto 1fr;background:#edf2f1}.weather-alert{padding:27px 30px;border-bottom:1px solid #aebbb9;background:#fff}.weather-alert header{display:flex;align-items:center;justify-content:space-between;gap:15px}.weather-alert header span{color:#6a7778;font:700 8px/1 var(--mono);letter-spacing:.1em}.weather-alert header b{padding:6px 8px;background:#a85c3b;color:#fff;font:700 8px/1 var(--mono)}.weather-alert[data-alert-level="none"] header b{background:#4d6d62}.weather-alert[data-alert-level="warning"] header b{background:#9b453d}.weather-alert h2{margin:25px 0 12px;font-size:20px}.weather-alert p{margin:0;color:#596769;font-size:10px;line-height:1.9}.weather-alert>small{display:block;margin-top:20px;color:#839091;font:600 8px/1 var(--mono)}
.weather-indices{padding:27px 30px}.weather-indices h2{margin:8px 0 22px;font-size:20px}.weather-index{display:grid;grid-template-columns:98px 1fr 34px;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #bec9c7}.weather-index:last-child{border-bottom:1px solid #bec9c7}.weather-index span{font-size:9px}.weather-index i{height:5px;background:#ced7d5;overflow:hidden}.weather-index i:after{content:"";display:block;width:var(--index);height:100%;background:linear-gradient(90deg,#2d777a,#83d0cf)}.weather-index b{text-align:right;font:700 10px/1 var(--mono)}
.weather-radar-section,.weather-weekly{padding:clamp(28px,4vw,52px);border-bottom:1px solid #9eaeac}.weather-section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px}.weather-section-heading h2{margin:8px 0 0;font-size:clamp(25px,3.2vw,43px);letter-spacing:-.05em}.weather-section-heading>p{max-width:450px;margin:0;color:#667375;font-size:10px;line-height:1.8;text-align:right}
.radar-mode-tabs{display:flex;border:1px solid #9caaa8}.radar-mode-tabs button{padding:11px 18px;border:0;border-right:1px solid #9caaa8;background:#fff;color:#536163;font-size:9px;cursor:pointer}.radar-mode-tabs button:last-child{border-right:0}.radar-mode-tabs button.is-active{background:#173f43;color:#fff}
.weather-radar-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);border:1px solid #8f9f9d}.weather-radar-map{--radar-image:none;position:relative;min-height:500px;overflow:hidden;background-image:linear-gradient(rgba(5,13,15,.18),rgba(5,13,15,.64)),var(--radar-image);background-position:center;background-size:cover;color:#86d4d2;isolation:isolate}.radar-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(131,208,207,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(131,208,207,.16) 1px,transparent 1px),radial-gradient(circle at 50% 52%,transparent 0 17%,rgba(131,208,207,.28) 17.2% 17.5%,transparent 17.7% 33%,rgba(131,208,207,.2) 33.2% 33.5%,transparent 33.7% 50%,rgba(131,208,207,.16) 50.2% 50.5%,transparent 50.7%);background-size:45px 45px,45px 45px,auto}.radar-sweep{position:absolute;inset:-35%;background:conic-gradient(from 0deg,transparent 0 310deg,rgba(131,208,207,.04) 325deg,rgba(131,208,207,.42) 359deg,transparent 360deg);animation:radarSweep 7s linear infinite}.weather-radar-map[data-mode="radiation"]{color:#b7a8df}.weather-radar-map[data-mode="radiation"] .radar-sweep{background:conic-gradient(from 0deg,transparent 0 310deg,rgba(154,137,196,.04) 325deg,rgba(154,137,196,.5) 359deg,transparent 360deg)}.weather-radar-map[data-mode="seismic"]{color:#d4a36f}.weather-radar-map[data-mode="seismic"] .radar-sweep{background:conic-gradient(from 0deg,transparent 0 310deg,rgba(190,121,64,.04) 325deg,rgba(190,121,64,.48) 359deg,transparent 360deg)}
.radar-band{position:absolute;border:2px solid currentColor;border-radius:50%;opacity:.55;filter:blur(.2px)}.band-a{left:18%;top:24%;width:28%;height:33%;transform:rotate(-18deg)}.band-b{right:13%;bottom:14%;width:34%;height:25%;transform:rotate(12deg)}.radar-center{position:absolute;left:calc(var(--radar-x,50%) - 9px);top:calc(var(--radar-y,52%) - 9px);width:18px;height:18px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 9px rgba(131,208,207,.2),0 0 30px #83d0cf}.radar-center i{position:absolute;left:6px;top:6px;width:3px;height:3px;border-radius:50%;background:#fff}.radar-caption{position:absolute;left:20px;right:20px;bottom:20px;padding:15px 17px;background:rgba(5,13,15,.78);color:#fff;backdrop-filter:blur(8px)}.radar-caption b{display:block;font-size:13px}.radar-caption span{display:block;margin-top:7px;color:rgba(255,255,255,.65);font-size:9px}.weather-observations{padding:28px;background:#0e1a1d;color:#f3f6f5}.weather-observations h3{margin:8px 0 25px;font-size:20px}.weather-observations dl{margin:0}.weather-observations dl>div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid rgba(255,255,255,.16)}.weather-observations dt{color:rgba(255,255,255,.54);font-size:9px}.weather-observations dd{margin:0;font:700 10px/1 var(--mono)}.weather-observations>p{margin:25px 0 0;color:rgba(255,255,255,.4);font-size:8px;line-height:1.7}@keyframes radarSweep{to{transform:rotate(360deg)}}
.weather-weekly-grid{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid #9eaeac;border-left:1px solid #9eaeac}.weather-day{min-width:0;padding:18px 15px;border-right:1px solid #9eaeac;border-bottom:1px solid #9eaeac;background:#fff}.weather-day>span{font-size:9px;color:#647173}.weather-day>span b{display:block;margin-top:4px;color:#243033;font:700 9px/1 var(--mono)}.weather-day .wx-icon{display:block;width:55px;height:55px;margin:19px auto}.weather-day>strong{display:block;text-align:center;font-size:11px}.weather-day>p{display:flex;justify-content:space-between;margin:16px 0 0;color:#6e7b7c;font:700 9px/1 var(--mono)}.weather-day>small{display:block;margin-top:13px;color:#7e898a;font-size:7px;line-height:1.6}
.weather-disclaimer{margin:0;padding:18px 25px;background:#e7eceb;color:#738082;font-size:8px;text-align:center}
@media(max-width:1050px){.weather-current-grid{grid-template-columns:1fr}.weather-now{border-right:0;border-bottom:1px solid #9eaeac}.weather-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}.weather-alert{border-right:1px solid #aebbb9;border-bottom:0}.weather-now-core{grid-template-columns:145px 1fr 1fr}.weather-weekly-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:800px){.weather-main{padding:125px 7px 70px}.weather-masthead{grid-template-columns:1fr;padding-inline:14px}.weather-mast-status{width:100%}.weather-toolbar{grid-template-columns:1fr 1fr;padding:17px 14px}.weather-toolbar>div:first-child{align-self:center}.weather-region-tabs{grid-column:1/-1;margin-inline:-14px;border-top:1px solid #b9c4c2}.weather-now{padding:27px 17px}.weather-now-core{grid-template-columns:115px 1fr;gap:20px}.wx-icon.is-large{width:105px;height:105px}.weather-now-core dl{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}.weather-now-core dl>div{display:block;padding:12px 8px;border-right:1px solid #bdc9c7}.weather-now-core dd{margin-top:8px}.weather-hourly{overflow-x:auto;grid-template-columns:repeat(6,90px)}.weather-side{grid-template-columns:1fr}.weather-alert{border-right:0;border-bottom:1px solid #aebbb9}.weather-radar-section,.weather-weekly{padding:30px 16px}.weather-section-heading{align-items:flex-start;flex-direction:column}.weather-radar-layout{grid-template-columns:1fr}.weather-radar-map{min-height:420px}.weather-weekly-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.weather-masthead h1{font-size:49px}.weather-now-core{grid-template-columns:90px 1fr}.wx-icon.is-large{width:85px;height:85px}.weather-side{display:block}.radar-mode-tabs{width:100%}.radar-mode-tabs button{flex:1}.weather-radar-map{min-height:350px}.weather-weekly-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.radar-sweep,.wx-dust:before{animation:none}}
