:root{--ground:#F3F6F2;--surface:#FFFFFF;--line:#D5DDD2;--ink:#17261F;--muted:#5A6B61;--olive:#4F7A28;--olive-ink:#FFFFFF;--bad:#B4432F;--good:#2E7D4F;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;--body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root{--ground:#0E1512;--surface:#151F1A;--line:#2A3A31;--ink:#E4ECE5;--muted:#9DB0A3;--olive:#9CC46A;--olive-ink:#0E1512;--bad:#E57B66;--good:#6BC08D}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.5 var(--body);display:grid;place-items:center;padding:0 16px}
main{width:100%;max-width:380px;display:flex;flex-direction:column;gap:22px}
h1{font:700 34px/1 var(--display);letter-spacing:-.02em;margin:0}
h1 b{color:var(--olive)}
p{margin:6px 0 0;color:var(--muted)}
form{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:14px}
label{font:500 12px var(--body);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);display:flex;flex-direction:column;gap:5px}
input{font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:10px 12px;text-transform:none;letter-spacing:0}
input:focus-visible,button:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
button{font:600 15px var(--body);background:var(--olive);color:var(--olive-ink);border:0;border-radius:8px;padding:11px;cursor:pointer}
.msg{font-size:14px;border-radius:8px;padding:9px 12px;border:1px solid currentColor}
.msg.bad{color:var(--bad)} .msg.good{color:var(--good)}
small{color:var(--muted);text-align:center}
a{color:var(--olive);font-weight:500}
.links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.hint{font-size:13px;color:var(--muted);margin:-6px 0 0}