/* A small material instrument; motion follows the shared stillness control. */
.sound-switch{height:40px;padding:1px 1px 1px 0;border-color:#c8ac713d;box-shadow:inset 0 1px 0 #d9ba7810,0 2px 10px #0002}
#play{width:39px;height:38px;flex-shrink:0;border-radius:50%;background:none;position:relative}
#play .music-jewel{width:38px;height:38px;display:block;overflow:visible;filter:drop-shadow(0 2px 3px #0005);transition:filter .65s ease}
#play:hover .music-jewel,#play:focus-visible .music-jewel{filter:drop-shadow(0 0 5px #74d6d640)}
.music-play-mark,.music-pause-mark{transform-origin:20px 20px;transition:opacity .55s ease,transform .75s cubic-bezier(.16,1,.3,1),filter .55s ease}
.music-pause-mark{opacity:0;transform:scale(.62);filter:blur(1px)}
#play[data-playing=true] .music-play-mark{opacity:0;transform:scale(.7);filter:blur(1px)}
#play[data-playing=true] .music-pause-mark{opacity:1;transform:scale(1);filter:blur(0)}
.music-lumen{opacity:.17;transition:opacity 1s ease}
#play:is(:hover,:focus-visible) .music-lumen{opacity:.65}
#play[data-playing=true] .music-lumen{opacity:1;animation:music-breathe 7s ease-in-out infinite}
.music-live-orbit{opacity:0;transform-origin:20px 20px;animation:music-orbit 19s linear infinite;animation-play-state:paused;transition:opacity 1.2s ease}
#play[data-playing=true] .music-live-orbit{opacity:.75;animation-play-state:running}
#play[data-loading=true] .music-live-orbit{opacity:.45;animation-play-state:running}
@keyframes music-orbit{to{transform:rotate(360deg)}}
@keyframes music-breathe{0%,100%{opacity:.65}50%{opacity:1}}
#play:disabled{opacity:.85}
@media(max-width:760px){.sound-switch{height:38px}#play{width:36px;height:36px}#play .music-jewel{width:35px;height:35px}}
@media(prefers-reduced-motion:reduce){.music-jewel *{animation:none!important;transition:none!important}}

/* V12: an engraved instrument with a quiet frame and a generous hit area. */
.sound-switch{height:40px;padding:0 4px;border:0;border-radius:0;background:linear-gradient(90deg,transparent,#08212b55 22%,#08212b55 78%,transparent);box-shadow:none;position:relative}
.sound-switch::before,.sound-switch::after{content:"";position:absolute;left:5px;right:5px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#cbb07843 20%,#cbb07843 80%,transparent)}
.sound-switch::before{top:0}.sound-switch::after{bottom:0}
#play{width:40px;height:40px;border-radius:5px;background:none}
#play .music-jewel{width:28px;height:28px;filter:drop-shadow(0 1px 2px #0005)}
#play:hover{background:transparent}
.sound-toggle{font-size:12px;line-height:1;height:40px;padding:0 9px 0 2px;gap:9px}
#music-state{display:inline-block;min-width:53px;text-align:left}
#play:focus-visible,.sound-toggle:focus-visible,#motion:focus-visible{outline:1px solid #a8d9d0;outline-offset:3px;border-radius:4px}
@media(max-width:760px){.sound-switch{height:38px}#play{width:38px;height:38px}#play .music-jewel{width:27px;height:27px}.sound-toggle{height:38px;font-size:11px;gap:7px;padding-right:7px}#music-state{min-width:48px}}
@media(max-width:350px){#music-state{display:none}.sound-toggle{padding-left:0}}

/* Let the motion instrument respond through light, without a hover container. */
#motion:is(:hover,:focus-visible){background:transparent;border-color:transparent;box-shadow:none;color:#e9d5ac}
#motion svg{transition:filter .6s ease}
#motion:is(:hover,:focus-visible) svg{filter:drop-shadow(0 0 4px #83cbd34d)}
@media(prefers-reduced-motion:reduce){#motion svg{transition:none}}