<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">:root {
  --phone-width: 350px;
  --phone-height: 480px;
  --phone-color: rgb(20, 20, 20);
  --screen-color: rgb(10, 10, 10);
  --app-width: 350px;
  --app-height: 400px;
  --app-bg: #090831;
  --button-color: #ff4f79;
  --bg: #4a4a6a;
  --phone-animation-duration: 1.2s;
  --phone-animation-delay: 500ms;
  --phone-animation-easing: ease;
  --phone-animation-direction: forwards;
  --screen-animation-duration: 0.8s;
  --screen-animation-delay: 1800ms;
  --screen-animation-easing: ease;
  --screen-animation-direction: forwards;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
}

button {
  border: none;
}
button:focus {
  outline: none;
  border: none;
}

.phone {
  position: relative;
  min-width: var(--phone-width);
  height: var(--phone-height);
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  transform: translateY(-200%);
  animation: show-phone var(--phone-animation-duration) var(--phone-animation-easing) var(--phone-animation-direction);
  animation-delay: var(--phone-animation-delay);
  box-shadow: 0 0 0 5px #646464, 0 2.4px 5.3px rgba(0, 0, 0, 0.07), 0 5.7px 12.6px rgba(0, 0, 0, 0.101), 0 10.6px 23.8px rgba(0, 0, 0, 0.125), 0 19px 42.4px rgba(0, 0, 0, 0.149), 0 35.5px 79.4px rgba(0, 0, 0, 0.18), 0 85px 190px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.phone__screen {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--app-width);
  height: calc(5px + var(--app-height));
  background: var(--screen-color);
  z-index: 80;
  animation: hide-screen-top var(--screen-animation-duration) var(--screen-animation-easing) var(--screen-animation-direction);
  animation-delay: var(--screen-animation-delay);
}
.phone__left, .phone__right {
  position: absolute;
  top: 0;
  width: 10px;
  height: 85%;
  background: var(--phone-color);
  z-index: 100;
}
.phone__left {
  left: 0;
  transform: translateX(-2px);
}
.phone__right {
  right: 0;
  transform: translateX(2px);
}
.phone__bottom {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  width: calc(100% + 4px);
  height: 80px;
  background: var(--phone-color);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone__bottom .button__home {
  --button-home-size: 55px;
  position: relative;
  width: var(--button-home-size);
  height: var(--button-home-size);
  border: 2px solid #232323;
  border-radius: 50%;
  background: none;
}
.phone__bottom .button__home::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  height: 25%;
  background: none;
  border: 2px solid #505050;
  border-radius: 30%;
}

.app {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--app-width);
  height: var(--app-height);
  background: var(--app-bg);
  z-index: 50;
}
.app--content {
  position: absolute;
  left: 0;
  top: -5%;
  width: 100%;
  height: 150%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 0.8rem;
  padding: 0 1.5rem;
}
.app--content span {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  transform: translateY(25%) rotate(5deg);
  transform-origin: top left;
  opacity: 0;
  animation: card-pop-in 350ms var(--screen-animation-easing) var(--screen-animation-direction);
  animation-delay: calc(300ms + var(--screen-animation-delay) + 30ms * var(--index));
}

.tabbar {
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: 0;
  left: 0;
}
.tabbar button,
.tabbar .options {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.tabbar button {
  --size: 40px;
  --button-y-offset: -50%;
  border: none;
  width: var(--size);
  height: var(--size);
  border-radius: var(--size);
  background: var(--button-color);
  transform: translate(-50%, var(--button-y-offset));
  transition: transform 500ms ease;
  transition-delay: 200ms;
  cursor: pointer;
  top: 400%;
  animation: button-pop-in-elastic 500ms cubic-bezier(0.185, 1.485, 0.35, 3.575) var(--screen-animation-direction);
  animation-delay: calc(1s + var(--screen-animation-delay));
}
.tabbar button .icon {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-20%) rotate(0);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 500ms ease;
  transition-delay: 200ms;
}
.tabbar button .icon svg {
  width: 50%;
  height: 50%;
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 60px;
  transform: rotate(180deg);
  animation: rotate 500ms cubic-bezier(0.185, 1.485, 0.35, 3.575) var(--screen-animation-direction);
  animation-delay: calc(1s + var(--screen-animation-delay));
}
.tabbar .options {
  width: var(--options-width);
  height: var(--options-height);
  transform: translate(-50%, var(--options-y-offset));
  background: var(--button-color);
  transition: transform 500ms ease;
  transition-delay: 200ms;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tabbar .options__wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  place-content: center;
  grid-gap: 0.6rem;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 500ms ease;
}
.tabbar .options__wrapper span {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}
.tabbar--front, .tabbar--back {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
}
.tabbar--front {
  --options-width: 100%;
  --options-height: 400px;
  --options-y-offset: 3%;
  z-index: 2;
}
.tabbar--front button {
  --size: 40px;
  z-index: 4;
}
.tabbar--back {
  --options-width: 100px;
  --options-height: 100px;
  --options-y-offset: 10%;
  filter: url(#goo);
  z-index: 1;
}
.tabbar--back button {
  pointer-events: none;
}
.tabbar.show .tabbar--front {
  --options-y-offset: -112%;
}
.tabbar.show .tabbar--front button {
  --button-y-offset: -130%;
}
.tabbar.show .tabbar--front .icon {
  transform: translateY(0%) rotate(225deg);
}
.tabbar.show .tabbar--front .options__wrapper {
  clip-path: circle(100% at 50% 50%);
  transition-delay: 400ms;
}
.tabbar.show .tabbar--back {
  --options-y-offset: -154%;
}
.tabbar.show .tabbar--back button {
  --button-y-offset: -140%;
}

@keyframes show-phone {
  to {
    transform: translateY(0);
  }
}
@keyframes hide-screen-top {
  to {
    opacity: 0;
    pointer-events: none;
  }
}
@keyframes card-pop-in {
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}
@keyframes button-pop-in-elastic {
  to {
    top: 50%;
  }
}
@keyframes rotate {
  to {
    transform: rotate(0deg);
  }
}
.support {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  display: flex;
}
.support a {
  margin: 0 10px;
  color: #fff;
  font-size: 1.8rem;
  backface-visibility: hidden;
  transition: all 150ms ease;
}
.support a:hover {
  transform: scale(1.1);
}</pre></body></html>