:root {
  --ws-bg-day: linear-gradient(#bfe3ff, #eaf5ff 50%, #ffffff 100%);
  --ws-bg-night: linear-gradient(#0b1422, #101b2c 40%, #192842 100%);
  --ws-sun: #ffcf33;
  --ws-moon: #cfd8e3;
  --ws-fog: rgba(207, 217, 226, .55);
  --ws-rain: #6aa1e0;
  --ws-snow: #ffffff;
  --ws-hail: #e9f3ff;
  --ws-buildings: #dfe6ee;
  --ws-buildings-d: #a9b8cb;
  --ws-ground: #e9eef5;
  --ws-text: #0e1a2b;
  --ws-text-night: #e6edf7;
  --ws-max-clouds: 8; --ws-max-drops: 120; --ws-max-flakes: 80; --ws-max-hail: 80;
  --ws-wind-kts: 6; --ws-cloud-speed: 60s; --ws-rain-angle: 0deg;
}
.ws-skyline { position: relative; isolation: isolate; overflow: hidden; height: 260px; max-height: 42vh; border-radius: 14px; }
@media (max-width: 780px){ .ws-skyline { height: 220px; }}
.ws-sky { position:absolute; inset:0; z-index:0; background:var(--ws-bg-day); transition:background .6s ease; }
.ws-sky.night { background: var(--ws-bg-night); }
.ws-orb { position:absolute; z-index:1; width:56px; height:56px; border-radius:50%; top:28px; right:36px;
  box-shadow: 0 0 0 6px rgba(255,255,255,.18), 0 10px 20px rgba(0,0,0,.08); }
.ws-sky.day .ws-orb { background: var(--ws-sun); }
.ws-sky.night .ws-orb { background: var(--ws-moon); box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 10px 20px rgba(0,0,0,.35); }
.ws-clouds { position:absolute; inset:0; z-index:8; pointer-events:none; }
.ws-cloud {
  position:absolute; top:var(--y,20%); left:var(--x,0%);
  width:var(--w,140px); height: var(--h,54px);
  background:
    radial-gradient(60% 80% at 25% 60%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    radial-gradient(60% 80% at 55% 40%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    radial-gradient(60% 80% at 80% 55%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    linear-gradient(to right, rgba(255,255,255,.88), rgba(255,255,255,.88));
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.08));
  border-radius: 40px; opacity:.92; animation: ws-cloud-move var(--ws-cloud-speed) linear infinite;
}
.ws-sky.night .ws-cloud { background:
  radial-gradient(60% 80% at 25% 60%, rgba(220,230,240,.95), rgba(220,230,240,0) 70%),
  radial-gradient(60% 80% at 55% 40%, rgba(220,230,240,.95), rgba(220,230,240,0) 70%),
  radial-gradient(60% 80% at 80% 55%, rgba(220,230,240,.95), rgba(220,230,240,0) 70%),
  linear-gradient(to right, rgba(220,230,240,.92), rgba(220,230,240,.92));
}
@keyframes ws-cloud-move { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.ws-fog { position:absolute; inset:auto 0 0 0; height:45%; z-index:9; background: linear-gradient(to top, var(--ws-fog), rgba(255,255,255,0)); opacity:0; transition: opacity .6s ease; pointer-events:none; }
.ws-fog.on { opacity:1; }
.ws-precip { position:absolute; inset:0; z-index:9; pointer-events:none; perspective:400px; }
.ws-drop, .ws-flake, .ws-hail { position:absolute; top:-10%; left:0; will-change: transform, opacity; opacity:.95; animation-timing-function: linear; animation-iteration-count: infinite; }
.ws-drop { width:2px; height:14px; background: #6aa1e0; border-radius: 1px; transform: rotate(var(--ws-rain-angle)); }
.ws-flake { width:6px; height:6px; background: #fff; border-radius: 50%; opacity:.95; }
.ws-hail  { width:5px; height:5px; background: #e9f3ff; border-radius: 50%; opacity:.95; }
@keyframes ws-fall   { from{ transform: translate3d(var(--sx,0),-10%,0) rotate(var(--rot,0)); } to{ transform: translate3d(var(--ex,0),110%,0) rotate(var(--rot,0)); } }
@keyframes ws-fall-z { from{ transform: translate3d(var(--sx,0),-10%,50px); } to{ transform: translate3d(var(--ex,0),110%,-50px); } }
.ws-lightning { position:absolute; inset:0; z-index:10; background: radial-gradient(120px 120px at var(--lx,70%) var(--ly,35%), rgba(255,255,200,.9), rgba(255,255,200,0) 60%); opacity:0; pointer-events:none; }
.ws-lightning.flash { animation: ws-flash .22s ease-out; }
@keyframes ws-flash { 0%{opacity:.85} 100%{opacity:0} }
.ws-horizon { position:absolute; left:0; right:0; bottom:0; height:42%; z-index:5; background: linear-gradient(to top, var(--ws-ground), transparent 70%); }
.ws-buildings { position:absolute; left:0; right:0; bottom:0; height:72%; z-index:6; display:flex; gap:12px; align-items:flex-end; padding:0 12px 8px; }
.ws-b { background: linear-gradient(var(--bcol, var(--ws-buildings)), var(--bcol2, var(--ws-buildings-d))); border-radius: 4px 4px 2px 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 6px 12px rgba(0,0,0,.07); position:relative; min-width: 26px; }
.ws-b:before { content:""; position:absolute; left:10%; right:10%; top:10%; bottom:18%; background:
    repeating-linear-gradient(#ffffffb3 0 2px, transparent 2px 8px) left top/22% 100% no-repeat,
    repeating-linear-gradient(#ffffff80 0 2px, transparent 2px 8px) center top/22% 100% no-repeat,
    repeating-linear-gradient(#ffffff4d 0 2px, transparent 2px 8px) right top/22% 100% no-repeat; opacity:.28; }
@media (prefers-reduced-motion: reduce) { .ws-cloud, .ws-drop, .ws-flake, .ws-hail { animation: none !important; } }