.xp-ring{position: relative;height: 190px;margin: 0 0 2rem;perspective: 1600px;perspective-origin: 50% 30%}.xp-ring__halo{position: absolute;left: 20%;right: 20%;top: 30%;bottom: -10%;border-radius: 50%;background: radial-gradient(closest-side, rgba(240,200,110,0.3), transparent);filter: blur(12px)}.xp-ring__spin{position: absolute;left: 50%;top: 42%;width: 0;height: 0;transform-style: preserve-3d;will-change: transform}.xp-ring__seg{position: absolute;left: 0;top: 0;height: 40px;margin: -20px 0 0 -85px;display: flex;align-items: center;justify-content: center;gap: 12px;cursor: pointer;background: linear-gradient(180deg, rgba(255,240,210,0.22), rgba(255,240,210,0.04) 45%, rgba(255,240,210,0.12));border-top: 1px solid rgba(255,245,220,0.6);border-bottom: 1px solid rgba(212,175,55,0.7);box-shadow: inset 0 8px 10px -8px rgba(255,245,220,0.6), inset 0 -6px 10px -6px rgba(212,175,55,0.4);font: 600 0.62rem/1 'Inter', system-ui, sans-serif;letter-spacing: 0.18em;text-transform: uppercase;white-space: nowrap;color: #d4af37;backface-visibility: visible}.xp-ring__seg b{font-weight: 600;transition: color .4s}.xp-ring__seg i{font-style: normal;color: #a8822f}.xp-ring__seg:hover b, .xp-ring__seg.is-on b{color: #fff1c2}@media (max-width: 1024px){.xp-ring{display: none}}.is-ring:not(:focus-within){position: absolute !important;width: 1px !important;height: 1px !important;overflow: hidden !important;clip: rect(0 0 0 0) !important;white-space: nowrap;margin: 0 !important;padding: 0 !important;border: 0 !important}