html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #0d1522; }
.animation-player {
    --animation-control-unit: 19.2px;
    --animation-volume-unit: 16px;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #fff;
    background: #0d1522;
    font: 13px/1.5 Arial, "Microsoft YaHei", sans-serif;
}
.animation-player [hidden] { display: none !important; }
.animation-host { position: absolute; inset: 0; }
.animation-host > * { display: block; width: 100%; height: 100%; }
.animation-host > video {
    object-fit: contain;
}
.animation-player button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 38px; padding: 10px; border: 0; border-radius: 3px; color: #fff; background: transparent; cursor: pointer; }
.animation-player button:hover { background-color: rgba(255, 255, 255, .1); }
.animation-player button:disabled { opacity: .38; cursor: default; }
.animation-player button:focus-visible, .animation-volume input:focus-visible { outline: 2px solid #3a8bff; outline-offset: -2px; }
.animation-player .animation-start {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 0;
    background: url("../index/images/bigPlayButton.png") center / contain no-repeat;
    filter: drop-shadow(0 1px 4px rgba(39, 40, 41, .1));
    transform: translate(-50%, -50%);
}
.animation-player[data-theme="modern"] .animation-start {
    background-image: url("../index/new/images/svg/icon-play-lg.svg");
}
.animation-player .animation-start:hover {
    background-color: transparent;
    opacity: .9;
}
.animation-start .animation-icon {
    display: none;
}
.animation-feedback { position: absolute; inset: 0 20px 60px; display: flex; align-items: center; justify-content: center; text-align: center; color: #ccd0d6; pointer-events: none; }
.animation-player[data-state="error"] .animation-feedback { align-items: flex-start; padding-top: 20px; color: #ffb4b4; }
.animation-controls { position: absolute; bottom: 0; left: 0; right: 0; z-index: 4; padding: 22px 14px 4px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); pointer-events: none; }
.animation-controls button {
    pointer-events: auto;
}
.animation-control-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.animation-controls button {
    box-sizing: border-box;
    flex-shrink: 0;
    width: calc(2.5 * var(--animation-control-unit, 19.2px));
    height: calc(2.5 * var(--animation-control-unit, 19.2px));
    padding: calc(.625 * var(--animation-control-unit, 19.2px));
    border-radius: 0;
}
.animation-load-text { flex: 1; min-width: 0; margin: 0 8px; color: #d6d9dd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.animation-player[data-state="playing"] .animation-controls { opacity: 0; transition: opacity .2s; }
.animation-player[data-state="playing"][data-controls="hidden"] .animation-controls button,
.animation-player[data-state="playing"][data-controls="hidden"] .animation-controls input { pointer-events: none; }
.animation-player:has(.animation-volume.open) .animation-controls,
.animation-player[data-controls="visible"] .animation-controls,
.animation-player .animation-controls:has(:focus-visible) {
    opacity: 1;
}
.animation-player .animation-controls:has(:focus-visible) button,
.animation-player .animation-controls:has(:focus-visible) input { pointer-events: auto; }
.animation-player:has(.animation-volume.open) .animation-controls button {
    pointer-events: auto;
}
.animation-progress { display: block; width: calc(100% - 4px); height: 3px; margin: 0 2px 5px; border: none; appearance: none; background: #525963; accent-color: #3a8bff; }
.animation-progress::-webkit-progress-bar { background: #525963; border-radius: 4px; }
.animation-progress::-webkit-progress-value { background: #3a8bff; border-radius: 4px; }
.animation-progress::-moz-progress-bar { background: #3a8bff; }

.animation-player:fullscreen { width: 100vw; height: 100vh; }
.animation-icon { display: block; flex-shrink: 0; width: 18px; height: 18px; background: currentColor; mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat; }
.animation-controls .animation-icon {
    width: calc(1.25 * var(--animation-control-unit, 19.2px));
    height: calc(1.25 * var(--animation-control-unit, 19.2px));
}
.animation-player:fullscreen .animation-controls .animation-icon {
    width: calc(1.375 * var(--animation-control-unit, 19.2px));
    height: calc(1.375 * var(--animation-control-unit, 19.2px));
}
.animation-icon.play { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3v18l15-9z'/%3E%3C/svg%3E"); }
.animation-start .animation-icon { width: 24px; height: 24px; }
.animation-icon.pause { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zm8 0h4v16h-4z'/%3E%3C/svg%3E"); }
.animation-icon.restart { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3V0L7 5l5 5V6a7 7 0 1 1-7 7H2A10 10 0 1 0 12 3z'/%3E%3C/svg%3E"); }
.animation-icon.volume { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-5v16l-5-5H3zm12-3a7 7 0 0 1 0 12v-3a4 4 0 0 0 0-6z'/%3E%3C/svg%3E"); }
.animation-icon.muted { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-5v16l-5-5H3zm12-1 3 3 3-3 1 1-3 3 3 3-1 1-3-3-3 3-1-1 3-3-3-3z'/%3E%3C/svg%3E"); }
.animation-icon.fullscreen { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h7v2H5v5H3zm11 0h7v7h-2V5h-5zM3 14h2v5h5v2H3zm16 0h2v7h-7v-2h5z'/%3E%3C/svg%3E"); }
/* Reuse each detail version's video assets; runtime branding and its independent resume button stay hidden. */
.animation-controls .animation-icon:not(.restart) {
    mask: none;
    -webkit-mask: none;
    background: var(--control-image) center / contain no-repeat;
}
.animation-icon.play {
    --control-image: url("../index/images/videoPlayBtn.png");
}
.animation-icon.pause {
    --control-image: url("../index/images/videoPausedBtn.png");
}
.animation-icon.volume {
    --control-image: url("../index/images/volumeBtn.png");
}
.animation-icon.muted {
    --control-image: url("../index/images/volumeMuteBtn.png");
}
.animation-icon.fullscreen {
    --control-image: url("../index/images/fullBtn.png");
}
.animation-player:fullscreen .animation-icon.fullscreen {
    --control-image: url("../index/images/closeFull.png");
}
.animation-player[data-theme="modern"] .animation-icon.play {
    --control-image: url("../index/new/images/svg/icon-ctrl-play.svg");
}
.animation-player[data-theme="modern"] .animation-icon.pause {
    --control-image: url("../index/new/images/svg/icon-ctrl-pause.svg");
}
.animation-player[data-theme="modern"] .animation-icon.volume {
    --control-image: url("../index/new/images/svg/icon-ctrl-vol.svg");
}
.animation-player[data-theme="modern"] .animation-icon.muted {
    --control-image: url("../index/new/images/svg/icon-ctrl-mute.svg");
}
.animation-player[data-theme="modern"] .animation-icon.fullscreen {
    --control-image: url("../index/new/images/svg/icon-ctrl-full.svg");
}
.animation-player[data-theme="modern"]:fullscreen .animation-icon.fullscreen {
    --control-image: url("../index/new/images/svg/icon-ctrl-exit.svg");
}
.animation-player[data-theme="modern"]:fullscreen .animation-icon.play {
    --control-image: url("../index/new/images/svg/icon-ctrl-play-lg.svg");
}
.animation-player[data-theme="modern"]:fullscreen .animation-icon.pause {
    --control-image: url("../index/new/images/svg/icon-ctrl-pause-lg.svg");
}
.animation-player[data-theme="modern"]:fullscreen .animation-icon.volume {
    --control-image: url("../index/new/images/svg/icon-ctrl-vol-lg.svg");
}
.animation-player[data-theme="modern"]:fullscreen .animation-icon.muted {
    --control-image: url("../index/new/images/svg/icon-ctrl-mute-lg.svg");
}
@media (max-width: 560px) {
    .animation-controls {
        padding-right: 5px;
        padding-left: 5px;
    }

    .animation-load-text {
        font-size: 11px;
        margin: 0 3px;
    }

}


/* Match the corresponding video sound popup, including its vertical rail, percentage and open state. */
.animation-volume {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    margin-left: auto;
}
.animation-volume-pop {
    position: absolute;
    left: 50%;
    bottom: calc(2.875 * var(--animation-volume-unit));
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: calc(3.125 * var(--animation-volume-unit));
    height: calc(10.625 * var(--animation-volume-unit));
    padding: calc(0.625 * var(--animation-volume-unit)) 0 calc(0.625 * var(--animation-volume-unit));
    border: calc(0.0625 * var(--animation-volume-unit)) solid rgba(127, 137, 173, 0.2);
    border-radius: calc(0.375 * var(--animation-volume-unit));
    background: rgba(24, 30, 51, 0.8);
    transform: translate(-50%, calc(0.5 * var(--animation-volume-unit))) scale(0.97);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.animation-volume.open .animation-volume-pop {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.animation-volume-percent {
    flex-shrink: 0;
    height: calc(1.25 * var(--animation-volume-unit));
    margin: 0 0 calc(0.625 * var(--animation-volume-unit));
    font-size: calc(0.875 * var(--animation-volume-unit));
    line-height: calc(1.25 * var(--animation-volume-unit));
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.animation-volume-rail {
    position: relative;
    flex: 1;
    width: calc(1.625 * var(--animation-volume-unit));
    max-height: calc(7.5 * var(--animation-volume-unit));
    cursor: pointer;
    touch-action: none;
}
.animation-volume-track,
.animation-volume-fill {
    position: absolute;
    left: 50%;
    width: calc(0.25 * var(--animation-volume-unit));
    border-radius: calc(0.125 * var(--animation-volume-unit));
    transform: translateX(-50%);
}
.animation-volume-track {
    top: 0;
    bottom: 0;
    background: #5b6278;
}
.animation-volume-fill {
    bottom: 0;
    background: #3a8bff;
}
.animation-volume-thumb {
    position: absolute;
    left: 50%;
    width: calc(1 * var(--animation-volume-unit));
    height: calc(1 * var(--animation-volume-unit));
    border-radius: 50%;
    background: #fff;
    box-shadow: calc(-0.125 * var(--animation-volume-unit)) calc(0.125 * var(--animation-volume-unit)) calc(0.5 * var(--animation-volume-unit)) rgba(120, 120, 120, 0.33);
    transform: translate(-50%, 50%);
    pointer-events: none;
}

.animation-volume input {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    writing-mode: vertical-lr;
    direction: rtl;
    cursor: pointer;
    touch-action: none;
}
.animation-volume-rail:has(:focus-visible) {
    outline: 2px solid #3a8bff;
    outline-offset: 3px;
}
.animation-volume:not(.open) input {
    pointer-events: none !important;
}
.animation-player .animation-volume.open input {
    pointer-events: auto;
}
.animation-player[data-theme="modern"] .animation-volume button {
    width: calc(2.5 * var(--animation-volume-unit));
    height: calc(2.5 * var(--animation-volume-unit));
    padding: calc(.625 * var(--animation-volume-unit));
}
.animation-player[data-theme="modern"] .animation-volume .animation-icon {
    width: calc(1.25 * var(--animation-volume-unit));
    height: calc(1.25 * var(--animation-volume-unit));
}
.animation-player[data-theme="modern"]:fullscreen .animation-volume .animation-icon {
    width: calc(1.375 * var(--animation-volume-unit));
    height: calc(1.375 * var(--animation-volume-unit));
}
/* The legacy Video.js popup has a 32 x 120px box, no percentage, and a hover-triggered vertical rail. */
.animation-player[data-theme="legacy"] .animation-volume-pop {
    box-sizing: content-box;
    width: 32px;
    height: 120px;
    bottom: 94%;
    padding: 0;
    border-radius: 6px;
    transition: none;
}
.animation-player[data-theme="legacy"] .animation-volume-percent {
    display: none;
}
.animation-player[data-theme="legacy"] .animation-volume-rail {
    flex: none;
    width: 26px;
    height: 84%;
    max-height: none;
    margin-top: 9px;
}
.animation-player[data-theme="legacy"] .animation-volume-track,
.animation-player[data-theme="legacy"] .animation-volume-fill {
    width: 4px;
    border-radius: 3px;
}
.animation-player[data-theme="legacy"] .animation-volume-track {
    background: rgba(255, 255, 255, .4);
}
.animation-player[data-theme="legacy"] .animation-volume-thumb {
    width: 10px;
    height: 10px;
    box-shadow: none;
}

.animation-player[data-theme="legacy"] .animation-volume button {
    width: 40px;
    height: 40px;
    padding: 10px;
}
.animation-player[data-theme="legacy"] .animation-volume .animation-icon {
    width: 20px;
    height: 20px;
}
.animation-player[data-theme="legacy"]:fullscreen .animation-volume button {
    width: 42px;
    height: 42px;
}
.animation-player[data-theme="legacy"]:fullscreen .animation-volume .animation-icon {
    width: 22px;
    height: 22px;
}