.bz-video {
    --bz-accent: #29b6e8;
    position: relative;
    display: block;
    min-width: 0;
    width: 100%;
    aspect-ratio: var(--bz-video-ratio, 16 / 9);
    overflow: hidden;
    isolation: isolate;
    background: #030303;
    color: #fff;
    container-type: inline-size;
}
.bz-video[hidden] { display: none !important; }
.bz-video > video { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; background: #030303; }
.bz-video:focus-visible { outline: 2px solid var(--bz-accent); outline-offset: -2px; }
.bz-video__ui { position: absolute; inset: 0; pointer-events: none; font: 500 13px/1.2 Inter, system-ui, sans-serif; }
.bz-video__ui button, .bz-video__ui input, .bz-video__ui select { pointer-events: auto; }
.bz-video__ui button {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 40px; height: 40px; min-height: 40px; margin: 0; padding: 9px;
    border: 0; border-radius: 50%; background: transparent; color: #fff; box-shadow: none; cursor: pointer;
}
.bz-video__ui svg { display: block; width: 22px; height: 22px; flex: none; }
.bz-video__ui button:hover { background: rgb(255 255 255 / 15%); }
.bz-video__ui :is(button, input, select):focus-visible { outline: 2px solid var(--bz-accent); outline-offset: 2px; }
.bz-video__ui .bz-video__center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 64px; height: 64px; padding: 19px; border: 1px solid rgb(255 255 255 / 55%);
    background: rgb(3 3 3 / 65%); backdrop-filter: blur(8px); box-shadow: 0 4px 22px #0005;
}
.bz-video__center svg { width: 28px; height: 28px; }
.bz-video.bz-video--playing .bz-video__center, .bz-video.bz-video--error .bz-video__center { visibility: hidden; }
.bz-video__controls {
    pointer-events: auto;
    position: absolute; right: 0; bottom: 0; left: 0; padding: 30px 12px 7px;
    background: linear-gradient(transparent, rgb(0 0 0 / 82%));
}
.bz-video__controls { opacity: 0; visibility: hidden; transition: opacity 160ms, visibility 160ms; }
.bz-video--controls-visible .bz-video__controls { opacity: 1; visibility: visible; }
.bz-video__toolbar { display: flex; align-items: center; gap: 1px; min-width: 0; }
.bz-video__spacer { flex: 1; }
.bz-video__time { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 5px; text-shadow: 0 1px 3px #000; }
.bz-video__ui input[type=range] {
    appearance: none; -webkit-appearance: none; display: block; height: 20px; min-height: 20px;
    margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; accent-color: var(--bz-accent); cursor: pointer; box-shadow: none;
}
.bz-video__ui .bz-video__seek { width: 100%; }
.bz-video__ui .bz-video__volume { width: 54px; margin-right: 7px; }
.bz-video__ui input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--bz-accent) var(--bz-progress, 100%), rgb(255 255 255 / 38%) var(--bz-progress, 100%)); }
.bz-video__ui input[type=range]::-moz-range-track { height: 3px; border-radius: 3px; background: rgb(255 255 255 / 38%); }
.bz-video__ui input[type=range]::-moz-range-progress { height: 3px; background: var(--bz-accent); }
.bz-video__ui input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #0002; }
.bz-video__ui input[type=range]::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff; }
.bz-video__ui input:disabled { opacity: .45; cursor: default; }
.bz-video__ui .bz-video__speed { appearance: none; width: 42px; min-height: 40px; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; text-align: center; font: inherit; cursor: pointer; }
.bz-video__speed option { background: #111; color: #fff; }
.bz-video__spinner { display: none; position: absolute; left: calc(50% - 18px); top: calc(50% - 18px); width: 36px; height: 36px; border: 2px solid #ffffff40; border-top-color: var(--bz-accent); border-radius: 50%; animation: bz-video-spin .8s linear infinite; }
.bz-video--loading .bz-video__spinner { display: block; }
.bz-video__error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 24px 24px 85px; text-align: center; background: #030303cc; }
.bz-video__error[hidden] { display: none; }
.bz-video__error button { width: auto; padding: 0 18px; border: 1px solid #ffffff60; border-radius: 24px; font: inherit; }
.bz-video:fullscreen, .bz-video.bz-video--expanded { width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; aspect-ratio: auto; border-radius: 0; }
.bz-video.bz-video--expanded { position: fixed; inset: 0; z-index: 2147483640; }
.bz-video:fullscreen > video, .bz-video.bz-video--expanded > video { width: 100%; height: 100% !important; max-height: none !important; object-fit: contain; }
.bz-video:fullscreen .bz-video__controls, .bz-video--expanded .bz-video__controls { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
@keyframes bz-video-spin { to { transform: rotate(360deg); } }
@container (max-width: 460px) { .bz-video__ui input.bz-video__volume { display: none; } }
@container (max-width: 360px) {
    .bz-video__controls { padding-inline: 6px; }
    .bz-video__time { font-size: 11px; padding-inline: 2px; }
    .bz-video__ui button { width: 36px; }
    .bz-video__ui .bz-video__center { width: 56px; height: 56px; }
}
@container (max-width: 250px) {
    .bz-video__ui .bz-video__speed { display: none; }
    .bz-video__time { position: absolute; left: 6px; bottom: 67px; }
}
@media (prefers-reduced-motion: reduce) { .bz-video__controls { transition: none; } .bz-video__spinner { animation-duration: 1.8s; } }