@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
.chart-wrap{position:relative}.chart-tooltip{position:absolute;top:16px;z-index:1;min-width:180px;padding:13px 15px;border:1px solid #4b6970;border-radius:12px;background:#10232c;box-shadow:0 12px 28px #07121799;color:#e6f0ee;pointer-events:none;font-size:12px}.chart-tooltip[hidden]{display:none}.chart-tooltip>strong{display:block;margin-bottom:10px;font-size:13px;font-weight:600;white-space:nowrap}.chart-tooltip div{display:flex;justify-content:space-between;gap:20px;padding:3px 0}.chart-tooltip span{color:#acc2c1}.chart-tooltip span:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}.chart-tooltip .pm1-key:before{background:#6b97ed}.chart-tooltip .pm25-key:before{background:#6de0bd}.chart-tooltip .pm10-key:before{background:#e4b870}.chart-tooltip b{font-weight:600;font-variant-numeric:tabular-nums}
.controls,.legend{flex-wrap:wrap}.legend{justify-content:flex-end;row-gap:8px}.legend .series-key:before,.chart-tooltip .series-key:before{background:var(--series-color)}.chart-tooltip #tooltip-values{display:block}.chart-tooltip #tooltip-values>div{display:flex}.chart-tooltip>strong{white-space:normal}
:root{font-family:'DM Sans',system-ui,sans-serif;color:#e6f0ee;background:#101d25;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 83% -10%,#21434a 0,transparent 34%),#101d25}main{max-width:1180px;margin:auto;padding:52px 30px 32px}header{display:flex;justify-content:space-between;gap:32px;align-items:end}.eyebrow{color:#6ed7bd;font-size:11px;letter-spacing:.22em;font-weight:700;margin:0 0 14px}h1,h2,strong{font-family:'Space Grotesk',system-ui,sans-serif}h1{font-size:clamp(42px,6vw,70px);line-height:1.05;letter-spacing:-.055em;margin:0}.dot{color:#62dab7}.subtitle{color:#9cafb4;margin:14px 0 0}.controls{display:flex;gap:12px}.controls label{display:grid;gap:8px;color:#90a9ac;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}select{appearance:none;border:1px solid #36515a;background:#1a3039;color:#e6f0ee;border-radius:11px;padding:13px 36px 13px 14px;min-width:160px;font:inherit;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' stroke='%23b3ccc9' fill='none' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}.statusbar{display:flex;align-items:center;gap:9px;color:#a9bec0;font-size:13px;margin:38px 0 20px}.status-dot{width:8px;height:8px;border-radius:50%;background:#647a80}.status-dot.ok{background:#61dbb5;box-shadow:0 0 12px #61dbb5}#updated{margin-left:auto;color:#759197}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.cards article,.chart-panel,.detail-panel{border:1px solid #2a434b;background:#172a33;border-radius:18px}.cards article{padding:24px;min-height:155px;display:flex;flex-direction:column}.cards article.featured{background:linear-gradient(140deg,#1e4b48,#1a3339);border-color:#3b7f70}.cards span{color:#a5bcbd;font-size:13px}.cards strong{font-size:51px;line-height:1.15;letter-spacing:-.06em;margin-top:14px}.cards .location{font-size:23px;letter-spacing:-.03em;overflow-wrap:anywhere;margin:auto 0}.cards small{color:#91a8a9;font-size:12px}.chart-panel{margin-top:16px;padding:27px 30px 20px}.panel-head{display:flex;justify-content:space-between;align-items:end;gap:20px}h2{font-size:25px;letter-spacing:-.035em;margin:0}.legend{display:flex;gap:18px;color:#afc3c1;font-size:13px}.legend span:before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}.pm1-key:before{background:#6b97ed}.pm25-key:before{background:#6de0bd}.pm10-key:before{background:#e4b870}.chart-wrap{height:340px;margin-top:24px}canvas{width:100%;height:100%}.axis-note{color:#7e999d;font-size:12px;margin:8px 0 0}.detail-panel{margin-top:16px;padding:28px 30px;display:flex;justify-content:space-between;gap:30px;align-items:center}.detail-panel p:not(.eyebrow){color:#90a9ac;font-size:13px;margin:9px 0 0}.particles{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}.particle{background:#203842;border:1px solid #34515b;border-radius:10px;min-width:100px;padding:11px 13px}.particle span{display:block;color:#8dacb0;font-size:11px}.particle strong{font-size:19px}footer{color:#6d898e;font-size:12px;margin-top:28px;text-align:center}@media(max-width:800px){main{padding:30px 18px}header,.detail-panel{display:block}.controls{margin-top:27px}.cards{grid-template-columns:repeat(2,1fr)}.detail-panel .particles{justify-content:flex-start;margin-top:22px}.chart-wrap{height:290px}}@media(max-width:500px){.controls{display:grid;grid-template-columns:1fr 1fr}.controls select{min-width:0;width:100%}.cards article{padding:17px;min-height:130px}.cards strong{font-size:39px}.legend{gap:9px;font-size:11px}.panel-head{display:block}.legend{margin-top:20px}.chart-panel{padding:20px 15px}.particle{min-width:85px}}