:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#08281e;color:#f3faf5;font-synthesis:none;--muted:#a9c4b5;--line:#365849;--live:#a2e67c;--warning:#ffd18a}
*{box-sizing:border-box}body{margin:0;min-width:280px;background:radial-gradient(ellipse at 50% 0%,#164b36 0%,#08281e 66%)}button{font:inherit}
.screen{min-height:100vh;min-height:100svh;max-width:2000px;margin:0 auto;padding:clamp(22px,3.2vw,64px);display:flex;flex-direction:column;gap:clamp(22px,2.5vw,46px)}
.screen-header{display:flex;align-items:center;justify-content:space-between;gap:24px}.identity{display:flex;align-items:center;gap:clamp(24px,3vw,56px)}.wordmark{display:inline-flex;align-items:baseline;gap:5px;font-size:clamp(30px,3vw,58px);font-weight:900;letter-spacing:-.075em;line-height:1}.brand-dot{width:.17em;height:.17em;background:var(--live);border-radius:50%;margin-left:.05em}.heading{padding-left:clamp(24px,3vw,56px);border-left:1px solid var(--line)}.heading p,.eyebrow{margin:0 0 7px;font-size:clamp(10px,.8vw,15px);letter-spacing:.2em;color:var(--muted);font-weight:700}h1{margin:0;font-size:clamp(25px,2.4vw,46px);font-weight:500;letter-spacing:-.035em}
.connection{display:flex;align-items:center;gap:10px;flex-shrink:0;padding:11px 16px;border:1px solid var(--line);border-radius:999px;font-size:clamp(13px,1.1vw,22px);color:#d6e5db;background:#0a2b20}.status-dot{width:.55em;height:.55em;border-radius:50%;background:currentColor;flex-shrink:0}.connection[data-state=live]{color:var(--live);border-color:#568440}.connection[data-state=stale],.connection[data-state=disconnected],.connection[data-state=waiting]{color:var(--warning);border-color:#80633d}
.gauge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,38px)}.gauge{position:relative;overflow:hidden;min-width:0;border:1px solid var(--line);border-radius:clamp(20px,2vw,34px);padding:clamp(22px,2.5vw,48px);background:linear-gradient(150deg,#1b4634,#102f24);display:flex;flex-direction:column;justify-content:space-between}.gauge::before{content:"";position:absolute;width:80%;aspect-ratio:1;right:-25%;top:18%;border:1px solid #36584966;border-radius:50%;box-shadow:0 0 0 25px #36584916,0 0 0 50px #36584910;pointer-events:none}.gauge[data-state=stale],.gauge[data-state=clock]{border-color:#80633d}.gauge-top,.reading,.source{position:relative}.gauge-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}h2{font-size:clamp(22px,1.8vw,36px);letter-spacing:-.03em;font-weight:500;margin:0}.gauge-tag{font-size:clamp(11px,.9vw,18px);color:var(--muted)}.gauge[data-state=live] .gauge-tag{color:var(--live)}.gauge[data-state=stale] .gauge-tag,.gauge[data-state=clock] .gauge-tag{color:var(--warning)}
.reading{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 18px;padding:clamp(26px,3vw,58px) 0;line-height:1}.reading-value{font-size:clamp(65px,7.3vw,145px);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.065em;max-width:100%;overflow-wrap:anywhere}.reading-value[data-size=wide]{font-size:clamp(38px,4.8vw,96px)}.reading-unit{font-size:clamp(22px,2vw,38px);color:var(--muted);letter-spacing:-.02em}.source{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:clamp(14px,1.5vw,26px);font-size:clamp(11px,.9vw,17px);color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.4}
.history{min-width:0;border:1px solid var(--line);border-radius:clamp(20px,2vw,34px);padding:clamp(20px,2.5vw,48px);background:linear-gradient(160deg,#123c2c,#0d2e23)}.history-header{display:flex;justify-content:space-between;gap:20px}.history-window{font-size:clamp(11px,.9vw,17px);color:var(--muted);margin:10px 0 0;line-height:1.5}.recorded{text-align:right;display:flex;flex-direction:column;gap:5px;min-width:0}.recorded>span{font-size:clamp(11px,.9vw,17px);color:var(--muted)}.recorded strong{display:flex;justify-content:flex-end;align-items:baseline;gap:8px;font-size:clamp(30px,3vw,58px);font-weight:550;letter-spacing:-.045em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.recorded small{font-size:clamp(16px,1.4vw,26px);font-weight:400;letter-spacing:0;color:var(--muted)}#recorded-quality[data-state=partial]{color:var(--warning)}
.chart-key{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;margin-top:25px;font-size:11px;color:var(--muted)}.chart-key>span{display:inline-flex;align-items:center;gap:6px}.chart-key i{width:10px;height:10px;border-radius:2px;display:block}.key-complete{background:#7bbf65}.key-partial{background:#efba70}.key-missing{border:1px solid #577966;background:repeating-linear-gradient(135deg,transparent,transparent 2px,#577966 2px,#577966 3px)}.chart-key .chart-zone{margin-left:auto}.chart-container{width:100%;min-width:0;margin-top:8px}#hourly-chart{display:block;width:100%;height:260px;overflow:visible}.chart-grid{stroke:#355847;stroke-width:1;stroke-dasharray:2 5}.chart-axis,.chart-empty{fill:var(--muted);font-size:11px;font-family:Arial,Helvetica,sans-serif}.chart-empty{font-size:14px}.chart-unit{fill:#d0e2d4;font-size:11px}.chart-bar{fill:#7bbf65}.hour-slot[data-status=partial] .chart-bar{fill:#efba70}.hour-slot[data-current=true] .chart-bar{fill:#b4e791}.hour-slot[data-current=true][data-status=partial] .chart-bar{fill:#ffdaa0}.chart-missing{fill:url(#missing-hatch);stroke:#577966;stroke-width:1}.chart-missing-line{stroke:#577966;stroke-width:1}.hour-slot[data-status=partial] .chart-missing{stroke:#d5a867}.chart-zero{stroke:#9bdb83;stroke-width:3;stroke-linecap:round}.hour-slot[data-status=partial] .chart-zero{stroke:#efba70}.chart-hit{fill:transparent;stroke:transparent;stroke-width:1;cursor:pointer}.hour-slot{outline:none}.hour-slot:focus-visible .chart-hit,.hour-slot[data-selected=true] .chart-hit{stroke:#dbf5c7;stroke-dasharray:3 3}.hour-slot:hover .chart-bar{filter:brightness(1.15)}
.chart-detail{min-height:42px;margin:5px 0 0;color:#e2eee5;font-size:12px;line-height:1.6;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.history-notes{display:flex;justify-content:space-between;gap:7px 20px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.5}.history-notes p{margin:0}
.chart-partial-missing-line{stroke:#bc955e;stroke-width:1}.hour-slot[data-status=partial] .chart-missing{fill:url(#partial-hatch)}
.screen-footer{display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap}.screen-note p{margin:0;font-size:clamp(13px,1vw,20px);line-height:1.45}.screen-note .small-note{color:var(--muted);font-size:clamp(11px,.8vw,15px);margin-top:5px}.screen-controls{display:flex;gap:10px;flex-wrap:wrap}.screen-controls button{color:#dfede3;border:1px solid var(--line);border-radius:10px;padding:11px 16px;background:#133a2a;font-size:clamp(12px,.9vw,18px);cursor:pointer;min-height:44px}.screen-controls button:hover{background:#214c36;border-color:#91b9a0}.screen-controls button:focus-visible{outline:3px solid var(--live);outline-offset:4px}.screen-controls button[aria-pressed=true]{color:var(--live);border-color:#568440}.screen-controls button:disabled{opacity:.55;cursor:default}[hidden]{display:none!important}.no-script{padding:16px;border:1px solid #80633d;color:var(--warning)}
@media(max-width:700px){.screen{padding:20px;gap:20px}.screen-header{align-items:flex-start;gap:18px;flex-wrap:wrap}.identity{gap:22px}.heading{padding-left:22px}.connection{padding:9px 13px}.gauge{padding:20px}.gauge-grid{gap:12px}.gauge-top h2{font-size:20px}.reading{gap:8px;padding:24px 0}.reading-value{font-size:clamp(35px,8.7vw,65px)}.reading-value[data-size=wide]{font-size:clamp(26px,5.8vw,42px)}.reading-unit{font-size:19px}.source{font-size:11px}.history{padding:20px}.history-header{gap:16px;flex-wrap:wrap}.recorded{text-align:left}.recorded strong{justify-content:flex-start;font-size:36px}.chart-key{gap:8px 12px;margin-top:20px}.chart-key .chart-zone{width:100%;margin-left:0}.chart-detail{min-height:62px}.screen-footer{align-items:flex-start}.screen-controls button{padding:10px 14px}}
@media(max-width:380px){.screen{padding:14px;gap:16px}.gauge{padding:15px}.gauge-top h2{font-size:18px}.gauge-tag{font-size:10px}.history{padding:16px}.reading{padding:22px 0}.source{gap:4px}.connection{font-size:12px}.chart-detail{font-size:11px;min-height:76px}}
@media(min-width:1600px){#hourly-chart{height:300px}.chart-detail,.chart-key,.history-notes{font-size:14px}}
@media(max-width:700px){.gauge-top{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;min-height:68px}.gauge-top h2{font-size:18px;line-height:1.2;min-height:2.4em;white-space:normal;overflow-wrap:anywhere}.reading{flex-direction:column;align-items:flex-start}}
@media(max-width:380px){.gauge-top h2{font-size:16px}.reading-value{font-size:clamp(27px,8.7vw,35px)}}

/* Fit the display to its viewport, but let intrinsic content grow at accessibility sizes. */
.screen{height:100vh;height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(min-content,.7fr) minmax(min-content,1.1fr) auto;padding:clamp(12px,2.4dvh,38px) clamp(14px,2.6vw,54px);gap:clamp(8px,1.8dvh,24px)}
.screen-header{min-width:0;gap:12px}.identity{gap:clamp(16px,2.6dvh,34px);min-width:0}.heading{padding-left:clamp(16px,2.6dvh,34px)}.wordmark{font-size:clamp(27px,4.4dvh,58px)}.heading p{font-size:clamp(9px,1.2dvh,15px);margin-bottom:3px}h1{font-size:clamp(24px,3.5dvh,42px)}.connection{padding:8px 13px;font-size:clamp(12px,1.5dvh,19px)}
.gauge-grid{min-height:0;gap:clamp(10px,1.8dvh,24px)}.gauge{min-height:0;overflow:visible;padding:clamp(12px,2.1dvh,32px);border-radius:clamp(16px,2.5dvh,30px)}.gauge::before{width:auto;height:auto;inset:0;aspect-ratio:auto;border:0;border-radius:inherit;box-shadow:none;background:radial-gradient(circle at 110% 75%,transparent 45%,#36584933 45.3%,transparent 45.7%,transparent 53%,#36584922 53.4%,transparent 53.8%)}
.gauge-top{gap:5px 10px}.gauge-top h2{font-size:clamp(18px,2.6dvh,31px)}.gauge-tag{font-size:clamp(10px,1.3dvh,16px)}.reading{padding:clamp(8px,1.6dvh,24px) 0;gap:5px 14px}.reading-value{font-size:clamp(42px,10.6dvh,150px)}.reading-value[data-size=wide]{font-size:clamp(32px,7.6dvh,108px)}.reading-unit{font-size:clamp(18px,3dvh,36px)}.source{padding-top:clamp(6px,1.2dvh,16px);font-size:clamp(10px,1.3dvh,16px);gap:3px 10px;line-height:1.25}
.history{min-height:0;display:grid;grid-template-rows:auto auto minmax(72px,1fr) auto auto;gap:clamp(3px,.55dvh,8px);padding:clamp(12px,2dvh,30px);border-radius:clamp(16px,2.5dvh,30px)}.history-header{min-width:0;gap:12px}.history-header>div:first-child{min-width:0}.eyebrow{font-size:clamp(9px,1.1dvh,14px);margin-bottom:3px}.history h2{font-size:clamp(18px,2.5dvh,32px)}.history-window{font-size:clamp(10px,1.2dvh,15px);margin-top:4px;line-height:1.3}.recorded{gap:2px}.recorded>span{font-size:clamp(10px,1.2dvh,15px)}.recorded strong{font-size:clamp(27px,4.8dvh,58px);line-height:1.1}.recorded small{font-size:clamp(14px,2.1dvh,24px)}
.chart-key{margin-top:2px;gap:5px 16px;font-size:clamp(10px,1.15dvh,14px)}.chart-container{position:relative;min-height:72px;height:auto;align-self:stretch;margin:0}#hourly-chart{position:absolute;inset:0;width:100%;height:100%;min-height:0}.chart-detail{min-height:0;margin:0;font-size:clamp(10px,1.25dvh,14px);line-height:1.35}.history-notes{padding-top:4px;gap:3px 16px;font-size:clamp(10px,1.1dvh,13px);line-height:1.3}
.screen-footer{gap:6px 16px;min-width:0}.screen-note{min-width:0}.screen-note p{font-size:clamp(11px,1.4dvh,17px);line-height:1.3}.screen-note .small-note{font-size:clamp(10px,1.1dvh,14px);line-height:1.3;margin-top:3px}.screen-controls{gap:6px;flex-wrap:nowrap}.screen-controls button{padding:8px 12px;font-size:clamp(11px,1.25dvh,15px);min-height:44px;white-space:nowrap}

@media(max-width:700px){
 .screen{padding:clamp(8px,1.5dvh,14px) clamp(10px,3vw,20px);gap:clamp(6px,1.2dvh,11px);grid-template-rows:auto minmax(min-content,.45fr) minmax(min-content,1fr) auto}
 .screen-header{align-items:center;flex-wrap:nowrap;gap:8px}.identity{gap:12px}.heading{padding-left:12px}.wordmark{font-size:26px}.heading p{font-size:8px;letter-spacing:.12em;margin-bottom:2px}h1{font-size:22px}.connection{font-size:10px;padding:7px 9px;gap:6px;max-width:46%;flex-shrink:1;line-height:1.15}
 .gauge-grid{gap:8px}.gauge{padding:clamp(9px,1.6dvh,13px);border-radius:16px}.gauge-top{min-height:0;gap:2px}.gauge-top h2{font-size:clamp(14px,2.4dvh,18px);line-height:1.1;min-height:2.2em}.gauge-tag{font-size:10px;line-height:1.2}.reading{padding:clamp(4px,.8dvh,8px) 0;gap:3px;flex-direction:column;align-items:flex-start}.reading-value{font-size:clamp(27px,5.8dvh,46px)}.reading-value[data-size=wide]{font-size:clamp(23px,4.4dvh,35px)}.reading-unit{font-size:14px}.source{padding-top:5px;font-size:10px;gap:2px 6px}
 .history{padding:clamp(9px,1.6dvh,14px);gap:3px;border-radius:16px}.history-header{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:9px}.eyebrow{font-size:8px;letter-spacing:.13em}.history h2{font-size:clamp(15px,2.5dvh,19px);line-height:1.15}.history-window{font-size:9px;line-height:1.25;margin-top:3px}.recorded{text-align:right;gap:2px}.recorded>span{font-size:9px;line-height:1.2}.recorded strong{justify-content:flex-end;font-size:clamp(24px,4.3dvh,34px);gap:4px}.recorded small{font-size:13px}
 .chart-key{font-size:9px;gap:3px 10px;margin-top:2px}.chart-key>span{gap:4px}.chart-key i{width:8px;height:8px}.chart-key .chart-zone{width:auto;margin-left:auto}.chart-detail{font-size:10px;line-height:1.3;min-height:0}.history-notes{font-size:9px;line-height:1.25;gap:2px 8px;padding-top:3px}#chart-help .keyboard-help{display:none}
 .screen-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 8px}.screen-note p{font-size:10px;line-height:1.2}.screen-note .small-note{font-size:9px;line-height:1.25;margin-top:2px}.screen-controls{gap:5px}.screen-controls button{font-size:10px;padding:7px 8px;min-height:44px}
}

@media(min-width:600px) and (max-height:540px){
 .screen{padding:10px 14px;gap:8px;grid-template-columns:minmax(190px,.72fr) minmax(0,1.8fr);grid-template-rows:auto minmax(min-content,1fr) auto}
 .screen-header,.screen-footer{grid-column:1/-1}.screen-header{min-height:32px}.wordmark{font-size:27px}.heading{padding-left:14px}.identity{gap:14px}.heading p{font-size:8px;margin:0}h1{font-size:20px}.connection{font-size:11px;padding:6px 10px}
 .gauge-grid{grid-column:1;grid-row:2;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(min-content,1fr));gap:8px}.gauge{padding:10px 12px;border-radius:15px}.gauge-top{flex-direction:row;min-height:0;gap:3px 7px}.gauge-top h2{font-size:15px;line-height:1.1;min-height:0}.gauge-tag{font-size:9px}.reading{padding:5px 0;flex-direction:row;align-items:baseline;gap:8px}.reading-value{font-size:clamp(28px,8.5dvh,42px)}.reading-value[data-size=wide]{font-size:28px}.reading-unit{font-size:14px}.source{font-size:9px;padding-top:4px}
 .history{grid-column:2;grid-row:2;padding:11px 13px;gap:3px;border-radius:15px}.history-header{gap:10px}.eyebrow{font-size:8px;margin-bottom:2px}.history h2{font-size:17px;line-height:1.1}.history-window{font-size:9px;margin-top:3px}.recorded>span{font-size:9px}.recorded strong{font-size:27px}.recorded small{font-size:13px}.chart-key{font-size:9px;gap:4px 12px;margin:0}.chart-detail{font-size:9px;line-height:1.25}.history-notes{font-size:9px;line-height:1.2;padding-top:3px}#chart-help .keyboard-help{display:none}
 .screen-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.screen-note p{font-size:10px}.screen-note .small-note{font-size:9px}.screen-controls button{font-size:10px;padding:7px 10px;min-height:44px}
}

/* At extreme zoom/small windows, scrolling is preferable to clipped data or controls. */
@media(max-width:300px),(max-height:340px){.screen{height:auto;min-height:100dvh;grid-template-rows:auto;grid-template-columns:minmax(0,1fr)}.screen-header{flex-wrap:wrap}.gauge-grid,.history,.screen-footer{grid-column:auto;grid-row:auto}.gauge-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}.history{min-height:300px}.chart-container{min-height:110px}.screen-footer{display:flex;flex-wrap:wrap}.connection{max-width:none}}