/* Williams Manor weather: sky-themed, glass cards, mobile-first. */
:root{
  --ink:#fff;--ink-2:rgba(255,255,255,.78);--ink-3:rgba(255,255,255,.55);
  --glass:rgba(255,255,255,.14);--glass-2:rgba(255,255,255,.22);--line:rgba(255,255,255,.22);
  --accent:#ffd60a;--radius:22px;--shadow:0 20px 60px rgba(0,0,0,.25);
  --sky-a:#2f80ed;--sky-b:#56ccf2;--sky-c:#9ad7ff;--glow:rgba(255,230,150,.55);--cloud:.35;--star:0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;background:var(--sky-a);overflow-x:hidden}
.sky{position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 55%,var(--sky-c) 100%);transition:background 2s ease}
.sky::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--sun-x,70%) var(--sun-y,18%),var(--glow) 0,rgba(255,255,255,0) 32%);transition:opacity 2s}
.stars{position:fixed;inset:0;z-index:-1;opacity:var(--star);transition:opacity 2s;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 28% 42%,#fff 60%,transparent 61%),radial-gradient(1.5px 1.5px at 45% 11%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 61% 33%,#fff 60%,transparent 61%),radial-gradient(1.3px 1.3px at 77% 20%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 88% 48%,#fff 60%,transparent 61%),radial-gradient(1.1px 1.1px at 8% 60%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 36% 70%,#fff 60%,transparent 61%),radial-gradient(1.4px 1.4px at 53% 56%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 70% 76%,#fff 60%,transparent 61%),radial-gradient(1.2px 1.2px at 93% 66%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 20% 86%,#fff 60%,transparent 61%)}
.clouds{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:var(--cloud);transition:opacity 2s}
.cloud{position:absolute;width:52vw;height:16vh;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.95) 0,rgba(255,255,255,.55) 45%,rgba(255,255,255,0) 72%);filter:blur(8px);animation:drift linear infinite}
.cloud.c1{top:8%;left:-20%;animation-duration:120s}.cloud.c2{top:22%;left:30%;width:70vw;animation-duration:170s;animation-delay:-60s}.cloud.c3{top:40%;left:-35%;width:60vw;animation-duration:150s;animation-delay:-30s}
@keyframes drift{from{transform:translateX(-10vw)}to{transform:translateX(120vw)}}
.rain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--rain,0);transition:opacity 2s;background-image:repeating-linear-gradient(100deg,rgba(255,255,255,0) 0 18px,rgba(255,255,255,.18) 18px 19px);background-size:200% 200%;animation:rainfall .55s linear infinite}
@keyframes rainfall{from{background-position:0 0}to{background-position:-40px 120px}}
header{position:sticky;top:0;z-index:5;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);background:rgba(10,20,40,.18);border-bottom:1px solid var(--line)}
.bar{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px}
.brand{font-weight:700;letter-spacing:-.02em;font-size:17px;white-space:nowrap}
.brand small{display:block;font-weight:400;font-size:11px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
nav::-webkit-scrollbar{display:none}
nav a{color:var(--ink-2);text-decoration:none;font-size:14px;padding:8px 12px;border-radius:999px;white-space:nowrap}
nav a.on{background:var(--glass-2);color:var(--ink)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.live i{width:8px;height:8px;border-radius:50%;background:#64748b;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.live.on i{background:#34d399;box-shadow:0 0 10px rgba(52,211,153,.8)}
main{max-width:1120px;margin:0 auto;padding:14px 16px 60px}
section.page{display:none}section.page.on{display:block}
.hero{text-align:center;padding:26px 0 10px}
.hero .place{font-size:20px;font-weight:500;letter-spacing:-.01em}
.hero .temp{font-size:clamp(84px,22vw,118px);font-weight:200;line-height:1;letter-spacing:-.04em;margin:4px 0 0}
.hero .temp sup{font-size:.35em;vertical-align:top;margin-left:2px;font-weight:300}
.hero .cond{font-size:20px;color:var(--ink-2);margin-top:2px}
.hero .hl{font-size:16px;color:var(--ink-2);margin-top:4px}
.hero .feels{font-size:13px;color:var(--ink-3);margin-top:6px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
@media (min-width:700px){.grid{grid-template-columns:repeat(4,1fr)}.card.rows2{grid-row:span 2}}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:var(--shadow);min-height:120px;position:relative;overflow:hidden}
.card h3{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.card .big{font-size:30px;font-weight:400;letter-spacing:-.02em;line-height:1.05}
.card .big small{font-size:14px;color:var(--ink-2);margin-left:3px}
.card .sub{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.4}
.card.span2{grid-column:span 2}.card.span4{grid-column:1/-1}
.strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.strip::-webkit-scrollbar{height:0}
.hour{flex:0 0 64px;text-align:center;scroll-snap-align:start;padding:8px 0}
.hour .t{font-size:12px;color:var(--ink-2)}.hour img{width:34px;height:34px;display:block;margin:4px auto}.hour .v{font-size:16px}.hour .p{font-size:11px;color:#9fe3ff;min-height:14px}
.days .d{display:grid;grid-template-columns:54px 32px 40px 1fr 78px;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.days .d:first-child{border-top:0}
.days img{width:30px;height:30px}
.days .pop{font-size:12px;color:#9fe3ff}
.days .range{height:5px;border-radius:5px;background:rgba(255,255,255,.18);position:relative}
.days .range i{position:absolute;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,#6ee7ff,#ffd166,#ff8a5c)}
.days .lo,.days .hi{color:var(--ink-2)}.days .hi{color:var(--ink)}.days .d>div:last-child{text-align:right;white-space:nowrap}
.compass{position:relative;width:96px;height:96px;margin:4px auto 0;border-radius:50%;border:1.5px solid var(--line);background:rgba(255,255,255,.06)}
.compass span{position:absolute;font-size:10px;color:var(--ink-3)}
.compass .n{top:3px;left:50%;transform:translateX(-50%)}.compass .s{bottom:3px;left:50%;transform:translateX(-50%)}.compass .e{right:5px;top:50%;transform:translateY(-50%)}.compass .w{left:5px;top:50%;transform:translateY(-50%)}
.compass .needle{position:absolute;left:50%;top:50%;width:3px;height:40px;margin:-40px 0 0 -1.5px;background:linear-gradient(180deg,#ff8a5c,#ffd166);border-radius:3px;transform-origin:50% 100%;transition:transform 1s}
.compass .mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:15px;font-weight:600}
.arc{display:block;width:100%;height:70px}
.aqi{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(0,0,0,.25)}
.radar iframe{width:100%;height:360px;border:0;border-radius:14px;background:#0b1a2a}
.chart{height:280px}
.charts{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media (min-width:900px){.charts{grid-template-columns:1fr 1fr}}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 2px}
.tabs button,.pill{border:1px solid var(--line);background:var(--glass);color:var(--ink);padding:7px 14px;border-radius:999px;font-size:14px;cursor:pointer;font-family:inherit}
.tabs button.on,.pill.on{background:var(--ink);color:#1b2a44;border-color:transparent}
table.rec{width:100%;border-collapse:collapse;font-size:14px}
table.rec th{text-align:left;font-weight:600;color:var(--ink-3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 6px;border-bottom:1px solid var(--line)}
table.rec td{padding:9px 6px;border-bottom:1px solid rgba(255,255,255,.1);vertical-align:top}
table.rec td small{display:block;color:var(--ink-3);font-size:11px}
pre.noaa{font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;overflow:auto;color:var(--ink);background:rgba(0,0,0,.28);border-radius:14px;padding:14px;max-height:70vh}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-size:14px}
.kv dt{color:var(--ink-2)}.kv dd{margin:0;text-align:right}
footer{max-width:1120px;margin:26px auto 0;padding:0 16px;color:var(--ink-3);font-size:12px;line-height:1.6}
footer a{color:var(--ink-2)}
.muted{color:var(--ink-3)}
.updated{font-size:12px;color:var(--ink-3);text-align:center;margin-top:8px}
.quake{display:flex;gap:14px;align-items:center}
.quake .mag{font-size:34px;font-weight:300;min-width:64px}
@media (max-width:420px){.hero .place{font-size:17px}.card{padding:12px 13px}.card .big{font-size:26px}}
.dd{padding:10px 0;border-top:1px solid var(--line)}.dd:first-child{border-top:0;padding-top:0}
.dd .top{display:flex;align-items:center;gap:12px}.dd img{width:40px;height:40px}.dd .n{font-size:16px;font-weight:600}.dd .w{font-size:13px;color:var(--ink-2)}.dd .hl{margin-left:auto;font-size:18px;white-space:nowrap}.dd .hl b{font-weight:600}
.dd .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-2);margin-top:6px;padding-left:52px}
@media (max-width:520px){.live span{display:none}}