Level XP Profile

<div class="nuda-xp">
  <div class="nuda-xp__ring">
    <svg viewBox="0 0 64 64" aria-hidden="true">
      <circle cx="32" cy="32" r="29" fill="none"
        stroke="rgba(255,255,255,.08)" stroke-width="3"/>
      <circle class="nuda-xp__progress" cx="32" cy="32" r="29"
        fill="none" stroke="currentColor" stroke-width="3"
        stroke-linecap="round" pathLength="100"
        stroke-dasharray="68 100" transform="rotate(-90 32 32)"/>
    </svg>
    <div class="nuda-xp__avatar">RK</div>
    <div class="nuda-xp__lvl">12</div>
  </div>
  <div class="nuda-xp__meta">
    <div class="nuda-xp__name">Rune Kahn</div>
    <div class="nuda-xp__sub">680 / 1000 XP</div>
  </div>
</div>

/* Level / XP Profile
   Avatar with circular XP progress ring + level badge.
   Customize: --c (ring color), stroke-dasharray (XP %) */

.nuda-xp {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #fafafa;
  font-family: system-ui, sans-serif;
}

.nuda-xp__ring {
  position: relative;
  width: 64px;
  height: 64px;
  color: #e4ff54;
  flex-shrink: 0;
}

.nuda-xp__progress {
  stroke-dasharray: 0 100;
  animation: nuda-xp-fill 1.2s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes nuda-xp-fill {
  from { stroke-dasharray: 0 100; }
  to   { stroke-dasharray: 68 100; }
}

.nuda-xp__avatar {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 0.85rem;
  color: #09090b;
  background: linear-gradient(135deg, #62b6ff, #9d6dff);
}

.nuda-xp__lvl {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #e4ff54;
  color: #09090b;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  border: 2px solid #0c0c10;
  line-height: 1;
}

.nuda-xp__name { font-size: 0.95rem; font-weight: 600; }
.nuda-xp__sub  { font-size: 0.78rem; color: #a0a0a8; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .nuda-xp__progress {
    animation: none;
    stroke-dasharray: 68 100;
  }
}