/* Story 6 semantic color roles mirror the landing-page appearance system. */
#six {
    color-scheme: light;
    --story-color-page: #fafbfc;
    --story-color-text: #393f45;
    --story-color-heading: #201e3d;
    --story-color-accent: #95001e;
    --story-color-focus: #201e3d;
    --story-color-card: #ffffff;
    --story-color-surface-low: #eef2f6;
    --story-color-surface: #e4eaf0;
    --story-color-border: #6f7b8c;
    --story-color-border-subtle: #c7d2dd;
    --story-color-label: #26282b;
    --story-color-on-label: #eff2f5;
    --story-color-accent-surface: #e3dfff;
    --story-color-on-accent-surface: #171533;
    --story-color-info-surface: #f0f5ff;
    --story-color-info-accent: #174a7e;
    --story-color-artwork-surface: #ffffff;
    --story-resource-logo-sennet: url("../../shared/assets/logos/sennet-logo-light.svg");
    --story-resource-logo-hra: url("../../shared/assets/logos/hra-light-large.svg");
    --story-color-selection: #201e3d;
    --story-color-on-selection: #ffffff;
    --story-condition-one: #dee5f1;
    --story-condition-two: #c7d2dd;
    --story-condition-three: #e2e0f8;
    --story-shadow: 0 0.5rem 1.5rem rgb(32 30 61 / 12%);
    --story-shadow-raised: 0 1rem 2.25rem rgb(32 30 61 / 18%);
    --story-splash-overlay: linear-gradient(90deg, rgb(250 251 252 / 96%), rgb(250 251 252 / 70%) 54%, transparent 82%);
    --story-splash-overlay-mobile: linear-gradient(180deg, rgb(250 251 252 / 40%), rgb(250 251 252 / 86%));
    --story-title-card: rgb(255 255 255 / 94%);
    --story-splash-text-shadow: 0 0.125rem 1rem rgb(255 255 255 / 92%);
    --story-transition-scrim: #201e3d;
    --story-transition-text: #ffffff;

    color: var(--story-color-text);
    background: var(--story-color-page);
}

:root[data-theme="dark"] #six {
    color-scheme: dark;
    --story-color-page: #161719;
    --story-color-text: #dee5f1;
    --story-color-heading: #e3dfff;
    --story-color-accent: #ffb3b3;
    --story-color-focus: #ffb3b3;
    --story-color-card: #101113;
    --story-color-surface-low: #1c1b1e;
    --story-color-surface: #1f2023;
    --story-color-border: #aab4c5;
    --story-color-border-subtle: #393f45;
    --story-color-label: #d4dde6;
    --story-color-on-label: #26282b;
    --story-color-accent-surface: #171533;
    --story-color-on-accent-surface: #e3dfff;
    --story-color-info-surface: #1c2633;
    --story-color-info-accent: #9fc9ff;
    --story-resource-logo-sennet: url("../../shared/assets/logos/sennet-logo-dark.svg");
    --story-resource-logo-hra: url("../../shared/assets/logos/hra-dark-large.svg");
    --story-color-selection: #ffdad9;
    --story-color-on-selection: #400009;
    --story-condition-one: #1f2023;
    --story-condition-two: #2f3337;
    --story-condition-three: #171533;
    --story-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 48%);
    --story-shadow-raised: 0 1rem 2.25rem rgb(0 0 0 / 62%);
    --story-splash-overlay: linear-gradient(90deg, rgb(22 23 25 / 98%), rgb(22 23 25 / 76%) 54%, transparent 82%);
    --story-splash-overlay-mobile: linear-gradient(180deg, rgb(22 23 25 / 52%), rgb(22 23 25 / 92%));
    --story-title-card: rgb(16 17 19 / 94%);
    --story-splash-text-shadow: 0 0.125rem 1rem rgb(0 0 0 / 92%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) #six {
        color-scheme: dark;
        --story-color-page: #161719;
        --story-color-text: #dee5f1;
        --story-color-heading: #e3dfff;
        --story-color-accent: #ffb3b3;
        --story-color-focus: #ffb3b3;
        --story-color-card: #101113;
        --story-color-surface-low: #1c1b1e;
        --story-color-surface: #1f2023;
        --story-color-border: #aab4c5;
        --story-color-border-subtle: #393f45;
        --story-color-label: #d4dde6;
        --story-color-on-label: #26282b;
        --story-color-accent-surface: #171533;
        --story-color-on-accent-surface: #e3dfff;
        --story-color-info-surface: #1c2633;
        --story-color-info-accent: #9fc9ff;
        --story-resource-logo-sennet: url("../../shared/assets/logos/sennet-logo-dark.svg");
        --story-resource-logo-hra: url("../../shared/assets/logos/hra-dark-large.svg");
        --story-color-selection: #ffdad9;
        --story-color-on-selection: #400009;
        --story-condition-one: #1f2023;
        --story-condition-two: #2f3337;
        --story-condition-three: #171533;
        --story-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 48%);
        --story-shadow-raised: 0 1rem 2.25rem rgb(0 0 0 / 62%);
        --story-splash-overlay: linear-gradient(90deg, rgb(22 23 25 / 98%), rgb(22 23 25 / 76%) 54%, transparent 82%);
        --story-splash-overlay-mobile: linear-gradient(180deg, rgb(22 23 25 / 52%), rgb(22 23 25 / 92%));
        --story-title-card: rgb(16 17 19 / 94%);
        --story-splash-text-shadow: 0 0.125rem 1rem rgb(0 0 0 / 92%);
    }
}

#six #main-content,
#six .sceneEnd {
    color: var(--story-color-text);
    background: var(--story-color-page);
}

#six :where(#main-content a, .sceneEnd a) {
    color: inherit;
}

#six #main-content ::selection,
#six .sceneEnd ::selection {
    color: var(--story-color-on-selection);
    background: var(--story-color-selection);
}

#six #main-content :is(a, button, [tabindex]):focus-visible,
#six .sceneEnd :is(a, button, [tabindex]):focus-visible,
#six .references a:focus {
    outline-color: var(--story-color-focus);
}

#six .page-header {
    --story-splash-overlay-opacity: 0;
    color: var(--story-color-heading);
    background: var(--story-color-page);
}
#six .page-header::after {
    background: var(--story-splash-overlay);
    opacity: var(--story-splash-overlay-opacity);
}
#six .page-header .title-card {
    color: var(--story-color-text);
    background: var(--story-title-card);
    border-color: var(--story-color-border-subtle);
    box-shadow: var(--story-shadow-raised);
}
#six .page-header .title-card::before {
    background: var(--hra-primary-40);
}
#six .page-header .title-card .title .main,
#six .tissue-comparison__intro h2,
#six .organ-comparison h3,
#six .tissue-comparison__takeaway,
#six .resources__header h2,
#six .acknowledgments__header h2,
#six .acknowledgments__list strong,
#six .references .header,
#six .resource-card__title {
    color: var(--story-color-heading);
}
#six .page-header .title-card .title .subtitle,
#six .page-header .title-card .bottom,
#six .intro .text p,
#six .section2-2 .text p,
#six .tissue-comparison__intro p:not(.tissue-comparison__eyebrow),
#six .tissue-comparison__takeaway p,
#six .resources__header > p:last-child,
#six .resource-card__description,
#six .references p {
    color: var(--story-color-text);
}
#six .page-header .title-card .bottom {
    border-color: var(--story-color-border-subtle);
}

#six .textbox-transition1 {
    --transition-underline-color: var(--hra-primary-40);

    color: var(--story-color-heading);
    text-shadow: var(--story-splash-text-shadow);
}

#six .intro,
#six .section2-2,
#six .resources {
    background: linear-gradient(var(--story-color-page), var(--story-color-surface-low));
}

#six .picture1 {
    background: linear-gradient(var(--story-color-surface-low), var(--story-color-page));
}

#six .picture2 {
    background: linear-gradient(var(--story-color-page), var(--story-color-surface-low));
}

#six .setup,
#six .section3 {
    background: var(--story-color-card);
}

#six .setup2,
#six section.section4,
#six .references,
#six .story-pagination,
#six .botNav,
#six section.section5,
#six .cde-tutorial-stage {
    background: var(--story-color-surface-low);
}

#six .setup3 {
    background: var(--story-color-page);
}

#six .setup .setup-text p {
    color: var(--story-color-text) !important;
}

#six .mouse .info-text,
#six .mouse .info-text p {
    color: var(--story-color-text);
}

#six .image-card,
#six .organ-comparison,
#six .tissue-comparison__takeaway,
#six .acknowledgments__list li {
    background: var(--story-color-card);
    border-color: var(--story-color-border-subtle);
    box-shadow: var(--story-shadow);
}

#six .image-card {
    border: 1px solid var(--story-color-border-subtle);
}

#six .mouse .label {
    color: var(--story-color-on-label);
    background: var(--story-color-label);
}

#six .tissue-comparison__eyebrow,
#six .organ-comparison__number,
#six .tissue-comparison__takeaway .tissue-comparison__takeaway-label,
#six .resources__eyebrow,
#six .reference-list li::marker {
    color: var(--story-color-accent);
}

#six .tissue-sample {
    color: var(--story-color-heading);
    background: var(--story-color-surface);
    border-color: var(--story-color-border-subtle);
}

#six .tissue-sample:nth-child(1) .tissue-sample__condition {
    background: var(--story-condition-one);
}

#six .tissue-sample:nth-child(2) .tissue-sample__condition {
    background: var(--story-condition-two);
}

#six .tissue-sample:nth-child(3) .tissue-sample__condition {
    background: var(--story-condition-three);
}

#six .tissue-sample__condition {
    color: var(--story-color-heading);
}

#six .tissue-sample img {
    background: var(--story-color-artwork-surface);
    border-color: var(--story-color-border-subtle);
}

#six .tissue-comparison__takeaway {
    border-inline-start-color: var(--story-color-accent);
}

#six .tutorial-callout {
    --tutorial-info-accent: var(--story-color-info-accent);
    --tutorial-info-surface: var(--story-color-info-surface);

    color: var(--story-color-text);
    box-shadow: var(--story-shadow);
}

#six .tutorial-callout :is(a, button):focus-visible {
    outline-color: var(--story-color-focus);
}

#six .resource-card__action {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

#six .acknowledgments {
    color: var(--story-color-on-accent-surface);
    background: var(--story-color-accent-surface);
}

#six .acknowledgments__list li {
    color: var(--story-color-text);
}

#six .reference-list li {
    border-color: var(--story-color-border-subtle);
}

#six .story-pagination {
    border-top: 1px solid var(--story-color-border-subtle);
}

#six .botNav {
    width: min(100%, 72rem);
    color: var(--story-color-text);
    font-family: var(--hra-font-plain);
}

#six .botNav .previous {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    color: inherit;
    border-radius: 0.5rem;
}

#six .botNav .previous:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

#six.story-animations-unavailable .page-header {
    --story-splash-overlay-opacity: 1;
}

@media (max-width: 600px) {
    #six .page-header::after {
        background: var(--story-splash-overlay-mobile);
    }

    #six .page-header .title-card {
        background: var(--story-title-card);
    }
}

@media (prefers-reduced-transparency: reduce) {
    #six .page-header .title-card {
        background: var(--story-color-card);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #six .page-header {
        --story-splash-overlay-opacity: 1;
    }
}

:root[data-contrast="more"] #six :is(
    .title-card,
    .image-card,
    .organ-comparison,
    .tissue-sample,
    .tissue-comparison__takeaway,
    .tutorial-callout,
    .resource-card,
    .acknowledgments__list li
) {
    border-color: var(--story-color-border);
    border-width: 0.1875rem;
}

:root[data-contrast="more"] #six .transition__overlay {
    opacity: 0.96 !important;
    background: linear-gradient(90deg, var(--story-transition-scrim) 0%, rgb(32 30 61 / 96%) 72%, rgb(32 30 61 / 78%) 90%, transparent 100%);
}

:root[data-contrast="more"] #six .textbox-transition:not(.textbox-transition1) {
    color: var(--story-transition-text);
    text-shadow: 0 0 0.25rem #000000, 0 0 1.5rem #000000;
}

:root[data-contrast="more"] #six .textbox-transition1 {
    text-shadow: 0 0 0.25rem var(--story-color-card), 0 0 1.5rem var(--story-color-card);
}

:root[data-contrast="more"] #six .transition-emphasis {
    background-size: 100% 0.18em;
}

@media (prefers-contrast: more) {
    :root:not([data-contrast="standard"]) #six :is(
        .title-card,
        .image-card,
        .organ-comparison,
        .tissue-sample,
        .tissue-comparison__takeaway,
        .tutorial-callout,
        .resource-card,
        .acknowledgments__list li
    ) {
        border-color: var(--story-color-border);
        border-width: 0.1875rem;
    }

    :root:not([data-contrast="standard"]) #six .transition__overlay {
        opacity: 0.96 !important;
        background: linear-gradient(90deg, var(--story-transition-scrim) 0%, rgb(32 30 61 / 96%) 72%, rgb(32 30 61 / 78%) 90%, transparent 100%);
    }

    :root:not([data-contrast="standard"]) #six .textbox-transition:not(.textbox-transition1) {
        color: var(--story-transition-text);
        text-shadow: 0 0 0.25rem #000000, 0 0 1.5rem #000000;
    }

    :root:not([data-contrast="standard"]) #six .textbox-transition1 {
        text-shadow: 0 0 0.25rem var(--story-color-card), 0 0 1.5rem var(--story-color-card);
    }

    :root:not([data-contrast="standard"]) #six .transition-emphasis {
        background-size: 100% 0.18em;
    }
}

@media (forced-colors: active) {
    #six,
    #six #main-content,
    #six .sceneEnd,
    #six :is(.page-header, .intro, .section2-2, .setup, .section3, .section4, .section5, .resources, .acknowledgments, .references, .story-pagination, .botNav) {
        color: CanvasText;
        background: Canvas;
    }

    #six :is(.title-card, .image-card, .organ-comparison, .tissue-sample, .tissue-comparison__takeaway, .tutorial-callout, .resource-card, .acknowledgments__list li) {
        color: CanvasText;
        background: Canvas;
        border: 2px solid CanvasText;
        box-shadow: none;
    }

    #six .transition__overlay {
        background: Canvas;
        opacity: 0.72 !important;
    }

    #six .textbox-transition,
    #six .textbox-transition1 {
        color: CanvasText;
        text-shadow: none;
    }

}