:root{font-family:system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;color:#25344a;background:#f4f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:24px}main{width:min(100%,440px);background:#fff;border:1px solid #e4e9f2;border-radius:24px;padding:36px;box-shadow:0 12px 40px #1e3c6210}.mark{width:48px;height:48px;display:grid;place-items:center;background:#edf3ff;color:#3676ec;border-radius:14px;font-weight:800}.eyebrow{font-size:12px;color:#75849b;margin-top:24px}h1{font-size:27px;letter-spacing:-.04em;margin:8px 0 16px}.intro,.note{font-size:14px;line-height:1.8;color:#66758c}.intro strong{color:#364760;font-weight:600}form{margin:28px 0 12px}label{display:block;font-size:13px;font-weight:600;margin-bottom:10px}input{display:block;width:100%;height:64px;text-align:center;font-size:30px;letter-spacing:.35em;padding-left:.35em;border:1px solid #cdd8ea;border-radius:12px;outline:none;background:#fcfdff;color:#233c62}input:focus{border-color:#3578ef;box-shadow:0 0 0 4px #3578ef14}button{margin-top:14px;width:100%;border:0;border-radius:12px;background:#3476ec;color:#fff;font:inherit;font-size:15px;font-weight:600;padding:16px;cursor:pointer}button:disabled{opacity:.6;cursor:wait}#pair-error{color:#ad3c45;font-size:13px;line-height:1.6;min-height:1.6em}.note{font-size:12px;margin-bottom:0}@media(max-width:420px){body{padding:16px}main{padding:28px 24px}}
:root { --office-blue: #2865d6; }
main { box-shadow: none; }
h1 { margin-top: 24px; letter-spacing: -.03em; }
.intro, .note { color: #52677e; font-size: 14px; }
button { background: var(--office-blue); }
input:focus { box-shadow: none; outline: 2px solid var(--office-blue); outline-offset: 3px; }
button:focus-visible { outline: 2px solid var(--office-blue); outline-offset: 3px; }