.film-sec{background:var(--paper)}
.film{max-width:1080px;margin:0 auto}
.film-frame{position:relative;border-radius:28px;overflow:hidden;background:#0d2231;box-shadow:0 40px 80px -40px rgba(15,34,48,.6),0 0 0 1px rgba(15,34,48,.08)}
.film-svg{width:100%;height:auto;aspect-ratio:2/1;font-family:var(--sans)}
.film-cap{position:absolute;left:28px;bottom:24px;max-width:min(520px,70%);color:#fff;display:grid;gap:2px;text-shadow:0 2px 12px rgba(0,0,0,.35);transition:opacity .4s}
.film-cap small{color:var(--mint);font-weight:600;font-size:13px}
.film-cap b{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.3vw,30px);line-height:1.35}
.film-cap span{color:#d3e0e6;font-size:clamp(13px,1.1vw,16px)}
.film-big{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 20px 40px -12px rgba(0,0,0,.5);transition:transform .2s,opacity .3s}
.film-big .ico{width:30px;height:30px;fill:currentColor;stroke:none;margin-left:4px}
.film-big:hover{transform:scale(1.05)}
.film-big{opacity:0;pointer-events:none}
.film.show-big .film-big{opacity:1;pointer-events:auto}
.film.ended .film-big{inset:auto 0 9% 0;width:64px;height:64px}
.film-bar{display:flex;align-items:center;gap:14px;margin-top:16px}
.film-play{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.film-play .ico{width:17px;height:17px;fill:currentColor;stroke:none}
.film.playing .film-play .ico{fill:none;stroke:currentColor;stroke-width:2.4}
.film-track{position:relative;flex:1;height:6px;border-radius:99px;background:var(--mist2);cursor:pointer}
.film-track i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--teal);width:0}
.film-time{font-size:13px;color:var(--muted);min-width:76px;text-align:right}
.film-chapters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px}
.film-chapters button{text-align:left;border:0;border-top:2px solid var(--line);background:none;padding:10px 2px 0;cursor:pointer;font-size:14px;color:var(--muted);line-height:1.45}
.film-chapters button small{display:block;font-size:12px}
.film-chapters button.on{border-top-color:var(--teal);color:var(--ink);font-weight:600}
@media (max-width:640px){
  .film-frame{border-radius:18px}
  .film-cap{left:14px;bottom:12px;max-width:80%}
  .film-cap span{display:none}
  .film-big{width:64px;height:64px}
  .film-chapters{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .film-chapters button{font-size:0}
  .film-chapters button small{font-size:11.5px}
}