.mag{box-sizing:border-box;font-family:var(--font-ui);position:relative}.mag-chip{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0;position:absolute}.mag-skin{background:var(--fill-slab,var(--card));color:var(--ink);box-shadow:inset 0 0 0 1px var(--pane-edge,#e5e5e5);transform:translate(var(--lx,0px), var(--ly,0px));border-radius:50%;justify-content:center;align-items:center;transition:transform .22s cubic-bezier(.22,1,.36,1),background-color .22s,color .22s;display:flex;position:absolute;inset:0;overflow:hidden}.mag-chip:hover .mag-skin{background:color-mix(in oklab, var(--fill-on,#17181a) 10%, var(--fill-slab,#fff))}.mag-chip:focus-visible{outline:none}.mag-chip:focus-visible .mag-skin{box-shadow:inset 0 0 0 1px var(--pane-edge,#e5e5e5), 0 0 0 3px color-mix(in oklab, var(--signal,var(--fill-on)) 50%, transparent)}.mag-mark{justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .22s,color .22s;display:flex}.mag-chip[data-on] .mag-skin{background:var(--ink);color:var(--card);box-shadow:inset 0 0 0 1px var(--ink)}.mag-chip[data-on]:hover .mag-skin{background:var(--ink);color:var(--card)}.mag-chip[data-on]:focus-visible .mag-skin{box-shadow:inset 0 0 0 1px var(--ink), 0 0 0 3px color-mix(in oklab, var(--signal,var(--fill-on)) 50%, transparent)}@media (prefers-reduced-motion:reduce){.mag-skin{transition-duration:.12s}}