/* At rest the letters invert against whatever lies beneath, so the control stays quiet but legible on light and dark sections. */
.ab-switch{position:fixed;z-index:30;top:24px;left:280px;display:flex;align-items:center;gap:1px;padding:3px;background:transparent;border:1px solid transparent;border-radius:100px;color:#fff;mix-blend-mode:difference;opacity:.55;box-shadow:none;font:500 11px/1.2 'DM Sans',sans-serif;letter-spacing:.04em;touch-action:none;user-select:none;cursor:grab;transition:opacity .2s,background .2s,border-color .2s,color .2s,box-shadow .2s}
.ab-switch:hover,.ab-switch:focus-within,.ab-switch.is-dragging{mix-blend-mode:normal;opacity:1;background:rgba(18,35,43,.86);border-color:rgba(255,255,255,.4);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.ab-switch.is-dragging{cursor:grabbing}
.ab-switch a{display:grid;place-items:center;min-width:34px;min-height:34px;border-radius:100px;color:inherit;text-decoration:none;font-size:11px}
.ab-switch a:hover,.ab-switch a:focus-visible{background:rgba(255,255,255,.2)}
.ab-switch a[aria-current=page]{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.ab-switch:hover a[aria-current=page],.ab-switch:focus-within a[aria-current=page]{background:#fff;color:#172c3c;box-shadow:none}
.ab-switch :focus-visible,.ab-switch:focus-visible{outline:2px solid #6a8ca6;outline-offset:2px}
@media(max-width:700px){.ab-switch a{min-width:36px;min-height:36px}}
@media(max-width:340px){.ab-switch a{min-width:30px;min-height:30px}}