:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app{min-height:100vh;width:100vw;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);display:flex;align-items:center;justify-content:center;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}@media (max-width: 768px){.app{padding:10px}}.aqi-card{width:100vw;height:auto;border-radius:0;padding:40px;color:#333;position:relative;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}@media (min-width: 769px){.aqi-card{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;row-gap:8px;column-gap:16px;padding:24px;height:auto;box-sizing:border-box}.card-header{grid-column:1 / -1}.aqi-main{grid-column:1;grid-row:2}.particulates-section{grid-column:2;grid-row:2;margin-bottom:0}.health-advisory{grid-column:1;grid-row:3;align-self:end;height:fit-content;margin-top:-30px}.combined-data-section{grid-column:2;grid-row:3;align-self:end;height:fit-content;margin-top:-30px}.aqi-dial-container{grid-column:1 / -1;grid-row:4;display:flex;justify-content:center;align-items:center;margin:16px 0}.analytics-grid{grid-column:1 / -1;grid-row:5}}.card-header{display:flex;align-items:center;margin-bottom:40px;font-size:16px;font-weight:500}.back-arrow{margin-right:12px;font-size:20px;font-weight:300;cursor:pointer;padding:8px;border-radius:50%;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:36px;height:36px}.back-arrow:hover{background:#fff3;transform:translate(-2px)}.location{color:#333;opacity:.8}.city-dropdown{background:#fff3;border:2px solid rgba(255,255,255,.3);border-radius:12px;padding:8px 16px;font-size:16px;font-weight:500;color:#333;cursor:pointer;transition:all .3s ease;outline:none;min-width:200px}.city-dropdown:hover{background:#ffffff4d;border-color:#ffffff80}.city-dropdown:focus{background:#fff6;border-color:#ffffffb3}.aqi-main{text-align:left;margin-bottom:30px;position:relative}.aqi-number{font-size:120px;font-weight:300;line-height:.9;color:#333;margin-bottom:8px}@media (min-width: 769px){.aqi-number{font-size:200px}}.aqi-status{font-size:18px;font-weight:500;color:#333;opacity:.9;margin-bottom:20px;position:relative;left:10px}.particulates-section{background:#ffffffb3;border:2px solid rgba(255,255,255,.4);border-radius:24px;padding:16px;margin-bottom:0;position:relative;overflow:hidden;height:fit-content;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.section-title{font-size:12px;font-weight:600;color:#666;letter-spacing:.5px;margin:0 0 12px}.particulates-data{display:flex;justify-content:space-between;margin-bottom:12px}.particulate-item{display:flex;flex-direction:column;align-items:flex-start}.percentage{font-size:48px;font-weight:300;color:#333;line-height:1;margin-bottom:4px}.pm-info{font-size:14px;color:#666;font-weight:500}.particles-viz{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;height:80px}.particle-field{display:flex;justify-content:center;align-items:flex-end;padding:0 4px}.particle-column{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;height:100%;position:relative}.particle-field.pm10 .particle{background:#0009;width:8px;height:8px}.particle-field.pm25 .particle{background:#00000080;width:3px;height:3px}.particle{position:absolute;width:4px;height:4px;border-radius:50%;opacity:.6;animation:float 3s infinite ease-in-out}.particle-field{position:relative;height:80px;background:transparent;border-radius:12px;overflow:hidden}.aqi-card[style*=befa66] .particle{background:#8bc34a}.aqi-card[style*=edcd3e] .particle{background:#f57f17}.aqi-card[style*=fd9b65] .particle{background:#e65100}@keyframes float{0%,to{transform:translateY(0) scale(1);opacity:.6}50%{transform:translateY(-10px) scale(1.1);opacity:.8}}.combined-data-section{background:#ffffff80;border:2px solid rgba(255,255,255,.4);border-radius:24px;padding:16px 20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-bottom:0;height:fit-content}.data-container{display:flex;align-items:stretch;gap:20px}.data-section{flex:1;display:flex;flex-direction:column}.data-title{font-size:13px;font-weight:700;letter-spacing:.4px;color:#555;margin-bottom:12px;text-transform:uppercase;text-align:center}.data-content{display:flex;justify-content:space-around;align-items:center;gap:8px}.data-divider{width:2px;background:#fff9;border-radius:1px;align-self:stretch;margin:12px 0}.compact-pollutant-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px}.compact-pollutant-label{font-size:15px;font-weight:700;color:#555;margin-bottom:2px;text-transform:uppercase;letter-spacing:.2px}.compact-pollutant-value{font-size:15px;font-weight:300;color:#222;line-height:1}.compact-weather-item{display:flex;flex-direction:column;align-items:center}.compact-weather-icon{font-size:15px;margin-bottom:4px;opacity:.7}.compact-weather-value{font-size:15px;font-weight:300;color:#333;line-height:1}.compact-weather-unit{font-size:10px;color:#666;font-weight:500}.health-advisory{background:#ffffff80;border:2px solid rgba(255,255,255,.4);border-radius:24px;padding:16px 20px;display:flex;align-items:center;gap:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-bottom:0;height:80px}.advisory-icon{font-size:24px;flex-shrink:0}.advisory-text{flex:1}.advisory-title{font-size:14px;font-weight:600;color:#333;opacity:.8;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.advisory-message{font-size:16px;font-weight:500;color:#333;line-height:1.4}.aqi-dial-container{position:relative;width:100%;display:flex;justify-content:center;align-items:center;margin:20px 0}.analytics-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:16px;margin:16px 0 0;height:fit-content}.panel{background:#fff9;border:2px solid rgba(255,255,255,.4);border-radius:12px;padding:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);height:fit-content;min-height:80px}.panel-title{font-size:10px;font-weight:700;letter-spacing:.4px;color:#555;margin-bottom:6px}.trend-panel{grid-column:1;grid-row:2}.weekly-panel{grid-column:2;grid-row:2}.forecast-left{grid-column:1;grid-row:3}.forecast-right{grid-column:2;grid-row:3}.chart-container{position:relative;height:140px;display:flex;flex-direction:column}.y-axis-label{position:absolute;left:-8px;top:-2px;font-size:10px;font-weight:600;color:#666;writing-mode:vertical-lr;text-orientation:mixed}.x-axis-labels{display:flex;justify-content:space-between;margin-top:4px;padding:0 2px}.x-label{font-size:9px;font-weight:500;color:#666;text-align:center}.hourly-bars{column-gap:2px}.mini-bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:end;column-gap:6px;height:100px;flex:1;padding:0 8px}.bar{width:100%;background:#111;border-radius:2px 2px 0 0;opacity:.75;transition:all .2s ease}.bar:hover{filter:brightness(.8);transform:translateY(-2px)}.bar.trend{background:#2196f3;opacity:.8}.bar.forecast{background:#111;opacity:.45;border:1px dashed rgba(0,0,0,.3);background:repeating-linear-gradient(45deg,#111,#111 2px,transparent 2px,transparent 4px)}.bar.forecast:hover{opacity:.7}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.aqi-card{width:calc(100vw - 20px);height:auto;margin:10px;border-radius:24px;box-shadow:0 20px 40px #00000026;padding:20px;box-sizing:border-box}.aqi-number{font-size:clamp(64px,18vw,100px)}.percentage{font-size:clamp(24px,8vw,40px)}.city-dropdown{min-width:auto;flex:1}.analytics-grid{grid-template-columns:1fr;grid-template-rows:repeat(5,auto);gap:12px;margin:16px 0 0}.trend-panel,.weekly-panel,.forecast-left,.forecast-right{grid-column:1}.trend-panel{grid-row:2}.weekly-panel{grid-row:3}.forecast-left{grid-row:4}.forecast-right{grid-row:5}.combined-data-section{margin-bottom:16px;overflow:hidden}.health-advisory,.particulates-section{margin-bottom:16px}.chart-container{height:160px}.mini-bars{height:120px;column-gap:4px}.hourly-bars{column-gap:1px}.data-container{flex-direction:column;gap:12px}.data-divider{width:100%;height:2px;margin:8px 0}.data-content{flex-wrap:wrap;justify-content:space-evenly}}@media (max-width: 380px){.card-header{margin-bottom:20px}.city-dropdown{font-size:14px;padding:6px 12px;min-width:140px}.aqi-status{font-size:16px;left:6px}.advisory-message{font-size:14px}.particles-viz{height:64px}.chart-container{height:140px}.mini-bars{height:100px}.compact-weather-value,.compact-pollutant-value{font-size:14px}}.aqi-dial{display:inline-block}.aqi-dial svg{display:block}.home-page{min-height:100vh;width:100vw;background:linear-gradient(135deg,#3341aa,#49207c);display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.home-content{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;width:100%}.logo-img{width:300px;height:auto;animation:fadeInUp .8s ease-out}.logo-wrapper{position:relative;display:inline-block;top:-8%}.clouds{position:absolute;inset:0;pointer-events:none;z-index:2}.cloud{position:absolute;background:#ffffffd9;border-radius:999px;filter:blur(2px);box-shadow:20px 10px #ffffffbf,-15px 12px #ffffffb3,8px -6px #ffffffb3;animation:cloudDrift 8s linear infinite,cloudFade 8s ease-in-out infinite}.cloud-1{width:70px;height:40px;top:-2%;left:-16%;animation-duration:10s,10s;animation-delay:0s,0s}.cloud-2{width:70px;height:40px;top:20%;right:-18%;animation-duration:12s,12s;animation-delay:1s,1s}.cloud-3{width:90px;height:65px;bottom:16%;left:-22%;animation-duration:11s,11s;animation-delay:.5s,.5s}.cloud-4{width:110px;height:55px;bottom:-6%;right:-16%;animation-duration:9s,9s;animation-delay:.8s,.8s}.cloud-5{width:100px;height:50px;top:-14%;left:50%;transform:translate(-50%);animation-duration:8s,8s;animation-delay:1.2s,1.2s}@keyframes cloudDrift{0%{transform:translate(0) translateY(0) scale(1)}25%{transform:translate(6%) translateY(-2%) scale(1.05)}50%{transform:translate(12%) translateY(0) scale(1.08)}75%{transform:translate(6%) translateY(2%) scale(1.03)}to{transform:translate(0) translateY(0) scale(1)}}@keyframes cloudFade{0%,to{opacity:.25}50%{opacity:.8}}.home-title{font-size:48px;font-weight:300;color:#fff;margin:0 0 16px;letter-spacing:-1px;animation:fadeInUp .8s ease-out .2s both}.home-subtitle{font-size:18px;font-weight:400;color:#fffc;margin:0 0 40px;animation:fadeInUp .8s ease-out .4s both}.city-selector{animation:fadeInUp .8s ease-out .6s both}.city-dropdown-home{background:#ffffff26;border:2px solid rgba(255,255,255,.3);border-radius:50px;padding:16px 50px 16px 32px;font-size:16px;font-weight:500;color:#fff;cursor:pointer;transition:all .3s ease;outline:none;min-width:280px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 16px center;background-size:20px}.city-dropdown-home:hover{background:#ffffff40;border-color:#ffffff80;transform:translateY(-2px);box-shadow:0 10px 25px #0003}.city-dropdown-home:focus{background:#ffffff4d;border-color:#ffffffb3;transform:translateY(-2px);box-shadow:0 10px 25px #0003}.city-dropdown-home option{background:#667eea;color:#fff;padding:12px}@media (max-width: 768px){.home-title{font-size:36px}.home-subtitle{font-size:16px}.logo-img{width:min(70vw,260px)}.city-dropdown-home{min-width:250px;font-size:14px}}@media (max-width: 480px){.home-title{font-size:28px}.logo-wrapper{top:-4%}.logo-img{width:min(78vw,220px)}.city-dropdown-home{min-width:220px}.home-page{padding:10px}}