/* The style menu behind the "Vault." wordmark (switcher.js). Each page sets
 * --vs-bg, --vs-ink, --vs-soft and --vs-rule to its own palette; the fallbacks
 * are the current page's. */
[data-style-switcher]{position:relative;display:inline-block}
/* Not `all:unset`: that would also wipe the size and weight each page gives its
 * wordmark class. Only the button's own chrome is removed; family and line
 * height come from the page. */
[data-style-switcher] > button{cursor:pointer;display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:inherit;font-family:inherit;line-height:inherit;letter-spacing:inherit;border-radius:6px;padding:2px 4px;margin:-2px -4px;-webkit-appearance:none;appearance:none}
[data-style-switcher] > button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
[data-style-switcher] > button svg{width:10px;height:10px;opacity:.55;transition:transform .15s ease}
[data-style-switcher] > button[aria-expanded="true"] svg{transform:rotate(180deg)}
.vs-menu{position:absolute;left:-4px;top:calc(100% + 8px);z-index:50;min-width:260px;padding:6px;
  background:var(--vs-bg,#fff);color:var(--vs-ink,#1d2230);border:1px solid var(--vs-rule,#d9d6ce);border-radius:8px;
  box-shadow:0 18px 40px -18px rgba(20,24,40,.35);font:400 14px/1.4 'Libre Franklin',system-ui,sans-serif;letter-spacing:0}
.vs-label{font-size:12px;font-weight:600;color:var(--vs-soft,#5f6572);padding:6px 10px 4px}
.vs-menu a{display:grid;gap:1px;padding:8px 10px 8px 30px;border-radius:5px;color:inherit;text-decoration:none;position:relative}
.vs-menu a:hover,.vs-menu a:focus-visible{background:color-mix(in oklch,var(--vs-ink,#1d2230) 7%,transparent);outline:none}
.vs-menu a.on::before{content:'';position:absolute;left:11px;top:13px;width:9px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.vs-name{font-weight:600}
.vs-note{font-size:12.5px;color:var(--vs-soft,#5f6572)}
