.mtvc-shell {
    --mtvc-text: #323e48;
    --mtvc-green: #3dae2b;
    --mtvc-mint: #6ec595;
    --mtvc-teal: #66dad6;
    --mtvc-border: #e8e8e8;
    --mtvc-soft: #f5f5f5;
    --mtvc-white: #fff;
    --mtvc-overlay: rgba(0, 0, 0, 0.75);
    --mtvc-video-height: 420px;
    --mtvc-video-ratio: 16 / 9;
    color: var(--mtvc-text);
}

.mtvc-layout {
    display: grid;
    grid-template-columns: minmax(240px, 30%) minmax(0, 70%);
    gap: 0;
    align-items: start;
}

.mtvc-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    align-self: start;
    height: var(--mtvc-video-height);
    max-height: var(--mtvc-video-height);
    min-height: 0;
    overflow: hidden;
    padding: 14px;
    border: 0;
    box-sizing: border-box;
    background: var(--mtvc-white);
}

.mtvc-panel h3 {
    display: block;
    height: auto;
    min-height: 0;
    margin: 0 !important;
    padding: 0 0 8px !important;
    color: var(--mtvc-green);
    font-size: 22px !important;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15 !important;
    text-transform: none;
}

.mtvc-panel-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-color: var(--mtvc-mint) var(--mtvc-soft);
}

.mtvc-chapter-card {
    appearance: none;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    gap: 4px;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 8px;
    background: var(--mtvc-soft) !important;
    box-shadow: none !important;
    color: var(--mtvc-text) !important;
    font: inherit;
    letter-spacing: 0;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.mtvc-chapter-card:hover,
.mtvc-chapter-card:focus-visible {
    background: rgba(102, 218, 214, 0.18) !important;
    outline: none;
}

.mtvc-chapter-card.is-active {
    background: rgba(110, 197, 149, 0.18) !important;
}

.mtvc-chapter-card span {
    display: block;
    margin: 0;
    padding: 0;
}

.mtvc-chapter-card__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    white-space: pre-line;
}

.mtvc-chapter-card__time {
    color: var(--mtvc-green);
    font-size: 13px;
    font-weight: 700;
}

.mtvc-chapter-card__description {
    color: rgba(50, 62, 72, 0.82);
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mtvc-empty,
.mtvc-missing {
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--mtvc-soft);
    color: var(--mtvc-text);
}

.mtvc-stage {
    position: relative;
    align-self: start;
    overflow: hidden;
    width: 100%;
    aspect-ratio: var(--mtvc-video-ratio);
    border-radius: 0;
    background: #000;
    color: var(--mtvc-white);
}

.mtvc-video {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: cover;
}

.mtvc-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    opacity: 1;
    pointer-events: none;
    transition: opacity 260ms ease;
}

.mtvc-placeholder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mtvc-stage.has-started .mtvc-placeholder {
    opacity: 0;
}

.mtvc-center-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    width: 82px;
    height: 82px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mtvc-white);
    place-items: center;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: opacity 160ms ease, transform 160ms ease;
}

.mtvc-center-play:hover,
.mtvc-center-play:focus-visible {
    outline: none;
    transform: translate(-50%, -50%) scale(1.04);
}

.mtvc-center-play-svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.32));
}

.mtvc-center-play-svg .mtvc-play-bg {
    fill: rgba(0, 0, 0, 0.72);
}

.mtvc-center-play-svg .clsss-1 {
    fill: #8cc540;
}

.mtvc-stage.is-playing .mtvc-center-play {
    opacity: 0;
    pointer-events: none;
}

.mtvc-top-overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    display: grid;
    gap: 2px;
    min-height: 92px;
    padding: 18px 20px 32px;
    background: linear-gradient(180deg, var(--mtvc-overlay), rgba(0, 0, 0, 0));
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.mtvc-video-title {
    max-width: min(560px, 86%);
    overflow-wrap: anywhere;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.mtvc-active-chapter {
    max-width: min(560px, 86%);
    min-height: 18px;
    overflow-wrap: anywhere;
    color: var(--mtvc-teal);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.mtvc-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 36px auto minmax(120px, 1fr) 44px;
    gap: 10px;
    align-items: center;
    padding: 28px 16px 14px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--mtvc-overlay));
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.mtvc-stage.is-user-active .mtvc-controls,
.mtvc-stage.is-paused .mtvc-controls,
.mtvc-stage.is-volume-active .mtvc-controls,
.mtvc-stage.is-user-active .mtvc-top-overlay,
.mtvc-stage.is-paused .mtvc-top-overlay,
.mtvc-stage.is-user-active .mtvc-fullscreen,
.mtvc-stage.is-paused .mtvc-fullscreen {
    opacity: 1;
    transform: translateY(0);
}

.mtvc-control {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--mtvc-white);
    place-items: center;
    cursor: pointer;
}

.mtvc-control:hover,
.mtvc-control:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    outline: none;
}

.mtvc-icon {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
}

.mtvc-icon-play::before {
    position: absolute;
    top: 2px;
    left: 5px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid currentColor;
    content: "";
}

.mtvc-stage.is-playing .mtvc-toggle .mtvc-icon-play::before,
.mtvc-stage.is-playing .mtvc-toggle .mtvc-icon-play::after {
    position: absolute;
    top: 2px;
    width: 4px;
    height: 14px;
    border: 0;
    background: currentColor;
    content: "";
}

.mtvc-stage.is-playing .mtvc-toggle .mtvc-icon-play::before {
    left: 4px;
}

.mtvc-stage.is-playing .mtvc-toggle .mtvc-icon-play::after {
    left: 11px;
}

.mtvc-time {
    min-width: 88px;
    color: var(--mtvc-white);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.mtvc-timeline {
    position: relative;
    height: 34px;
    cursor: pointer;
}

.mtvc-timeline:focus-visible {
    outline: 2px solid var(--mtvc-teal);
    outline-offset: 2px;
}

.mtvc-segments {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 6px;
    overflow: visible;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-50%);
}

.mtvc-segment {
    position: absolute;
    top: 0;
    height: 6px;
    box-sizing: border-box;
    padding-right: 1px;
    padding-left: 1px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    background-clip: content-box;
    transition: background 140ms ease;
}

.mtvc-segment.is-hovered {
    background: rgba(255, 255, 255, 0.34);
    background-clip: content-box;
}

.mtvc-segment.is-active {
    background: linear-gradient(90deg, var(--mtvc-green) var(--chapter-progress), rgba(255, 255, 255, 0.42) var(--chapter-progress));
    background-clip: content-box;
}

.mtvc-segment.is-active.is-hovered {
    background: linear-gradient(90deg, var(--mtvc-green) var(--chapter-progress), rgba(255, 255, 255, 0.34) var(--chapter-progress));
    background-clip: content-box;
}

.mtvc-playhead {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 4;
    width: 3px;
    height: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.mtvc-hover-line {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 3;
    width: 3px;
    height: 14px;
    border-radius: 999px;
    background: var(--mtvc-white);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 120ms ease;
}

.mtvc-hover-line.is-visible {
    opacity: 1;
}

.mtvc-hover-time-tooltip {
    position: absolute;
    bottom: 28px;
    left: 0;
    z-index: 5;
    width: max-content;
    padding: 4px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.86);
    color: var(--mtvc-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 140ms ease, transform 140ms ease;
    white-space: nowrap;
}

.mtvc-hover-time-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.mtvc-timeline-tooltip {
    position: absolute;
    bottom: 54px;
    left: 0;
    z-index: 5;
    width: max-content;
    max-width: min(320px, 80vw);
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.9);
    color: var(--mtvc-white);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    opacity: 0;
    overflow-wrap: break-word;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 140ms ease, transform 140ms ease;
    white-space: normal;
}

.mtvc-timeline-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.mtvc-volume-control {
    position: relative;
    display: grid;
    width: 44px;
    height: 36px;
    align-self: center;
    justify-self: center;
    place-items: center;
}

.mtvc-volume-button {
    align-self: center;
    justify-self: center;
    margin: 0 !important;
}

.mtvc-volume-svg {
    display: block;
    width: 24px;
    height: 24px;
    overflow: visible;
}

.mtvc-volume-svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtvc-volume-svg .mtvc-volume-speaker {
    fill: currentColor;
    stroke: none;
}

.mtvc-volume-svg .mtvc-volume-slash {
    opacity: 0;
}

.mtvc-stage.is-muted .mtvc-volume-wave {
    opacity: 0;
}

.mtvc-stage.is-muted .mtvc-volume-slash {
    opacity: 1;
    stroke-width: 2.2;
}

.mtvc-volume-popover {
    position: absolute;
    bottom: 36px;
    left: 50%;
    display: grid;
    width: 24px !important;
    height: 110px !important;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    place-items: center;
    transform: translate(-50%, 6px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.mtvc-volume-control:hover .mtvc-volume-popover,
.mtvc-volume-control:focus-within .mtvc-volume-popover,
.mtvc-volume-control.is-volume-open .mtvc-volume-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.mtvc-volume {
    display: block;
    width: 24px !important;
    height: 110px !important;
    margin: 0;
    accent-color: var(--mtvc-teal);
    background: transparent;
    cursor: pointer;
    direction: rtl;
    writing-mode: vertical-lr;
    -webkit-appearance: none;
    appearance: none;
}

.mtvc-volume::-webkit-slider-runnable-track {
    width: 4px !important;
    height: 110px !important;
    border: 0;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.38);
    box-shadow: none;
}

.mtvc-volume::-webkit-slider-thumb {
    width: 20px !important;
    height: 20px !important;
    margin-left: -8px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--mtvc-teal);
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.mtvc-volume::-moz-range-track {
    width: 4px !important;
    height: 110px !important;
    border: 0;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.38);
    box-shadow: none;
}

.mtvc-volume::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--mtvc-teal);
    box-shadow: none;
    cursor: pointer;
}

.mtvc-fullscreen {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.mtvc-fullscreen-svg {
    display: block;
    width: 24px;
    height: 24px;
}

.mtvc-fullscreen-svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

@media (min-width: 801px) {
    .mtvc-layout {
        grid-template-columns: minmax(16.667vw, 30%) minmax(0, 70%);
    }

    .mtvc-panel {
        gap: 0.694vw;
        padding: 0.972vw;
    }

    .mtvc-panel h3 {
        padding-bottom: 0.556vw !important;
        font-size: 1.528vw !important;
    }

    .mtvc-panel-list {
        gap: 0.556vw;
        padding-right: 0.278vw;
    }

    .mtvc-chapter-card {
        gap: 0.278vw;
        padding: 0.833vw !important;
        border-radius: 0.556vw;
    }

    .mtvc-chapter-card__title {
        font-size: 1.111vw;
    }

    .mtvc-chapter-card__time {
        font-size: 0.903vw;
    }

    .mtvc-chapter-card__description {
        font-size: 0.972vw;
    }

    .mtvc-empty,
    .mtvc-missing {
        padding: 0.972vw 1.111vw;
        border-radius: 0.556vw;
    }

    .mtvc-center-play {
        width: 5.694vw;
        height: 5.694vw;
    }

    .mtvc-center-play-svg {
        filter: drop-shadow(0 0.556vw 1.528vw rgba(0, 0, 0, 0.32));
    }

    .mtvc-top-overlay {
        gap: 0.139vw;
        min-height: 6.389vw;
        padding: 1.25vw 1.389vw 2.222vw;
        transform: translateY(-0.556vw);
    }

    .mtvc-video-title {
        max-width: min(38.889vw, 86%);
        font-size: 1.25vw;
    }

    .mtvc-active-chapter {
        max-width: min(38.889vw, 86%);
        min-height: 1.25vw;
        font-size: 0.972vw;
    }

    .mtvc-controls {
        grid-template-columns: 2.5vw auto minmax(8.333vw, 1fr) 3.056vw;
        gap: 0.694vw;
        padding: 1.944vw 1.111vw 0.972vw;
        transform: translateY(0.694vw);
    }

    .mtvc-control {
        width: 2.5vw;
        height: 2.5vw;
        border-radius: 0.278vw;
    }

    .mtvc-icon {
        width: 1.25vw;
        height: 1.25vw;
    }

    .mtvc-icon-play::before {
        top: 0.139vw;
        left: 0.347vw;
        border-top-width: 0.486vw;
        border-bottom-width: 0.486vw;
        border-left-width: 0.764vw;
    }

    .mtvc-stage.is-playing .mtvc-toggle .mtvc-icon-play::before,
    .mtvc-stage.is-playing .mtvc-toggle .mtvc-icon-play::after {
        top: 0.139vw;
        width: 0.278vw;
        height: 0.972vw;
    }

    .mtvc-stage.is-playing .mtvc-toggle .mtvc-icon-play::before {
        left: 0.278vw;
    }

    .mtvc-stage.is-playing .mtvc-toggle .mtvc-icon-play::after {
        left: 0.764vw;
    }

    .mtvc-time {
        min-width: 6.111vw;
        font-size: 0.903vw;
    }

    .mtvc-timeline {
        height: 2.361vw;
    }

    .mtvc-timeline:focus-visible {
        outline-width: 0.139vw;
        outline-offset: 0.139vw;
    }

    .mtvc-segments,
    .mtvc-segment {
        height: 0.417vw;
    }

    .mtvc-segment {
        padding-right: 0.069vw;
        padding-left: 0.069vw;
    }

    .mtvc-playhead {
        width: 0.208vw;
        height: 0.972vw;
        box-shadow: 0 0 0 0.069vw rgba(0, 0, 0, 0.22);
    }

    .mtvc-hover-line {
        width: 0.208vw;
        height: 0.972vw;
    }

    .mtvc-hover-time-tooltip {
        bottom: 1.944vw;
        padding: 0.278vw 0.486vw;
        border-radius: 0.278vw;
        font-size: 0.764vw;
        transform: translate(-50%, 0.278vw);
    }

    .mtvc-timeline-tooltip {
        bottom: 3.75vw;
        max-width: min(22.222vw, 80vw);
        padding: 0.417vw 0.556vw;
        border-radius: 0.278vw;
        font-size: 0.833vw;
        transform: translate(-50%, 0.278vw);
    }

    .mtvc-volume-control {
        width: 3.056vw;
        height: 2.5vw;
    }

    .mtvc-volume-svg {
        width: 1.667vw;
        height: 1.667vw;
    }

    .mtvc-volume-popover {
        bottom: 2.5vw;
        width: 1.667vw !important;
        height: 7.639vw !important;
        border-radius: 0;
        box-shadow: none;
        transform: translate(-50%, 0.417vw);
    }

    .mtvc-volume-control:hover .mtvc-volume-popover,
    .mtvc-volume-control:focus-within .mtvc-volume-popover,
    .mtvc-volume-control.is-volume-open .mtvc-volume-popover {
        transform: translate(-50%, 0);
    }

    .mtvc-volume {
        width: 1.667vw !important;
        height: 7.639vw !important;
    }

    .mtvc-volume::-webkit-slider-runnable-track {
        width: 0.278vw !important;
        height: 7.639vw !important;
    }

    .mtvc-volume::-webkit-slider-thumb {
        width: 1.389vw !important;
        height: 1.389vw !important;
        margin-left: -0.556vw !important;
    }

    .mtvc-volume::-moz-range-track {
        width: 0.278vw !important;
        height: 7.639vw !important;
    }

    .mtvc-volume::-moz-range-thumb {
        width: 1.389vw !important;
        height: 1.389vw !important;
    }

    .mtvc-fullscreen {
        top: 0.833vw;
        right: 0.833vw;
        transform: translateY(-0.417vw);
    }

    .mtvc-fullscreen-svg {
        width: 1.667vw;
        height: 1.667vw;
    }
}

@media (max-width: 800px) {
    .mtvc-layout {
        grid-template-columns: 1fr;
    }

    .mtvc-panel {
        order: 2;
        height: auto;
        max-height: none;
    }

    .mtvc-stage {
        order: 1;
    }
}

@media (max-width: 640px) {
    .mtvc-controls {
        grid-template-columns: 36px auto minmax(80px, 1fr) 40px;
        gap: 6px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .mtvc-time {
        min-width: 76px;
        font-size: 12px;
    }

    .mtvc-center-play {
        width: 64px;
        height: 64px;
    }

    .mtvc-video-title {
        font-size: 16px;
    }
}