.tp-intro-video {
    width:70vw;
    max-width:70vw;
    max-height: 90dvh;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #000;
    overflow: hidden;
    box-shadow: 0 20px 70px rgb(0 0 0 / 35%);
}

.tp-intro-video::backdrop { background: rgb(0 0 0 / 65%); }
.tp-intro-video__screen { position: relative; aspect-ratio: 16 / 9; }
.tp-intro-video__screen iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.tp-intro-video__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 96%);
    color: #334155;
    box-shadow: 0 2px 12px rgb(0 0 0 / 18%);
    cursor: pointer;
}
.tp-intro-video__close:hover { background: #fff; color: #007a4a; }
.tp-intro-video__close:focus-visible { outline: 2px solid #007a4a; outline-offset: -4px; }
.tp-intro-video__sound {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 24px;
    background: rgb(15 23 42 / 85%);
    color: #fff;
    font: 500 13px/1.4 system-ui, sans-serif;
    cursor: pointer;
}
.tp-intro-video__sound[hidden] { display: none; }
.tp-intro-video__sound:disabled { opacity: .6; cursor: default; }
.tp-intro-video__sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
html.tp-intro-video-open { overflow: hidden; }

@media (max-width: 1024px) {
    .tp-intro-video { width: 90%; max-width: 90%; border-radius: 0; }
}