:root {
  /* Typography compliance: Interface runes use Space Mono** in 400/700 weights for clipped “ctrl-z” whispers. */
  --bone: #F2E8C9;
  --lichen: #B8FF2C;
  --blue: #33E7FF;
  --rust: #C96A2B;
  --pink: #FF3FD8;
  --bog: #08110B;
  --moss: #172B18;
  --display: 'Unbounded', system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bog);
  color: var(--bone);
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--serif);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto auto 8vh -10vw;
  width: 44vw;
  height: 62vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 255, 44, .12), transparent 62%);
  pointer-events: none;
  filter: blur(26px);
  z-index: 0;
}

body::after {
  inset: 12vh -12vw auto auto;
  background: radial-gradient(circle, rgba(255, 63, 216, .09), transparent 60%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: .16;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 18% 23%, rgba(242,232,201,.22) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(115deg, transparent 0 10px, rgba(201,106,43,.08) 10px 11px);
  mix-blend-mode: screen;
}

#spore-field {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2;
}

.quest-trail {
  position: relative;
  z-index: 3;
  width: min(100%, 720px);
  margin: 0 auto;
}

.undo-cord {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(var(--moss), rgba(242,232,201,.16), var(--moss));
  box-shadow: 0 0 0 1px rgba(23,43,24,.8), 0 0 24px rgba(51,231,255,.08);
}

.undo-cord span {
  display: block;
  width: 100%;
  height: 0%;
  background: linear-gradient(var(--blue), var(--lichen), var(--pink), var(--lichen));
  box-shadow: 0 0 14px var(--lichen), 0 0 28px rgba(255,63,216,.45);
  transition: height .18s linear;
}

.glyph-rail {
  position: fixed;
  top: 50%;
  right: clamp(16px, 5vw, 72px);
  transform: translateY(-50%);
  display: grid;
  gap: 28px;
  z-index: 5;
}

.glyph {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242,232,201,.28);
  border-radius: 50%;
  color: rgba(242,232,201,.5);
  background: rgba(8,17,11,.72);
  font-family: var(--mono);
  font-size: 12px;
  transition: color .5s, border-color .5s, box-shadow .5s, transform .5s;
}

.glyph.active {
  color: var(--lichen);
  border-color: var(--lichen);
  box-shadow: 0 0 18px rgba(184,255,44,.6);
  transform: scale(1.16) rotate(-12deg);
}

.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 12vh 32px;
}

.scene::before {
  content: attr(data-glyph);
  position: absolute;
  top: 16vh;
  left: calc(50% - 310px);
  font-family: var(--mono);
  color: rgba(201,106,43,.55);
  letter-spacing: .25em;
  font-size: 10px;
  writing-mode: vertical-rl;
  text-transform: uppercase;
}

.scene-inner {
  width: min(100%, 430px);
  margin: 0 auto;
  position: relative;
  padding: 34px 28px;
  border: 1px solid rgba(242,232,201,.14);
  background: linear-gradient(145deg, rgba(23,43,24,.32), rgba(8,17,11,.72));
  box-shadow: inset 0 0 40px rgba(23,43,24,.62), 0 30px 100px rgba(0,0,0,.35);
}

.scene-mark .scene-inner { border-color: transparent; background: transparent; box-shadow: none; }
.offset-left { transform: translateX(-30px) rotate(-.7deg); }
.offset-right { transform: translateX(34px) rotate(.7deg); }

.rune {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .18em;
  color: var(--rust);
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.05em;
}

h1 {
  font-size: clamp(48px, 11vw, 84px);
  color: var(--bone);
  text-shadow: 0 0 12px rgba(242,232,201,.16), 0 0 34px rgba(51,231,255,.12);
}

h2 {
  font-size: clamp(46px, 10vw, 78px);
  color: transparent;
  -webkit-text-stroke: 1px var(--bone);
  text-shadow: 0 0 22px rgba(184,255,44,.24);
}

.poem {
  max-width: 34ch;
  margin: 24px 0 0;
  color: rgba(242,232,201,.88);
  font-size: clamp(20px, 3.5vw, 27px);
  line-height: 1.34;
  font-weight: 400;
}

.uncross {
  background-image: linear-gradient(90deg, var(--pink), var(--pink));
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 55%;
  transition: background-size 1.1s ease, color 1s ease;
}

.uncross.released { background-size: 0% 3px; color: var(--lichen); }

.found-tag {
  margin-top: 28px;
  padding: 11px 16px;
  border: 1px solid rgba(242,232,201,.48);
  border-radius: 999px 999px 999px 8px;
  background: rgba(242,232,201,.08);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(184,255,44,0);
  transition: border-color .35s, color .35s, box-shadow .35s, transform .35s;
}

.found-tag:hover, .found-tag.active {
  color: var(--bog);
  border-color: var(--lichen);
  background: var(--lichen);
  box-shadow: 0 0 24px rgba(184,255,44,.5);
  transform: translateY(-2px) rotate(-2deg);
}

.pink-tag:hover, .pink-tag.active { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 26px rgba(255,63,216,.55); }

.botanical {
  display: block;
  width: min(92vw, 360px);
  margin: 34px auto 0;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(51,231,255,.12));
}

.scene-mark .botanical {
  position: relative;
  margin-top: 54px;
  opacity: .95;
}

.botanical path,
.botanical ellipse {
  fill: none;
  stroke: var(--bone);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.draw-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.8s cubic-bezier(.18,.8,.22,1), stroke .8s;
}

.scene.in-view .draw-line { stroke-dashoffset: 0; }
.scene.in-view .newest { animation: curlBack 3.4s ease-in-out infinite; transform-origin: 92px 41px; }

.leaf { stroke: rgba(242,232,201,.72); }
.newest { stroke: var(--lichen); filter: drop-shadow(0 0 8px var(--lichen)); }
.root-line { stroke: var(--rust); }
.key-tooth { stroke: var(--bone); }
.crack { stroke: var(--pink); stroke-dasharray: 80; animation: mendKey 4s ease-in-out infinite; }

.stain, .seed, .erased-print {
  fill: rgba(201,106,43,.18) !important;
  stroke: rgba(201,106,43,.55) !important;
}

.scene.in-view .stain { animation: shrinkStain 3.5s ease-in-out infinite; transform-origin: 145px 160px; }
.seed { fill: rgba(184,255,44,.2) !important; stroke: var(--lichen) !important; filter: drop-shadow(0 0 10px rgba(184,255,44,.55)); }
.scene.in-view .seed-a { animation: rewindSeed 2.9s ease-in-out infinite; transform-origin: 112px 153px; }
.scene.in-view .seed-b { animation: rewindSeed 3.2s .2s ease-in-out infinite; transform-origin: 154px 207px; }
.scene.in-view .seed-c { animation: rewindSeed 3s .4s ease-in-out infinite; transform-origin: 122px 264px; }

.glow-dot { fill: var(--lichen); stroke: none !important; filter: drop-shadow(0 0 12px var(--lichen)); }
.glow-dot.pink { fill: var(--pink); filter: drop-shadow(0 0 12px var(--pink)); }
.glow-dot.blue { fill: var(--blue); filter: drop-shadow(0 0 12px var(--blue)); }

.skeleton-botany {
  position: absolute;
  left: 50%;
  bottom: 14%;
  width: 260px;
  height: 260px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  animation: skeletonAppear 4s ease forwards;
}

.skeleton-botany span {
  position: absolute;
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(51,231,255,.5), transparent);
  box-shadow: 0 0 18px rgba(51,231,255,.35);
  animation: shimmerTwig 1.4s linear infinite;
}

.skeleton-botany span:nth-child(1) { width: 190px; top: 86px; left: 36px; transform: rotate(74deg); }
.skeleton-botany span:nth-child(2) { width: 130px; top: 132px; left: 30px; transform: rotate(28deg); }
.skeleton-botany span:nth-child(3) { width: 144px; top: 172px; right: 20px; transform: rotate(-35deg); }

.snail-trail {
  width: 100%;
  height: 42px;
  margin-top: 26px;
  border-bottom: 2px dotted rgba(51,231,255,.65);
  filter: drop-shadow(0 0 8px var(--blue));
}

.snail {
  display: inline-block;
  color: var(--rust);
  font-size: 34px;
  animation: backwardSnail 7s linear infinite;
}

.sprout-stem, .sprout-leaf {
  stroke: var(--lichen) !important;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  filter: drop-shadow(0 0 10px rgba(184,255,44,.45));
}

.scene.in-view .sprout-stem,
.scene.in-view .sprout-leaf { animation: growSprout 2.2s ease forwards; }
.scene.in-view .sprout-leaf.left { animation-delay: .45s; }
.scene.in-view .sprout-leaf.right { animation-delay: .8s; }

.closing { margin-top: 18px; text-align: right; color: var(--blue); }

@keyframes shimmerTwig {
  0% { background-position: -160px 0; opacity: .28; }
  50% { opacity: 1; }
  100% { background-position: 160px 0; opacity: .28; }
}

@keyframes skeletonAppear {
  0%, 15% { opacity: 0; }
  25%, 62% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes curlBack {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-18deg) scale(.94); }
}

@keyframes shrinkStain {
  0%, 100% { transform: scale(1); opacity: 1; }
  48% { transform: scale(.72); opacity: .45; }
}

@keyframes mendKey {
  0%, 100% { stroke-dashoffset: 0; opacity: 1; }
  50% { stroke-dashoffset: 80; opacity: .08; }
}

@keyframes rewindSeed {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-10px,-18px) scale(.62); }
}

@keyframes backwardSnail {
  from { transform: translateX(96%) scaleX(-1); }
  to { transform: translateX(0) scaleX(-1); }
}

@keyframes growSprout { to { stroke-dashoffset: 0; } }

@media (max-width: 760px) {
  .glyph-rail { right: 10px; gap: 16px; }
  .glyph { width: 22px; height: 22px; font-size: 10px; }
  .scene { padding: 10vh 22px; }
  .offset-left, .offset-right { transform: none; }
  .scene::before { left: 12px; }
  .undo-cord { left: 22px; }
  .scene-inner { padding: 28px 22px; }
}