.ug {
    --ug-primary:      #0282DA;
    --ug-primary-dark: #0268ae;
    --ug-primary-soft: #F0F6FB;
    --ug-dark:         #3c4858;
    --ug-black:        #161c2d;
    --ug-muted:        #8492a6;
    --ug-light:        #f8f9fc;
    --ug-line:         #e9ecef;
    --ug-white:        #ffffff;

    --ug-success:      #2eca8b;
    --ug-warning:      #f17425;

    --ug-radius:       14px;
    --ug-radius-sm:    9px;
    --ug-shadow:       0 1px 2px rgba(60, 72, 88, .05), 0 6px 18px rgba(60, 72, 88, .06);
    --ug-shadow-lg:    0 10px 25px rgba(60, 72, 88, .15);

    --ug-header:       75px;
    --ug-toolbar:      69px;

    font-family: 'Nunito', sans-serif;
    color: var(--ug-dark);
}

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

.ug .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.ug-hero {
    background:
        radial-gradient(1100px 380px at 78% -12%, rgba(2, 130, 218, .13), transparent 62%),
        linear-gradient(180deg, var(--ug-light) 0%, var(--ug-white) 100%);
    padding: 130px 0 62px;
    border-bottom: 1px solid var(--ug-line);
}

.ug-hero__inner { max-width: 760px; }

.ug-hero__eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 13px;
    border-radius: 100px;
    background: var(--ug-primary-soft);
    color: var(--ug-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ug-hero__title {
    margin: 0 0 16px;
    font-size: 42px;
    line-height: 1.16;
    font-weight: 700;
    color: var(--ug-black);
    letter-spacing: -.015em;
}

.ug-hero__subtitle {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 1.72;
    color: var(--ug-muted);
}

.ug-hero__meta { margin: 0; }

.ug-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border: 1px solid var(--ug-line);
    border-radius: 100px;
    background: var(--ug-white);
    font-size: 13px;
    color: var(--ug-muted);
}

.ug-hero__pill strong { color: var(--ug-dark); font-weight: 600; }

.ug-toolbar {
    position: sticky;
    top: var(--ug-header);
    z-index: 30;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ug-line);
}

.ug-toolbar__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--ug-toolbar);
    padding: 11px 0;
}

.ug-toolbar__contents {
    display: none;
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    border: 1px solid var(--ug-line);
    border-radius: var(--ug-radius-sm);
    background: var(--ug-white);
    color: var(--ug-dark);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.ug-burger { display: inline-flex; flex-direction: column; gap: 3px; }
.ug-burger span {
    display: block;
    width: 15px; height: 2px;
    border-radius: 2px;
    background: var(--ug-primary);
}

.ug-search { position: relative; flex: 1 1 auto; max-width: 420px; }

.ug-search__icon {
    position: absolute;
    inset-inline-start: 13px;
    top: 50%;
    width: 17px; height: 17px;
    transform: translateY(-50%);
    color: var(--ug-muted);
    pointer-events: none;
}

.ug-search__input {
    width: 100%;
    padding: 11px 15px;
    padding-inline-start: 40px;
    border: 1px solid var(--ug-line);
    border-radius: var(--ug-radius-sm);
    background: var(--ug-white);
    font-family: inherit;
    font-size: 14px;
    color: var(--ug-dark);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.ug-search__input::placeholder { color: var(--ug-muted); }

.ug-search__input:focus {
    outline: none;
    border-color: var(--ug-primary);
    box-shadow: 0 0 0 3px rgba(2, 130, 218, .13);
}

.ug-search__reset {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--ug-line);
    color: var(--ug-dark);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.ug-search__reset[hidden] { display: none; }

.ug-filter-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 12px;
    border-radius: 100px;
    background: var(--ug-primary-soft);
    color: var(--ug-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.ug-filter-note[hidden] { display: none; }
.ug-filter-note .ug-link-btn { font-size: 12.5px; color: var(--ug-primary-dark); }

mark.ug-highlight {
    background: #FFF3CD;
    color: #664D03;
    text-decoration: underline;
    text-decoration-color: #E9A800;
    text-underline-offset: 2px;
    border-radius: 2px;
    padding: 0 1px;
}

.ug-platform {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--ug-line);
    border-radius: 100px;
    background: var(--ug-light);
}

.ug-platform--toolbar { margin-inline-start: auto; }

.ug-platform__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: var(--ug-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.ug-platform__icon {
    display: inline-flex;
    align-items: center;
    color: currentColor;
}

.ug-platform__icon .ug-icon { width: 15px; height: 15px; }

.ug-platform__btn.is-active {
    background: var(--ug-white);
    color: var(--ug-primary);
    box-shadow: 0 1px 3px rgba(60, 72, 88, .16);
}

.ug-platform--inline {
    display: inline-flex;
    margin-bottom: 14px;
}

.ug-platform--inline .ug-platform__btn { padding: 6px 13px; font-size: 12px; }
.ug-platform--inline .ug-platform__icon .ug-icon { width: 14px; height: 14px; }

.ug-body { padding: 20px 0 48px; }

.ug-layout {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 52px;
    align-items: start;
}

.ug-sidebar {
    position: sticky;
    top: calc(var(--ug-header) + var(--ug-toolbar) + 22px);
    transform: translateX(0);
}

.ug-nav {
    max-height: calc(100vh - var(--ug-header) - var(--ug-toolbar) - 20px);
    overflow-y: auto;
    padding-inline-end: 6px;
    scrollbar-width: thin;
}

.ug-nav::-webkit-scrollbar { width: 5px; }
.ug-nav::-webkit-scrollbar-thumb { background: var(--ug-line); border-radius: 4px; }

.ug-nav__head { display: none; }

.ug-nav__title {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ug-muted);
}

.ug-nav__list { margin: 0; padding: 0; list-style: none; counter-reset: ug-ch; }

.ug-nav__item { margin-bottom: 2px; }

.ug-nav__link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: var(--ug-radius-sm);
    color: var(--ug-dark);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}

.ug-nav__link:hover { background: var(--ug-light); color: var(--ug-primary); }

.ug-nav__link.is-current { background: var(--ug-primary-soft); color: var(--ug-primary); }

.ug-nav__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--ug-muted);
}

.ug-nav__link:hover .ug-nav__icon,
.ug-nav__link.is-current .ug-nav__icon { color: var(--ug-primary); }

.ug-icon { width: 17px; height: 17px; }

.ug-nav__label { line-height: 1.35; }

.ug-nav__sub {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s ease, opacity .22s ease;
}

.ug-nav__link.is-current + .ug-nav__sub { max-height: 620px; opacity: 1; }

.ug.is-searching .ug-nav__sub { max-height: none; opacity: 1; }

.ug-nav__item[hidden],
.ug-nav__sub li[hidden] { display: none !important; }

.ug-nav__sub a {
    display: block;
    padding: 6px 12px;
    margin-inline-start: 27px;
    border-inline-start: 2px solid var(--ug-line);
    color: var(--ug-muted);
    font-size: 13px;
    line-height: 1.45;
    text-decoration: none;
    transition: color .14s ease, border-color .14s ease;
}

.ug-nav__sub a:hover {
    color: var(--ug-primary);
    border-inline-start-color: var(--ug-primary);
}

.ug-nav__sub a.is-current {
    color: var(--ug-primary);
    font-weight: 700;
    background: var(--ug-primary-soft);
    border-inline-start-color: var(--ug-primary);
    border-start-end-radius: 6px;
    border-end-end-radius: 6px;
}

.ug-content { min-width: 0; }

.ug-chapter { scroll-margin-top: calc(var(--ug-header) + var(--ug-toolbar) + 22px); }
.ug-chapter + .ug-chapter { margin-top: 66px; }

.ug-chapter__head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 22px;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--ug-line);
}

.ug-chapter__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--ug-primary-soft);
    color: var(--ug-primary);
}

.ug-chapter__icon .ug-icon { width: 21px; height: 21px; }

.ug-chapter__title {
    margin: 0 0 6px;
    font-size: 30px;
    line-height: 1.24;
    font-weight: 700;
    color: var(--ug-black);
    letter-spacing: -.01em;
}

.ug-chapter__intro {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ug-muted);
}

.ug-topic { scroll-margin-top: calc(var(--ug-header) + var(--ug-toolbar) + 22px); }
.ug-topic + .ug-topic { margin-top: 38px; padding-top: 34px; border-top: 1px solid var(--ug-line); }

.ug-topic__title {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 15px;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--ug-black);
}

.ug-anchor {
    position: absolute;
    inset-inline-start: -22px;
    color: var(--ug-primary);
    font-weight: 700;
    text-decoration: none;
    opacity: 0;
    transition: opacity .14s ease;
}

.ug-topic__title:hover .ug-anchor { opacity: .55; }
.ug-anchor:hover, .ug-anchor:focus-visible { opacity: 1 !important; }

.ug-badge,
.ug-inline-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.ug-badge--pro,
.ug-inline-badge { background: #FFF4E0; color: #B26A00; }
.ug-badge--new     { background: #E4F7EE; color: #1B8A5F; }
.ug-badge--company { background: var(--ug-primary-soft); color: var(--ug-primary-dark); }

.ug-inline-badge { padding: 2px 7px; font-size: 10px; }

.ug-block + .ug-block { margin-top: 15px; }

.ug-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.78;
    color: var(--ug-dark);
}

.ug-text a, .ug-note a, .ug-table a, .ug-steps a { color: var(--ug-primary); text-decoration: underline; }
.ug-text a:hover, .ug-note a:hover, .ug-table a:hover, .ug-steps a:hover { color: var(--ug-primary-dark); }

.ug-block-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ug-black);
}

.ug-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ug-step;
}

.ug-steps li {
    position: relative;
    counter-increment: ug-step;
    padding-inline-start: 40px;
    padding-bottom: 15px;
    font-size: 15px;
    line-height: 1.72;
}

.ug-steps li::before {
    content: counter(ug-step);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--ug-primary-soft);
    color: var(--ug-primary);
    font-size: 12px;
    font-weight: 700;
}

.ug-steps li::after {
    content: '';
    position: absolute;
    inset-inline-start: 12.5px;
    top: 30px; bottom: 4px;
    width: 1px;
    background: var(--ug-line);
}

.ug-steps li:last-child { padding-bottom: 0; }
.ug-steps li:last-child::after { display: none; }

.ug-note {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--ug-radius-sm);
    border-inline-start: 3px solid var(--ug-primary);
    background: var(--ug-primary-soft);
}

.ug-note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.68;
    color: var(--ug-dark);
}

.ug-note__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 21px; height: 21px;
    border-radius: 50%;
    background: var(--ug-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.ug-note--warning { border-inline-start-color: var(--ug-warning); background: #FEF3EA; }
.ug-note--warning .ug-note__mark { background: var(--ug-warning); }

.ug-note--tip { border-inline-start-color: var(--ug-success); background: #E9F9F2; }
.ug-note--tip .ug-note__mark { background: var(--ug-success); }

.ug-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ug-line);
    border-radius: var(--ug-radius);
    -webkit-overflow-scrolling: touch;
}

.ug-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--ug-white);
}

.ug-table th,
.ug-table td {
    padding: 12px 16px;
    text-align: start;
    vertical-align: top;
    line-height: 1.62;
}

.ug-table thead th {
    background: var(--ug-light);
    color: var(--ug-black);
    font-weight: 700;
    white-space: nowrap;
}

.ug-table tbody tr + tr td { border-top: 1px solid var(--ug-line); }
.ug-table tbody tr:hover td { background: #fbfcfe; }
.ug-table td:first-child { color: var(--ug-black); font-weight: 600; }

.ug-video { margin: 0; }

.ug-video .ratio {
    overflow: hidden;
    border-radius: var(--ug-radius);
    background: var(--ug-black);
    box-shadow: var(--ug-shadow);
}

.ug-video iframe { border: 0; }

.ug-video figcaption {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ug-muted);
}

.ug[data-ug-platform-mode="web"]    [data-ug-platform="mobile"],
.ug[data-ug-platform-mode="mobile"] [data-ug-platform="web"] { display: none; }

.ug[data-ug-platform-mode="web"]    .ug-topic[data-ug-platform="mobile"],
.ug[data-ug-platform-mode="mobile"] .ug-topic[data-ug-platform="web"] { display: none; }

.ug-topic[hidden], .ug-chapter[hidden] { display: none !important; }

.ug-empty {
    padding: 34px;
    border: 1px dashed var(--ug-line);
    border-radius: var(--ug-radius);
    text-align: center;
    color: var(--ug-muted);
    font-size: 15px;
}

.ug-link-btn {
    border: 0;
    background: none;
    padding: 0;
    color: var(--ug-primary);
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.ug.is-searching .ug-chapter__intro { display: none; }

.ug-cta {
    margin-top: 66px;
    padding: 36px;
    border-radius: var(--ug-radius);
    background: linear-gradient(135deg, var(--ug-primary) 0%, var(--ug-primary-dark) 100%);
    color: #fff;
}

.ug-cta__title { margin: 0 0 8px; font-size: 24px; font-weight: 700; }
.ug-cta__text  { margin: 0 0 22px; font-size: 15px; line-height: 1.7; opacity: .92; }
.ug-cta__actions { display: flex; flex-wrap: wrap; gap: 11px; }

.ug-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
    border-radius: var(--ug-radius-sm);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .14s ease, background .14s ease;
}

.ug-btn:hover { transform: translateY(-1px); }
.ug-btn--primary { background: #fff; color: var(--ug-primary); }
.ug-btn--ghost { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .45); color: #fff; }
.ug-btn--ghost:hover { background: rgba(255, 255, 255, .22); }

.ug-toast {
    position: fixed;
    inset-block-end: 30px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 60;
    padding: 10px 20px;
    border-radius: 100px;
    background: var(--ug-black);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--ug-shadow-lg);
}

.ug-toast[hidden] { display: none; }

@media (max-width: 991.98px) {

    .ug-hero { padding: 108px 0 46px; }
    .ug-hero__title { font-size: 34px; }
    .ug-hero__subtitle { font-size: 16px; }

    .ug-toolbar__contents { display: inline-flex; }
    .ug-platform { margin-inline-start: 0; }

    .ug-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .ug-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 1050;
        width: min(320px, 86vw);
        background: var(--ug-white);
        box-shadow: var(--ug-shadow-lg);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .26s ease, visibility 0s linear .26s;
    }

    [dir="rtl"] .ug-sidebar { transform: translateX(100%); }

    .ug.nav-open .ug-sidebar,
    [dir="rtl"] .ug.nav-open .ug-sidebar {
        transform: translateX(0);
        visibility: visible;
        transition: transform .26s ease, visibility 0s;
    }

    .ug-nav {
        max-height: 100%;
        height: 100%;
        padding: 18px;
    }

    .ug-nav__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 14px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--ug-line);
    }

    .ug-nav__head .ug-nav__title { margin: 0; }

    .ug-nav__close {
        border: 0;
        background: none;
        color: var(--ug-muted);
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
    }

    .ug-nav__sub { max-height: none; opacity: 1; }

    .ug-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(22, 28, 45, .5);
    }

    .ug-nav-backdrop[hidden] { display: none; }

    .ug-chapter__title { font-size: 25px; }
    .ug-chapter + .ug-chapter { margin-top: 50px; }
    .ug-anchor { display: none; }
}

@media (max-width: 575.98px) {

    .ug-hero { padding: 96px 0 38px; }
    .ug-hero__title { font-size: 28px; }

    .ug-toolbar__inner { flex-wrap: wrap; gap: 8px; padding: 8px 0; min-height: 0; }
    .ug-search { order: 3; flex: 1 0 100%; max-width: none; }
    .ug-search__input { padding-block: 9px; }
    .ug-toolbar__contents, .ug-platform__btn { padding-block: 8px; }

    .ug-chapter__head { gap: 12px; }
    .ug-chapter__icon { width: 38px; height: 38px; border-radius: 10px; }
    .ug-chapter__title { font-size: 22px; }
    .ug-topic__title { font-size: 18px; }

    .ug-cta { padding: 26px; }
    .ug-cta__actions .ug-btn { flex: 1 0 100%; }
}

@media print {
    .ug-toolbar, .ug-sidebar, .ug-cta, .ug-video, .ug-nav-backdrop { display: none !important; }
    .ug-layout { display: block; }
    .ug-hero { padding: 0 0 20px; background: none; }
    .ug-topic, .ug-chapter { break-inside: avoid; }
}

.ug a:focus-visible,
.ug button:focus-visible,
.ug input:focus-visible {
    outline: 2px solid var(--ug-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .ug *, .ug *::before, .ug *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}