*{box-sizing:border-box}body{margin:0;background:#edf2e9;color:#263e34;font:16px/1.55 system-ui,-apple-system,sans-serif}main{width:min(100% - 40px,460px);margin:clamp(28px,7vh,76px) auto;padding-bottom:32px}.brand{display:block;text-decoration:none;color:#284a3b;font:600 30px/1.2 Georgia,serif;margin-bottom:28px}.brand span{display:block;font:500 12px/1.5 system-ui,sans-serif;letter-spacing:.17em;margin-top:8px}.login-card{padding:32px;background:#fffef9;border:1px solid #d4dfce;border-radius:24px;box-shadow:0 12px 40px #233c2808}.eyebrow{font-size:12px;letter-spacing:.12em;color:#637461;margin:0}h1{font:500 32px/1.2 Georgia,serif;margin:12px 0}#intro{color:#626e64;margin:0 0 24px}form{display:grid;gap:10px}label{font-size:14px;font-weight:650;margin-top:5px}input,select{width:100%;min-width:0;padding:13px 14px;font:inherit;background:white;color:#263e34;border:1px solid #c9d4c3;border-radius:12px;min-height:48px}button,.button{display:block;width:100%;border:1px solid #345b46;border-radius:12px;padding:13px 16px;background:#345b46;color:white;font:600 16px/1.5 system-ui,sans-serif;text-align:center;text-decoration:none;cursor:pointer;margin-top:8px;min-height:48px}.text-button{color:#375b47;background:transparent;border-color:transparent;margin-top:0}button:disabled{opacity:.5;cursor:default}input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #9aaf83;outline-offset:3px}.hint,.footnote,#message,.notice{font-size:14px;line-height:1.55}.hint{margin:0 0 8px;color:#626e64}.footnote{text-align:center;color:#657562;margin:20px 0}.notice{padding:14px;border-radius:12px;background:#f5eddc;color:#67512b}.error{color:#963f32}#message:empty{display:none}#qr{display:block;margin:18px auto;background:white;max-width:100%;height:auto}code{display:block;overflow-wrap:anywhere;user-select:all;font-size:14px;margin-top:8px}summary{cursor:pointer;font-size:14px}[hidden]{display:none!important}@media(max-width:480px){.login-card{padding:24px}h1{font-size:29px}main{width:calc(100% - 32px)}}

/* Keep every authentication state inside narrow and enlarged viewports. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
body.login-page{min-width:0;width:100%;margin:0}
.login-page>main{width:100%;max-width:492px;min-width:0;margin:28px auto;padding:0 16px calc(32px + env(safe-area-inset-bottom,0px))}
.login-page .login-card{width:100%;min-width:0;padding:28px;overflow-wrap:anywhere}
.login-page form{grid-template-columns:minmax(0,1fr);min-width:0}
.login-page :is(input,select,button,.button){min-width:0;min-inline-size:0;max-width:100%;width:100%;font-size:16px}
.login-page :is(button,.button){white-space:normal;overflow-wrap:anywhere}
.login-page :is(#intro,.hint,.footnote,#message,.notice){overflow-wrap:anywhere}
@media(max-width:650px){
 .login-page>main{margin:20px auto;padding-inline:16px}
 .login-page .brand{margin:0 4px 20px;font-size:28px}
 .login-page .login-card{padding:22px 20px;border-radius:20px}
 .login-page h1{font-size:clamp(25px,7vw,29px);line-height:1.2}
 .login-page #intro{font-size:16px;margin-bottom:20px}
 .login-page .hint{font-size:14px;line-height:1.55;margin-bottom:4px}
 .login-page .footnote{font-size:14px;margin:18px 4px 0}
}
@media(max-width:360px){.login-page>main{padding-inline:12px}.login-page .login-card{padding:20px 16px}}

#recover-confirmation{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:28px;border:1px solid #d4dfce;border-radius:24px;background:#fffef9;color:#263e34;box-shadow:0 20px 70px #172d3033}#recover-confirmation::backdrop{background:#18312399}#recover-confirmation h2{font:500 28px/1.2 Georgia,serif;margin:0 0 18px}#recover-confirmation p{font-size:16px;line-height:1.55;overflow-wrap:anywhere}#recover-confirmation form{margin-top:20px}@media(max-width:480px){#recover-confirmation{padding:24px 20px;border-radius:20px}}