.kfx {
	--kfx-dur: 1;
	--kfx-delay: 0s;
	--kfx-int: 1;
	--kfx-loop: 1;
	--kfx-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dx: 0;
	--dy: 36;
	--sc: 1;
	--rot: 0;
	--op: 0;
	--ox: 50%;
	--oy: 50%;
}

.kfx[data-pack="enter"],
.kfx[data-pack="exit"],
.kfx[data-pack="origin"],
.kfx[data-pack="bounce-in"],
.kfx[data-pack="bounce-out"],
.kfx[data-pack="flip"],
.kfx[data-pack="flip-out"],
.kfx[data-pack="attn"],
.kfx[data-pack="clip"],
.kfx[data-pack="filter"],
.kfx[data-pack="split"] {
	display: inline-block;
}

.kfx[data-pack="enter"].is-on {
	animation: kfx-enter calc(0.7s * var(--kfx-dur, 1)) var(--kfx-ease) both;
	animation-delay: var(--kfx-delay, 0s);
	animation-iteration-count: var(--kfx-loop, 1);
}
.kfx[data-pack="exit"].is-on {
	animation: kfx-exit calc(0.7s * var(--kfx-dur, 1)) var(--kfx-ease) both;
	animation-delay: var(--kfx-delay, 0s);
	animation-iteration-count: var(--kfx-loop, 1);
}
.kfx[data-pack="origin"].is-on {
	transform-origin: var(--ox) var(--oy);
	animation: kfx-origin calc(0.55s * var(--kfx-dur, 1)) var(--kfx-ease) both;
	animation-delay: var(--kfx-delay, 0s);
	animation-iteration-count: var(--kfx-loop, 1);
}
.kfx[data-pack="bounce-in"].is-on {
	animation: kfx-bouncein calc(0.85s * var(--kfx-dur, 1)) both;
	animation-delay: var(--kfx-delay, 0s);
}
.kfx[data-pack="bounce-out"].is-on {
	animation: kfx-bounceout calc(0.75s * var(--kfx-dur, 1)) both;
	animation-delay: var(--kfx-delay, 0s);
}
.kfx[data-pack="flip"].is-on,
.kfx[data-pack="flip-out"].is-on {
	perspective: 500px;
	animation: kfx-flip3d calc(0.7s * var(--kfx-dur, 1)) both;
	animation-delay: var(--kfx-delay, 0s);
}
.kfx[data-pack="attn"].is-on {
	animation: kfx-attn calc(0.8s * var(--kfx-dur, 1)) ease-in-out var(--kfx-loop, infinite);
	animation-delay: var(--kfx-delay, 0s);
}
.kfx[data-pack="clip"].is-on { animation: kfx-clippack calc(0.8s * var(--kfx-dur, 1)) var(--kfx-ease) both; }
.kfx[data-pack="filter"].is-on { animation: kfx-filterin calc(0.7s * var(--kfx-dur, 1)) ease both; }
.kfx[data-fx="blur-in"].is-on { animation-name: kfx-blurin; }
.kfx[data-fx="grayscale-in"].is-on { animation-name: kfx-grayin; }
.kfx[data-fx="sepia-in"].is-on { animation-name: kfx-sepiain; }
.kfx[data-fx="invert-in"].is-on { animation-name: kfx-invertin; }
.kfx[data-fx="contrast-in"].is-on { animation-name: kfx-contrastin; }
.kfx[data-fx="saturate-in"].is-on { animation-name: kfx-saturatein; }
.kfx[data-fx="brightness-in"].is-on { animation-name: kfx-brightin; }
.kfx[data-fx="hue-in"].is-on { animation-name: kfx-huein; }

.kfx[data-fx="tracking-in-expand"].is-on { animation: kfx-trackin calc(0.8s * var(--kfx-dur, 1)) both; letter-spacing: 0.02em; }
.kfx[data-fx="tracking-in-contract"].is-on { animation: kfx-trackcon calc(0.8s * var(--kfx-dur, 1)) both; }
.kfx[data-fx="tracking-out-expand"].is-on,
.kfx[data-fx="tracking-out-contract"].is-on { animation: kfx-trackout calc(0.8s * var(--kfx-dur, 1)) both; }
.kfx[data-fx="focus-in"].is-on,
.kfx[data-fx="focus-in-expand"].is-on { animation: kfx-focusin calc(0.7s * var(--kfx-dur, 1)) both; }
.kfx[data-fx="text-pop-up"].is-on { animation: kfx-textup calc(0.6s * var(--kfx-dur, 1)) cubic-bezier(.2,1.4,.3,1) both; }
.kfx[data-fx="flicker-in"].is-on { animation: kfx-flickerin calc(1.2s * var(--kfx-dur, 1)) both; }
.kfx[data-fx="flicker-out"].is-on { animation: kfx-flickerout calc(1.2s * var(--kfx-dur, 1)) both; }
.kfx[data-fx="slit-in"].is-on,
.kfx[data-fx="slit-in-vertical"].is-on { animation: kfx-slit calc(0.6s * var(--kfx-dur, 1)) both; }
.kfx[data-fx="vibrate"].is-on { animation: kfx-vib 0.12s linear infinite; }
.kfx[data-fx="vibrate-2"].is-on { animation: kfx-vib 0.08s linear infinite; }
.kfx[data-fx="vibrate-3"].is-on { animation: kfx-vib 0.05s linear infinite; }
.kfx[data-fx="pulsate-fwd"].is-on { animation: kfx-zoom 1.1s ease-in-out infinite; }
.kfx[data-fx="pulsate-bck"].is-on { animation: kfx-pulb 1.1s ease-in-out infinite; }
.kfx[data-fx="ping"].is-on { animation: kfx-ping 1.2s ease-out infinite; }
.kfx[data-fx="shake-lr"].is-on { animation: kfx-shake 0.45s ease-in-out infinite; }
.kfx[data-fx="shake-top"].is-on { animation: kfx-shaket 0.45s ease-in-out infinite; }
.kfx[data-fx="shake-vertical"].is-on { animation: kfx-shakev 0.45s ease-in-out infinite; }
.kfx[data-fx="jello-horizontal"].is-on { animation: kfx-jello 1s ease-in-out infinite; }
.kfx[data-fx="jello-vertical"].is-on { animation: kfx-jellov 1s ease-in-out infinite; }

.kfx[data-pack="grad"] {
	background-size: 220% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.kfx[data-pack="grad"].is-on { animation: kfx-grad 4s linear infinite; }
.kfx[data-fx="grad-sunset"] { background-image: linear-gradient(90deg,#ff7a1a,#ffde3a,#ff4d4d,#ff7a1a); }
.kfx[data-fx="grad-ocean"] { background-image: linear-gradient(90deg,#0b3,#3ec6e8,#004e92,#3ec6e8); }
.kfx[data-fx="grad-forest"] { background-image: linear-gradient(90deg,#b7f08a,#2d6a4f,#b7f08a); }
.kfx[data-fx="grad-candy"] { background-image: linear-gradient(90deg,#ff8bd0,#7af0ff,#ffde3a,#ff8bd0); }
.kfx[data-fx="grad-magma"] { background-image: linear-gradient(90deg,#ff2a00,#ffde3a,#7a0000,#ff2a00); }
.kfx[data-fx="grad-night"] { background-image: linear-gradient(90deg,#3ec6e8,#7c5cff,#0e1a28,#3ec6e8); }
.kfx[data-fx="grad-mint"] { background-image: linear-gradient(90deg,#7CFF9A,#3ec6e8,#7CFF9A); }
.kfx[data-fx="grad-violet"] { background-image: linear-gradient(90deg,#c77dff,#3ec6e8,#c77dff); }
.kfx[data-fx="grad-peach"] { background-image: linear-gradient(90deg,#ffde3a,#ff8bd0,#ff7a1a); }
.kfx[data-fx="grad-steel"] { background-image: linear-gradient(90deg,#d6ecff,#8aa0b5,#fff); }
.kfx[data-fx="grad-toxic"] { background-image: linear-gradient(90deg,#39ff14,#eaff00,#39ff14); }
.kfx[data-fx="grad-dawn"] { background-image: linear-gradient(90deg,#ffde3a,#ff8bd0,#3ec6e8); }
.kfx[data-fx="grad-dusk"] { background-image: linear-gradient(90deg,#ff7a1a,#c77dff,#0e3353); }
.kfx[data-fx="grad-iceberg"] { background-image: linear-gradient(90deg,#fff,#9ad7ff,#3ec6e8); }
.kfx[data-fx="grad-ember"] { background-image: linear-gradient(90deg,#ffde3a,#ff7a1a,#4a0000); }
.kfx[data-fx="grad-cotton"] { background-image: linear-gradient(90deg,#fff,#ff8bd0,#d6ecff); }
.kfx[data-fx="grad-berry"] { background-image: linear-gradient(90deg,#ff4de8,#c77dff,#ff8bd0); }
.kfx[data-fx="grad-sand"] { background-image: linear-gradient(90deg,#ffe066,#c9a227,#fff6c2); }
.kfx[data-fx="grad-neon-city"] { background-image: linear-gradient(90deg,#ff4de8,#3ec6e8,#ffde3a); }
.kfx[data-fx="grad-aurora-2"] { background-image: linear-gradient(90deg,#3ec6e8,#b7f08a,#ff8bd0,#3ec6e8); }
.kfx[data-fx="grad-copper"] { background-image: linear-gradient(90deg,#e8a87c,#8c4a2f,#ffde3a); }
.kfx[data-fx="grad-silver"] { background-image: linear-gradient(90deg,#fff,#9aa,#fff); }
.kfx[data-fx="grad-rose-gold"] { background-image: linear-gradient(90deg,#ffd1c1,#c9a,#fff); }
.kfx[data-fx="grad-matrix-green"] { background-image: linear-gradient(90deg,#7CFF9A,#003,#7CFF9A); }

.kfx[data-pack="split"] .kfx-ch { display: inline-block; opacity: 0; }
.kfx[data-pack="split"].is-on .kfx-ch {
	animation: kfx-enter 0.55s cubic-bezier(.16,1,.3,1) forwards;
	animation-delay: calc(var(--kfx-delay, 0s) + var(--i) * 40ms * var(--kfx-dur, 1));
}

.kfx[data-pack="marquee"] { display: inline-flex; overflow: hidden; max-width: 16ch; }
.kfx[data-pack="marquee"] .kfx-inner { display: inline-block; animation: kfx-marquee calc(7s * var(--kfx-dur, 1)) linear infinite; }
.kfx[data-dir="left"] .kfx-inner { animation-name: kfx-marquee; }
.kfx[data-dir="right"] .kfx-inner { animation-name: kfx-marquee-rev; }
.kfx[data-dir="up"] { writing-mode: vertical-rl; max-height: 7rem; max-width: none; }
.kfx[data-dir="down"] { writing-mode: vertical-rl; max-height: 7rem; max-width: none; }
.kfx[data-dir="up"] .kfx-inner { animation-name: kfx-vert; }
.kfx[data-dir="down"] .kfx-inner { animation-name: kfx-vert; animation-direction: reverse; }

.kfx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4em;
	border: 0; cursor: pointer; font: inherit; font-weight: 800; letter-spacing: .02em;
	padding: .55em 1.1em; border-radius: 10px; color: #10243a; background: #ffde3a;
	position: relative; overflow: hidden; transition: .25s transform, .25s box-shadow, .25s background, .25s color;
}
.kfx-btn[data-btn="outline"] { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.kfx-btn[data-btn="ghost"] { background: transparent; color: inherit; }
.kfx-btn[data-btn="neon"] { background: #07111c; color: #7af0ff; box-shadow: 0 0 0 2px #7af0ff, 0 0 18px #3ec6e8; }
.kfx-btn[data-btn="raised"] { box-shadow: 0 6px 0 #c9a227; }
.kfx-btn[data-btn="pill"] { border-radius: 999px; }
.kfx-btn[data-btn="round"] { border-radius: 50%; width: 3.2em; height: 3.2em; padding: 0; }
.kfx-btn[data-btn="gradient"] { background: linear-gradient(90deg,#3ec6e8,#ffde3a); color: #10243a; }
.kfx-btn[data-btn="glass"] { background: rgba(255,255,255,.12); color: inherit; backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.kfx-btn[data-btn="brutal"] { border-radius: 0; box-shadow: 4px 4px 0 #000; color: #fff; background: #ff4d4d; }
.kfx-btn[data-btn="comic"] { border-radius: 0; box-shadow: 3px 3px 0 #000; }
.kfx-btn[data-btn="cta"] { background: #ff7a1a; color: #fff; border-radius: 999px; }
.kfx-btn[data-btn="danger"] { background: #ff4d4d; color: #fff; }
.kfx-btn[data-btn="success"] { background: #2ecc71; color: #083; }
.kfx-btn[data-btn="chip"] { border-radius: 999px; padding: .3em .8em; font-size: .85em; background: #132433; color: inherit; }
.kfx-btn[data-btn="ticket"] { border-radius: 4px 16px; background: #fff; color: #122; }
.kfx-btn[data-btn="underline"] { background: none; color: inherit; border-radius: 0; box-shadow: inset 0 -3px 0 #ffde3a; }
.kfx-btn[data-btn="soft"] { background: #d6ecff; color: #10243a; border-radius: 14px; }
.kfx-btn[data-btn="3d"] { background: #3ec6e8; color: #062; box-shadow: 0 6px 0 #0e3353; }
.kfx-btn[data-btn="outline-neon"] { background: transparent; color: #7af0ff; box-shadow: inset 0 0 0 2px #7af0ff, 0 0 12px #3ec6e8; }
.kfx-ico[data-icoanim="swing"].is-on { animation: kfx-swing 1s ease-in-out infinite; }
.kfx-ico[data-icoanim="tada"].is-on { animation: kfx-tada 1s ease-in-out infinite; }
.kfx-ico[data-icoanim="float"].is-on { animation: kfx-float 1.4s ease-in-out infinite; }
.kfx-ld[data-ld="leap"], .kfx-ld[data-ld="ios"], .kfx-ld[data-ld="material"], .kfx-ld[data-ld="line-spin"], .kfx-ld[data-ld="gear"], .kfx-ld[data-ld="atom"] {
	border: 3px solid rgba(255,255,255,.2); border-top-color: #3ec6e8; border-radius: 50%;
	animation: kfx-spin360 calc(0.7s * var(--kfx-dur, 1)) linear infinite;
}
.kfx-hov[data-fx="hov-link-slide"]:hover { box-shadow: inset 0 -2px 0 currentColor; }
.kfx-hov[data-fx="hov-link-fill"]:hover { background: currentColor; color: #07111c; }
.kfx-hov[data-fx="hov-link-dots"]:hover { letter-spacing: .2em; }
.kfx-hov[data-fx="hov-link-center"]:hover { background-size: 100% .15em; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 50% 100%; }
.kfx-hov[data-fx="hov-link-left"]:hover { box-shadow: inset 4px 0 0 #ffde3a; padding-left: .3em; }
.kfx-hov[data-fx="hov-link-right"]:hover { box-shadow: inset -4px 0 0 #3ec6e8; padding-right: .3em; }
.kfx-hov[data-fx="hov-link-marker"]:hover { background: #ffde3a; color: #122; }
.kfx-hov[data-fx="hov-link-glow"]:hover { text-shadow: 0 0 10px currentColor; }
.kfx-btn[data-hov="lift"]:hover { transform: translateY(-4px); }
.kfx-btn[data-hov="press"]:hover { transform: translateY(3px) scale(.98); }
.kfx-btn[data-hov="grow"]:hover { transform: scale(1.06); }
.kfx-btn[data-hov="glow"]:hover { box-shadow: 0 0 18px currentColor; }
.kfx-btn[data-hov="shake"]:hover { animation: kfx-shake .4s ease-in-out; }
.kfx-btn[data-hov="shine"]::after {
	content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
	transform: translateX(-120%);
}
.kfx-btn[data-hov="shine"]:hover::after { animation: kfx-btnshine .7s ease; }
.kfx-btn[data-hov="fill-left"] { background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-size: 0 100%; }
.kfx-btn[data-hov="fill-left"]:hover { background-size: 100% 100%; color: #122; }
.kfx-btn[data-hov="fill-up"] { background-image: linear-gradient(#3ec6e8, #3ec6e8); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0; }
.kfx-btn[data-hov="fill-up"]:hover { background-size: 100% 100%; }

.kfx-badge {
	display: inline-block; padding: .2em .55em; border-radius: 999px; font-size: .78em; font-weight: 800;
	background: #ffde3a; color: #122; letter-spacing: .06em; text-transform: uppercase;
}
.kfx-badge[data-badge="hot"], .kfx-badge[data-badge="live"], .kfx-badge[data-badge="alert"], .kfx-badge[data-badge="sold"] { background: #ff4d4d; color: #fff; }
.kfx-badge[data-badge="ok"], .kfx-badge[data-badge="free"], .kfx-badge[data-badge="run"] { background: #2ecc71; }
.kfx-badge[data-badge="vip"], .kfx-badge[data-badge="pro"] { background: #c77dff; color: #fff; }
.kfx-badge[data-badge="b2b"], .kfx-badge[data-badge="expo"] { background: #3ec6e8; color: #10243a; }
.kfx-badge.is-on { animation: kfx-scale .45s cubic-bezier(.16,1,.3,1) both; }

.kfx-hov { display: inline-block; cursor: pointer; transition: .25s; }
.kfx-hov[data-fx="hov-underline"]:hover { box-shadow: inset 0 -3px 0 #ffde3a; }
.kfx-hov[data-fx="hov-overline"]:hover { box-shadow: inset 0 3px 0 #3ec6e8; }
.kfx-hov[data-fx="hov-double"]:hover { box-shadow: inset 0 -2px 0 #ffde3a, inset 0 2px 0 #3ec6e8; }
.kfx-hov[data-fx="hov-wavy"]:hover { text-decoration: underline wavy #ff7a1a; }
.kfx-hov[data-fx="hov-gradient-line"]:hover { background-image: linear-gradient(#ffde3a,#ff7a1a); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .18em; }
.kfx-hov[data-fx="hov-block-fill"]:hover { background: #ffde3a; color: #122; }
.kfx-hov[data-fx="hov-letter-space"]:hover { letter-spacing: .18em; }
.kfx-hov[data-fx="hov-weight"]:hover { font-weight: 900; transform: scale(1.04); }
.kfx-hov[data-fx="hov-skew-hover"]:hover { transform: skewX(-8deg); }
.kfx-hov[data-fx="hov-lift-3d"]:hover { transform: translateY(-6px); text-shadow: 0 8px 0 rgba(0,0,0,.25); }
.kfx-hov[data-fx="hov-color-swap"]:hover { color: #ffde3a; }
.kfx-hov[data-fx="hov-outline-hover"]:hover { -webkit-text-stroke: 1px currentColor; color: transparent; }
.kfx-hov[data-fx="hov-strike-hover"]:hover { text-decoration: line-through; }
.kfx-hov[data-fx="hov-glow-hover"]:hover { text-shadow: 0 0 12px #3ec6e8; }
.kfx-hov[data-fx="hov-blur-hover"]:hover { filter: blur(2px); }
.kfx-hov[data-fx="hov-scale-hover"]:hover { transform: scale(1.12); }
.kfx-hov[data-fx="hov-rotate-hover"]:hover { transform: rotate(-6deg); }
.kfx-hov[data-fx="hov-shadow-hover"]:hover { text-shadow: 6px 6px 0 #3ec6e8; }
.kfx-hov[data-fx="hov-clip-hover"]:hover { clip-path: inset(0 0 40% 0); }
.kfx-hov[data-fx="hov-shimmer-hover"]:hover { animation: kfx-shine 1s linear; }
.kfx-hov[data-fx="hov-border-draw"]:hover { box-shadow: inset 0 0 0 2px currentColor; }
.kfx-hov[data-fx="hov-arrow-follow"]:hover::after { content: " →"; }
.kfx-hov[data-fx="hov-pill-hover"]:hover { background: #132433; border-radius: 999px; padding: 0 .4em; }
.kfx-hov[data-fx="hov-highlight-hover"]:hover { background: #ffde3a; color: #122; }

.kfx-ld, .kfx-prg, .kfx-div { display: inline-block; vertical-align: middle; }
.kfx-ld { width: 2.2em; height: 2.2em; position: relative; }
.kfx-ld[data-ld="spin"], .kfx-ld[data-ld="dual-ring"], .kfx-ld[data-ld="dash"], .kfx-ld[data-ld="clock"] {
	border: 3px solid rgba(255,255,255,.2); border-top-color: #ffde3a; border-radius: 50%;
	animation: kfx-spin360 calc(0.8s * var(--kfx-dur, 1)) linear infinite;
}
.kfx-ld[data-ld="dual-ring"] { border-right-color: #3ec6e8; }
.kfx-ld[data-ld="dots"], .kfx-ld[data-ld="bounce-dots"], .kfx-ld[data-ld="typing"] {
	width: auto; height: auto; display: inline-flex; gap: .25em;
}
.kfx-ld[data-ld="dots"]::before, .kfx-ld[data-ld="dots"]::after,
.kfx-ld[data-ld="bounce-dots"]::before, .kfx-ld[data-ld="bounce-dots"]::after,
.kfx-ld[data-ld="typing"]::before, .kfx-ld[data-ld="typing"]::after {
	content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; animation: kfx-wave .8s ease-in-out infinite;
}
.kfx-ld[data-ld="pulse-ring"] { border: 3px solid #3ec6e8; border-radius: 50%; animation: kfx-ping 1.2s ease-out infinite; }
.kfx-ld[data-ld="orbit"]::before {
	content: ""; position: absolute; inset: 0; border: 3px solid transparent; border-top-color: #ff7a1a; border-radius: 50%;
	animation: kfx-spin360 .9s linear infinite;
}
.kfx-ld[data-ld="bars"], .kfx-ld[data-ld="eq"], .kfx-ld[data-ld="wave-bars"] {
	width: 1.8em; display: flex; gap: 3px; align-items: flex-end;
}
.kfx-ld[data-ld="bars"]::before, .kfx-ld[data-ld="bars"]::after,
.kfx-ld[data-ld="eq"]::before, .kfx-ld[data-ld="eq"]::after {
	content: ""; width: .28em; height: 1.1em; background: #ffde3a; animation: kfx-eq .7s ease-in-out infinite;
}
.kfx-ld[data-ld="grid"] { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.kfx-ld[data-ld="grid"]::before, .kfx-ld[data-ld="grid"]::after { content: ""; background: #3ec6e8; animation: kfx-scale .6s ease-in-out infinite alternate; }
.kfx-ld[data-ld="ripple"] { border: 2px solid #3ec6e8; border-radius: 50%; animation: kfx-ping 1s linear infinite; }
.kfx-ld[data-ld="hourglass"] { width: 0; height: 0; border: .7em solid #ffde3a; border-bottom-color: transparent; animation: kfx-spin360 1s linear infinite; }
.kfx-ld[data-ld="cubes"] { background: #ff7a1a; animation: kfx-jack .8s ease-in-out infinite; }
.kfx-ld[data-ld="progress"] { width: 6em; height: .35em; background: #1d3248; border-radius: 99px; overflow: hidden; }
.kfx-ld[data-ld="progress"]::before { content: ""; display: block; height: 100%; width: 40%; background: #ffde3a; animation: kfx-marquee 1s linear infinite; }
.kfx-ld[data-ld="heart"] { color: #ff4d4d; animation: kfx-heart 1s ease-in-out infinite; }
.kfx-ld[data-ld="heart"]::before { content: "♥"; font-size: 1.6em; }
.kfx-ld[data-ld="pac"] { width: 1.4em; height: 1.4em; background: #ffde3a; border-radius: 50%; clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 50%, 100% 60%, 100% 100%, 0 100%); animation: kfx-spin360 .6s linear infinite; }
.kfx-ld[data-ld="square-spin"] { background: #3ec6e8; animation: kfx-spiny 1s linear infinite; }
.kfx-ld[data-ld="triangle"] { width: 0; height: 0; border-left: .8em solid transparent; border-right: .8em solid transparent; border-bottom: 1.3em solid #ff7a1a; animation: kfx-wobble .7s ease-in-out infinite; }
.kfx-ld[data-ld="flip-square"] { background: #fff; animation: kfx-flip 1s ease-in-out infinite; }
.kfx-ld[data-ld="radar"] { border: 2px solid #7CFF9A; border-radius: 50%; }
.kfx-ld[data-ld="radar"]::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border-top: 2px solid #7CFF9A; animation: kfx-spin360 1s linear infinite; }
.kfx-ld[data-ld="infinity"] { width: 2.4em; border-radius: 1em; box-shadow: inset 0 0 0 3px #3ec6e8; animation: kfx-spin360 1.2s linear infinite; }
.kfx-ld[data-ld="spiral"] { border-radius: 50%; box-shadow: inset 0 0 0 3px #ffde3a; animation: kfx-spin360 .6s linear infinite; }
.kfx-ld[data-ld="blob"] { border-radius: 60% 40% 50% 50%; background: #3ec6e8; animation: kfx-wobble 1s ease-in-out infinite; }
.kfx-ld[data-ld="ladder"] { width: .4em; height: 1.6em; background: repeating-linear-gradient(#ffde3a 0 4px, transparent 4px 8px); animation: kfx-float 1s ease-in-out infinite; }
.kfx-ld[data-ld="spark"] { color: #ffde3a; animation: kfx-spark .7s ease-in-out infinite; }
.kfx-ld[data-ld="spark"]::before { content: "✦"; font-size: 1.6em; }

.kfx-prg { width: 8em; height: .45em; background: #1d3248; border-radius: 99px; overflow: hidden; position: relative; --kfx-pct: 55; }
.kfx-prg i { display: block; height: 100%; width: calc(var(--kfx-pct) * 1%); max-width: 100%; background: linear-gradient(90deg, var(--kfx-c1, #ffde3a), var(--kfx-c2, #ff7a1a)); transition: width .35s ease; }
.kfx-prg:not([data-pct]):not([data-until]) i { width: 55%; animation: kfx-bar 1.4s ease-in-out infinite alternate; }
.kfx-prg[data-prg="bar-stripe"] i { background: repeating-linear-gradient(45deg, var(--kfx-c1, #ffde3a) 0 8px, var(--kfx-c2, #ff7a1a) 8px 16px); }
.kfx-prg[data-prg="ring"] { width: 2.2em; height: 2.2em; border-radius: 50%; background: conic-gradient(var(--kfx-c1, #3ec6e8) calc(var(--kfx-pct) * 1%), #1d3248 0); overflow: hidden; }
.kfx-prg[data-prg="ring"] i { display: none; }
.kfx-prg:not([data-pct]):not([data-until])[data-prg="ring"] { animation: kfx-spin360 1.5s linear infinite; }
.kfx-prg[data-prg="fill-text"] { width: auto; height: auto; background: none; font-weight: 800; overflow: visible; }
.kfx-prg[data-prg="fill-text"] i { display: none; }
.kfx-prg[data-prg="fill-text"]::after {
	content: attr(data-label);
	background: linear-gradient(180deg, var(--kfx-c1, #ffde3a) calc(var(--kfx-pct) * 1%), #8aa3b8 0);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.kfx-prg[data-prg="battery"] { width: 2.4em; height: 1.1em; border: 2px solid currentColor; border-radius: 3px; }
.kfx-prg[data-prg="run-track"] i { border-radius: 99px; }
.kfx-prg:not([data-pct]):not([data-until])[data-prg="run-track"] i { width: 18%; animation: kfx-marquee 1.1s linear infinite; }
.kfx-prg[data-prg="dots-step"] { display: inline-flex; gap: 5px; width: auto; height: auto; background: none; overflow: visible; align-items: center; }
.kfx-prg[data-prg="dots-step"] i { display: none; }
.kfx-prg[data-prg="dots-step"] .kfx-dot { width: .55em; height: .55em; border-radius: 50%; background: #1d3248; }
.kfx-prg[data-prg="dots-step"] .kfx-dot.is-on { background: var(--kfx-c1, #ffde3a); }
.kfx-prg[data-prg="steps"] i { background: repeating-linear-gradient(90deg, var(--kfx-c1, #ffde3a) 0 10px, transparent 10px 14px); }
.kfx-prg[data-prg="countdown-bar"] { height: auto; background: none; overflow: visible; display: flex; flex-direction: column; gap: .35em; width: 10em; }
.kfx-prg[data-prg="countdown-bar"] .kfx-time { font-size: .9em; font-weight: 800; letter-spacing: .04em; }
.kfx-prg[data-prg="countdown-bar"] i { height: .45em; border-radius: 99px; background: #1d3248; }
.kfx-prg[data-prg="countdown-bar"] i { background: linear-gradient(90deg, var(--kfx-c1, #ffde3a), var(--kfx-c2, #ff7a1a)); }
.kfx-prg[data-prg="pulse-bar"] i { box-shadow: 0 0 10px var(--kfx-c1, #ffde3a); }
.kfx-prg:not([data-pct]):not([data-until])[data-prg="pulse-bar"] i { animation: kfx-bar 1.1s ease-in-out infinite alternate; }

.kfx-div { width: 8em; height: 4px; background: currentColor; }
.kfx-div[data-div="wave"] { height: 10px; background: radial-gradient(circle at 8px 4px, currentColor 4px, transparent 5px) repeat-x; background-size: 16px 10px; animation: kfx-zebra 1s linear infinite; }
.kfx-div[data-div="dots"] { height: 0; border-bottom: 4px dotted currentColor; background: none; }
.kfx-div[data-div="dash"] { height: 0; border-bottom: 3px dashed currentColor; background: none; }
.kfx-div[data-div="gradient"] { background: linear-gradient(90deg, transparent, #ffde3a, transparent); }
.kfx-div[data-div="glow"] { box-shadow: 0 0 12px #3ec6e8; background: #3ec6e8; }
.kfx-div[data-div="double"] { height: 8px; background: linear-gradient(currentColor 0 2px, transparent 2px 6px, currentColor 6px 8px); }
.kfx-div[data-div="zigzag"] { height: 10px; background: linear-gradient(135deg, currentColor 25%, transparent 25%) 0 0 / 10px 10px, linear-gradient(225deg, currentColor 25%, transparent 25%) 0 0 / 10px 10px; }
.kfx-div[data-div="fade"] { background: linear-gradient(90deg, transparent, currentColor, transparent); }
.kfx-div[data-div="thick"] { height: 8px; border-radius: 99px; }

.kfx-ico { display: inline-flex; width: 1.6em; height: 1.6em; align-items: center; justify-content: center; }
.kfx-ico svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.kfx-ico[data-icoanim="spin"].is-on { animation: kfx-spin360 1.2s linear infinite; }
.kfx-ico[data-icoanim="pulse"].is-on { animation: kfx-zoom 1.1s ease-in-out infinite; }
.kfx-ico[data-icoanim="bounce"].is-on { animation: kfx-float 1s ease-in-out infinite; }
.kfx-ico[data-icoanim="ping"].is-on { animation: kfx-ping 1.2s ease-out infinite; }
.kfx-ico[data-icoanim="shake"].is-on { animation: kfx-shake .5s ease-in-out infinite; }
.kfx-ico[data-icoanim="beat"].is-on { animation: kfx-heart .9s ease-in-out infinite; }

@keyframes kfx-enter {
	from { opacity: var(--op); transform: translate(calc(var(--dx) * 1px * var(--kfx-int, 1)), calc(var(--dy) * 1px * var(--kfx-int, 1))) scale(var(--sc)) rotate(calc(var(--rot) * 1deg)); }
	to { opacity: 1; transform: none; }
}
@keyframes kfx-exit {
	from { opacity: 1; transform: none; }
	to { opacity: var(--op); transform: translate(calc(var(--dx) * 1px * var(--kfx-int, 1)), calc(var(--dy) * 1px * var(--kfx-int, 1))) scale(var(--sc)) rotate(calc(var(--rot) * 1deg)); }
}
@keyframes kfx-origin {
	from { opacity: var(--op, 0); transform: scale(var(--sc, 0.2)) rotate(calc(var(--rot) * 1deg)); }
	to { opacity: 1; transform: none; }
}
@keyframes kfx-bouncein {
	0% { opacity: 0; transform: translate(calc(var(--dx)*1px*var(--kfx-int, 1)), calc(var(--dy)*1px*var(--kfx-int, 1))) scale(.3); }
	50% { opacity: 1; transform: scale(1.08); }
	70% { transform: scale(.94); }
	100% { transform: none; }
}
@keyframes kfx-bounceout {
	0% { transform: none; }
	30% { transform: scale(1.08); }
	100% { opacity: 0; transform: translate(calc(var(--dx)*1px*var(--kfx-int, 1)), calc(var(--dy)*1px*var(--kfx-int, 1))) scale(.3); }
}
@keyframes kfx-flip3d {
	from { opacity: 0; transform: rotate3d(var(--axis, 1,0,0), calc(var(--ang, -90) * 1deg)); }
	to { opacity: 1; transform: none; }
}
@keyframes kfx-attn {
	0%,100% { transform: none; }
	25% { transform: translate(calc(var(--dx) * .4px * var(--kfx-int, 1)), calc(var(--dy) * .4px * var(--kfx-int, 1))) rotate(-2deg); }
	75% { transform: translate(calc(var(--dx) * -.4px * var(--kfx-int, 1)), calc(var(--dy) * -.4px * var(--kfx-int, 1))) rotate(2deg); }
}
@keyframes kfx-clippack { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.kfx[data-fx="clip-circle"].is-on { animation-name: kfx-clipc; }
.kfx[data-fx="clip-ellipse"].is-on { animation-name: kfx-clipe; }
.kfx[data-fx="clip-diamond"].is-on { animation-name: kfx-clipd; }
.kfx[data-fx="clip-wipe"].is-on { animation-name: kfx-clipwipe; }
.kfx[data-fx="clip-wipe-right"].is-on { animation-name: kfx-clipwipe; }
.kfx[data-fx="clip-wipe-left"].is-on { animation-name: kfx-clipwl; }
.kfx[data-fx="clip-wipe-up"].is-on { animation-name: kfx-clipwu; }
.kfx[data-fx="clip-wipe-down"].is-on { animation-name: kfx-clipwd; }
@keyframes kfx-clipc { from { clip-path: circle(0%); } to { clip-path: circle(80%); } }
@keyframes kfx-clipe { from { clip-path: ellipse(0% 50%); } to { clip-path: ellipse(80% 70%); } }
@keyframes kfx-clipd { from { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); } to { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } }
@keyframes kfx-clipwipe { from { clip-path: inset(var(--wipe-t, 0) var(--wipe-r, 100%) var(--wipe-b, 0) var(--wipe-l, 0)); } to { clip-path: inset(0 0 0 0); } }
@keyframes kfx-clipwl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes kfx-clipwu { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kfx-clipwd { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kfx-blurin { from { filter: blur(10px); opacity: 0; } to { filter: none; opacity: 1; } }
@keyframes kfx-grayin { from { filter: grayscale(1); opacity: .3; } to { filter: none; opacity: 1; } }
@keyframes kfx-sepiain { from { filter: sepia(1); } to { filter: none; } }
@keyframes kfx-invertin { from { filter: invert(1); } to { filter: none; } }
@keyframes kfx-contrastin { from { filter: contrast(0.2); } to { filter: none; } }
@keyframes kfx-saturatein { from { filter: saturate(0); } to { filter: none; } }
@keyframes kfx-brightin { from { filter: brightness(0.2); } to { filter: none; } }
@keyframes kfx-huein { from { filter: hue-rotate(180deg); } to { filter: none; } }
@keyframes kfx-trackin { from { letter-spacing: .4em; opacity: 0; } to { letter-spacing: .02em; opacity: 1; } }
@keyframes kfx-trackcon { from { letter-spacing: -.2em; opacity: 0; } to { letter-spacing: .02em; opacity: 1; } }
@keyframes kfx-trackout { to { letter-spacing: .4em; opacity: 0; } }
@keyframes kfx-focusin { from { filter: blur(8px); opacity: 0; } to { filter: none; opacity: 1; } }
@keyframes kfx-textup { from { opacity: 0; transform: translateY(.6em) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes kfx-flickerin { 0%,10%,20%,30% { opacity: 0; } 5%,15%,25%,100% { opacity: 1; } }
@keyframes kfx-flickerout { 0%,70% { opacity: 1; } 75%,85%,95% { opacity: 0; } 80%,90%,100% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kfx-slit { from { transform: rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kfx-vib { 50% { transform: translate(1px, -1px); } }
@keyframes kfx-pulb { 50% { transform: scale(.86); } }
@keyframes kfx-ping { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes kfx-shaket { 25% { transform: translateY(-5px); } 75% { transform: translateY(5px); } }
@keyframes kfx-shakev { 25% { transform: translateY(-6px); } 75% { transform: translateY(6px); } }
@keyframes kfx-jellov { 25% { transform: skewY(8deg); } 75% { transform: skewY(-8deg); } }
@keyframes kfx-btnshine { to { transform: translateX(120%); } }
@keyframes kfx-eq { 50% { transform: scaleY(.35); } }
@keyframes kfx-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes kfx-filterin { from { opacity: 0; } to { opacity: 1; } }

.kfx.is-on {
	animation-duration: calc(var(--kfx-base, 1s) * var(--kfx-dur, 1)) !important;
	animation-delay: var(--kfx-delay, 0s) !important;
	transform-origin: var(--kfx-origin, center center);
}
.kfx[data-kloop].is-on {
	animation-iteration-count: var(--kfx-loop, 1) !important;
}
.kfx.is-on .kfx-inner,
.kfx.is-on .kfx-ch,
.kfx.is-on .kfx-wd,
.kfx.is-on::before,
.kfx.is-on::after {
	animation-duration: calc(var(--kfx-base, 0.7s) * var(--kfx-dur, 1)) !important;
	animation-delay: calc(var(--kfx-delay, 0s) + var(--i, 0) * 40ms) !important;
}
.kfx[data-kloop].is-on .kfx-inner,
.kfx[data-kloop].is-on .kfx-ch,
.kfx[data-kloop].is-on .kfx-wd,
.kfx[data-kloop].is-on::before,
.kfx[data-kloop].is-on::after {
	animation-iteration-count: var(--kfx-loop, 1) !important;
}
.kfx[data-fx="marquee"],
.kfx[data-pack="marquee"] { --kfx-base: 8s; }
.kfx[data-fx="credits"],
.kfx[data-fx="starwars"] { --kfx-base: 10s; }
.kfx[data-fx="swing"],
.kfx[data-fx="hinge"],
.kfx[data-fx="pendulum"] { transform-origin: var(--kfx-origin, top center); }

.kfx.kfx-box {
	display: block;
	white-space: normal;
	max-width: none;
	perspective: none;
	backface-visibility: visible;
}
.kfx.kfx-box[data-pack="flip"].is-on,
.kfx.kfx-box[data-pack="flip-out"].is-on {
	perspective: none;
}
.kfx.kfx-box[data-kfx-ready]:not(.is-on) {
	opacity: 0;
}
.kfx.kfx-box > .kfx-inner { display: block; width: 100%; }
.kfx.kfx-box[data-pack="grad"],
.kfx.kfx-box[data-fx="gradient"],
.kfx.kfx-box[data-fx="shine"],
.kfx.kfx-box[data-fx="aurora"],
.kfx.kfx-box[data-fx="gold"],
.kfx.kfx-box[data-fx="ice"],
.kfx.kfx-box[data-fx="chrome"],
.kfx.kfx-box[data-fx="fire"],
.kfx.kfx-box[data-fx="liquid"],
.kfx.kfx-box[data-fx="stroke"] {
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: inherit;
	-webkit-text-stroke: 0;
}
.kfx.kfx-box[data-pack="split"].is-on,
.kfx.kfx-box[data-fx="split-up"].is-on,
.kfx.kfx-box[data-fx="split-fade"].is-on,
.kfx.kfx-box[data-fx="split-scale"].is-on,
.kfx.kfx-box[data-fx="words-up"].is-on,
.kfx.kfx-box[data-fx="blur"].is-on,
.kfx.kfx-box[data-fx="bounce"].is-on,
.kfx.kfx-box[data-fx="elastic"].is-on,
.kfx.kfx-box[data-fx="rotate"].is-on,
.kfx.kfx-box[data-fx="drop"].is-on,
.kfx.kfx-box[data-fx="explode"].is-on,
.kfx.kfx-box[data-fx="pixel-in"].is-on,
.kfx.kfx-box[data-fx="cascade"].is-on,
.kfx.kfx-box[data-fx="type"].is-on,
.kfx.kfx-box[data-fx="type-once"].is-on,
.kfx.kfx-box[data-fx="type-fast"].is-on,
.kfx.kfx-box[data-fx="type-highlight"].is-on,
.kfx.kfx-box[data-fx="shuffle"].is-on,
.kfx.kfx-box[data-fx="fade"].is-on,
.kfx.kfx-box[data-fx="scramble"].is-on,
.kfx.kfx-box[data-fx="terminal"].is-on {
	animation-name: kfx-enter;
	animation-fill-mode: both;
}
.kfx.kfx-box[data-fx="wave"].is-on,
.kfx.kfx-box[data-fx="wave-path"].is-on,
.kfx.kfx-box[data-fx="flag"].is-on {
	animation-name: kfx-wave;
	animation-iteration-count: infinite;
}