:root {
  color-scheme: dark;
  --ink: #f7f8f7;
  --muted: #a7aca9;
  --dim: #858c88;
  --black: #050606;
  --panel: rgba(10, 12, 11, 0.82);
  --panel-strong: rgba(6, 8, 7, 0.94);
  --line: rgba(255, 255, 255, 0.14);
  --green: #20d478;
  --green-soft: #93f6bf;
  --red: #ff4a45;
  --yellow: #ffd84a;
  --blue: #63a8ff;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --u: min(1vw, 1.7777778vh);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  -webkit-user-select: none;
  user-select: none;
}

button {
  font: inherit;
}

img {
  display: block;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.1rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(32, 212, 120, 0.12), transparent 26rem),
    #050606;
  transition: opacity 800ms var(--ease-out), visibility 800ms;
}

.loader.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader__mark {
  display: flex;
  align-items: end;
  gap: 0.42rem;
  height: 3.2rem;
}

.loader__mark span {
  width: 0.52rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--green-soft), var(--green));
  animation: loader-pulse 1.1s var(--ease-in-out) infinite alternate;
}

.loader__mark span:nth-child(1) {
  height: 42%;
}

.loader__mark span:nth-child(2) {
  height: 100%;
  animation-delay: 130ms;
}

.loader__mark span:nth-child(3) {
  height: 68%;
  animation-delay: 260ms;
}

.loader__eyebrow,
.eyebrow {
  margin: 0;
  color: var(--green-soft);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.loader h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4.8rem);
  font-weight: 650;
  letter-spacing: -0.055em;
}

.loader__track {
  width: min(28rem, 72vw);
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.loader__track span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--green-soft));
  transition: width 240ms ease;
}

.loader__copy {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.loader__retry {
  padding: 0.72rem 1.15rem;
  border: 1px solid rgba(147, 246, 191, 0.34);
  border-radius: 999px;
  background: rgba(32, 212, 120, 0.1);
  color: var(--green-soft);
  font-weight: 700;
  cursor: pointer;
}

.loader__retry:hover,
.loader__retry:focus-visible {
  background: rgba(32, 212, 120, 0.18);
  outline: 3px solid var(--green-soft);
  outline-offset: 4px;
}

.loader.has-error .loader__mark span,
.loader.has-error .loader__track span {
  background: var(--red);
}

.loader.has-error .loader__copy {
  color: rgba(255, 255, 255, 0.82);
}

@keyframes loader-pulse {
  from {
    opacity: 0.38;
    transform: scaleY(0.7);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

.experience {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
}

.stage {
  position: relative;
  width: min(100vw, 177.7777778vh);
  height: min(100vh, 56.25vw);
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    radial-gradient(circle at 15% 22%, rgba(255, 255, 255, 0.08) 0 0.5px, transparent 0.75px),
    radial-gradient(circle at 78% 64%, rgba(255, 255, 255, 0.06) 0 0.5px, transparent 0.75px);
  background-size: 5px 5px, 7px 7px;
  mix-blend-mode: soft-light;
}

.slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(4%, 0, 0) scale(1.025);
  filter: blur(calc(var(--u) * 0.5));
  transition:
    opacity 760ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter 900ms var(--ease-out);
}

.slide.is-active {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.slide.is-past {
  transform: translate3d(-4%, 0, 0) scale(0.985);
}

.slide.is-future {
  transform: translate3d(4%, 0, 0) scale(1.025);
}

.slide-shell {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: calc(var(--u) * 3.7) calc(var(--u) * 5.1);
}

.slide-shell--center {
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.slide-shell--bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.photo-bg::before,
.chapter-slide::before,
.day-slide::before {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(2, 3, 3, 0.9) 0%, rgba(2, 3, 3, 0.62) 40%, rgba(2, 3, 3, 0.15) 72%, rgba(2, 3, 3, 0.4) 100%),
    linear-gradient(0deg, rgba(2, 3, 3, 0.86) 0%, transparent 54%),
    var(--bg);
  background-position: var(--pos, center);
  background-size: cover;
  transform: scale(1.03);
  transition: transform 12s linear;
}

.photo-bg.is-active::before,
.chapter-slide.is-active::before,
.day-slide.is-active::before {
  transform: scale(1.1);
}

.photo-bg::after,
.chapter-slide::after,
.day-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 28%, transparent 0 25%, rgba(0, 0, 0, 0.3) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35));
}

.fragment {
  opacity: 0;
  transform: translateY(calc(var(--u) * 1.1)) scale(0.985);
  filter: blur(calc(var(--u) * 0.35));
  transition:
    opacity 640ms var(--ease-out),
    transform 760ms var(--ease-out),
    filter 760ms var(--ease-out);
}

.fragment.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.fragment--fade {
  transform: none;
}

.fragment--left {
  transform: translateX(calc(var(--u) * -1.4));
}

.fragment--right {
  transform: translateX(calc(var(--u) * 1.4));
}

.display {
  margin: 0;
  font-size: calc(var(--u) * 6.1);
  font-weight: 680;
  line-height: 0.92;
  letter-spacing: -0.075em;
}

.display--wide {
  font-size: calc(var(--u) * 7.2);
}

.display em {
  color: var(--green-soft);
  font-style: normal;
}

.subhead {
  max-width: 47ch;
  margin: calc(var(--u) * 1.2) 0 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1.22);
  font-weight: 430;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.5);
  margin-bottom: calc(var(--u) * 1.15);
  color: var(--green-soft);
  font-size: calc(var(--u) * 1);
  font-weight: 720;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: calc(var(--u) * 1.3);
  height: 2px;
  background: currentColor;
}

.statement-slide {
  background:
    radial-gradient(circle at 50% 34%, rgba(32, 212, 120, 0.13), transparent 34%),
    linear-gradient(145deg, #080a09, #020303 64%);
}

.statement-stack {
  display: grid;
  justify-items: center;
}

.statement-line {
  margin: 0;
  font-size: calc(var(--u) * 4.4);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.065em;
}

.statement-line + .statement-line {
  margin-top: calc(var(--u) * 0.42);
}

.statement-line--muted {
  color: var(--muted);
}

.opening-mark {
  position: relative;
  width: calc(var(--u) * 8.2);
  height: calc(var(--u) * 8.2);
  margin-bottom: calc(var(--u) * 1.5);
}

.opening-mark::before,
.opening-mark::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(147, 246, 191, 0.35);
}

.opening-mark::before {
  inset: 0;
  box-shadow: inset 0 0 calc(var(--u) * 2) rgba(32, 212, 120, 0.08);
  animation: globe-turn 12s linear infinite;
}

.opening-mark::after {
  inset: 13% 34%;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.opening-orbit {
  position: absolute;
  inset: 22% -17%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: rotate(-22deg);
}

.opening-orbit::after {
  content: "";
  position: absolute;
  top: 43%;
  right: -1.5%;
  width: calc(var(--u) * 0.44);
  height: calc(var(--u) * 0.44);
  border-radius: 50%;
  background: var(--green-soft);
  box-shadow: 0 0 calc(var(--u) * 0.8) var(--green);
}

@keyframes globe-turn {
  to {
    transform: rotate(360deg);
  }
}

.start-hint {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.45);
  margin-top: calc(var(--u) * 1.9);
  color: var(--dim);
  font-size: calc(var(--u) * 1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.start-hint span {
  color: var(--ink);
  font-size: calc(var(--u) * 1.2);
}

.memory-slide {
  background:
    radial-gradient(circle at 86% 18%, rgba(99, 168, 255, 0.12), transparent 28%),
    #070808;
}

.memory-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: calc(var(--u) * 2.8) calc(var(--u) * 2.8);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

.memory-city {
  position: absolute;
  left: calc(var(--u) * 4.8);
  bottom: calc(var(--u) * 2.2);
  z-index: 8;
  margin: 0;
  font-size: calc(var(--u) * 6.6);
  font-weight: 680;
  line-height: 0.84;
  letter-spacing: -0.08em;
  text-shadow: 0 calc(var(--u) * 0.4) calc(var(--u) * 1.4) #000;
}

.memory-index {
  position: absolute;
  top: calc(var(--u) * 3.3);
  left: calc(var(--u) * 5);
  z-index: 8;
  color: var(--green-soft);
  font-size: calc(var(--u) * 1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.memory-collage {
  position: absolute;
  inset: calc(var(--u) * 2.6) calc(var(--u) * 3.8) calc(var(--u) * 2.6) calc(var(--u) * 21);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: calc(var(--u) * 0.58);
  z-index: 4;
}

.memory-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: calc(var(--u) * 0.42);
  background: #020303;
  box-shadow:
    0 calc(var(--u) * 0.7) calc(var(--u) * 2.1) rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.memory-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 calc(var(--u) * 1.8) rgba(0, 0, 0, 0.3);
}

.memory-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.memory-card--a {
  grid-column: 1 / 8;
  grid-row: 1 / 6;
}

.memory-card--b {
  grid-column: 8 / 13;
  grid-row: 1 / 5;
}

.memory-card--c {
  grid-column: 1 / 5;
  grid-row: 6 / 9;
}

.memory-card--d {
  grid-column: 5 / 9;
  grid-row: 6 / 9;
}

.memory-card--e {
  grid-column: 9 / 13;
  grid-row: 5 / 9;
}

.memory-single {
  position: absolute;
  inset: calc(var(--u) * 3.2) calc(var(--u) * 5.2) calc(var(--u) * 3.3) calc(var(--u) * 24);
  z-index: 4;
  display: grid;
  place-items: center;
}

.memory-single .memory-card {
  width: 100%;
  height: 100%;
}

.promise-slide {
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 74, 69, 0.12), transparent 28%),
    radial-gradient(circle at 78% 20%, rgba(32, 212, 120, 0.11), transparent 30%),
    #050606;
}

.promise-small {
  margin: 0 0 calc(var(--u) * 1.2);
  color: var(--muted);
  font-size: calc(var(--u) * 1.05);
  font-weight: 500;
}

.promise-big {
  max-width: 12ch;
  margin: 0;
  font-size: calc(var(--u) * 6.3);
  font-weight: 670;
  line-height: 0.95;
  letter-spacing: -0.075em;
}

.promise-big strong {
  color: var(--green-soft);
  font-weight: inherit;
}

.flight-transition {
  background:
    radial-gradient(circle at 28% 30%, rgba(99, 168, 255, 0.12), transparent 28%),
    radial-gradient(circle at 77% 68%, rgba(32, 212, 120, 0.11), transparent 30%),
    #030404;
}

.flight-path {
  position: absolute;
  inset: calc(var(--u) * 5.2) calc(var(--u) * 7.5);
}

.flight-path svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.flight-path__line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 2;
  stroke-dasharray: 10 14;
}

.flight-path__active {
  fill: none;
  stroke: var(--green-soft);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  filter: drop-shadow(0 0 14px rgba(32, 212, 120, 0.52));
  transition: stroke-dashoffset 2.2s var(--ease-in-out);
}

.flight-transition[data-step="1"] .flight-path__active,
.flight-transition[data-step="2"] .flight-path__active {
  stroke-dashoffset: 0;
}

.flight-transition--final .flight-path__active {
  stroke-dashoffset: 0;
}

.flight-node {
  fill: #060707;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 2;
}

.flight-node--active {
  fill: var(--green-soft);
  stroke: var(--green-soft);
  filter: drop-shadow(0 0 12px rgba(32, 212, 120, 0.7));
}

.flight-label {
  position: absolute;
  z-index: 4;
  font-size: calc(var(--u) * 1);
  font-weight: 680;
  letter-spacing: 0.02em;
}

.flight-label--from {
  left: 8%;
  bottom: 19%;
}

.flight-label--to {
  right: 4%;
  top: 20.5%;
  color: var(--green-soft);
  text-align: right;
}

.plane-icon {
  position: absolute;
  left: 23%;
  top: 58%;
  z-index: 5;
  font-size: calc(var(--u) * 2);
  transform: rotate(-25deg);
  opacity: 0;
  transition: opacity 400ms ease, transform 2.2s var(--ease-in-out), left 2.2s var(--ease-in-out), top 2.2s var(--ease-in-out);
}

.flight-transition[data-step="1"] .plane-icon,
.flight-transition[data-step="2"] .plane-icon {
  left: 72%;
  top: 26%;
  opacity: 1;
  transform: rotate(-17deg);
}

.flight-transition--final .plane-icon {
  left: 72%;
  top: 26%;
  opacity: 1;
  transform: rotate(-17deg);
}

.title-slide {
  background:
    radial-gradient(circle at 50% 34%, rgba(32, 212, 120, 0.18), transparent 34%),
    linear-gradient(150deg, #0b100d, #020303 60%);
}

.title-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(116deg, transparent 0 45%, rgba(32, 212, 120, 0.06) 45.2% 45.35%, transparent 45.5%),
    linear-gradient(116deg, transparent 0 58%, rgba(255, 216, 74, 0.045) 58.2% 58.3%, transparent 58.5%);
}

.title-overline {
  margin: 0 0 calc(var(--u) * 1.1);
  color: var(--muted);
  font-size: calc(var(--u) * 1.05);
  font-weight: 520;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.title-main {
  margin: 0;
  font-size: calc(var(--u) * 7);
  font-weight: 690;
  line-height: 0.86;
  letter-spacing: -0.08em;
}

.title-main span {
  display: block;
  margin-top: calc(var(--u) * 0.5);
  color: var(--green-soft);
  font-size: 0.58em;
  letter-spacing: -0.045em;
}

.title-date {
  margin: calc(var(--u) * 1.6) 0 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1.1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.stats-slide {
  background:
    radial-gradient(circle at 12% 18%, rgba(32, 212, 120, 0.12), transparent 30%),
    #050606;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--u) * 0.9);
  width: 100%;
}

.stat-card {
  min-height: calc(var(--u) * 18.5);
  padding: calc(var(--u) * 1.45);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 72%);
}

.stat-card__number {
  margin: 0;
  font-size: calc(var(--u) * 5.4);
  font-weight: 680;
  line-height: 0.9;
  letter-spacing: -0.08em;
}

.stat-card__label {
  margin: 0;
  color: var(--muted);
  font-size: calc(var(--u) * 0.95);
  line-height: 1.4;
}

.route-slide {
  background:
    radial-gradient(circle at 76% 18%, rgba(32, 212, 120, 0.13), transparent 26%),
    linear-gradient(160deg, #070a08, #020303 60%);
}

.route-layout {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: calc(var(--u) * 5);
  align-items: center;
  height: 100%;
}

.route-copy h2 {
  max-width: 8ch;
  margin: 0;
  font-size: calc(var(--u) * 5.4);
  font-weight: 670;
  line-height: 0.94;
  letter-spacing: -0.07em;
}

.route-copy p {
  max-width: 32ch;
  margin: calc(var(--u) * 1.2) 0 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1.05);
  line-height: 1.5;
}

.route-map {
  position: relative;
  height: 76%;
}

.route-line {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 30%;
  width: 2px;
  background: linear-gradient(180deg, var(--green-soft), rgba(255, 255, 255, 0.16) 82%);
}

.route-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green-soft);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.8s var(--ease-in-out);
}

.route-slide[data-step="4"] .route-line::after {
  transform: scaleY(1);
}

.route-stop {
  position: absolute;
  left: 30%;
  width: 63%;
  display: grid;
  grid-template-columns: calc(var(--u) * 1.6) 1fr;
  gap: calc(var(--u) * 0.75);
  align-items: center;
}

.route-stop:nth-child(2) {
  top: 8%;
}

.route-stop:nth-child(3) {
  top: 34%;
}

.route-stop:nth-child(4) {
  top: 60%;
}

.route-stop:nth-child(5) {
  top: 84%;
}

.route-dot {
  position: relative;
  z-index: 2;
  width: calc(var(--u) * 0.74);
  height: calc(var(--u) * 0.74);
  margin-left: calc(var(--u) * -0.35);
  border: calc(var(--u) * 0.12) solid #07100b;
  border-radius: 50%;
  background: var(--green-soft);
  box-shadow: 0 0 calc(var(--u) * 0.8) rgba(32, 212, 120, 0.5);
}

.route-stop h3 {
  margin: 0;
  font-size: calc(var(--u) * 1.45);
  font-weight: 650;
  letter-spacing: -0.04em;
}

.route-stop p {
  margin: calc(var(--u) * 0.14) 0 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.room-slide {
  background:
    radial-gradient(circle at 10% 90%, rgba(255, 74, 69, 0.11), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(32, 212, 120, 0.1), transparent 30%),
    #050606;
}

.room-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: calc(var(--u) * 1.6);
}

.room-header h2 {
  max-width: 12ch;
  margin: 0;
  font-size: calc(var(--u) * 4.6);
  line-height: 0.96;
  letter-spacing: -0.07em;
}

.room-header p {
  max-width: 28ch;
  margin: 0 0 calc(var(--u) * 0.3);
  color: var(--muted);
  font-size: calc(var(--u) * 1.08);
  line-height: 1.45;
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--u) * 0.75);
}

.room-card {
  min-height: calc(var(--u) * 14.4);
  padding: calc(var(--u) * 1.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: calc(var(--u) * 0.55);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
}

.room-card__number {
  color: var(--green-soft);
  font-size: calc(var(--u) * 1);
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.people-dots {
  display: flex;
  gap: calc(var(--u) * 0.42);
}

.person-dot {
  position: relative;
  width: calc(var(--u) * 2.2);
  height: calc(var(--u) * 2.2);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.person-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 25%;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%);
}

.person-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 20%;
  width: 48%;
  height: 30%;
  border-radius: 50% 50% 38% 38%;
  background: var(--ink);
  transform: translateX(-50%);
}

.person-dot--girl {
  border-color: rgba(255, 216, 74, 0.4);
  background: rgba(255, 216, 74, 0.08);
}

.room-card h3 {
  margin: 0;
  font-size: calc(var(--u) * 1.35);
  font-weight: 630;
  letter-spacing: -0.035em;
}

.room-card p {
  margin: calc(var(--u) * 0.18) 0 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1);
  line-height: 1.35;
}

.room-disclaimer {
  width: fit-content;
  max-width: min(100%, 74ch);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.58);
  margin: calc(var(--u) * 0.95) auto 0;
  padding: calc(var(--u) * 0.62) calc(var(--u) * 0.88);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.76);
  font-size: calc(var(--u) * 1);
  font-weight: 520;
  line-height: 1.35;
  text-align: left;
}

.room-disclaimer__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 1.35);
  height: calc(var(--u) * 1.35);
  border: 1px solid rgba(147, 246, 191, 0.36);
  border-radius: 50%;
  color: var(--green-soft);
  font-size: calc(var(--u) * 0.78);
  font-weight: 760;
  font-style: normal;
}

.chapter-slide::before {
  background-image:
    linear-gradient(90deg, rgba(2, 3, 3, 0.9), rgba(2, 3, 3, 0.25) 66%, rgba(2, 3, 3, 0.4)),
    linear-gradient(0deg, rgba(2, 3, 3, 0.82), transparent 58%),
    var(--bg);
}

#chapter-phuquoc::before {
  background-image:
    linear-gradient(90deg, rgba(2, 3, 3, 0.93), rgba(2, 3, 3, 0.32) 68%, rgba(2, 3, 3, 0.42)),
    linear-gradient(0deg, rgba(2, 3, 3, 0.9), transparent 62%),
    var(--bg);
}

.chapter-number {
  margin: 0 0 calc(var(--u) * 1.1);
  color: var(--green-soft);
  font-size: calc(var(--u) * 1);
  font-weight: 730;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.chapter-name {
  max-width: 10ch;
  margin: 0;
  font-size: calc(var(--u) * 7);
  font-weight: 680;
  line-height: 0.86;
  letter-spacing: -0.085em;
}

.chapter-meta {
  display: flex;
  gap: calc(var(--u) * 1.3);
  margin-top: calc(var(--u) * 1.4);
  color: rgba(255, 255, 255, 0.9);
  font-size: calc(var(--u) * 1.05);
}

.chapter-meta span {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.42);
}

.chapter-meta span::before {
  content: "";
  width: calc(var(--u) * 0.35);
  height: calc(var(--u) * 0.35);
  border-radius: 50%;
  background: var(--green-soft);
}

.day-slide::before {
  background-image:
    linear-gradient(90deg, rgba(2, 3, 3, 0.96) 0%, rgba(2, 3, 3, 0.88) 39%, rgba(2, 3, 3, 0.36) 68%, rgba(2, 3, 3, 0.5) 100%),
    linear-gradient(180deg, rgba(2, 3, 3, 0.62) 0%, transparent 20%),
    linear-gradient(0deg, rgba(2, 3, 3, 0.72), transparent 50%),
    var(--bg);
}

.day-slide--dark::before {
  background-image:
    linear-gradient(90deg, rgba(2, 3, 3, 0.97) 0%, rgba(2, 3, 3, 0.9) 48%, rgba(2, 3, 3, 0.46) 78%),
    linear-gradient(180deg, rgba(2, 3, 3, 0.62) 0%, transparent 20%),
    linear-gradient(0deg, rgba(2, 3, 3, 0.78), transparent 55%),
    var(--bg);
}

.day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(var(--u) * 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.day-header__left {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.85);
}

.day-number {
  color: var(--green-soft);
  font-size: calc(var(--u) * 1);
  font-weight: 760;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.day-location {
  color: var(--muted);
  font-size: calc(var(--u) * 1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.day-date {
  color: rgba(255, 255, 255, 0.98);
  font-size: calc(var(--u) * 1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.day-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: calc(var(--u) * 3.6);
  align-items: center;
  height: calc(100% - calc(var(--u) * 2));
}

.day-copy h2 {
  max-width: 9ch;
  margin: 0;
  font-size: calc(var(--u) * 4.45);
  font-weight: 670;
  line-height: 0.95;
  letter-spacing: -0.075em;
}

.day-copy > p {
  max-width: 34ch;
  margin: calc(var(--u) * 1.05) 0 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1.05);
  line-height: 1.48;
}

.stay-pill,
.flight-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.62);
  max-width: 100%;
  margin-top: calc(var(--u) * 1.25);
  padding: calc(var(--u) * 0.68) calc(var(--u) * 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(5, 7, 6, 0.76);
  color: rgba(255, 255, 255, 0.92);
  font-size: calc(var(--u) * 1);
  font-weight: 600;
  line-height: 1.2;
}

.stay-pill::before,
.flight-pill::before {
  content: "";
  flex: 0 0 auto;
  width: calc(var(--u) * 0.58);
  height: calc(var(--u) * 0.58);
  border-radius: 50%;
  background: var(--green-soft);
  box-shadow: 0 0 calc(var(--u) * 0.45) rgba(32, 212, 120, 0.48);
}

.flight-pill {
  border-color: rgba(99, 168, 255, 0.25);
}

.flight-pill::before {
  background: var(--blue);
  box-shadow: 0 0 calc(var(--u) * 0.45) rgba(99, 168, 255, 0.5);
}

.timeline {
  display: grid;
  gap: calc(var(--u) * 0.62);
}

.time-row {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--u) * 8.4) 1fr;
  gap: calc(var(--u) * 0.85);
  align-items: start;
  min-height: calc(var(--u) * 5.65);
  padding: calc(var(--u) * 0.85) calc(var(--u) * 1);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: calc(var(--u) * 0.45);
  background: rgba(5, 7, 6, 0.73);
  -webkit-backdrop-filter: blur(calc(var(--u) * 0.65));
  backdrop-filter: blur(calc(var(--u) * 0.65));
}

.time-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--green);
  opacity: 0.78;
}

.time-label {
  color: var(--green-soft);
  font-size: calc(var(--u) * 1);
  font-weight: 720;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.time-content h3 {
  margin: 0;
  font-size: calc(var(--u) * 1.14);
  font-weight: 630;
  line-height: 1.22;
  letter-spacing: -0.025em;
}

.time-content p {
  margin: calc(var(--u) * 0.24) 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: calc(var(--u) * 1.05);
  font-weight: 500;
  line-height: 1.35;
}

.budget-intro {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 74, 69, 0.12), transparent 30%),
    #040505;
}

.budget-intro h2 {
  max-width: 10ch;
  margin: 0;
  font-size: calc(var(--u) * 5.8);
  line-height: 0.92;
  letter-spacing: -0.075em;
}

.budget-intro p {
  max-width: 42ch;
  margin: calc(var(--u) * 1.2) 0 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1.05);
  line-height: 1.45;
}

.fakeout-slide {
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 74, 69, 0.14), transparent 28%),
    #030404;
}

.fakeout-label {
  position: absolute;
  top: calc(var(--u) * 4);
  left: 50%;
  z-index: 4;
  color: var(--muted);
  font-size: calc(var(--u) * 1);
  font-weight: 690;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.fakeout-price {
  position: absolute;
  top: 47%;
  left: 50%;
  z-index: 4;
  margin: 0;
  font-size: calc(var(--u) * 8);
  font-weight: 720;
  line-height: 0.9;
  letter-spacing: -0.075em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -45%) scale(0.84);
  filter: blur(calc(var(--u) * 0.8));
  transition:
    opacity 650ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter 900ms var(--ease-out),
    color 650ms ease;
}

.fakeout-price--200 {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
}

.fakeout-slide[data-step="1"] .fakeout-price--200 {
  opacity: 0.12;
  color: var(--red);
  transform: translate(-50%, -150%) scale(0.72);
  filter: blur(calc(var(--u) * 0.1));
  text-decoration: line-through;
  text-decoration-thickness: calc(var(--u) * 0.16);
}

.fakeout-slide[data-step="2"] .fakeout-price--200,
.fakeout-slide[data-step="3"] .fakeout-price--200 {
  opacity: 0.08;
  color: var(--red);
  transform: translate(-50%, -220%) scale(0.58);
  filter: blur(calc(var(--u) * 0.1));
  text-decoration: line-through;
  text-decoration-thickness: calc(var(--u) * 0.16);
}

.fakeout-slide[data-step="1"] .fakeout-price--150 {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
}

.fakeout-slide[data-step="2"] .fakeout-price--150,
.fakeout-slide[data-step="3"] .fakeout-price--150 {
  opacity: 0.12;
  color: var(--yellow);
  transform: translate(-50%, -140%) scale(0.66);
  filter: blur(calc(var(--u) * 0.1));
  text-decoration: line-through;
  text-decoration-thickness: calc(var(--u) * 0.16);
}

.fakeout-slide[data-step="2"] .fakeout-price--120,
.fakeout-slide[data-step="3"] .fakeout-price--120 {
  opacity: 1;
  color: var(--green-soft);
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
  text-shadow: 0 0 calc(var(--u) * 2.6) rgba(32, 212, 120, 0.24);
}

.fakeout-caption {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 6.4);
  z-index: 4;
  width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1.02);
  text-align: center;
  transform: translateX(-50%);
}

.fakeout-caption span {
  display: none;
}

.fakeout-slide[data-step="0"] .caption-0,
.fakeout-slide[data-step="1"] .caption-1,
.fakeout-slide[data-step="2"] .caption-2,
.fakeout-slide[data-step="3"] .caption-3 {
  display: inline;
}

.fakeout-badge {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 2.4);
  z-index: 4;
  padding: calc(var(--u) * 0.56) calc(var(--u) * 0.86);
  border: 1px solid rgba(147, 246, 191, 0.28);
  border-radius: 999px;
  background: rgba(32, 212, 120, 0.07);
  color: var(--green-soft);
  font-size: calc(var(--u) * 1);
  font-weight: 680;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, calc(var(--u) * 0.6));
  transition: opacity 500ms ease, transform 600ms var(--ease-out);
}

.fakeout-slide[data-step="3"] .fakeout-badge {
  opacity: 1;
  transform: translate(-50%, 0);
}

.budget-sheet {
  background:
    radial-gradient(circle at 88% 20%, rgba(32, 212, 120, 0.1), transparent 25%),
    #050606;
}

.budget-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: calc(var(--u) * 1.25);
}

.budget-header h2 {
  margin: 0;
  font-size: calc(var(--u) * 4.2);
  font-weight: 670;
  line-height: 0.95;
  letter-spacing: -0.07em;
}

.budget-header p {
  max-width: 34ch;
  margin: 0 0 calc(var(--u) * 0.28);
  color: var(--muted);
  font-size: calc(var(--u) * 1.05);
  line-height: 1.4;
  text-align: right;
}

.budget-layout {
  display: grid;
  grid-template-columns: 1.38fr 0.62fr;
  gap: calc(var(--u) * 1.6);
  align-items: stretch;
  height: calc(100% - calc(var(--u) * 7));
}

.ledger {
  display: grid;
  align-content: center;
  gap: calc(var(--u) * 0.38);
}

.ledger-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: calc(var(--u) * 0.65);
  align-items: center;
  min-height: calc(var(--u) * 2.65);
  padding: calc(var(--u) * 0.48) calc(var(--u) * 0.68);
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent);
}

.ledger-row__index {
  color: var(--dim);
  font-size: calc(var(--u) * 1);
  font-weight: 720;
  letter-spacing: 0.12em;
}

.ledger-row__label {
  font-size: calc(var(--u) * 0.88);
  font-weight: 580;
  line-height: 1.25;
}

.ledger-row__amount {
  color: var(--green-soft);
  font-size: calc(var(--u) * 0.94);
  font-weight: 690;
  letter-spacing: -0.02em;
}

.total-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--u) * 1.3);
  overflow: hidden;
  border: 1px solid rgba(147, 246, 191, 0.19);
  border-radius: calc(var(--u) * 0.62);
  background:
    radial-gradient(circle at 70% 15%, rgba(32, 212, 120, 0.15), transparent 30%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
}

.total-panel::after {
  content: "";
  position: absolute;
  inset: auto calc(var(--u) * -2) calc(var(--u) * -2) auto;
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border: 1px solid rgba(147, 246, 191, 0.12);
  border-radius: 50%;
}

.total-panel__label {
  color: var(--muted);
  font-size: calc(var(--u) * 1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.live-total {
  position: relative;
  z-index: 2;
  margin: auto 0;
  color: var(--green-soft);
  font-size: calc(var(--u) * 3.45);
  font-weight: 710;
  line-height: 0.95;
  letter-spacing: -0.065em;
}

.total-panel__note {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1);
  line-height: 1.4;
}

.activity-budget .budget-layout {
  grid-template-columns: 1.52fr 0.48fr;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: center;
  gap: calc(var(--u) * 0.45);
}

.activity-grid .ledger-row {
  grid-template-columns: 1fr auto;
  gap: calc(var(--u) * 0.55);
  min-height: calc(var(--u) * 4);
  padding: calc(var(--u) * 0.65) calc(var(--u) * 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--u) * 0.32);
  background: rgba(255, 255, 255, 0.025);
}

.activity-grid .ledger-row__label {
  font-size: calc(var(--u) * 1);
  font-weight: 620;
  line-height: 1.25;
}

.activity-grid .ledger-row__amount {
  font-size: calc(var(--u) * 1);
}

#budget-flights .ledger-row,
#budget-hotels .ledger-row {
  min-height: calc(var(--u) * 4.1);
  padding: calc(var(--u) * 0.72) calc(var(--u) * 0.9);
}

#budget-flights .ledger-row__label,
#budget-hotels .ledger-row__label {
  font-size: calc(var(--u) * 1.18);
  font-weight: 620;
}

#budget-flights .ledger-row__amount,
#budget-hotels .ledger-row__amount {
  font-size: calc(var(--u) * 1.12);
}

#budget-flights .budget-header p,
#budget-hotels .budget-header p,
#budget-activities .budget-header p {
  font-size: calc(var(--u) * 1.05);
}

#budget-flights .total-panel__label,
#budget-hotels .total-panel__label,
#budget-activities .total-panel__label {
  font-size: calc(var(--u) * 1);
}

#budget-flights .total-panel__note,
#budget-hotels .total-panel__note,
#budget-activities .total-panel__note {
  font-size: calc(var(--u) * 1);
}

.savings-badge {
  position: absolute;
  inset: auto calc(var(--u) * 1.3) calc(var(--u) * 4.7);
  z-index: 4;
  padding: calc(var(--u) * 0.65);
  border: 1px solid rgba(255, 216, 74, 0.3);
  border-radius: calc(var(--u) * 0.4);
  background: rgba(255, 216, 74, 0.08);
  color: var(--yellow);
  font-size: calc(var(--u) * 1);
  font-weight: 680;
  line-height: 1.35;
}

.envelope-slide {
  background:
    radial-gradient(circle at 72% 35%, rgba(32, 212, 120, 0.13), transparent 31%),
    #040505;
}

.envelope-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: calc(var(--u) * 4.6);
  align-items: center;
  height: 100%;
}

.envelope-copy h2 {
  margin: 0;
  font-size: calc(var(--u) * 5.2);
  line-height: 0.94;
  letter-spacing: -0.075em;
}

.envelope-copy p {
  max-width: 34ch;
  margin: calc(var(--u) * 1.05) 0 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1.08);
  line-height: 1.48;
}

.envelope-card {
  position: relative;
  min-height: calc(var(--u) * 24);
  padding: calc(var(--u) * 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(147, 246, 191, 0.2);
  border-radius: calc(var(--u) * 0.85);
  background:
    radial-gradient(circle at 78% 18%, rgba(32, 212, 120, 0.17), transparent 29%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
}

.envelope-card__formula {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: calc(var(--u) * 1.3);
  font-weight: 580;
}

.envelope-card__number {
  margin: calc(var(--u) * 0.65) 0 0;
  color: var(--green-soft);
  font-size: calc(var(--u) * 5.1);
  font-weight: 710;
  line-height: 0.92;
  letter-spacing: -0.07em;
}

.envelope-card__footer {
  margin: calc(var(--u) * 1.1) 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: calc(var(--u) * 1);
  font-weight: 500;
  line-height: 1.4;
}

.final-equation {
  background:
    radial-gradient(circle at 50% 40%, rgba(32, 212, 120, 0.15), transparent 31%),
    #030404;
}

.equation-kicker {
  margin: 0 0 calc(var(--u) * 1.1);
  color: var(--muted);
  font-size: calc(var(--u) * 1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.equation-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: center;
  gap: calc(var(--u) * 0.52);
  width: 100%;
}

.budget-chip {
  min-width: 0;
  padding: calc(var(--u) * 0.74) calc(var(--u) * 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: calc(var(--u) * 0.42);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
}

.budget-chip span {
  display: block;
  color: var(--muted);
  font-size: calc(var(--u) * 1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.budget-chip strong {
  display: block;
  margin-top: calc(var(--u) * 0.18);
  font-size: calc(var(--u) * 1.3);
  font-weight: 680;
}

.equation-total {
  margin: calc(var(--u) * 1.5) 0 0;
  color: var(--green-soft);
  font-size: calc(var(--u) * 6.2);
  font-weight: 720;
  line-height: 0.92;
  letter-spacing: -0.075em;
  text-shadow: 0 0 calc(var(--u) * 2.2) rgba(32, 212, 120, 0.18);
}

.equation-footnote {
  margin: calc(var(--u) * 0.8) 0 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1);
}

.exclusions-slide {
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 74, 69, 0.1), transparent 26%),
    #050606;
}

.exclusion-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: calc(var(--u) * 4);
  align-items: center;
  height: 100%;
}

.exclusion-layout h2 {
  margin: 0;
  font-size: calc(var(--u) * 4.7);
  line-height: 0.96;
  letter-spacing: -0.07em;
}

.exclusion-layout h2 span {
  display: block;
  color: var(--green-soft);
}

.exclusion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--u) * 0.6);
}

.exclusion-card {
  min-height: calc(var(--u) * 8.5);
  padding: calc(var(--u) * 1.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(var(--u) * 0.45);
  background: rgba(255, 255, 255, 0.028);
}

.exclusion-card__icon {
  color: var(--red);
  font-size: calc(var(--u) * 1.1);
  font-weight: 800;
}

.exclusion-card h3 {
  margin: calc(var(--u) * 0.4) 0 0;
  font-size: calc(var(--u) * 1.15);
  font-weight: 630;
}

.exclusion-card p {
  margin: calc(var(--u) * 0.18) 0 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1);
  line-height: 1.4;
}

.approval-slide {
  background:
    radial-gradient(circle at 50% 45%, rgba(32, 212, 120, 0.17), transparent 33%),
    linear-gradient(145deg, #07100b, #020303 62%);
}

.approval-question,
.approval-answer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out), filter 900ms var(--ease-out);
}

.approval-question h2,
.approval-answer h2 {
  max-width: 12ch;
  margin: 0;
  font-size: calc(var(--u) * 6.2);
  font-weight: 690;
  line-height: 0.92;
  letter-spacing: -0.075em;
}

.approval-question p,
.approval-answer p {
  margin: calc(var(--u) * 1) 0 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1);
}

.approval-answer {
  opacity: 0;
  transform: scale(0.88);
  filter: blur(calc(var(--u) * 0.5));
}

.approval-answer h2 {
  color: var(--green-soft);
}

.approval-slide[data-step="1"] .approval-question {
  opacity: 0;
  transform: scale(1.15);
  filter: blur(calc(var(--u) * 0.5));
}

.approval-slide[data-step="1"] .approval-answer {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.approval-pill {
  margin-top: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 0.55) calc(var(--u) * 1);
  border: 1px solid rgba(147, 246, 191, 0.28);
  border-radius: 999px;
  background: rgba(32, 212, 120, 0.08);
  color: var(--green-soft);
  font-size: calc(var(--u) * 1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.confetti {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -8%;
  width: calc(var(--u) * 0.32);
  height: calc(var(--u) * 0.76);
  border-radius: 2px;
  opacity: 0;
}

.approval-slide[data-step="1"] .confetti-piece {
  animation: confetti-fall var(--duration) var(--delay) linear forwards;
}

@keyframes confetti-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -10%, 0) rotate(0);
  }
  8% {
    opacity: 1;
  }
  100% {
    opacity: 0.9;
    transform: translate3d(var(--drift), 118vh, 0) rotate(var(--spin));
  }
}

.presenter-chrome {
  position: fixed;
  left: 50%;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 100;
  width: min(calc(100vw - 3rem), 92rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.2rem;
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, 0.5rem);
  transition: opacity 350ms ease, transform 350ms ease;
}

body:hover .presenter-chrome,
body.has-keyboard-focus .presenter-chrome,
.presenter-chrome:hover,
.presenter-chrome:focus-within {
  opacity: 1;
  transform: translate(-50%, 0);
}

.presenter-chrome__center {
  justify-self: center;
  text-align: center;
}

.presenter-chrome__left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.presenter-chrome__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
}

.sections-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.34rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.46);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition:
    color 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.sections-button:hover,
.sections-button[aria-expanded="true"] {
  border-color: rgba(147, 246, 191, 0.38);
  background: rgba(32, 212, 120, 0.1);
  color: var(--green-soft);
}

.sections-button:focus-visible {
  outline: 3px solid var(--green-soft);
  outline-offset: 4px;
}

.sections-button__icon {
  display: grid;
  gap: 2px;
  width: 0.8rem;
}

.sections-button__icon i {
  display: block;
  height: 1px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: transform 300ms var(--ease-out), opacity 220ms ease;
}

.sections-button[aria-expanded="true"] .sections-button__icon i:nth-child(1) {
  transform: translateY(3px) rotate(45deg);
}

.sections-button[aria-expanded="true"] .sections-button__icon i:nth-child(2) {
  opacity: 0;
}

.sections-button[aria-expanded="true"] .sections-button__icon i:nth-child(3) {
  transform: translateY(-3px) rotate(-45deg);
}

.sections-overlay {
  position: fixed;
  inset: 0;
  z-index: 650;
  visibility: hidden;
  pointer-events: none;
}

.sections-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
}

.sections-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}

.sections-overlay.is-open .sections-overlay__backdrop {
  opacity: 1;
}

.sections-pane {
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  width: min(31rem, calc(100vw - 1.5rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1.4rem;
  background:
    radial-gradient(circle at 15% 0%, rgba(32, 212, 120, 0.13), transparent 28%),
    rgba(7, 9, 8, 0.94);
  box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.72);
  opacity: 0.75;
  transform: translateX(calc(-100% - 2rem));
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  transition:
    transform 460ms var(--ease-out),
    opacity 420ms ease;
}

.sections-overlay.is-open .sections-pane {
  opacity: 1;
  transform: translateX(0);
}

.sections-pane:focus {
  outline: none;
}

.sections-pane__header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.2rem 0.15rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sections-pane__eyebrow {
  margin: 0 0 0.35rem;
  color: var(--green-soft);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sections-pane__header h2 {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 690;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.sections-pane__close {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}

.sections-pane__close:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sections-pane__close:focus-visible {
  outline: 3px solid var(--green-soft);
  outline-offset: 3px;
}

.section-nav button:focus,
.destination-nav button:focus {
  outline: 3px solid var(--green-soft);
  outline-offset: -3px;
}

.section-nav,
.destination-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.85rem 0.2rem 0.75rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(147, 246, 191, 0.34) transparent;
}

.section-nav__item {
  opacity: 0;
  transform: translateX(-1rem);
  transition:
    opacity 320ms ease,
    transform 420ms var(--ease-out);
}

.sections-overlay.is-open .section-nav__item {
  opacity: 1;
  transform: translateX(0);
}

.sections-overlay.is-open .section-nav__item:nth-child(1) { transition-delay: 40ms; }
.sections-overlay.is-open .section-nav__item:nth-child(2) { transition-delay: 75ms; }
.sections-overlay.is-open .section-nav__item:nth-child(3) { transition-delay: 110ms; }
.sections-overlay.is-open .section-nav__item:nth-child(4) { transition-delay: 145ms; }
.sections-overlay.is-open .section-nav__item:nth-child(5) { transition-delay: 180ms; }
.sections-overlay.is-open .section-nav__item:nth-child(6) { transition-delay: 215ms; }
.sections-overlay.is-open .section-nav__item:nth-child(7) { transition-delay: 250ms; }

.section-nav__button {
  position: relative;
  width: 100%;
  min-height: 4.4rem;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.7rem;
  align-items: center;
  padding: 0.72rem 0.85rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
  cursor: pointer;
  transition:
    background 220ms ease,
    color 220ms ease,
    transform 220ms var(--ease-out);
}

.section-nav__button--toggle {
  grid-template-columns: 2.4rem 1fr auto;
}

.section-nav__button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  transform: translateX(0.2rem);
}

.section-nav__button.is-active,
.section-nav__button[aria-current="page"] {
  background: linear-gradient(90deg, rgba(32, 212, 120, 0.13), rgba(32, 212, 120, 0.025));
  color: var(--green-soft);
  box-shadow: inset 3px 0 0 var(--green);
}

.section-nav__index {
  color: rgba(255, 255, 255, 0.36);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.section-nav__button.is-active .section-nav__index {
  color: var(--green-soft);
}

.section-nav__copy {
  min-width: 0;
}

.section-nav__copy strong,
.section-nav__copy small {
  display: block;
}

.section-nav__copy strong {
  font-size: 1.1rem;
  font-weight: 670;
  letter-spacing: -0.025em;
}

.section-nav__copy small {
  margin-top: 0.16rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.88rem;
  font-weight: 520;
  line-height: 1.3;
}

.section-nav__chevron {
  color: rgba(255, 255, 255, 0.48);
  font-size: 1.15rem;
  transform: rotate(0deg);
  transition: transform 300ms var(--ease-out), color 220ms ease;
}

.section-nav__button[aria-expanded="true"] .section-nav__chevron {
  color: var(--green-soft);
  transform: rotate(180deg);
}

.itinerary-submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-0.45rem);
  transition:
    max-height 420ms var(--ease-out),
    opacity 260ms ease,
    transform 360ms var(--ease-out);
}

.itinerary-submenu.is-expanded {
  max-height: 31rem;
  opacity: 1;
  transform: translateY(0);
}

.destination-nav {
  padding: 0.15rem 0 0.55rem 3.2rem;
}

.destination-nav button {
  position: relative;
  width: 100%;
  min-height: 3.2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.75rem 0.55rem 1.05rem;
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  text-align: left;
  cursor: pointer;
  transition:
    background 200ms ease,
    color 200ms ease,
    transform 200ms var(--ease-out);
}

.destination-nav button::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  transition: background 200ms ease, box-shadow 200ms ease;
}

.destination-nav button:hover {
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
  transform: translateX(0.18rem);
}

.destination-nav button.is-active,
.destination-nav button[aria-current="location"] {
  background: rgba(32, 212, 120, 0.09);
  color: var(--green-soft);
}

.destination-nav button.is-active::before {
  background: var(--green-soft);
  box-shadow: 0 0 0.65rem rgba(32, 212, 120, 0.58);
}

.destination-nav strong {
  font-size: 1rem;
  font-weight: 640;
}

.destination-nav small {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.sections-pane__hint {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.85rem 0.25rem 0.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.82rem;
  text-align: center;
}

.sections-pane__hint kbd {
  min-height: 1.55rem;
  margin: 0 0.18rem;
  padding: 0.1rem 0.42rem;
  font-size: 0.68rem;
}

.chrome-button {
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.edge-control {
  position: fixed;
  top: 50%;
  z-index: 100;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 7rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.34);
  font-size: 3rem;
  opacity: 0;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 250ms ease, color 250ms ease;
}

.edge-control:hover {
  color: #fff;
}

.chrome-button:focus-visible,
.edge-control:focus-visible,
.overlay__close:focus-visible,
.credit-card a:focus-visible {
  outline: 3px solid var(--green-soft);
  outline-offset: 4px;
}

.edge-control:focus-visible {
  opacity: 1;
  color: #fff;
}

.edge-control--previous {
  left: 0;
}

.edge-control--next {
  right: 0;
}

body:hover .edge-control {
  opacity: 1;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms;
}

.overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.overlay__panel {
  width: min(44rem, 92vw);
  max-height: 84vh;
  padding: 2.2rem;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1.4rem;
  background: #0a0c0b;
  box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.65);
}

.overlay__panel--wide {
  width: min(76rem, 94vw);
}

.overlay h2 {
  margin: 0.45rem 0 1.6rem;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}

.shortcut-grid > div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7rem;
  color: var(--muted);
}

kbd {
  display: inline-grid;
  place-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom-width: 3px;
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}

.overlay__hint {
  margin: 1.3rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.overlay__close {
  margin-top: 1.3rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(147, 246, 191, 0.24);
  border-radius: 999px;
  background: rgba(32, 212, 120, 0.08);
  color: var(--green-soft);
  cursor: pointer;
}

.credits-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

.credit-card {
  padding: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.025);
}

.credit-card h3 {
  margin: 0;
  font-size: 0.92rem;
}

.credit-card p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.credit-card a {
  color: var(--green-soft);
}

body.cursor-hidden {
  cursor: none;
}

body.cursor-hidden .presenter-chrome,
body.cursor-hidden .edge-control {
  opacity: 0;
}

body.sections-open,
body.cursor-hidden.sections-open {
  cursor: auto;
}

body.cursor-hidden .presenter-chrome:focus-within,
body.cursor-hidden .edge-control:focus-visible {
  opacity: 1;
}

@media (max-aspect-ratio: 4 / 3) {
  .presenter-chrome {
    width: calc(100vw - 1.5rem);
  }
}

@media (max-width: 820px) {
  .presenter-chrome,
  body.cursor-hidden .presenter-chrome {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .shortcut-grid,
  .credits-list {
    grid-template-columns: 1fr;
  }

  .sections-pane {
    top: 0.45rem;
    bottom: 0.45rem;
    left: 0.45rem;
    width: calc(100vw - 0.9rem);
    padding: 1.05rem;
    border-radius: 1.1rem;
  }

  .sections-pane__header h2 {
    font-size: 2rem;
  }

  .sections-pane__close {
    width: 3rem;
    height: 3rem;
  }

  .section-nav__button {
    min-height: 4rem;
  }

  .destination-nav {
    padding-left: 2.5rem;
  }

  .destination-nav button {
    min-height: 3rem;
  }

  .sections-button > span:last-child {
    display: none;
  }

  .sections-button {
    width: 3rem;
    min-height: 3rem;
    justify-content: center;
    padding-inline: 0;
  }
}

@media (hover: none), (pointer: coarse) {
  .presenter-chrome,
  body.cursor-hidden .presenter-chrome {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}