#bupn-root {
    --bupn-width: 260px;
    --bupn-x: 16px;
    --bupn-y: 72px;
    --bupn-safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --bupn-safe-y: max(env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px));
    position: fixed;
    z-index: 99990;
    width: min(var(--bupn-width), calc(100vw - var(--bupn-x) - var(--bupn-x) - var(--bupn-safe-x) - var(--bupn-safe-x) - 8px));
    max-height: calc(100dvh - var(--bupn-y) - var(--bupn-y) - var(--bupn-safe-y) - var(--bupn-safe-y) - 8px);
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: #15131c;
    color: #fff;
    box-shadow: 0 6px 28px #0004;
    font: 14px/1.4 system-ui, -apple-system, sans-serif;
    isolation: isolate;
    text-align: center;
}
#bupn-root, #bupn-root * { box-sizing: border-box; }
#bupn-root[hidden], #bupn-root [hidden] { display: none !important; }
#bupn-root[data-position$="left"] { left: calc(var(--bupn-x) + var(--bupn-safe-x)); right: auto; }
#bupn-root[data-position$="right"] { right: calc(var(--bupn-x) + var(--bupn-safe-x)); left: auto; }
#bupn-root[data-position^="bottom"] { bottom: calc(var(--bupn-y) + var(--bupn-safe-y)); top: auto; }
#bupn-root[data-position^="top"] { top: calc(var(--bupn-y) + var(--bupn-safe-y)); bottom: auto; }
#bupn-root .bupn-stage { overflow: hidden; border-radius: 12px; }
#bupn-root .bupn-link { display: block; margin: 0; padding: 0; border: 0; text-decoration: none; }
#bupn-root .bupn-media {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - var(--bupn-y) - var(--bupn-y) - var(--bupn-safe-y) - var(--bupn-safe-y) - 52px);
    max-height: calc(100dvh - var(--bupn-y) - var(--bupn-y) - var(--bupn-safe-y) - var(--bupn-safe-y) - 52px);
    object-fit: contain;
    margin: 0;
    border: 0;
}
#bupn-root button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0;
    border: 1px solid #ffffff60;
    border-radius: 50%;
    background: #181420eb;
    color: #fff;
    box-shadow: 0 2px 8px #0003;
    font: 22px/1 system-ui, sans-serif;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transform: none;
}
#bupn-root button:hover { background: #783bd0; color: #fff; }
#bupn-root button:focus-visible, #bupn-root a:focus-visible { outline: 3px solid #d2b5ff; outline-offset: -3px; }
#bupn-root .bupn-close { position: absolute; top: 5px; right: 5px; z-index: 3; }
#bupn-root .bupn-mute { position: absolute; top: 5px; left: 5px; z-index: 2; font-size: 19px; }
#bupn-root .bupn-mute[data-muted="true"]::after { content: ''; position: absolute; width: 23px; height: 2px; background: #fff; transform: rotate(-45deg); }
#bupn-root .bupn-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; z-index: 2; font-size: 18px; }
#bupn-root .bupn-controls { display: flex; align-items: center; justify-content: center; gap: 5px; height: 44px; padding: 5px; }
#bupn-root .bupn-controls button { width: 28px; min-width: 28px; height: 28px; min-height: 28px; border: 0; box-shadow: none; }
#bupn-root .bupn-pause { font-size: 13px; }
#bupn-root .bupn-counter { font-size: 11px; min-width: 33px; font-variant-numeric: tabular-nums; }
@media print { #bupn-root { display: none !important; } }