#pnplayer {
    * {
        box-sizing: border-box
    }

    html,
    body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center
    }

    main {
        width: 100%;
        max-width: 980px;
        margin-inline: auto
    }

    [data-media-player] {
        width: 100%;
        display: inline-flex;
        align-items: center;
        position: relative;
        contain: style;
        box-sizing: border-box;
        -webkit-user-select: none;
        user-select: none
    }

    [data-media-player] * {
        box-sizing: border-box
    }

    :where([data-media-player][data-view-type=video]) {
        aspect-ratio: 16 / 9
    }

    [data-media-player]:focus,
    [data-media-player]:focus-visible {
        outline: none
    }

    [data-media-player][data-view-type=video][data-started]:not([data-controls]) {
        pointer-events: auto;
        cursor: none
    }

    [data-media-player] slot {
        display: contents
    }

    [data-media-provider] {
        display: flex;
        position: relative;
        box-sizing: border-box;
        align-items: center;
        border-radius: inherit;
        width: 100%;
        aspect-ratio: inherit;
        overflow: hidden
    }

    [data-media-player]:not([data-view-type=audio]) [data-media-provider],
    [data-media-player][data-fullscreen] [data-media-provider] {
        height: 100%
    }

    [data-media-player][data-view-type=audio] [data-media-provider] {
        display: contents;
        background-color: unset
    }

    [data-media-provider] audio {
        width: 100%
    }

    :where(video:not([width]):not([height]), iframe:not([width]):not([height])) {
        width: 100%;
        aspect-ratio: 16 / 9
    }

    :where([data-media-provider] video),
    :where([data-media-provider] iframe) {
        aspect-ratio: inherit;
        display: inline-block;
        height: auto;
        object-fit: contain;
        touch-action: manipulation;
        border-radius: inherit;
        width: 100%
    }

    [data-media-provider] iframe {
        height: 100%
    }

    [data-media-player][data-view-type=audio] video,
    [data-media-player][data-view-type=audio] iframe {
        display: none
    }

    [data-media-player][data-fullscreen] video {
        height: 100%
    }

    [data-media-provider] iframe:not([src]) {
        display: none
    }

    iframe.vds-youtube[data-no-controls] {
        height: 1000%
    }

    .vds-blocker {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        aspect-ratio: inherit;
        pointer-events: auto;
        border-radius: inherit;
        z-index: 1
    }

    [data-ended] .vds-blocker {
        background-color: #000
    }

    .vds-icon:focus {
        outline: none
    }

    .vds-google-cast {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #dedede;
        font-family: sans-serif;
        font-weight: 500
    }

    .vds-google-cast svg {
        --size: max(18%, 40px);
        width: var(--size);
        height: var(--size);
        margin-bottom: 8px
    }

    .vds-google-cast-info {
        font-size: calc(var(--media-height) / 100 * 6)
    }

    ._player_18ybg_1 {
        --media-brand: #f5f5f5;
        --media-focus-ring-color: #4e9cf6;
        --media-focus-ring: 0 0 0 3px var(--media-focus-ring-color);
        --media-tooltip-y-offset: 30px;
        --media-menu-y-offset: 30px;
        aspect-ratio: 16 /9;
        background-color: #212121;
        border-radius: var(--media-border-radius);
        color: #f5f5f5;
        contain: layout;
        font-family: sans-serif;
        overflow: hidden
    }

    ._player_18ybg_1[data-focus]:not([data-playing]) {
        box-shadow: var(--media-focus-ring)
    }

    ._player_18ybg_1 video,
    ._poster_18ybg_23 {
        border-radius: var(--media-border-radius)
    }

    ._poster_18ybg_23 {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%
    }

    ._poster_18ybg_23[data-visible] {
        opacity: 1
    }

    ._poster_18ybg_23 img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    ._captions_16y1d_9 {
        --cue-color: var(--media-cue-color, white);
        --cue-bg-color: var(--media-cue-bg, rgba(0, 0, 0, .7));
        --cue-font-size: calc(var(--overlay-height) / 100 * 4.5);
        --cue-line-height: calc(var(--cue-font-size) * 1.2);
        --cue-padding-x: calc(var(--cue-font-size) * .6);
        --cue-padding-y: calc(var(--cue-font-size) * .4);
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        contain: layout style;
        margin: var(--overlay-padding);
        font-size: var(--cue-font-size);
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
        word-spacing: normal;
        word-break: break-word;
        bottom: 8px;
        transition: bottom .15s linear
    }

    ._captions_16y1d_9[data-dir=rtl] [data-part=cue-display] {
        direction: rtl
    }

    ._captions_16y1d_9[aria-hidden=true] {
        display: none
    }

    ._captions_16y1d_9 [data-part=cue-display] {
        position: absolute;
        direction: ltr;
        overflow: visible;
        contain: content;
        top: var(--cue-top);
        left: var(--cue-left);
        right: var(--cue-right);
        bottom: var(--cue-bottom);
        width: var(--cue-width, auto);
        height: var(--cue-height, auto);
        transform: var(--cue-transform);
        text-align: var(--cue-text-align);
        writing-mode: var(--cue-writing-mode, unset);
        white-space: pre-line;
        unicode-bidi: plaintext;
        min-width: min-content;
        min-height: min-content
    }

    ._captions_16y1d_9 [data-part=cue] {
        display: inline-block;
        contain: content;
        border-radius: 2px;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        padding: var(--cue-padding-y) var(--cue-padding-x);
        line-height: var(--cue-line-height);
        background-color: var(--cue-bg-color);
        color: var(--cue-color);
        white-space: pre-wrap;
        outline: var(--cue-outline);
        text-shadow: var(--cue-text-shadow)
    }

    ._captions_16y1d_9 [data-part=cue-display][data-vertical] [data-part=cue] {
        padding: var(--cue-padding-x) var(--cue-padding-y)
    }

    .player[data-preview] ._captions_16y1d_9 {
        opacity: 0;
        visibility: hidden
    }

    .player[data-controls] ._captions_16y1d_9 {
        bottom: 78px
    }

    ._title_i9vow_1 {
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        font-family: sans-serif;
        color: #ffffffa3;
        flex: 1 1 0%;
        padding-inline: 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    ._title_i9vow_1:before {
        content: "•";
        display: inline-block;
        margin-right: 6px;
        color: #ffffffa3
    }

    ._title_i9vow_1:empty:before {
        content: "";
        margin-left: 0
    }

    ._controls_1v3s5_5 {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        opacity: 0;
        transition: opacity .2s ease-out
    }

    ._controls_1v3s5_5[data-visible] {
        opacity: 1;
        background-image: linear-gradient(to top, rgb(0 0 0 / .5), 10%, transparent, 95%, rgb(0 0 0 / .3))
    }

    ._controlsGroup_1v3s5_29 {
        display: flex;
        align-items: center;
        width: 100%
    }

    ._controlsGroup_1v3s5_29 {
        padding-inline: 8px
    }

    ._controlsGroup_1v3s5_29:last-child {
        margin-top: -4px;
        padding-bottom: 8px
    }

    ._spacer_1v3s5_44 {
        flex: 1 1 0%;
        pointer-events: none
    }

    ._controls_1v3s5_5 .mute-button {
        margin-left: -2.5px;
        margin-right: -5px !important
    }

    ._controls_1v3s5_5 .fullscreen-button {
        margin-right: 0 !important
    }

    ._controls_1v3s5_5 .volume-slider {
        --media-slider-preview-offset: 30px
    }

    ._gesture_1v3s5_66 {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0
    }

    ._gesture_1v3s5_66[action="seek:-10"],
    ._gesture_1v3s5_66[action="seek:10"] {
        width: 20%;
        z-index: 1
    }

    ._gesture_1v3s5_66[action="seek:10"] {
        left: unset;
        right: 0
    }

    @media (pointer: coarse) {
        ._gesture_1v3s5_66[action="toggle:paused"] {
            display: none
        }
    }

    @media not (pointer: coarse) {
        ._gesture_1v3s5_66[action="toggle:controls"] {
            display: none
        }
    }

    ._button_cnh7i_5 {
        display: inline-flex;
        position: relative;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        color: #fff;
        border-radius: 8px;
        cursor: pointer;
        padding: 0;
        user-select: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: none;
        outline: none;
        border: none;
        touch-action: manipulation;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent
    }

    ._button_cnh7i_5[aria-hidden=true] {
        display: none
    }

    ._button_cnh7i_5>svg {
        width: 80%;
        height: 80%;
        border-radius: 2px
    }

    ._button_cnh7i_5[data-focus]>svg {
        box-shadow: var(--focus-ring)
    }

    @media (hover: hover) and (pointer: fine) {
        ._button_cnh7i_5:hover {
            background-color: #fff3
        }
    }

    ._tooltip_88dae_1 {
        --enter-transform: translateY(0px) scale(1);
        --exit-transform: translateY(12px) scale(.8);
        display: inline-block;
        color: #ccc;
        background-color: #000;
        font-size: 13px;
        font-weight: 500;
        opacity: 0;
        pointer-events: none;
        white-space: nowrap;
        z-index: 10;
        border-radius: 2px;
        padding: 2px 8px;
        will-change: transform, opacity
    }

    ._tooltip_88dae_1[data-visible] {
        animation: _media-tooltip-enter_88dae_1 .2s ease-in;
        animation-fill-mode: forwards
    }

    ._tooltip_88dae_1:not([data-visible]) {
        animation: _media-tooltip-exit_88dae_1 .2s ease-out
    }

    ._tooltip_88dae_1[data-placement~=bottom] {
        --exit-transform: translateY(-12px) scale(.8)
    }

    @keyframes _media-tooltip-enter_88dae_1 {
        0% {
            opacity: 0;
            transform: var(--exit-transform)
        }

        to {
            opacity: 1;
            transform: var(--enter-transform)
        }
    }

    @keyframes _media-tooltip-exit_88dae_1 {
        0% {
            opacity: 1;
            transform: var(--enter-transform)
        }

        to {
            opacity: 0;
            transform: var(--exit-transform)
        }
    }

    .menu[data-open] ._tooltip_88dae_1 {
        display: none !important
    }

    ._menu_1rs4z_5 {
        --enter-transform: translateY(0px);
        --exit-transform: translateY(12px);
        display: flex;
        font-size: 15px;
        font-weight: 500;
        font-family: sans-serif;
        flex-direction: column;
        transition: height .35s ease;
        min-width: 260px;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid rgb(255 255 255 / .1);
        background-color: #0a0a0af2;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        height: var(--menu-height, auto);
        will-change: width, height;
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        max-height: 250px
    }

    ._menu_1rs4z_5[data-resizing] {
        overflow: hidden;
        pointer-events: none
    }

    ._menu_1rs4z_5:not([data-open]) {
        animation: _media-menu-exit_1rs4z_1 .2s ease-out
    }

    ._menu_1rs4z_5[data-open] {
        animation: _media-menu-enter_1rs4z_1 .3s ease-out;
        animation-fill-mode: forwards;
        opacity: 1
    }

    ._menu_1rs4z_5[data-placement~=bottom] {
        --enter-transform: translateY(0);
        --exit-transform: translateY(-12px)
    }

    ._menu_1rs4z_5 [role=menuitem][data-focus],
    ._menu_1rs4z_5 [role=menuitemradio][data-focus] {
        outline: none;
        box-shadow: var(--media-focus-ring)
    }

    @keyframes _media-menu-enter_1rs4z_1 {
        0% {
            opacity: 0;
            transform: var(--exit-transform)
        }

        to {
            opacity: 1;
            transform: var(--enter-transform)
        }
    }

    @keyframes _media-menu-exit_1rs4z_1 {
        0% {
            opacity: 1;
            transform: var(--enter-transform)
        }

        to {
            opacity: 0;
            transform: var(--exit-transform)
        }
    }

    ._rotateIcon_1rs4z_81 {
        transition: transform .2s ease-out
    }

    ._menuButton_1rs4z_85[aria-expanded=true] ._rotateIcon_1rs4z_81 {
        transform: rotate(90deg);
        transition: transform .2s ease-in
    }

    ._submenuButton_1rs4z_94 {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 10px;
        border-radius: 2px;
        color: #fff;
        user-select: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: none;
        outline: none;
        border: none;
        touch-action: manipulation;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent
    }

    ._submenuButton_1rs4z_94[data-open] {
        position: sticky;
        top: -10px;
        left: 0;
        width: 100%;
        z-index: 10;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        border-radius: 2px 2px 0 0;
        border-bottom: 1px solid rgb(245 245 245 /.15);
        background-color: #0a0a0a99
    }

    ._submenuButton_1rs4z_94[data-focus] {
        background-color: #f5f5f514
    }

    ._submenuButton_1rs4z_94[aria-disabled=true],
    ._submenuButton_1rs4z_94[aria-hidden=true] {
        display: none
    }

    ._submenuButton_1rs4z_94[data-open] ._submenuCloseIcon_1rs4z_136 {
        display: inline-block
    }

    ._submenuIcon_1rs4z_140 {
        width: 22px;
        height: 22px
    }

    ._submenuButton_1rs4z_94[data-open] ._submenuIcon_1rs4z_140 {
        display: none
    }

    @media (hover: hover) and (pointer: fine) {
        ._submenuButton_1rs4z_94:hover {
            cursor: pointer;
            background-color: #f5f5f514
        }
    }

    ._submenuButton_1rs4z_94:not([data-open]) ._submenuLabel_1rs4z_156 {
        margin-left: 6px
    }

    ._submenuCloseIcon_1rs4z_136 {
        margin-right: 2px
    }

    ._submenuOpenIcon_1rs4z_164,
    ._submenuCloseIcon_1rs4z_136 {
        width: 18px;
        height: 18px;
        display: none
    }

    ._submenuHint_1rs4z_171,
    ._submenuOpenIcon_1rs4z_164 {
        margin-left: auto;
        color: #f5f5f580;
        font-size: 14px
    }

    ._submenuHint_1rs4z_171:not(:empty)+._submenuOpenIcon_1rs4z_164 {
        margin-left: 2px
    }

    ._submenuButton_1rs4z_94:not([data-open]) ._submenuOpenIcon_1rs4z_164 {
        display: inline-block
    }

    ._submenu_1rs4z_94 {
        display: inline-block;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        margin-top: 12px
    }

    ._submenu_1rs4z_94[aria-hidden=true] {
        display: none
    }

    ._radioGroup_1rs4z_207 {
        width: 100%;
        display: flex;
        flex-direction: column
    }

    ._radio_1rs4z_207 {
        align-items: center;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: 14px;
        border-radius: 2px;
        contain: content;
        cursor: pointer;
        display: flex;
        justify-content: flex-start;
        padding: 12px;
        position: relative;
        width: 100%;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent
    }

    ._radio_1rs4z_207[data-focus] {
        background-color: #f5f5f514
    }

    @media (hover: hover) and (pointer: fine) {
        ._radio_1rs4z_207:hover {
            cursor: pointer;
            background-color: #f5f5f514
        }
    }

    ._radioCheck_1rs4z_240 {
        align-items: center;
        border-radius: 9999px;
        display: flex;
        width: 9px;
        height: 9px;
        border: 2px solid rgb(245 245 245 / .5);
        justify-content: center;
        margin-right: 8px
    }

    ._radio_1rs4z_207[data-checked] ._radioCheck_1rs4z_240 {
        border: 2px solid var(--media-brand)
    }

    ._radio_1rs4z_207[data-checked] ._radioCheck_1rs4z_240:after {
        content: "";
        border-color: #f5f5f5;
        background-color: #f5f5f5;
        border-radius: 9999px;
        height: 4px;
        width: 4px
    }

    ._slider_cwerq_5 {
        display: inline-flex;
        align-items: center;
        width: 100%;
        height: 40px;
        position: relative;
        contain: layout style;
        outline: none;
        pointer-events: auto;
        cursor: pointer;
        user-select: none;
        touch-action: none;
        margin: 0 7.5px;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent
    }

    ._sliderSmall_cwerq_23 {
        max-width: 72px
    }

    ._slider_cwerq_5[data-focus] ._track_cwerq_27 {
        box-shadow: var(--media-focus-ring)
    }

    ._track_cwerq_27 {
        z-index: 0;
        position: absolute;
        width: 100%;
        height: 5px;
        top: 50%;
        left: 0;
        border-radius: 1px;
        transform: translateY(-50%) translateZ(0);
        background-color: #ffffff4d;
        contain: strict
    }

    ._trackFill_cwerq_44 {
        z-index: 2;
        background-color: var(--media-brand);
        width: var(--slider-fill, 0%);
        will-change: width
    }

    .time-slider ._trackFill_cwerq_44 {
        width: var(--chapter-fill, 0%)
    }

    ._progress_cwerq_55 {
        width: var(--chapter-progress, 0%);
        will-change: width;
        background-color: #ffffff80
    }

    ._chapters_cwerq_65 {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        contain: layout style;
        border-radius: 1px
    }

    ._chapter_cwerq_65 {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        will-change: height, transform;
        contain: layout style;
        border-radius: 1px;
        margin-right: 2px
    }

    ._chapter_cwerq_65:last-child {
        margin-right: 0
    }

    ._preview_cwerq_95 {
        display: flex;
        flex-direction: column;
        align-items: center;
        opacity: 0;
        border-radius: 2px;
        pointer-events: none;
        transition: opacity .2s ease-out;
        will-change: left, opacity;
        contain: layout paint style
    }

    ._preview_cwerq_95[data-visible] {
        opacity: 1;
        transition: opacity .2s ease-in
    }

    ._chapterTitle_cwerq_112 {
        margin-top: 8px;
        font-size: 14px
    }

    ._timeValue_cwerq_117 {
        font-size: 13px;
        margin-top: 2px
    }

    ._volumeValue_cwerq_122 {
        font-size: 13px;
        padding: 1px 10px;
        border-radius: 2px;
        background-color: #000
    }

    ._thumbnail_cwerq_129 {
        display: block;
        width: var(--thumbnail-width);
        height: var(--thumbnail-height);
        background-color: #000;
        border: 1px solid white;
        contain: strict;
        overflow: hidden;
        min-width: 120px;
        min-height: 80px;
        max-width: 180px;
        max-height: 160px
    }

    ._thumb_cwerq_129 {
        position: absolute;
        top: 50%;
        left: var(--slider-fill);
        opacity: 0;
        contain: layout size style;
        width: 15px;
        height: 15px;
        border: 1px solid #cacaca;
        border-radius: 9999px;
        background-color: #fff;
        transform: translate(-50%, -50%) translateZ(0);
        transition: opacity .15s ease-in;
        pointer-events: none;
        will-change: left;
        z-index: 2
    }

    [data-active]>._thumb_cwerq_129 {
        opacity: 1;
        transition: opacity .2s ease-in
    }

    [data-dragging]>._thumb_cwerq_129 {
        box-shadow: 0 0 0 3px #fff6
    }

    ._group_qnncu_1 {
        display: flex;
        align-items: center;
        margin-left: 8px
    }

    ._time_qnncu_7 {
        display: inline-block;
        contain: content;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: .025em
    }

    ._divider_qnncu_15 {
        margin: 0 2.5px;
        color: #e0e0e0
    }

}