:root{--todos-accent:var(--color-accent,#9ccfd8)}.todos{position:relative;background:#1a1a1a;border:1px solid #333;max-width:600px;margin:0 auto}.todos h1{color:var(--todos-accent);margin-top:0;margin-bottom:16px;font-size:14px;font-weight:400}.todos h1:before{color:#666;margin-right:8px}.todos h2{color:var(--todos-accent);margin-top:0;margin-bottom:16px;font-size:14px;font-weight:400}.todos h2:before{color:#666;margin-right:8px}.todos h3{color:var(--todos-accent);margin-top:0;margin-bottom:16px;font-size:14px;font-weight:400}.todos h3:before{color:#666;margin-right:8px}.todos h4{color:var(--todos-accent);margin-top:0;margin-bottom:16px;font-size:14px;font-weight:400}.todos h4:before{color:#666;margin-right:8px}.todos h5{color:var(--todos-accent);margin-top:0;margin-bottom:16px;font-size:14px;font-weight:400}.todos h5:before{color:#666;margin-right:8px}.todos h6{color:var(--todos-accent);margin-top:0;margin-bottom:16px;font-size:14px;font-weight:400}.todos h6:before{color:#666;margin-right:8px}.todos h1:before{content:"#"}.todos h2:before{content:"##"}.todos h3:before{content:"###"}.todos h4:before{content:"####"}.todos h5:before{content:"#####"}.todos h6:before{content:"######"}.todos .header{border-bottom:1px solid #333;padding:20px}.todos .new-todo{color:#d4d4d4;outline:none;background:#0a0a0a;border:1px solid #444;width:100%;padding:12px;font-family:inherit;font-size:14px}.todos .new-todo:focus{border-color:var(--todos-accent)}.todos .new-todo::placeholder{color:#666}.todos .main{border-bottom:1px solid #333}.todos .todo-list{list-style:none}.todos .todo-list>li{border-bottom:1px solid #2a2a2a;padding:12px 16px}.todos .todo-list>li:hover{background:#222}.todos .todo-list>li:hover .destroy{opacity:1}.todos .state{display:flex;align-items: center;gap:12px}.todos .state label{cursor:pointer;flex:1}.todos .toggle{appearance:none;cursor:pointer;position:relative;background:#0a0a0a;border:1px solid #666;width:16px;height:16px}.todos .toggle:checked{background:var(--todos-accent);border-color:var(--todos-accent)}.todos .toggle:checked:after{content:"×";position:absolute;color:#0a0a0a;font-size:16px;font-weight:700;line-height:1;top:-2px;left:2px}.todos .destroy{color:#666;cursor:pointer;opacity:0;background:0 0;border:none;padding:0 8px;transition:opacity .2s;font-size:18px}.todos .destroy:before{content:"×"}.todos .destroy:hover{color:#ff6b6b}.todos .footer{display:flex;justify-content:space-between;align-items: center;padding:12px 16px;font-size:12px}.todos .todo-count{color:#888}.todos .filters{display:flex;list-style:none;gap:8px}.todos .filters li a{color:#888;text-decoration:none;border:1px solid #0000;padding:4px 8px}.todos .filters li a:hover{border-color:#444}.todos .filters li a:visited{color:#888}.todos .filters li a.selected{color:var(--todos-accent);border-color:var(--todos-accent)}.todos .filters li a.selected:visited{color:var(--todos-accent)}.todos .clear-completed{color:#888;cursor:pointer;background:0 0;border:1px solid #444;padding:4px 12px;font-family:inherit;font-size:12px}.todos .clear-completed:hover{color:#d4d4d4;border-color:#666}