:root {
  /* Design compliance tokens: Use CSS custom properties for all colors and create reusable classes such as `.midnight-field`; IBM Plex Mono sparingly for coordinates; `QUEST_ID: ADHOC-01`. IntersectionObserver scroll-linked CSS classes trigger route path drawing. */
  --abyss: #020817;
  --cobalt: #071B46;
  --midnight: #102E6E;
  --cyan: #73F7FF;
  --violet: #B08CFF;
  --chrome: #D8F7FF;
  --gold: #FFEA7A;
  --vignette: #00030A;
  --soft: rgba(216, 247, 255, 0.74);
  --display: "Michroma", "Futura", "Avenir Next", "Inter", "Trebuchet MS", sans-serif;
  --geo: "Jost", "Futura", "Avenir Next", "Inter", "Trebuchet MS", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", "Cascadia Mono", "Menlo", monospace;
  --mono-bold-token: "Mono**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--vignette);
  color: var(--chrome);
  font-family: var(--geo);
  overflow-x: hidden;
}

button { font: inherit; }

.site-shell {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 72% 18%, rgba(115, 247, 255, 0.14), transparent 25vw),
    radial-gradient(circle at 20% 80%, rgba(176, 140, 255, 0.16), transparent 28vw),
    linear-gradient(145deg, var(--vignette) 0%, var(--abyss) 38%, var(--cobalt) 78%, var(--midnight) 100%);
}

.fixed-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.fixed-atmosphere::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(rgba(216, 247, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 247, 255, 0.03) 1px, transparent 1px);
  background-size: 90px 90px;
  transform: rotate(-11deg) scale(1.2);
  mask-image: radial-gradient(ellipse at center, black, transparent 68%);
}

.aurora-ribbon {
  position: absolute;
  width: 120vw;
  height: 24vh;
  left: -10vw;
  border-radius: 999px;
  filter: blur(24px) saturate(140%);
  opacity: 0.58;
  transform-origin: center;
  mix-blend-mode: screen;
  translate: 0 var(--scroll-drift, 0px);
}

.ribbon-one {
  top: 19vh;
  background: linear-gradient(90deg, transparent, rgba(115, 247, 255, 0.0), rgba(115, 247, 255, 0.82), rgba(176, 140, 255, 0.7), transparent);
  animation: auroraShear 18s ease-in-out infinite alternate;
}

.ribbon-two {
  top: 55vh;
  height: 18vh;
  background: linear-gradient(90deg, transparent, rgba(176, 140, 255, 0.62), rgba(115, 247, 255, 0.34), transparent);
  opacity: 0.35;
  animation: auroraShearTwo 23s ease-in-out infinite alternate;
}

.orbital-ring {
  position: absolute;
  border: 1px solid rgba(216, 247, 255, 0.18);
  border-radius: 50%;
  box-shadow: inset 0 0 42px rgba(115, 247, 255, 0.08), 0 0 38px rgba(176, 140, 255, 0.08);
}

.ring-a { width: 52vw; height: 52vw; right: -20vw; top: 8vh; }
.ring-b { width: 38vw; height: 38vw; left: -16vw; bottom: 4vh; }

.ring-a::before,
.ring-b::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
}
.ring-a::before { right: 19%; top: 9%; }
.ring-b::before { left: 14%; bottom: 18%; background: var(--violet); box-shadow: 0 0 18px var(--violet); }

.device-nav {
  position: fixed;
  right: 22px;
  top: 24px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 300px;
  padding: 10px 13px;
  border: 1px solid rgba(216, 247, 255, 0.46);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(216, 247, 255, 0.19), rgba(7, 27, 70, 0.72) 42%, rgba(2, 8, 23, 0.82));
  box-shadow: inset 0 1px rgba(255,255,255,0.28), 0 18px 55px rgba(0,3,10,0.48), 0 0 26px rgba(115,247,255,0.16);
  backdrop-filter: blur(16px);
}

.coordinate-label {
  font-family: var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 10px;
  color: rgba(216, 247, 255, 0.78);
}

.nav-code { min-width: 132px; }

.nav-dots { display: flex; gap: 8px; }
.nav-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(216, 247, 255, 0.68);
  border-radius: 50%;
  background: rgba(2, 8, 23, 0.72);
  cursor: pointer;
  transition: background 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}
.nav-dot.active {
  background: var(--gold);
  box-shadow: 0 0 16px rgba(255, 234, 122, 0.88);
  transform: scale(1.18);
}

.nav-progress {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(216, 247, 255, 0.18);
  overflow: hidden;
  border-radius: 999px;
}

.nav-progress span {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--gold));
  box-shadow: 0 0 12px var(--cyan);
}

main { position: relative; z-index: 2; }

.mission-panel {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(26px, 5vw, 78px);
  isolation: isolate;
  border-bottom: 1px solid rgba(216, 247, 255, 0.08);
}

.mission-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(16, 46, 110, 0.42), transparent 62%), linear-gradient(180deg, rgba(0,3,10,0.12), rgba(0,3,10,0.62));
  z-index: -2;
}

.panel-glow {
  position: absolute;
  inset: 12% auto auto 18%;
  width: 56vw;
  height: 56vw;
  max-height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(115,247,255,0.14), rgba(176,140,255,0.05) 44%, transparent 70%);
  filter: blur(10px);
  z-index: -1;
}

.cyan-glow { left: 54%; top: 12%; background: radial-gradient(circle, rgba(115,247,255,0.2), transparent 66%); }
.violet-glow { left: -10%; top: 22%; background: radial-gradient(circle, rgba(176,140,255,0.24), transparent 68%); }
.gold-glow { left: 28%; top: 22%; background: radial-gradient(circle, rgba(255,234,122,0.16), rgba(115,247,255,0.08) 36%, transparent 72%); }

.signal-panel { display: flex; flex-direction: column; justify-content: center; }

.horizon-line {
  position: absolute;
  left: -8vw;
  right: -8vw;
  top: 55%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,247,255,0.34), rgba(115,247,255,0.5), transparent);
  transform: rotate(-7deg);
  box-shadow: 0 0 28px rgba(115,247,255,0.45);
}

.panel-label {
  position: absolute;
  top: clamp(32px, 8vw, 96px);
  left: clamp(26px, 5vw, 78px);
}

.chrome-wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(48px, 11.5vw, 176px);
  line-height: 0.92;
  letter-spacing: -0.09em;
  font-weight: 400;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, var(--chrome) 18%, var(--cyan) 42%, #6d8be9 58%, var(--violet) 78%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(115,247,255,0.2));
  position: relative;
}

.chrome-wordmark::after {
  content: "";
  position: absolute;
  inset: -12% -8%;
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,0.66) 28%, transparent 38%);
  transform: translateX(-120%) skewX(-18deg);
  animation: chromeGleam 6s ease-in-out infinite;
  mix-blend-mode: screen;
}

.quest-waypoint {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 234, 122, 0.88);
  background: radial-gradient(circle, var(--gold) 0 18%, rgba(255,234,122,0.26) 20% 48%, transparent 50%);
  box-shadow: 0 0 26px rgba(255, 234, 122, 0.8), 0 0 60px rgba(255, 234, 122, 0.25);
  animation: waypointPulse 2.4s ease-in-out infinite;
}

.primary-waypoint { right: 17vw; top: 34vh; }
.quest-waypoint span { position: absolute; inset: -16px; border: 1px solid rgba(255,234,122,0.22); border-radius: 50%; }

.compass-shard {
  position: absolute;
  right: 9vw;
  bottom: 14vh;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid rgba(216,247,255,0.22);
  background: radial-gradient(circle, rgba(216,247,255,0.12), rgba(7,27,70,0.2), transparent 68%);
  transform: rotate(22deg);
}
.compass-shard i {
  position: absolute;
  left: 50%; top: 18%;
  width: 20px; height: 88px;
  clip-path: polygon(50% 0, 100% 76%, 50% 100%, 0 76%);
  background: linear-gradient(180deg, var(--chrome), rgba(115,247,255,0.2));
  box-shadow: 0 0 22px rgba(115,247,255,0.28);
}

.edge-order {
  position: absolute;
  max-width: 360px;
  color: rgba(216,247,255,0.76);
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.35;
}
.lower-left { left: clamp(26px, 5vw, 78px); bottom: clamp(34px, 8vw, 110px); }
.upper-right { right: clamp(26px, 6vw, 92px); top: 24vh; }
.micro-title { margin: 0 0 8px; color: var(--cyan); font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.edge-order p:last-child { margin: 0; }

.viewport-title {
  position: absolute;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(32px, 6.6vw, 104px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.05em;
  max-width: 980px;
  color: var(--chrome);
  text-shadow: 0 0 28px rgba(115,247,255,0.18);
}
.route-panel .viewport-title { left: clamp(26px, 5vw, 78px); bottom: 13vh; }
.side-title { right: clamp(26px, 6vw, 84px); top: 17vh; max-width: 640px; text-align: right; }

.route-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-shadow, .route-filament { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-shadow { stroke: rgba(216,247,255,0.12); stroke-width: 10; filter: blur(10px); }
.route-filament {
  stroke: url(#routeGradient);
  stroke-width: 2.2;
  filter: drop-shadow(0 0 14px rgba(115,247,255,0.86));
  stroke-dasharray: 1900;
  stroke-dashoffset: 1900;
  transition: stroke-dashoffset 1600ms cubic-bezier(.2,.8,.15,1);
}
.active-panel .route-filament { stroke-dashoffset: 0; }
.route-node { fill: var(--gold); opacity: 0; filter: drop-shadow(0 0 12px rgba(255,234,122,.8)); transition: opacity 600ms ease 800ms; }
.active-panel .route-node { opacity: 1; }

.obstacle {
  position: absolute;
  padding: 12px 18px;
  border: 1px solid rgba(216,247,255,0.22);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(216,247,255,0.72);
  background: linear-gradient(135deg, rgba(16,46,110,0.68), rgba(2,8,23,0.44));
  box-shadow: inset 0 1px rgba(255,255,255,0.16), 0 14px 38px rgba(0,3,10,0.32);
}
.obstacle-a { left: 26vw; top: 41vh; }
.obstacle-b { right: 17vw; bottom: 28vh; }

.capsule-constellation {
  position: absolute;
  inset: 0;
}

.constellation-line {
  position: absolute;
  height: 1px;
  width: 34vw;
  background: linear-gradient(90deg, transparent, rgba(115,247,255,0.32), rgba(176,140,255,0.26), transparent);
  filter: drop-shadow(0 0 10px rgba(115,247,255,0.35));
  opacity: 0;
  transform-origin: left center;
  transition: opacity 900ms ease 460ms, transform 1100ms cubic-bezier(.2,.8,.12,1) 460ms;
}
.line-one { left: 24vw; top: 45vh; transform: rotate(25deg) scaleX(0.1); }
.line-two { left: 48vw; top: 58vh; transform: rotate(-22deg) scaleX(0.1); }
.active-panel .line-one { opacity: 1; transform: rotate(25deg) scaleX(1); }
.active-panel .line-two { opacity: 1; transform: rotate(-22deg) scaleX(1); }

.glass-capsule {
  position: absolute;
  width: min(390px, 78vw);
  padding: 24px 28px;
  border: 1px solid rgba(216,247,255,0.42);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(216,247,255,0.16), rgba(16,46,110,0.54) 46%, rgba(2,8,23,0.68));
  box-shadow: inset 0 1px rgba(255,255,255,0.32), inset 0 -18px 28px rgba(115,247,255,0.04), 0 28px 84px rgba(0,3,10,0.5);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translate3d(0, 80px, 0) rotate(-2deg);
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(.2,.8,.12,1);
}
.glass-capsule::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 28px;
  border-top: 1px solid rgba(255,255,255,0.28);
  pointer-events: none;
}
.glass-capsule h3 { margin: 14px 0 8px; font-family: var(--display); font-size: 20px; font-weight: 400; letter-spacing: -0.03em; }
.glass-capsule p { margin: 0; line-height: 1.45; color: rgba(216,247,255,0.72); }
.capsule-one { left: 8vw; top: 31vh; }
.capsule-two { left: 35vw; top: 53vh; transition-delay: 160ms; }
.capsule-three { right: 8vw; top: 36vh; transition-delay: 320ms; }
.active-panel .glass-capsule { opacity: 1; transform: translate3d(0,0,0) rotate(0deg); }

.folded-map {
  position: absolute;
  left: 10vw;
  bottom: 8vh;
  display: flex;
  transform: perspective(600px) rotateX(58deg) rotateZ(-13deg);
  opacity: 0.55;
}
.folded-map span {
  width: 96px;
  height: 132px;
  border: 1px solid rgba(115,247,255,0.22);
  background: linear-gradient(135deg, rgba(216,247,255,0.11), rgba(176,140,255,0.05));
  box-shadow: 0 0 22px rgba(115,247,255,0.12);
}
.folded-map span:nth-child(2) { transform: rotateY(18deg); }
.folded-map span:nth-child(3) { transform: rotateY(-16deg); }

.commit-panel { display: grid; place-items: center; text-align: center; }
.commit-title { position: relative; max-width: 980px; }
.commit-core { position: relative; margin-top: 24vh; }

.compression-ray {
  position: absolute;
  top: 76px;
  width: min(28vw, 310px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,234,122,0.76), rgba(216,247,255,0.24));
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(255,234,122,0.35));
  transition: opacity 800ms ease 360ms, transform 1000ms cubic-bezier(.2,.8,.15,1) 360ms;
}
.ray-left { right: calc(50% + 96px); transform: translateX(-120px) scaleX(0.28); }
.ray-right { left: calc(50% + 96px); transform: translateX(120px) rotate(180deg) scaleX(0.28); }
.active-panel .ray-left { opacity: 1; transform: translateX(0) scaleX(1); }
.active-panel .ray-right { opacity: 1; transform: translateX(0) rotate(180deg) scaleX(1); }

.commit-seal {
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 1px solid rgba(255,234,122,0.74);
  background: radial-gradient(circle, rgba(255,234,122,0.28), rgba(16,46,110,0.46) 42%, rgba(2,8,23,0.68));
  box-shadow: 0 0 34px rgba(255,234,122,0.38), inset 0 1px rgba(255,255,255,0.3);
  transform: scale(0.74);
  opacity: 0;
  transition: transform 1000ms cubic-bezier(.2,.9,.15,1), opacity 800ms ease;
}
.active-panel .commit-seal { transform: scale(1); opacity: 1; }
.seal-orbit { position: absolute; inset: 20px; border: 1px solid rgba(216,247,255,0.28); border-radius: 50%; animation: orbitSpin 7s linear infinite; }
.seal-orbit::before { content: ""; position: absolute; width: 9px; height: 9px; top: -5px; left: 50%; background: var(--gold); border-radius: 50%; box-shadow: 0 0 15px var(--gold); }
.seal-mark { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); color: var(--gold); font-size: 36px; letter-spacing: -0.05em; }
.final-code { color: var(--gold); }

.mission-command {
  position: relative;
  margin-top: 34px;
  padding: 15px 28px;
  border: 1px solid rgba(216,247,255,0.58);
  border-radius: 999px;
  color: var(--chrome);
  background: linear-gradient(135deg, rgba(216,247,255,0.22), rgba(16,46,110,0.72) 48%, rgba(2,8,23,0.9));
  box-shadow: inset 0 1px rgba(255,255,255,0.34), 0 0 28px rgba(115,247,255,0.16);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.mission-command:hover, .mission-command.command-active { transform: translateY(-2px); box-shadow: inset 0 1px rgba(255,255,255,0.42), 0 0 36px rgba(255,234,122,0.28); }
.vanish-copy { max-width: 430px; margin: 18px auto 0; color: rgba(216,247,255,0.7); line-height: 1.45; }

.mission-panel:not(.active-panel) .viewport-title,
.mission-panel:not(.active-panel) .edge-order,
.mission-panel:not(.active-panel) .panel-label {
  opacity: 0.52;
}

@keyframes auroraShear {
  from { transform: translate3d(-4vw, -2vh, 0) rotate(-8deg) scaleX(1); }
  to { transform: translate3d(7vw, 3vh, 0) rotate(-3deg) scaleX(1.08); }
}
@keyframes auroraShearTwo {
  from { transform: translate3d(5vw, 0, 0) rotate(10deg) scaleX(1.1); }
  to { transform: translate3d(-6vw, -4vh, 0) rotate(5deg) scaleX(0.96); }
}
@keyframes chromeGleam {
  0%, 45% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  55% { opacity: 0.65; }
  72%, 100% { transform: translateX(120%) skewX(-18deg); opacity: 0; }
}
@keyframes waypointPulse {
  0%, 100% { transform: scale(1); opacity: 0.86; }
  50% { transform: scale(1.14); opacity: 1; }
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .device-nav { left: 14px; right: 14px; top: 14px; min-width: 0; }
  .nav-code { min-width: 118px; }
  .mission-panel { padding-top: 96px; }
  .upper-right, .lower-left { left: 24px; right: 24px; top: auto; bottom: 7vh; }
  .primary-waypoint { right: 13vw; top: 28vh; }
  .compass-shard { width: 100px; height: 100px; }
  .side-title { text-align: left; left: 24px; right: 24px; top: 16vh; }
  .capsule-one { left: 7vw; top: 34vh; }
  .capsule-two { left: 14vw; top: 52vh; }
  .capsule-three { left: 21vw; right: auto; top: 70vh; }
  .glass-capsule { padding: 18px 20px; }
  .obstacle-b { right: 8vw; }
  .constellation-line { display: none; }
  .compression-ray { width: 22vw; }
}