.sh-typed {
    display: grid;
}

.sh-typed::before {
    content: attr(data-hero-longest);
    visibility: hidden;
    pointer-events: none;
    grid-area: 1 / 1;
}

.sh-title-line {
    grid-area: 1 / 1;
}

.sh-hero .sh-shell {
    width: 100% !important;
    margin-left: 0 !important;
}

.sh-hero .sh-shell > [hidden] {
    display: none !important;
}

.sh-stage {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 1.06;
}

.sh-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 12px, 0) scale(.985);
    transition: opacity .65s ease, transform .85s cubic-bezier(.22, 1, .36, 1), visibility .65s;
    pointer-events: none;
}

.sh-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
}

.sh-stage img {
    display: block;
    max-width: none;
    object-fit: contain;
}

.sh-device {
    position: absolute;
}

.sh-device-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
}

.sh-desktop {
    top: 13%;
    left: -7%;
    width: 116%;
    aspect-ratio: 1000 / 886;
}

/* Keep the original device pixels; only the rectangular display becomes a window. */
.sh-desktop .sh-device-frame {
    clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
        15.1% 5.42%, 15.1% 59.7%, 91.9% 59.7%, 91.9% 5.42%, 15.1% 5.42%);
}

.sh-screen {
    position: absolute;
    overflow: hidden;
    background: #f6f5f1;
}

.sh-desktop .sh-screen {
    top: 5.4%;
    left: 15%;
    width: 77%;
    height: 54.4%;
}

.sh-screen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
}

.sh-screen .sh-reference-dark {
    display: none;
}

.dark .sh-screen {
    background: hsl(var(--smplsColorGray900-hsl));
}

.dark .sh-screen .sh-reference-light {
    display: none;
}

.dark .sh-screen .sh-reference-dark {
    display: block;
}

.sh-mobile {
    top: 17%;
    left: -15%;
    z-index: 3;
    width: 24%;
    aspect-ratio: 540 / 954;
}

.sh-mobile .sh-screen {
    top: 2.1%;
    left: 4.5%;
    width: 72%;
    height: 84.8%;
    border-radius: 12% / 5.9%;
}

.sh-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    position: absolute;
    z-index: 5;
    top: 91%;
    left: 58%;
    width: min(200px, 65%);
    transform: translateX(-50%);
    color: hsl(var(--smplsColorGray500-hsl));
    font-family: inherit;
}

.sh-progress-counter {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    white-space: nowrap;
}

.sh-progress-track {
    display: block;
    flex: 1;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: hsl(var(--smplsColorGray300-hsl));
}

.sh-progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: hsl(var(--smplsColorPrimary-hsl));
    transform: scaleX(var(--sh-progress, 0));
    transform-origin: left;
    transition: transform .12s linear;
}

.dark .sh-progress {
    color: hsl(var(--smplsColorGray300-hsl));
}

.dark .sh-progress-track {
    background: hsl(var(--smplsColorGray700-hsl));
}

.dark .sh-progress-fill {
    background: hsl(var(--smplsColorGray300-hsl));
}

.sh-decoration {
    position: absolute;
    z-index: 4;
    top: 55%;
    left: -11%;
    width: 32%;
    height: auto;
    filter: drop-shadow(0 14px 10px #0002);
    transform: rotate(-12deg);
}

.sh-slide-gastro .sh-decoration {
    top: 54%;
    left: -8%;
    width: 30%;
    transform: rotate(12deg);
}

@media (max-width: 991px) {
    .sh-stage {
        max-width: 650px;
        margin: 0 auto;
        aspect-ratio: 1.35;
    }

    .sh-mobile {
        left: -4%;
        top: 13%;
        width: 22%;
    }

    .sh-desktop {
        top: 8%;
        left: -7%;
        width: 110%;
    }

    .sh-progress {
        position: relative;
        top: auto;
        left: auto;
        margin: 24px auto 0;
        transform: none;
    }

    .sh-decoration,
    .sh-slide-gastro .sh-decoration {
        top: 64%;
        left: -3%;
        width: 30%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-slide,
    .sh-slide.is-active {
        transition: none;
        transform: none;
    }

    .sh-progress-fill {
        transition: none;
        transform: scaleX(1) !important;
    }
}