:root {
  --vx-runtime-css: 1;
  --vx-background: #0b0d10;
  --vx-foreground: #f5f6f2;
  --vx-color-1: #f5f6f2;
  --vx-color-2: #8d79ff;
  --vx-color-3: #ff7548;
  --vx-color-4: #162327;
  --vx-ease-out: cubic-bezier(.16, 1, .3, 1);
  --vx-ease-smooth: cubic-bezier(.65, 0, .35, 1);
}

[data-vx-surface] {
  isolation: isolate;
  position: relative;
}

[data-vx-surface="light-field"] {
  background:
    radial-gradient(80% 90% at 12% 8%, color-mix(in oklab, var(--vx-color-2) 42%, transparent), transparent 70%),
    radial-gradient(75% 85% at 92% 76%, color-mix(in oklab, var(--vx-color-3) 34%, transparent), transparent 72%),
    linear-gradient(145deg, var(--vx-background), color-mix(in oklab, var(--vx-background) 82%, var(--vx-color-4)));
}

[data-vx-surface="grid"] {
  background-color: var(--vx-background);
  background-image:
    linear-gradient(color-mix(in srgb, var(--vx-foreground) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--vx-foreground) 9%, transparent) 1px, transparent 1px);
  background-size: clamp(42px, 6vw, 88px) clamp(42px, 6vw, 88px);
}

[data-vx-surface="grain"]::after,
[data-vx-shader]::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
  content: "";
  inset: 0;
  opacity: .055;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

[data-vx-shader] {
  background: var(--vx-background);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

[data-vx-shader] > canvas {
  height: 100% !important;
  inset: 0;
  pointer-events: none;
  position: absolute !important;
  width: 100% !important;
  z-index: 0;
}

[data-vx-shader] > :not(canvas) {
  position: relative;
  z-index: 1;
}

[data-vx-shader-state="ready"]:is([data-vx-shader="fluted"], [data-vx-shader="dither"]) > img {
  opacity: 0;
}

[data-vx-runtime="ready"] [data-vx-reveal] {
  opacity: 0;
  transition:
    opacity .75s var(--vx-ease-out),
    transform .9s var(--vx-ease-out),
    clip-path .95s var(--vx-ease-out);
  transition-delay: calc(var(--vx-stagger, 0) * 80ms);
}

[data-vx-runtime="ready"] [data-vx-reveal="lift"] {
  transform: translate3d(0, clamp(22px, 4vw, 64px), 0);
}

[data-vx-runtime="ready"] [data-vx-reveal="mask"] {
  clip-path: inset(0 0 100% 0);
  opacity: 1;
  transform: translate3d(0, 1.05em, 0);
}

[data-vx-runtime="ready"] [data-vx-reveal="scale"] {
  transform: scale(.94);
}

[data-vx-runtime="ready"] [data-vx-reveal][data-vx-visible] {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: none;
}

[data-vx-text-progress] {
  --vx-progress: 0;
}

[data-vx-text-progress] [data-vx-word] {
  color: color-mix(in oklab, currentColor 22%, transparent);
  opacity: clamp(.2, calc((var(--vx-progress) * (var(--vx-count) + 3) - var(--vx-index)) * 1.8), 1);
  transition: color .2s linear;
}

[data-vx-story] {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 6vw, 7rem);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}

[data-vx-story-stage] {
  display: grid;
  min-height: min(76vh, 820px);
  position: sticky;
  top: clamp(1rem, 8vh, 6rem);
}

[data-vx-story-visual] {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transform: scale(.965) translate3d(0, 2%, 0);
  transition: opacity .7s var(--vx-ease-smooth), transform .9s var(--vx-ease-out);
}

[data-vx-story-visual][data-vx-active] {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

[data-vx-story-step] {
  min-height: 58vh;
  opacity: .38;
  transition: opacity .45s ease;
}

[data-vx-story-step][data-vx-active] {
  opacity: 1;
}

[data-vx-transition="notch"] {
  clip-path: polygon(0 0, calc(50% - clamp(28px, 6vw, 88px)) 0, 50% clamp(24px, 5vw, 72px), calc(50% + clamp(28px, 6vw, 88px)) 0, 100% 0, 100% 100%, 0 100%);
}

[data-vx-transition="curve"] {
  border-radius: clamp(32px, 8vw, 128px) clamp(32px, 8vw, 128px) 0 0;
  overflow: clip;
}

[data-vx-transition="wipe"] {
  clip-path: inset(calc((1 - var(--vx-progress, 1)) * 12%) 0 0 0 round clamp(24px, 5vw, 80px));
  transform: translate3d(0, calc((1 - var(--vx-progress, 1)) * 5vh), 0);
}

[data-vx-tilt] {
  transform: perspective(900px) rotateX(var(--vx-tilt-x, 0deg)) rotateY(var(--vx-tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s var(--vx-ease-out);
}

[data-vx-magnetic] {
  transform: translate3d(var(--vx-magnetic-x, 0), var(--vx-magnetic-y, 0), 0);
  transition: transform .45s var(--vx-ease-out);
}

[data-vx-spotlight] {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

[data-vx-spotlight]::before {
  background: radial-gradient(420px circle at var(--vx-pointer-x, 50%) var(--vx-pointer-y, 50%), color-mix(in oklab, var(--vx-color-2) 26%, transparent), transparent 72%);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity .35s ease;
  z-index: -1;
}

[data-vx-spotlight]:is(:hover, :focus-within)::before {
  opacity: 1;
}

[data-vx-media] {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

[data-vx-media] :is(.vx-media-primary, .vx-media-secondary) {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transition: opacity .65s var(--vx-ease-smooth), transform 1s var(--vx-ease-out), clip-path .8s var(--vx-ease-out);
  width: 100%;
}

[data-vx-media] .vx-media-secondary {
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  transform: scale(1.06);
}

[data-vx-media][data-vx-active] .vx-media-primary {
  opacity: .28;
  transform: scale(1.035);
}

[data-vx-media][data-vx-active] .vx-media-secondary {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: none;
}

[data-vx-roll] {
  display: inline-grid;
  overflow: clip;
}

[data-vx-roll] > * {
  grid-area: 1 / 1;
  transition: transform .55s var(--vx-ease-out), opacity .4s ease;
}

[data-vx-roll] > :last-child {
  opacity: 0;
  transform: translateY(110%);
}

[data-vx-roll]:is(:hover, :focus-visible) > :first-child {
  opacity: 0;
  transform: translateY(-110%);
}

[data-vx-roll]:is(:hover, :focus-visible) > :last-child {
  opacity: 1;
  transform: none;
}

[data-vx-menu-panel] {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 18px, 0) scale(.985);
  transition: opacity .35s ease, transform .55s var(--vx-ease-out), visibility 0s linear .55s;
  visibility: hidden;
}

[data-vx-menu][data-vx-active] [data-vx-menu-panel] {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
  visibility: visible;
}

body.vx-menu-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  [data-vx-story] {
    display: block;
  }

  [data-vx-story-stage] {
    min-height: 62svh;
    top: 1rem;
    z-index: 1;
  }

  [data-vx-story-step] {
    min-height: 72svh;
    padding-block: 20svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-vx-reveal],
  [data-vx-story-visual],
  [data-vx-story-step],
  [data-vx-tilt],
  [data-vx-magnetic],
  [data-vx-media] *,
  [data-vx-roll] > *,
  [data-vx-menu-panel] {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}