/*
 * Universal content modes. The widget itself lives outside [data-a11y-scope]
 * and is intentionally unaffected by these rules.
 */
html[data-a11y-active="true"] {
    --a11y-bg: #ffffff;
    --a11y-bg-rgb: 255, 255, 255;
    --a11y-veil: rgba(255, 255, 255, 0.82);
    /* mockup default line-height */
    --a11y-surface: #f2f2f2;
    --a11y-field-bg: #ffffff;
    --a11y-text: #111111;
    --a11y-muted: #404040;
    /* Схемы двухцветные: ссылки различаются подчёркиванием, а не цветом —
       иначе на «чёрном по белому» остаётся синий, и монохрома не выходит. */
    --a11y-link: var(--a11y-text);
    --a11y-visited: var(--a11y-text);
    --a11y-border: #595959;
    --a11y-focus: #a63d00;
    --a11y-focus-text: #ffffff;
    --a11y-error: #9c0006;
    --a11y-success: #006b2e;
    --a11y-selection-bg: #003f88;
    --a11y-selection-text: #ffffff;
    --a11y-font-size: 16px;
    --a11y-font-family: Arial, Helvetica, sans-serif;
    --a11y-line-height: 1.4;
    --a11y-letter-spacing: normal;
    --a11y-paragraph-spacing: 0.75em;
    color-scheme: light;
}

html[data-a11y-active="true"][data-a11y-theme="black"] {
    --a11y-bg: #000000;
    --a11y-bg-rgb: 0, 0, 0;
    --a11y-veil: rgba(0, 0, 0, 0.82);
    --a11y-surface: #202020;
    --a11y-field-bg: #101010;
    --a11y-text: #ffffff;
    --a11y-muted: #e0e0e0;
    --a11y-link: var(--a11y-text);
    --a11y-visited: var(--a11y-text);
    --a11y-border: #ffffff;
    --a11y-focus: #00e5ff;
    --a11y-focus-text: #000000;
    --a11y-error: #ff8a80;
    --a11y-success: #77ff77;
    --a11y-selection-bg: #ffea00;
    --a11y-selection-text: #000000;
    color-scheme: dark;
}

html[data-a11y-active="true"][data-a11y-theme="blue"] {
    --a11y-bg: #cce8ff;
    --a11y-bg-rgb: 204, 232, 255;
    --a11y-veil: rgba(204, 232, 255, 0.84);
    --a11y-surface: #b4dcfa;
    --a11y-field-bg: #eaf6ff;
    --a11y-text: #082b52;
    --a11y-muted: #244d73;
    --a11y-link: var(--a11y-text);
    --a11y-visited: var(--a11y-text);
    --a11y-border: #1b4e7a;
    --a11y-focus: #8a3000;
    --a11y-focus-text: #ffffff;
    --a11y-error: #8f161e;
    --a11y-success: #005f2f;
    --a11y-selection-bg: #082b52;
    --a11y-selection-text: #ffffff;
    color-scheme: light;
}

html[data-a11y-active="true"][data-a11y-theme="beige"] {
    --a11y-bg: #f5edcf;
    --a11y-bg-rgb: 245, 237, 207;
    --a11y-veil: rgba(245, 237, 207, 0.84);
    --a11y-surface: #e8dcae;
    --a11y-field-bg: #fffaf0;
    --a11y-text: #3b2b1a;
    --a11y-muted: #5b4935;
    --a11y-link: var(--a11y-text);
    --a11y-visited: var(--a11y-text);
    --a11y-border: #6b5135;
    --a11y-focus: #005fcc;
    --a11y-focus-text: #ffffff;
    --a11y-error: #8a1822;
    --a11y-success: #155d27;
    --a11y-selection-bg: #5e351b;
    --a11y-selection-text: #ffffff;
    color-scheme: light;
}

html[data-a11y-active="true"][data-a11y-font-scale="110"] {
    --a11y-font-size: 17.6px;
}

html[data-a11y-active="true"][data-a11y-font-scale="125"] {
    --a11y-font-size: 20px;
}

html[data-a11y-active="true"][data-a11y-font-scale="150"] {
    --a11y-font-size: 24px;
}

html[data-a11y-active="true"][data-a11y-font-scale="175"] {
    --a11y-font-size: 28px;
}

html[data-a11y-active="true"][data-a11y-font-scale="200"] {
    --a11y-font-size: 32px;
}

html[data-a11y-active="true"][data-a11y-font-scale="250"] {
    --a11y-font-size: 40px;
}

html[data-a11y-active="true"][data-a11y-font-family="serif"] {
    --a11y-font-family: Georgia, "Times New Roman", serif;
}

html[data-a11y-active="true"][data-a11y-line-height="medium"] {
    --a11y-line-height: 1.6;
}

html[data-a11y-active="true"][data-a11y-line-height="large"] {
    --a11y-line-height: 1.8;
}

html[data-a11y-active="true"][data-a11y-line-height="extraLarge"] {
    --a11y-line-height: 2;
}

html[data-a11y-active="true"][data-a11y-letter-spacing="medium"] {
    --a11y-letter-spacing: 0.04em;
}

html[data-a11y-active="true"][data-a11y-letter-spacing="large"] {
    --a11y-letter-spacing: 0.09em;
}

html[data-a11y-active="true"][data-a11y-paragraph-spacing="large"] {
    --a11y-paragraph-spacing: 1.5em;
}

html[data-a11y-active="true"] :where([data-a11y-scope]) {
    min-width: 0;
    background-color: var(--a11y-bg) !important;
    color: var(--a11y-text) !important;
    font-family: var(--a11y-font-family) !important;
    font-size: var(--a11y-font-size) !important;
    line-height: var(--a11y-line-height) !important;
    letter-spacing: var(--a11y-letter-spacing) !important;
    word-spacing: var(--a11y-word-spacing) !important;
}

/*
 * Legacy Bitrix templates frequently set colors inline. The limited !important
 * use below is deliberate: it is scoped, reversible and skips preserve markers.
 */
html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(header, footer, main, nav, section, article, aside, div, form, fieldset, details, summary, figure, figcaption, table, thead, tbody, tfoot, tr, th, td, blockquote, pre):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    border-color: var(--a11y-border) !important;
    color: var(--a11y-text) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, span, strong, b, em, i, label, legend, caption, time, address, small, cite, q, abbr):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    color: var(--a11y-text) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(p, li, dt, dd, span, strong, b, em, i, a, label, legend, caption, time, address, cite, q, abbr, button, input, textarea, select, option, summary, th, td):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-font]):not([data-a11y-preserve-font] *) {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

/*
 * Containers with hardcoded px font sizes (.form-label, .form-group, ...)
 * break the inherit chain from the scaled body: a label with
 * font-size:inherit then picks up the container's small px value. Structural
 * containers must pass the scale through; text elements above set the rest.
 */
html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(div, section, article, aside, nav, header, footer, main, form, fieldset, figure, figcaption, details, dl, ul, ol, table, thead, tbody, tfoot, tr):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-font]):not([data-a11y-preserve-font] *) {
    font-size: inherit !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, label, legend, caption, th, td, a, span):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    overflow-wrap: anywhere;
    word-break: normal;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(h1, h2, h3, h4, h5, h6):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-font]):not([data-a11y-preserve-font] *) {
    margin-block: 0.75em 0.45em;
    font-family: inherit !important;
    line-height: 1.25 !important;
    letter-spacing: inherit !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope]) h1:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-font]):not([data-a11y-preserve-font] *) {
    font-size: 2em !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope]) h2:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-font]):not([data-a11y-preserve-font] *) {
    font-size: 1.65em !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope]) h3:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-font]):not([data-a11y-preserve-font] *) {
    font-size: 1.4em !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope]) :where(h4, h5, h6):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-font]):not([data-a11y-preserve-font] *) {
    font-size: 1.2em !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope]) small:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-font]):not([data-a11y-preserve-font] *) {
    font-size: 0.875em !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(p, ul, ol, dl, blockquote, figure):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    margin-block-start: 0;
    margin-block-end: var(--a11y-paragraph-spacing) !important;
}

html[data-a11y-active="true"][data-a11y-text-align="left"] :where([data-a11y-scope])
    :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, th, td):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    text-align: left !important;
}

html[data-a11y-active="true"][data-a11y-content-width="limited"] :where([data-a11y-scope])
    :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figcaption, [data-a11y-text]):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    max-inline-size: 72ch !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(a:link):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    color: var(--a11y-link) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(a:visited):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    color: var(--a11y-visited) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    a:link:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *)
    :where(span, strong, b, em, i):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    color: var(--a11y-link) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    a:visited:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *)
    :where(span, strong, b, em, i):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    color: var(--a11y-visited) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(a:hover, a:focus-visible):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    background-color: var(--a11y-surface) !important;
    color: var(--a11y-link) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(a:active):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    background-color: var(--a11y-link) !important;
    color: var(--a11y-bg) !important;
}

html[data-a11y-active="true"][data-a11y-underline-links="true"] :where([data-a11y-scope])
    a[href]:not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    text-decoration: underline !important;
    text-decoration-thickness: 0.12em !important;
    text-underline-offset: 0.18em !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(button, input, textarea, select):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    box-sizing: border-box;
    max-inline-size: 100%;
    border: 2px solid var(--a11y-border) !important;
    border-radius: 0.25em;
    background: var(--a11y-field-bg) !important;
    color: var(--a11y-text) !important;
    caret-color: var(--a11y-text);
    accent-color: var(--a11y-link);
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    min-block-size: 44px;
    padding: 0.45em 0.8em;
    background: var(--a11y-surface) !important;
    font-weight: 700;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(input::placeholder, textarea::placeholder) {
    color: var(--a11y-muted) !important;
    opacity: 1;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where([disabled], [aria-disabled="true"]):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    cursor: not-allowed !important;
    opacity: 0.65 !important;
}

html[data-a11y-active="true"][data-a11y-strong-focus="true"] :where([data-a11y-scope])
    :where(a[href], button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):not([data-a11y-preserve]):not([data-a11y-preserve] *):focus-visible {
    outline: 4px solid var(--a11y-focus) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 2px var(--a11y-bg) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    [aria-invalid="true"]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *),
html[data-a11y-active="true"] :where([data-a11y-scope])
    [data-a11y-state="error"]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    border-color: var(--a11y-error) !important;
    color: var(--a11y-error) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    [role="alert"]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *),
html[data-a11y-active="true"] :where([data-a11y-scope])
    [data-a11y-state="error"]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    color: var(--a11y-error) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    [role="status"]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *),
html[data-a11y-active="true"] :where([data-a11y-scope])
    [data-a11y-state="success"]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    color: var(--a11y-success) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(table, th, td, hr):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    border-color: var(--a11y-border) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(blockquote, pre, code, kbd, samp):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    background-color: var(--a11y-surface) !important;
    color: var(--a11y-text) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope]) ::selection {
    background: var(--a11y-selection-bg);
    color: var(--a11y-selection-text);
}

/*
 * Black-and-white mode applies to MEDIA only, never to the document root:
 * a root-level filter would also desaturate the colour scheme itself, and the
 * GOST schemes (yellow on black and so on) depend on their colours. Background
 * images on arbitrary blocks cannot be selected in CSS — mark them with
 * data-a11y-image="decorative" to have them covered too.
 */
html[data-a11y-active="true"][data-a11y-images="grayscale"] :where([data-a11y-scope])
    :where(img, picture, video, canvas, svg, object, embed, iframe, [data-a11y-image="content"], [data-a11y-image="decorative"]):not([data-a11y-image="essential"]):not([data-a11y-image="essential"] *):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    filter: grayscale(1) !important;
}

html[data-a11y-active="true"][data-a11y-images="off"] :where([data-a11y-scope])
    img:not([data-a11y-image="essential"]):not([data-a11y-image="essential"] *):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    visibility: hidden !important;
}

html[data-a11y-active="true"][data-a11y-images="off"] :where([data-a11y-scope])
    [data-a11y-image="content"]:not([data-a11y-image="essential"] *):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    display: none !important;
}

html[data-a11y-active="true"][data-a11y-images="off"] :where([data-a11y-scope])
    :where([data-a11y-image="decorative"], img[alt=""]):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    display: none !important;
}

html[data-a11y-active="true"][data-a11y-images="off"] :where([data-a11y-scope])
    :where([data-a11y-image="decorative"], [data-a11y-image="decorative"] *) {
    background-image: none !important;
}

/* Hidden-images mode also strips decorative background photos/gradients. */
html[data-a11y-active="true"][data-a11y-images="off"] :where([data-a11y-scope])
    :where(*):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-image="essential"]):not([data-a11y-image="essential"] *) {
    background-image: none !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    .topman-a11y-content-placeholder[data-topman-a11y-generated="image-placeholder"] {
    box-sizing: border-box;
    display: inline-flex !important;
    max-inline-size: 100%;
    min-block-size: 44px;
    flex-direction: column;
    justify-content: center;
    gap: 0.25em;
    padding: 0.75em 1em;
    border: 2px dashed var(--a11y-border) !important;
    border-radius: 0.35em;
    background: var(--a11y-surface) !important;
    color: var(--a11y-text) !important;
    font: inherit !important;
    overflow-wrap: anywhere;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    .topman-a11y-content-placeholder__label {
    color: var(--a11y-text) !important;
    font: inherit !important;
    font-weight: 700 !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    .topman-a11y-content-placeholder__description {
    color: var(--a11y-muted) !important;
    font: inherit !important;
}

html[data-a11y-active="true"][data-a11y-embedded-media="false"] :where([data-a11y-scope])
    :where(iframe, video, object, embed):not([data-topman-a11y-media-revealed]):not([data-topman-a11y-media-revealed] *):not([data-a11y-media="essential"]):not([data-a11y-media="essential"] *):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    visibility: hidden !important;
}

html[data-a11y-active="true"][data-a11y-embedded-media="false"] :where([data-a11y-scope])
    [data-topman-a11y-media-hidden="true"] {
    display: none !important;
}

html[data-a11y-active="true"][data-a11y-embedded-media="false"] :where([data-a11y-scope])
    [data-topman-a11y-media-revealed="true"],
html[data-a11y-active="true"][data-a11y-embedded-media="false"] :where([data-a11y-scope])
    [data-topman-a11y-media-revealed="true"] :where(iframe, video, object, embed) {
    visibility: visible !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    .topman-a11y-media-placeholder[data-topman-a11y-generated="media-placeholder"] {
    box-sizing: border-box;
    display: flex !important;
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 72px;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 1em;
    padding: 0.75em 1em;
    border: 2px dashed var(--a11y-border) !important;
    border-radius: 0.35em;
    background: var(--a11y-surface) !important;
    color: var(--a11y-text) !important;
    font: inherit !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    .topman-a11y-media-placeholder__label,
html[data-a11y-active="true"] :where([data-a11y-scope])
    .topman-a11y-media-placeholder__status {
    color: var(--a11y-text) !important;
    font: inherit !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    .topman-a11y-media-placeholder__label {
    font-weight: 700 !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    .topman-a11y-media-placeholder__button {
    margin-inline-start: auto;
    min-block-size: 44px;
    padding: 0.45em 0.8em;
    border: 2px solid var(--a11y-border) !important;
    border-radius: 0.25em;
    background: var(--a11y-field-bg) !important;
    color: var(--a11y-text) !important;
    font: inherit !important;
    font-weight: 700 !important;
}

@media (max-width: 480px) {
    html[data-a11y-active="true"] :where([data-a11y-scope])
        .topman-a11y-media-placeholder__button {
        inline-size: 100%;
        margin-inline-start: 0;
    }
}

html[data-a11y-active="true"] :where([data-a11y-scope]) [data-a11y-hide] {
    display: none !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope]) [data-a11y-show] {
    display: revert !important;
}

html[data-a11y-active="true"][data-a11y-reduced-motion="true"] :where([data-a11y-scope]),
html[data-a11y-active="true"][data-a11y-reduced-motion="true"] :where([data-a11y-scope])
    :where(*):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    scroll-behavior: auto !important;
}

html[data-a11y-active="true"][data-a11y-reduced-motion="true"] :where([data-a11y-scope])
    :where(*):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    animation-delay: 0s !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: 0.001ms !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-a11y-active="true"] :where([data-a11y-scope]),
    html[data-a11y-active="true"] :where([data-a11y-scope])
        :where(*):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
        scroll-behavior: auto !important;
    }

    html[data-a11y-active="true"] :where([data-a11y-scope])
        :where(*):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
        animation-delay: 0s !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-delay: 0s !important;
        transition-duration: 0.001ms !important;
    }
}

/* Block currently being spoken by the speech engine. */
html[data-a11y-active="true"] .topman-a11y-speaking {
    outline: 4px double var(--a11y-focus) !important;
    outline-offset: 3px !important;
    background-color: var(--a11y-surface) !important;
}

/* Whole-page Braille mode: hidden original keeps screen readers working. */
.topman-a11y-braille-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* The user letter-spacing setting must not tear braille cells apart. */
.topman-a11y-braille-visual {
    letter-spacing: 0.06em !important;
}

/* ------------------------------------------------------------------ */
/* ТЗ A1–A4: схемы ГОСТ, межсловный интервал, курсор                   */
/* ------------------------------------------------------------------ */

/* A2. Межсловный интервал. WCAG 1.4.12 требует поддержку 0.16em,
   поэтому средняя ступень равна ровно этому минимуму. */
html[data-a11y-active="true"] {
    --a11y-word-spacing: normal;
}

html[data-a11y-active="true"][data-a11y-word-spacing="medium"] {
    --a11y-word-spacing: 0.16em;
}

html[data-a11y-active="true"][data-a11y-word-spacing="large"] {
    --a11y-word-spacing: 0.32em;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(p, li, dt, dd, span, strong, b, em, i, a, label, legend, caption, h1, h2, h3, h4, h5, h6):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-font]):not([data-a11y-preserve-font] *) {
    word-spacing: inherit !important;
}

/* A1. Четыре схемы по ГОСТ Р 52872-2019. Контраст текст/фон:
   чёрный-жёлтый 19,6:1 · жёлтый-чёрный 19,6:1 ·
   тёмно-синий-жёлтый 14,2:1 · зелёный-чёрный 15,3:1 — все выше AA (4,5:1). */
html[data-a11y-active="true"][data-a11y-theme="blackYellow"] {
    --a11y-bg: #ffff00;
    --a11y-bg-rgb: 255, 255, 0;
    --a11y-veil: rgba(255, 255, 0, 0.82);
    --a11y-surface: #f2e600;
    --a11y-field-bg: #ffffcc;
    --a11y-text: #000000;
    --a11y-muted: #262600;
    --a11y-link: var(--a11y-text);
    --a11y-visited: var(--a11y-text);
    --a11y-border: #4d4d00;
    --a11y-focus: #b22222;
    --a11y-focus-text: #ffffff;
    --a11y-error: #8b0000;
    --a11y-success: #004d00;
    --a11y-selection-bg: #000000;
    --a11y-selection-text: #ffff00;
    color-scheme: light;
}

html[data-a11y-active="true"][data-a11y-theme="yellowBlack"] {
    --a11y-bg: #000000;
    --a11y-bg-rgb: 0, 0, 0;
    --a11y-veil: rgba(0, 0, 0, 0.82);
    --a11y-surface: #1a1a00;
    --a11y-field-bg: #0d0d00;
    --a11y-text: #ffff00;
    --a11y-muted: #e6e600;
    --a11y-link: var(--a11y-text);
    --a11y-visited: var(--a11y-text);
    --a11y-border: #ffff00;
    --a11y-focus: #ffffff;
    --a11y-focus-text: #000000;
    --a11y-error: #ff8a80;
    --a11y-success: #77ff77;
    --a11y-selection-bg: #ffff00;
    --a11y-selection-text: #000000;
    color-scheme: dark;
}

html[data-a11y-active="true"][data-a11y-theme="navyYellow"] {
    --a11y-bg: #ffff00;
    --a11y-bg-rgb: 255, 255, 0;
    --a11y-veil: rgba(255, 255, 0, 0.82);
    --a11y-surface: #f2e600;
    --a11y-field-bg: #ffffe0;
    --a11y-text: #00008b;
    --a11y-muted: #000066;
    --a11y-link: var(--a11y-text);
    --a11y-visited: var(--a11y-text);
    --a11y-border: #00006b;
    --a11y-focus: #b22222;
    --a11y-focus-text: #ffffff;
    --a11y-error: #8b0000;
    --a11y-success: #004d00;
    --a11y-selection-bg: #00008b;
    --a11y-selection-text: #ffff00;
    color-scheme: light;
}

html[data-a11y-active="true"][data-a11y-theme="greenBlack"] {
    --a11y-bg: #000000;
    --a11y-bg-rgb: 0, 0, 0;
    --a11y-veil: rgba(0, 0, 0, 0.82);
    --a11y-surface: #001a00;
    --a11y-field-bg: #000d00;
    --a11y-text: #00ff00;
    --a11y-muted: #7cfc7c;
    --a11y-link: var(--a11y-text);
    --a11y-visited: var(--a11y-text);
    --a11y-border: #00ff00;
    --a11y-focus: #ffff00;
    --a11y-focus-text: #000000;
    --a11y-error: #ff8a80;
    --a11y-success: #b6ffb6;
    --a11y-selection-bg: #00ff00;
    --a11y-selection-text: #000000;
    color-scheme: dark;
}

/* A4. Курсор. SVG инлайном в data: URI — ни одного внешнего запроса.
   Стрелка 48px, у контрастного варианта жёлтая заливка с чёрной обводкой. */
html[data-a11y-active="true"][data-a11y-cursor="large"] :where([data-a11y-scope]),
html[data-a11y-active="true"][data-a11y-cursor="large"] :where([data-a11y-scope]) * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6 1 3 6-3 2-3-6-5 4z' fill='%23000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto !important;
}

html[data-a11y-active="true"][data-a11y-cursor="contrast"] :where([data-a11y-scope]),
html[data-a11y-active="true"][data-a11y-cursor="contrast"] :where([data-a11y-scope]) * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6 1 3 6-3 2-3-6-5 4z' fill='%23ffff00' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto !important;
}

/* Интерактивные элементы сохраняют «руку», иначе теряется подсказка о клике. */
html[data-a11y-active="true"][data-a11y-cursor="large"] :where([data-a11y-scope]) :where(a[href], button, [role="button"], input[type="submit"], input[type="button"], label, summary),
html[data-a11y-active="true"][data-a11y-cursor="contrast"] :where([data-a11y-scope]) :where(a[href], button, [role="button"], input[type="submit"], input[type="button"], label, summary) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V5.5a1.5 1.5 0 0 1 3 0V11h1V7.5a1.5 1.5 0 0 1 3 0V11h1V9.5a1.5 1.5 0 0 1 3 0v6a5.5 5.5 0 0 1-5.5 5.5h-2A5.5 5.5 0 0 1 7 15.5V13l-2.2-2.2a1.5 1.5 0 0 1 2.1-2.1L9 11z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 8 2, pointer !important;
}

html[data-a11y-active="true"][data-a11y-cursor="contrast"] :where([data-a11y-scope]) :where(a[href], button, [role="button"], input[type="submit"], input[type="button"], label, summary) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V5.5a1.5 1.5 0 0 1 3 0V11h1V7.5a1.5 1.5 0 0 1 3 0V11h1V9.5a1.5 1.5 0 0 1 3 0v6a5.5 5.5 0 0 1-5.5 5.5h-2A5.5 5.5 0 0 1 7 15.5V13l-2.2-2.2a1.5 1.5 0 0 1 2.1-2.1L9 11z' fill='%23ffff00' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 8 2, pointer !important;
}

/* Текстовые поля сохраняют каретку. */
html[data-a11y-active="true"][data-a11y-cursor="large"] :where([data-a11y-scope]) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], textarea),
html[data-a11y-active="true"][data-a11y-cursor="contrast"] :where([data-a11y-scope]) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], textarea) {
    cursor: text !important;
}

/* ------------------------------------------------------------------ */
/* Фоновые изображения: автоматическая разметка + обесцвечивание        */
/* ------------------------------------------------------------------ */

/*
 * Элементы помечает JS (ImageController.markBackgrounds) — CSS не умеет
 * выбирать «элемент с background-image». Обесцвечиваем режимом наложения,
 * а не filter: filter на блоке сделал бы его containing block для
 * position:fixed и обесцветил бы текст вместе с фоном.
 * luminosity = яркость картинки + насыщенность подложки (серая, то есть 0).
 * Специфичность рассчитана так, чтобы перекрыть правило фона тем.
 */
html[data-a11y-active="true"][data-a11y-images="grayscale"] :where([data-a11y-scope])
    [data-topman-a11y-bg-image]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-image="essential"]) {
    /* Ненасыщенная подложка цвета схемы: luminosity возьмёт из неё оттенок и
       насыщенность (то есть ноль), а яркость — из самой картинки. Сплошной
       серый заливал бы блоки, где фон это лишь маленькая иконка. */
    background-color: var(--a11y-bg) !important;
    background-blend-mode: luminosity !important;
}

html[data-a11y-active="true"][data-a11y-images="off"] :where([data-a11y-scope])
    [data-topman-a11y-bg-image]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-image="essential"]) {
    background-image: none !important;
}

/* ------------------------------------------------------------------ */
/* ТЗ A5: «Упрощённый сайт» и «Одна колонка»                            */
/* ------------------------------------------------------------------ */

/* Скрываем только помеченное JS: декоративное или из списка администратора.
   Элементы с текстом сюда не попадают — правило безопасности контроллера. */
html[data-a11y-active="true"][data-a11y-simplified="true"] [data-topman-a11y-simplify-hide],
html[data-a11y-active="true"][data-a11y-simplified="true"] [data-topman-a11y-clone] {
    display: none !important;
}

/* Карусель разворачивается в вертикальный список. !important перебивает
   инлайновый transform, который продолжает ставить библиотека слайдера,
   поэтому вмешиваться в её JS не требуется. */
html[data-a11y-active="true"][data-a11y-simplified="true"] [data-topman-a11y-carousel],
html[data-a11y-active="true"][data-a11y-simplified="true"] [data-topman-a11y-carousel-track] {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    display: block !important;
    width: auto !important;
}

html[data-a11y-active="true"][data-a11y-simplified="true"] [data-topman-a11y-carousel-track] > * {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 1em !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    float: none !important;
}

/* Стрелки и точки после разворачивания смысла не имеют. */
html[data-a11y-active="true"][data-a11y-simplified="true"] :where(.slick-arrow, .slick-dots, .swiper-button-next, .swiper-button-prev, .swiper-pagination, .owl-nav, .owl-dots, .tns-controls, .tns-nav) {
    display: none !important;
}

/* Плавающие виджеты уходят из фиксированного слоя в поток страницы. */
html[data-a11y-active="true"][data-a11y-simplified="true"] [data-topman-a11y-unfixed] {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    max-width: 100% !important;
    transform: none !important;
}

.topman-a11y-simplify-dock {
    margin: 2em 0 0;
    padding: 1em;
    border-top: 3px solid currentColor;
}

.topman-a11y-simplify-dock__title {
    margin: 0 0 0.6em;
    font-size: 1.2em;
}

/* Отдельный переключатель «Одна колонка»: раскладываем сетки и флексы
   в один столбец. Поля ввода и кнопки внутри не трогаем. */
html[data-a11y-active="true"][data-a11y-single-column="true"] :where([data-a11y-scope])
    :where(div, section, article, aside, main, ul, ol, dl):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    column-count: 1 !important;
}

html[data-a11y-active="true"][data-a11y-single-column="true"] :where([data-a11y-scope])
    :where(table):not([data-a11y-preserve]):not([data-a11y-preserve] *) {
    display: block !important;
    overflow-x: auto !important;
}

/* Линеаризация может оставить блоки с жёсткой шириной шире экрана.
   Горизонтальная прокрутка запрещена WCAG 1.4.10 — гасим её на корне,
   раскладку это не меняет. */
html[data-a11y-active="true"][data-a11y-single-column="true"] {
    overflow-x: hidden !important;
}

/* ------------------------------------------------------------------ */
/* Псевдоэлементы: заливки кнопок и плашек                             */
/* ------------------------------------------------------------------ */

/*
 * Цвет подставляет JS (inspectPseudo) через inline-переменную на самом
 * элементе — псевдоэлемент наследует произвольные свойства от него.
 * Крупная непрозрачная заливка получает поверхность схемы, мелкая — цвет
 * текста, полупрозрачная накладка просто обесцвечивается с сохранением
 * альфы, иначе она закрыла бы фотографию под собой.
 */
html[data-a11y-active="true"] :where([data-a11y-scope])
    [data-topman-a11y-pseudo~="before"]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *)::before {
    background-color: var(--topman-a11y-pseudo-before-bg) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    [data-topman-a11y-pseudo~="after"]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *)::after {
    background-color: var(--topman-a11y-pseudo-after-bg) !important;
}

/*
 * Картинки в псевдоэлементах (иконки-спрайты). filter здесь безопасен:
 * псевдоэлемент не может содержать position:fixed потомков, ради которых
 * фильтр запрещён на обычных блоках.
 */
html[data-a11y-active="true"][data-a11y-images="grayscale"] :where([data-a11y-scope])
    [data-topman-a11y-pseudo-image~="before"]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-image="essential"])::before {
    filter: grayscale(1) !important;
}

html[data-a11y-active="true"][data-a11y-images="grayscale"] :where([data-a11y-scope])
    [data-topman-a11y-pseudo-image~="after"]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-image="essential"])::after {
    filter: grayscale(1) !important;
}

html[data-a11y-active="true"][data-a11y-images="off"] :where([data-a11y-scope])
    [data-topman-a11y-pseudo-image~="before"]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-image="essential"])::before {
    background-image: none !important;
}

html[data-a11y-active="true"][data-a11y-images="off"] :where([data-a11y-scope])
    [data-topman-a11y-pseudo-image~="after"]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-image="essential"])::after {
    background-image: none !important;
}

/* ------------------------------------------------------------------ */
/* Собственные фоны элементов                                          */
/* ------------------------------------------------------------------ */

/*
 * Красим только то, чему фон задал сайт (элементы находит и размечает JS,
 * читая авторские стили). Прозрачные обёртки остаются прозрачными: под
 * ними и так фон схемы, а сплошная заливка превратила бы любую накладку
 * position:fixed в полотно поверх страницы.
 */
html[data-a11y-active="true"] :where([data-a11y-scope])
    [data-topman-a11y-own-bg]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    background-color: var(--topman-a11y-own-bg) !important;
}

/* Градиент — та же брендовая заливка: заменяем поверхностью схемы. */
html[data-a11y-active="true"] :where([data-a11y-scope])
    [data-topman-a11y-gradient]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    background-image: none !important;
    background-color: var(--a11y-surface) !important;
}

/* ------------------------------------------------------------------ */
/* Кастомные теги и визуально скрытый текст                            */
/* ------------------------------------------------------------------ */

/*
 * Цвет текста назначался по списку тегов, а виджеты (карты, плееры) рисуют
 * интерфейс собственными тегами вроде <ymaps> — их текст оставался
 * фирменным поверх перекрашенного фона. Красим всё; правила ниже — ссылки,
 * поля, статусы — при равной специфичности перекрывают это как более
 * поздние. Панель модуля исключена: у неё стоит data-a11y-preserve.
 */
html[data-a11y-active="true"] :where([data-a11y-scope])
    *:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    color: var(--a11y-text) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(a:link, a:link *):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    color: var(--a11y-link) !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(a:visited, a:visited *):not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-color]):not([data-a11y-preserve-color] *) {
    color: var(--a11y-visited) !important;
}

/* Служебный текст, спрятанный нулевым кеглем, обязан таким и остаться. */
html[data-a11y-active="true"] :where([data-a11y-scope])
    [data-topman-a11y-zero-font]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-preserve-font]):not([data-a11y-preserve-font] *) {
    font-size: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Вуаль поверх фотографий, под которыми оказался текст                 */
/* ------------------------------------------------------------------ */

/*
 * inset box-shadow рисуется после фона, но до содержимого: фотография
 * приглушается, а текст остаётся контрастным. Блоки помечает JS — только
 * крупные, где фон действительно подложка, а не иконка.
 */
html[data-a11y-active="true"][data-a11y-images="grayscale"] :where([data-a11y-scope])
    [data-topman-a11y-bg-veil]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-image="essential"]) {
    box-shadow: inset 0 0 0 9999px var(--a11y-veil) !important;
}

/* ------------------------------------------------------------------ */
/* Текст не обрезается многоточием                                      */
/* ------------------------------------------------------------------ */

/*
 * Вёрстка часто сочетает жёсткую ширину в пикселях с nowrap и ellipsis. При
 * увеличенном кегле строка перестаёт помещаться, и часть текста пропадает —
 * то есть содержимое теряется ровно у того, кому оно нужнее всего.
 * Разрешаем перенос: лучше две строки, чем многоточие.
 */
html[data-a11y-active="true"] :where([data-a11y-scope])
    :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, span, a, label, legend, caption, th, td, div, figcaption, blockquote, summary):not([data-a11y-preserve]):not([data-a11y-preserve] *):not(pre):not(code):not(pre *):not(code *) {
    white-space: normal !important;
    text-overflow: clip !important;
}

/*
 * Мелкая фоновая картинка — это иконка рядом с текстом. Подложка сделала бы из
 * строки плашку, поэтому обесцвечиваем саму картинку. Фильтр здесь безопасен:
 * создаваемый им containing block важен только для position:fixed потомков.
 */
html[data-a11y-active="true"][data-a11y-images="grayscale"] :where([data-a11y-scope])
    [data-topman-a11y-bg-icon]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-image="essential"]) {
    filter: grayscale(1);
}

html[data-a11y-active="true"][data-a11y-images="off"] :where([data-a11y-scope])
    [data-topman-a11y-bg-icon]:not([data-a11y-preserve]):not([data-a11y-preserve] *):not([data-a11y-image="essential"]) {
    background-image: none !important;
}

/*
 * topman-a11y-fixed-top
 *
 * Всё, что сайт сам прижимает к верхнему краю — липкая шапка, строка поиска, —
 * опускается на высоту панели. Исходный отступ элемента запоминает JS в
 * переменной, здесь он складывается с высотой панели, поэтому шапка, стоявшая
 * не вплотную к краю, сохраняет свой зазор.
 *
 * Помечает элементы markFixedTop() в accessibility.js: определить
 * position: fixed селектором нельзя, это вычисленное значение.
 */
html[data-a11y-active="true"][data-a11y-panel-floating="true"] :where([data-a11y-scope]) [data-topman-a11y-fixed-top]:not([data-a11y-preserve]),
html[data-a11y-active="true"][data-a11y-panel-floating="true"] [data-topman-a11y-fixed-top]:not([data-a11y-preserve]) {
    top: calc(var(--topman-a11y-fixed-top, 0px) + var(--topman-a11y-flow-offset, 0px)) !important;
}

/*
 * Меню: слова не рвём посередине.
 *
 * Увеличенный шрифт не помещается в ширину пункта, и вёрстка с
 * `overflow-wrap: anywhere` начинает рвать слова по буквам — «КАТАЛО/Г».
 * Запрещаем разрыв внутри слова и разрешаем самому ряду переноситься на
 * следующую строку: пункты целиком уезжают вниз, а не рассыпаются.
 *
 * flex-wrap на не-флексовом контейнере не делает ничего, поэтому правило
 * безопасно для любой вёрстки меню.
 */
html[data-a11y-active="true"] :where([data-a11y-scope])
:is(nav, [role="navigation"], [class*="menu"], [class*="nav"]):not([data-a11y-preserve]) {
    flex-wrap: wrap !important;
}

html[data-a11y-active="true"] :where([data-a11y-scope])
:is(nav, [role="navigation"], [class*="menu"], [class*="nav"]):not([data-a11y-preserve])
:is(a, span, div, li) {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}