.film-bar{z-index:2;color:#fff;opacity:0;visibility:hidden;pointer-events:none;background:linear-gradient(#0000,#000000b8);flex-direction:column;gap:2px;padding:20px 10px 8px;transition:opacity .16s,visibility 0s linear .16s;display:flex;position:absolute;inset-block-end:0;inset-inline:0}.film-bar.is-shown{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .16s}.film-bar__row{align-items:center;gap:2px;display:flex}.film-bar__time{font-variant-numeric:tabular-nums;flex:1;font-size:.75rem;font-weight:600;line-height:1}.film-bar__btn{block-size:40px;inline-size:40px;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:9999px;justify-content:center;align-items:center;margin-block:-8px;padding:0;display:flex}.film-bar__btn:focus-visible,.film-bar__line:focus-visible{outline-offset:2px;outline:2px solid #fff}.film-bar__line{appearance:none;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;background:0 0;block-size:20px;inline-size:100%;margin:0;padding:0}.film-bar__line::-webkit-slider-runnable-track{background:linear-gradient(to right, #fff var(--film-at,0%), #ffffff52 var(--film-at,0%));border-radius:9999px;block-size:3px}.film-bar__line::-webkit-slider-thumb{appearance:none;background:#fff;border-radius:9999px;block-size:12px;inline-size:12px;margin-block-start:-4.5px}.film-bar__line::-moz-range-track{background:#ffffff52;border-radius:9999px;block-size:3px}.film-bar__line::-moz-range-progress{background:#fff;border-radius:9999px;block-size:3px}.film-bar__line::-moz-range-thumb{background:#fff;border:0;border-radius:9999px;block-size:12px;inline-size:12px}