*{box-sizing:border-box} :root{--paper:#f5f2eb;--ink:#302e29;--muted:#746f65;--line:#ddd8ce;--green:#375b47;--field:#ece8df} body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}main{max-width:760px;margin:72px auto;padding:0 32px}.eyebrow{font:11px/1.5 monospace;letter-spacing:.12em;color:var(--green)}h1{font:normal 56px/1.1 Georgia,serif;letter-spacing:-.04em;margin:16px 0}header p{color:var(--muted);margin:0}header{margin-bottom:48px}.composer label{display:block;font-size:14px;font-weight:600;margin-bottom:12px}.input-row{display:flex;gap:12px}input{min-width:0;flex:1;border:1px solid var(--line);border-radius:6px;background:var(--field);padding:14px 16px;font:inherit;color:var(--ink)}button{font:inherit;cursor:pointer;min-height:44px;border:0;border-radius:6px}button:focus-visible,input:focus-visible{outline:3px solid var(--green);outline-offset:3px}.add{background:var(--green);color:white;padding:12px 20px;white-space:nowrap}.add:hover{background:#294535}.add span{margin-left:12px}button:active{transform:translateY(1px)}section{margin-top:40px}.list-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px}h2{font-size:16px;margin:0}.list-heading span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}ul{padding:0;margin:0;list-style:none}li{display:flex;align-items:center;gap:12px;min-height:72px;border-bottom:1px solid var(--line);padding:12px 0}.check{width:44px;font-size:24px;background:none;color:var(--green)}.check:hover{background:var(--field)}.task-title{flex:1;overflow-wrap:anywhere}.delete{font-size:12px;padding:8px;color:var(--muted);background:none}.delete:hover{color:#943d32;background:var(--field)}.done .task-title{text-decoration:line-through;color:var(--muted)}.empty{text-align:center;padding:48px 16px;color:var(--muted)}.empty>span{font:40px Georgia,serif;color:var(--green)}h3{font:24px Georgia,serif;color:var(--ink);margin:12px 0}.empty p{font-size:14px}footer{color:var(--muted);font-size:12px;margin:32px 0 48px}@media(max-width:500px){main{margin:40px auto;padding:0 20px}h1{font-size:44px}.input-row{flex-direction:column}.add{align-self:flex-end}.list-heading{gap:12px}}