@keyframes shineStar{0%{opacity:0;transform:scale(1)}to{opacity:.7;transform:scale(1.5)}}.trait-box{display:flex;align-items:center;gap:10px}.trait-box.preview{margin:0 auto;max-width:400px;border:1px solid #ddd;padding:15px;border-radius:10px}.trait-box .icon{width:30px;aspect-ratio:1/1;border-radius:50%;color:#fff}.trait-box .box{flex:1 1}.trait-box .box .top{display:flex;justify-content:space-between}.trait-box .box .top .title{font-size:18px}.trait-box .box .bottom{display:flex;align-items:center;gap:10px;width:100%}.trait-box .box .bottom .progress-bar{flex:1 1}.trait-box .box .bottom .xp{display:flex;align-items:center;justify-content:flex-end;gap:5px;width:70px;text-align:end}.trait-box .box .bottom .xp strong{display:flex;justify-content:flex-end;width:70px;font-weight:600}