.hiid-widget,
.hiid-widget * {
    box-sizing: border-box;
}

.hiid-widget {
    --hiid-main-left: clamp(150px, 21vw, 240px);
    --hiid-main-width: min(58vw, 620px);
    --hiid-charcoal: #2d2d2d;
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: clamp(24px, 4vw, 46px) 0;
    isolation: isolate;
}

.hiid-stage {
    position: relative;
    width: 100%;
    min-height: 1px;
}

.hiid-bg-pattern {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: var(--hiid-pattern-right, calc(50% - 50vw));
    left: calc(var(--hiid-main-left) + min(38vw, 410px));
    height: 58%;
    min-height: 180px;
    transform: translateY(-50%);
    background-color: var(--hiid-charcoal);
    background-image: var(--hiid-pattern-url);
    background-repeat: repeat;
    background-position: left center;
    pointer-events: none;
}

.hiid-main-wrap {
    position: relative;
    z-index: 1;
    width: var(--hiid-main-width);
    max-width: calc(100% - 20px);
    margin-left: var(--hiid-main-left);
}

.hiid-hex {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    overflow: hidden;
    background: var(--hiid-charcoal);
}

.hiid-main-hex {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 0.866 / 1;
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.16);
}

.hiid-main-image,
.hiid-thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    user-select: none;
}

.hiid-main-image {
    transition: opacity 180ms ease, transform 240ms ease;
}

.hiid-thumb-image {
    transition: opacity 180ms ease;
}

.hiid-thumb.hiid-is-swapping-thumb .hiid-thumb-image {
    opacity: 0.2;
}

.hiid-widget.hiid-is-swapping .hiid-main-image {
    opacity: 0.2;
    transform: scale(1.02);
}

.hiid-thumbs {
    --hiid-thumb-size: clamp(68px, 9.2vw, 108px);
    --hiid-thumb-gap: clamp(10px, 1.25vw, 16px);
    --hiid-thumb-height: calc(var(--hiid-thumb-size) / 0.866);
    position: absolute;
    z-index: 3;
    pointer-events: none;
    left: calc((var(--hiid-thumb-size) * -1.70) - (var(--hiid-thumb-gap) * 0.4));
    top: 61%;
    width: calc((var(--hiid-thumb-size) * 2) + var(--hiid-thumb-gap));
    height: calc((var(--hiid-thumb-height) * 1.75) + var(--hiid-thumb-gap));
}

.hiid-thumb {
    --hiid-delay: 0ms;
    position: absolute;
    width: var(--hiid-thumb-size);
    aspect-ratio: 0.866 / 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    animation: hiid-thumb-pulse 4800ms ease-in-out infinite;
    animation-delay: var(--hiid-delay);
    transform-origin: 50% 50%;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.14);
}

.hiid-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #00b4ff;
    opacity: 0;
    pointer-events: none;
    animation: hiid-overlay-pulse 4800ms ease-in-out infinite;
    animation-delay: var(--hiid-delay);
}

.hiid-thumb:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(45, 45, 45, 0.7), 0 14px 24px rgba(0, 0, 0, 0.14);
}

.hiid-thumb-1 {
    --hiid-delay: 0ms;
    left: calc((var(--hiid-thumb-size) + var(--hiid-thumb-gap)) / 2);
    top: 0;
}

.hiid-thumb-2 {
    --hiid-delay: 1200ms;
    left: 0;
    top: calc((var(--hiid-thumb-height) * 0.75) + var(--hiid-thumb-gap));
}

.hiid-thumb-3 {
    --hiid-delay: 2400ms;
    left: calc(var(--hiid-thumb-size) + var(--hiid-thumb-gap));
    top: calc((var(--hiid-thumb-height) * 0.75) + var(--hiid-thumb-gap));
}

.hiid-empty-notice {
    padding: 12px 14px;
    border-left: 4px solid #d63638;
    background: #fff4f4;
    color: #1d2327;
}

.hiid-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@keyframes hiid-thumb-pulse {
    0%, 8%, 34%, 100% {
        transform: scale(1);
    }
    16% {
        transform: scale(1.08);
    }
}

@keyframes hiid-overlay-pulse {
    0%, 8%, 34%, 100% {
        opacity: 0;
    }
    16% {
        opacity: 0.48;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hiid-thumb,
    .hiid-thumb::after,
    .hiid-main-image,
    .hiid-thumb-image {
        animation: none;
        transition: none;
    }
}

@media (max-width: 760px) {
    .hiid-widget {
        --hiid-main-left: 0px;
        --hiid-main-width: min(84vw, 430px);
        padding: 28px 0;
    }

    .hiid-bg-pattern {
        left: 45%;
        right: var(--hiid-pattern-right, calc(50% - 50vw));
        top: 40%;
        height: 44%;
        min-height: 140px;
    }

    .hiid-main-wrap {
        margin-right: auto;
        margin-left: auto;
    }

    .hiid-thumbs {
        --hiid-thumb-size: clamp(62px, 22vw, 90px);
        position: relative;
        inset: auto;
        left: auto;
        top: auto;
        display: flex;
        justify-content: center;
        gap: 14px;
        width: auto;
        height: auto;
        margin-top: 16px;
    }

    .hiid-thumb {
        position: relative;
        top: auto;
        left: auto;
        width: var(--hiid-thumb-size);
        flex: 0 0 auto;
    }
}