AI snippet controls

<div class="snip"><div class="controls"><button data-limit="full" class="on">FULL</button><button data-limit="short">SHORT</button><button data-limit="none">NONE</button></div><div class="answer"><small>ANSWER PREVIEW</small><div class="line one"></div><div class="line two"></div><div class="line three"></div><div class="cover">PREVIEW LIMITED</div></div><div class="source">SOURCE PAGE → ANSWER</div></div>

.snip{width:min(86%,550px);display:grid;gap:clamp(8px,2vmin,17px);font:800 clamp(10px,max(1.7vmin,1vw),15px) sans-serif;color:var(--fg)}.controls{display:flex;gap:5px}.controls button{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:clamp(5px,1.2vmin,10px);font:inherit;cursor:pointer}.controls button.on{background:var(--accent);color:white;border-color:var(--accent)}.answer{position:relative;background:var(--surface);border:1px solid var(--line);padding:clamp(11px,2.2vmin,20px);display:grid;gap:clamp(6px,1vmin,10px)}.answer small{color:var(--accent);letter-spacing:.12em}.line{height:clamp(7px,1.5vmin,13px);background:var(--fg);opacity:.7;border-radius:3px;transition:opacity .35s,width .35s}.line.two{width:90%}.line.three{width:60%}.snip.short .line.three,.snip.none .line{opacity:.07}.snip.short .line.two{width:35%}.cover{display:none;color:var(--accent);font-size:max(10px,1vw,.8em)}.snip.none .cover{display:block;position:absolute;top:50%;left:25%;background:var(--surface);padding:4px}.source{color:var(--muted);font-size:max(10px,1vw,.7em);letter-spacing:.1em}small{font-size:max(.833em,10px,1vw)}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}

const box=document.querySelector('.snip'),buttons=[...document.querySelectorAll('[data-limit]')];let n=0;function show(){box.classList.toggle('short',n===1);box.classList.toggle('none',n===2);buttons.forEach((b,i)=>b.classList.toggle('on',i===n))}buttons.forEach((b,i)=>b.addEventListener('click',()=>{clearInterval(timer);n=i;show()}));setTimeout(()=>{n=1;show()},900);const timer=setInterval(()=>{n=(n+1)%3;show()},3000);