Error budget

<div class="demo"><div class="title">ERROR BUDGET</div><div class="scene"><div class="reservoir"><div id="fill"></div></div><div class="readout"><span id="remaining">100% left</span><b id="release">RELEASE</b></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}.scene{flex-direction:column;gap:10px}.reservoir{width:85%;height:42%;border:2px solid var(--line);border-radius:7px;display:flex;align-items:flex-end;overflow:hidden}.reservoir div{width:100%;height:100%;background:var(--accent);transition:height .6s}.readout{width:85%;display:flex;justify-content:space-between;gap:5px;font:700 clamp(12px,2.4vmin,15px)/1.2 ui-monospace,monospace}.readout b{color:var(--accent)}

const levels=[100,76,47,18,100];let n=0;function tick(){const v=levels[n];document.getElementById("fill").style.height=v+"%";document.getElementById("remaining").textContent=v+"% left";const label=document.getElementById("release");label.textContent=v<25?"STABILIZE":"RELEASE";label.style.color=v<25?"var(--accent-3)":"var(--accent)";n=(n+1)%levels.length}tick();setInterval(tick,800)