<div class="s-demo"><div class="so"><div class="so-screen"><span>01 / THE ACTION</span><strong>FOLD → CARRY</strong><div class="so-object"><i></i><i></i></div></div><div class="so-controls"><button type="button" aria-label="Toggle sound">SOUND <b>ON</b></button><div class="so-wave"><i></i><i></i><i></i><i></i><i></i></div><small>VISUAL STORY STAYS</small></div></div></div>
.s-demo{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(8px,3vmin,20px);font:700 clamp(10px,max(2.8vmin,1vw),16px)/1.25 sans-serif;color:var(--fg)}.s-demo *{box-sizing:border-box}@media(min-width:600px){.s-demo>div{transform:scale(1.4)}}.so{width:min(90vw,480px);display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(8px,3vmin,20px);align-items:center}.so-screen{min-height:clamp(100px,36vmin,210px);padding:clamp(9px,3vmin,20px);background:var(--fg);color:var(--bg);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.so-screen span,.so-controls small{font-size:clamp(10px,max(1.8vmin,1vw),12px)}.so-screen strong{font-size:clamp(14px,4vmin,25px);line-height:1}.so-object{height:clamp(20px,8vmin,48px);display:flex;gap:4px;align-items:end}.so-object i{width:35%;height:100%;background:var(--accent-2);transform:skew(-15deg)}.so-object i+ i{height:45%;background:var(--accent)}.so-controls{display:grid;gap:clamp(7px,2vmin,14px)}.so-controls button{padding:clamp(7px,2vmin,12px);font:900 clamp(10px,max(2vmin,1vw),14px) sans-serif;border:2px solid var(--accent);background:var(--surface);color:var(--fg);cursor:pointer}.so-controls button b{color:var(--accent)}.so-wave{height:clamp(30px,10vmin,65px);display:flex;align-items:center;justify-content:space-evenly;border:1px solid var(--line);background:var(--surface)}.so-wave i{display:block;width:8%;height:30%;background:var(--accent);animation:sowave 1s ease-in-out infinite alternate}.so-wave i:nth-child(2),.so-wave i:nth-child(4){animation-delay:.4s}.so-wave i:nth-child(3){animation-delay:.7s}.so.muted .so-wave i{animation:none;height:4px;background:var(--muted)}.so-controls small{color:var(--muted)}@keyframes sowave{to{height:85%}}
const wrap=document.querySelector('.so');const button=wrap.querySelector('button');function toggle(){wrap.classList.toggle('muted');button.querySelector('b').textContent=wrap.classList.contains('muted')?'OFF':'ON'}button.addEventListener('click',()=>{clearInterval(timer);toggle()});const timer=setInterval(toggle,2800);
