@keyframes pMantraChase1 { 
  0%, 20%, 100% { color: rgb(59, 130, 246); transform: scale(1); opacity: 0.6; filter: drop-shadow(transparent 0px 0px 0px); }
  8% { color: rgb(59, 130, 246); transform: scale(1.4); opacity: 1; filter: drop-shadow(currentcolor 0px 0px 12px); }
}
@keyframes pMantraChase2 { 
  0%, 20%, 100% { color: rgb(59, 130, 246); transform: scale(1); opacity: 0.6; filter: drop-shadow(transparent 0px 0px 0px); }
  8% { color: rgb(99, 102, 241); transform: scale(1.4); opacity: 1; filter: drop-shadow(currentcolor 0px 0px 12px); }
}
@keyframes pMantraChase3 { 
  0%, 20%, 100% { color: rgb(59, 130, 246); transform: scale(1); opacity: 0.6; filter: drop-shadow(transparent 0px 0px 0px); }
  8% { color: rgb(139, 92, 246); transform: scale(1.4); opacity: 1; filter: drop-shadow(currentcolor 0px 0px 12px); }
}
@keyframes pMantraChase4 { 
  0%, 20%, 100% { color: rgb(59, 130, 246); transform: scale(1); opacity: 0.6; filter: drop-shadow(transparent 0px 0px 0px); }
  8% { color: rgb(168, 85, 247); transform: scale(1.4); opacity: 1; filter: drop-shadow(currentcolor 0px 0px 12px); }
}
@keyframes pMantraChase5 { 
  0%, 20%, 100% { color: rgb(59, 130, 246); transform: scale(1); opacity: 0.6; filter: drop-shadow(transparent 0px 0px 0px); }
  8% { color: rgb(217, 70, 239); transform: scale(1.4); opacity: 1; filter: drop-shadow(currentcolor 0px 0px 12px); }
}
@keyframes pMantraChase6 { 
  0%, 20%, 100% { color: rgb(59, 130, 246); transform: scale(1); opacity: 0.6; filter: drop-shadow(transparent 0px 0px 0px); }
  8% { color: rgb(239, 68, 68); transform: scale(1.4); opacity: 1; filter: drop-shadow(currentcolor 0px 0px 12px); }
}
@keyframes guide-spark { 
  0%, 100% { transform: translateY(0px) rotate(-4deg); }
  50% { transform: translateY(-5px) rotate(4deg); }
}
@keyframes mirror-orbit-spin { 
  100% { transform: rotate(360deg); }
}
@keyframes mirror-note-float { 
  0%, 100% { transform: translateY(3px); }
  50% { transform: translateY(-5px); }
}
@keyframes music-game-rock { 
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(9deg); }
}
@keyframes music-game-note-hop { 
  0%, 100% { transform: translateY(0px) rotate(-12deg); }
  50% { transform: translateY(-5px) rotate(12deg); }
}
@keyframes music-game-blink { 
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.mirror-orbit { transform-origin: 32px 32px; animation: 8s linear 0s infinite normal none running mirror-orbit-spin; }
.mirror-note-left, .mirror-note-right { animation: 3s ease-in-out 0s infinite normal none running mirror-note-float; }
.mirror-note-right { animation-delay: -1.5s; }
.music-game-pad { transform-origin: 32px 40px; animation: 3s ease-in-out 0s infinite normal none running music-game-rock; }
.music-game-note { transform-origin: 34px 16px; animation: 2s ease-in-out 0s infinite normal none running music-game-note-hop; }
.music-game-button, .music-game-spark { animation: 1.8s ease-in-out 0s infinite normal none running music-game-blink; }
.music-game-button.second { animation-delay: -0.9s; }
.mirror-orbit, .music-game-pad { transform-box: view-box; }
.card .icon svg.menu-motion-icon { width: 44px; height: 44px; }
@media (prefers-reduced-motion: reduce){.mirror-orbit { animation-duration: 24s; }
.mirror-note-left, .mirror-note-right, .music-game-note, .music-game-button, .music-game-spark { animation: auto ease 0s 1 normal none running none; }
.music-game-pad { animation-duration: 8s; }
}
@keyframes lets-play-wheel-spin { 
  100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){.visual-saver span { animation-duration: 12s; }
}
.visual-saver { position: relative; width: 34px; height: 34px; overflow: hidden; border: 1px solid rgba(248, 250, 252, 0.22); border-radius: 9px; background: radial-gradient(circle, rgb(41, 52, 80) 0px, rgb(17, 24, 39) 72%); }
.visual-saver span { position: absolute; top: 2px; left: 2px; width: 7px; height: 7px; border-radius: 50%; will-change: transform; }
.visual-saver span:nth-child(1) { background: rgb(244, 114, 182); box-shadow: rgb(244, 114, 182) 0px 0px 7px; animation: 3.2s linear 0s infinite normal none running visual-saver-one; }
.visual-saver span:nth-child(2) { background: rgb(56, 189, 248); box-shadow: rgb(56, 189, 248) 0px 0px 7px; animation: 4.1s linear 0s infinite normal none running visual-saver-two; }
.visual-saver span:nth-child(3) { background: rgb(163, 230, 53); box-shadow: rgb(163, 230, 53) 0px 0px 7px; animation: 3.7s linear 0s infinite normal none running visual-saver-three; }
@keyframes visual-saver-one { 
  0%, 100% { transform: translate(0px, 2px); }
  30% { transform: translate(23px, 5px); }
  62% { transform: translate(17px, 23px); }
  82% { transform: translate(3px, 18px); }
}
@keyframes visual-saver-two { 
  0%, 100% { transform: translate(23px, 0px); }
  28% { transform: translate(2px, 9px); }
  55% { transform: translate(12px, 23px); }
  78% { transform: translate(23px, 16px); }
}
@keyframes visual-saver-three { 
  0%, 100% { transform: translate(10px, 23px); }
  27% { transform: translate(23px, 10px); }
  57% { transform: translate(8px, 1px); }
  80% { transform: translate(0px, 15px); }
}
@keyframes title-mms-keys { 
  0%, 100% { background-position: 0px 0px; filter: brightness(1); }
  50% { background-position: 24px 0px; filter: brightness(1.35); }
}
@keyframes title-mms-s-pulse { 
  0%, 100% { filter: drop-shadow(rgba(125, 211, 252, 0.25) 0px 0px 2px); }
  50% { filter: drop-shadow(rgba(244, 114, 182, 0.65) 0px 0px 12px); }
}
@keyframes eq-bounce { 
  0% { transform: scaleY(0.7); filter: hue-rotate(0deg) brightness(1); }
  100% { transform: scaleY(1.05); filter: hue-rotate(45deg) brightness(1.3); }
}
@keyframes title-mms-keys { 
  0%, 100% { background-position: 0px 0px; filter: brightness(1); }
  50% { background-position: 24px 0px; filter: brightness(1.35); }
}
@keyframes title-mms-s-pulse { 
  0%, 100% { filter: drop-shadow(rgba(125, 211, 252, 0.25) 0px 0px 2px); }
  50% { filter: drop-shadow(rgba(244, 114, 182, 0.65) 0px 0px 12px); }
}
@keyframes eq-bounce { 
  0% { transform: scaleY(0.7); filter: hue-rotate(0deg) brightness(1); }
  100% { transform: scaleY(1.05); filter: hue-rotate(45deg) brightness(1.3); }
}
@keyframes title-mms-keys { 
  0%, 100% { background-position: 0px 0px; filter: brightness(1); }
  50% { background-position: 24px 0px; filter: brightness(1.35); }
}
@keyframes title-mms-s-pulse { 
  0%, 100% { filter: drop-shadow(rgba(125, 211, 252, 0.25) 0px 0px 2px); }
  50% { filter: drop-shadow(rgba(244, 114, 182, 0.65) 0px 0px 12px); }
}
@keyframes eq-bounce { 
  0% { transform: scaleY(0.7); filter: hue-rotate(0deg) brightness(1); }
  100% { transform: scaleY(1.05); filter: hue-rotate(45deg) brightness(1.3); }
}
@keyframes hh-beat { 
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.25); }
  30% { transform: scale(1); }
  45% { transform: scale(1.25); }
  60% { transform: scale(1); }
}
@keyframes hh-float { 
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(3deg); }
}
@keyframes t-wave { 
  0%, 100% { opacity: 0; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes title-mms-keys { 
  0%, 100% { background-position: 0px 0px; filter: brightness(1); }
  50% { background-position: 24px 0px; filter: brightness(1.35); }
}
@keyframes title-mms-s-pulse { 
  0%, 100% { filter: drop-shadow(rgba(125, 211, 252, 0.25) 0px 0px 2px); }
  50% { filter: drop-shadow(rgba(244, 114, 182, 0.65) 0px 0px 12px); }
}
@keyframes eq-bounce { 
  0% { transform: scaleY(0.7); filter: hue-rotate(0deg) brightness(1); }
  100% { transform: scaleY(1.05); filter: hue-rotate(45deg) brightness(1.3); }
}
@keyframes note-dance { 
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-6deg); }
  50% { transform: translateY(0px) rotate(0deg); }
  75% { transform: translateY(-2px) rotate(6deg); }
}
@keyframes title-mms-keys { 
  0%, 100% { background-position: 0px 0px; filter: brightness(1); }
  50% { background-position: 24px 0px; filter: brightness(1.35); }
}
@keyframes title-mms-s-pulse { 
  0%, 100% { filter: drop-shadow(rgba(125, 211, 252, 0.25) 0px 0px 2px); }
  50% { filter: drop-shadow(rgba(244, 114, 182, 0.65) 0px 0px 12px); }
}
@keyframes eq-bounce { 
  0% { transform: scaleY(0.7); filter: hue-rotate(0deg) brightness(1); }
  100% { transform: scaleY(1.05); filter: hue-rotate(45deg) brightness(1.3); }
}
@keyframes drum-hit-l { 
  0%, 100% { transform: rotate(-25deg); }
  15% { transform: rotate(3deg); }
  25% { transform: rotate(0deg); }
}
@keyframes drum-hit-r { 
  0%, 100% { transform: rotate(25deg); }
  15% { transform: rotate(-3deg); }
  25% { transform: rotate(0deg); }
}
@keyframes title-mms-keys { 
  0%, 100% { background-position: 0px 0px; filter: brightness(1); }
  50% { background-position: 24px 0px; filter: brightness(1.35); }
}
@keyframes title-mms-s-pulse { 
  0%, 100% { filter: drop-shadow(rgba(125, 211, 252, 0.25) 0px 0px 2px); }
  50% { filter: drop-shadow(rgba(244, 114, 182, 0.65) 0px 0px 12px); }
}
@keyframes eq-bounce { 
  0% { transform: scaleY(0.7); filter: hue-rotate(0deg) brightness(1); }
  100% { transform: scaleY(1.05); filter: hue-rotate(45deg) brightness(1.3); }
}
@keyframes cof-spin { 
  0%, 6.33% { transform: rotate(0deg); }
  8.33%, 14.66% { transform: rotate(-30deg); }
  16.66%, 23% { transform: rotate(-60deg); }
  25%, 31.33% { transform: rotate(-90deg); }
  33.33%, 39.66% { transform: rotate(-120deg); }
  41.66%, 48% { transform: rotate(-150deg); }
  50%, 56.33% { transform: rotate(-180deg); }
  58.33%, 64.66% { transform: rotate(-210deg); }
  66.66%, 73% { transform: rotate(-240deg); }
  75%, 81.33% { transform: rotate(-270deg); }
  83.33%, 89.66% { transform: rotate(-300deg); }
  91.66%, 98% { transform: rotate(-330deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes title-mms-keys { 
  0%, 100% { background-position: 0px 0px; filter: brightness(1); }
  50% { background-position: 24px 0px; filter: brightness(1.35); }
}
@keyframes title-mms-s-pulse { 
  0%, 100% { filter: drop-shadow(rgba(125, 211, 252, 0.25) 0px 0px 2px); }
  50% { filter: drop-shadow(rgba(244, 114, 182, 0.65) 0px 0px 12px); }
}
@keyframes eq-bounce { 
  0% { transform: scaleY(0.7); filter: hue-rotate(0deg) brightness(1); }
  100% { transform: scaleY(1.05); filter: hue-rotate(45deg) brightness(1.3); }
}
@keyframes metro-swing { 
  0%, 100% { transform: rotate(-70deg); }
  50% { transform: rotate(-20deg); }
}
@keyframes maestro-baton { 
  0%, 100% { transform: rotate(-15deg); }
  28% { transform: rotate(18deg); }
  58% { transform: rotate(-5deg); }
}
@keyframes maestro-hand { 
  0%, 100% { transform: rotate(10deg); }
  50% { transform: rotate(-13deg); }
}
@keyframes maestro-body { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(0.45px); }
}
@keyframes focus-lens { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-1.5px); }
}
@keyframes title-mms-keys { 
  0%, 100% { background-position: 0px 0px; filter: brightness(1); }
  50% { background-position: 24px 0px; filter: brightness(1.35); }
}
@keyframes title-mms-s-pulse { 
  0%, 100% { filter: drop-shadow(rgba(125, 211, 252, 0.25) 0px 0px 2px); }
  50% { filter: drop-shadow(rgba(244, 114, 182, 0.65) 0px 0px 12px); }
}
@keyframes eq-bounce { 
  0% { transform: scaleY(0.7); filter: hue-rotate(0deg) brightness(1); }
  100% { transform: scaleY(1.05); filter: hue-rotate(45deg) brightness(1.3); }
}
@keyframes sing-wave { 
  0%, 100% { opacity: 0; transform: translateX(-1px); }
  50% { opacity: 1; transform: translateX(1px); }
}
@keyframes title-mms-keys { 
  0%, 100% { background-position: 0px 0px; filter: brightness(1); }
  50% { background-position: 24px 0px; filter: brightness(1.35); }
}
@keyframes title-mms-s-pulse { 
  0%, 100% { filter: drop-shadow(rgba(125, 211, 252, 0.25) 0px 0px 2px); }
  50% { filter: drop-shadow(rgba(244, 114, 182, 0.65) 0px 0px 12px); }
}
@keyframes eq-bounce { 
  0% { transform: scaleY(0.7); filter: hue-rotate(0deg) brightness(1); }
  100% { transform: scaleY(1.05); filter: hue-rotate(45deg) brightness(1.3); }
}
@keyframes draw-clef { 
  0% { stroke-dashoffset: 100; opacity: 0; }
  5% { stroke-dashoffset: 100; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes title-mms-keys { 
  0%, 100% { background-position: 0px 0px; filter: brightness(1); }
  50% { background-position: 24px 0px; filter: brightness(1.35); }
}
@keyframes title-mms-s-pulse { 
  0%, 100% { filter: drop-shadow(rgba(125, 211, 252, 0.25) 0px 0px 2px); }
  50% { filter: drop-shadow(rgba(244, 114, 182, 0.65) 0px 0px 12px); }
}
@keyframes eq-bounce { 
  0% { transform: scaleY(0.7); filter: hue-rotate(0deg) brightness(1); }
  100% { transform: scaleY(1.05); filter: hue-rotate(45deg) brightness(1.3); }
}
@keyframes dna-float { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}
@keyframes title-mms-keys { 
  0%, 100% { background-position: 0px 0px; filter: brightness(1); }
  50% { background-position: 24px 0px; filter: brightness(1.35); }
}
@keyframes title-mms-s-pulse { 
  0%, 100% { filter: drop-shadow(rgba(125, 211, 252, 0.25) 0px 0px 2px); }
  50% { filter: drop-shadow(rgba(244, 114, 182, 0.65) 0px 0px 12px); }
}
@keyframes eq-bounce { 
  0% { transform: scaleY(0.7); filter: hue-rotate(0deg) brightness(1); }
  100% { transform: scaleY(1.05); filter: hue-rotate(45deg) brightness(1.3); }
}
@keyframes float-mn1 { 
  0%, 100% { transform: translate(-6px, 6px) scale(0.55) rotate(-10deg); }
  50% { transform: translate(-6px, 9px) scale(0.55) rotate(-5deg); }
}
@keyframes float-mn2 { 
  0%, 100% { transform: translate(6px, -5px) scale(0.5) rotate(15deg); }
  50% { transform: translate(7px, -3px) scale(0.5) rotate(10deg); }
}
@keyframes float-mn3 { 
  0%, 100% { transform: translate(-7px, -4px) scale(0.4) rotate(-25deg); opacity: 0.6; }
  50% { transform: translate(-8px, -6px) scale(0.4) rotate(-20deg); opacity: 0.9; }
}
@keyframes float-mn4 { 
  0%, 100% { transform: translate(5px, 7px) scale(0.5) rotate(5deg); opacity: 0.8; }
  50% { transform: translate(4px, 9px) scale(0.5) rotate(10deg); opacity: 1; }
}
@keyframes eq-bounce { 
  0% { transform: scaleY(0.7); filter: hue-rotate(0deg) brightness(1); }
  100% { transform: scaleY(1.05); filter: hue-rotate(45deg) brightness(1.3); }
}

.category-icon .visual-saver{width:100%;height:100%;min-width:0;min-height:0;border-radius:6px}.category-icon .visual-saver span{width:22%;height:22%}
@media(prefers-reduced-motion:reduce){.category-icon *{animation:none!important}}

.category-icon{position:relative}.category-icon>svg{width:100%!important;height:100%!important}.category-icon .visual-saver{position:absolute;width:48px;height:48px;left:50%;top:50%;margin:-24px;transform:scale(.5)}

/* Keep the visual companion's original three moving lights visible. */
.category-icon .visual-saver span:nth-child(1){animation:visual-saver-one 3.2s linear infinite!important}
.category-icon .visual-saver span:nth-child(2){animation:visual-saver-two 4.1s linear infinite!important}
.category-icon .visual-saver span:nth-child(3){animation:visual-saver-three 3.7s linear infinite!important}
@media(prefers-reduced-motion:reduce){.category-icon .visual-saver span{animation-duration:12s!important}}

/* Explicitly requested gentle movement for harmony and game icons. */
.category-icon .mirror-orbit{transform-origin:32px 32px;transform-box:view-box;animation:mirror-orbit-spin 14s linear infinite!important}
.category-icon .mirror-note-left,.category-icon .mirror-note-right{animation:menu-mirror-sway 3.6s ease-in-out infinite!important}
.category-icon .mirror-note-right{animation-delay:-1.8s!important}
.category-icon .music-game-pad{transform-origin:32px 40px;transform-box:view-box;animation:menu-game-sway 3.8s ease-in-out infinite!important}
.category-icon .music-game-note{animation:menu-note-bob 2.8s ease-in-out infinite!important}
.category-icon .music-game-button,.category-icon .music-game-spark{animation:music-game-blink 2.6s ease-in-out infinite!important}
.category-icon .music-game-button.second{animation-delay:-1.3s!important}
@keyframes menu-mirror-sway{0%,100%{transform:translateY(2px)}50%{transform:translateY(-2px)}}
@keyframes menu-game-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes menu-note-bob{0%,100%{transform:translateY(1px)}50%{transform:translateY(-3px)}}