#checklist{--background:none;--text:#222222;--check:#689afe;--disabled:#c3c8de;width:100%;width:450px;padding:20px;border-radius:10px;flex-direction:column;gap:2px}#checklist,#checklist label{position:relative;display:flex}#checklist label{color:var(--text);cursor:pointer;align-items:center;width:-moz-fit-content;width:fit-content;transition:color .3s ease}#checklist label:after,#checklist label:before{content:"";position:absolute}#checklist label:before{height:2px;width:8px;left:-27px;background:var(--check);border-radius:2px;transition:background .3s ease}#checklist label:after{height:4px;width:4px;top:8px;left:-25px;border-radius:50%}#checklist input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:15px;width:15px;border-radius:20px;outline:none;border:0;margin:0 15px 0 0;cursor:pointer;background:var(--background);display:flex;align-items:center}#checklist input[type=checkbox]:after,#checklist input[type=checkbox]:before{content:"";position:absolute;height:2px;top:auto;background:var(--check);border-radius:2px}#checklist input[type=checkbox]:before{width:0;right:60%;transform-origin:right bottom}#checklist input[type=checkbox]:after{width:0;left:40%;transform-origin:left bottom}#checklist input[type=checkbox]:checked:before{animation:check-01 .4s ease forwards}#checklist input[type=checkbox]:checked:after{animation:check-02 .4s ease forwards}#checklist input[type=checkbox]:checked+label{color:var(--disabled);animation:move .3s ease .1s forwards}#checklist input[type=checkbox]:checked+label:before{background:var(--disabled);animation:slice .4s ease forwards}#checklist input[type=checkbox]:checked+label:after{animation:firework .5s ease .1s forwards}@keyframes move{50%{padding-left:8px;padding-right:0}to{padding-right:4px}}@keyframes slice{60%{width:100%;left:4px}to{width:100%;left:-2px;padding-left:0}}@keyframes check-01{0%{width:4px;top:auto;transform:rotate(0)}50%{width:0;top:auto;transform:rotate(0)}51%{width:0;top:8px;transform:rotate(45deg)}to{width:5px;top:8px;transform:rotate(45deg)}}@keyframes check-02{0%{width:4px;top:auto;transform:rotate(0)}50%{width:0;top:auto;transform:rotate(0)}51%{width:0;top:8px;transform:rotate(-45deg)}to{width:10px;top:8px;transform:rotate(-45deg)}}@keyframes firework{0%{opacity:1;box-shadow:0 0 0 -2px #8b6dff,0 0 0 -2px #8b6dff,0 0 0 -2px #8b6dff,0 0 0 -2px #8b6dff,0 0 0 -2px #8b6dff,0 0 0 -2px #8b6dff}30%{opacity:1}to{opacity:0;box-shadow:0 -15px 0 0 #8b6dff,14px -8px 0 0 #8b6dff,14px 8px 0 0 #8b6dff,0 15px 0 0 #8b6dff,-14px 8px 0 0 #8b6dff,-14px -8px 0 0 #8b6dff}}body{background:#fff;height:100vh;font:500 18px Varela Round,sans-serif;display:flex;flex-direction:column;justify-content:center;align-items:center}html{overflow:-moz-scrollbars-none;-ms-overflow-style:none}body::-webkit-scrollbar{width:0!important}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.confetti-fade-out{animation:fadeOut 2s forwards}