.reel{z-index:5;aspect-ratio:16/10;color:#fff;background:#241d17;border-radius:14px;position:absolute;inset:0 0 auto;overflow:hidden}.reel .rf{opacity:0;transition:opacity .6s linear;position:absolute;inset:0}.reel .rf[data-on]{opacity:1}.reel .rf img{object-fit:cover;width:100%;height:100%}.reel.playing .rf[data-on] img{animation:3.4s linear forwards push}.reel.paused .rf[data-on] img,.reel.paused .seg.on i{animation-play-state:paused}@keyframes push{0%{transform:scale(1)}to{transform:scale(1.03)}}.reel:after{content:"";pointer-events:none;background:linear-gradient(#14120e00,#14120e61 45%,#14120ecc);height:55%;position:absolute;inset:auto 0 0}.segs{z-index:3;gap:6px;display:flex;position:absolute;top:14px;left:16px;right:16px}.seg{background:#fff6;border-radius:2px;flex:1;height:3px;overflow:hidden}.seg i{background:#fff;width:0;height:100%;display:block}.seg.done i{width:100%}.seg.on i{animation:2.8s linear forwards fill}@keyframes fill{to{width:100%}}.reel .lower{z-index:3;text-shadow:0 1px 12px #00000073;max-width:80%;font-size:clamp(22px,2.6vw,36px);font-weight:400;line-height:1.15;position:absolute;bottom:74px;left:18px}.reel .ctl{z-index:3;justify-content:space-between;align-items:center;gap:12px;display:flex;position:absolute;bottom:16px;left:16px;right:16px}.reel .ctl button{min-height:44px;color:var(--color-ink);cursor:pointer;background:#fffffff0;border:0;border-radius:999px;align-items:center;gap:8px;padding:0 18px;font-size:15px;font-weight:600;display:inline-flex}.reel .ctl button:focus-visible{outline-offset:3px;outline:2px solid #fff}