: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-image"], [data-vx-shader="dither-image"], [data-vx-shader="logo-heatmap"], [data-vx-shader="logo-metal"]) > 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),
    mask-position .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);
}

/* The mask line is a paint mask, not a clip-path: Chromium clips an observed element by its own
   clip-path, so a fully clipped element never intersects and never reveals. */
[data-vx-runtime="ready"] [data-vx-reveal="mask"] {
  mask: linear-gradient(#000 50%, transparent 0) 0 100% / 100% 200% no-repeat;
  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] {
  mask-position: 0 0;
  opacity: 1;
  transform: none;
}

[data-vx-runtime="ready"] [data-vx-reveal="words"] {
  opacity: 1;
  transform: none;
}

[data-vx-reveal="words"] [data-vx-rise] {
  display: inline-block;
}

[data-vx-runtime="ready"] [data-vx-reveal="words"] [data-vx-rise] {
  opacity: 0;
  transform: translate3d(0, .5em, 0);
  transition:
    opacity .55s var(--vx-ease-out),
    transform .7s var(--vx-ease-out);
  transition-delay: calc(var(--vx-rise, 0) * 45ms);
}

[data-vx-runtime="ready"] [data-vx-reveal="words"][data-vx-visible] [data-vx-rise] {
  opacity: 1;
  transform: none;
}

[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;
  }
}

/* USER DECISION: the approved motion library (Max, 29.09): text scrubbed out of blur or lit word by word,
   lines rising from masks, pinned card stacks and sideways tracks, a circle opening from the call to action,
   an image trail, physics tags, and footers waiting under the page. --vx-scroll is the runtime's scroll progress. */
[data-vx-scrub] .vx-w {
  display: inline-block;
  white-space: nowrap;
}

[data-vx-scrub="blur"] .vx-c {
  --vx-sharp: clamp(0, calc((var(--vx-scroll, 1) * (var(--vx-chars) + 12) - var(--vx-char)) / 12), 1);
  display: inline-block;
  filter: blur(calc((1 - var(--vx-sharp)) * 10px)) brightness(calc(var(--vx-sharp) * 100%));
}

/* USER DECISION: lit text replaces the old data-vx-text-progress (Max, 30.09). */
[data-vx-scrub="highlight"] .vx-w {
  opacity: clamp(.18, calc((var(--vx-scroll, 1) * (var(--vx-words) + 3) - var(--vx-word)) * 1.2), 1);
}

/* Lines rise out of their own masks, line after line: each word clips its text, which rises inside it. */
[data-vx-reveal="lines"] .vx-w {
  display: inline-block;
  margin-bottom: -.12em;
  overflow: clip;
  padding-bottom: .12em;
  vertical-align: top;
}

[data-vx-reveal="lines"] .vx-w > span {
  display: inline-block;
}

[data-vx-runtime="ready"] [data-vx-reveal="lines"] {
  opacity: 1;
  transform: none;
}

[data-vx-runtime="ready"] [data-vx-reveal="lines"] .vx-w > span {
  transition: transform 1.1s var(--vx-ease-out);
  transition-delay: calc(var(--vx-line, 0) * 110ms);
}

[data-vx-runtime="ready"] [data-vx-reveal="lines"]:not([data-vx-visible]) .vx-w > span {
  transform: translate3d(0, 110%, 0);
}

/* A pinned deck: cards arrive from below and settle on one another; covered cards shrink back and dim. */
[data-vx-stack] {
  height: calc(100svh + var(--vx-cards, 4) * 50svh);
  position: relative;
}

[data-vx-stack] > :first-child {
  height: 100svh;
  position: sticky;
  top: 0;
}

:has(> [data-vx-card]) {
  position: relative;
}

[data-vx-card] {
  --vx-arrive: clamp(0, calc(var(--vx-scroll, 0) * var(--vx-cards) - var(--vx-card) + 1), 1);
  --vx-depth: clamp(0, calc(var(--vx-scroll, 0) * var(--vx-cards) - var(--vx-card)), 3);
  filter: brightness(calc(1 - var(--vx-depth) * .16));
  inset: 0;
  position: absolute;
  transform: translateY(calc((1 - var(--vx-arrive)) * 115% + var(--vx-card) * 14px)) scale(calc(1 - var(--vx-depth) * .05));
  transform-origin: 50% 0;
}

[data-vx-stack][data-vx-still] {
  height: auto;
}

[data-vx-stack][data-vx-still] > :first-child {
  height: auto;
  position: static;
}

[data-vx-stack][data-vx-still] :has(> [data-vx-card]) {
  display: grid;
  gap: 16px;
  height: auto;
}

[data-vx-stack][data-vx-still] [data-vx-card] {
  filter: none;
  position: relative;
  transform: none;
}

/* A pinned row slides sideways for as long as it needs. */
[data-vx-track] {
  height: calc(100svh + var(--vx-track-distance, 0px));
  position: relative;
}

[data-vx-track] > :first-child {
  height: 100svh;
  overflow: hidden;
  position: sticky;
  top: 0;
}

[data-vx-track-row] {
  transform: translate3d(var(--vx-track-x, 0px), 0, 0);
  will-change: transform;
}

[data-vx-track][data-vx-still] {
  height: auto;
}

[data-vx-track][data-vx-still] > :first-child {
  height: auto;
  overflow-x: auto;
  position: static;
}

/* The next panel opens as a circle out of the button while the section holds the screen. */
[data-vx-circle] {
  height: 240svh;
  position: relative;
}

[data-vx-circle] > * {
  height: 100svh;
  position: sticky;
  top: 0;
}

[data-vx-circle] > [data-vx-circle-panel] {
  clip-path: circle(0 at 50% 50%);
  margin-top: -100svh;
}

[data-vx-circle][data-vx-still] {
  height: auto;
}

[data-vx-circle][data-vx-still] > * {
  height: auto;
  min-height: 100svh;
  position: relative;
}

[data-vx-circle][data-vx-still] > [data-vx-circle-panel] {
  clip-path: none;
  margin-top: 0;
}

/* Screens fly out behind the pointer. */
[data-vx-trail] {
  overflow: clip;
  position: relative;
}

[data-vx-trail-image] {
  display: none;
}

.vx-trail-image {
  border-radius: var(--vx-trail-radius, 14px);
  box-shadow: 0 24px 60px rgb(0 0 0 / .6);
  height: auto;
  pointer-events: none;
  position: absolute;
  width: var(--vx-trail-size, clamp(150px, 18vw, 260px));
  will-change: transform, opacity;
  z-index: 2;
}

/* Physics: bodies wait until the world drops them in; the world then places them. */
:is([data-vx-physics], [data-vx-footer="coins"]) {
  overflow: clip;
  position: relative;
  touch-action: pan-y;
}

:is([data-vx-physics], [data-vx-footer="coins"]) [data-vx-body] {
  cursor: grab;
  left: 0;
  position: absolute;
  top: 0;
  touch-action: none;
  user-select: none;
  will-change: transform;
}

:is([data-vx-physics], [data-vx-footer="coins"]):not([data-vx-still]) [data-vx-body]:not([data-vx-live]) {
  visibility: hidden;
}

:is([data-vx-physics], [data-vx-footer="coins"])[data-vx-still] [data-vx-body] {
  position: relative;
}

[data-vx-body]:active {
  cursor: grabbing;
}

/* Footers wait under the page: the block before one covers it and lifts away. */
:has(+ [data-vx-footer]) {
  position: relative;
  z-index: 1;
}

:where(:has(+ [data-vx-footer])) {
  background-color: var(--vx-background);
}

/* The reveal depends on this pinning and layering, so a page's own footer rules cannot undo them. */
[data-vx-footer] {
  bottom: 0 !important;
  overflow: hidden;
  position: sticky !important;
  z-index: 0 !important;
}

.vx-footer__canvas {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  touch-action: pan-y;
  width: 100%;
}

/* The canvas and extruded footers draw the wordmark; its text stays for readers. */
[data-vx-footer]:not([data-vx-footer="coins"]) [data-vx-wordmark] {
  clip-path: inset(50%);
  position: absolute;
  white-space: nowrap;
}

.vx-extrude {
  display: grid;
  inset: 0;
  place-items: center;
  pointer-events: none;
  position: absolute;
}

.vx-extrude > span {
  grid-area: 1 / 1;
  line-height: 1;
  white-space: nowrap;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-vx-reveal],
  [data-vx-reveal] .vx-w > span,
  [data-vx-rise],
  [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;
  }
}

/* Charts and maps: the runtime draws geometry behind the element's children; color, radius, gap, and stroke come from the page. */
:is([data-vx-chart], [data-vx-map]) {
  isolation: isolate;
  position: relative;
}

.vx-chart {
  left: 0;
  overflow: visible;
  position: absolute;
  top: 0;
  z-index: -1;
}

/* Parts of a multi-part chart take the page's --vx-chart-c1…c6, or shades of its color. */
.vx-chart .is-p1 { --vx-part: var(--vx-chart-c1, var(--vx-chart-accent, currentColor)); }
.vx-chart .is-p2 { --vx-part: var(--vx-chart-c2, color-mix(in srgb, currentColor 62%, transparent)); }
.vx-chart .is-p3 { --vx-part: var(--vx-chart-c3, color-mix(in srgb, currentColor 40%, transparent)); }
.vx-chart .is-p4 { --vx-part: var(--vx-chart-c4, color-mix(in srgb, currentColor 24%, transparent)); }
.vx-chart .is-p5 { --vx-part: var(--vx-chart-c5, color-mix(in srgb, currentColor 80%, transparent)); }
.vx-chart .is-p6 { --vx-part: var(--vx-chart-c6, color-mix(in srgb, currentColor 14%, transparent)); }

.vx-chart__track {
  fill: none;
  stroke: var(--vx-chart-track, color-mix(in srgb, currentColor 16%, transparent));
  stroke-linecap: round;
}

.vx-chart__bar,
.vx-chart__head,
.vx-chart__slice,
.vx-chart__bubble {
  fill: var(--vx-part, var(--vx-chart-fill, currentColor));
}

.vx-chart__tile {
  fill: var(--vx-part, var(--vx-chart-fill, currentColor));
}

.vx-chart__lane {
  fill: var(--vx-chart-track, color-mix(in srgb, currentColor 16%, transparent));
}

.vx-chart__knob {
  fill: var(--vx-chart-accent, currentColor);
}

.vx-chart__stem {
  stroke: var(--vx-part, var(--vx-chart-fill, currentColor));
  stroke-linecap: round;
}

[data-accent] :is(.vx-chart__bar, .vx-chart__head, .vx-chart__slice, .vx-chart__bubble):not(.is-accent) {
  fill: var(--vx-part, var(--vx-chart-fill, color-mix(in srgb, currentColor 36%, transparent)));
}

[data-accent] .vx-chart__stem:not(.is-accent) {
  stroke: var(--vx-part, var(--vx-chart-fill, color-mix(in srgb, currentColor 36%, transparent)));
}

:is(.vx-chart__bar, .vx-chart__head, .vx-chart__slice, .vx-chart__bubble, .vx-chart__tile).is-accent {
  fill: var(--vx-chart-accent, currentColor);
}

.vx-chart__stem.is-accent {
  stroke: var(--vx-chart-accent, currentColor);
}

.vx-chart__line,
.vx-chart__value,
.vx-chart__band {
  fill: none;
  stroke: var(--vx-part, var(--vx-chart-accent, currentColor));
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vx-chart__stop {
  stop-color: var(--vx-part, var(--vx-chart-fill, currentColor));
  stop-opacity: .4;
}

.vx-chart__stop + .vx-chart__stop {
  stop-opacity: 0;
}

.vx-chart__ramp {
  stop-color: var(--vx-part);
}

.vx-chart__dot {
  fill: var(--vx-part, var(--vx-chart-accent, currentColor));
}

.vx-chart__halo {
  fill: var(--vx-chart-accent, currentColor);
  fill-opacity: .22;
}

.vx-chart__guide {
  stroke: var(--vx-chart-grid, color-mix(in srgb, currentColor 30%, transparent));
  stroke-dasharray: 2 3;
}

.vx-chart__tick,
.vx-chart__cell {
  fill: var(--vx-chart-track, color-mix(in srgb, currentColor 16%, transparent));
  stroke: var(--vx-chart-track, color-mix(in srgb, currentColor 16%, transparent));
}

.vx-chart__cell {
  stroke: none;
}

.vx-chart__tick.is-on {
  stroke: var(--vx-chart-accent, currentColor);
}

.vx-chart__cell:is(.is-on, .is-heat) {
  fill: var(--vx-chart-accent, currentColor);
}

.vx-chart__grid {
  stroke: var(--vx-chart-grid, color-mix(in srgb, currentColor 14%, transparent));
  stroke-dasharray: 3 4;
}

.vx-chart__label {
  fill: var(--vx-chart-label, color-mix(in srgb, currentColor 62%, transparent));
  font-size: var(--vx-chart-label-size, 11px);
}

.vx-chart__number {
  fill: var(--vx-chart-number, currentColor);
  font-size: var(--vx-chart-number-size, 13px);
  font-weight: 600;
}

.vx-chart__inlabel,
.vx-chart__number.is-in {
  fill: var(--vx-chart-ink, var(--vx-background, #fff));
}

.vx-chart__inlabel {
  font-size: var(--vx-chart-label-size, 11px);
}

.vx-chart__callout rect {
  fill: var(--vx-chart-callout, var(--vx-chart-accent, currentColor));
}

.vx-chart__callout-text {
  fill: var(--vx-chart-callout-ink, var(--vx-background, #fff));
  font-size: var(--vx-chart-callout-size, 12px);
  font-weight: 600;
}

.vx-map__land {
  fill: var(--vx-map-land, color-mix(in srgb, currentColor 30%, transparent));
}

[data-vx-map] > [data-lat] {
  position: absolute;
  translate: -50% -50%;
}

/* Entrances: each part waits hidden until its chart enters the viewport, then plays in order of --vx-i. */
:is(.vx-chart__bar, .vx-chart__stack, .vx-chart__stem, .vx-chart__row, .vx-chart__dot, .vx-chart__head, .vx-chart__bubble, .vx-chart__tile, .vx-chart__callout) {
  transform-box: fill-box;
}

:is(.vx-chart__bar, .vx-chart__stack, .vx-chart__stem) {
  transform-origin: 50% 100%;
}

.vx-chart__bar.is-down {
  transform-origin: 50% 0;
}

.vx-chart__row {
  transform-origin: 0 50%;
}

:is(.vx-chart__dot, .vx-chart__head, .vx-chart__bubble, .vx-chart__tile, .vx-chart__callout) {
  transform-origin: center;
}

[data-vx-runtime="ready"] [data-vx-chart]:not([data-vx-chart-state="in"]) :is(.vx-chart__bar, .vx-chart__stack, .vx-chart__stem) {
  transform: scale(1, 0);
}

[data-vx-runtime="ready"] [data-vx-chart]:not([data-vx-chart-state="in"]) .vx-chart__row {
  transform: scale(0, 1);
}

[data-vx-runtime="ready"] [data-vx-chart]:not([data-vx-chart-state="in"]) :is(.vx-chart__dot, .vx-chart__head, .vx-chart__bubble) {
  transform: scale(0);
}

[data-vx-runtime="ready"] [data-vx-chart]:not([data-vx-chart-state="in"]) :is(.vx-chart__tile, .vx-chart__callout) {
  opacity: 0;
  transform: scale(.9);
}

[data-vx-runtime="ready"] [data-vx-chart]:not([data-vx-chart-state="in"]) :is(.vx-chart__line, .vx-chart__value, .vx-chart__band) {
  stroke-dashoffset: 1;
}

[data-vx-runtime="ready"] [data-vx-chart]:not([data-vx-chart-state="in"]) :is(.vx-chart__area, .vx-chart__halo, .vx-chart__guide, .vx-chart__knob, .vx-chart__number, .vx-chart__inlabel, .vx-chart__cell.is-heat, .vx-chart__label.is-ring) {
  opacity: 0;
}

[data-vx-runtime="ready"] [data-vx-chart]:not([data-vx-chart-state="in"]) .vx-chart__tick.is-on {
  stroke: var(--vx-chart-track, color-mix(in srgb, currentColor 16%, transparent));
}

[data-vx-runtime="ready"] [data-vx-chart]:not([data-vx-chart-state="in"]) .vx-chart__cell.is-on {
  fill: var(--vx-chart-track, color-mix(in srgb, currentColor 16%, transparent));
}

[data-vx-runtime="ready"] [data-vx-map]:not([data-vx-chart-state="in"]) .vx-map__land {
  opacity: 0;
}

[data-vx-runtime="ready"] [data-vx-map]:not([data-vx-chart-state="in"]) > [data-lat] {
  opacity: 0;
  scale: .4;
}

:is(.vx-chart__bar, .vx-chart__stack, .vx-chart__stem, .vx-chart__row, .vx-chart__dot, .vx-chart__bubble) {
  transition: transform .9s var(--vx-ease-out) calc(var(--vx-i, 0) * 55ms);
}

.vx-chart__head {
  transition: transform .6s var(--vx-ease-out) calc(var(--vx-i, 0) * 55ms + .35s);
}

.vx-chart__tile {
  transition: opacity .6s var(--vx-ease-out) calc(var(--vx-i, 0) * 60ms), transform .8s var(--vx-ease-out) calc(var(--vx-i, 0) * 60ms);
}

:is(.vx-chart__line, .vx-chart__value, .vx-chart__band) {
  stroke-dasharray: 1;
  transition: stroke-dashoffset 1.3s var(--vx-ease-out) calc(var(--vx-i, 0) * 140ms);
}

.vx-chart__area {
  transition: opacity .9s var(--vx-ease-out) calc(var(--vx-i, 0) * 140ms + .25s);
}

:is(.vx-chart__halo, .vx-chart__guide, .vx-chart__callout, .vx-chart__knob) {
  transition: opacity .6s var(--vx-ease-out) .9s, transform .6s var(--vx-ease-out) .9s;
}

:is(.vx-chart__number, .vx-chart__inlabel, .vx-chart__label.is-ring) {
  transition: opacity .5s var(--vx-ease-out) calc(var(--vx-i, 0) * 55ms + .5s);
}

.vx-chart__tick.is-on {
  transition: stroke .35s var(--vx-ease-out) calc(var(--vx-i, 0) * 14ms);
}

.vx-chart__cell.is-on {
  transition: fill .35s var(--vx-ease-out) calc(var(--vx-i, 0) * 12ms);
}

.vx-chart__cell.is-heat {
  transition: opacity .5s var(--vx-ease-out) calc(var(--vx-i, 0) * 45ms);
}

.vx-map__land {
  transition: opacity 1.2s var(--vx-ease-out);
}

[data-vx-map] > [data-lat] {
  transition: opacity .5s var(--vx-ease-out) calc(var(--vx-i, 0) * 90ms + .4s), scale .7s var(--vx-ease-out) calc(var(--vx-i, 0) * 90ms + .4s);
}

/* Tabs: a panel's first child raised above its top edge in the panel's own fill, joined by curved inner corners. */
:has(> [data-vx-tab]:not([data-vx-tab="end"])) {
  border-top-left-radius: 0 !important;
}

:has(> [data-vx-tab="end"]) {
  border-top-right-radius: 0 !important;
}

/* A tab is at least two curves tall, so its rounded top never meets the joining curve at its foot. */
[data-vx-tab] {
  --vx-tab-radius: 16px;
  background: inherit;
  border-radius: var(--vx-tab-radius) var(--vx-tab-radius) 0 0;
  bottom: 100%;
  box-sizing: border-box;
  left: 0;
  min-height: calc(2 * var(--vx-tab-radius));
  position: absolute;
}

[data-vx-tab="end"] {
  left: auto;
  right: 0;
}

[data-vx-tab]::after {
  background: inherit;
  bottom: 0;
  content: "";
  height: var(--vx-tab-radius);
  left: 100%;
  -webkit-mask: radial-gradient(circle at 100% 0, transparent calc(var(--vx-tab-radius) - .5px), #000 var(--vx-tab-radius));
  mask: radial-gradient(circle at 100% 0, transparent calc(var(--vx-tab-radius) - .5px), #000 var(--vx-tab-radius));
  position: absolute;
  width: var(--vx-tab-radius);
}

[data-vx-tab="end"]::after {
  left: auto;
  -webkit-mask: radial-gradient(circle at 0 0, transparent calc(var(--vx-tab-radius) - .5px), #000 var(--vx-tab-radius));
  mask: radial-gradient(circle at 0 0, transparent calc(var(--vx-tab-radius) - .5px), #000 var(--vx-tab-radius));
  right: 100%;
}

/* Devices: vector frames drawn around their one child, the screen. Width sets the size; the frame keeps its proportions. */
[data-vx-device] {
  --vx-device-frame: #111214;
  --vx-device-body: #cfd1d6;
  background: var(--vx-device-frame);
  box-sizing: border-box;
  container-type: inline-size;
  isolation: isolate;
  position: relative;
}

[data-vx-device] > * {
  background: var(--vx-device-screen, #fff);
  box-sizing: border-box;
  display: block;
  inset: 0;
  margin: 0;
  object-fit: cover;
  overflow: hidden;
  position: absolute;
}

[data-vx-device="phone"] {
  aspect-ratio: 9 / 19.5;
  border-radius: 15% / 6.9%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 22%, var(--vx-device-frame)), 0 28px 60px -24px rgb(0 0 0 / .45);
}

[data-vx-device="phone"] > * {
  border-radius: 11.5cqw;
  inset: 3.4cqw;
}

[data-vx-device="phone"]::before {
  background: #000;
  border-radius: 99px;
  content: "";
  height: 8.4cqw;
  left: 50%;
  position: absolute;
  top: 6.2cqw;
  translate: -50% 0;
  width: 29cqw;
  z-index: 1;
}

[data-vx-device="watch"] {
  aspect-ratio: 5 / 6;
  border-radius: 30% / 25%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 22%, var(--vx-device-frame)), 0 24px 50px -22px rgb(0 0 0 / .5);
}

[data-vx-device="watch"] > * {
  border-radius: 22cqw / 18cqw;
  inset: 6cqw;
}

[data-vx-device="watch"]::after {
  background: linear-gradient(90deg, color-mix(in srgb, #000 30%, var(--vx-device-frame)), color-mix(in srgb, #fff 18%, var(--vx-device-frame)));
  border-radius: 0 2cqw 2cqw 0;
  content: "";
  height: 16cqw;
  position: absolute;
  right: -3.4cqw;
  top: 24cqw;
  width: 3.6cqw;
}

[data-vx-device="tablet"] {
  aspect-ratio: 3 / 4.1;
  border-radius: 6.5% / 4.75%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 18%, var(--vx-device-frame)), 0 28px 60px -24px rgb(0 0 0 / .4);
}

[data-vx-device="tablet"] > * {
  border-radius: 3.4cqw;
  inset: 3.6cqw;
}

/* A laptop's and a desktop's box include their base and stand; the screen's outline draws the bezel. */
[data-vx-device="laptop"] {
  aspect-ratio: 100 / 60.4;
  background: none;
}

[data-vx-device="laptop"] > * {
  border-radius: .6cqw;
  bottom: auto;
  box-shadow: 0 0 0 calc(2.4cqw + 1.5px) color-mix(in srgb, #fff 16%, var(--vx-device-frame));
  height: 52.4cqw;
  inset: 2.4cqw 9.2cqw auto;
  outline: 2.4cqw solid var(--vx-device-frame);
}

[data-vx-device="laptop"]::after {
  background: linear-gradient(var(--vx-device-body), color-mix(in srgb, #000 28%, var(--vx-device-body)));
  border-radius: .4cqw .4cqw 8cqw 8cqw / .4cqw .4cqw 2.6cqw 2.6cqw;
  box-shadow: 0 24px 40px -18px rgb(0 0 0 / .45);
  content: "";
  height: 3cqw;
  left: 0;
  position: absolute;
  right: 0;
  top: 57.2cqw;
}

[data-vx-device="laptop"]::before {
  background: color-mix(in srgb, #000 22%, var(--vx-device-body));
  border-radius: 0 0 1.4cqw 1.4cqw;
  content: "";
  height: 1cqw;
  left: 50%;
  position: absolute;
  top: 57.2cqw;
  translate: -50% 0;
  width: 13cqw;
  z-index: 1;
}

[data-vx-device="desktop"] {
  aspect-ratio: 100 / 81.6;
  background: none;
}

[data-vx-device="desktop"] > * {
  border-radius: .4cqw;
  bottom: auto;
  box-shadow: 0 0 0 calc(1.6cqw + 1.5px) color-mix(in srgb, #fff 14%, var(--vx-device-frame));
  height: 55.6cqw;
  inset: 1.6cqw 1.6cqw auto;
  outline: 1.6cqw solid var(--vx-device-frame);
}

[data-vx-device="desktop"]::before {
  background: linear-gradient(90deg, color-mix(in srgb, #000 18%, var(--vx-device-body)), var(--vx-device-body) 50%, color-mix(in srgb, #000 18%, var(--vx-device-body)));
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  content: "";
  height: 21cqw;
  left: 50%;
  position: absolute;
  top: 58.8cqw;
  translate: -50% 0;
  width: 17cqw;
  z-index: -1;
}

[data-vx-device="desktop"]::after {
  background: linear-gradient(var(--vx-device-body), color-mix(in srgb, #000 24%, var(--vx-device-body)));
  border-radius: 1cqw 1cqw 1.6cqw 1.6cqw;
  box-shadow: 0 20px 30px -16px rgb(0 0 0 / .4);
  content: "";
  height: 2.2cqw;
  left: 50%;
  position: absolute;
  top: 79.3cqw;
  translate: -50% 0;
  width: 34cqw;
}

[data-vx-device="browser"] {
  --vx-device-frame: #e9e9ec;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 28px 60px -28px rgb(0 0 0 / .35);
  min-height: 12cqw;
}

[data-vx-device="browser"] > * {
  border-radius: 0 0 12px 12px;
  inset: 4.2cqw 0 0;
}

[data-vx-device="browser"]::before {
  background:
    radial-gradient(circle, #ff5f57 0 .55cqw, transparent .6cqw) 0 0 / 1.9cqw 100% no-repeat,
    radial-gradient(circle, #febc2e 0 .55cqw, transparent .6cqw) 1.9cqw 0 / 1.9cqw 100% no-repeat,
    radial-gradient(circle, #28c840 0 .55cqw, transparent .6cqw) 3.8cqw 0 / 1.9cqw 100% no-repeat;
  content: "";
  height: 4.2cqw;
  left: 1.6cqw;
  position: absolute;
  top: 0;
  width: 5.7cqw;
}