.cx-defs-holder, .cx-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.cx-title { --glow: 216 199 156; display: inline-flex; align-items: center; gap: .28em; flex: none; position: relative; white-space: nowrap; vertical-align: baseline;
  font: italic 600 1em/1.15 var(--font-display, "Sitka Banner", "Sitka Heading", "Palatino Linotype", "Book Antiqua", Georgia, serif); letter-spacing: .012em; text-transform: none; text-shadow: none; color: var(--title, #d8c79c); }
.epithet.cx-title::before { content: none; }
.cx-name { position: relative; display: inline-grid; }
.cx-name > .cx-word { grid-area: 1 / 1; }
.cx-title[data-cx-live] { isolation: isolate; }
.cx-word { padding: 0 .08em; background-image: var(--fill); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cx-under { background: none; -webkit-text-fill-color: transparent; text-shadow: var(--shade, 0 1px 0 rgba(0, 0, 0, .6)); -webkit-user-select: none; user-select: none; pointer-events: none; }
.cx-shift { display: none; -webkit-user-select: none; user-select: none; pointer-events: none; }
.cx-mark { flex: none; width: 1.12em; height: 1.12em; }
.cx-cap { flex: none; width: 1.5em; height: 1em; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .cx-word { color: var(--title); -webkit-text-fill-color: currentColor; background: none; } }

.cx-common { --fill: linear-gradient(#d8c79c, #d8c79c); --shade: 0 1px 0 rgba(0, 0, 0, .6); font-weight: 400; }
.cx-uncommon { --glow: 127 220 140; --fill: linear-gradient(180deg, #f1fff1 0%, #b4f5b9 34%, #49b95c 55%, #7fdc8c 78%, #c9f7cd 100%); --shade: 0 1px 0 #062a10, 0 0 .35em rgba(127, 220, 140, .25); }
.cx-rare { --glow: 93 180 255; --fill: linear-gradient(180deg, #f6fcff 0%, #b5e1ff 34%, #2f80dc 53%, #5db4ff 76%, #cdeaff 100%); --shade: 0 1px 0 #04172f, 0 0 .45em rgba(93, 180, 255, .42); }
.cx-epic { --glow: 195 140 255; --fill: linear-gradient(180deg, #fdf6ff 0%, #e2c2ff 32%, #8c4fe6 53%, #c38cff 76%, #f2e4ff 100%); --shade: 0 1px 0 #1c0636, 0 0 .6em rgba(195, 140, 255, .55); }
.cx-legendary { --glow: 255 168 60; --fill: linear-gradient(180deg, #fffdf0 0%, #ffe8a6 26%, #ffbb4d 47%, #b8560f 55%, #ff9d33 74%, #ffe0a0 100%); --shade: 0 1px 0 #3a1400, 0 0 .7em rgba(255, 168, 60, .68); }
.cx-mythic { --glow: 255 92 214; --fill: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 46%, rgba(60, 0, 60, .42) 53%, rgba(255, 255, 255, 0) 64%), linear-gradient(100deg, #ffd6f5 0%, #ff5cd6 20%, #b46cff 42%, #6fdcff 60%, #ff7fe0 80%, #fff2fc 100%);
  --shade: 0 1px 0 #2b0526, 0 0 .8em rgba(255, 92, 214, .68); }
.cx-mythic .cx-shift { --fill: linear-gradient(180deg, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, 0) 46%, rgba(10, 0, 60, .4) 53%, rgba(255, 255, 255, 0) 64%), linear-gradient(100deg, #e9fbff 0%, #6fdcff 22%, #9a7bff 46%, #ff5cd6 70%, #ffe6fb 100%); }
.cx-celestial { --glow: 140 130 255; --fill: linear-gradient(180deg, #ffffff 0%, #fff7dc 26%, #f7d47c 44%, #d8c4ff 60%, #9c8bff 80%, #efeaff 100%);
  --shade: 0 1px 0 #0a0630, 0 0 .3em rgba(255, 236, 170, .9), 0 0 1em rgba(130, 120, 255, .8); }
.cx-celestial .cx-shift { --fill: linear-gradient(180deg, #ffffff 0%, #fff3c4 30%, #ffd36b 48%, #fff0b8 64%, #e9dcff 84%, #ffffff 100%); }
.cx-common .cx-word, .cx-uncommon .cx-word { font-weight: 500; }
.cx-title.cx-ev { --glow: 195 140 255;
  --fill: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--title) 42%, #fff) 30%, color-mix(in srgb, var(--title) 58%, #000) 53%, var(--title) 76%, color-mix(in srgb, var(--title) 28%, #fff) 100%);
  --shade: 0 1px 0 color-mix(in srgb, var(--title) 20%, #040208), 0 0 .6em color-mix(in srgb, var(--title) 55%, transparent);
  --gem-k: color-mix(in srgb, var(--title) 22%, #050208); --gem-l: color-mix(in srgb, var(--title) 32%, #fff); --gem-m: var(--title); --gem-d: color-mix(in srgb, var(--title) 42%, #000); }

.cx-halo { position: absolute; left: -18%; right: -18%; top: -55%; bottom: -55%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgb(var(--glow) / .36), rgb(var(--glow) / 0)); }
.cx-dust, .cx-sparks { position: absolute; inset: -.38em -.24em; pointer-events: none; }
.cx-dust b, .cx-sparks b { position: absolute; inset: 0; }
.cx-dust b:first-child { background: radial-gradient(circle at 5% 6%, rgb(255 255 255 / 0.95) 0 0.05em, rgb(255 240 200 / 0) 0.12em), radial-gradient(0.035em 0.3em at 5% 6%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0)), radial-gradient(0.3em 0.035em at 5% 6%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0)), radial-gradient(circle at 42% 74%, rgb(255 255 255 / 0.5) 0 0.05em, rgb(255 240 200 / 0) 0.12em), radial-gradient(0.035em 0.3em at 42% 74%, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0)), radial-gradient(0.3em 0.035em at 42% 74%, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0)), radial-gradient(circle at 74% 0%, rgb(255 255 255 / 0.85) 0 0.05em, rgb(255 240 200 / 0) 0.12em), radial-gradient(0.035em 0.3em at 74% 0%, rgb(255 255 255 / 0.77), rgb(255 255 255 / 0)), radial-gradient(0.3em 0.035em at 74% 0%, rgb(255 255 255 / 0.77), rgb(255 255 255 / 0)); }
.cx-dust b:last-child { background: radial-gradient(circle at 96% 56%, rgb(255 255 255 / 0.45) 0 0.05em, rgb(255 240 200 / 0) 0.12em), radial-gradient(0.035em 0.3em at 96% 56%, rgb(255 255 255 / 0.41), rgb(255 255 255 / 0)), radial-gradient(0.3em 0.035em at 96% 56%, rgb(255 255 255 / 0.41), rgb(255 255 255 / 0)), radial-gradient(circle at 24% 88%, rgb(255 255 255 / 0.7) 0 0.035em, rgb(255 240 200 / 0) 0.084em), radial-gradient(0.025em 0.21em at 24% 88%, rgb(255 255 255 / 0.63), rgb(255 255 255 / 0)), radial-gradient(0.21em 0.025em at 24% 88%, rgb(255 255 255 / 0.63), rgb(255 255 255 / 0)); }
.cx-sparks b:first-child { background: radial-gradient(circle at 2% 4%, rgb(255 214 245 / 0.7) 0 0.068em, rgb(255 92 214 / 0) 0.162em), radial-gradient(0.047em 0.405em at 2% 4%, rgb(255 214 245 / 0.63), rgb(255 214 245 / 0)), radial-gradient(0.405em 0.047em at 2% 4%, rgb(255 214 245 / 0.63), rgb(255 214 245 / 0)), radial-gradient(circle at 94% 70%, rgb(255 214 245 / 0.6) 0 0.057em, rgb(255 92 214 / 0) 0.138em), radial-gradient(0.04em 0.345em at 94% 70%, rgb(255 214 245 / 0.54), rgb(255 214 245 / 0)), radial-gradient(0.345em 0.04em at 94% 70%, rgb(255 214 245 / 0.54), rgb(255 214 245 / 0)); }
.cx-sparks b:last-child { background: radial-gradient(circle at 62% 0%, rgb(255 214 245 / 0.45) 0 0.05em, rgb(255 92 214 / 0) 0.12em), radial-gradient(0.035em 0.3em at 62% 0%, rgb(255 214 245 / 0.41), rgb(255 214 245 / 0)), radial-gradient(0.3em 0.035em at 62% 0%, rgb(255 214 245 / 0.41), rgb(255 214 245 / 0)); }

.cx-title.cx-wide { gap: .34em; }

.chat-line .cx-title { font-size: 1em; }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .chat-line .cl-plate > .chat-name { flex-shrink: 0; max-width: 7.5rem; }
  .chat-line .cl-plate > .cx-title { flex: 0 1 auto; min-width: 0; }
  .chat-line .cl-plate > .cx-title > .cx-name { min-width: 0; }
  .chat-line .cl-plate > .cx-title > .cx-name > .cx-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: .4em; margin: -.4em -.32em; background-position: .32em .4em; background-size: calc(100% - .64em) calc(100% - .8em); }
}
.chat-peek .cx-title { font-size: .95em; }
.is-hud .cb-name .cx-title { font-size: 1.1rem; }
.cb-mid .cb-name .cx-title { font-size: 1.02rem; }
.fr-name .cx-title { font-size: .96rem; }
.pc .pc-name .cx-title { font-size: .72em; }
.lb-who .cx-title, .lb-name .cx-title { font-size: .92em; margin-left: .35em; }
.td-item.is-locked { flex-wrap: wrap; row-gap: .1rem; }
.td-how { flex: 1 0 100%; padding-left: 1.25rem; font: 400 .8rem/1.3 var(--font-ui); color: var(--text-3); white-space: normal; }
.td-item .cx-title { font-size: 1.02rem; }
.td-item.is-locked .cx-title { opacity: .42; filter: grayscale(.55); }
.td-now .cx-title { font-size: 1em; }
.ev-title-copy .cx-title { font-size: 1.12rem; }
.ev-title-row:not(.is-earned) .ev-title-copy .cx-title { opacity: .5; filter: grayscale(.5); }

.cx-frame { --size: 3.4rem; --rim-w: calc(var(--size) * .075); --glow: 216 199 156; position: relative; display: inline-block; flex: none; width: var(--size); height: var(--size); border-radius: 24%; isolation: isolate; vertical-align: middle; }
.cx-frame > .portrait { position: absolute !important; inset: var(--rim-w) !important; z-index: 2; width: auto !important; height: auto !important; margin: 0 !important; overflow: hidden; border-radius: 19% !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .55) !important; }
.cx-frame .cx-ring { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; background: var(--ring); box-shadow: 0 .14rem .4rem rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .45); }
.cx-frame .cx-ring::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .35) 100%); }
.cx-frame .cx-spin { position: absolute; inset: -40%; display: none; }
.cx-frame .cx-glow { position: absolute; inset: -24%; z-index: 0; display: none; border-radius: 50%; opacity: .85; background: radial-gradient(closest-side, rgb(var(--glow) / .55), rgb(var(--glow) / 0)); pointer-events: none; }
.cx-frame .cx-studs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cx-frame .cx-studs i { position: absolute; width: 10%; height: 10%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffbe6 0 20%, var(--stud, #e8b440) 50%, #6b3f06 100%); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .6); }
.cx-frame .cx-studs i:nth-child(1) { left: 3%; top: 3%; } .cx-frame .cx-studs i:nth-child(2) { right: 3%; top: 3%; } .cx-frame .cx-studs i:nth-child(3) { left: 3%; bottom: 3%; } .cx-frame .cx-studs i:nth-child(4) { right: 3%; bottom: 3%; }
.cx-frame .cx-crown { position: absolute; left: 50%; top: -24%; z-index: 4; width: 48%; height: auto; aspect-ratio: 40 / 24; margin-left: -24%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.cx-frame .cx-orbit { position: absolute; inset: -9%; z-index: 3; pointer-events: none; }
.cx-frame .cx-orbit i { position: absolute; top: -2px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, rgb(var(--glow) / .9) 55%, transparent 72%); box-shadow: 0 0 6px rgb(var(--glow) / .9); }
.cx-frame .cx-orbit.is-two { inset: -18%; }
.cx-frame .cx-orbit.is-two i { top: auto; bottom: -2px; }

.cx-frame.cx-uncommon { --ring: linear-gradient(160deg, #d8ffdc, #59c56a 45%, #1f6b2e 60%, #7fdc8c); --glow: 127 220 140; }
.cx-frame.cx-rare { --ring: linear-gradient(160deg, #e9f6ff, #6fbcff 40%, #1a4f9a 58%, #5db4ff 80%, #d4ecff); --glow: 93 180 255; }
.cx-frame.cx-rare .cx-glow { display: block; opacity: .4; }
.cx-frame.cx-epic { --ring: linear-gradient(160deg, #fbf1ff, #c995ff 38%, #4f1f99 58%, #b073ff 80%, #ecdcff); --glow: 195 140 255; }
.cx-frame.cx-epic .cx-glow { display: block; opacity: .55; }
.cx-frame.cx-legendary { --ring: linear-gradient(160deg, #fffbe8, #ffd477 30%, #a75a10 55%, #ffb347 75%, #fff0c2); --glow: 255 168 60; }
.cx-frame.cx-legendary .cx-glow { display: block; }
.cx-frame.cx-mythic { --ring: #3a0b3c; --glow: 255 92 214; --rim-w: calc(var(--size) * .09); --stud: #ff8ae0; }
.cx-frame.cx-mythic .cx-spin { display: block; background: conic-gradient(from 0deg, #ff5cd6, #b46cff 16%, #2a0636 30%, #6fdcff 46%, #ff7fe0 62%, #2a0636 78%, #ff5cd6); }
.cx-frame.cx-mythic .cx-glow { display: block; }
.cx-frame.cx-celestial { --ring: #0b0a30; --glow: 140 130 255; --rim-w: calc(var(--size) * .09); --stud: #fff1c0; }
.cx-frame.cx-celestial .cx-spin { display: block; background: conic-gradient(from 90deg, #fff4cf, #f3c75c 10%, #6b5cff 24%, #10124a 38%, #3fe0d0 52%, #a99cff 66%, #10124a 80%, #fff4cf); }
.cx-frame.cx-celestial .cx-glow { display: block; }

.cx-roomy .cx-wings { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cx-roomy .cx-wings svg { position: absolute; top: -14%; width: 92%; height: 92%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.cx-roomy .cx-wings svg.is-left { right: 78%; }
.cx-roomy .cx-wings svg.is-right { left: 78%; transform: scaleX(-1); }
.cx-roomy .cx-rays { position: absolute; inset: -70%; z-index: -1; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgb(var(--glow) / .34) 0deg 3deg, rgb(var(--glow) / 0) 3deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, .5) 48%, transparent 72%); mask: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, .5) 48%, transparent 72%); }
.cx-roomy.cx-legendary .cx-rays { background: repeating-conic-gradient(from 0deg, rgb(var(--glow) / .22) 0deg 2deg, rgb(var(--glow) / 0) 2deg 20deg); }
.cx-roomy .cx-embers { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cx-embers i { position: absolute; bottom: 4%; width: 3px; height: 3px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff 0 25%, rgb(var(--glow) / .95) 50%, transparent 72%); box-shadow: 0 0 4px rgb(var(--glow) / .9); }
.cx-embers i:nth-child(1) { left: 18%; --d: 3.6s; --t: 0s; --dx: 6px; }
.cx-embers i:nth-child(2) { left: 34%; --d: 4.4s; --t: -1.2s; --dx: -8px; width: 2.5px; height: 2.5px; }
.cx-embers i:nth-child(3) { left: 52%; --d: 3.9s; --t: -2.6s; --dx: 4px; width: 3.5px; height: 3.5px; }
.cx-embers i:nth-child(4) { left: 66%; --d: 4.8s; --t: -.6s; --dx: 10px; width: 2.5px; height: 2.5px; }
.cx-embers i:nth-child(5) { left: 80%; --d: 4.1s; --t: -3.1s; --dx: -6px; }
.cx-embers i:nth-child(6) { left: 26%; --d: 5.2s; --t: -4s; --dx: 12px; width: 2px; height: 2px; }
.cx-embers i:nth-child(7) { left: 60%; --d: 3.4s; --t: -1.9s; --dx: -10px; width: 2.5px; height: 2.5px; }
.cx-embers i:nth-child(8) { left: 44%; --d: 4.6s; --t: -3.6s; --dx: 0px; }

.is-hud .cb-id .cx-frame { --size: 3.6rem; }
.is-hud .cb-id .cx-frame .cx-crown { top: -15%; width: 40%; margin-left: -20%; }
.cb-mid .cx-frame { --size: 2.95rem; }
.cb-mid .cx-frame .cx-crown { top: -13%; width: 38%; margin-left: -19%; }
.cb-mid .cx-frame .cx-orbit i, .is-hud .cb-id .cx-frame .cx-orbit i { width: 4px; height: 4px; margin-left: -2px; }
.pc .pc-head > .cx-frame { --size: 6.6rem; margin: .6rem 3.1rem .2rem 2.4rem; }
.pc .pc-head > .cx-frame .cx-wings svg { width: 66%; height: 66%; top: -2%; }
.pc .pc-head > .cx-frame .cx-wings svg.is-left { right: 84%; }
.pc .pc-head > .cx-frame .cx-wings svg.is-right { left: 84%; }

.pc .pc-name .cx-title { min-width: 0; max-width: 100%; white-space: normal; }
.pc .pc-name .cx-name { min-width: 0; }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .pc .pc-head > .cx-frame { --size: 5.2rem; margin: .55rem 1.6rem .15rem 1.45rem; }
  .pc .pc-head > .cx-frame .cx-wings svg { width: 56%; height: 56%; top: 4%; }
  .pc .pc-head > .cx-frame .cx-wings svg.is-left { right: 86%; }
  .pc .pc-head > .cx-frame .cx-wings svg.is-right { left: 86%; }
  .pc .pc-name .cx-cap { display: none; }
}

.cx-crown-mark { flex: none; width: 1.08em; height: 1.08em; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 .2em rgba(255, 200, 90, .45)); }
.role-queen .cx-crown-mark { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 .2em rgba(255, 120, 190, .5)); }
.role-staff .cx-crown-mark { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 .22em rgba(95, 216, 255, .6)); }
:is(.role-mark, .chat-role).role-owner { color: #ffe39a; border: 1px solid transparent; background: linear-gradient(180deg, #3a2208, #1c0f04) padding-box, linear-gradient(180deg, #fff3c0, #e8b440 40%, #7a4a08 60%, #f0c24e) border-box; box-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 0 .5rem rgba(244, 196, 84, .25); text-shadow: 0 1px 0 #000; }
:is(.role-mark, .chat-role).role-queen { color: #ffd0e6; border: 1px solid transparent; background: linear-gradient(180deg, #3a0f24, #1a0610) padding-box, linear-gradient(180deg, #fff0f7, #ff8fc4 40%, #8a2a55 60%, #ffb3d6) border-box; box-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 0 .5rem rgba(255, 120, 190, .22); text-shadow: 0 1px 0 #000; }
:is(.role-mark, .chat-role).role-staff { color: #c9f6ff; border: 1px solid transparent; background: linear-gradient(180deg, #0a2140, #050f1f) padding-box, linear-gradient(180deg, #f2feff, #6fe6ff 40%, #2a4fae 60%, #b8a0ff) border-box; box-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 0 .5rem rgba(95, 216, 255, .25); text-shadow: 0 1px 0 #000; }
.chat-line :is(.chat-role.role-owner, .chat-role.role-queen, .chat-role.role-staff) { box-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.tip-role .cx-crown-mark { width: .95rem; height: .95rem; }
.pc .role-mark .cx-crown-mark { width: 1.2rem; height: 1.2rem; }

.sup-badge { position: relative; isolation: isolate; border: 1px solid transparent; }
.sup-badge .kofi-mark { position: relative; z-index: 1; }
.sup-badge.sup-supporter { color: #ffe0d6; background: linear-gradient(180deg, #7a2f22, #3e140c) padding-box, linear-gradient(180deg, #ffd8ad, #cf8646 40%, #5e2a0c 60%, #f0b27c) border-box; box-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.sup-badge.sup-patron { color: #fff1c4; background: radial-gradient(circle at 40% 30%, #a66a12, #4a2a04 75%) padding-box, linear-gradient(180deg, #fffbe2, #f8d877 32%, #8a540a 55%, #e8b440 78%, #fff0b8) border-box; box-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 0 .45rem rgba(244, 196, 84, .45); }
.sup-badge.sup-champion { color: #fffaf0; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 45%), linear-gradient(135deg, #3b1a6e, #7a2a8a 35%, #1d5a8a 70%, #2a1a5e) padding-box, conic-gradient(from 210deg, #ffd27a, #ff7ad9, #8a7bff, #5fe6ff, #a6ff9e, #ffd27a) border-box;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 0 .5rem rgba(255, 150, 240, .5), 0 0 .9rem rgba(110, 140, 255, .35); }
.sup-badge.sup-champion::after { content: ""; position: absolute; right: -.18rem; top: -.2rem; width: .42rem; height: .42rem; z-index: 2; background: radial-gradient(circle, rgba(255, 255, 255, .85) 0 16%, transparent 32%), linear-gradient(90deg, transparent 44%, rgba(255, 255, 255, .85) 50%, transparent 56%), linear-gradient(0deg, transparent 44%, rgba(255, 255, 255, .85) 50%, transparent 56%); }

.sup-tag { position: relative; isolation: isolate; border: 1px solid transparent; }
.sup-tag.sup-supporter { color: #ffe6dc; background: linear-gradient(180deg, #6e2a1e, #3a130b) padding-box, linear-gradient(180deg, #ffd8ad, #cf8646 40%, #5e2a0c 60%, #f0b27c) border-box; box-shadow: 0 1px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.sup-tag.sup-patron { color: #fff3c8; background: linear-gradient(180deg, #5a3606, #2a1602) padding-box, linear-gradient(180deg, #fffbe2, #f8d877 32%, #8a540a 55%, #e8b440 78%, #fff0b8) border-box; box-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 0 .5rem rgba(244, 196, 84, .4), inset 0 1px 0 rgba(255, 255, 255, .16); text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 .4em rgba(255, 210, 120, .6); }
.sup-tag.sup-patron::after { content: ""; position: absolute; inset: -.35rem -.45rem; z-index: -1; border-radius: 1rem; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 196, 92, .25), rgba(255, 196, 92, 0)); }
.sup-tag.sup-champion { padding: .06rem .5rem; color: #fffaf0; background: linear-gradient(135deg, #2a1050, #4a1a5e 40%, #123a5a 80%) padding-box, conic-gradient(from 200deg, #ffd27a, #ff7ad9, #8a7bff, #5fe6ff, #a6ff9e, #ffd27a) border-box;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 0 .55rem rgba(255, 140, 230, .45), 0 0 1.1rem rgba(110, 140, 255, .3); }
.sup-tag .cx-opal { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 140% at 50% 0%, #3a1a6a, #160a30 70%); }
.sup-tag .cx-opal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .25)); }
.sup-tag .cx-opal i { position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%; border-radius: 50%;
  background: radial-gradient(closest-side at 30% 42%, rgba(255, 70, 200, .56), transparent), radial-gradient(closest-side at 70% 38%, rgba(40, 200, 255, .53), transparent), radial-gradient(closest-side at 55% 72%, rgba(110, 255, 150, .34), transparent), radial-gradient(closest-side at 40% 64%, rgba(255, 190, 70, .43), transparent); }
.sup-tag .cx-opal i + i { background: radial-gradient(closest-side at 64% 60%, rgba(255, 70, 200, .4), transparent), radial-gradient(closest-side at 34% 62%, rgba(40, 200, 255, .38), transparent), radial-gradient(closest-side at 46% 30%, rgba(255, 190, 70, .3), transparent); }
.sup-tag .cx-tagword { position: relative; background-image: linear-gradient(180deg, #ffffff 0%, #fff6dc 40%, #ffe1f4 60%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(30, 0, 40, .85)) drop-shadow(0 0 .3em rgba(255, 255, 255, .55)); }
.sup-tag .cx-motes { position: absolute; inset: -.3rem -.25rem; pointer-events: none; font-size: 1rem; background: radial-gradient(circle at 2% 12%, rgb(255 255 255 / 0.9) 0 0.06em, rgb(255 240 200 / 0) 0.144em), radial-gradient(0.042em 0.36em at 2% 12%, rgb(255 255 255 / 0.81), rgb(255 255 255 / 0)), radial-gradient(0.36em 0.042em at 2% 12%, rgb(255 255 255 / 0.81), rgb(255 255 255 / 0)), radial-gradient(circle at 86% 2%, rgb(255 255 255 / 0.55) 0 0.045em, rgb(255 240 200 / 0) 0.108em), radial-gradient(0.032em 0.27em at 86% 2%, rgb(255 255 255 / 0.50), rgb(255 255 255 / 0)), radial-gradient(0.27em 0.032em at 86% 2%, rgb(255 255 255 / 0.50), rgb(255 255 255 / 0)), radial-gradient(circle at 98% 92%, rgb(255 255 255 / 0.75) 0 0.05em, rgb(255 240 200 / 0) 0.12em), radial-gradient(0.035em 0.3em at 98% 92%, rgb(255 255 255 / 0.68), rgb(255 255 255 / 0)), radial-gradient(0.3em 0.035em at 98% 92%, rgb(255 255 255 / 0.68), rgb(255 255 255 / 0)); }
.sup-tag.sup-champion::after { content: ""; position: absolute; inset: -.5rem -.7rem; z-index: -2; border-radius: 1.2rem; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 140, 230, .3), rgba(120, 140, 255, .13) 60%, transparent); }

.pc .pc-badges .sup-badge { width: 1.75rem; height: 1.75rem; border-radius: .5rem; }
.pc .pc-badges .sup-badge .kofi-mark { width: 1.3rem; height: 1.3rem; }
.pc .pc-badges .sup-tag { padding: .16rem .7rem; border-radius: .8rem; font-size: 1rem; }
.pc .pc-badges .sup-tag .cx-motes { font-size: 1.35rem; }

[data-sup-colour] { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; background-repeat: no-repeat !important; text-shadow: none !important; }
[data-sup-colour="gold"] { --sup-glow: rgba(243, 199, 79, .35); background-image: linear-gradient(180deg, #fffbe8 0%, #f8dc84 38%, #b0790f 56%, #f3c74f 78%, #ffeeb0 100%) !important; }
[data-sup-colour="sky"] { --sup-glow: rgba(111, 195, 255, .35); background-image: linear-gradient(180deg, #f4fbff 0%, #b8e2ff 38%, #2f86cf 56%, #6fc3ff 78%, #d6efff 100%) !important; }
[data-sup-colour="mint"] { --sup-glow: rgba(111, 224, 176, .35); background-image: linear-gradient(180deg, #f2fff9 0%, #b6f3d8 38%, #1f9a66 56%, #6fe0b0 78%, #d2fbe9 100%) !important; }
[data-sup-colour="rose"] { --sup-glow: rgba(255, 143, 177, .35); background-image: linear-gradient(180deg, #fff4f7 0%, #ffc6d7 38%, #c4446c 56%, #ff8fb1 78%, #ffdce6 100%) !important; }
[data-sup-colour="lilac"] { --sup-glow: rgba(195, 162, 255, .35); background-image: linear-gradient(180deg, #faf6ff 0%, #ddcbff 38%, #7a52c8 56%, #c3a2ff 78%, #ece2ff 100%) !important; }
[data-sup-colour="coral"] { --sup-glow: rgba(255, 154, 107, .35); background-image: linear-gradient(180deg, #fff6f0 0%, #ffc9ad 38%, #c4532a 56%, #ff9a6b 78%, #ffe0d0 100%) !important; }
[data-sup-colour="amber"] { --sup-glow: rgba(255, 179, 71, .6); background-image: linear-gradient(180deg, #fffdf0 0%, #ffe3a0 30%, #ffb347 48%, #a2520c 57%, #ffb347 76%, #fff0c8 100%) !important; }
[data-sup-colour="teal"] { --sup-glow: rgba(63, 214, 201, .6); background-image: linear-gradient(180deg, #effffd 0%, #a6f2ea 30%, #3fd6c9 48%, #0b7a70 57%, #3fd6c9 76%, #d0fbf6 100%) !important; }
[data-sup-colour="orchid"] { --sup-glow: rgba(224, 123, 255, .6); background-image: linear-gradient(180deg, #fff6ff 0%, #f2c6ff 30%, #e07bff 48%, #7a239a 57%, #e07bff 76%, #fbe6ff 100%) !important; }
[data-sup-colour="lime"] { --sup-glow: rgba(184, 230, 90, .55); background-image: linear-gradient(180deg, #fbffef 0%, #e2f8b0 30%, #b8e65a 48%, #5a7f12 57%, #b8e65a 76%, #f0fdd2 100%) !important; }
[data-sup-colour="dawnfire"] { --sup-glow: rgba(255, 110, 60, .85); position: relative; text-shadow: none; background-image: linear-gradient(180deg, #fffbe0 0%, #ffe08a 26%, #ffab4a 46%, #e0401e 58%, #ff8a3a 76%, #ffd9a0 100%) !important; }
[data-sup-colour="starlight"] { --sup-glow: rgba(160, 140, 255, .95); position: relative; text-shadow: none; background-image: linear-gradient(180deg, #ffffff 0%, #fff3c2 22%, #ffcf5a 42%, #7b62ff 56%, #b7a4ff 74%, #f4eeff 100%) !important; }
[data-sup-colour="dawnfire"], [data-sup-colour="starlight"] { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .75)) drop-shadow(0 0 .18em rgba(255, 255, 255, .45)) drop-shadow(0 0 .45em var(--sup-glow)); }
[data-sup-colour] > .cx-name-motes { position: absolute; inset: -.3em -.15em; pointer-events: none; background: radial-gradient(circle at 2% 8%, rgb(255 255 255 / 0.9) 0 0.055em, rgb(255 240 200 / 0) 0.132em), radial-gradient(0.039em 0.33em at 2% 8%, rgb(255 255 255 / 0.81), rgb(255 255 255 / 0)), radial-gradient(0.33em 0.039em at 2% 8%, rgb(255 255 255 / 0.81), rgb(255 255 255 / 0)), radial-gradient(circle at 98% 62%, rgb(255 255 255 / 0.6) 0 0.04em, rgb(255 240 200 / 0) 0.096em), radial-gradient(0.028em 0.24em at 98% 62%, rgb(255 255 255 / 0.54), rgb(255 255 255 / 0)), radial-gradient(0.24em 0.028em at 98% 62%, rgb(255 255 255 / 0.54), rgb(255 255 255 / 0)); }
[data-sup-colour="dawnfire"] > .cx-name-motes { background: radial-gradient(circle at 22% 96%, rgb(255 246 200 / 0.9) 0 0.050em, rgb(255 120 50 / 0.81) 0.090em, rgb(255 120 50 / 0) 0.150em), radial-gradient(circle at 78% 90%, rgb(255 246 200 / 0.75) 0 0.043em, rgb(255 120 50 / 0.68) 0.076em, rgb(255 120 50 / 0) 0.128em); }

[data-sup-card="aurora"]::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: .35; background: radial-gradient(60% 40% at 20% 10%, rgba(111, 224, 176, .22), transparent), radial-gradient(60% 40% at 80% 20%, rgba(224, 123, 255, .2), transparent); animation: none; }

.cx-earned-scrim { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1rem; background: rgba(3, 5, 12, .72); cursor: pointer; }
.cx-earned { --glow: 216 199 156; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; width: min(26rem, 100%); min-height: 24rem; padding: 2.2rem 1.4rem 1.6rem; border-radius: 1.3rem; text-align: center;
  border: 1px solid rgb(var(--glow) / .45); background: radial-gradient(70% 55% at 50% 40%, rgb(var(--glow) / .22) 0%, #0b0f1e 72%), #0b0f1e; box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, .7), 0 0 3rem rgb(var(--glow) / .25); }
.cx-earned:focus { outline: none; }
.cx-earned.cx-uncommon { --glow: 127 220 140; } .cx-earned.cx-rare { --glow: 93 180 255; } .cx-earned.cx-epic { --glow: 195 140 255; } .cx-earned.cx-legendary { --glow: 255 168 60; } .cx-earned.cx-mythic { --glow: 255 92 214; } .cx-earned.cx-celestial { --glow: 150 140 255; }
.cx-earned .cx-burst { position: absolute; left: 50%; top: 42%; width: 0; height: 0; z-index: -1; }
.cx-earned .cx-burst-rays { position: absolute; left: -22rem; top: -22rem; width: 44rem; height: 44rem; background: repeating-conic-gradient(from 0deg, rgb(var(--glow) / .3) 0deg 4deg, rgb(var(--glow) / 0) 4deg 16deg);
  -webkit-mask: radial-gradient(closest-side, #000 16%, rgba(0, 0, 0, .55) 42%, transparent 70%); mask: radial-gradient(closest-side, #000 16%, rgba(0, 0, 0, .55) 42%, transparent 70%); }
.cx-earned .cx-gather { position: absolute; left: -7rem; top: -7rem; width: 14rem; height: 14rem; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgb(255 255 255 / .9), rgb(var(--glow) / .6) 35%, rgb(var(--glow) / 0)); }
.cx-earned .cx-wave { position: absolute; left: -6rem; top: -6rem; width: 12rem; height: 12rem; border-radius: 50%; opacity: 0; border: 2px solid rgb(var(--glow) / .95); box-shadow: 0 0 18px rgb(var(--glow) / .7), inset 0 0 18px rgb(var(--glow) / .5); }
.cx-earned .cx-sparks-out i { position: absolute; left: 0; top: -1.5px; width: 18px; height: 3px; border-radius: 3px; opacity: 0; transform-origin: 0 50%; background: linear-gradient(90deg, rgb(var(--glow) / 0), rgb(var(--glow)) 55%, #fff); box-shadow: 0 0 6px rgb(var(--glow) / .9); }
.cx-earned .cx-sparks-out i:nth-child(3n) { width: 10px; height: 2px; }
.cx-earned .cx-kicker { margin: 0 0 1.2rem; font: 700 .8rem/1 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: rgb(var(--glow)); text-shadow: 0 0 .6rem rgb(var(--glow) / .5); }
.cx-earned .cx-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.cx-earned .cx-hero .cx-frame { --size: 6.2rem; }
.cx-earned .cx-hero .cx-title { font-size: 1.65rem; }
.cx-earned .cx-bloom { position: absolute; left: 50%; bottom: .9rem; width: 16rem; height: 4.4rem; margin-left: -8rem; z-index: -1; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(closest-side, rgb(255 255 255 / .85), rgb(var(--glow) / .55) 40%, rgb(var(--glow) / 0)); }
.cx-earned .cx-from { margin: 0; max-width: 20rem; font: 400 .98rem/1.45 var(--font-ui); color: #c3c9d8; }
.cx-earned .cx-next { margin: 0; padding: .55rem .85rem; border-radius: .7rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); font: 400 .92rem/1.35 var(--font-ui); color: #d6d0c0; }
.cx-earned .cx-next b { color: #f6ead0; font-weight: 600; }
.cx-earned .cx-tap { margin: .3rem 0 0; font: 400 .8rem var(--font-ui); letter-spacing: .04em; color: #8d97ab; }
.cx-earned-face { background: radial-gradient(circle at 50% 30%, #2b4163, #0f1827 75%); }
.cx-earned-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cx-earned.is-light { min-height: 19rem; }
.cx-earned.is-light .cx-burst-rays, .cx-earned.is-light .cx-wave.is-two { display: none; }
.cx-earned.is-light .cx-hero .cx-title { font-size: 1.45rem; }
.cx-earned.cx-celestial { width: min(29rem, 100%); min-height: 27rem; }
.cx-earned .cx-mark-big { width: 4.6rem; height: 4.6rem; filter: drop-shadow(0 .3rem .6rem rgba(0, 0, 0, .6)) drop-shadow(0 0 1rem rgb(var(--glow) / .6)); }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .cx-earned { min-height: 21rem; padding: 1.8rem 1rem 1.3rem; }
  .cx-earned .cx-hero .cx-title { font-size: 1.4rem; }
  .cx-earned .cx-hero .cx-frame { --size: 5.2rem; }
}

@media (prefers-reduced-motion: no-preference) {
  :root:not(.reduce-motion) .cx-stage .cx-dust b { animation: cx-twinkle 3.4s ease-in-out infinite; }
  :root:not(.reduce-motion) .cx-stage .cx-dust b + b { animation-delay: -1.7s; animation-duration: 4.3s; }
  :root:not(.reduce-motion) .cx-stage .cx-sparks b { animation: cx-spark-pop 4.2s ease-in-out infinite; }
  :root:not(.reduce-motion) .cx-stage .cx-sparks b + b { animation-delay: -2.1s; animation-duration: 3.7s; }
  :root:not(.reduce-motion) .cx-stage .cx-halo { animation: cx-breathe 6s ease-in-out infinite; }
  :root:not(.reduce-motion) .cx-stage .cx-shift { display: block; animation: cx-shift 9s ease-in-out infinite; }
  :root:not(.reduce-motion) .cx-stage .cx-mythic .cx-shift { animation-duration: 7s; }
  :root:not(.reduce-motion) .cx-stage .cx-frame .cx-spin { animation: cx-turn 26s linear infinite; }
  :root:not(.reduce-motion) .cx-stage .cx-frame.cx-celestial .cx-spin { animation-duration: 42s; animation-direction: reverse; }
  :root:not(.reduce-motion) .cx-stage .cx-frame:is(.cx-mythic, .cx-celestial) .cx-glow { animation: cx-breathe 6s ease-in-out infinite; }
  :root:not(.reduce-motion) .cx-stage .cx-frame .cx-orbit { animation: cx-turn 9s linear infinite; }
  :root:not(.reduce-motion) .cx-stage .cx-frame .cx-orbit.is-two { animation: cx-turn 14s linear infinite reverse; }
  :root:not(.reduce-motion) .cx-stage .cx-roomy:is(.cx-mythic, .cx-celestial) .cx-rays { animation: cx-turn 80s linear infinite; }
  :root:not(.reduce-motion) .cx-stage .cx-roomy.cx-celestial .cx-rays { animation-direction: reverse; animation-duration: 120s; }
  :root:not(.reduce-motion) .cx-stage .cx-embers i { animation: cx-rise var(--d, 4s) linear var(--t, 0s) infinite; }
  :root:not(.reduce-motion) .cx-stage .sup-tag.sup-patron::after { animation: cx-breathe-soft 5s ease-in-out infinite; }
  :root:not(.reduce-motion) .cx-stage .sup-tag .cx-opal i { animation: cx-turn 14s linear infinite; }
  :root:not(.reduce-motion) .cx-stage .sup-tag .cx-opal i + i { animation: cx-turn-back 19s linear infinite; }
  :root:not(.reduce-motion) .cx-stage .sup-tag .cx-motes { animation: cx-twinkle 3.8s ease-in-out infinite; }
  :root:not(.reduce-motion) .cx-stage .sup-tag.sup-champion::after { animation: cx-breathe-soft 5.5s ease-in-out infinite; }
  :root:not(.reduce-motion) .cx-stage .sup-badge.sup-champion::after { animation: cx-spark-pop 3.4s ease-in-out infinite; }
  :root:not(.reduce-motion) .cx-stage [data-sup-colour] > .cx-name-motes { animation: cx-twinkle 3.6s ease-in-out infinite; }
  :root:not(.reduce-motion) .cx-stage [data-sup-colour="dawnfire"] > .cx-name-motes { animation: cx-ember-up 3.2s ease-in infinite; }
  :root:not(.reduce-motion) .cx-stage[data-sup-card="aurora"]::before { animation: cx-breathe-soft 8s ease-in-out infinite; }
  :root:not(.reduce-motion) .is-live .cx-dust b { animation: cx-twinkle-once 2.6s ease-in-out both; }
  :root:not(.reduce-motion) .is-live .cx-dust b + b { animation-name: cx-twinkle-twice; }
  :root:not(.reduce-motion) .is-live .cx-sparks b { animation: cx-spark-once 2.6s ease-in-out both; }
  :root:not(.reduce-motion) .is-live .cx-sparks b + b { animation-name: cx-spark-later; }
  :root:not(.reduce-motion) :is(.is-live .cx-halo, .cx-frame.is-live .cx-glow) { animation: cx-breathe-once 2.6s ease-in-out both; }
  :root:not(.reduce-motion) .cx-frame.is-live .cx-orbit { animation: cx-orbit-once 2.6s ease-in-out both; }
  :root:not(.reduce-motion) .sup-tag.is-live .cx-opal i { animation: cx-orbit-once 2.6s ease-in-out both; }
  :root:not(.reduce-motion) :is(.sup-tag.is-live .cx-motes, [data-sup-colour].is-live > .cx-name-motes) { animation: cx-twinkle-twice 2.6s ease-in-out both; }
  :root:not(.reduce-motion) [data-sup-colour="dawnfire"].is-live > .cx-name-motes { animation: cx-ember-once 2.6s ease-in both; }
  :root:not(.reduce-motion) :is(.sup-tag.is-live, .sup-badge.is-live)::after { animation: cx-breathe-once 2.6s ease-in-out both; }
  :root:not(.reduce-motion) .cx-earned .cx-gather { animation: cx-gather .7s ease-out both; }
  :root:not(.reduce-motion) .cx-earned .cx-burst-rays { animation: cx-fade-in .7s ease-out .2s both, cx-turn 60s linear infinite; }
  :root:not(.reduce-motion) .cx-earned .cx-wave { animation: cx-wave 1.2s cubic-bezier(.15, .7, .3, 1) .45s both; }
  :root:not(.reduce-motion) .cx-earned .cx-wave.is-two { animation-delay: .68s; }
  :root:not(.reduce-motion) .cx-earned .cx-sparks-out i { animation: cx-spark 1.05s cubic-bezier(.12, .75, .3, 1) calc(var(--t, .1s) + .4s) both; }
  :root:not(.reduce-motion) .cx-earned .cx-hero { animation: cx-pop .8s cubic-bezier(.2, .8, .2, 1) .35s both; }
  :root:not(.reduce-motion) .cx-earned .cx-bloom { animation: cx-bloom 1.3s ease-out .75s both; }
  :root:not(.reduce-motion) .cx-earned .cx-kicker { animation: cx-rise-in .5s ease-out .3s both; }
  :root:not(.reduce-motion) .cx-earned .cx-from { animation: cx-rise-in .5s ease-out 1.05s both; }
  :root:not(.reduce-motion) .cx-earned .cx-next { animation: cx-rise-in .5s ease-out 1.35s both; }
  :root:not(.reduce-motion) .cx-earned .cx-tap { animation: cx-rise-in .5s ease-out 1.8s both; }
}
@keyframes cx-twinkle-once { 0%, 100% { opacity: 1; transform: none; } 30% { opacity: .15; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.15); } 80% { opacity: .5; transform: scale(.8); } }
@keyframes cx-twinkle-twice { 0%, 100% { opacity: 1; transform: none; } 20% { opacity: .2; transform: scale(.55); } 45% { opacity: 1; transform: scale(1.12); } 70% { opacity: .2; transform: scale(.6); } 88% { opacity: 1; transform: scale(1.08); } }
@keyframes cx-spark-once { 0%, 100% { opacity: 1; transform: none; } 35% { opacity: 0; transform: scale(.2); } 65% { opacity: 1; transform: scale(1.3) rotate(45deg); } 85% { opacity: .6; transform: scale(.9) rotate(70deg); } }
@keyframes cx-spark-later { 0%, 100% { opacity: 1; transform: none; } 55% { opacity: 0; transform: scale(.2); } 80% { opacity: 1; transform: scale(1.3) rotate(45deg); } }
@keyframes cx-breathe-once { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .6; transform: scale(1.16); } }
@keyframes cx-orbit-once { from { transform: none; } to { transform: rotate(1turn); } }
@keyframes cx-ember-once { 0%, 100% { opacity: 1; transform: none; } 45% { opacity: 0; transform: translateY(-.8em) scale(.4); } 46% { opacity: 0; transform: translateY(.3em) scale(.4); } }
@keyframes cx-turn { to { transform: rotate(1turn); } }
@keyframes cx-turn-back { to { transform: rotate(-1turn); } }
@keyframes cx-breathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes cx-breathe-soft { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
@keyframes cx-twinkle { 0%, 100% { opacity: .15; transform: scale(.5); } 50% { opacity: 1; transform: scale(1); } }
@keyframes cx-spark-pop { 0%, 58%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 70% { opacity: 1; transform: scale(1) rotate(45deg); } 84% { opacity: .2; transform: scale(.6) rotate(80deg); } }
@keyframes cx-ember-up { 0%, 40% { opacity: 0; transform: translateY(.2em) scale(.4); } 55% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-.9em) scale(.3); } }
@keyframes cx-shift { 0%, 100% { opacity: 0; } 45%, 60% { opacity: .85; } }
@keyframes cx-rise { 0% { opacity: 0; transform: translate(0, 0) scale(.7); } 12% { opacity: 1; } 75% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--dx, 0px), calc(var(--size, 4rem) * -1.1)) scale(.25); } }
@keyframes cx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cx-gather { 0% { opacity: 0; transform: scale(1.6); } 70% { opacity: 1; transform: scale(.35); } 100% { opacity: 0; transform: scale(.2); } }
@keyframes cx-wave { 0% { opacity: 1; transform: scale(.25); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes cx-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(18px) scaleX(.4); } 60% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scaleX(1); } }
@keyframes cx-pop { 0% { opacity: 0; transform: scale(.6); } 55% { opacity: 1; transform: scale(1.07); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cx-bloom { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes cx-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }