/* One transition model for Apps, Patterns, UI, Scenarios/Flows and Gamification. */
#content {
    position: relative;
    overflow-anchor: none;
    transition: min-height 240ms cubic-bezier(.2, .8, .2, 1);
}

#content.bench-content-runtime-pending {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: none;
    will-change: min-height;
}

#content.bench-content-runtime-entering {
    animation: benchRuntimeContentEnter 220ms cubic-bezier(.2, .8, .2, 1) both !important;
}

/* The legacy Flow layout was authored as a viewport-wide sibling of the main
   content container. The optimized renderer keeps it inside #content so every
   tab uses the same atomic transition. Anchor the portal to the viewport here;
   otherwise the old `calc(100% - 96px)` rule is calculated from the centered
   content container and shifts the complete Flow grid to the right. */
body.benchmark-flows-active #content.benchmark-content--flows #benchmarkFlowsPortal {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 96px) !important;
    max-width: none !important;
    margin: 34px 0 112px !important;
    transform: translateX(-50%) !important;
}

@media (max-width: 1180px) {
    body.benchmark-flows-active #content.benchmark-content--flows #benchmarkFlowsPortal {
        width: calc(100vw - 32px) !important;
        margin-top: 24px !important;
    }
}

@media (max-width: 760px) {
    body.benchmark-flows-active #content.benchmark-content--flows #benchmarkFlowsPortal {
        width: calc(100vw - 28px) !important;
        margin-top: 28px !important;
    }
}

/* Flow's fixed app filter is mounted directly under body. This keeps its
   50%-top anchor relative to the viewport even while #content and the Flow
   portal use transforms for their own transitions and full-bleed geometry. */
body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar {
    position: fixed !important;
    right: var(--bench-smart-anchor-sidebar-right, 16px) !important;
    top: var(--bench-smart-anchor-sidebar-top, 50%) !important;
    z-index: 9998 !important;
    max-height: min(72dvh, 620px) !important;
    overflow: visible !important;
    transform: translate3d(0, -50%, 0) !important;
}

body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-smart-anchor-sidebar__list {
    overscroll-behavior: contain;
}

body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-flow-app-anchor-sidebar__item.is-selected {
    background: #1d1d1f !important;
}

body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-flow-app-anchor-sidebar__item.is-selected img {
    outline: 2px solid #fff;
    outline-offset: -2px;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto;
}

body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar.is-reorder-mode .benchmark-smart-anchor-sidebar__selected .benchmark-flow-app-anchor-sidebar__item {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar.is-dragging-selection .benchmark-smart-anchor-sidebar__selected {
    border-radius: 999px 999px 18px 18px;
    border-bottom-color: rgba(73, 105, 255, .34);
    background: rgba(73, 105, 255, .08);
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar.is-dragging-selection .benchmark-smart-anchor-sidebar__list {
    opacity: .38;
    filter: saturate(.7);
    pointer-events: none;
    transition: opacity 160ms ease, filter 160ms ease;
}

body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-flow-app-anchor-sidebar__item.is-dragging {
    animation: none !important;
    opacity: .22 !important;
    cursor: grabbing !important;
    transform: scale(.86) !important;
    box-shadow: none !important;
}

body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-flow-app-anchor-sidebar__item.is-dragging img {
    animation: none !important;
}

body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-flow-app-anchor-sidebar__item.is-drag-over::before {
    position: absolute;
    left: 4px;
    right: 4px;
    top: -6px;
    z-index: 8;
    height: 3px;
    border-radius: 999px;
    background: #4969ff;
    content: "";
    pointer-events: none;
}

body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-flow-app-anchor-sidebar__item.is-drag-over.is-drag-after::before {
    top: auto;
    bottom: -6px;
}

body.benchmark-flow-sidebar-dragging,
body.benchmark-flow-sidebar-dragging * {
    cursor: grabbing !important;
}

@media (max-width: 1180px) {
    body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar {
        right: 10px !important;
    }
}

/* Disable the old per-card fade/stagger effects. The direct result wrapper is
   the only layer animated by the runtime above. */
#content.benchmark-content--apps > .block.main_page_block,
#content.benchmark-content--smart .resource-group,
#content.benchmark-content--smart .resource-item-card,
#content.benchmark-content--gamification .benchmark-gamification-card {
    opacity: 1;
    animation: none;
    will-change: auto;
}

:root {
    --bench-shimmer-base: #eceef2;
    --bench-shimmer-highlight: rgba(255, 255, 255, .78);
    --bench-shimmer-duration: 1.7s;
}

html[data-bench-theme="dark"],
body.dark-theme {
    --bench-shimmer-base: rgba(255, 255, 255, .075);
    --bench-shimmer-highlight: rgba(255, 255, 255, .15);
}

/* One image-loading treatment for Apps, Smart results, Flows and
   Gamification. Existing legacy shimmer rules are intentionally neutralized
   here because this stylesheet is loaded last. */
#content .bench-shimmer-frame,
#content .benchmark-content-preloader__app-icon,
#content .benchmark-content-preloader__line,
#content .benchmark-content-preloader__phone,
#content .benchmark-gamification-preloader__preview,
#content .benchmark-gamification-preloader__app-icon,
#content .benchmark-gamification-preloader__line {
    position: relative;
    background: var(--bench-shimmer-base) !important;
    background-image: none !important;
    animation: none !important;
}

#content .bench-shimmer-frame::before,
#content .benchmark-content-preloader__app-icon::after,
#content .benchmark-content-preloader__line::after,
#content .benchmark-content-preloader__phone::after,
#content .benchmark-gamification-preloader__preview::after,
#content .benchmark-gamification-preloader__app-icon::after,
#content .benchmark-gamification-preloader__line::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block !important;
    border-radius: inherit;
    background: linear-gradient(
        100deg,
        transparent 18%,
        var(--bench-shimmer-highlight) 48%,
        transparent 78%
    ) !important;
    content: "";
    pointer-events: none;
    transform: translate3d(-145%, 0, 0);
    animation: benchUnifiedShimmer var(--bench-shimmer-duration) cubic-bezier(.45, 0, .55, 1) infinite !important;
    will-change: transform;
}

#content .bench-shimmer-frame::before {
    display: none !important;
}

#content .bench-shimmer-frame.is-bench-shimmer-active:not(.is-bench-shimmer-ready)::before {
    display: block !important;
}

#content img.bench-shimmer-image {
    opacity: 0 !important;
    transition: opacity 460ms cubic-bezier(.2, .8, .2, 1) !important;
}

#content .bench-shimmer-frame.is-bench-shimmer-ready {
    background: transparent !important;
}

#content .bench-shimmer-frame.is-bench-shimmer-ready::before {
    display: none !important;
    animation: none !important;
    will-change: auto;
}

#content .bench-shimmer-frame.is-bench-shimmer-ready img.bench-shimmer-image {
    opacity: 1 !important;
}

@keyframes benchUnifiedShimmer {
    from { transform: translate3d(-145%, 0, 0); }
    to { transform: translate3d(145%, 0, 0); }
}

@keyframes benchRuntimeContentEnter {
    from {
        opacity: 0;
        transform: translate3d(0, 6px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

html.bench-main-booting #content {
    min-height: min(62vh, 720px);
    visibility: hidden;
}

html.bench-main-booting.bench-main-loading #content,
html.bench-main-ready #content {
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    #content,
    #content.bench-content-runtime-entering {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    #content .bench-shimmer-frame::before,
    #content .benchmark-content-preloader__app-icon::after,
    #content .benchmark-content-preloader__line::after,
    #content .benchmark-content-preloader__phone::after,
    #content .benchmark-gamification-preloader__preview::after,
    #content .benchmark-gamification-preloader__app-icon::after,
    #content .benchmark-gamification-preloader__line::after {
        animation: none !important;
        transform: none !important;
        will-change: auto;
    }

    #content img.bench-shimmer-image {
        transition: none !important;
    }

    body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-flow-app-anchor-sidebar__item.is-selected img {
        animation: none !important;
        transform: none !important;
        will-change: auto;
    }
}

/* Smart results responsive grid. The base stylesheet fixes cards at 355px;
   explicitly switch the live smart result wrappers to a real adaptive grid so
   neither Swiper inline sizing nor legacy flex rules can overflow the viewport. */
@media (max-width: 960px) {
    #content.benchmark-content--smart,
    #content.benchmark-content--smart .tag-search-results,
    #content.benchmark-content--smart .resource-group,
    #content.benchmark-content--smart .screenshots-carousel,
    #content.benchmark-content--smart .screenshots-carousel .swiper,
    #content.benchmark-content--smart .resource-items-grid {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #content.benchmark-content--smart {
        overflow-x: clip;
    }

    #content.benchmark-content--smart .screenshots-carousel .swiper-wrapper,
    #content.benchmark-content--smart .resource-items-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    #content.benchmark-content--smart .screenshots-carousel .swiper-slide,
    #content.benchmark-content--smart .resource-items-grid > .resource-item-card,
    #content.benchmark-content--smart .resource-items-grid > .gallery.block,
    #content.benchmark-content--smart .resource-group .gallery.block,
    #content.benchmark-content--smart .tag-search-results .gallery.block {
        grid-column: auto !important;
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-bottom: 20px !important;
        box-sizing: border-box !important;
    }

    #content.benchmark-content--smart .resource-group .img-container,
    #content.benchmark-content--smart .resource-group .block_img,
    #content.benchmark-content--smart .resource-group .shimmer-effect,
    #content.benchmark-content--smart .tag-search-results .img-container,
    #content.benchmark-content--smart .tag-search-results .block_img,
    #content.benchmark-content--smart .tag-search-results .shimmer-effect {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 630px) {
    #content.benchmark-content--smart .screenshots-carousel .swiper-wrapper,
    #content.benchmark-content--smart .resource-items-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    #content.benchmark-content--smart .screenshots-carousel .swiper-slide,
    #content.benchmark-content--smart .resource-items-grid > .resource-item-card,
    #content.benchmark-content--smart .resource-items-grid > .gallery.block,
    #content.benchmark-content--smart .resource-group .gallery.block,
    #content.benchmark-content--smart .tag-search-results .gallery.block {
        padding-bottom: 16px !important;
    }

    /* Encoding-independent north-east/share glyph. */
    .benchmark-smart-selected__share {
        position: relative;
        width: 38px;
        min-width: 38px;
        height: 38px;
        padding: 0;
        font-size: 0;
    }

    .benchmark-smart-selected__share::before,
    .benchmark-smart-selected__share::after {
        position: absolute;
        display: block;
        content: "" !important;
        pointer-events: none;
    }

    .benchmark-smart-selected__share::before {
        left: 50%;
        top: 50%;
        width: 9px;
        height: 9px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: translate3d(-25%, -85%, 0);
    }

    .benchmark-smart-selected__share::after {
        left: 50%;
        top: 50%;
        width: 14px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    }
}

/* Unified persistent smart/Flow anchor sidebar. The fixed capsule never fades
   while #content is being rebuilt; only its items change state and position. */
.benchmark-smart-anchor-sidebar.is-persisting,
.benchmark-smart-anchor-sidebar.is-updating {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.benchmark-smart-anchor-sidebar.is-updating .benchmark-smart-anchor-sidebar__item,
.benchmark-smart-anchor-sidebar .benchmark-smart-anchor-sidebar__item {
    animation: none;
}

.benchmark-smart-anchor-sidebar.is-updating .benchmark-smart-anchor-sidebar__item {
    opacity: .5 !important;
    transform: none;
}

.benchmark-smart-anchor-sidebar.is-updating .benchmark-smart-anchor-sidebar__item.is-selected,
.benchmark-smart-anchor-sidebar.is-updating .benchmark-smart-anchor-sidebar__item.is-active,
.benchmark-smart-anchor-sidebar.is-updating .benchmark-smart-anchor-sidebar__item:hover,
.benchmark-smart-anchor-sidebar.is-updating .benchmark-smart-anchor-sidebar__item:focus-visible {
    opacity: 1 !important;
}

.benchmark-smart-anchor-sidebar__selected > .benchmark-smart-anchor-sidebar__item.is-selected,
body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-smart-anchor-sidebar__selected > .benchmark-flow-app-anchor-sidebar__item.is-selected {
    isolation: isolate;
    overflow: visible;
    background: linear-gradient(145deg, #35353a 0%, #161619 48%, #050506 100%) !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    will-change: auto;
}

.benchmark-smart-anchor-sidebar__selected > .benchmark-smart-anchor-sidebar__item.is-selected::after,
body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-smart-anchor-sidebar__selected > .benchmark-flow-app-anchor-sidebar__item.is-selected::after {
    position: absolute;
    inset: -5px;
    z-index: -1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .44), transparent 34%),
        radial-gradient(circle, rgba(73, 105, 255, .28), rgba(120, 77, 255, .08) 48%, transparent 72%);
    content: "";
    opacity: .38;
    filter: blur(4px);
    pointer-events: none;
    animation: benchSmartSidebarPremiumAura 4.6s cubic-bezier(.45, 0, .2, 1) infinite !important;
}

.benchmark-smart-anchor-sidebar__selected > .benchmark-smart-anchor-sidebar__item.is-selected img,
body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-smart-anchor-sidebar__selected > .benchmark-flow-app-anchor-sidebar__item.is-selected img {
    position: relative;
    z-index: 1;
    outline: 1px solid rgba(255, 255, 255, .92);
    outline-offset: -1px;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto;
}

.benchmark-smart-anchor-sidebar__selected > .benchmark-smart-anchor-sidebar__item.is-selected:nth-child(2n)::after,
body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-smart-anchor-sidebar__selected > .benchmark-flow-app-anchor-sidebar__item.is-selected:nth-child(2n)::after {
    animation-delay: -1.55s !important;
}

.benchmark-smart-anchor-sidebar__selected > .benchmark-smart-anchor-sidebar__item.is-selected:nth-child(3n)::after,
body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-smart-anchor-sidebar__selected > .benchmark-flow-app-anchor-sidebar__item.is-selected:nth-child(3n)::after {
    animation-delay: -3.05s !important;
}

.benchmark-smart-anchor-sidebar.is-reorder-mode .benchmark-smart-anchor-sidebar__selected > .benchmark-smart-anchor-sidebar__item.is-selected {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.benchmark-smart-anchor-sidebar.is-dragging-selection .benchmark-smart-anchor-sidebar__selected {
    border-radius: 999px 999px 20px 20px;
    border-bottom-color: rgba(73, 105, 255, .42) !important;
    background: linear-gradient(180deg, rgba(73, 105, 255, .12), rgba(120, 77, 255, .05));
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.benchmark-smart-anchor-sidebar.is-dragging-selection .benchmark-smart-anchor-sidebar__list {
    opacity: .26;
    filter: grayscale(.3) saturate(.68);
    pointer-events: none;
    transition: opacity 180ms ease, filter 180ms ease;
}

.benchmark-smart-anchor-sidebar .benchmark-smart-anchor-sidebar__item.is-dragging,
body.benchmark-flows-active > .benchmark-flow-app-anchor-sidebar .benchmark-flow-app-anchor-sidebar__item.is-dragging {
    opacity: .2 !important;
    cursor: grabbing !important;
    animation: none !important;
    transform: scale(.82) !important;
    filter: grayscale(.35) !important;
    box-shadow: none !important;
}

.benchmark-smart-anchor-sidebar .benchmark-smart-anchor-sidebar__item.is-dragging::after {
    opacity: 0 !important;
    animation: none !important;
}

.benchmark-smart-anchor-sidebar .benchmark-smart-anchor-sidebar__item.is-drag-over::before {
    position: absolute;
    left: 3px;
    right: 3px;
    top: -7px;
    z-index: 8;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #4969ff, #8c63ff);
    content: "";
    pointer-events: none;
    animation: benchSmartSidebarDropMarker 700ms ease-in-out infinite alternate;
}

.benchmark-smart-anchor-sidebar .benchmark-smart-anchor-sidebar__item.is-drag-over.is-drag-after::before {
    top: auto;
    bottom: -7px;
}

.benchmark-smart-anchor-sidebar__pointer-ghost {
    position: fixed !important;
    z-index: 2147483647 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 3px solid rgba(0, 113, 227, .5) !important;
    border-radius: 50% !important;
    background: transparent !important;
    opacity: 1 !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    pointer-events: none !important;
    cursor: grabbing !important;
    transform: translate3d(-50%, -50%, 0) !important;
    transition: none !important;
    animation: none !important;
    will-change: left, top;
}

.benchmark-smart-anchor-sidebar__pointer-ghost .benchmark-smart-anchor-sidebar__remove {
    display: none !important;
}

body.benchmark-smart-sidebar-dragging,
body.benchmark-smart-sidebar-dragging *,
body.benchmark-flow-sidebar-dragging,
body.benchmark-flow-sidebar-dragging * {
    cursor: grabbing !important;
}

@keyframes benchSmartSidebarPremiumAura {
    0%, 100% { opacity: .26; transform: scale(.9); filter: blur(4px); }
    45% { opacity: .5; transform: scale(1.08); filter: blur(5px); }
    78% { opacity: .38; transform: scale(1.02); filter: blur(4.5px); }
}

@keyframes benchSmartSidebarDropMarker {
    from { opacity: .64; transform: scaleX(.82); }
    to { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .benchmark-smart-anchor-sidebar__selected > .benchmark-smart-anchor-sidebar__item.is-selected,
    .benchmark-smart-anchor-sidebar__selected > .benchmark-smart-anchor-sidebar__item.is-selected::after,
    .benchmark-smart-anchor-sidebar .benchmark-smart-anchor-sidebar__item.is-drag-over::before {
        animation: none !important;
        transform: none !important;
        filter: none !important;
        will-change: auto !important;
    }
}