:root {
    --mr-umbrel-card-w: 280px;
    --mr-umbrel-card-h: 355px;
    --mr-umbrel-gap: 12px;
    --mr-umbrel-radius: 20px;
    --mr-umbrel-perspective: 200px;
}

.mr-umbrel-carousel-wrap {
    display: none;
}

@media (min-width: 861px) {
    .mr-umbrel-carousel,
    .mr-umbrel-carousel * {
        box-sizing: border-box;
    }

    body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell > .mr-umbrel-carousel-wrap {
        position: relative;
        z-index: 2;
        display: block;
        width: min(736px, calc(100% - 24px));
        height: var(--mr-umbrel-card-h);
        margin: 18px auto 20px 0;
        background: transparent;
    }

    body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell > .mr-umbrel-carousel-wrap:not([data-mr-umbrel-positioned="true"]) {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell > .mr-umbrel-carousel-wrap[data-mr-umbrel-positioned="true"] {
        opacity: 1;
        visibility: visible;
        transition: opacity 180ms ease;
    }

    .mr-umbrel-carousel {
        position: relative;
        width: 100%;
        height: var(--mr-umbrel-card-h);
        overflow: hidden;
        perspective: var(--mr-umbrel-perspective);
        perspective-origin: 50% 50%;
        user-select: none;
        cursor: grab;
        touch-action: pan-y;
        direction: ltr;
        background: transparent;
    }

    .mr-umbrel-carousel.is-dragging {
        cursor: grabbing;
    }

    .mr-umbrel-track {
        position: absolute;
        inset: 0 auto 0 0;
        display: flex;
        align-items: stretch;
        gap: var(--mr-umbrel-gap);
        margin: 0;
        padding: 0;
        list-style: none;
        transform-style: preserve-3d;
        will-change: transform;
        direction: ltr;
        background: transparent;
    }

    .mr-umbrel-slide {
        position: relative;
        flex: 0 0 var(--mr-umbrel-card-w);
        width: var(--mr-umbrel-card-w);
        height: var(--mr-umbrel-card-h);
        transform-style: preserve-3d;
        backface-visibility: hidden;
        will-change: transform, transform-origin;
    }

    .mr-umbrel-card {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: var(--mr-umbrel-radius);
        background: #151518;
        box-shadow: 0 16px 38px rgba(0, 0, 0, .4);
        color: #fff;
        text-decoration: none;
        outline: none;
    }

    .mr-umbrel-card.is-static { cursor: default; }

    .mr-umbrel-card-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform .42s ease, filter .42s ease;
    }

    .mr-umbrel-card::after {
        content: "";
        position: absolute;
        inset: 42% 0 0;
        pointer-events: none;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .68));
        opacity: .42;
        transition: opacity .32s ease;
    }

    .mr-umbrel-card-text {
        position: absolute;
        z-index: 2;
        right: 18px;
        bottom: 18px;
        left: 18px;
        display: block;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.45;
        text-align: center;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .98), 0 0 22px rgba(0, 0, 0, .9);
        opacity: 0;
        transform: translateY(18px) scale(.96);
        transition: opacity .3s ease, transform .3s ease;
    }

    .mr-umbrel-slide.is-active .mr-umbrel-card-text,
    .mr-umbrel-card:hover .mr-umbrel-card-text,
    .mr-umbrel-card:focus-visible .mr-umbrel-card-text {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .mr-umbrel-slide.is-active .mr-umbrel-card-image,
    .mr-umbrel-card:hover .mr-umbrel-card-image,
    .mr-umbrel-card:focus-visible .mr-umbrel-card-image {
        transform: scale(1.035);
        filter: contrast(1.04) saturate(1.04);
    }

    .mr-umbrel-slide.is-active .mr-umbrel-card::after,
    .mr-umbrel-card:hover::after,
    .mr-umbrel-card:focus-visible::after { opacity: .9; }

    .mr-umbrel-slide:nth-child(7n + 1) .mr-umbrel-card--placeholder { background: linear-gradient(155deg, #008ca2 0%, #00627c 43%, #07111c 100%); }
    .mr-umbrel-slide:nth-child(7n + 2) .mr-umbrel-card--placeholder { background: linear-gradient(155deg, #c7a400 0%, #8b7200 47%, #151204 100%); }
    .mr-umbrel-slide:nth-child(7n + 3) .mr-umbrel-card--placeholder { background: linear-gradient(155deg, #b00028 0%, #60002e 48%, #151032 100%); }
    .mr-umbrel-slide:nth-child(7n + 4) .mr-umbrel-card--placeholder { background: linear-gradient(155deg, #ff8200 0%, #e16a12 45%, #5d3029 100%); }
    .mr-umbrel-slide:nth-child(7n + 5) .mr-umbrel-card--placeholder { background: linear-gradient(155deg, #9e1d1d 0%, #671316 50%, #17090b 100%); }
    .mr-umbrel-slide:nth-child(7n + 6) .mr-umbrel-card--placeholder { background: linear-gradient(155deg, #d6b000 0%, #8d7500 47%, #201a05 100%); }
    .mr-umbrel-slide:nth-child(7n) .mr-umbrel-card--placeholder { background: linear-gradient(155deg, #171717 0%, #111 55%, #050505 100%); }

    .mr-umbrel-edge {
        position: absolute;
        z-index: 20;
        top: -8%;
        bottom: -8%;
        width: 0;
        pointer-events: none;
        background: transparent;
        filter: blur(18px);
    }

    .mr-umbrel-edge.is-left {
        left: -2px;
        box-shadow: 30px 0 46px 34px rgba(0, 0, 0, .96);
    }

    .mr-umbrel-edge.is-right {
        right: -2px;
        box-shadow: -30px 0 46px 34px rgba(0, 0, 0, .96);
    }

    .mr-umbrel-nav {
        position: absolute;
        z-index: 30;
        top: 50%;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, .28);
        color: rgba(255, 255, 255, .65);
        font: 24px/1 Arial, sans-serif;
        cursor: pointer;
        backdrop-filter: blur(8px);
    }

    .mr-umbrel-nav.is-prev { left: 10px; }
    .mr-umbrel-nav.is-next { right: 10px; }
}

@media (min-width: 1180px) {
    body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell > .mr-umbrel-carousel-wrap {
        position: absolute;
        z-index: 240001;
        top: var(--mr-umbrel-menu-anchor-top, 120px);
        right: auto;
        left: 0;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
    }

    html body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell > .mr-home-clean-main {
        margin-top: -94.8359375px !important;
    }
}

@media (min-width: 1400px) {
    body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell > .mr-umbrel-carousel-wrap::before,
    body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell > .mr-umbrel-carousel-wrap::after {
        content: "";
        position: absolute;
        z-index: 25;
        top: -26px;
        bottom: -26px;
        width: 92px;
        pointer-events: none;
        filter: blur(20px);
    }

    body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell > .mr-umbrel-carousel-wrap::before {
        left: -42px;
        background: linear-gradient(90deg, rgba(0, 0, 0, .98) 12%, rgba(0, 0, 0, .88) 44%, rgba(0, 0, 0, .42) 72%, transparent 100%);
        box-shadow: 26px 0 52px rgba(0, 0, 0, .78);
    }

    body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell > .mr-umbrel-carousel-wrap::after {
        right: -42px;
        background: linear-gradient(270deg, rgba(0, 0, 0, .98) 12%, rgba(0, 0, 0, .88) 44%, rgba(0, 0, 0, .42) 72%, transparent 100%);
        box-shadow: -26px 0 52px rgba(0, 0, 0, .78);
    }
}

@media (min-width: 901px) and (max-width: 1179px) {
    body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell > .mr-umbrel-carousel-wrap {
        width: min(736px, calc(100% - var(--mr-global-content-left, 238px) - var(--mr-global-right-gap, 24px)));
        margin-left: var(--mr-global-content-left, 238px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mr-umbrel-track { scroll-behavior: auto; }
}