:root{--papel:#F6F8FA;--folha:#FFFFFF;--grade:#DDE4EB;--grafite:#262B33;--grafite-2:#5B6470;--tinta:#1F3FAE;--correcao:#C21F3A;
font-family:"Segoe UI",system-ui,sans-serif;color:var(--grafite)}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--papel)}
.folha{background:var(--folha);border:1px solid var(--grade);border-radius:4px;padding:1.5rem;width:min(22rem,92vw)}
h1{font-size:1.25rem;margin:0 0 .5rem}
.muted{color:var(--grafite-2);margin:0 0 1rem}
.aviso{color:var(--correcao);margin:0 0 1rem}
label{display:block;margin:0 0 .75rem;font-size:.9rem}
input{display:block;width:100%;margin-top:.25rem;padding:.5rem;font:inherit;border:1px solid var(--grade);border-radius:4px;box-sizing:border-box}
button{font:inherit;background:var(--tinta);color:#fff;border:none;border-radius:4px;padding:.55rem 1rem;cursor:pointer;width:100%;margin-top:.5rem}
button:focus-visible,input:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}