:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#08281e;color:#f3faf5;font-synthesis:none;font-synthesis-weight: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:2560px;margin:0 auto;padding:clamp(22px,3.8vw,80px);display:flex;flex-direction:column;gap:clamp(30px,5vh,90px)}
.screen-header{display:flex;align-items:center;justify-content:space-between;gap:28px}
.identity{display:flex;align-items:center;gap:clamp(24px,3vw,64px)}
.wordmark{display:inline-flex;align-items:baseline;gap:5px;font-size:clamp(30px,3.1vw,68px);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,64px);border-left:1px solid var(--line)}
.heading p{margin:0 0 7px;font-size:clamp(10px,.8vw,19px);letter-spacing:.24em;color:var(--muted);font-weight:700}
h1{margin:0;font-size:clamp(22px,2vw,48px);font-weight:500;letter-spacing:-.035em}
.connection{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:12px 18px;border:1px solid var(--line);border-radius:999px;font-size:clamp(13px,1.2vw,28px);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{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,54px);align-items:stretch}
.gauge{position:relative;overflow:hidden;min-width:0;border:1px solid var(--line);border-radius:clamp(22px,2vw,42px);padding:clamp(24px,3vw,68px);background:linear-gradient(150deg,#1b4634,#102f24);display:flex;flex-direction:column;justify-content:space-between;min-height:380px}
.gauge::before{content:"";position:absolute;width:90%;aspect-ratio:1;right:-25%;top:18%;border:1px solid #36584966;border-radius:50%;box-shadow:0 0 0 30px #36584916,0 0 0 60px #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:12px;flex-wrap:wrap}
h2{font-size:clamp(22px,2.2vw,50px);letter-spacing:-.03em;font-weight:500;margin:0}
.gauge-tag{font-size:clamp(12px,1vw,24px);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;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(32px,5vh,80px) 0;line-height:.92}
.reading-value{font-size:clamp(82px,11.5vw,280px);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.065em;white-space:nowrap;max-width:100%}
.reading-value[data-size=wide]{font-size:clamp(48px,7.1vw,175px)}
.reading-unit{font-size:clamp(25px,2.5vw,60px);color:var(--muted);letter-spacing:-.02em}
.source{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:clamp(18px,2vw,40px);font-size:clamp(12px,1.1vw,26px);color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.4}
.screen-footer{display:flex;align-items:center;justify-content:space-between;gap:18px 30px;flex-wrap:wrap}
.screen-note p{margin:0;font-size:clamp(14px,1.3vw,30px);line-height:1.45}
.screen-note .small-note{color:var(--muted);font-size:clamp(11px,.9vw,22px);margin-top:5px}
.screen-controls{display:flex;gap:12px;flex-wrap:wrap}
.screen-controls button{color:#dfede3;border:1px solid var(--line);border-radius:10px;padding:12px 18px;background:#133a2a;font-size:clamp(12px,1vw,24px);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(min-width:1600px){.gauge{min-height:560px}}
@media(max-width:700px){.screen{padding:22px;gap:26px}.screen-header{align-items:flex-start;gap:18px;flex-wrap:wrap}.identity{gap:22px}.heading{padding-left:22px}.connection{padding:9px 13px}.gauge-grid{grid-template-columns:1fr}.gauge{min-height:290px;padding:25px}.reading{padding:30px 0;gap:12px}.reading-value{font-size:clamp(78px,19vw,132px)}.reading-value[data-size=wide]{font-size:clamp(42px,11vw,82px)}.reading-unit{font-size:27px}.screen-footer{align-items:flex-start}.screen-controls button{padding:10px 14px}}
@media(max-height:650px) and (min-width:701px){.screen{gap:24px;padding:24px 34px}.gauge{min-height:285px;padding:24px}.reading{padding:22px 0}.reading-value{font-size:clamp(78px,10vw,170px)}.source{padding-top:16px}.screen-header .heading p{margin-bottom:3px}}