:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.6;font-weight:400;color-scheme:light dark;color:#ffffffde;background:linear-gradient(135deg,#667eea,#764ba2);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;padding:1rem}h1{font-size:2.5em;line-height:1.1;margin-bottom:2rem;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);font-weight:700}#app{max-width:600px;width:100%;margin:0 auto;padding:2rem;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 20px 40px #0000001a;color:#333}.add-todo{display:flex;gap:12px;margin-bottom:2rem;align-items:center}.add-todo input{flex:1;padding:16px 20px;border:2px solid #e1e5e9;border-radius:12px;font-size:16px;font-family:inherit;background:#fff;transition:all .3s ease;outline:none}.add-todo input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;transform:translateY(-1px)}.add-todo input::placeholder{color:#9ca3af}.add-todo button{padding:16px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.add-todo button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea4d}.add-todo button:active{transform:translateY(0)}.todo-list{margin-bottom:2rem}.todo-list ul{list-style:none;padding:0;margin:0}.todo-list li{display:flex;align-items:center;gap:12px;padding:16px 20px;margin-bottom:12px;background:#fff;border:2px solid #f1f3f4;border-radius:12px;transition:all .3s ease;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.todo-list li:hover{border-color:#e1e5e9;box-shadow:0 4px 12px #0000000d;transform:translateY(-1px)}.todo-list li.true{opacity:.7;background:#f8f9fa}.todo-list li.true .todo-text{text-decoration:line-through;color:#6b7280}.todo-list input[type=checkbox]{width:20px;height:20px;accent-color:#667eea;cursor:pointer}.todo-text{flex:1;font-size:16px;color:#374151;font-weight:500}.delete-btn{padding:8px 16px;background:#ef4444;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.delete-btn:hover{background:#dc2626;transform:scale(1.05)}.delete-btn:active{transform:scale(.95)}.todo-stats{display:flex;justify-content:space-between;gap:1rem;padding:20px;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-radius:12px;border:2px solid #e1e5e9}.todo-stats p{margin:0;font-size:16px;font-weight:600;color:#475569}@media (max-width: 640px){#app{padding:1.5rem;margin:1rem}.add-todo{flex-direction:column;gap:12px}.add-todo input,.add-todo button{width:100%}.todo-stats{flex-direction:column;gap:8px;text-align:center}h1{font-size:2em}}@media (prefers-color-scheme: light){:root{background:linear-gradient(135deg,#667eea,#764ba2)}}@media (prefers-color-scheme: dark){:root{background:linear-gradient(135deg,#2d3748,#4a5568)}#app{background:#1a202cf2;color:#e2e8f0}.add-todo input{background:#2d3748;border-color:#4a5568;color:#e2e8f0}.add-todo input::placeholder{color:#a0aec0}.todo-list li{background:#2d3748;border-color:#4a5568}.todo-list li.true{background:#1a202c}.todo-text{color:#e2e8f0}.todo-stats{background:linear-gradient(135deg,#2d3748,#4a5568);border-color:#4a5568}.todo-stats p{color:#cbd5e0}}