@-webkit-keyframes fadeout {
from {
    opacity: 1;
}
to {
    opacity: 0;
}
}
@keyframes fadeout {
from {
    opacity: 1;
}
to {
    opacity: 0;
}
}
@-webkit-keyframes fadein {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
@keyframes fadein {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
.scape {
  height: 216px;
  width: 648px;
  background-color: black;

  position: relative;
  z-index: 10;
}
.scape > canvas {
    position: absolute;
    border-top: var(--border);
    border-bottom: var(--border);
    overflow: hidden;
}
.scape > canvas:focus {
      outline: none;
}
.scape > canvas.fade-in {
    -webkit-animation: fadein 0.5s forwards;
            animation: fadein 0.5s forwards;
}
.scape > canvas.fade-out {
    z-index: 1000;
    -webkit-animation: fadeout 0.5s forwards;
            animation: fadeout 0.5s forwards;
}
@media (min-width: 648px) {
.scape {
    border-radius: var(--border-radius)
}
.scape > canvas:first-child {
      border: var(--border);
      border-radius: var(--border-radius);
}
}
.simple .scape {
  border-radius: 0;
}
.simple .scape > canvas:first-child {
    border: none;
    border-radius: 0;
    overflow: hidden;
}
.simple .scape > canvas:first-child:focus {
      outline: none;
}

.legend {
  position: absolute;
  top: 100%;
  top: calc(100% - var(--border-radius));
  width: 100%;
  padding: calc(var(--size-1) + var(--border-radius)) var(--size-2) var(--size-1);
  background-color: var(--gray-800);
  color: white;
  border-bottom: var(--border);
  text-align: center;
  transition: all var(--speed) ease;
  height: var(--legend-height);
  cursor: default;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.legend.animation-fade * {
    -webkit-animation: fade;
            animation: fade;
    -webkit-animation-duration: 4s;
            animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}
.legend p {
    margin: 0 0 var(--size-1);
    white-space: nowrap;
}
@media (min-width: 648px) {
.legend {
    border: var(--border);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius)
}
}
@-webkit-keyframes fade {
0% {
    opacity: 1;
}
60% {
    opacity: 1;
}
80% {
    opacity: 0.3;
}
100% {
    opacity: 1;
}
}
@keyframes fade {
0% {
    opacity: 1;
}
60% {
    opacity: 1;
}
80% {
    opacity: 0.3;
}
100% {
    opacity: 1;
}
}
.appear-enter-from,
.appear-leave-to {
  padding-top: -100%;
  top: calc(100% - var(--border-radius) - var(--legend-height));
  z-index: -1;
}

div[data-v-07bb2e5e] {
  color: black;
}
h1[data-v-07bb2e5e] {
  text-align: left;
  width: 100%;
}
p small[data-v-07bb2e5e] {
    display: block;
}
nav[data-v-07bb2e5e] {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}
button[data-v-07bb2e5e] {
  cursor: pointer;
  padding: 0.5rem 1rem;
}
.track[data-v-07bb2e5e] {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (min-width: 648px) {
.track[data-v-07bb2e5e] {
    width: 648px
}
}

div[data-v-750ba264] {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  margin: auto auto var(--size-2);
  gap: var(--size-2);
  transform: scale(var(--scape-ratio));
  transform-origin: center bottom;
}

.scape-wrapper {
  position: relative;
  touch-action: none;
}
.scape-wrapper.autoscale {
  transform-origin: center;
  transform: scale(var(--scape-ratio));
}
.scape-wrapper.chapter-switch img {
    height: 216px;
    width: 648px;
    display: block;
    -ms-interpolation-mode: nearest-neighbor;
        image-rendering: -moz-crisp-edges;
        image-rendering: pixelated;
    background-color: black;
}
.scape-wrapper:not(.simple) {
  margin-bottom: var(--legend-height);
}
.scape-wrapper:not(.simple) img {
    border-top: var(--border);
    border-bottom: var(--border);
}
@media (min-width: 648px) {
.scape-wrapper:not(.simple) img {
      border-radius: var(--border-radius);
      border: var(--border)
}
}