.ui-story-reel{position:relative;isolation:isolate;width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:var(--ui-radius);background:var(--ui-bg);color:var(--ui-fg);user-select:none;touch-action:pan-y}.ui-story-reel:focus-visible{outline:2px solid var(--ui-focus);outline-offset:4px}.ui-story-reel-image{width:100%;height:100%;object-fit:cover}.ui-story-reel-image,.ui-story-reel-shade{position:absolute;inset:0;pointer-events:none}.ui-story-reel-shade{background:linear-gradient(180deg,rgb(0 0 0/65%),transparent 28%,transparent 65%,rgb(0 0 0/65%))}.ui-story-reel-progress{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3;pointer-events:none}.ui-story-reel-progress>span{flex:1;height:2px;overflow:hidden;border-radius:var(--ui-radius);background:rgb(255 255 255/35%)}.ui-story-reel-progress>span>span{display:block;width:100%;height:100%;transform-origin:left;background:var(--ui-fg)}.ui-story-reel-header{position:absolute;z-index:3;top:20px;left:14px;right:10px;display:flex;gap:10px;align-items:center;pointer-events:none}.ui-story-reel-name{font-size:var(--ui-small-size,14px);font-weight:600;line-height:1.3}.ui-story-reel .ui-story-reel-play{margin-left:auto;pointer-events:auto;color:var(--ui-fg)}.ui-story-reel-navigation{position:absolute;inset:76px 0 0;display:flex;z-index:2}.ui-story-reel-navigation>button{width:50%;height:100%;padding:0;background:transparent;border:0;cursor:pointer;touch-action:pan-y}.ui-story-reel-navigation>button:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-4px}.ui-story-reel-caption{position:absolute;z-index:3;left:24px;right:24px;bottom:28px;margin:0;font-size:clamp(18px,2vw,24px);font-weight:500;line-height:1.3;text-align:center;text-shadow:0 1px 8px rgb(0 0 0/35%);pointer-events:none}