:root{color-scheme:dark;--s:min(1vw,1.7dvh,20px);--accent:#56d69b;--cream:#f1cf90;font-family:Inter,"Segoe UI",Arial,sans-serif;color:#f6f5f1;background:#111518}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 30%,#6e22221c,transparent 55%),repeating-linear-gradient(135deg,transparent 0 16px,#ffffff05 17px 19px,transparent 20px 38px),repeating-linear-gradient(45deg,#161a1d 0 16px,#ffffff06 17px 19px,#161a1d 20px 38px)}main{max-width:2100px;margin:auto;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:calc(var(--s)*1.05);padding:calc(var(--s)*1.2) calc(var(--s)*1.8)}header{display:flex;align-items:center;gap:calc(var(--s)*1.1);min-width:0}header img{width:calc(var(--s)*5.4);height:calc(var(--s)*5.4);object-fit:contain}.eyebrow{font-size:calc(var(--s)*.7);color:#bac1c6;letter-spacing:calc(var(--s)*.15);font-weight:700;margin:0 0 calc(var(--s)*.35)}h1{font-size:calc(var(--s)*2.65);letter-spacing:-1px;margin:0}h1 span{font-weight:300;color:#ccd0d2}.clock{margin-left:auto;text-align:right}.clock strong{font-size:calc(var(--s)*2);font-variant-numeric:tabular-nums}.clock p{font-size:calc(var(--s)*.82);color:#b5bcc0;margin:5px 0 0}select{color:#c2c7ca;background:#22292d;border:1px solid #ffffff24;border-radius:5px;padding:6px;font-size:calc(var(--s)*.7);max-width:21vw;margin-left:calc(var(--s)*1.2)}.layout{display:grid;grid-template-columns:29% minmax(0,1fr);gap:calc(var(--s)*1.3);min-height:0}.panel,.tile{border:1px solid #ffffff23;border-radius:calc(var(--s)*.8);box-shadow:0 8px 20px #0003;min-width:0;min-height:0}.current{background:radial-gradient(ellipse at 50% 20%,#b03b3060,transparent 70%),linear-gradient(145deg,#7c201c,#431819 75%);border-top:3px solid #d1594b;padding:calc(var(--s)*1.6);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.current:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,transparent 0 24px,#ffffff03 25px 28px,transparent 29px 50px)}.current>*{z-index:1}.current .eyebrow{color:#efb3a6}.current h2#location{font-size:calc(var(--s)*1.35);font-weight:500;line-height:1.35;margin:0}.weather-hero{text-align:center;margin:calc(var(--s)*.6) 0}#icon{height:calc(var(--s)*7);color:var(--cream)}#icon svg{height:100%;width:100%}#temp{font-size:calc(var(--s)*7);font-weight:600;letter-spacing:calc(var(--s)*-.3);display:block;line-height:1.15;margin-top:calc(var(--s)*.8)}#condition{font-size:calc(var(--s)*1.7);margin:calc(var(--s)*.5) 0}.unit-label{font-size:calc(var(--s)*.6);letter-spacing:3px;color:#ddb1a8;margin:0}.red-rule{height:1px;background:#ffffff35;margin-bottom:calc(var(--s)*.8)}#address{font-size:calc(var(--s)*.85);line-height:1.4;margin:0 0 calc(var(--s)*.8);color:#efd8d2}.model-label{font-size:calc(var(--s)*.54);letter-spacing:1.2px;color:#d4aaa2;margin:0}.weather-detail{display:grid;grid-template-rows:minmax(0,.9fr) minmax(0,1.55fr);gap:calc(var(--s)*1.1);min-height:0}.forecast{background:linear-gradient(110deg,#352728,#25272a);padding:calc(var(--s)*1.2);display:flex;flex-direction:column}.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:12px}.sectionhead h2{font-size:calc(var(--s)*1.1);margin:0;font-weight:600}.sectionhead>span{font-size:calc(var(--s)*.57);letter-spacing:1.2px;color:#b6bdc2}.hours{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));flex:1;align-items:center;margin-top:calc(var(--s)*.6)}.hour{text-align:center;border-right:1px solid #ffffff12;min-width:0}.hour:last-child{border:0}.hour p{font-size:calc(var(--s)*.78);white-space:nowrap;color:#d4d0cd;margin:0 0 calc(var(--s)*.5)}.symbol{height:calc(var(--s)*3.2);color:#f6ddad;margin-bottom:calc(var(--s)*.5)}.symbol svg{height:100%;max-width:100%}.hour b{font-size:calc(var(--s)*1.55);font-weight:600}.hour small{display:block;font-size:calc(var(--s)*.65);color:#8ebedc;margin-top:calc(var(--s)*.4)}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:calc(var(--s)*.9);min-height:0}.tile{position:relative;overflow:hidden;background:linear-gradient(125deg,#3c2929,#252a2e);padding:calc(var(--s)*1.05);display:flex;flex-direction:column;justify-content:space-between}.tile-label{display:flex;justify-content:space-between;align-items:center;font-size:calc(var(--s)*.65);letter-spacing:calc(var(--s)*.1);color:#d6bfb9;margin:0}.tile-label span{font-size:calc(var(--s)*1);color:#d17a68}.tile b{font-size:calc(var(--s)*2.1);font-weight:500;line-height:1.15;z-index:1}.tile small{font-size:calc(var(--s)*.65);color:#b9b9b7;z-index:1}.meter{height:calc(var(--s)*.22);background:#ffffff12;border-radius:10px;overflow:hidden}.meter i{display:block;height:100%;background:linear-gradient(90deg,#deac76,#d25a46);width:0;border-radius:10px}.precipitation .meter i{background:linear-gradient(90deg,#8bbcd3,#548ca9)}.wind-row{display:flex;align-items:center;gap:8px;justify-content:space-between}.wind-row b{font-size:calc(var(--s)*1.45)}.compass{width:calc(var(--s)*3.6);height:calc(var(--s)*3.6);border:1px dashed #bd887977;border-radius:50%;position:relative;flex-shrink:0;display:grid;place-items:center}.compass span{position:absolute;top:-6px;font-size:calc(var(--s)*.55);background:#34282a;padding:0 3px;color:#dbc2b1}.compass i{font-size:calc(var(--s)*2.4);font-style:normal;line-height:1;color:var(--cream)}.sun-arc{width:100%;height:calc(var(--s)*3.6);overflow:visible}.sun-times{display:flex;justify-content:space-between}.sun-times>div:last-child{text-align:right}.sun-times small{display:block;font-size:calc(var(--s)*.47);letter-spacing:1px}.sun-times b{font-size:calc(var(--s)*.95);display:block;margin-top:2px}.range b{font-size:calc(var(--s)*1.3)}.temperature-track{height:calc(var(--s)*.22);border-radius:10px;background:linear-gradient(90deg,#7bb3d3,#ecc686,#cc6354)}.tile-decoration{position:absolute;right:calc(var(--s)*.5);bottom:calc(var(--s)*-2.2);font-size:calc(var(--s)*10);line-height:1;color:#ffffff05;pointer-events:none}.alerts{background:linear-gradient(110deg,#242d2b,#1e2529);border-left:5px solid var(--accent);padding:calc(var(--s)*.8) calc(var(--s)*1.1);max-height:24dvh;display:flex;flex-direction:column}#statusTitle{color:var(--accent);font-size:calc(var(--s)*1)}#alerts{min-height:0;overflow:auto;font-size:calc(var(--s)*.85);line-height:1.4}#alerts:empty{display:none}.alert{padding-left:12px;border-left:3px solid var(--accent);margin:calc(var(--s)*.65) 0 0}.alert strong{font-size:calc(var(--s)*1.1)}.alert p{white-space:pre-line;margin:4px 0}.alert details{font-size:calc(var(--s)*.8)}.alert summary{cursor:pointer}footer{display:flex;justify-content:space-between;gap:10px;font-size:clamp(10px,calc(var(--s)*.6),14px);color:#9da5a9}a{color:inherit}.warning .alerts{background:linear-gradient(110deg,#472525,#292428)}
@media(min-width:901px) and (min-height:480px){html,body{height:100%;overflow:hidden}}
@media(max-width:900px){:root{--s:clamp(10px,1.8vw,16px)}main{height:auto;min-height:100dvh;padding:16px;gap:16px;display:flex;flex-direction:column}header{flex-wrap:wrap}header img{width:60px;height:60px}header .eyebrow{font-size:9px}h1{font-size:30px}.clock strong{font-size:22px}.clock p{font-size:11px}select{max-width:100%;margin-left:0;font-size:12px}.layout{grid-template-columns:1fr;gap:16px}.current{min-height:360px;padding:24px}.weather-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:440px;width:100%;margin:16px auto}#icon{height:90px}#temp{font-size:90px;margin:0}#condition{grid-column:1/-1;font-size:26px}.unit-label{grid-column:1/-1}.current h2#location{font-size:20px}#address{font-size:13px}.weather-detail{display:flex;flex-direction:column;gap:16px}.forecast{padding:16px;min-height:190px}.sectionhead{flex-wrap:wrap}.sectionhead h2{font-size:18px}.sectionhead>span{font-size:9px}.hour p{font-size:11px}.hour b{font-size:22px}.hour small{font-size:10px}.symbol{height:36px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:170px;grid-template-rows:none;gap:12px}.tile{padding:16px}.tile-label{font-size:10px}.tile b{font-size:28px}.tile small{font-size:11px}.wind-row b,.range b{font-size:20px}.sun-times b{font-size:13px}.sun-times small{font-size:8px}.alerts{padding:14px;max-height:none}#statusTitle{font-size:16px}#alerts,.alert details{font-size:14px}.alert strong{font-size:18px}footer{flex-wrap:wrap;font-size:10px}}
@media(max-width:550px){.clock{margin-left:0;text-align:left}select{margin-left:auto;max-width:190px}.brand{flex:1}.hours{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 0}.forecast{min-height:320px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.tile-label span{font-size:16px}.sun-arc{height:40px}.compass{width:42px;height:42px}.compass i{font-size:30px}.compass span{font-size:8px}.model-label{font-size:8px}}
@media(min-width:901px) and (max-height:479px){main{height:auto;min-height:100dvh}.layout{min-height:550px}.alerts{max-height:none}}

/* Larger display numerals and raised diamond-plate steel. */
body{background-color:#202528;background-image:radial-gradient(ellipse at 40% 15%,#00000008,#00000077),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2272%22%20height%3D%2272%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22metal%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%2362686b%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23343a3e%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%231b2024%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23090d10%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22url%28%23metal%29%22%20stroke%3D%22%23080b0d%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M-15-3%20Q0-8%2015-3%20Q18%200%2015%203%20Q0%208-15%203%20Q-18%200-15-3Z%22%20transform%3D%22translate%2818%2018%29%20rotate%28-45%29%22%2F%3E%3Cpath%20d%3D%22M-15-3%20Q0-8%2015-3%20Q18%200%2015%203%20Q0%208-15%203%20Q-18%200-15-3Z%22%20transform%3D%22translate%2854%2018%29%20rotate%2845%29%22%2F%3E%3Cpath%20d%3D%22M-15-3%20Q0-8%2015-3%20Q18%200%2015%203%20Q0%208-15%203%20Q-18%200-15-3Z%22%20transform%3D%22translate%2818%2054%29%20rotate%2845%29%22%2F%3E%3Cpath%20d%3D%22M-15-3%20Q0-8%2015-3%20Q18%200%2015%203%20Q0%208-15%203%20Q-18%200-15-3Z%22%20transform%3D%22translate%2854%2054%29%20rotate%28-45%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:100% 100%,72px 72px}
.current:after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2272%22%20height%3D%2272%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22metal%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%2362686b%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23343a3e%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%231b2024%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23090d10%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22url%28%23metal%29%22%20stroke%3D%22%23080b0d%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M-15-3%20Q0-8%2015-3%20Q18%200%2015%203%20Q0%208-15%203%20Q-18%200-15-3Z%22%20transform%3D%22translate%2818%2018%29%20rotate%28-45%29%22%2F%3E%3Cpath%20d%3D%22M-15-3%20Q0-8%2015-3%20Q18%200%2015%203%20Q0%208-15%203%20Q-18%200-15-3Z%22%20transform%3D%22translate%2854%2018%29%20rotate%2845%29%22%2F%3E%3Cpath%20d%3D%22M-15-3%20Q0-8%2015-3%20Q18%200%2015%203%20Q0%208-15%203%20Q-18%200-15-3Z%22%20transform%3D%22translate%2818%2054%29%20rotate%2845%29%22%2F%3E%3Cpath%20d%3D%22M-15-3%20Q0-8%2015-3%20Q18%200%2015%203%20Q0%208-15%203%20Q-18%200-15-3Z%22%20transform%3D%22translate%2854%2054%29%20rotate%28-45%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:72px 72px;opacity:.16}
#temp{font-size:calc(var(--s)*8.5)}
.wind-row b{font-size:calc(var(--s)*2.5);font-weight:600;white-space:nowrap}
.feels #feels{font-size:calc(var(--s)*2.8);font-weight:600}
@media(max-width:900px){#temp{font-size:104px}.wind-row b{font-size:30px}.feels #feels{font-size:38px}}
@media(max-width:380px){.wind-row b{font-size:26px}}
@media(max-width:550px){.wind-row{flex-wrap:wrap;row-gap:4px}.wind-row b{font-size:28px}.compass{width:30px;height:30px}.compass i{font-size:24px}}
