.loader {
  --dur:2s;
  --hue:195;
  color:#24B0E9;
  display:block;
  height:56px;
  width:56px;
  filter:drop-shadow(0 14px 22px rgba(36,176,233,.22));
}

.loader--danger {
  --hue:6;
  color:#FF6B6B;
}

.loader__motion-thick,
.loader__motion-medium,
.loader__motion-thin,
.loader__model,
.loader__sand-drop,
.loader__sand-fill,
.loader__sand-grain-left,
.loader__sand-grain-right,
.loader__sand-line-left,
.loader__sand-line-right,
.loader__sand-mound-top,
.loader__sand-mound-bottom,
.loader__glare-top,
.loader__glare-bottom {
  animation-duration:var(--dur);
  animation-iteration-count:infinite;
  animation-timing-function:cubic-bezier(.83,0,.17,1);
}

.loader__motion-thick { animation-name:loader-motion-thick; stroke:hsl(var(--hue),88%,54%); }
.loader__motion-medium { animation-name:loader-motion-medium; stroke:hsl(var(--hue),84%,64%); }
.loader__motion-thin { animation-name:loader-motion-thin; stroke:hsl(var(--hue),72%,73%); }
.loader__model { animation-name:loader-flip; transform-origin:12.25px 16.75px; }
.glass-body { fill:rgba(255,255,255,.28); stroke:hsl(var(--hue),78%,70%); stroke-width:1.6; }
.frame-main { fill:hsl(var(--hue),84%,47%); }
.frame-highlight { fill:rgba(255,255,255,.58); }
.loader__sand-grain-left,
.loader__sand-grain-right,
.loader__sand-drop,
.loader__sand-fill,
.loader__sand-line-left,
.loader__sand-line-right,
.sand-mound { stroke:#65D26B; fill:#65D26B; }
.loader__sand-grain-left { animation-name:sand-grain-left; }
.loader__sand-grain-right { animation-name:sand-grain-right; }
.loader__sand-drop { animation-name:sand-drop; }
.loader__sand-fill { animation-name:sand-fill; }
.loader__sand-line-left { animation-name:sand-line-left; }
.loader__sand-line-right { animation-name:sand-line-right; }
.loader__sand-mound-top { animation-name:sand-mound-top; }
.loader__sand-mound-bottom { animation-name:sand-mound-bottom; }
.loader__glare-top,
.loader__glare-bottom { animation-name:glare; stroke:rgba(255,255,255,.74); }

@keyframes loader-flip {
  0%,45% { transform:rotate(0deg); }
  55%,95% { transform:rotate(180deg); }
  100% { transform:rotate(360deg); }
}

@keyframes loader-motion-thick {
  0% { stroke-dashoffset:153.94; transform:rotate(0deg); }
  30% { stroke-dashoffset:0; transform:rotate(18deg); }
  55% { stroke-dashoffset:153.94; transform:rotate(190deg); }
  100% { stroke-dashoffset:153.94; transform:rotate(360deg); }
}

@keyframes loader-motion-medium {
  0%,8% { stroke-dashoffset:153.94; transform:rotate(0deg); }
  35% { stroke-dashoffset:0; transform:rotate(42deg); }
  60% { stroke-dashoffset:153.94; transform:rotate(214deg); }
  100% { stroke-dashoffset:153.94; transform:rotate(360deg); }
}

@keyframes loader-motion-thin {
  0%,16% { stroke-dashoffset:153.94; transform:rotate(0deg); }
  42% { stroke-dashoffset:0; transform:rotate(66deg); }
  68% { stroke-dashoffset:153.94; transform:rotate(238deg); }
  100% { stroke-dashoffset:153.94; transform:rotate(360deg); }
}

@keyframes sand-drop {
  0%,12% { stroke-dashoffset:0; opacity:0; }
  16%,44% { opacity:1; }
  55%,100% { stroke-dashoffset:-108; opacity:0; }
}

@keyframes sand-fill {
  0%,12% { stroke-dashoffset:54; }
  45%,50% { stroke-dashoffset:0; }
  55%,100% { stroke-dashoffset:-54; }
}

@keyframes sand-line-left {
  0%,12% { stroke-dashoffset:1; opacity:0; }
  18%,46% { opacity:1; }
  55%,100% { stroke-dashoffset:-107; opacity:0; }
}

@keyframes sand-line-right {
  0%,18% { stroke-dashoffset:12; opacity:0; }
  24%,48% { opacity:1; }
  55%,100% { stroke-dashoffset:-96; opacity:0; }
}

@keyframes sand-grain-left {
  0%,22% { stroke-dashoffset:0; opacity:0; }
  26%,42% { opacity:1; }
  50%,100% { stroke-dashoffset:-34; opacity:0; }
}

@keyframes sand-grain-right {
  0%,28% { stroke-dashoffset:0; opacity:0; }
  32%,46% { opacity:1; }
  54%,100% { stroke-dashoffset:-34; opacity:0; }
}

@keyframes sand-mound-top {
  0%,10% { transform:translateY(0); }
  46%,100% { transform:translateY(13px); }
}

@keyframes sand-mound-bottom {
  0%,12% { transform:translateY(13px); }
  46%,100% { transform:translateY(0); }
}

@keyframes glare {
  0%,12% { opacity:.35; }
  45% { opacity:.78; }
  55%,100% { opacity:.35; }
}

.pv-hourglass.loader {
  height:72px !important;
  width:72px !important;
  filter:drop-shadow(0 18px 26px rgba(36,176,233,.28));
}

.pv-hourglass.loader::before,
.pv-hourglass.loader::after {
  content:none !important;
}

.book,
.book__pg-shadow,
.book__pg {
  animation:cover 5s ease-in-out infinite;
}

.book {
  background-color:#24B0E9;
  border-radius:.25em;
  box-shadow:0 .25em .5em rgba(10,21,37,.20),0 0 0 .12em rgba(101,210,107,.55) inset;
  height:6em;
  perspective:36em;
  position:relative;
  transform:translate3d(0,0,0);
  transform-style:preserve-3d;
  width:4.5em;
}

.book::before {
  animation:bookGlow 2.5s ease-in-out infinite;
  background:radial-gradient(circle,rgba(74,198,245,.28),transparent 62%);
  border-radius:50%;
  content:"";
  inset:-1.1em;
  position:absolute;
  z-index:-1;
}

.book__pg-shadow,
.book__pg {
  height:5.5em;
  left:.25em;
  position:absolute;
  top:.25em;
  transform-origin:100% 50%;
  width:calc(50% - .25em);
}

.book__pg-shadow {
  animation-name:shadow;
  background-image:linear-gradient(-45deg,rgba(10,21,37,.22) 50%,rgba(10,21,37,0) 50%);
  filter:blur(.25em);
}

.book__pg {
  animation-name:pg1;
  background-color:hsl(200,45%,98%);
  background-image:linear-gradient(90deg,rgba(10,21,37,.08) 0 .125em,rgba(10,21,37,0) .125em);
  transform-style:preserve-3d;
}

.book__pg--2,
.book__pg--3,
.book__pg--4 {
  background-image:repeating-linear-gradient(hsl(202,61%,17%) 0 .125em,hsla(202,61%,17%,0) .125em .5em),linear-gradient(90deg,rgba(10,21,37,.08) 0 .125em,rgba(10,21,37,0) .125em);
  background-position:center;
  background-size:2.5em 4.125em,100% 100%;
}

.book__pg--2 { animation-name:pg2; }
.book__pg--3 { animation-name:pg3; }
.book__pg--4 { animation-name:pg4; }
.book__pg--5 { animation-name:pg5; }
.book--small { font-size:12px; }
.book--large { font-size:19px; }

.pv-book-loader {
  display:grid !important;
  height:auto !important;
  margin:0 auto 12px !important;
  place-items:center;
  width:auto !important;
  background:none !important;
  box-shadow:none !important;
  animation:none !important;
}

.app-loader .loader-card::before { display:none !important; }

@keyframes bookGlow {
  0%,100% { transform:scale(.94); opacity:.52; }
  50% { transform:scale(1.08); opacity:.86; }
}

@keyframes cover {
  0%,45%,55%,100% { animation-timing-function:ease-out; transform:rotateY(0); }
  50% { animation-timing-function:ease-in; transform:rotateY(180deg); }
}

@keyframes shadow {
  0%,100% { transform:scaleX(1); }
  50% { transform:scaleX(.2); }
}

@keyframes pg1 {
  0%,100% { transform:rotateY(0); }
  50% { transform:rotateY(-180deg); }
}

@keyframes pg2 {
  0%,10%,100% { transform:rotateY(0); }
  50%,60% { transform:rotateY(-180deg); }
}

@keyframes pg3 {
  0%,20%,100% { transform:rotateY(0); }
  50%,70% { transform:rotateY(-180deg); }
}

@keyframes pg4 {
  0%,30%,100% { transform:rotateY(0); }
  50%,80% { transform:rotateY(-180deg); }
}

@keyframes pg5 {
  0%,40%,100% { transform:rotateY(0); }
  50%,90% { transform:rotateY(-180deg); }
}

.pencil {
  display:block;
  width:10em;
  height:10em;
}

.pv-pencil-loader {
  display:grid !important;
  height:auto !important;
  place-items:center;
  width:auto !important;
}

.pv-pencil-loader::before { content:none !important; }

.pencil__body1,
.pencil__body2,
.pencil__body3,
.pencil__eraser,
.pencil__eraser-skew,
.pencil__point,
.pencil__rotate,
.pencil__stroke {
  animation-duration:3s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

.pencil__body1,
.pencil__body2,
.pencil__body3 { transform:rotate(-90deg); }
.pencil__body1 { animation-name:pencilBody1; }
.pencil__body2 { animation-name:pencilBody2; }
.pencil__body3 { animation-name:pencilBody3; }
.pencil__eraser { animation-name:pencilEraser; transform:rotate(-90deg) translate(49px,0); }
.pencil__eraser-skew { animation-name:pencilEraserSkew; animation-timing-function:ease-in-out; }
.pencil__point { animation-name:pencilPoint; transform:rotate(-90deg) translate(49px,-30px); }
.pencil__rotate { animation-name:pencilRotate; }
.pencil__stroke { animation-name:pencilStroke; transform:translate(100px,100px) rotate(-113deg); }

@keyframes pencilBody1 {
  from,to { stroke-dashoffset:351.86; transform:rotate(-90deg); }
  50% { stroke-dashoffset:150.8; transform:rotate(-225deg); }
}

@keyframes pencilBody2 {
  from,to { stroke-dashoffset:406.84; transform:rotate(-90deg); }
  50% { stroke-dashoffset:174.36; transform:rotate(-225deg); }
}

@keyframes pencilBody3 {
  from,to { stroke-dashoffset:296.88; transform:rotate(-90deg); }
  50% { stroke-dashoffset:127.23; transform:rotate(-225deg); }
}

@keyframes pencilEraser {
  from,to { transform:rotate(-45deg) translate(49px,0); }
  50% { transform:rotate(0deg) translate(49px,0); }
}

@keyframes pencilEraserSkew {
  from,32.5%,67.5%,to { transform:skewX(0); }
  35%,65% { transform:skewX(-4deg); }
  37.5%,62.5% { transform:skewX(8deg); }
  40%,45%,50%,55%,60% { transform:skewX(-15deg); }
  42.5%,47.5%,52.5%,57.5% { transform:skewX(15deg); }
}

@keyframes pencilPoint {
  from,to { transform:rotate(-90deg) translate(49px,-30px); }
  50% { transform:rotate(-225deg) translate(49px,-30px); }
}

@keyframes pencilRotate {
  from { transform:translate(100px,100px) rotate(0); }
  to { transform:translate(100px,100px) rotate(720deg); }
}

@keyframes pencilStroke {
  from { stroke-dashoffset:439.82; transform:translate(100px,100px) rotate(-113deg); }
  50% { stroke-dashoffset:164.93; transform:translate(100px,100px) rotate(-113deg); }
  75%,to { stroke-dashoffset:439.82; transform:translate(100px,100px) rotate(112deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader *,
  .book,
  .book::before,
  .book__pg-shadow,
  .book__pg,
  .pencil,
  .pencil * {
    animation:none !important;
  }
}