/* Hallmark · macrostructure: Index-First / Long Document / Catalogue · genre: modern-minimal · tone: technical · theme: custom graphite + #4E2ACA · nav: N13 · footer: Ft2 · design-system: docs/design.md · designed-as-app
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */

html,
body {
    overflow-x: clip;
}

html {
    scroll-padding-top: calc(var(--space-2xl) + var(--space-sm));
}

body {
    min-height: 100dvh;
    background: var(--color-paper);
    color: var(--color-ink-2);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.6;
}

a {
    color: var(--color-link);
    text-decoration-color: transparent;
    text-decoration-thickness: var(--rule-hair);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--color-link-hover);
    text-decoration-color: currentColor;
}

a:active {
    color: var(--color-link-hover);
}

:where(a, button, input, summary, [tabindex]):focus-visible {
    border-radius: var(--radius-input);
    outline: var(--rule-fine) solid var(--color-focus);
    outline-offset: var(--focus-offset);
}

button,
input {
    font: inherit;
}

:where(button, input):not(:disabled) {
    outline: var(--rule-fine) solid transparent;
    outline-offset: var(--focus-offset);
}

:where(button, input):not(:disabled):hover {
    border-color: var(--color-accent);
}

:where(button, input):disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
    background: var(--color-paper-3);
    color: var(--color-muted);
    opacity: 0.55;
}

.container-xxl {
    width: 100%;
    max-width: 92rem;
    padding-inline: clamp(var(--space-sm), 4vw, var(--space-xl));
}

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    border-bottom: var(--rule-hair) solid var(--color-rule);
    background: var(--color-paper);
}

.navbar {
    min-height: 4rem;
    padding-block: var(--space-2xs);
    background: transparent;
}

.navbar .container-xxl {
    gap: var(--space-sm);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--space-xs);
    min-height: 2.75rem;
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.navbar-brand:hover {
    color: var(--color-ink);
    text-decoration: none;
}

#logo {
    width: auto;
    max-height: 1.875rem;
    /*filter: grayscale(1); no need for the logo be black.*/
}

.nav-toggle {
    display: grid;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    margin-inline-start: auto;
    color: var(--color-ink);
}

.navbar-collapse {
    min-width: 0;
}

#navbar {
    width: 100%;
}

#navbar .navbar-nav {
    gap: var(--space-2xs);
    margin-block: var(--space-xs);
}

#navbar .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: 2.75rem;
    padding-inline: var(--space-xs);
    color: var(--color-neutral);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

#navbar .nav-link:hover,
#navbar .nav-link.active {
    color: var(--color-link);
}

.jj-nav-icon,
.jj-toc-icon {
    flex: 0 0 auto;
    color: var(--color-muted);
    font-size: var(--text-sm);
    margin-right: 0.5rem;
}

.search-trigger {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--space-xs);
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-input);
    background: var(--color-paper-2);
    color: var(--color-neutral);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.search-trigger:active,
.search-dialog__close:active,
.docs-home__action:active {
    transform: translateY(1px);
}

.search-trigger__label,
.search-trigger__shortcut {
    display: none;
}

kbd {
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: calc(var(--radius-input) / 2);
    background: var(--color-paper-3);
    color: var(--color-muted);
    box-shadow: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
}

.search-trigger__shortcut {
    gap: var(--space-3xs);
    padding: var(--space-3xs) var(--space-2xs);
}

main.container-xxl {
    display: block;
    flex: 1;
    padding-block: var(--space-lg) var(--space-2xl);
}

body[data-search] > main {
    display: block;
}

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

.actionbar {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    margin-block-end: var(--space-sm);
}

.actionbar > .btn {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    margin: 0 var(--space-xs) 0 0;
    color: var(--color-ink);
}

#breadcrumb {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

#breadcrumb::-webkit-scrollbar {
    display: none;
}

#breadcrumb:empty,
#breadcrumb:not(:has(.breadcrumb-item)) {
    display: none;
}

#breadcrumb .breadcrumb {
    flex-wrap: nowrap;
    min-width: max-content;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    font-size: var(--text-xs);
}

.breadcrumb-item,
.breadcrumb-item a {
    white-space: nowrap;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-rule-2);
}

article {
    min-width: 0;
    max-width: 72ch;
    color: var(--color-ink-2);
}

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

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.025em;
}

article h1 {
    max-width: 22ch;
    margin-block: 0 var(--space-lg);
    font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
    line-height: 1.08;
}

article h2 {
    margin-block: var(--space-2xl) var(--space-sm);
    padding-block-start: var(--space-sm);
    border-top: var(--rule-hair) solid var(--color-rule);
    font-size: var(--text-xl);
    line-height: 1.2;
}

article h3 {
    margin-block: var(--space-xl) var(--space-xs);
    font-size: var(--text-lg);
    line-height: 1.25;
}

article h4 {
    margin-block: var(--space-lg) var(--space-xs);
    font-size: var(--text-md);
    line-height: 1.3;
}

article h5,
article h6 {
    margin-block: var(--space-md) var(--space-2xs);
    font-size: var(--text-base);
    line-height: 1.35;
}

article p,
article ul,
article ol,
article dl,
article table,
article pre,
article blockquote,
article .tabGroup,
article .alert {
    margin-block: 0 var(--space-md);
}

article li + li {
    margin-block-start: var(--space-2xs);
}

article img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-input);
}

article :not(pre) > code,
article kbd,
article samp {
    padding: 0.12em 0.35em;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: calc(var(--radius-input) / 2);
    background: var(--color-paper-3);
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

pre,
.tabGroup > section {
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-card);
    background: var(--color-graphite);
    color: var(--color-graphite-ink);
    box-shadow: var(--shadow-whisper);
}

pre {
    padding: var(--space-md);
    overflow: auto;
}

pre code,
code.hljs,
pre code.hljs {
    background: transparent !important;
    color: inherit;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-ligatures: none;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link,
.hljs-attribute,
.hljs-symbol {
    color: var(--color-code-key) !important;
}

.hljs-string,
.hljs-title,
.hljs-name,
.hljs-type,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
    color: var(--color-code-string) !important;
}

.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name {
    color: var(--color-code-number) !important;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion {
    color: var(--color-code-comment) !important;
}

pre > .code-action {
    top: var(--space-2xs);
    right: var(--space-2xs);
    min-width: 2.75rem;
    min-height: 2.75rem;
    color: var(--color-graphite-ink);
}

.table-responsive {
    margin-block: var(--space-lg);
    border-block: var(--rule-hair) solid var(--color-rule);
}

article table {
    width: 100%;
    margin: 0;
    border: 0;
    color: var(--color-ink-2);
    font-variant-numeric: tabular-nums;
}

article table th,
article table td {
    padding: var(--space-xs) var(--space-sm);
    border-color: var(--color-rule);
    background: transparent;
    vertical-align: top;
}

article table thead th {
    background: var(--color-paper-2);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 700;
}

article blockquote {
    padding: var(--space-sm) var(--space-md);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-input);
    background: var(--color-paper-2);
    color: var(--color-neutral);
}

article blockquote > :last-child {
    margin-block-end: 0;
}

.alert {
    padding: var(--space-sm) var(--space-md);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-input);
    color: var(--color-ink-2);
    box-shadow: none;
}

.alert-info {
    background: var(--color-info);
}

.alert-warning {
    background: var(--color-warning);
}

.alert-danger {
    background: var(--color-danger);
}

.tabGroup > ul[role="tablist"] {
    gap: var(--space-sm);
    border-bottom: var(--rule-hair) solid var(--color-rule);
}

.tabGroup > ul[role="tablist"] .nav-link {
    min-height: 2.75rem;
    padding-inline: 0;
    border: 0;
    border-bottom: var(--rule-fine) solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--color-muted);
    white-space: nowrap;
}

.tabGroup > ul[role="tablist"] .nav-link.active {
    border-bottom-color: var(--color-accent);
    background: transparent;
    color: var(--color-ink);
}

.tabGroup > section {
    border-top: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

.contribution,
.next-article {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    margin-block-start: var(--space-xl);
    padding-block: var(--space-sm);
    border-top: var(--rule-hair) solid var(--color-rule) !important;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.contribution:empty,
.contribution:not(:has(*)),
.next-article:empty,
.next-article:not(:has(*)) {
    display: none !important;
}

.toc-offcanvas,
.affix {
    min-width: 0;
}

.toc .offcanvas-start {
    background: var(--color-paper);
}

.toc .offcanvas-header {
    border-bottom: var(--rule-hair) solid var(--color-rule);
}

.toc .offcanvas-title,
.affix h5,
.toc span.name-only {
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.toc ul,
.affix ul {
    margin: 0;
    padding: 0;
}

.toc li,
.affix li {
    margin: 0;
    padding: 0;
    border: 0;
}

.toc li {
    display: grid;
    grid-template-columns: var(--space-sm) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-2xs);
}

.toc li > a,
.toc li > span.name-only,
.toc li > ul {
    grid-column: 2;
}

.toc li > a,
.affix li > a {
    display: block;
    padding-block: var(--space-2xs);
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.35;
    text-decoration: none;
}

.toc li > a:hover,
.toc li.active > a,
.affix li > a:hover,
.affix li.active > a {
    color: var(--color-link);
}

.toc > .nav.level1 > li > a {
    color: var(--color-neutral);
    font-weight: 600;
}

.toc .expand-stub {
    grid-column: 1;
    width: var(--space-sm);
    min-height: 2rem;
    margin: 0;
}

.toc .expand-stub::before {
    position: static;
    margin: 0;
    color: var(--color-muted);
}

.toc form.filter > input {
    min-height: 2.75rem;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-input);
    background: var(--color-paper-2);
    color: var(--color-ink);
    box-shadow: none;
}

.affix {
    display: none;
}

.affix nav > ul > li > a {
    color: var(--color-neutral);
    font-family: var(--font-display);
    font-weight: 700;
}

body[data-yaml-mime="ManagedReference"] article,
body[data-yaml-mime="ApiPage"] article {
    max-width: none;
}

body[data-yaml-mime="ManagedReference"] article h3[data-uid],
body[data-yaml-mime="ApiPage"] article h3[data-uid] {
    margin-block-start: var(--space-2xl);
    padding-block: var(--space-sm);
    border-block: var(--rule-hair) solid var(--color-rule);
    font-weight: 700;
}

body[data-yaml-mime="ManagedReference"] article .facts,
body[data-yaml-mime="ApiPage"] article .facts {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.docs-home {
    max-width: 78rem;
    margin-inline: auto;
}

article:has(.docs-home) {
    max-width: none;
}

.docs-home__intro {
    display: grid;
    gap: var(--space-md);
    padding-block-start: clamp(var(--space-xl), 6vw, var(--space-2xl));
    padding-block-end: clamp(var(--space-2xl), 10vw, var(--space-3xl));
    border-bottom: var(--rule-hair) solid var(--color-rule);
}

.docs-home__intro h1 {
    max-width: 14ch;
    margin: 0;
    font-size: var(--text-display);
    line-height: 1.02;
}

.docs-home__lede {
    max-width: 52ch;
    margin: 0;
    color: var(--color-neutral);
    font-size: var(--text-lg);
    line-height: 1.45;
}

.docs-home__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block-start: var(--space-sm);
}

.docs-home__action {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-input);
    color: var(--color-ink);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.docs-home__action--primary {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-accent-ink);
}

.docs-home__action:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.docs-home__action--primary:hover {
    color: var(--color-accent-ink);
}

.docs-home__action--primary:active {
    color: var(--color-accent-ink);
}

.docs-home__action--primary:focus-visible {
    outline-color: var(--color-ink);
    box-shadow: 0 0 0 var(--space-3xs) var(--color-paper);
}

.docs-index {
    margin-block-start: var(--space-xl);
}

.docs-index__group {
    display: grid;
    gap: var(--space-sm);
    padding-block: var(--space-xl);
    border-bottom: var(--rule-hair) solid var(--color-rule);
}

.docs-index__group h2 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--text-xl);
}

.docs-index__description {
    max-width: 45ch;
    margin: 0;
    color: var(--color-muted);
}

.docs-index__links {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-index__links li {
    margin: 0;
    border-top: var(--rule-hair) solid var(--color-rule);
}

.docs-index__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: 3.5rem;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.docs-index__links a::after {
    content: "\2192";
    flex: 0 0 auto;
    color: var(--color-link);
    font-family: var(--font-display);
}

.search-dialog {
    position: fixed;
    inset: 0;
    width: min(44rem, calc(100% - var(--space-lg)));
    max-width: none;
    max-height: min(82dvh, 42rem);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    color: var(--color-ink-2);
    box-shadow: var(--shadow-whisper);
}

.search-dialog::backdrop {
    background: var(--color-overlay);
}

.search-dialog[open] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.search-dialog__header,
.search-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm);
}

.search-dialog__header {
    border-bottom: var(--rule-hair) solid var(--color-rule);
}

.search-dialog__title,
.search-dialog__hint {
    margin: 0;
}

.search-dialog__title {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 700;
}

.search-dialog__hint {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.search-dialog__close {
    display: grid;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 0;
    border-radius: var(--radius-input);
    background: transparent;
    color: var(--color-ink);
    line-height: 1;
}

.search-dialog .search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: var(--space-sm);
}

.search-dialog .search > .bi-search {
    position: absolute;
    inset-inline-start: var(--space-sm);
    color: var(--color-muted);
    pointer-events: none;
}

.search-dialog .search > kbd {
    position: absolute;
    inset-inline-end: var(--space-xs);
    padding: var(--space-3xs) var(--space-2xs);
    pointer-events: none;
}

#search-query {
    width: 100%;
    min-height: 3rem;
    padding-inline: calc(var(--space-xl) + var(--space-xs)) var(--space-2xl);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-input);
    background: var(--color-paper-2);
    color: var(--color-ink);
    box-shadow: none;
}

#search-query:focus-visible {
    border-color: var(--color-focus);
    box-shadow: none;
}

#search-results {
    min-height: 5rem;
    padding: 0 var(--space-sm) var(--space-sm);
    overflow-y: auto;
    line-height: 1.5;
}

#search-results:empty::before {
    content: "Start typing to search the documentation.";
    display: block;
    padding: var(--space-lg) var(--space-sm);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

#search-results > .search-list {
    padding: var(--space-lg) var(--space-sm);
    color: var(--color-muted);
}

#search-results > .sr-items .sr-item {
    margin: 0;
    padding: var(--space-sm);
    border-top: var(--rule-hair) solid var(--color-rule);
}

#search-results > .sr-items .sr-item:has(a.is-active) {
    background: var(--color-paper-2);
}

#search-results > .sr-items .sr-item > .item-title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 700;
}

#search-results > .sr-items .sr-item > .item-title a {
    color: var(--color-ink);
}

#search-results > .sr-items .sr-item > .item-href {
    color: var(--color-link);
    font-size: var(--text-xs);
}

#search-results > .sr-items .sr-item > .item-brief {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.search-dialog__footer {
    justify-content: flex-end;
    border-top: var(--rule-hair) solid var(--color-rule);
    color: var(--color-muted);
    font-size: var(--text-xs);
}

.search-dialog__footer span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    white-space: nowrap;
}

.site-footer {
    margin-block-start: auto;
    border-top: var(--rule-hair) solid var(--color-rule);
    background: var(--color-paper);
}

.site-footer .container-xxl {
    display: flex;
    align-items: center;
    min-height: 4rem;
}

.site-footer .flex-fill {
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: 1;
}

.site-footer a,
.site-footer span {
    white-space: nowrap;
}

.playground-container {
    width: 100%;
    min-height: calc(100dvh - 8rem);
    overflow: hidden;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
}

.playground-container iframe {
    display: block;
    width: 100%;
    min-height: calc(100dvh - 8rem);
    border: 0;
    background: var(--color-paper);
}

body:has(.playground-container) main.container-xxl {
    max-width: none;
    padding: var(--space-sm);
}

body:has(.playground-container) article {
    max-width: none;
}

@media (min-width: 40rem) {
    .docs-home__intro {
        grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
        align-items: end;
    }

    .docs-home__intro h1 {
        grid-row: 1 / span 3;
    }

    .docs-index__group {
        grid-template-columns: minmax(12rem, 0.8fr) minmax(14rem, 0.8fr) minmax(18rem, 1.4fr);
        align-items: start;
    }
}

@media (min-width: 60rem) {
    .search-trigger__label,
    .search-trigger__shortcut {
        display: inline-flex;
    }

    .search-trigger {
        padding-inline: var(--space-sm) var(--space-xs);
    }
}

@media (min-width: 48rem) {
    .nav-toggle {
        display: none;
    }

    .navbar-collapse {
        display: flex !important;
        justify-content: flex-end;
    }

    #navbar .navbar-nav {
        align-items: center;
        margin: 0;
    }

    main.container-xxl {
        display: flex;
        align-items: flex-start;
        gap: clamp(var(--space-lg), 3vw, var(--space-xl));
    }

    body[data-search] > main {
        display: flex;
    }

    main > .toc-offcanvas {
        position: sticky;
        top: calc(4rem + var(--space-lg));
        flex: 0 0 clamp(13rem, 19vw, 17rem);
        max-height: calc(100dvh - 6rem);
        overflow-y: auto;
        scrollbar-width: thin;
    }

    main > .content {
        flex: 1 1 auto;
    }

    .toc .offcanvas-body {
        padding: 0;
    }
}

@media (min-width: 75rem) {
    main > .affix:not(:has(nav:empty)) {
        position: sticky;
        top: calc(4rem + var(--space-lg));
        display: block;
        flex: 0 0 12rem;
        max-height: calc(100dvh - 6rem);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

@media (pointer: coarse) {
    .search-trigger,
    .docs-home__action,
    .docs-index__links a,
    #navbar .nav-link {
        min-height: 3rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .search-trigger,
    .search-dialog__close,
    .docs-home__action {
        transition: transform var(--dur-micro) var(--ease-out);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 150ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 150ms !important;
    }
}

@media print {
    .site-header,
    .site-footer,
    .toc-offcanvas,
    .affix,
    .actionbar,
    .contribution,
    .next-article {
        display: none !important;
    }

    main.container-xxl,
    article {
        display: block;
        max-width: none;
        padding: 0;
    }
}