.wx{--wx-text: oklch(28% 0.03 255);--wx-sub: oklch(38% 0.03 255 / 0.75);--wx-card-bg: oklch(99% 0.004 80 / 0.5);position:relative;overflow:hidden;min-height:min(780px, calc(100svh - 150px));display:grid;place-items:center;padding:var(--w-space-8) var(--w-space-5);color:var(--wx-text);border-radius:var(--w-radius-lg)}.wx[class*="evening"],.wx[class*="night"]{--wx-text: oklch(96% 0.01 85);--wx-sub: oklch(96% 0.01 85 / 0.75);--wx-card-bg: oklch(25% 0.03 270 / 0.35)}.wx.wx--storm,.wx.wx--rain{--wx-text: oklch(97% 0.005 85);--wx-sub: oklch(97% 0.005 85 / 0.75);--wx-card-bg: oklch(30% 0.03 265 / 0.4)}.wx [hidden]{display:none !important}.wx-sky,.wx-dim,.wx-stars,.wx-sun,.wx-moon,.wx-clouds,.wx-fog,.wx-precip,.wx-flash{position:absolute;inset:0;pointer-events:none}.wx-sky{transition:opacity 1.2s ease}.wx--morning .wx-sky{background:linear-gradient(180deg, oklch(88% 0.05 80), oklch(82% 0.085 50) 55%, oklch(76% 0.095 38))}.wx--day .wx-sky{background:linear-gradient(180deg, oklch(85% 0.055 235), oklch(72% 0.09 250))}.wx--evening .wx-sky{background:linear-gradient(180deg, oklch(83% 0.085 65), oklch(64% 0.11 330) 70%, oklch(48% 0.09 310))}.wx--night .wx-sky{background:linear-gradient(180deg, oklch(26% 0.05 272), oklch(13% 0.03 278))}.wx-dim{background:linear-gradient(180deg, oklch(24% 0.03 265), oklch(20% 0.025 265));opacity:0;transition:opacity 1.2s ease}.wx--cloudy .wx-dim{opacity:0.18}.wx--overcast .wx-dim{opacity:0.38}.wx--fog .wx-dim{opacity:0.3}.wx--rain .wx-dim{opacity:0.45}.wx--snow .wx-dim{opacity:0.22}.wx--storm .wx-dim{opacity:0.55}.wx-sun,.wx-moon{opacity:0;transition:opacity 1.2s ease}.wx-sun{inset-inline-start:12%;top:14%;width:clamp(90px, 12vw, 150px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle, oklch(97% 0.09 90) 0%, oklch(93% 0.11 80) 55%, transparent 72%)}.wx--morning.wx--clear .wx-sun,.wx--day.wx--clear .wx-sun,.wx--day.wx--cloudy .wx-sun{opacity:0.95}.wx-moon{inset-inline-start:16%;top:12%;width:clamp(64px, 8vw, 96px);aspect-ratio:1;border-radius:50%;box-shadow:inset 18px -10px 0 0 oklch(95% 0.02 90);transform:rotate(-14deg)}.wx--night .wx-moon{opacity:0.9}.wx-stars span{position:absolute;width:2px;aspect-ratio:1;border-radius:50%;background:oklch(98% 0.005 90);animation:wx-twinkle var(--wx-dur, 3s) ease-in-out infinite;opacity:0.4}@keyframes wx-twinkle{0%,100%{opacity:0.25}50%{opacity:0.95}}.wx-cloud{position:absolute;width:calc(var(--wx-size, 160px) * 1.6);aspect-ratio:2.6;filter:blur(1px);opacity:var(--wx-op, 0.9);animation:wx-drift var(--wx-dur, 70s) linear infinite;animation-delay:var(--wx-delay, 0s);background:currentColor;border-radius:999px}.wx-cloud::before,.wx-cloud::after{content:"";position:absolute;background:currentColor;border-radius:50%}.wx-cloud::before{width:55%;aspect-ratio:1;inset-inline-start:12%;top:-38%}.wx-cloud::after{width:38%;aspect-ratio:1;inset-inline-end:14%;top:-22%}.wx-clouds{color:oklch(99% 0.004 80/0.92)}.wx--overcast .wx-clouds,.wx--rain .wx-clouds,.wx--storm .wx-clouds,.wx--fog .wx-clouds{color:oklch(72% 0.015 260/0.95)}.wx--night .wx-clouds,.wx--evening .wx-clouds{color:oklch(55% 0.03 275/0.55)}@keyframes wx-drift{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}.wx-fog{opacity:0;transition:opacity 1.2s ease;background:linear-gradient(180deg, transparent 30%, oklch(92% 0.01 255/0.55) 45%, transparent 60%), linear-gradient(180deg, transparent 55%, oklch(92% 0.01 255/0.45) 72%, transparent 88%);filter:blur(6px)}.wx--fog .wx-fog{opacity:1}.wx-drop,.wx-flake{position:absolute;top:-8%;inset-inline-start:var(--wx-x, 50%)}.wx-drop{width:1.5px;height:var(--wx-len, 18px);background:linear-gradient(180deg, transparent, oklch(90% 0.02 250/0.75));animation:wx-fall var(--wx-dur, 1s) linear infinite;animation-delay:var(--wx-delay, 0s)}.wx-flake{width:var(--wx-size, 5px);aspect-ratio:1;border-radius:50%;background:oklch(99% 0.004 80/0.9);animation:wx-fall var(--wx-dur, 7s) linear infinite;animation-delay:var(--wx-delay, 0s)}@keyframes wx-fall{to{transform:translateY(115vh)}}.wx-flash{background:oklch(99% 0.004 90);opacity:0}.wx-flash.wx-flash--on{animation:wx-flash 0.7s ease-out}@keyframes wx-flash{0%{opacity:0}8%{opacity:0.85}14%{opacity:0.1}22%{opacity:0.7}100%{opacity:0}}.wx-card{position:relative;z-index:1;text-align:center;background:var(--wx-card-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid oklch(99% 0.004 80/0.35);border-radius:var(--w-radius-lg);padding:var(--w-space-7) var(--w-space-7) var(--w-space-6);max-width:480px;box-shadow:var(--w-shadow-lift)}.wx-place{margin:0;font-size:var(--w-fs-h4);font-family:var(--w-font-display)}.wx-temp{display:flex;justify-content:center;align-items:flex-start;font-family:var(--w-font-display);line-height:1;margin-block:var(--w-space-2)}.wx-temp__num{font-size:clamp(4.5rem, 14vw, 7rem);font-weight:600}.wx-temp__deg{font-size:clamp(2rem, 6vw, 3rem);margin-block-start:0.5em}.wx-desc{margin:0;font-size:var(--w-fs-h3)}.wx-stats{display:flex;justify-content:center;gap:var(--w-space-6);margin:var(--w-space-5) 0 0;color:var(--wx-sub);font-size:var(--w-fs-small)}.wx-stat dd{margin:0;font-weight:600;color:var(--wx-text)}.wx-updated{margin:var(--w-space-4) 0 0;font-size:var(--w-fs-small);color:var(--wx-sub)}.wx-locbtn{margin-block-start:var(--w-space-5);padding:var(--w-space-2) var(--w-space-5);border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:var(--w-fs-small);cursor:pointer;transition:background 0.2s ease, color 0.2s ease}.wx-locbtn:hover{background:var(--wx-text);color:var(--w-white)}@media (max-width:640px){.wx{padding:var(--w-space-6) var(--w-space-4)}.wx-card{padding:var(--w-space-6) var(--w-space-5) var(--w-space-5)}.wx-stats{gap:var(--w-space-4)}}