/* Shared artwork and distinct motions for the page and the editor. */
.sl-host{--sl-accent:var(--sm-accent,#ac70cb);--sl-light:color-mix(in srgb,var(--sl-accent) 35%,white);--sl-deep:color-mix(in srgb,var(--sl-accent) 65%,#321643);position:relative;isolation:isolate}
.sl-scene{--sl-speed:2.6s;--sl-size:1;position:relative;display:grid;place-items:center;width:150px;height:150px;margin:auto;perspective:500px}
.sl-symbol{display:block!important;width:104px!important;height:104px!important;max-width:none!important;overflow:visible;filter:drop-shadow(0 9px 9px color-mix(in srgb,var(--sl-accent) 28%,transparent));transform-origin:center;animation-duration:var(--sl-speed);animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.sl-halo{position:absolute;inset:20px;border-radius:50%;background:var(--sl-accent);opacity:.16;filter:blur(24px);animation:sl-halo 3s ease-in-out infinite}
.sl-ring{position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--sl-accent) 20%,transparent);border-radius:50%;transform:rotate(-25deg) scaleY(.7)}
.sl-spark{position:absolute;color:var(--sl-accent);font-size:17px;animation:sl-twinkle 3s ease-in-out infinite}.sl-spark-a{top:10px;right:9px}.sl-spark-b{bottom:14px;left:10px;animation-delay:-1.5s}
.sl-particles{position:absolute!important;inset:0;width:100%!important;height:100%!important;pointer-events:none!important;z-index:6}.sl-particles[hidden]{display:none!important}.sl-fullscreen{position:fixed!important;z-index:10000}
.sl-still *{animation-play-state:paused!important}
.sl-scene[data-symbol=heart] .sl-symbol{animation-name:sl-heart}.sl-scene[data-symbol=star] .sl-symbol{animation-name:sl-star}.sl-scene[data-symbol=dice] .sl-symbol{animation-name:sl-dice}.sl-scene[data-symbol=flame] .sl-symbol{animation-name:sl-flame}.sl-scene[data-symbol=bolt] .sl-symbol{animation-name:sl-bolt}.sl-scene[data-symbol=diamond] .sl-symbol{animation-name:sl-diamond}.sl-scene[data-symbol=crown] .sl-symbol{animation-name:sl-crown}.sl-scene[data-symbol=rocket] .sl-symbol{animation-name:sl-rocket}.sl-scene[data-symbol=moon] .sl-symbol{animation-name:sl-moon}.sl-scene[data-symbol=sun] .sl-symbol{animation-name:sl-sun}.sl-scene[data-symbol=flower] .sl-symbol{animation-name:sl-flower}.sl-scene[data-symbol=butterfly] .sl-symbol{animation-name:sl-butterfly}.sl-scene[data-symbol=music] .sl-symbol{animation-name:sl-music}.sl-scene[data-symbol=planet] .sl-symbol{animation-name:sl-planet}.sl-scene[data-symbol=gift] .sl-symbol{animation-name:sl-gift}.sl-scene[data-symbol=trophy] .sl-symbol{animation-name:sl-trophy}.sl-scene[data-symbol=balloon] .sl-symbol{animation-name:sl-balloon}.sl-scene[data-symbol=confetti] .sl-symbol{animation-name:sl-confetti}.sl-scene[data-symbol=gamepad] .sl-symbol{animation-name:sl-gamepad}
@keyframes sl-halo{50%{transform:scale(1.2);opacity:.25}}@keyframes sl-twinkle{50%{opacity:.25;transform:scale(.6) rotate(30deg)}}
@keyframes sl-heart{0%,40%,100%{transform:scale(var(--sl-size))}12%,30%{transform:scale(calc(var(--sl-size)*1.1))}21%{transform:scale(var(--sl-size))}}
@keyframes sl-star{0%,100%{transform:rotate(-9deg) scale(var(--sl-size))}50%{transform:rotate(9deg) scale(calc(var(--sl-size)*1.1))}}
@keyframes sl-dice{0%,100%{transform:translateY(0) rotate(-8deg)}25%{transform:translateY(-10px) rotate(12deg)}50%{transform:translateY(0) rotate(90deg)}75%{transform:translateY(-6px) rotate(82deg)}}
@keyframes sl-flame{0%,100%{transform:scale(.95,1) skewX(-3deg)}50%{transform:scale(1.03,1.1) skewX(4deg)}}
@keyframes sl-bolt{0%,70%,100%{transform:translate(0)}73%{transform:translate(-4px,2px)}76%{transform:translate(4px,-3px)}80%{transform:translate(-2px,1px)}}
@keyframes sl-diamond{0%,100%{transform:rotateY(-20deg) translateY(2px)}50%{transform:rotateY(20deg) translateY(-8px)}}
@keyframes sl-crown{0%,100%{transform:translateY(3px) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes sl-rocket{0%,100%{transform:translate(-2px,3px) rotate(-3deg)}50%{transform:translate(3px,-4px) rotate(3deg)}}
@keyframes sl-moon{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(5deg) translateY(-4px)}}
@keyframes sl-sun{0%,100%{transform:translateY(2px) rotate(-5deg) scale(.98)}50%{transform:translateY(-6px) rotate(5deg) scale(1.04)}}
@keyframes sl-flower{0%,100%{transform:rotate(-10deg) scale(.94)}50%{transform:rotate(10deg) scale(1.04)}}
@keyframes sl-butterfly{0%,50%,100%{transform:rotateY(0) translateY(0)}25%,75%{transform:rotateY(28deg) translateY(-5px)}}
@keyframes sl-music{0%,100%{transform:translateY(0) rotate(-6deg)}25%{transform:translateY(-8px) rotate(3deg)}75%{transform:translateY(-4px) rotate(-3deg)}}
@keyframes sl-planet{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-7px)}}
@keyframes sl-gift{0%,60%,100%{transform:rotate(0) scale(1)}67%{transform:rotate(-6deg)}74%{transform:rotate(6deg)}81%{transform:rotate(-3deg) scale(1.04)}}
@keyframes sl-trophy{0%,100%{transform:translateY(0) scale(.97)}40%{transform:translateY(-8px) scale(1.03)}60%{transform:translateY(-7px) scale(1.03)}}
@keyframes sl-balloon{0%,100%{transform:translate(-4px,3px) rotate(-5deg)}50%{transform:translate(5px,-8px) rotate(5deg)}}
@keyframes sl-confetti{0%,100%{transform:rotate(-8deg)}45%{transform:rotate(0) scale(1.07)}55%{transform:rotate(-5deg) scale(.96)}}
@keyframes sl-gamepad{0%,45%,100%{transform:rotate(0)}50%{transform:rotate(-5deg) translateY(-2px)}55%{transform:rotate(5deg) translateY(-2px)}60%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.sl-scene *{animation:none!important}}

/* Sport, mechanics, animals and outdoor adventures. */
.sl-scene[data-symbol=camera] .sl-symbol{animation-name:sl-camera}
@keyframes sl-camera{0%,100%{transform:rotate(-3deg)}45%{transform:rotate(2deg) scale(1.04)}55%{transform:rotate(2deg) scale(.98)}}
.sl-scene[data-symbol=sword] .sl-symbol{animation-name:sl-sword}
@keyframes sl-sword{0%,70%,100%{transform:rotate(-8deg)}78%{transform:rotate(18deg) translate(4px,-4px)}86%{transform:rotate(-12deg)}}
.sl-scene[data-symbol=shield] .sl-symbol{animation-name:sl-shield}
@keyframes sl-shield{0%,100%{transform:rotateY(-12deg) scale(.98)}50%{transform:rotateY(12deg) scale(1.04)}}
.sl-scene[data-symbol=axe] .sl-symbol{animation-name:sl-axe}
@keyframes sl-axe{0%,100%{transform:rotate(-20deg)}55%{transform:rotate(12deg) translateY(-3px)}70%{transform:rotate(30deg) translateY(3px)}}
.sl-scene[data-symbol=helmet] .sl-symbol{animation-name:sl-helmet}
@keyframes sl-helmet{0%,100%{transform:translateX(-3px) rotate(-3deg)}50%{transform:translateX(4px) rotate(3deg)}}
.sl-scene[data-symbol=dinosaur] .sl-symbol{animation-name:sl-dinosaur}
@keyframes sl-dinosaur{0%,50%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-6px) rotate(-4deg)}70%{transform:translateY(-4px) rotate(3deg)}}
.sl-scene[data-symbol=robot] .sl-symbol{animation-name:sl-robot}
@keyframes sl-robot{0%,45%,100%{transform:translateX(-3px)}46%,90%{transform:translateX(3px)}25%,70%{transform:translateY(-3px)}}
.sl-scene[data-symbol=wolf] .sl-symbol{animation-name:sl-wolf}
@keyframes sl-wolf{0%,100%{transform:rotate(-3deg) translateY(2px)}35%{transform:rotate(3deg) translateY(-4px)}70%{transform:rotate(-2deg) translateY(-1px)}}
.sl-scene[data-symbol=bear] .sl-symbol{animation-name:sl-bear}
@keyframes sl-bear{0%,100%{transform:rotate(-4deg) scale(.98)}50%{transform:rotate(4deg) scale(1.02)}}
.sl-scene[data-symbol=shark] .sl-symbol{animation-name:sl-shark}
@keyframes sl-shark{0%,100%{transform:translateX(-5px) rotate(-3deg)}50%{transform:translateX(5px) rotate(4deg)}}
.sl-scene[data-symbol=eagle] .sl-symbol{animation-name:sl-eagle}
@keyframes sl-eagle{0%,100%{transform:scaleX(.92) translateY(2px)}50%{transform:scaleX(1.06) translateY(-7px)}}
.sl-scene[data-symbol=football] .sl-symbol{animation-name:sl-football}
@keyframes sl-football{0%,100%{transform:translateY(2px) rotate(-8deg)}50%{transform:translateY(-10px) rotate(20deg)}}
.sl-scene[data-symbol=basketball] .sl-symbol{animation-name:sl-basketball}
@keyframes sl-basketball{0%,50%,100%{transform:translateY(5px) scaleY(.95)}25%,75%{transform:translateY(-10px) scaleY(1)}}
.sl-scene[data-symbol=rugby] .sl-symbol{animation-name:sl-rugby}
@keyframes sl-rugby{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(18deg) translateY(-5px)}}
.sl-scene[data-symbol=tennis] .sl-symbol{animation-name:sl-tennis}
@keyframes sl-tennis{0%,50%,100%{transform:translateY(4px) rotate(0)}25%{transform:translateY(-8px) rotate(12deg)}75%{transform:translateY(-6px) rotate(-12deg)}}
.sl-scene[data-symbol=boxing] .sl-symbol{animation-name:sl-boxing}
@keyframes sl-boxing{0%,60%,100%{transform:translateX(-2px)}68%{transform:translateX(8px) rotate(5deg)}78%{transform:translateX(-5px)}88%{transform:translateX(5px)}}
.sl-scene[data-symbol=dumbbell] .sl-symbol{animation-name:sl-dumbbell}
@keyframes sl-dumbbell{0%,100%{transform:translateY(5px)}35%,65%{transform:translateY(-9px)}}
.sl-scene[data-symbol=medal] .sl-symbol{animation-name:sl-medal}
@keyframes sl-medal{0%,100%{transform:rotateY(-18deg) rotate(-3deg)}50%{transform:rotateY(18deg) rotate(3deg)}}
.sl-scene[data-symbol=target] .sl-symbol{animation-name:sl-target}
@keyframes sl-target{0%,100%{transform:scale(.97)}50%{transform:scale(1.04) rotate(-3deg)}}
.sl-scene[data-symbol=racecar] .sl-symbol{animation-name:sl-racecar}
@keyframes sl-racecar{0%,100%{transform:translateX(-4px)}45%{transform:translateX(5px) rotate(-2deg)}60%{transform:translateX(3px) rotate(2deg)}}
.sl-scene[data-symbol=motorbike] .sl-symbol{animation-name:sl-motorbike}
@keyframes sl-motorbike{0%,100%{transform:rotate(-4deg) translateX(-2px)}45%{transform:rotate(5deg) translateX(4px)}60%{transform:rotate(3deg) translateY(-2px)}}
.sl-scene[data-symbol=wheel] .sl-symbol{animation-name:sl-wheel}
@keyframes sl-wheel{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}}
.sl-scene[data-symbol=gear] .sl-symbol{animation-name:sl-gear}
@keyframes sl-gear{0%{transform:rotate(0)}100%{transform:rotate(120deg)}}
.sl-scene[data-symbol=wrench] .sl-symbol{animation-name:sl-wrench}
@keyframes sl-wrench{0%,100%{transform:rotate(-16deg)}45%,65%{transform:rotate(16deg)}}
.sl-scene[data-symbol=hammer] .sl-symbol{animation-name:sl-hammer}
@keyframes sl-hammer{0%,50%,100%{transform:rotate(-14deg) translateY(-3px)}62%{transform:rotate(18deg) translateY(5px)}74%{transform:rotate(-10deg)}}
.sl-scene[data-symbol=anchor] .sl-symbol{animation-name:sl-anchor}
@keyframes sl-anchor{0%,100%{transform:rotate(-7deg) translateY(-2px)}50%{transform:rotate(7deg) translateY(3px)}}
.sl-scene[data-symbol=compass] .sl-symbol{animation-name:sl-compass}
@keyframes sl-compass{0%,100%{transform:rotate(-10deg)}35%{transform:rotate(15deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
.sl-scene[data-symbol=mountain] .sl-symbol{animation-name:sl-mountain}
@keyframes sl-mountain{0%,100%{transform:translateY(3px) scale(.96)}50%{transform:translateY(-4px) scale(1.03)}}
.sl-scene[data-symbol=campfire] .sl-symbol{animation-name:sl-campfire}
@keyframes sl-campfire{0%,100%{transform:scale(.97,1) skewX(-2deg)}50%{transform:scale(1.02,1.06) skewX(2deg)}}
.sl-scene[data-symbol=headset] .sl-symbol{animation-name:sl-headset}
@keyframes sl-headset{0%,100%{transform:rotate(-4deg)}25%{transform:translateY(-3px) rotate(0)}50%{transform:rotate(4deg)}75%{transform:translateY(-2px) rotate(0)}}
.sl-scene[data-symbol=drone] .sl-symbol{animation-name:sl-drone}
@keyframes sl-drone{0%,100%{transform:translate(-4px,2px) rotate(-3deg)}33%{transform:translate(4px,-5px) rotate(3deg)}66%{transform:translate(2px,-2px) rotate(-2deg)}}