.ppe-player {
    position: relative;
    z-index: 1;
    --ppe-size: 88px;
    --ppe-icon-size: 34%;
    --ppe-bg: #7155fa;
    --ppe-icon: #fff;
    --ppe-hover-bg: #5135dc;
    --ppe-hover-icon: #fff;
    --ppe-wave: #7155fa;
    --ppe-duration: 2s;
    --ppe-popup-width: 1080px;
    --ppe-overlay: rgba(7, 10, 20, .88);
    text-align: center;
    padding: calc(var(--ppe-size) * .28);
}
.ppe-player .ppe-trigger {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ppe-size);
    height: var(--ppe-size);
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ppe-bg);
    color: var(--ppe-icon);
    box-shadow: 0 10px 28px rgb(0 0 0 / 16%);
    cursor: pointer;
    line-height: 1;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s, color .2s;
}
.ppe-player .ppe-trigger:hover,
.ppe-player .ppe-trigger:focus-visible {
    background: var(--ppe-hover-bg);
    color: var(--ppe-hover-icon);
}
.ppe-player .ppe-trigger:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 6px;
    box-shadow: 0 0 0 9px var(--ppe-bg);
}
.ppe-player .ppe-trigger svg {
    display: block;
    width: var(--ppe-icon-size);
    height: var(--ppe-icon-size);
    fill: currentColor;
    pointer-events: none;
}
.ppe-trigger::before, .ppe-trigger::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--ppe-wave);
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
}
.ppe-animation-waves::before, .ppe-animation-waves::after {
    animation: ppe-wave var(--ppe-duration) ease-out infinite;
}
.ppe-animation-waves::after { animation-delay: calc(var(--ppe-duration) / -2); }
.ppe-player .ppe-animation-pulse { animation: ppe-pulse var(--ppe-duration) ease-in-out infinite; }
@keyframes ppe-wave {
    0% { transform: scale(1); opacity: .65; }
    100% { transform: scale(1.55); opacity: 0; }
}
@keyframes ppe-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
dialog.ppe-dialog {
    box-sizing: border-box;
    width: min(var(--ppe-popup-width, 1080px), calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 52px 12px 12px;
    border: 1px solid rgb(255 255 255 / 15%);
    border-radius: 16px;
    background: #0c0e15;
    color: #fff;
    box-shadow: 0 24px 100px rgb(0 0 0 / 50%);
    overflow: auto;
}
dialog.ppe-dialog::backdrop { background: var(--ppe-overlay, rgba(7, 10, 20, .88)); }
.ppe-dialog .ppe-close {
    position: absolute;
    top: 6px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 12%);
    color: #fff;
    font: 28px/1 sans-serif;
    cursor: pointer;
}
.ppe-dialog .ppe-close:hover { background: rgb(255 255 255 / 24%); }
.ppe-dialog .ppe-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ppe-dialog .ppe-video {
    display: block;
    width: 100%;
    max-height: calc(100vh - 112px);
    max-height: calc(100dvh - 112px);
    margin: 0;
    background: #000;
    border-radius: 6px;
    object-fit: contain;
}
.ppe-dialog .ppe-error { margin: 12px; color: #fff; font: 14px/1.5 sans-serif; }
.ppe-dialog .ppe-error[hidden] { display: none; }
.ppe-empty { padding: 24px; border: 1px dashed #b7abc9; border-radius: 8px; text-align: center; }
@media (prefers-reduced-motion: reduce) {
    .ppe-player .ppe-trigger, .ppe-trigger::before, .ppe-trigger::after { animation: none; transition: none; }
}