/* How it works film (linked only when src/video/howto.mp4 exists): white aluminium frame, own controls, no autoplay */
.film{position:relative;margin:0;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);overflow:hidden}
.film-stage{position:relative;aspect-ratio:16/9;background:var(--surface2)}
.film-poster,.film video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:var(--surface2)}
.film-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.film-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border-top:1px solid var(--rule)}
.film-t{flex:1;min-width:60px;height:40px;position:relative;cursor:pointer;touch-action:none}
.film-t::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:var(--rule)}
.film-t i{position:absolute;left:0;top:19px;height:2px;width:0;background:var(--acc);pointer-events:none}
.film-time{font:500 12px/1 var(--mono);color:var(--ink2);min-width:80px;text-align:right;font-variant-numeric:tabular-nums}
.film.is-play .film-big,.film.is-play .film-poster{display:none}
@media (max-width:639px){.film-t{order:-1;flex:1 0 100%}.film-time{display:none}}