/* Safe to load on the home page: unlock layout is scoped to its body class. */
.unlock-page{color-scheme:dark;font:17px Arial,Helvetica,sans-serif;background:#0f0f0f;color:#f1f1f1;margin:0;min-height:100vh;min-height:100dvh;display:flex;justify-content:center;padding:24px 20px}
.unlock-page *,#account-login,#account-login *{box-sizing:border-box}
.unlock-page [hidden],#account-login [hidden]{display:none!important}
.unlock-page main{width:100%;max-width:480px;margin:auto 0}
.unlock-page .brand{font-size:22px;font-weight:800;display:flex;gap:10px;align-items:center}
.unlock-page .brand span{background:#f22e36;border-radius:9px;padding:5px 12px;font-size:18px}
.unlock-page h1{font-size:30px;margin:24px 0 8px}
.unlock-page p{color:#b9b9b9;line-height:1.5;margin:12px 0}
.unlock-page button,.unlock-page input,.unlock-page summary,#account-login button,#account-login input,#account-login-open{font:inherit;min-height:52px;touch-action:manipulation}
.unlock-page button,#account-login button{border:1px solid transparent;border-radius:12px;padding:12px 18px;background:#f1f1f1;color:#101010;cursor:pointer}
.unlock-page button:disabled,#account-login button:disabled{opacity:.55;cursor:default}
.unlock-page .secondary,#account-login .secondary{background:transparent;color:#e4e4e4;border-color:#555}
.unlock-page input,#account-login input{display:block;width:100%;min-width:0;border:1px solid #666;border-radius:10px;padding:12px;background:#181818;color:#fff;font-size:17px;letter-spacing:normal}
.unlock-page input:read-only,#account-login input:read-only{color:#b9b9b9}
.unlock-page :focus-visible,#account-login :focus-visible,#account-login-open:focus-visible{outline:3px solid #9ccaff;outline-offset:3px}
.unlock-page .auth-field,#account-login .auth-field{margin-top:14px}
.unlock-page label,#account-login label{display:block;font-weight:600;margin-bottom:7px}
.unlock-page small,#account-login small{display:block;color:#b9b9b9;font-size:14px;line-height:1.4;margin-top:6px}
.unlock-page #auth-submit,#account-login-submit{width:100%;margin-top:18px}
.unlock-page #auth-status,#account-login-status{min-height:24px;color:#d7e8ff;overflow-wrap:anywhere;line-height:1.5}
.unlock-page .auth-actions{display:flex;gap:10px;flex-wrap:wrap}
.unlock-page #auth-invite-note{font-size:14px}
.unlock-page details{margin-top:20px;border-top:1px solid #444;padding-top:8px}
.unlock-page summary{padding:14px 0;cursor:pointer;line-height:1.5}
.unlock-page #code{display:block;font-size:38px;letter-spacing:5px;font-variant-numeric:tabular-nums;user-select:all}
.unlock-page #instruction{font-size:15px}
.unlock-page #confirm-account button{margin-top:8px}
.unlock-page footer{color:#999;font-size:13px;margin-top:24px}
#account-login{color-scheme:dark;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;border:1px solid #555;border-radius:18px;padding:24px;background:#181818;color:#f1f1f1;font:17px Arial,Helvetica,sans-serif;box-shadow:0 16px 80px #0009}
#account-login::backdrop{background:#000b}
#account-login .account-login-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
#account-login h2{margin:0;font-size:26px}
#account-login p{line-height:1.5;overflow-wrap:anywhere}
#account-login-forgot{margin-top:8px}
@media(max-width:480px){.unlock-page{padding:20px 16px}#account-login{padding:18px}}
@media(max-height:650px){.unlock-page{padding-top:16px;padding-bottom:16px}.unlock-page main{margin:0}.unlock-page h1{margin-top:16px}.unlock-page .auth-field,#account-login .auth-field{margin-top:10px}.unlock-page footer{margin-top:16px}#account-login{padding:16px 20px}}

#account-login-feedback{position:sticky;bottom:-18px;background:#181818;padding:10px 0 18px;z-index:1}
#account-login-feedback #account-login-status{margin:0;scroll-margin:16px}
#account-login-feedback #account-login-submit{margin-top:10px}