.studio-music { position: fixed; left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 80; font-family: 'Space Grotesk', sans-serif; }
.studio-music[hidden], .booting .studio-music { display: none; }
.studio-music-toggle { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #333147; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .3s ease !important; }
.studio-music-toggle img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: filter .3s ease !important; }
.studio-music-toggle:focus-visible { outline: 3px solid #5367d5; outline-offset: 5px; }
.studio-music-toggle:hover, .studio-music-toggle:focus-visible { background: transparent; transform: scale(1.14); }
.studio-music-toggle:hover img, .studio-music-toggle:focus-visible img { filter: brightness(1.18) drop-shadow(0 0 7px #a59bff80); }
.studio-music[data-state="playing"] .studio-music-toggle img { animation: studio-music-breathe 3s ease-in-out infinite !important; }
@keyframes studio-music-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.studio-music-hint { position: absolute; bottom: 64px; left: 0; white-space: nowrap; padding: 9px 12px; border: 1px solid #33314760; border-radius: 12px 12px 12px 3px; background: #fff8e7; color: #333147; box-shadow: 2px 3px 0 #33314720; font-size: 11px; pointer-events: none; opacity: 0; transform-origin: 22px bottom; }
.studio-music-hint.is-visible { animation: studio-music-pop 5s both !important; }
@keyframes studio-music-pop {
  0% { opacity: 0; transform: translateY(9px) scale(.65); }
  6% { opacity: 1; transform: translateY(-3px) scale(1.09); }
  10% { opacity: 1; transform: translateY(1px) scale(.97); }
  14%,86% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-5px) scale(.98); }
}
.studio-music-notes { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.studio-music-note { position: absolute; left: calc(50% - 12px); top: calc(50% - 12px); width: 24px; height: 24px; opacity: 0; pointer-events: none; filter: drop-shadow(0 1px 2px #eeecff80); animation: studio-music-drift var(--note-duration, 3.2s) ease-out forwards !important; }
.studio-music-note img { display: block; width: 100%; height: 100%; object-fit: contain; }
@keyframes studio-music-drift {
  0% { opacity: 0; transform: translate(0, 0) scale(.35) rotate(0deg); }
  20% { opacity: .95; transform: translate(var(--note-mid-x), -28px) scale(.8) rotate(var(--note-turn)); }
  65% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--note-end-x), var(--note-rise)) scale(1.05) rotate(var(--note-turn)); }
}
@media (max-width: 760px) { .studio-music { left: max(14px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); } .studio-music-toggle { width: 48px; height: 48px; } }
/* These subtle music effects are explicitly requested for the Studio control. */