*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:#f6f4f1;color:#1d1b22;font-family:system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif}
.box{width:min(420px,calc(100% - 32px));background:#fff;border:1px solid #e5e0da;border-radius:14px;padding:28px 24px}
.mark{width:40px;height:40px;border-radius:10px;background:linear-gradient(180deg,#c2185b 0 34%,#2a2530 34% 100%)}
h1{font-size:20px;margin:14px 0 6px}p{color:#6b6672;font-size:14px;margin:0 0 16px}
label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
input{width:100%;font:inherit;font-size:18px;letter-spacing:.08em;padding:12px 14px;border:1px solid #e5e0da;border-radius:10px;background:#f6f4f1}
button{margin-top:12px;width:100%;font:inherit;font-weight:700;padding:12px;border:0;border-radius:10px;background:#c2185b;color:#fff;cursor:pointer}
button:disabled{opacity:.5}#err{color:#b42318;margin:12px 0 0}#err:empty{display:none}
@media (prefers-color-scheme:dark){body{background:#141217;color:#efeaf2}.box{background:#1d1a21;border-color:#2f2a35}input{background:#141217;color:#efeaf2;border-color:#2f2a35}p{color:#a39dab}}