/* Material study: a clear reading and a continuous, tactile time instrument. */
@font-face{font-family:Aether Sans;src:url('/assets/fonts/aether-sans.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Aether Serif;src:url('/assets/fonts/aether-serif.woff') format('woff');font-weight:400 700;font-display:swap}
@font-face{font-family:Aether Numerals;src:url('/assets/fonts/aether-numerals.woff') format('woff');font-weight:100 900;font-display:swap}
body{--sans:'Aether Sans',sans-serif;--mono:'Aether Sans',sans-serif;--serif:'Aether Serif',serif;font-family:var(--sans);font-weight:400;--paper:#f3f0e8;--ink:#213240;--muted:#536575;--line:#c4cbd0;--accent:#9c651f}
button,input,select,textarea{font-family:var(--sans)}
body .wrap{width:calc(100% - 48px);max-width:1120px}
body .topbar{min-height:66px;padding:9px 0}
body .wordmark{font-family:'Aether Numerals',sans-serif;font-size:25px;letter-spacing:-.065em;font-weight:650;line-height:1}
body .wordmark span{color:inherit!important}
body .tagline{display:none}
body .top-actions{gap:6px}
body .sound-toggle{min-width:44px;width:44px;height:44px;padding:10px;border:0;border-radius:50%;background:transparent;color:var(--ink)}
body .sound-toggle[aria-pressed=true]{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
body .sound-toggle .equalizer{display:none}
body .sound-symbol{width:23px;height:23px;display:block}
body .sound-toggle[aria-pressed=false] .sound-wave{opacity:.3}
body #soundText{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body .icon-btn{border:0;background:none}
body .icon-btn svg{width:23px;height:23px}
body .hero{height:566px}
body .location-row{top:10px;min-height:50px;align-items:center}
body .location-button{gap:12px;min-height:48px;max-width:100%;text-align:left}
body .location-button>svg:first-child{display:none}
body .location-button .city{font-size:29px;font-weight:600;line-height:1.3;letter-spacing:.04em;max-width:min(65vw,500px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
body .location-button .chevron{width:21px;height:21px}
body .edition{display:none}
body .geo-btn{margin-left:auto!important;width:44px;height:44px;min-width:44px;padding:8px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;margin:0;flex-shrink:0}
body .geo-btn svg:first-child{width:24px;height:24px}
body .geo-btn span,body .geo-btn svg:last-child{display:none}
body .state-tag{top:62px;font:400 16px/1.6 var(--sans);letter-spacing:.02em}
body .status-dot{display:none}
body .stage{inset:60px -24px auto;width:calc(100% + 48px);height:390px}
body .weather-atmosphere{inset:0 -24px;width:calc(100% + 48px);mask-image:linear-gradient(transparent,#000 20%,#000 92%,transparent)}
body .temperature{top:339px;left:-5px;transform:translate(calc(var(--pull) * -10px),calc(var(--focus) * -218px - var(--touch) * 12px)) rotate(calc(var(--pull) * -2deg)) scale(calc(1 - var(--focus) * .65));letter-spacing:-.055em;align-items:flex-start}
body .temperature .number{position:relative;font-family:'Aether Numerals',var(--sans);font-size:160px;font-weight:580;line-height:1.04;letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums}
body .temperature[data-wide=true] .number{font-size:135px}
body .temperature .degree{font-family:'Aether Numerals',var(--sans);font-size:51px;font-weight:500;line-height:1;margin:14px 0 0 7px;padding:0}
body .temperature .number,body .temperature .degree{color:var(--ink);text-shadow:0 1px 0 color-mix(in srgb,var(--paper) 50%,var(--ink)),1px 2px 0 color-mix(in srgb,var(--ink) 90%,#000),1px 3px 0 color-mix(in srgb,var(--ink) 75%,#000),0 4px 3px color-mix(in srgb,var(--ink) 20%,transparent)}
@supports(background-clip:text){body .temperature .number,body .temperature .degree{background:linear-gradient(170deg,color-mix(in srgb,var(--ink) 65%,var(--paper)) 2%,var(--ink) 37%,var(--ink) 65%,color-mix(in srgb,var(--ink) 85%,#000) 94%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}}
body .condition{top:477px;font-family:var(--serif);font-size:35px;line-height:1.4;font-weight:550;letter-spacing:.035em;max-width:100%;transform:translateY(calc(var(--focus) * -278px)) scale(calc(1 - var(--focus) * .2))}
body .condition[data-long=true]{font-size:26px;max-width:100%}
body .feels{top:526px;font:400 16px/1.5 var(--sans);letter-spacing:.01em;gap:14px;color:var(--ink)}
body .feels b{font-weight:400}
body .feels>span:last-child{font-size:13px;color:var(--muted);align-self:center}
body .cloud-open,body .cloud-back{top:58px;font-size:12px;gap:7px;min-height:44px;font-family:var(--sans);color:var(--muted)}
body .cloud-open span{font-family:inherit;font-size:12px}
body .cloud-detail{top:340px}
body .cloud-detail h2{font:400 14px var(--sans)}
body .cloud-cover{font:500 68px/1 'Aether Numerals',var(--sans);letter-spacing:-.045em}
body .cloud-description{font-size:14px;max-width:175px}
body .cloud-facts{font-size:14px;gap:20px;line-height:1.7}
body .forecast{padding:13px 0 8px;margin:0}
body .forecast .section-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
body .forecast .section-head>div:first-child{display:flex;align-items:baseline;gap:9px;min-width:0}
body .section-title{font:500 19px/1.5 var(--serif);letter-spacing:.02em;white-space:nowrap}
body .section-kicker{font:400 12px/1.5 var(--sans);margin:0;white-space:nowrap}
body .forecast-actions{gap:7px;flex-shrink:0}
body .small-button{font:400 12px/1.5 var(--sans);padding:4px 0;min-height:44px;border:0;background:none;white-space:nowrap}
body .small-button.active{visibility:hidden}
body .play-btn{width:36px;height:36px;border:1px solid var(--ink);border-radius:50%;background:none;color:var(--ink);padding:9px;overflow:visible;position:relative}
body .play-btn::before{content:'';position:absolute;inset:-5px}
body .play-btn svg{width:16px;height:16px}
body .play-btn[aria-pressed=true]{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
body .timeline{height:119px;margin:3px 0 0}
body .timeline::before,body .bars{display:none}
.time-instrument{position:absolute;inset:0;overflow:visible;color:var(--muted);pointer-events:none}
.time-instrument svg{width:100%;height:100%;overflow:visible;display:block}
.time-instrument text{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12px;fill:var(--muted);letter-spacing:0}
.time-instrument .time-label{fill:var(--ink)}
.time-instrument .temperature-curve{stroke:color-mix(in srgb,var(--ink) 55%,var(--paper));stroke-width:1.05;fill:none}
.time-instrument .selection-line{stroke:var(--accent);stroke-width:1.2}
.time-instrument .selection-ring{fill:var(--paper);stroke:var(--accent);stroke-width:2.4}
.time-instrument .selected-temperature{fill:var(--accent);font-size:15px;font-weight:550}
.time-instrument .selected-hour{font-size:11px;fill:var(--muted)}
body .time-range{height:119px;width:calc(100% - 2px);left:1px;touch-action:pan-y}
body .timeline:focus-within{outline:2px solid var(--accent);outline-offset:4px;border-radius:1px}
body .timeline-note{font:400 12px/1.7 var(--sans);letter-spacing:0;min-height:22px}
body .timeline-note span:last-child{text-align:left}
body .timeline-help{margin:0;color:var(--muted)}
body #timelineInfo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body .metrics{margin-top:20px}
body .metric-value,body .cloud-cover{font-family:'Aether Numerals',var(--sans)}
body .mood-copy,body .metric-label,body .metric-sub,body .location-meta,body .daily-row,body .sun-times,body .atelier-copy,body .dialog-copy,body .setting,body .setting small,body .quick-cities button{font-family:var(--sans)}
body .daily-row{font-size:13px}
body .sun-times{font-size:13px;flex-wrap:wrap}
body .dialog-copy{font-size:14px}
body .setting{font-size:15px}
body .setting small{font-size:12px}
body .quick-cities button{font-size:14px}
body .notice{font-size:14px;background:var(--ink);color:var(--paper)}
body .weather-context{gap:8px;font-size:13px}
body .data-alert{font-size:14px;background:var(--paper);color:var(--ink);border-color:var(--line);border-radius:3px}
body[data-weather=sun]{--paper:#f3f0e8;--ink:#20303d;--muted:#596977;--line:#c6ccd0;--accent:#986019;--sky-glow:#f2d49a46}
body[data-weather=cloud],body[data-weather=fog]{--paper:#e8edf1;--ink:#263846;--muted:#566b7b;--line:#bdcad3;--accent:#8d5b21;--sky-glow:#f5f6f462}
body[data-weather=rain],body[data-weather=storm]{--paper:#dde8f2;--ink:#21394d;--muted:#526a7f;--line:#aec3d5;--accent:#92601e;--sky-glow:#a9c8e66b}
body[data-weather=snow]{--paper:#e8f0f6;--ink:#263d4f;--muted:#536c80;--line:#b5c9d9;--accent:#936321;--sky-glow:#bcd8ed70}
body[data-sky=night]{--paper:#0b1c32;--ink:#f4efe4;--muted:#b5c8dc;--line:#42576e;--accent:#f1c777;--sky-glow:#183e6a66}
body[data-sky=night] .temperature .number,body[data-sky=night] .temperature .degree{background-image:linear-gradient(170deg,#fffaf0 5%,#f1ecdf 42%,#c5c4ba 70%,#fff6e5 94%);text-shadow:0 1px 0 #ffffff80,1px 2px 0 #9a9b99,1px 3px 0 #626e7c,0 5px 4px #0006}
body[data-mode=demo] .hero{margin-bottom:76px}
body .demo-banner{font-size:13px;border-radius:3px}
@media(min-width:701px){
 body .wrap{width:calc(100% - 80px)}
 body .hero{height:630px}
 body .location-row{top:22px}
 body .state-tag{top:79px;font-size:17px}
 body .stage{inset:103px -10px auto 27%;width:73%;height:473px}
 body .temperature{top:253px;left:-7px;transform:translate(calc(var(--pull) * -14px),calc(var(--focus) * -104px - var(--touch) * 12px)) rotate(calc(var(--pull) * -2deg)) scale(calc(1 - var(--focus) * .63))}
 body .temperature .number{font-size:244px}
 body .temperature[data-wide=true] .number{font-size:195px}
 body .temperature .degree{font-size:79px;margin-top:23px}
 body .condition{top:493px;font-size:40px;max-width:60%;transform:translateY(calc(var(--focus) * -250px)) scale(calc(1 - var(--focus) * .2))}
 body .condition[data-long=true]{font-size:34px}
 body .feels{top:555px;font-size:17px}
 body .cloud-open,body .cloud-back{top:68px;font-size:14px}
 body .cloud-detail{top:440px;left:40%;right:3%}
 body .cloud-description{max-width:260px;font-size:15px}
 body .cloud-cover{font-size:80px}
 body .forecast{padding-top:15px}
 body .timeline{height:130px;margin-top:10px}
 body .time-range{height:130px}
 body .section-title{font-size:23px}
 body .section-kicker{font-size:14px}
 .time-instrument text{font-size:13px}
 body .timeline-note{font-size:13px}
}
@media(max-width:380px){
 body .wrap{width:calc(100% - 40px)}
 body .hero{height:525px}
 body .stage{inset:64px -20px auto;width:calc(100% + 40px);height:358px}
 body .weather-atmosphere{inset:0 -20px;width:calc(100% + 40px)}
 body .temperature{top:323px}
 body .temperature .number{font-size:140px}
 body .temperature[data-wide=true] .number{font-size:121px}
 body .temperature .degree{font-size:46px}
 body .condition{top:446px;font-size:32px}
 body .condition[data-long=true]{font-size:24px}
 body .feels{top:492px;font-size:15px;gap:10px}
 body .feels>span:last-child{font-size:12px}
 body .section-title{font-size:18px}
 body .section-kicker{font-size:11px}
 body .forecast .section-head>div:first-child{gap:6px}
 body .small-button{font-size:11px}
 body .forecast-actions{gap:5px}
 body .cloud-detail{top:328px}
 body .cloud-cover{font-size:60px}
 body .cloud-description{max-width:147px;font-size:13px}
}
@media(prefers-contrast:more){body .temperature .number,body .temperature .degree{-webkit-text-fill-color:var(--ink);background:none;text-shadow:none}}
@media(forced-colors:active){body .temperature .number,body .temperature .degree{-webkit-text-fill-color:CanvasText;background:none;text-shadow:none}.time-instrument .temperature-curve,.time-instrument .selection-line{stroke:CanvasText}.time-instrument text{fill:CanvasText}.time-instrument .selection-ring{fill:Canvas;stroke:Highlight}}

/* Shadows are applied after glyph compositing so they cannot cover the face gradient. */
body .temperature .number,body .temperature .degree,body[data-sky=night] .temperature .number,body[data-sky=night] .temperature .degree{text-shadow:none;filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--ink) 40%,var(--paper))) drop-shadow(1px 2px 0 color-mix(in srgb,var(--ink) 65%,#000)) drop-shadow(0 3px 2px #0002)}

body .temperature .degree{font-size:66px;margin-top:5px;filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--ink) 65%,#000))}
@media(min-width:701px){body .temperature .degree{font-size:86px;margin-top:14px}}
@media(max-width:380px){body .temperature .degree{font-size:60px;margin-top:5px}body .hero{height:531px}}

body .cloud-detail{top:390px}body .cloud-facts{flex-wrap:wrap}
@media(max-width:380px){body .cloud-detail{top:365px}}
@media(min-width:701px){body .cloud-detail{top:350px;left:0;right:62%}body .cloud-description{max-width:180px}}

body .temperature .degree,body[data-sky=night] .temperature .degree{background:none;-webkit-text-fill-color:var(--ink);filter:none}
@media(forced-colors:active){body .temperature .degree,body[data-sky=night] .temperature .degree{-webkit-text-fill-color:CanvasText}}
body[data-mode=demo] #timelineInfo,body.weather-pending #timelineInfo{position:static;width:auto;height:auto;overflow:visible;clip-path:none;font-size:13px}
body[data-mode=demo] .timeline-help,body.weather-pending .timeline-help{display:none}
body.weather-pending .condition{font:400 20px/1.7 var(--sans);max-width:95%}
body.weather-pending .feels{display:none}