:root {
  /* Typography compliance tokens: Space Grotesk** for tiny coordinate labels. */
  --cream-paper: #FFF1C9;
  --night-meadow: #101915;
  --pollen-neon: #D7FF2F;
  --raspberry-signal: #FF3E9E;
  --sky-cyan: #37F4FF;
  --lavender-bloom: #B982FF;
  --chlorophyll-ink: #2F6B45;
  --glass: rgba(255, 241, 201, 0.105);
  --glass-strong: rgba(255, 241, 201, 0.18);
  --shadow: rgba(0, 0, 0, 0.42);
  --stage: 0;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--night-meadow);
}

body {
  margin: 0;
  color: var(--cream-paper);
  font-family: "Nunito Sans", Inter, ui-rounded, system-ui, sans-serif;
  overflow-x: hidden;
  background: var(--night-meadow);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -5;
  background:
    radial-gradient(circle at 19% 18%, rgba(55, 244, 255, 0.13), transparent 24rem),
    radial-gradient(circle at 83% 24%, rgba(185, 130, 255, 0.16), transparent 23rem),
    radial-gradient(circle at 53% 88%, rgba(47, 107, 69, 0.75), transparent 28rem),
    linear-gradient(180deg, #101915 0%, #10221a 52%, #17251a 100%);
}

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

.moon {
  position: absolute;
  top: 6vh;
  right: 11vw;
  width: 8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 32%, #FFF1C9, rgba(255, 241, 201, 0.22) 62%, transparent 68%);
  filter: blur(0.2px) drop-shadow(0 0 36px rgba(255, 241, 201, 0.28));
  opacity: 0.54;
}

.greenhouse {
  position: absolute;
  border: 1px solid rgba(55, 244, 255, 0.24);
  background:
    repeating-linear-gradient(90deg, transparent 0 55px, rgba(55, 244, 255, 0.16) 56px 58px),
    repeating-linear-gradient(0deg, transparent 0 64px, rgba(255, 241, 201, 0.08) 65px 66px);
  transform: rotate(-7deg) skewX(-9deg);
  box-shadow: 0 0 42px rgba(55, 244, 255, 0.08) inset;
}

.panes-a { width: 38vw; height: 24vh; left: -8vw; top: 12vh; opacity: 0.38; }
.panes-b { width: 44vw; height: 28vh; right: -12vw; bottom: 14vh; opacity: 0.28; transform: rotate(9deg) skewX(8deg); }

.grass {
  position: absolute;
  inset-inline: -5vw;
  bottom: -2vh;
  height: 34vh;
  background:
    repeating-linear-gradient(78deg, transparent 0 22px, rgba(215, 255, 47, 0.2) 23px 25px, transparent 26px 48px),
    repeating-linear-gradient(104deg, transparent 0 18px, rgba(47, 107, 69, 0.72) 19px 22px, transparent 23px 44px),
    linear-gradient(0deg, #101915 12%, rgba(16, 25, 21, 0));
  transform-origin: bottom;
}

.grass-back { opacity: 0.48; filter: blur(2px); transform: scaleY(0.8); bottom: 6vh; }
.grass-front { opacity: 0.9; }

.firefly-field span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pollen-neon);
  box-shadow: 0 0 16px var(--pollen-neon), 0 0 30px var(--lavender-bloom);
  opacity: var(--o, 0.7);
  left: var(--x);
  top: var(--y);
  animation: firefly 5s ease-in-out infinite alternate;
  animation-delay: var(--d);
}

.cursor-pollen {
  position: fixed;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #D7FF2F 0 20%, rgba(215, 255, 47, 0.5) 40%, transparent 70%);
  box-shadow: 0 0 28px #D7FF2F, 0 0 42px #37F4FF;
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.quest { position: relative; z-index: 1; }
.compliance-token { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.lesson {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem);
}

.lesson::after {
  content: "";
  position: absolute;
  inset: 10vh 8vw;
  border: 1px dashed rgba(55, 244, 255, 0.13);
  border-radius: 48% 52% 45% 55%;
  pointer-events: none;
  transform: rotate(calc((var(--stage) - 2) * 2deg));
}

.hero { grid-template-columns: minmax(20rem, 1fr) minmax(18rem, 0.62fr); gap: 3vw; }

.hud-compass {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(72vmin, 42rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(calc(var(--stage) * 9deg)) scale(calc(1 - var(--stage) * 0.025));
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: calc(1 - var(--stage) * 0.12);
  transition: transform 450ms ease, opacity 450ms ease;
  background: radial-gradient(circle, rgba(55,244,255,0.08) 0 33%, transparent 34% 100%);
  box-shadow: 0 0 65px rgba(55, 244, 255, 0.13) inset;
}

.ring { position: absolute; border: 1px solid rgba(55, 244, 255, 0.72); border-radius: 50%; inset: 0; }
.ring-inner { inset: 18%; border-style: dashed; border-color: rgba(185, 130, 255, 0.7); animation: driftRing 10s linear infinite reverse; }
.ring-outer { animation: driftRing 15s linear infinite; }
.scan-line { position: absolute; left: 50%; top: 2%; width: 2px; height: 48%; background: linear-gradient(#37F4FF, transparent); transform-origin: bottom; animation: scan 6s linear infinite; }

.coordinate {
  position: absolute;
  font: 700 0.72rem/1 "Space Grotesk", ui-monospace, monospace;
  letter-spacing: 0.16em;
  color: var(--sky-cyan);
  text-shadow: 0 0 14px #37F4FF;
}
.north { left: 50%; top: -1.1rem; transform: translateX(-50%); }
.east { right: -2.5rem; top: 50%; transform: rotate(90deg); }

.vine-stage { position: relative; width: min(760px, 94vw); z-index: 3; filter: drop-shadow(0 34px 60px rgba(0,0,0,0.35)); }
.unbinding-vine { width: 100%; overflow: visible; }
.route, .vine-loop { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-shadow { stroke: rgba(255, 241, 201, 0.11); stroke-width: 32; }
.route-main { stroke: url(#none); stroke: var(--pollen-neon); stroke-width: 5; stroke-dasharray: 850; stroke-dashoffset: calc(850 - (var(--stage) * 170)); filter: url(#glow); transition: stroke-dashoffset 600ms ease; }
.vine-loop { stroke: var(--chlorophyll-ink); stroke-width: 13; transition: transform 900ms ease, opacity 600ms ease, stroke 500ms ease; }
.loop-a { transform-origin: 230px 220px; }
.loop-b { transform-origin: 358px 270px; }
.loop-c { transform-origin: 528px 180px; }
body.stage-2 .loop-a, body.stage-3 .loop-a, body.stage-4 .loop-a { transform: rotate(-14deg) translate(-18px, 10px); stroke: #D7FF2F; opacity: 0.72; }
body.stage-3 .loop-b, body.stage-4 .loop-b { transform: rotate(16deg) translate(12px, -18px); stroke: #37F4FF; opacity: 0.62; }
body.stage-4 .loop-c { transform: rotate(28deg) translate(24px, -36px); stroke: #B982FF; opacity: 0.38; }
.leaves path { fill: rgba(47, 107, 69, 0.98); stroke: #FFF1C9; stroke-width: 2; }
.botanical-dots circle { fill: var(--pollen-neon); filter: url(#glow); }

.node {
  position: absolute;
  border: 1px solid rgba(55, 244, 255, 0.7);
  border-radius: 999px;
  background: rgba(16, 25, 21, 0.72);
  color: var(--cream-paper);
  font: 700 0.82rem/1 "Space Grotesk", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.65rem 0.9rem;
  box-shadow: 0 0 22px rgba(55, 244, 255, 0.18);
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.node span {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.45rem);
  width: 13rem;
  transform: translateX(-50%) translateY(0.4rem);
  opacity: 0;
  padding: 0.6rem;
  color: var(--night-meadow);
  background: var(--cream-paper);
  border-radius: 0.75rem;
  font: 700 0.78rem/1.25 "Nunito Sans", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.node:hover, .node.focused { transform: translateY(-8px) scale(1.04); border-color: var(--pollen-neon); box-shadow: 0 0 30px rgba(215, 255, 47, 0.36), 0 16px 36px var(--shadow); }
.node:hover span, .node.focused span { opacity: 1; transform: translateX(-50%) translateY(0); }
.habit { left: 19%; top: 39%; }
.permission { left: 38%; top: 65%; }
.loop { left: 48%; top: 33%; }
.choice { right: 18%; top: 45%; }
.exit { right: 9%; top: 14%; }

.specimen {
  position: relative;
  border: 1px solid rgba(255, 241, 201, 0.24);
  border-radius: 2rem;
  background: linear-gradient(135deg, rgba(255, 241, 201, 0.16), rgba(55, 244, 255, 0.065));
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 65px rgba(0, 0, 0, 0.28), inset 0 0 36px rgba(255, 241, 201, 0.05);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.specimen:hover { transform: translateY(-10px); border-color: rgba(215, 255, 47, 0.75); box-shadow: 0 0 34px rgba(215, 255, 47, 0.18), 0 28px 70px rgba(0,0,0,0.36); }
.prompt-panel, .field-station, .greenhouse-card, .moon-map, .final-note { padding: clamp(1.5rem, 4vw, 3rem); max-width: 42rem; }
.hero-panel { justify-self: start; }
.kicker { margin: 0 0 1rem; color: var(--sky-cyan); font: 700 0.78rem/1 "Space Grotesk", monospace; letter-spacing: 0.18em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { font: 900 clamp(2.3rem, 5vw, 5.8rem)/0.98 "Nunito Sans", sans-serif; letter-spacing: -0.06em; margin-bottom: 1rem; }
h2 { font: 900 clamp(2rem, 4vw, 4.5rem)/1 "Nunito Sans", sans-serif; letter-spacing: -0.055em; margin-bottom: 1rem; }
h2 span { font-family: "DynaPuff", "Nunito Sans", sans-serif; color: var(--pollen-neon); text-shadow: 0 0 20px rgba(215, 255, 47, 0.32); }
p { font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.55; color: rgba(255, 241, 201, 0.86); }

.lesson-named { grid-template-columns: minmax(18rem, 37rem) minmax(16rem, 26rem); gap: 5vw; }
.rename-row { display: grid; grid-template-columns: 1fr 3rem 1.2fr; align-items: center; gap: 0.7rem; margin: 0.9rem 0; font-size: 1.12rem; }
.rename-row b, .rename-row strong { padding: 0.75rem 1rem; border-radius: 1rem; }
.rename-row b { background: rgba(255, 62, 158, 0.16); color: #FFF1C9; text-decoration: line-through; text-decoration-color: #FF3E9E; }
.rename-row strong { background: rgba(215, 255, 47, 0.15); color: #D7FF2F; }
.rename-row i { height: 2px; background: linear-gradient(90deg, #FF3E9E, #D7FF2F); box-shadow: 0 0 15px #D7FF2F; }
.annotation-cloud { display: grid; gap: 1rem; transform: rotate(4deg); }
.callout { padding: 1.1rem 1.3rem; font: 700 1rem/1 "Space Grotesk", monospace; color: var(--cream-paper); }
.callout em { display: block; color: var(--pollen-neon); margin-top: 0.4rem; font-style: normal; }

.pane-grid { display: grid; grid-template-columns: repeat(2, minmax(8rem, 1fr)); gap: 0.8rem; margin: 1.4rem 0; }
.glass-pane, .stone {
  border: 1px solid rgba(55, 244, 255, 0.45);
  border-radius: 1.2rem;
  color: var(--cream-paper);
  background: rgba(55, 244, 255, 0.08);
  padding: 1rem;
  font: 800 0.9rem/1 "Space Grotesk", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.glass-pane:hover, .glass-pane.active, .stone:hover, .stone.active { transform: translateY(-7px); background: rgba(215, 255, 47, 0.14); box-shadow: 0 0 26px rgba(215, 255, 47, 0.24); border-color: #D7FF2F; }
.pane-note { min-height: 3.5rem; color: #D7FF2F; }

.orbit-map { position: relative; width: min(92vw, 36rem); height: 24rem; margin: 1rem auto; }
.route-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.arc { fill: none; stroke: rgba(55, 244, 255, 0.35); stroke-width: 3; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 650ms ease, stroke 300ms ease; }
.arc.draw { stroke-dashoffset: 0; stroke: #37F4FF; filter: drop-shadow(0 0 10px #37F4FF); }
.stone { position: absolute; border-radius: 50% 45% 55% 48%; min-width: 6.5rem; min-height: 5.8rem; background: rgba(47, 107, 69, 0.55); }
.stone:nth-of-type(1) { left: 0; bottom: 4rem; }
.stone:nth-of-type(2) { left: 38%; top: 0; }
.stone:nth-of-type(3) { right: 0; bottom: 4rem; }
.stone:nth-of-type(4) { left: 39%; bottom: 0; }

.gate-illustration { position: relative; width: min(33rem, 76vw); height: 24rem; }
.gate-post { position: absolute; bottom: 0; width: 1.4rem; height: 20rem; border-radius: 1rem; background: linear-gradient(#FFF1C9, #2F6B45); box-shadow: 0 0 20px rgba(255,241,201,0.16); }
.gate-post.left { left: 26%; } .gate-post.right { right: 26%; }
.gate-door { position: absolute; left: 28%; bottom: 4rem; width: 21rem; height: 12rem; border: 0.8rem solid #2F6B45; border-left-width: 1rem; transform-origin: left center; transform: perspective(600px) rotateY(-48deg); box-shadow: 0 0 34px rgba(215,255,47,0.18); }
.trellis-vine { position: absolute; inset: 3rem 18% 1rem; border: 3px dashed #D7FF2F; border-radius: 55% 45% 52% 48%; filter: drop-shadow(0 0 12px #D7FF2F); }
.final-note { text-align: center; }
.final-note h2 { font-size: clamp(3rem, 8vw, 8rem); }
.final-note strong { color: #37F4FF; font-family: "Space Grotesk", monospace; }

.progress-pips { position: fixed; right: 1.2rem; top: 50%; transform: translateY(-50%); display: grid; gap: 0.85rem; z-index: 6; }
.pip { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: rgba(255, 241, 201, 0.32); border: 1px solid rgba(255,241,201,0.5); transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease; }
.pip.active { background: #D7FF2F; transform: scale(1.45); box-shadow: 0 0 20px #D7FF2F; }

@keyframes scan { to { transform: rotate(360deg); } }
@keyframes driftRing { to { transform: rotate(360deg); } }
@keyframes firefly { 0% { transform: translate(0, 0) scale(0.7); } 100% { transform: translate(24px, -34px) scale(1.2); } }

@media (max-width: 860px) {
  .hero, .lesson-named { grid-template-columns: 1fr; }
  .hero-panel { justify-self: center; }
  .hud-compass { width: 88vmin; opacity: 0.55; }
  .node { font-size: 0.68rem; padding: 0.5rem 0.6rem; }
  .progress-pips { right: 0.55rem; }
  .lesson { padding-inline: 1.1rem; }
}