:root{
  --paper:#faf8f5; --card:#fffefc;
  --ink:#33302c; --muted:#78706a; --line:#ebe5dd;
  --accent:#5b5bd6; --accent-soft:#eeeefc;
  --tip:#0d9488; --tip-soft:#e4f6f4;
  --warn:#c2620c; --warn-soft:#fdf0df;
  --radius:14px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  line-height:1.7;-webkit-text-size-adjust:100%}
a{color:var(--accent)}
.shell{max-width:440px;margin:0 auto;padding:7vh 22px 60px}
.brand{display:block;text-align:center;font-family:var(--serif);font-weight:650;
  font-size:1.05rem;text-decoration:none;color:var(--ink);margin-bottom:26px}
.brand span{color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px}
h1{font-family:var(--serif);font-size:1.5rem;margin:0 0 .2em}
p.lead{color:var(--muted);margin:0 0 1.4em;font-size:.95rem}
label{display:grid;gap:6px;margin-bottom:14px;font-size:.88rem;font-weight:600;color:var(--muted)}
input{font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--paper);color:var(--ink);width:100%}
input:focus{outline:2px solid var(--accent);outline-offset:-1px}
button{font:inherit;font-weight:650;width:100%;background:var(--accent);color:#fff;
  border:0;border-radius:9px;padding:12px 18px;cursor:pointer;margin-top:6px}
button:hover:not(:disabled){filter:brightness(1.08)}
button:disabled{opacity:.6;cursor:default}
.alt{margin-top:18px;text-align:center;font-size:.92rem;color:var(--muted)}
.note{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:.92rem;display:none}
.note.show{display:block}
.note.bad{background:var(--warn-soft);color:var(--warn)}
.note.good{background:var(--tip-soft);color:var(--tip)}
.hint{font-weight:400;font-size:.82rem;color:var(--muted)}