.dl-preview-page {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8e2d8;
  padding: 3em;
}
.doodle-loader {
  --dl-ink: #2d2826;
  --dl-paper: #f4efe3;
  --dl-card: #fdfaf3;
  --dl-purple: #7b5ea7;
  --dl-orange: #c85a28;
  --dl-green: #3d7a52;
  --dl-muted: #a89880;
  --dl-grid: #c4baa8;
  --dl-track: #e5ddd0;
  font-family: "Segoe Script", "Comic Sans MS", "Bradley Hand", cursive;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4.5em 5em;
  background-color: var(--dl-paper);
  background-image: radial-gradient(
    circle,
    var(--dl-grid) 1.5px,
    transparent 1.5px
  );
  background-size: 1.75em 1.75em;
  border-radius: 0.75em;
  cursor: default;
}
.dl-doodle {
  position: absolute;
  pointer-events: none;
}
.dl-d1 {
  top: 0.7em;
  left: 0.9em;
  width: 3em;
  height: 3em;
  animation: dl-float-a 3.5s ease-in-out infinite;
}
.dl-d2 {
  top: 0.5em;
  right: 1.1em;
  width: 2.4em;
  height: 2.4em;
  animation: dl-float-b 3s ease-in-out infinite 0.4s;
}
.dl-d3 {
  bottom: 0.9em;
  left: 1.1em;
  width: 2.1em;
  height: 3.2em;
  animation: dl-float-a 4s ease-in-out infinite 0.8s;
}
.dl-d4 {
  bottom: 0.7em;
  right: 1em;
  width: 2.75em;
  height: 2.5em;
  animation: dl-float-b 3.2s ease-in-out infinite 1s;
}
.dl-d5 {
  top: 3em;
  left: 0.6em;
  width: 3.4em;
  height: 3.4em;
  animation: dl-float-a 4.2s ease-in-out infinite 0.6s;
}
.dl-d6 {
  bottom: 2.4em;
  right: 0.4em;
  width: 5.6em;
  height: 1.5em;
  animation: dl-float-b 3.8s ease-in-out infinite 0.2s;
}
@keyframes dl-float-a {
  0%,
  100% {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(-0.8em) rotate(6deg);
  }
}
@keyframes dl-float-b {
  0%,
  100% {
    transform: translateY(0) rotate(6deg);
  }
  50% {
    transform: translateY(-0.7em) rotate(-8deg);
  }
}
.dl-card {
  position: relative;
  background: var(--dl-card);
  padding: 2.6em 3.6em 2.1em;
  border: 0.13em solid var(--dl-ink);
  border-radius: 0.2em 0.5em 0.3em 0.65em/0.45em 0.2em 0.6em 0.3em;
  box-shadow: 0.4em 0.4em 0 0 var(--dl-ink);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.doodle-loader:hover .dl-card {
  box-shadow: 0.52em 0.52em 0 0 var(--dl-ink);
  transform: translate(-0.06em, -0.06em);
}
.doodle-loader:active .dl-card {
  box-shadow: 0.15em 0.15em 0 0 var(--dl-ink);
  transform: translate(0.18em, 0.18em);
  transition:
    box-shadow 0.08s ease,
    transform 0.08s ease;
}
.dl-card::before {
  content: "";
  position: absolute;
  inset: 0.6em;
  border: 0.09em dashed var(--dl-grid);
  border-radius: 0.15em;
  pointer-events: none;
}
.dl-tape {
  position: absolute;
  top: -0.95em;
  left: 50%;
  transform: translateX(-50%) rotate(-1.8deg);
  width: 5.5em;
  height: 1.6em;
  background: rgba(168, 138, 224, 0.38);
  border-left: 1.5px solid rgba(130, 100, 200, 0.25);
  border-right: 1.5px solid rgba(130, 100, 200, 0.25);
  z-index: 3;
}
.dl-tape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 5px,
    rgba(255, 255, 255, 0.22) 5px 7px
  );
}
.dl-pencil {
  position: absolute;
  top: -2.1em;
  right: 2em;
  width: 1.9em;
  height: 2.3em;
  transform-origin: bottom center;
  animation: dl-write 2.4s ease-in-out infinite;
  z-index: 4;
}
@keyframes dl-write {
  0%,
  100% {
    transform: rotate(-18deg) translateY(0);
  }
  50% {
    transform: rotate(-4deg) translateY(0.5em);
  }
}
.dl-corner {
  position: absolute;
  width: 1.4em;
  height: 1.4em;
  pointer-events: none;
}
.dl-c-tl {
  top: 0.9em;
  left: 0.9em;
}
.dl-c-tr {
  top: 0.9em;
  right: 0.9em;
  transform: scaleX(-1);
}
.dl-c-bl {
  bottom: 0.9em;
  left: 0.9em;
  transform: scaleY(-1);
}
.dl-c-br {
  bottom: 0.9em;
  right: 0.9em;
  transform: scale(-1);
}
.dl-row {
  display: flex;
  align-items: center;
  gap: 0.35em;
}
.dl-prefix {
  font-size: 2.4em;
  font-weight: 600;
  color: var(--dl-ink);
}
.dl-words {
  height: 2.4em;
  overflow: hidden;
  position: relative;
}
.dl-words::before,
.dl-words::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  z-index: 5;
  pointer-events: none;
}
.dl-words::before {
  top: 0;
  background: linear-gradient(var(--dl-card), transparent);
}
.dl-words::after {
  bottom: 0;
  background: linear-gradient(transparent, var(--dl-card));
}
.dl-word {
  display: block;
  height: 100%;
  font-size: 2.4em;
  line-height: 1;
  font-weight: 700;
  color: var(--dl-purple);
  padding-left: 0.22em;
  animation: dl-cycle 4s infinite;
  position: relative;
}
.dl-word::after {
  content: "";
  position: absolute;
  bottom: 0.08em;
  left: 0.22em;
  right: 0;
  height: 0.18em;
  transform-origin: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='18' height='4'%3E%3Cpath d='M0 2 C2 0,4 4,6 2 C8 0,10 4,12 2 C14 0,16 4,18 2' stroke='%237B5EA7' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: auto 100%;
  animation: dl-underline 4s infinite;
}
@keyframes dl-underline {
  0%,
  14% {
    opacity: 0;
    transform: scaleX(0);
  }
  24%,
  88% {
    opacity: 1;
    transform: scaleX(1);
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes dl-cycle {
  10% {
    transform: translateY(-102%);
  }
  25% {
    transform: translateY(-100%);
  }
  35% {
    transform: translateY(-202%);
  }
  50% {
    transform: translateY(-200%);
  }
  60% {
    transform: translateY(-302%);
  }
  75% {
    transform: translateY(-300%);
  }
  85% {
    transform: translateY(-402%);
  }
  100% {
    transform: translateY(-400%);
  }
}
.dl-sub {
  font-size: 1.1em;
  color: var(--dl-muted);
  text-align: center;
  margin-top: 0.45em;
  animation: dl-blink 2.2s ease-in-out infinite;
}
@keyframes dl-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.dl-track {
  height: 0.58em;
  background: var(--dl-track);
  border: 0.09em solid var(--dl-ink);
  border-radius: 1em;
  overflow: hidden;
  margin-top: 1.25em;
}
.dl-fill {
  height: 100%;
  width: 30%;
  background: var(--dl-purple);
  border-radius: 1em;
  animation: dl-sweep 2.6s ease-in-out infinite;
}
@keyframes dl-sweep {
  0% {
    width: 15%;
    transform: translateX(-120%);
  }
  45% {
    width: 55%;
  }
  55% {
    width: 55%;
  }
  100% {
    width: 15%;
    transform: translateX(750%);
  }
}
.dl-dots {
  display: flex;
  justify-content: center;
  gap: 0.75em;
  margin-top: 1.2em;
}
.dl-dot {
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: var(--dl-ink);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
  animation: dl-bounce 1.4s ease-in-out infinite;
}
.dl-dot:nth-child(2) {
  animation-delay: 0.16s;
}
.dl-dot:nth-child(3) {
  animation-delay: 0.32s;
}
.dl-dot:hover {
  background: var(--dl-purple);
  transform: scale(1.6) !important;
}
.dl-dot:focus-visible {
  outline: 0.15em solid var(--dl-purple);
  outline-offset: 0.2em;
}
@keyframes dl-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    background: var(--dl-ink);
  }
  30% {
    transform: translateY(-1em);
    background: var(--dl-purple);
  }
}

.doodle-loader {
  font-size: 9px;
  padding: 2.2em 2.6em;
  transform: scale(2.1);
  transform-origin: center;
}

.dl-card {
  padding: 2em 2.7em 1.6em;
}

.dl-prefix,
.dl-word {
  font-size: 2em;
}

.dl-words {
  height: 2em;
}

.dl-sub {
  font-size: 0.95em;
}

.dl-d1,
.dl-d2,
.dl-d3,
.dl-d4,
.dl-d5,
.dl-d6 {
  transform: scale(0.75);
}

.dl-pencil {
  transform: scale(0.75);
}

.dl-track {
  margin-top: 0.9em;
}

.dl-dots {
  margin-top: 0.9em;
}