:root {
  /* DESIGN FONT TOKEN: IBM Plex Sans** for step labels */
  --void: #07111F;
  --orbital: #102A44;
  --lunar: #A9D8FF;
  --marble: #EAF4FF;
  --lavender: #5F6F9F;
  --summit: #D8F7FF;
  --silver: #B8C7D9;
  --gold: #F2D27A;
  --display: "Cormorant Garamond", Georgia, serif;
  --book: "Libre Baskerville", Georgia, serif;
  --tech: "IBM Plex Sans", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--marble);
  background: radial-gradient(circle at 50% 15%, rgba(169, 216, 255, .18), transparent 28%), linear-gradient(180deg, var(--orbital), var(--void) 42%, #03070d 100%);
  overflow-x: hidden;
  font-family: var(--book);
}

.sky-field {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(216, 247, 255, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 9%, rgba(234, 244, 255, .55) 0 1px, transparent 2px),
    radial-gradient(circle at 89% 42%, rgba(184, 199, 217, .5) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 64%, rgba(169, 216, 255, .45) 0 1px, transparent 2px);
}

.moon-dust {
  position: absolute;
  inset: -20%;
  opacity: .24;
  background: repeating-radial-gradient(circle at 40% 30%, rgba(234, 244, 255, .22) 0 1px, transparent 1px 42px);
  animation: dustDrift 24s linear infinite;
}

.orbital-halo {
  position: absolute;
  border: 1px solid rgba(184, 199, 217, .22);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.halo-one { width: 72vw; height: 22vw; left: 13vw; top: 16vh; }
.halo-two { width: 110vw; height: 34vw; left: -7vw; top: 52vh; border-color: rgba(169, 216, 255, .14); }

.quest { position: relative; }

.stage {
  position: relative;
  min-height: 100vh;
  padding: clamp(34px, 5vw, 78px);
  overflow: hidden;
  isolation: isolate;
}

.stage::before {
  content: attr(data-stage);
  position: absolute;
  right: 4vw;
  top: 4vh;
  font: 600 clamp(80px, 16vw, 220px)/.8 var(--display);
  color: rgba(184, 199, 217, .055);
  z-index: -1;
}

.ridge,
.crater-slope,
.ridge-wipe {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.ridge-far {
  left: -8vw;
  right: -8vw;
  bottom: 15vh;
  height: 38vh;
  background: linear-gradient(150deg, transparent 0 32%, rgba(95, 111, 159, .65) 33% 49%, transparent 50%), linear-gradient(210deg, transparent 0 41%, rgba(16, 42, 68, .92) 42% 65%, transparent 66%);
  clip-path: polygon(0 100%, 0 66%, 11% 55%, 20% 61%, 32% 24%, 43% 47%, 53% 14%, 65% 45%, 79% 30%, 91% 63%, 100% 50%, 100% 100%);
}

.ridge-mid {
  left: -12vw;
  right: -12vw;
  bottom: -3vh;
  height: 54vh;
  background: linear-gradient(180deg, rgba(169, 216, 255, .22), rgba(7, 17, 31, .96)), radial-gradient(circle at 35% 24%, rgba(216, 247, 255, .28), transparent 28%);
  clip-path: polygon(0 100%, 0 55%, 12% 46%, 22% 25%, 35% 45%, 48% 10%, 61% 34%, 72% 21%, 86% 52%, 100% 31%, 100% 100%);
}

.marble-fog {
  position: absolute;
  left: -10vw;
  width: 120vw;
  height: 25vh;
  pointer-events: none;
  opacity: .54;
  filter: blur(20px);
  background: linear-gradient(90deg, transparent, rgba(234, 244, 255, .34), rgba(95, 111, 159, .2), transparent), repeating-linear-gradient(120deg, transparent 0 34px, rgba(216, 247, 255, .28) 36px 39px, transparent 42px 74px);
  animation: fogSail 16s ease-in-out infinite alternate;
}

.fog-a { top: 30vh; }
.fog-b { top: 52vh; animation-delay: -7s; opacity: .38; }

.command-ribbon,
.measurement-strip,
.step-label,
.coordinate,
.quest-map span,
.reticle-lab p {
  font-family: var(--tech);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--silver);
}

.command-ribbon {
  position: absolute;
  top: 10vh;
  left: clamp(24px, 8vw, 130px);
  right: 10vw;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
}

.command-ribbon i { height: 1px; flex: 1; background: linear-gradient(90deg, var(--gold), rgba(184, 199, 217, .18)); }
.command-ribbon b { color: var(--summit); font-weight: 500; }

.hero-title-plane {
  position: relative;
  width: min(950px, 82vw);
  margin: 23vh 0 0 5vw;
  padding: clamp(22px, 4vw, 58px);
  border-left: 1px solid rgba(242, 210, 122, .45);
  background: linear-gradient(105deg, rgba(16, 42, 68, .1), rgba(234, 244, 255, .08), transparent);
}

.coordinate { font-size: 11px; margin: 0 0 16px; }

h1, h2 { font-family: var(--display); font-weight: 500; margin: 0; }

h1 {
  font-size: clamp(76px, 15vw, 210px);
  line-height: .76;
  letter-spacing: -.055em;
  color: var(--marble);
  text-shadow: 0 0 28px rgba(169, 216, 255, .32);
}

h2 {
  font-size: clamp(44px, 8vw, 118px);
  line-height: .9;
  color: var(--marble);
}

.lesson-statement {
  max-width: 580px;
  margin: 24px 0 0 auto;
  color: var(--summit);
  font: italic clamp(22px, 3vw, 40px)/1.12 var(--display);
}

.lesson-shard,
.instruction-layer,
.summit-console,
.quest-map,
.reticle-lab,
.mountain-plate {
  background:
    linear-gradient(118deg, rgba(234, 244, 255, .16), rgba(169, 216, 255, .055) 38%, rgba(16, 42, 68, .36)),
    repeating-linear-gradient(135deg, transparent 0 28px, rgba(184, 199, 217, .10) 29px 31px, transparent 33px 74px);
  border: 1px solid rgba(184, 199, 217, .24);
  box-shadow: 0 24px 90px rgba(0, 0, 0, .36), inset 0 0 42px rgba(216, 247, 255, .055);
  backdrop-filter: blur(10px);
}

.hero-shard {
  position: absolute;
  right: 7vw;
  bottom: 12vh;
  width: min(360px, 35vw);
  padding: 24px;
}

.shard-number { display: block; color: var(--gold); font-family: var(--tech); letter-spacing: .16em; margin-bottom: 12px; }
.lesson-shard p, .tutorial-copy { color: rgba(234, 244, 255, .82); line-height: 1.8; }

.orbit-line {
  position: absolute;
  width: 46vw;
  height: 14vw;
  border: 1px solid rgba(184, 199, 217, .25);
  border-left-color: var(--gold);
  border-radius: 50%;
  transform: rotate(-23deg);
}
.orbit-hero { right: -6vw; top: 28vh; }

.stage-compass { display: grid; grid-template-columns: .86fr 1fr; align-items: center; gap: 4vw; }
.ridge-wipe { inset: auto -12vw -10vh -12vw; height: 38vh; background: linear-gradient(8deg, #03070d 38%, rgba(95, 111, 159, .78) 39% 46%, transparent 47%); z-index: 3; opacity: .86; }
.wipe-one { transform: translateY(var(--wipe, 0px)); }
.wipe-two { top: -10vh; bottom: auto; transform: rotate(180deg) translateY(var(--wipe, 0px)); }

.mountain-plate { position: absolute; left: -10vw; top: 14vh; width: 42vw; height: 66vh; clip-path: polygon(0 100%, 18% 42%, 36% 57%, 55% 8%, 78% 62%, 100% 28%, 100% 100%); opacity: .62; }
.instruction-layer { padding: clamp(28px, 5vw, 72px); transform: translateX(4vw); }
.step-label { color: var(--gold); font-size: 12px; margin: 0 0 18px; }
.tutorial-copy { max-width: 580px; }

.compass-diagram { position: relative; width: min(520px, 42vw); aspect-ratio: 1; justify-self: center; }
.compass-ring, .compass-arc, .needle, .checkpoint, .gold-pulse { position: absolute; }
.compass-ring { inset: 11%; border: 1px solid rgba(216, 247, 255, .38); border-radius: 50%; box-shadow: inset 0 0 60px rgba(169, 216, 255, .08); }
.compass-arc { inset: 5%; border-radius: 50%; border: 1px solid transparent; border-top-color: var(--silver); }
.arc-a { transform: rotate(22deg); }
.arc-b { transform: rotate(129deg); border-right-color: rgba(242, 210, 122, .7); }
.needle { left: 50%; top: 15%; width: 2px; height: 70%; transform-origin: 50% 50%; background: linear-gradient(var(--gold), var(--summit), transparent); transform: rotate(var(--needle, 31deg)); }
.checkpoint { width: 12px; height: 12px; border: 1px solid var(--gold); border-radius: 50%; box-shadow: 0 0 22px rgba(242, 210, 122, .75); }
.cp-one { left: 23%; top: 62%; } .cp-two { right: 21%; top: 34%; }
.gold-pulse { left: 50%; top: 50%; width: 10px; height: 10px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 30px var(--gold); animation: signalPulse 2.6s ease-in-out infinite; }
.measurement-strip { position: absolute; left: 47vw; bottom: 9vh; font-size: 11px; padding: 12px 22px; border-top: 1px solid rgba(184, 199, 217, .4); }

.stage-crater { display: grid; grid-template-columns: 1.05fr .9fr; align-items: center; }
.crater-slope { left: -8vw; right: -8vw; bottom: -12vh; height: 54vh; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 52% 15%, rgba(95, 111, 159, .72), rgba(16, 42, 68, .74) 42%, rgba(7, 17, 31, .98) 70%); }
.slope-back { bottom: 6vh; opacity: .45; transform: scaleX(1.2); }
.slope-front { clip-path: ellipse(58% 34% at 50% 55%); }
.crater-shard { width: min(680px, 52vw); padding: clamp(28px, 5vw, 70px); }
.crater-shard h2 { font-style: italic; }
.reticle-lab { position: relative; justify-self: center; width: min(430px, 38vw); aspect-ratio: 1; border-radius: 50%; }
.reticle-circle { position: absolute; border: 1px solid rgba(184, 199, 217, .34); border-radius: 50%; }
.r1 { inset: 14%; } .r2 { inset: 31%; border-color: rgba(242, 210, 122, .45); }
.reticle-cross { position: absolute; background: rgba(216, 247, 255, .38); }
.reticle-cross.h { left: 8%; right: 8%; top: 50%; height: 1px; }
.reticle-cross.v { top: 8%; bottom: 8%; left: 50%; width: 1px; }
.reticle-lab p { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); width: max-content; font-size: 10px; color: var(--gold); }
.contour-field { position: absolute; inset: 0; pointer-events: none; }
.contour-field i { position: absolute; left: 14%; right: 14%; height: 28vh; border: 1px solid rgba(169, 216, 255, .13); border-radius: 50%; transform: translate(var(--contour-x, 0px), var(--contour-y, 0px)) rotate(-8deg); }
.contour-field i:nth-child(1) { bottom: 10vh; } .contour-field i:nth-child(2) { bottom: 16vh; left: 18%; } .contour-field i:nth-child(3) { bottom: 22vh; right: 20%; } .contour-field i:nth-child(4) { bottom: 30vh; left: 27%; } .contour-field i:nth-child(5) { bottom: 38vh; right: 35%; }

.stage-tether { display: grid; grid-template-columns: 1.2fr .62fr; gap: 4vw; align-items: center; }
.summit-console { padding: clamp(28px, 5vw, 68px); }
.tether-board { position: relative; margin-top: 34px; height: 260px; border-top: 1px solid rgba(184, 199, 217, .18); border-bottom: 1px solid rgba(184, 199, 217, .18); }
.tether-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tether-svg path { fill: none; stroke: var(--summit); stroke-width: 2; filter: drop-shadow(0 0 12px rgba(216, 247, 255, .6)); stroke-linecap: round; }
.node { position: absolute; z-index: 2; padding: 8px 10px; font: 600 11px/1 var(--tech); letter-spacing: .13em; color: var(--void); background: var(--marble); border-radius: 999px; box-shadow: 0 0 22px rgba(169, 216, 255, .36); }
.node-a { left: 4%; bottom: 20%; } .node-b { left: 47%; bottom: 29%; background: var(--gold); } .node-c { right: 5%; top: 22%; }
.quest-map { position: relative; padding: 28px; min-height: 430px; align-self: end; }
.quest-map span { font-size: 11px; color: var(--gold); }
.quest-map ol { margin: 28px 0 0; padding-left: 22px; font-family: var(--book); line-height: 2.1; color: var(--summit); }
.light-flag { position: absolute; right: 38px; bottom: 42px; width: 2px; height: 130px; background: var(--silver); }
.light-flag::after { content: ""; position: absolute; left: 0; top: 0; width: 92px; height: 42px; background: linear-gradient(90deg, var(--gold), transparent); clip-path: polygon(0 0, 100% 20%, 64% 52%, 100% 86%, 0 100%); filter: drop-shadow(0 0 16px var(--gold)); }

.progress-thread { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); display: grid; gap: 16px; z-index: 9; }
.progress-thread span { width: 7px; height: 42px; border: 1px solid rgba(184, 199, 217, .34); border-radius: 99px; background: rgba(16, 42, 68, .42); transition: background .35s ease, box-shadow .35s ease; }
.progress-thread span.active { background: var(--gold); box-shadow: 0 0 18px rgba(242, 210, 122, .75); }

.elastic-plane, .elastic-shard { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scaleY(var(--stretch, 1)); transition: transform .7s cubic-bezier(.2, 1.4, .24, 1); }

@keyframes dustDrift { to { transform: translate3d(4%, -5%, 0) rotate(8deg); } }
@keyframes fogSail { from { transform: translateX(-7vw) skewX(-8deg); } to { transform: translateX(9vw) skewX(6deg); } }
@keyframes signalPulse { 0%, 100% { transform: translate(-50%, -50%) scale(.7); opacity: .55; } 50% { transform: translate(-50%, -50%) scale(2.7); opacity: .12; } }

@media (max-width: 820px) {
  .stage-compass, .stage-crater, .stage-tether { grid-template-columns: 1fr; }
  .hero-title-plane { margin-left: 0; width: 100%; }
  .hero-shard, .measurement-strip { position: relative; right: auto; bottom: auto; left: auto; width: 100%; margin-top: 34px; }
  .compass-diagram, .reticle-lab, .crater-shard { width: 100%; }
  .command-ribbon { left: 24px; right: 24px; align-items: flex-start; flex-direction: column; }
  .mountain-plate { width: 70vw; opacity: .35; }
}