.works-theatre {
    --works-bg: #000000;
    --works-fg: #ffffff;
    --works-muted: rgba(255, 255, 255, 0.72);
    --works-accent: #ffffff;
    --works-arrow-filter: invert(1);
    --works-sans: "Helvetica Neue", "PingFang SC", "Noto Sans CJK SC", sans-serif;
    --works-display: "Oswald", "PingFang SC", "Noto Sans CJK SC", sans-serif;
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100svh;
    min-height: 680px;
    overflow: hidden;
    color: var(--works-fg);
    background: var(--works-bg);
    contain: layout paint style;
    transition: background-color 760ms cubic-bezier(.25, .46, .45, .94), color 520ms ease;
}

.works-theatre,
.works-theatre * {
    box-sizing: border-box;
}

.works-theatre__stage,
.works-theatre__browser {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.works-theatre__stage {
    z-index: 1;
}

.works-theatre__browser {
    z-index: 2;
    touch-action: pan-y pinch-zoom;
}

.works-theatre__header {
    position: absolute;
    z-index: 70;
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 90px;
    padding: 0 6.25vw;
    color: var(--works-fg);
    font-family: var(--works-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    transition: color 520ms ease, opacity 340ms ease, transform 540ms cubic-bezier(.16, 1, .3, 1);
}

.works-theatre__header-index {
    justify-self: center;
    font-family: "Roboto Mono", monospace;
    font-size: 9px;
    letter-spacing: .15em;
    opacity: .7;
}

.works-theatre__header a {
    justify-self: end;
    color: inherit;
    text-decoration: none;
}

.works-theatre__header a::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 4px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 300ms cubic-bezier(.16, 1, .3, 1);
}

.works-theatre__header a:hover::after,
.works-theatre__header a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

.works-theatre__canvas {
    position: absolute;
    z-index: 10;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms ease;
}

.works-theatre__canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.works-theatre.is-webgl-ready .works-theatre__canvas {
    opacity: 1;
}

.works-theatre__menu-scrim {
    position: absolute;
    z-index: 8;
    inset: 0;
    background: #080808;
    opacity: 0;
    pointer-events: none;
    transition: opacity 520ms cubic-bezier(.16, 1, .3, 1);
}

.works-theatre__deck {
    position: absolute;
    z-index: 12;
    top: 16vh;
    right: 7.6vw;
    width: 49vw;
    height: 72vh;
    min-height: 520px;
    overflow: visible;
    perspective: 1300px;
    transition: opacity 280ms ease;
}

[data-works-theatre] .works-theatre__card,
[data-works-theatre] #beadflow-card.works-theatre__card,
[data-works-theatre] #kuangjing-card.works-theatre__card,
[data-works-theatre] #tokyo-card.works-theatre__card {
    all: unset;
    position: absolute;
    top: 5%;
    left: 4%;
    display: block;
    box-sizing: border-box;
    width: 92%;
    height: 76%;
    min-height: 0;
    margin: 0;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-12%, 112%, -80px) scale(.84);
    transform-origin: center;
    will-change: transform, opacity, filter;
    background: transparent !important;
    background-image: none !important;
}

[data-works-theatre] .works-theatre__card::before,
[data-works-theatre] .works-theatre__card::after,
[data-works-theatre] #beadflow-card::before,
[data-works-theatre] #beadflow-card::after,
[data-works-theatre] #kuangjing-card::before,
[data-works-theatre] #kuangjing-card::after,
[data-works-theatre] #tokyo-card::before,
[data-works-theatre] #tokyo-card::after {
    content: none !important;
    display: none !important;
}

[data-works-theatre] .works-theatre__card.is-current {
    z-index: 4;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1.07);
}

[data-works-theatre] .works-theatre__card.is-above {
    z-index: 2;
    opacity: .44;
    transform: translate3d(12%, -110%, -90px) scale(.84);
}

[data-works-theatre] .works-theatre__card.is-below {
    z-index: 2;
    opacity: .44;
    transform: translate3d(-12%, 110%, -90px) scale(.84);
}

.works-theatre__card-media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    clip-path: polygon(3% 5%, 98% 0, 95% 100%, 0 94%);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .3);
    background: #111;
}

.works-theatre__card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.works-theatre__card[data-work-card="0"] .works-theatre__card-media img {
    object-position: center 43%;
}

.works-theatre.is-webgl-ready .works-theatre__deck {
    opacity: 0;
    pointer-events: none;
}

.works-theatre__media-link {
    position: absolute;
    z-index: 18;
    top: 17vh;
    right: 7vw;
    width: 49vw;
    height: 58vh;
    min-height: 440px;
    pointer-events: none;
}

.works-theatre.is-webgl-ready .works-theatre__media-link {
    pointer-events: auto;
}

.works-theatre__copy {
    position: absolute;
    z-index: 34;
    top: 23.4vh;
    left: 6.25vw;
    width: min(43vw, 620px);
    height: 55vh;
    color: var(--works-fg);
    transition: opacity 360ms ease, transform 560ms cubic-bezier(.16, 1, .3, 1), color 520ms ease;
}

.works-theatre__copy-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--works-fg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.works-theatre__copy-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.works-theatre__copy-panel.is-leaving {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.works-theatre__eyebrow {
    display: block;
    margin: 0 0 20px;
    color: var(--works-accent);
    font-family: var(--works-display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.works-theatre__copy-panel h2 {
    margin: 0 0 22px;
    color: var(--works-fg);
    font-family: var(--works-display);
    font-size: clamp(82px, 9.375vw, 135px);
    font-weight: 500;
    line-height: .89;
    letter-spacing: -.045em;
    text-transform: none !important;
    white-space: normal;
}

.works-theatre__copy-panel[data-work-copy="1"] h2 {
    font-size: clamp(72px, 8.2vw, 118px);
}

.works-theatre__copy-panel[data-work-copy="2"] h2 {
    font-size: clamp(62px, 6.9vw, 100px);
    line-height: .92;
}

.works-theatre__title-char {
    display: inline-block;
    will-change: transform, opacity;
}

.works-theatre__copy-panel p {
    max-width: 580px;
    margin: 0 0 34px;
    color: var(--works-muted);
    font-family: var(--works-display);
    font-size: clamp(16px, 1.39vw, 20px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0;
}

.works-theatre__copy-panel > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: var(--works-fg);
    font-family: var(--works-display);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .17em;
    text-decoration: none;
}

.works-theatre__copy-panel > a::after {
    content: "";
    position: absolute;
    right: 29px;
    bottom: 2px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 320ms cubic-bezier(.16, 1, .3, 1);
}

.works-theatre__copy-panel > a img {
    display: block;
    width: 17px;
    height: 14px;
    filter: var(--works-arrow-filter);
    transition: transform 320ms cubic-bezier(.16, 1, .3, 1), filter 400ms ease;
}

.works-theatre__copy-panel > a:hover::after,
.works-theatre__copy-panel > a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

.works-theatre__copy-panel > a:hover img,
.works-theatre__copy-panel > a:focus-visible img {
    transform: translateX(7px);
}

.works-theatre__preview {
    position: absolute;
    z-index: 38;
    bottom: 4.5vh;
    left: 6.25vw;
    width: clamp(190px, 16.7vw, 270px);
    aspect-ratio: 1.72 / 1;
    pointer-events: none;
    transition: opacity 340ms ease, transform 560ms cubic-bezier(.16, 1, .3, 1);
}

.works-theatre__preview-set {
    --preview-drift-x: 0%;
    --preview-drift-y: 0%;
    --preview-drift-scale: 1;
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 14px, 0) rotate(-2deg);
    transition: opacity 360ms ease, transform 620ms cubic-bezier(.16, 1, .3, 1);
}

.works-theatre__preview-set.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-2deg);
}

.works-theatre__preview-set img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid var(--works-fg);
    opacity: 0;
    object-fit: cover;
    background: #111;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .34);
    transform: translate3d(var(--preview-drift-x), var(--preview-drift-y), 0) scale(var(--preview-drift-scale));
    transform-origin: center;
    transition: opacity var(--works-preview-fade, .32s) ease;
    will-change: transform, opacity;
}

.works-theatre__preview-set img.is-preview-frame {
    z-index: 2;
    opacity: 1;
}

.works-theatre__rail {
    position: absolute;
    z-index: 64;
    top: 50%;
    right: 6.25vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    width: 250px;
    padding: 28px 0;
    transform: translateY(-50%);
}

.works-theatre__rail button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    width: 100%;
    min-height: 18px;
    padding: 0;
    border: 0;
    color: var(--works-fg);
    background: transparent;
    font-family: var(--works-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.works-theatre__rail button span {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 250ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}

.works-theatre__rail button i {
    display: block;
    width: 7px;
    height: 18px;
    border-radius: 6px;
    background: var(--works-fg);
    opacity: .34;
    transition: width 420ms cubic-bezier(.16, 1, .3, 1), opacity 240ms ease, background-color 420ms ease;
}

.works-theatre__rail button[aria-current="true"] i {
    background: var(--works-accent);
    opacity: 1;
}

.works-theatre__rail button:hover i,
.works-theatre__rail button:focus-visible i {
    opacity: 1;
}

.works-theatre__mobile-progress {
    display: none;
}

.works-theatre__instructions {
    position: absolute;
    z-index: 42;
    right: 6.25vw;
    bottom: 24px;
    left: 6.25vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    color: var(--works-fg);
    font-family: "Roboto Mono", monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    opacity: .55;
    pointer-events: none;
    transition: opacity 320ms ease, color 420ms ease;
}

.works-theatre__announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.works-theatre.is-overview {
    background-color: #080808 !important;
}

.works-theatre.is-overview .works-theatre__menu-scrim {
    opacity: 1;
}

.works-theatre.is-overview .works-theatre__copy,
.works-theatre.is-overview .works-theatre__preview,
.works-theatre.is-overview .works-theatre__instructions,
.works-theatre.is-overview .works-theatre__header {
    opacity: 0;
    transform: translate3d(22px, 0, 0);
    pointer-events: none;
}

.works-theatre.is-overview .works-theatre__media-link {
    pointer-events: none;
}

.works-theatre.is-overview .works-theatre__rail button span {
    opacity: .45;
    transform: translateX(0);
}

.works-theatre.is-overview .works-theatre__rail button {
    color: #f2efe8;
}

.works-theatre.is-overview .works-theatre__rail button i,
.works-theatre.is-overview .works-theatre__rail button[aria-current="true"] i {
    background: #f2efe8;
}

.works-theatre.is-overview .works-theatre__rail button[aria-current="true"] span,
.works-theatre.is-overview .works-theatre__rail button:hover span,
.works-theatre.is-overview .works-theatre__rail button:focus-visible span {
    opacity: 1;
}

.works-theatre.is-overview .works-theatre__rail button i {
    width: 34px;
}

.works-theatre :focus-visible {
    outline: 2px solid var(--works-accent);
    outline-offset: 5px;
}

body.works-theatre-engaged .portfolio-system-nav--home,
body.works-theatre-engaged .marquee {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.works-theatre-engaged .works-theatre,
body.works-theatre-engaged .works-theatre * {
    cursor: default;
}

body.works-theatre-engaged .works-theatre a,
body.works-theatre-engaged .works-theatre button {
    cursor: pointer;
}

@media (max-width: 1024px) {
    .works-theatre {
        min-height: 720px;
    }

    .works-theatre__header {
        grid-template-columns: 1fr auto;
        height: 68px;
        padding: 0 4.5vw;
        font-size: 11px;
    }

    .works-theatre__header-index {
        display: none;
    }

    .works-theatre__mobile-progress {
        position: absolute;
        z-index: 58;
        top: 54px;
        left: 50%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: min(64vw, 560px);
        height: 44px;
        transform: translateX(-50%);
    }

    .works-theatre__mobile-progress button {
        position: relative;
        height: 44px;
        padding: 0;
        overflow: hidden;
        border: 0;
        background: transparent;
    }

    .works-theatre__mobile-progress button::before,
    .works-theatre__mobile-progress button::after {
        content: "";
        position: absolute;
        top: 20px;
        right: 0;
        left: 0;
        height: 4px;
        border-radius: 4px;
    }

    .works-theatre__mobile-progress button::before {
        background: currentColor;
        opacity: .22;
    }

    .works-theatre__mobile-progress button::after {
        background: var(--works-accent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 520ms cubic-bezier(.16, 1, .3, 1);
    }

    .works-theatre__mobile-progress button[aria-current="true"]::after {
        transform: scaleX(1);
    }

    .works-theatre__deck {
        top: 100px;
        right: auto;
        left: 50%;
        width: min(72vw, 710px);
        height: 330px;
        min-height: 0;
        transform: translateX(-50%);
    }

    [data-works-theatre] .works-theatre__card,
    [data-works-theatre] #beadflow-card.works-theatre__card,
    [data-works-theatre] #kuangjing-card.works-theatre__card,
    [data-works-theatre] #tokyo-card.works-theatre__card {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .works-theatre__media-link {
        top: 100px;
        right: 14vw;
        width: 72vw;
        height: 330px;
        min-height: 0;
    }

    .works-theatre__copy {
        top: 55.5vh;
        right: 9vw;
        left: 9vw;
        width: auto;
        height: 38vh;
    }

    .works-theatre__copy-panel h2,
    .works-theatre__copy-panel[data-work-copy="1"] h2 {
        font-size: clamp(68px, 9.8vw, 98px);
    }

    .works-theatre__copy-panel[data-work-copy="2"] h2 {
        font-size: clamp(58px, 8vw, 82px);
    }

    .works-theatre__copy-panel p {
        font-size: 17px;
    }

    .works-theatre__preview {
        top: 355px;
        bottom: auto;
        left: 50%;
        width: 170px;
        transform: translateX(-50%);
    }

    .works-theatre__rail,
    .works-theatre__menu-scrim {
        display: none;
    }

    .works-theatre__instructions {
        right: 4.5vw;
        bottom: 16px;
        left: 4.5vw;
    }
}

@media (max-width: 768px) {
    .works-theatre {
        height: 100svh;
        min-height: 680px;
    }

    .works-theatre__header {
        height: 62px;
        padding: 0 24px;
        font-size: 11px;
        letter-spacing: .16em;
    }

    .works-theatre__mobile-progress {
        top: 48px;
        width: calc(100vw - 49px);
    }

    .works-theatre__deck {
        top: 96px;
        left: 24px;
        width: calc(100vw - 48px);
        height: clamp(222px, 29.98vh, 253px);
        transform: none;
    }

    [data-works-theatre] .works-theatre__card,
    [data-works-theatre] #beadflow-card.works-theatre__card,
    [data-works-theatre] #kuangjing-card.works-theatre__card,
    [data-works-theatre] #tokyo-card.works-theatre__card {
        transform: translate3d(108vw, 0, -60px) scale(.9);
    }

    [data-works-theatre] .works-theatre__card.is-current {
        transform: translate3d(0, 0, 0) scale(1.045);
    }

    [data-works-theatre] .works-theatre__card.is-above {
        transform: translate3d(-108vw, 0, -60px) scale(.9);
    }

    [data-works-theatre] .works-theatre__card.is-below {
        transform: translate3d(108vw, 0, -60px) scale(.9);
    }

    .works-theatre__card-media {
        clip-path: polygon(1.5% 1%, 99% 0, 100% 97%, 0 100%);
        box-shadow: 0 18px 42px rgba(0, 0, 0, .3);
    }

    .works-theatre__media-link {
        top: 96px;
        right: 24px;
        left: 24px;
        width: auto;
        height: clamp(222px, 29.98vh, 253px);
    }

    .works-theatre__copy {
        top: 43vh;
        right: 24px;
        left: 24px;
        width: auto;
        height: 50vh;
    }

    .works-theatre__eyebrow {
        margin-bottom: 12px;
        font-size: 8px;
    }

    .works-theatre__copy-panel h2,
    .works-theatre__copy-panel[data-work-copy="1"] h2 {
        margin-bottom: 14px;
        font-size: clamp(52px, 15vw, 58.5px);
        line-height: .94;
        letter-spacing: -.064em;
    }

    .works-theatre__copy-panel[data-work-copy="2"] h2 {
        font-size: clamp(43px, 12.4vw, 51px);
    }

    .works-theatre__copy-panel[data-work-copy="2"] h2 br {
        display: none;
    }

    .works-theatre__copy-panel[data-work-copy="2"] h2 br + .works-theatre__title-char::before {
        content: "\00a0";
    }

    .works-theatre__copy-panel p {
        margin-bottom: 21px;
        font-size: 16px;
        line-height: 1.6;
    }

    .works-theatre__copy-panel > a {
        gap: 10px;
        padding-block: 6px;
        font-size: 10px;
    }

    .works-theatre__preview {
        top: 32.1vh;
        left: 50%;
        width: 146px;
        transform: translateX(-50%);
    }

    .works-theatre__instructions {
        right: 24px;
        bottom: 15px;
        left: 24px;
        font-size: 8px;
    }
}

@media (max-width: 420px) and (max-height: 760px) {
    .works-theatre {
        min-height: 640px;
    }

    .works-theatre__deck,
    .works-theatre__media-link {
        height: 218px;
    }

    .works-theatre__copy {
        top: 41.7vh;
    }

    .works-theatre__preview {
        top: 31.2vh;
        width: 130px;
    }

    .works-theatre__copy-panel h2,
    .works-theatre__copy-panel[data-work-copy="1"] h2 {
        font-size: 48px;
    }

    .works-theatre__copy-panel[data-work-copy="2"] h2 {
        font-size: 41px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .works-theatre,
    .works-theatre *,
    .works-theatre *::before,
    .works-theatre *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 120ms !important;
        transition-delay: 0s !important;
    }
}

.works-theatre.is-reduced-motion,
.works-theatre.is-reduced-motion *,
.works-theatre.is-reduced-motion *::before,
.works-theatre.is-reduced-motion *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    transition-delay: 0s !important;
}