/* USER DECISION: the platform owns a presentation's slide geometry, playback, steps, and printing;
   the author owns each slide's composition and choreography. */
:root {
  --vx-deck-scale: 1;
  --vx-deck-backdrop: #0b0b0c;
  --vx-deck-gap: 32px;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--vx-deck-backdrop) !important;
}

body > section {
  box-sizing: border-box;
  position: relative !important;
  flex: none !important;
  width: 1920px !important;
  height: 1080px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  /* A slide lays out at its full 1920×1080 and is painted scaled, so text keeps its designed size
     (WebKit enlarges text that zoom shrinks); the negative margins make it occupy its scaled size. */
  margin: 0 calc(1920px * (var(--vx-deck-scale) - 1)) calc(1080px * (var(--vx-deck-scale) - 1)) 0 !important;
  overflow: hidden !important;
  scale: var(--vx-deck-scale);
  transform-origin: 0 0 !important;
}

html[data-vx-deck-mode="scroll"] body,
html[data-vx-deck-mode="flow"] body {
  overflow-x: clip !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--vx-deck-gap) !important;
  padding: var(--vx-deck-gap) 0 !important;
  min-height: 100vh;
  box-sizing: border-box;
}

html[data-vx-deck-mode="present"],
html[data-vx-deck-mode="present"] body {
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html[data-vx-deck-mode="present"][data-vx-idle],
html[data-vx-deck-mode="present"][data-vx-idle] * {
  cursor: none !important;
}

html[data-vx-deck-mode="present"] body {
  display: grid !important;
  place-items: center !important;
  height: 100vh !important;
  height: 100dvh !important;
}

html[data-vx-deck-mode="present"] body > section {
  grid-area: 1 / 1;
}

html[data-vx-deck-mode="present"] body > section:not([data-vx-active]) {
  display: none !important;
}

html[data-vx-deck-mode="print"] body {
  display: block !important;
}

/* The editor's rail scales this column down, so slides sit 120px apart with rounded corners. */
html[data-vx-deck-mode="thumbs"] body {
  display: flex !important;
  flex-direction: column !important;
  gap: 120px !important;
  overflow: hidden !important;
}

html[data-vx-deck-mode="thumbs"] body > section {
  border-radius: 72px !important;
}

/* While slides change, the navigator holds still above the slides' own chrome. */
::view-transition-group(vx-deck-nav) {
  z-index: 2147483645;
  animation: none !important;
}

::view-transition-old(vx-deck-nav) {
  display: none;
}

::view-transition-new(vx-deck-nav) {
  animation: none !important;
}

@media print {
  vx-deck-opening,
  vx-deck-nav {
    display: none !important;
  }
}

html[data-vx-static] *,
html[data-vx-static] *::before,
html[data-vx-static] *::after {
  animation: none !important;
  transition: none !important;
}

/* A slide holds its first frame while it changes, while the opening covers it, and on a phone
   until it scrolls into view; then it builds. */
html[data-vx-changing] body > section[data-vx-active],
html[data-vx-changing] body > section[data-vx-active] *,
html[data-vx-changing] body > section[data-vx-active] *::before,
html[data-vx-changing] body > section[data-vx-active] *::after,
html[data-vx-opening] body > section,
html[data-vx-opening] body > section *,
html[data-vx-opening] body > section *::before,
html[data-vx-opening] body > section *::after,
html[data-vx-deck-mode="flow"] body > section:not([data-vx-in-view]),
html[data-vx-deck-mode="flow"] body > section:not([data-vx-in-view]) *,
html[data-vx-deck-mode="flow"] body > section:not([data-vx-in-view]) *::before,
html[data-vx-deck-mode="flow"] body > section:not([data-vx-in-view]) *::after {
  animation-play-state: paused !important;
}

/* The opening covers the deck until it has loaded, then opens outward from the mark. */
html[data-vx-opening="pending"] body {
  visibility: hidden !important;
}

@property --vx-iris {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

vx-deck-opening {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  display: grid !important;
  background: var(--vx-opening-background, var(--vx-deck-backdrop)) !important;
  transition: background-color 500ms ease !important;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent calc(var(--vx-iris) - 90px), #000 var(--vx-iris));
  mask: radial-gradient(circle at 50% 50%, transparent calc(var(--vx-iris) - 90px), #000 var(--vx-iris));
}

vx-deck-opening[data-leaving] {
  pointer-events: none !important;
  animation: vx-deck-iris 1050ms cubic-bezier(0.72, 0, 0.16, 1) 160ms forwards;
}

@keyframes vx-deck-iris {
  0% {
    --vx-iris: 0px;
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    --vx-iris: 160vmax;
    opacity: 0;
  }
}

[data-vx-step] {
  transition: opacity 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

html[data-vx-deck-mode="present"]:not([data-vx-static]) [data-vx-step]:not([data-vx-shown]) {
  opacity: 0 !important;
}

@page {
  size: 1920px 1080px;
  margin: 0;
}

@media print {
  html,
  body {
    background: none !important;
  }

  body {
    display: block !important;
  }

  body > section {
    margin: 0 !important;
    scale: none !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body > section:not(:last-of-type) {
    break-after: page;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}