* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #030303;
    color: #fff;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    font-family: "Bahnschrift", "Aptos Display", "Trebuchet MS", sans-serif;
}

.stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 14%, rgba(104, 211, 215, .18), transparent 34rem),
        radial-gradient(circle at 82% 74%, rgba(255, 196, 107, .12), transparent 32rem),
        linear-gradient(145deg, #020708, #071315 54%, #0d2226);
}

.stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, .75), transparent 78%);
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    overflow: hidden;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
    clip-path: inset(0 0 0 0);
    transition-property: opacity, transform, filter, clip-path;
    transition-duration: var(--transition-duration, 700ms);
    transition-timing-function: var(--transition-easing, ease-in-out);
    will-change: opacity, transform, filter, clip-path;
    backface-visibility: hidden;
}

.slide.preparing {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-120vw, 0, 0);
    transition: none;
}

.slide.is-visible {
    opacity: 1;
}

.slide.is-leaving {
    pointer-events: none;
}

.slide.transition-none,
.slide.transition-none.is-leaving {
    transition: none;
}

.slide.transition-fade,
.slide.transition-crossfade,
.slide.transition-quick-fade {
    opacity: 0;
}

.slide.transition-quick-fade {
    transition-duration: 360ms;
}

.slide.transition-fade.is-visible,
.slide.transition-crossfade.is-visible,
.slide.transition-quick-fade.is-visible {
    opacity: 1;
}

.slide.transition-fade.is-leaving,
.slide.transition-crossfade.is-leaving,
.slide.transition-quick-fade.is-leaving {
    opacity: 0;
}

.slide.transition-slide-left {
    transform: translate3d(8%, 0, 0);
}

.slide.transition-slide-right {
    transform: translate3d(-8%, 0, 0);
}

.slide.transition-slide-up {
    transform: translate3d(0, 8%, 0);
}

.slide.transition-slide-down {
    transform: translate3d(0, -8%, 0);
}

.slide.transition-slide-left.is-visible,
.slide.transition-slide-right.is-visible,
.slide.transition-slide-up.is-visible,
.slide.transition-slide-down.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.slide.transition-slide-left.is-leaving {
    opacity: 0;
    transform: translate3d(-5%, 0, 0);
}

.slide.transition-slide-right.is-leaving {
    opacity: 0;
    transform: translate3d(5%, 0, 0);
}

.slide.transition-slide-up.is-leaving {
    opacity: 0;
    transform: translate3d(0, -5%, 0);
}

.slide.transition-slide-down.is-leaving {
    opacity: 0;
    transform: translate3d(0, 5%, 0);
}

.slide.transition-push-left {
    transform: translate3d(100%, 0, 0);
}

.slide.transition-push-right {
    transform: translate3d(-100%, 0, 0);
}

.slide.transition-push-up {
    transform: translate3d(0, 100%, 0);
}

.slide.transition-push-down {
    transform: translate3d(0, -100%, 0);
}

.slide.transition-push-left.is-visible,
.slide.transition-push-right.is-visible,
.slide.transition-push-up.is-visible,
.slide.transition-push-down.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.slide.transition-push-left.is-leaving {
    opacity: 1;
    transform: translate3d(-100%, 0, 0);
}

.slide.transition-push-right.is-leaving {
    opacity: 1;
    transform: translate3d(100%, 0, 0);
}

.slide.transition-push-up.is-leaving {
    opacity: 1;
    transform: translate3d(0, -100%, 0);
}

.slide.transition-push-down.is-leaving {
    opacity: 1;
    transform: translate3d(0, 100%, 0);
}

.slide.transition-zoom-in {
    transform: scale(.965);
}

.slide.transition-zoom-out {
    transform: scale(1.06);
}

.slide.transition-zoom-in.is-visible,
.slide.transition-zoom-out.is-visible,
.slide.transition-slow-zoom-fade.is-visible,
.slide.transition-ken-burns.is-visible {
    opacity: 1;
    transform: scale(1);
}

.slide.transition-slow-zoom-fade,
.slide.transition-ken-burns {
    transform: scale(1.045);
}

.slide.transition-slow-zoom-fade.is-visible .slide-main,
.slide.transition-ken-burns.is-visible .slide-main {
    transform: scale(1.035);
}

.slide.transition-scale-pop {
    transform: scale(.88);
    filter: saturate(.7);
}

.slide.transition-scale-pop.is-visible {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1);
}

.slide.transition-blur-fade,
.slide.transition-soft-blur-in {
    filter: blur(22px);
    transform: scale(1.025);
}

.slide.transition-blur-fade.is-visible,
.slide.transition-soft-blur-in.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

.slide.transition-blur-fade.is-leaving,
.slide.transition-soft-blur-in.is-leaving {
    opacity: 0;
    filter: blur(14px);
    transform: scale(1.015);
}

.slide.transition-glow-fade {
    filter: brightness(1.35) saturate(1.25);
}

.slide.transition-glow-fade.is-visible {
    opacity: 1;
    filter: brightness(1) saturate(1);
}

.slide.transition-light-sweep::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
    transform: translateX(-100%);
    transition: transform var(--transition-duration, 700ms) var(--transition-easing, ease-in-out);
}

.slide.transition-light-sweep.is-visible {
    opacity: 1;
}

.slide.transition-light-sweep.is-visible::before {
    transform: translateX(100%);
}

.slide.transition-dark-fade,
.slide.transition-cinematic-fade {
    filter: brightness(.58) contrast(1.18);
    transform: scale(1.018);
}

.slide.transition-dark-fade.is-visible,
.slide.transition-cinematic-fade.is-visible {
    opacity: 1;
    filter: brightness(1) contrast(1);
    transform: scale(1);
}

.slide.transition-flip-horizontal {
    transform: perspective(1400px) rotateY(-55deg);
}

.slide.transition-flip-vertical {
    transform: perspective(1400px) rotateX(55deg);
}

.slide.transition-flip-horizontal.is-visible,
.slide.transition-flip-vertical.is-visible,
.slide.transition-cube-left.is-visible,
.slide.transition-cube-right.is-visible,
.slide.transition-rotate-in.is-visible,
.slide.transition-tilt-slide.is-visible {
    opacity: 1;
    transform: perspective(1400px) rotateX(0) rotateY(0) rotateZ(0) translate3d(0, 0, 0);
}

.slide.transition-cube-left {
    transform: perspective(1400px) translateX(12%) rotateY(-70deg);
}

.slide.transition-cube-right {
    transform: perspective(1400px) translateX(-12%) rotateY(70deg);
}

.slide.transition-rotate-in {
    transform: scale(.94) rotateZ(-4deg);
}

.slide.transition-tilt-slide {
    transform: perspective(1200px) translateY(8%) rotateX(10deg);
}

.slide.transition-swipe,
.slide.transition-shutter,
.slide.transition-split-reveal,
.slide.transition-curtain-open,
.slide.transition-curtain-close,
.slide.transition-wipe-left,
.slide.transition-wipe-right,
.slide.transition-wipe-up,
.slide.transition-wipe-down,
.slide.transition-circle-reveal,
.slide.transition-diamond-reveal {
    opacity: 1;
}

.slide.transition-swipe {
    transform: translate3d(100%, 0, 0) skewX(-6deg);
}

.slide.transition-swipe.is-visible {
    transform: translate3d(0, 0, 0) skewX(0);
}

.slide.transition-snap-zoom {
    transform: scale(1.18);
    filter: saturate(1.35);
}

.slide.transition-snap-zoom.is-visible {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1);
}

.slide.transition-flash-fade {
    filter: brightness(2.4);
}

.slide.transition-flash-fade.is-visible {
    opacity: 1;
    filter: brightness(1);
}

.slide.transition-shutter,
.slide.transition-curtain-open {
    clip-path: inset(0 50% 0 50%);
}

.slide.transition-shutter.is-visible,
.slide.transition-curtain-open.is-visible {
    clip-path: inset(0 0 0 0);
}

.slide.transition-curtain-close {
    clip-path: inset(50% 0 50% 0);
}

.slide.transition-curtain-close.is-visible {
    clip-path: inset(0 0 0 0);
}

.slide.transition-split-reveal {
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
}

.slide.transition-split-reveal.is-visible {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.slide.transition-wipe-left {
    clip-path: inset(0 0 0 100%);
}

.slide.transition-wipe-right {
    clip-path: inset(0 100% 0 0);
}

.slide.transition-wipe-up {
    clip-path: inset(100% 0 0 0);
}

.slide.transition-wipe-down {
    clip-path: inset(0 0 100% 0);
}

.slide.transition-wipe-left.is-visible,
.slide.transition-wipe-right.is-visible,
.slide.transition-wipe-up.is-visible,
.slide.transition-wipe-down.is-visible {
    clip-path: inset(0 0 0 0);
}

.slide.transition-circle-reveal {
    clip-path: circle(0 at 50% 50%);
}

.slide.transition-circle-reveal.is-visible {
    clip-path: circle(75% at 50% 50%);
}

.slide.transition-diamond-reveal {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}

.slide.transition-diamond-reveal.is-visible {
    clip-path: polygon(50% -25%, 125% 50%, 50% 125%, -25% 50%);
}

.slide-bg,
.slide-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.slide-bg {
    object-fit: cover;
    filter: blur(38px) brightness(.42) saturate(1.22);
    transform: scale(1.22);
}

.slide-main {
    object-fit: contain;
    object-position: center center;
    z-index: 2;
    transition: transform var(--transition-duration, 700ms) var(--transition-easing, ease-in-out);
    background: transparent;
}

video.slide-main {
    background: #030303;
    pointer-events: none;
}

video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-enclosure {
    display: none !important;
    -webkit-appearance: none;
    opacity: 0 !important;
}

.status {
    position: fixed;
    left: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 10;
    max-width: calc(100% - 28px);
    padding: 8px 12px;
    border-radius: 999px;
    color: rgba(242, 255, 252, .92);
    background: rgba(6, 17, 19, .58);
    border: 1px solid rgba(104, 211, 215, .2);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .24);
    font-size: 12px;
}

.status.hidden {
    display: none;
}

.empty {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    color: #fff;
    z-index: 3;
}

.empty.hidden {
    display: none;
}

.empty-card {
    width: min(560px, 100%);
    border: 1px solid rgba(104, 211, 215, .22);
    border-radius: 26px;
    padding: 28px;
    background:
        radial-gradient(circle at 12% 8%, rgba(104, 211, 215, .18), transparent 15rem),
        linear-gradient(145deg, rgba(6, 17, 19, .8), rgba(17, 48, 53, .72));
    box-shadow: 0 24px 90px rgba(0, 0, 0, .38);
    backdrop-filter: blur(14px);
}

.empty-card h1 {
    margin: 0 0 10px;
    font-size: clamp(2rem, 7vw, 4.8rem);
    letter-spacing: -.06em;
    color: #adfff4;
}