.np-film { margin: 0; scroll-margin-top: 160px; }
.np-film__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--np-line); border-radius: 24px; background: #070936; box-shadow: 0 30px 80px rgba(7, 9, 54, .18); }
.np-film__frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.np-film__cover { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; width: 100%; padding: clamp(18px, 3vw, 38px); border: 0; color: #fff; background: linear-gradient(180deg, transparent 35%, rgba(4, 6, 15, .85)); cursor: pointer; text-align: left; }
.np-film__cover[hidden], .np-film__pause[hidden] { display: none; }
.np-film__play { display: grid; place-items: center; flex: 0 0 auto; width: clamp(54px, 6vw, 88px); height: clamp(54px, 6vw, 88px); margin: auto; border-radius: 50%; background: var(--np-blue); box-shadow: 0 0 0 10px rgba(36, 87, 255, .16); }
.np-film__play svg { width: 30px; height: 30px; fill: #fff; }
.np-film__copy { display: grid; gap: 7px; }
.np-film__copy small { font-size: 11px; letter-spacing: .12em; color: #8de7f4; }
.np-film__copy b { font-size: clamp(16px, 1.8vw, 25px); line-height: 1.25; }
.np-film figcaption { margin-top: 16px; color: var(--np-muted); }
.np-film__pause { margin-top: 18px; }
.np-film__status:not(:empty) { margin-top: 12px; color: var(--np-muted); }
.np-film__cover:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
@media (max-width: 600px) {
  .np-film__frame { border-radius: 16px; }
  .np-film__cover { gap: 15px; }
  .np-film__copy { max-width: 65%; }
}