:root {color-scheme:light;font-family:system-ui, sans-serif;font-size:16px;background:#f4f5f7;color:#17212e}
* {box-sizing:border-box}body{margin:0}main{max-width:780px;margin:2rem auto;padding:1rem}header,section{background:#fff;border:1px solid #dddfe5;border-radius:12px;padding:1.25rem;margin:0 0 1rem}h1{margin:.45rem 0}h2{font-size:1.2rem}small,.note{color:#5d6574}label{display:block;font-weight:600;margin:.8rem 0}input{display:block;width:100%;padding:.75rem;border:1px solid #8994a5;border-radius:6px;margin:.25rem 0}button{border:0;border-radius:7px;background:#245ac0;color:white;padding:.75rem 1rem;font:inherit;cursor:pointer;margin:.3rem .4rem .3rem 0}button.secondary{background:#515b6b}button:disabled{opacity:.5;cursor:wait}.actions{display:flex;gap:.5rem;flex-wrap:wrap}#message{min-height:1.4rem;white-space:pre-wrap;color:#183d83}#qr{width:min(240px,100%);display:block;margin:1rem auto}#qr[hidden],section[hidden]{display:none}.item{border:1px solid #d9dde5;padding:1rem;margin:.75rem 0;border-radius:8px}.item pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f3f5f9;padding:.75rem;font-size:.86rem}.item strong{display:block}