:root {
  /* Design font tokens: Space Mono” IBM Plex Mono” JetBrains Mono” */
  --abyss: #210014;
  --merlot: #4B0824;
  --cherry: #12000B;
  --chrome: #D9E6F2;
  --blush: #F7D6E6;
  --sprout: #B9F271;
  --violet: #8B5CF6;
  --display: "Space Mono", monospace;
  --body: "IBM Plex Mono", monospace;
  --accent: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(139, 92, 246, .32), transparent 26rem),
    radial-gradient(circle at 90% 34%, rgba(247, 214, 230, .14), transparent 22rem),
    linear-gradient(120deg, rgba(185, 242, 113, .05), transparent 40%, rgba(217, 230, 242, .04));
  mix-blend-mode: screen;
  z-index: 2;
}

.scanline-field {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .32;
  background-image: repeating-linear-gradient(to bottom, rgba(217, 230, 242, .09) 0 1px, transparent 1px 6px);
}

.quest-nav {
  position: fixed;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: .35rem;
  padding: .35rem;
  border: 1px solid rgba(217, 230, 242, .28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(18, 0, 11, .62), rgba(75, 8, 36, .5));
  box-shadow: inset 0 0 16px rgba(247, 214, 230, .12), 0 0 34px rgba(139, 92, 246, .18);
  backdrop-filter: blur(14px);
}

.quest-nav a {
  color: var(--chrome);
  text-decoration: none;
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .45rem .8rem;
  border-radius: 999px;
  transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}

.quest-nav a:hover,
.quest-nav a.is-active {
  color: var(--cherry);
  background: var(--sprout);
  box-shadow: 0 0 16px rgba(185, 242, 113, .55);
}

.fixed-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 12;
  background: linear-gradient(to bottom, transparent, var(--chrome), var(--sprout), transparent);
  opacity: .56;
}

.rail-left { left: 2.2rem; }
.rail-right { right: 2.2rem; }

.fixed-rail span {
  position: absolute;
  left: -.27rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--cherry);
  border: 1px solid var(--sprout);
  box-shadow: 0 0 18px rgba(185, 242, 113, .5);
}
.fixed-rail span:nth-child(1) { top: 14vh; }
.fixed-rail span:nth-child(2) { top: 38vh; }
.fixed-rail span:nth-child(3) { top: 62vh; }
.fixed-rail span:nth-child(4) { top: 86vh; }

.chapter {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: 7rem 6vw;
  background:
    radial-gradient(circle at 50% 50%, rgba(75, 8, 36, .86), transparent 35rem),
    linear-gradient(135deg, var(--abyss), var(--cherry) 72%);
}

.chapter::before {
  content: attr(data-chapter);
  position: absolute;
  right: 6vw;
  top: 12vh;
  font-family: var(--accent);
  font-size: clamp(5rem, 15vw, 16rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(217, 230, 242, .12);
  text-shadow: 0 0 40px rgba(139, 92, 246, .16);
  z-index: -1;
}

.chapter::after {
  content: "";
  position: absolute;
  inset: -15%;
  background:
    linear-gradient(116deg, transparent 42%, rgba(217, 230, 242, .06) 42.2%, transparent 43%),
    linear-gradient(294deg, transparent 58%, rgba(247, 214, 230, .06) 58.2%, transparent 59%);
  z-index: -1;
}

.chapter-origin { background: radial-gradient(circle at 48% 42%, rgba(75, 8, 36, .95), transparent 32rem), linear-gradient(160deg, var(--cherry), var(--abyss)); }
.chapter-map { background: radial-gradient(circle at 22% 78%, rgba(139, 92, 246, .2), transparent 28rem), linear-gradient(145deg, var(--abyss), var(--merlot) 48%, var(--cherry)); }
.chapter-bloom { background: radial-gradient(circle at 74% 44%, rgba(185, 242, 113, .14), transparent 25rem), linear-gradient(120deg, var(--cherry), var(--abyss) 52%, var(--merlot)); }
.chapter-ascend { background: radial-gradient(ellipse at 50% 82%, rgba(217, 230, 242, .24), transparent 25rem), linear-gradient(180deg, var(--cherry), var(--abyss) 58%, var(--merlot)); }

.command-plaque,
.interface-ledger,
.corner-note,
.coordinate-strip,
.final-code {
  border: 1px solid rgba(217, 230, 242, .25);
  background: linear-gradient(135deg, rgba(75, 8, 36, .68), rgba(18, 0, 11, .54));
  box-shadow: inset 0 1px rgba(247, 214, 230, .22), inset 0 -16px 34px rgba(18, 0, 11, .35), 0 24px 90px rgba(18, 0, 11, .42);
  backdrop-filter: blur(18px);
}

.command-plaque {
  position: absolute;
  max-width: 42rem;
  padding: clamp(1.35rem, 3vw, 2.7rem);
  border-radius: 2rem;
  clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 2rem 100%, 0 calc(100% - 2rem));
}
.lower-left { left: 7vw; bottom: 8vh; }
.upper-left { left: 7vw; top: 18vh; }
.lower-right { right: 7vw; bottom: 9vh; }

.capsule {
  display: inline-flex;
  margin: 0 0 1rem;
  padding: .35rem .7rem;
  border: 1px solid rgba(185, 242, 113, .45);
  border-radius: 999px;
  color: var(--sprout);
  font-family: var(--accent);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.075em;
  line-height: .92;
  color: var(--blush);
  text-shadow: 1px 0 var(--chrome), 0 0 24px rgba(247, 214, 230, .22);
}
h1 { font-size: clamp(3.2rem, 8vw, 8.9rem); }
h2 { font-size: clamp(2.2rem, 5.4vw, 6.4rem); }
p { font-weight: 300; line-height: 1.8; color: rgba(217, 230, 242, .84); }

.corner-note {
  position: absolute;
  right: 8vw;
  top: 28vh;
  border-radius: 999px;
  padding: .8rem 1rem;
  font-family: var(--display);
  color: var(--sprout);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .72rem;
}

.orbital-rings {
  position: absolute;
  width: min(62vw, 46rem);
  aspect-ratio: 1;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-18deg);
  border: 1px dotted rgba(217, 230, 242, .28);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(139, 92, 246, .04), inset 0 0 42px rgba(139, 92, 246, .2);
  animation: orbitTurn 16s linear infinite;
}
.orbital-rings::before,
.orbital-rings::after {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 1px dotted rgba(185, 242, 113, .26);
}
.orbital-rings::after { inset: 29%; border-color: rgba(247, 214, 230, .22); }

.origin-sigil {
  position: absolute;
  left: 50%;
  top: 42%;
  width: clamp(10rem, 22vw, 19rem);
  aspect-ratio: 1;
  translate: -50% -50%;
}
.sigil-core,
.sigil-gate,
.sigil-step {
  position: absolute;
  inset: 16%;
  border-radius: 38% 62% 48% 52%;
  background: radial-gradient(circle at 34% 22%, var(--chrome), var(--blush) 16%, var(--violet) 42%, var(--merlot) 70%);
  box-shadow: inset 10px 10px 18px rgba(217, 230, 242, .35), inset -14px -18px 22px rgba(18, 0, 11, .48), 0 0 70px rgba(139, 92, 246, .48);
}
.sigil-gate { inset: 28%; border-radius: .7rem; transform: rotate(45deg) skew(-8deg, -8deg); background: linear-gradient(135deg, var(--chrome), var(--violet) 52%, var(--cherry)); }
.sigil-step { inset: auto 28% 12% 28%; height: 16%; border-radius: 50%; background: var(--sprout); filter: blur(8px); opacity: .82; }

.vine {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke: var(--sprout);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(185, 242, 113, .48));
}
.vine path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawVine 2.6s ease forwards, pulseVine 3.8s ease-in-out infinite 2.6s; }
.vine-origin { width: 42rem; right: 5vw; bottom: 11vh; opacity: .72; }
.vine-bloom { width: min(88vw, 70rem); left: 4vw; top: 11vh; opacity: .82; }

.tilted-path {
  position: absolute;
  inset: 8vh 5vw;
  transform: rotate(-12deg) skewX(-9deg);
}
.path-line {
  position: absolute;
  left: 10%;
  right: 6%;
  top: 54%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--sprout), var(--chrome), var(--violet), transparent);
  box-shadow: 0 0 26px rgba(185, 242, 113, .36);
}

.iso-icon {
  position: absolute;
  width: clamp(5.8rem, 10vw, 9.5rem);
  height: clamp(5.8rem, 10vw, 9.5rem);
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, 1.45, .42, 1), filter .25s ease;
}
.iso-icon span {
  position: absolute;
  inset: 16%;
  transform: rotate(45deg) skew(-12deg, -12deg);
  border-radius: 16%;
  background: linear-gradient(135deg, var(--chrome), var(--blush) 18%, var(--violet) 50%, var(--merlot) 80%);
  box-shadow: inset 8px 7px 8px rgba(255,255,255,.24), inset -14px -10px 18px rgba(18,0,11,.48), 16px 18px 0 rgba(18,0,11,.42), 0 0 28px rgba(139, 92, 246, .38);
}
.iso-icon span::before,
.iso-icon span::after {
  content: "";
  position: absolute;
  background: var(--sprout);
  box-shadow: 0 0 16px rgba(185, 242, 113, .8);
}
.iso-icon span::before { width: 42%; height: 10%; left: 29%; top: 45%; border-radius: 999px; }
.iso-icon span::after { width: 10%; height: 42%; left: 45%; top: 29%; border-radius: 999px; }
.iso-icon em {
  position: absolute;
  left: 50%;
  top: 105%;
  transform: translateX(-50%) skewX(9deg) rotate(12deg);
  white-space: nowrap;
  font-family: var(--accent);
  color: var(--chrome);
  font-size: .68rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.iso-icon:hover { transform: rotate(3deg) translateY(-8px) scale(1.04); filter: drop-shadow(0 0 16px rgba(247, 214, 230, .48)); }
.chrome-seed { left: 9%; top: 52%; }
.floating-gate { left: 28%; top: 34%; }
.faceted-compass { left: 48%; top: 55%; }
.leaf-key { left: 66%; top: 28%; }
.step-pedestal { left: 82%; top: 46%; }
.floating-gate span { border-radius: 6%; background: linear-gradient(135deg, var(--chrome), var(--violet), var(--cherry)); }
.faceted-compass span { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.leaf-key span::before { transform: rotate(45deg); background: var(--blush); }
.step-pedestal span { border-radius: 8% 8% 22% 22%; background: linear-gradient(180deg, var(--chrome), var(--merlot) 52%, var(--cherry)); }

.coordinate-strip {
  position: absolute;
  right: 7vw;
  bottom: 14vh;
  display: flex;
  gap: 1rem;
  padding: .9rem 1rem;
  border-radius: 999px;
  font-family: var(--accent);
  font-size: .76rem;
  color: var(--sprout);
}

.interface-ledger {
  position: absolute;
  left: 8vw;
  bottom: 11vh;
  max-width: 48rem;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  border-radius: 2.4rem;
}
.interface-ledger ul { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .85rem; }
.interface-ledger li { color: rgba(217, 230, 242, .86); font-weight: 300; }
.interface-ledger li span {
  display: inline-block;
  width: .8rem;
  height: .42rem;
  margin-right: .65rem;
  border-radius: 100% 0 100% 0;
  background: var(--sprout);
  box-shadow: 0 0 14px rgba(185, 242, 113, .7);
}

.botanical-emblem {
  position: absolute;
  right: 8vw;
  top: 19vh;
  width: min(40vw, 28rem);
  aspect-ratio: 1;
  opacity: .36;
  background:
    radial-gradient(ellipse at 50% 0, transparent 42%, rgba(247, 214, 230, .26) 43% 45%, transparent 46%),
    conic-gradient(from 30deg, transparent 0 8%, rgba(185, 242, 113, .32) 8% 10%, transparent 10% 18%, rgba(217, 230, 242, .22) 18% 20%, transparent 20% 100%);
  border-radius: 50%;
  filter: blur(.2px) drop-shadow(0 0 30px rgba(185, 242, 113, .24));
  animation: slowFloat 8s ease-in-out infinite;
}

.text-fragments { position: absolute; right: 8vw; bottom: 16vh; display: grid; gap: .6rem; }
.text-fragments span {
  padding: .5rem .8rem;
  border-radius: 999px;
  background: rgba(18,0,11,.52);
  border: 1px solid rgba(217,230,242,.2);
  color: var(--blush);
  font-family: var(--display);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.chrome-horizon {
  position: absolute;
  left: -5vw;
  right: -5vw;
  bottom: 26vh;
  height: 18vh;
  transform: perspective(700px) rotateX(68deg);
  background: repeating-linear-gradient(90deg, rgba(217,230,242,.22) 0 1px, transparent 1px 7vw), repeating-linear-gradient(0deg, rgba(185,242,113,.18) 0 1px, transparent 1px 2rem);
  box-shadow: 0 -22px 40px rgba(217,230,242,.12);
}
.portal-open {
  position: absolute;
  left: 50%;
  top: 33%;
  width: min(52vw, 33rem);
  aspect-ratio: .78;
  transform: translate(-50%, -50%);
}
.portal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 42% 42%;
  border: 2px solid rgba(217,230,242,.72);
  box-shadow: inset 0 0 44px rgba(139,92,246,.42), 0 0 80px rgba(247,214,230,.22);
}
.portal-light {
  position: absolute;
  inset: 18%;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 50% 25%, var(--chrome), rgba(247,214,230,.62) 18%, rgba(139,92,246,.32) 46%, transparent 70%);
  filter: blur(6px);
  animation: portalPulse 3s ease-in-out infinite;
}
.begin-link {
  display: inline-flex;
  margin-top: .7rem;
  color: var(--cherry);
  background: var(--sprout);
  text-decoration: none;
  border-radius: 999px;
  padding: .7rem 1rem;
  font-family: var(--accent);
  text-transform: uppercase;
  letter-spacing: .1em;
  box-shadow: 0 0 20px rgba(185, 242, 113, .45);
}
.final-code {
  position: absolute;
  left: 7vw;
  top: 22vh;
  padding: .8rem 1rem;
  border-radius: 999px;
  font-family: var(--accent);
  color: var(--sprout);
}

.reveal-fragment { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, 1.45, .42, 1); }
.chapter.is-visible .reveal-fragment { opacity: 1; transform: translateY(0); }
.bounce-relic { opacity: 0; animation: none; }
.chapter.is-visible .bounce-relic { animation: bounceEnter .9s cubic-bezier(.18, 1.5, .35, 1) forwards; }
.chapter.is-visible .bounce-relic:nth-child(2) { animation-delay: .08s; }
.chapter.is-visible .bounce-relic:nth-child(3) { animation-delay: .16s; }
.chapter.is-visible .bounce-relic:nth-child(4) { animation-delay: .24s; }
.chapter.is-visible .bounce-relic:nth-child(5) { animation-delay: .32s; }

.spark {
  position: fixed;
  width: 5px;
  height: 5px;
  z-index: 30;
  pointer-events: none;
  background: var(--blush);
  box-shadow: 0 0 10px var(--sprout);
  animation: sparkOut .72s ease forwards;
}

@keyframes bounceEnter {
  0% { opacity: 0; transform: translateY(-36px) scale(.82); }
  62% { opacity: 1; transform: translateY(9px) scale(1.04); }
  82% { transform: translateY(-4px) scale(.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes drawVine { to { stroke-dashoffset: 0; } }
@keyframes pulseVine { 0%, 100% { opacity: .54; } 50% { opacity: 1; } }
@keyframes orbitTurn { to { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(342deg); } }
@keyframes slowFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-18px) rotate(4deg); } }
@keyframes portalPulse { 0%, 100% { opacity: .52; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.04); } }
@keyframes sparkOut { to { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.2) rotate(180deg); } }

@media (max-width: 820px) {
  .quest-nav { top: .7rem; width: calc(100% - 1.4rem); justify-content: center; }
  .quest-nav a { padding: .4rem .45rem; font-size: .58rem; }
  .rail-left { left: .8rem; }
  .rail-right { right: .8rem; }
  .chapter { padding: 6rem 1.6rem; }
  .command-plaque, .interface-ledger { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-top: 48vh; }
  .origin-sigil { top: 32%; }
  .tilted-path { inset: 10vh 0; transform: rotate(-10deg) scale(.8); }
  .coordinate-strip, .text-fragments, .corner-note, .final-code { display: none; }
  .botanical-emblem { width: 72vw; right: -12vw; }
  h1 { font-size: clamp(2.8rem, 15vw, 5.5rem); }
}