@font-face { font-family: 'Instrument Sans'; src: url('./instrument-sans-variable.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
.sl-toggle {
  --toggle-ink: #222222;
  --toggle-hover: #2b2b2b;
  --toggle-track: #101010;
  --toggle-track-on: #4a4a4a;
  --toggle-thumb: #f0f0f0;
  --toggle-text: #f8f8f8;
  --toggle-muted: #b3b3b3;
  --toggle-ease: cubic-bezier(.4, 0, .2, 1);
  width: min(320px, 100%);
  min-height: 82px;
  padding: 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #ffffff0b;
  border-radius: 14px;
  color: var(--toggle-text);
  background: var(--toggle-ink);
  box-shadow: inset 0 1px #ffffff0d, 0 2px 5px #00000010;
  font-family: 'Instrument Sans', sans-serif;
  text-align: left;
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 380ms var(--toggle-ease);
}
.sl-toggle *, .sl-toggle *::before, .sl-toggle *::after { box-sizing: border-box; }
.sl-toggle:hover { background: var(--toggle-hover); }
.sl-toggle__label { min-width: 0; flex: 1; display: block; cursor: pointer; }
.sl-toggle__copy { min-width: 0; display: grid; gap: 4px; }
.sl-toggle__title { overflow: hidden; text-overflow: ellipsis; color: var(--toggle-text); font-size: 15px; font-weight: 540; line-height: 20px; letter-spacing: -.01em; white-space: nowrap; }
.sl-toggle__status { color: var(--toggle-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; transition: color 300ms ease, opacity 240ms ease; }
.sl-toggle[data-checked="true"] .sl-toggle__status { color: #e5e5e5; }
.sl-toggle__switch { position: relative; display: block; flex: none; width: 64px; height: 36px; }
.sl-toggle__input { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sl-toggle__track { position: absolute; inset: 0; display: block; overflow: hidden; border: 1px solid #606060; border-radius: 12px; background: var(--toggle-track); box-shadow: inset 0 1px 3px #0008, 0 1px #ffffff0b; transition: background-color 360ms ease, border-color 360ms ease, box-shadow 420ms var(--toggle-ease), transform 260ms var(--toggle-ease); }
.sl-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #212121; background: var(--toggle-thumb); box-shadow: 0 2px 5px #0006, inset 0 1px #fff; transform: translateX(0); transform-origin: center; transition: transform 460ms var(--toggle-ease), width 220ms var(--toggle-ease), border-radius 320ms ease, background-color 320ms ease; }
.sl-toggle__input:checked + .sl-toggle__track { border-color: #828282; background: var(--toggle-track-on); box-shadow: inset 0 1px 3px #0004, 0 1px #ffffff12; }
.sl-toggle__input:checked + .sl-toggle__track .sl-toggle__thumb { transform: translateX(30px); }
.sl-toggle__input:focus-visible + .sl-toggle__track { outline: 2px solid #1f1f1f; outline-offset: 3px; box-shadow: 0 0 0 5px #6f6f6f2b, inset 0 1px 3px #0006; }
.sl-toggle__input:active + .sl-toggle__track .sl-toggle__thumb { width: 32px; }
.sl-toggle__input:checked:active + .sl-toggle__track .sl-toggle__thumb { transform: translateX(26px); }
.sl-toggle__input:disabled { cursor: not-allowed; }
.sl-toggle:has(.sl-toggle__input:disabled) { opacity: .55; }
.sl-toggle__dot { width: 7px; height: 7px; border-radius: 3px; background: #7f7f7f; box-shadow: inset 0 1px #fff6; transition: width 380ms var(--toggle-ease), background-color 300ms ease; }
.sl-toggle__input:checked + .sl-toggle__track .sl-toggle__dot { width: 13px; background: #3a3a3a; }

.sl-toggle__emblem { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #5a5a5a; border-radius: 12px; color: #d0d0d0; background: #181818; box-shadow: inset 0 1px #ffffff0b; transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease; }
.sl-toggle__emblem svg { display: block; width: 29px; height: 29px; overflow: visible; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.sl-toggle[data-checked="true"] .sl-toggle__emblem { color: #f2f2f2; border-color: #6f6f6f; background: #333333; }

.sl-bell__body { transform-origin: 16px 8px; }
.sl-bell__waves { opacity: 1; transition: opacity 340ms ease 140ms; }
.sl-bell__slash { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 420ms var(--toggle-ease), opacity 260ms ease; }
.sl-toggle--glide[data-checked="false"] .sl-bell__waves { opacity: 0; transition-delay: 0ms; }
.sl-toggle--glide[data-checked="false"] .sl-bell__slash { opacity: 1; stroke-dashoffset: 0; transition-delay: 100ms; }

.sl-toggle--theme .sl-toggle__thumb { transition: transform 580ms cubic-bezier(.22,.61,.36,1), background-color 320ms ease; }
.sl-toggle--theme .sl-toggle__input:active + .sl-toggle__track .sl-toggle__thumb { width: 28px; }
.sl-toggle--theme .sl-toggle__input:checked:active + .sl-toggle__track .sl-toggle__thumb { transform: translateX(30px); }
.sl-toggle--theme .sl-toggle__thumb svg { position: absolute; width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity 220ms ease; }
.sl-toggle--theme .sl-toggle__sun { opacity: 1; transition-delay: 150ms; }
.sl-toggle--theme .sl-toggle__moon { opacity: 0; }
.sl-toggle--theme .sl-toggle__input:checked + .sl-toggle__track .sl-toggle__sun { opacity: 0; transition-delay: 0ms; }
.sl-toggle--theme .sl-toggle__input:checked + .sl-toggle__track .sl-toggle__moon { opacity: 1; transition-delay: 150ms; }

.sl-sound__wave, .sl-sound__mute { transform-box: fill-box; transform-origin: center; transition: opacity 240ms ease, transform 420ms var(--toggle-ease), stroke-dashoffset 420ms var(--toggle-ease); }
.sl-sound__wave { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sl-sound__wave--two { transition-delay: 70ms; }
.sl-sound__mute { opacity: 0; transform: scale(.65) rotate(-12deg); }
.sl-toggle--sound[data-checked="false"] .sl-sound__wave { opacity: 0; stroke-dashoffset: 1; transform: translateX(-2px); transition-delay: 0ms; }
.sl-toggle--sound[data-checked="false"] .sl-sound__mute { opacity: 1; transform: scale(1) rotate(0); transition-delay: 120ms; }

.sl-lock__shackle { transform-box: fill-box; transform-origin: 26% 80%; transition: transform 520ms var(--toggle-ease); }
.sl-lock__body { transition: fill 300ms ease; }
.sl-toggle--privacy[data-checked="false"] .sl-lock__shackle { transform: translate(3px, -2px) rotate(24deg); }
.sl-toggle--privacy[data-checked="true"] .sl-lock__shackle { transform: translate(0) rotate(0); }
.sl-lock__key { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 360ms var(--toggle-ease) 150ms; }
.sl-toggle--privacy[data-checked="true"] .sl-lock__key { stroke-dashoffset: 0; }

.sl-sync__orbit { transform-origin: center; }
.sl-toggle--sync[data-checked="false"] .sl-sync__orbit { opacity: .72; }
.sl-toggle--sync[data-checked="true"] .sl-sync__orbit { opacity: 1; }

@media (max-width: 420px) {
  .sl-toggle { padding: 12px; gap: 10px; }
  .sl-toggle__emblem { width: 40px; height: 40px; }
  .sl-toggle__title { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-toggle, .sl-toggle *, .sl-toggle *::before, .sl-toggle *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .sl-toggle, .sl-toggle__emblem, .sl-toggle__track, .sl-toggle__thumb { forced-color-adjust: none; color: FieldText; background: Field; border-color: FieldText; box-shadow: none; }
  .sl-toggle__status, .sl-toggle__title { color: FieldText; }
  .sl-toggle__input:checked + .sl-toggle__track { background: Highlight; border-color: Highlight; }
  .sl-toggle__input:checked + .sl-toggle__track .sl-toggle__thumb { color: Highlight; background: HighlightText; }
  .sl-toggle__input:focus-visible + .sl-toggle__track { outline-color: Highlight; box-shadow: none; }
}