.film-controls{
 position:absolute;inset:auto 12px 12px;display:grid;
 grid-template-columns:auto minmax(36px,1fr) auto;align-items:center;gap:10px;
 padding:4px 12px 4px 5px;border:1px solid #ffffffb3;border-radius:30px;
 background:#fffffff0;color:#243a2c;
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.film-controls[hidden]{display:none}
/* Keep keyboard access even when the pointer controls are visually tucked away. */
.film-ui-ready .film-controls{
 opacity:0;pointer-events:none;transform:translateY(5px);
 transition:opacity 180ms ease,transform 180ms ease;
}
.film-ui-ready[data-film-controls="visible"] .film-controls,
.film-ui-ready .film-controls:has(:focus-visible){
 opacity:1;pointer-events:auto;transform:translateY(0);
}
.video-shell .film-controls #film-toggle{
 position:static;min-height:36px;padding:8px 10px;gap:6px;
 border:0;background:transparent;font-size:10px;white-space:nowrap;
}
.film-controls #film-toggle:hover{background:#eaf1df}
.film-controls #film-icon{width:12px;text-align:center}
.film-time{font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#5e6e60}
.film-seek{
 --film-progress:0%;appearance:none;-webkit-appearance:none;
 display:block;width:100%;min-width:0;height:36px;margin:0;padding:0;border:0;
 background:transparent;cursor:pointer;touch-action:pan-y;
}
.film-seek::-webkit-slider-runnable-track{
 height:4px;border-radius:10px;
 background:linear-gradient(to right,#9aba36 0 var(--film-progress),#dce4d4 var(--film-progress) 100%);
}
.film-seek::-moz-range-track{height:4px;border-radius:10px;background:#dce4d4}
.film-seek::-moz-range-progress{height:4px;border-radius:10px;background:#9aba36}
.film-seek::-webkit-slider-thumb{
 appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;
 border-radius:50%;border:2px solid #fff;background:var(--accent);box-shadow:0 0 0 1px #a4ba68;
}
.film-seek::-moz-range-thumb{
 box-sizing:border-box;width:14px;height:14px;
 border-radius:50%;border:2px solid #fff;background:var(--accent);box-shadow:0 0 0 1px #a4ba68;
}
.film-seek:disabled{opacity:.45;cursor:default}
.film-controls :focus-visible{outline:2px solid #6f8b42;outline-offset:2px;border-radius:18px}
@media(max-width:680px){
 .film-controls{inset:auto 8px 8px;gap:8px;padding:3px 9px 3px 3px}
 .video-shell .film-controls #film-toggle{min-width:36px;min-height:38px;padding:8px;justify-content:center}
 .film-controls #film-label{display:none}
 .film-time{font-size:9px}
 .film-seek{height:38px}
}
@media(prefers-reduced-motion:reduce){
 .film-ui-ready .film-controls{transition:none;transform:none}
}

.film-ui-ready #brand-film:not([controls]){cursor:pointer}
.film-controls.has-fullscreen{grid-template-columns:auto minmax(36px,1fr) auto auto}
.video-shell .film-controls #film-fullscreen{
 position:static;display:grid;place-items:center;width:36px;min-width:36px;height:36px;
 margin:0;padding:8px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;
}
.film-controls #film-fullscreen:hover{background:#eaf1df}
#film-fullscreen svg{display:block;width:19px;height:19px}
#film-fullscreen .film-collapse-icon{display:none}
#film-fullscreen[aria-pressed="true"] .film-expand-icon{display:none}
#film-fullscreen[aria-pressed="true"] .film-collapse-icon{display:block}
.video-shell:fullscreen{
 width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border-radius:0;
 background:#101711!important;aspect-ratio:auto!important;
}
.video-shell:-webkit-full-screen{
 width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border-radius:0;
 background:#101711!important;aspect-ratio:auto!important;
}
.video-shell.film-is-fullscreen #brand-film{
 display:block;width:100%;height:100%;max-height:none;object-fit:contain;
 aspect-ratio:auto!important;border-radius:0;
}
.film-is-fullscreen .film-controls{
 inset:auto max(16px,calc((100% - 960px)/2)) max(20px,env(safe-area-inset-bottom));
 z-index:1;
}
@media(max-width:680px){
 .film-controls.has-fullscreen{gap:5px;padding-right:4px}
 .video-shell .film-controls #film-fullscreen{width:38px;min-width:38px;height:38px}
 .film-is-fullscreen .film-controls{inset:auto 8px max(12px,env(safe-area-inset-bottom))}
}