:root {
  color-scheme: dark;
  --page-max-width: 1240px;
  --page-gap: clamp(20px, 4vw, 56px);
  --page-side-padding: clamp(12px, 2.4vw, 28px);
  --page-top-padding: clamp(18px, 3vw, 36px);
}

html {
  scroll-behavior: smooth;
  background: #000;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top, rgba(17, 24, 39, 0.28), transparent 26%),
    #000;
}

.deck {
  box-sizing: border-box;
  width: min(100%, calc(var(--page-max-width) + (var(--page-side-padding) * 2)));
  margin: 0 auto;
  padding: var(--page-top-padding) var(--page-side-padding) calc(var(--page-gap) + 8px);
  display: grid;
  gap: var(--page-gap);
}

.slide {
  width: 100%;
  content-visibility: auto;
  contain: layout paint style;
}

.slide-surface {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #050505;
}

.slide-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 20%),
    #050505;
  opacity: 1;
  transition: opacity 220ms ease;
}

.slide[data-state="ready"] .slide-surface::before {
  opacity: 0;
}

.slide-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.slide[data-state="ready"] .slide-canvas {
  opacity: 1;
}

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

@media (max-width: 768px) {
  :root {
    --page-gap: clamp(20px, 6vw, 32px);
    --page-side-padding: clamp(10px, 4vw, 18px);
    --page-top-padding: 14px;
  }
}