.filmstrip{--film-bg:var(--neutral-800);--film-text:var(--color-light);--film-border:var(--neutral-600);color:var(--film-text);min-width:var(--length-zero);max-width:var(--extent-full);margin-block:var(--space-m)}
.light-surface .filmstrip,dialog .filmstrip,.public-preview .filmstrip{--film-bg:var(--neutral-200);--film-text:var(--color-dark);--film-border:var(--neutral-300)}
.film-preview{margin:var(--length-zero);min-width:var(--length-zero)}.film-image{display:block;width:var(--extent-full);aspect-ratio:var(--ratio-video);max-height:var(--story-portrait-height);object-fit:contain;background:var(--film-bg);border-radius:var(--radius-media)}.film-caption{font-size:var(--type-caption);margin-top:var(--space-xs)}
.film-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);margin-top:var(--space-s);font-size:var(--type-caption)}.film-time{font-family:var(--font-timecode);font-variant-numeric:tabular-nums;white-space:nowrap}
.film-viewport{max-width:var(--extent-full);overflow-x:auto;overflow-y:hidden;padding:var(--film-strip-padding) var(--length-zero);cursor:ew-resize;scrollbar-width:thin;scrollbar-color:var(--film-border) var(--film-bg)}.film-viewport:focus-visible{outline:var(--focus-width) solid var(--color-accent);outline-offset:var(--focus-offset)}
.film-rail{display:flex;flex-wrap:nowrap;gap:var(--film-frame-gap);position:relative;width:max-content;min-width:var(--extent-full);padding-inline:var(--film-strip-padding)}.film-frame{position:relative;flex:var(--number-zero) var(--number-zero) var(--film-frame-width);width:var(--film-frame-width);aspect-ratio:var(--ratio-video);transform:scale(var(--film-frame-scale));transition:transform var(--film-snap-duration) var(--film-spring-ease);transform-origin:center;user-select:none;background:var(--film-bg);border-radius:var(--radius-control);border:var(--border-width) solid var(--film-border)}.following .film-frame{transition-duration:var(--film-follow-duration);transition-timing-function:var(--ease-ui)}.film-frame.selected{border-color:var(--color-accent)}.film-frame img{width:var(--extent-full);height:var(--extent-full);object-fit:cover;display:block;border-radius:var(--radius-control);pointer-events:none}.film-frame>span{position:absolute;left:var(--space-3xs);bottom:var(--space-3xs);font-family:var(--font-timecode);font-size:var(--type-caption);padding-inline:var(--space-3xs);color:var(--color-light);background:var(--color-dark)}.film-playhead{position:absolute;left:var(--length-zero);top:calc(var(--space-s)*var(--number-negative-one));bottom:calc(var(--space-s)*var(--number-negative-one));width:var(--film-playhead-width);background:var(--color-accent);pointer-events:none;z-index:var(--z-content);transition:transform var(--film-snap-duration) var(--film-spring-ease)}.following .film-playhead{transition-duration:var(--film-follow-duration);transition-timing-function:var(--ease-ui)}.film-playhead::before{content:'';position:absolute;top:var(--length-zero);left:var(--extent-half);width:var(--space-2xs);height:var(--space-2xs);border-radius:var(--radius-pill);background:var(--color-accent);transform:translateX(calc(var(--extent-half)*var(--number-negative-one)))}.film-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-s);font-size:var(--type-caption);margin-top:var(--space-xs)}.film-open{cursor:pointer;min-height:var(--control-min);border:var(--border-width) solid var(--film-border);border-radius:var(--radius-control);background:var(--film-bg);color:var(--film-text);padding:var(--space-2xs) var(--space-s)}
@media(prefers-reduced-motion:reduce){.film-frame,.film-playhead{transition:none!important}}