:root {
    --help-color-primary: #2f7ef7;
    --help-color-primary-deep: #1557c8;
    --help-color-primary-soft: #eaf2ff;
    --help-color-hero-start: #135dd8;
    --help-color-hero-end: #2d8cff;
    --help-color-surface: #ffffff;
    --help-color-background: #f5f8fd;
    --help-color-text: #18233a;
    --help-color-text-muted: #68758c;
    --help-color-border: #dce5f2;
    --help-color-border-strong: #c8d6e8;
    --help-color-focus: #7bb0ff;
    --help-color-text-body: #46536a;
    --help-color-placeholder: #8b96a9;
    --help-color-code-background: #eef3fa;
    --help-color-code-text: #263853;
    --help-color-white-90: rgba(255, 255, 255, 0.9);
    --help-color-white-84: rgba(255, 255, 255, 0.84);
    --help-color-white-76: rgba(255, 255, 255, 0.76);
    --help-color-white-72: rgba(255, 255, 255, 0.72);
    --help-color-white-64: rgba(255, 255, 255, 0.64);
    --help-color-white-16: rgba(255, 255, 255, 0.16);
    --help-color-hero-glow: rgba(112, 190, 255, 0.22);
    --help-color-hero-shade: rgba(9, 51, 120, 0.1);
    --help-color-focus-ring: rgba(123, 176, 255, 0.26);
    --help-color-empty-surface: rgba(255, 255, 255, 0.72);
    --help-shadow-search: 0 18px 50px rgba(15, 64, 136, 0.24);
    --help-shadow-card: 0 10px 30px rgba(31, 59, 99, 0.07);
    --help-shadow-card-open: 0 18px 42px rgba(31, 78, 145, 0.12);
    --help-radius-small: 10px;
    --help-radius-medium: 16px;
    --help-radius-large: 24px;
    --help-space-1: 4px;
    --help-space-2: 8px;
    --help-space-3: 12px;
    --help-space-4: 16px;
    --help-space-5: 20px;
    --help-space-6: 24px;
    --help-space-8: 32px;
    --help-space-10: 40px;
    --help-space-12: 48px;
    --help-space-16: 64px;
    --help-content-width: 1120px;
    --help-reading-width: 920px;
    --help-font-size-xs: 12px;
    --help-font-size-sm: 13px;
    --help-font-size-caption: 14px;
    --help-font-size-body: 15px;
    --help-font-size-control: 16px;
    --help-font-size-lead: 17px;
    --help-font-size-subheading: 18px;
    --help-font-size-rich-heading: 21px;
    --help-font-size-empty-icon: 22px;
    --help-font-size-code: 0.92em;
    --help-font-size-hero: clamp(36px, 6vw, 56px);
    --help-font-size-section: clamp(28px, 4vw, 36px);
    --help-font-size-hero-mobile: 34px;
}

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

html,
body {
    min-block-size: 100%;
}

body {
    margin: 0;
    color: var(--help-color-text);
    background: var(--help-color-background);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--help-font-size-control);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
input {
    font: inherit;
}

a {
    color: inherit;
}

[hidden] {
    display: none;
}

.help-page {
    display: flex;
    min-block-size: 100vh;
    flex-direction: column;
    overflow: hidden;
}

.help-page main {
    flex: 1;
}

.help-shell {
    inline-size: min(100% - (var(--help-space-6) * 2), var(--help-content-width));
    margin-inline: auto;
}

.help-shell--content {
    max-inline-size: var(--help-reading-width);
}

.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.help-header {
    position: relative;
    z-index: 2;
    border-block-end: 1px solid var(--help-color-white-16);
    background: var(--help-color-hero-start);
    color: var(--help-color-surface);
}

.help-header__inner {
    display: flex;
    min-block-size: 76px;
    align-items: center;
    justify-content: space-between;
    gap: var(--help-space-6);
}

.help-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--help-space-3);
    color: var(--help-color-surface);
    text-decoration: none;
}

.help-brand:focus-visible,
.help-header__home:focus-visible,
.help-footer a:focus-visible,
.faq__title:focus-visible {
    outline: 3px solid var(--help-color-focus);
    outline-offset: 4px;
}

.help-brand__logo {
    display: block;
    inline-size: 44px;
    block-size: 44px;
    border: 3px solid var(--help-color-white-64);
    border-radius: 50%;
    background: var(--help-color-surface);
}

.help-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.help-brand__text strong {
    font-size: var(--help-font-size-lead);
    font-weight: 750;
    letter-spacing: 0.01em;
}

.help-brand__text span {
    color: var(--help-color-white-76);
    font-size: var(--help-font-size-xs);
}

.help-header__home {
    display: inline-flex;
    align-items: center;
    gap: var(--help-space-2);
    color: var(--help-color-white-90);
    font-size: var(--help-font-size-caption);
    font-weight: 650;
    text-decoration: none;
}

.help-header__home svg {
    inline-size: 20px;
    block-size: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.help-header__home:hover svg {
    transform: translateX(var(--help-space-1));
}

.help-hero {
    position: relative;
    min-block-size: 350px;
    background:
        radial-gradient(circle at 12% 15%, var(--help-color-white-16), transparent 28%),
        radial-gradient(circle at 88% 30%, var(--help-color-hero-glow), transparent 30%),
        linear-gradient(135deg, var(--help-color-hero-start), var(--help-color-hero-end));
    color: var(--help-color-surface);
}

.help-hero::after {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 64px;
    background: linear-gradient(to bottom, transparent, var(--help-color-hero-shade));
    content: "";
    pointer-events: none;
}

.help-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    padding-block: var(--help-space-12) var(--help-space-16);
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.help-kicker {
    margin: 0 0 var(--help-space-3);
    color: var(--help-color-white-72);
    font-size: var(--help-font-size-xs);
    font-weight: 750;
    letter-spacing: 0.16em;
}

.help-kicker--dark {
    margin-block-end: var(--help-space-2);
    color: var(--help-color-primary);
}

.help-hero h1 {
    margin: 0;
    font-size: var(--help-font-size-hero);
    font-weight: 780;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.help-hero__description {
    max-inline-size: 620px;
    margin: var(--help-space-4) 0 0;
    color: var(--help-color-white-84);
    font-size: var(--help-font-size-lead);
}

.help-search {
    position: relative;
    display: none;
    inline-size: min(100%, 720px);
    margin-block-start: var(--help-space-8);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--help-space-3);
    border: 1px solid var(--help-color-white-64);
    border-radius: var(--help-radius-medium);
    background: var(--help-color-surface);
    box-shadow: var(--help-shadow-search);
    color: var(--help-color-text);
}

.js .help-search {
    display: grid;
}

.help-search:focus-within {
    border-color: var(--help-color-focus);
    outline: 4px solid var(--help-color-focus-ring);
}

.help-search__icon {
    inline-size: 23px;
    block-size: 23px;
    margin-inline-start: var(--help-space-5);
    fill: none;
    stroke: var(--help-color-primary);
    stroke-linecap: round;
    stroke-width: 1.8;
}

.help-search__input {
    min-inline-size: 0;
    padding-block: var(--help-space-5);
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--help-color-text);
    font-size: var(--help-font-size-control);
}

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

.help-search__input:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.help-search__hint {
    margin-inline-end: var(--help-space-3);
    padding: var(--help-space-2) var(--help-space-4);
    border-radius: var(--help-radius-small);
    background: var(--help-color-primary-soft);
    color: var(--help-color-primary-deep);
    font-size: var(--help-font-size-sm);
    font-weight: 700;
}

.faqs {
    padding-block: var(--help-space-16);
}

.faqs__header {
    display: flex;
    margin-block-end: var(--help-space-8);
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--help-space-6);
}

.faqs__title {
    margin: 0;
    color: var(--help-color-text);
    font-size: var(--help-font-size-section);
    font-weight: 760;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.faqs__count {
    margin: 0 0 var(--help-space-1);
    color: var(--help-color-text-muted);
    font-size: var(--help-font-size-caption);
    white-space: nowrap;
}

.faqs__list {
    display: grid;
    gap: var(--help-space-4);
}

.faq {
    overflow: clip;
    border: 1px solid var(--help-color-border);
    border-radius: var(--help-radius-medium);
    background: var(--help-color-surface);
    box-shadow: var(--help-shadow-card);
}

.faq[open] {
    border-color: var(--help-color-border-strong);
    box-shadow: var(--help-shadow-card-open);
}

.faq__title {
    display: grid;
    min-block-size: 76px;
    padding: var(--help-space-5) var(--help-space-6);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--help-space-5);
    color: var(--help-color-text);
    cursor: pointer;
    font-size: var(--help-font-size-lead);
    font-weight: 680;
    line-height: 1.45;
    list-style: none;
}

.faq__title::-webkit-details-marker {
    display: none;
}

.faq__title:hover {
    color: var(--help-color-primary-deep);
}

.faq__toggle {
    position: relative;
    display: grid;
    inline-size: 32px;
    block-size: 32px;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: var(--help-color-primary-soft);
}

.faq__toggle::before,
.faq__toggle::after {
    position: absolute;
    inline-size: 12px;
    block-size: 2px;
    border-radius: 2px;
    background: var(--help-color-primary);
    content: "";
}

.faq__toggle::after {
    transform: rotate(90deg);
}

.faq[open] .faq__toggle {
    transform: rotate(180deg);
    background: var(--help-color-primary);
}

.faq[open] .faq__toggle::before,
.faq[open] .faq__toggle::after {
    background: var(--help-color-surface);
}

.faq[open] .faq__toggle::after {
    transform: rotate(180deg);
}

.faq__text {
    padding: 0 var(--help-space-6) var(--help-space-8);
    border-block-start: 1px solid var(--help-color-border);
    color: var(--help-color-text-body);
    font-size: var(--help-font-size-body);
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.faq__text::before {
    display: block;
    block-size: var(--help-space-5);
    content: "";
}

.faq__text > :first-child {
    margin-block-start: 0;
}

.faq__text > :last-child {
    margin-block-end: 0;
}

.faq__text :where(p, ul, ol, blockquote, pre, table, figure) {
    margin-block: 0 var(--help-space-4);
}

.faq__text :where(h1, h2, h3, h4, h5, h6) {
    margin-block: var(--help-space-6) var(--help-space-3);
    color: var(--help-color-text);
    font-family: inherit;
    font-weight: 720;
    line-height: 1.4;
}

.faq__text :where(h1, h2) {
    font-size: var(--help-font-size-rich-heading);
}

.faq__text :where(h3, h4, h5, h6) {
    font-size: var(--help-font-size-lead);
}

.faq__text :where(ul, ol) {
    padding-inline-start: var(--help-space-6);
}

.faq__text li + li {
    margin-block-start: var(--help-space-2);
}

.faq__text a {
    color: var(--help-color-primary-deep);
    font-weight: 620;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.faq__text a:hover {
    text-decoration-thickness: 2px;
}

.faq__text :where(img, video, iframe) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    margin-block: var(--help-space-5);
    border-radius: var(--help-radius-small);
}

.faq__text iframe {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.faq__text table {
    display: block;
    max-inline-size: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.faq__text :where(th, td) {
    padding: var(--help-space-2) var(--help-space-3);
    border: 1px solid var(--help-color-border);
    text-align: start;
    white-space: nowrap;
}

.faq__text th {
    background: var(--help-color-primary-soft);
    color: var(--help-color-text);
}

.faq__text :where(code, pre) {
    border-radius: var(--help-radius-small);
    background: var(--help-color-code-background);
    color: var(--help-color-code-text);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.faq__text code {
    padding: 0.15em 0.4em;
    font-size: var(--help-font-size-code);
}

.faq__text pre {
    padding: var(--help-space-4);
    overflow-x: auto;
}

.faq__text pre code {
    padding: 0;
}

.faq__text blockquote {
    padding: var(--help-space-3) var(--help-space-4);
    border-inline-start: 4px solid var(--help-color-primary);
    border-radius: 0 var(--help-radius-small) var(--help-radius-small) 0;
    background: var(--help-color-primary-soft);
}

.help-empty {
    padding: var(--help-space-12) var(--help-space-6);
    border: 1px dashed var(--help-color-border-strong);
    border-radius: var(--help-radius-medium);
    background: var(--help-color-empty-surface);
    color: var(--help-color-text-muted);
    text-align: center;
}

.help-empty__icon {
    display: grid;
    inline-size: 48px;
    block-size: 48px;
    margin: 0 auto var(--help-space-4);
    place-items: center;
    border-radius: 50%;
    background: var(--help-color-primary-soft);
    color: var(--help-color-primary);
    font-size: var(--help-font-size-empty-icon);
    font-weight: 750;
}

.help-empty h3 {
    margin: 0;
    color: var(--help-color-text);
    font-size: var(--help-font-size-subheading);
}

.help-empty p {
    margin: var(--help-space-2) 0 0;
}

.help-footer {
    border-block-start: 1px solid var(--help-color-border);
    background: var(--help-color-surface);
    color: var(--help-color-text-muted);
    font-size: var(--help-font-size-sm);
}

.help-footer__inner {
    display: flex;
    min-block-size: 82px;
    align-items: center;
    justify-content: space-between;
    gap: var(--help-space-5);
}

.help-footer a {
    color: var(--help-color-primary-deep);
    font-weight: 650;
    text-decoration: none;
}

@media (max-width: 767px) {
    .help-shell {
        inline-size: min(100% - (var(--help-space-5) * 2), var(--help-content-width));
    }

    .help-header__inner {
        min-block-size: 68px;
    }

    .help-brand__logo {
        inline-size: 40px;
        block-size: 40px;
    }

    .help-header__home span {
        display: none;
    }

    .help-hero {
        min-block-size: 330px;
    }

    .help-hero__inner {
        padding-block: var(--help-space-10) var(--help-space-12);
    }

    .help-hero__description {
        font-size: var(--help-font-size-body);
    }

    .help-search {
        margin-block-start: var(--help-space-6);
        border-radius: var(--help-radius-small);
    }

    .help-search__input {
        padding-block: var(--help-space-4);
    }

    .help-search__hint {
        display: none;
    }

    .faqs {
        padding-block: var(--help-space-10);
    }

    .faqs__header {
        margin-block-end: var(--help-space-6);
        align-items: flex-start;
        flex-direction: column;
        gap: var(--help-space-3);
    }

    .faqs__count {
        margin: 0;
    }

    .faq__title {
        min-block-size: 70px;
        padding: var(--help-space-4) var(--help-space-5);
        gap: var(--help-space-4);
        font-size: var(--help-font-size-control);
    }

    .faq__toggle {
        inline-size: 30px;
        block-size: 30px;
    }

    .faq__text {
        padding: 0 var(--help-space-5) var(--help-space-6);
        font-size: var(--help-font-size-caption);
    }

    .help-footer__inner {
        padding-block: var(--help-space-5);
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: var(--help-space-2);
    }
}

@media (max-width: 420px) {
    .help-brand__text strong {
        max-inline-size: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .help-hero h1 {
        font-size: var(--help-font-size-hero-mobile);
    }

    .help-search__icon {
        margin-inline-start: var(--help-space-4);
    }

    .faq__title {
        padding-inline: var(--help-space-4);
    }

    .faq__text {
        padding-inline: var(--help-space-4);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .help-header__home svg,
    .faq__toggle {
        transition: transform 180ms ease;
    }
}