:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:system-ui,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{max-width:34rem;margin:3rem auto;padding:0 1rem}h1{font-weight:600}.hint{opacity:.7;font-size:.875rem}@layer theme,base;@layer components{@scope(todo-item) to ([data-zb-slotted=todo-item]){:scope{align-items:center;gap:.5rem;padding:.5rem .75rem;display:flex}label{flex:1;align-items:center;gap:.5rem;display:flex}.done{opacity:.6;text-decoration:line-through}form{flex:1;display:flex}form input{font:inherit;flex:1;padding:.2rem .4rem}.remove{cursor:pointer;opacity:.5;background:0 0;border:0;font-size:1.1rem}.remove:hover{opacity:1}}@scope(todo-app) to ([data-zb-slotted=todo-app]){:scope{border:1px solid #8884;border-radius:.75rem;display:block;overflow:hidden}form{border-bottom:1px solid #8884;gap:.5rem;padding:.75rem;display:flex}form input{font:inherit;flex:1;padding:.4rem .6rem}ul{margin:0;padding:0;list-style:none}li+li{border-top:1px solid #8882}footer{border-top:1px solid #8884;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.875rem;display:flex}footer .count{margin-right:auto}footer button{font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:.375rem;padding:.15rem .5rem}footer button.on{border-color:currentColor}.empty{opacity:.6;padding:1rem .75rem}}}@layer utilities;