/* Global/shared base */
body.home-dashboard-page {
  isolation: isolate;}

body.piano-app-page[data-page="piano"][data-theme="dark"] {
  background: #000;}body.home-dashboard-page .home-cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;}

body.piano-app-page[data-page="piano"][data-theme="dark"] .home-cosmos {
  background:
    radial-gradient(circle at 3% 8%, rgba(255, 255, 255, 0.46) 0 0.75px, transparent 1.6px),
    radial-gradient(circle at 7% 39%, rgba(173, 207, 255, 0.42) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 11% 91%, rgba(255, 255, 255, 0.42) 0 0.75px, transparent 1.6px),
    radial-gradient(circle at 17% 63%, rgba(176, 209, 255, 0.38) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 21% 27%, rgba(255, 255, 255, 0.46) 0 0.75px, transparent 1.6px),
    radial-gradient(circle at 28% 6%, rgba(151, 195, 255, 0.42) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 32% 72%, rgba(255, 255, 255, 0.4) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 39% 95%, rgba(186, 215, 255, 0.38) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 43% 52%, rgba(255, 255, 255, 0.42) 0 0.75px, transparent 1.6px),
    radial-gradient(circle at 48% 4%, rgba(167, 204, 255, 0.4) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 52% 74%, rgba(255, 255, 255, 0.38) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 57% 19%, rgba(184, 213, 255, 0.42) 0 0.75px, transparent 1.6px),
    radial-gradient(circle at 63% 47%, rgba(255, 255, 255, 0.44) 0 0.75px, transparent 1.6px),
    radial-gradient(circle at 69% 92%, rgba(159, 199, 255, 0.4) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 74% 34%, rgba(255, 255, 255, 0.4) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 79% 8%, rgba(184, 213, 255, 0.38) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 84% 66%, rgba(255, 255, 255, 0.44) 0 0.75px, transparent 1.6px),
    radial-gradient(circle at 87% 22%, rgba(166, 205, 255, 0.4) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 92% 82%, rgba(255, 255, 255, 0.42) 0 0.75px, transparent 1.6px),
    radial-gradient(circle at 97% 12%, rgba(178, 211, 255, 0.4) 0 0.7px, transparent 1.5px),
    radial-gradient(ellipse at 50% 28%, rgba(14, 37, 76, 0.74) 0%, rgba(4, 10, 29, 0.78) 34%, transparent 68%),
    radial-gradient(circle at 18% 18%, rgba(63, 78, 169, 0.22), transparent 26rem),
    radial-gradient(circle at 82% 10%, rgba(84, 54, 150, 0.16), transparent 24rem),
    radial-gradient(circle at 52% 108%, rgba(8, 21, 55, 0.84), transparent 32rem),
    linear-gradient(180deg, #000 0%, #020411 38%, #030919 64%, #000 100%);}

body.piano-app-page[data-page="piano"][data-theme="dark"] .home-cosmos {
  background-image:
    url("assets/themes/dark/dark-banner-bg.webp"),
    linear-gradient(179deg, #0f0125 0%, #040231 50%, #0b0218 100%);
  background-position: center top, center;
  background-repeat: no-repeat, no-repeat;
  background-size: min(100vw, 1440px) auto, cover;}body.home-dashboard-page .home-cosmos::before,
body.home-dashboard-page .home-cosmos::after {
  content: "";
  position: absolute;
  inset: -18%;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 48%;
  z-index: 1;
  will-change: filter, opacity, transform;
  pointer-events: none;}

body.piano-app-page[data-page="piano"][data-theme="dark"] .home-cosmos::before,
body.piano-app-page[data-page="piano"][data-theme="dark"] .home-cosmos::after {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  mix-blend-mode: screen;}body.home-dashboard-page .home-cosmos::after {
  z-index: 3;}body.home-dashboard-page .home-cosmos-stars,
body.home-dashboard-page .home-cosmos-stars::before,
body.home-dashboard-page .home-cosmos-stars::after {
  position: absolute;
  inset: -8%;
  z-index: 2;
  pointer-events: none;
  will-change: filter, opacity, transform;}

body.piano-app-page[data-page="piano"][data-theme="dark"] .home-cosmos-stars,
body.piano-app-page[data-page="piano"][data-theme="dark"] .home-cosmos-stars::before,
body.piano-app-page[data-page="piano"][data-theme="dark"] .home-cosmos-stars::after {
  background-repeat: repeat;
  mix-blend-mode: screen;}body.home-dashboard-page .home-cosmos-stars {
  animation: home-cosmos-stardust-a 18s ease-in-out infinite;}

body.piano-app-page[data-page="piano"][data-theme="dark"] .home-cosmos-stars {
  opacity: 0.58;
  background-image:
    radial-gradient(circle at 12px 18px, rgba(255, 255, 255, 0.7) 0 0.75px, transparent 1.8px),
    radial-gradient(circle at 78px 44px, rgba(190, 220, 255, 0.52) 0 0.65px, transparent 1.55px),
    radial-gradient(circle at 132px 98px, rgba(188, 122, 255, 0.44) 0 0.7px, transparent 1.7px),
    radial-gradient(circle at 196px 26px, rgba(255, 228, 178, 0.5) 0 0.7px, transparent 1.7px),
    radial-gradient(circle at 248px 132px, rgba(123, 202, 255, 0.45) 0 0.75px, transparent 1.8px),
    radial-gradient(circle at 310px 66px, rgba(255, 149, 220, 0.42) 0 0.7px, transparent 1.7px);
  background-size: 150px 118px, 182px 146px, 214px 172px, 266px 206px, 318px 244px, 374px 286px;}body.home-dashboard-page .home-cosmos-stars::before,
body.home-dashboard-page .home-cosmos-stars::after {
  content: "";}body.home-dashboard-page .home-cosmos-stars::before {
  animation: home-cosmos-stardust-b 23s ease-in-out infinite;}

body.piano-app-page[data-page="piano"][data-theme="dark"] .home-cosmos-stars::before {
  opacity: 0.54;
  background-image:
    radial-gradient(circle at 24px 32px, rgba(255, 255, 255, 0.74) 0 0.65px, transparent 1.55px),
    radial-gradient(circle at 92px 86px, rgba(174, 209, 255, 0.5) 0 0.7px, transparent 1.65px),
    radial-gradient(circle at 154px 18px, rgba(255, 241, 196, 0.48) 0 0.72px, transparent 1.7px),
    radial-gradient(circle at 214px 124px, rgba(188, 122, 255, 0.46) 0 0.68px, transparent 1.6px),
    radial-gradient(circle at 298px 52px, rgba(123, 202, 255, 0.48) 0 0.72px, transparent 1.7px),
    radial-gradient(circle at 346px 168px, rgba(255, 255, 255, 0.56) 0 0.75px, transparent 1.8px);
  background-size: 132px 104px, 174px 136px, 226px 178px, 286px 220px, 342px 260px, 410px 310px;}body.home-dashboard-page .home-cosmos-stars::after {
  animation: home-cosmos-stardust-c 29s ease-in-out infinite;}

body.piano-app-page[data-page="piano"][data-theme="dark"] .home-cosmos-stars::after {
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 36px 20px, rgba(255, 255, 255, 0.88) 0 0.9px, rgba(123, 202, 255, 0.26) 1px 1.9px, transparent 3px),
    radial-gradient(circle at 116px 112px, rgba(255, 228, 178, 0.7) 0 0.85px, rgba(255, 149, 220, 0.24) 1px 1.8px, transparent 2.9px),
    radial-gradient(circle at 204px 54px, rgba(190, 220, 255, 0.72) 0 0.9px, rgba(188, 122, 255, 0.24) 1px 1.9px, transparent 3px),
    radial-gradient(circle at 318px 148px, rgba(255, 255, 255, 0.82) 0 0.9px, rgba(123, 202, 255, 0.22) 1px 1.8px, transparent 2.9px);
  background-size: 210px 168px, 292px 226px, 372px 284px, 486px 358px;}body.home-dashboard-page .home-cosmos::before {
  animation: home-cosmos-orbit-soft 34s ease-in-out infinite;}

body.piano-app-page[data-page="piano"][data-theme="dark"] .home-cosmos::before {
  opacity: 0.68;
  background-image:
    radial-gradient(circle at 4% 21%, rgba(255, 255, 255, 0.7) 0 0.9px, transparent 1.9px),
    radial-gradient(circle at 6% 88%, rgba(186, 215, 255, 0.48) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 9% 73%, rgba(145, 188, 255, 0.62) 0 1px, transparent 2px),
    radial-gradient(circle at 12% 49%, rgba(255, 255, 255, 0.46) 0 0.75px, transparent 1.7px),
    radial-gradient(circle at 15% 36%, rgba(255, 255, 255, 0.82) 0 1px, transparent 2.1px),
    radial-gradient(circle at 18% 93%, rgba(158, 203, 255, 0.46) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.58) 0 0.85px, transparent 1.8px),
    radial-gradient(circle at 25% 58%, rgba(165, 202, 255, 0.52) 0 0.9px, transparent 1.9px),
    radial-gradient(circle at 29% 88%, rgba(158, 203, 255, 0.6) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 23%, rgba(255, 255, 255, 0.5) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 34% 44%, rgba(255, 255, 255, 0.76) 0 1px, transparent 2.1px),
    radial-gradient(circle at 38% 76%, rgba(255, 255, 255, 0.48) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 41% 18%, rgba(255, 255, 255, 0.58) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 43% 91%, rgba(174, 209, 255, 0.44) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 46% 67%, rgba(169, 196, 255, 0.64) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 12%, rgba(146, 191, 255, 0.52) 0 0.85px, transparent 1.8px),
    radial-gradient(circle at 53% 31%, rgba(255, 255, 255, 0.74) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 56%, rgba(255, 255, 255, 0.48) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 58% 82%, rgba(255, 255, 255, 0.54) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 61% 61%, rgba(255, 255, 255, 0.46) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 64% 9%, rgba(157, 204, 255, 0.66) 0 1px, transparent 2.1px),
    radial-gradient(circle at 66% 29%, rgba(255, 255, 255, 0.46) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 68% 74%, rgba(174, 209, 255, 0.5) 0 0.9px, transparent 1.9px),
    radial-gradient(circle at 71% 56%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2.1px),
    radial-gradient(circle at 74% 92%, rgba(161, 201, 255, 0.46) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 77% 27%, rgba(255, 255, 255, 0.56) 0 0.9px, transparent 1.9px),
    radial-gradient(circle at 80% 6%, rgba(255, 255, 255, 0.44) 0 0.75px, transparent 1.7px),
    radial-gradient(circle at 83% 77%, rgba(152, 192, 255, 0.62) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 47%, rgba(255, 255, 255, 0.48) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 88% 18%, rgba(160, 203, 255, 0.52) 0 0.85px, transparent 1.8px),
    radial-gradient(circle at 91% 42%, rgba(255, 255, 255, 0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 96% 64%, rgba(255, 255, 255, 0.56) 0 0.9px, transparent 1.9px),
    radial-gradient(circle at 98% 31%, rgba(183, 212, 255, 0.48) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 2% 57%, rgba(255, 255, 255, 0.44) 0 0.75px, transparent 1.7px),
    radial-gradient(circle at 8% 28%, rgba(167, 204, 255, 0.5) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 14% 7%, rgba(255, 255, 255, 0.52) 0 0.85px, transparent 1.8px),
    radial-gradient(circle at 20% 80%, rgba(181, 212, 255, 0.46) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 27% 39%, rgba(255, 255, 255, 0.5) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 36% 5%, rgba(153, 197, 255, 0.48) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 45% 86%, rgba(255, 255, 255, 0.5) 0 0.85px, transparent 1.8px),
    radial-gradient(circle at 59% 35%, rgba(176, 209, 255, 0.46) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 70% 18%, rgba(255, 255, 255, 0.48) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 76% 69%, rgba(166, 205, 255, 0.5) 0 0.85px, transparent 1.8px),
    radial-gradient(circle at 90% 8%, rgba(255, 255, 255, 0.46) 0 0.75px, transparent 1.7px),
    radial-gradient(circle at 94% 92%, rgba(172, 208, 255, 0.48) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 99% 49%, rgba(255, 255, 255, 0.5) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 5% 11%, rgba(255, 247, 210, 0.64) 0 0.9px, transparent 2px),
    radial-gradient(circle at 11% 67%, rgba(190, 220, 255, 0.56) 0 0.85px, transparent 1.9px),
    radial-gradient(circle at 18% 25%, rgba(255, 255, 255, 0.58) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 24% 52%, rgba(188, 122, 255, 0.54) 0 0.85px, transparent 1.9px),
    radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.6) 0 0.9px, transparent 2px),
    radial-gradient(circle at 40% 63%, rgba(173, 211, 255, 0.52) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 49% 24%, rgba(255, 228, 178, 0.58) 0 0.85px, transparent 1.9px),
    radial-gradient(circle at 57% 92%, rgba(255, 255, 255, 0.54) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 63% 13%, rgba(190, 220, 255, 0.56) 0 0.85px, transparent 1.9px),
    radial-gradient(circle at 72% 43%, rgba(255, 255, 255, 0.58) 0 0.9px, transparent 2px),
    radial-gradient(circle at 79% 96%, rgba(188, 122, 255, 0.52) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 84% 38%, rgba(255, 247, 210, 0.58) 0 0.85px, transparent 1.9px),
    radial-gradient(circle at 89% 58%, rgba(255, 255, 255, 0.56) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 93% 3%, rgba(190, 220, 255, 0.54) 0 0.85px, transparent 1.9px),
    radial-gradient(circle at 97% 86%, rgba(255, 228, 178, 0.56) 0 0.9px, transparent 2px),
    radial-gradient(circle at 52% 5%, rgba(255, 255, 255, 0.52) 0 0.75px, transparent 1.7px),
    radial-gradient(circle at 67% 67%, rgba(188, 122, 255, 0.5) 0 0.8px, transparent 1.8px),
    radial-gradient(circle at 35% 94%, rgba(190, 220, 255, 0.52) 0 0.85px, transparent 1.9px);}body.home-dashboard-page .home-cosmos::after {
  animation: home-cosmos-orbit-bright 26s ease-in-out infinite;}

body.piano-app-page[data-page="piano"][data-theme="dark"] .home-cosmos::after {
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 6% 54%, rgba(255, 255, 255, 0.96) 0 1.4px, transparent 2.7px),
    radial-gradient(circle at 13% 16%, rgba(170, 207, 255, 0.78) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 19% 84%, rgba(255, 255, 255, 0.78) 0 1.15px, transparent 2.4px),
    radial-gradient(circle at 21% 38%, rgba(255, 255, 255, 0.8) 0 1.1px, transparent 2.4px),
    radial-gradient(circle at 24% 69%, rgba(255, 255, 255, 0.92) 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 31% 41%, rgba(190, 217, 255, 0.72) 0 1.15px, transparent 2.4px),
    radial-gradient(circle at 37% 23%, rgba(128, 175, 255, 0.74) 0 1.25px, transparent 2.6px),
    radial-gradient(circle at 42% 78%, rgba(255, 255, 255, 0.82) 0 1.15px, transparent 2.5px),
    radial-gradient(circle at 49% 91%, rgba(255, 255, 255, 0.88) 0 1.35px, transparent 2.8px),
    radial-gradient(circle at 56% 7%, rgba(255, 255, 255, 0.76) 0 1.15px, transparent 2.4px),
    radial-gradient(circle at 62% 38%, rgba(255, 255, 255, 0.96) 0 1.4px, transparent 2.7px),
    radial-gradient(circle at 67% 82%, rgba(178, 211, 255, 0.78) 0 1.1px, transparent 2.4px),
    radial-gradient(circle at 73% 14%, rgba(157, 196, 255, 0.76) 0 1.25px, transparent 2.6px),
    radial-gradient(circle at 78% 63%, rgba(255, 255, 255, 0.74) 0 1.15px, transparent 2.4px),
    radial-gradient(circle at 81% 86%, rgba(255, 255, 255, 0.86) 0 1.35px, transparent 2.7px),
    radial-gradient(circle at 85% 9%, rgba(255, 255, 255, 0.78) 0 1.1px, transparent 2.4px),
    radial-gradient(circle at 89% 29%, rgba(255, 255, 255, 0.78) 0 1.15px, transparent 2.4px),
    radial-gradient(circle at 93% 51%, rgba(184, 213, 255, 0.78) 0 1.25px, transparent 2.6px),
    radial-gradient(circle at 97% 74%, rgba(255, 255, 255, 0.8) 0 1.15px, transparent 2.5px),
    radial-gradient(circle at 3% 34%, rgba(255, 255, 255, 0.78) 0 1.1px, transparent 2.4px),
    radial-gradient(circle at 16% 57%, rgba(178, 211, 255, 0.72) 0 1.15px, transparent 2.5px),
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.86) 0 1.25px, transparent 2.6px),
    radial-gradient(circle at 34% 68%, rgba(157, 196, 255, 0.76) 0 1.1px, transparent 2.4px),
    radial-gradient(circle at 47% 39%, rgba(255, 255, 255, 0.82) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 69% 24%, rgba(184, 213, 255, 0.74) 0 1.15px, transparent 2.4px),
    radial-gradient(circle at 87% 71%, rgba(255, 255, 255, 0.84) 0 1.25px, transparent 2.6px),
    radial-gradient(circle at 95% 19%, rgba(170, 207, 255, 0.76) 0 1.1px, transparent 2.4px),
    radial-gradient(circle at 8% 5%, rgba(255, 241, 196, 0.94) 0 1.25px, rgba(255, 149, 220, 0.42) 1.35px 2.2px, transparent 3.4px),
    radial-gradient(circle at 12% 79%, rgba(255, 255, 255, 0.88) 0 1.15px, rgba(123, 202, 255, 0.38) 1.25px 2.1px, transparent 3.2px),
    radial-gradient(circle at 23% 31%, rgba(255, 255, 255, 0.9) 0 1.2px, rgba(188, 122, 255, 0.42) 1.3px 2.1px, transparent 3.3px),
    radial-gradient(circle at 38% 9%, rgba(255, 241, 196, 0.88) 0 1.2px, rgba(255, 149, 220, 0.34) 1.3px 2px, transparent 3.2px),
    radial-gradient(circle at 44% 73%, rgba(255, 255, 255, 0.9) 0 1.15px, rgba(123, 202, 255, 0.38) 1.25px 2.1px, transparent 3.2px),
    radial-gradient(circle at 55% 18%, rgba(255, 255, 255, 0.92) 0 1.3px, rgba(188, 122, 255, 0.42) 1.4px 2.25px, transparent 3.4px),
    radial-gradient(circle at 60% 54%, rgba(255, 241, 196, 0.88) 0 1.2px, rgba(255, 149, 220, 0.36) 1.3px 2.05px, transparent 3.25px),
    radial-gradient(circle at 74% 7%, rgba(255, 255, 255, 0.9) 0 1.15px, rgba(123, 202, 255, 0.38) 1.25px 2.1px, transparent 3.2px),
    radial-gradient(circle at 82% 48%, rgba(255, 255, 255, 0.92) 0 1.25px, rgba(188, 122, 255, 0.42) 1.35px 2.2px, transparent 3.35px),
    radial-gradient(circle at 91% 88%, rgba(255, 241, 196, 0.88) 0 1.2px, rgba(255, 149, 220, 0.36) 1.3px 2.05px, transparent 3.25px),
    radial-gradient(circle at 99% 37%, rgba(255, 255, 255, 0.9) 0 1.15px, rgba(123, 202, 255, 0.38) 1.25px 2.1px, transparent 3.2px),
    radial-gradient(circle at 67% 92%, rgba(255, 255, 255, 0.88) 0 1.2px, rgba(188, 122, 255, 0.4) 1.3px 2.15px, transparent 3.3px);}body.home-dashboard-page .app-shell {
  position: relative;
  z-index: 1;}@keyframes home-cosmos-orbit-soft {
  0%,
  100% {
    opacity: 0.58;
    filter: brightness(0.92);
    transform: translate3d(-0.55rem, 0.42rem, 0) rotate(-1.2deg) scale(1.012);
  }

  50% {
    opacity: 0.76;
    filter: brightness(1.2);
    transform: translate3d(0.85rem, -0.62rem, 0) rotate(1.35deg) scale(1.026);
  }
}@keyframes home-cosmos-orbit-bright {
  0%,
  100% {
    opacity: 0.42;
    filter: brightness(0.95);
    transform: translate3d(0.62rem, -0.48rem, 0) rotate(1.55deg) scale(1.018);
  }

  45% {
    opacity: 0.62;
    filter: brightness(1.28);
    transform: translate3d(-0.82rem, 0.64rem, 0) rotate(-1.75deg) scale(1.032);
  }
}@keyframes home-cosmos-stardust-a {
  0%,
  100% {
    opacity: 0.44;
    filter: brightness(0.9);
    transform: translate3d(-0.25rem, 0.12rem, 0) scale(1);
  }

  50% {
    opacity: 0.72;
    filter: brightness(1.35);
    transform: translate3d(0.35rem, -0.18rem, 0) scale(1.01);
  }
}@keyframes home-cosmos-stardust-b {
  0%,
  100% {
    opacity: 0.36;
    filter: brightness(0.88);
    transform: translate3d(0.28rem, -0.16rem, 0) scale(1.004);
  }

  55% {
    opacity: 0.64;
    filter: brightness(1.3);
    transform: translate3d(-0.32rem, 0.2rem, 0) scale(1.014);
  }
}@keyframes home-cosmos-stardust-c {
  0%,
  100% {
    opacity: 0.3;
    filter: brightness(0.9);
    transform: translate3d(-0.18rem, -0.1rem, 0) scale(1.006);
  }

  48% {
    opacity: 0.56;
    filter: brightness(1.42);
    transform: translate3d(0.22rem, 0.16rem, 0) scale(1.018);
  }
}@media (prefers-reduced-motion: reduce) {body.home-dashboard-page .home-cosmos::before,
body.home-dashboard-page .home-cosmos::after,
body.home-dashboard-page .home-cosmos-stars,
body.home-dashboard-page .home-cosmos-stars::before,
body.home-dashboard-page .home-cosmos-stars::after {
    animation: none;
    transform: none;}
}@media (max-width: 700px) {body.piano-app-page[data-page="piano"][data-theme="dark"] .home-cosmos {
    background-position: center top, center;
    background-size: min(100vw, 1440px) auto, cover;}
}