@font-face{font-family:WeatherSans;src:local('Segoe UI');font-display:swap}
:root{font-family:WeatherSans,Inter,system-ui,sans-serif;color:#334641;background:#eaf0ed;font-synthesis:none;color-scheme:light;--ink:#334641;--muted:#6b7d77;--sage:#77978b;--line:#dbe4de}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid #d2dfd7;border-radius:9px;background:#ffffffa6;color:var(--ink);padding:9px 13px;font-size:13px}button:hover{background:#fff}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #688c81;outline-offset:3px}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button:disabled{opacity:.45;cursor:not-allowed}[hidden]{display:none!important}#app{max-width:1800px;margin:auto;padding:20px 28px 14px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 18px}.brand{display:flex;align-items:center;gap:12px;font-size:19px;letter-spacing:-.5px;font-weight:600}.brand small{display:block;color:var(--muted);font-size:11px;letter-spacing:.1px;font-weight:400;margin-top:3px}.brand-mark{font-size:30px;color:#7a9a89}.toolbar-actions{display:flex;gap:8px;align-items:center}.status{font-size:11px;text-transform:uppercase;letter-spacing:1px;background:#dce9df;padding:8px 12px;border-radius:30px;white-space:nowrap}.status[data-state=demo]{background:#f0e1cd;color:#765d3a}.status[data-state=unavailable]{background:#eedbd5;color:#885b4d}.scene{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;aspect-ratio:16/9;background:#cee0ed;box-shadow:0 15px 50px #4f706817}.scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter 1.5s}.light-wash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,#fff4db30,transparent 50%,#cadfea15);transition:background 1.5s;mix-blend-mode:soft-light}#weather{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.scene-heading{position:absolute;left:28px;top:25px;max-width:300px;text-shadow:0 1px 10px #ffffffc0}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:600;color:#506e67}h1{font-family:Georgia,serif;font-weight:400;letter-spacing:-1px;font-size:clamp(24px,3vw,43px);line-height:1.12;margin:10px 0}.scene-heading p{font-size:12px;line-height:1.6;margin:0;max-width:250px}.scene-note{position:absolute;bottom:18px;left:22px;display:flex;align-items:center;gap:8px;background:#f6f9f0cf;backdrop-filter:blur(12px);padding:9px 13px;border-radius:30px;font-size:11px}.pulse{width:6px;height:6px;border-radius:50%;background:#7a998a}.scene-clock{position:absolute;right:23px;top:24px;text-align:right;font-variant-numeric:tabular-nums;font-size:18px}.scene-clock small{display:block;font-size:11px;margin-top:5px;color:#637c74}.readings{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:18px;border-radius:14px;background:#f8faf6cc;border:1px solid #ffffffb0;overflow:hidden}.reading{padding:18px 22px;min-width:0}.reading+.reading{border-left:1px solid var(--line)}.metric-label{font-size:10px;font-weight:600;letter-spacing:1.1px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}.metric-label small{color:var(--muted);font-size:10px;font-weight:400;letter-spacing:0}.reading strong{font-weight:400;font-size:26px;display:block;margin:8px 0 4px;font-variant-numeric:tabular-nums;letter-spacing:-.6px}.metric-detail{display:block;font-size:11px;color:var(--muted);min-height:30px;line-height:1.5;overflow-wrap:anywhere}.meter{height:3px;background:#dee7e0;margin-top:9px;border-radius:5px;overflow:hidden}.meter span{display:block;width:0;height:100%;background:#91ab9c;transition:width 1s}.reading:nth-child(2) .meter span{background:#a89ab6}.reading:nth-child(4) .meter span{background:#8aafbd}.footer{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px;padding-top:15px}.footer>span:last-child{display:flex;gap:20px}.settings{position:fixed;z-index:5;right:28px;top:75px;width:330px;max-width:calc(100% - 24px);max-height:calc(100dvh - 90px);overflow-y:auto;padding:22px;background:#f6f8f2;border:1px solid #d3dfd4;border-radius:18px;box-shadow:0 18px 80px #243c3940}.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}h2{font-family:Georgia,serif;font-weight:400;font-size:20px;margin:0}.settings label{display:block;font-size:12px;margin:15px 0;color:#526a61}.settings select{display:block;width:100%;margin-top:7px;padding:9px;border:1px solid #d0dcd1;background:#fff;border-radius:8px;color:var(--ink)}.settings input[type=range]{width:100%;accent-color:#77978b}.settings .check{display:flex;align-items:center;gap:8px}.settings p{font-size:12px;color:var(--muted);line-height:1.65}.settings .small{font-size:11px}.settings output{font-variant-numeric:tabular-nums}.scene[data-light=night] img{filter:brightness(.48) saturate(.75) hue-rotate(9deg)}.scene[data-light=night]{color:#eaf0ef}.scene[data-light=night] .scene-heading{text-shadow:0 1px 8px #182d3d}.scene[data-light=night] .eyebrow,.scene[data-light=night] .scene-clock small{color:#d4e1e6}.scene[data-light=night] .scene-note{color:#e5eee8;background:#233d4cbd}.scene[data-light=dusk] img{filter:brightness(.92) saturate(.92) sepia(.1)}.scene[data-light=dusk] .light-wash{background:linear-gradient(110deg,#ffbe745c,transparent 65%,#a0bbeb28)}
body.screen-mode #app{padding:0;max-width:none}body.screen-mode .toolbar,body.screen-mode .footer,body.screen-mode .scene-heading,body.screen-mode .scene-note{display:none}body.screen-mode .scene{border-radius:0;aspect-ratio:auto;width:100%;height:100dvh;box-shadow:none}body.screen-mode .readings{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:940px;z-index:2;background:#f3f7efdb;backdrop-filter:blur(14px);margin:0}body.screen-mode .reading{padding:10px 14px}body.screen-mode .reading strong{font-size:22px;margin:4px 0}body.screen-mode .metric-detail{min-height:0}body.screen-mode .meter{margin-top:6px}body.screen-mode .scene-clock{background:#f5f8f0b0;backdrop-filter:blur(10px);padding:8px 12px;border-radius:12px;color:var(--ink)}#restore-ui{position:fixed;z-index:4;left:12px;top:12px;opacity:.12}#restore-ui:hover,#restore-ui:focus-visible{opacity:1}
@media(min-aspect-ratio:3/1){body.screen-mode .scene>img{object-position:center 60%}body.screen-mode .readings{left:auto;right:16px;transform:none;width:48%;bottom:12px}body.screen-mode .scene-clock{top:12px;right:16px}body.screen-mode .metric-label small,body.screen-mode .metric-detail{display:none}}
@media(max-width:850px){#app{padding:16px}.toolbar{flex-wrap:wrap}.toolbar-actions{gap:6px;flex-wrap:wrap}.readings{grid-template-columns:repeat(3,minmax(0,1fr))}.reading{padding:14px}.reading:nth-child(4){border-left:0}.reading:nth-child(n+4){border-top:1px solid var(--line)}.keyboard-hint{display:none}.scene-heading{left:18px;top:18px;max-width:220px}.scene-heading p{display:none}.scene-clock{font-size:15px;right:17px;top:19px}body.screen-mode .readings{grid-template-columns:repeat(5,minmax(0,1fr));width:calc(100% - 24px)}body.screen-mode .reading{padding:9px}body.screen-mode .reading:nth-child(n+4){border-top:0;border-left:1px solid var(--line)}body.screen-mode .metric-detail,body.screen-mode .metric-label small{display:none}body.screen-mode .reading strong{font-size:18px}}
@media(max-width:480px){#app{padding:12px}.toolbar-actions{width:100%;justify-content:space-between}.toolbar-actions button{padding:8px;font-size:11px}.status{font-size:9px;padding:7px 9px}.scene{aspect-ratio:4/5}.scene>img{object-position:53% center}.scene-heading{max-width:200px}h1{font-size:27px}.scene-clock{top:auto;bottom:57px}.scene-note{bottom:14px;left:14px;font-size:10px}.readings{grid-template-columns:repeat(2,minmax(0,1fr))}.reading:nth-child(3),.reading:nth-child(5){border-left:0;border-top:1px solid var(--line)}.reading:nth-child(4){border-left:1px solid var(--line)}.reading:last-child{grid-column:1/-1}.reading strong{font-size:23px}.footer{flex-direction:column;line-height:1.6}.settings{right:12px;top:125px;max-height:calc(100dvh - 140px)}body.screen-mode .readings{grid-template-columns:repeat(3,minmax(0,1fr))}body.screen-mode .reading:nth-child(4){border-left:0}body.screen-mode .reading:nth-child(n+4){border-top:1px solid var(--line)}body.screen-mode .reading:last-child{grid-column:auto}body.screen-mode .scene>img{object-position:54% center}body.screen-mode .settings{top:60px;max-height:calc(100dvh - 80px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* Preserve the entire telemetry diorama on portrait and ultrawide displays. */
.scene{background:radial-gradient(ellipse at 50% 50%,#c9def2,#a4c2e0)}
.scene>img,body.screen-mode .scene>img{object-fit:contain;object-position:center}
.scene-heading{background:#f7f4e8d6;padding:12px 16px;border-radius:14px;max-width:270px}
.scene-heading h1{font-size:clamp(20px,2.5vw,34px)}
.scene[data-light=night] .scene-heading{background:#243948d9}
.scene[data-light=night]{background:#293e59}
.metric-label small{font-weight:500}
@media(max-width:480px){.scene-heading{max-width:215px}.scene-heading h1{font-size:23px}.scene-clock{bottom:57px}}

/* The surrounding landscape fills unusual screen ratios without cropping the village. */
.scene>#landscape-fill,body.screen-mode .scene>#landscape-fill{object-fit:cover;filter:blur(18px);transform:scale(1.08);opacity:.8;z-index:-1}
.scene[data-light=night] #village{filter:none}
.scene[data-light=night] #weather{filter:brightness(.78) saturate(.75)}
.scene[data-light=night] .light-wash{background:transparent}
.scene[data-light=night] #landscape-fill{filter:blur(18px)}
.scene-clock{background:#f7f4e8d6;padding:8px 12px;border-radius:12px}
.scene[data-light=night] .scene-clock{background:#243948d9}
.scene[data-engine="3d"] #weather{filter:none}.scene[data-engine="3d"] .light-wash{display:none}
.scene[data-engine="art-review"] #weather{filter:none}.scene[data-engine="art-review"] .light-wash{display:none}
.scene[data-engine="photographic-live"] #weather{filter:none}.scene[data-engine="photographic-live"] .light-wash{display:none}