.middle-stage .experience{height:100%;overflow:hidden}
.middle-demo{height:100%;min-height:280px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;padding:18px 10px;overflow:hidden}
.scroll-preview{min-height:0;overflow:hidden;background:#fff;border:1px solid #dce6eb;border-radius:8px;display:flex;flex-direction:column}
.scroll-preview-head{padding:15px 18px;font-weight:700;border-bottom:1px solid #dce6eb;color:#24566d;flex:none}
.scroll-viewport{min-height:0;flex:1;overflow:hidden;position:relative}
.scroll-track{animation:comment-stream 38s linear infinite;animation-play-state:paused;will-change:transform}
.is-running .scroll-track{animation-play-state:running}
.scroll-sample{display:flex;gap:10px;padding:18px 14px;border-bottom:1px solid #edf1f3;min-height:118px}
.scroll-sample b{font-size:13px;color:#7b8b93;font-weight:400}.scroll-sample p{font-size:15px;line-height:1.6;margin:7px 0;color:#263b45}.scroll-sample small{font-size:11px;color:#8d9aa1}
.scroll-avatar{width:26px;height:26px;border-radius:50%;background:#eaf1f4;color:#39728a;display:grid;place-items:center;font-size:12px;flex:none}
.mouse-demo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;text-align:center;color:#24566d}.mouse-demo>span{font-size:14px;line-height:1.5;color:#6b7d87}
.mouse-hold{position:relative;border:0;background:transparent;padding:0;width:170px;max-width:100%;aspect-ratio:1;cursor:pointer;touch-action:none;border-radius:8px}.mouse-hold img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.mouse-hold:focus-visible{outline:2px solid #287795;outline-offset:3px}
.mouse-press-ring{position:absolute;left:37%;top:20%;width:24%;height:24%;border:3px solid #268ca2;border-radius:50%;opacity:0;background:#46c8cd22;transition:opacity .2s}
.is-running .mouse-press-ring{opacity:1}.mouse-demo .scroll-play{margin-top:8px;min-width:120px;justify-content:center}.scroll-play svg{width:17px;height:17px}
@keyframes comment-stream{to{transform:translateY(-50%)}}
@media(max-width:600px){.middle-demo{gap:10px;padding:8px 0;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.scroll-preview-head{padding:10px;font-size:13px}.scroll-sample{padding:12px 8px;gap:6px}.scroll-sample p{font-size:13px}.scroll-avatar{width:20px;height:20px}.mouse-demo{gap:8px}.mouse-demo strong{font-size:14px}.mouse-demo>span{font-size:12px}.mouse-demo .scroll-play{min-width:0;width:100%;padding:8px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.mouse-press-ring{transition:none}.middle-demo .scroll-track{animation:comment-stream 38s linear infinite!important;animation-play-state:paused!important}.middle-demo.is-running .scroll-track{animation-play-state:running!important}}