/* Inline films: no player chrome, just the picture, a hairline scrub bar and text controls. */
.film video{display:block;width:100%;height:auto;max-height:none;background:transparent;cursor:pointer}
.film figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.film-controls{display:flex;align-items:baseline;gap:18px;flex-shrink:0}
.film-time{font-variant-numeric:tabular-nums}
/* The bar takes the caption's text colour, so it reads on light and dark sections alike. */
.film-scrub{-webkit-appearance:none;appearance:none;display:block;width:100%;height:18px;margin:6px 0 -4px;background:transparent;cursor:pointer;color:inherit;--progress:0%;--film-ink:currentColor;--film-rail:color-mix(in srgb,currentColor 22%,transparent)}
.film-scrub::-webkit-slider-runnable-track{height:2px;background:linear-gradient(var(--film-ink),var(--film-ink)) 0/var(--progress) 100% no-repeat,var(--film-rail)}
.film-scrub::-moz-range-track{height:2px;background:var(--film-rail)}
.film-scrub::-moz-range-progress{height:2px;background:var(--film-ink)}
.film-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;margin-top:-4px;border:0;border-radius:50%;background:var(--film-ink)}
.film-scrub::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--film-ink)}
.film-scrub:focus-visible,.film-controls button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.film-controls button{font:inherit;color:inherit;background:none;border:0;padding:0;border-bottom:1px solid currentColor;cursor:pointer;position:relative}
/* A comfortable tap area around the small text buttons, without moving them. */
.film-controls button::after{content:"";position:absolute;inset:-12px -6px}