Service level objective

<div class="demo"><div class="title">SLO TARGET: 99%</div><div class="scene"><div class="plot"><div class="target">99% target</div><div class="actual" id="actual">99.3%</div><div class="dot" id="dot"></div></div></div></div>

.demo{width:min(94vw,690px);height:min(88vh,320px);box-sizing:border-box;padding:clamp(9px,2.5vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);font:600 clamp(12px,2.4vmin,16px)/1.25 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);overflow:hidden}.title{color:var(--accent);font:700 clamp(12px,2.4vmin,16px)/1.2 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);letter-spacing:.04em}.scene{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.plot{width:90%;height:75%;position:relative;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}.target{position:absolute;top:35%;width:100%;border-top:2px dashed var(--accent);padding-top:3px;color:var(--accent)}.actual{position:absolute;right:3px;top:8%;font:700 clamp(18px,5vmin,30px)/1 ui-monospace,monospace}.dot{position:absolute;left:28%;top:18%;width:15px;height:15px;border-radius:50%;background:var(--accent-2);transition:top .6s,background .6s}.plot.below .dot{top:64%;background:var(--accent-3)}

let below=false;function tick(){below=!below;document.querySelector(".plot").classList.toggle("below",below);document.getElementById("actual").textContent=below?"98.6%":"99.3%"}setInterval(tick,1400);document.querySelector(".demo").addEventListener("pointerdown",tick)