.todo-app_UsZ4iam0{overflow:hidden}.header-UsZ4iam0{background:color-mix(in oklab, var(--accent) 5%, var(--surface-raised));border-bottom:1px solid var(--border);padding:1.25rem}.title_UsZ4iam0{margin:0;font-size:1.5em;font-weight:100}.footer-UsZ4iam0{background:var(--surface-sunken);border-top:1px solid var(--border);padding:.875rem 1.25rem}.footer-grid_UsZ4iam0{color:var(--text-muted);grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;font-size:.8125rem;display:grid}.ul-UsZ4iam0{grid-template-columns:auto 1fr auto;margin:0;padding:0;display:grid}.li-UsZ4iam0{grid-template-columns:subgrid;background:var(--surface-raised);border-bottom:1px solid var(--border);grid-column:1/-1;align-items:center;gap:.875rem;margin:0;padding:.875rem 1.25rem;transition:background-color .15s;display:grid}@media (hover:hover){.li-UsZ4iam0:hover{background:color-mix(in oklab, var(--accent) 5%, var(--surface-raised))}}.delete-button_UsZ4iam0{opacity:0;cursor:pointer;background:0 0;border:0;border-radius:50%;width:1.75rem;height:1.75rem;transition:opacity .15s,background-color .15s;display:block;position:relative;&:after{content:"×";color:var(--red);font-size:1.75rem;line-height:1;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-54%)}.li-UsZ4iam0:is(:hover,:focus-within) &{opacity:1}&:hover{background:var(--red-bright)}&.placeholder_UsZ4iam0{visibility:hidden}}.add-todo-form_UsZ4iam0{grid-template-columns:auto 1fr;align-items:center;gap:.875rem;display:grid}.edit-todo-form_UsZ4iam0{display:grid}.description_UsZ4iam0{color:var(--text);margin:0}.input-UsZ4iam0{&[type=checkbox]{width:1.25rem;height:1.25rem;accent-color:var(--accent);cursor:pointer;margin:0}&[type=text]{width:100%;min-height:2.75rem;color:var(--text);font:inherit;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:inset 0 1px 2px color-mix(in oklab, var(--text) 8%, transparent);padding:.5rem .75rem;display:block;&::placeholder{color:var(--text-muted)}&:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}}}.completed_UsZ4iam0{color:var(--text-muted);opacity:.7;text-decoration:line-through}.filter_UsZ4iam0{justify-content:center;gap:.25rem;display:flex}.footer-button_UsZ4iam0{cursor:pointer;color:inherit;background:0 0;border:0;border-radius:999px;margin:0;padding:.3rem .625rem;transition:color .15s,background-color .15s,opacity .15s}.footer-button_UsZ4iam0[aria-current=true]{color:var(--accent);background:var(--accent-soft);font-weight:700}.footer-button_UsZ4iam0:hover{color:var(--text);background:color-mix(in oklab, var(--text) 8%, transparent)}.footer-button_UsZ4iam0:active{opacity:.5}.filter-button_UsZ4iam0{}.clear-button_UsZ4iam0{color:var(--red);}.clear-completed_UsZ4iam0{text-align:right}.items-left_UsZ4iam0{font-variant-numeric:tabular-nums}@media (width<36rem){.footer-grid_UsZ4iam0{grid-template-columns:1fr auto;gap:.75rem}.filter_UsZ4iam0{grid-area:2/1/auto/-1;justify-content:space-between}}