@property --zpx-ang{syntax:"<angle>";inherits:false;initial-value:0deg}:root{--zpx-ring-thick:2px;--zpx-ring-gap:3px}.zpx-border{width:var(--zpx-border-size,48px);height:var(--zpx-border-size,48px);border-radius:50%;flex-shrink:0;display:inline-block;position:relative}.zpx-border__avatar{inset:calc(var(--zpx-ring-thick) + var(--zpx-ring-gap));z-index:0;border-radius:50%;position:absolute;overflow:hidden}.zpx-border__avatar>:first-child,.zpx-border__avatar svg{border-radius:50%;width:100%;height:100%;display:block}.zpx-border__frame{z-index:1;pointer-events:none;-webkit-mask:radial-gradient(circle closest-side at center, transparent calc(100% - var(--zpx-ring-thick)), #000 calc(100% - var(--zpx-ring-thick)));-webkit-mask:radial-gradient(circle closest-side at center, transparent calc(100% - var(--zpx-ring-thick)), #000 calc(100% - var(--zpx-ring-thick)));mask:radial-gradient(circle closest-side at center, transparent calc(100% - var(--zpx-ring-thick)), #000 calc(100% - var(--zpx-ring-thick)));border-radius:50%;position:absolute;top:0;bottom:0;left:0;right:0}.zpx-border--silver .zpx-border__frame{background:conic-gradient(from 210deg, var(--tier-silver), color-mix(in srgb, var(--tier-silver) 40%, white 60%), var(--tier-silver), color-mix(in srgb, var(--tier-silver) 60%, black 40%), color-mix(in srgb, var(--tier-silver) 40%, white 60%), var(--tier-silver))}.zpx-border--gold .zpx-border__frame{background:conic-gradient(from 200deg, var(--tier-gold), color-mix(in srgb, var(--tier-gold) 60%, white 40%), color-mix(in srgb, var(--tier-gold) 20%, white 80%), var(--tier-gold), color-mix(in srgb, var(--tier-gold) 60%, white 40%), var(--tier-gold))}.zpx-border--gold{box-shadow:0 0 12px 1px color-mix(in srgb, var(--tier-gold) 50%, transparent)}.zpx-border--prestige .zpx-border__frame{background:conic-gradient(from var(--zpx-ang), var(--inviter-prestige-a), var(--inviter-prestige-b), var(--inviter-prestige-c), var(--inviter-prestige-d), var(--inviter-prestige-a));animation:6s linear infinite zpx-border-spin}.zpx-border--prestige{animation:3s ease-in-out infinite zpx-border-pulse}@keyframes zpx-border-spin{to{--zpx-ang:360deg}}@keyframes zpx-border-pulse{0%,to{filter:drop-shadow(0 0 6px color-mix(in srgb, var(--inviter-prestige-a) 55%, transparent))}50%{filter:drop-shadow(0 0 12px color-mix(in srgb, var(--inviter-prestige-b) 50%, transparent))}}@supports not (background:conic-gradient(from var(--zpx-ang), red, blue)){.zpx-border--prestige .zpx-border__frame{transform-origin:50%;animation:6s linear infinite zpx-border-spin-fallback}@keyframes zpx-border-spin-fallback{to{transform:rotate(360deg)}}}.zpx-border__emblem{z-index:2;width:var(--zpx-emblem-size,26px);height:var(--zpx-emblem-size,26px);background:#10111d;border:2px solid;border-radius:50%;place-items:center;display:grid;position:absolute;bottom:0;right:0;transform:translate(16%,16%);box-shadow:0 1px 5px #0006}.zpx-border__emblem svg{fill:currentColor;width:82%;height:82%;display:block}.zpx-border--silver .zpx-border__emblem{color:var(--tier-silver)}.zpx-border--gold .zpx-border__emblem{color:var(--tier-gold)}.zpx-border--prestige .zpx-border__emblem{color:#fff;border-color:var(--inviter-prestige-b)}@media (prefers-reduced-motion:reduce){.zpx-border--prestige,.zpx-border--prestige .zpx-border__frame{animation:none}}@supports not (background:conic-gradient(from var(--zpx-ang), red, blue)){@media (prefers-reduced-motion:reduce){.zpx-border--prestige .zpx-border__frame{animation:none}}}