<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@import url("css.css");
*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
  --duration: .6s;
  --ease: cubic-bezier(.5,0,.2,1);
}

html, body {
  font-family: Lato, sans-serif;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #eee;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#app {
  --dx-px: calc(var(--dx, 0) * 1px);
  --dx-py: calc(var(--dy) * 1px);
  height: 90vmin;
  width: 50vmin;
  border: 2px solid black;
  border-radius: 5vmin;
  overflow: hidden;
  font-size: 2.5vmin;
  background: #fff;
  box-shadow: 0 2em 4em rgba(0, 0, 0, 0.3);
}
#app:before {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 0.5em;
  right: 0.5em;
  background: #FFF;
  content: attr(data-state);
  padding: 0.25em 0.5em;
  font-family: monospace;
  transform: translateX(calc(var(--dx-px) * 0.2));
  transition: transform 0.6s ease;
  transition-duration: calc(var(--idle, 0) * .6s);
}

.playlist {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template: 1/1;
  z-index: 10;
  transition: transform var(--duration) var(--ease);
}
.playlist .song {
  grid-area: 1/1;
  margin: auto;
}

.screens {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.screens &gt; [data-screen] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

[data-screen] {
  visibility: hidden;
  display: grid;
  padding: 0 2vmin;
  grid-template-columns: 50% 50%;
}
[data-screen][data-active] {
  visibility: visible;
}
[data-screen] &gt; .content {
  grid-area: content;
  align-self: center;
  padding: 1em;
}

[data-screen=genre] {
  grid-template-areas: "content songs";
}

[data-screen=playlist] {
  grid-template-areas: "songs content";
}

[data-screen=song] {
  grid-template-areas: "songs content";
}

/* ---------------------------------- */
.song {
  margin: 0;
  --percentage: calc( var(--index) / var(--length) );
  --offset: calc( var(--index) - var(--song) );
  z-index: calc( var(--offset) * 1 );
  transition: z-index var(--duration) var(--ease);
}
.song img {
  display: block;
  max-width: 50%;
  height: auto;
  transition: transform var(--duration) var(--ease), transform-origin var(--duration) var(--ease), z-index var(--duration) linear;
  transform: none;
  transform-origin: -100% center;
  border-radius: 5%;
}
.song[data-selected] {
  z-index: calc( var(--length) * 2 );
  opacity: 1;
}
.song[data-selected] img {
  transform: none;
}
.song[data-selected] ~ .song {
  z-index: calc( var(--length) - var(--offset) * 1 );
}

/* ---------------------------------- */
[data-panning] .song {
  pointer-events: none;
}

[data-state=genre] .playlist {
  transform: translateX(50%);
}
[data-state=genre] .song {
  z-index: calc(var(--length) - var(--index)) !important;
}
[data-state=genre] .song img {
  transform: scale(calc(1 - (.3 * (var(--percentage) )) ));
}

[data-state=playlist] .playlist {
  transform: none;
}
[data-state=playlist] .song img {
  transform: rotate(calc(25deg * var(--offset)));
}

[data-state=song] .song img {
  transform: translate(-20%, calc(40% * var(--offset)));
}
[data-state=song] .song[data-selected] img {
  transform: none;
}</pre></body></html>