@import "https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.min.css";
@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&display=swap";
:root {
  font-size: 10px;
}
body {
  background-image:
    linear-gradient(90deg, rgb(230 245 255 / 0.5) 0.1rem, transparent 0.1rem),
    linear-gradient(180deg, rgb(230 245 255 / 0.5) 0.1rem, transparent 0.1rem);
  background-size: 0.8rem 0.8rem;
  font:
    1.6rem / 1.5 Inter,
    "Noto Sans JP",
    sans-serif;
  font-feature-settings: "palt";
  padding: 3.2rem;
}
[data-splitter] {
  font-size: 2.4rem;
  &:not(.is-animate) {
    visibility: hidden;
  }
}
[data-char] {
  opacity: 0;
  transition-delay: calc(var(--char-index) / var(--char-count) * 3s);
  transition-duration: 0.3s;
  transition-property: opacity, transform;
  transform: translateY(1em) scale(0.8);
  .is-animate & {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
a {
  transition: 0.3s opacity;
  &,
  * {
    text-decoration: underline;
  }
  * {
    display: inline-block;
  }
  &:hover {
    opacity: 0.5;
  }
}

#cleanup {
  background-color: rgb(255 0 0 / 0.2);
  border-radius: 0.4rem;
  color: #e00;
  padding: 1.6rem;
}