:root{font-family:system-ui,sans-serif;color:#d9e3ed;background:#0c1420;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header{padding:22px 5vw;border-bottom:1px solid #263449;display:flex;justify-content:space-between;gap:20px}header span{font-size:12px;color:#a8b7ca;letter-spacing:2px}a{color:#74ceca}main{max-width:1200px;margin:32px auto;padding:0 24px}h1{font-size:34px;margin-bottom:8px}p{color:#aebed0;line-height:1.6}.controls{display:flex;align-items:end;gap:16px;flex-wrap:wrap;margin:24px 0}label{display:grid;gap:8px;font-size:14px}input,select,button{padding:10px;border:1px solid #3a4b62;border-radius:6px;background:#142236;color:inherit;max-width:260px}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}#measure{background:#185f67}#status{border-left:3px solid #6fc7c1;padding:12px 16px;background:#111f31}.metrics{display:flex;flex-wrap:wrap;gap:24px;margin:20px 0}.metric{min-width:170px}.metric strong{display:block;font-size:27px;color:#f2f7fa}.metric span{font-size:13px;color:#aebed0}canvas{width:100%;height:auto;background:#101c2c;border:1px solid #2c3d54;border-radius:8px;touch-action:none;cursor:grab}.legend{display:flex;gap:16px;align-items:center;font-size:12px;margin:12px 0}.legend div{height:10px;flex:1;background:linear-gradient(90deg,#440154,#472d7b,#3b528b,#2c728e,#21918c,#28ae80,#5ec962,#addc30,#fde725)}.notice{border:1px solid #786944;padding:14px;color:#e0d3b4}pre{white-space:pre-wrap;overflow-wrap:anywhere;color:#b0c9d8;font-size:12px}button:focus-visible,canvas:focus-visible{outline:3px solid #74ceca}

.over-range{color:#ff40cf;font-weight:bold}#number-format{font-size:13px}