*{box-sizing:border-box}body{margin:0;padding:12px;background:#f3f6f8;color:#102c42;font:14px Arial,sans-serif}main{background:white;border:1px solid #dce3e8;border-radius:9px;padding:20px;max-width:1600px;margin:auto}header{display:flex;align-items:center;gap:20px;flex-wrap:wrap}h1{font-size:16px;margin:0;margin-right:auto}#range,#status{color:#64748b;font-size:12px}button{background:white;border:1px solid #cbd5e1;border-radius:5px;padding:8px 14px;color:#163047;cursor:pointer}button:focus-visible{outline:2px solid #2463eb}svg{width:100%;display:block}.legend{display:flex;justify-content:center;gap:16px;border-top:1px solid #edf0f3;padding:14px;flex-wrap:wrap;font-size:12px}#reading{min-height:32px;font-size:13px;font-variant-numeric:tabular-nums}#chart{min-height:260px}@media(max-width:600px){body{padding:4px}main{padding:10px}#chart{overflow:auto}svg{min-width:750px}}