:root{--ink:#202327;--muted:#777c82;--line:#e9ebed;--levo:#3077d5;--desno:#db7840}*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font:14px 'Helvetica Neue',Helvetica,sans-serif;-webkit-font-smoothing:antialiased}main{max-width:960px;padding:0 36px;margin:auto}header{height:56px;display:flex;align-items:center;justify-content:flex-end}h1{margin:0;font-size:22px;letter-spacing:-.8px;font-weight:650}h1 span{color:var(--levo)}#sync{font-size:12px;color:var(--muted)}#sync:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#65a373;margin-right:7px}.meters{display:grid;grid-template-columns:1fr 1fr;padding-bottom:36px;border-bottom:1px solid var(--line)}.meter{padding:12px 38px 0 0}.meter+ .meter{padding:12px 0 0 38px;border-left:1px solid var(--line)}.meter-top{display:flex;align-items:center;justify-content:space-between}h2{margin:0;display:flex;align-items:center;gap:9px;font-size:17px;font-weight:550}.marker{width:8px;height:8px;border-radius:2px;display:inline-block;background:var(--levo)}.desno .marker,.total.desno .marker{background:var(--desno)}.offline{font-size:11px;color:#b5562c}.power{display:flex;align-items:baseline;gap:8px;margin:22px 0 27px}.power strong{font-size:64px;line-height:1;letter-spacing:-3px;font-weight:450;font-variant-numeric:tabular-nums}.power-unit{font-size:18px;color:var(--muted)}.metrics{display:flex;gap:40px}.label{display:block;color:var(--muted);font-size:12px;margin-bottom:7px}.metric strong{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.5px}.metric em{font-size:11px;font-style:normal;color:var(--muted);margin-left:3px}.history{padding-top:27px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.periods{display:flex;gap:3px}button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;padding:10px 15px;border-radius:6px;min-height:40px;cursor:pointer}button:hover{color:var(--ink);background:#f6f7f8}button[aria-pressed=true]{background:#eff1f3;color:var(--ink);font-weight:550}a{color:var(--muted);font-size:12px;text-decoration:none;padding:12px 0 12px 12px;white-space:nowrap}a:hover{color:var(--ink)}:focus-visible{outline:2px solid var(--levo);outline-offset:3px}.totals{display:flex;gap:30px;margin:30px 0 16px}.total{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}.total strong{font-weight:550;color:var(--ink);margin-left:3px;font-variant-numeric:tabular-nums}.total .marker{width:6px;height:6px}#chart{min-height:240px}svg{display:block;width:100%;height:auto;overflow:visible}svg text{font:11px 'Helvetica Neue',Helvetica,sans-serif;fill:#858a90}.chart-hit{cursor:crosshair;outline:none}.chart-hit:hover,.chart-hit:focus{fill:#202327;fill-opacity:.035}.readout{font-size:12px;color:var(--muted);min-height:22px;margin-top:7px;font-variant-numeric:tabular-nums}.empty{padding:85px 0;text-align:center;color:var(--muted)}#error{font-size:12px;color:#a54e24;padding:12px 0} @media(min-width:1200px){main{margin-top:30px}}@media(max-width:600px){main{padding:0 22px}header{height:48px}h1{font-size:21px}#sync{font-size:11px}.meters{padding-bottom:27px}.meter{padding:8px 19px 0 0}.meter+ .meter{padding:8px 0 0 19px}h2{font-size:16px}.power{margin:22px 0 25px;gap:5px}.power strong{font-size:clamp(34px,10vw,52px);letter-spacing:-2px}.power-unit{font-size:14px}.metrics{flex-direction:column;gap:17px}.label{font-size:11px;margin-bottom:5px}.metric strong{font-size:20px}.history{padding-top:20px}button{padding:10px 11px;font-size:12px}.periods{gap:1px}.totals{gap:20px;margin:25px 0 12px;flex-wrap:wrap}.total{font-size:11px;gap:5px}#chart{min-height:240px}.readout{font-size:11px;line-height:1.6}.offline{font-size:9px}.meter-top{gap:4px;flex-wrap:wrap}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}
