#sec-hero-prototype {
    height: 100vh;
    min-height: 100vh;
    background: #cfc4aa;
    color: #111111;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

#sec-01 {
    display: none !important;
}

.om-hero {
    height: 100vh;
    min-height: 100vh;
    display: block;
    padding: 0;
    position: relative;
}

.om-hero__stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    cursor: crosshair;
    touch-action: none;
    overflow: hidden;
    background: #cfc4aa;
}

.om-hero__webgl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #cfc4aa;
}

#sec-hero-prototype ~ nav,
body:has(#sec-hero-prototype) nav {
    color: #111111;
}

body:has(#sec-hero-prototype) .nav-links a {
    color: #111111;
}

body:has(#sec-hero-prototype) .wordmark-white {
    opacity: 1;
}

body:has(#sec-hero-prototype) .wordmark-black,
body:has(#sec-hero-prototype) .wordmark-amber-white {
    opacity: 0;
}

body:has(#sec-hero-prototype) .wordmark-white circle,
body:has(#sec-hero-prototype) .wordmark-white path {
    fill: #111111 !important;
    transition: fill 0.16s ease;
}

body:has(#sec-hero-prototype) .wordmark-white path:first-of-type {
    fill: #c8922a !important;
}

body:has(#sec-hero-prototype).om-hero-logo-on-dark .wordmark-white circle,
body:has(#sec-hero-prototype).om-hero-logo-on-dark .wordmark-white path,
body:has(#sec-hero-prototype).om-hero-logo-on-dark .wordmark-white path:first-of-type {
    fill: #ffffff !important;
}

body:has(#sec-hero-prototype).om-hero-logo-on-light .wordmark-white circle,
body:has(#sec-hero-prototype).om-hero-logo-on-light .wordmark-white path {
    fill: #111111 !important;
}

body:has(#sec-hero-prototype).om-hero-logo-on-light .wordmark-white path:first-of-type {
    fill: #c8922a !important;
}