/* The vault field: a tiny code input fixed at the bottom of every page. */
.vault{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;margin:0;padding:0 14px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(5,5,16,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.vault input{width:104px;height:30px;padding:0 4px;border:0;border-bottom:1px solid rgba(255,255,255,.22);border-radius:0;background:transparent;color:var(--fg,#f2f2f7);
  font:400 11px/1 var(--sh-font-mono,ui-monospace,"SF Mono",Menlo,monospace);letter-spacing:.12em;text-align:center;text-transform:lowercase;outline:0;
  caret-color:var(--accent,#DC426B);transition:width .35s cubic-bezier(.2,.8,.2,1),border-color .25s,opacity .25s;opacity:.55}
.vault input::placeholder{color:rgba(255,255,255,.4);letter-spacing:.14em}
.vault input:hover{opacity:.9}
.vault input:focus{width:210px;opacity:1;border-bottom-color:var(--accent,#DC426B)}
.vault input:focus::placeholder{color:transparent}
.vault.is-busy input{border-bottom-color:rgba(255,255,255,.5);animation:vault-pulse .8s ease-in-out infinite}
.vault.is-no input{animation:vault-shake .4s;border-bottom-color:#ff5c7a}
.vault.is-yes input{border-bottom-color:var(--accent,#DC426B);color:var(--accent,#DC426B)}
@keyframes vault-shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes vault-pulse{50%{opacity:.35}}
/* the release page player sits bottom-left; keep the field clear of it on narrow screens */
@media (max-width:640px){.vault{left:auto;right:12px;transform:none;bottom:40px;padding:0 10px}.vault input{width:84px}.vault input:focus{width:150px}}
@media (prefers-reduced-motion:reduce){.vault input,.vault.is-no input,.vault.is-busy input{animation:none;transition:none}}
.woocommerce-checkout .vault{display:none}