動く背景+再生/ミュートコントロールUI

<div class="d07-10-06-outer">
          <div class="d07-10-06-frame">
            <div class="d07-10-06-bg"></div>
            <div class="d07-10-06-bar">
              <button class="d07-10-06-btn d07-10-06-play" type="button" aria-label="再生・停止" aria-pressed="true">&#10074;&#10074;</button>
              <div class="d07-10-06-progress"><span class="d07-10-06-fill"></span></div>
              <button class="d07-10-06-btn d07-10-06-mute" type="button" aria-label="ミュート切替" aria-pressed="false">&#128266;</button>
            </div>
          </div>
        </div>

.d07-10-06-outer{display:flex;align-items:center;justify-content:center;width:100%}
        .d07-10-06-frame{position:relative;width:240px;height:150px;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.25)}
        .d07-10-06-bg{position:absolute;inset:0;background:linear-gradient(120deg,#312e81,#be185d,#312e81);background-size:280% 280%;animation:d1336move 13s ease-in-out infinite}
        .d07-10-06-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent)}
        .d07-10-06-btn{border:none;background:rgba(255,255,255,.18);color:#fff;width:26px;height:26px;border-radius:50%;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}
        .d07-10-06-btn:hover{background:rgba(255,255,255,.32)}
        .d07-10-06-progress{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden}
        .d07-10-06-fill{display:block;height:100%;width:35%;background:#fff;border-radius:99px}
        @keyframes d1336move{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        @media (prefers-reduced-motion: reduce){
          .d07-10-06-bg{animation:none;background-position:50% 50%}
        }

(function(){
        var root=document.querySelector('#item-07-10-06 .d07-10-06-frame');if(!root)return;
        var bg=root.querySelector('.d07-10-06-bg');
        var playBtn=root.querySelector('.d07-10-06-play');
        var muteBtn=root.querySelector('.d07-10-06-mute');
        playBtn.addEventListener('click',function(){
          var playing=playBtn.getAttribute('aria-pressed')==='true';
          playBtn.setAttribute('aria-pressed',String(!playing));
          playBtn.innerHTML=playing?'▶':'❚❚';
          bg.style.animationPlayState=playing?'paused':'running';
        });
        muteBtn.addEventListener('click',function(){
          var muted=muteBtn.getAttribute('aria-pressed')==='true';
          muteBtn.setAttribute('aria-pressed',String(!muted));
          muteBtn.innerHTML=muted?'🔊':'🔇';
        });
      })();