<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  background: #fff3e0;
}

svg {
  width: 0;
  height: 0;
  display: block;
}

.grid {
  width: 80vmin;
  margin: 10vmin auto;
  display: flex;
  flex-wrap: wrap;
  transform-style: preserve-3d;
  box-shadow: 0px 0px 8vmin 4vmin rgba(0, 0, 0, 0.1), inset 0px 0px 8vmin 4vmin rgba(0, 0, 0, 0.1);
  perspective: 2000;
}

.item-box {
  position: relative;
  width: 26.66667vmin;
  height: 26.66667vmin;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: all 0.225s cubic-bezier(0.65, 0.05, 0.36, 1) 0.225s;
}
.item-box:nth-child(1) .puzzle:before {
  background-image: url("https://unsplash.it/600/600?image=1011");
}
.item-box:nth-child(2) .puzzle:before {
  background-image: url("https://unsplash.it/600/600?image=1006");
}
.item-box:nth-child(3) .puzzle:before {
  background-image: url("https://unsplash.it/600/600?image=883");
}
.item-box:nth-child(4) .puzzle:before {
  background-image: url("https://unsplash.it/600/600?image=1074");
}
.item-box:nth-child(5) .puzzle:before {
  background-image: url("https://unsplash.it/600/600?image=823");
}
.item-box:nth-child(6) .puzzle:before {
  background-image: url("https://unsplash.it/600/600?image=64");
}
.item-box:nth-child(7) .puzzle:before {
  background-image: url("https://unsplash.it/600/600?image=65");
}
.item-box:nth-child(8) .puzzle:before {
  background-image: url("https://unsplash.it/600/600?image=839");
}
.item-box:nth-child(9) .puzzle:before {
  background-image: url("https://unsplash.it/600/600?image=832");
}
.item-box:hover {
  transform: scale(1.25, 1.25);
  box-shadow: 0px 0px 16px 8px rgba(0, 0, 0, 0.2);
}
.item-box:hover .puzzle {
  transform: translateX(0) translateY(0) translateZ(1px) rotateX(0) rotateY(0);
  opacity: 1;
}
.item-box .item-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.piece {
  position: absolute;
  width: 13.33333vmin;
  height: 13.33333vmin;
  transform-style: preserve-3d;
}
.piece:nth-child(1) {
  transform: translateX(-100%) translateY(-100%) rotate(0deg);
}
.piece:nth-child(1) .puzzle:before {
  background-position: 0% 0%;
  transform: rotate(0deg);
}
.piece:nth-child(2) {
  transform: translateX(0%) translateY(-100%) rotate(90deg);
}
.piece:nth-child(2) .puzzle:before {
  background-position: 100% 0%;
  transform: rotate(-90deg);
}
.piece:nth-child(3) {
  transform: translateX(0%) translateY(0%) rotate(180deg);
}
.piece:nth-child(3) .puzzle:before {
  background-position: 100% 100%;
  transform: rotate(-180deg);
}
.piece:nth-child(4) {
  transform: translateX(-100%) translateY(0%) rotate(270deg);
}
.piece:nth-child(4) .puzzle:before {
  background-position: 0% 100%;
  transform: rotate(-270deg);
}

.puzzle {
  position: absolute;
  width: 17.17505vmin;
  height: 17.17505vmin;
  background-color: #000;
  -webkit-clip-path: url(#puzzle);
          clip-path: url(#puzzle);
  opacity: .8;
  transform: translateX(-22.368%) translateY(-22.368%) translateZ(0px) rotateX(0.5turn) rotateY(0.5turn);
  transition: all 0.45s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.puzzle:before {
  content: "";
  position: absolute;
  width: 17.17505vmin;
  height: 17.17505vmin;
  background-size: 155.264%;
}

@-webkit-keyframes init {
  from {
    transform: translateX(0) translateY(0) translateZ(1px) rotateX(0) rotateY(0);
  }
}

@keyframes init {
  from {
    transform: translateX(0) translateY(0) translateZ(1px) rotateX(0) rotateY(0);
  }
}</pre></body></html>