:root{color-scheme:normal;font-family:Segoe UI,Arial,sans-serif;color:#f3f5fa;background:transparent;font-size:14px}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid #acd5ff;outline-offset:3px}
.weather{--sky:#283342;--horizon:#42566b;width:100%;max-width:300px;overflow:hidden;border:1px solid #414650;border-radius:22px;background:#24272e}
.top{position:relative;isolation:isolate;background:linear-gradient(160deg,var(--sky),var(--horizon));padding:20px 18px 0;overflow:hidden;transition:background 1s}
.location{margin:0;font-size:18px;font-weight:650;letter-spacing:-.4px}.region{margin:4px 0 0;font-size:12px;color:#d0d9e3}.eyebrow{margin:19px 0 0;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#d0d9e3}
.current{display:flex;align-items:center;justify-content:space-between;gap:4px}.temp{font-size:70px;letter-spacing:-5px;line-height:1.15;font-weight:300;font-family:Arial,sans-serif}.current .icon{width:108px;height:94px}.condition{font-size:18px;margin:0 0 5px;font-weight:600}.feels{font-size:12px;color:#d0d9e3;margin:0}
.landscape{width:calc(100% + 36px);height:57px;margin:12px -18px -4px;display:block}.ridge-back{fill:#ffffff0c}.ridge-front{fill:#151f2b66}.lake{stroke:#ffffff22;stroke-width:1.2}
.content{padding:16px 14px 12px}.label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#bdc6d3;margin:0 0 12px;font-weight:600}
.hours{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}.hour{text-align:center;font-size:11px;color:#c9ced8}.hour b{display:block;color:#f3f5fa;font-size:15px;font-weight:500;margin-top:5px}.icon{width:36px;height:34px;display:block;margin:auto;overflow:visible}.hour .icon{margin:6px auto}.trend{margin:16px 0;padding:11px 12px;display:flex;gap:9px;align-items:center;border:1px solid #424954;border-radius:12px;font-size:12px;line-height:1.5;background:#30353e}.trend svg{flex:0 0 22px;color:#b4d2f3}
.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:17px}.day{padding:9px 0;border-radius:11px;text-align:center;font-size:12px;background:#2c3038}.day:first-child{background:#3c4552;box-shadow:inset 0 0 0 1px #647285}.day .icon{margin:5px auto;width:32px;height:30px}.day strong{font-size:12px;font-weight:600;display:block}.day small{color:#c3cad5;font-weight:400;font-size:11px}
.metrics{margin:0;border-top:1px solid #414650}.metric{display:flex;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid #414650;font-size:12px}.metric svg{width:21px;height:21px;stroke:#a8c8ef;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.metric dt{flex:1}.metric dd{margin:0;font-size:14px;font-variant-numeric:tabular-nums}
.footer{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-top:11px}.source{font-size:10px;line-height:1.6;color:#c2cad6}.source a{color:#c2cad6;text-underline-offset:2px}.refresh{border:1px solid #4b5462;background:#323a46;color:#dbe8f9;border-radius:9px;width:38px;height:44px;cursor:pointer;flex:0 0 38px;transition:background .2s}.refresh:hover{background:#45546a}.refresh:disabled{opacity:.5;cursor:wait}.refresh svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}.status{margin:9px 0 0;color:#d9e3ef;font-size:11px;line-height:1.5}.status:empty{display:none}
.cloud{animation:float 5s ease-in-out infinite}.sun-rays{transform-origin:48px 37px;animation:spin 40s linear infinite}.rain{animation:rain 1s linear infinite}.snow{animation:snow 3s ease-in-out infinite}.flash{animation:flash 4s infinite}.fog{animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translate(4px,-2px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes rain{from{transform:translate(2px,-3px);opacity:.2}50%{opacity:1}to{transform:translate(-3px,6px);opacity:0}}@keyframes snow{50%{transform:translate(3px,5px);opacity:.5}}@keyframes flash{0%,90%,100%{opacity:.25}92%,96%{opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:260px){.top{padding-left:12px;padding-right:12px}.content{padding-left:9px;padding-right:9px}.temp{font-size:60px}.current .icon{width:90px}.location{font-size:17px}.day strong{font-size:11px}.landscape{margin-left:-12px;width:calc(100% + 24px)}}

/* Configurable sizing. The outside of the rounded card stays transparent. */
html,body{width:100%;height:auto;min-height:0;overflow-x:hidden;background:transparent;color-scheme:normal}
[hidden]{display:none!important}
.weather{width:100%;max-width:none;height:auto;border-radius:var(--radius,18px);display:flex;flex-direction:column;min-width:0;color-scheme:dark}
.top{flex:0 0 auto;padding:12px 14px 8px;min-width:0}
.location{font-size:17px;line-height:1.3;overflow-wrap:anywhere}.region{font-size:11px;line-height:1.45;margin-top:2px;overflow-wrap:anywhere}
.eyebrow{display:none}.current{min-height:55px;gap:8px}.temp{font-size:53px;line-height:1.15;letter-spacing:-3px}.current .icon{width:82px;height:68px}
.condition{font-size:16px;line-height:1.4;margin:0 0 2px}.feels{font-size:11px;line-height:1.5}
.landscape{height:22px;margin:3px -14px -8px;width:calc(100% + 28px)}
.content{flex:1;min-height:0;min-width:0;padding:12px;scrollbar-width:thin;scrollbar-color:#65768b #24272e}
.label{font-size:10px;line-height:1.4;margin:0 0 6px;letter-spacing:1px}
.hours{grid-template-columns:repeat(var(--hours-columns,6),minmax(0,1fr));height:auto;gap:9px 3px}.hour{font-size:10px;line-height:1.3}.hour b{font-size:13px;line-height:1.4;margin-top:0}.hour .icon{width:29px;height:24px;margin:3px auto}
.hours-section{margin-bottom:12px}.trend{margin:0 0 12px;padding:8px 9px;min-height:42px;font-size:11px;line-height:1.5;gap:7px;border-radius:9px}.trend svg{flex-basis:18px}
.days{grid-template-columns:repeat(var(--days-columns,5),minmax(0,1fr));gap:4px;margin:0}.days-section{margin-bottom:12px}.day{padding:7px 1px;font-size:11px;line-height:1.4;border-radius:9px}.day .icon{width:29px;height:25px;margin:2px auto}.day strong{font-size:11px;line-height:1.5;white-space:nowrap}.day small{font-size:10px}
.metric{min-height:33px;padding:6px 0;font-size:12px;gap:7px;flex-wrap:wrap}.metric svg{height:18px;width:18px;flex-shrink:0}.metric dd{font-size:13px}.metric dt{min-width:50px;overflow-wrap:anywhere}
.footer{padding-top:7px;min-height:38px;gap:8px}.source{font-size:10px;line-height:1.5;overflow-wrap:anywhere}.source>span{display:block;margin-top:2px}.refresh{height:36px;width:34px;flex-basis:34px}.refresh:disabled{cursor:default}
.status{font-size:11px;line-height:1.5;margin:6px 0 0}
.fixed-height .weather{height:var(--frame-height,600px)}.fixed-height .content{overflow:auto}.fixed-height .top{max-height:65%;overflow-y:auto}
.no-animations *, .no-animations *::before, .no-animations *::after{animation:none!important;transition:none!important}
@media(min-width:600px){.top{padding:20px 24px 12px}.location{font-size:22px}.region{font-size:13px}.temp{font-size:70px}.current{justify-content:flex-start;gap:25px}.current .icon{width:105px;height:90px}.landscape{width:calc(100% + 48px);margin-left:-24px;margin-right:-24px;height:35px}.content{padding:18px 24px}.hours-section{margin-bottom:18px}.hour{font-size:12px}.hour b{font-size:17px}.hour .icon{width:40px;height:35px}.days{gap:8px}.day{font-size:13px}.day .icon{width:40px;height:35px}.day strong{font-size:14px}.day small{font-size:12px}.label{font-size:11px}.metrics{display:flex;flex-wrap:wrap;gap:0 20px}.metric{flex:1 1 150px}.trend{font-size:13px}}
@media(max-width:260px){.top{padding-left:10px;padding-right:10px}.content{padding:10px 8px}.landscape{margin-left:-10px;width:calc(100% + 20px)}.temp{font-size:44px}.current .icon{width:64px;height:60px}.trend{font-size:10px;padding:6px 7px}.days{gap:3px}.day strong{font-size:11px}.day small{font-size:10px}.source{font-size:9px}.metric{font-size:11px}.metric dd{font-size:12px}}
.current{flex-wrap:wrap}.current>span{max-width:100%}.temp{overflow-wrap:anywhere}