/* Controls stay inside the existing cells; the hero keeps its size. */
.filmstrip-top .film-track{animation-duration:59.375s}
.filmstrip-bottom .film-track{animation-duration:75s;animation-direction:reverse}
.film-held .film-track{animation-play-state:paused}
.film-clip{position:relative;overflow:hidden;isolation:isolate;background:#101014;touch-action:pan-y}
.film-clip video{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .35s ease}
.film-clip:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff12;background:linear-gradient(0deg,#0009,transparent 65%);opacity:0;transition:opacity .2s}
.film-clip.film-audible video{filter:grayscale(0)}
.film-clip.film-audible{border-color:var(--yellow);box-shadow:0 0 16px #56bfff24}
.film-sound{position:absolute;z-index:2;right:8px;bottom:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;min-height:32px;padding:5px;border:1px solid #ffffff60;border-radius:99px;background:#0c0c0edb;color:#fff;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(5px);transition:opacity .2s,transform .2s,background .2s}
.film-sound span{display:none}
.film-sound:before{content:"";position:absolute;inset:-6px;border-radius:inherit}
.film-sound svg{flex:none;width:16px;height:16px}.film-icon-audible{display:none}
.film-audible .film-icon-muted{display:none}.film-audible .film-icon-audible{display:block}
.film-audible .film-sound{background:var(--yellow);border-color:var(--yellow);color:#09111a}
.film-clip:focus-within .film-sound,.film-selected .film-sound{opacity:1;pointer-events:auto;transform:none}
.film-clip:focus-within:after,.film-selected:after{opacity:1}
.film-sound:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(hover:hover){.film-clip:hover .film-sound{opacity:1;pointer-events:auto;transform:none}.film-clip:hover:after{opacity:1}}
@media(max-width:600px){.film-sound{right:6px;bottom:6px}}
@media(prefers-reduced-motion:reduce){.index-page .filmstrip{overflow-x:auto;mask-image:none;-webkit-mask-image:none}.film-clip video,.film-sound,.film-clip:after{transition:none}.film-group:nth-child(2){display:none}}
.home-calm .index-page .filmstrip{overflow-x:auto;mask-image:none;-webkit-mask-image:none}.home-calm .film-group:nth-child(2){display:none}
.film-end[hidden],.film-sound[hidden],.film-vod[hidden]{display:none}
.film-end{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:10px;background:linear-gradient(130deg,#101014ed,#101014cf);text-align:center;animation:film-invite .25s ease-out}
.film-end:before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:3px;background:var(--yellow);box-shadow:0 0 18px var(--yellow)}
.film-vod{display:block;max-width:100%;padding:8px 11px;border:1px solid var(--yellow);border-radius:6px;background:var(--yellow);color:#101014;font:800 11px/1.3 Inter,sans-serif;text-decoration:none;box-shadow:0 3px 15px #0004}
.film-vod:hover{filter:brightness(1.15);transform:translateY(-1px)}
.film-replay{min-height:26px;border:0;background:none;padding:3px 8px;color:#e2e2df;font:500 10px/1.2 Inter,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.film-vod:focus-visible,.film-replay:focus-visible{outline:2px solid white;outline-offset:2px}
.film-finished .film-sound{z-index:4;right:5px;bottom:5px;width:26px;height:26px;min-height:26px;min-width:26px;padding:4px}.film-finished .film-sound svg{width:14px;height:14px}
@keyframes film-invite{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:600px){.film-end{gap:4px;padding:8px}.film-vod{padding:7px 8px;font-size:10px}.film-replay{font-size:9px;min-height:24px}}
@media(prefers-reduced-motion:reduce){.film-end{animation:none}.film-vod:hover{transform:none}}