:root{--ink:#1c3f37;--muted:#7b8b7e;--paper:#fdfdf7;--line:#e5e9df;--green:#234d3f}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:'DM Sans',sans-serif;background:#67715b}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button{border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #9caf84;outline-offset:4px}button{transition:background .2s,transform .2s,box-shadow .2s}button:active{transform:scale(.96)}svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#map{position:fixed;inset:0;z-index:0;background:#8c967e}.map-wash{position:fixed;inset:0;pointer-events:none;z-index:400;background:linear-gradient(90deg,rgba(32,52,39,.22),transparent 50%);background-color:#1f352520}.leaflet-tile-pane{filter:none}.panel{background:rgba(253,253,247,.97);box-shadow:0 10px 45px #152d2012;border:1px solid #ffffff80;border-radius:20px}header{position:fixed;top:28px;left:28px;right:28px;z-index:700;display:flex;justify-content:space-between;align-items:center;pointer-events:none}header>*{pointer-events:auto}.brand{display:flex;align-items:center;padding:15px 22px 15px 15px;gap:13px;border-radius:19px}.brand-icon{display:grid;place-items:center;width:49px;height:49px;border-radius:14px;background:#1d4439;color:#cbd9a9}.brand-icon svg{width:34px;height:34px}.brand strong{font-family:Manrope,sans-serif;letter-spacing:-1.5px;font-size:28px;font-weight:800;line-height:1}.brand strong span{font-size:11px;vertical-align:top;letter-spacing:0;margin-left:3px}.brand small{display:block;font-size:7.5px;letter-spacing:2.2px;margin-top:9px;color:#87968b}.brand-region{border-left:1px solid var(--line);margin-left:11px;padding:13px 0 13px 20px;font-size:9px;letter-spacing:1.1px;font-weight:700;max-width:160px}.header-right{display:flex;align-items:center;gap:12px}.live-pill{background:var(--paper);border-radius:30px;display:flex;align-items:center;gap:9px;padding:14px 20px;font-size:11px}.pulse-dot,.status-dot,.tiny-dot{display:inline-block;width:6px;height:6px;background:#6e9366;border-radius:50%;flex-shrink:0}.pulse-dot{box-shadow:0 0 0 4px #739c6b17;animation:pulse 3s infinite}.circle{background:var(--paper);border-radius:50%;width:45px;height:45px;font-size:20px}main{position:relative;z-index:500;pointer-events:none;height:100dvh;min-height:740px}main>*{pointer-events:auto}.search-wrap{position:absolute;top:128px;right:28px;width:292px;z-index:700}.search{height:50px;border-radius:13px;display:flex;align-items:center;gap:12px;padding:0 16px}.search svg{width:18px;color:#718575}.search input{min-width:0;flex:1;border:0;outline:none;background:none;font-size:12px;color:var(--ink)}.search input::placeholder{color:#7e8e81}.search kbd{color:#8a978d}.results{padding:8px;margin-top:8px;border-radius:14px;max-height:330px;overflow:auto}.results button{display:block;text-align:left;width:100%;padding:11px;border-radius:8px;font-size:13px}.results button:hover{background:#edf1e7}.results button small{display:block;color:var(--muted);margin-top:3px}.results p{font-size:12px;padding:8px}.air-panel{position:absolute;left:48px;top:139px;width:340px;padding:28px 27px 13px;animation:rise .8s both}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.8px;color:#7d9583;display:flex;align-items:center;justify-content:space-between}.tiny-dot{width:5px;height:5px;background:#b5c2a9}.location-heading{display:flex;align-items:center;justify-content:space-between;margin-top:17px;gap:6px}h1{font:800 27px/1.2 Manrope,sans-serif;letter-spacing:-1px;margin:0;overflow-wrap:anywhere}.icon-btn{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:8px}.icon-btn:hover{background:#e7eddf}.icon-btn svg{width:18px;height:18px}.place-sub{font-size:10px;color:var(--muted);margin:8px 0 0;line-height:1.6}.aqi-main{display:flex;align-items:center;justify-content:space-between;margin-top:15px;gap:8px;min-height:103px}.aqi-value{font:500 78px/1.1 Manrope,sans-serif;letter-spacing:-5px;transition:color .5s}.aqi-caption{font-size:7px;letter-spacing:1.2px;font-weight:700;margin-top:3px;color:#89927f}.quality-side{text-align:right;max-width:138px}.quality{display:inline-block;padding:7px 10px;border-radius:6px;background:#f1edda;color:#837035;font-size:11px;font-weight:600}.quality-side>span:last-child{display:block;font-size:9px;line-height:1.5;color:var(--muted);margin-top:10px}.spectrum{height:5px;border-radius:5px;background:linear-gradient(90deg,#85a879 0% 16.6%,#d9c575 16.6% 33.3%,#d59a67 33.3% 50%,#c77e70 50% 66.6%,#9d7f97 66.6% 83.3%,#82576a 83.3%);margin-top:23px;position:relative}#scalePointer{position:absolute;width:9px;height:9px;border:2px solid var(--paper);border-radius:100%;background:var(--ink);top:-2px;left:0;transition:left 1s}.scale-labels{display:flex;justify-content:space-between;font-size:8px;color:#8f9989;margin-top:8px}.summary{font-size:11px;color:#73816f;line-height:1.7;margin:17px 0 21px;min-height:37px}.weather{display:grid;grid-template-columns:1.1fr 1fr 1.15fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0}.weather>div{display:flex;flex-direction:column;position:relative;align-items:center;border-left:1px solid var(--line)}.weather>div:first-child{border:0;align-items:flex-start}.weather strong{font-size:19px;font-weight:500;white-space:nowrap}.weather small{font-size:9px}.weather div>span:last-child{font-size:8px;color:var(--muted);margin-top:5px}.weather-icon{display:none}.section-heading{display:flex;justify-content:space-between;align-items:center}.section-heading h2{font-size:11px;font-weight:600;margin:0}.air-panel>.section-heading{margin:23px 0 16px}.section-heading>span{font-size:9px;color:#8a9786}.pollutants{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 8px}.pollutants>div{display:flex;gap:5px;flex-direction:column}.pollutants span{font-size:10px;color:#83917f}.pollutants strong{font-size:17px;font-weight:500}.pollutants sub{font-size:7px}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:21px;padding-top:12px;border-top:1px solid var(--line);font-size:8px;color:#82907f}.card-footer>span{display:flex;align-items:center;gap:7px}.status-dot{width:4px;height:4px}.card-footer svg{width:13px}.map-note{position:absolute;top:138px;left:50%;transform:translateX(-40%);font-size:9px;letter-spacing:.1px;display:flex;align-items:center;gap:9px;color:#fffce3;text-shadow:0 1px 4px #11261d}.map-controls{position:absolute;right:28px;top:222px;width:46px;display:flex;flex-direction:column;align-items:center;padding:9px 0;border-radius:14px}.map-controls button{width:44px;height:40px;font-size:23px;display:grid;place-items:center}.map-controls button:hover{background:#e8eddf}.map-controls i{height:1px;background:var(--line);width:26px;margin:4px}.map-controls svg{width:20px}.forecast{position:absolute;bottom:50px;left:calc(50% - 130px);width:400px;padding:21px 24px 14px;animation:rise .9s .15s both}.forecast .eyebrow{font-size:8px;letter-spacing:1.5px}.forecast h2{font:700 16px Manrope;margin-top:6px;letter-spacing:-.3px}.forecast-tag{padding:7px 9px;background:#edf0e6;border-radius:5px;font-size:8px!important}.forecast-tag span{margin-left:5px}.chart{height:99px;margin-top:14px}.chart svg{width:100%;height:100%;overflow:visible;stroke-linecap:round}.chart text{font:8px 'DM Sans';stroke:none;fill:#7b8a77}.chart-loading{height:80px;display:grid;place-items:center;font-size:11px;color:#94a08c;border-radius:8px}.forecast-bottom{border-top:1px solid var(--line);padding-top:9px;display:flex;justify-content:space-between;color:#99a08e;font-size:7px}.layers{position:absolute;bottom:50px;right:28px;width:238px;padding:21px 20px 16px;animation:rise 1s .25s both}.layers .eyebrow{font-size:8px;letter-spacing:1.4px}.layers svg{width:17px;height:17px;color:#819783}.layer-switch{display:flex;background:#f0f2e9;padding:4px;border-radius:9px;margin-top:18px}.layer-switch button{width:50%;font-size:10px;padding:11px 3px;border-radius:6px;color:#8c9986}.layer-switch button.active{background:#204b3e;color:#fff;box-shadow:0 2px 3px #1d443929}.legend{display:flex;justify-content:space-between;margin-top:17px;font-size:7px;color:#899681}.legend span{display:flex;align-items:center;gap:4px}.legend i{width:5px;height:5px;border-radius:50%;background:var(--dot)}.source-note{position:absolute;bottom:17px;left:48px;color:#f1f1e3;font-size:8px;text-shadow:0 1px 4px #0008}.source-note a{color:inherit}.source-note>span{margin-left:18px;opacity:.7}.leaflet-control-attribution{font-size:8px!important;background:#ffffffd1!important;color:#5d7360!important}.leaflet-control-attribution a{color:#42634a!important}.leaflet-control-scale{margin-left:48px!important;margin-bottom:42px!important}.leaflet-control-scale-line{font-size:8px;background:#fbfbef9c;color:#31503e}.point-marker{background:none;border:none}.map-point{display:flex;align-items:center;gap:10px;white-space:nowrap;box-shadow:0 5px 20px #142b1d30;background:#fbfcf2f2;border:1px solid #fff;border-radius:12px;padding:10px 12px;position:relative;transition:transform .25s}.map-point:hover{transform:translateY(-3px)}.map-point:after{content:'';position:absolute;left:50%;bottom:-18px;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:var(--point-color);box-shadow:0 0 0 6px #fcfce21c}.map-point.selected{background:#fcfdf6;border:2px solid #edf2da;padding:12px 14px;box-shadow:0 0 0 5px #fff2,0 8px 30px #152d2033}.map-point strong{font-size:23px;font-weight:600;color:var(--point-color);letter-spacing:-1px}.map-point b{font-size:11px;font-weight:600;display:block;color:#34513f}.map-point small{display:block;font-size:8px;color:#86917b;margin-top:3px}.leaflet-marker-icon{outline:none!important}.leaflet-marker-icon:focus-visible .map-point{outline:3px solid white}dialog{padding:0;border:1px solid #ffffff75;border-radius:25px;background:var(--paper);color:var(--ink);width:410px;max-width:calc(100vw - 32px);box-shadow:0 30px 100px #0c24164d;overflow:hidden}dialog[open]{animation:dialog-in .6s cubic-bezier(.2,.7,.2,1)}dialog::backdrop{background:#20382b6b;backdrop-filter:blur(7px)}.dialog-art{height:150px;background:#e8ecdf;position:relative;overflow:hidden;display:grid;place-items:center}.orbit{position:absolute;border:1px solid #bdc9b7;border-radius:50%;width:135px;height:135px;opacity:.7}.o2{width:230px;height:230px}.o3{width:330px;height:330px}.location-orb{display:grid;place-items:center;background:#264f3d;width:64px;height:64px;border-radius:20px;box-shadow:0 8px 30px #294a3120;transform:rotate(-8deg);animation:float 5s ease-in-out infinite}.location-orb svg{width:28px;height:28px;color:#d7e2bc;transform:rotate(8deg)}.art-dot{position:absolute;width:9px;height:9px;border:3px solid #e8ecdf;border-radius:50%;background:#759367;box-shadow:0 0 0 1px #bcc8b6}.d1{left:87px;top:46px}.d2{right:62px;bottom:38px}.dialog-body{padding:30px 34px}.dialog-body>.eyebrow{font-size:8px}.dialog-body h2{font:800 30px/1.25 Manrope;letter-spacing:-1.1px;margin:14px 0}.dialog-body p{font-size:12px;line-height:1.8;color:#83907c;margin:14px 0 23px}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border-radius:10px;font-size:11px;padding:15px 12px}.primary{background:#244e3c;color:#fff}.primary:hover{background:#35634d;box-shadow:0 5px 15px #244e3c22}.primary svg{width:16px;height:16px}.primary span{margin-left:auto}.secondary{background:#edf0e5;color:#5c745d;margin-top:10px}.secondary:hover{background:#e1e7d6}.secondary span{margin-left:auto}.privacy{font-size:9px!important;text-align:center;line-height:1.7!important;margin:18px 0 10px!important}.text-btn{display:block;margin:auto;font-size:10px;text-decoration:underline;color:#7b8a70;padding:7px}.dialog-close{position:absolute;right:10px;top:10px;width:32px;height:32px;z-index:1}#aboutDialog{width:490px}#aboutDialog a{font-size:12px;color:#3b6347}#aboutDialog .dialog-body{max-height:85dvh;overflow:auto;padding-top:45px}.locating{position:fixed;inset:0;z-index:1500;background:#f6f7efed;backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:dialog-in .5s}.locating[hidden]{display:none}.locating h2{font:700 24px Manrope;letter-spacing:-.7px;text-align:center;padding:0 20px}.locating p{font-size:12px;color:var(--muted)}.locating .secondary{width:190px;margin-top:24px}.radar{width:110px;height:110px;border:1px solid #c5d1bb;border-radius:50%;display:grid;place-items:center;position:relative}.radar:before,.radar:after{content:'';border:1px solid #c5d1bb;border-radius:50%;position:absolute;inset:17px}.radar:after{inset:35px}.radar span{position:absolute;inset:-15px;border-radius:50%;border:1px solid #b3c3a7;animation:radar 2s infinite}.radar i{width:9px;height:9px;border-radius:50%;background:#68895c}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:1800;background:#244733;color:#f8f9ed;padding:14px 20px;box-shadow:0 8px 25px #0003;border-radius:12px;font-size:12px;max-width:calc(100% - 32px);text-align:center}#dataError{margin:8px 0 3px;color:#966645;font-size:10px;line-height:1.5}.loading-value{animation:fade-pulse 1.5s infinite}.shimmer{background:linear-gradient(100deg,#e9eee310 10%,#e9eee3 50%,#e9eee310 90%);background-size:200% 100%;animation:shimmer 2s infinite}.spinning svg{animation:spin 1s linear infinite}@keyframes rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes dialog-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}@keyframes pulse{50%{box-shadow:0 0 0 6px #739c6b07}}@keyframes float{50%{transform:translateY(-6px) rotate(-3deg)}}@keyframes radar{to{transform:scale(1.4);opacity:0}}@keyframes fade-pulse{50%{opacity:.35}}@keyframes shimmer{to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1600px){.air-panel{left:5.4vw;top:19vh;width:360px;padding:31px}.forecast{bottom:8vh;width:440px}.layers{bottom:8vh;right:40px}.search-wrap{right:40px}.map-controls{right:40px}.aqi-main{margin-top:22px}.summary{margin-top:23px;margin-bottom:25px}.weather{padding:23px 0}.pollutants{gap:24px}}
@media(max-width:1100px){.brand-region{display:none}.air-panel{left:24px;top:130px;width:310px;padding:25px 22px 12px}.forecast{left:360px;width:320px}.layers{width:212px}.map-note{display:none}.source-note{left:24px}.forecast h2{font-size:14px}.aqi-value{font-size:70px}.quality{font-size:10px}}
@media(max-width:1000px){.forecast{left:auto;right:24px;bottom:218px;width:290px}.layers{right:24px;bottom:50px;width:235px}.search-wrap{right:24px;width:260px}.map-controls{right:24px}}
@media(max-width:650px){header{top:14px;left:14px;right:14px}.brand{padding:10px 13px 10px 10px;gap:9px;border-radius:15px}.brand-icon{width:35px;height:35px;border-radius:10px}.brand-icon svg{width:27px}.brand strong{font-size:22px}.brand small{font-size:5.5px;letter-spacing:1.6px;margin-top:5px}.brand strong span{font-size:8px}.header-right{gap:7px}.live-pill{padding:12px;font-size:0;gap:0}.live-pill .pulse-dot{width:7px;height:7px}.circle{width:36px;height:36px;font-size:16px}main{height:auto;min-height:100dvh;padding:390px 14px 75px;display:flex;flex-direction:column;gap:14px}#map{position:absolute;height:610px;bottom:auto}.map-wash{position:absolute;height:610px;background:linear-gradient(0deg,#72806a,transparent 60%)}body{background:#72806a}.search-wrap{position:absolute;top:91px;left:14px;right:14px;width:auto}.search{height:46px}.air-panel{position:relative;left:auto;top:auto;width:100%;padding:26px;border-radius:20px}.map-controls{top:159px;right:14px;width:38px}.map-controls button{height:34px;width:36px}.forecast{position:relative;bottom:auto;left:auto;right:auto;width:100%;padding:24px}.forecast h2{font-size:17px}.chart{height:115px}.layers{position:relative;bottom:auto;right:auto;width:100%;padding:19px 23px}.layer-switch{margin-top:12px}.legend{font-size:9px}.source-note{position:relative;bottom:auto;left:auto;line-height:1.8;text-align:center;font-size:8px;margin-top:8px}.source-note>span{display:block;margin-left:0}.leaflet-control-scale{margin:0 0 235px 14px!important}.leaflet-control-attribution{display:none}.weather>div:first-child{align-items:center}.weather strong{font-size:23px}.pollutants strong{font-size:21px}.pollutants{row-gap:20px}.place-sub{font-size:11px}.aqi-value{font-size:83px}.aqi-caption{font-size:8px}.quality{font-size:12px}.quality-side>span:last-child{font-size:10px}.summary{font-size:12px}.section-heading h2{font-size:12px}.map-point{padding:7px 9px;gap:7px}.map-point strong{font-size:19px}.map-point b{font-size:9px}.map-point.selected{padding:9px 11px}.dialog-body{padding:26px 28px}.dialog-art{height:125px}.dialog-body h2{font-size:28px}.dialog-body p{margin-bottom:19px}.locating h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:650px){.leaflet-control-attribution{display:block!important;font-size:6px!important;max-width:90%;margin-bottom:230px!important}}

#map{transition:opacity .18s ease;contain:layout paint}#map.changing-location{opacity:.24}.map-point b{max-width:119px;overflow:hidden;text-overflow:ellipsis}.leaflet-marker-icon{will-change:transform}.leaflet-tile-container{will-change:transform}@media(prefers-reduced-motion:reduce){#map{transition:none}}

/* Keep fullscreen cards aligned to the header and inside the viewport. */
@media(min-width:651px){
  main{min-height:0}
  .air-panel{left:28px;top:128px;width:340px;padding:28px 27px 13px;max-height:calc(100dvh - 164px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#cbd5c3 transparent;overscroll-behavior:contain}
  .search-wrap,.map-controls,.layers{right:28px}
  .source-note{left:28px}
  .leaflet-control-scale{margin-left:28px!important}
}
@media(min-width:1600px){.air-panel{width:360px}.forecast{bottom:50px}.layers{bottom:50px}}
@media(min-width:651px) and (max-height:850px){
  .air-panel{padding:20px 24px 10px}
  .air-panel .location-heading{margin-top:12px}
  .air-panel .aqi-main{margin-top:10px;min-height:83px}
  .air-panel .aqi-value{font-size:64px}
  .air-panel .spectrum{margin-top:13px}
  .air-panel .summary{margin:12px 0 14px;min-height:0}
  .air-panel .weather{padding:14px 0}
  .air-panel>.section-heading{margin:16px 0 13px}
  .air-panel .pollutants{gap:14px 8px}
  .air-panel .card-footer{margin-top:14px;padding-top:8px}
}
body.light-map .map-wash{background:none}
body.light-map .map-note{color:#36533f;text-shadow:0 1px 2px #fff}
body.light-map .source-note{color:#36533f;text-shadow:0 1px 2px #fff}

.icon-btn{padding:0;line-height:0}.icon-btn svg{display:block;flex-shrink:0}