:root{color-scheme:light dark;font-family:system-ui,sans-serif;color:#172136;background:#eef3fa}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:1.25rem}
main{width:min(100%,33rem);background:#fff;padding:clamp(1.2rem,5vw,2.25rem);border:1px solid #dce4f0;border-radius:1.25rem;box-shadow:0 1rem 3rem #1d315512}
h1{font-size:clamp(1.5rem,5vw,2.2rem);margin:.35rem 0 .7rem}
p{line-height:1.8;margin:.6rem 0}
.brand{font-weight:700;color:#194eaf}
form,#result{display:grid;gap:.65rem;margin-top:1.25rem}
label{font-weight:650}
input,button,.button{width:100%;font:inherit;border-radius:.65rem;padding:.8rem;min-width:0}
input{border:1px solid #a5b3c9}
button,.button{cursor:pointer;border:0;background:#194eaf;color:#fff;text-align:center;text-decoration:none;font-weight:650}
button:disabled{opacity:.5;cursor:default}
#cancel,#share{background:#465873}
progress{width:100%;accent-color:#194eaf}
.note{font-size:.9rem;color:#55647b}
[hidden]{display:none!important}
@media(prefers-color-scheme:dark){:root{color:#eaf0fb;background:#111827}main{background:#172236;border-color:#35455d}.brand{color:#90b5ff}.note{color:#b9c8dd}}