.appearance-picker{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:8px;min-width:0}
.appearance-picker select{min-width:0;text-overflow:ellipsis;width:100%}
#shell .appearance-picker .appearance-step{--arrow-start:0px;display:grid;place-items:center;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#shell .appearance-picker .appearance-step-previous{--arrow-start:-144px}
.appearance-step::before{content:"";width:48px;height:48px;background-image:url('/avatar-arrows.png?v=1');background-size:288px 48px;background-repeat:no-repeat;background-position:var(--arrow-start) 0;image-rendering:pixelated;pointer-events:none}
.appearance-step.is-stepping::before{animation:avatar-arrow-cycle 240ms steps(1,end) 1}
#shell .appearance-step:not(:disabled):active{transform:translateY(1px)}
.appearance-step:focus-visible{outline:2px solid var(--edge);outline-offset:3px}
@keyframes avatar-arrow-cycle{0%,100%{background-position:var(--arrow-start) 0}33%{background-position:calc(var(--arrow-start) - 48px) 0}66%{background-position:calc(var(--arrow-start) - 96px) 0}}
@media(max-width:760px){.persona-controls .appearance-row{grid-template-columns:minmax(0,1fr);gap:8px}}
@media(prefers-reduced-motion:reduce){#shell .appearance-picker .appearance-step{transition:none;transform:none}.appearance-step.is-stepping::before{animation:none}}