@import "https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;600&display=swap";:root{--bg:#f8f9f6;--surface:#edf0ed;--fg:#1a1d28;--muted:#6b738a;--accent:#d4e157;--border:#6b738a;--font-display:"DM Serif Display", Georgia, serif;--font-body:"DM Sans", system-ui, sans-serif;--col-width:500px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-body);color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.5}.app{justify-content:flex-start;min-height:100vh;padding:80px 10vw;display:flex}@media (width<=640px){.app{justify-content:center;padding:48px 24px}}.container{width:100%;max-width:var(--col-width)}.header{margin-bottom:64px}.title{font-family:var(--font-display);letter-spacing:-.02em;color:var(--fg);font-size:48px;font-weight:400;line-height:1.1}.date{color:var(--muted);letter-spacing:.02em;margin-top:8px;font-size:14px}.input-row{border-bottom:2px solid var(--fg);align-items:center;gap:12px;margin-bottom:48px;padding-bottom:12px;display:flex}.input-row input{font-family:var(--font-body);color:var(--fg);background:0 0;border:none;outline:none;flex:1;font-size:16px}.input-row input::placeholder{color:var(--muted)}.btn-add{font-family:var(--font-body);color:var(--muted);cursor:pointer;background:0 0;border:none;padding:4px 0;font-size:14px;font-weight:500;transition:color .15s}.btn-add:hover{color:var(--fg)}.task-list{list-style:none}.task-item{cursor:pointer;justify-content:space-between;align-items:center;padding:14px 0;transition:opacity .15s;display:flex}.task-text{color:var(--fg);-webkit-user-select:none;user-select:none;flex:1;font-size:16px;transition:color .2s}.task-item.done .task-text{text-decoration:line-through;-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent);color:var(--muted);text-decoration-thickness:2.5px}.btn-delete{color:var(--muted);cursor:pointer;opacity:0;background:0 0;border:none;padding:0 4px;font-size:18px;line-height:1;transition:opacity .15s,color .15s}.task-item:hover .btn-delete{opacity:1}.btn-delete:hover{color:var(--fg)}.empty{text-align:left;margin-top:80px}.empty-title{font-family:var(--font-display);color:var(--fg);margin-bottom:8px;font-size:24px;font-weight:400}.empty-sub{color:var(--muted);font-size:14px}.clear-row{margin-top:48px}.btn-clear{font-family:var(--font-body);color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0;font-size:13px;transition:color .15s}.btn-clear:hover{color:var(--fg)}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.task-item{animation:.25s ease-out both fadeIn}