:root{font-family:"SF Pro Display","Segoe UI","Helvetica Neue",Arial,sans-serif;color:#1c1e21;background:#fff;font-synthesis:none;--blue:#0866ff;--muted:#65676b;--border:#dce0e5}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #86b5ff;outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.demo-label{padding:10px 24px;text-align:center;background:#f7f9fc;border-bottom:1px solid #eef1f5;color:#687585;font-size:11px;letter-spacing:.15px}.login-layout{display:grid;grid-template-columns:1.12fr 1fr;max-width:1152px;margin:0 auto;min-height:710px}.brand-panel{padding:56px 34px 40px 25px;position:relative}.facebook-mark{display:flex;align-items:flex-end;justify-content:center;background:var(--blue);width:47px;height:47px;border-radius:50%;color:white;font-family:Arial,sans-serif;font-size:52px;font-weight:bold;line-height:.88;overflow:hidden;padding-right:1px}.brand-panel h1{font-size:49px;line-height:1.12;letter-spacing:-1.8px;font-weight:700;margin:54px 0 16px}.brand-panel h1 span{color:#0064e0}.collage{width:100%;max-width:555px;margin-left:-9px;margin-top:19px}.collage svg{width:100%;height:auto;display:block}.login-panel{border-left:1px solid #e4e6eb;margin:48px 0;display:flex;align-items:center;justify-content:center;padding:35px 0 35px 58px}.login-card{width:100%;max-width:394px;padding-bottom:14px}.login-card h2{font-size:21px;letter-spacing:-.4px;margin:0 0 25px;font-weight:650}.field{min-width:0;margin-bottom:15px}.field label,legend{font-size:14px;font-weight:600;display:block;margin-bottom:9px}input,select{width:100%;height:58px;background:white;border:1px solid var(--border);border-radius:12px;padding:0 17px;color:#1c1e21;font-size:15px;transition:border-color .15s,box-shadow .15s}input::placeholder{color:#7d838b;opacity:1}input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #0866ff14}input[aria-invalid="true"],select[aria-invalid="true"]{border-color:#d54141}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%2365676b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 13px center;background-size:20px;background-repeat:no-repeat;padding-right:37px}.input-with-action{position:relative}.input-with-action input{padding-right:52px}.show-password{position:absolute;right:10px;top:12px;border:0;background:transparent;padding:7px;color:#777f89;border-radius:6px;width:35px;height:35px}.show-password svg{width:21px;fill:none;stroke:currentColor;stroke-width:1.5}.show-password:hover{background:#f0f3f8}.button{height:47px;width:100%;border-radius:28px;border:0;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}.button:active{transform:scale(.99)}.primary{background:var(--blue);color:white}.primary:hover{background:#0059e5}.outline{border:1px solid #0866ff;background:white;color:#0064e0}.outline:hover{background:#f2f7ff}.secondary{background:#eef0f3;color:#1c1e21;margin-top:12px}.secondary:hover{background:#e3e7ec}.login-card .primary{margin-top:22px}.text-button{border:0;background:none;font-size:14px}.forgot{display:block;margin:19px auto 31px;padding:5px 12px}.forgot:hover{text-decoration:underline}.meta-brand{display:flex;align-items:center;justify-content:center;gap:5px;color:#263344;margin-top:29px}.meta-brand svg{width:32px;height:23px;stroke:#0866ff;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}.meta-brand span{font-size:22px;font-weight:500;letter-spacing:-1px}footer{border-top:1px solid #e4e6eb;max-width:1152px;margin:0 auto;padding:25px 24px 24px;color:#737373;font-size:11px;line-height:1.6}footer nav{display:flex;flex-wrap:wrap;gap:6px 17px}footer button{padding:0;border:0;background:transparent;font-size:inherit;line-height:inherit;color:inherit}footer button:hover{text-decoration:underline;color:#4a4f56}.footer-rule{height:1px;background:#e5e7eb;margin:12px 0}.footer-bottom{display:flex;justify-content:space-between;margin-top:20px;color:#8b9097}.signup-view{max-width:484px;margin:0 auto;padding:27px 0 47px;position:relative}.back-button{background:transparent;border:0;padding:8px;display:flex;margin-left:-8px;border-radius:50%}.back-button:hover{background:#f0f2f5}.back-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.signup-header .meta-brand{justify-content:flex-start;margin:18px 0 14px}.signup-header .meta-brand svg{width:36px}.signup-header h1{font-size:27px;line-height:1.2;letter-spacing:-.7px;margin:0 0 12px;font-weight:700;outline:none}.signup-header>p{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 27px}.signup-view input,.signup-view select{height:52px;font-size:14px}.signup-view .show-password{top:9px}.signup-view .field{margin-bottom:18px}fieldset{padding:0;margin:0 0 18px;border:0;min-width:0}fieldset .field{margin-bottom:0!important}legend{padding:0;margin-bottom:9px}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.birthday-row{grid-template-columns:1fr 1.2fr 1.1fr}.info-button{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border:0;border-radius:50%;width:14px;height:14px;font-size:10px;background:#8a9098;color:white;padding:0;margin-left:4px}.small-copy,.terms{font-size:11px;color:#65676b;line-height:1.55}.small-copy{margin:8px 0 0}.inline-link{color:#0064e0;border:0;padding:0;background:none;font:inherit;text-align:left;display:inline}.inline-link:hover{text-decoration:underline}.terms{margin:23px 0 22px}.terms p{margin:0 0 13px}.field-error{color:#c03030;font-size:12px;line-height:1.4;margin:6px 0 0}.field-error:empty{display:none}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}dialog{padding:32px;border:1px solid #e2e7ee;border-radius:22px;width:calc(100% - 36px);max-width:440px;color:#1c1e21;box-shadow:0 24px 80px #17294d26}dialog::backdrop{background:#18273d55;backdrop-filter:blur(3px)}dialog h2{font-size:23px;letter-spacing:-.5px;margin:18px 0 10px}dialog>p{font-size:14px;line-height:1.6;color:#65676b;margin:0 0 24px}.dialog-close{position:absolute;right:15px;top:12px;width:32px;height:32px;border:0;border-radius:50%;background:#f0f2f5;font-size:24px;line-height:1}.dialog-symbol{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#edf4ff;color:#0866ff;font-size:25px;font-weight:600}section:not([hidden]){animation:enter .25s ease-out}@keyframes enter{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1400px){.login-layout{min-height:760px}.brand-panel{padding-top:70px}.login-panel{margin:60px 0}}@media(max-width:1000px){.login-layout{padding:0 30px;grid-template-columns:1.1fr 1fr;min-height:650px}.brand-panel{padding-left:0;padding-right:24px}.brand-panel h1{font-size:42px}.login-panel{padding-left:35px}.login-card h2{font-size:20px}}@media(max-width:720px){.demo-label{font-size:10px;padding:9px 12px}.demo-label span{display:none}.login-layout{display:block;max-width:460px;padding:0 24px;min-height:0}.brand-panel{padding:30px 0 0;text-align:center}.facebook-mark{margin:0 auto;width:41px;height:41px;font-size:46px}.brand-panel h1{font-size:36px;letter-spacing:-1.2px;line-height:1.1;margin:23px 0 0}.collage{max-width:330px;margin:12px auto 0}.login-panel{border-left:0;margin:0;padding:17px 0 40px}.login-card{max-width:100%;padding:0}.login-card h2{text-align:center;font-size:19px;margin-bottom:20px}.login-card .field{margin-bottom:12px}input{height:54px}.show-password{top:10px}.login-card .primary{margin-top:18px}.forgot{margin:15px auto 22px}.meta-brand{margin-top:23px}footer{padding:22px 24px}.footer-bottom{display:block}.footer-bottom>span{display:block;margin-top:5px}.signup-view{padding:20px 24px 35px;max-width:532px}.signup-header h1{font-size:25px}.signup-header>p{margin-bottom:23px}}@media(max-width:360px){.brand-panel h1{font-size:32px}.signup-header h1{font-size:23px}.row{gap:8px}.birthday-row select{padding-left:12px;padding-right:28px;background-position:right 6px center}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Proportional desktop layout based on the supplied screenshot. */
.reference-art{display:block;width:100%;height:auto}.collage .fallback-art{display:none}
 .facebook-mark{background:transparent;align-items:center;padding:0}.facebook-mark img{width:100%;height:100%;display:block}
@media(min-width:1001px){
:root{--reference-unit:calc(100vw / 1271)}
.login-layout{max-width:none;padding:0;grid-template-columns:52.32% 47.68%;min-height:calc(642 * var(--reference-unit));height:calc(642 * var(--reference-unit))}
.brand-panel{padding:calc(42 * var(--reference-unit));overflow:hidden}.facebook-mark{width:calc(58 * var(--reference-unit));height:calc(58 * var(--reference-unit))}
.brand-panel h1{position:absolute;left:calc(37 * var(--reference-unit));top:calc(322 * var(--reference-unit));margin:0;font-size:calc(54 * var(--reference-unit));line-height:1.13;letter-spacing:calc(-1.6 * var(--reference-unit));z-index:1}
.collage{position:absolute;left:32.33%;top:calc(50 * var(--reference-unit));width:62.41%;max-width:none;margin:0}
.login-panel{margin:0;border-left:1px solid #d9dce0;padding:0 calc(48 * var(--reference-unit));align-items:flex-start}
.login-card{max-width:none;width:100%;margin-top:calc(123 * var(--reference-unit));padding:0}
.login-card h2{font-size:calc(17 * var(--reference-unit));letter-spacing:0;margin:0 0 calc(23 * var(--reference-unit));font-weight:600}
.login-card input{height:calc(56 * var(--reference-unit));font-size:calc(14 * var(--reference-unit));border-radius:calc(16 * var(--reference-unit));padding-left:calc(16 * var(--reference-unit))}
.login-card .field{margin-bottom:calc(11 * var(--reference-unit))}.login-card .show-password{display:none}.login-card .input-with-action input{padding-right:17px}
.login-card .button{height:calc(41 * var(--reference-unit));font-size:calc(14 * var(--reference-unit));font-weight:500}
.login-card .primary{margin-top:calc(23 * var(--reference-unit));background:#0064e0}.login-card .primary:hover{background:#0059cc}
.login-card .forgot{margin:calc(18 * var(--reference-unit)) auto calc(55 * var(--reference-unit));font-size:calc(14 * var(--reference-unit));padding:calc(5 * var(--reference-unit)) calc(12 * var(--reference-unit))}
.login-card .meta-brand{margin-top:calc(22 * var(--reference-unit));gap:2px}.login-card .meta-brand svg{width:calc(18 * var(--reference-unit));height:calc(16 * var(--reference-unit))}.login-card .meta-brand span{font-size:calc(16 * var(--reference-unit));letter-spacing:-.5px}
footer{max-width:none;padding:calc(29 * var(--reference-unit)) calc(137 * var(--reference-unit)) 15px;font-size:calc(13 * var(--reference-unit));border-top:1px solid #d9dce0}
footer nav{gap:6px calc(25 * var(--reference-unit))}footer #footer-links{gap:6px calc(11 * var(--reference-unit));margin-top:calc(10 * var(--reference-unit))}.footer-rule{display:none}.footer-bottom{font-size:10px;margin-top:17px}
}
@media(min-width:721px) and (max-width:1000px){.brand-panel{min-height:620px}.brand-panel h1{font-size:40px;margin-top:37px}.collage{margin:15px 0 0;max-width:345px}}
@media(max-width:720px){.brand-panel h1{font-size:35px;line-height:1.12}.brand-panel h1 br:first-child{display:none}.brand-panel h1 br:first-child::after{content:' '}.collage{max-width:285px;margin:16px auto 0}.login-panel{padding-top:20px}}

/* Account screens from the supplied recovery, registration and authentication references. */
.account-view{width:600px;max-width:calc(100% - 48px);margin:0 auto}
.account-view h1{font-size:25px;line-height:1.25;letter-spacing:-.3px;font-weight:600;margin:0 0 4px;outline:none}
.account-intro{font-size:15px;line-height:1.35;margin:0 0 12px}
.account-view input:not([type=checkbox]){height:60px;border-radius:17px;font-size:15px;padding:0 16px}
.account-view .button{height:44px;font-size:15px;background:#0064e0}
.account-view .secondary{background:#f1f2f4;color:#323539}
.recovery-view{padding-top:16px;padding-bottom:0}
.recovery-view .back-button{margin:0 0 30px -9px;color:#65676b}
.recovery-view .field{margin-bottom:28px}
.auth-view{padding-top:54px;padding-bottom:25px}
.account-identity{font-size:14px;margin:0 0 4px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.local-demo{font-size:10px;color:#69717c;background:#f2f5fa;padding:3px 7px;border-radius:4px}
.auth-view .account-intro{margin:8px 0 15px}
.auth-art{display:block;width:100%;height:auto;margin:0 0 20px}
.auth-view .field{margin:0 0 40px}
.trust-device{display:flex;align-items:center;gap:10px;font-size:15px;margin-bottom:44px;cursor:pointer}
.trust-device input{width:22px;height:22px;margin:0;accent-color:#0064e0;box-shadow:none;flex-shrink:0}
.auth-view .button:disabled{background:#9cc2f5;cursor:default;transform:none}
.auth-demo-note{color:#777e88;text-align:center;font-size:11px;margin:11px 0 0}
body[data-view=auth]>footer{display:none}
body[data-view=recovery]>footer{border-top:0;max-width:1030px;padding:0;margin:76px auto 40px;font-size:15px;line-height:1.7}
body[data-view=recovery] footer nav{gap:12px 32px}
body[data-view=recovery] footer button{font-weight:600}
body[data-view=recovery] #languages button:first-child{font-weight:400}
body[data-view=recovery] .footer-rule{display:block;margin:25px 0}
body[data-view=recovery] #footer-links{gap:6px 12px;margin-top:0}
body[data-view=recovery] .footer-bottom{display:none}
.signup-view{max-width:560px;padding:38px 0 50px}
.signup-view .back-button{padding:0;width:22px;height:22px;margin:0 0 14px;color:#65676b}
.signup-header .meta-brand{margin:0 0 13px;gap:2px}
.signup-header .meta-brand svg{width:19px;height:14px}
.signup-header .meta-brand span{font-size:16px;letter-spacing:-.3px}
.signup-header h1{font-size:24px;line-height:1.2;letter-spacing:0;font-weight:600;margin:0 0 6px}
.signup-header>p{font-size:15px;line-height:1.2;margin:0 0 17px}
.signup-view label,.signup-view legend{font-size:16px;font-weight:500;margin-bottom:9px}
.signup-view input,.signup-view select{height:60px;border-radius:16px;font-size:14px}
.signup-view .row{gap:12px}.signup-view .birthday-row{grid-template-columns:repeat(3,1fr);gap:16px}
.signup-view fieldset{margin-bottom:24px}.signup-view .field{margin-bottom:20px}
.signup-view .info-button{border:1.5px solid #4d5054;background:white;color:#4d5054;width:17px;height:17px;font-size:12px}
.signup-view .show-password{display:none}.signup-view .input-with-action input{padding-right:17px}
.signup-view .small-copy,.signup-view .terms{font-size:14px;line-height:1.25}
.signup-view .small-copy{margin-top:11px}.signup-view .inline-link{font-weight:600}
.signup-view .terms{margin:28px 0 20px}.signup-view .terms p{margin-bottom:11px}
.signup-view .button{height:43px;font-size:14px;font-weight:500}.signup-view .primary{background:#0064e0}
.signup-view .secondary{background:#f3f4f5}
body[data-view=signup]>footer{border-top:0;max-width:1070px;padding:0 0 25px;font-size:14px}
body[data-view=signup] footer nav{gap:9px 28px}
body[data-view=signup] #footer-links{gap:9px 12px;margin-top:15px}
body[data-view=signup] .footer-bottom,body[data-view=signup] .footer-rule{display:none}
@media(max-width:720px){
.signup-view{max-width:560px;padding:25px 24px 35px}.signup-header h1{font-size:23px}.signup-header>p{font-size:14px}
.signup-view label,.signup-view legend{font-size:14px}.signup-view input,.signup-view select{height:52px}
.signup-view .small-copy,.signup-view .terms{font-size:12px}.signup-view .birthday-row{gap:10px}
body[data-view=signup]>footer,body[data-view=recovery]>footer{padding:0 24px 25px;font-size:11px;max-width:560px}
body[data-view=recovery]>footer{margin-top:65px}
body[data-view=recovery] footer nav{gap:8px 17px}
.account-view h1{font-size:23px}.account-intro{font-size:14px}.auth-view{padding-top:28px}
.account-identity{font-size:12px}.local-demo{font-size:9px}.trust-device{font-size:13px;margin-bottom:32px}.auth-view .field{margin-bottom:30px}
}

@media(min-width:721px){.recovery-view .back-button{margin-bottom:18px}.signup-view .small-copy,.signup-view .terms{font-size:15px;line-height:1.25}.signup-header>p{max-width:510px}}
.auth-view{padding-bottom:12px}.auth-demo-note{margin-bottom:0}

.demo-banner{padding:8px 16px;background:#edf4ff;border-bottom:1px solid #dce9ff;text-align:center;font-size:11px;color:#35547d}
.demo-controls{position:fixed;right:14px;bottom:14px;z-index:10;width:260px;border:1px solid #d9e1ee;border-radius:12px;box-shadow:0 8px 28px #1c355518;background:white;padding:12px;font-size:12px}
.demo-controls summary{font-weight:600;cursor:pointer;color:#35547d}.demo-controls label{display:block;margin:12px 0 5px}.demo-controls select{height:39px;font-size:12px;padding-left:10px;border-radius:8px}.demo-controls p{font-size:11px;line-height:1.5;color:#65676b;margin:10px 0 0}
.flow-view{padding:35px 0 65px;min-height:450px}.flow-view .back-button{font-size:30px;line-height:1;margin-bottom:20px;color:#65676b}.flow-view h1{margin-bottom:12px}.flow-view .account-intro{margin-bottom:25px;color:#545c66}.flow-view .field label{font-size:14px}.flow-view .text-button{display:block;color:#0064e0;margin:20px auto;padding:7px}
.flow-view .button{margin-top:14px}.flow-view .button:disabled{opacity:.6;cursor:wait}.flow-note{font-size:12px;line-height:1.5;color:#6c7785;margin:23px 0 0}.flow-status{font-size:13px;line-height:1.5;color:#35547d;margin:16px 0}.flow-status:empty{display:none}
.method-list{display:grid;gap:12px;margin:24px 0}.method-list button{display:block;width:100%;text-align:left;border:1px solid #dce0e5;background:white;border-radius:13px;padding:17px 18px;font-size:15px;font-weight:600}.method-list button span{display:block;color:#6a727e;font-size:12px;font-weight:400;margin-top:5px}.method-list button:hover{background:#f3f7ff;border-color:#83b1f7}
.completion-mark{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:#e6f6ed;color:#22804d;font-size:30px;margin:20px 0 25px}
body[data-view]:not([data-view=login]):not([data-view=signup]):not([data-view=recovery])>footer{border-top:1px solid #e7ebf1;max-width:1030px;padding:25px 0;font-size:12px}body[data-view=auth]>footer{display:none}
.auth-view .auth-art[hidden]{display:none}.auth-view .button[aria-busy=true]{cursor:wait}
@media(max-width:720px){.flow-view{padding-top:25px;min-height:400px}.demo-controls{width:220px;right:10px;bottom:10px}.demo-banner{font-size:10px}body[data-view]:not([data-view=login]):not([data-view=signup]):not([data-view=recovery])>footer{padding:25px 24px 65px}.account-identity{flex-wrap:wrap}}

@media(max-width:720px){.demo-controls{position:static;width:calc(100% - 48px);margin:14px auto 0;box-shadow:none;max-width:560px}.flow-view{padding-top:22px}}