@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/hanken-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/hanken-600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/hanken-800.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/plexmono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/plexmono-700.woff2') format('woff2')}
*{box-sizing:border-box}
:root{--font:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--mono:'IBM Plex Mono',ui-monospace,"SFMono-Regular",Menlo,monospace;
  --bg:#eef3f5;--bg2:#e2e9ec;--ink:#0c161c;--ink2:#485964;--line:#d3dde2;
  --panel:#ffffff;--panel-brd:rgba(10,25,32,.10);--glass:rgba(255,255,255,.60);
  --brand:#0b8a93;--band:#0b8a93;--band-ink:#ffffff;--link:#0a6f77;--radius:18px;
  --shadow:0 12px 44px rgba(12,32,42,.14);--maxw:1080px;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#060b0e;--bg2:#0a1319;--ink:#eaf3f6;--ink2:#8ba0ab;--line:#1a2831;
  --panel:#0d1a21;--panel-brd:rgba(255,255,255,.10);--glass:rgba(14,26,33,.46);
  --brand:#40e0cf;--band:#40e0cf;--band-ink:#05130f;--link:#5eead4;--shadow:0 22px 70px rgba(0,0,0,.55);
}}
:root[data-theme=dark]{
  --bg:#060b0e;--bg2:#0a1319;--ink:#eaf3f6;--ink2:#8ba0ab;--line:#1a2831;
  --panel:#0d1a21;--panel-brd:rgba(255,255,255,.10);--glass:rgba(14,26,33,.46);
  --brand:#40e0cf;--band:#40e0cf;--band-ink:#05130f;--link:#5eead4;--shadow:0 22px 70px rgba(0,0,0,.55);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:transparent;color:var(--ink);font:16px/1.65 var(--font);overflow-x:hidden;position:relative;min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.num-hero,.chip .ca,.dial .dv,.bstat .big,.num-sub,.stat-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ic{display:inline-flex;align-items:center;justify-content:center;vertical-align:-0.18em}.ic svg{width:1.15em;height:1.15em;display:block}
button .ic,a .ic{margin-right:.4em}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:clamp(1.7rem,4.5vw,2.5rem);line-height:1.1;letter-spacing:-.02em;margin:.2em 0 .15em;text-wrap:balance}
h2{font-size:clamp(1.25rem,2.6vw,1.5rem);letter-spacing:-.01em;margin:1.4em 0 .35em}
h3{font-size:1.05rem;margin:1.1em 0 .2em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}.tiny{font-size:.8rem}.muted{color:var(--ink2)}.blk{margin:28px 0}
/* atmosphere */
.atmos{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;display:block;pointer-events:none}
.veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(130% 90% at 50% 0%,transparent 45%,color-mix(in srgb,var(--bg) 86%,transparent) 100%)}
/* header */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 66%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--panel-brd)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.16rem;color:var(--ink);letter-spacing:-.01em}.brand b{color:var(--link)}.brand svg{display:block;flex:none}
.nav{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav a{color:var(--ink2);font-weight:600;font-size:.92rem;white-space:nowrap}.nav a:hover{color:var(--link)}
/* immersive hero over the atmosphere */
.hero-atmos{position:relative;min-height:66vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 18px 30px}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.breath{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:min(9vw,70px) 0}
.breath::before,.breath::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid color-mix(in srgb,var(--band) 60%,transparent);transform:translate(-50%,-50%);animation:breathe var(--dur,4.6s) ease-in-out infinite}
.breath::before{width:min(78vw,360px);aspect-ratio:1}
.breath::after{width:min(96vw,460px);aspect-ratio:1;opacity:.45;animation-delay:.5s}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.3}50%{transform:translate(-50%,-50%) scale(1.05);opacity:.75}}
.num-hero{font-size:clamp(4.2rem,18vw,10.5rem);font-weight:700;letter-spacing:-.01em;line-height:.9;font-variant-numeric:tabular-nums;color:var(--ink);text-shadow:0 0 70px color-mix(in srgb,var(--band) 55%,transparent);position:relative;z-index:1}
.gauge-svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,420px);height:min(92vw,420px);pointer-events:none;z-index:0;filter:drop-shadow(0 6px 20px rgba(0,0,0,.12))}
.breath{z-index:1}.breath .num-sub,.breath .cat-lg{position:relative;z-index:1}
.breath::before,.breath::after{display:none}
@keyframes gsweep{to{stroke-dashoffset:0}}
.gauge-prog{animation:gsweep 1.15s cubic-bezier(.22,1,.36,1) forwards}
.gauge-mark{opacity:0;animation:gmark .35s ease-out 1s forwards}
@keyframes gmark{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.gauge-prog{animation:none;stroke-dashoffset:0!important}.gauge-mark{opacity:1;animation:none}}
.num-sub{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-top:6px}
.cat-lg{margin-top:10px;font-size:clamp(1.15rem,3.6vw,1.9rem);font-weight:800;letter-spacing:.02em;color:var(--btl,var(--link));text-transform:uppercase}
:root[data-theme=dark] .cat-lg{color:var(--btd,var(--link))}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .cat-lg{color:var(--btd,var(--link))}}
.env-label{margin-top:16px;font-size:clamp(1rem,2vw,1.15rem);color:var(--ink);max-width:34ch;font-weight:500}
.stagemeta{margin-top:10px;font-size:.82rem;color:var(--ink2)}
.nodata-stage{padding:min(9vw,70px) 0;text-align:center}.nodata-stage .cat-lg{color:var(--ink2)}
/* readable sheet below hero */
.sheet{position:relative;z-index:1;background:linear-gradient(180deg,transparent,var(--bg) 6%,var(--bg) 100%);padding-top:8px}
.sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,transparent,var(--bg));transform:translateY(-100%);pointer-events:none}
/* answer pill */
.answer{margin:18px 0;padding:16px 18px;border-radius:16px;background:var(--glass);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--panel-brd);border-left:4px solid var(--band);box-shadow:var(--shadow)}
.answer .lbl{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--band)}.answer p{margin:.4em 0 0;font-size:1.05rem}
/* glass panels + cards */
.glass,.card{background:var(--glass);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--panel-brd);border-radius:var(--radius);box-shadow:var(--shadow)}
.card{padding:16px 18px}
.panel{padding:18px 20px;margin:22px 0}
.lede{font-size:1.1rem;color:var(--ink2);max-width:62ch;margin:.4em auto 0}
.search{margin:18px auto 0;max-width:460px}.search input{width:100%;padding:13px 16px;border:1px solid var(--panel-brd);border-radius:14px;background:var(--glass);backdrop-filter:blur(10px);color:var(--ink);font-size:1rem}
/* pollutant dials */
.dials{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:12px}
.dial{padding:13px 15px;border-radius:14px;background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--panel-brd)}
.dial .dh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dial .dn{font-weight:700}.dial .dv{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.05rem}
.dial .du{font-size:.72rem;color:var(--ink2)}
.dial .bar{height:9px;border-radius:20px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden;margin-top:9px}
.dial .bar i{display:block;height:100%;border-radius:20px;transition:width .6s ease}
.dial .db{margin-top:7px;font-size:.72rem;font-weight:700;color:#fff;display:inline-block;padding:1px 8px;border-radius:20px}
/* city grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:14px}
.chip{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 15px 15px;border-radius:16px;color:var(--ink);overflow:hidden;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--panel-brd);box-shadow:var(--shadow)}
.chip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--cc,var(--band))}
.chip:hover{text-decoration:none;transform:translateY(-2px);transition:transform .14s}
.chip .cn{font-weight:700;font-size:.98rem}.chip .cs{font-size:.72rem;color:var(--ink2)}
.chip .ca{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;margin-top:4px}
.chip .cb{font-size:.7rem;font-weight:800;letter-spacing:.02em;color:var(--ct,var(--ink2));text-transform:uppercase}
/* ranking cards + view toggle */
.rank-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.viewtoggle{display:inline-flex;background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid var(--panel-brd);border-radius:12px;padding:3px}
.viewtoggle button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--ink2);font-weight:700;font-size:.85rem;padding:7px 13px;border-radius:9px;cursor:pointer;font-family:inherit}
.viewtoggle button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ranklist{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.statechips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.statechip{display:inline-block;padding:8px 14px;border-radius:20px;background:var(--glass);border:1px solid var(--panel-brd);color:var(--ink);font-weight:600;font-size:.88rem;transition:border-color .15s,color .15s}
.statechip:hover{border-color:var(--band);color:var(--band);text-decoration:none}
/* theme toggle + colour-blind */
.langsw{border:1px solid var(--panel-brd);border-radius:10px;color:var(--ink2);height:36px;min-width:36px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.86rem;text-decoration:none;flex:none;letter-spacing:.02em}
.langsw:hover{color:var(--band);border-color:var(--band);text-decoration:none}
.tbtn{background:none;border:1px solid var(--panel-brd);border-radius:10px;color:var(--ink2);width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.tbtn:hover{color:var(--band);border-color:var(--band)}
.tbtn .ic-dk{display:none}
:root[data-theme=dark] .tbtn .ic-dk{display:inline-flex}:root[data-theme=dark] .tbtn .ic-lt{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .tbtn .ic-dk{display:inline-flex}:root:not([data-theme=light]) .tbtn .ic-lt{display:none}}
.cbtoggle{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--panel-brd);border-radius:20px;color:var(--ink2);padding:7px 14px;font-weight:600;font-size:.82rem;cursor:pointer;font-family:inherit;margin-bottom:6px}
.cbtoggle[aria-pressed=true]{border-color:var(--band);color:var(--band)}
.cb .pill,.cb .dial .db,.cb .band-legend span{background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.32) 0 3px,transparent 3px 7px)}
.cb .scalebar .mk{width:5px;background:#000;box-shadow:0 0 0 2px #fff}
.deltarow{margin:12px 0}
.delta{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:.85rem;padding:5px 12px;border-radius:20px}
.delta.up{color:#d13a2f;background:color-mix(in srgb,#d13a2f 13%,transparent)}
.delta.down{color:#1f7d31;background:color-mix(in srgb,#1f7d31 13%,transparent)}
:root[data-theme=dark] .delta.down{color:#5bd977}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .delta.down{color:#5bd977}}
:root[data-theme=dark] .delta.up{color:#ff7a6e}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .delta.up{color:#ff7a6e}}
.delta.flat{color:var(--ink2);background:color-mix(in srgb,var(--ink) 8%,transparent)}
/* health face + AQI scale strip + richer dials */
.healthrow{display:flex;gap:18px;align-items:center}.hface-wrap{flex:none}.hface{display:block}
@media(max-width:480px){.healthrow{flex-direction:column;align-items:flex-start;gap:10px}}
.aqiscale{position:relative;margin:26px 0 4px;height:16px}
.aqiscale-bar{height:14px;border-radius:8px;width:100%}
.aqiscale-mk{position:absolute;top:-3px;width:3px;height:20px;background:var(--ink);border-radius:2px;transform:translateX(-50%);box-shadow:0 0 0 2px var(--card)}
.aqiscale-val{position:absolute;top:-26px;transform:translateX(-50%);font-family:var(--mono);font-weight:700;font-size:.82rem;padding:2px 8px;border-radius:8px;white-space:nowrap}
.aqiscale-lbls{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink2);margin-top:8px}
.dial .dv{font-size:1.2rem}
.rankcard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 15px;border-radius:14px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--panel-brd);color:var(--ink);box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,border-color .2s ease}
.rankcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cc,var(--band));transition:width .2s cubic-bezier(.22,1,.36,1)}
.rankcard:hover{transform:translateY(-3px);text-decoration:none;border-color:color-mix(in srgb,var(--cc) 45%,var(--panel-brd));box-shadow:0 16px 36px color-mix(in srgb,var(--cc) 22%,rgba(0,0,0,.16))}
.rankcard:hover::before{width:7px}
.rankcard:hover .rc-aqi{transform:scale(1.07)}
.rankcard:active{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.rankcard,.rankcard::before,.rankcard .rc-aqi{transition:none}.rankcard:hover{transform:none}.rankcard:hover .rc-aqi{transform:none}}
.rankcard .rk{font-family:var(--mono);font-weight:700;font-size:1rem;color:var(--ink2);min-width:1.7em;text-align:center}
.rc-main{min-width:0;display:block}
.rc-top{display:flex;align-items:baseline;gap:8px}.rc-name{font-size:1.02rem}.rc-reg{font-size:.78rem;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scalebar{display:block;position:relative;height:8px;border-radius:6px;margin:8px 0 7px;background:linear-gradient(90deg,#55A84F 0 10%,#A3C853 10% 20%,#FFF833 20% 40%,#F29C33 40% 60%,#E93F33 60% 80%,#AF2D24 80% 100%)}
.scalebar .mk{position:absolute;top:50%;width:3px;height:15px;background:var(--ink);border-radius:2px;transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--card)}
.rc-bot{display:flex;gap:10px;align-items:center}.rc-band{font-weight:700;font-size:.8rem;color:var(--ct,var(--ink2))}.rc-dom{font-size:.72rem;color:var(--ink2);background:color-mix(in srgb,var(--ink) 7%,transparent);padding:1px 8px;border-radius:20px}
.rc-aqi{font-family:var(--mono);font-weight:700;font-size:1.9rem;color:var(--ct,var(--ink));font-variant-numeric:tabular-nums;line-height:1;transition:transform .2s cubic-bezier(.22,1,.36,1);transform-origin:right center}
:root[data-theme=dark] .rc-band,:root[data-theme=dark] .rc-aqi{color:var(--cc,var(--band))}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .rc-band,:root:not([data-theme=light]) .rc-aqi{color:var(--cc,var(--band))}}
@media(max-width:520px){.rc-aqi{font-size:1.55rem}.rc-reg{display:none}}
/* sticky context bar + live dot + ago */
.ctxbar{position:fixed;left:0;right:0;top:59px;z-index:45;display:flex;align-items:center;gap:9px;padding:9px 18px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--panel-brd);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .26s ease,transform .26s ease,visibility .26s}
.ctxbar.show{opacity:1;visibility:visible;transform:none}
.ctxbar .cx-dot{width:9px;height:9px;border-radius:50%;background:var(--band);flex:none;animation:cxpulse 2s ease-in-out infinite}
.ctxbar .cx-name{font-weight:800}.ctxbar .cx-aqi{font-family:var(--mono);font-weight:700;color:var(--btl,var(--link))}.ctxbar .cx-band{font-weight:700;color:var(--btl,var(--link));font-size:.92rem}.ctxbar .cx-band::before{content:"·";margin-right:7px;color:var(--ink2)}
:root[data-theme=dark] .ctxbar .cx-aqi,:root[data-theme=dark] .ctxbar .cx-band{color:var(--btd,var(--link))}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ctxbar .cx-aqi,:root:not([data-theme=light]) .ctxbar .cx-band{color:var(--btd,var(--link))}}
@keyframes cxpulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--band) 26%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--band) 6%,transparent)}}
.eyebrow .live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#39d353;margin-right:8px;vertical-align:middle;animation:livep 2s ease-in-out infinite}
@keyframes livep{0%,100%{opacity:1;box-shadow:0 0 0 2px color-mix(in srgb,#39d353 32%,transparent)}50%{opacity:.5;box-shadow:0 0 0 5px color-mix(in srgb,#39d353 6%,transparent)}}
.ago{font-variant-numeric:tabular-nums}
.ago:not(:empty){margin-left:5px}
.ago:not(:empty)::before{content:"· ";margin-right:2px;opacity:.7}
@media(prefers-reduced-motion:reduce){.ctxbar .cx-dot,.eyebrow .live{animation:none}}
/* skeleton shimmer */
.skel{background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 6%,transparent) 25%,color-mix(in srgb,var(--ink) 13%,transparent) 37%,color-mix(in srgb,var(--ink) 6%,transparent) 63%);background-size:400% 100%;animation:shim 1.4s ease infinite;border-radius:10px}
@keyframes shim{0%{background-position:100% 0}100%{background-position:0 0}}
#map,#minimap{background:color-mix(in srgb,var(--ink) 5%,transparent)}
/* custom selects + focus */
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 11px center;padding-right:34px!important;cursor:pointer}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--band);outline-offset:2px;border-radius:6px}
button,select{font-family:inherit}
/* mobile bottom tab bar */
.tabbar{display:none}
@media(max-width:700px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-top:1px solid var(--panel-brd);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink2);font-size:.68rem;font-weight:700;padding:5px 0}
  .tabbar a .ic svg{width:22px;height:22px}
  .tabbar a.on{color:var(--band)}
  body{padding-bottom:60px}
  .ctxbar{top:58px}
}
/* homepage location detector */
.locrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
.detectbtn{display:inline-flex;align-items:center;gap:8px;background:var(--band);color:var(--band-ink);border:0;border-radius:12px;padding:12px 20px;font-weight:800;font-size:.98rem;cursor:pointer;box-shadow:var(--shadow);font-family:inherit}
.detectbtn:hover{filter:brightness(1.07)}
.locresult{margin-top:12px}
.loccard{display:flex;flex-direction:column;gap:4px;max-width:440px;padding:15px 17px;border-radius:16px;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--panel-brd);border-left:6px solid var(--cc,var(--band));box-shadow:var(--shadow);color:var(--ink)}
.loccard:hover{text-decoration:none;transform:translateY(-1px);transition:transform .12s}
.loccard .lc-name{font-weight:800;font-size:1.08rem}.loccard .lc-num{font-family:var(--mono);font-weight:700;font-size:1.9rem;vertical-align:-.15em;margin-right:6px}
/* tables */
.scroll{overflow-x:auto;border-radius:14px}.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th,.tbl td{border-bottom:1px solid var(--panel-brd);padding:10px 12px;text-align:left}.tbl thead th{background:color-mix(in srgb,var(--ink) 5%,transparent);font-size:.82rem;letter-spacing:.02em}
.pill{color:#fff;padding:2px 9px;border-radius:20px;font-size:.76rem;font-weight:700;white-space:nowrap}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:640px){.two{grid-template-columns:1fr}}
/* section jump-nav */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.sheet [id]{scroll-margin-top:72px}
.secnav{display:flex;gap:8px;overflow-x:auto;margin:2px 0 18px;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.secnav::-webkit-scrollbar{display:none}
.secnav a{flex:none;padding:7px 14px;border-radius:20px;background:var(--glass);border:1px solid var(--panel-brd);color:var(--ink2);font-weight:600;font-size:.85rem;text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.secnav a:hover{color:var(--band);border-color:var(--band)}
/* chips row (rank + dominant) */
.chiprow{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 16px}
.rankchip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:20px;background:color-mix(in srgb,var(--band) 12%,var(--glass));border:1px solid color-mix(in srgb,var(--band) 32%,var(--panel-brd));color:var(--ink);font-weight:700;font-size:.84rem}
.rankchip.alt{background:var(--glass);border-color:var(--panel-brd);color:var(--ink2);font-weight:600}
.rankchip svg{width:15px;height:15px}
/* per-station table */
.sttbl td,.sttbl th{padding:9px 12px}.sttbl .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink2)}
.stpill{display:inline-block;min-width:40px;text-align:center;padding:2px 9px;border-radius:20px;font-weight:800;font-variant-numeric:tabular-nums}
/* metro strip */
.metrostrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:11px}
.metrocard{display:flex;flex-direction:column;gap:2px;padding:13px 15px;border-radius:14px;background:var(--glass);border:1px solid var(--panel-brd);border-left:4px solid var(--cc,var(--band));color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.metrocard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.mc-name{font-weight:700;font-size:.92rem}.mc-aqi{font-family:var(--mono);font-size:1.7rem;font-weight:700;line-height:1.1}.mc-band{font-size:.76rem;font-weight:700;text-transform:uppercase;color:var(--ct,var(--ink2));letter-spacing:.02em}
.mc-spark{width:100%;height:20px;margin-top:6px;opacity:.9;overflow:visible}
/* AEO quick-answer block on pillar/reference pages */
.quickans{background:color-mix(in srgb,var(--link) 8%,var(--panel));border:1px solid var(--panel-brd);border-left:4px solid var(--link);border-radius:14px;padding:14px 18px;margin:20px 0 6px}
.quickans .qa-l{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--link)}.quickans .qa-l svg{width:14px;height:14px}
.quickans p{margin:.35em 0 0;font-size:1.06rem;line-height:1.55;color:var(--ink)}
.prose.article h2{margin-top:1.5em}
/* live worst-cities ticker */
.ticker{display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--band) 12%,var(--bg2));border-bottom:1px solid var(--panel-brd);padding:7px 14px;overflow:hidden;position:relative;z-index:55}
.tk-lbl{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);white-space:nowrap}.tk-lbl svg{width:14px;height:14px;color:var(--band)}
.tk-track{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.tk-run{display:inline-flex;gap:22px;white-space:nowrap;will-change:transform;animation:tkscroll 48s linear infinite}
.tk-track:hover .tk-run{animation-play-state:paused}
.tk-i{display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none;font-size:.86rem;font-weight:600}.tk-i i{width:9px;height:9px;border-radius:50%;flex:none}.tk-i b{font-weight:800}.tk-i span{font-family:var(--mono);font-weight:800}
@keyframes tkscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tk-run{animation:none}.tk-track{overflow-x:auto}}
/* national insights */
.insgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.ins-tile{background:var(--glass);border:1px solid var(--panel-brd);border-radius:14px;padding:14px 16px}
.ins-tile h3{margin:0 0 10px;font-size:1rem}
.ins-th{display:flex;align-items:center;justify-content:space-between}.ins-th h3{margin:0}
.ins-chg{font-family:var(--mono);font-weight:800;font-size:.82rem;color:var(--ink2)}.ins-chg.up{color:#c92117}.ins-chg.down{color:#1f7d31}
.ins-note{margin:10px 0 0;font-size:.76rem;color:var(--ink2)}
.rgbars,.psbars{display:flex;flex-direction:column;gap:8px}
.rgrow,.psrow{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:9px}
.rg-n,.ps-n{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-bar,.ps-bar{height:8px;border-radius:5px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}
.rg-bar i,.ps-bar i{display:block;height:100%;border-radius:5px}.ps-bar i{background:var(--link)}
.rg-v{font-family:var(--mono);font-weight:800;font-size:.9rem}.ps-v{font-family:var(--mono);font-weight:700;font-size:.82rem;color:var(--ink2)}
.psrow{grid-template-columns:76px 1fr auto}
/* biggest movers */
.mv-h{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}.mv-h.up{color:#c92117}.mv-h.down{color:#1f7d31}
.mv{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:11px;background:var(--glass);border:1px solid var(--panel-brd);color:var(--ink);text-decoration:none;margin-bottom:7px}
.mv:hover{border-color:var(--link)}
.mv-d{font-family:var(--mono);font-weight:800;font-size:.84rem;min-width:3.4ch}.mv-d.up{color:#c92117}.mv-d.down{color:#1f7d31}
.mv-n{font-weight:700;font-size:.92rem;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-a{font-family:var(--mono);font-weight:800}
:root[data-theme=dark] .mc-band{color:var(--cc,var(--band))}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .mc-band{color:var(--cc,var(--band))}}
/* calendar heatmap */
.calwrap{display:flex;gap:6px;min-width:min-content}
.calcol{display:grid;grid-template-rows:repeat(7,1fr);gap:4px;flex:none}
.cal-wd{display:flex;align-items:center;justify-content:center;width:20px;height:26px;font-size:.66rem;font-weight:700;color:var(--ink2)}
.calgrid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:4px}
.cal-cell{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;font-variant-numeric:tabular-nums;background:var(--glass);border:1px solid var(--panel-brd);color:var(--ink2)}
.cal-cell.empty{background:transparent;border:none}
.cal-cell.blank{opacity:.45}
/* homepage v2 */
.hubfind{display:flex;gap:10px;margin:4px 0 6px;align-items:stretch}.hubfind .search{flex:1;margin:0}.hubfind .detectbtn{flex:none;white-space:nowrap}
@media(max-width:520px){.hubfind{flex-direction:column}.hubfind .detectbtn{width:100%;justify-content:center}}
.hubh1{margin-top:26px}
.distrib{margin:16px 0 4px}
.dhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}.dbig{font-family:var(--mono);font-weight:700;font-size:2rem;line-height:1;color:var(--ink)}.dhead-t{color:var(--ink2);font-weight:600;font-size:.95rem}
.dbar{display:flex;gap:3px;height:30px}
.dseg{min-width:12px;border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dseg b{color:#fff;font-size:.76rem;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.dlegend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px}.dleg{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--ink2)}.dleg i{width:11px;height:11px;border-radius:3px;flex:none}.dleg b{color:var(--ink);font-variant-numeric:tabular-nums}
.snapgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin:18px 0}
.snapcard{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--panel-brd);border-left:4px solid var(--cc,var(--band));color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
a.snapcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
.sc-l{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}.sc-city{font-weight:800;font-size:1.35rem;line-height:1.15}.sc-b{font-size:.82rem;font-weight:700}
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:20px;background:var(--glass);border:1px solid var(--panel-brd);color:var(--ink2);font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit}
.fchip i{width:10px;height:10px;border-radius:50%;flex:none}.fchip.on{color:var(--ink);border-color:var(--link);background:color-mix(in srgb,var(--link) 12%,var(--glass))}
.dsec{margin:16px 0}.dsec-h{display:flex;align-items:center;gap:9px;font-size:1.05rem;font-weight:800;margin:0 0 10px}.dsec-dot{width:13px;height:13px;border-radius:4px;flex:none}.dsec-n{font-family:var(--mono);font-size:.85rem;color:var(--ink2);font-weight:700;background:color-mix(in srgb,var(--ink) 7%,transparent);padding:1px 9px;border-radius:20px}
.dchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
.dchip{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;background:var(--glass);border:1px solid var(--panel-brd);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.dchip:hover{transform:translateY(-1px);border-color:var(--link);text-decoration:none}
.dc-a{font-family:var(--mono);font-weight:800;font-size:1.15rem;min-width:2.4ch;text-align:right;font-variant-numeric:tabular-nums}
.dc-t{display:flex;flex-direction:column;min-width:0}.dc-n{font-weight:700;font-size:.92rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dc-s{font-size:.72rem;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 3D pollution-terrain hero (always dark ground so colour pops) */
/* three clean zones: headline / unobstructed terrain / solid control deck */
.hero-terrain{position:relative;min-height:90vh;display:flex;flex-direction:column;background:radial-gradient(125% 80% at 50% 2%,#13293d,#0a1826 48%,#070f18)}
.hero-col{flex:1;display:flex;flex-direction:column;width:100%;max-width:var(--maxw);margin:0 auto;padding:26px 18px 0;min-height:0}
.terrain-stage{position:relative;flex:1;min-height:36vh;margin-top:14px}
.terrain-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 60% at 52% 94%,color-mix(in srgb,var(--band) 30%,transparent),transparent 72%)}
.terrain-stage::after{content:"";position:absolute;left:0;right:0;top:0;height:24%;pointer-events:none;z-index:2;background:linear-gradient(180deg,#0a1826 0%,rgba(10,24,38,.5) 45%,transparent 100%)}
.terrain-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.t-deck{position:relative;z-index:2;background:linear-gradient(180deg,#0a1826,#0b1a29);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -20px 40px rgba(7,15,24,.6)}
.t-deck>.wrap{padding-top:20px;padding-bottom:26px}
.t-deck a,.t-deck input,.t-deck button{pointer-events:auto}
.t-top{display:flex;flex-direction:column;gap:6px;position:relative;z-index:3;max-width:660px}
.eyebrow-d{color:#8fb0c6}
.t-h1{font-weight:800;font-size:clamp(1.9rem,6.4vw,3.2rem);line-height:1.03;letter-spacing:-.02em;color:#fff;margin:6px 0 0;text-wrap:balance;text-shadow:0 2px 34px rgba(0,0,0,.55)}
.t-spot{display:inline-flex;flex-direction:column;gap:4px;text-decoration:none;background:rgba(255,255,255,.09);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);border:1px solid rgba(255,255,255,.16);border-left:5px solid var(--band);border-radius:16px;padding:11px 17px;align-self:flex-start;transition:transform .15s}
a.t-spot:hover{text-decoration:none;transform:translateY(-2px)}
.ts-l{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#93abbe}
.ts-row{display:flex;align-items:center;gap:12px}
.ts-meta{display:flex;flex-direction:column;line-height:1.1}
.ts-city{font-weight:800;font-size:1.3rem;color:#fff}
.ts-band{font-weight:800;text-transform:uppercase;font-size:.8rem;color:var(--band)}
.t-spot .num-hero{font-size:clamp(2.4rem,9vw,3.4rem);line-height:.85;color:#fff;text-shadow:0 0 28px color-mix(in srgb,var(--band) 72%,transparent)}
.hubfind{margin:2px 0 4px}
/* dark control deck: search/detect + distribution, light-on-dark */
.t-deck .locresult:empty{display:none}
.hero-terrain .hubfind{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin:0 0 14px}
.hero-terrain .hubfind .search{flex:1 1 260px;margin:0}
.hero-terrain .search input{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);color:#fff}
.hero-terrain .search input::placeholder{color:#9fb3c0}
.hero-terrain .detectbtn{flex:none}
.hero-terrain .distrib{margin:0}
.hero-terrain .dbig{color:#fff}
.hero-terrain .dhead-t{color:#c4d2dc}
.hero-terrain .dbar{border-color:rgba(255,255,255,.2)}
.hero-terrain .dleg{color:#c4d2dc}.hero-terrain .dleg b{color:#fff}
/* city finder w/ autocomplete */
.finder{position:relative;max-width:640px;margin:0 0 10px}
.fsearch{position:relative;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:15px;padding:0 7px 0 14px;height:54px;transition:border-color .15s,box-shadow .15s}
.fsearch:focus-within{border-color:rgba(255,255,255,.55);box-shadow:0 0 0 3px rgba(255,255,255,.12);background:rgba(255,255,255,.13)}
.fs-ic{display:flex;flex:none;color:#9fb3c0}.fs-ic svg{width:20px;height:20px}
.fsearch input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;font-family:inherit;font-size:1.03rem;padding:0}
.fsearch input::placeholder{color:#9fb3c0}
.fs-detect{display:inline-flex;align-items:center;gap:7px;flex:none;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:11px;height:40px;padding:0 14px;font-weight:700;font-size:.9rem;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s}
.fs-detect:hover{background:rgba(255,255,255,.22)}.fs-detect svg{width:17px;height:17px}
.aclist{position:absolute;left:0;right:0;top:60px;z-index:30;list-style:none;margin:0;padding:6px;background:#0c1b29;border:1px solid rgba(255,255,255,.16);border-radius:15px;box-shadow:0 24px 56px rgba(0,0,0,.55);max-height:min(58vh,360px);overflow:auto}
.acitem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;cursor:pointer}
.acitem.on,.acitem:hover{background:rgba(255,255,255,.1)}
.ac-a{font-family:var(--mono);font-weight:800;font-size:1.05rem;min-width:2.8ch;text-align:right;font-variant-numeric:tabular-nums}
.ac-n{font-weight:700;color:#fff}.ac-s{color:#93abbe;font-size:.82rem;margin-left:auto;white-space:nowrap}
@media(max-width:480px){.fs-detect-t{display:none}.fs-detect{padding:0 12px}}
/* interactive distribution */
.dseg{border:0;cursor:pointer;font:inherit;padding:0;transition:filter .12s}
.dseg:hover,.dseg:focus-visible{filter:brightness(1.12)}
.dleg{border:0;background:none;cursor:pointer;font:inherit;padding:3px 4px;border-radius:8px;transition:background .12s}
.dleg:hover,.dleg:focus-visible{background:rgba(255,255,255,.08)}
/* directory own search */
.dfilter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.dsearch{flex:1 1 220px;margin:0}
.prose p,.prose li{max-width:72ch;color:var(--ink)}.prose ul{padding-left:1.2em}.prose{margin-left:auto;margin-right:auto}
.faq details{border:1px solid var(--panel-brd);border-radius:14px;margin-bottom:10px;background:var(--glass);backdrop-filter:blur(10px)}.faq summary{cursor:pointer;font-weight:700;padding:14px 16px}.faq p{padding:0 16px 14px;color:var(--ink2)}
.band-legend{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.band-legend span{font-size:.74rem;font-weight:700;color:#fff;padding:4px 11px;border-radius:20px}
.cta{display:flex;flex-wrap:wrap;gap:11px;margin:22px 0}.cta a{background:var(--band);color:var(--band-ink);border-radius:12px;padding:11px 17px;font-weight:700;font-size:.92rem}.cta a:hover{text-decoration:none;filter:brightness(1.08)}
.src{font-size:.78rem;color:var(--ink2);margin-top:8px}
.site-foot{margin-top:44px;border-top:1px solid var(--panel-brd);background:color-mix(in srgb,var(--bg) 80%,transparent)}.site-foot .wrap{padding:26px 18px;font-size:.85rem;color:var(--ink2)}
.foot-links{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:10px}.foot-links a{color:var(--ink2)}
@media(prefers-reduced-motion:reduce){.breath::before,.breath::after{animation:none}html{scroll-behavior:auto}}
.bodystats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}@media(max-width:560px){.bodystats{grid-template-columns:1fr}}
.bstat{padding:16px 18px;border-radius:14px;background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--panel-brd)}
.bstat .big{font-size:2.2rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--band)}
.bstat .lab{font-weight:700;margin-top:6px}.bstat .sub{font-size:.82rem;color:var(--ink2);margin-top:4px}
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.act{display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border-radius:12px;border:1px solid var(--panel-brd);background:color-mix(in srgb,var(--ink) 3%,transparent)}
.act .ic{color:var(--band);flex:none}.act .ic svg{width:26px;height:26px}.act .t{font-weight:700;font-size:.9rem}.act .v{font-size:.82rem;font-weight:700;margin-top:2px}
.act .v.ok{color:#2e9e3f}.act .v.warn{color:#c98a00}.act .v.bad{color:#d13a2f}
.prof{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}.prof select{padding:8px 12px;border:1px solid var(--panel-brd);border-radius:10px;background:var(--glass);color:var(--ink);font-size:.92rem}
.prof-advice{margin-top:8px;font-size:1rem}
.sharebar{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.sharebar button{background:var(--glass);border:1px solid var(--panel-brd);border-radius:10px;padding:10px 16px;font-weight:700;color:var(--ink);cursor:pointer;font-size:.9rem}.sharebar button:hover{border-color:var(--band)}
#map,#minimap{width:100%;border-radius:14px;border:1px solid var(--panel-brd);z-index:0}
.leaflet-popup-content{font:inherit}