:root {
  /* Design language tokens: sparingly spell-like Interpret “amamya” rain-house */
  --ink: #071014;
  --moss: #8FE388;
  --dew: #A7E9F2;
  --fox: #F5A6C8;
  --verm: #E34B3F;
  --rice: #F7EFD8;
  --bark: #3B261A;
  --gold: #FFD86B;
  --title: Impact, Haettenschweiler, "Arial Black", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --round: "Trebuchet MS", Verdana, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--rice);
  background:
    radial-gradient(circle at 12% 8%, rgba(143, 227, 136, .16), transparent 22rem),
    radial-gradient(circle at 84% 24%, rgba(167, 233, 242, .12), transparent 26rem),
    radial-gradient(circle at 54% 88%, rgba(245, 166, 200, .08), transparent 20rem),
    var(--ink);
  font-family: var(--serif);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .42;
  background-image:
    linear-gradient(115deg, transparent 0 48%, rgba(247, 239, 216, .035) 49% 50%, transparent 51%),
    radial-gradient(circle, rgba(167, 233, 242, .08) 1px, transparent 1.5px);
  background-size: 38px 92px, 31px 31px;
  mix-blend-mode: screen;
}

.rain-layer { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.rain-line {
  position: absolute;
  top: -18vh;
  width: 1px;
  height: var(--h, 90px);
  left: var(--x);
  opacity: var(--o, .32);
  transform: rotate(12deg);
  background: linear-gradient(transparent, var(--dew), transparent);
  animation: rainFall var(--d, 2.4s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes rainFall { to { transform: translate3d(-9vw, 126vh, 0) rotate(12deg); } }

.mist { position: fixed; z-index: 3; pointer-events: none; filter: blur(24px); opacity: .23; }
.mist-one { width: 60vw; height: 28vh; left: -18vw; top: 28vh; background: var(--dew); border-radius: 50%; animation: mistDrift 24s ease-in-out infinite alternate; }
.mist-two { width: 52vw; height: 23vh; right: -16vw; bottom: 18vh; background: var(--moss); border-radius: 50%; animation: mistDrift 31s ease-in-out infinite alternate-reverse; }
@keyframes mistDrift { to { transform: translateX(28vw) translateY(-8vh) scale(1.25); } }

.dew-cursor {
  position: fixed;
  z-index: 40;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(167, 233, 242, .55);
  border-radius: 50% 55% 45% 60%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: inset -6px -7px 13px rgba(167, 233, 242, .22), 0 0 18px rgba(143, 227, 136, .16);
}

.charm-nav {
  position: fixed;
  z-index: 35;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 22px;
}
.charm-nav::before { content: ""; position: absolute; left: 14px; top: -32px; bottom: -32px; width: 2px; background: linear-gradient(transparent, var(--verm), var(--bark), transparent); }
.nav-charm { width: 30px; height: 42px; position: relative; filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
.nav-charm span { position: absolute; inset: 8px 3px 2px; background: rgba(247, 239, 216, .78); border-radius: 2px 2px 12px 12px; border-top: 4px solid var(--verm); transform: rotate(-4deg); transition: .35s ease; }
.nav-charm::after { content: attr(data-label); position: absolute; left: 42px; top: 12px; white-space: nowrap; font: 12px var(--round); color: var(--rice); opacity: 0; transform: translateX(-8px); transition: .25s ease; }
.nav-charm:hover::after, .nav-charm.active::after { opacity: .9; transform: none; }
.nav-charm.active span { background: var(--moss); box-shadow: 0 0 22px rgba(143, 227, 136, .7); transform: rotate(7deg) scale(1.06); }

.clearing {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  padding: 8vh 8vw 8vh 11vw;
  display: grid;
  align-items: center;
  overflow: hidden;
}
.clearing::before { content: ""; position: absolute; inset: 6vh 4vw; border: 1px solid rgba(167,233,242,.08); border-radius: 46% 54% 42% 58%; pointer-events: none; }
.scene-title { max-width: 520px; z-index: 5; }
.scene-title span, .tiny-stamp { font: 12px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
h1, h2 { margin: .1em 0; font-family: var(--title); letter-spacing: .02em; line-height: .88; text-transform: lowercase; }
h1 { font-size: clamp(4rem, 14vw, 12rem); color: var(--rice); text-shadow: 0 0 22px rgba(167, 233, 242, .42), 0 7px 0 rgba(59, 38, 26, .8); }
h2 { font-size: clamp(3rem, 8vw, 8rem); color: var(--rice); text-shadow: 0 0 18px rgba(143, 227, 136, .24); }
h3 { font: 1.35rem var(--round); color: var(--bark); margin: .3rem 0; }
.prose { max-width: 38rem; font-size: clamp(1.1rem, 1.7vw, 1.6rem); line-height: 1.7; color: rgba(247, 239, 216, .86); }
.right-title { justify-self: end; text-align: right; }
.left-title { justify-self: start; }

.eave { background: radial-gradient(circle at 50% 18%, rgba(167,233,242,.08), transparent 30rem); }
.bamboo-gutter { position: absolute; top: 10vh; left: 8vw; right: 8vw; height: 38px; background: linear-gradient(90deg, #1e150f, var(--bark), #1a100b); border-radius: 30px; transform: rotate(-2deg); box-shadow: inset 0 10px 0 rgba(247,239,216,.06), 0 20px 40px rgba(0,0,0,.55); overflow: hidden; }
.code-stream { display: block; font: 13px var(--mono); color: rgba(167,233,242,.65); white-space: nowrap; animation: stream 18s linear infinite; padding-top: 12px; }
@keyframes stream { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.droplet-field { position: absolute; inset: 0; z-index: 7; }
.droplet { position: absolute; width: clamp(62px, 8vw, 110px); aspect-ratio: 1; border: 1px solid rgba(167,233,242,.55); color: var(--dew); background: radial-gradient(circle at 34% 28%, rgba(247,239,216,.85), rgba(167,233,242,.25) 27%, rgba(167,233,242,.08) 60%, rgba(7,16,20,.14)); border-radius: 58% 42% 55% 45%; backdrop-filter: blur(5px); font: 24px var(--mono); box-shadow: inset -13px -18px 28px rgba(167,233,242,.12), 0 0 34px rgba(167,233,242,.18); animation: droop 5s ease-in-out infinite alternate; cursor: pointer; }
.d1{left:13vw;top:23vh}.d2{left:35vw;top:15vh;animation-delay:-1s}.d3{left:64vw;top:27vh;animation-delay:-2s}.d4{left:22vw;top:63vh;animation-delay:-3s}.d5{left:73vw;top:61vh;animation-delay:-4s}.d6{left:48vw;top:48vh;animation-delay:-2.5s}
@keyframes droop { to { transform: translateY(24px) scale(1.05); border-radius: 44% 56% 47% 53%; } }
.word-pool { margin: auto; text-align: center; max-width: 980px; opacity: .2; filter: blur(8px); transform: scale(.9); transition: .8s cubic-bezier(.2,.8,.2,1); z-index: 6; }
.word-pool.revealed, .eave.in-view .word-pool { opacity: 1; filter: blur(0); transform: scale(1); }
.word-pool p:last-child { font-size: clamp(1.1rem, 2vw, 1.9rem); color: rgba(247,239,216,.82); margin: 0 auto; max-width: 720px; }
.paper-tag, .final-tag, .seed-packet, .paper-charm, .lantern { background: linear-gradient(135deg, rgba(247,239,216,.93), rgba(247,239,216,.72)); color: var(--bark); box-shadow: 0 20px 60px rgba(0,0,0,.38), inset 0 0 28px rgba(59,38,26,.08); }
.eave-note { position: absolute; right: 10vw; bottom: 12vh; max-width: 280px; padding: 20px; font: 16px var(--round); transform: rotate(5deg); z-index: 8; }
.creek-line { position:absolute; width:120vw; height:22px; left:-10vw; bottom:5vh; border-radius:50%; border-top:2px solid rgba(167,233,242,.35); transform:rotate(-12deg); box-shadow:0 -20px 50px rgba(167,233,242,.12); }

.terminal { grid-template-columns: 1fr 1.1fr; gap: 4vw; background: radial-gradient(circle at 28% 62%, rgba(143,227,136,.13), transparent 25rem); }
.command-stones { display: grid; gap: 26px; transform: rotate(-4deg); }
.stone { padding: 24px; border-radius: 48% 52% 45% 55% / 42% 46% 54% 58%; background: linear-gradient(145deg, rgba(59,38,26,.92), rgba(12,23,18,.94)); border: 1px solid rgba(143,227,136,.18); color: var(--rice); min-height: 118px; box-shadow: inset 0 0 0 8px rgba(143,227,136,.035), 0 20px 45px rgba(0,0,0,.42); opacity: .55; transition: .45s ease; }
.stone.active, .stone:hover { opacity: 1; transform: translateX(22px) rotate(3deg); box-shadow: 0 0 40px rgba(143,227,136,.2), inset 0 0 28px rgba(143,227,136,.09); }
.stone b { display:block; font: 18px var(--round); color: var(--moss); margin-bottom: 14px; }
code { font-family: var(--mono); color: var(--dew); }
.terminal-prose { justify-self: end; align-self: end; }
.snail { position:absolute; bottom:14vh; left:12vw; width:72px; height:36px; background:var(--moss); border-radius:60% 45% 45% 60%; box-shadow: 38px -12px 0 -8px var(--bark); }
.snail span { position:absolute; left:56px; top:-28px; padding:6px 10px; background:var(--rice); color:var(--bark); font: 11px var(--mono); white-space:nowrap; transform:rotate(-8deg); }

.repository { background: radial-gradient(circle at 72% 38%, rgba(255,216,107,.12), transparent 30rem); }
.lanterns { display:flex; align-items:flex-start; justify-content:center; gap: clamp(26px, 5vw, 80px); margin-top: 8vh; perspective: 900px; }
.lantern { width: min(28vw, 320px); min-height: 330px; padding: 76px 26px 26px; border-radius: 44% 44% 20px 20px; position:relative; transform-origin: 50% -60px; animation: swing 4.6s ease-in-out infinite alternate; }
.lantern:nth-child(2){ margin-top: 12vh; animation-delay:-1.2s; }.lantern:nth-child(3){ margin-top:4vh; animation-delay:-2.3s; }
.lantern::before { content:""; position:absolute; left:50%; bottom:100%; width:2px; height:120px; background:linear-gradient(var(--bark), var(--verm)); }
.lantern-bell { position:absolute; top:22px; left:50%; width:80px; height:55px; transform:translateX(-50%); background: var(--fox); border-radius: 50% 50% 10px 10px; box-shadow:0 0 34px rgba(245,166,200,.5); }
.lantern:hover, .lantern:focus { animation-play-state: paused; transform: rotate(0) translateY(-18px); outline: 0; box-shadow: 0 0 56px rgba(255,216,107,.32), 0 26px 60px rgba(0,0,0,.46); }
@keyframes swing { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
.dragonfly { position:absolute; left:14vw; bottom:18vh; width:130px; height:60px; animation: flutter 6s ease-in-out infinite alternate; }
.dragonfly::before { content:""; position:absolute; left:55px; top:20px; width:48px; height:8px; background:var(--bark); border-radius:999px; }
.dragonfly span { position:absolute; width:62px; height:44px; border:1px solid rgba(167,233,242,.65); background:rgba(167,233,242,.13); border-radius: 70% 30%; transform-origin:right center; }
.dragonfly span:last-child { left:52px; transform:scaleX(-1); transform-origin:left center; }
@keyframes flutter { to { transform: translate(18vw, -8vh) rotate(10deg); } }

.experiments { background: radial-gradient(circle at 34% 22%, rgba(245,166,200,.09), transparent 24rem); }
.fern-stage { position:relative; width:min(900px, 76vw); min-height:620px; justify-self:center; }
.seed-packet { position:absolute; width:min(360px, 40vw); padding:28px; border:2px dashed rgba(59,38,26,.28); transform: rotate(-7deg); top:120px; left:60px; transition:.6s ease; }
.packet-two { top:300px; left:420px; transform: rotate(6deg); }
.seed-packet span { font: 12px var(--mono); color: var(--verm); text-transform:uppercase; letter-spacing:.14em; }
.fern { position:absolute; width:170px; height:520px; bottom:0; border-radius: 100% 0; transform-origin:bottom center; z-index:4; background: repeating-linear-gradient(18deg, transparent 0 25px, rgba(143,227,136,.8) 26px 30px, transparent 31px 55px); filter: drop-shadow(0 0 18px rgba(143,227,136,.25)); transition:.7s ease; }
.frond-a{left:18%; transform:rotate(-24deg)}.frond-b{left:45%; transform:rotate(10deg); height:590px}.frond-c{right:8%; transform:rotate(30deg)}
.fern-stage.brushed .frond-a{transform:rotate(-48deg) translateX(-50px)}.fern-stage.brushed .frond-b{transform:rotate(-4deg) translateY(40px)}.fern-stage.brushed .frond-c{transform:rotate(54deg) translateX(50px)}
.fern-stage.brushed .seed-packet { transform: rotate(-2deg) translateY(-18px); box-shadow: 0 0 42px rgba(143,227,136,.2), 0 26px 60px rgba(0,0,0,.4); }
.fern-stage.brushed .packet-two { transform: rotate(2deg) translateY(-8px); }

.archive { background: radial-gradient(circle at 75% 72%, rgba(227,75,63,.10), transparent 24rem); }
.paper-charms { display:grid; grid-template-columns: repeat(4, minmax(150px, 220px)); gap: 30px; justify-content:center; margin-top:7vh; }
.paper-charm { min-height: 260px; border:0; cursor:pointer; padding:28px 20px; position:relative; transform-style:preserve-3d; transform-origin: 50% -28px; transition:.55s cubic-bezier(.2,.8,.2,1); font: 16px var(--round); }
.paper-charm::before { content:""; position:absolute; left:50%; bottom:100%; width:3px; height:56px; background:var(--verm); }
.paper-charm b { display:block; font: 28px var(--title); color: var(--bark); margin-bottom:20px; }
.paper-charm span { display:block; transform: rotateY(180deg); opacity:0; transition:.3s ease; }
.paper-charm.flipped, .paper-charm:hover { transform: rotateY(180deg) rotate(2deg); background: linear-gradient(135deg, var(--moss), rgba(247,239,216,.9)); }
.paper-charm.flipped b, .paper-charm:hover b { opacity:0; }
.paper-charm.flipped span, .paper-charm:hover span { opacity:1; }
.archive-prose { margin: 7vh auto 0; text-align:center; }

.dawn { background: linear-gradient(to bottom, var(--ink), #10211f 58%, rgba(247,239,216,.12)); text-align:center; }
.dawn-disc { position:absolute; width:52vw; aspect-ratio:1; border-radius:50%; left:50%; top:55%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,216,107,.55), rgba(245,166,200,.16) 42%, transparent 70%); filter:blur(8px); }
.final-tag { position:relative; z-index:5; margin:auto; max-width:780px; padding:44px; border-radius: 7px 7px 60px 60px; transform: rotate(-1deg); }
.final-tag h2 { color:var(--bark); text-shadow:none; }
.final-tag p { font-size:1.25rem; line-height:1.7; }
.red-cord { display:inline-block; color:var(--rice); background:var(--verm); text-decoration:none; padding:14px 22px; border-radius:999px; font: 15px var(--round); box-shadow: 0 10px 24px rgba(227,75,63,.28); }
.firefly { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 18px 6px rgba(255,216,107,.38); animation: fireFloat var(--dur, 5s) ease-in-out infinite alternate; }
@keyframes fireFloat { to { transform: translate(var(--tx, 30px), var(--ty, -50px)) scale(1.7); opacity:.35; } }
.ripple { position:fixed; z-index:30; width:20px; height:20px; border-radius:50%; border:1px solid var(--dew); pointer-events:none; transform:translate(-50%,-50%); animation:ripple .9s ease-out forwards; }
@keyframes ripple { to { width:180px; height:180px; opacity:0; } }
.in-view .scene-title h2 { animation: inkBloom 1.1s ease both; }
@keyframes inkBloom { from { filter: blur(12px); letter-spacing:.12em; opacity:.2; } to { filter: blur(0); opacity:1; } }

@media (max-width: 820px) {
  .clearing { padding: 10vh 7vw 10vh 18vw; }
  .terminal { grid-template-columns: 1fr; }
  .lanterns { flex-direction:column; align-items:center; }
  .lantern { width:min(72vw, 330px); margin-top:0!important; }
  .paper-charms { grid-template-columns: 1fr 1fr; }
  .fern-stage { width:78vw; }
  .seed-packet, .packet-two { width:70vw; left:4vw; }
  .packet-two { top:360px; }
  .dew-cursor { display:none; }
}