.film-play{fill:currentColor;stroke:currentColor;stroke-width:3.6px;stroke-linejoin:round;flex:none;width:24px;height:24px}.film-trigger{isolation:isolate;position:relative;overflow:hidden}.film-trigger>.film-play,.film-trigger>.film-label{z-index:2;position:relative}.film-reel,.film-wash{display:none}@media (hover:hover) and (pointer:fine) and (min-width:640px){.film-reel,.film-wash{z-index:0;border-radius:inherit;pointer-events:none;display:block;position:absolute;inset:0;overflow:hidden}.film-reel{opacity:0;transition:opacity .36s}.film-wash{z-index:1;background:linear-gradient(90deg,#ffffffe6,#ffffff9e)}.film-reel>i{background:var(--photo) var(--photo-pos,center) / cover no-repeat;opacity:0;animation:film-reel 5.5s linear calc(.7s + var(--k) * .8s) infinite backwards;animation-play-state:paused;position:absolute;inset:-2px}.film-reel>i:first-child{animation-name:film-reel-first;animation-delay:0s}.film-trigger>.film-play{transition:transform .52s cubic-bezier(.3,.9,.3,1)}.film-trigger:is(:hover,:focus-visible)>.film-reel{opacity:1}.film-trigger:is(:hover,:focus-visible)>.film-reel>i{animation-play-state:running}.film-trigger:is(:hover,:focus-visible)>.film-play{transform:translate(3px)scale(1.08)}@media (prefers-reduced-motion:reduce){.film-reel>i{animation:none}.film-reel>i:first-child{opacity:1;transform:scale(1.04)}.film-trigger:is(:hover,:focus-visible)>.film-play{transform:none}}}@keyframes film-reel{0%{opacity:0;transform:scale(1.04)}2.62%{opacity:1}14.84%{opacity:1}18.33%{opacity:0;transform:scale(1.16)}to{opacity:0;transform:scale(1.16)}}@keyframes film-reel-first{0%{opacity:1;transform:scale(1.04)}27.27%{opacity:1}30.91%{opacity:0;transform:scale(1.24)}to{opacity:0;transform:scale(1.24)}}@media (forced-colors:active){.film-reel,.film-wash{display:none!important}}dialog.film{background:0 0;border:0;width:min(1120px,100vw - 32px,177.778svh - 248.889px);max-width:none;max-height:none;margin:auto;padding:0;overflow:visible}dialog.film::backdrop{background:#151617c7}.film-frame{aspect-ratio:16/9;background:#fff;border-radius:16px;position:relative;overflow:hidden;box-shadow:0 30px 80px #00000059}.film video{background:#fff;width:100%;height:100%;display:block}.film-note{color:#fffc;text-align:center;margin:.75rem 0 0;font-size:.875rem}.film-close{corner-shape:round;color:#fff;cursor:pointer;background:#ffffff29;border:0;border-radius:50%;place-items:center;width:44px;height:44px;padding:0;display:grid;position:absolute;top:-52px;right:0}.film-close:hover{background:#ffffff47}.film-close:focus-visible{outline-color:#fff}.film-close svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;width:20px;height:20px}@media (orientation:landscape) and (max-height:540px){dialog.film{--film-note-space:0px;width:min(1120px, calc(100vw - 136px - env(safe-area-inset-left) - env(safe-area-inset-right)), calc(( 100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--film-note-space) ) * 16 / 9))}dialog.film:has(.film-note){--film-note-space:3rem}dialog.film:has(.film-note+.film-note){--film-note-space:6rem}.film-close{top:0;right:-52px}}.film[data-state=opening] :is(.film-frame,.film-close,.film-note),.film[data-state=closing] :is(.film-frame,.film-close,.film-note){opacity:0}