@font-face{font-family:Weather;src:local("Trebuchet MS");font-display:swap}
:root{--ink:#18324b;--outline:#283d4d;--paper:#fffdf4;--muted:#516b7b;--blue:#2c83c3;--shadow:3px 4px 0 #263c4e1a;color-scheme:light;font-family:Weather,"Trebuchet MS",system-ui,sans-serif;color:var(--ink);background:#f8f3e4}*{box-sizing:border-box}body{margin:0}button,input{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ef9728;outline-offset:3px}button{border:1.5px solid #7e9cac;border-radius:10px;background:#eff6f8;padding:9px 13px;font-weight:700}button:hover{background:#e1eff5}button:disabled{cursor:default;opacity:.5}h1,h2,h3,p{margin:0}h2{font-size:clamp(17px,1.7vw,24px);font-weight:850;letter-spacing:-.6px}h3{font-size:18px}svg{overflow:visible}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.hero{height:300px;max-width:1432px;margin:20px auto 0;position:relative;overflow:hidden;border:2px solid var(--outline);border-radius:24px;box-shadow:var(--shadow);background:#ccecff;isolation:isolate}.header-picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}.hero-title{position:relative;z-index:1;text-align:center;padding:43px 20px 0;text-shadow:0 2px 0 #ffffff,0 0 18px #ffffffb0}.hero h1{font-size:clamp(30px,3.7vw,52px);line-height:1.12;font-weight:950;letter-spacing:-1.8px}.location{font-size:29px;font-weight:850;margin-top:7px}main{max-width:1480px;margin:0 auto;padding:0 24px 25px}.overview-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 3px;font-size:12px;color:var(--muted)}.text-button{font-size:12px;padding:6px 10px;background:transparent}.current-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card{background:var(--paper);border:1.7px solid var(--outline);border-radius:17px;box-shadow:var(--shadow);overflow:hidden}.metric{display:flex;align-items:center;gap:13px;min-height:154px;padding:19px 17px;position:relative}.metric:after{content:"";position:absolute;bottom:0;left:0;right:0;height:7px;background:#8ebd7d66}.metric-icon{width:64px;height:76px;flex-shrink:0}.metric .big{font-size:clamp(25px,2.7vw,39px);font-weight:850;letter-spacing:-1.2px;white-space:nowrap;margin:7px 0}.big span{font-size:16px;letter-spacing:0}.metric p{font-size:12px;line-height:1.5}.temp{background:linear-gradient(120deg,#fff3cb,#fffdf4)}.temp .big{color:#bc4d21}.humidity{background:linear-gradient(120deg,#e1f2ff,#f7fcff)}.wind{background:linear-gradient(120deg,#e5f6ff,#f7fcff)}.pressure{background:linear-gradient(120deg,#eaf3f5,#fffdf4)}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:17px}.wind-detail,.rain-detail{padding:20px 22px 0}.wind-body{display:flex;gap:22px;align-items:center;min-height:205px}.compass{width:45%;max-width:205px;flex-shrink:0}.direction{font-size:25px;font-weight:850;margin:5px 0}.subtle{color:var(--muted);font-size:12px}.wind-mini{display:flex;gap:20px;margin-top:18px;font-size:12px}.wind-mini strong{display:block;margin-top:4px;font-size:19px}.card-foot{font-size:11px;color:var(--muted);padding:11px 0;border-top:1px solid #cbdadf;margin-top:8px;line-height:1.4}.rain-detail{background:linear-gradient(135deg,#fffdf4 10%,#dfedfa)}.rain-body{display:flex;align-items:center;gap:18px;min-height:205px}.rain-art{width:43%;color:#8299ad;text-align:center}.rain-art svg{width:100%;max-height:165px}.rain-status{font-size:12px;font-weight:700;margin-top:3px}.rain-sums{flex:1;display:grid;gap:7px;padding-top:8px}.rain-sums>div{background:#ffffffc9;border:1px solid #b9d4e3;border-radius:9px;padding:8px 12px}.rain-sums span{font-size:12px;display:block}.rain-sums strong{display:block;font-size:27px;letter-spacing:-.8px;margin-top:2px}.rain-sums strong small{font-size:16px}.reason{display:block;color:#85591b;font-size:10px;line-height:1.3}.sun-strip{margin-top:17px;display:flex;justify-content:space-between;align-items:center;padding:12px 30px;background:linear-gradient(#dff1fe,#fff9da);min-height:105px}.sun-time{display:flex;align-items:center;gap:13px}.sun-time svg{width:52px;height:52px}.sun-time span{display:block;font-size:14px;font-weight:700}.sun-time strong{font-size:28px;display:block}.sunset{text-align:right}.sun-path{width:38%;max-width:460px;text-align:center}.sun-path svg{height:65px;width:100%;display:block}.sun-path span{display:block;font-size:11px}.archive{margin-top:18px;padding:22px}.archive-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.eyebrow{color:#356b79;font-size:11px;text-transform:uppercase;letter-spacing:1.3px;font-weight:800}.archive h2{font-size:29px}.periods{display:flex;gap:7px;flex-wrap:wrap}.periods button{font-size:13px}.periods .active{background:#3288c8;border-color:#256396;color:white;box-shadow:0 2px 0 #155079}.history-meta{display:flex;justify-content:space-between;gap:15px;align-items:center;color:var(--muted);font-size:12px;margin:18px 0 10px}.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.chart-card{border:1px solid #cedcdd;border-radius:12px;padding:15px 12px;background:#fffef8;min-width:0}.chart-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.chart-unit{font-size:11px;color:var(--muted)}.chart-wrap{position:relative;margin:10px 0}.chart-svg{width:100%;height:220px;display:block;overflow:hidden;touch-action:pan-y;outline-offset:-3px}.chart-tip{position:absolute;top:3px;left:45px;right:10px;font-size:11px;background:#fffef2f5;border:1px solid #a7bdc4;border-radius:6px;padding:6px;pointer-events:none;z-index:1;line-height:1.5}.legend{display:flex;gap:14px;justify-content:center;font-size:11px;flex-wrap:wrap}.legend b{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}.chart-stats{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.6;text-align:center}.chart-help{font-size:11px;color:var(--muted);line-height:1.6;margin-top:18px}.data-details{font-size:12px;margin-top:12px}summary{cursor:pointer;padding:6px 0}.data-details>div{overflow:auto;max-height:350px}table{border-collapse:collapse;min-width:700px;width:100%;font-size:12px}th,td{padding:8px;text-align:left;border-bottom:1px solid #d1dfe0}th{position:sticky;top:0;background:#e8f2f5}.bottom-grid{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:15px;margin-top:18px}.light{background:linear-gradient(120deg,#fff7d8,#fffdf4)}.uv{background:linear-gradient(120deg,#e5f6ff,#fffdf4)}.station{padding:20px 22px}.station p{font-size:12px;margin-top:9px;line-height:1.4}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;background:#b9c6ca}.dot.good{background:#55af65}.dot.bad{background:#d9823b}footer{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--muted);padding:23px 2px}footer details{flex-basis:100%;line-height:1.7}footer p{max-width:1100px}.banner{margin-top:14px;background:#fff0cf;border:1px solid #d8aa50;border-radius:10px;padding:12px;font-size:13px}#custom-range{display:flex;gap:12px;flex-wrap:wrap;align-items:end;padding:14px 0}#custom-range label{font-size:12px;display:grid;gap:5px}input{border:1px solid #94aab6;border-radius:7px;padding:9px;background:#fff}[hidden]{display:none!important}
@media(min-width:1600px){.chart-svg{height:245px}}
@media(max-width:1100px){.current-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{min-height:130px}.metric .big{font-size:34px}.wind-body{gap:12px}.wind-mini{gap:12px}.direction{font-size:22px}.sun-strip{padding:12px 20px}.sun-time svg{width:40px}.rain-sums strong{font-size:24px}.bottom-grid{grid-template-columns:1fr 1fr}.station{grid-column:1/-1}.chart-svg{height:210px}}
@media(max-width:760px){main{padding:0 13px 15px}.current-grid{gap:10px}.metric{padding:15px 12px;gap:8px;min-height:130px}.metric-icon{width:44px;height:60px}.metric h2{font-size:16px}.metric .big{font-size:29px}.big span{font-size:12px}.metric p{font-size:10px}.detail-grid{grid-template-columns:1fr;gap:13px;margin-top:13px}.wind-detail,.rain-detail{padding:17px 18px 0}.wind-body{justify-content:center;gap:28px}.compass{max-width:180px}.wind-body,.rain-body{min-height:190px}.rain-art svg{max-height:150px}.rain-sums strong{font-size:26px}.sun-strip{margin-top:13px;padding:14px 17px;flex-wrap:wrap;gap:6px}.sun-time{gap:8px}.sun-time span{font-size:12px}.sun-time strong{font-size:25px}.sun-time svg{width:33px;height:33px}.sun-path{order:3;width:100%;max-width:none}.sun-path svg{height:45px}.chart-grid{grid-template-columns:1fr}.archive{padding:17px 12px}.archive h2{font-size:25px}.periods{gap:5px}.periods button{padding:8px 10px;font-size:12px}.chart-svg{height:230px}.overview-head{font-size:10px}.overview-head button{font-size:10px}.history-meta{font-size:10px}.history-meta button{font-size:10px}.bottom-grid{gap:10px}.sun-or-moon{left:12%;width:67px;height:67px;top:40px}.cloud-two{right:5%;width:130px}.cloud-one{width:110px}.cloud-three{display:none}}
@media(max-width:380px){.metric-icon{width:32px}.metric .big{font-size:24px}.metric h2{font-size:14px}.hero h1{font-size:27px}.wind-body{gap:12px}.sun-time svg{display:none}.rain-sums strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.rain-sums strong span{display:inline;font-size:16px;letter-spacing:0}
@media(max-width:900px){.detail-grid,.chart-grid{grid-template-columns:1fr}.wind-body{justify-content:center;gap:35px}.rain-art svg{max-height:170px}}
@media(max-width:480px){.metric{flex-direction:column;align-items:flex-start;gap:4px;padding:13px 14px;min-height:170px}.metric-icon{width:34px;height:34px}.metric h2{font-size:14px;letter-spacing:-.3px}.metric .big{font-size:28px;margin:6px 0}.metric p{font-size:10px}.wind-mini{gap:14px}.wind-body{gap:20px}.sun-time strong{font-size:24px}}

/* Version 1.1: closer to the approved illustrated design; readable at native size. */
:root{--ink:#102d47;--muted:#3d5668;--paper:#fffdf5;--outline:#294055;--shadow:3px 4px 0 #253f5524;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:"Trebuchet MS",system-ui,sans-serif;line-height:1.22}
h2{font-size:24px;letter-spacing:-.6px}h3{font-size:22px;letter-spacing:-.4px}
.card{border-radius:20px;border:2px solid var(--outline)}
.overview-head{font-size:15px;padding:17px 2px;line-height:1.5}.text-button{font-size:14px;padding:9px 12px}
.metric{min-height:165px;padding:20px 18px 38px;gap:15px}.metric>div{position:relative;z-index:1;min-width:0}.metric h2{font-size:21px;letter-spacing:-.6px;overflow-wrap:normal}.metric-icon{width:63px;height:77px;position:relative;z-index:1;filter:drop-shadow(1px 2px 0 #18324b18)}
.metric .big{font-size:40px;line-height:1.15;font-weight:800;letter-spacing:-1.3px;margin:8px 0}.big span{font-size:18px;font-weight:750}.metric p{font-size:14px;line-height:1.5;color:#29445b}
.metric:after{height:32px;background:linear-gradient(to bottom,#fffdf500,#fffdf522),url('landscape.png') center bottom/100% auto no-repeat;opacity:.65;pointer-events:none}
.detail-grid{gap:16px;margin-top:18px}.wind-detail,.rain-detail{padding:20px 20px 0;position:relative}.wind-detail:before{content:"";position:absolute;inset:auto 0 0;height:42px;background:url('landscape.png') center bottom/100% auto no-repeat;opacity:.35;pointer-events:none}.wind-detail>*{position:relative}
.wind-body{min-height:225px;gap:24px}.compass{width:43%;max-width:215px}.direction{font-size:29px;font-weight:850}.subtle{font-size:15px;color:var(--muted)}#degrees{font-size:18px;font-weight:650}.wind-mini{font-size:15px;gap:24px}.wind-mini strong{font-size:23px;line-height:1.35}
.card-foot{font-size:13px;color:#29475a;line-height:1.55;padding:12px 0}.rain-detail{background:#fffdf5}.rain-body{gap:15px;min-height:240px}.rain-art{width:47%;position:relative}.rain-art img{display:block;width:100%;height:185px;object-fit:cover;border-radius:14px}.rain-status{font-size:15px;font-weight:750;line-height:1.4;padding:8px 3px 0;color:#193b54}.rain-sums{padding-top:0;gap:9px}.rain-sums>div{padding:10px 14px;border-radius:12px;background:#eef8ff;border:1px solid #b7d1e1}.rain-sums span{font-size:15px;font-weight:650;line-height:1.35}.rain-sums strong{font-size:32px;line-height:1.15}.rain-sums strong span{font-size:19px;display:inline}.reason{font-size:13px;line-height:1.4}
.sun-strip{min-height:122px;background:linear-gradient(#e4f3ff,#fff9db);position:relative;border-radius:19px;gap:15px}.sun-time span{font-size:17px}.sun-time strong{font-size:31px}.sun-path span{font-size:14px}.sun-path svg{height:72px}.sun-time svg{width:50px;height:50px}
.archive{padding:23px 20px;border-radius:21px}.archive h2{font-size:31px}.eyebrow{font-size:13px;color:#315c70}.periods{gap:8px}.periods button{font-size:16px;padding:10px 14px;border-radius:12px}.history-meta{font-size:14px;line-height:1.55;margin:19px 0 15px;align-items:flex-start}.chart-grid{gap:16px}.chart-card{border:1.5px solid #bdcdd3;border-radius:15px;padding:16px 13px 18px;background:#fffef8}.chart-unit{font-size:15px;color:#254359;font-weight:700}.chart-wrap{margin:18px 0 10px}.chart-svg{display:block;width:100%;height:280px;touch-action:pan-y;overflow:visible}.legend{font-size:15px;font-weight:650;gap:16px;line-height:1.6}.legend b{width:12px;height:12px;margin-right:6px}.chart-stats{font-size:14px;color:#244358;margin-top:10px;line-height:1.75}.chart-tip{font-size:15px;font-weight:650;color:#15344c;line-height:1.6;top:0;left:20px;right:5px;border:1px solid #5e7d90;padding:9px 12px;box-shadow:2px 3px 0 #173a4b20}.chart-help{font-size:14px;line-height:1.65}.data-details{font-size:15px}th,td{font-size:14px}.station{padding:22px}.station p{font-size:15px;line-height:1.6}.station h2{font-size:23px}footer{font-size:14px;line-height:1.65;padding:25px 2px}footer p{font-size:14px}summary{padding:9px 0}.banner{font-size:16px}
@media(max-width:1500px){.hero{margin-left:24px;margin-right:24px}.current-grid .metric{gap:12px}.current-grid .metric h2{font-size:19px}.current-grid .metric .big{font-size:36px}.current-grid .metric-icon{width:55px;height:68px}}
@media(max-width:1100px){.current-grid .metric h2{font-size:22px}.current-grid .metric .big{font-size:40px}.current-grid .metric-icon{width:65px;height:78px}.metric{min-height:167px}.hero{height:275px}.hero-title{padding-top:39px}.hero h1{font-size:43px}.bottom-grid{grid-template-columns:1fr 1fr}.station{grid-column:1/-1}}
@media(max-width:900px){.current-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-grid,.chart-grid{grid-template-columns:1fr}.wind-body{justify-content:center;gap:45px}.wind-detail,.rain-detail{padding:20px 22px 0}.rain-art{width:48%}.rain-art img{height:215px}.rain-body{min-height:260px}.compass{max-width:230px}.current-grid .metric h2{font-size:20px}.current-grid .metric .big{font-size:36px}.current-grid .metric-icon{width:53px}.sun-strip{padding:16px 22px}.sun-time svg{width:40px}.sun-time span{font-size:16px}.archive-head{gap:18px}}
@media(max-width:640px){main{padding:0 12px 20px}.hero{height:260px;margin:12px 12px 0;border-radius:21px}.header-picture{object-fit:cover;object-position:47% center}.hero-title{padding:36px 22px 0}.hero h1{font-size:34px;letter-spacing:-1px;text-wrap:balance}.location{font-size:25px;margin-top:8px}.overview-head{font-size:13px;align-items:flex-start;gap:12px}.overview-head button{font-size:13px;flex-shrink:0}.current-grid{gap:12px}.current-grid .metric{padding:20px 16px 36px;min-height:175px;gap:8px;flex-direction:column;align-items:flex-start}.current-grid .metric-icon{width:38px;height:38px}.current-grid .metric h2{font-size:17px;letter-spacing:-.6px}.current-grid .metric .big{font-size:32px}.metric p{font-size:14px}.big span{font-size:16px}.detail-grid{gap:15px}.direction{font-size:27px}.wind-body{gap:23px;min-height:235px}.compass{width:44%}.wind-mini{display:block;margin-top:14px}.wind-mini span{display:block;margin-top:8px}.wind-mini strong{display:inline;margin-left:6px;font-size:20px}.rain-art{width:43%}.rain-art img{height:180px}.rain-sums>div{padding:10px 12px}.rain-sums span{font-size:14px}.rain-sums strong{font-size:30px}.sun-time span{font-size:15px}.sun-time strong{font-size:29px}.sun-path{width:100%;order:3;max-width:none}.sun-time svg{display:none}.sun-strip{padding:16px 20px}.sun-path svg{height:54px}.sun-path span{font-size:14px}.archive{padding:20px 12px}.archive h2{font-size:28px}.chart-head{align-items:flex-start}.chart-head h3{font-size:21px}.chart-unit{font-size:14px}.chart-card{padding:17px 12px}.history-meta{font-size:14px;flex-direction:column;gap:8px}.periods button{font-size:15px;padding:10px 12px}.legend{font-size:14px;gap:14px}.chart-stats{font-size:14px;text-align:left}.chart-tip{font-size:14px;left:0}.chart-help{font-size:14px}.bottom-grid{grid-template-columns:1fr}.bottom-grid .metric{flex-direction:row;align-items:center;gap:18px;min-height:150px}.bottom-grid .metric-icon{width:60px;height:70px}.bottom-grid .metric h2{font-size:22px}.bottom-grid .metric .big{font-size:36px}.station{grid-column:auto}#custom-range{gap:14px}#custom-range label,#custom-range input,#custom-range button{font-size:16px}#custom-range label{width:100%}input{width:100%}}
@media(max-width:420px){.current-grid{grid-template-columns:1fr}.current-grid .metric{flex-direction:row;align-items:center;gap:18px;min-height:149px;padding:20px 20px 38px}.current-grid .metric-icon{width:61px;height:74px}.current-grid .metric h2{font-size:22px}.current-grid .metric .big{font-size:39px}.current-grid .metric p{font-size:15px}.hero h1{font-size:31px}.hero-title{padding-top:39px}.rain-body{gap:10px}.rain-art{width:39%}.rain-art img{height:155px}.rain-status{font-size:14px}.rain-sums{min-width:0}.rain-sums strong{font-size:29px}.wind-detail,.rain-detail{padding:18px 16px 0}.wind-body{gap:14px}.wind-mini strong{display:block;margin-left:0}.direction{font-size:24px}.sun-strip{padding:15px}.sun-time span{font-size:14px}.sun-time strong{font-size:27px}.chart-card{padding-left:9px;padding-right:9px}.chart-head h3{font-size:20px}.overview-head button{font-size:12px}.card-foot{font-size:13px}}
.scene-frame{position:relative;overflow:hidden;border-radius:15px;background:#fffdf5}.rain-art .scene-frame img{border-radius:15px;display:block;width:100%;object-fit:cover;transform:scale(1.015);transition:filter 1s}.scene-frame[data-scene=night] img{filter:brightness(.52) saturate(.65)}.scene-note{font-size:13px;color:#365267;line-height:1.45;margin-top:5px}.scene-toggle{font-size:13px;padding:7px 10px;margin-top:8px;border-radius:9px;background:#fffdf3}.scene-frame.motion img{animation:scene-breathe 18s ease-in-out infinite alternate}.scene-frame[data-scene=unknown] img{filter:saturate(.65)}.scene-rain{display:none;position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,transparent 0 35px,#5d9bd559 36px 37px,transparent 38px 70px);background-size:70px 100px;opacity:.22}.scene-frame[data-scene=rain].motion .scene-rain{display:block;animation:scene-rainfall 1.5s linear infinite}@keyframes scene-breathe{to{transform:scale(1.045) translateX(1%)}}@keyframes scene-rainfall{to{background-position:-40px 100px}}@media(prefers-reduced-motion:reduce){.scene-frame.motion img,.scene-rain{animation:none!important}.scene-rain{display:none!important}}
/* Version 1.2: quiet cards, full mobile composition, optional clear dashboard. */
.metric:after,.wind-detail:before{display:none!important}
.metric,.current-grid .metric{padding-bottom:22px}
.view-nav{max-width:1432px;margin:18px auto 0;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:15px;font-weight:750;color:#24475f}
.view-tabs{display:flex;gap:3px;background:#e4edf2;border:1px solid #9ab1c0;border-radius:14px;padding:4px;flex-shrink:0}
.view-tabs a{color:#234358;text-decoration:none;padding:9px 20px;border-radius:10px;line-height:1.4;min-width:82px;text-align:center}
.view-tabs a[aria-current=page]{background:#287fb9;color:white;box-shadow:0 1px 3px #204b7733}
.view-tabs a:focus-visible{outline:3px solid #ec9933;outline-offset:2px}
.comic-view .hero{margin-top:14px}
.clear-view{background:#eef2f6;color:#152b3e}
.clear-view .hero{background:#fff;border:1px solid #d5dee6;border-radius:17px;box-shadow:0 3px 12px #263c4e09;height:auto;min-height:132px;margin-top:15px}
.clear-view .hero-title{text-align:left;padding:26px 29px;text-shadow:none}
.clear-view .hero h1{font:750 32px/1.2 system-ui,sans-serif;letter-spacing:-1px}
.clear-view .location{font:500 17px/1.5 system-ui,sans-serif;margin-top:7px;color:#526a7c}
.clear-view .card{background:white;border:1px solid #d0dbe5;border-radius:16px;box-shadow:0 3px 12px #203d5508}
.clear-view h1,.clear-view h2,.clear-view h3{font-family:system-ui,sans-serif}
.clear-view h2{font-size:22px;letter-spacing:-.4px}.clear-view h3{font-size:21px;letter-spacing:-.4px}
.clear-view .metric,.clear-view .current-grid .metric{min-height:150px;background:#fff;gap:0;padding:23px}
.clear-view .metric-icon{display:none}
.clear-view .metric .big{font-size:40px;font-variant-numeric:tabular-nums;color:#163e60}
.clear-view .metric p{color:#4a6376}
.clear-view .current-grid .temp{border-top:4px solid #e3a16a}.clear-view .current-grid .humidity{border-top:4px solid #60a6d6}.clear-view .current-grid .wind{border-top:4px solid #66b4ad}.clear-view .current-grid .pressure{border-top:4px solid #a4a0d4}
.clear-view .archive{background:#fff}.clear-view .chart-card{background:#fff;border-color:#d8e1e8}.clear-view .periods button{border:1px solid #b8cbd8;border-radius:9px;background:#f4f7fa}.clear-view .periods .active{background:#245e8a;color:white;box-shadow:none}
.clear-view .rain-art{display:none}.clear-view .rain-body{min-height:215px}.clear-view .rain-sums{width:100%;gap:11px}.clear-view .rain-sums>div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px;background:#f4f8fc;border:1px solid #e0e8ef}.clear-view .rain-sums strong{font-size:29px}.clear-view .reason{grid-column:1/-1}
.clear-view .sun-strip{background:#fff}.clear-view .eyebrow{color:#62788a}.clear-view .view-tabs a[aria-current=page]{background:#245e8a}.clear-view .text-button{border-color:#bccdd8}
@media(max-width:1500px){.view-nav{margin-left:24px;margin-right:24px}}
@media(max-width:900px){.clear-view .rain-body{min-height:0;padding-top:17px}.clear-view .rain-sums{grid-template-columns:repeat(3,1fr)}.clear-view .rain-sums>div{display:block}.clear-view .rain-sums span{font-size:15px}.clear-view .rain-sums strong{font-size:29px;margin-top:12px}.clear-view .wind-body{min-height:200px}.clear-view .hero h1{font-size:30px}}
@media(max-width:640px){.view-nav{margin:12px 12px 0;font-size:14px;gap:10px}.nav-location{display:none}.view-tabs a{padding:8px 15px;min-width:72px}.comic-view .hero{height:auto;aspect-ratio:4/3;margin:12px 12px 0}.comic-view .header-picture{object-fit:fill;object-position:center}.comic-view .hero-title{padding:22px 45px 0}.comic-view .hero h1{font-size:clamp(25px,6.3vw,35px);line-height:1.12;letter-spacing:-.8px;text-wrap:balance}.comic-view .location{font-size:22px;margin-top:8px}.current-grid .metric{padding-bottom:20px}.clear-view .hero{min-height:0;margin-top:12px}.clear-view .hero-title{padding:22px}.clear-view .hero h1{font-size:28px}.clear-view .location{font-size:16px}.clear-view .current-grid .metric{min-height:140px;flex-direction:row;align-items:center;padding:20px}.clear-view .current-grid .metric h2{font-size:20px}.clear-view .current-grid .metric .big{font-size:36px}.clear-view .rain-sums{grid-template-columns:1fr}.clear-view .rain-sums>div{display:grid;grid-template-columns:1fr auto}.clear-view .rain-sums strong{margin:0}.clear-view .bottom-grid .metric{min-height:130px}}
/* Compact header: illustration is a restrained thumbnail, not a full-width hero. */
.comic-view .hero{height:158px;min-height:0;aspect-ratio:auto;background:linear-gradient(110deg,#fffdf5,#eef6fa);margin-top:12px}
.comic-view .hero picture{position:absolute;right:14px;top:14px;bottom:14px;width:34%;border-radius:13px;overflow:hidden;background:#e5f2f8}
.comic-view .header-picture{position:static;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.comic-view .hero-title{padding:29px 28px;max-width:66%;margin:0;text-align:left;text-shadow:none}
.comic-view .hero h1{font-size:32px;line-height:1.15;letter-spacing:-.8px;text-wrap:balance}
.comic-view .location{font-size:21px;margin-top:7px;color:#3f6076}
@media(max-width:900px){.comic-view .hero{height:146px}.comic-view .hero-title{padding:27px 23px;max-width:65%}.comic-view .hero h1{font-size:28px}.comic-view .hero picture{width:32%}}
@media(max-width:640px){.comic-view .hero{height:142px;border-radius:18px}.comic-view .hero-title{padding:23px 17px;max-width:65%}.comic-view .hero h1{font-size:24px;line-height:1.15;letter-spacing:-.6px}.comic-view .location{font-size:17px;margin-top:8px}.comic-view .hero picture{width:31%;top:12px;right:12px;bottom:12px;border-radius:11px}.comic-view .header-picture{object-fit:contain;background:#f2f7f8}}
@media(max-width:360px){.comic-view .hero h1{font-size:21px}.comic-view .hero-title{padding:25px 14px}}
/* Version 1.3: light/dark themes shared by Comic and Klar, with device persistence. */
.nav-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.theme-toggle{background:#fffdf5;border:1px solid #91a9ba;border-radius:12px;font-size:15px;padding:11px 14px;min-width:100px;white-space:nowrap}
html[data-theme=dark]{color-scheme:dark;--ink:#e5eff7;--outline:#67839a;--paper:#1c2c3a;--muted:#b4c7d6;--shadow:3px 4px 0 #00000035;background:#101d29;color:#e5eff7}
html[data-theme=dark] body,html[data-theme=dark] .clear-view{background:#101d29;color:#e5eff7}
html[data-theme=dark] h1,html[data-theme=dark] h2,html[data-theme=dark] h3{color:#f0f6fc}
html[data-theme=dark] .view-nav{color:#dcebf6}
html[data-theme=dark] .view-tabs{background:#1d3040;border-color:#5d7a91}
html[data-theme=dark] .view-tabs a{color:#dceaf5}
html[data-theme=dark] .view-tabs a[aria-current=page]{background:#3c83b4;color:#fff}
html[data-theme=dark] button,html[data-theme=dark] .text-button,html[data-theme=dark] .theme-toggle,html[data-theme=dark] .scene-toggle,html[data-theme=dark] .clear-view .periods button{background:#233b4e;border-color:#6c8ba2;color:#e6f1f9}
html[data-theme=dark] button:hover{background:#304e64}
html[data-theme=dark] .periods .active,html[data-theme=dark] .clear-view .periods .active{background:#337eaf;color:#fff;border-color:#85b7da}
html[data-theme=dark] .comic-view .hero,html[data-theme=dark] .clear-view .hero{background:linear-gradient(110deg,#1c2d3c,#223e52);border-color:#668299;box-shadow:0 3px 12px #0002}
html[data-theme=dark] .comic-view .location,html[data-theme=dark] .clear-view .location{color:#b9cddd}
html[data-theme=dark] .comic-view .hero picture,html[data-theme=dark] .comic-view .header-picture{background:#203848}
html[data-theme=dark] .header-picture{filter:brightness(.86)}
html[data-theme=dark] .card,html[data-theme=dark] .clear-view .card{background:#1b2b39;border-color:#607d93;box-shadow:var(--shadow)}
html[data-theme=dark] .temp{background:linear-gradient(120deg,#3b3024,#242b31)}
html[data-theme=dark] .humidity{background:linear-gradient(120deg,#1b3a50,#1d2e3e)}
html[data-theme=dark] .wind{background:linear-gradient(120deg,#183a49,#1d2e3e)}
html[data-theme=dark] .pressure{background:linear-gradient(120deg,#2c3549,#1d2e3e)}
html[data-theme=dark] .light,html[data-theme=dark] .uv{background:linear-gradient(120deg,#30382f,#1d2e3e)}
html[data-theme=dark] .metric .big,html[data-theme=dark] .clear-view .metric .big{color:#f2f7fb}
html[data-theme=dark] .temp .big{color:#ffb479}
html[data-theme=dark] .metric p,html[data-theme=dark] .clear-view .metric p,html[data-theme=dark] .subtle,html[data-theme=dark] .overview-head,html[data-theme=dark] .card-foot,html[data-theme=dark] .history-meta,html[data-theme=dark] .scene-note,html[data-theme=dark] .chart-help,html[data-theme=dark] footer,html[data-theme=dark] .chart-stats,html[data-theme=dark] .chart-unit{color:#b9cddd}
html[data-theme=dark] .card-foot{border-color:#476174}
html[data-theme=dark] .clear-view .metric{background:#1b2b39}
html[data-theme=dark] .rain-detail,html[data-theme=dark] .clear-view .archive{background:#1b2b39}
html[data-theme=dark] .rain-sums>div,html[data-theme=dark] .clear-view .rain-sums>div{background:#223c50;border-color:#53768d;color:#e7f2fa}
html[data-theme=dark] .rain-status{color:#e5f0f8}
html[data-theme=dark] .scene-frame{background:#253c4b}
html[data-theme=dark] .scene-frame img{filter:brightness(.78)}
html[data-theme=dark] .scene-frame[data-scene=night] img{filter:brightness(.48) saturate(.65)}
html[data-theme=dark] .reason{color:#ffd394}
html[data-theme=dark] .sun-strip,html[data-theme=dark] .clear-view .sun-strip{background:linear-gradient(#203e54,#2d3840)}
html[data-theme=dark] .eyebrow,html[data-theme=dark] .clear-view .eyebrow{color:#9bc5d8}
html[data-theme=dark] .chart-card,html[data-theme=dark] .clear-view .chart-card{background:#172735;border-color:#4c697e}
html[data-theme=dark] .chart-svg text{fill:#d6e6f2}
html[data-theme=dark] .chart-svg line{stroke:#4c6578}
html[data-theme=dark] .chart-tip{background:#203a4f;color:#f1f7fc;border-color:#89a9bf;box-shadow:2px 3px 0 #0004}
html[data-theme=dark] .chart-card .legend{color:#d8e8f4}
html[data-theme=dark] .compass>circle:first-child{fill:#253f52;stroke:#8fabbf}
html[data-theme=dark] .compass>path{fill:#3f6179;stroke:#83a6bd}
html[data-theme=dark] .compass text{fill:#e3f0f9}
html[data-theme=dark] input{background:#20394c;color:#edf5fb;border-color:#7696ad}
html[data-theme=dark] th{background:#274257;color:#ecf4fa}
html[data-theme=dark] th,html[data-theme=dark] td{border-color:#476478}
html[data-theme=dark] .banner{background:#473b25;color:#ffe4ab;border-color:#ac8b51}
@media(max-width:640px){.view-nav{flex-wrap:wrap;align-items:center}.nav-controls{gap:7px}.theme-toggle{font-size:14px;padding:10px 11px;min-width:88px}.view-tabs a{min-width:65px;padding:8px 12px}}
@media(max-width:420px){.view-nav>span{flex-basis:100%;font-size:14px}.nav-controls{width:100%;justify-content:space-between}.view-tabs{flex:1}.view-tabs a{flex:1}}