:root{--ink:#1c1c1e;--slate:#4a4543;--terracotta:#c0735a;--ivory:#f5f0e8;--completed:#b0a99e;--font-serif:"Instrument Serif", serif;--font-mono:"DM Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--ivory);color:var(--ink);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;min-height:100vh}.app{max-width:520px;min-height:100vh;margin:0 auto;padding:2rem 1.5rem}header{justify-content:space-between;align-items:center;margin-bottom:3rem;display:flex}.header-left{align-items:center;gap:.75rem;display:flex}.logo{object-fit:contain;width:32px;height:32px}.app-name{font-family:var(--font-serif);letter-spacing:-.02em;font-size:1.25rem}.counter{color:var(--slate);font-size:.75rem}.title-section{margin-bottom:2rem}h1{font-family:var(--font-serif);letter-spacing:-.02em;margin-bottom:.25rem;font-size:1.75rem;font-weight:400}.date{color:var(--slate);font-size:.8125rem}.add-form{border-bottom:1px solid #4a454326;gap:1rem;margin-bottom:2rem;padding-bottom:2rem;display:flex}.add-input{font-family:var(--font-mono);color:var(--ink);background:0 0;border:none;outline:none;flex:1;padding:.5rem 0;font-size:.9375rem}.add-input::placeholder{color:var(--slate);opacity:.7;font-style:italic}.add-button{font-family:var(--font-mono);color:var(--terracotta);cursor:pointer;background:0 0;border:none;padding:.5rem 0;font-size:.875rem;transition:opacity .2s}.add-button:hover{opacity:.8}.filters{align-items:center;gap:.75rem;margin-bottom:2rem;display:flex}.filters button{font-family:var(--font-mono);color:var(--slate);cursor:pointer;background:0 0;border:none;padding:.25rem 0;font-size:.8125rem;transition:color .2s;position:relative}.filters button:after{content:"";background:var(--ink);width:100%;height:1px;transition:transform .2s;position:absolute;bottom:0;left:0;transform:scaleX(0)}.filters button.active{color:var(--ink)}.filters button.active:after{transform:scaleX(1)}.filters button:hover{color:var(--ink)}.separator{color:var(--completed)}.empty-state{text-align:center;color:var(--slate);padding:4rem 0;font-style:italic}.empty-state .subtle{opacity:.7;margin-top:.5rem;font-size:.875rem}.todo-list{list-style:none}.todo-item{border-bottom:1px solid #4a454314;align-items:center;gap:1rem;padding:.875rem 0;transition:opacity .2s;display:flex}.todo-item:last-child{border-bottom:none}.checkbox{border:1.5px solid var(--slate);cursor:pointer;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;transition:all .2s;display:flex}.checkbox:hover{border-color:var(--terracotta)}.checkbox.checked{background:var(--terracotta);border-color:var(--terracotta)}.check-icon{width:14px;height:14px;color:var(--ivory)}.todo-text{flex:1;font-size:.9375rem;line-height:1.4;position:relative}.completed .todo-text{color:var(--completed)}.strikethrough{background:var(--completed);transform-origin:0;width:100%;height:1.5px;animation:.3s forwards strike;position:absolute;top:50%;left:0}@keyframes strike{0%{transform:scaleX(0)translateY(-50%)}to{transform:scaleX(1)translateY(-50%)}}.delete-button{opacity:0;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:.25rem;transition:opacity .2s;display:flex}.todo-item:hover .delete-button{opacity:1}.delete-icon{width:18px;height:18px;color:var(--slate);transition:color .2s}.delete-button:hover .delete-icon{color:var(--terracotta)}@media (hover:none){.delete-button{opacity:1}}@media (width<=600px){.app{padding:1.5rem 1rem}h1{font-size:1.5rem}}