.uoph-digital-twins {
    --uoph-digital-twins-ink: #191816;
    --uoph-digital-twins-white: #fff;
    --uoph-digital-twins-dark: #090909;
    --uoph-digital-twins-closed-height: clamp(36.25rem, 52.94vw, 56.25rem);
    --uoph-digital-twins-sphere-size: clamp(25.5rem, 37.5vw, 39rem);
    --uoph-digital-twins-sphere-radius: clamp(12.75rem, 18.75vw, 19.5rem);
    --uoph-digital-twins-wave-clearance: clamp(6.375rem, 9.375vw, 9.75rem);
    --uoph-digital-twins-sphere-envelope-size: calc(var(--uoph-digital-twins-sphere-size) + var(--uoph-digital-twins-wave-clearance) + var(--uoph-digital-twins-wave-clearance));
    --uoph-digital-twins-legacy-wave-clearance: clamp(4.25rem, 6.25vw, 6.5rem);
    position: relative;
    inline-size: 100vw;
    max-inline-size: none;
    min-block-size: calc(var(--uoph-digital-twins-closed-height) + var(--uoph-digital-twins-legacy-wave-clearance) + var(--uoph-digital-twins-legacy-wave-clearance));
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
    color: var(--uoph-digital-twins-white);
    background: #cffda1;
    box-sizing: border-box;
}

.uoph-digital-twins + .uoph-collections {
    padding-block-start: clamp(2rem, 5vw, 3.5rem);
}

.uoph-digital-twins *,
.uoph-digital-twins *::before,
.uoph-digital-twins *::after {
    box-sizing: border-box;
}

.uoph-editorial-content.uoph-digital-twins__expanded > .uoph-digital-twins__toolbar {
    background: transparent;
    background-image: none;
    pointer-events: none;
}

.uoph-editorial-content.uoph-digital-twins__expanded > .uoph-digital-twins__toolbar > .uoph-digital-twins__close {
    pointer-events: auto;
}

html body .uoph-editorial-content button.uoph-digital-twins__certificate-link,
html body .uoph-editorial-content button.uoph-digital-twins__certificate-link:hover,
html body .uoph-editorial-content button.uoph-digital-twins__certificate-link:focus,
html body .uoph-editorial-content button.uoph-digital-twins__certificate-link:active {
    margin-block-start: clamp(1.75rem, 3vw, 2.875rem);
    border: 0 !important;
    color: #fff !important;
    background: rgb(255 255 255 / 20%) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html body .uoph-editorial-content button.uoph-digital-twins__certificate-link:hover,
html body .uoph-editorial-content button.uoph-digital-twins__certificate-link:focus {
    background: rgb(255 255 255 / 28%) !important;
}

html body .uoph-editorial-content button.uoph-digital-twins__certificate-link:active {
    background: rgb(255 255 255 / 34%) !important;
}

html body .uoph-editorial-content button.uoph-digital-twins__certificate-link:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 4px;
}

html body .uoph-digital-twins__copy > [data-uoph-owner-access-overlay-open] {
    margin-block-start: clamp(1.25rem, 2vw, 2rem);
}

html body .uoph-digital-twins__copy > button[data-uoph-owner-access-overlay-open],
html body .uoph-digital-twins__copy > button[data-uoph-owner-access-overlay-open]:hover,
html body .uoph-digital-twins__copy > button[data-uoph-owner-access-overlay-open]:focus,
html body .uoph-digital-twins__copy > button[data-uoph-owner-access-overlay-open]:focus-visible,
html body .uoph-digital-twins__copy > button[data-uoph-owner-access-overlay-open]:active {
    font-family: "UOPH Gilroy", "UOPH Gilroy Fallback", Arial, Helvetica, sans-serif !important;
    font-size: 0.84375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

html body .uoph-digital-twins__copy > button.uoph-digital-twins__owner-access-action,
html body .uoph-digital-twins__copy > button.uoph-digital-twins__owner-access-action:active {
    padding: calc(1rem + 1px) calc(0.875rem + 1px) !important;
    border: 0 !important;
    color: #191816 !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html body .uoph-digital-twins__copy > button.uoph-digital-twins__owner-access-action:hover,
html body .uoph-digital-twins__copy > button.uoph-digital-twins__owner-access-action:focus,
html body .uoph-digital-twins__copy > button.uoph-digital-twins__owner-access-action:focus-visible {
    border: 0 !important;
    color: #191816 !important;
    background: #f2f2f2 !important;
    background-color: #f2f2f2 !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html body .uoph-digital-twins__copy > button.uoph-digital-twins__owner-access-action:focus-visible {
    outline: 3px solid #191816 !important;
    outline-offset: 3px !important;
}

.uoph-digital-twins__owner-access-overlay {
    position: fixed;
    inset: 0;
    z-index: 100202;
    display: grid;
    place-items: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overflow-y: auto;
    background: rgb(25 24 22 / 72%);
    opacity: 0;
    transition: opacity 240ms ease;
    box-sizing: border-box;
}

.uoph-digital-twins__owner-access-overlay[hidden] {
    display: none;
}

.uoph-digital-twins__owner-access-overlay.is-open {
    opacity: 1;
}

.uoph-digital-twins__owner-access-window.uoph-owner-access {
    position: relative;
    width: calc(100vw - 2rem);
    inline-size: calc(100vw - 2rem);
    max-width: 45rem;
    max-inline-size: 45rem;
    max-block-size: calc(100dvh - 2rem);
    padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
    overflow-y: auto;
    border-radius: clamp(1.5rem, 3vw, 3rem);
    box-sizing: border-box;
}

.uoph-digital-twins__owner-access-window .uoph-owner-access__copy {
    margin-block-end: clamp(2rem, 4vw, 3.5rem);
}

.uoph-digital-twins__owner-access-window .uoph-owner-access__title {
    font-size: clamp(2.75rem, 6.5vw, 5.5rem);
}

html body button.uoph-digital-twins__owner-access-close,
html body button.uoph-digital-twins__owner-access-close:hover,
html body button.uoph-digital-twins__owner-access-close:focus,
html body button.uoph-digital-twins__owner-access-close:focus-visible,
html body button.uoph-digital-twins__owner-access-close:active {
    position: absolute;
    inset-block-start: max(1rem, env(safe-area-inset-top));
    inset-inline-end: max(1rem, env(safe-area-inset-right));
    z-index: 2;
    color: #191816 !important;
}

.uoph-digital-twins__certificate-overlay {
    position: fixed;
    inset: 0;
    z-index: 100002;
    padding: 0;
    background: transparent;
    opacity: 0;
    transition: opacity 240ms ease;
}

.uoph-digital-twins__certificate-overlay[hidden] {
    display: none;
}

.uoph-digital-twins__certificate-overlay.is-open {
    opacity: 1;
}

.uoph-digital-twins__certificate-scroll {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

html body button.uoph-digital-twins__certificate-close,
html body button.uoph-digital-twins__certificate-close:hover,
html body button.uoph-digital-twins__certificate-close:focus,
html body button.uoph-digital-twins__certificate-close:focus-visible,
html body button.uoph-digital-twins__certificate-close:active {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    z-index: 2;
    color: #000 !important;
    border-color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.uoph-digital-twins__certificate-frame {
    display: block;
    inline-size: 100%;
    height: 100%;
    max-block-size: none;
    pointer-events: none;
    border: 0;
    border-radius: 0;
    background: #f4f2ed;
}

.uoph-digital-twins__visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    inline-size: 100%;
    overflow: hidden;
    background: #cffda1;
}

.uoph-digital-twins__spheres {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: var(--uoph-digital-twins-sphere-size);
    block-size: var(--uoph-digital-twins-sphere-size);
    transform: translate(-50%, -50%);
    isolation: isolate;
}

.uoph-digital-twins__sphere {
    position: absolute;
    inset-inline-start: 0;
    display: block;
    inline-size: var(--uoph-digital-twins-sphere-size);
    block-size: var(--uoph-digital-twins-sphere-size);
    border-radius: 50%;
    opacity: 0;
    mix-blend-mode: multiply;
    will-change: transform, opacity;
}

.uoph-digital-twins__sphere--magenta {
    inset: 0;
    background: #fff;
    mix-blend-mode: normal;
    transform: translateY(34%) scale(0.82);
}

/* Pin every interactive state to the same render values: Safari/iOS must not retain a first tap only to repaint the sphere. */
html body .uoph-digital-twins button.uoph-digital-twins__sphere--magenta,
html body .uoph-digital-twins button.uoph-digital-twins__sphere--magenta:hover,
html body .uoph-digital-twins button.uoph-digital-twins__sphere--magenta:focus,
html body .uoph-digital-twins button.uoph-digital-twins__sphere--magenta:focus-visible,
html body .uoph-digital-twins button.uoph-digital-twins__sphere--magenta:active {
    --uoph-sonar-size: var(--uoph-digital-twins-sphere-size);
    --uoph-sonar-color: 255 255 255;
    --uoph-sonar-contrast-color: 255 255 255;
    width: var(--uoph-digital-twins-sphere-size) !important;
    inline-size: var(--uoph-digital-twins-sphere-size) !important;
    height: var(--uoph-digital-twins-sphere-size) !important;
    block-size: var(--uoph-digital-twins-sphere-size) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #191816 !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none !important;
    cursor: pointer;
    appearance: none;
}

html body .uoph-digital-twins button.uoph-digital-twins__sphere--magenta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
}

.uoph-digital-twins .uoph-sonar-pulse__wave {
    border-color: #fff;
    filter: drop-shadow(
        0 0 var(--uoph-sonar-unit)
        rgb(255 255 255 / 55%)
    );
}

.uoph-digital-twins__explore-position {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.uoph-digital-twins__explore-pill {
    display: block;
    padding: 0;
    color: var(--uoph-digital-twins-ink);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: "UOPH Gilroy", "UOPH Gilroy Fallback", Arial, Helvetica, sans-serif;
    font-size: clamp(1.12125rem, 1.587vw, 1.38rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: none;
    pointer-events: none;
    --uoph-digital-twins-explore-motion: uoph-digital-twins-explore-heartbeat 2.4s ease-in-out 1s infinite;
    animation: var(--uoph-digital-twins-explore-motion);
    animation-play-state: paused;
}

.uoph-digital-twins .uoph-sonar-pulse__heartbeat {
    border-color: #fff;
    box-shadow: 0 0 0 var(--uoph-sonar-unit)
        rgb(255 255 255 / 30%);
}

.uoph-digital-twins .uoph-sonar-pulse__heartbeat {
    animation: uoph-digital-twins-explore-heartbeat 2.4s ease-in-out 1s infinite;
    animation-play-state: paused;
}

.uoph-digital-twins.is-spheres-active .uoph-sonar-pulse__wave,
.uoph-digital-twins.is-spheres-active .uoph-sonar-pulse__heartbeat,
.uoph-digital-twins.is-spheres-active .uoph-digital-twins__explore-pill {
    animation-play-state: running;
}

.uoph-digital-twins.is-spheres-active .uoph-digital-twins__sphere--magenta {
    animation: uoph-digital-twins-magenta-bounce 920ms both;
}

@keyframes uoph-digital-twins-magenta-bounce {
    0% { opacity: 0; transform: translateY(34%) scale(0.82); }
    28% { opacity: 1; }
    58% { opacity: 1; transform: translateY(-7%) scale(1.035); }
    76% { opacity: 1; transform: translateY(3%) scale(0.985); }
    88% { opacity: 1; transform: translateY(-1.2%) scale(1.006); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes uoph-digital-twins-explore-heartbeat {
    0%, 45%, 100% { transform: scale(1); }
    20% { transform: scale(1.06); }
}

.uoph-digital-twins__copy {
    position: absolute;
    inset-block-start: clamp(4rem, 8vw, 8.25rem);
    inset-inline-start: max(1.5rem, 6.25vw);
    z-index: 2;
    max-inline-size: min(38.75rem, 46vw);
}

.uoph-digital-twins__copy h2 {
    margin: 0;
    font-family: "UOPH Gilroy", "UOPH Gilroy Fallback", Arial, Helvetica, sans-serif;
    font-weight: 800;
    letter-spacing: -0.055em;
}

.uoph-digital-twins__copy h2 {
    color: var(--uoph-digital-twins-ink);
    font-size: clamp(3.453125rem, 8.84vw, 7.96875rem);
    line-height: 0.9;
}

.uoph-digital-twins__copy p {
    font-family: "UOPH Gilroy", "UOPH Gilroy Fallback", Arial, Helvetica, sans-serif;
    font-weight: 400;
}

.uoph-digital-twins__copy p {
    margin: clamp(1rem, 1.6vw, 1.625rem) 0 0;
    color: var(--uoph-digital-twins-ink);
    font-size: clamp(1.5625rem, 2.425vw, 2.34375rem);
    line-height: 1.2;
}

.uoph-digital-twins__certificate-media {
    inline-size: clamp(5.75rem, 9.2vw, 8.05rem);
    margin: clamp(1rem, 1.6vw, 1.5rem) 0 0;
}

.uoph-digital-twins__certificate-image {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

html body .uoph-digital-twins button.uoph-digital-twins__sphere--magenta:focus-visible {
    outline: 3px solid #191816 !important;
    outline-offset: 4px !important;
    box-shadow: none !important;
}

@media (max-width: 63.9375rem) {
    .uoph-digital-twins {
        --uoph-digital-twins-closed-height: clamp(37.5rem, 68vw, 47.5rem);
        --uoph-digital-twins-sphere-size: clamp(22.5rem, 46.5vw, 30rem);
        --uoph-digital-twins-sphere-radius: clamp(11.25rem, 23.25vw, 15rem);
        --uoph-digital-twins-wave-clearance: clamp(5.625rem, 11.625vw, 7.5rem);
        --uoph-digital-twins-legacy-wave-clearance: clamp(3.75rem, 7.75vw, 5rem);
    }
    .uoph-digital-twins__copy {
        inset-block-start: clamp(3.625rem, 8vw, 5.375rem);
        max-inline-size: 62vw;
    }
}

@media (max-width: 47.99rem) {
    .uoph-digital-twins {
        --uoph-digital-twins-closed-height: clamp(38.75rem, 148vw, 47.5rem);
        --uoph-digital-twins-sphere-size: clamp(18rem, 75vw, 25.5rem);
        --uoph-digital-twins-sphere-radius: clamp(9rem, 37.5vw, 12.75rem);
        --uoph-digital-twins-wave-clearance: clamp(4.5rem, 18.75vw, 6.375rem);
        min-block-size: 0;
        touch-action: pan-y;
    }
    .uoph-digital-twins__visual {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        inline-size: 100%;
        min-block-size: 0;
        padding: 3.375rem max(1.375rem, 6vw);
        overflow: hidden;
        touch-action: pan-y;
    }
    .uoph-digital-twins__copy {
        display: contents;
    }
    .uoph-digital-twins__copy h2 {
        position: relative;
        z-index: 2;
        grid-row: 1;
        justify-self: center;
        inline-size: 100%;
        max-inline-size: 10ch;
        font-size: clamp(3.1875rem, 15.9375vw, 5.3125rem);
        line-height: 0.92;
        text-align: center;
    }
    .uoph-digital-twins__copy p {
        position: relative;
        z-index: 2;
        grid-row: 2;
        justify-self: center;
        inline-size: 100%;
        max-inline-size: 19ch;
        margin-block-start: 0.875rem;
        font-size: clamp(1.5625rem, 2.425vw, 2.34375rem);
        text-align: center;
    }
    .uoph-digital-twins__certificate-media {
        position: relative;
        z-index: 2;
        grid-row: 3;
        justify-self: center;
    }
    .uoph-digital-twins__spheres {
        position: relative;
        inset: auto;
        z-index: 1;
        grid-row: 4;
        justify-self: center;
        margin-block-start: calc(var(--uoph-digital-twins-wave-clearance) + 1rem);
        margin-block-end: var(--uoph-digital-twins-wave-clearance);
        transform: none;
    }
    html body .uoph-digital-twins__copy > [data-uoph-owner-access-overlay-open] {
        position: relative;
        z-index: 2;
        grid-row: 5;
        justify-self: center;
    }
}

@media (min-width: 48rem) and (hover: hover) and (pointer: fine) {
    .uoph-digital-twins__copy h2 {
        font-size: clamp(3.453125rem, 8.2875vw, 7.96875rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .uoph-digital-twins,
    .uoph-digital-twins__open,
    .uoph-digital-twins__close {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
    .uoph-digital-twins__owner-access-overlay {
        transition: none !important;
    }
    .uoph-digital-twins__sphere {
        opacity: 1 !important;
        animation: none !important;
        transform: translateY(0) scale(1) !important;
    }
    .uoph-digital-twins__explore-pill {
        animation: none !important;
        transform: none !important;
    }
}