.vpgw-wheel {
    --vpgw-card-w: 560px;
    --vpgw-active-y: 210px;
    --vpgw-radius-x: 650px;
    --vpgw-curvature: 62;
    --vpgw-step: 28;
    --vpgw-visible: 5;
    --vpgw-min-scale: .62;
    --vpgw-min-opacity: .30;
    --vpgw-rotation: .22;
    --vpgw-blur: .8;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.vpgw-stage {
    position: relative;
    width: 100%;
    height: 620px;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    perspective: 1400px;
}

.vpgw-stage.is-dragging,
.vpgw-wheel.is-dragging .vpgw-stage {
    cursor: grabbing;
}

.vpgw-orbit {
    position: absolute;
    inset: 0;
}

.vpgw-item {
    --vpgw-x: 0px;
    --vpgw-y: 0px;
    --vpgw-scale: 1;
    --vpgw-rotate: 0deg;
    --vpgw-opacity: 1;
    --vpgw-item-blur: 0px;
    position: absolute;
    left: 50%;
    top: var(--vpgw-active-y);
    width: min(var(--vpgw-card-w), 92%);
    opacity: var(--vpgw-opacity);
    filter: blur(var(--vpgw-item-blur));
    transform:
        translate3d(
            calc(-50% + var(--vpgw-x)),
            calc(-50% + var(--vpgw-y)),
            0
        )
        rotate(var(--vpgw-rotate))
        scale(var(--vpgw-scale));
    transform-origin: center center;
    transition: opacity .18s linear, filter .18s linear;
    will-change: transform, opacity, filter;
    pointer-events: none;
}

.vpgw-item.is-visible {
    pointer-events: auto;
}

.vpgw-media {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 18px;
    background: #fff;
    box-sizing: border-box;
    transform: translateZ(0);
}

.vpgw-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    -webkit-user-drag: none;
    user-select: none;
}

.vpgw-nav {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.vpgw-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #111;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.vpgw-nav-button:hover {
    transform: translateY(-2px);
}

.vpgw-nav-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.vpgw-nav-icon,
.vpgw-nav-icon i,
.vpgw-nav-icon svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vpgw-nav-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.vpgw-empty {
    padding: 22px;
    border: 1px dashed rgba(0,0,0,.22);
    border-radius: 10px;
    background: rgba(0,0,0,.025);
    color: #555;
    font-size: 13px;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .vpgw-item,
    .vpgw-nav-button {
        transition: none !important;
    }
}