@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--red:#ed3f2e;--paper:#f2efe8;--ink:#211f1c;--muted:#8a857d;--border:#d6d1c8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--red);outline-offset:5px}header{height:84px;position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 45px}.brand{color:var(--ink);text-decoration:none;font-size:21px;font-weight:700;letter-spacing:-1px;display:flex;align-items:center;gap:4px}.brand-light{font-weight:400}.brand-mark{color:var(--red);font-size:24px;margin-right:8px}.brand sup{font-size:9px;align-self:start;margin-top:3px}header nav{display:flex;gap:22px;align-items:center}.about-button{font-size:16px}.small-button{display:flex;align-items:center;gap:8px;font-size:11px}.icon-button{font-size:19px}main{height:100svh;min-height:780px;padding:84px 40px 96px;max-width:1800px;margin:auto;position:relative}.player{height:100%;display:flex;flex-direction:column;position:relative}.player-top{position:relative;display:flex;align-items:center;justify-content:space-between;height:48px;flex-shrink:0;z-index:4}.location-button{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600}.crosshair{color:var(--red);font-size:15px}.down{font-size:9px;color:var(--muted);margin-left:6px}.date{font-family:'Space Grotesk';font-size:10px;letter-spacing:1.5px;color:#716b63}.day-tabs{display:flex;gap:3px;background:#e4e0d8;border-radius:30px;padding:4px;position:absolute;left:50%;transform:translateX(-50%)}.day-tabs button{font-size:10px;padding:8px 19px;border-radius:20px;color:#7d766e}.day-tabs button.active{background:var(--ink);color:var(--paper)}.scene{flex:1;min-height:420px;position:relative;isolation:isolate;overflow:hidden;transition:background .8s;border-radius:16px}.sky-grid{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#fff8,transparent 65%);z-index:-1}.scene-heading{position:absolute;left:50%;bottom:35px;transform:translateX(-50%);text-align:center;z-index:2;width:100%;pointer-events:none}.live-label{position:fixed;top:auto;bottom:28px;left:0;display:flex;gap:6px;align-items:center;transform:translateX(-50%);font-family:'Space Grotesk';font-size:8px;letter-spacing:1.5px;white-space:nowrap;display:none}.live-label>span:first-child{width:5px;height:5px;border-radius:50%;background:var(--red)}.big-temp{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(175px,24vh,310px);font-weight:900;letter-spacing:-8px;line-height:.8;display:flex;justify-content:center;align-items:flex-start;text-shadow:1px 1px #79756e,2px 2px #77736c,3px 3px #747069,4px 4px #716d66,5px 5px #6e6a63,6px 6px #6b6760,7px 7px #68645d,8px 8px #65615a,10px 14px 18px #211f1c23;margin:0 0 26px 18px}.big-temp sup{font-family:'Space Grotesk';font-size:.22em;line-height:1;letter-spacing:0;font-weight:500;text-shadow:none;margin:8px 0 0 8px}.weather-kicker{font-family:'Space Grotesk';font-size:8px;letter-spacing:2px;color:#8c857d;display:none}h2{margin:0;font-family:'Space Grotesk';font-size:32px;font-weight:700;letter-spacing:-1.2px}.scene-heading p{font-size:11px;color:#837d74;margin:9px 0 0}.weather-art{position:absolute;top:0;left:50%;transform:translateX(-50%);width:460px;height:295px;z-index:1}.sun{position:absolute;width:195px;height:195px;left:150px;top:12px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffad8e,#f76d49 33%,#ef3c2d 63%,#b8231c 100%);box-shadow:inset -10px -12px 25px #b51d2220,0 20px 40px #d02a2020;transition:all .7s}.cloud{position:absolute;background:linear-gradient(155deg,#fff 12%,#eeece6 50%,#b1b0a5 100%);border-radius:100px;filter:drop-shadow(4px 15px 9px #211f1c20);animation:float 7s ease-in-out infinite;box-shadow:inset -8px -9px 18px #8a8a7d30}.cloud:before,.cloud:after{content:'';position:absolute;background:inherit;border-radius:50%}.cloud-main{left:90px;top:149px;width:265px;height:85px;transform:rotate(-5deg)}.cloud-main:before{left:40px;top:-75px;width:135px;height:135px}.cloud-main:after{right:21px;top:-41px;width:96px;height:96px}.cloud-back{width:144px;height:50px;left:24px;top:103px;animation-delay:-2s}.cloud-back:before{left:21px;top:-37px;width:70px;height:70px}.cloud-back:after{right:16px;top:-19px;width:50px;height:50px}.cloud-small{width:105px;height:35px;left:335px;top:193px;animation-delay:-4s}.cloud-small:before{width:49px;height:49px;left:16px;top:-27px}.cloud-small:after{width:39px;height:39px;right:10px;top:-16px}.orbit{position:absolute;border:1px solid #b7b1a32b;border-radius:50%;width:340px;height:240px;left:65px;top:15px;transform:rotate(-25deg)}.orbit-two{width:260px;height:260px;left:105px;top:5px}.art-caption{position:absolute;left:50%;top:5px;transform:translateX(-50%);font-family:'Space Grotesk';font-size:7px;letter-spacing:1.8px;color:#9c9589;white-space:nowrap;opacity:0;transition:.3s}.weather-art:hover .art-caption{opacity:1}.art-caption i{display:none}.scene-foot{position:absolute;bottom:45px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;font-size:10px;z-index:3;pointer-events:none}.scene-foot>*{pointer-events:auto}.scene-foot>span:first-child{position:absolute;left:0;bottom:8px;color:#80796f}.mini-arrow{margin-right:5px}.scene-foot button{position:absolute;right:0;bottom:8px;color:#80796f;font-size:10px}.scene-foot button span{margin-left:6px}.time-badge{position:absolute;left:50%;transform:translateX(-50%);top:-445px;font-family:'Space Grotesk';font-size:9px;letter-spacing:1px;color:#9b9387;display:none}.timeline-panel{max-width:680px;width:100%;margin:auto;padding:0 20px;flex-shrink:0}.timeline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.tiny-label{font-family:'Space Grotesk';font-size:9px;letter-spacing:1.6px}.timeline-header .tiny-label{display:none}.timeline-header p{font-size:10px;color:#8a8378;margin:0}.high-low{font-size:12px;white-space:nowrap}.high-low b{font-weight:600}.high-low>span{margin-left:12px;color:#938b7f}.high-low i{font-size:9px}.timeline{height:45px;position:relative}.forecast-band{position:absolute;inset:0;border-radius:30px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;background:linear-gradient(90deg,#d0cbc2,#d9d4c9 17%,#e78d77 30%,#ed604b 49%,#e0b0a2 60%,#c0c2c6 70%,#b6b5bd 90%);color:#292723aa;overflow:hidden}.forecast-band>span>i{font-size:12px}.temp-line{position:absolute;inset:0;width:100%;height:100%;opacity:.25;overflow:hidden;border-radius:30px}.temp-line path{fill:none;stroke:#fff;stroke-width:2}.rain-band{position:absolute;left:58%;width:13%;bottom:0;height:100%;background:#87a3a773;border-left:1px solid #ffffff30;border-right:1px solid #ffffff30}#playhead{position:absolute;top:-4px;bottom:-4px;width:3px;background:var(--ink);left:43.5%;pointer-events:none;z-index:2;border-radius:4px}#playhead>span{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);font-family:'Space Grotesk';font-size:9px;white-space:nowrap;color:var(--red);font-weight:600;display:none}#playhead:after{content:'';position:absolute;top:-4px;left:-3px;width:9px;height:9px;background:var(--ink);border-radius:50%}.timeline input{opacity:0;width:100%;height:100%;position:absolute;inset:0;cursor:ew-resize;margin:0}.hour-labels{display:flex;justify-content:space-between;font-family:'Space Grotesk';color:#938b7f;font-size:8px;margin-top:10px;padding:0 9px}.transport{display:flex;justify-content:space-between;align-items:center;padding-top:20px;height:68px}.play-controls{display:flex;gap:10px;align-items:center}#play{border:1px solid #211f1c;background:var(--ink);border-radius:50%;width:32px;height:32px;color:var(--paper);font-size:10px;box-shadow:2px 2px 0 #b8b1a6}.play-controls b{font-size:10px;font-weight:500}.play-controls div>span{display:none}#speed{font-size:9px;color:#898174;border:1px solid #c9c2b6;border-radius:5px;padding:3px 5px;margin-left:5px}.scrub-hint{font-size:8px;color:#a1988a;display:flex;gap:7px}#now{font-size:9px;color:#81796d}.app-dock{position:absolute;left:50%;transform:translateX(-50%);bottom:17px;display:flex;gap:8px;align-items:center;border:1px solid #d4cdc2;border-radius:40px;padding:5px;background:#e8e3daaa;backdrop-filter:blur(15px);z-index:5;white-space:nowrap}.app-dock button{display:flex;align-items:center;gap:7px;border-radius:25px;padding:12px 20px;font-size:10px;color:#8a8175}.app-dock i{font-size:13px}.app-dock .selected{background:var(--ink);color:var(--paper)}.rain{position:absolute;inset:100px 0 0;pointer-events:none;opacity:0;overflow:hidden}.rain i{position:absolute;width:2px;height:24px;border-radius:3px;background:#9aadae;animation:fall .65s linear infinite}.scene.raining .rain{opacity:.8}.scene.raining .sun{opacity:.25}.scene.night{background:#242426;color:#f2efe8}.night .sky-grid{background:radial-gradient(ellipse at 50% 30%,#42404444,transparent 65%)}.night .sun{background:radial-gradient(circle at 30% 30%,#e9e7dc,#b8b4a8);box-shadow:inset -45px -5px 1px #28282b,0 0 50px #ffffff08}.night .cloud{background:linear-gradient(150deg,#6c6b6a,#454545 65%,#242426)}.night .big-temp{text-shadow:2px 2px #85817b,4px 4px #716d68,6px 6px #5e5b57,8px 8px #4a4744,10px 14px 18px #0002}.night .scene-heading p,.night .scene-foot button,.night .scene-foot>span:first-child{color:#a5a099}body[data-skin="night"]{--paper:#242426;--ink:#f0ece3;--muted:#a59d91;--border:#54504b}body[data-skin="night"] .sun{box-shadow:0 0 60px #ed3f2e44}body[data-skin="night"] .app-dock{background:#343231;border-color:#514c47}body[data-skin="night"] .day-tabs{background:#3c3936}body[data-skin="paper"] .sun{background:radial-gradient(circle at 30% 30%,#fff,#dedbd2 70%,#aaa69b)}dialog{border:1px solid #ccc5b9;background:var(--paper);color:var(--ink);padding:35px;border-radius:20px;width:min(520px,92vw);box-shadow:0 20px 100px #0003}dialog::backdrop{background:#19171588;backdrop-filter:blur(12px)}.close{position:absolute;right:20px;top:20px;font-size:17px;z-index:2}dialog h2{font-size:30px;margin:18px 0 25px}dialog p{font-size:12px;line-height:1.8;color:#8a8175}.search-row{display:flex;gap:8px;margin-top:10px}.search-row input{min-width:0;width:100%;border:1px solid #c9c2b6;border-radius:6px;background:#ffffff33;padding:13px;color:inherit}.search-row button{background:var(--red);border-radius:6px;color:#fff;font-size:11px;white-space:nowrap;padding:12px}.search-row i{font-size:9px}#search-form label{font-size:12px}#results button{display:block;width:100%;text-align:left;padding:14px 0;border-bottom:1px solid #c9c2b6;font-size:12px}.setting-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #cbc4b8;padding:18px 0;font-size:12px}.setting-row select{background:transparent;border:1px solid #c9c2b6;border-radius:5px;color:inherit;font-size:11px;padding:8px}.detail-dialog{width:min(560px,95vw);max-height:94svh;padding:30px}.detail-art{height:225px;position:relative;overflow:hidden}.detail-orb{position:absolute;width:170px;height:170px;left:50%;top:15px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 30% 25%,#6a6762,#353330 55%,#171615);box-shadow:inset 15px 2px #e4e0d8,10px 18px 30px #0002}.detail-dialog[data-view="rain"] .detail-orb{border-radius:50%;width:250px;height:70px;top:110px;background:linear-gradient(#cb6b59,#de3d2c 30%,#8a211b 32%,#302b27 35%,#171615);box-shadow:0 20px 25px #0002;transform:translateX(-50%) rotate(-8deg)}.detail-drops{display:none;position:absolute;inset:0}.detail-dialog[data-view="rain"] .detail-drops{display:block}.detail-drops i{position:absolute;top:0;width:6px;height:24px;background:var(--red);border-radius:5px;animation:fall 1.3s linear infinite}.detail-reading{display:flex;align-items:center;justify-content:space-between;border-radius:20px;background:var(--ink);color:var(--paper);padding:10px 15px;font-family:'Space Grotesk';font-size:10px;letter-spacing:1px}.detail-reading b{font-weight:500}.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:24px 0}.metric-label{display:flex;gap:6px;align-items:center;font-family:'Space Grotesk';font-size:9px;color:#8d8578;letter-spacing:.5px}.number{margin-left:auto;color:#b3ab9e;font-size:8px}.metric-value{font-family:'Space Grotesk';font-size:26px;display:flex;gap:4px;align-items:baseline;margin-top:7px;position:relative}.metric-value small{font-family:'DM Sans';font-size:9px;color:#9b9284;letter-spacing:0}.metric-icon{position:absolute;right:12px;font-size:25px;color:#b8ac9e;top:1px}.wind-icon{color:#9d9283}.uv-icon{color:var(--red)}.metrics p{font-size:8px;margin:4px 0;line-height:1.5}.moon-value{font-size:13px;min-height:32px;align-items:center}.moon{position:absolute;right:10px;width:26px;height:26px;border-radius:50%;background:#d6d0c5;box-shadow:inset -9px 0 #383530}.detail-chart{border-top:1px solid #c9c2b6;padding-top:15px;font-family:'Space Grotesk';font-size:8px;color:#9b9284;letter-spacing:1px}.detail-chart svg{width:100%;height:80px;display:block;margin-top:10px}.detail-chart path{fill:var(--red);opacity:.8}.detail-chart>div{display:flex;justify-content:space-between;padding-top:5px}.detail-note{text-align:center;font-size:9px!important;margin-bottom:0}.detail-dialog[data-view="moon"]{background:#242426;color:#f2efe8;border-color:#46423c}.detail-dialog[data-view="moon"] .detail-reading{background:#f2efe8;color:#242426}.detail-dialog[data-view="moon"] .detail-chart path{fill:#f2efe8}#toast{position:fixed;bottom:95px;left:50%;transform:translate(-50%,20px);opacity:0;background:#211f1c;color:#f2efe8;border:1px solid #686054;border-radius:9px;padding:12px 20px;font-size:11px;max-width:90vw;transition:.2s;pointer-events:none;z-index:10}#toast.visible{opacity:1;transform:translate(-50%,0)}@keyframes float{0%,100%{translate:0 0}50%{translate:10px -9px}}@keyframes fall{from{transform:translate(0,-50px) rotate(15deg)}to{transform:translate(-50px,260px) rotate(15deg)}}
@media(min-width:1100px){main{padding-left:65px;padding-right:65px}.scene-heading{bottom:20px}.scene{min-height:470px}.weather-art{top:5px;transform:translateX(-50%) scale(1.05)}.scene-foot{left:15px;right:15px}.scene-foot>span:first-child{bottom:25px}.scene-foot button{bottom:25px}.scene:before{content:'DAILY\A ATMOSPHERE';white-space:pre;position:absolute;left:15px;top:45%;font-family:'Space Grotesk';font-size:9px;letter-spacing:3px;line-height:2;color:#a19888}.scene:after{content:'LOOK UP.\A SLOW DOWN.';white-space:pre;position:absolute;right:15px;top:45%;font-family:'Space Grotesk';font-size:9px;letter-spacing:2px;line-height:2;text-align:right;color:#a19888}}@media(min-height:1000px){.weather-art{top:5%;transform:translateX(-50%) scale(1.3)}.big-temp{font-size:310px}.scene-heading{bottom:45px}.scene{min-height:600px}}@media(max-width:700px){header{height:65px;padding:0 22px}.brand{font-size:17px}.brand-mark{font-size:20px;margin-right:5px}header nav{gap:17px}.about-button{display:none}.small-button>span{display:none}.small-button i{font-size:16px}.icon-button{font-size:17px}main{padding:65px 20px 89px;min-height:800px}.player-top{height:77px;align-items:flex-start;padding-top:5px}.location-button{font-size:12px;padding-left:0}.date{font-size:8px;margin-top:4px;letter-spacing:1px}.day-tabs{top:38px;width:238px;justify-content:center}.day-tabs button{font-size:9px;padding:6px 14px}.scene{min-height:430px;border-radius:10px}.weather-art{top:0;transform:translateX(-50%) scale(.83);transform-origin:top center}.scene-heading{bottom:47px}.big-temp{font-size:205px;letter-spacing:-6px;margin-bottom:22px;text-shadow:1px 1px #79756e,2px 2px #747069,3px 3px #6e6a63,4px 4px #68645d,5px 5px #65615a,8px 12px 14px #211f1c20}h2{font-size:28px}.scene-heading p{font-size:9px}.scene-foot{bottom:15px;left:0;right:0}.scene-foot>span:first-child,.scene-foot button{bottom:0;font-size:8px}.timeline-panel{padding:0 3px}.timeline-header{margin-bottom:13px;gap:10px}.timeline-header p{font-size:8px;max-width:220px;line-height:1.5}.high-low{font-size:10px}.high-low>span{margin-left:6px}.high-low i{font-size:8px}.timeline{height:37px}.forecast-band{padding:0 11px}.forecast-band>span>i{font-size:10px}.hour-labels{font-size:7px;padding:0 4px;margin-top:8px}.hour-labels span:nth-child(even){display:none}.transport{height:61px;padding-top:14px}.scrub-hint{display:none}.app-dock{bottom:15px;gap:0;padding:4px;width:calc(100% - 40px);max-width:400px;justify-content:space-between}.app-dock button{padding:11px 13px;flex-direction:column;gap:6px;flex:1;font-size:8px}.app-dock i{font-size:15px}.app-dock button.selected{background:var(--ink)}.detail-dialog{padding:25px}.detail-dialog h2{font-size:27px;margin-bottom:5px}.detail-art{height:200px}.metrics{gap:15px}.metric-icon{right:5px}.moon{right:0}.moon-value>span:first-child{max-width:105px}}@media(max-height:750px) and (min-width:701px){main{min-height:740px}.weather-art{transform:translateX(-50%) scale(.8);transform-origin:top center}.big-temp{font-size:180px}.scene{min-height:400px}}@media(prefers-reduced-motion:reduce){.cloud,.rain i,.detail-drops i{animation:none}}
/* Reserve room for the sky, temperature and dock without overlapping controls. */
main{min-height:900px}.big-temp{font-size:clamp(175px,21vh,290px)}@media(min-width:1100px){.weather-art{transform:translateX(-50%) scale(.9);transform-origin:top center}.scene-heading{bottom:28px}}@media(max-width:700px){main{min-height:920px}.scene{min-height:500px}.weather-art{transform:translateX(-50%) scale(.75)}.big-temp{font-size:205px}}@media(min-height:1000px){.weather-art{transform:translateX(-50%) scale(1.15)}.big-temp{font-size:290px}}