.film{position:relative;display:grid;margin:0;padding:var(--film-pp,12px);border-radius:var(--film-radius,22px);background:var(--film-ground,var(--world,var(--cream,#f8f1e5)));overflow:hidden}.film>:is(.film__poster,.film__video,.film__canvas,.film__end){grid-area:1/1;width:100%;height:100%;border-radius:calc(var(--film-radius,22px) - var(--film-pp,12px))}.film__poster img,.film__end{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--film-pos,50% 50%)}.film__video,.film__canvas,.film__end{contain:size}.film__video,.film__canvas{object-fit:cover;object-position:var(--film-pos,50% 50%);opacity:0;pointer-events:none}.film:is([data-film-state=playing],[data-film-state=paused],[data-film-state=end],[data-film-state=done]) .film__video,.film[data-film-state=scrub] .film__canvas{opacity:1}.film:is([data-film-state=loading],[data-film-state=playing],[data-film-state=paused])>.film__end{opacity:0}.film[data-film-crop]>:is(.film__poster,.film__video,.film__canvas,.film__end){display:block;height:auto;aspect-ratio:var(--film-crop,3/2);overflow:hidden}.film>figcaption{margin-top:12px}.film__line{position:absolute;left:calc(var(--film-pp,12px) + 14px);right:calc(var(--film-pp,12px) + 14px);bottom:max(3px,calc(var(--film-pp,12px) / 2 - 1.5px));height:3px;border-radius:2px;background:var(--film-ink,var(--world-ink,#272e2a));transform-origin:0 50%;scale:var(--film-from,0) 1;opacity:0;pointer-events:none}.film__again{position:absolute;z-index:1;bottom:calc(var(--film-pp,12px) + 12px);display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 18px;border:0;border-radius:999px;background:var(--raised,#fff);color:var(--ink,#272e2a);font:700 15px/1 var(--font-body,Manrope,Arial,sans-serif);box-shadow:var(--sh-paper,0 10px 28px rgb(39 46 42/10%));cursor:pointer;visibility:hidden;opacity:0}.film__again{right:calc(var(--film-pp,12px) + 12px)}.film:is([data-film-state=end],[data-film-state=done]) .film__again{visibility:visible;opacity:1}.film .film__again:focus-visible{outline:var(--focus-ring,3px solid #245dad);outline-offset:2px}@media(prefers-reduced-motion:no-preference){.film__video,.film__canvas,.film>.film__end{transition:opacity .22s cubic-bezier(.2,.7,.3,1)}.film:is([data-film-state=playing],[data-film-state=paused],[data-film-state=end],[data-film-state=done]) .film__line{opacity:.85;transition:opacity .22s}.film:is([data-film-state=playing],[data-film-state=paused]) .film__line{animation:film-line var(--film-left,10s) linear both}.film[data-film-state=paused] .film__line{animation-play-state:paused}.film:is([data-film-state=end],[data-film-state=done]) .film__line{scale:1 1}.film__again{translate:0 6px;transition:opacity .22s,translate .45s var(--ease-stone,cubic-bezier(.3,1.35,.5,1)),visibility 0s .22s}.film:is([data-film-state=end],[data-film-state=done]) .film__again{translate:0 0;transition:opacity .22s .3s,translate .45s var(--ease-stone,cubic-bezier(.3,1.35,.5,1)) .3s,visibility 0s}.film__again:active{scale:.98}@keyframes film-line{0%{scale:var(--film-from,0) 1}to{scale:1 1}}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .film{background:var(--raised,#221e18);box-shadow:inset 0 0 0 1px var(--line,#39352e)}}:root[data-theme=dark] .film{background:var(--raised,#221e18);box-shadow:inset 0 0 0 1px var(--line,#39352e)}