.rp-mode-switch {
  position: relative;
  direction: ltr;
  width: 58px;
  max-width: 100%;
  height: 44px;
  flex: 0 0 auto;
  display: inline-grid;
  align-items: center;
  border-radius: 24px;
  outline-offset: 3px;
}
.rp-mode-switch:focus-visible { outline: 2px solid #737bca; }
.rp-mode-track {
  position: absolute;
  inset: 7px 0;
  border: 1px solid #b9bfcb;
  border-radius: 20px;
  background: linear-gradient(#dbe0eb, #f0f2f7);
  box-shadow: inset 0 2px 4px #26304733;
  transition: background .28s, border-color .28s;
}
.rp-mode-thumb {
  position: absolute;
  top: 10px;
  left: 4px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(#fff, #e8edf6);
  color: #93601a;
  box-shadow: 0 2px 5px #11182755, inset 0 1px 1px #fff;
  transition: left .32s cubic-bezier(.25,.8,.25,1), color .22s, background .22s;
}
.rp-mode-switch[aria-checked=true] .rp-mode-track {
  background: linear-gradient(#111520, #293349);
  border-color: #4f5e7a;
}
.rp-mode-switch[aria-checked=true] .rp-mode-thumb {
  left: calc(100% - 28px);
  background: linear-gradient(#475674, #28334c);
  color: #e9eeff;
  box-shadow: 0 2px 5px #090b10a0, inset 0 1px 1px #a2b2d17a;
}
.rp-mode-glyph { display: grid; place-items: center; }
.rp-mode-glyph svg { width: 15px; height: 15px; }
.rp-mode-glyph.is-changing { animation: rp-mode-form .3s ease-out both; }
.rp-mode-glyph.is-changing::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  color: inherit;
  box-shadow: -8px -5px currentColor, 5px -8px currentColor, 8px 4px currentColor, -5px 7px currentColor;
  animation: rp-mode-pixels .32s ease-out both;
}
.rp-login-mode { display: flex; justify-content: flex-end; margin-block-end: .5rem; }
@keyframes rp-mode-form {
  from { opacity: 0; transform: scale(.55); }
}
@keyframes rp-mode-pixels {
  from { opacity: .9; transform: scale(1.45); }
  to { opacity: 0; transform: scale(.35); }
}
@media (prefers-reduced-motion: reduce) {
  .rp-mode-track, .rp-mode-thumb { transition: none; }
  .rp-mode-glyph.is-changing, .rp-mode-glyph.is-changing::after { animation: none; }
  .rp-mode-glyph.is-changing::after { display: none; }
}