:root{--level:65%;--saturation-offset:20%;--rainbow:linear-gradient(90deg, hsl(0, calc(100% - var(--saturation-offset)), var(--level)) 0%, hsl(36, calc(100% - var(--saturation-offset)), var(--level)) 10%, hsl(64, calc(74% - var(--saturation-offset)), var(--level)) 20%, hsl(118, calc(68% - var(--saturation-offset)), var(--level)) 30%, hsl(179, calc(68% - var(--saturation-offset)), var(--level)) 40%, hsl(188, calc(76% - var(--saturation-offset)), var(--level)) 50%, hsl(212, calc(86% - var(--saturation-offset)), var(--level)) 60%, hsl(260, calc(89% - var(--saturation-offset)), var(--level)) 70%, hsl(284, calc(94% - var(--saturation-offset)), var(--level)) 80%, hsl(308, calc(97% - var(--saturation-offset)), var(--level)) 90%, hsl(0, calc(100% - var(--saturation-offset)), var(--level)) 100%);font-family:"sans-serif";font-size:18pt}@keyframes scroll{0%{background-position:0 0}to{background-position:var(--bg-size) 0}}@keyframes rainbow{0%{filter:hue-rotate()}50%{filter:hue-rotate(180deg)}to{filter:hue-rotate(360deg)}}body{flex-direction:column;gap:.4em;min-width:40%;max-width:40em;margin:auto;padding:1vw;display:flex}body h1{text-align:center;justify-content:center;align-items:center;margin-top:0;display:flex}body h1 img{width:2em;height:2em;animation:2s linear infinite rainbow}body label{margin-bottom:.1em}body input{font-size:18pt}body>button{background-color:#6c7;border:none;font-size:18pt;transition:background-color .1s linear}body>button:disabled{background-color:#999}body div.list{flex-direction:column;gap:.5em;display:flex}body div.list>label{border:2px solid #000;grid-template-columns:1fr 3fr .6fr .2fr;align-items:center;gap:.5em;margin:0;padding:1em;transition:scale .2s cubic-bezier(.68,-.55,.27,1.55);display:grid;position:relative}@starting-style{body div.list>label{scale:.2}}body div.list>label.done span{--bg-size:200%;background-image:var(--rainbow);background-size:var(--bg-size);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;text-decoration:line-through;animation:5s linear infinite forwards scroll}body div.list>label.done small{font-weight:700}body div.list>label button{text-align:center;background-color:#c67;border:none;border-radius:50%;width:2em;height:2em;padding:2px;font-weight:700}body div.list>label button:hover{background-color:#b56}body div.list>label span{text-overflow:ellipsis;transition:-webkit-text-fill-color .1s linear;overflow-x:hidden}body div.list>label small{text-align:right;transition:font-weight .2s linear}