:root { --ink:#173a53; --muted:#6d7e89; --line:#dbe5e9; --orange:#e77b3b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fdfdfb; font-family:Arial, Helvetica, sans-serif; }
button,select{font:inherit} button{color:inherit}.shell{width:min(1160px,calc(100% - 48px));margin-inline:auto}
.topbar{height:84px;padding:0 max(24px,calc((100vw - 1160px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(255,255,253,.95);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:20px;letter-spacing:-.5px}.brand small{display:block;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:#80909a;margin-top:3px}.brandMark{width:40px;height:40px;border-radius:50%;background:#d9eef1;display:grid;place-content:center;gap:2px}.brandMark i{width:19px;height:3px;background:#1786a1;display:block;border-radius:4px;transform:skewX(-30deg)}.brandMark i:nth-child(2){width:25px}.brandMark i:nth-child(3){width:14px}
nav{display:flex;align-self:stretch;gap:32px}nav button{border:0;background:none;cursor:pointer;font-size:13px;position:relative;padding:0 2px}nav button.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--orange);border-radius:3px 3px 0 0}.live{font-size:11px;color:#6d7c84;display:flex;align-items:center;gap:8px}.live span,.onlineDot{width:7px;height:7px;border-radius:50%;background:#45ad7d;box-shadow:0 0 0 4px #e5f5ed;display:inline-block}
.hero{padding-top:62px;padding-bottom:72px}.heroTop,.sectionTitle,.compareIntro{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.eyebrow{color:#33859b;font-size:10px;font-weight:800;letter-spacing:2px;margin:0 0 14px}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;margin:0;letter-spacing:-1.5px}h1{font-size:46px}h2{font-size:36px}.lead{color:var(--muted);margin:12px 0 0;font-size:14px}
label{color:#71818a;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;display:flex;flex-direction:column;gap:8px}select{min-width:190px;color:var(--ink);background:white;border:1px solid #cad8de;border-radius:9px;padding:11px 36px 11px 14px;font-size:13px;font-weight:700;text-transform:none;outline:none}
.weatherGrid{display:grid;grid-template-columns:1.25fr 1fr;margin-top:34px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:white;box-shadow:0 20px 50px rgba(25,63,82,.06)}.mainWeather{padding:31px 34px;background:linear-gradient(145deg,#f6fbfb,#e8f4f5);display:flex;flex-direction:column;justify-content:space-between;min-height:300px}.location{display:flex;align-items:center;gap:10px}.location b,.location small{display:block}.location b{font-size:15px}.location small{color:#788a93;font-size:10px;margin-top:4px}.location em{margin-left:auto;font-style:normal;font-size:9px;color:#55736c;background:#fff;padding:7px 10px;border-radius:15px}.location em span{display:inline-block;width:6px;height:6px;background:#45ad7d;border-radius:50%;margin-right:5px}.pin{color:#1d89a2;font-size:10px}.temperature{display:flex;align-items:center;gap:22px}.weatherIcon{font-size:70px;color:#edaf4b;line-height:1}.temperature strong{font-family:Georgia,serif;font-weight:400;font-size:74px;letter-spacing:-5px}.temperature div b,.temperature div small{display:block}.temperature div b{font-size:13px}.temperature div small{font-size:10px;color:#71838d;margin-top:7px}.updated{font-size:9px;color:#7b8a92}.updated span{margin:0 8px}
.metrics{display:grid;grid-template-columns:1fr 1fr}.metrics article{padding:30px 24px;display:flex;gap:15px;align-items:flex-start;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}.metrics article:nth-child(n+3){border-bottom:0}.metricIcon{width:34px;height:34px;border-radius:10px;background:#e9f4f6;color:#1686a1;display:grid;place-items:center;font-size:20px}.metrics small{font-size:8px;letter-spacing:1.2px;color:#7d8e97}.metrics strong{font-family:Georgia,serif;font-size:23px;font-weight:500;display:block;margin:8px 0}.metrics p{margin:0;color:#7b8990;font-size:9px}
.section{padding-top:70px;padding-bottom:76px}.linkButton{border:0;background:none;font-size:11px;font-weight:700;cursor:pointer}.linkButton span{color:var(--orange);font-size:18px;margin-left:8px}.stationCards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}.stationCard{text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:22px;cursor:pointer;transition:.2s}.stationCard:hover,.stationCard.selected{border-color:#79b5c3;transform:translateY(-2px);box-shadow:0 12px 30px rgba(30,76,96,.08)}.stationHead,.stationHead>div{display:flex;align-items:center}.stationHead>div{flex-wrap:wrap;gap:8px}.stationHead div small{width:100%;padding-left:16px;font-size:9px;color:#7a8a93}.stationHead b{font-size:14px}.miniSun{margin-left:auto;font-size:26px}.stationTemp{display:flex;align-items:baseline;gap:13px;margin:23px 0}.stationTemp strong{font-family:Georgia,serif;font-size:40px;font-weight:400}.stationTemp span{color:#687b85;font-size:10px}.stationData{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #edf1f3;border-bottom:1px solid #edf1f3;padding:15px 0}.stationData span{border-right:1px solid #edf1f3;padding-left:13px}.stationData span:first-child{padding-left:0}.stationData span:last-child{border:0}.stationData small,.stationData b{display:block}.stationData small{font-size:7px;color:#81909a;letter-spacing:.7px}.stationData b{font-size:11px;margin-top:5px}.stationFoot{display:flex;justify-content:space-between;margin-top:16px;font-size:8px;color:#7b8b93}.stationFoot b{color:#24839a;font-size:9px}
.compareSection{background:#f0f7f7;padding:74px 0}.compareIntro>div{max-width:620px}.compareIntro>div>p:last-child{color:#6f818a;font-size:12px;line-height:1.7;margin:14px 0 0}.compareTable{background:white;border:1px solid #d6e2e5;border-radius:12px;margin-top:33px;overflow:hidden}.tableRow{display:grid;grid-template-columns:2.1fr 1fr 1fr .8fr 1fr .8fr;align-items:center;min-height:74px;padding:0 22px;border-bottom:1px solid #e7edef;font-size:12px}.tableRow:last-child{border:0}.tableHead{min-height:40px;background:#fafcfc;color:#809099;font-size:7px;font-weight:800;letter-spacing:1px}.source{display:flex;align-items:center;gap:12px}.source i{width:30px;height:30px;border-radius:50%;display:block;position:relative}.source i:after{content:"";position:absolute;inset:9px;border:2px solid white;border-radius:50%}.source i.central{background:#1a8ba6}.source i.ipma{background:#397bc2}.source i.meteostat{background:#f4a03a}.source b,.source small,.time small{display:block}.source small,.time small{color:#819099;font-size:8px;font-weight:400;margin-top:4px}.difference{color:#e56c35;font-size:11px}.difference.reference{color:#67808b;background:#edf3f4;padding:5px 8px;border-radius:12px;width:max-content;font-size:8px}.time{font-weight:700}.note{font-size:9px;color:#768991;margin:15px 4px 0}
.history{padding-bottom:100px}.periods{display:flex;gap:3px;background:#eef3f4;padding:3px;border-radius:8px}.periods button{border:0;background:transparent;padding:8px 14px;border-radius:6px;font-size:9px;cursor:pointer}.periods button.active{background:white;box-shadow:0 2px 8px #cdd8dc}.chartCard{border:1px solid var(--line);border-radius:14px;background:white;margin-top:30px;padding:24px 26px}.chartTop{display:flex;justify-content:space-between}.chartTop small{font-size:8px;color:#7a8c95;display:block;letter-spacing:1px}.chartTop strong{font-family:Georgia,serif;font-size:25px;font-weight:500;display:block;margin-top:8px}.chartTop em{font:700 8px Arial;color:#3c9c71;background:#e8f5ee;padding:4px 7px;border-radius:10px;margin-left:8px}.legend{font-size:8px;color:#71818a}.legend span{display:inline-block;width:14px;height:2px;background:#e4793d;margin-right:6px;vertical-align:middle}.chart{height:245px;margin-top:18px;position:relative;padding:5px 10px 24px 38px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 48px,#edf1f2 49px)}.chart svg{width:100%;height:100%;overflow:visible}.axis{position:absolute;left:0;top:0;bottom:22px;display:flex;flex-direction:column;justify-content:space-between;font-size:7px;color:#89979e}.xaxis{position:absolute;left:38px;right:8px;bottom:0;display:flex;justify-content:space-between;font-size:7px;color:#89979e}
footer{background:#173a53;color:white;padding:27px 0}footer .shell{display:flex;justify-content:space-between;align-items:center;font-size:12px}footer small{color:#aec0ca;font-size:8px}
@media(max-width:800px){.topbar{height:auto;padding:16px 24px;flex-wrap:wrap;gap:14px}.live{display:none}nav{order:3;width:100%;height:38px;justify-content:space-between;gap:8px}nav button{font-size:11px}.shell{width:min(100% - 28px,1160px)}.hero{padding-top:38px}.heroTop,.sectionTitle,.compareIntro{align-items:flex-start;flex-direction:column}.stationSelect,label{width:100%}select{width:100%}h1{font-size:38px}h2{font-size:31px}.weatherGrid{grid-template-columns:1fr}.mainWeather{min-height:270px}.metrics article:nth-child(odd){border-left:0}.stationCards{grid-template-columns:1fr}.compareTable{overflow-x:auto}.tableRow{min-width:780px}.periods{align-self:stretch}.periods button{flex:1}.temperature strong{font-size:60px}.temperature{gap:14px}.weatherIcon{font-size:52px}.chart{height:210px}footer .shell{flex-direction:column;gap:7px;align-items:flex-start}}
@media(max-width:480px){.brand{font-size:17px}.brandMark{width:34px;height:34px}.mainWeather{padding:24px 20px}.metrics{grid-template-columns:1fr}.metrics article{border-left:0!important;border-bottom:1px solid var(--line)!important}.metrics article:last-child{border-bottom:0!important}.temperature div{display:none}.hero{padding-bottom:45px}.section{padding-top:52px;padding-bottom:55px}}