.xp-bar{--xp-cells:20;box-sizing:border-box;border-radius:0;flex:none;width:100%;position:relative;overflow:hidden}.xp-bar-bar{border:1px solid var(--glass-border);height:12px}.xp-bar-mini{border:none;height:3px}.xp-bar-track,.xp-bar-fill{-webkit-mask-image:repeating-linear-gradient(90deg, black 0 calc(100% / var(--xp-cells) - 2px), transparent 0 calc(100% / var(--xp-cells)));-webkit-mask-image:repeating-linear-gradient(90deg, black 0 calc(100% / var(--xp-cells) - 2px), transparent 0 calc(100% / var(--xp-cells)));mask-image:repeating-linear-gradient(90deg, black 0 calc(100% / var(--xp-cells) - 2px), transparent 0 calc(100% / var(--xp-cells)));border-radius:0;position:absolute;inset:0}.xp-bar-track{background:color-mix(in srgb, var(--text-main) 12%, transparent)}.xp-bar-fill{background:var(--accent);transition:clip-path var(--dur-base) var(--steps-snap)}