.style__header--1JM2N {
    --copy-color: #c3c3c3;

    transition: top 1s ease-in;
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 100vw;
    height: 2.727rem /* 60 / 22 */;
    max-height: 60px;
    padding: 0 var(--gutter);
    background-color: #232323;

    /* flex parent */
    display: flex;
    align-items: center;
}

.style__header--1JM2N.style__show--3ETmm {
    top: 0;
}

.style__logo--10Ftu {
    width: 6rem;
    height: 1.598rem;
    max-width: 142px;
    max-height: 35.156px;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center;
       object-position: center;
}

.style__vertical-bar--3Ob1f {
    margin-right: 14px;
    margin-left: 14px;
    font-size: 11px;
}

.style__app-title--22Lgv {
    font-size: 13px;
}

@media screen and (max-width: 1335px) {
    .style__vertical-bar--3Ob1f, .style__app-title--22Lgv {
        display: none;
    }
}
.style__container--3_IRN .actb,
.style__container--3_IRN .actin-filaments {
    color: var(--actb);
}

.style__container--3_IRN .actn1,
.style__container--3_IRN .actin-bundles {
    color: var(--actn1);
}

.style__container--3_IRN .cent2,
.style__container--3_IRN .centrosome {
    color: var(--cent2);
}

.style__container--3_IRN .ctnnb1,
.style__container--3_IRN .adherens-junctions {
    color: var(--ctnnb1);
}

.style__container--3_IRN .dna {
    color: var(--dna);
}

.style__container--3_IRN .dsp,
.style__container--3_IRN .desmosomes {
    color: var(--dsp);
}

.style__container--3_IRN .fbl,
.style__container--3_IRN .nucleolus {
    color: var(--fbl);
}

.style__container--3_IRN .gja1,
.style__container--3_IRN .gap-junction {
    color: var(--gja1);
}

.style__container--3_IRN .lamp1,
.style__container--3_IRN .lysosome {
    color: var(--lamp1);
}

.style__container--3_IRN .lmnb1,
.style__container--3_IRN .nuclear-envelope {
    color: var(--lmnb1);
}

.style__container--3_IRN .memb {
    color: var(--memb);
}

.style__container--3_IRN .myh10,
.style__container--3_IRN .actomyosin-bundles {
    color: var(--myh10);
}

.style__container--3_IRN .sec61b,
.style__container--3_IRN .er,
.style__container--3_IRN .endoplasmic-reticulum {
    color: var(--sec61b);
}

.style__container--3_IRN .st6gal1,
.style__container--3_IRN .golgi {
    color: var(--st6gal1);
}

.style__container--3_IRN .tjp1,
.style__container--3_IRN .tight-junctions {
    color: var(--tjp1);
}

.style__container--3_IRN .tomm20,
.style__container--3_IRN .mitochondria {
    color: var(--tomm20);
}

.style__container--3_IRN .tuba1b,
.style__container--3_IRN .microtubules {
    color: var(--tuba1b);
}

.style__figure--1XM2o {
    margin: 0;
}

.style__image--2_34E {
    /* most users agents will treat as inline by default; block will make positioning easier */
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center center;
       object-position: center center;
}

.style__section--3KJv8 {
    --copy-color: #c3c3c3;
    --copy-color-hover: #f2f2f2;

    top: var(--header-height);
    height: calc(100vh - var(--header-height) - var(--gutter));
    width: var(--one-column-body-width);

    /* flex parent */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.style__header--fmCvp {
    /* flex child */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(8.545rem - var(--header-height)); /* 188 / 22 */

    /* flex parent */
    display: flex;
    justify-content: center;
    align-items: center;
}

.style__header--fmCvp h2 {
    color: var(--copy-color);
    font-size: 1.091rem; /* 24 / 22 */
    margin: 0;
}

.style__primary-resources--kG76F {
    /* flex child */
    flex: 0 0 16.18rem; /* 356 / 22 */

    /* flex parent */
    display: flex;
}

.style__primary-resource-group--3smhM {
    height: 16.182rem; /* 356 / 22 */
    width: 29.545rem; /* 650 / 22 */
    background-color: #1e1e1e;
    margin: 0 0.5rem; /* 11 / 22 */
}

.style__primary-resource-group--3smhM:first-of-type {
    margin-left: 1rem;
}

.style__primary-resource-group--3smhM:last-of-type {
    margin-right: 1rem;
}

.style__primary-resource-cards--36ETE {
    padding: 0 1rem; /* 22 / 22 */

    /* flex parent */
    display: flex;
}

.style__primary-resource-group-title--6V66M {
    color: var(--copy-color);
    font-size: 1rem; /* 22 / 22 */
    margin: 0.5rem 0; /* 11 / 22 */
    text-align: center;
}

.style__primary-resource-card--8fU_f {
    height: 12.727rem; /* 280 / 22 */
    width: 13.272rem; /* 292 / 22 */
    padding: 1rem; /* 22 / 22 */
    background-color: #171717;

    /* flex parent */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.style__primary-resource-card--8fU_f:last-of-type {
    margin: 0 0 0 1rem; /* 22 / 22 */
}

.style__primary-resource-card-image-container--24dhs {
    /* flex child */
    flex: 1 0 auto;

    /* flex parent */
    display: flex;
}

.style__primary-resource-card-image--2Lm0z {
    width: 6.954rem; /* 153 / 22 */
    height: 6.318rem; /* 139 / 22 */
}

.style__primary-resource-card-text--1oSvM {
    /* flex child */
    flex: 0 0 3.14rem; /* 69 / 22 */
}

.style__primary-resource-card-title--150jC {
    color: var(--copy-color);
    font-size: 0.818rem; /* 18 / 22 */
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.style__primary-resource-card-description--IG72- {
    font-size: 0.727rem; /* 16 / 22 */
    font-weight: 300;
    margin: 0;
    padding: 0;
}

a.style__primary-resource-card--8fU_f {
    /* necessary because of antd */
    color: var(--copy-color);
}

a.style__primary-resource-card--8fU_f:hover {
    /* necessary because of antd */
    color: var(--copy-color-hover);
}

a.style__primary-resource-card--8fU_f:hover .style__primary-resource-card-title--150jC {
    /* necessary because of antd */
    color: var(--copy-color-hover);
}

.style__footer--19ldG {
    /* flex child */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 10.182rem; /* 224 / 22 */

    /* flex parent */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.style__footer-title--1k6Gf {
    font-size: 1rem; /* 22 / 22 */
}

.style__related-resources-list--10e5m {
    color: var(--copy-color);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.727rem; /* 16 / 22 */
    line-height: 1.63;
    font-weight: 300;
}

.style__related-resources-list--10e5m a {
    /* necessary because of antd */
    color: var(--copy-color);
}

.style__related-resources-list--10e5m a:hover {
    /* necessary because of antd */
    color: var(--copy-color-hover);
}

.style__related-resource-label--1Ab1y {
    font-weight: 600;
}

.style__section--1_pH2 {
    --copy-color: #c3c3c3;

    top: 0;
    height: var(--video-height);
    width: 100%;
}

.style__container--2URx1 {
    position: relative;
    height: 100%;
    width: var(--video-width);
    margin: 0 auto;
}

.style__button--2ci60 {
    border: none;
    border-radius: 4px;
    background-color: #2e2e2e;
    cursor: pointer;

    color: var(--copy-color);
    font-size: 1rem;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: -0.7px;
    text-align: center;

    position: absolute;
    top: 4rem;
    width: 12.72rem; /* 280 / 22 */
    max-width: 280px;
    height: 3rem; /* 66 / 22 */
    max-height: 66px;
}

.style__button--2ci60.style__left--1oNbK {
    left: 8rem;
}

.style__button--2ci60.style__right--2uIMc {
    right: 8rem;
}

.style__heading--3fcZD {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -3.5rem);
}

.style__scroll-hint-container--3njg1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;

    /* flex parent */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.style__scroll-hint-container--3njg1:focus,
.style__scroll-hint-container--3njg1:active {
    outline: none;
}

.style__scroll-hint--1nKMW {
    font-size: 0.9rem; /* 20 / 22 */
}

p.style__scroll-hint--1nKMW {
    color: var(--copy-color);
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: -0.4px;
    text-align: center;
    margin: 0;
}

svg.style__scroll-hint--1nKMW {
    height: 1rem;
}

.style__scroll-hint--1nKMW path {
    fill: var(--copy-color);
}

.style__title--2fQrm {
    width: 100%;
    margin: 0 0 0.25rem 0;
    color: var(--copy-color);
    font-size: 2.72rem; /* 60 / 22 */
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: -1.1px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.style__sub-title--1l0T8 {
    font-size: 1.18rem;
    letter-spacing: -0.9px;
    margin-bottom: 0.68rem;
}

.style__container--12_xR {
    margin: 0.41rem auto 0 auto;
    width: 13.8rem;
    height: 25.5rem;
    position: relative;
}
.style__checkbox-group--38qBS {
    width: 100%;
    height: 95%;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top:-1rem;
}

.style__container--12_xR label {
    font-size: 0.727rem;
}

.style__checkbox-group--38qBS,
.style__checkbox-group--38qBS label {
    width: 100%;
    font-size: 0.727rem;
    /* letter-spacing: -0.7px; */
}

.style__check-box-row---pMyw {
    margin-top: 0.05rem;
}

.style__sub-title--2poxT {
    margin-bottom: 0.45rem;
}
.style__preset-title--2C-JI {
    margin-top: 1rem;
}
.style__container--12_xR button, 
.style__preset-title--2C-JI{
    font-size: 0.727rem;
    margin-top: 0.32rem;
}

.style__container--12_xR .ant-checkbox-inner {
    width: 0.727rem;
    height: 0.727rem;
}

.style__container--12_xR .ant-checkbox-inner::after {
    width: 0.26rem;
    height: 0.41rem;
    border-color: #000;
}

.style__all-none--AF1h2 .ant-checkbox-inner {
    background-color: #fff;
}

.style__all-none--AF1h2 .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    height: 0.085rem;
}

.style__container--12_xR .actb .ant-checkbox-inner {
        background-color: var(--actb);
}

.style__container--12_xR .actn1 .ant-checkbox-inner {
    background-color: var(--actn1);
}
.style__container--12_xR .cent2 .ant-checkbox-inner {
    background-color: var(--cent2);
}
.style__container--12_xR .ctnnb1 .ant-checkbox-inner {
    background-color: var(--ctnnb1);
}
.style__container--12_xR .dsp .ant-checkbox-inner {
    background-color: var(--dsp);
}
.style__container--12_xR .fbl .ant-checkbox-inner {
    background-color: var(--fbl);
}
.style__container--12_xR .gja1 .ant-checkbox-inner {
    background-color: var(--gja1);
}
.style__container--12_xR .lamp1 .ant-checkbox-inner {
    background-color: var(--lamp1);
}
.style__container--12_xR .lmnb1 .ant-checkbox-inner {
    background-color: var(--lmnb1);
}
.style__container--12_xR .myh10 .ant-checkbox-inner {
    background-color: var(--myh10);
}
.style__container--12_xR .sec61b .ant-checkbox-inner {
    background-color: var(--sec61b);
}
.style__container--12_xR .st6gal1 .ant-checkbox-inner {
    background-color: var(--st6gal1);
}
.style__container--12_xR .tjp1 .ant-checkbox-inner {
    background-color: var(--tjp1);
}
.style__container--12_xR .tomm20 .ant-checkbox-inner {
    background-color: var(--tomm20);
}
.style__container--12_xR .tuba1b .ant-checkbox-inner {
    background-color: var(--tuba1b);
}
.style__container--12_xR .dna .ant-checkbox-inner {
    background-color: var(--dna);
}
.style__container--12_xR .memb .ant-checkbox-inner {
    background-color: var(--memb);
}

.style__container--3JXrP {
    display: flex;
    flex-direction: column;
    margin-top: 0.41rem;
}
.style__steps--1WFm7 {
    width: auto;
    width: initial;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 21.59rem;
    justify-content: space-between;
}
.style__steps--1WFm7 .stage-icon {
    background-size: contain;
    background-repeat: no-repeat;
    height: 3.86rem;
    width: 4.36rem;
    padding: 0;
    background-color: black;
    line-height: 1rem;
    /* to get the multiline text to the base of the box.  */
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    box-shadow: none;
    border-radius: 4px;
    border: none;
 }

 .style__steps--1WFm7 .ant-radio-button-wrapper-checked {
    border: solid 2px #676767;
 }

 .style__steps--1WFm7 span {
    font-size: 0.636rem;
 }

 .style__stages-buttons--2K3pW {
    padding: 0.54rem 0;
 }

 .style__stages-buttons--2K3pW button{
    height: 1.72rem;
    width: 1.72rem;
}
.style__stages-buttons--2K3pW .ant-btn:not(.ant-btn-circle):not(.ant-btn-circle-outline).ant-btn-icon-only {
    padding: 0 0.36rem;
}

 .style__sub-title--39B8w {
     text-align: center;
 }

.style__steps--1WFm7 .prophase-icon {
    background-image: url("/assets/prophase-icon.png");
}

.style__steps--1WFm7 .metaphase-icon {
    background-image: url("/assets/metaphase-icon.png");
}

.style__steps--1WFm7 .interphase-icon {
    background-image: url("/assets/interphase-icon.png");
}
.style__steps--1WFm7 .prometaphase-icon {
    background-image: url("/assets/prometaphase-icon.png");
}
.style__steps--1WFm7 .anaphase-icon {
    background-image: url("/assets/anaphase-icon.png");
}
.style__container--3jwfD {
    top: var(--header-height);
    height: calc(100vh - var(--header-height) - var(--gutter));
    width: var(--one-column-body-width);
    display: flex;
    flex-direction: column;
    font-size: 0.72rem;
    font-weight: 300;
}

.style__container--3jwfD button, 
.style__container--3jwfD label {
    font-size: 0.72rem;
}

.style__container--3jwfD button{    
    height: 1.36rem;
    padding: 0 0.68rem;
}

.style__title--399dQ {
    text-align: center;
    color: #c3c3c3;
    font-size: 1rem;
    margin: 1rem 0 0.75rem 0;
}

.style__viewer-and-controls--cs5bn {
    /* flex child */
    flex: 1 0 auto;
    height: 28rem;
    /* flex parent */
    display: flex;
}

.style__controls--2qzlI {
    /* flex parent */
    display: flex;
}

.style__viewer-col--2yq3R {
    display: flex;
    flex-direction: column;
    width: 38rem;
    height: 25.9rem;
}

.style__viewer--28aVK {
    /* flex child */
    flex: 1 0 auto;
    height: 24.04rem;
}

.style__button-row--2-xUO {
    display: flex;
    justify-content: space-between;
    margin: 0.45rem 0;
}

/* ant d overrides that couldnt be accomplished in theme file */
.style__container--3jwfD .ant-btn:hover, 
.style__container--3jwfD .ant-btn:focus,
.style__container--3jwfD .ant-btn:active {
    color: #fff;
}

.style__button-row--2-xUO .ant-radio-group {
    height: 1.36rem;
}

.style__button-row--2-xUO .ant-radio-button-wrapper {
    height: 100%;
    padding: 0 0.68rem;
    line-height: normal;
    line-height: initial;
}
.style__button-row--2-xUO .ant-radio-button-wrapper span {
    line-height: normal;
    line-height: initial;
}

.style__button-row--2-xUO .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover,
.style__button-row--2-xUO .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active,
.style__container--3jwfD .ant-radio-group-solid .ant-radio-button-wrapper-checked {
    background: #2e2e2e;
    color: #f2f2f2;
    border-color: #2e2e2e;
    box-shadow: -1px 0 0 0 #2e2e2e;
}
.modal-style__container--1RZPO {
    --border-color: #4a4a4a;
    --text-color: #c7c7c7;
    --structure-color: #f2f2f2;
}

.modal-style__container--1RZPO {
    max-width: 916px;
    max-height: 524px;
    width: 41.64rem!important;
    height: 23.82rem;
}

.modal-style__container--1RZPO .ant-modal-header {
    border: 0.5px solid transparent;
    border-bottom: none;
    background: none;
    padding: 0.318rem;
}

.modal-style__container--1RZPO .ant-modal-title {
    text-align: center;
    color: var(--text-color);
    font-size: 0.91rem;
    font-weight: 300;
    margin: 0 0.91rem;
}

.modal-style__container--1RZPO .ant-modal-close-x {
    font-size: 0.7rem;
    height: 0.8rem;
    width: 0.8rem;
    line-height: normal;
    line-height: initial;
}

.modal-style__container--1RZPO .ant-modal-close {
    top: 0.2rem;
    right: 0.2rem;
}
 
.modal-style__container--1RZPO .ant-modal-body {
    padding: 0 0 0.7rem 1.41rem;
}

.modal-style__container--1RZPO .ant-modal-content {
    border: 0.5px solid var(--border-color);
}

.modal-style__membrane--1ZFXE {
    color: var(--memb);
}

.modal-style__dna--2UJU0 {
    color: #44eafd;
}

.modal-style__structure--29fhW {
    color: var(--structure-color);
}

.modal-style__meta-data--1Vb0z {
    font-weight: 300;
    font-size: 0.73rem;
    line-height: 2;
    color: #c7c7c7;
}

.modal-style__info--1zJHR {
    font-weight: 600;
    color: var(--text-color);
}

/*z stack app overrides */
.modal-style__container--1RZPO .z-stack-scroller {
    justify-content: stretch;
}

.modal-style__container--1RZPO .z-stack-scroller-controls-container {
    width: 1.14rem;
}
.modal-style__container--1RZPO :gobal(.modal-style__z-stack-scroller-stack--ioC3M) {
    width: 18rem;
}

.modal-style__container--1RZPO .image-caption {
    font-size: 0.72rem;
    padding-top: 0.68rem;
}

.modal-style__container--1RZPO .z-stack-scoller-play-controls {
    font-size: 0.72rem;
}

.modal-style__container--1RZPO .z-stack-scroller-slider {
    height: 7.8rem;
}

.modal-style__container--1RZPO .z-stack-scroller-btn {
    height: 1.18rem;
    width: 1.18rem;
    border-radius: 4px;
    padding: 0;
}

.modal-style__container--1RZPO .z-stack-scroller-btn svg {
    height: 0.72rem;
    width: 0.72rem;    
}
/* Since the z stack images are restricted by resolution, dont want captions and title to keep growing*/
@media screen and (min-width: 1366px) {
    .modal-style__container--1RZPO .image-caption {
        font-size: 16px;
    }
    .modal-style__container--1RZPO .ant-modal-title {
        font-size: 22px
    }
    .modal-style__meta-data--1Vb0z {
        font-size: 16px;
    }
    .modal-style__container--1RZPO .z-stack-scoller-play-controls {
        font-size: 16px;
    }
    .modal-style__container--1RZPO .z-stack-scroller-slider {
        height: 172px;
    }
    .modal-style__container--1RZPO .z-stack-scroller-btn svg {
        height: 16px;
        width: 16px;
    }
}

.style__container--1so7a {
    --background-color: #1e1e1e;
    --font-weight: 300;
    top: var(--header-height);
    height: calc(100vh - var(--header-height) - var(--gutter));
    width: var(--one-column-body-width);
    margin: auto;
}

.style__container--1so7a .ant-card-body {
    display: none;
}

.style__title--16fDf {
  padding: 0 var(--gutter);
  font-weight: var(--font-weight);
  font-size: 1rem;
  text-align: center;
  color: #c3c3c3;
  margin-top:2rem;
}

.style__sub-title--3T9D9 {
  font-size: 0.64rem;
  color: #f2f2f2;
  font-weight: 600;
}

.style__center--2dkt4 {
  text-align: center;
}

.style__grid--2wF65 {
  margin-top: 1.18rem;
}

.style__grid-label--3fL7L {
  width: 100%;
  display: inline-block;
  font-size: 0.5rem;
  font-weight: 300;
  color: #a4a4a4;
}

.style__row--sjCNC {
  margin-top: 0.15rem;
}

.style__row--sjCNC span {
  font-size: 0.55rem;
}

.style__row--sjCNC .ant-col.ant-col-1 {
  margin-left: 0.15rem;
  flex: 1 1 auto;
}
/**
 *  LAYOUT
 */
.style__section--1si0j {
    --background-color: #1e1e1e;
    --font-color: #c3c3c3;
    --font-weight: 300;

    position: absolute;
    background: var(--background-color);
    padding: 0 var(--gutter);
    overflow-y: hidden;
    color: var(--font-color);
    font-weight: var(--font-weight);
    font-size: 1rem; /* 22 / 22 */
    line-height: 1.35;
}

.style__container--2xVJi {
    position: relative;
    height: 100%;
    width: 100%;
}

.style__gradient--mwKq5 {
    position: absolute;
    height: 3rem;
    width: 100%;
}

.style__gradient-top--2vhFe {
    top: 0;
    background: linear-gradient(to bottom, rgba(30,30,30,1), rgba(30,30,30,0));
}

.style__gradient-bottom--DndT6 {
    bottom: 0;
    background: linear-gradient(to top, rgba(30,30,30,1), rgba(30,30,30,0));
}

.style__content--3Q2Tv {
    position: absolute;
}

.style__content--3Q2Tv ul {
    list-style: none;
}

.style__content--3Q2Tv p:last-of-type {
    margin-bottom: 0;
}

.style__two-column-layout--HAvcH {
    height: var(--two-column-body-height);
    width: var(--two-column-body-width);

    /* tether to right edge of video, which is horizontally centered in the page */
    --video-right-edge: calc(50% + var(--video-width) / 2);
    left: calc(var(--video-right-edge) - var(--gutter)); /* push all the way to the right edge of the video, minus gutter */
    transform: translateX(-100%); /* pull back in 100% of content width to accomplish tethering to right edge of video */
}

.style__one-column-layout--2Vjtz {
    width: var(--one-column-body-width);
    height: var(--one-column-body-height);
    left: 50%;
    transform: translateX(-50%);
}

/* hide gradient in one-column layout; no text stacking allowed */
.style__one-column-layout--2Vjtz .style__gradient--mwKq5 {
    display: none;
}

.style__inline-video--3_ybn {
    display: block;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center center;
       object-position: center center;
    margin-bottom: 0.5rem;
}

.style__inline-image--1ocUw {
    width: 100%;
    margin-bottom: 0.25rem;
}

.style__inline-media-caption--3ivW_ {
    font-size: 73%;
    padding: 0 0 0 1rem;
}

.style__inline-media-container--2y5Da {
    margin: 1rem 0 0 0;
}

/**
 *  SECTION (GRAY BOX) ANIMATIONS
 *
 *  Supported:
 *     "push" - New section slides in as old section slides out.
 */
.style__section--1si0j {
    transition: top 0.7s ease-in;
}

.style__section--1si0j.style__exiting-up--1SXbR,
.style__section--1si0j.style__exited--2OdNO {
    top: -100vh;
}

.style__section--1si0j.style__entering-up--2mUnw,
.style__section--1si0j.style__entering-down--2H2rH,
.style__section--1si0j.style__entered--AFGMg {
    top: var(--header-height);
}

.style__section--1si0j.style__exiting-down--3B0PZ,
.style__section--1si0j.style__initial--1wJzf {
    top: 100vh;
}


/**
 *  CONTENT (TEXT, ETC.) ANIMATIONS
 *
 *  Supported:
 *      "push": New content slides in, old content slides out
 *      "stack": Upcoming content pokes head above bottom of container, then slides into place; old content shows tail hanging from top of container.
 *      "fade": New content fades in as old content fades out (cross-fade)
 */
.style__content--3Q2Tv {
    transition: top 0.3s ease-in, opacity 1s ease-in, transform 0.3s ease-out;
}

.style__content--3Q2Tv.style__initial--1wJzf:not(.style__prev-sibling-in-view--3YgiX),
.style__content--3Q2Tv.style__exited--2OdNO:not(.style__next-sibling-in-view--XJPVh) {
    visibility: hidden;
}

/* ---- PUSH (default) ---- */
.style__push--2-28J.style__exiting-up--1SXbR,
.style__push--2-28J.style__exited--2OdNO {
    top: 0; /* above viewport once transform is applied */
    transform: translateY(-100%);
}

.style__push--2-28J.style__entering-down--2H2rH,
.style__push--2-28J.style__entering-up--2mUnw,
.style__push--2-28J.style__entered--AFGMg {
    /* vertical centering */
    top: 50%; /* push top to middle of its container */
    transform: translateY(-50%); /* nudge up 50% of content height to accomplish vertical centering */
}

.style__push--2-28J.style__exiting-down--3B0PZ,
.style__push--2-28J.style__initial--1wJzf {
    top: 100%; /* below viewport */
    transform: translateY(0);
}


/*
 * ---- STACK ----
 *
 * Only ever show 2em worth of content. This is coordinated with the size of the gradients
 * that sit on top of the stacked content.
 */
.style__stack--3jwWz.style__exited--2OdNO {
    top: -50%;
}

.style__stack--3jwWz.style__exiting-up--1SXbR,
.style__stack--3jwWz.style__exited--2OdNO {
    transform: translateY(-100%);
}

.style__stack--3jwWz.style__exiting-up--1SXbR.style__next-sibling-in-view--XJPVh,
.style__stack--3jwWz.style__exited--2OdNO.style__next-sibling-in-view--XJPVh {
    top: 0;
}

.style__stack--3jwWz.style__exited--2OdNO.style__next-sibling-in-view--XJPVh {
    transform: translateY(calc(-100% + 2rem));
}

.style__stack--3jwWz.style__exiting-up--1SXbR,
.style__stack--3jwWz.style__entering-down--2H2rH,
.style__stack--3jwWz.style__entering-up--2mUnw,
.style__stack--3jwWz.style__exiting-down--3B0PZ,
.style__stack--3jwWz.style__entered--AFGMg {
    transform: translateY(-50%);
}

.style__stack--3jwWz.style__entering-down--2H2rH,
.style__stack--3jwWz.style__entering-up--2mUnw,
.style__stack--3jwWz.style__entered--AFGMg {
    top: 50%; /* push top to middle of its container */
}

.style__stack--3jwWz.style__exiting-down--3B0PZ.style__prev-sibling-in-view--3YgiX,
.style__stack--3jwWz.style__initial--1wJzf.style__prev-sibling-in-view--3YgiX {
    top: 100%;
}

.style__stack--3jwWz.style__initial--1wJzf.style__prev-sibling-in-view--3YgiX {
    transform: translateY(-2rem);
}

.style__stack--3jwWz.style__exiting-down--3B0PZ,
.style__stack--3jwWz.style__initial--1wJzf {
    top: 150%; /* below viewport */
}

.style__stack--3jwWz.style__initial--1wJzf {
    transform: translateY(0);
}

/* ---- FADE ---- */
.style__fade--11AP0 {
    /* vertical centering */
    top: 50%; /* push top to middle of its container */
    transform: translateY(-50%); /* nudge up 50% of content height to accomplish vertical centering */
}

.style__fade--11AP0.style__entering-down--2H2rH,
.style__fade--11AP0.style__entering-up--2mUnw,
.style__fade--11AP0.style__exiting-up--1SXbR,
.style__fade--11AP0.style__exited--2OdNO,
.style__fade--11AP0.style__initial--1wJzf {
    opacity: 0;
}

.style__fade--11AP0.style__entered--AFGMg {
    opacity: 1;
}

.arrow__button--2b89j {
    --disabled-fill: #3e3e3e;
    --enabled-fill: #9b9b9b;

    position: relative;

    background-color: var(--enabled-fill);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10%;
    cursor: pointer;

    width: 0.727rem; /* 16 / 22 */
    height: 0.863rem; /* 19 / 22 */
}

.arrow__button--2b89j.arrow__disabled--YDwQ6 {
    background-color: var(--disabled-fill);
    cursor: not-allowed;
}

.arrow__button--2b89j svg {
    position: absolute;
    top: 0;
    left: 0;
}
.section__container--1C9Vh {
    --label-fill: #c3c3c3;
    --label-fill-active: #f2f2f2;
    --label-weight: 300;
}

.section__label--3e8eO {
    fill: var(--label-fill);
    fill-opacity: 1;
    font-size: 16px;
    font-weight: var(--label-weight);
    text-anchor: middle;
    cursor: pointer;
}

.section__label-active--3j1eu {
    fill: var(--label-fill-active);
}
.chapter__container--hLvYJ {
    --inactive-fill: #737373;
    --section-selected-fill: #c3c3c3;
    --chapter-selected-fill: #f2f2f2;
    --chapter-selected-not-focused: #3e3e3e;
    --chapter-label-selected: #f2f2f2;
}

.chapter__chapter-rect--3bJg8 {
    fill: var(--inactive-fill);
    fill-opacity: 1;
    transform: translateY(-1px); /* vertical centering */
}

.chapter__section-selected--1Miql {
    fill: var(--section-selected-fill);
}

.chapter__chapter-selected--2S3p6 {
    fill: var(--chapter-selected-fill);
    transform: translateY(-2px); /* vertical centering */
}

.chapter__chapter-hovered--3V7d3 {
    transform: translateY(-2px); /* vertical centering */
}

.chapter__hit-rect--33uDz {
    cursor: pointer;
    fill: none;
}

.chapter__label--18BFx {
    fill: #dbdbdb;
    fill-opacity: 0;
    font-size: 16px;
    font-weight: 300;
    text-anchor: middle;
}

.chapter__label-hovered--2wlo6 {
    fill-opacity: 1;
    fill: var(--chapter-selected-fill);
}

.chapter__label-active--3AHqA {
    fill-opacity: 1;
    fill: var(--chapter-label-selected);
}

/* This chapter is selected but user is current hovering over another one. */
.chapter__label-selected-but-not-focused--1zB-j {
    fill-opacity: 1;
    fill: var(--chapter-selected-not-focused);
}
.nav-style__container--1A36z {
    --arrow-margin: 0.5em;

    margin-left: 5.227rem; /* 115 / 22 */

    /* flex parent */
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav-style__arrow--SG3r2 {
    flex: 0 0 auto;
    align-self: center;
}

.nav-style__arrow--SG3r2.nav-style__left--35SaZ {
    margin-right: var(--arrow-margin);
}

.nav-style__arrow--SG3r2.nav-style__right--3EnmI {
    margin-left: var(--arrow-margin);
}

.nav-style__main-nav--2WUIA {
    flex: 1 1 auto;
}

.style__header--DYCeW {
    --title-font-weight: 300;
    --title-color: #f2f2f2;
    --header-padding: 10px;

    transition: top 1s ease-in;
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: var(--video-width);
    height: var(--header-height);
    padding: var(--header-padding) var(--gutter);

    display: flex;
}

.style__header--DYCeW.style__show--1J5q8 {
    top: 0;
}

.style__title-container--1xPSy {
    cursor: pointer;

    /* flex child */
    flex: 0 0 auto;

    /* flex parent */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.style__title--1YT9W {
    font-weight: var(--title-font-weight);
    color: var(--title-color);
    flex: 0 0 auto; /* don't grow, don't shrink */
    margin: 0;

    font-size: 1.18rem; /* 26 / 22 */
}

.style__nav--37xLN {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}
/**
 * LAYOUT
 */
.style__section--1vhsd {
    position: absolute;
    transition: top 2s;

    left: 50%;
    transform: translateX(-50%);
}

/**
 *  ANIMATION HOOKS
 */
.style__exiting-down--1vjXL,
.style__initial--3Jsn7 {
    top: 300vh; /* waaay below viewport */
}

.style__entering-up--GaV0c,
.style__exiting-up--30Jt6,
.style__entering-down--p7G6M,
.style__exiting-down--1vjXL,
.style__entered--1paFA {
    opacity: 1;
}

.style__exiting-up--30Jt6,
.style__exited--2Lrx4 {
    top: -300vh; /* waaay above viewport */
}

.style__initial--3Jsn7,
.style__exited--2Lrx4 {
    opacity: 0;
}

.style__base--11vdE {
    height: var(--video-height);
    width: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    transition: opacity 1s;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: top left;
       object-position: top left;
}

.style__initial--1ehAw {
    top: 300vh; /* waaay below viewport */
}

.style__entered--2tV-F {
    opacity: 1;
}

.style__exiting-down--L9sP0,
.style__exiting-up--3KTpt,
.style__exited--1aWiW,
.style__initial--1ehAw {
    opacity: 0;
}

.style__exited--1aWiW {
    top: -300vh; /* waaay above viewport */
}

.style__container--4WaE7 {
    font-size: 1rem;
    color: #c3c3c3;
    position: absolute;
    text-align: center;
    z-index: 999;
    opacity: 0;
    bottom: calc(var(--gutter) + 0.3rem);
    right: var(--gutter);
    background: radial-gradient(rgba(30, 30, 30, 0.89), rgba(23, 23, 23, 0));
    width: 4.0rem;
    line-height: 0.5;
}

.style__container--4WaE7.style__show--3e9LF {
    transition: opacity 1s ease-out;
    opacity: 1;
}

svg.style__scroll-hint--2KwlF {
    width: 1rem;
}

.style__scroll-hint--2KwlF path {
    fill: #c3c3c3;
}
html {
    /* Overwritten in `src/index.tsx` to pin to window.innerHeight */
    --viewport-height: 100vh;

    /* EVERYTHING is based on this. These are overwritten in `src/index.tsx`. */
    --video-height: calc((9 / 16) * 100vw);
    --video-width: 100vw;

    /* sizing relative to video */
    --gutter: calc(0.01611 * var(--video-width));
    --header-height: calc(0.1171875 * var(--video-height));

    --one-column-body-width: calc(var(--video-width) - (2 * var(--gutter)));
    --one-column-body-height: calc(0.1536 * var(--video-height));

    --two-column-body-width: calc(0.3119 * var(--video-width));
    --two-column-body-height: calc(var(--video-height) - var(--header-height) - var(--gutter));

    --empty-space-background-color: #0a0a0a;
    --background-color: #141414;

    /* responsive typography locks */
    --min-font: 8px; /* this is used, somewhat arbitrarily, as part of a y-intercept calculation for the scaling function */
    --max-font: 22px;
    --min-vw: 568px;
    --max-vw: 1366px;
    --min-vh: 320px;
    --max-vh: 768px;

    box-sizing: border-box;
}

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

html, body {
    background-color: #0a0a0a;
    background-color: var(--empty-space-background-color);
    position: fixed;
}

html, body, main {
    width: 100vw;
    height: 100vh;
    height: var(--viewport-height);
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

body {
    /* prevent rubberbanding */
    overscroll-behavior-y: none;

    /* just, don't do anything */
    touch-action: none;
}

main {
    position: relative;
    font-family: 'Overpass', sans-serif;
    line-height: normal;
    letter-spacing: normal;
    font-stretch: normal;
}

.global__wrapper--2_Tzp {
    background-color: #141414;
    background-color: var(--background-color);
    height: calc((9 / 16) * 100vw);
    height: var(--video-height);
    width: 100vw;
    width: var(--video-width);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/*
 * ---- RESPONSIVE TYPOGRAPHY ----
 *
 * The smallest dimension of the video controls the sizing of the font. E.g., when the height is greater than the width,
 * the width controls the font-size. This is intended to set 1em within this parent container. All child element
 * font-sizes should be based on rem to take advantage of these calculations.
 *
 * Additionally, **any** size property that can accept rem units can be set by these same calculations. E.g., an element's
 * height, width, absolute position, etc. Note that we are using `rem` based units instead of `em` to avoid the cascading
 * nature of em.
 *
 * For example, if a design mockup (with dimensions 1366 x 768) has a font-size for an element pegged to 34px it should
 * be sized in this application according to the following steps:
 *      1. determine some base unit within that design (i.e., determine what "1em" equals in that design)
 *      2. divide font-size for that element within the design by the base unit.
 * In this example, following those instructions leads to the font-size for the element should be set to 1.54rem (~ 34 / 22).
 *
 * Adapted from general fluid typography formula:
 * calc([minimum font size with unit] + ([maximum font size] - [minimum font size]) * ((100v(w|h) - [minimum viewport dimension with unit]) / ([maximum viewport dimension] - [minimum viewport dimension])));
 *
 * Reference:
 * https://fvsch.com/css-locks/
 */

/* in portrait mode, the video width determines the root font-size */
@media (orientation: portrait) {
    html {
        font-size: calc(8px + (22 - 8) * (100vw - 568px) / (1366 - 568));
        font-size: calc(var(--min-font) + (22 - 8) * (var(--video-width) - var(--min-vw)) / (1366 - 568));
    }
}

@media (orientation: portrait) and (min-width: var(--max-vw)) {
    html {
        font-size: 22px;
        font-size: var(--max-font);
    }
}

/* in landscape mode, the video height determines the root font-size */
@media (orientation: landscape) {
    html {
        font-size: calc(8px + (22 - 8) * (calc((9 / 16) * 100vw) - 320px) / (768 - 320));
        font-size: calc(var(--min-font) + (22 - 8) * (var(--video-height) - var(--min-vh)) / (768 - 320));
    }
}

@media (orientation: landscape) and (min-height: var(--max-vh)) {
    html {
        font-size: 22px;
        font-size: var(--max-font);
    }
}

:root {
    --actb: #FFEE1E;
    --actn1: #bbcd22;
    --cent2: #F07C4C;
    --ctnnb1: #FD92B6;
    --dsp: #f0486e;
    --fbl: #0099ff;
    --gja1: #c26cff;
    --lamp1: #ffc35c;
    --lmnb1: #33ffff;
    --myh10: #ff6633;
    --sec61b: #537eff;
    --st6gal1: #61d900;
    --tjp1: #FD61D6;
    --tomm20: #FF4d4d;
    --tuba1b: #ff9900;
    --actin-filaments: var(--actb);
    --actin-bundles: var(--actn1);
    --centrosome: var(--cent2);
    --adherens-junctions: var(--ctnnb1);
    --desmosomes: var(--dsp);
    --nucleolus: var(--fbl);
    --gap-junction: var(--gja1);
    --lysosome: var(--lamp1);
    --nuclear-envelope: var(--lmnb1);
    --actomyosin-bundles: var(--myh10);
    --er: var(--sec61b);
    --endoplasmic-reticulum: var(--sec61b);
    --golgi: var(--st6gal1);
    --tight-junctions: var(--tjp1);
    --mitochondria: var(--tomm20);
    --microtubules: var(--tuba1b);
    --dna: #aeaeae;
    --memb: #ff44ff;
}