:root{color-scheme:light dark;--canvas: #F4F5F4;--card: #FFFFFF;--stroke: rgba(38, 40, 42, .24);--fg-1: #26282A;--fg-2: rgba(38, 40, 42, .62);--fg-3: rgba(38, 40, 42, .4);--fill-1: rgba(38, 40, 42, .05);--accent: #587A56;--danger: #C0392B;--btn-bg: #587A56;--btn-fg: #FFFFFF;--r-control: 10px;--r-card: 16px;--font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}@media(prefers-color-scheme:dark){:root{--canvas: #1D1E1D;--card: #262726;--stroke: rgba(242, 241, 239, .1);--fg-1: #F2F1EF;--fg-2: rgba(242, 241, 239, .64);--fg-3: rgba(242, 241, 239, .42);--fill-1: rgba(242, 241, 239, .06);--accent: #7FA477;--danger: #E27A6E;--btn-bg: #7FA477;--btn-fg: #1D1E1D}}*{box-sizing:border-box}body{margin:0;min-block-size:100dvh;display:grid;place-items:center;background:var(--canvas);color:var(--fg-1);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}.wrap{inline-size:100%;max-inline-size:380px;padding:24px 20px calc(24px + env(safe-area-inset-bottom))}.brand{display:flex;align-items:center;gap:12px;margin-block-end:28px}.logo{inline-size:36px;block-size:36px;color:var(--fg-1);flex:none}h1{margin:0;font-size:28px;font-weight:700;letter-spacing:-.022em}.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--r-card);padding:20px;display:flex;flex-direction:column;gap:16px}.field{display:flex;flex-direction:column;gap:6px}.label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}input{font:inherit;color:var(--fg-1);background:var(--fill-1);border:1px solid transparent;border-radius:var(--r-control);padding:0 12px;block-size:50px;inline-size:100%}input:focus-visible{outline:2px solid var(--fg-1);outline-offset:2px;border-color:transparent}.btn{font:inherit;font-weight:500;color:var(--btn-fg);background:var(--btn-bg);border:0;border-radius:var(--r-control);block-size:50px;cursor:pointer;transition:opacity .12s ease-out}.btn:active{opacity:.9}.btn[disabled]{opacity:.5;cursor:default}.btn:focus-visible{outline:2px solid var(--fg-1);outline-offset:2px}.error{margin:0;font-size:15px;color:var(--fg-1);border-inline-start:1px solid var(--danger);padding-inline-start:10px}.hint{margin:20px 0 0;font-size:15px;color:var(--fg-3);text-wrap:pretty}.escape{margin:8px 0 0;font-size:15px}.escape a{color:var(--accent);text-decoration:none}.escape a:hover,.escape a:focus-visible{text-decoration:underline}.passfield{display:flex;gap:8px;align-items:center}.passfield input{flex:1;min-width:0}.reveal{border:0;background:none;padding:8px;cursor:pointer;font:inherit;font-size:14px;color:inherit;opacity:.7}.reveal:hover{opacity:1}
