.fontFamilyPicker{flex-direction:column;min-height:8em;display:flex}.fontFamilyPicker .fontList{flex-direction:column;gap:.15em;max-height:18em;display:flex;overflow-y:auto}.fontFamilyPicker .fontGroupLabel{z-index:1;color:color-mix(in srgb, var(--text) 48%, transparent);background:color-mix(in srgb, var(--background) 85%, transparent);-webkit-backdrop-filter:blur(.4em);backdrop-filter:blur(.4em);padding:.5em .7em .3em;font-size:.7em;font-weight:700;position:sticky;top:0}.fontFamilyPicker .fontSkeleton{border-radius:var(--radius-xs);height:2.2em;margin:.2em .4em;display:block}.fontFamilyPicker .fontItem{border-radius:var(--radius-lg);color:var(--text);cursor:pointer;transition:all .3s var(--springEase),background .3s ease;background:0 0;border:none;align-items:center;gap:.5em;padding:.5em .6em .5em .5em;display:flex}.fontFamilyPicker .fontItem:hover{background:var(--surface)}.fontFamilyPicker .fontItem:hover .weightCount{background:color-mix(in srgb, var(--background) 75%, transparent)}.fontFamilyPicker .fontItem.active{background:var(--surface-hover);padding-left:.8em}.fontFamilyPicker .fontItem .fontSample{text-align:right;text-overflow:ellipsis;white-space:nowrap;flex:auto;font-size:1em;overflow:hidden}.fontFamilyPicker .fontItem .weightCount{background:var(--container);font-variant-numeric:tabular-nums;white-space:nowrap;will-change:opacity,transform,filter;border-radius:2em;justify-content:center;align-items:center;min-width:2em;height:2em;font-size:.8em;font-weight:200;line-height:1;display:flex}.fontFamilyPicker .fontListHint{color:color-mix(in srgb, var(--text) 55%, transparent);text-align:center;padding:.8em;font-size:.82em;line-height:1.7}