:root {
  /* Typography compliance note: Inter* Inter** from Google Fonts; oversized wordmark cropped across the scene. */
  --violet: #5B35FF;
  --orchid: #FF4FD8;
  --asphalt: #101014;
  --cyan: #34E7FF;
  --citrus: #FFE44D;
  --leaf: #7CFF6B;
  --pearl: #F8F4E8;
  --spine: 184px;
}

@keyframes questGlow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(124,255,107,.28)); }
  50% { filter: drop-shadow(0 0 24px rgba(52,231,255,.42)); }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--asphalt);
  color: var(--pearl);
  font-family: Inter, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

.quest-spine {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--spine);
  z-index: 50;
  padding: 28px 18px;
  background:
    linear-gradient(110deg, rgba(248,244,232,.08), transparent 32%),
    radial-gradient(circle at 70% 18%, rgba(124,255,107,.22), transparent 28%),
    linear-gradient(180deg, rgba(91,53,255,.55), rgba(16,16,20,.96) 32%, rgba(16,16,20,.98));
  border-right: 1px solid rgba(248,244,232,.18);
  box-shadow: 14px 0 46px rgba(0,0,0,.45), inset -1px 0 0 rgba(52,231,255,.25);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.spine-sheen {
  position: absolute;
  inset: 12px 12px;
  border: 1px solid rgba(248,244,232,.12);
  border-radius: 26px;
  pointer-events: none;
  box-shadow: inset 0 0 24px rgba(52,231,255,.08);
}

.wordmark-mini {
  position: relative;
  z-index: 1;
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.06em;
  color: var(--pearl);
  text-transform: lowercase;
}

.coordinate, .route-text, .route-code, .chapter-label, .spine-footer {
  font-family: "Noto Sans", Inter, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
}

.coordinate { color: var(--cyan); opacity: .82; }

.route {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 21px;
  margin-top: auto;
  margin-bottom: auto;
}

.route::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(var(--leaf), var(--cyan), var(--orchid), var(--citrus));
  opacity: .5;
}

.route-stop {
  color: rgba(248,244,232,.48);
  text-decoration: none;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  transition: color .45s ease, transform .45s ease;
}

.bead {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--asphalt);
  border: 1px solid rgba(248,244,232,.25);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 rgba(124,255,107,0);
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.leaf-glyph {
  width: 13px;
  height: 18px;
  border-radius: 95% 0 95% 0;
  background: linear-gradient(135deg, var(--leaf), var(--citrus));
  transform: rotate(-28deg);
  transition: transform .45s ease;
}

.route-stop.active { color: var(--pearl); transform: translateX(3px); }
.route-stop.active .bead { transform: scale(1.22); border-color: var(--leaf); box-shadow: 0 0 22px rgba(124,255,107,.85), 0 0 42px rgba(52,231,255,.24); }
.route-stop.active .leaf-glyph { transform: rotate(-8deg) scale(1.08); }
.route-stop:hover .bead, .specimen-card:hover, .sticker:hover, .leaf-badge:hover { transform: scale(1.08); }

.spine-footer { color: rgba(248,244,232,.52); display: flex; justify-content: space-between; position: relative; z-index: 1; }
.spine-footer strong { color: var(--citrus); }

.quest-canvas { margin-left: var(--spine); }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 8vw 7vw;
  isolation: isolate;
}

.hero-scene {
  background:
    radial-gradient(circle at 78% 22%, rgba(255,79,216,.24), transparent 22%),
    radial-gradient(circle at 53% 74%, rgba(52,231,255,.18), transparent 27%),
    linear-gradient(145deg, var(--asphalt) 0%, #151124 58%, var(--asphalt) 100%);
}

.street-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(248,244,232,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(248,244,232,.04) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(90deg, black, transparent 90%);
  z-index: -3;
}

.hero-crop { position: relative; z-index: 2; max-width: 1100px; }
h1, h2 { margin: 0; font-family: Inter, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.09em; line-height: .78; }
h1 { font-size: clamp(82px, 17vw, 230px); max-width: 78vw; text-shadow: 0 0 34px rgba(52,231,255,.12); }
h2 { font-size: clamp(68px, 12vw, 168px); }
.chapter-label { color: var(--leaf); margin: 0 0 24px; }
.serif-caption { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(25px, 3.2vw, 52px); font-style: italic; color: var(--pearl); max-width: 670px; }

.leaf-shadow {
  position: absolute;
  width: 46vw;
  height: 62vw;
  border-radius: 90% 0 90% 0;
  background: linear-gradient(140deg, rgba(124,255,107,.4), rgba(255,228,77,.12), transparent 66%);
  filter: blur(1px);
  opacity: .55;
  mix-blend-mode: screen;
  z-index: -1;
  transform-origin: center;
}
.drift-one { right: 6vw; top: -10vw; transform: rotate(38deg); }
.drift-two { left: 16vw; bottom: -24vw; transform: rotate(212deg); background: linear-gradient(140deg, rgba(52,231,255,.28), rgba(255,79,216,.16), transparent 64%); }

.sticker-stack { position: absolute; right: 8vw; bottom: 9vw; display: grid; gap: 12px; transform: rotate(-4deg); }
.sticker { display: inline-block; padding: 12px 18px; border-radius: 999px; font: 800 12px/1 "Noto Sans", Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--asphalt); box-shadow: 0 12px 26px rgba(0,0,0,.32); transition: transform .38s ease; }
.sticker.orchid { background: var(--orchid); }
.sticker.cyan { background: var(--cyan); margin-left: 34px; }
.sticker.citrus { background: var(--citrus); margin-left: -14px; }

.leaf-badge { position: absolute; right: 15vw; top: 18vh; width: 132px; padding: 18px; border-radius: 34px; background: rgba(248,244,232,.08); border: 1px solid rgba(248,244,232,.18); backdrop-filter: blur(16px); transition: transform .38s ease; }
.leaf-badge path:first-child { fill: url(#none); fill: var(--leaf); }
.leaf-badge .vein { fill: none; stroke: var(--asphalt); stroke-width: 5; stroke-linecap: round; opacity: .55; }
.leaf-badge .small { stroke-width: 3; }

.puddle-scene { background: linear-gradient(122deg, #07080a 0%, var(--asphalt) 48%, #061e23 100%); }
.panel { position: relative; z-index: 2; max-width: 760px; }
.panel p:not(.chapter-label), .specimen-card p, .field-note { font-size: clamp(18px, 2.1vw, 30px); line-height: 1.25; color: rgba(248,244,232,.78); }
.wide-panel { margin-left: 4vw; padding-top: 5vh; }
.loupe { position: absolute; right: 9vw; bottom: 10vh; width: min(360px, 32vw); min-height: 390px; }
.specimen-card { padding: 28px; border: 1px solid rgba(248,244,232,.2); border-radius: 42px; background: linear-gradient(145deg, rgba(248,244,232,.12), rgba(248,244,232,.035)); box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(248,244,232,.18); backdrop-filter: blur(18px); transition: transform .42s ease, border-color .42s ease; }
.route-code { color: var(--cyan); }
.dew-orb { width: 220px; height: 220px; margin: 34px auto 24px; border-radius: 50%; background: radial-gradient(circle at 32% 24%, var(--pearl) 0 8%, var(--cyan) 11%, rgba(52,231,255,.45) 28%, rgba(255,79,216,.3) 52%, rgba(16,16,20,.45) 78%); box-shadow: 0 0 38px rgba(52,231,255,.55), inset -24px -28px 34px rgba(16,16,20,.36); }
.chrome-rail { position: absolute; left: 8vw; right: -8vw; bottom: 23vh; height: 24px; transform: rotate(-9deg); border-radius: 999px; background: linear-gradient(90deg, transparent, var(--pearl), var(--cyan), transparent); opacity: .34; }
.puddle-reflection { position: absolute; inset: auto 5vw 5vh 11vw; height: 34vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(52,231,255,.42), rgba(255,79,216,.2) 38%, transparent 70%); filter: blur(10px); }

.orchid-scene { background: radial-gradient(circle at 78% 50%, rgba(255,79,216,.34), transparent 28%), linear-gradient(90deg, #171019, var(--asphalt)); }
.vine-sign { width: min(560px, 44vw); margin-left: 5vw; margin-top: 10vh; }
.poster-wall { position: absolute; right: 6vw; top: 9vh; width: min(480px, 38vw); height: 76vh; border-radius: 18px; background: linear-gradient(180deg, rgba(255,79,216,.18), rgba(91,53,255,.32)), repeating-linear-gradient(0deg, rgba(248,244,232,.08) 0 2px, transparent 2px 38px); border: 1px solid rgba(248,244,232,.18); box-shadow: 0 28px 90px rgba(0,0,0,.42); }
.crop-mark { position: absolute; width: 40px; height: 40px; border-color: var(--pearl); opacity: .65; }
.top-left { left: 22px; top: 22px; border-left: 2px solid; border-top: 2px solid; }
.top-right { right: 22px; top: 22px; border-right: 2px solid; border-top: 2px solid; }
.bottom-left { left: 22px; bottom: 22px; border-left: 2px solid; border-bottom: 2px solid; }
.bottom-right { right: 22px; bottom: 22px; border-right: 2px solid; border-bottom: 2px solid; }
.petal { position: absolute; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, rgba(255,79,216,.9), rgba(52,231,255,.55)); box-shadow: 0 0 28px rgba(255,79,216,.45); transition: transform .45s ease; }
.petal-a { width: 190px; height: 270px; left: 18%; top: 16%; transform: rotate(24deg); }
.petal-b { width: 120px; height: 190px; right: 15%; top: 42%; transform: rotate(72deg); }
.petal-c { width: 88px; height: 140px; left: 36%; bottom: 12%; transform: rotate(-22deg); background: linear-gradient(135deg, var(--leaf), var(--citrus)); }
.poster-wall:hover .petal { transform: scale(1.08) rotate(36deg); }
.field-note { position: absolute; left: 12vw; bottom: 10vh; max-width: 430px; font-family: "DM Serif Display", Georgia, serif; font-style: italic; color: var(--orchid); }

.citrus-scene { background: linear-gradient(135deg, #0b0b08, var(--asphalt) 54%, #251f05); }
.gate-halo { position: absolute; right: 3vw; top: 8vh; width: 52vw; height: 82vh; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 48%, rgba(255,228,77,.62), rgba(124,255,107,.21) 36%, transparent 68%); filter: blur(2px); }
.asphalt-lane { position: absolute; inset: 0 22vw 0 auto; width: 24vw; background: linear-gradient(90deg, transparent, rgba(248,244,232,.055), transparent); transform: skewX(-15deg); }
.gate-panel { margin-top: 16vh; }
.sole-print { position: absolute; right: 10vw; bottom: 9vh; width: min(390px, 34vw); }
.print-lines { height: 230px; margin: 24px 0; border-radius: 45% 55% 42% 58%; background: repeating-linear-gradient(35deg, var(--leaf) 0 9px, transparent 9px 21px), radial-gradient(circle, rgba(255,228,77,.4), transparent 70%); filter: drop-shadow(0 0 18px rgba(124,255,107,.46)); }

.clearing-scene { display: grid; place-items: center; text-align: center; background: radial-gradient(circle at center, var(--pearl), #e7fff0 30%, rgba(52,231,255,.35) 54%, var(--asphalt) 100%); color: var(--asphalt); }
.final-aura { position: absolute; width: 36vw; height: 36vw; border-radius: 50%; background: radial-gradient(circle, rgba(124,255,107,.55), rgba(255,228,77,.38), rgba(255,79,216,.16), transparent 70%); transform: scale(.72); transition: transform 1.2s ease, opacity 1.2s ease; opacity: .55; }
.clearing-scene.complete .final-aura { transform: scale(1.38); opacity: 1; }
.constellation { position: absolute; left: 7vw; top: 16vh; display: grid; gap: 28px; }
.constellation span { width: 22px; height: 34px; border-radius: 90% 0 90% 0; background: linear-gradient(135deg, var(--leaf), var(--cyan), var(--orchid)); box-shadow: 0 0 24px rgba(124,255,107,.75); transform: rotate(-25deg); }
.clearing-copy { position: relative; z-index: 2; max-width: 900px; }
.clearing-copy .chapter-label { color: var(--violet); }
.clearing-copy .serif-caption { color: var(--asphalt); }

@media (max-width: 820px) {
  :root { --spine: 112px; }
  .quest-spine { padding: 18px 10px; }
  .route-text { display: none; }
  .route { align-items: center; }
  .route::before { left: 50%; }
  .scene { padding: 22vh 7vw 10vh; }
  .loupe, .sole-print, .poster-wall, .leaf-badge { position: relative; width: 100%; right: auto; top: auto; bottom: auto; margin-top: 32px; }
  .vine-sign { width: 100%; margin-left: 0; }
  .sticker-stack { position: relative; right: auto; bottom: auto; margin-top: 40px; }
}