@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(""), url(fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2) format("woff2"), url(fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff) format("woff")
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local(""), url(fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-500.woff2) format("woff2"), url(fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-500.woff) format("woff")
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(""), url(fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-700.woff2) format("woff2"), url(fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-700.woff) format("woff")
}

.purelive_container {
    --text-base-font-family: Roboto, sans-serif;
    --text-base-font-size: 16px;
    --text-base-font-weight: normal;
    --text-base-font-style: normal;
    --text-title-font-family: inherit;
    --text-title-font-size: 36px;
    --text-title-font-weight: 500;
    --text-title-font-style: normal;
    --text-color-primary: #000;
    --text-color-secondary: #8E8E93;
    --bg-color-primary: #fff;
    --bg-color-secondary: #F2F2F7;
    --button-font-family: inherit;
    --button-font-size: 14px;
    --button-font-weight: 500;
    --button-font-style: normal;
    --button-text-color-primary: #fff;
    --button-text-color-secondary: #00A5BA;
    --button-bg-color-primary: #00A5BA;
    --button-bg-color-secondary: #DBF2F5;
    --button-border-radius: 10px;
    --toolbar-icon-color: #707070;
    --icon-color: #00A5BA;
    --document-template-color: #fff;
    --document-template-opacity: 1;
    --hint-font-family: inherit;
    --hint-font-size: 24px;
    --hint-font-weight: 500;
    --hint-font-style: normal;
    --hint-letter-spacing: unset;
    --hint-text-color: #fff;
    --hint-background-color: #1c1c1e;
    --hint-background-opacity: 0.56;
    --hint-border-radius: 14px;
    --hint-position-y: 38%;
    --indicator-font-family: inherit;
    --indicator-font-size: 14px;
    --indicator-font-weight: 500;
    --indicator-font-style: normal;
    --indicator-text-color: #000;
    --indicator-text-opacity: 1;
    --indicator-background-color: #F2F2F7;
    --indicator-background-opacity: 1;
    --indicator-border-radius: 20px;
    --indicator-flash-color: #FF453A;
    --version-font-family: inherit;
    --version-font-size: 16px;
    --version-font-weight: 500;
    --version-font-style: normal;
    --version-color: #000;
    --version-opacity: 0.56;
    z-index: 9999;
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: var(--text-base-font-family);
    font-size: var(--text-base-font-size);
    font-weight: var(--text-base-font-weight);
    font-style: var(--text-base-font-style);
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--text-color-primary);
    background: var(--bg-color-primary);
    opacity: 0;
    transition: opacity .3s ease-out;
    color-scheme: only light
}

.purelive_container b,
.purelive_container strong {
    font-weight: 500
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_container {
        font-size: calc(var(--text-base-font-size) * .875)
    }
}

.purelive_container,
.purelive_container *,
.purelive_container :after,
.purelive_container :before {
    box-sizing: border-box
}

.purelive_container._display {
    display: block
}

.purelive_container._visible {
    opacity: 1
}

.purelive_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.purelive_close {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    -webkit-mask: url(img/close.svg) no-repeat 50% 50%;
    mask: url(img/close.svg) no-repeat 50% 50%;
    background-color: var(--toolbar-icon-color);
    opacity: var(--toolbar-icon-opacity);
    border: none;
    box-shadow: none
}

.purelive_close._arrow {}

.purelive_close._custom {
    -webkit-mask: none;
    mask: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50% 50%
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_close {
        width: 56px;
        height: 56px
    }
}

.purelive_button {
    height: 48px;
    line-height: 48px;
    margin: 0;
    padding: 0 16px;
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    font-style: var(--button-font-style);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    color: var(--button-text-color-primary);
    background-color: var(--button-bg-color-primary);
    outline: 0;
    border: none;
    border-radius: var(--button-border-radius);
    box-shadow: none;
    transition: opacity 120ms ease-out
}

.purelive_button._small {
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    font-size: 14px
}

.purelive_button._secondary {
    color: var(--button-text-color-secondary);
    background: var(--button-bg-color-secondary)
}

.purelive_button._disabled {
    opacity: .3
}

.purelive_loader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 32px;
    color: var(--text-color-primary);
    background: var(--bg-color-primary)
}

@keyframes purelive_loader_bounce {
    100% {
        transform: rotate(360deg)
    }
}

.purelive_loader_icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    animation: purelive_loader_bounce 1s infinite linear
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_loader_icon {
        width: 36px;
        height: 36px
    }
}

.purelive_loader_icon svg {
    width: 100%;
    height: 100%
}

.purelive_loader_icon svg path {
    fill: var(--icon-color)
}

.purelive_loader_text {
    margin: 0 0 0 16px;
    font-size: 22px;
    font-weight: 500;
    line-height: 28px
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_loader_text {
        font-size: 16px;
        line-height: 24px
    }
}

.purelive_progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 80px 24px;
    text-align: center;
    color: var(--text-color-primary);
    background: var(--bg-color-primary)
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_progress {
        padding: 56px 16px
    }
}

.purelive_progress_title {
    margin: 0;
    font-family: var(--text-title-font-family);
    font-size: var(--text-title-font-size);
    font-weight: var(--text-title-font-weight);
    font-style: var(--text-title-font-style);
    line-height: 1.2
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_progress_title {
        font-size: calc(var(--text-title-font-size) * .77)
    }
}

.purelive_progress_description {
    margin: 8px 0 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-color-secondary)
}

@media (max-width:640px) {
    .purelive_progress_description {
        font-size: 14px;
        line-height: 20px
    }
}

.purelive_progress_wrap_loader {
    flex: 0 1 auto;
    position: relative;
    margin: 32px 0 0 0;
    width: 310px;
    height: 310px;
    max-width: calc(100% - 32px);
    max-height: calc(100vw - 48px);
    min-height: 64px
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_progress_wrap_loader {
        max-height: calc(100vw - 32px)
    }
}

.purelive_progress_loader_section {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    animation-name: purelive_progress_loader_animation;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.15, .75, .75, .15);
    transform: rotate(140deg)
}

.purelive_progress_loader_section:nth-child(1) {
    animation-delay: -.5s
}

.purelive_progress_loader_section:nth-child(2) {
    animation-delay: -333ms
}

.purelive_progress_loader_section:nth-child(3) {
    animation-delay: -166ms
}

.purelive_progress_loader_section svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.purelive_progress_loader_section svg path {
    fill: var(--icon-color)
}

@keyframes purelive_progress_loader_animation {
    100% {
        transform: rotate(500deg)
    }
}

.purelive_progress_status {
    margin: 32px 0 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    min-height: 48px;
    color: var(--text-color-secondary)
}

.purelive_alert {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 32px
}

.purelive_alert a {
    color: #00a5ba;
    cursor: pointer;
    text-decoration: underline
}

.purelive_alert .purelive_button {
    width: 100%
}

.purelive_alert_overlay {
    z-index: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    transition: opacity .3s ease-out
}

.purelive_alert._visible .purelive_alert_overlay {
    opacity: .56
}

.purelive_alert_content {
    z-index: 2;
    display: block;
    max-width: 375px;
    padding: 44px;
    text-align: left;
    color: var(--text-color-primary);
    background: var(--bg-color-primary);
    border-radius: 24px;
    transform: scale(.75);
    transition: transform 150ms ease-out
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_alert_content {
        padding: 24px
    }
}

.purelive_alert._visible .purelive_alert_content {
    transform: none
}

.purelive_alert_text {
    margin: 0 0 32px 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_alert_text {
        margin: 0 0 16px 0
    }
}

.purelive_popup {
    display: flex;
    z-index: 10;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 80px 24px 24px 24px;
    opacity: 0;
    visibility: hidden;
    color: var(--text-color-primary);
    background: var(--bg-color-primary);
    transition: opacity 120ms ease-out, visibility 120ms
}

.purelive_popup._open {
    opacity: 1;
    visibility: visible
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_popup {
        padding: 56px 16px 16px 16px
    }
}

.purelive_popup_content {
    overflow-y: auto;
    flex: 1 1 auto;
    display: block;
    position: relative;
    width: 100%;
    max-width: 860px;
    margin: 0 auto
}

.purelive_popup_close {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    -webkit-mask: url(img/close.svg) no-repeat 50% 50%;
    mask: url(img/close.svg) no-repeat 50% 50%;
    background-color: var(--toolbar-icon-color);
    opacity: var(--toolbar-icon-opacity);
    border: none;
    box-shadow: none
}

.purelive_popup_close._arrow {}

.purelive_popup_close._custom {
    -webkit-mask: none;
    mask: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50% 50%
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_popup_close {
        width: 56px;
        height: 56px
    }
}

.purelive_device_turn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 32px;
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
    color: var(--text-color-primary);
    background-color: var(--bg-color-primary)
}

.purelive_device_turn::before {
    flex: 0 0 auto;
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 0 16px 0;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--icon-color)
}

.purelive_recorder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #000;
    background: #fff
}

.purelive_doc_help {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    cursor: pointer;
    background-color: var(--toolbar-icon-color);
    opacity: var(--toolbar-icon-opacity)
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_doc_help {
        width: 56px;
        height: 56px
    }
}

.purelive_wrap_video {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000
}

.purelive_photo_preview {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain
}

.purelive_wrap_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.purelive_recorder_wrap_button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 24px;
    text-align: center
}

@media (max-width:640px) {
    .purelive_recorder_wrap_button {
        padding-bottom: 40px
    }
}

.purelive_recorder_wrap_button button {
    margin: 8px;
    min-width: 180px
}

.purelive_doc_frame {
    position: absolute;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.purelive_doc_frame._flipped {
    animation-name: purelive_doc_frame;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

.purelive_doc_frame._mirrored {
    transform: scaleX(-1)
}

.purelive_doc_frame._flipped._mirrored {
    animation-name: purelive_doc_frame_mirrored
}

.purelive_doc_frame::after,
.purelive_doc_frame::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: var(--document-template-color);
    opacity: var(--document-template-opacity)
}

.purelive_doc_frame::before {}

.purelive_doc_frame::after {
    transform: rotateY(180deg)
}

@keyframes purelive_doc_frame {
    100% {
        transform: rotateY(180deg)
    }
}

@keyframes purelive_doc_frame_mirrored {
    100% {
        transform: scaleX(-1) rotateY(180deg)
    }
}

.purelive_hint {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--hint-position-y);
    left: 0;
    width: 100%;
    padding: 0 24px;
    pointer-events: none
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_hint {
        padding: 0 16px
    }
}

.purelive_hint_content {
    display: block;
    padding: 8px;
    font-family: var(--hint-font-family);
    font-size: var(--hint-font-size);
    font-weight: var(--hint-font-weight);
    font-style: var(--hint-font-style);
    letter-spacing: var(--hint-letter-spacing);
    line-height: 1.33;
    text-align: center;
    color: var(--hint-text-color);
    transform: translateY(-50%)
}

.purelive_hint_bg {
    z-index: -1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--hint-background-color);
    border-radius: var(--hint-border-radius);
    opacity: var(--hint-background-opacity)
}

.purelive_hint_box {
    position: absolute
}

.purelive_hint_icon {
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%)
}

.purelive_hint_icon_face,
.purelive_hint_icon_face_blink,
.purelive_hint_icon_face_normal,
.purelive_hint_icon_face_open_eyes,
.purelive_hint_icon_face_smile,
.purelive_hint_icon_glasses,
.purelive_hint_icon_hat,
.purelive_hint_icon_left_right,
.purelive_hint_icon_light,
.purelive_hint_icon_mask,
.purelive_hint_icon_up_down {
    visibility: hidden
}

.purelive_hint_icon[data-hint=turn_up] .purelive_hint_icon_up_down {
    visibility: visible;
    animation-name: purelive_turn_up;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes purelive_turn_up {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }

    20% {
        opacity: 1;
        transform: translateY(-5%)
    }

    25% {
        transform: translateY(2.5%)
    }

    30%,
    90% {
        opacity: 1;
        transform: translateY(0)
    }

    100% {
        opacity: 0
    }
}

.purelive_hint_icon[data-hint=turn_down] {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
}

.purelive_hint_icon[data-hint=turn_down] .purelive_hint_icon_up_down {
    visibility: visible;
    transform: scaleY(-1);
    transform-origin: center center;
    animation-name: purelive_turn_down;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes purelive_turn_down {
    0% {
        opacity: 0;
        transform: translateY(-100%) scaleY(-1)
    }

    20% {
        opacity: 1;
        transform: translateY(5%) scaleY(-1)
    }

    25% {
        transform: translateY(-2.5%) scaleY(-1)
    }

    30%,
    90% {
        opacity: 1;
        transform: translateY(0) scaleY(-1)
    }

    100% {
        opacity: 0
    }
}

.purelive_hint_icon[data-hint=turn_left] {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    transform: translateY(-50%)
}

.purelive_hint_icon[data-hint=turn_left] .purelive_hint_icon_left_right {
    visibility: visible;
    animation-name: purelive_turn_left;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes purelive_turn_left {
    0% {
        opacity: 0;
        transform: translateX(100%)
    }

    20% {
        opacity: 1;
        transform: translateX(-5%)
    }

    25% {
        transform: translateX(2.5%)
    }

    30%,
    90% {
        opacity: 1;
        transform: translateX(0)
    }

    100% {
        opacity: 0
    }
}

.purelive_hint_icon[data-hint=turn_right] {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    transform: translateY(-50%)
}

.purelive_hint_icon[data-hint=turn_right] .purelive_hint_icon_left_right {
    visibility: visible;
    transform: scaleX(-1);
    transform-origin: center center;
    animation-name: purelive_turn_right;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes purelive_turn_right {
    0% {
        opacity: 0;
        transform: translateX(-100%) scaleX(-1)
    }

    20% {
        opacity: 1;
        transform: translateX(5%) scaleX(-1)
    }

    25% {
        transform: translateX(-2.5%) scaleX(-1)
    }

    30%,
    90% {
        opacity: 1;
        transform: translateX(0) scaleX(-1)
    }

    100% {
        opacity: 0
    }
}

.purelive_hint_icon[data-hint=normal] .purelive_hint_icon_face {
    visibility: visible
}

.purelive_hint_icon[data-hint=normal] .purelive_hint_icon_face_normal {
    visibility: visible
}

.purelive_hint_icon[data-hint=not_centered] .purelive_hint_icon_face {
    visibility: visible
}

.purelive_hint_icon[data-hint=not_centered] .purelive_hint_icon_face_normal {
    visibility: visible
}

.purelive_hint_icon[data-hint=not_centered_left] .purelive_hint_icon_face {
    visibility: visible
}

.purelive_hint_icon[data-hint=not_centered_left] .purelive_hint_icon_face_normal {
    visibility: visible;
    animation-name: purelive_not_centered_left;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: translateX(-30%)
}

@keyframes purelive_not_centered_left {

    0%,
    40% {
        transform: translateX(-30%)
    }

    50% {
        transform: translateX(3%)
    }

    55% {
        transform: translateX(-1.5%)
    }

    100%,
    60% {
        transform: translateX(0)
    }
}

.purelive_hint_icon[data-hint=not_centered_right] .purelive_hint_icon_face {
    visibility: visible
}

.purelive_hint_icon[data-hint=not_centered_right] .purelive_hint_icon_face_normal {
    visibility: visible;
    animation-name: purelive_not_centered_right;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: translateX(30%)
}

@keyframes purelive_not_centered_right {

    0%,
    40% {
        transform: translateX(30%)
    }

    50% {
        transform: translateX(-3%)
    }

    55% {
        transform: translateX(1.5%)
    }

    100%,
    60% {
        transform: translateX(0)
    }
}

.purelive_hint_icon[data-hint=not_centered_top] .purelive_hint_icon_face {
    visibility: visible
}

.purelive_hint_icon[data-hint=not_centered_top] .purelive_hint_icon_face_normal {
    visibility: visible;
    animation-name: purelive_not_centered_top;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: translateY(30%)
}

@keyframes purelive_not_centered_top {

    0%,
    40% {
        transform: translateY(30%)
    }

    50% {
        transform: translateY(-3%)
    }

    55% {
        transform: translateY(1.5%)
    }

    100%,
    60% {
        transform: translateY(0)
    }
}

.purelive_hint_icon[data-hint=not_centered_bottom] .purelive_hint_icon_face {
    visibility: visible
}

.purelive_hint_icon[data-hint=not_centered_bottom] .purelive_hint_icon_face_normal {
    visibility: visible;
    animation-name: purelive_not_centered_bottom;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: translateY(-30%)
}

@keyframes purelive_not_centered_bottom {

    0%,
    40% {
        transform: translateY(-30%)
    }

    50% {
        transform: translateY(3%)
    }

    55% {
        transform: translateY(-1.5%)
    }

    100%,
    60% {
        transform: translateY(0)
    }
}

.purelive_hint_icon[data-hint=move_closer] .purelive_hint_icon_face {
    visibility: visible
}

.purelive_hint_icon[data-hint=move_closer] .purelive_hint_icon_face_normal {
    visibility: visible;
    animation-name: purelive_move_closer;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: 50% 50%
}

@keyframes purelive_move_closer {

    0%,
    45% {
        transform: scale(.5)
    }

    55% {
        transform: scale(1.15)
    }

    100%,
    60% {
        transform: none
    }
}

.purelive_hint_icon[data-hint=move_away] .purelive_hint_icon_face {
    visibility: visible
}

.purelive_hint_icon[data-hint=move_away] .purelive_hint_icon_face_normal {
    visibility: visible;
    animation-name: purelive_move_away;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: 50% 50%
}

@keyframes purelive_move_away {

    0%,
    45% {
        transform: scale(1.75)
    }

    55% {
        transform: scale(.9)
    }

    100%,
    60% {
        transform: none
    }
}

.purelive_hint_icon[data-hint=smile] .purelive_hint_icon_face {
    visibility: visible
}

.purelive_hint_icon[data-hint=smile] .purelive_hint_icon_face_smile {
    visibility: visible
}

.purelive_hint_icon[data-hint=blink] .purelive_hint_icon_face {
    visibility: visible
}

.purelive_hint_icon[data-hint=blink] .purelive_hint_icon_face_blink {
    visibility: visible
}

.purelive_hint_icon[data-hint=open_eyes] .purelive_hint_icon_face {
    visibility: visible
}

.purelive_hint_icon[data-hint=open_eyes] .purelive_hint_icon_face_open_eyes {
    visibility: visible
}

.purelive_hint_icon[data-hint=remove_object] .purelive_hint_icon_glasses,
.purelive_hint_icon[data-hint=remove_object] .purelive_hint_icon_hat,
.purelive_hint_icon[data-hint=remove_object] .purelive_hint_icon_mask {
    visibility: visible;
    opacity: 0
}

.purelive_hint_icon[data-hint=remove_object] .purelive_hint_icon_glasses {
    opacity: 1;
    transform: translateY(-12px)
}

.purelive_hint_icon[data-hint=remove_object] .purelive_hint_icon_mask {
    opacity: 1;
    transform: translateY(15px)
}

.purelive_hint_icon[data-hint=bad_light] .purelive_hint_icon_light {
    visibility: visible
}

.purelive_indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 58px;
    pointer-events: none
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_indicator {
        padding: 0 42px
    }
}

.purelive_indicator_content {
    display: block;
    position: relative;
    padding: 8px 8px 8px 24px
}

.purelive_indicator_content::after,
.purelive_indicator_content::before {
    content: "";
    z-index: 2;
    display: block;
    position: absolute;
    left: 8px;
    top: calc(50% - 5px);
    width: 10px;
    height: 10px;
    background-color: var(--indicator-flash-color);
    border-radius: 100%
}

.purelive_indicator_content::before {
    animation-name: purelive_indicator_flash;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    opacity: .2
}

.purelive_indicator_text {
    z-index: 2;
    position: relative;
    font-family: var(--indicator-font-family);
    font-size: var(--indicator-font-size);
    font-weight: var(--indicator-font-weight);
    font-style: var(--indicator-font-style);
    line-height: 1.33;
    text-align: center;
    color: var(--indicator-text-color);
    opacity: var(--indicator-text-opacity)
}

.purelive_indicator_bg {
    z-index: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--indicator-background-color);
    border-radius: var(--indicator-border-radius);
    opacity: var(--indicator-background-opacity)
}

@keyframes purelive_indicator_flash {
    40% {
        transform: scale(2)
    }

    80% {
        transform: scale(1)
    }
}

.purelive_tutorial_title {
    font-family: var(--text-title-font-family);
    font-size: var(--text-title-font-size);
    font-weight: var(--text-title-font-weight);
    font-style: var(--text-title-font-style);
    line-height: 1.2
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_tutorial_title {
        font-size: calc(var(--text-title-font-size) * .77)
    }
}

.purelive_tutorial_description {
    margin: 8px 0 44px 0;
    color: var(--text-color-secondary)
}

@media (max-width:640px) {
    .purelive_tutorial_description {
        margin-bottom: 24px
    }
}

.purelive_tutorial_list ul {
    display: flex;
    flex-wrap: wrap;
    margin: -16px 0 0 -16px;
    padding: 0;
    list-style: none
}

.purelive_tutorial_list li {
    display: block;
    position: relative;
    width: 100%;
    min-height: 48px;
    margin: 16px 0 0 16px;
    padding: 100px 24px 24px 24px;
    background: var(--bg-color-secondary);
    border-radius: 24px
}

.purelive_tutorial_list li::before {
    content: "";
    display: block;
    position: absolute;
    top: 24px;
    left: 24px;
    width: 64px;
    height: 64px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--icon-color)
}

.purelive_tutorial_list li[data-icon=pages]::before {}

.purelive_tutorial_list li[data-icon=angle]::before {}

.purelive_tutorial_list li[data-icon=obstruction]::before {}

.purelive_tutorial_list li[data-icon=blur]::before {}

.purelive_tutorial_list li[data-icon=contrast]::before {}

.purelive_tutorial_list li[data-icon=edges]::before {}

.purelive_tutorial_list li:nth-child(1),
.purelive_tutorial_list li:nth-child(2),
.purelive_tutorial_list li:nth-child(6),
.purelive_tutorial_list li:nth-child(7) {
    width: calc(50% - 16px)
}

.purelive_tutorial_list li:nth-child(3),
.purelive_tutorial_list li:nth-child(4),
.purelive_tutorial_list li:nth-child(5) {
    width: calc(33.33% - 16px)
}

@media (max-width:640px) {
    .purelive_tutorial_list li {
        display: flex;
        align-items: center;
        min-height: 80px;
        padding: 16px 16px 16px 80px;
        border-radius: 14px
    }

    .purelive_tutorial_list li:nth-child(n) {
        width: 100%
    }

    .purelive_tutorial_list li::before {
        width: 48px;
        height: 48px;
        top: 16px;
        left: 16px
    }
}

.purelive_browser_title {
    font-family: var(--text-title-font-family);
    font-size: var(--text-title-font-size);
    font-weight: var(--text-title-font-weight);
    font-style: var(--text-title-font-style);
    line-height: 1.2
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_browser_title {
        font-size: calc(var(--text-title-font-size) * .77)
    }
}

.purelive_browser_how_to {
    margin: 44px 0;
    font-size: 24px;
    line-height: 32px
}

@media (max-width:640px) {
    .purelive_browser_how_to {
        margin: 24px 0;
        font-size: 18px;
        line-height: 24px
    }
}

.purelive_browser_info {
    display: block;
    position: relative;
    min-height: 64px;
    padding: 0 0 0 80px
}

.purelive_browser_info::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain
}

.purelive_browser_info[data-browser=firefox]::before {}

.purelive_browser_info[data-browser=edge]::before {}

.purelive_browser_info[data-browser=chrome]::before {}

.purelive_browser_info[data-browser=chromium]::before {}

.purelive_browser_info[data-browser=opera]::before {}

.purelive_browser_info[data-browser=yandex]::before {}

.purelive_browser_info_name {
    font-size: 28px;
    font-weight: 500;
    line-height: 36px
}

@media (max-width:640px) {
    .purelive_browser_info_name {
        font-size: 22px;
        line-height: 28px
    }
}

.purelive_browser_info_text {
    margin: 4px 0 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-color-secondary)
}

@media (max-width:640px) {
    .purelive_browser_info_text {
        font-size: 14px;
        line-height: 20px
    }
}

.purelive_browser_instruction {
    margin: 44px 0 0 0
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_browser_instruction {
        margin: 24px 0 0 0
    }
}

.purelive_browser_instruction p {
    margin: 32px 0
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_browser_instruction p {
        margin: 24px 0
    }
}

.purelive_browser_instruction ul {
    counter-reset: custom_counter;
    display: block;
    margin: 32px 0;
    padding: 0;
    list-style: none
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_browser_instruction ul {
        margin: 24px 0
    }
}

.purelive_browser_instruction ul:first-child {
    margin-top: 0
}

.purelive_browser_instruction ul:last-child {
    margin-bottom: 0
}

.purelive_browser_instruction ul li {
    counter-increment: custom_counter;
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 0 0 16px 0;
    padding: 12px;
    background: var(--bg-color-secondary);
    border-radius: 24px
}

.purelive_browser_instruction ul li:last-child {
    margin-bottom: 0
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_browser_instruction ul li {
        border-radius: 14px
    }
}

.purelive_browser_instruction ul li::before {
    content: counter(custom_counter);
    flex: 0 0 auto;
    display: block;
    margin: 0 12px 0 0;
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 36px;
    font-weight: 500;
    text-align: center
}

.purelive_logo {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    opacity: .56;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: 24px calc(100% - 24px)
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_logo {
        background-position: 16px calc(100% - 16px)
    }
}

.purelive_version {
    display: block;
    position: absolute;
    right: 24px;
    bottom: 24px;
    font-family: var(--version-font-family);
    font-size: var(--version-font-size);
    font-weight: var(--version-font-weight);
    font-style: var(--version-font-style);
    line-height: 1;
    color: var(--version-color);
    opacity: var(--version-opacity)
}

@media (max-width:640px) or (max-height:500px) {
    .purelive_version {
        right: 16px;
        bottom: 16px
    }
}