@keyframes fnAutoFill {
  to {
    font-family: inherit;
    font-size: inherit;
  }
}
:root {
  --sw-size: 1em;
  --sw-gap: 0.4em;
  --sw-radius: 3px;
  --sw-back: #dbdbdb;
  --sw-border: 1px solid #d5d5d5;
  --sw-bt-color: #333;
  --sw-bt-color-hover: #333;
  --sw-bt-color-active: #333;
  --sw-bt-back: transparent;
  --sw-bt-back-hover: #00000022;
  --sw-bt-back-active: #fff;
  --sw-bt-border: 1px solid #00000000;
  --sw-bt-border-hover: 1px solid #00000000;
  --sw-bt-border-active: 1px solid #fff;
  --sw-bt-shadow: 0 0 0px #00000000;
  --sw-bt-shadow-hover: 0 0 0px #00000000;
  --sw-bt-shadow-active: 1px 1px 4px #00000033;
}
:where(.switcher, .as-switcher):not(:has(>.switcher-shim)),
:where(.switcher, .as-switcher) > .switcher-shim {
  display: flex;
  padding: var(--sw-gap);
  gap: var(--sw-gap);
  background: var(--sw-back);
  border: var(--sw-border);
  border-radius: var(--sw-radius);
  font-size: var(--sw-size);
}
:where(.switcher, .as-switcher) .switcher-button {
  transition: all 0.5s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 0.97em;
  flex: 0 0 auto;
  gap: calc(var(--sw-size) * 0.6);
  padding: calc(var(--sw-size) * 0.2) calc(var(--sw-size) * 0.8);
  background: var(--sw-bt-back);
  border: var(--sw-bt-border);
  border-radius: var(--sw-radius);
  color: var(--sw-bt-color);
  box-shadow: var(--sw-br-shadow);
}
:where(.switcher, .as-switcher) .switcher-button:hover {
  background: var(--sw-bt-back-hover);
  border: var(--sw-bt-border-hover);
  color: var(--sw-bt-color-hover);
  box-shadow: var(--sw-br-shadow-hover);
}
:where(.switcher, .as-switcher) .switcher-button.active {
  background: var(--sw-bt-back-active);
  border: var(--sw-bt-border-active);
  color: var(--sw-bt-color-active);
  box-shadow: var(--sw-bt-shadow-active);
}
:where(.switcher, .as-switcher).wide .switcher-button {
  flex: 1;
}