@font-face{font-family:Plex;src:url('assets/IBMPlexSans-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:light;--mint:#8ac5b8;--ink:#252823}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:24px;background:#fff;color:var(--ink);font-family:Plex,Arial,sans-serif}
.login-circle{display:grid;place-items:center;width:min(400px,100%);aspect-ratio:1;border-radius:50%;background:var(--mint);padding:38px}
.login-form{width:100%;max-width:278px;position:relative}
.login-form label{display:block;margin:0 0 16px;text-align:center;font-size:15px;font-weight:400;line-height:1.4}
.password-entry{display:flex;align-items:center;gap:6px;min-height:48px;padding:4px 5px 4px 18px;border:1px solid transparent;border-radius:999px;background:#fff}
.password-entry:focus-within{outline:2px solid var(--ink);outline-offset:4px}
input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:400 16px/1.4 Plex,Arial,sans-serif}
input::placeholder{color:#686d69;opacity:1}
button{flex:0 0 38px;display:grid;place-items:center;width:38px;height:38px;padding:8px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
button:hover{background:#edf6f3}
button:focus-visible{outline:2px solid var(--ink);outline-offset:0}
button svg{display:block;width:22px;height:22px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.login-error{position:absolute;top:100%;left:0;width:100%;margin:14px 0 0;text-align:center;font-size:13px;line-height:1.4}
.login-error[hidden]{display:none}
@media(max-width:360px){body{padding:20px}.login-circle{padding:26px}.password-entry{padding-left:14px}}