html:has(body#six) {
    overflow-x: clip;
}

#six {
    /* Page-scoped subset of the AtlasNG HRA palette and typography tokens */
    --hra-primary-30: #95001e;
    --hra-primary-35: #bb062c;
    --hra-primary-40: #e00d3a;
    --hra-primary-80: #ffb3b3;
    --hra-secondary-40: #201e3d;
    --hra-secondary-80: #c6c2ea;
    /* Story-6-private; must not shadow the theme-reactive shared --hra-secondary. */
    --story6-secondary: var(--hra-secondary-40);
    --hra-secondary-fixed-dim: var(--hra-secondary-80);
    --hra-tertiary-30: #3d3d50;
    --hra-tertiary-90: #e2e0f8;
    --hra-neutral-0: #000000;
    --hra-neutral-10: #1c1b1e;
    --hra-neutral-20: #26282b;
    --hra-neutral-87: #c7d2dd;
    --hra-neutral-95: #e9eef3;
    --hra-neutral-96: #eef2f6;
    --hra-neutral-98: #fafbfc;
    --hra-neutral-100: #ffffff;
    --hra-neutral-variant-30: #393f45;
    --hra-neutral-variant-50: #909bad;
    --hra-neutral-variant-90: #dee5f1;
    --hra-font-plain: 'Nunito Sans Variable', sans-serif;
    --hra-font-brand: 'Metropolis', sans-serif;
    --hra-type-body-large: 400 1rem / 1.5rem var(--hra-font-plain);
    --hra-type-body-large-emphasized-weight: 700;
    --hra-type-body-large-tracking: 0;
    --hra-type-display-small: 500 2.25rem / 2.75rem var(--hra-font-brand);
    --hra-type-display-small-tracking: -0.031rem;
    --hra-type-headline-small: 500 1.5rem / 2rem var(--hra-font-brand);
    --hra-type-headline-small-tracking: -0.013rem;
    --hra-type-title-large: 500 1.375rem / 1.75rem var(--hra-font-plain);
    --hra-type-title-large-tracking: 0;
    --hra-type-title-medium: 600 1rem / 1.5rem var(--hra-font-plain);
    --hra-type-title-medium-tracking: 0.009rem;
    --hra-type-label-large: 500 0.875rem / 1.25rem var(--hra-font-plain);
    --hra-type-label-large-tracking: 0.006rem;
    --story-section-inline-padding: clamp(1rem, 4vw, 1.5rem);
    --story-viewport-height: 100dvh;
    --story-scroll-safety-margin: 0px;
    --story-cde-stage-aspect-ratio: 1320 / 760;
    --story-cde-stage-max-width: 82.5rem;

    box-sizing: border-box;
    background: var(--hra-neutral-98);
    font: var(--hra-type-body-large);
    letter-spacing: var(--hra-type-body-large-tracking);
    margin: 0;
    min-height: 100%;
    overflow-x: clip;
    padding: 0;
    -webkit-user-select: text;
    user-select: text;
    width: 100%;

    #main-content,
    #main-content *,
    #main-content *::before,
    #main-content *::after {
        box-sizing: inherit;
    }

    #main-content * {
        -webkit-user-select: inherit;
        user-select: inherit;
    }

    @media (forced-colors: none) {
        #main-content ::selection {
            color: var(--hra-neutral-100);
            background: var(--hra-primary-30);
        }
    }

    :where(#main-content p, #main-content button) {
        font: inherit;
        letter-spacing: inherit;
    }

    strong {
        font-weight: var(--hra-type-body-large-emphasized-weight);
    }

    #main-content > :not(.story-end-matter) a {
        color: inherit;
        text-decoration: underline;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.16em;
    }

    #main-content:focus {
        outline: none;
    }

    #main-content :is(a, button, [tabindex]):focus-visible {
        outline: 3px solid var(--hra-neutral-10);
        outline-offset: 3px;
    }

    .story-scene {
        height: auto;
        max-width: 100vw;
        overflow: visible;
        padding-inline: var(--story-section-inline-padding);
    }

    &.story-animations-enabled {
        .section2,
        .section3,
        .transition {
            height: var(--story-viewport-height);
            overflow: hidden;
        }
    }
}

#six #main-content a:focus {
    border-radius: 0.125rem;
}

#six #main-content button:focus {
    border-radius: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    html:has(body#six) {
        scroll-behavior: auto;
    }
}

@media (hover: none) and (pointer: coarse) {
    #six {
        --story-scroll-safety-margin: 150px;
    }
}