*,*:before,*:after{margin:0;box-sizing:border-box}html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,sans-serif;line-height:1.5}h1,h2,h3,h4,h5,h6{margin:0;font-weight:400}p{margin:0}ul,ol{margin:0;padding:0;list-style:none}a{text-decoration:none;color:inherit}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;background:none;border:none;outline:none}motif-header::part(motif-header){padding-left:0}motif-sidebar{position:fixed;height:100%;z-index:100}h1.motif-h1-regular,h2.motif-h5-bold,.buttons__wrapper,.cards__wrapper{margin:1rem 0}.item{height:100%;max-width:100%;border-radius:8px;margin:0;width:100%;object-fit:cover}.main__content{display:flex}.todo-app{max-width:1200px;margin:0 auto;padding:2rem}.todo-app .app-header{text-align:center;margin-bottom:2rem}.todo-app .app-header h1{font-size:2.5rem;font-weight:600;color:var(--motif-semantic-color-text-primary);margin:0 0 .5rem}.todo-app .app-header .subtitle{font-size:1rem;color:var(--motif-semantic-color-text-secondary);margin:0}.todo-app .app-content{display:grid;gap:2rem}.todo-app .todo-form-card .form-title{font-size:1.5rem;font-weight:500;color:var(--motif-semantic-color-text-primary);margin:0}.todo-app .todo-form-card .todo-form{display:flex;flex-direction:column;gap:1.5rem}.todo-app .todo-form-card .todo-form .form-field{display:flex;flex-direction:column}.todo-app .todo-form-card .todo-form .form-actions{display:flex;gap:1rem;justify-content:flex-start}.todo-app .todo-list{display:grid;gap:1rem}.todo-app .todo-item{transition:all .2s ease}.todo-app .todo-item:hover{box-shadow:0 4px 12px #0000001a}.todo-app .todo-item.completed{opacity:.7}.todo-app .todo-item .todo-content{display:flex;align-items:flex-start;gap:1rem}.todo-app .todo-item .todo-content .todo-checkbox{flex-shrink:0;padding-top:.25rem}.todo-app .todo-item .todo-content .todo-details{flex:1;min-width:0}.todo-app .todo-item .todo-content .todo-details .todo-title{font-size:1.125rem;font-weight:500;color:var(--motif-semantic-color-text-primary);margin:0 0 .5rem;word-wrap:break-word}.todo-app .todo-item .todo-content .todo-details .todo-title.completed-text{text-decoration:line-through}.todo-app .todo-item .todo-content .todo-details .todo-description{font-size:.875rem;color:var(--motif-semantic-color-text-secondary);margin:0 0 .5rem;word-wrap:break-word;white-space:pre-wrap}.todo-app .todo-item .todo-content .todo-details .todo-description.completed-text{text-decoration:line-through}.todo-app .todo-item .todo-content .todo-details .todo-date{font-size:.75rem;color:var(--motif-semantic-color-text-tertiary)}.todo-app .todo-item .todo-content .todo-actions{display:flex;gap:.5rem;flex-shrink:0}.todo-app .empty-state{text-align:center;padding:3rem 1rem;color:var(--motif-semantic-color-text-secondary)}.todo-app .empty-state p{font-size:1.125rem;margin:0}@media (max-width: 768px){.todo-app{padding:1rem}.todo-app .app-header h1{font-size:2rem}.todo-app .app-header .subtitle{font-size:.875rem}.todo-app .todo-item .todo-content{flex-wrap:wrap}.todo-app .todo-item .todo-content .todo-actions{width:100%;justify-content:flex-end}.todo-app .form-actions{flex-direction:column}.todo-app .form-actions motif-button{width:100%}}