/* BEGIN GT_HOME_MULTILINGUAL_VOICE_GUIDANCE_V1 */

.gt-voice-guide {
    margin: 22px 0 26px;
    padding: 18px;
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.10),
            rgba(124, 58, 237, 0.08)
        );
    box-shadow:
        0 12px 34px rgba(15, 23, 42, 0.08);
}

.gt-voice-guide[dir="rtl"] {
    text-align: right;
}

.gt-voice-guide-layout {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.gt-voice-guide[dir="rtl"] .gt-voice-guide-layout {
    grid-template-columns: minmax(0, 1fr) 58px;
}

.gt-voice-guide[dir="rtl"] .gt-voice-guide-avatar {
    grid-column: 2;
    grid-row: 1;
}

.gt-voice-guide[dir="rtl"] .gt-voice-guide-content {
    grid-column: 1;
    grid-row: 1;
}

.gt-voice-guide-avatar {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    font-size: 31px;
    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.10);
    user-select: none;
}

.gt-voice-guide-kicker {
    margin: 0 0 4px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.72;
}

.gt-voice-guide-title {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.25;
}

.gt-voice-guide-subtitles {
    margin: 10px 0 0;
    line-height: 1.55;
    opacity: 0.92;
}

.gt-voice-guide-subtitles[hidden] {
    display: none;
}

.gt-voice-guide-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 15px;
}

.gt-voice-guide button {
    min-height: 42px;
    border: 0;
    border-radius: 13px;
    padding: 9px 13px;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        opacity 120ms ease;
}

.gt-voice-guide button:hover {
    transform: translateY(-1px);
}

.gt-voice-guide button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

.gt-voice-guide button:disabled {
    cursor: default;
    opacity: 0.48;
    transform: none;
}

.gt-voice-primary {
    background: #2563eb;
    color: #ffffff;
    box-shadow:
        0 8px 18px rgba(37, 99, 235, 0.24);
}

.gt-voice-secondary {
    background: rgba(255, 255, 255, 0.86);
    color: inherit;
    border: 1px solid rgba(100, 116, 139, 0.22);
}

.gt-voice-guide-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 14px;
}

.gt-voice-guide-setting {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.91rem;
    cursor: pointer;
}

.gt-voice-guide-setting input {
    width: 18px;
    height: 18px;
}

.gt-voice-guide-status {
    min-height: 1.3em;
    margin-top: 10px;
    font-size: 0.88rem;
    opacity: 0.72;
}

.gt-voice-guide[data-state="playing"] {
    border-color: rgba(37, 99, 235, 0.58);
}

.gt-voice-guide[data-state="paused"] {
    border-color: rgba(245, 158, 11, 0.62);
}

@media (max-width: 600px) {
    .gt-voice-guide {
        padding: 15px;
        border-radius: 17px;
    }

    .gt-voice-guide-layout,
    .gt-voice-guide[dir="rtl"] .gt-voice-guide-layout {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 11px;
    }

    .gt-voice-guide[dir="rtl"] .gt-voice-guide-avatar {
        grid-column: 1;
    }

    .gt-voice-guide[dir="rtl"] .gt-voice-guide-content {
        grid-column: 2;
    }

    .gt-voice-guide-avatar {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 25px;
    }

    .gt-voice-guide-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .gt-voice-guide button {
        width: 100%;
    }

    .gt-voice-primary {
        grid-column: 1 / -1;
    }
}

/* END GT_HOME_MULTILINGUAL_VOICE_GUIDANCE_V1 */

/* BEGIN GT_VOICE_GUIDE_VISUAL_FIX_V1_1 */

.gt-voice-secondary:not(:disabled) {
    background: #f8fafc;
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.42);
    box-shadow:
        0 5px 14px rgba(15, 23, 42, 0.10);
}

.gt-voice-secondary:not(:disabled):hover {
    background: #ffffff;
    color: #020617;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.16);
}

.gt-voice-secondary:disabled {
    background: rgba(148, 163, 184, 0.22);
    color: rgba(226, 232, 240, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: none;
}

@media (min-width: 601px) {
    .gt-voice-guide-controls {
        display: grid;
        grid-template-columns:
            minmax(205px, 1.7fr)
            repeat(3, minmax(92px, 1fr));
        gap: 9px;
        align-items: stretch;
    }

    .gt-voice-guide-controls button {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
    }
}

/* END GT_VOICE_GUIDE_VISUAL_FIX_V1_1 */

/* BEGIN GT_VOICE_GUIDE_BUTTON_AUTOPLAY_FIX_V1_3 */

.gt-voice-guide,
.gt-voice-guide-content,
.gt-voice-guide-controls,
.gt-voice-guide-settings {
    position: relative;
}

.gt-voice-guide-controls {
    z-index: 3;
}

.gt-voice-guide-controls button,
.gt-voice-guide-settings label,
.gt-voice-guide-settings input {
    position: relative;
    z-index: 4;
    pointer-events: auto;
}

.gt-voice-guide-controls button {
    min-width: 0;
    overflow: hidden;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (min-width: 601px) {
    .gt-voice-guide-controls {
        grid-template-columns:
            minmax(170px, 1.45fr)
            minmax(88px, 0.75fr)
            minmax(98px, 0.85fr)
            minmax(92px, 0.8fr);
    }
}

/* END GT_VOICE_GUIDE_BUTTON_AUTOPLAY_FIX_V1_3 */

/* BEGIN GT_VOICE_BUTTON_LAYOUT_FIX_V1_4 */

@media (min-width: 761px) {
    .gt-voice-guide-controls {
        grid-template-columns:
            minmax(185px, 1.45fr)
            minmax(100px, 0.72fr)
            minmax(120px, 0.86fr)
            minmax(112px, 0.80fr);
        gap: 8px;
    }

    .gt-voice-guide-controls button {
        white-space: nowrap;
        overflow-wrap: normal;
        font-size: 0.94rem;
    }
}

@media (min-width: 601px) and (max-width: 760px) {
    .gt-voice-guide-controls {
        grid-template-columns: 1fr 1fr;
    }

    .gt-voice-primary {
        grid-column: 1 / -1;
    }

    .gt-voice-guide-controls button {
        white-space: normal;
    }
}

/* END GT_VOICE_BUTTON_LAYOUT_FIX_V1_4 */

/* BEGIN GT_HOME_MALE_WELCOME_HERO_V2 */

#gtVoiceHeroPlay {
    display: none;
}

/*
 * Approved male AI Teacher welcome screen.
 * Russian only because the illustration itself
 * contains Russian instructional text.
 */
#gtVoiceGuide[lang="ru-RU"] {
    position: relative;

    width: 100%;
    aspect-ratio: 1672 / 941;

    min-height: 0 !important;
    padding: 0 !important;
    margin-top: 22px;

    overflow: hidden;

    border-radius: 26px;

    background:
        #020b1e
        url("audio/home-welcome-teacher-male-v1.png")
        center center / 100% 100%
        no-repeat !important;

    box-shadow:
        0 24px 60px rgba(0, 20, 60, 0.20);
}

#gtVoiceGuide[lang="ru-RU"]
.gt-voice-guide-layout {
    position: absolute;
    inset: 0;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

#gtVoiceGuide[lang="ru-RU"]
.gt-voice-guide-content {
    position: absolute;
    inset: 0;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: none;
}

#gtVoiceGuide[lang="ru-RU"]
.gt-voice-guide-avatar,

#gtVoiceGuide[lang="ru-RU"]
.gt-voice-guide-kicker,

#gtVoiceGuide[lang="ru-RU"]
.gt-voice-guide-title,

#gtVoiceGuide[lang="ru-RU"]
.gt-voice-guide-subtitles,

#gtVoiceGuide[lang="ru-RU"]
.gt-voice-guide-settings,

#gtVoiceGuide[lang="ru-RU"]
#gtVoiceSkip,

#gtVoiceGuide[lang="ru-RU"]
.gt-voice-guide-status {
    display: none !important;
}

/*
 * Bottom control panel:
 * Play / Pause / Repeat
 */
#gtVoiceGuide[lang="ru-RU"]
.gt-voice-guide-controls {
    position: absolute;

    right: 2.2%;
    bottom: 2.6%;

    z-index: 20;

    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    margin: 0 !important;
    padding: 9px !important;

    border-radius: 16px;

    background: rgba(3, 15, 42, 0.90);

    border:
        1px solid rgba(92, 165, 255, 0.35);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.22);

    backdrop-filter: blur(10px);

    pointer-events: auto;
}

#gtVoiceGuide[lang="ru-RU"]
.gt-voice-guide-controls button {
    min-height: 40px;

    margin: 0 !important;
    padding: 9px 14px;

    white-space: nowrap;

    pointer-events: auto;
}

/*
 * Clickable area over the blue Play icon
 * already present inside the illustration.
 */
#gtVoiceGuide[lang="ru-RU"]
#gtVoiceHeroPlay {
    display: block;

    position: absolute;

    left: 5.35%;
    top: 37.1%;

    width: 5.4%;
    height: 10.5%;

    z-index: 30;

    padding: 0;

    border: 0;
    border-radius: 18px;

    background: transparent;

    cursor: pointer;
}

#gtVoiceGuide[lang="ru-RU"]
#gtVoiceHeroPlay:hover {
    background:
        rgba(70, 130, 255, 0.08);
}

#gtVoiceGuide[lang="ru-RU"]
#gtVoiceHeroPlay:focus-visible {
    outline:
        3px solid rgba(90, 160, 255, 0.95);

    outline-offset: 3px;
}

@media (max-width: 760px) {

    #gtVoiceGuide[lang="ru-RU"] {
        border-radius: 16px;
    }

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-controls {
        left: 2%;
        right: 2%;
        bottom: 2%;

        justify-content: center;

        gap: 5px;

        padding: 6px !important;
    }

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-controls button {
        min-height: 32px;

        padding: 6px 8px;

        font-size: 11px;
    }
}

/* END GT_HOME_MALE_WELCOME_HERO_V2 */

/* BEGIN GT_MALE_WELCOME_COMPACT_CONTROLS_V3 */

/*
 * Desktop: compact controls like approved preview.
 * Keep Play / Pause-or-Continue / Repeat on one line.
 */
@media (min-width: 761px) {

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-controls {
        left: auto !important;
        right: 1.8% !important;
        bottom: 2.4% !important;

        width: auto !important;
        max-width: none !important;

        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 7px !important;

        padding: 8px !important;

        border-radius: 15px !important;
    }

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-controls button {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        flex: 0 0 auto !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 38px !important;

        padding: 8px 12px !important;
        margin: 0 !important;

        font-size: 13px !important;
        line-height: 1 !important;

        white-space: nowrap !important;
    }

    #gtVoiceGuide[lang="ru-RU"]
    #gtVoicePrimary {
        min-width: 135px !important;
    }
}

/* END GT_MALE_WELCOME_COMPACT_CONTROLS_V3 */

/* BEGIN GT_MALE_WELCOME_MOBILE_V4 */

@media (max-width: 760px) {

    /*
     * Mobile:
     * show the whole approved picture first,
     * then reserve a separate strip for controls.
     */
    #gtVoiceGuide[lang="ru-RU"] {
        position: relative !important;

        width: 100% !important;

        aspect-ratio: auto !important;

        /*
         * Image ratio = 941 / 1672 = 56.28%.
         * Extra 66px is reserved only for controls.
         */
        height: auto !important;
        min-height: 0 !important;

        padding:
            56.28% 0 66px 0 !important;

        margin-top: 12px !important;

        overflow: hidden !important;

        border-radius: 16px !important;

        background-image:
            url("audio/home-welcome-teacher-male-v1.png")
            !important;

        background-size:
            100% auto !important;

        background-position:
            top center !important;

        background-repeat:
            no-repeat !important;
    }

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-layout,

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-content {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * On mobile use the bottom controls,
     * not the invisible click-zone over
     * the tiny Play icon inside the picture.
     */
    #gtVoiceGuide[lang="ru-RU"]
    #gtVoiceHeroPlay {
        display: none !important;
    }

    /*
     * Compact one-row controls BELOW the image.
     */
    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-controls {
        position: absolute !important;

        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;

        width: auto !important;
        max-width: none !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: stretch !important;
        justify-content: center !important;

        gap: 5px !important;

        margin: 0 !important;
        padding: 5px !important;

        border-radius: 13px !important;

        background:
            rgba(3, 15, 42, 0.92) !important;

        z-index: 50 !important;
    }

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-controls button {
        width: auto !important;

        min-width: 0 !important;
        max-width: none !important;

        min-height: 42px !important;

        flex: 1 1 0 !important;

        margin: 0 !important;

        padding:
            7px 4px !important;

        font-size: 11px !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;

        border-radius: 10px !important;
    }

    #gtVoiceGuide[lang="ru-RU"]
    #gtVoicePrimary {
        min-width: 0 !important;
        flex-grow: 1.45 !important;
    }

}

/* END GT_MALE_WELCOME_MOBILE_V4 */

/* BEGIN GT_MOBILE_VERTICAL_APPROVED_V5 */

/*
 * APPROVED MOBILE HERO V5
 *
 * Image: 941 x 1672.
 *
 * IMPORTANT:
 * This affects ONLY screens <= 760px.
 * Desktop keeps the approved horizontal hero.
 */

@media (max-width: 760px) {

    /*
     * Entire mobile hero becomes the approved
     * vertical composition.
     */
    #gtVoiceGuide[lang="ru-RU"] {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        /*
         * Exact approved image ratio:
         * width 941 / height 1672.
         */
        aspect-ratio: 941 / 1672 !important;

        height: auto !important;
        min-height: 0 !important;

        margin:
            10px auto 18px !important;

        padding: 0 !important;

        overflow: hidden !important;

        border-radius: 18px !important;

        background:
            #020a1c
            url(
                "audio/home-welcome-mobile-approved-v2.png"
            )
            center center
            / 100% 100%
            no-repeat
            !important;

        box-shadow:
            0 14px 40px
            rgba(0, 0, 0, .28)
            !important;
    }


    /*
     * Existing HTML content stays in place
     * for functionality, but the approved
     * graphic provides the visible design.
     */
    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-layout,

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-content {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /*
     * Hide old live visual elements because
     * they are already drawn into the approved
     * mobile image.
     */
    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-avatar,

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-kicker,

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-title,

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-subtitles,

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-settings,

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-status,

    #gtVoiceGuide[lang="ru-RU"]
    #gtVoiceSkip,

    #gtVoiceGuide[lang="ru-RU"]
    #gtVoiceHeroPlay {
        display: none !important;
    }


    /*
     * The image already contains beautiful
     * Play / Pause / Repeat buttons.
     *
     * Therefore the real HTML controls become
     * transparent clickable areas directly
     * over those three visual buttons.
     */
    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-controls {
        position: absolute !important;

        inset: 0 !important;

        z-index: 60 !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;
        backdrop-filter: none !important;

        pointer-events: none !important;
    }


    /*
     * Common properties for the three
     * invisible functional buttons.
     *
     * Coordinates match the approved
     * mobile preview.
     */
    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-controls button {
        position: absolute !important;

        bottom: 1.9% !important;

        height: 8.8% !important;

        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 16px !important;

        background: transparent !important;

        box-shadow: none !important;

        /*
         * Hide actual HTML text.
         * The text is already part of the image.
         */
        color: transparent !important;

        font-size: 0 !important;
        line-height: 0 !important;

        opacity: 0.01 !important;

        pointer-events: auto !important;

        cursor: pointer !important;

        -webkit-tap-highlight-color:
            transparent !important;
    }


    /*
     * PLAY
     */
    #gtVoiceGuide[lang="ru-RU"]
    #gtVoicePrimary {
        left: 2.5% !important;
        right: auto !important;

        width: 31% !important;

        min-width: 0 !important;
        max-width: none !important;
    }


    /*
     * PAUSE / CONTINUE
     */
    #gtVoiceGuide[lang="ru-RU"]
    #gtVoicePause {
        left: 34.5% !important;
        right: auto !important;

        width: 30.5% !important;

        min-width: 0 !important;
        max-width: none !important;
    }


    /*
     * REPEAT
     */
    #gtVoiceGuide[lang="ru-RU"]
    #gtVoiceRepeat {
        left: auto !important;
        right: 2.5% !important;

        width: 31% !important;

        min-width: 0 !important;
        max-width: none !important;
    }


    /*
     * Accessible keyboard focus.
     * Does not affect normal phone use.
     */
    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-controls
    button:focus-visible {
        opacity: 1 !important;

        outline:
            3px solid
            rgba(70, 150, 255, .95)
            !important;

        outline-offset:
            -3px !important;
    }
}

/* END GT_MOBILE_VERTICAL_APPROVED_V5 */


/* BEGIN GT_MALE_WELCOME_MOBILE_V6_ZOOM */

@media (max-width: 760px) {

    /*
     * HERO CARD ONLY
     * Slightly reduce the outer air around the first home card.
     */
    main.shell > section.card:first-of-type {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 10px !important;
    }

    /*
     * Main mobile welcome block:
     * make it a bit wider and tighter inside the card.
     */
    #gtVoiceGuide {
        width: calc(100% + 12px) !important;
        margin-left: -6px !important;
        margin-right: -6px !important;
        margin-top: 0 !important;

        padding: 4px !important;
        border-radius: 20px !important;

        overflow: hidden !important;
    }

    /*
     * Zoom the approved vertical design so:
     * - teacher becomes bigger
     * - teacher goes slightly higher
     * - text also becomes visually larger
     *
     * These overrides are safe even if only one of the
     * layers/pseudo-layers is actually used.
     */
    #gtVoiceGuide,
    #gtVoiceGuide::before,
    #gtVoiceGuide::after {
        background-size: 112% auto !important;
        background-position: center top !important;
    }

    /*
     * If there is an inner hero/media/image layer,
     * zoom it too.
     */
    #gtVoiceGuide .gt-voice-guide-hero,
    #gtVoiceGuide .gt-voice-guide-media,
    #gtVoiceGuide .gt-voice-guide-image,
    #gtVoiceGuide img {
        transform: scale(1.08) translateY(-10px) !important;
        transform-origin: top center !important;
    }

    /*
     * Keep controls nicely aligned at the bottom.
     */
    #gtVoiceGuide .gt-voice-guide-controls {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
    }
}

/* END GT_MALE_WELCOME_MOBILE_V6_ZOOM */

/* BEGIN GT_DESKTOP_WELCOME_PREVIEW_SIZE_V7 */

/*
 * DESKTOP ONLY.
 * Mobile <= 760px is intentionally untouched.
 *
 * Goal:
 * make the production welcome hero match the
 * large approved desktop preview much more closely.
 */

@media (min-width: 761px) {

    body {
        overflow-x: hidden !important;
    }

    /*
     * The old outer card was constraining the hero.
     * Make ONLY the first welcome card much wider.
     */
    main.shell > section.card:first-of-type {
        position: relative !important;

        left: 50% !important;
        transform: translateX(-50%) !important;

        width: min(
            1500px,
            calc(100vw - 48px)
        ) !important;

        max-width: none !important;

        margin:
            16px 0 28px !important;

        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        overflow: visible !important;
    }

    /*
     * Approved horizontal hero.
     * Display substantially closer to source resolution,
     * which also makes the raster text look sharper.
     */
    #gtVoiceGuide[lang="ru-RU"] {
        position: relative !important;

        width: 100% !important;
        max-width: none !important;

        aspect-ratio:
            1672 / 941 !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius:
            24px !important;

        overflow: hidden !important;

        background-size:
            100% 100% !important;

        background-position:
            center top !important;

        background-repeat:
            no-repeat !important;

        /*
         * Prevent accidental effects inherited
         * from experiments.
         */
        filter: none !important;
    }

    /*
     * Keep controls compact like the approved preview.
     */
    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-controls {
        left: auto !important;

        right: 1.5% !important;
        bottom: 2.4% !important;

        width: auto !important;
        max-width: none !important;

        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 7px !important;

        padding: 8px !important;

        border-radius: 15px !important;
    }

    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-controls button {
        width: auto !important;

        min-width: 0 !important;
        max-width: none !important;

        min-height: 38px !important;

        flex: 0 0 auto !important;

        padding:
            8px 12px !important;

        margin: 0 !important;

        font-size:
            13px !important;

        line-height:
            1 !important;

        white-space:
            nowrap !important;
    }

    #gtVoiceGuide[lang="ru-RU"]
    #gtVoicePrimary {
        min-width:
            135px !important;
    }
}

/* END GT_DESKTOP_WELCOME_PREVIEW_SIZE_V7 */

/* BEGIN GT_DESKTOP_WELCOME_V8_LIFT */

/*
 * DESKTOP ONLY.
 * Mobile <= 760px remains unchanged.
 *
 * V8:
 * - move hero upward
 * - remove unnecessary top air
 * - raise Play/Pause/Repeat
 * - make controls slightly larger
 */

@media (min-width: 761px) {

    /*
     * Remove extra vertical space above
     * the first welcome hero.
     */
    main.shell {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    main.shell > section.card:first-of-type {
        margin-top: -30px !important;
        margin-bottom: 24px !important;
    }

    /*
     * Hero itself stays at approved V7 size.
     */
    #gtVoiceGuide[lang="ru-RU"] {
        margin-top: 0 !important;
    }

    /*
     * Raise controls so all three buttons
     * are visible on the first laptop screen.
     */
    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-controls {
        right: 1.6% !important;
        bottom: 5.2% !important;

        gap: 8px !important;

        padding: 9px !important;

        border-radius: 16px !important;
    }

    /*
     * Slightly larger buttons.
     */
    #gtVoiceGuide[lang="ru-RU"]
    .gt-voice-guide-controls button {
        min-height: 44px !important;

        padding:
            10px 15px !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        border-radius: 11px !important;
    }

    #gtVoiceGuide[lang="ru-RU"]
    #gtVoicePrimary {
        min-width: 150px !important;
    }

    #gtVoiceGuide[lang="ru-RU"]
    #gtVoicePause {
        min-width: 88px !important;
    }

    #gtVoiceGuide[lang="ru-RU"]
    #gtVoiceRepeat {
        min-width: 112px !important;
    }
}

/* END GT_DESKTOP_WELCOME_V8_LIFT */