*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:transparent!important;overflow:hidden;font-family:Arial,Helvetica,sans-serif}#stage{width:100%;height:100%;display:grid;place-items:center;padding:28px}#alert{--accent:#bf9aff;--background:#21172f;--text:#fff;position:relative;display:flex;align-items:center;gap:26px;width:min(620px,100%);min-height:154px;padding:28px 36px;background:var(--background);color:var(--text);border:2px solid var(--accent);border-radius:24px;box-shadow:0 0 35px color-mix(in srgb,var(--accent) 25%,transparent);transform-origin:center}#alert[hidden]{display:none}.alert-symbol{display:grid;place-items:center;flex-shrink:0;width:78px;height:78px;border-radius:24px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);transform:rotate(-7deg)}.alert-symbol svg{width:42px;height:42px;fill:currentColor}.alert-copy{min-width:0;flex:1}#heading{font-size:12px;font-weight:800;letter-spacing:3px;color:var(--accent);line-height:1.5;overflow-wrap:anywhere}#name{font-size:clamp(24px,5vw,38px);font-weight:800;line-height:1.2;margin:5px 0 8px;overflow-wrap:anywhere}#message{font-size:15px;line-height:1.5;overflow-wrap:anywhere}.alert-spark{position:absolute;color:var(--accent);font-size:25px}.spark-one{right:22px;top:-17px}.spark-two{left:22px;bottom:-13px;font-size:18px}#alert[data-style=arcade]{border-radius:0;border-width:4px;box-shadow:7px 7px 0 color-mix(in srgb,var(--accent) 40%,transparent);font-family:'Courier New',monospace}#alert[data-style=arcade] .alert-symbol{border-radius:0;transform:none;border:2px solid var(--accent)}#alert[data-style=minimal]{border:0;border-left:5px solid var(--accent);border-radius:4px;box-shadow:0 8px 28px #0002}#alert[data-style=minimal] .alert-symbol{background:none;width:46px;transform:none}#alert[data-style=minimal] .alert-spark{display:none}#alert.enter[data-animation=pop]{animation:alert-pop .5s cubic-bezier(.2,.9,.3,1.3) both}#alert.enter[data-animation=slide]{animation:alert-slide .5s ease-out both}#alert.enter[data-animation=fade]{animation:alert-fade .5s ease-out both}#alert.exit{transition:opacity .35s,transform .35s;opacity:0;transform:translateY(-12px)}@keyframes alert-pop{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}@keyframes alert-slide{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}@keyframes alert-fade{from{opacity:0}to{opacity:1}}@media(max-width:480px){#stage{padding:20px}#alert{gap:14px;padding:21px;min-height:130px}.alert-symbol{width:45px;height:55px;border-radius:16px}.alert-symbol svg{width:30px}#heading{font-size:10px;letter-spacing:2px}#name{font-size:25px}#message{font-size:12px}.alert-spark{font-size:18px}}@media(prefers-reduced-motion:reduce){#alert.enter{animation:alert-fade .15s!important}#alert.exit{transition:opacity .15s;transform:none}}
#stage{position:relative;isolation:isolate;perspective:900px}
#image-layers{position:absolute;inset:0;pointer-events:none}
#image-layers[hidden]{display:none}
#image-layers[data-canvas=true]{z-index:2}
.canvas-layer[hidden]{display:none!important}
.canvas-layer .image-animation,.canvas-layer .image-idle,.canvas-layer .image-hue,.canvas-layer .layer-content{width:100%;height:100%}
.canvas-layer .layer-content{max-height:none;overflow:hidden;filter:grayscale(var(--gray,0)) sepia(var(--sepia,0)) drop-shadow(0 0 var(--glow,0px) var(--accent)) drop-shadow(0 5px var(--shadow,0px) #0008)}
.canvas-layer[data-kind=text] .layer-content{display:flex;flex-direction:column;justify-content:center;line-height:1.2;white-space:pre-wrap;overflow-wrap:anywhere}
.canvas-layer[data-editing=true]{outline:none}
.canvas-layer[data-editing=true]:hover{outline:1px dashed #ffffff80}
.canvas-layer[data-editing=true][data-selected=true]{outline:2px solid #d4b2ff;outline-offset:3px}
.layer-resize{display:none;position:absolute;right:-12px;bottom:-12px;width:20px;height:20px;border:2px solid #fff;background:#9567ce;border-radius:4px;cursor:nwse-resize;z-index:10;padding:0;touch-action:none}
.canvas-layer[data-editing=true][data-selected=true]>.layer-resize{display:block}
.alert-image{position:absolute;transform:translate(-50%,-50%) rotate(var(--image-rotation,0deg));pointer-events:none;touch-action:none}
.alert-image[data-editing=true]{pointer-events:auto;cursor:grab;outline:1px dashed #ffffff75;outline-offset:5px}
.alert-image[data-editing=true]:active{cursor:grabbing;outline-color:#fff}
.alert-image.canvas-layer[data-editing=true]{outline:none}
.alert-image.canvas-layer[data-editing=true]:hover{outline:1px dashed #ffffff80}
.alert-image.canvas-layer[data-editing=true][data-selected=true]{outline:2px solid #d4b2ff;outline-offset:3px}
.alert-image img{display:block;width:100%;height:auto;max-height:100vh;object-fit:contain;user-select:none;filter:grayscale(var(--gray,0)) sepia(var(--sepia,0)) drop-shadow(0 0 var(--glow,0px) var(--accent)) drop-shadow(0 5px var(--shadow,0px) #0008);border-radius:var(--round,0)}
.alert-image[data-effects~=glow]{--glow:12px}.alert-image[data-effects~=shadow]{--shadow:8px}.alert-image[data-effects~=grayscale]{--gray:1}.alert-image[data-effects~=sepia]{--sepia:1}.alert-image[data-effects~=rounded]{--round:20%}
.canvas-layer .layer-content{filter:grayscale(var(--gray,0)) sepia(var(--sepia,0)) drop-shadow(0 0 var(--glow,0px) var(--accent)) drop-shadow(0 var(--shadow-y,0px) var(--shadow,0px) #0008)}
.canvas-layer[data-effects~=shadow]{--shadow-y:5px}
.alert-image[data-effects~=rainbow] .image-hue{animation:image-hue 5s linear infinite}
@keyframes image-hue{to{filter:hue-rotate(360deg)}}
.image-animation{transform-origin:center;--transition:600ms}.image-hidden{visibility:hidden}
.image-idle{position:relative;isolation:isolate}
.image-synced-effects{position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:1}
.image-synced-effects .alert-sheen{inset:0;overflow:hidden;background:linear-gradient(115deg,transparent 25%,#ffffff55 48%,transparent 70%);animation:alert-shimmer 4s ease-in-out infinite}
.image-synced-effects[data-effects~=halo] .alert-halo,.image-synced-effects[data-effects~=rainbow] .alert-outline,.image-synced-effects[data-effects~=shine] .alert-sheen,.image-synced-effects[data-effects~=scanlines] .alert-scanlines{display:block}
.image-animation.enter{animation:var(--entrance,alert-pop) var(--transition) cubic-bezier(.2,.75,.25,1) both}
.image-animation.exit{animation:var(--exit,alert-out-up) var(--transition) ease-in both}
.image-idle[data-idle=float]{animation:alert-idle-float 3.5s ease-in-out infinite}.image-idle[data-idle=pulse]{animation:alert-idle-pulse 3s ease-in-out infinite}.image-idle[data-idle=sway]{animation:alert-idle-sway 4s ease-in-out infinite}
#motion{position:relative;z-index:1;width:min(620px,100%);transform-origin:center}
#motion[hidden]{display:none}
#motion #alert{width:100%;isolation:isolate;--transition:600ms;--effect-strength:.6}
#alert.enter[data-animation]{animation:var(--entrance,alert-pop) var(--transition) cubic-bezier(.2,.75,.25,1) both}
:is(#alert,.image-animation)[data-animation=pop]{--entrance:alert-pop}
:is(#alert,.image-animation)[data-animation=slide]{--entrance:alert-slide}
:is(#alert,.image-animation)[data-animation=fade]{--entrance:alert-fade}
:is(#alert,.image-animation)[data-animation=bounce]{--entrance:alert-bounce}
:is(#alert,.image-animation)[data-animation=drop]{--entrance:alert-drop}
:is(#alert,.image-animation)[data-animation=left]{--entrance:alert-left}
:is(#alert,.image-animation)[data-animation=right]{--entrance:alert-right}
:is(#alert,.image-animation)[data-animation=flip]{--entrance:alert-flip}
:is(#alert,.image-animation)[data-animation=spin]{--entrance:alert-spin}
:is(#alert,.image-animation)[data-animation=elastic]{--entrance:alert-elastic}
:is(#alert,.image-animation)[data-animation=blur]{--entrance:alert-focus}
:is(#alert,.image-animation)[data-animation=reveal]{--entrance:alert-reveal}
#alert.exit{transition:none;opacity:1;transform:none;animation:var(--exit,alert-out-up) var(--transition) ease-in both}
:is(#alert,.image-animation)[data-exit=up]{--exit:alert-out-up}
:is(#alert,.image-animation)[data-exit=fade]{--exit:alert-out-fade}
:is(#alert,.image-animation)[data-exit=down]{--exit:alert-out-down}
:is(#alert,.image-animation)[data-exit=left]{--exit:alert-out-left}
:is(#alert,.image-animation)[data-exit=right]{--exit:alert-out-right}
:is(#alert,.image-animation)[data-exit=shrink]{--exit:alert-out-shrink}
:is(#alert,.image-animation)[data-exit=spin]{--exit:alert-out-spin}
#motion[data-idle=float]{animation:alert-idle-float 3.5s ease-in-out infinite}
#motion[data-idle=pulse]{animation:alert-idle-pulse 3s ease-in-out infinite}
#motion[data-idle=sway]{animation:alert-idle-sway 4s ease-in-out infinite}
@keyframes alert-bounce{0%{opacity:0;transform:translateY(-75px)}45%{opacity:1;transform:translateY(13px)}68%{transform:translateY(-8px)}85%{transform:translateY(4px)}100%{transform:translateY(0)}}
@keyframes alert-drop{from{opacity:0;transform:translateY(-100px) rotate(-7deg)}75%{opacity:1;transform:translateY(6px) rotate(1deg)}to{transform:translateY(0) rotate(0)}}
@keyframes alert-left{from{opacity:0;transform:translateX(-110px)}to{opacity:1;transform:translateX(0)}}
@keyframes alert-right{from{opacity:0;transform:translateX(110px)}to{opacity:1;transform:translateX(0)}}
@keyframes alert-flip{from{opacity:0;transform:perspective(800px) rotateX(-85deg) scale(.8)}to{opacity:1;transform:perspective(800px) rotateX(0) scale(1)}}
@keyframes alert-spin{from{opacity:0;transform:rotate(-22deg) scale(.35)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes alert-elastic{0%{opacity:0;transform:scale(.4,.7)}45%{opacity:1;transform:scale(1.1,.9)}65%{transform:scale(.96,1.06)}82%{transform:scale(1.02,.98)}100%{transform:scale(1)}}
@keyframes alert-focus{from{opacity:0;filter:blur(14px);transform:scale(1.07)}to{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes alert-reveal{from{opacity:.4;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(-30% -20% -30% -20%)}}
@keyframes alert-out-up{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-65px)}}
@keyframes alert-out-fade{from{opacity:1}to{opacity:0}}
@keyframes alert-out-down{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(80px)}}
@keyframes alert-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-130px)}}
@keyframes alert-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(130px)}}
@keyframes alert-out-shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.3)}}
@keyframes alert-out-spin{from{opacity:1;transform:rotate(0) scale(1)}to{opacity:0;transform:rotate(20deg) scale(.4)}}
@keyframes alert-idle-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes alert-idle-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes alert-idle-sway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
.alert-halo,.alert-outline,.alert-surface{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.alert-halo,.alert-outline{display:none}
.alert-halo{z-index:-1;box-shadow:0 0 22px 5px var(--accent),0 0 50px 10px var(--accent);opacity:calc(var(--effect-strength) * .6)}
.alert-outline{z-index:2;inset:-2px;border:3px solid var(--accent);animation:alert-rainbow 8s linear infinite;opacity:calc(.35 + var(--effect-strength) * .65)}
.alert-surface{overflow:hidden;z-index:0}.alert-copy,.alert-symbol{position:relative;z-index:1}
.alert-sheen,.alert-scanlines{display:none;position:absolute;pointer-events:none}
.alert-sheen{inset:-100% -60%;background:linear-gradient(110deg,transparent 43%,#ffffff50 48%,#ffffff08 52%,transparent 57%);animation:alert-shimmer 3.5s ease-in-out infinite;opacity:var(--effect-strength)}
.alert-scanlines{inset:0;background:repeating-linear-gradient(0deg,#0008 0 1px,transparent 1px 4px);opacity:var(--effect-strength);animation:alert-scan 9s linear infinite}
#alert[data-effects~=halo] .alert-halo,#alert[data-effects~=rainbow] .alert-outline,#alert[data-effects~=shine] .alert-sheen,#alert[data-effects~=scanlines] .alert-scanlines{display:block}
@keyframes alert-rainbow{0%,100%{border-color:#ff9bcb}20%{border-color:#ffdb8c}40%{border-color:#90efba}60%{border-color:#8bd8ff}80%{border-color:#c8a0ff}}
@keyframes alert-shimmer{0%,15%{transform:translateX(-55%)}65%,100%{transform:translateX(55%)}}
@keyframes alert-scan{to{background-position:0 32px}}
#particles{position:absolute;inset:0;overflow:hidden;z-index:2;pointer-events:none;transition:opacity .3s;opacity:1}
#particles.leaving{opacity:0}
.particle{position:absolute;display:block;left:var(--x);font-size:var(--particle-size);color:var(--particle-colour);line-height:1;opacity:0;animation-duration:var(--particle-duration);animation-delay:var(--particle-delay);animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform,opacity}
.particle-confetti{top:-15%;width:var(--particle-size);height:calc(var(--particle-size) * .5);background:var(--particle-colour);animation-name:alert-confetti}
.particle-hearts,.particle-bubbles{bottom:-15%;animation-name:alert-rise}
.particle-bubbles{width:var(--particle-size);height:var(--particle-size);border:1.5px solid currentColor;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.particle-sparkles{top:var(--y);animation-name:alert-twinkle;text-shadow:0 0 8px currentColor}
@keyframes alert-confetti{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:var(--particle-opacity)}90%{opacity:var(--particle-opacity)}100%{opacity:0;transform:translate(var(--drift),var(--travel,360px)) rotate(330deg)}}
@keyframes alert-rise{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:var(--particle-opacity)}75%{opacity:var(--particle-opacity)}100%{opacity:0;transform:translate(var(--drift),calc(-1 * var(--travel,360px))) scale(1.15)}}
@keyframes alert-twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:var(--particle-opacity);transform:scale(1) rotate(50deg)}}
@media(prefers-reduced-motion:reduce){#motion[data-idle]{animation:none}#alert.enter[data-animation]{animation:alert-fade .15s both!important}#alert.exit{animation:alert-out-fade .15s both!important;transform:none}#particles{display:none}.alert-outline,.alert-sheen,.alert-scanlines{animation:none}.alert-sheen{display:none!important}}

:is(#alert,.image-animation)[data-animation=zoom]{--entrance:alert-in-zoom}@keyframes alert-in-zoom{from{opacity:0;transform:scale(.05)}to{opacity:1;transform:scale(1)}}
:is(#alert,.image-animation)[data-animation=zoom-out]{--entrance:alert-in-zoom-out}@keyframes alert-in-zoom-out{from{opacity:0;transform:scale(2)}to{opacity:1;transform:scale(1)}}
:is(#alert,.image-animation)[data-animation=roll-left]{--entrance:alert-in-roll-left}@keyframes alert-in-roll-left{from{opacity:0;transform:translateX(-180px) rotate(-90deg)}to{opacity:1;transform:translateX(0) rotate(0)}}
:is(#alert,.image-animation)[data-animation=roll-right]{--entrance:alert-in-roll-right}@keyframes alert-in-roll-right{from{opacity:0;transform:translateX(180px) rotate(90deg)}to{opacity:1;transform:translateX(0) rotate(0)}}
:is(#alert,.image-animation)[data-animation=flip-y]{--entrance:alert-in-flip-y}@keyframes alert-in-flip-y{from{opacity:0;transform:perspective(800px) rotateY(90deg)}to{opacity:1;transform:perspective(800px) rotateY(0)}}
:is(#alert,.image-animation)[data-animation=swing]{--entrance:alert-in-swing}@keyframes alert-in-swing{from{opacity:0;transform:translateY(-60px) rotate(-30deg)}65%{opacity:1;transform:rotate(8deg)}to{transform:rotate(0)}}
:is(#alert,.image-animation)[data-animation=jack]{--entrance:alert-in-jack}@keyframes alert-in-jack{from{opacity:0;transform:scale(.1) rotate(30deg)}50%{opacity:1;transform:rotate(-10deg)}75%{transform:rotate(5deg)}to{transform:scale(1) rotate(0)}}
:is(#alert,.image-animation)[data-animation=rubber]{--entrance:alert-in-rubber}@keyframes alert-in-rubber{from{opacity:0;transform:scale(.6,1.3)}40%{opacity:1;transform:scale(1.2,.8)}70%{transform:scale(.9,1.1)}to{transform:scale(1)}}
:is(#alert,.image-animation)[data-animation=wipe-up]{--entrance:alert-in-wipe-up}@keyframes alert-in-wipe-up{from{clip-path:inset(100% -30% -30% -30%)}to{clip-path:inset(-30%)}}
:is(#alert,.image-animation)[data-animation=wipe-down]{--entrance:alert-in-wipe-down}@keyframes alert-in-wipe-down{from{clip-path:inset(-30% -30% 100% -30%)}to{clip-path:inset(-30%)}}
:is(#alert,.image-animation)[data-animation=circle]{--entrance:alert-in-circle}@keyframes alert-in-circle{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(90% at 50% 50%)}}
:is(#alert,.image-animation)[data-animation=diamond]{--entrance:alert-in-diamond}@keyframes alert-in-diamond{from{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}to{clip-path:polygon(50% -100%,200% 50%,50% 200%,-100% 50%)}}
:is(#alert,.image-animation)[data-animation=tilt]{--entrance:alert-in-tilt}@keyframes alert-in-tilt{from{opacity:0;transform:translateY(65px) rotate(12deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
:is(#alert,.image-animation)[data-animation=spiral]{--entrance:alert-in-spiral}@keyframes alert-in-spiral{from{opacity:0;transform:rotate(-180deg) scale(.1)}to{opacity:1;transform:rotate(0) scale(1)}}
:is(#alert,.image-animation)[data-animation=stretch]{--entrance:alert-in-stretch}@keyframes alert-in-stretch{from{opacity:0;transform:scaleX(.02)}to{opacity:1;transform:scaleX(1)}}
:is(#alert,.image-animation)[data-animation=unfold]{--entrance:alert-in-unfold}@keyframes alert-in-unfold{from{opacity:0;transform:perspective(800px) rotateX(90deg) scaleY(.2)}to{opacity:1;transform:perspective(800px) rotateX(0) scaleY(1)}}
:is(#alert,.image-animation)[data-exit=zoom]{--exit:alert-exit-zoom}@keyframes alert-exit-zoom{to{opacity:0;transform:scale(2)}}
:is(#alert,.image-animation)[data-exit=blur]{--exit:alert-exit-blur}@keyframes alert-exit-blur{to{opacity:0;filter:blur(18px);transform:scale(.95)}}
:is(#alert,.image-animation)[data-exit=flip]{--exit:alert-exit-flip}@keyframes alert-exit-flip{to{opacity:0;transform:perspective(800px) rotateX(90deg)}}
:is(#alert,.image-animation)[data-exit=flip-y]{--exit:alert-exit-flip-y}@keyframes alert-exit-flip-y{to{opacity:0;transform:perspective(800px) rotateY(90deg)}}
:is(#alert,.image-animation)[data-exit=roll-left]{--exit:alert-exit-roll-left}@keyframes alert-exit-roll-left{to{opacity:0;transform:translateX(-200px) rotate(-90deg)}}
:is(#alert,.image-animation)[data-exit=roll-right]{--exit:alert-exit-roll-right}@keyframes alert-exit-roll-right{to{opacity:0;transform:translateX(200px) rotate(90deg)}}
:is(#alert,.image-animation)[data-exit=drop]{--exit:alert-exit-drop}@keyframes alert-exit-drop{to{opacity:0;transform:translateY(160px) rotate(25deg)}}
:is(#alert,.image-animation)[data-exit=swing]{--exit:alert-exit-swing}@keyframes alert-exit-swing{to{opacity:0;transform:translateY(80px) rotate(-45deg)}}
:is(#alert,.image-animation)[data-exit=wipe-up]{--exit:alert-exit-wipe-up}@keyframes alert-exit-wipe-up{from{clip-path:inset(-30%)}to{clip-path:inset(-30% -30% 100% -30%)}}
:is(#alert,.image-animation)[data-exit=wipe-down]{--exit:alert-exit-wipe-down}@keyframes alert-exit-wipe-down{from{clip-path:inset(-30%)}to{clip-path:inset(100% -30% -30% -30%)}}
:is(#alert,.image-animation)[data-exit=circle]{--exit:alert-exit-circle}@keyframes alert-exit-circle{from{clip-path:circle(90% at 50% 50%)}to{clip-path:circle(0% at 50% 50%)}}
:is(#alert,.image-animation)[data-exit=diamond]{--exit:alert-exit-diamond}@keyframes alert-exit-diamond{from{clip-path:polygon(50% -100%,200% 50%,50% 200%,-100% 50%)}to{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}}
:is(#alert,.image-animation)[data-exit=spiral]{--exit:alert-exit-spiral}@keyframes alert-exit-spiral{to{opacity:0;transform:rotate(180deg) scale(.05)}}
:is(#alert,.image-animation)[data-exit=stretch]{--exit:alert-exit-stretch}@keyframes alert-exit-stretch{to{opacity:0;transform:scaleY(.02)}}
:is(#alert,.image-animation)[data-exit=fold]{--exit:alert-exit-fold}@keyframes alert-exit-fold{to{opacity:0;transform:perspective(800px) rotateX(-90deg) scaleY(.2)}}
:is(#alert,.image-animation)[data-exit=tilt]{--exit:alert-exit-tilt}@keyframes alert-exit-tilt{to{opacity:0;transform:translateY(-75px) rotate(-15deg)}}
@media(prefers-reduced-motion:reduce){.image-animation.enter{animation:alert-fade .15s both!important}.image-animation.exit{animation:alert-out-fade .15s both!important}.image-idle,.image-hue{animation:none!important}}
@media(prefers-reduced-motion:reduce){.image-animation[data-reduced=true].enter{animation:alert-fade var(--transition) both!important}.image-animation[data-reduced=true].exit{animation:alert-out-fade var(--transition) both!important}}