:root{
  /* Space Mono used sparingly for catalog numbers and jar coordinates. */
  --bog:#07120D;
  --moss:#2F5A3A;
  --bruise:#7B2E55;
  --spore:#B7F36B;
  --parchment:#E4D6B7;
  --rust:#B7652A;
  --moon:#C9E7E3;
  --title:'Eczar', Georgia, serif;
  --note:'Fraunces', Georgia, serif;
  --jp:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
  --mono:'Space Mono','Courier New',monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bog)}
body{margin:0;color:var(--parchment);font-family:var(--note);background:radial-gradient(circle at 30% 0%,rgba(47,90,58,.45),transparent 40%),linear-gradient(180deg,#07120D,#0b1a11 28%,#07120D 62%,#150d10);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.32;background-image:radial-gradient(var(--moss) 1px,transparent 1px),radial-gradient(rgba(228,214,183,.13) 1px,transparent 1px);background-size:31px 29px,53px 47px;mix-blend-mode:screen;z-index:4}

.lantern-mask{position:fixed;inset:0;pointer-events:none;z-index:10;background:radial-gradient(circle 210px at var(--x,52%) var(--y,22%),rgba(183,243,107,.18),rgba(201,231,227,.08) 26%,rgba(7,18,13,.1) 44%,rgba(7,18,13,.72) 78%);mix-blend-mode:screen;transition:background .16s ease}
.progress-vine{position:fixed;left:22px;top:8vh;width:18px;height:84vh;z-index:12;border-left:2px dashed rgba(183,243,107,.35);filter:drop-shadow(0 0 8px rgba(183,243,107,.45))}
.progress-vine span{display:block;width:9px;height:var(--p,0%);background:linear-gradient(var(--spore),var(--rust));border-radius:99px;transform:translateX(-5px)}
.trail-tabs{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:12;display:grid;gap:12px}
.trail-tabs a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-decoration:none;color:var(--moon);background:rgba(47,90,58,.68);border:1px solid rgba(228,214,183,.28);padding:8px 10px;transform:rotate(var(--r,-2deg));box-shadow:0 8px 18px rgba(0,0,0,.3)}
.trail-tabs a:nth-child(even){--r:3deg}.trail-tabs a.active{color:var(--bog);background:var(--spore)}

.habitat{min-height:100vh;position:relative;display:grid;place-items:center;overflow:hidden;padding:8vw 9vw;isolation:isolate}
.habitat:after{content:attr(data-habitat);position:absolute;left:7vw;bottom:6vh;font-family:var(--mono);font-size:12px;color:rgba(201,231,227,.55);letter-spacing:.32em;text-transform:uppercase}
.habitat h2{position:absolute;left:8vw;top:4vh;margin:0;font-family:var(--title);font-size:clamp(7rem,22vw,19rem);line-height:.75;color:rgba(228,214,183,.09);letter-spacing:-.08em;text-shadow:0 0 30px rgba(183,243,107,.08);z-index:-1}
.spore-layer{position:absolute;inset:0;background:radial-gradient(circle at 12% 22%,rgba(183,243,107,.55) 0 2px,transparent 3px),radial-gradient(circle at 78% 36%,rgba(201,231,227,.35) 0 1px,transparent 2px),radial-gradient(circle at 54% 72%,rgba(183,243,107,.35) 0 2px,transparent 3px);animation:spores 11s linear infinite;opacity:.55}
@keyframes spores{to{transform:translate3d(18px,-45px,0)}}

.opening{place-items:start;background:radial-gradient(ellipse at 38% 55%,rgba(47,90,58,.32),transparent 43%),#07120D}
.forest-litter{position:absolute;inset:auto 0 0;height:34vh;background:linear-gradient(15deg,transparent 30%,rgba(47,90,58,.8) 31% 33%,transparent 34%),repeating-linear-gradient(105deg,transparent 0 34px,rgba(183,101,42,.25) 35px 37px);filter:blur(.2px)}
.mud-title{margin-top:19vh;margin-left:8vw;transform:rotate(-4deg)}
.mud-title h1{margin:.02em 0;font-family:var(--title);font-size:clamp(4.8rem,13vw,13rem);line-height:.75;color:var(--rust);letter-spacing:-.08em;text-shadow:0 3px 0 #2a160f,0 0 24px rgba(183,243,107,.18);filter:url(#mud)}
.mud-title p{font-size:clamp(1.2rem,2vw,2rem);color:var(--moon);margin-left:1vw}.jp{font-family:var(--jp);color:var(--spore);font-size:13px;letter-spacing:.24em}.jar{position:absolute;border:2px solid rgba(201,231,227,.65);background:linear-gradient(90deg,rgba(201,231,227,.16),rgba(183,243,107,.18),rgba(201,231,227,.04));box-shadow:inset 0 0 28px rgba(183,243,107,.25),0 0 48px rgba(183,243,107,.4);border-radius:28px 28px 20px 20px;animation:breathe 3.4s ease-in-out infinite}.jar-hero{right:16vw;top:18vh;width:120px;height:180px;transform:rotate(12deg)}.jar span{position:absolute;inset:42% 20% 12%;background:radial-gradient(var(--spore),transparent 68%);border-radius:50%}@keyframes breathe{50%{filter:brightness(1.4);transform:rotate(12deg) scale(1.04)}}

.torn-note,.specimen-label{background:var(--parchment);color:var(--bog);box-shadow:0 18px 34px rgba(0,0,0,.42);border:1px solid rgba(183,101,42,.55);clip-path:polygon(2% 7%,96% 0,100% 89%,92% 100%,4% 94%,0 27%);padding:20px;max-width:330px;position:absolute;z-index:3}.torn-note b,.specimen-label b{font-family:var(--title);font-size:1.65rem;color:var(--bruise);display:block}.specimen-label em{font-family:var(--mono);font-size:11px;color:var(--rust);display:block;margin:5px 0 14px}.specimen-label p{font-size:1.05rem;line-height:1.38;margin:0}.catalog{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--moss)}.opening-note{right:12vw;bottom:12vh;transform:rotate(5deg)}.note-right{right:13vw;bottom:14vh;transform:rotate(4deg)}.pond-note{right:12vw;bottom:10vh;transform:rotate(-5deg)}.howl-note{left:12vw;bottom:13vh;transform:rotate(7deg)}.label-left{left:9vw;bottom:17vh;transform:rotate(-4deg)}.label-right{right:9vw;top:18vh;transform:rotate(3deg)}.final-label{right:10vw;bottom:12vh;transform:rotate(-2deg)}

.monster-silhouette{width:min(68vw,720px);height:auto;overflow:visible;filter:drop-shadow(0 24px 38px rgba(0,0,0,.55));z-index:2}.monster-silhouette .draw{fill:rgba(47,90,58,.86);stroke:var(--spore);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1500;stroke-dashoffset:1500;transition:stroke-dashoffset 1.8s ease}.habitat.seen .draw{stroke-dashoffset:0}.eyes circle{fill:var(--spore);stroke:var(--bog);stroke-width:5;transform-origin:center;animation:blink 4.7s infinite}.eyes circle:nth-child(2){animation-delay:1.1s}.eyes circle:nth-child(3){animation-delay:2.3s}.eyes circle:nth-child(4){animation-delay:3.2s}@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.crushling .moss{fill:rgba(183,243,107,.24);stroke:var(--moss);stroke-width:4}.jealobeast .antler,.jealobeast .thread,.longmoth .veins,.grub .tail,.chimera .horn{fill:none;stroke:var(--rust);stroke-width:8;stroke-linecap:round}.jealobeast .thread{stroke:var(--bruise);stroke-width:4;stroke-dasharray:12 10;animation:tighten 2.7s ease-in-out infinite}@keyframes tighten{50%{stroke-dashoffset:28}}.longmoth .wing{fill:rgba(201,231,227,.35);stroke:var(--moon);stroke-width:4;transform-origin:center;animation:wings 1.3s ease-in-out infinite}.longmoth .right{animation-delay:.12s}.longmoth .veins{stroke:rgba(123,46,85,.7);stroke-width:3}@keyframes wings{50%{transform:scaleX(.94) rotate(.8deg)}}.grub .paper{fill:rgba(228,214,183,.82);stroke:var(--rust);stroke-width:3}.chimera{width:min(54vw,560px)}

.footprint-trail{position:absolute;display:flex;gap:24px;transform:rotate(-24deg)}.footprint-trail i{width:25px;height:31px;background:var(--rust);border-radius:52% 48% 56% 44%;clip-path:path('M12 0 C23 6 27 19 19 29 C10 38 -2 24 1 13 C3 7 6 3 12 0 Z');opacity:0;box-shadow:0 0 12px rgba(183,101,42,.45)}.seen .footprint-trail i,.opening .footprint-trail i{animation:print .6s forwards}.footprint-trail i:nth-child(2){animation-delay:.25s}.footprint-trail i:nth-child(3){animation-delay:.5s}.footprint-trail i:nth-child(4){animation-delay:.75s}.footprint-trail i:nth-child(5){animation-delay:1s}.footprint-trail i:nth-child(6){animation-delay:1.25s}@keyframes print{to{opacity:.95;transform:translateY(7px)}}.hero-trail{left:43vw;bottom:19vh}.chamber-trail{left:21vw;bottom:21vh}.grub-trail{right:18vw;bottom:18vh;transform:rotate(18deg)}

.track{background:radial-gradient(circle at 70% 40%,rgba(123,46,85,.25),transparent 35%),#0a150f}.cabinet-rail{position:absolute;inset:16vh auto auto 8vw;width:88vw;height:60vh;display:flex;gap:28px;transform:translateX(var(--slide,0px));transition:transform .2s ease-out;opacity:.72}.drawer{width:27vw;min-width:250px;height:34vh;background:linear-gradient(135deg,#1b2f20,var(--moss));border:8px solid #25150d;box-shadow:inset 0 0 0 2px var(--rust),0 20px 38px rgba(0,0,0,.45);transform:rotate(-3deg);display:grid;place-items:end start;padding:18px}.drawer.tall{height:50vh;transform:rotate(2deg)}.drawer span{font-family:var(--mono);font-size:12px;color:var(--moon);background:rgba(7,18,13,.65);padding:8px}.molt{background:radial-gradient(circle at 50% 44%,rgba(183,243,107,.18),transparent 31%),linear-gradient(#0a1511,#101318)}.howl{background:radial-gradient(circle at 75% 70%,rgba(183,101,42,.22),transparent 32%),#08120d}.tame{background:radial-gradient(circle at 48% 48%,rgba(123,46,85,.42),transparent 34%),#07120D}.thread-nest{position:relative;width:min(78vw,820px);height:62vh;display:grid;place-items:center}.thread-nest .thread{position:absolute;width:86%;height:58%;border:4px solid var(--bruise);border-radius:50%;filter:drop-shadow(0 0 12px rgba(123,46,85,.6));animation:nest 5s ease-in-out infinite}.thread-nest .t2{transform:rotate(38deg);border-color:var(--rust);animation-delay:-1.6s}.thread-nest .t3{transform:rotate(-29deg);border-color:#7B2E55;animation-delay:-3s}@keyframes nest{50%{scale:1.04;rotate:4deg}}.artifact{position:absolute;background:var(--parchment);color:var(--bog);padding:16px;box-shadow:0 12px 28px rgba(0,0,0,.35)}.note-a{left:10%;top:17%;transform:rotate(-16deg)}.leaf-a{right:16%;top:18%;font-size:58px;color:var(--moss);background:transparent;box-shadow:none}.tooth-a{left:23%;bottom:12%;width:34px;height:52px;background:var(--moon);clip-path:polygon(50% 0,100% 35%,62% 100%,28% 100%,0 35%)}

@media (max-width:760px){.trail-tabs{right:8px}.trail-tabs a{font-size:9px;padding:6px}.progress-vine{left:9px}.habitat{padding:18vh 9vw}.mud-title{margin-left:2vw}.monster-silhouette{width:92vw}.specimen-label,.torn-note{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-top:55vh;max-width:86vw}.habitat h2{font-size:26vw}.cabinet-rail{left:4vw}.drawer{min-width:210px}.final-label{margin-top:2vh}}