:root {
  /* typography compliance tokens: beneath it: `simulation inference`. Each should contain looping micro-simulation: Mono* Mono** only restrained accent coordinates */
  --moon-ink: #101326;
  --violet-soil: #24143A;
  --aurora-mint: #7EF9C1;
  --fairy-lilac: #C9A7FF;
  --petal-rose: #FF9FD6;
  --dew-pearl: #F6F0DC;
  --electric-fern: #3FEA8E;
  --twilight-cyan: #78DFFF;
  --glass: rgba(246, 240, 220, .12);
  --line: rgba(246, 240, 220, .28);
  --serif: "EB Garamond", "Cormorant Garamond", Garamond, Georgia, serif;
  --ornate: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --jp: "Noto Sans JP", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--moon-ink);
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--dew-pearl);
  font-family: var(--jp);
  overflow-x: hidden;
  cursor: none;
  background:
    radial-gradient(circle at 24% 16%, rgba(201, 167, 255, .22), transparent 32rem),
    radial-gradient(circle at 82% 8%, rgba(126, 249, 193, .15), transparent 28rem),
    linear-gradient(145deg, var(--moon-ink) 0%, var(--violet-soil) 62%, #170D2C 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(rgba(246, 240, 220, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 240, 220, .025) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px;
  mask-image: radial-gradient(circle at 50% 28%, black 0 48%, transparent 82%);
}

.aurora-field,
#pollenCanvas,
.paper-grain,
.aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.aurora-field { overflow: hidden; z-index: 0; }
#pollenCanvas { width: 100%; height: 100%; opacity: .78; }

.aurora {
  width: 150vw;
  height: 42vh;
  left: -25vw;
  top: 2vh;
  filter: blur(38px);
  opacity: .48;
  transform: rotate(-8deg);
  background: linear-gradient(135deg, #7EF9C1 0%, #C9A7FF 46%, #FF9FD6 100%);
  animation: auroraDrift 24s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

.aurora-b {
  top: 43vh;
  height: 30vh;
  opacity: .25;
  animation-duration: 31s;
  animation-direction: alternate-reverse;
}

.paper-grain {
  z-index: 1;
  opacity: .14;
  background:
    radial-gradient(circle at 12% 20%, rgba(246, 240, 220, .38) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 72%, rgba(246, 240, 220, .28) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 38%, rgba(255, 159, 214, .22) 0 1px, transparent 2px);
  background-size: 88px 88px, 121px 121px, 61px 61px;
}

.conservatory {
  position: relative;
  z-index: 2;
}

.chapter {
  min-height: 100vh;
  position: relative;
  padding: 5.6rem clamp(1rem, 3vw, 3rem) 3rem;
}

.seed-chamber {
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.wordmark-wrap {
  position: absolute;
  z-index: 7;
  text-align: center;
  top: 11vh;
  padding: 1rem 2rem 1.3rem;
  border: 1px solid rgba(246, 240, 220, .25);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(246, 240, 220, .12), rgba(246, 240, 220, .035));
  box-shadow: inset 0 0 28px rgba(246, 240, 220, .08), 0 0 70px rgba(201, 167, 255, .18);
  backdrop-filter: blur(18px);
}

h1, h2, h3, p { margin: 0; }

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(4rem, 11vw, 9.5rem);
  line-height: .76;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(246, 240, 220, .86);
  text-shadow: 0 0 18px rgba(126, 249, 193, .32), 0 0 40px rgba(201, 167, 255, .26);
}

.subtitle,
.coordinate,
.mono,
.specimen-label {
  font-family: var(--mono);
  text-transform: lowercase;
  letter-spacing: .14em;
}

.subtitle {
  margin-top: .82rem;
  font-size: clamp(.68rem, 1.2vw, .86rem);
  color: rgba(126, 249, 193, .94);
}

.coordinate {
  margin-bottom: .7rem;
  font-size: .64rem;
  color: rgba(246, 240, 220, .62);
}

.herbarium-tabs {
  position: fixed;
  z-index: 10;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .4rem;
  padding: .35rem;
  border: 1px solid rgba(246, 240, 220, .18);
  border-radius: 999px;
  background: rgba(16, 19, 38, .42);
  backdrop-filter: blur(18px);
}

.herbarium-tabs a {
  color: rgba(246, 240, 220, .66);
  text-decoration: none;
  font: 500 .64rem/1 var(--mono);
  letter-spacing: .09em;
  padding: .55rem .7rem;
  border-radius: 999px;
  transition: color .35s ease, background .35s ease, box-shadow .35s ease;
}

.herbarium-tabs a.active,
.herbarium-tabs a:hover {
  color: var(--moon-ink);
  background: linear-gradient(135deg, #7EF9C1 0%, #C9A7FF 100%);
  box-shadow: 0 0 24px rgba(126, 249, 193, .28);
}

.root-system {
  position: absolute;
  inset: auto 4vw 1vh;
  height: 58vh;
  opacity: .5;
  color: var(--electric-fern);
}

.root-system svg { width: 100%; height: 100%; }
.root-system path,
.root-system circle,
.pressed-map path,
.pressed-map circle,
.lens path,
.lens circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.root-system circle,
.pressed-map circle,
.lens circle { fill: currentColor; }

.bento-cabinet {
  position: relative;
  width: min(1180px, 96vw);
  height: min(720px, 82vh);
  margin-top: 8vh;
  transform-style: preserve-3d;
}

.pane {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(246, 240, 220, .15), rgba(126, 249, 193, .05) 42%, rgba(36, 20, 58, .35)),
    radial-gradient(circle at 18% 14%, rgba(255, 159, 214, .18), transparent 38%);
  box-shadow: inset 0 1px 0 rgba(246, 240, 220, .28), 0 24px 70px rgba(0, 0, 0, .32);
  backdrop-filter: blur(18px) saturate(1.2);
  transform: translate3d(0, 18px, 0) rotate(var(--tilt, 0deg));
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease, border-color .6s ease, opacity .8s ease;
}

.pane.awake { opacity: 1; transform: translate3d(0, 0, var(--z, 0px)) rotate(var(--tilt, 0deg)); }
.pane:hover,
.pane.lifted {
  transform: translate3d(0, -12px, 80px) rotate(0deg) scale(1.018);
  border-color: rgba(126, 249, 193, .72);
  box-shadow: inset 0 1px 0 rgba(246, 240, 220, .5), 0 24px 90px rgba(126, 249, 193, .22), 0 0 70px rgba(201, 167, 255, .25);
}

.pane::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .4;
  background:
    linear-gradient(110deg, transparent 0 24%, rgba(246, 240, 220, .18) 26%, transparent 31% 100%),
    radial-gradient(circle at 76% 18%, rgba(246, 240, 220, .22) 0 1px, transparent 2px),
    radial-gradient(circle at 25% 82%, rgba(126, 249, 193, .24) 0 1px, transparent 2px);
  background-size: 100% 100%, 30px 30px, 44px 44px;
  pointer-events: none;
}

.pane::after {
  content: attr(data-label);
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  color: rgba(246, 240, 220, .86);
  font: italic 1rem/1.2 var(--serif);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}

.pane:hover::after { opacity: 1; transform: translateY(0); }

.pane-glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(246, 240, 220, .22), transparent 20%);
  opacity: .65;
  pointer-events: none;
}

.specimen-label {
  position: absolute;
  z-index: 3;
  top: .88rem;
  left: .95rem;
  padding: .36rem .58rem;
  border: 1px solid rgba(246, 240, 220, .2);
  border-radius: 999px;
  color: rgba(16, 19, 38, .86);
  background: rgba(246, 240, 220, .72);
  font-size: .58rem;
}

.pane h2,
.pane h3 {
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--dew-pearl);
}
.pane h2 { font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: .9; }
.pane h3 { font-size: 1.8rem; }
.pane p { position: relative; z-index: 2; color: rgba(246, 240, 220, .75); line-height: 1.55; }

.pane-world { left: 31%; top: 23%; width: 38%; height: 48%; padding: 3.2rem 2rem 2rem; --tilt: -.7deg; --z: 30px; }
.pane-vine { left: 7%; top: 17%; width: 18%; height: 55%; --tilt: 1.8deg; --z: 5px; }
.pane-dew { left: 24%; top: 3%; width: 22%; height: 18%; padding: 3rem 1rem 1rem; --tilt: -2.2deg; }
.pane-flower { right: 15%; top: 6%; width: 18%; height: 25%; padding: 3rem 1rem 1rem; --tilt: 1.1deg; --z: 20px; }
.pane-weather { right: 5%; top: 36%; width: 28%; height: 31%; padding: 3rem 1.4rem 1rem; --tilt: -1.4deg; }
.pane-sprite { left: 18%; bottom: 3%; width: 24%; height: 22%; padding: 3rem 1rem 1rem; --tilt: .8deg; }
.pane-lens { right: 25%; bottom: 0; width: 21%; height: 23%; --tilt: 2.2deg; }

.world-orb {
  position: absolute;
  right: 1.6rem;
  top: 4.6rem;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #F6F0DC, #78DFFF 18%, rgba(126, 249, 193, .18) 43%, rgba(36, 20, 58, .28) 70%);
  box-shadow: inset -18px -18px 28px rgba(16, 19, 38, .35), 0 0 34px rgba(120, 223, 255, .32);
}

.moon {
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  right: 34px; top: 30px;
  background: var(--dew-pearl);
  box-shadow: 0 0 20px rgba(246, 240, 220, .75);
}
.orbit { position: absolute; inset: 18px; border: 1px solid rgba(246, 240, 220, .28); border-radius: 50%; animation: spin 12s linear infinite; }
.orbit-two { inset: 35px 8px; transform: rotate(58deg); animation-duration: 18s; }

.mini-landscape { position: absolute; left: 10%; right: 10%; bottom: 24%; height: 58px; border-bottom: 1px solid rgba(126, 249, 193, .38); }
.mini-landscape i { position: absolute; bottom: 0; width: 1px; height: var(--h, 30px); background: linear-gradient(#7EF9C1, transparent); transform-origin: bottom; animation: sproutSway 5s ease-in-out infinite; }
.mini-landscape i:nth-child(1){ left: 8%; --h: 28px; }.mini-landscape i:nth-child(2){ left: 28%; --h: 45px; animation-delay: -.8s; }.mini-landscape i:nth-child(3){ left: 51%; --h: 35px; animation-delay: -1.6s; }.mini-landscape i:nth-child(4){ left: 70%; --h: 52px; animation-delay: -2.4s; }.mini-landscape i:nth-child(5){ left: 88%; --h: 24px; animation-delay: -3.2s; }

.vine-sim { position: absolute; inset: 3.2rem 1rem 2.8rem; width: calc(100% - 2rem); height: calc(100% - 6rem); color: var(--aurora-mint); }
.vine-sim path, .vine-sim circle { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: drawVine 5s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(126, 249, 193, .6)); }
.vine-sim circle { fill: var(--petal-rose); stroke: none; animation: nodePulse 3s ease-in-out infinite; }
.b1 { animation-delay: .5s !important; }.b2 { animation-delay: .9s !important; }.b3 { animation-delay: 1.2s !important; }

.dew-rain span,
.rain-lines i {
  position: absolute;
  top: -20%;
  width: 2px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(transparent, #78DFFF, #F6F0DC);
  box-shadow: 0 0 10px rgba(120, 223, 255, .5);
  animation: rainFall 2.8s linear infinite;
}
.dew-rain span:nth-child(1){ left: 16%; animation-delay: -.2s; }.dew-rain span:nth-child(2){ left: 31%; animation-delay: -.9s; }.dew-rain span:nth-child(3){ left: 48%; animation-delay: -1.7s; }.dew-rain span:nth-child(4){ left: 63%; animation-delay: -.5s; }.dew-rain span:nth-child(5){ left: 78%; animation-delay: -2.2s; }.dew-rain span:nth-child(6){ left: 88%; animation-delay: -1.2s; }

.probability-flower { position: absolute; left: 50%; top: 53%; width: 120px; height: 120px; transform: translate(-50%, -50%); }
.probability-flower span { position: absolute; left: 45px; top: 8px; width: 30px; height: 58px; border-radius: 999px 999px 10px 10px; background: linear-gradient(#FF9FD6, rgba(201, 167, 255, .44)); transform-origin: 15px 52px; box-shadow: 0 0 16px rgba(255, 159, 214, .35); animation: flowerOpen 5s ease-in-out infinite; }
.probability-flower span:nth-child(2){ transform: rotate(60deg); }.probability-flower span:nth-child(3){ transform: rotate(120deg); }.probability-flower span:nth-child(4){ transform: rotate(180deg); }.probability-flower span:nth-child(5){ transform: rotate(240deg); }.probability-flower span:nth-child(6){ transform: rotate(300deg); }
.probability-flower b { position: absolute; inset: 44px; border-radius: 50%; background: var(--aurora-mint); box-shadow: 0 0 20px rgba(126, 249, 193, .6); }
.caption { position: absolute !important; bottom: 1rem; left: 1rem; font-family: var(--serif); font-style: italic; }

.weather-sky { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 12%, rgba(120, 223, 255, .24), transparent 36%), linear-gradient(165deg, rgba(126, 249, 193, .1), transparent 55%); }
.cloud { position: absolute; left: 25%; top: 28%; width: 120px; height: 42px; border-radius: 999px; background: rgba(246, 240, 220, .2); filter: blur(1px); animation: cloudFloat 7s ease-in-out infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }.cloud::before { width: 64px; height: 64px; left: 14px; top: -26px; }.cloud::after { width: 76px; height: 76px; right: 5px; top: -37px; }
.rain-lines i:nth-child(1){ left: 22%; animation-delay: -.1s; }.rain-lines i:nth-child(2){ left: 34%; animation-delay: -1.6s; }.rain-lines i:nth-child(3){ left: 43%; animation-delay: -.8s; }.rain-lines i:nth-child(4){ left: 56%; animation-delay: -2.2s; }.rain-lines i:nth-child(5){ left: 67%; animation-delay: -1.1s; }.rain-lines i:nth-child(6){ left: 76%; animation-delay: -.4s; }.rain-lines i:nth-child(7){ left: 86%; animation-delay: -1.9s; }

.sprite-silhouette { position: absolute; left: 50%; top: 48%; width: 82px; height: 82px; transform: translate(-50%, -50%); }
.sprite-silhouette::before { content: ""; position: absolute; left: 30px; top: 28px; width: 24px; height: 35px; border-radius: 50% 50% 45% 45%; background: rgba(16, 19, 38, .62); box-shadow: 0 0 25px rgba(201, 167, 255, .42); }
.wing { position: absolute; top: 8px; width: 44px; height: 62px; border: 1px solid rgba(126, 249, 193, .72); border-radius: 72% 28% 76% 24%; background: radial-gradient(circle at 50% 40%, rgba(126, 249, 193, .12), transparent 58%); animation: wingBeat 2.8s ease-in-out infinite; }
.wing.left { left: 0; transform-origin: right center; }.wing.right { right: 0; transform-origin: left center; transform: scaleX(-1); }
.eye { position: absolute; left: 48px; top: 36px; width: 6px; height: 6px; border-radius: 50%; background: var(--dew-pearl); box-shadow: 0 0 12px var(--dew-pearl); }

.lens { position: absolute; left: 50%; top: 53%; width: min(80%, 170px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 28% 22%, rgba(246, 240, 220, .6), rgba(126, 249, 193, .16) 35%, rgba(16, 19, 38, .14) 70%); border: 1px solid rgba(246, 240, 220, .45); box-shadow: inset 0 0 28px rgba(246, 240, 220, .18), 0 0 25px rgba(120, 223, 255, .2); }
.lens svg { width: 100%; height: 100%; color: var(--electric-fern); padding: 18px; }

.moon-archive {
  display: grid;
  place-items: center;
  padding-top: 7rem;
}
.archive-card {
  width: min(920px, 92vw);
  padding: clamp(1.6rem, 5vw, 4rem);
  border: 1px solid rgba(246, 240, 220, .24);
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(246, 240, 220, .16), rgba(201, 167, 255, .08), rgba(16, 19, 38, .48));
  backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(246, 240, 220, .3), 0 32px 90px rgba(0, 0, 0, .35);
}
.archive-card h2 { font: 400 clamp(3.4rem, 8vw, 7rem)/.92 var(--ornate); color: var(--dew-pearl); }
.archive-card p:not(.coordinate) { max-width: 680px; margin-top: 1rem; font: 400 clamp(1.25rem, 2vw, 1.7rem)/1.45 var(--serif); color: rgba(246, 240, 220, .78); }
.pressed-map { width: 100%; height: 260px; margin-top: 2rem; color: var(--aurora-mint); filter: drop-shadow(0 0 14px rgba(126, 249, 193, .35)); }
.pressed-map path { stroke-width: 2; stroke-dasharray: 900; animation: archiveDraw 8s ease-in-out infinite alternate; }
.flower-node circle { fill: rgba(255, 159, 214, .55); stroke: rgba(246, 240, 220, .58); }

.moon-progress {
  position: fixed;
  z-index: 12;
  right: 1.15rem;
  top: 50%;
  width: 12px;
  height: 120px;
  transform: translateY(-50%);
  border: 1px solid rgba(246, 240, 220, .22);
  border-radius: 999px;
  background: rgba(16, 19, 38, .42);
  overflow: hidden;
}
.moon-progress span { position: absolute; left: 2px; right: 2px; top: 2px; height: var(--progress, 12%); border-radius: 999px; background: linear-gradient(#F6F0DC, #C9A7FF, #7EF9C1); box-shadow: 0 0 12px rgba(126, 249, 193, .55); }

.dew-cursor {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--dew-pearl);
  box-shadow: 0 0 16px rgba(246, 240, 220, .8), 0 0 30px rgba(126, 249, 193, .4);
  transform: translate3d(-50px, -50px, 0);
}
.dew-cursor::before,
.dew-cursor::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 20px;
  height: 25px;
  border: 1px solid rgba(126, 249, 193, .45);
  opacity: .7;
}
.dew-cursor::before { right: 7px; border-radius: 80% 20% 80% 20%; transform: rotate(-18deg); }
.dew-cursor::after { left: 7px; border-radius: 20% 80% 20% 80%; transform: rotate(18deg); }
.dew-cursor.hovering { background: var(--aurora-mint); }

@keyframes auroraDrift { from { transform: translateX(-8vw) rotate(-8deg) scaleY(.9); } to { transform: translateX(10vw) rotate(-3deg) scaleY(1.18); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sproutSway { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
@keyframes drawVine { 0% { stroke-dashoffset: 420; opacity: .45; } 48%, 76% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -420; opacity: .5; } }
@keyframes nodePulse { 0%, 100% { transform: scale(.75); opacity: .55; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes rainFall { from { transform: translateY(-20px); opacity: 0; } 12% { opacity: 1; } to { transform: translateY(310px); opacity: 0; } }
@keyframes flowerOpen { 0%, 100% { scale: .58; opacity: .62; } 52% { scale: 1.08; opacity: .95; } }
@keyframes cloudFloat { 0%, 100% { transform: translateX(-18px); } 50% { transform: translateX(28px); } }
@keyframes wingBeat { 0%, 100% { rotate: -4deg; scale: .96; } 50% { rotate: 8deg; scale: 1.04; } }
@keyframes archiveDraw { from { stroke-dashoffset: 880; } to { stroke-dashoffset: 0; } }

@media (max-width: 860px) {
  body { cursor: auto; }
  .dew-cursor { display: none; }
  .herbarium-tabs { max-width: calc(100vw - 1rem); overflow: auto; justify-content: flex-start; }
  .bento-cabinet { height: auto; display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 26vh; }
  .pane { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; height: 280px; }
  .pane-world { height: 380px; }
  .wordmark-wrap { top: 5.2rem; width: calc(100vw - 2rem); padding-inline: 1rem; }
  .chapter { padding-inline: 1rem; }
}