* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
#wrap { position: relative; width: 1024px; height: 600px; flex-shrink: 0; background: #000; }
#wrap canvas { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#clock { position: absolute; top: 26px; left: 0; width: 100%; height: 385px; display: flex; align-items: center; justify-content: center; font-size: 357px; line-height: 1; font-weight: 700; letter-spacing: 0; color: #eef1f6; background: linear-gradient(#fff 15%, #c4cbd8 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000); white-space: nowrap; }
#readings { position: absolute; left: 32px; right: 32px; bottom: 20px; height: 95px; display: flex; }
.reading { position: relative; flex: 1; min-width: 0; border-radius: 8px; --accent: #555; background: linear-gradient(to bottom, var(--accent) 0, var(--accent) 2px, rgba(22,28,41,.85) 12px); color: #fff; text-align: center; }
.reading + .reading { margin-left: 10px; }
.reading[data-level="good"] { --accent: #60a5fa; }
.reading[data-level="moderate"] { --accent: #22c55e; }
.reading[data-level="bad"] { --accent: #eab308; }
.reading[data-level="veryBad"] { --accent: #ef4444; }
.label { margin-top: 20px; height: 25px; font: 400 16px/25px sans-serif; color: rgba(226,232,240,.7); }
.value { font-size: 48px; line-height: 1; font-weight: 700; white-space: nowrap; }
.ozone .value { font-size: 36px; padding-top: 6px; }
.weather .value { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 52px; }
.weather .value.compact { font-size: 24px; }
#weather-icon { position: absolute; width: 67px; height: 67px; top: 14px; left: calc(50% - 33.5px); }
[hidden], .weather .value[hidden] { display: none !important; }
#wrap.snow .reading::before { content: ''; position: absolute; top: -4px; left: -2px; right: -2px; height: 7px; border-radius: 70% 35% 20% 15%; background: linear-gradient(#f1f5fa, #c6d7e6); opacity: .75; }
#demo-label { position: absolute; top: 8px; right: 12px; color: #fff; opacity: .6; font-size: 16px; }
.hit { position: absolute; top: 0; width: 120px; height: 60px; border: 0; background: transparent; cursor: default; }
#refresh-hit { left: 0; } #demo-hit { right: 0; }
.hit:focus-visible { outline: 1px solid #777; }
#testpanel { display: none; width: 1024px; margin: 12px auto 0; padding: 10px 16px; background: #1a1a2e; border-radius: 8px; color: #ccc; font: 13px/1.6 sans-serif; flex-shrink: 0; }
#testpanel label { margin-right: 6px; color: #888; }
#testpanel select, #testpanel input { vertical-align: middle; margin-right: 14px; }
#testpanel .row { display: flex; align-items: center; flex-wrap: wrap; }
@media (min-width: 1025px) and (min-height: 660px) { #testpanel { display: block; } }