/* One stage: the same cloud stays mounted through overview and detail. */
body { --focus:0; --touch:0; --pull:0; }
body .wrap {max-width:1120px}
body main {display:flex;flex-direction:column}
body .topbar {min-height:72px;height:auto;padding:14px 0}
body .hero {order:1;height:516px;position:relative;display:block;padding:0;--focus:0;--touch:0}
body .data-alert {order:0}
body .location-row {position:absolute;inset:12px 0 auto;z-index:6;min-height:44px}
body .reading {position:absolute;inset:0;display:block;margin:0;min-width:0;pointer-events:none;z-index:3}
body .state-tag {position:absolute;left:0;top:70px;font-size:12px;line-height:20px;letter-spacing:.04em}
body .temperature {position:absolute;left:-6px;top:240px;height:auto;margin:0;transform-origin:0 0;transform:translate(calc(var(--pull) * -10px),calc(var(--focus) * -125px - var(--touch) * 13px)) rotate(calc(var(--pull) * -2deg)) scale(calc(1 - var(--focus) * .64));letter-spacing:-.09em}
body .temperature .number {font-size:184px;line-height:.94;letter-spacing:-.085em;font-variant-numeric:tabular-nums}
body .temperature[data-wide=true] .number {font-size:143px}
body .temperature .degree {font-size:58px;line-height:1;padding-top:13px;margin-left:6px}
body .condition {position:absolute;left:0;top:420px;margin:0;font-size:24px;line-height:1.4;max-width:65%;letter-spacing:.035em;transform:translateY(calc(var(--focus) * -232px));transform-origin:left;opacity:calc(1 - var(--focus) * .22)}
body .feels {position:absolute;top:458px;left:0;display:flex;flex-direction:row;gap:16px;font-size:13px;line-height:1.5;letter-spacing:0;opacity:clamp(0,calc(1 - var(--focus) * 4),1);transform:translateY(calc(var(--focus) * -20px))}
body .mood-copy {position:static;grid-column:auto;margin:0;font-size:13px;letter-spacing:.03em;line-height:1.8}
body .stage {position:absolute;inset:80px -20px auto;width:calc(100% + 40px);height:340px;margin:0;overflow:visible;cursor:pointer;touch-action:pan-y;z-index:2}
body #sculpture {filter:none;width:100%;height:100%}
body .stage-label {display:none}
body .weather-atmosphere {inset:0 -20px;width:calc(100% + 40px);height:100%;mask-image:linear-gradient(transparent,#000 18%,#000 90%,transparent);z-index:1}
.cloud-open,.cloud-back {position:absolute;z-index:7;min-height:44px;font-size:13px;line-height:1.4;display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.cloud-open {right:0;top:70px;bottom:auto;border:0}
.cloud-open span {color:var(--muted);font-family:var(--mono);font-size:12px}
.cloud-back {right:0;top:70px;border:0}
.cloud-open:focus-visible,.cloud-back:focus-visible {outline:2px solid var(--accent);outline-offset:5px}
.cloud-detail {position:absolute;z-index:4;left:0;right:0;top:348px;opacity:clamp(0,calc((var(--focus) - .62) * 2.632),1);transform:translateY(calc((1 - var(--focus)) * 25px));pointer-events:none}
.cloud-detail h2 {font-size:13px;font-weight:400;letter-spacing:.08em;margin:0 0 8px;color:var(--muted)}
.cloud-detail-head {display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:12px}
.cloud-cover {font-size:64px;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.cloud-cover small {font-size:22px;margin-left:5px}
.cloud-description {max-width:170px;font-size:13px;line-height:1.7;color:var(--muted);margin:0}
.cloud-facts {display:flex;gap:26px;font-size:12px;line-height:1.5;margin-top:12px;color:var(--muted)}
.cloud-facts b {font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:6px}
body .forecast {order:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0 10px;margin:0}
body .section-head {flex-wrap:nowrap}
body .section-title {font-size:16px;letter-spacing:.035em}
body .section-kicker {font-size:12px;line-height:1.4;margin-top:5px;letter-spacing:0}
body .forecast-actions {gap:8px}
body .timeline {height:116px;margin:24px 0 0}
body .bars {height:76px;bottom:28px;left:4px;right:4px;gap:3px}
body .bar {max-width:13px}
body .timeline::before {bottom:27px}
body .time-range {height:116px;touch-action:pan-y}
body .bar .bar-temp,body .bar .bar-time {font-size:11px}
body .bar .bar-time {top:calc(100% + 9px)}
body .bar.selected::after {box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent)}
body .timeline-note {font-size:12px;line-height:1.7;gap:8px;display:flex;flex-wrap:wrap}
body #updatedAt {display:none}
body .metrics {order:3;margin-top:24px}
body .weather-context {order:4;margin:0;border-top:0;padding:20px 0;display:grid;gap:8px}
body .lower-row {order:5}
body .metric-label {font-size:13px}
body .metric-sub {font-size:12px}
body .demo-banner {position:absolute;top:100%;bottom:auto;left:0;right:0;z-index:9;margin:0;font-size:12px;background:var(--paper);color:var(--ink);border:1px solid var(--line)}
body[data-mode=demo] .hero {margin-bottom:72px}
body .weather-pending .cloud-open {opacity:.4}
body .icon-btn,body .play-btn {width:44px;height:44px}
body .cloud-open[disabled] {opacity:.4;cursor:default}
body .timeline:focus-within {outline:2px solid var(--accent);outline-offset:5px}
@media(min-width:701px){
 body .hero {height:580px}
 body .stage {inset:82px 0 auto 29%;width:71%;height:435px}
 body .state-tag {top:99px}
 body .temperature {top:226px;left:-10px;transform:translate(calc(var(--pull) * -14px),calc(var(--focus) * -80px - var(--touch) * 13px)) rotate(calc(var(--pull) * -2deg)) scale(calc(1 - var(--focus) * .60))}
 body .temperature .number {font-size:252px}
 body .temperature[data-wide=true] .number {font-size:200px}
 body .temperature .degree {font-size:86px}
 body .condition {top:468px;font-size:30px;transform:translateY(calc(var(--focus) * -210px))}
 body .feels {top:516px}
 .cloud-open {top:91px;bottom:auto}
 .cloud-back {top:91px}
 .cloud-detail {top:411px;left:38%;right:4%}
 .cloud-cover {font-size:76px}
 .cloud-description {max-width:250px;font-size:14px}
 body .forecast {padding-top:21px}
 body .timeline {margin-top:23px;height:127px}
 body .bars {height:87px}
 body .bar {max-width:27px}
 body .bar .bar-temp,body .bar .bar-time {font-size:12px}
 body .time-range {height:127px}
 body .metrics {margin-top:28px}
}
@media(max-width:380px){
 body .hero {height:482px}
 body .stage {left:-15px;right:-15px;width:calc(100% + 30px);height:315px}
 body .weather-atmosphere {left:-15px;right:-15px;width:calc(100% + 30px)}
 body .temperature {top:224px}
 body .temperature .number {font-size:166px}
 body .temperature[data-wide=true] .number {font-size:130px}
 body .condition {top:391px;font-size:22px}
 body .feels {top:427px;font-size:12px;gap:12px}
 .cloud-open {bottom:auto;font-size:12px;gap:8px}
 .cloud-detail {top:326px}
 .cloud-cover {font-size:56px}
 .cloud-description {max-width:150px;font-size:12px}
 .cloud-facts {gap:20px}
 body .section-kicker {font-size:11px}
 body .forecast {padding-top:16px}
}
@media(prefers-reduced-motion:reduce){body .hero{--touch:0!important}}