People and mics

Option 1 · Mic chipsStyle: monochrome + one accent · Components: five pill chips with a radio dot, capacity hint · Art: line mic glyphs, one per person · Motion: press 0.97, hex ripple, a sheen that lights the chosen chip, its mics pop in one after another · Material: flat chips, the chosen one tactile (four-shadow, darker downward)role=radiogroup · button[role=radio] · inline SVG <use> sprite · ::before radial sheen (opacity only) · flex-wrap 3 + 2

Option 2 · Stepper + seatsStyle: Swiss grid, quiet · Components: 56 px −/+ stepper, five seats at a desk, one mic per seat · Art: drawn seat pictograms, empty seats dashed · Motion: a seat fills and its mic rises from the desk (400 ms ease-brand); − stops at 1, + stops at 5 with "Aura only" · Material: flat; the desk is a sunken stripbutton[disabled] at the limits · aria-live summary · CSS grid seats · transform/opacity pop · flex mirrors in RTL

Option 3 · SegmentedStyle: iOS-calm segmented control · Components: 1–5 segments with a sliding thumb, live "Rooms that fit" chips with the real room photos · Art: room photo avatars · Motion: thumb glides 260 ms ease-brand; rooms that stop fitting dim and say why (seats N), never vanish · Material: sunken track, raised white thumbtransform: translateX(calc(i × 100% × --local-dir)) · rooms greyed with reason (rule 21) · roving tabindex + arrow keys

Option 4 · Glass cardsStyle: A8 grainy one-hue gradient field + A4 frosted glass · Components: four frosted radio cards (Solo, Duo, Panel 3–4, Full table 5), each with its mic row and the rooms that fit; Panel opens a 3 / 4 pick · Art: the field (Hub Blue to Sky, 6 % grain), soft light blobs under the glass · Motion: the chosen card lifts and lights (2 px primary stroke + glow + check), the panel pick unfolds · Material: frost over the field, solid fallback without backdrop-filterbackdrop-filter: blur(18px) saturate(160%) · @supports fallback · grain = tokens --grain data-URI · grid-template-rows 0fr→1fr unfold

Option 5 · Tactile keysStyle: light-modelled hardware (a desk's channel keys) · Components: five raised keys 1–5, a big rolling mic count · Art: none, the numeral is the art · Motion: keys sink on press (2 px + 0.97), the chosen key lights and shows a check; the numeral rolls like NumberFlow in plain CSS (instant swap under reduced motion) · Material: four-shadow keys in light, lighter fill + rim in darkdigit strip translateY(-n × 1em), overflow hidden · box-shadow swapped as a state, only transform animates · 0 KB library