Wi-Fiアイコン点滅オフライン表示

<div class="d11-14-03-wrap">
          <div class="d11-14-03-frame">
            <div class="d11-14-03-iconwrap">
              <svg class="d11-14-03-wifi" id="d1959Wifi" viewBox="0 0 24 24" width="40" height="40">
                <path class="d11-14-03-arc" d="M2 8.5C6 4.8 9.8 3 12 3s6 1.8 10 5.5" fill="none" stroke-width="2" stroke-linecap="round"/>
                <path class="d11-14-03-arc" d="M5.2 12.3C7.6 10 9.8 9 12 9s4.4 1 6.8 3.3" fill="none" stroke-width="2" stroke-linecap="round"/>
                <path class="d11-14-03-arc" d="M8.6 16C9.9 14.8 10.9 14.3 12 14.3s2.1.5 3.4 1.7" fill="none" stroke-width="2" stroke-linecap="round"/>
                <circle class="d11-14-03-dot" cx="12" cy="19.4" r="1.6"/>
                <line class="d11-14-03-slash" x1="3" y1="3" x2="21" y2="21" stroke-width="2.2" stroke-linecap="round"/>
              </svg>
              <p class="d11-14-03-status" id="d1959Status">接続済み</p>
            </div>
          </div>
          <button type="button" class="d11-14-03-toggle" id="d1959Toggle">オフラインを再現する</button>
        </div>

.d11-14-03-wrap{width:100%;display:flex;flex-direction:column;align-items:center}
        .d11-14-03-frame{width:100%;height:150px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3}
        .d11-14-03-iconwrap{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d11-14-03-arc{stroke:#4f46e5;transition:stroke .25s}
        .d11-14-03-dot{fill:#4f46e5;transition:fill .25s}
        .d11-14-03-slash{stroke:#dc2626;opacity:0;transition:opacity .25s}
        .d11-14-03-wifi.is-offline .d11-14-03-arc{stroke:#e5e7eb}
        .d11-14-03-wifi.is-offline .d11-14-03-dot{fill:#e5e7eb}
        .d11-14-03-wifi.is-offline .d11-14-03-slash{opacity:1}
        .d11-14-03-wifi.is-offline{animation:d1959Blink 1.1s ease-in-out infinite}
        @keyframes d1959Blink{0%,100%{opacity:1}50%{opacity:.35}}
        .d11-14-03-status{margin:0;font-size:11.5px;font-weight:700;color:#4f46e5}
        .d11-14-03-wifi.is-offline + .d11-14-03-status,.d11-14-03-iconwrap:has(.is-offline) .d11-14-03-status{color:#dc2626}
        .d11-14-03-toggle{margin-top:12px;width:100%;padding:9px;border-radius:8px;border:1px solid #d1d5db;background:#fff;color:#374151;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s}
        .d11-14-03-toggle:hover{background:#f3f4f6}

(function(){
        var root=document.querySelector('.d11-14-03');
        var wifi=root.querySelector('#d1959Wifi');
        var status=root.querySelector('#d1959Status');
        var btn=root.querySelector('#d1959Toggle');
        var offline=false;
        btn.addEventListener('click',function(){
          offline=!offline;
          wifi.classList.toggle('is-offline',offline);
          status.textContent=offline?'オフライン':'接続済み';
          status.style.color=offline?'#dc2626':'#4f46e5';
          btn.textContent=offline?'オンラインに戻す':'オフラインを再現する';
        });
      })();