@layer components{@media (prefers-reduced-motion:no-preference){.step-rise{animation:.32s cubic-bezier(.2,.8,.2,1) both step-rise}.step-rise-late{animation:.32s cubic-bezier(.2,.8,.2,1) .12s both step-rise}.step-stagger>*{animation:.3s cubic-bezier(.2,.8,.2,1) both step-rise;animation-delay:calc(min(var(--step-i,0), 8) * 45ms)}.step-pop{animation:.28s cubic-bezier(.3,1.4,.5,1) both step-pop}.step-swap{animation:.22s ease-out both step-swap}.step-press{transition:transform .12s ease-out,border-color .15s,background-color .15s,color .15s}.step-press:active:not(:disabled){transform:scale(.95)}.step-chip{transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .15s,background-color .15s,color .15s}.step-chip[aria-pressed=true]{transform:translateY(-2px)}.step-chip:active:not(:disabled){transform:translateY(-1px)scale(.98)}.step-nudge-up{animation:.2s ease-out step-nudge-up}.step-nudge-down{animation:.2s ease-out step-nudge-down}.step-glide{animation:.45s cubic-bezier(.2,.8,.2,1) .15s both step-glide}.step-fill-x{animation:.45s cubic-bezier(.2,.8,.2,1) .15s both step-fill-x}.step-ping:after{content:"";border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px var(--brand);animation:.5s ease-out both step-ping;position:absolute;inset:0}.step-circle{animation:.38s cubic-bezier(.3,1.3,.5,1) both step-circle}.step-paper{animation:.42s cubic-bezier(.2,.8,.2,1) both step-paper}.step-stamp{animation:.36s cubic-bezier(.3,1.3,.5,1) .3s both step-stamp}.step-drop{transform-origin:top;animation:.22s ease-out both step-drop}.step-fill-in{transform-origin:0;animation:.5s cubic-bezier(.2,.8,.2,1) both step-fill-x}.step-from-left{animation:.36s cubic-bezier(.2,.8,.2,1) both step-from-left}.step-from-right{animation:.36s cubic-bezier(.2,.8,.2,1) 60ms both step-from-right}.step-swap-in{animation:.4s cubic-bezier(.3,1.3,.5,1) .2s both step-swap-in}}}@keyframes step-rise{0%{opacity:0;transform:translateY(8px)}}@keyframes step-pop{0%{opacity:0;transform:scale(.8)}}@keyframes step-swap{0%{opacity:.2;transform:translateY(4px)}}@keyframes step-nudge-up{0%{opacity:.5;transform:translateY(6px)}}@keyframes step-nudge-down{0%{opacity:.5;transform:translateY(-6px)}}@keyframes step-glide{0%{opacity:.4;transform:translateX(var(--step-glide,0))}}@keyframes step-fill-x{0%{transform:scaleX(0)}}@keyframes step-ping{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.04,1.18)}}@keyframes step-circle{0%{opacity:0;transform:scale(1.12)}}@keyframes step-paper{0%{opacity:0;transform:translateY(12px)rotate(-.8deg)}}@keyframes step-stamp{0%{opacity:0;transform:scale(1.6)}}@keyframes step-drop{0%{opacity:0;transform:translateY(-4px)scaleY(.96)}}@keyframes step-from-left{0%{opacity:0;transform:translate(-12px)}}@keyframes step-from-right{0%{opacity:0;transform:translate(12px)}}@keyframes step-swap-in{0%{opacity:0;transform:rotate(-90deg)scale(.6)}}
.xp-badge{border:3px solid var(--brand);background:var(--paper);border-radius:50%;place-items:center;width:64px;height:64px;display:grid;position:relative}.xp-badge[data-up=true]{border-color:var(--mustard)}.xp-badge-word{background:var(--brand);color:var(--on-brand);font:500 10px/1.4 var(--ticket);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;border-radius:6px;padding:1px 6px;position:absolute;bottom:-9px;left:50%;translate:-50%}.xp-badge[data-up=true] .xp-badge-word{background:var(--mustard);color:var(--shade)}.xp-gain{opacity:0}.xp-gain[data-on=true]{opacity:1}.xp-fill{width:0}@media (prefers-reduced-motion:no-preference){.xp-badge:before{content:"";border:3px solid var(--mustard);opacity:0;pointer-events:none;border-radius:50%;position:absolute;inset:-8px}.xp-badge[data-up=true]:before{animation:1.1s ease-out both xp-ring}.xp-badge[data-up=true] .xp-level{animation:.45s cubic-bezier(.2,.8,.2,1) both xp-flip}.xp-gain{transition:opacity .3s,translate .3s;translate:0 4px}.xp-gain[data-on=true]{translate:0}.xp-fill[data-move=true]{transition:width .7s cubic-bezier(.3,.7,.3,1)}}@keyframes xp-ring{0%{opacity:.9;transform:scale(.85)}to{opacity:0;transform:scale(1.25)}}@keyframes xp-flip{0%{opacity:0;translate:0 8px}}
.xp-reward{animation:.3s ease-out both xp-reward-in}.xp-reward[data-closing=true]{animation:.25s ease-in both xp-reward-out}.xp-reward-title,.xp-reward-gain,.xp-reward-line{opacity:0}.xp-reward-title[data-on=true],.xp-reward-gain[data-on=true],.xp-reward-line[data-on=true]{opacity:1}.xp-reward-badge{background:var(--brand);width:44px;height:44px;color:var(--on-brand);box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--brand-soft);border-radius:50%;place-items:center;font-size:20px;font-weight:700;display:grid;position:relative}.xp-reward-badge[data-up=true]{background:var(--mustard);color:var(--shade);box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--mustard-soft)}.xp-reward-next{background:var(--paper);color:var(--muted);border:2px dashed var(--line-strong);box-shadow:none}@media (prefers-reduced-motion:no-preference){.xp-reward-title,.xp-reward-gain{transition:opacity .2s ease-out,translate .35s cubic-bezier(.34,1.56,.64,1),scale .35s cubic-bezier(.34,1.56,.64,1);translate:0 14px;scale:.8}.xp-reward-title[data-on=true],.xp-reward-gain[data-on=true]{translate:0;scale:1}.xp-reward-line{transition:opacity .3s ease-out}.xp-reward-badge[data-up=true]{animation:.42s cubic-bezier(.34,1.56,.64,1) both xp-reward-turn}.xp-reward-badge[data-up=true]:before{content:"";border:3px solid var(--mustard);pointer-events:none;border-radius:50%;animation:.9s ease-out both xp-reward-ring;position:absolute;inset:-6px}}@media (prefers-reduced-motion:reduce){.xp-reward,.xp-reward[data-closing=true]{animation:none}}@keyframes xp-reward-in{0%{opacity:0}}@keyframes xp-reward-out{to{opacity:0}}@keyframes xp-reward-turn{0%{scale:.6}}@keyframes xp-reward-ring{0%{opacity:.9;scale:1}to{opacity:0;scale:1.6}}