:root {
  --ink: #071113;
  --green: #7CFF6B;
  --plum: #4A1738;
  --cream: #F0DFC2;
  --orange: #E66B2E;
  --blue: #4EB7D8;
  --yellow: #F7D84A;
  --title-font: "Yusei Magic", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
  --serif-font: "Fraunces", Georgia, "Times New Roman", serif;
  --round-font: "M PLUS Rounded 1c", "Trebuchet MS", system-ui, sans-serif;
  --mono-font: "IBM Plex Mono", "Courier New", monospace;
  /* IBM Plex Mono appears sparingly for jar numbers and catalog codes. */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--cream);
  font-family: var(--round-font);
  background:
    radial-gradient(circle at 80% 12%, rgba(124,255,107,.12), transparent 28rem),
    radial-gradient(circle at 18% 62%, rgba(74,23,56,.62), transparent 35rem),
    linear-gradient(180deg, #071113 0%, #0b1715 38%, #130d13 100%);
}

.svg-filters { position: fixed; inset: 0; pointer-events: none; }
.rain-cabinet { position: relative; z-index: 2; }
.habitat {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 2.5rem);
  display: grid;
  place-items: center;
}

.habitat::before,
.habitat::after,
.moisture::before,
.moisture::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.habitat::before {
  inset: 0;
  z-index: -3;
  opacity: .9;
  background:
    linear-gradient(100deg, rgba(240,223,194,.05) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 15% 20%, rgba(230,107,46,.11), transparent 10rem),
    radial-gradient(circle at 72% 68%, rgba(78,183,216,.12), transparent 16rem);
}

.habitat::after {
  inset: -5%;
  z-index: 15;
  mix-blend-mode: screen;
  opacity: .22;
  background-image:
    repeating-linear-gradient(105deg, transparent 0 24px, rgba(78,183,216,.42) 25px, transparent 27px),
    radial-gradient(circle at 20% 30%, transparent 0 4px, rgba(240,223,194,.15) 5px, transparent 9px);
  animation: rainSheet 1.5s linear infinite;
}

.rainfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  opacity: .72;
  background-image:
    repeating-linear-gradient(92deg, transparent 0 18px, rgba(78,183,216,.38) 19px, transparent 21px),
    repeating-linear-gradient(96deg, transparent 0 39px, rgba(240,223,194,.18) 40px, transparent 42px);
  background-size: 180px 160px, 260px 280px;
  animation: rainRun var(--rain-speed, .9s) linear infinite;
}

.moisture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background:
    radial-gradient(circle at 12% 17%, rgba(240,223,194,.08) 0 7rem, transparent 7.2rem),
    radial-gradient(circle at 74% 24%, rgba(78,183,216,.08) 0 5rem, transparent 5.3rem),
    radial-gradient(circle at 46% 78%, rgba(124,255,107,.06) 0 9rem, transparent 9.4rem);
  mix-blend-mode: screen;
}

.moisture::before {
  inset: 0;
  background-image: radial-gradient(rgba(240,223,194,.2) 1px, transparent 1px);
  background-size: 7px 7px;
  opacity: .11;
}

.moisture::after {
  inset: 0;
  border: 2.5vmin solid rgba(7,17,19,.45);
  box-shadow: inset 0 0 8rem #071113;
}

.migrating-dot {
  position: fixed;
  left: calc(var(--dot-x, 9) * 1vw);
  top: calc(var(--dot-y, 46) * 1vh);
  width: clamp(1.2rem, 2.1vw, 2.2rem);
  height: clamp(1.2rem, 2.1vw, 2.2rem);
  border-radius: 50% 46% 54% 50%;
  z-index: 30;
  pointer-events: none;
  background: radial-gradient(circle at 35% 30%, var(--cream), var(--green) 28%, var(--blue) 54%, rgba(78,183,216,.12) 70%);
  box-shadow: 0 0 1.2rem rgba(124,255,107,.9), 0 .5rem 1.5rem rgba(78,183,216,.35);
  filter: url(#wet-wobble);
  transition: left 900ms cubic-bezier(.2,.8,.2,1), top 900ms cubic-bezier(.2,.8,.2,1), transform 500ms ease;
}

.migrating-dot::after {
  content: "";
  position: absolute;
  inset: -1rem;
  border-radius: 50%;
  border: 1px solid rgba(124,255,107,.55);
  animation: pulseRing 1.8s ease-out infinite;
}

.talisman-nav {
  position: fixed;
  right: clamp(.5rem, 2vw, 2rem);
  top: 12vh;
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transform: rotate(-2deg);
}

.nav-string {
  position: absolute;
  top: -3rem;
  right: 48%;
  width: 2px;
  height: calc(100% + 4rem);
  background: linear-gradient(var(--orange), rgba(240,223,194,.4));
  box-shadow: 0 0 .6rem rgba(230,107,46,.5);
}

.talisman {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font: 700 .72rem/1 var(--round-font);
  letter-spacing: .04em;
  background: var(--cream);
  padding: .72rem .82rem .9rem;
  min-width: 7rem;
  clip-path: polygon(7% 0, 100% 5%, 91% 100%, 44% 88%, 6% 100%, 0 8%);
  box-shadow: .35rem .35rem 0 rgba(74,23,56,.75), inset 0 0 0 1px rgba(7,17,19,.2);
  transform-origin: 50% -1.5rem;
  animation: charmFlutter 3.7s ease-in-out infinite;
}

.talisman:nth-child(odd) { transform: rotate(3deg); animation-delay: -.9s; }
.talisman.active { background: var(--yellow); color: var(--plum); box-shadow: 0 0 1rem rgba(247,216,74,.42), .35rem .35rem 0 rgba(74,23,56,.75); }

.specimen-label,
.hanging-label,
.jar-frame,
.market-scroll,
.final-label {
  position: relative;
  z-index: 3;
  max-width: min(40rem, 76vw);
  padding: clamp(1rem, 3vw, 2.2rem);
  color: var(--ink);
  background:
    radial-gradient(circle at 5% 8%, rgba(230,107,46,.28), transparent 2.4rem),
    linear-gradient(145deg, rgba(240,223,194,.98), rgba(240,223,194,.82));
  box-shadow: 0 1rem 3rem rgba(7,17,19,.5), inset 0 0 0 1px rgba(74,23,56,.28);
  filter: drop-shadow(.65rem .85rem 0 rgba(7,17,19,.35));
}

.specimen-label::before,
.hanging-label::before,
.jar-frame::before,
.market-scroll::before,
.final-label::before {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orange) 20%, #611c10 70%);
  box-shadow: 0 0 0 .18rem rgba(7,17,19,.2);
  top: .65rem;
  right: .8rem;
}

.catalog {
  margin: 0 0 .55rem;
  color: var(--plum);
  font: 700 .72rem/1.3 var(--mono-font);
  letter-spacing: .08em;
}

h1, h2 {
  margin: 0;
  color: var(--plum);
  font-family: var(--title-font);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
}
h1 { font-size: clamp(3.5rem, 11vw, 8.8rem); }
h2 { font-size: clamp(2.6rem, 7vw, 6.6rem); }
p:not(.catalog) { font: clamp(1rem, 1.5vw, 1.35rem)/1.5 var(--serif-font); }

.signboard { place-items: end start; background: radial-gradient(circle at 70% 8%, rgba(78,183,216,.13), transparent 22rem), linear-gradient(180deg, #071113, #10201c 72%, #071113); }
.awning { position: absolute; top: 0; left: 0; width: 82vw; height: 15vh; z-index: 2; background: linear-gradient(135deg, #1d111a, var(--plum)); clip-path: polygon(0 0,100% 0,92% 62%,76% 46%,61% 72%,45% 51%,30% 70%,14% 52%,0 76%); box-shadow: 0 1rem 2rem rgba(7,17,19,.8); }
.awning span { position: absolute; bottom: -4.6rem; width: .25rem; height: 5.4rem; background: linear-gradient(var(--blue), transparent); border-radius: 999px; animation: drip 2.2s infinite ease-in; }
.awning span:nth-child(1) { left: 18%; } .awning span:nth-child(2) { left: 52%; animation-delay: -.7s; } .awning span:nth-child(3) { left: 87%; animation-delay: -1.4s; }
.alley-silhouette { position: absolute; inset: auto 0 0 0; height: 44vh; background: linear-gradient(to top, #030808 0 45%, transparent 45%), repeating-linear-gradient(90deg, transparent 0 8vw, rgba(240,223,194,.04) 8vw 8.2vw, transparent 8.2vw 14vw); clip-path: polygon(0 100%,0 48%,8% 48%,8% 24%,19% 24%,19% 58%,25% 58%,25% 35%,39% 35%,39% 62%,52% 62%,52% 18%,64% 18%,64% 54%,76% 54%,76% 31%,88% 31%,88% 61%,100% 61%,100% 100%); z-index: -1; }
.stacked-wordmark { position: absolute; left: clamp(.65rem, 2.6vw, 2.2rem); top: 16vh; z-index: 5; display: flex; flex-direction: column; gap: .18rem; filter: url(#wet-wobble); }
.stacked-wordmark span, .stacked-wordmark i { width: clamp(2.1rem, 4.3vw, 4.2rem); height: clamp(2rem, 4.1vw, 4rem); display: grid; place-items: center; color: var(--cream); font: 900 clamp(1.45rem, 3vw, 3rem)/1 var(--title-font); font-style: normal; background: linear-gradient(145deg, rgba(74,23,56,.95), rgba(7,17,19,.9)); border: 1px solid rgba(78,183,216,.45); border-radius: .45rem 1rem .35rem .85rem; box-shadow: inset 0 .2rem .4rem rgba(240,223,194,.12), 0 0 1rem rgba(78,183,216,.2); animation: enamelFlicker 4s steps(1,end) infinite; }
.stacked-wordmark i { border-radius: 50%; background: radial-gradient(circle at 35% 25%, var(--cream), var(--green) 35%, var(--blue)); box-shadow: 0 0 1.8rem var(--green); }
.label-sign { margin-left: clamp(5.5rem, 14vw, 11rem); margin-bottom: 7vh; transform: rotate(-3deg); clip-path: polygon(3% 0, 98% 2%, 100% 89%, 82% 100%, 2% 94%, 0 9%); }
.sign-tail { position: absolute; right: 5vw; bottom: 18vh; width: 28vw; height: 8vh; background: linear-gradient(90deg, transparent, var(--green), var(--plum)); border-radius: 70% 30% 50% 60%; filter: blur(.5px); opacity: .8; transform: rotate(-10deg); animation: tailPeek 4.5s ease-in-out infinite; }
.puddle, .blink-puddle { position: absolute; z-index: 4; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(124,255,107,.28), rgba(78,183,216,.28) 45%, rgba(7,17,19,.6) 72%); box-shadow: inset 0 0 2rem rgba(78,183,216,.42), 0 0 2rem rgba(124,255,107,.2); display: grid; place-items: center; color: rgba(240,223,194,.8); font: 800 .9rem var(--title-font); cursor: crosshair; }
.puddle { right: 13vw; bottom: 7vh; width: 20vw; height: 8vw; min-width: 12rem; min-height: 4rem; }
.puddle.rippling, .blink-puddle.rippling { animation: puddleRipple .7s ease-out; }
.bottle-caps { position: absolute; right: 8vw; top: 24vh; display: flex; gap: .75rem; transform: rotate(17deg); }
.bottle-caps b { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: radial-gradient(circle, var(--yellow), var(--orange) 52%, #54190c 54%); box-shadow: inset 0 0 0 .25rem rgba(7,17,19,.24); }

.umbrella { background: radial-gradient(circle at 60% 32%, rgba(78,183,216,.2), transparent 26rem), linear-gradient(160deg, #071113, #190e18 72%, #0a1713); }
.droplet-curtain { position: absolute; inset: 0; z-index: 3; background-image: radial-gradient(ellipse at top, rgba(240,223,194,.5) 0 .18rem, transparent .22rem), linear-gradient(rgba(78,183,216,.28), transparent 30%); background-size: 2.4rem 8rem, 2.4rem 8rem; animation: curtainFall 2s linear infinite; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 82%, transparent); }
.umbrella-nest { position: absolute; left: 8vw; top: 21vh; width: min(53rem, 82vw); height: min(29rem, 55vh); transform: rotate(-8deg); z-index: 1; }
.umbrella-bowl { position: absolute; inset: 12% 4% 10% 2%; border-radius: 50% 50% 18% 18%; background: radial-gradient(ellipse at 45% 0, rgba(240,223,194,.18), transparent 26%), linear-gradient(110deg, var(--plum), #250d20 75%); clip-path: polygon(0 56%, 12% 20%, 28% 41%, 44% 8%, 60% 42%, 77% 16%, 100% 57%, 88% 78%, 62% 87%, 33% 83%, 9% 72%); box-shadow: inset 0 -1rem 3rem rgba(7,17,19,.65), 0 2rem 3rem rgba(7,17,19,.65); }
.umbrella-bowl span { position: absolute; left: calc(12% + var(--n, 0) * 16%); top: 5%; width: .22rem; height: 85%; background: rgba(240,223,194,.38); transform: rotate(calc(-36deg + var(--n,0) * 18deg)); transform-origin: top; }
.umbrella-bowl span:nth-child(1){--n:0}.umbrella-bowl span:nth-child(2){--n:1}.umbrella-bowl span:nth-child(3){--n:2}.umbrella-bowl span:nth-child(4){--n:3}.umbrella-bowl span:nth-child(5){--n:4}
.egg-cluster { position: absolute; right: 22%; bottom: 18%; display: flex; gap: .8rem; }
.egg-cluster i { width: 3rem; height: 4rem; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 30% 18%, var(--cream), var(--green) 28%, rgba(78,183,216,.4)); box-shadow: 0 0 1.6rem rgba(124,255,107,.8); animation: eggGlow 2.8s ease-in-out infinite; }
.egg-cluster i:nth-child(2){animation-delay:-.8s}.egg-cluster i:nth-child(3){animation-delay:-1.5s}
.label-umbrella { margin-left: auto; margin-right: 8vw; transform: rotate(4deg); clip-path: polygon(2% 7%, 93% 0, 100% 87%, 53% 100%, 0 89%); }
.lore-charm { position: absolute; left: 62vw; bottom: 13vh; z-index: 5; border: 0; background: var(--yellow); color: var(--plum); font: 900 .9rem var(--round-font); padding: .8rem 1.1rem 1.3rem; clip-path: polygon(9% 0, 100% 3%, 91% 100%, 48% 82%, 9% 100%, 0 8%); cursor: pointer; box-shadow: .35rem .45rem 0 rgba(7,17,19,.5); animation: charmFlutter 3s ease-in-out infinite; }
.lore-note { position: absolute; left: 55vw; bottom: 5vh; max-width: 20rem; opacity: 0; transform: translateY(1rem) rotate(-2deg); transition: .45s ease; z-index: 6; padding: 1rem; background: var(--cream); color: var(--ink); font: 1rem/1.4 var(--serif-font); clip-path: polygon(4% 3%, 96% 0, 100% 91%, 6% 100%); }
.lore-note.visible { opacity: 1; transform: translateY(0) rotate(-2deg); }
.fern-teeth { position: absolute; right: 8vw; top: 13vh; display: flex; gap: .3rem; }
.fern-teeth i { width: 1.1rem; height: 6rem; background: linear-gradient(var(--green), transparent); clip-path: polygon(50% 0, 85% 20%, 55% 18%, 90% 42%, 55% 38%, 86% 70%, 50% 100%, 14% 70%, 45% 38%, 10% 42%, 45% 18%, 15% 20%); filter: drop-shadow(0 0 .6rem rgba(124,255,107,.6)); }

.gutter { background: linear-gradient(180deg, #0b1514, #071113 45%, #170d16); }
.gutter-stream { position: absolute; left: -5vw; bottom: 16vh; width: 110vw; height: 15vh; display: flex; align-items: center; justify-content: center; gap: clamp(.4rem, 1vw, 1rem); color: var(--blue); font: 900 clamp(1.4rem, 3vw, 3.5rem) var(--title-font); background: linear-gradient(180deg, transparent, rgba(78,183,216,.16), transparent); transform: rotate(-5deg); filter: url(#wet-wobble); }
.gutter-stream span, .gutter-stream b { animation: streamBob 2.5s ease-in-out infinite; text-shadow: 0 0 1rem rgba(78,183,216,.8); }
.gutter-stream b { color: var(--green); font-style: normal; }
.label-gutter { margin-right: auto; margin-left: 12vw; border-radius: 40% 43% 18% 16% / 14% 15% 9% 8%; clip-path: polygon(12% 0, 88% 0, 100% 18%, 93% 100%, 8% 100%, 0 18%); transform: rotate(2deg); }
.shrine-cups { position: absolute; right: 15vw; top: 20vh; display: flex; gap: 1.5rem; transform: rotate(8deg); }
.shrine-cups div { width: 5rem; height: 3.5rem; background: linear-gradient(160deg, var(--cream), rgba(240,223,194,.5)); border-radius: 18% 18% 48% 48%; box-shadow: inset -.6rem -.5rem 0 rgba(74,23,56,.25), 0 .9rem 1.5rem rgba(7,17,19,.55); position: relative; }
.shrine-cups div::after { content:""; position:absolute; inset: .5rem 1rem auto; height:.45rem; background: var(--orange); border-radius: 50%; }
.claw-tile { position: absolute; right: 28vw; bottom: 19vh; width: 10rem; height: 6rem; border-radius: .8rem; background: linear-gradient(145deg, #12221b, #071113); box-shadow: inset 0 0 0 .2rem rgba(240,223,194,.09); }
.claw-tile i { position: absolute; bottom: 1.1rem; width: 1.2rem; height: 4.3rem; background: var(--green); border-radius: 80% 15% 45% 20%; transform-origin: bottom; box-shadow: 0 0 1rem rgba(124,255,107,.75); animation: clawSprout 3.6s ease-in-out infinite; }
.claw-tile i:nth-child(1){left:2.5rem; transform:rotate(-16deg)} .claw-tile i:nth-child(2){left:4.3rem; animation-delay:-.7s} .claw-tile i:nth-child(3){left:6rem; transform:rotate(16deg); animation-delay:-1.1s}
.spiderweb { position: absolute; left: 10vw; top: 12vh; width: 12rem; height: 12rem; border: 1px solid rgba(240,223,194,.22); border-radius: 50%; }
.spiderweb span { position: absolute; inset: 50% auto auto 0; width: 100%; height: 1px; background: rgba(240,223,194,.18); transform: rotate(var(--r)); }
.spiderweb span:nth-child(1){--r:30deg}.spiderweb span:nth-child(2){--r:90deg}.spiderweb span:nth-child(3){--r:150deg}

.market { background: radial-gradient(circle at 82% 45%, rgba(124,255,107,.16), transparent 22rem), linear-gradient(165deg, #071113, #24101d 58%, #071113); }
.label-market { position: absolute; left: 8vw; top: 11vh; transform: rotate(-4deg); clip-path: polygon(0 4%, 94% 0, 100% 100%, 12% 92%); }
.jar-shelf { position: absolute; right: 5vw; bottom: 12vh; width: min(72rem, 88vw); display: flex; justify-content: flex-end; gap: clamp(.8rem, 2vw, 2rem); align-items: end; padding-bottom: 2rem; border-bottom: .8rem solid rgba(240,223,194,.22); }
.fog-jar { width: clamp(8rem, 15vw, 13rem); height: clamp(16rem, 35vh, 25rem); border: .18rem solid rgba(240,223,194,.55); border-radius: 43% 43% 16% 16% / 10% 10% 8% 8%; background: linear-gradient(180deg, rgba(78,183,216,.2), rgba(240,223,194,.12) 44%, rgba(7,17,19,.5)), radial-gradient(circle at 50% 70%, rgba(124,255,107,.32), transparent 40%); color: var(--cream); font: 800 .8rem/1.2 var(--round-font); cursor: pointer; position: relative; overflow: hidden; box-shadow: inset 0 0 2rem rgba(240,223,194,.12), 0 1rem 2rem rgba(7,17,19,.6); transition: transform .35s ease, box-shadow .35s ease; }
.fog-jar::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 40% 22%, rgba(240,223,194,.7), transparent 18%), linear-gradient(100deg, transparent, rgba(240,223,194,.22), transparent); opacity:.75; transition: opacity .4s ease; }
.fog-jar span { position: absolute; left: 12%; right: 12%; bottom: 12%; padding: .6rem; background: rgba(240,223,194,.85); color: var(--ink); transform: translateY(1rem); opacity: .45; transition: .4s ease; }
.fog-jar i { position: absolute; left: 50%; top: 42%; width: 3rem; height: 3rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 1.5rem var(--green); transform: translate(-50%,-50%); }
.fog-jar.clear { transform: translateY(-1rem) rotate(2deg); box-shadow: inset 0 0 2rem rgba(240,223,194,.12), 0 0 2.5rem rgba(124,255,107,.35); }
.fog-jar.clear::before { opacity: .12; }
.fog-jar.clear span { opacity: 1; transform: translateY(0); }
.spores { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.spore { position: absolute; width: .45rem; height: .45rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 .9rem var(--green); animation: sporeFloat 5.5s linear forwards; }
.vending-glow { position: absolute; left: 7vw; bottom: 16vh; display: grid; gap: .7rem; }
.vending-glow b { width: 5rem; height: 1.2rem; background: var(--orange); box-shadow: 0 0 1rem rgba(230,107,46,.8); border-radius: 999px; animation: vendingBlink 2s steps(2,end) infinite; }

.rainline { background: radial-gradient(circle at 52% 42%, rgba(78,183,216,.18), transparent 31rem), linear-gradient(180deg, #071113, #060708); }
.final-label { position: absolute; left: 6vw; top: 12vh; max-width: min(43rem, 82vw); transform: rotate(2deg); clip-path: polygon(3% 0, 100% 5%, 95% 94%, 9% 100%, 0 12%); }
.rainline-creature { position: absolute; right: 5vw; bottom: 8vh; width: min(65rem, 85vw); height: min(42rem, 60vh); filter: url(#wet-wobble) drop-shadow(0 0 2.5rem rgba(124,255,107,.25)); }
.creature-body { position: absolute; inset: 18% 6% 18% 12%; border-radius: 60% 40% 52% 48%; background: radial-gradient(circle at 42% 42%, rgba(124,255,107,.22), transparent 23%), linear-gradient(120deg, rgba(74,23,56,.88), rgba(7,17,19,.9)); border: 1px solid rgba(78,183,216,.32); box-shadow: inset 0 0 4rem rgba(7,17,19,.9), 0 0 3rem rgba(78,183,216,.13); animation: creatureBreathe 5s ease-in-out infinite; }
.creature-eye { position: absolute; top: 35%; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: radial-gradient(circle, var(--cream), var(--green) 35%, transparent 62%); box-shadow: 0 0 1.8rem var(--green); animation: blink 4.6s ease-in-out infinite; }
.creature-eye.left { right: 30%; } .creature-eye.right { right: 20%; animation-delay: -.25s; }
.creature-ribs span { position: absolute; top: 20%; left: calc(22% + var(--i) * 9%); width: .35rem; height: 48%; border-radius: 999px; background: rgba(240,223,194,.42); transform: rotate(calc(-26deg + var(--i) * 10deg)); transform-origin: top; }
.creature-ribs span:nth-child(1){--i:0}.creature-ribs span:nth-child(2){--i:1}.creature-ribs span:nth-child(3){--i:2}.creature-ribs span:nth-child(4){--i:3}.creature-ribs span:nth-child(5){--i:4}
.creature-tail { position: absolute; left: 2%; bottom: 26%; width: 27%; height: 10%; border-radius: 100% 0 0 100%; background: linear-gradient(90deg, transparent, rgba(124,255,107,.75), rgba(74,23,56,.7)); transform-origin: right; animation: tailSway 3.4s ease-in-out infinite; }
.creature-claws i { position: absolute; bottom: 12%; right: calc(18% + var(--i) * 5%); width: 1.2rem; height: 5rem; border-radius: 80% 10% 35% 20%; background: var(--green); transform: rotate(calc(-14deg + var(--i) * 14deg)); box-shadow: 0 0 1rem var(--green); }
.creature-claws i:nth-child(1){--i:0}.creature-claws i:nth-child(2){--i:1}.creature-claws i:nth-child(3){--i:2}
.blink-puddle { left: 18vw; bottom: 9vh; width: 28vw; height: 9vw; min-width: 14rem; min-height: 5rem; }
.blink-puddle::after { content:""; position:absolute; width: 6rem; height: .55rem; border-radius: 999px; background: var(--green); box-shadow: 0 0 1rem var(--green); animation: puddleBlink 4s ease-in-out infinite; }

@keyframes rainRun { to { background-position: 0 160px, 0 280px; } }
@keyframes rainSheet { to { transform: translateY(7%); } }
@keyframes pulseRing { 0%{transform:scale(.3);opacity:.8} 100%{transform:scale(1.9);opacity:0} }
@keyframes charmFlutter { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(4deg) translateY(.18rem)} }
@keyframes drip { 0%{transform:translateY(-60%);opacity:0} 35%{opacity:1} 100%{transform:translateY(110%);opacity:0} }
@keyframes enamelFlicker { 0%,92%,100%{filter:brightness(1)} 93%{filter:brightness(1.8)} 94%{filter:brightness(.55)} 96%{filter:brightness(1.3)} }
@keyframes tailPeek { 0%,100%{transform:translateX(25%) rotate(-10deg)} 50%{transform:translateX(-4%) rotate(-14deg)} }
@keyframes puddleRipple { 0%{box-shadow:inset 0 0 2rem rgba(78,183,216,.42),0 0 0 0 rgba(124,255,107,.7)} 100%{box-shadow:inset 0 0 2rem rgba(78,183,216,.42),0 0 0 2.5rem rgba(124,255,107,0)} }
@keyframes curtainFall { to { background-position: 0 8rem, 0 8rem; } }
@keyframes eggGlow { 0%,100%{transform:translateY(0);filter:brightness(1)} 50%{transform:translateY(-.55rem);filter:brightness(1.3)} }
@keyframes streamBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-.7rem)} }
@keyframes clawSprout { 0%,100%{height:3rem} 50%{height:5rem} }
@keyframes sporeFloat { 0%{transform:translateY(0) scale(.5); opacity:0} 15%{opacity:1} 100%{transform:translateY(-45vh) translateX(var(--drift,2rem)) scale(1.1); opacity:0} }
@keyframes vendingBlink { 50% { opacity: .35; } }
@keyframes creatureBreathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.035,.96)} }
@keyframes blink { 0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.08)} }
@keyframes tailSway { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
@keyframes puddleBlink { 0%,90%,100%{transform:scaleY(1)} 94%{transform:scaleY(.05)} }

@media (max-width: 760px) {
  .talisman-nav { right: .4rem; top: auto; bottom: .5rem; flex-direction: row; transform: none; max-width: 96vw; overflow: visible; }
  .nav-string { display: none; }
  .talisman { min-width: auto; padding: .55rem .5rem .75rem; font-size: .6rem; }
  .stacked-wordmark { top: 12vh; }
  .label-sign { margin-left: 4.8rem; margin-bottom: 16vh; }
  .label-umbrella, .label-gutter, .label-market, .final-label { position: relative; inset: auto; margin: 0 0 28vh 4.5rem; max-width: calc(100vw - 6rem); }
  .jar-shelf { right: 1rem; gap: .45rem; overflow: hidden; }
  .fog-jar { width: 5.8rem; height: 14rem; }
  .lore-charm { left: 18vw; bottom: 19vh; }
  .lore-note { left: 12vw; bottom: 10vh; }
}