:root{--bg:#f2f2f7;--bg2:#fff;--label:#000;--l2:rgba(60,60,67,.64);--l3:rgba(60,60,67,.34);--sep:rgba(60,60,67,.16);--blue:#007aff;--red:#ff3b30;--red-t:rgba(255,59,48,.1);
--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;color-scheme:light}
html.dark{--bg:#000;--bg2:#1c1c1e;--label:#fff;--l2:rgba(235,235,245,.62);--l3:rgba(235,235,245,.32);--sep:rgba(84,84,88,.5);--blue:#0a84ff;--red:#ff453a;--red-t:rgba(255,69,58,.16);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--label);font-family:var(--font);-webkit-font-smoothing:antialiased}
.wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
.card{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:stretch}
.mark{width:52px;height:52px;border-radius:13px;background:var(--blue);display:flex;align-items:center;justify-content:center;align-self:center;margin-bottom:14px}
.mark span{width:20px;height:20px;border-radius:50%;background:#fff}
h1{margin:0;text-align:center;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-.01em}
.lead{margin:4px 0 22px;text-align:center;color:var(--l2);font-size:15px;line-height:20px}
.group{background:var(--bg2);border-radius:12px;overflow:hidden;box-shadow:0 0 0 .5px var(--sep)}
.group:focus-within{box-shadow:0 0 0 1.5px var(--blue)}
.row{display:flex;align-items:center;min-height:46px;padding:0 14px;gap:10px}
.row+.row{border-top:.5px solid var(--sep);margin-left:0}
.lbl{width:64px;flex:none;font-size:16px}
input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:16px;padding:12px 0}
input::placeholder{color:var(--l3)}
#code{letter-spacing:.12em;font-variant-numeric:tabular-nums}
#code::placeholder{letter-spacing:0}
.err{margin:12px 2px 0;padding:9px 12px;border-radius:10px;background:var(--red-t);color:var(--red);font-size:14px;line-height:19px}
.go{margin-top:16px;height:46px;border:0;border-radius:12px;background:var(--blue);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.go[disabled]{opacity:.5;cursor:default}
.go:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
input:focus,input:focus-visible{outline:0}
.foot{margin:12px 0 0;text-align:center;color:var(--l2);font-size:13px;line-height:18px}
@media (min-width:760px){.lbl{font-size:15px}input{font-size:15px}}