.cuboid {
  width: 100%;
  height: 100%;
  position: relative;
}
.cuboid__side:nth-of-type(1) {
  height: calc(var(--thickness) * 1vmin);
  width: 100%;
  position: absolute;
  top: 0;
  transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
  width: 100%;
  height: calc(var(--thickness) * 1vmin);
  position: absolute;
  bottom: 0;
  transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
  position: absolute;
  top: 0;
  left: 0;
}
.cuboid__side:nth-of-type(6) {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
}
*,
*:after,
*:before {
  box-sizing: border-box;
  transform-style: preserve-3d;
  touch-action: none;
}
:root {
  --base-size: 10;
  --depth: calc(var(--base-size) * 2.25);
  --height: calc(var(--base-size) * 1vmin);
  --width: calc(var(--base-size) * 1.4vmin);
  --rotate-x: -10;
  --rotate-y: +20;
  --base-hue: 200;
  --accent-hue: 35;
  --bg: hsl(190 20% 58%);
  --shoot-speed: 1.5;
  --load-speed: 2;
  --print-speed: 1;
  --p-1: hsl(var(--base-hue), 50%, 94%);
  --p-2: hsl(var(--base-hue), 50%, 90%);
  --p-3: hsl(var(--base-hue), 50%, 84%);
  --p-4: hsl(var(--base-hue), 50%, 80%);
  --p-5: hsl(var(--base-hue), 50%, 76%);
  --p-6: hsl(var(--base-hue), 50%, 72%);
  --p-7: hsl(var(--base-hue), 50%, 68%);
  --p-8: hsl(var(--base-hue), 50%, 20%);
  --t-1: #666;
  --t-2: #5c5c5c;
  --t-3: #525252;
  --t-4: #474747;
  --t-5: #3d3d3d;
  --g-1: hsl(var(--base-hue), 40%, 94%);
  --g-2: hsl(var(--base-hue), 40%, 90%);
  --g-3: hsl(var(--base-hue), 40%, 86%);
  --g-4: hsl(var(--base-hue), 40%, 80%);
  --g-5: hsl(var(--base-hue), 40%, 96%);
  --a-1: hsl(var(--accent-hue), 70%, 65%);
  --a-2: hsl(var(--accent-hue), 70%, 60%);
  --a-3: hsl(var(--accent-hue), 70%, 55%);
  --a-4: hsl(var(--accent-hue), 70%, 50%);
  --a-5: hsl(var(--accent-hue), 70%, 45%);
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: transparent;
  overflow: hidden;
  touch-action: none;
}
body.embed-service-card {
  --base-size: 24;
  --rotate-x: -8;
  --rotate-y: +18;
  --p-1: #c98a84;
  --p-2: #bb736d;
  --p-3: #a85a55;
  --p-4: #964844;
  --p-5: #893c39;
  --p-6: #7a3230;
  --p-7: #6a2928;
  --p-8: #471717;
}
.light {
  height: calc(var(--height) * 0.1);
  width: calc(var(--height) * 0.1);
  position: absolute;
  left: 50%;
  top: 20%;
  border-radius: 0%;
  border: calc(var(--height) * 0.01) solid var(--p-8);
}
.standby-light {
  background: #a3ccf5;
  transform: translate(-50%, 0) translate(100%, 0);
}
.progress-light {
  transform: translate(-50%, 0) translate(-100%, 0);
  background: hsla(var(--progress-hue, 103), 80%, 70%);
}
.scene {
  position: fixed;
  top: 50%;
  left: 50%;
  height: var(--height);
  width: var(--width);
  transform: translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(44deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg));
}
.printing {
  --progress-hue: 14;
}
.printer {
  height: 100%;
  width: 100%;
}
.printer > * {
  position: absolute;
}
.printer__top {
  height: 40%;
  width: 100%;
}
.printer__back {
  height: 60%;
  width: 50%;
  bottom: 0;
  right: 0;
}
.printer__side {
  height: 60%;
  width: 100%;
  bottom: 0;
}
.printer__side--right {
  transform: translate3d(0, 0, calc(var(--depth) * 0.375vmin));
}
.printer__side--left {
  transform: translate3d(0, 0, calc(var(--depth) * -0.375vmin));
}
.printer__tray {
  height: 10%;
  width: 100%;
}
.printer__tray--bottom {
  bottom: 0;
  right: 50%;
}
.printer__tray--top {
  top: 0;
  right: 0;
  transform: translate(52%, 0) rotate(-75deg);
}
.paper-stack {
  width: 90%;
  bottom: 0;
  left: -10%;
  transform: translate3d(0, 0, calc(var(--depth) * 1vmin));
}
.paper-stack--bottom {
  height: 10%;
}
.paper-stack--top {
  height: 5%;
  bottom: 10%;
  transform: translate3d(0, 0, calc(var(--depth) * 1vmin)) rotateY(22deg);
}
.printed {
  right: 55%;
  width: calc(var(--width) * 0.9);
  height: calc(var(--depth) * 0.4vmin);
  bottom: 10%;
  transform: translate3d(0, -1px, 0);
}
.printed__spinner {
  width: calc(var(--width) * 0.9);
  height: calc(var(--depth) * 0.4vmin);
  transform-origin: 50% 0;
}
.printed__paper {
  width: calc(var(--width) * 0.9);
  height: calc(var(--depth) * 0.4vmin);
  bottom: 0;
  transform: translate(0, 50%) rotateX(90deg);
  -webkit-clip-path: inset(0 -20% 0 0);
          clip-path: inset(0 -20% 0 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.printed__paper-back {
  width: calc(var(--width) * 0.9);
  height: calc(var(--depth) * 0.4vmin);
  bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 50%) rotateX(90deg) rotateY(180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: var(--g-2);
}
.printed__papiere {
  background: var(--g-1);
  position: absolute;
  height: 100%;
  width: 100%;
  transform: translate(120%, 0);
}
.paper-preview {
  height: 82%;
  width: 82%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  overflow: visible;
}
.paper-preview__previews {
  height: 100%;
  width: 100%;
  opacity: 1;
  position: relative;
  overflow: visible;
}
.paper-preview__previews img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%) scale(1.25);
  overflow: visible;
}
.paper-stack--top .cuboid--paper > div:nth-of-type(1) {
  background: var(--g-1);
}
.paper-stack--top .cuboid--paper > div:nth-of-type(2) {
  background: var(--g-1);
}
.paper-stack--top .cuboid--paper > div:nth-of-type(3) {
  background: var(--g-4);
}
.paper-stack--top .cuboid--paper > div:nth-of-type(4) {
  background: var(--g-2);
}
.paper-stack--top .cuboid--paper > div:nth-of-type(5) {
  background: var(--g-3);
}
.paper-stack--top .cuboid--paper > div:nth-of-type(6) {
  background: var(--g-3);
}
.paper-stack--top .cuboid--paper .paper {
  height: 100%;
  width: 100%;
  background: transparent;
}
.paper-stack--top .cuboid--paper .paper__flyer {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: transparent;
  overflow: hidden;
}
.paper-stack--top .cuboid--paper .paper__flyer:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: var(--g-1);
}
.printing .paper-stack--top .cuboid--paper .paper {
  -webkit-animation: transfer calc(var(--load-speed) * 0.5s) ease-in-out forwards;
          animation: transfer calc(var(--load-speed) * 0.5s) ease-in-out forwards;
}
.printing .paper-stack--top .cuboid--paper .paper__flyer {
  -webkit-animation: fly calc(var(--load-speed) * 0.5s) ease-in-out forwards;
          animation: fly calc(var(--load-speed) * 0.5s) ease-in-out forwards;
}
.printing .paper-stack--top .cuboid--paper .paper__flyer:after {
  -webkit-animation: feed calc(var(--load-speed) * 0.5s) calc(var(--load-speed) * 0.5s) forwards;
          animation: feed calc(var(--load-speed) * 0.5s) calc(var(--load-speed) * 0.5s) forwards;
}
.printing .printed {
  -webkit-animation: shoot calc(var(--shoot-speed) * 1s) calc(((var(--load-speed) * 0.75) + var(--print-speed)) * 1s) ease-out;
          animation: shoot calc(var(--shoot-speed) * 1s) calc(((var(--load-speed) * 0.75) + var(--print-speed)) * 1s) ease-out;
}
.printing .printed__spinner {
  -webkit-animation: eject calc(var(--shoot-speed) * 1s) calc(((var(--load-speed) * 0.75) + var(--print-speed)) * 1s) ease-out;
          animation: eject calc(var(--shoot-speed) * 1s) calc(((var(--load-speed) * 0.75) + var(--print-speed)) * 1s) ease-out;
}
.printing .printed__paper,
.printing .printed__paper-back {
  -webkit-animation: fade-sheet calc(var(--shoot-speed) * 1s) calc(((var(--load-speed) * 0.75) + var(--print-speed)) * 1s) both;
          animation: fade-sheet calc(var(--shoot-speed) * 1s) calc(((var(--load-speed) * 0.75) + var(--print-speed)) * 1s) both;
}
.printing .printed__papiere {
  -webkit-animation: print calc(var(--print-speed) * 1s) calc(var(--load-speed) * 0.75s) both linear;
          animation: print calc(var(--print-speed) * 1s) calc(var(--load-speed) * 0.75s) both linear;
}
.cuboid--paper {
  --thickness: calc(var(--depth) * 0.4);
}
.cuboid--paper div:nth-of-type(1) {
  background: var(--g-2);
}
.cuboid--paper div:nth-of-type(2) {
  background: var(--g-2);
}
.cuboid--paper div:nth-of-type(3) {
  background: var(--g-5);
}
.cuboid--paper div:nth-of-type(4) {
  background: var(--g-3);
}
.cuboid--paper div:nth-of-type(5) {
  background: var(--g-4);
}
.cuboid--paper div:nth-of-type(6) {
  background: var(--g-4);
}
.print-button {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 44px;
  width: 44px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: 0;
  padding: 0;
  margin: 0;
  outline: transparent;
  cursor: pointer;
}
.button {
  height: calc(var(--height) * 0.14);
  width: calc(var(--height) * 0.14);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.print-button:active .button {
  transform: translate3d(-50%, -50%, calc(var(--height) * 0.05));
}
.printing .button {
  transform: translate3d(-50%, -50%, calc(var(--height) * 0.05));
}
.cuboid--button {
  --thickness: calc(var(--base-size) * 0.12);
}
body.embed-service-card .cuboid--button {
  --thickness: calc(var(--base-size) * 0.07);
}
.cuboid--button div:nth-of-type(1) {
  background: var(--a-1);
}
.cuboid--button div:nth-of-type(2) {
  background: var(--a-1);
}
.cuboid--button div:nth-of-type(3) {
  background: var(--a-4);
}
.cuboid--button div:nth-of-type(4) {
  background: var(--a-5);
}
.cuboid--button div:nth-of-type(5) {
  background: var(--a-3);
}
.cuboid--button div:nth-of-type(6) {
  background: var(--a-3);
}
.printing .screen__previews,
.printing .paper-preview__previews {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  opacity: 1;
}
.screen {
  height: calc(var(--height) * 0.25);
  width: calc(var(--height) * 0.35);
  left: 0;
  top: 50%;
  background: #b6e1f7;
  position: absolute;
  transform: translate3d(28%, -50%, -1px);
  outline: calc(var(--height) * 0.01) solid var(--p-8);
}
.screen__preview {
  height: 84%;
  width: calc(var(--height) * 0.3);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.8) rotateY(180deg) translate3d(0, 0, 1px);
  overflow: visible;
}
.screen__previews {
  height: 100%;
  width: 100%;
  opacity: 1;
  position: relative;
  overflow: visible;
}
.screen__previews img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 86.4%;
  max-height: 86.4%;
  transform: translate(-50%, -50%) scale(1.15);
}
.cuboid--top {
  --thickness: var(--depth);
}
.cuboid--top > div:nth-of-type(1) {
  background: linear-gradient(#000, #000) 100% 50%/14% 54% no-repeat, linear-gradient(var(--p-7), var(--p-7)) 40% 50%/12% 32% no-repeat, linear-gradient(var(--p-7), var(--p-7)) 30% 50%/2% 12% no-repeat, linear-gradient(var(--p-3), var(--p-3)) 0% 50%/66% 50% no-repeat;
  background-color: var(--p-1);
}
.cuboid--top > div:nth-of-type(1):after {
  content: '';
  position: absolute;
  top: 7%;
  left: 10%;
  height: calc(var(--depth) * 0.12vmin);
  width: calc(var(--depth) * 0.12vmin);
  background: url("./assets/A.svg") center/contain no-repeat;
  transform: rotate(90deg);
  filter: grayscale(0.5);
}
.cuboid--top > div:nth-of-type(2) {
  background: var(--p-1);
}
.cuboid--top > div:nth-of-type(3) {
  background: var(--p-8);
}
.cuboid--top > div:nth-of-type(4) {
  background: linear-gradient(var(--p-4), var(--p-4)) 50% 0%/50% 100% no-repeat;
  background-color: var(--p-2);
}
.cuboid--top > div:nth-of-type(4):after {
  content: '';
  position: absolute;
  top: 25%;
  left: 50%;
  height: 15%;
  width: 10%;
  border-radius: 25%;
  background: var(--p-6);
  transform: translate3d(-50%, -50%, -1px);
}
.cuboid--top > div:nth-of-type(5) {
  background: var(--p-3);
}
.cuboid--top > div:nth-of-type(6) {
  background: var(--p-3);
}
.cuboid--back {
  --thickness: calc(var(--depth) * 0.5);
}
.cuboid--back div:nth-of-type(1) {
  background: var(--p-1);
}
.cuboid--back div:nth-of-type(2) {
  background: var(--t-1);
}
.cuboid--back div:nth-of-type(3) {
  background: var(--p-2);
}
.cuboid--back div:nth-of-type(4) {
  background: var(--t-5);
}
.cuboid--back div:nth-of-type(5) {
  background: var(--p-3);
}
.cuboid--back div:nth-of-type(6) {
  background: var(--p-3);
}
.printer__tray--top .cuboid--tray div:nth-of-type(1) {
  background: linear-gradient(var(--t-2), var(--t-2)) 90% 50%/5% 50% no-repeat;
  background-color: var(--t-1);
}
.cuboid--tray {
  --thickness: calc(var(--depth) * 0.5);
}
.cuboid--tray div:nth-of-type(1) {
  background: linear-gradient(var(--t-2), var(--t-2)) 10% 50%/5% 50% no-repeat;
  background-color: var(--t-1);
}
.cuboid--tray div:nth-of-type(2) {
  background: var(--t-1);
}
.cuboid--tray div:nth-of-type(3) {
  background: var(--t-2);
}
.cuboid--tray div:nth-of-type(4) {
  background: var(--t-2);
}
.cuboid--tray div:nth-of-type(5) {
  background: var(--t-3);
}
.cuboid--tray div:nth-of-type(6) {
  background: var(--t-3);
}
.cuboid--side {
  --thickness: calc(var(--depth) * 0.25);
}
.cuboid--side > div:nth-of-type(1) {
  background: var(--p-1);
}
.cuboid--side > div:nth-of-type(2) {
  background: var(--p-1);
}
.cuboid--side > div:nth-of-type(3) {
  background: var(--p-2);
}
.cuboid--side > div:nth-of-type(4) {
  background: var(--p-2);
}
.cuboid--side > div:nth-of-type(5) {
  background: repeating-linear-gradient(var(--t-4) 0 25%, transparent 25% 50%) 90% 70%/30% 20% no-repeat;
  background-color: var(--p-3);
}
.cuboid--side > div:nth-of-type(6) {
  background: repeating-linear-gradient(var(--t-4) 0 25%, transparent 25% 50%) 90% 70%/30% 25% no-repeat;
  background-color: var(--p-3);
}
.printer__side--left > .cuboid > div:nth-of-type(5),
.printer__side--right > .cuboid > div:nth-of-type(6) {
  background: var(--p-8);
}
@-webkit-keyframes choose {
  to {
    transform: translate(0, -500%);
  }
}
@keyframes choose {
  to {
    transform: translate(0, -500%);
  }
}
@-webkit-keyframes fade {
  0%, 80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade {
  0%, 80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fade-sheet {
  0%, 85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-sheet {
  0%, 85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shoot {
  0% {
    transform: translate3d(0%, -1px, 0);
  }
  100% {
    transform: translate3d(-300%, -1px, 0);
  }
}
@keyframes shoot {
  0% {
    transform: translate3d(0%, -1px, 0);
  }
  100% {
    transform: translate3d(-300%, -1px, 0);
  }
}
@-webkit-keyframes eject {
  15% {
    transform: rotate(0deg);
  }
  65%, 100% {
    transform: rotate(360deg);
  }
}
@keyframes eject {
  15% {
    transform: rotate(0deg);
  }
  65%, 100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes transfer {
  to {
    transform: translate(0, -270%) rotate(22deg);
  }
}
@keyframes transfer {
  to {
    transform: translate(0, -270%) rotate(22deg);
  }
}
@-webkit-keyframes feed {
  to {
    transform: translate(100%, 0);
  }
}
@keyframes feed {
  to {
    transform: translate(100%, 0);
  }
}
@-webkit-keyframes fly {
  0% {
    transform: translate3d(0, 0, 0) rotateY(0deg) translate(0, 0);
  }
  50% {
    transform: translate3d(140%, 0, calc(var(--height) * 1.2)) rotateY(-75deg) translate(180%, 0);
  }
  100% {
    transform: translate3d(140%, 0, var(--height)) rotateY(-75deg) translate(0%, 0) rotate(-180deg);
  }
}
@keyframes fly {
  0% {
    transform: translate3d(0, 0, 0) rotateY(0deg) translate(0, 0);
  }
  50% {
    transform: translate3d(140%, 0, calc(var(--height) * 1.2)) rotateY(-75deg) translate(180%, 0);
  }
  100% {
    transform: translate3d(140%, 0, var(--height)) rotateY(-75deg) translate(0%, 0) rotate(-180deg);
  }
}
@-webkit-keyframes print {
  to {
    transform: translate(0, 0);
  }
}
@keyframes print {
  to {
    transform: translate(0, 0);
  }
}