Story Stat Carousel

.x-ssc{--ink:#1C1C1A;--mut:#5F5F5B;--line:#E9E7E1;--cream:#FCFBF8;--card:#F5F4EF;--blue:#4C7DFF;--pink:#FF66CC;--red:#FF2E63;--org:#FF7A1A;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left;color:var(--ink)}.x-ssc,.x-ssc *{box-sizing:border-box}.x-ssc a{color:inherit;text-decoration:none}.x-ssc button{font:inherit;cursor:pointer;color:inherit}.x-ssc img{display:block;max-width:100%}.x-ssc{width:100%;padding:0;overflow:hidden}.x-ssc .ssc-h{text-align:center;max-width:520px;margin:0 auto 34px;padding:0 20px}.x-ssc h2{margin:0 0 12px;font-size:clamp(28px,3vw,36px);font-weight:600;letter-spacing:-.03em}.x-ssc .ssc-h p{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--mut)}.x-ssc .ssc-all{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:500}.x-ssc .ssc-all:hover{text-decoration:underline}.x-ssc .ssc-vp{position:relative;height:440px}.x-ssc .ssc-tr{position:absolute;left:0;top:0;display:flex;align-items:center;gap:14px;height:100%;transition:transform .7s cubic-bezier(.65,0,.25,1)}.x-ssc .ssc-c{position:relative;flex:none;width:300px;height:340px;border-radius:16px;background:var(--card);overflow:hidden;transition:width .7s cubic-bezier(.65,0,.25,1),height .7s cubic-bezier(.65,0,.25,1),background .4s;cursor:pointer}.x-ssc .ssc-c.on{width:min(720px,calc(100vw - 40px));height:420px;background:#F1F0EB;cursor:default}.x-ssc .ssc-wm{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .4s}.x-ssc .ssc-c.on .ssc-wm{opacity:0;pointer-events:none}.x-ssc .ssc-full{position:absolute;left:0;top:0;width:min(720px,calc(100vw - 40px));height:420px;padding:26px 30px;display:flex;flex-direction:column;opacity:0;transition:opacity .35s;pointer-events:none}.x-ssc .ssc-c.on .ssc-full{opacity:1;transition-delay:.35s;pointer-events:auto}.x-ssc .wm{font-size:28px;color:#1C1C1A;letter-spacing:.02em;white-space:nowrap}.x-ssc .wm0{font-family:"Noto Serif SC",serif;font-weight:600}.x-ssc .wm1{font-weight:800;letter-spacing:.12em}.x-ssc .wm1 i,.x-ssc .wm3 i{font-style:normal;font-weight:400;font-size:.6em;margin-left:4px;color:#666}.x-ssc .wm2{font-weight:300}.x-ssc .wm2 b{font-weight:700;letter-spacing:.2em;font-size:.7em}.x-ssc .wm3{font-weight:600;font-style:italic}.x-ssc .ssc-top{display:flex;align-items:center;justify-content:space-between}.x-ssc .ssc-top .wm{font-size:24px}.x-ssc .ssc-tag{font-size:11px;color:#8A8A85;border:1px solid #DDDCD6;border-radius:999px;padding:2px 8px}.x-ssc .ssc-mid{display:grid;grid-template-columns:1fr 190px;gap:30px;margin-top:30px;flex:1}.x-ssc .ssc-s{margin:0 0 20px;font-size:13px;line-height:1.6;color:#55554F}.x-ssc blockquote{margin:0;padding-left:14px;border-left:2px solid;border-image:linear-gradient(180deg,#FF7A1A,#FF3D8B,#7B61FF) 1;font-size:19px;font-weight:500;line-height:1.45;letter-spacing:-.01em}.x-ssc dl{margin:0;display:grid;gap:14px;align-content:start}.x-ssc dt{font-size:26px;font-weight:500;letter-spacing:-.02em}.x-ssc dd{margin:2px 0 0;font-size:12px;color:var(--mut)}.x-ssc .ssc-ft{display:flex;align-items:center;gap:12px}.x-ssc .ssc-ft img{width:42px;height:42px;border-radius:8px;object-fit:cover}.x-ssc .ssc-ft b{display:block;font-size:13px;font-weight:500}.x-ssc .ssc-ft small{font-size:12px;color:var(--mut)}.x-ssc .ssc-rd{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px var(--line),0 2px 4px rgba(0,0,0,.04);font-size:13px;font-weight:500;transition:box-shadow .2s}.x-ssc .ssc-rd:hover{box-shadow:0 0 0 1px #ccc,0 4px 10px rgba(0,0,0,.08)}.x-ssc .ssc-nav{display:flex;justify-content:center;gap:10px;margin-top:22px}.x-ssc .ssc-nav button{width:40px;height:40px;border-radius:10px;border:0;background:#fff;box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;transition:background .2s}.x-ssc .ssc-nav button:hover{background:var(--card)}.x-ssc .ssc-nav button:disabled{opacity:.4;cursor:default}@media (max-width:700px){.x-ssc .ssc-vp{height:620px}.x-ssc .ssc-c.on,.x-ssc .ssc-full{height:600px}.x-ssc .ssc-mid{grid-template-columns:1fr;gap:18px;margin-top:20px}.x-ssc dl{grid-template-columns:repeat(3,1fr)}.x-ssc dt{font-size:19px}.x-ssc blockquote{font-size:16px}.x-ssc .ssc-full{padding:22px 20px}.x-ssc .ssc-c{width:260px}}@media (prefers-reduced-motion:reduce){.x-ssc *,.x-ssc *::before,.x-ssc *::after{animation:none!important;transition:none!important}}.x-ssc{padding:48px 0;background-image:radial-gradient(rgba(28,28,26,.12) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-ssc{width:1200px;max-width:100%;box-sizing:border-box}

(root) => {const vp=root.querySelector('.ssc-vp'),tr=root.querySelector('.ssc-tr'),cs=[...root.querySelectorAll('.ssc-c')],pv=root.querySelector('.ssc-p'),nx=root.querySelector('.ssc-n');let i=0;
const lay=()=>{const W=vp.clientWidth,gap=14,small=cs[0].classList.contains('on')?(cs[1]||cs[0]).offsetWidth:cs[0].offsetWidth;const sw=W<700?260:300,big=Math.min(720,W-40);let off=0;for(let k=0;k<i;k++)off+=sw+gap;tr.style.transform='translateX('+(W/2-off-big/2)+'px)';pv.disabled=i===0;nx.disabled=i===cs.length-1};
const go=n=>{i=Math.max(0,Math.min(cs.length-1,n));cs.forEach((c,k)=>c.classList.toggle('on',k===i));lay()};
const a=()=>go(i-1),b=()=>go(i+1),c=e=>{const el=e.target.closest('.ssc-c');if(el&&!el.classList.contains('on')){e.preventDefault();go(+el.dataset.i)}else if(e.target.closest('.ssc-rd'))e.preventDefault()};
pv.addEventListener('click',a);nx.addEventListener('click',b);tr.addEventListener('click',c);const ro=new ResizeObserver(lay);ro.observe(vp);go(1);
return ()=>{ro.disconnect();pv.removeEventListener('click',a);nx.removeEventListener('click',b)}}