.work-document { position: relative; }
.film-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: var(--reader-height, 70vh);
  overflow: hidden;
  background: #080808;
  color: #fff;
  line-height: 1.4;
  isolation: isolate;
}
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.film-controls { position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 22px 12px 10px; background: linear-gradient(transparent, #000b); }
.film-controls button { display: grid; place-items: center; width: 28px; height: 28px; padding: 3px; flex-shrink: 0; color: #fff; }
.film-controls svg { width: 21px; height: 21px; }
.film-controls input { accent-color: white; cursor: pointer; height: 18px; margin: 0; }
.film-seek { flex: 1; min-width: 20px; }
.film-volume { width: 65px; flex-shrink: 0; }
.film-time { white-space: nowrap; font-size: 10px; font-variant-numeric: tabular-nums; }
.film-play-overlay { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border: 1px solid #ffffffb3; border-radius: 50%; display: grid; place-items: center; background: #0008; color: #fff; backdrop-filter: blur(4px); }
.film-play-overlay svg { width: 23px; height: 23px; }
.film-error { position: absolute; z-index: 5; left: 15px; right: 15px; top: 15px; padding: 10px 12px; background: #151515e8; color: white; font-size: 11px; line-height: 1.6; }
.reading-expanded .film-player { max-height: none; }
.film-player:fullscreen { width: 100vw !important; height: 100vh !important; max-height: none !important; max-width: none !important; margin: 0 !important; aspect-ratio: auto !important; background: #000; }
.film-player:fullscreen .film-video { object-fit: contain; }
.film-player:fullscreen .film-controls { gap: 16px; padding: 32px 24px 18px; }
.film-player:fullscreen .film-controls button { width: 34px; height: 34px; }
.film-player:fullscreen .film-volume { width: 100px; }
.film-player:fullscreen .film-time { font-size: 12px; }
.film-player:fullscreen .film-play-overlay { width: 72px; height: 72px; }
@media(max-width:760px) {
  .film-controls { gap: 6px; padding: 18px 8px 7px; }
  .film-controls button { width: 23px; height: 23px; padding: 2px; }
  .film-controls svg { width: 18px; height: 18px; }
  .film-volume { width: 40px; }
  .film-time { font-size: 8px; }
  .film-play-overlay { width: 42px; height: 42px; }
}

.film-fullscreen-label { display: none; }
@media(max-width:760px) {
  .film-controls { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px 64px; gap: 2px 6px; padding: 9px 8px 5px; }
  .film-seek { grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; height: 24px; }
  .film-toggle { grid-column: 1; grid-row: 2; }
  .film-time { grid-column: 2; grid-row: 2; font-size: 9px; }
  .film-mute { grid-column: 3; grid-row: 2; }
  .film-volume { display: none; }
  .film-controls .film-fullscreen { grid-column: 4; grid-row: 2; display: inline-flex; justify-content: center; gap: 4px; width: 64px; height: 36px; padding: 0; border-radius: 4px; background: #0005; }
  .film-fullscreen-label { display: inline; font-size: 11px; white-space: nowrap; }
}