.xp-switch{white-space:nowrap;cursor:pointer;touch-action:manipulation;justify-content:center;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px;font-size:15px;font-weight:600;line-height:1;text-decoration:none;display:inline-flex}.xp-switch__glyph{flex-shrink:0}.xp-switch--to-fg2{--switch-paper:#f7f9f4;--switch-ink:#13201a;--switch-engrave:#1d5c45;--switch-rule:#7e8c84;--switch-hairline:#d3dbd4;border:1px solid var(--switch-rule);background:var(--switch-paper);color:var(--switch-ink);box-shadow:inset 0 0 0 2px var(--switch-paper), inset 0 0 0 3px var(--switch-hairline), var(--shadow-hard,3px 3px 0 #111);border-radius:3px;transition:transform 70ms linear,box-shadow 70ms linear}.xp-switch--to-fg2 .xp-switch__glyph,.xp-switch--to-fg2:hover{color:var(--switch-engrave)}.xp-switch--to-fg2:active{box-shadow:inset 0 0 0 2px var(--switch-paper), inset 0 0 0 3px var(--switch-hairline);transform:translate(3px,3px)}.xp-switch--to-fg2:focus-visible{outline:2px solid var(--switch-engrave);outline-offset:3px}.xp-switch--to-fg1{border:1px solid var(--color-rule,currentColor);border-radius:var(--radius-card,3px);background:var(--color-surface,transparent);color:var(--color-ink,inherit);box-shadow:var(--shadow-card,none);gap:6px;padding:0 10px;font-size:13px;font-weight:500}.xp-switch--to-fg1:focus-visible{outline:2px solid var(--color-focus,currentColor);outline-offset:2px}.xp-switch-row{justify-content:flex-end;margin-top:10px;display:flex}.xp-switch--inline{margin-right:auto}.xp-switch--wide{display:none}@media (min-width:640px){.xp-switch-row,.xp-switch--inline{display:none}.xp-switch--wide{display:inline-flex}}@media (prefers-reduced-motion:reduce){.xp-switch--to-fg2{transition:none}}