/* film: inline, autoplay on view, custom minimal controls; full screen shows the whole film */
[data-xfilm]{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
[data-xfilm] video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0b0b0b;cursor:pointer}
[data-xfilm] video::-webkit-media-controls{display:none!important}
[data-xfilm] video::-webkit-media-controls-enclosure{display:none!important}
.xf-ui{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:16px;pointer-events:none;z-index:3}
.xf-ui::before{content:"";position:absolute;inset:-40px 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.42));z-index:-1;pointer-events:none;opacity:.9;transition:opacity .4s}
.xf-b{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;padding:0;border:0;border-radius:999px;background:rgba(16,16,16,.58);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;font-family:inherit;font-size:15px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;transition:background .25s,transform .25s}
.xf-b:hover{background:rgba(16,16,16,.75)}
.xf-b:active{transform:scale(.96)}
.xf-b svg{width:20px;height:20px;flex:none}
.xf-snd{margin-left:auto}
.xf-bar{flex:1;height:2px;background:rgba(255,255,255,.28);border-radius:2px;overflow:hidden;align-self:center}
.xf-bar i{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.xf-playing:not(.xf-muted) .xf-ui::before{opacity:.5}
@media (min-width:900px){.xf-ui{padding:22px 24px;gap:16px}.xf-b{height:48px;min-width:48px}}
.xf-fs{background:rgba(16,16,16,.42)}
[data-xfilm]:fullscreen,[data-xfilm]:-webkit-full-screen{width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;border-radius:0!important;background:#000;margin:0!important}
[data-xfilm]:fullscreen video,[data-xfilm]:-webkit-full-screen video,video:fullscreen,video:-webkit-full-screen{object-fit:contain!important;background:#000}
.xf-tap{position:absolute;left:50%;top:50%;z-index:4;display:none;align-items:center;gap:10px;height:54px;padding:0 24px 0 18px;border:0;border-radius:999px;background:rgba(255,255,255,.95);color:#111;font-family:inherit;font-size:16px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%);box-shadow:0 6px 24px rgba(0,0,0,.25);-webkit-tap-highlight-color:transparent;animation:xf-in .35s ease both}
.xf-tap svg{width:22px;height:22px;flex:none}
.xf-tap:active{transform:translate(-50%,-50%) scale(.97)}
.xf-muted .xf-tap{display:inline-flex}
@keyframes xf-in{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}
.xf-hint{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));z-index:5;display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:14px;font-weight:500;line-height:1;letter-spacing:0;white-space:nowrap;pointer-events:none;transform:translateX(-50%);opacity:0;animation:xf-hint .6s .35s ease forwards;transition:opacity .3s}
.xf-hint svg{width:18px;height:18px;flex:none}
.xf-hint.xf-gone{opacity:0!important;animation:none}
@keyframes xf-hint{to{opacity:.78}}
/* this site */
html[data-layout=mobile] .m-film .film[data-xfilm]{width:min(100%,calc(78svh*9/16))}
#splash .xf-hint{color:var(--ink);font-family:var(--sans)}