Home / Research / Open Autofill Safety Corpus / Playground Live synthetic fixture renderer
Inspect the form.Then inspect the refusal.
Move through all 12 deterministic phases in a real browser rendering
surface. Each phase keeps the corpus markup intact and shows the exact
password and OTP outcome an adapter is expected to report.
This is a manual renderer, not a password-manager benchmark or a
compatibility result.
No real credentials. No submission. No network.
The fixture runs in an opaque iframe sandbox without script execution,
form submission, popups, downloads, or same-origin access. Its displayed
synthetic.invalid URL is corpus metadata; the iframe does not
adopt that origin.
Password-only step in a multi-step login
01 A current-password field remains a login target when the username was collected on an earlier page.
Signup fields are not stored-password targets
01 Two explicit new-password fields must not receive an existing stored password.
Change-password forms are not login autofill targets
01 A settings form can identify the existing-password field without authorizing automatic credential fill.
OTP fields are separated from recovery and payment codes
01 An explicit one-time-code field is a TOTP target. 02 A corroborated six-box verification widget is an ordered TOTP target. 03 A recovery-code field stays excluded even when misleading markup advertises one-time-code. 04 A card verification value is payment data, not a one-time authentication code.
Ambiguous targets cause abstention
01 An unannotated password form without decisive context is not treated as a login target. 02 Two equally scored OTP candidates are not resolved by DOM order.
Multi-step authentication replaces its inputs
01 The first DOM has an identifier and no secret target. 02 After replacement, the newly queried current-password node is the login target. 03 A second replacement removes the password target and introduces a fresh OTP target.
https://synthetic.invalid/sign-in/challenge opaque sandbox
Rendered 01-current-password-step. Form submission is blocked by the iframe sandbox.
Expected observation
password-only-login
Password kind login
Stored-password target login-password
OTP kind none
OTP targets None Expected observation
signup-no-fill
Password kind signup
Stored-password target None — abstain
OTP kind none
OTP targets None Expected observation
change-password-no-fill
Password kind change-password
Stored-password target None — abstain
OTP kind none
OTP targets None Expected observation
otp-versus-code-traps
Password kind none
Stored-password target None — abstain
OTP kind single
OTP targets verification-code Expected observation
otp-versus-code-traps
Password kind none
Stored-password target None — abstain
OTP kind segmented
OTP targets otp-1, otp-2, otp-3, otp-4, otp-5, otp-6 Expected observation
otp-versus-code-traps
Password kind none
Stored-password target None — abstain
OTP kind none
OTP targets None Expected observation
otp-versus-code-traps
Password kind none
Stored-password target None — abstain
OTP kind none
OTP targets None Expected observation
ambiguity
Password kind unknown
Stored-password target None — abstain
OTP kind none
OTP targets None Expected observation
ambiguity
Password kind none
Stored-password target None — abstain
OTP kind none
OTP targets None Expected observation
dynamic-replacement
Password kind none
Stored-password target None — abstain
OTP kind none
OTP targets None Expected observation
dynamic-replacement
Password kind login
Stored-password target session-password
OTP kind none
OTP targets None Expected observation
dynamic-replacement
Password kind none
Stored-password target None — abstain
OTP kind single
OTP targets session-otp How to read it
Rendering and evidence stay separate.
Use the phase list to inspect browser parsing, labels, autocomplete
tokens, field order, and DOM replacement. The expectation panel is the
machine-readable contract; the sandbox is only its visual companion.
Deliberate limits No password-manager extension is launched or evaluated. No saved credential or generated OTP is requested. No top-level or synthetic origin is emulated. No cross-origin frame, hostile script, or closed shadow root is covered. Read the corpus scope Download JSON Inspect source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; form-action 'none'; base-uri 'none'"
/>
<style>
:root {
color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-width: 260px;
margin: 0;
padding: clamp(24px, 7vw, 64px);
background: #f4f8f7;
color: #14211f;
}
main,
form,
#otp-code-widget {
width: min(100%, 520px);
}
main,
form {
display: grid;
gap: 16px;
}
main > form {
width: 100%;
}
h1 {
margin: 0 0 6px;
font-size: clamp(1.55rem, 4vw, 2.15rem);
letter-spacing: -0.04em;
}
label {
margin-bottom: -8px;
color: #344743;
font-size: 0.88rem;
font-weight: 650;
}
input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #b8c8c4;
border-radius: 10px;
background: #ffffff;
color: #14211f;
outline: none;
}
input:focus {
border-color: #188d77;
box-shadow: 0 0 0 3px rgba(24, 141, 119, 0.14);
}
button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #126c5a;
color: #ffffff;
font-weight: 720;
}
#otp-code-widget {
display: grid;
grid-template-columns: repeat(6, minmax(34px, 54px));
gap: 8px;
}
#otp-code-widget input {
padding: 0;
text-align: center;
}
@media (max-width: 430px) {
#otp-code-widget {
grid-template-columns: repeat(3, minmax(44px, 1fr));
}
}
</style>
</head>
<body>
<main>
<h1>Welcome back</h1>
<form id="password-step">
<input
id="login-password"
type="password"
autocomplete="current-password"
/>
<button type="submit">Continue</button>
</form>
</main>
</body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; form-action 'none'; base-uri 'none'"
/>
<style>
:root {
color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-width: 260px;
margin: 0;
padding: clamp(24px, 7vw, 64px);
background: #f4f8f7;
color: #14211f;
}
main,
form,
#otp-code-widget {
width: min(100%, 520px);
}
main,
form {
display: grid;
gap: 16px;
}
main > form {
width: 100%;
}
h1 {
margin: 0 0 6px;
font-size: clamp(1.55rem, 4vw, 2.15rem);
letter-spacing: -0.04em;
}
label {
margin-bottom: -8px;
color: #344743;
font-size: 0.88rem;
font-weight: 650;
}
input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #b8c8c4;
border-radius: 10px;
background: #ffffff;
color: #14211f;
outline: none;
}
input:focus {
border-color: #188d77;
box-shadow: 0 0 0 3px rgba(24, 141, 119, 0.14);
}
button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #126c5a;
color: #ffffff;
font-weight: 720;
}
#otp-code-widget {
display: grid;
grid-template-columns: repeat(6, minmax(34px, 54px));
gap: 8px;
}
#otp-code-widget input {
padding: 0;
text-align: center;
}
@media (max-width: 430px) {
#otp-code-widget {
grid-template-columns: repeat(3, minmax(44px, 1fr));
}
}
</style>
</head>
<body>
<form id="signup-form">
<input id="signup-email" type="email" autocomplete="username" />
<input id="signup-password" type="password" autocomplete="new-password" />
<input id="signup-password-confirmation" type="password" autocomplete="new-password" />
<button type="submit">Create account</button>
</form>
</body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; form-action 'none'; base-uri 'none'"
/>
<style>
:root {
color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-width: 260px;
margin: 0;
padding: clamp(24px, 7vw, 64px);
background: #f4f8f7;
color: #14211f;
}
main,
form,
#otp-code-widget {
width: min(100%, 520px);
}
main,
form {
display: grid;
gap: 16px;
}
main > form {
width: 100%;
}
h1 {
margin: 0 0 6px;
font-size: clamp(1.55rem, 4vw, 2.15rem);
letter-spacing: -0.04em;
}
label {
margin-bottom: -8px;
color: #344743;
font-size: 0.88rem;
font-weight: 650;
}
input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #b8c8c4;
border-radius: 10px;
background: #ffffff;
color: #14211f;
outline: none;
}
input:focus {
border-color: #188d77;
box-shadow: 0 0 0 3px rgba(24, 141, 119, 0.14);
}
button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #126c5a;
color: #ffffff;
font-weight: 720;
}
#otp-code-widget {
display: grid;
grid-template-columns: repeat(6, minmax(34px, 54px));
gap: 8px;
}
#otp-code-widget input {
padding: 0;
text-align: center;
}
@media (max-width: 430px) {
#otp-code-widget {
grid-template-columns: repeat(3, minmax(44px, 1fr));
}
}
</style>
</head>
<body>
<main>
<h1>Change password</h1>
<form id="change-password-form">
<input id="old-password" type="password" autocomplete="current-password" />
<input id="new-password" type="password" autocomplete="new-password" />
<input id="new-password-confirmation" type="password" autocomplete="new-password" />
<button type="submit">Update password</button>
</form>
</main>
</body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; form-action 'none'; base-uri 'none'"
/>
<style>
:root {
color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-width: 260px;
margin: 0;
padding: clamp(24px, 7vw, 64px);
background: #f4f8f7;
color: #14211f;
}
main,
form,
#otp-code-widget {
width: min(100%, 520px);
}
main,
form {
display: grid;
gap: 16px;
}
main > form {
width: 100%;
}
h1 {
margin: 0 0 6px;
font-size: clamp(1.55rem, 4vw, 2.15rem);
letter-spacing: -0.04em;
}
label {
margin-bottom: -8px;
color: #344743;
font-size: 0.88rem;
font-weight: 650;
}
input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #b8c8c4;
border-radius: 10px;
background: #ffffff;
color: #14211f;
outline: none;
}
input:focus {
border-color: #188d77;
box-shadow: 0 0 0 3px rgba(24, 141, 119, 0.14);
}
button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #126c5a;
color: #ffffff;
font-weight: 720;
}
#otp-code-widget {
display: grid;
grid-template-columns: repeat(6, minmax(34px, 54px));
gap: 8px;
}
#otp-code-widget input {
padding: 0;
text-align: center;
}
@media (max-width: 430px) {
#otp-code-widget {
grid-template-columns: repeat(3, minmax(44px, 1fr));
}
}
</style>
</head>
<body>
<form id="verification-form">
<label for="verification-code">Authentication code</label>
<input
id="verification-code"
name="mfa_code"
type="text"
inputmode="numeric"
maxlength="6"
autocomplete="one-time-code"
/>
</form>
</body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; form-action 'none'; base-uri 'none'"
/>
<style>
:root {
color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-width: 260px;
margin: 0;
padding: clamp(24px, 7vw, 64px);
background: #f4f8f7;
color: #14211f;
}
main,
form,
#otp-code-widget {
width: min(100%, 520px);
}
main,
form {
display: grid;
gap: 16px;
}
main > form {
width: 100%;
}
h1 {
margin: 0 0 6px;
font-size: clamp(1.55rem, 4vw, 2.15rem);
letter-spacing: -0.04em;
}
label {
margin-bottom: -8px;
color: #344743;
font-size: 0.88rem;
font-weight: 650;
}
input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #b8c8c4;
border-radius: 10px;
background: #ffffff;
color: #14211f;
outline: none;
}
input:focus {
border-color: #188d77;
box-shadow: 0 0 0 3px rgba(24, 141, 119, 0.14);
}
button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #126c5a;
color: #ffffff;
font-weight: 720;
}
#otp-code-widget {
display: grid;
grid-template-columns: repeat(6, minmax(34px, 54px));
gap: 8px;
}
#otp-code-widget input {
padding: 0;
text-align: center;
}
@media (max-width: 430px) {
#otp-code-widget {
grid-template-columns: repeat(3, minmax(44px, 1fr));
}
}
</style>
</head>
<body>
<div id="otp-code-widget">
<input id="otp-1" class="otp-box" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 1" />
<input id="otp-2" class="otp-box" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 2" />
<input id="otp-3" class="otp-box" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 3" />
<input id="otp-4" class="otp-box" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 4" />
<input id="otp-5" class="otp-box" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 5" />
<input id="otp-6" class="otp-box" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 6" />
</div>
</body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; form-action 'none'; base-uri 'none'"
/>
<style>
:root {
color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-width: 260px;
margin: 0;
padding: clamp(24px, 7vw, 64px);
background: #f4f8f7;
color: #14211f;
}
main,
form,
#otp-code-widget {
width: min(100%, 520px);
}
main,
form {
display: grid;
gap: 16px;
}
main > form {
width: 100%;
}
h1 {
margin: 0 0 6px;
font-size: clamp(1.55rem, 4vw, 2.15rem);
letter-spacing: -0.04em;
}
label {
margin-bottom: -8px;
color: #344743;
font-size: 0.88rem;
font-weight: 650;
}
input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #b8c8c4;
border-radius: 10px;
background: #ffffff;
color: #14211f;
outline: none;
}
input:focus {
border-color: #188d77;
box-shadow: 0 0 0 3px rgba(24, 141, 119, 0.14);
}
button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #126c5a;
color: #ffffff;
font-weight: 720;
}
#otp-code-widget {
display: grid;
grid-template-columns: repeat(6, minmax(34px, 54px));
gap: 8px;
}
#otp-code-widget input {
padding: 0;
text-align: center;
}
@media (max-width: 430px) {
#otp-code-widget {
grid-template-columns: repeat(3, minmax(44px, 1fr));
}
}
</style>
</head>
<body>
<form id="recovery-form">
<label for="recovery-code">Recovery code</label>
<input
id="recovery-code"
name="recovery_code"
type="text"
inputmode="numeric"
maxlength="10"
autocomplete="one-time-code"
/>
</form>
</body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; form-action 'none'; base-uri 'none'"
/>
<style>
:root {
color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-width: 260px;
margin: 0;
padding: clamp(24px, 7vw, 64px);
background: #f4f8f7;
color: #14211f;
}
main,
form,
#otp-code-widget {
width: min(100%, 520px);
}
main,
form {
display: grid;
gap: 16px;
}
main > form {
width: 100%;
}
h1 {
margin: 0 0 6px;
font-size: clamp(1.55rem, 4vw, 2.15rem);
letter-spacing: -0.04em;
}
label {
margin-bottom: -8px;
color: #344743;
font-size: 0.88rem;
font-weight: 650;
}
input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #b8c8c4;
border-radius: 10px;
background: #ffffff;
color: #14211f;
outline: none;
}
input:focus {
border-color: #188d77;
box-shadow: 0 0 0 3px rgba(24, 141, 119, 0.14);
}
button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #126c5a;
color: #ffffff;
font-weight: 720;
}
#otp-code-widget {
display: grid;
grid-template-columns: repeat(6, minmax(34px, 54px));
gap: 8px;
}
#otp-code-widget input {
padding: 0;
text-align: center;
}
@media (max-width: 430px) {
#otp-code-widget {
grid-template-columns: repeat(3, minmax(44px, 1fr));
}
}
</style>
</head>
<body>
<form id="payment-form">
<label for="card-security-code">Card security code</label>
<input
id="card-security-code"
name="cvv"
type="text"
inputmode="numeric"
maxlength="3"
autocomplete="cc-csc"
/>
</form>
</body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; form-action 'none'; base-uri 'none'"
/>
<style>
:root {
color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-width: 260px;
margin: 0;
padding: clamp(24px, 7vw, 64px);
background: #f4f8f7;
color: #14211f;
}
main,
form,
#otp-code-widget {
width: min(100%, 520px);
}
main,
form {
display: grid;
gap: 16px;
}
main > form {
width: 100%;
}
h1 {
margin: 0 0 6px;
font-size: clamp(1.55rem, 4vw, 2.15rem);
letter-spacing: -0.04em;
}
label {
margin-bottom: -8px;
color: #344743;
font-size: 0.88rem;
font-weight: 650;
}
input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #b8c8c4;
border-radius: 10px;
background: #ffffff;
color: #14211f;
outline: none;
}
input:focus {
border-color: #188d77;
box-shadow: 0 0 0 3px rgba(24, 141, 119, 0.14);
}
button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #126c5a;
color: #ffffff;
font-weight: 720;
}
#otp-code-widget {
display: grid;
grid-template-columns: repeat(6, minmax(34px, 54px));
gap: 8px;
}
#otp-code-widget input {
padding: 0;
text-align: center;
}
@media (max-width: 430px) {
#otp-code-widget {
grid-template-columns: repeat(3, minmax(44px, 1fr));
}
}
</style>
</head>
<body>
<form id="ambiguous-password-form">
<input id="account-alias" type="text" name="account-alias" />
<input id="ambiguous-password" type="password" />
<button type="submit">Proceed</button>
</form>
</body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; form-action 'none'; base-uri 'none'"
/>
<style>
:root {
color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-width: 260px;
margin: 0;
padding: clamp(24px, 7vw, 64px);
background: #f4f8f7;
color: #14211f;
}
main,
form,
#otp-code-widget {
width: min(100%, 520px);
}
main,
form {
display: grid;
gap: 16px;
}
main > form {
width: 100%;
}
h1 {
margin: 0 0 6px;
font-size: clamp(1.55rem, 4vw, 2.15rem);
letter-spacing: -0.04em;
}
label {
margin-bottom: -8px;
color: #344743;
font-size: 0.88rem;
font-weight: 650;
}
input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #b8c8c4;
border-radius: 10px;
background: #ffffff;
color: #14211f;
outline: none;
}
input:focus {
border-color: #188d77;
box-shadow: 0 0 0 3px rgba(24, 141, 119, 0.14);
}
button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #126c5a;
color: #ffffff;
font-weight: 720;
}
#otp-code-widget {
display: grid;
grid-template-columns: repeat(6, minmax(34px, 54px));
gap: 8px;
}
#otp-code-widget input {
padding: 0;
text-align: center;
}
@media (max-width: 430px) {
#otp-code-widget {
grid-template-columns: repeat(3, minmax(44px, 1fr));
}
}
</style>
</head>
<body>
<form id="ambiguous-code-form">
<input id="verification-left" name="mfa_code_left" type="text" inputmode="numeric" maxlength="6" />
<input id="verification-right" name="mfa_code_right" type="text" inputmode="numeric" maxlength="6" />
</form>
</body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; form-action 'none'; base-uri 'none'"
/>
<style>
:root {
color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-width: 260px;
margin: 0;
padding: clamp(24px, 7vw, 64px);
background: #f4f8f7;
color: #14211f;
}
main,
form,
#otp-code-widget {
width: min(100%, 520px);
}
main,
form {
display: grid;
gap: 16px;
}
main > form {
width: 100%;
}
h1 {
margin: 0 0 6px;
font-size: clamp(1.55rem, 4vw, 2.15rem);
letter-spacing: -0.04em;
}
label {
margin-bottom: -8px;
color: #344743;
font-size: 0.88rem;
font-weight: 650;
}
input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #b8c8c4;
border-radius: 10px;
background: #ffffff;
color: #14211f;
outline: none;
}
input:focus {
border-color: #188d77;
box-shadow: 0 0 0 3px rgba(24, 141, 119, 0.14);
}
button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #126c5a;
color: #ffffff;
font-weight: 720;
}
#otp-code-widget {
display: grid;
grid-template-columns: repeat(6, minmax(34px, 54px));
gap: 8px;
}
#otp-code-widget input {
padding: 0;
text-align: center;
}
@media (max-width: 430px) {
#otp-code-widget {
grid-template-columns: repeat(3, minmax(44px, 1fr));
}
}
</style>
</head>
<body>
<form id="session-step">
<input id="session-identifier" type="email" autocomplete="username" />
<button type="submit">Continue</button>
</form>
</body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; form-action 'none'; base-uri 'none'"
/>
<style>
:root {
color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-width: 260px;
margin: 0;
padding: clamp(24px, 7vw, 64px);
background: #f4f8f7;
color: #14211f;
}
main,
form,
#otp-code-widget {
width: min(100%, 520px);
}
main,
form {
display: grid;
gap: 16px;
}
main > form {
width: 100%;
}
h1 {
margin: 0 0 6px;
font-size: clamp(1.55rem, 4vw, 2.15rem);
letter-spacing: -0.04em;
}
label {
margin-bottom: -8px;
color: #344743;
font-size: 0.88rem;
font-weight: 650;
}
input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #b8c8c4;
border-radius: 10px;
background: #ffffff;
color: #14211f;
outline: none;
}
input:focus {
border-color: #188d77;
box-shadow: 0 0 0 3px rgba(24, 141, 119, 0.14);
}
button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #126c5a;
color: #ffffff;
font-weight: 720;
}
#otp-code-widget {
display: grid;
grid-template-columns: repeat(6, minmax(34px, 54px));
gap: 8px;
}
#otp-code-widget input {
padding: 0;
text-align: center;
}
@media (max-width: 430px) {
#otp-code-widget {
grid-template-columns: repeat(3, minmax(44px, 1fr));
}
}
</style>
</head>
<body>
<form id="session-step">
<input id="session-password" type="password" autocomplete="current-password" />
<button type="submit">Continue</button>
</form>
</body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; form-action 'none'; base-uri 'none'"
/>
<style>
:root {
color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-width: 260px;
margin: 0;
padding: clamp(24px, 7vw, 64px);
background: #f4f8f7;
color: #14211f;
}
main,
form,
#otp-code-widget {
width: min(100%, 520px);
}
main,
form {
display: grid;
gap: 16px;
}
main > form {
width: 100%;
}
h1 {
margin: 0 0 6px;
font-size: clamp(1.55rem, 4vw, 2.15rem);
letter-spacing: -0.04em;
}
label {
margin-bottom: -8px;
color: #344743;
font-size: 0.88rem;
font-weight: 650;
}
input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #b8c8c4;
border-radius: 10px;
background: #ffffff;
color: #14211f;
outline: none;
}
input:focus {
border-color: #188d77;
box-shadow: 0 0 0 3px rgba(24, 141, 119, 0.14);
}
button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #126c5a;
color: #ffffff;
font-weight: 720;
}
#otp-code-widget {
display: grid;
grid-template-columns: repeat(6, minmax(34px, 54px));
gap: 8px;
}
#otp-code-widget input {
padding: 0;
text-align: center;
}
@media (max-width: 430px) {
#otp-code-widget {
grid-template-columns: repeat(3, minmax(44px, 1fr));
}
}
</style>
</head>
<body>
<form id="session-step">
<input
id="session-otp"
name="otp_code"
type="text"
inputmode="numeric"
maxlength="6"
autocomplete="one-time-code"
/>
<button type="submit">Verify</button>
</form>
</body>
</html> 