#root{margin:0 auto;padding:0;text-align:center;font-size:1.3em;--border-1: 2px;--border-2: 1px;--margin-1: .3em}h2{font-size:1.2em}main-screen{display:block;width:100vw}nav-bar{display:flex;flex-direction:column;background-color:brown}nav-bar>*{background-color:#00f;padding:10px 0;writing-mode:vertical-lr;transform:rotate(180deg)}modal-popup{background-color:var(--bg-color);display:block;flex-direction:column;border:2px solid var(--sub-bg-color);margin:1em;border-radius:.3em}modal-popup>div.section{margin:.2em}modal-popup>div.x-bar{position:relative;background-color:var(--sub-bg-color);content:"h";height:1.6em}x-button{cursor:default;display:inline-block;position:absolute;color:var(--color-1);right:.2em;top:.2em;background-color:red;width:1.2em;height:1.2em;line-height:1.2em;border-radius:1.6em}modal-popup>*+*{margin-bottom:10px}warning-text{color:red}todos-list{display:block;margin:0 .3em .3em}todos-list>*:first-child{border-top:var(--border-1) solid var(--sub-bg-color);border-bottom:var(--border-1) solid var(--sub-bg-color)}todos-list>*:not(:first-child){border-bottom:var(--border-1) solid var(--sub-bg-color)}todo-item{line-height:2em;background-color:inherit;display:flex;text-align:left;flex-wrap:wrap;position:relative;transition:.1s}todo-item.done{background-color:var(--done-color);text-decoration:line-through;opacity:.6;text-decoration-color:gray}todo-item.normal{background-color:var(--normal-color)}todo-item.urgent{background-color:var(--urgent-color)}todo-item>div:first-child{display:flex;width:2em;height:2em;align-items:center;justify-content:center}check-circle{width:.8em;height:.8em;border-radius:1em;border:2px solid dodgerblue;background-color:var(--bg-color)}.green{background-color:pink}todo-item>div:not(:first-child){padding:0 .5em;border-left:2px dashed var(--sub-bg-color)}todo-item button{padding:0;margin:0 .3em;border:none;font-style:italic;color:var(--sub-color);background-color:unset}confirmation-outer{position:fixed;display:flex;align-items:center;justify-content:center;left:0;top:0;right:0;bottom:0}confirmation-inner{padding:.3em;display:inline-block;background-color:var(--bg-color);border-radius:.2em}button{font-size:inherit;padding:.3em;margin:.2em;border:none;color:var(--color-1);border-radius:.3em;background-color:#1e90ff}input{color:inherit;font-size:inherit;background:none;padding:.2em;border-radius:.2em;width:calc(100% - 1em);border:1px solid var(--border-color)}sparkly-widget{display:inline-block;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}sparkly-widget>p{font-size:2em}sparkly-widget>img{height:10em;animation-name:jump-ani;animation-duration:2s;animation-iteration-count:infinite}@keyframes jump-ani{50%{transform:translateY(-1em)}to{transform:translate(0)}}star-graphic{background:no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABbWlDQ1BpY2MAACiRdZG7S0JxFMc/vjDKcCgiosHBokEhCsKxbHCREDPIatHrK/BxuVcJaQ1aGoSGqKXX0H9Qa9BaEARFENHY3GsJuZ2rghJ6Lr97Pnx/53s491ywhvNKQbfPQ6FY1qKhoGc1vuZxvmPHwggBHAlFVxcikTA94+dRaiUe/Gav3nVdYyCV1hWw9AnPKapWFpZpCG+VVZP3hIeVXCIlfCLs02RA4VtTTzb5zeRsk79M1mLRRbCaPT3ZDk52sJLTCsJTwt5CvqK05jG/xJUurixLHpMzjk6UEEE8JKmwSZ4yfslF2Vl333TDt0RJPIq8Vapo4siSE69P1Ip0TUvOiJ6WJ0/V3Pv/feqZ2Zlmd1cQHK+G8TkBzn2o1wzj99Qw6mdge4HrYttfkj0FvkWvtTXvMbh34PKmrSUP4GoXRp/VhJZoSDY51kwGPi5gMA5D99C/3txV657zJ4htyy+6g8MjmJR698Yf9GtoBE2AxV4AAAAJcEhZcwAAD2EAAA9hAag/p2kAAAJPSURBVFhH1ZdPSFRRGMVHM5TIjWlGG20jKNYu1JWICwsF1y3CIBeRhrhpFbQQCUFbhLhrpYi6kCIkFTQKi2gTKqVlf6DSKEJBF6mU9TvwvXgMM43vzrwZ/ODw3sy95zvn/vvuTCRygOMt3t9nyv8lhP8YqjJh4jGiv83ASDIGshzJP+F9AEdAIch3zBPJdiB2wskDD8EEOApaHPI4U17C/AVOgWpbBplJSzSY4LRPTSdhIy3qiMyYgfM+wdv23fWwTZQhsAdeRwmd4LNOxFLYBsZspO0xhJ5ZW3GqTdSRUFP8ygS+xxG4a+2aiXFQmQojd0ii3a6Ktw0+ggv/SXyPti3rr6W6D8pdjLRC+mKJvvK8CIIUrCv0f2f8HZ5T4BwoSGRGBWbZiKp0/YkICdov066a4d0Zev4Ac6Dbz6236VWHXfAIpGQNyXMa9ICnJu43I91IDjgOSs3RYZ4V4BYYAqMBZ+Ea/c+CInAGnDS+hD+BJ+AFWAeqKf/iGG9dQBtpFXhO13gfBk37MKIb0j9CnRjdFdoTGmigqLUZ+OZL6h2xWIkGrZ+WrwaUBFJL0LnZzMjAmzh9dTdo9FrO0GKezKoH2iPRsWhtoYkrsY6VRvkghoo2lQpV6KElkAkdLy9K7btJF/Wgv4j6TKTXJ+aZWXEx4MJ5DkkbUuddcdNm4KpLsqAzIA2VaPFumKCWQLHgYsCVowK1aWRVN+2LXNdkLrwBE+3gqRtP/5LSGio4uvv1M0yjb0uruonp2El8NhnxQ0mQP8PVP6LGJHJknvoXUOeOX08yMFoAAAAASUVORK5CYII=);background-size:100%;opacity:.8;width:.1em;height:.1em;position:absolute;left:var(--left);top:var(--top);animation:sparkle 3s;animation-delay:var(--delay);animation-iteration-count:infinite}@keyframes sparkle{25%{transform:scale(15);opacity:0}50%{transform:scale(1);opacity:0}to{transform:scale(1);opacity:0}}progress-container{display:block;margin:0 1em 1em;border:2px solid var(--sub-bg-color);position:relative;border-radius:.3em}progress-container>progress-dash{position:absolute;display:block;top:0;height:100%;width:var(--width);border-right:2px dashed var(--sub-bg-color)}progress-bar{display:block;height:1em;width:var(--progress);background-color:#008b8b;transition:.4s;border-radius:.3em}bool-container{display:block;margin:var(--margin-1);margin-top:.5em;position:relative}bool-container>button{margin:0;padding:.3em;transition:.4s;background-color:unset;color:unset;border-radius:unset}bool-container>button:first-child{border-top-left-radius:.3em;border-bottom-left-radius:.3em}bool-container>button:last-child{border-top-right-radius:.3em;border-bottom-right-radius:.3em}bool-container>button.normal-selected{color:var(--color-1);background-color:var(--bg-color-1);border:1px solid var(--bg-color-1)}bool-container>button.normal-not-selected{border:1px solid var(--sub-color);transform:translateY(-.3em);box-shadow:0 .3em var(--sub-bg-color)}bool-container>button.urgent-selected{color:var(--color-1);background-color:var(--urgent-color);border:1px solid var(--urgent-color)}bool-container>button.urgent-not-selected{border:1px solid var(--sub-color);transform:translateY(-.3em);box-shadow:0 .3em var(--sub-bg-color)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;background-color:#fff;color:#000;--color: black;--bg-color: white;--border-color: gray;--sub-text-color-1: #555;--color-1: white;--bg-color-1: orange;--confirmation-color-1: #ddd;--not-color: green;--done-color: none;--normal-color: #884dff;--urgent-color: #ff6666;--sub-bg-color: #ccc;--sub-color: #ccc;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:30px;min-height:100vh}@media (prefers-color-scheme: dark){:root{color:azure;background-color:#222;--color: azure;--bg-color: #222;--sub-color: #ccc;--sub-bg-color: #555}}