:root{font-family:system-ui,sans-serif;line-height:1.6;color:#292820;background:#f6f1e7}body{margin:0;padding:24px}main{max-width:480px;margin:32px auto}label{display:block;margin:18px 0}input,button{box-sizing:border-box;width:100%;font:inherit;padding:12px;border:1px solid #b9b2a5;border-radius:8px}input{display:block;background:white;color:#202020}button{background:#7a3d2b;color:white;cursor:pointer}button:disabled{opacity:.6}summary{cursor:pointer}input:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #3b70ba;outline-offset:3px}#status{min-height:2em}h1{font-size:1.7rem}

body{background:#f4f6f9;color:#18283b;padding:20px}main{background:#fff;border:1px solid #e1e5ec;border-radius:20px;padding:32px;margin:20px auto;box-sizing:border-box}.brand{font-size:12px;font-weight:700;letter-spacing:.08em;color:#7a3d2b}h1{line-height:1.25}.connection{padding:16px;border-radius:12px;background:#f0f4f8;margin:24px 0}.connection p{margin:8px 0;font-size:14px}.secondary{background:white;color:#244461;border:1px solid #bccbda;padding:8px;font-size:14px}nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}a{color:#31577a}.note{font-size:13px;color:#596779;margin-top:24px}#status{color:#813a2a}#time{font-weight:650}button:disabled{cursor:not-allowed}@media(max-width:480px){body{padding:12px}main{padding:22px;margin:8px auto}h1{font-size:1.5rem}}