.reel{isolation:isolate;touch-action:pan-y;cursor:default}
.reel-slides,.reel-slide{position:absolute;inset:0}
.reel-slide{opacity:0;transition:opacity 900ms ease;pointer-events:none}
.reel-slide.is-active{opacity:1}
.reel-slide img{width:100%;height:100%;object-fit:cover;object-position:center}
.reel-controls{position:absolute;z-index:2;bottom:24px;right:24px;display:flex;align-items:center;gap:4px;background:var(--paper);padding:6px}
.reel-controls button{display:grid;place-items:center;background:transparent;width:44px;height:44px;padding:0}
.reel-controls button:hover{background:#e7e9e0}
.reel-controls button:focus-visible{outline-offset:-3px}
.reel-controls .ui-icon{width:21px;height:21px}
.reel-controls button:disabled{opacity:.3;cursor:default}
.reel-dots{display:flex;gap:0}
.reel-controls .reel-dot{width:28px}
.reel-dot span{display:block;width:5px;height:5px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.reel-dot[aria-pressed=true] span{background:var(--ink);transform:scale(1.6)}
.reel-play{border-left:1px solid var(--line);margin-left:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.reel-empty{position:absolute;inset:0;padding:35px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:14px}
@media(max-width:600px){.reel-controls{bottom:20px;right:50%;transform:translateX(50%);gap:0;padding:4px}.reel-controls .reel-dot{width:26px}}
@media(prefers-reduced-motion:reduce){.reel-slide,.reel-dot span{transition:none}.reel-play{display:none!important}}