:root {
  --font-size: 3vmin;
}
@media screen and (max-width: 640px) {
  :root {
    --font-size: 4.5vmin;
  }
}
a { text-decoration: none; }

/* System color */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}
@media (prefers-color-scheme: light) {
  :root { color-scheme: light; }
}

/* Custom color */
.dark-scheme { color-scheme: dark; }
.dark-scheme a:link { color: rgb(188, 188, 255); }
.dark-scheme a:visited { color: rgba(250, 195, 195, 0.5); }
.dark-scheme a:hover { color: rgb(134, 134, 250); }

.light-scheme { color-scheme: light; background-color: #ccc; }
.light-scheme a:link { color: rgb(55, 55, 255); }
.light-scheme a:visited { color: rgba(10, 10, 10, 0.5); }
.light-scheme a:hover {
  filter: blur(1px) contrast(200%) brightness(25%);
}

* {
  font-size: var(--font-size);
  background-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: auto;
}

.nav-trigger, .nav-container, .nav-overlay {
  visibility: hidden;
}

#app {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

main {
  display: inline-block;
}

.container {
  text-align: center;
  max-width: 100%;
}
.container-footer {
  margin: 1em 0 0;
  padding: 1em 0 0;
}

.description {
  display: flex;
  justify-content: center;
  margin: 2em 0;
}

.inner-section {
  display: flex;
  justify-content: space-evenly;
}

section {
  margin: 0 auto;
}

.area {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#svelte-app {
  max-width: 7em;
  padding: 0 1rem;
}

.smoke #app {
  opacity: 0.6;
}

.title {
  font-size: 2em;
  letter-spacing: 0.1em;
  margin: 0.4em 0;
}
.title span {
  margin: 0 0.5em;
}

.m-b-md {
  letter-spacing: 0.1em;
}

.busy {
  cursor: default;
}

.fa-bagel {
  opacity: 0.5;
}
.fa-bagel:hover {
  opacity: 1;
}

.worm {
  display: inline-flex;
}

.worm span {
  font-size: 0.8em;
  margin: 0 0.2em;
  opacity: 0.6;
}

.inline-scroll {
  display: inline-block;
  max-width: 50vw;
  overflow-x: auto;
}

.link-area {
  margin: 0.5em 2em;
  max-width: 30em;
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.8em;
}

.links a {
  margin: 0.3em 0;
  text-decoration: none;
  font-size: 0.8em;
  letter-spacing: 0.1em;
}
.links a + a {
  margin-left: 0.8em;
}

small, small > * {
  font-size: 0.8em;
  text-align: left;
}
@media screen and (max-width: 640px) {
  small, small > * {
    font-size: 1em;
  }
}

button {
  background: initial;
  border: 0;
}

button:enabled {
  cursor: pointer;
}

.button {
  padding: 0.2em 0.5em;
  margin: 0.2em;
}
.button-mini {
  padding: 0 0 0 0.2em;
  margin: 0 0 0 0.2em;
}

.btn-submit {
  display: inline-flex;
  padding: 1em 2em;
  margin: 1em 2em;
  background-color: rgba(10, 200, 10, 0.1);
  border: 1px solid #383;
  border-radius: 5em;
}
.btn-submit:hover {
  background-color: rgba(10, 200, 10, 0.3);
}
.btn-submit:active {
  background-color: rgba(10, 200, 10, 0.5);
}
.ss-remove {
  display: inline-flex;
  padding: 0.3em 0.5em;
  margin-left: 0.5em;
  color: #caa;
  background-color: rgba(200, 10, 10, 0.3);
  border: 1px solid #833;
  border-radius: 5em;
}
.ss-remove:hover {
  background-color: rgba(200, 10, 10, 0.6);
}
.ss-remove:active {
  background-color: rgba(200, 10, 10, 1);
}
.ss-close {
  display: inline-flex;
  padding: 0.3em 0.5em;
  margin-left: 0.5em;
  border-radius: 5em;
}
.plan-edit {
  width: 20em;
  height: 9em;
  resize: none;
  overflow: auto;
  white-space: pre;
}
td {
  background-color: rgba(0, 180, 220, 0.2);
  min-width: 6em;
  min-height: 1em;
}
section {
  overflow-x: auto;
}

.ss-input {
  display: inline-block;
}
.ss-input label {
  display: flex;
  justify-content: space-between;
}

form {
  padding: 0.5em 0;
  overflow: hidden;
}
input {
  border-radius: 0.5em;
}

.input, .output, .nickname, .entry-comment,
.ss-input input {
  padding: 0.2em 0.5em;
  margin: 0.2em;
  border: 1px solid #888;
}

.input {
  width: 80vw;
}

.input-text {
  padding: 0.2em 0.4em;
  width: 12em;
  border: 1px solid gray;
}

.output {
  width: 15em;
  font-size: 0.9em;
}

.nickname {
  width: 6em;
}

.entry-comment {
  width: 10em;
}

.pink.error {
  border: 2px solid #a33;
  background-color: rgba(200, 0, 0, 0.04);
}

.output.code-6 {
  width: 6em;
  font-size: 0.9em;
  text-align: center;
}

.fa-size-big {
  font-size: 2em;
}

.fa-rotate-45 {
  transform: rotate(45deg);
}

.try-action * {
  color: cyan;
}

.horizontal {
  display: flex;
  justify-content: space-between;
}

.btn-remove {
  color: #833;
}
.btn-big {
  font-size: 2em;
}

.pointer:hover {
  text-decoration: underline;
  color: #3dd;
  cursor: pointer;
}

.left {
  text-align: left;
}
.right {
  text-align: right;
}
.ss-title {
  margin: 0 1em 0.5em;
  display: inline-flex;
}
.ss-subtitle {
  font-size: 0.7em;
  margin: 0 1em 0.5em;
  display: inline-flex;
}
.ss-td {
  min-height: 2.3em;
  display: inline-grid;
  align-items: center;
}
.ss-in-flex {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.ss-h1 {
  padding: 0 0.5em;
}
.ss-head a {
  text-decoration: none;
}

.margin {
  margin: 1em 0;
}

table.ss-table * {
  font-size: 0.6rem;
}

.plan-entry i {
  border-radius: 5em;
  width: 2em;
  height: 2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.2em;
}

.ss-p1, .ss-p2, .ss-p3 {
  border-radius: 5em;
  padding: 0 0.3em;
  min-width: 1.1em;
}
.dark-scheme .plan-entry i.fa-check, .dark-scheme .ss-p1 {
  color: rgb(0, 255, 0);
}
.dark-scheme .plan-entry i.fa-question, .dark-scheme .ss-p2 {
  color: rgb(230, 230, 0);
}
.dark-scheme .plan-entry i.fa-slash, .dark-scheme .ss-p3 {
  color: rgb(255, 30, 30);
}
.light-scheme .plan-entry i.fa-check, .light-scheme .ss-p1 {
  background-color: rgba(0, 255, 0, 0.9);
}
.light-scheme .plan-entry i.fa-question, .light-scheme .ss-p2 {
  background-color: rgba(230, 230, 0, 0.9);
}
.light-scheme .plan-entry i.fa-slash, .light-scheme .ss-p3 {
  background-color: rgba(255, 30, 30, 0.9);
}

.radio-area label {
  width: 2.5em;
  height: 2.5em;
  margin: 0.5em;
  border-radius: 2em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.radio-area input[type="radio"] {
  display: none;
}
.radio-area input:nth-child(1) + label {
  background-color: rgba(0, 255, 0, 0.1);
}
.radio-area input:nth-child(3) + label {
  background-color: rgba(230, 230, 0, 0.1);
}
.radio-area input:nth-child(5) + label {
  background-color: rgba(255, 30, 30, 0.1);
}
.radio-area input:checked + label {
  color: black;
}
.radio-area input:nth-child(1):checked + label {
  background-color: rgba(0, 255, 0, 0.9);
}
.radio-area input:nth-child(3):checked + label {
  background-color: rgba(230, 230, 0, 0.9);
}
.radio-area input:nth-child(5):checked + label {
  background-color: rgba(255, 30, 30, 0.9);
}
.radio-area input:nth-child(1) + label:hover {
  background-color: rgba(0, 255, 0, 0.5);
}
.radio-area input:nth-child(3) + label:hover {
  background-color: rgba(230, 230, 0, 0.5);
}
.radio-area input:nth-child(5) + label:hover {
  background-color: rgba(255, 30, 30, 0.5);
}

/* System color */
@media (prefers-color-scheme: dark) {
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #444;
    border-radius: 3px;
  }

  *::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
  }
}
@media (prefers-color-scheme: light) {
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: #888;
    border-radius: 3px;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 3px;
  }
}

.pos-abs {
  display: inline-block;
  margin: 0.5em;
}
.pos-abs.xvideos {
  position: absolute;
  right: 8em;
}

/* list-wrapper */
.list-wrapper, .list-wrapper * {
  font-size: 0.5rem;
}
.list-wrapper {
  position: relative;
  width: 99vw;
}
.ctl-area {
  margin: 2em auto 0;
  display: flex;
  justify-content: center;
}
.btn-middle {
  margin: 0 1em;
}
.btn-middle i {
  font-size: 2em;
  border-radius: 10em;
  box-shadow: #888 0 0 1.5em;
}
.flex-div {
  display: inline-flex;
  min-width: 50em;
  flex-wrap: wrap;
  margin: 2em auto;
  width: 100%;
}
.note .btn-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.note .tag {
  font-size: 0.8em;
  display: inline-block;
}
.tag {
  color: #eee;
  padding: 0.4em 1em;
  width: fit-content;
  border-radius: 1em;
}
.tag + .tag {
  margin-left: 1em;
}
.tag::before {
  content: "#";
  margin-right: 2px;
  opacity: 0.3;
}
.tag.admin::after {
  content: "Admin";
}
.tag.staff::after {
  content: "Staff";
}
.tag.guest::after {
  content: "Guest";
}
.tag.shorten::after {
  content: "Shorten";
}
.tag.personal::after {
  content: "Personal";
}
.tag.github::after {
  content: "GitHub";
}
.tag.xvideos::after {
  content: "Videos";
}
.admin,
.note:has(.admin) {
  --tagColor: #875;
}
.staff,
.note:has(.staff) {
  --tagColor: #579;
}
.guest,
.note:has(.guest) {
  --tagColor: #858;
}
.shorten,
.note:has(.shorten) {
  --tagColor: #875;
}
.personal,
.note:has(.personal) {
  --tagColor: #579;
}
.github,
.note:has(.github) {
  --tagColor: #858;
}
.xvideos,
.note:has(.xvideos) {
  --tagColor: #302;
}
.admin, .staff, .guest,
.shorten, .personal, .github, .xvideos {
  background-color: var(--tagColor);
}
.dark-scheme {
  --border-color: #ddd;
}
.light-scheme {
  --border-color: #333;
}
label input[type="checkbox"] {
  display: none;
}
label:has(input[type="checkbox"]) div {
  border: 1px solid var(--border-color);
}
label:has(#xvideos-box) {
  opacity: 0;
}
label:has(input[type="checkbox"]) {
  opacity: 0.7;
}
label:has(input[type="checkbox"]):hover {
  cursor: pointer;
  opacity: 1;
}
label:has(input:checked) {
  opacity: 1;
}
label:has(input:checked) div {
  box-shadow: var(--border-color) 0.2em 0.2em 0.5em;
}

div .note:has(.tag) {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  border-width: 0;
  transition: all 300ms ease-in-out 0s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  line-height: 1.5;
  border-radius: 0.5em;
  overflow: auto;
}
div .note:has(.tag) button,
div .note:has(.tag) a {
  display: none;
}
.ctl-area:has(#admin-box:checked) ~ div .note:has(.admin) button,
.ctl-area:has(#admin-box:checked) ~ div .note:has(.admin) a,
.ctl-area:has(#staff-box:checked) ~ div .note:has(.staff) button,
.ctl-area:has(#staff-box:checked) ~ div .note:has(.staff) a,
.ctl-area:has(#guest-box:checked) ~ div .note:has(.guest) button,
.ctl-area:has(#guest-box:checked) ~ div .note:has(.guest) a,
.ctl-area:has(#shorten-box:checked) ~ div .note:has(.shorten) button,
.ctl-area:has(#shorten-box:checked) ~ div .note:has(.shorten) a,
.ctl-area:has(#personal-box:checked) ~ div .note:has(.personal) button,
.ctl-area:has(#personal-box:checked) ~ div .note:has(.personal) a,
.ctl-area:has(#github-box:checked) ~ div .note:has(.github) button,
.ctl-area:has(#github-box:checked) ~ div .note:has(.github) a,
.ctl-area:has(#xvideos-box:checked) ~ div .note:has(.xvideos) button,
.ctl-area:has(#xvideos-box:checked) ~ div .note:has(.xvideos) a {
  display: inherit;
}
.ctl-area:has(#admin-box:checked) ~ div .note:has(.admin),
.ctl-area:has(#staff-box:checked) ~ div .note:has(.staff),
.ctl-area:has(#guest-box:checked) ~ div .note:has(.guest),
.ctl-area:has(#shorten-box:checked) ~ div .note:has(.shorten),
.ctl-area:has(#personal-box:checked) ~ div .note:has(.personal),
.ctl-area:has(#github-box:checked) ~ div .note:has(.github),
.ctl-area:has(#xvideos-box:checked) ~ div .note:has(.xvideos) {
  width: 32%;
  height: 11em;
  padding: 0.3em;
  margin: 0.3em;
  opacity: 1;
  border: 1px solid #777;
}
.note:hover {
  border: 1px solid var(--tagColor);
  box-shadow: var(--tagColor) 0 0 0.5em;
}

.row2 {
  display: flex;
  justify-content: center;
}
.row2 > span {
  width: 37%;
}
.one-line {
  overflow: scroll hidden;
  height: 2.7em;
  font-size: 0.8em;
  white-space: nowrap;
}
.inb {
  font-size: 0.8em;
  padding: 0 0.8em;
}
/* list-wrapper */


/* confirmation-container */
.confirmation {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  color: #fff;
  text-align: center;
  opacity: 0.8;
}
.confirmation-button {
  display: flex;
  justify-content: space-evenly;
}
.confirmation-button button {
  border: 1px solid #888;
  color: #fff;
  border-radius: 5px;
}
/* confirmation-container */


.loading {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  opacity: 0.5;
  z-index: 7;
}

.loader {
  position: relative;
  width: 21em;
  height: 21em;
  filter: blur(0.2em) contrast(2);
  -webkit-animation: loaderSpin 16s infinite linear;
          animation: loaderSpin 16s infinite linear;
}
@-webkit-keyframes loaderSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loaderSpin {
  to {
    transform: rotate(360deg);
  }
}
.loader > i {
  position: absolute;
  left: 10em;
  top: 10em;
  width: 1em;
  height: 1em;
  background-color: hsl(var(--hue, 0), 75%, 75%);
  border-radius: 50%;
  transform: rotateZ(var(--rz, 0)) translateY(5em);
  -webkit-animation: iMove 4s var(--delay, 0s) infinite ease-in-out;
          animation: iMove 4s var(--delay, 0s) infinite ease-in-out;
}
@-webkit-keyframes iMove {
  0% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(0);
  }
  2% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(1.25);
  }
  20% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(1.25);
  }
  90%, 100% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(var(--tx, 0), var(--ty, 0)) scale(0);
  }
}
@keyframes iMove {
  0% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(0);
  }
  2% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(1.25);
  }
  20% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(1.25);
  }
  90%, 100% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(var(--tx, 0), var(--ty, 0)) scale(0);
  }
}
.loader > i:nth-child(1) {
  --rz: 0deg;
  --delay: -4s;
  --tx: 3.876em;
  --ty: 3.388em;
  --hue: 0;
}
.loader > i:nth-child(2) {
  --rz: 5deg;
  --delay: -3.9444444444s;
  --tx: 1.796em;
  --ty: 2.148em;
  --hue: 5;
}
.loader > i:nth-child(3) {
  --rz: 10deg;
  --delay: -3.8888888889s;
  --tx: 2.596em;
  --ty: -1.5em;
  --hue: 10;
}
.loader > i:nth-child(4) {
  --rz: 15deg;
  --delay: -3.8333333333s;
  --tx: 0.932em;
  --ty: 1.444em;
  --hue: 15;
}
.loader > i:nth-child(5) {
  --rz: 20deg;
  --delay: -3.7777777778s;
  --tx: 2.292em;
  --ty: 2.86em;
  --hue: 20;
}
.loader > i:nth-child(6) {
  --rz: 25deg;
  --delay: -3.7222222222s;
  --tx: 1.564em;
  --ty: -1.508em;
  --hue: 25;
}
.loader > i:nth-child(7) {
  --rz: 30deg;
  --delay: -3.6666666667s;
  --tx: 3.004em;
  --ty: 0.876em;
  --hue: 30;
}
.loader > i:nth-child(8) {
  --rz: 35deg;
  --delay: -3.6111111111s;
  --tx: 1.904em;
  --ty: 0.412em;
  --hue: 35;
}
.loader > i:nth-child(9) {
  --rz: 40deg;
  --delay: -3.5555555556s;
  --tx: 3.204em;
  --ty: 0.38em;
  --hue: 40;
}
.loader > i:nth-child(10) {
  --rz: 45deg;
  --delay: -3.5s;
  --tx: 2.532em;
  --ty: 1.244em;
  --hue: 45;
}
.loader > i:nth-child(11) {
  --rz: 50deg;
  --delay: -3.4444444444s;
  --tx: 2.392em;
  --ty: -1.108em;
  --hue: 50;
}
.loader > i:nth-child(12) {
  --rz: 55deg;
  --delay: -3.3888888889s;
  --tx: 0.192em;
  --ty: -0.348em;
  --hue: 55;
}
.loader > i:nth-child(13) {
  --rz: 60deg;
  --delay: -3.3333333333s;
  --tx: 1.4em;
  --ty: 3.316em;
  --hue: 60;
}
.loader > i:nth-child(14) {
  --rz: 65deg;
  --delay: -3.2777777778s;
  --tx: 0.944em;
  --ty: -1.204em;
  --hue: 65;
}
.loader > i:nth-child(15) {
  --rz: 70deg;
  --delay: -3.2222222222s;
  --tx: 2.792em;
  --ty: 1.804em;
  --hue: 70;
}
.loader > i:nth-child(16) {
  --rz: 75deg;
  --delay: -3.1666666667s;
  --tx: 2.768em;
  --ty: 5.052em;
  --hue: 75;
}
.loader > i:nth-child(17) {
  --rz: 80deg;
  --delay: -3.1111111111s;
  --tx: 0.924em;
  --ty: 2.18em;
  --hue: 80;
}
.loader > i:nth-child(18) {
  --rz: 85deg;
  --delay: -3.0555555556s;
  --tx: 3.332em;
  --ty: 0.148em;
  --hue: 85;
}
.loader > i:nth-child(19) {
  --rz: 90deg;
  --delay: -3s;
  --tx: 1.264em;
  --ty: 4.596em;
  --hue: 90;
}
.loader > i:nth-child(20) {
  --rz: 95deg;
  --delay: -2.9444444444s;
  --tx: 2.804em;
  --ty: 5.076em;
  --hue: 95;
}
.loader > i:nth-child(21) {
  --rz: 100deg;
  --delay: -2.8888888889s;
  --tx: 0.868em;
  --ty: 0.692em;
  --hue: 100;
}
.loader > i:nth-child(22) {
  --rz: 105deg;
  --delay: -2.8333333333s;
  --tx: 3.444em;
  --ty: -0.412em;
  --hue: 105;
}
.loader > i:nth-child(23) {
  --rz: 110deg;
  --delay: -2.7777777778s;
  --tx: 0.86em;
  --ty: -0.476em;
  --hue: 110;
}
.loader > i:nth-child(24) {
  --rz: 115deg;
  --delay: -2.7222222222s;
  --tx: 1.744em;
  --ty: 0.356em;
  --hue: 115;
}
.loader > i:nth-child(25) {
  --rz: 120deg;
  --delay: -2.6666666667s;
  --tx: 0.2em;
  --ty: 0.244em;
  --hue: 120;
}
.loader > i:nth-child(26) {
  --rz: 125deg;
  --delay: -2.6111111111s;
  --tx: 2.52em;
  --ty: 1.868em;
  --hue: 125;
}
.loader > i:nth-child(27) {
  --rz: 130deg;
  --delay: -2.5555555556s;
  --tx: 2.68em;
  --ty: 0.388em;
  --hue: 130;
}
.loader > i:nth-child(28) {
  --rz: 135deg;
  --delay: -2.5s;
  --tx: 3.696em;
  --ty: 4.596em;
  --hue: 135;
}
.loader > i:nth-child(29) {
  --rz: 140deg;
  --delay: -2.4444444444s;
  --tx: 3.912em;
  --ty: -1.124em;
  --hue: 140;
}
.loader > i:nth-child(30) {
  --rz: 145deg;
  --delay: -2.3888888889s;
  --tx: 0.52em;
  --ty: -1.036em;
  --hue: 145;
}
.loader > i:nth-child(31) {
  --rz: 150deg;
  --delay: -2.3333333333s;
  --tx: 3.76em;
  --ty: -1.1em;
  --hue: 150;
}
.loader > i:nth-child(32) {
  --rz: 155deg;
  --delay: -2.2777777778s;
  --tx: 0.592em;
  --ty: 0.62em;
  --hue: 155;
}
.loader > i:nth-child(33) {
  --rz: 160deg;
  --delay: -2.2222222222s;
  --tx: 2.84em;
  --ty: 1.676em;
  --hue: 160;
}
.loader > i:nth-child(34) {
  --rz: 165deg;
  --delay: -2.1666666667s;
  --tx: 0.344em;
  --ty: -1.812em;
  --hue: 165;
}
.loader > i:nth-child(35) {
  --rz: 170deg;
  --delay: -2.1111111111s;
  --tx: 1.576em;
  --ty: 3.18em;
  --hue: 170;
}
.loader > i:nth-child(36) {
  --rz: 175deg;
  --delay: -2.0555555556s;
  --tx: 1.26em;
  --ty: 4.884em;
  --hue: 175;
}
.loader > i:nth-child(37) {
  --rz: 180deg;
  --delay: -2s;
  --tx: 0.668em;
  --ty: -2.324em;
  --hue: 180;
}
.loader > i:nth-child(38) {
  --rz: 185deg;
  --delay: -1.9444444444s;
  --tx: 1.64em;
  --ty: -0.076em;
  --hue: 185;
}
.loader > i:nth-child(39) {
  --rz: 190deg;
  --delay: -1.8888888889s;
  --tx: 2.384em;
  --ty: -1.156em;
  --hue: 190;
}
.loader > i:nth-child(40) {
  --rz: 195deg;
  --delay: -1.8333333333s;
  --tx: 0.488em;
  --ty: -0.908em;
  --hue: 195;
}
.loader > i:nth-child(41) {
  --rz: 200deg;
  --delay: -1.7777777778s;
  --tx: 2.328em;
  --ty: -0.348em;
  --hue: 200;
}
.loader > i:nth-child(42) {
  --rz: 205deg;
  --delay: -1.7222222222s;
  --tx: 1.044em;
  --ty: -2.356em;
  --hue: 205;
}
.loader > i:nth-child(43) {
  --rz: 210deg;
  --delay: -1.6666666667s;
  --tx: 1.512em;
  --ty: 0.836em;
  --hue: 210;
}
.loader > i:nth-child(44) {
  --rz: 215deg;
  --delay: -1.6111111111s;
  --tx: 2.16em;
  --ty: 3.78em;
  --hue: 215;
}
.loader > i:nth-child(45) {
  --rz: 220deg;
  --delay: -1.5555555556s;
  --tx: 1.608em;
  --ty: 1.332em;
  --hue: 220;
}
.loader > i:nth-child(46) {
  --rz: 225deg;
  --delay: -1.5s;
  --tx: 0.284em;
  --ty: 0.252em;
  --hue: 225;
}
.loader > i:nth-child(47) {
  --rz: 230deg;
  --delay: -1.4444444444s;
  --tx: 2.476em;
  --ty: 1.476em;
  --hue: 230;
}
.loader > i:nth-child(48) {
  --rz: 235deg;
  --delay: -1.3888888889s;
  --tx: 3.468em;
  --ty: 3.788em;
  --hue: 235;
}
.loader > i:nth-child(49) {
  --rz: 240deg;
  --delay: -1.3333333333s;
  --tx: 1.724em;
  --ty: 2.308em;
  --hue: 240;
}
.loader > i:nth-child(50) {
  --rz: 245deg;
  --delay: -1.2777777778s;
  --tx: 1.656em;
  --ty: 2.068em;
  --hue: 245;
}
.loader > i:nth-child(51) {
  --rz: 250deg;
  --delay: -1.2222222222s;
  --tx: 3.26em;
  --ty: 2.284em;
  --hue: 250;
}
.loader > i:nth-child(52) {
  --rz: 255deg;
  --delay: -1.1666666667s;
  --tx: 2.696em;
  --ty: 0.596em;
  --hue: 255;
}
.loader > i:nth-child(53) {
  --rz: 260deg;
  --delay: -1.1111111111s;
  --tx: 0.336em;
  --ty: 0.948em;
  --hue: 260;
}
.loader > i:nth-child(54) {
  --rz: 265deg;
  --delay: -1.0555555556s;
  --tx: 2.876em;
  --ty: 4.908em;
  --hue: 265;
}
.loader > i:nth-child(55) {
  --rz: 270deg;
  --delay: -1s;
  --tx: 1.308em;
  --ty: 4.676em;
  --hue: 270;
}
.loader > i:nth-child(56) {
  --rz: 275deg;
  --delay: -0.9444444444s;
  --tx: 2.092em;
  --ty: 1.268em;
  --hue: 275;
}
.loader > i:nth-child(57) {
  --rz: 280deg;
  --delay: -0.8888888889s;
  --tx: 1.952em;
  --ty: 4.732em;
  --hue: 280;
}
.loader > i:nth-child(58) {
  --rz: 285deg;
  --delay: -0.8333333333s;
  --tx: 0.712em;
  --ty: 4.508em;
  --hue: 285;
}
.loader > i:nth-child(59) {
  --rz: 290deg;
  --delay: -0.7777777778s;
  --tx: 1.008em;
  --ty: -2.348em;
  --hue: 290;
}
.loader > i:nth-child(60) {
  --rz: 295deg;
  --delay: -0.7222222222s;
  --tx: 1.264em;
  --ty: 4.452em;
  --hue: 295;
}
.loader > i:nth-child(61) {
  --rz: 300deg;
  --delay: -0.6666666667s;
  --tx: 2.48em;
  --ty: 0.436em;
  --hue: 300;
}
.loader > i:nth-child(62) {
  --rz: 305deg;
  --delay: -0.6111111111s;
  --tx: 1.256em;
  --ty: 0.044em;
  --hue: 305;
}
.loader > i:nth-child(63) {
  --rz: 310deg;
  --delay: -0.5555555556s;
  --tx: 2.468em;
  --ty: 3.836em;
  --hue: 310;
}
.loader > i:nth-child(64) {
  --rz: 315deg;
  --delay: -0.5s;
  --tx: 2.06em;
  --ty: -1.828em;
  --hue: 315;
}
.loader > i:nth-child(65) {
  --rz: 320deg;
  --delay: -0.4444444444s;
  --tx: 1.512em;
  --ty: 5.148em;
  --hue: 320;
}
.loader > i:nth-child(66) {
  --rz: 325deg;
  --delay: -0.3888888889s;
  --tx: 2.596em;
  --ty: 4.852em;
  --hue: 325;
}
.loader > i:nth-child(67) {
  --rz: 330deg;
  --delay: -0.3333333333s;
  --tx: 0.008em;
  --ty: 4.748em;
  --hue: 330;
}
.loader > i:nth-child(68) {
  --rz: 335deg;
  --delay: -0.2777777778s;
  --tx: 2.868em;
  --ty: 1.532em;
  --hue: 335;
}
.loader > i:nth-child(69) {
  --rz: 340deg;
  --delay: -0.2222222222s;
  --tx: 1.4em;
  --ty: 4.884em;
  --hue: 340;
}
.loader > i:nth-child(70) {
  --rz: 345deg;
  --delay: -0.1666666667s;
  --tx: 1.172em;
  --ty: 3.644em;
  --hue: 345;
}
.loader > i:nth-child(71) {
  --rz: 350deg;
  --delay: -0.1111111111s;
  --tx: 2.292em;
  --ty: 1.46em;
  --hue: 350;
}
.loader > i:nth-child(72) {
  --rz: 355deg;
  --delay: -0.0555555556s;
  --tx: 3.812em;
  --ty: 1.14em;
  --hue: 355;
}

@-webkit-keyframes purupuru {
  0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
  20%  { -webkit-transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  50%  { -webkit-transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  65%  { -webkit-transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  80%  { -webkit-transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
  100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@keyframes purupuru {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  20%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  50%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  65%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  80%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.popup {
  position: fixed;
  border: none;
  font-size: 0.3rem;
  padding: 1em 2em;
  border-radius: 3em;
  background-image: linear-gradient(to right, #197, #043);
  color: #fff;
  letter-spacing: 0.5em;
  display: inline-flex;
  cursor: none;
  margin: 1em;
}

.item-box {
  display: inline-flex;
  margin: 0.3em;
}
.item-inline {
  display: inline-block;
  cursor: pointer;
}
.img-head {
  overflow: visible;
  max-width: 8em;
}
.thumbnail {
  width: 8em;
  height: 8em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.thumbnail img {
  width: 8em;
  max-height: 8em;
  margin: 0.2em;
}
.img-preview {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(100vh - 3em);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
}
.img-preview img {
  position: relative;
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  top: 0;
  left: 0;
}
.img-control {
  position: absolute;
  text-align: right;
  right: 1em;
  bottom: 3em;
}
.item-image {
  width: calc(100vw - 1em);
}
.cache-image {
  position: fixed;
  top: -20em;
  width: 10em;
  height: 10em;
  overflow: auto;
}
.hide {
  display: none;
}
.chevron-control {
  font-size: 2em;
  width: calc(100vw - 1em);
  margin-bottom: 3em;
  display: flex;
  justify-content: space-between;
}
.tag-control {
  text-align: left;
  margin: 1em 0;
  padding: 1em 0;
}
.tag-control label {
  display: inline-block;
  background-color: rgba(55, 55, 0, 0.7);
  padding: 0.4em 0.8em;
  margin: 0.2em;
  border-radius: 1em;
  border: 1px solid #555;
}
.tag-control label:has(input:checked) {
  background-color: rgba(180, 180, 0, 0.4);
  border: 1px solid #833;
  color: #eee;
}

header.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 10px;
  justify-content: flex-end;
}