/* Новые рамки: собственные векторные контуры, без размытия и изменения геометрии в кадрах. */
html:root body .decor310-frame-art {position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;overflow:visible;animation:decor310-breathe 5s ease-in-out infinite paused}
html:root body .vmesta-avatar-decor:has(>.decor310-frame-art)::before,html:root body .vmesta-avatar-decor:has(>.decor310-frame-art)::after {content:none!important}
html:root body .vmesta-avatar-decor:has(>.decor310-frame-art)>i {display:block;position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:var(--decor-b,#c6fff0)!important;animation:decor310-glint 4s ease-in-out infinite paused;animation-delay:calc(var(--n)*-.43s)}
html:root body .decor-crystal {--decor-a:#91daff;--decor-b:#e1f7ff}
html:root body .decor-compass {--decor-a:#e6bc73;--decor-b:#fff1c0}
html:root body .decor-eclipse {--decor-a:#b9adff;--decor-b:#ecddff}
html:root body .decor-circuit {--decor-a:#5bdfbf;--decor-b:#c1ffea}
html:root body .decor-laurel {--decor-a:#8bcc7e;--decor-b:#daf3aa}
html:root body .decor-tidal {--decor-a:#65bfea;--decor-b:#c5fffc}
html:root body .decor-honeycomb {--decor-a:#eebd58;--decor-b:#ffeba8}
html:root body .decor-ribbon {--decor-a:#ee98c4;--decor-b:#ffdbeb}
html:root body .decor-prism {--decor-a:#c59bff;--decor-b:#b2f2ff}
html:root body .decor-constellation {--decor-a:#96b9f9;--decor-b:#fff2b2}
html:root body .vmesta-avatar-decor:is(.decor-lanterns,.decor-dandelion,.decor-ripple,.decor-satellites,.decor-confetti,.decor-fireworks,.decor-leaves,.decor-notes,.decor-diamonds,.decor-spiral)>i {display:block;position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;background:var(--decor-a,#bee6ff)!important;border-radius:50%;animation:decor310-rise 8s linear infinite paused;animation-delay:calc(var(--n)*-.67s)}
html:root body .vmesta-avatar-decor.decor-lanterns>i {width:9px!important;height:12px!important;border-radius:4px!important;background:linear-gradient(#ffc772,#f27e62)!important;animation-name:decor310-lantern!important}
html:root body .vmesta-avatar-decor.decor-dandelion>i {width:13px!important;height:13px!important;background:repeating-conic-gradient(#fff 0 8deg,transparent 9deg 45deg)!important;animation-name:decor310-seed!important}
html:root body .vmesta-avatar-decor.decor-ripple>i {width:30px!important;height:18px!important;border:1px solid var(--decor-b,#b2eaff)!important;background:transparent!important;animation:decor310-ripple 5s ease-out infinite paused;animation-delay:calc(var(--n)*-.7s)}
html:root body .vmesta-avatar-decor.decor-satellites>i {left:50%!important;top:50%!important;width:5px!important;height:5px!important;animation:decor310-orbit 9s linear infinite paused;animation-delay:calc(var(--n)*-1.1s)}
html:root body .vmesta-avatar-decor.decor-confetti>i {border-radius:1px!important;width:4px!important;height:8px!important;background:hsl(calc(var(--n)*47) 80% 72%)!important;animation:decor310-confetti 6s linear infinite paused;animation-delay:calc(var(--n)*-.53s)}
html:root body .vmesta-avatar-decor.decor-fireworks>i {left:50%!important;top:45%!important;width:3px!important;height:3px!important;background:#ffd991!important;animation:decor310-firework 3s ease-out infinite paused;animation-delay:calc(var(--n)*-.02s)}
html:root body .vmesta-avatar-decor.decor-leaves>i {width:8px!important;height:13px!important;border-radius:80% 0!important;background:hsl(calc(20 + var(--n)*3) 75% 65%)!important;animation:decor310-leaf 7s ease-in-out infinite paused;animation-delay:calc(var(--n)*-.68s)}
html:root body .vmesta-avatar-decor.decor-notes>i {background:transparent!important;width:16px!important;height:20px!important;animation-name:decor310-note!important}
html:root body .vmesta-avatar-decor.decor-notes>i::after {content:'♪';font-style:normal;font-size:19px;color:var(--decor-b,#e6c2ff)}
html:root body .vmesta-avatar-decor.decor-diamonds>i {border-radius:0!important;background:linear-gradient(45deg,#bdd5ff,#fff)!important;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:decor310-glint 3s ease-in-out infinite paused;animation-delay:calc(var(--n)*-.39s)}
html:root body .vmesta-avatar-decor.decor-spiral>i {left:50%!important;top:50%!important;width:4px!important;height:4px!important;background:#c5b3ff!important;animation:decor310-spiral 6s linear infinite paused;animation-delay:calc(var(--n)*-.5s)}
@keyframes decor310-breathe {0%,100%{opacity:.65}50%{opacity:1}}
/* Тип траектории не должен перекрываться общим правилом коллекции. */
html:root body .vmesta-avatar-decor.decor-ripple>i {animation-name:decor310-ripple!important;animation-duration:5s!important}
html:root body .vmesta-avatar-decor.decor-satellites>i {animation-name:decor310-orbit!important;animation-duration:9s!important}
html:root body .vmesta-avatar-decor.decor-confetti>i {animation-name:decor310-confetti!important;animation-duration:6s!important}
html:root body .vmesta-avatar-decor.decor-fireworks>i {animation-name:decor310-firework!important;animation-duration:3s!important}
html:root body .vmesta-avatar-decor.decor-leaves>i {animation-name:decor310-leaf!important;animation-duration:7s!important}
html:root body .vmesta-avatar-decor.decor-diamonds>i {animation-name:decor310-glint!important;animation-duration:3s!important}
html:root body .vmesta-avatar-decor.decor-spiral>i {animation-name:decor310-spiral!important;animation-duration:6s!important}
@keyframes decor310-glint {0%,100%{opacity:.12;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
@keyframes decor310-rise {from{transform:translateY(70px);opacity:0}20%,75%{opacity:.8}to{transform:translateY(-100px);opacity:0}}
@keyframes decor310-lantern {from{transform:translate(-12px,90px) rotate(-8deg);opacity:0}30%,65%{opacity:.85}to{transform:translate(15px,-120px) rotate(8deg);opacity:0}}
@keyframes decor310-seed {from{transform:translate(-25px,60px) rotate(0);opacity:0}25%,75%{opacity:.8}to{transform:translate(38px,-70px) rotate(150deg);opacity:0}}
@keyframes decor310-ripple {0%{transform:scale(.15);opacity:0}15%{opacity:.85}100%{transform:scale(3);opacity:0}}
@keyframes decor310-orbit {from{transform:rotate(0) translateX(44px) scale(.7)}50%{transform:rotate(180deg) translateX(44px) scale(1.2)}to{transform:rotate(360deg) translateX(44px) scale(.7)}}
@keyframes decor310-confetti {from{transform:translateY(-90px) rotate(0);opacity:0}20%,80%{opacity:.9}to{transform:translateY(110px) rotate(520deg);opacity:0}}
@keyframes decor310-firework {0%,20%{transform:rotate(var(--angle)) translateX(0);opacity:0}25%{opacity:1}85%,100%{transform:rotate(var(--angle)) translateX(65px);opacity:0}}
@keyframes decor310-leaf {0%{transform:translate(-12px,-100px) rotate(-30deg);opacity:0}25%,75%{opacity:.85}50%{transform:translate(18px,0) rotate(50deg)}100%{transform:translate(-12px,110px) rotate(110deg);opacity:0}}
@keyframes decor310-note {from{transform:translate(0,50px) rotate(-10deg);opacity:0}25%,65%{opacity:.85}to{transform:translate(20px,-70px) rotate(15deg);opacity:0}}
@keyframes decor310-spiral {from{transform:rotate(0) translateX(5px) scale(.3);opacity:0}20%{opacity:1}to{transform:rotate(600deg) translateX(60px) scale(1.1);opacity:0}}
/* Миниатюры не перерисовывают соседей. Невидимые украшения обслуживает существующий наблюдатель. */
html:root body .vmesta-decor-preview {contain:layout paint style}
html:root body #cover-animation-grid .cover-animation-preview {contain:layout paint style}
html:root body #cover-animation-grid .cover-animation-preview:not(.is-preview-visible) *,
html:root body #cover-animation-grid .cover-animation-preview:not(.is-preview-visible)::before,
html:root body #cover-animation-grid .cover-animation-preview:not(.is-preview-visible)::after {animation-play-state:paused!important}
html:root body .decor-visible .decor310-frame-art {animation-play-state:running!important}
/* Сокращённая запись animation в новых пресетах также задаёт paused.
   Явный приоритет состояния запуска обязателен для всех частиц, не только SVG. */
html:root body .decor-visible > .vmesta-avatar-decor > i,
html:root body .decor-visible > .vmesta-avatar-decor::before,
html:root body .decor-visible > .vmesta-avatar-decor::after {animation-play-state:running!important}
html:root:is(.decor-page-hidden,.decor-media-hidden) body .vmesta-avatar-decor > i,
html:root:is(.decor-page-hidden,.decor-media-hidden) body .vmesta-avatar-decor::before,
html:root:is(.decor-page-hidden,.decor-media-hidden) body .vmesta-avatar-decor::after,
html:root:is(.decor-page-hidden,.decor-media-hidden) body .decor310-frame-art,
html:root body:is(.messenger-recording-active,.vmesta-image-editor-open) .vmesta-avatar-decor > i,
html:root body:is(.messenger-recording-active,.vmesta-image-editor-open) .decor310-frame-art,
html:root body .decor-motion-paused > .vmesta-avatar-decor > i,
html:root body .decor-motion-paused .decor310-frame-art {animation-play-state:paused!important}
html:root.decor-page-hidden body .decor310-frame-art {animation-play-state:paused!important}
@media(min-width:768px) {
 html:root body .vmesta-avatar-decor:not(.decor-satellites,.decor-fireworks,.decor-spiral)>i {left:var(--x)!important}
 html:root body .vmesta-avatar-decor:is(.decor-sparkles,.decor-fireflies)>i {top:var(--y)!important}
 html:root body .cover-preview-scene-web .preview-aurora-ribbon {inset:6% -8% 8%!important;width:auto!important;height:auto!important;filter:none!important;border-radius:0!important;opacity:.75!important;background:repeating-linear-gradient(93deg,transparent 0 3px,#84ffce35 4px 7px),linear-gradient(0deg,transparent,#76f6b8aa 25%,#64d7e875 48%,#9976ed66 75%,transparent)!important;clip-path:polygon(0 25%,14% 8%,28% 24%,43% 13%,59% 31%,73% 9%,87% 22%,100% 10%,100% 71%,86% 84%,72% 68%,58% 92%,43% 74%,28% 91%,14% 74%,0 85%);animation:decor310-curtain 10s ease-in-out infinite!important}
 html:root body .cover-preview-scene-web .ribbon-b {animation-delay:-4s!important;opacity:.45!important;scale:1.1 .8}
 html:root body .cover-preview-scene-web .ribbon-c {animation-delay:-7s!important;opacity:.3!important;scale:.9 1.1}
}
@keyframes decor310-curtain {0%,100%{transform:translateX(-2%) skewX(-7deg)}50%{transform:translateX(3%) skewX(9deg)}}
@media(prefers-reduced-motion:reduce) {
 html:root body .vmesta-avatar-decor[class*="decor-"] > i,
 html:root body .vmesta-avatar-decor[class*="decor-"] > .decor310-frame-art {animation:none!important}
 html:root body .vmesta-avatar-decor *,html:root body .vmesta-avatar-decor::before,html:root body .vmesta-avatar-decor::after,html:root body .cover-preview-scene-web .preview-aurora-ribbon {animation:none!important}
}