/* Zuzana Help Center
   Self-contained stylesheet for the generated static help centers.
   The brand color is injected per site as --brand on :root (inline in <head>);
   every tint and shade is derived here with color-mix so one variable
   restyles the whole site. Dark mode follows the visitor's system theme. */

:root {
    --brand: #4f46e5;

    --brand-soft: color-mix(in srgb, var(--brand), transparent 92%);
    --brand-softer: color-mix(in srgb, var(--brand), transparent 96%);
    --brand-border: color-mix(in srgb, var(--brand), transparent 75%);
    --brand-strong: color-mix(in srgb, var(--brand), black 15%);
    --brand-text: color-mix(in srgb, var(--brand), black 22%);
    --brand-contrast: #ffffff;

    --bg: #ffffff;
    --bg-soft: #f7f7f8;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --border: #e7e7ea;
    --border-strong: #d5d5da;
    --text: #17171c;
    --text-secondary: #55555e;
    --text-muted: #8b8b95;
    --shadow-sm: 0 1px 2px rgb(23 23 28 / 0.05);
    --shadow-md: 0 4px 16px rgb(23 23 28 / 0.07), 0 1px 3px rgb(23 23 28 / 0.05);
    --shadow-lg: 0 12px 40px rgb(23 23 28 / 0.12), 0 2px 8px rgb(23 23 28 / 0.06);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    --font: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand-soft: color-mix(in srgb, var(--brand), transparent 85%);
        --brand-softer: color-mix(in srgb, var(--brand), transparent 92%);
        --brand-border: color-mix(in srgb, var(--brand), transparent 60%);
        --brand-text: color-mix(in srgb, var(--brand), white 30%);

        --bg: #101014;
        --bg-soft: #17171c;
        --surface: #1b1b21;
        --surface-raised: #212127;
        --border: #2b2b33;
        --border-strong: #3a3a44;
        --text: #f4f4f6;
        --text-secondary: #b6b6bf;
        --text-muted: #7d7d88;
        --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
        --shadow-md: 0 4px 16px rgb(0 0 0 / 0.45);
        --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.55);
    }
}

/* ---------- Reset & base ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.hc-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

.hc-container--narrow { max-width: 760px; }

/* ---------- Header ---------- */

.hc-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg), transparent 15%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.hc-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 64px;
}

.hc-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-weight: 600;
    font-size: 17px;
    min-width: 0;
}

.hc-brand:hover { text-decoration: none; }

.hc-brand__logo {
    height: 30px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

/* Optional dark-mode logo: swap the two <img>s on the visitor's theme. Only
   present when the team uploaded a dark-mode logo; otherwise a single logo
   renders with no modifier class and these rules don't apply. */
.hc-brand__logo--dark { display: none; }

@media (prefers-color-scheme: dark) {
    .hc-brand__logo--light { display: none; }
    .hc-brand__logo--dark { display: block; }
}

.hc-brand__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hc-header__nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Compact search living in the header on every page but the front page,
   where the hero search is the star. */

.hc-header__search {
    flex: 1;
    min-width: 0;
    max-width: 460px;
}

/* Scoped under the header wrapper so this beats the base `.hc-search`
   margin (defined later in the file at equal specificity), which would
   otherwise push the box below the header's vertical center. */
.hc-header__search .hc-search--header { margin: 0; max-width: none; }

.hc-search--header .hc-search__box {
    gap: 8px;
    padding: 2px 10px 2px 14px;
    background: var(--bg-soft);
    box-shadow: none;
}

.hc-search--header .hc-search__box:focus-within {
    background: var(--surface-raised);
    border-color: var(--brand-border);
    box-shadow: 0 0 0 4px var(--brand-softer);
}

.hc-search--header .hc-search__icon { width: 16px; height: 16px; }
.hc-search--header .hc-search__input { padding: 7px 0; font-size: 14.5px; }
.hc-search--header .hc-search__submit { display: none; }

.hc-header__link {
    color: var(--text-secondary);
    font-size: 14.5px;
    font-weight: 500;
}

.hc-header__link:hover { color: var(--text); text-decoration: none; }

.hc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border: none;
    border-radius: 999px;
    background: var(--brand);
    color: var(--brand-contrast);
    font-size: 14.5px;
    font-weight: 600;
    transition: filter 0.15s ease, transform 0.1s ease;
}

.hc-btn:hover { filter: brightness(1.08); text-decoration: none; }
.hc-btn:active { transform: scale(0.98); }
.hc-btn:disabled { opacity: 0.55; cursor: default; }

.hc-btn--ghost {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text);
}

.hc-btn--ghost:hover { filter: none; background: var(--bg-soft); }

/* ---------- Hero + search ---------- */

.hc-hero {
    position: relative;
    padding: 76px 0 60px;
    background:
        radial-gradient(760px 340px at 12% -120px, var(--brand-softer), transparent 70%),
        radial-gradient(1000px 440px at 50% -160px, var(--brand-soft), transparent 72%),
        radial-gradient(640px 300px at 88% -100px, var(--brand-softer), transparent 70%),
        var(--bg);
    border-bottom: 1px solid var(--border);
}

.hc-hero__eyebrow {
    display: table;
    margin: 0 auto 18px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hc-hero__title {
    margin: 0 0 12px;
    text-align: center;
    font-size: clamp(34px, 5.5vw, 54px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.hc-accent {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.06em;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--brand);
}

.hc-hero__subtitle {
    margin: 0 auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: 17px;
    max-width: 520px;
}

.hc-search {
    position: relative;
    max-width: 640px;
    margin: 32px auto 0;
}

.hc-search__box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 6px 20px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hc-search__box:focus-within {
    border-color: var(--brand-border);
    box-shadow: var(--shadow-lg), 0 0 0 4px var(--brand-softer);
}

.hc-search__icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.hc-search__input {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: var(--text);
}

.hc-search__input::placeholder { color: var(--text-muted); }
.hc-search__input:focus { outline: none; }

.hc-search__submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: var(--brand);
    color: var(--brand-contrast);
    transition: filter 0.15s ease;
}

.hc-search__submit:hover { filter: brightness(1.08); }
.hc-search__submit svg { width: 17px; height: 17px; }

/* Cmd/Ctrl+K hint. site.js fills the label and unhides it on fine-pointer
   devices; it steps aside while typing. */

.hc-search__kbd {
    flex-shrink: 0;
    padding: 2px 7px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.hc-search__kbd[hidden] { display: none; }
.hc-search__box:focus-within .hc-search__kbd { display: none; }

/* Search results dropdown */

.hc-search__results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
}

.hc-search__results[hidden] { display: none; }

.hc-search__result {
    display: block;
    padding: 12px 18px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.hc-search__result:last-child { border-bottom: none; }

.hc-search__result:hover,
.hc-search__result.is-active {
    background: var(--brand-softer);
    text-decoration: none;
}

.hc-search__result-title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
}

.hc-search__result-title mark {
    background: transparent;
    color: var(--brand);
}

.hc-search__result-meta {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
}

.hc-search__result--ask {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand);
    font-weight: 600;
    font-size: 14.5px;
}

.hc-search__result--ask svg { width: 17px; height: 17px; flex-shrink: 0; }

.hc-search__empty {
    padding: 16px 18px;
    font-size: 14.5px;
    color: var(--text-muted);
}

/* Suggestion chips */

.hc-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.hc-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    background: var(--brand-softer);
    color: var(--brand-text);
    font-size: 13.5px;
    font-weight: 500;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.hc-chip:hover {
    border-color: var(--brand);
    color: var(--brand-contrast);
    background: var(--brand);
    text-decoration: none;
}

/* ---------- Sections ---------- */

.hc-section { padding: 48px 0; }

.hc-section__title {
    margin: 0 0 24px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Topic grid */

.hc-topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.hc-topic-card {
    display: flex;
    gap: 16px;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.hc-topic-card:hover {
    border-color: var(--brand-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
}

.hc-topic-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--brand-soft);
    color: var(--brand);
    transition: background 0.15s ease, color 0.15s ease;
}

.hc-topic-card:hover .hc-topic-card__icon {
    background: var(--brand);
    color: var(--brand-contrast);
}

.hc-topic-card__icon svg { width: 21px; height: 21px; }

.hc-topic-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.hc-topic-card__description {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hc-topic-card__count {
    margin-top: 8px;
    display: inline-block;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Popular list */

.hc-popular { display: flex; flex-direction: column; gap: 8px; }

.hc-popular__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hc-popular__item:hover {
    border-color: var(--brand-border);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.hc-popular__index {
    flex-shrink: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 17px;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
    min-width: 26px;
}

.hc-popular__title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hc-popular__arrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

/* Help CTA card. Painted in the actual brand color (not a darkened mix), so
   it reads as the site's primary color; the buttons flip to white on brand. */

.hc-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 44px 28px;
    background: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand), black 12%);
    border-radius: var(--radius-xl);
}

.hc-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(480px 240px at 50% -80px, rgb(255 255 255 / 0.16), transparent 72%);
    pointer-events: none;
}

.hc-cta > * { position: relative; }

.hc-cta__title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--brand-contrast); letter-spacing: -0.01em; }

.hc-cta__text {
    margin: 0 0 20px;
    color: color-mix(in srgb, var(--brand-contrast), transparent 25%);
    font-size: 15px;
    max-width: 420px;
}

.hc-cta .hc-btn {
    background: #ffffff;
    color: color-mix(in srgb, var(--brand), black 20%);
}

.hc-cta .hc-btn:hover { filter: none; background: rgb(255 255 255 / 0.9); }

.hc-cta .hc-btn--ghost {
    background: rgb(255 255 255 / 0.06);
    border-color: rgb(255 255 255 / 0.4);
    color: var(--brand-contrast);
}

.hc-cta .hc-btn--ghost:hover { background: rgb(255 255 255 / 0.16); }

.hc-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- Topic & article pages ---------- */

.hc-page { padding: 40px 0 64px; }

.hc-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    font-size: 14px;
    color: var(--text-muted);
}

.hc-breadcrumbs a { color: var(--text-secondary); }
.hc-breadcrumbs a:hover { color: var(--text); text-decoration: none; }
.hc-breadcrumbs__sep { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

.hc-page__layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

/* Article pages with an outline get a third column. The body column is capped
   either way so long-form copy never stretches past a comfortable measure, and
   the wider gutters keep the copy clear of both menus. */
.hc-page__layout--toc { grid-template-columns: 260px minmax(0, 1fr) 216px; gap: 72px; }

.hc-page__layout > article { max-width: 860px; }

.hc-sidenav {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hc-sidenav__heading {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.hc-sidenav__link {
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14.5px;
    font-weight: 500;
}

.hc-sidenav__link:hover {
    color: var(--text);
    background: var(--bg-soft);
    text-decoration: none;
}

.hc-sidenav__link.is-active {
    color: var(--brand);
    background: var(--brand-softer);
}

/* Articles of the current section, nested under its menu entry */

.hc-sidenav__articles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 10px 12px;
    padding-left: 10px;
    border-left: 1px solid var(--border);
}

.hc-sidenav__sublink {
    display: flex;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13.5px;
}

.hc-sidenav__sublink:hover {
    color: var(--text);
    background: var(--bg-soft);
    text-decoration: none;
}

.hc-sidenav__sublink.is-active {
    color: var(--brand);
    background: var(--brand-softer);
    font-weight: 500;
}

.hc-sidenav__num {
    flex-shrink: 0;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.hc-sidenav__sublink.is-active .hc-sidenav__num { color: var(--brand); }

/* ---------- "On this page" outline ---------- */

.hc-toc {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.hc-toc__heading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.hc-toc__icon { width: 14px; height: 14px; flex-shrink: 0; }

.hc-toc__list { display: flex; flex-direction: column; }

.hc-toc__link {
    padding: 5px 0 5px 14px;
    border-left: 2px solid var(--border);
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.45;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.hc-toc__link:hover { color: var(--text); border-left-color: var(--border-strong); text-decoration: none; }

.hc-toc__link--h3 { padding-left: 26px; font-size: 13px; }

.hc-toc__link.is-active {
    color: var(--brand);
    border-left-color: var(--brand);
    font-weight: 500;
}

/* Clears the sticky header when jumping to an anchor. */
.hc-prose h2, .hc-prose h3 { scroll-margin-top: 96px; }

.hc-topic-header { margin-bottom: 28px; }

.hc-topic-header__title {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hc-topic-header__description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 16px;
}

.hc-article-list { display: flex; flex-direction: column; gap: 8px; }

.hc-article-list__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hc-article-list__item:hover {
    border-color: var(--brand-border);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.hc-article-list__body { flex: 1; min-width: 0; }

.hc-article-list__title { font-size: 15.5px; font-weight: 600; line-height: 1.4; }

.hc-article-list__summary {
    margin-top: 2px;
    font-size: 14px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Article content */

.hc-article__title {
    margin: 0 0 24px;
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hc-article__meta {
    margin: 32px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13.5px;
    color: var(--text-muted);
}

.hc-prose { font-size: 16px; line-height: 1.75; color: var(--text); }

.hc-prose > :first-child { margin-top: 0; }

.hc-prose h1, .hc-prose h2, .hc-prose h3, .hc-prose h4 {
    margin: 1.6em 0 0.6em;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.hc-prose h1 { font-size: 24px; }
.hc-prose h2 { font-size: 21px; }
.hc-prose h3 { font-size: 18px; }
.hc-prose h4 { font-size: 16px; }

.hc-prose p { margin: 0 0 1.1em; }

.hc-prose ul, .hc-prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.hc-prose li { margin-bottom: 0.35em; }

.hc-prose img {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin: 1.4em 0;
}

/* The editor wraps an uploaded image in <figure>, which the browser indents by
   40px on each side by default, so images sat narrower than the surrounding
   copy. Align them with the text column instead, and let the figure own the
   vertical rhythm so the image inside it does not add a second margin. */

.hc-prose figure {
    margin: 1.4em 0;
}

.hc-prose figure img {
    margin: 0;
}

.hc-prose figure a,
.hc-prose figure a:hover {
    display: block;
    text-decoration: none;
}

.hc-prose figcaption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
}

/* Videos are embedded by address. The 16:9 box holds its place before the
   poster loads, so the page does not jump, and letterboxes other shapes. */

.hc-prose .hc-video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #000;
}

/* The player site.js builds around an article video: a play button over the
   poster, then a floating bar that shows while paused or while the pointer
   moves. Controls sit on the video, so they keep their own dark scheme in
   both themes and take only the accent from the brand. */

.hc-player {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: #fff;
    -webkit-user-select: none;
    user-select: none;
}

/* No dark backdrop: the rounded clip anti-aliases, and anything dark
   behind the video showed through as a line along the bottom edge. Cover
   rather than letterbox, since the video takes its own shape once loaded. */
.hc-prose .hc-player video {
    border: 0;
    border-radius: 0;
    background: transparent;
    object-fit: cover;
    cursor: pointer;
}

.hc-player:fullscreen { border: 0; border-radius: 0; }

.hc-player:fullscreen video { height: 100%; aspect-ratio: auto; }

.hc-player__button {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color .15s;
}

.hc-player__button:hover { background: rgb(255 255 255 / 0.16); }

.hc-player__button:focus-visible,
.hc-player__seek:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.hc-player__button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hc-player__button .hc-player__solid { fill: currentColor; stroke: none; }

.hc-player__button[aria-pressed="false"] { color: rgb(255 255 255 / 0.55); }

.hc-player__start {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    background: #fff;
    color: var(--brand);
    box-shadow: var(--shadow-lg);
    transition: transform .15s;
}

.hc-player__start:hover { background: #fff; transform: scale(1.06); }

.hc-player__start svg { width: 32px; height: 32px; }

.hc-player.is-started:not(.is-ended) .hc-player__start { display: none; }

.hc-player__bar {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgb(17 17 20 / 0.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 13px;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}

.hc-player.is-started.is-paused:not(.is-ended) .hc-player__bar,
.hc-player.is-started.is-active .hc-player__bar,
.hc-player.is-seeking .hc-player__bar,
.hc-player.is-playing .hc-player__bar:hover,
.hc-player__bar:focus-within {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.hc-player__time {
    min-width: 76px;
    padding-left: 2px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hc-player__seek {
    position: relative;
    flex: 1;
    height: 4px;
    margin: 0 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.28);
    cursor: pointer;
    touch-action: none;
    transition: height .15s;
}

/* A taller hit area than the 4px line. */
.hc-player__seek::before { content: ''; position: absolute; inset: -12px 0; }

.hc-player__seek:hover,
.hc-player.is-seeking .hc-player__seek { height: 6px; }

.hc-player__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--brand), white 35%);
}

.hc-player__knob {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transition: opacity .15s;
}

.hc-player__seek:hover .hc-player__knob,
.hc-player__seek:focus-visible .hc-player__knob,
.hc-player.is-seeking .hc-player__knob { opacity: 1; }

.hc-player__caption {
    position: absolute;
    left: 50%;
    bottom: 72px;
    max-width: 80%;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: rgb(17 17 20 / 0.72);
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    white-space: pre-line;
    transform: translateX(-50%);
    pointer-events: none;
    transition: bottom .2s;
}

.hc-player__caption:empty { display: none; }

.hc-player__line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgb(255 255 255 / 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.hc-player__line span {
    position: absolute;
    inset: 0 auto 0 0;
    background: color-mix(in srgb, var(--brand), white 35%);
}

.hc-player.is-playing:not(.is-active):not(.is-seeking):not(:focus-within) .hc-player__line { opacity: 1; }

/* With the bar tucked away the caption drops to where it was. */
.hc-player.is-playing:not(.is-active):not(.is-seeking):not(:focus-within) .hc-player__caption { bottom: 20px; }

.hc-player:fullscreen .hc-player__caption { font-size: 22px; }

@media (max-width: 640px) {
    .hc-player__start { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
    .hc-player__start svg { width: 26px; height: 26px; }
    .hc-player__bar { left: 8px; right: 8px; bottom: 8px; gap: 2px; height: 40px; padding: 0 4px; }
    .hc-player__time { min-width: 0; font-size: 12px; }
    .hc-player__caption { bottom: 60px; max-width: 90%; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .hc-player *,
    .hc-player__bar,
    .hc-player__line { transition: none; }
}

/* The editor writes the figure inside a paragraph; the browser closes that
   paragraph early and leaves empty ones around the image. Without this they
   add a stray gap above and below every image. */

.hc-prose p:empty {
    display: none;
}

.hc-prose blockquote {
    margin: 1.4em 0;
    padding: 4px 20px;
    border-left: 3px solid var(--brand-border);
    color: var(--text-secondary);
}

.hc-prose code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    font-size: 0.9em;
}

.hc-prose pre {
    padding: 16px 20px;
    border-radius: var(--radius-md);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    overflow-x: auto;
}

.hc-prose pre code { padding: 0; border: none; background: transparent; }

.hc-prose table {
    width: 100%;
    margin: 1.4em 0;
    border-collapse: collapse;
    font-size: 15px;
}

.hc-prose th, .hc-prose td {
    padding: 10px 14px;
    border: 1px solid var(--border);
    text-align: left;
}

.hc-prose th { background: var(--bg-soft); font-weight: 600; }

.hc-prose hr {
    margin: 2em 0;
    border: none;
    border-top: 1px solid var(--border);
}

/* Previous/next pager (sections with sequential navigation) */

.hc-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 40px;
}

.hc-pager__link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hc-pager__link:hover {
    border-color: var(--brand-border);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.hc-pager__link--next { align-items: flex-end; text-align: right; }

.hc-pager__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.hc-pager__label svg { width: 13px; height: 13px; }

.hc-pager__title { font-size: 14.5px; font-weight: 600; }

.hc-pager__link:hover .hc-pager__title { color: var(--brand); }

/* Feedback */

.hc-feedback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
    padding: 24px 28px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.hc-feedback__question { margin: 0 0 14px; font-size: 15.5px; font-weight: 600; }

.hc-feedback__actions { display: flex; justify-content: center; gap: 10px; }

.hc-feedback__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 22px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 14.5px;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hc-feedback__btn:hover { border-color: var(--brand-border); background: var(--brand-softer); }
.hc-feedback__btn svg { width: 16px; height: 16px; }

.hc-feedback__response { margin: 0; font-size: 14.5px; color: var(--text-secondary); }

.hc-feedback__response .hc-cta__actions { margin-top: 14px; }

/* Related articles */

.hc-related { margin-top: 40px; }

.hc-related__title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
}

.hc-related__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hc-related__list a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14.5px;
    padding: 6px 0;
}

.hc-related__list a:hover { color: var(--brand); text-decoration: none; }
.hc-related__list svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); }

/* ---------- Contact page ---------- */

.hc-contact-card {
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.hc-form { display: flex; flex-direction: column; gap: 18px; }

.hc-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.hc-field { display: flex; flex-direction: column; gap: 6px; }

.hc-field label { font-size: 14px; font-weight: 600; }

.hc-field input,
.hc-field textarea,
.hc-field select {
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg);
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hc-field input:focus,
.hc-field textarea:focus,
.hc-field select:focus {
    outline: none;
    border-color: var(--brand-border);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.hc-field textarea { resize: vertical; min-height: 140px; }

.hc-field__error { font-size: 13px; color: #dc2626; }

.hc-form__footer { display: flex; align-items: center; justify-content: flex-end; }

.hc-form__error {
    margin: 0;
    font-size: 14px;
    color: #dc2626;
    flex: 1;
}

/* Deflection suggestions */

.hc-deflect {
    padding: 16px 18px;
    background: var(--brand-softer);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
}

.hc-deflect[hidden] { display: none; }

.hc-deflect__title {
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand-strong);
}

.hc-deflect__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hc-deflect__list a { font-size: 14px; font-weight: 500; }

/* Success state */

.hc-success { text-align: center; padding: 40px 20px; }

.hc-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
}

.hc-success__icon svg { width: 26px; height: 26px; }
.hc-success__title { margin: 0 0 6px; font-size: 21px; font-weight: 700; }
.hc-success__text { margin: 0; color: var(--text-secondary); font-size: 15px; }

/* ---------- Footer ---------- */

.hc-footer {
    border-top: 1px solid var(--border);
    padding: 28px 0;
    margin-top: 24px;
}

.hc-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.hc-footer__links { display: flex; flex-wrap: wrap; gap: 18px; }

.hc-footer__links a { color: var(--text-muted); font-size: 13.5px; }
.hc-footer__links a:hover { color: var(--text-secondary); }

.hc-footer__powered { font-size: 13px; color: var(--text-muted); }
.hc-footer__powered a { color: var(--text-muted); font-weight: 600; }

/* ---------- Responsive ---------- */

/* Below this the third column squeezes the article body, so the outline goes
   before the menu does: it is a convenience, the menu is navigation. */
@media (max-width: 1080px) {
    .hc-page__layout--toc { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; }
    .hc-toc { display: none; }
}

@media (max-width: 860px) {
    .hc-page__layout { grid-template-columns: 1fr; gap: 32px; }
    .hc-sidenav { display: none; }
}

@media (max-width: 640px) {
    .hc-hero { padding: 48px 0 40px; }
    .hc-section { padding: 36px 0; }
    .hc-form__row { grid-template-columns: 1fr; }
    .hc-header__link { display: none; }
    .hc-container { padding: 0 18px; }
    .hc-pager { grid-template-columns: 1fr; }
    .hc-pager__link--next { align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

/* ---------- Image lightbox ---------- */

.hc-lightbox-trigger { cursor: zoom-in; }

.hc-lightbox-open { overflow: hidden; }

.hc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 24px 32px;
    background: rgb(10 10 14 / 0.82);
    cursor: zoom-out;
}

.hc-lightbox[hidden] { display: none; }

.hc-lightbox__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    max-height: 100%;
}

.hc-lightbox__image {
    max-width: min(1400px, 94vw);
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: var(--shadow-lg);
    cursor: default;
}

.hc-lightbox__caption {
    max-width: min(760px, 90vw);
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: rgb(255 255 255 / 0.82);
}

.hc-lightbox__caption[hidden] { display: none; }

.hc-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    color: #ffffff;
    background: rgb(255 255 255 / 0.12);
    border: 1px solid rgb(255 255 255 / 0.22);
    border-radius: 999px;
    cursor: pointer;
}

.hc-lightbox__close:hover { background: rgb(255 255 255 / 0.22); }

.hc-lightbox__close:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .hc-lightbox { padding: 56px 12px 20px; }
    .hc-lightbox__image { max-height: 74vh; }
}

/* Recursive helpcenter navigation and automatic landing-page directories. */
.hc-nav-group > summary { display: flex; align-items: center; cursor: pointer; }
.hc-nav-group > summary::before { content: '›'; margin-right: 7px; color: var(--hc-muted, #888); }
.hc-nav-group[open] > summary::before { transform: rotate(90deg); }
.hc-nav-group > summary .hc-sidenav__link { flex: 1; }
.hc-nav-group .hc-sidenav__articles { margin-left: 9px; padding-left: 12px; border-left: 1px solid rgba(128,128,128,.18); }
.hc-directory { margin-top: 28px; }

/* Shared by the article editor and generated help centers. The saved HTML is
   a semantic ordered list, so the instructions also work without this CSS. */
ol[data-type="steps"] {
    list-style: none;
    counter-reset: article-step;
    padding: 0;
    margin: 1.75rem 0;
}
ol[data-type="steps"] > li[data-type="step"] {
    counter-increment: article-step;
    position: relative;
    list-style: none;
    padding: 0 0 1.75rem 3.25rem;
    margin: 0;
    min-height: 3rem;
}
ol[data-type="steps"] > li[data-type="step"]::before {
    content: counter(article-step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 50%;
    background: var(--surface, #f9fafb);
    color: var(--text, #374151);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
}
ol[data-type="steps"] > li[data-type="step"]:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 1rem;
    top: 2.5rem;
    bottom: .5rem;
    width: 1px;
    background: var(--border, #e5e7eb);
}
ol[data-type="steps"] h3[data-type="step-title"] {
    margin: 0 0 .6rem;
    padding-top: .15rem;
    color: var(--text, inherit);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.7;
}
ol[data-type="steps"] [data-type="step-body"] > :first-child { margin-top: 0; }
ol[data-type="steps"] [data-type="step-body"] > :last-child { margin-bottom: 0; }
ol[data-type="steps"] > li[data-type="step"]:last-child { padding-bottom: .25rem; }