.switcher{--sw-opt:48px;--sw-h:42px;--sw-pad:3px;--sw-index:0;--c:var(--sw-ink,#1c1f3a);grid-template-columns:repeat(var(--sw-count,3), var(--sw-opt));height:var(--sw-h);padding:var(--sw-pad);isolation:isolate;background:color-mix(in srgb, var(--sw-tint,#f4f4f6) 55%, transparent);-webkit-backdrop-filter:blur(14px)saturate(170%);backdrop-filter:blur(14px)saturate(170%);box-shadow:inset 0 0 0 1px var(--sw-rim,#ffffffa6), inset 0 1.5px 1px var(--sw-hi,#ffffffe6), inset 0 -2px 3px #0000000f, 0 6px 18px -8px #04142959;border:0;border-radius:999px;margin:0;display:grid;position:relative}.switcher[data-active="2"]{--sw-index:1}.switcher[data-active="3"]{--sw-index:2}.switcher:before{content:"";z-index:0;top:var(--sw-pad);bottom:var(--sw-pad);left:var(--sw-pad);width:var(--sw-opt);background:linear-gradient(180deg, var(--sw-thumb-top,#ffffffbf), var(--sw-thumb-bottom,#ffffff59));box-shadow:inset 0 0 0 1px var(--sw-rim,#fffc), inset 0 1px 2px var(--sw-hi,#fffffff2), 0 3px 10px -3px #0414294d;transform:translateX(calc(var(--sw-index) * var(--sw-opt)));border-radius:999px;transition:transform .3s cubic-bezier(.77,0,.175,1);position:absolute}.switcher__legend{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.switcher__option{z-index:1;cursor:pointer;border-radius:999px;place-items:center;display:grid;position:relative}.switcher__option:has(.switcher__input:focus-visible){outline:2px solid var(--c);outline-offset:2px}.switcher__input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.switcher__icon{opacity:.6;width:26px;height:26px;transition:opacity .2s,transform .16s cubic-bezier(.23,1,.32,1)}@media (hover:hover) and (pointer:fine){.switcher__option:hover .switcher__icon{opacity:.85}}.switcher__option:active .switcher__icon{transform:scale(.9)}.switcher__input:checked+.switcher__icon{opacity:1;transform:scale(1.08)}.switcher--compact{--sw-opt:38px;--sw-h:36px}.switcher--compact .switcher__icon{width:22px;height:22px}