:root{--ink:#16131a;--mute:#5c564f;--paper:#fff9f1;--cobalt:#1d4ed8;--line:#e8dcce}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--paper);color:var(--ink)}
.banner{margin:0;padding:.55rem 1rem;text-align:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:#f5efe6}
main{max-width:560px;margin:0 auto;padding:2rem 1.25rem 3rem}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);margin:0 0 .5rem}
h1{font-family:Georgia,serif;margin:0 0 .6rem;font-size:2.1rem}
.lede{color:var(--mute);line-height:1.6;margin:0 0 1.25rem}
.row{display:flex;gap:.5rem}
input{flex:1;border:1px solid var(--line);border-radius:.75rem;padding:.7rem .85rem;font:inherit}
button{border:0;background:var(--cobalt);color:#fff;font:inherit;font-weight:700;padding:.7rem 1rem;border-radius:.75rem;cursor:pointer}
ul{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.6rem}
li{display:flex;align-items:center;gap:.75rem;background:#fff;border:1px solid var(--line);border-radius:1rem;padding:.85rem 1rem}
li.done span{text-decoration:line-through;color:var(--mute)}
li button.x{margin-left:auto;background:#f3f4f6;color:var(--ink)}
footer{text-align:center;padding:0 1rem 2rem;font-size:.8rem;color:var(--mute)}footer a{color:var(--cobalt)}