@import url("https://compass-song-video-studio-preview-43l48sc4s-compass-sen-support.vercel.app/assets/music-celestial.css");

/* Piano black buttons / gold lettering / restrained multicolour ring lights. */
.music-embed .ms-pro-tabs button,
.music-embed .ms-pill,
.music-embed .ms-primary,
.music-embed .ms-secondary,
.music-embed .ms-toolbar button,
.music-embed .ms-text-button{
 --music-ring:#c3a168;
 position:relative!important;
 border:1px solid var(--music-ring)!important;
 border-bottom:3px solid color-mix(in srgb,var(--music-ring),#111 43%)!important;
 border-radius:10px!important;
 background:linear-gradient(125deg,transparent 8%,#fff7db22 22%,transparent 36%),linear-gradient(180deg,#49424f 0%,#1c1823 25%,#09080e 66%,#1b1521 100%)!important;
 color:#f5d58a!important;
 text-shadow:0 1px 2px #000!important;
 box-shadow:inset 0 2px #ffffff5b,inset 0 -2px #000,0 3px 0 #0b090f,0 5px 9px #04020aaf,0 0 7px color-mix(in srgb,var(--music-ring),transparent 70%)!important;
}
/* Genre and instrument indicator rings: the face remains black. */
.music-embed #kind-options button:nth-child(1){--music-ring:#ff8fd2}
.music-embed #kind-options button:nth-child(2){--music-ring:#64dae6}
.music-embed #genre-options button:nth-child(1){--music-ring:#ffbd74}
.music-embed #genre-options button:nth-child(2){--music-ring:#8fe8a8}
.music-embed #genre-options button:nth-child(3){--music-ring:#c08bff}
.music-embed #genre-options button:nth-child(4){--music-ring:#5cbfe9}
.music-embed #genre-options button:nth-child(5){--music-ring:#f58ad0}
.music-embed #genre-options button:nth-child(6){--music-ring:#ffc17b}
.music-embed #genre-options button:nth-child(7){--music-ring:#8b9bff}
.music-embed #instrument-options button:nth-child(5n + 1){--music-ring:#66d9ee}
.music-embed #instrument-options button:nth-child(5n + 2){--music-ring:#8de3aa}
.music-embed #instrument-options button:nth-child(5n + 3){--music-ring:#dcb37a}
.music-embed #instrument-options button:nth-child(5n + 4){--music-ring:#f48ac3}
.music-embed #instrument-options button:nth-child(5n + 5){--music-ring:#ad98ff}
.music-embed #ms-view-create{--music-ring:#ebb96e}
.music-embed #ms-view-mix{--music-ring:#9a88d9}
.music-embed #generate,.music-embed #extend{--music-ring:#e7bf70}
.music-embed #save-project,.music-embed #save-results{--music-ring:#68e0bf}
.music-embed .ms-pill.is-selected,
.music-embed .ms-pro-tabs button.is-active,
.music-embed .ms-primary{
 color:#ffe1a0!important;
 background:linear-gradient(120deg,transparent 7%,#ffffff1c 23%,transparent 40%),linear-gradient(180deg,#55505d 0%,#221c29 24%,#08090f 68%,#241929 100%)!important;
 box-shadow:inset 0 2px #ffffff94,inset 0 -2px #000,0 3px 0 #08080c,0 6px 12px #04020bce,0 0 13px color-mix(in srgb,var(--music-ring),transparent 25%)!important;
}
.music-embed .ms-pill:hover:not(:disabled),
.music-embed .ms-pro-tabs button:hover:not(:disabled),
.music-embed .ms-primary:hover:not(:disabled),
.music-embed .ms-secondary:hover:not(:disabled),
.music-embed .ms-text-button:hover:not(:disabled){
 transform:translateY(-2px)!important;
 filter:brightness(1.13)!important;
 box-shadow:inset 0 2px #ffffff91,0 5px 0 #09070e,0 9px 14px #000c,0 0 14px var(--music-ring)!important;
}
.music-embed .ms-pill:active:not(:disabled),
.music-embed .ms-pro-tabs button:active:not(:disabled),
.music-embed .ms-primary:active:not(:disabled),
.music-embed .ms-secondary:active:not(:disabled){
 transform:translateY(2px)!important;
 box-shadow:inset 0 3px 6px #000b,0 1px 0 #08080e,0 0 10px var(--music-ring)!important;
}
.music-embed .ms-pill:focus-visible,.music-embed .ms-primary:focus-visible,.music-embed .ms-pro-tabs button:focus-visible{outline:2px solid #f5dca2;outline-offset:3px}


/* Selected buttons keep their OWN colour-coded ring — do not default to gold. */
.music-embed .ms-pill.is-selected,
.music-embed .ms-pro-tabs button.is-active,
.music-embed .ms-primary{
 border:1px solid var(--music-ring)!important;
 border-bottom:3px solid color-mix(in srgb,var(--music-ring),#151018 45%)!important;
}


/* Entire Music Production: pearl-white button labels on original dark faces / coloured rings. */
.music-embed button,
.music-embed button *,
.music-embed .ms-pill,
.music-embed .ms-pill.is-selected,
.music-embed .ms-pro-tabs button,
.music-embed .ms-pro-tabs button.is-active,
.music-embed .ms-primary,
.music-embed .ms-secondary,
.music-embed .ms-text-button,
.music-embed .ms-toolbar button {
 color:#f5f7ff!important;
 -webkit-text-fill-color:#f5f7ff!important;
 text-shadow:0 1px 2px #05070d!important;
}
.music-embed button:disabled,
.music-embed button:disabled *{
 color:#f5f7ff!important;
 -webkit-text-fill-color:#f5f7ff!important;
}


/* Animated record-speaker, sound pressure rings and flowing notation. */
.music-embed .ms-deck-art{isolation:isolate;overflow:visible!important;}
.music-embed .ms-deck-orbit{
 position:relative!important;
 transform-origin:center center;
 animation:compass-speaker-bass 1.3s cubic-bezier(.42,0,.4,1) infinite!important;
 filter:drop-shadow(0 0 7px #b9a4ff82)!important;
}
.music-embed .ms-deck-core{
 position:relative!important;
 color:#ffe5a7!important;
 text-shadow:0 0 10px #fbc87a,0 0 17px #b58aff!important;
 animation:compass-speaker-cone 1.3s cubic-bezier(.36,0,.55,1) infinite!important;
}
.music-embed .ms-deck-orbit::before,
.music-embed .ms-deck-orbit::after{
 content:"";position:absolute;inset:-8px;border:2px solid #9bdff9aa;border-radius:50%;
 pointer-events:none;opacity:0;z-index:-1;
 animation:compass-speaker-wave 2.8s ease-out infinite!important;
}
.music-embed .ms-deck-orbit::after{
 border-color:#dfb2ffa6;animation-delay:1.4s!important;
}
.music-embed #ms-listening-deck{
 position:relative!important;overflow:visible!important;
}
.music-embed .ms-deck-bars span{
 transform-origin:bottom center;
 animation:compass-spectrum-bounce .85s ease-in-out infinite alternate!important;
}
.music-embed .ms-deck-bars span:nth-child(3n + 1){animation-duration:.68s!important;animation-delay:-.35s!important}
.music-embed .ms-deck-bars span:nth-child(3n + 2){animation-duration:1.08s!important;animation-delay:-.55s!important}
.music-embed .ms-deck-bars span:nth-child(3n){animation-duration:.91s!important;animation-delay:-.7s!important}
.music-embed .ms-deck-art{z-index:3!important;}
.music-embed .ms-floating-note-layer{
 position:fixed!important;inset:0!important;z-index:14!important;
 overflow:hidden!important;pointer-events:none!important;
 contain:layout style;
}
.music-embed .ms-floating-note{
 --note-colour:#bceeff;
 position:absolute!important;top:var(--note-y,40%)!important;left:var(--note-x,70%)!important;
 font:900 var(--note-size,21px)/1 Georgia,serif!important;
 color:var(--note-colour)!important;
 text-shadow:0 0 7px var(--note-colour),0 0 15px #d1aaf9a3,0 1px 2px #0b0718!important;
 filter:drop-shadow(0 0 3px var(--note-colour));
 white-space:nowrap;opacity:0;transform:translate3d(0,0,0) scale(.5);
 will-change:transform,opacity;
 animation:compass-note-flight var(--note-duration,6s) ease-out infinite;
 animation-delay:var(--note-delay,0s);
}
.music-embed .ms-floating-note:nth-child(4n + 1){--note-colour:#ffdd9c}
.music-embed .ms-floating-note:nth-child(4n + 2){--note-colour:#8ff2f3}
.music-embed .ms-floating-note:nth-child(4n + 3){--note-colour:#e6b4ff}
.music-embed .ms-floating-note:nth-child(4n + 4){--note-colour:#f5f7ff}
@keyframes compass-speaker-bass{
 0%,100%{transform:scale(1)}
 15%{transform:scale(1.1)}
 28%{transform:scale(.96)}
 48%{transform:scale(1.07)}
 64%{transform:scale(.98)}
}
@keyframes compass-speaker-cone{
 0%,100%{transform:translateZ(0) scale(1)}
 14%{transform:scale(1.17)}
 29%{transform:scale(.91)}
 49%{transform:scale(1.12)}
 64%{transform:scale(.97)}
}
@keyframes compass-speaker-wave{
 0%{transform:scale(.74);opacity:.62}
 65%{opacity:.15}
 100%{transform:scale(2.15);opacity:0}
}
@keyframes compass-spectrum-bounce{
 from{transform:scaleY(.45);opacity:.54}
 to{transform:scaleY(1.15);opacity:1}
}
@keyframes compass-note-flight{
 0%{transform:translate3d(0,0,0) scale(.43) rotate(-22deg);opacity:0}
 8%{opacity:.88}
 24%{transform:translate3d(calc(var(--travel-x) * .24),calc(var(--travel-y) * .24 - 22px),0) scale(.82) rotate(10deg);opacity:.75}
 50%{transform:translate3d(calc(var(--travel-x) * .5),calc(var(--travel-y) * .5 + 19px),0) scale(1.05) rotate(-9deg);opacity:.66}
 80%{opacity:.39}
 100%{transform:translate3d(var(--travel-x),var(--travel-y),0) scale(.77) rotate(21deg);opacity:0}
}
/* When real audio plays, increase energy rather than implying audio starts automatically. */
.music-embed.ms-audio-playing .ms-deck-orbit{animation-duration:.62s!important;}
.music-embed.ms-audio-playing .ms-deck-core{animation-duration:.62s!important;}
.music-embed.ms-audio-playing .ms-floating-note{animation-duration:calc(var(--note-duration,6s) * .67)!important;}
@media(prefers-reduced-motion:reduce){
 .music-embed .ms-deck-orbit,.music-embed .ms-deck-core,
 .music-embed .ms-deck-orbit::before,.music-embed .ms-deck-orbit::after,
 .music-embed .ms-deck-bars span,.music-embed .ms-floating-note{
  animation:none!important;transform:none!important;
 }
 .music-embed .ms-floating-note{display:none!important}
}


/* Keep the work area clear; only the small speaker pulses. */
.music-embed .ms-floating-note-layer{display:none!important}

/* Finished tracks stay selectable in Listen & Keep; playback lives in the bottom bar. */
.music-embed .ms-result{
 position:relative;
 padding:12px!important;
 border:1px solid #6ba9d0!important;
 border-radius:12px!important;
 background:
  radial-gradient(ellipse at 100% 0%,#a985e921,transparent 55%),
  linear-gradient(145deg,#2a2c40,#121625 70%,#1b1930)!important;
 box-shadow:inset 0 1px #ffffff39,0 5px 13px #04061286,0 0 13px #6bd1e82b!important;
}
.music-embed .ms-result strong{color:#f4f8ff!important;text-shadow:0 1px 3px #050510!important}
.music-embed .ms-result a{
 display:inline-flex!important;align-items:center;
 color:#d4ebff!important;text-decoration:none!important;
 border:1px solid #7d9ed066;border-radius:7px;
 padding:5px 8px!important;background:#1c2838!important;font-size:11px!important;
}
.music-embed .ms-result .ms-dock-select{
 display:inline-flex!important;justify-content:center;align-items:center!important;
 min-height:36px!important;gap:7px;
 border:1px solid #7cf0e8!important;border-bottom:3px solid #2f9996!important;
 border-radius:9px!important;padding:7px 11px!important;
 background:linear-gradient(135deg,#334454,#0b1521 68%,#19263b)!important;
 color:#f5fbff!important;font-weight:850!important;font-size:12px!important;
 box-shadow:inset 0 2px #ffffff59,0 3px 0 #040713,0 0 12px #78eaf16b!important;
 cursor:pointer!important;
}
.music-embed .ms-result .ms-dock-select:hover{filter:brightness(1.15)!important;box-shadow:inset 0 2px #ffffff9a,0 3px 0 #040713,0 0 16px #8df5ed!important}



/* Persistent selected-state light: Music Production genres, types, instruments.
   This visual state follows existing is-selected/aria-pressed state and stays
   illuminated after mouse exit, refresh, and switching between genres. */
.music-embed #genre-options .ms-pill:not(.is-selected):not(:hover),
.music-embed #kind-options .ms-pill:not(.is-selected):not(:hover),
.music-embed #instrument-options .ms-pill:not(.is-selected):not(:hover){
 filter:brightness(.83) saturate(.78)!important;
}
.music-embed #genre-options .ms-pill.is-selected,
.music-embed #kind-options .ms-pill.is-selected,
.music-embed #instrument-options .ms-pill.is-selected {
 background:
  linear-gradient(165deg,
   color-mix(in srgb,var(--music-ring) 55%,#303044) 0%,
   color-mix(in srgb,var(--music-ring) 30%,#171322) 45%,
   #12131e 100%)!important;
 border:2px solid var(--music-ring)!important;
 border-bottom:3px solid color-mix(in srgb,var(--music-ring),#17131d 30%)!important;
 color:#fff!important;
 -webkit-text-fill-color:#fff!important;
 filter:brightness(1.12) saturate(1.2)!important;
 box-shadow:
   inset 0 2px 1px #ffffffaa,inset 0 -3px 8px #0006,
   0 2px 0 #08070e,0 5px 12px #000a,
   0 0 0 2px color-mix(in srgb,var(--music-ring),transparent 63%),
   0 0 20px color-mix(in srgb,var(--music-ring),transparent 8%)!important;
}
.music-embed #genre-options .ms-pill.is-selected::after{
 content:"✓";
 position:absolute;right:-5px;top:-7px;
 width:16px;height:16px;display:grid;place-items:center;
 border-radius:50%;border:1px solid #ffffffde;
 background:var(--music-ring);color:#15111f!important;
 text-shadow:none!important;
 font-size:11px;line-height:1;font-weight:900;
 box-shadow:0 2px 5px #0009,0 0 9px var(--music-ring);
 pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
 .music-embed #genre-options .ms-pill.is-selected,
 .music-embed #kind-options .ms-pill.is-selected,
 .music-embed #instrument-options .ms-pill.is-selected {transition:none!important;}
}