:root {
  color-scheme: dark;
  --shadow-blue: rgba(0, 19, 116, 0.45);
  --outline: rgba(255, 255, 255, 0.32);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050d2a;
  font-family: "MS Sans Serif", "Tahoma", system-ui, sans-serif;
}

body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 2v18l4.9-4.74 2.66 6.09 3.18-1.39-2.66-6.08 6.82-.32L4 2Z' fill='white' stroke='%23002a9b' stroke-width='1.4'/%3E%3C/svg%3E") 4 2,
    auto;
}

.viewport {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  padding: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(34, 170, 255, 0.2), transparent 54%),
    #040817;
}

.desktop {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background-image: url("assets/background/desktop_background_empty_dock.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.desktop::before,
.desktop::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.desktop::before {
  z-index: 20;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.08) 0,
      rgba(255, 255, 255, 0.08) 1px,
      rgba(0, 0, 0, 0.16) 2px,
      rgba(0, 0, 0, 0.16) 4px
    );
  mix-blend-mode: overlay;
  opacity: 0.5;
}

.desktop::after {
  z-index: 21;
  background:
    linear-gradient(90deg, rgba(255, 0, 0, 0.08), rgba(0, 255, 255, 0.05)),
    radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.34) 100%);
  mix-blend-mode: screen;
  opacity: 0.55;
}

.top-clock {
  position: absolute;
  z-index: 26;
  right: 1.1%;
  top: 0.55%;
  min-width: clamp(5.2rem, 8.2vw, 8rem);
  height: clamp(1.2rem, 2.15vw, 2rem);
  display: grid;
  place-items: center;
  padding: 0 0.42rem;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 84, 215, 0.45), rgba(0, 108, 235, 0.22)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, rgba(0, 0, 0, 0.08) 2px 4px);
  border-left: 1px solid rgba(120, 218, 255, 0.44);
  border-right: 1px solid rgba(10, 52, 155, 0.64);
  font: 800 clamp(0.58rem, 1vw, 0.95rem)/1 "Tahoma", system-ui, sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    1px 1px 0 #001a70,
    0 0 0.44rem rgba(255, 255, 255, 0.58);
  pointer-events: none;
}

.layer {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  z-index: var(--z);
  width: calc(var(--w) * 1%);
  height: auto;
  user-select: none;
  touch-action: none;
  filter:
    drop-shadow(0.3vw 0.6vw 0.25vw rgba(0, 11, 70, 0.35))
    drop-shadow(0 0 0.14vw var(--outline));
  transform: translate3d(0, 0, 0) rotate(var(--r));
  transform-origin: center;
  will-change: left, top, transform, filter;
}

.layer:hover,
.layer.is-dragging {
  filter:
    drop-shadow(0.45vw 0.85vw 0.28vw rgba(0, 11, 70, 0.45))
    drop-shadow(0 0 0.22vw rgba(255, 255, 255, 0.55))
    saturate(1.06);
}

.layer.is-dragging {
  z-index: 18;
  cursor: grabbing;
}

.layer-paint {
  --x: 13;
  --y: 10;
  --w: 42;
  --z: 5;
  --r: -0.6deg;
}

.layer-message {
  --x: 51;
  --y: 7;
  --w: 31;
  --z: 4;
  --r: 0.5deg;
}

.layer-guy {
  --x: 48;
  --y: 31;
  --w: 23;
  --z: 7;
  --r: -2deg;
}

.layer-audio {
  --x: 48;
  --y: 50;
  --w: 33;
  --z: 8;
  --r: 0.15deg;
}

.audio-player {
  height: auto;
}

.audio-shell {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.album-cover,
.track-display,
.playlist,
.progress-track,
.transport,
.volume-range,
.load-audio {
  position: absolute;
  z-index: 3;
}

.album-cover {
  left: 13.2%;
  top: 17.4%;
  width: 33.8%;
  height: 39.4%;
  display: grid;
  align-content: end;
  gap: 0.28rem;
  padding: clamp(0.55rem, 1.15vw, 0.95rem);
  overflow: hidden;
  color: #fff;
  background: var(--cover-bg);
  border: 1px solid rgba(210, 245, 255, 0.48);
  box-shadow:
    inset 0 0 1.2rem rgba(255, 255, 255, 0.16),
    inset 0 -1.7rem 2.6rem rgba(0, 0, 0, 0.45);
  text-shadow: 1px 1px 0 #00105f, 0 0 0.5rem rgba(255, 255, 255, 0.8);
}

.album-cover::before,
.album-cover::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.album-cover::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.7), transparent 18%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.45), transparent 34%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(0, 0, 0, 0.11) 2px 4px);
  mix-blend-mode: screen;
}

.album-cover::after {
  inset: auto 8% 9% auto;
  width: 45%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 18%, rgba(255, 255, 255, 0.9) 19% 21%, transparent 22%),
    conic-gradient(#ff54d4, #ffe900, #26f8ff, #6b58ff, #ff54d4);
  opacity: 0.62;
  filter: blur(0.2px);
}

.album-cover strong,
.cover-kicker {
  position: relative;
  z-index: 1;
}

.album-cover strong {
  max-width: 92%;
  font: 900 clamp(0.72rem, 1.55vw, 1.5rem)/0.95 "Arial Black", Impact, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cover-kicker {
  font: 700 clamp(0.44rem, 0.7vw, 0.7rem)/1 "Tahoma", system-ui, sans-serif;
  opacity: 0.85;
}

.cover-we-r {
  --cover-bg:
    linear-gradient(145deg, rgba(255, 0, 196, 0.86), rgba(0, 211, 255, 0.92)),
    radial-gradient(circle at 72% 26%, #fff200, transparent 23%);
}

.cover-just-dance {
  --cover-bg:
    linear-gradient(145deg, rgba(255, 95, 0, 0.92), rgba(123, 0, 255, 0.9)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 12px, transparent 12px 24px);
}

.cover-poker-face {
  --cover-bg:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.82), transparent 16%),
    linear-gradient(145deg, rgba(10, 17, 40, 0.98), rgba(0, 181, 255, 0.84) 48%, rgba(255, 255, 255, 0.9));
}

.cover-like-a-g6 {
  --cover-bg:
    linear-gradient(145deg, rgba(7, 7, 12, 0.95), rgba(37, 255, 220, 0.88)),
    radial-gradient(circle at 80% 18%, #ff00ff, transparent 20%);
}

.cover-blow {
  --cover-bg:
    linear-gradient(145deg, rgba(255, 244, 0, 0.94), rgba(255, 0, 128, 0.9) 55%, rgba(0, 60, 255, 0.92));
}

.track-display {
  left: 48.2%;
  top: 33.25%;
  width: 41.8%;
  height: 4.65%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0 0.62rem;
  overflow: hidden;
  color: #7dff9b;
  background:
    linear-gradient(rgba(60, 255, 132, 0.12), rgba(0, 0, 0, 0.92)),
    #020805;
  font: 700 clamp(0.48rem, 0.82vw, 0.8rem)/1 "Courier New", monospace;
  text-shadow: 0 0 0.5rem rgba(78, 255, 125, 0.75);
}

.track-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-time {
  flex: 0 0 auto;
  color: #a9f7ff;
}

.load-audio {
  left: 48.2%;
  top: 27.9%;
  width: 15.2%;
  height: 3.6%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #4d4d4d;
  color: #101010;
  background: linear-gradient(#ffffff, #cdcdc5);
  box-shadow:
    inset 1px 1px rgba(255, 255, 255, 0.86),
    inset -1px -1px rgba(0, 0, 0, 0.28);
  font: 800 clamp(0.38rem, 0.62vw, 0.58rem)/1 "Tahoma", system-ui, sans-serif;
  text-transform: uppercase;
}

.load-audio:hover {
  color: #0039c9;
  background: linear-gradient(#ffffff, #e4f7ff);
}

.audio-file-input {
  display: none;
}

.playlist {
  left: 48.2%;
  top: 39.4%;
  width: 41.6%;
  height: 24.3%;
  padding: 0.3rem 0.42rem;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(10, 35, 70, 0.9), rgba(3, 6, 14, 0.96));
  border: 1px solid rgba(100, 185, 255, 0.22);
}

.playlist button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 18%;
  margin: 0;
  padding: 0.1rem 0.28rem;
  border: 0;
  color: #dceeff;
  background: transparent;
  font: 700 clamp(0.46rem, 0.76vw, 0.72rem)/1 "Courier New", monospace;
  text-align: left;
  text-shadow: 1px 1px #001044;
}

.playlist button:hover,
.playlist button.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(19, 101, 255, 0.86), rgba(0, 255, 255, 0.24));
}

.playlist .song-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist .song-length {
  margin-left: 0.4rem;
  color: #9eeaff;
}

.playlist button.has-file .song-name::after {
  content: " *";
  color: #7dff9b;
}

.progress-track {
  left: 18.5%;
  top: 66.2%;
  width: 26.7%;
  height: 1.1%;
  background: rgba(0, 0, 0, 0.42);
  border-radius: 999px;
}

.progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00e5ff, #fff200, #ff37c7);
  box-shadow: 0 0 0.42rem rgba(0, 229, 255, 0.72);
}

.progress-thumb {
  position: absolute;
  left: calc(var(--progress, 0%) - 0.35rem);
  top: 50%;
  width: 0.7rem;
  aspect-ratio: 1;
  border: 1px solid #595959;
  background: linear-gradient(#fff, #c6c6bd);
  transform: translateY(-50%);
}

.volume-range {
  left: 18.3%;
  top: 73.25%;
  width: 29%;
  height: 1.2rem;
  opacity: 0;
  cursor: pointer;
}

.transport {
  left: 12.9%;
  top: 80.35%;
  width: 51.2%;
  height: 10.4%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.transport-btn {
  min-width: 0;
  min-height: 0;
  border: 0;
  background: rgba(255, 255, 255, 0);
}

.transport-btn:hover {
  background: rgba(77, 220, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.audio-player.is-playing .play-pause {
  background: rgba(120, 255, 167, 0.13);
}

.audio-el {
  display: none;
}

.layer-camera {
  --x: 59;
  --y: 41;
  --w: 13;
  --z: 9;
  --r: 2.5deg;
}

.layer-blue {
  --x: 7;
  --y: 55;
  --w: 15;
  --z: 10;
  --r: -0.8deg;
}

.dock-nav {
  position: absolute;
  z-index: 3;
  left: 17.2%;
  bottom: 3.2%;
  width: 65.6%;
  height: 14.6%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(0.18rem, 1.1vw, 1rem);
  pointer-events: auto;
}

.dock-button {
  --dock-bg: linear-gradient(145deg, #44b8ff, #003bba 56%, #00165f);
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(0.12rem, 0.6vh, 0.28rem);
  min-width: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font: 800 clamp(0.5rem, 0.95vw, 1rem)/1 "Tahoma", system-ui, sans-serif;
  letter-spacing: 0;
  text-shadow:
    1px 1px 0 #00164f,
    0 0 0.42rem rgba(255, 255, 255, 0.64);
  transform-origin: 50% 100%;
  transition:
    filter 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1.25);
}

.dock-icon {
  position: relative;
  display: block;
  width: min(7.4vw, 5.25rem);
  min-width: 2.55rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 24%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 15%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.52), transparent 32%),
    var(--dock-bg);
  box-shadow:
    inset 0.1rem 0.14rem 0.34rem rgba(255, 255, 255, 0.7),
    inset -0.16rem -0.22rem 0.45rem rgba(0, 0, 70, 0.42),
    0 0.18rem 0.36rem rgba(0, 16, 90, 0.45);
  transition:
    box-shadow 180ms ease,
    filter 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1.25);
}

.dock-icon::before,
.dock-icon::after {
  position: absolute;
  content: "";
}

.dock-icon::after {
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 38%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, rgba(0, 0, 0, 0.06) 2px 4px);
  pointer-events: none;
}

.dock-label {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    color 180ms ease,
    text-shadow 180ms ease,
    transform 180ms ease;
}

.dock-button:hover,
.dock-button:focus-visible {
  filter: saturate(1.12);
  transform: translateY(-14%) scale(1.1);
}

.dock-button:hover .dock-icon,
.dock-button:focus-visible .dock-icon {
  box-shadow:
    inset 0.1rem 0.14rem 0.34rem rgba(255, 255, 255, 0.75),
    inset -0.16rem -0.22rem 0.45rem rgba(0, 0, 70, 0.42),
    0 0.34rem 0.85rem rgba(0, 15, 80, 0.45),
    0 0 1.1rem rgba(84, 236, 255, 0.78);
  filter: brightness(1.12);
}

.dock-button:hover .dock-label,
.dock-button:focus-visible .dock-label {
  color: #fff9a8;
  text-shadow:
    1px 1px 0 #00164f,
    0 0 0.65rem rgba(255, 242, 0, 0.85);
  transform: translateY(0.08rem);
}

.dock-button:active {
  transform: translateY(-5%) scale(1.02);
}

.dock-button:focus-visible {
  outline: 2px solid #fff200;
  outline-offset: 0.25rem;
}

.dock-etherscan {
  --dock-bg: linear-gradient(145deg, #3fc2ff, #0b5dd9 52%, #071d78);
}

.dock-etherscan .dock-icon::before {
  left: 26%;
  top: 32%;
  width: 48%;
  height: 38%;
  border-radius: 0.22rem;
  background:
    linear-gradient(#fff, #e9f5ff) 0 8% / 100% 20% no-repeat,
    linear-gradient(#fff, #e9f5ff) 0 42% / 100% 20% no-repeat,
    linear-gradient(#fff, #e9f5ff) 0 76% / 100% 20% no-repeat;
  transform: skewX(-12deg);
  filter: drop-shadow(0.08rem 0.09rem 0 rgba(0, 0, 0, 0.24));
}

.dock-dexscreener {
  --dock-bg: linear-gradient(145deg, #4d5568, #101114 58%, #000);
}

.dock-dexscreener .dock-icon::before {
  left: 22%;
  top: 19%;
  width: 56%;
  height: 65%;
  background: #fff;
  clip-path: polygon(50% 0, 68% 15%, 82% 8%, 74% 31%, 88% 53%, 66% 48%, 50% 100%, 34% 48%, 12% 53%, 26% 31%, 18% 8%, 32% 15%);
  filter: drop-shadow(0.08rem 0.1rem 0 rgba(0, 0, 0, 0.42));
}

.dock-dexscreener .dock-icon::after {
  inset: 37% 30% auto;
  height: 10%;
  background:
    radial-gradient(circle at 20% 50%, #101114 0 28%, transparent 29%),
    radial-gradient(circle at 80% 50%, #101114 0 28%, transparent 29%);
}

.dock-uniswap {
  --dock-bg: linear-gradient(145deg, #ff7bd5, #f0009b 50%, #8400ff);
}

.dock-uniswap .dock-icon::before {
  left: 17%;
  top: 21%;
  width: 66%;
  height: 58%;
  background: #fff;
  clip-path: polygon(7% 48%, 33% 28%, 42% 5%, 55% 32%, 88% 25%, 72% 51%, 92% 79%, 57% 70%, 47% 92%, 36% 66%, 10% 74%);
  filter: drop-shadow(0.08rem 0.1rem 0 rgba(95, 0, 90, 0.32));
}

.dock-telegram {
  --dock-bg: linear-gradient(145deg, #84f0ff, #1e9cff 48%, #0640bb);
}

.dock-telegram .dock-icon::before {
  left: 17%;
  top: 31%;
  width: 68%;
  height: 45%;
  background: #fff;
  clip-path: polygon(0 47%, 100% 0, 73% 100%, 49% 64%, 31% 80%);
  filter: drop-shadow(0.08rem 0.1rem 0 rgba(0, 52, 132, 0.35));
}

.dock-twitter {
  --dock-bg: linear-gradient(145deg, #6ee0ff, #1d9bf0 50%, #04569d);
}

.dock-twitter .dock-icon::before {
  left: 16%;
  top: 24%;
  width: 70%;
  height: 55%;
  background: #fff;
  clip-path: polygon(5% 58%, 23% 59%, 11% 44%, 31% 50%, 35% 31%, 48% 44%, 73% 22%, 68% 41%, 89% 37%, 72% 51%, 80% 72%, 57% 63%, 34% 84%, 39% 66%, 13% 78%);
  filter: drop-shadow(0.08rem 0.1rem 0 rgba(0, 52, 132, 0.35));
}

.dock-discord {
  --dock-bg: linear-gradient(145deg, #aba6ff, #5865f2 52%, #252a98);
}

.dock-discord .dock-icon::before {
  left: 17%;
  top: 30%;
  width: 66%;
  height: 43%;
  border-radius: 43% 43% 48% 48%;
  background:
    radial-gradient(circle at 34% 48%, #5865f2 0 7%, transparent 8%),
    radial-gradient(circle at 66% 48%, #5865f2 0 7%, transparent 8%),
    #fff;
  filter: drop-shadow(0.08rem 0.1rem 0 rgba(16, 20, 100, 0.35));
}

.dock-chart {
  --dock-bg: linear-gradient(145deg, #90ff86, #0fbd41 50%, #08705e);
}

.dock-chart .dock-icon::before {
  left: 24%;
  bottom: 22%;
  width: 52%;
  height: 53%;
  background:
    linear-gradient(#fff, #e8fff0) 0 100% / 20% 44% no-repeat,
    linear-gradient(#fff, #e8fff0) 38% 100% / 20% 72% no-repeat,
    linear-gradient(#fff, #e8fff0) 76% 100% / 20% 100% no-repeat;
  border-bottom: 0.16rem solid rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0.08rem 0.1rem 0 rgba(0, 70, 30, 0.36));
}

.control {
  position: absolute;
  z-index: 30;
  right: 1.6%;
  bottom: 1.8%;
  min-width: 4.8rem;
  min-height: 2.1rem;
  padding: 0 0.75rem;
  border: 1px solid #052d84;
  border-top-color: #d9ecff;
  border-left-color: #d9ecff;
  color: white;
  background:
    linear-gradient(#35a8ff, #075bd6 45%, #012f9f);
  box-shadow:
    inset 1px 1px rgba(255, 255, 255, 0.65),
    inset -1px -1px rgba(0, 5, 70, 0.55),
    0 0.35rem 1rem rgba(0, 0, 0, 0.24);
  font: 700 0.78rem/1 "Tahoma", system-ui, sans-serif;
  text-shadow: 1px 1px #001c76;
}

.control:active {
  border-top-color: #052d84;
  border-left-color: #052d84;
  border-right-color: #d9ecff;
  border-bottom-color: #d9ecff;
  transform: translate(1px, 1px);
}

@media (max-aspect-ratio: 4 / 3) {
  .desktop {
    width: 100vw;
    height: 100svh;
    height: 100dvh;
    background-size: 100% 100%;
  }

  .layer-paint {
    --x: 11;
    --y: 14;
    --w: 58;
  }

  .layer-message {
    --x: 37;
    --y: 8;
    --w: 47;
  }

  .layer-guy {
    --x: 43;
    --y: 38;
    --w: 32;
  }

  .layer-audio {
    --x: 34;
    --y: 58;
    --w: 52;
  }

  .layer-camera {
    --x: 59;
    --y: 49;
    --w: 20;
  }

  .layer-blue {
    --x: 6;
    --y: 62;
    --w: 24;
  }

  .control {
    min-width: 4.3rem;
    min-height: 2rem;
    font-size: 0.72rem;
  }

  .dock-nav {
    left: 5.2%;
    bottom: 3.6%;
    width: 89.6%;
    height: 12%;
    gap: 0.12rem;
  }

  .dock-icon {
    width: min(11.2vw, 3.2rem);
    min-width: 1.9rem;
  }

  .dock-button {
    font-size: clamp(0.42rem, 1.75vw, 0.58rem);
  }

  .dock-button:hover,
  .dock-button:focus-visible {
    transform: translateY(-9%) scale(1.06);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .desktop {
    animation: screen-warmup 900ms ease-out both;
  }

  .layer {
    animation: float-in 650ms cubic-bezier(0.2, 0.9, 0.22, 1.12) both;
    animation-delay: calc(var(--z) * 55ms);
  }
}

@keyframes screen-warmup {
  from {
    filter: brightness(0.75) contrast(1.2) saturate(0.6);
  }

  to {
    filter: brightness(1) contrast(1) saturate(1);
  }
}

@keyframes float-in {
  from {
    transform: translate3d(0, 2.5%, 0) scale(0.96) rotate(var(--r));
  }

  to {
    transform: translate3d(0, 0, 0) scale(1) rotate(var(--r));
  }
}