:where(html) {
    line-height: 1.15
}

:where(h1) {
    font-size: 2em;
    -webkit-margin-after: .67em;
    margin-block-end: .67em;
    -webkit-margin-before: .67em;
    margin-block-start: .67em
}

:where(dl, ol, ul) :where(dl, ol, ul) {
    -webkit-margin-after: 0;
    margin-block-end: 0;
    -webkit-margin-before: 0;
    margin-block-start: 0
}

:where(hr) {
    box-sizing: content-box;
    color: inherit;
    height: 0
}

:where(pre) {
    font-family: monospace, monospace;
    font-size: 1em
}

:where(abbr[title]) {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

:where(b, strong) {
    font-weight: bolder
}

:where(code, kbd, samp) {
    font-family: monospace, monospace;
    font-size: 1em
}

:where(small) {
    font-size: 80%
}

:where(table) {
    border-color: currentColor;
    text-indent: 0
}

:where(button, input, select) {
    margin: 0
}

:where(button) {
    text-transform: none
}

:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
    -webkit-appearance: button
}

:where(progress) {
    vertical-align: baseline
}

:where(select) {
    text-transform: none
}

:where(textarea) {
    margin: 0
}

:where(input[type="search" i]) {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner {
    border-style: none;
    padding: 0
}

:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {
    outline: 1px dotted ButtonText
}

:where(:-moz-ui-invalid) {
    box-shadow: none
}

:where(dialog) {
    background-color: #fff;
    border: solid;
    color: #000;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
    left: 0;
    margin: auto;
    padding: 1em;
    position: absolute;
    right: 0;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content
}

:where(dialog:not([open])) {
    display: none
}

:where(summary) {
    display: list-item
}

*,
*:before,
*:after {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    -webkit-touch-callout: none
}

* {
    margin: 0;
    padding: 0
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

button {
    background: none;
    border: none;
    border-radius: none;
    color: inherit;
    font: inherit;
    outline: none;
    cursor: pointer
}

input,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    pointer-events: auto
}

ol,
ul {
    list-style: none
}

*:before,
*:after {
    pointer-events: none
}

.template--no-select {
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent
}

.template--no-select:focus {
    outline: none
}

.template--no-scroll {
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.template--no-scroll::-webkit-scrollbar,
.template--no-scroll::-webkit-scrollbar-track,
.template--no-scroll::-webkit-scrollbar-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    background: transparent;
    display: none
}

.template--hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.template--hide-scrollbar::-webkit-scrollbar,
.template--hide-scrollbar::-webkit-scrollbar-track,
.template--hide-scrollbar::-webkit-scrollbar-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    background: transparent;
    display: none
}

.template--fixed-full-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    touch-action: none
}

.template--is-active {
    display: none
}

.template--is-active.is-active {
    display: block
}

.component--active {
    pointer-events: none;
    opacity: 0
}

.component--active.--active {
    opacity: 1;
    pointer-events: auto
}

.no-transition * {
    transition: none !important;
    -webkit-animation: none !important;
    animation: none !important
}

.no-transition *:before,
.no-transition *:after {
    transition: none !important;
    -webkit-animation: none !important;
    animation: none !important
}

@font-face {
    font-family: Aeonik;
    src: url(https://labs.lusion.co/assets/fonts/Aeonik-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Aeonik;
    src: url(https://labs.lusion.co/assets/fonts/Aeonik-RegularItalic.ttf) format("truetype");
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: Aeonik;
    src: url(https://labs.lusion.co/assets/fonts/Aeonik-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: Aeonik;
    src: url(https://labs.lusion.co/assets/fonts/Aeonik-Black.ttf) format("truetype");
    font-weight: 900;
    font-style: normal
}

@font-face {
    font-family: IBMPlexMono-Medium;
    src: url(https://labs.lusion.co/assets/fonts/IBMPlexMono-Medium.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

:root {
    --color-theme: #ffffff;
    --color-white: #ffffff;
    --color-white-translucent: rgba(255, 255, 255, .5);
    --color-black-translucent: rgba(0, 0, 0, .5);
    --color-white-semitransparent: rgba(255, 255, 255, .2);
    --color-black-semitransparent: rgba(0, 0, 0, .2);
    --color-black: #000000;
    --color-card-white: #ffffff;
    --color-card-black: #000000
}

[data-theme=dark] {
    --color-theme: #000000;
    --color-white: #000000;
    --color-white-translucent: rgba(0, 0, 0, .5);
    --color-black-translucent: rgba(255, 255, 255, .5);
    --color-white-semitransparent: rgba(0, 0, 0, .2);
    --color-black-semitransparent: rgba(255, 255, 255, .2);
    --color-black: #ffffff
}

*,
*:before,
*:after {
    box-sizing: border-box
}

a {
    text-decoration: none
}

a,
a:active,
a:hover,
a:visited {
    color: currentColor;
    outline: 0
}

html {
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-size: clamp(12px, calc(100vw / 3840 * 32), 16px)
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    html {
        font-size: clamp(12px, calc(100vw / 2482 * 40), 16px)
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    html {
        font-size: clamp(12px, calc(100vw / 1125 * 32), 16px)
    }
}

h1 {
    margin: 0;
    font-family: Aeonik, sans-serif;
    font-size: 6.15rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -.02em
}

@media only screen and (max-width: 1024px) {
    h1 {
        line-height: auto;
        font-size: 2.5rem
    }
}

h2 {
    margin: 0;
    font-family: Aeonik, sans-serif;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%
}

h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: Aeonik, sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%
}

p {
    font-family: Aeonik, sans-serif;
    margin: 0;
    line-height: 140%;
    letter-spacing: .05em;
    font-size: 1.45rem;
    font-weight: 400
}

.t-title-mono {
    font-family: IBMPlexMono-Medium, monospace;
    font-size: .8rem;
    text-transform: uppercase;
    opacity: .5
}

.stats {
    top: initial !important;
    bottom: 0px !important
}

.hide {
    visibility: hidden;
    pointer-events: none
}

.link {
    color: var(--color-black);
    transition: color .25s ease-in-out;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.34rem;
    line-height: 100%
}

.link:hover {
    color: var(--color-black-translucent)
}

.link:focus {
    color: var(--color-black-translucent)
}

.link--disable {
    opacity: .2;
    cursor: not-allowed
}

html,
body {
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    touch-action: none
}

html:focus,
body:focus {
    outline: none
}

html[data-theme=dark],
body[data-theme=dark] {
    background: black
}

::-moz-selection {
    background: var(--color-white);
    color: var(--color-theme)
}

::selection {
    background: var(--color-white);
    color: var(--color-theme)
}

html,
body,
button {
    font-family: Aeonik, sans-serif;
    font-weight: 400;
    color: var(--color-black)
}

html.no-js body {
    display: none
}

#ui {
    transition: height 1s ease-in-out
}

.no-scroll {
    pointer-events: none
}

#canvas {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    touch-action: none;
    background-color: transparent;
    z-index: -1;
    pointer-events: none
}

button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    outline: none;
    font-size: 1rem;
    cursor: pointer
}

input[type=submit],
input[type=reset] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    outline: none;
    font-size: 1.17rem;
    cursor: pointer
}

.input {
    width: 100%;
    height: 4.175rem;
    padding: 1.34rem;
    border: 1px solid var(--color-black);
    border-radius: 8px;
    background: transparent;
    font-size: 1.45rem;
    color: var(--color-black)
}

.input ::-moz-placeholder {
    color: var(--color-black-translucent);
    text-transform: uppercase
}

.input :-ms-input-placeholder {
    color: var(--color-black-translucent);
    text-transform: uppercase
}

.input ::placeholder {
    color: var(--color-black-translucent);
    text-transform: uppercase
}

.input:focus {
    outline: 1px solid var(--color-black)
}

.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active {
    color: var(--color-black);
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: var(--color-black);
    -webkit-transition: background-color 1000s ease-in-out 0s;
    transition: background-color 1000s ease-in-out 0s
}

footer {
    display: none;
    justify-content: flex-end;
    z-index: 1;
    margin-top: auto
}

::-moz-placeholder {
    font-family: Aeonik, sans-serif
}

:-ms-input-placeholder {
    font-family: Aeonik, sans-serif
}

::placeholder {
    font-family: Aeonik, sans-serif
}

.o-hide {
    display: none
}

.o-invisible {
    visibility: hidden
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .o-hide-phone {
        display: none !important
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .o-hide-tablet {
        display: none !important
    }
}

@media only screen and (max-width: 1024px) {
    .o-hide-tablet-and-below {
        display: none !important
    }
}

@media only screen and (min-width: 1024px) {
    .o-hide-desktop {
        display: none !important
    }
}

.svgFilterWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.dg.ac {
    z-index: 99999 !important
}

a {
    text-decoration: none;
    color: inherit
}

a:not(.card):hover {
    opacity: .9
}

a:focus {
    opacity: .9
}

.cursor {
    --size: 8rem;
    position: absolute;
    z-index: 99999;
    top: calc(-1 * var(--size) / 2);
    left: calc(-1 * var(--size) / 2);
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);
    pointer-events: none;
    -webkit-backdrop-filter: invert(1) grayscale(1);
    backdrop-filter: invert(1) grayscale(1);
    display: none
}

.cursor--visible {
    display: block
}

#tweakpane {
    z-index: 99999 !important;
    position: absolute
}

[class^=tp-] {
    z-index: 99999 !important
}

:root {
    --tp-base-background-color: hsl(230, 7%, 17%);
    --tp-base-shadow-color: hsla(0, 0%, 0%, .2);
    --tp-button-background-color: hsl(230, 7%, 70%);
    --tp-button-background-color-active: hsl(230, 7%, 85%);
    --tp-button-background-color-focus: hsl(230, 7%, 80%);
    --tp-button-background-color-hover: hsl(230, 7%, 75%);
    --tp-button-foreground-color: hsl(230, 7%, 17%);
    --tp-container-background-color: hsla(230, 7%, 75%, .1);
    --tp-container-background-color-active: hsla(230, 7%, 75%, .25);
    --tp-container-background-color-focus: hsla(230, 7%, 75%, .2);
    --tp-container-background-color-hover: hsla(230, 7%, 75%, .15);
    --tp-container-foreground-color: hsl(230, 7%, 75%);
    --tp-groove-foreground-color: hsla(230, 7%, 75%, .1);
    --tp-input-background-color: hsla(230, 7%, 75%, .1);
    --tp-input-background-color-active: hsla(230, 7%, 75%, .25);
    --tp-input-background-color-focus: hsla(230, 7%, 75%, .2);
    --tp-input-background-color-hover: hsla(230, 7%, 75%, .15);
    --tp-input-foreground-color: hsl(198, 100%, 50%);
    --tp-label-foreground-color: hsla(230, 7%, 75%, .7);
    --tp-monitor-background-color: hsla(0, 0%, 0%, .2);
    --tp-monitor-foreground-color: hsla(230, 7%, 75%, .7)
}

.app-wrapper {
    width: 100vw;
    min-height: 100vh;
    margin: 12rem 0 0
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .app-wrapper {
        margin: 8rem 0 0
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .app-wrapper {
        margin: 7rem 0 0
    }
}

.page-wrapper--hide {
    display: none
}

.logo-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.bottom-right-actions {
    position: fixed;
    bottom: 140px;
    right: 20px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 20px
}

@media only screen and (max-width: 1024px) {
    .bottom-right-actions {
        display: none
    }
}

.about__hero-wrapper {
    height: 80vh;
    display: flex;
    align-items: center;
    padding-bottom: 16vh
}

@media only screen and (max-width: 1024px) {
    .about__hero-wrapper {
        height: auto;
        display: block;
        padding-bottom: 0
    }
}

.about__hero {
    max-width: 76rem;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    margin: 0 auto;
    padding: 0rem 0 8rem
}

@media only screen and (max-width: 1024px) {
    .about__hero {
        display: block;
        padding: 8rem 0;
        margin: 0 5rem
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .about__hero {
        margin: 0 2rem;
        padding: 4rem 0 9.5rem
    }
}

.about__hero>* {
    font-size: 10rem;
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 100%;
    white-space: nowrap
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .about__hero>* {
        font-size: 6.4rem
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .about__hero>* {
        font-size: 4.8rem
    }
}

.about__hero>*:nth-child(1) {
    grid-column: 1 / 3;
    text-align: right;
    padding-top: .5rem;
    padding-right: 1.5rem
}

.about__hero>*:nth-child(2) {
    grid-column: 3 / 7
}

.about__hero>*:nth-child(3) {
    grid-column: 1 / 6
}

.about__hero>*:nth-child(4) {
    grid-column: 3 / 5;
    text-align: end
}

.about__hero>*:nth-child(5) {
    grid-column: 6 / -1;
    align-self: end;
    padding-bottom: 1.8rem;
    padding-left: 1rem
}

.about__hero>*:nth-child(6) {
    position: relative;
    grid-column: 1 / 9;
    text-align: center
}

@media only screen and (max-width: 1024px) {
    .about__hero>* {
        line-height: 103%;
        white-space: normal;
        text-align: left !important
    }

    .about__hero>*:nth-child(2) {
        padding: 1rem 0 2rem
    }
}

.about__hero-text--small {
    font-size: 1.17rem;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .1em
}

@media only screen and (max-width: 1024px) {
    .about__hero-text--small {
        font-size: 1rem
    }
}

.about__hero-text--italic {
    font-weight: 400;
    font-style: italic
}

@media only screen and (max-width: 1024px) {
    .about__hero-text--offset {
        margin-left: 4rem;
        margin-right: 3rem
    }
}

.about__hero a {
    position: absolute;
    bottom: 8%;
    right: 0;
    transform: translate(100%, -100%);
    text-decoration: none;
    color: inherit;
    line-height: 1
}

.about__hero a span {
    margin-right: .25rem
}

.about__content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 4rem;
    padding: 0 5rem;
    margin-bottom: 20vh
}

@media only screen and (max-width: 1024px) {
    .about__content {
        grid-gap: 4rem;
        grid-template-columns: 1fr
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .about__content {
        padding: 0 2rem
    }
}

.about-faq>* {
    line-height: 160%;
    letter-spacing: .02em
}

.about-faq__question {
    font-size: 2rem;
    font-weight: 700;
}

.about-faq__answer {
    font-size: 1.5rem;
    margin-top: 2.5rem
}

@media only screen and (max-width: 1024px) {
    .about-faq__answer {
        margin-top: 1rem;
        font-size: 1.8rem
    }
}

.about-faq--large .about-faq__answer {
    font-size: 3rem
}

@media only screen and (max-width: 1024px) {
    .about-faq--large .about-faq__answer {
        font-size: 2rem
    }
}

.about-faq:nth-child(1) {
    grid-column: 1 / span 5;
    margin-bottom: 3rem
}

.about-faq:nth-child(2) {
    grid-column: 4 / -1
}

.about-faq:nth-child(3) {
    grid-column: 4 / -1
}

@media only screen and (max-width: 1024px) {
    .about-faq:nth-child(1) {
        grid-column: auto;
        margin-bottom: 2rem
    }

    .about-faq:nth-child(2) {
        grid-column: auto
    }

    .about-faq:nth-child(3) {
        grid-column: auto
    }
}

.about-categories {
    line-height: 140%;
    white-space: nowrap
}

.about-categories svg {
    width: 1rem;
    height: 1rem;
    margin-right: .5rem
}

@media only screen and (max-width: 1024px) {
    .about-categories {
        line-height: 120%
    }
}

.about__footer {
    padding: 6.667rem 5rem 2.92rem;
    position: relative
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .about__footer {
        padding: 4rem 2rem
    }
}

.about__footer:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    background: var(--color-black);
    opacity: .2
}

.about__footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 8rem
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .about__footer-grid {
        grid-template-columns: 1fr;
        grid-gap: 4rem
    }
}

.about__footer-desc {
    grid-row: span 2
}

.about__footer-desc .about__footer-content {
    font-size: 2.5rem;
    gap: 0
}

.about__footer-title {
    margin-bottom: 1.5rem
}

.about__footer-content {
    text-transform: uppercase;
    font-size: 1.45rem;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.about__footer-contact {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

.detail {
    position: relative;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(24, 1fr);
    gap: 10vh 1.5rem;
    padding: 0 5rem;
    height: 100vh
}

@media only screen and (max-width: 1024px) {
    .detail {
        display: block;
        grid-template-rows: repeat(2, auto);
        padding: 6rem 5rem 0
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .detail {
        padding: 6rem 2rem 0
    }
}

.detail--first {
    height: 72vh
}

@media only screen and (max-width: 1024px) {
    .detail--first {
        height: auto
    }
}

.detail--override {
    height: auto;
    margin-top: 9rem;
    border-top: 1px solid var(--color-black-semitransparent)
}

@media only screen and (max-width: 1024px) {
    .detail--override {
        margin-top: 5rem
    }
}

.detail__hero {
    font-size: 6.15rem;
    font-weight: 400;
    line-height: 100%
}

.detail__left {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 100%;
    padding-bottom: 5vh;
    position: absolute;
    top: 0;
    grid-column-start: 1;
    grid-column-end: 13
}

@media only screen and (max-width: 1024px) {
    .detail__left {
        grid-row-start: 1;
        grid-row-end: 1;
        grid-column-start: 1;
        grid-column-end: -1;
        position: relative;
        top: 0;
        padding-bottom: 4rem
    }
}

.detail__left>* {
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem
}

.detail__right {
    position: absolute;
    top: 0;
    grid-column-start: 13;
    grid-column-end: 25;
    display: flex;
    flex-flow: column nowrap;
    gap: 4rem
}

@media only screen and (max-width: 1024px) {
    .detail__right {
        position: relative;
        grid-row-start: 2;
        grid-row-end: 2;
        grid-column-start: 1;
        grid-column-end: -1
    }
}

.detail__bottom {
    grid-column-start: 1;
    grid-column-end: -1
}

.detail__img {
    width: 100%;
    height: 85vh;
    border-radius: 16px;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0
}

@media only screen and (max-width: 1024px) {
    .detail__img {
        width: 100%;
        height: 50vh;
        margin-left: 0;
        margin-top: 1rem;
        margin-bottom: 4rem
    }
}

.detail__img--show {
    opacity: 1
}

.detail h3 {
    margin-bottom: 2.5rem;
    font-family: IBMPlexMono-Medium, monospace;
    line-height: 1;
    letter-spacing: .05em;
    font-weight: 500;
    font-size: .8rem;
    color: var(--color-black-translucent);
    text-transform: uppercase
}

.detail__description {
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem
}

.detail__cta {
    display: flex;
    gap: 1rem;
    color: var(--color-white)
}

@media only screen and (max-width: 1024px) {
    .detail__cta {
        margin-bottom: 2rem
    }
}

.detail__exp-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    gap: 10px;
    width: 141px;
    height: 44px;
    font-size: 1.17rem !important;
    letter-spacing: .02em;
    background: var(--color-black);
    color: var(--color-white);
    border-radius: 999px;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer
}

.detail__likes-btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    gap: 10px;
    width: 94px;
    height: 44px;
    border: 1px solid var(--color-black);
    border-radius: 200px
}

.detail__recognitions {
    display: flex;
    flex-flow: column nowrap;
    gap: .45rem;
    font-size: 1.17rem
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .detail__recognitions {
        flex-flow: row wrap
    }
}

.detail__recognitions>div {
    flex-basis: 100%
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .detail__recognitions>div {
        flex-basis: 49%
    }
}

.detail__share {
    display: flex;
    gap: 1rem
}

@media only screen and (max-width: 1024px) {
    .detail__share {
        justify-content: space-around
    }
}

.detail__share-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.7rem;
    height: 3.7rem;
    border: 1px solid var(--color-black);
    border-radius: 999px;
    color: var(--color-black);
    transition: color .15s ease-in-out, background-color .15s ease-in-out
}

.detail__share-btn:hover {
    color: var(--color-white);
    background-color: var(--color-black)
}

.detail__share-btn svg {
    width: 1.4rem;
    height: 1.4rem
}

@media only screen and (max-width: 1024px) {
    .detail__share-btn {
        width: 4rem;
        height: 4rem
    }

    .detail__share-btn svg {
        width: 2rem;
        height: 2rem
    }
}

.detail__description img {
    width: 100%;
    border-radius: 16px
}

.detail__description h1 {
    font-size: 1.375rem;
    padding: 0;
    margin: 2em 0 0
}

.detail__description h2 {
    font-size: 1.8rem;
    padding: 0;
    margin: 2em 0 0
}

.detail__description h3 {
    font-size: 1.45rem;
    padding: 0;
    margin: 2em 0 0
}

.detail__description hr {
    background: var(--color-black);
    width: 100%;
    height: 1px;
    opacity: .2
}

.detail__description a {
    color: #006fd6
}

.detail__description a:hover {
    text-decoration: underline
}

.card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    overflow: hidden;
    pointer-events: all;
    cursor: pointer;
    color: var(--color-card-black);
    transition: color .25s ease-in-out;
    background-color: var(--color-white)
}

.card--abs {
    position: absolute
}

.card--dark {
    color: var(--color-card-white)
}

.card--fixed {
    width: 100%;
    aspect-ratio: 1 / 1.27
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .card--fixed {
        aspect-ratio: 1.2
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .card--fixed {
        aspect-ratio: 1 / 1.52;
        max-height: 75vh
    }
}

.card__top {
    display: flex;
    justify-content: space-between
}

.card__bottom {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem
}

.card__title {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    font-size: 2.5rem;
    overflow: hidden
}

@media only screen and (max-width: 1024px) {
    .card__title {
        font-size: 2rem
    }
}

.card__title--bottom {
    position: absolute;
    top: 100%
}

.card__text {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 2rem;
    pointer-events: none
}

.card__img {
    position: absolute;
    width: 100%;
    height: 100%
}

.card__img img {
    filter: saturate(0);
    transition: filter .15s;
    -o-object-fit: cover;
    object-fit: cover;
    width: 110%;
    height: 110%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute
}

.card__img img:hover {
    filter: saturate(1)
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .card__img img {
        width: 120%;
        height: 120%
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .card__img img {
        width: 150%;
        height: 150%
    }
}

.cards-wrapper {
    max-width: 1800px;
    margin: 0 5rem
}

@media only screen and (max-width: 1024px) {
    .cards-wrapper {
        margin: 0 1.8rem
    }
}

@media only screen and (min-width: 1450px) {
    .cards-wrapper {
        margin: 0 auto
    }
}

.cards-wrapper2 {
    position: relative;
    padding-top: 5rem;
    grid-column: 2 / span 22
}

@media only screen and (max-width: 1024px) {
    .cards-wrapper2 {
        grid-column: 1 / -1
    }
}

.filter {
    display: flex;
    flex-flow: row nowrap;
    gap: 15px;
    pointer-events: none;
    cursor: pointer
}

.filter--active {
    pointer-events: auto
}

.filter__name {
    font-size: 1.45rem;
    color: var(--color-black-translucent);
    transition: color .25s ease-in-out
}

.filter__count {
    margin-top: .2rem;
    padding: 1px 6px 2px;
    border-radius: 999px;
    font-family: IBMPlexMono-Medium, monospace;
    line-height: 1;
    letter-spacing: .05em;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    font-size: 1rem;
    color: var(--color-black);
    border: 1px solid var(--color-black);
    transition: color .25s ease-in-out, background-color .25s ease-in-out
}

@media only screen and (max-width: 1024px) {
    .filter__count {
        font-size: .8rem
    }
}

.filter__item {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 5px;
    padding: 2px 0
}

.filter__item--active .filter__name {
    color: var(--color-black)
}

.filter__item--active .filter__count {
    color: var(--color-white);
    background: var(--color-black)
}

.filter__item:hover .filter__name {
    color: var(--color-black)
}

.footer {
    display: flex;
    flex-flow: column nowrap;
    padding: 6.667rem 0 2.92rem;
    font-size: 1.45rem;
    line-height: 1.5;
    text-transform: uppercase;
    background-color: var(--color-white)
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer {
        padding: 4rem 0 2.92rem
    }
}

.footer__first-row {
    margin-bottom: 6.67rem
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__first-row {
        margin-bottom: 4rem !important
    }
}

.footer__second-row {
    margin-bottom: 7.5rem
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__second-row {
        margin-bottom: 5rem !important
    }
}

.footer__logo {
    grid-column: span 3
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__logo {
        grid-column: span 2
    }
}

.footer__logo>svg {
    min-width: 50%;
    height: 100%
}

.footer__follow {
    grid-column: span 6
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__follow {
        grid-column: span 3
    }
}

.footer__share {
    grid-column: span 2
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__share {
        grid-column: span 1
    }
}

.footer__share-links {
    display: flex;
    flex-flow: column nowrap;
    gap: 1.17rem;
    grid-column: span 3
}

.footer__close-btn {
    margin-left: auto;
    cursor: pointer;
    pointer-events: auto
}

.footer__contact {
    grid-column: span 3
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__contact {
        grid-column: 5 / span 3
    }
}

.footer__empty {
    grid-column: span 3
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__empty {
        grid-column: none
    }
}

.footer__subscribe {
    grid-column: span 6;
    max-width: 30rem
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__subscribe {
        grid-column: span 3
    }
}

.footer__current-year {
    grid-column: span 3;
    align-self: end;
    font-size: 3.835rem;
    line-height: 1
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__current-year {
        font-size: 2.5rem;
        grid-column: span 2
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .footer__current-year {
        grid-column: span 5;
        font-size: 1.8rem
    }
}

.footer__flex-stuff {
    grid-column: span 6;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    font-size: 1.34rem;
    white-space: nowrap
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__flex-stuff {
        grid-column: span 4
    }
}

.footer__flex-stuff--inline {
    display: flex;
    align-items: center;
    gap: 1.5rem
}

.footer__flex-stuff svg {
    margin-right: 5px
}

.footer__current-time {
    grid-column: span 2;
    display: flex;
    gap: 1rem;
    align-self: end;
    font-variant-numeric: tabular-nums;
    font-size: 1.34rem
}

@media (max-width: 1024px) {
    .footer__current-time {
        display: none
    }
}

.footer__current-time--message {
    padding: .4rem .6rem;
    border-radius: 1rem;
    align-self: center;
    background-color: var(--color-black);
    color: var(--color-white);
    line-height: 1;
    letter-spacing: .05em;
    font-family: IBMPlexMono-Medium, monospace;
    font-size: .8rem;
    text-transform: uppercase
}

.footer__lusion-logo {
    grid-column: span 1;
    display: flex;
    align-self: end;
    margin-left: auto
}

.footer__line-wrapper {
    position: relative;
    width: 139px;
    height: 15px;
    overflow: hidden
}

.footer__line {
    position: absolute;
    top: 50%;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: looperino;
    animation-name: looperino;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

@-webkit-keyframes looperino {
    0% {
        transform: translate(-50px, -50%)
    }

    to {
        transform: translateY(-50%)
    }
}

@keyframes looperino {
    0% {
        transform: translate(-50px, -50%)
    }

    to {
        transform: translateY(-50%)
    }
}

.footer__title {
    margin-bottom: 2.5rem
}

.footer__desc {
    text-transform: uppercase;
    font-size: 1.8rem;
    display: flex;
    flex-direction: column;
    font-size: 2.5rem;
    line-height: 100%
}

.grid-view {
    display: grid;
    padding: 0 5rem;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem
}

@media only screen and (max-width: 1024px) {
    .grid-view {
        padding: 0;
        grid-gap: 0rem 1rem;
        grid-template-columns: repeat(7, 1fr)
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .grid-view {
        grid-template-columns: repeat(6, 1fr)
    }
}

.grid-view--block {
    display: block;
    grid-template-columns: none;
    grid-gap: 0;
    padding: 0;
    margin: 0 5rem
}

@media only screen and (max-width: 1024px) {
    .grid-view--block {
        margin: 0 1.8rem
    }
}

.grid-view--24 {
    grid-template-columns: repeat(24, 1fr)
}

@media only screen and (max-width: 1024px) {
    .grid-view--24 {
        padding: 0;
        margin: 0 2rem;
        grid-gap: 0rem 1rem;
        grid-template-columns: repeat(7, 1fr)
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .grid-view--24 {
        grid-template-columns: repeat(6, 1fr)
    }
}

.grid-view--full {
    height: 100%
}

.grid-view--no-gap {
    grid-gap: 1rem 0
}

.grid-view--no-padding {
    padding: unset
}

.header {
    margin: 0 auto 2rem auto;
    padding: 2.5rem 3rem 3rem 3rem;
    max-width: 1500px;
}

.header>* {
    transition: opacity .3s ease-in-out .4s
}

.header .header__title {
    transition: transform 1s cubic-bezier(.785, .135, .15, .86);
    transform: translate(0)
}

.header .header__title h1 {
    transform: scale(1);
    transform-origin: left top;
    transition: transform 1s cubic-bezier(.785, .135, .15, .86)
}

.header--mini>*:not(.header__title) {
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.header--mini .header__title {
    transform: translateY(calc(var(--padding-top) * -1 * .8))
}

.header--mini .header__title h1 {
    transform: scale(.8)
}

@media only screen and (max-width: 1024px) {
    .header--mini .header__title h1 {
        transform: scale(1)
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .header--mini .header__title {
        transform: translateY(3rem)
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .header {
        --padding-top: 6rem
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .header {
        --padding-top: 3rem
    }
}

.header__title {
    grid-column: span 6;
    display: flex;
    flex-flow: column;
    gap: max(30px, 4vh);
    text-transform: uppercase
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .header__title {
        grid-column: span 3
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .header__title {
        grid-column: 1/-1
    }
}

.header__description {
    grid-column: span 4;
    display: flex;
    align-items: flex-end;
    font-size: 1.45rem
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .header__description {
        grid-column: span 4;
        font-size: 1.17rem
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .header__description {
        grid-column: 1 / -1;
        font-size: 1.17rem;
        /* padding-top: 1.8rem; */
        padding-bottom: 0.5rem
    }
}

.header__scroll-down {
    grid-column: span 2;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    text-transform: uppercase
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .header__scroll-down {
        display: none
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .header__scroll-down {
        grid-column: 1 / -1;
        font-size: 1rem;
        justify-content: flex-start
    }
}

.header--bottom-spaced {
    padding-bottom: 1em
}

.header__stats-container {
    margin-top: 8vh
}

.header__word-wrapper {
    display: inline-block;
    position: relative
}

.header__word-wrapper :after {
    content: "\a0"
}

.header__word {
    display: block
}

.header__word :after {
    content: ""
}

.header__letter-wrapper {
    display: inline-block;
    overflow: hidden
}

.header__letter {
    display: inline-block;
    vertical-align: text-top
}

.header-stats {
    padding-left: 0;
    padding-right: 0
}

.header-stats__row {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.header-stats__theme {
    grid-column: span 2
}

.header-stats__content {
    grid-column: 7 / span 2
}

.header-stats__interaction {
    grid-column: 10 / span 2
}

.header-stats__last-update {
    grid-column: 4 / span 2
}

.header-stats__action {
    grid-column: 7 / span 2
}

@media only screen and (max-width: 1024px) {

    .header-stats__theme,
    .header-stats__content {
        grid-column: span 6
    }

    .header-stats__interaction {
        grid-column: 7 / span 6
    }

    .header-stats__last-update {
        grid-column: 1 / span 12
    }

    .header-stats__action {
        grid-column: 7 / span 6
    }
}

.header-stat {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
    padding-bottom: 50px
}

.header-stat__label {
    padding-bottom: 10px;
    font-family: IBMPlexMono-Medium, monospace;
    line-height: 1;
    letter-spacing: .05em;
    font-weight: 500;
    font-size: .8rem;
    color: var(--color-black-translucent);
    text-transform: uppercase;
    min-height: 20px
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .header-stat__label {
        min-height: auto
    }
}

.header-stat__content {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: 10px;
    color: var(--color-black);
    font-size: 1.45rem;
    text-transform: uppercase
}

.header-stat__content>div {
    display: flex;
    gap: 10px
}

.header-stat__content--spaced>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0
}

.header-stat__content--with-icon {
    display: flex;
    align-items: center;
    gap: 8px
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .header-stat__content {
        font-size: 1.17rem
    }
}

html.disable-transitions .header {
    transition: none !important
}

html.disable-transitions .header>* {
    transition: none !important
}

html.disable-transitions .header--mini>*:not(.header__title) {
    transition: none !important
}

html.disable-transitions .header__title h1 {
    transition: none !important
}

.exp-list {
    display: flex;
    flex-flow: column nowrap;
    padding: 0;
    padding-bottom: 4rem;
    overflow: hidden
}

.exp-list--hover>*:not(.exp-list__empty):not(.exp-list__item--hover) {
    opacity: .5 !important
}

.exp-list__item {
    grid-column: span 12;
    height: 8rem;
    align-items: center;
    cursor: pointer;
    overflow: hidden
}

.exp-list__empty {
    padding: 0;
    text-align: center;
    font-size: 1.8rem;
    opacity: 0;
    transition: none
}

.exp-list__empty--show {
    opacity: 1;
    padding: 35px 0;
    transition: opacity .25s ease-in-out .25s, padding .25s ease-in-out .25s
}

.exp-list__info {
    grid-column: span 2;
    font-size: 1rem
}

.exp-list__info * {
    font-size: 1rem !important
}

@media only screen and (max-width: 1024px) {
    .exp-list__info {
        grid-column: span 1
    }

    .exp-list__info:not(.exp-list__year) {
        display: none !important
    }
}

.exp-list__name {
    grid-column: span 8;
    font-size: 1.8rem
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .exp-list__name {
        grid-column: 2 / span 5
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .exp-list__name {
        grid-column: 2 / span 4
    }
}

.exp-list__tags {
    grid-column: span 11;
    font-size: 1rem !important
}

.exp-list__tags .tags {
    font-size: 1rem
}

@media only screen and (max-width: 1024px) {
    .exp-list__tags {
        display: none !important
    }
}

.exp-list__link {
    grid-column: span 1;
    justify-self: flex-end
}

.exp-list__filter {
    margin: 0 5rem 2rem;
    -ms-overflow-style: none;
    scrollbar-width: none
}

@media only screen and (max-width: 1024px) {
    .exp-list__filter {
        margin: 0 0 2rem 2rem;
        overflow-x: auto
    }
}

.exp-list__filter::-webkit-scrollbar {
    display: none
}

.exp-list__hr>div {
    height: 1px;
    background: var(--color-black)
}

.exp-list__back-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34vw;
    height: 34vw;
    border-radius: 1rem;
    z-index: -1;
    -o-object-fit: cover;
    object-fit: cover
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .exp-list__back-image {
        width: 50vw;
        height: 50vw
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .exp-list__back-image {
        width: 70vw;
        height: 70vw
    }
}

.loader {
    z-index: 99999;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-theme)
}

.loader span {
    font-weight: 900;
    vertical-align: middle;
    display: inline-block;
    line-height: 100%;
    font-size: 15rem
}

@media only screen and (max-width: 1024px) {
    .loader span {
        font-size: 7.5rem
    }
}

.loader__content {
    width: 100%;
    height: 100%
}

.loader__item {
    height: 1em;
    position: relative;
    display: flex;
    align-items: flex-start;
    align-self: center;
    overflow: hidden;
    font-size: 15rem
}

@media only screen and (max-width: 1024px) {
    .loader__item {
        font-size: 7.5rem
    }
}

.loader__item>div {
    display: flex;
    flex-direction: column;
    text-align: center
}

.loader__item--left {
    grid-column: 1 / span 4
}

.loader__item--center {
    grid-column: 5 / span 4;
    justify-self: center
}

.loader__item--right {
    grid-column: 9 / span 4;
    justify-self: right
}

.loader__item--hide {
    opacity: 0
}

@media only screen and (max-width: 1024px) {
    .loader__item {
        align-self: start
    }
}

.loader__wow-text {
    position: fixed;
    left: 50%;
    bottom: 5vh;
    transform: translate(-50%);
    font-size: 1.17rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-black)
}

.loader__lucy {
    left: 50%;
    top: 50%;
    position: fixed;
    transform: translate(-50%, -50%)
}

.exp-info {
    font-family: IBMPlexMono-Medium, monospace;
    line-height: 1;
    letter-spacing: .05em;
    font-weight: 500;
    display: flex;
    text-transform: uppercase;
    font-size: 1.17rem
}

@media only screen and (max-width: 1024px) {
    .exp-info {
        font-size: 1rem
    }
}

.tags {
    display: flex;
    gap: .25rem;
    font-family: IBMPlexMono-Medium, monospace;
    line-height: 1;
    letter-spacing: .05em;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.17rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .tags {
        font-size: 1rem
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .tags {
        font-size: .8rem
    }
}

.tags__item {
    list-style: none;
    display: inline
}

@media only screen and (max-width: 1024px) {
    .tags__item {
        display: flex
    }
}

.tags__item:after {
    content: " \b7";
    padding-right: .5rem
}

.tags__item:last-child:after {
    content: none
}

.card-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background-color: var(--color-card-black);
    color: var(--color-card-white);
    transition: color .5s ease-in-out, background-color .15s ease-in-out
}

.card-button--dark {
    background-color: var(--color-card-white);
    color: var(--color-card-black)
}

@media only screen and (max-width: 1024px) {
    .card-button--dark {
        color: var(--color-card-white);
        background-color: transparent
    }
}

@media only screen and (max-width: 1024px) {
    .card-button {
        color: var(--color-card-black);
        background-color: transparent
    }
}

.card-button--hover {
    color: var(--color-card-black);
    background-color: var(--color-card-white)
}

@media only screen and (max-width: 1024px) {
    .card-button--hover {
        color: var(--color-card-white);
        background-color: var(--color-card-black)
    }
}

[data-theme=dark] .card-button {
    background-color: var(--color-card-white);
    color: var(--color-card-black)
}

@media only screen and (max-width: 1024px) {
    [data-theme=dark] .card-button {
        color: var(--color-card-white);
        background-color: transparent
    }
}

.ext-lusion-link {
    display: flex;
    align-items: center;
    gap: .54rem
}

.ext-lusion-link svg {
    transition: transform .4s cubic-bezier(.33, 1, .68, 1)
}

.ext-lusion-link:hover svg {
    transform: translate(12%, -12%)
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 3.4rem;
    padding-bottom: 3rem;
    color: var(--color-black);
    background-color: transparent;
    font-size: 1.34rem;
    line-height: 100%;
    text-align: right;
    letter-spacing: .02em;
    text-transform: uppercase;
    z-index: 50;
    transition: background-color .5s ease-in-out;
    pointer-events: none
}

.navbar>* {
    pointer-events: auto
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar {
        padding-top: 2rem;
        padding-bottom: 3.4rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .navbar {
        padding: 2rem 2rem 3.4rem 2rem;
    }
}

.navbar__left {
    position: relative;
    grid-column: span 6
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar__left {
        grid-column: span 2
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .navbar__left {
        grid-column: span 4
    }
}

.navbar__wrapper {
    display: flex;
    flex-flow: row nowrap;
    align-items: center
}

.navbar__buttons {
    grid-column: span 3;
    gap: 2vw
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar__buttons {
        justify-content: right
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .navbar__buttons {
        display: none
    }
}

.navbar__views {
    grid-column: span 2;
    justify-content: center !important
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar__views {
        grid-column: span 1
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .navbar__views {
        grid-column: span 1
    }
}

.navbar__theme {
    grid-column: span 1;
    justify-content: flex-end
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .navbar__theme {
        margin: 0 2rem 0 auto;
        display: none
    }
}

.navbar__theme--show {
    display: flex
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .navbar__theme--show {
        margin: 0 0 0 auto;
        grid-column: span 1
    }
}

.navbar__menu {
    display: none
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .navbar__menu {
        display: flex;
        justify-self: flex-end;
        cursor: pointer;
        grid-column: span 1
    }
}

.navbar__item {
    font-size: 1.34rem;
}

.navbar__logo {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-30%)
}

.go_back {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    white-space: nowrap
}

.go_back svg {
    transition: transform .4s cubic-bezier(.33, 1, .68, 1)
}

.go_back:hover svg {
    transform: translate(-12%)
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .go_back>span {
        display: none
    }
}

.navbar__item {
    position: relative
}

.navbar__item:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: -.8rem;
    width: 100%;
    height: .2rem;
    background: var(--color-black);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform .4s cubic-bezier(.215, .61, .355, 1)
}

.navbar__item:hover:after {
    transform: scaleX(1)
}

.Pill {
    font-family: IBMPlexMono-Medium, monospace;
    line-height: 1;
    letter-spacing: .05em;
    font-weight: 500;
    font-size: 1.17rem;
    padding: 0 .25rem;
    border-radius: 9999px;
    padding: 2px 10px;
    background: none;
    border: 1px solid var(--color-black)
}

.Pill--small {
    font-size: 1rem;
    letter-spacing: .05em;
    padding: 2px 6px
}

.Pill--filled {
    background: var(--color-black);
    color: var(--color-white)
}

.tools-bar {
    margin: 5rem 0 2.5rem
}

.tools-bar>div {
    display: flex;
    align-items: flex-end
}

.tools-bar__left {
    grid-column: span 9
}

.tools-bar__left--filter {
    margin-top: 1rem
}

.tools-bar__right {
    grid-column: span 3
}

.tools-bar__switch {
    margin-bottom: 10px;
    justify-self: end
}

.tools-bar__lab-area {
    margin: 0 0 10px 24px;
    font-family: Aeonik;
    font-size: 1.17rem;
    line-height: 100%;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-black)
}

.view-switch {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    transition: opacity .4s cubic-bezier(.33, 1, .68, 1)
}

.view-switch--transition {
    opacity: .7
}

.view-switch--transition .view-switch__option:hover {
    color: var(--color-black-translucent)
}

.view-switch__options {
    position: relative;
    display: flex;
    border: 1px solid var(--color-black-translucent);
    border-radius: 999px
}

.view-switch__option {
    padding: 5px 14px;
    color: var(--color-black-translucent);
    font-size: 1rem;
    line-height: 100%;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    transition: color .25s ease-in-out .25s
}

.view-switch__option:hover {
    color: var(--color-black)
}

.view-switch__option--isActive {
    color: var(--color-white) !important
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .view-switch__option {
        font-size: 1rem;
        padding: 4px 12px 4px 8px
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .view-switch__option {
        font-size: 1rem;
        padding: 4px 12px 4px 8px
    }
}

.view-switch__option-background {
    position: absolute;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 14px 6px;
    border-radius: 70px;
    background-color: var(--color-black);
    z-index: -1
}

.subscribe {
    text-transform: uppercase
}

.subscribe__label {
    font-size: 1.45rem;
    margin-right: .75rem
}

.subscribe__spam {
    font-size: 1rem
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .subscribe__spam {
        font-size: .8rem
    }
}

.subscribe form,
.subscribe .mcForm {
    position: relative;
    margin-top: .75rem
}

.subscribe__submit-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%)
}

.subscribe__submit-btn.--sending svg {
    -webkit-animation: pulse 1s;
    animation: pulse 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate
}

.subscribe__input {
    width: 100%;
    font-size: 1.45rem
}

.subscribe__input--success {
    color: var(--color-white) !important;
    -webkit-box-shadow: 0 0 0 30px var(--color-black) inset !important;
    background-color: var(--color-black)
}

.subscribe__input--success:-webkit-autofill,
.subscribe__input--success:-webkit-autofill:hover,
.subscribe__input--success:-webkit-autofill:focus,
.subscribe__input--success:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--color-black) inset !important
}

.subscribe__input--error {
    color: red
}

@media only screen and (max-width: 1024px) {
    .subscribe__input {
        font-size: max(1.17rem, 16px)
    }
}

.subscribe-modal {
    z-index: 500;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    --screen-margin: 3.2rem;
    margin: var(--screen-margin)
}

@media only screen and (max-width: 1024px) {
    .subscribe-modal {
        --screen-margin: 1.8rem
    }
}

.subscribe-modal__content {
    position: relative;
    padding: 2.5rem 2rem 2rem;
    width: 100%;
    max-width: 40rem;
    border-radius: 1.6rem;
    margin: 0 auto;
    color: var(--color-white) !important;
    background-color: var(--color-black)
}

@media only screen and (max-width: 1024px) {
    .subscribe-modal__content {
        padding: 2rem 1.5rem 1.5rem
    }
}

.subscribe-modal__content input {
    background-color: var(--color-white)
}

.subscribe-modal__close-btn {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1.5rem;
    cursor: pointer
}

.subscribe-modal__close-btn * {
    fill: var(--color-white)
}

.subscribe__submit-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%)
}

.subscribe__submit-btn svg {
    width: 100%
}

@media only screen and (max-width: 1024px) {
    .subscribe__submit-btn.--sending svg {
        -webkit-animation: moveX 1s;
        animation: moveX 1s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate
    }
}

.subscribe__submit-btn.--sending svg {
    -webkit-animation: pulse 1s;
    animation: pulse 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate
}

@-webkit-keyframes pulse {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(5)
    }
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(5)
    }
}

@-webkit-keyframes moveX {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(10%)
    }
}

@keyframes moveX {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(10%)
    }
}

.button {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.6rem 1rem 1.3rem;
    gap: 2rem;
    position: relative;
    min-width: 100px;
    height: 3.6rem;
    background: var(--color-black);
    border-radius: 1.8rem;
    overflow: hidden;
    font-weight: 500;
    font-size: 1.17rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-white);
    cursor: pointer
}

.button--flipped {
    padding: 1rem 1.3rem 1rem 1.6rem
}

.button__text-wrapper {
    position: relative;
    overflow: hidden
}

.button__text {
    opacity: 1;
    transition: opacity .25s ease-in-out
}

.button__hover-text {
    position: absolute;
    top: 0;
    height: 100%;
    color: var(--color-black);
    z-index: 2
}

.button__icon-wrapper {
    position: relative;
    z-index: 9
}

.button__icon-wrapper svg {
    width: 1.33rem;
    height: 1.33rem
}

.button__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    transition: opacity .25s ease-in-out 0s
}

.button__icon * {
    fill: var(--color-white)
}

.button__icon--hover {
    opacity: 0
}

.button__icon--hover * {
    fill: var(--color-black)
}

.button--inverse {
    color: var(--color-black);
    border: 1px solid var(--color-black);
    background: none
}

.button--inverse .button__mask {
    background-color: var(--color-black)
}

.button--inverse .button__hover-text {
    color: var(--color-white)
}

.button--inverse .button__icon * {
    stroke: var(--color-black);
    fill: none
}

.button--inverse .button__icon--hover * {
    stroke: var(--color-white);
    fill: var(--color-white)
}

.button:hover .button__icon {
    opacity: 0
}

.button:hover .button__icon--hover {
    opacity: 1
}

.button__mask__container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.8rem;
    overflow: hidden
}

.button__mask {
    width: .5rem;
    height: .5rem;
    border-radius: 100%;
    position: absolute;
    top: 1.6rem;
    left: 1.66rem;
    background-color: var(--color-white);
    z-index: 1
}

.button--hovering {
    transition: background .125s ease-out .125s;
    background: var(--color-white)
}

.scroll-to-top {
    opacity: 0;
    transition: opacity .25s ease-in-out
}

.scroll-to-top--active {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer
}

.scroll-to-top__svg-bg {
    fill: var(--color-black)
}

.scroll-to-top__svg-arrow {
    fill: var(--color-white)
}

.contact {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999
}

.contact__close-btn {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1.5rem;
    cursor: pointer
}

.contact__blocking-bg {
    position: fixed;
    inset: 0;
    background-color: #000;
    pointer-events: auto;
    z-index: 998
}

.explore-more {
    margin: 9rem 0;
    color: var(--color-black);
    padding-bottom: 5rem
}

@media only screen and (max-width: 1024px) {
    .explore-more {
        margin-top: 0
    }
}

.explore-more__title-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 20px
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .explore-more__title-wrapper {
        flex-direction: column;
        align-items: flex-start
    }
}

.explore-more__title {
    font-size: 50px;
    letter-spacing: .02em;
    line-height: 80%
}

.explore-more__subtitle {
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase
}

.explore-more__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: max(50px, 5vh)
}

@media only screen and (max-width: 1024px) {
    .explore-more__cards {
        grid-template-columns: 1fr
    }
}

.theme-switcher {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer
}

.theme-switcher:hover .theme-switcher__point {
    opacity: .6
}

.theme-switcher__point {
    width: .8rem;
    height: .8rem;
    background: var(--color-theme);
    border: 1px solid var(--color-black);
    border-radius: 100%;
    transition: border, background, opacity .6s cubic-bezier(.215, .61, .355, 1)
}

.theme-switcher__init {
    font-size: 1.34rem;
    text-align: center;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-black);
    height: 1.34rem;
    overflow: hidden
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .theme-switcher__init {
        font-size: 1.17rem
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .theme-switcher__init {
        height: 1.17rem
    }
}

.svgLogo {
    z-index: 1000;
    cursor: pointer;
    position: relative;
    --aspect-mul: 4.82;
    height: 3rem;
    max-width: calc(3rem * var(--aspect-mul))
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .svgLogo {
        --aspect-mul: 2.98
    }
}

.svgLogo .svgLogo__lucy {
    height: 3rem;
    width: 3rem
}

.svgLogo--large {
    height: 4rem;
    max-width: calc(4rem * var(--aspect-mul))
}

.svgLogo--large .svgLogo__lucy {
    height: 4rem;
    width: 4rem
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .svgLogo {
        height: 2.4rem;
        max-width: calc(2.4rem * var(--aspect-mul))
    }

    .svgLogo .svgLogo__lucy {
        height: 2.4rem;
        width: 2.4rem
    }

    .svgLogo--large {
        height: 3rem;
        max-width: calc(3rem * var(--aspect-mul))
    }

    .svgLogo--large .svgLogo__lucy {
        height: 3rem;
        width: 3rem
    }
}


.svgLogo__lucy {
    position: absolute;
    top: 0;
    left: 0
}

.svgLogo__svg path {
    fill: var(--color-white)
}

.svgLogo__svg circle {
    stroke: var(--color-white)
}

.svgLogo img,
.svgLogo__svg,
img.svgLogo__svg {
    transition: filter .3s ease-in-out
}

[data-theme=dark] .svgLogo img,
[data-theme=dark] .svgLogo__svg,
[data-theme=dark] img.svgLogo__svg {
    filter: invert(1)
}

.svgLogo__bg,
.lucy__rect {
    fill: var(--color-black)
}

.lucy__eyeWrapper * {
    fill: var(--color-white)
}

.lucy__mouthWrapper * {
    stroke: var(--color-white)
}

.TA__line {
    position: relative;
    line-height: 120%
}

.TA__lineBlock {
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    background: #000;
    width: 100%
}

.mobile-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: var(--color-white)
}

.mobile-menu__blocking-bg {
    position: fixed;
    inset: 0;
    background-color: #000;
    pointer-events: auto;
    z-index: 49
}

.mobile-menu__row {
    align-items: center;
    padding: 2.4rem 2rem;
    margin: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .2)
}

.mobile-menu__link-label {
    grid-column: span 5;
    font-size: 2.5rem;
    text-transform: capitalize;
    line-height: 120%
}

.mobile-menu__link-icon {
    justify-self: end
}

.mobile-menu__subscribe {
    grid-column: 1 / -1
}

.mobile-menu__ext-links {
    row-gap: 2.4rem
}

.mobile-menu__ext-links>a {
    grid-column: span 3;
    font-size: 1.17rem
}