@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f5f6f1;--ink:#182c2a;--muted:#74817c;--line:#e0e6dd;--green:#187a5a;--mint:#d7e9dd}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}.demo-banner{background:#253e36;color:#eef6db;padding:11px 5%;font-size:11px;font-weight:700;letter-spacing:1.3px;display:flex;align-items:center;gap:10px}.banner-detail{font-weight:400;letter-spacing:.2px;margin-left:auto;color:#c9d5c2}.demo-dot{width:6px;height:6px;border-radius:50%;background:#e6ca7a}header{padding:25px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;color:var(--ink);font-family:Manrope,sans-serif;font-weight:800;letter-spacing:2px;font-size:18px}.brand-icon{background:var(--ink);color:#e8efbe;width:44px;height:44px;display:grid;place-items:center;font-size:34px;border-radius:12px}.brand small{display:block;font-size:8px;letter-spacing:1.8px;margin-top:4px;font-weight:600}.header-right{display:flex;gap:22px;align-items:center;font-size:12px}.pill{border:1px solid #cdd7c9;border-radius:30px;padding:9px 14px;font-size:10px;letter-spacing:1px}main{max-width:1500px;margin:auto;padding:0 5%}.intro{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;padding:42px 0 35px;align-items:center}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#7b8d80;margin:0 0 13px}h1{font-family:Manrope,sans-serif;font-size:clamp(32px,3.4vw,49px);font-weight:600;letter-spacing:-2px;line-height:1.14;margin:0 0 16px}h1 span{color:#62a575}.subtitle{color:#748078;line-height:1.7;margin:0;font-size:13px}.station{border:1px solid #d8e2d3;border-radius:16px;background:#ebf0e3;padding:24px;display:flex;gap:20px}.station-icon{font-size:36px;border:1px solid #c3d4bc;border-radius:50%;width:60px;height:60px;display:grid;place-items:center;flex-shrink:0;color:#4e7255}.station h3{font-family:Manrope;font-size:19px;margin:0 0 9px}.station p:not(.eyebrow){font-size:12px;color:#71806c;line-height:1.5}.station-meta{border-top:1px solid #d2ddca;margin-top:19px;padding-top:13px;font-size:10px;letter-spacing:.7px}.station-meta span{float:right;color:#66805a}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:22px}.toolbar>div{display:flex;align-items:center;gap:12px}.pulse{width:7px;height:7px;background:#51a27b;border-radius:50%;box-shadow:0 0 0 4px #e0ecdf}.toolbar strong{font-size:12px}.muted{color:var(--muted);font-size:11px}.controls label{font-size:11px;color:#69796d}.controls select,button{font:inherit;font-size:11px;background:transparent;border:1px solid #ced9ce;padding:10px;border-radius:7px;color:var(--ink)}select{margin-left:6px}button{cursor:pointer}button:hover{background:#e0eadd}button:focus-visible,select:focus-visible{outline:2px solid #187a5a;outline-offset:3px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.metric{background:white;border:1px solid var(--line);border-radius:13px;padding:21px;position:relative;overflow:hidden}.metric-top{display:flex;justify-content:space-between;gap:8px;color:#758279;font-size:10px}.tag{color:#839384;font-size:8px;letter-spacing:.7px}.metric h2{font-family:Manrope;font-size:19px;margin:21px 0 13px;font-weight:600}.metric sub{font-size:11px}.value{display:flex;align-items:baseline;gap:9px}.value strong{font-family:Manrope;font-size:43px;font-weight:500;letter-spacing:-2px;font-variant-numeric:tabular-nums}.value span{color:#8b978b;font-size:12px}.spark{width:100%;height:40px;margin-top:15px}.metric>p{font-size:9px;color:#8e988e;margin:10px 0 0}.weather-symbol{height:55px;display:flex;align-items:center;color:#bba563;font-size:29px}.humidity-bar{height:5px;background:#edf0ea;margin:39px 0 26px;border-radius:5px}.humidity-bar i{height:100%;display:block;border-radius:5px;background:#88aeb0}.lower{display:grid;grid-template-columns:1.65fr 1fr;gap:20px;margin-top:22px}.panel{border:1px solid var(--line);border-radius:13px;background:white;padding:25px}.panel h2{font-family:Manrope;font-weight:600;font-size:19px;margin:0}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.panel .eyebrow{font-size:9px;margin-bottom:8px}.legend{display:flex;gap:15px;font-size:10px}.legend span:first-child{color:#197b59}.legend span:last-child{color:#b4a25f}.chart-note{font-size:10px;color:#8b958c;margin-top:14px}.chart-wrap{margin-top:15px}.chart-wrap svg{width:100%;display:block}.chart-axis{display:flex;justify-content:space-between;color:#8b978b;font-size:9px}.connection ol{list-style:none;padding:9px 0 0;margin:0}.connection li{display:flex;align-items:center;gap:13px;border-bottom:1px solid #edf0ea;padding:17px 0}.connection li>span{width:31px;height:31px;display:grid;place-items:center;border:1px solid #dde5d7;border-radius:50%;font-size:10px;color:#90a08c}.connection li strong{font-size:12px;font-weight:500}.connection li p{font-size:10px;color:#939b91;margin:5px 0 0}.connection li b{margin-left:auto;font-size:8px;letter-spacing:.5px;color:#9e9c89;font-weight:500}.connection li b.connected{color:#358460}.integration-note{font-size:10px;line-height:1.7;background:#f5f6f0;border-radius:7px;padding:12px;margin-top:17px;color:#7e8777}.readings{margin-top:22px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;margin-top:23px;font-size:11px;white-space:nowrap;text-align:left}th{font-weight:500;font-size:10px;color:#929b8d;padding:12px 10px;background:#f7f8f3}td{padding:13px 10px;border-bottom:1px solid #eef1e9;font-variant-numeric:tabular-nums}td:last-child{color:#82916e;font-size:9px}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px 0 35px;color:#8c9787;font-size:9px;letter-spacing:1px}footer b{margin:0 10px}footer p{letter-spacing:0;max-width:500px;line-height:1.6;text-align:right}@media(min-width:1500px){main{padding:0 65px}}@media(max-width:1050px){.intro{gap:25px}.toolbar{align-items:flex-start;flex-direction:column}.cards{grid-template-columns:repeat(2,1fr)}.lower{grid-template-columns:1fr}.banner-detail{display:none}.header-right #clock{display:none}}@media(max-width:600px){header{padding:20px 5%}.brand{font-size:14px}.pill{font-size:8px;padding:7px}.intro{grid-template-columns:1fr;padding:30px 0;gap:25px}h1{font-size:37px}.station{padding:19px}.cards{gap:10px}.metric{padding:16px}.metric-top{flex-direction:column}.metric h2{font-size:16px}.value strong{font-size:35px}.value span{font-size:10px}.controls{flex-wrap:wrap;gap:8px!important}.toolbar>div>.muted{display:none}.panel{padding:18px}.legend{gap:9px}.chart-axis span:nth-child(2){display:none}footer{flex-direction:column;align-items:flex-start;gap:4px}footer p{text-align:left}.desktop{display:none}.demo-banner{font-size:9px;letter-spacing:1px}}