/* Immersive weather atmospheres. Root attributes are server-validated enums. */
:root { color-scheme:dark; --sky-top:#5c6c7c; --sky-bottom:#465c70; --glass:rgba(30,54,76,.35); --glass-edge:rgba(223,236,247,.07); --muted:#dfe8f1; --precip-opacity:.22; --precip-gap:26px; --precip-repeat:52px; --snow-opacity:.32; }
html[data-weather="sunny"] { --sky-top:#18578e; --sky-bottom:#97afc4; --glass:rgba(28,83,135,.28); --glass-edge:rgba(230,241,252,.06); }
html[data-weather="sunny"][data-daypart="unknown"] { --sky-top:#5c6c7c; --sky-bottom:#465c70; --glass:rgba(30,54,76,.35); --glass-edge:rgba(223,236,247,.07); }
html[data-weather="cloudy"] { --sky-top:#6e7a87; --sky-bottom:#4b5f72; --glass:rgba(33,49,68,.32); }
html[data-weather="overcast"] { --sky-top:#616f7d; --sky-bottom:#43515f; --glass:rgba(30,43,57,.42); }
html[data-weather="thunder"] { --sky-top:#344356; --sky-bottom:#202c3b; --glass:rgba(15,25,38,.58); }
html[data-weather="snow"] { --sky-top:#7794aa; --sky-bottom:#50677a; --glass:rgba(34,57,76,.34); }
html[data-weather="sleet"] { --sky-top:#53697b; --sky-bottom:#354959; --glass:rgba(24,42,59,.48); }
html[data-weather="fog"] { --sky-top:#849399; --sky-bottom:#5f7079; --glass:rgba(43,57,66,.40); }
html[data-weather="haze"] { --sky-top:#938e79; --sky-bottom:#655d50; --glass:rgba(59,50,39,.42); }
html[data-weather="dust"] { --sky-top:#9a7554; --sky-bottom:#624a36; --glass:rgba(57,41,27,.52); }
html[data-weather="windy"] { --sky-top:#637b8e; --sky-bottom:#40586c; --glass:rgba(25,45,64,.40); }
html[data-weather="freezing"] { --sky-top:#627f98; --sky-bottom:#40566d; --glass:rgba(24,42,61,.48); }
html[data-weather="hail"] { --sky-top:#536f86; --sky-bottom:#334a60; --glass:rgba(18,34,51,.54); }
html[data-weather="rain"],html[data-weather="thunder"],html[data-weather="sleet"],html[data-weather="freezing"],html[data-weather="hail"] { --precip-opacity:.22; }
html[data-intensity="light"] { --precip-opacity:.12; --precip-gap:36px; --precip-repeat:72px; --snow-opacity:.20; }
html[data-intensity="moderate"] { --precip-opacity:.22; --precip-gap:26px; --precip-repeat:52px; --snow-opacity:.34; }
html[data-intensity="heavy"] { --precip-opacity:.34; --precip-gap:17px; --precip-repeat:34px; --snow-opacity:.52; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:#fff; font:16px/1.45 -apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; background:var(--sky-bottom); -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid #fff; outline-offset:4px; }
a { color:inherit; text-decoration:none; }
button { color:inherit; }
svg { width:24px; height:24px; display:block; flex:none; }
[hidden] { display:none!important; }
.symbol-library { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sky { position:fixed; inset:0; z-index:-2; pointer-events:none; background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 100%); }
.sky::before { content:""; position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; }
.sky::after { content:""; position:absolute; inset:0; z-index:4; background:linear-gradient(180deg,rgba(16,33,52,.08),rgba(41,59,78,.12) 48%,transparent); }
.sky-photo { position:absolute; inset:0; z-index:0; background:url('/sky-clouds.jpg') center 22%/cover no-repeat; filter:grayscale(.78) contrast(.72) brightness(1.05); opacity:.78; mask-image:linear-gradient(#000 0%,#000 27%,rgba(0,0,0,.75) 42%,transparent 79%); }
html[data-weather="sunny"] .sky-photo { opacity:0; }
html[data-weather="overcast"] .sky-photo { filter:grayscale(.88) contrast(.48) brightness(1.02); opacity:.96; }
html[data-weather="rain"] .sky-photo { filter:grayscale(.86) contrast(.66) brightness(.93); opacity:.78; background-position:55% 18%; }
html[data-weather="thunder"] .sky-photo { filter:grayscale(.94) contrast(.72) brightness(.58); opacity:.92; }
html[data-weather="snow"] .sky-photo { filter:grayscale(.8) contrast(.58) brightness(1.24); opacity:.75; }
html[data-weather="sleet"] .sky-photo { filter:grayscale(.9) contrast(.68) brightness(.78); opacity:.84; }
html[data-weather="fog"] .sky-photo { filter:grayscale(.82) contrast(.36) brightness(1.3); opacity:.36; }
html[data-weather="haze"] .sky-photo { filter:grayscale(.68) sepia(.18) contrast(.56) brightness(1.04); opacity:.67; }
html[data-weather="dust"] .sky-photo { filter:grayscale(.5) sepia(.52) saturate(.62) contrast(.72) brightness(.82); opacity:.82; }
html[data-weather="windy"] .sky-photo { filter:grayscale(.66) contrast(.82) brightness(1.08); opacity:.72; }
html[data-weather="freezing"] .sky-photo { filter:grayscale(.88) hue-rotate(8deg) contrast(.64) brightness(.93); opacity:.78; }
html[data-weather="hail"] .sky-photo { filter:grayscale(.9) contrast(.86) brightness(.72); opacity:.9; }
html[data-weather="fog"] .sky::before { opacity:.76; background:linear-gradient(176deg,transparent 20%,rgba(232,239,242,.58) 42%,rgba(220,231,235,.42) 61%,transparent 82%); filter:blur(22px); }
html[data-weather="haze"] .sky::before { opacity:.64; background:linear-gradient(180deg,rgba(233,215,181,.28),transparent 48%,rgba(181,155,113,.22)); }
html[data-weather="dust"] .sky::before { opacity:.68; background:linear-gradient(180deg,rgba(235,192,133,.34),transparent 44%,rgba(122,83,47,.3)); }
html[data-weather="sunny"][data-daypart="unknown"] .sun-bloom { opacity:0; }
.sun-bloom { position:absolute; z-index:2; width:min(140vw,1000px); aspect-ratio:1; top:-10vh; right:-75%; background:radial-gradient(circle,#fffef4 0% 6%,#fffbeae6 9%,#f6f2df99 16%,#dceaf05c 27%,#cde0ef24 40%,transparent 62%); filter:blur(5px); opacity:0; }
html[data-weather="sunny"][data-daypart="day"] .sun-bloom { opacity:1; }
html[data-weather="sunny"][data-daypart="dawn"] .sun-bloom,html[data-weather="sunny"][data-daypart="dusk"] .sun-bloom { width:min(42vw,220px); top:14vh; right:12vw; opacity:.46; }
html[data-weather="sunny"][data-daypart="night"] .sun-bloom { width:min(30vw,136px); top:10vh; right:11vw; filter:blur(1px); opacity:.7; background:radial-gradient(circle,#f4f6ffe8 0% 8%,#dfeaff98 17%,#c4daf04a 39%,transparent 68%); }
html[data-daypart="night"][data-weather="sunny"] .sky::before { opacity:.72; background-image:radial-gradient(1.5px 1.5px at 12% 17%,#ffffffd9 40%,transparent 80%),radial-gradient(1px 1px at 29% 32%,#ffffffb8 40%,transparent 80%),radial-gradient(1.3px 1.3px at 47% 14%,#ffffffc9 40%,transparent 80%),radial-gradient(1px 1px at 73% 23%,#ffffffb0 40%,transparent 80%),radial-gradient(1.4px 1.4px at 88% 39%,#ffffffc4 40%,transparent 80%),radial-gradient(1px 1px at 61% 42%,#ffffffa8 40%,transparent 80%); }
html[data-daypart="dawn"] .sky::after { background:linear-gradient(110deg,rgba(255,191,138,.27),transparent 50%),linear-gradient(180deg,rgba(16,33,52,.06),rgba(41,59,78,.16) 58%,transparent); }
html[data-daypart="dusk"] .sky::after { background:linear-gradient(250deg,rgba(255,152,112,.28),transparent 52%),linear-gradient(180deg,rgba(16,33,52,.08),rgba(41,59,78,.2) 58%,transparent); }
.rainfall { position:absolute; z-index:3; inset:0; overflow:hidden; display:none; pointer-events:none; }
html[data-weather="rain"] .rainfall,html[data-weather="thunder"] .rainfall,html[data-weather="snow"] .rainfall,html[data-weather="sleet"] .rainfall,html[data-weather="freezing"] .rainfall,html[data-weather="hail"] .rainfall { display:block; }
.rainfall::before,.rainfall::after { content:""; position:absolute; inset:-25%; opacity:0; pointer-events:none; }
.rainfall::before { background:repeating-linear-gradient(104deg,transparent 0 var(--precip-gap),rgba(224,239,250,.28) var(--precip-gap) calc(var(--precip-gap) + 1px),transparent calc(var(--precip-gap) + 1px) var(--precip-repeat)); }
.rainfall::after { background-image:radial-gradient(circle,rgba(255,255,255,.78) 0 1px,transparent 2px),radial-gradient(circle,rgba(241,248,255,.66) 0 1.4px,transparent 2.5px); background-size:47px 47px,71px 71px; background-position:0 0,22px 17px; }
.rainfall .rain-drop { position:absolute; top:-24px; left:var(--rain-left); width:1px; height:var(--rain-length); border-radius:2px; background:linear-gradient(transparent,rgba(224,239,250,var(--rain-drop-opacity,.34))); transform:rotate(6deg); animation:rain-drop var(--rain-speed) linear var(--rain-delay) infinite; }
html[data-weather="rain"] .rainfall::before { background:none; opacity:0; }
html[data-weather="thunder"] .rainfall::before,html[data-weather="sleet"] .rainfall::before,html[data-weather="freezing"] .rainfall::before,html[data-weather="hail"] .rainfall::before { opacity:var(--precip-opacity); }
html[data-weather="snow"] .rainfall::after { opacity:var(--snow-opacity); }
html[data-weather="sleet"] .rainfall::after { opacity:.2; }
html[data-weather="freezing"] .rainfall::after { opacity:.34; background-image:radial-gradient(circle,rgba(225,246,255,.8) 0 1.5px,transparent 2.6px),radial-gradient(circle,rgba(220,241,255,.6) 0 1px,transparent 2px); }
html[data-weather="hail"] .rainfall::after { opacity:.55; background-image:radial-gradient(circle,rgba(244,251,255,.94) 0 2.5px,transparent 4px),radial-gradient(circle,rgba(228,243,255,.8) 0 2px,transparent 3.5px); background-size:61px 61px,83px 83px; }
@keyframes rain-drop { from { transform:translate3d(0,-5vh,0) rotate(6deg); } to { transform:translate3d(-25px,108vh,0) rotate(6deg); } }
@keyframes precipitation-pass { from { transform:translate3d(1vw,-5vh,0); } to { transform:translate3d(-1vw,7vh,0); } }
@media(prefers-reduced-motion:no-preference) {
 html[data-weather="thunder"] .rainfall::before,html[data-weather="sleet"] .rainfall::before,html[data-weather="freezing"] .rainfall::before,html[data-weather="hail"] .rainfall::before { animation:precipitation-pass 2s linear 2 both; }
 html[data-weather="snow"] .rainfall::after,html[data-weather="sleet"] .rainfall::after { animation:precipitation-pass 5s linear 1 both; }
}
.topbar { width:min(1160px,calc(100% - 48px)); height:92px; padding:25px 0; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:7px; color:#fff; text-shadow:0 1px 8px #1c364a44; }
.brand>svg { width:30px; height:30px; }
.brand>span { font-size:18px; font-weight:500; letter-spacing:.08em; line-height:1.2; }
.brand small { display:block; font-size:7px; font-weight:400; letter-spacing:.23em; margin-top:4px; opacity:.78; }
.top-actions { display:flex; align-items:center; gap:14px; }
.prototype-tag { font-size:10px; letter-spacing:.05em; color:#eef5fa; opacity:.8; }
.circle-button { border:1px solid #eef6ff20; width:38px; height:38px; border-radius:50%; padding:8px; background:rgba(157,184,207,.13); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; }
.circle-button svg { width:19px; height:19px; }
.weather-page { width:min(760px,calc(100% - 36px)); margin:0 auto; padding-bottom:112px; }
.hero { text-align:center; padding:47px 0 43px; text-shadow:0 2px 16px #172c4440; }
.hero h1 { margin:0; font-size:32px; font-weight:400; line-height:1.35; letter-spacing:.01em; }
.current-temp { display:flex; align-items:flex-start; justify-content:center; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-weight:200; font-size:112px; letter-spacing:-.065em; line-height:1.15; margin:0 0 4px; }
.degree { display:inline-block; font-weight:200; font-size:67px; letter-spacing:0; line-height:1; padding-top:14px; margin-left:2px; }
.degree small { display:inline; font-size:.32em; font-weight:450; letter-spacing:0; vertical-align:baseline; margin-left:1px; }
.temperature-range { display:flex; justify-content:center; align-items:center; gap:18px; font-size:29px; font-weight:300; line-height:1.15; }
.temperature-range>span { display:flex; align-items:center; }
.temperature-range small { font-size:11px; font-weight:500; line-height:1.05; width:12px; margin-right:5px; word-break:break-all; }
.condition { margin:11px 0 0; font-size:21px; font-weight:400; }
.sample-note { margin:13px 0 0; font-size:10px; letter-spacing:.08em; color:#f0f5f9; opacity:.86; }
.glass { background:var(--glass); backdrop-filter:blur(20px) saturate(108%); -webkit-backdrop-filter:blur(20px) saturate(108%); border:1px solid var(--glass-edge); border-radius:19px; box-shadow:0 1px 0 #14304607; }
.weather-page>section:not(.hero),.history-panel { margin-bottom:12px; }
.aqi-panel { padding:15px 17px 13px; }
.aqi-panel h2 { margin:0; font-size:24px; font-weight:600; line-height:1.3; letter-spacing:-.02em; }
.aqi-separator { padding:0 5px; font-weight:400; }
.aqi-scale { position:relative; margin:15px 0 9px; height:4px; border-radius:5px; background:linear-gradient(90deg,#2aea81 0%,#e6e52e 15%,#ffaa25 28%,#f64563 40%,#c034bf 57%,#762346 78%,#6e162a 100%); }
.aqi-scale i { position:absolute; top:50%; left:4.4%; width:6px; height:6px; transform:translate(-50%,-50%); border-radius:50%; background:#fff; box-shadow:0 0 0 2px #2443579c; }
.aqi-panel p { margin:0; font-size:14px; line-height:1.55; }
.demo-inline { font-size:10px; opacity:.75; margin-left:8px; }
.hourly-panel { padding:14px 15px 0; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:17px; }
.panel-heading h2 { font-size:19px; font-weight:450; line-height:1.2; margin:0; }
.panel-heading p { margin:3px 0 0; font-size:13px; color:#e0eaf3; }
.metric-switch { display:flex; align-items:center; gap:2px; border-radius:25px; padding:3px; background:rgba(22,47,73,.2); }
.metric-switch button { display:flex; align-items:center; justify-content:center; width:36px; height:29px; padding:3px 8px; border:0; border-radius:20px; background:none; }
.metric-switch button svg { width:20px; height:20px; }
.metric-switch button:first-child svg { width:24px; }
.metric-switch button[aria-pressed="true"] { background:rgba(195,219,237,.2); box-shadow:0 1px 3px #23395019; }
.hourly-scroll { overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
.hourly-scroll::-webkit-scrollbar { display:none; }
.hourly-items { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 50px)/6); gap:10px; padding-bottom:12px; }
.hour { text-align:center; min-width:0; }
.hour-label { display:block; white-space:nowrap; font-size:14px; font-weight:550; }
.hour-symbol { height:48px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; margin:9px 0 10px; }
.hour-symbol svg { width:32px; height:32px; }
.rain-probability { display:block; color:#91edff; font-size:10px; line-height:1; margin-top:-1px; }
.hour-value { font-size:19px; font-weight:500; line-height:1.4; white-space:nowrap; }
.hour-value.small-unit { font-size:16px; }
.trend-toggle { display:flex; justify-content:center; align-items:center; gap:5px; width:100%; font-size:11px; padding:10px 0; border:0; border-top:1px solid #e1ebf218; color:#e4eef6; background:none; }
.trend-toggle svg { width:15px; height:15px; }
.trend-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
#trend-chart { width:100%; height:150px; }
.chart-note { margin:0; padding-bottom:10px; text-align:center; font-size:10px; color:#e3edf5; }
.daily-panel { padding:15px 16px 2px; }
.daily-panel>.panel-heading { margin-bottom:5px; }
.daily-panel h2 { display:flex; align-items:center; gap:6px; font-size:13px; color:#e0e9f1; font-weight:500; }
.heading-icon { width:15px; height:15px; opacity:.85; }
.subtle-button { border:0; background:rgba(196,216,235,.11); border-radius:12px; padding:5px 10px; font-size:11px; }
.subtle-button:hover,.city-options button:hover { background:rgba(216,232,247,.22); }
.daily-row { display:grid; grid-template-columns:46px 36px 34px minmax(15px,1fr) 35px; align-items:center; gap:9px; padding:14px 0; width:100%; border:0; border-bottom:1px solid #e1eaf025; background:none; text-align:left; }
.daily-row:last-child { border-bottom:0; }
.day-title { font-size:19px; font-weight:450; white-space:nowrap; }
.day-title small { display:none; }
.day-icon { display:flex; flex-direction:column; align-items:center; }
.day-icon svg { width:29px; height:29px; }
.day-icon small { color:#90eaff; font-size:10px; line-height:1; margin-top:0; }
.low { color:#d0dce7; font-size:20px; font-weight:400; text-align:right; }
.high { color:#fff; font-size:20px; font-weight:500; text-align:right; }
.range-rail { position:relative; height:5px; background:rgba(19,43,70,.13); border-radius:10px; }
.range-fill { position:absolute; left:var(--start); width:var(--width); top:0; height:5px; border-radius:10px; background:linear-gradient(90deg,#6bd7d2,#c7db61 55%,#ffd042); }
html[data-weather="rain"] .range-fill,html[data-weather="cloudy"] .range-fill { background:linear-gradient(90deg,#ffbf34,#ffd66b); }
.range-fill i { position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; left:var(--current,70%); box-shadow:0 0 0 2px #26405ca6; }
.daily-row:hover { background:#d6e4f109; }
.date-preview { border-top:1px solid #d9e8f026; margin:0; padding:10px 0 12px; color:#eef4f8; font-size:12px; }
.daily-rows.calendar-view { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; padding:12px 0; }
.calendar-view .daily-row { display:flex; flex-direction:column; gap:8px; padding:9px 1px; border:1px solid #d4e5f116; border-radius:9px; text-align:center; }
.calendar-view .day-title { font-size:12px; }
.calendar-view .day-title small { display:block; font-size:10px; color:#e0eaf2; margin-top:4px; }
.calendar-view .range-rail { display:none; }
.calendar-view :is(.low,.high) { font-size:14px; }
.calendar-view .day-icon svg { width:25px; height:25px; }
.details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.detail-tile { padding:15px 17px; min-height:119px; }
.detail-tile h2 { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:#e0eaf3; margin:0 0 8px; }
.detail-tile h2 svg { width:14px; height:14px; }
.detail-tile p { font-size:32px; font-weight:350; line-height:1.25; margin:0 0 4px; }
.detail-tile p span { font-size:15px; margin-left:3px; }
.detail-tile small { font-size:10px; color:#e4edf4; }
.history-panel { padding:0 16px; }
.history-panel summary { display:flex; justify-content:space-between; align-items:center; cursor:pointer; padding:15px 0; list-style:none; font-size:14px; }
.history-panel summary::-webkit-details-marker { display:none; }
.history-panel summary svg { width:18px; height:18px; }
.history-panel[open] summary svg { transform:rotate(180deg); }
.history-panel label { font-size:12px; }
.history-panel form>div { display:flex; gap:10px; margin:7px 0; }
.history-panel input { min-width:0; flex:1; border:1px solid #ffffff29; border-radius:8px; padding:7px; color:#fff; background:#132e452a; }
.history-panel p { margin:8px 0 15px; font-size:11px; color:#e3edf5; }
.page-footer { padding:16px 6px 0; text-align:center; font-size:10px; line-height:1.7; color:#e2eaf1; }
.page-footer p { margin:5px 0; }
.page-footer p:first-child { color:#f6f9fc; font-size:12px; letter-spacing:.04em; }
.page-footer a { text-decoration:underline; text-decoration-color:#ffffff44; text-underline-offset:3px; }
.scene-switcher { display:flex; align-items:center; gap:2px; padding:4px; border:1px solid #dcecff20; border-radius:22px; background:#263f5938; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); white-space:nowrap; }
.scene-switcher>span { display:none; }
.scene-switcher button { border:0; border-radius:18px; padding:6px 9px; background:none; font-size:11px; }
.scene-switcher button[aria-pressed="true"] { background:rgba(196,219,237,.22); box-shadow:inset 0 1px 0 #ffffff12; }
dialog { width:min(420px,calc(100% - 36px)); border:1px solid #d9eaf62c; border-radius:24px; background:#314f6aea; color:#fff; padding:22px; backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); box-shadow:0 20px 80px #0d203b5e; }
dialog::backdrop { background:#142a4473; backdrop-filter:blur(5px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:22px; }
.dialog-heading h2 { font-size:18px; font-weight:500; margin:0; }
.dialog-heading .circle-button { font-size:23px; }
#city-input { width:100%; border:1px solid #e6f4ff32; border-radius:10px; padding:12px; background:#ffffff0c; color:#fff; font-size:14px; }
#city-input::placeholder { color:#d3e2ef; }
.search-submit { width:100%; padding:10px; margin:10px 0 15px; border:0; border-radius:10px; background:#d4e7f3; color:#213f59; font-size:14px; }
.city-options { display:flex; gap:6px; }
.city-options button { flex:1; padding:7px 0; border:1px solid #dfedf428; border-radius:10px; background:#ffffff08; font-size:12px; }
#city-feedback { font-size:11px; margin:15px 0 0; color:#e0eaf2; }
@media(min-width:800px) {
  .weather-page { width:min(820px,calc(100% - 64px)); }
  .hero { padding-top:42px; padding-bottom:49px; }
  .hero h1 { font-size:36px; }
  .current-temp { font-size:126px; }
  .degree { font-size:76px; padding-top:17px; }
  .sun-bloom { right:calc(50% - 1120px); top:-340px; width:1100px; }
  .sky-photo { background-position:center 34%; }
  .aqi-panel { padding:18px 23px 17px; }
  .hourly-panel { padding:20px 23px 0; }
  .hourly-items { grid-auto-columns:calc((100% - 98px)/8); gap:14px; }
  .hour-label { font-size:17px; }
  .hour-symbol { height:52px; }
  .hour-symbol svg { width:37px; height:37px; }
  .hour-value { font-size:23px; }
  .rain-probability { font-size:12px; }
  .daily-panel { padding:19px 23px 4px; }
  .daily-row { grid-template-columns:70px 58px 55px minmax(0,1fr) 50px; gap:23px; padding:16px 0; }
  .details-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .detail-tile { padding:19px; }
  .glass { border-radius:21px; }
}
@media(max-width:640px) { .topbar { width:calc(100% - 32px); height:72px; padding:14px 0; } .prototype-tag { display:none; } }
@media(max-width:360px) {
  .weather-page { width:calc(100% - 28px); }
  .hero { padding-top:38px; }
  .hourly-items { grid-auto-columns:calc((100% - 40px)/5); }
  .daily-row { grid-template-columns:40px 32px 30px minmax(0,1fr) 31px; gap:7px; }
  .metric-switch button { width:31px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; } .rainfall { display:none!important; } }