.theme-switch{--switch-width:7rem;--switch-height:2.25rem;--switch-knob:1.75rem;--switch-knob-width:2.75rem;--switch-inset:.25rem;--switch-travel:calc(var(--switch-width) - var(--switch-knob-width) - var(--switch-inset) * 2);width:var(--switch-width);height:var(--switch-height);color:#fff;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:999px;flex:none;padding:0;display:inline-block;position:relative}.theme-switch:focus-visible{box-shadow:0 0 0 3px var(--color-primary-focus);outline:0}.theme-switch-track{-webkit-backdrop-filter:blur(14px)saturate(180%);backdrop-filter:blur(14px)saturate(180%);background:linear-gradient(#ffffff8c,#ffffff1f 55%),#fff1e661;border:1px solid #ffffffd9;border-radius:999px;transition:background .32s,border-color .32s,box-shadow .32s;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 1px 1px #fffffff2,inset 0 -1px 2px #c653001a,0 0 0 1px #c653001f,0 8px 20px #9a47001f}.theme-switch-label{letter-spacing:.01em;white-space:nowrap;justify-content:center;align-items:center;font-size:.8125rem;font-weight:500;transition:opacity .22s,transform .32s cubic-bezier(.34,1.3,.64,1);display:flex;position:absolute;top:0;bottom:0}.theme-switch-label--light{right:var(--switch-inset);left:calc(var(--switch-knob-width) + var(--switch-inset));color:var(--color-primary-strong);font-weight:600}.theme-switch-label--dark{right:calc(var(--switch-knob-width) + var(--switch-inset));left:var(--switch-inset);color:#ffffff9e;opacity:0;transform:translate(-.5rem)}.theme-switch-knob{top:calc((var(--switch-height) - var(--switch-knob)) / 2);left:var(--switch-inset);width:var(--switch-knob-width);height:var(--switch-knob);-webkit-backdrop-filter:blur(6px)saturate(140%);backdrop-filter:blur(6px)saturate(140%);background:radial-gradient(120% 70% at 50% 0,#ffffffd9,#fff0 60%),radial-gradient(circle at 50% 120%,#ffb46e59,#fff0 60%),#ffffff47;border:1px solid #fffffff2;border-radius:999px;place-items:center;transition:transform .32s cubic-bezier(.34,1.3,.64,1),background .32s,border-color .32s,box-shadow .32s;display:grid;position:absolute;box-shadow:inset 0 1px 1px #fff,inset 0 -2px 4px #ff9a3d38,inset 0 0 0 1px #ffffff59,0 6px 14px #9a47002e}.theme-switch-lens{background:linear-gradient(160deg,#fff1e6b3,#ffbe8259);border-radius:999px;place-items:center;width:76%;height:74%;transition:background .32s,box-shadow .32s;display:grid;position:relative;box-shadow:inset 0 1px 1px #ffffffe6,inset 0 -2px 5px #c6530024}.theme-switch-icon{color:#fff;filter:drop-shadow(0 0 6px #fffffff2);transition:opacity .22s,transform .32s cubic-bezier(.34,1.3,.64,1);position:absolute}.theme-switch-icon--sun{color:var(--color-primary);filter:drop-shadow(0 0 4px #ff9a3d8c)}.theme-switch-icon--moon{opacity:0;transform:rotate(90deg)scale(.6)}.theme-switch--dark .theme-switch-track{background:linear-gradient(#2c2e32,#1e2023);border-color:#ffffff14;box-shadow:inset 0 1px #ffffff14,inset 0 -1px #0006,0 0 #fff0,0 10px 24px #0000008c}.theme-switch--dark .theme-switch-label--light{opacity:0;transform:translate(.5rem)}.theme-switch--dark .theme-switch-label--dark{opacity:1;transform:translate(0)}.theme-switch--dark .theme-switch-knob{transform:translateX(var(--switch-travel));background:radial-gradient(circle at 32% 26%,#ffffff24,#ffffff0a 55%,#0000001a);border-color:#ffffff24;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 -6px 12px #ffffff0a,0 8px 18px #00000073}.theme-switch--dark .theme-switch-lens{background:linear-gradient(160deg,#303237,#1c1e21);box-shadow:inset 0 1px #ffffff1f,inset 0 -2px 6px #00000080}.theme-switch--dark .theme-switch-icon--sun{opacity:0;transform:rotate(-90deg)scale(.6)}.theme-switch--dark .theme-switch-icon--moon{opacity:1;transform:rotate(0)scale(1)}.theme-switch--compact{--switch-width:2.5rem;--switch-height:1.375rem;--switch-knob:1.125rem;--switch-knob-width:1.375rem;--switch-inset:.125rem}.theme-switch--compact .theme-switch-label{display:none}.theme-switch--compact .theme-switch-knob{box-shadow:inset 0 0 0 1px #ffffff73,inset 0 -3px 6px #ffffff59,0 4px 10px #9a47002e}.theme-switch--compact.theme-switch--dark .theme-switch-knob{box-shadow:inset 0 0 0 1px #ffffff14,inset 0 -3px 6px #ffffff0a,0 4px 10px #00000073}
