:root{--ground:#e4e9ef;--page:#f6f8fb;--ink:#13233d;--muted:#55657a;--quiet:#c9d2dd;--accent:#e9a93b;--accentHover:#f0bd62;--onAccent:#13233d;--link:#2f5d98;--tint:#e4e9ef;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--ground:#0b1c33;--page:#0f2747;--ink:#eaf1fa;--muted:#8fb0da;--quiet:#2f5d98;--accent:#e9a93b;--accentHover:#f0bd62;--onAccent:#13233d;--link:#8fb0da;--tint:#163256}}
*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:16px;color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--ground)}
@media (prefers-color-scheme:dark){body{}}
main{width:100%;max-width:380px;background:var(--page);border:1px solid var(--quiet);border-radius:10px;padding:32px 28px 28px}
.logo{display:block;margin:0 auto 24px;height:44px;max-width:100%}
.logo.dark{display:none}
@media (prefers-color-scheme:dark){.logo.light{display:none}.logo.dark{display:block}}
h1{margin:0 0 6px;font-size:21px;font-weight:600;line-height:1.3;text-align:center}
.lede{margin:0 0 22px;color:var(--muted);font-size:15px;text-align:center;overflow-wrap:anywhere}
.notice{margin:0 0 18px;padding:10px 12px;border-radius:6px;background:var(--tint);font-size:15px}
label.field{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
input.text{display:block;width:100%;padding:10px 12px;border:1px solid var(--quiet);border-radius:6px;background:var(--page);color:var(--ink);font:inherit;font-size:17px}
input.text:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
input.code{letter-spacing:.25em;text-align:center;font-variant-numeric:tabular-nums}
label.trust{display:flex;gap:10px;align-items:flex-start;margin:16px 0 2px;cursor:pointer;font-size:15px}
label.trust input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.hint{margin:0 0 22px 28px;color:var(--muted);font-size:13px;line-height:1.4}
button{display:block;width:100%;padding:11px;border:0;border-radius:6px;background:var(--accent);color:var(--onAccent);font:inherit;font-weight:600;cursor:pointer}
button:hover{background:var(--accentHover)}
button.code{margin-top:20px}
.or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--quiet)}
button.google{background:var(--page);color:var(--ink);border:1px solid var(--quiet)}
button.google:hover{background:var(--tint)}
.foot{margin:20px 0 0;text-align:center;font-size:14px}
a{color:var(--link)}