/* A persistent small filmstrip. Color follows actual SDK buffer intervals. */
#cinema .filmstrip-enabled #timeline,#cinema .filmstrip-enabled .timeline-tooltip{display:none!important}
#cinema .filmstrip-enabled .controls{background:none;grid-template-rows:44px 44px;min-height:100px;align-items:center}
#cinema .filmstrip-enabled #time{width:max-content;max-width:100%;height:44px;min-height:44px;padding:0 8px;margin-left:-8px;gap:10px;font-family:inherit;font-size:11px;line-height:1.3;letter-spacing:0;color:#b4beb0;cursor:ew-resize;text-align:left}
#cinema .filmstrip-enabled #time::after{content:attr(data-seek-label);font-size:9px;letter-spacing:.03em;color:#a1a995}
#cinema .filmstrip-enabled #time:hover,#cinema .filmstrip-enabled #time[aria-expanded=true]{color:#eee9dd}
#cinema .filmstrip-enabled #time:focus-visible{outline:1px solid #d1d7b7;outline-offset:1px}
.filmstrip-panel{grid-column:1/-1;grid-row:1;align-self:center;justify-self:center;position:relative;width:min(560px,100%);height:44px;z-index:3;--filmstrip-cell:64px}
.filmstrip-panel[hidden]{display:none!important}
.filmstrip-slider{--filmstrip-cell:64px;position:relative;height:44px;width:100%;cursor:grab;touch-action:none;overflow:hidden;user-select:none;-webkit-user-select:none;outline:none;isolation:isolate;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.filmstrip-slider.is-dragging{cursor:grabbing}
.filmstrip-slider:focus-visible{outline:1px solid #d1d7b7;outline-offset:3px;mask-image:none;-webkit-mask-image:none}
.filmstrip-track{position:absolute;left:0;top:4px;display:flex;gap:2px;will-change:transform;pointer-events:none}
.filmstrip-frame{display:block;flex:none;width:calc(36px * var(--filmstrip-ratio,1.777778));aspect-ratio:16/9;position:relative;overflow:hidden;font:9px/36px 'Fira Code',monospace;color:#a6ae9f;text-align:center}
.filmstrip-marker{position:absolute;z-index:2;left:50%;top:0;bottom:0;width:1px;background:#eee9dd;box-shadow:0 0 6px #080a09;pointer-events:none}
.filmstrip-readout{position:absolute;z-index:3;left:50%;top:0;transform:translate(-50%,0);padding:1px 4px;background:#080a09e8;color:#eee9dd;font:9px/12px 'Fira Code',monospace;pointer-events:none}
.filmstrip-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.filmstrip-no-frames .filmstrip-frame{background:linear-gradient(#9aa48c,#9aa48c) center bottom / 1px 5px no-repeat;opacity:1}
#cinemaShell.filmstrip-persistent:fullscreen .controls{opacity:1;pointer-events:auto}
#cinemaShell.filmstrip-enabled:fullscreen .controls{background:linear-gradient(transparent,#080a09ec)}
@media(max-width:700px){
 #cinema .filmstrip-enabled .controls{grid-template-columns:44px minmax(0,1fr) 44px 48px 44px;grid-template-rows:48px 44px;min-height:100px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
 .filmstrip-panel,.filmstrip-slider{height:48px;--filmstrip-cell:72px}
 #cinema .filmstrip-enabled #time{grid-row:2;grid-column:2;justify-content:flex-start;font-size:10px;gap:5px;white-space:nowrap;height:44px}
 #cinema .filmstrip-enabled #time::after{display:none}
 .filmstrip-frame{width:calc(40px * var(--filmstrip-ratio,1.777778));line-height:40px}
}
@media(forced-colors:active){.filmstrip-marker{background:CanvasText}.filmstrip-readout{color:CanvasText;background:Canvas}#cinema .filmstrip-enabled #time:focus-visible,.filmstrip-slider:focus-visible{outline:2px solid Highlight}}
#cinema .filmstrip-enabled #time::before{content:'';width:13px;height:8px;flex:none;opacity:.7;background:linear-gradient(to right,currentColor 0 3px,transparent 3px 5px,currentColor 5px 8px,transparent 8px 10px,currentColor 10px);}

.filmstrip-gray,.filmstrip-color{position:absolute;inset:0;display:block;background-repeat:no-repeat;pointer-events:none}
.filmstrip-gray{filter:grayscale(1);opacity:.48}
.filmstrip-color{opacity:0;mask-image:var(--buffer-mask,none);-webkit-mask-image:var(--buffer-mask,none)}
.filmstrip-frame.has-buffer .filmstrip-color{opacity:1}
.filmstrip-buffer-status{position:absolute;right:5px;top:0;z-index:4;max-width:calc(50% - 30px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px;background:#080a09e8;color:#aab0a2;font:8px/12px 'Fira Code',monospace;pointer-events:none}
@media(forced-colors:active){.filmstrip-frame.has-buffer{border-bottom:2px solid Highlight}.filmstrip-buffer-status{color:CanvasText;background:Canvas}}