@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root{font-family:'DM Sans','Noto Sans SC',sans-serif;color:#183b36;background:#eff5f3;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;font-weight:400;--ink:#183b36;--muted:#748580;--green:#397f6d;--line:#e5edeb;--paper:#fff}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 82% 11%,rgba(218,236,228,.48),transparent 31%),#eff5f3}
button,input{font:inherit}
button{cursor:pointer}
.page-shell{width:min(1160px,calc(100% - 72px));margin:auto}
.topbar{height:83px;border-bottom:1px solid rgba(24,59,54,.1);display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}.brand-mark{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:#dcece5}.brand-mark svg{width:22px;fill:none;stroke:#397f6d;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.brand-name{font-size:16px;font-weight:700;letter-spacing:-.6px}.brand-name span{color:#78908a;font-weight:400}.topbar-note{color:#71827d;font-size:12px;letter-spacing:.1px}.live-dot{display:inline-block;width:7px;height:7px;background:#69aa87;border-radius:50%;margin-right:7px;box-shadow:0 0 0 4px #dcece5}.note-divider{color:#b4c2bd;margin:0 8px}
.hero{min-height:457px;display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:38px;padding:44px 4px 37px}.eyebrow{color:#719087;font-size:10px;font-weight:700;letter-spacing:1.55px;display:flex;align-items:center;gap:9px}.eyebrow-line{display:inline-block;width:20px;height:1px;background:#79a090}.hero h1{font-size:50px;line-height:1.32;letter-spacing:-2.6px;margin:20px 0 12px;font-weight:700}.hero h1 span{color:#548b77}.hero-description{font-size:14px;line-height:1.9;color:#71817c;margin:0 0 26px}.search-panel{max-width:510px;background:#fff;border:1px solid #e8eeec;border-radius:14px;padding:8px;box-shadow:0 12px 36px rgba(34,73,63,.07)}.search-form{display:flex;gap:8px}.search-input-wrap{height:47px;flex:1;display:flex;align-items:center;gap:10px;padding:0 13px}.search-input-wrap svg{width:18px;height:18px;fill:none;stroke:#81938d;stroke-width:1.7;stroke-linecap:round}.search-input-wrap input{border:0;outline:0;width:100%;min-width:0;background:none;color:var(--ink);font-size:13px}.search-input-wrap input::placeholder{color:#a2afaa}.search-button{height:40px;align-self:center;border:0;border-radius:9px;background:#347b68;color:white;padding:0 18px;font-size:12px;font-weight:600;transition:background .2s,transform .2s}.search-button:hover{background:#286957;transform:translateY(-1px)}.search-button span{font-size:16px;margin-left:7px}.popular-cities{display:flex;align-items:center;gap:8px;padding:12px 9px 4px;color:#9aa8a3;font-size:11px}.popular-cities button{border:0;background:#f1f6f4;color:#6b8279;border-radius:20px;padding:5px 10px;font-size:11px;transition:background .2s,color .2s}.popular-cities button:hover{background:#dfeee7;color:#2f765f}
.hero-art{height:355px;position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(145deg,#e2efe9,#eaf2e9 58%,#f3eee2);isolation:isolate}.hero-art:before{content:"";position:absolute;width:290px;height:290px;border-radius:50%;background:rgba(255,255,255,.24);left:50%;top:50%;transform:translate(-50%,-48%)}.art-orbit{position:absolute;border:1px solid rgba(109,158,132,.17);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-49%)}.orbit-one{width:252px;height:252px}.orbit-two{width:322px;height:322px;border-color:rgba(109,158,132,.11)}.sun-halo{position:absolute;z-index:1;left:50%;top:39%;width:145px;height:145px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,210,123,.25);display:grid;place-items:center}.sun-core{width:92px;height:92px;border-radius:50%;background:linear-gradient(145deg,#ffdb89,#f5b95f);box-shadow:0 8px 35px rgba(241,182,87,.25)}.cloud{position:absolute;z-index:2;display:flex;align-items:flex-end}.cloud i{display:block;border-radius:50%;background:#fff}.cloud-back{left:53%;top:41%;opacity:.7;transform:scale(.7)}.cloud-back i:nth-child(1){width:55px;height:42px}.cloud-back i:nth-child(2){width:73px;height:66px;margin-left:-20px}.cloud-back i:nth-child(3){width:57px;height:44px;margin-left:-15px}.cloud-front{left:28%;top:47%;filter:drop-shadow(0 13px 14px rgba(79,117,98,.1))}.cloud-front i:nth-child(1){width:70px;height:52px}.cloud-front i:nth-child(2){width:91px;height:81px;margin-left:-24px}.cloud-front i:nth-child(3){width:70px;height:55px;margin-left:-20px}.art-spark{position:absolute;color:#dba54f;z-index:3}.spark-one{left:25%;top:28%;font-size:20px}.spark-two{right:24%;top:35%;font-size:13px;color:#79a98d}.spark-three{left:68%;top:60%;font-size:40px;color:#83ad96}.art-caption{position:absolute;z-index:4;right:22px;bottom:22px;border:1px solid rgba(90,131,111,.23);border-radius:12px;padding:11px 12px;display:flex;align-items:center;gap:15px;background:rgba(255,255,255,.42);color:#688478;font-size:9px;font-weight:700;letter-spacing:1px;line-height:1.5}.caption-arrow{font-size:16px}.art-date{position:absolute;left:22px;bottom:26px;color:#809b8d;font-size:8px;letter-spacing:1.15px;display:flex;align-items:center;gap:8px}.date-mark{width:6px;height:6px;border-radius:50%;background:#e6b45e}
.weather-section{padding:24px 0 38px;border-top:1px solid rgba(24,59,54,.1)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}.section-eyebrow{font-size:9px}.section-heading h2{font-size:22px;letter-spacing:-.5px;margin:7px 0 0}.heading-count{font-size:11px;color:#80958d;vertical-align:middle;margin-left:3px;font-weight:500}.updated-label{display:flex;gap:7px;align-items:center;color:#86958f;font-size:11px;padding-bottom:4px}.updated-icon{font-size:16px;color:#76a08d}.weather-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.weather-card{position:relative;min-width:0;padding:18px 17px 16px;background:#fff;border:1px solid #e7eeeb;border-radius:13px;box-shadow:0 6px 20px rgba(38,71,61,.025);transition:transform .2s,box-shadow .2s}.weather-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(38,71,61,.08)}.card-top{display:flex;justify-content:space-between;align-items:center}.card-city{font-size:14px;font-weight:700}.weather-symbol{width:33px;height:33px;border-radius:11px;background:#f8f3e7;display:grid;place-items:center;font-size:17px}.weather-symbol.rain{background:#edf4f4}.weather-symbol.cloudy{background:#eff4f1}.card-temperature{font-size:29px;font-weight:600;letter-spacing:-1px;margin:13px 0 0}.card-weather{color:#7c8d87;font-size:11px;margin-top:1px}.card-metrics{display:flex;gap:12px;border-top:1px solid #edf1ef;margin-top:14px;padding-top:11px;color:#83928c;font-size:10px}.card-metrics span{white-space:nowrap}.card-metrics b{color:#566e64;font-weight:600}.aqi{margin-top:12px;display:flex;align-items:center;gap:6px;color:#83928c;font-size:10px}.aqi-dot{width:6px;height:6px;border-radius:50%;background:#79bd8a}.aqi-dot.moderate{background:#e5b55d}.card-tip{color:#7c8d87;font-size:10px;line-height:1.65;margin:10px 0 0;min-height:34px}.loading-state,.empty-state,.error-state{grid-column:1/-1;min-height:130px;display:flex;align-items:center;justify-content:center;gap:10px;color:#8a9993;font-size:13px;background:rgba(255,255,255,.55);border:1px solid #e5edeb;border-radius:13px}.error-state{color:#a45c53}.loader{width:15px;height:15px;border:2px solid #dbe8e2;border-top-color:#579078;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.feedback-section{position:relative;background:#e5efea;border:1px solid #dce9e2;border-radius:15px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:28px}.feedback-copy{display:flex;align-items:center;gap:12px}.feedback-icon{width:34px;height:34px;display:grid;place-items:center;background:#f5faf7;color:#4d8a70;border-radius:11px;font-size:17px}.feedback-copy h2{font-size:13px;margin:0 0 4px}.feedback-copy p{font-size:10px;color:#7c9087;margin:0}.feedback-form{display:flex;width:min(420px,48%);background:white;padding:5px;border:1px solid #deebe4;border-radius:9px}.feedback-form input{min-width:0;flex:1;border:0;outline:0;padding:0 9px;color:var(--ink);font-size:11px}.feedback-form input::placeholder{color:#a5b2ac}.feedback-form button{border:0;border-radius:6px;background:#397f6d;color:white;padding:9px 12px;font-size:10px;white-space:nowrap}.feedback-form button span{margin-left:6px;font-size:13px}.feedback-status{position:absolute;right:23px;bottom:-22px;color:#417e64;font-size:10px;margin:0}.footer{height:74px;display:flex;justify-content:space-between;align-items:center;color:#94a39d;font-size:9px;letter-spacing:.55px}.footer-sun{color:#d4a34e;margin-left:4px} .visually-hidden{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:900px){.page-shell{width:min(100% - 48px,720px)}.hero{grid-template-columns:1fr .75fr;gap:18px}.hero h1{font-size:42px}.hero-art{height:310px}.weather-grid{grid-template-columns:repeat(3,1fr)}.weather-card{padding:17px}.weather-section{padding-bottom:30px}}
@media(max-width:620px){.page-shell{width:calc(100% - 34px)}.topbar{height:68px}.topbar-note{font-size:10px}.brand-name{font-size:14px}.hero{display:flex;flex-direction:column;align-items:stretch;padding:42px 0 28px;gap:26px}.hero h1{font-size:40px;margin-top:15px}.hero-description{font-size:12px}.desktop-break{display:none}.search-panel{max-width:none}.popular-cities{gap:5px;flex-wrap:wrap}.popular-cities button{padding:5px 8px}.hero-art{height:240px}.sun-halo{width:120px;height:120px}.sun-core{width:78px;height:78px}.cloud-front{transform:scale(.8);transform-origin:left top;left:25%;top:47%}.art-date{bottom:17px;left:14px}.art-caption{right:13px;bottom:13px}.weather-section{padding-top:22px}.section-heading h2{font-size:20px}.updated-label{font-size:9px}.weather-grid{grid-template-columns:repeat(2,1fr);gap:9px}.weather-card{padding:14px 12px}.card-temperature{font-size:26px}.card-metrics{gap:8px}.feedback-section{display:block;padding:17px 15px}.feedback-form{width:100%;margin-top:15px}.feedback-status{right:auto;left:16px;bottom:-18px}.footer{font-size:8px}.footer>span:nth-child(2){display:none}}

.weather-card{display:block;color:inherit;text-decoration:none;cursor:pointer}.weather-card:focus-visible,.back-button:focus-visible,.detail-back-link:focus-visible{outline:3px solid #91bda6;outline-offset:3px}.card-open-hint{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid #edf1ef;color:#598675;font-size:10px;opacity:0;transition:opacity .2s}.weather-card:hover .card-open-hint,.weather-card:focus-visible .card-open-hint{opacity:1}.detail-shell{min-height:100vh;display:flex;flex-direction:column}.detail-topbar{height:83px;border-bottom:1px solid rgba(24,59,54,.1);display:flex;align-items:center;justify-content:space-between}.back-button{display:inline-flex;align-items:center;gap:9px;color:#55776b;text-decoration:none;font-size:13px;font-weight:600}.back-button span{font-size:20px;line-height:1}.detail-main{width:min(760px,100%);margin:68px auto 56px;flex:1}.detail-eyebrow{display:flex;align-items:center;gap:9px;color:#719087;font-size:10px;font-weight:700;letter-spacing:1.55px;margin:0 0 16px 4px}.detail-card{position:relative;overflow:hidden;min-height:430px;padding:42px 48px 38px;background:linear-gradient(140deg,#fff 35%,#eff6f1);border:1px solid #e2ece7;border-radius:22px;box-shadow:0 18px 46px rgba(34,73,63,.07)}.detail-card:after{content:"";position:absolute;z-index:0;width:250px;height:250px;border:1px solid rgba(109,158,132,.15);border-radius:50%;right:-65px;top:46px;box-shadow:0 0 0 34px rgba(109,158,132,.04),0 0 0 68px rgba(109,158,132,.035);pointer-events:none}.detail-card>*{position:relative;z-index:1}.detail-location{color:#81958c;font-size:12px;letter-spacing:.4px}.location-pin{color:#579078;font-size:18px;margin-right:5px}.detail-main-info{display:flex;align-items:center;justify-content:space-between;margin-top:30px}.detail-main-info h1{font-size:34px;letter-spacing:-1px;margin:0}.detail-weather-label{color:#7c8d87;font-size:14px;margin:7px 0 0}.detail-weather-icon{width:76px;height:76px;display:grid;place-items:center;background:#f8f2e3;border-radius:23px;font-size:43px}.detail-temperature{font-size:76px;font-weight:600;letter-spacing:-5px;line-height:1;margin:27px 0 0;color:#23463e}.detail-date{margin:12px 0 28px;color:#8a9993;font-size:12px}.detail-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e6eeea;border-bottom:1px solid #e6eeea;padding:20px 0}.detail-metric{display:flex;flex-direction:column;gap:9px;padding-left:20px;border-left:1px solid #e6eeea}.detail-metric:first-child{padding-left:0;border-left:0}.detail-metric span{font-size:11px;color:#8a9993}.detail-metric strong{font-size:15px;color:#425f55;font-weight:600}.detail-tip{display:flex;align-items:flex-start;gap:12px;margin-top:25px;padding:16px;background:#edf5f0;border-radius:12px}.tip-spark{color:#cb9c49;font-size:18px}.detail-tip h2{font-size:12px;margin:2px 0 6px}.detail-tip p{font-size:12px;line-height:1.8;color:#6f8379;margin:0}.detail-back-link{display:inline-block;margin:20px 0 0 4px;color:#628576;text-decoration:none;font-size:12px}.detail-back-link:hover{color:#2f765f}.detail-card>.loading-state,.detail-card>.empty-state,.detail-card>.error-state{min-height:340px;background:transparent;border:0}.detail-shell .footer{width:100%;border-top:1px solid rgba(24,59,54,.08)}
@media(max-width:620px){.detail-topbar{height:68px}.detail-main{margin:42px auto 38px}.detail-card{padding:30px 23px 24px;min-height:410px}.detail-card:after{right:-150px;top:70px}.detail-main-info{margin-top:25px}.detail-main-info h1{font-size:29px}.detail-weather-icon{width:62px;height:62px;border-radius:19px;font-size:35px}.detail-temperature{font-size:66px;margin-top:29px}.detail-metric{padding-left:12px}.detail-metric span{font-size:10px}.detail-metric strong{font-size:12px}.detail-tip{padding:14px}.card-open-hint{opacity:1}}