@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap");

.VideoExperience-MAIN {
    box-sizing: border-box;
    width: 100%;
    padding: 120px 32px;
    background: #161818;
    color: #f4f3ea;
    font-family: "Plus Jakarta Sans", "Jost", sans-serif;
}
.VideoExperience-MAIN * { box-sizing: border-box; }
.VideoExperience-MAIN button { font: inherit; }
.video-experience-inner { width: min(100%, 1216px); margin: 0 auto; }
.video-experience-heading { text-align: center; }
.video-experience-kicker,
.video-selection-heading {
    margin: 0;
    color: #a0a57e;
    font: 500 16px/1.5 "Jost", sans-serif;
    letter-spacing: 4.08px;
    text-transform: uppercase;
}
.video-experience-heading h2 {
    margin: 8px 0 0;
    color: #f4f3ea;
    font: 300 clamp(36px, 4vw, 52px)/1.1 "Jost", sans-serif;
    letter-spacing: -0.01em;
}
.video-experience-heading > p:last-child {
    margin: 16px 0 0;
    color: rgba(244,243,234,.42);
    font: 400 16px/26px "Plus Jakarta Sans", sans-serif;
}
.video-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 60px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 24px;
    background: #080909;
    box-shadow: 0 40px 80px rgba(0,0,0,.4);
}
.video-player video,
.video-player-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.video-player video { object-fit: contain; opacity: 0; }
.video-player.has-started video { opacity: 1; }
.video-player-poster { object-fit: cover; }
.video-player.has-started .video-player-poster { display: none; }
.video-player::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(22,24,24,.36), transparent 35%, transparent 55%, rgba(22,24,24,.24));
}
.video-player-badge {
    position: absolute;
    z-index: 2;
    top: 46px;
    left: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
    color: rgba(244,243,234,.75);
    font: 500 12px/1.2 "Plus Jakarta Sans", sans-serif;
    letter-spacing: 1.2px;
}
.video-player-badge img { width: 7px; height: 7px; }
.video-player-center {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    padding: 0;
    transform: translate(-50%,-50%);
    border: 1px solid rgba(154,160,111,.25);
    border-radius: 50%;
    background: rgba(154,160,111,.1);
    box-shadow: 0 0 32px rgba(154,160,111,.2);
    cursor: pointer;
}
.video-player-center span {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f4f3ea;
}
.video-player-center img { width: 20px; height: 22px; }
.video-player.is-playing .video-player-center { display: none; }
.video-player-controls {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 48px 48px 32px;
    background: linear-gradient(to bottom, transparent, rgba(22,24,24,.9));
}
.video-progress-wrap { position: relative; height: 11px; display: flex; align-items: center; }
.video-progress {
    width: 100%;
    height: 3px;
    margin: 0;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(to right, #9aa06f 0 var(--progress, 0%), rgba(255,255,255,.18) var(--progress, 0%) 100%);
    cursor: pointer;
}
.video-progress::-webkit-slider-thumb { width: 27px; height: 27px; border: 0; background: url("./assets/mua-player-scrubber.svg") center / 27px 27px no-repeat; appearance: none; -webkit-appearance: none; }
.video-progress::-moz-range-thumb { width: 27px; height: 27px; border: 0; background: url("./assets/mua-player-scrubber.svg") center / 27px 27px no-repeat; }
.video-control-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; }
.video-control-group { display: flex; align-items: center; gap: 16px; }
.video-control-group:first-child { gap: 24px; }
.video-icon-button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    color: #f4f3ea;
    cursor: pointer;
}
.video-icon-button:hover { background: rgba(255,255,255,.16); }
.video-icon-button[aria-pressed="true"] { background: rgba(154,160,111,.3); }
.video-time { color: #f4f3ea; font: 400 13px/1 "Jost", sans-serif; white-space: nowrap; }
.video-time span { color: rgba(244,243,234,.4); }
.video-cc {
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 4px;
    background: transparent;
    color: rgba(244,243,234,.42);
    font: 700 11px/1 "Jost", sans-serif !important;
    letter-spacing: .5px;
}
.video-settings { position: relative; }
.video-speed-menu {
    position: absolute;
    right: 0;
    bottom: 44px;
    min-width: 150px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: #242521;
    box-shadow: 0 10px 24px rgba(0,0,0,.4);
}
.video-speed-menu[hidden] { display: none; }
.video-speed-menu p { margin: 4px 8px 8px; font-size: 12px; color: #a0a57e; }
.video-speed-menu button { display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: #f4f3ea; text-align: left; cursor: pointer; }
.video-speed-menu button:hover,
.video-speed-menu button[aria-checked="true"] { background: rgba(154,160,111,.25); }
.video-player-message { position: absolute; z-index: 3; top: 25%; left: 50%; width: min(80%, 380px); transform: translateX(-50%); color: white; text-align: center; }
.video-experience-quote {
    margin: 50px 0 0;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,.05);
    color: rgba(244,243,234,.25);
    font: italic 400 18px/24px "Plus Jakarta Sans", sans-serif;
    text-align: center;
}
.video-selection { margin-top: 40px; }
.video-selection-heading { text-align: center; }
.video-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.video-option {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    background: rgba(255,255,255,.01);
    color: #f4f3ea;
    text-align: left;
    cursor: pointer;
}
.video-option[aria-pressed="true"] { border-color: #9aa06f; background: rgba(255,255,255,.02); box-shadow: 0 12px 24px rgba(0,0,0,.1); }
.video-option:hover { border-color: #9aa06f; }
.video-option img { display: block; width: 100%; aspect-ratio: 264 / 104; border-radius: 12px; object-fit: cover; }
.video-option span { font: 600 16px/1.35 "Plus Jakarta Sans", sans-serif; }
.VideoExperience-MAIN button:focus-visible,
.VideoExperience-MAIN input:focus-visible { outline: 2px solid #f4f3ea; outline-offset: 3px; }
.video-player:fullscreen { border-radius: 0; aspect-ratio: auto; }
.video-player:fullscreen .video-player-controls { padding-bottom: 32px; }
@media (max-width: 760px) {
    .VideoExperience-MAIN { padding: 72px 20px 80px; }
    .video-experience-kicker,
    .video-selection-heading { font-size: 12px; letter-spacing: 3px; }
    .video-experience-heading h2 { font-size: clamp(34px, 9vw, 46px); }
    .video-experience-heading > p:last-child { font-size: 14px; line-height: 22px; }
    .video-player { margin-top: 36px; aspect-ratio: 4 / 5; border-radius: 18px; }
    .video-player-badge { top: 18px; left: 18px; padding: 7px 10px; font-size: 10px; }
    .video-player-center { width: 76px; height: 76px; }
    .video-player-center span { width: 58px; height: 58px; }
    .video-player-controls { padding: 30px 16px 18px; }
    .video-control-group { gap: 8px; }
    .video-control-group:first-child { gap: 10px; }
    .video-icon-button { width: 32px; height: 32px; flex-basis: 32px; }
    .video-time { font-size: 11px; }
    .video-experience-quote { margin-top: 32px; padding-top: 24px; font-size: 14px; line-height: 22px; }
    .video-selection { margin-top: 32px; }
    .video-options { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .video-option { padding: 8px; border-radius: 14px; gap: 8px; }
    .video-option img { border-radius: 8px; aspect-ratio: 16 / 9; }
    .video-option span { font-size: 13px; }
}
@media (max-width: 390px) {
    .video-control-group:last-child { gap: 6px; }
    .video-control-group:first-child { gap: 6px; }
    .video-cc { display: none; }
}
.video-icon-button.is-playing img { display: none; }
.video-icon-button.is-playing::before,
.video-icon-button.is-playing::after { content: ""; width: 3px; height: 13px; background: #f4f3ea; border-radius: 1px; }
.video-icon-button.is-playing { display: flex; justify-content: center; gap: 3px; }