Toggle Switch.

Build 4 styles of toggle switch, each in a settings card with 3 toggle-row examples. Common mechanics: each toggle is a real  element with role="switch" and aria-checked, with a track + a ::after knob. Click adds/removes .on class which transitions track background color and knob transform:translateX. Variants:
(1) iOS pill: 50×28 track, 999px border-radius, white circular knob 22px with shadow, off → gray track, on → accent track with knob translateX(22px).
(2) Material square: 44×24 track with 6px radius, square knob 18px 4px radius, off → gray, on → teal/green.
(3) Icon-on-knob: 56×28 track with a ✓ on the left side of track (visible only when on) and a × or ✓ INSIDE the knob (changes via content swap), on state green with green check inside knob.
(4) Chunky/knurled: 64×32 track with 1px border, taller knob (26×24) with subtle stripe texture (background-image repeating-linear-gradient at low opacity for the knurled look), gradient white → light-gray, off gray, on accent.
Each settings card has a display-serif title, uppercase mono variant label, and 3 toggle rows separated by hairline borders. Each row: bold setting name + muted helper text on the left, the toggle on the right.