.weather-avatar { position:relative; overflow:visible!important; isolation:isolate; }
.weather-avatar > img { display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.avatar-weather-layer { position:absolute; inset:-9%; z-index:1; border-radius:inherit; pointer-events:none; user-select:none; background:transparent; }
.weather-avatar[data-avatar-weather="snow"] > .avatar-weather-layer { border:0; box-shadow:none; }
.weather-avatar[data-avatar-weather="snow"] .avatar-weather-layer b{width:2.6px;height:2.6px;box-shadow:none}
.weather-avatar[data-avatar-weather="snow"] .avatar-weather-layer .weather-star{width:2.6px;height:2.6px;font-size:0;background:#effaff;text-shadow:none}
.weather-avatar[data-avatar-weather="snow"] > .avatar-weather-layer::after{content:'';position:absolute;inset:9%;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,transparent 15%,#eef8ffd9 48%,transparent 82%);opacity:0;animation:weather-snow-mist 6.4s ease-in-out infinite;animation-play-state:paused}
.weather-avatar[data-avatar-weather="snow"][data-weather-moving="true"] > .avatar-weather-layer::after{animation-play-state:running}
.weather-avatar[data-weather-moving="false"] > .avatar-weather-layer::after{opacity:0!important}
.avatar-weather-layer > i { position:absolute; inset:0; animation:weather-snow var(--duration) linear var(--delay) infinite; animation-play-state:paused; }
.avatar-weather-layer b { position:absolute; display:block; width:2px; height:2px; border-radius:50%; background:#effaff; box-shadow:0 0 2px #6386a9b3; opacity:.8; }
.avatar-weather-layer .weather-star { width:auto; height:auto; font:8px/1 sans-serif; color:#e5f7ff; background:none; box-shadow:none; text-shadow:0 0 2px #6686a3; }
.weather-avatar[data-avatar-weather="rain"] .avatar-weather-layer > i { animation-name:weather-rain; }
.weather-avatar[data-avatar-weather="rain"] .avatar-weather-layer b { width:1px; height:5px; border-radius:1px; background:#afd7ee; box-shadow:0 0 1px #4c78938c; opacity:.65; transform:rotate(12deg); }
.weather-avatar[data-weather-moving="true"] .avatar-weather-layer > i { animation-play-state:running; }
@keyframes weather-snow { 0% {transform:translate(-2%,-9%);opacity:0} 18% {opacity:.8} 55% {transform:translate(2%,3%)} 82% {opacity:.7} 100% {transform:translate(-1%,12%);opacity:0} }
@keyframes weather-rain { 0% {transform:translate(2%,-12%);opacity:0} 20% {opacity:.7} 75% {opacity:.6} 100% {transform:translate(-3%,13%);opacity:0} }
@keyframes weather-snow-mist{0%,15%,42%,100%{opacity:0;transform:translateY(-2%)}25%,31%{opacity:.13;transform:translateY(1%)}}
@media(prefers-reduced-motion:reduce) { .avatar-weather-layer > i { animation:none!important; opacity:.65; } }
@media(prefers-reduced-motion:reduce){.avatar-weather-layer::after{animation:none!important;opacity:0!important}}
.avatar-weather-picker { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 12px 14px; color:#727b89; font-size:12px; }
.avatar-weather-picker select { font:inherit; padding:7px 10px; border:1px solid #dce1e7; border-radius:10px; color:#405a71; background:#fff; }
.avatar-weather-picker small { font-size:11px; }