/* Refine the original blocks without replacing their type, palette or controls. */
#pb9 h2,
#pb10l h2 {
    line-height: 1.12;
}

#pb9 .w {
    display: grid;
    grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr);
    grid-template-areas: "intro reviews" "sources reviews";
    gap: 26px clamp(28px, 4vw, 52px);
    align-items: start;
}

#pb9 .hd {
    grid-area: intro;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 0;
}

#pb9 h2 {
    font-size: clamp(30px, 3.5vw, 44px);
}

#pb9 .rate {
    gap: 16px;
    padding: 16px 22px;
    border-radius: 24px;
}

#pb9 .rate-n { font-size: 42px; }
#pb9 .rate-l { font-size: 12px; }
#pb9 .rate-stars { gap: 4px; margin-bottom: 6px; }
#pb9 .rate-stars svg { width: 16px; height: 16px; }
#pb9 .grid { display: contents; }

#pb9 .card {
    grid-area: reviews;
    align-self: stretch;
    min-width: 0;
    padding: 22px;
    border-radius: 32px;
    box-shadow: 0 12px 40px rgba(10, 34, 38, .06);
}

#pb9 .card-hd { margin-bottom: 18px; gap: 12px; }
#pb9 .card-t { font-size: 17px; line-height: 1.4; }
#pb9 .badge { flex-shrink: 0; }
#pb9 .frame { height: clamp(580px, 48vw, 700px); min-height: 0; border-radius: 22px; }
#pb9 .frame iframe { min-height: 0; }
#pb9 .side { grid-area: sources; min-width: 0; gap: 12px; }
#pb9 .pl { min-height: 58px; padding: 16px 20px; border-radius: 22px; font-size: 15px; line-height: 1.4; }
#pb9 .pl-arr { width: 30px; height: 30px; border-radius: 50%; }
#pb9 .note { padding: 20px 22px; font-size: 14px; line-height: 1.7; border-radius: 24px; }

#pb10l .w { width: min(1240px, 100%); }
#pb10l .hd { align-items: center; gap: 24px 36px; margin-bottom: 32px; }
#pb10l .hd-l { flex: 1 1 540px; min-width: 0; }
#pb10l h2 { max-width: 740px; font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 14px; }
#pb10l .ey { margin-bottom: 16px; padding: 6px 13px 6px 9px; }
#pb10l .ey span { font-size: 11px; }
#pb10l .sub { max-width: 650px; font-size: 15px; line-height: 1.75; }
#pb10l .rev-btns { gap: 10px; }
#pb10l .rb { min-height: 44px; padding: 11px 18px; font-size: 13px; }

#pb10l .viewer {
    grid-template-columns: minmax(0, 1fr) 252px;
    gap: 18px;
    padding: 20px;
    border-radius: 32px;
    background: linear-gradient(145deg, #f5fdff, #eefcfe);
    border-color: rgba(34, 221, 243, .26);
    box-shadow: 0 12px 38px rgba(10, 34, 38, .055);
}

#pb10l .vw-main {
    height: 540px;
    min-height: 0;
    border-radius: 24px;
    border: 1px solid rgba(34, 221, 243, .2);
    background: #fff;
    padding: 20px 20px 64px;
}

#pb10l .vw-main img { object-position: center; filter: drop-shadow(0 5px 10px rgba(10, 34, 38, .08)); }
#pb10l .vw-zoom { top: auto; left: auto; right: 16px; bottom: 14px; transform: none; opacity: 1; width: auto; height: 40px; padding: 0 14px; gap: 8px; border-radius: 999px; background: #eefcfe; border: 1px solid rgba(34, 221, 243, .3); box-shadow: none; }
#pb10l .vw-zoom::after { content: "Увеличить"; font: 900 13px "Nunito", sans-serif; color: var(--cdd); }
#pb10l .vw-zoom svg { width: 16px; height: 16px; stroke: var(--cd); }
#pb10l .vw-counter { bottom: 14px; left: 16px; transform: none; display: flex; align-items: center; height: 40px; padding: 0 14px; background: #eefcfe; color: var(--cdd); font-size: 13px; }

#pb10l .vw-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 12px;
    height: 540px;
    max-height: 540px;
    padding: 4px;
    overflow-y: auto;
}

#pb10l .vw-th.p,
#pb10l .vw-th.l { aspect-ratio: auto; min-width: 0; min-height: 0; border-radius: 16px; }
#pb10l .vw-th img { height: 100%; padding: 7px; object-fit: contain; object-position: center; }
#pb10l .vw-th:hover { transform: none; }
#pb10l .vw-th.active { border-color: var(--cd); box-shadow: 0 0 0 2px rgba(34, 221, 243, .25); }
#pb10l .vw-th.active::after { border-radius: 12px; background: rgba(34, 221, 243, .04); }
#pb10l .vw-th-n { bottom: 7px; right: 7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(6, 125, 140, .88); color: #fff; font-size: 11px; text-shadow: none; }
#pb10l .vw-nav { gap: 14px; margin-top: 20px; }
#pb10l .vw-arr { width: 44px; height: 44px; }
#pb10l .vw-dots { gap: 2px; }
#pb10l .vw-dot,
#pb10l .vw-dot.on { display: grid; place-items: center; width: 24px; height: 36px; background: transparent; transform: none; }
#pb10l .vw-dot::after { content: ""; width: 7px; height: 7px; border-radius: 99px; background: rgba(34, 221, 243, .28); transition: width .18s, background .18s; }
#pb10l .vw-dot.on::after { width: 20px; background: var(--cd); }
#pb10l .caption { margin-top: 18px; font-size: 13px; line-height: 1.65; }
#pb9 a:focus-visible { outline: 3px solid var(--cdd); outline-offset: 4px; }
#pb10l .vw-th:focus-visible { outline-offset: -5px; }

@media (max-width: 980px) {
    #pb9 .w { display: block; }
    #pb9 .hd { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
    #pb9 .hd > div:first-child { flex: 1 1 450px; }
    #pb9 .grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
    #pb9 .card, #pb9 .side { grid-area: auto; }
    #pb9 .frame { height: 580px; flex: auto; }
    #pb9 .side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #pb9 .pl { padding: 15px; font-size: 14px; }
    #pb9 .note { grid-column: 1 / -1; }
    #pb10l .viewer { grid-template-columns: minmax(0, 1fr) 216px; padding: 16px; gap: 14px; }
    #pb10l .hd-l { flex-basis: 460px; }
}

@media (max-width: 780px) {
    #pb10l .hd { align-items: stretch; }
    #pb10l .hd-l { flex-basis: auto; }
    #pb10l .rev-btns { flex-direction: row; flex-wrap: wrap; gap: 10px; }
    #pb10l .viewer { grid-template-columns: minmax(0, 1fr); border-radius: 28px; }
    #pb10l .vw-main { height: clamp(360px, 65vh, 520px); padding: 16px 16px 64px; border-radius: 20px; }
    #pb10l .vw-strip { display: flex; flex-direction: row; height: auto; max-height: none; padding: 6px 4px 10px; gap: 12px; overflow-x: auto; overflow-y: hidden; }
    #pb10l .vw-th.p, #pb10l .vw-th.l { width: 88px; flex: 0 0 88px; height: 118px; }
    #pb10l .vw-th.l { width: 138px; flex-basis: 138px; }
}

@media (max-width: 600px) {
    #pb9 .w, #pb10l .w { padding-inline: 18px; }
    #pb9 .hd { gap: 20px; }
    #pb9 .rate { padding: 14px 18px; }
    #pb9 .side { grid-template-columns: minmax(0, 1fr); }
    #pb9 .card { padding: 14px; border-radius: 26px; }
    #pb9 .card-hd { flex-wrap: wrap; margin-bottom: 14px; }
    #pb9 .frame { height: 550px; border-radius: 18px; }
    #pb9 .note { padding: 18px; }
    #pb10l .hd { gap: 22px; }
    #pb10l .sub { font-size: 14px; line-height: 1.7; }
    #pb10l .viewer { padding: 12px; gap: 8px; border-radius: 26px; }
    #pb10l .rb { padding: 10px 14px; font-size: 12px; }
    #pb10l .vw-nav { gap: 8px; }
    #pb10l .vw-main { padding-inline: 12px; }
    #pb10l .caption { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    #pb10l .vw-dot::after { transition: none; }
}

/* Preserve the original studio design and improve its proportions. */
#pb11 {
    padding-top: clamp(28px, 4vw, 52px);
}

#pb11 .w {
    width: min(1240px, 100%);
    padding-inline: clamp(20px, 4vw, 52px);
}

#pb11 .card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(28px, 4vw, 52px);
    padding: clamp(28px, 4vw, 50px);
    border-radius: 36px;
    border-color: rgba(34, 221, 243, .26);
    background:
        radial-gradient(ellipse 460px 280px at 100% 0%, rgba(255, 209, 102, .18), transparent 66%),
        radial-gradient(ellipse 500px 340px at 0% 100%, rgba(34, 221, 243, .15), transparent 68%),
        linear-gradient(145deg, #f8ffff, #eafbfe);
    box-shadow: 0 18px 48px rgba(10, 80, 90, .07);
}

#pb11 .card > div {
    min-width: 0;
}

#pb11 .card::before {
    right: 0;
    bottom: -18px;
    opacity: .085;
}

#pb11 .ey {
    margin-bottom: 18px;
    padding: 7px 14px 7px 10px;
}

#pb11 h2 {
    max-width: 590px;
    margin-bottom: 18px;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
}

#pb11 .sub {
    max-width: 510px;
    margin-bottom: 26px;
    color: #507a85;
    font-size: 16px;
    line-height: 1.7;
}

#pb11 .btns {
    align-items: center;
    gap: 12px;
}

#pb11 .b {
    min-height: 50px;
    justify-content: center;
    padding: 14px 22px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

#pb11 .b-main {
    box-shadow: 0 8px 22px rgba(12, 164, 181, .21);
}

#pb11 .b-tel {
    border-color: rgba(12, 164, 181, .22);
    background: rgba(255, 255, 255, .94);
    white-space: nowrap;
}

#pb11 .b:focus-visible {
    outline: 3px solid #067d8c;
    outline-offset: 4px;
}

#pb11 .timer {
    width: 100%;
    max-width: 390px;
    justify-self: center;
}

#pb11 .timer-l {
    max-width: 340px;
    margin: 0 auto 22px;
    color: #507a85;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: .06em;
}

#pb11 .digits {
    gap: 12px;
}

#pb11 .dg {
    flex: 1 1 0;
    min-width: 0;
    max-width: 110px;
    padding: 21px 10px 17px;
    border-radius: 25px;
    border-color: rgba(34, 221, 243, .24);
    background: linear-gradient(160deg, #fff, #faffff);
    box-shadow: 0 8px 24px rgba(10, 80, 90, .055);
}

#pb11 .dg b {
    font-size: clamp(36px, 4vw, 48px);
    line-height: 1.08;
}

#pb11 .dg span {
    margin-top: 9px;
    color: #507a85;
    font-size: 11px;
    line-height: 1.4;
}

#pb11 .timer-note {
    max-width: 350px;
    margin: 20px auto 0;
    color: #507a85;
    font-size: 13px;
    line-height: 1.6;
}

#pb13 {
    padding-top: clamp(40px, 5.5vw, 72px);
}

#pb13 .w {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(32px, 5vw, 68px);
    padding-inline: clamp(20px, 4vw, 52px);
    padding-bottom: clamp(44px, 6vw, 76px);
}

#pb13 .w > div {
    min-width: 0;
}

#pb13 .ey {
    margin-bottom: 20px;
    padding: 7px 14px 7px 10px;
}

#pb13 h2 {
    margin-bottom: 22px;
    font-size: clamp(30px, 3.5vw, 46px);
    line-height: 1.13;
    text-wrap: balance;
}

#pb13 .txt {
    max-width: 590px;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.75;
}

#pb13 .txt-m {
    max-width: 570px;
    margin-bottom: 26px;
    color: #507a85;
    font-size: 15px;
    line-height: 1.7;
}

#pb13 .marks {
    align-items: center;
    gap: 10px;
}

#pb13 .mk {
    max-width: 100%;
    min-height: 40px;
    gap: 9px;
    padding: 10px 14px;
    border-color: rgba(34, 221, 243, .22);
    box-shadow: 0 3px 10px rgba(10, 80, 90, .035);
    font-size: 12.5px;
    line-height: 1.5;
}

#pb13 .mk svg {
    width: 16px;
    height: 16px;
}

#pb13 .nums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}

#pb13 .num {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 156px;
    padding: 28px 24px;
    border-radius: 30px;
    border-color: rgba(34, 221, 243, .24);
    background: linear-gradient(145deg, #fff 60%, #f4fdfe);
    box-shadow: 0 8px 26px rgba(10, 80, 90, .045);
}

#pb13 .num:hover {
    box-shadow: 0 14px 32px rgba(12, 164, 181, .12);
}

#pb13 .num b {
    position: relative;
    z-index: 1;
    font-size: clamp(34px, 3.7vw, 46px);
    line-height: 1.05;
    letter-spacing: -.025em;
    white-space: nowrap;
}

#pb13 .num > span {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    color: #507a85;
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: .045em;
}

#pb13 .num b > [data-cnt] {
    display: inline;
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-transform: none;
}

@media (max-width: 1060px) {
    #pb11 .card {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: 28px;
    }

    #pb11 .btns {
        align-items: flex-start;
    }

    #pb13 .w {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
    }

    #pb13 .nums {
        gap: 12px;
    }

    #pb13 .num {
        min-height: 148px;
        padding: 24px 20px;
    }
}

@media (max-width: 900px) {
    #pb13 .w {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    #pb13 .txt,
    #pb13 .txt-m {
        max-width: 700px;
    }

    #pb13 .nums {
        gap: 16px;
    }

    #pb13 .num {
        min-height: 144px;
        padding: 26px;
    }
}

@media (max-width: 860px) {
    #pb11 .card {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    #pb11 h2 {
        max-width: 620px;
    }

    #pb11 .sub {
        max-width: 620px;
    }

    #pb11 .timer {
        max-width: 430px;
        padding-top: 28px;
        border-top: 1px solid rgba(12, 164, 181, .16);
    }

    #pb11 .timer-l {
        max-width: 390px;
        margin-bottom: 18px;
    }

    #pb11 .dg {
        max-width: 116px;
    }

    #pb11 .dg b {
        font-size: 46px;
    }
}

@media (max-width: 540px) {
    #pb11 .w,
    #pb13 .w {
        padding-inline: 18px;
    }

    #pb11 .card {
        padding: 27px 22px;
        gap: 26px;
        border-radius: 30px;
    }

    #pb11 h2 {
        font-size: clamp(27px, 7vw, 34px);
        line-height: 1.14;
    }

    #pb11 .sub {
        margin-bottom: 22px;
        font-size: 15px;
        line-height: 1.7;
    }

    #pb11 .btns {
        gap: 10px;
    }

    #pb11 .b {
        width: 100%;
        min-height: 49px;
        padding: 13px 15px;
    }

    #pb11 .timer {
        padding-top: 24px;
    }

    #pb11 .timer-l {
        font-size: 11px;
    }

    #pb11 .digits {
        gap: 10px;
    }

    #pb11 .dg {
        padding: 17px 6px 14px;
        border-radius: 21px;
    }

    #pb11 .dg b {
        font-size: clamp(32px, 8.5vw, 42px);
    }

    #pb11 .dg span {
        margin-top: 7px;
        font-size: 10px;
    }

    #pb11 .timer-note {
        margin-top: 16px;
        font-size: 12px;
    }

    #pb13 h2 {
        margin-bottom: 20px;
        font-size: clamp(29px, 7.6vw, 36px);
    }

    #pb13 .txt {
        font-size: 15px;
        line-height: 1.75;
    }

    #pb13 .txt-m {
        font-size: 14px;
        line-height: 1.75;
    }

    #pb13 .marks {
        gap: 8px;
    }

    #pb13 .mk {
        min-height: 38px;
        padding: 9px 12px;
        font-size: 12px;
    }

    #pb13 .nums {
        gap: 12px;
    }

    #pb13 .num {
        min-height: 148px;
        padding: 22px 18px;
        border-radius: 25px;
    }

    #pb13 .num b {
        font-size: clamp(30px, 8vw, 40px);
    }

    #pb13 .num > span {
        margin-top: 10px;
        font-size: 11px;
        line-height: 1.55;
        letter-spacing: .035em;
    }
}

@media (max-width: 360px) {
    #pb11 .card {
        padding-inline: 18px;
    }

    #pb13 .nums {
        gap: 10px;
    }

    #pb13 .num {
        padding: 20px 13px;
    }

    #pb13 .num b {
        font-size: 29px;
    }
}
