Size Selector Grid

Create a size selector with a sliding selection pill. A row of 5 equal size buttons (XS-XL, bordered, 9px radius). The selected size is marked by a dark ink pill that GLIDES between buttons rather than appearing per button: render one shared pill behind the selected option and animate its position with a shared layout animation (e.g. Framer Motion layoutId) using a spring (stiffness 480, damping 34); the selected label turns paper-colored above it. Unavailable sizes show strikethrough at 55% opacity; clicking one refuses with a headshake (x: 0 → -5 → 5 → -3 → 0 over 350ms) instead of selecting. Available buttons dip to 90% on press. Above the row, a monospace "size" label with the current pick in the accent color; below, a small note naming the out-of-stock size. Accessibility: the row is role="radiogroup" with aria-label "Size"; each button is role="radio" with aria-checked, and unavailable sizes use aria-disabled. If prefers-reduced-motion is set, move the pill instantly and skip the headshake. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.