*,*:after,*:before{box-sizing:border-box;margin:0;padding:0}button{font:inherit;border:none;cursor:pointer}input,label{font:inherit}:root{--_hue: 245;--_size: 1.8rem;--_radius: .2em;--_tspeed_fast: .18s;--_tspeed_slow: .3s;--_ttype_squish: cubic-bezier(.86, -.1, .27, 1.15);--bg--light: var(--_hue) 30% 94%;--txt--light: var(--_hue) 40% 5%;--accent--light: var(--_hue) 55% 50%;--accent1--light: 10 80% 60%;--muted--light: var(--_hue) 30% 99%;--bg--dark: var(--_hue) 15% 10%;--txt--dark: var(--_hue) 30% 88%;--accent--dark: var(--_hue) 50% 50%;--accent1--dark: 10 55% 50%;--muted--dark: var(--_hue) 20% 4%}@media (prefers-color-scheme: dark){:root{--bg: var(--bg--dark);--txt: var(--txt--dark);--accent: var(--accent--dark);--accent1: var(--accent1--dark);--muted: var(--muted--dark);color-scheme:dark}}@media (prefers-color-scheme: light){:root{--bg: var(--bg--light);--txt: var(--txt--light);--accent: var(--accent--light);--accent1: var(--accent1--light);--muted: var(--muted--light);color-scheme:light}}[color-scheme=dark]{--bg: var(--bg--dark);--txt: var(--txt--dark);--accent: var(--accent--dark);--accent1: var(--accent1--dark);--muted: var(--muted--dark);color-scheme:dark}[color-scheme=light]{--bg: var(--bg--light);--txt: var(--txt--light);--accent: var(--accent--light);--accent1: var(--accent1--light);--muted: var(--muted--light);color-scheme:light}@media screen and (max-width: 768px){:root{--_size: 1.3rem}}@media (prefers-reduced-motion: reduce){:root{--_tspeed_slow: 50ms;--_tspeed_fast: 50ms}}body{min-height:100vh;display:grid;justify-items:center;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:hsl(var(--bg));color:hsl(var(--txt))}::selection{background:hsl(var(--accent) / .8);color:hsl(var(--bg))}h1{font-size:calc(var(--_size) * 1.3);text-align:center}.container{margin:4vmax max(calc((100vw - 70rem)/2),1.5rem) 6em;display:grid;gap:clamp(2rem,3.5vmax,8rem);text-align:center}hr{border:0;height:.4em;background-color:hsl(var(--accent) / .5);border-radius:var(--_radius)}.btn{max-width:fit-content;display:flex;place-items:center;gap:.5em;background-color:hsl(var(--accent));color:hsl(var(--bg));text-decoration:none;padding:.5em;border-radius:var(--_radius);box-shadow:.05em .1em .9em hsl(var(--accent) / .3),0 0 0 -.1em hsl(var(--bg)),0 0 0 -.2em hsl(var(--accent));transition:box-shadow var(--_tspeed_fast) var(--_ttype_squish),background-color var(--_tspeed_fast) var(--_ttype_squish)}.btn :where(svg,img,span){pointer-events:none}.btn :where(svg,img){width:var(--_size);height:var(--_size)}.btn:where(:active,:hover){background-color:hsl(var(--accent) / .7);box-shadow:0 0 hsl(var(--accent) / .3),0 0 0 -.1em hsl(var(--bg)),0 0 0 -.2em hsl(var(--accent))}.btn:focus{outline:none}.btn:focus-visible{box-shadow:0 0 hsl(var(--accent) / .3),0 0 0 .2em hsl(var(--bg)),0 0 0 .4em hsl(var(--accent) / .7)}.todo{display:flex;gap:.5em;font-size:var(--_size);text-align:left}.wrapper{flex:1 1 100%;position:relative;display:grid;gap:.2em}.label{text-transform:uppercase;font-size:.7em;pointer-events:none;letter-spacing:.05em;margin-inline:.45em;position:absolute;top:50%;transform:translateY(-50%);padding:.1em .35em;background-color:hsl(var(--muted));transition:transform var(--_tspeed_fast) var(--_ttype_squish),background-color var(--_tspeed_fast) var(--_ttype_squish)}.input{border:none;border-radius:var(--_radius);padding:.35em .55em;width:100%;background-color:hsl(var(--muted));caret-color:hsl(var(--accent));box-shadow:0 0 0 -.1em hsl(var(--bg)),0 0 0 -.2em hsl(var(--accent) / .8);transition:box-shadow var(--_tspeed_fast) var(--_ttype_squish)}.input:focus{outline:none;box-shadow:0 0 0 .2em hsl(var(--bg)),0 0 0 .4em hsl(var(--accent) / .8)}.input:focus~.label,.input:not(:placeholder-shown)~.label{transform:translate3d(0,-3em,0);background-color:hsl(var(--bg));color:hsl(var(--accent) / .8)}.input::placeholder{opacity:0}[role=dialog]{position:fixed;z-index:100;inset:0;padding-inline:2vmax;display:grid;place-items:center;background-color:hsl(var(--bg) / .7)}[role=dialog] .todo{max-width:40ch;padding:2em 1.3em 1.3em;background-color:hsl(var(--bg));border-radius:var(--_radius);border:.1em solid hsl(var(--accent) / .3);box-shadow:0 -1em 3em hsl(var(--muted)),0 1em 3em hsl(var(--accent) / .2)}._task_11e06_1{display:flex;align-items:center;justify-content:space-between;gap:.6em;font-size:var(--_size);border:.2em solid hsl(var(--muted) / .8);padding:.6em;border-radius:calc(var(--_radius) * 2)}._task-group_11e06_23{display:flex;align-items:center;--taskgroup-gap: .5em;gap:var(--taskgroup-gap)}._label_11e06_37{position:relative;cursor:pointer;text-align:left;line-height:1.4}._checkbox_11e06_51{flex-shrink:0;appearance:none;width:1em;height:1em;background-color:hsl(var(--muted));border-radius:var(--_radius);box-shadow:0 0 .5em hsl(var(--accent) / .1),0 0 0 .05em hsl(var(--accent) / .5),0 0 0 -.2em hsl(var(--accent));transition:box-shadow var(--_tspeed_fast) ease-in-out,background-color 80ms ease-in-out}._checkbox_11e06_51:focus{outline:none}._checkbox_11e06_51:is(:focus-visible,:hover){box-shadow:0 0 hsl(var(--bg)),0 0 0 .05em hsl(var(--accent)),0 0 0 .225em hsl(var(--accent) / .3)}._checkmark_11e06_97{content:"";position:absolute;width:1em;height:1em;display:grid;place-items:center;top:50%;color:hsl(var(--muted));border-radius:var(--_radius);transform:translate3d(calc(-100% - var(--taskgroup-gap)),-50%,0);transition:background-color 80ms ease-in-out}._checkmark_11e06_97 svg{width:.75em;height:.75em}._checkbox_11e06_51:checked{background-color:hsl(var(--accent))}._checkbox_11e06_51:checked+label{text-decoration:line-through}._delete_11e06_151{--accent: var(--accent1)}._loading_11e06_159{color:hsl(var(--accent));font-size:var(--_size);font-weight:700;animation:_pulse_11e06_1 2s infinite ease-in-out}@keyframes _pulse_11e06_1{0%,to{opacity:1}50%{opacity:.5}}._error_11e06_195{color:hsl(var(--accent1));font-size:var(--_size);text-align:center}._tasks_l5hwr_1{display:grid;list-style-type:none;gap:1.5em}