* {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            @font-face {
                font-family: "Nova Klasse Semibold Oblique";
                src: url("assets/fonts/novaklasse-semibdoblique.woff2")
                    format("woff2");
                font-weight: normal;
                font-style: normal;
                font-display: swap;
            }

            @font-face {
                font-family: "Nova Klasse Semibold";
                src: url("assets/fonts/novaklasse-semibold.woff2")
                    format("woff2");
                font-weight: normal;
                font-style: normal;
                font-display: swap;
            }

            @font-face {
                font-family: "Messina Sans Regular";
                src: url("assets/fonts/MessinaSans-Regular.woff2")
                    format("woff2");
                font-weight: normal;
                font-style: normal;
                font-display: swap;
            }

            @font-face {
                font-family: "Messina Sans Bold";
                src: url("assets/fonts/MessinaSans-Bold.woff2") format("woff2");
                font-weight: normal;
                font-style: normal;
                font-display: swap;
            }

            :root {
                --orange: #fc6d39;
                --sun: #ffac51;
                --soft-sun: #fedaac;
                --cream: #e8e4dc;
                --cream-barista: #f8f8f3;
                --dirt: #d9d5c9;
                --washed: #d9d9d9;
                --dark-green: #028156;
                --green: #60e85e;
                --lavender: #c8b8f0;
                --pink: #ffb8d9;
                --dark: #1a1a1a;
                --practically-black: #111111;
            }

            html,
            body {
                width: 100%;
                height: 100%;
                overflow: hidden;
                font-family: "Messina Sans Regular", sans-serif;
                background: var(--washed);
                color: var(--practically-black);
            }

            main {
                display: grid;
                grid-template-rows: auto 1fr;
                height: 100vh;
            }

            section {
                border-radius: 24px;
                outline: 1px solid rgba(0, 0, 0, 0.2);
                outline-offset: -0.5px;

                opacity: 0;
                transform: translateX(-40px);

                transition:
                    opacity 0.9s ease,
                    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                    filter 0.9s ease;
            }

            section.show {
                opacity: 1;
                transform: translateX(0);
            }

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

            .wrapper {
                width: 100vw;
                min-height: 0;
                display: grid;
                grid-template-columns: 1fr 1fr;
            }

            .column {
                height: 100%;
                display: grid;
            }

            /* LEFT */

            .left {
                grid-template-rows: 12% 46% 42%;
            }

            .bottom-grid {
                display: grid;
                grid-template-columns: 68% 32%;
            }

            /* RIGHT */

            .right {
                height: 100%;
            }

            /* PANELS */

            .panel {
                position: relative;
                overflow: hidden;
                padding: 24px;
                background: #e5c5ca;
            }

            .light {
                background: #ece7e7;
            }

            .label {
                position: absolute;
                top: 18px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 18px;
                font-weight: 500;
            }

            /* HERO */

            .hero {
                position: relative;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: left;
                /*background-color: var(--dirt);*/
                background-color: var(--soft-sun);
                /*background-color: #f8ecde;*/
            }

            .hero h1 {
                font-family: "Nova Klasse Semibold Oblique";
                font-size: 5vw;
                line-height: 0.95;
                mix-blend-mode: color-burn;
            }

            .hero::before {
                content: "";
                background-repeat: repeat;
                background-size: 100px;
                position: absolute;
                inset: 0;

                animation: grain 8s steps(10) infinite;
                background-image: url(assets/img/noise.png);
                opacity: 0.6;

                width: 300%;
                height: 300%;
                left: -50%;
                top: -100%;

                pointer-events: none;
            }

            @keyframes grain {
                0%,
                100% {
                    transform: translate(0, 0);
                }
                10% {
                    transform: translate(-5%, -10%);
                }
                20% {
                    transform: translate(-15%, 5%);
                }
                30% {
                    transform: translate(7%, -25%);
                }
                40% {
                    transform: translate(-5%, 25%);
                }
                50% {
                    transform: translate(-15%, 10%);
                }
                60% {
                    transform: translate(15%, 0%);
                }
                70% {
                    transform: translate(0%, 15%);
                }
                80% {
                    transform: translate(3%, 35%);
                }
                90% {
                    transform: translate(-10%, 10%);
                }
            }

            /* FEATURES */

            .features {
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--pink);
            }

            .features span {
                font-size: 1vw;
                line-height: 1;
                font-weight: 700;
            }

            ul {
                line-height: 1.4;
            }

            .list__item {
                display: flex;
                align-items: center;
                gap: 0.6em;
                pointer-events: none;
            }

            .list__check {
                appearance: none;
                cursor: pointer;
                margin-top: 1px;
                padding: 3px;
                aspect-ratio: 1/1;
                height: 1.2em;
                border: 2px solid var(--dark);
                border-radius: 8px;
            }

            .list__label {
                user-select: none;
                cursor: pointer;

                flex-grow: 1;
            }

            .list__check:checked {
                background: var(--dark);
                background-clip: content-box;
                opacity: 1;
            }

            .list__check:checked + .list__label {
                text-decoration: line-through var(--dark) 2px;

                opacity: 1;
            }

            /* VALUE */

            .value {
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                background-color: var(--cream-barista);
            }

            .value p {
                width: 90%;
                font-size: 1.5vw;
                line-height: 1.45;
                text-align: left;
            }

            /* LOGO */

            .logo-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: var(--orange);
            }

            .logo-bar {
                width: 100%;
                display: flex;
                height: 52px;
                padding: 0px 24px 0px 24px;
            }

            .logo-bar a {
                flex: 1;
                display: flex;
                align-items: left;
                justify-content: left;
                text-decoration: none;
                color: #111;
                border-right: none;
                font-size: 1vw;
                text-align: left;
                transition: 0.2s ease;
            }

            /* INSTRUCTION */

            .instruction {
                display: grid;
                flex-direction: column;
                height: 100%;
                grid-template-rows: 38% 38% 20% 4%;
            }

            .instruction-item-1 {
                flex: 1;
                display: flex;
                flex-direction: column;
                background-color: var(--sun);
            }

            .instruction-item-2 {
                flex: 1;
                display: flex;
                flex-direction: column;
                background-color: var(--soft-sun);
            }

            .instruction-item-3 {
                flex: 1;
                display: flex;
                flex-direction: column;
                background-image: url("assets/img/RUN.webp");
                background-size: 100% auto;
                background-position: center bottom;
                background-repeat: no-repeat;
            }

            .instruction-item-1 span {
                text-align: center;
                justify-content: center;
                align-items: center;
                font-size: 1.5vw;
                height: auto;
                display: flex;
                flex-direction: column;
                gap: 24px;
                margin: auto;
            }

            .instruction-item-2 span {
                text-align: center;
                justify-content: center;
                align-items: center;
                font-size: 1.5vw;
                height: auto;
                display: flex;
                margin: auto;
            }

            .instruction-item-3 span {
                text-align: center;
                justify-content: center;
                align-items: flex-end;
                font-size: 1.5vw;
                color: var(--cream-barista);
                height: auto;
                display: flex;
                margin: auto;
            }

            .nike {
                color: var(--cream);
                font-weight: bold;
                border: 0px solid var(--orange);
                padding: 6px 14px;
                border-radius: 46px;
                padding-bottom: 8px;
                background-color: var(--dark);
                z-index: 2;
            }
            .nike:hover {
                color: var(--cream-barista);
            }
            .nike:active {
                transform: translateY(2px);
            }

            .instruction section p {
                font-size: 8vw;
                width: 48px;
                border-radius: 50%;
                padding: 28px;
                text-align: right;
                color: var(--cream-barista);
                font-family: "Nova Klasse Semibold";
                align-content: center;
                justify-content: right;
                display: flex;
                width: 100%;
                -webkit-text-stroke: 2px var(--dark);
            }

            .instruction-number {
                position: absolute;
            }

            /* MARQUEE */

            .marquee-wrap {
                width: 100%;
                background: var(--pink);
                border-radius: 100px;
                overflow: hidden;
                padding: 8px 0;
                outline: 1px solid rgba(0, 0, 0, 0.2);
                outline-offset: -0.5px;
            }
            .marquee-track {
                display: flex;
                white-space: nowrap;
                width: max-content;
                animation: marquee 24s linear infinite;
            }
            .marquee-track span {
                font-family: "Messina Sans Regular", sans-serif;
                font-size: 0.7vw;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: var(--dark);
                padding: 0 20px;
            }
            .marquee-track span.dot {
                color: var(--dark);
                opacity: 0.5;
                padding: 0 4px;
            }
            @keyframes marquee {
                from {
                    transform: translateX(0);
                }
                to {
                    transform: translateX(-50%);
                }
            }

            /* MAGNETIC AGLET */

            .magnetic-area {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 180px;
                height: 80px;
                cursor: grab;
            }
            .magnetic-item {
                pointer-events: auto;
                will-change: transform;
            }
            .part-pill {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 8px;
                background: var(--orange);
                color: var(--cream-barista);
                padding: 10px 24px;
                border-radius: 50px;
                font-size: 1.2vw;
                font-weight: 700;
                border: 2px solid var(--dark);
                transform: rotate(-3deg);
                box-shadow: 4px 4px 0px var(--dark);
                white-space: nowrap;
                font-family: "Messina Sans Bold", sans-serif;
            }

            .button-logo {
                background-color: var(--cream-barista);
                border-radius: 50%;
                width: 30px;
                height: 30px;
                text-align: center;
            }

            /* Noise + color-burn overlay for button and nike link */
            .noise-wrap {
                position: relative;
                display: inline-block;
                overflow: hidden;
                border-radius: 48px;
                isolation: isolate;
                clip-path: inset(0 round 48px);
            }
            .noise-wrap::before {
                content: "";
                background-repeat: repeat;
                background-size: 200px;
                background-image: url(assets/img/noise.png);
                position: absolute;
                width: 300%;
                height: 300%;
                left: -50%;
                top: -100%;
                opacity: 0.6;
                animation: grain 8s steps(10) infinite;
                pointer-events: none;
                z-index: 10;
                mix-blend-mode: color-burn;
            }

            .footer {
                display: flex;
                flex-direction: row;
                gap: 8px;
                font-size: 0.7vw;
                text-transform: uppercase;
                display: flex;
                white-space: nowrap;
                background-color: var(--dirt);
                color: var(--dark);
                padding: 0px 16px 0px 16px;
                justify-content: center;
                align-items: center;
                z-index: 2;
            }

            /* LOADING SCREEN */

            #loader-screen {
                position: fixed;
                inset: 0;
                background: #fc6d39;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;

                transition: opacity 0.6s ease;
            }

            #loader-screen.hide {
                opacity: 0;
                pointer-events: none;
            }

            .wrap {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: 300px;
                padding: 2rem 0 1rem;
                cursor: pointer;
                user-select: none;
                height: 100%;
                margin: auto;
                color: #fff;
            }
            .svg-stage {
                width: min(520px, 92vw);
                overflow: visible;
            }
            .hint {
                font-size: 11px;
                color: var(--color-text-tertiary);
                margin-top: 1.2rem;
                opacity: 0;
                transition: opacity 0.6s;
                letter-spacing: 0.05em;
                display: none;
            }
            .hint.show {
                opacity: 1;
            }

            /* RESPONSIVE */

            @media (max-width: 1000px) {
                .wrapper {
                    grid-template-columns: 1fr;
                }

                .hero h1 {
                    font-size: 11vw;
                }

                .value p,
                .instruction p,
                .logo-bar a {
                    font-size: 16px;
                }

                .features span {
                    font-size: 32vw;
                }
            }