Content attribution

<div class="attrib"><div class="model"><button class="on">FIRST</button><button>EVEN</button><button>LAST</button></div><div class="path"><div><b>INTRO</b><i></i><span id="credit-a">70%</span></div><div><b>GUIDE</b><i></i><span id="credit-b">20%</span></div><div><b>CASE</b><i></i><span id="credit-c">10%</span></div></div><small>ONE PATH / THREE CREDIT MODELS</small></div>

.attrib{width:min(89%,620px);font:800 clamp(12px,3vmin,18px) var(--font-sans);display:grid;gap:clamp(7px,2.5vmin,15px)}.attrib .model{display:flex;gap:5px}.attrib button{flex:1;border:2px solid var(--fg);background:var(--surface);color:var(--fg);font:800 12px var(--font-sans);padding:clamp(5px,2vmin,11px);cursor:pointer}.attrib button.on{background:var(--accent-2);color:#211b19}.attrib .path{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(5px,2vmin,12px)}.attrib .path div{position:relative;border:2px solid var(--fg);background:var(--surface);height:clamp(58px,20vmin,110px);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(5px,2vmin,12px)}.attrib .path b,.attrib .path span{font-size:12px;z-index:1}.attrib .path span{text-align:right}.attrib .path i{position:absolute;bottom:0;left:0;right:0;background:var(--accent-2);opacity:.6;transition:height .5s}.attrib small{font-size:12px;color:var(--muted);text-align:center}

const values=[[70,20,10],[33,34,33],[10,20,70]];const buttons=[...document.querySelectorAll('.model button')];const bars=[...document.querySelectorAll('.path i')];const labels=['credit-a','credit-b','credit-c'].map(id=>document.getElementById(id));let model=0;function show(i){model=i;buttons.forEach((b,n)=>b.classList.toggle('on',n===i));values[i].forEach((v,n)=>{bars[n].style.height=v+'%';labels[n].textContent=v+'%'})}buttons.forEach((b,i)=>b.onclick=()=>show(i));show(0);setInterval(()=>show((model+1)%3),2800);