Pomodoro Focus Timer

<div class="w"><div class="ring"></div><div class="t"><span id="m">25</span><s id="c">:</s><span id="s">00</span></div><p>FOCUS</p><button id="b" aria-label="Start">▶</button></div>

.w{position:relative;width:180px;height:180px;border-radius:40px;background:#0d0d0d;color:#fff;font-family:system-ui,sans-serif;box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}.ring{position:absolute;inset:16px;border-radius:50%;border:1px solid rgba(255,255,255,.22)}.t{position:absolute;top:68px;left:0;right:0;text-align:center;font-size:30px;font-weight:300;font-variant-numeric:tabular-nums}.t s{text-decoration:none;color:#888;margin:0 2px}p{position:absolute;top:108px;left:0;right:0;text-align:center;margin:0;font-size:9px;letter-spacing:.25em;color:#777}button{position:absolute;right:14px;bottom:14px;width:30px;height:30px;border-radius:50%;border:0;background:#262626;color:#fff;font-size:10px;cursor:pointer}.run #c{animation:k 1s steps(1) infinite}@keyframes k{50%{opacity:.2}}

let left=1500,id=null;const m=document.getElementById("m"),s=document.getElementById("s"),b=document.getElementById("b"),w=document.querySelector(".w");const r=()=>{m.textContent=String(Math.floor(left/60)).padStart(2,"0");s.textContent=String(left%60).padStart(2,"0")};b.onclick=()=>{if(id){clearInterval(id);id=null;w.classList.remove("run");b.textContent="▶"}else{w.classList.add("run");b.textContent="❚❚";id=setInterval(()=>{if(left>0){left--;r()}else{clearInterval(id);id=null;w.classList.remove("run")}},1000)}};