#renew-brow-treatment-draft #eye-type-comparison {
    --eye-motion-wine: #651b25;
    --eye-motion-ink: #423936;
    --eye-motion-paper: #f8f6f2;
    --eye-motion-line: #dcd1c8;
    --eye-motion-shade: rgb(31 21 21 / 72%);
    background: var(--eye-motion-paper);
    scroll-margin-top: 92px;
}

#eye-type-comparison .eye-motion-header {
    padding: 18px 18px 4px;
}

#eye-type-comparison .eye-motion-title {
    color: var(--eye-motion-wine);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
}

#eye-type-comparison .eye-motion-guide,
#eye-type-comparison .eye-motion-focus {
    color: var(--eye-motion-ink);
    font-size: 14px;
    line-height: 1.55;
}

#eye-type-comparison .eye-motion-guide {
    margin-top: 4px;
}

#eye-type-comparison .eye-motion-list {
    padding: 0 18px 18px;
}

#eye-type-comparison .eye-motion-row {
    padding-top: 16px;
}

#eye-type-comparison .eye-motion-row + .eye-motion-row {
    border-top: 1px solid var(--eye-motion-line);
    margin-top: 19px;
}

#eye-type-comparison .eye-motion-row-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 7px;
}

#eye-type-comparison .eye-motion-name {
    color: var(--eye-motion-wine);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}

#eye-type-comparison .eye-motion-picture {
    position: relative;
    display: block;
    aspect-ratio: 976 / 536;
    overflow: clip;
    cursor: zoom-in;
}

#eye-type-comparison .eye-motion-picture :is(img, svg) {
    display: block;
    width: 100%;
    height: 100%;
}

#eye-type-comparison :is(.eye-motion-variant, .eye-motion-marker) {
    position: absolute;
    inset: 0;
}

#eye-type-comparison .eye-motion-variant {
    clip-path: inset(0 0 0 50%);
    mask-image: linear-gradient(to right, transparent 50%, #000 56%);
    opacity: 1;
}

#eye-type-comparison .eye-motion-marker {
    opacity: 0.62;
    pointer-events: none;
}

#eye-type-comparison .eye-motion-trigger {
    position: absolute;
    top: 43%;
    left: 50%;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

#eye-type-comparison .eye-motion-pending :is(.eye-motion-variant, .eye-motion-marker) {
    opacity: 0;
}

#eye-type-comparison .eye-motion-revealed .eye-motion-variant {
    animation: eye-motion-fade-in 760ms ease-out both;
}

#eye-type-comparison .eye-motion-revealed .eye-motion-marker {
    animation: eye-motion-marker-pulse 1.9s 740ms ease-in-out both;
}

@keyframes eye-motion-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes eye-motion-marker-pulse {
    0% { opacity: 0; }
    56% { opacity: 0.82; }
    100% { opacity: 0.62; }
}

#eye-type-comparison :is(a, button):focus-visible {
    outline: 2px solid var(--eye-motion-wine);
    outline-offset: 3px;
}

#eye-type-comparison .eye-motion-dialog {
    box-sizing: border-box;
    inset: 0;
    position: fixed;
    width: min(480px, calc(100% - 28px));
    max-height: calc(100% - 32px);
    overflow-y: auto;
    margin: auto;
    padding: 14px;
    background: var(--eye-motion-paper);
    border: 1px solid var(--eye-motion-line);
}

#eye-type-comparison .eye-motion-dialog::backdrop {
    background: var(--eye-motion-shade);
}

html:has(#eye-type-comparison .eye-motion-dialog[open]) {
    overflow: hidden;
}

#eye-type-comparison .eye-motion-dialog-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

#eye-type-comparison .eye-motion-close {
    min-height: 44px;
    padding: 4px 12px;
    background: white;
    border: 1px solid var(--eye-motion-line);
    color: var(--eye-motion-wine);
    font: inherit;
    cursor: pointer;
}

#eye-type-comparison .eye-motion-dialog img {
    max-height: 62vh;
    object-fit: contain;
}

@media (max-width: 899px) {
    #renew-brow-treatment-draft #eye-type-comparison {
        scroll-margin-top: 142px;
    }
}

@media (max-width: 480px) {
    #eye-type-comparison :is(.eye-motion-header, .eye-motion-list) {
        padding-inline: 11px;
    }

    #eye-type-comparison .eye-motion-title {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #eye-type-comparison .eye-motion-row .eye-motion-variant {
        animation: none;
        opacity: 1;
    }

    #eye-type-comparison .eye-motion-row .eye-motion-marker {
        animation: none;
        opacity: 0.62;
    }
}

#eye-type-comparison .eye-v2-controls {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 10px;
}

#eye-type-comparison .eye-v2-controls button {
    border: 0;
    background: transparent;
    color: var(--eye-motion-wine);
    padding: 7px 2px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#eye-type-comparison .eye-v2-controls button[hidden] {
    display: none;
}

#eye-type-comparison .eye-v2-label {
    position: absolute;
    z-index: 2;
    top: 9px;
    padding: 2px 8px;
    border-radius: 2px;
    background: rgb(248 246 242 / 88%);
    color: var(--eye-motion-wine);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    pointer-events: none;
}

#eye-type-comparison .eye-v2-label-normal { left: 9px; }
#eye-type-comparison .eye-v2-label-type { right: 9px; }

#eye-type-comparison .eye-v2-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-inline-start: 1.5px dashed rgb(255 250 245 / 86%);
    filter: drop-shadow(0 0 1px #453830);
    opacity: 0.72;
    pointer-events: none;
}

#eye-type-comparison .eye-v2-reference {
    position: absolute;
    inset: 0;
    opacity: 0.62;
    pointer-events: none;
}

#eye-type-comparison .eye-motion-pending :is(.eye-v2-divider, .eye-v2-reference) {
    opacity: 0;
}



#eye-type-comparison .eye-motion-revealed[data-eye-motion="brow"] .eye-motion-variant {
    animation: eye-v2-brow-photo 10s linear infinite both;
}

#eye-type-comparison .eye-motion-revealed[data-eye-motion="brow"] .eye-motion-marker {
    animation: eye-v2-brow-arrow 10s ease-in-out infinite both;
}

#eye-type-comparison .eye-motion-revealed[data-eye-motion="brow"] .eye-v2-reference {
    animation: eye-v2-brow-reference 10s linear infinite both;
}

#eye-type-comparison .eye-motion-revealed[data-eye-motion="brow"] .eye-v2-divider {
    animation: eye-v2-brow-divider 10s linear infinite both;
}

@keyframes eye-v2-brow-photo {
    0%, 50% { opacity: 0; }
    54%, 100% { opacity: 1; }
}

@keyframes eye-v2-brow-divider {
    0%, 20% { opacity: 0; }
    21.5%, 100% { opacity: 0.72; }
}

@keyframes eye-v2-brow-reference {
    0%, 20% { opacity: 0; }
    21.5%, 100% { opacity: 0.62; }
}

@keyframes eye-v2-brow-arrow {
    0%, 21.5% { opacity: 0; }
    25.5%, 34.5%, 44% { opacity: 0.8; }
    30%, 39%, 49%, 60%, 72.5%, 85%, 97.5% { opacity: 0.22; }
    54%, 66.25%, 78.75%, 91.25% { opacity: 0.8; }
    100% { opacity: 0.22; }
}

#eye-type-comparison .eye-motion-revealed:is([data-eye-motion="lid"], [data-eye-motion="skin"]) .eye-motion-variant {
    animation: eye-v2-lid-photo 7s ease-in-out infinite both;
}

#eye-type-comparison .eye-motion-revealed[data-eye-motion="lid"] .eye-motion-marker {
    animation: eye-v2-lid-marker 7s ease-in-out infinite both;
}

#eye-type-comparison .eye-motion-revealed:is([data-eye-motion="lid"], [data-eye-motion="skin"]) .eye-v2-divider {
    animation: eye-v2-lid-divider 7s ease-in-out infinite both;
}

@keyframes eye-v2-lid-photo {
    0%, 28.57% { opacity: 0; }
    35%, 93% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes eye-v2-lid-marker {
    0%, 34% { opacity: 0; }
    51% { opacity: 0.78; }
    65%, 93% { opacity: 0.62; }
    100% { opacity: 0; }
}

@keyframes eye-v2-lid-divider {
    0%, 28.57% { opacity: 0; }
    34%, 93% { opacity: 0.72; }
    100% { opacity: 0; }
}

#eye-type-comparison .eye-motion-revealed.eye-v2-offscreen[data-eye-motion]
:is(.eye-motion-variant, .eye-motion-marker, .eye-v2-reference, .eye-v2-divider) {
    animation-play-state: paused;
}

#eye-type-comparison.eye-v2-static .eye-motion-row .eye-motion-variant {
    animation: none !important;
    opacity: 1;
}

#eye-type-comparison.eye-v2-static .eye-motion-row :is(.eye-motion-marker, .eye-v2-reference, .eye-v2-divider) {
    animation: none !important;
    opacity: 0.62;
}

@media (prefers-reduced-motion: reduce) {
    #eye-type-comparison .eye-v2-controls button { display: none; }

    #eye-type-comparison .eye-motion-row .eye-motion-variant {
        animation: none !important;
        opacity: 1;
    }

    #eye-type-comparison .eye-motion-row :is(.eye-motion-marker, .eye-v2-reference, .eye-v2-divider) {
        animation: none !important;
        opacity: 0.62;
    }
}