Interview content

<div class="interview"><div class="timeline"><i></i><b>00:00</b><b>06:20</b></div><div class="questions"><button class="on">01 WHY?</button><button>02 HOW?</button><button>03 LEARNED?</button></div><div class="quote"><small>SELECTED ANSWER</small><strong id="interview-answer">THE PROBLEM WE SAW</strong></div></div>

.interview{width:min(89%,620px);font:800 clamp(12px,3vmin,18px) var(--font-sans);display:grid;gap:clamp(5px,2vmin,12px)}.timeline{height:clamp(24px,7vmin,40px);border-bottom:3px solid var(--fg);display:flex;justify-content:space-between;align-items:center;position:relative}.timeline i{position:absolute;bottom:-6px;left:8%;height:10px;width:10px;background:var(--accent);border-radius:50%;animation:scrub 6s infinite}.timeline b{font-size:12px}.questions{display:flex;gap:4px}.questions button{flex:1;min-width:0;background:var(--surface);border:2px solid var(--fg);padding:clamp(5px,2vmin,12px) 1px;color:var(--fg);font:800 12px var(--font-sans);cursor:pointer}.questions button.on{background:var(--accent-2);color:#211b19}.quote{background:var(--fg);color:var(--bg);min-height:clamp(53px,18vmin,90px);display:grid;align-content:center;gap:3px;padding:clamp(7px,2vmin,15px)}.quote small{font-size:12px;color:var(--accent-2)}.quote strong{font-size:clamp(12px,3vmin,18px)}@keyframes scrub{0%,12%{left:8%}45%{left:47%}78%,100%{left:88%}}

const answers=['THE PROBLEM WE SAW','THE CHANGE WE MADE','WHAT WE LEARNED'];const tabs=[...document.querySelectorAll('.questions button')];let active=0;function show(i){active=i;tabs.forEach((t,n)=>t.classList.toggle('on',n===i));document.getElementById('interview-answer').textContent=answers[i]}tabs.forEach((t,i)=>t.onclick=()=>show(i));setInterval(()=>show((active+1)%3),2600);